Rio Las Vegas Hotel & Casino

Edit Property Details

Details

Name *

Logo *

Description *

Check-in Instructions *

Favicon *

Phone Number

Facebook

Instagram

Slug *

TraverseUUID *

Provider *

Provider Code *

Domain *

GTM Container ID

PostHog Project API Key

PostHog Host (optional)

CMS URL

Custom CSS

@import url("https://use.typekit.net/hys1dsx.css");

:root {
  --rio-dusk: #28407f;
  --rio-dusk-hover: #203366;
  --rio-guarana: #c5392f;
  --rio-guarana-hover: #9d2e26;
  --rio-sand: #fbf7f3;
  --rio-sand-100: #f3e4d8;
  --rio-body: "freight-sans-pro", sans-serif;
  --rio-body-cmp: "freight-sans-compressed-pro", sans-serif;
  --rio-display: "Manner Pro", Georgia, serif;
}

/* Rio's palette, expressed as the booking engine's own tokens. The product
 * defaults to Traversing's indigo-on-light brand; everything Rio here is an
 * override, applied once at the root rather than rule by rule.
 *
 * `html:root` rather than `:root`: this stylesheet is injected before the
 * app's, so a plain `:root` would tie on specificity and lose on order. */
html:root {
  --tv-ink: var(--rio-dusk);
  --tv-ink-soft: #3d4750;
  --tv-muted: #68727c;
  --tv-faint: #8a939c;
  --tv-line: rgba(40, 64, 127, 0.14);
  --tv-field-line: rgba(40, 64, 127, 0.25);
  --tv-card-line: rgba(40, 64, 127, 0.15);
  --tv-surface: var(--rio-sand);
  --tv-surface-alt: #faf7f4;
  --tv-surface-hover: var(--rio-sand-100);
  --tv-link: var(--rio-dusk);
  --tv-link-hover: var(--rio-dusk-hover);
  /* Rio's brand action is a flat guarana red, so both gradient stops match. */
  --tv-accent: var(--rio-guarana);
  --tv-accent-hover: var(--rio-guarana-hover);
  --tv-accent-gradient: linear-gradient(
    var(--rio-guarana),
    var(--rio-guarana)
  );
  --tv-accent-gradient-hover: linear-gradient(
    var(--rio-guarana-hover),
    var(--rio-guarana-hover)
  );
  --tv-accent-tint: #fdf6f3;
  --tv-accent-wash: #fdefec;
  --tv-accent-line: #f0d8d2;
  --tv-offer-tint: var(--rio-sand);
  --tv-offer-line: #e8dbcd;
  /* Rio brands with a dark navy band and white header type. */
  --tv-header-bg: #131c3f;
  --tv-header-scrim: linear-gradient(
    100deg,
    rgba(40, 64, 127, 0.92) 0%,
    rgba(40, 64, 127, 0.68) 46%,
    rgba(40, 64, 127, 0.34) 100%
  );
  --tv-header-fg: #fff;
  --tv-header-pill-bg: rgba(255, 255, 255, 0.14);
  --tv-header-pill-border: rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------- baseline */

*,
*::before,
*::after {
  border-radius: 0 !important;
}

.rounded-full.bg-gray-900.text-white {
  border-radius: 9999px !important;
}

body {
  background: var(--rio-sand) !important;
  color: var(--rio-dusk);
  font-size: 18px;
  line-height: 1.45;
  font-family: var(--rio-body) !important;
}

h1,
h2,
h3 {
  color: var(--rio-dusk) !important;
  font-family: var(--rio-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

p,
li,
span,
label,
div {
  font-family: var(--rio-body) !important;
}

button,
input,
select,
textarea {
  font-family: var(--rio-body) !important;
}

/* -------------------------------------------------------- page composition */

/* Only the photograph itself needs a rule; the band's colours come from the
 * --tv-header-* tokens above. */
.traverse-page-hero img {
  object-position: center 48% !important;
}

/* The breadcrumb and stay-summary strips sit between the band and the page. */
.traverse-breadcrumb {
  background: var(--rio-sand) !important;
  border-bottom-color: rgba(40, 64, 127, 0.12) !important;
}

.traverse-stay-summary {
  background: #fff !important;
}

.traverse-page-title h1 {
  color: var(--rio-dusk) !important;
}

/* The page below the band is plain white; nothing to unwind here any more. */
.traverse-page-surface {
  background: #fff !important;
}

header {
  background: transparent !important;
  box-shadow: none !important;
}

header a.text-gray-900 {
  color: #fff !important;
}

.backdrop-blur-md.bg-white\/50.border-t.border-gray-200 {
  background: transparent !important;
  border-top: 0 !important;
}

.border-t.border-gray-100.p-2 a {
  color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important;
}

/* ------------------------------------------------------------ header search */

/* The form now lays itself out inside the page container, so this only needs
 * to sit above the page and fill its column. `z-index` stays below the account
 * menu's 600 so the dropdown is never painted over. */
#search {
  position: relative;
  z-index: 500;
  width: 100%;
}

[data-user-menu] {
  z-index: 600;
}

/* The search fields are separate bordered boxes now, not one segmented
 * control, so the left/right borders these rules used to strip are load
 * bearing — without them each field showed only a top and bottom rule. */
#properties,
#adults,
#kids,
#header-datepicker {
  background: #fff !important;
  border: 1px solid rgba(40, 64, 127, 0.25) !important;
  box-shadow: none !important;
  color: var(--rio-dusk) !important;
  font-size: 0.9375rem !important;
}

header > nav select,
#properties,
#adults,
#kids,
#sort-by,
.ais-MenuSelect-select {
  appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27m19.5%208.25-7.5%207.5-7.5-7.5%27%20stroke%3D%27%2328407F%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 0.875rem 0.875rem !important;
  border: 1px solid rgba(40, 64, 127, 0.25) !important;
  color: var(--rio-dusk) !important;
  padding-right: 2rem !important;
}

select#sort-by {
  border: 1px solid rgba(40, 64, 127, 0.2) !important;
}

