/* ========================================================= OTR — "Quiet Room" theme Drop-in replacement for static/css/app.css Fonts loaded separately in templates/base.html ========================================================= */ :root{ --bg:#f4f3ee; --ink:#333a2e; --sub:#767d6c; --panel:#fbfaf7; --line:#e6e4db; --sage:#8a9a7e; --sage-dark:#5c7350; --sage-tint:#eaf0e6; --clay:#c98b74; --clay-dark:#a15a3f; --clay-tint:#f6ece7; --radius:14px; --radius-lg:20px; } *{ box-sizing:border-box; } html, body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif; } h1, h2, h3, .brand{ font-family:'Sora', sans-serif; } a{ color:inherit; } /* ---------- layout shell ---------- */ .app{ max-width:1040px; margin:0 auto; min-height:100vh; } .topbar{ display:flex; align-items:center; justify-content:space-between; padding:20px 32px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:10; } .brand{ font-weight:600; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; text-decoration:none; } .brand .mark{ width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--sage-tint), var(--sage)); display:inline-block; } /* Mobile-first: short wordmark is the base case (narrow viewports have little room next to nav links / the auth form); widen to the full name once there's space for it. */ .brand-name-full{ display:none; } @media(min-width:640px){ .brand-name-full{ display:inline; } .brand-name-short{ display:none; } } /* The short wordmark is an abbreviation, so pair it with a native tooltip (title attr) explaining it. Override the browser default dotted underline to match the rest of the brand mark; cursor:help is the desktop hover affordance — there's no touch equivalent, but screen readers on any device still announce the title as the expansion. */ .brand-abbr{ text-decoration:none; cursor:help; } .navlinks{ display:flex; gap:6px; } .navlinks a{ background:none; border:none; font-family:'Inter'; font-size:14px; font-weight:500; color:var(--sub); padding:8px 14px; border-radius:999px; cursor:pointer; transition:.15s; text-decoration:none; display:inline-block; } .navlinks a:hover{ background:var(--panel); color:var(--ink); } .navlinks a.active{ background:var(--sage-tint); color:var(--sage-dark); font-weight:600; } .avatar{ width:34px; height:34px; border-radius:50%; background:#e3dfd2; color:#5c6350; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; text-decoration:none; } /* Logout is a