/* ===================================================== FONT SIZE ADJUSTMENT SYSTEM Performance Hub - Florida Department of Health Add this to your site.css or as a separate file referenced in _Layout.cshtml ===================================================== */ /* ===================================================== TEXT-ONLY SCALING The root font size is scaled so rem-based text resizes. Block widths, images, borders, and px layout stay put. This used to use zoom, which magnified the whole block. ===================================================== */ /* Metronic anchors text with "body,html { font-size: 13px !important }". To scale text we have to beat that on both specificity and !important, on html (so rem text resizes) and on body (so inherited text resizes). Keying on the html[data-font-level] attribute does both, and because the level is server-rendered onto , the size is right at first paint with no jump. The base is 14px so the sizer labels are literal: 10 / 12 / 14 / 16 / 18px. Medium (level 3) really is 14px. */ html[data-font-level="1"], html[data-font-level="1"] body { font-size: 10px !important; } html[data-font-level="2"], html[data-font-level="2"] body { font-size: 12px !important; } html[data-font-level="3"], html[data-font-level="3"] body { font-size: 14px !important; } html[data-font-level="4"], html[data-font-level="4"] body { font-size: 16px !important; } html[data-font-level="5"], html[data-font-level="5"] body { font-size: 18px !important; } /* ===================================================== FONT SIZE CONTROL - Header Component Sits in the .main-header-nav between search and bell ===================================================== */ .font-size-control { display: flex; align-items: center; gap: 0.35rem; background: rgba(255, 255, 255, 0.08); padding: 0.25rem 0.5rem; border-radius: 0.375rem; margin: 0 0.25rem; } .font-size-adjuster { display: flex; align-items: center; gap: 0.2rem; } /* +/- Buttons */ .font-size-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: white; width: 1.625rem; height: 1.625rem; min-width: 1.625rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.75rem; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; } .font-size-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); } .font-size-btn:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; } .font-size-btn:active:not(:disabled) { background: rgba(59, 130, 246, 0.5); border-color: rgba(59, 130, 246, 0.7); } .font-size-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* The "AAAAA" indicator display box */ .font-size-display { display: flex; align-items: baseline; justify-content: center; gap: 1px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.25rem; padding: 0.2rem 0.4rem; min-width: 3.25rem; height: 1.625rem; } /* Individual A indicators */ .size-indicator { font-weight: 700; font-family: 'Georgia', 'Times New Roman', serif; color: rgba(255, 255, 255, 0.3); transition: color 0.2s ease, transform 0.15s ease; line-height: 1; cursor: pointer; user-select: none; } .size-indicator:hover { color: rgba(255, 255, 255, 0.6); } .size-indicator.active { color: #ffffff; transform: scale(1.05); } /* Fixed pixel sizes for each A letter (these stay constant) */ .size-xs { font-size: 8px; } .size-sm { font-size: 10px; } .size-md { font-size: 12px; } .size-lg { font-size: 14px; } .size-xl { font-size: 16px; } /* ===================================================== DARK MODE SUPPORT If your dark mode toggles a class or data attribute ===================================================== */ [data-bs-theme="dark"] .font-size-control, .dark-mode .font-size-control { background: rgba(255, 255, 255, 0.06); } [data-bs-theme="dark"] .font-size-display, .dark-mode .font-size-display { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } /* ===================================================== RESPONSIVE - collapse on very small screens ===================================================== */ @media (max-width: 576px) { .font-size-control { padding: 0.2rem 0.35rem; } .font-size-display { min-width: 2.75rem; } .font-size-btn { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; font-size: 0.625rem; } } /* ===================================================== ACCESSIBILITY - High contrast mode ===================================================== */ @media (forced-colors: active) { .font-size-btn { border: 1px solid ButtonText; color: ButtonText; } .font-size-btn:disabled { border-color: GrayText; color: GrayText; } .size-indicator { color: GrayText; } .size-indicator.active { color: HighlightText; } .font-size-display { border: 1px solid ButtonText; } } /* Header gear menu (light panel) */ .header-settings-dropdown .font-size-control { background: #f3f6f9; margin: 0; width: 100%; justify-content: center; } .header-settings-dropdown .font-size-btn { border-color: #dcdfe6; color: #3f4254; } .header-settings-dropdown .font-size-btn:hover:not(:disabled) { background: #ebedf3; border-color: #c9ccd6; } .header-settings-dropdown .font-size-display { background: #ffffff; border-color: #e4e6ef; } .header-settings-dropdown .size-indicator { color: rgba(63, 66, 84, 0.78); } .header-settings-dropdown .size-indicator:hover { color: rgba(63, 66, 84, 0.9); } .header-settings-dropdown .size-indicator.active { color: #1565c0; } [data-theme="dark"] .header-settings-dropdown .font-size-control { background: #252536; } [data-theme="dark"] .header-settings-dropdown .font-size-btn { border-color: #3f4254; color: #e4e6ef; } [data-theme="dark"] .header-settings-dropdown .font-size-display { background: #1e1e2d; border-color: #3f4254; } [data-theme="dark"] .header-settings-dropdown .size-indicator { color: rgba(228, 230, 239, 0.55); } [data-theme="dark"] .header-settings-dropdown .size-indicator:hover { color: rgba(228, 230, 239, 0.65); } [data-theme="dark"] .header-settings-dropdown .size-indicator.active { color: #5b9eff; }