/** * layouts.css — 4 layout modes for SaltaVidas. * * Applied via data-layout attribute on . * No data-layout (or "classic") = default 3-panel sidebar. * * Layouts: * classic — 3-panel sidebar (default) * app — Fixed bottom nav, compact stats strip, full-width content * feed — Single-column feed, content first; 2-col on wider screens * drawer — Stats panel slides in on ☰; full-width content */ /* ── Compact stats bar ───────────────────────────────────────────────────── */ /* Hidden by default; shown in app layout. Lives in the main grid full-width. */ #compact-stats-bar { display: none; grid-column: 1 / -1; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; background: var(--sv-surface); border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-border); font-size: 0.78rem; align-items: center; } .cs-stat { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .cs-bar { width: 38px; height: 5px; background: var(--sv-track); border-radius: 3px; overflow: hidden; } .cs-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; } /* ── Drawer overlay ──────────────────────────────────────────────────────── */ #drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: 98; cursor: pointer; } /* ── Drawer toggle button ────────────────────────────────────────────────── */ /* Hidden unless drawer layout is active */ #drawer-toggle { display: none; } /* ══════════════════════════════════════════════════════════════════════════ 📱 APP — Bottom nav, compact stats strip, full-width content ══════════════════════════════════════════════════════════════════════════ */ [data-layout="app"] .main { grid-template-columns: 1fr !important; } /* Hide the sidebar panels — their info migrates to compact-stats-bar or is accessible via tabs. Jobs/events are still in the feed below. */ [data-layout="app"] #panel-stats { display: none; } [data-layout="app"] #panel-jobs { display: none; } /* Compact stats strip becomes visible */ [data-layout="app"] #compact-stats-bar { display: flex; } /* Tab bar detaches from the panel and sticks to the bottom of the viewport */ [data-layout="app"] .tab-bar-scroll { position: fixed; bottom: 52px; left: 0; right: 0; z-index: 40; margin: 0; padding: 4px 8px 2px; background: var(--sv-surface); border-top: 2px solid var(--sv-border-hi); box-shadow: 0 -4px 20px rgba(0,0,0,0.35); scrollbar-width: none; } [data-layout="app"] .tab-bar-scroll::-webkit-scrollbar { display: none; } /* Push body down far enough that content clears the fixed tab bar */ body[data-layout="app"] { padding-bottom: 104px; } /* Bigger tap targets in bottom nav */ [data-layout="app"] .tab { padding: 9px 14px; font-size: 0.73rem; } /* ══════════════════════════════════════════════════════════════════════════ 📜 FEED — Single column, content first, sidebar panels inline below ══════════════════════════════════════════════════════════════════════════ */ [data-layout="feed"] .main { grid-template-columns: 1fr !important; gap: 10px; } /* Reorder: activities first (most important on mobile), then stats, then events */ [data-layout="feed"] #compact-stats-bar { order: 0; } [data-layout="feed"] #panel-content { order: 1; } [data-layout="feed"] #panel-stats { order: 2; } [data-layout="feed"] #panel-jobs { order: 3; } /* On wider screens, 2-col layout: content left, stats+events stacked right */ @media (min-width: 640px) { [data-layout="feed"] .main { grid-template-columns: 1fr 310px !important; } [data-layout="feed"] #panel-content { grid-column: 1; grid-row: 1 / 3; order: 1; } [data-layout="feed"] #panel-stats { grid-column: 2; grid-row: 1; order: 2; } [data-layout="feed"] #panel-jobs { grid-column: 2; grid-row: 2; order: 3; } } /* ══════════════════════════════════════════════════════════════════════════ ☰ DRAWER — Stats slide in from left; hamburger shows on mobile ══════════════════════════════════════════════════════════════════════════ */ [data-layout="drawer"] .main { grid-template-columns: 1fr !important; } /* Stats panel becomes a fixed slide-in drawer */ [data-layout="drawer"] #panel-stats { position: fixed; top: 0; left: -320px; bottom: 0; width: 300px; z-index: 100; overflow-y: auto; overflow-x: hidden; transition: left 0.24s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 var(--sv-radius) var(--sv-radius) 0; padding-top: 80px; /* clear the fixed header */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } [data-layout="drawer"][data-drawer-open] #panel-stats { left: 0; box-shadow: 4px 0 28px rgba(0,0,0,0.55); } [data-layout="drawer"][data-drawer-open] #drawer-overlay { display: block; } /* Prevent background scroll while drawer is open on narrow screens */ body[data-layout="drawer"][data-drawer-open] { overflow: hidden; } /* Show hamburger button */ [data-layout="drawer"] #drawer-toggle { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } /* Content and jobs stack below drawer trigger on narrow screens */ [data-layout="drawer"] #panel-content { order: 1; } [data-layout="drawer"] #panel-jobs { order: 2; } /* On desktop: restore sidebar — no drawer needed */ @media (min-width: 1000px) { [data-layout="drawer"] .main { grid-template-columns: 280px 1fr !important; } [data-layout="drawer"] #panel-stats { position: static; left: auto; top: auto; bottom: auto; width: auto; overflow-y: visible; overflow-x: visible; border-radius: var(--sv-radius); padding-top: 16px; box-shadow: none; order: 0; grid-row: 1 / 3; } [data-layout="drawer"] #panel-content { order: 1; } [data-layout="drawer"] #panel-jobs { order: 2; grid-column: 2; } [data-layout="drawer"] #drawer-toggle { display: none; } [data-layout="drawer"][data-drawer-open] #drawer-overlay { display: none; } body[data-layout="drawer"][data-drawer-open] { overflow: visible; } }