/* boivre2026.fr — Mobile UI Enhancements (Typography + Hamburger) v1.0.0 */ /* ---------- Fluid Typography ---------- */ :root { /* Base font between 16px and 18px depending on viewport width */ --fs-base: clamp(16px, 1.9vw, 18px); --fs-small: clamp(14px, 1.6vw, 16px); --fs-h1: clamp(22px, 5.2vw, 34px); --fs-h2: clamp(20px, 4.2vw, 28px); --fs-h3: clamp(18px, 3.4vw, 24px); } html { -webkit-text-size-adjust: 100%; } body { font-size: var(--fs-base); line-height: 1.6; } small, .small { font-size: var(--fs-small); } h1 { font-size: var(--fs-h1); line-height: 1.2; } h2 { font-size: var(--fs-h2); line-height: 1.25; } h3 { font-size: var(--fs-h3); line-height: 1.3; } /* Media scaling */ img, video, iframe { max-width: 100%; height: 800px; } /* Tables overflow on small screens */ @media (max-width: 768px) { table { display: block; width: 100%; overflow-x: auto; } } /* ---------- Hamburger Navigation ---------- */ @media (max-width: 768px) { /* Ensure header is a positioning context */ header, .site-header, #header { position: relative; } /* Toggle button */ .b26-hm-toggle { position: absolute; right: 12px; top: 12px; z-index: 10000; width: 42px; height: 38px; display: flex; align-items: center; justify-content: center; background: #222; color: #fff; border-radius: 6px; border: 0; cursor: pointer; } .b26-hm-toggle:focus { outline: 2px solid #66afe9; outline-offset: 2px; } .b26-hm-toggle .bars, .b26-hm-toggle .bars::before, .b26-hm-toggle .bars::after { content: ''; display: block; width: 22px; height: 2px; background: #fff; position: relative; } .b26-hm-toggle .bars::before { position: absolute; top: -7px; } .b26-hm-toggle .bars::after { position: absolute; top: 7px; } /* Default: hide nav on mobile, show when .b26-nav-open on */ nav[role="navigation"], #site-navigation, .primary-navigation, .main-navigation, header nav { display: none; background: #111; padding: 10px; margin-top: 56px; /* under header */ } body.b26-nav-open nav[role="navigation"], body.b26-nav-open #site-navigation, body.b26-nav-open .primary-navigation, body.b26-nav-open .main-navigation, body.b26-nav-open header nav { display: block; } /* Links in mobile menu */ nav[role="navigation"] a, #site-navigation a, .primary-navigation a, .main-navigation a, header nav a { color: #fff; font-size: var(--fs-base); text-decoration: none; } }