@onlive.ai/common-121 0.2.191 → 0.2.196

package/themes/custom/seat.theme.css

@@ -0,0 +1,915 @@
+/**
+ * Seat Theme
+ */
+
+/* ========================================================================
+  THEME TOKENS
+  ======================================================================== */
+
+:root,
+:host,
+.ol-theme-light {
+  background-color: transparent;
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+
+  /* Onlive UI Palette - Light Theme */
+  --ol-color-primary-50: rgb(220 220 220);
+  --ol-color-primary-100: rgb(200 200 200);
+  --ol-color-primary-200: rgb(150 150 150);
+  --ol-color-primary-300: rgb(100 100 100);
+  --ol-color-primary-400: rgb(80 80 80);
+  --ol-color-primary-500: rgb(60 60 60);
+  --ol-color-primary-600: rgb(40 40 40);
+  --ol-color-primary-700: rgb(0 0 0);
+  --ol-color-primary-800: rgb(0 0 0);
+  --ol-color-primary-900: rgb(0 0 0);
+  --ol-color-primary-950: rgb(0 0 0);
+
+  /* Seat typography */
+  --seat-font-family-regular: "SeatRegular", sans-serif;
+  --seat-font-family-medium: "SeatMedium", sans-serif;
+  --seat-font-family-bold: "SeatBold", sans-serif;
+  --seat-font-family-black: "SeatBlack", sans-serif;
+
+  /* Onlive UI typography and base vars */
+  --ol-font-sans: var(--seat-font-family-regular);
+
+  /* Calendar vars */
+  --ol-calendar-day-border-radius: 50%;
+  --ol-calendar-day-padding: 14px 15px;
+  --ol-calendar-day-border: 1px solid transparent;
+  --ol-calendar-day-selected-border: 1px solid var(--ol-color-neutral-900);
+  --ol-calendar-day-selected-hover-border: 1px solid var(--ol-color-neutral-900);
+  --ol-calendar-selected-background-color: var(--ol-color-neutral-900);
+  --ol-calendar-selected-color: var(--ol-color-neutral-0);
+  --ol-calendar-day-inactive-font-weight: 200;
+  --ol-calendar-day-today-color: auto;
+  --ol-calendar-day-today-background-color: transparent;
+  --ol-calendar-inactive-color: var(--ol-color-neutral-300);
+
+  /* Input floating label */
+  --ol-input-floating-label-initial-position-medium: 0, 22px;
+  --ol-input-floating-label-final-position-medium: 0, 10px;
+}
+
+/* ========================================================================
+   CORE ONLIVE UI COMPONENTS
+   ======================================================================== */
+
+[slot="label"] h3 {
+  font-family: var(--seat-font-family-medium);
+  font-size: var(--ol-font-size-medium);
+  color: var(--ol-color-neutral-900);
+  margin: 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+[slot="label"] p {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-500);
+  margin: var(--ol-spacing-2x-small) 0 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+/* Spinner */
+ol-spinner {
+  --track-width: 3px;
+  --track-color: var(--ol-color-neutral-200);
+  --indicator-color: var(--ol-color-neutral-900);
+}
+
+/* Buttons */
+ol-button::part(base) {
+  border-radius: var(--ol-border-radius-pill);
+  transition: all var(--ol-transition-medium) ease;
+}
+ol-button::part(label) {
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
+  font-family: var(--seat-font-family-bold);
+  font-size: var(--ol-font-size-medium);
+  font-weight: 700;
+}
+ol-button::part(spinner) {
+  --track-width: 4px;
+  font-size: 1.5em;
+}
+ol-button[variant="primary"]::part(base) {
+  border-color: var(--ol-color-neutral-1000);
+  background-color: var(--ol-color-neutral-1000);
+  color: #ece9e1;
+}
+ol-button[variant="primary"]:hover:not([disabled])::part(base) {
+  opacity: 0.8;
+}
+ol-button[variant="default"]::part(base) {
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-1000);
+}
+ol-button[variant="default"]:hover::part(base) {
+  box-shadow: 0 0 0 1px var(--ol-color-neutral-1000);
+}
+
+/* Inputs */
+ol-input::part(base) {
+  height: 60px;
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-400);
+}
+ol-input::part(input) {
+  color: var(--ol-color-neutral-1000);
+  background: transparent;
+  padding: var(--ol-spacing-large) 8px 0;
+  line-height: 20px;
+  height: 100%;
+  font-weight: 300;
+  font-size: var(--ol-font-size-small);
+}
+ol-input::part(form-control-label) {
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-500);
+  padding: 0 8px;
+}
+
+/* Textarea */
+ol-textarea::part(base) {
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-400);
+}
+ol-textarea::part(textarea) {
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-900);
+  background: transparent;
+  padding: var(--ol-spacing-x-small);
+}
+ol-textarea::part(form-control-label) {
+  font-size: var(--ol-font-size-small);
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-500);
+  padding: 0;
+}
+
+/* Select */
+ol-select::part(combobox) {
+  height: 60px;
+  border-color: var(--ol-color-neutral-400);
+  border-radius: 2px;
+  box-shadow: none;
+  padding-inline: var(--ol-spacing-x-small);
+}
+ol-select::part(form-control) {
+  position: relative;
+}
+ol-select::part(form-control-label) {
+  position: absolute;
+  top: 20px;
+  left: var(--ol-spacing-x-small);
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-500);
+  line-height: 20px;
+  margin: 0;
+  z-index: 1;
+  transition: all var(--ol-transition-fast) ease;
+}
+ol-select.ofl__select--selected::part(form-control-label) {
+  font-size: var(--ol-font-size-x-small);
+  top: 6px;
+}
+ol-select::part(display-input) {
+  font-size: var(--ol-font-size-small);
+  font-weight: 700;
+  color: var(--ol-color-neutral-900);
+  padding-top: var(--ol-spacing-large);
+}
+ol-select::part(listbox) {
+  border-color: var(--ol-color-neutral-400);
+  border-radius: 2px;
+}
+
+/* Select options */
+ol-option::part(base) {
+  color: var(--ol-color-neutral-900);
+  padding: var(--ol-spacing-x-small);
+  background: transparent;
+}
+ol-option:hover::part(base) {
+  background-color: #e1d7cd;
+}
+ol-option[aria-selected="true"]::part(base) {
+  background-color: #e1d7cd;
+}
+ol-option::part(checked-icon) {
+  display: none;
+}
+
+/* Range */
+ol-range::part(input) {
+  border-radius: var(--ol-border-radius-medium);
+  --thumb-size: 22px;
+  --track-height: 4px;
+  --thumb-background-color: var(--ol-color-neutral-900);
+  --thumb-border-color: var(--ol-color-neutral-900);
+  --ol-color-primary-500: var(--ol-color-neutral-900);
+}
+
+/* Carousel */
+ol-carousel::part(pagination) {
+  gap: var(--ol-spacing-x-small);
+}
+ol-carousel::part(pagination-item) {
+  border-radius: 0;
+  height: 2px;
+  width: 20px;
+  background-color: var(--ol-color-neutral-400);
+}
+ol-carousel::part(pagination-item--active) {
+  background: var(--ol-color-neutral-900);
+}
+.ofl__carousel--showcase-mode .ofl__carousel__item-label {
+  display: none;
+}
+.ofl__carousel--showcase-mode::part(navigation-button) {
+  background: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-50);
+  font-size: var(--ol-font-size-medium);
+}
+.ofl__carousel--showcase-mode::part(navigation-button--next) {
+  position: absolute;
+  right: 10vw;
+}
+.ofl__carousel--showcase-mode::part(navigation-button--previous) {
+  position: absolute;
+  left: 10vw;
+}
+
+/* Radio button */
+ol-radio-button {
+  margin-inline: 0;
+}
+ol-radio-button::part(label) {
+  color: var(--ol-color-neutral-500);
+}
+ol-radio-button[checked]::part(button) {
+  outline: 1px solid var(--ol-color-neutral-900);
+}
+
+/* Radio */
+ol-radio-group::part(form-control-label) {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-500);
+  margin-bottom: var(--ol-spacing-small);
+}
+ol-radio-group ol-radio {
+  line-height: 2.5;
+}
+ol-radio-group ol-radio::part(control) {
+  --toggle-size: 20px;
+  margin: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-500);
+  z-index: 1;
+}
+ol-radio-group ol-radio::part(checked-icon) {
+  transform: scale(1.3);
+}
+ol-radio-group ol-radio::part(control--checked) {
+  color: var(--ol-color-primary-600);
+  border-color: var(--ol-color-primary-600);
+}
+ol-radio-group ol-radio::part(label) {
+  line-height: 1.5;
+  color: var(--ol-color-neutral-600);
+}
+
+/* Checkbox */
+ol-checkbox::part(label) {
+  font-family: var(--seat-font-family-regular);
+  font-weight: 400;
+  color: var(--ol-color-neutral-600);
+  line-height: var(--ol-line-height-dense);
+}
+ol-checkbox::part(control) {
+  border-radius: 2px;
+  height: 20px;
+  width: 20px;
+  background: transparent;
+  border-color: var(--ol-color-neutral-400);
+}
+ol-checkbox::part(control--checked) {
+  border-color: var(--ol-color-neutral-1000);
+  background-color: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-0);
+}
+
+/* Dialog */
+ol-dialog::part(panel) {
+  border-radius: 2px;
+}
+
+/* Loading state */
+.ofl__flow__loading,
+.ofl__flow__loading-overlay {
+  font-size: var(--ol-spacing-2x-large);
+}
+.ofl__flow__loading ol-spinner,
+.ofl__flow__loading-overlay ol-spinner {
+  --track-width: 6px;
+}
+.ofl__flow--theme-dark .ofl__flow__loading-overlay {
+  background: transparent;
+}
+
+/* ========================================================================
+   MAP
+   ======================================================================== */
+
+/* Search input */
+.ofl__map__search-input::part(base) {
+  height: 50px;
+}
+.ofl__map__search-input::part(input) {
+  height: 48px;
+  margin-top: 0;
+  padding: 0 var(--ol-input-spacing-medium);
+}
+.ofl__map__distance-range {
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__map-container {
+  height: 300px;
+  aspect-ratio: 5 / 3;
+  border-radius: 0;
+  overflow: hidden;
+}
+.ofl__map {
+  gap: var(--ol-spacing-small);
+}
+.ofl__map__location-empty {
+  text-align: left;
+  align-items: flex-start;
+  color: var(--ol-color-neutral-700);
+  border-radius: 0;
+}
+
+/* Labels and list container */
+.ofl__map__label {
+  font-family: var(--ol-font-sans);
+  margin-bottom: var(--ol-spacing-medium);
+  color: var(--ol-color-neutral-900);
+}
+.ofl__map__options-list {
+  max-height: 300px;
+  overflow: auto;
+  scrollbar-width: auto;
+  scrollbar-color: var(--ol-color-neutral-900) transparent;
+}
+.ofl__map__options-list::-webkit-scrollbar {
+  width: 8px;
+}
+.ofl__map__options-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ofl__map__options-list::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--ol-border-radius-large);
+  border: 3px solid transparent;
+}
+
+/* Option cards */
+.ofl__map__options-list--button .ofl__map__option-item::part(base) {
+  border-radius: 0;
+  border: 1px solid var(--ol-color-neutral-900);
+}
+.ofl__map__options-list--button .ofl__map__option-item::part(button) {
+  border-radius: 0;
+  transition: all var(--ol-transition-medium) ease;
+}
+.ofl__map__options-list--button .ofl__map__option-item:not([disabled]):hover::part(button),
+.ofl__map__options-list--button
+  .ofl__map__option-item.ofl__map__option-item--selected:not([disabled])::part(button) {
+  background-color: var(--ol-color-neutral-0);
+}
+.ofl__map__options-list--button
+  .ofl__map__option-item.ofl__map__option-item--selected::part(button),
+.ofl__map__options-list--button .ofl__map__option-item:hover::part(button) {
+  box-shadow: inset 0 0 0 1px var(--ol-color-neutral-900);
+}
+.ofl__map__option-item__title {
+  font-family: var(--ol-font-sans);
+  color: var(--ol-color-neutral-1000);
+  text-transform: uppercase;
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__option-item__description,
+.ofl__map__options-list--button .ofl__map__option-item .ofl__map__option-item__properties {
+  font-family: var(--ol-font-sans);
+  font-size: var(--ol-font-size-medium);
+  color: var(--ol-color-neutral-500);
+}
+.ofl__map__options-list::before {
+  background: linear-gradient(to bottom, rgb(255 255 255 / 70%) 0%, rgba(0, 0, 0, 0) 100%);
+}
+.ofl__map__options-list::after {
+  background: linear-gradient(to top, rgb(255 255 255 / 70%) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+/* Layout helpers */
+.ofl__map__container--visible {
+  gap: var(--ol-spacing-x-large);
+}
+.ofl__map__options-list--button::part(button-group__base) {
+  gap: var(--ol-spacing-2x-small);
+}
+
+/* Rating Component Styling */
+.ofl__rating {
+  --symbol-color: var(--ol-color-neutral-900);
+  --symbol-size: 2em;
+  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__rating__label {
+  margin-bottom: var(--ol-spacing-large);
+  margin-top: var(--ol-spacing-large);
+}
+
+/* ========================================================================
+   PAGE LAYOUT
+   ======================================================================== */
+
+/* Landing installations */
+.oip__page {
+  background-color: transparent;
+}
+.oip__page__header {
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  backdrop-filter: blur(12px);
+}
+.oip__page__content {
+  flex: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  align-items: center;
+  background-color: transparent;
+}
+.oip__page__content .oip__page__installation {
+  display: flex;
+  align-items: self-start;
+  justify-content: center;
+  width: 50%;
+  padding: var(--ol-spacing-large);
+}
+.oip__page__content .oip__page__image_container {
+  background: transparent;
+}
+.oip__page__content .oip__page__image_container .oip__page__image {
+  background-color: transparent;
+  object-fit: contain;
+}
+
+.ofl__widget,
+.ofl__flow {
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* ========================================================================
+   FLOW FORM BLOCK
+   ======================================================================== */
+
+/* Form spacing */
+.ofl__form > :not(:first-child) {
+  margin-top: var(--ol-spacing-large);
+}
+.ofl__form > [component="label"] + [component="checkbox"] {
+  margin-top: 0;
+}
+.ofl__form__field[component="checkbox"] + .ofl__form__field[component="label"] {
+  margin-top: var(--ol-spacing-large);
+}
+
+/* Actions */
+.ofl__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+.ofl__actions__button {
+  width: 100%;
+  max-width: 500px;
+}
+.ofl__flow__actions--top {
+  margin-bottom: 0;
+}
+.ofl__actions--top .ofl__actions__button {
+  width: max-content;
+}
+.ofl__actions--top .ofl__actions__button::part(base) {
+  padding: 0;
+  border: none;
+}
+.ofl__actions--top .ofl__actions__button:hover::part(base) {
+  border: none;
+  box-shadow: none;
+  opacity: 0.8;
+}
+.ofl__actions--top .ofl__actions__button::part(label) {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-medium);
+  padding: 0;
+  text-decoration: underline;
+}
+.ofl__actions--top .ofl__actions__button::part(prefix) {
+  display: none;
+}
+
+/* Labels and checkbox */
+.ofl__label {
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+  color: var(--ol-color-neutral-900);
+}
+.ofl__label h2 {
+  font-family: var(--seat-font-family-bold);
+  font-size: var(--ol-font-size-medium);
+  font-weight: 400;
+}
+.ofl__label p {
+  margin-top: 0;
+}
+
+/* Input states */
+.ofl__input--error::part(base),
+.ofl__input--error:focus::part(base) {
+  border-color: var(--ol-color-danger-600);
+}
+.ofl__input--error::part(form-control-help-text) {
+  color: var(--ol-color-danger-700);
+}
+.ofl__input--error::part(form-control-label),
+.ofl__input--error::part(form-control-label)::after {
+  color: var(--ol-color-neutral-500);
+}
+.ofl__label a {
+  color: var(--ol-color-neutral-900);
+}
+.ofl__input__error-message {
+  position: absolute;
+}
+.ofl__input--success::part(base),
+.ofl__input--success:focus::part(base) {
+  border-color: #009196;
+}
+
+/* Select states */
+.ofl__select--error::part(combobox) {
+  border-color: var(--ol-color-danger-600);
+}
+.ofl__select--success::part(combobox) {
+  border-color: #009196;
+}
+
+/* Stages */
+.ofl__stages--tabs .ofl__stages__stage {
+  line-height: 1.75;
+}
+
+/* ========================================================================
+   CALENDAR AND TIME SELECTION
+   ======================================================================== */
+
+.ofl__calendar__calendar {
+  width: max-content;
+  border: none;
+  padding: var(--ol-spacing-large) var(--ol-spacing-small);
+}
+.ofl__calendar__time-label {
+  font-size: var(--ol-font-size-medium);
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+  color: var(--ol-color-neutral-900);
+  margin: var(--ol-spacing-3x-large) 0 var(--ol-spacing-x-small);
+}
+.ofl__calendar__time-item {
+  width: 100%;
+}
+.ofl__calendar__time-list--list {
+  max-width: 100%;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  min-height: 40px;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-900);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item[checked]::part(label) {
+  color: var(--ol-color-neutral-0);
+}
+.ofl__calendar__time-list--list::part(button-group) {
+  width: 100%;
+}
+
+/* Compact time list grid */
+.ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: row;
+  gap: var(--ol-spacing-x-small);
+  justify-content: start;
+}
+.ofl__radio-button__group::part(button-group) {
+  width: 100%;
+}
+.ofl__radio-button__group .ofl__radio-button__button {
+  flex: 1;
+}
+.ofl__radio-button__group .ofl__radio-button__button::part(button) {
+  border-radius: var(--ol-border-radius-pill);
+  min-height: var(--ol-spacing-3x-large);
+  background-color: #c3c3cb0d;
+  border: none;
+}
+.ofl__radio-button__group::part(button-group__base) {
+  gap: var(--ol-spacing-large);
+}
+
+/* ========================================================================
+   RESPONSIVE (MOBILE)
+   ======================================================================== */
+
+@media (max-width: 768px) {
+  :root,
+  :host {
+    --ol-calendar-day-padding: 11px 10px;
+    --ol-calendar-day-font-size: var(--ol-font-size-small);
+  }
+
+  .oip__page__header {
+    width: auto;
+    margin: 0;
+    position: sticky;
+    top: 0;
+  }
+  .oip__page__content {
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .oip__page__content .oip__page__installation {
+    height: auto;
+    width: 100%;
+    align-items: center;
+  }
+
+  ol-carousel::part(navigation) {
+    display: none;
+  }
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 100%;
+    transform: none;
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 100%;
+  }
+  .ofl__map__map-container {
+    aspect-ratio: 3 / 3;
+  }
+  .ofl__map__option-item__title {
+    font-size: var(--ol-font-size-small);
+  }
+  .ofl__map__option-item__description,
+  .ofl__map__options-list--button .ofl__map__option-item .ofl__map__option-item__properties {
+    word-break: break-word;
+    font-size: var(--ol-font-size-small);
+  }
+  .ofl__carousel--showcase-mode::part(pagination) {
+    position: static;
+  }
+  .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+    min-height: 40px;
+  }
+  .ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
+    font-size: var(--ol-font-size-small);
+  }
+  .ofl__phone-input.ofl__phone-input__number--show-flag.ofl__phone-input__number--show-code
+    .ofl__phone-input__prefix {
+    width: 100%;
+  }
+  .ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ofl__flow__title,
+  .ofl__flow__form-container,
+  .ofl__flow__description,
+  .ofl__actions,
+  .ofl__error-content {
+    padding-left: var(--ol-spacing-medium);
+    padding-right: var(--ol-spacing-medium);
+  }
+
+  .ofl__stages--tabs .ofl__stages__progress {
+    --height: 4px;
+  }
+  .ofl__stages--tabs .ofl__stages__progress::part(base) {
+    border-radius: var(--ol-border-radius-large);
+  }
+  .ofl__stages--tabs.ofl__stages--small {
+    padding: var(--ol-spacing-medium);
+  }
+  .ofl__stages--tabs.ofl__stages--small .ofl__stages__stage-name {
+    line-height: 2.2;
+    text-transform: uppercase;
+    font-weight: 400;
+  }
+}
+
+/* ========================================================================
+   RESPONSIVE (DESKTOP)
+   ======================================================================== */
+@media (min-width: 769px) {
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 100vw;
+    transform: translateX(min(0px, calc(686px - 50vw)));
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: max(320px, 40vh);
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item {
+    opacity: 1;
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item img {
+    transform: scale(0.7);
+    opacity: 0.4;
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item.--is-active + ol-carousel-item img {
+    transform: scale(1.4);
+    opacity: 1;
+  }
+}
+@media (min-width: 1600px) {
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 1600px;
+    transform: translateX(-110px);
+  }
+}
+
+/* ========================================================================
+   ========================================================================
+   Custom Styles
+   ======================================================================== 
+   ========================================================================*/
+
+.ofl__flow.ofl__flow--step-modelSelection {
+  max-width: 1372px;
+}
+
+.ofl__flow.ofl__flow--step-paymentPreferences,
+.ofl__flow.ofl__flow--step-customerDetails,
+.ofl__flow.ofl__flow--step-dealerSelection,
+.ofl__flow.ofl__flow--step-datetimeSelection,
+.ofl__flow.ofl__flow--step-appointmentThankYouPage,
+.ofl__flow.ofl__flow--step-contactConsent,
+.ofl__flow.ofl__flow--step-contactThankYouPage {
+  max-width: 664px;
+}
+
+.olcs__title {
+  margin-bottom: var(--ol-spacing-large);
+}
+.olcs__title h2,
+.olcs__title p {
+  margin: 0;
+}
+.olcs__title p {
+  font-size: var(--ol-font-size-large);
+  font-family: var(--seat-font-family-regular);
+  font-weight: 300;
+  color: var(--ol-color-neutral-500);
+}
+.olcs__title h2 {
+  font-family: var(--seat-font-family-black);
+  font-weight: 900;
+  line-height: 1.5;
+  font-size: var(--ol-font-size-2x-large);
+}
+.olcs__test-drive-label {
+  margin-bottom: min(10vh, 150px);
+}
+.olcs__test-drive-label h2 {
+  font-size: var(--ol-font-size-large);
+  line-height: 1.5;
+  color: var(--ol-color-neutral-500);
+  margin: var(--ol-spacing-medium) 0;
+}
+.olcs__test-drive-label p {
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  font-size: var(--ol-font-size-medium);
+  line-height: 1;
+  color: var(--ol-color-neutral-900);
+  margin: var(--ol-spacing-medium) 0;
+}
+.olcs__carousel-label {
+  font-family: var(--seat-font-family-black);
+  font-size: var(--ol-font-size-2x-large);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--ol-color-neutral-900);
+  text-align: center;
+  margin: 0;
+}
+.ofl__form__field[name="carouselLabel"] {
+  margin-bottom: 0;
+}
+.olcs__model-image {
+  width: 100%;
+}
+.olcs__card {
+  text-align: center;
+}
+.olcs__label {
+  font-weight: 200;
+  text-align: center;
+  margin: 0;
+}
+h3.olcs__label {
+  font-weight: 200;
+}
+.olcs__dealer {
+  margin-top: var(--ol-spacing-large);
+}
+.olcs__datetime {
+  font-family: var(--seat-font-family-bold);
+  font-size: var(--ol-font-size-large);
+  margin: var(--ol-spacing-3x-large) auto var(--ol-spacing-large);
+}
+.olcs__customer-details {
+  margin: var(--ol-spacing-2x-large) 0 0 0;
+  font-weight: 300;
+}
+.olcs__row__text {
+  display: flex;
+  align-items: center;
+  gap: var(--ol-spacing-large);
+}
+.olcs__row__text h4 {
+  font-family: var(--seat-font-family-bold);
+  width: 50px;
+}
+.olcs__row__text h4,
+.olcs__row__text p {
+  margin: var(--ol-spacing-x-small) 0;
+}
+
+/* ========================================================================
+   RESPONSIVE (MOBILE)
+   ======================================================================== */
+
+@media (max-width: 768px) {
+  .olcs__carousel-label {
+    font-size: var(--ol-font-size-x-large);
+    margin-bottom: var(--ol-spacing-large);
+  }
+  .olcs__test-drive-label h2,
+  .olcs__test-drive-label p {
+    margin: var(--ol-spacing-x-small) 0;
+  }
+  .ofl__form__field[name="carouselLabel"] {
+    margin-bottom: 0;
+  }
+  .olcs__carousel-label p {
+    font-size: var(--ol-font-size-medium);
+  }
+  .olcs__carousel-label h2 {
+    font-size: var(--ol-font-size-2x-large);
+  }
+  .olcs__title h2 {
+    font-size: calc(2 * var(--ol-font-size-medium));
+  }
+}
+
+/* ========================================================================
+   RESPONSIVE (DESKTOP)
+   ======================================================================== */
+@media (min-width: 1440px) {
+  .olcs__carousel-label {
+    font-size: var(--ol-font-size-3x-large);
+  }
+}