/* ── SHARED SIDEBAR ────────────────────────────────────────────── One source of truth for the cook-facing sidebar across dashboard.html, recipe.html, chefs.html and chef.html. Relies on each page's :root colour + --sidebar variables. */ /* Mobile: stop the page rendering wider than the screen (which makes phones load zoomed in on the top-left) and stop iOS auto-inflating text. overflow-x lives on html, not body, so sticky topbars keep working. */ html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* These pages use a flex with .main as the flex child. Flex children default to min-width:auto and refuse to shrink below their content, so a wide grid/tabs/image forces the page wider than the phone screen. min-width:0 lets .main shrink to the viewport. */ .main { min-width: 0; } .sidebar { width: var(--sidebar); background: var(--green); /* 100dvh = the actually-visible height on phones (excludes the area behind the address bar), with a 100vh fallback for old browsers. overflow-y lets the nav scroll if it's ever taller than the screen so the account section at the bottom always stays reachable. */ min-height: 100vh; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow-y: auto; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; padding: 0; z-index: 50; } .sidebar-logo { padding: 32px 28px 28px; border-bottom: 1px solid rgba(255,255,255,0.1); font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: white; text-decoration: none; display: block; } .sidebar-logo span { display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400; color: var(--green-pale); letter-spacing: 0.08em; margin-top: 4px; } .sidebar-section-label { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green-pale); opacity: 0.6; padding: 24px 28px 10px; } .sidebar-nav { list-style: none; padding: 0 12px; flex: 1; } .sidebar-nav li a { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: var(--green-pale); text-decoration: none; font-size: 14px; font-weight: 400; transition: all 0.15s; } .sidebar-nav li a:hover { background: rgba(255,255,255,0.1); color: white; } .sidebar-nav li a.active { background: rgba(255,255,255,0.15); color: white; font-weight: 500; } .sidebar-nav li a .icon { width: 18px; text-align: center; font-size: 15px; opacity: 0.8; } .sidebar-bottom { padding: 20px 12px; border-top: 1px solid rgba(255,255,255,0.1); } .user-pill { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .user-avatar { width: 34px; height: 34px; background: var(--green-bright); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: white; flex-shrink: 0; } .user-name { font-size: 13px; color: white; font-weight: 400; } .user-plan { font-size: 11px; color: var(--green-pale); } /* Mobile hamburger (lives in each page's topbar) + slide-in behaviour */ .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px 8px; margin-right: 10px; flex-direction: column; gap: 5px; flex-shrink: 0; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text-mid); border-radius: 2px; transition: background 0.2s; } .hamburger:hover span { background: var(--green); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 49; } .sidebar-overlay.active { display: block; } @media (max-width: 768px) { .hamburger { display: flex; } .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; z-index: 100; } .sidebar.open { transform: translateX(0); } }