/* ========================================================================== Vuelto: the premium direction (docs/research/brand/premium-concept.md) "A ticket office at dusk, run by someone on your side." Loaded after styles.css and overrides it. Delete this file (and its ) to go back to the previous look. Two modes on one palette: Papel (day, default) and Madrugada (night), set on by app.js from Buenos Aires time or your choice. ========================================================================== */ :root{ /* Papel */ --v-paper:#FBF6EA; --v-ticket:#FFFDF6; --v-ink:#1A1633; --v-ink-soft:#5E5873; --v-indigo:#2B1A6B; --v-violet:#4B3CFF; --v-violet-ink:#FFFFFF; /* text on violet */ --v-vuelto:#D4FF3A; /* money you keep, and nothing else */ --v-alarm:#C92A33; /* emphasis only: price drops, errors (5.3:1 on ticket) */ --v-line:#E6DFCC; --v-dusk-1:#F6C9A8; --v-dusk-2:#C9B8F2; --v-dusk-3:#8FB8F0; --v-shadow:0 1px 1px rgb(26 22 51 / .06), 0 12px 24px -8px rgb(26 22 51 / .18); --v-shadow-lift:0 2px 2px rgb(26 22 51 / .06), 0 20px 32px -10px rgb(26 22 51 / .26); --ease-paper:cubic-bezier(.2,.8,.2,1); --ease-stamp:cubic-bezier(.3,1.4,.5,1); --dur-quick:160ms; --dur-base:280ms; --dur-slow:450ms; /* Typography */ --display:'Fraunces', Georgia, serif; --body:'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Old tokens, remapped so the older rules follow the new palette */ --ink:var(--v-ink); --paper:#FBF6EA; /* light text on the indigo band */ --surface:var(--v-ticket); --surface-2:color-mix(in srgb, var(--v-ticket), var(--v-ink) 6%); --surface-hi:color-mix(in srgb, var(--v-ticket), var(--v-violet) 4%); --line:var(--v-line); --text:var(--v-ink); --text-dim:var(--v-ink-soft); --muted:var(--v-ink-soft); --ink-2:color-mix(in srgb, var(--v-paper), var(--v-ink) 4%); --ink-3:var(--v-line); --hot:var(--v-alarm); --border:1px solid var(--v-line); --radius:14px; color-scheme:light; } /* Madrugada: night mode (and the default after 21:00 in Buenos Aires) */ html[data-mode="madrugada"]{ --v-paper:#141026; --v-ticket:#1D1836; --v-ink:#EFE9DA; --v-ink-soft:#A69FBD; --v-indigo:#1B1147; --v-violet:#7D70FF; --v-violet-ink:#0E0B1E; --v-vuelto:#C8F03A; --v-alarm:#FF6369; --v-line:#2E2748; --v-shadow:0 1px 1px rgb(0 0 0 / .3), 0 14px 28px -10px rgb(0 0 0 / .6); --v-shadow-lift:0 2px 2px rgb(0 0 0 / .3), 0 22px 36px -12px rgb(0 0 0 / .7); color-scheme:dark; } /* ---------- Page ---------- */ body{background:var(--v-paper); color:var(--v-ink); font-family:var(--body)} body::before{display:none} /* the party glow; the sky band does atmosphere now */ body::after{opacity:.025} /* paper fibre, felt more than seen */ ::selection{background:var(--v-vuelto); color:#1A1633} /* ---------- Header: indigo band (after Despegar) ---------- */ .site-header{ background:var(--v-indigo); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:0 1px 0 rgb(255 255 255 / .06); } .site-header::after{display:none} .brand{ font-family:var(--display); font-weight:600; font-size:26px; letter-spacing:-.01em; text-transform:none; font-variation-settings:"opsz" 72, "SOFT" 100; } .brand span, .brand span:nth-child(n){color:#FBF6EA !important; animation:none !important; -webkit-text-stroke:0} /* The perforation between "Untethered" and "Travel": the mark is the tear */ .brand .brand-gap{ width:.55em; height:.8em; vertical-align:-.08em; background:linear-gradient(to bottom, rgb(251 246 234 / .55) 50%, transparent 0) center / 1.5px 5px repeat-y; } /* The stamp logo: the whole roundel in cream ink on the indigo band, no zoom */ .logo-frame, .logo-link:hover .logo-frame{ width:58px; height:58px; background:transparent; border:0; box-shadow:none; border-radius:50%; transition:transform .22s var(--ease-stamp); } .logo-link:hover .logo-frame{transform:rotate(-6deg)} .splash .splash-logo{transform:none; border:0; box-shadow:none; background:transparent} .header-menu a, .header-menu li:nth-child(even) a{ color:rgb(251 246 234 / .82); font-family:var(--body); font-weight:600; font-size:14px; text-transform:none; letter-spacing:0; border:0; background:none; padding:8px 10px; box-shadow:none; } .header-menu a:hover, .header-menu li:nth-child(even) a:hover{color:#FBF6EA; background:rgb(255 255 255 / .08); transform:none; box-shadow:none} #search{ background-color:rgb(255 255 255 / .1); color:#FBF6EA; border:1px solid rgb(255 255 255 / .18); border-radius:999px; box-shadow:none; font-family:var(--body); font-size:14px; padding:10px 16px 10px 40px; align-self:center; text-overflow:ellipsis; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23FBF6EA' stroke-opacity='.7' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5'/%3E%3Cpath d='M11.5 11.5l4.5 4.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:15px center; } #search::placeholder{color:rgb(251 246 234 / .6)} #search:focus{background:rgb(255 255 255 / .16); box-shadow:0 0 0 2px var(--v-violet); border-color:transparent} .mode-switch{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid rgb(255 255 255 / .2); background:transparent; color:#FBF6EA; font-size:16px; cursor:pointer; } .mode-switch:hover{background:rgb(255 255 255 / .1)} /* ---------- The sky band (after Hopper): follows Buenos Aires time ---------- */ .sky-band{ position:relative; overflow:hidden; text-align:center; padding:18px 20px 22px; color:#FBF6EA; background:linear-gradient(180deg, var(--v-indigo) 0%, var(--sky-mid, #4A2F8F) 55%, var(--sky-low, #C98BA0) 100%); background-size:100% 160%; animation:v-sky 60s ease-in-out infinite alternate; } html[data-sky="dawn"] .sky-band{--sky-mid:#5A4AA8; --sky-low:#F6C9A8} html[data-sky="day"] .sky-band{--sky-mid:#4E5FC4; --sky-low:#8FB8F0} html[data-sky="dusk"] .sky-band{--sky-mid:#5B3592; --sky-low:#E3A08C} html[data-sky="night"] .sky-band{--sky-mid:#20185A; --sky-low:#2E2F6E} @keyframes v-sky{from{background-position:0 0} to{background-position:0 100%}} .sky-band .tagline{ margin:0 auto; text-transform:none; letter-spacing:-.005em; font-family:var(--display); font-weight:600; font-style:italic; font-size:clamp(18px, 2.4vw, 26px); } .hero-line{ margin:0; font-family:var(--display); font-weight:400; line-height:1.05; letter-spacing:-.02em; font-size:clamp(30px, 5vw, 60px); font-variation-settings:"opsz" 144, "SOFT" 50; color:#FBF6EA; text-wrap:balance; } .hero-line em{font-style:italic} .hero-line b{font-weight:600; color:var(--v-dusk-1)} .hero-line:empty{display:none} /* ---------- Tabs, search bar, buttons ---------- */ .mode-tabs{background:var(--surface-2); border:var(--border)} .mode-tab{font-family:var(--body); font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; color:var(--v-ink-soft)} .mode-tab.is-active{background:var(--v-ticket); color:var(--v-ink); box-shadow:var(--v-shadow)} .journey-count{background:var(--v-violet); color:var(--v-violet-ink)} .run-bar{background:var(--v-ticket); border:var(--border); box-shadow:var(--v-shadow); border-radius:var(--radius)} .run-bar.is-journey{border-color:var(--v-violet); box-shadow:inset 4px 0 0 var(--v-violet), var(--v-shadow)} .run-bar.is-journey .journey-flag{background:var(--v-violet); color:var(--v-violet-ink); font-family:var(--mono)} .run-title{font-family:var(--display); font-weight:600; font-size:22px; text-transform:none; letter-spacing:-.01em; color:var(--v-ink)} .run-status, .apify-credit{color:var(--v-ink-soft)} .apify-credit.is-out{background:var(--v-alarm); color:#fff} .explore-dates label{font-family:var(--mono); font-weight:500; letter-spacing:.08em} .explore-dates select, .explore-dates input{background:var(--v-paper); color:var(--v-ink); border:var(--border); font-family:var(--body); color-scheme:inherit} .explore-dates input:focus, .explore-dates select:focus{outline:2px solid var(--v-violet)} /* One action colour: violet */ .run-button{ background:var(--v-violet); color:var(--v-violet-ink); border:0; border-radius:999px; font-family:var(--body); font-weight:600; font-size:14px; text-transform:none; letter-spacing:0; box-shadow:none; padding:10px 18px; } .run-button:hover:not(:disabled){transform:none; box-shadow:none; filter:brightness(1.08)} .run-button:disabled{background:var(--surface-2); color:var(--v-ink-soft); animation:none} .map-toggle, .toggle, .chip{ background:transparent; color:var(--v-ink); border:var(--border); border-radius:999px; font-family:var(--body); font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; box-shadow:none; transform:none; } .map-toggle:hover, .toggle:hover, .chip:hover{background:var(--surface-2); transform:none; box-shadow:none} .chip.is-active, .toggle[aria-pressed="true"]{background:var(--v-violet); color:var(--v-violet-ink); border-color:var(--v-violet)} .toggle[aria-disabled="true"]:hover{background:transparent} .pill-select, .pill-select--acid{ background-color:var(--v-ticket); color:var(--v-ink); border:var(--border); font-family:var(--body); font-weight:600; font-size:13px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235E5873' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } #maxPriceLabel{background:none; color:var(--v-ink); border:0; box-shadow:none; font-family:var(--mono); font-weight:500; font-size:13px; padding:0; transform:none} #maxPrice{accent-color:var(--v-violet)} /* ---------- The departure board (the filter summary), with sort docked on the right ---------- */ .filter-summary-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:4px 0 0; padding:9px 14px; border:0; border-radius:8px; background:var(--v-indigo); } .filter-summary{ flex:1 1 auto; min-width:0; margin:0; padding:0; border:0; background:none; color:#F3E9C8; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; line-height:1.6; } .filter-summary-bar .sort-bar{margin:0; flex:none} .filter-summary-bar .sort-label{color:#F3E9C8; opacity:.8} .pill-select--indigo{ background-color:rgb(255 255 255 / .08); color:#F3E9C8; border:1px solid rgb(255 255 255 / .25); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F3E9C8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); } .pill-select--indigo:hover{background-color:rgb(255 255 255 / .14)} .flip-ch{display:inline-block; white-space:pre; animation:v-flip .3s var(--ease-paper) both; transform-origin:50% 60%} @keyframes v-flip{from{transform:rotateX(90deg); opacity:.2}} /* ---------- Map: the tabletop ---------- */ .map{border:var(--border); border-radius:var(--radius); box-shadow:var(--v-shadow)} html:not([data-mode="madrugada"]) .leaflet-tile-pane{filter:saturate(.5) sepia(.18) contrast(.94) brightness(1.03)} /* a quiet table: the price tags are the loudest thing on the map */ html[data-mode="madrugada"] .leaflet-tile-pane{filter:brightness(.6) saturate(.35) contrast(1.1)} .filters-toggle{ background:var(--v-violet); color:var(--v-violet-ink); border:0; box-shadow:var(--v-shadow); font-family:var(--body); font-weight:600; font-size:13px; text-transform:none; letter-spacing:0; } .filters-toggle[aria-expanded="true"]{background:var(--v-ink); color:var(--v-paper)} .filters-count{background:var(--v-ticket); color:var(--v-ink)} .filters-panel{background:color-mix(in srgb, var(--v-ticket) 96%, transparent); border:0; border-right:var(--border); box-shadow:var(--v-shadow)} .filters, .map-wrap.is-map-hidden .filters-panel .filters{background:transparent; border-color:var(--v-line)} .filter-glyph{color:var(--v-violet)} .barrio-chip{background:transparent; color:var(--v-ink-soft); border:var(--border); font-family:var(--body)} .barrio-chip:hover{color:var(--v-ink)} .barrio-chip[aria-pressed="true"]{background:var(--v-violet); color:var(--v-violet-ink); border-color:var(--v-violet)} .map-count{color:var(--v-ink-soft); font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.06em} /* Map pins: small printed tickets */ .price-pin .pin-price, .price-pin--approx .pin-price{ background-color:var(--v-ticket); color:var(--v-ink); border:1px solid var(--v-line); border-radius:6px; font-family:var(--mono); font-weight:600; font-size:12px; box-shadow:var(--v-shadow); } .price-pin--approx .pin-price{border-style:dashed; border-color:var(--v-ink-soft)} .price-pin.is-highlighted .pin-price, .price-pin:hover .pin-price{background:var(--v-violet); color:var(--v-violet-ink); border-color:var(--v-violet); box-shadow:var(--v-shadow-lift)} .pin-tooltip{background-color:var(--v-ticket); color:var(--v-ink); border:var(--border); border-radius:10px; box-shadow:var(--v-shadow-lift); font-family:var(--body)} .pin-tooltip strong{font-family:var(--display); font-weight:600; font-size:14px} .pin-tooltip .pin-tooltip-source, .pin-tooltip-source{color:var(--v-ink-soft)} .pin-tooltip em{color:var(--v-alarm)} .leaflet-tooltip-top.pin-tooltip::before{border-top-color:var(--v-ticket)} /* ---------- Tickets (cards) ---------- */ .card, .card:nth-child(n){ --shadow-c:transparent; background:var(--v-ticket); color:var(--v-ink); border:1px solid var(--v-line); border-radius:var(--radius); box-shadow:var(--v-shadow); transform:none; transition:transform .28s var(--ease-paper), box-shadow .28s var(--ease-paper); } .card:hover, .card:nth-child(even):hover, .card.is-highlighted{transform:translateY(-4px); box-shadow:var(--v-shadow-lift); background-color:var(--v-ticket)} .card.is-highlighted{outline:2px solid var(--v-violet); outline-offset:3px} /* the perforation between ticket and photo, with its punched notches */ .card-body{border-bottom:1.5px dashed var(--v-line)} .card-body::before, .card-body::after{background:var(--v-paper); border:1px solid var(--v-line)} .title a{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--v-ink)} .title a:hover{color:var(--v-violet)} .kind-badge{ border:1px solid var(--v-line); background:transparent; color:var(--v-ink-soft); font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.1em; box-shadow:none; transform:none; } .kind-badge svg{color:var(--v-ink-soft)} /* money stub: price in mono, a discount stamp to its left, the vuelto slip under it */ .card-price{flex-direction:column; align-items:flex-end; gap:5px} .card-price-row{display:flex; align-items:center; gap:8px} .price{ background:none; border:0; box-shadow:none; transform:none; padding:0; font-family:var(--mono); font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--v-ink); } .price-unit{font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--v-ink-soft); margin-left:2px} .deal{ background:transparent; color:var(--v-alarm); border:1px dashed var(--v-alarm); border-radius:4px; font-family:var(--mono); font-weight:600; font-size:11px; padding:1px 5px; transform:rotate(-4deg); box-shadow:none; } .vuelto{ display:inline-block; padding:2px 8px; border-radius:999px; background:var(--v-vuelto); color:#1A1633; font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; animation:v-print .26s var(--ease-paper) .15s both; cursor:help; } @keyframes v-print{from{transform:translateY(-6px); clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)}} .rating{background:var(--surface-2); color:var(--v-ink); border:var(--border); font-family:var(--mono); font-weight:500} .where svg{color:var(--v-violet)} .where strong{font-family:var(--body); font-weight:600; font-size:14px; text-transform:none; letter-spacing:0; color:var(--v-ink)} .where span, .from-pin{color:var(--v-ink-soft) !important; font-weight:500} .meta, .card-foot{color:var(--v-ink-soft)} .card-foot{border-top:1px solid var(--v-line); font-size:12.5px; display:block; line-height:1.9} .genius{background:transparent; color:var(--v-violet); border:1px solid var(--v-line); font-family:var(--mono)} .stayed--liked{background:color-mix(in srgb, var(--v-alarm) 12%, transparent); color:var(--v-alarm); border:0} .stayed--disliked{background:var(--v-ink); color:var(--v-paper); border:0} .card--disliked{opacity:.62; filter:grayscale(.5)} /* one grade over every scraped photo, so a messy feed looks curated */ .thumb{filter:sepia(.08) saturate(1.05) contrast(1.05)} .card:hover .thumb{transform:scale(1.03); filter:sepia(.04) saturate(1.1) contrast(1.05)} /* Tickets are laid on the table, not bounced in */ .card{animation-name:v-lay; animation-duration:.4s; animation-timing-function:var(--ease-paper)} .card.no-pop{animation:none} @keyframes v-lay{from{opacity:0; transform:translateY(10px)}} /* Drawn type icons (bunk bed, house) instead of emoji: filter chips and map */ .chip--icon svg{width:18px; height:18px; display:block} .marker-kind{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--v-ticket); color:var(--v-violet); border:1px solid var(--v-line); box-shadow:var(--v-shadow); } .marker-kind svg{width:15px; height:15px} .price-pin:hover .marker-kind, .price-pin.is-highlighted .marker-kind{background:var(--v-violet); color:var(--v-violet-ink); border-color:var(--v-violet)} /* Booking sites as small badges in their own colours */ .site-mark{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:4px; font-family:var(--body); font-weight:700; font-size:11px; line-height:1; color:#fff; vertical-align:middle; } .site-mark--booking{background:#003580} .site-mark--hostelworld{background:#C2410C} /* Hostelworld orange, darkened for 5.2:1 */ .site-mark--airbnb{background:#E31C5F} /* Airbnb's own red (#FF385C is 3.5:1 under white text; this is the minimal contrast fix, 4.6:1) — confined to this badge only, 2026-09-28 */ .site-mark--other{background:var(--v-ink-soft)} .card-sites{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; vertical-align:middle} .card-site-offer{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:12px} /* ---------- Ads ---------- */ .ad-card, .ad-card--sky, .ad-card--sun, .ad-card--hot{ --ad:var(--v-line); background:var(--v-ticket); color:var(--v-ink); border:1.5px dashed var(--v-line); box-shadow:var(--v-shadow); } .ad-card.is-clickable:hover{transform:translateY(-4px); box-shadow:var(--v-shadow-lift)} .ad-figure{border-bottom:1.5px dashed var(--v-line)} .ad-badge{background:var(--v-ink); color:var(--v-paper); font-family:var(--mono)} .ad-advertiser{font-family:var(--display); font-weight:600; text-transform:none; letter-spacing:-.01em; color:var(--v-ink)} .ad-headline{font-family:var(--body)} .ad-kicker, .ad-body{color:var(--v-ink-soft)} /* ---------- Journeys ---------- */ .journey-card{background:var(--v-ticket); color:var(--v-ink); border:var(--border); box-shadow:var(--v-shadow)} .journey-card--booked{box-shadow:inset 3px 0 0 var(--v-dusk-3), var(--v-shadow)} .journey-card--cancelled, .journey-card--past{box-shadow:var(--v-shadow)} .journey-name{font-family:var(--display); font-weight:600} .journey-status, .journey-weekly{font-family:var(--mono); font-weight:500; text-transform:uppercase} .journey-status--active{background:var(--v-violet); color:var(--v-violet-ink); border-color:var(--v-violet)} .journey-status--booked{background:var(--v-dusk-3); color:#1A1633; border-color:transparent} .journey-form h2, .search-head h2{font-family:var(--display); font-weight:600; text-transform:none} .journey-form label{font-family:var(--mono); font-weight:500; letter-spacing:.08em} .journey-form label.check{font-family:var(--body)} .journey-form input[type="text"], .journey-form input[type="date"], .journey-form input[type="number"], .journey-form select{ background:var(--v-paper); color:var(--v-ink); border:var(--border); color-scheme:inherit; } .journey-form input:focus, .journey-form select:focus{outline:2px solid var(--v-violet)} /* ---------- Sheets, overlay, toast, tooltips ---------- */ .search-overlay{background:rgb(20 16 38 / .55); backdrop-filter:blur(4px)} .search-panel{background:var(--v-ticket); color:var(--v-ink); border:var(--border); box-shadow:var(--v-shadow-lift)} .search-bar{background:var(--v-paper); border:var(--border)} .search-spinner{border-color:var(--v-line); border-top-color:var(--v-violet); border-right-color:var(--v-violet)} .search-pill{background:var(--v-ink); color:var(--v-paper); border:0; box-shadow:var(--v-shadow)} #searchMinimise{color:var(--v-ink); border-color:var(--v-line)} .tippy-box[data-theme~='nomad']{background:var(--v-ink); color:var(--v-paper); border:0; border-radius:8px; box-shadow:var(--v-shadow-lift)} .tippy-box[data-theme~='nomad'] > .tippy-arrow{color:var(--v-ink)} .toast{ background:var(--v-ticket); color:var(--v-ink); border:var(--border); border-radius:12px; box-shadow:var(--v-shadow-lift); transform:translateX(-50%); font-weight:600; display:flex; align-items:center; gap:10px; } /* the confirming stamp */ .toast::before{ content:"✓"; display:inline-grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--v-violet); color:var(--v-violet); font-weight:700; font-size:13px; animation:v-stamp .22s var(--ease-stamp) both; } .toast.is-restamp::before{animation:none} @keyframes v-stamp{from{transform:scale(1.8) rotate(-18deg); opacity:0}} .auth-bar{background:var(--v-alarm); color:#fff; border:0} .auth-bar strong{font-family:var(--body); text-transform:none; letter-spacing:0} .auth-bar code{background:rgb(0 0 0 / .2); color:#fff} .auth-empty{font-family:var(--display); color:var(--v-alarm) !important} .loading-note{color:var(--v-ink-soft); font-family:var(--mono); font-size:12px; letter-spacing:.06em} /* ---------- Splash: dusk ---------- */ .splash{background:linear-gradient(180deg, var(--v-indigo) 0%, #4A2F8F 60%, #C98BA0 130%)} .splash-word{font-family:var(--display); font-weight:600; text-transform:none; letter-spacing:-.01em; color:#FBF6EA} .splash-note{color:rgb(251 246 234 / .75); font-family:var(--mono); font-weight:500; letter-spacing:.08em} .splash .tagline{font-family:var(--display); font-style:italic; text-transform:none; letter-spacing:0} .splash .search-spinner{border-color:rgb(255 255 255 / .2); border-top-color:#FBF6EA; border-right-color:#FBF6EA} /* ---------- Footer ---------- */ .site-footer{ color:var(--v-ink-soft); -webkit-text-stroke:0; border-top:1px solid var(--v-line); font-family:var(--display); font-weight:400; font-style:italic; text-transform:none; letter-spacing:-.01em; } /* ---------- Motion: one thing at a time, and still when asked ---------- */ @media (prefers-reduced-motion:reduce){ .sky-band{animation:none} .flip-ch{animation:none} } /* Like icons sit right after the hostel name; the vuelto slip sits with the rating by the barrio */ .title-row{justify-content:flex-start; gap:10px} .meta > div:last-child{flex-direction:row; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:6px} /* MAP MARKER ICONS (not the card like icons): every icon sits in the same paper disc, so hearts, 💰, ⭐ and the drawn type icon read as one set (36px discs, 21px icons), and the black heart always has a light ground, even on the darkened night map */ .pin-badges{font-size:21px; gap:3px; filter:none} .marker-icon, .marker-badge{ display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; line-height:1; background:var(--v-ticket); border:1px solid var(--v-line); box-shadow:var(--v-shadow); } html[data-mode="madrugada"] .marker-icon, html[data-mode="madrugada"] .marker-badge{background:#EFE9DA; border-color:transparent} .marker-kind svg{width:20px; height:20px} .marker-icon--disliked{border-color:var(--v-ink-soft)} /* Search box with the day/night switch right beside it */ .header-tools{grid-column:3; grid-row:1 / span 2; align-self:center; display:flex; align-items:center; gap:8px} .header-tools #search{grid-column:auto; grid-row:auto} .mode-switch{flex:none} @media (max-width:720px){ .header-tools{grid-column:1 / span 2; grid-row:3; width:100%} .header-tools #search{flex:1; width:auto; min-width:0} } /* Vuelto slip on the name line, at the right-hand end; a touch smaller so it fits */ .title-row .vuelto{margin-left:auto; font-size:9.5px; padding:2px 7px} /* "/NOCHE" after the price: kept, but much smaller */ .price-unit{font-size:7.5px; letter-spacing:.12em; margin-left:1px; opacity:.8} /* Filter panel top row: listing type, then the deals and Genius toggles */ .filters-panel .filters > .filter-top{grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap} .filter-top .filter-toggles{display:flex; gap:8px; padding-left:8px; border-left:1px solid var(--v-line)} /* Map tooltip: the site badge stays a small inline mark (".pin-tooltip span" makes spans blocks) */ .pin-tooltip .pin-tooltip-source{display:flex; align-items:center; gap:5px} .pin-tooltip .site-mark{display:inline-grid; flex:none} /* Currency picker in the header, beside search */ .currency-select{ flex:none; height:36px; padding:0 26px 0 12px; border-radius:999px; cursor:pointer; background-color:rgb(255 255 255 / .1); color:#FBF6EA; border:1px solid rgb(255 255 255 / .18); font-family:var(--mono); font-weight:500; font-size:12.5px; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23FBF6EA' stroke-opacity='.7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } .currency-select:hover{background-color:rgb(255 255 255 / .16)} .currency-select option{color:#1A1633} @media (max-width:720px){ .header-tools{flex-wrap:nowrap} } /* Search bar: the last-search line sits under "Explore", smaller */ .run-copy{flex-direction:column; align-items:flex-start; gap:3px} .run-copy .run-status, .run-copy .apify-credit{font-size:11.5px; line-height:1.3} .run-copy .journey-flag{align-self:flex-start} /* Ad photo credits: still there (the licences need them), but tiny and quiet */ .ad-credit{font-size:7.5px; padding:1px 4px; right:4px; bottom:4px; opacity:.75; letter-spacing:.01em; background:rgb(20 16 38 / .55)} .ad-credit:hover{opacity:1} /* Where: a text box, with a plain note if the place can't be searched yet */ .explore-dates label{position:relative} #exCity{width:150px} #exCity[aria-invalid="true"]{outline:2px solid var(--v-alarm); outline-offset:0} .where-hint{position:absolute; top:100%; left:0; margin-top:4px; white-space:nowrap; z-index:5; font-family:var(--body); font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--v-alarm)} /* Recent reviews mention bedbugs, cockroaches or theft */ .flag-badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; cursor:help; background:color-mix(in srgb, var(--v-alarm) 12%, transparent); color:var(--v-alarm); font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.04em; } /* Ad offer: a small printed slip */ .ad-offer{display:inline-flex; align-items:center; gap:8px; margin:0; align-self:flex-start; padding:4px 10px; border:1px dashed var(--v-line); border-radius:6px; background:var(--v-paper); font-family:var(--mono); font-size:12px; color:var(--v-ink)} .ad-offer-what{font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:11px} .ad-offer-detail{color:var(--v-ink-soft)} /* Placeholder pages (Flights, Experiences, Blog, About, Contact) */ .page-view{max-width:640px; margin:48px auto 72px; padding:36px 32px; text-align:center; background:var(--v-ticket); border:1px solid var(--v-line); border-radius:var(--radius); box-shadow:var(--v-shadow)} .page-kicker{margin:0 0 8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--v-ink-soft)} .page-title{margin:0 0 12px; font-family:var(--display); font-weight:600; font-size:40px; letter-spacing:-.02em; color:var(--v-ink)} .page-text{margin:0 auto 24px; max-width:46ch; font-size:16px; line-height:1.55; color:var(--v-ink-soft)} .page-back{display:inline-block; text-decoration:none} /* ---------- Hero: three tickets at dusk (docs/design/hero.md) ---------- */ .hero{padding:26px 24px 30px; text-align:left; --scroll:0} .hero-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); align-items:center; gap:28px; min-height:min(32vh, 300px)} .hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:12px; transform:translateY(calc(var(--scroll) * -18px)); opacity:calc(1 - var(--scroll) * .9)} .hero .tagline{margin:0; text-align:left; font-size:clamp(28px, 4.6vw, 58px); line-height:1.02; letter-spacing:-.02em} .hero-proof{margin:0; min-height:1.4em; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgb(251 246 234 / .78)} .hero-cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; text-decoration:none; background:rgb(255 255 255 / .1); color:#FBF6EA; border:1px solid rgb(255 255 255 / .22); font-family:var(--body); font-weight:600; font-size:14px; transition:background .2s var(--ease-paper); } .hero-cta:hover{background:rgb(255 255 255 / .18)} .hero-cta span{transition:transform .2s var(--ease-paper)} .hero-cta:hover span{transform:translateY(2px)} /* The fan: three real tickets, lit like paper under a lamp */ .hero-fan{ --tilt:0deg; --shift-x:0px; --shift-y:0px; position:relative; height:200px; transform:translate(var(--shift-x), calc(var(--shift-y) + var(--scroll) * -40px)) rotate(var(--tilt)); opacity:calc(1 - var(--scroll)); transition:transform .5s var(--ease-paper); } .hero-fan::before{content:""; position:absolute; inset:-30px -10px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgb(246 201 168 / .28), transparent)} .fan-ticket{ --i:0; --angle:calc((var(--i) - 1) * 7deg); position:absolute; top:24px; left:calc(var(--i) * 34%); width:min(215px, 38%); display:flex; flex-direction:column; gap:4px; padding:14px 16px 12px; text-align:left; cursor:pointer; background:var(--v-ticket); color:var(--v-ink); border:1px solid var(--v-line); border-radius:12px; box-shadow:var(--v-shadow-lift); transform:rotate(var(--angle)); transform-origin:50% 120%; z-index:calc(3 - (var(--i) - 1) * (var(--i) - 1)); animation:v-deal .5s var(--ease-paper) both; animation-delay:calc(1.3s + var(--i) * 90ms); transition:transform .28s var(--ease-paper), box-shadow .28s var(--ease-paper); font:inherit; } .fan-ticket:nth-child(2){top:8px} /* perforation across the ticket, above the money line */ .fan-ticket::after{content:""; position:absolute; left:12px; right:12px; bottom:48px; border-top:1.5px dashed var(--v-line)} .fan-ticket:hover, .fan-ticket:focus-visible{transform:rotate(var(--angle)) translateY(-8px); box-shadow:0 2px 2px rgb(26 22 51 / .08), 0 28px 40px -12px rgb(26 22 51 / .4); z-index:5} .fan-ticket:focus-visible{outline:2px solid var(--v-violet); outline-offset:3px} .fan-name{font-family:var(--display); font-weight:600; font-size:16px; line-height:1.15; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} .fan-where{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--v-ink-soft)} .fan-money{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; flex-wrap:wrap} .fan-price{font-family:var(--mono); font-weight:600; font-size:18px} @keyframes v-deal{from{opacity:0; transform:rotate(var(--angle)) translateY(16px)}} body.is-loading .fan-ticket{animation-play-state:paused} @media (max-width:720px){ .hero{padding:18px 16px 22px} .hero-inner{grid-template-columns:1fr; min-height:0; gap:16px} .hero-fan{height:auto; display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; transform:none; opacity:1; scroll-snap-type:x mandatory} .hero-fan::before{display:none} .fan-ticket, .fan-ticket:nth-child(2){position:relative; top:auto; left:auto; width:210px; flex:none; transform:none; scroll-snap-align:start} .fan-ticket:hover{transform:translateY(-4px)} @keyframes v-deal{from{opacity:0; transform:translateY(12px)}} } @media (prefers-reduced-motion:reduce){ .hero-copy, .hero-fan{transform:none; opacity:1} } /* Small screens: nothing may be wider than the phone */ @media (max-width:720px){ html, body{overflow-x:hidden} .explore-dates{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-left:0} .explore-dates label:first-child{grid-column:1 / -1} .explore-dates input, .explore-dates select, #exCity{width:100%; min-width:0; box-sizing:border-box} .run-bar{min-width:0} .run-bar > *{min-width:0; max-width:100%} .filter-summary{word-break:break-word} .header-tools{min-width:0} .header-tools #search{flex:1 1 auto; width:auto; min-width:0} .currency-select{padding:0 22px 0 10px} } /* ---------- Motion system (docs/design/motion-system.md) ---------- */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* Tickets lay down as they come into view (off-screen ones wait) */ .card:not(.no-pop){animation-delay:calc(var(--reveal-i, 0) * 60ms)} .card:not(.no-pop):not(.is-in){animation-play-state:paused} /* Photos fade up from a soft blur once loaded */ .thumb{opacity:0; filter:blur(6px) sepia(.08) saturate(1.05) contrast(1.05); transition:opacity .3s var(--ease-paper), filter .3s var(--ease-paper), transform .5s var(--ease-paper)} .thumb.is-loaded{opacity:1; filter:sepia(.08) saturate(1.05) contrast(1.05)} .card:hover .thumb.is-loaded{filter:sepia(.04) saturate(1.1) contrast(1.05)} /* The magnetic button eases back */ #runSearch{transition:transform var(--dur-base) var(--ease-paper), filter var(--dur-quick) ease} /* The pinned departure board, under the header */ .board-pin{ position:fixed; left:50%; z-index:1900; width:min(1200px, calc(100% - 32px)); margin:0; padding:7px 14px; cursor:pointer; border:0; border-radius:0 0 8px 8px; background:var(--v-indigo); color:#F3E9C8; text-align:left; font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:var(--v-shadow); transform:translate(-50%, -110%); opacity:0; pointer-events:none; transition:transform var(--dur-slow) var(--ease-paper), opacity var(--dur-base) var(--ease-paper); } .board-pin.is-pinned{transform:translate(-50%, 0); opacity:1; pointer-events:auto} /* View changes crossfade */ ::view-transition-old(root), ::view-transition-new(root){animation-duration:var(--dur-slow); animation-timing-function:var(--ease-paper)} /* Filter labels: drawn line icons, like the rest of the interface */ .filter-icon svg{display:block; color:var(--v-ink-soft)} /* Price slider in the Vuelto style: a hairline track, a violet handle */ #maxPrice{-webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:var(--v-line); border:0; box-shadow:none} #maxPrice::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--v-violet); border:3px solid var(--v-ticket); box-shadow:0 0 0 1px var(--v-violet), var(--v-shadow); cursor:pointer} #maxPrice::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--v-violet); border:3px solid var(--v-ticket); box-shadow:0 0 0 1px var(--v-violet); cursor:pointer} #maxPrice::-moz-range-track{height:4px; border-radius:999px; background:var(--v-line)} #maxPrice:focus-visible{outline:2px solid var(--v-violet); outline-offset:4px} /* Audit follow-ups */ .rating--thin{opacity:.6; font-style:normal} .thumb{object-position:center 40%} /* keep faces and beds in frame */ /* Zoomed out: less crowding, but your ❤️ / 🖤 always stay (the type disc and 💰 ⭐ hide) */ .map.is-far .pin-badges .marker-badge, .map.is-far .pin-badges .marker-icon--unrated{display:none} /* Keyboard focus: always visible, always violet */ :focus-visible{outline:2px solid var(--v-violet); outline-offset:3px} .card:focus-visible{outline-offset:4px} /* Map tooltip: compact, three short lines. A long name (some Airbnb titles run 50+ characters) is truncated with an ellipsis on one line rather than wrapping tall, or overflowing its own rounded box (2026-09-28). The name (.tip-name) truncates on its own; the ❤️/💰/⭐ icons after it (siblings, not inside it) never do. */ .pin-tooltip{padding:6px 9px; font-size:11.5px; line-height:1.35; max-width:230px; white-space:normal; box-sizing:border-box} .pin-tooltip strong{font-size:13px; line-height:1.2} .pin-tooltip .tip-title{display:flex; align-items:baseline; gap:3px; min-width:0} .pin-tooltip .tip-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0} .pin-tooltip .tip-icon{flex:none} .pin-tooltip .pin-tooltip-source{gap:4px; flex-wrap:wrap} .pin-tooltip .site-mark{min-width:16px; height:16px; font-size:10px} .pin-tooltip .pin-tooltip-sep{display:inline; color:var(--v-ink-soft)} .pin-tooltip .pin-tooltip-deal{display:inline; font-family:var(--mono); font-weight:600; color:var(--v-alarm)} /* Exclude: preset chips and free text for words in recent reviews */ .exclude-box{display:flex; flex-direction:column; gap:6px; min-width:0} .exclude-text{width:100%; box-sizing:border-box; padding:6px 10px; border:var(--border); border-radius:8px; background:var(--v-paper); color:var(--v-ink); font:500 12.5px var(--body)} .exclude-text:focus{outline:2px solid var(--v-violet); outline-offset:1px} #excludePresets .barrio-chip[aria-pressed="true"]{background:var(--v-alarm); border-color:var(--v-alarm); color:#fff} /* Map tooltip: a disliked place's broken heart is black */ .pin-tooltip .tip-icon{display:inline} .tip-broken-heart{filter:grayscale(1) brightness(.2)} /* MAP MARKER ICONS: each superlative disc has its own hover move, like the hearts */ .price-pin:hover .marker-badge--cheapest, .price-pin.is-highlighted .marker-badge--cheapest{animation:marker-coin .7s var(--ease-paper) 1} .price-pin:hover .marker-badge--discount, .price-pin.is-highlighted .marker-badge--discount{animation:marker-swing .8s var(--ease-paper) 1; transform-origin:50% 10%} .price-pin:hover .marker-badge--rated, .price-pin.is-highlighted .marker-badge--rated{animation:marker-twinkle .6s var(--ease-paper) 1} @keyframes marker-coin{0%{transform:rotateY(0)} 60%{transform:rotateY(360deg) scale(1.15)} 100%{transform:rotateY(360deg) scale(1)}} @keyframes marker-swing{0%{transform:rotate(0)} 25%{transform:rotate(-16deg)} 50%{transform:rotate(11deg)} 75%{transform:rotate(-5deg)} 100%{transform:rotate(0)}} @keyframes marker-twinkle{0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.2) rotate(18deg)}} /* zoomed out, the superlative discs stay too (only the type disc hides) */ .map.is-far .pin-badges .marker-badge{display:inline-grid} /* Menu: pages not built yet */ .soon-tag{display:inline-block; margin-left:3px; padding:1px 5px; border-radius:4px; vertical-align:2px; background:rgb(255 255 255 / .14); color:rgb(251 246 234 / .75); font-family:var(--mono); font-weight:500; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase} /* MAP MARKER ICONS: the biggest discount is a bold red % (the 🏷️ emoji vanished in its disc) */ .marker-badge--discount{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--v-alarm); border-color:color-mix(in srgb, var(--v-alarm) 45%, transparent)} html[data-mode="madrugada"] .marker-badge--discount{color:#C92A33} .pin-tooltip .tip-discount{font-family:var(--mono); font-weight:700; color:var(--v-alarm)} /* Map key: top right, over the map, same discs as the markers at a smaller size */ .map-key{ position:absolute; top:12px; right:12px; z-index:1100; display:flex; align-items:flex-start; gap:6px; max-width:calc(100% - 140px); padding:8px 8px 8px 12px; border-radius:10px; background:color-mix(in srgb, var(--v-ticket) 94%, transparent); border:1px solid var(--v-line); box-shadow:var(--v-shadow); font:600 11.5px var(--body); color:var(--v-ink-soft); } .map-key ul{display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; padding:0; list-style:none} .map-key li{display:flex; align-items:center; gap:6px; white-space:nowrap} .map-key .marker-badge, .map-key .marker-icon{width:24px; height:24px; font-size:14px} .map-key .marker-kind svg{width:14px; height:14px} .map-key .marker-badge--discount{font-size:12px} .map-key-kinds .marker-kind + .marker-kind{margin-left:-4px} .map-key-toggle{flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--v-line); background:transparent; color:var(--v-ink-soft); cursor:pointer; font:600 12px var(--body); line-height:1} .map-key.is-collapsed{padding:4px} .map-key.is-collapsed ul{display:none} .map-key.is-collapsed .map-key-toggle{width:auto; padding:0 10px; border-radius:999px} .map-wrap.is-map-hidden .map-key{display:none} @media (max-width:720px){ .map-key{max-width:calc(100% - 24px); top:auto; bottom:12px; right:12px} } /* Menu fits one line even with the "soon" tags */ .header-menu ul{flex-wrap:nowrap; gap:0} .header-menu a, .header-menu li:nth-child(even) a{padding:7px 8px; white-space:nowrap} .soon-tag{margin-left:2px; padding:1px 4px; font-size:8px} /* Splash: the stamp logo, big */ .splash .splash-logo{width:clamp(200px, 38vmin, 320px); height:clamp(200px, 38vmin, 320px)} /* MAP MARKER ICONS: the default is the U coin (no disc of its own: the coin is the disc) */ .marker-icon--default{background:none; border:0; box-shadow:0 2px 4px rgb(26 22 51 / .3)} .marker-icon--default svg{width:100%; height:100%; display:block} .map-key .marker-icon--default{width:22px; height:22px} .map.is-far .pin-badges .marker-icon--default{display:none} /* zoomed out: just the price tag */ /* Search bar: every control sits on one baseline (labelled fields and buttons alike) */ .run-bar{align-items:flex-end} .run-bar .run-copy{align-self:center} .run-bar .explore-dates{align-items:flex-end} .run-bar .explore-dates input, .run-bar .explore-dates select{height:36px; box-sizing:border-box} .run-bar .toggle, .run-bar .map-toggle, .run-bar .run-button{height:36px; display:inline-flex; align-items:center; box-sizing:border-box} /* Where: a plain label while Buenos Aires is the only city */ .where-static{display:flex; flex-direction:column; gap:2px} .where-label{font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--v-ink-soft)} .where-city{display:inline-flex; align-items:center; height:36px; font-family:var(--display); font-weight:600; font-size:16px; color:var(--v-ink)} @media (max-width:720px){ .where-static{grid-column:1 / -1} .where-city{height:auto} } /* Default map marker: same size as every other marker disc (2026-09-28: it used to be 20% smaller) */ .pin-badges .marker-icon--default{box-shadow:0 2px 4px rgb(26 22 51 / .35)} /* Header logo: the U coin (the splash keeps the plane stamp) */ .logo-frame--coin, .logo-link:hover .logo-frame--coin{width:48px; height:48px; overflow:visible; background:none; border:0; box-shadow:none} .logo-coin{display:block; width:100%; height:100%; filter:drop-shadow(0 2px 6px rgb(0 0 0 / .35))} @media (max-width:720px){ .logo-frame--coin{width:40px; height:40px} } /* Main menu: the page you're on */ .header-menu ul li a[aria-current="page"]{color:#FBF6EA; background:rgb(255 255 255 / .1)} /* Journey count sits on the Journeys menu item */ .header-menu .journey-count{display:inline-grid; place-items:center; margin-left:4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--v-violet); color:#fff; font:600 10px var(--mono); vertical-align:1px} .header-menu .journey-count[hidden]{display:none} /* Franchise filter, and traveller star ratings for showers, hot water, beds and curtains (ADR 8) */ #franchise .barrio-chip[aria-pressed="true"]{background:var(--v-violet); border-color:var(--v-violet); color:var(--v-violet-ink)} .attr-filters{display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; min-width:0} .attr-filter{display:flex; flex-direction:column; gap:2px; min-width:0; font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--v-ink-soft)} .attr-filter > span{cursor:help} .attr-filter .pill-select{width:100%; margin:0} .chain-badge{display:inline-flex; align-items:center; padding:2px 8px; border:1px dashed var(--v-ink-soft); border-radius:999px; font:500 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--v-ink-soft); cursor:help} .card-attrs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:6px 0 2px} .attr-chip{display:inline-flex; gap:5px; align-items:baseline; padding:2px 7px; border:var(--border); border-radius:6px; background:var(--surface-2); font:500 10.5px var(--mono); color:var(--v-ink); cursor:help} .attr-chip .attr-name{color:var(--v-ink-soft); text-transform:uppercase; letter-spacing:.05em; font-size:9.5px} .attr-rate{margin-left:auto; padding:2px 8px; border:0; background:none; color:var(--v-violet); cursor:pointer; font:600 11px var(--body); text-decoration:underline; text-underline-offset:2px} .attr-rate:hover{color:var(--v-ink)} .rate-form{max-width:440px} .rate-rows{display:flex; flex-direction:column; gap:10px} .rate-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} .rate-label{display:flex; flex-direction:column; min-width:0; flex:1 1 150px} .rate-label strong{font:600 13px var(--body); color:var(--v-ink)} .rate-label small{font:400 11px var(--body); color:var(--v-ink-soft); line-height:1.3} .rate-stars{display:flex; gap:2px} .star-btn{width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer; font-size:24px; line-height:1; color:var(--v-line)} .star-btn.is-on{color:var(--v-violet)} .star-btn:hover{color:var(--v-violet); transform:scale(1.12)} @media (prefers-reduced-motion: reduce){ .star-btn:hover{transform:none} } /* AIRBNB (whole places): its own colour is confined to its site badge only (like Booking.com's blue and Hostelworld's orange, never anywhere but their own "B."/"H" badge, 2026-09-28). Everywhere else — the map marker ring, the price border, the card badge — Airbnb looks like any other marker: the house glyph is identity enough, the same way the plane/bed glyph is for everything else. */ .pin-house{display:inline-block; vertical-align:-2px; margin-right:3px; color:var(--v-ink-soft)} .pin-house svg{width:12px; height:12px; display:block} .chip[data-kind="airbnb"].is-active svg{color:inherit} /* A little "Zzz" on hover: the bed is having a lie-in, the Airbnb house is asleep too. One puff of sleep, not a loop, so it doesn't nag while you linger; hovering again replays it (the animation resets on re-hover). */ .marker-icon--bed, .marker-icon--airbnb{position:relative} .marker-icon--bed::after, .marker-icon--airbnb::after{ content:'zzz'; position:absolute; top:2px; right:-15px; z-index:2; font-family:var(--display); font-style:italic; font-weight:600; font-size:11px; line-height:1; color:var(--v-ink-soft); letter-spacing:.02em; text-shadow:0 1px 0 var(--v-ticket); opacity:0; pointer-events:none; transform-origin:0 100%; } .price-pin:hover .marker-icon--bed::after, .price-pin.is-highlighted .marker-icon--bed::after, .price-pin:hover .marker-icon--airbnb::after, .price-pin.is-highlighted .marker-icon--airbnb::after{ animation:marker-zzz 1.6s var(--ease-paper) 1; } @keyframes marker-zzz{ 0%{opacity:0; transform:translateY(2px) scale(.5) rotate(-8deg)} 15%{opacity:1; transform:translateY(-2px) scale(1) rotate(-8deg)} 70%{opacity:1; transform:translateY(-10px) scale(1.05) rotate(-4deg)} 100%{opacity:0; transform:translateY(-16px) scale(1.1) rotate(0)} } @media (prefers-reduced-motion:reduce){ .marker-icon--bed::after, .marker-icon--airbnb::after{animation:none !important; display:none} } /* FIND ME: the ◎ button under the zoom control, and the violet "you are here" dot (violet is the action colour) */ .locate-btn{display:flex !important; align-items:center; justify-content:center; color:var(--v-ink) !important} .locate-btn:hover{color:var(--v-violet) !important} .locate-btn.is-busy{color:var(--v-violet) !important; animation:me-busy 1s ease-in-out infinite} @keyframes me-busy{50%{opacity:.35}} .me-pin{background:none; border:0} .me-dot{position:absolute; inset:4px; border-radius:50%; background:var(--v-violet); border:3px solid #fff; box-shadow:0 1px 5px rgb(26 22 51 / .45); box-sizing:border-box} .me-halo{position:absolute; inset:0; border-radius:50%; background:var(--v-violet); opacity:.25; animation:me-pulse 2s ease-out infinite} @keyframes me-pulse{from{transform:scale(.6); opacity:.35} to{transform:scale(1.7); opacity:0}} path.me-accuracy{stroke:var(--v-violet); stroke-width:1; fill:var(--v-violet); fill-opacity:.12} .me-key{position:relative; display:inline-block; width:22px; height:22px; flex:none} @media (prefers-reduced-motion:reduce){ .me-halo, .locate-btn.is-busy{animation:none} } /* SORT BAR: its own control above the map, apart from the filters */ .sort-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px} .sort-label{font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--v-ink-soft)} .sort-bar .pill-select{width:auto; min-width:0; margin:0} /* Find me is behind ?locate=: its pieces stay hidden unless the flag turns them on (display rules elsewhere would beat [hidden]) */