/* RoomFigure — landing.css. MARKETING PAGE ONLY. Loaded by index.html after styles.css. Nothing here is loaded by privacy.html, terms.html or support.html, so nothing here can break them. Everything is scoped under `.landing` (set on ) or under a `[data-app-state]` / `.ls-*` hook, for the same reason. Rules this sheet obeys, from design-package/CONSTRAINTS.md §4: no gradients as backgrounds, no glow, no sparkle/wand iconography, no purple→pink, no shimmer, no shadow above 8% opacity, exactly one accent, no square corners. Mobile-first. Nearly all traffic is a phone coming from an Instagram or TikTok bio, so every rule below is written for 320pt first and widened with min-width queries only. */ /* --------------------------------------------------------------------------- 1. Page frame ------------------------------------------------------------------------ */ /* The app is light-only (INFOPLIST_KEY_UIUserInterfaceStyle = Light) and the whole argument of this page is warm daylit interior photography sitting on warm paper. The document pages keep their dark mode; the marketing page pins itself back to the light halves so it matches the app and matches the OG image, which is light and cannot adapt. */ .landing { color-scheme: light; --ink: #1C1B19; --stone: #6E6A64; --paper: #FBF9F6; --card: #FFFFFF; --line: #E3DED6; --accent: #2F5D50; --accent-soft: #EDF1EE; --on-ink: #FBF9F6; --discount: #D8232F; --on-discount: #FFFFFF; --image-well: #EFEDEA; --disabled: #C9C5BF; --on-disabled: #FFFFFF; background: var(--paper); color: var(--ink); } /* Belt and braces against horizontal scroll. `clip` rather than `hidden` because `hidden` on an ancestor silently kills position: sticky. */ html:has(.landing) { overflow-x: clip; } .landing { overflow-x: clip; } .landing .wrap { max-width: var(--measure-wide); padding: 0 var(--page-margin); } /* Room for the fixed CTA bar plus the home indicator — reserved ONLY when a bar is actually in the document. This was unconditional, which meant 71px of dead space under the footer on a page that does not emit .stickybar. It is written as a :has() rather than a flat 0 so that pasting the bar back in restores the reservation with no second edit here. On engines without :has() (iOS < 15.4) the reservation never applies; with no bar that is exactly right, and with a bar the cost is a covered footer at the very bottom of the scroll. */ .landing:has(.stickybar) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* A bar marked .when-live does not render before release, so it must not reserve space before release either. */ [data-app-state="prelaunch"] .landing:has(.stickybar.when-live):not(:has(.stickybar:not(.when-live))) { padding-bottom: 0; } @media (min-width: 60rem) { .landing:has(.stickybar) { padding-bottom: 0; } } /* Long unbroken strings (URLs, model names) must not widen the page. */ .landing p, .landing li, .landing h1, .landing h2, .landing h3 { overflow-wrap: break-word; } /* --------------------------------------------------------------------------- 2. Undo the document-page type rules styles.css styles h2 as a ruled section break for legal copy. On a marketing page that reads as a hairline through the middle of the design. ------------------------------------------------------------------------ */ .landing h2 { border-top: 0; padding-top: 0; margin: 0 0 var(--s-sm); font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } .landing h3 { margin: 0 0 var(--s-xs); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; } /* The UA default for

is `margin: 1em 40px`. Every media pane on this page is a

, and 80px of horizontal margin inside a half-width grid column on a 320pt phone leaves about 55px of image. Reset it once, here. */ .landing figure { margin: 0; } /* --------------------------------------------------------------------------- 3. Header ------------------------------------------------------------------------ */ .landing .masthead { padding-top: var(--s-lg); padding-bottom: var(--s-md); margin-bottom: 0; border-bottom: 0; align-items: center; } .landing .masthead nav { gap: var(--s-md); } /* --------------------------------------------------------------------------- 4. Hero ------------------------------------------------------------------------ */ .hero { padding: var(--s-xl) 0 var(--s-xxl); } @media (min-width: 48rem) { .hero { padding: var(--s-xxxl) 0 var(--s-xxxl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-xxl); } } .hero__title { font-size: clamp(2rem, 1.35rem + 3.2vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; /* Tracking.heroHeadline = -0.7 at 32pt */ margin: 0 0 var(--s-md); text-wrap: balance; } .hero__lede { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); line-height: 1.5; color: var(--stone); margin: 0 0 var(--s-xl); max-width: 34ch; text-wrap: pretty; } @media (min-width: 48rem) { .hero__lede { max-width: 38ch; } } /* The hero image well. Reserve the box before the image arrives so nothing moves when it does — CLS on a link opened from a DM is the whole game. */ .hero__media { margin: 0 0 var(--s-xl); border-radius: var(--radius-image); overflow: hidden; background: var(--image-well); aspect-ratio: 4 / 5; } @media (min-width: 48rem) { .hero__media { margin: 0; order: 2; aspect-ratio: 4 / 5; } .hero__copy { order: 1; } } /* When the hero media is a before/after PAIR rather than one image, the frames size themselves and this element is only a positioning wrapper. Without this, the fixed aspect-ratio and overflow:hidden above crop the pair — at 390 the box computes to 438px while two stacked 4:3 panes need 537, so the "after" loses 100px off the bottom. `--split` is the name to use; `--compare` is a synonym kept so either spelling works, since both were in flight at once. */ .hero__media--split, .hero__media--compare { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; } .hero__media img, .hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------------------- 5. Sections ------------------------------------------------------------------------ */ .section { padding: var(--s-xxl) 0; border-top: 1px solid var(--line); } @media (min-width: 48rem) { .section { padding: 64px 0; } } .section--flush { border-top: 0; } .section--tinted { background: var(--accent-soft); border-top: 0; } .section__head { max-width: 46ch; margin: 0 0 var(--s-xl); } .section__head--center { margin-inline: auto; text-align: center; } .section__lede { font-size: 1.0625rem; color: var(--stone); margin: 0; text-wrap: pretty; } .eyebrow { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s-xs); } /* --------------------------------------------------------------------------- 6. Media block — before / after Full-bleed to the .wrap gutters without touching 100vw, because 100vw includes the desktop scrollbar and that is a horizontal scroll bug. ------------------------------------------------------------------------ */ .media { margin: 0 0 var(--s-lg); } .media__frame { position: relative; border-radius: var(--radius-image); overflow: hidden; background: var(--image-well); aspect-ratio: 4 / 3; } .media__frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .media__caption { font-size: 0.9375rem; color: var(--stone); margin: var(--s-sm) 0 0; } /* Before/After capsule, mirroring Size.compareToggle in Theme.swift. */ .media__tag { position: absolute; top: var(--s-sm); left: var(--s-sm); height: 28px; display: inline-flex; align-items: center; padding: 0 var(--s-sm); border-radius: var(--radius-pill); background: rgba(28, 27, 25, 0.72); color: #FFFFFF; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; backdrop-filter: saturate(140%) blur(6px); } /* Two-up compare. Stacks on a phone; side by side from 34rem. */ .compare { display: grid; grid-template-columns: 1fr; gap: var(--s-sm); } @media (min-width: 34rem) { .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-md); } } /* Two-up at EVERY width, including 320 — no media query. A stacked pair is the one arrangement that loses the comparison: the "after" starts below the fold and the two photos read as unrelated rather than as one before/after. It is also the length lever — a stacked pair costs ~537px on a phone against ~131px side by side. This modifier deliberately does NOT touch the frame ratio, so it composes with whatever aspect the source imagery wants (4:3 gallery pairs keep 4:3). For portrait sources add `.compare--portrait` as well. `--split` is the name to use; `--tight` is a synonym. */ .compare--split, .compare--tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xs); } /* The capsule has to come down with the pane. Size.compareToggle is 28pt in the app, but that is measured against a full-width result image; on a ~171x128 half-pane at 390 a 28px pill eats 22% of the pane height. 22px at 11px type is 17%, and 11 is the type floor the design system reserves for badge-shaped labels — so this is the smallest legal step, not a free choice. Full size returns from 768, where the pane is big enough to carry it. */ .compare--split .media__tag, .compare--tight .media__tag { top: var(--s-xs); left: var(--s-xs); height: 22px; padding: 0 8px; font-size: 0.6875rem; } @media (min-width: 48rem) { .compare--split, .compare--tight { gap: var(--s-sm); } .compare--split .media__tag, .compare--tight .media__tag { top: var(--s-sm); left: var(--s-sm); height: 28px; padding: 0 var(--s-sm); font-size: 0.75rem; } } /* Opt-in portrait frames, for a side-by-side pair built from portrait sources (a half-width pane needs height to show a room). Independent of --split so either can be used without the other. */ .compare--portrait .media__frame { aspect-ratio: 3 / 4; } @media (min-width: 48rem) { .compare--portrait .media__frame { aspect-ratio: 4 / 5; } } /* Scroll-snap gallery. Bleeds only to the page gutter — no vw maths. */ .gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--page-margin) * -1); padding-inline: var(--page-margin); /* Without this, mandatory snap aligns the first tile to the scrollport edge and the browser scrolls straight past padding-inline-start — the strip starts flush to the screen edge instead of on the page gutter. */ scroll-padding-inline: var(--page-margin); padding-bottom: var(--s-xs); scrollbar-width: none; } .gallery::-webkit-scrollbar { display: none; } .gallery > * { scroll-snap-align: start; } @media (min-width: 48rem) { .gallery { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--s-md); overflow-x: visible; margin-inline: 0; padding-inline: 0; } } /* Style-tile row — the "pick a direction" strip. Same gallery mechanics, square tiles, smaller columns, a label under each. Radius.tile = 14. */ .gallery--tiles { grid-auto-columns: 42%; } @media (min-width: 48rem) { .gallery--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .gallery--tiles .media__frame { aspect-ratio: 1 / 1; border-radius: var(--radius-tile); } .tile-caption { display: block; margin: var(--s-xs) 0 0; font-size: 0.8125rem; /* Type.tileLabel = 13 */ font-weight: 500; color: var(--ink); } /* --------------------------------------------------------------------------- 7. Feature grid and steps ------------------------------------------------------------------------ */ .grid { display: grid; grid-template-columns: 1fr; gap: var(--s-sm); margin: 0; padding: 0; list-style: none; } .grid > li { margin: 0; } @media (min-width: 34rem) { .grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-md); } } .grid .card { margin: 0; height: 100%; } /* Numbered steps. The counter is drawn, not typed, so the markup stays an ordered list and screen readers still hear "1 of 3". */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--s-md); } @media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-lg); } } .steps > li { counter-increment: step; margin: 0; padding-left: 44px; position: relative; } @media (min-width: 48rem) { .steps > li { padding-left: 0; padding-top: 44px; } } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 0.9375rem; font-weight: 600; } /* --------------------------------------------------------------------------- 8. FAQ ------------------------------------------------------------------------ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: var(--s-md) 36px var(--s-md) 0; font-weight: 600; position: relative; min-height: var(--tap-target); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone); transform: rotate(45deg); transition: transform 160ms ease; } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq details > :not(summary) { margin-bottom: var(--s-md); color: var(--stone); } /* --------------------------------------------------------------------------- 9. Buttons and the App Store CTA ------------------------------------------------------------------------ */ .landing .btn { min-height: var(--button-height); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs); padding: 14px 26px; line-height: 1.2; text-align: center; transition: opacity 140ms ease; } .landing .btn:hover { opacity: 0.88; } .landing .btn:active { opacity: 0.76; } .btn--block { display: flex; width: 100%; } .cta-group { display: flex; flex-direction: column; gap: var(--s-sm); align-items: stretch; margin: 0 0 var(--s-md); } @media (min-width: 34rem) { .cta-group { flex-direction: row; align-items: center; flex-wrap: wrap; } .cta-group .btn { width: auto; } } /* On a phone .cta-group is a COLUMN, so justify-content works on the vertical axis and cannot centre anything horizontally. It looked fine only because a .btn child stretches to the full width and therefore has no left-over space to be off-centre in. The App Store badge is width:auto, so it sat hard left under a centred headline — and because the badge only renders once status.json flips, the defect was invisible until launch day, which is the one day the design promises no redeploy. Centre auto-width children explicitly; stretched buttons are unaffected (an auto cross-axis margin would cancel their stretch, so this must stay scoped, not `> *`). */ .cta-group--center { justify-content: center; } .cta-group--center .appstore-badge { margin-inline: auto; } /* The badge link carries no button chrome: Apple's marketing guidelines forbid putting the badge artwork on its own background or in a container, and .btn's ink fill wrapped a black pill in a second black pill. It still needs a block box so the focus ring traces the artwork instead of an inline box. */ a:has(> .appstore-badge) { display: inline-block; border-radius: 10px; } /* And it must not stretch. As a flex item it would otherwise fill the column, so the focus ring would draw a 350px box around a 144px badge. align-self shrinks it to the artwork; the margin-inline:auto above stays as the fallback for engines without :has(), where the link still stretches and the image centres inside it. */ .cta-group a:has(> .appstore-badge) { align-self: flex-start; } .cta-group--center a:has(> .appstore-badge) { align-self: center; } .cta-note { font-size: 0.8125rem; color: var(--stone); margin: 0; } /* A note belonging to a centred CTA is part of that centred block. Left-ragged small print under a centred headline and a centred badge reads as a mistake. */ .cta-group--center ~ .cta-note { text-align: center; } /* -- The two states. -------------------------------------------------------- carries data-app-state. It ships as "prelaunch" so that a visitor with JavaScript off, or a scraper, sees the honest state. the inline state script in index.html flips it to "live" the moment /status.json says the listing is up — no redeploy of this page, no edit to this stylesheet. Both states are in the DOM at all times. Only one is ever displayed. */ [data-app-state="prelaunch"] .when-live { display: none !important; } [data-app-state="live"] .when-prelaunch { display: none !important; } /* Status pill — "In review with Apple". Never claims availability. */ .status-pill { display: inline-flex; align-items: center; gap: var(--s-xs); padding: 6px 12px 6px 10px; margin: 0 0 var(--s-md); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } /* Apple's badge, when we have one, sits at its licensed proportions. */ .appstore-badge { display: block; height: 48px; width: auto; } /* --------------------------------------------------------------------------- 10. Sticky CTA bar Fixed to the bottom on phones, which is where the thumb is. Hidden while a real CTA is on screen (the inline script sets data-cta-inview) so the two never double up. Without JavaScript it simply stays visible — the fail-safe is "always reachable", not "sometimes missing". ------------------------------------------------------------------------ */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid var(--line); padding: 10px var(--page-margin) calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(0); transition: transform 200ms ease, opacity 200ms ease; } @supports not (backdrop-filter: blur(12px)) { .stickybar { background: var(--paper); } } .stickybar__inner { max-width: var(--measure-wide); margin: 0 auto; display: flex; align-items: center; gap: var(--s-sm); } .stickybar .btn { flex: 1; min-height: 48px; /* Size.buttonHeightCompact */ padding: 12px 20px; font-size: 1rem; } .stickybar__label { display: none; font-size: 0.9375rem; color: var(--stone); } @media (min-width: 34rem) { .stickybar__label { display: block; } .stickybar .btn { flex: none; } .stickybar__inner { justify-content: space-between; } } /* Out of the way while a page CTA is visible. */ [data-cta-inview="true"] .stickybar { transform: translateY(110%); opacity: 0; pointer-events: none; } /* Desktop has the CTA in the header and the hero; the bar is phone furniture. */ @media (min-width: 60rem) { .stickybar { display: none; } } @media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } } /* --------------------------------------------------------------------------- 11. Small print ------------------------------------------------------------------------ */ .disclaimer { font-size: 0.9375rem; color: var(--stone); } .landing footer { margin-top: 0; padding: var(--s-xl) 0 var(--s-xxl); }