/* ── Reset ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* WebKit ignores the inherited html tap-highlight for form controls / buttons, so pin it transparent on every tappable control at once. iOS otherwise paints a white bounding-box flash on tap that ignores border-radius (ugly over dark surfaces) — including on file-picker triggers like the composer's Choose field and the Edit-profile avatar button, which just open the native sheet and want no press state of their own. Consolidates the per-control fixes below. */ button, a, label, summary, input, textarea, select, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; /* no grey flash on tap — app feel */ /* The page fill lives on , NOT : the ambient wash is a z-index:-1 child of , and a body background box paints ABOVE its own negative z-index descendants (CSS painting order), which would bury the wash. Putting the fill on the root canvas lets the wash show through under the content. */ background: var(--bg); } /* The same paper again, as a FIXED layer this time — because the canvas above ends with the document and the glass on top of it does not. The topbar is 55% paper over a backdrop blur, which is invisible at rest for the obvious reason: the thing behind it is also paper, so 55% of paper over paper is paper. Pull past the top and the document slides away, and for the length of the rubber band the bar is translucent over NOTHING — the void above the document, which composites nowhere near --bg. The bar stopped being invisible and became a lighter slab with a hard edge along the bottom, strongest in dark mode where three levels on a near-black is a real step (measured #111315 against a #0E1012 page, and #17191B right at the lip). It read as a panel someone forgot to fade out. Setting scrollView.backgroundColor in TriaViewController.swift fixed what you see BESIDE the document, and that fix is still right — but a UIKit colour is underneath the whole web view and a backdrop-filter can only sample what the web layer painted, so it could never reach this. The fix has to be inside the document: one viewport-sized fill that no amount of scrolling can move off, sitting under everything, so every piece of glass in the app has paper behind it in every scroll position there is. z-index -2, not -1: the ambient wash is a z-index:-1 child of and has to stay ABOVE this, or a profile's glow would be painted over. Flat colour, no blur, no gradient — it's one composited layer that never repaints. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--bg); pointer-events: none; } body { color: var(--text); font-family: 'Oxygen', system-ui, sans-serif; font-weight: 300; line-height: 1.5; min-height: 100dvh; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* appearance:none strips WebKit's native button chrome — including the pale pressed-state overlay iOS paints on tap, which reads as a white flash over a dark surface and is NOT the tap-highlight (that's already transparent above). Every button in the app is fully custom-styled, so removing native appearance is safe and kills the flash on file-picker triggers like the composer dropzone and the avatar edit button. */ button { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } a { color: inherit; text-decoration: none; } /* Chrome (nav, buttons, brand) shouldn't be long-press-selectable — that text-selection callout is another tell that it's a web page, not an app. Inputs/textareas stay selectable (below). */ button, a, .nav-link, .brand, .masthead-kicker { -webkit-user-select: none; user-select: none; } input, textarea { -webkit-user-select: auto; user-select: auto; } /* ── Ambient wash (profiles only) ────────────────────────────────────────── One soft blob centred above the screen, behind the whole app (above the flat page colour, below all content) — symmetric depth from the background itself, not a coloured card. It's a profile special: only a profile lights it up, in a still colour sampled from that person's photo (set via --glow-photo by the router). Everywhere else it stays transparent. */ .ambient { /* The glow sits behind the top of the view and scrolls away as you read down — depth on arrival without sitting behind every post forever. It still does that, but it is no longer POSITIONED that way, and the difference is the whole reason this comment is long. It used to be `position: absolute; top: 0`, so it simply rode the document. That cannot survive the iOS rubber band: body::before (fixed) paints the entire overscroll gap and a scrolled layer is clipped to the document, so pulling down on a profile slid the wash out from under the fixed paper and opened a band of bare page above it — a hard step, #EDEEF0 to #E9D8DA across a single row, the same species of seam as the topbar band and about as loud. Growing this box upward looks like the obvious answer and is completely inert: content above the page origin is never painted at all (a magenta probe on body::before confirmed which layer owns that region). So the wash is fixed — it can no longer be dragged off the top by anything — and the scroll-away is driven by a SCROLL TIMELINE instead of by layout. That buys the one property `absolute` couldn't give: a scroll timeline's progress is clamped to the scroll range, so overscrolling past the top holds it at 0 and the wash stays exactly where it is, covering the gap, while a normal scroll down moves it 1:1 with the page. 100vh of scroll over 100vh of travel is the same speed the document moves, so this is not parallax and there is nothing for prefers-reduced-motion to object to — it reproduces what `absolute` did, minus the one case where `absolute` broke. Scoped to the profile wash (below) rather than living here, because the other three washes are pinned ON PURPOSE and must not scroll away. And gated on @supports, so a webview without scroll timelines degrades to a wash that stays put — the old behaviour's opposite, but never the seam. inset:0 rather than a 100vh box for the reason spelled out under the About wash below: on iOS `100vh` is the LARGE viewport while `top: 0` pins to the small one, and this glow is brightest at that very edge. */ position: fixed; inset: 0; z-index: -1; pointer-events: none; --glow: transparent; background: radial-gradient(ellipse 78% 62% at 50% -14%, var(--glow), transparent 70%); /* Promoted, and the animation below drives this same property — so it has to be a transform here too, or the keyframe would drop the promotion mid-scroll. */ transform: translate3d(0, 0, 0); /* Fade in/out with the page transition (a gradient can't tween, but opacity can) so it eases in alongside the rest of the site rather than snapping. */ opacity: 0; transition: opacity 0.4s ease; } body[data-ambient="photo"] .ambient { --glow: var(--glow-photo, transparent); opacity: 1; } /* The scroll-away, on a scroll timeline (see .ambient). One viewport of travel per viewport of scroll — by 100vh the box's bottom edge has reached the top of the screen and there is nothing left to show, so the animation is done exactly when the glow is gone. `both` holds it there for the rest of a long profile. */ @keyframes wash-away { to { transform: translate3d(0, -100vh, 0); } } @supports (animation-timeline: scroll()) { body[data-ambient="photo"] .ambient { animation: wash-away linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } } /* About page (signed in OR the signed-out front door) carries the self-lit, hue-drifting blue glow: pinned to the viewport top and falling down over the guidelines and the floating nav — position-locked, no longer a scroll-away wash. The LOGIN screen no longer wears it — its pastel now comes from the gradient Create-account / Log-in button — so the wash is keyed off data-ambient="about" only, not body.gate (the router sets 'about' on the signed-out front door and 'none' on the auth form). */ /* There's no photo to sample here, so the wash lights itself and drifts slowly through the hue wheel. It's anchored to the TOP — the glow falls down over the content. Pinned to the VIEWPORT (fixed) so it never scrolls off or shows a hard cut edge when the page is tall. */ /* Span BOTH viewport edges (inset: 0) rather than sizing with 100vh: on iOS Safari `100vh` is the large (toolbar-hidden) viewport while `top: 0` pins a fixed box to the small (toolbar-shown) one, so a 100vh box's top edge can land below the true top when the toolbar is collapsed. Since this glow is brightest at that very edge (centre at -18%, above the box), inset:0 lets the box reach the true viewport top, keeping the glow's bright base flush with the screen edge regardless of browser chrome. The GPU promotion keeps the hue-drift filter off the scroll path. */ body[data-ambient="about"] .ambient { position: fixed; inset: 0; height: auto; --glow: rgba(52, 120, 236, 0.36); background: radial-gradient(ellipse 120% 85% at 50% -18%, var(--glow), transparent 72%); opacity: 1; animation: hue-drift 30s linear infinite; transform: translateZ(0); } @keyframes hue-drift { to { filter: hue-rotate(360deg); } } /* Publish composer: the whole screen washes the inferred post type's hue — lavender Note, peach Find, cyan Frame, lime Activity, rose Poll. A half-screen radial falling from the top (the About glow's shape) but REACTIVE, not drifting: --glow-pub is a registered so the wash tweens between types as you attach a link/photo or switch to Activity; the gradient takes its alpha via color-mix. Driven on in renderPublish / syncType. */ @property --glow-pub { syntax: ''; inherits: true; initial-value: #b7a6e8; } body[data-ambient="publish"] .ambient { position: fixed; inset: 0; height: auto; /* Richer than the profile/About washes: a stronger colour core plus a saturate boost so the pastel reads as real colour rather than a faint tint. */ background: radial-gradient(ellipse 120% 84% at 50% -18%, color-mix(in srgb, var(--glow-pub) 35%, transparent), transparent 74%); filter: saturate(1.5); opacity: 1; transition: --glow-pub var(--dur-move) var(--ease), opacity 0.4s ease; transform: translateZ(0); } /* A daily's page: the same full-screen wash, held at the ONE hue the daily wears (the post type it asks for). Nothing tweens it — a daily doesn't change type under you the way the composer does as you attach things — so it's a plain custom property rather than a registered one, set by applyAmbient. */ body[data-ambient="daily"] .ambient { position: fixed; inset: 0; height: auto; background: radial-gradient(ellipse 120% 84% at 50% -18%, color-mix(in srgb, var(--glow-daily, transparent) 30%, transparent), transparent 74%); filter: saturate(1.4); opacity: 1; transform: translateZ(0); } @media (prefers-reduced-motion: reduce) { .ambient { transition: none; } body[data-ambient="about"] .ambient { animation: none; } /* Colour still updates on type change, just without the tween. */ body[data-ambient="publish"] .ambient { transition: opacity 0.4s ease; } } /* ── Grain ────────────────────────────────────────────────────────────────── A static, greyscale film-grain tile laid over the reading surface (bg, ambient wash, and content) — flat pastel fills and gradients pick up a tactile paper texture instead of reading digital-smooth. It's a single fixed, blended layer: no animation (so it's reduced-motion-safe by construction) and no network (the noise is an inline SVG in --grain), so the cost is one GPU-composited layer. Sits below the fixed chrome (100) and modals (250), so the wordmark, nav, and dialogs stay crisp; pointer-events:none keeps it inert. */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background-image: var(--grain); background-size: 140px 140px; /* native tile — reads as fine grain even at 3x DPR */ opacity: var(--grain-opacity); mix-blend-mode: overlay; /* mid-grey noise both lifts and deepens the surface */ } /* On dark paper overlay clips to harsh sparkle; soft-light keeps it as texture. */ @media (prefers-color-scheme: dark) { body::after { mix-blend-mode: soft-light; } } /* The boot splash owns the screen before the app fades in — no grain over it. */ body:has(.splash:not(.splash--out))::after { display: none; } /* Visible keyboard focus on every interactive element. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } :focus:not(:focus-visible) { outline: none; } /* Instrument Serif is reserved for TITLES ONLY — page titles and post headlines. Everything else is Oxygen, leaning on weight (300 / 400 / 700) for hierarchy. */ .view-title, .card-title { font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; } /* ── Boot splash ──────────────────────────────────────────────────────────── A full-page curtain in the page's own paper, crowned by a serif t wearing the Post button's drifting pastel gradient (same keyframes, same quintet). Painted from static HTML before any JS runs; app.js adds .splash--out after the first render and removes the node once the fade lands. The t arrives the way cards do — a soft rise — plus the site's blur-settle. */ .splash { position: fixed; inset: 0; z-index: 400; /* above topbar/nav (100) and modals (250) */ display: grid; place-items: center; background: var(--bg); transition: opacity var(--dur-move) var(--ease); } .splash-t { /* Roman, not italic — the same t as the app icon's mark. */ font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(7.5rem, 26vw, 12rem); line-height: 1; padding: 0 0.15em 0.1em; /* clip-to-text crops at the box — keep air around the glyph */ background: linear-gradient(115deg, var(--type-note), var(--type-poll), var(--type-find), var(--type-activity), var(--type-photo), var(--type-note)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: splash-in var(--dur-slow) var(--ease) both, publish-shift 2s ease-in-out infinite; /* faster than the Post button's 5s: splashes are brief, show more of the quintet */ } /* Grain the whole curtain — paper and the gradient glyph together — so the boot screen carries the same tactile surface as the app (the global body::after grain is hidden while the splash is up, so it's re-added here). Static, above the in-flow t so it textures the glyph; blend flips with the theme. */ .splash::after { content: ''; position: absolute; inset: 0; background-image: var(--grain); background-size: 140px 140px; mix-blend-mode: overlay; opacity: var(--grain-opacity); pointer-events: none; } @media (prefers-color-scheme: dark) { .splash::after { mix-blend-mode: soft-light; } } @keyframes splash-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .splash--out { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .splash { transition: none; } .splash--out { visibility: hidden; } .splash-t { animation: none; background-position: 50% 50%; } } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 0.6rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 300; } .skip-link:focus { left: 0; } /* Present to screen readers / the heading outline, but off-canvas visually. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ── Sidebar (desktop) ────────────────────────────────────────────────────── A floating macOS-style glass rail, detached from the window edges: one rounded, translucent card (drawn by .nav below) carries the whole column — brand up top, nav stacked, publish pinned to the foot. The topbar itself is just a transparent overlay that rests the wordmark on the card's head; the glass, border, and shadow all live on .nav so there's no seam between them. On phones the rail splits into a top brand bar + a bottom tab bar (see foot). */ .topbar { position: fixed; top: 1rem; left: 1rem; width: calc(var(--sidebar-w) - 2rem); height: var(--topbar-h); z-index: 101; /* the wordmark rides on the floating card (z 100) */ display: flex; align-items: center; padding: 0 1.75rem; /* aligns the brand with the nav-link text below */ border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; /* only the brand link takes clicks; rest is card */ } .topbar .brand { pointer-events: auto; } /* Share Tria (the tray). Desktop: the topbar is a left rail, so this breaks out of it and floats as a small glass disc pinned to the viewport's top-right corner over content — floating chrome, hence the glass material (blur + rim + float). On phones it sheds the disc and docks bare into the header bar (mobile block below). pointer-events re-enabled since the desktop topbar is inert. A