/* ========================================================================== KARADIGM - layout.css Page skeleton: header / nav / main / footer. Flat, no shadows. JS hooks (toggled by js/main.js): .site-header.nav-open → mobile hamburger panel is open (≤1100px) .nav-item.is-open → a nav dropdown is open Theme-agnostic; all colours/sizes come from the active tokens file. TABLE OF CONTENTS scroll-read progress bar · back-to-top button · header · hamburger toggle · nav · social icons · dropdown · main · footer · RESPONSIVE ========================================================================== */ .page { display: flex; flex-direction: column; min-height: 100vh; } /* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ scroll-read progress bar Fixed tri-accent bar at the very top; js/main.js (block 07) sets its width as you scroll. Include
on every page (just inside ). ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; } .scroll-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-blue), var(--acc-green), var(--acc-red)); } /* ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ back-to-top button Fixed round button, hidden until you scroll down. js/main.js (block 07) toggles .is-visible and scrolls to top on click (both in block 07). Include