/* Photography for the illustrated panels. Unsplash Licence, self-hosted. */ .ph { width: 100%; height: 100%; display: block; } .ph-1 { background-image: url("/img/ph-1.webp"); background-size: cover; background-position: center; } .ph-2 { background-image: url("/img/ph-2.webp"); background-size: cover; background-position: center; } .ph-3 { background-image: url("/img/ph-3.webp"); background-size: cover; background-position: center; } .ph-4 { background-image: url("/img/ph-4.webp"); background-size: cover; background-position: center; } .ph-5 { background-image: url("/img/ph-5.webp"); background-size: cover; background-position: center; } .ph-6 { background-image: url("/img/ph-6.webp"); background-size: cover; background-position: center; } .ph-7 { background-image: url("/img/ph-7.webp"); background-size: cover; background-position: center; } .ph-8 { background-image: url("/img/ph-8.webp"); background-size: cover; background-position: center; } .ph-9 { background-image: url("/img/ph-9.webp"); background-size: cover; background-position: center; } .ph-10 { background-image: url("/img/ph-10.webp"); background-size: cover; background-position: center; } .ph-11 { background-image: url("/img/ph-11.webp"); background-size: cover; background-position: center; } .ph-12 { background-image: url("/img/ph-12.webp"); background-size: cover; background-position: center; } .ph-13 { background-image: url("/img/ph-13.webp"); background-size: cover; background-position: center; } .ph-14 { background-image: url("/img/ph-14.webp"); background-size: cover; background-position: center; } .ph-15 { background-image: url("/img/ph-15.webp"); background-size: cover; background-position: center; } .ph-16 { background-image: url("/img/ph-16.webp"); background-size: cover; background-position: center; } .ph-17 { background-image: url("/img/ph-17.webp"); background-size: cover; background-position: center; } .ph-18 { background-image: url("/img/ph-18.webp"); background-size: cover; background-position: center; } .ph-19 { background-image: url("/img/ph-19.webp"); background-size: cover; background-position: center; } .ph-20 { background-image: url("/img/ph-20.webp"); background-size: cover; background-position: center; } .ph-21 { background-image: url("/img/ph-21.webp"); background-size: cover; background-position: center; } .ph-22 { background-image: url("/img/ph-22.webp"); background-size: cover; background-position: center; } .ph-23 { background-image: url("/img/ph-23.webp"); background-size: cover; background-position: center; } .ph-24 { background-image: url("/img/ph-24.webp"); background-size: cover; background-position: center; } .ph-25 { background-image: url("/img/ph-25.webp"); background-size: cover; background-position: center; } .ph-26 { background-image: url("/img/ph-26.webp"); background-size: cover; background-position: center; } .ph-27 { background-image: url("/img/ph-27.webp"); background-size: cover; background-position: center; } .ph-28 { background-image: url("/img/ph-28.webp"); background-size: cover; background-position: center; } .ph-29 { background-image: url("/img/ph-29.webp"); background-size: cover; background-position: center; } .ph-30 { background-image: url("/img/ph-30.webp"); background-size: cover; background-position: center; } .ph-31 { background-image: url("/img/ph-31.webp"); background-size: cover; background-position: center; } .ph-32 { background-image: url("/img/ph-32.webp"); background-size: cover; background-position: center; } .ph-33 { background-image: url("/img/ph-33.webp"); background-size: cover; background-position: center; } .ph-34 { background-image: url("/img/ph-34.webp"); background-size: cover; background-position: center; } .ph-35 { background-image: url("/img/ph-35.webp"); background-size: cover; background-position: center; } .ph-36 { background-image: url("/img/ph-36.webp"); background-size: cover; background-position: center; } .ph-37 { background-image: url("/img/ph-37.webp"); background-size: cover; background-position: center; } .ph-38 { background-image: url("/img/ph-38.webp"); background-size: cover; background-position: center; } .ph-39 { background-image: url("/img/ph-39.webp"); background-size: cover; background-position: center; } /* Miniature interface crops inside the illustrated panels. */ .mini-sheet { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 660px; } .mini-sheet > span { aspect-ratio: 1; border-radius: 4px; overflow: hidden; } .mini-sheet > span.is-arriving { animation: tile-arrive 620ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes tile-arrive { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } } .upload-bar > span { transition: width 420ms linear; } .uploads-list { overflow: hidden; } /* Storage and the closing call to action are the only two sections that meet with no divider between them, so their padding would otherwise stack. */ .section-tint + .section { padding-top: 34px; } .lane-row .chip, .merged > span { transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .lane-row .chip.tl-off, .merged > span.tl-off { opacity: 0; transform: scale(0.7); } .stamp.tl-off { opacity: 0; transition: opacity 420ms ease; } .phone-sheet span.is-arriving { animation: tile-arrive 620ms cubic-bezier(0.22, 1, 0.36, 1) both; } @media (prefers-reduced-motion: reduce) { .lane-row .chip, .merged > span, .stamp { transition: none; } .lane-row .chip.tl-off, .merged > span.tl-off, .stamp.tl-off { opacity: 1; transform: none; } .phone-sheet span.is-arriving { animation: none; } } .upload.is-leaving { animation: upload-leave 460ms cubic-bezier(0.4, 0, 1, 1) both; } @keyframes upload-leave { from { opacity: 1; transform: none; max-height: 64px; } to { opacity: 0; transform: translateY(-10px); max-height: 0; margin-bottom: 0; } } .upload.is-joining { animation: upload-join 460ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes upload-join { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mini-sheet > span.is-arriving { animation: none; } .upload.is-leaving, .upload.is-joining { animation: none; } .upload-bar > span { transition: none; } } .mini-rule { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; } .mini-rule em { font-style: normal; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-foreground); } .mini-rule i { flex: 1 1 auto; height: 1px; background: var(--border); } .lane { display: grid; gap: 10px; width: 620px; } .lane-row { display: flex; align-items: center; gap: 8px; position: relative; } .lane-row::after { content: ""; position: absolute; left: 118px; right: 0; top: 50%; height: 1px; background: var(--border); } .lane-row .who { width: 110px; flex: none; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-foreground); } .lane-row .chip { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; flex: none; box-shadow: 0 0 0 3px var(--panel-1); } .lane-row .gap { width: 34px; height: 34px; flex: none; visibility: hidden; } .merged { display: flex; gap: 4px; } .merged span { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; } .merged-times { display: flex; gap: 4px; } .merged-times span { width: 40px; flex: none; text-align: center; font-size: 9px; letter-spacing: 0.02em; } .stamp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted-foreground); } .phone { position: relative; z-index: 2; width: 250px; border-radius: 42px; padding: 11px; background: linear-gradient(158deg, #4C4C46 0%, #2B2B29 26%, #1F1F1E 62%, #3B3B37 100%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16), 0 40px 70px -28px rgba(0, 0, 0, 0.80), 0 12px 26px -12px rgba(0, 0, 0, 0.55); } .phone-frame { position: relative; z-index: 2; } .phone-screen { position: relative; border-radius: 32px; overflow: hidden; background: #121211; padding: 30px 9px 8px; } .phone-screen::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; border-radius: 999px; background: #000; z-index: 3; } .phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(147deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%); } .phone-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .phone-sheet span { aspect-ratio: 1; border-radius: 7px; overflow: hidden; } .phone-dock { position: relative; margin-top: 12px; margin-bottom: 14px; height: 42px; border-radius: 13px; background: #CC4470; color: #FFFFFF; display: grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } .phone-dock::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 88px; height: 4px; border-radius: 999px; background: rgba(237, 237, 235, 0.32); } .phone-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -0.025em; color: #EDEDEB; margin: 0 0 3px; } .phone-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: #9A9A98; margin: 0 0 10px; } .demo-strip { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel-2); font-size: 14px; line-height: 1.4; color: var(--muted-foreground); transition: border-color 150ms var(--fx-ease), background-color 150ms var(--fx-ease); } .demo-strip b { color: var(--foreground); font-weight: 600; } .demo-strip:hover { background: var(--panel-3); border-color: color-mix(in oklab, var(--brand) 45%, transparent); } .demo-strip .out { width: 15px; height: 15px; flex: none; } /* The poster is a sheet of paper in every theme, so its ink is fixed. */ .poster { width: min(340px, 100%); padding: 26px 24px 22px; gap: 10px; justify-items: center; text-align: center; box-shadow: var(--panel-ring), 0 24px 48px -30px rgba(0, 0, 0, 0.55); } .poster-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: #0A0A0A; margin: 0; } .poster-line { font-size: 13px; line-height: 1.5; color: #4A4A4A; margin: 0; max-width: 28ch; } .poster-qr { width: min(248px, 100%); aspect-ratio: 1; display: grid; place-items: center; } .poster-qr svg { width: 100%; height: auto; } .poster-qr div { width: 100%; display: contents; } .poster-qr p { font-family: var(--font-sans); font-size: 12px; color: #4A4A4A; margin: 0; } .poster-code { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: #0A0A0A; margin: 0; word-break: break-all; } .poster-foot { font-size: 11px; line-height: 1.4; color: #6B6B6B; margin: 0; }