/* Prashnika site. Phone first; wider screens put filters, list and the open question side by side. Two themes that each stand on their own (design-handoff/new/README.md): Dark Glass and Silver. The page starts in the one matching the device's light/dark setting and the header button switches; site.js always writes data-theme on , so the blocks below are all the colours there are. Names starting --qb- are also used by vendor/rich-text.js (code boxes, tables, search highlight). */ :root, :root[data-theme="glass"] { color-scheme: dark; --qb-bg-base: #050506; --qb-bg-glow: radial-gradient(1100px 800px at 50% 40%, rgba(40,42,48,0.35), transparent 70%); --qb-surface: rgba(10,12,18,0.45); --qb-surface-strong: rgba(20,20,24,0.50); --qb-bar-bg: rgba(8,8,10,0.55); --qb-blur: blur(24px) saturate(120%); --qb-text-heading: #FFFFFF; --qb-text-primary: #F1F3F7; --qb-text-secondary: #D3D8E1; --qb-text-muted: #B6BDCA; --qb-border: rgba(255,255,255,0.20); --qb-border-strong: rgba(255,255,255,0.32); --qb-accent: #38BDF8; --qb-accent-tint: rgba(56,189,248,0.14); --qb-accent-fg: #7DD3FC; --qb-link: #7DD3FC; --qb-primary-fg: #04121C; --qb-backdrop: rgba(4,4,8,0.40); --qb-mark-bg: rgba(250,204,21,0.26); --qb-mark-fg: #FDF6D8; --qb-notice-bg: rgba(255,255,255,0.05); --qb-notice-border: rgba(255,196,87,0.35); --qb-ai-bg: rgba(255,255,255,0.05); --qb-ai-border: rgba(125,211,252,0.40); --qb-correct-bg: rgba(52,211,153,0.10); --qb-correct-border: rgba(52,211,153,0.60); --qb-correct-fg: #7BE8BE; --qb-code-bg: rgba(0,0,0,0.35); --qb-shadow: 0 20px 50px rgba(0,0,0,0.55); --qb-glass-fill: linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.06) 100%), linear-gradient(rgba(18,18,22,0.45), rgba(18,18,22,0.45)); --qb-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 20px 50px rgba(0,0,0,0.6); --qb-sheet-fill: var(--qb-surface-strong); --qb-menu-fill: rgba(24,26,32,0.88); --qb-badge-bg: rgba(255,255,255,0.03); --qb-rail: rgba(255,255,255,0.06); } :root[data-theme="silver"] { color-scheme: light; --qb-bg-base: #9EA3AB; --qb-bg-glow: linear-gradient(155deg, #C9CDD3 0%, #9197A0 30%, #BCC0C7 48%, #858B94 70%, #B3B8BF 100%); --qb-surface: rgba(210,214,220,0.60); --qb-surface-strong: rgba(170,176,185,0.60); --qb-bar-bg: rgba(150,156,165,0.45); --qb-blur: blur(5px) saturate(120%); --qb-text-heading: #0A0C10; --qb-text-primary: #14171C; --qb-text-secondary: #23272E; --qb-text-muted: #262A31; --qb-border: rgba(20,24,30,0.18); --qb-border-strong: rgba(20,24,30,0.32); --qb-accent: #1B3F96; --qb-accent-tint: rgba(27,63,150,0.16); --qb-accent-fg: #122E74; --qb-link: #132F7A; --qb-primary-fg: #FFFFFF; --qb-backdrop: rgba(60,64,72,0.28); --qb-mark-bg: #FDE68A; --qb-mark-fg: #3B2F00; --qb-notice-bg: rgba(236,222,180,0.70); --qb-notice-border: rgba(120,86,10,0.40); --qb-ai-bg: rgba(200,212,232,0.70); --qb-ai-border: rgba(20,50,110,0.40); --qb-correct-bg: rgba(190,225,205,0.75); --qb-correct-border: rgba(8,100,62,0.60); --qb-correct-fg: #064D31; --qb-code-bg: rgba(20,24,30,0.10); --qb-shadow: 0 20px 50px rgba(30,36,50,0.18); --qb-glass-fill: linear-gradient(135deg, rgba(232,235,239,0.58) 0%, rgba(205,209,215,0.44) 40%, rgba(185,190,198,0.40) 70%, rgba(215,219,224,0.52) 100%); --qb-glass-shadow: inset 1px 1px 0 rgba(255,255,255,0.85), inset -1px -1px 0 rgba(40,46,56,0.22), 0 10px 30px rgba(30,34,42,0.28); --qb-sheet-fill: linear-gradient(180deg, rgba(226,229,233,0.82) 0%, rgba(198,202,208,0.76) 100%); /* a small menu floating over the page reads as white unless it is darker than the panels it sits on */ --qb-menu-fill: linear-gradient(180deg, rgba(182,187,195,0.94) 0%, rgba(160,166,175,0.94) 100%); --qb-badge-bg: rgba(255,255,255,0.28); --qb-rail: rgba(20,24,30,0.10); } /* ---------------------------------------------------------------- base */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background-color: var(--qb-bg-base); background-image: var(--qb-bg-glow); background-attachment: fixed; color: var(--qb-text-primary); font: 15px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; } a { color: var(--qb-link); } a:hover { color: var(--qb-accent-fg); } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3 { color: var(--qb-text-heading); } .muted { color: var(--qb-text-muted); } .pad { padding: 24px 16px; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--qb-accent); outline-offset: 2px; } /* Glass panels. Blur is expensive on cheap phones, so only the header, the filter sheet and the question panel use it (design-handoff/new/README.md); cards get the tinted fill without blur. */ .glass { background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .blurred { backdrop-filter: var(--qb-blur); -webkit-backdrop-filter: var(--qb-blur); } /* the fixed shapes behind everything */ #decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Dark Glass: the spheres sit further back, so they read as depth and not as shapes through the cards. */ :root[data-theme="glass"] #decor { opacity: 0.4; } #decor > i { position: absolute; display: block; border-radius: 50%; } :root[data-theme="glass"] #decor > i { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 22%, transparent 40%), radial-gradient(circle at 50% 50%, #101115 0%, #07070A 62%, #15161B 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), inset -10px -14px 26px rgba(90,150,255,0.30), inset 8px 10px 20px rgba(255,255,255,0.10), inset -3px -5px 10px rgba(255,190,90,0.12); } :root[data-theme="silver"] #decor > i { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 56%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.52) 96%, rgba(255,255,255,0) 100%); box-shadow: inset -20px -24px 50px rgba(30,36,48,0.12), inset 16px 14px 30px rgba(255,255,255,0.35); } #decor .d1 { left: -70px; top: 150px; width: 240px; height: 240px; } #decor .d2 { right: 18%; top: 40px; width: 120px; height: 120px; } #decor .d3 { left: 30%; top: 60%; width: 260px; height: 260px; } #decor .d4 { right: -60px; bottom: 8%; width: 180px; height: 180px; } @media (max-width: 480px) { #decor .d3 { display: none; } } /* ---------------------------------------------------------------- header */ .bar { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; background: var(--qb-bar-bg); border-bottom: 1px solid var(--qb-border); backdrop-filter: var(--qb-blur); -webkit-backdrop-filter: var(--qb-blur); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-grow: 1; min-width: 0; } .brand .word { display: none; flex-direction: column; align-items: center; gap: 1px; line-height: 1; } .brand .word b { font-size: 16px; font-weight: 300; letter-spacing: 0.22em; margin-right: -0.22em; color: var(--qb-text-heading); } .brand .word span { font-size: 10px; letter-spacing: 0.1em; color: var(--qb-text-muted); } /* from 700px the wordmark is the whole mark; the bubble is the phone version */ @media (min-width: 700px) { .brand .word { display: flex; } .brand .bubble { display: none; } } /* the प्र bubble: the whole mark on phones, next to the wordmark on wider screens */ .bubble { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .bubble::before { content: ""; position: absolute; left: 18%; top: 11%; width: 34%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 70%); } .bubble::after { content: ""; position: absolute; right: 12%; bottom: 8%; width: 44%; height: 24%; border-radius: 50%; } .bubble i { position: relative; font-style: normal; font-size: 17px; font-weight: 700; line-height: 1; margin-top: -2px; } :root[data-theme="glass"] .bubble { background: radial-gradient(circle at 36% 30%, #2A2D35 0%, #111217 55%, #06070A 100%); border: 1px solid rgba(255,255,255,0.22); } :root[data-theme="glass"] .bubble::after { background: radial-gradient(ellipse at center, rgba(92,200,230,0.55) 0%, rgba(0,0,0,0) 70%); } :root[data-theme="glass"] .bubble i { color: #FFFFFF; } :root[data-theme="silver"] .bubble { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.10) 58%, rgba(255,255,255,0.45) 86%, rgba(255,255,255,0.85) 97%); border: 1px solid rgba(20,24,30,0.22); } :root[data-theme="silver"] .bubble::after { background: radial-gradient(ellipse at center, rgba(27,63,150,0.45) 0%, rgba(0,0,0,0) 70%); } :root[data-theme="silver"] .bubble i { color: #1B3F96; } /* Questions / Papers sits above the search, not in the header (and level with it on wide screens) */ .tabs { align-self: flex-start; display: flex; padding: 3px; border-radius: 10px; background: var(--qb-rail); border: 1px solid var(--qb-border); } .tabs a { padding: 5px 12px; border-radius: 8px; color: var(--qb-text-secondary); text-decoration: none; font-weight: 600; font-size: 13px; } .tabs a.on { background: var(--qb-accent-tint); color: var(--qb-accent-fg); font-weight: 700; } .icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; border-radius: 12px; color: var(--qb-text-secondary); background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } /* ---------------------------------------------------------------- shell */ main { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 12px 16px 0; } .layout { display: flex; flex-direction: column; gap: 12px; } .side { display: none; } .tools { display: flex; gap: 8px; } .search { flex-grow: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--qb-text-muted); background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .search input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--qb-text-primary); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--qb-text-primary); text-decoration: none; background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .btn.primary { background: var(--qb-accent); color: var(--qb-primary-fg); border-color: var(--qb-accent); box-shadow: 0 6px 20px var(--qb-accent-tint); font-weight: 700; } :root[data-theme="silver"] .btn.primary { background: var(--qb-accent-tint); color: var(--qb-accent-fg); } .btn:disabled { opacity: 0.45; cursor: default; } .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--qb-accent); color: var(--qb-primary-fg); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } :root[data-theme="silver"] .count { background: var(--qb-accent); color: #fff; } /* notice */ .notice { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--qb-notice-border); background: var(--qb-notice-bg); font-size: 13px; color: var(--qb-text-secondary); } .notice > div { flex-grow: 1; } .notice b { color: var(--qb-text-heading); } .notice .icon { width: 32px; height: 32px; flex-shrink: 0; } /* the subject row: one tap for the common filter, scrolls sideways on phones */ .subjects { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; } .subjects::-webkit-scrollbar { display: none; } .pill { flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; white-space: nowrap; color: var(--qb-text-secondary); background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .pill .n, .chip .n { color: var(--qb-text-muted); font-size: 11px; margin-left: 7px; padding: 0 6px; border: 1px solid var(--qb-border); border-radius: 999px; line-height: 16px; } .pill.on .n, .chip.on .n { color: inherit; border-color: currentColor; font-weight: 400; opacity: 0.75; } .fsearch { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 0 12px; height: 36px; border-radius: 999px; background: var(--qb-surface); border: 1px solid var(--qb-border); color: var(--qb-text-muted); } .fsearch input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 13px; color: var(--qb-text-primary); } .fsearch input::placeholder { color: var(--qb-text-muted); } .fsearch input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; } .pill.on, .chip.on { background: var(--qb-accent-tint); border-color: var(--qb-accent); color: var(--qb-accent-fg); font-weight: 700; box-shadow: none; } .summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--qb-text-secondary); } .summary .total { flex-grow: 1; } .summary .total b { color: var(--qb-text-heading); } .sortwrap { position: relative; display: inline-flex; align-items: center; color: var(--qb-text-muted); } .sortbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--qb-text-secondary); background: var(--qb-surface); border: 1px solid var(--qb-border); } .sortmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 160px; padding: 4px; margin: 0; list-style: none; border-radius: 12px; background: var(--qb-menu-fill); border: 1px solid var(--qb-border-strong); box-shadow: 0 12px 28px rgba(0,0,0,0.35); backdrop-filter: blur(12px); } .sortmenu li { padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--qb-text-secondary); cursor: pointer; } .sortmenu li:hover, .sortmenu li:focus { background: var(--qb-surface-strong); color: var(--qb-text-heading); outline: none; } .sortmenu li[aria-selected="true"] { background: var(--qb-accent-tint); border: 1px solid var(--qb-accent); color: var(--qb-accent-fg); font-weight: 700; padding: 7px 11px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border-radius: 999px; font-size: 13px; text-align: left; color: var(--qb-text-secondary); background: var(--qb-surface); border: 1px solid var(--qb-border); } .linkish { background: none; border: 0; padding: 0; color: var(--qb-link); text-decoration: underline; font-size: 13px; } /* ---------------------------------------------------------------- cards */ .cards { display: flex; flex-direction: column; gap: 8px; } .card { display: flex; align-items: stretch; width: 100%; text-align: left; padding: 0; border-radius: 14px; color: inherit; overflow: hidden; background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .card:hover { border-color: var(--qb-border-strong); } .card.on { border-color: var(--qb-accent); box-shadow: inset 0 0 0 1px var(--qb-accent), 0 10px 30px rgba(0,0,0,0.45); } .card .badge { width: 60px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-right: 1px solid var(--qb-border); background: var(--qb-badge-bg); } .card .badge b { font-size: 14px; color: var(--qb-text-heading); } .card .badge span { font-size: 11px; color: var(--qb-text-muted); } .card .body { flex-grow: 1; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .snippet { font-size: 15px; line-height: 1.4; color: var(--qb-text-primary); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card .meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--qb-text-muted); } .card .meta .where { flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tag-answer { font-size: 11px; font-weight: 700; color: var(--qb-accent-fg); padding: 2px 8px; border-radius: 999px; background: var(--qb-accent-tint); } .empty { text-align: center; padding: 40px 16px; border-radius: 16px; background: var(--qb-glass-fill); border: 1px dashed var(--qb-border-strong); } .empty h2 { margin: 0 0 6px; font-size: 18px; } .empty p { margin: 4px 0; color: var(--qb-text-secondary); } .empty .btn { margin-top: 14px; } .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--qb-text-secondary); } .paper-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .paper-head h1 { margin: 0; font-size: 19px; } .papers { display: flex; flex-direction: column; gap: 8px; } .paper-link { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: inherit; background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .paper-link b { color: var(--qb-text-heading); } /* ---------------------------------------------------------------- filters */ .fgroup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .fgroup h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--qb-text-muted); } .fvalues { display: flex; flex-wrap: wrap; gap: 6px; } .sheet { position: fixed; inset: 0; z-index: 30; background: var(--qb-backdrop); display: flex; align-items: flex-end; } .sheet-box { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 86vh; border-radius: 22px 22px 0 0; background: var(--qb-sheet-fill); border: 1px solid var(--qb-border-strong); border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); backdrop-filter: var(--qb-blur); -webkit-backdrop-filter: var(--qb-blur); } .sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--qb-border-strong); margin: 8px auto 0; } .sheet-head { display: flex; align-items: center; padding: 8px 16px 12px; border-bottom: 1px solid var(--qb-border); } .sheet-head h2 { margin: 0; font-size: 17px; flex-grow: 1; } .sheet-body { flex: 1; overflow: auto; padding: 16px; } .sheet-foot { display: flex; gap: 8px; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--qb-border); background: var(--qb-bar-bg); } .sheet-foot .btn { height: 52px; } .sheet-foot .btn.primary { flex-grow: 1; font-size: 15px; } /* ---------------------------------------------------------------- the question */ .dialog { position: fixed; inset: 0; z-index: 40; display: flex; } .dialog-box { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--qb-surface-strong); backdrop-filter: blur(26px) saturate(120%); -webkit-backdrop-filter: blur(26px) saturate(120%); } .dialog-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--qb-border); } .dialog-title { flex-grow: 1; min-width: 0; font-weight: 700; color: var(--qb-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog-count { font-size: 13px; font-weight: 700; color: var(--qb-text-secondary); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--qb-border); white-space: nowrap; } .dialog-rail { height: 3px; background: var(--qb-rail); } .dialog-rail > div { height: 3px; width: 0; background: var(--qb-accent); transition: width 200ms ease; } .dialog-body { flex: 1; overflow: auto; padding: 18px 16px 24px; display: flex; flex-direction: column; gap: 14px; } .dialog-foot { display: flex; gap: 8px; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--qb-border); background: var(--qb-bar-bg); backdrop-filter: var(--qb-blur); -webkit-backdrop-filter: var(--qb-blur); } .dialog-foot .icon { width: 52px; height: 52px; flex-shrink: 0; font-size: 20px; } .dialog-foot .btn { flex-grow: 1; height: 52px; font-size: 15px; } .dialog-nav { display: none; gap: 6px; } .qtags { display: flex; flex-wrap: wrap; gap: 6px; } .qtag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--qb-border); color: var(--qb-text-secondary); } .qhead { font-size: 19px; font-weight: 600; color: var(--qb-text-heading); line-height: 1.4; white-space: pre-line; } .qtext { white-space: pre-line; } .passage { white-space: pre-line; padding: 12px 14px; border-left: 3px solid var(--qb-accent); border-radius: 0 10px 10px 0; background: var(--qb-surface); } .opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .opts li { display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 12px; font-size: 15px; white-space: pre-line; background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } .opts li b { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--qb-border-strong); color: var(--qb-text-secondary); font-size: 13px; } .opts li .otext { flex-grow: 1; min-width: 0; } .opts li.correct { background: var(--qb-correct-bg); border-color: var(--qb-correct-border); color: var(--qb-text-heading); box-shadow: none; } .opts li.correct b { background: var(--qb-correct-border); border-color: transparent; color: #04140E; } .opts li.correct::after { content: "Correct"; font-size: 12px; font-weight: 700; color: var(--qb-correct-fg); } .cols { display: grid; gap: 10px; } @media (min-width: 600px) { .cols { grid-template-columns: 1fr 1fr; } } .part { padding-top: 12px; border-top: 1px solid var(--qb-border); display: flex; flex-direction: column; gap: 8px; } .part-label { font-weight: 700; color: var(--qb-text-heading); } .fig { margin: 0; } .fig img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--qb-border); background: #fff; } .fig figcaption { font-size: 12px; color: var(--qb-text-muted); margin-top: 4px; } .q-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; } .q-links .dot { color: var(--qb-text-muted); } .answer { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--qb-border); background: var(--qb-surface); } .answer.ai { border-color: var(--qb-ai-border); background: var(--qb-ai-bg); } .answer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .answer-head h3 { margin: 0; font-size: 14px; flex-grow: 1; } .answer-head .who { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--qb-ai-border); color: var(--qb-accent-fg); } .answer .label { font-size: 12px; color: var(--qb-text-muted); margin-bottom: 8px; } .answer .body { white-space: pre-line; } .answer ol { margin: 6px 0; padding-left: 22px; } .answer p { margin: 0 0 4px; } /* ---------------------------------------------------------------- welcome screen (first visit) */ #intro { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--qb-bg-base); background-image: var(--qb-bg-glow); transition: opacity 500ms ease; overflow: hidden; } #intro.going { opacity: 0; pointer-events: none; } /* one big shape behind the wordmark, as on the design's welcome screen */ #intro::before { content: ""; position: absolute; left: -12%; top: 18%; width: 460px; height: 460px; border-radius: 50%; } :root[data-theme="glass"] #intro::before { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.06) 22%, transparent 40%), radial-gradient(circle at 50% 50%, #101115 0%, #07070A 62%, #15161B 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), inset -10px -14px 26px rgba(90,150,255,0.30), inset 8px 10px 20px rgba(255,255,255,0.10); } :root[data-theme="silver"] #intro::before { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 56%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.52) 96%, rgba(255,255,255,0) 100%); } #intro .word { position: relative; z-index: 1; font-size: 34px; font-weight: 300; line-height: 1; letter-spacing: 0.5em; margin-right: -0.5em; color: var(--qb-text-heading); animation: intro-word 900ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } #intro .sub { position: relative; z-index: 1; font-size: 15px; letter-spacing: 0.1em; color: var(--qb-text-muted); opacity: 0; animation: intro-fade 900ms ease 150ms forwards; } #intro .btn { position: relative; z-index: 1; margin-top: 44px; height: 46px; padding: 0 32px; border-radius: 999px; font-size: 13px; font-weight: 300; letter-spacing: 0.22em; margin-right: -0.22em; opacity: 0; animation: intro-fade 500ms ease 900ms forwards; } @keyframes intro-word { from { letter-spacing: 0.5em; opacity: 0.2; } to { letter-spacing: 0.22em; opacity: 1; } } @keyframes intro-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #intro .word, #intro .sub, #intro .btn { animation: none; opacity: 1; letter-spacing: 0.22em; } } /* ---------------------------------------------------------------- footer */ .foot { position: relative; z-index: 1; max-width: 1400px; margin: 16px auto 0; padding: 16px 16px 28px; border-top: 1px solid var(--qb-border); font-size: 12px; color: var(--qb-text-muted); } .foot p { margin: 4px 0; } .foot b { color: var(--qb-text-secondary); } .script { font-family: "Segoe Script", "Apple Chancery", "Comic Sans MS", cursive; font-size: 1.1em; font-style: italic; } /* ---------------------------------------------------------------- wider screens */ /* Width alone isn't enough: a phone on its side is wide but only ~380px tall, and the question panel (top: 84px; bottom: 20px) then has nothing to sit in. Short screens keep the full-screen phone layout. */ @media (min-width: 900px) and (min-height: 600px) { .bar { height: 64px; padding: 0 28px; gap: 20px; } main { padding: 20px 28px 0; } /* Row 1 is the notice, row 2 holds the tabs and the search side by side, and the filter list starts on row 3, so the tabs and the search always line up however tall the notice is (or when it is closed). */ .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 20px; row-gap: 12px; align-items: start; } #notice-slot { grid-column: 2; grid-row: 1; } /* same height as the search box beside it, and only as wide as its two buttons */ .layout > .tabs { grid-column: 1; grid-row: 2; justify-self: start; align-self: stretch; height: 44px; align-items: center; } .layout > .tools { grid-column: 2; grid-row: 2; } .layout > .summary { grid-column: 2; grid-row: 3; } .layout > #paper-head { grid-column: 2; grid-row: 4; } .layout > #results { grid-column: 2; grid-row: 5; } .layout > .side { display: block; grid-column: 1; grid-row: 3 / span 3; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; padding: 18px; border-radius: 18px; background: var(--qb-glass-fill); border: 1px solid var(--qb-border); box-shadow: var(--qb-glass-shadow); } #open-filters, .subjects { display: none; } .foot { padding: 18px 28px 28px; } /* the open question sits beside the list and stays put while the list scrolls */ .dialog { position: fixed; top: 84px; right: 28px; bottom: 20px; left: auto; width: min(520px, 42vw); } .dialog-box { border-radius: 20px; overflow: hidden; border: 1px solid var(--qb-border); box-shadow: var(--qb-shadow); } body.q-open main { padding-right: min(560px, 44vw); } body.q-open .dialog-foot { border-top: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } body.q-open .dialog-foot .icon { display: none; } .dialog-nav { display: flex; } .dialog-nav .icon { width: 40px; height: 40px; } }