/* =================================================================== TENANT APPEARANCE — FiveAlarmWeb Per-tenant distinctiveness settings applied via attributes/classes on (set in _Layout.cshtml) and CSS variables from the inline #tenantAppearanceVars block: data-density="compact" — tighter spacing/radii data-cards="flat|bordered|elevated|glass" — card personality data-foil="gold|silver|brass|accent" — dept-name title finish data-fontpair="classic|modern|editorial|municipal" .site-watermark — faint patch behind homepage .navbar-transparent — see-through navbar until scroll --layout-sidenav-w / --layout-boxed-max-w — layout sub-options =================================================================== */ /* =================================================================== FONT PAIRINGS =================================================================== */ html[data-fontpair="classic"] { --figma-font-heading: 'Raleway', Georgia, serif; --figma-font-primary: 'Inter', system-ui, sans-serif; --figma-font-secondary: 'Inter', system-ui, sans-serif; } html[data-fontpair="modern"] { --figma-font-heading: 'Manrope', system-ui, sans-serif; --figma-font-primary: 'Instrument Sans', system-ui, sans-serif; --figma-font-secondary: 'Instrument Sans', system-ui, sans-serif; } html[data-fontpair="editorial"] { --figma-font-heading: 'Instrument Sans', system-ui, sans-serif; --figma-font-primary: 'Inter', system-ui, sans-serif; --figma-font-secondary: 'Inter', system-ui, sans-serif; --figma-heading-weight: 900; --figma-heading-spacing: -0.03em; } html[data-fontpair="municipal"] { --figma-font-heading: 'Inter', system-ui, sans-serif; --figma-font-primary: 'Inter', system-ui, sans-serif; --figma-font-secondary: 'Inter', system-ui, sans-serif; --figma-heading-weight: 700; --figma-heading-spacing: 0; } /* =================================================================== DENSITY — COMPACT Scales spacing + radius tokens down for information-dense sites. =================================================================== */ html[data-density="compact"] { --sp-1: 0.2rem; --sp-2: 0.4rem; --sp-3: 0.65rem; --sp-4: 0.85rem; --sp-5: 1.1rem; --sp-6: 1.5rem; --figma-radius-sm: 4px; --figma-radius-md: 6px; --figma-radius-lg: 8px; --figma-radius-xl: 10px; --figma-fs-body: 14px; --figma-lh-body: 21px; } html[data-density="compact"] body.figma-theme .content { padding: 1.25rem !important; } html[data-density="compact"] body.figma-theme .card-body, html[data-density="compact"] body.figma-theme .figma-card { padding: 0.85rem 1rem; } /* =================================================================== CARD STYLE VARIANTS =================================================================== */ html[data-cards="flat"] body.figma-theme .card, html[data-cards="flat"] body.figma-theme .figma-card, html[data-cards="flat"] body.figma-theme .figma-resource-card { background: var(--figma-bg-card, var(--figma-bg-surface)) !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; } html[data-cards="bordered"] body.figma-theme .card, html[data-cards="bordered"] body.figma-theme .figma-card, html[data-cards="bordered"] body.figma-theme .figma-resource-card { background: var(--figma-bg-card, var(--figma-bg-surface)) !important; border: 2px solid var(--figma-border, rgba(255,255,255,0.15)) !important; box-shadow: none !important; } html[data-cards="elevated"] body.figma-theme .card, html[data-cards="elevated"] body.figma-theme .figma-card, html[data-cards="elevated"] body.figma-theme .figma-resource-card { border: none !important; box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25) !important; } html[data-cards="glass"] body.figma-theme .card, html[data-cards="glass"] body.figma-theme .figma-card, html[data-cards="glass"] body.figma-theme .figma-resource-card { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important; backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important; } /* =================================================================== TITLE FOIL VARIANTS (dept-name gold-foil-text) Default (no data-foil) keeps the theme's --figma-home-title-gradient. =================================================================== */ html[data-foil="gold"] .gold-foil-text { background: linear-gradient(180deg, #f9e9b5 0%, #e3b74a 38%, #b98a1e 62%, #f4d97c 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; } html[data-foil="silver"] .gold-foil-text { background: linear-gradient(180deg, #f4f6f8 0%, #c6cdd6 38%, #8d97a3 62%, #e3e8ee 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 18px rgba(198,205,214,0.35)) !important; } html[data-foil="brass"] .gold-foil-text { background: linear-gradient(180deg, #e8cf9b 0%, #b98d4f 40%, #8a6430 65%, #d8b878 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 16px rgba(185,141,79,0.35)) !important; } html[data-foil="accent"] .gold-foil-text { background: linear-gradient(180deg, color-mix(in srgb, var(--figma-brand-red) 35%, #ffffff) 0%, var(--figma-brand-red) 55%, color-mix(in srgb, var(--figma-brand-red) 65%, #000000) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--figma-brand-red) 45%, transparent)) !important; } /* =================================================================== WATERMARK — faint oversized patch behind homepage content =================================================================== */ html.site-watermark body.figma-theme.homepage .layout { position: relative; } html.site-watermark body.figma-theme.homepage .layout::before { content: ''; position: fixed; top: 50%; left: 50%; width: min(120vh, 900px, 95vw); height: min(120vh, 900px, 95vw); transform: translate(-50%, -50%); background-image: var(--site-watermark-url); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.05; pointer-events: none; z-index: 0; } /* =================================================================== NAVBAR TRANSPARENCY-ON-SCROLL Transparent at the top of the page; solid once scrolled (body gets .is-scrolled via appearance.js / site.js). Skipped in sidebar layouts where the rail is always solid. =================================================================== */ html.navbar-transparent:not([data-layout^="sidebar"]) body.figma-theme:not(.is-scrolled) .figma-navbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 0.3s ease, backdrop-filter 0.3s ease; } /* Mobile: always solid — the hamburger/collapse menu needs a readable, opaque surface and transparent chrome over the banner hurts contrast. */ @media (max-width: 991.98px) { html.navbar-transparent body.figma-theme .figma-navbar { background: var(--figma-navbar-bg, var(--figma-bg-navbar)) !important; backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important; -webkit-backdrop-filter: var(--figma-navbar-backdrop, var(--figma-backdrop-blur)) !important; } } html.navbar-transparent body.figma-theme .figma-navbar { transition: background 0.3s ease, backdrop-filter 0.3s ease; } /* =================================================================== CUSTOM FOOTER CONTENT =================================================================== */ .figma-footer-mission { font-style: italic; opacity: 0.85; max-width: 42ch; margin: 0.35rem 0 0.5rem; font-size: 0.9rem; line-height: 1.5; } .figma-footer-extra { opacity: 0.75; font-size: 0.85rem; } /* =================================================================== HOMEPAGE SECTION ORDERING + TAGLINE =================================================================== */ .hp-sections { display: flex; flex-direction: column; } .hp-sections > section { width: 100%; } .dept-name-tagline { margin: 0.15rem 0 0; text-align: center; font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; color: var(--figma-text-secondary, inherit); } @media (max-width: 575.98px) { .dept-name-tagline { font-size: 0.8rem; letter-spacing: 0.08em; padding: 0 1rem; } }