/* kulambogan LGU Portal — Rebrand V1 — May 2026 — Agent: DASHBOARD-BACKGROUND-HERO */ /* * dashboard.css — standalone stylesheet for the kulambogan launchpad dashboard. * Municipality of Kulambogan, Lanao del Norte · Region IX. * * Extracted verbatim (token-for-token) from the flagship dashboard * lalamdrrmo/pages/home.php so any microsite page can reuse: * partials/topbar.php → .topbar / .tb-* / .ask-margo / .tb-burger * partials/hero.php → .hero / .hero-bg / .hero-inner / .hero-seal / .hero-tx * plus .shell .sidebar .main .wrap .welcome .search-* .grid .card.* .strip. * * Include in BEFORE page markup. Self-contained: no @import, no deps * beyond Font Awesome (icons) + the Inter / Plus Jakarta Sans web fonts. */ :root{ /* kulambogan brand tokens */ --mgs-navy-900:#0A1733; --mgs-navy-800:#0B1F4D; --mgs-navy-700:#122A66; --mgs-navy-600:#1E4A9E; --mgs-blue-500:#3E73D6; --mgs-gold-500:#D9A441; --mgs-gold-400:#E6B85C; --mgs-gold-600:#C98F2A; --mgs-text-on-dark:#E8EEF7; --mgs-text-muted:#9FB0CC; --mgs-border-on-dark:rgba(255,255,255,.08); --mgs-glass:rgba(255,255,255,.05); --mgs-shadow-card:0 8px 24px rgba(0,0,0,.35); --mgs-radius-sm:8px; --mgs-radius-md:12px; --mgs-radius-lg:16px; --mgs-radius-pill:999px; --mgs-font-sans:"Inter","Plus Jakarta Sans",system-ui,-apple-system,sans-serif; --mgs-font-head:"Plus Jakarta Sans","Inter",system-ui,sans-serif; --mgs-grad-page:linear-gradient(180deg,#0B1F4D 0%,#0A1733 60%,#081026 100%); --mgs-grad-rail:linear-gradient(180deg,#0B1F4D 0%,#0A1733 100%); --mgs-grad-gold:linear-gradient(135deg,#E6B85C 0%,#C98F2A 100%); --mgs-grad-active:linear-gradient(135deg,#1E4A9E 0%,#3E73D6 100%); --sb-w:240px; --tb-h:52px; --m-fast:120ms; --m-ui:180ms; --m-med:240ms; --ease:cubic-bezier(.2,.8,.2,1); /* card palettes — order: blue indigo violet green amber orangered teal slateblue orange sky rose red slate (16-card launchpad uses these) */ --c-blue:linear-gradient(135deg,#2369d8,#163f87); --c-indigo:linear-gradient(135deg,#3a57c8,#1f2f7a); --c-violet:linear-gradient(135deg,#6f3cd2,#3f2390); --c-green:linear-gradient(135deg,#1f9d6b,#0f6b46); --c-amber:linear-gradient(135deg,#caa13f,#8a5f17); --c-orangered:linear-gradient(135deg,#e0562b,#b22a1c); --c-teal:linear-gradient(135deg,#1b9a92,#0b5f5b); --c-slateblue:linear-gradient(135deg,#3a548f,#22335f); --c-orange:linear-gradient(135deg,#e07e22,#b3540f); --c-sky:linear-gradient(135deg,#2491cf,#15649e); --c-rose:linear-gradient(135deg,#cc3f76,#8f234e); --c-red:linear-gradient(135deg,#d53a33,#9e231d); --c-slate:linear-gradient(135deg,#46526d,#2a3145); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--mgs-font-sans); color:var(--mgs-text-on-dark); background:var(--mgs-grad-page); min-height:100vh; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--mgs-gold-400);outline-offset:2px;border-radius:4px} .skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--mgs-gold-400);color:#1a1205; padding:.6rem 1rem;border-radius:0 0 var(--mgs-radius-sm) 0;font-weight:700;font-size:.85rem} .skip-link:focus{left:0} .tnum{font-variant-numeric:tabular-nums} /* ===== TOP BAR ===== */ .topbar{position:sticky;top:0;z-index:90;height:var(--tb-h);display:flex;align-items:center; justify-content:space-between;gap:1rem;padding:0 1.25rem;background:var(--mgs-navy-900); border-bottom:1px solid rgba(217,164,65,.35);box-shadow:0 1px 0 rgba(217,164,65,.12)} .tb-cluster{display:flex;align-items:center;gap:.7rem;min-width:0;font-size:.72rem; letter-spacing:.07em;font-weight:600} .tb-flag{width:22px;height:15px;border-radius:2px;flex-shrink:0;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.15)} .tb-rep{color:var(--mgs-gold-400);white-space:nowrap} .tb-sep{width:1px;height:14px;background:var(--mgs-border-on-dark);flex-shrink:0} .tb-prov,.tb-mun{color:var(--mgs-text-muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .tb-mun{color:var(--mgs-text-on-dark)} .tb-right{display:flex;align-items:center;gap:.9rem;flex-shrink:0} .tb-time{display:flex;align-items:center;gap:.45rem;color:var(--mgs-text-muted);font-size:.74rem;font-weight:600} .tb-time i{color:var(--mgs-gold-400)} .tb-date{color:var(--mgs-text-on-dark)} .ask-margo{display:inline-flex;align-items:center;gap:.45rem;background:var(--mgs-grad-gold); color:#1a1205;font-weight:800;font-size:.72rem;letter-spacing:.04em;padding:.4rem .8rem; border-radius:var(--mgs-radius-pill);border:none;cursor:pointer;transition:transform var(--m-ui) var(--ease),box-shadow var(--m-ui)} .ask-margo:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(201,143,42,.4)} .ask-margo .beta{background:rgba(26,18,5,.22);padding:.05rem .35rem;border-radius:5px;font-size:.6rem;letter-spacing:.08em} .tb-burger{display:none;background:none;border:1px solid var(--mgs-border-on-dark);color:var(--mgs-text-on-dark); width:38px;height:38px;border-radius:var(--mgs-radius-sm);font-size:1rem;cursor:pointer} /* ===== SHELL ===== */ .shell{display:flex;min-height:calc(100vh - var(--tb-h))} /* ===== SIDEBAR ===== */ .sidebar{width:var(--sb-w);flex-shrink:0;background:var(--mgs-grad-rail); border-right:1px solid var(--mgs-border-on-dark);display:flex;flex-direction:column; position:sticky;top:var(--tb-h);height:calc(100vh - var(--tb-h));transition:transform var(--m-med) var(--ease)} .sb-brand{display:flex;align-items:center;gap:.65rem;padding:1rem .9rem;border-bottom:1px solid var(--mgs-border-on-dark)} .sb-seal{width:40px;height:40px;border-radius:50%;background:#fff;padding:2px;flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.35)} .sb-brand-tx b{display:block;font-family:var(--mgs-font-head);font-size:.92rem;color:#fff;line-height:1.15} .sb-brand-tx span{display:block;font-size:.68rem;color:var(--mgs-text-muted);letter-spacing:.04em} .sb-nav{flex:1;overflow-y:auto;padding:.75rem .6rem;display:flex;flex-direction:column;gap:.15rem} .sb-link{display:flex;align-items:center;gap:.8rem;padding:.7rem .75rem;border-radius:var(--mgs-radius-sm); color:var(--mgs-text-muted);font-size:.86rem;font-weight:500;position:relative; min-height:44px;transition:background var(--m-ui),color var(--m-ui)} .sb-link i{width:20px;text-align:center;font-size:.95rem;flex-shrink:0} .sb-link:hover{background:rgba(255,255,255,.04);color:var(--mgs-text-on-dark)} .sb-link.active{background:var(--mgs-grad-active);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(30,74,158,.45)} .sb-link.active::before{content:"";position:absolute;left:-.6rem;top:50%;transform:translateY(-50%); width:3px;height:60%;background:var(--mgs-gold-400);border-radius:0 3px 3px 0} .sb-link .badge{margin-left:auto;background:var(--mgs-grad-gold);color:#1a1205;font-size:.66rem; font-weight:800;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center; padding:0 .35rem;border-radius:var(--mgs-radius-pill)} .sb-link .label{white-space:nowrap;overflow:hidden} .sb-user{display:flex;align-items:center;gap:.65rem;padding:.85rem .9rem; border-top:1px solid var(--mgs-border-on-dark)} .sb-avatar{width:38px;height:38px;border-radius:50%;background:var(--mgs-grad-active); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem;flex-shrink:0; position:relative} .sb-avatar::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%; background:#34d399;border:2px solid var(--mgs-navy-800)} .sb-user-tx{flex:1;min-width:0} .sb-user-tx b{display:block;font-size:.82rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-user-tx span{display:block;font-size:.7rem;color:var(--mgs-blue-500)} .sb-user button{background:none;border:none;color:var(--mgs-text-muted);cursor:pointer;font-size:.85rem;padding:.3rem} .sb-backdrop{display:none;position:fixed;inset:0;background:rgba(4,8,20,.6);z-index:79; backdrop-filter:blur(2px);opacity:0;transition:opacity var(--m-med)} .sb-backdrop.show{display:block;opacity:1} /* ===== MAIN ===== */ .main{flex:1;min-width:0;display:flex;flex-direction:column} .wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 1.5rem} /* ===== HERO ===== */ .hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(217,164,65,.25)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg .sky{position:absolute;inset:0;background: radial-gradient(110% 140% at 80% 0%,rgba(62,115,214,.28),transparent 55%), var(--mgs-grad-rail)} .hero-bg svg{position:absolute;right:0;bottom:0;height:100%;width:62%;opacity:.9} .hero-bg .landmark{position:absolute;right:5%;top:18%;height:62%;opacity:.16; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))} .hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:1.5rem; padding:1.75rem 0;min-height:200px} .hero-seal{width:88px;height:88px;border-radius:50%;background:#fff;padding:4px;flex-shrink:0; box-shadow:0 6px 22px rgba(0,0,0,.45),0 0 0 1px rgba(217,164,65,.5)} .hero-tx{min-width:0} .hero-eyebrow{color:var(--mgs-gold-400);font-size:.74rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;margin-bottom:.25rem} .hero-tx h1{font-family:var(--mgs-font-head);font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800; color:#fff;line-height:1.08;letter-spacing:-.02em;margin-bottom:.55rem} .hero-acro{color:var(--mgs-text-muted);font-size:.92rem;line-height:1.55;max-width:42rem} .hero-acro b{color:var(--mgs-gold-400);font-weight:700;letter-spacing:.02em} /* ===== WELCOME + SEARCH ===== */ .welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem; flex-wrap:wrap;padding:1.6rem 0 1.2rem} .welcome h2{font-family:var(--mgs-font-head);font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.01em} .welcome p{color:var(--mgs-text-muted);font-size:.9rem;margin-top:.15rem} .search-wrap{display:flex;align-items:center;gap:.6rem} .search-box{display:flex;align-items:center;gap:.6rem;background:var(--mgs-glass); border:1px solid var(--mgs-border-on-dark);border-radius:var(--mgs-radius-pill); padding:.7rem 1.1rem;min-width:min(380px,70vw);backdrop-filter:blur(8px); transition:border-color var(--m-ui),background var(--m-ui)} .search-box:focus-within{border-color:rgba(217,164,65,.55);background:rgba(255,255,255,.07)} .search-box i{color:var(--mgs-text-muted);font-size:.85rem} .search-box input{flex:1;background:none;border:none;color:#fff;font-size:.88rem;font-family:inherit;outline:none} .search-box input::placeholder{color:var(--mgs-text-muted)} .filter-btn{width:44px;height:44px;border-radius:var(--mgs-radius-md);background:var(--mgs-glass); border:1px solid var(--mgs-border-on-dark);color:var(--mgs-text-on-dark);cursor:pointer; font-size:.95rem;transition:background var(--m-ui)} .filter-btn:hover{background:rgba(255,255,255,.09)} /* ===== MODULE GRID — 16-card launchpad, 4 / 2 / 1 responsive ===== */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-bottom:1.6rem} .card{position:relative;display:flex;gap:.95rem;align-items:flex-start;padding:1.15rem; border-radius:var(--mgs-radius-md);color:#fff;overflow:hidden;isolation:isolate; box-shadow:var(--mgs-shadow-card);transition:transform var(--m-med) var(--ease),box-shadow var(--m-med)} .card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.12));z-index:-1} .card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.45)} .card:focus-visible{outline:2px solid var(--mgs-gold-400);outline-offset:3px} .card-ico{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .card-tx{flex:1;min-width:0} .card-tx h3{font-family:var(--mgs-font-head);font-size:1.02rem;font-weight:800;margin-bottom:.2rem} .card-tx p{font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.82)} .card-chev{position:absolute;right:.95rem;top:1.1rem;color:rgba(255,255,255,.7);font-size:.8rem; transition:transform var(--m-ui)} .card:hover .card-chev{transform:translateX(3px);color:#fff} .card.blue{background:var(--c-blue)} .card.indigo{background:var(--c-indigo)} .card.violet{background:var(--c-violet)} .card.green{background:var(--c-green)} .card.amber{background:var(--c-amber)} .card.orangered{background:var(--c-orangered)} .card.teal{background:var(--c-teal)} .card.slateblue{background:var(--c-slateblue)} .card.orange{background:var(--c-orange)} .card.sky{background:var(--c-sky)} .card.rose{background:var(--c-rose)} .card.red{background:var(--c-red)} .card.slate{background:var(--c-slate)} /* ===== FOOTER STRIP — 3 panels ===== */ .strip{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:1rem;padding-bottom:2.2rem} .panel{background:var(--mgs-glass);border:1px solid var(--mgs-border-on-dark); border-radius:var(--mgs-radius-md);padding:1.1rem 1.25rem} .panel h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mgs-text-muted); font-weight:700;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem} .panel h4 i{color:var(--mgs-gold-400)} .status-row{display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:700;color:#fff} .dot{width:9px;height:9px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.18)} .panel small{display:block;color:var(--mgs-text-muted);font-size:.74rem;margin-top:.45rem} .ann-row{display:flex;gap:.6rem;align-items:baseline;justify-content:space-between} .ann-row p{font-size:.84rem;color:var(--mgs-text-on-dark)} .ann-row p b{color:var(--mgs-gold-400);font-weight:700;margin-right:.4rem;font-size:.78rem} .ann-row a{color:var(--mgs-blue-500);font-size:.78rem;font-weight:700;white-space:nowrap} .ann-row a:hover{color:var(--mgs-gold-400)} .qlinks{display:flex;flex-wrap:wrap;gap:.5rem} .qlinks a{font-size:.76rem;font-weight:600;color:var(--mgs-text-on-dark); background:rgba(255,255,255,.05);border:1px solid var(--mgs-border-on-dark); padding:.45rem .8rem;border-radius:var(--mgs-radius-pill);transition:all var(--m-ui)} .qlinks a:hover{border-color:rgba(217,164,65,.5);color:var(--mgs-gold-400)} /* ===== MOBILE STICKY CTA ===== */ .m-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:85;padding:.7rem 1rem; background:linear-gradient(0deg,var(--mgs-navy-900),rgba(10,23,51,.92)); border-top:1px solid rgba(217,164,65,.3);backdrop-filter:blur(8px)} .m-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px; background:var(--mgs-grad-gold);color:#1a1205;font-weight:800;font-size:.9rem; border-radius:var(--mgs-radius-md)} /* ===== RESPONSIVE ===== */ @media (max-width:1024px){ :root{--sb-w:72px} .sb-brand-tx,.sb-link .label,.sb-link .badge,.sb-user-tx,.sb-user button{display:none} .sb-brand{justify-content:center;padding:1rem .4rem} .sb-link{justify-content:center;padding:.7rem} .sb-user{justify-content:center;padding:.85rem .4rem} .grid{grid-template-columns:repeat(2,1fr)} .strip{grid-template-columns:1fr} .tb-prov,.tb-sep{display:none} } @media (max-width:768px){ .topbar{height:auto;padding:.55rem .9rem} .tb-cluster .tb-rep{font-size:.66rem} .tb-mun,.tb-time .tb-date{display:none} .tb-burger{display:flex;align-items:center;justify-content:center} :root{--sb-w:248px} .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:80;transform:translateX(-100%)} .sidebar.open{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.6)} .sb-brand-tx,.sb-link .label,.sb-link .badge,.sb-user-tx,.sb-user button{display:block} .sb-brand{justify-content:flex-start;padding:1rem .9rem} .sb-link{justify-content:flex-start;padding:.7rem .75rem} .sb-user{justify-content:flex-start;padding:.85rem .9rem} .hero-inner{flex-direction:column;text-align:center;align-items:center;padding:1.5rem 0} .hero-bg svg{width:100%;opacity:.5} .hero-tx h1{font-size:1.7rem} .welcome{justify-content:center;text-align:center} .search-box{min-width:0;width:100%} .grid{grid-template-columns:1fr;padding-bottom:5rem} .strip{padding-bottom:6rem} .m-cta{display:block} .wrap{padding:0 1rem} } @media (max-width:420px){ .tb-cluster .tb-rep{font-size:.6rem;letter-spacing:.04em} .hero-seal{width:74px;height:74px} .hero-tx h1{font-size:1.45rem} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }