/* ========================================================================== Pakistan Bikers - site-wide design system Loaded on every page via layouts/header.blade.php and scoped to the `pb-site` class on . Anything reused across more than one page lives here; home-modern.css keeps only what is specific to the homepage. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..800&family=IBM+Plex+Mono:wght@500&family=IBM+Plex+Sans:wght@400;500;600&display=swap'); .pb-site { --pine: #16321a; --green: #2b602c; --lift: #3f8b41; --haze: #e7ece6; --snow: #f7faf6; --ink: #131a15; --moss: #5c6b5e; --line: #cdd6cb; --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --body: 'IBM Plex Sans', 'Barlow', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; } /* -------------------------------------------------------------------------- Masthead logo The markup carries an inline width:50%, which resolves against whatever column it lands in - roughly a 380px-tall logo once the row stacks. Height drives the size here instead, so it is correct on every page and breakpoint. -------------------------------------------------------------------------- */ .pb-site .nav-logo img, .pb-site .inner-logo img, .pb-site .footer-logo img { width: auto !important; height: auto; max-height: 74px; max-width: 210px; object-fit: contain; } .pb-site .footer-logo img { max-height: 58px; } @media (max-width: 991px) { .pb-site .nav-logo img, .pb-site .inner-logo img { max-height: 54px; max-width: 150px; } } @media (max-width: 767px) { .pb-site .nav-logo img, .pb-site .inner-logo img { max-height: 46px; max-width: 128px; } } /* -------------------------------------------------------------------------- Section heads, shared by the inner pages -------------------------------------------------------------------------- */ .pb-site .page-head { margin-bottom: clamp(20px, 2.4vw, 34px); } .pb-site .page-head h1, .pb-site .page-head h2 { font-family: var(--display); font-variation-settings: 'wdth' 112, 'wght' 700; font-weight: 700; font-size: clamp(1.75rem, 2.5vw, 2.7rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; } .pb-site .page-head h1::before, .pb-site .page-head h2::before { content: ''; display: block; width: 34px; height: 2px; background: var(--lift); margin-bottom: 14px; } .pb-site .page-head p { max-width: 70ch; color: var(--moss); font-size: 14.5px; line-height: 1.7; margin: 0; } /* -------------------------------------------------------------------------- Grid used by the tours listing -------------------------------------------------------------------------- */ .pb-site .tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } @media (max-width: 1100px) { .pb-site .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1199.98px) { .pb-site .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } } /* -------------------------------------------------------------------------- Tour cards Titles use the same readable, sentence-case treatment as the blog headings: these are place names people scan, not slogans. -------------------------------------------------------------------------- */ .pb-site .tour-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 28px rgba(19, 26, 21, .05); transition: transform .36s cubic-bezier(.22, .68, .28, 1), box-shadow .36s ease, border-color .36s ease; } .pb-site .tour-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(19, 26, 21, .14); border-color: #b4c4b3; } .pb-site .tour-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--haze); } .pb-site .tour-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .pb-site .tour-card:hover .tour-media img { transform: scale(1.06); } .pb-site .tour-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 14, 9, .62) 0%, rgba(8, 14, 9, .12) 34%, transparent 62%); } .pb-site .tour-duration, .pb-site .tour-flag { position: absolute; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-radius: 8px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 6px; } .pb-site .tour-duration { left: 12px; bottom: 12px; background: rgba(9, 15, 10, .72); color: #fff; backdrop-filter: blur(4px); } .pb-site .tour-flag { right: 12px; top: 12px; background: var(--lift); color: #fff; } .pb-site .tour-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; } .pb-site .tour-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); } .pb-site .tour-chip { background: #e7f0e6; color: #1f4a20; border-radius: 20px; padding: 3px 9px; white-space: nowrap; } .pb-site .tour-title { font-family: var(--display); font-variation-settings: 'wdth' 100, 'wght' 600; font-weight: 600; font-size: clamp(1.05rem, 1.25vw, 1.28rem); line-height: 1.26; letter-spacing: -.014em; text-transform: none; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pb-site .tour-title a { color: var(--ink); transition: color .25s ease; } .pb-site .tour-title a:hover { color: var(--green); } /* Price and CTA sit on the card's bottom edge so a row of cards lines up */ .pb-site .tour-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pb-site .tour-price { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pb-site .tour-price-label, .pb-site .tour-price-unit { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); } .pb-site .tour-price-row { display: flex; align-items: baseline; gap: 7px; } .pb-site .tour-price-value { font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 700; font-weight: 700; font-size: 1.42rem; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); } .pb-site .tour-price-value.is-sale { color: var(--green); } .pb-site .tour-price-was { font-family: var(--mono); font-size: 11px; color: var(--moss); opacity: .85; } .pb-site .tour-cta { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding-bottom: 2px; } .pb-site .tour-cta span { transition: transform .3s ease; } .pb-site .tour-card:hover .tour-cta span { transform: translateX(4px); } /* -------------------------------------------------------------------------- Inner page shell -------------------------------------------------------------------------- */ .pb-site .pb-page { background: var(--snow); padding-top: clamp(34px, 3.6vw, 62px); padding-bottom: clamp(38px, 4vw, 74px); font-family: var(--body); } .pb-site .pb-empty { grid-column: 1 / -1; text-align: center; color: var(--moss); padding: 38px 0; margin: 0; } .pb-site .pb-pagination { margin-top: clamp(28px, 3vw, 46px); } .pb-site .pb-pagination .page-link { font-family: var(--mono); font-size: 12px; border-radius: 8px !important; border-color: var(--line); color: var(--ink); margin: 0 3px; } .pb-site .pb-pagination .page-item.active .page-link { background: var(--green); border-color: var(--green); color: #fff; } .pb-site .pb-pagination .page-item.disabled .page-link { opacity: .5; } /* ========================================================================== Road journal - listing ========================================================================== */ .pb-site .journal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--line); } .pb-site .journal-cats { display: flex; flex-wrap: wrap; gap: 7px; } .pb-site .journal-cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px; display: inline-flex; align-items: center; gap: 7px; transition: background .22s ease, color .22s ease, border-color .22s ease; } .pb-site .journal-cat span { font-size: 9.5px; opacity: .7; } .pb-site .journal-cat:hover { border-color: var(--green); color: var(--green); } .pb-site .journal-cat.is-active { background: var(--green); border-color: var(--green); color: #fff; } .pb-site .journal-search { position: relative; flex: 0 1 280px; } .pb-site .journal-search input { width: 100%; font-family: var(--body); font-size: 13.5px; padding: 10px 40px 10px 15px; border: 1px solid var(--line); border-radius: 22px; background: #fff; color: var(--ink); } .pb-site .journal-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(43, 96, 44, .12); } .pb-site .journal-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 13px; } .pb-site .journal-result { font-size: 13.5px; color: var(--moss); margin: -8px 0 20px; } /* --- Lead article --- */ .pb-site .journal-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 18px; min-height: 320px; transition: transform .34s cubic-bezier(.22,.68,.28,1), box-shadow .34s ease, border-color .34s ease; } .pb-site .journal-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(19,26,21,.13); border-color: #b4c4b3; } .pb-site .journal-feature-media { display: block; overflow: hidden; background: var(--haze); } .pb-site .journal-feature-media img, .pb-site .journal-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .pb-site .journal-feature:hover .journal-feature-media img, .pb-site .journal-card:hover .journal-card-media img { transform: scale(1.05); } .pb-site .journal-feature-body { padding: clamp(18px, 1.8vw, 30px); display: flex; flex-direction: column; } .pb-site .journal-feature-title { font-family: var(--display); font-variation-settings: 'wdth' 100, 'wght' 600; font-weight: 600; font-size: clamp(1.3rem, 1.8vw, 1.85rem); line-height: 1.2; letter-spacing: -.016em; margin: 0 0 12px; } .pb-site .journal-feature-title a { color: var(--ink); transition: color .25s ease; } .pb-site .journal-feature-title a:hover { color: var(--green); } .pb-site .journal-feature-excerpt { font-size: 14.5px; line-height: 1.7; color: var(--moss); margin: 0 0 16px; } /* --- Grid --- */ .pb-site .journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .pb-site .journal-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .34s cubic-bezier(.22,.68,.28,1), box-shadow .34s ease, border-color .34s ease; } .pb-site .journal-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(19,26,21,.12); border-color: #b4c4b3; } .pb-site .journal-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--haze); } .pb-site .journal-card-body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1 1 auto; } .pb-site .journal-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--moss); } .pb-site .journal-chip { background: #e7f0e6; color: #1f4a20; border-radius: 20px; padding: 3px 9px; transition: background .22s ease; } .pb-site .journal-chip:hover { background: #d6e7d5; color: #1f4a20; } .pb-site .journal-chip.is-solid { background: var(--green); color: #fff; } .pb-site .journal-title { font-family: var(--display); font-variation-settings: 'wdth' 100, 'wght' 600; font-weight: 600; font-size: 1.08rem; line-height: 1.28; letter-spacing: -.012em; margin: 0 0 9px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pb-site .journal-title a { color: var(--ink); transition: color .25s ease; } .pb-site .journal-title a:hover { color: var(--green); } .pb-site .journal-excerpt { font-size: 13px; line-height: 1.65; color: var(--moss); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pb-site .journal-card-foot { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); } .pb-site .journal-more { color: var(--green); white-space: nowrap; } .pb-site .journal-more span { display: inline-block; transition: transform .3s ease; } .pb-site .journal-card:hover .journal-more span, .pb-site .journal-feature:hover .journal-more span { transform: translateX(4px); } @media (max-width: 1100px) { .pb-site .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-site .journal-feature { grid-template-columns: minmax(0, 1fr); min-height: 0; } .pb-site .journal-feature-media { aspect-ratio: 16 / 9; } } @media (max-width: 700px) { .pb-site .journal-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pb-site .journal-search { flex: 1 1 100%; } } /* ========================================================================== Article - the reading page Measure is the whole job here: about 68 characters, generous leading, and prose styles that cover whatever HTML the editor produces. ========================================================================== */ .pb-site .article-head { max-width: 46rem; margin: 0 auto clamp(20px, 2.4vw, 32px); text-align: center; } .pb-site .article-crumbs { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); margin: 0 0 14px; display: flex; justify-content: center; gap: 8px; } .pb-site .article-crumbs a { color: var(--green); } .pb-site .article-title { font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 700; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1.14; letter-spacing: -.022em; color: var(--ink); margin: 0 0 16px; } .pb-site .article-byline { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 0; } .pb-site .article-hero { margin: 0 0 clamp(26px, 3vw, 44px); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); } .pb-site .article-hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; } .pb-site .article-shell { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(26px, 3vw, 52px); align-items: start; } /* --- Prose: styles the editor output, not fixed classes --- */ .pb-site .prose { font-family: var(--body); font-size: 16px; line-height: 1.78; color: #33403a; max-width: 68ch; } .pb-site .prose > *:first-child { margin-top: 0; } .pb-site .prose p { margin: 0 0 1.15em; } .pb-site .prose h1, .pb-site .prose h2, .pb-site .prose h3, .pb-site .prose h4 { font-family: var(--display); font-variation-settings: 'wdth' 100, 'wght' 600; font-weight: 600; color: var(--ink); line-height: 1.25; letter-spacing: -.014em; margin: 1.9em 0 .6em; } .pb-site .prose h1, .pb-site .prose h2 { font-size: 1.5rem; } .pb-site .prose h3 { font-size: 1.24rem; } .pb-site .prose h4 { font-size: 1.08rem; } .pb-site .prose a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; } .pb-site .prose strong { color: var(--ink); font-weight: 600; } .pb-site .prose ul, .pb-site .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; } .pb-site .prose li { margin-bottom: .5em; } .pb-site .prose li::marker { color: var(--lift); } .pb-site .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--lift); color: var(--ink); font-size: 1.06rem; line-height: 1.65; } .pb-site .prose img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); margin: 1.5em 0; } .pb-site .prose figure { margin: 1.5em 0; } .pb-site .prose figcaption { font-size: 12.5px; color: var(--moss); text-align: center; margin-top: 8px; } .pb-site .prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; } .pb-site .prose th, .pb-site .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; } .pb-site .prose th { background: var(--haze); font-weight: 600; } .pb-site .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } /* --- Sidebar --- */ .pb-site .article-aside { position: sticky; top: 160px; display: flex; flex-direction: column; gap: 16px; } .pb-site .aside-block { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; } .pb-site .aside-title { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 14px; } .pb-site .aside-cats { list-style: none; margin: 0; padding: 0; } .pb-site .aside-cats a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line); transition: color .22s ease; } .pb-site .aside-cats li:last-child a { border-bottom: 0; } .pb-site .aside-cats a:hover, .pb-site .aside-cats a.is-active { color: var(--green); } .pb-site .aside-cats a span { font-family: var(--mono); font-size: 11px; color: var(--moss); } .pb-site .aside-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .pb-site .aside-posts a { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 11px; align-items: center; } .pb-site .aside-thumb { display: block; aspect-ratio: 1 / 1; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); } .pb-site .aside-thumb img { width: 100%; height: 100%; object-fit: cover; } .pb-site .aside-post-title { display: block; font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--ink); transition: color .22s ease; } .pb-site .aside-posts a:hover .aside-post-title { color: var(--green); } .pb-site .aside-post-body time { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--moss); display: block; margin-top: 4px; } .pb-site .aside-cta { background: var(--pine); border-color: var(--pine); } .pb-site .aside-cta .aside-title { color: #9fc79d; } .pb-site .aside-cta p { color: #c2d3c1; font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; } .pb-site .aside-btn { display: block; text-align: center; background: var(--lift); color: #fff; border-radius: 8px; padding: 11px 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; transition: background .24s ease; } .pb-site .aside-btn:hover { background: #4c9c4e; color: #fff; } /* --- Prev / next --- */ .pb-site .article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(30px, 3.4vw, 54px); padding-top: clamp(22px, 2.4vw, 34px); border-top: 1px solid var(--line); } .pb-site .article-nav-link { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; display: flex; flex-direction: column; gap: 6px; transition: border-color .26s ease, transform .26s ease, box-shadow .26s ease; } .pb-site .article-nav-link:hover { border-color: #b4c4b3; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(19, 26, 21, .1); } .pb-site .article-nav-link.is-next { text-align: right; } .pb-site .article-nav-label { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--green); } .pb-site .article-nav-title { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); } @media (max-width: 991px) { .pb-site .article-shell { grid-template-columns: minmax(0, 1fr); } .pb-site .article-aside { position: static; } .pb-site .prose { max-width: none; } } @media (max-width: 640px) { .pb-site .article-nav { grid-template-columns: minmax(0, 1fr); } .pb-site .article-nav-link.is-next { text-align: left; } } /* ========================================================================== FAQ page ========================================================================== */ .pb-site .faq-search { position: relative; max-width: 420px; margin-bottom: 18px; } .pb-site .faq-search input { width: 100%; font-family: var(--body); font-size: 14px; padding: 11px 44px 11px 16px; border: 1px solid var(--line); border-radius: 24px; background: #fff; color: var(--ink); } .pb-site .faq-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(43, 96, 44, .12); } .pb-site .faq-search button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; } .pb-site .faq-result { font-size: 13.5px; color: var(--moss); margin: 0 0 20px; } .pb-site .faq-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; } /* --- Jump list --- */ .pb-site .faq-nav { position: sticky; top: 160px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .pb-site .faq-nav-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 12px; } .pb-site .faq-nav ul { list-style: none; margin: 0; padding: 0; } .pb-site .faq-nav a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line); transition: color .22s ease; } .pb-site .faq-nav li:last-child a { border-bottom: 0; } .pb-site .faq-nav a:hover { color: var(--green); } .pb-site .faq-nav a span { font-family: var(--mono); font-size: 11px; color: var(--moss); } /* --- Groups --- */ .pb-site .faq-groups { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 42px); } .pb-site .faq-group { scroll-margin-top: 170px; } .pb-site .faq-group-title { font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 700; font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.45rem); letter-spacing: -.018em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; } .pb-site .faq-group-title span { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--moss); text-transform: none; } .pb-site .faq-page .accordion-item { background: #fff; border: 1px solid var(--line); border-radius: 12px !important; margin-bottom: 9px; overflow: hidden; } /* style.css targets this at .accordion-item.faq-accordion .accordion-header .accordion-button (0,4,0) with a dark navy fill, so these rules have to match that depth to win. */ .pb-site .faq-page .accordion-item.faq-accordion .accordion-header .accordion-button { background: #fff; color: var(--ink); border-radius: 12px; font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.4; padding: 15px 18px; box-shadow: none; border: 0; } .pb-site .faq-page .accordion-item.faq-accordion .accordion-header .accordion-button:not(.collapsed) { background: var(--haze); color: var(--green); border-radius: 12px 12px 0 0; } .pb-site .faq-page .accordion-item.faq-accordion .accordion-header .accordion-button:focus { box-shadow: 0 0 0 3px rgba(43, 96, 44, .12); z-index: 2; } /* The legacy rule swaps in a white chevron for the dark bar; on a light bar it has to be the default dark one again. */ .pb-site .faq-page .accordion-item.faq-accordion .accordion-header .accordion-button::after { width: 15px; height: 15px; background-size: 15px; filter: none; } .pb-site .faq-page .accordion-body { padding: 4px 18px 18px; font-size: 14.5px; line-height: 1.72; color: #46554a; } .pb-site .faq-page .accordion-body p:last-child { margin-bottom: 0; } @media (max-width: 991px) { .pb-site .faq-shell { grid-template-columns: minmax(0, 1fr); } .pb-site .faq-nav { position: static; } .pb-site .faq-nav ul { display: flex; flex-wrap: wrap; gap: 7px; } .pb-site .faq-nav a { border-bottom: 0; border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; font-size: 12.5px; } } /* ========================================================================== Page blocks - admin-managed body sections ========================================================================== */ .pb-site .pb-block { padding-block: clamp(34px, 3.6vw, 62px); font-family: var(--body); } .pb-site .pb-block:nth-child(odd) { background: var(--snow); } .pb-site .pb-block:nth-child(even) { background: var(--haze); } .pb-site .pb-block-title { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-weight: 700; font-size: clamp(1.4rem, 2.1vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; } .pb-site .pb-block-inner { max-width: 74ch; } .pb-site .pb-block-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--green); border-radius: 8px; padding: 12px 22px; transition: background .24s ease, transform .24s ease; } .pb-site .pb-block-btn:hover { background: var(--lift); color: #fff; transform: translateY(-2px); } .pb-site .pb-block-btn span { transition: transform .28s ease; } .pb-site .pb-block-btn:hover span { transform: translateX(4px); } /* --- Image + text --- */ .pb-site .pb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 52px); align-items: center; } .pb-site .pb-block-split.is-flipped .pb-split-media { order: 2; } .pb-site .pb-split-media { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); } .pb-site .pb-split-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; } /* --- Call to action --- */ .pb-site .pb-block-cta { background: var(--pine) !important; } .pb-site .pb-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 44px); flex-wrap: wrap; } .pb-site .pb-cta-title { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-weight: 700; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: #fff; margin: 0 0 8px; } .pb-site .pb-cta-body { color: #c2d3c1; font-size: 14.5px; line-height: 1.7; max-width: 62ch; } .pb-site .pb-cta-body p:last-child { margin-bottom: 0; } .pb-site .pb-cta-btn { flex: none; background: var(--lift); color: #fff; border-radius: 8px; padding: 14px 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: background .24s ease, transform .24s ease; } .pb-site .pb-cta-btn:hover { background: #4c9c4e; color: #fff; transform: translateY(-2px); } /* --- Gallery --- */ .pb-site .pb-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pb-site .pb-gallery-item { margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); } .pb-site .pb-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .pb-site .pb-gallery-item:hover img { transform: scale(1.05); } @media (max-width: 991px) { .pb-site .pb-split { grid-template-columns: minmax(0, 1fr); } .pb-site .pb-block-split.is-flipped .pb-split-media { order: 0; } .pb-site .pb-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .pb-site .pb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-site .pb-cta-btn { width: 100%; text-align: center; } } /* -------------------------------------------------------------------------- FAQ block on other pages Same light accordion as the FAQ page. The old dark treatment came from .faq-wrapper in home-modern.css plus style.css targeting the button at (0,4,0); this block uses its own wrapper so neither applies. -------------------------------------------------------------------------- */ .pb-site .pb-block-faq { background: var(--snow); } .pb-site .pb-block-faq .page-head { margin-bottom: clamp(18px, 2vw, 26px); } /* Centred column: the block sits mid-page rather than hugging the left edge. */ .pb-site .pb-block-faq .page-head, .pb-site .faq-block-list { max-width: 900px; margin-inline: auto; } .pb-site .pb-block-faq .page-head h2 { max-width: none; } .pb-site .faq-block-more { margin: 18px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; } .pb-site .faq-block-more a { color: var(--green); display: inline-flex; align-items: center; gap: 7px; } .pb-site .faq-block-more a span { transition: transform .28s ease; } .pb-site .faq-block-more a:hover span { transform: translateX(4px); } /* ========================================================================== Footer Deep pine to close the page, with the closing call to action raised onto the seam so the footer reads as a destination rather than an afterthought. ========================================================================== */ .pb-site .pb-footer { background: #0f2412; color: #c2d3c1; font-family: var(--body); font-size: 14px; line-height: 1.7; } /* --- Closing call to action --- */ .pb-site .pb-footer-cta { background: var(--pine); border-bottom: 1px solid rgba(247, 250, 246, .08); } .pb-site .pb-footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 46px); flex-wrap: wrap; padding-block: clamp(28px, 3.2vw, 48px); } .pb-site .pb-footer-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #8fbb8d; margin: 0 0 8px; } .pb-site .pb-footer-cta-title { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2.3rem); line-height: 1.08; letter-spacing: -.022em; text-transform: uppercase; color: #fff; margin: 0; } .pb-site .pb-footer-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; } .pb-site .pb-footer-btn { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 26px; border-radius: 8px; background: var(--lift); color: #fff; border: 1px solid var(--lift); white-space: nowrap; transition: background .24s ease, border-color .24s ease, transform .24s ease; } .pb-site .pb-footer-btn:hover { background: #4c9c4e; border-color: #4c9c4e; color: #fff; transform: translateY(-2px); } .pb-site .pb-footer-btn.is-quiet { background: transparent; border-color: rgba(247, 250, 246, .3); color: #e4ede3; } .pb-site .pb-footer-btn.is-quiet:hover { background: rgba(247, 250, 246, .08); border-color: #e4ede3; color: #fff; } /* --- Main --- */ .pb-site .pb-footer-main { padding-block: clamp(34px, 4vw, 62px); } .pb-site .pb-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } .pb-site .pb-footer-logo { display: inline-block; margin-bottom: 16px; } .pb-site .pb-footer-logo img { width: auto !important; height: auto; max-height: 74px; max-width: 190px; object-fit: contain; } .pb-site .pb-footer-about { margin: 0 0 20px; max-width: 42ch; color: #b3c6b2; } .pb-site .pb-footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 9px; } .pb-site .pb-footer-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(247, 250, 246, .22); color: #d5e3d4; font-size: 14px; transition: background .24s ease, border-color .24s ease, color .24s ease, transform .24s ease; } .pb-site .pb-footer-social a:hover { background: var(--lift); border-color: var(--lift); color: #fff; transform: translateY(-2px); } /* Column headings share the mono label used across the site */ .pb-site .pb-footer-title { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8fbb8d; margin: 0 0 16px; } .pb-site .pb-footer-links, .pb-site .pb-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .pb-site .pb-footer-links a { color: #c2d3c1; position: relative; transition: color .22s ease, padding-left .22s ease; } .pb-site .pb-footer-links a::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--lift); transform: translateY(-50%); transition: width .24s ease; } .pb-site .pb-footer-links a:hover { color: #fff; padding-left: 16px; } .pb-site .pb-footer-links a:hover::before { width: 10px; } .pb-site .pb-footer-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; } .pb-site .pb-footer-contact i { color: var(--lift); font-size: 14px; line-height: 1.6; } .pb-site .pb-footer-contact a { color: #c2d3c1; transition: color .22s ease; } .pb-site .pb-footer-contact a:hover { color: #fff; } .pb-site .pb-footer-partner { display: inline-block; background: #fff; border-radius: 10px; padding: 12px 16px; transition: transform .24s ease; } .pb-site .pb-footer-partner:hover { transform: translateY(-2px); } .pb-site .pb-footer-partner img { max-width: 160px; height: auto; display: block; } /* --- Bottom bar --- */ .pb-site .pb-footer-bar { border-top: 1px solid rgba(247, 250, 246, .08); } .pb-site .pb-footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 20px; } .pb-site .pb-footer-copy { margin: 0; font-size: 13px; color: #93a892; } .pb-site .pb-footer-copy a { color: #c2d3c1; transition: color .22s ease; } .pb-site .pb-footer-copy a:hover { color: #fff; } /* The site name carries the weight; the credit sits quieter beside it. */ .pb-site .pb-footer-copy-brand { font-weight: 600; color: #d5e3d4 !important; } .pb-site .pb-footer-credit { display: inline-block; margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(247, 250, 246, .18); color: #7f947e; } @media (max-width: 640px) { .pb-site .pb-footer-credit { display: block; margin: 6px 0 0; padding-left: 0; border-left: 0; } } .pb-site .pb-footer-policy { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; } .pb-site .pb-footer-policy a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #93a892; transition: color .22s ease; } .pb-site .pb-footer-policy a:hover { color: #fff; } @media (max-width: 991px) { .pb-site .pb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .pb-site .pb-footer-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .pb-site .pb-footer-grid { grid-template-columns: minmax(0, 1fr); } .pb-site .pb-footer-cta-inner { flex-direction: column; align-items: flex-start; } .pb-site .pb-footer-cta-actions { width: 100%; } .pb-site .pb-footer-btn { flex: 1 1 auto; text-align: center; } .pb-site .pb-footer-bar-inner { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Rentals - the fleet ========================================================================== */ .pb-site .fleet-assurances { list-style: none; margin: 0 0 clamp(22px, 2.6vw, 34px); padding: 14px 0; border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 44px); } .pb-site .fleet-assurances li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); } .pb-site .fleet-assurances i { color: var(--lift); font-size: 14px; } /* --- Bike cards --- */ .pb-site .fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .pb-site .fleet-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .34s cubic-bezier(.22, .68, .28, 1), box-shadow .34s ease, border-color .34s ease; } .pb-site .fleet-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(19, 26, 21, .14); border-color: #b4c4b3; } .pb-site .fleet-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--haze); } .pb-site .fleet-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .pb-site .fleet-card:hover .fleet-media img { transform: scale(1.06); } .pb-site .fleet-type { position: absolute; left: 12px; top: 12px; background: rgba(9, 15, 10, .74); color: #fff; border-radius: 8px; padding: 6px 11px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(4px); } .pb-site .fleet-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; } .pb-site .fleet-brand { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 6px; } .pb-site .fleet-name { font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 600; font-weight: 600; font-size: clamp(1.1rem, 1.35vw, 1.32rem); line-height: 1.2; letter-spacing: -.014em; color: var(--ink); margin: 0 0 14px; } /* Specs read as a data table, so riders can compare bikes at a glance */ .pb-site .fleet-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0 0 16px; padding: 14px 0 0; border-top: 1px solid var(--line); } .pb-site .fleet-specs dt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); font-weight: 500; display: flex; align-items: center; gap: 5px; margin-bottom: 2px; } .pb-site .fleet-specs dt i { color: var(--lift); font-size: 11px; } .pb-site .fleet-specs dd { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); } .pb-site .fleet-btn { margin-top: auto; width: 100%; border: 0; border-radius: 8px; background: var(--green); color: #fff; padding: 13px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: background .24s ease, transform .24s ease; } .pb-site .fleet-btn:hover { background: var(--lift); color: #fff; transform: translateY(-2px); } /* --- How it works --- */ .pb-site .fleet-how { background: var(--haze); } .pb-site .fleet-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); counter-reset: step; } .pb-site .fleet-steps li { padding-top: 18px; border-top: 2px solid var(--lift); } .pb-site .fleet-step-no { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--lift); margin-bottom: 10px; } .pb-site .fleet-steps h3 { font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 600; font-weight: 600; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); margin: 0 0 8px; } .pb-site .fleet-steps p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--moss); } /* --- Support services --- */ .pb-site .fleet-services { background: var(--snow); } .pb-site .fleet-services-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(22px, 3vw, 54px); align-items: center; } .pb-site .fleet-services-inner p { color: var(--moss); font-size: 14.5px; line-height: 1.7; margin: 0; max-width: 46ch; } .pb-site .fleet-service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } .pb-site .fleet-service-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .pb-site .fleet-service-list i { color: var(--lift); font-size: 15px; flex: none; } @media (max-width: 1100px) { .pb-site .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .pb-site .fleet-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pb-site .fleet-services-inner { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .pb-site .fleet-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .pb-site .fleet-service-list { grid-template-columns: minmax(0, 1fr); } .pb-site .fleet-assurances { gap: 10px 20px; } } /* ========================================================================== Touch targets and small-screen legibility The audit found tap targets down to 19px and label text at 10.5px. Pointer targets get a comfortable minimum on touch screens, and the smallest labels come up a step on narrow viewports where they are hardest to read. ========================================================================== */ /* Real tap targets on phones. Gated on viewport width rather than (pointer: coarse): a laptop with a touchscreen reports coarse and would get phone-sized controls it does not need, and some emulators report fine on genuinely touch-only devices. */ @media (max-width: 767px) { .pb-site .hamburger { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Phone and email in the top bar and footer are destinations, not prose links, so they get a target rather than the inline-link exemption. */ .pb-site .contact-box-inner a, .pb-site .pb-footer-contact a, .pb-site .pb-footer-links a { display: inline-flex; align-items: center; min-height: 40px; } .pb-site .pb-footer-contact li, .pb-site .pb-footer-links li { min-height: 40px; } .pb-site .topbar-social-links a, .pb-site .pb-footer-social a { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } .pb-site .pb-footer-policy a { display: inline-flex; align-items: center; min-height: 40px; } .pb-site .pb-footer-copy { font-size: 13.5px; } } /* The logo inside the mobile slide-out menu. It previously carried an inline width:50%, which left a 19px-tall link, and an empty alt, which left the link with no accessible name. */ .pb-site .inner-logo-link { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 6px 4px; } .pb-site .inner-logo-link img { width: auto; height: auto; max-height: 52px; max-width: 160px; object-fit: contain; } /* Guard the partner link against a slow or broken remote logo collapsing it */ .pb-site .pb-footer-partner { min-height: 44px; min-width: 88px; } /* Bootstrap steps .container in jumps (540px, 720px, 960px), so a 767px phone in landscape renders a 540px column with 113px of dead gutter either side. Below the desktop breakpoint the column is fluid instead, with padding that grows on its own. */ @media (min-width: 576px) and (max-width: 991.98px) { .pb-site .container { max-width: none; width: 100%; padding-inline: clamp(20px, 3.6vw, 42px); } } /* Wide screens: stop the content stretching to the full window width */ @media (min-width: 1600px) { .pb-site .container, .pb-site .container-fluid.dest-shell { max-width: 1440px; } } /* -------------------------------------------------------------------------- Label legibility and remaining touch targets The mono label scale bottomed out at 9.5px on the journal and FAQ screens, which is below comfortable reading even on a desktop. 11px is the floor. -------------------------------------------------------------------------- */ .pb-site .journal-chip, .pb-site .journal-more, .pb-site .journal-card-foot time, .pb-site .journal-meta time, .pb-site .journal-meta span, .pb-site .journal-cat, .pb-site .faq-nav-title { font-size: 11px; } .pb-site .journal-cat { font-size: 11.5px; } @media (max-width: 1199.98px) { /* Contact page: the address block and social row are the primary actions on this screen, so they get full-size targets rather than text-height. */ .pb-site .contact-info ul li a { display: inline-flex; align-items: center; min-height: 40px; } .pb-site .guide-social-links a { min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } /* Blog: category pills and the top-bar contact row */ .pb-site .journal-cat { min-height: 40px; display: inline-flex; align-items: center; } } /* The count badge on a category pill and the byline both sat under 11px */ .pb-site .journal-cat span { font-size: 11px; } .pb-site .journal-card-foot span { font-size: 11px; } /* The meta and footer rows on a journal card set the size their children inherit from; leaving the container at 10px kept it below the floor even after the children were lifted. */ .pb-site .journal-meta, .pb-site .journal-card-foot { font-size: 11px; } @media (max-width: 1199.98px) { .pb-site .journal-chip { min-height: 40px; display: inline-flex; align-items: center; } } /* A single-line card title link was only 19px tall, under the 24px minimum target size, even though it spanned most of the card's width. */ .pb-site .journal-title a, .pb-site .blog-title a { display: inline-block; min-height: 24px; } /* Tour card label scale: several mono labels sat at 9.5-10.5px, below the 11px floor used across the rest of the site. */ .pb-site .tour-duration, .pb-site .tour-flag, .pb-site .tour-chip, .pb-site .tour-meta-item, .pb-site .tour-price-label, .pb-site .tour-price-unit, .pb-site .tour-cta, .pb-site .tour-meta { font-size: 11px; } @media (max-width: 1199.98px) { /* The itinerary link is the card's primary action on a phone */ .pb-site .tour-cta { min-height: 40px; display: inline-flex; align-items: center; } } /* Remaining label and target fixes surfaced by the responsive audit */ .pb-site .pb-hero-kicker { font-size: 11px; } .pb-site .pb-btn { font-size: 11px; } .pb-site .tour-title a { display: inline-block; min-height: 24px; } @media (max-width: 1199.98px) { .pb-site .pb-route-station { min-height: 40px; } } /* -------------------------------------------------------------------------- Next departure on a tour card The card named the kind of departure ("Fixed departure") but never the date. It sits between the meta row and the title, where a rider looks first. -------------------------------------------------------------------------- */ .pb-site .tour-departs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-family: var(--mono); font-size: 11px; color: var(--ink); } .pb-site .tour-departs i { color: var(--lift); font-size: 13px; } .pb-site .tour-departs-label { letter-spacing: .12em; text-transform: uppercase; color: var(--moss); } .pb-site .tour-departs time { font-weight: 600; color: var(--pine); } .pb-site .tour-departs-more { padding: 2px 7px; border-radius: 999px; background: var(--haze); color: var(--moss); font-size: 10.5px; } /* ========================================================================== Tour detail The page opened on a generic banner over a stock photo and repeated the title, price and image below it. It now opens on the tour itself. ========================================================================== */ .pb-site .tour-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 52vh, 560px); padding-block: clamp(32px, 5vw, 64px); overflow: hidden; background: var(--pine); } .pb-site .tour-hero-media { position: absolute; inset: 0; } .pb-site .tour-hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Dark at the foot, clear at the head, so the type stays readable over any photograph without flattening the picture itself. */ .pb-site .tour-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 15, 10, .92) 0%, rgba(9, 15, 10, .62) 42%, rgba(9, 15, 10, .28) 100%); } .pb-site .tour-hero .container { position: relative; z-index: 1; } .pb-site .tour-hero-inner { max-width: 52rem; } .pb-site .tour-hero-crumbs ol { list-style: none; margin: 0 0 clamp(14px, 2vw, 24px); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(231, 236, 230, .72); } .pb-site .tour-hero-crumbs li + li::before { content: '/'; margin-right: 8px; color: rgba(231, 236, 230, .45); } .pb-site .tour-hero-crumbs a { color: rgba(231, 236, 230, .82); } .pb-site .tour-hero-crumbs a:hover { color: #fff; } /* --- Hero badges: the two facts that decide a booking --- */ .pb-site .tour-hero-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; } .pb-site .tour-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .pb-site .tour-badge i { font-size: 13px; } /* A fixed departure is a commitment: solid, confident. */ .pb-site .tour-badge.is-fixed { background: rgba(247, 250, 246, .16); border: 1px solid rgba(247, 250, 246, .38); color: #fff; backdrop-filter: blur(6px); } .pb-site .tour-badge.is-season { background: rgba(247, 250, 246, .1); border: 1px solid rgba(247, 250, 246, .28); color: #e7ece6; backdrop-filter: blur(6px); } /* The offer is the one thing on the page with a deadline, so it is the one thing allowed to be loud. */ .pb-site .tour-badge.is-early { background: #f4b942; border: 1px solid #f4b942; color: #23180a; font-weight: 600; box-shadow: 0 6px 20px rgba(244, 185, 66, .34); } .pb-site .tour-hero-route { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(231, 236, 230, .74); } .pb-site .tour-hero-title { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-weight: 700; text-transform: none; font-size: clamp(1.75rem, 3.6vw, 2.85rem); line-height: 1.04; letter-spacing: -.022em; color: #fff; margin: 0 0 clamp(16px, 2vw, 24px); text-wrap: balance; } .pb-site .tour-hero-facts { list-style: none; margin: 0 0 clamp(20px, 2.6vw, 30px); padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: 12px; color: #e2ebe1; } .pb-site .tour-hero-facts li { display: inline-flex; align-items: center; gap: 8px; } .pb-site .tour-hero-facts i { color: #7bbd79; font-size: 14px; } .pb-site .tour-hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 3vw, 34px); } .pb-site .tour-hero-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; } .pb-site .tour-hero-price-label, .pb-site .tour-hero-price-unit { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(231, 236, 230, .7); } .pb-site .tour-hero-price-value { font-family: var(--display); font-variation-settings: 'wdth' 100, 'wght' 700; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1; color: #fff; } .pb-site .tour-hero-price-was { font-family: var(--mono); font-size: 13px; color: rgba(231, 236, 230, .55); } .pb-site .tour-hero-book { display: inline-flex; align-items: center; gap: 9px; padding: 15px 28px; border-radius: 9px; background: var(--lift); color: #fff; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; transition: background .24s ease, transform .24s ease; } .pb-site .tour-hero-book:hover { background: #4c9c4e; color: #fff; transform: translateY(-2px); } .pb-site .tour-hero-offer { margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: rgba(231, 236, 230, .78); } .pb-site .tour-hero-offer strong { color: #f4b942; font-weight: 600; } /* --- Facts rail and departure dates --- */ .pb-site .tour-brief { margin-bottom: clamp(24px, 3vw, 38px); } .pb-site .tour-brief-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 clamp(20px, 2.4vw, 30px); background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .pb-site .tour-brief-facts > div { background: #fff; padding: 16px 18px; } .pb-site .tour-brief-facts dt { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); margin-bottom: 7px; } .pb-site .tour-brief-facts dt i { color: var(--lift); font-size: 13px; } .pb-site .tour-brief-facts dd { margin: 0; font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 600; font-weight: 600; font-size: 1.02rem; line-height: 1.25; color: var(--ink); } .pb-site .tour-dates-title { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 12px; } .pb-site .tour-dates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; } /* Brand chips. These were Bootstrap's blue badge, the one primary colour that appears nowhere else on the site. */ .pb-site .tour-dates-list li { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--snow); font-family: var(--mono); font-size: 12px; color: var(--pine); } .pb-site .tour-dates-list li.is-past { color: var(--moss); background: transparent; text-decoration: line-through; text-decoration-color: var(--line); } .pb-site .tour-dates-note { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); text-decoration: none; } /* --- Sticky booking column --- */ @media (min-width: 992px) { .pb-site .tour-sidebar { position: sticky; /* Clears the fixed site header */ top: 100px; } } /* -------------------------------------------------------------------------- Itinerary style.css builds each day as a 75px numbered disc inside an 80px pill with 40px between items, so eleven days ran to roughly 1,250px of mostly empty space. Rebuilt as a timeline at the same selector depth, which is what the legacy rules use, rather than reaching for !important. -------------------------------------------------------------------------- */ .pb-site .tour-package-details .package-plan-tab .plans-accordion { position: relative; padding-left: 4px; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single { position: relative; margin-top: 0; border: 0; border-bottom: 1px solid var(--line); } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single:last-child { border-bottom: 0; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button { display: flex; align-items: center; gap: 16px; padding: 16px 44px 16px 0; border-radius: 0; background: transparent; box-shadow: none; transition: color .2s ease; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button::after { position: absolute; right: 4px; font-size: 24px; color: var(--moss); } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button .paln-index-circle { flex: none; width: 42px; height: 42px; margin-right: 0; border: 1px solid var(--line); background: var(--snow); color: var(--green); border-radius: 10px; font-family: var(--mono); font-size: 14px; font-weight: 600; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button .paln-index-circle h4 { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; } /* The open day is the one the eye should land on */ .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button:not(.collapsed) .paln-index-circle { background: var(--green); border-color: var(--green); color: #fff; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button .plan-title { padding-bottom: 0; text-align: left; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button .plan-title h5 { margin: 0; font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 600; font-weight: 600; font-size: 1.02rem; line-height: 1.3; letter-spacing: -.01em; text-transform: none; color: var(--ink); } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .accordion-button .plan-title h6 { margin: 3px 0 0; padding-top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--moss); } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .plan-info { padding: 0 44px 18px 58px; } .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single .plan-info p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--moss); } @media (max-width: 767px) { /* The current page's crumb is the tour's full name and ran to the edge */ .pb-site .tour-hero-crumbs li[aria-current] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pb-site .tour-hero-crumbs ol { flex-wrap: nowrap; } .pb-site .tour-hero-book { width: 100%; justify-content: center; } .pb-site .tour-hero-cta { gap: 16px; } /* The wrapper's fixed 76px top padding stacked on the hero's own spacing */ .pb-site .package-details-wrapper.pt-76 { padding-top: 26px; } .pb-site .tour-brief-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- Tabs and booking form The tab pills were 20px type in 30px-radius capsules with 50px beneath, and the booking fields were sized to match. Both are brought down to the site's own scale so the content, not the chrome, fills the column. -------------------------------------------------------------------------- */ .pb-site .tour-package-details .package-details-tabs .tab-switchers { gap: 8px !important; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .pb-site .tour-package-details .package-details-tabs .tab-switchers .nav-item .nav-link { border: 1px solid var(--line); border-radius: 8px; padding: 9px 16px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); background: transparent; } .pb-site .tour-package-details .package-details-tabs .tab-switchers .nav-item .nav-link i { margin-right: 7px; font-size: 12px; } .pb-site .tour-package-details .package-details-tabs .tab-switchers .nav-item .nav-link:hover { border-color: var(--lift); background: var(--snow); color: var(--pine); } .pb-site .tour-package-details .package-details-tabs .tab-switchers .nav-item .nav-link.active { background: var(--green); border-color: var(--green); color: #fff; } /* --- Booking card --- */ .pb-site .package-sidebar .package-widget-style-2 { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 38px rgba(19, 26, 21, .07); overflow: hidden; } .pb-site .package-sidebar .package-widget-style-2 .widget-title { background: var(--pine); border-radius: 0; padding: 15px 20px; } .pb-site .package-sidebar .package-widget-style-2 .widget-title h4 { margin: 0; font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 600; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; text-transform: none; } .pb-site .package-sidebar .widget-form .form-control, .pb-site .package-sidebar .widget-form .form-select, .pb-site .package-sidebar .widget-form .select2-selection { min-height: 44px; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line); font-size: 14px; } .pb-site .package-sidebar .widget-form textarea.form-control { min-height: 92px; } .pb-site .package-sidebar .widget-form .mb-3, .pb-site .package-sidebar .widget-form .form-group { margin-bottom: 12px !important; } /* The wrapper's fixed 76px top padding sat on top of the hero's own spacing */ .pb-site .package-details-wrapper.pt-76 { padding-top: clamp(26px, 3vw, 44px); } /* ========================================================================== The itinerary as a road Days run top to bottom beside a track that widens as it comes toward the reader, so the trip reads as a journey rather than a list. The track is a clipped trapezoid rather than a rotateX plane: perspective on a container this tall distorts the text beside it, and a clip-path holds its shape at every height without any 3D maths to keep in sync. ========================================================================== */ .pb-site .road-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .pb-site .road-summary { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); } .pb-site .road-summary strong { color: var(--pine); font-weight: 600; } .pb-site .road-play { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--pine); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .24s ease, background .24s ease, color .24s ease; } .pb-site .road-play:hover { border-color: var(--lift); background: var(--snow); } .pb-site .road-play-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* Pause glyph while a run is playing */ .pb-site .road-play.is-playing .road-play-icon { width: 9px; height: 11px; border: 0; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); } /* --- The track --- */ .pb-site .road-trip { position: relative; padding-left: 112px; } .pb-site .road-track { position: absolute; left: 0; top: 0; bottom: 0; width: 92px; pointer-events: none; } .pb-site .road-svg { position: absolute; inset: 0; overflow: visible; } .pb-site .road-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Verge, asphalt, then the lane line on top: three strokes on the same curve. */ .pb-site .road-shoulder { stroke: #d9e2d8; stroke-width: 34; } .pb-site .road-asphalt { stroke: #1e2f23; stroke-width: 28; } .pb-site .road-lane { stroke: rgba(247, 250, 246, .85); stroke-width: 2.5; stroke-dasharray: 12 18; animation: road-lane-run 1.4s linear infinite; animation-play-state: paused; } /* The lane only runs while the reader is travelling */ .pb-site .road-trip.is-moving .road-lane { animation-play-state: running; } @keyframes road-lane-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -30; } } /* Distance covered. Drawn by shortening the dash offset along the same path, so it follows every bend exactly. */ .pb-site .road-done { stroke: var(--lift); stroke-width: 28; opacity: .92; } .pb-site .road-rider { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin-left: -19px; margin-top: -19px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--green); font-size: 18px; box-shadow: 0 8px 22px rgba(19, 26, 21, .34); opacity: 0; transition: opacity .35s ease; will-change: transform; } .pb-site .road-trip.is-started .road-rider { opacity: 1; } /* --- Day markers on the road --- */ .pb-site .road-trip .plans-accordion-single .accordion-button .paln-index-circle { position: relative; z-index: 2; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; } /* A day the rider has already passed */ .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single.is-reached .accordion-button .paln-index-circle { background: var(--green); border-color: var(--green); color: #fff; } /* The day being travelled right now */ .pb-site .tour-package-details .package-plan-tab .plans-accordion .plans-accordion-single.is-current .accordion-button .paln-index-circle { background: var(--lift); border-color: var(--lift); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 5px rgba(63, 139, 65, .2); } @media (max-width: 767px) { .pb-site .road-trip { padding-left: 74px; } .pb-site .road-track { width: 60px; } .pb-site .road-shoulder { stroke-width: 24; } .pb-site .road-asphalt, .pb-site .road-done { stroke-width: 19; } .pb-site .road-rider { width: 30px; height: 30px; margin-left: -15px; margin-top: -15px; font-size: 15px; } } /* Motion off: the road still shows distance covered, nothing animates. */ @media (prefers-reduced-motion: reduce) { .pb-site .road-lane { animation: none; } .pb-site .road-rider { transition: none; } } /* ========================================================================== Destination page Was a banner, the same image again, the name repeated, and a raw content dump. Now: the place itself, a contents rail for long copy, the tours that go there, and somewhere to go next. ========================================================================== */ .pb-site .dest-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 48vh, 520px); padding-block: clamp(30px, 4.5vw, 58px); overflow: hidden; background: var(--pine); } .pb-site .dest-hero-media { position: absolute; inset: 0; } .pb-site .dest-hero-media img { width: 100%; height: 100%; object-fit: cover; } .pb-site .dest-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9, 15, 10, .92) 0%, rgba(9, 15, 10, .6) 45%, rgba(9, 15, 10, .24) 100%); } .pb-site .dest-hero .container { position: relative; z-index: 1; } .pb-site .dest-hero-inner { max-width: 54rem; } .pb-site .dest-hero-crumbs ol { list-style: none; margin: 0 0 clamp(14px, 2vw, 22px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(231, 236, 230, .72); } .pb-site .dest-hero-crumbs li + li::before { content: '/'; margin-right: 8px; color: rgba(231, 236, 230, .45); } .pb-site .dest-hero-crumbs a { color: rgba(231, 236, 230, .84); } .pb-site .dest-hero-crumbs a:hover { color: #fff; } .pb-site .dest-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #9ccf9a; } .pb-site .dest-hero-title { font-family: var(--display); font-variation-settings: 'wdth' 106, 'wght' 700; font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.03; letter-spacing: -.024em; text-transform: none; color: #fff; margin: 0 0 14px; text-wrap: balance; } .pb-site .dest-hero-lede { margin: 0 0 clamp(20px, 2.6vw, 28px); max-width: 56ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; color: #dbe6da; } .pb-site .dest-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .pb-site .dest-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 9px; background: var(--lift); border: 1px solid var(--lift); color: #fff; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; transition: background .24s ease, border-color .24s ease, transform .24s ease; } .pb-site .dest-btn:hover { background: #4c9c4e; border-color: #4c9c4e; color: #fff; transform: translateY(-2px); } .pb-site .dest-btn.is-quiet { background: rgba(247, 250, 246, .1); border-color: rgba(247, 250, 246, .34); color: #e7ece6; backdrop-filter: blur(6px); } .pb-site .dest-btn.is-quiet:hover { background: rgba(247, 250, 246, .18); border-color: #e7ece6; color: #fff; } .pb-site .dest-btn.is-block { width: 100%; } .pb-site .dest-page { padding-block: clamp(32px, 4vw, 60px); } /* --- Contents rail --- */ .pb-site .aside-title { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 12px; } .pb-site .dest-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; /* A dozen sections would otherwise push the rail past the viewport */ max-height: min(52vh, 460px); overflow-y: auto; } .pb-site .dest-toc li { counter-increment: toc; } .pb-site .dest-toc a { display: block; padding: 7px 10px 7px 30px; position: relative; border-left: 2px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--moss); transition: color .2s ease, border-color .2s ease, background .2s ease; } .pb-site .dest-toc a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 10px; top: 8px; font-family: var(--mono); font-size: 10px; color: var(--line); } .pb-site .dest-toc a:hover { color: var(--pine); border-left-color: var(--lift); background: var(--snow); } .pb-site .dest-toc a.is-current { color: var(--pine); font-weight: 600; border-left-color: var(--green); background: var(--haze); } .pb-site .dest-toc a.is-current::before { color: var(--green); } .pb-site .dest-cta p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--moss); } .pb-site .dest-cta-meta { display: flex; align-items: center; gap: 7px; margin: 12px 0 0 !important; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; } /* --- Tours that go here --- */ .pb-site .dest-tours { background: var(--snow); } /* --- More places --- */ .pb-site .dest-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pb-site .dest-more-card { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; transition: transform .34s cubic-bezier(.22, .68, .28, 1), box-shadow .34s ease; } .pb-site .dest-more-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(19, 26, 21, .14); } .pb-site .dest-more-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--haze); } .pb-site .dest-more-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .pb-site .dest-more-card:hover .dest-more-media img { transform: scale(1.06); } .pb-site .dest-more-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .pb-site .dest-more-name { font-family: var(--display); font-variation-settings: 'wdth' 102, 'wght' 600; font-weight: 600; font-size: 1.02rem; letter-spacing: -.012em; color: var(--ink); } .pb-site .dest-more-go { color: var(--lift); font-size: 17px; transition: transform .28s ease; } .pb-site .dest-more-card:hover .dest-more-go { transform: translateX(4px); } @media (max-width: 991px) { .pb-site .dest-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb-site .dest-toc ol { max-height: none; } } @media (max-width: 575px) { .pb-site .dest-more-grid { grid-template-columns: minmax(0, 1fr); } .pb-site .dest-hero-actions .dest-btn { flex: 1 1 auto; } }