/* =================================================================== FIGMA STYLE MODES — FiveAlarmWeb Applied via data-style="..." on , orthogonal to data-theme. 6 styles: (default figma) | bootstrap | hero | glass | brutalist | neon =================================================================== */ /* =================================================================== STYLE: BOOTSTRAP Maximum information density. Shrunk font stack, hairline borders, zero decoration, clinical flat UI. Like a real admin panel. =================================================================== */ html[data-style="bootstrap"] { --figma-radius-sm: 3px; --figma-radius-md: 4px; --figma-radius-lg: 4px; --figma-radius-xl: 6px; --figma-radius-full: 20px; --figma-card-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); --figma-card-blur: none; --figma-border: rgba(255,255,255,0.2); --figma-border-width: 1px; --figma-font-primary: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --figma-font-secondary: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --figma-font-heading: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --figma-heading-weight: 600; --figma-heading-spacing: 0em; --figma-fs-h1: 32px; --figma-lh-h1: 40px; --figma-fs-h2: 24px; --figma-lh-h2: 30px; --figma-fs-h3: 20px; --figma-lh-h3: 26px; --figma-fs-h4: 18px; --figma-lh-h4: 24px; --figma-fs-h5: 16px; --figma-lh-h5: 22px; --figma-fs-body: 14px; --figma-lh-body: 20px; --figma-fs-nav: 13px; --figma-lh-nav: 18px; --figma-transition-fast: 80ms linear; --figma-transition-normal: 120ms linear; --figma-backdrop-blur: none; --figma-backdrop-blur-light: none; } html[data-style="bootstrap"] body.figma-theme { font-size: 14px !important; line-height: 1.5 !important; } html[data-style="bootstrap"] body.figma-theme h1, html[data-style="bootstrap"] body.figma-theme h2, html[data-style="bootstrap"] body.figma-theme h3, html[data-style="bootstrap"] body.figma-theme h4, html[data-style="bootstrap"] body.figma-theme h5 { letter-spacing: 0 !important; font-weight: 600 !important; margin-bottom: 0.5rem !important; } html[data-style="bootstrap"] body.figma-theme .btn, html[data-style="bootstrap"] body.figma-theme .figma-btn { border-radius: 3px !important; padding: 5px 14px !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; transition: background 80ms linear, border-color 80ms linear !important; box-shadow: none !important; } html[data-style="bootstrap"] body.figma-theme .btn-primary, html[data-style="bootstrap"] body.figma-theme .figma-btn-primary { background: var(--figma-btn-primary-bg) !important; color: var(--figma-btn-primary-text) !important; border: 1px solid var(--figma-btn-primary-bg) !important; border-radius: 3px !important; box-shadow: none !important; transform: none !important; } html[data-style="bootstrap"] body.figma-theme .btn-primary:hover, html[data-style="bootstrap"] body.figma-theme .figma-btn-primary:hover { background: var(--figma-btn-primary-bg-hover) !important; border-color: var(--figma-btn-primary-bg-hover) !important; transform: none !important; box-shadow: none !important; } html[data-style="bootstrap"] body.figma-theme .card, html[data-style="bootstrap"] body.figma-theme .figma-card, html[data-style="bootstrap"] body.figma-theme .figma-resource-card, html[data-style="bootstrap"] body.figma-theme .figma-stats-container, html[data-style="bootstrap"] body.figma-theme .inquiry-form-card { backdrop-filter: none !important; border: 1px solid var(--figma-border) !important; border-radius: 4px !important; box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; padding: 0 !important; transition: none !important; } html[data-style="bootstrap"] body.figma-theme .card:hover, html[data-style="bootstrap"] body.figma-theme .figma-card:hover, html[data-style="bootstrap"] body.figma-theme .figma-resource-card:hover { transform: none !important; box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; filter: none !important; } html[data-style="bootstrap"] body.figma-theme .card-body, html[data-style="bootstrap"] body.figma-theme .figma-card-content { padding: 12px 16px !important; } html[data-style="bootstrap"] body.figma-theme .card-header, html[data-style="bootstrap"] body.figma-theme .figma-card-header { padding: 8px 16px !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 0 !important; border-bottom: 1px solid var(--figma-border) !important; } html[data-style="bootstrap"] body.figma-theme input.form-control, html[data-style="bootstrap"] body.figma-theme textarea.form-control, html[data-style="bootstrap"] body.figma-theme select.form-select { border-radius: 3px !important; border-width: 1px !important; box-shadow: none !important; padding: 5px 10px !important; font-size: 13px !important; } html[data-style="bootstrap"] body.figma-theme .table thead th, html[data-style="bootstrap"] body.figma-theme .table tbody td { padding: 6px 10px !important; font-size: 13px !important; } html[data-style="bootstrap"] .figma-navbar { padding: 0 24px 0 0 !important; backdrop-filter: none !important; border-bottom: 1px solid var(--figma-border) !important; } html[data-style="bootstrap"] .figma-navbar .nav-link { letter-spacing: 0 !important; text-transform: none !important; border-radius: 3px !important; } html[data-style="bootstrap"] .figma-navbar .dropdown-menu { border-radius: 3px !important; backdrop-filter: none !important; box-shadow: 0 4px 8px rgba(0,0,0,0.4) !important; padding: 4px !important; } html[data-style="bootstrap"] .dept-name-header::after { display: none !important; } html[data-style="bootstrap"] .dept-name-header { padding: 2.25rem 1.5rem !important; } html[data-style="bootstrap"] .homepage .dept-name-header { padding-top: calc(var(--navbar-h) + 1.5rem) !important; } html[data-style="bootstrap"] .dept-name-title { font-size: 2.75rem !important; line-height: 1.1 !important; font-weight: 900 !important; letter-spacing: -0.01em !important; } html[data-style="bootstrap"] .hero-stats-banner { backdrop-filter: none !important; } html[data-style="bootstrap"] .hero-stat-number { font-size: 2.5rem !important; } html[data-style="bootstrap"] .hero-stat-item { padding: 16px 24px !important; } html[data-style="bootstrap"] .badge { border-radius: 3px !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 7px !important; letter-spacing: 0 !important; } html[data-style="bootstrap"] .quick-link { border-radius: 3px !important; backdrop-filter: none !important; font-size: 12px !important; padding: 5px 10px !important; } html[data-style="bootstrap"] .link-count { border-radius: 3px !important; } html[data-style="bootstrap"] .figma-progress-bar, html[data-style="bootstrap"] .figma-progress-fill { border-radius: 3px !important; height: 20px !important; } html[data-style="bootstrap"] .alert { border-radius: 3px !important; padding: 8px 14px !important; font-size: 13px !important; } html[data-style="bootstrap"] .sidebar-figma .nav-link { font-size: 13px !important; padding: 6px 10px !important; border-radius: 2px !important; } /* =================================================================== STYLE: HERO Extreme editorial. Massive type, brutal offset shadows, all-caps, broadsheet newspaper / emergency dispatch aesthetic. =================================================================== */ html[data-style="hero"] { --figma-radius-sm: 0px; --figma-radius-md: 0px; --figma-radius-lg: 0px; --figma-radius-xl: 0px; --figma-radius-full: 0px; --figma-card-shadow: 6px 6px 0px var(--figma-brand-red), 0 12px 40px rgba(0,0,0,0.7); --figma-card-blur: none; --figma-border: rgba(255,255,255,0.2); --figma-border-width: 3px; --figma-font-primary: 'Instrument Sans','Manrope',system-ui,sans-serif; --figma-font-secondary: 'Instrument Sans','Manrope',system-ui,sans-serif; --figma-font-heading: 'Instrument Sans','Manrope',system-ui,sans-serif; --figma-heading-weight: 900; --figma-heading-spacing: -0.04em; --figma-fs-h1: 96px; --figma-lh-h1: 100px; --figma-fs-h2: 64px; --figma-lh-h2: 72px; --figma-fs-h3: 48px; --figma-lh-h3: 56px; --figma-fs-h4: 36px; --figma-lh-h4: 42px; --figma-fs-h5: 28px; --figma-lh-h5: 34px; --figma-fs-body: 18px; --figma-lh-body: 28px; --figma-fs-nav: 15px; --figma-lh-nav: 20px; --figma-transition-fast: 350ms cubic-bezier(0.16,1,0.3,1); --figma-transition-normal: 600ms cubic-bezier(0.16,1,0.3,1); --figma-backdrop-blur: none; --figma-backdrop-blur-light: none; } html[data-style="hero"] body.figma-theme { font-size: 18px !important; line-height: 1.6 !important; } html[data-style="hero"] body.figma-theme h1 { font-size: clamp(3rem,8vw,7rem) !important; font-weight: 900 !important; letter-spacing: -0.04em !important; line-height: 1 !important; text-transform: uppercase !important; } html[data-style="hero"] body.figma-theme h2 { font-size: clamp(2rem,5vw,4rem) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1.05 !important; text-transform: uppercase !important; } html[data-style="hero"] body.figma-theme h3 { font-size: clamp(1.5rem,3vw,2.5rem) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; text-transform: uppercase !important; } html[data-style="hero"] body.figma-theme h4, html[data-style="hero"] body.figma-theme h5 { font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; } html[data-style="hero"] body.figma-theme .btn, html[data-style="hero"] body.figma-theme .figma-btn { border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; font-weight: 900 !important; font-size: 14px !important; } html[data-style="hero"] body.figma-theme .btn-primary, html[data-style="hero"] body.figma-theme .figma-btn-primary { background: var(--figma-btn-primary-bg) !important; color: var(--figma-btn-primary-text) !important; border: none !important; border-radius: 0 !important; box-shadow: 5px 5px 0px rgba(0,0,0,0.6) !important; padding: 16px 48px !important; font-size: 15px !important; } html[data-style="hero"] body.figma-theme .btn-primary:hover, html[data-style="hero"] body.figma-theme .figma-btn-primary:hover { transform: translate(-3px,-3px) !important; box-shadow: 8px 8px 0px rgba(0,0,0,0.6) !important; } html[data-style="hero"] body.figma-theme .btn-primary:active, html[data-style="hero"] body.figma-theme .figma-btn-primary:active { transform: translate(2px,2px) !important; box-shadow: 2px 2px 0px rgba(0,0,0,0.6) !important; } html[data-style="hero"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) { background: transparent !important; border: 3px solid var(--figma-text-primary) !important; color: var(--figma-text-primary) !important; border-radius: 0 !important; padding: 14px 40px !important; box-shadow: none !important; } html[data-style="hero"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover { background: var(--figma-text-primary) !important; color: var(--figma-bg-primary) !important; } html[data-style="hero"] body.figma-theme .card, html[data-style="hero"] body.figma-theme .figma-card, html[data-style="hero"] body.figma-theme .figma-resource-card, html[data-style="hero"] body.figma-theme .figma-stats-container, html[data-style="hero"] body.figma-theme .inquiry-form-card { backdrop-filter: none !important; border-radius: 0 !important; border: none !important; border-left: 6px solid var(--figma-brand-red) !important; box-shadow: 8px 8px 0px var(--figma-brand-red), 0 16px 48px rgba(0,0,0,0.6) !important; padding: 2rem 2rem 2rem 2.5rem !important; transition: transform 350ms cubic-bezier(0.16,1,0.3,1), box-shadow 350ms cubic-bezier(0.16,1,0.3,1) !important; } html[data-style="hero"] body.figma-theme .card:hover, html[data-style="hero"] body.figma-theme .figma-card:hover, html[data-style="hero"] body.figma-theme .figma-resource-card:hover { transform: translate(-4px,-4px) !important; box-shadow: 12px 12px 0px var(--figma-brand-red), 0 24px 64px rgba(0,0,0,0.7) !important; filter: none !important; } html[data-style="hero"] body.figma-theme .card-header, html[data-style="hero"] body.figma-theme .figma-card-header { border-radius: 0 !important; border-bottom: 3px solid var(--figma-brand-red) !important; padding: 1rem 0 !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; } html[data-style="hero"] body.figma-theme input.form-control, html[data-style="hero"] body.figma-theme textarea.form-control, html[data-style="hero"] body.figma-theme select.form-select { border-radius: 0 !important; border: none !important; border-bottom: 3px solid var(--figma-border) !important; background: transparent !important; padding: 12px 0 !important; font-size: 18px !important; font-weight: 500 !important; box-shadow: none !important; } html[data-style="hero"] body.figma-theme input.form-control:focus, html[data-style="hero"] body.figma-theme textarea.form-control:focus, html[data-style="hero"] body.figma-theme select.form-select:focus { border-bottom: 3px solid var(--figma-brand-red) !important; box-shadow: none !important; outline: none !important; } html[data-style="hero"] body.figma-theme .form-label { font-size: 10px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; } html[data-style="hero"] body.figma-theme .table thead th { font-size: 10px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; border-bottom: 3px solid var(--figma-brand-red) !important; } html[data-style="hero"] body.figma-theme .table tbody td { font-size: 16px !important; border-top: 2px solid var(--figma-border) !important; padding: 16px !important; } html[data-style="hero"] .figma-navbar { padding: 0 48px 0 0 !important; border-bottom: 5px solid var(--figma-brand-red) !important; backdrop-filter: none !important; } html[data-style="hero"] .figma-navbar .nav-link { text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 900 !important; font-size: 12px !important; border-radius: 0 !important; padding: 8px 12px !important; border-bottom: 3px solid transparent !important; } html[data-style="hero"] .figma-navbar .nav-link:hover { background: transparent !important; border-bottom: 3px solid var(--figma-brand-red) !important; border-radius: 0 !important; } html[data-style="hero"] .figma-navbar .nav-link.active { border-bottom: 3px solid var(--figma-brand-red) !important; background: transparent !important; } html[data-style="hero"] .figma-navbar .btn-join { border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; font-weight: 900 !important; box-shadow: 3px 3px 0 rgba(0,0,0,0.5) !important; } html[data-style="hero"] .figma-navbar .dropdown-menu { border-radius: 0 !important; backdrop-filter: none !important; border: none !important; border-left: 5px solid var(--figma-brand-red) !important; border-top: 3px solid var(--figma-brand-red) !important; box-shadow: 6px 6px 0 rgba(0,0,0,0.6) !important; } html[data-style="hero"] .figma-navbar .dropdown-item { border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 12px !important; font-weight: 700 !important; } html[data-style="hero"] .dept-name-header { padding: 6rem 3rem !important; border-bottom: 6px solid var(--figma-home-header-border) !important; box-shadow: none !important; position: relative !important; } html[data-style="hero"] .dept-name-header::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 6px !important; background: var(--figma-brand-red) !important; } html[data-style="hero"] .dept-name-title { font-size: clamp(4rem,12vw,10rem) !important; font-weight: 900 !important; letter-spacing: -0.05em !important; line-height: 0.9 !important; text-transform: uppercase !important; } html[data-style="hero"] .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-style="hero"] .hero-stat-item.dark-bg { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(32px) !important; } html[data-style="hero"] .hero-stat-number { font-size: clamp(3rem,8vw,7rem) !important; font-weight: 900 !important; line-height: 1 !important; } html[data-style="hero"] .hero-stat-label { font-size: 10px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.2em !important; } html[data-style="hero"] .hero-stat-item { padding: 48px 64px !important; } html[data-style="hero"] .quick-link { border-radius: 0 !important; border: none !important; border-left: 5px solid var(--figma-brand-red) !important; padding: 10px 20px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; } html[data-style="hero"] .link-count { border-radius: 0 !important; font-weight: 900 !important; } html[data-style="hero"] .badge { border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-weight: 900 !important; font-size: 10px !important; } html[data-style="hero"] .figma-progress-bar { border-radius: 0 !important; height: 40px !important; border: 3px solid var(--figma-border) !important; } html[data-style="hero"] .figma-progress-fill { border-radius: 0 !important; } html[data-style="hero"] .sidebar-figma { border-right: 3px solid var(--figma-brand-red) !important; } html[data-style="hero"] .sidebar-figma .nav-link { border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 700 !important; font-size: 12px !important; border-left: 3px solid transparent !important; } html[data-style="hero"] .sidebar-figma .nav-link:hover { border-left: 3px solid var(--figma-brand-red) !important; background: transparent !important; transform: translateX(4px) !important; } html[data-style="hero"] .sidebar-figma .nav-link.active { border-left: 6px solid var(--figma-brand-red) !important; border-radius: 0 !important; } html[data-style="hero"] .alert { border-radius: 0 !important; border: none !important; border-left: 6px solid currentColor !important; } /* =================================================================== STYLE: GLASS Maximum frosted glass. Every surface blurred & floating. Spring bounce animations, ultra-light 200 weight headings. =================================================================== */ html[data-style="glass"] { --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-style="glass"] body.figma-theme { font-weight: 300 !important; } html[data-style="glass"] body.figma-theme h1, html[data-style="glass"] body.figma-theme h2, html[data-style="glass"] body.figma-theme h3, html[data-style="glass"] body.figma-theme h4, html[data-style="glass"] body.figma-theme h5 { font-weight: 200 !important; letter-spacing: 0.06em !important; } html[data-style="glass"] body.figma-theme .card, html[data-style="glass"] body.figma-theme .figma-card, html[data-style="glass"] body.figma-theme .figma-resource-card, html[data-style="glass"] body.figma-theme .figma-stats-container, html[data-style="glass"] body.figma-theme .inquiry-form-card, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme .card:hover, html[data-style="glass"] body.figma-theme .figma-card:hover, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme .card-header, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme .btn, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme .btn-primary, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme .btn-primary:hover, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme input.form-control, html[data-style="glass"] body.figma-theme textarea.form-control, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme input.form-control:focus, html[data-style="glass"] body.figma-theme textarea.form-control:focus, html[data-style="glass"] body.figma-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-style="glass"] body.figma-theme .form-label { font-weight: 300 !important; letter-spacing: 0.05em !important; font-size: 0.8rem !important; text-transform: uppercase !important; } html[data-style="glass"] .figma-navbar { background: rgba(0,0,0,0.15) !important; 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; } html[data-style="glass"] .figma-navbar .nav-link:hover, html[data-style="glass"] .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-style="glass"] .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-style="glass"] .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-style="glass"] .figma-navbar .dropdown-item { border-radius: var(--figma-radius-md) !important; } html[data-style="glass"] .figma-navbar .dropdown-item:hover { background: rgba(255,255,255,0.08) !important; transform: translateX(4px) !important; } html[data-style="glass"] .dept-name-header { background: rgba(0,0,0,0.2) !important; backdrop-filter: blur(40px) saturate(160%) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } html[data-style="glass"] .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-style="glass"] .hero-stat-item.dark-bg { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(32px) !important; } html[data-style="glass"] .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-style="glass"] .stat-menu-item { border-radius: var(--figma-radius-md) !important; } html[data-style="glass"] .stat-menu-item:hover { background: rgba(255,255,255,0.07) !important; transform: translateX(4px) !important; } html[data-style="glass"] .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-style="glass"] .quick-link:hover { background: rgba(255,255,255,0.12) !important; transform: translateY(-3px) scale(1.03) !important; } html[data-style="glass"] .link-count { border-radius: var(--figma-radius-full) !important; } html[data-style="glass"] .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-style="glass"] .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-style="glass"] .sidebar-figma .nav-link { border-radius: var(--figma-radius-lg) !important; } html[data-style="glass"] .sidebar-figma .nav-link:hover { background: rgba(255,255,255,0.07) !important; transform: translateX(4px) !important; } html[data-style="glass"] .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-style="glass"] .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-style="glass"] .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-style="glass"] .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-style="glass"] .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-style="glass"] .figma-tabs { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(16px) !important; border-radius: var(--figma-radius-full) !important; } html[data-style="glass"] .figma-tab.active { background: rgba(255,255,255,0.14) !important; border-radius: var(--figma-radius-full) !important; } /* =================================================================== STYLE: BRUTALIST Raw concrete internet. Thick black outlines on everything, no softness, harsh system fonts, visible grid, stark contrast, flat white/black fills, zero animation. Confrontational. =================================================================== */ html[data-style="brutalist"] { --figma-radius-sm: 0px; --figma-radius-md: 0px; --figma-radius-lg: 0px; --figma-radius-xl: 0px; --figma-radius-full: 0px; --figma-card-shadow: 4px 4px 0 #ffffff; --figma-card-blur: none; --figma-border: rgba(255,255,255,0.9); --figma-border-width: 3px; --figma-font-primary: 'Courier New',Courier,monospace; --figma-font-secondary: 'Courier New',Courier,monospace; --figma-font-heading: 'Courier New',Courier,monospace; --figma-heading-weight: 700; --figma-heading-spacing: 0.05em; --figma-fs-h1: 56px; --figma-lh-h1: 60px; --figma-fs-h2: 40px; --figma-lh-h2: 44px; --figma-fs-h3: 28px; --figma-lh-h3: 32px; --figma-fs-h4: 22px; --figma-lh-h4: 26px; --figma-fs-body: 16px; --figma-lh-body: 24px; --figma-fs-nav: 14px; --figma-lh-nav: 20px; --figma-transition-fast: 0ms; --figma-transition-normal: 0ms; --figma-backdrop-blur: none; --figma-backdrop-blur-light: none; /* Override homepage tokens to match brutalist palette */ --figma-home-title-gradient: none; --figma-home-title-glow: transparent; --figma-home-stat-number-color: #ffffff; --figma-home-quicklink-bg: transparent; --figma-home-quicklink-border: rgba(255,255,255,0.9); --figma-home-quicklink-hover-bg: #ffffff; --figma-home-quicklink-count-bg: transparent; --figma-home-quicklink-count-color: #ffffff; } html[data-style="brutalist"] body.figma-theme { font-family: 'Courier New', Courier, monospace !important; } /* Brutalist: gold foil title — plain text, no clip */ html[data-style="brutalist"] .gold-foil-text { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; filter: none !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; text-decoration: underline !important; text-underline-offset: 8px !important; text-decoration-thickness: 4px !important; } html[data-style="brutalist"] body.figma-theme h1, html[data-style="brutalist"] body.figma-theme h2, html[data-style="brutalist"] body.figma-theme h3, html[data-style="brutalist"] body.figma-theme h4, html[data-style="brutalist"] body.figma-theme h5 { font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; text-decoration: underline !important; text-underline-offset: 6px !important; text-decoration-thickness: 3px !important; } /* Brutalist: all cards — hard white outline, offset shadow, zero radius */ html[data-style="brutalist"] body.figma-theme .card, html[data-style="brutalist"] body.figma-theme .figma-card, html[data-style="brutalist"] body.figma-theme .figma-resource-card, html[data-style="brutalist"] body.figma-theme .figma-stats-container, html[data-style="brutalist"] body.figma-theme .inquiry-form-card, html[data-style="brutalist"] body.figma-theme .apparatus-details-card { backdrop-filter: none !important; background: var(--figma-bg-card) !important; border: 3px solid #ffffff !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #ffffff !important; transition: none !important; } html[data-style="brutalist"] body.figma-theme .card:hover, html[data-style="brutalist"] body.figma-theme .figma-card:hover, html[data-style="brutalist"] body.figma-theme .figma-resource-card:hover { transform: translate(-3px,-3px) !important; box-shadow: 7px 7px 0 #ffffff !important; filter: none !important; } html[data-style="brutalist"] body.figma-theme .card-header, html[data-style="brutalist"] body.figma-theme .figma-card-header { border-bottom: 3px solid #ffffff !important; border-radius: 0 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-family: 'Courier New', Courier, monospace !important; } /* Brutalist: buttons — hard outlines, instant state change */ html[data-style="brutalist"] body.figma-theme .btn, html[data-style="brutalist"] body.figma-theme .figma-btn { border: 3px solid #ffffff !important; border-radius: 0 !important; font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 700 !important; box-shadow: 3px 3px 0 #ffffff !important; transition: none !important; padding: 10px 24px !important; } html[data-style="brutalist"] body.figma-theme .btn-primary, html[data-style="brutalist"] body.figma-theme .figma-btn-primary { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; border-radius: 0 !important; } html[data-style="brutalist"] body.figma-theme .btn-primary:hover, html[data-style="brutalist"] body.figma-theme .figma-btn-primary:hover { background: #000000 !important; color: #ffffff !important; transform: translate(-2px,-2px) !important; box-shadow: 5px 5px 0 #ffffff !important; } html[data-style="brutalist"] body.figma-theme .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover { background: #ffffff !important; color: #000000 !important; transform: translate(-2px,-2px) !important; box-shadow: 5px 5px 0 rgba(255,255,255,0.5) !important; } /* Brutalist: inputs — outlined boxes, monospace */ html[data-style="brutalist"] body.figma-theme input.form-control, html[data-style="brutalist"] body.figma-theme textarea.form-control, html[data-style="brutalist"] body.figma-theme select.form-select { border: 3px solid #ffffff !important; border-radius: 0 !important; font-family: 'Courier New', Courier, monospace !important; font-size: 15px !important; background: var(--figma-bg-surface) !important; box-shadow: none !important; padding: 10px 12px !important; transition: none !important; } html[data-style="brutalist"] body.figma-theme input.form-control:focus, html[data-style="brutalist"] body.figma-theme textarea.form-control:focus, html[data-style="brutalist"] body.figma-theme select.form-select:focus { border-color: #ffffff !important; box-shadow: 3px 3px 0 #ffffff !important; outline: none !important; } html[data-style="brutalist"] body.figma-theme .form-label { font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; font-size: 12px !important; } /* Brutalist: table — strong grid lines */ html[data-style="brutalist"] body.figma-theme .table { border: 3px solid #ffffff !important; } html[data-style="brutalist"] body.figma-theme .table thead th { border-bottom: 3px solid #ffffff !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-family: 'Courier New', Courier, monospace !important; font-size: 12px !important; background: rgba(255,255,255,0.1) !important; } html[data-style="brutalist"] body.figma-theme .table tbody td { border-top: 1px solid rgba(255,255,255,0.4) !important; font-family: 'Courier New', Courier, monospace !important; font-size: 14px !important; } html[data-style="brutalist"] body.figma-theme .table tbody tr:hover { background: rgba(255,255,255,0.08) !important; } /* Brutalist: navbar — raw bar, hard border bottom */ html[data-style="brutalist"] .figma-navbar { padding: 0 32px 0 0 !important; border-bottom: 4px solid #ffffff !important; backdrop-filter: none !important; } html[data-style="brutalist"] .figma-navbar .nav-link { font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 700 !important; font-size: 13px !important; border: 2px solid transparent !important; border-radius: 0 !important; transition: none !important; } html[data-style="brutalist"] .figma-navbar .nav-link:hover, html[data-style="brutalist"] .figma-navbar .nav-link.active { background: transparent !important; border-color: #ffffff !important; box-shadow: 2px 2px 0 #ffffff !important; } html[data-style="brutalist"] .figma-navbar .btn-join { border: 3px solid #ffffff !important; border-radius: 0 !important; box-shadow: 3px 3px 0 #ffffff !important; font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 700 !important; transition: none !important; } html[data-style="brutalist"] .figma-navbar .dropdown-menu { border: 3px solid #ffffff !important; border-radius: 0 !important; backdrop-filter: none !important; box-shadow: 4px 4px 0 #ffffff !important; } /* Brutalist: dept header */ html[data-style="brutalist"] .dept-name-header { border-top: 4px solid #ffffff !important; border-bottom: 4px solid #ffffff !important; padding: 3rem 2rem !important; box-shadow: none !important; } html[data-style="brutalist"] .dept-name-title { font-family: 'Courier New', Courier, monospace !important; font-size: clamp(3rem, 8vw, 6rem) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* Brutalist: hero stats */ html[data-style="brutalist"] .hero-stats-banner { backdrop-filter: none !important; border-top: 3px solid #ffffff !important; } html[data-style="brutalist"] .hero-stat-item.dark-bg { border-left: 3px solid #ffffff !important; border-right: 3px solid #ffffff !important; } html[data-style="brutalist"] .hero-stat-number { font-family: 'Courier New', Courier, monospace !important; font-size: clamp(2.5rem, 6vw, 5rem) !important; font-weight: 700 !important; } html[data-style="brutalist"] .hero-stat-label { font-family: 'Courier New', Courier, monospace !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; } html[data-style="brutalist"] .hero-stat-menu { border: 3px solid #ffffff !important; border-radius: 0 !important; backdrop-filter: none !important; box-shadow: 4px 4px 0 #ffffff !important; } /* Brutalist: quick links */ html[data-style="brutalist"] .quick-link { border: 3px solid rgba(255,255,255,0.8) !important; border-radius: 0 !important; backdrop-filter: none !important; font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 12px !important; font-weight: 700 !important; transition: none !important; } html[data-style="brutalist"] .quick-link:hover { background: rgba(255,255,255,0.15) !important; transform: translate(-2px,-2px) !important; box-shadow: 3px 3px 0 #ffffff !important; } html[data-style="brutalist"] .link-count { border: 2px solid rgba(255,255,255,0.7) !important; border-radius: 0 !important; font-family: 'Courier New', Courier, monospace !important; font-weight: 700 !important; font-size: 11px !important; } html[data-style="brutalist"] .badge { border: 2px solid #ffffff !important; border-radius: 0 !important; font-family: 'Courier New', Courier, monospace !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; box-shadow: 2px 2px 0 #ffffff !important; } html[data-style="brutalist"] .alert { border: 3px solid #ffffff !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #ffffff !important; font-family: 'Courier New', Courier, monospace !important; } html[data-style="brutalist"] .sidebar-figma .nav-link { font-family: 'Courier New', Courier, monospace !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 13px !important; border-radius: 0 !important; border-left: 3px solid transparent !important; transition: none !important; } html[data-style="brutalist"] .sidebar-figma .nav-link:hover, html[data-style="brutalist"] .sidebar-figma .nav-link.active { border-left: 3px solid #ffffff !important; background: rgba(255,255,255,0.07) !important; } /* =================================================================== STYLE: NEON Cyberpunk glow. Full glow on every surface using the active theme's brand color tokens — works with any data-theme. =================================================================== */ html[data-style="neon"] { --figma-bg-primary: #000000; --figma-bg-surface: #030305; --figma-bg-card: rgba(0, 0, 0, 0.9); --figma-bg-navbar: rgba(0, 0, 0, 0.97); --figma-border: rgba(var(--neon-rgb), 0.50); --figma-border-subtle: rgba(var(--neon-rgb), 0.18); --figma-border-width: 1px; --figma-gradient-card-primary: radial-gradient(23.21% 88.82% at 100% 100%, rgba(var(--neon-rgb), 0.20) 0%, rgba(0,0,0,0) 100%), radial-gradient(20.72% 64.91% at 0% 0%, rgba(var(--neon-accent-rgb), 0.14) 0%, rgba(0,0,0,0) 100%), rgba(0,0,0,0.9); --figma-btn-primary-bg: var(--figma-brand-red); --figma-btn-primary-bg-hover: var(--figma-brand-red-dark); --figma-input-bg: rgba(0, 0, 0, 1); --figma-input-border: rgba(var(--neon-rgb), 0.50); --figma-input-text: #ffffff; --figma-input-placeholder: rgba(var(--neon-rgb), 0.45); --figma-input-focus-border: var(--figma-brand-red); --figma-input-focus-shadow: rgba(var(--neon-rgb), 0.35); --figma-progress-fill: linear-gradient(90deg, var(--figma-brand-red-darker) 0%, var(--figma-brand-red-dark) 52.88%, var(--figma-brand-red) 100%); --figma-card-shadow: 0 0 10px rgba(var(--neon-rgb), 0.40), 0 0 30px rgba(var(--neon-rgb), 0.15), 0 0 0 1px rgba(var(--neon-rgb), 0.35); --figma-card-blur: none; --figma-card-border-style: solid; --figma-card-bg: rgba(0,0,0,0.9); --figma-shadow-icon: drop-shadow(0 0 10px rgba(var(--neon-rgb), 0.9)); --figma-radius-sm: 3px; --figma-radius-md: 6px; --figma-radius-lg: 8px; --figma-radius-xl: 10px; --figma-radius-full: 12px; --figma-heading-weight: 700; --figma-heading-spacing: 0.03em; --figma-backdrop-blur: none; --figma-backdrop-blur-light: none; --figma-transition-fast: 150ms ease; --figma-transition-normal: 250ms ease; --figma-home-title-glow: rgba(var(--neon-rgb), 0.8); --figma-home-quicklink-hover-border: var(--figma-brand-red); --figma-home-cta-border: var(--figma-brand-red); --figma-navbar-bg: rgba(0, 0, 0, 0.97); --figma-navbar-backdrop: blur(8px); --figma-navbar-border-thickness: 2px; --figma-navbar-border-color: var(--figma-brand-red); --figma-navbar-top-color: rgba(var(--neon-accent-rgb), 0.6); --figma-navbar-link-hover-color: var(--figma-brand-red); --figma-navbar-link-hover-bg: rgba(var(--neon-rgb), 0.18); --figma-navbar-link-active-bg: rgba(var(--neon-rgb), 0.28); --figma-navbar-link-active-color: var(--figma-brand-red); --figma-navbar-active-indicator: var(--figma-brand-red); --figma-navbar-dropdown-bg: rgba(0, 0, 0, 1); --figma-navbar-dropdown-border: rgba(var(--neon-rgb), 0.45); --figma-navbar-dropdown-item-hover-bg: rgba(var(--neon-rgb), 0.18); --figma-navbar-dropdown-item-hover-color: var(--figma-brand-red); --figma-navbar-toggler-bg: rgba(var(--neon-rgb), 0.10); --figma-navbar-toggler-border: rgba(var(--neon-rgb), 0.55); --figma-navbar-mobile-bg: rgba(0, 0, 0, 1); --figma-navbar-mobile-border: rgba(var(--neon-rgb), 0.55); --figma-navbar-mobile-shadow: 0 0 40px rgba(var(--neon-rgb), 0.25), 0 0 0 1px rgba(var(--neon-rgb), 0.25); --figma-navbar-seg-active-bg: var(--figma-brand-red); --figma-navbar-join-bg: var(--figma-brand-red); --figma-navbar-join-shadow: 0 0 12px rgba(var(--neon-rgb), 0.7), 0 0 24px rgba(var(--neon-rgb), 0.35); } /* ── Per-theme neon RGB channel helpers ────────────────────────────── rgba() with CSS vars requires a bare "R, G, B" channel variable. These are set per data-theme so every glow uses the right color. ------------------------------------------------------------------ */ /* Default theme — ember red */ html[data-style="neon"] { --neon-rgb: 164, 32, 13; --neon-accent-rgb: 212, 160, 23; } html[data-style="neon"][data-theme="dark"] { --neon-rgb: 164, 32, 13; --neon-accent-rgb: 212, 160, 23; } /* Firehouse — hot red */ html[data-style="neon"][data-theme="firehouse"] { --neon-rgb: 255, 51, 25; --neon-accent-rgb: 234, 179, 8; } /* Slate — steel blue */ html[data-style="neon"][data-theme="slate"] { --neon-rgb: 77, 124, 201; --neon-accent-rgb: 13, 148, 136; } /* Midnight — indigo */ html[data-style="neon"][data-theme="midnight"] { --neon-rgb: 99, 102, 241; --neon-accent-rgb: 245, 158, 11; } /* Forest — teal */ html[data-style="neon"][data-theme="forest"] { --neon-rgb: 13, 148, 136; --neon-accent-rgb: 217, 119, 6; } /* High Contrast — yellow */ html[data-style="neon"][data-theme="highcontrast"] { --neon-rgb: 255, 255, 0; --neon-accent-rgb: 0, 207, 255; } /* ── Neon glow rules — all use var(--neon-rgb) ── */ html[data-style="neon"] body.figma-theme .figma-card, html[data-style="neon"] body.figma-theme .figma-resource-card, html[data-style="neon"] body.figma-theme .apparatus-details-card, html[data-style="neon"] body.figma-theme .inquiry-form-card, html[data-style="neon"] body.figma-theme .card { background: var(--figma-card-bg) !important; border: 1px solid rgba(var(--neon-rgb), 0.50) !important; border-radius: var(--figma-radius-lg) !important; box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.40), 0 0 30px rgba(var(--neon-rgb), 0.15), 0 0 0 1px rgba(var(--neon-rgb), 0.30) !important; backdrop-filter: none !important; transition: box-shadow 150ms ease, transform 150ms ease !important; } html[data-style="neon"] body.figma-theme .figma-card:hover, html[data-style="neon"] body.figma-theme .figma-resource-card:hover, html[data-style="neon"] body.figma-theme .card:hover { box-shadow: 0 0 18px rgba(var(--neon-rgb), 0.70), 0 0 50px rgba(var(--neon-rgb), 0.28), 0 0 0 1px var(--figma-brand-red) !important; filter: brightness(1.06) !important; transform: translateY(-2px) !important; } html[data-style="neon"] body.figma-theme .btn-primary, html[data-style="neon"] body.figma-theme .figma-btn-primary { background: var(--figma-brand-red) !important; color: var(--figma-btn-primary-text) !important; border: none !important; box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.70), 0 0 20px rgba(var(--neon-rgb), 0.35) !important; transition: box-shadow 150ms ease !important; } html[data-style="neon"] body.figma-theme .btn-primary:hover, html[data-style="neon"] body.figma-theme .figma-btn-primary:hover { background: var(--figma-brand-red-dark) !important; box-shadow: 0 0 18px rgba(var(--neon-rgb), 1.0), 0 0 40px rgba(var(--neon-rgb), 0.50) !important; } html[data-style="neon"] body.figma-theme h1, html[data-style="neon"] body.figma-theme h2, html[data-style="neon"] body.figma-theme h3 { text-shadow: 0 0 14px rgba(var(--neon-rgb), 0.60); } html[data-style="neon"] body.figma-theme input.form-control, html[data-style="neon"] body.figma-theme textarea.form-control, html[data-style="neon"] body.figma-theme select.form-select { background: rgba(0, 0, 0, 1) !important; border: 1px solid rgba(var(--neon-rgb), 0.50) !important; border-radius: var(--figma-radius-sm) !important; color: #ffffff !important; box-shadow: inset 0 0 8px rgba(var(--neon-rgb), 0.06) !important; } html[data-style="neon"] body.figma-theme input.form-control:focus, html[data-style="neon"] body.figma-theme textarea.form-control:focus, html[data-style="neon"] body.figma-theme select.form-select:focus { border-color: var(--figma-brand-red) !important; box-shadow: 0 0 0 2px var(--figma-brand-red), 0 0 14px rgba(var(--neon-rgb), 0.45) !important; outline: none !important; } html[data-style="neon"] body.figma-theme .badge { border: 1px solid rgba(var(--neon-rgb), 0.55) !important; box-shadow: 0 0 6px rgba(var(--neon-rgb), 0.40) !important; } html[data-style="neon"] body.figma-theme .alert { border: 1px solid rgba(var(--neon-rgb), 0.45) !important; box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.20) !important; background: rgba(var(--neon-rgb), 0.06) !important; } html[data-style="neon"] body.figma-theme .table thead th { border-bottom: 2px solid var(--figma-brand-red) !important; text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.5); color: var(--figma-brand-red) !important; } html[data-style="neon"] body.figma-theme .table tbody tr:hover { background: rgba(var(--neon-rgb), 0.05) !important; box-shadow: inset 0 0 20px rgba(var(--neon-rgb), 0.06) !important; } html[data-style="neon"] .figma-navbar { border-bottom: 2px solid var(--figma-brand-red) !important; box-shadow: 0 0 20px rgba(var(--neon-rgb), 0.35), 0 0 60px rgba(var(--neon-rgb), 0.10) !important; backdrop-filter: blur(8px) !important; } html[data-style="neon"] .figma-navbar .nav-link:hover, html[data-style="neon"] .figma-navbar .nav-link.active { color: var(--figma-brand-red) !important; box-shadow: inset 0 0 12px rgba(var(--neon-rgb), 0.15) !important; } html[data-style="neon"] .figma-navbar .dropdown-menu { border: 1px solid rgba(var(--neon-rgb), 0.50) !important; box-shadow: 0 0 24px rgba(var(--neon-rgb), 0.30) !important; } html[data-style="neon"] .figma-navbar .btn-join { box-shadow: 0 0 12px rgba(var(--neon-rgb), 0.70), 0 0 24px rgba(var(--neon-rgb), 0.35) !important; } html[data-style="neon"] .dept-name-header { border-bottom: 2px solid var(--figma-brand-red) !important; box-shadow: 0 4px 24px rgba(var(--neon-rgb), 0.25) !important; } html[data-style="neon"] .quick-link { border: 1px solid rgba(var(--neon-rgb), 0.40) !important; box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.20) !important; } html[data-style="neon"] .quick-link:hover { border-color: var(--figma-brand-red) !important; box-shadow: 0 0 16px rgba(var(--neon-rgb), 0.55) !important; color: var(--figma-brand-red) !important; } html[data-style="neon"] .sidebar-figma .nav-link.active { border-left-color: var(--figma-brand-red) !important; box-shadow: inset 0 0 16px rgba(var(--neon-rgb), 0.10) !important; color: var(--figma-brand-red) !important; } html[data-style="neon"] .figma-progress-fill { box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.60) !important; } html[data-style="neon"] .modal-content { border: 1px solid rgba(var(--neon-rgb), 0.50) !important; box-shadow: 0 0 40px rgba(var(--neon-rgb), 0.30) !important; background: rgba(0, 0, 0, 0.97) !important; } /* ── Hero style mode: tablet overrides ───────────────────────────── The hero token sizes (96px h1, 64px h2) are not clamped on tablet, and hero stat items use very heavy padding. Cap them here. ------------------------------------------------------------------ */ @media (max-width: 1024px) { html[data-style="hero"] { --figma-fs-h1: clamp(2.5rem, 7vw, 5rem); --figma-fs-h2: clamp(1.75rem, 4.5vw, 3rem); --figma-fs-h3: clamp(1.25rem, 2.5vw, 2rem); } html[data-style="hero"] .hero-stat-item { padding: 24px 32px !important; } } @media (max-width: 768px) { html[data-style="hero"] { --figma-fs-h1: clamp(2rem, 6vw, 3.5rem); --figma-fs-h2: clamp(1.5rem, 4vw, 2.25rem); } html[data-style="hero"] .hero-stat-item { padding: 16px 24px !important; } }