/* =================================================================== FIGMA LAYOUTS — FiveAlarmWeb Applied via data-layout="..." on , orthogonal to data-theme. 3 layouts: (default top nav) | sidebar-left | municipal sidebar-left → "glass" frosted aesthetic + left vertical nav municipal → classic light town-department look (duxburyfire.org-inspired) =================================================================== */ /* =================================================================== LAYOUT STRUCTURE: SIDEBAR (LEFT) The standard _FigmaNavbar is wrapped in .layout-sidenav and re-oriented into a fixed vertical rail on desktop. On mobile (<992px) it falls back to the normal top bar + hamburger collapse. =================================================================== */ @media (min-width: 992px) { /* Fixed vertical rail; body is padded so all normal-flow children (emergency ribbon, banner, .layout, footer) stay in the main column. */ html[data-layout="sidebar-left"] body.figma-theme { padding-left: var(--layout-sidenav-w, 260px); } html[data-layout="sidebar-left"] .layout-sidenav { position: fixed; top: var(--ribbon-h, 30px); left: 0; width: var(--layout-sidenav-w, 260px); height: calc(100vh - var(--ribbon-h, 30px)); display: flex; flex-direction: column; overflow: hidden; /* the main nav list scrolls, not the rail — keeps the utility nav pinned to the screen bottom */ /* High enough that flyout submenus (inside this stacking context) render above all page content; still below the ribbon (1040). */ z-index: 1039; background: var(--figma-bg-navbar, var(--figma-bg-primary)); border-right: 1px solid var(--figma-border, rgba(255,255,255,0.12)); transition: width 0.25s ease; } /* Re-orient the navbar vertically inside the rail. Base .figma-navbar is position:fixed full-width (figma-layout.css); inside the rail it must flow as a static vertical block. */ html[data-layout="sidebar-left"] .layout-sidenav .figma-navbar { position: static !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; min-height: 0 !important; padding: 16px 0 !important; height: 100%; display: flex !important; flex-direction: column; min-height: 0; flex: 1 1 auto; /* Uniform rail color: the rail itself paints the background. backdrop-filter must be off — it creates a containing block that traps and clips the position:fixed flyout submenus. */ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Kill the 100px logo gutter reserved for the horizontal top-nav */ html[data-layout="sidebar-left"] .layout-sidenav .figma-navbar .navbar-content-left-aligned { padding-left: 0 !important; padding-right: 0 !important; } /* Banner offset assumes a fixed top navbar; rail replaces it */ html[data-layout="sidebar-left"] .banner-wrap { margin-top: var(--ribbon-h, 30px) !important; } /* Content top padding compensating for the fixed navbar isn't needed */ html[data-layout="sidebar-left"] body.figma-theme .layout > .content:not(.with-banner) { padding-top: 2rem !important; } html[data-layout="sidebar-left"] .layout-sidenav .navbar-content-left-aligned { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; flex: 1 1 auto; min-height: 0; } html[data-layout="sidebar-left"] .layout-sidenav .navbar-brand { position: static !important; height: auto !important; margin: 0 auto 4px auto; display: flex; justify-content: center; align-items: center; } html[data-layout="sidebar-left"] .layout-sidenav .navbar-brand img { height: 128px !important; width: auto !important; max-width: calc(var(--layout-sidenav-w, 260px) - 24px); object-fit: contain !important; } html[data-layout="sidebar-left"] .layout-sidenav .navbar-social-links-left { justify-content: center; } html[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse { display: flex !important; flex-direction: column; align-items: stretch; flex-basis: auto; width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* Main menu lists scroll internally when too tall */ html[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse > .navbar-nav:not(.ms-auto) { overflow-y: auto; min-height: 0; } /* Utility items (back, donate, view toggle, join/login, account) pin to the bottom of the screen */ html[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse > .navbar-nav.ms-auto { margin-top: auto !important; flex-shrink: 0; padding-top: 12px; border-top: 1px solid var(--figma-border, rgba(255,255,255,0.12)); } /* ── Collapsed rail: only the patch shows ─────────────────────── */ html.sidenav-collapsed[data-layout="sidebar-left"] body.figma-theme { padding-left: var(--layout-sidenav-collapsed-w, 120px); } html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav { width: var(--layout-sidenav-collapsed-w, 120px); } html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-collapse, html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-social-links-left, html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-mobile-actions { display: none !important; } html.sidenav-collapsed[data-layout="sidebar-left"] .layout-sidenav .navbar-brand img { height: 96px !important; max-width: calc(var(--layout-sidenav-collapsed-w, 120px) - 16px); } /* The patch is the collapse/expand toggle in sidebar layouts */ html[data-layout="sidebar-left"] .layout-sidenav .navbar-brand { cursor: pointer; } html[data-layout="sidebar-left"] .layout-sidenav .navbar-nav { flex-direction: column !important; align-items: stretch; margin: 0 !important; width: 100%; gap: 2px; } html[data-layout="sidebar-left"] .layout-sidenav .nav-item { width: 100%; } html[data-layout="sidebar-left"] .layout-sidenav .nav-link { display: flex; align-items: center; width: 100%; min-width: 0; padding: 10px 14px; border-radius: 0; letter-spacing: 0.05em !important; white-space: normal !important; overflow-wrap: break-word; } /* Dropdown items follow the same rules so nothing clips */ html[data-layout="sidebar-left"] .layout-sidenav .dropdown-item { white-space: normal !important; letter-spacing: 0.03em !important; min-width: 0; } /* Account row: truncate long display names instead of overflowing */ html[data-layout="sidebar-left"] .layout-sidenav .nav-link .d-lg-inline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; max-width: calc(var(--layout-sidenav-w, 260px) - 96px); } /* Submenus fly out beside the rail. The hover JS reparents the menu to (class .sidenav-flyout) so no rail overflow/filter can clip it, then positions it at the parent item's row. */ .dropdown-menu.sidenav-flyout { position: fixed !important; display: none; width: max-content; min-width: 220px; max-width: 320px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--figma-bg-navbar, var(--figma-bg-primary)) !important; border: 1px solid var(--figma-border, rgba(255,255,255,0.12)) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important; border-radius: var(--figma-radius-sm, 6px) !important; padding: 6px !important; margin: 0 !important; transform: none !important; z-index: 2000 !important; } .dropdown-menu.sidenav-flyout.show { display: block; } /* Hide the hamburger on desktop; nav is always expanded in the rail */ html[data-layout="sidebar-left"] .layout-sidenav .navbar-toggler { display: none; } } /* =================================================================== STYLE: GLASS Maximum frosted glass. Every surface blurred & floating. Spring bounce animations, ultra-light 200 weight headings. =================================================================== */ html[data-layout="sidebar-left"] { --figma-radius-sm: 16px; --figma-radius-md: 24px; --figma-radius-lg: 32px; --figma-radius-xl: 40px; --figma-radius-full: 1000px; --figma-card-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 20px 60px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.1); --figma-card-blur: blur(32px); --figma-border: rgba(255,255,255,0.14); --figma-border-width: 1px; --figma-font-primary: 'Inter',system-ui,sans-serif; --figma-font-secondary: 'Inter',system-ui,sans-serif; --figma-font-heading: 'Inter',system-ui,sans-serif; --figma-heading-weight: 200; --figma-heading-spacing: 0.06em; --figma-transition-fast: 300ms cubic-bezier(0.34,1.56,0.64,1); --figma-transition-normal: 500ms cubic-bezier(0.34,1.56,0.64,1); --figma-backdrop-blur: blur(40px); --figma-backdrop-blur-light: blur(20px); } html[data-layout="sidebar-left"] body.figma-theme, html[data-layout="sidebar-left"] body.ind-theme { font-weight: 300 !important; } html[data-layout="sidebar-left"] body.figma-theme h1, html[data-layout="sidebar-left"] body.ind-theme h1, html[data-layout="sidebar-left"] body.figma-theme h2, html[data-layout="sidebar-left"] body.ind-theme h2, html[data-layout="sidebar-left"] body.figma-theme h3, html[data-layout="sidebar-left"] body.ind-theme h3, html[data-layout="sidebar-left"] body.figma-theme h4, html[data-layout="sidebar-left"] body.ind-theme h4, html[data-layout="sidebar-left"] body.figma-theme h5, html[data-layout="sidebar-left"] body.ind-theme h5 { font-weight: 200 !important; letter-spacing: 0.06em !important; } html[data-layout="sidebar-left"] body.figma-theme .card, html[data-layout="sidebar-left"] body.ind-theme .card, html[data-layout="sidebar-left"] body.figma-theme .figma-card, html[data-layout="sidebar-left"] body.ind-theme .figma-card, html[data-layout="sidebar-left"] body.figma-theme .figma-resource-card, html[data-layout="sidebar-left"] body.ind-theme .figma-resource-card, html[data-layout="sidebar-left"] body.figma-theme .figma-stats-container, html[data-layout="sidebar-left"] body.ind-theme .figma-stats-container, html[data-layout="sidebar-left"] body.figma-theme .inquiry-form-card, html[data-layout="sidebar-left"] body.ind-theme .inquiry-form-card, html[data-layout="sidebar-left"] body.figma-theme .apparatus-details-card, html[data-layout="sidebar-left"] body.ind-theme .apparatus-details-card { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(32px) saturate(180%) brightness(1.1) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--figma-radius-xl) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.05) !important; transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 300ms ease !important; } html[data-layout="sidebar-left"] body.figma-theme .card:hover, html[data-layout="sidebar-left"] body.ind-theme .card:hover, html[data-layout="sidebar-left"] body.figma-theme .figma-card:hover, html[data-layout="sidebar-left"] body.ind-theme .figma-card:hover, html[data-layout="sidebar-left"] body.figma-theme .figma-resource-card:hover, html[data-layout="sidebar-left"] body.ind-theme .figma-resource-card:hover { transform: translateY(-6px) scale(1.01) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 40px 80px rgba(0,0,0,0.55), 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important; filter: none !important; } html[data-layout="sidebar-left"] body.figma-theme .card-header, html[data-layout="sidebar-left"] body.ind-theme .card-header, html[data-layout="sidebar-left"] body.figma-theme .figma-card-header, html[data-layout="sidebar-left"] body.ind-theme .figma-card-header { background: rgba(255,255,255,0.03) !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; border-radius: var(--figma-radius-xl) var(--figma-radius-xl) 0 0 !important; font-weight: 300 !important; } html[data-layout="sidebar-left"] body.figma-theme .btn, html[data-layout="sidebar-left"] body.ind-theme .btn, html[data-layout="sidebar-left"] body.figma-theme .figma-btn, html[data-layout="sidebar-left"] body.ind-theme .figma-btn { border-radius: var(--figma-radius-full) !important; backdrop-filter: blur(16px) !important; font-weight: 400 !important; letter-spacing: 0.04em !important; transition: all 300ms cubic-bezier(0.34,1.56,0.64,1) !important; } html[data-layout="sidebar-left"] body.figma-theme .btn-primary, html[data-layout="sidebar-left"] body.ind-theme .btn-primary, html[data-layout="sidebar-left"] body.figma-theme .figma-btn-primary, html[data-layout="sidebar-left"] body.ind-theme .figma-btn-primary { background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(20px) saturate(160%) !important; border: 1px solid rgba(255,255,255,0.22) !important; color: var(--figma-text-primary) !important; border-radius: var(--figma-radius-full) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.08) !important; padding: 14px 36px !important; } html[data-layout="sidebar-left"] body.figma-theme .btn-primary:hover, html[data-layout="sidebar-left"] body.ind-theme .btn-primary:hover, html[data-layout="sidebar-left"] body.figma-theme .figma-btn-primary:hover, html[data-layout="sidebar-left"] body.ind-theme .figma-btn-primary:hover { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.38) !important; transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 16px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important; } html[data-layout="sidebar-left"] body.figma-theme input.form-control, html[data-layout="sidebar-left"] body.ind-theme input.form-control, html[data-layout="sidebar-left"] body.figma-theme textarea.form-control, html[data-layout="sidebar-left"] body.ind-theme textarea.form-control, html[data-layout="sidebar-left"] body.figma-theme select.form-select, html[data-layout="sidebar-left"] body.ind-theme select.form-select { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--figma-radius-lg) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,0.2) !important; padding: 14px 20px !important; font-weight: 300 !important; } html[data-layout="sidebar-left"] body.figma-theme input.form-control:focus, html[data-layout="sidebar-left"] body.ind-theme input.form-control:focus, html[data-layout="sidebar-left"] body.figma-theme textarea.form-control:focus, html[data-layout="sidebar-left"] body.ind-theme textarea.form-control:focus, html[data-layout="sidebar-left"] body.figma-theme select.form-select:focus, html[data-layout="sidebar-left"] body.ind-theme select.form-select:focus { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.3) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,0.15), 0 0 0 4px rgba(255,255,255,0.06), 0 0 20px rgba(255,255,255,0.05) !important; transform: scale(1.01) !important; } html[data-layout="sidebar-left"] body.figma-theme .form-label, html[data-layout="sidebar-left"] body.ind-theme .form-label { font-weight: 300 !important; letter-spacing: 0.05em !important; font-size: 0.8rem !important; text-transform: uppercase !important; } html[data-layout="sidebar-left"] .figma-navbar { background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.2) !important; overflow: visible !important; transform: translateZ(0); } /* Patch/logo: keep it above the glass compositing layer and prevent edge clipping */ html[data-layout="sidebar-left"] .figma-navbar .navbar-brand { overflow: visible !important; isolation: isolate; top: 0 !important; } html[data-layout="sidebar-left"] .figma-navbar .navbar-brand img { border-radius: 0 !important; } html[data-layout="sidebar-left"] .figma-navbar .nav-link:hover, html[data-layout="sidebar-left"] .figma-navbar .nav-link.active { background: rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) !important; border-radius: var(--figma-radius-md) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important; } html[data-layout="sidebar-left"] .figma-navbar .btn-join { background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: var(--figma-radius-full) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.25) !important; } html[data-layout="sidebar-left"] .figma-navbar .dropdown-menu { background: rgba(8,8,20,0.5) !important; backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-xl) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08) !important; } html[data-layout="sidebar-left"] .figma-navbar .dropdown-item { border-radius: var(--figma-radius-md) !important; color: #ffffff !important; } html[data-layout="sidebar-left"] .figma-navbar .dropdown-item:hover { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; transform: translateX(4px) !important; } html[data-layout="sidebar-left"] .dept-name-header { background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* Announcements section container — identical glass recipe as navbar/header so the whole top of the homepage is one continuous frosted surface (overrides the light-theme white-band rule, which otherwise leaves a white bar here). */ html[data-layout="sidebar-left"] body.figma-theme .hp-announcements-section, html[data-layout="sidebar-left"] body.ind-theme .hp-announcements-section { background: rgba(0,0,0,0.15) !important; backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; -webkit-backdrop-filter: blur(40px) saturate(200%) brightness(1.05) !important; border-top: none !important; border-bottom: none !important; } /* Announcement alert strip — frosted, matching the navbar instead of opaque slate */ html[data-layout="sidebar-left"] .hp-ann-alert-strip { --ann-strip-bg: rgba(0,0,0,0.28); --ann-strip-border: rgba(255,255,255,0.14); --ann-strip-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 6px 28px rgba(0,0,0,0.35); backdrop-filter: blur(40px) saturate(160%) !important; -webkit-backdrop-filter: blur(40px) saturate(160%) !important; } /* Glass + light theme: frosted white so text stays dark-on-light */ html[data-theme="light"][data-layout="sidebar-left"] body.figma-theme .hp-ann-alert-strip { --ann-strip-bg: rgba(255,255,255,0.75); } html[data-layout="sidebar-left"] .hero-stats-banner { backdrop-filter: blur(32px) saturate(180%) !important; background: rgba(0,0,0,0.2) !important; border-top: 1px solid rgba(255,255,255,0.1) !important; } html[data-layout="sidebar-left"] .hero-stat-item.dark-bg { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(32px) !important; } html[data-layout="sidebar-left"] .hero-stat-menu { background: rgba(5,5,15,0.6) !important; backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--figma-radius-xl) !important; } html[data-layout="sidebar-left"] .stat-menu-item { border-radius: var(--figma-radius-md) !important; } html[data-layout="sidebar-left"] .stat-menu-item:hover { background: rgba(255,255,255,0.07) !important; transform: translateX(4px) !important; } html[data-layout="sidebar-left"] .quick-link { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: var(--figma-radius-full) !important; } html[data-layout="sidebar-left"] .quick-link:hover { background: rgba(255,255,255,0.12) !important; transform: translateY(-3px) scale(1.03) !important; } html[data-layout="sidebar-left"] .link-count { border-radius: var(--figma-radius-full) !important; } html[data-layout="sidebar-left"] .badge { border-radius: var(--figma-radius-full) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.12) !important; } html[data-layout="sidebar-left"] .sidebar-figma { background: rgba(0,0,0,0.25) !important; backdrop-filter: blur(40px) saturate(160%) !important; border-right: 1px solid rgba(255,255,255,0.08) !important; } html[data-layout="sidebar-left"] .sidebar-figma .nav-link { border-radius: var(--figma-radius-lg) !important; } html[data-layout="sidebar-left"] .sidebar-figma .nav-link:hover { background: rgba(255,255,255,0.07) !important; transform: translateX(4px) !important; } html[data-layout="sidebar-left"] .sidebar-figma .nav-link.active { background: rgba(255,255,255,0.1) !important; backdrop-filter: blur(12px) !important; border-radius: var(--figma-radius-lg) !important; border-left: none !important; } html[data-layout="sidebar-left"] .alert { backdrop-filter: blur(20px) !important; background: rgba(255,255,255,0.04) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-xl) !important; font-weight: 300 !important; } html[data-layout="sidebar-left"] .figma-progress-bar { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(12px) !important; border-radius: var(--figma-radius-full) !important; height: 36px !important; } html[data-layout="sidebar-left"] .modal-content { background: rgba(10,10,20,0.5) !important; backdrop-filter: blur(40px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-xl) !important; } html[data-layout="sidebar-left"] .toast { background: rgba(10,10,20,0.55) !important; backdrop-filter: blur(24px) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: var(--figma-radius-lg) !important; } html[data-layout="sidebar-left"] .figma-tabs { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(16px) !important; border-radius: var(--figma-radius-full) !important; } html[data-layout="sidebar-left"] .figma-tab.active { background: rgba(255,255,255,0.14) !important; border-radius: var(--figma-radius-full) !important; } /* =================================================================== STYLE: MUNICIPAL CLASSIC Inspired by duxburyfire.org — a traditional New England town fire department website. Bright white canvas, deep navy navigation band, fire-engine red accents, serif department masthead, flat bordered cards, uppercase small-caps navigation. Overrides data-theme to always render light — this preset IS the theme. =================================================================== */ html[data-layout="municipal"] { /* Palette — locked light regardless of data-theme */ --muni-navy: #1b2a4a; --muni-navy-dark: #12203a; --muni-red: #b22222; --muni-red-dark: #8e1a1a; --muni-gold: #c9a227; --muni-paper: #ffffff; --muni-paper-alt: #f4f5f7; --muni-ink: #1e2430; --muni-ink-soft: #4a5261; --figma-bg-primary: var(--muni-paper); --figma-bg-surface: var(--muni-paper-alt); --figma-bg-card: #ffffff; --figma-bg-navbar: var(--muni-navy); --figma-text-primary: var(--muni-ink); --figma-text-secondary: var(--muni-ink-soft); --figma-text-muted: #6c7484; --figma-text-disabled: #9aa1ae; --figma-brand-red: var(--muni-red); --figma-brand-red-dark: var(--muni-red-dark); --figma-border: #d8dce3; --figma-border-subtle: #e7eaef; --figma-border-width: 1px; --figma-radius-sm: 3px; --figma-radius-md: 4px; --figma-radius-lg: 6px; --figma-radius-xl: 8px; --figma-radius-full: 999px; --figma-card-shadow: 0 1px 3px rgba(27,42,74,0.10); --figma-card-blur: none; --figma-font-primary: Georgia, 'Times New Roman', serif; --figma-font-secondary: 'Segoe UI', Tahoma, system-ui, sans-serif; --figma-font-heading: Georgia, 'Times New Roman', serif; --figma-heading-weight: 700; --figma-heading-spacing: 0.01em; --figma-btn-primary-bg: var(--muni-red); --figma-btn-primary-bg-hover: var(--muni-red-dark); --figma-btn-primary-text: #ffffff; --figma-input-bg: #ffffff; --figma-input-border: #c3c9d2; --figma-input-text: var(--muni-ink); --figma-gradient-card-primary: #ffffff; /* Navbar tokens — solid navy band */ --figma-navbar-bg: var(--muni-navy); --figma-navbar-link-color: rgba(255,255,255,0.92); --figma-navbar-link-hover-bg: rgba(255,255,255,0.10); --figma-navbar-link-active-bg: var(--muni-red); --figma-navbar-dropdown-bg: var(--muni-navy-dark); --figma-navbar-dropdown-border: rgba(255,255,255,0.15); --figma-navbar-dropdown-item-hover-bg: rgba(255,255,255,0.10); --figma-navbar-toggler-bg: rgba(255,255,255,0.08); --figma-navbar-toggler-border: rgba(255,255,255,0.30); --figma-navbar-mobile-border: rgba(255,255,255,0.20); --figma-navbar-join-shadow: none; --figma-transition-fast: 150ms ease; --figma-transition-normal: 250ms ease; --figma-backdrop-blur: none; --figma-backdrop-blur-light: none; } /* Body canvas — force light regardless of theme */ html[data-layout="municipal"] body.figma-theme, html[data-layout="municipal"] body.ind-theme { background: var(--muni-paper) !important; color: var(--muni-ink) !important; font-family: var(--figma-font-secondary) !important; } /* Serif headings, navy ink */ html[data-layout="municipal"] body.figma-theme h1, html[data-layout="municipal"] body.figma-theme h2, html[data-layout="municipal"] body.figma-theme h3, html[data-layout="municipal"] body.figma-theme h4, html[data-layout="municipal"] body.figma-theme h5, html[data-layout="municipal"] body.ind-theme h1, html[data-layout="municipal"] body.ind-theme h2, html[data-layout="municipal"] body.ind-theme h3, html[data-layout="municipal"] body.ind-theme h4, html[data-layout="municipal"] body.ind-theme h5 { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; color: var(--muni-navy) !important; letter-spacing: 0.01em !important; } /* Navbar: solid navy band with a gold keyline underneath */ html[data-layout="municipal"] .figma-navbar { background: var(--muni-navy) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 3px solid var(--muni-gold) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; } html[data-layout="municipal"] .figma-navbar .nav-link { color: rgba(255,255,255,0.92) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-family: 'Segoe UI', Tahoma, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 0 !important; } html[data-layout="municipal"] .figma-navbar .nav-link:hover { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; } html[data-layout="municipal"] .figma-navbar .nav-link.active { background: var(--muni-red) !important; color: #ffffff !important; } html[data-layout="municipal"] .figma-navbar .dropdown-menu { background: var(--muni-navy-dark) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-top: 3px solid var(--muni-gold) !important; border-radius: 0 !important; backdrop-filter: none !important; box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; } html[data-layout="municipal"] .figma-navbar .dropdown-item { color: rgba(255,255,255,0.9) !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: 0.06em !important; border-radius: 0 !important; } html[data-layout="municipal"] .figma-navbar .dropdown-item:hover { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; } html[data-layout="municipal"] .figma-navbar .btn-join { background: var(--muni-red) !important; color: #ffffff !important; border-radius: 3px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; box-shadow: none !important; } /* Department masthead — centered serif nameplate over white */ html[data-layout="municipal"] .dept-name-header { background: var(--muni-paper) !important; border-bottom: 4px double var(--muni-navy) !important; box-shadow: none !important; text-align: center !important; padding: 2.5rem 1.5rem !important; } html[data-layout="municipal"] .dept-name-title { font-family: Georgia, 'Times New Roman', serif !important; font-weight: 700 !important; color: var(--muni-navy) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-size: clamp(2rem, 5vw, 3.5rem) !important; line-height: 1.15 !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: var(--muni-navy) !important; } html[data-layout="municipal"] .dept-name-tagline { color: var(--muni-red) !important; font-family: Georgia, serif !important; font-style: italic !important; text-transform: none !important; letter-spacing: 0.04em !important; } /* Cards — flat white, hairline border, navy header strip */ html[data-layout="municipal"] body.figma-theme .card, html[data-layout="municipal"] body.ind-theme .card, html[data-layout="municipal"] body.figma-theme .figma-card, html[data-layout="municipal"] body.ind-theme .figma-card, html[data-layout="municipal"] body.figma-theme .figma-resource-card, html[data-layout="municipal"] body.ind-theme .figma-resource-card, html[data-layout="municipal"] body.figma-theme .figma-stats-container, html[data-layout="municipal"] body.ind-theme .figma-stats-container, html[data-layout="municipal"] body.figma-theme .inquiry-form-card, html[data-layout="municipal"] body.ind-theme .inquiry-form-card, html[data-layout="municipal"] body.figma-theme .apparatus-details-card, html[data-layout="municipal"] body.ind-theme .apparatus-details-card { background: #ffffff !important; backdrop-filter: none !important; border: 1px solid var(--figma-border) !important; border-top: 4px solid var(--muni-navy) !important; border-radius: var(--figma-radius-md) !important; box-shadow: 0 1px 3px rgba(27,42,74,0.10) !important; color: var(--muni-ink) !important; transition: box-shadow 150ms ease !important; } html[data-layout="municipal"] body.figma-theme .card:hover, html[data-layout="municipal"] body.ind-theme .card:hover, html[data-layout="municipal"] body.figma-theme .figma-card:hover, html[data-layout="municipal"] body.ind-theme .figma-card:hover, html[data-layout="municipal"] body.figma-theme .figma-resource-card:hover, html[data-layout="municipal"] body.ind-theme .figma-resource-card:hover { transform: none !important; box-shadow: 0 4px 12px rgba(27,42,74,0.18) !important; filter: none !important; } html[data-layout="municipal"] body.figma-theme .card-header, html[data-layout="municipal"] body.ind-theme .card-header, html[data-layout="municipal"] body.figma-theme .figma-card-header, html[data-layout="municipal"] body.ind-theme .figma-card-header { background: var(--muni-paper-alt) !important; border-bottom: 1px solid var(--figma-border) !important; color: var(--muni-navy) !important; font-family: Georgia, serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-size: 0.85rem !important; border-radius: 0 !important; } /* Buttons — flat, small radius, uppercase */ html[data-layout="municipal"] body.figma-theme .btn, html[data-layout="municipal"] body.ind-theme .btn, html[data-layout="municipal"] body.figma-theme .figma-btn, html[data-layout="municipal"] body.ind-theme .figma-btn { border-radius: 3px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-weight: 700 !important; font-family: 'Segoe UI', Tahoma, sans-serif !important; box-shadow: none !important; } html[data-layout="municipal"] body.figma-theme .btn-primary, html[data-layout="municipal"] body.ind-theme .btn-primary, html[data-layout="municipal"] body.figma-theme .figma-btn-primary, html[data-layout="municipal"] body.ind-theme .figma-btn-primary { background: var(--muni-red) !important; border: 1px solid var(--muni-red-dark) !important; color: #ffffff !important; } html[data-layout="municipal"] body.figma-theme .btn-primary:hover, html[data-layout="municipal"] body.ind-theme .btn-primary:hover, html[data-layout="municipal"] body.figma-theme .figma-btn-primary:hover, html[data-layout="municipal"] body.ind-theme .figma-btn-primary:hover { background: var(--muni-red-dark) !important; transform: none !important; } html[data-layout="municipal"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning), html[data-layout="municipal"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) { background: var(--muni-navy) !important; border: 1px solid var(--muni-navy-dark) !important; color: #ffffff !important; } html[data-layout="municipal"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover, html[data-layout="municipal"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover { background: var(--muni-navy-dark) !important; } /* Forms — crisp bordered inputs on white */ html[data-layout="municipal"] body.figma-theme input.form-control, html[data-layout="municipal"] body.ind-theme input.form-control, html[data-layout="municipal"] body.figma-theme textarea.form-control, html[data-layout="municipal"] body.ind-theme textarea.form-control, html[data-layout="municipal"] body.figma-theme select.form-select, html[data-layout="municipal"] body.ind-theme select.form-select { background: #ffffff !important; border: 1px solid #c3c9d2 !important; border-radius: 3px !important; color: var(--muni-ink) !important; box-shadow: none !important; } html[data-layout="municipal"] body.figma-theme input.form-control:focus, html[data-layout="municipal"] body.ind-theme input.form-control:focus, html[data-layout="municipal"] body.figma-theme textarea.form-control:focus, html[data-layout="municipal"] body.ind-theme textarea.form-control:focus, html[data-layout="municipal"] body.figma-theme select.form-select:focus, html[data-layout="municipal"] body.ind-theme select.form-select:focus { border-color: var(--muni-navy) !important; box-shadow: 0 0 0 3px rgba(27,42,74,0.15) !important; outline: none !important; } html[data-layout="municipal"] body.figma-theme .form-label, html[data-layout="municipal"] body.ind-theme .form-label { color: var(--muni-navy) !important; font-weight: 700 !important; font-size: 0.8rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Tables */ html[data-layout="municipal"] body.figma-theme .table, html[data-layout="municipal"] body.ind-theme .table { color: var(--muni-ink) !important; --bs-table-bg: transparent; --bs-table-color: var(--muni-ink); } html[data-layout="municipal"] body.figma-theme .table thead th, html[data-layout="municipal"] body.ind-theme .table thead th { background: var(--muni-navy) !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-size: 0.75rem !important; border-bottom: none !important; } html[data-layout="municipal"] body.figma-theme .table tbody td, html[data-layout="municipal"] body.ind-theme .table tbody td { border-top: 1px solid var(--figma-border) !important; } html[data-layout="municipal"] body.figma-theme .table-striped > tbody > tr:nth-of-type(odd) > *, html[data-layout="municipal"] body.ind-theme .table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--muni-paper-alt) !important; color: var(--muni-ink) !important; } /* Sidebar admin nav (member area left rail) */ html[data-layout="municipal"] .sidebar-figma { background: var(--muni-paper-alt) !important; border-right: 1px solid var(--figma-border) !important; } html[data-layout="municipal"] .sidebar-figma .nav-link { color: var(--muni-ink-soft) !important; border-radius: 3px !important; font-weight: 600 !important; } html[data-layout="municipal"] .sidebar-figma .nav-link:hover { background: rgba(27,42,74,0.08) !important; color: var(--muni-navy) !important; } html[data-layout="municipal"] .sidebar-figma .nav-link.active { background: var(--muni-navy) !important; color: #ffffff !important; } /* Alerts, badges, progress, modals, toasts */ html[data-layout="municipal"] .alert { background: var(--muni-paper-alt) !important; border: 1px solid var(--figma-border) !important; border-left: 5px solid var(--muni-red) !important; border-radius: 3px !important; color: var(--muni-ink) !important; } html[data-layout="municipal"] .badge { border-radius: 3px !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } html[data-layout="municipal"] .figma-progress-bar { background: var(--muni-paper-alt) !important; border: 1px solid var(--figma-border) !important; border-radius: 3px !important; } html[data-layout="municipal"] .figma-progress-fill { border-radius: 2px !important; background: var(--muni-red) !important; } html[data-layout="municipal"] .modal-content { background: #ffffff !important; backdrop-filter: none !important; border: 1px solid var(--figma-border) !important; border-top: 4px solid var(--muni-navy) !important; border-radius: 4px !important; color: var(--muni-ink) !important; } html[data-layout="municipal"] .toast { background: #ffffff !important; border: 1px solid var(--figma-border) !important; border-left: 5px solid var(--muni-navy) !important; border-radius: 3px !important; color: var(--muni-ink) !important; } /* Links */ html[data-layout="municipal"] body.figma-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge), html[data-layout="municipal"] body.ind-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: var(--muni-red) !important; } /* Footer — navy band echoing the navbar */ html[data-layout="municipal"] .figma-footer, html[data-layout="municipal"] footer { background: var(--muni-navy) !important; color: rgba(255,255,255,0.85) !important; border-top: 3px solid var(--muni-gold) !important; } html[data-layout="municipal"] .figma-footer a, html[data-layout="municipal"] footer a { color: #ffffff !important; } /* Quick links / stat chips on home */ html[data-layout="municipal"] .quick-link { background: #ffffff !important; border: 1px solid var(--figma-border) !important; border-left: 4px solid var(--muni-red) !important; border-radius: 3px !important; color: var(--muni-navy) !important; font-weight: 700 !important; } html[data-layout="municipal"] .hero-stats-banner { background: var(--muni-navy) !important; backdrop-filter: none !important; border-top: 3px solid var(--muni-gold) !important; } html[data-layout="municipal"] .hero-stat-number { color: #ffffff !important; } html[data-layout="municipal"] .hero-stat-label { color: rgba(255,255,255,0.75) !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; } /* Tabs */ html[data-layout="municipal"] .figma-tabs { background: var(--muni-paper-alt) !important; border: 1px solid var(--figma-border) !important; border-radius: 3px !important; } html[data-layout="municipal"] .figma-tab.active { background: var(--muni-navy) !important; color: #ffffff !important; border-radius: 2px !important; } /* ── MUNICIPAL: full homepage anatomy ───────────────────────────── The hp-* sections hardcode dark-theme colors; rebuild every band as a bright, traditional town-department page: white/gray bands, navy headings, red eyebrows, shorter hero with navy stat band. */ /* Hero: shorter, formal — like a masthead photo, not a takeover */ html[data-layout="municipal"] .figma-hero { min-height: 480px !important; } html[data-layout="municipal"] .hero-stats-banner { position: relative !important; background: var(--muni-navy) !important; backdrop-filter: none !important; border-top: 3px solid var(--muni-gold) !important; } html[data-layout="municipal"] .hero-stat-item.dark-bg { background: var(--muni-red) !important; } html[data-layout="municipal"] .hero-stat-number { font-family: Georgia, serif !important; font-size: 3rem !important; text-shadow: none !important; } /* Announcements: parchment notice board strip */ html[data-layout="municipal"] .hp-announcements-section { background: var(--muni-paper-alt) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--figma-border) !important; --ann-strip-bg: #ffffff; --ann-strip-border: var(--figma-border); --ann-strip-text: var(--muni-ink); --ann-strip-hover-bg: #f0f2f5; --ann-strip-text-hover: var(--muni-navy); --ann-strip-shadow: 0 1px 3px rgba(27,42,74,0.10); } html[data-layout="municipal"] .hp-ann-alert-strip { border-radius: 0 !important; border-left: 5px solid var(--muni-red) !important; } /* Shared section typography */ html[data-layout="municipal"] .hp-section-eyebrow { color: var(--muni-red) !important; font-family: 'Segoe UI', Tahoma, sans-serif !important; } html[data-layout="municipal"] .hp-section-title { font-family: Georgia, 'Times New Roman', serif !important; color: var(--muni-navy) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-size: 1.75rem !important; padding-bottom: 0.75rem !important; border-bottom: 4px double var(--muni-navy) !important; display: inline-block !important; } /* Alternating white / soft-gray bands, no gradients or blur */ html[data-layout="municipal"] .hp-info-cards-section, html[data-layout="municipal"] .hp-stats-section, html[data-layout="municipal"] .hp-recruit-section { background: var(--muni-paper) !important; backdrop-filter: none !important; border-color: var(--figma-border) !important; } html[data-layout="municipal"] .hp-about-section, html[data-layout="municipal"] .hp-companies-section, html[data-layout="municipal"] .hp-safety-section, html[data-layout="municipal"] .hp-news-section, html[data-layout="municipal"] .hp-dept-tiles-section { background: var(--muni-paper-alt) !important; backdrop-filter: none !important; border-color: var(--figma-border) !important; } /* Info cards: flat white with navy top strip (matches card system) */ html[data-layout="municipal"] .hp-info-card { background: #ffffff !important; border: 1px solid var(--figma-border) !important; border-top: 4px solid var(--muni-navy) !important; border-radius: 4px !important; } html[data-layout="municipal"] .hp-info-card:hover { transform: none !important; background: #ffffff !important; border-color: var(--figma-border) !important; border-top-color: var(--muni-red) !important; box-shadow: 0 4px 12px rgba(27,42,74,0.18) !important; } html[data-layout="municipal"] .hp-info-card-icon { color: var(--muni-red) !important; } html[data-layout="municipal"] .hp-info-card-title { color: var(--muni-navy) !important; font-family: Georgia, serif !important; } html[data-layout="municipal"] .hp-info-card-body { color: var(--muni-ink-soft) !important; } html[data-layout="municipal"] .hp-info-card-link { color: var(--muni-red) !important; } /* About: bright, formal */ html[data-layout="municipal"] .hp-about-body { color: var(--muni-ink) !important; } html[data-layout="municipal"] .hp-about-link { color: var(--muni-red) !important; } html[data-layout="municipal"] .hp-about-image-placeholder { background: #ffffff !important; border-color: var(--muni-navy) !important; color: var(--muni-navy) !important; } html[data-layout="municipal"] .hp-patch-img { filter: none !important; } /* Companies / firehouses */ html[data-layout="municipal"] .hp-company-card { border-bottom: 1px solid var(--figma-border) !important; } html[data-layout="municipal"] .hp-company-name { color: var(--muni-navy) !important; font-family: Georgia, serif !important; } html[data-layout="municipal"] .hp-company-address { color: var(--muni-ink-soft) !important; } html[data-layout="municipal"] .hp-company-desc { color: var(--muni-ink) !important; } html[data-layout="municipal"] .hp-company-cta { color: var(--muni-red) !important; } html[data-layout="municipal"] .hp-company-img { border-radius: 4px !important; background: #ffffff !important; border: 1px solid var(--figma-border) !important; } html[data-layout="municipal"] .hp-company-img-placeholder { color: var(--muni-navy) !important; opacity: 0.4; } /* Call volume stats: navy ledger numbers */ html[data-layout="municipal"] .hp-stat-block { border-color: var(--figma-border) !important; } html[data-layout="municipal"] .hp-stat-number { font-family: Georgia, serif !important; color: var(--muni-navy) !important; text-shadow: none !important; } html[data-layout="municipal"] .hp-stat-block-current .hp-stat-number { color: var(--muni-red) !important; } html[data-layout="municipal"] .hp-stat-year { color: var(--muni-ink-soft) !important; } /* Department tiles */ html[data-layout="municipal"] .hp-dept-tile-icon { color: var(--muni-red) !important; } html[data-layout="municipal"] .hp-dept-tile-label { color: var(--muni-navy) !important; font-family: Georgia, serif !important; } html[data-layout="municipal"] .hp-dept-tile-sub { color: var(--muni-ink-soft) !important; } /* Safety tiles */ html[data-layout="municipal"] .hp-safety-tile { background: #ffffff !important; border: 1px solid var(--figma-border) !important; border-radius: 4px !important; color: var(--muni-ink) !important; } html[data-layout="municipal"] .hp-safety-tile:hover { transform: none !important; background: #ffffff !important; border-color: var(--muni-navy) !important; box-shadow: 0 4px 12px rgba(27,42,74,0.18) !important; } html[data-layout="municipal"] .hp-safety-tile-icon { color: var(--muni-red) !important; } html[data-layout="municipal"] .hp-safety-tile-title { color: var(--muni-navy) !important; } html[data-layout="municipal"] .hp-safety-tile-body { color: var(--muni-ink-soft) !important; } html[data-layout="municipal"] .hp-safety-tile-link { color: var(--muni-red) !important; } /* Administration band: navy civic strip */ html[data-layout="municipal"] .hp-admin-section { background: var(--muni-navy) !important; border-color: var(--muni-navy-dark) !important; } html[data-layout="municipal"] .hp-admin-section .hp-section-eyebrow { color: var(--muni-gold) !important; } html[data-layout="municipal"] .hp-admin-section .hp-section-title { color: #ffffff !important; border-bottom-color: var(--muni-gold) !important; } html[data-layout="municipal"] .hp-admin-body { color: rgba(255,255,255,0.85) !important; } html[data-layout="municipal"] .hp-admin-link-item { color: #ffffff !important; text-decoration: underline; } html[data-layout="municipal"] .hp-admin-link-item:hover { color: var(--muni-gold) !important; } /* News: newspaper-style flat cards */ html[data-layout="municipal"] .hp-news-card { background: #ffffff !important; border: 1px solid var(--figma-border) !important; border-radius: 4px !important; } html[data-layout="municipal"] .hp-news-card:hover { transform: none !important; background: #ffffff !important; border-color: var(--muni-navy) !important; box-shadow: 0 4px 12px rgba(27,42,74,0.18) !important; } html[data-layout="municipal"] .hp-news-title { color: var(--muni-navy) !important; font-family: Georgia, serif !important; } html[data-layout="municipal"] .hp-news-excerpt { color: var(--muni-ink-soft) !important; } html[data-layout="municipal"] .hp-news-date { color: var(--muni-ink-soft) !important; } html[data-layout="municipal"] .hp-news-thumb { background: var(--muni-paper-alt) !important; } html[data-layout="municipal"] .hp-news-tag { background: var(--muni-navy) !important; color: #ffffff !important; border: none !important; border-radius: 2px !important; } html[data-layout="municipal"] .hp-news-tag-featured { background: var(--muni-red) !important; color: #ffffff !important; } html[data-layout="municipal"] .hp-read-more-btn { background: var(--muni-red) !important; border: 1px solid var(--muni-red-dark) !important; color: #ffffff !important; border-radius: 3px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } html[data-layout="municipal"] .hp-read-more-btn:hover { background: var(--muni-red-dark) !important; } /* Spotlight + recruit */ html[data-layout="municipal"] .hp-spotlight-band { background: var(--muni-paper) !important; } html[data-layout="municipal"] .hp-spotlight-body { color: var(--muni-ink) !important; } html[data-layout="municipal"] .hp-spotlight-media { border-radius: 4px !important; border: 1px solid var(--figma-border) !important; background: #ffffff !important; } html[data-layout="municipal"] .hp-recruit-video-wrap { border-radius: 4px !important; border: 1px solid var(--figma-border) !important; box-shadow: 0 4px 12px rgba(27,42,74,0.18) !important; } /* =================================================================== STYLE: SIMPLE Inspired by town.duxbury.ma.us — a plain municipal-government CMS look. Quiet and utilitarian: white canvas, soft gray panels, one muted steel-blue for nav/links, plain sans-serif type everywhere, hairline borders, no uppercase, no shadows, no gradients. Locked light regardless of data-theme. =================================================================== */ html[data-layout="simple"] { --smp-blue: #33608c; --smp-blue-dark: #27496b; --smp-paper: #ffffff; --smp-panel: #f2f4f6; --smp-ink: #2b2f36; --smp-ink-soft: #575e68; --smp-border: #d7dbe0; --figma-bg-primary: var(--smp-paper); --figma-bg-surface: var(--smp-panel); --figma-bg-card: #ffffff; --figma-bg-navbar: var(--smp-blue); --figma-text-primary: var(--smp-ink); --figma-text-secondary: var(--smp-ink-soft); --figma-text-muted: #78808b; --figma-text-disabled: #a2a8b1; --figma-brand-red: var(--smp-blue); --figma-brand-red-dark: var(--smp-blue-dark); --figma-border: var(--smp-border); --figma-border-subtle: #e6e9ec; --figma-border-width: 1px; --figma-radius-sm: 2px; --figma-radius-md: 3px; --figma-radius-lg: 4px; --figma-radius-xl: 4px; --figma-radius-full: 999px; --figma-card-shadow: none; --figma-card-blur: none; --figma-font-primary: 'Segoe UI', Arial, Helvetica, sans-serif; --figma-font-secondary: 'Segoe UI', Arial, Helvetica, sans-serif; --figma-font-heading: 'Segoe UI', Arial, Helvetica, sans-serif; --figma-heading-weight: 600; --figma-heading-spacing: 0; --figma-btn-primary-bg: var(--smp-blue); --figma-btn-primary-bg-hover: var(--smp-blue-dark); --figma-btn-primary-text: #ffffff; --figma-input-bg: #ffffff; --figma-input-border: #b9c0c8; --figma-input-text: var(--smp-ink); --figma-gradient-card-primary: #ffffff; --figma-navbar-bg: var(--smp-blue); --figma-navbar-link-color: rgba(255,255,255,0.95); --figma-navbar-link-hover-bg: rgba(255,255,255,0.12); --figma-navbar-link-active-bg: var(--smp-blue-dark); --figma-navbar-dropdown-bg: #ffffff; --figma-navbar-dropdown-border: var(--smp-border); --figma-navbar-dropdown-item-hover-bg: var(--smp-panel); --figma-navbar-toggler-bg: rgba(255,255,255,0.10); --figma-navbar-toggler-border: rgba(255,255,255,0.35); --figma-navbar-mobile-border: rgba(255,255,255,0.25); --figma-navbar-join-shadow: none; --figma-transition-fast: 100ms ease; --figma-transition-normal: 150ms ease; --figma-backdrop-blur: none; --figma-backdrop-blur-light: none; } /* Body canvas — force light */ html[data-layout="simple"] body.figma-theme, html[data-layout="simple"] body.ind-theme { background: var(--smp-paper) !important; color: var(--smp-ink) !important; font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important; } /* Plain headings — dark ink, no styling flourish */ html[data-layout="simple"] body.figma-theme h1, html[data-layout="simple"] body.figma-theme h2, html[data-layout="simple"] body.figma-theme h3, html[data-layout="simple"] body.figma-theme h4, html[data-layout="simple"] body.figma-theme h5, html[data-layout="simple"] body.ind-theme h1, html[data-layout="simple"] body.ind-theme h2, html[data-layout="simple"] body.ind-theme h3, html[data-layout="simple"] body.ind-theme h4, html[data-layout="simple"] body.ind-theme h5 { font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important; font-weight: 600 !important; color: var(--smp-ink) !important; letter-spacing: 0 !important; text-transform: none !important; } /* Navbar: flat muted-blue band */ html[data-layout="simple"] .figma-navbar { background: var(--smp-blue) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--smp-blue-dark) !important; box-shadow: none !important; } html[data-layout="simple"] .figma-navbar .nav-link { color: rgba(255,255,255,0.95) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 400 !important; border-radius: 0 !important; } html[data-layout="simple"] .figma-navbar .nav-link:hover { background: rgba(255,255,255,0.12) !important; color: #ffffff !important; } html[data-layout="simple"] .figma-navbar .nav-link.active { background: var(--smp-blue-dark) !important; color: #ffffff !important; } html[data-layout="simple"] .figma-navbar .dropdown-menu { background: #ffffff !important; border: 1px solid var(--smp-border) !important; border-radius: 0 !important; backdrop-filter: none !important; box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important; } html[data-layout="simple"] .figma-navbar .dropdown-item { color: var(--smp-ink) !important; text-transform: none !important; font-size: 14px !important; letter-spacing: 0 !important; border-radius: 0 !important; } html[data-layout="simple"] .figma-navbar .dropdown-item:hover { background: var(--smp-panel) !important; color: var(--smp-blue-dark) !important; } html[data-layout="simple"] .figma-navbar .btn-join { background: var(--smp-blue-dark) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.35) !important; border-radius: 3px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; box-shadow: none !important; } /* Department masthead — plain left-friendly nameplate on white */ html[data-layout="simple"] .dept-name-header { background: var(--smp-paper) !important; border-bottom: 1px solid var(--smp-border) !important; box-shadow: none !important; padding: 1.75rem 1.5rem !important; } html[data-layout="simple"] .dept-name-title { font-family: 'Segoe UI', Arial, Helvetica, sans-serif !important; font-weight: 600 !important; color: var(--smp-ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: clamp(1.6rem, 4vw, 2.6rem) !important; line-height: 1.2 !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: var(--smp-ink) !important; } html[data-layout="simple"] .dept-name-tagline { color: var(--smp-ink-soft) !important; font-family: 'Segoe UI', Arial, sans-serif !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; } /* Cards — flat white or soft gray panels, hairline borders, no shadow */ html[data-layout="simple"] body.figma-theme .card, html[data-layout="simple"] body.ind-theme .card, html[data-layout="simple"] body.figma-theme .figma-card, html[data-layout="simple"] body.ind-theme .figma-card, html[data-layout="simple"] body.figma-theme .figma-resource-card, html[data-layout="simple"] body.ind-theme .figma-resource-card, html[data-layout="simple"] body.figma-theme .figma-stats-container, html[data-layout="simple"] body.ind-theme .figma-stats-container, html[data-layout="simple"] body.figma-theme .inquiry-form-card, html[data-layout="simple"] body.ind-theme .inquiry-form-card, html[data-layout="simple"] body.figma-theme .apparatus-details-card, html[data-layout="simple"] body.ind-theme .apparatus-details-card { background: #ffffff !important; backdrop-filter: none !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; box-shadow: none !important; color: var(--smp-ink) !important; transition: border-color 100ms ease !important; } html[data-layout="simple"] body.figma-theme .card:hover, html[data-layout="simple"] body.ind-theme .card:hover, html[data-layout="simple"] body.figma-theme .figma-card:hover, html[data-layout="simple"] body.ind-theme .figma-card:hover, html[data-layout="simple"] body.figma-theme .figma-resource-card:hover, html[data-layout="simple"] body.ind-theme .figma-resource-card:hover { transform: none !important; filter: none !important; box-shadow: none !important; border-color: var(--smp-blue) !important; } html[data-layout="simple"] body.figma-theme .card-header, html[data-layout="simple"] body.ind-theme .card-header, html[data-layout="simple"] body.figma-theme .figma-card-header, html[data-layout="simple"] body.ind-theme .figma-card-header { background: var(--smp-panel) !important; border-bottom: 1px solid var(--smp-border) !important; color: var(--smp-ink) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.95rem !important; border-radius: 0 !important; } /* Buttons — flat, sentence case */ html[data-layout="simple"] body.figma-theme .btn, html[data-layout="simple"] body.ind-theme .btn, html[data-layout="simple"] body.figma-theme .figma-btn, html[data-layout="simple"] body.ind-theme .figma-btn { border-radius: 3px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; box-shadow: none !important; } html[data-layout="simple"] body.figma-theme .btn-primary, html[data-layout="simple"] body.ind-theme .btn-primary, html[data-layout="simple"] body.figma-theme .figma-btn-primary, html[data-layout="simple"] body.ind-theme .figma-btn-primary { background: var(--smp-blue) !important; border: 1px solid var(--smp-blue-dark) !important; color: #ffffff !important; } html[data-layout="simple"] body.figma-theme .btn-primary:hover, html[data-layout="simple"] body.ind-theme .btn-primary:hover, html[data-layout="simple"] body.figma-theme .figma-btn-primary:hover, html[data-layout="simple"] body.ind-theme .figma-btn-primary:hover { background: var(--smp-blue-dark) !important; transform: none !important; } html[data-layout="simple"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning), html[data-layout="simple"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) { background: #ffffff !important; border: 1px solid #b9c0c8 !important; color: var(--smp-ink) !important; } html[data-layout="simple"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover, html[data-layout="simple"] body.ind-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover { background: var(--smp-panel) !important; border-color: var(--smp-blue) !important; } /* Forms */ html[data-layout="simple"] body.figma-theme input.form-control, html[data-layout="simple"] body.ind-theme input.form-control, html[data-layout="simple"] body.figma-theme textarea.form-control, html[data-layout="simple"] body.ind-theme textarea.form-control, html[data-layout="simple"] body.figma-theme select.form-select, html[data-layout="simple"] body.ind-theme select.form-select { background: #ffffff !important; border: 1px solid #b9c0c8 !important; border-radius: 3px !important; color: var(--smp-ink) !important; box-shadow: none !important; } html[data-layout="simple"] body.figma-theme input.form-control:focus, html[data-layout="simple"] body.ind-theme input.form-control:focus, html[data-layout="simple"] body.figma-theme textarea.form-control:focus, html[data-layout="simple"] body.ind-theme textarea.form-control:focus, html[data-layout="simple"] body.figma-theme select.form-select:focus, html[data-layout="simple"] body.ind-theme select.form-select:focus { border-color: var(--smp-blue) !important; box-shadow: 0 0 0 2px rgba(51,96,140,0.20) !important; outline: none !important; } html[data-layout="simple"] body.figma-theme .form-label, html[data-layout="simple"] body.ind-theme .form-label { color: var(--smp-ink) !important; font-weight: 600 !important; font-size: 0.85rem !important; text-transform: none !important; letter-spacing: 0 !important; } /* Tables — gray header row, zebra striping */ html[data-layout="simple"] body.figma-theme .table, html[data-layout="simple"] body.ind-theme .table { color: var(--smp-ink) !important; --bs-table-bg: transparent; --bs-table-color: var(--smp-ink); } html[data-layout="simple"] body.figma-theme .table thead th, html[data-layout="simple"] body.ind-theme .table thead th { background: var(--smp-panel) !important; color: var(--smp-ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85rem !important; font-weight: 600 !important; border-bottom: 2px solid var(--smp-border) !important; } html[data-layout="simple"] body.figma-theme .table tbody td, html[data-layout="simple"] body.ind-theme .table tbody td { border-top: 1px solid var(--figma-border-subtle) !important; } html[data-layout="simple"] body.figma-theme .table-striped > tbody > tr:nth-of-type(odd) > *, html[data-layout="simple"] body.ind-theme .table-striped > tbody > tr:nth-of-type(odd) > * { background: #f8f9fa !important; color: var(--smp-ink) !important; } /* Sidebar admin nav (member area left rail) */ html[data-layout="simple"] .sidebar-figma { background: var(--smp-panel) !important; border-right: 1px solid var(--smp-border) !important; } html[data-layout="simple"] .sidebar-figma .nav-link { color: var(--smp-ink-soft) !important; border-radius: 3px !important; font-weight: 400 !important; } html[data-layout="simple"] .sidebar-figma .nav-link:hover { background: rgba(51,96,140,0.08) !important; color: var(--smp-blue-dark) !important; } html[data-layout="simple"] .sidebar-figma .nav-link.active { background: var(--smp-blue) !important; color: #ffffff !important; } /* Alerts, badges, progress, modals, toasts */ html[data-layout="simple"] .alert { background: var(--smp-panel) !important; border: 1px solid var(--smp-border) !important; border-left: 4px solid var(--smp-blue) !important; border-radius: 3px !important; color: var(--smp-ink) !important; backdrop-filter: none !important; } html[data-layout="simple"] .badge { border-radius: 3px !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-layout="simple"] .figma-progress-bar { background: var(--smp-panel) !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; backdrop-filter: none !important; } html[data-layout="simple"] .figma-progress-fill { border-radius: 2px !important; background: var(--smp-blue) !important; } html[data-layout="simple"] .modal-content { background: #ffffff !important; backdrop-filter: none !important; border: 1px solid var(--smp-border) !important; border-radius: 4px !important; color: var(--smp-ink) !important; } html[data-layout="simple"] .toast { background: #ffffff !important; border: 1px solid var(--smp-border) !important; border-left: 4px solid var(--smp-blue) !important; border-radius: 3px !important; color: var(--smp-ink) !important; backdrop-filter: none !important; } /* Links — classic underlined municipal blue */ html[data-layout="simple"] body.figma-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge), html[data-layout="simple"] body.ind-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge) { color: var(--smp-blue) !important; text-decoration: underline; } html[data-layout="simple"] body.figma-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover, html[data-layout="simple"] body.ind-theme a:not(.btn):not(.nav-link):not(.dropdown-item):not(.badge):hover { color: var(--smp-blue-dark) !important; } /* Footer — soft gray panel, quiet text */ html[data-layout="simple"] .figma-footer, html[data-layout="simple"] footer { background: var(--smp-panel) !important; color: var(--smp-ink-soft) !important; border-top: 1px solid var(--smp-border) !important; } html[data-layout="simple"] .figma-footer a, html[data-layout="simple"] footer a { color: var(--smp-blue) !important; } /* Quick links / stat chips on home */ html[data-layout="simple"] .quick-link { background: #ffffff !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; color: var(--smp-blue) !important; font-weight: 600 !important; } html[data-layout="simple"] .hero-stats-banner { background: var(--smp-panel) !important; backdrop-filter: none !important; border-top: 1px solid var(--smp-border) !important; border-bottom: 1px solid var(--smp-border) !important; } html[data-layout="simple"] .hero-stat-number { color: var(--smp-blue-dark) !important; } html[data-layout="simple"] .hero-stat-label { color: var(--smp-ink-soft) !important; text-transform: none !important; letter-spacing: 0 !important; } /* Tabs */ html[data-layout="simple"] .figma-tabs { background: var(--smp-panel) !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; backdrop-filter: none !important; } html[data-layout="simple"] .figma-tab.active { background: var(--smp-blue) !important; color: #ffffff !important; border-radius: 2px !important; } /* ── SIMPLE: full homepage anatomy ─────────────────────────────── Reads like a plain town-government CMS page: minimal hero, flat white page with thin dividers between sections, gray info panels, underlined blue links, zero gradients/blur/animation flourish. */ /* Hero: dramatically reduced — a modest banner photo, not a takeover */ html[data-layout="simple"] .figma-hero { min-height: 320px !important; } html[data-layout="simple"] .figma-scroll-pointer { display: none !important; } html[data-layout="simple"] .hero-stats-banner { position: relative !important; background: var(--smp-panel) !important; backdrop-filter: none !important; border-top: 1px solid var(--smp-border) !important; border-bottom: 1px solid var(--smp-border) !important; } html[data-layout="simple"] .hero-stat-item.dark-bg { background: transparent !important; } html[data-layout="simple"] .hero-stat-number { font-family: 'Segoe UI', Arial, sans-serif !important; font-size: 2.25rem !important; font-weight: 600 !important; color: var(--smp-blue-dark) !important; text-shadow: none !important; } html[data-layout="simple"] .hero-stat-label { color: var(--smp-ink-soft) !important; text-transform: none !important; letter-spacing: 0 !important; } /* Announcements: plain notice list on gray */ html[data-layout="simple"] .hp-announcements-section { background: var(--smp-panel) !important; backdrop-filter: none !important; border-bottom: 1px solid var(--smp-border) !important; padding: 1.5rem 2rem !important; --ann-strip-bg: #ffffff; --ann-strip-border: var(--smp-border); --ann-strip-text: var(--smp-ink); --ann-strip-hover-bg: #f8f9fa; --ann-strip-text-hover: var(--smp-blue-dark); --ann-strip-shadow: none; } html[data-layout="simple"] .hp-ann-alert-strip { border-radius: 3px !important; border: 1px solid var(--smp-border) !important; } /* Shared section typography: plain sentence-case headings, thin rule */ html[data-layout="simple"] .hp-section-eyebrow { color: var(--smp-ink-soft) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; } html[data-layout="simple"] .hp-section-title { font-family: 'Segoe UI', Arial, sans-serif !important; color: var(--smp-ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: 1.5rem !important; padding-bottom: 0.5rem !important; border-bottom: 2px solid var(--smp-blue) !important; display: inline-block !important; } /* All bands flat white, separated by hairlines; tighter padding */ html[data-layout="simple"] .hp-info-cards-section, html[data-layout="simple"] .hp-about-section, html[data-layout="simple"] .hp-companies-section, html[data-layout="simple"] .hp-stats-section, html[data-layout="simple"] .hp-dept-tiles-section, html[data-layout="simple"] .hp-safety-section, html[data-layout="simple"] .hp-news-section, html[data-layout="simple"] .hp-recruit-section, html[data-layout="simple"] .hp-spotlight-band { background: var(--smp-paper) !important; backdrop-filter: none !important; border-top: 1px solid var(--figma-border-subtle) !important; border-bottom: none !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } /* Info cards: gray utility panels */ html[data-layout="simple"] .hp-info-card { background: var(--smp-panel) !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; } html[data-layout="simple"] .hp-info-card:hover { transform: none !important; background: var(--smp-panel) !important; border-color: var(--smp-blue) !important; box-shadow: none !important; } html[data-layout="simple"] .hp-info-card-icon { color: var(--smp-blue) !important; } html[data-layout="simple"] .hp-info-card-title { color: var(--smp-ink) !important; } html[data-layout="simple"] .hp-info-card-body { color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-info-card-link { color: var(--smp-blue) !important; text-decoration: underline; } /* About */ html[data-layout="simple"] .hp-about-body { color: var(--smp-ink) !important; } html[data-layout="simple"] .hp-about-link { color: var(--smp-blue) !important; text-decoration: underline; } html[data-layout="simple"] .hp-about-image-placeholder { background: var(--smp-panel) !important; border-color: var(--smp-border) !important; color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-patch-img { filter: none !important; } /* Companies */ html[data-layout="simple"] .hp-company-card { border-bottom: 1px solid var(--figma-border-subtle) !important; padding: 2rem 0 !important; } html[data-layout="simple"] .hp-company-name { color: var(--smp-ink) !important; font-weight: 600 !important; } html[data-layout="simple"] .hp-company-address { color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-company-desc { color: var(--smp-ink) !important; } html[data-layout="simple"] .hp-company-cta { color: var(--smp-blue) !important; text-decoration: underline; } html[data-layout="simple"] .hp-company-img { border-radius: 3px !important; background: var(--smp-panel) !important; border: 1px solid var(--smp-border) !important; } html[data-layout="simple"] .hp-company-img-placeholder { color: var(--smp-ink-soft) !important; opacity: 0.5; } /* Stats: plain figures */ html[data-layout="simple"] .hp-stat-block { border-color: var(--smp-border) !important; } html[data-layout="simple"] .hp-stat-number { font-family: 'Segoe UI', Arial, sans-serif !important; font-weight: 600 !important; color: var(--smp-blue-dark) !important; text-shadow: none !important; font-size: 2.5rem !important; } html[data-layout="simple"] .hp-stat-block-current .hp-stat-number { color: var(--smp-blue) !important; } html[data-layout="simple"] .hp-stat-year { color: var(--smp-ink-soft) !important; text-transform: none !important; letter-spacing: 0 !important; } /* Department tiles */ html[data-layout="simple"] .hp-dept-tile-icon { color: var(--smp-blue) !important; } html[data-layout="simple"] .hp-dept-tile-label { color: var(--smp-ink) !important; font-weight: 600 !important; } html[data-layout="simple"] .hp-dept-tile-sub { color: var(--smp-ink-soft) !important; } /* Safety tiles */ html[data-layout="simple"] .hp-safety-tile { background: var(--smp-panel) !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; color: var(--smp-ink) !important; } html[data-layout="simple"] .hp-safety-tile:hover { transform: none !important; background: var(--smp-panel) !important; border-color: var(--smp-blue) !important; box-shadow: none !important; } html[data-layout="simple"] .hp-safety-tile-icon { color: var(--smp-blue) !important; } html[data-layout="simple"] .hp-safety-tile-title { color: var(--smp-ink) !important; } html[data-layout="simple"] .hp-safety-tile-body { color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-safety-tile-link { color: var(--smp-blue) !important; text-decoration: underline; } /* Administration band: gray panel */ html[data-layout="simple"] .hp-admin-section { background: var(--smp-panel) !important; border-top: 1px solid var(--smp-border) !important; border-bottom: 1px solid var(--smp-border) !important; } html[data-layout="simple"] .hp-admin-body { color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-admin-link-item { color: var(--smp-blue) !important; text-decoration: underline; } html[data-layout="simple"] .hp-admin-link-item:hover { color: var(--smp-blue-dark) !important; } /* News: plain bordered list-cards */ html[data-layout="simple"] .hp-news-card { background: #ffffff !important; border: 1px solid var(--smp-border) !important; border-radius: 3px !important; } html[data-layout="simple"] .hp-news-card:hover { transform: none !important; background: #ffffff !important; border-color: var(--smp-blue) !important; box-shadow: none !important; } html[data-layout="simple"] .hp-news-title { color: var(--smp-blue) !important; text-decoration: underline; } html[data-layout="simple"] .hp-news-excerpt { color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-news-date { color: var(--smp-ink-soft) !important; } html[data-layout="simple"] .hp-news-thumb { background: var(--smp-panel) !important; } html[data-layout="simple"] .hp-news-tag { background: var(--smp-panel) !important; color: var(--smp-ink-soft) !important; border: 1px solid var(--smp-border) !important; border-radius: 2px !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-layout="simple"] .hp-news-tag-featured { background: var(--smp-blue) !important; color: #ffffff !important; border-color: var(--smp-blue-dark) !important; } html[data-layout="simple"] .hp-read-more-btn { background: #ffffff !important; border: 1px solid var(--smp-blue) !important; color: var(--smp-blue) !important; border-radius: 3px !important; text-transform: none !important; letter-spacing: 0 !important; } html[data-layout="simple"] .hp-read-more-btn:hover { background: var(--smp-blue) !important; color: #ffffff !important; } /* Spotlight + recruit */ html[data-layout="simple"] .hp-spotlight-body { color: var(--smp-ink) !important; } html[data-layout="simple"] .hp-spotlight-media { border-radius: 3px !important; border: 1px solid var(--smp-border) !important; background: var(--smp-panel) !important; } html[data-layout="simple"] .hp-recruit-video-wrap { border-radius: 3px !important; border: 1px solid var(--smp-border) !important; box-shadow: none !important; } /* Emergency ribbon: keep functional but calmer civic red */ html[data-layout="simple"] .emergency-ribbon { background: #9c2b2b !important; } html[data-layout="simple"] .emergency-ribbon-icon { animation: none !important; } /* =================================================================== FORCED-LIGHT COMPATIBILITY (municipal + simple) Interior CRUD/list/detail pages contain elements with hardcoded dark-theme colors (white rgba text, dark panels, dark gradients) that the token cascade doesn't reach. Neutralize them for both light-locked presets so every Index/Create/Edit/Details page reads correctly. =================================================================== */ /* Extra tokens some interior pages consume */ html[data-layout="municipal"], html[data-layout="simple"] { --figma-bg-card-hover: #f0f2f5; --figma-surface: #f2f4f6; --figma-input-bg-focus: #ffffff; --header-bg: #ffffff; --bg-surface: #f2f4f6; --border: #d8dce3; --text: #2b2f36; --text-muted: #6c7484; } /* Bootstrap list groups (Departments, Companies, MemberHome, Notifications) */ html[data-layout="municipal"] .list-group-item, html[data-layout="simple"] .list-group-item { background: #ffffff !important; border-color: var(--figma-border) !important; color: var(--figma-text-primary) !important; } html[data-layout="municipal"] .list-group-item-action:hover, html[data-layout="simple"] .list-group-item-action:hover { background: var(--figma-bg-card-hover) !important; } /* Pagination (Incidents, AuditLog, FireContacts, directories) */ html[data-layout="municipal"] .pagination .page-link, html[data-layout="simple"] .pagination .page-link, html[data-layout="municipal"] .pagination-list a, html[data-layout="simple"] .pagination-list a { background: #ffffff !important; border-color: var(--figma-border) !important; color: var(--figma-brand-red) !important; } html[data-layout="municipal"] .pagination .page-item.active .page-link, html[data-layout="simple"] .pagination .page-item.active .page-link { background: var(--figma-brand-red) !important; border-color: var(--figma-brand-red) !important; color: #ffffff !important; } html[data-layout="municipal"] .pagination-info, html[data-layout="simple"] .pagination-info { color: var(--figma-text-secondary) !important; } /* Incidents index: filter bar, stat chips, heatmap (white-rgba overlays) */ html[data-layout="municipal"] .inc-stats-bar, html[data-layout="simple"] .inc-stats-bar, html[data-layout="municipal"] .inc-chip, html[data-layout="simple"] .inc-chip { background: #ffffff !important; border-color: var(--figma-border) !important; color: var(--figma-text-primary) !important; } html[data-layout="municipal"] .inc-chip-active, html[data-layout="simple"] .inc-chip-active { background: var(--figma-brand-red) !important; border-color: var(--figma-brand-red) !important; color: #ffffff !important; } html[data-layout="municipal"] .inc-heatmap-card, html[data-layout="simple"] .inc-heatmap-card { background: #ffffff !important; border: 1px solid var(--figma-border) !important; } /* Apparatus public index: dark header gradient + white title */ html[data-layout="municipal"] .api-header, html[data-layout="simple"] .api-header { background: var(--figma-bg-surface) !important; border-bottom: 1px solid var(--figma-border) !important; } html[data-layout="municipal"] .api-header-title, html[data-layout="simple"] .api-header-title { color: var(--figma-text-primary) !important; text-shadow: none !important; } html[data-layout="municipal"] .api-header-sub, html[data-layout="simple"] .api-header-sub { color: var(--figma-text-secondary) !important; } html[data-layout="municipal"] .api-card, html[data-layout="simple"] .api-card { background: #ffffff !important; border: 1px solid var(--figma-border) !important; } /* Detail pages (Announcements etc.): translucent color badges on dark */ html[data-layout="municipal"] .figma-meta-badge, html[data-layout="simple"] .figma-meta-badge, html[data-layout="municipal"] .figma-date-range, html[data-layout="simple"] .figma-date-range { background: var(--figma-bg-surface) !important; border: 1px solid var(--figma-border) !important; color: var(--figma-text-primary) !important; } html[data-layout="municipal"] .figma-detail-container, html[data-layout="simple"] .figma-detail-container { background: #ffffff !important; border: 1px solid var(--figma-border) !important; } html[data-layout="municipal"] .figma-text-content, html[data-layout="simple"] .figma-text-content, html[data-layout="municipal"] .figma-detail-meta, html[data-layout="simple"] .figma-detail-meta, html[data-layout="municipal"] .figma-breadcrumb, html[data-layout="simple"] .figma-breadcrumb { color: var(--figma-text-secondary) !important; } /* Generic guards: any leftover translucent dark panels & white text */ html[data-layout="municipal"] .figma-table, html[data-layout="simple"] .figma-table { background: #ffffff !important; color: var(--figma-text-primary) !important; border-color: var(--figma-border) !important; } html[data-layout="municipal"] .figma-card-footer, html[data-layout="simple"] .figma-card-footer { background: var(--figma-bg-surface) !important; border-top: 1px solid var(--figma-border) !important; color: var(--figma-text-secondary) !important; } html[data-layout="municipal"] .dashboard-attention-card, html[data-layout="simple"] .dashboard-attention-card { background: #ffffff !important; border: 1px solid var(--figma-border) !important; color: var(--figma-text-primary) !important; }