/* --------------------------------------------------------------------- Wisp — design tokens Ink #14151A · Paper #FAFAF8 · Signal #00C2A8 · Slate #6B7280 · Line #E7E5DF Single system-font stack, one accent color, weight/scale carry hierarchy. ------------------------------------------------------------------------ */ :root { --ink: #14151a; --ink-soft: #34363f; --paper: #fafaf8; --paper-raised: #ffffff; --line: #e7e5df; --line-strong: #d7d4cb; --signal: #00c2a8; --signal-ink: #003b33; --slate: #6b7280; --danger: #c8402b; --danger-bg: #fdf1ee; --warn-bg: #fff8ea; --warn-ink: #7a5b00; /* Small tint/hover surfaces used against the base backgrounds above — kept as their own tokens (rather than hardcoded hex at each call site) purely so the dark theme below only has to override them once. */ --tint-signal: #eafaf7; --tint-neutral: #f1f0eb; --hover-neutral: #f4f3ee; --hover-signal: #f5fdfc; --placeholder: #c7c4ba; --desktop-bg-start: #f0efe9; --desktop-bg-end: #e9e7df; --overlay-ink: rgba(20, 21, 26, 0.05); --overlay-ink-soft: rgba(20, 21, 26, 0.03); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --shadow-card: 0 1px 2px rgba(20, 21, 26, 0.04), 0 8px 24px -12px rgba(20, 21, 26, 0.12); --shadow-raised: 0 2px 4px rgba(20, 21, 26, 0.06), 0 16px 40px -16px rgba(20, 21, 26, 0.22); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); color-scheme: light; } /* Dark theme — toggled via the sun/moon button on the home screen (see js/theme.js), which sets data-theme on and persists the choice in localStorage. Same shape as :root above, just re-pointed at a dark palette; every rule elsewhere in this file already reads these tokens, so nothing past this block needs to know a theme even exists. */ html[data-theme="dark"] { /* Softer than a first pass at "invert everything": near-white instead of pure white text, a lifted (not pitch-black) base surface with a visibly distinct raised-card tone on top of it, and a slightly desaturated signal color so it reads as an accent rather than glowing. */ --ink: #ececee; --ink-soft: #b7bac1; --paper: #18191b; --paper-raised: #212226; --line: #2d2f34; --line-strong: #3d4046; --signal: #2ed9bc; --signal-ink: #eafff9; --slate: #8b8f98; --danger: #ff8a76; --danger-bg: #34211d; --warn-bg: #332a15; --warn-ink: #e8c158; --tint-signal: #163330; --tint-neutral: #2a2c31; --hover-neutral: #26282d; --hover-signal: #17322e; --placeholder: #63666d; --desktop-bg-start: #0e0f10; --desktop-bg-end: #09090a; --overlay-ink: rgba(255, 255, 255, 0.06); --overlay-ink-soft: rgba(255, 255, 255, 0.04); color-scheme: dark; } /* Redundant with the meta[name=color-scheme] tag in , but some Android/Chromium versions only fully trust that a page manages its own theme (and suppress their "auto dark" repaint of text) once they also see an actual prefers-color-scheme media query in the CSS itself, rather than relying on JS + the meta tag alone. This block changes nothing visually — data-theme still wins — it's purely an extra signal to opt the page out of forced/auto-dark repainting. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } @media (prefers-color-scheme: light) { :root { color-scheme: light; } } * { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; } /* No page scrolls by default — every screen is sized to fit within one viewport (see the fluid type/spacing scale below). The three long-form text pages (about, privacy, terms) opt back into normal scrolling via the .scrollable-page class on ; nothing else should ever need it. */ body { margin: 0; font-family: var(--font); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; } body.scrollable-page { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto; } img, svg { display: block; max-width: 100%; } button, input { font-family: inherit; } a { color: inherit; } .app { max-width: 480px; margin: 0 auto; height: 100dvh; display: flex; flex-direction: column; padding-top: max(clamp(10px, 3dvh, 20px), var(--safe-top)); padding-bottom: max(clamp(10px, 3dvh, 20px), var(--safe-bottom)); position: relative; overflow: hidden; /* safety net: clip rather than scroll if anything runs long */ } /* Scrollable pages get their natural height back and are allowed to overflow into the body's own scroll (set above), instead of being capped and clipped to one viewport. */ body.scrollable-page .app { height: auto; min-height: 100dvh; overflow: visible; } .app > section { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Desktop: keep the phone-shaped experience centered rather than stretching the layout thin across a wide viewport. */ @media (min-width: 640px) { body { background: linear-gradient(180deg, var(--desktop-bg-start), var(--desktop-bg-end)); } .app { margin-top: 32px; margin-bottom: 32px; height: calc(100dvh - 64px); background: var(--paper); border-radius: 28px; box-shadow: var(--shadow-raised); border: 1px solid var(--line); } body.scrollable-page .app { height: auto; min-height: calc(100dvh - 64px); } } /* =========================================================================== Tablet & desktop layout — everything below this stays exactly what phones already get; nothing above this line, and nothing outside these two queries, changes for a phone-width viewport. 641–1023px : tablet — same single-column shell, just roomier: bigger container, type, spacing and touch targets. 1024px+ : laptop/desktop — a real multi-column layout on the two screens where it earns its keep (home, send), plus the same roomier scale everywhere else. =========================================================================== */ /* ------------------------------- Tablet ------------------------------- */ @media (min-width: 641px) { .app { max-width: 640px; } .screen { padding: 0 34px; } .topbar { padding: 6px 34px 10px; } h1 { font-size: 32px; } h2 { font-size: 22px; } .lede { font-size: 16px; margin-bottom: 30px; } .btn { min-height: 56px; font-size: 16.5px; } .action-card { padding: 30px 26px; } .dropzone { padding: 46px 24px; } .back-btn, .theme-toggle-btn { width: 44px; height: 44px; } .back-btn svg { width: 24px; height: 24px; } } /* ---------------------------- Desktop / laptop ---------------------------- */ @media (min-width: 1024px) { .app { max-width: 920px; border-radius: 32px; } .screen { padding: 0 60px; } .topbar { padding: 8px 60px 12px; } h1 { font-size: 38px; } h2 { font-size: 25px; } .lede { font-size: 17px; margin-bottom: 34px; } /* Home: the two action cards sit side by side instead of stacked. */ .stack { flex-direction: row; gap: 22px; } .stack .action-card { flex: 1; } /* Send / choose-files screen: dropzone + file list on the left, transfer settings + the create button on the right, instead of one long stacked column. Each child gets its own explicit grid cell (rather than a shared named area) so independent siblings in the same column never need a wrapper element to stack correctly. */ .send-screen { display: grid; grid-template-columns: 1fr 340px; column-gap: 44px; row-gap: 18px; align-content: start; } .send-screen .page-intro { grid-column: 1 / -1; grid-row: 1; } /* Only the dropzone itself is centered within its column — everything else in the grid keeps its normal left/right placement and width. */ .send-screen #dropzone { grid-column: 1; grid-row: 2; align-self: start; max-width: 400px; width: 100%; margin: 28px auto 0; } .send-screen .selection-summary { grid-column: 1; grid-row: 3; } .send-screen .settings-section { grid-column: 2; grid-row: 2; } .send-screen #one-time-toggle { grid-column: 2; grid-row: 3; align-self: start; } .send-screen #choose-error { grid-column: 1 / -1; grid-row: 4; } .send-screen .spacer { grid-column: 1 / -1; grid-row: 5; min-height: 0; } .send-screen #create-btn { grid-column: 2; grid-row: 6; } } .screen { flex: 1; display: flex; flex-direction: column; padding: 0 22px; min-width: 0; min-height: 0; } /* -------------------------------- Header -------------------------------- */ .topbar { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 22px 8px; } .back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 999px; border: none; background: transparent; color: var(--ink); cursor: pointer; } .back-btn:hover { background: var(--overlay-ink); } .back-btn svg { width: 22px; height: 22px; } /* Theme toggle: same circular button language as .back-btn, mirrored to the opposite side of the topbar (.back-btn's own -8px left margin already gives it a flush left edge, same as any other leading topbar button — no extra positioning needed here). Both icons are always in the DOM; which one shows is purely CSS driven off data-theme, so there's no flash of the wrong icon while JS loads. */ .theme-toggle-btn .icon-sun { display: block; } .theme-toggle-btn .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: block; } .topbar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; } /* -------------------------------- Type -------------------------------- */ h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.15; } h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 4px; } p { line-height: 1.5; margin: 0; } .lede { color: var(--slate); font-size: 15px; margin-bottom: 28px; } .eyebrow { display: none; } /* deliberately unused — see design notes */ /* -------------------------------- Buttons -------------------------------- */ .btn { appearance: none; flex-shrink: 0; /* Native