Spaces:
Running
Running
| :root { | |
| /* Identidade Visual - Governo do Ceará */ | |
| --ceara-green-1: #26a737; | |
| --ceara-green-2: #008241; | |
| --ceara-green-3: #5db12f; | |
| --ceara-orange-1: #f59c00; | |
| --ceara-orange-2: #e94f0e; | |
| --ceara-yellow: #fccf05; | |
| /* Backgrounds Baseados no Escudo Ceará */ | |
| --bg-dark-base: #13171b; /* Muito escuro, quase preto com toque de slate */ | |
| --bg-dark-card: rgba(27, 34, 41, 0.65); /* #1b2229 Translúcido */ | |
| --bg-glass-border: rgba(255, 255, 255, 0.08); | |
| /* Texts */ | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #a0aebc; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-dark-base); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| min-height: 100vh; | |
| } | |
| /* Background Glow Effects */ | |
| .glow-bg { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(120px); | |
| z-index: -1; | |
| opacity: 0.4; | |
| } | |
| .glow-1 { | |
| top: -10%; left: -10%; | |
| width: 600px; height: 600px; | |
| background: radial-gradient(circle, var(--ceara-green-2) 0%, transparent 70%); | |
| } | |
| .glow-2 { | |
| bottom: -10%; right: -5%; | |
| width: 500px; height: 500px; | |
| background: radial-gradient(circle, var(--ceara-orange-2) 0%, transparent 70%); | |
| } | |
| .glow-3 { | |
| top: 40%; left: 40%; | |
| width: 400px; height: 400px; | |
| background: radial-gradient(circle, #2a333c 0%, transparent 70%); | |
| opacity: 0.6; | |
| } | |
| /* Navbar */ | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem 5%; | |
| background: rgba(19, 23, 27, 0.8); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--bg-glass-border); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| font-size: 1.4rem; | |
| font-weight: 800; | |
| } | |
| .nav-brand .icon { | |
| font-size: 1.8rem; | |
| } | |
| .nav-links { | |
| list-style: none; | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| font-size: 0.95rem; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover, .nav-links a.active { | |
| color: var(--text-primary); | |
| } | |
| .nav-links a.active { | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 0.4rem 1rem; | |
| border-radius: 20px; | |
| } | |
| .nav-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| /* Buttons */ | |
| button { | |
| font-family: 'Inter', sans-serif; | |
| cursor: pointer; | |
| font-weight: 600; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--ceara-orange-1), var(--ceara-orange-2)); | |
| color: #111; | |
| border: none; | |
| padding: 0.6rem 1.2rem; | |
| box-shadow: 0 4px 15px rgba(245, 156, 0, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(245, 156, 0, 0.5); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| padding: 0.6rem 1.2rem; | |
| } | |
| .btn-outline:hover { | |
| background: rgba(255,255,255,0.05); | |
| } | |
| .btn-glass { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--bg-glass-border); | |
| backdrop-filter: blur(10px); | |
| color: var(--text-primary); | |
| padding: 0.6rem 1.2rem; | |
| } | |
| .btn-glass:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| button.large { | |
| padding: 1rem 2rem; | |
| font-size: 1.1rem; | |
| border-radius: 12px; | |
| } | |
| /* Glassmorphism Classes */ | |
| .glass-card { | |
| background: var(--bg-dark-card); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 1px solid var(--bg-glass-border); | |
| border-radius: 24px; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 3rem 2rem; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 4rem; | |
| margin-bottom: 3rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-content { | |
| flex: 1; | |
| max-width: 60%; | |
| z-index: 2; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| padding: 0.4rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| margin-bottom: 1.5rem; | |
| } | |
| .dot { | |
| width: 8px; height: 8px; | |
| background: var(--ceara-green-1); | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px var(--ceara-green-1); | |
| } | |
| .hero-title { | |
| font-size: 3.8rem; | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-title span { | |
| background: linear-gradient(135deg, var(--ceara-green-1), #87D1E6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.1rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 2.5rem; | |
| line-height: 1.6; | |
| max-width: 90%; | |
| } | |
| .hero-stats { | |
| display: flex; | |
| gap: 2.5rem; | |
| margin-bottom: 2.5rem; | |
| } | |
| .stat h3 { | |
| font-size: 1.8rem; | |
| color: var(--ceara-yellow); | |
| margin-bottom: 0.2rem; | |
| } | |
| .stat p { | |
| font-size: 0.75rem; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| /* Hero Visual */ | |
| .hero-visual { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .glowing-circle { | |
| width: 320px; | |
| height: 320px; | |
| border-radius: 50%; | |
| padding: 4px; | |
| background: linear-gradient(135deg, var(--ceara-green-1), var(--ceara-yellow)); | |
| position: relative; | |
| animation: pulse 4s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 30px rgba(38, 167, 55, 0.4); } | |
| 100% { box-shadow: 0 0 60px rgba(252, 207, 5, 0.6); } | |
| } | |
| .hero-img { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| background: var(--bg-dark-base); | |
| border: 4px solid var(--bg-dark-base); | |
| } | |
| .floating-badge { | |
| position: absolute; | |
| background: rgba(19, 23, 27, 0.8); | |
| backdrop-filter: blur(8px); | |
| border: 1px solid var(--ceara-orange-1); | |
| padding: 0.5rem 1rem; | |
| border-radius: 12px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| } | |
| .badge-top { top: 10%; right: 0; } | |
| .badge-bottom { bottom: 10%; left: 0; border-color: var(--ceara-green-1); } | |
| /* Tools Grid */ | |
| .section-title { | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .tool-card { | |
| padding: 2rem; | |
| cursor: pointer; | |
| transition: transform 0.3s, background 0.3s; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .tool-icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.2); | |
| } | |
| .tool-card h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| .tool-card p { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| /* Modals */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; left: 0; width: 100%; height: 100%; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(8px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .modal-content { | |
| width: 90%; | |
| max-width: 600px; | |
| padding: 2.5rem; | |
| position: relative; | |
| transform: translateY(20px); | |
| transition: transform 0.3s; | |
| } | |
| .modal-overlay.active .modal-content { | |
| border-radius: 8px; | |
| z-index: 1000; | |
| transform: translateY(0); | |
| } | |
| /* Modal Grande */ | |
| .modal-lg .modal-content { | |
| max-width: 90vw; | |
| height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .modal-lg #modal-body { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 20px; | |
| font-size: 1.5rem; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| .close-modal:hover { | |
| color: var(--text-primary); | |
| } | |
| /* Page Previews (SortableJS) */ | |
| .page-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .page-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| padding: 10px; | |
| text-align: center; | |
| cursor: grab; | |
| transition: 0.2s; | |
| position: relative; | |
| user-select: none; | |
| } | |
| .page-card:active { | |
| cursor: grabbing; | |
| } | |
| .page-card.deleted { | |
| opacity: 0.3; | |
| border-color: #e94f0e; | |
| } | |
| .page-card img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.3); | |
| margin-bottom: 8px; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0.2s; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .page-card:hover img { | |
| transform: scale(3.0); | |
| z-index: 100; | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.6); | |
| } | |
| .page-card .page-label { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| .page-card .delete-btn { | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| background: #e94f0e; | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| display: none; | |
| } | |
| .page-card:hover .delete-btn { | |
| display: block; | |
| } | |
| .sortable-ghost { | |
| opacity: 0.4; | |
| background: var(--ceara-orange-1); | |
| } | |
| /* Responsividade */ | |
| .upload-area { | |
| border: 2px dashed rgba(255,255,255,0.2); | |
| border-radius: 12px; | |
| padding: 3rem; | |
| text-align: center; | |
| margin: 1.5rem 0; | |
| cursor: pointer; | |
| transition: border 0.3s, background 0.3s; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--ceara-green-1); | |
| background: rgba(38, 167, 55, 0.05); | |
| } | |
| .input-group { margin-bottom: 1.5rem; } | |
| .input-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--text-secondary); } | |
| .input-group input, .input-group select { | |
| width: 100%; | |
| padding: 0.8rem 1rem; | |
| background: rgba(0,0,0,0.2); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| border-radius: 8px; | |
| color: white; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .input-group input:focus, .input-group select:focus { | |
| outline: none; | |
| border-color: var(--ceara-green-1); | |
| } | |