, so it opens with no script; a click
anywhere else lands on the summary's own veil and closes it. */
.language-menu { position: relative; }
.language-menu__chip { list-style: none; }
.language-menu__chip::-webkit-details-marker { display: none; }
.language-menu__chip .icon--caret-down { --icon-size: var(--form-field-accessory-caret-width); transition: transform var(--motion-selection-millis) var(--motion-easing); }
.language-menu__name { display: none; }
.language-menu[open] > .language-menu__chip .icon--caret-down { transform: rotate(180deg); }
.language-menu[open] > .language-menu__chip::before { content: ""; position: fixed; inset: 0; z-index: 1; background: var(--sheet-scrim); cursor: default; }
.language-menu__panel {
position: fixed; inset-inline: var(--sheet-side-inset); inset-block-end: var(--sheet-bottom-inset); z-index: 2;
max-block-size: calc(100vh - 2 * var(--sheet-bottom-inset)); overflow-y: auto;
padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
border-radius: var(--sheet-radius); background: var(--sheet-fill); color: var(--palette-text-primary); box-shadow: var(--elevation-floating);
animation: sheet-in var(--sheet-open-millis) var(--motion-easing) both;
}
.language-menu__title { margin-block-end: var(--spacing-md); color: var(--palette-text-emphasis); font: var(--typography-heading) var(--font-family); text-align: center; }
/* The bar with an open list stands over the bottom bar and everything else. */
.site-header:has(.language-menu[open]) { z-index: 60; }
@media (min-width: 768px) {
.language-menu__name { display: inline; }
.language-menu[open] > .language-menu__chip::before { background: transparent; }
.language-menu__panel {
position: absolute; inset-inline: auto 0; inset-block: calc(100% + var(--spacing-xs)) auto;
inline-size: min(var(--launch-menu-width), calc(100vw - 2 * var(--web-gutter))); max-block-size: none; overflow: visible;
padding: var(--spacing-lg);
}
.language-menu__title { text-align: start; font: var(--typography-title-bold) var(--font-family); }
}
/* The languages, each in its own name: LanguagePickerScreen.kt's rows. Two
across on a phone, three on a wide window. In the top bar's list a row is a
link and the one being read is marked; on a first visit it is a choice. */
.language-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-xs); }
.language-list .selectable-row { min-block-size: calc(var(--sizing-min-touch-target) + var(--spacing-xxs)); gap: var(--spacing-xs); padding-inline: var(--spacing-sm); font: var(--typography-label-strong) var(--font-family); }
.language-list .selectable-row .flag { --flag-size: var(--spacing-xl); }
.language-list .selectable-row + .selectable-row { margin-block-start: 0; }
.language-list .selectable-row::after { inline-size: var(--spacing-lg); block-size: var(--spacing-lg); }
.language-list .selectable-row[aria-current="true"]::after { background-image: url("../assets/pictures/check_circle.svg"); }
.language-list .selectable-row[aria-current="true"], .language-list .selectable-row[aria-checked="true"] { color: var(--palette-brand); }
@media (min-width: 768px) {
.language-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--language-picker-row-spacing); }
.language-list .selectable-row { min-block-size: calc(var(--sizing-min-touch-target) + var(--spacing-xs)); gap: var(--selectable-row-image-to-label); padding-inline: var(--selectable-row-image-inset); font: var(--typography-body-medium) var(--font-family); }
.language-list .selectable-row .flag { --flag-size: var(--selectable-row-image-size); }
}
/* The language choice of a first visit: the kit's sheet, wide enough for the
list on a wide window, with its button kept in view while the list scrolls. */
.language-sheet .sheet__body { padding-inline: var(--spacing-md); }
.language-sheet__title { color: var(--language-picker-title-color); font: var(--typography-title-large) var(--font-family); text-align: center; }
/* Opened from More, the sheet has the back arrow at its first corner: the title keeps clear of it on both sides, so it stays in the middle and no letter of a long one is under the arrow. */
.language-sheet .sheet__back + .sheet__body .language-sheet__title { padding-inline: calc(var(--sizing-min-touch-target) + var(--spacing-xs) + var(--spacing-xxs) - var(--spacing-md)); }
.language-sheet__subtitle { margin-block: var(--spacing-xs) var(--language-picker-subtitle-to-rows); color: var(--language-picker-subtitle-color); font: var(--language-picker-subtitle-style) var(--font-family); text-align: center; }
.language-sheet .sheet__ending { position: sticky; inset-block-end: 0; padding-block-start: var(--language-picker-rows-to-button); background: linear-gradient(to bottom, transparent, var(--sheet-fill) var(--spacing-md)); }
@media (min-width: 768px) {
.language-sheet { max-inline-size: var(--launch-menu-width); }
.language-sheet .sheet__body { padding: calc(var(--spacing-lg) * 2) calc(var(--spacing-lg) * 2) 0; }
.language-sheet__title { font: var(--language-picker-title-style) var(--font-family); }
.language-sheet__subtitle { margin-block-start: var(--language-picker-title-to-subtitle); }
.language-sheet .sheet__ending { flex-direction: row; justify-content: center; padding-inline: calc(var(--spacing-lg) * 2); }
.language-sheet .sheet__ending .maak-button { inline-size: auto; min-inline-size: 50%; }
}
/* ==========================================================================
1c. The moment before the site opens, and the first pages. Web only.
========================================================================== */
/* SplashScreen.kt: the moment before the site knows where it opens. The
apps fill the screen with a photograph; a website does not carry it. Here
it is the band (.launch-band), as tall as the window, with the brand's
white tile and the wordmark in its middle. No top bar, no footer. */
.launch-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--splash-wordmark-to-tagline); min-block-size: 100vh; min-block-size: 100dvh; padding-block: var(--spacing-xxl); border-radius: 0; color: var(--splash-lockup-tint); }
.launch-splash__tile { inline-size: calc(var(--splash-tile-size) * var(--launch-splash-scale)); block-size: calc(var(--splash-tile-size) * var(--launch-splash-scale)); }
.launch-splash .wordmark { inline-size: calc(var(--splash-wordmark-width) * var(--launch-splash-scale)); block-size: calc(var(--splash-wordmark-height) * var(--launch-splash-scale)); }
/* OnboardingScreen.kt: the pages that introduce the product on a first
visit. In the apps each is a fade into the brand colour with a title and
a sentence at its foot, and they are swiped through. Here each is the
band, as tall as the window, with the top bar on it. On a phone it is the
apps' page: Skip at the top, the words, the marks and the button at the
foot, and a swipe goes on. From a tablet up the words stand in the middle
of the window, over the marks and the two buttons side by side. */
.onboarding { display: flex; flex-direction: column; min-block-size: 100vh; min-block-size: 100dvh; padding-block: calc(var(--web-header-height) + var(--onboarding-skip-top)) var(--onboarding-button-bottom-inset); border-radius: 0; color: var(--onboarding-title-color); }
.onboarding__inner { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.onboarding__words { display: flex; flex-direction: column; padding-inline: calc(var(--onboarding-content-inset) - var(--web-gutter)); }
.onboarding__title { font: var(--onboarding-title-style) var(--font-family); }
.onboarding__subtitle { margin-block-start: var(--onboarding-title-to-subtitle); color: var(--onboarding-subtitle-color); font: var(--onboarding-subtitle-style) var(--font-family); line-height: var(--typography-body-loose-line); }
.onboarding .page-indicator { --page-indicator-current-color: var(--palette-on-brand); --page-indicator-other-color: var(--palette-on-brand-faint); justify-content: flex-start; margin-block-start: var(--onboarding-subtitle-to-indicator); padding-inline: calc(var(--onboarding-content-inset) - var(--web-gutter)); }
.onboarding__actions { margin-block-start: var(--onboarding-indicator-to-button); }
.onboarding__actions .maak-button { --_height: var(--onboarding-button-height); --_radius: var(--onboarding-button-radius); --_style: var(--onboarding-button-label-style); }
/* Skip: at the top of the page on a phone, where the apps have it; beside the button from a tablet up. */
.onboarding__skip { position: absolute; inset-block-start: 0; inset-inline-start: calc(var(--web-gutter) - var(--spacing-xs)); color: var(--palette-on-brand); --web-focus-color: var(--palette-on-brand); }
.onboarding__skip:hover { color: var(--palette-on-brand-soft); }
@media (min-width: 768px) {
.onboarding { padding-block: calc(var(--web-header-height) + var(--spacing-xxl)) calc(var(--spacing-xxl) * 2); }
.onboarding__inner { justify-content: center; align-items: center; text-align: center; }
.onboarding__words { align-items: center; padding-inline: 0; }
.onboarding__title { max-inline-size: 20ch; font: var(--typography-hero) var(--font-family); }
.onboarding__subtitle { max-inline-size: 44ch; font: var(--typography-subhead-large) var(--font-family); line-height: 1.5; }
.onboarding .page-indicator { justify-content: center; padding-inline: 0; }
.onboarding__actions { display: flex; align-items: center; justify-content: center; gap: var(--spacing-lg); }
.onboarding__actions .maak-button { inline-size: auto; min-inline-size: calc(var(--launch-card-min) + var(--spacing-xxl)); }
.onboarding__skip { position: static; }
}
@media (min-width: 1100px) {
.onboarding__title { font-size: calc(var(--typography-hero-size) * 1.4); line-height: 1.12; letter-spacing: -0.01em; }
}
/* A page of the way in stands alone in the window: no room is kept for a
bottom bar or for what follows, and the site's footer is not said under it. */
.page--first { padding-block-end: 0; }
.page--first .site-footer, .page--first .bottom-bar { display: none; }
.page--first .page__main { padding-block-end: 0; }
/* ==========================================================================
2. Home's band. HomeScreen.kt's Hero, as the website draws it.
========================================================================== */
/* Home's band (.launch-band): taller, the top bar inside it, the title and
the search in its middle, and at its foot the cards that stand on it. */
.home-hero { --_rise: var(--launch-overlap); padding-block-start: calc(var(--web-header-height) + var(--spacing-lg)); color: var(--home-hero-text-color); }
.home-hero__greeting { margin-block-end: var(--home-greeting-to-title); color: var(--home-greeting-color); font: var(--home-greeting-style) var(--font-family); }
.home-hero__title { font: var(--home-hero-title-style) var(--font-family); }
.home-hero__subtitle { margin-block-start: var(--home-hero-title-to-subtitle); max-inline-size: 34ch; font: var(--home-hero-subtitle-style) var(--font-family); line-height: var(--typography-body-loose-line); }
/* The search: the kit's field, white on the band, with the button that goes inside its far end. */
.home-hero__search { position: relative; margin-block-start: var(--home-hero-subtitle-to-search); }
.home-hero__search .search-field { padding-inline-end: calc(var(--sizing-min-touch-target) + var(--spacing-sm)); }
.home-hero__go {
position: absolute; inset-block-start: calc((var(--search-field-on-map-height) - var(--sizing-min-touch-target)) / 2); inset-inline-end: calc((var(--search-field-on-map-height) - var(--sizing-min-touch-target)) / 2);
display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target);
border-radius: var(--radius-md); background: var(--palette-brand); color: var(--palette-on-brand); cursor: pointer;
--web-focus-color: var(--palette-brand);
transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.home-hero__go:hover { background: var(--palette-brand-shade); }
.home-hero__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin-block-start: var(--spacing-md); }
/* The header of what stands on the band's foot, in white. */
.home-hero .section-header { margin-block: var(--spacing-xl) 0; }
.home-hero .section-header__title, .home-hero .section-header__icon { color: var(--palette-on-brand); }
.home-hero .section-header__action, .home-hero .section-header__action .icon { color: var(--palette-on-brand-soft); }
.home-hero .section-header__action:hover, .home-hero .section-header__action:hover .icon { color: var(--palette-on-brand); }
@media (min-width: 768px) {
.home-hero { padding-block-start: calc(var(--web-header-height) + var(--spacing-xxl)); }
.home-hero__words { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-hero__title { font: var(--typography-hero) var(--font-family); }
.home-hero__subtitle { max-inline-size: 44ch; font: var(--typography-subhead-large) var(--font-family); line-height: 1.5; }
.home-hero__search { inline-size: min(100%, var(--launch-search-width)); margin-block-start: var(--spacing-xxl); }
.home-hero__search .search-field { min-block-size: var(--button-primary-height); padding-inline-start: var(--spacing-xl); }
.home-hero__search .search-field__input { min-block-size: var(--button-primary-height); font: var(--typography-subhead) var(--font-family); }
.home-hero__go { inset-block-start: calc((var(--button-primary-height) - var(--button-brand-height)) / 2); inset-inline-end: calc((var(--button-primary-height) - var(--button-brand-height)) / 2); inline-size: var(--button-brand-height); block-size: var(--button-brand-height); }
.home-hero__chips { justify-content: center; }
.home-hero__chips .chip { font: var(--typography-label-strong) var(--font-family); }
.home-hero .section-header { margin-block-start: calc(var(--spacing-lg) * 2); }
/* While travelling the band reads from its start: a greeting and a place are a line, not a pitch. */
.home-hero--travelling .home-hero__words { align-items: flex-start; text-align: start; }
.home-hero--travelling .home-hero__search { margin-block-start: var(--home-travelling-title-to-search); }
}
@media (min-width: 1100px) {
.home-hero { padding-block-start: calc(var(--web-header-height) + var(--spacing-xl) * 2); }
.home-hero__title { font-size: calc(var(--typography-hero-size) * 1.4); line-height: 1.12; letter-spacing: -0.01em; }
.home-hero--travelling .home-hero__title { font-size: calc(var(--typography-hero-size) * 1.2); }
.home-hero__subtitle { margin-block-start: var(--spacing-lg); }
}
/* ==========================================================================
3. What stands on the band's foot: the most travelled, the running eSIMs
========================================================================== */
/* HomeScreen.kt's Popular: the destinations the catalogue features, standing
on the band's foot. The kit's country card as a photo card: its name moves
to the foot, over the brand colour, where the price is read.
One row, always, as in the apps: three across on a phone, as many as fit
from a tablet up, each as wide as the row leaves it. When there are more
than fit, the row slides sideways and the next card is seen coming; on a
phone it slides under the window's edges. .home-popular-row is the room
the row takes on the page, and holds the two buttons that slide it. */
.home-popular-row { position: relative; z-index: 1; margin-block: calc(var(--launch-overlap) * -1 - var(--spacing-xs)) calc(var(--launch-row-room) * -1); }
.home-popular {
display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--country-card-gap)) / var(--home-popular-placeholder-count)); gap: var(--country-card-gap);
margin-inline: calc(var(--web-gutter) * -1);
padding-block: var(--spacing-xs) var(--launch-row-room); padding-inline: var(--web-gutter);
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--web-gutter); scrollbar-width: none;
}
.home-popular::-webkit-scrollbar { display: none; }
.home-popular > * { scroll-snap-align: start; }
/* More than three on a phone: each is a little narrower, so that the fourth shows at the window's edge. */
.home-popular:has(> :nth-child(4)) { grid-auto-columns: calc((100% - 2 * var(--country-card-gap)) / var(--launch-card-peek)); }
/* The same cards as a section of their own, when something else stands on the band. */
.home-popular-row--section { margin-block-start: calc(var(--spacing-xs) * -1); }
.home-popular .country-card { box-shadow: var(--launch-shadow-row); }
/* While the list is read: the cards' shapes in white, so that they are seen on the band and on the pale ground alike. */
.home-popular .placeholder { inline-size: 100%; min-inline-size: 0; background: var(--palette-background); box-shadow: var(--launch-shadow-row); }
.home-popular .country-card--picture::after { block-size: 66%; background: linear-gradient(to bottom, transparent, var(--palette-brand-shade) 86%); }
.home-popular .country-card__name { margin-block-start: auto; color: var(--country-card-name-color-on-plain); font: var(--typography-body-bold) var(--font-family); }
.home-popular .country-card__from { margin-block-start: var(--spacing-xs); padding-inline: 0; }
.home-popular .country-card__price { padding-inline: 0; padding-block-end: 0; }
/* In place of the cards when the list could not be read: the message, on a white card across the page. Nothing slides. */
.home-popular:has(> .home-popular__status) { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.home-popular__status { border-radius: var(--radius-card); background: var(--palette-background); box-shadow: var(--launch-shadow-card); }
.home-popular__status .status-message { padding-block: var(--spacing-xxl); }
/* The row's two round buttons, for a hand on a mouse: each slides the row
by about what it shows, and is there only while there is more that way.
From a tablet up: a finger slides the row itself. They are not said to a
screen reader and the keyboard passes them, since both reach every card. Web only. */
.home-popular__step { display: none; }
@media (min-width: 768px) {
.home-popular__step {
position: absolute; z-index: 1; inset-block-start: calc((100% - var(--launch-row-room) + var(--spacing-xs)) / 2); inset-inline-end: calc(var(--sizing-min-touch-target) / -2);
display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); margin-block-start: calc(var(--sizing-min-touch-target) / -2);
border-radius: 50%; background: var(--palette-background); color: var(--palette-brand); box-shadow: var(--launch-shadow-row); cursor: pointer;
transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.home-popular__step:hover { background: var(--palette-brand-wash); }
.home-popular__step[hidden] { display: none; }
.home-popular__step--back { inset-inline: calc(var(--sizing-min-touch-target) / -2) auto; }
.home-popular__step--back .icon { transform: scaleX(var(--mirror)); }
}
@media (min-width: 768px) {
.home-popular, .home-popular:has(> :nth-child(4)) { grid-auto-columns: minmax(var(--launch-card-min), 1fr); gap: var(--web-grid-gap); }
/* The row ends in the page's margins, where a card that slides out of it fades away. */
.home-popular { -webkit-mask-image: linear-gradient(to var(--inline-end), transparent, #000 var(--web-gutter), #000 calc(100% - var(--web-gutter)), transparent); mask-image: linear-gradient(to var(--inline-end), transparent, #000 var(--web-gutter), #000 calc(100% - var(--web-gutter)), transparent); }
.home-popular .country-card { aspect-ratio: auto; block-size: calc(var(--launch-overlap) * 2); padding: var(--spacing-md); border-radius: var(--radius-card); }
.home-popular .placeholder--country-card { aspect-ratio: auto; block-size: calc(var(--launch-overlap) * 2); border-radius: var(--radius-card); }
.home-popular .country-card .flag { --flag-size: 40px; }
.home-popular .country-card__name { font: var(--typography-title-large) var(--font-family); }
.home-popular .country-card__from { font: var(--typography-label) var(--font-family); }
.home-popular .country-card__price { font: var(--typography-title-bold) var(--font-family); }
}
@media (min-width: 1100px) {
.home-popular .country-card { padding: var(--spacing-lg); }
}
/* HomeScreen.kt's EsimCards: one card for each eSIM whose plan is running. */
.home-esims { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--home-esim-card-gap); margin-block-start: calc(var(--launch-overlap) * -1); }
@media (min-width: 768px) {
.home-esims { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--web-grid-gap); }
}
/* EsimCard.kt: an eSIM whose plan is running. Its name and where it stands,
what was used over a bar, when it ends and what is left, how old the
figures are, and "Top up". The card leads to the eSIM's page; the button is
a control of its own. On the band it is white, and lifted off it.
The apps draw the amount used over the end of the bar's fill; here it
stands at the bar's start, with its mark. */
.esim-card { position: relative; display: flex; flex-direction: column; padding: var(--esim-card-padding); border-radius: var(--esim-card-radius); background: var(--esim-card-fill); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.esim-card:hover { box-shadow: 0 0 0 2px var(--palette-brand-outline); }
.home-esims .esim-card { background: var(--palette-background); box-shadow: var(--launch-shadow-card); }
.home-esims .esim-card:hover { box-shadow: var(--launch-shadow-card), 0 0 0 2px var(--palette-brand-outline); }
.esim-card__head { display: flex; align-items: center; gap: var(--esim-card-name-to-pill); }
.esim-card__name { flex: 1 1 0; min-inline-size: 0; color: var(--esim-card-name-color); font: var(--esim-card-name-style) var(--font-family); }
/* The whole card is one control, which opens the eSIM's page: a link laid over it, named by the card's name. */
.esim-card__open { position: absolute; inset: 0; border-radius: var(--esim-card-radius); }
.esim-card__figures { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); min-block-size: var(--esim-card-figures-height); margin-block-start: var(--esim-card-name-to-figures); color: var(--esim-card-figures-color); font: var(--esim-card-used-style) var(--font-family); }
.esim-card__used { display: inline-flex; align-items: center; gap: var(--esim-card-marker-to-used); }
.esim-card__used .icon { inline-size: var(--esim-card-marker-width); block-size: var(--esim-card-marker-height); color: var(--esim-card-marker-tint); }
.esim-card__total { font: var(--esim-card-total-style) var(--font-family); }
.esim-card .usage-bar { margin-block-start: var(--esim-card-figures-to-bar); block-size: var(--esim-card-bar-height); background: var(--esim-card-bar-track); color: var(--esim-card-bar-fill-low); }
.esim-card .usage-bar::-webkit-progress-bar { background: var(--esim-card-bar-track); }
.esim-card .usage-bar--medium { color: var(--esim-card-bar-fill-medium); }
.esim-card .usage-bar--high { color: var(--esim-card-bar-fill-high); }
.home-esims .esim-card .usage-bar, .home-esims .esim-card .usage-bar::-webkit-progress-bar { background: var(--palette-surface); }
.esim-card__bottom { display: flex; justify-content: space-between; gap: var(--spacing-sm); margin-block-start: var(--esim-card-to-bottom-line); color: var(--esim-card-bottom-line-color); font: var(--esim-card-bottom-line-style) var(--font-family); }
.esim-card__caption { margin-block-start: var(--esim-card-bottom-line-to-caption); color: var(--esim-card-caption-color); font: var(--esim-card-caption-style) var(--font-family); }
.esim-card__buttons { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--esim-card-button-gap); margin-block-start: auto; padding-block-start: var(--esim-card-to-buttons); }
.esim-card__buttons .maak-button { --_height: var(--esim-card-secondary-button-height); --_radius: var(--esim-card-secondary-button-radius); --_style: var(--esim-card-secondary-button-label-style); padding-inline: var(--spacing-md); }
/* ==========================================================================
4. Home's sections
========================================================================== */
/* What the apps say on their first pages (OnboardingScreen.kt), as the
heading of a part of Home: a title and the sentence under it. Web only. */
.home-heading { display: flex; flex-direction: column; gap: var(--spacing-xs); margin-block-end: var(--spacing-lg); }
.home-heading__title { color: var(--palette-text-emphasis); font: var(--typography-title-large) var(--font-family); }
.home-heading__body { max-inline-size: 52ch; color: var(--palette-text-secondary); font: var(--typography-body) var(--font-family); line-height: var(--typography-body-loose-line); }
@media (min-width: 768px) {
.home-heading { align-items: center; text-align: center; gap: var(--spacing-sm); margin-block-end: var(--spacing-xxl); }
.home-heading__title { font: var(--typography-display) var(--font-family); }
.home-heading__body { font: var(--onboarding-subtitle-style) var(--font-family); line-height: 1.5; }
}
/* How it goes, in three steps: white cards on the pale ground. Web only; the
words are the apps' own, from the screens each step happens on. */
.home-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); counter-reset: home-step; }
.home-step { display: grid; grid-template-columns: var(--sizing-min-touch-target) minmax(0, 1fr); column-gap: var(--spacing-md); row-gap: var(--spacing-xs); align-items: center; padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-brand-faint); counter-increment: home-step; }
.home-step::before { content: counter(home-step); display: flex; align-items: center; justify-content: center; inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); border-radius: 50%; background: var(--palette-surface); color: var(--palette-brand); font: var(--typography-title-bold) var(--font-family-latin); }
.home-step__title { color: var(--palette-text-emphasis); font: var(--typography-title-bold) var(--font-family); }
.home-step__body { grid-column: 1 / -1; color: var(--palette-text-secondary); font: var(--typography-label-tall) var(--font-family); }
.home-steps__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--link-row-gap); margin-block-start: var(--spacing-md); }
.home-steps__links .link-row { background: var(--palette-background); }
.home-steps__links .link-row:hover { background: var(--palette-brand-outline); }
.home-steps__links .link-row + .link-row { margin-block-start: 0; }
@media (min-width: 768px) {
.home-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--web-grid-gap); }
.home-step { align-content: start; padding: var(--spacing-xl); }
.home-steps__links { grid-template-columns: repeat(auto-fit, minmax(var(--launch-link-min), 1fr)); gap: var(--web-grid-gap); margin-block-start: var(--web-grid-gap); }
}
/* HomeScreen.kt's Offers. The apps page through the banners one at a time;
so does a phone, where the page showing is the one marked aria-current
and the marks under it say which. From a tablet up they stand side by side. */
.home-offers__pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--web-grid-gap); }
.home-offers__pages > :not([aria-current="true"]) { display: none; }
.home-offers .page-indicator { margin-block-start: var(--offer-banner-pill-top); }
/* A package's offer wears its region's picture, which is drawn for a
right-to-left page as the kit's region card's is: turned round on a
left-to-right one, so that the brand colour and the words do not cover
what it shows. A country's photograph is never turned. */
.home-offers .offer-banner__picture[src*="/region_"] { transform: scaleX(var(--mirror)); }
@media (min-width: 768px) {
.home-offers__pages { grid-template-columns: repeat(auto-fit, minmax(var(--launch-card-min), 1fr)); }
/* Side by side, each as tall as the tallest of its row. */
.home-offers__pages > li, .home-offers__pages > :not([aria-current="true"]) { display: flex; }
.home-offers__pages .offer-banner { flex: 1 1 auto; }
.home-offers .page-indicator { display: none; }
}
/* CategoryBar.kt as a website draws it: the six kinds of package as entry
tiles, each over the picture its list opens on, and beside them the tours.
Two across on a phone; on a desktop three across with the tours standing
beside them over both rows. */
.home-packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); }
.category-tile {
--web-focus-color: var(--palette-brand);
position: relative; isolation: isolate; overflow: hidden;
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: end; align-items: end; column-gap: var(--spacing-xs); row-gap: var(--spacing-xxs);
min-block-size: var(--launch-tile-height); padding: var(--spacing-sm);
border-radius: var(--radius-card); background: linear-gradient(to bottom, var(--plans-hero-plain-background)); color: var(--palette-on-brand); text-align: start;
transition: transform var(--motion-selection-millis) var(--motion-easing);
}
.category-tile:hover { transform: translateY(calc(var(--spacing-xxs) * -1)); }
.category-tile__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 25%; }
.category-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 20%, var(--palette-brand) 92%); opacity: 0.9; }
.category-tile__icon { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--plan-card-pill-height); block-size: var(--plan-card-pill-height); margin-block-end: var(--spacing-xxs); border-radius: var(--radius-xs); background: var(--palette-on-brand-faint); -webkit-backdrop-filter: blur(var(--spacing-xs)); backdrop-filter: blur(var(--spacing-xs)); }
.category-tile__icon .icon { --icon-size: var(--spacing-md); }
.category-tile__title { font: var(--typography-label-bold) var(--font-family); }
.category-tile__subtitle { display: none; grid-column: 1 / -1; color: var(--palette-on-brand-soft); font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); }
.category-tile__arrow { inline-size: var(--country-row-arrow-width); block-size: var(--country-row-arrow-height); }
@media (min-width: 768px) {
.home-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-tile { padding: var(--spacing-lg); row-gap: var(--spacing-xs); }
.category-tile__icon { inline-size: var(--sizing-min-touch-target); block-size: var(--sizing-min-touch-target); border-radius: var(--radius-sm); }
.category-tile__icon .icon { --icon-size: var(--category-bar-icon-size); }
.category-tile__title { font: var(--typography-heading) var(--font-family); }
.category-tile__subtitle { display: block; }
}
@media (min-width: 1100px) {
.home-packages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* HomeScreen.kt's Tours: the card that opens the tours. The apps' card on a
phone and a tablet, across the page, with the tours' picture at its far
end; on a desktop it stands beside the six tiles, as tall as both their
rows, under that picture. */
.home-tours {
position: relative; isolation: isolate; overflow: hidden; grid-column: 1 / -1;
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--spacing-sm);
min-block-size: var(--offer-banner-height); padding: var(--home-tours-inset);
border-radius: var(--home-tours-radius); background: var(--palette-background); box-shadow: var(--launch-shadow-panel); text-align: start;
}
.home-tours__picture { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: -1; inline-size: 46%; block-size: 100%; object-fit: cover; object-position: 30% 20%; transform: scaleX(var(--mirror));
-webkit-mask-image: linear-gradient(to var(--art-weak-side), #000 35%, transparent); mask-image: linear-gradient(to var(--art-weak-side), #000 35%, transparent); opacity: 0.7; }
.home-tours__label { display: inline-flex; align-items: center; gap: var(--spacing-xs); color: var(--home-section-header-title-color); font: var(--typography-label-strong) var(--font-family); }
.home-tours__label .icon { color: var(--home-section-header-icon-tint); --icon-size: var(--spacing-lg); }
.home-tours__title { max-inline-size: 58%; color: var(--home-tours-title-color); font: var(--home-tours-title-style) var(--font-family); }
.home-tours__subtitle { max-inline-size: 58%; color: var(--home-tours-subtitle-color); font: var(--typography-label) var(--font-family); line-height: var(--typography-label-tall-line); }
.home-tours .maak-button { margin-block-start: var(--spacing-xxs); }
@media (min-width: 768px) {
.home-tours { padding: var(--spacing-xl); }
.home-tours__title { font: var(--typography-title-large) var(--font-family); }
.home-tours__subtitle { font: var(--typography-body) var(--font-family); line-height: var(--typography-body-loose-line); }
}
@media (min-width: 1100px) {
.home-tours { grid-column: 4; grid-row: 1 / span 2; justify-content: flex-end; color: var(--palette-on-brand); background: var(--palette-brand); box-shadow: none; --web-focus-color: var(--palette-on-brand); }
.home-tours__picture { inset: 0; inline-size: 100%; opacity: 1; object-position: 30% center; transform: none; -webkit-mask-image: none; mask-image: none; }
.home-tours::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 30%, var(--palette-brand) 78%); }
.home-tours__label, .home-tours__label .icon, .home-tours__title { color: var(--palette-on-brand); }
.home-tours__title, .home-tours__subtitle { max-inline-size: none; }
.home-tours__subtitle { color: var(--palette-on-brand-soft); }
.home-tours .maak-button { --_fill: var(--button-on-brand-fill); --_label: var(--button-on-brand-label-color); --_hover: var(--palette-brand-wash); margin-block-start: var(--spacing-xs); }
}
/* The button under the first countries of the local list: across a phone, its own width from a tablet up. */
.home-browse { display: flex; justify-content: center; margin-block-start: var(--home-rows-to-button); }
.home-browse .maak-button { inline-size: 100%; }
@media (min-width: 768px) {
.home-browse { margin-block-start: var(--spacing-xl); }
.home-browse .maak-button { inline-size: auto; padding-inline: calc(var(--home-browse-button-horizontal-padding) * 2); }
}
/* HomeScreen.kt's Companion: a panel, its header (one control, which opens
the companion's menu) over four tiles that share its width. The apps draw
a pale panel with white tiles on their white page; on the site's pale
ground it is the other way round: a white panel, pale tiles. */
.home-companion { display: flex; flex-direction: column; gap: var(--spacing-md); block-size: 100%; padding: var(--home-companion-inset); border-radius: var(--home-companion-radius); background: var(--palette-background); box-shadow: var(--launch-shadow-panel); }
.home-companion__header { display: flex; align-items: center; gap: var(--home-companion-icon-to-title); min-block-size: var(--home-companion-header-touch-target); border-radius: var(--radius-chip); color: var(--home-companion-title-color); font: var(--home-companion-title-style) var(--font-family); }
.home-companion__header > .icon:first-child { color: var(--home-companion-icon-tint); --icon-size: var(--home-companion-icon-height); }
.home-companion__title { flex: 1 1 0; min-inline-size: 0; }
.home-companion__arrow { color: var(--section-header-arrow-tint); inline-size: var(--section-header-arrow-width); block-size: var(--section-header-arrow-height); }
.home-companion__header:hover, .home-companion__header:hover .home-companion__arrow { color: var(--palette-brand); }
.home-companion__body { display: none; color: var(--palette-text-secondary); font: var(--typography-label-tall) var(--font-family); }
.home-companion__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--home-tile-gap); flex: 1 1 auto; }
.home-companion__tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm);
min-block-size: var(--home-tile-height); padding: var(--spacing-sm) var(--home-tile-label-inset);
border-radius: var(--home-tile-radius); background: var(--home-companion-fill);
color: var(--home-tile-label-color); font: var(--home-tile-label-style) var(--font-family); text-align: center; hyphens: manual;
transition: box-shadow var(--motion-selection-millis) var(--motion-easing);
}
.home-companion__tile:hover { box-shadow: inset 0 0 0 2px var(--palette-brand-outline); }
.home-companion__tile .icon { --icon-size: var(--home-tile-icon-height); color: var(--_tint, var(--palette-brand)); }
.home-companion__tile--places { --_tint: var(--home-tile-places-tint); }
.home-companion__tile--translate { --_tint: var(--home-tile-translate-tint); }
.home-companion__tile--trip-planner { --_tint: var(--home-tile-trip-planner-tint); }
.home-companion__tile--currency { --_tint: var(--home-tile-currency-tint); }
@media (min-width: 768px) {
.home-companion { padding: var(--spacing-xl); gap: var(--spacing-lg); border-radius: var(--radius-lg); }
.home-companion__header { font: var(--typography-title-large) var(--font-family); color: var(--palette-text-emphasis); }
.home-companion__body { display: block; max-inline-size: 56ch; font: var(--typography-body) var(--font-family); line-height: var(--typography-body-loose-line); }
.home-companion__tiles { gap: var(--spacing-md); }
.home-companion__tile { min-block-size: calc(var(--home-tile-height) + var(--spacing-xxl)); gap: var(--spacing-md); font: var(--typography-label-strong) var(--font-family); line-height: var(--typography-label-tall-line); }
.home-companion__tile .icon { --icon-size: calc(var(--home-tile-icon-height) + var(--spacing-xs)); }
}
/* HomeScreen.kt's Camera: the card that opens the camera. Its picture is
drawn for a right-to-left page, with the photograph at its own left end,
and mirrored on a left-to-right one: the photograph keeps the card's far
end and melts into it, the words keep the near one. */
.home-camera {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--spacing-xs);
block-size: 100%; min-block-size: calc(var(--home-camera-height) + var(--spacing-lg)); padding: var(--home-camera-inset);
border-radius: var(--home-camera-radius); background: var(--palette-background); box-shadow: var(--launch-shadow-panel); text-align: start;
transition: box-shadow var(--motion-selection-millis) var(--motion-easing);
}
.home-camera:hover { box-shadow: var(--launch-shadow-panel), 0 0 0 2px var(--palette-brand-outline); }
.home-camera__picture { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: -1; inline-size: 52%; block-size: 100%; object-fit: cover; object-position: var(--art-strong-side) center; transform: scaleX(var(--mirror));
-webkit-mask-image: linear-gradient(to var(--art-weak-side), #000 55%, transparent); mask-image: linear-gradient(to var(--art-weak-side), #000 55%, transparent); }
.home-camera__square { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--home-camera-square-size); block-size: var(--home-camera-square-size); border-radius: var(--home-camera-square-radius); background: var(--home-camera-square-fill); color: var(--home-camera-icon-tint); }
.home-camera__square .icon { --icon-size: var(--home-camera-icon-size); }
.home-camera__title { max-inline-size: 52%; color: var(--home-camera-title-color); font: var(--home-camera-title-style) var(--font-family); }
.home-camera__body { max-inline-size: 50%; color: var(--home-camera-body-color); font: var(--home-camera-body-style) var(--font-family); line-height: var(--home-camera-body-line-height); }
@media (min-width: 768px) {
.home-camera { padding: var(--spacing-xl); gap: var(--spacing-sm); border-radius: var(--radius-lg); }
.home-camera__title { font: var(--typography-title-large) var(--font-family); }
.home-camera__body { font: var(--typography-label-tall) var(--font-family); }
}
/* ==========================================================================
5. More. MoreScreen.kt, as the website draws it.
========================================================================== */
/* More in two parts: who is signed in, and the rows. Under one another on a
phone and a tablet; on a desktop the account stays in view beside the rows. Web only. */
.more-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); }
.more-layout__aside, .more-layout__main { min-inline-size: 0; }
@media (min-width: 1100px) {
.more-layout { grid-template-columns: var(--web-aside) minmax(0, 1fr); gap: var(--web-grid-gap); align-items: start; }
.more-layout__aside { position: sticky; inset-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
}
/* Who is signed in, or the invitation to sign in: a panel beside the rows on a
desktop, over them on a phone. */
.more-account { display: flex; flex-direction: column; gap: var(--spacing-md); }
.more-account__who { display: flex; align-items: center; gap: var(--spacing-md); }
.more-account__picture { flex: none; inline-size: var(--launch-avatar); block-size: var(--launch-avatar); border-radius: 50%; }
.more-account__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--more-account-name-to-detail); }
.more-account__name { color: var(--more-account-name-color); font: var(--more-account-name-style) var(--font-family); line-height: var(--typography-heading-line); }
.more-account__detail { color: var(--more-account-detail-color); font: var(--more-account-detail-style) var(--font-family); overflow-wrap: anywhere; }
.more-account__detail.num { white-space: normal; }
@media (min-width: 1100px) {
.more-account { gap: var(--spacing-lg); }
}
/* The rows of More. One list on a phone, as in the apps, with the row that
deletes the account last; two groups side by side from a tablet up. Web only. */
.more-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--action-row-gap); }
.more-rows .action-row + .action-row { margin-block-start: 0; }
.more-rows__group { display: contents; }
.more-rows .action-row--destructive { order: 1; }
.more-rows .action-row[aria-disabled="true"] { opacity: var(--button-disabled-opacity); pointer-events: none; }
@media (min-width: 768px) {
.more-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); align-items: start; }
.more-rows__group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--action-row-gap); align-content: start; }
}
/* ==========================================================================
6. The documents. DocumentScreen.kt, as the website draws it.
========================================================================== */
/* A document: the terms, the privacy policy, the questions. Headings and
what is under them, in the apps' own styles with room between the lines. */
.document { display: flex; flex-direction: column; gap: var(--document-section-gap); max-inline-size: 76ch; }
.document__section { display: flex; flex-direction: column; gap: var(--document-block-gap); scroll-margin-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
.document__heading { color: var(--document-heading-color); font: var(--document-heading-style) var(--font-family); line-height: var(--typography-heading-line); }
.document__paragraph { color: var(--document-body-color); font: var(--document-body-style) var(--font-family); line-height: var(--typography-label-tall-line); overflow-wrap: anywhere; }
/* The document that goes with this one (the policy under the terms, and back): a link under the last line. */
.document__related { margin-block-start: var(--document-section-gap); padding-block-start: var(--spacing-lg); border-block-start: 1px solid var(--palette-brand-outline); font: var(--typography-label-strong) var(--font-family); }
.document__related .link { display: inline-flex; align-items: center; min-block-size: var(--sizing-min-touch-target); }
.document__bullets { display: flex; flex-direction: column; gap: var(--document-block-gap); }
.document__bullet { position: relative; padding-inline-start: calc(var(--document-bullet-size) + var(--document-bullet-to-text)); color: var(--document-body-color); font: var(--document-body-style) var(--font-family); line-height: var(--typography-label-tall-line); overflow-wrap: anywhere; }
.document__bullet::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc((var(--typography-label-tall-line) - var(--document-bullet-size)) / 2); inline-size: var(--document-bullet-size); block-size: var(--document-bullet-size); border-radius: 50%; background: var(--document-bullet-color); }
:lang(ar) .document__paragraph, :lang(ar) .document__bullet { line-height: 1.75; }
@media (min-width: 768px) {
.document { gap: var(--spacing-xxl); }
.document__heading { font: var(--typography-heading) var(--font-family); }
.document__paragraph, .document__bullet { font: var(--typography-body) var(--font-family); line-height: 1.6; }
.document__bullet::before { inset-block-start: calc((1.6em - var(--document-bullet-size)) / 2); }
}
/* A question of the frequently asked ones: the question is the control, the
answer opens under it. A
, so it opens with no script. */
.document-question { border-radius: var(--radius-md); background: var(--palette-surface); scroll-margin-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
.document-question + .document-question { margin-block-start: var(--spacing-sm); }
.document-question__ask { display: flex; align-items: center; gap: var(--spacing-md); min-block-size: var(--link-row-height); padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); color: var(--document-heading-color); font: var(--document-heading-style) var(--font-family); line-height: var(--typography-heading-line); cursor: pointer; list-style: none; transition: color var(--motion-selection-millis) var(--motion-easing); }
.document-question__ask::-webkit-details-marker { display: none; }
.document-question__ask:hover { color: var(--palette-brand); }
.document-question__ask h2 { flex: 1 1 0; min-inline-size: 0; }
.document-question__ask .icon { color: var(--palette-placeholder); --icon-size: var(--form-field-accessory-caret-width); transition: transform var(--motion-selection-millis) var(--motion-easing); }
.document-question[open] > .document-question__ask { color: var(--palette-brand); }
.document-question[open] > .document-question__ask .icon { transform: rotate(180deg); color: var(--palette-brand); }
.document-question__answer { display: flex; flex-direction: column; gap: var(--document-block-gap); padding: 0 var(--spacing-lg) var(--spacing-lg); }
/* ==========================================================================
6b. The notification settings: NotificationSettingsScreen.kt. Not drawn by
the designer (mobile/design-specs/FOR-THE-DESIGNER.md). On a phone the
apps' screen: a sentence, what the browser allows when that is not
"allowed", then a row a kind with its switch. From a tablet up the
rows stand in a white panel; on a desktop what the browser allows
stays in view beside them.
========================================================================== */
.notify { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--notification-settings-intro-to-permission); align-items: start; }
.notify__main, .notify__aside { min-inline-size: 0; }
/* What the browser allows is said first where the page is one column. */
.notify__aside { order: -1; }
.notify__intro { margin-block-end: var(--notification-settings-intro-to-permission); color: var(--notification-settings-intro-color); font: var(--notification-settings-intro-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* What the browser allows: the message in a card of its own, and its button, the card's whole width. */
/* On the page's pale ground the card is white, as every panel of the family: the apps' fill is the ground's own colour here. */
.notify__permission { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--notification-settings-permission-padding); border-radius: var(--notification-settings-permission-radius); background: var(--palette-background); box-shadow: var(--launch-shadow-panel); }
.notify__permission .status-message { padding: 0; }
.notify__rows { display: flex; flex-direction: column; gap: var(--notification-settings-row-gap); }
/* A kind of notification: its name over a line, and its switch at the far end. The whole row is the switch. */
/* The switch's own sizes: a native switch's, which no token of the kit names. */
.switch-row { --web-switch-width: 52px; --web-switch-height: 32px; --web-switch-knob: 26px; display: flex; align-items: center; gap: var(--notification-settings-text-to-switch); inline-size: 100%; min-block-size: var(--notification-settings-row-min-height); padding: var(--notification-settings-row-padding); border-radius: var(--notification-settings-row-radius); background: var(--notification-settings-row-fill); text-align: start; cursor: pointer; transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.switch-row:hover { background: var(--palette-brand-outline); }
.switch-row:disabled { opacity: var(--notification-settings-disabled-opacity); cursor: not-allowed; }
.switch-row:disabled:hover { background: var(--notification-settings-row-fill); }
.switch-row__text { flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--notification-settings-row-title-to-subtitle); }
.switch-row__title { color: var(--notification-settings-row-title-color); font: var(--notification-settings-row-title-style) var(--font-family); }
.switch-row__subtitle { color: var(--notification-settings-row-subtitle-color); font: var(--notification-settings-row-subtitle-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
/* The switch: a track and its knob, which stands at the far end when it is on. */
.switch-row__switch { flex: none; position: relative; inline-size: var(--web-switch-width); block-size: var(--web-switch-height); border-radius: var(--web-switch-height); background: var(--palette-placeholder); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.switch-row__switch::after { content: ""; position: absolute; inset-block-start: calc((var(--web-switch-height) - var(--web-switch-knob)) / 2); inset-inline-start: calc((var(--web-switch-height) - var(--web-switch-knob)) / 2); inline-size: var(--web-switch-knob); block-size: var(--web-switch-knob); border-radius: 50%; background: var(--palette-background); box-shadow: 0 1px var(--spacing-xxs) var(--palette-shadow-soft); transition: inset-inline-start var(--motion-selection-millis) var(--motion-easing); }
.switch-row[aria-checked="true"] .switch-row__switch { background: var(--notification-settings-switch-on-tint); }
.switch-row[aria-checked="true"] .switch-row__switch::after { inset-inline-start: calc(var(--web-switch-width) - var(--web-switch-knob) - (var(--web-switch-height) - var(--web-switch-knob)) / 2); }
/* Under the rows: that notifications are for an account. Under the permission: that the settings could not be opened. */
.notify__note { margin-block-start: var(--notification-settings-rows-to-note); color: var(--notification-settings-note-color); font: var(--notification-settings-note-style) var(--font-family); line-height: var(--typography-caption-loose-line); }
.notify__failure { color: var(--notification-settings-failure-color); font: var(--notification-settings-failure-style) var(--font-family); }
/* A state of the page, drawn under it: a mark of the design, not of the website. */
.notify-states { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); margin-block-start: var(--web-section-gap); padding-block-start: var(--spacing-xl); border-block-start: 2px dashed var(--palette-brand-outline); }
.notify-states__label { margin-block-end: var(--spacing-sm); color: var(--palette-text-emphasis); font: var(--typography-caption-strong) var(--font-family); line-height: var(--typography-caption-loose-line); }
@media (min-width: 768px) {
.notify { max-inline-size: 760px; margin-inline: auto; }
.notify-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
/* What the browser allows beside the rows, in view; with nothing to say there, the rows alone in the middle. */
.notify--split { max-inline-size: none; grid-template-columns: minmax(0, 1fr) var(--web-aside); gap: var(--web-grid-gap); }
.notify--split .notify__aside { order: 0; position: sticky; inset-block-start: calc(var(--web-header-height) + var(--spacing-lg)); }
.notify--split .notify__permission { padding: var(--spacing-xl); }
.notify-states { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ==========================================================================
7. The list of the family's pages (pages/launch/index.html). Not a page of the website.
========================================================================== */
.page-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--action-row-gap); }
.page-list .action-row + .action-row { margin-block-start: 0; }
.page-list .action-row__subtitle { line-height: var(--typography-label-tall-line); }
@media (min-width: 1100px) {
.page-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--web-grid-gap); }
}
/* ==========================================================================
9. The website's Home (Figma 2198:1540, phone 2277:573): HomeScreen.kt.
The kit draws the parts (hero search, feature strip, section heads,
cards, bands, the questions); this places them on the page.
========================================================================== */
body.home-page { background: var(--palette-background); }
/* The hero: a soft lavender to blue sky; on a phone the globe stands over the words. */
.home-hero {
position: relative; isolation: isolate; overflow: hidden;
padding-block: var(--spacing-lg) calc(var(--spacing-xxl) * 2);
background: linear-gradient(160deg, var(--palette-tile-violet) 0%, var(--palette-background) 45%, var(--palette-faq-panel) 100%);
}
.home-hero__inner { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.home-hero__art { position: relative; min-block-size: 260px; }
.home-hero__picture { display: block; }
.home-hero__picture--wide { display: none; }
.home-hero__picture--phone { inline-size: min(100%, 360px); margin-inline: auto; aspect-ratio: 1; object-fit: contain; }
.home-hero__chip {
position: absolute; display: flex; align-items: center; gap: var(--spacing-xs); max-inline-size: 220px;
padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md);
background: color-mix(in srgb, var(--palette-background) 88%, transparent); box-shadow: var(--shadow-card-lift);
}
.home-hero__chip .icon-tile { inline-size: 36px; block-size: 36px; }
.home-hero__chip .icon-tile .icon { --icon-size: 18px; }
.home-hero__chip-words { display: flex; flex-direction: column; min-inline-size: 0; }
.home-hero__chip-title { color: var(--palette-brand); font: var(--typography-label-strong) var(--font-family); }
.home-hero__chip-title--violet { color: var(--palette-violet); }
.home-hero__chip-title--apricot { color: var(--palette-apricot); }
.home-hero__chip-line { color: var(--palette-text-secondary); font: var(--typography-caption) var(--font-family); }
.home-hero__chip--1 { inset-block-start: 8%; inset-inline-end: 4%; }
.home-hero__chip--2 { inset-block-start: 42%; inset-inline-start: 0; }
.home-hero__chip--3 { inset-block-end: 6%; inset-inline-end: 24%; }
/* The plan builder: the apps' floating button, a round brand button at the art's foot. */
.home-hero__assistant {
position: absolute; inset-block-end: calc(var(--spacing-lg) * -1); inset-inline-end: 0; z-index: 1;
display: inline-flex; align-items: center; justify-content: center; inline-size: 64px; block-size: 64px;
border-radius: 50%; background: var(--palette-brand); color: var(--palette-on-brand); box-shadow: var(--shadow-card-lift); cursor: pointer;
}
.home-hero__assistant .icon { --icon-size: 30px; }
.home-hero__assistant:hover { background: var(--palette-brand-deep); }
.home-hero__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); min-inline-size: 0; text-align: start; }
.home-hero__title { color: var(--palette-navy); font: var(--typography-site-hero) var(--font-family); }
.home-hero__accent { display: block; color: var(--palette-brand); }
.home-hero__body { max-inline-size: 60ch; color: var(--palette-text-emphasis); font: var(--typography-site-body) var(--font-family); line-height: 1.6; }
.home-hero__search { inline-size: 100%; }
/* The sections under the hero; the feature strip rises over the hero's foot. */
.home-sections { display: flex; flex-direction: column; gap: calc(var(--spacing-xxl) * 1.5); padding-block-end: calc(var(--spacing-xxl) * 2); }
.home-features { position: relative; margin-block-start: calc(var(--spacing-xxl) * -1.5); list-style: none; }
.home-features__words { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.home-section { min-inline-size: 0; }
.home-section > .section-head:not(.section-head--start) { margin-inline: auto; }
/* The kinds of package: one row that slides sideways on a phone. */
.home-kinds { flex-wrap: nowrap; overflow-x: auto; margin-block-end: var(--spacing-lg); padding-block: 2px; scrollbar-width: none; }
.home-kinds::-webkit-scrollbar { display: none; }
.home-cards .placeholder--country-card { aspect-ratio: 342 / 200; block-size: auto; inline-size: auto; }
/* The running eSIMs of a traveller. */
.home-esims { display: grid; gap: var(--spacing-md); }
/* The companion's band and the tours' band: the brand rising over the picture. */
.home-companion-band .eyebrow-pill { color: var(--palette-navy); }
.home-companion-band__open { --_fill: var(--palette-background); --_label: var(--palette-brand); --_hover: var(--palette-surface); }
.home-tours-band { min-block-size: 240px; text-decoration: none; }
.home-tours-band__button { --_fill: var(--palette-background); --_label: var(--palette-brand); --_hover: var(--palette-surface); }
.home-extra__mirror:dir(ltr) { transform: scaleX(-1); }
/* The app band: the skyline behind, faint; the phones at its end. */
.home-app-band__skyline { opacity: 0.35; object-position: bottom; }
.home-app-band__get { color: var(--palette-text-emphasis); font: var(--typography-title-bold) var(--font-family); }
.home-app-band .store-button { cursor: default; }
/* The questions: the words, then the list; side by side from a tablet up. */
.home-faq__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
.home-faq__title { color: var(--palette-brand); font: var(--typography-site-section) var(--font-family); }
.home-faq__body { max-inline-size: 48ch; color: var(--palette-text-emphasis); font: var(--typography-site-body) var(--font-family); line-height: 1.6; }
.home-faq__ask { color: var(--palette-text-emphasis); font: var(--typography-title-bold) var(--font-family); }
.home-faq__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
/* The tours' grid (HomeState.tourCards, at most six): the tours list's own card
(browse/ToursScreen.kt), its picture under the brand fade, the flags, the
name and the "from" price. A row that scrolls on a phone, three across on a
tablet, four on a desktop as the frame draws them. */
.home-tour-grid {
--home-tour-card-height: 180px;
--home-tour-card-fade: rgba(20, 94, 238, 0) 17%, rgba(20, 94, 238, 0.8) 95.5%;
--home-tour-card-flag-size: 30px;
--home-tour-card-flag-step: 15px;
}
.home-tour-grid__cards {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: var(--spacing-sm);
overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none;
padding-block: var(--spacing-xxs) var(--spacing-sm);
}
.home-tour-grid__cards::-webkit-scrollbar { display: none; }
/* The tour collections' chips over the grid (HomeState.tourChips): a row that scrolls on a phone, wraps from a tablet up. */
.home-tour-grid__chips { display: flex; gap: var(--spacing-xs); margin-block-end: var(--spacing-md); overflow-x: auto; scrollbar-width: none; padding-block: var(--spacing-xxs); }
.home-tour-grid__chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .home-tour-grid__chips { flex-wrap: wrap; overflow: visible; } }
.home-tour-grid .tour-card {
--web-focus-color: var(--palette-brand);
position: relative; isolation: isolate;
align-items: flex-start; justify-content: flex-end; gap: var(--spacing-xs);
min-block-size: var(--home-tour-card-height); padding: var(--spacing-lg);
border-radius: var(--radius-card); background: var(--palette-card-plain, var(--palette-brand)); color: var(--palette-on-brand);
scroll-snap-align: start; cursor: pointer;
}
.home-tour-grid .tour-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to var(--inline-start), var(--home-tour-card-fade)); }
.home-tour-grid .tour-card__picture { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; aspect-ratio: auto; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
/* The picture leans in under the pointer, as the card rises. */
.home-tour-grid .tour-card__picture { transition: transform 600ms var(--motion-easing); }
.home-tour-grid .tour-card:hover .tour-card__picture { transform: scale(1.05); }
}
.home-tour-grid .tour-card__flags { display: flex; margin-block-end: auto; }
.home-tour-grid .tour-card__flags .flag { --flag-size: var(--home-tour-card-flag-size); --flag-ring: 1px; }
.home-tour-grid .tour-card__flags .flag + .flag { margin-inline-start: calc(var(--home-tour-card-flag-step) - var(--home-tour-card-flag-size)); }
.home-tour-grid .tour-card__name { max-inline-size: 100%; color: var(--palette-on-brand); font: var(--typography-site-card-title, var(--typography-title-bold)) var(--font-family); }
.home-tour-grid .tour-card__price { color: var(--palette-on-brand); font: var(--typography-label) var(--font-family); }
@media (min-width: 768px) {
.home-tour-grid__cards { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.home-tour-grid .tour-card { aspect-ratio: 16 / 10; min-block-size: 0; }
}
@media (min-width: 1100px) {
.home-tour-grid__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Why MAAK: each card's art in its own soft colour. */
.home-reasons__art--blue { background: var(--palette-tile-blue); color: var(--palette-brand); }
.home-reasons__art--violet { background: var(--palette-tile-violet); color: var(--palette-violet); }
.home-reasons__art--green { background: var(--palette-tile-green); color: var(--palette-positive); }
.home-reasons__art--apricot { background: var(--palette-tile-apricot); color: var(--palette-apricot); }
.home-reasons { grid-template-columns: minmax(0, 1fr); }
.hero-search__input.hero-search__input { min-block-size: 44px; cursor: pointer; }
@media (max-width: 767px) {
/* A phone: the head's "see all" goes under the title, and a destination's card is tall enough for its price. */
.home-section .section-head--start { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-xs); }
.home-section .section-head--start .section-head__action { grid-column: 1; grid-row: auto; justify-self: start; }
/* The hero's globe as the phone frame draws it (2277:573): about two thirds of the width, straight on the sky
(its file's pale square faded out), with small badges, so the title shows in the first screen. */
.home-hero__inner { gap: var(--spacing-md); }
.home-hero__art { min-block-size: 0; }
.home-hero__picture--phone {
inline-size: min(66%, 250px);
-webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%);
mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%);
}
.home-hero__chip { gap: 6px; max-inline-size: none; padding: 5px 8px; border-radius: 10px; white-space: nowrap; }
.home-hero__chip .icon-tile { inline-size: 26px; block-size: 26px; border-radius: 8px; }
.home-hero__chip .icon-tile .icon { --icon-size: 14px; }
.home-hero__chip-title { font-size: 12px; line-height: 16px; }
.home-hero__chip-line { font-size: 10px; line-height: 13px; }
.home-hero__chip--1 { inset-block-start: 6%; inset-inline-end: 0; }
.home-hero__chip--2 { inset-block-start: 40%; inset-inline-start: 0; }
.home-hero__chip--3 { inset-block-end: 4%; inset-inline-end: calc(52px + var(--spacing-sm)); }
.home-hero__assistant { inline-size: 52px; block-size: 52px; inset-block-end: calc(var(--spacing-md) * -1); }
.home-hero__assistant .icon { --icon-size: 24px; }
}
@media (min-width: 768px) {
.home-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-esims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.home-kinds { flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 1100px) {
.home-hero { padding-block: var(--spacing-xl) calc(var(--spacing-xxl) * 3); }
.home-hero__inner { flex-direction: row-reverse; align-items: center; min-block-size: 440px; }
.home-hero__words { flex: 1 1 52%; }
.home-hero__art { position: static; flex: 1 1 44%; }
.home-hero__picture--phone { display: none; }
.home-hero__picture--wide {
display: block; position: absolute; inset-block: 0; inset-inline-end: 0; z-index: -1;
inline-size: 56%; block-size: 100%; object-fit: cover; object-position: left center;
-webkit-mask-image: linear-gradient(to var(--inline-start), #000 65%, transparent);
mask-image: linear-gradient(to var(--inline-start), #000 65%, transparent);
}
.home-hero__picture--wide:dir(ltr) { transform: scaleX(-1); -webkit-mask-image: linear-gradient(to right, #000 65%, transparent); mask-image: linear-gradient(to right, #000 65%, transparent); }
.home-hero__chip--1 { inset-block-start: 22%; inset-inline-end: 30%; inset-inline-start: auto; }
.home-hero__chip--2 { inset-block-start: 44%; inset-inline-end: 12%; inset-inline-start: auto; }
.home-hero__chip--3 { inset-block-start: 58%; inset-block-end: auto; inset-inline-end: 34%; }
.home-hero__assistant { inset-block-end: auto; inset-block-start: 62%; inset-inline-end: 4%; }
.home-app-band .picture-band__body { max-inline-size: 50%; }
.home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-faq { padding-inline: calc(var(--spacing-xxl) * 2); }
}
/* About: the belief cards are the picture with the words on the light side, which is the right side in
the design in both directions, so the words never sit over the art. */
.belief-card { grid-template-columns: minmax(0, 1fr); }
.belief-card .topic-card__words { max-inline-size: 55%; margin-left: auto; margin-right: 0; }
@media (max-width: 560px) { .belief-card .topic-card__words { max-inline-size: 100%; background: rgba(255,255,255,.85); padding: var(--spacing-md); border-radius: 16px; } .belief-card { align-items: end; min-block-size: 260px; } }
/* A light hero with no picture is a short panel, not the tall one that leaves room for a picture. */
.page-hero--light.page-hero--bare { min-block-size: 0; padding-block: calc(var(--spacing-xl) * 1.5); }
.page-hero--light.page-hero--bare::after { content: none; }
/* Two cards, centred (Contact), where the grid class would draw three columns. */
.card-grid.card-grid--pair { max-inline-size: 820px; margin-inline: auto; }
@media (min-width: 768px) { .card-grid.card-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ==========================================================================
Help's questions (frame 2444:1784): the head centred over them, then the
questions as white rows with a hairline, two columns from a desktop up.
A quick answer opens its question and brings it to the middle of the window.
========================================================================== */
.help-faq { display: grid; gap: var(--spacing-xl); }
.help-faq__empty { text-align: center; }
.help-faq__columns { display: grid; gap: var(--spacing-sm); align-items: start; }
.help-faq .faq-item { box-shadow: inset 0 0 0 1px var(--palette-surface); scroll-margin-block: calc(var(--web-header-height) + var(--spacing-lg)); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.help-faq .faq-item:hover { box-shadow: inset 0 0 0 1px var(--palette-brand-outline), var(--shadow-card-lift); }
.help-faq .faq-item[open] { box-shadow: inset 0 0 0 1px var(--palette-brand-outline); }
@media (min-width: 1024px) {
.help-faq__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
}
/* ==========================================================================
Contact's form (frame 2500:2259): ContactScreen.kt's ContactForm, drawn
from shared's ContactFormState. White fields with a hairline; the name,
the email and the type side by side from a tablet up, the subject across,
the details with "Send" at their side from a desktop up.
========================================================================== */
.contact-form { display: grid; gap: var(--spacing-xl); }
.contact-form__grid { display: grid; gap: var(--spacing-md); }
.contact-form__cell { min-inline-size: 0; }
.contact-form__field { background: var(--palette-background); box-shadow: inset 0 0 0 1px var(--palette-surface); transition: box-shadow var(--motion-selection-millis) var(--motion-easing); }
.contact-form__field:hover { box-shadow: inset 0 0 0 1px var(--palette-brand-outline); }
.contact-form__field:focus-within { box-shadow: inset 0 0 0 1px var(--palette-brand); }
.contact-form__field select { cursor: pointer; background: transparent; }
.contact-form__field textarea { inline-size: 100%; }
.contact-form__note { grid-column: 1 / -1; color: var(--palette-text-secondary); font: var(--typography-label-regular) var(--font-family); }
.contact-form__bottom { grid-column: 1 / -1; display: grid; gap: var(--spacing-md); }
.contact-form__error, .contact-form__details-error { grid-column: 1 / -1; margin-block-start: calc(var(--spacing-md) * -1 + var(--form-field-field-to-error)); }
.contact-form__button { inline-size: 100%; min-block-size: 56px; transition: transform var(--motion-selection-millis) var(--motion-easing), box-shadow var(--motion-selection-millis) var(--motion-easing); }
.contact-form__button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(17 94 234 / 0.28); }
.contact-form__error { padding-inline-start: 0; }
.contact-form__sent { display: grid; justify-items: center; gap: var(--spacing-sm); max-inline-size: 560px; margin-inline: auto; padding: var(--spacing-xl) var(--spacing-lg); border-radius: var(--radius-lg); background: var(--palette-surface); text-align: center; }
.contact-form__sent-mark { display: inline-flex; border-radius: 50%; color: var(--palette-brand); --icon-size: 56px; }
.contact-form__sent-title { color: var(--palette-text-emphasis); font: var(--typography-site-card-title) var(--font-family); font-weight: var(--font-weights-bold); }
.contact-form__sent-body { color: var(--palette-text-secondary); font: var(--typography-label-regular) var(--font-family); line-height: 1.7; }
.contact-form__sent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); margin-block-start: var(--spacing-xs); }
@media (prefers-reduced-motion: no-preference) {
.contact-form__sent { animation: kit-pop 420ms var(--motion-easing) both; }
.contact-form__sent-mark { animation: kit-ring 900ms var(--motion-easing) 120ms both; }
.contact-form__error, .contact-form__cell .form-field__error { animation: kit-fade 220ms var(--motion-easing) both; }
}
@media (min-width: 768px) {
.contact-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.contact-form__cell--wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.contact-form__note { text-align: end; }
/* The label over the box, and "Send" exactly as tall as the box beside it, even when the box is resized. */
.contact-form__bottom { grid-template-columns: minmax(0, 1fr) 160px; column-gap: var(--spacing-md); row-gap: 0; align-items: stretch; }
.contact-form__cell--details { display: contents; }
.contact-form__cell--details > .form-label { grid-column: 1; grid-row: 1; }
.contact-form__cell--details > .contact-form__field { grid-column: 1; grid-row: 2; }
.contact-form__send { grid-column: 2; grid-row: 2; display: flex; }
.contact-form__button { flex: 1; min-block-size: 132px; border-radius: var(--radius-lg); }
}
/* A store's name on one line ("App Store" broke in two on the narrow band). */
.store-button__name { white-space: nowrap; }
/* Privacy and Terms (frame 2592:5179): the contents card stands at the reading start, the text beside it. */
@media (min-width: 1100px) {
.document-layout { grid-template-columns: var(--web-aside) minmax(0, 1fr); }
.document-layout > .layout-split__aside { order: -1; }
}
/* The hero photo fades to white on its right, where the Arabic words stand, and its traveller is on its left:
the crop keeps him, and the photo is turned round under left-to-right words. */
.site-hero .page-hero__picture[src*="web_privacy_hero"] { object-position: left 30%; }
[dir="ltr"] .site-hero .page-hero__picture[src*="web_privacy_hero"] { transform: scaleX(-1); }