:root { --nis-green: #006b3c; --nis-dark-green: #004d2c; --nis-deep-green: #063b28; --nis-light-green: #eaf6f0; --nis-gold: #d7a928; --white: #ffffff; --page-bg: #f6f9f7; --text-dark: #18231d; --text-muted: #66736c; --border: #dfe8e3; --danger: #b42318; --danger-bg: #fef3f2; --warning: #a15c00; --warning-bg: #fff8e7; --success: #166534; --success-bg: #ecfdf3; --shadow: 0 15px 40px rgba(0, 70, 40, 0.08); } /* ========================================================= RESET ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, "Segoe UI", Arial, sans-serif; background: var(--page-bg); color: var(--text-dark); line-height: 1.6; } a { color: var(--nis-green); text-decoration: none; } a:hover { color: var(--nis-dark-green); } /* ========================================================= HEADER ========================================================= */ .public-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); } .public-header-inner { max-width: 1200px; margin: auto; min-height: 76px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 25px; } .public-brand { display: flex; align-items: center; gap: 12px; color: var(--nis-dark-green); } .public-logo { width: 52px; height: 52px; object-fit: contain; } .public-brand-name { display: block; font-weight: 800; font-size: 16px; } .public-brand-subtitle { display: block; margin-top: 1px; font-size: 11px; color: var(--text-muted); } .public-nav { display: flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 600; } .staff-login-link { border: 1px solid var(--nis-green); padding: 8px 16px; border-radius: 8px; } /* ========================================================= PAGE HERO ========================================================= */ .page-hero { position: relative; overflow: hidden; background: linear-gradient( 120deg, #003d25, #006b3c 55%, #168554 ); color: #ffffff; padding: 55px 24px 85px; } .page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -160px; top: -180px; background: rgba(255,255,255,.06); } .page-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: auto; } .page-breadcrumb { margin-bottom: 14px; font-size: 12px; color: rgba(255,255,255,.7); } .page-breadcrumb a { color: #ffffff; } .page-hero h1 { margin: 0 0 12px; max-width: 750px; font-size: clamp( 32px, 5vw, 48px ); line-height: 1.15; } .page-hero p { max-width: 680px; margin: 0; font-size: 15px; color: rgba(255,255,255,.83); } /* ========================================================= CONTENT ========================================================= */ .public-content { max-width: 1000px; margin: -45px auto 80px; position: relative; z-index: 10; padding: 0 20px; } .public-card { background: #ffffff; border: 1px solid var(--border); border-radius: 16px; padding: 34px; box-shadow: var(--shadow); margin-bottom: 25px; } .public-card-header { margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .public-card-header h2, .public-card h2, .public-card h3 { margin-top: 0; color: var(--text-dark); } .public-card-header h2 { margin-bottom: 6px; font-size: 22px; } .public-card-header p { margin: 0; color: var(--text-muted); font-size: 14px; } /* ========================================================= FORM ========================================================= */ .form-grid { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 0 20px; } .field, .form-group { margin-bottom: 22px; } .field-full { grid-column: 1 / -1; } label { display: block; margin-bottom: 7px; color: #29372f; font-size: 13px; font-weight: 700; } .required { color: #b42318; } input, select, textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid #cfdad4; border-radius: 8px; background: #ffffff; font: inherit; font-size: 14px; color: var(--text-dark); transition: border-color .2s, box-shadow .2s; } textarea { min-height: 150px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nis-green); box-shadow: 0 0 0 3px rgba(0,107,60,.09); } input:disabled, select:disabled, textarea:disabled { background: #f4f6f5; cursor: not-allowed; } .error { margin-top: 5px; color: var(--danger); font-size: 12px; } /* ========================================================= BUTTONS ========================================================= */ .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; } button, .public-button { display: inline-flex; align-items: center; justify-content: center; border: 0; min-height: 46px; padding: 11px 22px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 700; transition: transform .15s, background .15s, opacity .15s; } button:hover, .public-button:hover { transform: translateY(-1px); } .submit-button, .track-button, .tracking-button, .public-button-primary { background: var(--nis-green); color: #ffffff; } .submit-button:hover, .track-button:hover, .tracking-button:hover, .public-button-primary:hover { background: var(--nis-dark-green); color: #ffffff; } button:disabled { opacity: .55; cursor: not-allowed; transform: none; } .public-button-secondary, .back-button { background: #eef2ef; color: #33433a; } /* ========================================================= RESULT / SUCCESS ========================================================= */ #result { display: none; } .success-panel { padding: 30px; border: 1px solid #b7e1c8; border-radius: 14px; background: var(--success-bg); } .success-icon { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 18px; background: var(--nis-green); color: #ffffff; font-size: 25px; font-weight: bold; } .reference-box { margin: 18px 0; padding: 18px; border-radius: 10px; background: #ffffff; border: 1px solid #cde4d6; } .reference-value { display: block; margin-top: 4px; color: var(--nis-dark-green); font-size: 20px; font-weight: 800; } /* ========================================================= TRACKING RESULTS ========================================================= */ .tracking-grid { display: grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 18px; } .detail { padding: 13px 0; border-bottom: 1px solid #edf1ef; } .detail strong { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .status { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: var(--nis-light-green); color: var(--nis-green); font-weight: 700; font-size: 12px; } /* ========================================================= SLA ========================================================= */ .sla-section { border-top: 4px solid var(--nis-green); } .sla-item { padding: 16px 0; border-top: 1px solid var(--border); } .sla-item:first-child { border-top: 0; } .sla-label { margin-bottom: 5px; font-weight: 700; } .sla-ok { color: var(--success); font-weight: 700; } .sla-warning { color: var(--warning); font-weight: 700; } .sla-breached { color: var(--danger); font-weight: 700; } /* ========================================================= MESSAGES ========================================================= */ .public-message-list { display: flex; flex-direction: column; gap: 14px; } .public-message { padding: 16px; border-radius: 11px; border: 1px solid var(--border); } .staff-message { background: #effaf4; border-color: #bee5cc; } .citizen-message { background: #f7f9f8; } .public-message-header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: 12px; } .public-message-header strong { color: var(--nis-dark-green); } .public-message-header span { color: var(--text-muted); } .public-message-body { color: #36443c; font-size: 14px; } /* ========================================================= ATTACHMENTS ========================================================= */ .tracking-attachments-list { display: flex; flex-direction: column; gap: 10px; } .tracking-attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px; border: 1px solid var(--border); border-radius: 9px; background: #f9fbfa; } .tracking-attachment-info { flex: 1; min-width: 0; } .tracking-attachment-name { font-weight: 700; font-size: 13px; word-break: break-word; } .tracking-attachment-meta { margin-top: 4px; color: var(--text-muted); font-size: 11px; } .tracking-attachment-download { padding: 7px 12px; border-radius: 6px; background: var(--nis-green); color: #ffffff; font-size: 11px; font-weight: 700; } /* ========================================================= FEEDBACK ========================================================= */ .tracking-feedback { margin-top: 12px; padding: 11px 13px; border-radius: 8px; font-size: 12px; font-weight: 600; } .tracking-feedback:empty { display: none; } .tracking-feedback.success { background: var(--success-bg); border: 1px solid #b7e1c8; color: var(--success); } .tracking-feedback.error { background: var(--danger-bg); border: 1px solid #f5c1bc; color: var(--danger); } /* ========================================================= FOOTER ========================================================= */ .public-footer { background: #06271a; color: rgba(255,255,255,.72); } .public-footer-inner { max-width: 1200px; margin: auto; padding: 38px 24px; display: flex; justify-content: space-between; gap: 30px; font-size: 12px; } .public-footer strong { color: #ffffff; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 760px) { .public-nav { display: none; } .form-grid, .tracking-grid { grid-template-columns: 1fr; } .field-full { grid-column: auto; } .public-card { padding: 23px; } .page-hero { padding: 42px 18px 72px; } .public-content { padding: 0 14px; margin-top: -35px; } .form-actions { flex-direction: column; align-items: stretch; } button, .public-button { width: 100%; } .tracking-attachment-item { flex-direction: column; align-items: stretch; } .tracking-attachment-download { text-align: center; } .public-footer-inner { flex-direction: column; } }