/* ══════════════════════════════════════ Hopper — styles.css Ephemeral cross-device clipboard. On the per-app icon-colour design model (DESIGN.md / DESIGN-ROLLOUT.md). Shell tokens (surfaces, text, steel, status, type scale, fonts, spacing, radius) come from /shared/porter-tokens.css, linked in before this file. Hopper keeps only its signature accent block + components below. ══════════════════════════════════════ */ :root { /* ── Signature palette ────────────────────────────────────────────────── Hopper = FUCHSIA, with ICE CYAN as the real second axis (the item "in transit" — same two-tone the icon uses: fuchsia machines/arc, cyan file). Fuchsia leads the chrome (wordmark dot, primary actions, drop-zone focus); ice cyan marks the live link + in-flight cues. */ --accent: #d6459b; /* fuchsia */ --accent-dim: #9c2f6e; --accent-bright: #e86bb4; --accent-tint: rgba(214, 69, 155, 0.15); /* Second axis — ice cyan (the in-transit item / live signal). */ --ice: #6fe3e0; --ice-dim: #3fa0a0; --ice-tint: rgba(111, 227, 224, 0.14); /* Local aliases onto the shared shell (short names used below). */ --head: var(--font-display); --body: var(--font-body); --r: var(--radius); --rsm: var(--radius-sm); --hdr-h: 64px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scrollbar-gutter: stable; -webkit-font-smoothing: antialiased; } body { font-family: var(--body); background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: var(--fs-md); line-height: 1.5; font-weight: 300; padding-top: calc(var(--hdr-h) + env(safe-area-inset-top)); } a { color: inherit; -webkit-tap-highlight-color: transparent; } button { -webkit-tap-highlight-color: transparent; font-family: inherit; } /* ── HEADER (shared standard, DESIGN.md) ── */ .app-header { background: var(--surface); border-bottom: 1px solid var(--border); padding-top: env(safe-area-inset-top); position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); } .header-inner { max-width: var(--app-width); margin: 0 auto; height: var(--hdr-h); padding: 0 var(--app-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .app-title { display: flex; align-items: center; gap: 11px; min-width: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); letter-spacing: 3px; text-transform: uppercase; color: var(--text); } .back-link { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-2xs); letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color var(--motion-base); flex-shrink: 0; } .back-link:hover, .back-link:active { color: var(--steel); } .header-divider { width: 1px; height: 1.2em; background: var(--border); flex-shrink: 0; align-self: center; } body[data-share] .back-link, body[data-share] .header-divider { display: none; } .app-title-icon { display: block; width: 1.7em; height: 1.7em; flex-shrink: 0; } .wordmark { display: inline-block; color: var(--text); } .app-title .dot { color: var(--accent); margin-left: -1px; } /* Live-connection indicator (right side of the header). */ .conn { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.4px; text-transform: lowercase; color: var(--text-muted); flex-shrink: 0; } .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); box-shadow: 0 0 0 0 transparent; transition: background var(--motion-base); } .conn.online .conn-dot { background: var(--ice); box-shadow: 0 0 10px var(--ice-dim); } .conn.online .conn-label { color: var(--ice); } .conn.offline .conn-dot { background: var(--warn); } .conn.offline .conn-label { color: var(--warn); } /* ── CONTENT ── */ main { flex: 1; } .container { max-width: var(--app-width); margin: 0 auto; padding: var(--space-xl) var(--app-pad) var(--space-2xl); } /* ── COMPOSER (drop zone + text) ── */ .composer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); } .dropzone { border: 1.5px dashed var(--border); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); padding: var(--space-xl) var(--space-md); text-align: center; cursor: pointer; transition: border-color var(--motion-base), background var(--motion-base); min-height: 168px; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--steel-dim); outline: none; } .dropzone.dragover { border-color: var(--accent); background: var(--accent-tint); } .dz-glyph { font-size: var(--fs-xl); color: var(--accent); line-height: 1; } .dz-title { font-family: var(--head); font-size: var(--fs-base); color: var(--text); } .dz-sub { font-size: var(--fs-xs); color: var(--text-muted); } .dz-paste { margin-top: var(--space-sm); } .text-compose { display: flex; flex-direction: column; gap: var(--space-sm); } .text-compose textarea { resize: vertical; min-height: 124px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; padding: var(--space-sm); } .text-compose textarea:focus { outline: none; border-color: var(--accent-dim); } .text-compose textarea::placeholder { color: var(--text-dim); } .tc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .tc-hint { font-size: var(--fs-2xs); color: var(--text-dim); font-family: var(--font-mono); } /* ── BUTTONS (shared shape) ── */ .btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rsm); color: var(--text); font-family: var(--head); font-size: 0.66rem; font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.55rem 1rem; cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast); white-space: nowrap; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn:active { background: var(--surface); } .btn-primary { border-color: var(--accent-dim); color: var(--accent); } .btn-primary:hover { background: var(--accent-dim); color: var(--text); } .btn-ghost { background: transparent; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn:disabled:hover { border-color: var(--border); color: var(--text); } .btn-sm { padding: 0.34rem 0.66rem; font-size: 0.6rem; } /* ── TRAY ── */ .tray-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--border); padding-bottom: var(--space-sm); } .tray-title { font-family: var(--head); font-weight: 500; font-size: var(--fs-lg); letter-spacing: var(--ls-title); color: var(--text); } .tray-count { color: var(--text-muted); font-size: var(--fs-md); font-family: var(--font-mono); } .tray-list { display: flex; flex-direction: column; gap: var(--space-sm); } .tray-empty { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: var(--space-2xl) var(--space-md); max-width: 46ch; margin: 0 auto; line-height: 1.6; } /* ── ITEM CARD ── */ .item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--space-sm) var(--space-md); } .item-kind { width: 34px; height: 34px; border-radius: var(--rsm); display: grid; place-items: center; font-size: var(--fs-base); background: var(--ice-tint); color: var(--ice); flex-shrink: 0; } .item-body { min-width: 0; } .item-name { font-family: var(--head); font-size: var(--fs-md); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-muted); letter-spacing: 0.3px; margin-top: 2px; } .item-meta .exp { color: var(--text-dim); } .item-preview { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2); border-radius: var(--rsm); padding: var(--space-xs) var(--space-sm); max-height: 7.5em; overflow: auto; white-space: pre-wrap; word-break: break-word; } .item-thumb { margin-top: var(--space-2xs); max-width: 100%; max-height: 160px; border-radius: var(--rsm); border: 1px solid var(--border); display: block; } .item-actions { display: flex; flex-direction: column; gap: var(--space-2xs); align-items: stretch; flex-shrink: 0; } .item-actions .btn-sm { width: 100%; } .item-actions .btn-del:hover { border-color: var(--danger); color: var(--danger); } /* ── QR MODAL ── */ .modal-host { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: center; } .modal-host[hidden] { display: none; } .modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); } .modal { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); padding: var(--space-lg); display: flex; flex-direction: column; align-items: center; gap: var(--space-md); max-width: 90vw; } .qr-canvas { background: var(--surface); border-radius: var(--rsm); line-height: 0; } .qr-canvas canvas { display: block; border-radius: var(--rsm); } .qr-cap { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; max-width: 30ch; } /* ── TOAST ── */ .toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); font-size: var(--fs-xs); color: var(--text); box-shadow: var(--shadow-pop); z-index: var(--z-toast); } /* ── FOOTER (shared standard) ── */ .app-footer { margin-top: auto; text-align: center; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.4px; color: var(--text-dim); opacity: 0.7; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); } .app-footer .sep { opacity: 0.5; margin: 0 7px; } /* ── MOBILE ── */ @media (max-width: 768px) { html { font-size: 15px; } .composer { grid-template-columns: 1fr; } .container { padding: var(--space-lg) var(--app-pad) var(--space-2xl); } .item-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; } .item-actions .btn-sm { width: auto; } .conn-label { display: none; } }