/* Generated by resort-data/build_resort_pages.py - do not hand-edit */ /* ===================================================================== RESORT SECTION (prefix: rs-) resort-finder, the destination hubs, resorts-, resort-. Loaded after styles.css. Uses only the custom-property tokens from styles.css (no raw colours), the same radii, shadows and motion rules, and the breakpoints from work/DESIGN.md (480 / 640 / 820 / 980 / 1180). ===================================================================== */ /* ---------- helpers ---------- */ .rs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .rs-ico { width: 1em; height: 1em; flex: none; fill: currentColor; } .rs-nw { white-space: nowrap; } /* controls that need rs-shortlist.js stay hidden until it runs (it adds .rs-js to ) */ .rs-heart, .rs-save, .rs-countbar .rs-tofilters { display: none; } .rs-js .rs-heart { display: grid; } .rs-js .rs-save { display: inline-flex; } .rs-js .rs-countbar .rs-tofilters { display: inline-flex; } .rs-js [data-rs-nojs] { display: none; } /* ---------- breadcrumb ---------- */ .rs-crumbs { margin: 0 0 18px; } .rs-crumbs ol { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink-soft); } .rs-crumbs li { margin: 0; display: inline-flex; align-items: center; } .rs-crumbs li + li::before { content: ""; width: 7px; height: 7px; margin: 0 12px 0 9px; border-top: 2px solid var(--coral-600); border-right: 2px solid var(--coral-600); border-radius: 1px; transform: rotate(45deg); } .rs-crumbs a { display: inline-block; padding: 12px 0; color: var(--sea-600); text-decoration: none; } .rs-crumbs a:hover { color: var(--coral-600); text-decoration: underline; } .rs-crumbs [aria-current="page"] { color: var(--ink); padding: 12px 0; } /* ---------- hero extras ---------- */ .rs-hero .page-hero-grid { align-items: center; } .rs-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; } .page-hero .rs-hero-place { display: flex; align-items: flex-start; gap: 9px; margin: -6px 0 12px; font-size: 1.08rem; font-weight: 700; color: var(--ink-soft); } .rs-hero-place::before, .rs-place::before { content: ""; flex: none; width: 13px; height: 16px; margin-top: .28em; background: url(images/deco-pin.svg) center / contain no-repeat; } .page-hero .rs-formerly { margin: 0 0 12px; font-size: .98rem; color: var(--ink-soft); } .page-hero .rs-formerly strong { color: var(--ink); } .rs-hero .rs-badges { margin: 4px 0 14px; } .rs-stats { list-style: none; margin: 26px 0 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 8px; } .rs-stats li { margin: 0; display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 14px 6px 12px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sh-sm); font-size: 13.5px; font-weight: 700; color: var(--ink-soft); } .rs-stats strong { font-family: var(--f-display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.1rem; color: var(--ink); } .rs-hero .page-hero-art { position: relative; } .rs-hero .page-hero-art > .deco { z-index: 2; } .rs-hero .page-hero-art > img.rs-hero-spark { width: 30px; left: -8px; top: -16px; } .rs-hero .page-hero-art > img.rs-hero-heart { width: 32px; right: -6px; bottom: -12px; } @media (max-width: 899px) { .rs-hero .page-hero-art { max-width: 460px; width: 100%; margin: 0 auto; } } /* status note under a resort name */ .rs-status { display: flex; gap: 12px; align-items: flex-start; max-width: 60ch; margin: 6px 0 4px; padding: 14px 18px; background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-sm); } .rs-status::before { content: ""; flex: none; width: 26px; height: 26px; margin-top: 1px; background: url(images/deco-sun.svg) center / contain no-repeat; } .page-hero .rs-status p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink); max-width: none; } .rs-status.is-soon { background: var(--sun-lt); box-shadow: none; } /* ---------- badges, price feel, feature chips ---------- */ .rs-badges { display: flex; flex-wrap: wrap; gap: 6px; } .rs-badges .badge { font-size: 11.5px; padding: 4px 10px; letter-spacing: .05em; } .badge.rs-b-adults { background: var(--blush); } .badge.rs-b-family { background: var(--lagoon); } .badge.rs-b-age { background: var(--lilac); } .badge.rs-b-soon { background: var(--peach); } .badge.rs-b-check { background: var(--sun-lt); } .rs-price { font-family: var(--f-display); font-weight: 700; font-variation-settings: "SOFT" 100; letter-spacing: .06em; color: var(--ink); white-space: nowrap; } .rs-price .off { color: var(--sand-2); } .rs-feats { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 6px; } .rs-feats li { margin: 0; padding: 3px 11px; border-radius: var(--r-pill); background: var(--sky-50); color: var(--sea-600); font-size: 13px; font-weight: 800; line-height: 1.5; } /* ---------- resort cards (finder, hubs, brands, "also in") ---------- */ .rs-cards { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 640px) { .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .rs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } } @media (min-width: 1100px) { .rs-cards.rs-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } } .rs-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-md); transition: transform .25s ease, box-shadow .25s ease; } .rs-card[hidden] { display: none; } .rs-card:hover, .rs-card:focus-within { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--sh-lg); } .rs-card-top { position: relative; height: 104px; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: radial-gradient(circle, color-mix(in srgb, var(--white) 55%, transparent) 0 2.2px, transparent 2.7px) 0 0 / 18px 18px, var(--tint, var(--sky)); } .rs-card-art { --flip: 1; position: absolute; right: 58px; bottom: -30px; width: 158px; height: auto; transform: scaleX(var(--flip)); transition: transform .4s ease; } /* the same destination art repeats down a group, so vary it a little: mirror every other card, shift the crop */ .rs-cards > .rs-card:nth-child(2n) .rs-card-art { --flip: -1; } .rs-cards > .rs-card:not(.rs-card-sm):nth-child(3n+2) .rs-card-art { bottom: -46px; right: 64px; } .rs-cards > .rs-card:not(.rs-card-sm):nth-child(3n) .rs-card-art { bottom: -14px; right: 74px; } .rs-card:hover .rs-card-art { transform: scaleX(var(--flip)) scale(1.04); } .rs-card-brand { position: absolute; left: 14px; top: 14px; max-width: calc(100% - 78px); padding: 4px 11px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 88%, transparent); color: var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 22px 22px; } .rs-card h3 { margin: 0; font-size: 1.24rem; line-height: 1.25; } .rs-card h3 a { color: var(--ink); text-decoration: none; font-weight: inherit; } .rs-card h3 a:hover { color: var(--coral-600); } /* the resort name's link covers the whole card; the heart and "Read more" sit above it */ .rs-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); } .rs-card h3 a:focus-visible { outline: none; } .rs-card h3 a:focus-visible::after { outline: 3px solid var(--sea-600); outline-offset: 4px; } .rs-place { display: flex; gap: 8px; align-items: flex-start; margin: 0; max-width: none; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); } .rs-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .rs-card-meta .rs-price { font-size: 1.02rem; } .rs-more { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding: 0 18px; border-radius: var(--r-pill); background: var(--peach-lt); color: var(--coral-600); font-size: 14px; font-weight: 800; text-decoration: none; transition: background .2s, color .2s; } .rs-card:hover .rs-more, .rs-more:hover { background: var(--coral); color: var(--ink); } /* small card ("Also in", "More from") */ .rs-card-sm .rs-card-top { height: 78px; } .rs-card-sm .rs-card-art { width: 124px; right: 54px; bottom: -24px; } .rs-card-sm .rs-card-body { padding: 16px 18px 18px; gap: 8px; } .rs-card-sm h3 { font-size: 1.08rem; } .rs-card-sm .rs-place { font-size: .9rem; } /* heart toggle */ .rs-heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--coral-600); box-shadow: var(--sh-sm); cursor: pointer; transition: transform .2s ease, background-color .2s ease; } .rs-heart .rs-ico { width: 22px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linejoin: round; } .rs-heart:hover { transform: scale(1.08); } .rs-heart[aria-pressed="true"] { background: var(--blush); } .rs-heart[aria-pressed="true"] .rs-ico { fill: var(--rose); stroke: var(--coral-600); } .rs-heart.is-pop .rs-ico, .rs-save.is-pop .rs-ico { animation: rsPop .45s ease; } @keyframes rsPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } } /* big "Add to my shortlist" button on a resort page */ .rs-save .rs-ico { width: 20px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; } .rs-save[aria-pressed="true"] { background: var(--white); box-shadow: 0 4px 0 var(--rose), var(--sh-md); } .rs-save[aria-pressed="true"] .rs-ico { fill: var(--rose); stroke: var(--coral-600); } .rs-save[aria-pressed="true"]::after { content: ""; width: 20px; height: 20px; margin-left: 2px; background: url(images/deco-check.svg) center / contain no-repeat; } /* ---------- finder: filter panel ---------- */ .rs-finder-band { padding-top: clamp(40px, 6vw, 72px); } .rs-filter { position: relative; margin: 0 0 22px; padding: clamp(18px, 3.4vw, 30px); background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-md); scroll-margin-top: 16px; } .rs-filter[hidden] { display: none; } .rs-filter-title { margin: 0 0 16px; font-size: clamp(1.35rem, 2.6vw, 1.7rem); } .rs-fgroup { margin: 0 0 18px; } .rs-fgroup:last-child { margin-bottom: 0; } .rs-fhead, .rs-search label, .rs-select label { display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-600); } .rs-filter-row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; } @media (min-width: 820px) { .rs-filter-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } } .rs-search { position: relative; } .rs-search .rs-ico { position: absolute; left: 17px; bottom: 14px; width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; } .rs-search input, .rs-select select { width: 100%; min-height: 48px; font-family: var(--f-body); font-size: 16px; color: var(--ink); background: var(--cream); border: 2px solid var(--rule); border-radius: var(--r-pill); transition: border-color .15s, background-color .15s, box-shadow .15s; } .rs-search input { padding: 11px 18px 11px 46px; } .rs-search input::placeholder { color: var(--muted); opacity: 1; } .rs-search input:focus, .rs-select select:focus { outline: none; border-color: var(--sea); background: var(--white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 22%, transparent); } .rs-select { position: relative; max-width: 420px; } .rs-select select { appearance: none; -webkit-appearance: none; padding: 11px 46px 11px 18px; cursor: pointer; } .rs-select::after { content: ""; position: absolute; right: 20px; bottom: 21px; width: 8px; height: 8px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); border-radius: 1px; transform: rotate(45deg); pointer-events: none; } .rs-fchips { display: flex; flex-wrap: wrap; gap: 8px; } .rs-fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 8px; border: 2px solid var(--rule); border-radius: var(--r-pill); background: var(--cream); color: var(--ink); font-family: var(--f-body); font-size: 15px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; } .rs-fchip.no-art { padding-left: 16px; } .rs-fchip:hover { border-color: var(--coral); transform: translateY(-2px); } .rs-fchip[aria-pressed="true"] { background: var(--peach-lt); border-color: var(--coral); } .rs-fchip[aria-pressed="true"]::after { content: ""; width: 18px; height: 18px; flex: none; background: url(images/deco-check.svg) center / contain no-repeat; } .rs-fchip .n { font-size: 13px; font-weight: 700; color: var(--muted); } .rs-fchip-art { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; background: var(--tint, var(--sky)); } .rs-fchip-art img { width: 30px; height: 30px; object-fit: cover; object-position: 50% 60%; } .rs-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--sand); } .rs-seg button { min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-soft); font-family: var(--f-body); font-size: 15px; font-weight: 800; cursor: pointer; } .rs-seg button:hover { color: var(--ink); } .rs-seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--sh-sm); } @media (max-width: 520px) { .rs-filter .rs-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-md); } .rs-filter .rs-seg button:last-child { grid-column: 1 / -1; } } .rs-morebtn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: transparent; color: var(--ink); font-family: var(--f-body); font-size: 15px; font-weight: 800; cursor: pointer; } .rs-morebtn::after { content: ""; width: 8px; height: 8px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; border-radius: 1px; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; } .rs-morebtn[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); } .rs-morebtn:hover { background: var(--white); box-shadow: 0 3px 0 var(--ink); } .rs-morebtn .rs-morecount { min-width: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--coral); color: var(--ink); font-size: 13px; text-align: center; } .rs-morebtn .rs-morecount:empty { display: none; } .rs-more-panel { margin-top: 18px; padding-top: 18px; border-top: 2px dashed var(--rule); } .rs-more-panel[hidden] { display: none; } .rs-hint { margin: 8px 0 0; font-size: .88rem; color: var(--muted); max-width: 70ch; } .rs-hint .rs-price { color: var(--ink-soft); } /* live count bar (sticks to the top while you scroll the results) */ .rs-countbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 0 0 30px; } .rs-js .rs-countbar { position: sticky; top: 10px; z-index: 6; padding: 6px 8px 6px 22px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--white) 94%, transparent); box-shadow: var(--sh-md); } .rs-count { margin: 0; max-width: none; font-weight: 800; color: var(--ink); } .rs-count strong { font-family: var(--f-display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.2rem; } .rs-countbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .rs-reset, .rs-tofilters { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--sea-600); font-family: var(--f-body); font-size: 15px; font-weight: 800; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; } .rs-reset:hover, .rs-tofilters:hover { color: var(--coral-600); } .rs-reset[hidden] { display: none; } /* destination jump list (only without JavaScript; with it, the filter chips take over) */ .rs-jump { margin: 0 0 34px; } /* one destination group of cards */ .rs-group { margin: 0 0 clamp(48px, 6vw, 68px); scroll-margin-top: 90px; } .rs-group:last-of-type { margin-bottom: 0; } .rs-group[hidden] { display: none; } .rs-group-head { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; } .rs-group-art { flex: none; width: 96px; overflow: hidden; border: 4px solid var(--white); border-radius: 20px; background: var(--tint, var(--sky)); box-shadow: var(--sh-sm); transform: rotate(-2deg); } .rs-group-art img { width: 100%; height: auto; } .rs-group-head h2 { margin: 0 0 4px; font-size: clamp(1.45rem, 2.8vw, 2rem); } .rs-group-meta { margin: 0; max-width: none; font-size: .97rem; color: var(--ink-soft); } @media (max-width: 480px) { .rs-group-head { gap: 14px; align-items: flex-start; } .rs-group-art { width: 72px; border-radius: 16px; } } /* nothing matches */ .rs-empty { margin: 0 0 40px; padding: 108px 26px 40px; text-align: center; border: 3px dashed var(--rule); border-radius: var(--r-lg); background: radial-gradient(circle at 50% 56px, var(--sun) 0 24px, var(--sun-lt) 24.5px 34px, transparent 34.5px), var(--white); } .rs-empty[hidden] { display: none; } .rs-empty h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 8px; } .rs-empty p { margin: 0 auto; color: var(--ink-soft); } /* ---------- plain pill links (brands) ---------- */ .rs-pills { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 10px; } .rs-pills.center { justify-content: center; } .rs-pills li { margin: 0; } .rs-pills a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sh-sm); color: var(--ink); font-size: 15px; font-weight: 800; text-decoration: none; transition: background-color .2s, transform .2s; } .rs-pills a:hover { background: var(--sun-lt); color: var(--ink); transform: translateY(-2px); } .rs-pills .n { font-size: 13px; font-weight: 700; color: var(--muted); } /* ---------- resort page ---------- */ .rs-resort-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; } @media (min-width: 980px) { .rs-resort-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 64px; } } .rs-resort-main > h2:not(:first-child) { margin-top: 48px; } .rs-summary { font-size: 1.14rem; line-height: 1.72; color: var(--ink); } .rs-bestfor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; } .rs-bestfor-k { margin-right: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-600); } .rs-tag { display: inline-block; padding: 6px 14px; border-radius: var(--r-pill); background: var(--sun-lt); color: var(--ink); font-size: 14.5px; font-weight: 800; line-height: 1.3; } .rs-resort-main ul:not([class]) { max-width: none; } .rs-resort-main .callout { max-width: none; } .rs-resort-main .callout h3 { margin: 2px 0 8px; font-size: 1.15rem; } .rs-resort-main .callout ul { margin-bottom: 0; } .rs-resort-main .callout li:last-child { margin-bottom: 0; } @media (max-width: 480px) { .rs-resort-main .callout.has-icon, .rs-brand-intro .callout.has-icon { flex-direction: column; gap: 8px; padding: 18px 20px; } .rs-resort-main .callout.has-icon > img, .rs-brand-intro .callout.has-icon > img { width: 48px; height: 48px; } } .rs-side { display: grid; gap: 34px; } .rs-glance h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 14px; } .rs-glance .detail-list { margin: 0; } .rs-glance .detail-list li { flex-wrap: wrap; column-gap: 16px; row-gap: 2px; } .rs-glance .detail-list .k { flex: 0 0 150px; min-width: 0; } @media (max-width: 480px) { .rs-glance .detail-list .k { flex-basis: 100%; } } .rs-glance .detail-list li > span:last-child { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; } .rs-ask { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-md); background: var(--peach-lt); } .rs-ask > img { width: 72px; height: 72px; flex: none; } .rs-ask p { margin: 0 0 10px; font-size: .98rem; color: var(--ink); max-width: none; } .rs-ask .rs-ask-link { font-weight: 800; } .rs-side .polaroid { max-width: 420px; margin: 16px auto 0; } .rs-side .polaroid img { background: var(--tint, var(--sky)); } /* questions and answers (resort + hub pages) */ .rs-faq { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1040px; margin: 0 auto; } @media (min-width: 820px) { .rs-faq { grid-template-columns: 1fr 1fr; gap: 24px; } .rs-faq > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); } } .rs-faq-item { position: relative; padding: 24px 26px 24px 64px; background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-sm); } .rs-faq-item::before { content: ""; position: absolute; left: 22px; top: 26px; width: 26px; height: 26px; background: url(images/deco-sparkle-coral.svg) center / contain no-repeat; } .rs-faq-item h3 { margin: 0 0 8px; font-size: 1.14rem; } .rs-faq-item p { margin: 0; max-width: none; color: var(--ink-soft); font-size: .98rem; } @media (max-width: 480px) { .rs-faq-item { padding: 22px 20px 22px 54px; } .rs-faq-item::before { left: 18px; width: 22px; height: 22px; } } /* related resorts */ .rs-related + .rs-related { margin-top: clamp(48px, 6vw, 64px); } .rs-related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0 0 22px; } .rs-related-head h2 { margin: 0; font-size: clamp(1.45rem, 2.8vw, 2rem); } .rs-related-head a { font-size: 15px; } /* "Facts checked" line with the source links */ .rs-checked { max-width: 920px; margin: clamp(48px, 6vw, 64px) auto 0; padding: 18px 22px; border: 2px dashed var(--rule); border-radius: var(--r-md); background: color-mix(in srgb, var(--white) 55%, transparent); font-size: .92rem; color: var(--muted); } .rs-checked p { margin: 0 0 8px; max-width: none; } .rs-checked p strong { color: var(--ink); } .rs-sources { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 2px 18px; } .rs-sources li { margin: 0; min-width: 0; } .rs-sources a { display: inline-block; padding: 4px 0; font-size: .9rem; overflow-wrap: anywhere; } /* ---------- hub pages ---------- */ .rs-hub-intro { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; } @media (min-width: 980px) { .rs-hub-intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 60px; } } .rs-hub-intro .rs-prose p:first-child { font-size: 1.14rem; color: var(--ink); } .rs-qf h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 14px; } .rs-qf .detail-list li { flex-direction: column; gap: 2px; } .rs-qf .detail-list .k { min-width: 0; } .rs-src { margin-left: 4px; font-size: 13px; font-weight: 800; white-space: nowrap; } .rs-jump-head { margin: 34px 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-600); } @media (min-width: 860px) { .stack.rs-choose { grid-template-columns: 1fr 1fr; gap: 20px; } .stack.rs-choose > .stack-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); } } .rs-area .sec-head { margin-bottom: 30px; } .rs-area-n { display: inline-block; margin: 0 0 10px; } .rs-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; } .rs-hub-sources { max-width: 920px; margin: 44px auto 0; } /* ---------- brand pages ---------- */ .rs-brand-intro { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; } @media (min-width: 980px) { .rs-brand-intro { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; } } .rs-brand-intro .rs-prose p { font-size: 1.1rem; color: var(--ink); } .rs-brand-intro .callout { max-width: none; } .rs-keypoints h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 14px; } .rs-keypoints .stack-item p { color: var(--ink); } .rs-keypoints .rs-src { display: inline-block; margin: 6px 0 0; } /* ---------- shortlist: floating pill, drawer, compare, toast ---------- */ .rs-pill { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 10px 20px 10px 16px; border: 0; border-radius: var(--r-pill); background: var(--sea-900); color: var(--cream); font-family: var(--f-body); font-size: 15.5px; font-weight: 800; line-height: 1.2; box-shadow: var(--sh-lg); cursor: pointer; transition: transform .2s ease; } .rs-pill .rs-ico { width: 22px; height: 20px; fill: var(--rose); } .rs-pill .rs-pill-n { color: var(--sun); } .rs-pill:hover { transform: translateY(-2px); } .rs-pill.is-bump { animation: rsBump .5s ease; } @keyframes rsBump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } } .rs-pill:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: var(--r-pill); } /* keep the last lines of the page clear of the pill */ .rs-js .site-footer { padding-bottom: 96px; } .rs-toast { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); z-index: 61; max-width: min(360px, calc(100vw - 32px)); padding: 11px 18px; border-radius: var(--r-md); background: var(--white); color: var(--ink); box-shadow: var(--sh-lg); font-size: .95rem; font-weight: 700; line-height: 1.45; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .rs-toast.is-on { opacity: 1; transform: none; } .rs-lock, .rs-lock body { overflow: hidden; } .rs-drawer { position: fixed; inset: 0; z-index: 80; } .rs-drawer[hidden] { display: none; } .rs-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--sea-900) 55%, transparent); animation: rsFade .2s ease; } .rs-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(470px, 100%); background: var(--paper); border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: var(--sh-lg); animation: rsSlide .28s ease; } .rs-drawer.is-compare .rs-panel { width: min(1000px, 100%); } @media (max-width: 639px) { .rs-panel { top: auto; left: 0; width: 100%; height: 92vh; height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation-name: rsRise; } .rs-drawer.is-compare .rs-panel { width: 100%; } } @keyframes rsFade { from { opacity: 0; } to { opacity: 1; } } @keyframes rsSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes rsRise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } } .rs-panel:focus { outline: none; } .rs-panel-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px 22px; border-bottom: 2px dashed var(--rule); } .rs-panel-head > img { width: 58px; height: 58px; flex: none; } .rs-panel-head h2 { margin: 0; font-size: 1.5rem; } .rs-panel-head h2::after { display: none; } .rs-panel-sub { margin: 2px 0 0; font-size: .9rem; color: var(--muted); max-width: none; } .rs-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; } .rs-close .rs-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; } .rs-close:hover { background: var(--peach-lt); } .rs-tabs { display: flex; padding: 14px 22px 0; } .rs-panel-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 16px 22px 22px; } .rs-panel-foot { display: grid; gap: 6px; padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 2px dashed var(--rule); background: var(--white); } .rs-panel-foot .btn { width: 100%; } .rs-send.is-disabled { opacity: .5; pointer-events: none; box-shadow: none; } .rs-panel-note { margin: 0; text-align: center; font-size: .86rem; color: var(--muted); max-width: none; } .rs-picks { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 10px; } .rs-picks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin: 0; padding: 12px 12px 12px 18px; background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-sm); } .rs-picks a { grid-column: 1; font-family: var(--f-display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.06rem; line-height: 1.3; color: var(--ink); text-decoration: none; } .rs-picks a:hover { color: var(--coral-600); text-decoration: underline; } .rs-pick-place { grid-column: 1; font-size: .88rem; line-height: 1.4; color: var(--muted); } .rs-remove { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; padding: 0 14px; border: 2px solid var(--rule); border-radius: var(--r-pill); background: var(--cream); color: var(--ink); font-family: var(--f-body); font-size: 14px; font-weight: 800; cursor: pointer; } .rs-remove:hover { border-color: var(--coral); background: var(--peach-lt); } .rs-picks-empty { padding: 30px 10px; text-align: center; color: var(--ink-soft); } .rs-picks-empty p { margin: 0 auto 14px; } .rs-compare-note { margin: 0 0 12px; font-size: .9rem; color: var(--muted); max-width: none; } .rs-compare-wrap { overflow-x: auto; background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-sm); } .rs-compare { width: 100%; min-width: 600px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .92rem; line-height: 1.45; } .rs-compare thead td:first-child, .rs-compare tbody th { width: 124px; } .rs-compare th, .rs-compare td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 2px dotted var(--rule); } .rs-compare tr:last-child > * { border-bottom: 0; } .rs-compare thead th { font-family: var(--f-display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.02rem; } .rs-compare thead th a { color: var(--ink); text-decoration: none; } .rs-compare thead th a:hover { color: var(--coral-600); text-decoration: underline; } .rs-compare tbody th { position: sticky; left: 0; z-index: 1; min-width: 104px; background: var(--white); color: var(--coral-600); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .rs-compare ul { list-style: none; margin: 0; padding: 0; max-width: none; } .rs-compare li { margin: 0 0 3px; } .rs-compare .rs-price { font-size: 1rem; } /* ---------- focus ---------- */ .rs-fchip:focus-visible, .rs-seg button:focus-visible, .rs-morebtn:focus-visible, .rs-more:focus-visible, .rs-reset:focus-visible, .rs-tofilters:focus-visible, .rs-remove:focus-visible, .rs-pills a:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 3px; border-radius: var(--r-pill); } .rs-heart:focus-visible, .rs-close:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 3px; border-radius: 50%; } .rs-compare-wrap:focus-visible { outline: 3px solid var(--sea-600); outline-offset: 3px; border-radius: var(--r-md); } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { .rs-card:hover, .rs-card:focus-within, .rs-fchip:hover, .rs-heart:hover, .rs-pill:hover, .rs-pills a:hover { transform: none; } .rs-card:hover .rs-card-art { transform: scaleX(var(--flip)); } .rs-panel, .rs-backdrop, .rs-pill.is-bump, .rs-heart.is-pop .rs-ico, .rs-save.is-pop .rs-ico { animation: none; } .rs-toast { transition: none; } }