/* --------------------------------------------------------------------------- THE DEVICE. One iPhone, FIVE surfaces. There were five, and they did not look like each other. `/demo` and `/` had one apiece (near-identical, drifting); the onboarding landing had a 40px-radius rectangle with a blue square for an avatar and its status bar set to `display: none`; the dashboard had a NOTCH-era handset whose battery indicator was the literal string "\u25AE\u25AE\u25AE 100%"; and the product itself was a rounded card with no bezel at all, which is what a visitor met immediately after clicking through from the marketing page that shows the real thing. Two implementations of an iPhone are two iPhones that stop looking alike a radius at a time, and the second one is always the worse one because it is drawn from memory of the first. Five is not a design system, it is five people's memories of a phone. Both static pages (/ and /demo) link this stylesheet: `/device.css`, out of `public/`, rather than under `landing-v3/assets/` where it lived when only one page drew a phone. (The app that shared it until October 2026 was replaced by Lewis v2, which draws no phone.) ITS OWN FILE RATHER THAN app.css, and that is load-bearing rather than tidy. `scripts/landing-v3-scale.ts` re-emits every length in casa.css AND app.css wrapped in `calc(N * var(--v3-scale))`, which is exactly right for the design system and exactly wrong here: an iMessage screen is Apple's geometry laid out in iOS POINTS at 1:1, and the whole phone is scaled once, by a transform, at the end. Scaling it twice would put 17pt body text on a fractional pixel grid, where glyph advances round to whole subpixels and every string comes out a few percent wide. That error is proportional and no max-width undoes it. The generator never reads this file, so nothing here can be scaled by accident. Loaded AFTER scale.css on both pages, so it is the last word on the device. What is NOT in here: the two pages' own stage and scaling wrappers (`.demo-split`, `.stage`, `.dev-slot` on /demo; `.ph-wrap`, `.ph-slot` on /). Those are layout decisions about a column, not about a phone, and they differ because one page shows two phones and the other shows one. --------------------------------------------------------------------------- */ .dev-frame { position: relative; width: 393px; height: 822px; background: #0b0b0d; border-radius: 62px; padding: 5px; box-shadow: 0 10px 26px rgba(0,0,0,.18), 0 42px 88px rgba(0,0,0,.26); } /* `> i`, NOT ` i`. This is the volume rocker and the side button, and as a descendant selector it also claimed every anywhere inside the screen: the Focus glyph beside the clock came out as a 3px dark sliver pinned to the left edge of the phone, which is a very confusing thing to look at. */ .dev-frame > i { position: absolute; width: 3px; background: #2a2a2e; border-radius: 2px; } .dev-frame > i:nth-of-type(1) { left: -2px; top: 158px; height: 34px; } .dev-frame > i:nth-of-type(2) { left: -2px; top: 212px; height: 66px; } .dev-frame > i:nth-of-type(3) { left: -2px; top: 292px; height: 66px; } .dev-frame > i:nth-of-type(4) { right: -2px; top: 236px; height: 102px; } /* `--dev-thread-top` / `--dev-thread-bot` are the two insets a LIVE thread sits between: enough to clear the glass header, enough to clear the composer. They are variables rather than literals because the bare phone below moves both, and a consumer that hard-codes 176 renders its first bubble under the header the moment the bezel comes off. `.msg-list` keeps its own literals: it is the SCRIPTED thread on the two marketing pages, which never goes bare. */ .dev-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 57px; background: #fff; --dev-thread-top: 176px; --dev-thread-bot: 96px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: #000; -webkit-font-smoothing: antialiased; } /* Time on the left with the Focus glyph beside it, then the three status icons. Measured off a real 402pt screenshot: 17pt semibold, 30pt of side padding, and the whole row on the 54pt line the Dynamic Island sits in. */ /* The insets and the height are measured off a 393pt iPhone 15 Pro at 3x, which is this screen's own width: the clock's INK starting at 53.33pt, the battery's nub ending 32.67pt from the right, and both centred on 29.33pt — the same line the Dynamic Island is centred on, which is why the row is 58.67 tall rather than a round number. The left inset is 52.25 rather than 53.33 because padding positions the text BOX and iOS's 53.33 is where the ink lands. Every SF lining digit carries a ~1.08pt left side bearing, so subtracting it once is correct for any time string rather than for the one the mock happens to show. */ .dev-status { position: absolute; inset: 0 0 auto 0; height: 58.67px; z-index: 12; display: flex; align-items: center; justify-content: space-between; padding: 0 32.67px 0 52.25px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .dev-time { display: inline-flex; align-items: center; gap: 6px; } .dev-time i { font-style: normal; font-size: 15px; line-height: 1; } /* One SVG carrying its own internal spacing — see the note in device.tsx for why a flex `gap` cannot draw this row. */ .dev-ic { display: block; flex: none; } /* 125 x 36.67 at 11.33 from the top: the real thing on a 393pt phone, not a rounded-down guess. Everything in the status bar is centred on its centre. */ .dev-island { position: absolute; left: 50%; top: 11.33px; transform: translateX(-50%); width: 125px; height: 36.67px; border-radius: 999px; background: #0b0b0d; z-index: 13; } .dev-home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 148px; height: 5px; border-radius: 999px; background: #111; opacity: .85; z-index: 12; } /* iOS 26 glass: the translucency is the whole of it. */ /* iOS 26 glass, and THE TRANSLUCENCY IS THE WHOLE OF IT. Three layers, and every one is doing work: 1. `backdrop-filter` blurs what is behind. That is the part everybody implements, and on its own it looks like frosted plastic. 2. The `brightness` and `saturate` in the same filter are what make it read as GLASS rather than as a grey panel: real glass lifts and enriches what is behind it before it blurs it. Dropping either one is the difference between the composer looking like it is floating over the thread and looking like it is painted on top of it. 3. The background is a vertical GRADIENT rather than a flat white, brightest at the top edge and slightly brighter again at the bottom. That is the specular line along a curved edge, and it is what stops a 44px pill from reading as a rounded rectangle with blur behind it. The inset hairline is the edge of the glass; the two outer shadows are the contact shadow and the ambient one. */ .g { background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.56) 42%, rgba(255,255,255,.54) 72%, rgba(255,255,255,.68) 100%); backdrop-filter: blur(20px) saturate(155%) brightness(1.08); -webkit-backdrop-filter: blur(20px) saturate(155%) brightness(1.08); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.7), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -.5px 0 rgba(255,255,255,.55), 0 8px 22px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.07); } .msg-scroll { position: absolute; inset: 0; overflow: hidden; } .msg-list { position: absolute; left: 0; right: 0; top: 170px; transition: transform .42s cubic-bezier(.22,.61,.36,1); } /* A SCRIPTED thread is DRIVEN; a LIVE one is SCROLLED, and the default above is the first of those. `/`'s hero runs a written conversation on a timer, so its thread is positioned by the page (`.ph-thread` hangs it off the composer) and moved by the page. It has nothing to scroll back to: every line it will ever show is one it is about to play. `/demo` is the other kind. It is a real conversation that grows for as long as somebody keeps typing, and with the list absolutely positioned and translated there was no way to go back and read the top of it -- the first bubbles slid up under the glass header and out of reach. A transcript you cannot scroll is a transcript that only exists while it fits. So this is the opt-in: the SCREEN becomes the scroller and the list goes back into normal flow, with the same two insets the transform was reproducing -- 170px clears the header, 96px clears the composer (822 - 726, the anchor the old maths used). Bubbles still pass UNDER both, because the header and the composer are later siblings painting over this box rather than edges it stops at. The bar is hidden on purpose. It would be the one piece of desktop furniture on a surface whose whole job is to look like a phone. */ .msg-scroll--live { overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .msg-scroll--live::-webkit-scrollbar { width: 0; height: 0; } .msg-scroll--live > .msg-list { position: static; top: auto; transform: none; transition: none; padding-top: 170px; padding-bottom: 96px; } .msg-row { margin-top: 3px; } .msg-row.turn { margin-top: 9px; } .msg-meta { text-align: center; color: #8E8E93; font-size: 12.5px; line-height: 15.5px; letter-spacing: -.01em; } .msg-out { padding-left: 70px; padding-right: 16px; display: flex; justify-content: flex-end; } .msg-in { padding-left: 16px; padding-right: 70px; display: flex; } /* The tail as two rectangles rather than a bezier: it survives being drawn half a pixel wide, which a curve does not. */ .b { position: relative; max-width: 262px; } .b > span { position: relative; z-index: 2; display: block; border-radius: 18px; padding: 8.5px 13.5px 9.5px; font-size: 17px; line-height: 21.5px; letter-spacing: -.022em; word-break: break-word; white-space: pre-line; } .b.out > span { background: #248BF5; color: #fff; } .b.in > span { background: #E9E9EB; color: #000; } .b::before, .b::after { content: ""; position: absolute; bottom: 0; } .b.out::before { right: -5px; width: 14px; height: 15px; background: #248BF5; border-bottom-left-radius: 11px; z-index: 0; } .b.out::after { right: -7px; width: 7px; height: 15px; background: #fff; border-bottom-left-radius: 8px; z-index: 1; } .b.in::before { left: -5px; width: 14px; height: 15px; background: #E9E9EB; border-bottom-right-radius: 11px; z-index: 0; } .b.in::after { left: -7px; width: 7px; height: 15px; background: #fff; border-bottom-right-radius: 8px; z-index: 1; } .b.fresh { animation: pop .26s cubic-bezier(.22,.61,.36,1); } @keyframes pop { from { opacity: 0; transform: translateY(9px) scale(.9) } to { opacity: 1; transform: none } } /* THE BOTTOM BAND IS ALMOST GONE, and that is what makes the composer glass. It used to paint an opaque white gradient over the bottom 108px, which meant the pill was sitting on white and `backdrop-filter` had nothing to filter: the most expensive part of the chrome was rendering a very slightly grey rectangle. In iOS the thread runs UNDER the composer and you read it through the glass, smeared and lifted, and that refraction is most of what tells you the bar is floating. So the band now fades only the last few pixels above the home indicator, and the messages carry on behind the pill. The top band stays opaque, because the header is doing something different: it is a solid surface with the status bar on it, and a message sliding out from under the time is wrong in the other direction. */ .band-top, .band-bot { position: absolute; left: 0; right: 0; z-index: 8; pointer-events: none; } .band-top { top: 0; height: 176px; background: linear-gradient(to bottom,#fff 0%,#fff 55%,rgba(255,255,255,.9) 74%,rgba(255,255,255,0) 100%); } /* The fade ENDS where the composer begins -- 44px, `.cmp-bar`'s own `bottom`. It was 30, which left a 14px strip between the two where a bubble scrolled past in full focus, right against the home indicator. Nothing reached that strip while the thread was translated rather than scrolled, because the list stopped at the anchor; a real scroller goes all the way under. It may not grow past 44. The composer occupies 44..86 and its glass has to have something to filter -- painting white behind it is how `backdrop-filter` was turned into grey plastic once already (the band was 108px then). Below 44 there is no glass, only bare screen, so a fade there costs nothing and is the only thing standing between a scrolled bubble and the bottom bezel. */ .band-bot { bottom: 0; height: 44px; background: linear-gradient(to top,#fff 0%,rgba(255,255,255,.75) 45%,rgba(255,255,255,0) 100%); } .hdr-back { position: absolute; left: 16px; top: 62px; width: 81px; height: 41px; border-radius: 20.5px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 11px; z-index: 9; } /* Without an unread count there is nothing in the pill but the chevron, and a 81px lozenge with a 7px glyph rattling around in it reads as a control that failed to load. iOS draws the bare chevron on its own. */ .hdr-back:not(:has(em)) { width: 42px; justify-content: center; padding: 0; } .hdr-back em { background: #1C1C1E; color: #fff; border-radius: 11px; font-size: 15.5px; font-weight: 600; line-height: 22px; padding: 0 8px; letter-spacing: -.02em; font-style: normal; } .hdr-ft { position: absolute; right: 16px; top: 62px; width: 42px; height: 42px; border-radius: 21px; display: grid; place-items: center; z-index: 9; } .hdr-av { position: absolute; left: 50%; top: 58px; margin-left: -30px; width: 60px; height: 60px; border-radius: 999px; overflow: hidden; z-index: 9; background: #E9E9EB; display: grid; place-items: center; font-size: 26px; } .hdr-av img { width: 100%; height: 100%; display: block; } .hdr-name { position: absolute; left: 50%; top: 113px; transform: translateX(-50%); height: 31px; padding: 0 12px; border-radius: 15.5px; display: flex; align-items: center; justify-content: center; gap: 5px; z-index: 9; font-size: 16.5px; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; } /* The disclosure chevron is grey, not ink: it is an affordance rather than part of the name, and at this weight a black one reads as punctuation. The selector has to reach the PATH. `.hdr-name svg` only sets the property on the , which the path then inherits — and an inherited value loses to the path's own `stroke="#000"` presentation attribute, so the rule was there and the chevron was black anyway. Matching the path directly is what actually outranks the attribute. */ .hdr-name svg path { stroke: #8E8E93; } /* The two pills that can be BUTTONS rather than pictures (see device.tsx). A