as display:flex / justify-content:left; each of ours * resets to block, the way the geo section had to. * * Fonts and colours are the theme's own: Type1 for body, Type2 for titles, * navy #011c4d, red #f32735, light #f2f2f2. Nothing is loaded from outside. */ .uae-wrap { display: block; width: 100%; } .uae { position: relative; display: block !important; width: 100%; box-sizing: border-box; overflow: hidden; font-family: "Type1", system-ui, sans-serif; color: #011c4d; background: transparent; } .uae *, .uae *::before, .uae *::after { box-sizing: border-box; } /* the theme gives every

a fixed 100vh height; the two flowing sections carry more than a screen of cards and must grow with them */ .uae-dusk, .uae-night { height: auto !important; min-height: 100vh; } /* road cards ride a 60vh track next to the car: keep them short */ .uae-road .uae-card__itin, .uae-road .uae-card__hl li:nth-child(n+4) { display: none; } .uae-road .uae-card__body { padding: 14px 16px 16px; gap: 6px; } .uae__inner { position: relative; z-index: 2; width: min(1400px, 92vw); margin: 0 auto; padding: 12vh 0 10vh; } .uae__head { position: relative; z-index: 2; max-width: 900px; margin-bottom: 5vh; } /* the theme styles every

as the site header (fixed 5vw height, 100vw wide) and pads every h2; ours are plain heading blocks */ .uae-wrap header.uae__head { height: auto !important; min-height: 0 !important; width: auto; padding: 0; background: none; box-shadow: none; border: 0; display: block; overflow: visible; transform: none; line-height: inherit; } .uae__eyebrow { margin: 0 0 14px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #011c4d; } /* red was 1.19:1 on the sky, 4.08 even on white */ .uae__title { margin: 0 0 18px; padding: 0; font-family: "Type2", "Type1", system-ui, sans-serif; font-weight: 300; font-size: clamp(38px, 5.4vw, 84px); line-height: 1.02; letter-spacing: -.01em; } .uae__sub { margin: 0; max-width: 620px; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.55; opacity: .82; } /* clip-path text reveal: the inner span rises out of an overflow-hidden outer */ .uae-reveal { display: block; overflow: hidden; } .uae-reveal > span { display: inline-block; transform: translateY(110%); } .uae.is-in .uae-reveal > span { transform: translateY(0); transition: transform 1.1s cubic-bezier(.19, 1, .22, 1); } /* ---- the sky: colour BEHIND the canvas --------------------------------------- #canvas is position:fixed with z-index auto, appended last to ; the .scroller sits above it at z 99999. A fixed layer inserted as body's FIRST child paints under the canvas, so the car drives over dusk and night instead of being hidden by them. uae.js inserts it and scrubs the two opacities. */ .uae-sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .uae-sky > div { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .uae-sky__dusk { background: linear-gradient(180deg, #05173a 0%, #2b1d3f 40%, #b8651f 78%, #e8a44a 100%); } .uae-sky__night { background: radial-gradient(120% 80% at 50% 100%, #12203f 0%, #050a18 60%, #02050e 100%); } /* ---- buttons & chips ------------------------------------------------------ */ .uae-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 1px solid #011c4d; color: #011c4d; background: transparent; font: inherit; font-size: 14px; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .35s, color .35s, transform .35s; } .uae-btn:hover { background: #011c4d; color: #fff; transform: translateY(-2px); } .uae-btn--sm { padding: 9px 16px; font-size: 12px; border-color: #c50f1f; color: #c50f1f; } /* 6.07:1 on white */ .uae-btn--sm:hover { background: #c50f1f; color: #fff; } .uae-btn--light { border-color: #fff; color: #fff; } .uae-btn--light:hover { background: #fff; color: #011c4d; } .uae-chip { position: absolute; top: 14px; inset-inline-start: 14px; padding: 6px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(1, 28, 77, .86); } /* opaque enough for AA over any photo */ .uae-card--desert .uae-chip { background: rgba(96, 48, 12, .88); } .uae-card--sea .uae-chip { background: rgba(3, 34, 74, .88); } .uae-card--ziyarat .uae-chip { background: rgba(5, 40, 49, .88); } /* ---- card ------------------------------------------------------------------ */ .uae-card { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; color: #011c4d; box-shadow: 0 10px 30px rgba(1, 28, 77, .08); transform-style: preserve-3d; will-change: transform; transition: box-shadow .4s, transform .4s cubic-bezier(.2, .8, .2, 1); } .uae-card:hover { box-shadow: 0 24px 60px rgba(1, 28, 77, .18); } .uae-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #011c4d; } .uae-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s cubic-bezier(.2, .8, .2, 1); } .uae-card:hover .uae-card__media img { transform: scale(1.08); } .uae-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; } .uae-card__place { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .78; } .uae-card__name { margin: 0; width: auto; max-width: none; color: #d81324; /* 5.2:1 on white (brand red was 4.08) */ font-family: "Type2", "Type1", system-ui, sans-serif; font-weight: 400; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.15; } .uae-card__hl { margin: 4px 0 6px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.4; opacity: .8; } .uae-card__hl li { position: relative; padding-inline-start: 16px; } .uae-card__hl li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #f32735; } .uae-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(1, 28, 77, .12); } .uae-card__meta { flex: 1 1 100%; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; } .uae-card__price { margin-inline-start: auto; font-family: "Type2", "Type1", system-ui, sans-serif; font-size: 19px; white-space: nowrap; } .uae-card__price small { font-family: "Type1", system-ui, sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-inline-end: 4px; } /* badge (Popular / New), stats row, itinerary line, keyboard focus */ .uae-badge { position: absolute; top: 14px; inset-inline-end: 14px; padding: 6px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #c50f1f; } /* 6.07:1 */ .uae-badge--new { background: #011c4d; } .uae-card__stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12px; letter-spacing: .04em; opacity: .75; } .uae-card__star { color: #8a6a12; font-weight: 600; } /* 5.06:1 on white (gold was 2.25) */ .uae-card__itin { margin: 2px 0 4px; padding: 10px 12px; border-radius: 12px; background: rgba(1, 28, 77, .05); font-size: 12.5px; line-height: 1.45; opacity: .85; } .uae-card__itin b { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; } .uae-card:focus-visible, .uae-btn:focus-visible, .uae-deck__btn:focus-visible, .uae-deck__dots button:focus-visible { outline: 3px solid #f32735; outline-offset: 3px; } .uae-deck:focus-visible { outline: none; } /* while the car passes over a section on its way somewhere else, its cards step back */ .uae-card.is-passing { opacity: .38; filter: blur(2px); transition: opacity .5s, filter .5s; } .uae-card__price { transition: transform .25s; } /* dark variant: glass on a dark section */ .uae--dark .uae-card { background: rgba(8, 14, 32, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); } .uae--dark .uae-card__foot { border-top-color: rgba(255, 255, 255, .14); } .uae--dark .uae-card__hl li::before { background: #f3d9a4; } /* on the dark cards the lighter brand colours are the readable ones (4.6-8.4:1) */ .uae--dark .uae-card__name, .uae-night .uae-card__name { color: #f32735; } .uae--dark .uae-card__star, .uae-night .uae-card__star { color: #d4a63a; } .uae--dark .uae-btn--sm { border-color: rgba(255, 255, 255, .6); color: #fff; } .uae--dark .uae-btn--sm:hover { background: #fff; color: #011c4d; } .uae--dark .uae__title, .uae--dark .uae__sub { color: #fff; } .uae--dark .uae__eyebrow { color: #f3d9a4; } /* 3D tilt (JS sets --rx/--ry on pointer move) */ .uae-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); } .uae-tilt:hover { transition: box-shadow .4s; } /* ============================================================================= Concept 1 · #uae-road — pinned horizontal journey ========================================================================== */ .uae-road { min-height: 100vh; } .uae-road__pin { position: relative; height: 100vh; width: 100%; overflow: hidden; overflow: clip; } .uae-road__dusk { display: none; } .uae-road .uae__head, .uae-deck .uae__head, .uae-dusk .uae__head, .uae-night .uae__head { isolation: isolate; } .uae-road .uae__head::before, .uae-deck .uae__head::before, .uae-dusk .uae__head::before, .uae-night .uae__head::before { content: ""; position: absolute; z-index: -1; inset: -3vh -6vw -4vh -6vw; background: radial-gradient(120% 100% at 0% 40%, rgba(4, 10, 26, .64), rgba(4, 10, 26, .34) 55%, rgba(4, 10, 26, 0) 80%); pointer-events: none; } [dir="rtl"] .uae-road .uae__head::before, [dir="rtl"] .uae-deck .uae__head::before, [dir="rtl"] .uae-dusk .uae__head::before, [dir="rtl"] .uae-night .uae__head::before { background: radial-gradient(120% 100% at 100% 40%, rgba(4, 10, 26, .64), rgba(4, 10, 26, .34) 55%, rgba(4, 10, 26, 0) 80%); } /* the road head starts on the pale page: no scrim until the sky turns */ .uae-road:not(.is-dusk) .uae__head::before { opacity: 0; } .uae-road .uae__head::before { transition: opacity .6s; } .uae-road .uae__head { position: absolute; z-index: 3; top: 10vh; inset-inline-start: 6vw; max-width: 720px; } .uae-road.is-dusk .uae__title, .uae-road.is-dusk .uae__sub { color: #fff; transition: color .6s; } .uae-road.is-dusk .uae__eyebrow { color: #f3d9a4; } .uae-road__hint { position: absolute; z-index: 3; bottom: 6vh; inset-inline-start: 6vw; margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; } .uae-road__arrow { display: inline-block; animation: uae-nudge 1.6s ease-in-out infinite; } [dir="rtl"] .uae-road__arrow { animation-name: uae-nudge-rtl; } @keyframes uae-nudge-rtl { 0%, 100% { transform: scaleX(-1) translateX(0) } 50% { transform: scaleX(-1) translateX(8px) } } [dir="rtl"] .uae-road__route { transform: scaleX(-1); } .uae-road.is-dusk .uae-road__cta { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(4, 10, 26, .72); } /* outline-only was 2.2:1 on the dusk sky */ .uae-road.is-dusk .uae-road__cta:hover { background: #011c4d; border-color: #fff; } @keyframes uae-nudge { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(8px) } } .uae-road__cta { position: absolute; z-index: 3; bottom: 3vh; inset-inline-end: 6vw; } .uae-road__km { position: absolute; z-index: 3; top: 10vh; inset-inline-end: 6vw; margin: 0; text-align: end; } .uae-road__km { contain: layout style; } /* the counter rewrites its text on every scroll tick: keep that inside its own box */ .uae-road__km b { display: block; min-width: 4ch; font-family: "Type2", "Type1", system-ui, sans-serif; font-weight: 300; font-size: clamp(40px, 5vw, 76px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .uae-road__km span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; } .uae-road.is-dusk .uae-road__km { color: #fff; } .uae-road.is-stopped .uae-road__hint { opacity: 1; } .uae-road__track { position: absolute; z-index: 2; top: 32vh; inset-inline-start: 0; height: 60vh; width: calc(100vw + var(--track-extra, 2400px)); will-change: transform; } .uae-road__route { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .uae-road__path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; } .uae-road__path--ghost { stroke: rgba(1, 28, 77, .14); stroke-dasharray: 6 10; } .uae-road__path--live { stroke: #f32735; } .uae-road.is-dusk .uae-road__path--ghost { stroke: rgba(255, 255, 255, .25); } .uae-road.is-dusk .uae-road__path--live { stroke: #f3d9a4; } .uae-road__stop { position: absolute; top: 0; width: 320px; inset-inline-start: calc(6vw + var(--i) * (100vw + var(--track-extra, 2400px) - 12vw - 320px) / 3); } .uae-road__stop:nth-child(odd) { top: 0; } .uae-road__stop:nth-child(even) { top: 8vh; } .uae-road__marker { position: absolute; top: -34px; inset-inline-start: 0; width: 28px; height: 28px; border-radius: 50%; background: #f32735; color: #fff; display: grid; place-items: center; font-size: 12px; box-shadow: 0 0 0 0 rgba(243, 39, 53, .5); animation: uae-pulse 2.2s ease-out infinite; } @keyframes uae-pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 39, 53, .45) } 100% { box-shadow: 0 0 0 18px rgba(243, 39, 53, 0) } } .uae-road__stopname { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; } .uae-road.is-dusk .uae-road__stopname { color: #fff; } .uae-road__stop .uae-card { opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .8s cubic-bezier(.19, 1, .22, 1); } .uae-road__stop.is-on .uae-card { opacity: 1; transform: translateY(0); } .uae-road__stop.is-on .uae-card.uae-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0); } .uae-road__stop .uae-card__media { aspect-ratio: 16 / 9; } /* ============================================================================= Concept 2 · #uae-deck — pinned deck around the car ========================================================================== */ .uae-deck { min-height: 100vh; } .uae-deck__pin { position: relative; height: 100vh; width: 100%; overflow: hidden; overflow: clip; } .uae-deck__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .uae-deck__blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; } .uae-deck__blob--a { width: 46vw; height: 46vw; inset-inline-start: -10vw; top: -14vw; background: #dfe8ff; } .uae-deck__blob--b { width: 38vw; height: 38vw; inset-inline-end: -8vw; bottom: -12vw; background: #ffd9dc; } .uae-deck .uae__head { position: absolute; z-index: 3; top: 8vh; inset-inline-start: 6vw; max-width: 640px; } .uae-deck .uae__title, .uae-deck .uae__sub { color: #fff; } .uae-deck .uae__sub { max-width: 360px; } .uae-deck .uae__eyebrow { color: #f3d9a4; } .uae-deck__stage { position: absolute; z-index: 2; inset: 0; perspective: 1800px; perspective-origin: 50% 40%; } .uae-deck__drag { position: absolute; z-index: 4; inset-inline-start: 6vw; bottom: 6vh; padding: 10px 18px; border-radius: 999px; touch-action: none; border: 1px dashed rgba(255, 255, 255, .55); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #fff; opacity: .8; cursor: grab; user-select: none; } .uae-deck__drag.is-grabbing { cursor: grabbing; opacity: 1; } .uae-deck__hit { position: absolute; z-index: 1; left: 20%; right: 20%; top: 30%; bottom: 20%; cursor: grab; touch-action: none; } .uae-deck__ring { position: absolute; z-index: 2; left: 66%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(calc(-1 * var(--radius, 760px))) rotateY(var(--deck, 0deg)); will-change: transform; } .uae-deck__slot { position: absolute; left: -160px; top: -230px; width: 320px; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * (360deg / var(--n)))) translateZ(var(--radius, 900px)); } .uae-deck__slot .uae-card { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .5s, box-shadow .4s; opacity: 0; transform: scale(.82); pointer-events: none; backface-visibility: hidden; } .uae-deck .uae-card__hl li:nth-child(n+5) { display: none; } .uae-deck__slot.is-near .uae-card { opacity: .78; transform: scale(.9); pointer-events: auto; } .uae-deck__slot.is-front .uae-card { opacity: 1; transform: scale(1.14); box-shadow: 0 30px 80px rgba(1, 28, 77, .22); pointer-events: auto; } .uae-deck__slot.is-front.is-pulse .uae-card { animation: uae-pulse-card .5s cubic-bezier(.2, .8, .2, 1); } @keyframes uae-pulse-card { 0% { transform: scale(1.06) } 60% { transform: scale(1.17) } 100% { transform: scale(1.14) } } .uae-deck__slot:not(.is-front) .uae-card__hl, .uae-deck__slot:not(.is-front) .uae-card__foot, .uae-deck__slot:not(.is-front) .uae-card__itin, .uae-deck__slot:not(.is-front) .uae-card__stats { display: none; } .uae-deck .uae-card { backdrop-filter: none; } .uae-deck__slot .uae-card__media { aspect-ratio: 16 / 10; } .uae-deck__nav { position: absolute; z-index: 4; inset-inline-end: 2vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; } .uae-deck__btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .85); color: #011c4d; font: inherit; font-size: 15px; cursor: pointer; transition: background .3s, transform .3s; } .uae-deck__btn:hover { background: #011c4d; color: #fff; transform: scale(1.06); } .uae-deck__dots { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .uae-deck__dots button { display: block; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .38); cursor: pointer; transition: background .3s, transform .3s; position: relative; } .uae-deck__dots button.is-on { background: #f32735; transform: scale(1.4); } .uae-deck__dots button.is-ping::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #f32735; animation: uae-ping .6s ease-out forwards; } @keyframes uae-ping { from { transform: scale(1); opacity: .9 } to { transform: scale(2.6); opacity: 0 } } /* ============================================================================= Concept 3A · #uae-dusk — ziyarat tours, page fades to desert dusk ========================================================================== */ .uae-dusk { min-height: 100vh; } .uae-dusk__veil { display: none; } .uae-dusk__sun { position: absolute; z-index: 1; inset-inline-end: 12vw; top: 18vh; width: 22vw; height: 22vw; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, #ffd58a 0%, #f39a3c 45%, rgba(243, 154, 60, 0) 72%); filter: blur(4px); } .uae-dusk.is-dusk .uae__title, .uae-dusk.is-dusk .uae__sub, .uae-dusk.is-dusk .uae-btn:not(.uae-btn--sm) { color: #fff; border-color: #fff; transition: color .6s, border-color .6s; } .uae-dusk.is-dusk .uae__eyebrow { color: #f3d9a4; } .uae-dusk__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0 0 6vh; } .uae-dusk .uae-card { opacity: 0; transform: translateY(40px); } .uae-dusk.is-in .uae-card { opacity: 1; transform: translateY(0); transition: opacity .7s, transform .9s cubic-bezier(.19, 1, .22, 1); } .uae-dusk.is-in .uae-card.uae-magnet { transform: translate(var(--mx, 0px), var(--my, 0px)); } .uae-dusk.is-in .uae-card:nth-child(2) { transition-delay: .08s } .uae-dusk.is-in .uae-card:nth-child(3) { transition-delay: .16s } .uae-dusk.is-in .uae-card:nth-child(4) { transition-delay: .24s } .uae-magnet { transform: translate(var(--mx, 0px), var(--my, 0px)); } .uae-dusk.is-dusk .uae-card { background: #fff; } /* ============================================================================= Concept 3B · #uae-night — bento, headlights, cursor spotlight ========================================================================== */ .uae-night { min-height: 100vh; color: #fff; } .uae-night__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7; background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 62%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 74%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 52%, #fff 50%, transparent 51%); } .uae-night__spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 220, 160, .22), rgba(255, 220, 160, .06) 40%, transparent 70%); } .uae-night.is-hover .uae-night__spot { opacity: 1; } .uae-night .uae__title, .uae-night .uae__sub { color: #fff; } .uae-night .uae__eyebrow { color: #f3d9a4; } .uae-night__lights { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin: -2vh 0 4vh; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; transition: opacity .5s; } .uae-night__lights i { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .25; box-shadow: 0 0 0 0 rgba(255, 230, 170, 0); transition: opacity .5s, box-shadow .8s; } .uae-night.is-lit .uae-night__lights { opacity: 1; } .uae-night.is-lit .uae-night__lights i { opacity: 1; box-shadow: 0 0 24px 6px rgba(255, 230, 170, .55); } .uae-night__bento { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(240px, auto); gap: 18px; margin-bottom: 6vh; } /* no backdrop-filter over the live WebGL canvas: measured ~5 ms/frame on an iGPU for the six night cards; a slightly denser background reads the same */ .uae-night .uae-card { background: rgba(8, 14, 32, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); } .uae-night .uae-card__body { flex: 1; } .uae-night .uae-card__foot { border-top-color: rgba(255, 255, 255, .14); } .uae-night .uae-card__hl li::before { background: #f3d9a4; } .uae-night .uae-card__itin { background: rgba(255, 255, 255, .08); } .uae-night .uae-btn--sm { border-color: rgba(255, 255, 255, .6); color: #fff; } .uae-night .uae-btn--sm:hover { background: #fff; color: #011c4d; } .uae-night .uae-card.is-wide { grid-column: span 2; } .uae-night .uae-card.is-tall { grid-row: span 2; } .uae-night .uae-card.is-tall .uae-card__media { aspect-ratio: auto; flex: 1; min-height: 240px; } .uae-zoom .uae-card__media img { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), filter .6s; filter: saturate(.85) brightness(.9); } .uae-zoom:hover .uae-card__media img { transform: scale(1.1); filter: saturate(1.05) brightness(1); } .uae-ticker { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #f3d9a4; } .uae-ticker__row { display: flex; gap: 60px; width: max-content; animation: uae-ticker 38s linear infinite; } .uae-ticker__row span { white-space: nowrap; } @keyframes uae-ticker { from { transform: translateX(0) } to { transform: translateX(-33.333%) } } [dir="rtl"] .uae-ticker__row { animation-direction: reverse; } [dir="rtl"] .uae-deck__ring { left: 34%; } /* ============================================================================= Mobile ≤ 1024: no pins, no 3D deck — stacks, the same content ========================================================================== */ @media (max-width: 1024px) { .uae__inner { width: 92vw; padding: 10vh 0 8vh; } .uae__title { font-size: clamp(34px, 9vw, 52px); } .uae-road { min-height: 0; height: auto !important; } .uae-road__pin { height: auto; padding: 10vh 0 8vh; } .uae-road .uae__head { position: relative; top: auto; inset-inline-start: auto; margin: 0 4vw 5vh; } .uae-road__hint, .uae-road__route { display: none; } .uae-road__track { position: relative; top: auto; height: auto; width: 100%; display: flex; flex-direction: column; gap: 26px; padding: 0 4vw; transform: none !important; } .uae-road__stop { position: relative; inset-inline-start: auto !important; top: auto !important; width: 100%; padding-top: 44px; } .uae-road__stop .uae-card { opacity: 1; transform: none; } .uae-road__cta { position: relative; bottom: auto; inset-inline-end: auto; margin: 5vh 4vw 0; } .uae-deck { min-height: 0; height: auto !important; } .uae-deck__pin { height: auto; padding: 10vh 0 8vh; } .uae-deck .uae__head { position: relative; top: auto; inset-inline-start: auto; margin: 0 4vw 4vh; } .uae-deck__stage { position: relative; inset: auto; perspective: none; } .uae-deck__drag, .uae-deck__hit, .uae-deck__nav { display: none; } /* two 70 px blurs of 46vw circles cost more than they show on a phone */ .uae-deck__bg { display: none; } /* off-screen cards in the stacked lists are not rendered until they approach */ /* not on .uae-road__stop: the road's height feeds the km scrub, and a placeholder size that changes as cards render would leave the trigger positions stale */ .uae-deck__slot, .uae-dusk__grid > .uae-card, .uae-night__bento > .uae-card { content-visibility: auto; contain-intrinsic-size: auto 620px; } .uae-deck__ring, [dir="rtl"] .uae-deck__ring { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none !important; display: flex; flex-direction: column; gap: 22px; padding: 0 4vw; } .uae-deck__slot { position: relative; left: auto; top: auto; width: 100%; transform: none !important; } .uae-deck__slot .uae-card, .uae-deck__slot.is-near .uae-card, .uae-deck__slot.is-front .uae-card { opacity: 1; transform: none; pointer-events: auto; animation: none; } .uae-deck__slot:not(.is-front) .uae-card__hl, .uae-deck__slot:not(.is-front) .uae-card__foot, .uae-deck__slot:not(.is-front) .uae-card__itin, .uae-deck__slot:not(.is-front) .uae-card__stats { display: flex; } .uae-road__km { position: relative; top: auto; inset-inline-end: auto; text-align: start; margin: 0 4vw 7vh; } .uae-deck .uae__sub { display: none; } .uae-btn--sm { min-height: 44px; padding: 12px 20px; } .uae-deck__btn { width: 44px; height: 44px; } .uae-card__hl { font-size: 14px; } .uae-dusk__grid { grid-template-columns: 1fr; gap: 18px; } .uae-dusk__sun { width: 46vw; height: 46vw; inset-inline-end: -28vw; top: 18vh; } .uae-night__bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .uae-night .uae-card.is-wide, .uae-night .uae-card.is-tall { grid-column: auto; grid-row: auto; } .uae-night__spot { display: none; } } @media (max-width: 1280px) and (min-width: 1025px) { .uae-dusk__grid { grid-template-columns: repeat(2, 1fr); } .uae-night__bento { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { .uae-road, .uae-deck { min-height: 0; height: auto !important; } .uae-road__pin, .uae-deck__pin { height: auto; padding: 10vh 0 8vh; overflow: visible; } .uae-road .uae__head, .uae-deck .uae__head { position: relative; top: auto; inset-inline-start: auto; margin: 0 4vw 5vh; } .uae-road__hint, .uae-road__route, .uae-deck__drag, .uae-deck__hit, .uae-deck__nav, .uae-deck__dots { display: none; } .uae-road__track { position: relative; top: auto; height: auto; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; padding: 0 4vw; transform: none !important; } .uae-road__stop { position: relative; inset-inline-start: auto !important; top: auto !important; width: 100%; padding-top: 34px; } .uae-road__stop .uae-card { opacity: 1; transform: none; } .uae-road__cta { position: relative; bottom: auto; inset-inline-end: auto; margin: 5vh 4vw 0; } .uae-road__km { position: relative; top: auto; inset-inline-end: auto; text-align: start; margin: 0 4vw 3vh; } .uae-deck__stage { position: relative; inset: auto; perspective: none; } .uae-deck__ring, [dir="rtl"] .uae-deck__ring { position: relative; left: auto; top: auto; width: auto; height: auto; transform: none !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; padding: 0 4vw; } .uae-deck__slot { position: relative; left: auto; top: auto; width: 100%; transform: none !important; } .uae-deck__slot .uae-card, .uae-deck__slot.is-near .uae-card, .uae-deck__slot.is-front .uae-card { opacity: 1; transform: none; pointer-events: auto; animation: none; } .uae-road__arrow, .uae-road__marker, .uae-ticker__row, .uae-deck__dots button.is-ping::after, .uae-deck__slot.is-front.is-pulse .uae-card { animation: none; } .uae-reveal > span, .uae-dusk .uae-card, .uae-road__stop .uae-card { transform: none; opacity: 1; transition: none; } .uae-card, .uae-card__media img, .uae-magnet, .uae-tilt { transition: none; transform: none; } }