/* ========================================================================== Proto landing page · Glass & Tonal UI (docs/design-system/HANDOFF.md) One DOM, two dialects: html[data-dialect="ios"] (Liquid Glass, default) and html[data-dialect="android"] (Material 3 Expressive). Theme: html[data-theme] follows the system (set in and app.js). ========================================================================== */ /* ----------------------------------------------------------------- tokens */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); /* springs sampled with the reference solver (§8.1.1); app.js resamples at runtime */ --spring-smooth: linear(0, 0.0174, 0.061, 0.1209, 0.1897, 0.2623, 0.3351, 0.4057, 0.4724, 0.5344, 0.5912, 0.6427, 0.6889, 0.73, 0.7664, 0.7985, 0.8266, 0.8512, 0.8725, 0.8909, 0.9069, 0.9206, 0.9325, 0.9426, 0.9513, 0.9587, 0.965, 0.9704, 0.975, 0.9789, 0.9822, 0.985, 0.9873, 0.9894, 0.991, 0.9925, 0.9937, 0.9947, 0.9955, 0.9963, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994, 1); --dur-smooth: 792ms; --spring-snappy: linear(0, 0.0167, 0.0598, 0.1204, 0.1917, 0.2684, 0.3466, 0.4233, 0.4966, 0.5651, 0.628, 0.6849, 0.7357, 0.7805, 0.8195, 0.8533, 0.8821, 0.9065, 0.927, 0.944, 0.958, 0.9693, 0.9784, 0.9857, 0.9913, 0.9956, 0.9988, 1.0012, 1.0029, 1.0039, 1.0046, 1.0049, 1.005, 1.0049, 1.0047, 1.0044, 1.004, 1.0036, 1.0032, 1.0029, 1.0025, 1.0021, 1.0018, 1.0016, 1.0013, 1.0011, 1.0009, 1.0007, 1.0006, 1.0005, 1); --dur-snappy: 492ms; --spring-bouncy: linear(0, 0.0219, 0.0792, 0.1605, 0.2565, 0.3593, 0.4631, 0.5631, 0.6562, 0.7402, 0.8139, 0.8768, 0.9291, 0.9711, 1.0037, 1.028, 1.045, 1.0558, 1.0616, 1.0633, 1.0619, 1.0584, 1.0532, 1.0472, 1.0407, 1.0341, 1.0277, 1.0218, 1.0165, 1.0118, 1.0079, 1.0045, 1.0019, 0.9998, 0.9982, 0.9972, 0.9965, 0.9961, 0.996, 0.9961, 0.9963, 0.9966, 0.997, 0.9974, 0.9978, 0.9982, 0.9986, 0.9989, 0.9992, 0.9995, 1); --dur-bouncy: 875ms; --m-spatial: linear(0, 0.0156, 0.0563, 0.1146, 0.1842, 0.2601, 0.3384, 0.4163, 0.4915, 0.5625, 0.6282, 0.6881, 0.7418, 0.7895, 0.8311, 0.8671, 0.8977, 0.9236, 0.945, 0.9626, 0.9768, 0.988, 0.9967, 1.0033, 1.0081, 1.0114, 1.0135, 1.0147, 1.0151, 1.015, 1.0145, 1.0137, 1.0126, 1.0115, 1.0103, 1.0091, 1.008, 1.0069, 1.0059, 1.0049, 1.0041, 1.0034, 1.0027, 1.0021, 1.0017, 1.0012, 1.0009, 1.0006, 1.0004, 1.0002, 1); --m-spatial-ms: 475ms; --m-spatial-fast: linear(0, 0.0234, 0.0848, 0.1726, 0.2764, 0.3879, 0.5002, 0.6082, 0.708, 0.797, 0.874, 0.9383, 0.99, 1.0299, 1.059, 1.0785, 1.0898, 1.0945, 1.0938, 1.0891, 1.0815, 1.0721, 1.0617, 1.051, 1.0406, 1.0308, 1.022, 1.0143, 1.0078, 1.0025, 0.9983, 0.9952, 0.9931, 0.9918, 0.9911, 0.991, 0.9914, 0.992, 0.9928, 0.9938, 0.9948, 0.9958, 0.9968, 0.9976, 0.9984, 0.9991, 0.9996, 1, 1.0004, 1.0006, 1); --m-spatial-fast-ms: 400ms; /* iOS · light */ --bg: #ffffff; --bg-grouped: #f2f2f7; --bg-elevated: #ffffff; --bg-2: #f2f2f7; --bg-3: #e8e8ed; --label: #0b0b0d; --label-2: rgba(60, 60, 67, .62); --label-3: rgba(60, 60, 67, .32); --label-4: rgba(60, 60, 67, .18); --sep: rgba(60, 60, 67, .16); --fill: rgba(120, 120, 128, .2); --fill-2: rgba(120, 120, 128, .16); --fill-3: rgba(118, 118, 128, .12); --fill-4: rgba(116, 116, 128, .07); --glass-bg: rgba(252, 252, 253, .66); --glass-bg-strong: rgba(255, 255, 255, .82); --glass-rim: rgba(255, 255, 255, .95); --glass-edge: rgba(0, 0, 0, .07); --glass-shadow: 0 8px 28px rgba(0, 0, 0, .09), 0 1px 4px rgba(0, 0, 0, .06); --glass-highlight: rgba(255, 255, 255, .34); --tray-bg: #ffffff; --tray-group: #f3f3f6; --backdrop-o: .26; --tray-shadow: 0 24px 60px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .06); --group-bg: rgba(255, 255, 255, .74); --tint: #ee4f1c; --tint-soft: rgba(238, 79, 28, .11); --on-tint: #ffffff; --primary-bg: linear-gradient(180deg, #ff6b3e, #f2471c); --primary-fg: #ffffff; --primary-glow: 0 10px 22px -10px rgba(242, 71, 28, .7), inset 0 1px 0 rgba(255, 255, 255, .28); --accent-glyph: #fa4b1f; --switch-on: #13c27f; --red: #ff3b30; --hotspot: #0d99ff; --thumb-edge: rgba(0, 0, 0, .08); --amb-base: #f4f3f1; --amb-mix: #ffffff; --amb-weight: 62%; --bezel: #0b0b0d; --phone-shadow: 0 40px 70px -26px rgba(0, 0, 0, .45), 0 14px 28px -14px rgba(0, 0, 0, .28); color-scheme: light; } :root[data-theme="dark"] { --bg: #000000; --bg-grouped: #000000; --bg-elevated: #1c1c1e; --bg-2: #1c1c1e; --bg-3: #2c2c2e; --label: #ffffff; --label-2: rgba(235, 235, 245, .62); --label-3: rgba(235, 235, 245, .32); --label-4: rgba(235, 235, 245, .16); --sep: rgba(84, 84, 88, .5); --fill: rgba(120, 120, 128, .36); --fill-2: rgba(120, 120, 128, .3); --fill-3: rgba(118, 118, 128, .24); --fill-4: rgba(118, 118, 128, .16); --glass-bg: rgba(40, 40, 44, .62); --glass-bg-strong: rgba(48, 48, 52, .82); --glass-rim: rgba(255, 255, 255, .26); --glass-edge: rgba(255, 255, 255, .06); --glass-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .35); --glass-highlight: rgba(255, 255, 255, .12); --tray-bg: #1c1c1e; --tray-group: #2c2c2e; --backdrop-o: .5; --tray-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .06); --group-bg: rgba(28, 28, 30, .72); --tint: #ff7a4d; --tint-soft: rgba(255, 122, 77, .16); --switch-on: #1fcf8a; --red: #ff453a; --thumb-edge: rgba(255, 255, 255, .1); --amb-base: #070709; --amb-mix: #000000; --amb-weight: 52%; --phone-shadow: 0 40px 70px -26px rgba(0, 0, 0, .85), 0 14px 28px -14px rgba(0, 0, 0, .6); color-scheme: dark; } /* Android · light: the M3 scheme from seed #FA4B1F, plus the iOS names mapped onto it (§2.2.4) */ :root[data-dialect="android"] { --font: "Google Sans Flex", "Google Sans", "Roboto Flex", Roboto, system-ui, sans-serif; --font-mono: "Google Sans Code", "Roboto Mono", ui-monospace, monospace; --m-primary: #b02700; --m-on-primary: #ffffff; --m-primary-container: #db3505; --m-on-primary-container: #fffbff; --m-secondary-container: #ffd3c9; --m-on-secondary-container: #7a5951; --m-error: #ba1a1a; --m-on-error: #ffffff; --m-surface: #fff8f6; --m-surface-container-lowest: #ffffff; --m-surface-container-low: #fef1ee; --m-surface-container: #f8ebe8; --m-surface-container-high: #f3e5e2; --m-surface-container-highest: #ede0dd; --m-on-surface: #201a19; --m-on-surface-variant: #534340; --m-outline: #85736f; --m-outline-variant: #d8c2bd; --m-inverse-surface: #362f2d; --m-inverse-on-surface: #fbeeeb; --m-inverse-primary: #ffb4a2; --m-group: var(--m-surface-container-lowest); --m-sheet: var(--m-surface-container-low); --m-scrim-o: .32; --m-elev-1: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); --m-elev-3: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15); --m-elev-soft: 0 1px 2px rgba(60, 20, 10, .12), 0 6px 18px -4px rgba(60, 20, 10, .16); --bg: var(--m-surface); --bg-elevated: var(--m-group); --bg-2: var(--m-surface-container); --bg-3: var(--m-surface-container-highest); --label: var(--m-on-surface); --label-2: var(--m-on-surface-variant); --label-3: color-mix(in srgb, var(--m-on-surface-variant) 52%, transparent); --label-4: color-mix(in srgb, var(--m-on-surface-variant) 26%, transparent); --sep: var(--m-outline-variant); --fill-3: color-mix(in srgb, var(--m-on-surface) 8%, transparent); --fill-4: color-mix(in srgb, var(--m-on-surface) 5%, transparent); --tint: var(--m-primary); --tint-soft: color-mix(in srgb, var(--m-primary) 12%, transparent); --on-tint: var(--m-on-primary); --red: var(--m-error); --tray-bg: var(--m-sheet); --tray-group: var(--m-group); --backdrop-o: var(--m-scrim-o); --group-bg: var(--m-group); --amb-base: var(--m-surface); --amb-mix: #ffffff; --amb-weight: 58%; --bezel: #0e0e10; } :root[data-dialect="android"][data-theme="dark"] { --m-primary: #ffb4a2; --m-on-primary: #621100; --m-primary-container: #ff562d; --m-on-primary-container: #4a0b00; --m-secondary-container: #60423a; --m-on-secondary-container: #d8afa5; --m-error: #ffb4ab; --m-on-error: #690005; --m-surface: #181211; --m-surface-container-lowest: #120d0c; --m-surface-container-low: #201a19; --m-surface-container: #251e1d; --m-surface-container-high: #2f2827; --m-surface-container-highest: #3b3331; --m-on-surface: #ede0dd; --m-on-surface-variant: #d8c2bd; --m-outline: #a08c88; --m-outline-variant: #534340; --m-inverse-surface: #ede0dd; --m-inverse-on-surface: #362f2d; --m-inverse-primary: #b42800; --m-group: var(--m-surface-container-high); --m-scrim-o: .5; --m-elev-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 22px -4px rgba(0, 0, 0, .5); --amb-mix: #000000; --amb-weight: 48%; } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--safe-top) + 80px); scrollbar-gutter: stable; } html.is-proto { overscroll-behavior: none; } html.locked { overflow: hidden; } body { margin: 0; min-height: 100dvh; background: var(--amb-base); color: var(--label); font: 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overflow-x: clip; } [data-dialect="android"] body { letter-spacing: .1px; font-optical-sizing: auto; } button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: inherit; } button, .topbar, .dock, .deck, .layer, .seg, .switch, .tile, .chip, .phone { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } h1, h2, h3, p { margin: 0; } code { font-family: var(--font-mono); font-size: .92em; } :focus-visible { outline: 2px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; } .only-android { display: none !important; } [data-dialect="android"] .only-android { display: block !important; } [data-dialect="android"] .only-ios { display: none !important; } .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } /* icons: iOS SVG (24 grid, 1.9 stroke) or Material Symbols Rounded */ i[data-ic] { display: inline-grid; place-items: center; flex: none; width: var(--s, 20px); height: var(--s, 20px); font-style: normal; line-height: 1; } i[data-ic] svg { width: 100%; height: 100%; display: block; overflow: visible; } .msr { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: var(--s, 20px); line-height: 1; font-variation-settings: "FILL" var(--f, 0), "wght" var(--w, 400), "GRAD" 0, "opsz" 24; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; transition: font-variation-settings .2s ease; } .accent-glyph { color: var(--accent-glyph); } /* ---------------------------------------------------------- ambient light */ .amb-wrap { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .amb { position: absolute; inset: -12%; transition: opacity .8s ease; background: radial-gradient(55% 40% at 14% 12%, color-mix(in srgb, var(--a1) var(--amb-weight), var(--amb-mix)), transparent 72%), radial-gradient(50% 38% at 90% 30%, color-mix(in srgb, var(--a2) var(--amb-weight), var(--amb-mix)), transparent 72%), radial-gradient(70% 48% at 46% 72%, color-mix(in srgb, var(--a3) var(--amb-weight), var(--amb-mix)), transparent 74%), var(--amb-base); --a1: #9fb2f7; --a2: #8fe3c4; --a3: #f5a58c; } .amb.off { opacity: 0; } .vignette { position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light; background: radial-gradient(130% 90% at 50% 20%, transparent 40%, rgba(0, 0, 0, .14)); } [data-theme="dark"] .vignette { opacity: .9; } [data-dialect="android"] .vignette { display: none; } [data-dialect="android"] .amb { animation: drift 28s ease-in-out infinite alternate; } @keyframes drift { to { transform: translate3d(2%, -2%, 0) scale(1.04); } } /* ------------------------------------------------------------------ glass */ .glass { position: relative; isolation: isolate; background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(190%); backdrop-filter: blur(20px) saturate(190%); box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge); } .glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(165deg, var(--glass-rim) 0%, transparent 34%, transparent 66%, color-mix(in srgb, var(--glass-rim) 55%, transparent) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .glass::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(140% 90% at var(--gx, 50%) var(--gy, -30%), var(--glass-highlight), transparent 62%); opacity: .9; transition: opacity .3s; } .glass.strong { background: var(--glass-bg-strong); } .glass.on-dark { --glass-bg: rgba(40, 40, 44, .5); --glass-rim: rgba(255, 255, 255, .3); --glass-edge: rgba(255, 255, 255, .08); --glass-highlight: rgba(255, 255, 255, .14); color: #fff; } /* Android has no glass: tonal containers, soft shadow only where something floats */ [data-dialect="android"] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--m-surface-container); box-shadow: var(--m-elev-soft); } [data-dialect="android"] .glass::before, [data-dialect="android"] .glass::after { display: none; } /* press feedback: fills shrink, glass grows and lights up (iOS); Android ripples */ .press { transition: transform var(--dur-bouncy) var(--spring-bouncy), opacity .2s, border-radius var(--m-spatial-fast-ms) var(--m-spatial-fast); touch-action: manipulation; } .press.is-pressed { transform: scale(var(--press-scale, .96)); } .glass.press { --press-scale: 1.07; } .glass.press.is-pressed::after { opacity: 1; } .press-soft { transition: transform var(--dur-bouncy) var(--spring-bouncy); } .press-soft.is-pressed { transform: scale(.97); } .dim-press { transition: opacity .25s; } .dim-press.is-pressed { opacity: .55; transition: none; } [data-dialect="android"] .press.is-pressed { transform: none; } .ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .12; transform: scale(.15); transition: transform .45s cubic-bezier(.2, 0, 0, 1), opacity .28s linear; } .rip-host { position: relative; overflow: hidden; isolation: isolate; } /* ---------------------------------------------------------------- top bar */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding-top: calc(var(--safe-top) + 10px); pointer-events: none; } .topbar-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 1120px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); } .topbar-row > * { pointer-events: auto; } .edge-blur { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--safe-top) + 72px); opacity: 0; transition: opacity .3s; background: color-mix(in srgb, var(--amb-base) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); } .topbar.scrolled .edge-blur { opacity: 1; } .brand { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px 0 7px; border-radius: 22px; font-size: 17px; font-weight: 650; letter-spacing: -.4px; } .app-icon { display: block; width: 44px; height: 44px; border-radius: 22.5%; flex: none; } .app-icon.sm { width: 30px; height: 30px; } .app-icon.xl { width: 88px; height: 88px; } [data-dialect="android"] .app-icon { border-radius: 50%; } [data-dialect="android"] .topbar { padding-top: var(--safe-top); transition: background-color .25s linear; } [data-dialect="android"] .topbar.scrolled { background: var(--m-surface-container); } [data-dialect="android"] .topbar-row { height: 64px; } [data-dialect="android"] .edge-blur { display: none; } [data-dialect="android"] .brand { background: none; box-shadow: none; padding: 0 12px 0 4px; height: 48px; font-size: 22px; font-weight: 400; letter-spacing: 0; gap: 12px; } /* --------------------------------------------- segmented control (iOS) */ .seg { position: relative; display: flex; height: 34px; padding: 2px; border-radius: 17px; background: var(--fill-3); isolation: isolate; } .seg > button { flex: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13.5px; font-weight: 590; letter-spacing: -.1px; color: var(--label); white-space: nowrap; } .seg > .seg-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: var(--w, 0); border-radius: 15px; transform: translateX(var(--x, 2px)); background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); transition: transform var(--dur-snappy) var(--spring-snappy), width var(--dur-snappy) var(--spring-snappy); } [data-theme="dark"] .seg > .seg-thumb { background: #636366; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); } /* the glass text segment with a sliding pill (header) */ .seg.glass { height: 44px; padding: 4px; border-radius: 22px; background: var(--glass-bg); } .seg.glass > button { min-height: 36px; border-radius: 18px; padding: 0 15px; font-size: 14.5px; font-weight: 620; letter-spacing: -.2px; color: var(--label-2); transition: color .25s; } .seg.glass > button[aria-checked="true"] { color: var(--label); } .seg.glass > .seg-thumb { top: 4px; bottom: 4px; border-radius: 18px; background: var(--bg-elevated); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); } [data-theme="dark"] .seg.glass > .seg-thumb { background: rgba(255, 255, 255, .17); box-shadow: none; } /* Android: connected button group (§4.5) */ [data-dialect="android"] .seg { --ro: 20px; --ri: 8px; --rp: 4px; height: auto; padding: 0; gap: 2px; background: none; border-radius: 0; box-shadow: none; } [data-dialect="android"] .seg > .seg-thumb { display: none; } [data-dialect="android"] .seg > button { --rl: var(--ri); --rr: var(--ri); height: 40px; padding: 0 14px; border-radius: var(--rl) var(--rr) var(--rr) var(--rl); background: var(--m-surface-container-highest); color: var(--m-on-surface-variant); font-size: 14px; font-weight: 500; letter-spacing: .1px; transition: border-radius var(--m-spatial-fast-ms) var(--m-spatial-fast), background-color .2s, color .2s; } [data-dialect="android"] .seg > button:first-of-type { --rl: var(--ro); } [data-dialect="android"] .seg > button:last-of-type { --rr: var(--ro); } [data-dialect="android"] .seg > button.is-pressed:not(:first-of-type) { --rl: var(--rp); } [data-dialect="android"] .seg > button.is-pressed:not(:last-of-type) { --rr: var(--rp); } [data-dialect="android"] .seg > button[aria-checked="true"] { --rl: var(--ro); --rr: var(--ro); background: var(--m-primary); color: var(--m-on-primary); } [data-dialect="android"] .dialect-seg > button[aria-checked="true"] { background: var(--m-secondary-container); color: var(--m-on-secondary-container); } /* ------------------------------------------------------------------- hero */ .hero { display: grid; gap: 40px; align-items: center; padding-top: calc(var(--safe-top) + 92px); padding-bottom: 24px; } .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; letter-spacing: -.05px; color: var(--label-2); margin-bottom: 14px; --s: 15px; } .hero-title { font-size: clamp(38px, 9.4vw, 66px); line-height: 1.04; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; max-width: 13ch; } .hero-sub { margin-top: 18px; font-size: clamp(17px, 2.2vw, 19px); line-height: 1.45; letter-spacing: -.3px; color: var(--label-2); max-width: 38em; text-wrap: pretty; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 28px; } .hero-note { margin-top: 18px; font-size: 13px; color: var(--label-3); letter-spacing: -.05px; } [data-theme="dark"] .hero-note { color: var(--label-2); } .hero-stage { position: relative; display: grid; justify-items: center; gap: 18px; } .hero-phone { --pw: clamp(232px, 64vw, 312px); } .hero-hint { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px 0 11px; border-radius: 16px; font-size: 13px; font-weight: 600; letter-spacing: -.1px; color: var(--label-2); --s: 14px; } @media (min-width: 640px) { .hero { grid-template-columns: 1.15fr .85fr; min-height: min(100dvh, 920px); padding-top: calc(var(--safe-top) + 100px); } } [data-dialect="android"] .eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .1px; color: var(--m-primary); --s: 18px; } [data-dialect="android"] .eyebrow .accent-glyph { color: inherit; --f: 1; } [data-dialect="android"] .hero-title { font-size: clamp(36px, 8.6vw, 57px); line-height: 1.12; font-weight: 420; letter-spacing: -.25px; font-variation-settings: "ROND" 70; max-width: 14ch; } [data-dialect="android"] .hero-sub { font-size: clamp(16px, 2vw, 18px); letter-spacing: .15px; line-height: 1.5; } [data-dialect="android"] .hero-note { color: var(--m-on-surface-variant); font-size: 12px; letter-spacing: .4px; } [data-dialect="android"] .hero-hint { font-weight: 500; letter-spacing: .1px; background: var(--m-surface-container-high); box-shadow: none; } /* ---------------------------------------------------------------- buttons */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 26px; font-size: 17px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; --s: 19px; } .btn.block { display: flex; width: 100%; } .btn.sm { height: 36px; border-radius: 18px; font-size: 15px; padding: 0 14px; gap: 6px; --s: 16px; } .btn.primary { background: var(--primary-bg); color: var(--primary-fg); box-shadow: var(--primary-glow); } .btn.gray { background: var(--fill-3); color: var(--label); } .btn.red { background: var(--red); color: #fff; } .btn[disabled] { opacity: .35; pointer-events: none; box-shadow: none; } .link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tint); font-size: 16px; font-weight: 600; letter-spacing: -.25px; --s: 15px; } .link i[data-ic="play"] { --s: 13px; } [data-dialect="android"] .btn { height: 56px; padding: 0 24px; border-radius: 28px; font-size: 16px; font-weight: 500; letter-spacing: .15px; box-shadow: none; transition: border-radius var(--m-spatial-fast-ms) var(--m-spatial-fast), background-color .2s; --s: 20px; } [data-dialect="android"] .btn.is-pressed { border-radius: 12px; } [data-dialect="android"] .btn.sm { height: 40px; border-radius: 20px; font-size: 14px; letter-spacing: .1px; padding: 0 16px 0 12px; --s: 18px; } [data-dialect="android"] .btn.sm.is-pressed { border-radius: 8px; } [data-dialect="android"] .btn.primary { background: var(--m-primary); color: var(--m-on-primary); } [data-dialect="android"] .hero .btn.primary { background: var(--m-primary-container); color: var(--m-on-primary-container); } [data-dialect="android"] .btn.gray { background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .btn.red { background: var(--m-error); color: var(--m-on-error); } [data-dialect="android"] .btn[disabled] { opacity: .38; } [data-dialect="android"] .link { min-height: 40px; padding: 0 12px; border-radius: 20px; font-size: 14px; font-weight: 500; letter-spacing: .1px; color: var(--m-primary); --s: 18px; } [data-dialect="android"] .hero .link { margin-left: -12px; } /* ----------------------------------------------------------- phone frames */ .phone { --pw: 280px; --ar: 1320 / 2868; --pr: calc(var(--pw) * .155); --bz: max(3px, calc(var(--pw) * .0125)); position: relative; display: block; width: var(--pw); aspect-ratio: var(--ar); border-radius: var(--pr); background: #000; flex: none; box-shadow: 0 0 0 var(--bz) var(--bezel), 0 0 0 calc(var(--bz) + .6px) rgba(255, 255, 255, .22), var(--phone-shadow); } .phone .screen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: var(--bg-3); } .phone .screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 .5px var(--thumb-edge); } .phone img, .phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .phone.sm { --pw: 118px; --bz: 3px; box-shadow: 0 0 0 3px var(--bezel), 0 0 0 3.5px rgba(255, 255, 255, .2), 0 18px 32px -14px rgba(0, 0, 0, .45); } [data-dialect="android"] .phone { --ar: 1344 / 2992; --pr: calc(var(--pw) * .1); --bz: max(2.5px, calc(var(--pw) * .0095)); } .swap-stack { position: absolute; inset: 0; } .swap-stack img { will-change: transform, opacity, filter; } /* --------------------------------------------------------------- sections */ .section { padding-top: 72px; padding-bottom: 16px; } .section.narrow { max-width: 760px; } .section-title { font-size: clamp(30px, 5vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; } .section-sub { margin-top: 8px; font-size: 17px; line-height: 1.45; letter-spacing: -.3px; color: var(--label-2); max-width: 40em; text-wrap: pretty; } [data-dialect="android"] .section-title { font-size: clamp(30px, 5vw, 36px); line-height: 1.22; font-weight: 400; letter-spacing: -.25px; font-variation-settings: "ROND" 70; } [data-dialect="android"] .section-sub { font-size: 16px; letter-spacing: .1px; line-height: 1.5; } /* --------------------------------------------------- grouped rows / lists */ .feature-groups { display: grid; gap: 26px; margin-top: 28px; } @media (min-width: 860px) { .feature-groups { grid-template-columns: 1fr 1fr; gap: 28px; } } .group-title { font-size: 13px; font-weight: 600; color: var(--label-2); padding: 0 20px 8px; letter-spacing: -.05px; } .group { position: relative; background: var(--group-bg); border-radius: 26px; overflow: hidden; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .group.inner { background: var(--tray-group); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 24px; } .row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 11px 16px; font-size: 17px; letter-spacing: -.35px; text-align: left; color: var(--label); } .row + .row::before, .faq-item + .faq-item::before { content: ""; position: absolute; top: 0; right: 0; left: var(--sep-inset, 16px); height: .5px; background: var(--sep); } .group:not(.inner) .row:has(.row-ico) { --sep-inset: 54px; } .group.inner .row:has(.row-ico) + .row { --sep-inset: 54px; } .row .row-main { flex: 1; min-width: 0; display: block; } .row .row-label { display: block; } .row .row-sub { display: block; font-size: 13px; line-height: 17px; letter-spacing: -.05px; color: var(--label-2); margin-top: 2px; } .row .row-ico { --s: 22px; width: 24px; color: var(--label); } .row .chev { --s: 14px; color: var(--label-3); } .row.tappable { transition: background-color .2s; } .row.tappable.is-pressed { background: var(--fill-4); transition: none; } @media (hover: hover) { .row.tappable:hover { background: var(--fill-4); } } .row.col { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 14px; } .row .check { --s: 18px; color: var(--tint); opacity: 0; transform: scale(.4); transition: opacity .2s, transform var(--dur-bouncy) var(--spring-bouncy); } .row[aria-checked="true"] .check { opacity: 1; transform: none; } [data-dialect="android"] .group-title { padding: 0 16px 8px; font-size: 14px; font-weight: 500; letter-spacing: .1px; color: var(--m-primary); } [data-dialect="android"] .group { display: flex; flex-direction: column; gap: 2px; background: none; border-radius: 0; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .group > .row, [data-dialect="android"] .group > .faq-item { border-radius: 4px; background: var(--m-group); overflow: hidden; } [data-dialect="android"] .group > :first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; } [data-dialect="android"] .group > :last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } [data-dialect="android"] .row + .row::before, [data-dialect="android"] .faq-item + .faq-item::before { display: none; } [data-dialect="android"] .row { min-height: 56px; padding: 12px 16px; gap: 16px; font-size: 16px; line-height: 24px; letter-spacing: .15px; } [data-dialect="android"] .row .row-sub { font-size: 14px; line-height: 20px; letter-spacing: .2px; color: var(--m-on-surface-variant); margin-top: 0; } [data-dialect="android"] .row .row-ico { --s: 24px; color: var(--m-on-surface-variant); } [data-dialect="android"] .row .chev { --s: 24px; color: var(--m-on-surface-variant); } [data-dialect="android"] .row.tappable.is-pressed { background: var(--m-group); } [data-dialect="android"] .choice .row[aria-checked="true"] { background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .choice .row[aria-checked="true"] .row-sub { color: inherit; } [data-dialect="android"] .row .check { color: inherit; --f: 1; } /* ----------------------------------------------------------- the gallery */ .gallery { padding-bottom: 0; } .deck { --dw: clamp(214px, 60vw, 292px); position: relative; height: calc(var(--dw) * 2.24 + 56px); margin-top: 26px; overflow: hidden; touch-action: pan-y; outline: none; cursor: grab; } .deck:active { cursor: grabbing; } .deck-item { --pw: var(--dw); position: absolute; left: 50%; top: 18px; margin-left: calc(var(--dw) / -2); transform-origin: 50% 50%; will-change: transform, opacity, filter; } .deck-foot { display: grid; justify-items: center; gap: 14px; padding: 4px var(--gutter) 0; text-align: center; } .deck-caption { display: grid; gap: 2px; min-height: 46px; } .deck-caption b { font-size: 17px; font-weight: 650; letter-spacing: -.4px; } .deck-caption span { font-size: 15px; color: var(--label-2); letter-spacing: -.2px; } .dots { display: flex; gap: 6px; padding: 8px 11px; border-radius: 14px; } .dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--label); opacity: .25; transition: width var(--dur-snappy) var(--spring-snappy), opacity .3s; } .dots i.on { width: 18px; opacity: .85; } [data-dialect="android"] .deck-caption b { font-weight: 500; letter-spacing: .1px; font-size: 16px; } [data-dialect="android"] .deck-caption span { font-size: 14px; letter-spacing: .25px; } [data-dialect="android"] .dots { background: color-mix(in srgb, var(--m-surface-container-high) 82%, transparent); box-shadow: none; } [data-dialect="android"] .dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--m-on-surface-variant); opacity: .45; transition: width var(--m-spatial-fast-ms) var(--m-spatial-fast), background-color .2s, opacity .2s; } [data-dialect="android"] .dots i.on { width: 22px; opacity: 1; background: var(--m-primary); } /* ---------------------------------------------------------- HTML section */ .ways { display: grid; gap: 12px; margin-top: 28px; } @media (min-width: 760px) { .ways { grid-template-columns: repeat(3, 1fr); } } .way { padding: 20px 20px 22px; border-radius: 26px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .way-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; background: var(--fill-3); color: var(--label); margin-bottom: 14px; --s: 22px; } .way h3 { font-size: 17px; font-weight: 650; letter-spacing: -.4px; } .way p { margin-top: 4px; font-size: 15px; line-height: 20px; letter-spacing: -.2px; color: var(--label-2); } .code-card { margin-top: 12px; padding: 18px 20px 20px; border-radius: 26px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--label-2); } .code-card pre { margin: 14px 0 0; padding: 16px 18px; border-radius: 18px; background: var(--fill-3); overflow-x: auto; font: 13.5px/1.6 var(--font-mono); color: var(--label); } .code-card pre .c { color: var(--label-3); } [data-theme="dark"] .code-card pre .c { color: var(--label-2); } .code-card pre .s { color: var(--tint); } .code-note { margin-top: 14px; font-size: 15px; line-height: 21px; letter-spacing: -.2px; color: var(--label-2); max-width: 60em; } [data-dialect="android"] .way, [data-dialect="android"] .code-card { border-radius: 28px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .way-ico { width: 48px; height: 48px; border-radius: 16px; background: var(--m-secondary-container); color: var(--m-on-secondary-container); --s: 24px; } [data-dialect="android"] .way h3 { font-size: 16px; font-weight: 500; letter-spacing: .15px; line-height: 24px; } [data-dialect="android"] .way p, [data-dialect="android"] .code-note { font-size: 14px; line-height: 20px; letter-spacing: .25px; } [data-dialect="android"] .code-head { font-size: 14px; font-weight: 500; color: var(--m-primary); letter-spacing: .1px; } [data-dialect="android"] .code-card pre { border-radius: 16px; background: var(--m-surface-container-highest); } /* ------------------------------------------------------------------- FAQ */ .faq { margin-top: 24px; } .faq-item { position: relative; display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows var(--dur-snappy) var(--spring-snappy); } .faq-item.open { grid-template-rows: auto 1fr; } .faq-item .chev { --s: 15px; transition: transform var(--dur-snappy) var(--spring-snappy); } .faq-item.open .chev { transform: rotate(180deg); } .faq-a { overflow: hidden; min-height: 0; } .faq-a p { padding: 0 16px 16px; font-size: 15px; line-height: 21px; letter-spacing: -.2px; color: var(--label-2); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform var(--dur-snappy) var(--spring-snappy); } .faq-item.open .faq-a p { opacity: 1; transform: none; } [data-dialect="android"] .faq-a p { font-size: 14px; line-height: 20px; letter-spacing: .25px; } [data-dialect="android"] .faq-item.open { border-radius: 20px !important; } /* ---------------------------------------------------------------- footer */ .footer { display: flex; align-items: center; gap: 14px; padding-top: 72px; padding-bottom: calc(var(--safe-bottom) + 150px); } .footer div { display: grid; gap: 2px; } .footer b { font-size: 17px; font-weight: 650; letter-spacing: -.4px; } .footer span { font-size: 13px; color: var(--label-2); } [data-dialect="android"] .footer b { font-weight: 500; letter-spacing: 0; font-size: 16px; } /* ---------------------------------------------- bottom dock (mini player) */ .bottom-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 150px; z-index: 19; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(transparent, color-mix(in srgb, var(--amb-base) 80%, transparent) 72%); } .bottom-fade.on { opacity: 1; } .dock { position: fixed; z-index: 20; left: 0; right: 0; bottom: max(16px, calc(var(--safe-bottom) + 4px)); padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); display: flex; justify-content: center; pointer-events: none; transition: transform var(--dur-bouncy) var(--spring-bouncy), opacity .22s ease; } .dock.away { transform: translateY(26px) scale(.94); opacity: 0; } .dock.away .mini { pointer-events: none; } .mini { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 11px; width: 100%; max-width: 520px; height: 70px; padding: 0 10px 0 11px; border-radius: 35px; cursor: pointer; text-align: left; } .mini.press { --press-scale: 1.02; } .mini .grabber { position: absolute; top: 5px; left: 50%; width: 30px; height: 4px; margin-left: -15px; border-radius: 2px; background: var(--label-4); } .mini-art { width: 48px; height: 48px; border-radius: 14px; flex: none; } .mini-main { flex: 1; min-width: 0; display: grid; gap: 4px; } .mini-title { font-size: 16px; line-height: 20px; font-weight: 650; letter-spacing: -.35px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-meta { display: flex; gap: 10px; font-size: 12.5px; font-weight: 580; letter-spacing: -.1px; color: var(--label-2); white-space: nowrap; overflow: hidden; } .mini-meta > span { display: inline-flex; align-items: center; gap: 4px; --s: 13px; } .mini-meta i { color: var(--label-3); } .mini-expand { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: var(--fill-3); color: var(--label); flex: none; --s: 16px; } .play-btn { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 24px; flex: none; background: var(--primary-bg); color: #fff; box-shadow: 0 8px 18px -8px rgba(242, 71, 28, .6), inset 0 1px 0 rgba(255, 255, 255, .28); --s: 21px; } .play-btn .cookie { display: none; } [data-dialect="android"] .bottom-fade { height: 120px; background: linear-gradient(transparent, color-mix(in srgb, var(--m-surface) 88%, transparent) 70%); } [data-dialect="android"] .mini { height: 72px; gap: 12px; padding: 0 8px 0 12px; border-radius: 28px; background: var(--m-surface-container-high); box-shadow: var(--m-elev-soft); } [data-dialect="android"] .mini.is-pressed { border-radius: 16px; } [data-dialect="android"] .mini .grabber { top: 6px; width: 32px; margin-left: -16px; background: color-mix(in srgb, var(--m-on-surface-variant) 40%, transparent); } [data-dialect="android"] .mini-art { border-radius: 12px; } [data-dialect="android"] .mini-title { font-weight: 500; letter-spacing: .1px; line-height: 22px; } [data-dialect="android"] .mini-meta { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3px; color: var(--m-on-surface-variant); } [data-dialect="android"] .mini-meta > span { --s: 16px; } [data-dialect="android"] .mini-meta i { color: inherit; } [data-dialect="android"] .mini-expand { background: none; width: 40px; height: 40px; --s: 24px; color: var(--m-on-surface-variant); } [data-dialect="android"] .play-btn { width: 56px; height: 56px; background: none; box-shadow: none; color: var(--m-on-primary-container); --s: 28px; } [data-dialect="android"] .play-btn .cookie { display: block; position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--m-primary-container); overflow: visible; } [data-dialect="android"] .play-btn i { position: relative; --f: 1; } /* -------------------------------------------------------- trays & sheets */ .layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; } .layer > * { pointer-events: auto; } .tray-backdrop { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .32s ease; } .tray-backdrop.inert-fade { transition: opacity .32s ease; } .tray { position: absolute; overflow: hidden; background: var(--tray-bg); color: var(--label); box-shadow: var(--tray-shadow); touch-action: none; outline: none; will-change: left, top, width, height; } .tray-inner { position: absolute; top: 0; left: 50%; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; } .tray-inner::-webkit-scrollbar { display: none; } .tray-pad { padding: 22px 22px 24px; } .tray-snap { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; overflow: hidden; } .tray-snap > * { margin: 0 !important; visibility: visible !important; } .tray-stage { position: absolute; inset: 0; } .m-handle { height: 36px; display: grid; place-items: center; } .m-handle::before { content: ""; width: 32px; height: 4px; border-radius: 2px; background: var(--m-on-surface-variant); opacity: .4; } [data-dialect="android"] .tray { box-shadow: var(--m-elev-1); color: var(--m-on-surface); } [data-dialect="android"] .tray-pad { padding: 0 24px calc(var(--safe-bottom) + 24px); } .sheet-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .sheet-titles { flex: 1; min-width: 0; padding-top: 4px; } .sheet-eyebrow { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 650; color: var(--label-2); letter-spacing: -.05px; margin-bottom: 4px; --s: 13px; } .sheet-title { font-size: 26px; line-height: 31px; font-weight: 700; letter-spacing: -.6px; text-wrap: balance; } .sheet-title.sm { font-size: 19px; line-height: 23px; font-weight: 650; letter-spacing: -.45px; } .sheet-sub { font-size: 15px; line-height: 20px; color: var(--label-2); margin-top: 6px; letter-spacing: -.2px; text-wrap: pretty; } .sheet-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: var(--fill-3); color: var(--label-2); flex: none; --s: 15px; } .sheet-foot { margin: 14px 4px 0; font-size: 13px; line-height: 18px; color: var(--label-2); } .sheet-foot.center { text-align: center; } .tray .link { width: 100%; justify-content: center; margin-top: 6px; } [data-dialect="android"] .sheet-close { display: none; } [data-dialect="android"] .sheet-head { margin-bottom: 20px; } [data-dialect="android"] .sheet-titles { padding-top: 0; } [data-dialect="android"] .sheet-eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .1px; color: var(--m-primary); gap: 6px; --s: 18px; } [data-dialect="android"] .sheet-eyebrow i { --f: 1; } [data-dialect="android"] .sheet-title { font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: 0; font-variation-settings: "ROND" 40; } [data-dialect="android"] .sheet-title.sm { font-size: 18px; line-height: 24px; font-variation-settings: normal; } [data-dialect="android"] .sheet-sub { font-size: 14px; line-height: 20px; letter-spacing: .25px; color: var(--m-on-surface-variant); } [data-dialect="android"] .sheet-foot { font-size: 12px; line-height: 16px; letter-spacing: .3px; } /* get tray */ .get-hero { display: flex; align-items: center; gap: 18px; margin: 4px 0 20px; } .get-facts { display: flex; flex-wrap: wrap; gap: 8px; } .get-note { padding: 14px 16px; border-radius: 20px; background: var(--tray-group); font-size: 15px; line-height: 20px; color: var(--label-2); margin-bottom: 12px; } .get-note b { color: var(--label); font-weight: 600; } [data-dialect="android"] .get-note { background: var(--m-surface-container-highest); font-size: 14px; letter-spacing: .25px; border-radius: 16px; } /* chips */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--fill-3); color: var(--label); font-size: 13px; font-weight: 590; letter-spacing: -.1px; white-space: nowrap; --s: 14px; } .chip i { color: var(--label-2); } .chip.off { color: var(--label-2); text-decoration: line-through; text-decoration-color: var(--label-3); } .src-group + .src-group { margin-top: 18px; } .src-label { font-size: 13px; font-weight: 600; color: var(--label-2); margin: 0 4px 10px; } [data-dialect="android"] .chip { height: 32px; border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--m-outline-variant); font-size: 14px; font-weight: 500; letter-spacing: .1px; padding: 0 16px; --s: 18px; } [data-dialect="android"] .chip i { color: var(--m-primary); } [data-dialect="android"] .src-label { font-size: 14px; font-weight: 500; color: var(--m-primary); letter-spacing: .1px; } /* shot + ticks */ .shot-row { display: flex; align-items: center; gap: 22px; padding: 6px 2px 4px; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 20px; letter-spacing: -.2px; --s: 17px; } .ticks i { color: var(--switch-on); margin-top: 1px; } [data-dialect="android"] .ticks li { font-size: 14px; letter-spacing: .25px; } [data-dialect="android"] .ticks i { color: var(--m-primary); } /* field (Quick View demo) */ .field { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 7px 0 16px; border-radius: 18px; background: var(--fill-3); color: var(--label-2); --s: 18px; } .field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 17px var(--font); letter-spacing: -.3px; color: var(--label); } .field input::placeholder { color: var(--label-3); } .field:focus-within { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tint) 55%, transparent); } .field.shake { animation: shake .38s ease-out; } @keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } .field .field-lead { transition: transform var(--dur-bouncy) var(--spring-bouncy), color .2s; } .field.ok .field-lead { color: var(--switch-on); } .paste-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 19px; flex: none; background: var(--label); color: var(--bg); font-size: 15px; font-weight: 650; letter-spacing: -.2px; --s: 16px; } .field-msg { display: flex; align-items: center; gap: 6px; min-height: 18px; margin: 10px 6px 16px; font-size: 13px; color: var(--label-2); --s: 14px; } .field-msg.ok { color: var(--switch-on); font-weight: 600; } [data-dialect="android"] .field { height: 56px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px var(--m-outline); padding: 0 4px 0 14px; --s: 24px; } [data-dialect="android"] .field:focus-within { box-shadow: inset 0 0 0 2px var(--m-primary); } [data-dialect="android"] .field input { font-size: 16px; letter-spacing: .5px; } [data-dialect="android"] .paste-pill { height: 40px; border-radius: 20px; padding: 0 16px 0 12px; background: var(--m-secondary-container); color: var(--m-on-secondary-container); font-size: 14px; font-weight: 500; letter-spacing: .1px; --s: 18px; } [data-dialect="android"] .field.ok .field-lead, [data-dialect="android"] .field-msg.ok { color: var(--m-primary); } [data-dialect="android"] .field-msg { font-size: 12px; letter-spacing: .4px; margin: 6px 16px 16px; } /* switch: iOS 63 × 28 green / M3 52 × 32 with a check */ .switch { position: relative; width: 63px; height: 28px; border-radius: 14px; flex: none; background: var(--fill); transition: background-color .25s ease; } .switch[aria-checked="true"] { background: var(--switch-on); } .switch i { position: absolute; top: 2px; left: 2px; width: 37px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .06); transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color .2s, scale .25s; } .switch[aria-checked="true"] i { transform: translateX(22px); } .switch.is-pressed i { scale: 1.18 1.12; background: rgba(255, 255, 255, .72); box-shadow: 0 0 0 .5px rgba(255, 255, 255, .9) inset, 0 4px 12px rgba(0, 0, 0, .18); } [data-dialect="android"] .switch { width: 52px; height: 32px; border-radius: 16px; background: var(--m-surface-container-highest); box-shadow: inset 0 0 0 2px var(--m-outline); } [data-dialect="android"] .switch[aria-checked="true"] { background: var(--m-primary); box-shadow: none; } [data-dialect="android"] .switch i { top: 8px; left: 8px; width: 16px; height: 16px; border-radius: 8px; background: var(--m-outline); box-shadow: none; scale: 1; transition: transform var(--m-spatial-fast-ms) var(--m-spatial-fast), width var(--m-spatial-fast-ms) var(--m-spatial-fast), height var(--m-spatial-fast-ms) var(--m-spatial-fast), top var(--m-spatial-fast-ms) var(--m-spatial-fast), left var(--m-spatial-fast-ms) var(--m-spatial-fast), background-color .2s; } [data-dialect="android"] .switch[aria-checked="true"] i { top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 12px; background: var(--m-on-primary); transform: translateX(20px); } [data-dialect="android"] .switch.is-pressed i { top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 14px; scale: 1; background: var(--m-on-surface-variant); } [data-dialect="android"] .switch[aria-checked="true"].is-pressed i { transform: translateX(20px); background: var(--m-primary-container); } /* full-screen demo: a tiny phone that reacts to the controls */ .fs-demo { container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .fs-controls { flex: 1 1 260px; min-width: 0; } .mini-phone { position: relative; width: 112px; aspect-ratio: .46; border-radius: 18px; overflow: hidden; flex: none; align-self: center; background: linear-gradient(180deg, #e9a27d 0 34%, #fbf6ef 34%); box-shadow: 0 0 0 3px var(--bezel), 0 18px 32px -14px rgba(0, 0, 0, .45); cursor: pointer; } .mini-phone .mp-bar { position: absolute; top: 7px; left: 12px; right: 10px; display: flex; justify-content: space-between; align-items: center; font: 600 9px/1 var(--font); color: #111; transition: color .25s, opacity .25s; } .mini-phone .mp-bar::after { content: ""; position: absolute; left: 50%; top: -2px; width: 30px; height: 9px; margin-left: -15px; border-radius: 5px; background: #000; } .mini-phone .mp-sig { width: 22px; height: 6px; border-radius: 2px; background: currentColor; opacity: .85; } .mini-phone[data-bar="light"] .mp-bar { color: #fff; } .mini-phone[data-bar="hidden"] .mp-bar { opacity: 0; } .mini-phone .mp-card { position: absolute; left: 10px; right: 10px; top: 38px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .55); } .mini-phone .mp-line { position: absolute; left: 10px; width: 70%; height: 6px; border-radius: 3px; background: #2b2b2b; top: 92px; opacity: .8; } .mini-phone .mp-line.short { top: 104px; width: 46%; opacity: .35; } .mini-phone .mp-tiles { position: absolute; left: 10px; right: 10px; top: 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mini-phone .mp-tiles span { height: 52px; border-radius: 8px; background: #e7ded1; position: relative; } .mini-phone .mp-btn { position: absolute; left: 10px; right: 10px; bottom: 14px; height: 18px; border-radius: 9px; background: #2f5a43; } .mini-phone .flash { position: absolute; border-radius: 9px; background: color-mix(in srgb, var(--hotspot) 28%, transparent); box-shadow: inset 0 0 0 1.5px var(--hotspot); animation: flash .75s ease-out both; pointer-events: none; } @keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* session menu demo */ .session-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .session-thumb { position: relative; width: 36px; height: 72px; border-radius: 8px; overflow: hidden; flex: none; background: var(--bg-3); } .session-thumb img { position: absolute; max-width: none; width: 131.9px; left: -7px; top: -54.2px; } [data-dialect="android"] .session-thumb img { width: 117.2px; left: -3.5px; top: -31.3px; } .session-head .sheet-titles { padding-top: 0; } .session-head .sheet-sub { margin-top: 2px; font-size: 13px; } .session-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; } @container (max-width: 340px) { .session-tiles { grid-template-columns: 1fr 1fr; } } .tray-pad { container-type: inline-size; } .tile { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 84px; padding: 10px 4px; border-radius: 20px; background: var(--tray-group); text-align: center; --s: 22px; transition: background-color .2s, color .2s, transform var(--dur-bouncy) var(--spring-bouncy); } .tile i { margin-bottom: 3px; } .tile b { font-size: 12px; font-weight: 600; letter-spacing: -.05px; } .tile span { font-size: 11px; font-weight: 500; color: var(--label-2); } .tile.on { background: var(--tint-soft); color: var(--tint); } .tile.on span { color: inherit; } [data-dialect="android"] .tile { border-radius: 16px; background: var(--m-surface-container-highest); } [data-dialect="android"] .tile.on { background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .tile.on i { --f: 1; } [data-dialect="android"] .tile b { font-weight: 500; letter-spacing: .3px; } [data-dialect="android"] .tile span { font-weight: 400; letter-spacing: .3px; } /* ----------------------------------------------------- full-screen viewer */ .viewer-dim { position: absolute; inset: 0; background: #000; opacity: 0; } .viewer-media { position: absolute; overflow: hidden; background: #000; will-change: left, top, width, height; } .viewer-media img, .viewer-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .viewer-bar { position: absolute; top: calc(var(--safe-top) + 12px); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 10px; opacity: 0; } .circle-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; --s: 18px; } [data-dialect="android"] .circle-btn { background: rgba(32, 26, 25, .72); color: #fff; box-shadow: none; --s: 24px; } /* -------------------------------------------------- toasts and snackbars */ .toast-host { position: fixed; inset: 0; z-index: 60; pointer-events: none; } .toast { position: absolute; left: 50%; bottom: calc(max(16px, var(--safe-bottom)) + 92px); display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 14px; border-radius: 24px; font-size: 15px; font-weight: 590; letter-spacing: -.25px; white-space: nowrap; transform: translate(-50%, 24px) scale(.92); opacity: 0; --s: 18px; transition: transform var(--dur-bouncy) var(--spring-bouncy), opacity .25s ease; } .toast i { color: var(--switch-on); } .toast.in { transform: translate(-50%, 0); opacity: 1; } .toast.top { bottom: auto; top: calc(var(--safe-top) + 14px); transform: translate(-50%, -24px) scale(.92); } .toast.top.in { transform: translate(-50%, 0); } [data-dialect="android"] .toast { left: 16px; right: 16px; max-width: 560px; margin: 0 auto; height: auto; min-height: 48px; padding: 14px 16px; border-radius: 4px; background: var(--m-inverse-surface); color: var(--m-inverse-on-surface); box-shadow: var(--m-elev-3); font-size: 14px; font-weight: 400; letter-spacing: .25px; transform: translateY(16px) scale(.98); transition: opacity .15s linear, transform var(--m-spatial-ms) var(--m-spatial); } [data-dialect="android"] .toast.in { transform: none; } [data-dialect="android"] .toast i { display: none; } /* ------------------------------------------------------ dialect switching */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (max-width: 399px) { .mini-expand { display: none; } } @media (max-width: 399px) { [data-dialect="android"] .mini-meta > span + span { display: none; } } /* ======================================================= round 2 additions */ /* header: version badge, brand marks on the switcher, theme button */ .topbar-end { display: flex; align-items: center; gap: 8px; } .ver-badge { display: inline-grid; place-items: center; height: 20px; padding: 0 7px; border-radius: 10px; margin-left: -1px; background: var(--primary-bg); color: #fff; font-size: 11.5px; font-weight: 750; letter-spacing: -.1px; font-variant-numeric: tabular-nums; box-shadow: 0 4px 10px -4px rgba(242, 71, 28, .6); } [data-dialect="android"] .ver-badge { background: var(--m-primary-container); color: var(--m-on-primary-container); box-shadow: none; height: 22px; padding: 0 8px; border-radius: 6px; font-weight: 600; font-size: 12px; letter-spacing: .3px; } .dialect-seg > button { gap: 6px; --s: 15px; } .dialect-seg > button i { margin-top: -2px; } .theme-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; flex: none; --s: 19px; } .theme-btn i { transition: transform var(--dur-bouncy) var(--spring-bouncy); } .theme-btn.spin i { transform: rotate(-90deg) scale(.6); } [data-dialect="android"] .theme-btn { width: 48px; height: 48px; border-radius: 24px; background: none; box-shadow: none; --s: 24px; transition: background-color .2s; } [data-dialect="android"] .theme-btn.is-pressed { background: var(--fill-3); } @media (max-width: 460px) { .brand .brand-name { display: none; } .brand { padding: 0 8px 0 7px; gap: 6px; } .seg.glass > button { padding: 0 12px; } } @media (max-width: 360px) { .dialect-seg > button span { display: none; } } html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* stars */ .stars { --size: 18px; position: relative; display: inline-block; width: calc(var(--size) * 5 + 8px); height: var(--size); } .stars svg { position: absolute; inset: 0; width: 100%; height: 100%; } .stars .on { clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0); color: var(--star-on, var(--label)); } .stars .off { color: var(--fill); } .stars.sm { --size: 13px; } [data-dialect="android"] .stars { --star-on: var(--m-primary); } /* the score to beat */ .stores { padding-top: 40px; } .store-card { position: relative; display: grid; justify-items: center; text-align: center; padding: 30px 22px 26px; border-radius: 34px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } [data-dialect="android"] .store-card { border-radius: 32px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } .score { display: grid; justify-items: center; gap: 8px; } .laurel-wrap { display: flex; align-items: center; gap: 2px; } .laurel { display: block; width: clamp(30px, 8vw, 46px); height: clamp(64px, 17vw, 96px); color: var(--label-2); } .laurel svg { width: 100%; height: 100%; display: block; overflow: visible; } .laurel[data-laurel="r"] svg { transform: scaleX(-1); } .laurel-wrap.wilted .laurel { transform-origin: 50% 100%; } .laurel-wrap.wilted .laurel[data-laurel="l"] { transform: rotate(-14deg) translateY(6px); } .laurel-wrap.wilted .laurel[data-laurel="r"] { transform: rotate(14deg) translateY(6px); } .laurel-wrap.wilted .laurel { color: var(--label-3); } .laurel-center { display: grid; justify-items: center; gap: 2px; min-width: 92px; } .score-label { font-size: 12px; font-weight: 650; letter-spacing: .2px; text-transform: uppercase; color: var(--label-2); } .rating-num { font-size: clamp(40px, 11vw, 60px); line-height: 1; font-weight: 750; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .rating-count { font-size: 13px; color: var(--label-2); letter-spacing: -.05px; } .store-title { margin-top: 26px; font-size: clamp(24px, 4.4vw, 30px); line-height: 1.15; font-weight: 700; letter-spacing: -.6px; } [data-dialect="android"] .score-label { font-weight: 500; letter-spacing: .5px; } [data-dialect="android"] .rating-num { font-weight: 450; letter-spacing: -.5px; font-variation-settings: "ROND" 70; } [data-dialect="android"] .store-title { font-weight: 400; letter-spacing: 0; font-variation-settings: "ROND" 50; } /* store badges */ .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 22px; } .badges.sm { justify-content: flex-start; margin-top: 14px; } .store-badge { display: inline-flex; align-items: center; height: 56px; border-radius: 12px; flex: none; overflow: hidden; } .store-badge.appstore { gap: 9px; padding: 0 18px 0 13px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px #a6a6a6; --s: 30px; } .store-badge.appstore i { margin-top: -3px; } .store-badge.appstore span { display: grid; text-align: left; line-height: 1; } .store-badge.appstore small { font-size: 11.5px; font-weight: 500; letter-spacing: .1px; } .store-badge.appstore b { font-size: 25px; font-weight: 600; letter-spacing: -.6px; margin-top: 1px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", var(--font); } .store-badge.play img { display: block; height: 56px; width: auto; } .store-badge-wrap { position: relative; display: inline-grid; justify-items: center; } .store-badge-wrap.soon .store-badge { filter: grayscale(.2); opacity: .55; } .store-badge-wrap .soon-tag { position: absolute; top: -9px; right: -8px; padding: 3px 8px; border-radius: 9px; background: var(--label); color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: .1px; white-space: nowrap; } .badges .first { order: -1; } /* review slider */ .rv-track { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 22px; padding: 6px max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))) 14px; scroll-padding-inline: max(var(--gutter), calc((100vw - 1120px) / 2 + var(--gutter))); outline: none; } .rv-track::-webkit-scrollbar { display: none; } .rv-card { position: relative; flex: none; width: min(330px, 82vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 24px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); text-align: left; color: var(--label); cursor: pointer; } .rv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .rv-title { font-size: 16px; line-height: 21px; font-weight: 650; letter-spacing: -.35px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-date { font-size: 13px; color: var(--label-2); flex: none; } .rv-by { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); } .rv-body { font-size: 15px; line-height: 20px; letter-spacing: -.2px; color: var(--label); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; flex: 1; white-space: pre-line; } .rv-change { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 28px; padding: 5px 11px 5px 9px; border-radius: 14px; background: var(--tint-soft); color: var(--tint); font-size: 12.5px; font-weight: 620; letter-spacing: -.1px; --s: 14px; } .rv-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 6px; } .rv-nav .circle-btn { color: var(--label); } .rv-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--label-2); } .rv-full { font-size: 17px; line-height: 1.45; letter-spacing: -.35px; white-space: pre-line; margin-bottom: 16px; } [data-dialect="android"] .rv-card { border-radius: 24px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .rv-title { font-weight: 500; letter-spacing: .1px; } [data-dialect="android"] .rv-body { font-size: 14px; letter-spacing: .25px; } [data-dialect="android"] .rv-change { border-radius: 8px; background: var(--m-secondary-container); color: var(--m-on-secondary-container); font-weight: 500; letter-spacing: .3px; --s: 16px; } [data-dialect="android"] .rv-change i { --f: 1; } [data-dialect="android"] .rv-nav .circle-btn { background: var(--m-surface-container-high); color: var(--m-on-surface); } [data-dialect="android"] .rv-full { font-size: 16px; letter-spacing: .3px; } /* ------------------------------------------------------------ the skill */ .skill { position: relative; } .skill::before { content: ""; position: absolute; inset: 24px 0 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-glyph) 7%, transparent) 18%, color-mix(in srgb, var(--accent-glyph) 7%, transparent) 82%, transparent); } .section-title.xl { font-size: clamp(34px, 6.6vw, 56px); line-height: 1.05; letter-spacing: -.035em; max-width: 15ch; } [data-dialect="android"] .section-title.xl { font-size: clamp(32px, 6vw, 48px); line-height: 1.15; letter-spacing: -.25px; } .sub-title { margin: 56px 0 18px; font-size: 21px; line-height: 26px; font-weight: 720; letter-spacing: -.5px; } [data-dialect="android"] .sub-title { font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: 0; font-variation-settings: "ROND" 50; } .agent-demo { display: grid; gap: 28px; align-items: center; margin-top: 30px; } @media (min-width: 860px) { .agent-demo { grid-template-columns: 1.3fr .7fr; } } .agent-chat { display: grid; gap: 12px; } .bubble { position: relative; padding: 14px 18px 16px; border-radius: 24px; font-size: 17px; line-height: 1.4; letter-spacing: -.35px; max-width: 34em; } .bubble .who { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; font-weight: 650; letter-spacing: .2px; text-transform: uppercase; color: var(--label-2); --s: 14px; } .bubble.you { justify-self: end; background: var(--primary-bg); color: #fff; border-bottom-right-radius: 8px; box-shadow: var(--primary-glow); } .bubble.you .who { color: rgba(255, 255, 255, .8); } .bubble.agent { justify-self: start; width: 100%; background: var(--group-bg); border-bottom-left-radius: 8px; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .agent-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; font-size: 15px; line-height: 20px; letter-spacing: -.2px; } .agent-steps li { display: flex; gap: 9px; align-items: flex-start; --s: 17px; } .agent-steps li i { color: var(--switch-on); margin-top: 1px; } .agent-steps li.link-step i { color: var(--tint); } .agent-steps code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--fill-3); overflow-wrap: anywhere; } .agent-steps.play li { opacity: 0; transform: translateY(6px); animation: step-in .45s var(--spring-snappy) forwards; animation-delay: calc(var(--i) * 420ms + 200ms); } @keyframes step-in { to { opacity: 1; transform: none; } } .agent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } [data-dialect="android"] .bubble { font-size: 16px; letter-spacing: .15px; } [data-dialect="android"] .bubble.you { background: var(--m-primary-container); color: var(--m-on-primary-container); box-shadow: none; border-radius: 28px 28px 8px 28px; } [data-dialect="android"] .bubble.agent { background: var(--m-surface-container-low); border-radius: 28px 28px 28px 8px; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .bubble .who { font-weight: 500; letter-spacing: .5px; } [data-dialect="android"] .agent-steps { font-size: 14px; letter-spacing: .25px; } [data-dialect="android"] .agent-steps li i { color: var(--m-primary); --f: 1; } /* the phone in the agent demo: Proto's "On your network" sheet */ .agent-phone { display: grid; justify-items: center; } .phone.sm-hero { --pw: clamp(210px, 54vw, 250px); } .wf-app { background: linear-gradient(160deg, color-mix(in srgb, #9fb2f7 50%, var(--amb-base)), color-mix(in srgb, #f5a58c 45%, var(--amb-base))) !important; } .wf-status { position: absolute; top: 4.2%; left: 10%; right: 8%; display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--label); } .wf-status span { width: 34px; height: 10px; border-radius: 3px; background: var(--label); opacity: .8; } [data-dialect="android"] .wf-status { top: 2.8%; left: 7%; font-size: 11px; font-weight: 500; } .nearby-sheet { position: absolute; left: 4%; right: 4%; bottom: 3%; display: grid; gap: 8px; padding: 16px 12px 14px; border-radius: 30px; background: var(--tray-bg); box-shadow: var(--tray-shadow); text-align: left; } .ns-eyebrow { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 650; color: var(--label-2); --s: 11px; } .ns-title { font-size: 17px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 2px; } .ns-row { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 16px; background: var(--tray-group); } .ns-row.dim { opacity: .55; } .ns-thumb { position: relative; width: 30px; height: 54px; border-radius: 7px; flex: none; background: #11151f; box-shadow: 0 0 0 1.5px #0b0b0d; overflow: hidden; } .ns-thumb.alt { background: linear-gradient(#0b1020, #23305c); } .ht-ring { position: absolute; left: 7px; top: 12px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #13c27f; border-right-color: rgba(255,255,255,.15); } .ht-bar { position: absolute; left: 5px; right: 5px; top: 35px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.6); } .ht-bar.s { top: 41px; right: 11px; opacity: .5; } .ns-main { flex: 1; min-width: 0; display: grid; gap: 2px; } .ns-main b { font-size: 12.5px; font-weight: 650; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ns-main > span { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--label-2); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--switch-on); box-shadow: 0 0 0 3px color-mix(in srgb, var(--switch-on) 25%, transparent); animation: live 1.8s ease-in-out infinite; } @keyframes live { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--switch-on) 10%, transparent); } } .ns-play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; background: var(--primary-bg); color: #fff; --s: 12px; flex: none; } .wf-pill { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 14px; white-space: nowrap; font-size: 11px; font-weight: 600; background: rgba(40, 40, 44, .78); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); --s: 12px; animation: pill 3.6s ease-in-out infinite; } @keyframes pill { 0%, 12% { opacity: 0; transform: translate(-50%, -8px) scale(.92); } 22%, 70% { opacity: 1; transform: translate(-50%, 0); } 85%, 100% { opacity: 0; transform: translate(-50%, -8px) scale(.92); } } [data-dialect="android"] .nearby-sheet { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; padding-top: 22px; } [data-dialect="android"] .nearby-sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: var(--m-on-surface-variant); opacity: .4; } [data-dialect="android"] .ns-eyebrow { color: var(--m-primary); font-weight: 500; } [data-dialect="android"] .ns-title { font-weight: 500; letter-spacing: 0; } [data-dialect="android"] .ns-row { border-radius: 12px; background: var(--m-group); } [data-dialect="android"] .ns-play { border-radius: 10px; background: var(--m-primary-container); color: var(--m-on-primary-container); } [data-dialect="android"] .wf-pill { border-radius: 8px; background: var(--m-inverse-surface); color: var(--m-inverse-on-surface); } /* rules with wireframes */ .rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .rule { display: grid; align-content: start; gap: 6px; padding: 16px 18px 20px; border-radius: 26px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .rule h4 { margin: 8px 0 0; font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -.4px; } .rule p { font-size: 15px; line-height: 20px; letter-spacing: -.2px; color: var(--label-2); } .rule-code { justify-self: start; margin-top: 6px; padding: 4px 9px; border-radius: 8px; background: var(--fill-3); font-size: 12.5px; color: var(--label); } [data-dialect="android"] .rule { border-radius: 28px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .rule h4 { font-weight: 500; font-size: 16px; letter-spacing: .15px; } [data-dialect="android"] .rule p { font-size: 14px; letter-spacing: .25px; } [data-dialect="android"] .rule-code { border-radius: 8px; background: var(--m-surface-container-highest); } .wf { --ln: var(--label-3); --fl: var(--fill-3); --hi: var(--tint); display: grid; place-items: center; height: 214px; border-radius: 18px; background: var(--fill-4); overflow: hidden; } [data-dialect="android"] .wf { border-radius: 16px; background: var(--m-surface-container); } .wf-frame { position: relative; width: 100px; height: 196px; border-radius: 22px; border: 2px solid var(--ln); background: var(--bg); overflow: hidden; } [data-dialect="android"] .wf-frame { border-radius: 16px; } .wf-frame > * { position: absolute; } .wf-island { top: 6px; left: 50%; width: 30px; height: 9px; margin-left: -15px; border-radius: 5px; background: var(--ln); } [data-dialect="android"] .wf-island { width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; } .wf-safe { left: 0; right: 0; height: 22px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hi) 22%, transparent) 0 3px, transparent 3px 7px); border-color: var(--hi); border-style: dashed; border-width: 0; } .wf-safe.top { top: 0; border-bottom-width: 1.5px; } .wf-safe.bottom { bottom: 0; height: 16px; border-top-width: 1.5px; } .wf-hdr { top: 28px; left: 8px; right: 8px; height: 12px; border-radius: 4px; background: var(--ln); opacity: .7; } .wf-hdr.fixed { top: 22px; left: 0; right: 0; height: 22px; border-radius: 0; background: var(--fl); opacity: 1; border-bottom: 1.5px solid var(--ln); } .wf-card { top: 48px; left: 8px; right: 8px; height: 46px; border-radius: 9px; background: var(--fl); border: 1.5px solid var(--ln); } .wf-card.big { top: 30px; height: 70px; } .wf-line { top: 104px; left: 8px; width: 70%; height: 6px; border-radius: 3px; background: var(--ln); opacity: .6; } .wf-line.s { top: 116px; width: 46%; opacity: .35; } .wf-tabbar { bottom: 16px; left: 8px; right: 8px; height: 22px; border-radius: 11px; border: 1.5px solid var(--ln); display: flex; align-items: center; justify-content: space-around; } .wf-tabbar i { width: 8px; height: 8px; border-radius: 3px; background: var(--ln); } .wf-home { bottom: 5px; left: 50%; width: 34px; height: 3px; margin-left: -17px; border-radius: 2px; background: var(--ln); } .wf-scroll { top: 50px; left: 8px; right: 8px; bottom: 44px; display: grid; gap: 6px; align-content: start; overflow: hidden; } .wf-item { position: relative; height: 26px; border-radius: 7px; background: var(--fl); border: 1.5px solid var(--ln); animation: wf-scroll 3.2s ease-in-out infinite; } @keyframes wf-scroll { 0%, 15% { transform: translateY(0); } 50%, 65% { transform: translateY(-36px); } 100% { transform: translateY(0); } } .wf-arrow.v { top: 60px; right: 3px; width: 2px; height: 60px; background: linear-gradient(var(--hi), var(--hi)) center / 2px 100% no-repeat; } .wf-arrow.v::before, .wf-arrow.v::after { content: ""; position: absolute; left: -3px; width: 8px; height: 8px; border: solid var(--hi); border-width: 2px 0 0 2px; } .wf-arrow.v::before { top: 0; transform: rotate(45deg); } .wf-arrow.v::after { bottom: 0; transform: rotate(225deg); } .wf-no-side { top: 128px; left: 50%; transform: translateX(-50%); font: 700 15px/1 var(--font); color: var(--red); padding: 1px 6px; border-radius: 6px; background: var(--bg); } .wf-no-side::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: var(--red); transform: rotate(-25deg); } .wf-title-line { top: 32px; left: 10px; width: 50%; height: 9px; border-radius: 4px; background: var(--ln); } .wf-input { left: 10px; right: 10px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ln); display: flex; align-items: center; padding-left: 6px; font: 600 8px/1 var(--font-mono); color: var(--label-2); } .wf-input:nth-of-type(3) { top: 52px; } .wf-input:nth-of-type(4) { top: 78px; } .wf-btn { left: 10px; right: 10px; top: 106px; height: 22px; border-radius: 11px; background: var(--hi); color: #fff; display: grid; place-items: center; font: 650 9px/1 var(--font); } .wf-btn.ghost { top: auto; bottom: 18px; background: var(--fl); color: var(--label); border: 1.5px solid var(--ln); } .wf-note { top: 133px; left: 0; right: 0; text-align: center; font: italic 600 9px/1 var(--font); color: var(--hi); } .wf-cam { left: 10px; right: 10px; top: 150px; height: 32px; border-radius: 7px; border: 1.5px dashed var(--ln); background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ln) 50%, transparent calc(50% + 1px)); } .wf-btn.pressed { top: 122px; height: 26px; border-radius: 13px; animation: wf-press 2.4s ease-in-out infinite; } @keyframes wf-press { 0%, 40%, 100% { transform: scale(1); } 50%, 62% { transform: scale(.94); filter: brightness(.9); } } .wf-measure { position: absolute; right: -2px; top: 0; bottom: 0; transform: translateX(100%); display: flex; align-items: center; padding-left: 4px; font: 700 8px/1 var(--font-mono); color: var(--hi); border-left: 1.5px solid var(--hi); } .wf-frame:has(.wf-measure) { overflow: visible; } .wf-finger { top: 128px; left: 40px; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--label) 18%, transparent); border: 1.5px solid var(--ln); animation: wf-finger 2.4s ease-in-out infinite; } @keyframes wf-finger { 0%, 30% { transform: translate(18px, 24px); opacity: 0; } 45%, 65% { transform: none; opacity: 1; } 80%, 100% { transform: translate(18px, 24px); opacity: 0; } } .wf-frame.lib { background: var(--fill-4); } .wf-mini-grid { top: 30px; left: 8px; right: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .wf-mini { height: 46px; border-radius: 5px; border: 1.5px solid var(--ln); background: var(--bg); position: relative; } .wf-mini span { position: absolute; left: 3px; right: 3px; top: 8px; height: 10px; border-radius: 2px; background: var(--fl); } .wf-mini.on { border-color: var(--hi); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 30%, transparent); } .wf-caption { top: 84px; left: 8px; display: grid; gap: 2px; text-align: left; } .wf-caption b { font: 650 9.5px/1.1 var(--font); color: var(--label); } .wf-caption span { font: 600 7.5px/1 var(--font-mono); color: var(--hi); } .wf-meta-row { top: 112px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; } .wf-tag { padding: 3px 5px; border-radius: 5px; background: var(--fl); font: 600 7px/1 var(--font-mono); color: var(--label-2); } .wf-buzz { top: 104px; left: 50%; width: 40px; height: 40px; margin-left: -20px; } .wf-buzz i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--hi); opacity: 0; animation: buzz 1.8s ease-out infinite; } .wf-buzz i:nth-child(2) { animation-delay: .25s; } .wf-buzz i:nth-child(3) { animation-delay: .5s; } @keyframes buzz { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } } .skill .ways { margin-top: 0; } /* -------------------------------------------------------------- CLI */ .cli { display: grid; gap: 16px; margin-top: 26px; } .cli-seg { justify-self: start; min-width: 280px; } .cli-seg > button { font-family: var(--font-mono); } .cli-body { display: grid; gap: 16px; align-items: start; min-height: 320px; } @media (min-width: 860px) { .cli-body { grid-template-columns: 1.35fr .65fr; } } .term { border-radius: 16px; overflow: hidden; background: #1c1c1e; color: #e6e6eb; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .08) inset; } .term-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #2a2a2d; font: 600 12px/1 var(--font); color: rgba(235, 235, 245, .6); } .term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; flex: none; } .term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; margin-right: 8px; } .term pre { margin: 0; padding: 16px 18px 20px; font: 12.5px/1.65 var(--font-mono); white-space: pre-wrap; word-break: break-word; overflow-x: auto; } .term .ln { display: block; min-height: 1.65em; } .term .ln.anim { opacity: 0; animation: step-in .3s ease-out forwards; animation-delay: calc(var(--i) * 70ms); } .term .ps { color: #ff8a5c; } .term .dim { color: rgba(235, 235, 245, .5); } .term .ok { color: #30d158; } .term .warn { color: #ffd60a; } .term .acc { color: #64d2ff; } .term .b { color: #fff; font-weight: 700; } [data-dialect="android"] .term { border-radius: 20px; } .cli-side { display: grid; gap: 14px; } .cli-side h3 { font-size: 20px; line-height: 25px; font-weight: 680; letter-spacing: -.45px; } .cli-side p { font-size: 15px; line-height: 21px; letter-spacing: -.2px; color: var(--label-2); } .cli-side .ticks { margin-top: 2px; } [data-dialect="android"] .cli-side h3 { font-weight: 500; letter-spacing: 0; font-size: 22px; } [data-dialect="android"] .cli-side p { font-size: 14px; letter-spacing: .25px; } .file-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--group-bg); } .file-chip .file-ico { display: grid; place-items: center; width: 42px; height: 50px; border-radius: 8px; background: var(--primary-bg); color: #fff; font: 800 9px/1 var(--font-mono); letter-spacing: .3px; } .file-chip b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.25px; } .file-chip span { font-size: 13px; color: var(--label-2); } [data-dialect="android"] .file-chip { border-radius: 16px; background: var(--m-surface-container-low); } [data-dialect="android"] .file-chip .file-ico { background: var(--m-primary-container); color: var(--m-on-primary-container); } /* ------------------------------------------------------- try it with this page */ .try-card { padding: 30px 22px 26px; border-radius: 34px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tint) 30%, transparent); } @media (min-width: 700px) { .try-card { padding: 40px 40px 34px; } } [data-dialect="android"] .try-card { border-radius: 32px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .try-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; } .try-step { position: relative; display: flex; gap: 16px; padding-bottom: 26px; } .try-step:last-child { padding-bottom: 0; } .try-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--sep); } .step-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; flex: none; background: var(--primary-bg); color: #fff; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--primary-glow); } [data-dialect="android"] .step-num { border-radius: 12px; background: var(--m-primary-container); color: var(--m-on-primary-container); box-shadow: none; font-weight: 500; } .step-main { flex: 1; min-width: 0; padding-top: 5px; } .step-main h3 { font-size: 19px; line-height: 24px; font-weight: 680; letter-spacing: -.45px; } .step-main > p { margin-top: 4px; font-size: 15px; line-height: 21px; letter-spacing: -.2px; color: var(--label-2); max-width: 36em; } [data-dialect="android"] .step-main h3 { font-size: 18px; font-weight: 500; letter-spacing: 0; } [data-dialect="android"] .step-main > p { font-size: 14px; letter-spacing: .25px; } .try-open { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 14px; } .try-qr { display: none; align-items: center; gap: 18px; margin-top: 14px; } .try-qr p { font-size: 14px; line-height: 19px; color: var(--label-2); max-width: 22em; } .qr-card { position: relative; width: 148px; height: 148px; padding: 12px; border-radius: 24px; background: #fff; flex: none; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35); } .qr { width: 100%; height: 100%; } .qr svg { display: block; width: 100%; height: 100%; } .qr-logo { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 8px; box-shadow: 0 0 0 4px #fff; } [data-dialect="android"] .qr-logo { border-radius: 50%; } .try-in-proto { display: none; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--switch-on); --s: 18px; } #try[data-mode="qr"] .try-qr { display: flex; } #try[data-mode="qr"] .try-open { margin-top: 14px; } #try[data-mode="proto"] .try-open, #try[data-mode="proto"] .try-qr { display: none; } #try[data-mode="proto"] .try-in-proto { display: flex; } @media (max-width: 480px) { .store-card { padding: 30px 12px 22px; } .laurel { width: 22px; height: 58px; } .laurel-center { min-width: 0; } .rating-num { font-size: 38px; } .score-label { font-size: 10.5px; } .rating-count { font-size: 12px; max-width: 120px; } } @media (max-width: 460px) { .topbar-end { gap: 6px; } .seg.glass > button { padding: 0 10px; } .dialect-seg > button { gap: 5px; } .brand { padding: 0 7px; } } .try-local { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--orange, #ff9500) 14%, transparent); font-size: 13px; line-height: 18px; color: var(--label); max-width: 40em; } .stars > span { position: absolute; inset: 0; } /* breathing room between the store card and the reviews */ .stores > .wrap + .wrap { margin-top: 64px; } /* keep the carousel's per-item z-index inside the carousel, under the top bar and the dock */ .deck { isolation: isolate; z-index: 0; } /* ===================================================== feature cards with previews */ .fgroup + .fgroup { margin-top: 0; } .feature-grid { display: grid; gap: 10px; } .fcard { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 152px; padding: 10px 18px 10px 10px; border-radius: 28px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); text-align: left; color: var(--label); transition: transform var(--dur-bouncy) var(--spring-bouncy), box-shadow .3s ease; } @media (hover: hover) { .fcard:hover { box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .28); } } .fwf { --ln: var(--label-3); --fl: var(--fill-3); --hi: var(--tint); position: relative; display: grid; place-items: center; width: 108px; height: 132px; flex: none; border-radius: 20px; background: var(--fill-4); overflow: hidden; } .fwf .wf-frame { transform: scale(.62); transition: transform var(--dur-bouncy) var(--spring-bouncy); } .fcard.live .fwf .wf-frame { transform: scale(.66); } .fcard-main { flex: 1; min-width: 0; display: grid; gap: 4px; } .fcard-title { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 22px; font-weight: 650; letter-spacing: -.4px; --s: 18px; } .fcard-title i { color: var(--label-2); } .fcard-sub { font-size: 14px; line-height: 19px; letter-spacing: -.15px; color: var(--label-2); text-wrap: pretty; } .fcard-more { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 14px; font-weight: 600; letter-spacing: -.15px; color: var(--tint); --s: 12px; } .fcard-more i { transition: transform var(--dur-bouncy) var(--spring-bouncy); } .fcard.live .fcard-more i, .fcard:hover .fcard-more i { transform: translateX(3px); } @media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .feature-groups { grid-template-columns: 1fr; } } @media (min-width: 1040px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } .fcard { flex-direction: column; align-items: stretch; padding: 10px 10px 18px; min-height: 0; } .fwf { width: 100%; height: 168px; } .fwf .wf-frame { transform: scale(.78); } .fcard.live .fwf .wf-frame { transform: scale(.82); } .fcard-main { padding: 0 8px; } } [data-dialect="android"] .fcard { border-radius: 28px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .fwf { border-radius: 20px; background: var(--m-surface-container); } [data-dialect="android"] .fcard-title { font-weight: 500; letter-spacing: .1px; font-size: 16px; } [data-dialect="android"] .fcard-title i { color: var(--m-primary); } [data-dialect="android"] .fcard-sub { font-size: 14px; letter-spacing: .25px; color: var(--m-on-surface-variant); } [data-dialect="android"] .fcard-more { font-weight: 500; letter-spacing: .1px; color: var(--m-primary); } /* the previews: idle state is a still frame, .live plays the loop */ .fx-url { top: 20px; left: 6px; right: 6px; height: 15px; border-radius: 8px; background: var(--fl); border: 1.5px solid var(--ln); } .fx-url i { position: absolute; left: 8px; top: 4px; width: 40px; height: 4px; border-radius: 2px; background: var(--ln); } .fx-toolbar { bottom: 6px; left: 6px; right: 6px; height: 18px; border-radius: 6px; border: 1.5px solid var(--ln); background: var(--fl); display: flex; align-items: center; justify-content: space-around; } .fx-toolbar i { width: 7px; height: 7px; border-radius: 2px; background: var(--ln); } .fx-shift { inset: 0; } .fx-shift > * { position: absolute; } .live .fx-url { animation: fx-up 3s ease-in-out infinite; } .live .fx-toolbar { animation: fx-down 3s ease-in-out infinite; } .live .fx-shift { animation: fx-lift 3s ease-in-out infinite; } @keyframes fx-up { 0%, 18%, 92%, 100% { transform: none; opacity: 1; } 34%, 78% { transform: translateY(-34px); opacity: 0; } } @keyframes fx-down { 0%, 18%, 92%, 100% { transform: none; opacity: 1; } 34%, 78% { transform: translateY(30px); opacity: 0; } } @keyframes fx-lift { 0%, 18%, 92%, 100% { transform: none; } 34%, 78% { transform: translateY(-14px); } } .fx-bolt { top: 36px; left: 50%; width: 18px; height: 26px; margin-left: -9px; background: var(--accent-glyph); clip-path: polygon(62% 0, 8% 56%, 46% 56%, 36% 100%, 92% 42%, 54% 42%); } .fx-field { top: 74px; left: 8px; right: 8px; height: 24px; border-radius: 8px; background: var(--fl); border: 1.5px solid var(--ln); } .fx-typed { position: absolute; left: 6px; top: 8px; width: 46%; height: 5px; border-radius: 3px; background: var(--label-2); } .fx-paste { position: absolute; right: 3px; top: 3px; width: 22px; height: 15px; border-radius: 8px; background: var(--label); } .fx-open { top: 108px; } .live .fx-typed { animation: fx-type 2.8s steps(8) infinite; } .live .fx-paste { animation: fx-tap 2.8s ease-in-out infinite; } .live .fx-open { animation: fx-open 2.8s ease-in-out infinite; } .live .fx-bolt { animation: fx-bob 2.8s ease-in-out infinite; } @keyframes fx-type { 0%, 20% { width: 0; } 45%, 100% { width: 46%; } } @keyframes fx-tap { 0%, 10%, 26%, 100% { transform: scale(1); } 16% { transform: scale(.82); } } @keyframes fx-open { 0%, 55% { opacity: .35; transform: scale(1); } 65% { opacity: 1; transform: scale(1.06); } 75%, 100% { opacity: 1; transform: scale(1); } } @keyframes fx-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) rotate(-6deg); } } .fx-taps { top: 92px; left: 50%; width: 30px; height: 30px; margin-left: -15px; } .fx-taps i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hi); opacity: 0; } .fx-menu { left: 5px; right: 5px; bottom: 5px; height: 76px; padding: 8px 6px 6px; border-radius: 16px; background: var(--bg); border: 1.5px solid var(--ln); box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .3); display: grid; gap: 6px; align-content: start; transform: translateY(110%); } .fx-tiles4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .fx-tiles4 i { height: 22px; border-radius: 5px; background: var(--fl); } .fx-exit { height: 14px; border-radius: 7px; background: var(--red); } .live .fx-taps i { animation: fx-ring 3.2s ease-out infinite; } .live .fx-taps i:nth-child(2) { animation-delay: .22s; } .live .fx-taps i:nth-child(3) { animation-delay: .44s; } .live .fx-menu { animation: fx-menu 3.2s cubic-bezier(.3, 1.3, .5, 1) infinite; } @keyframes fx-ring { 0% { transform: scale(.3); opacity: 1; } 18% { transform: scale(1.2); opacity: 0; } 100% { opacity: 0; } } @keyframes fx-menu { 0%, 30% { transform: translateY(110%); } 44%, 86% { transform: none; } 100% { transform: translateY(110%); } } .fx-blur { filter: blur(1.5px); opacity: .7; } .fx-lock { top: 54px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ln); display: grid; place-items: center; } .fx-lock i { position: relative; width: 12px; height: 10px; margin-top: 5px; border-radius: 2.5px; background: var(--label); } .fx-lock i::before { content: ""; position: absolute; left: 2px; top: -7px; width: 8px; height: 9px; border: 2px solid var(--label); border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; } .fx-signin { left: 5px; right: 5px; bottom: 5px; height: 62px; border-radius: 16px; background: var(--bg); border: 1.5px solid var(--ln); transform: translateY(110%); } .fx-signin-t { position: absolute; left: 10px; top: 10px; width: 50%; height: 6px; border-radius: 3px; background: var(--ln); } .fx-signin .wf-btn { top: 26px; left: 8px; right: 8px; } .live .fx-lock { animation: fx-lock 3s ease-in-out infinite; } .live .fx-signin { animation: fx-menu 3s cubic-bezier(.3, 1.3, .5, 1) infinite; } @keyframes fx-lock { 0%, 30%, 90%, 100% { transform: none; } 36% { transform: rotate(-12deg); } 42% { transform: rotate(10deg); } 48% { transform: none; } } .fx-grid { top: 26px; left: 7px; right: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .fx-grid i { height: 50px; border-radius: 6px; border: 1.5px solid var(--ln); background: linear-gradient(var(--fl) 0 30%, transparent 30%); } .fx-grid i:nth-child(3n+1) { background: linear-gradient(color-mix(in srgb, #9fb2f7 60%, transparent) 0 40%, transparent 40%); } .fx-grid i:nth-child(3n+2) { background: linear-gradient(color-mix(in srgb, #f5a58c 60%, transparent) 0 40%, transparent 40%); } .fx-sel { top: 24px; left: 5px; width: 29px; height: 54px; border-radius: 8px; border: 2px solid var(--hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi) 22%, transparent); } .live .fx-sel { animation: fx-sel 4s cubic-bezier(.3, 1.2, .5, 1) infinite; } @keyframes fx-sel { 0%, 18% { transform: none; } 25%, 43% { transform: translateX(29px); } 50%, 68% { transform: translateX(58px); } 75%, 93% { transform: translate(29px, 55px); } 100% { transform: none; } } .fx-qr { top: 46px; left: 50%; width: 64px; height: 64px; margin-left: -32px; border-radius: 6px; overflow: hidden; background: repeating-conic-gradient(var(--label) 0 25%, transparent 0 50%) 0 0 / 8px 8px, var(--bg); box-shadow: inset 0 0 0 4px var(--bg); } .fx-qr b { position: absolute; width: 18px; height: 18px; border: 4px solid var(--label); outline: 3px solid var(--bg); background: var(--bg); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 9px var(--label); } .fx-qr b:nth-child(1) { left: 4px; top: 4px; } .fx-qr b:nth-child(2) { right: 4px; top: 4px; } .fx-qr b:nth-child(3) { left: 4px; bottom: 4px; } .fx-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hi); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--hi) 60%, transparent); opacity: 0; } .fx-linkpill { top: 122px; left: 14px; right: 14px; height: 14px; border-radius: 7px; background: var(--fl); border: 1.5px solid var(--ln); } .live .fx-scan { animation: fx-scan 2.4s ease-in-out infinite; } @keyframes fx-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 50% { top: 62px; opacity: 1; } 60%, 100% { top: 62px; opacity: 0; } } .fx-apps { top: 36px; left: 9px; right: 9px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; } .fx-apps i { display: grid; place-items: center; height: 36px; border-radius: 10px; background: var(--c); color: #fff; font: 750 12px/1 var(--font); font-style: normal; letter-spacing: -.3px; } .fx-apps i:last-child { background: var(--fl); color: var(--label-2); box-shadow: inset 0 0 0 1.5px var(--ln); } .live .fx-apps i { animation: fx-pop 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite; } .live .fx-apps i:nth-child(2) { animation-delay: .08s; } .live .fx-apps i:nth-child(3) { animation-delay: .16s; } .live .fx-apps i:nth-child(4) { animation-delay: .24s; } .live .fx-apps i:nth-child(5) { animation-delay: .32s; } .live .fx-apps i:nth-child(6) { animation-delay: .4s; } @keyframes fx-pop { 0%, 60%, 100% { transform: none; } 10% { transform: scale(.82); } 22% { transform: scale(1.06); } 32% { transform: none; } } .fx-langs { top: 30px; left: 6px; right: 6px; display: grid; border-radius: 10px; background: var(--fl); overflow: hidden; } .fx-langs i { position: relative; display: block; padding: 0 9px; height: 26px; line-height: 26px; font: 600 10px/26px var(--font); font-style: normal; color: var(--label); } .fx-langs i + i { box-shadow: inset 0 .5px 0 var(--ln); } .fx-check { position: absolute; right: 9px; top: 0; height: 26px; line-height: 26px; font: 800 11px/26px var(--font); color: var(--hi); } .live .fx-check { animation: fx-check 4s cubic-bezier(.3, 1.3, .5, 1) infinite; } @keyframes fx-check { 0%, 18% { transform: none; } 25%, 43% { transform: translateY(26px); } 50%, 68% { transform: translateY(52px); } 75%, 93% { transform: translateY(78px); } 100% { transform: none; } } [data-dialect="android"] .fx-paste { border-radius: 5px; background: var(--m-secondary-container); } [data-dialect="android"] .fx-menu, [data-dialect="android"] .fx-signin { border-radius: 12px 12px 4px 4px; } @media (prefers-reduced-motion: reduce) { .fcard.live * { animation: none !important; } } /* ============================================ the rating, minus the mix-ups */ .laurel-wrap .laurel { transition: transform var(--dur-bouncy) var(--spring-bouncy), color .6s ease; } .laurel-wrap:not(.wilted) .laurel[data-laurel] { transform: none; } @keyframes rd-bump { 30% { transform: scale(1.08); } } .stars .on { transition: clip-path .1s linear; } .rating-count span { font-variant-numeric: tabular-nums; } .store-title { margin-top: 22px; } .store-title .num { font-variant-numeric: tabular-nums; } .fwf .wf-frame { position: absolute; left: 50%; top: 50%; margin: -98px 0 0 -50px; } /* ============================================ version 1's rating, honestly */ .laurel-wrap.gold .laurel { color: var(--accent-glyph); } .store-title .num { font-variant-numeric: tabular-nums; } /* marks: mix-up, huh?, fixed */ .mark { --m: var(--label-2); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; flex: none; color: #fff; background: var(--m); --s: 16px; } .mark i svg { stroke-width: 2.3; } .mark.fixed { --m: var(--switch-on); } /* countries */ .country-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 900px; } .country { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 9px; border-radius: 16px; background: var(--fill-3); font-size: 13px; font-weight: 560; letter-spacing: -.1px; white-space: nowrap; } .country .flag { font-size: 15px; line-height: 1; } .country b { font-weight: 700; font-variant-numeric: tabular-nums; } .country .ccount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--fill-3); font-size: 11px; font-weight: 650; color: var(--label-2); font-variant-numeric: tabular-nums; } .country.good { background: color-mix(in srgb, var(--switch-on) 14%, transparent); } .country.good b { color: color-mix(in srgb, var(--switch-on) 75%, var(--label)); } /* Android */ [data-dialect="android"] .mark { border-radius: 10px; } [data-dialect="android"] .country { border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--m-outline-variant); font-weight: 500; letter-spacing: .1px; } [data-dialect="android"] .country.good { background: var(--m-secondary-container); box-shadow: none; } [data-dialect="android"] .country.good b { color: var(--m-on-secondary-container); } .store-card { grid-template-columns: minmax(0, 1fr); } /* ============================= version 1 on the App Store: where it did well, what 2.0 fixed */ [data-dialect="android"] .mark.fixed { --m: #1b8a5a; } .store-card { padding: 30px 22px 26px; } .rt-head { margin-top: 2px; } .rt-head .laurel { color: var(--accent-glyph); width: clamp(30px, 7vw, 44px); height: clamp(66px, 15vw, 92px); } [data-dialect="android"] .rt-head .laurel { color: var(--m-primary); } .rt-big { font-size: clamp(38px, 8vw, 54px); line-height: 1; font-weight: 750; letter-spacing: -.04em; margin-top: 2px; } .rt-in { font-size: 15px; font-weight: 600; color: var(--label-2); letter-spacing: -.2px; margin-top: 4px; } [data-dialect="android"] .rt-big { font-weight: 450; letter-spacing: -.5px; font-variation-settings: "ROND" 70; } [data-dialect="android"] .rt-in { font-weight: 500; letter-spacing: .1px; } .rt-countries { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 760px; margin-top: 18px; } .rt-total { margin-top: 14px; font-size: 13px; color: var(--label-2); letter-spacing: -.05px; } .rt-title { margin-top: 34px; max-width: 22ch; text-wrap: balance; } /* the six complaints, crossed off one by one */ .fix-grid { display: grid; gap: 10px; width: 100%; margin-top: 20px; text-align: left; } @media (min-width: 560px) { .fix-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .fix-grid { grid-template-columns: repeat(3, 1fr); } } .fix { position: relative; display: grid; grid-template-rows: auto 0fr; align-content: start; padding: 16px 16px 14px; border-radius: 22px; background: var(--tray-group); transition: grid-template-rows .6s var(--spring-snappy), background-color .4s ease; } .fix.done { grid-template-rows: auto 1fr; } .fix-q { display: grid; gap: 6px; min-width: 0; } .fix-q .stars { --size: 10px; --star-on: #ff9f0a; } .fix-quote { quotes: "“" "”"; font-size: 15px; line-height: 21px; font-weight: 600; letter-spacing: -.25px; color: var(--label); transition: color .5s ease; } .fix-quote span { background: linear-gradient(var(--red), var(--red)) no-repeat 0 58% / 0% 2px; transition: background-size .55s cubic-bezier(.6, 0, .2, 1); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .fix.done .fix-quote { color: var(--label-2); } .fix.done .fix-quote span { background-size: 100% 2px; } .fix-by { font-size: 12px; color: var(--label-3); } [data-theme="dark"] .fix-by { color: var(--label-2); } .fix-a { min-height: 0; overflow: hidden; } .fix-a-in { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: .5px solid var(--sep); opacity: 0; transform: translateY(-6px); transition: opacity .35s ease .15s, transform .6s var(--spring-snappy) .15s; } .fix.done .fix-a-in { opacity: 1; transform: none; } .fix-a .mark { width: 26px; height: 26px; --s: 15px; transform: scale(.3); transition: transform var(--dur-bouncy) var(--spring-bouncy) .2s; } .fix.done .fix-a .mark { transform: none; } .fix-a-text { display: grid; gap: 2px; min-width: 0; } .fix-a-text b { font-size: 15px; font-weight: 650; letter-spacing: -.25px; color: var(--label); } .fix-a-text span { font-size: 13.5px; line-height: 18px; color: var(--label-2); } [data-dialect="android"] .fix { border-radius: 20px; background: var(--m-group); } [data-dialect="android"] .fix-quote { font-weight: 500; letter-spacing: .1px; } [data-dialect="android"] .fix-quote span { background-image: linear-gradient(var(--m-error), var(--m-error)); } [data-dialect="android"] .fix-a-in { border-top-color: var(--m-outline-variant); } [data-dialect="android"] .fix-a-text b { font-weight: 500; letter-spacing: .1px; } [data-dialect="android"] .fix-a-text span { font-size: 14px; letter-spacing: .25px; } @media (max-width: 480px) { .store-card { padding: 26px 14px 22px; } } /* ===================================== ratings round 3: awards, filling stars, fix previews, get row */ .rt-stars { --size: 22px; margin-top: 10px; } .rt-stars .on { --star-on: #ff9f0a; transition: clip-path 1.6s cubic-bezier(.22, 1, .36, 1); } [data-dialect="android"] .rt-stars .on { --star-on: var(--m-primary); } .rt-head .laurel { width: clamp(40px, 9vw, 58px); height: clamp(96px, 21vw, 132px); } .rt-head .laurel-center { gap: 0; } .awards { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 26px; } .award { display: flex; align-items: center; gap: 0; color: var(--label); } .award .laurel { width: 28px; height: 74px; color: var(--label-2); } .award .laurel[data-laurel="r"] svg { transform: scaleX(-1); } .award-c { display: grid; justify-items: center; gap: 1px; min-width: 76px; text-align: center; } .award-flag { font-size: 22px; line-height: 1; margin-bottom: 2px; } .award-score { font-size: 22px; line-height: 1.05; font-weight: 750; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .award .stars.xs { --size: 8px; --star-on: #ff9f0a; margin: 2px 0 1px; } .award-name { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; } .award-n { font-size: 10.5px; color: var(--label-2); } [data-dialect="android"] .award .laurel { color: var(--m-on-surface-variant); } [data-dialect="android"] .award-score { font-weight: 500; letter-spacing: 0; font-variation-settings: "ROND" 60; } [data-dialect="android"] .award .stars.xs { --star-on: var(--m-primary); } .rt-total { max-width: 34em; text-align: center; } /* fix cards: tappable, with the wireframe of what shipped */ .fix { cursor: pointer; outline: none; transition: grid-template-rows .6s var(--spring-snappy), background-color .25s ease, transform var(--dur-bouncy) var(--spring-bouncy), box-shadow .25s ease; } .fix:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 70%, transparent); } @media (hover: hover) { .fix:hover { background: color-mix(in srgb, var(--tray-group) 80%, var(--label) 4%); } } .fix.is-pressed { transform: scale(.98); } .fix-a-in { align-items: center; } .fix-a-text { flex: 1; } .fix-wf { --ln: var(--label-3); --fl: var(--fill-3); --hi: var(--tint); position: relative; width: 58px; height: 84px; flex: none; margin-left: 4px; border-radius: 12px; background: var(--fill-4); overflow: hidden; } .fix-wf .wf-frame { position: absolute; left: 50%; top: 50%; margin: -98px 0 0 -50px; transform: scale(.38); } .fix-wf .wf-frame.tablet { margin: -60px 0 0 -80px; transform: scale(.33); } .fix-hero { --ln: var(--label-3); --fl: var(--fill-3); --hi: var(--tint); position: relative; height: 230px; margin-bottom: 14px; border-radius: 22px; background: var(--tray-group); overflow: hidden; } .fix-hero .wf-frame { position: absolute; left: 50%; top: 50%; margin: -98px 0 0 -50px; transform: scale(1.02); } .fix-hero .wf-frame.tablet { margin: -60px 0 0 -80px; transform: scale(1.15); } .fix-eyebrow i { color: var(--switch-on); } .fix-said { padding: 16px 18px; border-radius: 20px; background: var(--tray-group); } .fix-said-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--label-2); --star-on: #ff9f0a; } .fix-said-top .stars { --size: 10px; } .fix-said-body { margin-top: 8px; font-size: 16px; line-height: 1.45; letter-spacing: -.3px; white-space: pre-line; } .fix-said-more { margin-top: 10px; font-size: 13px; color: var(--label-2); } .fix-try { margin-top: 14px; } [data-dialect="android"] .fix-hero, [data-dialect="android"] .fix-said { border-radius: 16px; background: var(--m-group); } [data-dialect="android"] .fix-said-body { font-size: 15px; letter-spacing: .2px; } /* previews for the fixes */ .wf-frame.tablet { width: 160px; height: 120px; border-radius: 14px; } .fx-dark { inset: 0; background: #fff; mix-blend-mode: difference; clip-path: inset(0 0 0 52%); } .live .fx-dark { animation: fx-dark 3.2s ease-in-out infinite; } @keyframes fx-dark { 0%, 15% { clip-path: inset(0 0 0 100%); } 45%, 70% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } } .fx-stage { inset: 0; } .fx-stage > * { position: absolute; } .fx-play { top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--primary-bg); box-shadow: 0 6px 14px -6px rgba(242, 71, 28, .7); opacity: 0; } .fx-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .live .fx-play { animation: fx-play 3s ease-in-out infinite; } .live .fx-stage { animation: fx-stage 3s ease-in-out infinite; } @keyframes fx-play { 0%, 10% { opacity: 0; transform: scale(.6); } 22%, 40% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: scale(1.6); } } @keyframes fx-stage { 0%, 40% { opacity: .15; } 55%, 100% { opacity: 1; } } .fx-hs { border-radius: 8px; background: color-mix(in srgb, var(--hotspot) 28%, transparent); box-shadow: inset 0 0 0 1.5px var(--hotspot); opacity: 0; } .fx-hs.a { top: 48px; left: 8px; right: 8px; height: 46px; } .fx-hs.b { top: 106px; left: 10px; right: 10px; height: 22px; border-radius: 11px; } .fx-toggle { bottom: 18px; left: 50%; width: 34px; height: 18px; margin-left: -17px; border-radius: 9px; background: var(--switch-on); transition: background .2s; } .fx-toggle i { position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .live .fx-hs { animation: fx-hs 3.4s ease-out infinite; } .live .fx-toggle { animation: fx-tog-bg 3.4s steps(1) infinite; } .live .fx-toggle i { animation: fx-tog 3.4s cubic-bezier(.3, 1.4, .5, 1) infinite; } @keyframes fx-hs { 0% { opacity: 0; } 8%, 30% { opacity: 1; } 40%, 100% { opacity: 0; } } @keyframes fx-tog { 0%, 45% { transform: none; } 55%, 100% { transform: translateX(-16px); } } @keyframes fx-tog-bg { 0%, 50% { background: var(--switch-on); } 51%, 100% { background: var(--fill); } } .fx-lcard { top: 50%; left: 50%; width: 62px; height: 52px; margin: -26px 0 0 -31px; border-radius: 12px; background: rgba(40, 40, 44, .85); display: grid; justify-items: center; align-content: center; gap: 7px; } .fx-spin { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.25); border-top-color: #fff; } .fx-lline { position: relative; width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.7); } .live .fx-spin { animation: fx-spin .9s linear infinite; } .live .fx-lcard { animation: fx-lcard 3.2s ease-in-out infinite; } @keyframes fx-spin { to { transform: rotate(360deg); } } @keyframes fx-lcard { 0%, 70% { opacity: 1; transform: none; } 80%, 92% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: none; } } .fx-side { top: 8px; bottom: 8px; left: 8px; width: 40px; border-radius: 8px; background: var(--fl); border: 1.5px solid var(--ln); display: grid; align-content: start; gap: 5px; padding: 8px 5px; } .fx-side i { height: 5px; border-radius: 3px; background: var(--ln); } .fx-tgrid { top: 8px; bottom: 8px; left: 54px; right: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .fx-tgrid i { border-radius: 5px; border: 1.5px solid var(--ln); background: var(--fl); } .live .fx-tgrid i { animation: fx-pop 3s cubic-bezier(.3, 1.6, .5, 1) infinite; } .live .fx-tgrid i:nth-child(2) { animation-delay: .06s; } .live .fx-tgrid i:nth-child(3) { animation-delay: .12s; } .live .fx-tgrid i:nth-child(4) { animation-delay: .18s; } .live .fx-tgrid i:nth-child(5) { animation-delay: .24s; } .live .fx-tgrid i:nth-child(6) { animation-delay: .3s; } @media (prefers-reduced-motion: reduce) { .live * { animation: none !important; } } /* the get row */ .get-row { display: grid; justify-items: center; gap: 14px; width: 100%; margin-top: 30px; padding-top: 26px; border-top: .5px solid var(--sep); text-align: center; } .get-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); } [data-dialect="android"] .get-icon { border-radius: 50%; } .get-text { display: grid; gap: 3px; } .get-text b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: -.4px; } .get-text > span { font-size: 14px; color: var(--label-2); } .get-row .badges { margin-top: 2px; } @media (min-width: 760px) { .get-row { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; gap: 18px; text-align: left; } .get-text b { justify-content: flex-start; } .get-row .badges { margin-top: 0; justify-content: flex-end; } } [data-dialect="android"] .get-row { border-top-color: var(--m-outline-variant); } [data-dialect="android"] .get-text b { font-weight: 500; letter-spacing: 0; } .badge-col { display: inline-grid; justify-items: center; gap: 7px; } .store-badge { height: 52px; border-radius: 11px; } .store-badge.play img { height: 52px; } .store-badge.appstore b { font-size: 23px; } .badge-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--label-2); letter-spacing: -.05px; } .badge-col.soon .store-badge { filter: grayscale(1); opacity: .5; } .soon-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 3px color-mix(in srgb, #ff9f0a 25%, transparent); } [data-dialect="android"] .badge-cap { font-weight: 500; letter-spacing: .3px; } /* ============================================ hero slider: tour + screens, past ones blur away */ .hero { position: relative; } .hero-copy { position: relative; z-index: 3; grid-row: 1; grid-column: 1; } .hero-stage { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; grid-row: 2; grid-column: 1; } .hdeck { --hw: clamp(226px, 62vw, 300px); --ar: 1320 / 2868; position: relative; width: var(--hw); aspect-ratio: var(--ar); touch-action: pan-y; cursor: grab; outline: none; } [data-dialect="android"] .hdeck { --ar: 1344 / 2992; } .hdeck:active { cursor: grabbing; } .hd-item { --pw: var(--hw); position: absolute; left: 0; top: 0; transform-origin: 50% 55%; will-change: transform, opacity; } .hd-item[hidden] { display: none; } .hd-foot { display: grid; justify-items: center; gap: 12px; text-align: center; } .hd-nav { display: flex; align-items: center; gap: 10px; } .hd-nav .circle-btn { width: 36px; height: 36px; color: var(--label); --s: 15px; } [data-dialect="android"] .hd-nav .circle-btn { width: 40px; height: 40px; background: var(--m-surface-container-high); color: var(--m-on-surface); } .hd-nav .dots i { cursor: pointer; } /* progressive blur: each layer blurs more and reaches less far right */ .hd-blur { position: relative; z-index: 2; grid-row: 2; grid-column: 1; align-self: stretch; justify-self: start; pointer-events: none; width: calc((100vw - 100%) / 2 + 16%); margin-left: calc((100vw - 100%) / -2); margin-top: -20px; margin-bottom: -20px; } .hd-blur i { position: absolute; inset: 0; } .hd-blur i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask: linear-gradient(to left, transparent 0%, #000 30%); mask: linear-gradient(to left, transparent 0%, #000 30%); } .hd-blur i:nth-child(2) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask: linear-gradient(to left, transparent 20%, #000 50%); mask: linear-gradient(to left, transparent 20%, #000 50%); } .hd-blur i:nth-child(3) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask: linear-gradient(to left, transparent 40%, #000 72%); mask: linear-gradient(to left, transparent 40%, #000 72%); } .hd-blur i:nth-child(4) { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); -webkit-mask: linear-gradient(to left, transparent 62%, #000 95%); mask: linear-gradient(to left, transparent 62%, #000 95%); } @media (min-width: 640px) { .hero-stage { grid-row: 1; grid-column: 2; } .hd-blur { grid-row: 1; grid-column: 1; width: calc((100vw - 100%) / 2 + 100% + 10px); margin-top: -60px; margin-bottom: -60px; } .hd-blur i { -webkit-mask-image: none; } } @media (min-width: 640px) { .hd-blur i:nth-child(1) { -webkit-mask: linear-gradient(to left, transparent 0%, #000 12%); mask: linear-gradient(to left, transparent 0%, #000 12%); } .hd-blur i:nth-child(2) { -webkit-mask: linear-gradient(to left, transparent 6%, #000 24%); mask: linear-gradient(to left, transparent 6%, #000 24%); } .hd-blur i:nth-child(3) { -webkit-mask: linear-gradient(to left, transparent 16%, #000 40%); mask: linear-gradient(to left, transparent 16%, #000 40%); } .hd-blur i:nth-child(4) { -webkit-mask: linear-gradient(to left, transparent 30%, #000 62%); mask: linear-gradient(to left, transparent 30%, #000 62%); } } /* ratings: the small label now leads the awards */ .rt-label { margin-top: 2px; } .awards { margin-top: 14px; } main { overflow-x: clip; } /* phones: lead with the slider; the blur only covers the phones, never the caption */ .hero { --hw: clamp(226px, 62vw, 300px); } .hdeck { --hw: inherit; } @media (max-width: 639px) { .hero { gap: 28px; padding-top: calc(var(--safe-top) + 76px); } .hero-stage { grid-row: 1; } .hero-copy { grid-row: 2; } .hd-blur { grid-row: 1; align-self: start; height: calc(var(--hw) * 2.23 + 20px); margin-top: -10px; margin-bottom: 0; } } /* phones: smaller screens in the slider, so the neighbours peek in and the hero is shorter */ @media (max-width: 639px) { .hero { --hw: clamp(176px, 49vw, 230px); gap: 22px; } .hd-foot { gap: 8px; } } /* ===================================================== header nav + the developers page */ .nav-link { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 13px; border-radius: 22px; font-size: 14.5px; font-weight: 620; letter-spacing: -.2px; white-space: nowrap; color: var(--label); --s: 17px; } .nav-link[aria-current="page"] { color: var(--tint); } [data-dialect="android"] .nav-link { height: 40px; padding: 0 16px 0 12px; border-radius: 20px; background: none; box-shadow: inset 0 0 0 1px var(--m-outline-variant); font-weight: 500; letter-spacing: .1px; font-size: 14px; } [data-dialect="android"] .nav-link[aria-current="page"] { background: var(--m-secondary-container); color: var(--m-on-secondary-container); box-shadow: none; } @media (max-width: 760px) { .nav-link { width: 44px; padding: 0; justify-content: center; } .nav-link > span { display: none; } [data-dialect="android"] .nav-link { width: 40px; padding: 0; } } @media (max-width: 430px) { .dialect-seg > button span { display: none; } .dialect-seg > button { padding: 0 14px; --s: 17px; } .topbar-end { gap: 6px; } } /* home: the teaser card */ .dev-teaser { display: grid; gap: 20px; align-items: center; padding: 18px; border-radius: 30px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); color: var(--label); } @media (min-width: 760px) { .dev-teaser { grid-template-columns: 1fr 1.1fr; padding: 22px; } } .dev-teaser-term { position: relative; display: grid; gap: 6px; padding: 38px 18px 22px; border-radius: 18px; background: #1c1c1e; color: #e6e6eb; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .6); } .dev-teaser-term i { position: absolute; top: 13px; width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .dev-teaser-term i:nth-child(1) { left: 16px; } .dev-teaser-term i:nth-child(2) { left: 32px; background: #febc2e; } .dev-teaser-term i:nth-child(3) { left: 48px; background: #28c840; } .dev-teaser-term code { font-size: 12.5px; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .dev-teaser-term .ps { color: #ff8a5c; } .dev-teaser-term .ok { color: #30d158; } .dev-teaser-text { display: grid; gap: 8px; } .dev-teaser-text .eyebrow { margin: 0; } .dev-teaser-text b { font-size: clamp(22px, 3.4vw, 28px); line-height: 1.15; font-weight: 700; letter-spacing: -.6px; text-wrap: balance; } .dev-teaser-text > span:not(.eyebrow):not(.link) { font-size: 15px; line-height: 21px; color: var(--label-2); letter-spacing: -.2px; } .dev-teaser-text .link { min-height: 32px; } [data-dialect="android"] .dev-teaser { border-radius: 28px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .dev-teaser-text b { font-weight: 400; letter-spacing: 0; font-variation-settings: "ROND" 50; } /* developers page */ .dev-hero { padding-top: calc(var(--safe-top) + 96px); padding-bottom: 8px; } .dev-hero .hero-title { max-width: 15ch; } .back-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 18px -4px; min-height: 32px; color: var(--tint); font-size: 15px; font-weight: 600; letter-spacing: -.2px; --s: 15px; } [data-dialect="android"] .back-link { font-weight: 500; letter-spacing: .1px; } .page-dev .skill { padding-top: 48px; } .code-cards { display: grid; gap: 12px; margin-top: 26px; } @media (min-width: 900px) { .code-cards { grid-template-columns: 1fr 1fr; } } .code-cards .code-card { margin-top: 0; } .code-cards pre { white-space: pre; } .get-row.solo { margin-top: 0; padding-top: 0; border-top: 0; } /* side by side from tablet width: the headline and the phones scale with the window */ @media (min-width: 640px) { .hero { grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 4vw, 40px); --hw: clamp(200px, 27vw, 300px); } .hero-title { font-size: clamp(34px, 5.3vw, 66px); } [data-dialect="android"] .hero-title { font-size: clamp(32px, 4.8vw, 57px); } .hero-sub { font-size: clamp(15px, 1.7vw, 19px); } } /* stacked on phones: the slider starts at the text's left edge, neighbours peek in on the right */ @media (max-width: 639px) { .hero-stage { justify-items: start; } .hd-foot { justify-items: start; text-align: left; } .hd-blur { width: calc((100vw - 100%) / 2 + 6px); } } /* ===================================================== round: title, awards grid, stats, people */ .hero-title { max-width: 15ch; } .proto-mark { background: linear-gradient(100deg, #12cf88 0%, #2a4ceb 38%, #8a2d8e 68%, #fa4b1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .02em; } [data-theme="dark"] .proto-mark { background-image: linear-gradient(100deg, #3ee0a2 0%, #5c7bff 38%, #c05ac4 68%, #ff7a4d 100%); } /* awards: 2/2/1 on phones, 3/2 on wider phones and small tablets, one row from there */ .awards { gap: 6px 0; width: 100%; max-width: 820px; } .award { flex: 0 0 50%; justify-content: center; } @media (min-width: 520px) { .award { flex-basis: 33.333%; } } @media (min-width: 900px) { .award { flex-basis: 20%; } } .award-c { min-width: 0; } /* the stats line: short and visual */ .rt-stats { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 10px; margin-top: 16px; padding: 7px 14px; border-radius: 18px; background: var(--fill-4); color: var(--label-2); font-size: 14px; white-space: nowrap; --s: 15px; } .rt-stats .st { display: inline-flex; align-items: center; gap: 4px; } .rt-stats b { color: var(--label); font-weight: 700; font-variant-numeric: tabular-nums; } .rt-stats .st-star { color: #ff9f0a; } .rt-stats .st-star .msr { --f: 1; } .rt-stats .st-sep { color: var(--label-3); } [data-dialect="android"] .rt-stats { border-radius: 8px; background: var(--m-surface-container-high); } [data-dialect="android"] .rt-stats b { font-weight: 500; } [data-dialect="android"] .rt-stats .st-star { color: var(--m-primary); } @media (max-width: 380px) { .rt-stats { gap: 7px; padding: 7px 11px; font-size: 13px; } } /* fixes: a quiet "Tap to see" in the corner */ .fix { position: relative; } .fix-more { position: absolute; top: 13px; right: 14px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--label-3); letter-spacing: -.05px; --s: 14px; transition: color .2s; } [data-theme="dark"] .fix-more { color: var(--label-2); } .fix:hover .fix-more { color: var(--tint); } [data-dialect="android"] .fix-more { font-weight: 500; letter-spacing: .3px; } /* the people have spoken */ .people-head { margin-top: 72px; } .stream { display: grid; gap: 10px; margin-top: 26px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .stream-row { overflow: hidden; } .sr-track { display: flex; width: max-content; animation: sr-flow var(--dur, 60s) linear infinite; } .stream-row.rev .sr-track { animation-direction: reverse; } .stream:hover .sr-track { animation-play-state: paused; } .sr-set { display: flex; gap: 10px; padding-right: 10px; } @keyframes sr-flow { to { transform: translateX(-50%); } } .sr-item { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 14px; border-radius: 22px; white-space: nowrap; background: var(--group-bg); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); color: var(--label); } .sr-item .stars { --size: 9px; --star-on: #ff9f0a; } .sr-item b { font-size: 15px; font-weight: 650; letter-spacing: -.25px; } .sr-item > span:last-child { font-size: 13px; color: var(--label-2); } [data-dialect="android"] .sr-item { border-radius: 12px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .sr-item b { font-weight: 500; letter-spacing: .1px; } @media (prefers-reduced-motion: reduce) { .stream { overflow-x: auto; } .sr-track { animation: none; } .sr-set[aria-hidden] { display: none; } } .quotes { display: grid; justify-items: center; gap: 22px; margin-top: 40px; text-align: center; } .quote-stage { width: 100%; max-width: 820px; min-height: 190px; display: grid; align-items: center; touch-action: pan-y; cursor: grab; } .quote { margin: 0; display: grid; justify-items: center; gap: 16px; } .quote blockquote { margin: 0; font-size: clamp(22px, 3.6vw, 36px); line-height: 1.22; font-weight: 650; letter-spacing: -.025em; text-wrap: balance; quotes: "“" "”"; } .quote blockquote::before { content: open-quote; color: var(--tint); } .quote blockquote::after { content: close-quote; color: var(--tint); } .quote figcaption { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--label-2); } .quote figcaption .stars { --size: 11px; --star-on: #ff9f0a; } [data-dialect="android"] .quote blockquote { font-weight: 400; letter-spacing: 0; font-variation-settings: "ROND" 40; } .quote-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; } .quote-foot .dots i { cursor: pointer; } .wall { columns: 1; column-gap: 10px; } @media (min-width: 560px) { [data-dialect="android"] .wall { columns: 2; } } .wall-card { break-inside: avoid; display: grid; gap: 6px; margin-bottom: 10px; padding: 14px 16px; border-radius: 18px; background: var(--tray-group); } .wall-card .stars { --size: 9px; --star-on: #ff9f0a; } .wall-card b { font-size: 15px; font-weight: 650; letter-spacing: -.25px; } .wall-card p { font-size: 14.5px; line-height: 20px; letter-spacing: -.15px; white-space: pre-line; } .wall-by { font-size: 12px; color: var(--label-2); } [data-dialect="android"] .wall-card { border-radius: 16px; background: var(--m-group); } [data-dialect="android"] .wall-card b { font-weight: 500; } /* ======================================== developers: one hero, the agent demo as its picture */ .dev-hero { display: grid; gap: 34px; align-items: center; padding-top: calc(var(--safe-top) + 92px); padding-bottom: 8px; } @media (min-width: 900px) { .dev-hero { grid-template-columns: 1.05fr .95fr; gap: 40px; min-height: min(100dvh, 860px); } } .dev-hero .hero-title { max-width: 12ch; font-size: clamp(38px, 5.4vw, 64px); } [data-dialect="android"] .dev-hero .hero-title { font-size: clamp(34px, 4.8vw, 56px); } .dev-hero .hero-actions .btn.gray { box-shadow: none; } .inline-link { color: var(--tint); font-weight: 600; } .dev-visual { position: relative; display: grid; justify-items: center; padding: 18px 0 28px; min-width: 0; } .dev-visual .agent-phone .phone { --pw: clamp(220px, 24vw, 278px); } .dev-bubbles { position: absolute; inset: 0; pointer-events: none; } .dev-bubbles .bubble { position: absolute; pointer-events: auto; max-width: none; box-shadow: 0 22px 48px -22px rgba(0, 0, 0, .55); } .dev-bubbles .bubble.you { top: 8%; left: 0; width: min(300px, 64%); font-size: 15.5px; line-height: 1.38; } .dev-bubbles .bubble.agent { bottom: 2%; right: 0; width: min(340px, 76%); padding: 12px 16px 14px; background: color-mix(in srgb, var(--tray-bg) 86%, transparent); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); } .dev-bubbles .agent-steps { font-size: 13.5px; line-height: 18px; gap: 7px; } .dev-bubbles .agent-steps code { font-size: 12px; } [data-dialect="android"] .dev-bubbles .bubble.agent { background: var(--m-surface-container-high); -webkit-backdrop-filter: none; backdrop-filter: none; } @media (max-width: 899px) { .dev-visual { padding: 70px 0 150px; } .dev-bubbles .bubble.you { top: 0; } .dev-bubbles .bubble.agent { bottom: 0; } } .page-dev .skill { padding-top: 56px; } .page-dev .skill .rules { margin-top: 26px; } .dev-bubbles .agent-steps code { overflow-wrap: normal; white-space: nowrap; } .dev-bubbles .agent-steps li { min-width: 0; } .dev-bubbles .agent-steps li > span, .dev-bubbles .link-step code { min-width: 0; } .dev-bubbles .link-step code { display: block; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 899px) { .dev-visual { padding: 64px 0 132px; } .dev-bubbles .bubble.you { width: min(270px, 70%); font-size: 14px; padding: 11px 14px 13px; } .dev-bubbles .bubble.agent { width: min(330px, 90%); } .dev-bubbles .agent-steps { font-size: 12.5px; line-height: 17px; } .dev-bubbles .agent-steps code { font-size: 11px; padding: 0 4px; } } /* "Proto" in the brand orange */ .proto-mark, [data-theme="dark"] .proto-mark { background-image: linear-gradient(180deg, #ff6b3e, #f2471c); } [data-theme="dark"] .proto-mark { background-image: linear-gradient(180deg, #ff8a5c, #ff5a2a); } [data-dialect="android"] .proto-mark { background: none; color: var(--m-primary-container); -webkit-background-clip: border-box; background-clip: border-box; } /* quotes on a track: neighbours wait at the sides, blurred by distance */ .quote-stage { position: relative; display: block; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); min-height: 200px; overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-mask: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%); } .quote-stage:active { cursor: grabbing; } .quote { position: absolute; left: 50%; top: 50%; width: min(760px, 76vw); will-change: transform, filter, opacity; -webkit-user-select: none; user-select: none; } .quote[aria-hidden="true"] { cursor: pointer; } @media (max-width: 639px) { .quote { width: 82vw; } .quote blockquote { font-size: clamp(20px, 5.6vw, 26px); } } /* the wall in a wide sheet: two columns once there's room */ .wall { columns: 1; } @container (min-width: 620px) { .wall { columns: 2; column-gap: 12px; } } /* ===================================================== brand tiles, flags, gesture tiles */ .chip[data-brand] { padding-left: 5px; gap: 7px; } .btile { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 27%; flex: none; background: #fff; color: #111; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1); } .btile svg { width: 58%; height: 58%; display: block; } .btile.letters { font: 800 9.5px/1 var(--font); letter-spacing: -.3px; box-shadow: none; } [data-theme="dark"] .btile:not(.letters) { background: #2c2c2e; color: #fff; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1); } .chip.off .btile { filter: grayscale(1); opacity: .6; } [data-dialect="android"] .chip[data-brand] { padding-left: 6px; } [data-dialect="android"] .btile { border-radius: 6px; } .lang-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; } .lang { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 10px; border-radius: 17px; background: var(--tray-group); font-size: 14.5px; font-weight: 560; letter-spacing: -.15px; white-space: nowrap; } .lang-flag { font-size: 17px; line-height: 1; } [data-dialect="android"] .lang { border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px var(--m-outline-variant); font-weight: 500; letter-spacing: .1px; } /* the exit gestures, animated like the app's Settings tiles */ .gest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .gest { position: relative; display: block; width: 100%; border-radius: 24px; background: var(--tray-group); padding: 12px 12px 13px; text-align: left; color: var(--label); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .25s ease, transform var(--dur-bouncy) var(--spring-bouncy); } .gest[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--tint); } .gest-art { position: relative; display: block; height: 84px; border-radius: 16px; overflow: hidden; margin-bottom: 10px; background: radial-gradient(120% 120% at 50% 0%, var(--fill-3), var(--fill-4)); } .gest > b { display: block; font-size: 14.5px; font-weight: 650; letter-spacing: -.25px; } .gest > .gest-hint { display: block; font-size: 12.5px; color: var(--label-2); margin-top: 1px; letter-spacing: -.05px; } .gest-check { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 11px; background: var(--tint); color: #fff; display: grid; place-items: center; --s: 13px; transform: scale(0); transition: transform var(--dur-bouncy) var(--spring-bouncy); } .gest-check i svg { stroke-width: 3.2; } .gest[aria-checked="true"] .gest-check { transform: scale(1); } .ga-phone { position: absolute; left: 50%; top: 14px; width: 46px; height: 88px; margin-left: -23px; border-radius: 12px; border: 2px solid var(--label-3); } .ga-dot { position: absolute; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--tint); opacity: 0; } .ga-ring { position: absolute; width: 30px; height: 30px; margin: -15px; border-radius: 50%; border: 2px solid var(--tint); opacity: 0; } .ga-triple .ga-dot { left: 50%; top: 46px; animation: ga-tap 1.8s infinite; } .ga-triple .ga-ring { left: 50%; top: 46px; animation: ga-ring 1.8s infinite; } @keyframes ga-tap { 0%, 100% { opacity: 0; transform: scale(.6); } 5%, 9% { opacity: 1; transform: scale(1); } 13% { opacity: .2; transform: scale(.7); } 18%, 22% { opacity: 1; transform: scale(1); } 26% { opacity: .2; transform: scale(.7); } 31%, 35% { opacity: 1; transform: scale(1); } 45% { opacity: 0; transform: scale(.6); } } @keyframes ga-ring { 0%, 34% { opacity: 0; transform: scale(.5); } 38% { opacity: 1; transform: scale(.8); } 60% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } } .ga-hold .ga-dot { top: 50px; animation: ga-hold 2s infinite; } .ga-hold .ga-dot:nth-child(2) { left: calc(50% - 16px); top: 44px; } .ga-hold .ga-dot:nth-child(3) { left: 50%; top: 38px; } .ga-hold .ga-dot:nth-child(4) { left: calc(50% + 16px); top: 44px; } .ga-hold .ga-ring { left: 50%; top: 44px; width: 70px; height: 70px; margin: -35px; animation: ga-holdring 2s infinite; } @keyframes ga-hold { 0% { opacity: 0; transform: scale(.5); } 10%, 70% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(.9); } } @keyframes ga-holdring { 0%, 15% { opacity: 0; transform: scale(.6); } 60% { opacity: .9; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.15); } } .ga-double .ga-dot { top: 46px; animation: ga-dbl 1.8s infinite; } .ga-double .ga-dot:nth-child(2) { left: calc(50% - 9px); } .ga-double .ga-dot:nth-child(3) { left: calc(50% + 9px); } .ga-double .ga-ring { left: 50%; top: 46px; animation: ga-ring 1.8s infinite; } @keyframes ga-dbl { 0%, 100% { opacity: 0; transform: scale(.6); } 6%, 11% { opacity: 1; transform: scale(1); } 16% { opacity: .2; transform: scale(.7); } 22%, 27% { opacity: 1; transform: scale(1); } 38% { opacity: 0; transform: scale(.6); } } .ga-shake .ga-phone { animation: ga-shake 1.8s infinite; border-color: var(--tint); } @keyframes ga-shake { 0%, 50%, 100% { transform: rotate(0); } 8% { transform: rotate(-9deg); } 16% { transform: rotate(8deg); } 24% { transform: rotate(-7deg); } 32% { transform: rotate(5deg); } 40% { transform: rotate(-2deg); } } [data-dialect="android"] .gest { border-radius: 20px; background: var(--m-group); box-shadow: none; transition: border-radius var(--m-spatial-fast-ms) var(--m-spatial-fast), background-color .2s; } [data-dialect="android"] .gest.is-pressed { border-radius: 28px; } [data-dialect="android"] .gest[aria-checked="true"] { background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .gest[aria-checked="true"] > .gest-hint { color: inherit; opacity: .85; } [data-dialect="android"] .gest-art { border-radius: 12px; margin-bottom: 12px; background: var(--m-surface-container); } [data-dialect="android"] .gest > b { font-weight: 500; letter-spacing: .1px; } [data-dialect="android"] .gest-check { background: var(--m-primary); color: var(--m-on-primary); } .quote-stage { -webkit-mask: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); } .lang-row { align-items: flex-start; gap: 18px; } .lang-row .lang-grid { margin: 0; gap: 6px; align-content: flex-start; } .lang-row .lang { height: 32px; font-size: 14px; padding: 0 11px 0 9px; } /* softer, progressive top blur: two layers, a weaker tint and a long fade instead of a band */ .edge-blur { height: calc(var(--safe-top) + 104px); background: color-mix(in srgb, var(--amb-base) 38%, transparent); -webkit-backdrop-filter: blur(6px) saturate(150%); backdrop-filter: blur(6px) saturate(150%); -webkit-mask: linear-gradient(#000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.3) 70%, transparent 100%); mask: linear-gradient(#000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.3) 70%, transparent 100%); } .edge-blur::before { content: ""; position: absolute; inset: 0 0 35% 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask: linear-gradient(#000 40%, transparent); mask: linear-gradient(#000 40%, transparent); } /* the people have spoken: centred and calmer */ .people-head { text-align: center; } .people-head .section-sub { margin-left: auto; margin-right: auto; } .quote-stage { width: 100%; margin-left: 0; } .quote { width: min(620px, 72%); } .quote blockquote { font-size: clamp(20px, 2.5vw, 28px); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; } .quote figcaption { font-size: 13px; } .quotes { margin-top: 30px; gap: 14px; } .sr-item { height: 38px; padding: 0 14px 0 12px; background: color-mix(in srgb, var(--group-bg) 70%, transparent); } .sr-item b { font-size: 14px; font-weight: 600; color: var(--label-2); } .sr-item > span:last-child { font-size: 12px; color: var(--label-3); } .stream { gap: 8px; opacity: .9; } @media (max-width: 639px) { .quote { width: 84%; } } /* one left edge for every section head; showcases stay centred under them */ .people-head { text-align: left; } .people-head .section-sub { margin-left: 0; } .stores .store-card { margin-top: 28px; } .faq-section { display: grid; gap: 4px 48px; align-items: start; } .faq-section .faq { margin-top: 24px; } @media (min-width: 900px) { .faq-section { grid-template-columns: minmax(240px, 1fr) 2fr; } .faq-section .faq { margin-top: 6px; } } /* quotes, left-aligned on the shared edge */ .quotes { justify-items: start; text-align: left; } .quote { left: 0; transform-origin: 0 50%; } .quote, .quote blockquote { text-align: left; } .quote { justify-items: start; } .quote figcaption { justify-content: flex-start; } .quote-foot { justify-content: flex-start; } .quote-stage { -webkit-mask: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%); mask: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%); } .quote blockquote { text-wrap: pretty; } /* rhythm: "What it does" tucks under the hero, everything else gets more air */ #features.section { padding-top: 0; margin-top: -20px; position: relative; z-index: 4; } .section { padding-top: clamp(88px, 11vw, 136px); } .people-head { margin-top: clamp(88px, 11vw, 136px); } .quotes { margin-bottom: 8px; } .stores { padding-top: clamp(88px, 11vw, 136px); } .footer { padding-top: clamp(88px, 11vw, 136px); } .stores > .wrap + .wrap.people-head { margin-top: clamp(88px, 11vw, 136px); } /* ============================================ smooth anchors and page-to-page transitions */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @view-transition { navigation: auto; } /* the header and the dock stay put while the page underneath changes */ .topbar { view-transition-name: topbar; } .dock { view-transition-name: dock; } ::view-transition-group(topbar), ::view-transition-group(dock) { animation-duration: .45s; } html:active-view-transition-type(page-fwd)::view-transition-old(root) { animation: pg-out-l .32s cubic-bezier(.4, 0, 1, 1) both; } html:active-view-transition-type(page-fwd)::view-transition-new(root) { animation: pg-in-r .55s cubic-bezier(.2, .9, .25, 1) both; } html:active-view-transition-type(page-back)::view-transition-old(root) { animation: pg-out-r .32s cubic-bezier(.4, 0, 1, 1) both; } html:active-view-transition-type(page-back)::view-transition-new(root) { animation: pg-in-l .55s cubic-bezier(.2, .9, .25, 1) both; } @keyframes pg-out-l { to { opacity: 0; transform: translateX(-40px); filter: blur(6px); } } @keyframes pg-out-r { to { opacity: 0; transform: translateX(40px); filter: blur(6px); } } @keyframes pg-in-r { from { opacity: 0; transform: translateX(56px); filter: blur(6px); } } @keyframes pg-in-l { from { opacity: 0; transform: translateX(-56px); filter: blur(6px); } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* ======================================================= languages */ .i18n-wait main, .i18n-wait .dock { opacity: 0; } main, .dock { transition: opacity .25s ease; } .lang-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; flex: none; } .lang-btn .lang-flag { font-size: 20px; line-height: 1; } [data-dialect="android"] .lang-btn { width: 48px; height: 48px; border-radius: 24px; background: none; box-shadow: none; } .lang-list { display: grid; gap: 6px; grid-template-columns: 1fr; } @container (min-width: 560px) { .lang-list { grid-template-columns: 1fr 1fr; } } @container (min-width: 820px) { .lang-list { grid-template-columns: 1fr 1fr 1fr; } } .lang-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 14px 8px 12px; border-radius: 18px; background: var(--tray-group); text-align: left; color: var(--label); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background-color .2s; } .lang-opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--tint); } .lang-opt .lang-flag { font-size: 22px; line-height: 1; } .lang-text { flex: 1; min-width: 0; display: grid; } .lang-text b { font-size: 16px; font-weight: 620; letter-spacing: -.3px; } .lang-text span { font-size: 12.5px; color: var(--label-2); } .lang-text span:empty { display: none; } .lang-opt .check { --s: 18px; color: var(--tint); opacity: 0; transform: scale(.4); transition: opacity .2s, transform var(--dur-bouncy) var(--spring-bouncy); } .lang-opt[aria-checked="true"] .check { opacity: 1; transform: none; } [data-dialect="android"] .lang-opt { border-radius: 14px; background: var(--m-group); box-shadow: none; } [data-dialect="android"] .lang-opt[aria-checked="true"] { background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .lang-opt[aria-checked="true"] .check { color: inherit; } [data-dialect="android"] .lang-text b { font-weight: 500; letter-spacing: .1px; } @media (max-width: 400px) { .topbar-end { gap: 4px; } .lang-btn, .theme-btn, .nav-link { width: 40px; height: 40px; } } /* CJK: break headlines between phrases, not mid-word */ :lang(ja), :lang(zh), :lang(ko) { line-break: strict; } :lang(ja) :is(h1, h2, h3, .sheet-title, .lead, p), :lang(ko) :is(h1, h2, h3, .sheet-title) { word-break: auto-phrase; } :lang(ko) { word-break: keep-all; } /* hero blur: start exactly at the window edge and fade in from it, so the blur never pulls in whatever sits outside the page (a light sidebar showed up as a pale band down the left side) */ .hero { --off: calc(var(--gutter) + max(0px, (100vw - 1120px) / 2)); } .hd-blur { --fade: 14px; margin-left: calc(-1 * var(--off)); width: calc(var(--off) + 6px); } .hd-blur i { -webkit-mask-composite: source-in; mask-composite: intersect; } .hd-blur i:nth-child(1) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 0%, #000 30%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 0%, #000 30%); } .hd-blur i:nth-child(2) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 20%, #000 50%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 20%, #000 50%); } .hd-blur i:nth-child(3) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 40%, #000 72%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 40%, #000 72%); } .hd-blur i:nth-child(4) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 62%, #000 95%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 62%, #000 95%); } @media (min-width: 640px) { .hd-blur { --fade: 48px; width: calc(var(--off) + 100% + 10px); } .hd-blur i:nth-child(1) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 0%, #000 12%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 0%, #000 12%); } .hd-blur i:nth-child(2) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 6%, #000 24%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 6%, #000 24%); } .hd-blur i:nth-child(3) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 16%, #000 40%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 16%, #000 40%); } .hd-blur i:nth-child(4) { -webkit-mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 30%, #000 62%); mask: linear-gradient(to right, transparent 0, #000 var(--fade)), linear-gradient(to left, transparent 30%, #000 62%); } } .hero .hd-blur i { -webkit-mask-composite: source-in; mask-composite: intersect; } /* after the mask shorthands, which reset it */ /* phones: about 20% less room between sections */ @media (max-width: 639px) { .section { padding-top: 70px; padding-bottom: 13px; } #features.section { padding-top: 0; } .people-head, .stores > .wrap + .wrap.people-head { margin-top: 70px; } .stores > .wrap + .wrap { margin-top: 51px; } .footer { padding-top: 70px; } } /* hero: a short checklist instead of a paragraph, the CTA and tour link on one row */ .hero-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; font-size: clamp(16px, 1.9vw, 18px); letter-spacing: -.25px; color: var(--label); } .hero-checks li { display: flex; align-items: center; gap: 11px; min-height: 26px; } .hc-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--green, #34c759) 20%, transparent); color: var(--green, #34c759); --s: 13px; } .hc-tick i { --w: 700; } .hc-logos { display: inline-flex; align-items: center; margin-left: 2px; } .hc-logos > span { display: inline-flex; margin-left: -5px; border-radius: 28%; box-shadow: 0 0 0 2px var(--amb-base); } .hc-logos > span:first-child { margin-left: 0; } .hc-logos .btile { width: 26px; height: 26px; } .hc-more { margin-left: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 13px; background: var(--fill-3, rgba(120,120,128,.24)); color: var(--label-2); font: 600 12.5px/1 var(--font); cursor: pointer; } [data-dialect="android"] .hero-checks { letter-spacing: .1px; } [data-dialect="android"] .hc-tick { border-radius: 8px; background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .hc-logos .btile { border-radius: 7px; } .hero-actions { flex-wrap: nowrap; gap: 18px; margin-top: 30px; } .hero-actions .link { white-space: nowrap; } @media (max-width: 380px) { .hero-actions { gap: 12px; } .hero-actions .btn { padding-left: 18px; padding-right: 18px; } } .hd-nav .hd-expand { margin-left: 4px; } .hc-logos > span:empty { display: none; } /* full screen: Safari vs Proto vs bookmark */ .fs-compare { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 10px; margin: 6px 0 18px; } .fc { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; position: relative; } .fc-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; --s: 14px; } .fc.bad .fc-mark { background: #ff3b30; } .fc.good .fc-mark { width: 30px; height: 30px; border-radius: 50%; background: #34c759; --s: 17px; } .fc-phone { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 120px; aspect-ratio: 9 / 19; padding: 5px; border-radius: 18px; background: #0d0d10; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), 0 8px 22px -12px rgba(0,0,0,.5); overflow: hidden; } .fc.good .fc-phone { max-width: 140px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2), 0 0 0 2px #34c759, 0 14px 30px -14px rgba(0,0,0,.6); } .fc-app { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 12px 6px 6px; border-radius: 13px; background: #1c1c1f; min-height: 0; overflow: hidden; } .fc-bar { height: 4px; width: 40%; border-radius: 2px; background: rgba(255,255,255,.35); } .fc-card { height: 20%; border-radius: 6px; background: rgba(255,255,255,.12); } .fc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; flex: 1; } .fc-tiles i { border-radius: 5px; background: rgba(255,255,255,.08); } .fc-tabs { display: flex; justify-content: space-around; padding-top: 4px; } .fc-tabs i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255,255,255,.25); } .fc-url { height: 15%; margin: -5px -5px 4px; background: #3a3a3e; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; } .fc-url::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 18%; height: 26%; border-radius: 4px; background: #55555a; } .fc-tools { display: flex; justify-content: space-around; align-items: center; height: 11%; margin: 4px -5px -5px; background: #3a3a3e; } .fc-tools i { width: 8px; height: 8px; border-radius: 2px; background: #6b8cff; } .fc-white { height: 9%; margin: -5px -5px 0; background: #fff; } .fc-bookmark .fc-app { border-radius: 0 0 13px 13px; } .fc-bookmark .fc-tiles { margin-bottom: -30%; } .fc figcaption { display: grid; gap: 1px; font-size: 12.5px; line-height: 1.3; color: var(--label-2); } .fc figcaption b { font-size: 13.5px; color: var(--label); font-weight: 650; } .fc.good figcaption b { color: var(--label); } [data-dialect="android"] .fc-phone { border-radius: 16px; } /* quick view: demo label in the eyebrow, two coached steps */ .eyebrow-dot { opacity: .6; } .demo-tag { padding: 1px 7px; border-radius: 6px; background: var(--fill); color: var(--label-2); font-size: 11.5px; font-weight: 650; } .qv-coach { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 6px; } .qv-coach li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: var(--fill-4); opacity: .55; transition: opacity .3s, background .3s, transform .3s; } .qv-coach li.on { opacity: 1; background: color-mix(in srgb, var(--tint) 14%, transparent); transform: scale(1.01); } .qv-coach li.done { opacity: .7; } .qv-coach li > span:last-child { display: grid; gap: 1px; font-size: 13.5px; line-height: 1.35; color: var(--label-2); } .qv-coach b { color: var(--label); font-size: 15px; font-weight: 650; } .qc-n { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--fill); color: var(--label); font: 700 13px/1 var(--font); } .qv-coach li.on .qc-n { background: var(--tint); color: #fff; } .qv-coach li.done .qc-n { background: #34c759; color: #fff; font-size: 0; } .qv-coach li.done .qc-n::after { content: "✓"; font-size: 13px; } .coach-ring { animation: coach 1.6s ease-out infinite; } @keyframes coach { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tint) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } } [data-dialect="android"] .qv-coach li { border-radius: 16px; } [data-dialect="android"] .qv-coach li.on { background: var(--m-secondary-container); } /* exit gesture: demo menu sits under the intro */ .demo-menu-btn { margin-top: 12px; justify-self: start; width: auto; } /* languages: the list flows around the screenshot */ .lang-row { display: block; } .lang-row::after { content: ""; display: block; clear: both; } .lang-row > .phone { float: left; margin: 0 16px 8px 0; } .lang-row .lang-grid { display: block; } .lang-row .lang { display: inline-flex; margin: 0 6px 6px 0; vertical-align: top; } .demo-menu-btn { display: inline-flex; } /* phones: laurels in rows of 2, then 3 */ @media (max-width: 519px) { .award:nth-child(n+3) { flex-basis: 33.333%; } .award:nth-child(n+3) .laurel { width: 20px; height: 62px; } .award:nth-child(n+3) .award-score { font-size: 19px; } .award:nth-child(n+3) .award-name { font-size: 9.5px; letter-spacing: .3px; } } .fix-said-body mark { background: color-mix(in srgb, var(--tint) 26%, transparent); color: var(--label); border-radius: 4px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* FAQ: a quick answer under each question, readable before opening */ .faq .row-main { display: grid; gap: 3px; } .faq-quick { justify-self: start; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12.5px; font-weight: 650; background: var(--fill); color: var(--label-2); --s: 14px; } .faq-quick.no { background: color-mix(in srgb, #34c759 18%, transparent); color: #248a3d; } [data-theme="dark"] .faq-quick.no { color: #30d158; } .faq-quick.maybe { background: color-mix(in srgb, #ff9f0a 20%, transparent); color: #c56b00; } [data-theme="dark"] .faq-quick.maybe { color: #ffb340; } .fq-sep { opacity: .5; margin: 0 1px; } [data-dialect="android"] .faq-quick { border-radius: 8px; } /* desktop: pagination lines up with the phone's right edge, the full-screen button leads */ @media (min-width: 640px) { .hd-foot { width: var(--hw); justify-self: center; } .hd-nav { justify-self: end; } .hd-nav .hd-expand { order: -1; margin: 0 4px 0 0; } } @media (min-width: 640px) { .hd-foot { grid-template-columns: minmax(0, 1fr); } .hd-nav { justify-self: unsafe end; } .deck-caption { justify-self: unsafe center; } } .field-msg:empty { display: none; } .lang-row .lang-grid { align-content: normal; } /* align-content on a block makes it its own box, which stops the wrap */ @media (max-width: 459px) { .hero-actions { gap: 14px; } .hero-actions .btn { padding-left: 18px; padding-right: 20px; } .hero-actions .link { font-size: 15px; gap: 4px; } .hero { padding-bottom: 48px; } } @media (max-width: 459px) { .hero-actions .btn { flex: none; } .hero-actions .link { white-space: normal; min-width: 0; flex: 0 1 auto; text-align: left; line-height: 1.25; } } /* desktop hero: a bit shorter, so "What it does" starts above the fold */ @media (min-width: 640px) { .hero { min-height: min(calc(100dvh - 120px), 800px); padding-top: calc(var(--safe-top) + 84px); padding-bottom: 8px; } } /* the tour link sits under the button again */ .hero-actions, .hero-actions { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 14px; } .hero-actions .link { white-space: normal; } /* quick view tour: dim the sheet, cut a hole around the control, explain it in a bubble */ .qv-spot { position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity .3s; } .qv-spot.on { opacity: 1; } .qs-hole { position: absolute; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .58), 0 0 0 2px var(--tint), 0 0 24px 4px color-mix(in srgb, var(--tint) 45%, transparent); transition: left .45s cubic-bezier(.2,.9,.25,1), top .45s cubic-bezier(.2,.9,.25,1), width .45s cubic-bezier(.2,.9,.25,1), height .45s cubic-bezier(.2,.9,.25,1); animation: qs-pulse 1.8s ease-in-out infinite; } @keyframes qs-pulse { 50% { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .58), 0 0 0 4px var(--tint), 0 0 34px 8px color-mix(in srgb, var(--tint) 35%, transparent); } } .qs-tip { position: absolute; left: 18px; right: 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: center; padding: 16px 18px 17px; border-radius: 22px; background: #fff; color: #111; box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); } .qs-tip::before { content: ""; position: absolute; left: var(--ax, 50%); top: -8px; width: 18px; height: 18px; background: #fff; border-radius: 4px; transform: rotate(45deg); } .qs-tip.above::before { top: auto; bottom: -8px; } .qs-n { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: #fff; font: 700 13px/1 var(--font); } .qs-tip b { font-size: 19px; line-height: 1.2; font-weight: 700; letter-spacing: -.3px; } .qs-t { font-size: 15px; line-height: 1.38; color: #555; } [data-dialect="android"] .qs-tip { border-radius: 16px; background: var(--m-inverse-surface, #fff); color: var(--m-inverse-on-surface, #111); } [data-dialect="android"] .qs-t { color: inherit; opacity: .78; } [data-dialect="android"] .qs-tip::before { background: var(--m-inverse-surface, #fff); } /* ratings: the totals pill leads the section; all laurels on one row from tablet width */ .rt-stats-head { margin: 0 0 14px; justify-content: flex-start; } @media (min-width: 640px) { .awards { flex-wrap: nowrap; max-width: none; } .award, .award:nth-child(n+3) { flex: 1 1 0; min-width: 0; } } @media (min-width: 640px) and (max-width: 899px) { .award .laurel { width: 20px; height: 60px; } .award-score { font-size: 19px; } .award-name { font-size: 9.5px; letter-spacing: .3px; } } @media (min-width: 640px) { .hero { min-height: min(calc(100dvh - 190px), 760px); padding-top: calc(var(--safe-top) + 76px); } } @media (min-width: 640px) { .hero { min-height: 0; --hw: min(clamp(200px, 27vw, 300px), max(200px, calc((100dvh - 300px) / 2.05))); } } .deck-caption { display: none; } /* the slider speaks for itself */ /* ratings card: everything left-aligned, like the section heads */ .store-card { text-align: left; } .rt-title { margin-left: 0; margin-right: auto; text-align: left; } .awards { justify-content: flex-start; margin-left: 0; } .get-row { justify-items: start; text-align: left; } /* FAQ answers: a small picture under each */ .faq-a .fq-viz, .faq-a .fq-cant, .faq-a .fq-devices { margin: 14px 0 6px; } .fq-viz { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .fq-arrow { color: var(--label-3); --s: 16px; } .fqa-form { position: relative; display: grid; gap: 6px; width: 110px; padding: 12px; border-radius: 14px; background: var(--fill-3); } .fqa-form > i { height: 12px; border-radius: 5px; background: var(--fill); } .fqa-form > b { height: 16px; border-radius: 8px; background: var(--fill); } .fqa-x { position: absolute; inset: 0; display: grid; place-items: center; color: #ff3b30; --s: 34px; } .fqa-x i { --w: 600; } .fqa-open { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint); font-weight: 650; font-size: 14px; --s: 16px; } .fqf-file { position: relative; display: grid; place-items: center; width: 64px; height: 78px; border-radius: 10px; background: var(--fill-3); } .fqf-file .btile { width: 30px; height: 30px; } .fqf-lock { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #34c759; color: #fff; --s: 14px; } .fqf-line { width: 40px; border-top: 2px dashed var(--label-3); opacity: .6; } .fqf-kept { display: flex; align-items: center; gap: 8px; } .fqf-chip { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fill); color: var(--label-2); --s: 17px; } .fqf-thumb { width: 52px; aspect-ratio: 9 / 19.5; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px var(--bezel, #111), 0 6px 14px -8px rgba(0,0,0,.5); } .fqf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fq-cant { list-style: none; padding: 0; display: grid; gap: 8px; } .fq-cant li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fq-cant .chip { text-decoration: line-through; text-decoration-color: #ff3b30; text-decoration-thickness: 2px; } .fqc-why { font-size: 13.5px; color: var(--label-2); } .fq-all { margin-top: 4px; } .fq-devices { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; } .fq-devices figure { margin: 0; display: grid; justify-items: center; gap: 8px; } .fq-devices figcaption { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--label-2); --s: 13px; } .phone.xs { --pw: 74px; --bz: 2.5px; box-shadow: 0 0 0 2.5px var(--bezel), 0 10px 20px -10px rgba(0,0,0,.45); } .fqd-tab { display: grid; grid-template-columns: 26% 1fr; gap: 5px; width: 150px; aspect-ratio: 4 / 3; padding: 7px; border-radius: 12px; background: #f2f2f4; box-shadow: 0 0 0 5px var(--bezel, #111), 0 10px 20px -10px rgba(0,0,0,.45); } .fqd-tab.and { border-radius: 9px; width: 162px; aspect-ratio: 16 / 10; } .fqd-side { display: grid; align-content: start; gap: 4px; padding: 4px; border-radius: 6px; background: #e3e3e8; } .fqd-side i { height: 6px; border-radius: 3px; background: #c7c7cc; } .fqd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .fqd-grid i { border-radius: 5px; background: linear-gradient(160deg, #d9e6d3, #f0d9b5); } [data-theme="dark"] .fqd-tab { background: #1c1c1f; } [data-theme="dark"] .fqd-side { background: #2c2c2e; } [data-theme="dark"] .fqd-side i { background: #48484a; } /* tall screens: give the hero some air */ @media (min-width: 640px) and (min-height: 900px) { .hero { padding-top: calc(var(--safe-top) + clamp(84px, 12vh, 150px)); padding-bottom: clamp(8px, 6vh, 80px); } #features.section { margin-top: clamp(0px, 3vh, 40px); } } .faq-a .fq-viz, .faq-a .fq-cant, .faq-a .fq-devices, .faq-a .fq-all { margin: 0 16px 18px; opacity: 0; transform: translateY(-6px); transition: opacity .3s .05s, transform .3s .05s; } .faq-item.open .faq-a :is(.fq-viz, .fq-cant, .fq-devices, .fq-all) { opacity: 1; transform: none; } .faq-a .fq-cant { margin-bottom: 10px; } /* real tablet screenshots in a thin bezel */ .fqd-tab { display: block; padding: 0; overflow: hidden; background: #000; } .fqd-tab.ios { width: 96px; aspect-ratio: 825 / 1100; border-radius: 9px; } .fqd-tab.and { width: 170px; aspect-ratio: 1100 / 687; border-radius: 8px; } .fqd-tab img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ======================================== footer: links to the other pages */ .footer { flex-wrap: wrap; } .footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; font-size: 15px; font-weight: 600; letter-spacing: -.2px; } .footer-links a { color: var(--tint); min-height: 32px; display: inline-flex; align-items: center; } .footer-links a[aria-current="page"] { color: var(--label-2); } @media (max-width: 599px) { .footer-links { flex-basis: 100%; margin-left: 58px; } } /* ======================================== privacy: a calm page, the map of where things go as its picture */ .pv-hero { display: grid; gap: 40px; align-items: center; padding-top: calc(var(--safe-top) + 92px); padding-bottom: 8px; } @media (min-width: 900px) { .pv-hero { grid-template-columns: 1fr minmax(360px, .9fr); gap: 56px; min-height: min(100dvh, 820px); } } .pv-hero .hero-title { max-width: 12ch; font-size: clamp(38px, 5.4vw, 64px); } [data-dialect="android"] .pv-hero .hero-title { font-size: clamp(34px, 4.8vw, 56px); } .pv-hero .hero-note { max-width: 36em; line-height: 1.45; } /* the map: your phone on top; one wire to where the prototype lives, a cut one to us */ .pv-map { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; width: 100%; max-width: 440px; justify-self: center; margin: 0; } .pv-device { grid-column: 1 / -1; padding: 18px 18px 16px; border-radius: 30px; background: var(--glass-bg-strong); box-shadow: var(--glass-shadow), inset 0 0 0 .5px var(--glass-edge); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); } .pv-head { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.4px; } .pv-head b { font-weight: 650; } .pv-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 18px; background: var(--fill-3); color: var(--label); --s: 19px; } .pv-items { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; } .pv-items li { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: .5px solid var(--sep); color: var(--label-2); --s: 18px; } .pv-items li > span { display: grid; gap: 1px; min-width: 0; } .pv-items b { color: var(--label); font-size: 15px; font-weight: 600; letter-spacing: -.25px; } .pv-items li > span > span { font-size: 13px; letter-spacing: -.05px; } .pv-stays { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 11px 6px 9px; border-radius: 99px; background: var(--tint-soft); color: var(--tint); font-size: 13px; font-weight: 650; letter-spacing: -.1px; --s: 14px; } .pv-wire { position: relative; height: 54px; } .pv-wire::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tint); opacity: .55; } .pv-wire.to-us::before { background: none; border-left: 2px dashed var(--label-4); opacity: 1; width: 0; } .pv-pulse { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 4px var(--tint-soft); animation: pv-pulse 2.6s cubic-bezier(.45, 0, .3, 1) infinite; } @keyframes pv-pulse { 0% { transform: translateY(-4px); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 85%, 100% { transform: translateY(50px); opacity: 0; } } .pv-x { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 12px; background: var(--bg-elevated, #fff); box-shadow: inset 0 0 0 1px var(--label-4); color: var(--label-3); --s: 13px; } .pv-host, .pv-us { display: grid; align-content: start; gap: 4px; padding: 15px 15px 16px; border-radius: 24px; font-size: 13px; line-height: 1.35; letter-spacing: -.05px; color: var(--label-2); } .pv-host b, .pv-us b { color: var(--label); font-size: 15px; font-weight: 650; letter-spacing: -.3px; line-height: 1.25; } .pv-host { background: var(--group-bg); box-shadow: inset 0 0 0 .5px var(--glass-edge); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .pv-us { border: 1.5px dashed var(--label-4); } .pv-us b, .pv-us-icon { opacity: .75; } .pv-logos { display: flex; gap: 4px; margin-bottom: 6px; } .pv-us-icon { display: flex; margin-bottom: 6px; filter: grayscale(1); } .pv-us-icon .app-icon { width: 22px; height: 22px; border-radius: 27%; } [data-dialect="android"] .pv-device { border-radius: 28px; background: var(--m-surface-container); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .pv-host { border-radius: 20px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .pv-us { border-radius: 20px; } [data-dialect="android"] .pv-ico { border-radius: 12px; background: var(--m-secondary-container); color: var(--m-on-secondary-container); } [data-dialect="android"] .pv-items b, [data-dialect="android"] .pv-host b, [data-dialect="android"] .pv-us b, [data-dialect="android"] .pv-head b { font-weight: 500; letter-spacing: .1px; } @media (prefers-reduced-motion: reduce) { .pv-pulse { animation: none; top: 50%; margin-top: -4px; } } /* the short version, then the details as quiet rows */ .page-privacy .pv-short { padding-top: 40px; } .page-privacy .pv-short .ways { margin-top: 0; } .pv-list { display: grid; margin-top: 26px; max-width: 820px; } .pv-row { display: grid; grid-template-columns: 36px 1fr; gap: 16px; padding: 20px 0; border-top: .5px solid var(--sep); } .pv-row:last-child { border-bottom: .5px solid var(--sep); } .pv-row h3 { font-size: 17px; font-weight: 650; letter-spacing: -.4px; line-height: 36px; } .pv-row p { margin-top: 4px; font-size: 16px; line-height: 1.5; letter-spacing: -.25px; color: var(--label-2); max-width: 40em; text-wrap: pretty; } .pv-row p + p { margin-top: 10px; } .pv-row code, .pv-row p code { font-size: .92em; } [data-dialect="android"] .pv-row h3 { font-weight: 500; letter-spacing: .1px; } [data-dialect="android"] .pv-row p { letter-spacing: .15px; } .pv-steps { display: grid; gap: 12px; margin-top: 26px; max-width: 820px; counter-reset: pv; } @media (min-width: 760px) { .pv-steps { grid-template-columns: repeat(3, 1fr); } } .pv-step { display: grid; gap: 4px; padding: 18px 20px 20px; border-radius: 24px; background: var(--group-bg); font-size: 15px; line-height: 20px; letter-spacing: -.2px; color: var(--label-2); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .pv-step::before { counter-increment: pv; content: counter(pv); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 13px; background: var(--fill-3); color: var(--label); font-size: 13px; font-weight: 700; } .pv-step b { color: var(--label); font-size: 17px; font-weight: 650; letter-spacing: -.4px; line-height: 22px; } [data-dialect="android"] .pv-step { border-radius: 24px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .pv-step b { font-weight: 500; letter-spacing: .1px; } .pv-foot { margin-top: 18px; max-width: 46em; font-size: 15px; line-height: 1.45; letter-spacing: -.2px; color: var(--label-2); text-wrap: pretty; } .pv-contact { display: grid; grid-template-columns: 44px 1fr; gap: 16px; max-width: 820px; padding: 24px; border-radius: 30px; background: var(--group-bg); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); } .pv-contact .pv-ico { width: 44px; height: 44px; border-radius: 22px; --s: 22px; } .pv-contact h2 { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 44px; } .pv-contact p { margin-top: 2px; font-size: 17px; line-height: 1.45; letter-spacing: -.3px; color: var(--label-2); } [data-dialect="android"] .pv-contact { border-radius: 28px; background: var(--m-surface-container-low); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-dialect="android"] .pv-contact h2 { font-weight: 400; letter-spacing: 0; } .page-privacy .pv-detail .section-title { max-width: 18ch; } .page-privacy #contact { padding-top: clamp(56px, 8vw, 96px); } /* Variants & Switches (developers): a phone with the Live tray cycling through A, B and C */ .vs { display: grid; gap: 28px; margin-top: 28px; align-items: center; } @media (min-width: 900px) { .vs { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; } } .vs-visual { display: grid; justify-items: center; } .vs-list { display: grid; gap: 12px; } @media (min-width: 640px) { .vs-list { grid-template-columns: 1fr 1fr; } } .vs-list .way p code { font-family: var(--font-mono); font-size: .92em; } #variants .code-cards { margin-top: 16px; } .phone.vs-phone { --pw: clamp(232px, 62vw, 280px); } .vs-app { background: var(--bg-2) !important; } .vs-page { position: absolute; left: 7%; right: 7%; top: 11%; display: grid; gap: 7px; animation: vs-a 9s infinite; } .vs-page.pb { animation-name: vs-b; } .vs-page.pc { animation-name: vs-c; } .vs-page i { display: block; height: 12px; border-radius: 6px; background: var(--fill-2); } .vs-page .t { width: 58%; height: 18px; background: var(--label); opacity: .85; margin-bottom: 4px; } .vs-page .r { height: 30px; border-radius: 10px; background: var(--fill-3); } .vs-page .r.s { width: 70%; } .vs-page .btn { height: 26px; border-radius: 13px; background: var(--tint); margin-top: 6px; } .vs-page .steps { display: flex; gap: 5px; height: 6px; background: none; } .vs-page .steps b { flex: 1; border-radius: 3px; background: var(--fill-2); } .vs-page .steps b:first-child { background: var(--tint); } .vs-page .card { height: 74px; border-radius: 14px; background: var(--fill-3); } .vs-page .sheet { display: grid; gap: 6px; height: auto; padding: 10px; margin-top: 8px; border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 -6px 18px -8px rgba(0, 0, 0, .3); } .vs-page .sheet b { height: 10px; border-radius: 5px; background: var(--fill-2); } .vs-page .sheet b.s { width: 60%; } .vs-page .sheet b.btn { height: 22px; border-radius: 11px; background: var(--tint); margin: 0; } .vs-tray { position: absolute; left: 3%; right: 3%; bottom: 2.4%; display: grid; gap: 7px; padding: 12px 9px 10px; border-radius: 26px; background: var(--tray-bg); box-shadow: var(--tray-shadow); } .vs-desc { display: grid; gap: 4px; padding: 0 4px; } .vs-desc i { height: 6px; border-radius: 3px; background: var(--fill-2); } .vs-desc i.s { width: 62%; } .vs-chips { display: flex; gap: 4px; overflow: hidden; } .vs-chips span { flex: none; padding: 4px 8px; border-radius: 10px; background: var(--fill-3); font-size: 9.5px; font-weight: 650; color: var(--label); white-space: nowrap; } .vs-chips em { font-style: normal; font-weight: 500; color: var(--label-2); } /* three across, the fourth peeking: the strip scrolls on, however many variants there are */ .vs-tabs { display: flex; gap: 5px; align-items: stretch; overflow: hidden; } .vs-tab { position: relative; flex: 0 0 29.5%; display: grid; justify-items: center; gap: 4px; padding: 6px 0 5px; border-radius: 12px; background: var(--fill-3); } .vs-tab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent); animation: vs-a 9s infinite; } .vs-tab.tb::after { animation-name: vs-b; } .vs-tab.tc::after { animation-name: vs-c; } .vs-tab.td::after { display: none; } .vs-tab b { position: relative; z-index: 1; min-width: 14px; padding: 0 3px; border-radius: 5px; background: var(--label); color: var(--bg); font-size: 9px; line-height: 14px; text-align: center; } .vs-shot { position: relative; z-index: 1; width: 22px; height: 40px; border-radius: 5px; background: var(--bg-2); box-shadow: inset 0 0 0 .5px var(--thumb-edge); overflow: hidden; } .vs-shot::before { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 3px; border-radius: 2px; background: var(--label); opacity: .7; } .vs-shot.pa::after, .vs-shot.pb::after, .vs-shot.pc::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 4px; height: 5px; border-radius: 3px; background: var(--tint); } .vs-shot.pb::before { box-shadow: 0 7px 0 0 var(--fill-2), 0 14px 0 2px var(--fill-2); } .vs-shot.pc { background: linear-gradient(to bottom, var(--bg-2) 55%, var(--bg-elevated) 55%); } @keyframes vs-a { 0%, 30% { opacity: 1; } 33.3%, 97% { opacity: 0; } 100% { opacity: 1; } } @keyframes vs-b { 0%, 30% { opacity: 0; } 33.3%, 63.3% { opacity: 1; } 66.6%, 100% { opacity: 0; } } @keyframes vs-c { 0%, 63.3% { opacity: 0; } 66.6%, 97% { opacity: 1; } 100% { opacity: 0; } } [data-dialect="android"] .vs-tray { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; } [data-dialect="android"] .vs-tab, [data-dialect="android"] .vs-chips span { border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .vs-page, .vs-tab::after { animation: none; } .vs-page.pa, .vs-page.pc, .vs-tab.ta::after, .vs-tab.tc::after { opacity: 0; } }