/* ───────────────────────────────────────────────────────────────────────────── HeadRoomDaily — App Styles (consolidated & optimized) - Dark by default via CSS variables - Light mode via .light-mode (supported on or ) - Desktop: sidebar pinned; Mobile: drawer with toggle - Mobile: single feed column, sticky header, proper 100dvh sizing - All visuals preserved from your current build ──────────────────────────────────────────────────────────────────────────── */ /* ========== 0) Base reset & tokens ========== */ *, *::before, *::after { box-sizing: border-box; } :root { /* Layout */ --nav-h: 71px; /* desktop navbar height */ /* Surfaces */ --color-background-primary: #000; --color-background-secondary: #121214; --color-background-tertiary: #0d0d0d; --color-background-hover: #1f1f1f; --color-background-interactive: #333; --color-background-dropdown: #1a1a1a; --color-overlay-background: rgba(0,0,0,0.35); /* Text */ --color-text-primary: #a7a7a7; --color-text-secondary: #e0e0e0; --color-text-accent: #ffffff; --color-text-muted: #888; --color-text-subtle: #666; /* Borders & shadows */ --color-border-primary: #222; --color-border-secondary: #555; --color-border-interactive: #333; --color-border-active: #3d3d3d; --color-shadow-primary: rgba(0,0,0,0.15); /* Brand */ --color-brand-pink: #ff3269; --color-brand-purple: #8c00ff; --color-shadow-purple: rgba(140,0,255,0.5); /* Skeleton */ --color-skeleton-base: #232323; --color-skeleton-highlight: #2c2c2c; } /* Support .light-mode on either or */ html.light-mode, body.light-mode { --color-background-primary: #ffffff; --color-background-secondary: #f7f7f7; --color-background-tertiary: #f0f0f0; --color-background-hover: #e9e9e9; --color-background-interactive: #e0e0e0; --color-background-dropdown: #fdfdfd; --color-overlay-background: rgba(255,255,255,0.5); --color-text-primary: #555; --color-text-secondary: #333; --color-text-accent: #000; --color-text-muted: #777; --color-text-subtle: #999; --color-border-primary: #e0e0e0; --color-border-secondary: #ccc; --color-border-interactive: #ccc; --color-border-active: #e0e0e0; --color-shadow-primary: rgba(0,0,0,0.08); --color-skeleton-base: #e0e0e0; --color-skeleton-highlight: #f5f5f5; } /* ========== 1) Global base ========== */ body { background-color: var(--color-background-primary); color: var(--color-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14px; margin: 0; overflow: hidden; /* internal panes manage scroll */ } a { color: var(--color-text-primary); text-decoration: none; } a:hover { color: var(--color-text-accent); } ul { list-style: none; margin: 0; padding: 0; } h4 { margin: 20px 0 10px; color: var(--color-text-accent); font-size: 14px; font-weight: 700; text-transform: uppercase; } button { font-family: inherit; } /* ========== 2) Navbar ========== */ .navbar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 15px 25px; background: var(--color-background-primary); color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary); z-index: 100; } .navbar .logo { display: flex; align-items: center; gap: 8px; } .logo .st0 { fill: var(--color-text-accent); } .beta-logo { color: var(--color-text-accent); font-weight: 700; font-size: 18px; } .navbar-links ul { display: flex; align-items: center; gap: 20px; } .navbar-links button { background: none; border: none; cursor: pointer; color: var(--color-text-primary); font-size: 16px; } .navbar-links button:hover { color: var(--color-text-accent); } #auth-container .menu-link { color: var(--color-text-primary); font-size: 14px; } .menu-link-email { pointer-events: none; text-decoration: none; } .button-pink { background: var(--color-brand-pink) !important; color: #fff !important; border: none; border-radius: 50px !important; padding: 9px 15px !important; cursor: pointer; } /* Small, modern auth icon (mobile) */ .auth-icon-btn { display: none; /* shown on mobile below */ background: transparent; border: 1px solid var(--color-border-primary); color: var(--color-text-primary); width: 36px; height: 36px; border-radius: 9px; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .08s ease; } .auth-icon-btn:hover { background: var(--color-background-hover); border-color: var(--color-border-secondary); color: var(--color-text-accent); } .auth-icon-btn:active { transform: translateY(1px); } /* ========== 3) App layout shell ========== */ .wrapper { display: flex; height: calc(100dvh - var(--nav-h)); } /* ========== 4) Left Sidebar (desktop pinned, mobile drawer) ========== */ .left-nav { width: 250px; background: var(--color-background-secondary); border-right: 1px solid var(--color-border-primary); transition: width .3s ease; flex-shrink: 0; overflow: hidden; } #left-nav-container { height: 100%; display: flex; flex-direction: column; } /* Desktop collapse support (unused on mobile) */ .left-nav.collapsed { width: 0; overflow: hidden; } /* Sidebar header (Sources / Read Later tabs) */ .sidebar-header { display: flex; flex-shrink: 0; padding: 10px 20px 5px; background: var(--color-background-secondary); border-bottom: 1px solid var(--color-border-primary); } .sidebar-toggle-btn { flex: 1; background: none; border: none; cursor: pointer; color: var(--color-text-subtle); font-size: 12px; font-weight: 400; text-transform: uppercase; padding: 8px 5px; transition: color .2s ease; position: relative; } .sidebar-toggle-btn:hover { color: var(--color-text-primary); } .sidebar-toggle-btn.active { color: var(--color-text-accent); } .unread-badge { position: absolute; top: 50%; right: -5px; transform: translateY(-50%); color: var(--color-text-primary); font-size: 10px; font-weight: 700; padding: 2px 5px; line-height: 1; border-radius: 50px; } /* Sidebar content area */ .sidebar-content { flex: 1; min-height: 0; overflow-y: auto; position: relative; } .sidebar-empty-state { padding: 20px; text-align: center; font-size: 13px; color: var(--color-text-subtle); } /* Sidebar: source search + categories */ .left-nav-search-container { position: sticky; top: 0; z-index: 10; padding: 15px 20px; background: var(--color-background-secondary); } #source-search { width: 100%; padding: 8px 10px; border-radius: 4px; box-sizing: border-box; background: var(--color-background-tertiary); border: 1px solid var(--color-border-interactive); color: var(--color-text-secondary); font-size: 14px; font-family: inherit; } #source-search::placeholder { color: var(--color-text-subtle); } #source-search:focus { outline: none; border-color: var(--color-brand-purple); box-shadow: 0 0 5px var(--color-shadow-purple); } .category-group { padding: 0 20px 10px; } .category-group summary { padding: 0 0 10px 5px; cursor: pointer; color: var(--color-text-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; } .left-nav-ul { padding-left: 10px; } /* Sidebar: source rows */ .source-list-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 4px; font-size: 14px; transition: background-color .2s ease; } .source-list-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; } .source-toggle { background: transparent; border: none; border-radius: 4px; width: 22px; height: 22px; flex-shrink: 0; margin-left: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease-in-out; } .source-toggle i { font-size: 10px; line-height: 1; color: var(--color-text-subtle); transition: color .2s ease; } .source-list-item:not(.in-library):hover { background: var(--color-background-hover); } .source-list-item:not(.in-library):hover .source-toggle { background: var(--color-background-interactive); } .source-list-item:hover .source-toggle i { color: var(--color-text-accent); } .source-list-item.in-library { background: var(--color-background-hover); color: var(--color-text-accent); } .source-list-item.in-library .source-toggle i { color: var(--color-text-primary); } .source-list-item.in-library:hover .source-toggle { background: var(--color-background-interactive); } .source-list-item.in-library:hover .source-toggle i { color: var(--color-brand-pink); } /* Read-later list inside sidebar */ .left-nav-ul-later { padding: 15px 20px; } .left-nav-ul-later li { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; padding: 10px 8px; border-radius: 6px; overflow: hidden; max-height: 100px; transition: background-color .2s ease, opacity .25s ease, max-height .3s ease, transform .18s ease; } .left-nav-ul-later li:hover { background: var(--color-background-hover); } .left-nav-ul-later li.fade-out { opacity: 0; transform: translateY(2px); } .later-item-details { display: flex; flex-direction: column; overflow: hidden; margin-right: 10px; } .later-item-details a.later-item-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; min-height: calc(1.4em * 2); } .later-item-title { color: var(--color-text-primary); font-weight: 500; } .later-item-title:hover { color: var(--color-text-accent); } .later-item-metadata { font-size: 11px; color: var(--color-text-subtle); } .left-nav-ul-later li.read .later-item-title { color: var(--color-text-subtle); text-decoration: line-through; } .left-nav-ul-later li.read .later-item-title:hover { color: var(--color-text-muted); text-decoration: line-through; } .later-item-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; opacity: 0; transition: opacity .2s ease; } .left-nav-ul-later li:hover .later-item-actions { opacity: 1; } .later-item-actions a { color: var(--color-text-muted); font-size: 13px; } .later-item-actions a:hover { color: var(--color-text-accent); } button[data-locked="true"] { opacity: .4; cursor: not-allowed; } /* ========== 5) Main content area & grid ========== */ .container { flex: 1 1 auto; padding: 20px; overflow-y: auto; } /* --- "Focus View" (Responsive Single Row with fixed track counts) --- */ .container.layout-3-col .grid-container { display: grid; gap: 20px; height: 100%; /* Default to TWO columns to avoid squish on narrower desktops */ grid-template-columns: repeat(2, 1fr); align-items: stretch; } .container.layout-3-col .feed-column { display: none; height: calc(100dvh - var(--nav-h) - 40px); } /* Only show first 3 by default */ .container.layout-3-col .feed-column { display: none; height: calc(100dvh - var(--nav-h) - 40px); } .container.layout-3-col .feed-column[data-feed-index="0"], .container.layout-3-col .feed-column[data-feed-index="1"] { display: flex; } .container.layout-3-col .feed-column[data-feed-index="2"] { display: flex; } /* Bump to THREE columns at ~1280px */ @media (min-width: 1280px) { .container.layout-3-col .grid-container { grid-template-columns: repeat(3, 1fr); } .container.layout-3-col .feed-column[data-feed-index="2"] { display: flex; } } /* FOUR columns at 1500px */ @media (min-width: 1600px) { .container.layout-3-col .grid-container { grid-template-columns: repeat(4, 1fr); } .container.layout-3-col .feed-column[data-feed-index="3"] { display: flex; } } /* FIVE at 2000px */ @media (min-width: 2000px) { .container.layout-3-col .grid-container { grid-template-columns: repeat(5, 1fr); } .container.layout-3-col .feed-column[data-feed-index="4"] { display: flex; } } /* SIX at 2400px */ @media (min-width: 2400px) { .container.layout-3-col .grid-container { grid-template-columns: repeat(6, 1fr); } .container.layout-3-col .feed-column[data-feed-index="5"] { display: flex; } } /* --- "Grid View" (Always Two Rows) --- */ .container.layout-6-col .grid-container { display: grid; gap: 20px; height: 100%; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); /* default 2×2 (4 cards) */ } .container.layout-6-col .feed-column { display: none; min-height: 0; } /* Default show 4 (2×2) */ .container.layout-6-col .feed-column[data-feed-index="0"], .container.layout-6-col .feed-column[data-feed-index="1"], .container.layout-6-col .feed-column[data-feed-index="2"], .container.layout-6-col .feed-column[data-feed-index="3"] { display: flex; } /* NEW STEP: 3×2 (6) on small desktop */ @media (min-width: 1300px) { .container.layout-6-col .grid-container { grid-template-columns: repeat(3, 1fr); } .container.layout-6-col .feed-column[data-feed-index="4"], .container.layout-6-col .feed-column[data-feed-index="5"] { display: flex; } } /* 4×2 (8) on medium screens */ @media (min-width: 1600px) { .container.layout-6-col .grid-container { grid-template-columns: repeat(4, 1fr); } .container.layout-6-col .feed-column[data-feed-index="6"], .container.layout-6-col .feed-column[data-feed-index="7"] { display: flex; } } /* 5×2 (10) on large */ @media (min-width: 2000px) { .container.layout-6-col .grid-container { grid-template-columns: repeat(5, 1fr); } .container.layout-6-col .feed-column[data-feed-index="8"], .container.layout-6-col .feed-column[data-feed-index="9"] { display: flex; } } /* 6×2 (12) on ultrawide */ @media (min-width: 2400px) { .container.layout-6-col .grid-container { grid-template-columns: repeat(6, 1fr); } .container.layout-6-col .feed-column[data-feed-index="10"], .container.layout-6-col .feed-column[data-feed-index="11"] { display: flex; } } /* --- Mobile View Override (Unchanged and Preserved for Safety) --- */ @media (max-width: 920px) { .container .grid-container { grid-template-columns: 1fr !important; display: grid !important; /* Ensure it's always a grid on mobile */ overflow-x: hidden !important; } .container.layout-3-col .feed-column, .container.layout-6-col .feed-column { display: none !important; } .container .feed-column[data-feed-index="0"] { display: flex !important; height: calc(100dvh - var(--nav-h) - 40px) !important; } } /* ========== 6) Feed column ========== */ .feed-column { background: var(--color-background-tertiary); border: 1px solid var(--color-border-primary); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; position: relative; } .feed-header { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid var(--color-border-primary); flex-shrink: 0; } .feed-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; } .select-wrapper { flex: 1; } .feed-select { -webkit-appearance: none; appearance: none; background: transparent; border: none; width: 100%; color: var(--color-text-secondary); font-size: 14px; font-weight: 700; outline: none; cursor: pointer; } .feed-select option, .feed-select optgroup { background: var(--color-background-dropdown); color: var(--color-text-secondary); font-weight: 400; } .feed-content { padding: 15px; overflow-y: auto; flex: 1 1 auto; } .feed-item { display: flex; align-items: center; gap: 15px; margin-bottom: 2px; padding: 8px; border-radius: 6px; transition: background-color .2s ease; } .feed-item:hover { background: var(--color-background-hover); } .item-rank { min-width: 20px; text-align: right; color: var(--color-text-muted); font-weight: 700; } .item-details { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .item-details > a.feed-item-link { color: var(--color-text-primary); font-weight: 500; margin-bottom: 4px; line-height: 1.35; } .item-details > a.feed-item-link:hover { color: var(--color-text-accent); } .item-metadata { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 11px; color: var(--color-text-subtle); } .item-metadata .meta-left { display: inline-flex; align-items: center; gap: 6px; } .item-metadata .meta-actions { display: inline-flex; align-items: center; gap: 10px; } .item-metadata .morph-open-toggle { display: inline-flex; align-items: center; color: var(--color-text-primary); text-decoration: none; } .item-metadata .morph-open-toggle:hover { color: var(--color-text-accent); } .item-metadata .morph-open-toggle svg { width: 14px; height: 14px; opacity: .85; } .item-metadata .morph-open-toggle:hover svg { opacity: 1; } .feed-item.read .item-details a { color: var(--color-text-subtle); font-weight: 400; } .feed-item.read .item-details a:hover { color: var(--color-text-muted); } /* ========== 7) Login / Onboarding cards ========== */ .login-container, .onboarding-container { color: var(--color-text-primary); background: var(--color-background-secondary); text-align: center; padding: 50px; max-width: 800px; margin: 100px auto; border-radius: 8px; } .login-container h2, .onboarding-container h2 { color: var(--color-text-accent); } .login-container input[type='email'] { width: 250px; padding: 10px; margin-right: 10px; border-radius: 5px; background: var(--color-background-interactive); border: 1px solid var(--color-border-secondary); color: var(--color-text-accent); } .packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; } .pack-card { background: var(--color-background-tertiary); border: 1px solid var(--color-border-primary); padding: 20px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .pack-card h3 { color: var(--color-text-accent); margin: 0; } .pack-card p { flex: 1 1 auto; } .feed-column.empty .select-wrapper { border: 2px dashed var(--color-border-interactive); } /* ========== 8) Morph overlay (article preview) ========== */ .morph-overlay { position: absolute; inset: 0; z-index: 20; overflow: hidden; contain: layout paint; visibility: hidden; pointer-events: none; } .morph-overlay.is-open { visibility: visible; pointer-events: auto; } .morph-overlay__bg { position: absolute; inset: 0; border-radius: 8px; background: var(--color-background-hover); transform-origin: top left; will-change: transform, border-radius; transition: transform 420ms cubic-bezier(.22,.75,.15,1), border-radius 420ms cubic-bezier(.22,.75,.15,1); } .feed-column.morph-dim > .feed-content, .feed-column.morph-dim > .feed-header { filter: opacity(.6) saturate(.9); transition: filter 240ms ease; } .morph-close { position: absolute; top: 8px; right: 8px; z-index: 21; width: 26px; height: 26px; line-height: 24px; text-align: center; background: var(--color-overlay-background); border: 1px solid var(--color-border-primary); color: var(--color-text-primary); font-size: 14px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity 160ms ease; } .morph-overlay.is-open .morph-close { opacity: 1; } .morph-close:hover { color: var(--color-text-accent); } .morph-preview { position: absolute; inset: 16px; display: grid; grid-template-rows: 1fr auto; gap: 12px; width: calc(100% - 32px); height: calc(100% - 32px); overflow: hidden; } .morph-preview__text { min-height: 0; overflow: auto; padding-right: 6px; color: var(--color-text-accent); font-size: 13px; line-height: 1.5; } .preview-title { margin: 0 0 10px; font-size: 1.2rem; font-weight: 300; letter-spacing: .2px; line-height: 1.35; } p.preview-summary { margin: 0; } .preview-published { margin: 0 0 10px; font-size: 12px; color: var(--color-text-primary); opacity: .85; } .preview-keypoints-title { display: flex; align-items: center; margin: 14px 0 6px; font-size: .95rem; font-weight: 600; } .kp-icon { width: 22px; height: 22px; opacity: .85; color: currentColor; } .preview-keypoints { margin: 4px 0 0; padding: 0; list-style: none; } .preview-keypoints li { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; line-height: 1.45; } .preview-keypoints li .kp-dash { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-weight: 700; color: var(--color-text-primary); opacity: .6; transform: translateY(1px); } .preview-footer { align-self: end; justify-self: end; } .preview-read-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; text-decoration: none; background: var(--color-button-background); color: var(--color-text-accent); transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; } .preview-read-link:hover, .preview-read-link:focus-visible { background: var(--color-background-primary); transform: translateY(-1px); } .preview-read-link .read-icon { width: 18px; height: 18px; color: currentColor; } /* Skeleton shimmer for keypoints */ @keyframes kpDarkShimmer { 0% { background-position: -240px 0; } 100% { background-position: calc(240px + 100%) 0; } } .preview-keypoints.kp-placeholder { margin: 8px 0 0; } .preview-keypoints.kp-placeholder li { margin: 8px 0; opacity: .95; } .kp-placeholder .kp-dash { opacity: .35; } .kp-placeholder .kp-skel-line { display: inline-block; width: 80%; height: .78em; border-radius: 6px; background: linear-gradient(90deg, var(--color-skeleton-base) 20%, var(--color-skeleton-highlight) 35%, var(--color-skeleton-base) 60%) !important; background-size: 240px 100% !important; animation: kpDarkShimmer 1.1s ease-in-out infinite !important; } /* ========== 9) Intent tags ========== */ .intent-tag { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: .5px; } .intent-tag--tutorial { background: #2a3d52; color: #8cb4e6; } .intent-tag--deal { background: #2e473d; color: #8de4b5; } .intent-tag--release { background: #4b3d52; color: #c999e6; } .intent-tag--news { background: var(--color-background-interactive); color: var(--color-text-subtle); } html.light-mode .intent-tag--tutorial, body.light-mode .intent-tag--tutorial { background: #e0eaf6; color: #2a3d52; } html.light-mode .intent-tag--deal, body.light-mode .intent-tag--deal { background: #dff6e9; color: #1e4731; } html.light-mode .intent-tag--release, body.light-mode .intent-tag--release { background: #f3e6f9; color: #4b3d52; } html.light-mode .intent-tag--news, body.light-mode .intent-tag--news { background: var(--color-background-interactive); color: var(--color-text-subtle); } /* ========== 10) Modal (Auth) ========== */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out; } .modal-overlay.is-visible { opacity: 1; pointer-events: auto; } .modal-container { position: relative; width: 90%; max-width: 500px; padding: 40px; background: var(--color-background-secondary); border: 1px solid var(--color-border-primary); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.2); transform: scale(.95); transition: transform .3s ease-in-out; } .modal-overlay.is-visible .modal-container { transform: scale(1); } .modal-close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; cursor: pointer; color: var(--color-text-subtle); font-size: 20px; transition: color .2s ease; } .modal-close-btn:hover { color: var(--color-text-accent); } .modal-container h2 { margin-top: 0; color: var(--color-text-accent); } .modal-container p { color: var(--color-text-primary); } .modal-container input[type='email'] { width: 250px; padding: 10px; margin-right: 10px; border-radius: 5px; background: var(--color-background-interactive); border: 1px solid var(--color-border-secondary); color: var(--color-text-accent); } /* Google button */ .google-signin-btn { width: 100%; margin-bottom: 15px; padding: 10px; display: flex; align-items: center; justify-content: center; background: #131314; color: #e3e3e3; border: 1px solid #8e918f; border-radius: 4px; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; transition: background-color .2s ease, border-color .2s ease; } .google-signin-btn:hover { background: #1d212d; border-color: #98aee1; } .google-signin-btn:focus { outline: 2px solid #86a3d9; outline-offset: 2px; } html.light-mode .google-signin-btn, body.light-mode .google-signin-btn { background: #ffffff; color: #1f1f1f; border-color: #747775; } html.light-mode .google-signin-btn:hover, body.light-mode .google-signin-btn:hover { background: #f7fafe; border-color: #d2e3fc; } html.light-mode .google-signin-btn:focus, body.light-mode .google-signin-btn:focus { outline: 2px solid #c8dcf8; } .google-signin-btn svg { width: 18px; height: 18px; margin-right: 12px; } /* Divider */ .modal-divider { display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); font-size: 12px; margin: 20px 0; } .modal-divider::before, .modal-divider::after { content: ''; flex: 1 1 auto; border-bottom: 1px solid var(--color-border-primary); } .modal-divider:not(:empty)::before { margin-right: .5em; } .modal-divider:not(:empty)::after { margin-left: .5em; } /* Email/password form */ .auth-form-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; } #auth-form { display: flex; flex-direction: column; gap: 5px; align-items: center; } #auth-password-input { width: 250px; padding: 10px; border-radius: 5px; background: var(--color-background-interactive); border: 1px solid var(--color-border-secondary); color: var(--color-text-accent); font-size: 14px; font-family: inherit; } #auth-password-input:focus { outline: none; border-color: var(--color-brand-purple); box-shadow: 0 0 5px var(--color-shadow-purple); } .auth-error { color: #ff5555; font-size: 12px; margin: -10px 0 10px; min-height: 1.2em; text-align: left; } .auth-footer { text-align: center; margin-top: 20px; font-size: 13px; } .auth-footer p, .auth-footer a { color: var(--color-text-subtle); } .auth-footer a { text-decoration: underline; cursor: pointer; } .auth-footer a:hover { color: var(--color-text-accent); } .auth-alternative-link { display: block; margin-top: 10px; } /* ========== 11) Center Loader (audio bars) ========== */ .loader-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: rgba(0,0,0,.35); backdrop-filter: blur(1px); opacity: 0; pointer-events: none; transition: opacity 160ms ease; } .loader-overlay.is-visible { opacity: 1; pointer-events: auto; } .loader { display: inline-flex; align-items: flex-end; gap: 4px; height: 28px; } .loader .bar { width: 3px; height: 12px; border-radius: 2px; background: var(--color-text-accent, #fff); opacity: .85; animation: wave 900ms ease-in-out infinite; transform-origin: 50% 100%; } .loader .bar:nth-child(1){animation-delay:0ms} .loader .bar:nth-child(2){animation-delay:80ms} .loader .bar:nth-child(3){animation-delay:160ms} loader .bar:nth-child(4){animation-delay:240ms} .loader .bar:nth-child(5){animation-delay:320ms} .loader .bar:nth-child(6){animation-delay:400ms} .loader .bar:nth-child(7){animation-delay:480ms} @keyframes wave { 0%,100%{transform:scaleY(.5);opacity:.7} 50%{transform:scaleY(1);opacity:1} } html.light-mode .loader .bar, body.light-mode .loader .bar { background: var(--color-text-accent, #000); opacity: .9; } /* ========== 12) Reduced motion ========== */ @media (prefers-reduced-motion: reduce) { .left-nav-ul-later li { transition: none; } .left-nav-ul-later li.fade-out { opacity: 0; transform: none; } .morph-overlay__bg { transition: none !important; } .feed-column.morph-dim > .feed-content { transition: none !important; } .preview-read-link { transition: none; } .kp-placeholder .kp-skel-line { animation: none !important; } } /* ========== 13) Mobile (≤ 768px): compact UI & single column ========== */ @media (max-width: 768px) { :root { --nav-h: 56px; } /* mobile navbar */ .navbar { position: sticky; top: 0; z-index: 100; height: var(--nav-h); padding: 10px 14px; } /* Hide layout selectors on mobile (1 col view) */ .navbar-links .layout-toggle { display: none !important; } /* Auth: show icon, hide big CTA */ #auth-container .button-pink { display: none !important; } #auth-container .auth-icon-btn { display: inline-flex; } /* Drawer toggle button (mobile visible) */ #sidebar-toggle.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: transparent; color: var(--color-text-primary); z-index: 1002; } /* Sidebar becomes off-canvas drawer */ .left-nav { position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: 88vw; max-width: 320px; height: auto; transform: translateX(-100%); transition: transform .25s ease; z-index: 1001; box-shadow: 0 0 40px rgba(0,0,0,.4); } .left-nav.open { transform: translateX(0); } .left-nav.collapsed { transform: translateX(-100%); } /* ignore desktop collapse on mobile */ /* Scrim behind drawer */ .nav-scrim { position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1000; } body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; } /* Main container: single column & tighter spacing */ .container { padding: 10px; overflow: hidden; } /* column scrolls */ .container .grid-container { grid-template-columns: 1fr !important; gap: 10px; } /* Force-hide all columns except first, regardless of layout mode */ .container.layout-3-col .feed-column, .container.layout-6-col .feed-column { display: none !important; } .container .feed-column[data-feed-index="0"] { display: flex !important; } /* Full-height single column with sticky header */ .feed-column { height: calc(100dvh - var(--nav-h)) !important; } .feed-header { position: sticky; top: 0; z-index: 1; background: var(--color-background-tertiary); padding: 8px 10px; gap: 8px; } .feed-logo { width: 18px; height: 18px; } .feed-content { padding: 10px; overflow-y: auto; } /* Comfortable tap targets */ .feed-item { gap: 12px; padding: 10px; } .item-details > a.feed-item-link { font-size: 15px; line-height: 1.4; } .item-metadata { font-size: 12px; } /* Onboarding/login cards edge-to-edge */ .login-container, .onboarding-container { margin: 0; padding: 16px; width: 100%; border-radius: 0; } .packs-grid { grid-template-columns: 1fr; gap: 12px; } /* Inputs stretch */ .login-container input[type='email'], #auth-password-input { width: 100%; max-width: 100%; } /* Modal sizing */ .modal-container { width: 80vw; max-width: 80vw; padding: 24px; top: -10vh; } /* Morph full-bleed */ .morph-overlay__bg { border-radius: 0; } .morph-preview { inset: 12px; height: calc(100% - 24px); } .preview-read-link { position: sticky; bottom: env(safe-area-inset-bottom, 0); } /* Sidebar header spacing */ .sidebar-header { padding: 8px 12px 6px; } .left-nav-search-container { padding: 12px; } #source-search { font-size: 14px; } /* Read-later rows tap-friendly */ .left-nav-ul-later li { padding: 12px 10px; } } /* ========== 14) Desktop / Large tablets (≥ 1024px) ========== */ @media (min-width: 1024px) { /* Hide drawer toggle on desktop/tablet */ #sidebar-toggle { display: none !important; } /* Sidebar pinned and static */ .left-nav { position: relative; top: 0; left: 0; bottom: auto; width: 250px; height: auto; transform: none !important; box-shadow: none; z-index: 1; } .nav-scrim { display: none !important; } body.nav-open { overflow: auto; } } /* ========== 15) Utilities ========== */ .is-hidden { display: none !important; } /* End of file */ .layout-toggle { transition: background-color 0.2s ease; /* Ensure smooth transition */ } .layout-toggle:hover { background-color: var(--color-background-hover); } /* 2. Style the user dropdown and logout link */ .user-dropdown { display: flex; align-items: center; } #sign-out-btn { margin-left: 12px; /* Adds separation from the user email */ color: var(--color-text-subtle); /* Makes the text more subtle */ font-size: 13px; transition: color 0.2s ease; } #sign-out-btn:hover { color: var(--color-text-accent); /* White/black hover effect */ } /* 3. Ensure theme toggle icons are properly sized */ .theme-toggle i { font-size: 18px; /* Adjust size as needed */ width: 24px; /* Ensure consistent layout spacing */ text-align: center; }