/* ============================================ IMPORTANT: To fix the "too small on every page" issue, add this line inside the of every HTML file: ============================================ */ /* -------------------------------------------- Global reset & base sizing (no more zooming!) -------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; /* stable root, no tiny text */ } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif; background: linear-gradient(145deg, #F1F5F9 0%, #E9EFF4 100%); color: #0A2B3E; line-height: 1.5; padding: 2rem 2rem; min-height: 100vh; } /* responsive spacing */ @media (max-width: 768px) { body { padding: 1rem; } html { font-size: 15px; } } /* -------------------------------------------- Cards & containers – elevated, bright, with contrast -------------------------------------------- */ .box, .card, .portal-card { background: #FFFFFF; border-radius: 2rem; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.02); padding: 1.8rem; margin-bottom: 2rem; transition: all 0.25s ease; border: 1px solid rgba(60, 141, 188, 0.15); } .box:hover, .card:hover { transform: translateY(-4px); box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.18); border-color: rgba(60, 141, 188, 0.4); } .portal-card { flex: 1; min-width: 280px; text-align: center; background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%); } /* headings with bold personality */ h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; } h1 { font-size: 2.5rem; background: linear-gradient(120deg, #1E4A6E, #2C6F9A); background-clip: text; -webkit-background-clip: text; color: transparent; margin-bottom: 0.25rem; } h2 { font-size: 1.8rem; border-left: 8px solid #F4A261; /* warm contrast */ padding-left: 1rem; margin: 0 0 1.2rem 0; color: #1E3A5F; } h3 { font-size: 1.4rem; color: #2C5F8A; margin-bottom: 1rem; display: inline-block; border-bottom: 3px solid #F4A261; padding-bottom: 6px; } /* -------------------------------------------- Total revenue styling (big, bold, green) -------------------------------------------- */ div > span:first-child { background: #E3F2F9; color: #1A5D7D; font-weight: 600; padding: 0.3rem 1.2rem; border-radius: 60px; font-size: 0.85rem; letter-spacing: 0.5px; display: inline-block; } div > h1 { font-size: 3.2rem; font-weight: 800; color: #1F7B4D; background: none; border: none; margin-top: 0.6rem; text-shadow: 0 2px 5px rgba(0,0,0,0.02); } /* -------------------------------------------- Tables – spacious, readable, with vibrant accents -------------------------------------------- */ table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.5rem 0 0.5rem; border-radius: 1.5rem; overflow: hidden; background: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } th { background: #1E3A5F; color: white; font-weight: 600; padding: 1rem 1rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.6px; } td { padding: 0.9rem 1rem; border-bottom: 1px solid #E9EDF2; color: #1F2E3A; font-weight: 500; } tr:last-child td { border-bottom: none; } tbody tr:hover td { background-color: #FDF6E3; /* warm highlight */ } /* special row for speed violation */ tr[style*="background: #fcdede"] td, tr[style*="background:#fcdede"] td { background-color: #FFE4E0 !important; border-left: 5px solid #E76F51; } /* status badges - vivid */ .status-paid, .status-unpaid { display: inline-block; padding: 0.3rem 1rem; border-radius: 60px; font-weight: 700; font-size: 0.75rem; text-align: center; min-width: 70px; } .status-paid { background: #D0F0DC; color: #0C6B3E; border-left: 3px solid #2A9D8F; } .status-unpaid { background: #FFE0DB; color: #C23B22; border-left: 3px solid #E76F51; } /* -------------------------------------------- Forms, inputs, buttons – modern, big enough -------------------------------------------- */ form { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-end; } input, select, button { font-family: inherit; font-size: 1rem; border-radius: 60px; padding: 0.75rem 1.4rem; border: 1px solid #CBD5E1; background: white; transition: all 0.2s; } input, select { flex: 1; min-width: 200px; background: #FEFCF5; } input:focus, select:focus { outline: none; border-color: #F4A261; box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.25); } button, .btn-pay, .btn-cit, .btn-adm { background: linear-gradient(100deg, #2C6F9A, #1E4A6E); color: white; border: none; font-weight: 700; cursor: pointer; padding: 0.75rem 2rem; border-radius: 60px; font-size: 0.95rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); transition: all 0.2s; } button:hover, .btn-pay:hover, .btn-cit:hover, .btn-adm:hover { transform: translateY(-2px); background: linear-gradient(100deg, #1E5A7E, #123D59); box-shadow: 0 12px 20px -10px rgba(30, 74, 110, 0.4); } .btn-cit { background: linear-gradient(100deg, #2A9D8F, #21867A); } .btn-cit:hover { background: linear-gradient(100deg, #21867A, #1A6B61); } .btn-pay { background: #F4A261; color: #2D2F36; box-shadow: none; font-weight: 800; } .btn-pay:hover { background: #E76F51; color: white; } /* -------------------------------------------- Admin navigation – modern glass style, large links -------------------------------------------- */ div[style*="background: #222d32"], div[style*="background:#222d32"] { background: #0F2C3D !important; border-radius: 80px; padding: 0.9rem 2rem !important; margin-bottom: 2.2rem; backdrop-filter: blur(2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; } div[style*="background: #222d32"] a { color: #F4F9FF !important; text-decoration: none; font-weight: 600; padding: 0.5rem 1.2rem; border-radius: 60px; transition: 0.2s; font-size: 0.95rem; background: rgba(255, 255, 255, 0.05); } div[style*="background: #222d32"] a:hover { background: #F4A261; color: #0F2C3D !important; transform: scale(1.02); } div[style*="background: #222d32"] a:last-child { background: rgba(231, 111, 81, 0.25); color: #FFCFC0 !important; } /* -------------------------------------------- Citizen header (profile) -------------------------------------------- */ .header { background: white; border-radius: 2rem; padding: 1.5rem 2rem; margin-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.1); border: 1px solid #E2EDF7; } .header h1 { font-size: 2rem; margin-bottom: 0.2rem; } .header p { color: #2C6F9A; font-weight: 500; } .header h2 span { background: #E3F2EC; padding: 0.4rem 1.2rem; border-radius: 60px; color: #1F7B4D; font-size: 1.8rem; font-weight: 800; } /* -------------------------------------------- Tables inside admin & citizen - more contrast -------------------------------------------- */ td strong { color: #1E4A6E; font-weight: 800; } /* fine amount column */ td[style*="color:#00a65a"], td:has(+ .status-paid) { font-weight: 800; color: #1F7B4D; background: #E9F7EF; border-radius: 30px; } /* -------------------------------------------- Responsive: no tiny text, scroll tables if needed -------------------------------------------- */ @media (max-width: 780px) { .box table, .card table { display: block; overflow-x: auto; white-space: nowrap; } form { flex-direction: column; align-items: stretch; } input, select, button { width: 100%; } div[style*="background: #222d32"] { flex-direction: column; border-radius: 2rem; text-align: center; } th, td { padding: 0.75rem; } } /* -------------------------------------------- Extra polish: icons, back links, contrast touches -------------------------------------------- */ a { color: #2C6F9A; text-decoration: none; font-weight: 600; transition: 0.2s; } a:hover { color: #F4A261; text-decoration: underline; } p > a { background: #E9F0F5; padding: 0.5rem 1.5rem; border-radius: 60px; display: inline-block; margin-top: 1rem; font-weight: 600; } p > a:hover { background: #F4A261; color: #1E2F3D; text-decoration: none; } /* badge for speed radar table */ tr td:first-child { font-weight: 600; } /* custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #E9EDF2; border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #A6C1DD; border-radius: 10px; }