/* packages — section styles (loaded from by build.py) */ #vp-packages, #vp-packages * { box-sizing:border-box; } #vp-packages { 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-packages .vp-packages__inner { width:var(--vp-page); margin:auto; } #vp-packages .vp-packages__top { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px 32px; margin-bottom:30px; } #vp-packages h2 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:36px; line-height:1.06; } #vp-packages .vp-packages__lead { max-width:520px; margin:0; color:color-mix(in srgb, var(--color-text) 72%, transparent); font-size:17px; line-height:1.55; } #vp-packages .vp-packages__grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } #vp-packages .vp-package { display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-lg); background:var(--color-surface); cursor:pointer; transition:box-shadow .18s ease; } #vp-packages .vp-package:hover { box-shadow:var(--shadow-md); } #vp-packages .vp-package__image { height:160px; background-position:center; background-size:cover; background-color:var(--color-neutral-300); filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); opacity:0; transition:opacity .3s ease; } #vp-packages .vp-package__image.is-loaded { opacity:1; } #vp-packages .vp-package__content { flex:1; display:flex; flex-direction:column; padding:22px 22px 24px; } #vp-packages .vp-package h3 { margin:0 0 8px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:20px; line-height:1.2; } #vp-packages .vp-package__text { flex:1; margin:0 0 18px; color:color-mix(in srgb, var(--color-text) 70%, transparent); font-size:14px; line-height:1.5; } #vp-packages .vp-package__bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } #vp-packages .vp-package__price { display:flex; align-items:baseline; gap:8px; margin:0; } #vp-packages .vp-package__price span { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:22px; } #vp-packages .vp-package__price s { color:color-mix(in srgb, var(--color-text) 45%, transparent); font-size:14px; } #vp-packages .vp-package__button { padding:9px 16px; font-size:13px; } #vp-packages .vp-packages__foot { margin:18px 0 0; color:color-mix(in srgb, var(--color-text) 55%, transparent); font-size:13px; line-height:1.6; } /* ------------------------------------------------------------- the sheet -- */ #vp-package-modal { position:fixed; inset:0; z-index:200; display:none; padding:32px; background:color-mix(in srgb, var(--color-neutral-900) 62%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:var(--font-body); } #vp-package-modal.is-open { display:grid; place-items:center; } #vp-package-modal .vp-package-modal__box { width:min(960px,100%); max-height:calc(100vh - 64px); overflow:auto; display:grid; grid-template-columns:.9fr 1.1fr; border-radius:var(--radius-lg); background:var(--color-bg); color:var(--color-text); box-shadow:var(--shadow-lg); } /* The popup sits outside #vp-packages, where the Tilda reset still says `box-sizing: content-box` — without this the full-width booking button is its padding wider than the column it lives in. */ #vp-package-modal, #vp-package-modal *, #vp-package-lightbox, #vp-package-lightbox * { box-sizing:border-box; } #vp-package-modal .vp-package-modal__photo { min-height:460px; position:relative; background-position:center; background-size:cover; background-color:var(--color-neutral-300); filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); } /* Only a mouse opens the picture full screen (assets/js/sections/packages.js). */ @media (hover:hover) and (pointer:fine) { #vp-package-modal .vp-package-modal__photo { cursor:zoom-in; } } #vp-package-modal .vp-package-modal__thumbs { position:absolute; inset:auto 16px 16px; display:flex; gap:8px; } #vp-package-modal .vp-package-modal__thumbs button { width:52px; height:40px; padding:0; border:2px solid transparent; border-radius:var(--radius-sm); background-position:center; background-size:cover; cursor:pointer; } #vp-package-modal .vp-package-modal__thumbs button.is-active { border-color:var(--color-bg); } #vp-package-modal .vp-package-modal__content { position:relative; padding:40px 42px 36px; display:flex; flex-direction:column; } #vp-package-modal .vp-package-modal__close { position:absolute; top:20px; right:20px; width:40px; height:40px; border:1px solid var(--color-divider); border-radius:50%; background:var(--color-bg); color:var(--color-text); font-size:22px; line-height:1; cursor:pointer; } #vp-package-modal .vp-package-modal__type { display:inline-flex; align-self:flex-start; margin:0 0 14px; padding:5px 12px; border-radius:999px; background:var(--color-accent-2-200); color:var(--color-accent-2-800); font-size:11px; font-weight:700; } #vp-package-modal h3 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:34px; line-height:1.06; } #vp-package-modal .vp-package-modal__intro { margin:14px 0 20px; color:color-mix(in srgb, var(--color-text) 76%, transparent); font-size:16px; line-height:1.6; } #vp-package-modal .vp-package-modal__includes-title { margin:0 0 10px; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-package-modal ul { margin:0; padding:0; list-style:none; } #vp-package-modal li { display:flex; align-items:flex-start; gap:10px; padding:5px 0; font-size:14px; line-height:1.5; } #vp-package-modal li:before { content:""; width:6px; height:6px; margin-top:7px; flex:none; border-radius:50%; background:var(--color-accent-2-600); } #vp-package-modal .vp-package-modal__note { margin:16px 0 0; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:13px; line-height:1.55; } #vp-package-modal .vp-package-modal__bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:auto; padding-top:22px; } #vp-package-modal .vp-package-modal__price { display:flex; align-items:baseline; gap:8px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:28px; } #vp-package-modal .vp-package-modal__old { color:color-mix(in srgb, var(--color-text) 45%, transparent); font-family:var(--font-body); font-size:15px; text-decoration:line-through; } #vp-package-modal .vp-package-modal__book { padding:14px 24px; } #vp-package-lightbox { position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:32px; background:color-mix(in srgb, var(--color-neutral-900) 88%, transparent); } #vp-package-lightbox.is-open { display:grid; } #vp-package-lightbox img { max-width:100%; max-height:calc(100vh - 64px); border-radius:var(--radius-md); } #vp-package-lightbox button { position:absolute; top:24px; right:24px; width:44px; height:44px; border:1px solid color-mix(in srgb, var(--color-neutral-100) 30%, transparent); border-radius:50%; background:transparent; color:var(--color-neutral-100); font-size:24px; line-height:1; cursor:pointer; } /* ---------------------------------------------------------------- narrow -- */ @media (max-width:1180px) { #vp-packages .vp-packages__grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:980px) { #vp-packages { padding-top:64px; } #vp-packages .vp-packages__grid { grid-template-columns:repeat(2,1fr); } #vp-package-modal { padding:0; } #vp-package-modal .vp-package-modal__box { grid-template-columns:1fr; max-height:100vh; height:100%; border-radius:0; align-content:start; } #vp-package-modal .vp-package-modal__photo { min-height:240px; } #vp-package-modal .vp-package-modal__content { padding:24px 20px calc(24px + env(safe-area-inset-bottom, 0px)); } #vp-package-modal h3 { font-size:28px; } /* The popup is the whole screen here and scrolls as one column, so the cross goes in the corner of the screen rather than riding the scroll. */ #vp-package-modal .vp-package-modal__close { position:fixed; z-index:2; top:calc(14px + env(safe-area-inset-top, 0px)); right:14px; width:44px; height:44px; border-color:transparent; background:color-mix(in srgb, var(--color-neutral-900) 62%, transparent); color:var(--color-neutral-100); } } @media (max-width:780px) { #vp-packages { padding-top:48px; } #vp-packages .vp-packages__inner { width:calc(100% - 32px); } #vp-packages h2 { font-size:26px; } #vp-packages .vp-packages__lead { font-size:15px; } #vp-packages .vp-packages__grid { grid-template-columns:1fr; gap:14px; } #vp-packages .vp-package { flex-direction:row; } #vp-packages .vp-package__image { width:120px; height:auto; flex:none; } #vp-packages .vp-package__content { padding:16px 18px 18px; } #vp-package-modal .vp-package-modal__book { width:100%; min-height:52px; } }