/* ========================================================================= Epoché — editorial redesign overlay (app-wide) ------------------------------------------------------------------------- Loads AFTER app.css. Purely additive: it restyles the app toward a more editorial, hierarchy-first look — Literata display type, gradient-gold primary actions, calmer surfaces, higher-contrast secondary text. It began scoped to Recall & Community; the 2026-07 visual-unification pass extended the same language to Home, Learn and Map so the whole product reads as one piece. No markup, element IDs, or JS behaviour are changed, so it is safe to add and trivial to remove (delete this file + its ). Every rule is pinned under a #view-* id so nothing leaks between surfaces. ========================================================================= */ /* ---- shared editorial display type ------------------------------------ */ #view-recall .recall-title, #view-community .comm-title{ font-family:'Literata',Georgia,serif; font-weight:500; letter-spacing:-0.012em; color:rgba(240,235,224,0.97); } #view-recall .recall-title{ font-size:2rem; } #view-community .comm-title { font-size:2.1rem; } #view-recall .recall-sub, #view-community .comm-sub{ color:rgba(160,154,142,0.82); } /* ======================================================================= RECALL ===================================================================== */ /* Hero — the single obvious focal point: warmer, deeper, more air */ #view-recall .rc-hero{ background:linear-gradient(120deg,rgba(212,180,131,0.085),rgba(255,255,255,0.014)); border-color:rgba(255,255,255,0.07); box-shadow:inset 3px 0 0 0 rgba(212,180,131,0.85); border-radius:20px; padding:2.1rem 2.3rem; gap:2rem; } #view-recall .rc-hero-due{ font-family:'Literata',Georgia,serif; font-weight:600; font-size:2.4rem; color:rgba(240,235,224,0.98); } #view-recall .rc-hero-ring .rcr-txt{ font-family:'Literata',Georgia,serif; } #view-recall .rc-hero-stats{ gap:1.6rem; } #view-recall .rc-stat-n{ font-family:'Literata',Georgia,serif; font-weight:600; font-size:1.6rem; color:#e6cfa0; } #view-recall .rc-hero-stats .rc-stat:nth-child(n+2) .rc-stat-n{ color:rgba(238,233,223,0.95); } /* Primary action → gradient-gold pill with real presence */ #view-recall .rc-start{ background:#d4b483; color:#1a1408; border-radius:12px; padding:0.8rem 1.7rem; font-size:0.9rem; box-shadow:0 8px 22px -8px rgba(201,168,106,0.7); } #view-recall .rc-start:hover{ background:#e0c89a; transform:translateY(-1px); } #view-recall .rc-mode.active{ background:#d4b483; color:#1a1408; } /* Review / Flashcards → clean pill toggle */ #view-recall .recall-tabs{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:11px; padding:3px; } #view-recall .rtab{ border-radius:8px; padding:0.5rem 1.15rem; font-size:0.72rem; } #view-recall .rtab.active{ background:#d4b483; color:#1a1408; font-weight:600; } /* Panels — calmer surfaces, more breathing room, softer labels */ #recall-dashboard{ gap:1.3rem; } #view-recall .rc-panel{ background:rgba(255,255,255,0.022); border-color:rgba(255,255,255,0.07); border-radius:16px; padding:1.5rem 1.6rem; } #view-recall .rc-panel-title{ color:rgba(203,192,171,0.9); letter-spacing:0.14em; } #view-recall .rc-st-n{ font-family:'Literata',Georgia,serif; font-weight:600; } #view-recall .rc-heatmap{ opacity:0.9; } /* de-emphasise the densest widget */ /* In-session — serif prompt, gradient reveal, rounder fields */ #view-recall .rs-cloze, #view-recall .rs-prompt{ font-family:'Literata',Georgia,serif; } #view-recall .rs-reveal-btn{ background:#d4b483; border-color:transparent; border-radius:11px; } #view-recall .rs-reveal-btn:hover{ background:#e0c89a; } #view-recall .rs-input, #view-recall .rt-answer{ border-radius:12px; } #view-recall .rs-sum-stat-n{ font-family:'Literata',Georgia,serif; font-weight:600; } /* Flashcards */ #view-recall .fc-gen{ background:#d4b483; border-radius:10px; padding:0.6rem 1.3rem; } #view-recall .fc-gen.fc-ghost{ background:rgba(255,255,255,0.045); color:rgba(210,204,192,0.9); border:1px solid rgba(255,255,255,0.1); } #view-recall .fc-gen:hover{ filter:brightness(1.05); } #view-recall .fc-text{ font-family:'Literata',Georgia,serif; font-weight:400; } #view-recall .fc-face{ border-radius:18px; } /* ======================================================================= COMMUNITY ===================================================================== */ /* Compact identity header (5b) — small avatar, stats as chips, earned-medal strip. Reworks the existing .profile-card structure via CSS only. */ #view-community .profile-card{ box-shadow:inset 3px 0 0 0 rgba(212,180,131,0.85); background:linear-gradient(120deg,rgba(212,180,131,0.05),rgba(255,255,255,0.012)); padding:1.2rem 1.45rem; } #view-community .profile-head{ padding:0; gap:0.9rem; align-items:center; margin-bottom:1rem; } #view-community .profile-avatar{ width:52px; height:52px; font-size:1.3rem; box-shadow:0 0 0 3px rgba(184,154,106,0.14); } #view-community .profile-username{ font-family:'Literata',Georgia,serif; font-weight:600; font-size:1.25rem; } #view-community .profile-since{ font-size:0.66rem; } /* stats → inline chips (XP leads, in gold) */ #view-community .profile-stats{ display:flex; flex-wrap:wrap; gap:9px; border-top:none; padding:0; margin:0; } #view-community .profile-stats .pstat{ display:inline-flex; align-items:baseline; gap:6px; flex:none; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:999px; padding:6px 13px; } #view-community .profile-stats .pstat-n{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.98rem; line-height:1; color:rgba(235,230,220,0.94); } #view-community .profile-stats .pstat-l{ font-size:0.54rem; letter-spacing:0.09em; text-transform:uppercase; color:rgba(150,144,132,0.72); margin-top:0; } #view-community .profile-stats #pf-points{ color:#e6cfa0; } #view-community .profile-stats .pstat:nth-child(4){ order:-1; } /* privacy → compact divided row */ #view-community .profile-privacy{ padding:0.9rem 0 0; margin-top:0.9rem; border-top:1px solid rgba(255,255,255,0.05); } /* achievements → earned-only medal strip (the header keeps the "N of 12" count) */ #view-community .social-header .ach-wrap{ padding:0.9rem 0 0; margin-top:0.9rem; border-top:1px solid rgba(255,255,255,0.05); } #view-community .social-header .ach.locked{ display:none; } /* Social — Activity Feed (Phase 1): the default sub-tab, a living destination */ #view-community #activity-list{ display:flex; flex-direction:column; gap:9px; } #view-community .act-row{ display:flex; align-items:flex-start; gap:14px; padding:15px 17px; border-radius:14px; background:rgba(255,255,255,0.022); border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:border-color .16s, background .16s, transform .16s; } #view-community .act-row:hover{ border-color:rgba(201,168,106,0.28); background:rgba(201,168,106,0.05); transform:translateY(-1px); } #view-community .act-avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:600 15px 'Literata',Georgia,serif; color:#fff; flex:none; text-transform:uppercase; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.14); } #view-community .act-body{ flex:1; min-width:0; font:400 13.5px/1.55 'Inter',sans-serif; color:rgba(196,190,178,0.85); } #view-community .act-user{ font-family:'Literata',Georgia,serif; font-weight:600; color:rgba(234,229,219,0.95); } #view-community .act-what{ color:rgba(230,225,215,0.92); font-weight:500; } /* richer feed events (Phase 2): the verb varies by type; quotes get a pull-quote */ #view-community .act-verb{ color:rgba(196,190,178,0.7); } #view-community .act-quote{ margin-top:9px; padding:9px 14px; border-left:2px solid rgba(201,168,106,0.4); background:rgba(201,168,106,0.045); border-radius:0 9px 9px 0; font:400 13px/1.5 'Literata',Georgia,serif; font-style:italic; color:rgba(226,221,211,0.9); } #view-community .act-when{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.12em; text-transform:uppercase; color:rgba(150,144,132,0.5); margin-top:7px; } /* ✦ Congratulate — the lightweight social loop (Phase 2). Quiet gold outline by default; fills with the gold gradient once you've reacted (.mine). */ #view-community .act-react{ margin-top:10px; font:600 10.5px/1 'Inter',sans-serif; letter-spacing:0.03em; color:rgba(212,180,131,0.92); background:rgba(201,168,106,0.08); border:1px solid rgba(201,168,106,0.22); border-radius:9px; padding:6px 11px; cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .1s; } #view-community .act-react:hover{ background:rgba(201,168,106,0.15); border-color:rgba(201,168,106,0.42); } #view-community .act-react:active{ transform:scale(0.96); } #view-community .act-react.mine{ color:#1a1408; background:#d4b483; border-color:transparent; } #view-community .act-react:disabled{ opacity:0.6; cursor:default; } /* Presence (Phase 2 liveness): a green "active now" dot on the avatar for anyone seen in the last 5 min; a muted "· active Xh" suffix on the name otherwise. */ #view-community .act-avatar, #view-community .jr-av, #view-community .ur-avatar{ position:relative; } #view-community .pres-dot{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:#5fbf87; box-shadow:0 0 0 2.5px rgba(4,5,7,0.92); } #view-community .ur-when{ font:400 11px/1 'Inter',sans-serif; color:rgba(150,144,132,0.6); letter-spacing:0.02em; } /* skeleton loaders while the feed fetches */ #view-community .skel-row{ height:70px; border-radius:14px; background:linear-gradient(100deg,rgba(255,255,255,0.03) 30%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 70%); background-size:200% 100%; animation:skelSheen 1.3s ease-in-out infinite; } @keyframes skelSheen{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } } /* rich empty state */ #view-community .feed-empty{ text-align:center; padding:3rem 1.5rem; } #view-community .feed-empty-icon{ font-size:1.8rem; color:rgba(201,168,106,0.6); } #view-community .feed-empty-title{ font-family:'Literata',Georgia,serif; font-size:1.15rem; color:rgba(232,227,217,0.94); margin-top:0.6rem; } #view-community .feed-empty-sub{ font:400 13px/1.6 'Inter',sans-serif; color:rgba(160,154,142,0.8); max-width:390px; margin:0.5rem auto 1.3rem; } #view-community .feed-empty-btn{ font:600 12.5px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:11px; padding:11px 20px; cursor:pointer; } /* Phase 4: "People you may know" + invite. The suggestion reason rides as a muted suffix on the username (like presence), so rows reuse .user-row as-is. */ #view-community .pmk-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; } #view-community .pmk-invite{ font:600 10.5px 'Inter',sans-serif; color:rgba(212,180,131,0.92); background:rgba(201,168,106,0.08); border:1px solid rgba(201,168,106,0.24); border-radius:9px; padding:6px 11px; cursor:pointer; transition:background .15s, border-color .15s; text-transform:none; letter-spacing:normal; } #view-community .pmk-invite:hover{ background:rgba(201,168,106,0.16); border-color:rgba(201,168,106,0.42); } #view-community .ur-reason{ font:400 11px 'Inter',sans-serif; color:rgba(150,144,132,0.6); letter-spacing:0.02em; } #view-community .feed-suggested{ margin-top:1.6rem; text-align:left; } /* Phase 3: richer profile overlay — worldview summary, mastery medals, kept quotes. Scoped to #profile-overlay so it applies wherever the overlay lives. */ #profile-overlay .ov-section{ margin-top:1.05rem; padding-top:0.95rem; border-top:1px solid rgba(255,255,255,0.06); text-align:left; } #profile-overlay .ov-sec-title{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:rgba(201,168,106,0.75); margin-bottom:0.7rem; } #profile-overlay .ov-wv-summary{ font:400 14px/1.6 'Literata',Georgia,serif; color:rgba(228,223,213,0.92); } #profile-overlay .ov-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:0.7rem; } #profile-overlay .ov-chip{ font:500 11px 'Inter',sans-serif; color:rgba(212,180,131,0.9); background:rgba(201,168,106,0.08); border:1px solid rgba(201,168,106,0.2); border-radius:999px; padding:4px 10px; } #profile-overlay .ov-medals{ display:flex; flex-wrap:wrap; gap:6px; } #profile-overlay .ov-medal{ font:600 11px 'Inter',sans-serif; border-radius:8px; padding:4px 10px; color:#1a1408; } #profile-overlay .ov-medal.tier1{ background:#b87333; } #profile-overlay .ov-medal.tier2{ background:#c5ccd4; } #profile-overlay .ov-medal.tier3{ background:#e0c14a; } #profile-overlay .ov-quote{ font:400 13px/1.55 'Literata',Georgia,serif; font-style:italic; color:rgba(224,219,209,0.9); padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.045); } #profile-overlay .ov-quote:last-child{ border-bottom:none; } /* Segmented nav → cleaner pills (active keeps the gold gradient) */ #view-community .social-seg{ background:rgba(255,255,255,0.025); border-color:rgba(255,255,255,0.06); border-radius:14px; } #view-community .seg-btn{ font-size:0.78rem; } #view-community .seg-btn.active{ background:#d4b483; box-shadow:0 3px 14px -4px rgba(184,154,106,0.5); } /* Editorial serif on headings & display quotes for consistency with Recall */ #view-community .cm-dh-name, #view-community .cm-name, #view-community .pick-title, #view-community .quote-card-body, #view-community .dbt-motion{ font-family:'Literata',Georgia,serif; } #view-community .thread-name, #view-community .conv-name{ font-family:'Literata',Georgia,serif; font-weight:600; } #view-community .lb-rank{ font-family:'Literata',Georgia,serif; } /* Unify radii & spacing across the social surfaces */ #view-community .comm-panel{ border-radius:16px; } #view-community .lb-row, #view-community .conv-row, #view-community .cm-row, #view-community .user-row{ border-radius:14px; } /* ======================================================================= MICRO-CRAFT (Phase 5) — staggered feed reveal + tab cross-fades, all gated on prefers-reduced-motion so nothing moves for people who opt out. ===================================================================== */ @media (prefers-reduced-motion: no-preference){ /* Feed cards fade in; renderActivity() sets a per-card animation-delay. Opacity only, so it never fights the hover lift (transform). */ #view-community #activity-list .act-row, #view-community #activity-list .jr-card{ animation:actFade .34s ease both; } @keyframes actFade{ from{ opacity:0; } to{ opacity:1; } } /* Sub-tab panels cross-fade in when shown (display toggles re-trigger it). */ #view-community .comm-panel{ animation:panelFade .28s ease; } @keyframes panelFade{ from{ opacity:0; } to{ opacity:1; } } } /* Reduced motion: hold everything still — no entrance fades, no skeleton sheen. */ @media (prefers-reduced-motion: reduce){ #view-community #activity-list .act-row, #view-community #activity-list .jr-card, #view-community .comm-panel, #view-community .skel-row{ animation:none; } } /* ======================================================================= STRUCTURAL (full-fidelity) — Recall calm layout + two-pane Messages These pair with the reordered #recall-dashboard markup and the .msg-two-pane wrapper + .thread-open class added in index.html / app.js. ===================================================================== */ /* Recall — "More insights" disclosure that holds the secondary panels, so the default view is the calm hero → this week → weak spots → decks. */ #view-recall .rc-more{ border:1px solid rgba(255,255,255,0.06); border-radius:16px; background:rgba(255,255,255,0.012); overflow:hidden; } #view-recall .rc-more-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:0.8rem; padding:1.05rem 1.5rem; font-family:'Literata',Georgia,serif; font-size:1rem; color:rgba(228,222,210,0.92); } #view-recall .rc-more-sum::-webkit-details-marker{ display:none; } #view-recall .rc-more-note{ font-family:'Inter',sans-serif; font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(130,125,115,0.72); margin-left:auto; } #view-recall .rc-more-sum::after{ content:'\25BE'; font-family:'Inter',sans-serif; font-size:0.7rem; color:rgba(150,144,132,0.7); transition:transform .2s; } #view-recall details.rc-more[open] .rc-more-sum::after{ transform:rotate(180deg); } #view-recall details.rc-more[open] .rc-more-sum{ border-bottom:1px solid rgba(255,255,255,0.05); } #view-recall .rc-more-body{ display:flex; flex-direction:column; gap:1.3rem; padding:1.3rem 1.4rem; } /* Recall — pair Weak spots + Decks side by side, and stack the hero stats vertically, to match the 1a mock. */ #view-recall .rc-duo{ display:grid; grid-template-columns:1.4fr 1fr; gap:1.3rem; align-items:start; } @media (max-width:820px){ #view-recall .rc-duo{ grid-template-columns:1fr; } } #view-recall .rc-hero-stats{ flex-direction:column; gap:1.05rem; align-items:flex-start; border-left:1px solid rgba(255,255,255,0.07); padding-left:1.9rem; } #view-recall .rc-hero-stats .rc-stat{ text-align:left; } @media (max-width:760px){ #view-recall .rc-hero-stats{ flex-direction:row; border-left:none; padding-left:0; align-items:center; justify-content:center; } } /* decks render as compact one-per-row cards inside the narrower column */ #view-recall .rc-duo .rc-decks{ grid-template-columns:1fr; } /* Hero — serif "Today's review is ready" title + count-in-ring */ #view-recall .rc-hero-title{ font-family:'Literata',Georgia,serif; font-weight:500; font-size:1.5rem; color:rgba(240,235,224,0.97); letter-spacing:-0.01em; margin-bottom:0.5rem; } #view-recall .rc-hero-ring .rcr-txt{ fill:rgba(240,235,224,0.98); font-weight:600; } #view-recall .rc-hero-ring .rcr-sub{ fill:rgba(150,144,132,0.85); font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; } /* "This week" bars — reviewed (past) · due (today, hollow) · upcoming (faint) */ #view-recall .rc-fc-bar.done{ background:linear-gradient(180deg,#c9a86a,rgba(168,137,78,0.55)); } #view-recall .rc-fc-bar.today{ background:rgba(255,255,255,0.13); border:1.5px solid rgba(212,180,131,0.8); } #view-recall .rc-fc-bar.up{ background:rgba(255,255,255,0.08); } /* Weak spots — two-line rows (title + scholar eyebrow), wider name column */ #view-recall .rc-mrow{ grid-template-columns:minmax(0,1.5fr) 1fr auto; } #view-recall .rc-mname{ white-space:normal; overflow:visible; align-items:center; gap:10px; } #view-recall .rc-mname-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; } #view-recall .rc-mtitle{ font-family:'Inter',sans-serif; font-size:0.84rem; color:rgba(228,222,211,0.94); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #view-recall .rc-meyebrow{ font:600 0.55rem/1 'Inter',sans-serif; letter-spacing:0.1em; text-transform:uppercase; color:rgba(150,144,132,0.6); } /* Decks — compact rows with a due pill */ #view-recall .rc-duo .rc-decks .rc-deck{ display:flex; align-items:center; justify-content:space-between; gap:1rem; } #view-recall .rc-deck-pill{ font:600 0.72rem 'Inter',sans-serif; color:rgba(184,178,166,0.82); background:rgba(255,255,255,0.06); border-radius:999px; padding:0.3rem 0.75rem; white-space:nowrap; flex:none; } #view-recall .rc-deck-pill.due{ color:#1a1408; background:#d4b483; } /* Community — Messages becomes a true two-pane console on desktop. The .msg-two-pane wrapper carries the grid (the panel's own display is left to the tab-switch JS); the conversation list stays pinned while a thread is open, and an empty state shows until one is selected. */ #view-community .msg-two-pane{ display:contents; } @media (min-width:900px){ #view-community .msg-two-pane{ display:grid; grid-template-columns:290px 1fr; gap:0; border:1px solid rgba(255,255,255,0.07); border-radius:16px; overflow:hidden; min-height:544px; background:rgba(255,255,255,0.012); } #view-community #msg-conv-wrap{ display:flex!important; flex-direction:column; min-height:0; border-right:1px solid rgba(255,255,255,0.07); padding:1.1rem 1rem; overflow-y:auto; } #view-community #msg-thread-wrap{ display:flex!important; flex-direction:column; min-height:0; padding:1.1rem 1.2rem; } #view-community #msg-back{ display:none; } /* redundant in two-pane */ #view-community #cpanel-messages #msg-thread{ max-height:none; flex:1; min-height:0; } /* empty state until a conversation is chosen */ #view-community #cpanel-messages:not(.thread-open) #msg-thread-wrap > *{ display:none; } #view-community #cpanel-messages:not(.thread-open) #msg-thread-wrap::before{ content:'Select a conversation to start reading'; display:flex; align-items:center; justify-content:center; text-align:center; height:100%; color:rgba(150,144,132,0.5); font-family:'Literata',Georgia,serif; font-size:1.02rem; padding:2rem; } } /* ======================================================================= RECALL SESSION (in-review) — 4a "centered ritual" CSS-only restyle of the JS-rendered .rs-* markup: a calm, centered question, serif prompt, and letter-key answer cards (A–D via a CSS counter). No markup or JS changes; the .rs-opt.correct/.wrong state classes the session already sets are restyled to match. ===================================================================== */ #view-recall #rs-item{ max-width:680px; margin:0 auto; padding:14px 0 10px; } /* eyebrow row: instruction + current-rung pill + step dots, centered & calm */ #view-recall .rs-type{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; font-size:0.58rem; color:rgba(150,144,132,0.55); margin-bottom:1.5rem; } #view-recall .rs-type .rs-layer{ margin-left:0; color:#1a1408; background:#d4b483; } /* the question — the focal point */ #view-recall .rs-prompt{ font-family:'Literata',Georgia,serif; font-size:1.7rem; font-weight:500; line-height:1.35; color:rgba(240,235,224,0.97); text-align:center; margin-bottom:1.9rem; } #view-recall .rs-prompt.rs-cloze{ font-size:1.5rem; } #view-recall .rs-prompt .rs-tts{ width:34px; height:34px; border-radius:9px; margin-left:10px; } /* answer cards with letter keys */ #view-recall .rs-options{ gap:0.75rem; max-width:640px; margin:0 auto; counter-reset:opt; } #view-recall .rs-opt{ display:flex; align-items:center; gap:14px; font-size:0.95rem; line-height:1.45; padding:15px 18px; border-radius:14px; background:rgba(255,255,255,0.028); border:1px solid rgba(255,255,255,0.08); counter-increment:opt; } #view-recall .rs-opt::before{ content:counter(opt,upper-alpha); flex:none; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font:600 12px 'Inter',sans-serif; color:rgba(200,194,182,0.8); } #view-recall .rs-opt:hover:not(:disabled){ border-color:rgba(201,168,106,0.55); background:rgba(201,168,106,0.06); } #view-recall .rs-opt.correct{ border-color:rgba(120,200,150,0.55); background:rgba(120,200,150,0.09); color:rgba(224,240,228,0.96); } #view-recall .rs-opt.correct::before{ content:'✓'; background:rgba(120,200,150,0.85); border-color:transparent; color:#0c1a10; } #view-recall .rs-opt.wrong{ border-color:rgba(208,96,80,0.45); background:rgba(208,96,80,0.08); color:rgba(232,196,190,0.95); } #view-recall .rs-opt.wrong::before{ content:'✕'; background:rgba(208,96,80,0.72); border-color:transparent; color:#1a0c0a; } /* deeper rungs (cloze / free / feynman) + feedback + grades, centered */ #view-recall .rs-input, #view-recall .rs-textarea{ max-width:520px; margin:0 auto; display:block; border-radius:12px; } #view-recall .rs-reveal-btn{ display:block; margin:1rem auto 0; background:#d4b483; border-color:transparent; border-radius:11px; } #view-recall .rs-feedback{ max-width:600px; margin:1.2rem auto 0; text-align:center; } #view-recall .rs-grades{ max-width:600px; margin:1.4rem auto 0; } /* ======================================================================= RECALL v2 — R1 "The Constellation" + R3 "The Study" The sky is the centerpiece (canvas drawn by renderConstellation); the hero beneath trades the small ring for one enormous serif number. ===================================================================== */ /* the sky */ #view-recall .rc-sky{ position:relative; border:1px solid rgba(255,255,255,0.06); border-radius:16px; overflow:hidden; margin-bottom:1.3rem; background:radial-gradient(120% 100% at 50% 0%, #0a0d16 0%, #05060a 55%, #040507 100%); } #view-recall #rc-sky-canvas{ display:block; width:100%; } #view-recall .rc-sky-head{ position:absolute; top:18px; left:22px; pointer-events:none; } #view-recall .rc-sky-eyebrow{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.16em; text-transform:uppercase; color:rgba(201,168,106,0.8); } #view-recall .rc-sky-title{ font:500 21px/1.2 'Literata',Georgia,serif; color:rgba(240,235,224,0.97); margin-top:7px; } #view-recall .rc-sky-sub{ font:400 11.5px 'Inter',sans-serif; color:rgba(150,144,132,0.6); margin-top:4px; } #view-recall .rc-sky-legend{ position:absolute; right:18px; bottom:14px; display:flex; gap:14px; font:500 10px 'Inter',sans-serif; color:rgba(150,144,132,0.6); pointer-events:none; } #view-recall .rc-sky-legend span{ display:flex; align-items:center; gap:6px; } #view-recall .rc-sky-dot{ width:8px; height:8px; border-radius:50%; } #view-recall .rc-sky-dot.held{ background:#f4e7c8; box-shadow:0 0 8px rgba(244,231,200,0.8); } #view-recall .rc-sky-dot.drift{ background:#e8964f; } #view-recall .rc-sky-dot.ember{ background:#5a4038; } #view-recall .rc-sky-tip{ position:absolute; pointer-events:none; background:rgba(10,11,16,0.95); border:1px solid rgba(201,168,106,0.3); border-radius:10px; padding:8px 12px; font:500 11.5px 'Inter',sans-serif; color:rgba(232,227,217,0.95); opacity:0; transition:opacity .15s; white-space:nowrap; z-index:5; } #view-recall .rc-sky-tip .t-sub{ display:block; font-weight:400; font-size:10.5px; color:#e6cfa0; margin-top:2px; } /* fullscreen sky: the stage takes the viewport; page scroll locks beneath it */ #view-recall .rc-sky.rc-sky-full{ position:fixed; inset:0; z-index:1200; margin:0; border-radius:0; border:none; } html.rc-sky-lock, html.rc-sky-lock body{ overflow:hidden; } /* keep the overlays clear of notches and home indicators while immersed */ #view-recall .rc-sky-full .rc-sky-head{ top:calc(18px + env(safe-area-inset-top, 0px)); } #view-recall .rc-sky-full .rc-sky-ctl{ top:calc(16px + env(safe-area-inset-top, 0px)); } #view-recall .rc-sky-full .rc-sky-cta{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } #view-recall .rc-sky-full .rc-sky-legend{ bottom:calc(14px + env(safe-area-inset-bottom, 0px)); } /* sky view controls (zoom in / out / reset) */ #view-recall .rc-sky-ctl{ position:absolute; top:16px; right:16px; display:flex; gap:6px; } #view-recall .rc-sky-ctl button{ width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,0.12); background:rgba(10,11,16,0.72); color:rgba(220,214,202,0.9); font:600 15px/1 'Inter',sans-serif; cursor:none; } #view-recall .rc-sky-ctl button:hover{ border-color:rgba(201,168,106,0.5); color:#e6cfa0; } /* in-sky CTA — see the decay, act on it */ #view-recall .rc-sky-cta{ position:absolute; left:18px; bottom:14px; font:600 11.5px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:999px; padding:9px 16px; cursor:none; box-shadow:0 6px 22px -8px rgba(201,168,106,0.55); z-index:4; } /* star action card */ #view-recall .rc-sky-card{ position:absolute; width:240px; background:rgba(10,11,16,0.96); border:1px solid rgba(201,168,106,0.32); border-radius:14px; padding:14px 16px; z-index:6; box-shadow:0 18px 50px -20px rgba(0,0,0,0.8); } #view-recall .rc-sc-title{ font:500 15px/1.35 'Literata',Georgia,serif; color:rgba(240,235,224,0.97); } #view-recall .rc-sc-sub{ font:400 11.5px/1.5 'Inter',sans-serif; color:rgba(160,154,142,0.85); margin-top:4px; } #view-recall .rc-sc-actions{ display:flex; gap:8px; margin-top:12px; } #view-recall .rc-sc-btn{ flex:1; font:600 11px 'Inter',sans-serif; padding:8px 10px; border-radius:9px; border:1px solid rgba(201,168,106,0.3); background:rgba(201,168,106,0.08); color:#d4b483; cursor:none; } #view-recall .rc-sc-btn.primary{ background:#d4b483; color:#1a1408; border-color:transparent; } @media (max-width:560px){ #view-recall .rc-sky-card{ width:auto; } } /* THE DRIFT — the hero lives at the heart of the sky (centre = renderConstellation's cy = 52% of the stage). The button stays clickable; the wrapper lets taps through to the canvas. Zoomed in, the world pans beneath it, so it bows out. */ #view-recall .rc-sky-hero{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; z-index:3; transition:opacity .4s; } #view-recall .rc-sky.rc-sky-zoomed .rc-sky-hero{ opacity:0; } #view-recall .rc-sky.rc-sky-zoomed .rc-sky-hero .rc-start{ pointer-events:none; } #view-recall .rc-sky-hero-l{ font:600 8.5px/1.4 'Inter',sans-serif; letter-spacing:0.16em; text-transform:uppercase; color:rgba(150,144,132,0.75); margin-top:2px; } #view-recall .rc-sky-hero .rc-start{ pointer-events:auto; margin-top:10px; font:600 11px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:999px; padding:8px 18px; cursor:none; box-shadow:0 6px 24px -8px rgba(201,168,106,0.6); } #view-recall .rc-sky-hero .rc-start:hover{ background:#e0c89a; transform:translateY(-1px); } #view-recall .rc-sky-hero .rc-start:disabled{ opacity:0.45; transform:none; } @media (max-width:560px){ #view-recall .rc-sky-hero .rc-big-n{ font-size:42px; } /* phones: a footer strip under the canvas so the CTA doesn't sit on the rim caption ("the edge of forgetting") inside the drawing; the legend bows out (no room beside the CTA — fullscreen still shows it) */ #view-recall .rc-sky:not(.rc-sky-full){ padding-bottom:46px; } #view-recall .rc-sky:not(.rc-sky-full) .rc-sky-cta{ bottom:10px; } #view-recall .rc-sky:not(.rc-sky-full) .rc-sky-legend{ display:none; } } #view-recall .rc-sky-full .rc-sky-hero .rc-big-n{ font-size:64px; } /* "More insights" stat tiles in the Study's voice */ #view-recall .rc-st{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:12px 14px; } #view-recall .rc-st-n{ font:500 22px 'Literata',Georgia,serif; color:rgba(236,231,221,0.95); } #view-recall .rc-st-l{ font:600 9px/1 'Inter',sans-serif; letter-spacing:0.12em; text-transform:uppercase; color:rgba(150,144,132,0.6); margin-top:4px; } #view-recall .rc-st.warn .rc-st-n{ color:#d99f6c; } /* Scheduling pills (desired retention) */ #view-recall .rc-sched{ display:flex; gap:10px; flex-wrap:wrap; } #view-recall .rc-sched-opt{ flex:1; min-width:150px; text-align:left; font:600 12.5px 'Inter',sans-serif; color:rgba(210,205,195,0.9); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:12px 14px; cursor:none; transition:border-color .18s, background .18s; } #view-recall .rc-sched-opt span{ display:block; font:400 10.5px 'Inter',sans-serif; color:rgba(150,144,132,0.65); margin-top:4px; letter-spacing:normal; text-transform:none; } #view-recall .rc-sched-opt:hover{ border-color:rgba(201,168,106,0.35); } #view-recall .rc-sched-opt.active{ background:rgba(201,168,106,0.09); border-color:rgba(201,168,106,0.5); color:#e6cfa0; } /* the first-star bridge on the lesson celebration: one obvious golden door */ .celebrate-star{ background:#d4b483; color:#1a1408; box-shadow:0 8px 26px -8px rgba(201,168,106,0.7); } .celebrate-primary.celebrate-demoted{ background:rgba(255,255,255,0.06); color:rgba(210,205,195,0.85); box-shadow:none; } /* the evening reminder opt-in (web push) */ #view-recall .rc-push-btn{ margin-top:12px; width:100%; text-align:left; font:500 12px 'Inter',sans-serif; color:rgba(210,205,195,0.9); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:11px 14px; cursor:none; transition:border-color .18s; } #view-recall .rc-push-btn:hover{ border-color:rgba(201,168,106,0.35); } #view-recall .rc-push-btn.on{ background:rgba(201,168,106,0.09); border-color:rgba(201,168,106,0.5); color:#e6cfa0; } /* forecast "smooth the pile-up" action */ #view-recall .rc-fc-smooth{ margin-top:10px; font:600 11px 'Inter',sans-serif; color:#d4b483; background:rgba(201,168,106,0.07); border:1px solid rgba(201,168,106,0.26); border-radius:999px; padding:7px 14px; cursor:none; transition:background .15s; } #view-recall .rc-fc-smooth:hover{ background:rgba(201,168,106,0.15); } /* calibration insight line */ #view-recall .rc-calib{ margin-top:12px; font:400 12px/1.6 'Inter',sans-serif; color:rgba(212,180,131,0.85); border-top:1px solid rgba(255,255,255,0.05); padding-top:10px; } /* the Study's numbers hold their width while counting */ #view-recall .rc-big-n, #view-recall .rc-stat-n, #view-recall .rc-st-n{ font-variant-numeric:tabular-nums; } /* custom concept decks in the deck rail: ↑ move · ✎ rename · ↗ share · × delete */ #view-recall .rc-deck-custom{ position:relative; } #view-recall .rc-deck-acts{ display:flex; gap:5px; flex:none; margin-left:8px; } #view-recall .rc-deck-act{ flex:none; width:22px; height:22px; border-radius:7px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); color:rgba(150,144,132,0.7); font:600 12px/1 'Inter',sans-serif; cursor:none; } #view-recall .rc-deck-act:hover{ border-color:rgba(201,168,106,0.5); color:#e6cfa0; } #view-recall .rc-deck-act.danger:hover{ border-color:rgba(208,96,80,0.5); color:rgba(208,96,80,0.9); } #view-recall .rc-deck-new{ width:100%; text-align:left; font:500 12px 'Inter',sans-serif; color:rgba(201,168,106,0.8); background:rgba(201,168,106,0.04); border:1px dashed rgba(201,168,106,0.3); border-radius:12px; padding:12px 14px; cursor:none; margin-top:2px; transition:background .15s, border-color .15s; } #view-recall .rc-deck-new:hover{ background:rgba(201,168,106,0.09); border-color:rgba(201,168,106,0.5); } /* the star action card fits three actions */ #view-recall .rc-sc-actions{ flex-wrap:wrap; } #view-recall .rc-sc-btn{ min-width:70px; } /* flashcard decks rail — your cards, always one tap away */ #view-recall .fc-decks{ margin:0.4rem 0 1.1rem; } #view-recall .fc-decks-title{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:rgba(201,168,106,0.75); margin-bottom:10px; } #view-recall .fc-deck-row{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:11px 14px; margin-bottom:8px; transition:border-color .18s; } #view-recall .fc-deck-row:hover{ border-color:rgba(201,168,106,0.3); } #view-recall .fc-deck-name{ flex:1; min-width:0; font:500 13.5px 'Literata',Georgia,serif; color:rgba(232,227,217,0.95); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #view-recall .fc-deck-count{ font:400 11px 'Inter',sans-serif; color:rgba(150,144,132,0.7); white-space:nowrap; } #view-recall .fc-deck-count b{ color:#e6cfa0; font-weight:600; } #view-recall .fc-deck-acts{ display:flex; gap:6px; flex:none; } #view-recall .fc-deck-btn{ font:600 10.5px 'Inter',sans-serif; color:#d4b483; background:rgba(201,168,106,0.07); border:1px solid rgba(201,168,106,0.24); border-radius:999px; padding:6px 12px; cursor:none; transition:background .15s; } #view-recall .fc-deck-btn:hover{ background:rgba(201,168,106,0.15); } #view-recall .fc-deck-btn.primary{ color:#1a1408; background:#d4b483; border-color:transparent; } @media (max-width:560px){ #view-recall .fc-deck-row{ flex-wrap:wrap; } #view-recall .fc-deck-acts{ width:100%; justify-content:flex-end; } } /* ======================================================================= SOCIAL v3 — THE COMMONS (approved mockup: design-concepts-social-v2) One living room: presence strip, salon, merged stream, weekly held-rail. ===================================================================== */ /* the tabs lead the view and stick to the top of the scroll, so every seg owns the full page beneath it; your profile card lives with People */ #view-community .social-seg{ position:sticky; top:calc(6px + env(safe-area-inset-top, 0px)); z-index:40; margin:0 0 1.2rem; background:rgba(6,7,10,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px -18px rgba(0,0,0,0.9); } #view-community .comm-intro{ margin-bottom:1.1rem; } @media(max-width:560px){ #view-community .comm-intro{ margin-bottom:0.8rem; } #view-community .comm-title{ font-size:1.55rem; } #view-community .comm-sub{ display:none; } /* the tabs explain the room */ } #view-community .commons-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start; } @media(max-width:760px){ #view-community .commons-grid{ grid-template-columns:1fr; } } /* presence strip — the room's pulse */ #view-community .commons-presence{ display:flex; align-items:center; gap:10px; background:rgba(122,200,150,0.045); border:1px solid rgba(122,200,150,0.14); border-radius:14px; padding:10px 14px; margin-bottom:12px; } #view-community .commons-presence.quiet{ background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.07); } #view-community .cp-avs{ display:flex; } #view-community .cp-av{ width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font:600 11px 'Inter',sans-serif; color:rgba(255,255,255,0.92); position:relative; margin-right:-7px; border:2px solid #0b0e13; cursor:none; } #view-community .cp-av.sm{ margin-right:0; border:none; width:24px; height:24px; } #view-community .cp-dot{ position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%; background:#7ac896; border:2px solid #0a0c11; } #view-community .cp-txt{ font:500 12px 'Inter',sans-serif; color:rgba(196,190,178,0.85); margin-left:8px; } #view-community .cp-txt b{ color:rgba(170,220,190,0.95); font-weight:600; } #view-community .commons-presence.quiet .cp-txt b{ color:#e6cfa0; } /* THE READING ROOM — desks with candles; presence you can join */ #view-community .commons-presence.reading-room{ display:block; background:radial-gradient(120% 100% at 50% 0%, #0a0d16 0%, #06070b 60%, #040507 100%); border:1px solid rgba(255,255,255,0.06); } #view-community .rr-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; } #view-community .rr-title{ font:500 14.5px 'Literata',Georgia,serif; color:rgba(238,233,223,0.95); } #view-community .rr-count{ font:600 9.5px 'Inter',sans-serif; letter-spacing:0.08em; color:rgba(232,150,79,0.8); } #view-community .rr-desk{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:9px 12px; margin-bottom:8px; cursor:none; transition:border-color .15s; } #view-community .rr-desk:hover{ border-color:rgba(201,168,106,0.3); } #view-community .rr-desk:last-child{ margin-bottom:0; } #view-community .rr-candle{ width:12px; flex:none; text-align:center; } #view-community .rr-flame{ display:inline-block; width:7px; height:11px; border-radius:50% 50% 45% 45%; background:radial-gradient(circle at 50% 80%, #f4e7c8 0%, #e8964f 55%, rgba(232,150,79,0) 100%); animation:rrFlick 1.6s ease-in-out infinite alternate; transform-origin:50% 100%; } @keyframes rrFlick{ 0%{ transform:scaleY(1) rotate(-2deg); opacity:0.85; } 100%{ transform:scaleY(1.18) rotate(2.5deg); opacity:1; } } @media (prefers-reduced-motion: reduce){ #view-community .rr-flame{ animation:none; } } #view-community .rr-main{ flex:1; min-width:0; } #view-community .rr-who{ font:600 11.5px 'Inter',sans-serif; } #view-community .rr-what{ font:italic 400 11.5px 'Literata',Georgia,serif; font-style:italic; color:rgba(150,144,132,0.7); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #view-community .rr-join{ flex:none; } #view-community .rr-quiet{ font:italic 400 12px/1.6 'Literata',Georgia,serif; font-style:italic; color:rgba(150,144,132,0.6); } /* compare skies — the toggle + legend under the overlay's mini-Drift */ #view-community .ov-sky-cmp{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:9px; flex-wrap:wrap; } #view-community .ov-cmp-legend{ display:inline-flex; gap:10px; font:500 9.5px 'Inter',sans-serif; color:rgba(150,144,132,0.65); } #view-community .ov-cmp-legend i{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; } /* moderation controls on the profile overlay — quiet, out of the way */ #view-community .ov-mod{ display:flex; gap:10px; justify-content:center; margin-top:10px; width:100%; } #view-community .ov-mod-btn{ font:500 10.5px 'Inter',sans-serif; color:rgba(150,144,132,0.7); background:none; border:1px solid rgba(255,255,255,0.08); border-radius:999px; padding:5px 12px; cursor:none; transition:color .15s,border-color .15s; } #view-community .ov-mod-btn:hover{ color:rgba(208,96,80,0.9); border-color:rgba(208,96,80,0.4); } /* the salon — this week's question, above the stream */ #view-community .salon-jr{ border-color:rgba(232,150,79,0.22); } #view-community .salon-eyebrow{ font:600 9px/1 'Inter',sans-serif; letter-spacing:0.15em; text-transform:uppercase; color:rgba(232,150,79,0.75); margin-bottom:8px; } #view-community .salon-q{ font:italic 500 19px/1.4 'Literata',Georgia,serif; font-style:italic; color:rgba(240,235,224,0.96); margin:2px 0 5px; } #view-community .salon-answer-btn{ font:600 10.5px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:999px; padding:6px 14px; cursor:none; } #view-community .salon-comp{ margin-top:11px; display:flex; flex-direction:column; gap:8px; } #view-community .salon-ta{ width:100%; font:italic 400 13.5px/1.6 'Literata',Georgia,serif; font-style:italic; color:rgba(234,229,219,0.94); background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:10px 13px; resize:vertical; } #view-community .salon-ta:focus{ outline:none; border-color:rgba(201,168,106,0.45); } #view-community .salon-keep{ align-self:flex-end; font:600 10.5px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:999px; padding:7px 15px; cursor:none; } #view-community .salon-roll{ margin-top:12px; border-top:1px solid rgba(255,255,255,0.05); padding-top:10px; } #view-community .salon-row{ display:flex; gap:10px; padding:8px 0; cursor:none; } #view-community .salon-row+.salon-row{ border-top:1px solid rgba(255,255,255,0.04); } #view-community .salon-row-who{ font:600 11px 'Inter',sans-serif; color:rgba(230,207,160,0.85); } #view-community .salon-row-body{ font:400 13px/1.55 'Literata',Georgia,serif; color:rgba(230,225,215,0.9); margin-top:2px; } /* debate cards in the stream */ #view-community .jr-motion{ font-style:italic; } #view-community .jr-exchange{ margin-top:11px; border-top:1px solid rgba(255,255,255,0.05); padding-top:10px; } #view-community .jr-exch-side{ margin-bottom:10px; } #view-community .jr-exch-label{ font:600 9px/1 'Inter',sans-serif; letter-spacing:0.13em; text-transform:uppercase; color:rgba(201,168,106,0.75); margin-bottom:5px; } #view-community .jr-exch-text{ font:400 13px/1.6 'Literata',Georgia,serif; color:rgba(230,225,215,0.9); white-space:pre-wrap; } #view-community .jr-exch-verdict{ font:italic 400 12.5px/1.6 'Literata',Georgia,serif; font-style:italic; color:#e6cfa0; border-left:2px solid rgba(201,168,106,0.5); padding-left:12px; margin-top:6px; } /* the woven suggestion + the ambient floor */ #view-community .commons-suggest{ border:1px dashed rgba(255,255,255,0.09); border-radius:13px; padding:9px 13px 4px; margin:2px 0 12px; } #view-community .commons-floor{ text-align:center; font:italic 400 12.5px 'Literata',Georgia,serif; font-style:italic; color:rgba(150,144,132,0.6); padding:12px 0 4px; } #view-community .commons-floor b{ color:#e6cfa0; font-weight:500; } /* ── Phase 5 · micro-craft ────────────────────────────────────────────── Rooms fade in when a tab opens, skeletons hold space while data loads, cards invite the hand, and every animation bows to reduced-motion. */ #view-community .comm-panel{ animation:panelIn .28s ease both; } @keyframes panelIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } #view-community .commons-presence, #view-community .commons-rail{ animation:panelIn .32s ease both; } #view-community .jr-card{ transition:border-color .18s ease; } #view-community .jr-card:hover{ border-color:rgba(201,168,106,0.26); } #view-community .conv-row, #view-community .cb-row, #view-community .salon-row{ transition:background .15s ease; } #view-community .conv-row:hover, #view-community .salon-row:hover{ background:rgba(255,255,255,0.025); } /* the shimmer that holds the discussion's place while it fetches */ #view-community .skel-block{ height:96px; border-radius:16px; border:1px solid rgba(255,255,255,0.05); background:linear-gradient(100deg, rgba(255,255,255,0.028) 40%, rgba(255,255,255,0.055) 50%, rgba(255,255,255,0.028) 60%); background-size:200% 100%; animation:skelSlide 1.2s linear infinite; margin-bottom:12px; } @keyframes skelSlide{ to{ background-position:-200% 0; } } @media (prefers-reduced-motion: reduce){ #view-community .comm-panel, #view-community .commons-presence, #view-community .commons-rail, #view-community .jr-card, #view-community .skel-block, #view-community .letter-seal{ animation:none !important; } #view-community .jr-card.enter{ animation:none !important; } } /* phones: the inline debate card and exchange never overflow the roll */ @media (max-width:560px){ #view-community .salon-debate-slot .dbt-card{ padding:10px 12px; } #view-community .jr-exch-text{ font-size:12.5px; } #view-community .salon-row{ flex-wrap:nowrap; } #view-community .salon-row-main{ min-width:0; } } /* usernames + profile numbers set in the UI sans, not the display serif */ #view-community .profile-username{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-0.01em; } #view-community .pstat-n{ font-family:'Inter',sans-serif; font-weight:600; } #view-community .ov-social b, #view-community .profile-social b{ font-family:'Inter',sans-serif; } /* the Activity header inside Community */ #view-community .commons-activity-head{ margin:0.4rem 0 0.9rem; } /* profiles as artifacts — the mini-Drift + globe (overlay AND your own tab) */ #view-community .ov-sky-stage{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.05); background:radial-gradient(120% 100% at 50% 0%, #0a0d16 0%, #05060a 55%, #040507 100%); } #view-community .ov-sky-stage canvas{ display:block; width:100%; } #view-community .ov-sky-sub{ font:400 11px 'Inter',sans-serif; color:rgba(150,144,132,0.65); margin-top:8px; text-align:center; } #view-community .ov-section .share-globe-wrap{ border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.05); } #view-community #ov-globe-host{ height:100%; } /* discussion challenges: the ⚖ button, inline debate slots, spectator notes */ #view-community .salon-row-acts{ margin-top:8px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; } #view-community .salon-challenge{ font:600 10px 'Inter',sans-serif; color:#d4b483; background:rgba(201,168,106,0.07); border:1px solid rgba(201,168,106,0.26); border-radius:999px; padding:5px 12px; cursor:none; } #view-community .salon-challenge:hover{ background:rgba(201,168,106,0.14); } #view-community .salon-debate-slot{ width:100%; } #view-community .salon-debate-note{ font:italic 400 11.5px 'Literata',Georgia,serif; font-style:italic; color:rgba(232,150,79,0.7); } /* communities, folded under the Community stream */ #view-community .commons-tables{ margin-top:1.6rem; border-top:1px solid rgba(255,255,255,0.06); padding-top:1.4rem; } /* the weekly rail — held, not churned */ #view-community .commons-rail{ background:rgba(255,255,255,0.022); border:1px solid rgba(255,255,255,0.07); border-radius:16px; padding:16px 17px; } #view-community .commons-rail-title{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.15em; text-transform:uppercase; color:rgba(201,168,106,0.8); margin-bottom:10px; } #view-community .cb-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid rgba(255,255,255,0.05); cursor:none; } #view-community .cb-row:first-child{ border-top:none; } #view-community .cb-row.you{ background:rgba(201,168,106,0.05); margin:0 -9px; padding:8px 9px; border-radius:10px; border-top:none; } #view-community .cb-rank{ font:500 13px 'Literata',Georgia,serif; color:rgba(150,144,132,0.6); width:14px; text-align:center; } #view-community .cb-name{ flex:1; font:600 12px 'Inter',sans-serif; color:rgba(232,227,217,0.95); } #view-community .cb-name span{ display:block; font:400 10px 'Inter',sans-serif; color:rgba(150,144,132,0.6); margin-top:1px; } #view-community .cb-held{ font:500 15px 'Literata',Georgia,serif; color:#e6cfa0; } #view-community .commons-rail-note{ font:400 10.5px/1.55 'Inter',sans-serif; color:rgba(150,144,132,0.6); margin-top:12px; border-top:1px solid rgba(255,255,255,0.05); padding-top:10px; } /* ======================================================================= SOCIAL v3 — LETTERS (approved mockup, surface 2) The same two-pane machinery, rewritten in the epistolary register: serif letters, a letterhead, verdict seals. Markup untouched. ===================================================================== */ #view-community .thread-head .conv-name{ font:500 15.5px 'Literata',Georgia,serif; } #view-community .thread-head{ border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(201,168,106,0.4),transparent) 1; padding-bottom:10px; } #view-community .msg-thread .bubble{ font:400 13.5px/1.65 'Literata',Georgia,serif; color:rgba(234,229,219,0.94); border-radius:14px; padding:11px 15px; } #view-community .msg-thread .bubble.them{ background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); } #view-community .msg-thread .bubble.me{ background:rgba(201,168,106,0.07); border:1px solid rgba(201,168,106,0.2); } #view-community #composer-input{ font:italic 400 13px 'Literata',Georgia,serif; font-style:italic; } #view-community #composer-input::placeholder{ color:rgba(150,144,132,0.55); } /* debate + study cards read as letters; the verdict stamps like a wax seal */ #view-community .dbt-card, #view-community .std-card{ position:relative; overflow:visible; } #view-community .letter-seal{ position:absolute; right:10px; top:-12px; transform:rotate(6deg); font:700 8.5px/1.4 'Inter',sans-serif; letter-spacing:0.13em; text-transform:uppercase; color:#e6cfa0; border:1.5px solid rgba(201,168,106,0.65); border-radius:6px; padding:5px 9px; background:rgba(10,11,16,0.94); box-shadow:0 8px 24px -10px rgba(0,0,0,0.8); animation:sealStamp .5s cubic-bezier(.2,1.6,.4,1) both; z-index:2; } @keyframes sealStamp{ from{ opacity:0; transform:rotate(6deg) scale(1.7); } to{ opacity:1; transform:rotate(6deg) scale(1); } } @media (prefers-reduced-motion: reduce){ #view-community .letter-seal{ animation:none; } } #view-community .dbt-motion{ font:italic 500 15.5px/1.45 'Literata',Georgia,serif; font-style:italic; } #view-community .dbt-reason{ font:italic 400 12.5px/1.6 'Literata',Georgia,serif; font-style:italic; color:#e6cfa0; border-left:2px solid rgba(201,168,106,0.5); padding-left:12px; } /* shared recall deck card in message threads */ #view-community .sc-deck-name{ font:500 16px/1.35 'Literata',Georgia,serif; color:rgba(238,233,223,0.95); } #view-community .sc-deck-sub{ font:400 11.5px 'Inter',sans-serif; color:rgba(160,154,142,0.8); margin-top:4px; } #view-community .sc-deck-add{ margin-top:12px; font:600 11.5px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:999px; padding:8px 16px; cursor:none; } #view-community .sc-deck-add:disabled{ opacity:0.7; } /* the Study hero, slimmed: the gradient number now lives at the sky's centre (.rc-sky-hero); the panel below keeps title + meta + modes + stats */ #view-recall .rc-hero-ring{ display:none; } #view-recall .rc-big-n{ font:500 56px/0.95 'Literata',Georgia,serif; letter-spacing:-0.03em; background:linear-gradient(160deg,#f4e7c8,#c9a86a); -webkit-background-clip:text; background-clip:text; color:transparent; } #view-recall .rc-hero{ padding:1.4rem 1.9rem; gap:1.4rem; } #view-recall .rc-hero-title{ font-family:'Literata',Georgia,serif; font-size:1.18rem; font-weight:500; color:rgba(236,231,221,0.95); margin-top:0; } #view-recall .rc-hero-meta{ font:400 12.5px/1.55 'Inter',sans-serif; color:rgba(160,154,142,0.8); margin-top:5px; } #view-recall .rc-hero-actions{ margin-top:0.9rem; } /* forecast: the SVG area chart renderForecast now draws. The legacy .rc-forecast rules still lay out the OLD 7-column bar chart (grid, height:120px) — which crushed the new chart into one column. Reset it. */ #view-recall .rc-forecast{ display:block; height:auto; } #view-recall .rc-fc-svg{ display:block; width:100%; height:auto; max-height:120px; margin:0 auto; } /* the forecast reads as a compact strip, not a full panel */ #view-recall .rc-panel-forecast{ padding:1.1rem 1.4rem 0.9rem; } #view-recall .rc-fc-peak{ font:600 10.5px 'Inter',sans-serif; fill:rgba(230,207,160,0.95); } #view-recall .rc-fc-axis{ font:600 8.5px 'Inter',sans-serif; letter-spacing:0.1em; fill:rgba(150,144,132,0.55); } #view-recall .rc-fc-quiet{ font:400 13px/1.6 'Inter',sans-serif; color:rgba(150,144,132,0.65); padding:14px 0 6px; } /* retention heatmap with a little more weight */ #view-recall .rc-hm-cell{ border-radius:3.5px; } #view-recall .rc-hm-cell.l1{ background:rgba(201,168,106,0.18); } #view-recall .rc-hm-cell.l2{ background:rgba(201,168,106,0.4); } #view-recall .rc-hm-cell.l3{ background:rgba(224,193,106,0.68); } #view-recall .rc-hm-cell.l4{ background:#e0c14a; } /* weak spots: diagnosed, not listed — serif titles, thin amber-to-gold bars */ #view-recall .rc-mtitle{ font-family:'Literata',Georgia,serif; font-size:0.92rem; } #view-recall .rc-mtrack{ height:4px; border-radius:2px; background:rgba(255,255,255,0.06); } #view-recall .rc-mfill{ border-radius:2px; background:linear-gradient(90deg,#8f6f4a,#c9a86a); } #view-recall .rc-mfill.weak{ background:linear-gradient(90deg,#a05b45,#c9a86a); } /* let the serif titles wrap instead of truncating ("The Shi…"), give the name column room, and make the % / Re-read column actually readable */ #view-recall .rc-mrow{ grid-template-columns:minmax(160px,230px) 1fr auto; row-gap:7px; } #view-recall .rc-mname{ white-space:normal; overflow:visible; } #view-recall .rc-mact{ font:600 12px 'Inter',sans-serif; color:#d99f6c; } #view-recall .rc-reread{ color:#e6cfa0; } /* phones: title + action on the first line, the bar full-width beneath — and the action column comes BACK (app.css hid it under 600px) */ @media (max-width:640px){ #view-recall .rc-mrow{ grid-template-columns:minmax(0,1fr) auto; } #view-recall .rc-mtrack{ grid-column:1 / -1; grid-row:2; } #view-recall .rc-mrow .rc-mact{ display:flex; } } /* the sky honours reduced motion via JS (single still frame, no loop) */ /* ======================================================================= SOCIAL v2 — S2 "The Journal": milestones as typeset cards. renderActivity() now emits .jr-card markup; .act-* rules above remain for safety but are unused by the feed. ===================================================================== */ #view-community #activity-list{ gap:14px; } #view-community .jr-card{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:22px 24px; cursor:none; transition:transform .2s, border-color .2s, background .2s; } #view-community .jr-card:hover{ transform:translateY(-2px); border-color:rgba(201,168,106,0.3); background:rgba(201,168,106,0.03); } #view-community .jr-meta{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } #view-community .jr-av{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font:600 15px 'Literata',Georgia,serif; color:#fff; flex:none; text-transform:uppercase; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.14); } #view-community .jr-who{ font:600 13px 'Inter',sans-serif; color:rgba(234,229,219,0.95); } #view-community .jr-when{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.12em; text-transform:uppercase; color:rgba(150,144,132,0.5); margin-top:3px; } #view-community .jr-h{ font:500 19px/1.4 'Literata',Georgia,serif; color:rgba(236,231,221,0.95); } #view-community .jr-h em{ font-style:normal; color:#e6cfa0; } #view-community .jr-sub{ font:400 12.5px 'Inter',sans-serif; color:rgba(160,154,142,0.75); margin-top:6px; } #view-community .jr-quote{ font:400 19px/1.55 'Literata',Georgia,serif; font-style:italic; color:rgba(238,233,223,0.95); padding-left:18px; border-left:2.5px solid rgba(201,168,106,0.5); } #view-community .jr-attr{ font:600 10px/1.4 'Inter',sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:#c9a86a; margin-top:10px; padding-left:20px; } #view-community .jr-actions{ display:flex; gap:10px; margin-top:16px; } #view-community .jr-react{ font:600 11.5px 'Inter',sans-serif; color:#d4b483; background:rgba(201,168,106,0.07); border:1px solid rgba(201,168,106,0.24); border-radius:999px; padding:8px 16px; cursor:none; transition:all .18s; } #view-community .jr-react:hover{ background:rgba(201,168,106,0.15); border-color:rgba(201,168,106,0.45); transform:scale(1.03); } #view-community .jr-react:active{ transform:scale(0.97); } #view-community .jr-react.mine{ color:#1a1408; background:#d4b483; border-color:transparent; } #view-community .jr-react:disabled{ opacity:0.6; } /* S3 "Shared Skies" — the Map's friends-layer toggle dims when the layer is off */ #view-map #map-friends[aria-pressed="false"]{ opacity:0.4; } /* ======================================================================= SOCIAL v2 — part 3: People / Messages / Board retouched to the Journal's card language. CSS only; markup and element IDs untouched. ===================================================================== */ /* People — rows read like compact journal cards */ #view-community .user-row{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.07); padding:13px 16px; transition:border-color .18s, background .18s; } #view-community .user-row:hover{ border-color:rgba(201,168,106,0.3); background:rgba(201,168,106,0.03); } #view-community .ur-name{ font-family:'Literata',Georgia,serif; font-weight:600; font-size:0.98rem; } #view-community .fs-label{ font:600 9.5px/1 'Inter',sans-serif; letter-spacing:0.14em; text-transform:uppercase; color:rgba(201,168,106,0.75); } #view-community .ur-action{ border-radius:999px; } #view-community .ur-action.primary{ background:#d4b483; color:#1a1408; border-color:transparent; } /* Messages — bubbles and share cards in the same voice */ #view-community .bubble{ border-radius:16px; font-size:0.92rem; line-height:1.55; } #view-community .bubble.me{ background:linear-gradient(135deg,rgba(236,215,171,0.16),rgba(201,168,106,0.13)); border:1px solid rgba(201,168,106,0.28); color:rgba(240,233,220,0.96); } #view-community .bubble.them{ background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.07); } #view-community .share-card{ border-radius:16px; border:1px solid rgba(201,168,106,0.22); background:rgba(201,168,106,0.045); } #view-community .conv-row{ background:rgba(255,255,255,0.015); border:1px solid rgba(255,255,255,0.05); padding:11px 13px; transition:border-color .18s; } #view-community .conv-row:hover{ border-color:rgba(201,168,106,0.28); } #view-community .conv-prev.unread{ color:#e6cfa0; font-weight:600; } /* Board — standings framed like the rest; laurel colours for the podium */ #view-community .lb-row{ background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); padding:13px 16px; transition:border-color .18s; } #view-community .lb-row:hover{ border-color:rgba(201,168,106,0.28); } #view-community .lb-rank{ font-size:1.05rem; color:rgba(150,144,132,0.7); } #view-community .lb-row:nth-child(1) .lb-rank{ color:#e0c14a; } #view-community .lb-row:nth-child(2) .lb-rank{ color:#c5ccd4; } #view-community .lb-row:nth-child(3) .lb-rank{ color:#b87333; } /* ======================================================================= HOME · LEARN · MAP — the editorial language extended to the rest of the app so the whole product reads as ONE piece (previously only Recall and Community wore it, which made the app look like two products). Additive font / colour / primary-action overrides only — no layout or markup changes, no IDs touched. 2026-07-08 visual-unification pass. ===================================================================== */ /* ---- display type: Literata for the big titles, everywhere ---- */ #view-home .home-greeting, #view-learn .learn-title, #view-learn .scholar-hero-name, #view-map .map-title{ font-family:'Literata',Georgia,serif; letter-spacing:-0.012em; color:rgba(240,235,224,0.97); font-weight:500; } #view-learn .learn-title{ font-size:2rem; } /* section & card headings → the same serif voice */ #view-home .hc-title, #view-home .daily-title, #view-home .hg-title, #view-home .idea-concept, #view-learn .lc-card-title{ font-family:'Literata',Georgia,serif; font-weight:600; color:rgba(240,235,224,0.96); } #view-learn .sc-card-name{ font-family:'Literata',Georgia,serif; font-weight:600; } #view-learn .lc-title{ font-size:1.2rem; } /* ---- contrast: nudge the faintest secondary text up toward WCAG AA ---- */ #view-home .home-sub, #view-map .map-sub{ color:rgba(180,174,162,0.92); } #view-home .hc-label, #view-home .idea-label, #view-learn .lc-sub{ color:rgba(190,182,168,0.88); } /* ---- primary actions → the gradient-gold pill used across Recall/Social ---- */ #view-home .hc-btn, #view-home .home-due-btn, #view-learn .sq-btn.primary{ background:#d4b483; color:#1a1408; border:none; border-radius:11px; box-shadow:0 8px 22px -10px rgba(201,168,106,0.7); } #view-home .hc-btn:hover, #view-home .home-due-btn:hover{ background:#e0c89a; transform:translateY(-1px); } /* ======================================================================= COMMUNITY REDESIGN 2026-07 — Feed / Debates / Study groups IA ===================================================================== */ /* segmented nav: idea-destinations left, people/messages demoted right */ #view-community .social-seg{ display:flex; align-items:center; flex-wrap:wrap; } #view-community .seg-spacer{ flex:1; } #view-community .seg-btn.seg-aux{ font-size:0.72rem; padding:0.42rem 0.85rem; opacity:0.75; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:999px; } #view-community .seg-btn.seg-aux:hover{ opacity:1; border-color:rgba(201,168,106,0.35); } #view-community .seg-btn.seg-aux.active{ opacity:1; } /* debates tab: the reading shelf */ #view-community .dbt-pub-row{ background:rgba(255,255,255,0.022); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:1rem 1.2rem; margin-bottom:10px; } #view-community .dbt-pub-motion{ font-family:'Literata',Georgia,serif; font-size:1.02rem; font-weight:500; color:rgba(238,233,223,0.95); margin-bottom:4px; } #view-community .dbt-pub-meta{ font-size:0.72rem; color:rgba(160,154,142,0.8); margin-bottom:9px; font-variant-numeric:tabular-nums; } /* feed hero: the salon spectrum */ #view-community .salon-spec{ margin:1rem 0 0.4rem; } #view-community .sp-histo{ position:relative; height:76px; margin:22px 0 2px; } #view-community .sp-bars{ position:absolute; left:0; right:0; bottom:10px; height:56px; display:flex; align-items:flex-end; gap:3px; } #view-community .sp-bar{ flex:1; min-height:3px; border-radius:3px 3px 0 0; background:rgba(255,255,255,0.13); transition:height .45s ease, background .2s; } #view-community .sp-bar.lit{ background:linear-gradient(180deg,#ecd7ab,#c9a86a); } #view-community .sp-dots{ position:absolute; left:0; right:0; top:-14px; height:0; } #view-community .sp-dot{ position:absolute; transform:translateX(-50%); width:21px; height:21px; border-radius:50%; border:2px solid rgba(20,17,24,0.9); cursor:pointer; font:600 9.5px/17px 'Literata',Georgia,serif; color:#fff; text-align:center; padding:0; background:#8a7f95; } #view-community .sp-caret{ position:absolute; bottom:-2px; transform:translateX(-50%); left:50%; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:8px solid #d8ab5f; transition:left .1s ease; pointer-events:none; } #view-community .sp-slider{ -webkit-appearance:none; appearance:none; width:100%; height:24px; background:transparent; margin:2px 0 0; cursor:grab; } #view-community .sp-slider::-webkit-slider-runnable-track{ height:3px; border-radius:2px; background:rgba(255,255,255,0.16); } #view-community .sp-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:#d4b483; border:3px solid #16131b; margin-top:-8px; box-shadow:0 2px 8px rgba(0,0,0,0.45); } #view-community .sp-slider::-moz-range-track{ height:3px; border-radius:2px; background:rgba(255,255,255,0.16); } #view-community .sp-slider::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:#d4b483; border:3px solid #16131b; } #view-community .sp-ends{ display:flex; justify-content:space-between; margin-top:2px; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(160,154,142,0.85); } #view-community .sp-canon{ margin-top:12px; padding:8px 13px; border:1px dashed rgba(201,168,106,0.35); border-radius:10px; font-size:0.8rem; color:rgba(210,204,192,0.92); min-height:1.2em; } #view-community .sp-canon b{ font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:#d8ab5f; margin-right:6px; font-family:'Inter',sans-serif; } #view-community .sp-canon i{ font-family:'Literata',Georgia,serif; } #view-community .sp-read{ display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; } #view-community .sp-stake[disabled]{ background:transparent; color:#9ecfb0; border:1px solid rgba(158,207,176,0.5); cursor:default; box-shadow:none; } #view-community .sp-meta{ font-size:0.72rem; color:rgba(160,154,142,0.8); font-variant-numeric:tabular-nums; } /* ---- segmented nav -> mockup-style underline tabs on a hairline rule ---- */ #view-community .social-seg{ background:none; border:none; border-radius:0; padding:0; border-bottom:1px solid rgba(255,255,255,0.09); gap:4px; margin:1.6rem 0 1.5rem; } #view-community .seg-btn{ flex:none; border-radius:0; background:none; padding:0.65rem 1.05rem 0.85rem; font-size:0.85rem; font-weight:500; letter-spacing:0.02em; color:rgba(150,144,132,0.9); border-bottom:2px solid transparent; margin-bottom:-1px; } #view-community .seg-btn:hover{ color:rgba(212,206,194,0.95); background:none; } #view-community .seg-btn.active{ color:rgba(240,235,224,0.97); background:none; box-shadow:none; border-bottom-color:#c9a86a; font-weight:600; } #view-community .seg-btn .seg-cnt{ color:#d8ab5f; font-size:0.72rem; font-weight:600; margin-left:2px; font-variant-numeric:tabular-nums; } /* the demoted people/messages buttons stay ghost pills, right-aligned */ #view-community .seg-btn.seg-aux{ border:1px solid rgba(255,255,255,0.09); border-radius:999px; padding:0.42rem 0.95rem; margin-bottom:8px; align-self:center; font-size:0.72rem; font-weight:500; opacity:0.8; } #view-community .seg-btn.seg-aux:hover{ opacity:1; border-color:rgba(201,168,106,0.4); } #view-community .seg-btn.seg-aux.active{ opacity:1; color:#ecd6a6; border-color:rgba(201,168,106,0.65); border-bottom:1px solid rgba(201,168,106,0.65); } /* ---- salon hero -> the mockup's gradient panel with the gold edge ---- */ #view-community .salon-jr{ background:linear-gradient(120deg,rgba(212,180,131,0.07),rgba(255,255,255,0.012)); border:1px solid rgba(255,255,255,0.10); box-shadow:inset 3px 0 0 0 rgba(212,180,131,0.85); border-radius:18px; } #view-community .salon-eyebrow{ color:rgba(216,171,95,0.9); font-size:10px; letter-spacing:0.18em; } #view-community .salon-q{ font:500 23px/1.3 'Literata',Georgia,serif; font-style:normal; letter-spacing:-0.01em; color:rgba(240,235,224,0.97); } #view-community .sp-stake{ border-radius:11px; font-size:0.82rem; padding:10px 19px; } #view-community .sp-canon{ flex:1; } /* the salon composer opens on demand: [hidden] must beat the flex display */ #view-community .salon-comp[hidden]{ display:none; } /* touch devices: the bell and avatar sit side by side at 32px - give both a real 40px hit target so a press aimed at the profile picture cannot land on the bell (the "empty grey dropdown" mis-tap) */ @media (pointer:coarse){ .notif-bell{ width:40px; height:40px; } .account-icon{ width:38px; height:38px; } .account-menu{ margin-left:4px; } } /* ═══ RECALL — sentence-led redesign ═════════════════════════════════════ The page opens with a sentence ("7 ideas are due tonight.") and one gold action; the Drift is framed as Plate I; Tonight's plan sits beside the Memory forecast. Colors stay in the house black-and-gold; html.daymode (the global invert) remains the light alternative. */ #view-recall .rc-pagehead{ align-items:flex-end; margin-bottom:1.6rem; } #view-recall .rc-ph-lead{ flex:1; min-width:260px; } #view-recall .rc-ph-eyebrow{ font:600 10px 'Inter',sans-serif; letter-spacing:0.18em; text-transform:uppercase; color:#c9a86a; margin-bottom:0.55rem; } #view-recall .rc-headline{ font-family:'Literata',Georgia,serif; font-weight:500; font-size:clamp(1.85rem,4.5vw,2.55rem); line-height:1.15; color:rgba(240,235,224,0.98); letter-spacing:-0.01em; max-width:22ch; text-wrap:balance; } #view-recall .rc-headline #rc-due-n{ color:#e6cfa0; } #view-recall .rc-headsub{ font:400 0.92rem/1.55 'Inter',sans-serif; color:rgba(150,144,132,0.95); margin-top:0.5rem; max-width:52ch; } #view-recall .rc-ph-side{ display:flex; flex-direction:column; align-items:flex-end; gap:0.75rem; padding-bottom:0.25rem; } #view-recall .rc-pagehead .rc-start{ font:600 13px 'Inter',sans-serif; color:#1a1408; background:#d4b483; border:none; border-radius:11px; padding:11px 24px; cursor:pointer; box-shadow:0 6px 24px -8px rgba(201,168,106,0.55); transition:transform .12s ease, background .15s ease; } #view-recall .rc-pagehead .rc-start:hover{ background:#e0c89a; transform:translateY(-1px); } #view-recall .rc-pagehead .rc-start:disabled{ opacity:0.45; transform:none; cursor:default; } @media (max-width:760px){ #view-recall .rc-ph-side{ flex-direction:row-reverse; align-items:center; width:100%; justify-content:space-between; } } /* Tonight's plan */ #view-recall .rc-plan-rows{ margin-top:0.35rem; } #view-recall .rc-plan-row{ display:flex; align-items:center; gap:0.95rem; padding:0.7rem 0; border-top:1px solid rgba(255,255,255,0.06); } #view-recall .rc-plan-row:first-child{ border-top:none; padding-top:0.15rem; } #view-recall .rc-plan-n{ font-family:'Literata',Georgia,serif; font-size:1.35rem; min-width:2rem; text-align:right; font-variant-numeric:tabular-nums; } #view-recall .rc-plan-n.due{ color:#e6cfa0; } #view-recall .rc-plan-n.weak{ color:#d9a352; } #view-recall .rc-plan-n.ember{ color:#c96a4a; } #view-recall .rc-plan-what b{ display:block; font:600 0.85rem 'Inter',sans-serif; color:rgba(238,233,223,0.95); } #view-recall .rc-plan-what span{ font:400 0.74rem 'Inter',sans-serif; color:rgba(150,144,132,0.8); } #view-recall .rc-plan .rc-modes{ margin-top:0.95rem; } #view-recall .rc-plan .rc-hero-stats{ flex-direction:row; border-left:none; padding-left:0; gap:1.7rem; margin-top:1.05rem; padding-top:0.95rem; border-top:1px solid rgba(255,255,255,0.06); align-items:center; justify-content:flex-start; } #view-recall .rc-plan .rc-hero-stats .rc-stat{ text-align:left; } /* Plate I caption inside the sky legend */ #view-recall .rc-sky-cap{ color:rgba(150,144,132,0.6); font-style:italic; } /* the plan/forecast duo mirrors the weak/decks duo below it */ #view-recall .rc-duo-plan{ grid-template-columns:1fr 1.15fr; margin-bottom:1.3rem; } @media (max-width:820px){ #view-recall .rc-duo-plan{ grid-template-columns:1fr; } } /* ═══ RECALL — daylight design, house palette ════════════════════════════ The daylight concept's layout and typography (sentence head, Plate I, Tonight's plan, mono data labels) in the site's own black-and-gold. html.daymode (the global invert) yields the white-and-gold light mode, exactly as on every other page. The Drift keeps blue nodes. */ #view-recall{ --rr-card:#0a0d13; --rr-ink:#ece7dd; --rr-ink2:rgba(236,231,221,0.78); --rr-mut:rgba(150,144,132,0.9); --rr-line:rgba(255,255,255,0.07); --rr-line2:rgba(255,255,255,0.15); --rr-gold:#d4b483; --rr-gold-hi:#e6cfa0; --rr-gold-soft:rgba(212,180,131,0.12); --rr-node:#7c8cff; --rr-amber:#d9a352; --rr-amber-soft:rgba(217,163,82,0.12); --rr-rust:#c96a4a; --rr-rust-soft:rgba(201,90,63,0.14); --rr-ok:#7ac896; --rr-mono:ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; } /* mono data labels — the daylight design's voice for numbers and eyebrows */ #view-recall .rc-ph-eyebrow{ font:500 10.5px var(--rr-mono); letter-spacing:0.18em; text-transform:uppercase; color:var(--rr-gold); } #view-recall .rc-panel-title{ font:500 10.5px var(--rr-mono); letter-spacing:0.18em; text-transform:uppercase; } #view-recall .rc-plan-n{ font-family:var(--rr-mono); font-weight:500; } #view-recall .rc-plan-n.due{ color:var(--rr-gold-hi); } #view-recall .rc-plan-n.weak{ color:var(--rr-amber); } #view-recall .rc-plan-n.ember{ color:var(--rr-rust); } #view-recall .rc-stat-n{ font-family:var(--rr-mono); font-weight:500; } #view-recall .rc-stat-l, #view-recall .rc-st-l{ font:500 9.5px var(--rr-mono); letter-spacing:0.14em; text-transform:uppercase; } #view-recall .rc-st-n{ font-family:var(--rr-mono); } #view-recall .rc-meyebrow{ font:500 9.5px var(--rr-mono); letter-spacing:0.14em; text-transform:uppercase; } #view-recall .rc-fc-axis{ font:500 8.5px var(--rr-mono); letter-spacing:0.14em; } #view-recall .rc-deck-pill{ font-family:var(--rr-mono); } #view-recall .rs-count{ font-family:var(--rr-mono); } /* bare mode pills, as in the concept */ #view-recall .rc-modes{ background:transparent; border-radius:0; padding:0; gap:6px; } #view-recall .rc-mode{ border:1px solid var(--rr-line2); border-radius:999px; } #view-recall .rc-mode.active{ color:#1a1408; background:#d4b483; border-color:transparent; } /* the plate's legend: nodes are blue, fading amber, embers rust */ #view-recall .rc-sky-dot.held{ background:var(--rr-node); box-shadow:0 0 8px rgba(124,140,255,0.7); } #view-recall .rc-sky-cap{ color:var(--rr-mut); font-style:italic; opacity:0.8; } /* ═══ FLASHCARDS — panelled to match the dashboard ═══ */ #view-recall .rc-duo-fc{ grid-template-columns:1.15fr 1fr; } @media (max-width:820px){ #view-recall .rc-duo-fc{ grid-template-columns:1fr; } } #view-recall .fc-decks-title{ display:none; } /* the panel head carries the title now */ #view-recall .fc-panel .fc-decks{ margin:0; display:block; } #view-recall .fc-deck-row{ display:flex; align-items:center; gap:10px; padding:12px 0; margin:0; background:none; border:none; border-radius:0; border-top:1px solid rgba(255,255,255,0.06); } #view-recall .fc-deck-row:first-of-type{ border-top:none; padding-top:2px; } #view-recall .fc-deck-row:hover{ background:none; } #view-recall .fc-deck-name{ font-family:'Literata',Georgia,serif; font-size:0.95rem; color:rgba(238,233,223,0.95); flex:1; min-width:0; } #view-recall .fc-deck-count{ font:500 11px var(--rr-mono); color:var(--rr-mut); white-space:nowrap; } #view-recall .fc-deck-count b{ color:var(--rr-gold-hi); font-weight:500; } #view-recall .fc-controls{ margin:0 0 10px; } #view-recall .set-select{ width:100%; max-width:none; } #view-recall .fc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin:0; } #view-recall .fc-ai-row{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:7px; } #view-recall .fc-ai-group{ display:flex; gap:8px; align-items:center; } #view-recall .fc-ai-group input{ width:64px; text-align:center; font-family:var(--rr-mono); } #view-recall .fc-ai-note{ font:400 11.5px 'Inter',sans-serif; color:var(--rr-mut); } #view-recall .fc-stage{ margin-top:14px; } /* ═══ AGORA — one scrollable seg row on phones ═══ */ @media (max-width:640px){ #view-community .social-seg{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } #view-community .social-seg::-webkit-scrollbar{ display:none; } #view-community .social-seg .seg-spacer{ display:none; } #view-community .seg-btn{ flex:none; } #view-community .seg-btn.seg-aux{ margin:0 0 8px 12px; align-self:center; flex:none; } } /* ═══ AGORA — cold-start floor: two doors out of the empty room ═══ */ #view-community .feed-empty-acts{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:2px; } #view-community .feed-empty-btn.ghost{ background:transparent; color:rgba(236,231,221,0.78); border:1px solid rgba(255,255,255,0.16); } #view-community .feed-empty-btn.ghost:hover{ border-color:rgba(212,180,131,0.4); color:#e6cfa0; } #view-community .rr-find{ margin-top:10px; font:600 12px 'Inter',sans-serif; color:#e6cfa0; background:rgba(212,180,131,0.08); border:1px solid rgba(212,180,131,0.3); border-radius:999px; padding:7px 14px; cursor:pointer; transition:background .15s; } #view-community .rr-find:hover{ background:rgba(212,180,131,0.15); } /* ═══ AGORA — sentence-led head, matching Recall's voice ═══ */ #view-community .comm-intro{ margin:0.4rem 0 1.4rem; } #view-community .ag-eyebrow{ font:500 10.5px ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:0.18em; text-transform:uppercase; color:#c9a86a; margin-bottom:0.55rem; } #view-community .comm-title{ font-family:'Literata',Georgia,serif; font-weight:500; font-size:clamp(1.85rem,4.5vw,2.55rem); line-height:1.15; letter-spacing:-0.01em; color:rgba(240,235,224,0.98); margin-bottom:0.45rem; } #view-community .comm-sub{ font:400 0.92rem/1.55 'Inter',sans-serif; color:rgba(150,144,132,0.95); max-width:52ch; } /* panel kickers join the mono voice (room titles that went serif stay serif — plates.css loads after this file and keeps those overrides) */ #view-community .comm-phead{ font:500 10.5px ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:0.18em; } #view-community .pl .kicker, #view-community .fs-label{ font-family:ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; font-weight:500; font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; } /* ═══ RECALL locked state — the demo sky sells the Drift before lesson one ═══ */ #view-recall .rl-icon{ display:none; } /* the sky replaced the padlock */ #view-recall .rl-sky-wrap{ max-width:420px; margin:0.6rem auto 1.7rem; } #view-recall #rl-demo-sky{ display:block; width:100%; height:300px; } #view-recall .rl-sky-cap{ font:italic 400 0.85rem/1.6 'Literata',Georgia,serif; color:rgba(150,144,132,0.9); max-width:46ch; margin:0.9rem auto 0; text-align:center; } /* ═══ LEARN — the Library joins the sentence-led voice ═══ */ #view-learn .lib-eyebrow{ font:500 10.5px ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:0.18em; text-transform:uppercase; color:#c9a86a; margin-bottom:0.55rem; } #view-learn .lib-title{ font-weight:500; font-size:clamp(1.85rem,4.5vw,2.55rem); letter-spacing:-0.01em; } #view-learn .pl .kicker{ font-family:ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; font-weight:500; font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase; } #view-learn .lc-head .lc-title{ font:500 10.5px ui-monospace,'SF Mono','Cascadia Mono',Consolas,Menlo,monospace; letter-spacing:0.18em; text-transform:uppercase; color:rgba(184,154,106,0.85); }