/* Shell + Home page for the logged-in General User "app" experience (layouts/member-app.ejs). Separate from member-form.css (which styles the Login/Register/Account form cards) -- this file is the app-shell chrome (top brand bar + top icon nav, per the provided mockups -- NOT a bottom tab bar) and feed/card layouts, loaded on every app-shell page (Home, Search, Notifications, My events; more reuse the same shell later). */ .app-body { background: #f4f2f6; margin: 0; } .app-shell { min-height: 100vh; display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; background: #f4f2f6; } .app-header-group { position: sticky; top: 0; z-index: 5; background: #fff; } /* Home-only row: hamburger (-> Settings) + brand + chat */ .app-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; } .app-hamburger, .app-topbar-chat { display: flex; align-items: center; justify-content: center; color: var(--ink, #101828); } .app-hamburger .icon, .app-topbar-chat .icon { width: 22px; height: 22px; } .app-brand { display: inline-flex; align-items: center; justify-content: center; width: 132px; height: 52px; text-decoration: none; color: var(--ink, #101828); } .app-brand img { width: 100%; height: 100%; object-fit: contain; } /* the 6-icon row; the active one gets a pink ring around it (matches the provided screens) rather than just a color change */ .app-nav { display: flex; align-items: center; justify-content: space-around; padding: 6px 8px 12px; border-bottom: var(--line, 3px solid #000); } .app-header-group > .app-nav:first-child { padding-top: 14px; } .app-nav a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; color: #101828; text-decoration: none; } .app-nav a.active { color: var(--pink, #ff1493); border-color: var(--pink, #ff1493); } .app-nav .icon { width: 21px; height: 21px; } .app-main { flex: 1; padding: 16px 16px 32px; display: flex; flex-direction: column; gap: 22px; } .app-placeholder { display: grid; place-items: center; gap: 10px; padding: 60px 20px; text-align: center; color: #5b6472; } .app-placeholder .icon { width: 40px; height: 40px; color: var(--pink, #ff1493); } .app-placeholder h2 { margin: 0; font-size: 16px; font-weight: 900; color: var(--ink, #101828); } /* the rail's 3 sections (Jobs for you / Upcoming events / Member perks) are all wrapped in one .desktop-home-rail div -- on desktop that div becomes `display:contents` so its children pick up .app-main's own 22px gap directly, but on mobile it was a plain block with no gap of its own, leaving the sections touching with no space between them. */ .desktop-home-rail { display: flex; flex-direction: column; gap: 22px; } .home-section { display: flex; flex-direction: column; gap: 10px; } .home-section-head { display: flex; align-items: center; justify-content: space-between; } .home-section-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; } .home-section-head .icon { width: 18px; height: 18px; color: var(--pink, #ff1493); } .home-see-all { font-size: 12px; font-weight: 800; text-decoration: underline; color: var(--ink, #101828); } /* align-items default (stretch) so every card in a row matches the tallest sibling's height -- a job with a short/no excerpt must not end up visibly shorter than its neighbors (per the mockup, every card in the row is the same height). */ .home-hscroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; } /* 62vw lands at ~230px on a 375px-wide phone (the design's target), so nothing changes there; on a narrower phone it shrinks WITH the screen instead of staying pinned at 230px (previously a fixed flex-basis, which made the Home carousel show barely more than one card, mostly cut off, on a small/older device). min() caps it at 230px so it does not keep growing on a tablet-width screen. display:flex (not grid): a grid's auto-sized rows leave stretch's extra height as blank space BELOW the last row; a flex column lets .job-card-bottom's margin-top:auto claim that space instead, so the tags/Apply row stays flush at the bottom of every card, however tall it got. */ .job-card { position: relative; flex: 0 0 min(230px, 62vw); display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #fff; border: var(--line, 3px solid #000); border-radius: 16px; } /* Saved Jobs page: the same card, stacked vertically and full width instead of the Home carousel's fixed-width horizontal scroll. */ .job-card-list { display: flex; flex-direction: column; gap: 12px; } .job-card-list .job-card { flex: 0 0 auto; width: 100%; } /* the card's own click-to-open-details area: a