/* prices — section styles (loaded from by build.py) */ #vp-prices, #vp-prices * { box-sizing:border-box; } #vp-prices { width:100vw; margin-left:calc(50% - 50vw); padding:96px 0 0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); } #vp-prices .vp-prices__inner { width:var(--vp-page); margin:auto; } #vp-prices .vp-prices__head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; } #vp-prices h2 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:clamp(34px,3.6vw,48px); line-height:1.04; letter-spacing:-.02em; } #vp-prices .vp-prices__lead { margin:0; color:color-mix(in srgb, var(--color-text) 75%, transparent); font-size:18px; line-height:1.6; } /* --------------------------------------------------------- three tariffs -- */ #vp-prices .vp-tariffs { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; } #vp-prices .vp-tariff { padding:34px 32px; border-radius:var(--radius-lg); background:var(--color-surface); } #vp-prices .vp-tariff__mark { width:46px; height:46px; margin-bottom:26px; display:block; border-radius:50%; background:var(--color-accent-2-300); } #vp-prices .vp-tariff h3 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:25px; line-height:1.15; } #vp-prices .vp-tariff__time { margin:8px 0 0; color:color-mix(in srgb, var(--color-text) 65%, transparent); font-size:15px; } #vp-prices .vp-tariff__price { margin:32px 0 0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:44px; line-height:1; } #vp-prices .vp-tariff__note { margin:6px 0 0; color:color-mix(in srgb, var(--color-text) 65%, transparent); font-size:14px; } /* The middle one is the rate most evenings are booked on. */ #vp-prices .vp-tariff--main { background:var(--color-accent); color:var(--color-bg); box-shadow:var(--shadow-md); } #vp-prices .vp-tariff--main .vp-tariff__mark { background:color-mix(in srgb, var(--color-bg) 30%, transparent); } #vp-prices .vp-tariff--main .vp-tariff__time, #vp-prices .vp-tariff--main .vp-tariff__note { color:color-mix(in srgb, var(--color-bg) 82%, transparent); } /* ------------------------------------------------------------ calculator -- */ /* The one dark block on the page: splitting a bill is arithmetic, and the change of ground says so without another heading. */ #vp-prices .vp-split { margin-top:28px; padding:48px 52px; display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; border-radius:var(--radius-lg); background:var(--color-neutral-900); color:var(--color-neutral-100); } #vp-prices .vp-split__eyebrow { color:var(--color-accent-300); } #vp-prices .vp-split h3 { margin:0; color:var(--color-neutral-100); font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:34px; line-height:1.06; } #vp-prices .vp-split__copy { margin:18px 0 0; color:color-mix(in srgb, var(--color-neutral-100) 74%, transparent); font-size:16px; line-height:1.6; } #vp-prices .vp-split__form { display:grid; grid-template-columns:1.5fr .75fr .75fr; gap:26px; align-items:start; } #vp-prices .vp-split__label { margin-bottom:12px; display:block; color:color-mix(in srgb, var(--color-neutral-100) 58%, transparent); } #vp-prices .vp-split__tabs { display:flex; flex-wrap:wrap; gap:8px; } /* On the dark ground the chip inverts: a hairline of the light ink, and the selected one takes the accent step that carries on dark (README → tokens). */ #vp-prices .vp-split .vp-chip { border-color:color-mix(in srgb, var(--color-neutral-100) 24%, transparent); background:transparent; color:var(--color-neutral-100); } #vp-prices .vp-split .vp-chip:hover { border-color:var(--color-accent-300); } #vp-prices .vp-split .vp-chip.is-active { border-color:var(--color-accent-400); background:var(--color-accent-400); color:var(--color-neutral-900); } #vp-prices .vp-split__stepper { border-color:color-mix(in srgb, var(--color-neutral-100) 24%, transparent); background:transparent; } #vp-prices .vp-split__stepper button { width:46px; color:var(--color-neutral-100); } #vp-prices .vp-split__stepper button:hover { background:color-mix(in srgb, var(--color-neutral-100) 12%, transparent); } #vp-prices .vp-split__stepper .vp-stepper__value { min-width:44px; font-size:18px; } #vp-prices .vp-split__result { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:20px 32px; margin-top:30px; padding-top:26px; border-top:1px solid color-mix(in srgb, var(--color-neutral-100) 18%, transparent); } #vp-prices .vp-split__sums { display:flex; gap:44px; } #vp-prices .vp-split__sums p { margin:0; } #vp-prices .vp-split__sums .vp-label { margin:0; color:color-mix(in srgb, var(--color-neutral-100) 55%, transparent); } #vp-prices .vp-split__sums b { margin-top:8px; display:block; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:36px; line-height:1; } #vp-prices .vp-split__sums p:last-child b { color:var(--color-accent-300); } #vp-prices .vp-split__shares { display:flex; flex-wrap:wrap; gap:8px; } #vp-prices .vp-split__share { display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 8px; border:1px solid color-mix(in srgb, var(--color-neutral-100) 20%, transparent); border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap; } #vp-prices .vp-split__share i { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, var(--color-accent-300) 24%, transparent); color:var(--color-accent-300); font-style:normal; font-size:12px; } #vp-prices .vp-split__foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 28px; margin-top:26px; } #vp-prices .vp-split__note, #vp-prices .vp-split__hint { max-width:520px; margin:0; color:color-mix(in srgb, var(--color-neutral-100) 55%, transparent); font-size:13px; line-height:1.55; } #vp-prices .vp-split__hint { color:var(--color-accent-300); } #vp-prices .vp-split__cta { padding:14px 26px; background:var(--color-accent-400); color:var(--color-neutral-900); } #vp-prices .vp-split__cta:hover { background:var(--color-accent-300); color:var(--color-neutral-900); } /* ---------------------------------------------------------------- narrow -- */ @media (max-width:980px) { #vp-prices { padding-top:64px; } #vp-prices .vp-prices__head { grid-template-columns:1fr; gap:18px; } #vp-prices .vp-tariffs { grid-template-columns:1fr; gap:14px; } #vp-prices .vp-tariff { padding:24px 26px; } #vp-prices .vp-tariff__mark { display:none; } #vp-prices .vp-tariff__price { margin-top:18px; font-size:36px; } #vp-prices .vp-split { grid-template-columns:1fr; gap:30px; padding:30px 26px; } #vp-prices .vp-split__form { grid-template-columns:1fr 1fr; } #vp-prices .vp-split__field:first-child { grid-column:1 / -1; } } @media (max-width:780px) { #vp-prices { padding-top:48px; } #vp-prices .vp-prices__inner { width:calc(100% - 32px); } #vp-prices .vp-prices__lead { font-size:15px; } #vp-prices .vp-split { padding:24px 20px; } #vp-prices .vp-split h3 { font-size:24px; } #vp-prices .vp-split__copy { font-size:15px; } #vp-prices .vp-split__form { grid-template-columns:1fr; gap:16px; } #vp-prices .vp-split__tabs .vp-chip { flex:1 1 30%; min-height:48px; } #vp-prices .vp-split__stepper { height:48px; width:100%; justify-content:space-between; } #vp-prices .vp-split__sums { gap:26px; } #vp-prices .vp-split__sums b { font-size:28px; } #vp-prices .vp-split__cta { width:100%; min-height:50px; padding:0 20px; } }