/* ===================================================================== Canal de Integridade e Relacionamento — Pontual Petróleo Interface pública (index.php) Estrutura por camadas: Tokens > Base > Layout > Componentes > Responsivo ===================================================================== */ /* ---------- 1. Tokens de tema ---------- */ /* Identidade visual Pontual Petróleo: azul (#18216e/#18216e) — nova-interface. Tema ESCURO (marca) é o padrão — ver .dark-theme aplicado no . */ /* Tema CLARO (opcional via toggle) — fundo claro, dourado no destaque, navy nos títulos */ :root { --bg-main: #f6f9fb; --bg-panel: #ffffff; --bg-card: #ffffff; --bg-soft: #f1f5f9; --bg-input: #ffffff; --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.18); --text-head: #0f172a; --text-main: #334155; --text-muted: #5b6a80; --primary: #18216e; --primary-dark: #141b57; --accent: #18216e; --success: #15803d; --shadow: 0 20px 55px rgba(15, 23, 42, 0.10); --shadow-sm: 0 10px 26px rgba(15, 23, 42, 0.08); --glow-1: rgba(24, 33, 110, 0.12); --glow-2: rgba(15, 23, 42, 0.05); } /* Tema ESCURO (marca — PADRÃO): azul (#18216e/#18216e) — nova-interface */ .dark-theme { --bg-main: #0f172a; --bg-panel: #1e293b; --bg-card: #1e293b; --bg-soft: #172033; --bg-input: rgba(255, 255, 255, 0.04); --border: #334155; --border-strong: #475569; --text-head: #e2e8f0; --text-main: #cbd5e1; --text-muted: #94a3b8; --primary: #18216e; --primary-dark: #141b57; --accent: #3f52b6; --success: #22c55e; --shadow: 0 24px 80px rgba(0, 0, 0, 0.55); --shadow-sm: 0 14px 34px rgba(0, 0, 0, 0.40); --glow-1: rgba(24, 33, 110, 0.14); --glow-2: rgba(24, 33, 110, 0.07); } /* ---------- 2. Base ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; background: radial-gradient(circle at top left, var(--glow-1), transparent 32%), radial-gradient(circle at bottom right, var(--glow-2), transparent 30%), var(--bg-main); color: var(--text-main); line-height: 1.7; transition: background-color 0.3s ease, color 0.3s ease; } img { max-width: 100%; display: block; } a { color: inherit; } .container { width: min(1180px, 100%); margin: 0 auto; padding-inline: clamp(16px, 4vw, 24px); } /* ---------- 3. Navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 200; background: color-mix(in srgb, var(--bg-main) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav-content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; } .logo { display: inline-flex; align-items: center; flex-shrink: 0; } .logo-img { height: 40px; width: auto; } .brand-marca { height: 38px; width: auto; object-fit: contain; } /* Troca de logo conforme o tema (clara no tema claro, branca no escuro) */ .logo-dark { display: none; } .dark-theme .logo-light { display: none; } .dark-theme .logo-dark { display: block; } /* Logomarca por variante de fundo */ .logo-dark-only { display: none; } .logo-light-only { display: block; } .dark-theme .logo-light-only { display: none; } .dark-theme .logo-dark-only { display: block; } /* Botão hamburguer (mobile) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-soft); cursor: pointer; } .nav-toggle span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--text-head); transition: transform 0.25s ease, opacity 0.25s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; } .nav-links a { color: var(--text-main); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.2s ease; } .nav-links a:hover { color: var(--primary); } /* Dropdown */ .dropdown { position: relative; } .dropbtn { cursor: pointer; user-select: none; } .dropdown-content { position: absolute; top: calc(100% + 12px); right: 0; min-width: 210px; display: none; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--bg-panel); border: 1px solid var(--border); box-shadow: var(--shadow); } .dropdown.open .dropdown-content { display: flex; } .dropdown-content a { padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; } .dropdown-content a:hover { background: var(--bg-soft); color: var(--primary); } /* Botão de tema */ .theme-btn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-head); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease, background-color 0.25s ease; } .theme-btn:hover { transform: translateY(-1px); background: var(--border); } /* ---------- 4. Hero ---------- */ .hero { text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 3.5rem); } .hero .badge { display: inline-flex; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary) 8%, transparent); padding: 9px 20px; border-radius: 999px; text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.72rem; font-weight: 600; margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; color: var(--text-head); max-width: 900px; margin: 0 auto 1.3rem; } .hero p { max-width: 720px; margin: 0 auto; color: var(--text-muted); font-size: clamp(0.98rem, 2.5vw, 1.1rem); } /* ---------- 5. Missão / Visão / Valores ---------- */ .mvv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: clamp(2.5rem, 6vw, 4rem) 0; } .mvv-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; padding: clamp(1.6rem, 4vw, 2.3rem); box-shadow: var(--shadow-sm); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .mvv-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--primary) 35%, transparent); box-shadow: var(--shadow); } .card-header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; } .card-header svg { width: 34px; height: 34px; stroke: var(--primary); flex-shrink: 0; } .mvv-card h3 { font-size: 1.25rem; color: var(--text-head); } .mvv-card p { color: var(--text-muted); } /* ---------- 6. Grid principal (diretrizes + formulário) ---------- */ .main-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-bottom: clamp(3rem, 8vw, 5rem); } .guidelines, .form-wrapper { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-sm); } .guidelines { padding: clamp(1.6rem, 4vw, 2.2rem); } .guidelines h2 { font-size: 1.45rem; color: var(--text-head); margin-bottom: 1rem; } .guidelines p { color: var(--text-muted); } .support-block { margin-top: 2rem; } .support-title { font-weight: 600; color: var(--primary); margin-bottom: 1rem; } .support-list { display: flex; flex-direction: column; gap: 1rem; } .support-list span { font-size: 0.9rem; color: var(--text-muted); } .support-list strong { color: var(--text-head); word-break: break-word; } .form-wrapper { padding: clamp(1.6rem, 4vw, 2.6rem); } .form-wrapper form { display: grid; gap: 1rem; } /* Toggle anônimo / identificar */ .toggle-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--border); } .toggle-text { color: var(--text-main); font-weight: 600; font-size: 0.95rem; } .switch { position: relative; flex-shrink: 0; width: 54px; height: 30px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; border-radius: 9999px; background: var(--border-strong); transition: background-color 0.3s ease; cursor: pointer; } .slider:before { content: ""; position: absolute; left: 3px; bottom: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; } input:checked + .slider { background: var(--primary); } input:checked + .slider:before { transform: translateX(24px); } /* Campos identificáveis (exibidos via JS quando "Identificar-me" está ativo) */ .hidden-fields { display: none; gap: 1rem; } /* Inputs */ input[type="text"], input[type="email"], select, textarea { width: 100%; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-head); padding: 15px 16px; font-size: 1rem; font-family: inherit; transition: border-color 0.25s ease, box-shadow 0.25s ease; } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); } textarea { min-height: 180px; resize: vertical; line-height: 1.6; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7a92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .submit-btn { width: 100%; border: 1px solid #141b57; border-radius: 14px; /* Dourado metálico: destaque -> médio -> sombra */ background: #18216e; color: #ffffff; padding: 17px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.2px; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; } .submit-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 32px rgba(24, 33, 110, 0.35); } /* ---------- 7. Footer ---------- */ .footer { color: var(--text-muted); text-align: center; padding: 2.5rem 0; border-top: 1px solid var(--border); font-size: 0.88rem; } .footer-logo { height: 54px; width: auto; margin: 0 auto 14px; display: block; } .powered-by { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; margin-bottom: 1rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-soft); } .powered-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .powered-names { font-weight: 700; color: var(--accent); letter-spacing: 0.01em; } .footer .copyright { margin: 0; } /* ---------- 8. Responsivo ---------- */ @media (max-width: 940px) { .main-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { /* Ativa o menu mobile */ .nav-toggle { display: flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.25rem; padding: 12px; background: var(--bg-panel); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-links > li > a, .nav-links .dropbtn { display: block; padding: 12px 14px; border-radius: 12px; } .nav-links > li > a:hover, .nav-links .dropbtn:hover { background: var(--bg-soft); } /* Dropdown vira acordeão dentro do menu */ .dropdown-content { position: static; display: none; min-width: 0; margin: 4px 0 4px 12px; box-shadow: none; background: var(--bg-soft); } .dropdown.open .dropdown-content { display: flex; } .theme-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; } .theme-btn::after { content: "Alternar tema"; font-size: 0.95rem; font-weight: 500; color: var(--text-main); } } /* Ponteiros com hover real: abre dropdown ao passar o mouse (desktop) */ @media (hover: hover) and (min-width: 761px) { .dropdown:hover .dropdown-content { display: flex; } }