@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #fafafa; --bg2: #ffffff; --bg3: #f4f4f6; --border: #e4e4e8; --accent: #6d28d9; --accent2: #7c3aed; --text: #111118; --muted: #6b7280; --radius: 12px; } /* Dark mode — toggled by via JS in app.js. */ html[data-theme="dark"] { --bg: #0e0f13; --bg2: #16181d; --bg3: #1f232a; --border: #2a2f38; --accent: #8b5cf6; --accent2: #a78bfa; --text: #e6e8ee; --muted: #8b95a7; } /* Honor system preference on first paint, before JS runs. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #0e0f13; --bg2: #16181d; --bg3: #1f232a; --border: #2a2f38; --accent: #8b5cf6; --accent2: #a78bfa; --text: #e6e8ee; --muted: #8b95a7; } } /* Theme toggle button — top-right of the page. */ .yt-day-slice { margin-bottom: 18px; } .yt-slice-head { font: 600 13px -apple-system, system-ui, sans-serif; color: #3a3a3c; margin: 0 0 10px 2px; } .refresh-latest-btn { position: fixed; top: 16px; right: 62px; z-index: 60; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; } .refresh-latest-btn:hover { transform: scale(1.08); background: var(--bg3); } @media (max-width: 600px) { .refresh-latest-btn { width: 36px; height: 36px; top: 12px; right: 56px; } } .theme-toggle { position: fixed; top: 16px; right: 16px; z-index: 60; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; } .theme-toggle:hover { transform: scale(1.08); background: var(--bg3); } @media (max-width: 600px) { .theme-toggle { width: 36px; height: 36px; top: 12px; right: 12px; } } html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; /* 2026-06-08 audit fix #1: prevent mobile horizontal overflow on iPhone 375/414. */ overflow-x: hidden; } /* ── INVITE GATE ── */ #gate { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); gap: 0; } .gate-box { width: 100%; max-width: 380px; padding: 0 20px; background: none; border: none; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 18px; } .gate-logo { font-family: 'Barlow', sans-serif; font-size: 26px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: #1a2638; margin-bottom: 8px; } .gate-tagline { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; } .gate-input { width: 100%; padding: 13px 18px; background: var(--bg3); border: 1.5px solid var(--border); border-radius: 14px; color: var(--text); font-size: 15px; outline: none; transition: border-color .15s; letter-spacing: 1px; text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; } .gate-input:focus { border-color: #1a2638; background: #fff; } .gate-input::placeholder { text-transform: none; letter-spacing: 0; color: var(--muted); } .gate-btn { width: 100%; padding: 14px; background: #1a2638; border: none; border-radius: 14px; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s; font-family: 'Plus Jakarta Sans', sans-serif; } .gate-btn:hover { background: #0f1825; } .gate-btn-secondary { width: 100%; padding: 12px; background: transparent; border: 1.5px solid #d1d5db; border-radius: 14px; color: #1a2638; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s; font-family: 'Plus Jakarta Sans', sans-serif; } .gate-btn-secondary:hover { border-color: #1a2638; } .gate-btn:disabled { opacity: .45; cursor: default; } .gate-err { font-size: 13px; color: #dc2626; min-height: 16px; } .gate-invite-only { font-size: 12px; color: var(--muted); text-align: center; padding-top: 4px; } /* ── APP ── */ #app { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 72px 20px 100px; } /* LOGO */ .logo { font-family: 'Barlow', sans-serif; font-size: 72px; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: #e50914; cursor: pointer; margin-bottom: 24px; user-select: none; line-height: 1; } .tagline { display: none; } /* SAMPLE QUERIES */ .sample-queries { text-align: center; margin-top: 14px; margin-bottom: 32px; width: 100%; max-width: 760px; line-height: 2; white-space: nowrap; } /* 2026-06-08 (v=634) — Recent pill row. Flag-gated; only renders for users with ≥3 prior searches. Mobile-first: chips scroll horizontally, not tabs. Sits between search box and sample queries. */ .recent-pill-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 760px; margin: 12px auto 18px; padding: 0 12px; } .recent-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; color: var(--text); cursor: pointer; transition: background .12s, border-color .12s; white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; } .recent-pill:hover { background: #eff6ff; border-color: #1a73e8; color: #1a73e8; } .recent-pill-icon { font-size: 12px; opacity: 0.7; } @media (max-width: 600px) { .recent-pill-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .recent-pill-row::-webkit-scrollbar { display: none; } .recent-pill { font-size: 12.5px; padding: 5px 12px; } } .sample-q { display: inline; font-size: 14.5px; color: #4b5563; cursor: pointer; transition: color .12s; white-space: nowrap; } .sample-q:hover { color: #1a2638; text-decoration: underline; } .sample-sep { display: inline; font-size: 14px; color: #cbd5e1; user-select: none; padding: 0 6px; } /* SEARCH BOX */ .search-wrap { width: 100%; max-width: 620px; position: relative; margin-bottom: 10px; } /* ── VOICE SEARCH MIC ── (user-asked 2026-05-20) */ .mic-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; z-index: 2; } .mic-btn:hover { background: var(--bg3); transform: translateY(-50%) scale(1.05); } .mic-btn.mic-listening { background: rgba(255, 0, 0, 0.15); } /* Make room for the mic inside the input. */ #q { padding-right: 52px; } /* ── PLAYLIST CARD ── (user-asked 2026-05-20) */ .pl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pl-tile { display: block; text-decoration: none; color: var(--text); position: relative; } .pl-tile-link { display: block; text-decoration: none; color: var(--text); } .pl-thumb-wrap { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: var(--bg3); } .pl-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .pl-play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity .15s; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .pl-tile:hover .pl-play-icon { opacity: 1; } .pl-count { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,0.75); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; } .pl-title { font-size: 13px; line-height: 1.4; margin-top: 6px; font-weight: 500; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pl-chan { font-size: 11px; color: var(--muted); margin-top: 2px; } .pl-tile-link:hover .pl-title { color: var(--accent2); } /* Heart on playlist tile — same bottom-right "favicon" placement, but relative to .pl-tile (whole tile) rather than the thumb-wrap, so it floats above the click-through link without breaking the hover area. */ .pl-tile > .yt-fav-btn { bottom: auto; top: 8px; } @media (max-width: 600px) { .pl-grid { grid-template-columns: 1fr 1fr; } } #q { width: 100%; padding: 18px 24px; background: var(--bg2); border: 1.5px solid var(--border); border-radius: 22px; color: var(--text); font-size: 17px; outline: none; transition: border-color .15s, box-shadow .15s; box-shadow: 0 4px 24px rgba(0,0,0,.06); white-space: nowrap; overflow: hidden; cursor: text; min-height: 60px; line-height: 1.4; display: flex; align-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 400; } #q:focus { border-color: #1a2638; box-shadow: 0 0 0 3px rgba(26,38,56,.08), 0 4px 24px rgba(0,0,0,.06); } #q:empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; user-select: none; } /* SUGGESTIONS */ #suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; z-index: 50; box-shadow: 0 8px 32px rgba(0,0,0,.08); } .sug-item { padding: 10px 20px; cursor: pointer; font-size: 14px; color: var(--text); transition: background .08s; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sug-item:hover, .sug-item.active { background: var(--bg3); } .sug-sub { font-size: 12px; color: var(--muted); white-space: nowrap; } .sug-text { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Navigational autocomplete row — brand/stock match. Right-side chip shows "→ host" with favicon so user knows Enter (or click) opens that URL, not an in-app search. User-asked 2026-05-21. */ .sug-item--nav { padding-right: 14px; } .sug-item--nav .sug-text { color: var(--text); } .sug-nav-chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #fff; background: #1a73e8; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .sug-favicon { width: 14px; height: 14px; border-radius: 50%; background: #fff; } .sug-arrow { font-weight: 800; font-size: 13px; line-height: 1; } .sug-item--nav:hover .sug-nav-chip { background: #1764cb; } /* RESULTS */ #results { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 12px; } /* CARD */ .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.04); animation: fadeUp .2s ease; /* 2026-06-08 audit fix #1: kill flex-child overflow so .sample-grid etc. can't push the card wider than viewport on mobile (iPhone 375/414). */ min-width: 0; max-width: 100%; } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .card-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #1a2638; margin-bottom: 10px; } .card-text { font-size: 16px; line-height: 1.7; color: var(--text); } .card-muted { font-size: 12px; color: var(--muted); margin-top: 8px; } .muted-small { font-size: 12px; color: var(--muted); font-weight: 400; } /* 🔗 SHARE THIS SEARCH (floating btn, bottom-right) */ .share-btn { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--accent2); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s; } .share-btn:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,0.55); } @media (max-width: 600px) { .share-btn { right: 14px; bottom: 14px; width: 44px; height: 44px; font-size: 20px; } } /* ⌨️ CHEATSHEET MODAL (press ?) */ .cs-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 20px; animation: pl-fade .12s ease-out; } .cs-box { background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 14px; padding: 22px 26px; max-width: 600px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: 0 16px 48px rgba(0,0,0,0.5); } .cs-close { position: absolute; top: 14px; right: 16px; color: var(--muted); font-size: 28px; cursor: pointer; line-height: 1; padding: 4px 10px; border-radius: 6px; transition: background .15s; } .cs-close:hover { background: var(--bg3); color: var(--text); } .cs-title { font-size: 16px; font-weight: 700; margin: 14px 0 8px; color: var(--text); } .cs-title:first-of-type { margin-top: 0; } .cs-table { width: 100%; border-collapse: collapse; } .cs-table td { padding: 6px 8px; font-size: 13px; color: var(--text); border-bottom: 1px dashed var(--border); vertical-align: middle; } .cs-table td:first-child { width: 38%; } .cs-table td em { color: var(--accent2); font-style: normal; font-weight: 500; } .cs-table kbd { display: inline-block; padding: 2px 7px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; color: var(--text); margin-right: 4px; } /* 🌅 SUN TIMES, 📚 WORD TOOLS, 🎲 RANDOM — Google-parity instant answers (2026-05-20) */ .sun-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0; } .sun-cell { padding: 12px; background: var(--bg3); border-radius: 8px; text-align: center; } .sun-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; } .sun-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; } .sun-time { font-size: 16px; font-weight: 700; color: var(--text); } @media (max-width: 600px) { .sun-row { grid-template-columns: 1fr; } } .wt-grid { display: flex; flex-wrap: wrap; gap: 6px; } .wt-chip { padding: 6px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; font-size: 13px; color: var(--text); } .re-roll { padding: 5px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; font-size: 12px; color: var(--text); cursor: pointer; transition: all .15s; } .re-roll:hover { background: var(--accent2); color: #fff; border-color: var(--accent2); } /* 📅 ON THIS DAY card */ .otd-list { display: flex; flex-direction: column; gap: 10px; } .otd-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color .15s; } .otd-row:hover { border-color: var(--accent2); } .otd-thumb { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg2); } .otd-thumb-blank { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent2); font-size: 16px; background: rgba(167,139,250,0.12); } .otd-yr { font-size: 13px; font-weight: 700; color: var(--accent2); margin-bottom: 2px; } .otd-txt { font-size: 13px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ⚙️ SETTINGS PANEL */ .st-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--border); } .st-row:last-of-type { border-bottom: none; } .st-label { flex: 0 0 40%; font-weight: 600; color: var(--text); font-size: 13px; padding-top: 6px; } .st-control { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .st-pill { padding: 6px 12px; border-radius: 14px; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-size: 12px; cursor: pointer; transition: all .15s; } .st-pill:hover { border-color: var(--accent2); } .st-pill.active { background: var(--accent2); color: #fff; border-color: var(--accent2); } .st-pill.st-danger { color: #ef4444; border-color: rgba(239,68,68,0.4); } .st-pill.st-danger:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; } .st-about { font-size: 12px; color: var(--muted); line-height: 1.6; } .st-about a { color: var(--accent2); text-decoration: none; } .st-about a:hover { text-decoration: underline; } .settings-btn { font-size: 16px; } /* SKELETON LOADERS — shape-matched placeholders so perceived load < actual load. */ .skel { display: block; background: linear-gradient(90deg, var(--bg3) 0%, var(--border) 50%, var(--bg3) 100%); background-size: 200% 100%; border-radius: 6px; animation: skel-shimmer 1.4s linear infinite; } @keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skel-line { height: 14px; margin: 6px 0; } .skel-line.short { width: 60%; } .skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .skel-photo { aspect-ratio: 1/1; } .skel-vids { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .skel-vid-wrap { display: flex; flex-direction: column; } .skel-vid { aspect-ratio: 16/9; margin-bottom: 6px; } .skel-rows { display: flex; flex-direction: column; gap: 8px; } .skel-row { padding: 4px 0; } @media (max-width: 600px) { .skel-grid { grid-template-columns: repeat(3, 1fr); } .skel-vids { grid-template-columns: 1fr 1fr; } } /* 🏗 GITHUB CARD (user-asked 2026-05-20) */ .gh-list { display: flex; flex-direction: column; gap: 8px; } .gh-repo { display: block; padding: 12px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color .15s; } .gh-repo:hover { border-color: var(--accent2); } .gh-name { font-size: 14px; font-weight: 700; color: var(--accent2); } .gh-desc { font-size: 12px; color: var(--muted); margin: 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .gh-meta { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--muted); } .gh-star { color: #f59e0b; font-weight: 600; } .gh-lang { padding: 2px 8px; background: rgba(96,165,250,.12); color: #60a5fa; border-radius: 10px; font-weight: 500; } /* 🌐 TRANSLATOR CARD (user-asked 2026-05-20) */ .tr-src, .tr-out { background: var(--bg3); border-radius: 8px; padding: 12px 14px; margin: 8px 0; font-size: 16px; line-height: 1.5; color: var(--text); } .tr-out { background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.25); font-weight: 500; } .tr-label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .tr-link { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--accent2); text-decoration: none; } .tr-link:hover { text-decoration: underline; } /* FLIGHT ROUTE CARD — booking-site quick links for 'X to Y' queries. */ .flight-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; } .flight-route-btn { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px; background: var(--bg3); color: var(--text); text-decoration: none; border: 1px solid var(--border); transition: all .15s; } .flight-route-btn:hover { border-color: var(--accent2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .flight-route-btn .frb-name { font-size: 14px; font-weight: 700; color: var(--text); } .flight-route-btn .frb-sub { font-size: 11px; color: var(--muted); } .flight-route-btn.mmt { border-left: 4px solid #ee2a24; } .flight-route-btn.goi { border-left: 4px solid #003B95; } .flight-route-btn.ctp { border-left: 4px solid #f37121; } .flight-route-btn.sky { border-left: 4px solid #0770e3; } .flight-route-tip { margin-top: 4px; } @media (max-width: 600px) { .flight-route-grid { grid-template-columns: 1fr; } } /* BRAND CARD */ .brand-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .brand-main { font-size: 17px; font-weight: 500; color: var(--accent2); text-decoration: none; } .brand-main:hover { text-decoration: underline; } .brand-pills { display: flex; flex-wrap: wrap; gap: 8px; } .brand-pill { padding: 5px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; font-size: 13px; color: var(--text); text-decoration: none; transition: border-color .12s, color .12s; } .brand-pill:hover { border-color: var(--accent2); color: var(--accent2); } /* TOP RESULT */ .topsite-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .topsite-title { font-size: 15px; font-weight: 500; color: var(--text); } .topsite-domain { font-size: 12px; color: var(--muted); margin-top: 2px; } .topsite-text { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; } .topsite-btn { flex-shrink: 0; padding: 7px 16px; background: var(--accent); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; transition: background .12s; } .topsite-btn:hover { background: var(--accent2); } /* HERO */ .hero-wrap { display: flex; gap: 14px; align-items: flex-start; } .hero-img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--bg3); } .hero-body { flex: 1; } .hero-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; } .hero-desc { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .hero-summary { font-size: 14px; line-height: 1.6; color: var(--text); } .hero-links { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; } .hero-link { font-size: 13px; color: var(--accent2); text-decoration: none; } .hero-link:hover { text-decoration: underline; } /* NEWS */ .pn-group { border-top: 1px solid var(--border); } .pn-group:first-of-type { border-top: none; } .pn-head { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; padding: 12px 2px; font-size: 15px; font-weight: 600; color: var(--text); } .pn-head:hover { color: #1a73e8; } .pn-arrow { color: var(--muted); font-size: 12px; width: 12px; } .pn-count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); background: #f0f2f5; border-radius: 10px; padding: 1px 8px; } .pn-del { margin-left: 6px; border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 4px; opacity: 0; transition: opacity .12s, background .12s; } .pn-group:hover .pn-del { opacity: 1; } .pn-del:hover { background: #ffe6e6; color: #c0392b; } /* ★ per-group pin button — always visible (not just on hover) so user notices */ .pn-pin { margin-left: 6px; border: none; background: transparent; color: #999; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 4px; transition: color .12s, background .12s; } .pn-pin:hover { color: #f39c12; background: #fff8e1; } .pn-pin--on { color: #f39c12; } .pn-pin--on:hover { color: #b07000; background: #fff3e0; } .pn-divider { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--border); } .pn-divider:first-child { padding-top: 0; border-top: none; margin-top: 0; } .pn-count--pinned { background: #fff3e0; color: #b07000; font-weight: 600; } .pn-group--pinned .pn-head { font-weight: 600; } /* Plain search-list rows on home (no news fetched) */ .sl-row { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .sl-row:last-child { border-bottom: none; padding-bottom: 0; } .sl-row:hover { color: #1a73e8; } .sl-row:hover .pn-del { opacity: 1; } .sl-q { flex: 1; font-size: 16px; font-weight: 500; color: var(--text); } .sl-clear { float: right; font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 4px; cursor: pointer; } .sl-clear:hover { background: #ffe6e6; color: #c0392b; border-color: #c0392b; } /* ★ Pin-to-favorites — prominent button at top of search results */ #pin-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 16px; background: linear-gradient(135deg, #fff8e1 0%, #fff3e0 100%); border: 1px solid #ffd699; border-radius: 10px; box-shadow: 0 1px 3px rgba(243, 156, 18, 0.08); } .pin-btn { font-size: 14px; padding: 9px 18px; border: 2px solid #f39c12; background: #fff; color: #b07000; border-radius: 24px; cursor: pointer; transition: all .15s; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; } .pin-btn:hover { background: #ffe0b2; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(243,156,18,.3); } .pin-btn--on { background: #f39c12; color: #fff; border-color: #f39c12; } .pin-btn--on:hover { background: #e08e0a; } .pin-q { font-size: 13px; color: #855700; font-weight: 500; } .pin-q::before { content: "→ "; color: #b07000; font-weight: 700; } /* ★ Favorites card on home */ #favorites .card-label { color: #b07000; } .fav-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .fav-row:last-child { border-bottom: none; padding-bottom: 0; } .fav-row:hover { color: #1a73e8; } .fav-star { color: #f39c12; font-size: 16px; } .fav-q { flex: 1; font-size: 16px; font-weight: 500; color: var(--text); } .fav-unpin { border: none; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 4px; opacity: 0; transition: opacity .12s, background .12s; } .fav-row:hover .fav-unpin { opacity: 1; } .fav-unpin:hover { background: #ffe6e6; color: #c0392b; } .pn-body { padding-left: 18px; padding-bottom: 6px; } .news-item { padding: 11px 0; border-bottom: 1px solid var(--border); } .news-item:last-child { border-bottom: none; padding-bottom: 0; } .news-title { font-size: 17px; line-height: 1.55; color: var(--text); text-decoration: none; display: block; font-weight: 500; } .news-title:hover { color: #1a2638; text-decoration: underline; } .news-meta { font-size: 12px; color: var(--muted); margin-top: 4px; } .news-sub { padding-top: 8px; } .news-sub:first-of-type { padding-top: 0; } .news-sub + .news-sub { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; } .news-sub-head { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; } /* BOOKS (OpenLibrary) — mirrors .films-grid for visual consistency */ .books-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .book-card { display: block; text-decoration: none; color: inherit; } .book-card:hover .book-title { text-decoration: underline; } .book-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; background: var(--bg2); } .book-title { font-size: 14px; line-height: 1.35; font-weight: 600; margin-top: 8px; color: var(--text); } .book-author { font-size: 12px; color: var(--muted); margin-top: 2px; } .book-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } /* VIDEOS */ .yt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .yt-item, .yt-item-link { text-decoration: none; color: var(--text); display: block; } /* Video multi-select — clicking the whole thumbnail toggles add/remove. Redesign 2026-05-20: user couldn't find tiny pill, so we made the entire thumbnail a click target with prominent visual feedback. */ .yt-item-wrap { position: relative; } .yt-selectable .yt-thumb-wrap { cursor: pointer; } /* Persistent + / ✓ badge in the top-right of every selectable thumbnail. */ /* Sequential number badge in top-LEFT of each thumbnail — paired with the voice command parser ('play 4 6 7'). Always visible. */ .yt-num-badge { position: absolute; top: 8px; left: 8px; z-index: 3; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: rgba(0,0,0,0.78); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,0.45); pointer-events: none; } .yt-picked .yt-num-badge { background: #f39c12; } .yt-add-badge { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); border: 3px solid #f39c12; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #d9821a; box-shadow: 0 3px 12px rgba(0,0,0,0.5); transition: all .15s ease; pointer-events: none; } .yt-add-plus { display: inline; } .yt-add-tick { display: none; } .yt-picked .yt-add-badge { background: #f39c12; color: #fff; border-color: #fff; box-shadow: 0 0 0 3px #f39c12, 0 3px 16px rgba(243,156,18,0.7); transform: scale(1.05); } .yt-picked .yt-add-plus { display: none; } .yt-picked .yt-add-tick { display: inline; } /* 'Click to add' overlay strip across the bottom — appears on hover. */ .yt-add-overlay { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(243,156,18,0.92), rgba(243,156,18,0)); color: #fff; font-weight: 700; font-size: 13px; padding: 10px 8px 6px; text-align: center; opacity: 0; transition: opacity .15s; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .yt-selectable:hover .yt-add-overlay { opacity: 1; } .yt-picked .yt-add-overlay { content: ""; } .yt-picked .yt-add-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,128,0,0.92), rgba(0,128,0,0)); } .yt-picked .yt-add-overlay::before { content: "✓ Added — click to remove"; } .yt-add-overlay::before { content: "+ Click to add"; } .yt-picked .yt-thumb-wrap { outline: 4px solid #f39c12; outline-offset: -4px; border-radius: 8px; } /* Separate single-video watch link below title (the only way to open YouTube for a single video, since the thumbnail click now toggles selection). */ .yt-watch-single { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--accent2); text-decoration: none; opacity: 0.8; } .yt-watch-single:hover { text-decoration: underline; opacity: 1; } /* Sticky-feeling status + play bar at the top of the Videos card. */ .yt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin: 4px 0 14px; background: linear-gradient(135deg, #fff8e1, #fff3d1); border: 1px solid #f0c75a; border-radius: 10px; flex-wrap: wrap; } .yt-bar-msg { font-size: 13px; color: #6b4f00; flex: 1; min-width: 200px; line-height: 1.4; } .yt-bar-msg strong { color: #b07000; } .yt-play-selected { font-size: 14px; padding: 10px 22px; border: none; background: #ff0000; color: #fff; border-radius: 22px; cursor: pointer; font-weight: 700; box-shadow: 0 3px 12px rgba(255,0,0,0.4); transition: all .15s ease; white-space: nowrap; } .yt-play-selected:not(:disabled) { animation: yt-pulse 1.6s ease-in-out infinite; } .yt-play-selected:hover:not(:disabled) { background: #cc0000; transform: scale(1.05); } .yt-play-selected:disabled { background: #f5b8b8; cursor: not-allowed; opacity: 0.7; } @keyframes yt-pulse { 0%, 100% { box-shadow: 0 3px 12px rgba(255,0,0,0.4); } 50% { box-shadow: 0 3px 22px rgba(255,0,0,0.75); } } /* 📷 Photos card grid */ .hp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .hp-tile { display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 6px; background: var(--bg2); cursor: zoom-in; position: relative; } .hp-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } .hp-tile:hover img { transform: scale(1.05); } @media (max-width: 600px) { .hp-grid { grid-template-columns: repeat(3, 1fr); } } /* Photo card header — title on the left, one clear primary action on the right. */ .hp-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .hp-title { font-size: inherit; } .hp-subtitle { font-size: 12px; color: var(--muted); padding: 4px 2px 10px; line-height: 1.45; } .hp-tool-btn { background: var(--bg2, rgba(0,0,0,0.05)); color: var(--text); border: 1px solid var(--border, rgba(0,0,0,0.12)); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 18px; cursor: pointer; transition: background .15s, transform .1s, border-color .15s, filter .15s; line-height: 1; white-space: nowrap; } .hp-tool-btn:hover { background: var(--bg3, rgba(0,0,0,0.08)); } .hp-tool-btn:active { transform: scale(0.97); } .hp-tool-btn.hp-tool-primary { background: var(--accent2, #1a73e8); color: #fff; border-color: transparent; } .hp-tool-btn.hp-tool-primary:hover { filter: brightness(1.08); } /* Tile select checkbox — ALWAYS visible (top-right) so users discover the pick-for-slideshow feature without having to enter a hidden mode. */ .hp-checkbox { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.92); color: transparent; border: 2px solid rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: background .15s, color .15s, border-color .15s, transform .1s; } .hp-checkbox:hover { transform: scale(1.08); background: #fff; border-color: var(--accent2, #1a73e8); color: var(--accent2, #1a73e8); } .hp-tile.hp-selected { outline: 3px solid var(--accent2, #1a73e8); outline-offset: -3px; } .hp-tile.hp-selected .hp-checkbox { background: var(--accent2, #1a73e8); color: #fff; border-color: var(--accent2, #1a73e8); } /* In-page lightbox slideshow */ .photo-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: pl-fade .15s ease-out; } @keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } } .pl-img { max-width: 90vw; max-height: 88vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,0.5); } .pl-close, .pl-prev, .pl-next { position: absolute; color: #fff; font-size: 32px; font-weight: 200; cursor: pointer; user-select: none; padding: 12px 18px; border-radius: 50%; transition: background .15s; } .pl-close { top: 16px; right: 16px; } .pl-prev { left: 16px; top: 50%; transform: translateY(-50%); font-size: 48px; } .pl-next { right: 16px; top: 50%; transform: translateY(-50%); font-size: 48px; } .pl-close:hover, .pl-prev:hover, .pl-next:hover { background: rgba(255,255,255,0.15); } .pl-caption { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 20px; opacity: 0.85; } .pl-play { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.15); color: #fff; border: 0; font-size: 18px; padding: 8px 14px; border-radius: 20px; cursor: pointer; } .pl-play:hover { background: rgba(255,255,255,0.28); } .pl-counter { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: 0.75; } /* Favourite-channel "favicon" — icon-only ♡/♥ overlaid on the thumbnail's bottom-right corner so the user discovers it as a stamp on the video. Tooltip carries the full action label ("Favourite [channel]"). */ .yt-fav-btn { position: absolute; bottom: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.78); color: #fff; border: 0; font-size: 17px; font-weight: 700; line-height: 1; border-radius: 50%; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: background .15s, color .15s, transform .1s; } .yt-fav-btn:hover { background: rgba(0,0,0,0.92); transform: scale(1.08); } .yt-fav-btn:active { transform: scale(0.96); } .yt-fav-btn.yt-fav-on { background: #e0245e; color: #fff; } .yt-fav-btn.yt-fav-on:hover { background: #c01a4e; } /* + Follow Channel / ✓ Following Channel — thumbnail overlay (top-left), paired with the ♡ save button at bottom-right. Both controls live ON the image, neither overlaps the other. User-asked 2026-05-21: "give it within the image and write 'Follow Channel'" + centre the "+". */ .yt-follow-pill { position: absolute; top: 8px; left: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.78); color: #fff; border: 0; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; padding: 6px 11px 6px 9px; border-radius: 999px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: background .15s, color .15s; } .yt-follow-pill:hover { background: rgba(0,0,0,0.92); } .yt-follow-pill.yt-follow-on { background: #1a73e8; } .yt-follow-pill.yt-follow-on:hover { background: #1764cb; } /* Glyph in its own flex item so "+" sits visually centred next to the text label (without this, "+" lifts a couple of px above text baseline). */ .yt-follow-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 14px; font-weight: 900; line-height: 1; border-radius: 50%; background: rgba(255,255,255,0.18); flex: 0 0 14px; } .yt-follow-pill.yt-follow-on .yt-follow-icon { background: rgba(255,255,255,0.28); } .yt-follow-label { display: inline-block; line-height: 1; } /* ── TOAST ───────────────────────────────────────────────────────────── Confirmation snackbar at the bottom-centre of the viewport. Fades in when shown, auto-dismisses after ~2.2s. Two flavours so the user can tell save vs follow apart at a glance. */ .ii-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px); background: #1d1d1f; color: #fff; padding: 12px 18px; border-radius: 999px; font: 600 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; box-shadow: 0 10px 28px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; z-index: 2147483645; transition: transform .2s ease-out, opacity .2s ease-out; max-width: 92vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ii-toast--show { opacity: 1; transform: translate(-50%, 0); } .ii-toast--save { background: #e0245e; } .ii-toast--follow { background: #1a73e8; } .ii-toast--info { background: #1d1d1f; } /* 🪙 Crypto market dashboard rows. Ported with cards 2026-05-21. */ .cm-head { display: grid; grid-template-columns: 40px 1fr 110px 90px 110px; gap: 8px; padding: 8px 0; border-bottom: 2px solid var(--border, #e5e5e5); font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; } .cm-row { display: grid; grid-template-columns: 40px 1fr 110px 90px 110px; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,0.06)); font-size: 13px; align-items: center; } .cm-row:last-child { border-bottom: 0; } .cm-rank { color: var(--muted); } .cm-sym { color: var(--muted); font-size: 11px; margin-left: 4px; text-transform: uppercase; } .cm-price { text-align: right; font-variant-numeric: tabular-nums; } .cm-chg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .cm-mc { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 600px) { .cm-head, .cm-row { grid-template-columns: 28px 1fr 80px 70px; gap: 4px; font-size: 11px; } .cm-mc { display: none; } } /* 🌍 Country fact rows (legacy — still used by holidays, etc.). */ .cf-row { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,0.06)); font-size: 13px; } .cf-row:last-of-type { border-bottom: 0; } .cf-k { color: var(--muted); font-weight: 500; } .cf-v { color: var(--text); word-break: break-word; } @media (max-width: 600px) { .cf-row { grid-template-columns: 100px 1fr; font-size: 12px; } } /* 🌍 Country card (sec-country) — REST Countries proxy via /api/search?type=country. Mounts above the hero card; aims for the same visual language as the Sports and Athlete cards (header + stats grid + meta pills + linked neighbour flags). */ .sec-country { } .cc-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .cc-flag { width: 60px; height: 40px; border-radius: 4px; object-fit: cover; background: var(--bg3, rgba(0,0,0,0.05)); flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } .cc-titles { min-width: 0; } .cc-name { font-size: 20px; font-weight: 700; color: var(--text, #111); line-height: 1.2; } .cc-official { font-size: 12px; color: var(--muted, #5f6368); margin-top: 2px; } .cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; } .cc-stat { background: var(--bg2, rgba(26,115,232,0.04)); padding: 10px 12px; border-radius: 8px; min-width: 0; } .cc-stat-k { font-size: 11px; color: var(--muted, #5f6368); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .cc-stat-v { font-size: 14px; color: var(--text, #111); font-weight: 600; margin-top: 2px; word-break: break-word; } @media (max-width: 600px) { .cc-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; } .cc-stat { padding: 8px 10px; } .cc-stat-v { font-size: 13px; } } .cc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12px; } .cc-meta-item { background: var(--bg2, rgba(0,0,0,0.04)); padding: 4px 10px; border-radius: 99px; color: var(--text, #333); } .cc-section { padding: 8px 0; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; } .cc-section-k { font-size: 11px; color: var(--muted, #5f6368); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding-top: 4px; } .cc-section-v { font-size: 13px; color: var(--text, #111); word-break: break-word; } .cc-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2, rgba(26,115,232,0.06)); padding: 4px 10px; border-radius: 99px; margin: 2px 4px 2px 0; font-size: 12px; } .cc-cur-sym { font-weight: 700; color: #1a73e8; font-family: ui-monospace, Menlo, monospace; } .cc-pill-mute { color: var(--muted, #5f6368); font-size: 11px; } .cc-neighbours { display: flex; flex-wrap: wrap; gap: 6px; } .cc-npill { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2, rgba(0,0,0,0.04)); padding: 3px 9px 3px 4px; border-radius: 99px; font-size: 12px; color: var(--text, #111); text-decoration: none; border: 1px solid var(--border, rgba(0,0,0,0.08)); transition: background 0.15s; } .cc-npill:hover{ background: rgba(26,115,232,0.10); } .cc-nflag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; } .cc-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); display: flex; gap: 6px; flex-wrap: wrap; } .cc-maps { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; background: #1a73e8; color: #fff; border-radius: 99px; font-size: 12px; font-weight: 600; text-decoration: none; } .cc-maps:hover { background: #1565c0; } @media (max-width: 600px) { .cc-section { grid-template-columns: 1fr; gap: 4px; } .cc-section-k{ padding-top: 0; } } /* ⚔ X vs Y comparison panes (dual Wikipedia summaries). */ .vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: flex-start; margin-top: 6px; } .vs-pane { min-width: 0; } .vs-img { width: 100%; max-width: 160px; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; background: var(--bg3); display: block; margin-bottom: 8px; } .vs-name { font-size: 15px; font-weight: 600; margin-bottom: 2px; } .vs-desc { font-size: 11px; color: var(--muted); margin-bottom: 6px; } .vs-sum { font-size: 13px; line-height: 1.55; color: var(--text); margin-bottom: 6px; } .vs-divider { font-size: 18px; font-weight: 600; color: var(--muted); align-self: center; padding-top: 60px; } @media (max-width: 600px) { .vs-grid { grid-template-columns: 1fr; gap: 12px; } .vs-divider { padding-top: 0; text-align: center; } .vs-img { max-width: 120px; } } /* 🌤 7-day weather forecast strip — appears below the current-weather row. */ .wx-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); } .wx-fc-day { text-align: center; padding: 6px 2px; border-radius: 6px; } .wx-fc-day:hover { background: var(--bg3, rgba(0,0,0,0.04)); } .wx-fc-name { font-size: 11px; color: var(--muted); font-weight: 500; } .wx-fc-icon { font-size: 22px; line-height: 1.3; margin: 2px 0; } .wx-fc-temp { font-size: 12px; color: var(--text); } .wx-fc-rain { font-size: 10px; color: #1a73e8; margin-top: 2px; } @media (max-width: 600px) { .wx-forecast { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .wx-fc-icon { font-size: 18px; } .wx-fc-temp { font-size: 11px; } } /* 🎉 Holiday rows. */ .hol-row { display: grid; grid-template-columns: 180px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,0.06)); font-size: 13px; } .hol-row:last-child { border-bottom: 0; } .hol-date { color: var(--muted); } .hol-name { color: var(--text); font-weight: 500; } .hol-up { background: rgba(10,138,58,0.06); border-radius: 4px; padding-left: 6px; padding-right: 6px; } /* Latest / Most popular section headers inside #sec-youtube */ .yt-section { margin-top: 14px; } .yt-section:first-of-type { margin-top: 8px; } .yt-section-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text2, var(--muted)); margin-bottom: 8px; } .yt-section-sub { font-weight: 500; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; } .yt-card-sub { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 6px; } /* Compact static version inside the followed-channels card header (next to each channel name) — keep it inline, no overlay positioning. */ #home-fav-channels .fc-head .yt-fav-btn { position: static; width: 26px; height: 26px; font-size: 14px; box-shadow: none; } /* Duration badge moves to BOTTOM-LEFT so heart owns bottom-right. */ .yt-dur { left: 5px; right: auto; } /* ❤ Followed-channels home card */ #home-fav-channels .fc-section { padding: 10px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,0.06)); } #home-fav-channels .fc-section:last-child { border-bottom: 0; } #home-fav-channels .fc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 14px; } #home-fav-channels .fc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } #home-fav-channels .fc-vid { display: block; color: var(--text); text-decoration: none; } #home-fav-channels .fc-thumb-wrap { position: relative; aspect-ratio: 16/9; background: var(--bg3); border-radius: 6px; overflow: hidden; } #home-fav-channels .fc-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } #home-fav-channels .fc-title { font-size: 12px; font-weight: 500; line-height: 1.3; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #home-fav-channels .fc-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } #home-fav-channels .fc-empty { font-size: 12px; color: var(--muted); font-style: italic; } @media (max-width: 600px) { #home-fav-channels .fc-grid { grid-template-columns: repeat(2, 1fr); } } .yt-item:hover .yt-title, .yt-item-link:hover .yt-title { color: var(--accent2); } .yt-thumb-wrap { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; background: var(--bg3); } .yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .yt-dur { position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; padding: 2px 5px; border-radius: 3px; } .yt-title { font-size: 13px; line-height: 1.4; margin-top: 5px; font-weight: 500; } .yt-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } /* CALCULATOR */ .calc-expr { font-size: 14px; color: var(--muted); margin-bottom: 4px; } .calc-result { font-size: 36px; font-weight: 300; letter-spacing: -1px; color: var(--text); } .dict-word { font-size: 24px; font-weight: 500; color: var(--text); margin-bottom: 8px; } .dict-phon { font-size: 15px; color: var(--muted); font-weight: 400; } .dict-meaning { margin: 8px 0; font-size: 15px; line-height: 1.5; color: var(--text); } .dict-pos { font-style: italic; color: var(--muted); margin-right: 4px; } .dict-ex { font-size: 14px; color: var(--muted); margin-top: 4px; } .calc-display { width: 100%; box-sizing: border-box; font-size: 30px; font-weight: 300; text-align: right; padding: 12px 14px; border: 1px solid var(--border, #e2e5ea); border-radius: 10px; background: #fff; color: var(--text); outline: none; } .calc-display:focus { border-color: #1a73e8; } .calc-out { min-height: 22px; text-align: right; font-size: 18px; color: var(--muted); margin: 6px 2px 10px; } .calc-pad { display: flex; flex-direction: column; gap: 8px; } .calc-row { display: flex; gap: 8px; } .calc-btn { flex: 1; padding: 16px 0; font-size: 19px; border: 1px solid var(--border, #e2e5ea); border-radius: 10px; background: #f7f8fa; color: var(--text); cursor: pointer; transition: background .12s, transform .05s; } .calc-btn:hover { background: #eef0f4; } .calc-btn:active { transform: scale(0.96); } .calc-btn.op { background: #eaf1fe; color: #1a73e8; font-weight: 600; } .calc-btn.op:hover { background: #dde9fd; } .calc-btn.clear { color: #d93025; } .calc-btn.eq { background: #1a73e8; color: #fff; font-weight: 600; } .calc-btn.eq:hover { background: #1660cf; } /* WEATHER */ .wx-row { display: flex; align-items: flex-start; gap: 16px; } .wx-icon { font-size: 52px; line-height: 1; flex-shrink: 0; } .wx-body { flex: 1; } .wx-temp { font-size: 40px; font-weight: 200; letter-spacing: -1px; line-height: 1; } .wx-desc { font-size: 16px; color: var(--text); margin-top: 4px; } .wx-loc { font-size: 12px; color: var(--muted); margin-top: 4px; } .wx-meta { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; text-align: right; } /* WAITLIST (gate second screen) */ .gate-or { text-align: center; font-size: 12px; color: var(--muted); position: relative; } .gate-or::before, .gate-or::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--border); } .gate-or::before { left: 0; } .gate-or::after { right: 0; } .gate-req-btn { width: 100%; padding: 14px; background: transparent; border: 1.5px solid var(--border); border-radius: 14px; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s; font-family: 'Plus Jakarta Sans', sans-serif; } .gate-req-btn:hover { border-color: #1a2638; color: #1a2638; } .gate-thanks { font-size: 14px; color: var(--text); line-height: 1.6; background: var(--bg3); border-radius: 10px; padding: 16px; display: none; } .gate-thanks strong { color: var(--accent2); } /* TRENDING */ #trending { width: 100%; max-width: 620px; margin-bottom: 8px; } .trend-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .trend-pills { display: flex; flex-wrap: wrap; gap: 8px; } .trend-pill { padding: 7px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; font-size: 13px; color: var(--text); cursor: pointer; transition: border-color .12s, color .12s; } .trend-pill:hover { border-color: var(--accent2); color: var(--accent2); } /* CATEGORY PILLS */ .cat-pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 4px 4px; margin-bottom: 4px; } .cat-pill { padding: 6px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; font-size: 13px; color: var(--text); cursor: pointer; transition: border-color .12s, color .12s; } .cat-pill:hover { border-color: var(--accent2); color: var(--accent2); } .cat-more { padding: 6px 14px; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color .12s, color .12s; } .cat-more:hover { border-color: var(--accent2); color: var(--accent2); } .cat-hidden { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 4px; } /* PHOTO GRID */ .img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .img-grid a, .img-grid-more a { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 1; position: relative; } .img-grid img, .img-grid-more img { width: 100%; height: 100%; object-fit: cover; display: block; } .img-grid-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; } .img-lbx.hp-selected { outline: 3px solid var(--accent2, #1a73e8); outline-offset: -3px; } .img-lbx.hp-selected .hp-checkbox { background: var(--accent2, #1a73e8); color: #fff; border-color: var(--accent2, #1a73e8); } .img-more-btn { width: 100%; margin-top: 10px; padding: 8px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--accent2); font-size: 13px; cursor: pointer; } .img-more-btn:hover { border-color: var(--accent2); } .yt-more { margin-top: 10px; } .yt-more-btn { width: 100%; margin-top: 10px; padding: 9px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--accent2); font-size: 13px; cursor: pointer; } .yt-more-btn:hover { border-color: var(--accent2); } .img-cat-section { margin-top: 14px; } .img-cat-section:first-child { margin-top: 0; } .img-cat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); margin-bottom: 4px; } /* REDDIT */ .reddit-item { display: block; padding: 9px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); } .reddit-item:last-child { border-bottom: none; padding-bottom: 0; } .reddit-item:hover .reddit-title { color: var(--accent2); } .reddit-title { font-size: 14px; line-height: 1.45; } .reddit-meta { font-size: 11px; color: var(--muted); margin-top: 3px; } .so-tag { display: inline-block; background: #e1ecf4; color: #39739d; font-size: 10px; padding: 1px 6px; border-radius: 3px; margin-left: 2px; } /* SPINNER / SKELETON */ .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent2); border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { color: var(--muted); font-size: 13px; } /* Skeleton shimmer for loading state */ .skel { background: linear-gradient(90deg, var(--bg3) 25%, var(--border) 50%, var(--bg3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; height: 14px; margin: 6px 0; } .skel-title { width: 70%; height: 16px; } .skel-line { width: 90%; } .skel-short { width: 40%; } @keyframes shimmer { to { background-position: -200% 0; } } /* ── USER BAR ── */ #user-bar { position: fixed; top: 16px; right: 20px; z-index: 90; display: flex; align-items: center; gap: 8px; } .signin-btn { font-size: 13px; color: var(--muted); background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 14px; cursor: pointer; transition: color .12s, border-color .12s; } .signin-btn:hover { color: var(--accent2); border-color: var(--accent2); } #user-info { display: flex; align-items: center; gap: 8px; } .user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .user-name { font-size: 13px; color: var(--muted); } .signout-btn { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; } .signout-btn:hover { color: var(--text); } /* ── RANKED RESULT CARDS ── */ .result-card { display: block; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; border-radius: 6px; margin-bottom: 1px; border-left: 3px solid transparent; transition: background .12s, border-color .12s; } .result-card:last-child { border-bottom: none; margin-bottom: 0; } .result-card:hover { background: var(--bg3); } .result-card.cat--blue { border-left-color: #60a5fa; } .result-card.cat--green { border-left-color: #4ade80; } .result-card.cat--orange { border-left-color: #fb923c; } .result-card.cat--purple { border-left-color: #c084fc; } .result-card.cat--grey { border-left-color: var(--border); } .result-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; } .cat-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; } .cat-badge--blue { background: rgba(59,130,246,.12); color: #60a5fa; } .cat-badge--green { background: rgba(34,197,94,.12); color: #4ade80; } .cat-badge--orange { background: rgba(249,115,22,.12); color: #fb923c; } .cat-badge--grey { background: var(--bg3); color: var(--muted); } .cat-badge--purple { background: rgba(168,85,247,.12); color: #c084fc; } .result-favicon { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; } .result-source { font-size: 12px; color: var(--muted); } .result-time { font-size: 12px; color: var(--muted); } /* Source-type badges — colour-coded so users spot community / official / reviewer / news at a glance. Vinay 2026-05-25: "improve our links". */ .src-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; flex-shrink: 0; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 3px; } .src-community { background: rgba(255,69,0,.13); color: #ff6b3a; } .src-news { background: rgba(249,115,22,.13); color: #fb923c; } .src-official { background: rgba(34,197,94,.13); color: #4ade80; } .src-reviewer { background: rgba(250,204,21,.15); color: #facc15; } .src-reference { background: rgba(148,163,184,.18); color: #94a3b8; } .src-video { background: rgba(239,68,68,.13); color: #f87171; } .src-database { background: rgba(168,85,247,.15); color: #c084fc; } .src-blog { background: rgba(59,130,246,.13); color: #60a5fa; } .result-date { font-size: 11px; color: var(--muted); font-weight: 500; padding-left: 4px; flex-shrink: 0; } /* Freshness chip — color-coded by recency. User-asked 2026-05-20. */ .fresh-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; } .fresh-hot { background: rgba(255,68,68,.15); color: #ff6b6b; } /* <1d */ .fresh-week { background: rgba(255,165,0,.15); color: #ffa94d; } /* <1w */ .fresh-month { background: rgba(96,165,250,.15); color: #60a5fa; } /* <1m */ .fresh-old { background: var(--bg3); color: var(--muted); } /* India / World section headers inside the Results card. */ .region-head { font-size: 13px; font-weight: 700; color: var(--text); padding: 14px 0 8px; border-bottom: 1px solid var(--border); margin: 8px 0 10px; display: flex; align-items: center; gap: 6px; letter-spacing: .02em; } .region-head:first-of-type { padding-top: 4px; } .region-head-world { color: var(--muted); } .result-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: 4px; } .result-card:hover .result-title { color: var(--accent2); } .result-snippet { font-size: 13px; color: var(--muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── FILMS GRID ── */ .films-filters { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; } .films-filter-btn { font-size: 11px; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: all .15s; } .films-filter-btn.active { background: var(--accent2); color: #fff; border-color: var(--accent2); } .films-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; } .film-card { width: 90px; text-decoration: none; color: inherit; transition: transform .15s; } .film-card:hover { transform: translateY(-2px); } .film-poster { width: 90px; height: 135px; object-fit: cover; border-radius: 6px; background: var(--bg3); display: block; } .film-title { font-size: 11px; font-weight: 500; margin-top: 5px; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .film-meta { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ── SHARED QUALITY ENGINE — evidence badges + ranked lists + movie panel ── */ .qbadge { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; align-items: center; } .qb { font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 3px 7px; border-radius: 999px; background: var(--bg3); color: var(--text); } .qb-imdb { background: #f5c51822; color: #b8860b; } .qb-rt { background: #fa320a18; color: #d33; } .qb-meta { background: #66cc3318; color: #4a8a1f; } .qb-star { background: #f5c51822; color: #b8860b; } .qb-count { background: var(--bg3); color: var(--muted); font-weight: 500; } .qb-price { background: #1a73e818; color: #1a73e8; } .qb-dist { background: var(--bg3); color: var(--muted); font-weight: 500; } .qwhy { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; } /* Ranked quality list (best movies / products / books / places) */ .qlist { display: flex; flex-direction: column; gap: 2px; } .qrow { display: flex; gap: 12px; align-items: flex-start; padding: 9px 6px; text-decoration: none; color: inherit; border-radius: 8px; border-bottom: 1px solid var(--border, rgba(128,128,128,.12)); } .qrow:last-child { border-bottom: none; } .qrow:hover { background: var(--bg3); } .qrank { font-size: 15px; font-weight: 700; color: var(--muted); min-width: 22px; text-align: center; padding-top: 2px; } .qthumb { width: 54px; height: 80px; object-fit: cover; border-radius: 5px; background: var(--bg3); flex: 0 0 auto; } .qbody { flex: 1; min-width: 0; } .qtitle { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; } .qsub { font-size: 12px; color: var(--muted); margin-top: 2px; } /* Horizontal poster rail (Google-style carousel, our ranking) */ .rail { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .rail::-webkit-scrollbar { height: 6px; } .rail::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 999px; } .rail-card { flex: 0 0 auto; width: 124px; text-decoration: none; color: inherit; scroll-snap-align: start; } .rail-poster-wrap { position: relative; } .rail-poster { width: 124px; height: 186px; object-fit: cover; border-radius: 10px; background: var(--bg3); display: block; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: transform .15s; } .rail-card:hover .rail-poster { transform: translateY(-3px); } .rail-rank { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.72); border-radius: 7px; padding: 0 5px; } .rail-rating { position: absolute; bottom: 6px; right: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.72); border-radius: 7px; padding: 2px 6px; } .rail-title { font-size: 12px; font-weight: 600; margin-top: 6px; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rail-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } .rail-watch { font-size: 11px; font-weight: 600; color: #1a73e8; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Sort tabs on movie lists (Best / Newest / Most reviewed / In theatres) */ .ml-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; } .ml-tab { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border, rgba(128,128,128,.2)); background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .ml-tab:hover { background: var(--bg3); } .ml-tab.active { background: #1a73e8; color: #fff; border-color: #1a73e8; } /* Signal-based sort tabs (Composite / By IMDb / By RT / By Letterboxd / …) Sits below the source-of-truth tabs. Re-sorts the grid client-side. */ .sig-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding-top: 2px; border-top: 1px dashed var(--border, rgba(128,128,128,.18)); padding-top: 10px; } .sig-tab { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border, rgba(128,128,128,.18)); background: transparent; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .sig-tab:hover:not(:disabled) { background: var(--bg3); } .sig-tab.active { background: #6d28d9; color: #fff; border-color: #6d28d9; } .sig-tab[disabled], .sig-tab.disabled { opacity: .35; cursor: not-allowed; } /* Per-card signal pill row — single line of tiny tier badges below title. Round-2 (Vinay 2026-05-25): flex-wrap removed, overflow hidden — pills that don't fit just clip rather than push the card height. */ .mcard-signals { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 3px; overflow: hidden; } .sig-pill { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px; line-height: 1.2; white-space: nowrap; letter-spacing: .1px; } /* Pager (Prev / Next) for browsing big movie lists 10 at a time */ .ml-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } .ml-pg-btn { font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border, rgba(128,128,128,.25)); background: transparent; color: var(--text); cursor: pointer; } .ml-pg-btn:hover:not(:disabled) { background: var(--bg3); } .ml-pg-btn:disabled { opacity: .4; cursor: default; } .ml-pg-info { font-size: 12px; color: var(--muted); min-width: 80px; text-align: center; } /* Card-grid layout — wrapping movie cards (for big 'best X' lists) Round-2 (Vinay 2026-05-25): denser Netflix-like wall. Tighter gap, smaller text under poster, single-line signal pill row. The poster dominates. */ .mgrid { display: grid; gap: 8px; /* Slightly smaller min so more posters fit per row on desktop. */ grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); padding: 4px 0; } @media (max-width: 480px) { .mgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } .mcard { text-decoration: none; color: inherit; background: var(--bg2, #fff); border: 1px solid var(--border, rgba(128,128,128,.14)); border-radius: 10px; overflow: hidden; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; } .mcard:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.14); } .mcard.ml-extra { display: none; } /* hidden until "Show all" */ .mcard-poster-wrap { position: relative; } .mcard-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--bg3); display: block; } .mcard-rank { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 5px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.74); border-radius: 6px; } .mcard-rating { position: absolute; bottom: 6px; right: 6px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.74); border-radius: 6px; padding: 1px 6px; } /* Tighter body — was 8/9/10 → halved to 4/5. Poster dominates. */ .mcard-body { padding: 4px 5px 5px; } .mcard-title { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mcard-meta { font-size: 10px; color: var(--muted); margin-top: 1px; } .mcard-watch { font-size: 10px; font-weight: 600; color: #1a73e8; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* P4 — Availability pills row on movie cards. Tightened to a single line. */ .mcard-avail { display: flex; flex-wrap: nowrap; gap: 3px; margin-top: 3px; overflow: hidden; } .mavail-pill { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: rgba(34, 139, 84, .12); color: #14753d; line-height: 1.2; white-space: nowrap; letter-spacing: .1px; } .mavail-theatres { background: rgba(217, 119, 6, .14); color: #92510a; } .mavail-theatres::before { content: '🎬 '; } .mavail-stream::before { content: '▶ '; } @media (prefers-color-scheme: dark) { .mavail-pill { background: rgba(74, 222, 128, .15); color: #86efac; } .mavail-theatres { background: rgba(251, 191, 36, .18); color: #fbbf24; } } /* P3 — Sig-tabs row with decade filter on the right */ .sig-tabs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-top: 10px; border-top: 1px dashed var(--border, rgba(128,128,128,.18)); } .sig-tabs-row .sig-tabs { border-top: none; padding-top: 0; margin: 0; flex: 1 1 auto; } .ml-decade-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); } .ml-decade-label { font-weight: 600; } .ml-decade { font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border, rgba(128,128,128,.25)); background: transparent; color: var(--text); cursor: pointer; } .mcard.ml-decade-hidden { display: none !important; } /* Rich single-movie panel */ .movie-panel { display: flex; gap: 16px; flex-wrap: wrap; } .movie-poster { width: 120px; height: 180px; object-fit: cover; border-radius: 8px; background: var(--bg3); box-shadow: 0 2px 10px rgba(0,0,0,.15); flex: 0 0 auto; } .movie-info { flex: 1; min-width: 200px; } .movie-title { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.25; } .movie-tagmeta { font-size: 12px; color: var(--muted); margin-top: 3px; } .movie-scores { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .movie-score { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 12px; border-radius: 9px; background: var(--bg3); min-width: 58px; } .movie-score b { font-size: 16px; line-height: 1; } .movie-score span { font-size: 10px; color: var(--muted); } .movie-consensus { font-size: 13px; color: var(--text); line-height: 1.5; margin: 8px 0; } .movie-credits { font-size: 12px; color: var(--muted); line-height: 1.6; } .in-theatres { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: #b8860b; background: #f5c51822; padding: 4px 12px; border-radius: 999px; } .movie-watch { margin-top: 12px; } .wlabel { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; } .watch-btns { display: flex; flex-wrap: wrap; gap: 8px; } .watch-btn { font-size: 14px; font-weight: 700; padding: 9px 16px; border-radius: 10px; background: #1a73e8; color: #fff !important; text-decoration: none; box-shadow: 0 2px 8px rgba(26,115,232,.3); transition: transform .12s; } .watch-btn:hover { transform: translateY(-1px); } .watch-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #1a73e818; color: #1a73e8; text-decoration: none; } .movie-imdb { margin-top: 10px; } .imdb-link { font-size: 13px; font-weight: 600; color: #1a73e8; text-decoration: none; } /* Inline trailer (YouTube embed), responsive 16:9 */ .movie-trailer { margin-top: 16px; } .mt-frame { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; } .mt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* AI multi-provider card */ .ai-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; } .ai-tab { padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; transition: all .15s; } .ai-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .ai-consensus { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-bottom: 8px; } .ai-consensus--ok { background: #e8f5e9; color: #0a8a3a; border: 1px solid #c8e6c9; } .ai-consensus--warn { background: #fff8e1; color: #b07000; border: 1px solid #ffe0b2; } .ai-panel { display: none; } .ai-panel.active { display: block; } .ai-panel p { line-height: 1.65; color: var(--text); margin-bottom: 8px; } .ai-panel p:last-child { margin-bottom: 0; } .ai-panel code { background: var(--bg2); padding: 1px 5px; border-radius: 3px; font-size: 13px; font-family: monospace; } .ai-prompt { margin-top: 10px; } .ai-prompt summary { font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; } .ai-prompt pre { margin-top: 6px; padding: 8px 10px; background: var(--bg2); border-radius: 6px; font-size: 12px; white-space: pre-wrap; word-break: break-word; color: var(--muted); font-family: monospace; } .show-more-btn { display: block; width: 100%; margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border); color: var(--muted); font-size: 13px; cursor: pointer; text-align: center; transition: background .15s; } .show-more-btn:hover { background: var(--bg2); color: var(--text); } .result-profile-match { font-size: 12px; color: #4ade80; margin-top: 4px; } .intent-badge { font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 8px; text-transform: capitalize; } /* ── DISAMBIGUATION ── */ .disambig-chip { background: rgba(251,191,36,.07); border: 1px solid rgba(251,191,36,.2); border-radius: 8px; padding: 9px 14px; font-size: 13px; color: var(--muted); margin-bottom: 12px; } .disambig-alt { background: none; border: none; color: var(--accent2); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; } /* ── WHY THESE RESULTS ── */ .why-wrap { margin-bottom: 10px; } .why-btn { font-size: 11px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; } .why-btn:hover { color: var(--text); } .why-panel { display: none; margin-top: 6px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted); } .why-signin { color: var(--accent2); text-decoration: none; } .why-signin:hover { text-decoration: underline; } .why-anon { font-size: 12px; color: var(--muted); margin-bottom: 8px; } .why-anon a { color: var(--accent2); text-decoration: none; } .why-anon a:hover { text-decoration: underline; } /* Mobile responsive */ @media (max-width: 600px) { #app { padding: 48px 16px 80px; } .logo { font-size: 42px; letter-spacing: 0.12em; } .tagline { font-size: 13px; } #q { font-size: 15px; padding: 13px 16px; } .yt-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .topsite-row { flex-direction: column; } .topsite-btn { align-self: flex-start; margin-top: 10px; } .hero-wrap { flex-direction: column; } .hero-img { width: 60px; height: 60px; } .gate-box { padding: 32px 24px; } .wx-icon { font-size: 40px; } .wx-temp { font-size: 32px; } /* 2026-05-20 mobile polish */ .yt-bar { flex-direction: column; align-items: stretch; padding: 10px; } .yt-bar-msg { min-width: 0; font-size: 12px; text-align: center; } .yt-play-selected { width: 100%; } .yt-add-badge { width: 36px; height: 36px; font-size: 20px; top: 6px; right: 6px; } .result-snippet { font-size: 12px; line-height: 1.4; } .result-card { padding: 10px 8px; } .region-head { font-size: 12px; padding: 10px 0 6px; } .fresh-chip { font-size: 10px; padding: 1px 6px; } .card { padding: 12px; } .card-label { font-size: 14px; } /* Pin suggestions to bottom of visible screen — sits just above keyboard */ #suggestions { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; max-height: 45vh; overflow-y: auto; } } /* ── SHOPPING ── */ .shop-filter-label { font-size: 11px; color: #f59e0b; font-weight: 400; margin-left: 8px; } .shopping-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .shop-card { display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--text); transition: box-shadow .15s; } .shop-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); } .shop-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 10px; } .shop-img--empty { background: var(--bg3); } .shop-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .shop-title { font-size: 12px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .shop-rating { font-size: 12px; color: #f59e0b; font-weight: 600; } .shop-price { font-size: 13px; font-weight: 700; } .shop-source { font-size: 11px; color: var(--muted); margin-top: auto; padding-top: 4px; } /* 🔎 Sample-query showcase — single horizontal scrolling strip (user asked for horizontal, not vertical grid). Swipe / horizontal-scroll to see more pills. */ #home-samples .sample-grid { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding: 2px 2px 12px; -webkit-overflow-scrolling: touch; } #home-samples .sample-grid::-webkit-scrollbar { height: 6px; } #home-samples .sample-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 999px; } .sample-pill { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; cursor: pointer; background: var(--bg2, rgba(0,0,0,0.04)); border: 1px solid var(--border, rgba(0,0,0,0.08)); color: var(--text); white-space: nowrap; transition: background .15s, border-color .15s, transform .1s; font-family: inherit; } .sample-pill:hover { background: var(--bg3, rgba(0,0,0,0.07)); border-color: var(--accent2, #1a73e8); } .sample-pill:active { transform: scale(0.97); } .sample-emoji { font-size: 18px; line-height: 1; } .sample-label { font-size: 12px; font-weight: 700; color: var(--text); } .sample-q { font-size: 11px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; margin-left: 4px; } /* 🟢 Latest activity — Tweets / Instagram / Facebook rails. sec-social mounts above all main sections for celebrity / news queries. */ #sec-social { border-left: 3px solid #1d9bf0; } #sec-social .soc-rail { margin-top: 14px; } #sec-social .soc-rail:first-of-type { margin-top: 6px; } #sec-social .soc-sub { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; } #sec-social .soc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (min-width: 640px) { #sec-social .soc-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 900px) { #sec-social .soc-grid { grid-template-columns: repeat(6, 1fr); } } #sec-social .soc-igtile { display: block; } #sec-social .soc-tweets { max-width: 560px; } #sec-social .soc-tweet blockquote.twitter-tweet { margin: 0 0 14px !important; } #sec-social .soc-fbrow:last-child { border-bottom: 0 !important; } /* ─── INTENT CHIPS (v=296+, 2026-05-26) ─── */ /* Horizontal scrollable row of intent chips above the entity card. */ .intentchips-row { display: block; margin: 0 0 12px; padding: 0; background: transparent; border: 0; } .intentchips-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; } .intentchips-inner::-webkit-scrollbar { height: 4px; } .intentchips-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .intentchip { flex: 0 0 auto; padding: 7px 14px; font-size: 13px; font-weight: 500; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 18px; cursor: pointer; white-space: nowrap; transition: border-color .12s, color .12s, background .12s; font-family: inherit; } .intentchip:hover { border-color: var(--accent); color: var(--accent); } .intentchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Category accents — a coloured dot on the left edge. */ .intentchip.ic-transactional { border-left: 3px solid #10b981; padding-left: 12px; } .intentchip.ic-navigational { border-left: 3px solid #6d28d9; padding-left: 12px; } .intentchip.ic-news { border-left: 3px solid #ef4444; padding-left: 12px; } .intentchip.ic-info { /* no extra accent */ } /* ─── SITE PREVIEW (v=296+, 2026-05-26) ─── */ .brand-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .sp-preview-btn { padding: 7px 12px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color .12s, color .12s; } .sp-preview-btn:hover { border-color: var(--accent); color: var(--accent); } .sp-preview-btn:disabled { opacity: .6; cursor: default; } .sp-preview-mount { display: none; } .sp-panel { margin-top: 12px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; } .sp-screenshot { margin: 8px 0 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); max-height: 420px; } .sp-screenshot img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; object-position: top; } .sp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .sp-host { font-size: 13px; color: var(--muted); font-weight: 500; } .sp-home-btn { display: inline-block; padding: 6px 14px; background: var(--accent); color: #fff; text-decoration: none; border-radius: 8px; font-size: 13px; font-weight: 500; transition: background .12s; } .sp-home-btn:hover { background: var(--accent2, var(--accent)); } .sp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .sp-action { padding: 5px 10px; background: var(--bg3); color: var(--text); text-decoration: none; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; } .sp-action:hover { border-color: var(--accent); color: var(--accent); } .sp-sections { display: flex; flex-direction: column; gap: 12px; } .sp-section { padding: 10px 12px; background: var(--bg3); border-radius: 8px; border: 1px solid var(--border); } .sp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; } .sp-section-title { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; } .sp-section-title:hover { color: var(--accent); text-decoration: underline; } .sp-meta { font-size: 11px; color: var(--muted); } .sp-section-desc { font-size: 13px; color: var(--text); opacity: .85; line-height: 1.45; margin-bottom: 6px; } .sp-facts { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.5; } .sp-facts li { margin: 1px 0; } .sp-subitems { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; } .sp-subitem { padding: 3px 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; color: var(--text); text-decoration: none; font-size: 11px; } .sp-subitem:hover { border-color: var(--accent); color: var(--accent); } .sp-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } .sp-loading { padding: 8px 4px; font-size: 13px; color: var(--muted); } .sp-empty { padding: 8px 4px; font-size: 13px; color: var(--muted); } @media (max-width: 600px) { .brand-actions { flex-direction: column; align-items: stretch; gap: 6px; } .sp-preview-btn, .topsite-btn { align-self: stretch; text-align: center; } } /* ─── TASTE engine UI (v=296+ taste, Commit 3) ───────────────────── Per-card ❤ / ⇩ feedback buttons + ⚙ gear + topic-blocklist panel + toast. All scoped under .ti-* so we don't collide with existing classes. */ /* ❤ / ⇩ feedback in bottom-right of each .news-item */ .news-item { position: relative; } .ti-fb { position: absolute; bottom: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease; } .news-item:hover .ti-fb, .news-item:focus-within .ti-fb { opacity: 1; } .ti-fb-btn { cursor: pointer; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); width: 22px; height: 22px; border-radius: 50%; font-size: 11px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; } .ti-fb-btn:hover { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); } .ti-fb-more:hover { color: #f472b6; border-color: #f472b6; } .ti-fb-less:hover { color: #fbbf24; border-color: #fbbf24; } .ti-fb-btn.ti-fb-on { background: rgba(244,114,182,0.18); color: #f472b6; border-color: #f472b6; } /* discover badge: small grey pill next to source-name */ .ti-disc-badge { display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 10px; line-height: 14px; border-radius: 7px; background: rgba(167,139,250,0.15); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.3); vertical-align: 1px; } /* ⚙ gear next to card-label */ .card-label .ti-gear { background: transparent; border: 0; color: rgba(255,255,255,0.4); font-size: 12px; cursor: pointer; margin-left: 8px; padding: 0 4px; } .card-label .ti-gear:hover { color: #a78bfa; } /* Toast — bottom-center, briefly visible */ .ti-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(20, 20, 28, 0.95); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; border: 1px solid rgba(167,139,250,0.3); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .ti-toast.ti-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Topic blocklist panel — right-side drawer */ .ti-panel { position: fixed; top: 20px; right: 20px; width: 320px; max-height: calc(100vh - 40px); overflow-y: auto; background: #15161b; color: #fff; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.55); z-index: 10001; font-size: 13px; } .ti-panel-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 4px; } .ti-panel-close { background: transparent; border: 0; color: rgba(255,255,255,0.5); font-size: 18px; cursor: pointer; padding: 0 4px; } .ti-panel-close:hover { color: #fff; } .ti-panel-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 10px; } .ti-panel-row { display: grid; grid-template-columns: 80px 70px 1fr; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .ti-panel-cat { text-transform: capitalize; font-weight: 500; } .ti-panel-cnt { color: rgba(255,255,255,0.4); font-size: 11px; } .ti-panel-tog { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); padding: 4px 6px; border-radius: 6px; font-size: 10px; cursor: pointer; } .ti-panel-tog:hover { background: rgba(255,255,255,0.08); color: #fff; } .ti-panel-tog.ti-panel-tog--on { background: rgba(220,38,38,0.18); color: #fca5a5; border-color: rgba(220,38,38,0.45); } .ti-panel-foot { margin-top: 10px; text-align: right; } .ti-panel-reset { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); padding: 4px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; } .ti-panel-reset:hover { color: #fca5a5; border-color: #fca5a5; } /* ─── NEWS FILTER (.nf-*) — per-card user controls (news-filter Commit 2+) Parallel infrastructure to TasteEngine (.ti-*). Single namespace prefix so styles can't collide. Light + dark themes both supported via the :root / dark CSS-var system. */ /* ⋯ button injected into every news-shaped item. Absolute, top-right, visible on hover/focus-within of the host row to keep the layout uncluttered when the user isn't looking. */ .nf-dots { position: absolute; top: 6px; right: 6px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--muted); width: 24px; height: 24px; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease, border-color .15s ease; padding: 0; z-index: 5; } .nf-dots:hover { background: var(--bg3); border-color: var(--border); color: var(--text); } /* Reveal on row hover/focus-within so it's discoverable but not noisy. */ .news-item:hover .nf-dots, .news-item:focus-within .nf-dots, [data-nf-row]:hover .nf-dots, [data-nf-row]:focus-within .nf-dots, .nf-dots:focus { opacity: 1; } /* On touch where :hover doesn't reliably fire — keep them dim-visible. */ @media (hover: none) { .nf-dots { opacity: 0.5; } } /* Popover anchored under the ⋯ button. Positioned via inline style at JS time (left/top in document coordinates) so we don't fight with the host card's overflow. */ .nf-pop { position: absolute; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.20); padding: 4px; width: 230px; z-index: 10005; font-family: inherit; } .nf-pop-row { display: block; width: 100%; text-align: left; background: transparent; border: 0; color: var(--text); font-size: 13px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-family: inherit; } .nf-pop-row:hover { background: var(--bg3); } /* Toast confirmation — bottom-center, briefly visible. Separate from the F3 .ti-toast so animations + z-index don't collide. */ .nf-toast { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(20, 20, 28, 0.96); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; border: 1px solid rgba(167,139,250,0.30); z-index: 10010; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; } .nf-toast.nf-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Footer row on #sec-news: "Filters: 3 sources … [Manage]" */ .nf-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .nf-foot-text { font-weight: 500; } .nf-foot-muted { color: var(--muted); opacity: 0.8; } .nf-foot-manage { background: transparent; border: 1px solid var(--border); color: var(--accent); padding: 4px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-family: inherit; } .nf-foot-manage:hover { background: var(--bg3); border-color: var(--accent); } /* Manage panel — modal-ish drawer on the right. */ .nf-manage-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10020; } .nf-manage { position: fixed; top: 20px; right: 20px; width: 380px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.40); z-index: 10021; font-size: 13px; font-family: inherit; } .nf-manage-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; margin-bottom: 4px; } .nf-manage-sub { font-size: 11px; color: var(--muted); margin-bottom: 12px; } .nf-manage-section { margin-top: 14px; } .nf-manage-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .nf-manage-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); gap: 8px; } .nf-manage-row:last-child { border-bottom: 0; } .nf-manage-label { font-size: 13px; word-break: break-all; flex: 1; min-width: 0; } .nf-manage-meta { font-size: 11px; color: var(--muted); margin-right: 8px; } .nf-manage-x { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .nf-manage-x:hover { color: #ef4444; border-color: #ef4444; } .nf-manage-close { background: transparent; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; } .nf-manage-close:hover { color: var(--text); } .nf-manage-empty { color: var(--muted); font-size: 12px; padding: 6px 0; font-style: italic; } /* ── VOICE-RT (OpenAI Realtime floating mic + modal) ──────────────────────── * Parallel to the existing in-search-bar 🎤 (Web Speech). The floating mic * sits at bottom-right but ABOVE the test-runner ▶ pill (bottom:14px right:14px). * Backdrop is intentionally ~30% so the search results behind remain visible * — the assistant updates them live via the search_intutiv tool. */ /* #vrt-mic-btn styles set inline in voice.js (Apple-style pill button with full "🎙 Voice search" label). Removed the old 52px circle CSS that was forcing the button to be icon-only and overriding the inline pill style. */ #vrt-mic-btn:active { transform: scale(0.96); } #vrt-modal { position: fixed; inset: 0; z-index: 10000; display: none; } #vrt-modal.vrt-open { display: block; } .vrt-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); /* ~30% — results stay visible behind */ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .vrt-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); color: var(--text); } .vrt-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .vrt-close:hover { color: var(--text); background: var(--bg3); } .vrt-status-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .vrt-mic-indicator { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--bg3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vrt-mic-indicator .vrt-mic-glyph { font-size: 24px; line-height: 1; } .vrt-mic-indicator .vrt-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; } /* listening: pulsing ring */ .vrt-mic-indicator.vrt-listening { background: rgba(124, 58, 237, 0.18); } .vrt-mic-indicator.vrt-listening .vrt-ring { border-color: var(--accent); animation: vrt-pulse 1.4s ease-out infinite; } @keyframes vrt-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.45); opacity: 0; } } /* speaking: solid filled */ .vrt-mic-indicator.vrt-speaking { background: var(--accent); color: #fff; } .vrt-mic-indicator.vrt-speaking .vrt-mic-glyph { color: #fff; } .vrt-status-text { font-size: 14px; color: var(--muted); } .vrt-transcripts { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .vrt-tr-block { background: var(--bg3); border-radius: 10px; padding: 10px 12px; } .vrt-tr-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; font-weight: 600; } .vrt-tr-text { font-size: 14px; line-height: 1.45; color: var(--text); min-height: 18px; word-break: break-word; } .vrt-hint { font-size: 12px; color: var(--muted); text-align: center; padding-top: 4px; } @media (max-width: 480px) { #vrt-mic-btn { width: 48px; height: 48px; font-size: 20px; bottom: 56px; } .vrt-panel { padding: 22px 18px 18px; } } /* ── 📖 SEC-BOOK (individual book + author card) ───────────────────────── Class family: .bk-*. Cover image dominates the left column; metadata, description, subjects and buy-buttons stack on the right. Author-mode adds a 4×2 work grid below the bio. */ .sec-book .card-label { margin-bottom: 8px; } .bk-wrap { display: flex; gap: 16px; align-items: flex-start; } .bk-cover-col { flex: 0 0 120px; } .bk-cover { width: 120px; /* v=580: explicit height so the column reserves space even before the image bytes arrive — was height:auto which collapsed to 0 on slow networks, making the card look like the cover failed to load. */ height: 180px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); display: block; object-fit: cover; background: #f5f5f5; } .bk-cover-empty { width: 120px; height: 180px; border-radius: 6px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #bbb; } .bk-body { flex: 1 1 auto; min-width: 0; } .bk-title { font-size: 18px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; color: var(--text, #111); } .bk-author { font-size: 13px; color: var(--muted, #666); margin-bottom: 6px; } .bk-author-link { color: var(--link, #1a73e8); text-decoration: none; } .bk-author-link:hover { text-decoration: underline; } .bk-meta { font-size: 12px; color: var(--muted, #666); margin-bottom: 8px; } .bk-desc { font-size: 13px; color: var(--text, #333); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; } .bk-desc-open { -webkit-line-clamp: unset; display: block; } .bk-more-btn { font-size: 12px; color: var(--link, #1a73e8); cursor: pointer; text-decoration: none; margin-bottom: 8px; display: inline-block; } .bk-more-btn:hover { text-decoration: underline; } .bk-subjects { margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px; } .bk-chip { display: inline-block; font-size: 11px; padding: 2px 8px; background: var(--chip-bg, #f1f3f4); color: var(--chip-text, #444); border-radius: 10px; } .bk-isbn { font-size: 11px; color: var(--muted, #888); margin: 6px 0 8px; font-family: ui-monospace, Menlo, monospace; } .bk-buy { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .bk-buy-btn { display: inline-block; font-size: 12px; padding: 6px 14px; background: var(--btn-bg, #fff); color: var(--btn-text, #1a73e8); border: 1px solid var(--btn-border, #dadce0); border-radius: 16px; text-decoration: none; font-weight: 500; } .bk-buy-btn:hover { background: #f8f9fa; } .bk-amazon { color: #ff9900; border-color: #ff9900; } .bk-goodreads { color: #553B08; border-color: #c9b89a; } .bk-ol { color: #228; border-color: #aab; } /* Author mode */ .bk-author-wrap { padding-top: 2px; } .bk-author-head { margin-bottom: 8px; } .bk-author-name { font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--text, #111); } .bk-author-dates { font-size: 12px; color: var(--muted, #888); margin-top: 2px; } .bk-works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 0 8px; } .bk-work-tile { display: block; text-decoration: none; color: inherit; cursor: pointer; } .bk-work-tile:hover .bk-work-title { color: var(--link, #1a73e8); } .bk-work-cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: #f5f5f5; box-shadow: 0 1px 4px rgba(0,0,0,0.10); display: block; } .bk-work-cover-empty { display: flex; align-items: center; justify-content: center; font-size: 24px; color: #bbb; } .bk-work-title { font-size: 12px; line-height: 1.3; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text, #333); } .bk-work-year { font-size: 11px; color: var(--muted, #888); } @media (max-width: 480px) { .bk-wrap { gap: 12px; } .bk-cover-col { flex-basis: 90px; } .bk-cover, .bk-cover-empty { width: 90px; max-height: 135px; height: auto; } .bk-cover-empty { height: 135px; } .bk-title { font-size: 16px; } .bk-works-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } } /* ═══════════════════════════════════════════════════════════════════════ RICH-CARD vocabulary (2026-05-27) — reusable across section types. Vinay: "make every section look like the Atomic Habits book card." Each rich card: card-label · image (left) · title · sub · meta · description · show more · chips · 3 action buttons. Used by: sec-brand (v=321+). Other cards rolling out incrementally. ═══════════════════════════════════════════════════════════════════════ */ .rcard-row{display:flex;gap:18px;align-items:flex-start} .rcard-img{flex:0 0 auto;border-radius:10px;background:#f5f5f7;display:flex;align-items:center;justify-content:center;overflow:hidden} .rcard-img.img-square{width:90px;height:90px;border-radius:14px} .rcard-img.img-square.is-brand{background:#000;padding:12px} .rcard-img.img-square.is-brand img{width:100%;height:100%;object-fit:contain} .rcard-img.img-square.is-light{background:#fafafa;border:1px solid #f0f0f0} .rcard-img.img-circle{width:96px;height:96px;border-radius:50%} /* Vinay 2026-05-27 (Image #106, item #23): Modi About card cropped to just his beard/chin. Wikipedia portraits frame the face in the upper third, so plain object-position:center crops the face out. Bias up to 22% from the top so the face stays in frame across most portraits. */ .rcard-img.img-circle img{width:100%;height:100%;object-fit:cover;object-position:50% 22%} .rcard-img.img-poster{width:110px;height:165px;border-radius:8px} .rcard-img.img-poster img{width:100%;height:100%;object-fit:cover;display:block} .rcard-body{flex:1;min-width:0} .rcard-title{font:700 24px/1.18 -apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;letter-spacing:-0.015em;color:#1d1d1f;margin-bottom:4px} .rcard-by{font-size:15px;color:#0066cc;font-weight:400;margin-bottom:5px} .rcard-by a{color:#0066cc;text-decoration:none} .rcard-meta{font-size:13px;color:#86868b;margin-bottom:12px} .rcard-desc{font-size:15px;line-height:1.5;color:#1d1d1f;margin-bottom:6px} .rcard-more{display:inline-block;color:#0066cc;font-size:14px;text-decoration:none;font-weight:500;margin-bottom:14px;cursor:pointer;background:none;border:none;padding:0} .rcard-more:hover{text-decoration:underline} .rcard-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .rcard-chip{background:#f0f0f0;color:#1d1d1f;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:400;text-decoration:none;cursor:pointer;transition:background .15s} .rcard-chip:hover{background:#e5e5e5} .rcard-actions{display:flex;gap:8px;flex-wrap:wrap} .rcard-btn{padding:8px 20px;border-radius:99px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;border:1.5px solid;display:inline-block;background:#fff;transition:transform .12s,background .15s} .rcard-btn:hover{transform:translateY(-1px)} .rcard-btn.rcard-btn-amazon{color:#ff9500;border-color:#ff9500} .rcard-btn.rcard-btn-amazon:hover{background:#fff8ef} .rcard-btn.rcard-btn-grey{color:#515154;border-color:#d1d1d6} .rcard-btn.rcard-btn-grey:hover{border-color:#86868b} .rcard-btn.rcard-btn-blue{color:#0066cc;border-color:#0066cc} .rcard-btn.rcard-btn-blue:hover{background:#f0f7ff} @media (max-width:680px){ .rcard-row{flex-direction:column;gap:14px} .rcard-title{font-size:22px} .rcard-img.img-square{width:72px;height:72px} .rcard-img.img-circle{width:80px;height:80px} .rcard-img.img-poster{width:96px;height:144px} } /* ═══════════════════════════════════════════════════════════════════════ RED-OUTLINE FRAME (2026-05-27) — Vinay: "Outlined in red. Match to match to 26" (the test-grid presentation). Every card gets a red dashed border + a red callout banner above using the existing card-label text. Scoped under html[data-newui="on"] so it ships only with the new theme. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] #results { padding-top: 14px; } /* Match the test-grid presentation exactly: solid 8px red border, rounded corners, white card, red callout banner ABOVE with a small downward arrow pointing into the card. Vinay 2026-05-27: 'just follow the guidelines of that and make it.' Source guideline = /tmp/comp-shoot-annotated.mjs. */ html[data-newui="on"] .card { border: 8px solid #e50914 !important; border-radius: 16px !important; padding: 22px 24px !important; background: #ffffff !important; position: relative; margin-top: 44px !important; box-shadow: 0 6px 20px rgba(229, 9, 20, 0.12) !important; overflow: visible; } /* Vinay 2026-05-27: 'Don't give in-touch banner / arrow. Just left-centred, coloured red, not too thin. It is very jarring.' Removed the protruding arrow + centered position. Banner now sits at the LEFT, flat against the card edge, no arrow, softer shadow — less attention-grabbing. */ html[data-newui="on"] .card > .card-label { position: absolute !important; top: -22px; left: 18px !important; background: #e50914 !important; color: #ffffff !important; padding: 9px 18px !important; border-radius: 10px !important; font: 700 13px/1 -apple-system, BlinkMacSystemFont, sans-serif !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; box-shadow: 0 4px 10px rgba(229, 9, 20, 0.22); z-index: 2; display: inline-flex !important; align-items: center; gap: 7px; margin-bottom: 0 !important; white-space: nowrap; max-width: calc(100% - 36px); overflow: visible !important; } /* Cards without a .card-label render plain (no star, no arrow) per Vinay */ /* ═══════════════════════════════════════════════════════════════════════ YOUTUBE / VIDEOS section polish (Vinay 2026-05-27): 'doesn't follow good UI/UX practices. Labels not large. Very cluttered. Make it beautiful.' Scoped under html[data-newui="on"]. Larger topic headings, hide the wordy instruction bar, cleaner per-tile chrome. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] #home-videos .yt-bar-msg, html[data-newui="on"] #sec-youtube .yt-bar-msg, html[data-newui="on"] #sec-yt .yt-bar-msg { display: none !important; /* the "👇 Tap any thumbnail…" sentence is clutter */ } html[data-newui="on"] #home-videos .yt-play-selected:disabled, html[data-newui="on"] #sec-youtube .yt-play-selected:disabled, html[data-newui="on"] #sec-yt .yt-play-selected:disabled { display: none !important; /* hide the empty "▶ Play 0" pill when nothing queued */ } html[data-newui="on"] #home-videos .yt-bar, html[data-newui="on"] #sec-youtube .yt-bar, html[data-newui="on"] #sec-yt .yt-bar { padding: 0 !important; background: transparent !important; border: none !important; margin-bottom: 8px !important; justify-content: flex-end !important; } html[data-newui="on"] #home-videos .hv-head, html[data-newui="on"] #sec-youtube .hv-head, html[data-newui="on"] #sec-yt .hv-head { font: 700 18px/1.2 -apple-system, BlinkMacSystemFont, sans-serif !important; letter-spacing: -0.012em !important; color: #1d1d1f !important; text-transform: none !important; margin: 22px 0 12px !important; } html[data-newui="on"] #home-videos .hv-group:first-of-type .hv-head, html[data-newui="on"] #sec-youtube .hv-group:first-of-type .hv-head, html[data-newui="on"] #sec-yt .hv-group:first-of-type .hv-head { margin-top: 4px !important; } html[data-newui="on"] #home-videos .yt-card-sub, html[data-newui="on"] #sec-youtube .yt-card-sub, html[data-newui="on"] #sec-yt .yt-card-sub { display: none !important; /* the "(past 24h)" subtext inside the banner — drop it */ } html[data-newui="on"] #home-videos .yt-grid, html[data-newui="on"] #sec-youtube .yt-grid, html[data-newui="on"] #sec-yt .yt-grid { gap: 14px !important; } /* Bigger play button when queued */ html[data-newui="on"] #home-videos .yt-play-selected:not(:disabled), html[data-newui="on"] #sec-youtube .yt-play-selected:not(:disabled), html[data-newui="on"] #sec-yt .yt-play-selected:not(:disabled) { font-size: 15px !important; padding: 12px 24px !important; border-radius: 99px !important; } /* ═══════════════════════════════════════════════════════════════════════ PHOTOS card polish (Vinay 2026-05-27): 'don't show all photos, preview + dropdown, clear labels, larger font.' Hide the wordy subtitle, make category headings (CANNES / WEDDING) larger, style the "Show N more" dropdown trigger as a clean pill that follows good UI/UX. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] #sec-images .hp-subtitle { display: none !important; /* 'Tap the ☐…' instruction is clutter */ } html[data-newui="on"] #sec-images .img-cat-label { font: 700 20px/1.2 -apple-system, BlinkMacSystemFont, sans-serif !important; letter-spacing: -0.012em !important; color: #1d1d1f !important; text-transform: capitalize !important; /* 'cannes' → 'Cannes' (Vinay 2026-05-27) */ margin: 22px 0 14px !important; padding: 0 !important; } html[data-newui="on"] #home-videos .hv-head, html[data-newui="on"] #sec-youtube .hv-head, html[data-newui="on"] #sec-yt .hv-head { text-transform: capitalize !important; /* keep YouTube topic headings Title Case too */ } /* ═══════════════════════════════════════════════════════════════════════ NEWS spacing tightened (Vinay 2026-05-27): 'too much space in news, one after the other'. Bigger thumbs up/down too. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] .news-item { background: transparent !important; border: none !important; border-bottom: 1px solid #ececec !important; border-radius: 0 !important; padding: 14px 0 !important; margin-bottom: 0 !important; } html[data-newui="on"] .news-item:last-child { border-bottom: none !important; } html[data-newui="on"] .news-title { font-size: 15px !important; line-height: 1.35 !important; margin-bottom: 4px !important; } html[data-newui="on"] .news-meta { font-size: 12px !important; margin-top: 4px !important; } /* Bigger thumbs (Vinay: 'make them bigger like we agreed') */ html[data-newui="on"] .nf-vote { width: 44px !important; height: 44px !important; font-size: 20px !important; } /* v=601 (Vinay 2026-06-07): hide inline 👍 / 👎 / ✕ buttons on home news cards. He originally requested them May 27 but they now clutter the home feed. Hidden via CSS — functionality (boost/demote source+topic, per- article hide) still reachable via the ⋯ menu. To restore, drop this block. */ .nf-vote, .nf-hide { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════ PHOTOS collapse — show 1 category by default, rest revealed by JS button 2026-05-29 FIX: same nth-of-type bug as YouTube — was hiding ALL .img-cat-section because #sec-images has .card-label / controls DIVs before the first .img-cat-section. Switched to general-sibling so only sections after the FIRST .img-cat-section are hidden. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] #sec-images .img-cat-section ~ .img-cat-section { display: none !important; } html[data-newui="on"] #sec-images.img-expanded .img-cat-section ~ .img-cat-section { display: block !important; } /* ═══════════════════════════════════════════════════════════════════════ YOUTUBE collapse — show only the first hv-group by default 2026-05-29 FIX: was using :nth-of-type(n+2) which counts ALL DIV siblings, including .card-label + .yt-bar that appear BEFORE the first .hv-group. That made the first .hv-group the 3rd DIV (matched n+2) and got hidden — so the whole #home-videos card appeared empty in v=423. The .hv-group ~ .hv-group selector targets every .hv-group AFTER the first .hv-group sibling, regardless of what other element types precede. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] #home-videos .hv-group ~ .hv-group, html[data-newui="on"] #sec-youtube .hv-group ~ .hv-group, html[data-newui="on"] #sec-yt .hv-group ~ .hv-group { display: none !important; } html[data-newui="on"] #home-videos.yt-expanded .hv-group ~ .hv-group, html[data-newui="on"] #sec-youtube.yt-expanded .hv-group ~ .hv-group, html[data-newui="on"] #sec-yt.yt-expanded .hv-group ~ .hv-group { display: block !important; } /* Generic "Show all" expand button shared by photos + youtube */ html[data-newui="on"] .show-all-btn { width: 100% !important; background: #f5f5f7 !important; color: #1d1d1f !important; border: 1px solid #d1d1d6 !important; border-radius: 12px !important; padding: 14px 22px !important; font: 600 14px/1 -apple-system !important; cursor: pointer !important; margin-top: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } html[data-newui="on"] .show-all-btn:hover { background: #ececec !important; } /* ═══════════════════════════════════════════════════════════════════════ SOCIAL — Instagram + Twitter side-by-side (Vinay: 'together, not one after the other'). 2-col grid. Stacks on mobile. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"] #sec-social { display: flex !important; flex-direction: column !important; } html[data-newui="on"] #sec-social > .card-label { /* keep label as the protruding banner */ } html[data-newui="on"] #sec-social .soc-rails { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px !important; } @media (max-width: 700px) { html[data-newui="on"] #sec-social .soc-rails { grid-template-columns: 1fr !important; } } html[data-newui="on"] #sec-social .soc-rail { margin-top: 0 !important; } /* IG tile grid — big square photos like Google Images IG results. Vinay 2026-05-27 (Image #67): tiles were tiny chips with text. Now 3-col grid (mobile) → up to 6-col on wide screens, fills the rail. */ html[data-newui="on"] #sec-social .soc-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; width: 100% !important; } @media (min-width: 720px) { html[data-newui="on"] #sec-social .soc-grid { grid-template-columns: repeat(3, 1fr) !important; } } html[data-newui="on"] #sec-social .soc-igtile { width: 100% !important; background: transparent !important; border: none !important; padding: 0 !important; } html[data-newui="on"] #sec-social .soc-igtile img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 10px !important; } html[data-newui="on"] #sec-social .soc-sub { font: 700 13px -apple-system !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #515154 !important; margin-bottom: 10px !important; } html[data-newui="on"] #sec-images .img-cat-section:first-of-type .img-cat-label { margin-top: 6px !important; } html[data-newui="on"] #sec-images .img-more-btn { background: #f5f5f7 !important; color: #1d1d1f !important; border: 1px solid #d1d1d6 !important; border-radius: 99px !important; padding: 12px 22px !important; font: 600 14px/1 -apple-system !important; cursor: pointer; margin-top: 14px !important; display: inline-flex !important; align-items: center; gap: 8px; transition: background .15s, border-color .15s; } html[data-newui="on"] #sec-images .img-more-btn::before { content: '▼'; font-size: 10px; color: #515154; } html[data-newui="on"] #sec-images .img-more-btn:hover { background: #ececec !important; border-color: #86868b !important; } html[data-newui="on"] #sec-images .img-grid { gap: 12px !important; } /* ═══════════════════════════════════════════════════════════════════════ NEW-UI THEME — Apple-style refresh (2026-05-27) Vinay approved the preview at /tmp/new-ui-preview/preview.html. Activated by attribute, gated by ii_flag_newui localStorage flag (default ON). Paste `localStorage.setItem('ii_flag_newui','off')` then reload to revert to the OLD UI for the current browser. Light mode only for now; dark mode still uses the original theme. ═══════════════════════════════════════════════════════════════════════ */ html[data-newui="on"]:not([data-theme="dark"]) { /* Apple system gray for the page background — same as macOS settings. */ --bg: #f5f5f7; --bg2: #ffffff; --bg3: #f5f5f7; --border: #e5e5e5; --text: #1d1d1f; --muted: #86868b; --radius: 14px; } html[data-newui="on"]:not([data-theme="dark"]) body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: -0.005em; } /* Cards: white, rounded 14px, soft shadow, generous padding, no harsh border. */ html[data-newui="on"]:not([data-theme="dark"]) .card { background: #ffffff; border: 1px solid #f0f0f0; border-radius: 14px; padding: 22px 24px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } /* Slightly more breathing room between cards. */ html[data-newui="on"]:not([data-theme="dark"]) #results { gap: 16px; max-width: 720px; } /* Card label tweak: lighter weight, Apple letter-spacing. */ html[data-newui="on"]:not([data-theme="dark"]) .card-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #515154; margin-bottom: 12px; } /* Card body text — slightly larger, tighter line-height. */ html[data-newui="on"]:not([data-theme="dark"]) .card-text { font-size: 16px; line-height: 1.55; color: #1d1d1f; } /* Logo / hero headings inside cards get the SF-Display feel. */ html[data-newui="on"]:not([data-theme="dark"]) .logo { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; font-weight: 300; letter-spacing: 0.18em; } /* ════════════════════════════════════════════════════════════════════════ SEARCH BOX RED BORDER — PERMANENT (Vinay 2026-05-27, no flag, no rollback) 'This is the final form.' Pulls in the same red as the card frames so the search box visually anchors the whole brand. Slightly darker red on focus. ════════════════════════════════════════════════════════════════════════ */ #q { background: #ffffff; border: 2.5px solid #e50914; border-radius: 14px; box-shadow: 0 4px 18px rgba(229, 9, 20, 0.14); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; } /* Vinay 2026-05-27: 'it should always be one colour' — focus state used to switch to darker red (#b00712) which looked like a different shade. Now: same red as default, just a bigger glow on focus so the user still sees the focus feedback. */ #q:focus, .search-wrap:focus-within #q { border-color: #e50914; box-shadow: 0 6px 28px rgba(229, 9, 20, 0.26); } /* News rail / news items — keep them visually grouped, but with the new card body. */ html[data-newui="on"]:not([data-theme="dark"]) .news-item { background: #fafafa; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid #f0f0f0; } html[data-newui="on"]:not([data-theme="dark"]) .news-title { font-weight: 600; color: #1d1d1f; } html[data-newui="on"]:not([data-theme="dark"]) .news-meta { color: #86868b; } /* Sample-queries strip — quieter type so the cards dominate. */ html[data-newui="on"]:not([data-theme="dark"]) .sample-queries { color: #86868b; } html[data-newui="on"]:not([data-theme="dark"]) .sample-q { color: #515154; font-weight: 500; } html[data-newui="on"]:not([data-theme="dark"]) .sample-q:hover { color: #1d1d1f; } /* ════════════════════════════════════════════════════════════════════════ LiveWidgets — user-creatable widget cards on home page (2026-05-27) Style matches the rich-card design from v=318-325. ════════════════════════════════════════════════════════════════════════ */ #lw-home { margin: 16px auto 24px; max-width: 880px; padding: 0 12px; } #lw-home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; } #lw-home-head .lw-title-line { font: 700 18px/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.012em; color: #1d1d1f; } html[data-theme="dark"] #lw-home-head .lw-title-line { color: #f5f5f7; } #lw-add-btn { background: #1d1d1f; color: #fff; border: none; padding: 8px 14px; border-radius: 99px; font: 600 13px -apple-system, sans-serif; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: opacity .15s; } #lw-add-btn:hover { opacity: 0.88; } #lw-home-mount { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .lw-card { background: #fff; border: 1px solid #e5e5e7; border-radius: 14px; padding: 14px 16px; transition: box-shadow .15s, transform .15s; } html[data-theme="dark"] .lw-card { background: #1a1c20; border-color: #2a2f38; } .lw-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); } .lw-card.lw-collapsed { padding: 8px 12px; } .lw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .lw-card.lw-collapsed .lw-head { margin-bottom: 0; } .lw-title { font: 600 13px -apple-system, sans-serif; color: #1d1d1f; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="dark"] .lw-title { color: #f5f5f7; } .lw-actions { display: inline-flex; gap: 2px; flex-shrink: 0; } .lw-btn { background: transparent; border: none; padding: 4px 6px; font: 600 12px -apple-system, sans-serif; color: #86868b; cursor: pointer; border-radius: 4px; transition: background .12s, color .12s; min-width: 22px; } .lw-btn:hover { background: rgba(0,0,0,0.06); color: #1d1d1f; } html[data-theme="dark"] .lw-btn:hover { background: rgba(255,255,255,0.08); color: #f5f5f7; } .lw-btn.lw-del:hover { color: #dc2626; } .lw-body { padding-top: 4px; } .lw-value { font: 700 28px/1.1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.015em; color: #1d1d1f; font-variant-numeric: tabular-nums; margin-bottom: 4px; } html[data-theme="dark"] .lw-value { color: #f5f5f7; } .lw-label { font: 500 12px -apple-system, sans-serif; color: #86868b; margin-bottom: 6px; } .lw-change { font: 600 13px -apple-system, sans-serif; font-variant-numeric: tabular-nums; } .lw-meta { font: 500 11px -apple-system, sans-serif; color: #86868b; margin-top: 4px; } .lw-stale { font: 500 11px -apple-system, sans-serif; color: #b45309; margin-top: 6px; } .lw-loading { display: flex; align-items: center; gap: 8px; font: 500 13px -apple-system, sans-serif; color: #86868b; padding: 6px 0; } .lw-err { font: 500 12px -apple-system, sans-serif; color: #dc2626; padding: 6px 0; } .lw-empty { grid-column: 1 / -1; text-align: center; padding: 28px 16px; background: #f5f5f7; border-radius: 12px; color: #86868b; font: 500 14px -apple-system, sans-serif; } html[data-theme="dark"] .lw-empty { background: #1a1c20; color: #86868b; } /* Add Widget Modal */ .lw-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; } .lw-modal-card { background: #fff; border-radius: 18px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 18px 60px rgba(0,0,0,0.4); } html[data-theme="dark"] .lw-modal-card { background: #1a1c20; } .lw-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid #e5e5e7; } html[data-theme="dark"] .lw-modal-head { border-color: #2a2f38; } .lw-modal-head h2 { font: 700 18px -apple-system, sans-serif; letter-spacing: -0.012em; margin: 0; color: #1d1d1f; } html[data-theme="dark"] .lw-modal-head h2 { color: #f5f5f7; } .lw-modal-x { font: 600 16px -apple-system, sans-serif; background: transparent; border: none; color: #86868b; cursor: pointer; padding: 4px 8px; } .lw-modal-body { padding: 18px 22px; } .lw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .lw-field span { font: 600 12px -apple-system, sans-serif; color: #1d1d1f; text-transform: uppercase; letter-spacing: 0.04em; } html[data-theme="dark"] .lw-field span { color: #f5f5f7; } .lw-field input, .lw-field select { font: 500 14px -apple-system, sans-serif; padding: 9px 12px; border: 1px solid #d1d1d6; border-radius: 8px; background: #fafafa; color: #1d1d1f; } html[data-theme="dark"] .lw-field input, html[data-theme="dark"] .lw-field select { background: #0e0f13; color: #f5f5f7; border-color: #2a2f38; } .lw-field input:focus, .lw-field select:focus { outline: 2px solid #007aff; outline-offset: 1px; } .lw-modal-foot { padding: 14px 22px 18px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #e5e5e7; } html[data-theme="dark"] .lw-modal-foot { border-color: #2a2f38; } .lw-modal-foot .lw-btn { padding: 8px 16px; border-radius: 8px; font: 600 13px -apple-system, sans-serif; } .lw-modal-foot .lw-cancel { background: #f5f5f7; color: #1d1d1f; } .lw-modal-foot .lw-cancel:hover { background: #e5e5e7; } html[data-theme="dark"] .lw-modal-foot .lw-cancel { background: #2a2f38; color: #f5f5f7; } .lw-modal-foot .lw-save { background: #007aff; color: #fff; } .lw-modal-foot .lw-save:hover { background: #0056b3; } .lw-modal-foot .lw-save:disabled { opacity: 0.5; cursor: not-allowed; } /* Categorised tile picker in the Add-Widget modal (Vinay 2026-05-28). */ .lw-cat-block { margin-bottom: 18px; } .lw-cat-head { font: 700 12px -apple-system, sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: #86868b; margin-bottom: 8px; } .lw-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .lw-tile { text-align: left; background: #f5f5f7; border: 1.5px solid transparent; border-radius: 10px; padding: 10px 12px; font: 500 13px -apple-system, sans-serif; color: #1d1d1f; cursor: pointer; transition: background .12s, border-color .12s; } .lw-tile:hover { background: #ebebed; } .lw-tile.lw-tile-sel { background: #fff; border-color: #007aff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.18); } /* 2026-05-29: new row-based Add Widget modal — every option visible up front with its inline input + Add button (Vinay: "show everything up front"). */ .lw-modal-card--wide { width: min(720px, 92vw); max-width: 720px; } .lw-modal-hint { font: 500 13px -apple-system, sans-serif; color: #86868b; margin-bottom: 14px; } html[data-theme="dark"] .lw-modal-hint { color: #a1a1a6; } .lw-row-list { display: flex; flex-direction: column; gap: 8px; } .lw-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(180px, 2fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: #f5f5f7; border-radius: 10px; } html[data-theme="dark"] .lw-row { background: #2a2f38; } .lw-row-label { font: 600 13px -apple-system, sans-serif; color: #1d1d1f; line-height: 1.3; } html[data-theme="dark"] .lw-row-label { color: #f5f5f7; } .lw-row-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .lw-row-fields--empty { font: 400 12px -apple-system; color: #86868b; font-style: italic; } .lw-row-fields input, .lw-row-fields select { flex: 1; min-width: 100px; padding: 7px 10px; border: 1px solid #d1d1d6; border-radius: 7px; font: 500 13px -apple-system, sans-serif; background: #fff; color: #1d1d1f; } html[data-theme="dark"] .lw-row-fields input, html[data-theme="dark"] .lw-row-fields select { background: #1a1c20; border-color: #3a3f48; color: #f5f5f7; } .lw-row-fields input:focus, .lw-row-fields select:focus { outline: none; border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); } .lw-row-add { padding: 8px 14px; border-radius: 8px; background: #007aff; color: #fff; font: 600 13px -apple-system, sans-serif; border: none; cursor: pointer; transition: background .12s; white-space: nowrap; } .lw-row-add:hover { background: #0056b3; } .lw-row-add:disabled { background: #34c759; opacity: 1; cursor: default; } @media (max-width: 560px) { .lw-row { grid-template-columns: 1fr; gap: 8px; } .lw-row-add { width: 100%; } } html[data-theme="dark"] .lw-tile { background: #2a2f38; color: #f5f5f7; } html[data-theme="dark"] .lw-tile:hover { background: #353c47; } html[data-theme="dark"] .lw-tile.lw-tile-sel { background: #1a1c20; border-color: #007aff; } .lw-tile-label { display: block; line-height: 1.35; } .lw-picked-row { padding: 10px 12px; background: #eef6ff; color: #0a3a7d; border-radius: 8px; font: 500 13px -apple-system, sans-serif; margin-bottom: 14px; } html[data-theme="dark"] .lw-picked-row { background: #16243a; color: #b8d4ff; } /* ════════════════════════════════════════════════════════════════════════ Gmail + Calendar home cards (Vinay 2026-05-27 night). Two cards side-by-side on desktop, stack on mobile. Sit between sample queries and the My Widgets section per the approved sketch. ════════════════════════════════════════════════════════════════════════ */ #gmail-cal-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; max-width: 1080px; margin: 20px auto 24px; padding: 0 12px; } @media (max-width: 980px) { #gmail-cal-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { #gmail-cal-row { grid-template-columns: 1fr; } } .gmcal-card { background: #fff; border: 1px solid #e5e5e7; border-radius: 14px; padding: 14px 16px; min-height: 100px; } .gmcal-card:empty { display: none; } html[data-theme="dark"] .gmcal-card { background: #1a1c20; border-color: #2a2f38; } /* Todo card (Vinay 2026-05-28) — local-only MVP. */ #home-todo .td-list { margin-bottom: 10px; max-height: 220px; overflow-y: auto; } .td-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #f1f1f3; font-size: 14px; } .td-row:last-child { border-bottom: none; } .td-check { cursor: pointer; font-size: 16px; user-select: none; flex-shrink: 0; width: 18px; } .td-text { cursor: pointer; flex: 1; word-break: break-word; } .td-row.td-done .td-text { text-decoration: line-through; color: #999; } .td-del { background: none; border: none; color: #bbb; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; } .td-del:hover { color: #dc2626; } .td-add { display: flex; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #f1f1f3; } .td-input { flex: 1; padding: 6px 10px; font-size: 13px; border: 1px solid #e5e5e7; border-radius: 8px; outline: none; background: #fff; } .td-input:focus { border-color: #2563eb; } .td-add-btn { padding: 6px 12px; font-size: 13px; font-weight: 500; background: #2563eb; color: #fff; border: none; border-radius: 8px; cursor: pointer; } .td-add-btn:hover { background: #1d4ed8; } html[data-theme="dark"] .td-row { border-color: #2a2f38; } html[data-theme="dark"] .td-add { border-color: #2a2f38; } html[data-theme="dark"] .td-input { background: #14161a; border-color: #2a2f38; color: #e5e7eb; } .gm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .gm-title { font: 700 14px -apple-system, sans-serif; color: #1d1d1f; flex: 1; } html[data-theme="dark"] .gm-title { color: #f5f5f7; } .gm-unread-badge { font: 600 11px -apple-system; background: #e50914; color: #fff; padding: 2px 8px; border-radius: 99px; } .gm-row, .cal-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; text-decoration: none; color: inherit; transition: background .12s; border-top: 1px solid #f0f0f0; } html[data-theme="dark"] .gm-row, html[data-theme="dark"] .cal-row { border-color: #2a2f38; } .gm-row:first-child, .cal-row:first-child { border-top: none; } .gm-row:hover, .cal-row:hover { background: #fafafa; } html[data-theme="dark"] .gm-row:hover, html[data-theme="dark"] .cal-row:hover { background: #2a2f38; } .gm-dot { width: 8px; height: 8px; border-radius: 50%; background: #e50914; flex-shrink: 0; margin-top: 7px; } .gm-dot-sp { width: 8px; height: 8px; flex-shrink: 0; margin-top: 7px; } .gm-row-body { flex: 1; min-width: 0; } .gm-from { font: 600 12px -apple-system; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gm-subj { font: 500 12px -apple-system; color: #86868b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gm-row.gm-unread .gm-from, .gm-row.gm-unread .gm-subj { color: #1d1d1f; font-weight: 700; } .cal-time { font: 600 12px -apple-system; color: #1d1d1f; flex: 0 0 64px; padding-top: 1px; } html[data-theme="dark"] .cal-time { color: #f5f5f7; } .cal-row-body { flex: 1; min-width: 0; } .cal-title { font: 500 13px -apple-system; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-theme="dark"] .cal-title { color: #f5f5f7; } .cal-loc { color: #86868b; font-weight: 400; } .cal-meet { font: 600 11px -apple-system; background: #1a73e8; color: #fff; padding: 4px 10px; border-radius: 99px; text-decoration: none; align-self: center; } .gm-open { display: block; margin-top: 10px; font: 600 12px -apple-system; color: #1a73e8; text-decoration: none; text-align: right; } .gm-empty { font: 500 13px -apple-system; color: #86868b; padding: 14px 6px; text-align: center; } /* "Enable Gmail" / "Enable Calendar" tile when scope not yet granted */ .gm-enable { display: flex; flex-direction: column; align-items: center; padding: 22px 14px; text-align: center; } .gm-enable-icon { font-size: 36px; margin-bottom: 8px; } .gm-enable-title { font: 700 14px -apple-system; color: #1d1d1f; margin-bottom: 4px; } html[data-theme="dark"] .gm-enable-title { color: #f5f5f7; } .gm-enable-sub { font: 500 12px/1.4 -apple-system; color: #86868b; margin-bottom: 12px; } .gm-enable-btn { background: #1d1d1f; color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 99px; font: 600 13px -apple-system; transition: opacity .12s; } .gm-enable-btn:hover { opacity: 0.88; } /* ───────────────── ANSWER CARDS ON TOP (2026-06-01, Vinay) ───────────────── * * Vinay: "In terms of answering the question, then it should go on just below * the search box. Otherwise, you have to look around for it." * * Strategy: #results is already display:flex flex-direction:column, so we * just use CSS `order:` to float "answer cards" (direct-answer cards like * BMI, calc, stock, weather, dictionary, etc.) to the TOP of the results * column and push "ambient cards" (favourite-this-search bar, quick-tools * chip strip, breaking-for-you panel) to the BOTTOM. Default `order` is 50 * for any unclassified section, so the existing append-order is preserved * within each band. * * Co-existence with the loosen-triggers branch: that branch adds * #sec-quicktools which is listed in the ambient band below, so it'll * naturally drop to the bottom when both branches merge. * * Home-page layout is untouched — the home-only chip strip * `.sample-queries` is hidden in doSearch (app.js) and re-shown in * renderHome, mirroring how #gmail-cal-row and #lw-home are toggled. */ #results > * { order: 50; } /* v=623 (Vinay 2026-06-07 22:16): "favourite still at the bottom" — JS reorder * at 1s lost the race against later insertBefore calls. CSS flex order beats * DOM insertion order regardless of timing. order: 0 puts pin-bar above all * order:1 answer cards AND all order:50 result cards. Universal — no timing race. */ #results > #pin-bar { order: 0; } /* ─── Answer cards float to the TOP (order: 1) ───────────────────────── */ #results > #sec-calc, #results > #sec-bmi, #results > #sec-emi, #results > #sec-emi-calc, #results > #sec-tip, #results > #sec-age, #results > #sec-currency, #results > #sec-crypto, #results > #sec-roman, #results > #sec-dict, #results > #sec-pin, #results > #sec-ifsc, #results > #sec-sunrise, #results > #sec-holidays, #results > #sec-unitconv, #results > #sec-timezone, #results > #sec-time, #results > #sec-date, #results > #sec-datemath, #results > #sec-weather, #results > #sec-stock, #results > #sec-cric, #results > #sec-sports-card, #results > #sec-films, #results > #sec-movie, #results > #sec-book, #results > #sec-album, #results > #sec-flight, #results > #sec-flight-route, #results > #sec-recipe, #results > #sec-hotel, #results > #sec-hotels, #results > #sec-health, #results > #sec-gov, #results > #sec-pfamily, #results > #sec-lived, #results > #sec-vs, #results > #sec-rating, #results > #sec-game, #results > #sec-country, #results > #sec-calendar, #results > #sec-causal, #results > #sec-decision, #results > #sec-pregnancy, #results > #sec-traffic, #results > #sec-shopping-ai, #results > #sec-localbiz, #results > #sec-places, #results > #sec-nowplaying, #results > #sec-trivia, #results > #sec-stats, #results > #sec-contact, #results > #sec-lyrics, #results > #sec-translator, #results > #sec-translate, #results > #sec-moon, #results > #sec-numberfact, #results > #sec-cryptomarket, #results > #sec-devtool, #results > #sec-timer, #results > #sec-iplookup, #results > #sec-map, #results > #sec-directions, #results > #sec-shorten, #results > #sec-emoji, #results > #sec-colorpalette, #results > #sec-calories, #results > #sec-numbertrivia, #results > #sec-mypick, #results > #sec-perspectives, #results > #sec-comparison, #results > #sec-university, #results > #sec-company, #results > #sec-institution, #results > #sec-bus { order: 1; } /* ─── Ambient cards push to the BOTTOM (order: 100) ──────────────────── */ /* v=626 (Vinay 2026-06-08): #pin-bar REMOVED from this group. It belongs * at the TOP per the order:0 rule above (line 3170). The conflict here was * why "Favourite at top" kept landing at the bottom. */ #results > #chips, #results > #sec-samples, #results > #sec-todo, #results > #sec-favsearch, #results > #sec-favourite, #results > #sec-quicktools, #results > #sec-breaking-for-you { order: 100; } /* v=626: Website/Links section to bottom + Alternatives/Comparison just above */ #results > #sec-topsite { order: 95; } #results > #sec-alternatives, #results > #sec-comparison { order: 90; } /* ────────────────────────────────────────────────────────────────────── * CHEAP CARDS BATCH 1 (2026-06-01) — sec-unitconv / sec-timezone / * sec-datemath / sec-sunrise / sec-holidays. Match the visual pattern of * #sec-weather + #sec-currency: clean white card, big headline, calm meta. * ────────────────────────────────────────────────────────────────────── */ .cc-head { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.2; margin: 4px 0 6px; } .cc-head b { color: #0a8a3a; font-weight: 700; } .cc-peers { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); } .cc-peer { font-size: 13px; color: var(--muted); } .cc-rev { font-size: 12px; color: var(--muted); margin-top: 8px; font-style: italic; } /* timezone */ .cc-tz-big { font-size: 38px; font-weight: 700; color: var(--text); line-height: 1.1; margin: 4px 0 4px; } .cc-tz-date { font-size: 14px; color: var(--text); margin-bottom: 4px; } .cc-tz-meta { font-size: 13px; color: var(--muted); margin-bottom: 8px; } .cc-tz-mirror { font-size: 12px; color: var(--muted); padding-top: 8px; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); } .cc-tz-conv { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; } .cc-tz-conv-row { display: flex; flex-direction: column; gap: 2px; } .cc-tz-conv-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); } .cc-tz-conv-val { font-size: 22px; font-weight: 700; color: var(--text); } .cc-tz-conv-arrow { font-size: 24px; color: var(--muted); font-weight: 700; } /* date math */ .cc-dm-big { font-size: 36px; font-weight: 700; color: #0a8a3a; line-height: 1.1; margin: 4px 0 6px; } .cc-dm-detail { font-size: 14px; color: var(--text); margin-bottom: 6px; } .cc-dm-break { font-size: 12px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); } /* sunrise / sunset */ .cc-sun-body { display: flex; flex-direction: column; gap: 6px; } .cc-sun-row { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; } .cc-sun-ico { font-size: 16px; width: 22px; display: inline-block; text-align: center; } .cc-sun-row b { color: #0a8a3a; } .cc-sun-tip { font-size: 12px; color: var(--muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border, rgba(0,0,0,0.06)); font-style: italic; } /* holidays */ .cc-hol-next { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 10px; line-height: 1.4; } .cc-hol-next b { color: #0a8a3a; } .cc-hol-sub { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; margin-top: 10px; margin-bottom: 4px; } .cc-hol-list { display: flex; flex-direction: column; gap: 4px; } .cc-hol-row { font-size: 13px; color: var(--text); padding: 3px 0; } .cc-hol-date { color: var(--muted); font-weight: 600; min-width: 110px; display: inline-block; } .cc-hol-details { margin-top: 10px; } .cc-hol-details summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 6px 0; } .cc-hol-details[open] summary { font-weight: 600; color: var(--text); } /* 🛠 Quick tools strip — chip grid showcasing built-in calculator/utility cards on home + at the bottom of every search-results page. Wraps to as many rows as needed; chip styling follows the sample-pill pattern but without the auxiliary monospace `q` line (label-only). */ #sec-quicktools .qt-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .qt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer; background: var(--bg2, rgba(0,0,0,0.04)); border: 1px solid var(--border, rgba(0,0,0,0.08)); color: var(--text); white-space: nowrap; font-family: inherit; font-size: 13px; text-decoration: none; transition: background .15s, border-color .15s, transform .1s; } .qt-chip:hover { background: var(--bg3, rgba(0,0,0,0.07)); border-color: var(--accent2, #1a73e8); } .qt-chip:active { transform: scale(0.97); } .qt-emoji { font-size: 16px; line-height: 1; } .qt-label { font-weight: 600; color: var(--text); } /* ════════════════════════════════════════════════════════════════════════ * 🚨 BREAKING-FOR-YOU card + customize modal * Matches the existing news-card visual language (red left border, source * meta line in muted) but adds a topic chip + per-item emoji + edit button. * ════════════════════════════════════════════════════════════════════════ */ .bfy-card { border-left: 3px solid #dc2626; background: #fff; } .bfy-head { display: flex; align-items: center; gap: 10px; color: #dc2626; } .bfy-title { flex: 1 1 auto; font-weight: 700; } .bfy-context { color: #6b7280; font-weight: 500; font-size: 13px; } .bfy-edit-btn { margin-left: auto; background: transparent; border: 1.5px solid rgba(220, 38, 38, 0.32); color: #dc2626; border-radius: 99px; padding: 4px 12px; font: 600 12px -apple-system, sans-serif; cursor: pointer; transition: background .12s, border-color .12s; } .bfy-edit-btn:hover { background: #fef2f2; border-color: #dc2626; } .bfy-body { margin-top: 4px; } .bfy-body.bfy-loading { color: #9aa; padding: 12px 0; font-size: 13px; } .bfy-item { padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06); } .bfy-item:first-child { border-top: none; } .bfy-item-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .bfy-icon { font-size: 16px; flex: 0 0 auto; } .bfy-title-link { color: #111827; text-decoration: none; font-weight: 600; flex: 1 1 auto; line-height: 1.35; } .bfy-title-link:hover { color: #dc2626; text-decoration: underline; } .bfy-time { color: #9aa; font-size: 12px; flex: 0 0 auto; font-weight: 400; } .bfy-item-meta { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-left: 24px; font-size: 12px; color: #6b7280; } .bfy-tag { color: #4b5563; font-weight: 500; } .bfy-source { margin-left: auto; color: #9aa; font-style: italic; } .bfy-more { /* hidden by default; revealed by JS */ } .bfy-footer { margin-top: 12px; display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.06); } .bfy-more-btn, .bfy-customize { background: transparent; border: 1px solid rgba(220, 38, 38, 0.28); color: #dc2626; border-radius: 6px; padding: 5px 12px; font: 600 12px -apple-system; cursor: pointer; } .bfy-more-btn:hover, .bfy-customize:hover { background: #fef2f2; } /* ── Customize modal ── */ .bfy-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; } .bfy-modal { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); font: 14px -apple-system, sans-serif; } .bfy-modal-head { display: flex; align-items: center; padding: 18px 20px 8px; font: 700 17px -apple-system; color: #111; } .bfy-modal-x { margin-left: auto; background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #6b7280; padding: 2px 8px; } .bfy-modal-x:hover { color: #dc2626; } .bfy-modal-sub { padding: 0 20px 12px; color: #6b7280; font-size: 12px; } .bfy-modal-body { padding: 0 20px; } .bfy-section { margin-bottom: 18px; } .bfy-section-head { font: 600 13px -apple-system; color: #374151; margin-bottom: 6px; } .bfy-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; min-height: 38px; align-items: center; } .bfy-chip { display: inline-flex; align-items: center; gap: 4px; background: #fef2f2; border: 1px solid rgba(220,38,38,0.32); color: #991b1b; padding: 3px 8px 3px 10px; border-radius: 99px; font: 500 12px -apple-system; white-space: nowrap; } .bfy-chip-x { background: transparent; border: none; color: #991b1b; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; font-weight: 600; } .bfy-chip-x:hover { color: #dc2626; } .bfy-chip-input { flex: 1 1 120px; min-width: 100px; border: none; outline: none; font: 13px -apple-system; padding: 4px; background: transparent; } .bfy-modal-foot { padding: 12px 20px 18px; display: flex; justify-content: flex-end; } .bfy-save { background: #dc2626; color: #fff; border: none; padding: 8px 18px; border-radius: 8px; font: 600 13px -apple-system; cursor: pointer; transition: background .12s; } .bfy-save:hover { background: #b91c1c; } /* 🗂 SOURCE PANEL (Pilot A) — Apple-style 3-column source comparison. Subtle borders, generous whitespace, system fonts, no rainbow colours. Universal renderer; same look for book / company / concept classes. */ .sp-card { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; padding: 20px 22px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .sp-head { font-size: 13px; color: #86868b; font-weight: 500; margin-bottom: 16px; letter-spacing: -0.01em; } .sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .sp-grid:has(.sp-col:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-col { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; } .sp-col:hover { border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transform: translateY(-1px); } .sp-col-name { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1d1d1f; } .sp-col-summary { font-size: 13.5px; line-height: 1.5; color: #1d1d1f; flex: 1; } .sp-col-attr { font-size: 11px; color: #86868b; font-weight: 500; margin-top: 2px; } .sp-consensus { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: 13px; color: #1d1d1f; line-height: 1.5; } @media (max-width: 640px) { .sp-grid { grid-template-columns: 1fr !important; gap: 10px; } .sp-card { padding: 16px 18px; } } /* Link-health badges (restored v=620 from d25009d) */ .ii-link-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font: 600 10px -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.4; border-radius: 99px; vertical-align: middle; user-select: none; opacity: 0.9; } .ii-link-badge-404, .ii-link-badge-unsafe { background: #fde7ea; color: #c01a2b; border: 1px solid #f4c3ca; } .ii-link-badge-down { background: #fff4e0; color: #a05a00; border: 1px solid #f0d2a5; } .ii-link-badge-insecure { background: #fff4e0; color: #a05a00; border: 1px solid #f0d2a5; } .ii-link-badge-slow { background: #fffae0; color: #856200; border: 1px solid #ece1a3; } .ii-link-dead { opacity: 0.5; } .ii-link-unsafe { color: #c01a2b !important; } @media (prefers-color-scheme: dark) { .ii-link-badge-404, .ii-link-badge-unsafe { background: #3a1a1f; color: #ff6b78; border-color: #5a2530; } .ii-link-badge-down, .ii-link-badge-insecure { background: #3a2810; color: #ffb866; border-color: #4f361a; } .ii-link-badge-slow { background: #3a3210; color: #ffd866; border-color: #4f4520; } }