/* CSE 2027 Reviewer 19.70 · styles · built from assets/css/*.css — edit the source files, then rebuild */ /* ==== app.css ==== */ /* CSE 2027 Reviewer — styles */ :root { --navy: #0A2A6B; --navy2: #0038A8; --gold: #FCD116; --gold-soft: #FFF6CC; --red: #CE1126; --red-soft: #FDE8EA; --ph-blue: #0038A8; --ph-red: #CE1126; --ph-yellow: #FCD116; --bg: #F5F6FA; --surface: #FFFFFF; --surface2: #F1F3F8; --ink: #1F2328; --muted: #667085; --line: #E3E7EF; --good: #1E7B45; --good-bg: #E6F4EC; --bad: #B42318; --bad-bg: #FDECEA; --warn: #B54708; --warn-bg: #FEF3E6; --accent: #0038A8; --focus: #0038A8; --radius: 14px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --head: "Poppins", "Inter", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1522; --surface: #172033; --surface2: #1D2840; --ink: #E7EAF0; --muted: #98A2B3; --line: #2A3650; --navy: #0B1220; --navy2: #8FB0F0; --gold-soft: #3A2E12; --good: #52C28A; --good-bg: #133226; --bad: #F97066; --bad-bg: #3B1716; --warn: #F7B267; --warn-bg: #3A2A12; --accent: #8FB0F0; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0F1522; --surface: #172033; --surface2: #1D2840; --ink: #E7EAF0; --muted: #98A2B3; --line: #2A3650; --navy: #0B1220; --navy2: #8FB0F0; --gold-soft: #3A2E12; --good: #52C28A; --good-bg: #133226; --bad: #F97066; --bad-bg: #3B1716; --warn: #F7B267; --warn-bg: #3A2A12; --accent: #8FB0F0; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--head); line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; margin-top: 1.2em; } a { color: var(--accent); } button { font: inherit; color: inherit; } .muted { color: var(--muted); } .small { font-size: .875rem; } .tiny { font-size: .78rem; } .sr { position: absolute; left: -9999px; } /* ---------- layout */ .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .side { background: var(--navy); color: #fff; padding: 22px 16px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; } .brand .logo { width: 40px; height: 40px; border-radius: 11px; display: block; flex: none; } .brand .logo svg { width: 100%; height: 100%; display: block; } .brand b { font-family: var(--head); font-size: 15px; line-height: 1.15; display: block; } .brand span { font-size: 12px; color: #C9D3E6; } .nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #D8DEEA; text-decoration: none; font-weight: 500; } .nav a:hover { background: rgba(255,255,255,.07); color: #fff; } .nav a.on { background: rgba(252,209,22,.14); color: #fff; box-shadow: inset 3px 0 0 var(--ph-yellow); } .nav svg { width: 20px; height: 20px; flex: none; } .side .foot { margin-top: auto; font-size: 12px; color: #9FB0CF; padding: 8px; } .main { padding: 28px clamp(16px, 4vw, 44px) 96px; max-width: 1180px; width: 100%; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .mobilebar, .tabbar { display: none; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .side { display: none; } .mobilebar { display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 20; } .mobilebar .brand { padding: 0; } .mobilebar .brand .logo { width: 32px; height: 32px; font-size: 13px; } .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 30; padding-bottom: env(safe-area-inset-bottom); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; font-size: 11px; color: var(--muted); text-decoration: none; font-weight: 500; } .tabbar a.on { color: var(--accent); } .tabbar svg { width: 22px; height: 22px; } .main { padding: 18px 16px 110px; } } /* ---------- components */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card + .card { margin-top: 16px; } .grid { display: grid; gap: 16px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .g2, .g3 { grid-template-columns: 1fr; } } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .stack > * + * { margin-top: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform .05s, background .15s; min-height: 42px; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--navy2); color: #fff; } :root[data-theme="dark"] .btn.primary { color: #0F1522; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #0F1522; } } .btn.primary:hover { filter: brightness(1.08); } .btn.gold { background: var(--ph-yellow); color: #0A2A6B; } .btn.red { background: var(--ph-red); color: #fff; } .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn.ghost:hover { background: var(--surface2); } .btn.sm { padding: 6px 12px; min-height: 34px; font-size: .9rem; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn:focus-visible, a:focus-visible, .choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface2); color: var(--muted); } .pill.good { background: var(--good-bg); color: var(--good); } .pill.bad { background: var(--bad-bg); color: var(--bad); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.gold { background: var(--gold-soft); color: #7A5B00; } .pill.red { background: var(--red-soft); color: var(--ph-red); } :root[data-theme="dark"] .pill.gold { color: var(--gold); } .seg { display: inline-flex; background: var(--surface2); border-radius: 10px; padding: 3px; } .seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--muted); } .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* hero */ .hero { background: linear-gradient(135deg, #0A2A6B 0%, #0038A8 70%, #1447B8 100%); color: #fff; border: 0; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(252,209,22,.35) 0 30%, rgba(252,209,22,.12) 31% 60%, transparent 61%); } .hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, var(--ph-blue) 0 40%, var(--ph-yellow) 40% 60%, var(--ph-red) 60%); } .hero h1 { color: #fff; } .hero .muted { color: #C9D3E6; } .count { display: flex; gap: 14px; margin: 14px 0 4px; flex-wrap: wrap; } .count div { background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 14px; min-width: 76px; text-align: center; } .count b { font: 700 1.7rem var(--head); display: block; line-height: 1.1; } .count span { font-size: .75rem; color: #C9D3E6; text-transform: uppercase; letter-spacing: .06em; } .kpi { display: flex; flex-direction: column; gap: 2px; } .kpi b { font: 700 1.6rem var(--head); } .kpi span { color: var(--muted); font-size: .85rem; } .bar { height: 10px; border-radius: 999px; background: var(--surface2); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--navy2); transition: width .4s; } .mbar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .gauge { position: relative; width: 150px; height: 150px; } .gauge svg { transform: rotate(-90deg); } .gauge .v { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; } .gauge .v b { font: 700 1.9rem var(--head); display: block; line-height: 1; } .gauge .v span { font-size: .75rem; color: var(--muted); } .topic { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; transition: border-color .15s, transform .1s; } .topic:hover { border-color: var(--navy2); transform: translateY(-1px); } .topic .t { font-weight: 600; line-height: 1.3; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; } /* lessons */ .lessonlist a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--ink); border: 1px solid transparent; } .lessonlist a:hover { background: var(--surface2); } .check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; font-size: 13px; } .check.done { background: var(--good); border-color: var(--good); color: #fff; } .lesson { font-size: 1.02rem; } .lesson table.facts, .facts { width: 100%; border-collapse: collapse; margin: 10px 0 16px; font-size: .94rem; } .facts th, .facts td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .facts th { background: var(--surface2); font-weight: 600; white-space: nowrap; } .tablewrap { overflow-x: auto; } .note, .tip, .trap { border-radius: 10px; padding: 12px 14px; margin: 14px 0; border-left: 4px solid; } .note { background: var(--surface2); border-color: var(--navy2); } .tip { background: var(--good-bg); border-color: var(--good); } .trap { background: var(--warn-bg); border-color: var(--warn); } /* quiz */ .qwrap { max-width: 820px; margin: 0 auto; } .qhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .qtext { font-size: 1.08rem; margin: 6px 0 16px; overflow-wrap: anywhere; } .qtext .passage { background: var(--surface2); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; font-size: .98rem; } .qtext .stem, .qtext .er { display: block; margin-top: 8px; padding: 10px 14px; background: var(--surface2); border-radius: 10px; font-size: 1.06rem; } .qtext .er u { text-decoration-thickness: 2px; text-underline-offset: 4px; } .qtext .er sub { font-weight: 700; color: var(--accent); margin: 0 3px 0 1px; } .qtext .kw { color: var(--accent); letter-spacing: .02em; } .qtext .math { font-family: var(--mono); background: var(--surface2); padding: 2px 8px; border-radius: 6px; white-space: nowrap; } .qtext .series { display: inline-block; margin-top: 8px; font-size: 1.15rem; padding: 8px 14px; white-space: normal; } .qtext .analogy { font-family: var(--head); font-weight: 600; font-size: 1.15rem; } .qtext .sents { margin-top: 10px; display: grid; gap: 6px; } .qtext .sent { padding: 8px 12px; background: var(--surface2); border-radius: 8px; } .qtext table.dtable, .qtext table.cmp { border-collapse: collapse; margin: 10px 0; font-size: .95rem; background: var(--surface); } .qtext table.dtable caption { caption-side: top; text-align: left; font-weight: 600; padding-bottom: 6px; } .qtext table.dtable th, .qtext table.dtable td, .qtext table.cmp th, .qtext table.cmp td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; } .qtext table.cmp td { font-family: var(--mono); font-size: .95rem; } .qtext table.code th, .qtext table.code td { text-align: center; min-width: 34px; } .chartwrap { max-width: 420px; margin: 8px 0; } .chart .bar { fill: var(--navy2); } .chart .axis { stroke: var(--muted); } .chart text { fill: var(--ink); font: 10px var(--font); text-anchor: middle; } .chart .bar-v { font-weight: 600; } .figrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .figq { font: 700 1.6rem var(--head); color: var(--accent); padding: 0 8px; } .fig .fig-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; } .fig .fig-stroke { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .fig .fig-fill { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; } .choices { display: grid; gap: 10px; } .choice { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .12s, background .12s; min-height: 50px; } .choice:hover:not(:disabled) { border-color: var(--navy2); } .choice .k { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface2); display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .choice .ct { padding-top: 2px; overflow-wrap: anywhere; } .choice svg.fig { display: block; } .choice.sel { border-color: var(--navy2); background: color-mix(in srgb, var(--navy2) 8%, var(--surface)); } .choice.sel .k { background: var(--navy2); color: #fff; } .choice.right { border-color: var(--good); background: var(--good-bg); } .choice.right .k { background: var(--good); color: #fff; } .choice.wrong { border-color: var(--bad); background: var(--bad-bg); } .choice.wrong .k { background: var(--bad); color: #fff; } .choice:disabled { cursor: default; } .explain { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--surface2); border-left: 4px solid var(--navy2); } .explain.ok { border-color: var(--good); } .explain.no { border-color: var(--bad); } .explain .tag, .tag { display: inline-block; font-size: .72rem; font-weight: 700; background: var(--gold-soft); color: #7A5B00; padding: 1px 8px; border-radius: 999px; margin-left: 4px; } .qfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .progress { height: 6px; background: var(--surface2); border-radius: 999px; overflow: hidden; margin-bottom: 14px; } .progress i { display: block; height: 100%; background: var(--gold); transition: width .25s; } .timer { font: 700 1.05rem var(--mono); padding: 6px 12px; border-radius: 8px; background: var(--surface2); } .timer.low { background: var(--bad-bg); color: var(--bad); } .navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; } .navgrid button { height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: .8rem; font-weight: 600; cursor: pointer; } .navgrid button.ans { background: var(--navy2); color: #fff; border-color: var(--navy2); } .navgrid button.flag { box-shadow: inset 0 -3px 0 var(--gold); } .navgrid button.cur { outline: 2px solid var(--gold); outline-offset: 1px; } .navgrid button.right { background: var(--good); color: #fff; border-color: var(--good); } .navgrid button.wrong { background: var(--bad); color: #fff; border-color: var(--bad); } .examlayout { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; } .examlayout aside { position: sticky; top: 16px; } @media (max-width: 900px) { .examlayout { grid-template-columns: 1fr; } .examlayout aside { position: static; order: 2; } } .kbd { font: 600 .75rem var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; } /* charts */ .spark { width: 100%; height: 160px; } .spark path.line { fill: none; stroke: var(--navy2); stroke-width: 2.5; } .spark path.area { fill: color-mix(in srgb, var(--navy2) 12%, transparent); } .spark line.goal { stroke: var(--gold); stroke-dasharray: 5 4; stroke-width: 1.5; } .spark text { fill: var(--muted); font: 11px var(--font); } .spark circle { fill: var(--navy2); } .cal { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; overflow-x: auto; padding-bottom: 4px; } .cal i { width: 12px; height: 12px; border-radius: 3px; background: var(--surface2); display: block; } .cal i.l1 { background: color-mix(in srgb, var(--good) 30%, var(--surface2)); } .cal i.l2 { background: color-mix(in srgb, var(--good) 55%, var(--surface2)); } .cal i.l3 { background: color-mix(in srgb, var(--good) 80%, var(--surface2)); } .cal i.l4 { background: var(--good); } table.list { width: 100%; border-collapse: collapse; font-size: .93rem; } table.list th, table.list td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.list th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .plan-day { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); } .plan-day.today { background: var(--gold-soft); margin: 0 -20px; padding: 12px 20px; border-radius: 10px; border-bottom: 0; } @media (max-width: 600px) { .plan-day { grid-template-columns: 1fr; gap: 6px; } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-weight: 600; font-size: .9rem; } input[type=text], input[type=number], select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 42px; } .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; z-index: 99; box-shadow: var(--shadow); } .empty { text-align: center; padding: 28px 16px; color: var(--muted); } .srcs li { margin-bottom: 6px; } .fade-in { animation: fi .25s ease; } @keyframes fi { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media print { .side, .tabbar, .mobilebar { display: none; } .app { display: block; } } @media (max-width: 700px) { .qfoot > .tiny { display: none; } .qfoot { flex-wrap: nowrap; } .qhead { position: sticky; top: 56px; z-index: 5; background: var(--bg); padding: 6px 0; } } /* ---------- accounts & study groups ---------- */ .avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 700 13px var(--head); flex: none; vertical-align: middle; letter-spacing: .02em; } .side .foot .chip { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.06); } .side .foot .chip:hover { background: rgba(255,255,255,.12); } .side .foot .chip b { display: block; font-size: 13px; } .side .foot .chip .tiny, .side .foot .chip a { color: #C9D3E6; display: block; } .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 15% 8%, rgba(252,209,22,.22), transparent 38%), radial-gradient(circle at 90% 95%, rgba(206,17,38,.10), transparent 40%), radial-gradient(circle at 85% 5%, rgba(0,56,168,.12), transparent 40%), var(--bg); } .auth-card { width: 100%; max-width: 420px; } .auth-card .brand { padding: 0; } .auth-card .brand b { color: var(--ink); } .auth-card input[type=text], .auth-card input[type=password] { width: 100%; } .seg.scrollx { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .seg.scrollx::-webkit-scrollbar { display: none; } .seg.scrollx button { white-space: nowrap; } .snap { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; } .snap > div { background: var(--surface2); border-radius: 12px; padding: 12px; } .snap b { display: block; font: 700 1.35rem var(--head); } .snap span { font-size: .8rem; color: var(--muted); } .lb { display: flex; flex-direction: column; } .lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 10px; } .lb-row:last-child { border-bottom: 0; } .lb-row.me, tr.me td { background: var(--gold-soft); } .lb-rank { width: 30px; text-align: center; font-size: 1.3rem; flex: none; } .lb-rank .rk { font: 700 .95rem var(--head); color: var(--muted); } .lb-name { flex: 1; min-width: 0; } .lb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .lb-val { font: 700 1.05rem var(--head); white-space: nowrap; } .lb.compact .lb-row { padding: 6px 8px; gap: 10px; } .lb.compact .lb-rank { font-size: 1.05rem; } .lb.compact .lb-val { font-size: .95rem; } .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 6px; } .vs > div { height: 10px; background: var(--surface2); border-radius: 6px; overflow: hidden; display: flex; } .vs-l { justify-content: flex-end; } .vs-l i { background: var(--navy2); } .vs-r i { background: var(--gold) !important; } .vs i { display: block; height: 100%; border-radius: 6px; } .mini { background: var(--surface2); border-radius: 12px; padding: 10px 12px; } .chal { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .chal.ended { opacity: .75; } table.tt td, table.tt th { text-align: center; padding: 6px 4px; } table.tt td:first-child, table.tt th:first-child { text-align: left; } table.tt td.best { background: var(--good-bg); color: var(--good); font-weight: 700; border-radius: 6px; } .feed { height: min(58vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; } .msg { display: flex; gap: 8px; align-items: flex-end; max-width: 85%; } .msg.mine { align-self: flex-end; flex-direction: row-reverse; } .bubble { background: var(--surface2); border-radius: 14px 14px 14px 4px; padding: 8px 12px; word-wrap: break-word; overflow-wrap: anywhere; } .msg.mine .bubble { background: var(--navy2); color: #fff; border-radius: 14px 14px 4px 14px; } .msg.mine .bubble .muted { color: rgba(255,255,255,.7); } :root[data-theme="dark"] .msg.mine .bubble { color: #0F1522; } :root[data-theme="dark"] .msg.mine .bubble .muted { color: rgba(15,21,34,.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .msg.mine .bubble { color: #0F1522; } :root:not([data-theme="light"]) .msg.mine .bubble .muted { color: rgba(15,21,34,.7); } } .bubble b { display: block; color: var(--accent); } .evt { text-align: center; font-size: .8rem; color: var(--muted); } .evt span { background: var(--surface2); padding: 4px 10px; border-radius: 999px; display: inline-block; } input[type=password] { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 42px; } .main { min-width: 0; } .card { min-width: 0; } .seg.scrollx { display: flex; width: max-content; } @media (max-width: 700px) { .topbar .row .btn { padding: 8px 12px; } .feed { height: 52vh; } } .grid > * { min-width: 0; } .field input, .field select { width: 100%; min-width: 0; max-width: 100%; } /* ---------- answer comparison ---------- */ .cmpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } @media (max-width: 700px) { .cmpgrid { grid-template-columns: 1fr; } } .cmp { border-radius: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-left-width: 4px; font-weight: 400; } .cmp.mine { border-left-color: var(--bad); } .cmp.right { border-left-color: var(--good); } .cmp-h { font: 700 .78rem var(--head); letter-spacing: .04em; text-transform: uppercase; } .cmp.mine .cmp-h { color: var(--bad); } .cmp.right .cmp-h { color: var(--good); } .cmp-c { margin: 6px 0; font-weight: 600; } .cmp-w { font-size: .92rem; line-height: 1.5; } .k.sm { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--surface2); font: 700 .72rem var(--head); vertical-align: 1px; margin-right: 2px; } .otherwhy { margin-top: 10px; font-size: .9rem; } .otherwhy summary { cursor: pointer; font-weight: 600; color: var(--accent); } .otherwhy ul { margin: 8px 0 0; padding-left: 18px; } .otherwhy li { margin: 4px 0; } /* ---------- presence ---------- */ .av-wrap { position: relative; display: inline-flex; flex: none; vertical-align: middle; } .on-dot { position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 9px; min-height: 9px; max-width: 14px; max-height: 14px; border-radius: 50%; background: #31A24C; border: 2px solid var(--surface); box-sizing: border-box; } .on-dot.inline { position: static; display: inline-block; width: 9px; height: 9px; min-width: 0; min-height: 0; border: 0; vertical-align: 0; } .online-txt { color: #1E8E3E; font-weight: 600; } :root[data-theme="dark"] .online-txt { color: #52C28A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .online-txt { color: #52C28A; } } .nav-badge { margin-left: auto; background: #E41E3F; color: #fff; font: 700 11px var(--font); border-radius: 999px; padding: 1px 7px; } .mobilebar .nav-badge { position: absolute; top: -6px; right: -6px; margin: 0; } .lb-chat { padding: 4px 8px; } .fr-act { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } @media (max-width: 600px) { .lb-row:has(.fr-act) { flex-wrap: wrap; } .fr-act { width: 100%; justify-content: flex-start; padding-left: 46px; } } /* ---------- messenger dock ---------- */ #msgr.hide { display: none; } #m-launch { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, #0038A8, #1F5FD6); box-shadow: 0 6px 20px rgba(16,24,40,.28); display: grid; place-items: center; } :root[data-theme="dark"] #m-launch { background: linear-gradient(135deg, #0038A8, #1F5FD6); } #m-badge { position: absolute; top: -3px; right: -3px; background: #E41E3F; color: #fff; font: 700 12px var(--font); min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; padding: 0 6px; border: 2px solid var(--bg); } #m-panel { position: fixed; right: 22px; bottom: 92px; z-index: 61; width: 340px; height: min(520px, calc(100vh - 120px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(16,24,40,.25); display: flex; flex-direction: column; overflow: hidden; } #m-panel[hidden] { display: none; } .m-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 6px; } .m-head b { font: 700 1.25rem var(--head); } .m-ic { position: relative; border: 0; background: var(--surface2); color: var(--ink); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; font-size: 14px; text-decoration: none; } .m-ic:hover { filter: brightness(.95); } .m-count { display: inline-grid; place-items: center; background: #E41E3F; color: #fff; font: 700 10px var(--font); font-style: normal; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; } .m-ic .m-count { position: absolute; top: -4px; right: -4px; } .m-search { padding: 4px 12px 8px; } .m-search input { width: 100%; border-radius: 999px; background: var(--surface2); border: 0; min-height: 36px; } .m-tabs { margin: 0 12px 6px; display: flex; } .m-tabs button { flex: 1; } .m-list { overflow-y: auto; flex: 1; padding: 0 6px 8px; } .m-sec { font: 700 .75rem var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 10px 10px 4px; } .m-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 8px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink); font: inherit; } .m-item:hover, .m-item.sel { background: var(--surface2); } .m-it { flex: 1; min-width: 0; display: flex; flex-direction: column; } .m-it b { font-size: .95rem; } .m-it span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-it span.unread { color: var(--ink); font-weight: 700; } .m-meta { font-size: .72rem; color: var(--muted); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } #m-wins { position: fixed; right: 380px; bottom: 0; z-index: 59; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; } #msgr:not(.panel-open) #m-wins { right: 96px; } .m-win { pointer-events: auto; width: 330px; height: 450px; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 8px 30px rgba(16,24,40,.22); display: flex; flex-direction: column; overflow: hidden; } .m-win.min { height: 52px; width: 240px; } .m-win.min .m-msgs, .m-win.min .m-form { display: none; } .m-whead { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--line); min-height: 52px; } .m-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; } .m-who b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-who .tiny { color: var(--muted); } .m-wbtn { display: flex; gap: 4px; } .m-wbtn .m-ic { width: 28px; height: 28px; background: transparent; } .m-back { display: none; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--accent); } .m-msgs { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 3px; } .m-row { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; } .m-row.mine { align-self: flex-end; flex-direction: row-reverse; } .m-row.pending { opacity: .6; } .m-avsp { width: 26px; flex: none; } .m-bub-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .m-row.mine .m-bub-wrap { align-items: flex-end; } .m-bub { background: var(--surface2); padding: 8px 12px; border-radius: 18px; overflow-wrap: anywhere; font-size: .93rem; line-height: 1.4; } .m-row.mine .m-bub { background: #0038A8; color: #fff; } .m-time { text-align: center; font-size: .72rem; color: var(--muted); margin: 10px 0 4px; } .m-hello { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; } .m-form { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--line); } .m-input { flex: 1; resize: none; border-radius: 18px; background: var(--surface2); border: 0; padding: 9px 14px; min-height: 38px; max-height: 110px; font: inherit; color: var(--ink); } .m-send { border: 0; background: transparent; color: #0038A8; font-size: 1.3rem; cursor: pointer; width: 36px; height: 38px; } .qshare { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--surface); max-width: 280px; font-size: .88rem; } .qshare.invite { border-color: var(--gold); background: var(--gold-soft); } .qs-q { margin: 6px 0; } .qs-q svg { max-width: 100%; height: auto; } .qs-q table { font-size: .8rem; } .qs-c { margin: 0; padding-left: 0; list-style: none; } .qs-c li { padding: 3px 6px; border-radius: 6px; } .qs-c li.right { background: var(--good-bg); color: var(--good); font-weight: 600; } .qs-ans { margin-top: 8px; padding: 8px; background: var(--good-bg); border-radius: 8px; } .msg-toast { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; bottom: 92px; } .modal-ov { position: fixed; inset: 0; z-index: 80; background: rgba(10,15,30,.45); display: grid; place-items: center; padding: 16px; } .modal { width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; } .qs-prev { max-height: 120px; overflow: auto; background: var(--surface2); border-radius: 10px; padding: 8px 10px; margin-top: 10px; } .qs-prev svg { max-height: 100px; width: auto; } .sh-list { max-height: 230px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 4px; } @media (max-width: 899px) { #m-launch { right: 16px; bottom: 80px; width: 52px; height: 52px; } #m-panel { inset: 0; width: auto; height: auto; border-radius: 0; bottom: 0; right: 0; z-index: 70; } #m-wins, #msgr:not(.panel-open) #m-wins { right: 0; left: 0; } .m-win { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; z-index: 71; } .m-win.min { display: none; } .m-back { display: block; } .msg-toast { bottom: 140px; } } #m-badge[hidden] { display: none; } @media (max-width: 899px) { #msgr.panel-open #m-launch, #msgr.win-open #m-launch { display: none; } #m-wins { z-index: 71; } } /* ---------- tab badge ---------- */ .tabbar a { position: relative; } .tab-badge { position: absolute; top: 3px; left: 50%; margin-left: 6px; background: #E41E3F; color: #fff; font: 700 10px var(--font); min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--surface); } .side .nav a .tab-badge { position: static; margin-left: auto; border: 0; } @media (max-width: 380px) { .tabbar a { font-size: 10px; } .mobilebar .brand b { font-size: 13px; } } @media (max-width: 899px) { .mobilebar .row { gap: 6px; } .mobilebar .row .btn.sm { padding: 6px 8px; } } /* ---------- messages page & full-screen chat ---------- */ .ml-page { max-width: 720px; } .ml-page input[type=search] { width: 100%; border-radius: 999px; background: var(--surface2); border: 0; min-height: 42px; padding: 0 16px; font: inherit; color: var(--ink); } .ml-online { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; } .ml-online::-webkit-scrollbar { display: none; } .ml-online a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); font-size: .78rem; width: 62px; flex: none; } .ml-online a span:last-child { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-tabs { display: flex; margin-bottom: 6px; } .ml-tabs button { flex: 1; } .ml-list { display: flex; flex-direction: column; } .ml-item { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 12px; text-decoration: none; color: var(--ink); } .ml-item:active, .ml-item:hover { background: var(--surface2); } .ml-item .m-it b { font-size: 1rem; } .ml-item .m-it span { font-size: .86rem; } .chat-page { position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh; z-index: 90; background: var(--surface); display: flex; flex-direction: column; } body.in-chat .tabbar, body.in-chat .mobilebar, body.in-chat #m-launch { display: none !important; } body.in-chat { overflow: hidden; } .cp-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--surface); } .cp-back { border: 0; background: transparent; color: var(--accent); font-size: 2rem; line-height: 1; width: 40px; height: 40px; cursor: pointer; flex: none; } .cp-head .m-who { flex: 1; min-width: 0; cursor: default; } .cp-head .m-who b { font-size: 1rem; } .cp-act { flex: none; } .cp-msgs { flex: 1; padding: 12px 10px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .cp-msgs .m-row { max-width: 84%; } .cp-msgs .qshare { max-width: 100%; } .cp-form { padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: var(--surface); } .cp-form .m-input { font-size: 16px; } /* 16px stops iOS from zooming in */ /* ---------- notifications ---------- */ .n-card { padding: 6px; } .n-list { display: flex; flex-direction: column; } .n-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; text-align: left; padding: 10px; border-radius: 12px; cursor: pointer; color: var(--ink); font: inherit; } .n-item:hover { background: var(--surface2); } .n-item.unread { background: rgba(59,111,216,.07); } .n-ic { flex: none; } .n-emoji { width: 40px; height: 40px; border-radius: 50%; background: var(--surface2); display: grid; place-items: center; font-size: 1.2rem; } .n-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .n-txt b { font-weight: 600; } .n-txt > span { font-size: .88rem; color: var(--muted); } .n-item.unread .n-txt b { font-weight: 700; } .n-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ph-red); flex: none; } .news-list { display: flex; flex-direction: column; } .news-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); } .news-item:last-child { border-bottom: 0; } .news-item .pill { flex: none; margin-top: 2px; } .msg-toast .n-ic { font-size: 1.3rem; } .msg-toast { width: min(92vw, 380px); font-weight: 400; } .msg-toast b { font-weight: 700; } /* ---------- Philippine tricolor accents ---------- */ .side { box-shadow: inset -4px 0 0 0 transparent; background: linear-gradient(180deg, #0A2A6B 0%, #08214F 100%); } .side::before, .mobilebar::after { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--ph-blue) 0 40%, var(--ph-yellow) 40% 60%, var(--ph-red) 60%); } .side::before { margin: -22px -16px 16px; } .mobilebar::after { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; } .mobilebar { background: linear-gradient(90deg, #0A2A6B, #0038A8); } .nav-badge, .tab-badge, #m-badge, .m-count { background: var(--ph-red) !important; } .progress i, .bar i { background: linear-gradient(90deg, var(--ph-blue), #1F5FD6); } .timer.low { color: var(--ph-red); } .card.hero .btn.gold { box-shadow: 0 4px 14px rgba(252,209,22,.35); } :root[data-theme="dark"] .nav a.on { background: rgba(252,209,22,.12); } .people-tabs { display: flex; width: 100%; max-width: 420px; margin-bottom: 16px; } .people-tabs a { flex: 1; text-align: center; text-decoration: none; padding: 9px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); } .people-tabs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* floating messenger on phones: sits above the bottom navigation bar */ @media (max-width: 899px) { #m-launch { right: 16px; bottom: calc(70px + env(safe-area-inset-bottom)); width: 54px; height: 54px; z-index: 29; } #m-panel, #m-wins { display: none !important; } .msg-toast { bottom: calc(136px + env(safe-area-inset-bottom)); } .main { padding-bottom: 150px; } } .mobilebar .btn.on { background: rgba(252,209,22,.22) !important; color: #fff !important; border-color: var(--ph-yellow) !important; } /* ---------- forms lesson ---------- */ .form-ex .ex, .lesson .ex { display: inline-block; font-family: var(--mono); font-size: .86rem; background: #FFFBE6; color: #0A2A6B; border: 1px dashed #D8B800; padding: 1px 6px; border-radius: 4px; margin: 2px 0; } :root[data-theme="dark"] .lesson .ex { background: #2A2410; color: #FCD116; } .sheet-demo { overflow-x: auto; padding: 8px 0; } .sheet-svg .sh-box { fill: var(--surface); stroke: var(--ink); stroke-width: 1; } .sheet-svg .sh-digit { font: 700 13px var(--mono); fill: var(--ink); } .sheet-svg .sh-lbl { font: 600 11px var(--font); fill: var(--muted); } .sh-off { fill: none; stroke: var(--muted); stroke-width: 1.2; } .sh-on, .sh-inkfill { fill: #111; stroke: #111; } :root[data-theme="dark"] .sh-on, :root[data-theme="dark"] .sh-inkfill { fill: #E7EAF0; stroke: #E7EAF0; } .sh-ink { fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; } :root[data-theme="dark"] .sh-ink { stroke: #E7EAF0; } .mark-demo { display: flex; flex-wrap: wrap; gap: 24px; margin: 10px 0 16px; } .mark-demo > div { display: flex; flex-direction: column; gap: 4px; } .bad-txt { color: var(--bad); } .good-txt { color: var(--good); } /* ---------- v8: reactions & shared files ---------- */ .m-att { border: 0; background: transparent; color: #0038A8; display: inline-grid; place-items: center; width: 34px; height: 38px; cursor: pointer; flex: none; border-radius: 50%; padding: 0; } .m-att:hover { background: var(--surface2); } .m-row { position: relative; } .m-react-btn { align-self: center; flex: none; border: 0; background: transparent; color: var(--muted); font-size: 1.05rem; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity .12s; padding: 0; } .m-row:hover .m-react-btn, .m-react-btn:focus-visible { opacity: 1; } .m-react-btn:hover { background: var(--surface2); } @media (hover: none) { .m-react-btn { opacity: .8; } } @media (hover: hover) and (pointer: fine) { .m-cam { display: none; } } .m-bub-wrap { position: relative; } .m-rx { align-self: flex-start; margin-top: -10px; margin-left: 8px; display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; font-size: .82rem; line-height: 1.35; box-shadow: 0 1px 3px rgba(16,24,40,.15); cursor: pointer; position: relative; z-index: 1; color: var(--ink); } .m-row.mine .m-rx { align-self: flex-end; margin-left: 0; margin-right: 8px; } .m-rx span { font-size: .72rem; color: var(--muted); margin-left: 2px; font-weight: 600; } .m-rx.own { border-color: #0038A8; background: #EAF0FF; } :root[data-theme="dark"] .m-rx.own { background: #1B2B55; } .rx-picker { position: fixed; z-index: 95; display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; box-shadow: 0 8px 26px rgba(16,24,40,.25); animation: rxpop .14s ease-out; } .rx-picker button { border: 0; background: transparent; font-size: 1.6rem; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; transition: transform .1s; padding: 0; } .rx-picker button:hover { transform: scale(1.25) translateY(-3px); } .rx-picker button.on { background: var(--surface2); } @keyframes rxpop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } } .m-imgwrap { display: block; max-width: 240px; border-radius: 16px; overflow: hidden; background: var(--surface2); line-height: 0; } .m-img { display: block; width: 100%; max-width: 240px; max-height: 320px; object-fit: cover; height: auto; } .m-exp { font-size: .7rem; } .m-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface2); color: var(--ink); text-decoration: none; max-width: 250px; font-size: .88rem; overflow-wrap: anywhere; } .m-file .m-fi { font-size: 1.5rem; flex: none; } .m-file b { font-size: .9rem; font-weight: 600; } .m-exp + .m-rx { margin-top: 0; } .m-row.mine .m-file { background: #0038A8; color: #fff; } .m-row.mine .m-file .muted { color: #D6E0FF; } .m-file.expired { flex-wrap: wrap; opacity: .75; background: var(--surface2) !important; color: var(--muted) !important; border: 1px dashed var(--line); } .m-prog { width: 160px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; } .m-prog i { display: block; height: 100%; background: #0038A8; transition: width .15s; } .m-row.failed .m-bub, .m-row.failed .m-file { outline: 1px solid var(--bad); } @media (max-width: 899px) { .m-imgwrap, .m-img { max-width: 62vw; } } @media (max-width: 640px) { .form-ex, .form-ex tbody, .form-ex tr, .form-ex th, .form-ex td { display: block; width: 100%; } .form-ex th { white-space: normal; border-bottom: 0; padding-bottom: 4px; } .form-ex td { padding-top: 4px; } .facts th { white-space: normal; } } :root[data-theme="dark"] .m-att { color: #8FB0FF; } .m-react-btn { display: inline-grid; place-items: center; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-att { color: #8FB0FF; } } /* ==== glass.css ==== */ /* CSE 2027 Reviewer — "Liquid Glass" look (v9) Follows Apple's Liquid Glass guidance: glass is used only for the floating navigation/control layer (sidebar, top bar, tab bar, messenger, menus, sheets, toasts). Content sits on calm, grouped surfaces with larger corner radii. Falls back to solid surfaces for "Reduce transparency" and older browsers. */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; --head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; --bg: #F2F2F7; --surface: #FFFFFF; --surface2: rgba(118,118,128,.10); --line: rgba(60,60,67,.14); --ink: #1C1C1E; --muted: #6E6E73; --fill: rgba(118,118,128,.12); --fill2: rgba(118,118,128,.18); --radius: 24px; --r-ctl: 14px; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05); --glass-bg: rgba(255,255,255,.60); --glass-strong: rgba(255,255,255,.78); --glass-edge: rgba(255,255,255,.75); --glass-hi: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 .5px rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.04); --glass-shadow: 0 12px 36px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18) 100%); --glass-blur: blur(24px) saturate(185%); --tint: rgba(0,56,168,.12); --ambient-a: rgba(0,56,168,.20); --ambient-b: rgba(252,209,22,.26); --ambient-c: rgba(206,17,38,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --surface: #1C1C1E; --surface2: rgba(118,118,128,.24); --line: rgba(84,84,88,.55); --ink: #F5F5F7; --muted: #98989F; --fill: rgba(118,118,128,.24); --fill2: rgba(118,118,128,.32); --shadow: 0 1px 2px rgba(0,0,0,.4); --glass-bg: rgba(44,44,48,.52); --glass-strong: rgba(36,36,40,.80); --glass-edge: rgba(255,255,255,.14); --glass-hi: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 -1px 1px rgba(0,0,0,.3); --glass-shadow: 0 14px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,.04) 100%); --tint: rgba(143,176,240,.18); --ambient-a: rgba(31,95,214,.30); --ambient-b: rgba(252,209,22,.12); --ambient-c: rgba(206,17,38,.16); } } :root[data-theme="dark"] { --bg: #000000; --surface: #1C1C1E; --surface2: rgba(118,118,128,.24); --line: rgba(84,84,88,.55); --ink: #F5F5F7; --muted: #98989F; --fill: rgba(118,118,128,.24); --fill2: rgba(118,118,128,.32); --shadow: 0 1px 2px rgba(0,0,0,.4); --glass-bg: rgba(44,44,48,.52); --glass-strong: rgba(36,36,40,.80); --glass-edge: rgba(255,255,255,.14); --glass-hi: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 .5px rgba(255,255,255,.10), inset 0 -1px 1px rgba(0,0,0,.3); --glass-shadow: 0 14px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 45%, rgba(255,255,255,.04) 100%); --tint: rgba(143,176,240,.18); --ambient-a: rgba(31,95,214,.30); --ambient-b: rgba(252,209,22,.12); --ambient-c: rgba(206,17,38,.16); } /* ---------- ambient backdrop: soft brand-colored light that the glass picks up ---------- */ body { background: var(--bg); font-family: var(--font); letter-spacing: -.005em; } body::before { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none; background: radial-gradient(40vmax 34vmax at 12% 8%, var(--ambient-a), transparent 70%), radial-gradient(34vmax 30vmax at 92% 18%, var(--ambient-b), transparent 70%), radial-gradient(40vmax 36vmax at 80% 96%, var(--ambient-c), transparent 70%), radial-gradient(30vmax 30vmax at 6% 88%, var(--ambient-a), transparent 72%); } h1, h2, h3, h4 { font-family: var(--head); letter-spacing: -.022em; font-weight: 700; } h1 { font-size: clamp(1.9rem, 3.4vw, 2.3rem); letter-spacing: -.028em; } h2 { font-size: 1.28rem; } h3 { font-weight: 650; } /* ---------- the glass material (navigation & control layer only) ---------- */ .side, .mobilebar, .tabbar, #m-launch, #m-panel, .m-win, .modal, .toast, .rx-picker, .gl-group, .cp-head, .cp-form { background-color: var(--glass-bg); background-image: var(--glass-sheen); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); } /* panels that hold reading content get a denser glass so text stays legible */ #m-panel, .m-win, .modal { background-color: var(--glass-strong); } /* ---------- desktop: floating inset sidebar ---------- */ @media (min-width: 901px) { .app { grid-template-columns: 276px 1fr; } } .side { position: sticky; top: 12px; margin: 12px 0 12px 12px; height: calc(100vh - 24px); border-radius: 28px; padding: 18px 12px 12px; color: var(--ink); overflow: hidden; } .side::before { display: none; } .side .brand { padding: 4px 8px 16px; } .side .brand b { color: var(--ink); } .side .brand span { color: var(--muted); } .brand .logo { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,56,168,.25), inset 0 1px 0 rgba(255,255,255,.4); overflow: hidden; } .nav a { color: var(--ink); border-radius: 14px; padding: 9px 12px; font-weight: 500; transition: background .18s, color .18s; } .nav a svg { color: var(--accent); opacity: .9; } .nav a:hover { background: var(--fill); color: var(--ink); } .nav a.on { background: var(--tint); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); font-weight: 600; } :root[data-theme="dark"] .nav a.on { background: var(--tint); } .side .foot { color: var(--muted); padding: 6px 2px 0; } .side .foot .chip { background: var(--fill); color: var(--ink); border-radius: 18px; } .side .foot .chip:hover { background: var(--fill2); } .side .foot .chip .tiny, .side .foot .chip a { color: var(--muted); } .main { padding-top: 34px; } /* ---------- content layer: calm grouped surfaces, concentric radii ---------- */ .card { border-radius: var(--radius); border: 0; box-shadow: var(--shadow); padding: 22px; } :root[data-theme="dark"] .card { border: .5px solid rgba(255,255,255,.06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card { border: .5px solid rgba(255,255,255,.06); } } .card + .card { margin-top: 18px; } .hero { border-radius: 28px; background: linear-gradient(145deg, #062A7A 0%, #0038A8 55%, #1F5FD6 100%); box-shadow: 0 18px 44px rgba(0,56,168,.28); } .hero::before { height: 4px; opacity: .9; } .count div { background: rgba(255,255,255,.14); border-radius: 18px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .count span { text-transform: none; letter-spacing: 0; font-size: .78rem; } .topic, .chal, .mini, .snap > div { border-radius: 18px; } .topic { border: 0; background: var(--surface); box-shadow: var(--shadow); } .topic:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.08); } .lessonlist a { border-radius: 14px; } .note, .tip, .trap, .explain { border-radius: 16px; border-left-width: 0; box-shadow: inset 4px 0 0 currentColor; } .note { color: inherit; box-shadow: inset 4px 0 0 var(--accent); } .tip { box-shadow: inset 4px 0 0 var(--good); } .trap { box-shadow: inset 4px 0 0 var(--warn); } .explain { box-shadow: inset 4px 0 0 var(--accent); } .explain.ok { box-shadow: inset 4px 0 0 var(--good); } .explain.no { box-shadow: inset 4px 0 0 var(--bad); } .cmp { border-radius: 16px; border: 0; box-shadow: var(--shadow); } .cmp.mine { box-shadow: inset 4px 0 0 var(--bad), var(--shadow); } .cmp.right { box-shadow: inset 4px 0 0 var(--good), var(--shadow); } .cmp-h { text-transform: none; letter-spacing: 0; font-size: .82rem; } .facts th { background: var(--fill); } .facts, .qtext .passage, .qtext .stem, .qtext .er, .qtext .sent, .qtext .math { border-radius: 12px; } table.list th, .m-sec { text-transform: none; letter-spacing: 0; font-size: .82rem; } .lb-row { border-radius: 14px; } .plan-day.today { border-radius: 16px; } /* ---------- controls: capsules, fills, glass buttons ---------- */ .btn { border-radius: 999px; padding: 10px 18px; font-weight: 600; transition: transform .12s, filter .15s, background .15s; } .btn:active { transform: scale(.97); } .btn.primary { background: linear-gradient(180deg, #1F5FD6 0%, #0038A8 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,56,168,.30); border: 0; } :root[data-theme="dark"] .btn.primary { color: #fff; background: linear-gradient(180deg, #3A78F0 0%, #1F5FD6 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #fff; background: linear-gradient(180deg, #3A78F0 0%, #1F5FD6 100%); } } .btn.gold { background: linear-gradient(180deg, #FFE066 0%, #FCD116 100%); color: #0A2A6B; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(252,209,22,.30); border: 0; } .btn.red { background: linear-gradient(180deg, #E23349 0%, #CE1126 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); border: 0; } .btn.ghost { background: var(--fill); border-color: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--fill2); } .hero .btn.ghost { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn.sm { padding: 6px 14px; min-height: 32px; } .btn:focus-visible, a:focus-visible, .choice:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } .pill { border-radius: 999px; background: var(--fill); } .seg { background: var(--fill); border-radius: 999px; padding: 3px; } .seg button { border-radius: 999px; padding: 7px 15px; transition: background .2s, color .2s, box-shadow .2s; } .seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8); } :root[data-theme="dark"] .seg button.on { background: #636366; box-shadow: 0 2px 8px rgba(0,0,0,.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on { background: #636366; box-shadow: 0 2px 8px rgba(0,0,0,.4); } } .people-tabs { background: var(--fill); border-radius: 999px; padding: 3px; } .people-tabs a { border-radius: 999px; } .people-tabs a.on { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.12); } input[type=text], input[type=number], input[type=password], input[type=search], input[type=email], select, textarea { background: var(--fill); border: 1px solid transparent; border-radius: var(--r-ctl); min-height: 44px; transition: background .15s, border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus:not(.m-input) { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .choice { border-radius: 18px; border: 1.5px solid transparent; background: var(--surface); box-shadow: var(--shadow); transition: border-color .15s, background .15s, transform .1s; } .choice:active:not(:disabled) { transform: scale(.99); } .choice .k { border-radius: 10px; background: var(--fill); } .choice:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .navgrid button { border-radius: 10px; border: 0; background: var(--fill); } .timer { border-radius: 999px; background: var(--fill); } .progress, .bar { background: var(--fill); } .k.sm { background: var(--fill); } /* ---------- phones: glass top bar, floating capsule tab bar ---------- */ @media (max-width: 900px) { .mobilebar { position: sticky; top: 0; margin: 0; border-radius: 0 0 24px 24px; border-top: 0; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); color: var(--ink); background-color: var(--glass-bg); } .mobilebar::after { display: none; } .mobilebar .brand b { color: var(--ink); font-size: 15px; letter-spacing: -.01em; } .gl-group { display: flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: var(--glass-hi), 0 4px 14px rgba(0,0,0,.08); } .gl-ic { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); text-decoration: none; transition: background .15s; } .gl-ic:hover, .gl-ic.on { background: var(--fill); color: var(--accent); } .mobilebar .nav-badge { top: -2px; right: -2px; } .tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 5px; border-radius: 999px; gap: 2px; border-top: 1px solid var(--glass-edge); transition: left .35s cubic-bezier(.2,.8,.2,1), right .35s cubic-bezier(.2,.8,.2,1), padding .3s, transform .3s; } body.has-launch .tabbar { right: 82px; } .tabbar a { border-radius: 999px; padding: 7px 0 6px; color: var(--ink); gap: 1px; font-size: 10.5px; font-weight: 600; transition: background .25s, color .25s, padding .3s; } .tabbar a span { max-height: 16px; overflow: hidden; transition: max-height .3s, opacity .2s; } .tabbar a.on { color: var(--accent); background: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .tabbar svg { width: 23px; height: 23px; } /* minimized while scrolling down, like iOS */ body.tb-min .tabbar { left: 22%; right: 22%; padding: 3px; } body.tb-min.has-launch .tabbar { left: 16%; right: calc(16% + 60px); } body.tb-min .tabbar a { padding: 7px 0; } body.tb-min .tabbar a span { max-height: 0; opacity: 0; } body.tb-min .tabbar svg { width: 21px; height: 21px; } /* messenger launcher: its own glass circle beside the tab bar */ #m-launch { right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; width: 62px !important; height: 62px !important; color: var(--accent); background-color: var(--glass-bg); z-index: 31 !important; transition: transform .3s; } body.tb-min #m-launch { transform: scale(.88); transform-origin: bottom right; } .main { padding: 20px 16px 120px !important; } h1 { font-size: 2rem; } .qhead { background: transparent; } .msg-toast, .toast { bottom: calc(92px + env(safe-area-inset-bottom)) !important; } } /* ---------- messenger ---------- */ #m-launch { border: 1px solid var(--glass-edge); color: var(--accent); } #m-launch svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.12)); } #m-launch:hover { transform: scale(1.04); } #m-panel { border-radius: 28px; right: 22px; bottom: 96px; } .m-head b { font-family: var(--head); letter-spacing: -.02em; font-size: 1.4rem; } .m-ic { background: var(--fill); } .m-search input, .ml-page input[type=search] { background: var(--fill); border-radius: 999px; } .m-item, .ml-item, .n-item { border-radius: 14px; } .m-item:hover, .m-item.sel, .ml-item:hover, .n-item:hover { background: var(--fill); } #m-wins { bottom: 12px; } .m-win { border-radius: 24px; border-bottom: 1px solid var(--glass-edge); } .m-win.min { border-radius: 999px; height: 54px; } .m-whead { border-bottom: .5px solid var(--line); } .m-bub { border-radius: 20px; background: var(--fill); } .m-row.mine .m-bub { background: linear-gradient(180deg, #1F5FD6, #0038A8); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .m-form { border-top: .5px solid var(--line); } .m-input { background: var(--fill); border-radius: 20px; } .m-send, .m-att { color: var(--accent) !important; } .m-file { border-radius: 18px; } .m-row.mine .m-file { background: linear-gradient(180deg, #1F5FD6, #0038A8); } .m-imgwrap { border-radius: 20px; } .rx-picker { border-radius: 999px; padding: 5px 8px; } .m-rx { background: var(--glass-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--glass-edge); } /* full-screen chat on phones: glass header and floating input capsule */ .chat-page { background: var(--bg); } .cp-head { position: relative; z-index: 2; border-radius: 0 0 24px 24px; border-top: 0; border-bottom: 1px solid var(--glass-edge); } .cp-msgs { padding-bottom: 16px; } .cp-form { margin: 0 10px calc(8px + env(safe-area-inset-bottom)); border-radius: 28px; padding: 6px 8px; } .cp-form .m-input { background: transparent; } @media (max-width: 899px) { .m-win { border-radius: 0; } } /* ---------- sheets, menus, toasts ---------- */ .modal-ov { background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal, .modal.card { border-radius: 30px; padding: 24px; border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); } @media (max-width: 600px) { .modal-ov { align-items: end; padding: 8px; } .modal { border-radius: 32px; max-height: 88vh; } } .toast { color: var(--ink); border-radius: 999px; padding: 11px 18px; font-weight: 600; } .msg-toast { border-radius: 22px; } /* ---------- sign-in screen ---------- */ .auth-wrap { background: transparent; } .auth-card { border-radius: 32px; background-color: var(--glass-strong); background-image: var(--glass-sheen); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); } /* ---------- motion ---------- */ .fade-in { animation: gl-in .32s cubic-bezier(.2,.8,.2,1); } @keyframes gl-in { from { opacity: 0; transform: translateY(6px) scale(.995); } to { opacity: 1; transform: none; } } /* ---------- accessibility & fallbacks ---------- */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --glass-bg: rgba(250,250,252,.96); --glass-strong: #FFFFFF; } :root[data-theme="dark"] { --glass-bg: rgba(30,30,32,.97); --glass-strong: #1C1C1E; } } @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: #F9F9FB; --glass-strong: #FFFFFF; --glass-sheen: none; --glass-blur: none; } :root[data-theme="dark"] { --glass-bg: #1C1C1E; --glass-strong: #1C1C1E; } body::before { display: none; } } @media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass-bg: #1C1C1E; --glass-strong: #1C1C1E; } } @media (prefers-contrast: more) { :root { --glass-bg: rgba(255,255,255,.92); --glass-strong: #fff; --glass-edge: rgba(0,0,0,.35); --line: rgba(0,0,0,.35); } :root[data-theme="dark"] { --glass-bg: rgba(20,20,22,.95); --glass-edge: rgba(255,255,255,.45); } } @media print { body::before { display: none; } .side, .tabbar, .mobilebar, #msgr { display: none !important; } } .m-input:focus { outline: none; border-color: transparent; box-shadow: none; } .m-form .m-input:focus { background: var(--fill2); } /* ---------- polish ---------- */ .grid > .card + .card, .grid > * + .card { margin-top: 0; } .grid + .card, .card + .grid, .grid + .grid, section.grid + section.card { margin-top: 18px; } :root { --glass-strong: rgba(255,255,255,.90); } :root[data-theme="dark"] { --glass-strong: rgba(30,30,33,.90); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass-strong: rgba(30,30,33,.90); } } .toast { background-color: var(--glass-strong); } /* segmented control on the blue hero card */ .hero .seg { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); } .hero .seg button { color: rgba(255,255,255,.85); } .hero .seg button.on { background: #fff; color: #0A2A6B; } .hero::after { opacity: .55; } #view > .grid + div:not(:empty), #view > div:not(:empty) + .card, #view > div:not(:empty) + .grid, #view > div:not(:empty) + section { margin-top: 18px; } .hero .seg button.on { background: #fff !important; color: #0A2A6B !important; box-shadow: 0 2px 8px rgba(0,0,0,.18) !important; } /* ---------- Apple system typography (v9.1) ---------- Apple's fonts (SF Pro, SF Compact, SF Mono, New York) may not be hosted or embedded on websites (developer.apple.com/fonts license: "solely for creating mock-ups"). Instead we ask the device for its own built-in system fonts: iPhone, iPad and Mac render the real SF Pro / SF Pro Rounded / SF Mono / New York. Other devices fall back to Inter (a close SF look-alike), then their own system font. */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font); letter-spacing: normal; font-synthesis: none; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; } /* SF applies its own optical tracking, so no manual letter-spacing */ h1, h2, h3, h4, .m-head b { font-family: var(--head); letter-spacing: normal; } /* Apple text styles: Large Title 34 / Title 1 28 / Title 2 22 / Title 3 20 / Headline 17 semibold / Body 17 / Subheadline 15 / Footnote 13 / Caption 12 */ h1 { font-size: clamp(1.75rem, 3vw, 2.125rem); font-weight: 700; line-height: 1.2; } h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.27; } h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; } .small { font-size: .9375rem; } .tiny { font-size: .8125rem; } @media (max-width: 900px) { body { font-size: 17px; line-height: 1.47; } /* iOS Body */ h1 { font-size: 2.125rem; line-height: 1.2; } /* Large Title */ .tabbar a { font-size: 10px; font-weight: 600; } /* iOS tab bar label */ .qtext { font-size: 1.0625rem; } } /* big numbers use SF Pro Rounded, like Apple's Fitness and Health apps */ .count b, .kpi b, .gauge .v b, .snap b, .lb-val, .figq { font-family: var(--rounded); font-weight: 700; letter-spacing: normal; } .count b, .kpi b, .gauge .v b, .snap b, .lb-val, .timer, .m-count, .nav-badge, .tab-badge, #m-badge, .navgrid button { font-variant-numeric: tabular-nums; } .timer { font-family: var(--rounded); font-weight: 600; } /* long reading passages use New York, Apple's reading serif */ .qtext .passage, .lesson blockquote { font-family: var(--serif); font-size: 1.04em; line-height: 1.6; } .btn, .seg button, .pill, .tabbar a, .nav a { font-family: var(--font); } code, kbd, .kbd, .qtext .math, .form-ex .ex, .lesson .ex { font-family: var(--mono); } /* ---------- icon system (v9.2): one line-icon set instead of emojis ---------- */ .ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; display: inline-block; } .btn .ic { width: 1.1em; height: 1.1em; } .ic-blue { color: #0A62E0; } .ic-red { color: #E0263C; } .ic-yellow { color: #D9A400; } .ic-green { color: #1E9E55; } .ic-orange { color: #F2690D; } .ic-purple { color: #8A4FD8; } .ic-teal { color: #0E9AA7; } .ic-pink { color: #E23D82; } .ic-gray { color: var(--muted); } .ic-gold { color: #D4A017; } .ic-silver { color: #98A2B3; } .ic-bronze { color: #C0773A; } :root[data-theme="dark"] .ic-blue { color: #6FA3FF; } :root[data-theme="dark"] .ic-yellow { color: #FCD116; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic-blue { color: #6FA3FF; } :root:not([data-theme="light"]) .ic-yellow { color: #FCD116; } } .hero .ic, .btn.primary .ic, .btn.red .ic { color: inherit; } .ic-tile { --ts: 30px; width: var(--ts); height: var(--ts); border-radius: calc(var(--ts) * .26); display: inline-grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.12); vertical-align: middle; } .ic-tile .ic { width: 58%; height: 58%; vertical-align: 0; } .t-blue { background: linear-gradient(180deg, #3D8BFF, #0A62E0); } .t-red { background: linear-gradient(180deg, #FF5A6E, #E0263C); } .t-yellow { background: linear-gradient(180deg, #FFD84D, #F2B800); color: #3A2A00; } .t-green { background: linear-gradient(180deg, #4CD37E, #1E9E55); } .t-orange { background: linear-gradient(180deg, #FF9A45, #F2690D); } .t-purple { background: linear-gradient(180deg, #B07BFF, #8A4FD8); } .t-teal { background: linear-gradient(180deg, #3FC6D1, #0E9AA7); } .t-pink { background: linear-gradient(180deg, #FF72AE, #E23D82); } .t-gray { background: linear-gradient(180deg, #A5ABB6, #7C8491); } .t-indigo { background: linear-gradient(180deg, #7A83FF, #4B55E0); } .empty-ic { --ts: 64px; margin: 0 auto 10px; } .n-emoji { background: none; width: auto; height: auto; } .lb-rank .ic { width: 22px; height: 22px; vertical-align: middle; } .check .ic { width: 14px; height: 14px; vertical-align: 0; } .m-send .ic { width: 22px; height: 22px; } .m-ic .ic { width: 16px; height: 16px; vertical-align: 0; } .m-back .ic, .cp-back .ic { width: 26px; height: 26px; vertical-align: middle; } .kpi b .ic, .snap b .ic { width: .8em; height: .8em; vertical-align: -0.05em; margin-left: 2px; } .toast .ic { margin-right: 6px; } /* ---------- reactions (Tapback-style icons) & message menu ---------- */ .rx-ic { display: inline-block; vertical-align: -0.2em; flex: none; } .rx-love { color: #FF3B5C; } .rx-haha, .rx-wow, .rx-sad { color: #FFC928; } .rx-angry { color: #FF8A3D; } .rx-like { color: #0A84FF; } .rx-picker { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .rx-bar, .rx-menu { background-color: var(--glass-strong); background-image: var(--glass-sheen); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); } .rx-bar { display: flex; gap: 2px; padding: 5px 8px; border-radius: 999px; } .rx-bar button { border: 0; background: transparent; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .12s; padding: 0; } .rx-bar button:hover { transform: scale(1.18) translateY(-2px); } .rx-bar button.on { background: var(--fill2); } .rx-menu { border-radius: 18px; padding: 6px; display: flex; flex-direction: column; min-width: 220px; align-self: center; } .rx-menu button { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; padding: 10px 12px; border-radius: 12px; font: 500 .95rem var(--font); color: var(--ink); cursor: pointer; text-align: left; } .rx-menu button + button { margin-top: 2px; } .rx-menu button:hover { background: var(--fill); } .rx-menu button.danger { color: #E0263C; } .m-rx { gap: 3px; padding: 2px 7px; } .m-unsent { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--line); font-style: italic; box-shadow: none !important; display: inline-flex; align-items: center; gap: 6px; } .m-row.mine .m-unsent { background: transparent !important; } .unsend-sheet { text-align: center; max-width: 360px; } .unsend-sheet .ic-tile { margin: 4px auto 10px; display: grid; } .unsend-sheet h2 { margin-bottom: 6px; } .sheet-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .sheet-btns .btn { width: 100%; } /* ---------- breathing room between boxes (v9.2) ---------- */ .row { gap: 12px; } .spread { gap: 14px; } .topbar { margin-bottom: 22px; gap: 14px; } .stack > * + * { margin-top: 14px; } .grid { gap: 18px; } .field { gap: 8px; } .field + .field { margin-top: 4px; } .choices { gap: 12px; } .cmpgrid { gap: 12px; } .snap { gap: 12px; } .navgrid { gap: 8px; } .count { gap: 12px; } .lessonlist a + a, .ml-item + .ml-item, .m-item + .m-item, .n-item + .n-item, .lb-row + .lb-row, .news-item + .news-item { margin-top: 6px; } .lb-row { border-bottom: 0; } .lb-row:not(.me) { box-shadow: 0 .5px 0 var(--line); } .chal + .chal { margin-top: 12px; } .card ul li + li, .card ol li + li { margin-top: 6px; } .plan-day { padding: 14px 0; } .plan-day li { margin: 6px 0; } .plan-day.today { margin: 6px -20px; } .pill + .pill { margin-left: 6px; } .row > .pill + .pill, .spread > .pill + .pill { margin-left: 0; } .qhead { gap: 12px; margin-bottom: 14px; } .qhead .row { gap: 12px; } .qfoot { gap: 12px; margin-top: 20px; } .explain { margin-top: 18px; } .explain .row { margin-top: 12px; } .form-ex .ex, .lesson .ex { margin: 3px 6px 3px 0; } .mini + .mini, .note + .note, .tip + .tip { margin-top: 12px; } .fr-act { gap: 8px; } .m-list .m-item { margin-left: 2px; margin-right: 2px; } details + details { margin-top: 10px; } .people-tabs { margin-bottom: 20px; } .seg + .seg, .seg.scrollx + .seg { margin-top: 10px; } .rx-menu button { width: auto; height: auto; font-size: .95rem; white-space: nowrap; transform: none !important; } .rx-menu button .ic { width: 18px; height: 18px; } /* ---------- v10: strategy lessons, figures, charts ---------- */ .src-note { margin-top: 22px; padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: .88rem; color: var(--muted); } .src-note a { color: var(--accent); } .pill.lyqa { background: color-mix(in srgb, #8A4FD8 14%, transparent); color: #7A3FD0; font-size: .7rem; vertical-align: 2px; } :root[data-theme="dark"] .pill.lyqa { color: #C9A8FF; } details.try { margin: 14px 0; border-radius: 16px; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } details.try summary { cursor: pointer; padding: 12px 14px; list-style: none; } details.try summary::-webkit-details-marker { display: none; } details.try summary b { color: var(--accent); margin-right: 6px; } details.try summary::after { content: "Show answer"; float: right; font-size: .78rem; font-weight: 600; color: var(--accent); margin-left: 8px; } details.try[open] summary::after { content: "Hide"; } details.try > div { padding: 0 14px 14px; border-top: 1px dashed var(--line); padding-top: 10px; } .gfig { display: block; max-width: 100%; height: auto; margin: 12px auto; overflow: visible; } .qtext .gfig { margin: 12px 0; } .gfig .gs { stroke: var(--ink); stroke-width: 2; fill: none; stroke-linejoin: round; } .gfig .gfill { fill: color-mix(in srgb, var(--accent) 10%, transparent); } .gfig .gshade { fill: color-mix(in srgb, var(--accent) 35%, transparent); } .gfig .gwhite { fill: var(--surface); } .gfig .gd { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; } .gfig .gl { fill: var(--ink); font: 600 13px var(--font); } .gfig .gl.mid { text-anchor: middle; } .gfig .gl.small { font-size: 10.5px; font-weight: 500; fill: var(--muted); } .gfig .gx { fill: #E0263C; font: 700 15px var(--font); } .chartwrap.wide { max-width: 520px; } .chartfig { margin: 10px 0 14px; } .chartfig figcaption { font-weight: 600; font-size: .88rem; margin-bottom: 4px; } .chart .grid { stroke: var(--line); stroke-width: 1; } .chart .yt { fill: var(--muted); font: 10px var(--font); text-anchor: end; } .chart .xt { fill: var(--ink); font: 10px var(--font); text-anchor: middle; } .chart .vl { fill: var(--ink); font: 600 9.5px var(--font); text-anchor: middle; } .chart .lg { fill: var(--ink); font: 11px var(--font); } .chart .ln { fill: none; stroke-width: 2.5; } .chart .s0 { fill: #0A62E0; stroke: #0A62E0; } .chart .s1 { fill: #F2B800; stroke: #F2B800; } .chart .s2 { fill: #E0263C; stroke: #E0263C; } .chart .s3 { fill: #1E9E55; stroke: #1E9E55; } .chart .s4 { fill: #8A4FD8; stroke: #8A4FD8; } .chart .s5 { fill: #0E9AA7; stroke: #0E9AA7; } .chart .ln.s0, .chart .ln.s1, .chart .ln.s2 { fill: none; } .chart path.pie { stroke: var(--surface); stroke-width: 1.5; } .qtext table.dtable { border-radius: 12px; overflow: hidden; } .qtext .tablewrap { margin: 10px 0; } .chart .lg, .chart .ut { text-anchor: start; } .chart .ut { fill: var(--muted); font: 10px var(--font); } /* ===================================================================================== v11 — floating header, profile chip, search dock, glass lens tab bar, collapsible sidebar, visual Learn tab, dictionary, search, profile, admin ===================================================================================== */ :root { --rim-a: rgba(255,255,255,.95); --rim-b: rgba(255,255,255,.12); --rim-c: rgba(255,255,255,.55); --lens: rgba(255,255,255,.62); --spring: cubic-bezier(.3,1.35,.5,1); } :root[data-theme="dark"] { --rim-a: rgba(255,255,255,.38); --rim-b: rgba(255,255,255,.04); --rim-c: rgba(255,255,255,.2); --lens: rgba(255,255,255,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rim-a: rgba(255,255,255,.38); --rim-b: rgba(255,255,255,.04); --rim-c: rgba(255,255,255,.2); --lens: rgba(255,255,255,.14); } } /* glass for the new floating controls */ .pchip, .gl-circle, .tb-search, .tb-sform { background-color: var(--glass-bg); background-image: var(--glass-sheen); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-shadow); } /* liquid rim light + pointer-following highlight */ .pchip, .gl-circle, .tb-search, .tb-sform, .tabbar, .side, .modal, .rx-bar, .toast { position: relative; isolation: isolate; } .toast { position: fixed; } .tabbar { position: absolute; } .side { position: sticky; } .pchip::before, .gl-circle::before, .tb-search::before, .tb-sform::before, .tabbar::before, .side::before, .modal::before, .rx-bar::before { content: ""; display: block; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: 2; margin: 0; height: auto; background: linear-gradient(150deg, var(--rim-a), var(--rim-b) 34%, var(--rim-b) 62%, var(--rim-c)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .pchip::after, .gl-circle::after, .tb-search::after, .tabbar::after, .btn::after, .lcat-h::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .25s; background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.45), transparent 62%); } .pchip:hover::after, .gl-circle:hover::after, .tb-search:hover::after, .tabbar:hover::after, .btn:hover::after, .lcat-h:hover::after { opacity: .7; } .btn { position: relative; overflow: hidden; isolation: isolate; } .pchip:active, .gl-circle:active, .tb-search:active, .tabbar a:active, .lcat-h:active, .lrow:active { transform: scale(.94); } .pchip, .gl-circle, .tb-search, .tabbar a, .lcat-h, .lrow { transition: transform .35s var(--spring), background .2s, opacity .3s; } /* avatars with photos */ .avatar.photo { padding: 0; overflow: hidden; background: var(--fill); } .avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar.guest { background: var(--fill2); color: var(--muted); display: inline-grid; place-items: center; } .avatar.guest .ic { width: 60%; height: 60%; vertical-align: 0; } /* profile chip */ .pchip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 16px 4px 4px; border-radius: 999px; text-decoration: none; color: var(--ink); min-width: 0; max-width: 62vw; } .pchip .pc-av { position: relative; flex: none; display: inline-flex; } .pchip .pc-av .avatar { width: 40px; height: 40px; font-size: 15px; } .pchip .pc-av .nav-badge { position: absolute; top: -3px; right: -4px; margin: 0; } .pchip .pc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .pchip .pc-txt b { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pchip .pc-txt span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side .pchip.big { flex: 1; max-width: none; padding: 6px 12px 6px 6px; background-color: var(--fill); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: transparent; } .side .pchip.big::before { display: none; } .side .pchip.big .pc-av .avatar { width: 44px; height: 44px; } .side .pchip.big.on { background-color: var(--tint); } /* header icon circles */ .hdr-ics { display: flex; gap: 10px; } .gl-circle { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); text-decoration: none; flex: none; } .gl-circle svg { width: 21px; height: 21px; } .gl-circle.on { color: var(--accent); } .gl-circle .tab-badge, .gl-circle .nav-badge { position: absolute; top: -3px; right: -3px; left: auto; margin: 0; z-index: 3; } /* sidebar top + collapse */ .side-top { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; } .side-toggle { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fill); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .35s var(--spring); } .side-toggle:hover { color: var(--ink); background: var(--fill2); } .side .brand { display: none; } .sync-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 6px 4px 0; } .sync-line .ic { width: 14px; height: 14px; } .side .nav { overflow-y: auto; scrollbar-width: none; flex: 1; } .side .nav::-webkit-scrollbar { display: none; } .side .nav a { position: relative; overflow: hidden; } @media (min-width: 901px) { .app { transition: grid-template-columns .4s var(--spring); } body.side-collapsed .app { grid-template-columns: 100px 1fr; } body.side-collapsed .side { padding: 14px 10px; } body.side-collapsed .side-top { flex-direction: column; } body.side-collapsed .side .pchip.big { padding: 4px; background: transparent; justify-content: center; } body.side-collapsed .pchip .pc-txt, body.side-collapsed .side .nav a span:not(.tab-badge):not(.nav-badge), body.side-collapsed .side .foot { display: none; } body.side-collapsed .side .nav a { justify-content: center; padding: 11px 0; } body.side-collapsed .side .nav a .nav-badge, body.side-collapsed .side .nav a .tab-badge { position: absolute; top: 4px; right: 14px; } body.side-collapsed .side-toggle { transform: rotate(180deg); } .dock { display: none; } } /* ---------------- phones: floating header + dock ---------------- */ @media (max-width: 900px) { .mobilebar { background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; pointer-events: none; border-radius: 0 !important; } .mobilebar::before { content: ""; position: absolute; inset: 0 0 -26px 0; z-index: -1; pointer-events: none; padding: 0; border-radius: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, transparent) 30%, transparent); -webkit-mask: none; mask: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); } .mobilebar > * { pointer-events: auto; } #m-launch { display: none !important; } .dock { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; z-index: 35; pointer-events: none; } .dock > * { pointer-events: auto; } .dock .tabbar { position: absolute !important; inset: 0 76px 0 0 !important; left: 0 !important; right: 76px !important; bottom: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; border-radius: 999px; transition: right .45s var(--spring), opacity .3s, transform .45s var(--spring), filter .3s; } body.tb-min .dock .tabbar { right: 34% !important; } body.tb-min .dock .tabbar a span { max-height: 0; opacity: 0; } .tabbar a { position: relative; z-index: 3; background: transparent !important; box-shadow: none !important; } .tabbar a.on { color: var(--accent); } .tb-lens { position: absolute; z-index: 2; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; opacity: 0; pointer-events: none; background: var(--lens); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 1px rgba(0,0,0,.05), 0 3px 12px rgba(0,0,0,.10); transition: transform .5s var(--spring), width .4s var(--spring), opacity .25s; } .tb-search { position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); cursor: pointer; padding: 0; } .tb-search svg { width: 24px; height: 24px; transition: transform .45s var(--spring), opacity .2s; } .tb-search .tb-x { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: rotate(-90deg) scale(.5); transition: transform .45s var(--spring), opacity .2s; } .tb-sform { position: absolute; left: 0; right: 76px; bottom: 0; height: 64px; border-radius: 999px; display: flex; align-items: center; gap: 10px; padding: 0 20px; opacity: 0; pointer-events: none; clip-path: inset(0 0 0 88% round 999px); transition: clip-path .5s var(--spring), opacity .25s; } .tb-sform .tb-sic svg { width: 20px; height: 20px; color: var(--muted); display: block; } .tb-sform input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 17px; min-height: 44px; padding: 0; color: var(--ink); outline: none; } body.search-open .dock .tabbar { opacity: 0; transform: scale(.9); pointer-events: none; filter: blur(4px); } body.search-open .tb-sform { opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0 round 999px); } body.search-open .tb-search > svg { opacity: 0; transform: rotate(90deg) scale(.5); } body.search-open .tb-search .tb-x { opacity: 1; transform: none; } .main { padding-top: 8px !important; } } /* ---------------- Learn: category accordion ---------------- */ .learn-sum .ring { flex: none; } .dict-card { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); margin-top: 18px; } .dict-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; } .lcats { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .lcat { background: var(--surface); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; } :root[data-theme="dark"] .lcat { border: .5px solid rgba(255,255,255,.06); } .lcat-h { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); font: inherit; border-radius: 26px; } .lcat-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lcat-t b { font-size: 1.08rem; font-family: var(--head); } .chev { color: var(--muted); display: inline-grid; flex: none; } .chev .ic { transition: transform .35s var(--spring); } .lcat.open .lcat-h .chev .ic { transform: rotate(90deg); } .lcat-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--spring); } .lcat.open .lcat-b { grid-template-rows: 1fr; } .lcat-in { overflow: hidden; padding: 0 10px; } .lcat.open .lcat-in { padding-bottom: 10px; } .lrow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 16px; text-decoration: none; color: var(--ink); } .lrow:hover { background: var(--fill); } .lrow + .lrow { margin-top: 4px; } .lnum { width: 30px; height: 30px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font: 600 13px var(--rounded); flex: none; } .lnum.done { background: var(--good); color: #fff; } .lnum .ic { width: 15px; height: 15px; vertical-align: 0; } .lrow-t { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ring { flex: none; } .ring .ring-bg { fill: none; stroke: var(--fill2); stroke-width: 4; } .ring .ring-fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .6s; } .ring text { font: 700 10.5px var(--rounded); fill: var(--ink); } /* ---------------- dictionary ---------------- */ .dtools { display: flex; flex-direction: column; gap: 12px; } .dsearch { display: flex; align-items: center; gap: 10px; background: var(--fill); border-radius: 999px; padding: 0 16px; } .dsearch .ic { color: var(--muted); } .dsearch input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 46px; padding: 0; outline: none; } .dsearch.big { background: var(--surface); padding: 4px 20px; border-radius: 999px; } .azbar { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .azbar::-webkit-scrollbar { display: none; } .azbar button { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--fill); font: 600 13px var(--font); color: var(--ink); cursor: pointer; } .azbar button.on { background: var(--accent); color: #fff; } .dlist { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .dentry { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); } .dentry summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .dentry summary::-webkit-details-marker { display: none; } .dw { font: 700 1.05rem var(--head); } .dp { color: var(--muted); font-size: .85rem; } .dm { flex-basis: 100%; color: var(--muted); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dentry[open] .dm { display: none; } .dbody { padding: 0 16px 14px; } .dmean { margin: 0 0 6px; } .drow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; } .drow b { font-size: .78rem; margin-right: 4px; color: var(--muted); } .chip-w { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); text-decoration: none; font-size: .86rem; } .chip-w.anto { background: color-mix(in srgb, #E0263C 10%, transparent); color: #C21F33; } .dex { font-family: var(--serif); font-style: italic; margin: 8px 0 0; } /* ---------------- search ---------------- */ .sres h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; } .sr-list { display: flex; flex-direction: column; gap: 4px; } .srow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); } .srow:hover { background: var(--fill); } .sr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sr-t b { font-weight: 600; } .sr-t .tiny { overflow: hidden; text-overflow: ellipsis; } mark { background: color-mix(in srgb, #FCD116 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } /* ---------------- profile ---------------- */ .phero { text-align: center; padding-top: 28px; } .pav-wrap { position: relative; width: 104px; margin: 0 auto 12px; } .pav-wrap > .avatar { width: 104px; height: 104px; font-size: 38px; box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 0 0 4px var(--surface); } .pav-cam { position: absolute; right: -4px; bottom: -2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer; background: linear-gradient(180deg, #3D8BFF, #0A62E0); box-shadow: 0 4px 14px rgba(10,98,224,.45), inset 0 1px 0 rgba(255,255,255,.45); border: 3px solid var(--surface); } .pav-cam .ic { width: 18px; height: 18px; vertical-align: 0; } .avatar.guest.big { width: 104px; height: 104px; } .pname { margin: 0; font-size: 1.75rem; } .pbtns { justify-content: center; margin-top: 14px; } .pkpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0 18px; } .pkpis div { background: var(--fill); border-radius: 16px; padding: 10px 6px; text-align: center; } .pkpis b { display: block; font: 700 1.25rem var(--rounded); } .pkpis span { font-size: .72rem; color: var(--muted); } .pkpis b .ic { width: .8em; height: .8em; } @media (max-width: 600px) { .pkpis { grid-template-columns: repeat(3, 1fr); } } .psubs { display: flex; flex-direction: column; gap: 14px; } .psub { display: flex; gap: 12px; align-items: center; } .psub-t { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .ptabs { display: flex; width: 100%; margin: 22px 0 16px; } .ptabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .ptab > .topbar h1, .ptab h1 { font-size: 1.45rem; } .admin h3 { margin-top: 20px; } .admin h2 { display: flex; align-items: center; gap: 10px; } .danger-t { color: #E0263C !important; } /* ---------------- explanations & methods ---------------- */ .howto { margin-top: 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); padding: 0 14px; } .howto summary { cursor: pointer; padding: 10px 0; font-weight: 600; } .howto ol { margin: 0 0 8px; padding-left: 20px; } .howto li { margin: 5px 0; } .howto a { display: inline-block; margin-bottom: 12px; } .wordnotes { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #8A4FD8 7%, var(--surface)); border: 1px solid color-mix(in srgb, #8A4FD8 18%, transparent); } .wn-h { font-weight: 600; margin-bottom: 6px; } .wn + .wn { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); } .method { margin-top: 26px; padding-top: 10px; border-top: 1px solid var(--line); } .steps li { margin: 6px 0; } /* v11.0 polish: denser glass on the floating dock so content behind stays legible */ @media (max-width: 860px) { .dock .tabbar, .dock .tb-search, .dock .tb-sform { background: var(--glass-strong) !important; -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); } } /* ==== liquid.css ==== */ /* CSE 2027 Reviewer — Liquid Glass, monochrome edition (v12) Rounded controls, frosted transparency, soft shadows, subtle highlights, monochrome palette. Loaded after glass.css and overrides it. Semantic colors stay only where they carry meaning (right / wrong answers, destructive actions, chart series). */ :root { --bg: #EEEFF2; --surface: rgba(255,255,255,.66); --ink: #17171A; --muted: #6C6C72; --accent: #17171A; --focus: #17171A; --tint: rgba(23,23,26,.06); --navy2: #17171A; --fill: rgba(23,23,26,.055); --fill2: rgba(23,23,26,.09); --line: rgba(23,23,26,.09); /* the material */ --lq-bg: rgba(255,255,255,.52); --lq-bg-strong: rgba(255,255,255,.80); --lq-blur: blur(22px) saturate(170%); --lq-rim: inset 0 0 0 1px rgba(255,255,255,.78); --lq-hi: inset 0 1.5px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.55), inset 0 0 14px rgba(255,255,255,.55); --lq-depth: inset 0 -10px 18px -12px rgba(0,0,0,.10); --lq-edge: 0 0 0 .5px rgba(0,0,0,.07); --lq-shadow: 0 22px 44px -18px rgba(20,20,30,.22), 0 6px 14px -6px rgba(20,20,30,.08); --lq-shadow-sm: 0 10px 24px -12px rgba(20,20,30,.20), 0 2px 6px -2px rgba(20,20,30,.06); --lq-ink-btn: linear-gradient(180deg, #3A3A40 0%, #17171A 100%); --lq-ink-txt: #fff; --glass-bg: var(--lq-bg); --glass-strong: var(--lq-bg-strong); --glass-edge: rgba(255,255,255,.7); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 45%, rgba(255,255,255,.12)); --glass-blur: var(--lq-blur); --lens: rgba(255,255,255,.22); --ambient-a: rgba(255,255,255,.95); --ambient-b: rgba(200,203,212,.55); --ambient-c: rgba(222,224,230,.9); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B0B0D; --surface: rgba(38,38,42,.62); --ink: #F4F4F6; --muted: #9A9AA2; --accent: #F4F4F6; --focus: #F4F4F6; --tint: rgba(255,255,255,.08); --navy2: #F4F4F6; --fill: rgba(255,255,255,.07); --fill2: rgba(255,255,255,.11); --line: rgba(255,255,255,.10); --lq-bg: rgba(44,44,50,.46); --lq-bg-strong: rgba(30,30,34,.84); --lq-rim: inset 0 0 0 1px rgba(255,255,255,.12); --lq-hi: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 14px rgba(255,255,255,.04); --lq-depth: inset 0 -10px 18px -12px rgba(0,0,0,.5); --lq-edge: 0 0 0 .5px rgba(0,0,0,.6); --lq-shadow: 0 22px 44px -18px rgba(0,0,0,.75), 0 6px 14px -6px rgba(0,0,0,.5); --lq-shadow-sm: 0 10px 24px -12px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.4); --lq-ink-btn: linear-gradient(180deg, #FFFFFF 0%, #DADADF 100%); --lq-ink-txt: #111113; --glass-edge: rgba(255,255,255,.12); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%, rgba(255,255,255,.03)); --lens: rgba(255,255,255,.08); --ambient-a: rgba(70,70,80,.35); --ambient-b: rgba(40,40,48,.5); --ambient-c: rgba(60,60,70,.3); } } :root[data-theme="dark"] { --bg: #0B0B0D; --surface: rgba(38,38,42,.62); --ink: #F4F4F6; --muted: #9A9AA2; --accent: #F4F4F6; --focus: #F4F4F6; --tint: rgba(255,255,255,.08); --navy2: #F4F4F6; --fill: rgba(255,255,255,.07); --fill2: rgba(255,255,255,.11); --line: rgba(255,255,255,.10); --lq-bg: rgba(44,44,50,.46); --lq-bg-strong: rgba(30,30,34,.84); --lq-rim: inset 0 0 0 1px rgba(255,255,255,.12); --lq-hi: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 14px rgba(255,255,255,.04); --lq-depth: inset 0 -10px 18px -12px rgba(0,0,0,.5); --lq-edge: 0 0 0 .5px rgba(0,0,0,.6); --lq-shadow: 0 22px 44px -18px rgba(0,0,0,.75), 0 6px 14px -6px rgba(0,0,0,.5); --lq-shadow-sm: 0 10px 24px -12px rgba(0,0,0,.7), 0 2px 6px -2px rgba(0,0,0,.4); --lq-ink-btn: linear-gradient(180deg, #FFFFFF 0%, #DADADF 100%); --lq-ink-txt: #111113; --glass-edge: rgba(255,255,255,.12); --glass-sheen: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%, rgba(255,255,255,.03)); --lens: rgba(255,255,255,.08); --ambient-a: rgba(70,70,80,.35); --ambient-b: rgba(40,40,48,.5); --ambient-c: rgba(60,60,70,.3); } /* calm monochrome backdrop with soft light pools so the glass has something to catch */ body { background: var(--bg); } body::before { background: radial-gradient(46vmax 38vmax at 10% 4%, var(--ambient-a), transparent 70%), radial-gradient(40vmax 34vmax at 96% 30%, var(--ambient-b), transparent 70%), radial-gradient(50vmax 40vmax at 60% 104%, var(--ambient-c), transparent 70%); } /* ------------------------------------------------------------------ the material */ .side, .tabbar, .tb-search, .tb-sform, .pchip, .gl-circle, #m-panel, .m-win, .modal, .toast, .rx-picker, .cp-head, .cp-form, .auth-card, .card, .lcat, .dentry, .topic, .choice, .msg-toast { background-color: var(--lq-bg) !important; background-image: var(--glass-sheen) !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); border: 0 !important; box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-depth), var(--lq-edge), var(--lq-shadow) !important; } /* panels that hold a lot of text: a little more frost */ .card, .lcat, #m-panel, .m-win, .modal, .auth-card, .toast { background-color: var(--lq-bg-strong) !important; } .card, .lcat, .dentry, .topic, .choice { box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-edge), var(--lq-shadow-sm) !important; } .card .card, .card .lcat { box-shadow: var(--lq-rim), var(--lq-edge) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } /* the gradient rim of v11 is replaced by the softer inset rim above */ .pchip::before, .gl-circle::before, .tb-search::before, .tb-sform::before, .tabbar::before, .side::before, .modal::before, .rx-bar::before { opacity: .55; } /* ------------------------------------------------------------------ rounded glass buttons */ .btn { border-radius: 999px; border: 0 !important; font-weight: 600; letter-spacing: -.005em; } .btn.ghost, .btn:not(.primary):not(.gold):not(.red):not(.link) { background: var(--lq-bg) !important; color: var(--ink) !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-edge), var(--lq-shadow-sm) !important; } .btn.primary, .btn.gold { background: var(--lq-ink-btn) !important; color: var(--lq-ink-txt) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 22px -10px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.35) !important; } .btn.red { background: linear-gradient(180deg, #E5484D, #C62A2F) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 22px -10px rgba(198,42,47,.55) !important; } .btn:disabled, .btn[disabled] { opacity: .45; } .btn:hover { filter: none; } .btn:active { transform: scale(.96); } /* segmented controls: frosted track, glass thumb */ .seg, .people-tabs, .ptabs { background: var(--fill) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.06) !important; } .seg button.on, .people-tabs a.on { background: var(--lq-bg-strong) !important; color: var(--ink) !important; box-shadow: var(--lq-rim), inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -4px rgba(0,0,0,.18) !important; } .seg:not(.hero .seg) button { color: var(--muted) !important; } .pill, .timer, .k.sm, .choice .k, .navgrid button, .lnum, .azbar button { background: var(--fill); color: var(--ink); } input[type=text], input[type=number], input[type=password], input[type=search], input[type=email], select, textarea { background: var(--fill); border-radius: 16px; } input:focus, select:focus, textarea:focus:not(.m-input) { background: var(--lq-bg-strong); border-color: transparent; box-shadow: 0 0 0 1px var(--line), 0 0 0 5px var(--fill2); } .btn:focus-visible, a:focus-visible, .choice:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* ------------------------------------------------------------------ floating icons */ .ic-tile { color: var(--ink) !important; background: var(--lq-bg-strong) !important; border-radius: 50% !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-depth), var(--lq-edge), 0 8px 18px -8px rgba(20,20,30,.28) !important; } .ic-tile .ic { width: 52%; height: 52%; } .ic-tile .ic.ms { width: 56%; height: 56%; } .gl-circle, .tb-search { color: var(--ink); } .gl-circle svg { width: 22px; height: 22px; } .nav a svg, .nav a .ic { color: currentColor !important; opacity: .82; } [class*="ic-"]:is(.ic-blue, .ic-purple, .ic-orange, .ic-teal, .ic-green, .ic-indigo, .ic-pink) { color: var(--ink) !important; } /* monochrome accents across content */ a { color: var(--ink); } .nav a.on, .side .pchip.big.on { background: var(--lq-bg-strong) !important; color: var(--ink) !important; box-shadow: var(--lq-rim), inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -8px rgba(0,0,0,.25) !important; } .nav a:hover { background: var(--fill); } .side .pchip.big { background-color: var(--fill) !important; background-image: none !important; box-shadow: none !important; } .ring .ring-fg { stroke: var(--ink); } .progress > i, .progress > span, .bar > i, .bar > span, .bar-fill { background: var(--ink); } .chip-w { background: var(--fill); color: var(--ink); } .chip-w.anto { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); } .azbar button.on { background: var(--lq-ink-btn); color: var(--lq-ink-txt); } mark { background: color-mix(in srgb, var(--ink) 14%, transparent); } .lnum.done { background: var(--lq-ink-btn); color: var(--lq-ink-txt); } .pav-cam { background: var(--lq-ink-btn) !important; color: var(--lq-ink-txt) !important; border: 3px solid var(--lq-bg-strong) !important; box-shadow: 0 8px 18px -6px rgba(0,0,0,.45) !important; } .pav-wrap > .avatar { box-shadow: 0 16px 34px -12px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.85) !important; } .howto { background: var(--fill); border: 0; box-shadow: var(--lq-rim); } .wordnotes { background: var(--fill); border: 0; box-shadow: var(--lq-rim); } .note, .explain { box-shadow: inset 3px 0 0 var(--ink); } .m-row.mine .m-bub, .m-row.mine .m-file { background: var(--lq-ink-btn) !important; color: var(--lq-ink-txt) !important; } .m-row.mine .m-bub a { color: inherit; } .m-send, .m-att { color: var(--ink) !important; } .qtext .kw, .figq, .bubble b, .otherwhy summary { color: var(--ink); } .choice:hover:not(:disabled) { border-color: transparent; transform: translateY(-1px); } /* ------------------------------------------------------------------ Learn: floating icon + title */ .lcat { border-radius: 30px; } .lcat-h { padding: 18px; gap: 16px; } .lcat-h .ic-tile { --ts: 56px !important; } .dict-card .ic-tile { --ts: 56px !important; } /* ------------------------------------------------------------------ phones: floating dock */ @media (max-width: 900px) { .dock { height: 62px; transition: height .45s var(--spring), bottom .45s var(--spring); } .dock .tabbar { display: flex !important; align-items: stretch; right: 74px !important; padding: 4px !important; overflow: visible; transition: right .5s var(--spring), opacity .3s, transform .45s var(--spring), filter .3s !important; } .dock .tabbar, .dock .tb-search, .dock .tb-sform { background-color: var(--lq-bg) !important; } .dock .tabbar a { flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--muted); font-weight: 600; padding: 7px 0 6px; transition: flex-grow .5s var(--spring), opacity .25s, color .25s, transform .35s var(--spring) !important; } .dock .tabbar a svg { transition: transform .45s var(--spring); } .dock .tabbar a.on { color: var(--ink); } .dock .tabbar a.on svg { transform: scale(1.14); } .tb-search { width: 62px; height: 62px; transition: width .45s var(--spring), height .45s var(--spring), transform .35s var(--spring) !important; } /* the lens: a clear droplet that rides over the active tab, a little taller than the bar */ .tb-lens { top: -5px !important; bottom: -5px !important; border-radius: 999px; background: var(--lens) !important; -webkit-backdrop-filter: blur(1.5px) saturate(190%) brightness(1.06); backdrop-filter: blur(1.5px) saturate(190%) brightness(1.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 3px 4px 8px -2px rgba(255,255,255,.95), inset -3px -4px 8px -3px rgba(0,0,0,.10), inset 4px 0 3px -2px rgba(255,60,140,.38), inset -4px 0 3px -2px rgba(40,140,255,.38), 0 10px 22px -8px rgba(0,0,0,.22) !important; transition: transform .55s var(--spring), width .45s var(--spring), opacity .25s, scale .35s var(--spring) !important; } .tb-lens.moving { scale: 1.12 .9; } :root[data-theme="dark"] .tb-lens { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 3px 4px 8px -2px rgba(255,255,255,.18), inset 4px 0 3px -2px rgba(255,60,140,.30), inset -4px 0 3px -2px rgba(40,140,255,.30), 0 10px 22px -8px rgba(0,0,0,.6) !important; } /* minimized while scrolling down (iOS 26 style): the bar collapses to the current tab, search shrinks */ body.tb-min .dock { height: 50px; } body.tb-min .dock .tabbar { right: calc(100% - 50px) !important; padding: 0 !important; cursor: pointer; } body.tb-min .dock .tabbar a { flex-grow: 0; opacity: 0; padding: 0; pointer-events: none; } body.tb-min .dock .tabbar a.on, body.tb-min .dock .tabbar:not(:has(a.on)) a:first-of-type { flex-grow: 1; opacity: 1; color: var(--ink); justify-content: center; } body.tb-min .dock .tabbar a span { max-height: 0; opacity: 0; } body.tb-min .dock .tabbar a svg { transform: none; width: 22px; height: 22px; } body.tb-min .tb-lens { opacity: 0 !important; } body.tb-min .tb-search { width: 50px; height: 50px; } body.tb-min .tb-search svg { width: 21px; height: 21px; } } /* ------------------------------------------------------------------ fallbacks */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --lq-bg: rgba(250,250,252,.97); --lq-bg-strong: #FFFFFF; } :root[data-theme="dark"] { --lq-bg: rgba(32,32,36,.97); --lq-bg-strong: #1C1C1E; } } @media (prefers-reduced-transparency: reduce) { :root { --lq-bg: #FAFAFB; --lq-bg-strong: #FFFFFF; } :root[data-theme="dark"] { --lq-bg: #1C1C1E; --lq-bg-strong: #1C1C1E; } } @media (prefers-reduced-motion: reduce) { .tb-lens, .dock .tabbar, .dock .tabbar a, .tb-search { transition: none !important; } } /* monochrome tags */ /* the floating dock needs real frost so the page behind stays quiet */ @media (max-width: 900px) { .dock .tabbar, .dock .tb-search, .dock .tb-sform { background-color: rgba(255,255,255,.84) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; } :root[data-theme="dark"] .dock .tabbar, :root[data-theme="dark"] .dock .tb-search, :root[data-theme="dark"] .dock .tb-sform { background-color: rgba(34,34,38,.86) !important; } .mobilebar .pchip, .mobilebar .gl-circle { background-color: rgba(255,255,255,.72) !important; } :root[data-theme="dark"] .mobilebar .pchip, :root[data-theme="dark"] .mobilebar .gl-circle { background-color: rgba(34,34,38,.72) !important; } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dock .tabbar, :root:not([data-theme="light"]) .dock .tb-search, :root:not([data-theme="light"]) .dock .tb-sform, :root:not([data-theme="light"]) .mobilebar .pchip, :root:not([data-theme="light"]) .mobilebar .gl-circle { background-color: rgba(34,34,38,.86) !important; } } /* ------------------------------------------------------------------ v12.1: color comes back as tinted glass */ /* round icon placeholders: tinted glass discs with a white glyph */ .ic-tile { --tc: 10,132,255; color: #fff !important; border-radius: 50% !important; background: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(var(--tc), .78), rgba(var(--tc), .52)) !important; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 1.5px 0 rgba(255,255,255,.85), inset 0 -6px 12px -4px rgba(var(--tc), .55), inset 0 0 10px rgba(255,255,255,.18), 0 10px 22px -10px rgba(var(--tc), .75), 0 2px 5px -2px rgba(var(--tc), .4) !important; } .ic-tile .ic { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.22)); } .t-blue { --tc: 10,132,255; } .t-red { --tc: 255,59,71; } .t-yellow { --tc: 255,190,0; } .t-green { --tc: 40,190,85; } .t-orange { --tc: 255,138,31; } .t-purple { --tc: 164,92,240; } .t-teal { --tc: 24,178,196; } .t-pink { --tc: 255,79,154; } .t-gray { --tc: 142,142,150; } .t-indigo { --tc: 94,92,230; } :root[data-theme="dark"] .ic-tile { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1.5px 0 rgba(255,255,255,.5), inset 0 -6px 12px -4px rgba(var(--tc), .5), 0 10px 22px -10px rgba(var(--tc), .6) !important; } .lcat.open .lcat-h .ic-tile { transform: scale(1.04); } .lcat-h .ic-tile, .dict-card .ic-tile { transition: transform .35s var(--spring); } /* colored icons next to lessons, word notes and subject rows keep their hue */ [class*="ic-"]:is(.ic-blue) { color: #0A84FF !important; } [class*="ic-"]:is(.ic-purple) { color: #A45CF0 !important; } [class*="ic-"]:is(.ic-orange) { color: #FF8A1F !important; } [class*="ic-"]:is(.ic-teal) { color: #18B2C4 !important; } [class*="ic-"]:is(.ic-green) { color: #28BE55 !important; } [class*="ic-"]:is(.ic-indigo) { color: #5E5CE6 !important; } [class*="ic-"]:is(.ic-pink) { color: #FF4F9A !important; } /* welcome panel on Home: the Philippine-blue glass card is back */ .card.hero { color: #fff !important; background-color: transparent !important; background-image: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 50%), linear-gradient(145deg, #062A7A 0%, #0038A8 55%, #1F5FD6 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -14px 28px -18px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,56,168,.55), 0 6px 14px -6px rgba(0,56,168,.25) !important; } .card.hero h1, .card.hero b { color: #fff !important; } .card.hero .muted, .card.hero p { color: #C9D3E6 !important; } .card.hero .count div { background: rgba(255,255,255,.14) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.35) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .card.hero .count b { color: #fff !important; } .card.hero .count span { color: #C9D3E6 !important; } .card.hero .seg { background: rgba(255,255,255,.16) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important; } .card.hero .seg button { color: rgba(255,255,255,.85) !important; } .card.hero .seg button.on { background: #fff !important; color: #0A2A6B !important; box-shadow: 0 4px 12px -2px rgba(0,0,0,.25), inset 0 1px 0 #fff !important; } .card.hero .btn.gold { background: linear-gradient(180deg, #FFE066 0%, #FCD116 100%) !important; color: #0A2A6B !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 22px -10px rgba(252,209,22,.7) !important; } .card.hero .btn.ghost { background: rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35) !important; } /* ------------------------------------------------------------------ v12.2 */ /* phones: simple selected state in the bottom bar — no bubble, the selected tab is colored */ :root { --tab-on: #0038A8; } :root[data-theme="dark"] { --tab-on: #6A9BFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tab-on: #6A9BFF; } } @media (max-width: 900px) { .tb-lens { display: none !important; } .dock .tabbar a, .dock .tabbar a svg { transform: none !important; transition: color .2s, opacity .15s, flex-grow .5s var(--spring) !important; } .dock .tabbar a { color: var(--muted) !important; } .dock .tabbar a.on, body.tb-min .dock .tabbar a.on { color: var(--tab-on) !important; } .dock .tabbar a.on span { font-weight: 700; } .dock .tabbar a:active { transform: none !important; opacity: .55; } .dock .tabbar::after { display: none !important; } } /* buttons: the original colors as tinted liquid glass, no glow */ .btn::after { display: none !important; } .btn.primary, .btn.gold, .btn.red, .btn.ghost, .btn:not(.primary):not(.gold):not(.red):not(.link) { -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); } .btn.primary { background: linear-gradient(180deg, rgba(31,95,214,.86), rgba(0,56,168,.86)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12) !important; } .btn.gold, .card.hero .btn.gold { background: linear-gradient(180deg, rgba(255,224,102,.9), rgba(252,209,22,.9)) !important; color: #0A2A6B !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.08) !important; } .btn.red { background: linear-gradient(180deg, rgba(226,51,73,.88), rgba(206,17,38,.88)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.12) !important; } .btn.ghost, .btn:not(.primary):not(.gold):not(.red):not(.link) { background: rgba(118,118,128,.14) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.7) !important; } :root[data-theme="dark"] .btn.primary { background: linear-gradient(180deg, rgba(58,120,240,.85), rgba(31,95,214,.85)) !important; } :root[data-theme="dark"] .btn.ghost, :root[data-theme="dark"] .btn:not(.primary):not(.gold):not(.red):not(.link) { background: rgba(118,118,128,.26) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.16) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { background: linear-gradient(180deg, rgba(58,120,240,.85), rgba(31,95,214,.85)) !important; } :root:not([data-theme="light"]) .btn.ghost, :root:not([data-theme="light"]) .btn:not(.primary):not(.gold):not(.red):not(.link) { background: rgba(118,118,128,.26) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.16) !important; } } .card.hero .btn.ghost { background: rgba(255,255,255,.16) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35) !important; } .btn:active { transform: scale(.97); filter: brightness(.95); } /* other button-like controls go back to blue */ .pav-cam { background: linear-gradient(180deg, rgba(61,139,255,.9), rgba(10,98,224,.9)) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important; } .azbar button.on { background: #0038A8; color: #fff; } :root[data-theme="dark"] .azbar button.on { background: #3A78F0; } /* v12.4: progress bars, rings and finished-lesson marks use their category color */ .cc-blue { --cc: #0A84FF; } .cc-purple { --cc: #A45CF0; } .cc-orange { --cc: #FF8A1F; } .cc-red { --cc: #FF3B47; } .cc-teal { --cc: #18B2C4; } .cc-green { --cc: #28BE55; } .cc-indigo { --cc: #5E5CE6; } .cc-gray { --cc: #8E8E96; } [class*="cc-"] .bar > i { background: var(--cc) !important; } [class*="cc-"] .ring .ring-fg { stroke: var(--cc) !important; } [class*="cc-"] .lnum.done { background: var(--cc) !important; color: #fff !important; } .bar > i[style*="background"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } /* ------------------------------------------------------------------ v13 */ /* phones: photo bubble + name bubble, both open the profile */ .hdr-me { display: flex; align-items: center; gap: 8px; min-width: 0; } .gl-av, .mname, .gnav { background-color: var(--lq-bg) !important; background-image: var(--glass-sheen) !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-edge), var(--lq-shadow-sm) !important; } .gl-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; position: relative; text-decoration: none; } .gl-av .pc-av { position: relative; display: inline-flex; } .gl-av .avatar { width: 44px; height: 44px; font-size: 16px; } .gl-av .nav-badge { position: absolute; top: -4px; right: -4px; margin: 0; } .mname { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 18px; border-radius: 999px; text-decoration: none; color: var(--ink); min-width: 0; max-width: 52vw; } .mname .pc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .mname .pc-txt b { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mname .pc-txt span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mname .pc-chev { color: var(--muted); display: inline-grid; } .mname .pc-chev .ic { width: 16px; height: 16px; vertical-align: 0; } .gl-av:active, .mname:active, .gnav:active { transform: scale(.95); } .gl-av, .mname, .gnav { transition: transform .3s var(--spring); } /* forward / back links as glass bubble buttons (chevrons, no tailed arrows) */ .gnav { display: inline-flex !important; align-items: center; gap: 4px; padding: 6px 10px 6px 14px; border-radius: 999px; border: 0; font: 600 .86rem var(--font); color: var(--ink) !important; text-decoration: none !important; cursor: pointer; white-space: nowrap; line-height: 1.2; } .gnav.back { padding: 6px 14px 6px 8px; } .gnav .gchev, .btn .gchev { display: inline-grid; } .gnav .gchev .ic, .btn .gchev .ic, .gnav > .ic { width: 16px; height: 16px; vertical-align: 0; } .btn .gchev { margin-left: 2px; margin-right: -4px; } .gnav:hover { filter: brightness(1.03); } .topbar .gnav.back, .backrow .gnav { margin-bottom: 6px; } .backrow { margin-bottom: 10px; } .gl-circle.gback { width: 40px; height: 40px; } .card.hero .gnav { background-color: rgba(255,255,255,.16) !important; color: #fff !important; } /* profile: tabs and the settings button on one line */ .ptabs-row { display: flex; align-items: center; gap: 10px; margin: 20px 0 16px; } .ptabs-row .ptabs { flex: 1; margin: 0 !important; } .ptabs-row .ptabs button { min-width: 0; } .ptabs-row .ptabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p-set { width: 44px !important; height: 44px !important; border: 0; cursor: pointer; } .p-set.on { color: var(--tab-on, #0038A8) !important; } @media (max-width: 420px) { .ptabs-row .ptabs button .ic { display: none; } } /* welcome panel */ .hero-act { display: inline-grid; gap: 10px; align-self: flex-start; } .hero-act .seg { display: flex; } .hero-act .seg button { flex: 1; } .hero-act .btn { width: 100%; } .card.hero .count { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; max-width: 440px; margin: 12px 0; } .card.hero .count div { padding: 10px 4px; text-align: center; min-width: 0; } .card.hero .count b { font-size: 1.7rem; font-variant-numeric: tabular-nums; } .card.hero .count span { font-size: .72rem; } .cd-big { font: 800 clamp(1.8rem, 5vw, 2.4rem) var(--head); color: #FCD116; letter-spacing: -.02em; margin-top: 12px; } .cd-tips { margin: 8px 0 10px; padding-left: 20px; color: #fff; font-size: .92rem; } .cd-tips li { margin: 3px 0; } /* another member's profile */ .pav-wrap .on-dot.big { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; max-width: none; max-height: none; border-width: 3px; } .cmp-t { display: flex; flex-direction: column; gap: 2px; } .cmp-row { display: grid; grid-template-columns: 1fr 96px 96px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); } .cmp-row b { text-align: center; font-variant-numeric: tabular-nums; } .cmp-row b.lead { color: var(--good); } .cmp-h b { font-size: .8rem; color: var(--muted); } .cmp-l { color: var(--muted); font-size: .9rem; } .empty-lock { width: 52px; height: 52px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--fill); color: var(--muted); } .lb-row [data-uid], .srow[data-profile], .m-who { cursor: pointer; } /* mock exam cards */ .mockcard .spread { align-items: center; } /* ------------------------------------------------------------------ v13.1 */ .mname { padding: 0 12px 0 18px; } .mname .pc-txt b { font-size: 15px; } /* larger screens: level switch on the left, Today's plan on the right, one row */ @media (min-width: 901px) { .card.hero > .spread { flex-direction: column; align-items: stretch; } .card.hero .hero-act { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin-top: 6px; } .card.hero .hero-act .seg { display: inline-flex; } .card.hero .hero-act .seg button { flex: none; } .card.hero .hero-act .btn { width: auto; min-width: 190px; } } /* example sentences */ .dex-wrap { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--fill); box-shadow: inset 3px 0 0 #A45CF0; } .dex-wrap b { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .dex-wrap .dex { margin: 4px 0 0; } .wn-ex { margin: 6px 0 4px; padding: 7px 10px; border-radius: 10px; background: var(--fill); font-style: italic; font-size: .9rem; } .wn-ex span { font-style: normal; font-weight: 600; color: var(--muted); font-size: .78rem; margin-right: 2px; } /* question directions line (book items) */ .qdir { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; margin-bottom: 6px; } /* ------------------------------------------------------------------ v14.1 */ /* phone chat: back button left, person centered in its own glass bubble */ @media (max-width: 900px) { .chat-page .cp-head { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: none !important; background-image: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; } .chat-page .cp-back { justify-self: start; width: 44px !important; height: 44px !important; font-size: 0; } .chat-page .cp-head .m-who { justify-self: center; flex: none; max-width: 62vw; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background-color: var(--lq-bg-strong) !important; background-image: var(--glass-sheen) !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-edge), var(--lq-shadow-sm) !important; cursor: pointer; } .chat-page .cp-head .m-who > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; } .chat-page .cp-head .m-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-page .cp-act { justify-self: end; } } /* Today card: four small cards, rings for questions and accuracy */ .tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .tmini { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border-radius: 18px; background: var(--fill); box-shadow: var(--lq-rim); text-align: center; min-height: 118px; } .tmini > span { font-size: .78rem; color: var(--muted); font-weight: 600; } .tmini.flat b { font: 700 1.9rem var(--rounded); display: inline-flex; align-items: center; gap: 2px; } .tmini.flat b .ic { width: .7em; height: .7em; } .mring { position: relative; width: 72px; height: 72px; flex: none; } .mring svg { display: block; } .mring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 .98rem var(--rounded); font-variant-numeric: tabular-nums; } .mring b small { font-size: .62rem; color: var(--muted); font-weight: 600; margin-left: 1px; } .subrings { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; } .subring { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; background: var(--fill); text-align: center; } .subring > b { font-size: .88rem; } /* answering mode */ .btn.endbtn { background: linear-gradient(180deg, rgba(226,51,73,.9), rgba(206,17,38,.9)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4) !important; } .qtimer { display: none !important; width: auto !important; padding: 0 16px; border-radius: 999px !important; font: 700 15px var(--rounded); font-variant-numeric: tabular-nums; color: var(--ink); } .qnav, .qslider { display: none; } @media (max-width: 900px) { body.in-quiz .hdr-ics > a { display: none !important; } body.in-quiz .qtimer { display: grid !important; place-items: center; min-width: 76px; height: 46px; } body.in-quiz .dock, body.in-exam .dock { display: none !important; } body.in-quiz .qfoot, body.in-exam .qfoot { display: none !important; } body.in-quiz .main, body.in-exam .main { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; } .qnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 36; height: 62px; padding: 6px; border-radius: 999px; background-color: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-edge), var(--lq-shadow) !important; } :root[data-theme="dark"] .qnav { background-color: rgba(34,34,38,.88); } .qnav button { border: 0; background: transparent; color: var(--ink); font: 600 15px var(--font); cursor: pointer; height: 50px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; } .qnav button .ic { width: 18px; height: 18px; vertical-align: 0; } .qn-prev { justify-self: start; padding: 0 14px 0 8px; } .qn-prev:disabled { opacity: .35; } .qn-num { justify-self: center; flex-direction: column; justify-content: center; gap: 0 !important; min-width: 84px; padding: 0 14px; background: var(--fill) !important; line-height: 1.05; } .qn-num b { font: 700 18px var(--rounded); } .qn-num span { font-size: 10.5px; color: var(--muted); font-weight: 600; } .qn-next { justify-self: end; padding: 0 10px 0 16px; background: var(--fill) !important; } .qn-next.done { background: linear-gradient(180deg, rgba(31,95,214,.9), rgba(0,56,168,.9)) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .qslider:not([hidden]) { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 37; padding: 14px 16px 12px; border-radius: 26px; background-color: var(--lq-bg-strong); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-edge), var(--lq-shadow) !important; } .qs-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .qs-top b { font: 700 1.1rem var(--rounded); } .qslider input[type=range] { width: 100%; min-height: 32px; background: transparent; accent-color: #0038A8; } .qs-dots { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 2px; } .qs-dots::-webkit-scrollbar { display: none; } .qs-dots button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); font: 600 12.5px var(--rounded); cursor: pointer; } .qs-dots button.ans { background: rgba(0,56,168,.14); color: #0038A8; } .qs-dots button.cur { background: #0038A8; color: #fff; } } /* mock exam answer sheet */ .as-list { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; } .as-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 12px; } .as-row.cur { background: rgba(0,56,168,.08); box-shadow: inset 0 0 0 1px rgba(0,56,168,.25); } .as-row.flag .as-n { box-shadow: inset 0 -3px 0 #FCD116; } .as-n { width: 38px; border: 0; background: transparent; font: 700 13px var(--rounded); color: var(--muted); text-align: right; padding: 4px 6px 4px 0; cursor: pointer; } .as-b { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); background: transparent; color: var(--muted); font: 600 11px var(--rounded); cursor: pointer; padding: 0; } .as-b.on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .mockhist td:last-child .btn { white-space: nowrap; } /* pending approval + Team Lyqa label */ .pend-ic { width: 72px; height: 72px; margin: 4px auto 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, rgba(255,176,32,.95), rgba(240,140,0,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .pend-row .row { flex: none; } .lyqa-tag { font-size: .66rem !important; padding: 2px 8px !important; vertical-align: 1px; background: rgba(164,92,240,.14) !important; color: #7B3FD0 !important; font-weight: 700; } .pend-row { flex-wrap: wrap; } .pend-row .sr-t { flex: 1 1 55%; } @media (max-width: 600px) { .pend-row .row { width: 100%; justify-content: flex-end; padding-left: 48px; } } /* v14.2: dark mode for the answering bottom bar and item slider (system dark or manual dark theme) */ @media (max-width: 900px) { :root[data-theme="dark"] .qnav { background-color: rgba(28,28,32,.9) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.8) !important; } :root[data-theme="dark"] .qnav button { color: #F4F4F6; } :root[data-theme="dark"] .qn-num, :root[data-theme="dark"] .qn-next:not(.done) { background: rgba(255,255,255,.09) !important; } :root[data-theme="dark"] .qn-num span { color: #A1A1A8; } :root[data-theme="dark"] .qn-next.done { background: linear-gradient(180deg, rgba(58,120,240,.92), rgba(31,95,214,.92)) !important; color: #fff !important; } :root[data-theme="dark"] .qslider:not([hidden]) { background-color: rgba(30,30,34,.94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.8) !important; } :root[data-theme="dark"] .qslider input[type=range] { accent-color: #6A9BFF; } :root[data-theme="dark"] .qs-dots button { background: rgba(255,255,255,.09); color: #F4F4F6; } :root[data-theme="dark"] .qs-dots button.ans { background: rgba(106,155,255,.22); color: #9DBEFF; } :root[data-theme="dark"] .qs-dots button.cur { background: #3A78F0; color: #fff; } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qnav { background-color: rgba(28,28,32,.9) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.8) !important; } :root:not([data-theme="light"]) .qnav button { color: #F4F4F6; } :root:not([data-theme="light"]) .qn-num, :root:not([data-theme="light"]) .qn-next:not(.done) { background: rgba(255,255,255,.09) !important; } :root:not([data-theme="light"]) .qn-num span { color: #A1A1A8; } :root:not([data-theme="light"]) .qn-next.done { background: linear-gradient(180deg, rgba(58,120,240,.92), rgba(31,95,214,.92)) !important; color: #fff !important; } :root:not([data-theme="light"]) .qslider:not([hidden]) { background-color: rgba(30,30,34,.94); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.8) !important; } :root:not([data-theme="light"]) .qslider input[type=range] { accent-color: #6A9BFF; } :root:not([data-theme="light"]) .qs-dots button { background: rgba(255,255,255,.09); color: #F4F4F6; } :root:not([data-theme="light"]) .qs-dots button.ans { background: rgba(106,155,255,.22); color: #9DBEFF; } :root:not([data-theme="light"]) .qs-dots button.cur { background: #3A78F0; color: #fff; } } /* answer sheet bubbles in dark mode */ :root[data-theme="dark"] .as-row.cur { background: rgba(106,155,255,.12); box-shadow: inset 0 0 0 1px rgba(106,155,255,.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .as-row.cur { background: rgba(106,155,255,.12); box-shadow: inset 0 0 0 1px rgba(106,155,255,.35); } } /* ==== wide.css ==== */ /* CSE 2027 Reviewer — wide desktop layout (v12.3) The app grows with the window up to 2056px wide, then stays centered. Grids gain columns as space allows; long reading text keeps a comfortable line length. */ @media (min-width: 901px) { .app { max-width: 2056px; margin: 0 auto; width: 100%; } .main { max-width: none !important; padding-left: clamp(20px, 2.6vw, 56px) !important; padding-right: clamp(20px, 2.6vw, 56px) !important; } .qwrap { max-width: clamp(820px, 62vw, 1040px); } .card.lesson { max-width: 1080px; margin-left: auto; margin-right: auto; } .ml-page { max-width: clamp(720px, 60vw, 1100px); } } /* extra columns when there is room */ @media (min-width: 1440px) { .g3 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .lcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .dlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .examlayout { grid-template-columns: 1fr 300px; } .chartwrap { max-width: 520px; } .chartwrap.wide { max-width: 680px; } } @media (min-width: 1700px) { .app { grid-template-columns: 300px 1fr; } body.side-collapsed .app { grid-template-columns: 100px 1fr; } html { font-size: 106.25%; } .dlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } .examlayout { grid-template-columns: 1fr 340px; } } @media (min-width: 1960px) { html { font-size: 112.5%; } .app { grid-template-columns: 320px 1fr; } .lcats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* keep the floating chat button and windows inside the 2056px frame on very wide screens */ @media (min-width: 2100px) { #m-launch { right: calc((100vw - 2056px) / 2 + 22px) !important; } #m-panel { right: calc((100vw - 2056px) / 2 + 22px) !important; } #m-wins { right: calc((100vw - 2056px) / 2 + 380px) !important; } } /* ==== lg15.css ==== */ /* CSE 2027 Reviewer — Liquid Glass 2 (v15). Loaded last. What changed, from the two liquid-glass references studied for this version: 1. The material is real frost: heavy blur + a saturation boost + a 1px specular top edge + a lit rim. 2. Glass needs something colorful behind it: a soft brand aura (Philippine blue, gold, red) with fine grain. 3. Never nest frost inside frost: controls that sit on a glass panel become "inset glass" (tint + sheen, no filter). 4. Light mode uses thinner panels with MORE saturation; dark mode richer aura. 5. Popovers that float over busy content are ~94% opaque so their text stays readable. 6. Floating controls get real edge refraction in Chrome/Edge (liquidglass.js); Safari/Firefox keep the frost. 7. One motion signature: a single easing curve, a staggered entrance per page, glass that "lifts in" on hover. 8. Colors come from three RGB triplets so they compose at any opacity. */ :root { /* brand triplets — the single source of color for this layer */ --primary: 0 56 168; /* Philippine blue #0038A8 */ --primary-soft: 58 120 240; /* lighter blue for glow / dark mode */ --accent: 252 209 22; /* sun gold #FCD116 */ --accent-2: 206 17 38; /* flag red #CE1126 */ --ease: cubic-bezier(.22, 1, .36, 1); /* the house curve: soft, confident ease-out */ --aura: .38; /* the material, retuned (light) */ --lq-blur: blur(34px) saturate(210%); --lq-blur-soft: blur(44px) saturate(220%); --lq-bg: rgba(255,255,255,.42); --lq-bg-strong: rgba(255,255,255,.70); --lq-menu: rgba(250,250,252,.94); --lq-inset: rgba(255,255,255,.46); --lq-inset-hover: rgba(255,255,255,.66); --lq-spec: inset 0 1px 0 rgba(255,255,255,.95); --lq-rim: inset 0 0 0 1px rgba(255,255,255,.62); --lq-hi: var(--lq-spec), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 18px rgba(255,255,255,.28); --lq-shadow: 0 24px 48px -22px rgba(18,24,48,.26), 0 6px 14px -8px rgba(18,24,48,.10); --lq-shadow-sm: 0 12px 26px -16px rgba(18,24,48,.24), 0 2px 6px -3px rgba(18,24,48,.08); --lq-glare: rgba(255,255,255,.34); } :root[data-theme="dark"] { --aura: .34; --lq-blur: blur(34px) saturate(190%); --lq-blur-soft: blur(44px) saturate(200%); --lq-bg: rgba(34,34,40,.46); --lq-bg-strong: rgba(28,28,34,.72); --lq-menu: rgba(28,28,32,.95); --lq-inset: rgba(255,255,255,.06); --lq-inset-hover: rgba(255,255,255,.11); --lq-spec: inset 0 1px 0 rgba(255,255,255,.16); --lq-rim: inset 0 0 0 1px rgba(255,255,255,.08); --lq-hi: var(--lq-spec), inset 0 -1px 0 rgba(255,255,255,.03); --lq-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 6px 14px -6px rgba(0,0,0,.45); --lq-shadow-sm: 0 14px 30px -18px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.4); --lq-glare: rgba(255,255,255,.07); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aura: .34; --lq-blur: blur(34px) saturate(190%); --lq-blur-soft: blur(44px) saturate(200%); --lq-bg: rgba(34,34,40,.46); --lq-bg-strong: rgba(28,28,34,.72); --lq-menu: rgba(28,28,32,.95); --lq-inset: rgba(255,255,255,.06); --lq-inset-hover: rgba(255,255,255,.11); --lq-spec: inset 0 1px 0 rgba(255,255,255,.16); --lq-rim: inset 0 0 0 1px rgba(255,255,255,.08); --lq-hi: var(--lq-spec), inset 0 -1px 0 rgba(255,255,255,.03); --lq-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 6px 14px -6px rgba(0,0,0,.45); --lq-shadow-sm: 0 14px 30px -18px rgba(0,0,0,.75), 0 2px 6px -2px rgba(0,0,0,.4); --lq-glare: rgba(255,255,255,.07); } } /* ------------------------------------------------------------------ 1. atmosphere */ body::before { display: none !important; } /* replaced by the aura below */ .lg-atmo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .lg-blob { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: var(--aura); will-change: transform; } .lg-blob.b1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, rgb(var(--primary-soft) / .85), transparent 68%); } .lg-blob.b2 { width: 46vmax; height: 46vmax; right: -14vmax; top: 18vh; background: radial-gradient(circle, rgb(var(--accent) / .75), transparent 68%); } .lg-blob.b3 { width: 54vmax; height: 54vmax; left: 22vw; bottom: -30vmax; background: radial-gradient(circle, rgb(var(--accent-2) / .45), transparent 68%); } :root[data-theme="dark"] .lg-blob.b1 { background: radial-gradient(circle, rgb(var(--primary) / .95), transparent 68%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-blob.b1 { background: radial-gradient(circle, rgb(var(--primary) / .95), transparent 68%); } } /* fine grain: analog warmth, hides gradient banding */ .lg-grain { position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* slow drift on computers only: on phones a moving backdrop would make every glass panel repaint every frame */ @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .lg-blob.b1 { animation: lgFloatA 34s ease-in-out infinite; } .lg-blob.b2 { animation: lgFloatB 41s ease-in-out infinite; } .lg-blob.b3 { animation: lgFloatC 47s ease-in-out infinite; } } @keyframes lgFloatA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(8vw,6vh) scale(1.08); } 66% { transform: translate(-4vw,10vh) scale(.95); } } @keyframes lgFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-10vw,8vh) scale(1.12); } } @keyframes lgFloatC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(9vw,-8vh) scale(.9); } } @media print { .lg-atmo { display: none; } } /* ------------------------------------------------------------------ 2. the material */ .side, .tabbar, .tb-search, .tb-sform, .pchip, .gl-circle, .gl-av, .mname, .gnav, #m-panel, .m-win, .modal, .toast, .rx-picker, .cp-head, .cp-form, .auth-card, .card, .lcat, .dentry, .topic, .choice, .msg-toast, .qnav, .qslider:not([hidden]) { -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); } .card, .lcat, .dentry, .topic, .choice, .auth-card { box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-shadow-sm) !important; } .side, .modal, #m-panel, .m-win, .auth-card { -webkit-backdrop-filter: var(--lq-blur-soft); backdrop-filter: var(--lq-blur-soft); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-shadow) !important; } /* popovers over live content: near-opaque so small text stays readable */ .toast, .msg-toast, .rx-picker, .qslider:not([hidden]) { background-color: var(--lq-menu) !important; } /* ------------------------------------------------------------------ 3. no frost inside frost */ /* A glass panel frosts the background once. Everything inside it is inset glass: translucent tint + a top sheen. */ :is(.card, .lcat, .side, .modal, [id="m-panel"], .m-win, .auth-card, .tabbar, .qnav, .qslider, .cp-head, .cp-form, .toast) :is(.btn, .choice, .topic, .dentry, .card, .lcat, .ic-tile, .gnav, .pchip, .gl-circle, .gl-av, .mname, .tb-lens, .count > div, .seg, .pill) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } :is(.card, .lcat, .modal, [id="m-panel"], .m-win, .auth-card) :is(.choice, .topic, .dentry, .card:not(.hero), .lcat) { background-color: var(--lq-inset) !important; background-image: none !important; box-shadow: var(--lq-spec), var(--lq-rim) !important; } :is(.card, .lcat, .modal, [id="m-panel"], .m-win, .auth-card) :is(.btn.ghost, .btn:not(.primary):not(.gold):not(.red):not(.link):not(.endbtn)) { background: var(--lq-inset) !important; box-shadow: var(--lq-spec), var(--lq-rim), 0 1px 2px rgba(0,0,0,.05) !important; } :is(.card, .lcat, .modal) .gnav { background-color: var(--lq-inset) !important; background-image: none !important; box-shadow: var(--lq-spec), var(--lq-rim) !important; } .card.hero .gnav, .card.hero .btn.ghost { background: rgba(255,255,255,.16) !important; } /* hover: the tile lifts in (more opacity + brighter edge), not a color swap */ @media (hover: hover) { .choice, .topic, .dentry, .nav a, .gnav, .btn, .lcat-h, .srow, .lb-row { transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .35s var(--ease), color .2s; } :is(.card, .lcat, .modal) :is(.choice, .topic, .dentry):hover:not(:disabled) { background-color: var(--lq-inset-hover) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), var(--lq-rim), 0 10px 22px -16px rgba(18,24,48,.35) !important; transform: translateY(-1px); } :root[data-theme="dark"] :is(.card, .lcat, .modal) :is(.choice, .topic, .dentry):hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px -14px rgba(0,0,0,.7) !important; } .nav a:hover:not(.on) { background: var(--lq-inset-hover) !important; box-shadow: var(--lq-spec), var(--lq-rim); } .btn:hover:not(:disabled) { transform: translateY(-1px); } } /* the right / wrong states stay loud and clear on inset glass */ :root .choice:is(.correct, .right, .ok) { background-color: rgba(40,190,85,.16) !important; box-shadow: inset 0 0 0 1.5px rgba(40,190,85,.75), var(--lq-spec) !important; } :root .choice:is(.wrong, .bad) { background-color: rgba(255,59,71,.13) !important; box-shadow: inset 0 0 0 1.5px rgba(255,59,71,.7), var(--lq-spec) !important; } :root .choice:is(.sel, .picked, [aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px rgb(var(--primary) / .75), var(--lq-spec) !important; } /* ------------------------------------------------------------------ 4. pointer glare (computers) */ .lg-glare { background-image: radial-gradient(260px circle at var(--gx, 30%) var(--gy, 0%), var(--lq-glare), transparent 65%), var(--glass-sheen) !important; } :is(.card, .lcat, .modal) :is(.choice, .topic, .dentry).lg-glare { background-image: radial-gradient(200px circle at var(--gx, 30%) var(--gy, 0%), var(--lq-glare), transparent 65%) !important; } /* ------------------------------------------------------------------ 5. real refraction (Chrome / Edge) */ /* liquidglass.js bends the page at the rim; the tint here stays thin so the bend is visible, with a specular top lip, a 1px glass border and a soft drop shadow. */ :root .lg-on.lg-on.lg-on { background-color: transparent !important; background-image: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.80)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -8px 20px rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.55), 0 18px 40px -18px rgba(18,24,48,.35), 0 0 0 .5px rgba(0,0,0,.06) !important; } :root[data-theme="dark"] .lg-on.lg-on.lg-on { background-image: linear-gradient(180deg, rgba(30,30,36,.70), rgba(30,30,36,.82)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), inset 0 -8px 20px rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -18px rgba(0,0,0,.8) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-on.lg-on.lg-on { background-image: linear-gradient(180deg, rgba(30,30,36,.70), rgba(30,30,36,.82)) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), inset 0 -8px 20px rgba(255,255,255,.04), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 40px -18px rgba(0,0,0,.8) !important; } } .qn-num.lg-on, .qnav .lg-on { background-image: none !important; } /* ------------------------------------------------------------------ 6. motion: one curve, one entrance */ .lg-in { animation: lgRise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); } .lg-wait { opacity: 0; } @keyframes lgRise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } .modal { animation: lgPop .45s var(--ease) both; } @keyframes lgPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } .toast, .msg-toast { transition-timing-function: var(--ease) !important; } .btn:active, .choice:active, .gnav:active, .gl-av:active, .mname:active { transform: scale(.97) !important; transition-duration: .12s; } html.lg-fade, html.lg-fade body, html.lg-fade :is(.card, .lcat, .side, .tabbar, .btn, .choice, .topic, .dentry, .gnav, .pchip, .gl-circle, .gl-av, .mname, .qnav, h1, h2, h3, p, a, span, b) { transition: background-color .4s var(--ease), color .3s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease) !important; } /* ------------------------------------------------------------------ 7. type as the hero (Apple faces) */ /* the welcome line: the name set in New York italic — the one "signature" moment on Home */ .card.hero h1 { letter-spacing: -.02em; line-height: 1.08; } .card.hero h1 .lg-name { font-family: var(--serif); font-style: italic; font-weight: 600; color: #FFE680; letter-spacing: -.01em; } .lg-kicker { display: block; font: 700 .68rem/1.3 var(--rounded); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .card.hero .lg-kicker { color: rgba(255,255,255,.7); } .card.hero .count b { font-size: clamp(1.9rem, 5.4vw, 2.5rem); letter-spacing: -.02em; } /* ------------------------------------------------------------------ 8. accessibility */ @media (prefers-reduced-motion: reduce) { .lg-in, .modal { animation: none !important; } .lg-wait { opacity: 1; } .lg-blob { animation: none !important; } } @media (prefers-reduced-transparency: reduce) { .lg-atmo { display: none; } :root { --lq-bg: #FAFAFB; --lq-bg-strong: #FFFFFF; --lq-inset: #F2F2F5; --lq-menu: #FFFFFF; } :root[data-theme="dark"] { --lq-bg: #1C1C1E; --lq-bg-strong: #1C1C1E; --lq-inset: #2A2A2E; --lq-menu: #1C1C1E; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --lq-bg: rgba(250,250,252,.97); --lq-bg-strong: #FFFFFF; --lq-inset: rgba(0,0,0,.035); } :root[data-theme="dark"] { --lq-bg: rgba(32,32,36,.97); --lq-bg-strong: #1C1C1E; --lq-inset: rgba(255,255,255,.06); } } /* ==== v16.css ==== */ /* CSE 2027 Reviewer — v16 additions: profile spacing, desktop answering bar + timer, About in the side panel, notifications (limit + swipe to delete), voice/video calls, photo viewer, answered-question cards. Loaded last. */ /* ------------------------------------------------------------------ profile: breathing room between cards */ #p-friends:not(:empty), #p-admin:not(:empty) { margin-top: 16px; } #p-friends > .card + .card { margin-top: 16px; } /* ------------------------------------------------------------------ desktop: < Previous | item / slider | Skip/Next > */ .qd-timer { display: none; } @media (min-width: 901px) { .qd-timer { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; min-width: 64px; justify-content: center; } body.in-quiz .qfoot, body.in-exam .qfoot { display: none !important; } .qnav-wrap { position: sticky; bottom: 16px; z-index: 30; max-width: 760px; margin: 22px auto 0; display: flex; flex-direction: column-reverse; gap: 10px; } .qnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; height: 64px; padding: 7px; border-radius: 999px; background-color: var(--lq-bg-strong, rgba(255,255,255,.8)); -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-shadow) !important; } .qnav button { border: 0; background: transparent; color: var(--ink); font: 600 15px var(--font); cursor: pointer; height: 50px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s, transform .2s; } .qnav button:hover:not(:disabled) { background: var(--lq-inset-hover, var(--fill)); } .qnav button .ic { width: 18px; height: 18px; vertical-align: 0; } .qn-prev { justify-self: start; padding: 0 18px 0 12px; } .qn-prev:disabled { opacity: .35; cursor: default; } .qn-prev span::after { content: "ious"; } /* "Previous" on computers */ .qn-num { justify-self: center; flex-direction: column; justify-content: center; gap: 0 !important; min-width: 120px; padding: 0 18px; background: var(--fill) !important; line-height: 1.05; } .qn-num b { font: 700 18px var(--rounded); } .qn-num span { font-size: 11px; color: var(--muted); font-weight: 600; } .qn-next { justify-self: end; padding: 0 14px 0 20px; background: var(--fill) !important; } .qn-next.done { background: linear-gradient(180deg, rgba(31,95,214,.92), rgba(0,56,168,.92)) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .qslider:not([hidden]) { display: block; position: static; padding: 14px 18px 12px; border-radius: 26px; background-color: var(--lq-menu, #fff) !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-shadow) !important; } .qslider .qs-top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .qslider .qs-top b { font: 700 1.1rem var(--rounded); } .qslider input[type=range] { width: 100%; min-height: 32px; background: transparent; accent-color: #0038A8; } .qslider .qs-dots { display: flex; gap: 6px; flex-wrap: wrap; max-height: 150px; overflow: auto; padding: 6px 2px 2px; } .qslider .qs-dots button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--fill); color: var(--ink); font: 600 12.5px var(--rounded); cursor: pointer; } .qslider .qs-dots button.ans { background: rgba(0,56,168,.14); color: #0038A8; } .qslider .qs-dots button.cur { background: #0038A8; color: #fff; } :root[data-theme="dark"] .qnav { background-color: rgba(28,28,32,.88); } :root[data-theme="dark"] .qn-next.done { background: linear-gradient(180deg, rgba(58,120,240,.92), rgba(31,95,214,.92)) !important; } :root[data-theme="dark"] .qslider .qs-dots button.ans { background: rgba(106,155,255,.22); color: #9DBEFF; } :root[data-theme="dark"] .qslider .qs-dots button.cur { background: #3A78F0; } body.in-exam .examlayout + .qnav-wrap { max-width: 760px; } } @media (min-width: 901px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qnav { background-color: rgba(28,28,32,.88); } :root:not([data-theme="light"]) .qn-next.done { background: linear-gradient(180deg, rgba(58,120,240,.92), rgba(31,95,214,.92)) !important; } :root:not([data-theme="light"]) .qslider .qs-dots button.ans { background: rgba(106,155,255,.22); color: #9DBEFF; } :root:not([data-theme="light"]) .qslider .qs-dots button.cur { background: #3A78F0; } } /* ------------------------------------------------------------------ About & disclaimer */ .disclaimer { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--fill); box-shadow: inset 3px 0 0 #FCD116; } .disclaimer > b { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .disclaimer p { margin: 6px 0 0; } .side-about { display: none; } @media (min-width: 901px) { .about-card { display: none; } /* on computers it lives in the side panel */ .side .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; } .side .nav::-webkit-scrollbar { display: none; } .side-about { display: block; margin: 6px 0 0; border-radius: 18px; background: var(--fill); flex: none; } .side-about summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font: 600 .86rem var(--font); color: var(--muted); border-radius: 18px; } .side-about summary::-webkit-details-marker { display: none; } .side-about summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg); transition: transform .25s; opacity: .6; } .side-about[open] summary::after { transform: rotate(135deg); } .side-about summary .ic { width: 18px; height: 18px; } .side-about .sa-body { max-height: 42vh; overflow-y: auto; padding: 0 12px 12px; } .side-about .sa-body p { font-size: .8rem; line-height: 1.5; margin: 6px 0; } .side-about .disclaimer { padding: 10px 12px; margin-top: 8px; } body.side-collapsed .side-about summary span, body.side-collapsed .side-about summary::after { display: none; } body.side-collapsed .side-about .sa-body { display: none; } } /* ------------------------------------------------------------------ notifications: swipe left to delete */ .n-sw { position: relative; overflow: hidden; border-radius: 16px; transition: max-height .22s ease, opacity .22s ease; max-height: 400px; } .n-sw.gone { max-height: 0; opacity: 0; } .n-sw .n-item { position: relative; z-index: 1; touch-action: pan-y; -webkit-user-select: none; user-select: none; background: var(--lq-menu, #fff); width: 100%; } .n-del { position: absolute; inset: 0 0 0 auto; width: 96px; border: 0; background: linear-gradient(180deg, #E5484D, #C62A2F); color: #fff; font: 600 13px var(--font); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; opacity: 0; transition: opacity .15s; } .n-sw.swiping .n-del { opacity: 1; } .n-del .ic { width: 20px; height: 20px; } .n-more { display: block; width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 14px; background: var(--fill); color: var(--ink); font: 600 .92rem var(--font); cursor: pointer; } .n-more:hover { background: var(--fill2); } .n-tip { text-align: center; margin-top: 8px; } @media (hover: hover) and (pointer: fine) { .n-tip::after { content: " (click and drag on a computer)"; } } /* ------------------------------------------------------------------ calls */ .m-wbtn .m-ic[data-call] .ic { width: 17px; height: 17px; } .cp-act { display: flex; align-items: center; gap: 8px; } .gl-circle.cp-call { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; cursor: pointer; color: #0038A8; } .gl-circle.cp-call .ic { width: 20px; height: 20px; } :root[data-theme="dark"] .gl-circle.cp-call { color: #6A9BFF; } .callui { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: #fff; background: radial-gradient(120% 80% at 50% 0%, #1F5FD6 0%, #0A2A6B 45%, #050B1C 100%); padding: calc(24px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); animation: lgPop .35s var(--ease, ease) both; } .callui.is-video { background: #000; } .cu-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .callui.is-video .cu-remote { display: block; } .cu-top { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; text-shadow: 0 1px 8px rgba(0,0,0,.5); min-height: 24px; } .cu-top b { font-size: 1.1rem; } .cu-center { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } .cu-av .avatar { width: 112px !important; height: 112px !important; font-size: 40px !important; box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.45); } .cu-av.pulse .avatar { animation: cuPulse 1.6s ease-out infinite; } @keyframes cuPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35), 0 20px 50px rgba(0,0,0,.45); } 100% { box-shadow: 0 0 0 28px rgba(255,255,255,0), 0 20px 50px rgba(0,0,0,.45); } } .cu-name { font: 700 1.6rem var(--head); } .cu-st { color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; } .cu-local { position: absolute; z-index: 3; right: 16px; top: calc(16px + env(safe-area-inset-top)); width: 110px; aspect-ratio: 3/4; object-fit: cover; border-radius: 18px; background: #222; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 12px 30px rgba(0,0,0,.5); transform: scaleX(-1); } .callui.is-voice .cu-local { display: none; } .cu-local.off { opacity: .15; } .cu-bar { position: relative; z-index: 3; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 12px 16px; border-radius: 999px; background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14); } .cu-btn { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; color: #fff; font: 600 11.5px var(--font); cursor: pointer; } .cu-btn .ic { width: 56px; height: 56px; padding: 16px; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); box-sizing: border-box; } .cu-btn.on .ic { background: #fff; color: #0A2A6B; } .cu-btn.red .ic { background: linear-gradient(180deg, #F0555A, #D0272D); } .cu-btn.green .ic { background: linear-gradient(180deg, #34C759, #1F9E43); } .cu-btn:active .ic { transform: scale(.94); } body.in-call { overflow: hidden; } .m-call { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 18px; background: var(--fill); min-width: 180px; } .m-row.mine .m-call { background: rgba(0,56,168,.1); } .m-call-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(40,190,85,.16); color: #1F9E43; flex: none; } .m-call.missed .m-call-ic { background: rgba(255,59,71,.14); color: #D0272D; } .m-call-ic .ic { width: 18px; height: 18px; } .linklike { border: 0; background: none; padding: 0; color: #0A62E0; font: 600 .82rem var(--font); cursor: pointer; } :root[data-theme="dark"] .linklike { color: #6A9BFF; } /* ------------------------------------------------------------------ shared questions: answered */ .qa-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; } .qa-badge .ic { width: 14px; height: 14px; } .qa-badge.ok { background: rgba(40,190,85,.15); color: #1F8F3E; } .qa-badge.no { background: rgba(255,59,71,.13); color: #C62A2F; } .qshare.qans .qa-res { margin-top: 6px; font-size: .9rem; } .qshare.qans.ok { box-shadow: inset 3px 0 0 #28BE55; } .qshare.qans.no { box-shadow: inset 3px 0 0 #FF3B47; } /* ------------------------------------------------------------------ photo viewer */ .pviewer { position: fixed; inset: 0; z-index: 1100; background: rgba(6,8,14,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: flex; flex-direction: column; opacity: 0; transition: opacity .25s ease; } .pviewer.on { opacity: 1; } .pv-bar { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; color: #fff; } .pv-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); text-decoration: none; } .pv-btn:hover { background: rgba(255,255,255,.26); } .pv-btn .ic { width: 20px; height: 20px; } .pv-close { background: rgba(255,255,255,.92); color: #111; } .pv-close:hover { background: #fff; } .pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 8px 12px; } .pv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: zoom-in; transition: transform .25s ease; } .pv-stage img.zoom { max-width: none; max-height: none; cursor: zoom-out; } .pv-hint { color: rgba(255,255,255,.55); text-align: center; padding: 8px 0 calc(12px + env(safe-area-inset-bottom)); } body.pv-open { overflow: hidden; } .m-imgwrap { cursor: zoom-in; } /* ------------------------------------------------------------------ v16.1: questions & choices can't be selected or copied */ .qtext, .qtext *, .choices, .choice, .choice *, .explain, .explain *, .qshare .qs-q, .qshare .qs-c, .qshare .qs-ans, .qwrap .card, .examlayout .card:not(.asheet), #rev details { -webkit-user-select: none !important; -moz-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } .qtext img, .qtext svg, .choices img { -webkit-user-drag: none; pointer-events: none; } .qwrap input, .qwrap textarea, .examlayout input { -webkit-user-select: text !important; user-select: text !important; } /* ------------------------------------------------------------------ v16.2: screen sharing + picture in picture */ .cu-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: inherit; pointer-events: none; } .cu-ui > * { pointer-events: auto; } .callui { justify-content: flex-start; } .cu-local[hidden] { display: none !important; } .callui.sharing .cu-local { transform: none; object-fit: contain; background: #111; } .callui.rscreen .cu-remote { object-fit: contain; background: #0B0B0D; } .cu-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .cu-tag .ic { width: 16px; height: 16px; } .cu-pipbtn { position: absolute; left: 16px; top: calc(16px + env(safe-area-inset-top)); width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.14); } .cu-pipbtn .ic { width: 22px; height: 22px; } .cu-btn[disabled] { opacity: .4; cursor: default; } @media (max-width: 460px) { .cu-bar { gap: 8px; padding: 10px 12px; } .cu-btn { width: 58px; } .cu-btn .ic { width: 52px; height: 52px; padding: 14px; } } /* in-app picture in picture: a small floating window you can drag while you keep reviewing */ .callui.mini { inset: auto 16px calc(96px + env(safe-area-inset-bottom)) auto; width: 200px; height: 280px; padding: 0; border-radius: 22px; overflow: hidden; touch-action: none; cursor: grab; box-shadow: 0 24px 50px -12px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.18); animation: lgPop .3s var(--ease, ease) both; } .callui.mini.is-voice { width: 280px; height: auto; background: linear-gradient(135deg, #0A2A6B, #1F5FD6); } .callui.mini .cu-ui { position: absolute; inset: 0; padding: 10px; justify-content: space-between; } .callui.mini.is-voice .cu-ui { position: relative; gap: 10px; } .callui.mini .cu-local { width: 64px; top: 10px; right: 10px; border-radius: 12px; } .cu-mini-st { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(0,0,0,.45); font-variant-numeric: tabular-nums; } .cu-mini-who { display: flex; align-items: center; gap: 10px; width: 100%; } .cu-mini-who > span { display: flex; flex-direction: column; min-width: 0; } .cu-mini-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cu-mini-bar { display: flex; gap: 8px; justify-content: center; } .cu-mb { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .cu-mb .ic { width: 20px; height: 20px; } .cu-mb.on { background: #fff; color: #0A2A6B; } .cu-mb.red { background: linear-gradient(180deg, #F0555A, #D0272D); } @media (min-width: 901px) { .callui.mini { bottom: 24px; right: 24px; width: 260px; height: 190px; } .callui.mini.is-voice { width: 300px; height: auto; } } .cu-tag { max-width: calc(100vw - 150px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------------ v16.3: desktop answering controls = three separate glass buttons pinned to the question card: Previous (bottom-left), item number / slider (bottom-center), Skip / Next (bottom-right) */ .qwrap.lg-in, .examlayout.lg-in { animation-name: lgFade; } /* no transform on the parent of the fixed phone bar */ @keyframes lgFade { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 901px) { .qnav-wrap { max-width: none; width: 100%; margin: 16px 0 0; bottom: 18px; pointer-events: none; } .qnav-wrap > * { pointer-events: auto; } .qnav { height: auto; padding: 0; border-radius: 0; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } .qnav button { height: 54px; border-radius: 999px; background-color: var(--lq-bg-strong, rgba(255,255,255,.85)) !important; -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-hi), var(--lq-shadow-sm) !important; } .qnav button:hover:not(:disabled) { transform: translateY(-1px); background-color: var(--lq-bg-strong) !important; box-shadow: var(--lq-rim), inset 0 1px 0 #fff, var(--lq-shadow) !important; } .qn-prev { justify-self: start; padding: 0 22px 0 16px; } .qn-prev:disabled { opacity: .45; } .qn-num { justify-self: center; min-width: 132px; } .qn-next { justify-self: end; padding: 0 18px 0 24px; } .qn-next.done { background: linear-gradient(180deg, rgba(31,95,214,.94), rgba(0,56,168,.94)) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 26px -14px rgba(0,56,168,.7) !important; } .qslider:not([hidden]) { width: min(560px, 100%); align-self: center; } :root[data-theme="dark"] .qnav button:not(.done) { background-color: rgba(34,34,40,.82) !important; } :root[data-theme="dark"] .qn-next.done { background: linear-gradient(180deg, rgba(58,120,240,.94), rgba(31,95,214,.94)) !important; } } @media (min-width: 901px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qnav button:not(.done) { background-color: rgba(34,34,40,.82) !important; } :root:not([data-theme="light"]) .qn-next.done { background: linear-gradient(180deg, rgba(58,120,240,.94), rgba(31,95,214,.94)) !important; } } @media (min-width: 901px) { .qnav .qn-prev:disabled { opacity: 1; color: color-mix(in srgb, var(--muted) 70%, transparent); cursor: default; } .qnav .qn-prev:disabled .ic { opacity: .5; } } /* ------------------------------------------------------------------ v16.6: notifications without per-item backgrounds, a little air between them */ .n-list { display: flex; flex-direction: column; gap: 6px; } .n-card .n-item, .n-card .n-item.unread, .n-sw .n-item { background: transparent !important; box-shadow: none !important; } .n-card .n-item:hover { background: transparent !important; } .n-sw { border-radius: 14px; } .n-del { width: var(--rev, 0px); max-width: 100%; overflow: hidden; transition: opacity .15s; } .n-sw.swiping .n-del { opacity: 1; } .n-del span, .n-del .ic { flex: none; } /* About & disclaimer: bottom of Home on phones, side panel on computers */ @media (min-width: 901px) { .about-home { display: none; } } .about-home h2 { display: flex; align-items: center; gap: 8px; } .about-home h2 .ic { width: 22px; height: 22px; color: var(--muted); } /* ------------------------------------------------------------------ v16.6: reply to a specific message */ .m-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; margin: 0 0 -6px; padding: 7px 12px 12px; border: 0; border-radius: 16px 16px 6px 16px; background: var(--fill); color: var(--muted); font: 500 .8rem/1.3 var(--font); text-align: left; cursor: pointer; opacity: .9; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ink) 25%, transparent); } .m-row:not(.mine) .m-quote { border-radius: 16px 16px 16px 6px; } .m-row.mine .m-bub-wrap { align-items: flex-end; } .m-bub-wrap { display: flex; flex-direction: column; } .m-quote b { font-size: .72rem; font-weight: 600; color: var(--muted); } .m-quote span { color: var(--ink); opacity: .75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .m-quote + .m-bub { position: relative; } .m-flash { animation: mFlash 1.2s ease; border-radius: 18px; } @keyframes mFlash { 0%, 60% { background: rgba(10,132,255,.18); } 100% { background: transparent; } } .m-replybar { display: flex; align-items: center; gap: 10px; margin: 0 10px 6px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--fill); box-shadow: inset 3px 0 0 #0A84FF; } .m-replybar[hidden] { display: none; } .m-rb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .82rem; line-height: 1.3; } .m-rb-txt b { font-size: .75rem; color: #0A62E0; } .m-rb-txt span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-rb-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill2); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; } .m-rb-x .ic { width: 16px; height: 16px; } .cp-replybar { margin: 0 12px 6px; } :root[data-theme="dark"] .m-rb-txt b { color: #6A9BFF; } .m-reply-btn { opacity: 0; } .m-row:hover .m-reply-btn, .m-row:focus-within .m-reply-btn { opacity: 1; } @media (hover: none) { .m-reply-btn { opacity: .7; } } /* ------------------------------------------------------------------ v16.7: sex identifier + government-worker grant note */ .sexb { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-left: 4px; } .sexb .ic { width: 20px; height: 20px; } .sexb.m { color: #0A84FF; background: rgba(10,132,255,.14); } .sexb.f { color: #E0457B; background: rgba(255,79,154,.14); } #f-sex button .ic, #pe-sx button .ic { width: 18px; height: 18px; vertical-align: -4px; } .gov-hint { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(252,209,22,.16); } .govnote { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(252,209,22,.14); box-shadow: inset 3px 0 0 #FCD116; } .govnote > .ic { width: 26px; height: 26px; flex: none; color: #B38600; margin-top: 2px; } .govnote b { font-size: .92rem; } .govnote .small { margin-top: 4px; } .govnote-rem { font-weight: 600; color: var(--ink); opacity: .85; } :root[data-theme="dark"] .govnote > .ic { color: #FCD116; } /* ------------------------------------------------------------------ v16.7: new messages = a red dot on the Messages icons (no counts, no notifications) */ .msg-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; box-shadow: 0 0 0 2px var(--bg, #fff); flex: none; pointer-events: none; } .side .nav a .msg-dot { margin-left: auto; } .gl-circle { position: relative; } .gl-circle .msg-dot { position: absolute; top: 6px; right: 6px; } #m-badge.dot { min-width: 0 !important; width: 14px !important; height: 14px !important; padding: 0 !important; border-radius: 50% !important; background: #FF3B30 !important; font-size: 0 !important; box-shadow: 0 0 0 2px #fff; } .tabbar a[data-nav='#/messages'] { position: relative; } /* ------------------------------------------------------------------ v16.8: full mock → A4 black-and-white PDF */ .pdf-offer { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--fill); text-align: left; } .pdf-offer b { display: inline-flex; align-items: center; gap: 6px; } .pdf-offer .ic { width: 18px; height: 18px; } #printdoc { position: fixed; inset: 0; z-index: 1200; overflow: auto; background: #6b6b70; -webkit-overflow-scrolling: touch; } .pd-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(250,250,252,.96); color: #111; box-shadow: 0 4px 18px rgba(0,0,0,.2); } .pd-bar .small { flex: 1 1 260px; color: #444; } .pd-bar b { display: inline-flex; align-items: center; gap: 6px; } .pd-page { width: min(210mm, calc(100% - 24px)); margin: 16px auto 40px; padding: 14mm; background: #fff; color: #000; box-shadow: 0 10px 40px rgba(0,0,0,.35); font: 10.5pt/1.45 Arial, "Helvetica Neue", Helvetica, sans-serif; -webkit-user-select: text; user-select: text; } .pd-page * { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; } .pd-head { border-bottom: 1.5pt solid #000; padding-bottom: 8pt; margin-bottom: 10pt; } .pd-t { font-size: 15pt; font-weight: 700; } .pd-sub { font-size: 9.5pt; margin-top: 2pt; } .pd-info { width: 100%; margin: 8pt 0 4pt; border-collapse: collapse; font-size: 10pt; } .pd-info td { padding: 3pt 0; width: 50%; } .pd-ins { margin: 6pt 0 2pt; font-size: 9.5pt; } .pd-disc { margin: 0; font-size: 8.5pt; font-style: italic; } .pd-sec { font-size: 11.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 12pt 0 6pt; padding-bottom: 2pt; border-bottom: .75pt solid #000; } .pd-q { break-inside: avoid; page-break-inside: avoid; margin: 0 0 9pt; } .pd-stem { display: flex; gap: 6pt; } .pd-n { flex: none; min-width: 22pt; } .pd-stem > div { flex: 1; min-width: 0; } .pd-c { list-style: none; margin: 3pt 0 0 28pt; padding: 0; columns: 2; column-gap: 18pt; } .pd-c li { break-inside: avoid; margin: 1pt 0; display: flex; gap: 4pt; } .pd-l { font-weight: 700; flex: none; } .pd-page .passage { border: .75pt solid #000; padding: 5pt 7pt; margin: 3pt 0; font-family: Georgia, "Times New Roman", serif; } .pd-page .qdir { font-size: 9pt; font-weight: 700; margin-bottom: 2pt; } .pd-page u { text-decoration: underline; text-decoration-thickness: .8pt; } .pd-page table.facts, .pd-page .tablewrap table { border-collapse: collapse; margin: 4pt 0; font-size: 9pt; } .pd-page table.facts td, .pd-page table.facts th, .pd-page .tablewrap td, .pd-page .tablewrap th { border: .5pt solid #000; padding: 2pt 5pt; } .pd-page svg { filter: grayscale(1) contrast(1.2); max-width: 100%; height: auto; } .pd-page .chartwrap { max-width: 95mm; margin: 4pt 0; } .pd-page .chartwrap.wide { max-width: 130mm; } .pd-page .chart text { fill: #000 !important; } .pd-key { break-before: page; page-break-before: always; padding-top: 4pt; } .pd-key h2 { font-size: 15pt; margin: 0; } .pd-cols { display: flex; flex-wrap: wrap; gap: 10pt; margin-top: 10pt; } .pd-cols table { border-collapse: collapse; font-size: 9.5pt; } .pd-cols th, .pd-cols td { border: .5pt solid #000; padding: 1.5pt 7pt; text-align: center; } body.pd-open { overflow: hidden; } @media print { @page { size: A4 portrait; margin: 14mm 13mm 15mm; } html, body { background: #fff !important; } body.pd-open > *:not(#printdoc) { display: none !important; } body.pd-open { overflow: visible; } #printdoc { position: static; overflow: visible; background: #fff; } .pd-bar { display: none !important; } .pd-page { width: auto; margin: 0; padding: 0; box-shadow: none; } .lg-atmo, .callui, .pviewer, .toast { display: none !important; } } /* ------------------------------------------------------------------ v16.8: verified badge (codeshack.io design), Seen + typing in chat */ .verified-badge { display: inline-flex; align-items: center; position: relative; cursor: help; vertical-align: middle; margin-left: 6px; } .verified-badge svg { display: block; } .verified-badge .tooltip { visibility: hidden; background-color: #1f2937; color: #fff; text-align: center; padding: 6px 10px; border-radius: 6px; position: absolute; z-index: 5; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .3s; font: 500 .75rem var(--font); white-space: nowrap; letter-spacing: 0; } .verified-badge .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1f2937 transparent transparent transparent; } .verified-badge:hover .tooltip, .verified-badge:focus .tooltip, .verified-badge:active .tooltip { visibility: visible; opacity: 1; } .m-seen { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 2px 6px 4px; font-size: .72rem; color: var(--muted); } .m-seen .ic { width: 13px; height: 13px; } .m-seen .avatar { width: 14px !important; height: 14px !important; font-size: 7px !important; } .m-seen.on span { font-weight: 600; } .m-typing-row { align-items: flex-end; } .m-typing { display: inline-flex; gap: 4px; align-items: center; padding: 11px 14px; border-radius: 18px; background: var(--fill2, rgba(0,0,0,.08)); } .m-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; animation: mDot 1.2s infinite ease-in-out; } .m-typing i:nth-child(2) { animation-delay: .15s; } .m-typing i:nth-child(3) { animation-delay: .3s; } @keyframes mDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } } .verified-badge.sm { margin-left: 4px; vertical-align: -3px; cursor: default; } .verified-badge.sm .tooltip { display: none; } .pname .verified-badge { vertical-align: -2px; } /* ------------------------------------------------------------------ v16.9: government-worker note folds; Kaya study buddy */ .govnote { display: block; padding: 0; margin: 12px 0 16px; } .govnote summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; } .govnote summary::-webkit-details-marker { display: none; } .govnote summary .ic { width: 22px; height: 22px; flex: none; color: #B38600; margin: 0; } .govnote summary b { flex: 1; font-size: .9rem; } .gn-chev .ic { width: 16px !important; height: 16px !important; color: var(--muted) !important; transition: transform .25s var(--ease, ease); } .govnote[open] .gn-chev .ic { transform: rotate(90deg); } .gn-body { padding: 0 14px 12px 46px; } .gn-body .small:first-child { margin-top: 0; } :root[data-theme="dark"] .govnote summary .ic:not(.gn-chev .ic) { color: #FCD116; } .pkpis + .govnote, .govnote + .psubs { margin-top: 14px; } @media (max-width: 900px) { .govnote { margin-bottom: 18px; } } .kaya-av { display: inline-grid; place-items: center; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 6px 14px -6px rgba(0,56,168,.6); overflow: hidden; } .kaya-av svg { display: block; } .kaya-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; background: rgba(252,209,22,.25); color: #8A6A00; vertical-align: 1px; } :root[data-theme="dark"] .kaya-tag { color: #FCD116; } .kaya-row { position: relative; text-decoration: none; color: inherit; } .kaya-row .msg-dot { position: absolute; right: 12px; top: 50%; margin-top: -5px; } .kaya-page { max-width: 760px; margin: 0 auto; } .kaya-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; } .kaya-head b { font-size: 1.3rem; } .kaya-thread { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 22px; background: var(--fill); } .kaya-thread .m-row { display: flex; align-items: flex-end; gap: 8px; } .kaya-bub { max-width: 560px; background: linear-gradient(135deg, rgba(31,95,214,.12), rgba(252,209,22,.16)) !important; color: var(--ink) !important; line-height: 1.5; } .kaya-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* v16.11: phone screen-share helper sheet above the call screen */ .cu-sheet-ov { z-index: 1300 !important; } .cu-sheet .stack .btn { width: 100%; justify-content: flex-start; text-align: left; } .cu-sheet .btn .ic { width: 18px; height: 18px; } .callui .cu-local.env { transform: none; } /* ---------------- v16.12: dashboard Continue + Today, history lists, admin "View all" ---------------- */ /* Continue: rounded-rectangle buttons in a grid that re-flows with the card width */ .contcard { container-type: inline-size; container-name: cont; } .contcard .contgrid { display: grid; grid-template-columns: 1fr; gap: 10px; } @container cont (min-width: 400px) { .contcard .contgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container cont (min-width: 820px) { .contcard .contgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .contcard .contgrid > .btn { width: 100%; border-radius: 16px !important; min-height: 54px; justify-content: flex-start; padding: 12px 16px; text-align: left; line-height: 1.25; white-space: normal; } .contcard .contgrid > .btn .ic { flex: none; } .contcard .contgrid > .pill { justify-self: start; align-self: center; } @media (max-width: 380px) { .contcard .contgrid > .btn { min-height: 50px; } } /* Today: the four tiles fill the whole card; 4 across, 2 x 2, or 4 stacked rows, depending on the card's width */ .todaycard { display: flex; flex-direction: column; container-type: inline-size; container-name: today; } .todaycard > h2 { flex: none; } .todaycard .tgrid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(104px, 1fr); gap: 10px; align-content: stretch; } .todaycard .tmini { min-height: 0; height: 100%; } @container today (min-width: 560px) { .todaycard .tgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @container today (max-width: 250px) { .todaycard .tgrid { grid-template-columns: 1fr; grid-auto-rows: minmax(88px, 1fr); } .todaycard .tmini { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 16px; text-align: left; } } @supports not (container-type: inline-size) { @media (max-width: 340px) { .todaycard .tgrid { grid-template-columns: 1fr; } } } /* history lists (Recent activity, Mock history, Session history) */ .hist-head { margin-bottom: 10px; gap: 10px; flex-wrap: wrap; } .hist { display: flex; flex-direction: column; gap: 4px; } .hist .h-sw { border-radius: 14px; } .hist .h-sw.h-more { display: none; } .hist.open .h-sw.h-more { display: block; } .h-item { position: relative; z-index: 1; display: grid; grid-template-columns: 4.3em minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--fill); touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: grab; } .h-sw.swiping .h-item { cursor: grabbing; } .h-date { color: var(--muted); font-size: .84rem; font-weight: 600; white-space: nowrap; } .h-title { min-width: 0; overflow-wrap: anywhere; font-weight: 600; font-size: .93rem; } .h-score { white-space: nowrap; text-align: right; } .hist.mockh .h-item { grid-template-columns: 4.6em minmax(0, 1fr) auto auto; } .h-time { display: block; font-weight: 500; margin-top: 2px; } .h-act { text-align: right; } .h-act .btn { cursor: pointer; } @media (max-width: 520px) { .hist.mockh .h-item { grid-template-columns: auto minmax(0, 1fr) auto; } .hist.mockh .h-act { grid-column: 2 / -1; text-align: left; } .hist.mockh .h-act:has(> span.tiny) { display: none; } .h-item { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; } .h-date { font-size: .78rem; min-width: 3.4em; } .h-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } } .h-toggle[hidden], .ad-all[hidden] { display: none !important; } .h-toggle { margin-top: 8px; } a.n-more { text-align: center; text-decoration: none; box-sizing: border-box; } .ad-all { margin-top: 10px; } /* tablet width: the dashboard's 3-card row becomes 2 columns, so Continue takes the full row (its buttons then sit side by side) */ @media (min-width: 601px) and (max-width: 900px) { .grid.g3 > .contcard:nth-child(3):last-child { grid-column: 1 / -1; } } .ad-tabs { display: flex; width: 100%; max-width: 460px; } .ad-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* v16.13: PDF download next to Analytics in Mock history */ .h-btns { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .h-pdf { gap: 4px; } .h-pdf .ic { width: 16px; height: 16px; } .h-pdf span { font-size: .78rem; font-weight: 700; letter-spacing: .02em; } @media (max-width: 520px) { .h-btns { justify-content: flex-start; } } /* v16.13: Log out below About (side panel on computers, bottom of Home on phones) */ .logout-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 18px; background: var(--fill); color: var(--bad, #D92D20); font: 600 .86rem var(--font); cursor: pointer; text-align: left; flex: none; } .logout-btn:hover { background: var(--fill2); } .logout-btn .ic { width: 18px; height: 18px; } .side .logout-btn { display: none; } @media (min-width: 901px) { .side .logout-btn { display: flex; } body.side-collapsed .side .logout-btn span { display: none; } } .logout-home { margin-top: 12px; } .logout-home .logout-btn { justify-content: center; padding: 14px; font-size: .95rem; border-radius: 16px; } /* v16.14: Continue buttons share the card's full height (rows stretch evenly) */ .contcard { display: flex; flex-direction: column; } .contcard > h2 { flex: none; } .contcard .contgrid { flex: 1 1 auto; grid-auto-rows: minmax(54px, 1fr); align-content: stretch; } .contcard .contgrid > .btn { height: 100%; } /* v17: answer sheet always shows A–E; circles beyond an item's choices are inactive */ .as-b.off { display: inline-flex; align-items: center; justify-content: center; opacity: .32; border-style: dashed; cursor: not-allowed; } /* ==== v17.css ==== */ /* ============================ CSE 2027 Reviewer v17 ============================ */ /* ---------- Subject mastery: rows share the card height; bars are rounded rectangles that scale ---------- */ .subjcard { display: flex; flex-direction: column; } .subjcard > h2 { flex: none; } .subjlist { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; min-height: 0; } .subjrow { display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1 1 0; } .subjname { font-size: 1.04rem; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; } .subjname .dot { width: 10px; height: 10px; } .subjbar { height: clamp(12px, 1.2vw, 18px); border-radius: 7px; } .subjbar > i { border-radius: 7px; } @media (max-width: 600px) { .subjname { font-size: 1rem; } .subjbar { height: 12px; } } /* ---------- Government-worker note link ---------- */ .gn-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--blue, #0A84FF); text-decoration: none; } .gn-link:hover { text-decoration: underline; } .gn-link .ic { width: 15px; height: 15px; } /* ---------- Settings: visual theme picker + Logout ---------- */ .themepick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 520px) { .themepick { gap: 8px; } .tp { padding: 8px; gap: 6px; } .tp-prev { height: 58px; } .tp-d { display: none; } .tp-lab { font-size: .9rem; gap: 6px; } .tp-lab .ic { width: 17px; height: 17px; } .tp-check { top: 12px; right: 12px; width: 20px; height: 20px; } } .tp { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 10px 12px; border: 2px solid transparent; border-radius: 18px; background: var(--fill); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, transform .12s; } .tp:hover { transform: translateY(-1px); } .tp.on { border-color: var(--blue, #0A84FF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue, #0A84FF) 16%, transparent); } .tp-prev { position: relative; display: block; height: 78px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); } .tp-prev i { position: absolute; display: block; border-radius: 4px; } .tp-light .tp-prev { background: #F4F6FB; } .tp-dark .tp-prev { background: #111726; } .tp-auto .tp-prev { background: linear-gradient(135deg, #F4F6FB 0 50%, #111726 50% 100%); } .tp-bar { left: 8px; right: 8px; top: 8px; height: 12px; background: #0038A8; } .tp-l1 { left: 8px; top: 28px; width: 55%; height: 7px; } .tp-l2 { left: 8px; top: 40px; width: 38%; height: 7px; } .tp-card { right: 8px; bottom: 8px; width: 40%; height: 26px; border-radius: 7px !important; } .tp-light .tp-l1, .tp-light .tp-l2 { background: #C9D1E3; } .tp-light .tp-card { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); } .tp-dark .tp-l1, .tp-dark .tp-l2 { background: #34405C; } .tp-dark .tp-card { background: #1E273B; } .tp-auto .tp-l1, .tp-auto .tp-l2 { background: #8D98B3; } .tp-auto .tp-card { background: #FCD116; } .tp-lab { display: inline-flex; align-items: center; gap: 8px; font-size: .98rem; } .tp-lab .ic { width: 20px; height: 20px; } .tp-d { font-size: .78rem; color: var(--muted); } .tp-check { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue, #0A84FF); color: #fff; display: grid; place-items: center; } .tp-check .ic { width: 15px; height: 15px; } .logout-inline { color: var(--bad, #D92D20) !important; display: inline-flex; gap: 8px; } .logout-inline .ic { width: 18px; height: 18px; } /* ---------- Report this question ---------- */ .qrep-row { display: flex; justify-content: flex-end; margin-top: 10px; } .qrep { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 .8rem var(--font); cursor: pointer; } .qrep:hover { background: var(--fill); color: var(--ink); } .qrep .ic { width: 16px; height: 16px; } .rp-modal { max-width: 520px; width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow-y: auto; } .rp-modal.wide { max-width: 720px; } .rp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .rp-q { padding: 10px 12px; border-radius: 12px; background: var(--fill); margin-bottom: 12px; color: var(--muted); } .rp-reasons { display: grid; gap: 6px; } .rp-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--fill); cursor: pointer; font-size: .9rem; } .rp-opt input { accent-color: var(--blue, #0A84FF); } .rp-sheet .field + .field { margin-top: 10px; } .rp-note { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--gold, #FCD116); background: var(--fill); border-radius: 0 12px 12px 0; font-size: .9rem; } .rp-meta { margin-bottom: 8px; } .rp-qbox { padding: 12px; border-radius: 14px; background: var(--fill); } .rp-qbox .choices { margin-top: 10px; } .rp-ch { position: relative; cursor: default; } .rp-ch input { margin-right: 4px; accent-color: #28BE55; cursor: pointer; } .rp-tag { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(40,190,85,.16); color: #1E8E3E; white-space: nowrap; } .rp-tag.them { background: rgba(255,59,71,.14); color: #C62A2F; margin-left: 6px; } .rp-chk { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; cursor: pointer; } .rp-done { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fill); } .rp-row { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; } /* ---------- Backups ---------- */ .bk-acts { gap: 8px; flex-wrap: wrap; } .bk-inc { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--gold, #FCD116) 14%, var(--fill)); } .bk-inc > div { display: flex; gap: 10px; align-items: flex-start; } .bk-inc .ic { width: 22px; height: 22px; flex: none; } .bk-list { margin-top: 12px; } .bk-list summary { cursor: pointer; padding: 6px 0; } /* ---------- Readiness forecast ---------- */ .fc-svg { width: 100%; height: auto; display: block; margin: 10px 0 4px; } .fc-grid { stroke: var(--line, rgba(0,0,0,.08)); stroke-width: 1; } .fc-yt, .fc-lab { fill: var(--muted); font: 600 10.5px var(--font); } .fc-yt { text-anchor: end; } .fc-pass { stroke: #D4A800; stroke-width: 1.5; stroke-dasharray: 5 4; } .fc-exam { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; } .fc-trend { stroke: #0A84FF; stroke-width: 2.5; stroke-linecap: round; } .fc-proj { stroke: #0A84FF; stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linecap: round; opacity: .75; } .fc-dot { fill: var(--surface, #fff); stroke: #0A84FF; stroke-width: 2.5; } .fc-end { fill: #0A84FF; } .fc-val { fill: var(--ink); font: 700 13px var(--font); } .fc-txt { margin: 6px 0; } .fc-card h2 .ic { width: 22px; height: 22px; vertical-align: -4px; color: #0A84FF; } .fc-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: var(--fill); color: var(--ink); text-decoration: none; } .fc-line .ic { width: 18px; height: 18px; color: #0A84FF; flex: none; } /* ---------- Flashcards ---------- */ .fc-promo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; margin-bottom: 16px; } .fc-promo > span:not(.ic-tile) { display: flex; flex-direction: column; flex: 1; gap: 2px; } .fc-promo > .ic-tile { flex: none; } .fc-promo > .ic { width: 20px; height: 20px; color: var(--muted); } .fc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .fc-stats { display: flex; gap: 14px; font-size: .88rem; color: var(--muted); } .fc-stats b { color: var(--ink); } .fc-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .fc-prog { height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; } .fc-prog i { display: block; height: 100%; background: #8E5CF7; border-radius: 6px; transition: width .3s; } .fc-card3 { position: relative; display: block; width: 100%; height: clamp(280px, 46vh, 380px); border: 0; padding: 0; background: none; cursor: pointer; perspective: 1400px; touch-action: pan-y; -webkit-user-select: none; user-select: none; transition: transform .2s; font: inherit; color: inherit; } .fc-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border-radius: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--lq-menu, var(--surface, #fff)); box-shadow: 0 10px 34px rgba(10,20,50,.14), var(--lq-rim, 0 0 0 1px rgba(0,0,0,.05)); transition: transform .5s cubic-bezier(.22,1,.36,1); text-align: center; overflow-y: auto; } .fc-back { transform: rotateY(180deg); justify-content: flex-start; padding-top: 28px; } .fc-card3.flip .fc-front { transform: rotateY(-180deg); } .fc-card3.flip .fc-back { transform: rotateY(0); } .fc-word { font: 700 clamp(1.9rem, 6vw, 2.6rem) var(--rounded, var(--font)); letter-spacing: -.01em; } .fc-word.sm { font-size: 1.35rem; color: #8E5CF7; } .fc-pos { font-size: .85rem; font-style: italic; color: var(--muted); } .fc-hint { position: absolute; bottom: 18px; } .fc-mean { font-size: 1.12rem; font-weight: 600; line-height: 1.4; } .fc-row { font-size: .92rem; line-height: 1.45; } .fc-row b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #1E8E3E; } .fc-row.anto b { color: #C62A2F; } .fc-ex { font-size: .9rem; font-style: italic; color: var(--muted); } .fc-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; transition: opacity .2s; } .fc-grades.wait { opacity: .45; } .fc-g { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 0; border-radius: 16px; background: var(--fill); color: var(--ink); cursor: pointer; font: inherit; } .fc-g b { font-size: .95rem; } .fc-g span { font-size: .72rem; color: var(--muted); } .fc-g:disabled { cursor: default; } .fc-g.g-again b { color: #C62A2F; } .fc-g.g-hard b { color: #B26A00; } .fc-g.g-good b { color: #1E8E3E; } .fc-g.g-easy b { color: #0A6CDB; } .fc-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; } .fc-open { gap: 8px; } /* ---------- Weekly challenge ---------- */ .wk-card h2 .ic { width: 22px; height: 22px; vertical-align: -4px; } .wk-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; } .wk-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 18px; background: var(--fill); text-align: center; min-width: 0; } .wk-p b { font-size: .88rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wk-p span { font-size: .78rem; color: var(--muted); } .wk-p i { position: absolute; top: -10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem var(--font); font-style: normal; color: #fff; background: #9AA3B5; } .wk-p.p1 { padding-top: 22px; background: color-mix(in srgb, #FCD116 22%, var(--fill)); } .wk-p.p1 i { background: #D4A800; } .wk-p.p3 i { background: #B87333; } .wk-p.me { box-shadow: 0 0 0 2px #0A84FF inset; } .wk-foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .wk-champ { display: inline-flex; align-items: center; gap: 6px; } .wk-champ .ic { width: 18px; height: 18px; color: #D4A800; } /* ---------- Offline + install ---------- */ #offline-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 9000; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 18px; background: rgba(20,24,36,.92); color: #fff; font-size: .84rem; box-shadow: 0 8px 28px rgba(0,0,0,.25); } #offline-pill .ic { width: 20px; height: 20px; flex: none; } @media (min-width: 901px) { #offline-pill { bottom: 24px; } } .inst-steps ol { margin: 6px 0 0; padding-left: 20px; } .inst-ok { display: flex; align-items: center; gap: 8px; font-weight: 600; } [data-install][hidden] { display: none !important; } .field .rp-reasons label.rp-opt { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 0; font-weight: 500; text-align: left; width: 100%; box-sizing: border-box; } .rp-opt input[type=radio] { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0; padding: 0; box-shadow: none; } .rp-opt span { flex: 1; text-align: left; } .rp-ch input[type=radio], .rp-chk input[type=checkbox] { width: 18px; height: 18px; min-height: 0; flex: none; margin: 0 4px 0 0; padding: 0; box-shadow: none; } .wk-p.empty { background: transparent; } /* ==== v18.css ==== */ /* ============================ v18: Messenger functions, drawn in the app's Liquid Glass style ============================ */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ---------- bubbles: Liquid Glass (ink bubbles for you, clear glass for them); a chosen chat theme tints only yours ---------- */ .mx-conv .m-row.g-mid, .mx-conv .m-row.g-last, .m-win .m-row.g-mid, .m-win .m-row.g-last { margin-top: 2px; } .mx-conv .m-row.g-single, .mx-conv .m-row.g-first, .m-win .m-row.g-single, .m-win .m-row.g-first { margin-top: 10px; } .mx-conv[data-mt] .m-row.mine .m-bub, .m-win[data-mt] .m-row.mine .m-bub, .mx-conv[data-mt] .m-row.mine .mx-voice, .m-win[data-mt] .m-row.mine .mx-voice { background: linear-gradient(160deg, var(--mt1), var(--mt2)) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), var(--lq-shadow-sm, 0 2px 8px rgba(0,0,0,.08)) !important; } .m-row .m-avsp { width: 28px; flex: none; } .m-emoji { font-size: 42px; line-height: 1.1; padding: 2px 4px; } .m-sysrow { display: flex; justify-content: center; margin: 12px 0; } .m-sys { max-width: 86%; padding: 6px 12px; border-radius: 999px; background: var(--fill); box-shadow: var(--lq-rim); text-align: center; font-size: .76rem; color: var(--muted); } .m-sys b { color: var(--ink); font-weight: 600; } .m-sys-e { font-size: .95rem; } .m-acts { display: flex; gap: 2px; align-self: center; opacity: 0; transition: opacity .15s; } .m-row:hover .m-acts { opacity: 1; } .m-row.mine .m-acts { order: -1; } .m-acts .m-react-btn { position: static; opacity: 1; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--fill); color: var(--muted); cursor: pointer; } .m-acts .m-react-btn:hover { background: var(--fill2); color: var(--ink); } .m-acts .ic { width: 18px; height: 18px; } @media (hover: none) { .m-acts { display: none; } } .m-seen { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin: 3px 2px 0; color: var(--muted); } .m-seen .ic { width: 15px; height: 15px; } .mx-intro { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 12px 18px; text-align: center; } .mx-intro b { font-size: 1.15rem; margin-top: 8px; } .mx-intro .mx-vp { margin-top: 10px; } /* ---------- conversation header: same glass look as before (circle buttons + person in a glass pill) ---------- */ .mx-conv .cp-head .m-who.mx-who { cursor: pointer; } .mx-conv .cp-head .cp-act { display: flex; align-items: center; gap: 6px; } .mx-conv .cp-head .gl-circle { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none; } .mx-conv .cp-head .gl-circle .ic { width: 21px; height: 21px; } .mx-hsp { display: block; width: 1px; } @media (min-width: 900px) { .mx-conv.embedded .cp-head { display: flex !important; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 0 !important; } .mx-conv.embedded .cp-head .m-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; } .mx-conv.embedded .cp-head .m-who > div { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .mx-conv.embedded .cp-head .m-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-conv.embedded .cp-head .m-who:hover { background: var(--fill); } .mx-conv.embedded .mx-hsp { display: none; } } @media (max-width: 900px) { .mx-conv .cp-head .cp-act .btn { display: none; } } /* ---------- composer (glass bar): more · camera · photos · voice | message pill + emoji | quick reaction / send ---------- */ .mx-form { display: flex !important; align-items: flex-end; gap: 4px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important; } .mx-tools { display: flex; align-items: center; gap: 2px; transition: max-width .2s, opacity .2s; max-width: 180px; overflow: hidden; } .mx-t { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; padding: 0; } .mx-t:hover { background: var(--fill); } .mx-t .ic { width: 22px; height: 22px; } .mx-expand { display: none; } .mx-form.typing:not(.show-tools) .mx-tools { max-width: 0; opacity: 0; } .mx-form.typing:not(.show-tools) .mx-expand { display: grid; } .mx-pill { flex: 1; display: flex; align-items: flex-end; min-width: 0; border-radius: 22px; background: var(--fill); box-shadow: var(--lq-rim); padding: 0 2px 0 14px; } .mx-pill .m-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; resize: none; padding: 9px 0 !important; min-height: 38px; max-height: 120px; font: inherit; font-size: .96rem; color: var(--ink); line-height: 1.3; } .mx-emo { width: 36px; height: 36px; color: var(--muted); } .mx-like { font-size: 24px; line-height: 1; } .mx-like .ic { width: 24px; height: 24px; } .mx-like.pop { animation: mxPop .35s cubic-bezier(.22,1.6,.36,1); } @keyframes mxPop { 40% { transform: scale(1.3); } } .mx-form .mx-send { display: none !important; flex: none; } .mx-form.typing .mx-like { display: none; } .mx-form.typing .mx-send, .mx-form.kx-form .mx-send { display: grid !important; place-items: center; } .mx-drawer { display: grid; gap: 6px; padding: 12px; max-height: 42vh; overflow-y: auto; margin: 0 8px 6px; border-radius: 22px; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim), var(--lq-shadow-sm, 0 4px 14px rgba(0,0,0,.08)); } .mx-drawer[hidden] { display: none; } .mx-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; } .mx-app { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 600 .74rem var(--font); padding: 6px 0; border-radius: 16px; } .mx-app:hover { background: var(--fill); } .mx-emoji { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); } .mx-emoji button { font-size: 24px; height: 40px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; } .mx-emoji button:hover { background: var(--fill); } .mx-rec { display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); } .mx-rec[hidden] { display: none; } .mx-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad, #FF3B30); animation: mxBlink 1s infinite; } @keyframes mxBlink { 50% { opacity: .3; } } .mx-rec-t { font: 600 .9rem var(--font); min-width: 38px; font-variant-numeric: tabular-nums; } .mx-rec-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 38px; padding: 0 12px; border-radius: 20px; background: var(--fill); box-shadow: var(--lq-rim); } .mx-rec-wave i { flex: 1; height: 30%; border-radius: 3px; background: var(--ink); opacity: .55; animation: mxWave 1s ease-in-out infinite; } .mx-rec-wave i:nth-child(2n) { animation-delay: .15s; } .mx-rec-wave i:nth-child(3n) { animation-delay: .3s; } @keyframes mxWave { 50% { height: 80%; } } .mx-rec-x { color: var(--bad, #FF3B30); } /* ---------- voice message ---------- */ .mx-voice { --vp: 0%; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 22px; background: var(--fill); box-shadow: var(--lq-rim); min-width: 200px; } .mx-voice.mine { background: var(--lq-ink-btn, #0038A8); color: var(--lq-ink-txt, #fff); } .mx-vplay { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lq-menu, #fff); color: var(--ink); cursor: pointer; box-shadow: var(--lq-rim); } .mx-vplay .ic { width: 20px; height: 20px; } .mx-vwave { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; } .mx-vwave i { flex: 1; min-width: 2px; border-radius: 2px; background: currentColor; opacity: .5; } .mx-vtime { font: 600 .78rem var(--font); font-variant-numeric: tabular-nums; } /* ---------- conversation pages ---------- */ .mx-conv .mx-msgs { padding: 6px 12px 10px !important; } .mx-conv.embedded { position: relative; inset: auto; height: 100%; z-index: auto; border-radius: 28px; overflow: hidden; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim), var(--lq-shadow, 0 18px 50px rgba(20,30,60,.12)); } .m-win .mx-form { padding: 6px !important; } .m-win .mx-t { width: 32px; height: 32px; } .m-win .mx-t .ic { width: 20px; height: 20px; } .m-win .mx-tools [data-att="camera"] { display: none; } .m-win .mx-drawer { margin: 0 6px 6px; } .m-win .mx-app .ic-tile { --ts: 40px !important; } /* ---------- messages list ---------- */ .mx-split { display: block; } .mx-list { display: flex; flex-direction: column; } .mx-list > .mx-top { order: 0; margin-bottom: 10px; } .mx-list > .mx-search { order: 1; } .mx-list > .mx-tabs { order: 2; } .mx-list > .mx-stories { order: 3; } .mx-list > .mx-rows { order: 4; } .mx-top .row { gap: 8px; } .mx-top .gl-circle { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; text-decoration: none; } .mx-top .gl-circle .m-count { position: absolute; top: -2px; right: -2px; } .mx-search { position: relative; display: flex; align-items: center; padding: 0 !important; margin-bottom: 12px; } .mx-search .ic { position: absolute; left: 14px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; z-index: 1; } .mx-search input { width: 100%; padding-left: 42px !important; } .mx-tabs { display: flex; width: 100%; margin: 0 0 12px; } .mx-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .mx-tabs .ic { width: 18px; height: 18px; } .mx-tb-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--fill2); color: var(--ink); font: 700 .7rem/18px var(--font); font-style: normal; } .mx-story { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; flex: none; text-decoration: none; color: var(--ink); font-size: .76rem; text-align: center; } .mx-story > span:last-child { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx-plus { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; } .mx-plus .ic { width: 24px; height: 24px; } .mx-sw { position: relative; overflow: hidden; border-radius: 16px; } .mx-swl, .mx-swr { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; opacity: 0; } .mx-swl { left: 0; } .mx-swr { right: 0; } .mx-sw.swl-on .mx-swl, .mx-sw.swr-on .mx-swr { opacity: 1; } .mx-swl button, .mx-swr button { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--fill2); color: var(--ink); cursor: pointer; box-shadow: var(--lq-rim); } .mx-swr button.del { color: var(--bad, #E5484D); } .mx-swl .ic, .mx-swr .ic { width: 20px; height: 20px; } .mx-item { position: relative; z-index: 1; width: 100%; box-sizing: border-box; border: 0; font: inherit; text-align: left; cursor: pointer; touch-action: pan-y; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } .mx-sw .mx-item { background: var(--bg); } .mx-item.sel { background: var(--fill) !important; box-shadow: var(--lq-rim); } .mx-item .m-it { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mx-item .m-it b { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-item .m-it > span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-item .m-it > span em { font-style: normal; } .mx-item .m-it > span.unread { font-weight: 700; color: var(--ink); } .mx-stat { flex: none; width: 18px; display: flex; justify-content: center; } .mx-unread { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); } .mx-sent .ic { width: 16px; height: 16px; color: var(--muted); } .mx-muted .ic { width: 14px; height: 14px; color: var(--muted); } .mx-il { font: 700 .72rem var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 8px 4px; } .mx-person { position: relative; } .mx-mins { position: absolute; left: 36px; top: 40px; z-index: 2; padding: 0 5px; border-radius: 8px; background: var(--lq-menu, #fff); color: var(--muted); font: 700 .6rem/15px var(--font); font-style: normal; box-shadow: var(--lq-rim); } .mx-pchat { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; } .mx-pchat .ic { width: 18px; height: 18px; } .mx-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 30px; } .mx-empty h2 { margin: 8px 0 0; } @media (min-width: 900px) { .mx-split { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 16px; height: calc(100vh - 48px); height: calc(100dvh - 48px); } .mx-list.ml-page { max-width: none; overflow: hidden; padding: 18px 14px 12px; border-radius: 28px; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim), var(--lq-shadow, 0 18px 50px rgba(20,30,60,.10)); } .mx-list .mx-top h1 { font-size: 1.5rem; } .mx-list .mx-rows { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; } .mx-list .mx-sw .mx-item { background: var(--lq-menu, var(--surface)); } .mx-pane { min-width: 0; min-height: 0; } .mx-pane:has(.mx-empty) { border-radius: 28px; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim); } body.in-mx .main { padding-top: 16px; padding-bottom: 16px; } } @media (max-width: 899px) { .mx-pane { display: none; } .mx-list .mx-rows { padding-bottom: 90px; } } [id="m-panel"] .mx-search { margin: 0 10px 6px; } [id="m-panel"] .mx-stories { padding: 4px 10px 10px; gap: 10px; } [id="m-panel"] .mx-story { width: 54px; } [id="m-panel"] .mx-sw .mx-item { background: var(--lq-menu, var(--surface)); } /* ---------- chat info (glass sheet) ---------- */ .mx-info-ov { position: fixed; inset: 0; z-index: 9500; background: rgba(10,14,25,.28); opacity: 0; transition: opacity .2s; } .mx-info-ov.on { opacity: 1; } .mx-info { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(390px, calc(100vw - 24px)); overflow-y: auto; padding: 12px 16px 28px; border-radius: 28px; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim), var(--lq-shadow, 0 20px 60px rgba(0,0,0,.2)); transform: translateX(24px); transition: transform .28s cubic-bezier(.22,1,.36,1); } .mx-info-ov.on .mx-info { transform: none; } @media (max-width: 899px) { .mx-info { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; background: var(--bg); } } .mx-ih .gl-circle { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; } .mx-ip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin: 4px 0 14px; } .mx-ip h2 { margin: 10px 0 0; font-size: 1.3rem; } .mx-ibtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; } .mx-ibtns button { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink); font: 500 .76rem var(--font); cursor: pointer; } .mx-ibtns .ic { width: 22px; height: 22px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: var(--fill); box-shadow: var(--lq-rim); } .mx-isec { margin-top: 10px; padding: 6px; border-radius: 20px; background: var(--fill); box-shadow: var(--lq-rim); } .mx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: 500 .95rem var(--font); cursor: pointer; text-align: left; } .mx-row:hover { background: var(--fill2); } .mx-row .ic { width: 20px; height: 20px; color: var(--muted); } .mx-row.danger, .mx-row.danger .ic { color: var(--bad, #E5484D); } .mx-swatch { display: block; width: 22px; height: 22px; border-radius: 50%; } .mx-swatch.lq, .mx-themes i.lq { background: var(--lq-ink-btn, #0038A8); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); } .mx-qe { font-size: 1.25rem; } .mx-sub { padding: 6px 8px 10px; } .mx-sub.hide { display: none; } .mx-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .mx-themes button { display: flex; flex-direction: column; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink); font: 500 .7rem var(--font); cursor: pointer; } .mx-themes i { width: 42px; height: 42px; border-radius: 50%; border: 3px solid transparent; box-shadow: var(--lq-rim); } .mx-themes button.on i { border-color: var(--lq-menu, #fff); box-shadow: 0 0 0 2px var(--ink); } .mx-qes { display: flex; flex-wrap: wrap; gap: 6px; } .mx-qes button { width: 44px; height: 44px; font-size: 22px; border: 0; border-radius: 50%; background: var(--lq-menu, #fff); box-shadow: var(--lq-rim); cursor: pointer; } .mx-qes button.on { box-shadow: 0 0 0 2px var(--ink); } .mx-nick { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .mx-nick input { flex: 1; min-width: 0; } .mx-sub input[type=search] { width: 100%; } .mx-found { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .mx-found button { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--lq-menu, #fff); color: var(--ink); font: inherit; font-size: .86rem; text-align: left; cursor: pointer; } .mx-found span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mx-found i { font-style: normal; color: var(--muted); font-size: .74rem; } .mx-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; } .mx-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; } .mx-frow { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-decoration: none; color: var(--ink); } .mx-frow:hover { background: var(--fill2); } /* ---------- new message ---------- */ .mx-new { width: min(480px, calc(100vw - 24px)); max-height: 80vh; display: flex; flex-direction: column; } .mx-newh { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 10px; } .mx-newh b { font-size: 1.05rem; } .mx-to { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 16px; background: var(--fill); box-shadow: var(--lq-rim); margin-bottom: 8px; } .mx-to span { color: var(--muted); } .mx-to input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; min-height: 0; } .mx-newl { overflow-y: auto; flex: 1; } .mx-new .mx-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; background: transparent; color: var(--ink); text-decoration: none; } .mx-new .mx-item:hover { background: var(--fill); } .mx-newg > .ic:last-child { width: 18px; height: 18px; color: var(--muted); } /* ---------- Kaya (bot) ---------- */ .kx-qr { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 2px; scrollbar-width: none; } .kx-qr::-webkit-scrollbar { display: none; } .kx-qr .btn { flex: none; white-space: nowrap; } .kx-card { flex: none; width: min(260px, 70vw); border-radius: 22px; overflow: hidden; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim), var(--lq-shadow-sm, 0 6px 18px rgba(0,0,0,.08)); } .kx-card-img { height: 84px; display: grid; place-items: center; background: var(--fill); color: var(--ink); } .kx-card-img .ic { width: 36px; height: 36px; } .kx-card-b { padding: 10px 14px 8px; } .kx-card-b b { display: block; } .kx-card-b span { font-size: .82rem; color: var(--muted); } .kx-card a, .kx-card button.kx-btn { display: block; width: 100%; padding: 11px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 .9rem var(--font); text-align: center; text-decoration: none; cursor: pointer; } .kx-card a:hover, .kx-card button.kx-btn:hover { background: var(--fill); } .kx-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; } .kx-cards::-webkit-scrollbar { display: none; } .kx-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); border-radius: 22px; background: var(--lq-menu, var(--surface)); box-shadow: var(--lq-rim), 0 12px 40px rgba(0,0,0,.18); overflow: hidden; padding: 4px; } .kx-menu b { display: block; padding: 10px 12px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .kx-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; color: var(--ink); font: 500 .95rem var(--font); text-decoration: none; } .kx-menu a:hover { background: var(--fill); } .kx-menu .ic { width: 20px; height: 20px; } .kx-foot { position: relative; } .kx-form .mx-pill input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: inherit; color: var(--ink); } .mx-list .mx-top { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 10px; } .mx-list .mx-top > div:first-child { min-width: 0; } /* ==== v181.css ==== */ /* v18.1 */ /* hero: no flag strips */ .hero::before { display: none !important; content: none !important; } /* subject mastery: bare colored icon */ .subjname { display: inline-flex; align-items: center; gap: 8px; } .subj-ic { display: inline-grid; place-items: center; flex: none; background: none !important; } .subj-ic .ic { width: 1.35em; height: 1.35em; } /* ---------------- Today card ---------------- */ .todaycard { display: flex; flex-direction: column; } .v1-th { margin-bottom: 12px; } .v1-today { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; } .v1-goal { display: flex; flex-direction: column; align-items: center; gap: 6px; } .v1-cap { font-size: .78rem; font-weight: 600; color: var(--muted); } .v1-ring { position: relative; flex: none; } .v1-ring svg { display: block; } .v1-ring svg circle + circle { transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); } .v1-ring.full svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--rc) 55%, transparent)); } .v1-rin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.05; } .v1-rin b { font: 800 1.7rem var(--rounded, inherit); letter-spacing: -.02em; } .v1-rin b.sm { font-size: .9rem; } .v1-rin small { font-size: .7rem; color: var(--muted); margin-top: 2px; font-weight: 600; } .v1-rin .v1-ok { width: 20px; height: 20px; color: #28BE55; margin-bottom: 1px; } .v1-stats { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .v1-stat { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 16px; background: var(--fill); border: 0; text-align: left; font: inherit; color: var(--ink); min-width: 0; } button.v1-stat { cursor: pointer; transition: background .2s, transform .15s; } button.v1-stat:hover:not(:disabled) { background: var(--fill2); } button.v1-stat:active:not(:disabled) { transform: scale(.98); } button.v1-stat:disabled { cursor: default; opacity: .75; } .v1-si { flex: none; display: grid; place-items: center; } .v1-si .ic { width: 24px; height: 24px; } .v1-sb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .v1-sb > .spread > span { font-size: .8rem; font-weight: 600; color: var(--muted); } .v1-sb > .spread > b { font: 800 1.05rem var(--rounded, inherit); } .v1-bar { position: relative; height: 8px; border-radius: 999px; background: var(--fill2); overflow: visible; } .v1-bar i { display: block; height: 100%; border-radius: inherit; transition: width .8s cubic-bezier(.2,.8,.2,1); } .v1-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--ink); opacity: .45; text-decoration: none; } .v1-week { display: flex; justify-content: space-between; gap: 4px; } .v1-day { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; } .v1-day i { width: 14px; height: 14px; border-radius: 50%; background: var(--fill2); display: block; } .v1-day.on i { background: linear-gradient(180deg, #FFB020, #FF6A1F); box-shadow: 0 2px 6px rgba(255,120,30,.35); } .v1-day.today i { outline: 2px solid color-mix(in srgb, #FF8A1F 55%, transparent); outline-offset: 2px; } .v1-day em { font-style: normal; font-size: .62rem; color: var(--muted); font-weight: 600; } @media (max-width: 420px) { .v1-today { grid-template-columns: 1fr; justify-items: stretch; } .v1-goal { justify-self: center; } } /* ---------------- profile: My progress ---------------- */ .v1-prog { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin: 14px 0 18px; } .v1-ready { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 16px; border-radius: 22px; background: var(--fill); } .v1-ready .v1-rin b { font-size: 2rem; } .v1-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; } .v1-tile { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--fill); min-width: 0; } .v1-tile > div:last-child { display: flex; flex-direction: column; min-width: 0; } .v1-tile.v1-wide > div:last-child { gap: 6px; } .v1-big { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 14%, transparent); } .v1-big .ic { width: 26px; height: 26px; } .v1-num { font: 800 1.35rem var(--rounded, inherit); line-height: 1.1; } @media (max-width: 640px) { .v1-prog { grid-template-columns: 1fr; } .v1-ready { justify-self: stretch; } .v1-tiles { grid-template-columns: 1fr 1fr; } .v1-tile.v1-wide { grid-column: 1 / -1; } } /* ---------------- Messages ---------------- */ /* reaction bar + action menu float on their own; no extra glass behind them */ .rx-picker, :root .rx-picker { background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; } .rx-picker::before, .rx-picker::after { display: none !important; content: none !important; } .rx-bar, .rx-menu { background-color: var(--lq-menu, var(--glass-strong)) !important; box-shadow: var(--lq-rim, 0 0 0 1px var(--line)), 0 12px 30px -8px rgba(0,0,0,.35) !important; } /* Messages header: Friends + Compose side by side */ .mx-top > .row { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; flex: none; width: auto !important; } .mx-top > .row > .gl-circle { flex: none; margin: 0 !important; } /* my own messages: react/reply sit on the left of the bubble */ .m-row.mine .m-acts { order: 0; flex-direction: row-reverse; } /* New message sheet: title left, Cancel right */ .mx-newh { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; } .mx-newh b { flex: 1; min-width: 0; text-align: left; } .mx-newh .btn { flex: none; width: auto !important; } /* ---------------- phones ---------------- */ .hdr-back { display: none; } @media (max-width: 900px) { /* shrink on scroll: whole bar + search shrink together, icons only, grouped in the center */ .dock .tabbar { transition: left .5s var(--spring), right .5s var(--spring), opacity .3s, transform .45s var(--spring), filter .3s !important; } .dock .tb-search { transition: right .5s var(--spring), width .45s var(--spring), height .45s var(--spring), transform .35s var(--spring) !important; } body.tb-min .dock { height: 50px; } body.tb-min .dock .tabbar { left: calc(50% - 120px) !important; right: calc(50% - 64px) !important; padding: 0 3px !important; cursor: default; } body.tb-min .dock .tabbar a { flex-grow: 1; opacity: 1; padding: 0; pointer-events: auto; justify-content: center; align-items: center; color: var(--muted); } body.tb-min .dock .tabbar a.on { color: var(--tab-on, var(--ink)) !important; } body.tb-min .dock .tabbar a span { max-height: 0; opacity: 0; margin: 0; } body.tb-min .dock .tabbar a svg { transform: none; width: 22px; height: 22px; } body.tb-min .tb-lens { opacity: 0 !important; } body.tb-min .dock .tb-search { right: calc(50% - 120px); width: 50px; height: 50px; } /* someone's profile: a Back pill takes over the top-left */ body.on-uview .mobilebar .hdr-me { display: none !important; } body.on-uview .mobilebar .hdr-back { display: inline-flex; align-items: center; gap: 2px; width: auto !important; padding: 0 16px 0 10px !important; border-radius: 999px !important; border: 0; font: 600 1rem var(--font, inherit); color: var(--ink); cursor: pointer; } body.on-uview .mobilebar .hdr-back .ic { width: 22px; height: 22px; } body.on-uview #uv-back { display: none; } body.on-uview .backrow:has(#uv-back) { display: none; } } /* ---------------- "Today's plan": Gemini-style rotating ring + breathing glow + light sweep ---------------- v19.2 performance: every moving part animates only transform / opacity (runs on the GPU compositor, no per-frame style or layout work) and everything pauses while the button is off-screen (.pc-off). */ .btn.plan-cta { position: relative; overflow: visible !important; isolation: auto !important; z-index: auto !important; border: 0 !important; background: linear-gradient(180deg, #FFE38A, #F4C84A) !important; color: #0A2A6B !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px -6px rgba(0,0,0,.35), 0 0 18px 0 rgba(255,210,80,.35) !important; } .plan-cta .pc-ring { position: absolute; inset: -2px; z-index: -1; border-radius: inherit; padding: 2px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .plan-cta .pc-ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0deg); background: conic-gradient(#4285F4, #9B72CB, #D96570, #F4B400, #4285F4); animation: pc-rot 6s linear infinite; will-change: transform; } .btn.plan-cta::before { content: none !important; } .btn.plan-cta::after { content: "" !important; display: block !important; position: absolute; inset: -6px; z-index: -2; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, #4285F4, #9B72CB, #D96570, #F4B400); filter: blur(16px); opacity: .55; animation: pc-breathe 3.2s ease-in-out infinite; will-change: opacity, transform; } .plan-cta .pc-sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .plan-cta .pc-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transform: translateX(-140%) skewX(-18deg); animation: pc-sweep 4.5s ease-in-out infinite; will-change: transform; } .plan-cta .pc-sweep::after { content: ""; position: absolute; top: -40%; left: 0; width: 70%; height: 180%; background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,240,190,.35) 45%, transparent 70%); mix-blend-mode: soft-light; animation: pc-orb 7s ease-in-out infinite alternate; will-change: transform, opacity; } .btn.plan-cta:hover::after { opacity: .85; } .btn.plan-cta:hover { transform: translateY(-1px); } @keyframes pc-rot { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes pc-breathe { 0%, 100% { opacity: .45; transform: scale(.98); } 50% { opacity: .9; transform: scale(1.05); } } @keyframes pc-sweep { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 85%, 100% { transform: translateX(300%) skewX(-18deg); } } @keyframes pc-orb { 0% { transform: translateX(-30%); opacity: .6; } 50% { opacity: 1; } 100% { transform: translateX(80%); opacity: .6; } } .plan-cta.pc-off::after, .plan-cta.pc-off .pc-ring::before, .plan-cta.pc-off .pc-sweep::before, .plan-cta.pc-off .pc-sweep::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .btn.plan-cta::after, .plan-cta .pc-ring::before, .plan-cta .pc-sweep::before, .plan-cta .pc-sweep::after { animation: none; } } /* v18.2 Settings: one even stack of cards (Account, Profile, Install, Your data) */ .set-stack { display: flex; flex-direction: column; gap: 14px; } .set-stack > #acctbox { display: contents; } .set-stack .card, .set-stack > #acctbox > .card { margin: 0 !important; } /* v18.2 Messages: chat / contact rows have no background of their own (selected chat on desktop keeps a light highlight) */ .mx-sw, .mx-sw .mx-item, .mx-list .mx-sw .mx-item, [id="m-panel"] .mx-sw .mx-item, .mx-rows .mx-item, .mx-rows .ml-item, .ml-page .ml-item { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } .mx-rows .mx-item:hover, .ml-page .ml-item:hover { background: transparent !important; } .mx-item.sel, .mx-sw .mx-item.sel { background: var(--fill) !important; } /* v19.2 performance on phones: a smaller blur radius costs far less to redraw while scrolling and looks the same over the soft background */ @media (max-width: 900px) { html:root, html:root[data-theme] { --lq-blur: blur(22px) saturate(190%); --lq-blur-soft: blur(26px) saturate(190%); } } /* v19.4: Back bubble beside page titles */ .pg-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .pg-title > h1 { margin: 0 !important; min-width: 0; } .pg-back { flex: none; width: 44px !important; height: 44px !important; display: inline-grid !important; place-items: center; border: 0; border-radius: 50% !important; color: var(--ink); cursor: pointer; padding: 0; } .pg-back .ic { width: 22px; height: 22px; } .pg-back.lbl { width: auto !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; gap: 2px; padding: 0 14px 0 8px; font: 600 15px var(--font, inherit); white-space: nowrap; } @media (max-width: 900px) { .pg-back { width: 40px !important; height: 40px !important; } .pg-title { gap: 10px; } } /* v19.4: cards beside the side panel start level with its top edge (12 px), and Messages ends level with its bottom */ @media (min-width: 901px) { .main { padding-top: 12px !important; } .mx-split { height: calc(100vh - 24px) !important; height: calc(100dvh - 24px) !important; } } /* v19.4 phones: bell ⇄ close morph on Notifications */ .mobilebar .hdr-ics .hdr-morph { position: relative; } .mobilebar .hdr-ics .hdr-morph > svg, .mobilebar .hdr-ics .hdr-morph .nb-x { transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .2s; } .mobilebar .hdr-ics .hdr-morph .nb-x { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: rotate(-90deg) scale(.4); pointer-events: none; } .mobilebar .hdr-ics .hdr-morph .nb-x .ic { width: 22px; height: 22px; } .mobilebar .hdr-ics .hdr-morph.is-x > svg { opacity: 0; transform: rotate(90deg) scale(.4); } .mobilebar .hdr-ics .hdr-morph.is-x .nb-x { opacity: 1; transform: none; } .mobilebar .hdr-ics .hdr-morph.is-x > :not(svg):not(.nb-x) { opacity: 0; } .mobilebar .hdr-ics .hdr-morph.is-x::after { opacity: 0 !important; } @media (max-width: 900px) { body.on-notif .pg-back, body.on-msgs .pg-back { display: none !important; } } /* v19.4: a deeper blue light pooled around Today's plan inside the welcome card */ html body .card.hero::before { content: "" !important; display: block !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: auto; z-index: 0; pointer-events: none; background: radial-gradient(300px 190px at var(--px, 82%) var(--py, 84%), rgba(2,14,72,.62), rgba(2,14,72,.28) 45%, transparent 72%) !important; } /* ================= v19.5: time-of-day welcome card (approved mockup) ================= */ .card.hero { --pool: rgba(2,14,72,.62); } .card.hero.tod-dawn { --pool: rgba(10,20,70,.55); } .card.hero.tod-afternoon { --pool: rgba(90,30,10,.50); } .card.hero.tod-dusk { --pool: rgba(40,8,40,.50); } .card.hero.tod-evening { --pool: rgba(0,0,10,.55); } /* skies */ html body .card.hero.tod-dawn { background-image: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.14), transparent 50%), linear-gradient(162deg, #132A66 0%, #34489A 38%, #8A72B4 70%, #E3A48E 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1.5px 0 rgba(255,255,255,.4), 0 24px 48px -20px rgba(140,110,180,.55) !important; } html body .card.hero.tod-afternoon { background-image: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.16), transparent 50%), linear-gradient(155deg, #0B3A8F 0%, #2F5DB5 36%, #B96A55 72%, #E8953F 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1.5px 0 rgba(255,255,255,.4), 0 24px 48px -20px rgba(200,110,60,.55) !important; } html body .card.hero.tod-dusk { background-image: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.10), transparent 50%), linear-gradient(172deg, #16195A 0%, #3E2A78 38%, #A2466F 70%, #EE8A4E 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1.5px 0 rgba(255,255,255,.35), 0 24px 48px -20px rgba(170,70,110,.55) !important; } html body .card.hero.tod-evening { background-image: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.07), transparent 50%), linear-gradient(160deg, #040A22 0%, #0A1946 55%, #1C2566 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1.5px 0 rgba(255,255,255,.28), 0 24px 48px -20px rgba(40,30,120,.6) !important; } html body .card.hero.tod-dawn h1 .lg-name { color: #FFE3B8; } html body .card.hero.tod-afternoon h1 .lg-name { color: #FFF1C2; } html body .card.hero.tod-dusk h1 .lg-name { color: #FFD9A6; } html body .card.hero.tod-evening h1 .lg-name { color: #FCD116; } .card.hero:not(.tod-morning)::after { display: none !important; } .card.hero.tod-swap .hero-sky { animation: tod-fade 1.2s ease; } @keyframes tod-fade { from { opacity: 0; } } /* scenery (only the pieces of the current time are shown) */ .hero-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .hero-sky > i { position: absolute; display: none; } .tod-afternoon .sky-sun { display: block; right: 60px; top: 42%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,170,.95) 0 11%, rgba(255,196,110,.55) 12% 24%, rgba(255,160,80,.22) 25% 45%, transparent 66%); } .tod-afternoon .sky-haze, .tod-dusk .sky-haze, .tod-dawn .sky-haze { display: block; left: 0; right: 0; bottom: 0; height: 40%; } .tod-afternoon .sky-haze { background: linear-gradient(to top, rgba(255,150,70,.35), transparent); } .tod-dusk .sky-haze { background: linear-gradient(to top, rgba(255,130,90,.35), transparent); } .tod-dawn .sky-haze { background: linear-gradient(to top, rgba(255,210,190,.28), transparent); } .tod-afternoon .sky-c1, .tod-afternoon .sky-c2, .tod-afternoon .sky-c3 { display: block; border-radius: 999px; background: rgba(255,255,255,.15); } .tod-afternoon .sky-c1 { right: 250px; top: 56px; width: 150px; height: 36px; } .tod-afternoon .sky-c2 { right: 300px; top: 40px; width: 70px; height: 48px; background: rgba(255,255,255,.12); } .tod-afternoon .sky-c3 { right: 60px; top: 84px; width: 110px; height: 26px; background: rgba(255,255,255,.12); } .tod-dusk .sky-sun { display: block; right: 150px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,.95) 0 22%, rgba(255,150,90,.55) 23% 38%, rgba(240,100,110,.22) 39% 58%, transparent 72%); } .tod-dawn .sky-sun { display: block; left: 220px; bottom: -150px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,232,190,.9) 0 18%, rgba(255,190,160,.5) 19% 36%, rgba(230,160,200,.2) 37% 58%, transparent 72%); } .tod-dawn .sky-c1 { display: block; left: 0; right: 0; bottom: 34px; height: 26px; background: rgba(255,255,255,.10); filter: blur(10px); } .tod-evening .sky-glow { display: block; left: -80px; bottom: -160px; width: 700px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,77,255,.35), transparent); } .tod-evening .sky-halo { display: block; right: 70px; top: 70px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(246,231,176,.28), transparent 70%); } .tod-evening .sky-moon { display: block; right: 104px; top: 100px; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset -14px 8px 0 0 #F6E7B0; } .tod-evening .sky-stars, .tod-dusk .sky-stars, .tod-dawn .sky-stars { display: block; inset: 0; } .tod-evening .sky-stars { background: radial-gradient(2px 2px at 6% 12%, rgba(255,255,255,.85), transparent), radial-gradient(1.5px 1.5px at 14% 30%, rgba(255,255,255,.6), transparent), radial-gradient(2px 2px at 22% 8%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 31% 20%, rgba(255,255,255,.5), transparent), radial-gradient(2.5px 2.5px at 40% 6%, rgba(255,255,255,.9), transparent), radial-gradient(1.5px 1.5px at 48% 26%, rgba(255,255,255,.6), transparent), radial-gradient(2px 2px at 57% 12%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 64% 34%, rgba(255,255,255,.5), transparent), radial-gradient(2px 2px at 71% 8%, rgba(255,255,255,.8), transparent), radial-gradient(1.5px 1.5px at 79% 24%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 52% 44%, rgba(255,255,255,.4), transparent), radial-gradient(1.5px 1.5px at 9% 48%, rgba(255,255,255,.5), transparent), radial-gradient(2px 2px at 35% 40%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 88% 46%, rgba(255,255,255,.5), transparent), radial-gradient(2px 2px at 94% 14%, rgba(255,255,255,.7), transparent), radial-gradient(1.5px 1.5px at 27% 58%, rgba(255,255,255,.35), transparent), radial-gradient(2px 2px at 66% 52%, rgba(255,255,255,.45), transparent); } .tod-dusk .sky-stars { background: radial-gradient(2px 2px at 6% 12%, rgba(255,255,255,.45), transparent), radial-gradient(1.5px 1.5px at 31% 20%, rgba(255,255,255,.45), transparent), radial-gradient(2px 2px at 57% 12%, rgba(255,255,255,.45), transparent), radial-gradient(1.5px 1.5px at 79% 24%, rgba(255,255,255,.4), transparent), radial-gradient(2px 2px at 94% 14%, rgba(255,255,255,.4), transparent); } .tod-dawn .sky-stars { background: radial-gradient(2px 2px at 6% 12%, rgba(255,255,255,.35), transparent), radial-gradient(2px 2px at 22% 8%, rgba(255,255,255,.35), transparent), radial-gradient(2.5px 2.5px at 40% 6%, rgba(255,255,255,.35), transparent), radial-gradient(2px 2px at 57% 12%, rgba(255,255,255,.35), transparent), radial-gradient(2px 2px at 71% 8%, rgba(255,255,255,.3), transparent), radial-gradient(1.5px 1.5px at 79% 24%, rgba(255,255,255,.3), transparent); } /* the dark light behind Today's plan: large, spilling past the card's corner */ html body .card.hero::before { background: radial-gradient(380px 210px at var(--px, 85%) var(--py, 86%), var(--pool) 0%, transparent 100%) !important; } /* copy */ .card.hero .hero-dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; } .card.hero .hero-dt > span { display: inline-flex; align-items: center; gap: 8px; } .card.hero .hero-dt .ic { width: 15px; height: 15px; } .card.hero .hero-greet { margin: .15em 0 .35em !important; font-size: clamp(1.9rem, 3.2vw, 2.5rem); } .card.hero .hero-k1 { margin-bottom: 0; } .card.hero .hero-k2 { margin: 10px 0 4px; } /* Today's plan exactly as wide as the Professional | Sub-Prof switch */ html body .card.hero .hero-act .seg, html body .card.hero .hero-act .btn.plan-cta { width: 240px !important; min-width: 0 !important; box-sizing: border-box; } html body .card.hero .hero-act .seg { display: flex !important; } html body .card.hero .hero-act .seg button { flex: 1 1 0 !important; } html body .card.hero .hero-act .btn.plan-cta { justify-content: center; } @media (max-width: 900px) { html body .card.hero { padding: 22px 20px !important; } html body .card.hero::before { background: radial-gradient(320px 180px at var(--px, 30%) var(--py, 90%), var(--pool) 0%, transparent 100%) !important; } .card.hero .hero-k2 > span { display: block; } .card.hero .hero-k2 .k2sep { display: none; } .card.hero .hero-dt { gap: 6px 16px; } .card.hero .hero-dt .ic { width: 14px; height: 14px; } .card.hero .hero-act { margin-bottom: 0 !important; } .tod-afternoon .sky-sun { right: -120px; top: 50%; width: 420px; height: 420px; } .tod-afternoon .sky-c1 { right: 24px; top: 76px; width: 110px; height: 28px; } .tod-afternoon .sky-c2 { right: 62px; top: 64px; width: 54px; height: 38px; } .tod-afternoon .sky-c3 { display: none; } .tod-dusk .sky-sun { right: -60px; bottom: -110px; width: 280px; height: 280px; } .tod-dawn .sky-sun { left: -70px; bottom: -120px; width: 290px; height: 290px; } .tod-evening .sky-halo { right: 14px; top: 58px; width: 100px; height: 100px; } .tod-evening .sky-moon { right: 42px; top: 84px; width: 44px; height: 44px; box-shadow: inset -11px 6px 0 0 #F6E7B0; } .tod-evening .sky-glow { left: -120px; bottom: -150px; width: 520px; } } /* ---------------- v19.6 Today card: milestone track + rows that fill the card ---------------- */ .tg-goal { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: var(--fill); min-width: 0; } .tg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .tg-cap { font-size: .78rem; font-weight: 600; color: var(--muted); } .tg-num { display: flex; align-items: baseline; gap: 6px; } .tg-num b { font: 800 2rem var(--rounded, inherit); line-height: 1.05; letter-spacing: -.02em; } .tg-num span { font-size: .82rem; color: var(--muted); } .tg-pill { height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, #0A84FF 15%, transparent); color: #0A84FF; } .tg-pill.ok { background: color-mix(in srgb, #28BE55 16%, transparent); color: #28BE55; } .tg-track { position: relative; height: 26px; } .tg-track > i { position: absolute; top: 7px; height: 12px; border-radius: 999px; } .tg-lane { left: 0; width: 82%; background: var(--fill2); } .tg-fill { left: 0; background: #0A84FF; box-shadow: 0 0 10px rgba(10,132,255,.45); transition: width .8s cubic-bezier(.2,.8,.2,1); } .tg-goal.met .tg-fill { background: #28BE55; box-shadow: 0 0 12px rgba(40,190,85,.55); } .tg-blane { right: 0; width: 16%; background: rgba(252,209,22,.12); box-shadow: inset 0 0 0 1px rgba(252,209,22,.38); } .tg-bfill { left: 84%; background: linear-gradient(90deg, #FFE38A, #FCD116); box-shadow: 0 0 12px rgba(252,209,22,.5); } .tg-track > i.tg-tick { top: 3px; width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .22; } .tg-track > i.tg-tick.on { background: #fff; opacity: .55; } .tg-flag { position: absolute; left: 82%; top: -4px; transform: translateX(-4px); color: var(--muted); line-height: 0; } .tg-goal.met .tg-flag { color: #28BE55; filter: drop-shadow(0 0 4px rgba(40,190,85,.5)); } .tg-lbl { position: relative; height: 13px; font-size: .62rem; font-weight: 600; color: var(--muted); } .tg-lbl span { position: absolute; top: 0; white-space: nowrap; } .tg-lbl span.mid { transform: translateX(-50%); } .tg-lbl .bn { color: #D9A800; } :root[data-theme="dark"] .tg-lbl .bn { color: #FCD116; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg-lbl .bn { color: #FCD116; } } .todaycard .v1-today { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .todaycard .v1-stats { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; } .todaycard .v1-stat { min-height: 0; overflow: hidden; } /* in a multi-column row the Today card never sets the row height: it takes the height of its neighbours */ @media (min-width: 601px) { .grid > .todaycard { container: todayh / size; min-height: 340px; overflow: hidden; } .grid > .todaycard .v1-today, .grid > .todaycard .v1-stats { flex-basis: 0; } @container todayh (max-height: 380px) { .v1-th { margin-bottom: 8px; } .tg-goal { padding: 10px 12px; gap: 6px; } .tg-num b { font-size: 1.7rem; } .todaycard .v1-today { gap: 8px; } .todaycard .v1-stat { padding: 6px 11px; } .todaycard .v1-sc, .todaycard .v1-day em { display: none; } } @container todayh (max-height: 300px) { .tg-lbl { display: none; } .tg-goal { gap: 4px; } .todaycard .v1-day i { width: 11px; height: 11px; } .todaycard .v1-sb { gap: 3px; } } } /* ---------------- v19.7 livelier background: brighter aura, clearer cards, slow drift on every device except Android ---------------- */ :root { --aura: .43; } :root[data-theme="dark"] { --aura: .39; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aura: .39; } } /* cards use the same glass as the side panel so a hint of the background colour shows through (menus, modals, inputs stay solid) */ html body :is(.card, .lcat):not(.hero) { background-color: var(--lq-bg) !important; } @media (prefers-reduced-motion: no-preference) { html.bg-live .lg-blob.b1 { animation: lgDriftA 24s ease-in-out infinite; } html.bg-live .lg-blob.b2 { animation: lgDriftB 29s ease-in-out infinite; } html.bg-live .lg-blob.b3 { animation: lgDriftC 33s ease-in-out infinite; } } html:not(.bg-live) .lg-blob { animation: none !important; } /* ---------------- v19.8 unfinished exam card (under the welcome card) ---------------- */ html body .card.resume-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 26px; background-color: rgba(206,17,38,.92) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%, rgba(0,0,0,.08)) !important; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.18), 0 14px 32px -16px rgba(206,17,38,.75) !important; } :root[data-theme="dark"] .card.resume-card { background-color: rgba(120,14,26,.42) !important; background-image: linear-gradient(180deg, rgba(255,90,100,.14), rgba(255,255,255,0) 55%) !important; box-shadow: inset 0 1px 0 rgba(255,140,150,.22), inset 0 0 0 1px rgba(255,90,100,.28), 0 14px 32px -18px rgba(206,17,38,.6) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.resume-card { background-color: rgba(120,14,26,.42) !important; background-image: linear-gradient(180deg, rgba(255,90,100,.14), rgba(255,255,255,0) 55%) !important; box-shadow: inset 0 1px 0 rgba(255,140,150,.22), inset 0 0 0 1px rgba(255,90,100,.28), 0 14px 32px -18px rgba(206,17,38,.6) !important; } } .resume-card .rc-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .resume-card .rc-ic .ic { width: 24px; height: 24px; } .resume-card .rc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .resume-card .rc-k { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; } .resume-card .rc-t b { font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resume-card .rc-d { font-size: .82rem; opacity: .85; } html body .card.resume-card .btn.rc-go.rc-go.rc-go.rc-go { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 16px 0 18px; border-radius: 999px; border: 0; font-weight: 700; cursor: pointer; background: #fff !important; color: #B00E20 !important; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45) !important; } :root[data-theme="dark"] body .card.resume-card .btn.rc-go.rc-go.rc-go.rc-go { background: #E5283B !important; color: #fff !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .card.resume-card .btn.rc-go.rc-go.rc-go.rc-go { background: #E5283B !important; color: #fff !important; } } .resume-card .rc-go .ic { width: 18px; height: 18px; } @media (max-width: 600px) { html body .card.resume-card { flex-wrap: wrap; padding: 14px 16px; } .resume-card .rc-t { flex-basis: calc(100% - 60px); } html body .card.resume-card .btn.rc-go.rc-go.rc-go.rc-go { width: 100%; justify-content: center; } } /* ---------------- v19.8 someone's profile: card level with the side panel, Back pinned inside its top-left ---------------- */ .card.phero { position: relative; } .card.phero .uv-pin { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: var(--ink); z-index: 2; } .card.phero .uv-pin .ic { width: 22px; height: 22px; } /* v19.8: a little air between a bare page title (e.g. Settings) and the first card */ #view > .pg-title { margin-bottom: 14px; } /* ---------------- v19.8 desktop: the Messages button morphs into the Chats box (same bottom-right spot) and back ---------------- */ @media (min-width: 900px) { #m-launch { transition: transform .32s cubic-bezier(.3,1.3,.5,1), opacity .2s; } #msgr.panel-open #m-launch { opacity: 0; transform: scale(.4) !important; pointer-events: none; } html body #m-panel { right: 22px; bottom: 22px !important; height: min(560px, calc(100vh - 44px)); transform-origin: 100% 100%; animation: mMorphIn .34s cubic-bezier(.2,.9,.25,1.05); } html body #m-panel.m-closing { animation: mMorphOut .23s cubic-bezier(.4,0,.8,.4) forwards; pointer-events: none; } #msgr:not(.panel-open) #m-launch { animation: mPop .34s cubic-bezier(.3,1.4,.5,1); } } @media (min-width: 2100px) { html body #m-panel { right: calc((100vw - 2056px) / 2 + 22px) !important; } } @keyframes mMorphIn { from { transform: scale(.17, .11); border-radius: 50%; opacity: .3; } 60% { opacity: 1; } to { transform: none; opacity: 1; } } @keyframes mMorphOut { from { transform: none; opacity: 1; } to { transform: scale(.17, .11); border-radius: 50%; opacity: 0; } } @keyframes mPop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { html body #m-panel, html body #m-panel.m-closing, #m-launch { animation: none !important; } } /* ---------------- v19.8 phones: frosted fade behind the dock, clearer dock, Messages tabs take the dock's place ---------------- */ @media (max-width: 900px) { /* bottom-to-top gradient blur (mirrors the one under the header); it fades out at the dock's mid-line */ body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(41px + env(safe-area-inset-bottom)); z-index: 34; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--bg) 88%, transparent) 30%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); } body.in-chat::after { display: none; } /* dock glass 20% more see-through */ html body .dock .tabbar, html body .dock .tb-search, html body .dock .tb-sform { background-color: rgba(255,255,255,.45) !important; } :root[data-theme="dark"] body .dock .tabbar, :root[data-theme="dark"] body .dock .tb-search, :root[data-theme="dark"] body .dock .tb-sform { background-color: rgba(34,34,38,.45) !important; } /* Messages: no subtitle, no dock; Chats | People sits exactly where the dock was, same size and roundness */ body.on-msgs .dock { display: none !important; } body.on-msgs .mx-top .muted { display: none !important; } html body.on-msgs .mx-list .mx-tabs { position: fixed !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; box-sizing: border-box; bottom: calc(10px + env(safe-area-inset-bottom)); height: 62px; margin: 0 !important; padding: 4px !important; z-index: 35; border-radius: 999px !important; display: flex; align-items: stretch; gap: 4px; background-color: rgba(255,255,255,.45) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; backdrop-filter: blur(28px) saturate(180%) !important; box-shadow: var(--lq-rim, inset 0 0 0 1px rgba(255,255,255,.2)), var(--lq-shadow, 0 18px 40px -16px rgba(0,0,0,.5)) !important; } :root[data-theme="dark"] body.on-msgs .mx-list .mx-tabs { background-color: rgba(34,34,38,.45) !important; } html body.on-msgs .mx-list .mx-tabs > * { flex: 1 1 0; height: auto !important; border-radius: 999px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; } body.on-msgs .ml-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .dock .tabbar, :root:not([data-theme="light"]) body .dock .tb-search, :root:not([data-theme="light"]) body .dock .tb-sform, :root:not([data-theme="light"]) body.on-msgs .mx-list .mx-tabs { background-color: rgba(34,34,38,.45) !important; } } /* v19.8: background drift a little quicker and travelling a little further */ @keyframes lgDriftA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(12vw,9vh) scale(1.1); } 66% { transform: translate(-6vw,15vh) scale(.93); } } @keyframes lgDriftB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-15vw,12vh) scale(1.15); } } @keyframes lgDriftC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(13vw,-12vh) scale(.88); } } /* v19.9.3 phones: bottom bar glass at 45%, its icons at 80%; the search icon fully disappears while it morphs into × */ @media (max-width: 900px) { html body .dock .tabbar svg, html body .dock .tabbar .ic, html body .dock .tb-search .tb-x svg { opacity: .8 !important; } html body:not(.search-open) .dock .tb-search > svg { opacity: .8 !important; } html body.search-open .dock .tb-search > svg { opacity: 0 !important; visibility: hidden; transition: opacity .2s, transform .35s, visibility 0s .2s; } } /* ==== gs.css ==== */ /* v19 — Group Study Live (Liquid Glass) + desktop Messages glass */ .gs-glass { background-color: var(--lq-bg-strong, var(--glass-strong)) !important; background-image: var(--glass-sheen) !important; -webkit-backdrop-filter: var(--lq-blur, blur(24px)); backdrop-filter: var(--lq-blur, blur(24px)); box-shadow: var(--lq-rim, 0 0 0 1px var(--line)), var(--lq-hi, 0 0 0 0 transparent), var(--lq-shadow, 0 18px 40px -12px rgba(0,0,0,.35)) !important; border: 0; } :root { --gs-green: #1E9E47; } :root[data-theme="dark"] { --gs-green: #6FE08D; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gs-green: #6FE08D; } } .gs-live { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(52,199,89,.16); color: var(--gs-green); font: 700 12px var(--font, inherit); letter-spacing: .05em; flex: none; } .gs-live i { width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 3px rgba(52,199,89,.25); } @keyframes gs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,.55); } 50% { box-shadow: 0 0 0 5px rgba(52,199,89,0); } } .gs-ok { color: var(--gs-green); } /* layout */ .gs-wrap { display: flex; flex-direction: column; gap: 14px; padding-bottom: 96px; max-width: 980px; margin: 0 auto; } .gs-wrap > #gs-main { display: flex; flex-direction: column; gap: 14px; } .gs-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px !important; } .gs-hl { display: flex; align-items: center; gap: 12px; min-width: 0; } .gs-hl b { font-size: 1.05rem; } .gs-mems { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 2px; scrollbar-width: none; } .gs-mem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 54px; flex: none; } .gs-mem > span { font-size: 12px; font-weight: 600; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-mem > em { font-style: normal; font-size: 11px; color: var(--muted); } .gs-mem.fin > em { color: var(--gs-green); font-weight: 700; } .gs-crown { position: absolute; top: -9px; right: 2px; color: #FCD116; line-height: 0; } .gs-crown .ic { width: 16px; height: 16px; } .gs-crown.big { position: static; margin-bottom: -2px; } .gs-crown.big .ic { width: 28px; height: 28px; } /* avatars: speaking ring, muted badge */ .gs-av { position: relative; display: inline-block; border-radius: 50%; line-height: 0; flex: none; } .gs-av .avatar { margin: 0 !important; } .gs-av.on { box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 4px #34C759, 0 0 12px 2px rgba(52,199,89,.40); } .gs-av.gone { opacity: .4; } .gs-mute { position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #3A1D1D; color: #FF6B6B; box-shadow: 0 0 0 2px var(--bg, #fff); } .gs-mute .ic { width: 12px; height: 12px; } /* lobby */ .gs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .gs-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 14px; border-radius: 24px; background: var(--fill); text-align: center; } .gs-tile b { font-size: 16px; } .gs-rules ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .gs-lstart { text-align: center; padding: 6px 0; } .btn.gs-go { min-height: 54px; padding: 0 28px; font-size: 17px; border-radius: 999px; } /* lesson together */ .gs-lbar { position: sticky; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 18px; border-radius: 28px; background-color: var(--lq-bg-strong, var(--glass-strong)); background-image: var(--glass-sheen); -webkit-backdrop-filter: var(--lq-blur); backdrop-filter: var(--lq-blur); box-shadow: var(--lq-rim), var(--lq-shadow-sm, 0 10px 24px -12px rgba(0,0,0,.3)); } .gs-follow { display: flex; align-items: center; gap: 8px; font-weight: 600; } .gs-follow input { width: 20px; height: 20px; accent-color: #34C759; } /* answering */ .gs-qtop { display: flex; align-items: center; gap: 16px; } .gs-timer { position: relative; width: 80px; height: 80px; flex: none; } .gs-timer svg { display: block; } .gs-timer svg circle + circle { transition: stroke-dasharray .25s linear, stroke .3s; } .gs-timer > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .gs-timer b { font: 800 26px var(--rounded, inherit); } .gs-timer span { font-size: 11px; color: var(--muted); margin-top: 2px; } .gs-timer.low { animation: gs-low 1s ease-in-out infinite; } @keyframes gs-low { 50% { transform: scale(1.06); } } .gs-qmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .gs-count b { font-size: 1.05rem; } .gs-dots { display: flex; flex-wrap: wrap; gap: 6px; } .gs-dots button { width: 34px; height: 34px; border-radius: 11px; border: 0; background: var(--fill); color: var(--ink); font: 600 13px var(--font, inherit); cursor: pointer; transition: transform .15s; } .gs-dots button:hover:not(:disabled) { transform: translateY(-1px); } .gs-dots button.ans { background: rgba(10,132,255,.22); color: var(--ink); } .gs-dots button.lock { opacity: .42; } .gs-dots button.lock.ans { opacity: .7; } .gs-dots button.cur { box-shadow: inset 0 0 0 2px var(--ink); opacity: 1; } .gs-ddots button { background: color-mix(in srgb, #28BE55 calc(var(--ok) * 100%), #FF3B47) !important; color: #fff; opacity: .9; } .gs-ddots button:disabled { cursor: default; } .gs-qcard .choice { position: relative; } .gs-qcard .choice .ct { flex: 1; } .gs-picks { display: inline-flex; align-items: center; margin-left: auto; padding-left: 8px; } .gs-picks > .gs-av + .gs-av, .gs-picks > .gs-pw + .gs-pw { margin-left: -6px; } .gs-pw { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; } .gs-pw em { font-style: normal; font-size: 10px; color: var(--muted); line-height: 1.1; } .gs-pw + .gs-pw { margin-left: 4px !important; } .choice.gs-pick { box-shadow: inset 0 0 0 2px #0A84FF !important; background: rgba(10,132,255,.14) !important; } .gs-locked .choices { filter: grayscale(1); opacity: .5; } .gs-lockmsg { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 600; color: var(--muted); } .gs-lockmsg .ic { width: 16px; height: 16px; } .gs-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gs-nav #gs-fin, .gs-nav #gs-dnext, .gs-nav #gs-dfin, .gs-nav #gs-new { margin-left: auto; } .gs-none { margin-top: 10px; display: flex; align-items: center; gap: 6px; } .gs-none .ic { width: 16px; height: 16px; } /* waiting */ .gs-wait { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .gs-wait h2 { margin: 6px 0 0; } .gs-wlist { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; text-align: left; } .gs-wrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .gs-wrow .bar { flex: 1; } /* discussion */ .gs-dtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* results */ .gs-res { text-align: center; } .gs-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 26px 0 14px; } .gs-pod { width: 118px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .gs-pod.empty { visibility: hidden; } .gs-pod > b { font-size: 15px; } .gs-step { width: 100%; box-sizing: border-box; border-radius: 18px 18px 8px 8px; padding-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 50%, transparent), color-mix(in srgb, var(--mc) 8%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .gs-pod.r1 .gs-step { height: 150px; } .gs-pod.r2 .gs-step { height: 118px; } .gs-pod.r3 .gs-step { height: 92px; } .gs-pod.r1 .gs-av { box-shadow: 0 0 0 3px var(--bg, #fff), 0 0 0 6px #FCD116, 0 0 26px 4px rgba(252,209,22,.45); } .gs-step strong { font: 800 30px var(--rounded, inherit); line-height: 1; } .gs-step span { font-size: 13px; font-weight: 600; } .gs-step em { font-style: normal; font-size: 11px; color: var(--muted); } .gs-res .gs-wrow { text-align: left; } .gs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } .gs-kpis > div { background: var(--fill); border-radius: 16px; padding: 12px 8px; } .gs-kpis b { display: block; font: 800 1.2rem var(--rounded, inherit); } .gs-kpis span { font-size: 11px; color: var(--muted); } .gs-an1 { display: flex; align-items: center; gap: 18px; margin: 6px 0 12px; } .gs-aring { position: relative; width: 104px; height: 104px; flex: none; } .gs-aring svg { display: block; } .gs-aring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; } .gs-aring b { font: 800 1.6rem var(--rounded, inherit); } .gs-aring span { font-size: 11px; color: var(--muted); } .gs-mbars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; } .gs-mbar { display: flex; align-items: center; gap: 8px; } .gs-mbar .v1-bar { flex: 1; } .gs-mbar > b { width: 42px; text-align: right; font-size: 13px; } .gs-grid { display: grid; grid-template-columns: 28px repeat(var(--n), minmax(0, 1fr)); gap: 4px; align-items: center; } .gs-grid em { font-style: normal; font-size: 10px; text-align: center; color: var(--muted); font-weight: 700; } .gs-grid em.hard { color: #FF6B6B; } .gs-grid i, .gs-leg i { display: block; height: 20px; border-radius: 5px; } .gs-grid .ok, .gs-leg .ok { background: #2F9E52; } .gs-grid .no, .gs-leg .no { background: #D9534F; } .gs-grid .to, .gs-leg .to { background: var(--fill2); } .gs-leg { display: flex; gap: 14px; margin-top: 10px; } .gs-leg span { display: flex; align-items: center; gap: 5px; } .gs-leg i { width: 10px; height: 10px; border-radius: 3px; } .gs-tbar { margin: 10px 0; } .gs-tbar .v1-bar { margin-top: 6px; } .gs-focus { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(252,209,22,.10); box-shadow: inset 0 0 0 1.5px rgba(252,209,22,.45); } /* setup */ .gs-setup { display: flex; flex-direction: column; gap: 18px; } .gs-kind { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); } .gs-kind button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .gs-f > label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; } .gs-f select { width: 100%; } .gs-subj { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; font-size: 14px; } .gs-subj .ic { width: 22px; height: 22px; } .gs-chips { display: flex; flex-wrap: wrap; gap: 8px; } .gs-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--fill); color: var(--ink); font: 500 14px var(--font, inherit); cursor: pointer; transition: background .2s, transform .15s; } .gs-chip:hover { background: var(--fill2); } .gs-chip.on { background: color-mix(in srgb, var(--cc) 22%, transparent); box-shadow: inset 0 0 0 1.5px var(--cc); font-weight: 700; } .gs-chip .ic { width: 16px; height: 16px; } .gs-tog { display: flex; flex-direction: column; } .gs-sw { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; margin: 0 !important; color: var(--ink) !important; font-size: 15px !important; border-bottom: 1px solid var(--line); cursor: pointer; } .gs-sw:last-child { border-bottom: 0; } .gs-sw > span { display: flex; align-items: center; gap: 12px; } .gs-sw > span > span { display: flex; flex-direction: column; } .gs-sw b { font-weight: 600; } .gs-sw em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 400; } .gs-sw .ic { width: 22px; height: 22px; } .gs-sw input { width: 22px; height: 22px; accent-color: #34C759; flex: none; } .gs-setup .gs-go { align-self: center; min-width: min(100%, 320px); } .gs-join { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* group page card */ .gs-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .gs-ct { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; } .gs-ct b { font-size: 1.05rem; } /* floating voice bar */ .gs-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; width: min(460px, calc(100vw - 24px)); box-sizing: border-box; } .gs-bar button { border: 0; cursor: pointer; font: inherit; } .gs-mic, .gs-leave { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; transition: background .2s, transform .15s; } .gs-mic { background: rgba(52,199,89,.2); color: var(--gs-green); } .gs-mic.off { background: rgba(255,69,58,.16); color: #FF453A; } .gs-leave { background: #FF3B30; color: #fff; } .gs-mic:active, .gs-leave:active { transform: scale(.93); } .gs-mic .ic, .gs-leave .ic { width: 24px; height: 24px; } .gs-mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: transparent; color: var(--ink); text-align: left; padding: 0 4px; min-height: 44px; } .gs-talk { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-hear { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 61; } @media (min-width: 901px) { .gs-bar { left: auto; right: 24px; transform: none; width: 420px; bottom: 20px; } .gs-hear { left: auto; right: 24px; transform: none; bottom: 90px; } } @media (max-width: 900px) { body.in-gs .dock { display: none !important; } body.in-gs .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; } .gs-bar.away { bottom: calc(92px + env(safe-area-inset-bottom)); } .gs-head { padding: 10px 12px !important; } .gs-podium { gap: 8px; } .gs-pod { width: 30%; } .gs-an1 { flex-direction: column; align-items: stretch; } .gs-aring { align-self: center; } .gs-nav .btn { flex: 1 1 auto; } } /* invite ring */ .gs-ring { position: fixed; left: 50%; transform: translateX(-50%); top: calc(76px + env(safe-area-inset-top)); z-index: 70; width: min(540px, calc(100vw - 24px)); box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 24px; animation: gs-drop .45s cubic-bezier(.2,.9,.3,1.2); } @keyframes gs-drop { from { transform: translate(-50%, -30px); opacity: 0; } } .gs-rpulse { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #34C759; color: #fff; flex: none; box-shadow: 0 0 16px rgba(52,199,89,.5); } .gs-rpulse .ic { width: 22px; height: 22px; } .gs-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gs-rt b { font-size: 14px; } .gs-rt > span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-rx { width: 36px !important; height: 36px !important; } @media (min-width: 901px) { .gs-ring { top: 20px; } } @media (prefers-reduced-motion: reduce) { .gs-live i, .gs-rpulse, .gs-timer.low { animation: none; } } /* ---------------- desktop Messages: same glass as the side panel ---------------- */ @media (min-width: 901px) { .mx-list.ml-page, .mx-conv.embedded, .mx-pane:has(.mx-empty) { background-color: var(--lq-bg, rgba(34,34,40,.46)) !important; background-image: var(--glass-sheen) !important; -webkit-backdrop-filter: var(--lq-blur-soft, var(--lq-blur)) !important; backdrop-filter: var(--lq-blur-soft, var(--lq-blur)) !important; } } /* ---------------- v19.1 ---------------- */ /* my pick: unmistakable blue highlight + check */ html body .gs-qcard .choices .choice.gs-pick { background: rgba(10,132,255,.18) !important; background-color: rgba(10,132,255,.18) !important; background-image: none !important; box-shadow: inset 0 0 0 2px #0A84FF, 0 6px 18px -8px rgba(10,132,255,.55) !important; } html body .gs-qcard .choices .choice.gs-pick .k { background: #0A84FF !important; color: #fff !important; } .gs-mine { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #0A84FF; color: #fff; flex: none; } .gs-mine .ic { width: 16px; height: 16px; } /* glow behind the session: green leaking from LIVE, blue while answering */ .gs-wrap { position: relative; } .gs-wrap > *:not(.gs-glow) { position: relative; z-index: 1; } .gs-glow { position: fixed; top: 0; left: 0; right: 0; height: 460px; pointer-events: none; z-index: 0; background: radial-gradient(340px 260px at 56px 20px, rgba(52,199,89,.30), transparent 72%); } .gs-lobby .gs-glow { background: radial-gradient(360px 280px at calc(100% - 60px) 18px, rgba(52,199,89,.30), transparent 72%); } .gs-answer:not(.gs-fin) .gs-glow { background: radial-gradient(420px 300px at 50% 70px, rgba(0,56,168,.42), transparent 72%), radial-gradient(260px 200px at 56px 20px, rgba(52,199,89,.18), transparent 72%); } :root[data-theme="light"] .gs-glow { opacity: .7; } @media (min-width: 901px) { .gs-glow { left: 320px; } } /* phones: session header replaces profile / bell / chat */ .gs-mtop { display: none; } @media (max-width: 900px) { body.in-gs .mobilebar { display: none !important; } body.in-gs .main { padding-top: calc(10px + env(safe-area-inset-top)) !important; } .gs-head { display: none !important; } .gs-mtop { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 46px; margin-bottom: 2px; } .gs-mtitle { text-align: center; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gs-mlive { height: 34px; padding: 0 14px; font-size: 14px; } .gs-mtopic { font-size: 14px; color: var(--muted); text-align: right; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-stack { display: flex; justify-content: flex-end; align-items: center; } .gs-stack > .gs-av + .gs-av { margin-left: -8px; } .gs-stack .gs-av.on { box-shadow: 0 0 0 2px var(--bg, #000), 0 0 0 3.5px #34C759; } .gs-more { margin-left: 4px; font-size: 12px; color: var(--muted); font-weight: 700; } .gs-back { width: auto !important; height: 46px !important; padding: 0 16px 0 10px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; gap: 2px; font-weight: 600; color: var(--ink); text-decoration: none; } .gs-back .ic { width: 22px; height: 22px; } .gs-lobby .gs-mtop > span:nth-child(2) { display: block; } } .gs-ltitle h1 { margin: 0; font-size: 1.9rem; } .gs-ltitle p { margin: 4px 0 0; } /* lobby tiles */ .gs-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } @media (max-width: 600px) { .gs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gs-tile { background-color: var(--lq-bg, var(--fill)); background-image: var(--glass-sheen); box-shadow: var(--lq-rim), var(--lq-shadow-sm, none); min-height: 176px; justify-content: center; } .gs-tav { position: relative; display: inline-block; } .gs-micb { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1C3B26; color: #6FE08D; box-shadow: 0 0 0 2px var(--bg, #000); } .gs-micb.off { background: #3A1D1D; color: #FF6B6B; } .gs-micb .ic { width: 16px; height: 16px; } .btn.gs-startb { width: 100%; min-height: 56px; font-size: 17px; font-weight: 700; } /* group picker */ .gs-gpick { display: flex; flex-direction: column; gap: 6px; } .gs-gp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 16px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .gs-gp:hover { background: var(--fill); } .gs-gp > span { flex: 1; display: flex; flex-direction: column; } .gs-gp em { font-style: normal; font-size: 12px; color: var(--muted); } .gs-pcard { margin-bottom: 16px; } /* ---------------- flashcards: a stacked deck ---------------- */ .fc-stack { position: relative; padding-top: 30px; } .fc-stack .fc-layer { position: absolute; top: 0; height: 60px; border-radius: 22px 22px 0 0; background: color-mix(in srgb, var(--ink) 12%, var(--bg, #fff)); box-shadow: var(--lq-rim, 0 0 0 1px rgba(0,0,0,.05)); pointer-events: none; } .fc-stack .fc-layer.l3 { top: 0; left: 15%; right: 15%; background: color-mix(in srgb, var(--ink) 26%, var(--bg, #fff)); } .fc-stack .fc-layer.l2 { top: 10px; left: 10%; right: 10%; background: color-mix(in srgb, var(--ink) 19%, var(--bg, #fff)); } .fc-stack .fc-layer.l1 { top: 20px; left: 5%; right: 5%; background: color-mix(in srgb, var(--ink) 12%, var(--bg, #fff)); } .fc-stack .fc-card3 { position: relative; z-index: 2; } .fc-card3.fc-out-r { animation: fc-out-r .3s ease-in forwards; } .fc-card3.fc-out-l { animation: fc-out-l .3s ease-in forwards; } @keyframes fc-out-r { to { transform: translate(120%, 30px) rotate(12deg); opacity: 0; } } @keyframes fc-out-l { to { transform: translate(-120%, 30px) rotate(-12deg); opacity: 0; } } .fc-card3.fc-in { animation: fc-in .38s cubic-bezier(.2,.9,.3,1.1); } @keyframes fc-in { from { transform: translateY(-20px) scale(.9); opacity: .6; } } .fc-stack .fc-layer { transition: none; } @media (prefers-reduced-motion: reduce) { .fc-card3.fc-in, .fc-card3.fc-out-r, .fc-card3.fc-out-l { animation: none; } } /* grade buttons: tinted liquid-glass rounded squares */ .fc-grades { gap: 10px; } .fc-g { aspect-ratio: 1 / .82; justify-content: center; border-radius: 22px !important; --t: 120,120,128; background: linear-gradient(180deg, rgba(var(--t), .26), rgba(var(--t), .12)) !important; color: rgb(var(--t)) !important; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(var(--t), .35), inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px -10px rgba(var(--t), .6) !important; transition: transform .15s, filter .2s; } .fc-g:active:not(:disabled) { transform: scale(.95); } .fc-g b { font-size: 1.02rem; color: inherit !important; } .fc-g span { color: inherit !important; opacity: .75; } .fc-g.g-again { --t: 255,59,48; } .fc-g.g-hard { --t: 212,160,23; } .fc-g.g-good { --t: 40,190,85; } .fc-g.g-easy { --t: 10,132,255; } .fc-grades.wait .fc-g { filter: saturate(.4); } /* ---------------- notifications: faint separators ---------------- */ .n-list > .n-sw + .n-sw::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: currentColor; opacity: .08; z-index: 3; pointer-events: none; } .n-list > .n-sw + .n-sw { margin-top: 4px; padding-top: 4px; } .gs-mob { display: none; } @media (max-width: 900px) { .gs-dsk { display: none !important; } .gs-mob { display: block; } } /* flashcard grades v2: saturated tinted liquid glass (white label, inner light, coloured glow) */ .fc-g { color: #fff !important; background: linear-gradient(180deg, rgba(var(--t), .92) 0%, rgba(var(--t), .80) 100%) !important; -webkit-backdrop-filter: blur(20px) saturate(190%); backdrop-filter: blur(20px) saturate(190%); box-shadow: inset 0 1.5px 1px rgba(255,255,255,.55), inset 0 -4px 10px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 26px -10px rgba(var(--t), .75), 0 2px 6px -2px rgba(var(--t), .45) !important; } .fc-g b { font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 1px rgba(0,0,0,.18); } .fc-g span { opacity: .88; } .fc-g.g-again { --t: 235,52,64; } .fc-g.g-hard { --t: 196,142,10; } .fc-g.g-good { --t: 30,160,72; } .fc-g.g-easy { --t: 10,122,245; } .fc-grades.wait .fc-g { filter: saturate(.55) brightness(.95); opacity: .6; } /* ---------------- v19.2 talking indicator (approved mockup) ---------------- */ /* quiet but here: thin steady green outline; muted: no ring; joining/dropped: faded */ .gs-av.on { box-shadow: 0 0 0 2px var(--bg, #fff), 0 0 0 3.5px rgba(52,199,89,.75) !important; } .gs-av.on.muted { box-shadow: none !important; } /* talking: green ring gently pulses (the photo itself never moves or redraws) */ .gs-av.talk::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid #34C759; animation: gs-talk 1.5s ease-in-out infinite; pointer-events: none; z-index: 2; } .gs-av.talk { box-shadow: none !important; } .gs-stack .gs-av.talk::before, .gs-picks .gs-av.talk::before, .gs-mbar .gs-av.talk::before, .gs-wrow .gs-av.talk::before { inset: -4px; border-width: 2px; } @keyframes gs-talk { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .6; } } .talkn { color: #34C759 !important; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .gs-av.talk::before { animation: none; } } /* results: warm yellow light behind the podium */ .gs-done .gs-glow { height: 720px; background: radial-gradient(480px 360px at 50% 230px, rgba(252,209,22,.26), transparent 72%), radial-gradient(260px 200px at 56px 20px, rgba(52,199,89,.14), transparent 72%); } html body .card.gs-res { background-image: radial-gradient(380px 280px at 50% 200px, rgba(252,209,22,.22), transparent 72%), var(--glass-sheen) !important; } :root[data-theme="light"] html body .card.gs-res, :root[data-theme="light"] .card.gs-res { background-image: radial-gradient(380px 280px at 50% 200px, rgba(252,209,22,.30), transparent 72%), var(--glass-sheen) !important; } @media (min-width: 901px) { .gs-done .gs-glow { background: radial-gradient(620px 420px at 50% 260px, rgba(252,209,22,.24), transparent 72%); } } /* podium photos keep their medal rings (gold / silver / bronze) */ html body .gs-pod .gs-av, html body .gs-pod .gs-av.on { box-shadow: 0 0 0 3px var(--bg, #fff), 0 0 0 5.5px var(--mc) !important; } html body .gs-pod.r1 .gs-av, html body .gs-pod.r1 .gs-av.on { box-shadow: 0 0 0 3px var(--bg, #fff), 0 0 0 6px #FCD116, 0 0 28px 6px rgba(252,209,22,.5) !important; } /* v19.8 phones: no LIVE pill in the call bar while you're in the session (LIVE already sits top-left); answer buttons: Prev pinned left · Finish centre · Skip/Next pinned right */ @media (max-width: 900px) { .gs-bar:not(.away) .gs-live { display: none !important; } .gs-nav.gs-anav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .gs-nav.gs-anav .btn { margin: 0 !important; justify-content: center; min-width: 0; } .gs-nav.gs-anav #gs-prev { order: 1; } .gs-nav.gs-anav #gs-fin { order: 2; } .gs-nav.gs-anav #gs-next { order: 3; } } /* v19.46 rejoin card (Home, Notifications, Friends) */ .gs-rejoin { display: flex !important; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px !important; border: 1px solid rgba(247,181,0,.45); background-image: linear-gradient(135deg, rgba(247,181,0,.14), rgba(10,132,255,.06)) !important; } .gs-rjl { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(247,181,0,.2); color: #c99400; flex: none; animation: gsRjPulse 1.8s ease-in-out infinite; } .gs-rjl .ic { width: 26px; height: 26px; } @keyframes gsRjPulse { 50% { box-shadow: 0 0 0 8px rgba(247,181,0,.12); } } .gs-rjt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; } .gs-rjb { display: flex; gap: 8px; align-items: center; } @media (max-width: 600px) { .gs-rjb { width: 100%; } .gs-rjb .btn.gold { flex: 1; justify-content: center; } } /* ==== v199.css ==== */ /* v19.9 */ /* ---------------- Mock: exam-day simulation ---------------- */ .card.simcard { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .simcard .sim-l { display: flex; align-items: center; gap: 14px; min-width: 0; } .simcard .btn { flex: none; } @media (max-width: 700px) { .card.simcard { flex-direction: column; align-items: stretch; } .simcard .btn { width: 100%; justify-content: center; } } .simrules ul { margin: 8px 0 14px; padding-left: 18px; line-height: 1.55; } .simclock { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 999px; font: 700 .95rem var(--rounded, inherit); letter-spacing: .02em; background: rgba(206,17,38,.14); color: #E5283B; box-shadow: inset 0 0 0 1px rgba(206,17,38,.3); margin-right: 6px; } body.in-sim .examlayout .progress, body.in-sim .qslider { display: none !important; } body.in-sim .qn-num { pointer-events: none; opacity: .9; } .card.verdict { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 18px; margin-bottom: 12px; } .verdict .vd-k { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .verdict .vd-v { font: 900 clamp(2.4rem, 7vw, 3.6rem) var(--rounded, inherit); letter-spacing: .06em; line-height: 1.05; } .verdict.ok .vd-v { color: #28BE55; text-shadow: 0 0 28px rgba(40,190,85,.35); } .verdict.no .vd-v { color: #E5283B; text-shadow: 0 0 28px rgba(229,40,59,.3); } .verdict .vd-r { font-size: 1rem; } .verdict .vd-d { font-size: .85rem; color: var(--muted); } /* ---------------- Practice: timed section ---------------- */ .timed-subj { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; } .timed-subj .topic { text-align: left; } .timed-subj .t { display: inline-flex; align-items: center; gap: 8px; } .qd-timer.cd.low, #hdr-timer.low { color: #E5283B !important; } /* ---------------- spaced review grades ---------------- */ .rv-grade { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; } .rv-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .rv-grades .fc-g.on { outline: 2px solid currentColor; outline-offset: 2px; } /* ---------------- weak-topic recap ---------------- */ .recap .recap-b { max-height: 46vh; overflow: auto; padding: 12px 14px; border-radius: 16px; background: var(--fill); font-size: .92rem; line-height: 1.55; } .recap .recap-b ul, .recap .recap-b ol { margin: 0; padding-left: 18px; } .recap .sheet-btns { margin-top: 14px; } /* ---------------- Exam & Plan tabs ---------------- */ .people-tabs.ep-tabs { display: inline-flex; width: auto; max-width: 100%; margin: 0 0 14px; gap: 4px; padding: 4px; border-radius: 999px; } .people-tabs.ep-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 999px; } .people-tabs.ep-tabs a .ic { width: 18px; height: 18px; } /* ---------------- groups: last week's top ---------------- */ .lw-champ { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 0 10px; border-radius: 14px; background: rgba(252,209,22,.12); font-size: .85rem; } .lw-champ .ic { width: 20px; height: 20px; } /* ---------------- admin ---------------- */ .qq-list { display: flex; flex-direction: column; gap: 6px; } .qq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; } .qq-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .qq-t b { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .qq-rep { color: #E5283B; } .bk-mail { margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--fill); } .switch { position: relative; flex: none; width: 50px; height: 30px; display: inline-block; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--fill2); transition: background .2s; pointer-events: none; } .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .25s cubic-bezier(.3,1.3,.5,1); } .switch input:checked + span { background: #28BE55; } .switch input:checked + span::after { transform: translateX(20px); } .switch input:focus-visible + span { outline: 2px solid #0A84FF; outline-offset: 2px; } /* ---------------- Settings: effects ---------------- */ .fx-field .seg { display: inline-flex; } html.fx-lite .lg-blob { animation: none !important; } html.fx-lite { --lq-blur: blur(18px) saturate(160%); --lq-blur-soft: blur(22px) saturate(160%); } html.fx-lite .plan-cta .pc-ring, html.fx-lite .plan-cta .pc-sweep { animation: none !important; } /* ---------------- accessibility ---------------- */ :where(a, button, summary, [tabindex]:not(input):not(textarea)):focus-visible { outline: 2.5px solid #0A84FF !important; outline-offset: 2px !important; } /* text fields (search bars included) keep their own soft focus look, no blue ring */ html body :is(input, textarea, select):focus, html body :is(input, textarea, select):focus-visible { outline: none !important; } .skip-main { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 999px; background: #0A84FF; color: #fff; font-weight: 700; text-decoration: none; transition: top .2s; } .skip-main:focus { top: calc(10px + env(safe-area-inset-top)); } /* a touch more contrast for small grey text now that the cards are clearer */ :root { --muted: #5F5F66; } :root[data-theme="dark"] { --muted: #A6A6AE; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --muted: #A6A6AE; } } html body .rv-grades .fc-g { aspect-ratio: auto !important; height: 64px !important; min-height: 0 !important; padding: 8px 4px !important; border-radius: 16px !important; } .qq-prev { max-height: 88vh; overflow: auto; } /* temporary admins */ .ta-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .ta-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; } .ta-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--fill); } .ta-add select { flex: 1 1 220px; min-width: 0; } .ta-add .seg { display: inline-flex; flex-wrap: wrap; } .ta-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 4px 0 12px; border-radius: 16px; background: rgba(252,209,22,.12); font-size: .86rem; } .ta-note .ic { flex: none; width: 20px; height: 20px; color: #D9A800; } @media (max-width: 600px) { .ta-row { grid-template-columns: auto minmax(0, 1fr); } .ta-row .btn { grid-column: span 1; } } /* v19.9.2 search: result tabs */ .people-tabs.s-tabs { display: inline-flex; width: auto; max-width: 100%; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; } .people-tabs.s-tabs::-webkit-scrollbar { display: none; } .people-tabs.s-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; } .people-tabs.s-tabs a span { font-size: .72rem; font-weight: 700; opacity: .7; } .sres .s-more { margin-top: 10px; } /* v19.9.2 admin lists: a faint line between items */ .qq-list .qq-row + .qq-row, #rp-list > * + *, .qq-page .qq-row + .qq-row { border-top: 1px solid rgba(128,128,140,.14); border-radius: 0; } .qq-list, #rp-list { gap: 0 !important; } .qq-list .qq-row, #rp-list > * { padding-top: 10px; padding-bottom: 10px; } .card.kb-new { margin-bottom: 14px; } .card.kb-new .spread { gap: 14px; flex-wrap: wrap; } /* v19.9.5 installed app: no double-tap zoom, no text-size inflation */ html.standalone, html.standalone body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* v19.9.6 installed app: no visible scroll bars anywhere (scrolling still works) */ html.standalone, html.standalone * { scrollbar-width: none !important; -ms-overflow-style: none !important; } html.standalone::-webkit-scrollbar, html.standalone *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* v19.10 Kaya suggestion chips */ .kx-chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; } .kx-chip { appearance: none; border: 0; cursor: pointer; font-family: inherit; font-size: .84rem; font-weight: 600; line-height: 1.2; color: #0A84FF; padding: 7px 12px; border-radius: 999px; background: rgba(10,132,255,.1); box-shadow: inset 0 0 0 1px rgba(10,132,255,.28); transition: background .15s, transform .15s; text-align: left; } .kx-chip:hover { background: rgba(10,132,255,.18); } .kx-chip:active { transform: scale(.96); } :root[data-theme="dark"] .kx-chip { color: #4DA3FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kx-chip { color: #4DA3FF; } } .kaya-bub { white-space: normal; } /* v19.10.1 phones: top bar bubbles (photo ring, name, bell, messages) glass at 40%; name text and icons at 80%. Beats lg15's ":root .lg-on.lg-on.lg-on" gradient, which is what actually paints these bubbles. */ @media (max-width: 900px) { :root body .mobilebar .hdr-me .mav.mav.mav.mav, :root body .mobilebar .hdr-me .mname.mname.mname.mname, :root body .mobilebar .hdr-ics > a.gl-circle.gl-circle.gl-circle.gl-circle { background-color: transparent !important; background-image: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.44)) !important; } :root[data-theme="dark"] body .mobilebar .hdr-me .mav.mav.mav.mav, :root[data-theme="dark"] body .mobilebar .hdr-me .mname.mname.mname.mname, :root[data-theme="dark"] body .mobilebar .hdr-ics > a.gl-circle.gl-circle.gl-circle.gl-circle { background-image: linear-gradient(180deg, rgba(30,30,36,.36), rgba(30,30,36,.44)) !important; } :root body .mobilebar .hdr-me .mname.mname.mname.mname { color: rgba(23,23,26,.8) !important; } :root[data-theme="dark"] body .mobilebar .hdr-me .mname.mname.mname.mname { color: rgba(244,244,246,.8) !important; } :root body .mobilebar .hdr-ics > a.gl-circle > svg { opacity: .8 !important; } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .mobilebar .hdr-me .mav.mav.mav.mav, :root:not([data-theme="light"]) body .mobilebar .hdr-me .mname.mname.mname.mname, :root:not([data-theme="light"]) body .mobilebar .hdr-ics > a.gl-circle.gl-circle.gl-circle.gl-circle { background-image: linear-gradient(180deg, rgba(30,30,36,.36), rgba(30,30,36,.44)) !important; } :root:not([data-theme="light"]) body .mobilebar .hdr-me .mname.mname.mname.mname { color: rgba(244,244,246,.8) !important; } } /* v19.11 Kaya AI */ .kx-ai { margin: 4px 2px 0; font-size: .7rem; color: var(--muted); letter-spacing: .01em; } .ai-grid { display: grid; gap: 6px; margin-top: 10px; } .ai-grid .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ai-grid label { margin-top: 4px; } .ai-set > .spread { flex-wrap: nowrap; gap: 14px; } /* v19.11.2 phones: when the bell / chat icon morphs into ×, the icon is fully gone (the 80% icon rule no longer keeps it visible) */ @media (max-width: 900px) { :root body .mobilebar .hdr-ics > a.gl-circle.hdr-morph.is-x > svg { opacity: 0 !important; visibility: hidden; transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .2s, visibility 0s .2s; } :root body .mobilebar .hdr-ics > a.gl-circle.hdr-morph.is-x .nb-x { opacity: .8 !important; } } /* v19.11.3 installed app: no rubber-band bounce (iOS 16+ honours overscroll-behavior; older iOS uses the touch guard in index.html) */ html.standalone, html.standalone body { overscroll-behavior: none; } html.standalone * { overscroll-behavior-y: none; } /* v19.12 unfinished session: card buttons + note, pinned notification, prompts, 2027 announcement */ .resume-card .rc-n { font-size: .74rem; opacity: .78; margin-top: 2px; line-height: 1.35; } .resume-card .rc-btns { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; } html body .card.resume-card .btn.rc-x.rc-x.rc-x { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; font-weight: 600; font-size: .85rem; cursor: pointer; justify-content: center; background: rgba(255,255,255,.16) !important; color: inherit !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3) !important; } @media (max-width: 600px) { .resume-card .rc-btns { width: 100%; flex-direction: row; } html body .card.resume-card .rc-btns .btn.rc-go.rc-go.rc-go.rc-go { width: auto; flex: 1 1 auto; min-width: 0; } html body .card.resume-card .btn.rc-x.rc-x.rc-x { height: 42px; flex: 0 0 auto; padding: 0 18px; } } .n-act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; margin: -4px -4px 8px; border-radius: 18px; background: rgba(229,40,59,.1); box-shadow: inset 0 0 0 1px rgba(229,40,59,.25); } .n-act .n-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .n-act .n-txt > span:first-of-type { font-size: .86rem; } .n-act-b { display: flex; flex-direction: column; gap: 6px; } @media (max-width: 600px) { .n-act { grid-template-columns: auto minmax(0, 1fr); } .n-act-b { grid-column: 1 / -1; flex-direction: row; } .n-act-b .btn { flex: 1; justify-content: center; } } .rs-modal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .rs-modal h2 { margin: 6px 0 0; } .rs-modal .rs-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(229,40,59,.14); color: #E5283B; } .rs-modal .rs-ic .ic { width: 26px; height: 26px; } .rs-modal .sheet-btns { width: 100%; display: flex !important; flex-direction: column !important; gap: 8px; margin-top: 8px; } html body .rs-modal .sheet-btns .btn { flex: 0 0 auto !important; height: 48px !important; min-height: 0 !important; width: 100%; justify-content: center; } .news-item.kb-ann { align-items: flex-start; background: rgba(10,132,255,.08); border-radius: 16px; padding: 12px; margin-bottom: 8px; } .kb-ann-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } /* v19.12.1 desktop: unfinished-session prompt buttons are rounded rectangles, side by side */ @media (min-width: 601px) { .rs-modal .sheet-btns { flex-direction: row !important; } html body .rs-modal .sheet-btns .btn { flex: 1 1 0 !important; width: auto; border-radius: 14px !important; } } /* v19.13 devices */ .dl-box { margin: 10px 0; padding: 12px; border-radius: 16px; background: rgba(229,40,59,.08); box-shadow: inset 0 0 0 1px rgba(229,40,59,.22); text-align: left; } .dl-list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; width: 100%; } .dl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; } .dl-row + .dl-row { border-top: 1px solid rgba(128,128,140,.14); } .dl-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .dl-t b { font-size: .92rem; } .dv-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--fill); } .dv-ic .ic { width: 22px; height: 22px; } .dv-live { color: #28BE55; font-weight: 700; } .inuse-ov { z-index: 2000; } /* v19.14 gliding highlight for tab toggles */ .gl-glider { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; will-change: transform, width; transition: transform .38s cubic-bezier(.3,1.2,.45,1), width .38s cubic-bezier(.3,1.2,.45,1), height .38s ease, opacity .2s; } .has-glide > :not(.gl-glider) { position: relative; z-index: 1; } html body .has-glide > .gl-glider.gl-glider { position: absolute !important; left: 0 !important; top: 0 !important; width: var(--gw, 0) !important; height: var(--gh, 0) !important; flex: none !important; margin: 0 !important; padding: 0 !important; display: block !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; border: 0 !important; } html body .has-glide.has-glide.has-glide > .on.on { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* v19.14 phones: the bell / chat button in its (×) state is red liquid glass (40%), the × at 80% */ @media (max-width: 900px) { :root body .mobilebar .hdr-ics > a.gl-circle.gl-circle.gl-circle.gl-circle.hdr-morph.is-x { background-color: transparent !important; background-image: linear-gradient(180deg, rgba(240,52,70,.36), rgba(206,17,38,.44)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,120,130,.45), 0 8px 20px -10px rgba(206,17,38,.55) !important; } :root[data-theme="dark"] body .mobilebar .hdr-ics > a.gl-circle.gl-circle.gl-circle.gl-circle.hdr-morph.is-x { background-image: linear-gradient(180deg, rgba(150,20,34,.36), rgba(105,10,22,.44)) !important; box-shadow: inset 0 1px 0 rgba(255,140,150,.25), inset 0 0 0 1px rgba(255,90,100,.3), 0 8px 20px -10px rgba(0,0,0,.6) !important; } :root body .mobilebar .hdr-ics > a.gl-circle.hdr-morph.is-x .nb-x { color: #fff; } :root body .mobilebar .hdr-ics > a.gl-circle.hdr-morph { transition: background-image .3s, box-shadow .3s, background-color .3s; } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .mobilebar .hdr-ics > a.gl-circle.gl-circle.gl-circle.gl-circle.hdr-morph.is-x { background-image: linear-gradient(180deg, rgba(150,20,34,.36), rgba(105,10,22,.44)) !important; box-shadow: inset 0 1px 0 rgba(255,140,150,.25), inset 0 0 0 1px rgba(255,90,100,.3), 0 8px 20px -10px rgba(0,0,0,.6) !important; } } /* v19.15 phones: name button → "‹ Back" on your own profile */ .mobilebar .mname .mb-back { display: none; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 650; } .mobilebar .mname .mb-back .ic { width: 18px; height: 18px; } .mobilebar .mname.is-back { padding: 0 18px 0 12px; } .mobilebar .mname.is-back .mb-back { display: inline-flex; animation: mbIn .25s ease; } .mobilebar .mname.is-back > :not(.mb-back) { display: none !important; } @keyframes mbIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } } /* v19.16 theme button on the welcome card: faint glass circle, icon at low opacity; moon ⇄ sun morph */ html body .card.hero .hero-theme { position: absolute; z-index: 6; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: block; background: rgba(255,255,255,.07) !important; color: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important; -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); transition: transform .2s, background .25s; -webkit-tap-highlight-color: transparent; } html body .card.hero .hero-theme:hover { background: rgba(255,255,255,.12) !important; } html body .card.hero .hero-theme:active { transform: scale(.9); } .hero-theme .ht-i { position: absolute; inset: 0; display: grid; place-items: center; opacity: .6; transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.3,.5,1); } .hero-theme .ht-i .ic { width: 22px; height: 22px; } .hero-theme .ht-sun { opacity: 0; transform: rotate(-90deg) scale(.4); } .hero-theme.is-dark .ht-moon { opacity: 0; transform: rotate(90deg) scale(.4); } .hero-theme.is-dark .ht-sun { opacity: .6; transform: none; } @media (max-width: 900px) { html body .card.hero .hero-theme { right: 18px; bottom: 18px; } } @media (min-width: 901px) { html body .card.hero .hero-theme { right: 18px; top: 18px; } } @media (prefers-reduced-motion: reduce) { .hero-theme .ht-i { transition: opacity .2s; } } /* v19.16.1: theme button 30% smaller (44 → 31px), icon 22 → 16px */ html body .card.hero .hero-theme { width: 31px; height: 31px; } .hero-theme .ht-i .ic { width: 16px; height: 16px; } @media (max-width: 900px) { html body .card.hero .hero-theme { right: 20px; bottom: 24px; } } @media (min-width: 901px) { html body .card.hero .hero-theme { right: 20px; top: 20px; } } /* v19.16.2: no nested blur on the theme button (Safari can drop blurred layers inside a blurred card) */ html body .card.hero .hero-theme { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ==== v1917.css ==== */ /* v19.17 */ /* group study: call bar bottom-left on desktop (right of the side panel), leaving the Messages button free */ @media (min-width: 901px) { html body .gs-bar { left: calc(var(--side-r, 290px) + 20px) !important; right: auto !important; transform: none !important; width: min(420px, calc(100vw - var(--side-r, 290px) - 130px)) !important; bottom: 22px !important; } html body .gs-hear { left: calc(var(--side-r, 290px) + 20px) !important; right: auto !important; } } .gs-bar .gs-live { display: none !important; } /* group study: 3-2-1 */ .gs-cd { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(5,8,20,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .25s; } .gs-cd.out { opacity: 0; } .gs-cdn { width: 190px; height: 190px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 0 60px rgba(80,140,255,.45); } .gs-cdn b { font: 900 108px/1 var(--rounded, inherit); } .gs-cdn span { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; } .gs-cdn b.pop { animation: gsPop .45s cubic-bezier(.3,1.5,.5,1); } @keyframes gsPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } /* group study: players & coaches, change topic */ .gs-topicrow { display: flex; justify-content: flex-start; margin: -6px 0 12px; } .gs-roles { margin-top: 12px; } .gs-rrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 34px; align-items: center; gap: 10px; padding: 10px 0; } .gs-rrow + .gs-rrow, .gs-roles .spread + .gs-rrow { border-top: 1px solid rgba(128,128,140,.14); } .gs-rname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-rseg { flex: none; } .gs-rseg button { padding: 6px 12px !important; font-size: .8rem !important; } .gs-kick { width: 34px !important; height: 34px !important; color: #E5283B !important; } .gs-kick .ic { width: 16px; height: 16px; } .gs-coachp { vertical-align: 1px; } .gs-x { margin-top: 10px; } /* mock: exam-day rules switch on the Full mock card (replaces the separate simulation card) */ .simtog { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 16px; background: rgba(128,128,140,.08); cursor: pointer; } .simtog-t { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .simtog-t > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .simtog-t .ic { flex: none; margin-top: 2px; } .simtog .switch { flex: none; } /* sign-up: terms checkbox */ .terms-chk { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 2px; text-align: left; line-height: 1.4; cursor: pointer; } .terms-chk input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: #0A84FF; } /* payment card */ .pay-qr { background: #fff; border-radius: 22px; padding: 12px; margin: 12px auto; max-width: 260px; box-shadow: 0 8px 30px rgba(0,0,0,.12); } .pay-qr .pay-ip { height: 34px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; } .pay-qr .pay-code { width: 232px; height: 232px; max-width: 100%; display: block; margin: 0 auto; } .pay-ref { letter-spacing: .25em; font-variant-numeric: tabular-nums; font-size: 1.1rem !important; } .pay-file { cursor: pointer; } .pay-prev { display: block; max-height: 180px; max-width: 100%; margin: 8px auto 0; border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .pay-note { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(255,149,0,.14); font-size: .85rem; margin: 8px 0; } .pay-note .ic { flex: none; margin-top: 2px; color: #FF9500; } /* Terms & Privacy */ .legal-modal { max-width: 620px !important; } .legal-body { max-height: min(62vh, 560px); overflow: auto; margin-top: 12px; padding-right: 4px; font-size: .9rem; line-height: 1.55; } .legal-body h3 { margin: 4px 0 8px; } /* "A new version is ready" */ .upd-bar { position: fixed; left: 50%; top: calc(84px + env(safe-area-inset-top)); transform: translate(-50%, -16px); opacity: 0; z-index: 2600; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px !important; border-radius: 999px !important; margin: 0 !important; width: max-content; max-width: calc(100vw - 24px); transition: transform .35s cubic-bezier(.3,1.3,.5,1), opacity .25s; } .upd-bar.in { transform: translate(-50%, 0); opacity: 1; } .upd-bar > .ic { color: #0A84FF; flex: none; } .upd-bar b { white-space: nowrap; } .upd-bar .gl-circle.sm { width: 32px; height: 32px; flex: none; } /* Mistakes notebook */ .mk-entry { margin-top: 16px; } .mk-entry .spread { gap: 12px; } .mk-tabs { margin-bottom: 12px; overflow-x: auto; max-width: 100%; } .mk-card .mk-q { margin: 4px 0 0; } .mk-card .mk-exp { margin-top: 10px; } .mk-card .row { flex-wrap: wrap; } /* admin panel: icon + title actions, popups, users & questions pages */ .ad-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin: 14px 0 6px; } .ad-act { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 12px 12px 12px; border-radius: 18px; border: 1px solid rgba(128,128,140,.16); background: rgba(128,128,140,.07); color: inherit; font: inherit; cursor: pointer; transition: transform .15s, background .2s; } .ad-act:hover { background: rgba(128,128,140,.13); } .ad-act:active { transform: scale(.98); } .ad-actt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ad-actt b { font-size: .95rem; } .ad-act .ad-badge { flex: none; } .ad-act .ad-chev { flex: none; opacity: .45; } .ad-h { display: flex; align-items: center; gap: 8px; margin-top: 18px; } .ad-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ad-link { display: inline-flex; align-items: center; gap: 8px; } .ad-link .ic:last-child { opacity: .5; } .ad-pop { max-width: 560px !important; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; } .ad-pop.wide { max-width: 720px !important; width: min(720px, calc(100vw - 24px)); } .ad-pophead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .ad-popt { flex: 1; min-width: 0; } .ad-popt h2 { margin: 0; font-size: 1.15rem; } .ad-popbody .bk-mail { margin-top: 12px; } .ad-tabs button .ic { margin-right: 2px; } .pay-row { align-items: flex-start !important; } .pay-row .sr-t { gap: 2px; } .pay-thumb { width: 46px; height: 60px; flex: none; border-radius: 10px; border: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(#1f6fff, #0b3fa8); cursor: pointer; } .pay-dup { color: #E5283B; display: inline-flex; gap: 4px; align-items: center; } .pay-btns { gap: 8px; margin-top: 8px; flex-wrap: wrap; } .pay-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: 14px; } .us-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; } .us-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: rgba(128,128,140,.08); } .us-stat b { font-size: 1.35rem; } .us-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; } .us-row + .bar { margin-top: 4px; } .us-cron { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .us-cron code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 8px 10px; border-radius: 10px; background: rgba(128,128,140,.12); font-size: .75rem; } .rm-row { padding: 8px 0; } .rm-row + .rm-row { border-top: 1px solid rgba(128,128,140,.14); } /* mock: Exam conditions list with icons (no colors) */ .ic-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 10px; } .ic-list li { display: flex; align-items: flex-start; gap: 10px; } .ic-list li > .ic, .ic-line > .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; opacity: .75; color: inherit; } .ic-line { display: flex; align-items: flex-start; gap: 10px; } /* Friends | Study Groups: no page fade when switching, the highlight slides */ html.no-enter #view.fade-in, html.no-enter #view .lg-in { animation: none !important; } html.no-enter #view .lg-wait { opacity: 1 !important; } .ad-link [hidden], .ad-act [hidden] { display: none !important; } /* admin tabs: one line, scroll sideways on phones */ .ad-tabs { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; max-width: 100%; } .ad-tabs::-webkit-scrollbar { display: none; } .ad-tabs > button { flex: 0 0 auto !important; white-space: nowrap; } @media (max-width: 480px) { .ad-tabs > button { padding-left: 11px !important; padding-right: 11px !important; font-size: .85rem !important; } } @media (max-width: 600px) { .admin .srow .row .btn.sm { padding: 6px 9px !important; min-width: 0; } .admin .srow .row { gap: 4px !important; } } /* admin popups: a solid enough glass so the page behind doesn't show through the numbers */ html body .modal.card.ad-pop, html body .modal.card.legal-modal, html body .modal.card.op-card { background-color: rgba(250,250,253,.95) !important; } :root[data-theme="dark"] body .modal.card.ad-pop, :root[data-theme="dark"] body .modal.card.legal-modal, :root[data-theme="dark"] body .modal.card.op-card { background-color: rgba(28,28,34,.94) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .modal.card.ad-pop, :root:not([data-theme="light"]) body .modal.card.legal-modal, :root:not([data-theme="light"]) body .modal.card.op-card { background-color: rgba(28,28,34,.94) !important; } } /* desktop Messages: when switching chats only the conversation pane fades in */ html.mx-swap #view .mx-pane > *, html.mx-swap #view .mx-pane .chat-page { animation: none !important; } /* Learn on desktop: subjects as rounded square tiles (up to 3 per row); the one you open spans the full width with its lessons in 2 columns */ @media (min-width: 901px) { #view .dict-card { display: none !important; } #view .lcats.ltiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(max(190px, calc((100% - 54px) / 4)), 1fr)) !important; gap: 18px; row-gap: 18px; column-gap: 18px; grid-auto-flow: row dense; align-items: stretch; margin-top: 18px; } .ltiles > .lcat { border-radius: 30px; min-width: 0; } .ltiles > .lcat:not(.open) { aspect-ratio: 1 / 1; } .ltiles > .lcat:not(.open) .lcat-b { display: none; } .ltiles > .lcat:not(.open) > .lcat-h { position: relative; height: 100%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 22px; text-decoration: none; } .ltiles > .lcat:not(.open) > .lcat-h .ic-tile { --ts: 54px !important; } .ltiles > .lcat:not(.open) > .lcat-h .lcat-t { flex: 1; gap: 6px; } .ltiles > .lcat:not(.open) > .lcat-h .lcat-t b { font-size: 1.2rem; } .ltiles > .lcat:not(.open) > .lcat-h .lcat-t > .tiny:last-child { margin-top: auto; font-weight: 600; } .ltiles > .lcat:not(.open) > .lcat-h .chev { position: absolute; top: 22px; right: 22px; opacity: .55; } .ltiles > .lcat:not(.open) > .lcat-h .ring, .ltiles > .lcat:not(.open) > .lcat-h svg:not(.ic) { position: absolute; right: 22px; bottom: 22px; } .ltiles > .lcat.open { grid-column: 1 / -1; } .ltiles > .lcat.open .lcat-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding: 0 18px; } .ltiles > .lcat.open.open .lcat-in { padding-bottom: 18px; } .ltiles > .lcat.open .lrow + .lrow { margin-top: 0; } .ltiles > .lcat.open .lrow { border-radius: 14px; box-shadow: inset 0 -1px 0 rgba(128,128,140,.12); } .ltiles > .lcat.open .lrow:hover { box-shadow: none; } } /* first-visit "install as an app" banner */ .inst-bar { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 2550; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px !important; border-radius: 24px !important; margin: 0 !important; width: min(460px, calc(100vw - 24px)); transition: transform .35s cubic-bezier(.3,1.3,.5,1), opacity .25s; } .inst-bar.in { transform: translate(-50%, 0); opacity: 1; } .inst-bar .inst-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .inst-bar .inst-btns { display: flex; align-items: center; gap: 8px; flex: none; } .inst-bar .gl-circle.sm { width: 32px; height: 32px; } @media (min-width: 901px) { .inst-bar { left: auto; right: 96px; bottom: 24px; transform: translateY(20px); } .inst-bar.in { transform: none; } } /* lessons: "covered in another lesson" pointer left where a section moved */ .lx-see { font-size: .88rem; padding: 8px 12px; border-radius: 12px; background: rgba(10,132,255,.08); margin: 8px 0 14px; } /* payments: automatic approval panel */ .auto-st { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: rgba(255,149,0,.12); font-size: .88rem; } .auto-st.on { background: rgba(40,190,85,.14); } .auto-st .ic { flex: none; margin-top: 2px; } .auto-steps { padding-left: 20px; margin: 6px 0 10px; display: grid; gap: 4px; } .auto-code { flex: 1; min-width: 0; max-height: 220px; overflow: auto; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(128,128,140,.12); font-size: .7rem; line-height: 1.45; white-space: pre; } .pay-fee { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: rgba(255,149,0,.12); } .pay-part { text-align: left; padding: 12px 14px; border-radius: 16px; background: rgba(255,149,0,.12); margin: 10px 0; } .pay-over { color: #1E8E4B; display: block; } .op-don { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(255,79,154,.12); margin: 10px 0; } .op-don b { font-size: 1.05rem; } .inst-bar { z-index: 75 !important; } /* below popups (80) */ /* payment screen: what the payment covers */ .pay-value { text-align: left; margin: 12px 0 4px; padding: 14px 16px; border-radius: 18px; background: rgba(10,132,255,.07); border: 1px solid rgba(10,132,255,.14); } .pv-h { display: block; font-size: 1rem; margin-bottom: 8px; } .pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pv-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.4; } .pv-list li > .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; opacity: .75; } .pv-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(128,128,140,.16); line-height: 1.5; } .req { color: #E5283B; font-weight: 700; margin-left: 2px; } /* practice: tag on a question you've met before */ .q-again { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; } /* ===== v19.27: Today card — Accuracy full row, then Streak | Mistake notes side by side ===== */ .todaycard .v1-stats { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); } .v1-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; } .v1-duo .v1-stat { min-width: 0; } .v1-duo .v1-sb { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .v1-duo .v1-sb > span { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v1-big2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; } .v1-mk { cursor: pointer; transition: background .2s, transform .15s; } .v1-mk:hover { background: var(--fill2); } .v1-mk:active { transform: scale(.98); } @media (min-width: 601px) { @container todayh (max-height: 380px) { .v1-big2 { font-size: 1.05rem; } } } /* ===== v19.27: Practice — Vocabulary flashcards | Mistakes notebook side by side ===== */ .pr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } .pr-duo > .fc-promo { margin: 0 !important; min-width: 0; height: 100%; box-sizing: border-box; } .pr-duo > .fc-promo > span { min-width: 0; } @media (max-width: 600px) { .pr-duo { gap: 10px; } .pr-duo > .fc-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; position: relative; } .pr-duo > .fc-promo > svg:last-child { position: absolute; top: 14px; right: 12px; opacity: .6; } .pr-duo > .fc-promo .small { font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pr-duo > .fc-promo .ic-tile { --ts: 38px !important; } } /* ===== v19.27: result reactions ===== */ .rx-card { position: relative; overflow: hidden; } .rx { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 6px 2px; } .rx-ic { animation: rxPop .55s cubic-bezier(.3, 1.5, .5, 1) both; } .rx-h { margin: 6px 0 0; font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.2; animation: rxUp .45s .12s ease both; } .rx-l { margin: 2px auto 0; max-width: 560px; font-size: 1.02rem; line-height: 1.5; animation: rxUp .45s .22s ease both; } .rx-p { margin: 0 auto; max-width: 520px; animation: rxUp .45s .3s ease both; } .rx-l b { color: var(--ink); } .rx-g { margin-top: 10px; display: flex; justify-content: center; } .rx-sum { margin: 6px 0 10px; font-size: 1.05rem; } .rx-burst { position: absolute; left: 50%; top: 34px; width: 0; height: 0; pointer-events: none; } .rx-burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; left: -4px; top: -4px; background: hsl(calc(var(--a) * 1.4), 85%, 58%); opacity: 0; transform: rotate(var(--a)) translateY(0); animation: rxBurst .9s var(--d) cubic-bezier(.2, .7, .3, 1) forwards; } .rx-perfect .rx-h { background: linear-gradient(90deg, #E8A21A, #F2C94C, #E8A21A); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes rxPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes rxUp { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes rxBurst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-92px) scale(.6); } } @media (prefers-reduced-motion: reduce) { .rx-ic, .rx-h, .rx-l, .rx-p { animation: none; } .rx-burst { display: none; } } html.fx-lite .rx-burst { display: none; } @media (min-width: 601px) { @container todayh (max-width: 340px) { .v1-duo .v1-si { display: none; } .v1-duo .v1-stat { padding: 8px 11px; } } } .v1-duo .v1-sb > span { white-space: normal; line-height: 1.2; } /* ===== v19.28: spacing pass (titles, subtitles, cards, tabs) ===== */ #view .pg-title + .muted, #view .topbar h1 + .muted, #view .topbar .pg-title + div, .topbar > div > .pg-title + .muted { margin-top: 8px !important; } #view .topbar { margin-bottom: 20px; row-gap: 14px; } h2 + .muted, h2 + .small.muted, h2 + .tiny.muted, h2 + .muted.small, h3 + .muted, h3 + .small.muted { margin-top: 5px; } h1.pname + .muted { margin-top: 6px; } .card > .ic-tile + h2, .card > span.ic-tile + h2 { margin-top: 12px; } #view > .seg, #view > .people-tabs, #view > .ep-tabs, #view .mk-tabs { margin-bottom: 16px; } #view > .seg + .seg, #view .topbar + .seg { margin-top: 2px; } #p-friends > section.card + #f-body, section.card + #f-body { margin-top: 16px; display: block; } .rm-row + .rm-row { margin-top: 10px; } .rm-row + #rm-note { margin-top: 10px; } .card .small + ul.small { margin-top: 6px; } .card + .pr-duo, .pr-duo + .grid, .pr-duo + section { margin-top: 16px; } .card h2 + .spread, .card h2 + .row { margin-top: 6px; } /* ===== v19.28: pop-up banners — rounded rectangle + close button ===== */ .toast { border-radius: 16px !important; padding: 12px 44px 12px 16px !important; pointer-events: auto; width: max-content; max-width: min(92vw, 420px); min-height: 44px; display: flex; align-items: center; gap: 8px; box-sizing: border-box; text-align: left; line-height: 1.35; } .msg-toast { border-radius: 18px !important; padding: 12px 44px 12px 14px !important; width: min(92vw, 380px); } .toast .t-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 9px; border: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); opacity: .75; cursor: pointer; padding: 0; transition: opacity .15s, background .15s; } .toast .t-x:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 14%, transparent); } .toast.t-out { opacity: 0; transition: opacity .18s; } /* ===== v19.29: subject-colored background tint while answering ===== */ .lg-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease, background .8s ease; background: radial-gradient(120% 80% at 0% 0%, rgb(var(--st, 0 0 0) / .30), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgb(var(--st, 0 0 0) / .22), transparent 65%), linear-gradient(180deg, rgb(var(--st, 0 0 0) / .07), rgb(var(--st, 0 0 0) / .03)); } .lg-tint.solo { position: fixed; z-index: 0; } .lg-tint.on { opacity: 1; } :root[data-theme="dark"] .lg-tint { background: radial-gradient(120% 80% at 0% 0%, rgb(var(--st, 0 0 0) / .34), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgb(var(--st, 0 0 0) / .24), transparent 65%), linear-gradient(180deg, rgb(var(--st, 0 0 0) / .10), rgb(var(--st, 0 0 0) / .04)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-tint { background: radial-gradient(120% 80% at 0% 0%, rgb(var(--st, 0 0 0) / .34), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgb(var(--st, 0 0 0) / .24), transparent 65%), linear-gradient(180deg, rgb(var(--st, 0 0 0) / .10), rgb(var(--st, 0 0 0) / .04)); } } @media (prefers-reduced-motion: reduce) { .lg-tint { transition: none; } } /* ==== v1930.css ==== */ /* v19.30 — saved questions, question of the day, weekly summary, preview, side search, compact readiness */ /* side-panel search (desktop) */ .side-search { position: relative; display: flex; align-items: center; margin: 4px 10px 10px; } .side-search .ss-ic { position: absolute; left: 11px; display: grid; place-items: center; color: var(--muted); cursor: pointer; } .side-search .ss-ic svg { width: 17px; height: 17px; } .side-search input { width: 100%; box-sizing: border-box; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--fill); color: var(--ink); padding: 0 12px 0 34px; font: inherit; font-size: .9rem; } .side-search input:focus { outline: none; border-color: color-mix(in srgb, var(--primary, #0A84FF) 50%, transparent); background: var(--surface); } body.side-collapsed .side-search input { display: none; } body.side-collapsed .side-search { justify-content: center; height: 36px; } body.side-collapsed .side-search .ss-ic { position: static; } /* quiz tools: Save + Ask a friend */ .qtools .qsave svg { width: 17px; height: 17px; } .qsave.on { color: #0A84FF; } .qsave.on svg { color: #0A84FF; } .qtools:empty { display: none; } /* "Explain more simply" */ .simpler { margin-top: 10px; } .simpler-box { margin-top: 8px; } /* compact readiness */ .rd-mini .bar { height: 8px; } /* notebook: Mistakes | Saved, due card */ .mk-mode { display: inline-flex; margin-bottom: 14px; } .mk-mode button { display: inline-flex; align-items: center; gap: 6px; } .mk-mode svg { width: 16px; height: 16px; } .mk-duecard { margin-bottom: 14px; } .mk-duecard .spread { gap: 12px; flex-wrap: wrap; } /* dashboard extras */ .dash-extra .card + .card { margin-top: 0; } .qotd .choices { margin-top: 10px; } .qotd .choice[disabled] { cursor: default; } .wkcard { position: relative; } .wk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; } .wk-grid > div { background: var(--fill); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wk-grid b { font-size: 1.35rem; line-height: 1.1; } .wk-grid span { font-size: .8rem; color: var(--muted); line-height: 1.3; } .wk-grid i { font-style: normal; opacity: .85; } .wk-up { color: var(--good, #28BE55); font-weight: 700; } .wk-down { color: var(--bad, #E5283B); font-weight: 700; } .wk-next { margin-top: 12px; gap: 12px; flex-wrap: wrap; } .wk-x { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 9px; border: 0; background: var(--fill); color: var(--muted); display: grid; place-items: center; cursor: pointer; } .wkcard .spread:first-child { padding-right: 36px; } @media (max-width: 600px) { .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } #view > .wkcard { margin-bottom: 16px; } /* public preview */ .pv-peek { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--fill); color: var(--ink); font: inherit; cursor: pointer; } .pv-peek > span { flex: 1; display: flex; flex-direction: column; gap: 2px; } .pv-peek svg { width: 20px; height: 20px; color: #E8A21A; } .pv-peek > svg:last-child { color: var(--muted); } .pv-ov { position: fixed; inset: 0; z-index: 90; overflow-y: auto; background: var(--bg); -webkit-overflow-scrolling: touch; } .pv-wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; } .pv-top { margin: 4px 0 16px; } .pv-top .brand { display: flex; align-items: center; gap: 10px; } .pv-hero h1 { font-size: clamp(1.45rem, 4.4vw, 2rem); margin: 0 0 8px; } .pv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; } .pv-stats > div { background: var(--fill); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; } .pv-stats b { font-size: 1.4rem; } .pv-stats span { font-size: .8rem; color: var(--muted); line-height: 1.3; } .pv-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .pv-list li { display: flex; gap: 10px; align-items: flex-start; } .pv-list svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #0A84FF; } .pv-q { padding: 14px 0; border-bottom: 1px solid var(--line); } .pv-q:last-child { border-bottom: 0; } .pv-q .choices { margin-top: 10px; } .pv-price { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pv-ov .card + .card { margin-top: 16px; } @media (max-width: 600px) { .pv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-price .btn { width: 100%; } } /* ===== dark mode: flat, soft active highlight (side panel, tabs, segmented controls) ===== */ :root[data-theme="dark"] body .nav a.on, :root[data-theme="dark"] body .side .pchip.big.on, :root[data-theme="dark"] body .seg button.on, :root[data-theme="dark"] body .people-tabs a.on, :root[data-theme="dark"] body .people-tabs button.on, :root[data-theme="dark"] body .ptabs .on, :root[data-theme="dark"] html body .has-glide > .gl-glider.gl-glider, :root[data-theme="dark"] body .gl-glider { background: rgba(255, 255, 255, .10) !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; filter: none !important; } :root[data-theme="dark"] body .has-glide.has-glide > .on.on:not(.gl-glider) { background: transparent !important; } :root[data-theme="dark"] body .nav a.on { background: rgba(255, 255, 255, .09) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .nav a.on, :root:not([data-theme="light"]) body .side .pchip.big.on, :root:not([data-theme="light"]) body .seg button.on, :root:not([data-theme="light"]) body .people-tabs a.on, :root:not([data-theme="light"]) body .people-tabs button.on, :root:not([data-theme="light"]) body .ptabs .on, :root:not([data-theme="light"]) body .gl-glider { background: rgba(255, 255, 255, .10) !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; filter: none !important; } :root:not([data-theme="light"]) body .has-glide.has-glide > .on.on:not(.gl-glider) { background: transparent !important; } :root:not([data-theme="light"]) body .nav a.on { background: rgba(255, 255, 255, .09) !important; } } /* keep the welcome card's white level toggle as it is */ :root body .card.hero .seg button.on, :root body .card.hero .gl-glider { background: #fff !important; } /* ---------------- v19.30: faster messenger morph (desktop) + numbered messages badge ---------------- */ @media (min-width: 900px) { #m-launch { transition: transform .16s cubic-bezier(.3,1.2,.5,1), opacity .12s; } html body #m-panel { animation: mMorphIn .17s cubic-bezier(.2,.9,.3,1); } html body #m-panel.m-closing { animation: mMorphOut .13s cubic-bezier(.4,0,.8,.4) forwards; } #msgr:not(.panel-open) #m-launch { animation: mPop .18s cubic-bezier(.3,1.3,.5,1); } } #m-badge:not([hidden]) { width: auto !important; min-width: 22px !important; height: 22px !important; padding: 0 6px !important; border-radius: 11px !important; font: 700 12px var(--font) !important; background: var(--ph-red, #E41E3F) !important; color: #fff !important; } .nav-badge.msg-n { pointer-events: none; } .gl-circle .nav-badge.msg-n { position: absolute; top: -3px; right: -3px; left: auto; margin: 0; z-index: 3; } /* v19.30 phones: snappier top-bar buttons */ .mobilebar .hdr-ics a.gl-circle, .mobilebar .hdr-ics #hdr-chat { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mobilebar .hdr-ics .hdr-press { transform: scale(.9); transition: transform .08s ease !important; } :root body .mobilebar .hdr-ics .hdr-morph > svg, :root body .mobilebar .hdr-ics .hdr-morph .nb-x { transition: transform .16s cubic-bezier(.3,1.3,.5,1), opacity .1s, visibility 0s !important; } @media (max-width: 899px) { body.on-notif #view.fade-in, body.on-msgs #view.fade-in { animation-duration: .12s !important; } } @media (min-width: 900px) { html body #m-panel { will-change: transform, opacity; } } /* v19.30: active side-menu item and phone bottom-bar tab glow light blue (icon + title) */ :root { --nav-glow: #1a8cff; --nav-glow-a: rgba(64, 160, 255, .55); } :root[data-theme="dark"] { --nav-glow: #8fd0ff; --nav-glow-a: rgba(120, 195, 255, .75); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-glow: #8fd0ff; --nav-glow-a: rgba(120, 195, 255, .75); } } html body .side .nav a.on, html body .dock .tabbar a.on, html body.tb-min .dock .tabbar a.on { color: var(--nav-glow) !important; } html body .side .nav a.on svg, html body .side .nav a.on .ic, html body .dock .tabbar a.on svg, html body .dock .tabbar a.on .ic { color: var(--nav-glow) !important; filter: drop-shadow(0 0 5px var(--nav-glow-a)) drop-shadow(0 0 1px var(--nav-glow-a)); } html body .side .nav a.on > span:not(.nav-badge):not(.tab-badge):not(.msg-dot), html body .dock .tabbar a.on > span:not(.nav-badge):not(.tab-badge) { color: var(--nav-glow) !important; text-shadow: 0 0 8px var(--nav-glow-a); } html body .side .nav a, html body .dock .tabbar a { transition: color .18s ease; } html body .side .nav a svg, html body .dock .tabbar a svg { transition: filter .18s ease, transform .2s ease; } /* v19.32: labelled Kaya AI limit boxes (admin) */ .ai-lims { align-items: flex-end; } .ai-lim { display: flex; flex-direction: column; gap: 4px; } .ai-lim input { width: 120px; } /* v19.32: Group Study Live — Kaya pop-up shared by the host */ .gs-kask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 2px; } .gs-kov { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(8, 10, 24, .46); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); animation: gsKin .2s ease; } .gs-kov.out { animation: gsKout .18s ease forwards; } @keyframes gsKin { from { opacity: 0; } to { opacity: 1; } } @keyframes gsKout { to { opacity: 0; } } .gs-kcard { position: relative; width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 26px; padding: 22px 22px 16px; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: gsKpop .24s cubic-bezier(.2,.9,.3,1.1); } @keyframes gsKpop { from { transform: scale(.94) translateY(8px); opacity: .4; } to { transform: none; opacity: 1; } } .gs-kx { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; } .gs-khead { display: flex; gap: 12px; align-items: center; padding-right: 48px; } .gs-khead b { font-size: 1.15rem; } .gs-kq { margin: 16px 0 12px; padding: 12px 14px; border-radius: 16px; background: rgba(128,128,140,.10); font-size: .92rem; } .gs-kq .qtext { font-size: inherit; margin: 0 0 8px; } .gs-kans { display: flex; gap: 8px; align-items: baseline; font-weight: 600; color: var(--ok, #1f9d55); } .gs-ktext { font-size: 1.12rem; line-height: 1.6; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(164,92,240,.12), rgba(10,132,255,.10)); border: 1px solid rgba(164,92,240,.22); } .gs-kfoot { margin: 8px 2px 0; } .gs-kwait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 10px; text-align: center; } .gs-kdots { display: inline-flex; gap: 6px; } .gs-kdots i { width: 9px; height: 9px; border-radius: 50%; background: #A45CF0; animation: gsKd 1s infinite ease-in-out; } .gs-kdots i:nth-child(2) { animation-delay: .15s; } .gs-kdots i:nth-child(3) { animation-delay: .3s; } @keyframes gsKd { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: none; opacity: 1; } } .gs-knav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(128,128,140,.16); } .gs-knav > .tiny:only-child { width: 100%; text-align: center; } @media (max-width: 640px) { .gs-kcard { padding: 18px 16px 14px; border-radius: 22px; } .gs-ktext { font-size: 1.02rem; } } .gs-qcard .gs-kask { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(128,128,140,.16); } /* v19.33: the Next button takes the subject's color while answering (practice, drills, mistakes, saved, mock exams) */ html[data-subj] body.in-quiz #next, html[data-subj] body.in-exam #nxt, html[data-subj] body.in-quiz .qn-next.done, html[data-subj] body.in-exam .qn-next.done { background: linear-gradient(180deg, color-mix(in srgb, var(--subj) 90%, #000 10%), color-mix(in srgb, var(--subj) 72%, #000 28%)) !important; color: #fff !important; border-color: transparent !important; text-shadow: 0 1px 1px rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px color-mix(in srgb, var(--subj) 35%, transparent) !important; transition: background .25s ease, box-shadow .25s ease; } html[data-subj] body.in-quiz .qn-next.done .ic, html[data-subj] body.in-exam .qn-next.done .ic { color: #fff !important; } .dash-extra:not(.g2) { grid-template-columns: 1fr !important; } .dash-extra:not(.g2) > .qotd { width: 100%; max-width: none; } /* v19.35: on a very wide card the Question of the day shows its choices in two columns (A B down the left, C D down the right) */ .qotd { container-type: inline-size; } @container (min-width: 820px) { .qotd .qotd-ch { display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 2), auto); gap: 10px 14px; } .qotd .qotd-ch .choice { margin: 0 !important; } } /* v19.36: on very wide screens every question screen shows its choices in two columns (practice, drills, mistakes, saved, mock exams, exam-day simulation, Group Study Live): A B down the left, C D down the right */ .qwrap, .gs-qcard, .examlayout .card:has(> .choices) { container-type: inline-size; } @container (min-width: 960px) { .choices { display: grid !important; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto); gap: 10px 14px; } .choices:has(> .choice:nth-child(5)) { grid-template-rows: repeat(3, auto); } .choices > .choice { margin: 0 !important; } } /* v19.37: short choices on a very wide screen sit in ONE row (A B C D) */ @container (min-width: 960px) { .choices.ch-short { grid-auto-flow: row !important; grid-template-rows: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @container (min-width: 820px) { .qotd .qotd-ch.ch-short { grid-auto-flow: row !important; grid-template-rows: none !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .choices.ch-short:has(> .choice:nth-child(5)) { --chn: 5; } @container (min-width: 820px) { .choices.ch-short:has(> .choice:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .choices.ch-short:not(:has(> .choice:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* v19.38: two-line buttons turn into rounded rectangles (one-line ones stay pills) */ html body .is-2l { border-radius: 14px !important; line-height: 1.2 !important; text-align: center; padding-top: 7px !important; padding-bottom: 7px !important; } html body .pill.is-2l, html body .tag.is-2l, html body .chip.is-2l { border-radius: 10px !important; padding-top: 4px !important; padding-bottom: 4px !important; } html body .is-2l::before, html body .is-2l::after { border-radius: inherit !important; } /* v19.39 Group Study Live discussion: side panel with chat + quick reactions */ .gs-dgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } @media (min-width: 1100px) { .gs-dgrid { grid-template-columns: minmax(0, 1fr) 320px; } .gs-side { position: sticky; top: 16px; max-height: calc(100vh - 120px); } } @media (min-width: 1500px) { .gs-dgrid { grid-template-columns: minmax(0, 1fr) 360px; } } .gs-side { display: flex; flex-direction: column; gap: 10px; padding: 14px !important; min-height: 380px; margin: 0 !important; } .gs-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .gs-shead b { display: inline-flex; align-items: center; gap: 6px; } .gs-rxrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; } .gs-rxb { min-width: 0; padding: 0 !important; margin: 0; height: 38px; border-radius: 12px; border: 1px solid rgba(128,128,140,.2); background: rgba(128,128,140,.08); font-size: 20px; line-height: 1; cursor: pointer; transition: transform .12s ease, background .15s; } .gs-rxb:hover { background: rgba(10,132,255,.12); transform: translateY(-1px); } .gs-rxb.pop { animation: gsRxPop .35s ease; } @keyframes gsRxPop { 40% { transform: scale(1.25); } } .gs-clist { flex: 1; min-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 6px 2px; overscroll-behavior: contain; } @media (max-width: 1099px) { .gs-clist { max-height: 320px; } } .gs-cempty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted, #888); font-size: .85rem; padding: 18px 10px; } .gs-cm { display: flex; gap: 8px; align-items: flex-end; } .gs-cm.same { margin-top: -3px; } .gs-cav { width: 26px; flex: none; } .gs-cb { max-width: 82%; padding: 7px 11px; border-radius: 16px 16px 16px 6px; background: rgba(128,128,140,.13); font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; } .gs-cn { display: block; font-size: .72rem; opacity: .7; margin-bottom: 1px; } .gs-cm.me { flex-direction: row-reverse; } .gs-cm.me .gs-cav { display: none; } .gs-cm.me .gs-cb { background: linear-gradient(180deg, #2f7cf6, #1f5fd6); color: #fff; border-radius: 16px 16px 6px 16px; } .gs-crx { align-self: center; font-size: .78rem; display: flex; gap: 6px; align-items: center; padding: 2px 10px; border-radius: 999px; background: rgba(128,128,140,.08); } .gs-crx-e { font-size: 1rem; } .gs-cform { display: flex; gap: 8px; } .gs-cform input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; padding: 0 14px; } .gs-cform .btn { width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; } .gs-burst { position: fixed; z-index: 8000; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); animation: gsBurst 2.5s cubic-bezier(.2,.7,.3,1) forwards; } .gs-be { font-size: 40px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); } .gs-bn { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(20,20,30,.72); color: #fff; margin-top: 2px; } @keyframes gsBurst { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -220px) scale(.9); } } /* v19.39 Group Study question cards: short choices go 4 across → 2×2 → 1 column as the card narrows */ @container (min-width: 400px) { .gs-qcard .choices.ch-short { display: grid !important; grid-auto-flow: row !important; grid-template-rows: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 12px; } .gs-qcard .choices.ch-short > .choice { margin: 0 !important; } } @container (min-width: 740px) { .gs-qcard .choices.ch-short { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .gs-qcard .choices.ch-short:has(> .choice:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .gs-qcard .choices.ch-short:not(:has(> .choice:nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } .gs-qcard .choices.ch-short .choice { flex-wrap: wrap; row-gap: 6px; } .gs-qcard .choices.ch-short .choice .gs-picks { flex-basis: 100%; justify-content: flex-start; margin-left: 0; } @media (min-width: 1100px) { .gs-wrap.gs-discuss { max-width: 1440px; } } .gs-dmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .gs-side > * { width: 100%; } .gs-side .gs-rxrow { align-self: stretch; } .gs-cav .gs-av i, .gs-cav .gs-micb { display: none !important; } /* ==== v1940.css ==== */ /* v19.40 — Admin page tiles, feedback inbox, Help & FAQ, Settings icon beside Logout */ /* side panel: Logout + Settings icon on one row */ .side-acts { display: none; } @media (min-width: 901px) { .side-acts { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .side-acts .logout-btn { flex: 1; margin-top: 0 !important; min-width: 0; } .side-acts .side-set { width: 44px; height: 44px; flex: none; display: grid; place-items: center; } .side-acts .side-set svg { width: 20px; height: 20px; } body.side-collapsed .side-acts { flex-direction: column; } body.side-collapsed .side-acts .logout-btn { width: 44px; flex: none; justify-content: center; padding: 10px 0; } } .sa-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } /* Admin page: tiles (4 per row on computers, 2 on phones); the open one spans the full width */ .adtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; grid-auto-flow: row dense; } @media (min-width: 901px) { .adtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } .adtile { position: relative; min-width: 0; border-radius: 26px; } .adtile-h { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; min-height: 170px; position: relative; } @media (min-width: 901px) { .adtile:not(.open) .adtile-h { aspect-ratio: 1 / 1; min-height: 0; padding: 22px; } .adtile:not(.open) .adtile-h .ic-tile { --ts: 54px !important; } } .adtile-t { display: flex; flex-direction: column; gap: 4px; } .adtile-t b { font-size: 1.12rem; } .adtile-n { position: absolute; top: 18px; right: 18px; } .adtile-x { display: none; } .adtile-b { display: none; } .adtile.open { grid-column: 1 / -1; } .adtile.open .adtile-h { flex-direction: row; align-items: center; min-height: 0; aspect-ratio: auto; padding: 18px 20px; border-bottom: 1px solid rgba(128,128,140,.14); } .adtile.open .adtile-h .adtile-n { position: static; margin-left: auto; } .adtile.open .adtile-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(128,128,140,.12); margin-left: 8px; flex: none; } .adtile.open .adtile-h .adtile-n[hidden] + .adtile-x { margin-left: auto; } .adtile.open .adtile-b { display: block; padding: 18px 20px 22px; } .adtile-b .backrow, .adtile-b .topbar { display: none !important; } .adtile-b > section.card.admin, .adtile-b .ad-inl .card { box-shadow: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .adtile-b .ad-inlsub { margin: 0 0 12px; } .ad-linkcard { display: flex !important; align-items: center; gap: 14px; text-decoration: none; color: inherit; } .ad-linkcard > span:not(.ic-tile):not(.hg-fi) { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ad-linkcard > .ic-tile, .ad-linkcard > .hg-fi { flex: none; } /* feedback inbox */ .fb-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 700px) { .fb-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fb-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: rgba(128,128,140,.08); } .fb-stat b { font-size: 1.3rem; } .fb-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; } .fb-tools .dsearch { flex: 1; min-width: 220px; margin: 0; } .fb-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .fb-kind { border: 1px solid rgba(128,128,140,.22); background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .82rem; cursor: pointer; } .fb-kind i { font-style: normal; opacity: .6; margin-left: 2px; } .fb-kind.on { background: #0a84ff; color: #fff; border-color: transparent; } .fb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; } .fb-item { border-radius: 18px; padding: 14px; background: rgba(128,128,140,.07); border: 1px solid rgba(128,128,140,.14); display: flex; flex-direction: column; gap: 8px; } .fb-item.st-new { border-color: rgba(255,176,32,.55); background: rgba(255,176,32,.07); } .fb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fb-who { display: flex; flex-direction: column; flex: 1; min-width: 120px; } .fb-body { margin: 0; line-height: 1.5; } .fb-meta { margin-top: -2px; } .fb-stars { color: #f5a623; letter-spacing: 1px; } .fb-stars i { font-style: normal; opacity: .25; } .fb-reply { padding: 10px 12px; border-radius: 14px; background: rgba(10,132,255,.08); border-left: 3px solid #0a84ff; } .fb-acts textarea { width: 100%; border-radius: 14px; resize: vertical; } .fb-btns { gap: 6px !important; flex-wrap: wrap; margin-top: 6px; } .fb-btns .btn.on { background: rgba(10,132,255,.14) !important; color: #0a84ff !important; } .fb-del { margin-left: auto; } .fb-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; } /* Help & FAQ page */ .help-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } @media (min-width: 1100px) { .help-grid { grid-template-columns: minmax(0, 1fr) 400px; } .help-side { position: sticky; top: 16px; } } .help-faq, .help-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .help-faq .card, .help-side .card { margin: 0 !important; } .faq { border-top: 1px solid rgba(128,128,140,.14); } .faq:first-of-type { border-top: 0; } .faq summary { cursor: pointer; padding: 12px 2px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-weight: 400; opacity: .55; font-size: 1.2rem; line-height: 1; } .faq[open] summary::after { content: "–"; } .faq-a { padding: 0 2px 14px; line-height: 1.6; } .fb-kchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .fb-kc { border: 1px solid rgba(128,128,140,.22); background: transparent; color: inherit; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: .85rem; cursor: pointer; } .fb-kc.on { background: #0a84ff; color: #fff; border-color: transparent; } .fb-form textarea { width: 100%; border-radius: 16px; resize: vertical; } .fb-rrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .fb-rate-in button { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: rgba(128,128,140,.35); cursor: pointer; padding: 0 2px; } .fb-rate-in button.on { color: #f5a623; } .fb-inc { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; } .fb-mi { padding: 10px 0; border-top: 1px solid rgba(128,128,140,.14); } .fb-mi:first-child { border-top: 0; } .fb-mi p { margin: 6px 0 0; } .adtile-n[hidden] { display: none !important; } /* v19.44: About on its own row; below it Logout · Settings (both labelled) */ .side-ah { display: none; } @media (min-width: 901px) { .side-ah { display: block; margin-top: 6px; flex: none; } .side-ah .side-about { margin: 0 !important; } .side-ah .side-about[open] summary { color: #0a84ff; } .side-acts .logout-btn, .side-acts .side-set { flex: 1 1 0; height: 44px; box-sizing: border-box; min-width: 0; } .side-acts .side-set { display: flex !important; align-items: center; gap: 10px; width: auto !important; padding: 10px 12px; border-radius: 18px; background: var(--fill); font: 600 .86rem var(--font); color: var(--muted); text-decoration: none; } .side-acts .side-set svg, .side-acts .side-set .ic { width: 18px; height: 18px; } .side-acts .side-set.on { background: rgba(10,132,255,.12); color: #0a84ff; } body.side-collapsed .side-acts .side-set { width: 44px !important; flex: none; justify-content: center; padding: 0; } body.side-collapsed .side-acts .side-set span { display: none; } } /* ==== gchat.css ==== */ /* v19.42 — group chats + Review Tayo Community */ .gc-av { display: inline-grid; place-items: center; border-radius: 50%; flex: none; color: #fff; } .gc-av .ic { width: 55%; height: 55%; } .gc-comm { background: linear-gradient(135deg, #0038A8 0%, #2A64D8 55%, #F7B500 130%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } .gc-grp { background: linear-gradient(135deg, #6A4DE0, #2A64D8); } .gc-adm { background: linear-gradient(135deg, #1f2937, #475569); } .gc-stack { position: relative; display: inline-block; flex: none; } .gc-stack > span { position: absolute; } .gc-stack .gc-s0 { top: 0; left: 0; } .gc-stack .gc-s1 { right: 0; bottom: 0; } .gc-stack .gc-s1 .avatar { box-shadow: 0 0 0 2px var(--surface, #fff); } .gc-tag { display: inline-block; font: 700 .62rem var(--font); letter-spacing: .02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: rgba(10,132,255,.12); color: #0a84ff; vertical-align: 2px; margin-left: 4px; } .gc-row.gc-pin { background: linear-gradient(90deg, rgba(10,132,255,.07), transparent 70%); } .gc-n { display: inline-grid !important; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font: 700 .68rem var(--font); font-style: normal; color: #fff; } /* conversation */ .gcp { display: flex; flex-direction: column; height: 100%; min-height: 0; } .gcp-full { position: fixed; inset: 0; z-index: 60; background: var(--bg, #f5f6fa); } body.in-gchat .tabbar, body.in-gchat .dock, body.in-gchat .mobilebar, body.in-gchat #m-launch { display: none !important; } body.in-gchat { overflow: hidden; } .gcp-emb { height: 100%; } .gcp-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid rgba(128,128,140,.14); flex: none; } .gcp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .gcp-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gcp-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .gcp-list { display: flex; flex-direction: column; gap: 2px; } .gc-rules { margin: 0 0 12px; padding: 12px 14px; border-radius: 18px; background: rgba(10,132,255,.07); border: 1px solid rgba(10,132,255,.18); } .gc-rules summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; } .gc-rules summary::-webkit-details-marker { display: none; } .gc-rules summary > span { display: flex; flex-direction: column; } .gc-rules ul, .gc-rl { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; } .gc-rules li, .gc-rl li { display: flex; gap: 10px; align-items: flex-start; } .gc-rules li .ic, .gc-rl li .ic { width: 18px; height: 18px; flex: none; color: #0a84ff; margin-top: 1px; } .gc-day { align-self: center; margin: 10px 0 6px; padding: 3px 10px; border-radius: 999px; background: rgba(128,128,140,.12); color: var(--muted, #777); } .gc-sys { align-self: center; color: var(--muted, #777); margin: 6px 0; text-align: center; } .gc-m { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; max-width: 100%; } .gc-m.same { margin-top: 2px; } .gc-m.me { flex-direction: row-reverse; } .gc-mav { width: 30px; flex: none; cursor: pointer; } .gc-mb { display: flex; flex-direction: column; max-width: min(78%, 560px); min-width: 0; } .gc-m.me .gc-mb { align-items: flex-end; } .gc-who { font-size: .72rem; font-weight: 700; opacity: .75; margin: 0 0 2px 10px; display: flex; align-items: center; gap: 6px; } .gc-who.adm { opacity: 1; color: #0a84ff; } .gc-admb { display: inline-flex; align-items: center; gap: 3px; font-size: .62rem; padding: 1px 6px; border-radius: 999px; background: rgba(10,132,255,.14); } .gc-admb .ic { width: 11px; height: 11px; } .gc-bub { padding: 8px 12px; border-radius: 18px; background: rgba(128,128,140,.14); line-height: 1.4; overflow-wrap: anywhere; cursor: pointer; } .gc-m.me .gc-bub { background: linear-gradient(180deg, #2f7cf6, #1f5fd6); color: #fff; } .gc-m.me .gc-bub a { color: #fff; } .gc-bub.del { background: transparent; border: 1px dashed rgba(128,128,140,.35); cursor: default; } .gc-m.me .gc-bub.del { background: transparent; color: inherit; } .gc-q { font-size: .78rem; padding: 5px 8px; margin: -2px -4px 6px; border-radius: 10px; background: rgba(0,0,0,.08); display: flex; flex-direction: column; border-left: 3px solid rgba(255,255,255,.6); } .gc-m:not(.me) .gc-q { background: rgba(10,132,255,.08); border-left-color: #0a84ff; } .gc-q span { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gc-time { opacity: 0; transition: opacity .15s; margin: 2px 8px 0; color: var(--muted, #888); } .gc-m:hover .gc-time { opacity: .8; } .gc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 10px; text-align: center; } .gcp-reply { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid rgba(128,128,140,.14); } .gcp-reply .gl-circle { width: 30px; height: 30px; } .gcp-comp { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(128,128,140,.14); flex: none; } .gcp-comp textarea { flex: 1; min-width: 0; resize: none; border-radius: 20px; padding: 10px 14px; line-height: 1.35; max-height: 140px; font: inherit; } .gcp-send { width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(180deg, #2f7cf6, #1f5fd6); color: #fff; cursor: pointer; flex: none; } .gcp-send .ic { width: 20px; height: 20px; } .gcp-muted { padding: 12px 14px; text-align: center; border-top: 1px solid rgba(128,128,140,.14); display: flex; gap: 8px; justify-content: center; align-items: center; } .gc-sheet { width: min(420px, calc(100vw - 32px)); padding: 8px !important; display: flex; flex-direction: column; } .gc-sheet button { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 12px 14px; border-radius: 12px; display: flex; gap: 10px; align-items: center; cursor: pointer; } .gc-sheet button:hover { background: rgba(128,128,140,.1); } .gc-sheet button.bad { color: var(--bad, #e5484d); } .gc-sheet .gc-sprev { padding: 10px 14px; border-bottom: 1px solid rgba(128,128,140,.14); margin-bottom: 4px; color: var(--muted, #777); overflow-wrap: anywhere; } .gc-agree { width: min(480px, calc(100vw - 32px)); text-align: left; } .gc-agree h2 { margin: 10px 0 4px; } .gc-info { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; } .gc-ihead { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0; text-align: center; } .gc-rename { display: flex; gap: 8px; margin: 8px 0; } .gc-rename input { flex: 1; } .gc-mlist, .gc-plist { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; } .gc-mrow, .gc-prow { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; cursor: pointer; } .gc-prow:hover { background: rgba(128,128,140,.08); } .gc-mt { flex: 1; display: flex; flex-direction: column; min-width: 0; } .gc-prow input { width: 20px; height: 20px; } .gc-pick { width: min(480px, calc(100vw - 32px)); } .gc-nin { width: 100%; margin: 8px 0; } .gc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .gc-chips:empty { display: none; } .gc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(10,132,255,.12); color: #0a84ff; font-size: .82rem; font-weight: 600; } .gc-chip button { border: 0; background: none; color: inherit; width: 18px; height: 18px; padding: 0; display: grid; place-items: center; cursor: pointer; } .gc-chip button .ic { width: 14px; height: 14px; } button.mx-newg { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* v19.43 @mentions */ .gcp-comp { position: relative; } .gc-ac { position: absolute; left: 12px; right: 62px; bottom: calc(100% + 6px); z-index: 5; max-height: 280px; overflow-y: auto; padding: 6px; border-radius: 18px; background: var(--surface, #fff); box-shadow: 0 12px 40px rgba(0,0,0,.18); border: 1px solid rgba(128,128,140,.16); display: flex; flex-direction: column; gap: 2px; } .gc-ac[hidden] { display: none; } .gc-aci { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left; border-radius: 12px; cursor: pointer; } .gc-aci.on, .gc-aci:hover { background: rgba(10,132,255,.1); } .gc-at { font-weight: 700; color: #0a84ff; } .gc-at.me, .gc-at.all { background: rgba(10,132,255,.14); border-radius: 6px; padding: 0 3px; } .gc-m.me .gc-at { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .gc-m.me .gc-at.me, .gc-m.me .gc-at.all { background: rgba(255,255,255,.2); } .gc-bub.at-me { box-shadow: inset 3px 0 0 #f5a623; background: rgba(245,166,35,.14); } .gc-atb { display: inline-grid !important; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0a84ff; color: #fff; font: 700 .72rem var(--font); font-style: normal; margin-right: 4px; } /* ==== help.css ==== */ /* v19.44 — Help & user guide */ .hg-search { margin: 4px 0 12px; } .hg-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hg-tabs::-webkit-scrollbar { display: none; } .hg-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; background: var(--fill, rgba(128,128,140,.1)); color: inherit; text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; } .hg-tabs a .ic, .hg-tabs a svg { width: 18px; height: 18px; } .hg-tabs a.on { background: #0a84ff; color: #fff; } @media (min-width: 1100px) { .hg-tabs { flex-wrap: wrap; overflow: visible; } } .hg-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 14px; } .hg-head h2 { margin: 0; font-size: 1.4rem; } .hg-head p { margin: 2px 0 0; } .hg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; } @media (min-width: 1000px) { .hg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hg-sec { margin: 0 !important; display: flex; flex-direction: column; gap: 8px; } .hg-h { display: flex; align-items: center; gap: 12px; } .hg-h h2 { margin: 0; font-size: 1.08rem; } .hg-from { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #0a84ff; } .hg-p { margin: 0; line-height: 1.6; } .hg-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 8px; } .hg-steps li { counter-increment: s; position: relative; padding-left: 36px; line-height: 1.55; } .hg-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(10,132,255,.14); color: #0a84ff; font: 700 .78rem var(--font); display: grid; place-items: center; } .hg-list { margin: 0; display: flex; flex-direction: column; } .hg-list > div { padding: 9px 0; border-top: 1px solid rgba(128,128,140,.14); } .hg-list > div:first-child { border-top: 0; } .hg-list dt { font-weight: 700; font-size: .92rem; } .hg-list dd { margin: 2px 0 0; line-height: 1.55; font-size: .92rem; opacity: .9; } .hg-tips { display: flex; flex-direction: column; gap: 6px; } .hg-tips p { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 14px; background: rgba(245,166,35,.12); font-size: .88rem; line-height: 1.5; } .hg-tips .ic { width: 18px; height: 18px; flex: none; color: #d98a00; margin-top: 1px; } .hg-go { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .9rem; color: #0a84ff; text-decoration: none; margin-top: 2px; } .hg-go .ic { width: 16px; height: 16px; } .hg-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; } .hg-qc { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--surface, rgba(255,255,255,.6)); box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.08)); color: inherit; text-decoration: none; } .hg-qc > span:not(.hg-fi) { display: flex; flex-direction: column; min-width: 0; } .hg-none { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px !important; } #hg-fb .help-grid.fb-only { grid-template-columns: minmax(0, 1fr); } #hg-fb .help-grid.fb-only .help-side { position: static; } @media (min-width: 1000px) { #hg-fb .help-grid.fb-only .help-side { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; } } .help-home { width: 100%; justify-content: center; margin-bottom: 8px; padding: 14px !important; border-radius: 16px !important; } @media (min-width: 901px) { .help-home { display: none !important; } } /* v19.45 — About tab + CSC updates */ .hg-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hg-logo { width: 40px; height: 40px; display: grid; place-items: center; } .hg-logo svg { width: 40px; height: 40px; } .hg-abody p { line-height: 1.6; margin: 6px 0; } .csc-card { gap: 10px; } .csc-card:not(:has(.hg-h)) { flex-direction: row !important; align-items: flex-start; } .csc-pub { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-top: 1px solid rgba(128,128,140,.14); } .csc-pub:first-of-type { border-top: 0; padding-top: 0; } .csc-pub p { margin: 4px 0 0; line-height: 1.55; } .csc-intel, #csc-home { margin-bottom: 16px; } #csc-home .csc-card { border: 1px solid rgba(247,181,0,.35); background-image: linear-gradient(135deg, rgba(247,181,0,.10), transparent 60%) !important; } .csc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .csc-top .small { flex: 1; min-width: 240px; } .warn-t { color: #d98a00; font-weight: 600; } .csc-err { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(229,72,77,.1); color: #c93c40; display: flex; gap: 6px; align-items: center; } .csc-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .csc-item { border-radius: 18px; padding: 14px; background: rgba(128,128,140,.07); border: 1px solid rgba(128,128,140,.14); display: flex; flex-direction: column; gap: 8px; } .csc-item.st-pending { border-color: rgba(247,181,0,.5); background: rgba(247,181,0,.06); } .csc-h { display: flex; gap: 8px; align-items: center; } .csc-item input[type=text] { width: 100%; font-weight: 700; } .csc-item textarea { width: 100%; border-radius: 14px; resize: vertical; } .csc-t { line-height: 1.4; } .csc-item p { margin: 0; line-height: 1.55; } .csc-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .csc-acts .grow { flex: 1; } /* v19.46 — flat documentation icons (no bubble), CSC card close */ .hg-fi { --fc: #0a84ff; width: var(--z, 40px); height: var(--z, 40px); flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--fc) 13%, transparent); color: var(--fc); box-shadow: none; } .hg-fi .ic, .hg-fi svg { width: 52%; height: 52%; } .hg-fi.c-blue { --fc: #0a84ff; } .hg-fi.c-green { --fc: #1f9d55; } .hg-fi.c-orange { --fc: #f07b12; } .hg-fi.c-red { --fc: #e5484d; } .hg-fi.c-purple { --fc: #8e5cf0; } .hg-fi.c-pink { --fc: #e2528e; } .hg-fi.c-teal { --fc: #13a2b3; } .hg-fi.c-indigo { --fc: #5856d6; } .hg-fi.c-gold { --fc: #c99400; } .hg-fi.c-gray { --fc: #8e8e93; } :root[data-theme="dark"] .hg-fi { background: color-mix(in srgb, var(--fc) 20%, transparent); } .hg-head .hg-fi { --z: 48px !important; } .hg-tabs a .ic, .hg-tabs a svg { opacity: .85; } .csc-card { position: relative; } .csc-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; z-index: 2; } #csc-home .csc-card .hg-h { padding-right: 40px; } /* ==== v1947.css ==== */ /* v19.47 — layout polish */ /* ---------- round icon placeholders: flatter, still softly embossed ---------- */ html body .ic-tile { background: radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.2), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(var(--tc), .9), rgba(var(--tc), .74)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 -1px 1px rgba(0,0,0,.08), 0 3px 8px -4px rgba(var(--tc), .55) !important; } :root[data-theme="dark"] body .ic-tile { background: radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(var(--tc), .82), rgba(var(--tc), .64)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.14), 0 3px 10px -5px rgba(var(--tc), .5) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body .ic-tile { background: radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(180deg, rgba(var(--tc), .82), rgba(var(--tc), .64)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.14), 0 3px 10px -5px rgba(var(--tc), .5) !important; } } html body .ic-tile .ic { filter: none; } /* ---------- user guide: cards flow in independent columns (masonry) ---------- */ @media (min-width: 1000px) { /* v19.52: cards are placed by help.js into equal columns, each card going to the shortest column (reading order kept) */ #view .hg-grid.hg-m { display: flex !important; gap: 14px; align-items: flex-start; } #view .hg-grid.hg-m > .hg-mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; } #view .hg-grid.hg-m .hg-sec { margin: 0 !important; width: 100%; } } .hg-qc > .hg-fi { display: inline-grid; place-items: center; } .hg-fi > .ic, .hg-fi > svg { display: block; margin: 0; } /* ---------- Admin + Learn tiles: one uniform compact size, up to 6 per row ---------- */ @media (min-width: 901px) { #view .adtiles { grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 80px) / 6)), 1fr)); gap: 16px; } #view .adtile:not(.open) .adtile-h { aspect-ratio: auto; height: 164px; min-height: 0; padding: 18px; gap: 11px; } #view .adtile:not(.open) .adtile-h .ic-tile { --ts: 44px !important; } #view .adtile:not(.open) .adtile-t b { font-size: 1.02rem; } #view .adtile:not(.open) .adtile-t .tiny { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } #view .adtile:not(.open) .adtile-n { top: 16px; right: 16px; } #view .lcats.ltiles { grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - 80px) / 6)), 1fr)) !important; gap: 16px !important; } #view .ltiles > .lcat:not(.open) { aspect-ratio: auto; height: 212px; } #view .ltiles > .lcat:not(.open) > .lcat-h { padding: 18px; gap: 12px; } #view .ltiles > .lcat:not(.open) > .lcat-h .ic-tile { --ts: 44px !important; } #view .ltiles > .lcat:not(.open) > .lcat-h .lcat-t { gap: 5px; min-height: 0; width: 100%; } #view .ltiles > .lcat:not(.open) > .lcat-h .lcat-t b { font-size: 1.04rem; line-height: 1.25; } #view .ltiles > .lcat:not(.open) > .lcat-h .lcat-t > .muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } #view .ltiles > .lcat:not(.open) > .lcat-h .lcat-t > .tiny:last-child:not(.muted) { padding-right: 42px; line-height: 1.3; } #view .ltiles > .lcat.ltile-dict:not(.open) > .lcat-h .lcat-t > .tiny:last-child { margin-top: 0; font-weight: 400; } #view .ltiles > .lcat:not(.open) > .lcat-h .chev { top: 18px; right: 18px; } #view .ltiles > .lcat:not(.open) > .lcat-h .ring, #view .ltiles > .lcat:not(.open) > .lcat-h svg:not(.ic) { right: 16px; bottom: 16px; } } /* ---------- Settings (all screens; v19.52 phones too — see the stacked rules below) ---------- */ @media all { #view .set-stack.s47 { display: flex; flex-direction: column; gap: 14px; } #view .set-stack.s47 > *, #view .set-stack.s47 .card { margin: 0 !important; } #view .set-stack.s47 .lg-wait { opacity: 1 !important; } #view .set-stack.s47 .card h2 { font-size: 1.12rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } #view .set-stack.s47 .card h2 .ic { width: 20px; height: 20px; } .s47 .field > label { display: block; font-size: .8rem; font-weight: 700; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s47 .field > label .tiny { font-weight: 500; } .s47 :is(.s47-r2, .s47-r3, .s47-prow) :is(input[type="text"], input[type="email"], select) { height: 42px; box-sizing: border-box; margin: 0; } .s47 :is(.s47-r2, .s47-r3) .btn, .s47 .s47-seg { height: 42px; box-sizing: border-box; } .s47-acct > .row { margin: 10px 0 14px !important; } .s47-r2 { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(140px, .8fr) auto auto; gap: 12px; align-items: end; } .s47-r3 { display: flex; gap: 12px; align-items: flex-end; margin-top: 12px; } .s47-r3 > .field { flex: 1; min-width: 180px; margin: 0; } .s47-btns { display: flex; gap: 8px; flex: none; } .s47 .s47-btns .btn, .s47 .s47-pd .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 0 16px; } .s47 .s47-btns .btn .ic, .s47 .s47-pd .btn .ic { width: 18px; height: 18px; } html body #view .set-stack.s47 .card .btn.s47-out, html body #view .set-stack.s47 .card .btn.ghost.s47-out { color: #ff453a !important; background: rgba(255,69,58,.13) !important; box-shadow: inset 0 0 0 1px rgba(255,69,58,.22) !important; } html body #view .set-stack.s47 .card .btn.s47-out:hover { background: rgba(255,69,58,.2) !important; } .s47-lv .seg { display: flex; } .s47 .s47-seg { display: flex; align-items: stretch; padding: 3px; } .s47 .s47-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; white-space: nowrap; flex: 1; } .s47 .s47-seg button .ic { width: 17px; height: 17px; } .s47-hide { display: none !important; } .s47-prefs { padding-top: 16px !important; padding-bottom: 16px !important; } .s47-prow { display: grid; grid-template-columns: minmax(170px, .55fr) minmax(300px, 1.2fr) minmax(260px, 1fr); gap: 18px; align-items: end; } .s47-prow > .field { margin: 0 !important; min-width: 0; } .s47-prow select { width: 100%; } .s47-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .s47-row3 > .card { min-width: 0; display: flex; flex-direction: column; } .s47-links { display: flex; flex-direction: column; } .s47-links a { display: flex; align-items: center; gap: 10px; padding: 9px 2px; color: inherit; text-decoration: none; font-size: .92rem; font-weight: 600; border-top: 1px solid rgba(128,128,140,.14); } .s47-links a:first-child { border-top: 0; padding-top: 2px; } .s47-links a > span { flex: 1; min-width: 0; } .s47-links a > .ic:first-child { width: 18px; height: 18px; color: #0a84ff; } .s47-links a > .ic:last-child { width: 16px; height: 16px; opacity: .45; } .s47-links a:hover > span { color: #0a84ff; } .s47-ver { margin: auto 0 0; padding-top: 8px; } } /* v19.52 phones: same cards and order as the computer layout, stacked */ @media (max-width: 900px) { .s47-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .s47-r2 > .s47-lv, .s47-r2 > .s47-pd { grid-column: 1 / -1; } .s47-r2 > .s47-pd > label { display: none; } .s47 .s47-pd .btn { width: 100%; justify-content: center; } .s47-r3 { flex-direction: column; align-items: stretch; gap: 10px; } .s47-r3 > .field { min-width: 0; } .s47-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .s47 .s47-btns .btn { justify-content: center; padding: 0 8px; } .s47 .s47-btns .btn { font-size: .9rem; gap: 5px; padding: 0 6px; min-width: 0; } .s47 .s47-btns .btn .ic { width: 16px; height: 16px; flex: none; } .s47-row3 > .ad-linkcard { margin: 0 !important; flex-direction: row !important; } .s47 .s47-seg button { padding: 0 8px; } .s47-prow { grid-template-columns: minmax(0, 1fr); gap: 14px; } .s47-row3 { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 901px) and (max-width: 1279px) { .s47-r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s47-r3 { flex-wrap: wrap; } .s47-prow { grid-template-columns: minmax(0, 1fr); } .s47-row3 { grid-template-columns: minmax(0, 1fr); } } /* v19.58: narrow phones say "Change pass" */ .s47 .cpw-s { display: none; } @media (max-width: 430px) { .s47 .cpw-l { display: none; } .s47 .cpw-s { display: inline; } } /* ==== v1950.css ==== */ /* v19.50 — phones: lighter glass bars (40% background, 90% icons) and a soft pill on the active tab */ @media (max-width: 900px) { :root { --b50-bg: rgba(255,255,255,.4); --b50-pill: rgba(0,0,0,.06); } :root[data-theme="dark"] { --b50-bg: rgba(34,34,38,.4); --b50-pill: rgba(255,255,255,.1); } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --b50-bg: rgba(34,34,38,.4); --b50-pill: rgba(255,255,255,.1); } } @media (max-width: 900px) { /* bottom bar, search, Messages Chats | People: 40% background */ html:root body .dock .tabbar.tabbar.tabbar, html:root body .dock .tb-search.tb-search.tb-search, html:root body.on-msgs .mx-list .mx-tabs.mx-tabs.mx-tabs { background: var(--b50-bg) !important; } /* their icons and labels at 90% */ html body .dock .tabbar a > svg, html body .dock .tabbar a > span, html body .dock .tb-search > svg, html body.on-msgs .mx-list .mx-tabs > button > * { opacity: .9; } /* active tab: a low-opacity background behind the tapped icon */ html:root body:not(.tb-min) .dock .tabbar.tabbar a.on.on { background: var(--b50-pill) !important; border-radius: 999px !important; transition: background .25s; } /* top bar: photo ring, name pill, bell, chat, back: 40% background (the red (x) state keeps its own color) */ html:root body .mobilebar .mname.mname.mname, html:root body .mobilebar .gl-av.gl-av.gl-av, html:root body .mobilebar .gl-circle.gl-circle.gl-circle.gl-circle:not(.is-x) { background: var(--b50-bg) !important; } /* their icons and text at 90% (the photo and the red badges stay at full strength) */ html body .mobilebar .mname > *, html body .mobilebar .gl-circle > svg, html body .mobilebar .gl-circle > span:not([class*="badge"]):not(.nb-x) { opacity: .9; } } /* v19.52: round icon placeholders everywhere are tinted glass (after the "Glass button" Figma community file): a pane in the icon's own color (90% -> 72% in light mode, 80% -> 62% in dark), a soft top sheen and diagonal glare, a bright bottom rim, inner depth, and a soft glow in the circle's color. The glyph is white at full strength. */ html:root body .ic-tile.ic-tile { background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.176) 40%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(var(--tc),.90), rgba(var(--tc),.72)) !important; -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), inset 0 -1.5px 1px rgba(255,255,255,.55), inset 0 2px 3px rgba(255,255,255,.25), inset 0 -6px 10px -6px rgba(0,0,0,.18), 0 6px 18px -4px rgba(var(--tc),.5), 0 0 14px rgba(var(--tc),.28), 0 2px 4px -2px rgba(0,0,0,.2) !important; } html:root body .ic-tile.ic-tile .ic { opacity: 1 !important; color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)) !important; } html:root[data-theme="dark"] body .ic-tile.ic-tile { background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.096) 40%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.128), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(var(--tc),.80), rgba(var(--tc),.62)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -1.5px 1px rgba(255,255,255,.3), inset 0 2px 3px rgba(255,255,255,.12), inset 0 -6px 10px -6px rgba(0,0,0,.35), 0 6px 18px -4px rgba(var(--tc),.45), 0 0 16px rgba(var(--tc),.3), 0 2px 5px -2px rgba(0,0,0,.5) !important; } @media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]) body .ic-tile.ic-tile { background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.096) 40%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.128), rgba(255,255,255,0) 55%), linear-gradient(160deg, rgba(var(--tc),.80), rgba(var(--tc),.62)) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -1.5px 1px rgba(255,255,255,.3), inset 0 2px 3px rgba(255,255,255,.12), inset 0 -6px 10px -6px rgba(0,0,0,.35), 0 6px 18px -4px rgba(var(--tc),.45), 0 0 16px rgba(var(--tc),.3), 0 2px 5px -2px rgba(0,0,0,.5) !important; } } /* v19.52 phones: the top bar's blurred gradient runs from the very top of the screen to the bottom of the name pill */ @media (max-width: 900px) { html body .mobilebar::before { inset: 0 0 10px 0 !important; } } /* v19.55 phones: quiz header stays put; 50% backdrop + blur behind it while scrolled (see v1950.js) */ @media (max-width: 900px) { #view .qtop { position: sticky; top: 72px; z-index: 6; margin: 0 -16px 12px; padding: 4px 16px 10px; } #view .qtop > .qhead { position: static !important; top: auto !important; margin: 0 0 10px !important; background: none !important; padding: 0 !important; } #view .qtop > .progress { margin: 0 !important; } #view .qtop::before { content: ""; position: absolute; left: 0; right: 0; top: -90px; bottom: -20px; z-index: -1; pointer-events: none; background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .25s ease; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); } :root[data-theme="dark"] #view .qtop::before { background: rgba(0,0,0,.5); } #view .qtop.stuck::before { opacity: 1; } } @media (max-width: 900px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view .qtop::before { background: rgba(0,0,0,.5); } } /* v19.56 payments: what the screenshot check read */ .ss-line { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; line-height: 1.4; } .ss-line .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; } .ss-line.ok { color: #1f9d55; } .ss-line.no { color: #c26a00; } .ss-line b { font-weight: 700; } /* v19.57 admin payments: Bank email folds open / closed */ .fold { border: 1px solid rgba(128,128,140,.18); border-radius: 14px; margin: 0 0 4px; background: rgba(128,128,140,.04); } .fold-h { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-radius: 14px; } .fold-h:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; } .fold-h:hover { background: rgba(128,128,140,.07); } .fold-h h3 { margin: 0 !important; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; } .fold-chev { display: inline-grid; place-items: center; opacity: .55; transition: transform .25s ease; } .fold-chev .ic { width: 18px; height: 18px; } .fold.open .fold-chev { transform: rotate(90deg); } .fold-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .fold.open .fold-b { grid-template-rows: 1fr; } .fold-in { overflow: hidden; min-height: 0; padding: 0 14px; } .fold.open .fold-in { padding-bottom: 14px; } .fold-in > :first-child { margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .fold-b, .fold-chev { transition: none; } } /* v19.57 profile: admins get an Admin button. Computers: one row (Edit profile · Remove photo · Admin). Phones: Admin sits under the other two, as wide as both together. */ .pbtns > .pb-admin { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .pbtns > .pb-admin .ic { width: 18px; height: 18px; color: #e5484d; } @media (max-width: 900px) { .pbtns.pb-adm { display: grid !important; grid-template-columns: repeat(2, auto); width: max-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; gap: 10px; } .pbtns.pb-adm:not(:has(#p-rmav)) { grid-template-columns: auto; } .pbtns.pb-adm > .btn { justify-content: center; margin: 0 !important; } .pbtns.pb-adm > .pb-admin { grid-column: 1 / -1; } } /* v19.57 Messages: admin Active status toggle */ .ml-ghost.is-off { color: #8e8e93; } /* v19.58 Settings (computers): Admin card beside About; four cards in the row on wide screens */ @media (min-width: 1280px) { .s47-row3.has-adm { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1700px) { .s47-row3.has-adm { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .s47-admin h2 .s47-ah { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .s47-admin h2 .s47-ah:hover { color: #e5484d; } .s47-admin h2 .ic, .s47-admin .s47-links a > .ic:first-child { color: #e5484d; } .s47-admin .s47-links a:hover > span { color: #e5484d; } /* v19.58 admin lists: 5 at a time + View more */ .pg-hide { display: none !important; } .pg-more { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 10px 0 4px; } .pg-more .ic { width: 18px; height: 18px; transform: rotate(90deg); } .pg-more .pg-n { font-weight: 500; opacity: .6; font-size: .85em; } /* v19.58 phones: Name bar switch (profile) — computers don't show it */ .nb-row { display: none; } @media (max-width: 900px) { .nb-row { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(128,128,140,.16); text-align: left; cursor: pointer; } .nb-row .nb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html.no-namebar body .mobilebar .mname { display: none !important; } } /* v19.59 explanations: key clue on its own line + yellow "Tandaan" tip */ .xk { display: block; margin: 0 0 6px; } .x-tip { margin: 10px 0 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 196, 0, .14); box-shadow: inset 0 0 0 1px rgba(214, 160, 0, .18); font-style: normal; line-height: 1.5; } .x-tip-h { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a6a00; margin-bottom: 2px; } :root[data-theme="dark"] .x-tip { background: rgba(255, 196, 0, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 0, .16); } :root[data-theme="dark"] .x-tip-h { color: #f2c14e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .x-tip { background: rgba(255, 196, 0, .12); } :root:not([data-theme="light"]) .x-tip-h { color: #f2c14e; } } /* v19.61 admin: ready-made decline replies */ .qr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; } .qr-chips .qr-c { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; font: inherit; font-size: .85rem; font-weight: 600; color: inherit; background: rgba(128,128,140,.12); } .qr-chips .qr-c .ic { width: 16px; height: 16px; } .qr-chips .qr-c.on { background: rgba(229,72,77,.14); color: #d93036; box-shadow: inset 0 0 0 1px rgba(229,72,77,.3); } .modal textarea#pn-n, .modal textarea#rn-n { width: 100%; box-sizing: border-box; resize: vertical; min-height: 124px; font: inherit; line-height: 1.45; } /* v19.62 Group Study discussion: chat panel is exactly as tall as the screen (like the side menu); only the messages scroll */ @media (min-width: 1100px) { #view .gs-dgrid .gs-side { position: sticky; top: 16px; height: calc(100vh - 32px); max-height: none; min-height: 0; overflow: hidden; } /* the messenger button and chat heads move just left of the chat panel so they never cover its Send button */ body:has(#view .gs-dgrid .gs-side) #m-launch { right: calc(320px + 52px); } body:has(#view .gs-dgrid .gs-side) #m-heads { right: calc(320px + 122px); } body:has(#view .gs-dgrid .gs-side) #m-heads.col { right: calc(320px + 52px); } #view .gs-dgrid .gs-side .gs-clist { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; } #view .gs-dgrid .gs-side > :not(.gs-clist) { flex: none; } } .gs-crx { animation: gsRxOut 1.5s ease forwards; } @keyframes gsRxOut { 0%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px) scale(.96); } } /* v19.62 desktop chat heads beside the messenger button */ @media (min-width: 1500px) { body:has(#view .gs-dgrid .gs-side) #m-launch { right: calc(360px + 52px) !important; } body:has(#view .gs-dgrid .gs-side) #m-heads { right: calc(360px + 122px) !important; } } #m-heads { position: fixed; right: 92px; bottom: 22px; z-index: 61; display: flex; flex-direction: row-reverse; gap: 10px; align-items: flex-end; } #m-heads.col { right: 22px; bottom: 92px; flex-direction: column; } .m-chead { position: relative; width: 52px; height: 52px; } .m-chead.fresh { animation: mHeadIn .35s cubic-bezier(.2, 1.3, .4, 1); } @keyframes mHeadIn { from { transform: scale(.4) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } .m-head-b { all: unset; cursor: pointer; display: block; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.85); position: relative; } .m-head-b .av-wrap, .m-head-b .avatar, .m-head-b img { width: 52px !important; height: 52px !important; border-radius: 50%; display: grid !important; place-items: center; font-size: 19px !important; line-height: 1 !important; object-fit: cover; overflow: hidden; } .m-head-b:hover { transform: scale(1.05); } .m-head-b:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; } .m-head-n { position: absolute; left: -4px; bottom: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff3b30; color: #fff; font: 700 11px/18px system-ui, sans-serif; text-align: center; font-style: normal; box-shadow: 0 0 0 2px #fff; } .m-head-x { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(40,40,46,.9); color: #fff; font: 700 13px/20px system-ui, sans-serif; padding: 0; box-shadow: 0 0 0 2px #fff; opacity: .9; } .m-head-x:hover { opacity: 1; background: #ff3b30; } .m-head-tip { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; background: rgba(20,20,24,.88); color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s; } #m-heads.col .m-head-tip { bottom: auto; left: auto; right: 62px; top: 50%; transform: translateY(-50%); } .m-chead:hover .m-head-tip { opacity: 1; } @media (max-width: 899px) { #m-heads { display: none !important; } } /* v19.62 Group Study Live card (Home, Practice, Notifications, Friends): green tint */ #view .gs-rejoin.gs-livecard { border: 1px solid rgba(40,190,85,.35) !important; background-image: linear-gradient(135deg, rgba(40,190,85,.14), rgba(40,190,85,.06)) !important; } :root[data-theme="dark"] #view .gs-rejoin.gs-livecard { border-color: rgba(40,190,85,.35) !important; background-image: linear-gradient(135deg, rgba(12,84,40,.72), rgba(8,58,30,.62)) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view .gs-rejoin.gs-livecard { background-image: linear-gradient(135deg, rgba(12,84,40,.72), rgba(8,58,30,.62)) !important; } } #view .gs-rejoin.gs-livecard .gs-rjl { background: linear-gradient(160deg, #2fcf66, #1c9e4a) !important; color: #fff; } /* v19.65 Group Study: background tint and Next button follow the current question's subject (like drills and mocks) */ html[data-subj] body.in-gs .gs-answer .gs-glow, html[data-subj] body.in-gs .gs-discuss .gs-glow { display: none; } html[data-subj] body.in-gs #gs-dnext, html[data-subj] body.in-gs #gs-next:not(:disabled), html[data-subj] body.in-gs #gs-knext:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--subj) 90%, #000 10%), color-mix(in srgb, var(--subj) 72%, #000 28%)) !important; color: #fff !important; border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px color-mix(in srgb, var(--subj) 35%, transparent) !important; } html[data-subj] body.in-gs #gs-dnext .ic, html[data-subj] body.in-gs #gs-next .ic, html[data-subj] body.in-gs #gs-knext .ic { color: #fff !important; } /* v19.65 Group Study setup: Sprint / Half / Full mock picker */ .gs-mocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .gs-mock { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; background: rgba(128,128,140,.1); box-shadow: inset 0 0 0 1px rgba(128,128,140,.18); } .gs-mock b { font-size: 1rem; } .gs-mock span { font-size: .82rem; font-weight: 600; opacity: .8; } .gs-mock em { font-style: normal; font-size: .76rem; opacity: .65; } .gs-mock.on { background: rgba(10,132,255,.14); box-shadow: inset 0 0 0 2px #0a84ff; } .gs-mock:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; } @media (max-width: 560px) { .gs-mocks { grid-template-columns: minmax(0, 1fr); } } /* v19.66 desktop chat box header: Friends · Active status · New message · Minimize · Expand, pinned top-right in one row */ #m-panel .mx-phead { display: flex !important; flex-direction: row !important; width: 100% !important; max-width: none !important; align-self: stretch !important; box-sizing: border-box; flex: none; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; } #m-panel .mx-phead > b { flex: 1 1 auto; min-width: 0; white-space: nowrap; } #m-panel .mx-pbtns { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 2px; flex: none; margin-left: auto; } #m-panel .mx-pbtns .m-ic { position: relative; flex: none; } #m-panel .mx-pbtns .m-count { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3b30; color: #fff; font: 700 10px/16px system-ui, sans-serif; font-style: normal; text-align: center; } /* v19.66 a minimized chat window becomes a round chat head (their photo); click it to reopen, × to close */ @media (min-width: 900px) { html body .m-win.min { width: 56px !important; height: 56px !important; min-height: 0 !important; border-radius: 50% !important; padding: 0 !important; overflow: visible !important; background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body .m-win.min .m-msgs, html body .m-win.min .m-form, html body .m-win.min .m-back, html body .m-win.min .m-who > div, html body .m-win.min .m-wbtn > :not([data-close]), html body .m-win.min .m-info, html body .m-win.min .m-typing { display: none !important; } html body .m-win.min .m-whead { padding: 0 !important; min-height: 0 !important; border: 0 !important; height: 56px; position: relative; background: none !important; } html body .m-win.min .m-who { flex: none; gap: 0; } html body .m-win.min .m-who .av-wrap, html body .m-win.min .m-who .avatar, html body .m-win.min .m-who img { width: 56px !important; height: 56px !important; font-size: 21px !important; border-radius: 50%; box-shadow: 0 6px 18px -6px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.85); } html body .m-win.min .m-who:hover .avatar, html body .m-win.min .m-who:hover img { transform: scale(1.05); } html body .m-win.min .m-wbtn { position: absolute; top: -5px; right: -5px; } html body .m-win.min [data-close] { width: 20px !important; height: 20px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; background: rgba(40,40,46,.92) !important; color: #fff !important; box-shadow: 0 0 0 2px #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; } html body .m-win.min:hover [data-close], html body .m-win.min:focus-within [data-close] { opacity: 1; } html body .m-win.min [data-close] .ic, html body .m-win.min [data-close] svg { width: 12px !important; height: 12px !important; } html body .m-win.min [data-close]:hover { background: #ff3b30 !important; } } /* v19.67 chat heads: always in one row left of the messenger button, bottoms aligned with it; open chat windows sit to their left */ @media (min-width: 900px) { #m-heads, #m-heads.col { bottom: 22px !important; flex-direction: row-reverse !important; } body:not(:has(#view .gs-dgrid .gs-side)) #m-heads { right: 92px !important; } #msgr:not(.panel-open) #m-wins { right: calc(96px + var(--m-heads-w, 0px)) !important; } .m-head-x { opacity: 1 !important; } } /* v19.67 Practice: Group Study Live card while a session is live */ #view .gs-pcard.gs-pcard-live { border: 1px solid rgba(40,190,85,.35) !important; background-image: linear-gradient(135deg, rgba(40,190,85,.16), rgba(40,190,85,.06)) !important; } :root[data-theme="dark"] #view .gs-pcard.gs-pcard-live { background-image: linear-gradient(135deg, rgba(12,84,40,.72), rgba(8,58,30,.62)) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #view .gs-pcard.gs-pcard-live { background-image: linear-gradient(135deg, rgba(12,84,40,.72), rgba(8,58,30,.62)) !important; } } #view .gs-pcard .gs-pnow { color: var(--gs-green, #28BE55); } /* v19.67 Notifications: live group study row */ .n-act.gs-nact { border: 1px solid rgba(40,190,85,.3); background: linear-gradient(135deg, rgba(40,190,85,.14), rgba(40,190,85,.05)); } :root[data-theme="dark"] .n-act.gs-nact { background: linear-gradient(135deg, rgba(12,84,40,.6), rgba(8,58,30,.45)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .n-act.gs-nact { background: linear-gradient(135deg, rgba(12,84,40,.6), rgba(8,58,30,.45)); } } /* v19.68: open chat windows line up left of the chat heads (which sit left of the chat box or the messenger button) */ @media (min-width: 900px) { #msgr #m-wins, #msgr:not(.panel-open) #m-wins { right: calc(var(--m-heads-r, 92px) + var(--m-heads-w, 0px) + 4px) !important; } body:not(:has(#m-heads)) #msgr.panel-open #m-wins { right: 380px !important; } body:not(:has(#m-heads)) #msgr:not(.panel-open) #m-wins { right: 96px !important; } } /* v19.70 CSC backup-source note */ .csc-note { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(59,130,246,.1); color: var(--ink, #1e3a8a); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; } .csc-note svg { flex: none; margin-top: 2px; }