/* ============================================================================ Home Desktop UI — phase 2 of the desktop/large-tablet initiative (phase 1 was Groups, see group-desktop.css — same visual tokens reused here for consistency, duplicated rather than shared so this file never risks touching the already-shipped Groups one). Scoped ENTIRELY to #landingOverlay so it never affects Groups/Reader/any other screen yet — Home-only for this phase, same precedent as Groups was Groups-only. Everything below the 1200px breakpoint is invisible (display:none) — the existing mobile experience is completely untouched below that width. Pure additive layer: no existing Index.html markup is removed, only new sibling elements are shown/hidden, plus a handful of existing Home elements (the mobile header, feed tabs, daily feed, legacy utility buttons) are hidden at this breakpoint since the new dashboard replaces them. Loaded as its own file for the same file-organization reason as group-desktop.css. Bump the ?v= query string on the tag in Index.html whenever this file changes. ============================================================================ */ #hdTopBar, #hdSidebar, #hdDashboardGrid { display: none; } @media (min-width: 1200px) { /* Hide the mobile-only chrome while Home is open at this width — scoped to body:has(#landingOverlay.show) so Groups/Reader/etc. never lose their own bottom nav; only Home goes into "desktop mode" here. */ body:has(#landingOverlay.show) #bottomNavBar { display: none !important; } body.v2Design #landingOverlay .landingHeader { display: none !important; } body.v2Design #landingOverlay .homeFeedTabs { display: none !important; } body.v2Design #landingOverlay .landingUtilityActions { display: none !important; } /* Desktop uses the purpose-built Rediscover dashboard, while Reflect and Remember swap only the main column's content. The right-side Your rhythm column remains present in every mode. home-desktop.js moves the shared feed into #hdModeContentHost at this breakpoint and restores it on mobile. */ body.v2Design #landingOverlay[data-home-feed-mode="rediscover"] #landingTodaySection { display: none !important; } body.v2Design #landingOverlay.show[data-home-feed-mode="reflect"] #hdMainCol > .hdSectionHeaderRow, body.v2Design #landingOverlay.show[data-home-feed-mode="reflect"] #hdVerseOfDayPanel, body.v2Design #landingOverlay.show[data-home-feed-mode="reflect"] #hdDiscoverGrid, body.v2Design #landingOverlay.show[data-home-feed-mode="reflect"] #hdContinueJourneyPanel, body.v2Design #landingOverlay.show[data-home-feed-mode="remember"] #hdMainCol > .hdSectionHeaderRow, body.v2Design #landingOverlay.show[data-home-feed-mode="remember"] #hdVerseOfDayPanel, body.v2Design #landingOverlay.show[data-home-feed-mode="remember"] #hdDiscoverGrid, body.v2Design #landingOverlay.show[data-home-feed-mode="remember"] #hdContinueJourneyPanel { display: none !important; } body.v2Design #landingOverlay.show[data-home-feed-mode="reflect"] #landingTodaySection, body.v2Design #landingOverlay.show[data-home-feed-mode="remember"] #landingTodaySection { display: flex !important; width: 100%; margin: 0; } body.v2Design #landingOverlay.show[data-home-feed-mode="reflect"] #landingDailyFeed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.v2Design #landingOverlay.show[data-home-feed-mode="remember"] #landingDailyFeed { display: flex; width: 100%; max-width: 980px; } /* #landingOverlay becomes the desktop shell: a full-width top bar row, then a sidebar + content two-column row beneath it. .landingContent (the EXISTING, unmoved mobile content column) becomes the content column — it isn't relocated in the DOM, just repositioned via grid-area, same pattern as .groupWorkspaceModal in the Groups Desktop UI. Its own children (search box, welcome/rhythm section, new dashboard grid) stay in plain block flow inside it — no inner grid needed there. */ body.v2Design #landingOverlay.show { display: grid; grid-template-columns: 264px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "topbar topbar" "sidebar content"; background: var(--v2-cream); overflow: hidden; /* body.has-bottom-nav .landingOverlay (Index.html's own mobile CSS) reserves calc(74px + safe-area) of padding-bottom to clear the fixed mobile bottom nav — but that nav is hidden at this breakpoint (see the body:has() rule above), so without resetting it here that padding silently eats into this grid's own content-box height, shrinking the "sidebar"/"content" row short of the real viewport bottom by exactly that amount (confirmed via getBoundingClientRect — the sidebar's own bottom edge landed 74px above the actual viewport edge). */ padding-bottom: 0; } #hdTopBar { grid-area: topbar; display: flex; } #hdSidebar { grid-area: sidebar; display: flex; } body.v2Design #landingOverlay.show .landingContent { grid-area: content; width: 100%; max-width: none; margin: 0; height: 100%; /* A grid item's default min-height:auto means it won't shrink below its own content's intrinsic height — so without this, .landingContent just grows past its "content" track's 100% height to fit everything (ignoring overflow-y:auto entirely), and the outer #landingOverlay.show's own overflow:hidden then clips whatever doesn't fit, cutting off the bottom of the page instead of it being scrollable. This is the standard fix for "overflow doesn't work on a CSS grid item". */ min-height: 0; overflow-y: auto; padding: 28px 32px 40px; } /* ---------- Top bar ---------- */ #hdTopBar { align-items: center; gap: 20px; padding: 0 24px; background: #fff; border-bottom: 1px solid rgba(24,39,66,.08); } #hdTopBar .hdTopBarLogo { display: flex; align-items: center; flex: 0 0 auto; border: none; background: none; cursor: pointer; padding: 0; } /* Real mb-logo-black.png/mb-logo-white.png wordmark (same asset + same live dark-mode swap every other header logo already uses via renderWordmarkLogos_ — .appHeaderLogo is already in that function's selector list, so this needed no JS changes), not a generic icon+text substitute. */ .hdTopBarLogoImg { height: 30px; width: auto; } .hdTopBarSearch { flex: 1 1 auto; max-width: 480px; display: flex; align-items: center; gap: 8px; background: var(--v2-cream); border: 1px solid rgba(24,39,66,.1); border-radius: 999px; padding: 9px 14px; color: var(--v2-muted); cursor: pointer; } .hdTopBarSearch i { font-size: 17px; } .hdTopBarSearch span:not(.hdTopBarSearchKbd) { flex: 1 1 auto; font-size: 13.5px; } .hdTopBarSearchKbd { flex: 0 0 auto; display: flex; gap: 3px; } .hdTopBarSearchKbd span { background: rgba(24,39,66,.08); border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 700; color: var(--v2-muted); } .hdTopBarRight { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; } .hdTopBarIconBtn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: none; background: none; color: var(--v2-ink); font-size: 20px; display: grid; place-items: center; cursor: pointer; } .hdTopBarIconBtn:hover { background: rgba(24,39,66,.06); } .hdTopBarBadge { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #c4402c; border: 1.5px solid #fff; } .hdTopBarAvatarBtn { display: flex; align-items: center; gap: 6px; border: none; background: none; cursor: pointer; color: var(--v2-muted); padding: 4px; border-radius: 999px; } .hdTopBarAvatarBtn:hover { background: rgba(24,39,66,.06); } .hdAvatarInitials { width: 30px; height: 30px; border-radius: 50%; background: var(--v2-green); color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; letter-spacing: .02em; } .hdTopBarAvatarBtn .mdi-chevron-down { font-size: 18px; } /* ---------- Sidebar ---------- */ #hdSidebar { flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--v2-green); overflow-y: auto; } .hdSidebarItem { display: flex; align-items: center; gap: 11px; border: none; background: none; border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer; color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 600; text-decoration: none; } .hdSidebarItem i { font-size: 19px; flex: 0 0 auto; } .hdSidebarItem:hover { background: rgba(255,255,255,.08); color: #fff; } .hdSidebarItem.active { background: rgba(201,162,39,.22); color: #fff; } .hdSidebarSpacer { flex: 1 1 auto; } #hdSidebarFeedbackBtn { color: rgba(255,255,255,.5); font-weight: 700; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; } #hdSidebarFeedbackBtn:hover { color: #fff; background: none; } /* ---------- Search box repositioned within the content column (still the real, fully-functional #landingSearchInput — not a duplicate) ---------- */ body.v2Design #landingOverlay.show .landingSearchWrap { max-width: 480px; margin: 0 0 20px; } /* ---------- Welcome banner + Read/Pray/Review row (existing real elements, restyled only — no markup/JS changes needed for either) ---------- */ body.v2Design #landingOverlay.show .homeDashboardIntro { background: linear-gradient(120deg, var(--v2-green) 0%, #2c4468 60%, #3a5478 100%); border-radius: 20px; padding: 32px 36px; margin-bottom: 24px; text-align: left; } body.v2Design #landingOverlay.show .homeGreeting { color: #fff; font-size: 32px; } body.v2Design #landingOverlay.show .homeGreetingSub { color: rgba(255,255,255,.75); } /* .homeRhythmCard keeps its real, un-overridden white background (#fff, set by the app's own mobile CSS) — it's an inset white card sitting inside this navy banner, same as the mockup, so .homeRhythmItem/.homeRhythmLabel/.homeRhythmCount are deliberately NOT recolored here: their existing dark-navy/grey mobile text already reads correctly against that white card. An earlier version of this file colored them white, assuming they'd sit directly on the navy gradient — that produced invisible white-on-white text, since the white card was never actually removed. */ body.v2Design #landingOverlay.show .homeRhythmCard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; } body.v2Design #landingOverlay.show .homeGrowthCard { margin-top: 16px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); } body.v2Design #landingOverlay.show .homeGrowthTitle, body.v2Design #landingOverlay.show .homeGrowthText { color: #fff; } /* ---------- Dashboard grid ---------- */ #hdDashboardGrid { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; } #hdMainCol, #hdSideCol, #hdModeContentHost { min-width: 0; } #hdModeContentHost:empty { display: none; } .hdSectionHeaderRow { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; } .hdSectionHeaderRow h2 { margin: 0; color: var(--v2-green); font-family: 'Mongolian Baiti', 'Playfair Display', serif; font-size: 21px; } /* Reuses the mobile feed's own .landingTodayFeedCard styling wholesale (same DOM, same classes, from buildVerseOfDayCard_/buildFeedItemCard_) — only the container layout and card sizing below are new for this breakpoint. */ #hdVerseOfDayPanel .landingTodayFeedCard { margin: 0 0 28px; } #hdDiscoverGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } #hdDiscoverGrid .landingTodayFeedCard { margin: 0; height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(24,39,66,.08); } #hdDiscoverGrid .landingTodayFeedCard .landingTodayFeedBody { display: flex; flex-direction: column; flex: 1 1 auto; } /* Person/Study/Video reuse the app's own narrow-width ("phone") card layout — image stacked on top, full width, instead of the wider-screen side-by-side split — since a 3-up desktop grid column is narrower than even a phone card, and the side-by-side split (e.g. Person's 42%-width image column, Study's 36%) crops badly at that width. Story already stacks this way at every width, so this just brings the other two card types in line with it, and re-evens all three to the same image height for a uniform grid instead of three different card proportions. */ #hdDiscoverGrid .landingTodayFeedCard--person .landingTodayFeedBody, #hdDiscoverGrid .landingTodayFeedCard--study .landingTodayFeedBody, #hdDiscoverGrid .landingTodayFeedCard--video .landingTodayFeedBody { display: block; } #hdDiscoverGrid .landingTodayFeedCard--person .landingTodayFeedImgWrap, #hdDiscoverGrid .landingTodayFeedCard--study .landingTodayFeedImgWrap, #hdDiscoverGrid .landingTodayFeedCard--video .landingTodayFeedImgWrap { width: 100%; min-height: 0; } #hdDiscoverGrid .landingTodayFeedCard--person .landingTodayFeedImg, #hdDiscoverGrid .landingTodayFeedCard--story .landingTodayFeedImg, #hdDiscoverGrid .landingTodayFeedCard--study .landingTodayFeedImg, #hdDiscoverGrid .landingTodayFeedCard--video .landingTodayFeedImg { height: 156px; min-height: 0; margin-bottom: 0; border-radius: 0; } #hdDiscoverGrid .landingTodayFeedCard--person .landingTodayFeedContent, #hdDiscoverGrid .landingTodayFeedCard--story .landingTodayFeedContent, #hdDiscoverGrid .landingTodayFeedCard--study .landingTodayFeedContent, #hdDiscoverGrid .landingTodayFeedCard--video .landingTodayFeedContent { padding: 12px 16px 16px; flex: 1 1 auto; display: flex; flex-direction: column; } #hdDiscoverGrid .landingTodayFeedCard--person .landingTodayFeedTitle, #hdDiscoverGrid .landingTodayFeedCard--story .landingTodayFeedTitle { font-size: 17px; padding-right: 30px; margin-bottom: 4px; } #hdDiscoverGrid .landingTodayFeedCard--study .landingTodayFeedTitle, #hdDiscoverGrid .landingTodayFeedCard--video .landingTodayFeedTitle { font-size: 16px; line-height: 1.2; padding-right: 0; } #hdDiscoverGrid .landingTodayFeedExcerpt { font-size: 13px; line-height: 1.4; } #hdDiscoverGrid .landingTodayFeedReadMore, #hdDiscoverGrid .landingTodayFeedActionsRow { margin-top: auto; padding-top: 8px; } #hdDiscoverGrid .landingTodayFeedCard--study .landingTodayFeedActionsRow, #hdDiscoverGrid .landingTodayFeedCard--video .landingTodayFeedActionsRow { display: flex; align-items: center; gap: 10px; } #hdDiscoverGrid .landingTodayLabel { padding: 12px 16px 0; margin-bottom: 0; } /* Full-width banner, not squeezed into the 3-up grid — the mobile/v2Design --study card's own native 36%/64% image/content split (see Index.html's own CSS) already looks right at this width, so nothing needs stacking or resizing here, unlike the Discover grid cards above. */ #hdContinueJourneyPanel { margin-top: 16px; } #hdContinueJourneyPanel .landingTodayFeedCard { margin: 0; } .hdSidePanel { background: #fff; border: 1px solid rgba(24,39,66,.08); border-radius: 14px; padding: 18px; margin-bottom: 18px; } .hdSidePanel h3 { margin: 0 0 12px; color: var(--v2-green); font-family: 'Mongolian Baiti', 'Playfair Display', serif; font-size: 16px; } /* ---------- Streak / "Your rhythm" panel ---------- */ .hdStreakHeader { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .hdStreakNumber { font-size: 30px; font-weight: 800; color: var(--v2-green); line-height: 1; } .hdStreakLabel { color: var(--v2-muted); font-size: 13px; font-weight: 700; } .hdStreakSub { color: var(--v2-muted); font-size: 12.5px; margin: 2px 0 14px; } .hdWeekRow { display: flex; justify-content: space-between; gap: 6px; } .hdWeekDay { display: flex; flex-direction: column; align-items: center; gap: 6px; } .hdWeekDayLabel { font-size: 10.5px; font-weight: 700; color: var(--v2-muted); text-transform: uppercase; } .hdWeekDayDot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(24,39,66,.06); color: var(--v2-muted); font-size: 13px; } .hdWeekDayDot.hdWeekDayDone { background: var(--v2-gold); color: #fff; } .hdWeekDay.hdWeekDayToday .hdWeekDayLabel { color: var(--v2-green); } .hdWeekDay.hdWeekDayToday .hdWeekDayDot:not(.hdWeekDayDone) { box-shadow: inset 0 0 0 2px var(--v2-green); } /* ---------- Continue reading panel ---------- */ #hdContinueReadingPanel { cursor: pointer; } #hdContinueReadingPanel:hover { box-shadow: 0 8px 20px rgba(24,39,66,.1); } .hdContinueRef { color: var(--v2-ink); font-weight: 700; font-size: 15px; } .hdContinueTrack { height: 6px; border-radius: 999px; background: rgba(24,39,66,.08); margin: 10px 0 6px; overflow: hidden; } .hdContinueTrack span { display: block; height: 100%; background: var(--v2-gold); } .hdContinueMeta { color: var(--v2-muted); font-size: 12px; } /* ---------- Dark mode ---------- */ body.darkMode #hdTopBar { background: var(--dm-panel); border-bottom-color: var(--dm-line); } body.darkMode .hdSectionHeaderRow h2, body.darkMode .hdSidePanel h3, body.darkMode .hdStreakNumber { color: var(--dm-gold); } body.darkMode .hdTopBarSearch { background: rgba(247,236,213,.06); border-color: var(--dm-line); color: var(--dm-ink-muted); } body.darkMode .hdTopBarIconBtn, body.darkMode .hdTopBarAvatarBtn { color: var(--dm-ink); } body.darkMode.v2Design #landingOverlay.show { background: var(--dm-bg); } body.darkMode .hdSidePanel { background: var(--dm-panel); border-color: var(--dm-line); } body.darkMode .hdContinueRef { color: var(--dm-ink); } body.darkMode .hdWeekDayDot { background: rgba(247,236,213,.08); color: var(--dm-ink-muted); } body.darkMode .hdWeekDay.hdWeekDayToday .hdWeekDayDot:not(.hdWeekDayDone) { box-shadow: inset 0 0 0 2px var(--dm-gold); } /* .landingTodayFeedCard--started .landingTodayLabel ("Continue your journey") has no dark-mode color anywhere in the app's own mobile CSS — it's always been plain var(--v2-green) (dark navy), fine on mobile's white card but low-contrast once this panel sits on a dark page background here. Fixed narrowly in this file (not the shared mobile rule) to keep this fix's blast radius limited to what this session actually verified. */ body.darkMode #hdContinueJourneyPanel .landingTodayFeedCard--started .landingTodayLabel { color: var(--dm-gold); } }