/** * ep_responsive.css — Energiepiloot responsive layout * Mobiel eerst (max-width:430px al in pagina's) * Tablet en desktop: centreer + vergroot, sidebar op desktop * * Gebruik op elke pagina in : * */ /* ─── BASIS ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { min-height: 100%; margin: 0; background: var(--ep-bg); font-family: -apple-system, 'Segoe UI', sans-serif; display: flex; justify-content: center; } /* App container — mobiel */ .app { width: 100%; max-width: 430px; min-height: 100vh; background: var(--ep-bg); display: flex; flex-direction: column; position: relative; } /* ─── TABLET (600px – 1023px) ───────────────────────── */ @media (min-width: 600px) { body { background: var(--ep-bg); align-items: flex-start; padding-top: 24px; padding-bottom: 24px; } .app { max-width: 500px; min-height: calc(100vh - 48px); border-radius: 20px; border: 0.5px solid rgba(255,255,255,0.06); overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.6); } /* Bottom nav iets groter */ .ep-nav { border-radius: 0 0 20px 20px; } /* Topbar sticky werkt binnen border-radius */ .topbar { border-radius: 20px 20px 0 0; } } /* ─── DESKTOP (1024px+) ─────────────────────────────── */ @media (min-width: 1024px) { body { padding-top: 0; padding-bottom: 0; align-items: stretch; flex-direction: row; justify-content: center; gap: 0; } /* Sidebar op desktop — toon het drawer menu als vaste zijkolom */ .ep-desktop-sidebar { width: 260px; min-height: 100vh; background: var(--ep-bg); border-right: 0.5px solid rgba(255,255,255,0.07); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* App wordt naast de sidebar geplaatst */ .app { max-width: 480px; min-height: 100vh; border-radius: 0; border: none; box-shadow: none; border-left: 0.5px solid rgba(255,255,255,0.04); border-right: 0.5px solid rgba(255,255,255,0.04); } /* Hamburgermenu tonen op desktop — sidebar nog niet geimplementeerd */ .ep-ham { display: flex !important; } /* Drawer overlay zichtbaar op desktop */ /* .ep-drawer-ov { display: none !important; } */ /* Bottom nav verbergen op desktop */ .ep-nav { display: none !important; } body { padding-bottom: 0 !important; } /* Rechter kolom op breed scherm */ .ep-desktop-rechts { flex: 1; max-width: 340px; background: var(--ep-bg); border-left: 0.5px solid rgba(255,255,255,0.04); padding: 20px; display: flex; flex-direction: column; gap: 10px; } } /* ─── BREED DESKTOP (1400px+) ───────────────────────── */ @media (min-width: 1400px) { .app { max-width: 520px; } .ep-desktop-sidebar { width: 280px; } } /* ─── VEILIGE ZONES (notch / home bar) ─────────────── */ .ep-nav { padding-bottom: max(16px, env(safe-area-inset-bottom)); } .topbar { padding-top: max(14px, env(safe-area-inset-top)); } /* ─── SCROLLBAR STIJL ───────────────────────────────── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* ─── TOUCH FEEDBACK ────────────────────────────────── */ @media (hover: none) { * { -webkit-tap-highlight-color: transparent; } } /* ─── PRINT ─────────────────────────────────────────── */ @media print { .ep-nav, .ep-ham, .ep-drawer-ov, .topbar { display: none !important; } .app { max-width: 100%; box-shadow: none; border: none; } }