/* ============================================================ 23 — LEGAL PAGES VISUAL UPGRADE (Accessibility · Terms of Use · Privacy Policy) ============================================================ Purpose: Applies the glass + gradient-heading language used on the homepage and resources page to all three legal pages. Scope: Rules are scoped to .byr-accessibility, .byr-terms, and #byr-privacy so nothing here affects Contact or other pages that share .byr-legal / .byr-panel markup. Structure notes: • Accessibility + Terms use .byr-legal-section wrappers around each h2/h3, enabling hover-expand underlines. • Privacy uses h2/h3 directly inside .byr-panel with no .byr-legal-section wrapper — underlines expand on h2:hover. Depends: 01-core-tokens-base.css (tokens) 10-shared-page-components.css (byrGradientShimmer @keyframes) 14-legal-timeline.css (.byr-panel base) TABLE OF CONTENTS: 1. H2 — Instrument Serif + animated cool gradient (all pages) 2. H2 Underline — section-hover expand (Accessibility + Terms) 3. H2 Underline — self-hover expand (Privacy) 4. H3 — Warm amber gradient (all pages) 5. Panel — backdrop-filter glassmorphism upgrade (all pages) 6. Light Mode 7. Reduced Motion ============================================================ */ /* ========================================================== 1. H2 — Instrument Serif + animated cool gradient Shared across all three legal pages. Matches .byr-gradient-heading + HCS h2 in 20-hcs-guide.css. ========================================================== */ .byr-accessibility .byr-legal-section h2, .byr-terms .byr-legal-section h2, #byr-privacy .byr-legal-body h2 { position: relative; display: inline-block; padding-bottom: 0.45rem; font-family: var(--font-serif); font-weight: 400; line-height: var(--leading-tight); /* Cool cyan → blue shimmer gradient */ background: linear-gradient( 125deg, #e2e8f0 0%, #67e8f9 18%, #22D3EE 32%, #38bdf8 48%, #60a5fa 62%, #7dd3fc 88% ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: byrGradientShimmer 8s ease-in-out infinite; } /* Underline base state (all pages) */ .byr-accessibility .byr-legal-section h2::after, .byr-terms .byr-legal-section h2::after, #byr-privacy .byr-legal-body h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 70%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #22D3EE, #60a5fa 60%, transparent); opacity: 0.5; box-shadow: 0 0 8px rgba(34, 211, 238, 0.15); transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, box-shadow 0.4s ease; } /* ========================================================== 2. H2 UNDERLINE — section-hover expand Accessibility + Terms: trigger on .byr-legal-section hover so the whole section card activates the effect. ========================================================== */ .byr-accessibility .byr-legal-section:hover h2::after, .byr-accessibility .byr-legal-section:focus-within h2::after, .byr-terms .byr-legal-section:hover h2::after, .byr-terms .byr-legal-section:focus-within h2::after { width: 92%; opacity: 0.85; box-shadow: 0 0 12px rgba(34, 211, 238, 0.35), 0 0 28px rgba(96, 165, 250, 0.12); } /* ========================================================== 3. H2 UNDERLINE — self-hover expand Privacy: h2s live directly in .byr-panel with no section wrapper, so we trigger on h2:hover itself. ========================================================== */ #byr-privacy .byr-legal-body h2:hover::after { width: 92%; opacity: 0.85; box-shadow: 0 0 12px rgba(34, 211, 238, 0.35), 0 0 28px rgba(96, 165, 250, 0.12); } /* ========================================================== 4. H3 — Warm amber gradient Shared across all three legal pages. Matches h3 in 20-hcs-guide.css. ========================================================== */ .byr-accessibility .byr-legal-section h3, .byr-terms .byr-legal-section h3, #byr-privacy .byr-legal-body h3 { background: linear-gradient( 125deg, #fef3c7 0%, #fde68a 20%, #FBB924 40%, #f59e0b 65%, #d97706 100% ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: byrGradientShimmer 10s ease-in-out infinite; } /* ========================================================== 5. PANEL — backdrop-filter glassmorphism upgrade The base .byr-panel in 14-legal-timeline.css already has a semi-transparent color-mix background and a radial glow ::before. We layer backdrop-filter here for the full frosted glass effect against the animated background canvas. ========================================================== */ .byr-accessibility .byr-panel, .byr-terms .byr-panel, #byr-privacy .byr-panel { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } /* ========================================================== 6. LIGHT MODE ========================================================== */ /* H2 — remap to dark cool tones readable on light bg */ .mode-light .byr-accessibility .byr-legal-section h2, .mode-light .byr-terms .byr-legal-section h2, .mode-light #byr-privacy .byr-legal-body h2 { background: linear-gradient( 125deg, #0e7490 0%, #0891B2 25%, #1E40AF 55%, #0369a1 80%, #155e75 100% ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* H3 — remap to dark amber tones */ .mode-light .byr-accessibility .byr-legal-section h3, .mode-light .byr-terms .byr-legal-section h3, .mode-light #byr-privacy .byr-legal-body h3 { background: linear-gradient( 125deg, #92400e 0%, #b45309 30%, #d97706 60%, #92400e 100% ); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================== 7. REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .byr-accessibility .byr-legal-section h2, .byr-accessibility .byr-legal-section h3, .byr-terms .byr-legal-section h2, .byr-terms .byr-legal-section h3, #byr-privacy .byr-legal-body h2, #byr-privacy .byr-legal-body h3 { animation: none; background-position: 0% 50%; } .byr-accessibility .byr-legal-section h2::after, .byr-terms .byr-legal-section h2::after, #byr-privacy .byr-legal-body h2::after { transition: none; } }