Airbnb
MIT
Hospitality-focused design system with warm brand red, clean surfaces and accessible typography, built for global booking experiences
Published by Layout33 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install airbnbUI themeReskin shadcn or Layout UI components to match Airbnb.
npx shadcn add https://layout.design/r/airbnb/theme.json# layout.md — Airbnb Design System
---
## 0. Quick Reference
**Stack:** React/CSS-in-JS (Linaria atomic classes) + Bootstrap utilities. Token source: `extracted-css-vars` (388 properties, high confidence). Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
:root {
/* BRAND */
--palette-rausch: #FF385C; /* Primary brand red — hero CTAs */
--palette-bg-primary-core: #FF385C; /* Solid brand fill for primary buttons */
--palette-bg-secondary-core: linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%); /* Gradient CTA backgrounds */
--palette-product-rausch: #E00B41; /* Darker brand accent — icons, active states */
/* SURFACES */
--palette-bg-primary: #FFFFFF; /* Default page/card background */
--palette-bg-secondary: #F7F7F7; /* Subtle section background */
--palette-bg-quaternary: #F2F2F2; /* Input / chip background */
/* TEXT */
--palette-text-primary: #222222; /* Body, headings */
--palette-text-secondary: #6A6A6A; /* Captions, metadata */
--palette-text-primary-inverse: #FFFFFF; /* On dark/brand backgrounds */
--palette-text-primary-error: #C13515; /* Error messages */
--palette-text-legal: #428BFF; /* Links, legal text */
/* BORDERS */
--palette-border-secondary: #B0B0B0; /* Default input/card border */
--palette-border-tertiary: #DDDDDD; /* Dividers, subtle outlines */
/* STATUS */
--palette-spruce: #008A05; /* Success */
--palette-ondo: #E07912; /* Warning */
--palette-arches: #C13515; /* Error */
--palette-mykonou5: #428BFF; /* Info */
/* TYPOGRAPHY */
--typography-font-family-cereal-font-family: 'Airbnb Cereal VF','Circular',-apple-system,'BlinkMacSystemFont','Roboto','Helvetica Neue',sans-serif;
/* RADIUS */
--corner-radius-small8px-border-radius: 8px;
--corner-radius-large16px-border-radius: 16px;
--corner-radius-xxxlarge32px-border-radius: 32px; /* role_button pill */
/* SPACING */
--spacing-micro8px: 8px;
--spacing-micro12px: 12px;
--spacing-macro16px: 16px;
--spacing-macro24px: 24px;
--spacing-macro32px: 32px;
--spacing-macro64px: 64px;
/* ELEVATION */
--elevation-elevation0-box-shadow: 0px 0px 0px 1px #DDDDDD inset;
--elevation-elevation2-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),0px 2px 6px 0px rgba(0,0,0,0.04),0px 4px 8px 0px rgba(0,0,0,0.10);
--elevation-high-box-shadow: 0 8px 28px rgba(0,0,0,0.28);
/* MOTION */
--duration-fast: 0.1s;
--duration-base: 0.2s;
--duration-slow: 0.25s;
--motion-standard-curve-animation-timing-function: cubic-bezier(0.2,0,0,1);
}
```
<!-- Quick Reference truncated to fit the 75-line cap. See later sections for the full design system. -->
## 1. Design Direction & Philosophy
### Character & Aesthetic Intent
Airbnb's visual language is **warm, human, and confidently minimal**. The design system (DLS — Design Language System) prioritises functional clarity over decoration. Layouts breathe with generous whitespace, content is king, and UI chrome recedes to let photography and listing data lead.
The brand colour — "Rausch" (`#FF385C`) — is a vibrant coral-red applied **exclusively to primary actions and brand marks**. It never appears as a background wash on informational content. The gradient form (`linear-gradient(to right, #E61E4D, #E31C5F, #D70466)`) is the canonical CTA treatment; the flat `#FF385C` is used for solid fills (icons, small chips).
### Mood
- **Trustworthy but approachable** — clean greys (`#222222`, `#6A6A6A`) anchor text; no harsh black-on-white contrasts
- **Animated but purposeful** — the spring motion system (6 spring presets) signals polish without gimmickry; UI responds organically to interaction
- **Global-first** — variable font supports Latin, Cyrillic, Arabic, Hebrew, Devanagari, Thai, and Greek scripts from a single file
### What This Design Explicitly Rejects
- **Warm-toned backgrounds** — surfaces are cool-neutral grey or white; the `--palette-hapuna` (`#F5F1EA`) and `--palette-capiz` (`#F7F6F2`) beige tones appear only in editorial/Airbnb Plus contexts
- **Sharp corners on interactive elements** — buttons and role-buttons use 32px radius (pill) or 50% (circular icon buttons); never square
- **Dense information layouts** — the grid breathes; listing cards have consistent gutters; content is never crammed
- **Decorative type weights** — only 400 (book), 500 (medium), 600 (semibold), and 700 (bold) exist; no thin or light weights
- **Single-hue colour palettes** — the additional brand tiers (Plus: magenta/purple, Luxe: deep purple) are strictly product-line-specific and NEVER mixed into standard UI
---
## 2. Colour System
### Tier 1 — Primitives (Palette)
```css
/* ── GREY SCALE ── */
--palette-grey0: #FFFFFF;
--palette-grey100: #F7F7F7;
--palette-grey200: #F2F2F2;
--palette-grey300: #EBEBEB;
--palette-grey400: #DDDDDD;
--palette-grey500: #C1C1C1;
--palette-grey600: #8C8C8C;
--palette-grey700: #6C6C6C;
--palette-grey800: #515151;
--palette-grey900: #3F3F3F;
--palette-grey1000: #222222;
--palette-grey1100: #000000;
/* Named grey aliases (legacy brand names) */
--palette-white: #FFFFFF;
--palette-faint: #F7F7F7; /* lightest grey surface */
--palette-bebe: #EBEBEB; /* disabled backgrounds */
--palette-deco: #DDDDDD; /* dividers, disabled borders */
--palette-bobo: #B0B0B0; /* secondary borders */
--palette-foggy: #6A6A6A; /* secondary text */
--palette-hof: #222222; /* primary text */
--palette-black: #000000;
/* ── BRAND / RAUSCH (Airbnb red) ── */
--palette-rausch: #FF385C; /* Core brand red */
--palette-product-rausch: #E00B41; /* Darker brand accent */
--palette-rausch100: #FFF5F6;
--palette-rausch200: #FFEEF0;
--palette-rausch300: #FEE5E7;
--palette-rausch400: #FFD2D7;
--palette-rausch500: #FFABB6;
--palette-rausch600: #FF385C; /* = palette-rausch */
--palette-rausch700: #DA1249; /* Hover/active dark */
--palette-rausch800: #A21039;
--palette-rausch900: #732139;
--palette-rausch1000: #361A21;
/* ── PRODUCT LINE COLOURS ── */
--palette-plus: #92174D; /* Airbnb Plus magenta */
--palette-luxe: #460479; /* Airbnb Luxe purple */
--palette-arches: #C13515; /* Error / arches red */
--palette-arches2: #B32505; /* Error hover */
--palette-arches12: #FFF8F6; /* Error surface tint */
/* ── STATUS PRIMITIVES ── */
--palette-spruce: #008A05; /* Success green */
--palette-ondo: #E07912; /* Warning orange */
--palette-mykonou5: #428BFF; /* Info blue / legal links */
/* ── EXTENDED COLOUR SCALES ── */
/* Red */
--palette-red100: #FFF5F3; --palette-red200: #FFEFEC; --palette-red300: #FFE6E2;
--palette-red400: #FFD3CD; --palette-red500: #FFACA5; --palette-red600: #F84A43;
--palette-red700: #D7251C; --palette-red800: #A3150F; --palette-red900: #772320;
--palette-red1000: #381918;
/* Green */
--palette-green100: #F1FAF2; --palette-green200: #E6F6E9; --palette-green300: #DCF1E1;
--palette-green400: #C3E6CC; --palette-green500: #8DD19E; --palette-green600: #12A139;
--palette-green700: #038026; --palette-green800: #015F1A; --palette-green900: #104B20;
--palette-green1000: #112716;
/* Blue */
--palette-blue100: #F0F8FF; --palette-blue200: #E8F3FE; --palette-blue300: #DDEDFE;
--palette-blue400: #C6E0FE; --palette-blue500: #94C5FD; --palette-blue600: #318CF7;
--palette-blue700: #166BD8; --palette-blue800: #0D4DAA; --palette-blue900: #173F7F;
--palette-blue1000: #162339;
/* Orange */
--palette-orange100: #FEF6EC; --palette-orange200: #FDF0E1; --palette-orange300: #FDE8D4;
--palette-orange400: #FBD8BB; --palette-orange500: #F7B383; --palette-orange600: #EB6100;
--palette-orange700: #BE4900; --palette-orange800: #8F3400; --palette-orange900: #712A05;
--palette-orange1000: #371C10;
/* Purple */
--palette-purple100: #F7F6FF; --palette-purple200: #F3F1FF; --palette-purple300: #ECE9FE;
--palette-purple400: #DED9FE; --palette-purple500: #C2B9FE; --palette-purple600: #8C78FF;
--palette-purple700: #6E57E4; --palette-purple800: #503EB2; --palette-purple900: #413582;
--palette-purple1000: #221F38;
/* Magenta */
--palette-magenta100: #FDF5FB; --palette-magenta200: #FBEFF8; --palette-magenta300: #FAE6F5;
--palette-magenta400: #F5D3EC; --palette-magenta500: #EFADDE; --palette-magenta600: #E54EC1;
--palette-magenta700: #BD31A1; --palette-magenta800: #901E7C; --palette-magenta900: #6A255E;
--palette-magenta1000: #311B2D;
/* Beige (editorial / Luxe) */
--palette-beige100: #F7F6F2; --palette-beige200: #F4F2EC; --palette-beige300: #EEEBE5;
--palette-beige400: #DFDCD6; --palette-beige500: #C5C1BB; --palette-beige600: #8F8B87;
--palette-beige700: #6E6A66; --palette-beige800: #53514E; --palette-beige900: #413F3D;
--palette-beige1000: #232221;
/* Named editorial surfaces */
--palette-capiz: #F7F6F2; /* Airbnb Plus beige surface */
--palette-hapuna: #F5F1EA; /* Airbnb Luxe warm background */
```
### Tier 2 — Semantic Aliases
```css
/* ── BACKGROUND SEMANTICS ── */
--palette-bg-primary: #FFFFFF; /* Default app surface */
--palette-bg-primary-hover: #F7F7F7; /* Hovered default surface */
--palette-bg-primary-selected: #F7F7F7; /* Selected list item */
--palette-bg-primary-disabled: #F7F7F7; /* Disabled surface */
--palette-bg-primary-error: #FFF8F6; /* Error state tint */
--palette-bg-primary-inverse: #222222; /* Dark/inverse surface */
--palette-bg-primary-inverse-hover: #000000; /* Dark surface hover */
--palette-bg-primary-inverse-disabled: #DDDDDD; /* Dark surface disabled */
--palette-bg-primary-inverse-error: #C13515; /* Dark surface error */
--palette-bg-primary-inverse-error-hover: #B32505; /* Dark surface error hover */
--palette-bg-secondary: #F7F7F7; /* Secondary / sidebar surface */
--palette-bg-tertiary: #B0B0B0; /* Tertiary (e.g. skeleton) */
--palette-bg-tertiary-hover: #6A6A6A;
--palette-bg-tertiary-disabled: #EBEBEB;
--palette-bg-quaternary: #F2F2F2; /* Chip / badge background */
--palette-bg-quaternary-hover: #EBEBEB;
/* Brand CTA backgrounds */
--palette-bg-primary-core: #FF385C; /* Solid brand fill */
--palette-bg-primary-plus: #92174D; /* Plus solid fill */
--palette-bg-primary-luxe: #460479; /* Luxe solid fill */
--palette-bg-secondary-core: linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-bg-secondary-core-rtl: linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-bg-secondary-plus: linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-bg-secondary-plus-rtl: linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-bg-secondary-luxe: linear-gradient(to right,#59086E 0%,#460479 50%,#440589 100%);
--palette-bg-secondary-luxe-rtl: linear-gradient(to left,#59086E 0%,#460479 50%,#440589 100%);
/* Hover radial gradients (more saturated burst on hover) */
--palette-bg-secondary-core-hover: radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466 57.5%,#BD1E59 75%,#BD1E59 100%);
--palette-bg-secondary-plus-hover: radial-gradient(circle at center,#D70466 0%,#BD1E59 30%,#92174D 55%,#861453 72.5%,#6C0D63 90%,#6C0D63 100%);
--palette-bg-secondary-luxe-hover: radial-gradient(circle at center,#6C0D63 0%,#59086E 30%,#460479 55%,#440589 72.5%,#3B07BB 90%,#3B07BB 100%);
/* ── TEXT SEMANTICS ── */
--palette-text-primary: #222222; /* Default body text */
--palette-text-primary-hover: #000000; /* Text on hover */
--palette-text-primary-disabled: #DDDDDD; /* Disabled text */
--palette-text-primary-error: #C13515; /* Error text */
--palette-text-primary-error-hover: #B32505; /* Error text hover */
--palette-text-primary-inverse: #FFFFFF; /* Text on dark bg */
--palette-text-primary-core: linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%); /* Gradient brand text (clip-text technique) */
--palette-text-secondary: #6A6A6A; /* Metadata, captions */
--palette-text-secondary-disabled: #DDDDDD;
--palette-text-secondary-error: #C13515;
--palette-text-secondary-error-hover: #B32505;
--palette-text-legal: #428BFF; /* Legal links, info links */
--palette-text-link-disabled: #929292;
--palette-text-focused: #3F3F3F; /* Focused input text */
--palette-text-material-disabled: rgba(0,0,0,0.24); /* Material disabled overlay */
/* ── BORDER SEMANTICS ── */
--palette-border-primary: #222222; /* Strong border (e.g. focused input) */
--palette-border-primary-hover: #000000;
--palette-border-primary-disabled: #DDDDDD;
--palette-border-primary-inverse: #FFFFFF;
--palette-border-secondary: #B0B0B0; /* Default input/card border */
--palette-border-secondary-hover: #222222;
--palette-border-secondary-selected: #222222;
--palette-border-secondary-disabled: #EBEBEB;
--palette-border-secondary-error: #C13515;
--palette-border-tertiary: #DDDDDD; /* Dividers */
--palette-border-tertiary-hover: #000000;
--palette-border-tertiary-selected: #222222;
--palette-border-tertiary-error: #C13515;
--palette-border-tertiary-error-hover: #B32505;
--palette-border-quarternary: #8C8C8C; /* Subtle outlines */
/* ── ICON SEMANTICS ── */
--palette-icon-primary: #222222;
--palette-icon-primary-disabled: #DDDDDD;
--palette-icon-primary-hover: #000000;
--palette-icon-primary-error: #C13515;
--palette-icon-primary-error-hover: #B32505;
--palette-icon-primary-inverse: #FFFFFF;
--palette-icon-secondary: #6A6A6A;
--palette-icon-secondary-hover: #222222;
--palette-icon-secondary-selected: #222222;
--palette-icon-secondary-disabled: #F7F7F7;
--palette-icon-tertiary: #8C8C8C;
--palette-icon-error: #C13515;
--palette-icon-warning: #E07912;
--palette-icon-info: #428BFF;
--palette-icon-success: #008A05;
```
### Tier 3 — Accent / Brand Secondaries (Decorative / Illustration Use)
These appear in illustration accents, category tiles, and decorative backgrounds. **NEVER use as interactive UI colours.**
```css
--palette-product-rausch: #E00B41; /* Darker brand icon fill */
--palette-blue600: #318CF7; /* Illustration blue accent */
--palette-orange700: #BE4900; /* Illustration warm accent */
--palette-magenta600: #E54EC1; /* Illustration pink */
--palette-green600: #12A139; /* Illustration green */
--palette-purple700: #6E57E4; /* Illustration purple */
```
### Material / Frosted Glass Backgrounds
```css
--material-backgrounds-extra-thin-background-color: rgba(218,218,218,0.40);
--material-backgrounds-extra-thin-backdrop-filter: blur(8px) saturate(1);
--material-backgrounds-thin-background-color: rgba(240,240,240,0.50);
--material-backgrounds-thin-backdrop-filter: blur(36px) saturate(1.6);
--material-backgrounds-regular-background-color: rgba(250,250,250,0.72);
--material-backgrounds-regular-backdrop-filter: blur(24px) saturate(1.6);
--material-backgrounds-thick-background-color: rgba(240,240,240,0.86);
--material-backgrounds-thick-backdrop-filter: blur(12px) saturate(3.00);
--material-backgrounds-extra-thick-background-color: rgba(255,255,255,0.925);
--material-backgrounds-extra-thick-backdrop-filter: blur(16px) saturate(1.6);
```
### Brand Gradients (Full Set)
```css
--palette-rausch-gradient-linear-gradient: linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-rausch-gradient-linear-gradient-rtl: linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-rausch-gradient-radial-gradient: radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466 57.5%,#BD1E59 75%,#BD1E59 100%);
--palette-plus-gradient-linear-gradient: linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-plus-gradient-linear-gradient-rtl: linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-plus-gradient-radial-gradient: radial-gradient(circle at center,#D70466 0%,#BD1E59 30%,#92174D 55%,#861453 72.5%,#6C0D63 90%,#6C0D63 100%);
--palette-luxe-gradient-linear-gradient: linear-gradient(to right,#59086E 0%,#460479 50%,#440589 100%);
--palette-luxe-gradient-linear-gradient-rtl: linear-gradient(to left,#59086E 0%,#460479 50%,#440589 100%);
--palette-luxe-gradient-radial-gradient: radial-gradient(circle at center,#6C0D63 0%,#59086E 30%,#460479 55%,#440589 72.5%,#3B07BB 90%,#3B07BB 100%);
```
### Shadow Opacity Scale
```css
--palette-shadow50: rgba(0,0,0,0.04);
--palette-shadow100: rgba(0,0,0,0.08);
--palette-shadow150: rgba(0,0,0,0.12);
--palette-shadow200: rgba(0,0,0,0.135);
--palette-shadow250: rgba(0,0,0,0.18);
--palette-shadow300: rgba(0,0,0,0.20);
--palette-shadow350: rgba(0,0,0,0.28);
--palette-shadow600: rgba(0,0,0,0.60);
```
---
## 3. Typography System
**Font:** `Airbnb Cereal VF` — a variable-font (woff2-variations) with a single file covering weight range and separate files for Arabic, Cyrillic, Hebrew, Devanagari, Thai, and Greek scripts. All weights are achieved by varying the `font-weight` CSS property — no separate font-face per weight needed.
```css
--typography-font-family-cereal-font-family: 'Airbnb Cereal VF','Circular',-apple-system,'BlinkMacSystemFont','Roboto','Helvetica Neue',sans-serif;
/* Weight scale */
--typography-weight-book400: 400;
--typography-weight-medium500: 500;
--typography-weight-semibold600: 600;
--typography-weight-bold700: 700;
/* Letter-spacing */
--typography-tracking-normal-letter-spacing: normal;
--typography-tracking-wide-letter-spacing: 0.04em; /* Rarely used — uppercase labels only */
```
### Composite Typography Groups
| Token Group | font-size | line-height | font-weight | Usage |
|---|---|---|---|---|
| `display_72_74` | 4.5rem (72px) | 4.625rem (74px) | 600 | Hero splash text |
| `display_60_68` | 3.75rem (60px) | 4.25rem (68px) | 600 | Major section heads |
| `display_48_54` | 3rem (48px) | 3.375rem (54px) | 600 | Section display heads |
| `display_40_44` | 2.5rem (40px) | 2.75rem (44px) | 600 | Display/feature heads |
| `title_semibold_32_36` | 2rem (32px) | 2.25rem (36px) | 600 | Page titles |
| `title_semibold_26_30` | 1.625rem (26px) | 1.875rem (30px) | 600 | Section titles |
| `title_semibold_22_26` | 1.375rem (22px) | 1.625rem (26px) | 600 | Card / panel titles |
| `title_semibold_18_24` | 1.125rem (18px) | 1.5rem (24px) | 600 | Sub-section heads |
| `title_semibold_16_20` | 1rem (16px) | 1.25rem (20px) | 600 | UI titles |
| `title_semibold_14_18` | 0.875rem (14px) | 1.125rem (18px) | 600 | Small titles |
| `title_medium_18_24` | 1.125rem (18px) | 1.5rem (24px) | 500 | Medium-weight labels |
| `title_medium_16_20` | 1rem (16px) | 1.25rem (20px) | 500 | Medium-weight UI |
| `title_medium_14_18` | 0.875rem (14px) | 1.125rem (18px) | 500 | Medium-weight small (h3 element) |
| `subtitle_book_18_24` | 1.125rem (18px) | 1.5rem (24px) | 400 | Subtitles |
| `subtitle_book_16_22` | 1rem (16px) | 1.375rem (22px) | 400 | Body subtitles |
| `subtitle_book_14_18` | 0.875rem (14px) | 1.125rem (18px) | 400 | Small subtitles |
| `body_paragraph_18_28` | 1.125rem (18px) | 1.75rem (28px) | 400 | Long-form body text |
| `body_paragraph_16_24` | 1rem (16px) | 1.5rem (24px) | 400 | Standard paragraph |
| `body_paragraph_16_22` | 1rem (16px) | 1.375rem (22px) | 400 | Compact paragraph |
| `body_paragraph_14_20` | 0.875rem (14px) | 1.25rem (20px) | 400 | Body / listing copy |
| `body_18_24` | 1.125rem (18px) | 1.5rem (24px) | 400 | Body text |
| `body_16_20` | 1rem (16px) | 1.25rem (20px) | 400 | Standard UI body |
| `body_14_18` | 0.875rem (14px) | 1.125rem (18px) | 400 | Small body (dominant: 68 elements) |
| `body_12_16` | 0.75rem (12px) | 1rem (16px) | 400 | Caption / metadata |
| `body_11_15` | 0.6875rem (11px) | 0.9375rem (15px) | 400 | Micro labels |
| `caption_12_16` | 0.75rem (12px) | 1rem (16px) | 400 | Captions |
| `base_10_12` | 0.625rem (10px) | 0.75rem (12px) | 400 | Extra-small labels |
**Computed element styles (actual page):**
| Element | size | weight | line-height | Notes |
|---|---|---|---|---|
| `h1` | 28px | 700 | 40.04px | Listing page title |
| `h2` | 14px | 400 | 20.02px | Section label (unstyled h2 — content-driven) |
| `h3` | 14px | 500 | 18px | Category / support links |
| `body` / `link` | 14px | 400 | 20.02px | Navigation, default text |
| `caption span` | 12px | — | 16px | Price metadata |
| `listing title` | 13px | — | 16px | Card apartment label |
> **Note:** Airbnb uses heading tags semantically (for SEO/a11y) but styles them via CSS class composition — `h2` on the homepage renders at 14px/400 because it's a section category label, not a visual headline. Always apply the appropriate `--typography-titles-*` composite token via class, not by relying on heading element defaults.
---
## 4. Spacing & Layout
### Spacing Scale
```css
/* Micro spacing (component-level) */
--spacing-micro2px: 2px; /* Hairline gaps, focus ring offsets */
--spacing-micro4px: 4px; /* Tight icon/text gaps */
--spacing-micro8px: 8px; /* Default component padding unit */
--spacing-micro12px: 12px; /* Inner padding, small gaps */
--spacing-micro16px: 16px; /* Standard inner padding */
--spacing-micro24px: 24px; /* Large inner padding */
--spacing-micro32px: 32px; /* Extra-large inner padding */
/* Macro spacing (layout-level) */
--spacing-macro16px: 16px; /* Tight section gap */
--spacing-macro24px: 24px; /* Standard section gap */
--spacing-macro32px: 32px; /* Card grid gap */
--spacing-macro40px: 40px; /* Medium section vertical rhythm */
--spacing-macro48px: 48px; /* Section padding */
--spacing-macro64px: 64px; /* Large section divider */
--spacing-macro80px: 80px; /* Page section vertical padding */
```
### Border Radius Scale
```css
--corner-radius-tiny4px-border-radius: 4px; /* Tags, badges, small chips */
--corner-radius-small8px-border-radius: 8px; /* Cards, tooltips, dropdowns */
--corner-radius-medium12px-border-radius: 12px; /* Image cards */
--corner-radius-large16px-border-radius: 16px; /* Modals, large cards */
--corner-radius-xlarge20px-border-radius: 20px; /* Focus rings (::after pseudo) */
--corner-radius-xxlarge24px-border-radius: 24px; /* Sheets, large modals */
--corner-radius-xxlarge28px-border-radius: 28px; /* Panels */
--corner-radius-xxxlarge32px-border-radius: 32px; /* role_button pill shape (DOMINANT) */
/* Special cases (mined from computed styles) */
/* 50% — circular icon buttons (18 elements; e.g. map controls, icon-only buttons) */
/* 50px — search bar pill button (1 element; .siey6h7) */
```
> **Key insight:** The **32px radius** is the canonical pill for interactive role-button elements. **50% radius** is reserved for **circular icon-only buttons** (nav controls, map buttons). Do not apply 50% to rectangular buttons.
### Grid & Breakpoints
Airbnb uses an extremely granular responsive system with 60+ breakpoints (mined from media queries). The **canonical breakpoints** to implement:
| Breakpoint | Width | Description |
|---|---|---|
| Mobile S | 375px | Min iPhone target |
| Mobile | 744px | Tablet portrait threshold |
| Desktop S | 1128px | Standard desktop grid begins |
| Desktop M | 1440px | Wide desktop |
| Desktop L | 1760px | Ultra-wide / TV |
```css
/* Container widths */
.container-standard { max-width: 1760px; margin: 0 auto; }
.container-listing-grid { padding: 0 var(--spacing-macro24px); }
/* Listing card grid (inferred from digest + spacing tokens) */
.listing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-macro24px);
}
/* At 1128px+: 4-column grid */
@media (min-width: 1128px) {
.listing-grid { grid-template-columns: repeat(4, 1fr); }
}
/* At 744px–1127px: 3-column */
@media (min-width: 744px) and (max-width: 1127px) {
.listing-grid { grid-template-columns: repeat(3, 1fr); }
}
/* At 550px–743px: 2-column */
@media (min-width: 550px) and (max-width: 743px) {
.listing-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Below 550px: 1-column */
@media (max-width: 549px) {
.listing-grid { grid-template-columns: 1fr; }
}
```
### Layout Decision Rules
- **Flex** for nav bars, button groups, chip rows, icon+label pairs, and any horizontal linear arrangement
- **Grid** for listing card arrays, image galleries, and any 2D repeating layout
- **Flex row `justify-content: space-between`** for role-buttons (search bar pills)
- **Flex row `justify-content: flex-end`** for navigation (right-aligned auth controls)
- **Flex row `justify-content: center` + `align-items: center`** for icon buttons
- NEVER use absolute positioning for document flow layout; reserve for overlays, badges, and tooltips
---
## 5. Page Structure & Layout Patterns
> Data source: LAYOUT DIGEST + component inventory. No screenshots available. Rows marked **(inferred)** are derived from component patterns and standard Airbnb homepage structure; they are not visually confirmed.
### 5.1 Section Map
| # | Section | Layout Type | Approx. Height | Key Elements | Confirmed? |
|---|---|---|---|---|---|
| 1 | **Global Navigation / Header** | Flex row, `justify-content: space-between` | 80px | Logo (left), Search pill (center), Auth controls (right) | Confirmed (digest) |
| 2 | **Category Tab Bar** | Flex row, horizontal scroll, `overflow-x: scroll` | 84px | Icon + label tabs, active = `--palette-rausch700` color + medium weight | Confirmed (computed styles: tab element) |
| 3 | **Hero / Search** | Full-width, position relative | 200–400px | Full-bleed image or gradient, search bar overlay | Inferred |
| 4 | **Listing Card Grid** | CSS Grid, 1–4 columns responsive | Variable | Listing cards (image, title, price, rating, dates) | Inferred |
| 5 | **Destination / Inspiration Section** | Grid or horizontal scroll | ~400px | Editorial cards, `h2` at 22px (confirmed: font-size-xl element) | Inferred |
| 6 | **Popular Homes Section** | Grid, 4-up | ~500px | Listing cards, section `h2` at 14px–20px (confirmed mined) | Confirmed (mined) |
| 7 | **Hosting CTA** | Full-width, 2-column flex | ~500px | Image left, text + CTA right; CTA uses `--palette-bg-secondary-core` gradient | Inferred |
| 8 | **Footer** | 4-column grid → 1-column mobile | ~400px | `h3` nav links (14px/500), legal text, locale switcher | Confirmed (h3 mined from Support, Hosting, Airbnb labels) |
### 5.2 Layout Patterns
**Navigation (confirmed from digest):**
```
role_navigation → display: flex; flex-direction: row; justify-content: flex-end; align-items: center;
```
- Logo anchored left via `margin-right: auto` on a flex child
- Center search bar: absolute or flex-grow child
- Right auth cluster: flex row, gap `--spacing-micro8px`, items are circular icon buttons (50% radius) + a menu pill (32px radius)
**Category Tab Bar (confirmed from computed tab styles):**
```
tab → display: flex; flex-direction: row; align-items: center; padding: 0 0 0 5px; margin-bottom: 12px;
```
- Tabs scroll horizontally on mobile; no wrap
- Active tab: icon color transitions to `--palette-rausch700`, label weight upgrades from 400 → 500 (confirmed by `iconColorEnter` and `labelEnter` keyframes)
**Listing Card (inferred from grid signals + token patterns):**
- Aspect ratio image (typically 4:3 or 1:1 on mobile) with `border-radius: var(--corner-radius-large16px-border-radius)` or `--corner-radius-medium12px-border-radius`
- Title: `font-size: 14px; font-weight: 600;` (`title_semibold_14_18`)
- Metadata row: `font-size: 12px; color: var(--palette-text-secondary);`
- Price: `font-size: 14px; font-weight: 600;` with `/night` in secondary weight
- Heart wishlist button: circular, 50% radius, overlaid top-right
**Role-Button / Search Bar Pill (confirmed):**
```
role_button → display: flex; flex-direction: row; justify-content: space-between; align-items: center;
border-radius: var(--corner-radius-xxxlarge32px-border-radius); /* 32px */
box-shadow: var(--elevation-elevation0-box-shadow); /* inset 1px #DDDDDD */
```
### 5.3 Visual Hierarchy
1. **Brand gradient CTA** (`--palette-bg-secondary-core`) is the highest visual priority element — always above the fold on key conversion pages
2. **Section headings** use `title_semibold_22_26` or `title_semibold_18_24` — never styled with raw `<h2>` element defaults
3. **Listing imagery** is the dominant visual; UI chrome (borders, labels) is deliberately subtle
4. **Price** is the second most prominent listing attribute after the image
5. **Whitespace rhythm:** sections separated by `--spacing-macro64px` vertical padding; cards separated by `--spacing-macro24px` gap
6. Focus ring pattern: `box-shadow: 0 0 0 2px var(--palette-grey0), 0 0 0 4px var(--palette-grey1000)` — white inner ring + dark outer ring, universal across all interactive elements
### 5.4 Content Patterns
**Repeating card pattern:**
```
[full-bleed image]
[title — semibold 14px]
[metadata row — 12px secondary — star rating · host type]
[date range — 12px secondary]
[price — semibold 14px] [/night — regular 14px secondary]
```
**Section header pattern:**
```
[section label — semibold 22px or 16px]
[optional subtitle — book 14px secondary]
[optional "Show all" link — medium 14px primary]
```
**Footer link group pattern (confirmed from h3 mined styles):**
```
[h3 group label — medium 14px/18px — "Support", "Hosting", "Airbnb"]
[link list — book 14px/20px — palette-text-primary]
```
---
## 6. Component Patterns
### 6.1 Primary CTA Button (Gradient)
**Anatomy:** container `<button>` → text label (optional: leading icon, trailing icon)
**Token mappings:**
| State | background | color | border | cursor | transform |
|---|---|---|---|---|---|
| default | `--palette-bg-secondary-core` | `--palette-text-primary-inverse` | none | pointer | — |
| hover | `--palette-bg-secondary-core-hover` (radial) | `--palette-text-primary-inverse` | none | pointer | — |
| focus-visible | `--palette-bg-secondary-core` | `--palette-text-primary-inverse` | focus ring (2+4px) | pointer | — |
| active | `--palette-bg-secondary-core` | `--palette-text-primary-inverse` | none | pointer | scale(0.98) |
| disabled | `--palette-bg-primary-disabled` (#F7F7F7) | `--palette-text-primary-disabled` | none | not-allowed | — |
| loading | `--palette-bg-secondary-core` | transparent (spinner) | none | wait | — |
```tsx
import React, { ButtonHTMLAttributes } from 'react';
interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
loading?: boolean;
children: React.ReactNode;
}
export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
loading = false,
disabled = false,
children,
style,
...props
}) => {
const isDisabled = disabled || loading;
return (
<button
disabled={isDisabled}
style={{
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: '14px 24px',
borderRadius: 'var(--corner-radius-xxxlarge32px-border-radius)',
border: 'none',
fontFamily: 'var(--typography-font-family-cereal-font-family)',
fontSize: '16px',
fontWeight: 600,
lineHeight: '1.25rem',
letterSpacing: 'normal',
color: isDisabled
? 'var(--palette-text-primary-disabled)'
: 'var(--palette-text-primary-inverse)',
background: isDisabled
? 'var(--palette-bg-primary-disabled)'
: 'var(--palette-bg-secondary-core)',
cursor: isDisabled ? 'not-allowed' : 'pointer',
transition: `background var(--duration-slow) var(--motion-standard-curve-animation-timing-function),
transform var(--duration-fast) var(--motion-standard-curve-animation-timing-function)`,
outline: 'none',
WebkitFontSmoothing: 'antialiased',
...style,
}}
onMouseEnter={e => {
if (!isDisabled) {
(e.currentTarget as HTMLButtonElement).style.background =
'var(--palette-bg-secondary-core-hover)';
}
}}
onMouseLeave={e => {
if (!isDisabled) {
(e.currentTarget as HTMLButtonElement).style.background =
'var(--palette-bg-secondary-core)';
}
}}
onMouseDown={e => {
if (!isDisabled) {
(e.currentTarget as HTMLButtonElement).style.transform = 'scale(0.98)';
}
}}
onMouseUp={e => {
(e.currentTarget as HTMLButtonElement).style.transform = 'scale(1)';
}}
onFocus={e => {
e.currentTarget.style.boxShadow =
'0 0 0 2px var(--palette-grey0), 0 0 0 4px var(--palette-grey1000)';
}}
onBlur={e => {
e.currentTarget.style.boxShadow = 'none';
}}
{...props}
>
{loading ? (
<span aria-hidden="true" style={{ opacity: 0 }}>{children}</span>
) : children}
{loading && (
<span
role="status"
aria-label="Loading"
style={{
position: 'absolute',
width: '16px',
height: '16px',
border: '2px solid rgba(255,255,255,0.4)',
borderTopColor: 'var(--palette-text-primary-inverse)',
borderRadius: '50%',
animation: 'spin 0.8s linear infinite',
}}
/>
)}
</button>
);
};
```
---
### 6.2 Secondary / Ghost Button
**Anatomy:** `<button>` with inset border shadow, transparent background
| State | background | border (box-shadow) | color |
|---|---|---|---|
| default | transparent | `--elevation-elevation0-box-shadow` (1px #DDDDDD inset) | `--palette-text-primary` |
| hover | `--palette-bg-primary-hover` (#F7F7F7) | 1px #222222 inset | `--palette-text-primary-hover` |
| focus | transparent | 2+4px focus ring | `--palette-text-primary` |
| active | `--palette-bg-secondary` | 1px #222222 inset | `--palette-text-primary` |
| disabled | `--palette-bg-primary-disabled` | 1px #DDDDDD inset | `--palette-text-primary-disabled` |
---
### 6.3 Circular Icon Button
**Anatomy:** `<button>` → SVG icon. border-radius: 50%.
| State | background | color |
|---|---|---|
| default | `--palette-bg-quaternary` (#F2F2F2) | `--palette-text-primary` |
| hover | `--palette-bg-quaternary-hover` (#EBEBEB) | `--palette-text-primary-hover` |
| focus | `--palette-bg-quaternary` | focus ring |
| active | scale(0.96) via `.atm_nf_1cfmony_12haot9:active` | — |
| disabled | `--palette-bg-primary-disabled` | `--palette-text-primary-disabled` |
```tsx
export const IconButton: React.FC<{
icon: React.ReactNode;
label: string;
disabled?: boolean;
onClick?: () => void;
}> = ({ icon, label, disabled, onClick }) => (
<button
aria-label={label}
disabled={disabled}
onClick={onClick}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '40px',
height: '40px',
borderRadius: '50%',
border: 'none',
background: disabled ? 'var(--palette-bg-primary-disabled)' : 'var(--palette-bg-quaternary)',
color: disabled ? 'var(--palette-text-primary-disabled)' : 'var(--palette-text-primary)',
cursor: disabled ? 'not-allowed' : 'pointer',
transition: `background var(--duration-fast) var(--motion-standard-curve-animation-timing-function),
transform var(--duration-slow) var(--motion-standard-curve-animation-timing-function)`,
fontFamily: 'var(--typography-font-family-cereal-font-family)',
}}
onMouseEnter={e => {
if (!disabled) (e.currentTarget as HTMLButtonElement).style.background = 'var(--palette-bg-quaternary-hover)';
}}
onMouseLeave={e => {
if (!disabled) (e.currentTarget as HTMLButtonElement).style.background = 'var(--palette-bg-quaternary)';
}}
onMouseDown={e => {
if (!disabled) (e.currentTarget as HTMLButtonElement).style.transform = 'scale(0.96)';
}}
onMouseUp={e => { (e.currentTarget as HTMLButtonElement).style.transform = 'scale(1)'; }}
onFocus={e => {
e.currentTarget.style.boxShadow = '0 0 0 2px var(--palette-grey0), 0 0 0 4px var(--palette-grey1000)';
}}
onBlur={e => { e.currentTarget.style.boxShadow = 'none'; }}
>
{icon}
</button>
);
```
---
### 6.4 Text Input
**Anatomy:** wrapper `<div>` → `<label>` → `<input>` → optional error message
| State | border | background | label color |
|---|---|---|---|
| default | `--palette-border-secondary` (#B0B0B0) | `--palette-bg-primary` | `--palette-text-secondary` |
| hover | `--palette-border-secondary-hover` (#222222) | `--palette-bg-primary` | `--palette-text-primary` |
| focus | `--palette-border-primary` (#222222) 2px | `--palette-bg-primary` | `--palette-text-focused` |
| error | `--palette-border-secondary-error` (#C13515) | `--palette-bg-primary-error` | `--palette-text-primary-error` |
| disabled | `--palette-border-secondary-disabled` (#EBEBEB) | `--palette-bg-primary-disabled` | `--palette-text-primary-disabled` |
---
### 6.5 Navigation Item (Tab)
**Anatomy:** `<button role="tab">` → icon (SVG) → label text
```css
/* Inactive */
color: var(--palette-foggy); /* #6A6A6A */
font-weight: var(--typography-weight-book400);
border-bottom: 2px solid transparent;
/* Active — animated via keyframes iconColorEnter, labelEnter */
color: var(--palette-rausch700); /* #DA1249 */
font-weight: var(--typography-weight-medium500);
border-bottom: 2px solid var(--palette-rausch700);
```
| State | icon color | text color | weight | border-bottom |
|---|---|---|---|---|
| default | `--palette-foggy` | `--palette-foggy` | 400 | transparent |
| hover | `--palette-text-primary` | `--palette-text-primary` | 400 | transparent |
| active/selected | `--palette-rausch700` | `--palette-rausch700` | 500 | `--palette-rausch700` 2px |
| focus | ring (2+4px) | — | — | — |
| disabled | `--palette-text-primary-disabled` | `--palette-text-primary-disabled` | 400 | — |
---
### 6.6 Listing Card
**Anatomy:** container → image → wishlist button (overlay) → content area (title, metadata, price)
```tsx
export const ListingCard: React.FC<{
imageUrl: string;
title: string;
location: string;
dates: string;
price: string;
rating?: string;
wishlisted?: boolean;
}> = ({ imageUrl, title, location, dates, price, rating, wishlisted }) => (
<article
style={{
fontFamily: 'var(--typography-font-family-cereal-font-family)',
display: 'flex',
flexDirection: 'column',
gap: 'var(--spacing-micro8px)',
cursor: 'pointer',
}}
>
{/* Image + wishlist overlay */}
<div style={{ position: 'relative', borderRadius: 'var(--corner-radius-large16px-border-radius)', overflow: 'hidden', aspectRatio: '20/19' }}>
<img src={imageUrl} alt={title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<button
aria-label={wishlisted ? 'Remove from wishlist' : 'Save to wishlist'}
style={{
position: 'absolute', top: '12px', right: '12px',
background: 'none', border: 'none', cursor: 'pointer',
color: wishlisted ? 'var(--palette-rausch)' : 'rgba(0,0,0,0.5)',
filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))',
}}
>
♥
</button>
</div>
{/* Content */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-micro4px)' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
<span style={{ fontSize: '14px', fontWeight: 600, color: 'var(--palette-text-primary)', lineHeight: '1.125rem' }}>
{location}
</span>
{rating && (
<span style={{ fontSize: '14px', color: 'var(--palette-text-primary)', display: 'flex', gap: '4px' }}>
★ {rating}
</span>
)}
</div>
<span style={{ fontSize: '14px', color: 'var(--palette-text-secondary)', lineHeight: '1.125rem' }}>
{title}
</span>
<span style={{ fontSize: '14px', color: 'var(--palette-text-secondary)', lineHeight: '1.125rem' }}>
{dates}
</span>
<span style={{ fontSize: '14px', color: 'var(--palette-text-primary)', fontWeight: 600, lineHeight: '1.125rem', marginTop: 'var(--spacing-micro4px)' }}>
{price} <span style={{ fontWeight: 400 }}>night</span>
</span>
</div>
</article>
);
```
---
### 6.7 Search Bar Pill (Role-Button)
**Anatomy:** outer pill wrapper → [destination field] | [divider] | [check-in] | [divider] | [check-out/guests] | [search button (circular)]
```css
.search-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-radius: var(--corner-radius-xxxlarge32px-border-radius); /* 32px */
box-shadow: var(--elevation-elevation0-box-shadow); /* inset 1px #DDDDDD */
background: var(--palette-bg-primary);
padding: 0;
transition: box-shadow var(--duration-base) var(--motion-standard-curve-animation-timing-function);
}
.search-bar:hover {
box-shadow: var(--elevation-elevation2-box-shadow);
}
```
Search submit button: circular, **`border-radius: 50%`**, `background: var(--palette-bg-secondary-core)`, color white.
---
## 7. Elevation & Depth
Airbnb uses a 6-level elevation system plus legacy named shadows.
```css
/* ── NUMBERED ELEVATION SYSTEM (authoritative) ── */
--elevation-elevation0-box-shadow: 0px 0px 0px 1px #DDDDDD inset;
/* Usage: Default card outline, search bar resting state */
--elevation-elevation1-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 2px 4px 0px rgba(0,0,0,0.16);
/* Usage: Floating buttons, inline menus at rest */
--elevation-elevation2-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 2px 6px 0px rgba(0,0,0,0.04),
0px 4px 8px 0px rgba(0,0,0,0.10);
/* Usage: Hover state for cards, dropdowns opening */
--elevation-elevation3-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 8px 24px 0px rgba(0,0,0,0.10);
/* Usage: Dropdowns, context menus */
--elevation-elevation4-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 4px 8px 0px rgba(0,0,0,0.08),
0px 12px 30px 0px rgba(0,0,0,0.12);
/* Usage: Modals, drawers */
--elevation-elevation5-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 6px 8px 0px rgba(0,0,0,0.10),
0px 16px 56px 0px rgba(0,0,0,0.18);
/* Usage: Toasts, highest-priority overlays */
/* ── LEGACY NAMED SHADOWS ── */
--elevation-tertiary-box-shadow: 0 2px 4px rgba(0,0,0,0.18); /* Small floating elements */
--elevation-tertiary-border: 1px solid rgba(0,0,0,0.08);
--elevation-secondary-box-shadow: 0 6px 16px rgba(0,0,0,0.12); /* Panels */
--elevation-secondary-border: 1px solid rgba(0,0,0,0.04);
--elevation-primary-box-shadow: 0 6px 20px rgba(0,0,0,0.2); /* Prominent floating */
--elevation-primary-border: 1px solid rgba(0,0,0,0.04);
--elevation-high-box-shadow: 0 8px 28px rgba(0,0,0,0.28); /* Maximum depth */
--elevation-high-border: 1px solid rgba(0,0,0,0.04);
/* ── SHARP EDGE OVERLAY ── */
--elevation-sharp-edge-background: rgba(0,0,0,0.08); /* Pressed/active overlay on icon buttons */
```
### Z-Index Layering
```css
/* Derived from overlay and sheet patterns — no explicit z-index tokens extracted */
/* Recommended scale: */
--z-base: 0; /* Normal flow */
--z-sticky: 100; /* Sticky headers, category tabs */
--z-dropdown: 200; /* Dropdowns, tooltips */
--z-modal-overlay: 300; /* Modal backdrop (opacity: 0.4 per overlayEnterLinaria) */
--z-modal: 400; /* Modal content */
--z-toast: 500; /* Toast / snackbar */
--z-top: 600; /* Critical overlays (cookie banners) */
```
### Focus Ring
Universal focus treatment across all interactive elements:
```css
/* Applied via ::before or ::after pseudo on focus-visible */
box-shadow: 0 0 0 2px var(--palette-grey0), 0 0 0 4px var(--palette-grey1000);
/* White 2px inner ring + dark 4px outer ring */
/* Inverse contexts: */
box-shadow: 0 0 0 2px var(--palette-grey1000), 0 0 0 4px var(--palette-grey0);
```
---
## 8. Motion
### Timing Tokens
```css
/* ── DURATION ── */
--duration-fast: 0.1s; /* Micro-interactions: icon state change, focus ring */
--duration-base: 0.2s; /* Standard UI transitions: hover, dropdown open */
--duration-slow: 0.25s; /* Component transitions: button bg, card hover */
/* ── EASING CURVES ── */
--motion-standard-curve-animation-timing-function: cubic-bezier(0.2,0,0,1); /* Default — decelerate */
--motion-enter-curve-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1); /* Entering elements */
--motion-exit-curve-animation-timing-function: cubic-bezier(0.4,0,1,1); /* Exiting elements */
--motion-linear-curve-animation-timing-function: cubic-bezier(0,0,1,1); /* Opacity only */
/* ── SPRING SYSTEM (physics-based, use duration + easing together) ── */
/* Fast spring — quick settle, no bounce */
--motion-springs-fast-duration: 451.75ms;
--motion-springs-fast-easing: linear(0,0.186,0.465,0.682,0.822,0.905,0.951,0.976,0.990,0.996,1);
/* Standard spring — default interactive response */
--motion-springs-standard-duration: 583.77ms;
--motion-springs-standard-easing: linear(0,0.158,0.415,0.630,0.780,0.875,0.932,0.964,0.982,0.992,0.997,1);
/* Medium bounce — subtle overshoot (list items, cards entering) */
--motion-springs-medium-bounce-duration: 574.12ms;
--motion-springs-medium-bounce-easing: linear(0,0.171,0.479,0.750,0.926,1.015,1.044,1.042,1.029,1.015,1.005,1);
/* Fast bounce — quick snap with overshoot (selection, checkboxes) */
--motion-springs-fast-bounce-duration: 449.12ms;
--motion-springs-fast-bounce-easing: linear(0,0.255,0.643,0.906,1.021,1.044,1.030,1.012,1);
/* Slow spring — relaxed, large elements */
--motion-springs-slow-duration: 745.61ms;
--motion-springs-slow-easing: linear(0,0.173,0.441,0.658,0.802,0.891,0.942,0.971,0.987,0.995,1);
/* Slow bounce — gentle overshoot for large modals */
--motion-springs-slow-bounce-duration: 762.28ms;
--motion-springs-slow-bounce-easing: linear(0,0.172,0.481,0.752,0.928,1.016,1.044,1.042,1.029,1.015,1.005,1);
```
### When to Animate
| Trigger | Spring Preset | Duration | Notes |
|---|---|---|---|
| Button hover (bg change) | `ease` | `--duration-slow` (0.25s) | Simple property |
| Button press (scale) | `standard-curve` | `--duration-slow` | `transform: scale(0.25, ...)` |
| Dropdown / menu open | `fast` spring | 451ms | `slideFadeIn` pattern |
| Modal enter | `standard` spring | 583ms | `fadeEnter` + `slideUp` combined |
| Modal exit | `exit-curve` | 0.2s | Faster exit than enter |
| Sheet (bottom) enter | `medium-bounce` | 574ms | `dls_sheets_slideUp` |
| Category tab change | `standard` spring | 583ms | `iconColorEnter`, `labelEnter` |
| Card hover scale | `enter-curve` | 0.25s | Listing card photo zoom |
| Shimmer skeleton | linear | 1.5s | `shimmer-sweep` keyframe |
| Overlay enter (backdrop) | linear | 0.2s | `overlayEnterLinaria` → opacity 0.4 |
### When NOT to Animate
- NEVER animate `width` or `height` directly — use `transform: scale()` or `max-height` with grid-template-rows
- NEVER use CSS transitions on `display` property
- NEVER animate on `prefers-reduced-motion: reduce` — add `@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }`
- NEVER use durations > 750ms for UI interactions (only complex narrative animations exceed this)
---
## 9. Anti-Patterns & Constraints
1. **NEVER hardcode hex colour values in component code.**
→ Why it fails: When an AI agent writes `color: #FF385C` instead of `var(--palette-rausch)`, a future brand colour update requires a regex search across the codebase rather than a single token change. The agent also loses context about what the colour *means* (primary brand vs. error vs. accent), leading to the wrong value being used in the wrong context — e.g., using Rausch red as an error indicator when `--palette-arches` (#C13515) is the correct semantic error colour.
→ Do instead: Always reference `--palette-*` tokens. If a token doesn't exist yet, create one and document it in Appendix A.
2. **NEVER use `Inter`, `Roboto`, `Arial`, or system-ui as the primary font.**
→ Why it fails: AI agents default to `Inter` or system-ui when no font is specified. Airbnb's typeface is `Airbnb Cereal VF` — a custom variable font with Latin, Arabic, Cyrillic, Hebrew, Thai, Greek, and Devanagari variants. Using any other font destroys brand identity. The variable font also eliminates the need for multiple font-face declarations at different weights — a mistake AI agents often make.
→ Do instead: Always set `font-family: var(--typography-font-family-cereal-font-family)` on the root and never override it. The fallback chain (`Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif`) is already in the token.
3. **NEVER apply `border-radius: 8px` to interactive pill-shaped elements.**
→ Why it fails: AI agents pattern-match from generic Material/Bootstrap design systems and default to 8px corners. Airbnb's interactive buttons and role-buttons are pill
[Error generating layout.md: terminated]
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (208) */
--elevation-sharp-edge-background: rgba(0,0,0,0.08);
--palette-text-primary-hover: #000000;
--palette-icon-secondary-hover: #222222;
--palette-text-secondary: #6A6A6A;
--palette-border-secondary: #B0B0B0;
--palette-text-primary-disabled: #DDDDDD;
--palette-border-secondary-disabled: #EBEBEB;
--palette-icon-secondary-disabled: #F7F7F7;
--palette-text-primary-inverse: #FFFFFF;
--palette-text-primary-error: #C13515;
--palette-text-primary-error-hover: #B32505;
--palette-bg-primary-error: #FFF8F6;
--palette-capiz: #F7F6F2;
--palette-hapuna: #F5F1EA;
--palette-icon-info: #428BFF;
--palette-icon-warning: #E07912;
--palette-icon-success: #008A05;
--palette-bg-primary-core: #FF385C;
--palette-product-rausch: #E00B41;
--palette-bg-primary-plus: #92174D;
--palette-bg-primary-luxe: #460479;
--palette-bg-secondary-core: linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-bg-secondary-core-rtl: linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-bg-secondary-plus: linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-bg-secondary-plus-rtl: linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-bg-secondary-luxe: linear-gradient(to right,#59086E 0%,#460479 50%,#440589 100%);
--palette-bg-secondary-luxe-rtl: linear-gradient(to left,#59086E 0%,#460479 50%,#440589 100%);
--palette-bg-secondary-core-hover: radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466 57.5%,#BD1E59 75%,#BD1E59 100%);
--palette-bg-secondary-plus-hover: radial-gradient(circle at center,#D70466 0%,#BD1E59 30%,#92174D 55%,#861453 72.5%,#6C0D63 90%,#6C0D63 100%);
--palette-bg-secondary-luxe-hover: radial-gradient(circle at center,#6C0D63 0%,#59086E 30%,#460479 55%,#440589 72.5%,#3B07BB 90%,#3B07BB 100%);
--palette-bg-quaternary: #F2F2F2;
--palette-text-link-disabled: #929292;
--palette-text-focused: #3F3F3F;
--palette-text-material-disabled: rgba(0,0,0,0.24);
--palette-icon-tertiary: #8C8C8C;
--palette-shadow50: rgba(0,0,0,0.04);
--palette-shadow150: rgba(0,0,0,0.12);
--palette-shadow200: rgba(0,0,0,0.135);
--palette-shadow250: rgba(0,0,0,0.18);
--palette-shadow300: rgba(0,0,0,0.20);
--palette-shadow350: rgba(0,0,0,0.28);
--palette-shadow600: rgba(0,0,0,0.60);
--palette-grey500: #C1C1C1;
--palette-grey700: #6C6C6C;
--palette-grey800: #515151;
--palette-red100: #FFF5F3;
--palette-red200: #FFEFEC;
--palette-red300: #FFE6E2;
--palette-red400: #FFD3CD;
--palette-red500: #FFACA5;
--palette-red600: #F84A43;
--palette-red700: #D7251C;
--palette-red800: #A3150F;
--palette-red900: #772320;
--palette-red1000: #381918;
--palette-green100: #F1FAF2;
--palette-green200: #E6F6E9;
--palette-green300: #DCF1E1;
--palette-green400: #C3E6CC;
--palette-green500: #8DD19E;
--palette-green600: #12A139;
--palette-green700: #038026;
--palette-green800: #015F1A;
--palette-green900: #104B20;
--palette-green1000: #112716;
--palette-blue100: #F0F8FF;
--palette-blue200: #E8F3FE;
--palette-blue300: #DDEDFE;
--palette-blue400: #C6E0FE;
--palette-blue500: #94C5FD;
--palette-blue600: #318CF7;
--palette-blue700: #166BD8;
--palette-blue800: #0D4DAA;
--palette-blue900: #173F7F;
--palette-blue1000: #162339;
--palette-orange100: #FEF6EC;
--palette-orange200: #FDF0E1;
--palette-orange300: #FDE8D4;
--palette-orange400: #FBD8BB;
--palette-orange500: #F7B383;
--palette-orange600: #EB6100;
--palette-orange700: #BE4900;
--palette-orange800: #8F3400;
--palette-orange900: #712A05;
--palette-orange1000: #371C10;
--palette-purple100: #F7F6FF;
--palette-purple200: #F3F1FF;
--palette-purple300: #ECE9FE;
--palette-purple400: #DED9FE;
--palette-purple500: #C2B9FE;
--palette-purple600: #8C78FF;
--palette-purple700: #6E57E4;
--palette-purple800: #503EB2;
--palette-purple900: #413582;
--palette-purple1000: #221F38;
--palette-magenta100: #FDF5FB;
--palette-magenta200: #FBEFF8;
--palette-magenta300: #FAE6F5;
--palette-magenta400: #F5D3EC;
--palette-magenta500: #EFADDE;
--palette-magenta600: #E54EC1;
--palette-magenta700: #BD31A1;
--palette-magenta800: #901E7C;
--palette-magenta900: #6A255E;
--palette-magenta1000: #311B2D;
--palette-rausch100: #FFF5F6;
--palette-rausch200: #FFEEF0;
--palette-rausch300: #FEE5E7;
--palette-rausch400: #FFD2D7;
--palette-rausch500: #FFABB6;
--palette-rausch700: #DA1249;
--palette-rausch800: #A21039;
--palette-rausch900: #732139;
--palette-rausch1000: #361A21;
--palette-beige200: #F4F2EC;
--palette-beige300: #EEEBE5;
--palette-beige400: #DFDCD6;
--palette-beige500: #C5C1BB;
--palette-beige600: #8F8B87;
--palette-beige700: #6E6A66;
--palette-beige800: #53514E;
--palette-beige900: #413F3D;
--palette-beige1000: #232221;
--material-backgrounds-extra-thin-background-color: rgba(218,218,218,0.40);
--material-backgrounds-extra-thin-backdrop-filter: blur(8px) saturate(1);
--material-backgrounds-thin-background-color: rgba(240,240,240,0.50);
--material-backgrounds-thin-backdrop-filter: blur(36px) saturate(1.6);
--material-backgrounds-regular-background-color: rgba(250,250,250,0.72);
--material-backgrounds-regular-backdrop-filter: blur(24px) saturate(1.6);
--material-backgrounds-thick-background-color: rgba(240,240,240,0.86);
--material-backgrounds-thick-backdrop-filter: blur(12px) saturate(3.00);
--material-backgrounds-extra-thick-background-color: rgba(255,255,255,0.925);
--material-backgrounds-extra-thick-backdrop-filter: blur(16px) saturate(1.6);
--brand-surface-1: rgb(224, 11, 65); /* Brand surface, dominant on 1 element — e.g. "div" /* mined from computed styles */ */
--brand-mark-1: rgb(0, 102, 255); /* Brand mark fill on 1 svg shape — e.g. "path" /* mined from svg fill */ */
--palette-rausch: #FF385C;
--palette-bg-primary: #FFFFFF;
--palette-bg-secondary: #F7F7F7;
--palette-text-primary: #222222;
--palette-text-legal: #428BFF;
--palette-border-tertiary: #DDDDDD;
--palette-spruce: #008A05;
--palette-ondo: #E07912;
--palette-arches: #C13515;
--palette-mykonou5: #428BFF;
--palette-grey0: #FFFFFF;
--palette-grey100: #F7F7F7;
--palette-grey200: #F2F2F2;
--palette-grey300: #EBEBEB;
--palette-grey400: #DDDDDD;
--palette-grey600: #8C8C8C;
--palette-grey900: #3F3F3F;
--palette-grey1000: #222222;
--palette-grey1100: #000000;
--palette-white: #FFFFFF;
--palette-faint: #F7F7F7;
--palette-bebe: #EBEBEB;
--palette-deco: #DDDDDD;
--palette-bobo: #B0B0B0;
--palette-foggy: #6A6A6A;
--palette-hof: #222222;
--palette-black: #000000;
--palette-rausch600: #FF385C;
--palette-plus: #92174D;
--palette-luxe: #460479;
--palette-arches2: #B32505;
--palette-arches12: #FFF8F6;
--palette-beige100: #F7F6F2;
--palette-bg-primary-hover: #F7F7F7;
--palette-bg-primary-selected: #F7F7F7;
--palette-bg-primary-disabled: #F7F7F7;
--palette-bg-primary-inverse: #222222;
--palette-bg-primary-inverse-hover: #000000;
--palette-bg-primary-inverse-disabled: #DDDDDD;
--palette-bg-primary-inverse-error: #C13515;
--palette-bg-primary-inverse-error-hover: #B32505;
--palette-bg-tertiary: #B0B0B0;
--palette-bg-tertiary-hover: #6A6A6A;
--palette-bg-tertiary-disabled: #EBEBEB;
--palette-bg-quaternary-hover: #EBEBEB;
--palette-text-secondary-disabled: #DDDDDD;
--palette-text-secondary-error: #C13515;
--palette-text-secondary-error-hover: #B32505;
--palette-border-primary: #222222;
--palette-border-primary-hover: #000000;
--palette-border-primary-disabled: #DDDDDD;
--palette-border-primary-inverse: #FFFFFF;
--palette-border-secondary-hover: #222222;
--palette-border-secondary-selected: #222222;
--palette-border-secondary-error: #C13515;
--palette-border-tertiary-hover: #000000;
--palette-border-tertiary-selected: #222222;
--palette-border-tertiary-error: #C13515;
--palette-border-tertiary-error-hover: #B32505;
--palette-border-quarternary: #8C8C8C;
--palette-icon-primary: #222222;
--palette-icon-primary-disabled: #DDDDDD;
--palette-icon-primary-hover: #000000;
--palette-icon-primary-error: #C13515;
--palette-icon-primary-error-hover: #B32505;
--palette-icon-primary-inverse: #FFFFFF;
--palette-icon-secondary: #6A6A6A;
--palette-icon-secondary-selected: #222222;
--palette-icon-error: #C13515;
--elevation-tertiary-border: 1px solid rgba(0,0,0,0.08);
--elevation-secondary-border: 1px solid rgba(0,0,0,0.04);
--elevation-primary-border: 1px solid rgba(0,0,0,0.04);
--elevation-high-border: 1px solid rgba(0,0,0,0.04);
/* Typography (67) */
--elevation-high-box-shadow: 0 8px 28px rgba(0,0,0,0.28);
--elevation-primary-box-shadow: 0 6px 20px rgba(0,0,0,0.2);
--elevation-secondary-box-shadow: 0 6px 16px rgba(0,0,0,0.12);
--elevation-tertiary-box-shadow: 0 2px 4px rgba(0,0,0,0.18);
--elevation-elevation1-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),0px 2px 4px 0px rgba(0,0,0,0.16);
--elevation-elevation2-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),0px 2px 6px 0px rgba(0,0,0,0.04),0px 4px 8px 0px rgba(0,0,0,0.10);
--elevation-elevation3-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),0px 8px 24px 0px rgba(0,0,0,0.10);
--elevation-elevation4-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),0px 4px 8px 0px rgba(0,0,0,0.08),0px 12px 30px 0px rgba(0,0,0,0.12);
--elevation-elevation5-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),0px 6px 8px 0px rgba(0,0,0,0.10),0px 16px 56px 0px rgba(0,0,0,0.18);
--motion-springs-fast-easing: linear(0,0.18557241650572898,0.46530560393651493,0.6823338821577483,0.8223254801509006,0.9049744175651648,0.951288850000914,0.9763638545339052,0.9896118636450829,0.9964846505475399,1);
--motion-springs-standard-easing: linear(0,0.15794349142280711,0.4146686698630492,0.6303103850844771,0.78022756921… <0.2KB elided>;
--motion-springs-medium-bounce-easing: linear(0,0.17056804830171035,0.47921259292635127,0.749704997553311,0.9261583179716212,1.0149357719696455,1.0442328379057395,1.042269832870079,1.028981085732054,1.0152861473492045,1.0054622129208994,1);
--motion-springs-fast-bounce-easing: linear(0,0.25484239226416866,0.643483807710504,0.9061742021274407,1.0208040643586513,1.043750765143047,1.0303012036555117,1.0119725530453332,1);
--motion-springs-slow-easing: linear(0,0.1726495179466309,0.44139132340393467,0.6575338740242772,0.8021357455779029,0.890693569261087,0.9421755177398626,0.9710919896728034,0.9869420351097642,0.9954729340379553,1);
--motion-springs-slow-bounce-easing: linear(0,0.17157063121773947,0.4812770425544863,0.7518340186858384,0.9276145377206974,1.0155374835651005,1.0441834344763297,1.0418987538382922,1.028565879063093,1.0149848580762686,1.005322404392434,1);
--motion-standard-curve-animation-timing-function: cubic-bezier(0.2,0,0,1);
--motion-enter-curve-animation-timing-function: cubic-bezier(0.1,0.9,0.2,1);
--motion-exit-curve-animation-timing-function: cubic-bezier(0.4,0,1,1);
--motion-linear-curve-animation-timing-function: cubic-bezier(0,0,1,1);
--palette-text-primary-core: linear-gradient(to right,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-rausch-gradient-linear-gradient-rtl: linear-gradient(to left,#E61E4D 0%,#E31C5F 50%,#D70466 100%);
--palette-rausch-gradient-radial-gradient: radial-gradient(circle at center,#FF385C 0%,#E61E4D 27.5%,#E31C5F 40%,#D70466 57.5%,#BD1E59 75%,#BD1E59 100%);
--palette-plus-gradient-linear-gradient: linear-gradient(to right,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-plus-gradient-linear-gradient-rtl: linear-gradient(to left,#BD1E59 0%,#92174D 50%,#861453 100%);
--palette-plus-gradient-radial-gradient: radial-gradient(circle at center,#D70466 0%,#BD1E59 30%,#92174D 55%,#861453 72.5%,#6C0D63 90%,#6C0D63 100%);
--palette-luxe-gradient-linear-gradient: linear-gradient(to right,#59086E 0%,#460479 50%,#440589 100%);
--palette-luxe-gradient-linear-gradient-rtl: linear-gradient(to left,#59086E 0%,#460479 50%,#440589 100%);
--palette-luxe-gradient-radial-gradient: radial-gradient(circle at center,#6C0D63 0%,#59086E 30%,#460479 55%,#440589 72.5%,#3B07BB 90%,#3B07BB 100%);
--typography-font-family-cereal-font-family: 'Airbnb Cereal VF','Circular',-apple-system,'BlinkMacSystemFont','Roboto','Helvetica Neue',sans-serif;
--typography-special-display-medium_40_44-font-size: 2.5rem;
--typography-special-display-medium_40_44-line-height: 2.75rem;
--typography-caption-text_12_16-letter-spacing: normal;
--typography-titles-semibold_14_18-font-weight: 600;
--typography-special-display-medium_48_54-font-size: 3rem;
--typography-special-display-medium_48_54-line-height: 3.375rem;
--typography-special-display-medium_60_68-font-size: 3.75rem;
--typography-special-display-medium_60_68-line-height: 4.25rem;
--typography-special-display-medium_72_74-font-size: 4.5rem;
--typography-special-display-medium_72_74-line-height: 4.625rem;
--typography-body-text_14_18-font-size: 0.875rem;
--typography-body-text_18_24-font-size: 1.125rem;
--typography-caption-text_12_16-line-height: 1rem;
--typography-body-text_16_20-line-height: 1.25rem;
--typography-body-text_18_24-line-height: 1.5rem;
--typography-body-paragraphs-text_16_22-line-height: 1.375rem;
--typography-titles-semibold_22_26-line-height: 1.625rem;
--typography-titles-semibold_26_30-line-height: 1.875rem;
--typography-titles-semibold_32_36-font-size: 2rem;
--typography-titles-semibold_32_36-line-height: 2.25rem;
--typography-titles-medium_14_18-font-weight: 500;
--typography-subtitles-book_14_18-font-weight: 400;
--typography-body-paragraphs-text_18_28-line-height: 1.75rem;
--typography-body-text_11_15-font-size: 0.6875rem;
--typography-body-text_11_15-line-height: 0.9375rem;
--typography-caption-text_12_16-font-size: 0.75rem;
--typography-tracking-wide-letter-spacing: 0.04em;
--typography-base-extra-small10px-font-size: 0.625rem;
--font-size-xs: 12px; /* 6 elements — e.g. span "Jan 22 – 24", span ", ·", span "Business host" /* mined from computed styles */ */
--font-size-sm: 13px; /* 2 elements — e.g. span "Apartment in Prague", span "Apartment in Prague " /* mined from computed styles */ */
--font-size-md: 14px; /* 68 elements — e.g. h2 "Popular homes in Pra", h2 "Great hotels for you", h2 "Available next month" /* mined from computed styles */ */
--font-size-lg: 20px; /* 1 element — e.g. span "Popular homes in Pra" /* mined from computed styles */ */
--font-size-xl: 22px; /* 1 element — e.g. h2 "Inspiration for futu" /* mined from computed styles */ */
--font-weight-bold: 700; /* 2 elements — e.g. span ", ·", span ", ·" /* mined from computed styles */ */
--line-height-tight: 16px; /* 8 elements — e.g. span "Apartment in Prague", span "Jan 22 – 24", span ", ·" /* mined from computed styles */ */
--line-height-normal: 18px; /* 29 elements — e.g. h3 "Support", h3 "Hosting", h3 "Airbnb" /* mined from computed styles */ */
--line-height-loose: 20.02px; /* 29 elements — e.g. h2 "Popular homes in Pra", h2 "Great hotels for you", h2 "Available next month" /* mined from computed styles */ */
--typography-tracking-normal-letter-spacing: normal;
/* Spacing (27) */
--elevation-primary-border: 1px solid rgba(0,0,0,0.04);
--elevation-tertiary-border: 1px solid rgba(0,0,0,0.08);
--motion-springs-fast-source-mass: 1px;
--motion-springs-fast-source-damping: 35px;
--motion-springs-fast-source-stiffness: 300px;
--motion-springs-standard-source-damping: 26px;
--motion-springs-standard-source-stiffness: 175px;
--motion-springs-medium-bounce-source-damping: 18.5px;
--motion-springs-fast-bounce-source-damping: 22px;
--motion-springs-fast-bounce-source-stiffness: 250px;
--motion-springs-slow-source-damping: 20px;
--motion-springs-slow-source-stiffness: 100px;
--motion-springs-slow-bounce-source-damping: 14px;
--spacing-macro16px: 16px;
--spacing-macro24px: 24px;
--spacing-macro32px: 32px;
--spacing-macro40px: 40px;
--spacing-macro48px: 48px;
--spacing-macro64px: 64px;
--spacing-macro80px: 80px;
--spacing-micro2px: 2px;
--spacing-micro4px: 4px;
--spacing-micro8px: 8px;
--spacing-micro12px: 12px;
--spacing-micro16px: 16px;
--spacing-micro24px: 24px;
--spacing-micro32px: 32px;
/* Radius (10) */
--corner-radius-tiny4px-border-radius: 4px;
--corner-radius-small8px-border-radius: 8px;
--corner-radius-medium12px-border-radius: 12px;
--corner-radius-large16px-border-radius: 16px;
--corner-radius-xlarge20px-border-radius: 20px;
--corner-radius-xxlarge24px-border-radius: 24px;
--corner-radius-xxlarge28px-border-radius: 28px;
--corner-radius-xxxlarge32px-border-radius: 32px;
--radius-sm: 50%; /* 18 elements — e.g. button .l1ovpqvx, button .l1ovpqvx, button .l1ovpqvx "_" /* mined from computed styles */ */
--radius-md: 50px; /* 1 element — e.g. button .siey6h7 /* mined from computed styles */ */
/* Effects (28) */
--elevation-elevation0-box-shadow: 0px 0px 0px 1px #DDDDDD inset;
--motion-springs-fast-duration: 451.75438596491193ms;
--motion-springs-standard-duration: 583.7719298245607ms;
--motion-springs-medium-bounce-duration: 574.1228070175433ms;
--motion-springs-fast-bounce-duration: 449.12280701754327ms;
--motion-springs-slow-duration: 745.6140350877179ms;
--motion-springs-slow-bounce-duration: 762.2807017543847ms;
--typography-weight-book400: 400;
--typography-weight-medium500: 500;
--typography-weight-semibold600: 600;
--typography-weight-bold700: 700;
--elevation-elevation2-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 2px 6px 0px rgba(0,0,0,0.04),
0px 4px 8px 0px rgba(0,0,0,0.10);
--elevation-high-box-shadow: 0 8px 28px rgba(0,0,0,0.28);
--palette-shadow50: rgba(0,0,0,0.04);
--palette-shadow100: rgba(0,0,0,0.08);
--palette-shadow150: rgba(0,0,0,0.12);
--palette-shadow200: rgba(0,0,0,0.135);
--palette-shadow250: rgba(0,0,0,0.18);
--palette-shadow300: rgba(0,0,0,0.20);
--palette-shadow350: rgba(0,0,0,0.28);
--palette-shadow600: rgba(0,0,0,0.60);
--elevation-elevation1-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 2px 4px 0px rgba(0,0,0,0.16);
--elevation-elevation3-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 8px 24px 0px rgba(0,0,0,0.10);
--elevation-elevation4-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 4px 8px 0px rgba(0,0,0,0.08),
0px 12px 30px 0px rgba(0,0,0,0.12);
--elevation-elevation5-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.02),
0px 6px 8px 0px rgba(0,0,0,0.10),
0px 16px 56px 0px rgba(0,0,0,0.18);
--elevation-tertiary-box-shadow: 0 2px 4px rgba(0,0,0,0.18);
--elevation-secondary-box-shadow: 0 6px 16px rgba(0,0,0,0.12);
--elevation-primary-box-shadow: 0 6px 20px rgba(0,0,0,0.2);
/* Motion (696) */
----motion-dot-xefpb8: @keyframes dot-xefpb8 {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-xefpb8 */
----motion-dot-kkmion: @keyframes dot-kkmion {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-kkmion */
----motion-dot-pulse-18sbrvj: @keyframes dot-pulse-18sbrvj {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-pulse-18sbrvj */
----motion-overlayEnterLinaria-pxdfzy: @keyframes overlayEnterLinaria-pxdfzy {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-pxdfzy */
----motion-overlayLeave-16a97i2: @keyframes overlayLeave-16a97i2 {
0% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
100% { opacity: 0; }
}; /* @keyframes overlayLeave-16a97i2 */
----motion-fadeEnter-1yg1552: @keyframes fadeEnter-1yg1552 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1yg1552 */
----motion-dls_sheets_fadeIn-1yg1552: @keyframes dls_sheets_fadeIn-1yg1552 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1yg1552 */
----motion-dls_sheets_slideUp-1yg1552: @keyframes dls_sheets_slideUp-1yg1552 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1yg1552 */
----motion-fadeLeave-1f0cb0c: @keyframes fadeLeave-1f0cb0c {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1f0cb0c */
----motion-dls_sheets_fadeOut-1f0cb0c: @keyframes dls_sheets_fadeOut-1f0cb0c {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1f0cb0c */
----motion-dls_sheets_slideDown-1f0cb0c: @keyframes dls_sheets_slideDown-1f0cb0c {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1f0cb0c */
----motion-dls_sheets_slideDownOut-1f0cb0c: @keyframes dls_sheets_slideDownOut-1f0cb0c {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-1f0cb0c */
----motion-slideEnter-1qxmz00: @keyframes slideEnter-1qxmz00 {
0% { opacity: 0; transform: translate(0px, 100%); }
100% { opacity: 1; transform: none; }
}; /* @keyframes slideEnter-1qxmz00 */
----motion-fadeEnter-v8n6sz: @keyframes fadeEnter-v8n6sz {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-v8n6sz */
----motion-slideLeave-osd9gb: @keyframes slideLeave-osd9gb {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate(0px, 100%); }
}; /* @keyframes slideLeave-osd9gb */
----motion-fadeLeave-zj50hh: @keyframes fadeLeave-zj50hh {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-zj50hh */
----motion-animation-64e8c8: @keyframes animation-64e8c8 {
100% { background: var(--dls-shimmer-animation-… <0.4KB elided>; /* @keyframes animation-64e8c8 */
----motion-fadeEnter-14e8nj2: @keyframes fadeEnter-14e8nj2 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-14e8nj2 */
----motion-dls_sheets_fadeIn-14e8nj2: @keyframes dls_sheets_fadeIn-14e8nj2 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-14e8nj2 */
----motion-dls_sheets_slideUp-14e8nj2: @keyframes dls_sheets_slideUp-14e8nj2 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-14e8nj2 */
----motion-selectCheckSlideIn-um18ze: @keyframes selectCheckSlideIn-um18ze {
0% { opacity: 0; transform: translateX(5px); }
100% { opacity: 1; transform: translateX(0px); }
}; /* @keyframes selectCheckSlideIn-um18ze */
----motion-fadeEnter-1enl5jb: @keyframes fadeEnter-1enl5jb {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1enl5jb */
----motion-dls_sheets_fadeIn-1enl5jb: @keyframes dls_sheets_fadeIn-1enl5jb {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1enl5jb */
----motion-dls_sheets_slideUp-1enl5jb: @keyframes dls_sheets_slideUp-1enl5jb {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1enl5jb */
----motion-fadeEnter-1tpkh98: @keyframes fadeEnter-1tpkh98 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1tpkh98 */
----motion-dls_sheets_fadeIn-1tpkh98: @keyframes dls_sheets_fadeIn-1tpkh98 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1tpkh98 */
----motion-dls_sheets_slideUp-1tpkh98: @keyframes dls_sheets_slideUp-1tpkh98 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1tpkh98 */
----motion-fadeEnter-1w19nmi: @keyframes fadeEnter-1w19nmi {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1w19nmi */
----motion-dls_sheets_fadeIn-1w19nmi: @keyframes dls_sheets_fadeIn-1w19nmi {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1w19nmi */
----motion-dls_sheets_slideUp-1w19nmi: @keyframes dls_sheets_slideUp-1w19nmi {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1w19nmi */
----motion-fadeLeave-4yuzds: @keyframes fadeLeave-4yuzds {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-4yuzds */
----motion-dls_sheets_fadeOut-4yuzds: @keyframes dls_sheets_fadeOut-4yuzds {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-4yuzds */
----motion-dls_sheets_slideDown-4yuzds: @keyframes dls_sheets_slideDown-4yuzds {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-4yuzds */
----motion-dls_sheets_slideDownOut-4yuzds: @keyframes dls_sheets_slideDownOut-4yuzds {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-4yuzds */
----motion-fadeEnter-p8713q: @keyframes fadeEnter-p8713q {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-p8713q */
----motion-dls_sheets_fadeIn-p8713q: @keyframes dls_sheets_fadeIn-p8713q {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-p8713q */
----motion-dls_sheets_slideUp-p8713q: @keyframes dls_sheets_slideUp-p8713q {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-p8713q */
----motion-fadeLeave-1e47hz0: @keyframes fadeLeave-1e47hz0 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1e47hz0 */
----motion-dls_sheets_fadeOut-1e47hz0: @keyframes dls_sheets_fadeOut-1e47hz0 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1e47hz0 */
----motion-dls_sheets_slideDown-1e47hz0: @keyframes dls_sheets_slideDown-1e47hz0 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1e47hz0 */
----motion-overlayEnterLinaria-1rfwvvw: @keyframes overlayEnterLinaria-1rfwvvw {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-1rfwvvw */
----motion-overlayLeave-y4c503: @keyframes overlayLeave-y4c503 {
0% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
100% { opacity: 0; }
}; /* @keyframes overlayLeave-y4c503 */
----motion-fadeEnter-o73q5: @keyframes fadeEnter-o73q5 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-o73q5 */
----motion-dls_sheets_fadeIn-o73q5: @keyframes dls_sheets_fadeIn-o73q5 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-o73q5 */
----motion-dls_sheets_slideUp-o73q5: @keyframes dls_sheets_slideUp-o73q5 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-o73q5 */
----motion-appear-yighpa: @keyframes appear-yighpa {
0% { transform: scale(0); }
100% { transform: scale(1); }
}; /* @keyframes appear-yighpa */
----motion-dot-hbljjd: @keyframes dot-hbljjd {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-hbljjd */
----motion-slide-up-from-bottom_source_screen_in-9ao5ww: @keyframes slide-up-from-bottom_source_screen_in-9ao5ww {
0% { opacity: var(-… <0.5KB elided>; /* @keyframes slide-up-from-bottom_source_screen_in-9ao5ww */
----motion-slide-up-from-bottom_source_screen_out-jzqanh: @keyframes slide-up-from-bottom_source_screen_out-jzqanh {
0% { opacity: var(… <0.5KB elided>; /* @keyframes slide-up-from-bottom_source_screen_out-jzqanh */
----motion-bouncyDot-zxetnh: @keyframes bouncyDot-zxetnh {
100% { transform: translateY(3px); }
0% { transform: translateY(3px); }
50% { transform: translateY(-3px); }
}; /* @keyframes bouncyDot-zxetnh */
----motion-slideFadeIn-1r1xoms: @keyframes slideFadeIn-1r1xoms {
0% { opacity: 0; transform: translateY(-14px); }
80% { opacity: 1; }
100% { transform: translateY(0px); }
}; /* @keyframes slideFadeIn-1r1xoms */
----motion-p4-p5-transition_fadeIn-1fnq5v1: @keyframes p4-p5-transition_fadeIn-1fnq5v1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes p4-p5-transition_fadeIn-1fnq5v1 */
----motion-animation-c2c750-1yw67tx: @keyframes animation-c2c750-1yw67tx {
100% { outline-offset: -3px; }
}; /* @keyframes animation-c2c750-1yw67tx */
----motion-animation-166954-aadivm: @keyframes animation-166954-aadivm {
0% { outline-width: 12px; }
}; /* @keyframes animation-166954-aadivm */
----motion-overlayEnterLinaria-kpasom: @keyframes overlayEnterLinaria-kpasom {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-kpasom */
----motion-fade-in-eg4ss1: @keyframes fade-in-eg4ss1 {
0% { opacity: 0; }
18% { opacity: 1; }
}; /* @keyframes fade-in-eg4ss1 */
----motion-flip-card-1j2p20z: @keyframes flip-card-1j2p20z {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(90deg); }
100% { transform: rotateY(180deg); }
}; /* @keyframes flip-card-1j2p20z */
----motion-show-back-1a8bvjc: @keyframes show-back-1a8bvjc {
0% { opacity: 0; }
100% { opacity: 100; }
}; /* @keyframes show-back-1a8bvjc */
----motion-fadeEnter-uj5v4q: @keyframes fadeEnter-uj5v4q {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-uj5v4q */
----motion-dls_sheets_fadeIn-uj5v4q: @keyframes dls_sheets_fadeIn-uj5v4q {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-uj5v4q */
----motion-dls_sheets_slideUp-uj5v4q: @keyframes dls_sheets_slideUp-uj5v4q {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-uj5v4q */
----motion-transition-ibfqd4: @keyframes transition-ibfqd4 {
0% { height: var(--container_height-from); width: var(--container_width-from); }
100% { height: var(--container_height-to); width: var(--container_width-to); }
}; /* @keyframes transition-ibfqd4 */
----motion-fade-in-du3k5w: @keyframes fade-in-du3k5w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-du3k5w */
----motion-wave-efu7zy: @keyframes wave-efu7zy {
0% { transform: translateY(0px); }
25% { transform: translateY(3px); }
75% { transform: translateY(-3px); }
100% { transform: translateY(0px); }
}; /* @keyframes wave-efu7zy */
----motion-dot-efu7zy: @keyframes dot-efu7zy {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-efu7zy */
----motion-wave-129drur: @keyframes wave-129drur {
0% { transform: translateY(0px); }
25% { transform: translateY(3px); }
75% { transform: translateY(-3px); }
100% { transform: translateY(0px); }
}; /* @keyframes wave-129drur */
----motion-dot-129drur: @keyframes dot-129drur {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-129drur */
----motion-growExit: @keyframes growExit {
0% { transform: scale(1, 1); }
100% { transform: scale(0.05, 1); }
}; /* @keyframes growExit */
----motion-growEnter-og1l4d: @keyframes growEnter-og1l4d {
0% { transform: scale(0.05, 1); }
100% { transform: scale(1, 1); }
}; /* @keyframes growEnter-og1l4d */
----motion-growExit-w6ru9x: @keyframes growExit-w6ru9x {
0% { transform: scale(1, 1); }
100% { transform: scale(0.05, 1); }
}; /* @keyframes growExit-w6ru9x */
----motion-fadeEnter-qzowjs: @keyframes fadeEnter-qzowjs {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-qzowjs */
----motion-dls_sheets_fadeIn-qzowjs: @keyframes dls_sheets_fadeIn-qzowjs {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-qzowjs */
----motion-dls_sheets_slideUp-qzowjs: @keyframes dls_sheets_slideUp-qzowjs {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-qzowjs */
----motion-fadeEnter-7r4o8i: @keyframes fadeEnter-7r4o8i {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-7r4o8i */
----motion-dls_sheets_fadeIn-7r4o8i: @keyframes dls_sheets_fadeIn-7r4o8i {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-7r4o8i */
----motion-dls_sheets_slideUp-7r4o8i: @keyframes dls_sheets_slideUp-7r4o8i {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-7r4o8i */
----motion-fadeLeave-ioj5y1: @keyframes fadeLeave-ioj5y1 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-ioj5y1 */
----motion-dls_sheets_fadeOut-ioj5y1: @keyframes dls_sheets_fadeOut-ioj5y1 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-ioj5y1 */
----motion-dls_sheets_slideDown-ioj5y1: @keyframes dls_sheets_slideDown-ioj5y1 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-ioj5y1 */
----motion-dls_sheets_slideDownOut-ioj5y1: @keyframes dls_sheets_slideDownOut-ioj5y1 {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-ioj5y1 */
----motion-blurFade-6uamq9: @keyframes blurFade-6uamq9 {
0% { filter: blur(4px); }
100% { filter: blur(0px); }
}; /* @keyframes blurFade-6uamq9 */
----motion-scaleDown-6uamq9: @keyframes scaleDown-6uamq9 {
0% { transform: scale(1.1); }
100% { transform: scale(1); }
}; /* @keyframes scaleDown-6uamq9 */
----motion-scaleUp-6uamq9: @keyframes scaleUp-6uamq9 {
0% { transform: scale(1); opacity: 1; }
100% { opacity: 1; transform: scale(1.1); }
}; /* @keyframes scaleUp-6uamq9 */
----motion-fadeOut-2s4zqw: @keyframes fadeOut-2s4zqw {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeOut-2s4zqw */
----motion-clip-path-ilmvgq: @keyframes clip-path-ilmvgq {
0% { clip-path: var(--clip-path_from,inset(0% 12% round 30px)); }
100% { clip-path: var(--clip-path_to,inset(0% 0% round 30px)); }
}; /* @keyframes clip-path-ilmvgq */
----motion-scale-ofmfty: @keyframes scale-ofmfty {
0% { scale: var(--scale_from,0.85 0.85); }
100% { scale: var(--scale_to,1 1); }
}; /* @keyframes scale-ofmfty */
----motion-radial-progress-spin-b97gu9: @keyframes radial-progress-spin-b97gu9 {
0% { transform: rotate(-90deg); }
100% { transform: rotate(270deg); }
}; /* @keyframes radial-progress-spin-b97gu9 */
----motion-slide-up-from-bottom_source_screen_in-18bc7sc: @keyframes slide-up-from-bottom_source_screen_in-18bc7sc {
0% { opacity: var(… <0.5KB elided>; /* @keyframes slide-up-from-bottom_source_screen_in-18bc7sc */
----motion-slide-up-from-bottom_source_screen_out-8b227r: @keyframes slide-up-from-bottom_source_screen_out-8b227r {
0% { opacity: var(… <0.5KB elided>; /* @keyframes slide-up-from-bottom_source_screen_out-8b227r */
----motion-overlayEnterLinaria-1bkk1ov: @keyframes overlayEnterLinaria-1bkk1ov {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-1bkk1ov */
----motion-overlayLeave-i8mkhu: @keyframes overlayLeave-i8mkhu {
0% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
100% { opacity: 0; }
}; /* @keyframes overlayLeave-i8mkhu */
----motion-fadeEnter-11s6t7h: @keyframes fadeEnter-11s6t7h {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-11s6t7h */
----motion-dls_sheets_fadeIn-11s6t7h: @keyframes dls_sheets_fadeIn-11s6t7h {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-11s6t7h */
----motion-dls_sheets_slideUp-11s6t7h: @keyframes dls_sheets_slideUp-11s6t7h {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-11s6t7h */
----motion-fadeLeave-1s0ahwe: @keyframes fadeLeave-1s0ahwe {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1s0ahwe */
----motion-dls_sheets_fadeOut-1s0ahwe: @keyframes dls_sheets_fadeOut-1s0ahwe {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1s0ahwe */
----motion-dls_sheets_slideDown-1s0ahwe: @keyframes dls_sheets_slideDown-1s0ahwe {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1s0ahwe */
----motion-dls_sheets_slideDownOut-1s0ahwe: @keyframes dls_sheets_slideDownOut-1s0ahwe {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-1s0ahwe */
----motion-fadeEnter-3wlsei: @keyframes fadeEnter-3wlsei {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-3wlsei */
----motion-dls_sheets_fadeIn-3wlsei: @keyframes dls_sheets_fadeIn-3wlsei {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-3wlsei */
----motion-dls_sheets_slideUp-3wlsei: @keyframes dls_sheets_slideUp-3wlsei {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-3wlsei */
----motion-flipScale-1ksp31u: @keyframes flipScale-1ksp31u {
0% { scale: 1; }
30% { scale: 0.85; }
100% { scale: 1; }
}; /* @keyframes flipScale-1ksp31u */
----motion-fadeIn-1vkzpf1: @keyframes fadeIn-1vkzpf1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1vkzpf1 */
----motion-fadeEnter-v7bpk9: @keyframes fadeEnter-v7bpk9 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-v7bpk9 */
----motion-dls_sheets_fadeIn-v7bpk9: @keyframes dls_sheets_fadeIn-v7bpk9 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-v7bpk9 */
----motion-dls_sheets_slideUp-v7bpk9: @keyframes dls_sheets_slideUp-v7bpk9 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-v7bpk9 */
----motion-fadeEnter-htcu4: @keyframes fadeEnter-htcu4 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-htcu4 */
----motion-overlayEnterLinaria-1vyzu7t: @keyframes overlayEnterLinaria-1vyzu7t {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-1vyzu7t */
----motion-fadeEnter-qy63k4: @keyframes fadeEnter-qy63k4 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-qy63k4 */
----motion-dls_sheets_fadeIn-qy63k4: @keyframes dls_sheets_fadeIn-qy63k4 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-qy63k4 */
----motion-dls_sheets_slideUp-qy63k4: @keyframes dls_sheets_slideUp-qy63k4 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-qy63k4 */
----motion-overlayEnterLinaria-ws4pzl: @keyframes overlayEnterLinaria-ws4pzl {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-ws4pzl */
----motion-fadeIn-exe9gd: @keyframes fadeIn-exe9gd {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-exe9gd */
----motion-fadeOut-n8z2pw: @keyframes fadeOut-n8z2pw {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeOut-n8z2pw */
----motion-radial-progress-spin-156pa27: @keyframes radial-progress-spin-156pa27 {
0% { transform: rotate(-90deg); }
100% { transform: rotate(270deg); }
}; /* @keyframes radial-progress-spin-156pa27 */
----motion-fadeEnter-1v1mc22: @keyframes fadeEnter-1v1mc22 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1v1mc22 */
----motion-dls_sheets_fadeIn-1v1mc22: @keyframes dls_sheets_fadeIn-1v1mc22 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1v1mc22 */
----motion-dls_sheets_slideUp-1v1mc22: @keyframes dls_sheets_slideUp-1v1mc22 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1v1mc22 */
----motion-dls_sheets_fadeOut-12ha075: @keyframes dls_sheets_fadeOut-12ha075 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-12ha075 */
----motion-dls_sheets_slideDown-12ha075: @keyframes dls_sheets_slideDown-12ha075 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-12ha075 */
----motion-overlayEnterLinaria-1tavve1: @keyframes overlayEnterLinaria-1tavve1 {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-1tavve1 */
----motion-overlayLeave-1d489n1: @keyframes overlayLeave-1d489n1 {
0% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
100% { opacity: 0; }
}; /* @keyframes overlayLeave-1d489n1 */
----motion-outerAnimationHeader: @keyframes outerAnimationHeader {
0% { grid-template-rows: 0fr; }
100% { grid-template-rows: 1fr; }
}; /* @keyframes outerAnimationHeader */
----motion-outerAnimationHeaderExit-en3o3a: @keyframes outerAnimationHeaderExit-en3o3a {
0% { grid-template-rows: 1fr; }
100% { grid-template-rows: 0fr; }
}; /* @keyframes outerAnimationHeaderExit-en3o3a */
----motion-enter-fade: @keyframes enter-fade {
0% { transform: var(--microphone-inner_transform,translateY(0)); opacity: 0; }
100% { transform: translateY(0px); opacity: 1; }
}; /* @keyframes enter-fade */
----motion-enter-slide: @keyframes enter-slide {
0% { transform: var(--microphone-inner_transform,translateY(0)); }
100% { transform: translateY(0px); }
}; /* @keyframes enter-slide */
----motion-exit-fade: @keyframes exit-fade {
0% { transform: translateY(0px); opacity: 1; visibility: visible; }
100% { transform: var(--microphone-inner_transform,translateY(0)); opacity: 0; visibility: hidden; }
}; /* @keyframes exit-fade */
----motion-exit-slide: @keyframes exit-slide {
0% { transform: translateY(0px); visibility: visible; }
100% { transform: var(--microphone-inner_transform,translateY(0)); visibility: hidden; }
}; /* @keyframes exit-slide */
----motion-overlayEnterLinaria-shq1tw: @keyframes overlayEnterLinaria-shq1tw {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-shq1tw */
----motion-opacityFade-197wp56: @keyframes opacityFade-197wp56 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes opacityFade-197wp56 */
----motion-animation-2f1d84-1cii13c: @keyframes animation-2f1d84-1cii13c {
40% { transform: translateX(-30px); ani… <0.4KB elided>; /* @keyframes animation-2f1d84-1cii13c */
----motion-carousel-item_fade_in-1wobrr0: @keyframes carousel-item_fade_in-1wobrr0 {
0% { opacity: var(--carousel-item_… <0.2KB elided>; /* @keyframes carousel-item_fade_in-1wobrr0 */
----motion-carousel-item_fade_in-1wb22vu: @keyframes carousel-item_fade_in-1wb22vu {
0% { opacity: var(--carousel-item_… <0.2KB elided>; /* @keyframes carousel-item_fade_in-1wb22vu */
----motion-new-msg_new_msg_fade_in-14fp9w6: @keyframes new-msg_new_msg_fade_in-14fp9w6 {
0% { opacity: var(--new-msg_new_… <0.2KB elided>; /* @keyframes new-msg_new_msg_fade_in-14fp9w6 */
----motion-new-msg_new_msg_slide_up_minimal-14fp9w6: @keyframes new-msg_new_msg_slide_up_minimal-14fp9w6 {
0% { translate: var(--new-msg_new_msg_slide_up_minimal_from,0 25px); }
100% { translate: var(--new-msg_new_msg_slide_up_minimal_to,0 0); }
}; /* @keyframes new-msg_new_msg_slide_up_minimal-14fp9w6 */
----motion-new-msg_new_msg_slide_up-14fp9w6: @keyframes new-msg_new_msg_slide_up-14fp9w6 {
0% { translate: var(--new-msg_n… <0.2KB elided>; /* @keyframes new-msg_new_msg_slide_up-14fp9w6 */
----motion-new-msg_new_msg_fade_in-d5ffvs: @keyframes new-msg_new_msg_fade_in-d5ffvs {
0% { opacity: var(--new-msg_new_m… <0.2KB elided>; /* @keyframes new-msg_new_msg_fade_in-d5ffvs */
----motion-new-msg_new_msg_slide_up_minimal-d5ffvs: @keyframes new-msg_new_msg_slide_up_minimal-d5ffvs {
0% { translate: var(--new-msg_new_msg_slide_up_minimal_from,0 25px); }
100% { translate: var(--new-msg_new_msg_slide_up_minimal_to,0 0); }
}; /* @keyframes new-msg_new_msg_slide_up_minimal-d5ffvs */
----motion-remove-msg_remove_msg_fade_out-1x23a14: @keyframes remove-msg_remove_msg_fade_out-1x23a14 {
0% { opacity: var(--remov… <0.2KB elided>; /* @keyframes remove-msg_remove_msg_fade_out-1x23a14 */
----motion-new-msg_profile_img_expand-xrinmi: @keyframes new-msg_profile_img_expand-xrinmi {
0% { scale: var(--new-msg_profile_img_expand_from,0.25 0.25); }
100% { scale: var(--new-msg_profile_img_expand_to,1 1); }
}; /* @keyframes new-msg_profile_img_expand-xrinmi */
----motion-new-msg_profile_img_fade_out-18wvrs4: @keyframes new-msg_profile_img_fade_out-18wvrs4 {
0% { opacity: var(--new-msg… <0.2KB elided>; /* @keyframes new-msg_profile_img_fade_out-18wvrs4 */
----motion-new-msg_profile_img_shrink-18wvrs4: @keyframes new-msg_profile_img_shrink-18wvrs4 {
0% { scale: var(--new-msg_profile_img_shrink_from,1 1); }
100% { scale: var(--new-msg_profile_img_shrink_to,0.75 0.75); }
}; /* @keyframes new-msg_profile_img_shrink-18wvrs4 */
----motion-scroll-to-bottom-button_button_enter_slide-wvmdy: @keyframes scroll-to-bottom-button_button_enter_slide-wvmdy {
0% { opacity: v… <0.5KB elided>; /* @keyframes scroll-to-bottom-button_button_enter_slide-wvmdy */
----motion-carousel-item_fade_in-13urvx: @keyframes carousel-item_fade_in-13urvx {
0% { opacity: var(--carousel-item_f… <0.2KB elided>; /* @keyframes carousel-item_fade_in-13urvx */
----motion-carousel-item_fade_out-1k9sdw: @keyframes carousel-item_fade_out-1k9sdw {
0% { opacity: var(--carousel-item_… <0.2KB elided>; /* @keyframes carousel-item_fade_out-1k9sdw */
----motion-bouncyDot-1hujwl5: @keyframes bouncyDot-1hujwl5 {
100% { transform: translateY(3px); }
0% { transform: translateY(3px); }
50% { transform: translateY(-3px); }
}; /* @keyframes bouncyDot-1hujwl5 */
----motion-fadeEnter-1awwwrw: @keyframes fadeEnter-1awwwrw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1awwwrw */
----motion-fadeLeave-sahdre: @keyframes fadeLeave-sahdre {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-sahdre */
----motion-bouncyDot-tqwov0: @keyframes bouncyDot-tqwov0 {
100% { transform: translateY(3px); }
0% { transform: translateY(3px); }
50% { transform: translateY(-3px); }
}; /* @keyframes bouncyDot-tqwov0 */
----motion-fadeEnter-10u9rvr: @keyframes fadeEnter-10u9rvr {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-10u9rvr */
----motion-dls_sheets_fadeIn-10u9rvr: @keyframes dls_sheets_fadeIn-10u9rvr {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-10u9rvr */
----motion-dls_sheets_slideUp-10u9rvr: @keyframes dls_sheets_slideUp-10u9rvr {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-10u9rvr */
----motion-fadeEnter-zf0gka: @keyframes fadeEnter-zf0gka {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-zf0gka */
----motion-dls_sheets_fadeIn-zf0gka: @keyframes dls_sheets_fadeIn-zf0gka {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-zf0gka */
----motion-dls_sheets_slideUp-zf0gka: @keyframes dls_sheets_slideUp-zf0gka {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-zf0gka */
----motion-slideEnter2-s3c03d: @keyframes slideEnter2-s3c03d {
0% { transform: translate(0px, 100%); opacity: 1; }
100% { transform: none; opacity: 1; }
}; /* @keyframes slideEnter2-s3c03d */
----motion-fadeEnter-s3c03d: @keyframes fadeEnter-s3c03d {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-s3c03d */
----motion-dls_sheets_fadeIn-s3c03d: @keyframes dls_sheets_fadeIn-s3c03d {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-s3c03d */
----motion-dls_sheets_slideUp-s3c03d: @keyframes dls_sheets_slideUp-s3c03d {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-s3c03d */
----motion-slideLeave-1x1tg16: @keyframes slideLeave-1x1tg16 {
0% { transform: none; opacity: 1; }
100% { transform: translate(0px, 100%); opacity: 1; }
}; /* @keyframes slideLeave-1x1tg16 */
----motion-fadeLeave-1x1tg16: @keyframes fadeLeave-1x1tg16 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1x1tg16 */
----motion-dls_sheets_fadeOut-1x1tg16: @keyframes dls_sheets_fadeOut-1x1tg16 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1x1tg16 */
----motion-dls_sheets_slideDown-1x1tg16: @keyframes dls_sheets_slideDown-1x1tg16 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1x1tg16 */
----motion-dls_sheets_slideDownOut-1x1tg16: @keyframes dls_sheets_slideDownOut-1x1tg16 {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-1x1tg16 */
----motion-fadeEnter-14qzldw: @keyframes fadeEnter-14qzldw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-14qzldw */
----motion-dls_sheets_fadeIn-14qzldw: @keyframes dls_sheets_fadeIn-14qzldw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-14qzldw */
----motion-dls_sheets_slideUp-14qzldw: @keyframes dls_sheets_slideUp-14qzldw {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-14qzldw */
----motion-fadeEnter-z10332: @keyframes fadeEnter-z10332 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-z10332 */
----motion-dls_sheets_fadeIn-z10332: @keyframes dls_sheets_fadeIn-z10332 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-z10332 */
----motion-dls_sheets_slideUp-z10332: @keyframes dls_sheets_slideUp-z10332 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-z10332 */
----motion-fadeEnter-bg5ap3: @keyframes fadeEnter-bg5ap3 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-bg5ap3 */
----motion-dls_sheets_fadeIn-bg5ap3: @keyframes dls_sheets_fadeIn-bg5ap3 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-bg5ap3 */
----motion-dls_sheets_slideUp-bg5ap3: @keyframes dls_sheets_slideUp-bg5ap3 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-bg5ap3 */
----motion-fadeEnter-1xiek0o: @keyframes fadeEnter-1xiek0o {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1xiek0o */
----motion-dls_sheets_fadeIn-1xiek0o: @keyframes dls_sheets_fadeIn-1xiek0o {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1xiek0o */
----motion-dls_sheets_slideUp-1xiek0o: @keyframes dls_sheets_slideUp-1xiek0o {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1xiek0o */
----motion-fadeEnter-x1b059: @keyframes fadeEnter-x1b059 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-x1b059 */
----motion-dls_sheets_slideUp-x1b059: @keyframes dls_sheets_slideUp-x1b059 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-x1b059 */
----motion-enter-rn19qw: @keyframes enter-rn19qw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes enter-rn19qw */
----motion-dot-13xphnn: @keyframes dot-13xphnn {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-13xphnn */
----motion-fadeIn-1a39kht: @keyframes fadeIn-1a39kht {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1a39kht */
----motion-contentSlideOut-h3psv3: @keyframes contentSlideOut-h3psv3 {
0% { transform: translateX(0px); }
100% { transform: translateX(-120%); }
}; /* @keyframes contentSlideOut-h3psv3 */
----motion-contentFadeOut-h3psv3: @keyframes contentFadeOut-h3psv3 {
0% { opacity: 1; }
99% { opacity: 0; visibility: hidden; }
100% { opacity: 0; visibility: hidden; }
}; /* @keyframes contentFadeOut-h3psv3 */
----motion-successSlideIn-d42tcb: @keyframes successSlideIn-d42tcb {
0% { transform: translateX(120%); }
100% { transform: translateX(0%); }
}; /* @keyframes successSlideIn-d42tcb */
----motion-successFadeIn-d42tcb: @keyframes successFadeIn-d42tcb {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes successFadeIn-d42tcb */
----motion-map-grid-shimmer-1fda9bv: @keyframes map-grid-shimmer-1fda9bv {
0% { opacity: 0.1; }
100% { opacity: 0.3; }
}; /* @keyframes map-grid-shimmer-1fda9bv */
----motion-animate-map-fancy-loader-dot-19athfr: @keyframes animate-map-fancy-loader-dot-19athfr {
100% { transform: scale(0);… <0.2KB elided>; /* @keyframes animate-map-fancy-loader-dot-19athfr */
----motion-fade-in-1izbfse: @keyframes fade-in-1izbfse {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-1izbfse */
----motion-fadeIn-jlwax1: @keyframes fadeIn-jlwax1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-jlwax1 */
----motion-fade-in-o5tsr9: @keyframes fade-in-o5tsr9 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-o5tsr9 */
----motion-animate-map-base-circle-marker-ease-jtdyk9: @keyframes animate-map-base-circle-marker-ease-jtdyk9 {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes animate-map-base-circle-marker-ease-jtdyk9 */
----motion-animate-map-marker-label-left-fade-in-n7r94i: @keyframes animate-map-marker-label-left-fade-in-n7r94i {
0% { transform: translate(-4px); }
100% { transform: translate(-6px); }
}; /* @keyframes animate-map-marker-label-left-fade-in-n7r94i */
----motion-animate-map-marker-label-right-fade-in-qyliuv: @keyframes animate-map-marker-label-right-fade-in-qyliuv {
0% { transform: translate(4px); }
100% { transform: translate(6px); }
}; /* @keyframes animate-map-marker-label-right-fade-in-qyliuv */
----motion-animate-map-marker-label-top-fade-in-1vorbbt: @keyframes animate-map-marker-label-top-fade-in-1vorbbt {
0% { transform: translateY(-4px); }
100% { transform: translateY(-6px); }
}; /* @keyframes animate-map-marker-label-top-fade-in-1vorbbt */
----motion-animate-map-marker-label-bottom-fade-in-y4k46p: @keyframes animate-map-marker-label-bottom-fade-in-y4k46p {
0% { transform: translateY(4px); }
100% { transform: translateY(6px); }
}; /* @keyframes animate-map-marker-label-bottom-fade-in-y4k46p */
----motion-p5_postcard_exit_scale-34gem9: @keyframes p5_postcard_exit_scale-34gem9 {
0% { scale: var(--p5_postcard_exit_scale_from); }
100% { scale: var(--p5_postcard_exit_scale_to,0.9 0.9); }
}; /* @keyframes p5_postcard_exit_scale-34gem9 */
----motion-p5_postcard_exit_blur-34gem9: @keyframes p5_postcard_exit_blur-34gem9 {
0% { filter: blur(var(--p5_postcard_exit_blur_from)); }
100% { filter: blur(var(--p5_postcard_exit_blur_to,0px)); }
}; /* @keyframes p5_postcard_exit_blur-34gem9 */
----motion-p5_postcard_exit_fade-34gem9: @keyframes p5_postcard_exit_fade-34gem9 {
0% { opacity: var(--p5_postcard_exi… <0.2KB elided>; /* @keyframes p5_postcard_exit_fade-34gem9 */
----motion-p5_postcard_exit_slide-34gem9: @keyframes p5_postcard_exit_slide-34gem9 {
0% { opacity: var(--p5_postcard_ex… <0.5KB elided>; /* @keyframes p5_postcard_exit_slide-34gem9 */
----motion-p5_postcard_enter-34gem9: @keyframes p5_postcard_enter-34gem9 {
0% { transform: rotateY(var(--p5_postcard_enter_from,180deg)); }
100% { transform: rotateY(var(--p5_postcard_enter_to,360deg)); }
}; /* @keyframes p5_postcard_enter-34gem9 */
----motion-p5_cta_btn_exit-qpkmi8: @keyframes p5_cta_btn_exit-qpkmi8 {
0% { opacity: var(--p5_cta_btn_exit_from); }
0% { opacity: var(--p5_cta_btn_exit_from); }
100% { opacity: var(--p5_cta_btn_exit_to,0); }
}; /* @keyframes p5_cta_btn_exit-qpkmi8 */
----motion-p5_cta_btn_enter-qpkmi8: @keyframes p5_cta_btn_enter-qpkmi8 {
0% { opacity: var(--p5_cta_btn_enter_from,100); }
0% { opacity: var(--p5_cta_btn_enter_from,100); }
100% { opacity: var(--p5_cta_btn_enter_to); }
}; /* @keyframes p5_cta_btn_enter-qpkmi8 */
----motion-p5_postcard_exit-qpkmi8: @keyframes p5_postcard_exit-qpkmi8 {
0% { transform: rotateY(var(--p5_postcard_exit_from,0deg)); }
100% { transform: rotateY(var(--p5_postcard_exit_to,180deg)); }
}; /* @keyframes p5_postcard_exit-qpkmi8 */
----motion-p5_postcard_enter-qpkmi8: @keyframes p5_postcard_enter-qpkmi8 {
0% { transform: rotateY(var(--p5_postcard_enter_from,180deg)); }
100% { transform: rotateY(var(--p5_postcard_enter_to,360deg)); }
}; /* @keyframes p5_postcard_enter-qpkmi8 */
----motion-p5_postcard_header_exit-qpkmi8: @keyframes p5_postcard_header_exit-qpkmi8 {
0% { opacity: var(--p5_postcard_h… <0.2KB elided>; /* @keyframes p5_postcard_header_exit-qpkmi8 */
----motion-p5_postcard_header_enter-qpkmi8: @keyframes p5_postcard_header_enter-qpkmi8 {
0% { opacity: var(--p5_postcard_… <0.2KB elided>; /* @keyframes p5_postcard_header_enter-qpkmi8 */
----motion-p5_background_container_exit-qpkmi8: @keyframes p5_background_container_exit-qpkmi8 {
0% { opacity: var(--p5_backg… <0.2KB elided>; /* @keyframes p5_background_container_exit-qpkmi8 */
----motion-p5_background_container_enter-qpkmi8: @keyframes p5_background_container_enter-qpkmi8 {
0% { opacity: var(--p5_back… <0.2KB elided>; /* @keyframes p5_background_container_enter-qpkmi8 */
----motion-fade-in-t4o9sa: @keyframes fade-in-t4o9sa {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-t4o9sa */
----motion-expand-af5ih7: @keyframes expand-af5ih7 {
0% { border-color: var(--container_border-color-fr… <0.2KB elided>; /* @keyframes expand-af5ih7 */
----motion-fadeIn-z4wk44: @keyframes fadeIn-z4wk44 {
0% { opacity: 0; }
100% { translate: 0px; opacity: 1; }
}; /* @keyframes fadeIn-z4wk44 */
----motion-fadeIn-1suk7eu: @keyframes fadeIn-1suk7eu {
0% { opacity: 0; }
100% { translate: 0px; opacity: 1; }
}; /* @keyframes fadeIn-1suk7eu */
----motion-fadeEnter-15rwbjc: @keyframes fadeEnter-15rwbjc {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-15rwbjc */
----motion-dls_sheets_fadeIn-15rwbjc: @keyframes dls_sheets_fadeIn-15rwbjc {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-15rwbjc */
----motion-dls_sheets_slideUp-15rwbjc: @keyframes dls_sheets_slideUp-15rwbjc {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-15rwbjc */
----motion-fadeLeave-q4vf7g: @keyframes fadeLeave-q4vf7g {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-q4vf7g */
----motion-dls_sheets_fadeOut-q4vf7g: @keyframes dls_sheets_fadeOut-q4vf7g {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-q4vf7g */
----motion-dls_sheets_slideDown-q4vf7g: @keyframes dls_sheets_slideDown-q4vf7g {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-q4vf7g */
----motion-dls_sheets_slideDownOut-q4vf7g: @keyframes dls_sheets_slideDownOut-q4vf7g {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-q4vf7g */
----motion-slide-in-and-fade_footer_enter_fade-wcxnmo: @keyframes slide-in-and-fade_footer_enter_fade-wcxnmo {
0% { opacity: var(--s… <0.3KB elided>; /* @keyframes slide-in-and-fade_footer_enter_fade-wcxnmo */
----motion-a11y_slide-in-and-fade_source_content_in-wcxnmo: @keyframes a11y_slide-in-and-fade_source_content_in-wcxnmo {
0% { opacity: va… <0.3KB elided>; /* @keyframes a11y_slide-in-and-fade_source_content_in-wcxnmo */
----motion-slide-in-and-fade_source_content_in-wcxnmo: @keyframes slide-in-and-fade_source_content_in-wcxnmo {
0% { opacity: var(--s… <0.5KB elided>; /* @keyframes slide-in-and-fade_source_content_in-wcxnmo */
----motion-a11y_slide-in-and-fade_destination_content_out-wcxnmo: @keyframes a11y_slide-in-and-fade_destination_content_out-wcxnmo {
0% { opaci… <0.3KB elided>; /* @keyframes a11y_slide-in-and-fade_destination_content_out-wcxnmo */
----motion-slide-in-and-fade_destination_content_out-wcxnmo: @keyframes slide-in-and-fade_destination_content_out-wcxnmo {
0% { opacity: v… <0.5KB elided>; /* @keyframes slide-in-and-fade_destination_content_out-wcxnmo */
----motion-a11y_slide-in-and-fade_source_content_out-wcxnmo: @keyframes a11y_slide-in-and-fade_source_content_out-wcxnmo {
0% { opacity: v… <0.3KB elided>; /* @keyframes a11y_slide-in-and-fade_source_content_out-wcxnmo */
----motion-slide-in-and-fade_source_content_out-wcxnmo: @keyframes slide-in-and-fade_source_content_out-wcxnmo {
0% { opacity: var(--… <0.5KB elided>; /* @keyframes slide-in-and-fade_source_content_out-wcxnmo */
----motion-a11y_slide-in-and-fade_destination_content_in-wcxnmo: @keyframes a11y_slide-in-and-fade_destination_content_in-wcxnmo {
0% { opacit… <0.3KB elided>; /* @keyframes a11y_slide-in-and-fade_destination_content_in-wcxnmo */
----motion-slide-in-and-fade_destination_content_in-wcxnmo: @keyframes slide-in-and-fade_destination_content_in-wcxnmo {
0% { opacity: va… <0.5KB elided>; /* @keyframes slide-in-and-fade_destination_content_in-wcxnmo */
----motion-slideFadeIn-oja9ce: @keyframes slideFadeIn-oja9ce {
0% { opacity: 0; transform: translateY(-14px); }
80% { opacity: 1; }
100% { transform: translateY(0px); }
}; /* @keyframes slideFadeIn-oja9ce */
----motion-AtomicCalendar-HorizontalScroller-scroll-from-wuwspx: @keyframes AtomicCalendar-HorizontalScroller-scroll-from-wuwspx {
0% { transform: translateX(var(--AtomicCalendar-HorizontalScroller-offset)); }
100% { transform: translateX(0px); }
}; /* @keyframes AtomicCalendar-HorizontalScroller-scroll-from-wuwspx */
----motion-AtomicCalendar-HorizontalScroller-scroll-to-1spspug: @keyframes AtomicCalendar-HorizontalScroller-scroll-to-1spspug {
0% { transform: translateX(0px); }
100% { transform: translateX(var(--AtomicCalendar-HorizontalScroller-offset)); }
}; /* @keyframes AtomicCalendar-HorizontalScroller-scroll-to-1spspug */
----motion-fadeEnter-1ixzg25: @keyframes fadeEnter-1ixzg25 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1ixzg25 */
----motion-dls_sheets_fadeIn-1ixzg25: @keyframes dls_sheets_fadeIn-1ixzg25 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1ixzg25 */
----motion-dls_sheets_slideUp-1ixzg25: @keyframes dls_sheets_slideUp-1ixzg25 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1ixzg25 */
----motion-fadeOut-1nvp1xn: @keyframes fadeOut-1nvp1xn {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeOut-1nvp1xn */
----motion-collapse-1nvp1xn: @keyframes collapse-1nvp1xn {
100% { max-height: 0px; }
}; /* @keyframes collapse-1nvp1xn */
----motion-expand-vslfmr: @keyframes expand-vslfmr {
0% { max-height: 0px; }
100% { max-height: unset; }
}; /* @keyframes expand-vslfmr */
----motion-fadeIn-vslfmr: @keyframes fadeIn-vslfmr {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-vslfmr */
----motion-aiDotBounce-bxhfyy: @keyframes aiDotBounce-bxhfyy {
0% { transform: translateY(0px) scaleY(1); an… <0.3KB elided>; /* @keyframes aiDotBounce-bxhfyy */
----motion-animate-map-marker-user-queried-fade-in-13mw1vi: @keyframes animate-map-marker-user-queried-fade-in-13mw1vi {
0% { transform: scale(0.76); }
100% { transform: scale(1); }
}; /* @keyframes animate-map-marker-user-queried-fade-in-13mw1vi */
----motion-animate-map-control-fade-in-nf6ugb: @keyframes animate-map-control-fade-in-nf6ugb {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes animate-map-control-fade-in-nf6ugb */
----motion-fadeLeave: @keyframes fadeLeave {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave */
----motion-fadeEnter-103q0ww: @keyframes fadeEnter-103q0ww {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-103q0ww */
----motion-fadeEnter-blzwl6: @keyframes fadeEnter-blzwl6 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-blzwl6 */
----motion-dls_sheets_fadeIn-blzwl6: @keyframes dls_sheets_fadeIn-blzwl6 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-blzwl6 */
----motion-dls_sheets_slideUp-blzwl6: @keyframes dls_sheets_slideUp-blzwl6 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-blzwl6 */
----motion-fadeLeave-10v2d6w: @keyframes fadeLeave-10v2d6w {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-10v2d6w */
----motion-dls_sheets_fadeOut-10v2d6w: @keyframes dls_sheets_fadeOut-10v2d6w {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-10v2d6w */
----motion-dls_sheets_slideDown-10v2d6w: @keyframes dls_sheets_slideDown-10v2d6w {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-10v2d6w */
----motion-fadeEnter-1gqjnuw: @keyframes fadeEnter-1gqjnuw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1gqjnuw */
----motion-reaction-tray_reaction_fade_4-1o5plae: @keyframes reaction-tray_reaction_fade_4-1o5plae {
0% { opacity: var(--reacti… <0.2KB elided>; /* @keyframes reaction-tray_reaction_fade_4-1o5plae */
----motion-reaction-tray_reaction_scale_4-1o5plae: @keyframes reaction-tray_reaction_scale_4-1o5plae {
0% { scale: var(--reaction-tray_reaction_scale_4_from,0 0); }
100% { scale: var(--reaction-tray_reaction_scale_4_to,1 1); }
}; /* @keyframes reaction-tray_reaction_scale_4-1o5plae */
----motion-reaction-tray_reaction_move_4-1o5plae: @keyframes reaction-tray_reaction_move_4-1o5plae {
0% { translate: var(--reac… <0.2KB elided>; /* @keyframes reaction-tray_reaction_move_4-1o5plae */
----motion-reaction-tray_reaction_fade_3-1o5plae: @keyframes reaction-tray_reaction_fade_3-1o5plae {
0% { opacity: var(--reacti… <0.2KB elided>; /* @keyframes reaction-tray_reaction_fade_3-1o5plae */
----motion-reaction-tray_reaction_scale_3-1o5plae: @keyframes reaction-tray_reaction_scale_3-1o5plae {
0% { scale: var(--reaction-tray_reaction_scale_3_from,0 0); }
100% { scale: var(--reaction-tray_reaction_scale_3_to,1 1); }
}; /* @keyframes reaction-tray_reaction_scale_3-1o5plae */
----motion-reaction-tray_reaction_move_3-1o5plae: @keyframes reaction-tray_reaction_move_3-1o5plae {
0% { translate: var(--reac… <0.2KB elided>; /* @keyframes reaction-tray_reaction_move_3-1o5plae */
----motion-reaction-tray_reaction_fade_2-1o5plae: @keyframes reaction-tray_reaction_fade_2-1o5plae {
0% { opacity: var(--reacti… <0.2KB elided>; /* @keyframes reaction-tray_reaction_fade_2-1o5plae */
----motion-reaction-tray_reaction_scale_2-1o5plae: @keyframes reaction-tray_reaction_scale_2-1o5plae {
0% { scale: var(--reaction-tray_reaction_scale_2_from,0 0); }
100% { scale: var(--reaction-tray_reaction_scale_2_to,1 1); }
}; /* @keyframes reaction-tray_reaction_scale_2-1o5plae */
----motion-reaction-tray_reaction_move_2-1o5plae: @keyframes reaction-tray_reaction_move_2-1o5plae {
0% { translate: var(--reac… <0.2KB elided>; /* @keyframes reaction-tray_reaction_move_2-1o5plae */
----motion-reaction-tray_reaction_fade_1-1o5plae: @keyframes reaction-tray_reaction_fade_1-1o5plae {
0% { opacity: var(--reacti… <0.2KB elided>; /* @keyframes reaction-tray_reaction_fade_1-1o5plae */
----motion-reaction-tray_reaction_scale_1-1o5plae: @keyframes reaction-tray_reaction_scale_1-1o5plae {
0% { scale: var(--reaction-tray_reaction_scale_1_from,0 0); }
100% { scale: var(--reaction-tray_reaction_scale_1_to,1 1); }
}; /* @keyframes reaction-tray_reaction_scale_1-1o5plae */
----motion-reaction-tray_reaction_move_1-1o5plae: @keyframes reaction-tray_reaction_move_1-1o5plae {
0% { translate: var(--reac… <0.2KB elided>; /* @keyframes reaction-tray_reaction_move_1-1o5plae */
----motion-reaction-tray_reaction_fade_0-1o5plae: @keyframes reaction-tray_reaction_fade_0-1o5plae {
0% { opacity: var(--reacti… <0.2KB elided>; /* @keyframes reaction-tray_reaction_fade_0-1o5plae */
----motion-reaction-tray_reaction_scale_0-1o5plae: @keyframes reaction-tray_reaction_scale_0-1o5plae {
0% { scale: var(--reaction-tray_reaction_scale_0_from,0 0); }
100% { scale: var(--reaction-tray_reaction_scale_0_to,1 1); }
}; /* @keyframes reaction-tray_reaction_scale_0-1o5plae */
----motion-reaction-tray_reaction_move_0-1o5plae: @keyframes reaction-tray_reaction_move_0-1o5plae {
0% { translate: var(--reac… <0.2KB elided>; /* @keyframes reaction-tray_reaction_move_0-1o5plae */
----motion-emoji_emoji_exit-1o8b3u7: @keyframes emoji_emoji_exit-1o8b3u7 {
0% { opacity: var(--emoji_emoji_exit_from,1); }
0% { opacity: var(--emoji_emoji_exit_from,1); }
100% { opacity: var(--emoji_emoji_exit_to,0); }
}; /* @keyframes emoji_emoji_exit-1o8b3u7 */
----motion-emoji_emoji_enter-1o8b3u7: @keyframes emoji_emoji_enter-1o8b3u7 {
0% { scale: var(--emoji_emoji_enter_from,0 0); }
100% { scale: var(--emoji_emoji_enter_to,1 1); }
}; /* @keyframes emoji_emoji_enter-1o8b3u7 */
----motion-reaction-tray_reaction_tray_fade_out-1o8b3u7: @keyframes reaction-tray_reaction_tray_fade_out-1o8b3u7 {
0% { opacity: var(-… <0.3KB elided>; /* @keyframes reaction-tray_reaction_tray_fade_out-1o8b3u7 */
----motion-reaction-tray_reaction_tray_fade_in-1o8b3u7: @keyframes reaction-tray_reaction_tray_fade_in-1o8b3u7 {
0% { opacity: var(--… <0.3KB elided>; /* @keyframes reaction-tray_reaction_tray_fade_in-1o8b3u7 */
----motion-reaction-tray_active_chip_exit-1o8b3u7: @keyframes reaction-tray_active_chip_exit-1o8b3u7 {
0% { opacity: var(--react… <0.2KB elided>; /* @keyframes reaction-tray_active_chip_exit-1o8b3u7 */
----motion-reaction-tray_active_chip_enter-1o8b3u7: @keyframes reaction-tray_active_chip_enter-1o8b3u7 {
0% { scale: var(--reaction-tray_active_chip_enter_from,0 0); }
100% { scale: var(--reaction-tray_active_chip_enter_to,1 1); }
}; /* @keyframes reaction-tray_active_chip_enter-1o8b3u7 */
----motion-reaction-tray_reactions_container_open-1h21t2z: @keyframes reaction-tray_reactions_container_open-1h21t2z {
0% { scale: var(-… <0.2KB elided>; /* @keyframes reaction-tray_reactions_container_open-1h21t2z */
----motion-reaction-tray_reactions_container_fade_out-yyrm4u: @keyframes reaction-tray_reactions_container_fade_out-yyrm4u {
0% { opacity:… <0.3KB elided>; /* @keyframes reaction-tray_reactions_container_fade_out-yyrm4u */
----motion-reaction-tray_reactions_container_close-yyrm4u: @keyframes reaction-tray_reactions_container_close-yyrm4u {
0% { scale: var(-… <0.2KB elided>; /* @keyframes reaction-tray_reactions_container_close-yyrm4u */
----motion-fadeLeave-yyrm4u: @keyframes fadeLeave-yyrm4u {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-yyrm4u */
----motion-dls_sheets_fadeOut-yyrm4u: @keyframes dls_sheets_fadeOut-yyrm4u {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-yyrm4u */
----motion-dls_sheets_slideDown-yyrm4u: @keyframes dls_sheets_slideDown-yyrm4u {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-yyrm4u */
----motion-fadeIn-faz52h: @keyframes fadeIn-faz52h {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-faz52h */
----motion-sending-status_fade_in-l44ehq: @keyframes sending-status_fade_in-l44ehq {
0% { opacity: var(--sending-status… <0.2KB elided>; /* @keyframes sending-status_fade_in-l44ehq */
----motion-sending-status_fade_out-1a2517o: @keyframes sending-status_fade_out-1a2517o {
0% { opacity: var(--sending-stat… <0.2KB elided>; /* @keyframes sending-status_fade_out-1a2517o */
----motion-message-title_height_scale_up-ubz966: @keyframes message-title_height_scale_up-ubz966 {
0% { max-height: var(--message-title_height_scale_up_from,0); }
100% { max-height: var(--message-title_height_scale_up_to,24px); }
}; /* @keyframes message-title_height_scale_up-ubz966 */
----motion-message-title_fade_in-ubz966: @keyframes message-title_fade_in-ubz966 {
0% { opacity: var(--message-title_f… <0.2KB elided>; /* @keyframes message-title_fade_in-ubz966 */
----motion-message-title_slide_up-ubz966: @keyframes message-title_slide_up-ubz966 {
0% { translate: var(--message-title_slide_up_from,0 12px); }
100% { translate: var(--message-title_slide_up_to,0 0); }
}; /* @keyframes message-title_slide_up-ubz966 */
----motion-message-title_height_scale_down-kibeo2: @keyframes message-title_height_scale_down-kibeo2 {
0% { max-height: var(--message-title_height_scale_down_from,24px); }
100% { max-height: var(--message-title_height_scale_down_to,0); }
}; /* @keyframes message-title_height_scale_down-kibeo2 */
----motion-message-title_fade_out-kibeo2: @keyframes message-title_fade_out-kibeo2 {
0% { opacity: var(--message-title_… <0.2KB elided>; /* @keyframes message-title_fade_out-kibeo2 */
----motion-message-title_slide_down-kibeo2: @keyframes message-title_slide_down-kibeo2 {
0% { translate: var(--message-title_slide_down_from,0 0); }
100% { translate: var(--message-title_slide_down_to,0 12px); }
}; /* @keyframes message-title_slide_down-kibeo2 */
----motion-incoming-tile-3-of-3_tile_translate-1hs5mft: @keyframes incoming-tile-3-of-3_tile_translate-1hs5mft {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-3-of-3_tile_translate-1hs5mft */
----motion-incoming-tile-3-of-3_tile_rotate-1hs5mft: @keyframes incoming-tile-3-of-3_tile_rotate-1hs5mft {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-3-of-3_tile_rotate-1hs5mft */
----motion-incoming-tile-3-of-3_tile_scale-1hs5mft: @keyframes incoming-tile-3-of-3_tile_scale-1hs5mft {
0% { scale: var(--incoming-tile-3-of-3_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-3-of-3_tile_scale_to,1 1); }
}; /* @keyframes incoming-tile-3-of-3_tile_scale-1hs5mft */
----motion-incoming-tile-2-of-3_tile_translate-1hs5mft: @keyframes incoming-tile-2-of-3_tile_translate-1hs5mft {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-2-of-3_tile_translate-1hs5mft */
----motion-incoming-tile-2-of-3_tile_rotate-1hs5mft: @keyframes incoming-tile-2-of-3_tile_rotate-1hs5mft {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-2-of-3_tile_rotate-1hs5mft */
----motion-incoming-tile-2-of-3_tile_scale-1hs5mft: @keyframes incoming-tile-2-of-3_tile_scale-1hs5mft {
0% { scale: var(--incoming-tile-2-of-3_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-2-of-3_tile_scale_to,1 1); }
}; /* @keyframes incoming-tile-2-of-3_tile_scale-1hs5mft */
----motion-incoming-tile-1-of-3_tile_translate-1hs5mft: @keyframes incoming-tile-1-of-3_tile_translate-1hs5mft {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-1-of-3_tile_translate-1hs5mft */
----motion-incoming-tile-1-of-3_tile_rotate-1hs5mft: @keyframes incoming-tile-1-of-3_tile_rotate-1hs5mft {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-1-of-3_tile_rotate-1hs5mft */
----motion-incoming-tile-1-of-3_tile_scale-1hs5mft: @keyframes incoming-tile-1-of-3_tile_scale-1hs5mft {
0% { scale: var(--incoming-tile-1-of-3_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-1-of-3_tile_scale_to,1 1); }
}; /* @keyframes incoming-tile-1-of-3_tile_scale-1hs5mft */
----motion-incoming-tile-2-of-2_tile_translate-1hs5mft: @keyframes incoming-tile-2-of-2_tile_translate-1hs5mft {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-2-of-2_tile_translate-1hs5mft */
----motion-incoming-tile-2-of-2_tile_rotate-1hs5mft: @keyframes incoming-tile-2-of-2_tile_rotate-1hs5mft {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-2-of-2_tile_rotate-1hs5mft */
----motion-incoming-tile-2-of-2_tile_scale-1hs5mft: @keyframes incoming-tile-2-of-2_tile_scale-1hs5mft {
0% { scale: var(--incoming-tile-2-of-2_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-2-of-2_tile_scale_to,1 1); }
}; /* @keyframes incoming-tile-2-of-2_tile_scale-1hs5mft */
----motion-incoming-tile-1-of-2_tile_translate-1hs5mft: @keyframes incoming-tile-1-of-2_tile_translate-1hs5mft {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-1-of-2_tile_translate-1hs5mft */
----motion-incoming-tile-1-of-2_tile_rotate-1hs5mft: @keyframes incoming-tile-1-of-2_tile_rotate-1hs5mft {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-1-of-2_tile_rotate-1hs5mft */
----motion-incoming-tile-1-of-2_tile_scale-1hs5mft: @keyframes incoming-tile-1-of-2_tile_scale-1hs5mft {
0% { scale: var(--incoming-tile-1-of-2_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-1-of-2_tile_scale_to,1 1); }
}; /* @keyframes incoming-tile-1-of-2_tile_scale-1hs5mft */
----motion-incoming-single-tile-1_tile_rotate-1hs5mft: @keyframes incoming-single-tile-1_tile_rotate-1hs5mft {
0% { rotate: var(--in… <0.2KB elided>; /* @keyframes incoming-single-tile-1_tile_rotate-1hs5mft */
----motion-incoming-single-tile-1_tile_scale-1hs5mft: @keyframes incoming-single-tile-1_tile_scale-1hs5mft {
0% { scale: var(--inco… <0.2KB elided>; /* @keyframes incoming-single-tile-1_tile_scale-1hs5mft */
----motion-tile-exit_tile_opacity-awj4h: @keyframes tile-exit_tile_opacity-awj4h {
0% { opacity: var(--tile-exit_tile_… <0.2KB elided>; /* @keyframes tile-exit_tile_opacity-awj4h */
----motion-tile-exit_tile_scale-awj4h: @keyframes tile-exit_tile_scale-awj4h {
0% { scale: var(--tile-exit_tile_scale_from); }
100% { scale: var(--tile-exit_tile_scale_to,0.5 0.5); }
}; /* @keyframes tile-exit_tile_scale-awj4h */
----motion-scale-1f86cl0: @keyframes scale-1f86cl0 {
0% { scale: var(--scale_from,0 0); }
100% { scale: var(--scale_to); }
}; /* @keyframes scale-1f86cl0 */
----motion-animate-map-marker-google-poi-fade-in-4fxa45: @keyframes animate-map-marker-google-poi-fade-in-4fxa45 {
0% { opacity: 0.8; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes animate-map-marker-google-poi-fade-in-4fxa45 */
----motion-bouncyDot-wzkctv: @keyframes bouncyDot-wzkctv {
100% { transform: translateY(3px); }
0% { transform: translateY(3px); }
50% { transform: translateY(-3px); }
}; /* @keyframes bouncyDot-wzkctv */
----motion-radial-progress-spin-pdf2lp: @keyframes radial-progress-spin-pdf2lp {
0% { transform: rotate(-90deg); }
100% { transform: rotate(270deg); }
}; /* @keyframes radial-progress-spin-pdf2lp */
----motion-characterPulse-6uifnl: @keyframes characterPulse-6uifnl {
0% { opacity: 1; }
22% { opacity: 0.4; }
74% { opacity: 1; }
100% { opacity: 1; }
}; /* @keyframes characterPulse-6uifnl */
----motion-blink-t00n41: @keyframes blink-t00n41 {
0% { opacity: 1; }
30% { opacity: 0.5; }
53% { opacity: 1; }
76% { opacity: 0.5; }
100% { opacity: 1; }
}; /* @keyframes blink-t00n41 */
----motion-overlayEnterLinaria-1xfkdda: @keyframes overlayEnterLinaria-1xfkdda {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-1xfkdda */
----motion-overlayLeave-1jvmct2: @keyframes overlayLeave-1jvmct2 {
0% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
100% { opacity: 0; }
}; /* @keyframes overlayLeave-1jvmct2 */
----motion-growEnter-1btaube: @keyframes growEnter-1btaube {
0% { opacity: 0; transform: scale(0.05); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes growEnter-1btaube */
----motion-growLeave-1v4rdzl: @keyframes growLeave-1v4rdzl {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.05); }
}; /* @keyframes growLeave-1v4rdzl */
----motion-slideDown-fuyypg: @keyframes slideDown-fuyypg {
0% { transform: translateY(-100px); opacity: 0; }
100% { transform: translateY(0px); opacity: 1; }
}; /* @keyframes slideDown-fuyypg */
----motion-slideUp-9bektf: @keyframes slideUp-9bektf {
0% { transform: translateY(0px); opacity: 1; }
100% { transform: translateY(-100px); opacity: 0; }
}; /* @keyframes slideUp-9bektf */
----motion-container-fade-out-dhvyp6: @keyframes container-fade-out-dhvyp6 {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}; /* @keyframes container-fade-out-dhvyp6 */
----motion-enter-ray6ec: @keyframes enter-ray6ec {
0% { height: 0px; opacity: 0; }
100% { height: auto; opacity: 1; }
}; /* @keyframes enter-ray6ec */
----motion-slideFadeIn-oh1clg: @keyframes slideFadeIn-oh1clg {
0% { opacity: 0; transform: translateY(-14px); }
80% { opacity: 1; }
100% { transform: translateY(0px); }
}; /* @keyframes slideFadeIn-oh1clg */
----motion-fadeEnter-z0oi5p: @keyframes fadeEnter-z0oi5p {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-z0oi5p */
----motion-dls_sheets_fadeIn-z0oi5p: @keyframes dls_sheets_fadeIn-z0oi5p {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-z0oi5p */
----motion-dls_sheets_slideUp-z0oi5p: @keyframes dls_sheets_slideUp-z0oi5p {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-z0oi5p */
----motion-a11y_slide-up-from-bottom_destination_screen_in-8mse0q: @keyframes a11y_slide-up-from-bottom_destination_screen_in-8mse0q {
0% { opac… <0.3KB elided>; /* @keyframes a11y_slide-up-from-bottom_destination_screen_in-8mse0q */
----motion-slide-up-from-bottom_destination_screen_in-8mse0q: @keyframes slide-up-from-bottom_destination_screen_in-8mse0q {
0% { opacity:… <0.5KB elided>; /* @keyframes slide-up-from-bottom_destination_screen_in-8mse0q */
----motion-a11y_slide-up-from-bottom_destination_screen_out-14qbbjq: @keyframes a11y_slide-up-from-bottom_destination_screen_out-14qbbjq {
0% { op… <0.3KB elided>; /* @keyframes a11y_slide-up-from-bottom_destination_screen_out-14qbbjq */
----motion-slide-up-from-bottom_destination_screen_out-14qbbjq: @keyframes slide-up-from-bottom_destination_screen_out-14qbbjq {
0% { opacity… <0.5KB elided>; /* @keyframes slide-up-from-bottom_destination_screen_out-14qbbjq */
----motion-iconScaleEnter-wqhfx5: @keyframes iconScaleEnter-wqhfx5 {
0% { transform: scale(0.8); }
100% { transform: scale(1); }
}; /* @keyframes iconScaleEnter-wqhfx5 */
----motion-iconColorEnter-wqhfx5: @keyframes iconColorEnter-wqhfx5 {
0% { color: var(--palette-grey700); }
100% { color: var(--palette-rausch700); }
}; /* @keyframes iconColorEnter-wqhfx5 */
----motion-iconStrokeEnter-wqhfx5: @keyframes iconStrokeEnter-wqhfx5 {
0% { stroke-width: var(--tab-icon-stroke-from); }
100% { stroke-width: var(--tab-icon-stroke-to); }
}; /* @keyframes iconStrokeEnter-wqhfx5 */
----motion-badgePositionEnter-1g9fylo: @keyframes badgePositionEnter-1g9fylo {
0% { left: calc(100% + var(--badge-spacing-from)); }
100% { left: calc(100% + var(--badge-spacing-to)); }
}; /* @keyframes badgePositionEnter-1g9fylo */
----motion-badgeMarginEnter-1scf8xw: @keyframes badgeMarginEnter-1scf8xw {
0% { margin-left: var(--badge-spacing-from); }
100% { margin-left: var(--badge-spacing-to); }
}; /* @keyframes badgeMarginEnter-1scf8xw */
----motion-labelEnter-1nu8o6h: @keyframes labelEnter-1nu8o6h {
0% { color: var(--palette-foggy); font-weight… <0.2KB elided>; /* @keyframes labelEnter-1nu8o6h */
----motion-scaleOuterStroke-1io22eg: @keyframes scaleOuterStroke-1io22eg {
0% { transform: translate(var(--stroke-translate-x,-50%),-50%) scale(0.7); }
100% { transform: translate(var(--stroke-translate-x,-50%),-50%) scale(1); }
}; /* @keyframes scaleOuterStroke-1io22eg */
----motion-scaleAvatar-1syztyc: @keyframes scaleAvatar-1syztyc {
0% { transform: scale(1); animation-timing-f… <0.4KB elided>; /* @keyframes scaleAvatar-1syztyc */
----motion-fadeEnter-cjze4w: @keyframes fadeEnter-cjze4w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-cjze4w */
----motion-dls_sheets_fadeIn-cjze4w: @keyframes dls_sheets_fadeIn-cjze4w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-cjze4w */
----motion-dls_sheets_slideUp-cjze4w: @keyframes dls_sheets_slideUp-cjze4w {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-cjze4w */
----motion-grow-1u4e746: @keyframes grow-1u4e746 {
0% { grid-template-columns: auto var(--text-width); }
100% { grid-template-areas: "foo icon text bar"; grid-template-columns: 2fr 16px auto 2fr; width: 100%; }
}; /* @keyframes grow-1u4e746 */
----motion-collapseOut-1aphyov: @keyframes collapseOut-1aphyov {
100% { opacity: 0; height: 1px; width: 14px; padding: 0px; margin: 0px; }
}; /* @keyframes collapseOut-1aphyov */
----motion-collapseOut-1j3b9um: @keyframes collapseOut-1j3b9um {
100% { visibility: hidden; height: 0px; width: 0px; }
}; /* @keyframes collapseOut-1j3b9um */
----motion-expand-le84mo: @keyframes expand-le84mo {
100% { visibility: visible; height: auto; }
}; /* @keyframes expand-le84mo */
----motion-collapseOut-5o3b9x: @keyframes collapseOut-5o3b9x {
100% { width: 16px; }
}; /* @keyframes collapseOut-5o3b9x */
----motion-collapseOut-1ku9f9i: @keyframes collapseOut-1ku9f9i {
100% { opacity: 0; height: 0px; padding: 0px; margin: 0px; }
}; /* @keyframes collapseOut-1ku9f9i */
----motion-expandIn-1nwqsh0: @keyframes expandIn-1nwqsh0 {
0% { opacity: 0; height: 0px; padding: 0px 1rem; }
100% { opacity: 1; height: 16px; padding: 2px 0px 0px; }
}; /* @keyframes expandIn-1nwqsh0 */
----motion-fadeEnter-198dd1: @keyframes fadeEnter-198dd1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-198dd1 */
----motion-dls_sheets_fadeIn-198dd1: @keyframes dls_sheets_fadeIn-198dd1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-198dd1 */
----motion-dls_sheets_slideUp-198dd1: @keyframes dls_sheets_slideUp-198dd1 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-198dd1 */
----motion-bounce-1azte23: @keyframes bounce-1azte23 {
100% { transform: translateY(-5%); }
50% { transform: none; }
}; /* @keyframes bounce-1azte23 */
----motion-fadeEnter-1gcp78k: @keyframes fadeEnter-1gcp78k {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1gcp78k */
----motion-dls_sheets_fadeIn-1gcp78k: @keyframes dls_sheets_fadeIn-1gcp78k {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1gcp78k */
----motion-dls_sheets_slideUp-1gcp78k: @keyframes dls_sheets_slideUp-1gcp78k {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1gcp78k */
----motion-fadeEnter-18vk7um: @keyframes fadeEnter-18vk7um {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-18vk7um */
----motion-dls_sheets_fadeIn-18vk7um: @keyframes dls_sheets_fadeIn-18vk7um {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-18vk7um */
----motion-dls_sheets_slideUp-18vk7um: @keyframes dls_sheets_slideUp-18vk7um {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-18vk7um */
----motion-fadeEnter-2gg72r: @keyframes fadeEnter-2gg72r {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-2gg72r */
----motion-dls_sheets_fadeIn-2gg72r: @keyframes dls_sheets_fadeIn-2gg72r {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-2gg72r */
----motion-dls_sheets_slideUp-2gg72r: @keyframes dls_sheets_slideUp-2gg72r {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-2gg72r */
----motion-fadeEnter-1z053yu: @keyframes fadeEnter-1z053yu {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1z053yu */
----motion-dls_sheets_fadeIn-1z053yu: @keyframes dls_sheets_fadeIn-1z053yu {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1z053yu */
----motion-dls_sheets_slideUp-1z053yu: @keyframes dls_sheets_slideUp-1z053yu {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1z053yu */
----motion-fadeEnter-1t3pn16: @keyframes fadeEnter-1t3pn16 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1t3pn16 */
----motion-dls_sheets_fadeIn-1t3pn16: @keyframes dls_sheets_fadeIn-1t3pn16 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1t3pn16 */
----motion-dls_sheets_slideUp-1t3pn16: @keyframes dls_sheets_slideUp-1t3pn16 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1t3pn16 */
----motion-hqgd-seq-fade-out-vl5ao5: @keyframes hqgd-seq-fade-out-vl5ao5 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes hqgd-seq-fade-out-vl5ao5 */
----motion-hqgd-seq-fade-in-30jvgu: @keyframes hqgd-seq-fade-in-30jvgu {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes hqgd-seq-fade-in-30jvgu */
----motion-fadeEnter-97o7pp: @keyframes fadeEnter-97o7pp {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-97o7pp */
----motion-dls_sheets_fadeIn-97o7pp: @keyframes dls_sheets_fadeIn-97o7pp {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-97o7pp */
----motion-dls_sheets_slideUp-97o7pp: @keyframes dls_sheets_slideUp-97o7pp {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-97o7pp */
----motion-footer-fade-in-9r7fwe: @keyframes footer-fade-in-9r7fwe {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes footer-fade-in-9r7fwe */
----motion-footer-fade-in-insight-1dzdzew: @keyframes footer-fade-in-insight-1dzdzew {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes footer-fade-in-insight-1dzdzew */
----motion-fadeEnter-1gp0mg6: @keyframes fadeEnter-1gp0mg6 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1gp0mg6 */
----motion-dls_sheets_fadeIn-1gp0mg6: @keyframes dls_sheets_fadeIn-1gp0mg6 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1gp0mg6 */
----motion-dls_sheets_slideUp-1gp0mg6: @keyframes dls_sheets_slideUp-1gp0mg6 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1gp0mg6 */
----motion-insight-fade-in-14ybi0w: @keyframes insight-fade-in-14ybi0w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes insight-fade-in-14ybi0w */
----motion-sell-title-fade-in-1cx99hq: @keyframes sell-title-fade-in-1cx99hq {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes sell-title-fade-in-1cx99hq */
----motion-ellipsisDot1-1olfijc: @keyframes ellipsisDot1-1olfijc {
68.28% { opacity: 1; }
0% { opacity: 1; }
100% { opacity: 0; }
84.19% { opacity: 0; }
}; /* @keyframes ellipsisDot1-1olfijc */
----motion-ellipsisDot2-1y70u65: @keyframes ellipsisDot2-1y70u65 {
11.14% { opacity: 0; }
0% { opacity: 0; }
68.28% { opacity: 1; }
11.141% { opacity: 1; }
100% { opacity: 0; }
84.19% { opacity: 0; }
}; /* @keyframes ellipsisDot2-1y70u65 */
----motion-ellipsisDot3-kqgay4: @keyframes ellipsisDot3-kqgay4 {
22.19% { opacity: 0; }
0% { opacity: 0; }
68.28% { opacity: 1; }
22.191% { opacity: 1; }
100% { opacity: 0; }
84.19% { opacity: 0; }
}; /* @keyframes ellipsisDot3-kqgay4 */
----motion-show-ckazd0: @keyframes show-ckazd0 {
0% { transform: translate(-50%, -20px); }
80% { opacity: 1; }
100% { opacity: 1; }
}; /* @keyframes show-ckazd0 */
----motion-p4-loader_fadeOverlay-17rzbpf: @keyframes p4-loader_fadeOverlay-17rzbpf {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes p4-loader_fadeOverlay-17rzbpf */
----motion-move-v1ndtn: @keyframes move-v1ndtn {
0% { transform: translateX(0px); }
100% { transform: translateX(-50%); }
}; /* @keyframes move-v1ndtn */
----motion-p4-loader_fadeOut-asxuek: @keyframes p4-loader_fadeOut-asxuek {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes p4-loader_fadeOut-asxuek */
----motion-p4-loader_fadeIn-1g5tehv: @keyframes p4-loader_fadeIn-1g5tehv {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes p4-loader_fadeIn-1g5tehv */
----motion-simple-fade_simple_fade-1a00gxq: @keyframes simple-fade_simple_fade-1a00gxq {
0% { opacity: var(--simple-fade_… <0.2KB elided>; /* @keyframes simple-fade_simple_fade-1a00gxq */
----motion-simple-fade_simple_fade_video-vy6jsq: @keyframes simple-fade_simple_fade_video-vy6jsq {
0% { opacity: var(--simple-… <0.2KB elided>; /* @keyframes simple-fade_simple_fade_video-vy6jsq */
----motion-moweb-transition_text_title_fade_in-1guv34z: @keyframes moweb-transition_text_title_fade_in-1guv34z {
0% { opacity: var(--… <0.5KB elided>; /* @keyframes moweb-transition_text_title_fade_in-1guv34z */
----motion-moweb-transition_text_description_fade_in-1k302aj: @keyframes moweb-transition_text_description_fade_in-1k302aj {
0% { opacity:… <0.5KB elided>; /* @keyframes moweb-transition_text_description_fade_in-1k302aj */
----motion-simple-fade_simple_fade-8j9mzp: @keyframes simple-fade_simple_fade-8j9mzp {
0% { opacity: var(--simple-fade_s… <0.2KB elided>; /* @keyframes simple-fade_simple_fade-8j9mzp */
----motion-fadeLeave-vqpxt6: @keyframes fadeLeave-vqpxt6 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-vqpxt6 */
----motion-dls_sheets_fadeOut-vqpxt6: @keyframes dls_sheets_fadeOut-vqpxt6 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-vqpxt6 */
----motion-dls_sheets_slideDown-vqpxt6: @keyframes dls_sheets_slideDown-vqpxt6 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-vqpxt6 */
----motion-dls_sheets_slideDownOut-vqpxt6: @keyframes dls_sheets_slideDownOut-vqpxt6 {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-vqpxt6 */
----motion-p5-card_fadeIn-15v2zvg: @keyframes p5-card_fadeIn-15v2zvg {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes p5-card_fadeIn-15v2zvg */
----motion-p5-card_rotate-1x5llo0: @keyframes p5-card_rotate-1x5llo0 {
0% { transform: rotateY(90deg); }
100% { transform: rotateY(0deg); }
}; /* @keyframes p5-card_rotate-1x5llo0 */
----motion-p5-card_grow-1flegkt: @keyframes p5-card_grow-1flegkt {
0% { scale: 0.6; }
100% { scale: 1; }
}; /* @keyframes p5-card_grow-1flegkt */
----motion-p5-background_fadeIn-4cadue: @keyframes p5-background_fadeIn-4cadue {
0% { background-color: var(--palette-white); }
100% { background-color: var(--palette-hapuna); }
}; /* @keyframes p5-background_fadeIn-4cadue */
----motion-a11y_slide-up-from-bottom_destination_screen_in-1y3zgwa: @keyframes a11y_slide-up-from-bottom_destination_screen_in-1y3zgwa {
0% { opa… <0.3KB elided>; /* @keyframes a11y_slide-up-from-bottom_destination_screen_in-1y3zgwa */
----motion-slide-up-from-bottom_destination_screen_in-1y3zgwa: @keyframes slide-up-from-bottom_destination_screen_in-1y3zgwa {
0% { opacity:… <0.5KB elided>; /* @keyframes slide-up-from-bottom_destination_screen_in-1y3zgwa */
----motion-fadeEnter-2npbe6: @keyframes fadeEnter-2npbe6 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-2npbe6 */
----motion-growEnter-2npbe6: @keyframes growEnter-2npbe6 {
0% { opacity: 0; transform: scale(0.05); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes growEnter-2npbe6 */
----motion-fadeLeave-rku90x: @keyframes fadeLeave-rku90x {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-rku90x */
----motion-growLeave-rku90x: @keyframes growLeave-rku90x {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.05); }
}; /* @keyframes growLeave-rku90x */
----motion-offeringModalNavFadeIn-a5sqw8: @keyframes offeringModalNavFadeIn-a5sqw8 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes offeringModalNavFadeIn-a5sqw8 */
----motion-offeringModalNavSlideIn-a5sqw8: @keyframes offeringModalNavSlideIn-a5sqw8 {
0% { transform: translateX(calc((… <0.3KB elided>; /* @keyframes offeringModalNavSlideIn-a5sqw8 */
----motion-fadeEnter-130nqsw: @keyframes fadeEnter-130nqsw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-130nqsw */
----motion-dls_sheets_fadeIn-130nqsw: @keyframes dls_sheets_fadeIn-130nqsw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-130nqsw */
----motion-dls_sheets_slideUp-130nqsw: @keyframes dls_sheets_slideUp-130nqsw {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-130nqsw */
----motion-fadeLeave-5c3dg5: @keyframes fadeLeave-5c3dg5 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-5c3dg5 */
----motion-dls_sheets_fadeOut-5c3dg5: @keyframes dls_sheets_fadeOut-5c3dg5 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-5c3dg5 */
----motion-dls_sheets_slideDown-5c3dg5: @keyframes dls_sheets_slideDown-5c3dg5 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-5c3dg5 */
----motion-dls_sheets_slideDownOut-5c3dg5: @keyframes dls_sheets_slideDownOut-5c3dg5 {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-5c3dg5 */
----motion-fadeEnter-1yl89wt: @keyframes fadeEnter-1yl89wt {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1yl89wt */
----motion-dls_sheets_fadeIn-1yl89wt: @keyframes dls_sheets_fadeIn-1yl89wt {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1yl89wt */
----motion-dls_sheets_slideUp-1yl89wt: @keyframes dls_sheets_slideUp-1yl89wt {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1yl89wt */
----motion-overlayEnter-1d59ybn: @keyframes overlayEnter-1d59ybn {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes overlayEnter-1d59ybn */
----motion-overlayLeave-aomgm: @keyframes overlayLeave-aomgm {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes overlayLeave-aomgm */
----motion-fadeInSlideUp-1n7je4n: @keyframes fadeInSlideUp-1n7je4n {
0% { translate: 0px 7px; rotate: 15deg; scale: 0; }
100% { translate: 0px; rotate: -3deg; scale: 1; }
}; /* @keyframes fadeInSlideUp-1n7je4n */
----motion-slideDown1-1pro0ie: @keyframes slideDown1-1pro0ie {
0% { translate: 0px; }
100% { translate: 0px 12px; }
}; /* @keyframes slideDown1-1pro0ie */
----motion-fadeInSlideUp2-ya3j8w: @keyframes fadeInSlideUp2-ya3j8w {
0% { translate: 0px 7px; rotate: 24deg; scale: 0; }
100% { translate: 0px; rotate: 4deg; scale: 1; }
}; /* @keyframes fadeInSlideUp2-ya3j8w */
----motion-slideUp2-1yq4xzh: @keyframes slideUp2-1yq4xzh {
0% { translate: 0px; }
100% { translate: 0px -12px; }
}; /* @keyframes slideUp2-1yq4xzh */
----motion-slideUp-1udplt6: @keyframes slideUp-1udplt6 {
0% { transform: translateY(50px); }
100% { transform: translateY(0px); }
}; /* @keyframes slideUp-1udplt6 */
----motion-fadeIn-1udplt6: @keyframes fadeIn-1udplt6 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1udplt6 */
----motion-fade-out: @keyframes fade-out {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-out */
----motion-fade-in: @keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in */
----motion-fadeEnter-hy5wy: @keyframes fadeEnter-hy5wy {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-hy5wy */
----motion-dls_sheets_fadeIn-hy5wy: @keyframes dls_sheets_fadeIn-hy5wy {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-hy5wy */
----motion-dls_sheets_slideUp-hy5wy: @keyframes dls_sheets_slideUp-hy5wy {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-hy5wy */
----motion-fadeEnter-1ugqzv3: @keyframes fadeEnter-1ugqzv3 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1ugqzv3 */
----motion-slideEnter-1ugqzv3: @keyframes slideEnter-1ugqzv3 {
0% { transform: translate(0px, 200px); }
100% { transform: none; }
}; /* @keyframes slideEnter-1ugqzv3 */
----motion-slideLeave-sw6uib: @keyframes slideLeave-sw6uib {
0% { transform: none; }
100% { transform: translate(0px, 100px); }
}; /* @keyframes slideLeave-sw6uib */
----motion-fadeLeave-sw6uib: @keyframes fadeLeave-sw6uib {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-sw6uib */
----motion-dls_sheets_fadeOut-sw6uib: @keyframes dls_sheets_fadeOut-sw6uib {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-sw6uib */
----motion-dls_sheets_slideDown-sw6uib: @keyframes dls_sheets_slideDown-sw6uib {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-sw6uib */
----motion-dls_sheets_slideDownOut-sw6uib: @keyframes dls_sheets_slideDownOut-sw6uib {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-sw6uib */
----motion-fadeIn-1hl9bd8: @keyframes fadeIn-1hl9bd8 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1hl9bd8 */
----motion-media-fade-out-1m7fimm: @keyframes media-fade-out-1m7fimm {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes media-fade-out-1m7fimm */
----motion-top-fade-in-35788g: @keyframes top-fade-in-35788g {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes top-fade-in-35788g */
----motion-bottom-fade-out-1sj1mgf: @keyframes bottom-fade-out-1sj1mgf {
90% { opacity: 1; }
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes bottom-fade-out-1sj1mgf */
----motion-footer-fade-out-1yv5msv: @keyframes footer-fade-out-1yv5msv {
90% { opacity: 1; }
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes footer-fade-out-1yv5msv */
----motion-fade-in-1aetkbe: @keyframes fade-in-1aetkbe {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-1aetkbe */
----motion-fadeIn-153k2r5: @keyframes fadeIn-153k2r5 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-153k2r5 */
----motion-fadeInSlideUp-153k2r5: @keyframes fadeInSlideUp-153k2r5 {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fadeInSlideUp-153k2r5 */
----motion-fadeIn-1ah4ir7: @keyframes fadeIn-1ah4ir7 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1ah4ir7 */
----motion-opacity-fade-in-1ntc5ot: @keyframes opacity-fade-in-1ntc5ot {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes opacity-fade-in-1ntc5ot */
----motion-fadeEnter-hkmkd0: @keyframes fadeEnter-hkmkd0 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-hkmkd0 */
----motion-dls_sheets_fadeIn-hkmkd0: @keyframes dls_sheets_fadeIn-hkmkd0 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-hkmkd0 */
----motion-dls_sheets_slideUp-hkmkd0: @keyframes dls_sheets_slideUp-hkmkd0 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-hkmkd0 */
----motion-fadeLeave-1wyl9lq: @keyframes fadeLeave-1wyl9lq {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1wyl9lq */
----motion-dls_sheets_fadeOut-1wyl9lq: @keyframes dls_sheets_fadeOut-1wyl9lq {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1wyl9lq */
----motion-dls_sheets_slideDown-1wyl9lq: @keyframes dls_sheets_slideDown-1wyl9lq {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1wyl9lq */
----motion-dls_sheets_slideDownOut-1wyl9lq: @keyframes dls_sheets_slideDownOut-1wyl9lq {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-1wyl9lq */
----motion-fade-in-slide-up-17ewktj: @keyframes fade-in-slide-up-17ewktj {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fade-in-slide-up-17ewktj */
----motion-fadeOutButton-5kmnc3: @keyframes fadeOutButton-5kmnc3 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeOutButton-5kmnc3 */
----motion-fadeInButton-5kmnc3: @keyframes fadeInButton-5kmnc3 {
0% { opacity: 0; transform: scale(0.1); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes fadeInButton-5kmnc3 */
----motion-fadeInFromBottom-iv6bui: @keyframes fadeInFromBottom-iv6bui {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fadeInFromBottom-iv6bui */
----motion-fadeEnter-bkg4ka: @keyframes fadeEnter-bkg4ka {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-bkg4ka */
----motion-dls_sheets_fadeIn-bkg4ka: @keyframes dls_sheets_fadeIn-bkg4ka {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-bkg4ka */
----motion-dls_sheets_slideUp-bkg4ka: @keyframes dls_sheets_slideUp-bkg4ka {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-bkg4ka */
----motion-dot-1bjy4cb: @keyframes dot-1bjy4cb {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-1bjy4cb */
----motion-slideEnter-1d456t3: @keyframes slideEnter-1d456t3 {
0% { opacity: 0; transform: translate(0px, 100%); }
100% { opacity: 1; transform: none; }
}; /* @keyframes slideEnter-1d456t3 */
----motion-slideLeave-16x0rnf: @keyframes slideLeave-16x0rnf {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate(0px, 100%); }
}; /* @keyframes slideLeave-16x0rnf */
----motion-searchInputFadeInUp-thrmic: @keyframes searchInputFadeInUp-thrmic {
0% { opacity: 0; transform: translateY(100px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes searchInputFadeInUp-thrmic */
----motion-searchInputFadeIn-ov66rp: @keyframes searchInputFadeIn-ov66rp {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes searchInputFadeIn-ov66rp */
----motion-searchInputFadeInDown-1nxjeg9: @keyframes searchInputFadeInDown-1nxjeg9 {
0% { opacity: 0; transform: translateY(-100px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes searchInputFadeInDown-1nxjeg9 */
----motion-fade-in-vtbwgw: @keyframes fade-in-vtbwgw {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-vtbwgw */
----motion-panelScroll-b2545o: @keyframes panelScroll-b2545o {
0% { box-shadow: none; }
100% { box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px 0px; }
1% { box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px 0px; }
}; /* @keyframes panelScroll-b2545o */
----motion-searchInputEntry-1t4hgeb: @keyframes searchInputEntry-1t4hgeb {
0% { scale: 0.4; }
100% { scale: 1; }
}; /* @keyframes searchInputEntry-1t4hgeb */
----motion-explore-fade-in-fcp-fix-8bvbv4: @keyframes explore-fade-in-fcp-fix-8bvbv4 {
0% { opacity: 0.01; }
100% { opacity: 1; }
}; /* @keyframes explore-fade-in-fcp-fix-8bvbv4 */
----motion-zoomIn-bvrxdw: @keyframes zoomIn-bvrxdw {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}; /* @keyframes zoomIn-bvrxdw */
----motion-homepage-cta-card-imagestack-bottom_card_rotate-1q8jscs: @keyframes homepage-cta-card-imagestack-bottom_card_rotate-1q8jscs {
0% { rot… <0.2KB elided>; /* @keyframes homepage-cta-card-imagestack-bottom_card_rotate-1q8jscs */
----motion-homepage-cta-card-imagestack-bottom_card_translate-1q8jscs: @keyframes homepage-cta-card-imagestack-bottom_card_translate-1q8jscs {
0% {… <0.3KB elided>; /* @keyframes homepage-cta-card-imagestack-bottom_card_translate-1q8jscs */
----motion-homepage-cta-card-imagestack-bottom_card_fade-1q8jscs: @keyframes homepage-cta-card-imagestack-bottom_card_fade-1q8jscs {
0% { opaci… <0.3KB elided>; /* @keyframes homepage-cta-card-imagestack-bottom_card_fade-1q8jscs */
----motion-homepage-cta-card-imagestack-bottom_card_scale-1q8jscs: @keyframes homepage-cta-card-imagestack-bottom_card_scale-1q8jscs {
0% { scal… <0.2KB elided>; /* @keyframes homepage-cta-card-imagestack-bottom_card_scale-1q8jscs */
----motion-homepage-cta-card-imagestack-middle_card_rotate-m5zjsd: @keyframes homepage-cta-card-imagestack-middle_card_rotate-m5zjsd {
0% { rota… <0.2KB elided>; /* @keyframes homepage-cta-card-imagestack-middle_card_rotate-m5zjsd */
----motion-homepage-cta-card-imagestack-middle_card_translate-m5zjsd: @keyframes homepage-cta-card-imagestack-middle_card_translate-m5zjsd {
0% { t… <0.3KB elided>; /* @keyframes homepage-cta-card-imagestack-middle_card_translate-m5zjsd */
----motion-homepage-cta-card-imagestack-middle_card_fade-m5zjsd: @keyframes homepage-cta-card-imagestack-middle_card_fade-m5zjsd {
0% { opacit… <0.3KB elided>; /* @keyframes homepage-cta-card-imagestack-middle_card_fade-m5zjsd */
----motion-homepage-cta-card-imagestack-middle_card_scale-m5zjsd: @keyframes homepage-cta-card-imagestack-middle_card_scale-m5zjsd {
0% { scale… <0.2KB elided>; /* @keyframes homepage-cta-card-imagestack-middle_card_scale-m5zjsd */
----motion-homepage-cta-card-imagestack-top_card_rotate-7jgun9: @keyframes homepage-cta-card-imagestack-top_card_rotate-7jgun9 {
0% { rotate:… <0.2KB elided>; /* @keyframes homepage-cta-card-imagestack-top_card_rotate-7jgun9 */
----motion-homepage-cta-card-imagestack-top_card_translate-7jgun9: @keyframes homepage-cta-card-imagestack-top_card_translate-7jgun9 {
0% { tran… <0.3KB elided>; /* @keyframes homepage-cta-card-imagestack-top_card_translate-7jgun9 */
----motion-homepage-cta-card-imagestack-top_card_fade-7jgun9: @keyframes homepage-cta-card-imagestack-top_card_fade-7jgun9 {
0% { opacity:… <0.3KB elided>; /* @keyframes homepage-cta-card-imagestack-top_card_fade-7jgun9 */
----motion-homepage-cta-card-imagestack-top_card_scale-7jgun9: @keyframes homepage-cta-card-imagestack-top_card_scale-7jgun9 {
0% { scale: v… <0.2KB elided>; /* @keyframes homepage-cta-card-imagestack-top_card_scale-7jgun9 */
----motion-reveal-large-1ssewmc: @keyframes reveal-large-1ssewmc {
0% { transform: translateY(178px); }
100% { transform: translateY(0px); }
}; /* @keyframes reveal-large-1ssewmc */
----motion-reveal-medium-1ssewmc: @keyframes reveal-medium-1ssewmc {
0% { transform: translateY(152px); }
100% { transform: translateY(0px); }
}; /* @keyframes reveal-medium-1ssewmc */
----motion-reveal-1ssewmc: @keyframes reveal-1ssewmc {
0% { transform: translateY(70px); }
100% { transform: translateY(0px); }
}; /* @keyframes reveal-1ssewmc */
----motion-slide-up-3xqv01: @keyframes slide-up-3xqv01 {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes slide-up-3xqv01 */
----motion-slide-up-17udzfw: @keyframes slide-up-17udzfw {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes slide-up-17udzfw */
----motion-slide-up-4jkh2b: @keyframes slide-up-4jkh2b {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes slide-up-4jkh2b */
----motion-animation-30441e-19zvxzu: @keyframes animation-30441e-19zvxzu {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes animation-30441e-19zvxzu */
----motion-fade-in-wib1wj: @keyframes fade-in-wib1wj {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-wib1wj */
----motion-animate-map-pill-marker-fade-in-v0fjxy: @keyframes animate-map-pill-marker-fade-in-v0fjxy {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes animate-map-pill-marker-fade-in-v0fjxy */
----motion-fade-in-62cjz: @keyframes fade-in-62cjz {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-62cjz */
----motion-animation-e891c8-1m5vpkp: @keyframes animation-e891c8-1m5vpkp {
0% { opacity: 0; transform: translateY(… <0.2KB elided>; /* @keyframes animation-e891c8-1m5vpkp */
----motion-heroFadeIn-1gkn33d: @keyframes heroFadeIn-1gkn33d {
0% { opacity: 0; transform: translateY(-82px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes heroFadeIn-1gkn33d */
----motion-heroFadeInPhase3-b1i0kn: @keyframes heroFadeInPhase3-b1i0kn {
0% { opacity: 0; transform: translateY(-40px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes heroFadeInPhase3-b1i0kn */
----motion-slideFadeIn-qo8jk4: @keyframes slideFadeIn-qo8jk4 {
0% { opacity: 0; transform: translateY(-14px); }
80% { opacity: 1; }
100% { transform: translateY(0px); }
}; /* @keyframes slideFadeIn-qo8jk4 */
----motion-relative-move-hf1zvn: @keyframes relative-move-hf1zvn {
0% { filter: var(--view-transition_from-fil… <0.5KB elided>; /* @keyframes relative-move-hf1zvn */
----motion-fadeEnter-hf1zvn: @keyframes fadeEnter-hf1zvn {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-hf1zvn */
----motion-dls_sheets_fadeIn-hf1zvn: @keyframes dls_sheets_fadeIn-hf1zvn {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-hf1zvn */
----motion-dls_sheets_slideUp-hf1zvn: @keyframes dls_sheets_slideUp-hf1zvn {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-hf1zvn */
----motion-relative-move-16gv7q4: @keyframes relative-move-16gv7q4 {
0% { filter: var(--view-transition_from-fi… <0.5KB elided>; /* @keyframes relative-move-16gv7q4 */
----motion-fadeLeave-16gv7q4: @keyframes fadeLeave-16gv7q4 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-16gv7q4 */
----motion-dls_sheets_fadeOut-16gv7q4: @keyframes dls_sheets_fadeOut-16gv7q4 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-16gv7q4 */
----motion-dls_sheets_slideDown-16gv7q4: @keyframes dls_sheets_slideDown-16gv7q4 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-16gv7q4 */
----motion-dls_sheets_slideDownOut-16gv7q4: @keyframes dls_sheets_slideDownOut-16gv7q4 {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-16gv7q4 */
----motion-banner-exiting-1x048vb: @keyframes banner-exiting-1x048vb {
0% { max-height: 300px; }
100% { max-height: 0px; }
}; /* @keyframes banner-exiting-1x048vb */
----motion-banner-entering-1x048vb: @keyframes banner-entering-1x048vb {
0% { max-height: 0px; }
100% { max-height: 300px; }
}; /* @keyframes banner-entering-1x048vb */
----motion-marqueeBookItFadeIn-yobdb2: @keyframes marqueeBookItFadeIn-yobdb2 {
0% { opacity: 0; visibility: hidden; }
100% { opacity: 1; visibility: visible; }
}; /* @keyframes marqueeBookItFadeIn-yobdb2 */
----motion-marqueeBookItFadeOut-1t28lve: @keyframes marqueeBookItFadeOut-1t28lve {
0% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}; /* @keyframes marqueeBookItFadeOut-1t28lve */
----motion-fadeInAnimation-42lqky: @keyframes fadeInAnimation-42lqky {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeInAnimation-42lqky */
----motion-fadeIn-1eeg1oa: @keyframes fadeIn-1eeg1oa {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1eeg1oa */
----motion-animation-opacity-1te61mb: @keyframes animation-opacity-1te61mb {
0% { opacity: 0; transform: translateY(16px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes animation-opacity-1te61mb */
----motion-fadeEnter-6ukaut: @keyframes fadeEnter-6ukaut {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-6ukaut */
----motion-dls_sheets_fadeIn-6ukaut: @keyframes dls_sheets_fadeIn-6ukaut {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-6ukaut */
----motion-dls_sheets_slideUp-6ukaut: @keyframes dls_sheets_slideUp-6ukaut {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-6ukaut */
----motion-fadeLeave-zyj83h: @keyframes fadeLeave-zyj83h {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-zyj83h */
----motion-dls_sheets_fadeOut-zyj83h: @keyframes dls_sheets_fadeOut-zyj83h {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-zyj83h */
----motion-dls_sheets_slideDown-zyj83h: @keyframes dls_sheets_slideDown-zyj83h {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-zyj83h */
----motion-dls_sheets_slideDownOut-zyj83h: @keyframes dls_sheets_slideDownOut-zyj83h {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-zyj83h */
----motion-fadeEnter-tcq51w: @keyframes fadeEnter-tcq51w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-tcq51w */
----motion-dls_sheets_fadeIn-tcq51w: @keyframes dls_sheets_fadeIn-tcq51w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-tcq51w */
----motion-dls_sheets_slideUp-tcq51w: @keyframes dls_sheets_slideUp-tcq51w {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-tcq51w */
----motion-fadeEnter-1wnv4ks: @keyframes fadeEnter-1wnv4ks {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1wnv4ks */
----motion-dls_sheets_fadeIn-1wnv4ks: @keyframes dls_sheets_fadeIn-1wnv4ks {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1wnv4ks */
----motion-dls_sheets_slideUp-1wnv4ks: @keyframes dls_sheets_slideUp-1wnv4ks {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1wnv4ks */
----motion-fade-in-dio67w: @keyframes fade-in-dio67w {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-dio67w */
----motion-opacity-fade-in-13nlxly: @keyframes opacity-fade-in-13nlxly {
0% { opacity: 0.01; }
100% { opacity: 1; }
}; /* @keyframes opacity-fade-in-13nlxly */
----motion-a11y_homepage-shortcut-imagestack-center_card_fade-q334ea: @keyframes a11y_homepage-shortcut-imagestack-center_card_fade-q334ea {
0% { o… <0.3KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-center_card_fade-q334ea */
----motion-homepage-shortcut-imagestack-center_card_rotate-q334ea: @keyframes homepage-shortcut-imagestack-center_card_rotate-q334ea {
0% { rota… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-center_card_rotate-q334ea */
----motion-homepage-shortcut-imagestack-center_card_fade-q334ea: @keyframes homepage-shortcut-imagestack-center_card_fade-q334ea {
0% { opacit… <0.3KB elided>; /* @keyframes homepage-shortcut-imagestack-center_card_fade-q334ea */
----motion-homepage-shortcut-imagestack-center_card_scale-q334ea: @keyframes homepage-shortcut-imagestack-center_card_scale-q334ea {
0% { scale… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-center_card_scale-q334ea */
----motion-a11y_homepage-shortcut-imagestack-left_card_slide-j0lr8z: @keyframes a11y_homepage-shortcut-imagestack-left_card_slide-j0lr8z {
0% { tr… <0.3KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-left_card_slide-j0lr8z */
----motion-a11y_homepage-shortcut-imagestack-left_card_rotate-j0lr8z: @keyframes a11y_homepage-shortcut-imagestack-left_card_rotate-j0lr8z {
0% { r… <0.2KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-left_card_rotate-j0lr8z */
----motion-a11y_homepage-shortcut-imagestack-left_card_fade-j0lr8z: @keyframes a11y_homepage-shortcut-imagestack-left_card_fade-j0lr8z {
0% { opa… <0.3KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-left_card_fade-j0lr8z */
----motion-homepage-shortcut-imagestack-left_card_rotate-j0lr8z: @keyframes homepage-shortcut-imagestack-left_card_rotate-j0lr8z {
0% { rotate… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-left_card_rotate-j0lr8z */
----motion-homepage-shortcut-imagestack-left_card_fade-j0lr8z: @keyframes homepage-shortcut-imagestack-left_card_fade-j0lr8z {
0% { opacity:… <0.3KB elided>; /* @keyframes homepage-shortcut-imagestack-left_card_fade-j0lr8z */
----motion-homepage-shortcut-imagestack-left_card_slide-j0lr8z: @keyframes homepage-shortcut-imagestack-left_card_slide-j0lr8z {
0% { transla… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-left_card_slide-j0lr8z */
----motion-homepage-shortcut-imagestack-left_card_scale-j0lr8z: @keyframes homepage-shortcut-imagestack-left_card_scale-j0lr8z {
0% { scale:… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-left_card_scale-j0lr8z */
----motion-a11y_homepage-shortcut-imagestack-right_card_slide-1fxj9s8: @keyframes a11y_homepage-shortcut-imagestack-right_card_slide-1fxj9s8 {
0% {… <0.3KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-right_card_slide-1fxj9s8 */
----motion-a11y_homepage-shortcut-imagestack-right_card_rotate-1fxj9s8: @keyframes a11y_homepage-shortcut-imagestack-right_card_rotate-1fxj9s8 {
0% {… <0.2KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-right_card_rotate-1fxj9s8 */
----motion-a11y_homepage-shortcut-imagestack-right_card_fade-1fxj9s8: @keyframes a11y_homepage-shortcut-imagestack-right_card_fade-1fxj9s8 {
0% { o… <0.3KB elided>; /* @keyframes a11y_homepage-shortcut-imagestack-right_card_fade-1fxj9s8 */
----motion-homepage-shortcut-imagestack-right_card_rotate-1fxj9s8: @keyframes homepage-shortcut-imagestack-right_card_rotate-1fxj9s8 {
0% { rota… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-right_card_rotate-1fxj9s8 */
----motion-homepage-shortcut-imagestack-right_card_fade-1fxj9s8: @keyframes homepage-shortcut-imagestack-right_card_fade-1fxj9s8 {
0% { opacit… <0.3KB elided>; /* @keyframes homepage-shortcut-imagestack-right_card_fade-1fxj9s8 */
----motion-homepage-shortcut-imagestack-right_card_slide-1fxj9s8: @keyframes homepage-shortcut-imagestack-right_card_slide-1fxj9s8 {
0% { trans… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-right_card_slide-1fxj9s8 */
----motion-homepage-shortcut-imagestack-right_card_scale-1fxj9s8: @keyframes homepage-shortcut-imagestack-right_card_scale-1fxj9s8 {
0% { scale… <0.2KB elided>; /* @keyframes homepage-shortcut-imagestack-right_card_scale-1fxj9s8 */
----motion-homepage-shortcut-card_card_fade_desktop-qbmxb8: @keyframes homepage-shortcut-card_card_fade_desktop-qbmxb8 {
0% { opacity: va… <0.3KB elided>; /* @keyframes homepage-shortcut-card_card_fade_desktop-qbmxb8 */
----motion-homepage-shortcut-card_card_translate_desktop-qbmxb8: @keyframes homepage-shortcut-card_card_translate_desktop-qbmxb8 {
0% { transl… <0.2KB elided>; /* @keyframes homepage-shortcut-card_card_translate_desktop-qbmxb8 */
----motion-homepage-shortcut-card_card_rotate-qbmxb8: @keyframes homepage-shortcut-card_card_rotate-qbmxb8 {
0% { rotate: var(--homepage-shortcut-card_card_rotate_from,-4deg); }
100% { rotate: var(--homepage-shortcut-card_card_rotate_to,0deg); }
}; /* @keyframes homepage-shortcut-card_card_rotate-qbmxb8 */
----motion-homepage-shortcut-card_card_fade-qbmxb8: @keyframes homepage-shortcut-card_card_fade-qbmxb8 {
0% { opacity: var(--home… <0.2KB elided>; /* @keyframes homepage-shortcut-card_card_fade-qbmxb8 */
----motion-homepage-shortcut-card_card_scale-qbmxb8: @keyframes homepage-shortcut-card_card_scale-qbmxb8 {
0% { scale: var(--homepage-shortcut-card_card_scale_from,0.6 0.6); }
100% { scale: var(--homepage-shortcut-card_card_scale_to); }
}; /* @keyframes homepage-shortcut-card_card_scale-qbmxb8 */
----motion-homepage-shortcut-card-secondary_card_fade-1svehb: @keyframes homepage-shortcut-card-secondary_card_fade-1svehb {
0% { opacity:… <0.3KB elided>; /* @keyframes homepage-shortcut-card-secondary_card_fade-1svehb */
----motion-homepage-shortcut-card-secondary_card_translateX-1svehb: @keyframes homepage-shortcut-card-secondary_card_translateX-1svehb {
0% { tra… <0.2KB elided>; /* @keyframes homepage-shortcut-card-secondary_card_translateX-1svehb */
----motion-homepage-shortcut-card-secondary_card_fade-143nng2: @keyframes homepage-shortcut-card-secondary_card_fade-143nng2 {
0% { opacity:… <0.3KB elided>; /* @keyframes homepage-shortcut-card-secondary_card_fade-143nng2 */
----motion-fadeEnter-cezbx7: @keyframes fadeEnter-cezbx7 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-cezbx7 */
----motion-dls_sheets_fadeIn-cezbx7: @keyframes dls_sheets_fadeIn-cezbx7 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-cezbx7 */
----motion-dls_sheets_slideUp-cezbx7: @keyframes dls_sheets_slideUp-cezbx7 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-cezbx7 */
----motion-fadeLeave-1kxildz: @keyframes fadeLeave-1kxildz {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1kxildz */
----motion-dls_sheets_fadeOut-1kxildz: @keyframes dls_sheets_fadeOut-1kxildz {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1kxildz */
----motion-dls_sheets_slideDown-1kxildz: @keyframes dls_sheets_slideDown-1kxildz {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1kxildz */
----motion-dls_sheets_slideDownOut-1kxildz: @keyframes dls_sheets_slideDownOut-1kxildz {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-1kxildz */
----motion-header-fade-in-188y1t: @keyframes header-fade-in-188y1t {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes header-fade-in-188y1t */
----motion-slide-down-1bca83u: @keyframes slide-down-1bca83u {
0% { transform: translateY(-50px); }
100% { transform: translateY(0px); }
}; /* @keyframes slide-down-1bca83u */
----motion-opacity-fade-in-1bca83u: @keyframes opacity-fade-in-1bca83u {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes opacity-fade-in-1bca83u */
----motion-control-fade-in-a3babj: @keyframes control-fade-in-a3babj {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes control-fade-in-a3babj */
----motion-dot-arsznl: @keyframes dot-arsznl {
100% { opacity: 0; }
80% { opacity: 0; }
0% { opacity: 0; }
50% { opacity: 1; }
30% { opacity: 1; }
}; /* @keyframes dot-arsznl */
----motion-popupSlideEnter-1gqssv3: @keyframes popupSlideEnter-1gqssv3 {
0% { opacity: 0; transform: translate(100%, 0px); }
100% { opacity: 1; transform: none; }
}; /* @keyframes popupSlideEnter-1gqssv3 */
----motion-fadeEnter-1gqssv3: @keyframes fadeEnter-1gqssv3 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1gqssv3 */
----motion-dls_sheets_fadeIn-1gqssv3: @keyframes dls_sheets_fadeIn-1gqssv3 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1gqssv3 */
----motion-dls_sheets_slideUp-1gqssv3: @keyframes dls_sheets_slideUp-1gqssv3 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1gqssv3 */
----motion-popupSlideLeave-6zdzg4: @keyframes popupSlideLeave-6zdzg4 {
0% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translate(100%, 0px); }
}; /* @keyframes popupSlideLeave-6zdzg4 */
----motion-fadeLeave-6zdzg4: @keyframes fadeLeave-6zdzg4 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-6zdzg4 */
----motion-dls_sheets_fadeOut-6zdzg4: @keyframes dls_sheets_fadeOut-6zdzg4 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-6zdzg4 */
----motion-dls_sheets_slideDown-6zdzg4: @keyframes dls_sheets_slideDown-6zdzg4 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-6zdzg4 */
----motion-dls_sheets_slideDownOut-6zdzg4: @keyframes dls_sheets_slideDownOut-6zdzg4 {
0% { transform: translate(0px, 0px); opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0; transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDownOut-6zdzg4 */
----motion-fadeEnter-nvaz5f: @keyframes fadeEnter-nvaz5f {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-nvaz5f */
----motion-dls_sheets_fadeIn-nvaz5f: @keyframes dls_sheets_fadeIn-nvaz5f {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-nvaz5f */
----motion-dls_sheets_slideUp-nvaz5f: @keyframes dls_sheets_slideUp-nvaz5f {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-nvaz5f */
----motion-fadeEnter-1tq5490: @keyframes fadeEnter-1tq5490 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1tq5490 */
----motion-dls_sheets_fadeIn-1tq5490: @keyframes dls_sheets_fadeIn-1tq5490 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1tq5490 */
----motion-dls_sheets_slideUp-1tq5490: @keyframes dls_sheets_slideUp-1tq5490 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1tq5490 */
----motion-fadeEnter-16fpihb: @keyframes fadeEnter-16fpihb {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-16fpihb */
----motion-growLeave: @keyframes growLeave {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.05); }
}; /* @keyframes growLeave */
----motion-growEnter-16fpihb: @keyframes growEnter-16fpihb {
0% { opacity: 0; transform: scale(0.05); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes growEnter-16fpihb */
----motion-fadeLeave-1kwta4l: @keyframes fadeLeave-1kwta4l {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-1kwta4l */
----motion-dls_sheets_fadeOut-1kwta4l: @keyframes dls_sheets_fadeOut-1kwta4l {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-1kwta4l */
----motion-dls_sheets_slideDown-1kwta4l: @keyframes dls_sheets_slideDown-1kwta4l {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0,var(--slide-down_amount,50px)); }
}; /* @keyframes dls_sheets_slideDown-1kwta4l */
----motion-search-bar_inbox_title_exit-1e1i928: @keyframes search-bar_inbox_title_exit-1e1i928 {
0% { opacity: var(--search-b… <0.2KB elided>; /* @keyframes search-bar_inbox_title_exit-1e1i928 */
----motion-search-bar_inbox_title_enter-1e1i928: @keyframes search-bar_inbox_title_enter-1e1i928 {
0% { opacity: var(--search-… <0.2KB elided>; /* @keyframes search-bar_inbox_title_enter-1e1i928 */
----motion-search-bar_trailing_btn_exit-1e1i928: @keyframes search-bar_trailing_btn_exit-1e1i928 {
0% { opacity: var(--search-… <0.2KB elided>; /* @keyframes search-bar_trailing_btn_exit-1e1i928 */
----motion-search-bar_trailing_btn_enter-1e1i928: @keyframes search-bar_trailing_btn_enter-1e1i928 {
0% { opacity: var(--search… <0.2KB elided>; /* @keyframes search-bar_trailing_btn_enter-1e1i928 */
----motion-search-bar_search_btn_exit-1e1i928: @keyframes search-bar_search_btn_exit-1e1i928 {
0% { opacity: var(--search-ba… <0.2KB elided>; /* @keyframes search-bar_search_btn_exit-1e1i928 */
----motion-search-bar_search_btn_enter-1e1i928: @keyframes search-bar_search_btn_enter-1e1i928 {
0% { opacity: var(--search-b… <0.2KB elided>; /* @keyframes search-bar_search_btn_enter-1e1i928 */
----motion-fadeEnter-bv84lc: @keyframes fadeEnter-bv84lc {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-bv84lc */
----motion-dls_sheets_fadeIn-bv84lc: @keyframes dls_sheets_fadeIn-bv84lc {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-bv84lc */
----motion-dls_sheets_slideUp-bv84lc: @keyframes dls_sheets_slideUp-bv84lc {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-bv84lc */
----motion-fadeEnter-1ikjlt8: @keyframes fadeEnter-1ikjlt8 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-1ikjlt8 */
----motion-dls_sheets_fadeIn-1ikjlt8: @keyframes dls_sheets_fadeIn-1ikjlt8 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-1ikjlt8 */
----motion-dls_sheets_slideUp-1ikjlt8: @keyframes dls_sheets_slideUp-1ikjlt8 {
0% { transform: translate(0,var(--slide-up_amount,100px)); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideUp-1ikjlt8 */
----motion-thread-header_show_details_btn_fade_out-o2womc: @keyframes thread-header_show_details_btn_fade_out-o2womc {
0% { opacity: var… <0.3KB elided>; /* @keyframes thread-header_show_details_btn_fade_out-o2womc */
----motion-fade-in_fade-157gvr6: @keyframes fade-in_fade-157gvr6 {
0% { opacity: var(--fade-in_fade_from,0); }
0% { opacity: var(--fade-in_fade_from,0); }
100% { opacity: var(--fade-in_fade_to,1); }
}; /* @keyframes fade-in_fade-157gvr6 */
----motion-fade-in-slide-up_translate-p3ojz8: @keyframes fade-in-slide-up_translate-p3ojz8 {
0% { translate: var(--fade-in-slide-up_translate_from,0 75vh); }
100% { translate: var(--fade-in-slide-up_translate_to,0 0); }
}; /* @keyframes fade-in-slide-up_translate-p3ojz8 */
----motion-fade-in-slide-up_fade-p3ojz8: @keyframes fade-in-slide-up_fade-p3ojz8 {
0% { opacity: var(--fade-in-slide-u… <0.2KB elided>; /* @keyframes fade-in-slide-up_fade-p3ojz8 */
----motion-slide-down-wrv2m2: @keyframes slide-down-wrv2m2 {
0% { opacity: var(--slide-down_from_opacity,1)… <0.5KB elided>; /* @keyframes slide-down-wrv2m2 */
----motion-slide-up-wrv2m2: @keyframes slide-up-wrv2m2 {
0% { opacity: var(--slide-up_from_opacity,0); tr… <0.5KB elided>; /* @keyframes slide-up-wrv2m2 */
----motion-opacity-wrv2m2: @keyframes opacity-wrv2m2 {
0% { opacity: var(--opacity_from,1); }
0% { opacity: var(--opacity_from,1); }
100% { opacity: var(--opacity_to,0); }
}; /* @keyframes opacity-wrv2m2 */
----motion-zoomIn-1uazucs: @keyframes zoomIn-1uazucs {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}; /* @keyframes zoomIn-1uazucs */
----motion-shrink-title-zyzbo: @keyframes shrink-title-zyzbo {
0% { transform: scale(1); }
100% { transform: scale(0.6875); }
}; /* @keyframes shrink-title-zyzbo */
----motion-fade-up-v78foa: @keyframes fade-up-v78foa {
0% { margin-top: 6px; opacity: 1; }
100% { margin-top: -20px; opacity: 0; }
}; /* @keyframes fade-up-v78foa */
----motion-transparency-qd9ggi: @keyframes transparency-qd9ggi {
0% { opacity: 0; box-shadow: rgba(0, 0, 0, 0) 0px 1px 1px 0px; }
100% { opacity: 1; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px; }
}; /* @keyframes transparency-qd9ggi */
----motion-scaleEnter-1x7hlyx: @keyframes scaleEnter-1x7hlyx {
0% { transform: scale(0.05); }
100% { transform: scale(1); }
}; /* @keyframes scaleEnter-1x7hlyx */
----motion-growEnter-1x7hlyx: @keyframes growEnter-1x7hlyx {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes growEnter-1x7hlyx */
----motion-scaleLeave-5vlqnp: @keyframes scaleLeave-5vlqnp {
0% { transform: scale(1); }
100% { transform: scale(0.05); }
}; /* @keyframes scaleLeave-5vlqnp */
----motion-growLeave-5vlqnp: @keyframes growLeave-5vlqnp {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes growLeave-5vlqnp */
----motion-fadeInUpWishlistStickyHeader-1i5f4kw: @keyframes fadeInUpWishlistStickyHeader-1i5f4kw {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes fadeInUpWishlistStickyHeader-1i5f4kw */
----motion-fadeOutDownWishlistStickyHeader-ffsrbv: @keyframes fadeOutDownWishlistStickyHeader-ffsrbv {
0% { opacity: 1; transform: translateY(0px); }
100% { opacity: 0; transform: translateY(12px); }
}; /* @keyframes fadeOutDownWishlistStickyHeader-ffsrbv */
----motion-expand-1czmlb3: @keyframes expand-1czmlb3 {
0% { height: var(--container_height-from); }
100% { height: var(--container_height-to); }
}; /* @keyframes expand-1czmlb3 */
----motion-fadeIn-70e2dn: @keyframes fadeIn-70e2dn {
0% { opacity: 0; }
100% { translate: 0px; opacity: 1; }
}; /* @keyframes fadeIn-70e2dn */
----motion-fade-in-1342hur: @keyframes fade-in-1342hur {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fade-in-1342hur */
----motion-fade-out-1gw565x: @keyframes fade-out-1gw565x {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fade-out-1gw565x */
----motion-explore-fade-in-fcp-fix-x3t6ok: @keyframes explore-fade-in-fcp-fix-x3t6ok {
0% { opacity: 0.01; }
100% { opacity: 1; }
}; /* @keyframes explore-fade-in-fcp-fix-x3t6ok */
----motion-explore-fade-in-fcp-fix-152bpv: @keyframes explore-fade-in-fcp-fix-152bpv {
0% { opacity: 0.01; }
100% { opacity: 1; }
}; /* @keyframes explore-fade-in-fcp-fix-152bpv */
----motion-shadow-pulse-map-current-location-marker-mk7jjv: @keyframes shadow-pulse-map-current-location-marker-mk7jjv {
0% { width: 22px; height: 22px; }
50% { width: 44px; height: 44px; }
100% { width: 22px; height: 22px; }
}; /* @keyframes shadow-pulse-map-current-location-marker-mk7jjv */
----motion-fadeIn-394rr1: @keyframes fadeIn-394rr1 {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-394rr1 */
----motion-map-search-top-hanging-fadeIn-1sbpxhz: @keyframes map-search-top-hanging-fadeIn-1sbpxhz {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0px); }
}; /* @keyframes map-search-top-hanging-fadeIn-1sbpxhz */
----motion-secondStep-9qoit7: @keyframes secondStep-9qoit7 {
0% { transform: translate(-50%,var(--pill-v-offset)) scale(1.077); }
100% { transform: translate(-50%,var(--pill-v-offset)) scale(1); }
}; /* @keyframes secondStep-9qoit7 */
----motion-firstStep-9qoit7: @keyframes firstStep-9qoit7 {
0% { transform: translate(-50%,var(--pill-v-offset)) scale(1); }
100% { transform: translate(-50%,var(--pill-v-offset)) scale(1.077); }
}; /* @keyframes firstStep-9qoit7 */
----motion-explore-fade-in-fcp-fix-6vvda9: @keyframes explore-fade-in-fcp-fix-6vvda9 {
0% { opacity: 0.01; }
100% { opacity: 1; }
}; /* @keyframes explore-fade-in-fcp-fix-6vvda9 */
----motion-animate-map-pill-current-location-control-loading-uxfuz7: @keyframes animate-map-pill-current-location-control-loading-uxfuz7 {
0% { opacity: 1; }
100% { opacity: 0.4; }
}; /* @keyframes animate-map-pill-current-location-control-loading-uxfuz7 */
----motion-incoming-tile-2-of-2_tile_translate-1jw2uke: @keyframes incoming-tile-2-of-2_tile_translate-1jw2uke {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-2-of-2_tile_translate-1jw2uke */
----motion-incoming-tile-2-of-2_tile_rotate-1jw2uke: @keyframes incoming-tile-2-of-2_tile_rotate-1jw2uke {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-2-of-2_tile_rotate-1jw2uke */
----motion-incoming-tile-2-of-2_tile_scale-1jw2uke: @keyframes incoming-tile-2-of-2_tile_scale-1jw2uke {
0% { scale: var(--incoming-tile-2-of-2_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-2-of-2_tile_scale_to); }
}; /* @keyframes incoming-tile-2-of-2_tile_scale-1jw2uke */
----motion-incoming-tile-1-of-2_tile_translate-1jw2uke: @keyframes incoming-tile-1-of-2_tile_translate-1jw2uke {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-1-of-2_tile_translate-1jw2uke */
----motion-incoming-tile-1-of-2_tile_rotate-1jw2uke: @keyframes incoming-tile-1-of-2_tile_rotate-1jw2uke {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-1-of-2_tile_rotate-1jw2uke */
----motion-incoming-tile-1-of-2_tile_scale-1jw2uke: @keyframes incoming-tile-1-of-2_tile_scale-1jw2uke {
0% { scale: var(--incoming-tile-1-of-2_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-1-of-2_tile_scale_to); }
}; /* @keyframes incoming-tile-1-of-2_tile_scale-1jw2uke */
----motion-incoming-tile-3-of-3_tile_translate-1mfdxyg: @keyframes incoming-tile-3-of-3_tile_translate-1mfdxyg {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-3-of-3_tile_translate-1mfdxyg */
----motion-incoming-tile-3-of-3_tile_rotate-1mfdxyg: @keyframes incoming-tile-3-of-3_tile_rotate-1mfdxyg {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-3-of-3_tile_rotate-1mfdxyg */
----motion-incoming-tile-3-of-3_tile_scale-1mfdxyg: @keyframes incoming-tile-3-of-3_tile_scale-1mfdxyg {
0% { scale: var(--incoming-tile-3-of-3_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-3-of-3_tile_scale_to); }
}; /* @keyframes incoming-tile-3-of-3_tile_scale-1mfdxyg */
----motion-incoming-tile-2-of-3_tile_translate-1mfdxyg: @keyframes incoming-tile-2-of-3_tile_translate-1mfdxyg {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-2-of-3_tile_translate-1mfdxyg */
----motion-incoming-tile-2-of-3_tile_rotate-1mfdxyg: @keyframes incoming-tile-2-of-3_tile_rotate-1mfdxyg {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-2-of-3_tile_rotate-1mfdxyg */
----motion-incoming-tile-2-of-3_tile_scale-1mfdxyg: @keyframes incoming-tile-2-of-3_tile_scale-1mfdxyg {
0% { scale: var(--incoming-tile-2-of-3_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-2-of-3_tile_scale_to); }
}; /* @keyframes incoming-tile-2-of-3_tile_scale-1mfdxyg */
----motion-incoming-tile-1-of-3_tile_translate-1mfdxyg: @keyframes incoming-tile-1-of-3_tile_translate-1mfdxyg {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-1-of-3_tile_translate-1mfdxyg */
----motion-incoming-tile-1-of-3_tile_rotate-1mfdxyg: @keyframes incoming-tile-1-of-3_tile_rotate-1mfdxyg {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-1-of-3_tile_rotate-1mfdxyg */
----motion-incoming-tile-1-of-3_tile_scale-1mfdxyg: @keyframes incoming-tile-1-of-3_tile_scale-1mfdxyg {
0% { scale: var(--incoming-tile-1-of-3_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-1-of-3_tile_scale_to); }
}; /* @keyframes incoming-tile-1-of-3_tile_scale-1mfdxyg */
----motion-incoming-tile-2-of-2_tile_translate-1mfdxyg: @keyframes incoming-tile-2-of-2_tile_translate-1mfdxyg {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-2-of-2_tile_translate-1mfdxyg */
----motion-incoming-tile-2-of-2_tile_rotate-1mfdxyg: @keyframes incoming-tile-2-of-2_tile_rotate-1mfdxyg {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-2-of-2_tile_rotate-1mfdxyg */
----motion-incoming-tile-2-of-2_tile_scale-1mfdxyg: @keyframes incoming-tile-2-of-2_tile_scale-1mfdxyg {
0% { scale: var(--incoming-tile-2-of-2_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-2-of-2_tile_scale_to); }
}; /* @keyframes incoming-tile-2-of-2_tile_scale-1mfdxyg */
----motion-incoming-tile-1-of-2_tile_translate-1mfdxyg: @keyframes incoming-tile-1-of-2_tile_translate-1mfdxyg {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-1-of-2_tile_translate-1mfdxyg */
----motion-incoming-tile-1-of-2_tile_rotate-1mfdxyg: @keyframes incoming-tile-1-of-2_tile_rotate-1mfdxyg {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-1-of-2_tile_rotate-1mfdxyg */
----motion-incoming-tile-1-of-2_tile_scale-1mfdxyg: @keyframes incoming-tile-1-of-2_tile_scale-1mfdxyg {
0% { scale: var(--incoming-tile-1-of-2_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-1-of-2_tile_scale_to); }
}; /* @keyframes incoming-tile-1-of-2_tile_scale-1mfdxyg */
----motion-incoming-tile-1-of-1_tile_translate-1mfdxyg: @keyframes incoming-tile-1-of-1_tile_translate-1mfdxyg {
0% { translate: var(… <0.2KB elided>; /* @keyframes incoming-tile-1-of-1_tile_translate-1mfdxyg */
----motion-incoming-tile-1-of-1_tile_rotate-1mfdxyg: @keyframes incoming-tile-1-of-1_tile_rotate-1mfdxyg {
0% { rotate: var(--inco… <0.2KB elided>; /* @keyframes incoming-tile-1-of-1_tile_rotate-1mfdxyg */
----motion-incoming-tile-1-of-1_tile_scale-1mfdxyg: @keyframes incoming-tile-1-of-1_tile_scale-1mfdxyg {
0% { scale: var(--incoming-tile-1-of-1_tile_scale_from,0 0); }
100% { scale: var(--incoming-tile-1-of-1_tile_scale_to); }
}; /* @keyframes incoming-tile-1-of-1_tile_scale-1mfdxyg */
----motion-trip-marker-scale-in-kjx6x: @keyframes trip-marker-scale-in-kjx6x {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}; /* @keyframes trip-marker-scale-in-kjx6x */
----motion-titleEnter-mopntn: @keyframes titleEnter-mopntn {
0% { color: var(--palette-grey700); font-weigh… <0.2KB elided>; /* @keyframes titleEnter-mopntn */
----motion-translate-nawj7: @keyframes translate-nawj7 {
0% { translate: var(--translate_from,100%); }
100% { translate: var(--translate_to,0px); }
}; /* @keyframes translate-nawj7 */
----motion-translate-bu0zm6: @keyframes translate-bu0zm6 {
0% { translate: var(--translate_from,-100%); }
100% { translate: var(--translate_to,0px); }
}; /* @keyframes translate-bu0zm6 */
----motion-translate-1vj4zy5: @keyframes translate-1vj4zy5 {
0% { translate: var(--translate_from,0px); }
100% { translate: var(--translate_to,100%); }
}; /* @keyframes translate-1vj4zy5 */
----motion-translate-1vha93s: @keyframes translate-1vha93s {
0% { translate: var(--translate_from,0px); }
100% { translate: var(--translate_to,-100%); }
}; /* @keyframes translate-1vha93s */
----motion-opacity-1wxvahd: @keyframes opacity-1wxvahd {
0% { opacity: var(--opacity_from,0); }
0% { opacity: var(--opacity_from,0); }
100% { opacity: var(--opacity_to,0.4); }
}; /* @keyframes opacity-1wxvahd */
----motion-opacity-hlpv8g: @keyframes opacity-hlpv8g {
0% { opacity: var(--opacity_from,0.4); }
0% { opacity: var(--opacity_from,0.4); }
100% { opacity: var(--opacity_to,0); }
}; /* @keyframes opacity-hlpv8g */
----motion-a11y_activity-peek-loading_experienced_host_slide_down-1q4lvgk: @keyframes a11y_activity-peek-loading_experienced_host_slide_down-1q4lvgk {
0… <0.3KB elided>; /* @keyframes a11y_activity-peek-loading_experienced_host_slide_down-1q4lvgk */
----motion-a11y_activity-peek-loading_experienced_host_fade_in-1q4lvgk: @keyframes a11y_activity-peek-loading_experienced_host_fade_in-1q4lvgk {
0% {… <0.3KB elided>; /* @keyframes a11y_activity-peek-loading_experienced_host_fade_in-1q4lvgk */
----motion-activity-peek-loading_experienced_host_slide_down-1q4lvgk: @keyframes activity-peek-loading_experienced_host_slide_down-1q4lvgk {
0% { t… <0.2KB elided>; /* @keyframes activity-peek-loading_experienced_host_slide_down-1q4lvgk */
----motion-activity-peek-loading_experienced_host_fade_in-1q4lvgk: @keyframes activity-peek-loading_experienced_host_fade_in-1q4lvgk {
0% { opac… <0.3KB elided>; /* @keyframes activity-peek-loading_experienced_host_fade_in-1q4lvgk */
----motion-a11y_activity-peek-loading_default_fade_in-bmqlf3: @keyframes a11y_activity-peek-loading_default_fade_in-bmqlf3 {
0% { opacity:… <0.3KB elided>; /* @keyframes a11y_activity-peek-loading_default_fade_in-bmqlf3 */
----motion-activity-peek-loading_default_fade_in-bmqlf3: @keyframes activity-peek-loading_default_fade_in-bmqlf3 {
0% { opacity: var(-… <0.3KB elided>; /* @keyframes activity-peek-loading_default_fade_in-bmqlf3 */
----motion-a11y_activity-peek-loading_cohost_slide_down-6z189f: @keyframes a11y_activity-peek-loading_cohost_slide_down-6z189f {
0% { opacity… <0.3KB elided>; /* @keyframes a11y_activity-peek-loading_cohost_slide_down-6z189f */
----motion-a11y_activity-peek-loading_default_fade_in-6z189f: @keyframes a11y_activity-peek-loading_default_fade_in-6z189f {
0% { opacity:… <0.3KB elided>; /* @keyframes a11y_activity-peek-loading_default_fade_in-6z189f */
----motion-activity-peek-loading_cohost_slide_down-6z189f: @keyframes activity-peek-loading_cohost_slide_down-6z189f {
0% { translate: v… <0.2KB elided>; /* @keyframes activity-peek-loading_cohost_slide_down-6z189f */
----motion-activity-peek-loading_default_fade_in-6z189f: @keyframes activity-peek-loading_default_fade_in-6z189f {
0% { opacity: var(-… <0.3KB elided>; /* @keyframes activity-peek-loading_default_fade_in-6z189f */
----motion-fadeIn-1kdf7dh: @keyframes fadeIn-1kdf7dh {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeIn-1kdf7dh */
----motion-fadeInContent-18gs3r: @keyframes fadeInContent-18gs3r {
100% { opacity: 1; }
}; /* @keyframes fadeInContent-18gs3r */
----motion-shimmer-2vvh5v: @keyframes shimmer-2vvh5v {
100% { transform: translateX(100%); }
}; /* @keyframes shimmer-2vvh5v */
----motion-fadeEnter-kyqm2j: @keyframes fadeEnter-kyqm2j {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes fadeEnter-kyqm2j */
----motion-dls_sheets_fadeIn-kyqm2j: @keyframes dls_sheets_fadeIn-kyqm2j {
0% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes dls_sheets_fadeIn-kyqm2j */
----motion-dls_sheets_slideLeft-kyqm2j: @keyframes dls_sheets_slideLeft-kyqm2j {
0% { transform: translate(var(--slide-left_amount,100px),0); }
100% { transform: translate(0px, 0px); }
}; /* @keyframes dls_sheets_slideLeft-kyqm2j */
----motion-fadeLeave-43ls40: @keyframes fadeLeave-43ls40 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes fadeLeave-43ls40 */
----motion-dls_sheets_fadeOut-43ls40: @keyframes dls_sheets_fadeOut-43ls40 {
0% { opacity: 1; }
100% { opacity: 0; }
}; /* @keyframes dls_sheets_fadeOut-43ls40 */
----motion-dls_sheets_slideRight-43ls40: @keyframes dls_sheets_slideRight-43ls40 {
0% { transform: translate(0px, 0px); }
100% { transform: translate(var(--slide-right_amount,50px),0); }
}; /* @keyframes dls_sheets_slideRight-43ls40 */
----motion-dls_sheets_slideRightOut-43ls40: @keyframes dls_sheets_slideRightOut-43ls40 {
0% { transform: translate(0px, 0… <0.2KB elided>; /* @keyframes dls_sheets_slideRightOut-43ls40 */
----motion-nav-collapse-fade-in-gpkuxo: @keyframes nav-collapse-fade-in-gpkuxo {
0% { opacity: 0; }
25% { opacity: 0; }
100% { opacity: 1; }
}; /* @keyframes nav-collapse-fade-in-gpkuxo */
----motion-nav-collapse-fade-out-b4vnh5: @keyframes nav-collapse-fade-out-b4vnh5 {
50% { opacity: 0; }
100% { opacity: 0; }
}; /* @keyframes nav-collapse-fade-out-b4vnh5 */
----motion-shimmer-p6tvor: @keyframes shimmer-p6tvor {
100% { transform: translateX(100%); }
}; /* @keyframes shimmer-p6tvor */
----motion-growEnter-1ft0ka5: @keyframes growEnter-1ft0ka5 {
0% { transform: scale(0.05, 1); }
100% { transform: scale(1, 1); }
}; /* @keyframes growEnter-1ft0ka5 */
----motion-slideFadeIn-cdsf6t: @keyframes slideFadeIn-cdsf6t {
0% { opacity: 0; transform: translateY(-14px); }
80% { opacity: 1; }
100% { transform: translateY(0px); }
}; /* @keyframes slideFadeIn-cdsf6t */
----motion-overlayEnterLinaria-ts7nje: @keyframes overlayEnterLinaria-ts7nje {
0% { opacity: 0; }
100% { opacity: var(--dls-context-sheet-overlay-opacity,0.4); }
}; /* @keyframes overlayEnterLinaria-ts7nje */
----motion-ds-skeleton-shimmer-8wobsh: @keyframes ds-skeleton-shimmer-8wobsh {
0% { background-position: 200% 0px; }
100% { background-position: -200% 0px; }
}; /* @keyframes ds-skeleton-shimmer-8wobsh */
----motion-ds-step-pulse-1eghcmq: @keyframes ds-step-pulse-1eghcmq {
100% { opacity: 1; }
0% { opacity: 1; }
50% { opacity: 0.4; }
}; /* @keyframes ds-step-pulse-1eghcmq */
----motion-ds-rise-up-1yhg6du: @keyframes ds-rise-up-1yhg6du {
0% { transform: translateY(40px); }
100% { transform: translateY(0px); }
}; /* @keyframes ds-rise-up-1yhg6du */
----motion-countdown-ring-deplete-1uu3t8b: @keyframes countdown-ring-deplete-1uu3t8b {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 238.761; }
}; /* @keyframes countdown-ring-deplete-1uu3t8b */
----motion-countdown-ring-spin-vxtufx: @keyframes countdown-ring-spin-vxtufx {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}; /* @keyframes countdown-ring-spin-vxtufx */
----motion-shimmer-sweep-igo6nb: @keyframes shimmer-sweep-igo6nb {
0% { background-position: 100% 0px; }
100% { background-position: -100% 0px; }
}; /* @keyframes shimmer-sweep-igo6nb */
--duration-fast: 0.1s; /* 4 elements — e.g. button, a, a /* mined from computed styles */ */
--duration-base: 0.2s; /* 4 elements — e.g. button, a, a /* mined from computed styles */ */
--duration-slow: 0.25s; /* 29 elements — e.g. button, button, button /* mined from computed styles */ */
--ease-default: ease; /* 95 elements — e.g. button, button, button /* mined from computed styles */ */
```
More from the gallery
Browse all kits →You may also like
atlassian.com
MITEnterprise design system for Atlassian's marketing site, featuring bold brand colours, custom typography, and structured spacing tokens built for large-scale SaaS platforms
Layout06
boldsaaslanding-pagelight
Perplexity
MITClean, accessible design system for a conversational AI search interface with light-first aesthetics, system fonts, and precise focus states
Layout03
lightminimaldeveloper-toolsaas
Bonsai
MITMinimal, light design system with warm orange and indigo accents, built on CSS custom properties for SaaS and marketing sites
Layout05
lightminimalsaaslanding-page