.ais-SearchBox-form {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

.ais-SearchBox-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 2.75rem !important;
  background: #fff !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  color: var(--rio-dusk) !important;
  font-size: 1rem !important;
  padding: 0.625rem 0.75rem 0.625rem 2.5rem !important;
}

.ais-SearchBox-submit {
  flex: 0 0 3rem !important;
  min-height: 2.75rem !important;
  padding: 0 !important;
}

/* ------------------------------------------------------------- Rio buttons */

#search-button,
button[type="submit"],
.ais-SearchBox-submit {
  padding: 0.5rem 0.75rem !important;
}

/* The booking CTA is the page's primary action, so it gets a taller target
   than the search buttons. The `a` type selector is deliberate: it lifts these
   rules above the `a[href*="/bookable-units/"]` card rules below, which the
   CTA's own href would otherwise match. */
a.traverse-book-cta {
  padding: 0.75rem 1rem !important;
}

#search-button,
button[type="submit"],
.ais-SearchBox-submit,
a.traverse-book-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background: var(--rio-guarana) !important;
  border: 1px solid var(--rio-guarana) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--rio-body-cmp) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.25px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color 150ms ease, color 150ms ease !important;
  white-space: nowrap !important;
}

#search-button:hover,
button[type="submit"]:hover,
.ais-SearchBox-submit:hover,
a.traverse-book-cta:hover {
  background: var(--rio-guarana-hover) !important;
  border-color: var(--rio-guarana-hover) !important;
  color: #fff !important;
}

