/* =========================================================
mygovt.info — /assets/css/app.css
Global styles: Blackish Luxury + Neon Gradients
Works with W3.CSS + FontAwesome
CSS only (no PHP includes inside CSS)
========================================================= */
/* ---------- Fonts (optional): load via in ---------- */
/* Recommended:
*/
/* ---------- Theme Variables ---------- */
:root{
--bg0:#05070d;
--bg1:#0a1020;
--ink:#0b1220;
--text: rgba(255,255,255,.92);
--muted: rgba(255,255,255,.70);
--line: rgba(255,255,255,.12);
--glass: rgba(255,255,255,.06);
--glass2: rgba(255,255,255,.085);
--a:#0ea5e9; /* sky */
--b:#22c55e; /* green */
--c:#a855f7; /* purple */
--d:#ef4444; /* red */
--g:#f59e0b; /* gold */
--shadow: 0 18px 60px rgba(0,0,0,.55);
--r: 20px;
--focus: 0 0 0 3px rgba(14,165,233,.22), 0 0 0 1px rgba(255,255,255,.18) inset;
}
/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
margin:0;
font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:var(--text);
background:
radial-gradient(900px 420px at 10% 8%, rgba(14,165,233,.18), transparent 60%),
radial-gradient(900px 420px at 86% 12%, rgba(168,85,247,.16), transparent 60%),
radial-gradient(900px 420px at 60% 95%, rgba(34,197,94,.12), transparent 60%),
radial-gradient(900px 420px at 92% 78%, rgba(239,68,68,.10), transparent 60%),
linear-gradient(180deg, var(--bg0), var(--bg1));
min-height:100vh;
overflow-x:hidden;
}
/* subtle top shine */
body:before{
content:"";
position:fixed;
inset:-40% -20% auto -20%;
height:420px;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%);
filter: blur(2px);
pointer-events:none;
z-index:0;
}
/* keep your content above shine */
.mg-page,
.wrap,
.container,
main{
position:relative;
z-index:1;
}
/* ---------- Links / selection ---------- */
a{ color:inherit; }
a:hover{ opacity:.98; }
::selection{ background: rgba(14,165,233,.25); }
/* ---------- Layout helpers ---------- */
.mg-wrap{
max-width: 1180px;
margin: 0 auto;
padding: 16px 12px 52px;
}
.mg-section{
margin-top: 14px;
}
.mg-grid{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap:12px;
}
@media (max-width: 980px){
.mg-grid{ gap:10px; }
}
@media (max-width: 600px){
.mg-wrap{ padding: 12px 10px 44px; }
}
/* ---------- Glass Cards ---------- */
.mg-card{
border:1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
border-radius: var(--r);
box-shadow: var(--shadow);
padding: 14px;
position:relative;
overflow:hidden;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.mg-card:hover{
transform: translateY(-2px);
border-color: rgba(255,255,255,.20);
background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
}
.mg-card:after{
content:"";
position:absolute;
right:-60px;
bottom:-80px;
width:220px;
height:220px;
border-radius:50%;
background: radial-gradient(circle, rgba(14,165,233,.20), transparent 60%);
opacity:.85;
filter: blur(2px);
}
.mg-card > *{ position:relative; z-index:1; }
.mg-card--tight{ padding:12px; }
.mg-card--soft{ box-shadow: 0 12px 40px rgba(0,0,0,.45); }
/* gradient border ring for hero/important boxes */
.mg-ring{
position:relative;
}
.mg-ring:before{
content:"";
position:absolute;
inset:-1px;
border-radius: calc(var(--r) + 6px);
background: linear-gradient(90deg, rgba(14,165,233,.35), rgba(34,197,94,.22), rgba(168,85,247,.22), rgba(239,68,68,.18));
filter: blur(14px);
opacity:.7;
z-index:0;
}
.mg-ring > *{ position:relative; z-index:1; }
/* ---------- Titles & text ---------- */
.mg-h1{ font-weight:800; font-size: 34px; line-height:1.1; margin: 6px 0 10px; }
.mg-h2{ font-weight:800; font-size: 20px; margin: 0 0 8px; }
.mg-h3{ font-weight:800; font-size: 16px; margin: 0 0 6px; }
.mg-muted{ color: var(--muted); }
.mg-small{ font-size: 12px; color: var(--muted); }
.mg-lead{ color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 980px){
.mg-h1{ font-size: 28px; }
}
@media (max-width: 600px){
.mg-h1{ font-size: 22px; }
}
/* Gradient text */
.mg-gradient-text{
background: linear-gradient(90deg, rgba(14,165,233,1), rgba(239,68,68,1), rgba(34,197,94,1));
-webkit-background-clip: text;
background-clip:text;
color: transparent;
}
/* ---------- Chips / tags ---------- */
.mg-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
border:1px solid var(--line);
background: rgba(0,0,0,.25);
color: var(--muted);
font-size: 13px;
margin-right:8px;
margin-top:8px;
user-select:none;
}
.mg-tag{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
border-radius:999px;
border:1px solid var(--line);
background: rgba(255,255,255,.05);
color: var(--muted);
font-size:12px;
user-select:none;
}
/* ---------- Buttons ---------- */
.mg-btn{
border:0;
border-radius: 14px;
padding: 11px 14px;
font-weight: 800;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
transition: transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
user-select:none;
white-space:nowrap;
}
.mg-btn:focus{ outline:none; box-shadow: var(--focus); }
.mg-btn:hover{ transform: translateY(-1px); }
.mg-btn--primary{
color:#071018;
background: linear-gradient(90deg, rgba(14,165,233,1), rgba(34,197,94,1));
box-shadow: 0 14px 42px rgba(14,165,233,.18);
}
.mg-btn--gold{
color:#071018;
background: linear-gradient(90deg, rgba(245,158,11,1), rgba(239,68,68,1));
box-shadow: 0 14px 42px rgba(239,68,68,.14);
}
.mg-btn--soft{
color: var(--text);
background: rgba(255,255,255,.06);
border:1px solid var(--line);
}
.mg-btn--soft:hover{ background: rgba(255,255,255,.09); }
.mg-btn--danger{
color:#0b1220;
background: linear-gradient(90deg, rgba(239,68,68,1), rgba(168,85,247,1));
box-shadow: 0 14px 42px rgba(168,85,247,.14);
}
.mg-btn--block{ width:100%; }
@media (max-width: 600px){
.mg-btn{ width:100%; }
}
/* ---------- Icon badge ---------- */
.mg-icon{
width:46px;
height:46px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--line);
background: rgba(0,0,0,.25);
box-shadow: 0 16px 40px rgba(0,0,0,.25);
font-size:18px;
}
/* ---------- Forms ---------- */
.mg-form{
display:grid;
grid-template-columns: repeat(12, 1fr);
gap:12px;
}
.mg-field{ grid-column: span 6; }
.mg-field--full{ grid-column: span 12; }
@media (max-width: 980px){
.mg-field{ grid-column: span 12; }
}
.mg-label{
display:block;
font-weight:800;
margin: 0 0 6px;
font-size: 13px;
color: rgba(255,255,255,.88);
}
.mg-input,
.mg-select,
.mg-textarea{
width:100%;
border-radius: 14px;
border:1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.25);
color: var(--text);
padding: 12px 12px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.mg-textarea{ min-height: 120px; resize: vertical; }
.mg-input:focus,
.mg-select:focus,
.mg-textarea:focus{
border-color: rgba(14,165,233,.45);
box-shadow: var(--focus);
}
.mg-help{
font-size: 12px;
color: var(--muted);
margin-top: 6px;
line-height: 1.4;
}
/* ---------- Alerts ---------- */
.mg-alert{
border:1px solid rgba(255,255,255,.12);
border-radius: 18px;
padding: 12px 12px;
background: rgba(0,0,0,.22);
box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.mg-alert--ok{
border-color: rgba(34,197,94,.35);
background: linear-gradient(90deg, rgba(34,197,94,.14), rgba(255,255,255,.04));
}
.mg-alert--warn{
border-color: rgba(245,158,11,.35);
background: linear-gradient(90deg, rgba(245,158,11,.14), rgba(255,255,255,.04));
}
.mg-alert--bad{
border-color: rgba(239,68,68,.35);
background: linear-gradient(90deg, rgba(239,68,68,.14), rgba(255,255,255,.04));
}
/* ---------- Tables ---------- */
.mg-table{
width:100%;
border-collapse: separate;
border-spacing: 0;
overflow:hidden;
border-radius: 18px;
border:1px solid var(--line);
background: rgba(0,0,0,.22);
box-shadow: var(--shadow);
}
.mg-table th,
.mg-table td{
padding: 12px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
text-align:left;
vertical-align: top;
}
.mg-table th{
font-weight: 800;
color: rgba(255,255,255,.86);
background: linear-gradient(90deg, rgba(14,165,233,.12), rgba(34,197,94,.10), rgba(168,85,247,.10));
}
.mg-table tr:hover td{
background: rgba(255,255,255,.04);
}
.mg-table td .mg-small{
display:block;
margin-top:4px;
}
/* ---------- Badges / counters ---------- */
.mg-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 20px;
height: 20px;
padding:0 6px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
border: 1px solid rgba(255,255,255,.18);
background: linear-gradient(90deg, rgba(239,68,68,.45), rgba(168,85,247,.35));
box-shadow: 0 10px 22px rgba(0,0,0,.35);
}
/* ---------- Animations ---------- */
@keyframes mg-float{
0%{ transform: translateY(0); }
50%{ transform: translateY(-3px); }
100%{ transform: translateY(0); }
}
@keyframes mg-pop{
0%{ transform: scale(.98); opacity:.0; }
100%{ transform: scale(1); opacity:1; }
}
.mg-animate-pop{ animation: mg-pop .22s ease both; }
.mg-animate-float{ animation: mg-float 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* ---------- Footer ---------- */
.mg-footer{
margin-top: 18px;
padding: 16px 12px;
border:1px solid var(--line);
background: rgba(0,0,0,.22);
border-radius: 20px;
box-shadow: var(--shadow);
text-align:center;
color: var(--muted);
font-size: 13px;
}
/* ---------- Useful W3.CSS overrides (optional) ---------- */
.w3-container, .w3-panel{ border-radius: 0; }
.w3-modal-content{ border-radius: 18px; overflow:hidden; }
.w3-input, .w3-select{ border-radius: 14px; }
/* Make W3 tables look more “luxury” when you use w3-table */
.w3-table-all{
border: 1px solid var(--line) !important;
border-radius: 18px;
overflow:hidden;
box-shadow: var(--shadow);
}
.w3-table-all tr:nth-child(even){ background: rgba(255,255,255,.03) !important; }
.w3-table-all tr:hover{ background: rgba(255,255,255,.05) !important; }
/* ---------- Simple page header banner ---------- */
.mg-pagehead{
border:1px solid var(--line);
background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
border-radius: 26px;
box-shadow: var(--shadow);
padding: 16px;
overflow:hidden;
position:relative;
}
.mg-pagehead:before{
content:"";
position:absolute;
inset:-2px;
background: linear-gradient(90deg, rgba(14,165,233,.18), rgba(245,158,11,.14), rgba(168,85,247,.12), rgba(34,197,94,.12));
filter: blur(28px);
opacity:.55;
z-index:0;
}
.mg-pagehead > *{ position:relative; z-index:1; }
/* ---------- Small “pill nav” row ---------- */
.mg-pills{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top: 10px;
}
/* ---------- Print friendliness ---------- */
@media print{
body{
background:#fff !important;
color:#000 !important;
}
.mg-card, .mg-pagehead, .mg-table{
box-shadow:none !important;
background:#fff !important;
border:1px solid #ddd !important;
}
}