/* Co Platform — CE Harness design language (Requirements R9). Warm paper, editorial, never tech-cold. */ :root { --cream: #FAF9F5; --sand: #F0EEE6; --card: #FFFFFF; --ink: #141413; --muted: #6E6A60; --line: #DEDCD1; --clay: #D97757; --clay-deep: #C2603F; --sage: #788C5D; --teal: #5E9484; --violet: #8682C4; --radius: 16px; --shadow-soft: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 16px -4px rgba(20, 20, 19, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.6); --shadow-lift: 0 2px 4px rgba(20, 20, 19, 0.05), 0 12px 32px -8px rgba(20, 20, 19, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.6); --serif: "Fraunces", Georgia, serif; --sans: "General Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* Simplified-Chinese (i18n): General Sans / Fraunces carry no CJK glyphs, so when the UI is in Chinese we extend the family tokens with system CJK faces. Latin runs still render in the brand fonts (per-glyph fallback); CJK runs fall back to PingFang SC / Songti SC etc. Set on by i18n.js. */ html.lang-zh { --serif: "Fraunces", "Songti SC", "Noto Serif SC", Georgia, "PingFang SC", serif; --sans: "General Sans", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.4em; } h1 { font-size: 2.1rem; line-height: 1.2; } h2 { font-size: 1.35rem; } p { margin: 0 0 1em; } a { color: var(--clay); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; } .muted { color: var(--muted); } .small { font-size: 0.875rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 24px; } .chip { display: inline-block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; vertical-align: middle; } .chip.clay { color: #fff; background: var(--clay); border-color: var(--clay); } .chip.sage { color: #fff; background: var(--sage); border-color: var(--sage); } .btn { display: inline-block; font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; color: #fff; background: var(--clay); border: 1px solid var(--clay); border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: background 0.15s ease, transform 0.05s ease; } .btn:hover { background: var(--clay-deep); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: default; } .btn.ghost { color: var(--ink); background: transparent; border-color: var(--line); } .btn.ghost:hover { background: var(--sand); } .input { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; width: 100%; outline: none; } .input:focus { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12); } .input::placeholder { color: var(--muted); opacity: 0.7; } .label { display: block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; } .wordmark { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); } .wordmark:hover { text-decoration: none; } .divider { border: 0; border-top: 1px solid var(--line); margin: 28px 0; } .notice { background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; font-size: 0.875rem; color: var(--muted); } .notice.error { border-color: rgba(217, 119, 87, 0.5); color: var(--clay-deep); background: rgba(217, 119, 87, 0.07); } .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--clay); color: #fff; font-family: var(--serif); font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .footer { padding: 36px 0 28px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; } /* ---- Harness section system (TK-v0.2c) ---- Functional areas read as titled panels: serif title + mono uppercase meta in a gradient header bar, content below. Borrowed from the CE Harness progress page (.m-panel / .m-ph). */ .panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, #fff, rgba(240, 238, 230, 0.45)); } .panel-head .t { font-family: var(--serif); font-size: 0.9375rem; font-weight: 600; color: var(--ink); } .panel-head .meta { font-family: var(--mono); font-size: 0.59375rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); white-space: nowrap; } .panel-body { padding: 10px 12px; } /* ink brand block (the Harness mock's m-brand, as an app chrome element) */ .brand { display: block; background: var(--ink); color: var(--cream); border-radius: 14px; padding: 13px 15px 12px; box-shadow: var(--shadow-soft); } .brand:hover { text-decoration: none; } .brand b { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; display: block; line-height: 1.2; } .brand b::before { content: "◆ "; color: var(--clay); font-size: 0.78em; } .brand span { display: block; font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 249, 245, 0.55); margin-top: 4px; } /* mono uppercase nav links (Harness header meta style) */ .navlink { font-family: var(--mono); font-size: 0.65625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .navlink:hover { color: var(--clay-deep); text-decoration: none; } /* ---- v0.2 Friends & DM ---- Direct messages are HUMAN space: sage replaces clay everywhere here, so you always know whether you're talking to a person or their twin. */ .badge { display: inline-block; min-width: 18px; font-family: var(--mono); font-size: 0.6875rem; line-height: 18px; text-align: center; color: #fff; background: var(--clay); border-radius: 999px; padding: 0 6px; vertical-align: middle; } .badge.sage { background: var(--sage); } .fp-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(20, 20, 19, 0.28); display: flex; align-items: flex-start; justify-content: center; padding: 7svh 16px 16px; } .fp-panel { width: 100%; max-width: 480px; max-height: 84svh; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 20px 22px; } .fp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fp-head h2 { margin: 0; font-size: 1.2rem; } .fp-close { background: none; border: 0; font-size: 1.05rem; cursor: pointer; color: var(--muted); } .fp-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--sand); } .fp-row:last-child { border-bottom: 0; } .fp-row .grow { flex: 1; min-width: 0; } .fp-row .who { font-size: 0.9rem; overflow-wrap: anywhere; word-break: break-word; } .fp-row .sub { font-size: 0.75rem; color: var(--muted); } .fp-row .btn { padding: 6px 12px; font-size: 0.8125rem; border-radius: 8px; } .fp-x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 4px; } .fp-x:hover { color: var(--clay-deep); } .fp-note { font-size: 0.78125rem; color: var(--muted); margin-top: 12px; } .dm-banner { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--ink); background: rgba(120, 140, 93, 0.10); border: 1px solid rgba(120, 140, 93, 0.45); border-radius: 12px; padding: 9px 14px; } .dm-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: 0 0 auto; } .dm-flow { display: flex; flex-direction: column; gap: 8px; padding: 18px 0 22px; } .dm-msg { max-width: 74%; padding: 9px 14px; font-size: 0.9375rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .dm-msg.me { align-self: flex-end; color: #fff; background: var(--sage); border-radius: 16px 16px 4px 16px; } .dm-msg.me a { color: #fff; text-decoration: underline; } .dm-msg.them { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; } .dm-empty { text-align: center; color: var(--muted); font-size: 0.875rem; padding: 26px 0; } .dm-composerbox { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); padding: 8px 92px 8px 8px; } .dm-composerbox:focus-within { border-color: var(--sage); } .dm-composerbox textarea { width: 100%; display: block; resize: none; min-height: 40px; max-height: 150px; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; padding: 8px 10px; border: 0; background: none; outline: none; } .dm-composerbox .btn { position: absolute; right: 8px; bottom: 8px; padding: 8px 16px; border-radius: 10px; background: var(--sage); border-color: var(--sage); } .dm-composerbox .btn:hover { background: #66794f; } .dm-count { font-family: var(--mono); font-size: 0.625rem; color: var(--muted); text-align: right; padding-top: 4px; } .modetabs { display: inline-flex; gap: 3px; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .modetab { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 5px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .modetab.on { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(20,20,19,0.08); } .modetab.direct.on { color: var(--sage); } /* ---- Shared mobile rules (applies to every page that links harness.css) ---- The base layout is desktop/tablet-tuned; these phone-scoped rules fix the cross-cutting issues found in the mobile audit. They never touch desktop. */ /* iOS Safari auto-zooms the viewport when a focused control is < 16px. Every .input and the DM composer is 15px — bump to 16px on phones (incl. portrait tablets at ≤920px) to kill the zoom-on-focus jolt. */ @media (max-width: 920px) { .input, .dm-composerbox textarea { font-size: 16px; } } /* Friends panel: go full-screen on a phone and stay fully scrollable, and let long emails / two action buttons wrap instead of overflowing a 360px row. */ @media (max-width: 560px) { .fp-overlay { padding: 0; } .fp-panel { max-width: none; width: 100%; height: 100svh; max-height: 100svh; border-radius: 0; } .footer a { display: inline-block; padding: 6px 6px; } /* finger-sized footer links */ } @media (max-width: 480px) { .fp-row { flex-wrap: wrap; } .fp-row .grow { flex-basis: 100%; } } /* Grow tiny icon hit-areas on touch without changing their look on desktop. */ @media (hover: none) { .fp-close, .fp-x { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } } .fp-x:active { color: var(--clay-deep); } /* Own-twin quick-access FAB — shared base. twin.html re-declares these inline and adds per-surface position/visibility overrides (its inline rules win by source order, so twin is unaffected by this block). The KB pages (browse.html / page.html) have no chat composer, so this plain bottom-right corner is overlap- free there. Hidden until its own-twin link resolves (.ready). */ .plaza-fab { display: none; position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: var(--clay); color: #fff; align-items: center; justify-content: center; box-shadow: 0 6px 18px -4px rgba(217,119,87,0.55); text-decoration: none; transition: transform .14s, box-shadow .14s; } .plaza-fab:hover { transform: translateY(-2px); box-shadow: 0 9px 22px -5px rgba(217,119,87,0.65); } .plaza-fab svg { width: 24px; height: 24px; } .plaza-fab.ready { display: flex; } /* When a KB page is EMBEDDED inside the app (twin.html opens /kb in a same-origin iframe → html.framed), the parent already shows its own twin FAB over the modal. Suppress the iframe's FAB so only one bottom-right button shows at a time. A standalone full-page /kb is not framed, so it still gets its FAB. */ html.framed .plaza-fab { display: none !important; }