/* ============================================================================= PAGADIAN LEGISLATIVE DESIGN SYSTEM Sangguniang Panlungsod of Pagadian City, Zamboanga del Sur A three-source synthesis. Loaded LAST. Front-end only — no PHP/JS behaviour is altered by this file. SOURCE 1 — Command Center contract (assets/css/sppag-command-center.css) Contributes the SPINE: navy authority base, muted institutional gold, AA-corrected text, motion tokens, radius scale, Libre Franklin. Every --sp-* token below is reproduced BYTE-IDENTICAL. Nothing removed. SOURCE 2 — oldsource/legislative/assets/css/legislative-command-center.css Contributes DEPTH + VOCABULARY: a 5-step blue ramp (the contract has only 3 navy steps, which forces surface reuse and flattens hierarchy), a semantic status palette, the circular seal ring, and a blue-tinted page field instead of neutral SaaS grey. REJECTED from this source: Arial as the primary face (contract §2.2 bans it), --lc-purple #681ddd, and #ffd325 as a primary gold. SOURCE 3 — the live pagadian archive Contributes IDENTITY: the real municipal seal, the working spcc- shell, and the routes already in production. WHY THIS FILE EXISTS (root cause, not cosmetics) The homepage carried 57 occurrences of #667eea / #764ba2 / #7c3aed / #8b5cf6 / #ec4899 — the default-purple slop the contract explicitly bans. That purple was not a taste failure. It entered because the contract ships NO status colours at all, while a legislative archive's core job is showing state: enacted, pending, referred, vetoed, withdrawn. Developers needed a status vocabulary, none was sanctioned, so they invented one inline. Section 3 supplies that vocabulary. With a sanctioned set, the slop has nowhere to come back from. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* ---- 1a. CONTRACT SPINE — byte-identical to sppag-command-center.css ---- */ /* Primary dark navy */ --sp-navy: #0C1526; --sp-navy-2: #101B2E; --sp-navy-3: #16233A; /* Secondary dark blue */ --sp-blue: #173A63; --sp-blue-soft: #1E4D7A; /* White / off-white content */ --sp-white: #FFFFFF; --sp-offwhite: #F8FAFC; --sp-offwhite-2: #F5F7FA; /* Soft grey */ --sp-grey: #E5E7EB; --sp-grey-2: #CBD5E1; --sp-grey-3: #94A3B8; /* Text */ --sp-text: #111827; --sp-muted: #475569; /* darker than spec #64748B for AA contrast */ /* Legislative gold */ --sp-gold: #D8B368; --sp-gold-dark: #B98A2C; --sp-gold-soft: #E7C67E; /* Accent cyan (used sparingly) */ --sp-cyan: #38BDF8; --sp-shadow: 0 18px 45px rgba(15, 23, 42, 0.12); --sp-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08); --sp-radius: 16px; --sp-radius-sm: 11px; /* Motion tokens */ --sp-fast: 120ms; --sp-ui: 180ms; --sp-medium: 240ms; --sp-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --sp-ease-emph: cubic-bezier(0.2, 0, 0, 1); /* ---- 1b. EXTENDED ELEVATION RAMP (merged) ------------------------------ The contract gives 3 navy steps; the command centre nests four surfaces deep (rail > panel > card > chip), so steps get reused and the hierarchy reads flat. oldsource carried a 5-step blue ramp (#041642 → #0f59e7). Merged here into one 7-step ramp that stays inside the navy family — oldsource's brightness, the contract's hue. ---------------------------- */ --mlg-ink-950: #060D1A; /* deepest field — behind the rail */ --mlg-ink-900: #0C1526; /* = --sp-navy, canonical surface */ --mlg-ink-800: #101B2E; /* = --sp-navy-2, raised */ --mlg-ink-700: #16233A; /* = --sp-navy-3, card on navy */ --mlg-ink-600: #1B2E4A; /* NEW bridge — hover on navy cards */ --mlg-blue-500: #173A63; /* = --sp-blue */ --mlg-blue-400: #1E4D7A; /* = --sp-blue-soft */ --mlg-blue-300: #2C6699; /* NEW — interactive edge / active rail item */ --mlg-blue-200: #4E8DC4; /* NEW — links on dark, AA on --mlg-ink-900 */ /* ---- 1c. PAGE FIELD ---------------------------------------------------- oldsource used #edf4ff (blue-tinted); the contract uses #F8FAFC (neutral grey). Neutral grey is the single most generic "SaaS dashboard" tell. Midpoint chosen: tied to the navy identity, still calm under long reading sessions of ordinance text. ------------------------------------ */ --mlg-page: #EEF3FA; --mlg-panel: #F7FAFD; --mlg-border: #D3E0EF; /* from oldsource --lc-border, desaturated */ --mlg-border-str: #B3C7DD; /* ---- 1d. GOLD, SPLIT BY JOB ------------------------------------------- The contract's #D8B368 and oldsource's #ffd325 were doing two different jobs under one name. Split them: authority gold = headings, seal ring, primary CTA (institutional, calm) live gold = "in session" / "live now" only (alert, energetic) Live gold is deliberately rationed — see §3. -------------------------- */ --mlg-gold: #D8B368; /* = --sp-gold — authority */ --mlg-gold-dark: #B98A2C; /* = --sp-gold-dark */ --mlg-gold-soft: #E7C67E; /* = --sp-gold-soft */ --mlg-gold-live: #F5C518; /* from oldsource #ffd325, tuned for AA on navy */ /* ---- 1e. FOCUS + ELEVATION -------------------------------------------- */ --mlg-focus: #38BDF8; /* = --sp-cyan */ --mlg-focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.45); --mlg-lift-1: 0 6px 18px rgba(15, 23, 42, 0.08); /* = --sp-shadow-sm */ --mlg-lift-2: 0 18px 45px rgba(15, 23, 42, 0.12); /* = --sp-shadow */ --mlg-lift-3: 0 28px 60px rgba(6, 13, 26, 0.22); /* modal / rail edge */ } /* ----------------------------------------------------------------------------- 2. PURPLE ERADICATION — defensive net Source hex is replaced at origin; this layer catches anything regenerated dynamically or shipped by a module this pass did not touch. Scoped to the legislative shell so it can never leak into sibling modules. -------------------------------------------------------------------------- */ .spcc-shell [style*="#667eea"], .spcc-shell [style*="#764ba2"], .spcc-shell [style*="#7c3aed"], .spcc-shell [style*="#8b5cf6"], .spcc-shell [style*="#6366f1"] { background-image: linear-gradient(135deg, var(--mlg-ink-900) 0%, var(--mlg-blue-500) 100%) !important; border-color: var(--mlg-blue-300) !important; } /* Spinners inherited the purple ring. Gold reads as "system working" and keeps the palette closed. */ .spcc-shell [style*="border-top: 4px solid #667eea"], .spcc-shell [style*="border-top-color: #6366f1"] { border-top-color: var(--mlg-gold) !important; } /* ----------------------------------------------------------------------------- 3. STATUS VOCABULARY ← the functional gap that caused the slop Legislative state is the archive's primary information. Each colour maps to exactly one legislative meaning and is used nowhere else. Contrast: every chip below is >= 4.5:1 text-on-fill (WCAG AA). -------------------------------------------------------------------------- */ :root { --mlg-enacted: #0F7A3D; /* oldsource --lc-green, darkened for AA */ --mlg-enacted-bg: #E6F4EC; --mlg-pending: #A15C00; /* oldsource --lc-orange, darkened for AA */ --mlg-pending-bg: #FBF0DF; --mlg-referred: #1E4D7A; /* = --sp-blue-soft. REPLACES oldsource purple */ --mlg-referred-bg: #E4EDF6; --mlg-vetoed: #B3122C; /* oldsource --lc-red, darkened for AA */ --mlg-vetoed-bg: #FBE9EC; --mlg-review: #0B6E7F; /* oldsource --lc-cyan, darkened for AA */ --mlg-review-bg: #E2F1F4; --mlg-lapsed: #475569; /* = --sp-muted */ --mlg-lapsed-bg: #EDF1F6; } .mlg-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.6; white-space: nowrap; border: 1px solid currentColor; } /* The dot carries the state at a glance; the word confirms it. Colour is never the only channel — required for colour-blind users and for print. */ .mlg-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; } .mlg-status--enacted { color: var(--mlg-enacted); background: var(--mlg-enacted-bg); } .mlg-status--pending { color: var(--mlg-pending); background: var(--mlg-pending-bg); } .mlg-status--referred { color: var(--mlg-referred); background: var(--mlg-referred-bg); } .mlg-status--vetoed { color: var(--mlg-vetoed); background: var(--mlg-vetoed-bg); } .mlg-status--review { color: var(--mlg-review); background: var(--mlg-review-bg); } .mlg-status--lapsed { color: var(--mlg-lapsed); background: var(--mlg-lapsed-bg); } /* "In session" is the only element allowed live gold, and it is the only element on the page that animates on a loop. Rationing is what makes it readable as urgent. */ .mlg-status--live { color: var(--mlg-ink-900); background: var(--mlg-gold-live); border-color: var(--mlg-gold-dark); } .mlg-status--live::before { animation: mlg-pulse 2s var(--sp-ease) infinite; } @keyframes mlg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } } /* ----------------------------------------------------------------------------- 4. MASTHEAD + SEAL Seal treatment adopted from oldsource: Philippine LGU seals are circular by law, so a square crop damages the instrument. White field + ring gives the seal legible contrast against the navy masthead. -------------------------------------------------------------------------- */ .spcc-shell .spcc-rail-brand img, .mlg-seal { width: 74px; height: 74px; flex: 0 0 74px; object-fit: contain; border-radius: 50%; background: var(--sp-white); border: 3px solid rgba(255, 255, 255, 0.78); box-shadow: 0 10px 26px rgba(6, 13, 26, 0.32); padding: 4px; } .mlg-seal--lg { width: 112px; height: 112px; flex-basis: 112px; } .mlg-seal--sm { width: 46px; height: 46px; flex-basis: 46px; padding: 3px; } /* Display headings: uppercase, heavy, gold-on-navy — contract §2.2. */ .mlg-display { font-family: "Libre Franklin", "Public Sans", system-ui, -apple-system, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mlg-gold); line-height: 1.12; text-wrap: balance; } .mlg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-grey-3); } /* ----------------------------------------------------------------------------- 5. SURFACES — module cards, stat cards, panels Uses the new 600 step so a hovered card is distinguishable from its container without changing size (movement on a dense grid is nauseating). -------------------------------------------------------------------------- */ .spcc-shell .spcc-module { background: var(--mlg-ink-700); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--sp-radius); transition: background var(--sp-ui) var(--sp-ease), border-color var(--sp-ui) var(--sp-ease), box-shadow var(--sp-ui) var(--sp-ease); } .spcc-shell .spcc-module:hover, .spcc-shell .spcc-module:focus-within { background: var(--mlg-ink-600); border-color: var(--mlg-blue-300); box-shadow: var(--mlg-lift-2); } /* The circular arrow chip is part of the contract (§2.3). Gold on hover marks it as the actionable affordance without adding a second CTA style. */ .spcc-shell .spcc-arrow { transition: background var(--sp-fast) var(--sp-ease), color var(--sp-fast) var(--sp-ease), transform var(--sp-ui) var(--sp-ease-emph); } .spcc-shell .spcc-module:hover .spcc-arrow { background: var(--mlg-gold); color: var(--mlg-ink-900); transform: translateX(3px); } .spcc-shell .spcc-stat { background: linear-gradient(160deg, var(--mlg-ink-800) 0%, var(--mlg-ink-700) 100%); border: 1px solid rgba(216, 179, 104, 0.20); border-radius: var(--sp-radius-sm); } /* Counts are the one place tabular figures matter — stops digits jittering as totals update. */ .spcc-shell .spcc-stat strong, .spcc-shell .spcc-stat b, .mlg-figure { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; } .spcc-shell .spcc-panel { background: var(--sp-white); border: 1px solid var(--mlg-border); border-radius: var(--sp-radius); box-shadow: var(--mlg-lift-1); } .spcc-shell .spcc-panel-heading, .spcc-shell .spcc-panel-title { border-bottom: 1px solid var(--mlg-border); } /* Gold hairline under section headings — the contract's authority accent used structurally rather than as a highlighter. */ .mlg-rule-gold { border: 0; height: 2px; width: 56px; background: linear-gradient(90deg, var(--mlg-gold) 0%, transparent 100%); margin: 10px 0 0; } /* ----------------------------------------------------------------------------- 6. NAVIGATION RAIL -------------------------------------------------------------------------- */ .spcc-shell .spcc-rail { background: linear-gradient(180deg, var(--mlg-ink-900) 0%, var(--mlg-ink-950) 100%); border-right: 1px solid rgba(255, 255, 255, 0.06); } .spcc-shell .spcc-rail-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sp-grey-3); } .spcc-shell .spcc-rail-action { border-radius: 9px; transition: background var(--sp-fast) var(--sp-ease), color var(--sp-fast) var(--sp-ease), box-shadow var(--sp-fast) var(--sp-ease); } .spcc-shell .spcc-rail-action:hover { background: rgba(78, 141, 196, 0.16); color: var(--sp-white); } /* Active item gets a gold spine — locates you in a 20-item rail without relying on a fill colour that competes with the module grid. */ .spcc-shell .spcc-rail-action[aria-current], .spcc-shell .spcc-rail-action.is-active { background: rgba(216, 179, 104, 0.13); color: var(--sp-white); box-shadow: inset 3px 0 0 0 var(--mlg-gold); } .spcc-shell .spcc-rail-badge { background: var(--mlg-gold); color: var(--mlg-ink-900); font-weight: 800; font-size: 9.5px; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; } /* ----------------------------------------------------------------------------- 7. SEARCH DESK The unified search is the archive's front door — it earns the gold focus. -------------------------------------------------------------------------- */ .spcc-shell .spcc-search, .spcc-shell .spcc-lv-searchbar { border-radius: var(--sp-radius); border: 1px solid var(--mlg-border); background: var(--sp-white); transition: border-color var(--sp-ui) var(--sp-ease), box-shadow var(--sp-ui) var(--sp-ease); } .spcc-shell .spcc-search:focus-within, .spcc-shell .spcc-lv-searchbar:focus-within { border-color: var(--mlg-gold); box-shadow: 0 0 0 4px rgba(216, 179, 104, 0.22), var(--mlg-lift-1); } .spcc-shell .spcc-query { font-family: inherit; font-size: 15px; color: var(--sp-text); } .spcc-shell .spcc-query::placeholder { color: var(--sp-grey-3); opacity: 1; } /* ----------------------------------------------------------------------------- 8. ACCESSIBILITY -------------------------------------------------------------------------- */ /* Visible focus everywhere. :focus-visible keeps it off mouse users but guarantees it for keyboard and switch-access users. */ .spcc-shell a:focus-visible, .spcc-shell button:focus-visible, .spcc-shell input:focus-visible, .spcc-shell select:focus-visible, .spcc-shell textarea:focus-visible, .spcc-shell [tabindex]:focus-visible { outline: 3px solid var(--mlg-focus); outline-offset: 2px; border-radius: 6px; } /* Never remove the outline without replacing it. */ .spcc-shell *:focus:not(:focus-visible) { outline: none; } .mlg-skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 20px; background: var(--mlg-gold); color: var(--mlg-ink-900); font-weight: 700; border-radius: 0 0 var(--sp-radius-sm) 0; } .mlg-skip-link:focus { left: 0; } .mlg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 44px touch targets on coarse pointers — LGU users are heavily mobile. */ @media (pointer: coarse) { .spcc-shell .spcc-rail-action, .spcc-shell .spcc-tab, .spcc-shell .spcc-quick a, .spcc-shell .spcc-govlink { min-height: 44px; display: flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { .spcc-shell *, .spcc-shell *::before, .spcc-shell *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .mlg-status--live::before { animation: none; opacity: 1; } } @media (prefers-contrast: more) { :root { --sp-muted: #33415A; --mlg-border: #93A9C2; } .spcc-shell .spcc-module { border-color: rgba(255, 255, 255, 0.22); } } /* ----------------------------------------------------------------------------- 9. RESPONSIVE — zero horizontal overflow at 390px (contract §7) -------------------------------------------------------------------------- */ @media (max-width: 480px) { .spcc-shell, .spcc-shell .spcc-main { overflow-x: hidden; max-width: 100vw; } /* Long ordinance titles and reference numbers are the usual overflow culprits — break them rather than letting the page scroll sideways. */ .spcc-shell .spcc-module, .spcc-shell .spcc-panel, .spcc-shell .spcc-stat { min-width: 0; overflow-wrap: anywhere; } .mlg-display { font-size: clamp(19px, 6vw, 26px); letter-spacing: 0.04em; } .mlg-seal { width: 58px; height: 58px; flex-basis: 58px; } /* Wide data tables scroll inside their own container, never the body. */ .spcc-shell table { display: block; overflow-x: auto; max-width: 100%; } } /* ----------------------------------------------------------------------------- 10. PRINT — ordinances and resolutions are printed as official copies -------------------------------------------------------------------------- */ @media print { .spcc-shell .spcc-rail, .spcc-shell .spcc-share-menu, .spcc-shell .spcc-quick { display: none !important; } .spcc-shell .spcc-main { margin: 0 !important; width: 100% !important; } .spcc-shell .spcc-panel, .spcc-shell .spcc-module { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; } /* Status must survive monochrome printing. */ .mlg-status { border: 1px solid #000 !important; color: #000 !important; background: #fff !important; } /* Expose destinations so a printed copy remains verifiable. */ .spcc-shell a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #444; } }