/* ========================================================= responsive.css Mobile typography layer for the SF Planning Fee Schedule. Purpose: - Proportionally reduces global font-size and line-height on smaller screens so dense fee tables and the calculator read comfortably without horizontal scrolling. Load order: - Must be linked AFTER styles.css so these overrides win. Accessibility guardrails (WCAG 2.1 AA): - Form inputs are kept at 16px on mobile to prevent iOS Safari from auto-zooming when a field is focused. - Body / interactive text is never reduced below ~12px so it stays legible and resizable up to 200%. - Line-height is only mildly tightened (1.5em -> 1.45em -> 1.4em) to preserve readable spacing. ========================================================= */ /* --------------------------------------------------------- TABLET AND BELOW (<= 768px) | scale ~0.90 --------------------------------------------------------- */ @media (max-width: 768px) { /* Global line-height tightening. Cascades to every element via the `* { line-height: inherit }` rule in styles.css that inherits from . */ body { line-height: 1.45em; } /* Elements that set their own line-height need an explicit nudge. */ .info-block p, .info-block ul li, .accordion-footnote p, .multilingual-info, .alameda-calc p, .alameda-calc .fee-item-name, .alameda-calc .fee-breakdown-detail, .alameda-calc .conditional-note p, .fee-breakdown-desc { line-height: 1.45em; } /* ---- Font-size: proportional reduction ---- */ /* 27px -> 24px */ .header-left h1 { font-size: 24px; } /* 24px -> 22px */ .important-info h2, .fixed-fees h2, .fee-breakdown-total-value, .alameda-calc .totals-grand-value { font-size: 22px; } /* 20px -> 19px */ .calculator-header h2, .breakdown-header h2 { font-size: 19px; } /* 18px -> 17px */ .department-name, .info-block h3 { font-size: 17px; } /* 16px -> 15px (form inputs intentionally excluded) */ .accordion-header h3, .footer-copyright, .fee-breakdown-value, .fee-breakdown-total .fee-breakdown-label strong, .alameda-calc h3, .alameda-calc h4, .alameda-calc .totals-grand-label { font-size: 15px; } /* 15px -> 14px */ .tab-btn, .info-block p, .info-block ul li, .fee-name, .fee-amount, .footer-links a, .fee-breakdown-label strong, .alameda-calc p, .alameda-calc .fee-item-name { font-size: 14px; } /* 14px -> 13px */ .error-message, .expand-all-btn, .accordion-icon, .fee-subsection-header, .calculator-subtitle, .breakdown-subtitle, .form-group label, .breakdown-empty-text, .multilingual-info, .alameda-calc .calculator-subtitle, .alameda-calc .breakdown-subtitle, .alameda-calc .fee-section-indicator, .alameda-calc .selected-activities-title, .alameda-calc .button-group .clear-btn { font-size: 13px; } /* 13px -> 12px (readability floor) */ .print-btn, .external-link, .effective-date, .fee-breakdown-desc, .fee-breakdown-rate, .accordion-footnote p, .alameda-calc .conditional-note p { font-size: 12px; } } /* --------------------------------------------------------- PHONE (<= 480px) | scale ~0.85 --------------------------------------------------------- */ @media (max-width: 480px) { body { line-height: 1.4em; } .info-block p, .info-block ul li, .accordion-footnote p, .multilingual-info, .alameda-calc p, .alameda-calc .fee-item-name, .alameda-calc .fee-breakdown-detail, .alameda-calc .conditional-note p, .fee-breakdown-desc { line-height: 1.4em; } /* 27px -> 22px */ .header-left h1 { font-size: 22px; } /* 24px -> 20px */ .important-info h2, .fixed-fees h2, .fee-breakdown-total-value, .alameda-calc .totals-grand-value { font-size: 20px; } /* 20px -> 18px */ .calculator-header h2, .breakdown-header h2 { font-size: 18px; } /* 18px -> 16px */ .department-name, .info-block h3 { font-size: 16px; } /* 16px -> 15px (form inputs intentionally excluded) */ .accordion-header h3, .footer-copyright, .fee-breakdown-value, .fee-breakdown-total .fee-breakdown-label strong, .alameda-calc h3, .alameda-calc h4, .alameda-calc .totals-grand-label { font-size: 15px; } /* 15px -> 14px */ .tab-btn, .info-block p, .info-block ul li, .fee-name, .fee-amount, .footer-links a, .fee-breakdown-label strong, .alameda-calc p, .alameda-calc .fee-item-name { font-size: 14px; } /* 14px -> 13px */ .error-message, .expand-all-btn, .accordion-icon, .fee-subsection-header, .calculator-subtitle, .breakdown-subtitle, .form-group label, .breakdown-empty-text, .multilingual-info, .alameda-calc .calculator-subtitle, .alameda-calc .breakdown-subtitle, .alameda-calc .fee-section-indicator, .alameda-calc .selected-activities-title, .alameda-calc .button-group .clear-btn { font-size: 13px; } /* 13px -> 12px (readability floor) */ .print-btn, .external-link, .effective-date, .fee-breakdown-desc, .fee-breakdown-rate, .accordion-footnote p, .alameda-calc .conditional-note p { font-size: 12px; } }