/* ===== SCOPED BUILD — every rule below is confined to .dfv2 ===== Two-way isolation, because this component is dropped INTO a legacy page: 1. Outward — the original sheet styled `html`, `body` and `*`. Those would have restyled the whole Great Escape page. `body`/`:root` are remapped to `.dfv2`, `html` is dropped, `*` is scoped. 2. Inward — the legacy sheet reaches into this component with selectors this component cannot out-specify: #banner ul { text-align: center } (ID beats any class chain) .sorting .all-category ul { width: 20% } .sorting .all-category ul li { padding-left: 7px } Those are exactly what centred and squashed the feature list before. The reset below neutralises them for our subtree only, and nothing outside it. */ .dfv2 ul, .dfv2 ol { width: auto !important; max-width: none !important; float: none !important; margin: 0; padding: 0; list-style: none; text-align: left !important; } .dfv2 ul li, .dfv2 ol li { padding-left: 0; margin: 0; border: 0; background: none; text-align: left !important; list-style: none; } .dfv2 img { max-width: 100%; } .dfv2 p, .dfv2 h1, .dfv2 h2, .dfv2 h3, .dfv2 h4 { margin: 0; } .dfv2 button { font-family: inherit; } .dfv2 { text-align: left; } /* The legacy MOBILE shell pins `` yet its container chain measures ~1270px wide regardless of device. A block-level component dropped in there inherits that width, stretches , and drags the site header out with it (header went 670 -> 1270). Clamp to the real viewport: on the 640-canvas page 100vw resolves to 640, on desktop it is the true window width. min() keeps it from ever exceeding its own container either. */ /* FULL-BLEED. The legacy page nests this component inside a fixed 1024px .container (230px margins per side) and, within that, an 841px .box4 — so on a 1485px screen the finder was confined to 841px and threw away 644px of viewport. Pull back out to the full viewport here; .shell then decides the real content width. */ /* Escape every legacy wrapper by bleeding to the VIEWPORT, then let .shell cap the content at the page's own container width (1024px) so it still lines up with the nav and the search form above it. Measuring the ancestor inset in JS (`--bleed`) was too fragile: the mount sits deep inside the search-form markup, where `.advanced_search` is 250px wide, so the reading collapsed and the finder rendered ~590px on a 1000px screen with every label wrapping. A viewport bleed cannot collapse — it does not depend on any ancestor's width. */ .dfv2 { overflow-x: hidden; /* see .pdates — clip does not contain scrollable overflow */ max-width: 100vw; } @media (min-width: 700px) { .dfv2 { width: calc(100vw - var(--sbw, 0px)); margin-inline: calc(50% - ((100vw - var(--sbw, 0px)) / 2)); max-width: none; } } .dfv2 .shell { max-width: min(var(--shell), 100%); } .dfv2 { --page: #ffffff; --panel: #faf6ec; --surface: #ffffff; --hairline: #e3dccb; --ink: #433918; --muted: #756750; --muted-lg: #8a7a63; --accent: #e35c12; --accent-ink:#433918; --serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif; --sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --shell: 1024px; --gut: 0rem; --gut-mob: .75rem; --pad-text: clamp(.85rem, 1.4vw, 1.15rem); --hair: 1px solid var(--hairline); --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --ease: cubic-bezier(.22, .61, .36, 1); } .dfv2 *, .dfv2 *::before, .dfv2 *::after { box-sizing: border-box; } .dfv2 { background: transparent; color: var(--ink); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .dfv2 img { display: block; max-width: 100%; } .dfv2 button { font: inherit; color: inherit; } .dfv2 h1, .dfv2 h2, .dfv2 h3, .dfv2 p, .dfv2 ul, .dfv2 li, .dfv2 figure { margin: 0; padding: 0; } .dfv2 ul { list-style: none; } .dfv2 a { color: inherit; } .dfv2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .dfv2 [hidden] { display: none !important; } .dfv2 .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .dfv2 .shell { width: 100%; max-width: min(var(--shell), 100%); margin-inline: auto; padding-inline: var(--gut); } .dfv2 .shell:not(:empty) { background: var(--panel); border: var(--hair); border-radius: var(--r-lg); padding-block: clamp(1.1rem, 2.4vw, 1.6rem); margin-bottom: clamp(1.2rem, 2.6vw, 2rem); } .dfv2 .shell:not(:empty) > .prow:last-of-type { margin-bottom: 0; } @media (max-width: 700px) { .dfv2 .shell, .dfv2 .masthead-meta { padding-inline: var(--gut-mob); } } .dfv2 .availhead { width: 100%; max-width: min(var(--shell), 100%); margin: 26px auto 2px; padding-inline: var(--pad-text); box-sizing: border-box; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 30px; line-height: 1.15; color: #2e260f; } .dfv2 .masthead-meta { width: 100%; max-width: min(var(--shell), 100%); margin: 0 auto 1.1rem; padding: 6px var(--pad-text); box-sizing: border-box; font: 600 12.5px/1.3 'Roboto', Georgia, serif; color: var(--muted); } .dfv2 .masthead-meta.is-live { color: #4a7a3c; } .dfv2 .masthead-meta.is-stale { color: #b3401a; } .dfv2 .eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem; margin: 0 0 .15rem; justify-content: flex-start; text-align: left; } .dfv2 .pidx { font: 700 clamp(.875rem, 1.6vw, 1.0625rem)/1 var(--sans); text-transform: uppercase; letter-spacing: .13em; color: var(--accent); } .dfv2 .ploc { font: 500 .75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); } .dfv2 .masthead { padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(.9rem, 2.2vw, 1.4rem); } .dfv2 .masthead-title { font: 600 clamp(2.75rem, 9vw, 5.5rem)/1.02 var(--serif); letter-spacing: -0.015em; margin: .35em 0 .28em; text-wrap: balance; } .dfv2 .masthead-sub { max-width: 44ch; font-size: 1.0625rem; color: var(--muted); } .dfv2 .loading { padding: 4rem 0; color: var(--muted); } .dfv2 .prow { border: var(--hair); background: var(--surface); margin-bottom: clamp(1.1rem, 2.6vw, 1.75rem); overflow: hidden; ; border-radius: var(--r-lg); } .dfv2 .ptop { display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) and (max-width: 1099.98px) { .dfv2 .ptop { grid-template-columns: 1.05fr 1fr; align-items: stretch; } .dfv2 .prow:nth-of-type(even) .pmedia { order: 2; } .dfv2 .ptop.no-media { grid-template-columns: minmax(0, 1fr); } .dfv2 .ptop.no-media .pbody { max-width: 62ch; } } @media (min-width: 1100px) { .dfv2 .prow { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: stretch; } .dfv2 .pmain { grid-column: 1; min-width: 0; display: flex; flex-direction: column; } .dfv2 .ptop { grid-template-columns: minmax(0, 1fr); } .dfv2 .pdates { grid-column: 2; border-top: 0; border-left: var(--hair); } .dfv2 .pmedia { order: 0; } } .dfv2 .pmedia { position: relative; background: transparent; min-width: 0; padding: clamp(.7rem, 1.4vw, 1rem); } .dfv2 .pmedia .shots { border-radius: var(--r-md); overflow: hidden; } .dfv2 .shots { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .dfv2 .shots::-webkit-scrollbar { display: none; } .dfv2 .shots > li { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; aspect-ratio: 3 / 2; } .dfv2 .shots img { width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; background: var(--panel); opacity: 0; transition: opacity .9s var(--ease); ; border-radius: var(--r-md); } .dfv2 .shots img.is-in { opacity: 1; } .dfv2 .shotnav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.92); border: var(--hair); color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); border-radius: var(--r-pill); } .dfv2 .shotnav:hover { background: var(--ink); color: #fff; } .dfv2 .shotnav svg { width: 15px; height: 15px; } .dfv2 .shotnav.prev { left: 12px; rotate: 180deg; } .dfv2 .shotnav.next { right: 12px; } .dfv2 .shotcount { position: absolute; left: 12px; bottom: 12px; background: rgba(67,57,24,.82); color: #fff; font: 500 .75rem/1 var(--sans); letter-spacing: .08em; padding: 7px 10px; border-radius: var(--r-sm); } .dfv2 .pbody { padding: clamp(1.15rem, 2.4vw, 1.7rem); display: flex; flex-direction: column; min-width: 0; } .dfv2 .pname { font: 600 clamp(1.35rem, 2.1vw, 1.7rem)/1.1 var(--serif); letter-spacing: -0.01em; margin: .1em 0 0; } .dfv2 .pblurb { margin-top: .5rem; color: var(--muted); max-width: 46ch; text-align: left; } .dfv2 .pchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } .dfv2 .pchips li { display: inline-flex; align-items: center; flex: 0 0 auto; width: auto; min-height: 0; height: auto; float: none; background: var(--panel); border: 1px solid var(--hairline); border-radius: 7px; padding: 5px 9px; font: 400 .75rem/1.2 var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; } .dfv2 .pactions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: auto; padding-top: 1.6rem; } .dfv2 .plink { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font: 500 .8125rem/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border-bottom: 1px solid var(--hairline); transition: border-color .2s var(--ease), color .2s var(--ease); } .dfv2 .plink svg { width: 13px; height: 13px; color: var(--accent); } .dfv2 .plink:hover { color: var(--accent); border-color: var(--accent); } .dfv2 .pdetails-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; min-width: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: 500 .8125rem/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .dfv2 .pdetails-btn::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .25s var(--ease); } .dfv2 .pdetails-btn[aria-expanded="true"]::after { rotate: -135deg; translate: 0 2px; } .dfv2 .pdetails-btn:hover { color: var(--ink); } .dfv2 .pdetails { border-top: var(--hair); padding: clamp(1rem, 2.2vw, 1.5rem); } .dfv2 .pdetails-h { font: 500 .75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 1.25rem; } .dfv2 .feats { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .dfv2 .feats li { min-height: 0; height: auto; float: none; } @media (min-width: 520px) { .dfv2 .feats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .dfv2 .feat { position: relative; padding-left: 18px; font-size: .75rem; line-height: 1.35; color: #3a3424; text-transform: none; letter-spacing: 0; } .dfv2 .feat svg { position: absolute; left: 0; top: .28em; width: 11px; height: 11px; color: #4f7a3f; flex: none; } .dfv2 .pdesc { margin-top: 1.75rem; padding-top: 1.5rem; border-top: var(--hair); color: var(--muted); max-width: 68ch; } .dfv2 .pdates { min-width: 0; overflow-x: hidden; background: var(--panel); border-top: var(--hair); padding: clamp(1rem, 2.2vw, 1.4rem) 0; min-width: 0; } .dfv2 .pdates-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: clamp(1.05rem, 2.3vw, 1.6rem); margin-bottom: .8rem; } .dfv2 .pdates-h { font: 500 .75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); } .dfv2 .rail { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 14px 14px 8px; min-width: 0; scrollbar-width: none; /* the .xbar below the rail replaces the native bar */ } .dfv2 .rail::-webkit-scrollbar { display: none; } .dfv2 .rail::after { content: ""; flex: 0 0 1px; } .dfv2 .dcard { flex: 0 0 9.75rem; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface); border: 1px solid #d9cfb8; box-shadow: 0 2px 6px rgba(67,57,24,.10); padding: .8rem .7rem; min-width: 0; border-radius: 10px; } .dfv2 .dc-range { font: 700 1rem/1.15 var(--serif); color: var(--ink); white-space: nowrap; min-height: 1.15em; } .dfv2 .dc-nights { margin-top: .5rem; font: 500 .75rem/1 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .dfv2 .dc-rate { margin-top: 1.1rem; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; } .dfv2 .dc-rate b { font: 700 1.0625rem/1.15 var(--serif); color: var(--ink); } .dfv2 .dc-step { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem; margin: .05rem 0 .6rem; } .dfv2 .dc-stepgroup { display: inline-flex; align-items: stretch; border: var(--hair); border-radius: var(--r-sm); background: var(--surface); overflow: visible; flex: 0 0 auto; } .dfv2 .dc-stepgroup > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .dfv2 .dc-stepgroup > :last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .dfv2 .dc-step-l { flex: 0 0 auto; white-space: nowrap; } .dfv2 .dc-step-l { font: 600 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .dfv2 .dc-step-b { width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 0; cursor: pointer; font: 400 1.15rem/1 var(--sans); color: var(--ink); transition: background .18s var(--ease), color .18s var(--ease); position: relative; } .dfv2 .dc-step-b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .dfv2 .dc-step-b:hover:not(:disabled) { background: var(--panel); } .dfv2 .dc-step-b:disabled { opacity: 1; color: #a2998a; cursor: default; } .dfv2 .dc-step-b:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: inherit; } .dfv2 .dc-step-n { min-width: 2.25ch; padding: 0 .1rem; text-align: center; align-self: center; border-left: var(--hair); border-right: var(--hair); align-content: center; font: 700 1.0625rem/32px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .dfv2 .dc-per { font-size: .75rem; color: var(--muted); } .dfv2 .dc-note { margin-top: .3rem; font-size: .8125rem; color: var(--muted); } .dfv2 .dc-ask { margin-top: .65rem; font: 600 1.35rem/1.2 var(--serif); } .dfv2 .dc-seetot { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: 600 .8125rem/1 var(--sans); color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 0; } .dfv2 .dc-seetot::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .25s var(--ease); } .dfv2 .dc-seetot[aria-expanded="true"]::after { rotate: -135deg; translate: 0 2px; } .dfv2 .dc-seetot:hover { text-decoration-thickness: 2px; } .dfv2 .dc-seetot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .dfv2 .dc-tot { margin-top: -.4rem; padding: .75rem .85rem; background: var(--panel); border: var(--hair); font-size: .8125rem; color: var(--muted); border-radius: var(--r-sm); } .dfv2 .dc-tot b { font: 700 1.5rem/1.1 var(--serif); color: var(--ink); display: block; } .dfv2 .dc-cta { margin-top: auto; padding-top: 1.1rem; } .dfv2 .reserve { margin-top: .875rem; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; text-align: center; text-decoration: none; padding: .5625rem .625rem; border-radius: 4px; font: 600 .8125rem/1.2 var(--sans); white-space: nowrap; transition: background .18s var(--ease); } .dfv2 .reserve:hover { background: var(--accent-ink); } .dfv2 .rail-empty { padding-inline: clamp(1.05rem, 2.3vw, 1.6rem); color: var(--muted); } .dfv2 .foot { border-top: var(--hair); margin-top: clamp(2rem, 6vw, 4rem); padding: 2.5rem 0 4rem; color: var(--muted); font-size: .875rem; } .dfv2 .foot p { max-width: 60ch; } .dfv2 .js-reveal .reveal { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease), translate .7s var(--ease); } .dfv2 .js-reveal .reveal.is-in { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .dfv2 *, .dfv2 *::before, .dfv2 *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .dfv2 .reveal { opacity: 1; translate: none; } .dfv2 .shots img { opacity: 1; } } .dfv2 .viewtoggle { display: inline-flex; margin-left: auto; padding: 3px; background: var(--page); border: var(--hair); border-radius: var(--r-pill); } .dfv2 .viewbtn { appearance: none; border: 0; cursor: pointer; background: none; color: var(--muted); font: 600 .75rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .5rem 1rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); transition: background .2s var(--ease), color .2s var(--ease); white-space: nowrap; } .dfv2 .viewbtn:hover { color: var(--ink); } .dfv2 .viewbtn[aria-pressed="true"] { background: var(--ink); color: #fff; } .dfv2 .calmonths { display: flex; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* the .xbar below the months replaces the native bar */ -webkit-overflow-scrolling: touch; gap: 1.4rem; padding-bottom: .5rem; } .dfv2 .calmonths::-webkit-scrollbar { display: none; } .dfv2 .calmonths > .calmonth { flex: 0 0 300px; max-width: 100%; scroll-snap-align: start; } @media (min-width: 1100px) { .dfv2 .calmonths > .calmonth { flex: 0 0 calc(50% - .7rem); } } .dfv2 .calmonth { min-width: 0; } .dfv2 .calmonth-h { margin: 0 0 .5rem; font: 600 1.15rem/1.1 var(--serif); color: var(--ink); letter-spacing: -0.01em; } .dfv2 .calgrid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; } .dfv2 .calgrid th { font: 600 .75rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding-bottom: .35rem; } .dfv2 .calgrid td { padding: 0; vertical-align: top; } .dfv2 .cday { min-height: 42px; border: 1px solid var(--hairline); border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; font: 600 .6875rem/1 var(--sans); color: var(--ink); } .dfv2 .cnum { font: 500 .875rem/1 var(--sans); } .dfv2 .crate { font: 600 .75rem/1 var(--sans); color: var(--accent); white-space: nowrap; } .dfv2 .cday.open { background: var(--panel); border-color: var(--hairline); color: var(--ink); } .dfv2 .cday.booked { background: #f0ece2; color: #b6ab93; } .dfv2 .cday.booked .cnum { text-decoration: line-through; } .dfv2 .cday.past { background: transparent; color: #cfc7b5; } .dfv2 .callegend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 10px 0 0; padding: 0; list-style: none; } .dfv2 .callegend li { display: inline-flex; align-items: center; gap: .45rem; width: auto; flex: 0 0 auto; min-height: 0; height: auto; float: none; font: 400 .75rem/1.2 var(--sans) !important; color: var(--muted) !important; text-transform: none !important; letter-spacing: 0 !important; } .dfv2 .callegend .legend-t { color: var(--muted); } .dfv2 .callegend .dot { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--hairline); flex: 0 0 auto; } .dfv2 .callegend .dot.open { background: var(--panel); } .dfv2 .callegend .dot.booked { background: #f0ece2; } .dfv2 .callegend .dot.past { background: transparent; } .dfv2 .calmore { display: block; margin: 1.2rem auto 0; padding: .7rem 1.4rem; min-height: 44px; background: none; border: 1px solid var(--hairline); border-radius: var(--r-md); color: var(--ink); cursor: pointer; font: 600 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transition: background .18s var(--ease), border-color .18s var(--ease); } .dfv2 .calmore:hover { background: var(--panel); border-color: var(--muted-lg); } /* Sits ABOVE the month rail: it reveals months earlier than the searched one, so putting it under the grid with "Show more months" would read as another forward control. */ .dfv2 .calearlier { margin: 0 auto .9rem; } .dfv2 .phead { padding: clamp(1rem, 2vw, 1.35rem) clamp(1.15rem, 2.4vw, 1.7rem) 0; } @media (max-width: 700px) { .dfv2 .calmonths { gap: 1.1rem; } .dfv2 .calmonths > .calmonth { flex: 0 0 100%; } .dfv2 .cday { min-height: 44px; font-size: .8125rem; } .dfv2 .calmonth-h { font-size: 1.15rem; } .dfv2 .pname { font-size: 1.5rem; } .dfv2 .pblurb, .dfv2 .pdesc { font-size: 1rem; } .dfv2 .availhead { font-size: 24px; margin-top: 18px; } .dfv2 .feat { font-size: .875rem; } .dfv2 .pchips li, .dfv2 .dc-nights, .dfv2 .pdates-h, .dfv2 .viewbtn, .dfv2 .shotcount, .dfv2 .dc-step-l, .dfv2 .dc-note, .dfv2 .dc-seetot, .dfv2 .callegend li { font-size: .8125rem; } .dfv2 .dc-range { font-size: 1.25rem; } .dfv2 .dc-rate b { font-size: 1.375rem; } .dfv2 .dc-per { font-size: .875rem; } .dfv2 .reserve { font-size: .875rem; min-height: 44px; } .dfv2 .pdetails-btn, .dfv2 .plink { font-size: .875rem; } .dfv2 .dcard { flex-basis: 13rem; } } .dfv2 .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .dfv2 .calhint { color: var(--muted-lg) !important; font-style: normal; } /* Custom scroll indicator drawn by app.js (attachXBar). Real DOM so it cannot auto-hide the way native overlay scrollbars do on macOS trackpads and phones. */ .dfv2 .xbar { position: relative; height: 12px; margin: 4px 14px 0; background: #e6ddc9; border-radius: 10px; touch-action: none; } .dfv2 .xbar-thumb { position: absolute; top: 2px; bottom: 2px; left: 0; background: #8a7a63; border-radius: 8px; cursor: grab; } .dfv2 .xbar-thumb:active { cursor: grabbing; background: #6b5f47; } .dfv2 .xbar[hidden] { display: none !important; }