#search-button svg,
#search-button span,
button[type="submit"] svg,
.ais-SearchBox-submit svg {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* ------------------------------------------------------- unit cards / grid */

/* Scoped to the two card grids. Unscoped, this also matched the booking CTA —
   its href is `…/bookable-units/<slug>/bookings/new` — and repainted it white,
   because an attribute selector outranks the `.traverse-book-cta` class. */
#unit-group a[href*="/bookable-units/"],
section:has(#related-products-heading) a[href*="/bookable-units/"] {
  background: #fff !important;
  color: var(--rio-dusk) !important;
  font-family: var(--rio-body) !important;
}

a[href*="/bookable-units/"] h3 {
  color: var(--rio-dusk) !important;
  font-family: var(--rio-display) !important;
  font-size: clamp(1.7rem, 3vw, 1.7rem) !important;
  font-weight: 500 !important;
  line-height: 0.98 !important;
}

a[href*="/bookable-units/"] p,
a[href*="/bookable-units/"] span,
a[href*="/bookable-units/"] div {
  font-size: 1rem;
}

a[href*="/bookable-units/"] p.text-base.font-medium.text-gray-900 {
  font-size: 1.5rem;
}

body:has(#unit-group) a[href*="/bookable-units/"] {
  background: #fff !important;
}

body:has(#unit-group) main,
body:has(.traverse-unit-page) .traverse-page-main {
  padding-top: 0 !important;
}

body:has(#unit-group) .backdrop-blur-md.bg-white\/50.border-t.border-gray-200 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

body:has(#unit-group) .mx-auto.max-w-2xl.px-4.py-8 {
  padding-top: 0 !important;
}

/* ------------------------------------------------- unit detail page (this) */

.traverse-unit-page {
  background: #fff !important;
  # padding-top: 2rem !important;
}

body:has(.traverse-unit-page) .traverse-page-main {
  background: #fff !important;
}

.traverse-unit-page nav[aria-label="Breadcrumb"] {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
}

/* --------------------------------------------- booking sidebar (redesign) */

/* The sidebar declares its palette as `--tv-*` custom properties, so Rio
 * retunes it by setting variables instead of overriding rules. This is the
 * preferred integration point: the variables are stable across redesigns, the
 * class names and DOM are not. See the app's global.css. */
.traverse-booking-sidebar {
  background: #fff !important;
  border: 1px solid rgba(40, 64, 127, 0.15) !important;
  box-shadow: none !important;
}

/* Headings in the sidebar are display type, like every other h2 on the site. */
.traverse-rate-list h2 {
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Selects inside the search panel keep Rio's chevron but drop the header
 * search bar's padding, which is wrong for a two-column field grid. The ids
 * are repeated to outrank the `#adults, #kids` rules above. */
.traverse-booking-guests select#adults,
.traverse-booking-guests select#kids {
  background-color: #fff !important;
  border: 1.5px solid rgba(40, 64, 127, 0.2) !important;
  box-shadow: none !important;
  color: var(--rio-dusk) !important;
  font-size: 1rem !important;
  padding: 0.625rem 2rem 0.625rem 0.75rem !important;
}

/* Rio does not issue promo codes. The field is collapsed to a text link by
 * default; this removes it outright. */
.traverse-promo-code {
  display: none !important;
}

/* Fixed mobile booking bar. */
.traverse-book-bar {
  background: #fff !important;
  border-top: 1px solid rgba(40, 64, 127, 0.15) !important;
}

/* ------------------------------------------------------- more options band */

body:has(.traverse-unit-page) section:has(#related-products-heading) {
  background: var(--rio-sand) !important;
}

body:has(.traverse-unit-page)
  section:has(#related-products-heading)
  .group.relative {
  background: #fff !important;
}

body:has(.traverse-unit-page)
  section:has(#related-products-heading)
  .group.relative
  > .mt-4.flex.justify-between {
  margin-top: 0 !important;
  padding: 1rem !important;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 640px) {
  #header-datepicker {
    align-items: center !important;
    height: auto !important;
    min-height: 2.75rem !important;
    padding: 0.625rem 0.75rem !important;
  }
}

/* --------------------------------------------------------------- the banner */

.traverse-banner__logo {
  height: 3.5rem !important;
}

.traverse-banner__heading > p {
  font-size: 1rem;
}

Apple Pay domain association: Configured

Set or replace Apple Pay domain association

Paste the complete file downloaded from Apple for this exact property domain. Leave blank to keep the current configuration.

Booking engine deployment *

Changes only this exact property domain.

Wallet payments

Enable Apple PayEnable Google Pay

Wallet merchant display name

Eligible hotel provider codes

Address

Address Line 1 *

City *

State *

Postal Code *

Country Code *

Latitude *

Longitude *

Amenities

Images

Hero Image

URL *

Alt *

Images

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *

URL *

Alt *