/* ============================================================ AMAPÁ JOVEM — CSS DA PÁGINA DE INSCRIÇÃO Isolado dentro de .paj-inscricao para não conflitar com Bootstrap Arquivo: public/css/portal/inscricao/inscricao.css ============================================================ */ /* Fontes necessárias — adicione no do template_portal.blade.php: */ /* ── WRAPPER PRINCIPAL ── */ .paj-inscricao { font-family: 'Nunito Sans', sans-serif; color: var(--paj-dark); background: var(--paj-gray-bg); } /* ── BARRA DE PASSOS ── */ .paj-inscricao .steps-wrap { background: var(--paj-white); border-bottom: 2px solid var(--paj-gray-border); padding: 0 40px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .paj-inscricao .steps-inner { max-width: 1060px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; } .paj-inscricao .steps-inner::before { content: ''; position: absolute; top: 32px; left: 80px; right: 80px; height: 2px; background: var(--paj-gray-border); z-index: 0; } .paj-inscricao .step-item { display: flex; flex-direction: column; align-items: center; padding: 14px 12px 10px; gap: 6px; position: relative; z-index: 1; flex: 1; border-bottom: 3px solid transparent; transition: border-color .2s; } .paj-inscricao .step-item.active { border-bottom-color: var(--paj-orange); } .paj-inscricao .step-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--paj-gray-bg); border: 2px solid var(--paj-gray-border); display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px; color: var(--paj-gray-text); transition: all .2s; } .paj-inscricao .step-item.active .step-icon { background: var(--paj-orange-light); border-color: var(--paj-orange); color: var(--paj-orange); } .paj-inscricao .step-item.done .step-icon { background: var(--paj-green-light); border-color: var(--paj-green); color: var(--paj-green); } .paj-inscricao .step-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--paj-gray-text); text-align: center; line-height: 1.35; } .paj-inscricao .step-item.active .step-label { color: var(--paj-orange); } .paj-inscricao .step-item.done .step-label { color: var(--paj-green); } /* ── CONTEÚDO PRINCIPAL ── */ .paj-inscricao .main-wrap { max-width: 1060px; margin: 28px auto; padding: 0 20px 80px; width: 100%; } /* ── CARD DO FORMULÁRIO ── */ .paj-inscricao .form-card { background: var(--paj-white); border-radius: 14px; border: 2px solid var(--paj-orange); box-shadow: 0 4px 28px rgba(0,0,0,0.08); overflow: hidden; } .paj-inscricao .card-top { padding: 26px 36px 20px; border-bottom: 1px solid #f0f0f0; background: linear-gradient(to right, #FFFAF7, white); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .paj-inscricao .card-top h2 { font-family: 'Nunito', sans-serif; font-size: 21px; font-weight: 900; color: var(--paj-dark); margin-bottom: 4px; } .paj-inscricao .card-top p { font-size: 14px; color: #666; margin: 0; } .paj-inscricao .step-badge { background: var(--paj-orange); color: white; border-radius: 20px; padding: 5px 14px; font-size: 11px; font-family: 'Nunito', sans-serif; font-weight: 800; white-space: nowrap; flex-shrink: 0; text-transform: uppercase; letter-spacing: .06em; } .paj-inscricao .card-body { padding: 30px 36px 26px; } /* ── SEÇÕES ── */ .paj-inscricao .section-block { border-top: 2px solid #f0f0f0; padding-top: 26px; margin-top: 26px; } .paj-inscricao .section-block:first-child { border-top: none; padding-top: 0; margin-top: 0; } .paj-inscricao .section-title { font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 800; color: var(--paj-dark); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; } .paj-inscricao .section-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paj-orange); color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0; } /* ── GRID DE CAMPOS ── */ .paj-inscricao .fields-grid { display: grid; gap: 16px 22px; margin-bottom: 16px; } .paj-inscricao .cols-1 { grid-template-columns: 1fr; } .paj-inscricao .cols-2 { grid-template-columns: 1fr 1fr; } .paj-inscricao .cols-3 { grid-template-columns: 1fr 1fr 1fr; } .paj-inscricao .cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .paj-inscricao .field { display: flex; flex-direction: column; gap: 6px; } .paj-inscricao .field.span-2 { grid-column: span 2; } .paj-inscricao .field.span-3 { grid-column: span 3; } .paj-inscricao .field.span-4 { grid-column: span 4; } .paj-inscricao .field label { font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0; } .paj-inscricao .field label .req, .paj-inscricao .req { color: var(--paj-orange); font-weight: 700; } .paj-inscricao .field input, .paj-inscricao .field select, .paj-inscricao .field textarea { width: 100%; padding: 10px 13px; border-radius: 8px; border: 1.5px solid var(--paj-gray-border); background: #FAFAFA; font-size: 14px; color: #333; font-family: 'Nunito Sans', sans-serif; outline: none; transition: border-color .2s, background .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; box-shadow: none; height: auto; } .paj-inscricao .field input:focus, .paj-inscricao .field select:focus, .paj-inscricao .field textarea:focus { border-color: var(--paj-orange); background: #fff; box-shadow: 0 0 0 3px rgba(232,82,10,0.09); } .paj-inscricao .field textarea { resize: vertical; min-height: 80px; } .paj-inscricao .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-color: #FAFAFA; padding-right: 34px; } /* ── CAIXAS DE INFORMAÇÃO ── */ .paj-inscricao .info-box { background: #EAF4FB; border: 1px solid #B8D9EF; border-left: 4px solid #2980b9; border-radius: 6px; padding: 13px 16px; font-size: 13px; color: #2c3e50; margin-bottom: 16px; line-height: 1.7; } .paj-inscricao .info-box strong { color: #1a252f; font-weight: 700; } .paj-inscricao .required-note { background: #EAF4FB; border: 1px solid #B8D9EF; border-left: 4px solid #2980b9; border-radius: 6px; padding: 10px 16px; font-size: 13px; color: #2c3e50; margin-bottom: 20px; line-height: 1.6; } /* ── SUBSECTION ── */ .paj-inscricao .subsection-label { font-size: 13px; font-weight: 700; color: var(--paj-dark2); background: #f8f9ff; border-radius: 6px; padding: 7px 13px; margin-bottom: 14px; margin-top: 4px; border-left: 3px solid var(--paj-dark2); } /* ── BLOCOS PAJ ── */ .paj-inscricao .paj-block { border: 1.5px solid var(--paj-gray-border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .paj-inscricao .paj-header { background: var(--paj-dark); color: white; padding: 9px 16px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .06em; } .paj-inscricao .paj-body { padding: 18px 18px 14px; background: #fafafa; } /* ── AÇÕES DO CARD ── */ .paj-inscricao .card-actions { padding: 18px 36px 26px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f0f0; } .paj-inscricao .btn-back { font-family: 'Nunito', sans-serif; background: transparent; border: 1.5px solid var(--paj-gray-border); border-radius: 8px; padding: 10px 24px; font-size: 14px; font-weight: 700; color: #666; cursor: pointer; transition: all .2s; } .paj-inscricao .btn-back:hover { border-color: #aaa; background: #f5f5f5; } .paj-inscricao .btn-back:disabled { opacity: .35; cursor: default; pointer-events: none; } .paj-inscricao .btn-next { padding: 11px 34px; border-radius: 8px; border: none; background: var(--paj-orange); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 4px 14px rgba(232,82,10,0.28); transition: all .2s; } .paj-inscricao .btn-next:hover { opacity: .9; transform: translateY(-1px); } /* ── BOTÃO VALIDAR ── */ .paj-inscricao .btn-validate { display: inline-flex; align-items: center; gap: 9px; padding: 13px 30px; border-radius: 9px; border: none; background: var(--paj-orange); color: #fff; font-weight: 800; font-size: 15px; font-family: 'Nunito', sans-serif; cursor: pointer; white-space: nowrap; flex-shrink: 0; box-shadow: 0 4px 16px rgba(232,82,10,0.32); transition: all .2s; letter-spacing: .01em; } .paj-inscricao .btn-validate:hover { background: #d4480a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,82,10,0.38); } /* ── PASSOS (visibilidade) ── */ .paj-inscricao .step-page { display: none; } .paj-inscricao .step-page.active { display: block; } .paj-inscricao .step-rest { display: none; } .paj-inscricao .step-rest.revealed { display: block; animation: pajFadeSlideIn .4s ease; } @keyframes pajFadeSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ── GATE DE VALIDAÇÃO ── */ .paj-inscricao .validate-gate { margin-top: 28px; border-radius: 12px; overflow: hidden; border: 1.5px solid var(--paj-orange); box-shadow: 0 4px 20px rgba(232,82,10,0.12); } .paj-inscricao .validate-gate-top { background: var(--paj-orange); padding: 14px 24px; display: flex; align-items: center; gap: 10px; } .paj-inscricao .validate-gate-top h3 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px; color: #fff; margin: 0; } .paj-inscricao .validate-gate-top p { font-size: 13px; color: rgba(255,255,255,0.85); margin: 2px 0 0; } .paj-inscricao .validate-gate-body { background: #fff9f7; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .paj-inscricao .validate-step-pill { display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--paj-gray-border); border-radius: 20px; padding: 6px 13px; font-size: 12px; font-weight: 700; color: #555; white-space: nowrap; } .paj-inscricao .validate-step-pill .pill-num { width: 18px; height: 18px; border-radius: 50%; background: var(--paj-orange); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── COMPROVANTE ── */ .paj-inscricao .comprovante-wrap { padding: 36px; } .paj-inscricao .comprovante-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--paj-orange); padding-bottom: 18px; margin-bottom: 24px; } .paj-inscricao .comprovante-header .org { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 18px; color: var(--paj-dark); } .paj-inscricao .comprovante-header .org small { display: block; font-size: 12px; font-weight: 600; color: #666; margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; } .paj-inscricao .comprovante-proto { text-align: right; } .paj-inscricao .comprovante-proto .proto-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-bottom: 4px; } .paj-inscricao .comprovante-proto .proto-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 18px; color: var(--paj-orange); letter-spacing: .08em; } .paj-inscricao .comprovante-success-badge { display: flex; align-items: center; gap: 10px; background: var(--paj-green-light); border: 1.5px solid var(--paj-green); border-radius: 10px; padding: 12px 18px; margin-bottom: 24px; font-size: 14px; font-weight: 700; color: var(--paj-green); } .paj-inscricao .comp-section { margin-bottom: 20px; } .paj-inscricao .comp-section-title { font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--paj-orange); border-bottom: 1.5px solid var(--paj-orange-light); padding-bottom: 6px; margin-bottom: 12px; } .paj-inscricao .comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .paj-inscricao .comp-field { font-size: 13px; } .paj-inscricao .comp-field .cf-label { color: #888; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .paj-inscricao .comp-field .cf-value { color: var(--paj-dark); font-weight: 700; } .paj-inscricao .comp-field.full { grid-column: span 2; } /* ── TABELA DE RESUMO ── */ .paj-inscricao .summary-group { margin-bottom: 20px; } .paj-inscricao .summary-group-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 13px; color: white; background: var(--paj-dark); border-radius: 6px 6px 0 0; padding: 8px 14px; letter-spacing: .05em; text-transform: uppercase; } .paj-inscricao .summary-table { width: 100%; border-collapse: collapse; border: 1.5px solid var(--paj-gray-border); border-top: none; } .paj-inscricao .summary-table tr:nth-child(even) { background: #f8f9ff; } .paj-inscricao .summary-table td { padding: 9px 14px; font-size: 13px; border-bottom: 1px solid #eee; vertical-align: top; } .paj-inscricao .summary-table td:first-child { color: #666; font-weight: 600; width: 40%; } .paj-inscricao .summary-table td:last-child { color: var(--paj-dark); font-weight: 700; } .paj-inscricao .summary-table tr:last-child td { border-bottom: none; } /* ── TERMOS ── */ .paj-inscricao .terms-row { display: flex; align-items: flex-start; gap: 12px; background: #FAFAFA; border: 1.5px solid var(--paj-gray-border); border-radius: 10px; padding: 15px 17px; margin-top: 18px; } .paj-inscricao .terms-row input[type=checkbox] { accent-color: var(--paj-orange); width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; cursor: pointer; } .paj-inscricao .terms-row label { font-size: 13px; color: #444; line-height: 1.7; cursor: pointer; text-transform: none; font-weight: 400; letter-spacing: 0; } /* ── BOTÃO IMPRIMIR ── */ .paj-inscricao .btn-print { padding: 11px 34px; border-radius: 8px; border: none; background: var(--paj-orange); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; font-family: 'Nunito', sans-serif; box-shadow: 0 4px 14px rgba(232,82,10,0.28); } .paj-inscricao .print-btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 28px; margin-bottom: 26px; flex-wrap: wrap; } /* ── SUCESSO ── */ .paj-inscricao .success-wrap { text-align: center; padding: 56px 40px; } .paj-inscricao .success-icon { width: 76px; height: 76px; border-radius: 50%; background: var(--paj-green-light); border: 3px solid var(--paj-green); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 32px; } .paj-inscricao .protocol-box { display: inline-block; background: var(--paj-orange-light); border: 1.5px solid var(--paj-orange); border-radius: 10px; padding: 12px 26px; margin-bottom: 24px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 19px; color: var(--paj-orange); letter-spacing: .1em; } /* ── PRINT ── */ @media print { .paj-inscricao .steps-wrap, .paj-inscricao .card-actions, .paj-inscricao .print-btn-row, .paj-inscricao #page-0, .paj-inscricao #page-1, .paj-inscricao #page-2, .paj-inscricao #page-3 { display: none !important; } .paj-inscricao .main-wrap { margin: 0; padding: 0; } .paj-inscricao .form-card { border: none; box-shadow: none; border-radius: 0; } .paj-inscricao #page-4 { display: block !important; } } /* ── RESPONSIVO ── */ @media (max-width: 720px) { .paj-inscricao .steps-wrap { padding: 0 12px; } .paj-inscricao .steps-inner::before { display: none; } .paj-inscricao .step-label { display: none; } .paj-inscricao .step-item { padding: 10px 4px; } .paj-inscricao .cols-2, .paj-inscricao .cols-3, .paj-inscricao .cols-4 { grid-template-columns: 1fr; } .paj-inscricao .field.span-2, .paj-inscricao .field.span-3, .paj-inscricao .field.span-4 { grid-column: span 1; } .paj-inscricao .main-wrap { padding: 0 12px 60px; margin: 20px auto; } .paj-inscricao .card-top, .paj-inscricao .card-body, .paj-inscricao .card-actions { padding: 20px 16px; } .paj-inscricao .card-top { flex-direction: column; align-items: flex-start; } .paj-inscricao .card-actions { flex-direction: column-reverse; gap: 12px; } .paj-inscricao .btn-back, .paj-inscricao .btn-next, .paj-inscricao .btn-print, .paj-inscricao .btn-validate { width: 100%; text-align: center; justify-content: center; } .paj-inscricao .comprovante-wrap { padding: 24px 16px; } .paj-inscricao .comprovante-header { flex-direction: column; text-align: center; gap: 16px; } .paj-inscricao .comprovante-proto { text-align: center; } .paj-inscricao .comp-grid { grid-template-columns: 1fr; } .paj-inscricao .comp-field.full { grid-column: span 1; } } @media print { @page { size: A4; margin: 12mm; } html, body { background: #fff !important; height: auto !important; overflow: visible !important; } body * { visibility: hidden !important; } #print-area, #print-area * { visibility: visible !important; } #print-area { position: static !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; border: none !important; overflow: visible !important; } .paj-inscricao, .main-wrap, #inscricoes, .form-card, .comprovante-wrap { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: none !important; box-shadow: none !important; overflow: visible !important; } .navbar-wrapper, .gray-section, .steps-wrap, .card-top, .print-btn-row, .card-actions, .hidden-print, .step-badge { display: none !important; } /* melhora legibilidade no PDF */ #print-area { font-size: 12pt !important; line-height: 1.45 !important; color: #000 !important; } #print-area .comprovante-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 20px !important; margin-bottom: 18px !important; padding-bottom: 12px !important; border-bottom: 2px solid #e5e5e5 !important; } #print-area .org { font-size: 14pt !important; font-weight: 700 !important; line-height: 1.3 !important; } #print-area .org small { display: block !important; margin-top: 4px !important; font-size: 10pt !important; font-weight: 600 !important; } #print-area .comprovante-proto { text-align: right !important; font-size: 10pt !important; } #print-area .proto-label { font-size: 9pt !important; font-weight: 700 !important; text-transform: uppercase !important; } #print-area .proto-num { font-size: 14pt !important; font-weight: 800 !important; margin-top: 2px !important; } #print-area .proto-date { font-size: 9pt !important; margin-top: 3px !important; } #print-area .comprovante-success-badge, #print-area .info-box { font-size: 10.5pt !important; padding: 10px 12px !important; margin-bottom: 16px !important; border: 1px solid #bbb !important; background: #fff !important; color: #000 !important; } #print-area .comp-section { margin-bottom: 18px !important; break-inside: avoid-page !important; page-break-inside: avoid !important; } #print-area .comp-section-title { font-size: 11pt !important; font-weight: 800 !important; text-transform: uppercase !important; margin-bottom: 8px !important; padding-bottom: 4px !important; border-bottom: 1px solid #ccc !important; } #print-area .comp-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 16px !important; } #print-area .comp-field { break-inside: avoid !important; page-break-inside: avoid !important; } #print-area .comp-field.full { grid-column: 1 / -1 !important; } #print-area .cf-label { font-size: 8.5pt !important; font-weight: 700 !important; text-transform: uppercase !important; color: #444 !important; margin-bottom: 2px !important; } #print-area .cf-value { font-size: 10.5pt !important; font-weight: 600 !important; color: #000 !important; word-break: break-word !important; } } /* ── HEADER / NAVBAR DO PORTAL ── */ .portal-navbar { background: #0f1b2d; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); position: relative; z-index: 1000; } .portal-navbar-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; } .portal-logo { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; max-width: 100%; } .portal-logo img, .portal-logo .portal-title-img { max-width: 100%; width: auto; height: auto; max-height: 48px; object-fit: contain; object-position: left center; display: block; } .portal-menu { display: flex; align-items: center; gap: 12px; } .portal-menu a { color: #fff; text-decoration: none; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 800; padding: 10px 16px; border-radius: 8px; transition: all 0.2s ease; } .portal-menu a:hover, .portal-menu a:focus { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.1); } .portal-btn-home { background: var(--paj-orange); box-shadow: 0 4px 14px rgba(232, 82, 10, 0.28); } .portal-btn-home:hover, .portal-btn-home:focus { background: #d4480a; } .portal-banner { width: 100%; background: #dceff8; } .portal-banner img { width: 100%; max-width: 100%; display: block; height: auto; } body.landing-page { overflow-x: hidden; max-width: 100%; } .portal-navbar { overflow-x: hidden; } @media (max-width: 768px) { .portal-navbar-inner { min-height: auto; padding-top: 12px; padding-bottom: 12px; flex-direction: column; align-items: stretch; } .portal-logo { width: 100%; justify-content: center; text-align: center; } .portal-logo img, .portal-logo .portal-title-img { max-height: 44px; margin-left: auto; margin-right: auto; object-position: center center; } .portal-menu { width: 100%; flex-wrap: wrap; gap: 8px; justify-content: center; } .portal-menu a { font-size: 13px; padding: 9px 12px; } } @media (max-width: 767px) { .portal-home-actions [class*="col-"] { width: 100%; max-width: 100%; float: none; margin-bottom: 16px; } .portal-home-actions a > div, .portal-home-actions img.img-responsive { max-width: 100%; margin-left: auto; margin-right: auto; } }