/* ───────────────────────────────────────────────────────────────────────────── HeadRoomDaily — App Styles (consolidated & optimized) ──────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } :root { /* Layout */ --nav-h: 71px; /* 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); --color-brand-blue: #5595f5; --color-shadow-blue: rgba(85, 149, 245, 0.4); /* 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; } 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: 0 25px; /* Adjusted padding */ background: var(--color-background-primary); color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-primary); z-index: 100; } /* --- NEW LOGO STYLES --- */ .navbar .logo { display: flex; align-items: center; gap: 16px; /* Space between Hamburger and Brand */ } .brand-wrapper { display: flex; align-items: center; gap: 12px; /* Space between Icon and Text */ color: var(--color-text-accent); /* Forces White in Dark, Black in Light */ text-decoration: none; } .brand-logo-svg { height: 26px; /* Precise sizing */ width: auto; display: block; fill: currentColor; /* Inherits from brand-wrapper color */ } .brand-text-group { display: flex; align-items: baseline; gap: 6px; } .brand-name { font-size: 22px; font-weight: 800; /* Heavy weight for modern look */ letter-spacing: -0.5px; /* Tighter tracking */ line-height: 1; color: inherit; } .brand-version { font-size: 10px; font-weight: 500; color: var(--color-text-subtle); transform: translateY(-2px); /* Slight alignment adjustment */ } /* Navbar Links */ .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); } .button-pink { background: var(--color-brand-pink) !important; color: #fff !important; border: none; border-radius: 50px !important; padding: 9px 15px !important; cursor: pointer; } /* Small auth icon (mobile) */ .auth-icon-btn { display: none; 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); } /* ========== 3) App layout shell ========== */ .wrapper { display: flex; height: calc(100dvh - var(--nav-h)); } /* ========== 4) Left Sidebar ========== */ .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; /* FIX: Ensure NO shadow on desktop by default */ box-shadow: none !important; } #left-nav-container { height: 100%; display: flex; flex-direction: column; } /* Sidebar header */ .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 */ .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:focus { outline: none; border-color: var(--color-brand-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 items (Sources) */ .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.in-library { background: var(--color-background-hover); color: var(--color-text-accent); } /* Sidebar Read-later */ .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; } .left-nav-ul-later li:hover { background: var(--color-background-hover); } .later-item-details { display: flex; flex-direction: column; overflow: hidden; margin-right: 10px; } .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); } .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); } /* ========== 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[data-feed-index="0"], .container.layout-3-col .feed-column[data-feed-index="1"], .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); } } /* 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; /* FIX: Changed from hidden to visible so dropdowns can spill out */ overflow: visible; position: relative; transition: z-index 0s; /* Ensure instant layering changes */ } /* NEW: A container for the logo and select dropdown */ .feed-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; /* Prevents the select from overflowing */ } .feed-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; flex-shrink: 0; /* Prevent the logo from shrinking */ } .select-wrapper { flex: 1; position: relative; } .feed-select { -webkit-appearance: none; appearance: none; background: transparent; border: none; width: 100%; color: var(--color-text-secondary); font-size: 16px; line-height: 1.3; font-weight: 700; outline: none; cursor: pointer; padding-right: 5px; /* Ensure long text doesn't overlap the icon */ } /* For the empty state, we adjust the select wrapper to not take full width */ .feed-column.empty .feed-header-left { flex-grow: 1; } .feed-column.empty .select-wrapper { border: 2px dashed var(--color-border-interactive); border-radius: 6px; padding: 2px 4px; } /* NEW: Styles for the dropdown chevron icon */ .feed-header-icon { width: 20px; /* height: 20px; */ color: var(--color-text-subtle); flex-shrink: 0; transition: color 0.2s ease, transform 0.2s ease; } /* Add a subtle hover effect */ .feed-header:hover .feed-header-icon { color: var(--color-text-primary); } .feed-select option, .feed-select optgroup { background: var(--color-background-dropdown); color: var(--color-text-secondary); font-weight: 400; } .feed-content { padding: 10px; padding-top: 0px; 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: auto; 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'], .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); } .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; } /* ========== 8) Morph overlay (article preview) ========== */ .morph-overlay { position: fixed; /* <— important: fixed, not absolute */ inset: 0; z-index: 2000; /* stays above drawers / nav-scrim */ overflow: hidden; contain: layout paint; visibility: hidden; pointer-events: none; /* enabled only when .is-open */ } .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; /* FIXED: Bumped to 2001 to ensure it's clickable above the overlay bg */ z-index: 2002; 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; z-index: 2001; /* <— add this so it’s above the bg */ } .morph-preview__text { min-height: 0; overflow-y: auto; /* more explicit */ padding-right: 6px; color: var(--color-text-accent); font-size: 13px; line-height: 1.5; -webkit-overflow-scrolling: touch; /* smooth iOS scroll */ overscroll-behavior: contain; /* don’t “bubble” scroll to feed behind */ } .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: 3000; 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); } /* 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; } .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); } #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(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; } /* 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; pointer-events: none; } .morph-preview { inset: 12px; height: calc(100% - 24px); max-height: calc(100% - 24px); /* keep it within viewport */ } .morph-preview__text { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .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; } } @media (max-width: 920px) { :root { --nav-h: 56px; } .navbar { position: sticky; top: 0; z-index: 100; height: var(--nav-h); padding: 10px 14px; } .navbar-links .layout-toggle { display: none !important; } #auth-container .button-pink { display: none !important; } #auth-container .auth-icon-btn { display: inline-flex; } #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; /* FIX: Only show shadow when active on mobile */ box-shadow: 0 0 40px rgba(0,0,0,.4) !important; border-right: 1px solid var(--color-border-primary); } .left-nav.open { transform: translateX(0); } .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; } .container { padding: 10px; overflow: hidden; } .container .grid-container { grid-template-columns: 1fr !important; gap: 10px; } /* [Rest of Mobile styles remain unchanged] */ } /* ========== 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; } } @media (min-width: 921px) { #sidebar-toggle { display: none !important; } .left-nav { position: relative; top: 0; left: 0; bottom: auto; width: 250px; height: auto; transform: none !important; /* DOUBLE FIX: Enforce no shadow on desktop */ box-shadow: none !important; z-index: 1; } .nav-scrim { display: none !important; } } /* ========== 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; } /* ========== 16) NEW: Sidebar Footer & Settings ========== */ .sidebar-footer { margin-top: auto; /* Pushes the footer to the bottom */ padding: 8px; border-top: 1px solid var(--color-border-primary); position: relative; /* Anchor for the popovers */ } .sidebar-actions { display: flex; flex-direction: column; gap: 4px; } .sidebar-action-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; background: none; border: none; color: var(--color-text-primary); font-size: 14px; text-align: left; cursor: pointer; transition: background-color 0.2s ease; } .sidebar-action-item:hover { background-color: var(--color-background-hover); color: var(--color-text-accent); } .sidebar-action-item i { width: 18px; text-align: center; font-size: 16px; color: var(--color-text-subtle); } .sidebar-action-item .sidebar-avatar { width: 24px; height: 24px; border-radius: 50%; } .sidebar-action-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-footer-logged-out { padding: 15px; } .sidebar-footer-logged-out .button-pink { width: 100%; } /* --- Popovers --- */ .sidebar-popover { position: absolute; bottom: calc(100% + 8px); /* Position above the footer */ left: 8px; right: 8px; width: auto; background: var(--color-background-dropdown); border: 1px solid var(--color-border-secondary); border-radius: 8px; box-shadow: 0 8px 20px var(--color-shadow-primary); z-index: 10; padding: 8px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .sidebar-popover.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .popover-section { padding: 8px; } .popover-section:not(:last-child) { border-bottom: 1px solid var(--color-border-primary); } .popover-label { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-subtle); margin-bottom: 10px; } /* Theme Options */ .theme-options { display: flex; gap: 6px; } .theme-option { flex: 1 1 0; /* Allow shrinking */ min-width: 0; /* Allow shrinking below content size */ display: flex; align-items: center; justify-content: center; gap: 4px; /* REFINED: Reduced gap to save space */ padding: 6px; /* REFINED: Adjusted padding */ font-size: 13px; border-radius: 6px; border: 1px solid var(--color-border-interactive); /* REFINED: Give inactive buttons a subtle background to match the reference image */ background: var(--color-background-tertiary); color: var(--color-text-primary); cursor: pointer; /* REFINED: Removed box-shadow from transition */ transition: background-color 0.2s ease, border-color 0.2s ease; } .theme-option:hover { border-color: var(--color-border-secondary); } .theme-option.active { color: var(--color-text-accent); /* REFINED: Use the main page background to make it "pop" */ background-color: var(--color-background-primary); /* REFINED: Clean blue border, no glow */ border-color: var(--color-border-primary); /* REMOVED: No more box-shadow */ box-shadow: none; } .theme-option i { font-size: 16px; line-height: 1; } /* --- REFINED & FINAL Newsletter Toggle Styling --- */ .newsletter-toggle-wrap { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--color-text-primary); } .newsletter-toggle { position: relative; display: inline-block; width: 38px; height: 22px; background-color: var(--color-background-interactive); border-radius: 22px; border: 1px solid var(--color-border-secondary); cursor: pointer; transition: background-color 0.2s ease; } .newsletter-toggle.on { /* REFINED: Use brand purple for consistency */ background-color: var(--color-brand-pink); border-color: var(--color-brand-pink); } .newsletter-toggle .toggle-slider { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background-color: white; border-radius: 50%; transition: transform 0.2s ease; } .newsletter-toggle.on .toggle-slider { transform: translateX(16px); } /* User Popover */ .popover-user-info { display: flex; align-items: center; gap: 10px; padding: 8px; } .popover-avatar { width: 32px; height: 32px; border-radius: 50%; } .popover-email { font-size: 13px; font-weight: 500; color: var(--color-text-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .popover-actions { display: flex; flex-direction: column; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--color-border-primary); } .popover-action-btn { background: none; border: none; padding: 8px; text-align: left; color: var(--color-text-primary); border-radius: 4px; font-size: 13px; cursor: pointer; } .popover-action-btn:hover { background-color: var(--color-background-hover); color: var(--color-text-accent); } .popover-action-btn:disabled { color: var(--color-text-subtle); cursor: not-allowed; background-color: transparent; } /* ========== 2) Navbar (UX Refinement Styles) ========== */ .navbar-links { display: flex; align-items: center; justify-content: flex-end; /* Push content to the right */ flex-grow: 1; gap: 20px; } .navbar-links ul { display: flex; align-items: center; gap: 20px; } /* Make the main nav links more prominent */ .main-nav-link { font-size: 15px; font-weight: 500; color: var(--color-text-primary); padding: 6px 12px; /* Add padding for the pill shape */ border-radius: 6px; /* Rounded corners for the pill */ border-bottom: none; /* REMOVE the border property */ transition: color 0.2s ease, background-color 0.2s ease; } .main-nav-link:hover { color: var(--color-text-accent); } .main-nav-link:not(.is-active):hover { color: var(--color-text-accent); background-color: var(--color-background-hover); } /* Style for the active link */ .main-nav-link.is-active { color: var(--color-text-accent); background-color: var(--color-background-interactive); } /* Ensure the layout controls container is seamless */ #layout-controls-container { border-left: 1px solid var(--color-border-primary); padding-left: 20px; margin-left: 0; /* Let the parent gap handle spacing */ } /* Hide the empty auth container visually but keep it for layout structure if needed */ #auth-container:empty { display: none; } /* ========== 17) NEW: Animated Newsletter Join Button ========== */ .newsletter-container { display: flex; align-items: center; } .animated-join-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; /* REFINED: Scaled down to fit the navbar height */ width: 38px; height: 38px; padding: 0; border-radius: 999px; border: none; background-color: #0f172a; /* Base dark color, theme-agnostic */ cursor: pointer; overflow: hidden; color: #f8fafc; /* Light text color */ outline: none; /* Base shadow and scale for animation */ transform: scale(1); /* box-shadow: 0 10px 25px rgba(15,23,42,0.5); */ transition: transform 0.3s ease, box-shadow 0.3s ease, width 0.4s cubic-bezier(0.87, 0, 0.13, 1); /* REFINED: Added width transition */ } .animated-join-btn:hover { transform: scale(1.06); box-shadow: 0 15px 45px rgba(56,189,248,0.55); /* REFINED: Adjusted hover shadow */ } .animated-join-btn:focus-visible { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #38bdf8; } /* Animated gradient layer - no changes needed */ .animated-join-bg { position: absolute; inset: 0; border-radius: 999px; mix-blend-mode: screen; opacity: 0; transition: opacity 0.25s ease-out; background: radial-gradient(circle at 0% 0%, #22d3ee, #6366f1, #ec4899); background-size: 400% 400%; } @keyframes animated-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .animated-join-btn:hover .animated-join-bg { opacity: 1; animation: animated-gradient 6s linear infinite; } /* Soft glow ring - no changes needed */ .animated-join-glow { position: absolute; inset: -2px; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.2); opacity: 0.35; transform: scale(1); transition: opacity 0.35s ease-out, transform 0.35s ease-out; } .animated-join-btn:hover .animated-join-glow { opacity: 0.9; transform: scale(1.02); } /* Content container */ .animated-join-content { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; /* REFINED: Adjusted for smaller text */ height: 100%; } .content-item { position: absolute; display: flex; align-items: center; justify-content: center; } /* Icon state (initial) */ .content-icon { opacity: 1; transform: scale(1) translateX(0); transition: opacity 0.2s ease, transform 0.2s ease; } .content-icon svg { /* REFINED: Smaller icon */ width: 18px; height: 18px; } /* Text state (hidden by default) */ .content-text { opacity: 0; transform: translateY(6px); /* REFINED: Slightly smaller font for a cleaner look */ font-size: 13px; font-weight: 500; letter-spacing: 0.2px; /* REFINED: Adjusted letter spacing */ white-space: nowrap; transition: opacity 0.25s ease, transform 0.25s ease; } /* Morphing animation via JS-added class */ .animated-join-btn.is-morphed { /* REFINED: Smaller expanded width */ width: 135px; } .animated-join-btn.is-morphed .content-icon { opacity: 0; transform: scale(0.7) translateX(6px); } .animated-join-btn.is-morphed .content-text { opacity: 1; transform: translateY(0); transition-delay: 0.1s; /* Slight delay for a cleaner morph */ } /* --- Feed Header UI Enhancement --- */ .feed-header { display: flex; align-items: center; padding-top: 12px; padding-bottom: 10px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--color-border); background-color: var(--color-surface); min-height: 56px; gap: 12px; position: relative; } .feed-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; flex-shrink: 0; /* If logo fails/is missing, give it a background */ background-color: var(--color-background); } /* Wrapper takes remaining space */ .smart-select-wrapper { position: relative; flex-grow: 1; display: flex; align-items: center; height: 100%; max-height: 100%; } /* The actual Select Input */ .feed-select { /* Reset native styles */ appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Layout */ width: 100%; padding: 8px 24px 8px 0; /* Right padding for chevron space */ background: transparent; border: none; border-radius: 6px; /* Typography */ font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-text-main); /* Interaction */ cursor: pointer; outline: none; /* Text handling */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s ease; } /* Hover effect to indicate interactivity */ .smart-select-wrapper:hover .feed-select { color: var(--color-primary); /* Or a brighter text color */ } /* The Chevron Icon */ .select-chevron { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none; /* CRITICAL: Clicks pass through to the select */ transition: color 0.2s ease, transform 0.2s ease; } /* On hover, highlight the chevron too */ .smart-select-wrapper:hover .select-chevron { color: var(--color-primary); } /* Focus state for accessibility */ .feed-select:focus-visible { background-color: var(--color-background-hover); outline: 2px solid var(--color-primary); outline-offset: 2px; padding-left: 8px; /* Add padding when focused so text doesn't hit edge */ margin-left: -8px; /* Pull back to align */ } /* --- Empty State Specifics --- */ .feed-column.empty .feed-header { border-bottom: 1px dashed var(--color-border); } .feed-column.empty .feed-select { color: var(--color-text-muted); font-style: italic; } /* --- Custom Dropdown System --- */ .select-container { position: relative; width: 100%; font-family: inherit; } /* The Trigger (Visible Button) */ .custom-select-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px 8px 0; background: transparent; border: none; font-size: 16px; /* Prevents zoom on iOS */ font-weight: 600; color: var(--color-text-main); cursor: pointer; user-select: none; gap: 8px; } .custom-select-trigger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .custom-select-trigger:hover { color: var(--color-primary); } .custom-arrow { width: 16px; height: 16px; transition: transform 0.2s ease; color: var(--color-text-muted); flex-shrink: 0; } /* Rotate arrow when open */ .select-container.open .custom-arrow { transform: rotate(180deg); color: var(--color-primary); } /* The Dropdown Menu (Hidden by default) */ .custom-options { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin-top: 6px; /* Shape */ border-radius: 12px; max-height: 320px; overflow-y: auto; /* Animation Initial State */ opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth Apple-like spring */ display: none; /* --- THE GLASS EFFECT --- */ /* 1. The Blur */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* 2. The Deep Shadow (lifts it off the page) */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.25); } /* Open State */ .select-container.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0) scale(1); display: block; } /* --- Theme-Specific Glass Colors --- */ /* Default (Dark Mode) */ .custom-options { background-color: rgba(30, 30, 35, 0.80); /* Dark, 80% opacity */ border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle white rim */ } /* Light Mode Override */ html.light-mode .custom-options { background-color: rgba(255, 255, 255, 0.85); /* White, 85% opacity */ border: 1px solid rgba(0, 0, 0, 0.06); /* Subtle dark rim */ } /* --- Option Items --- */ .custom-option { padding: 10px 16px; font-size: 14px; cursor: pointer; transition: all 0.15s ease; /* Ensure text is readable on the glass */ color: var(--color-text-main); border-bottom: 1px solid rgba(128, 128, 128, 0.1); /* Very subtle separator */ } .custom-option:last-child { border-bottom: none; } /* Hover State - Distinct from background */ .custom-option:hover { background-color: rgba(128, 128, 128, 0.15); /* Adaptive hover tint */ color: var(--color-primary); padding-left: 20px; /* Subtle movement interaction */ } /* Selected State */ .custom-option.selected { background-color: rgba(var(--color-primary-rgb, 100, 100, 255), 0.15); /* Tinted with primary color if available */ color: var(--color-primary); font-weight: 600; } /* --- Scrollbar Polish (Webkit Only) --- */ /* Ensures the scrollbar doesn't look ugly on top of the glass */ .custom-options::-webkit-scrollbar { width: 6px; } .custom-options::-webkit-scrollbar-track { background: transparent; } .custom-options::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.3); border-radius: 3px; } /* --- HYBRID LOGIC: Mobile vs Desktop --- */ /* By default (Desktop), hide the native select visually but keep it in DOM for logic if needed, OR hide it entirely if we sync logic. Here we hide it entirely and use JS to sync. */ .feed-select-native { display: none; } /* ON MOBILE (Touch devices): Show native select on top of custom trigger (Opacity 0 hack) */ @media (hover: none) and (pointer: coarse) { .feed-select-native { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; /* Invisible but clickable */ z-index: 10; /* Sits on top of the custom text */ cursor: pointer; appearance: none; } /* Disable the custom dropdown popup on mobile since native takes over */ .custom-options { display: none !important; } /* Ensure arrow doesn't rotate on mobile since custom menu doesn't open */ .select-container.open .custom-arrow { transform: none; } } /* Hot Flame Icon */ .hot-flame { display: inline-flex; align-items: center; justify-content: center; color: #ff5722; /* Deep Orange */ margin-right: 4px; animation: pulse-flame 2s infinite ease-in-out; } .hot-flame svg { width: 13px; height: 13px; fill: currentColor; filter: drop-shadow(0 0 2px rgba(255, 87, 34, 0.4)); } /* Optional: Subtle pulse to make it look "alive" */ @keyframes pulse-flame { 0% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.85; transform: scale(1); } } /* Light mode adjust */ html.light-mode .hot-flame { color: #e64a19; } /* app/css/headroom.css - Add these at the end or near .morph-preview styles */ /* Preview Image Container */ .preview-media { width: 100%; border-radius: 8px; /* Matches inner card radius */ overflow: hidden; margin-bottom: 16px; background: var(--color-background-tertiary); /* Enforce a reasonable aspect ratio so it doesn't jump too much, but allow natural height if needed. 16/9 is a safe default for news. */ aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; } .preview-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease; } /* Adjust text container to handle the image being inside it */ .morph-preview__text { /* Ensure images don't overflow */ max-width: 100%; } /* Utility Classes */ .mobile-only { display: none !important; } .desktop-only { display: flex !important; } /* Mobile Breakpoint */ @media (max-width: 768px) { .mobile-only { display: inline-flex !important; } .desktop-only { display: none !important; } /* The Right Drawer */ .right-drawer { position: fixed; top: var(--nav-h); /* Below navbar */ right: 0; bottom: 0; width: 280px; background: var(--color-background-secondary); border-left: 1px solid var(--color-border-primary); transform: translateX(100%); /* Hidden by default */ transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); /* Apple-like spring */ z-index: 1001; padding: 20px; display: flex; flex-direction: column; gap: 20px; } .right-drawer.open { transform: translateX(0); } /* Large Touch Targets for Links */ .mobile-nav-item { font-size: 18px; font-weight: 600; padding: 15px; border-radius: 8px; color: var(--color-text-primary); background: var(--color-background-tertiary); display: flex; justify-content: space-between; align-items: center; } .mobile-nav-item.active { background: var(--color-background-interactive); color: var(--color-text-accent); border: 1px solid var(--color-border-interactive); } } * { scrollbar-width: thin; /* thumb color | track color */ scrollbar-color: rgba(155, 155, 155, 0.3) transparent; } /* WebKit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 6px; height: 6px; /* For horizontal scrollbars */ } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); /* Subtle white for Dark Mode */ border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.3); /* Brighter on hover */ } /* Light Mode Scrollbar Overrides */ html.light-mode * { scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } html.light-mode ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); /* Subtle black for Light Mode */ } html.light-mode ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); } /* ========== 18) Large Text Mode (4K Optimization) ========== */ html.large-text-mode body { font-size: 16px; /* Base bump */ } /* 1. Sidebar bumps */ html.large-text-mode .source-list-item { font-size: 16px; padding: 8px 10px; /* More breathing room */ } html.large-text-mode .category-group summary { font-size: 12px; } html.large-text-mode .later-item-title { font-size: 15px; } /* 2. Feed Item bumps (The most important part) */ html.large-text-mode .item-details > a.feed-item-link { font-size: 16px; line-height: 1.5; font-weight: 600; /* Slightly bolder for readability */ } html.large-text-mode .item-metadata { font-size: 13px; } html.large-text-mode .feed-header .trigger-text { font-size: 15px; } /* 3. Briefing bumps */ html.large-text-mode .carousel-card-title { font-size: 17px; } html.large-text-mode .briefing-meta { font-size: 12px; } /* 4. Navbar bumps */ html.large-text-mode .main-nav-link { font-size: 16px; } /* The Tip Card (In Feed) */ .tip-card { position: relative; border-radius: 8px; overflow: hidden; margin-bottom: 12px; cursor: pointer; background: #000; border: 1px solid var(--color-border-primary); transition: transform 0.2s ease, border-color 0.2s ease; } .tip-card:hover { transform: scale(1.02); border-color: var(--color-text-subtle); } .tip-thumbnail-container { position: relative; width: 100%; aspect-ratio: 9 / 16; /* Vertical Short ratio */ /* If you prefer it less tall in the feed, use 1/1 or 4/5 and object-fit: cover */ aspect-ratio: 4 / 5; } .tip-thumbnail { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.2s; } .tip-card:hover .tip-thumbnail { opacity: 0.6; } .play-icon-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(255, 50, 105, 0.9); /* Brand Pink */ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); pointer-events: none; } .tip-info { padding: 10px; background: var(--color-background-tertiary); } .tip-title { font-size: 13px; font-weight: 600; color: var(--color-text-accent); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } /* Video Modal Specifics */ .video-modal-content { position: relative; width: 90vh; max-width: 450px; /* Phone width */ aspect-ratio: 9 / 16; /* Force vertical */ background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 0 50px rgba(255, 50, 105, 0.15); } .video-close-btn { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.6); color: white; border: 1px solid rgba(255,255,255,0.2); width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; } .video-close-btn:hover { background: var(--color-brand-pink); border-color: var(--color-brand-pink); } /* 1. The Backdrop */ .modal-overlay { backdrop-filter: blur(10px); /* Frosted glass effect */ background: rgba(0, 0, 0, 0.85); /* Slightly transparent */ } /* 2. The Player Container */ .modal-content { /* Exact Shorts Aspect Ratio */ aspect-ratio: 9 / 16; height: 85vh; /* Take up most of the height */ width: auto; /* Width calculates automatically */ max-width: none; /* Remove arbitrary limits */ border-radius: 20px; /* More rounded corners like a phone */ border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */ background: #000; } /* 3. The Close Button */ .close-btn { top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); width: 44px; height: 44px; transition: all 0.2s ease; } .close-btn:hover { background: rgba(255, 50, 105, 0.8); /* Brand pink on hover */ transform: scale(1.1); }