/* ========================================================================== Harding's Valley Skips — main stylesheet (mobile-first) 1. Tokens 2. Base 3. Layout 4. Buttons & forms 5. Header 6. Hero 7. Sections 8. Cards 9. Booking 10. WooCommerce 11. Account 12. Footer 13. Utilities ========================================================================== */ /* 1. Tokens --------------------------------------------------------------- */ :root { --hvs-green: #0e6d06; --hvs-green-700: #0a5404; --hvs-green-050: #edf6eb; --hvs-lime: #7ed957; --hvs-forest: #0f2a14; --hvs-forest-900: #0a1d0d; --hvs-yellow: #f5c400; --hvs-yellow-600: #e2b400; --hvs-ink: #16201a; --hvs-body: #3a463d; --hvs-muted: #5f6d63; --hvs-line: #dfe7dc; --hvs-mist: #f3f7f1; --hvs-white: #ffffff; --hvs-danger: #b42318; --hvs-danger-050: #fdecea; --hvs-font-head: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --hvs-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --hvs-radius: 16px; --hvs-radius-sm: 10px; --hvs-shadow: 0 18px 40px -18px rgba(10, 29, 13, .28); --hvs-shadow-sm: 0 2px 10px rgba(10, 29, 13, .08); --hvs-container: 1200px; --hvs-gutter: 16px; --hvs-section: clamp(56px, 8vw, 104px); --hvs-header-h: 72px; } @media (min-width: 768px) { :root { --hvs-gutter: 28px; --hvs-header-h: 88px; } } /* 2. Base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hvs-header-h) + 16px); } body { margin: 0; background: var(--hvs-white); color: var(--hvs-body); font: 400 16px/1.65 var(--hvs-font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; /* clip, unlike hidden, never makes body a scroll container, so the sticky header survives the menu-open scroll lock */ } @media (min-width: 768px) { body { font-size: 17px; } } img, svg, video { max-width: 100%; height: auto; } img { display: block; } a { color: var(--hvs-green); text-underline-offset: 3px; } a:hover { color: var(--hvs-green-700); } h1, h2, h3, h4, h5 { color: var(--hvs-ink); font-family: var(--hvs-font-head); font-weight: 800; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--hvs-yellow); outline-offset: 2px; border-radius: 4px; } .hvs-icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; margin: 0; z-index: 1000; left: 12px; top: 12px; padding: 12px 18px; background: var(--hvs-yellow); color: var(--hvs-ink); font-weight: 700; } /* 3. Layout ---------------------------------------------------------------- */ .hvs-container { width: 100%; max-width: calc(var(--hvs-container) + var(--hvs-gutter) * 2); margin: 0 auto; padding: 0 var(--hvs-gutter); } .hvs-section { padding: var(--hvs-section) 0; } .hvs-section--tight { padding: clamp(36px, 5vw, 64px) 0; } .hvs-section--mist { background: var(--hvs-mist); } .hvs-section--forest { background: var(--hvs-forest); color: rgba(255, 255, 255, .82); } .hvs-section--forest h2, .hvs-section--forest h3 { color: var(--hvs-white); } .hvs-section--forest a { color: var(--hvs-lime); } .hvs-section__head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; } .hvs-section__title { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.75rem); } .hvs-section__lead { font-size: 1.05em; color: var(--hvs-muted); margin: 0; } .hvs-section--forest .hvs-section__lead { color: rgba(255, 255, 255, .78); } .hvs-eyebrow { display: inline-block; margin: 0 0 .6em; color: var(--hvs-green); font: 800 .8rem/1 var(--hvs-font-head); letter-spacing: .12em; text-transform: uppercase; } .hvs-section--forest .hvs-eyebrow, .hvs-hero .hvs-eyebrow { color: var(--hvs-lime); } .hvs-split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; } .hvs-split__media img { width: 100%; border-radius: var(--hvs-radius); box-shadow: var(--hvs-shadow); aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 900px) { .hvs-split { grid-template-columns: 1fr 1fr; } .hvs-split--reverse .hvs-split__media { order: 2; } } /* 4. Buttons & forms ------------------------------------------------------- */ .hvs-btn, .button, button.button, input.button, .wc-block-components-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.4em; border: 2px solid transparent; border-radius: 999px; background: var(--hvs-green); color: var(--hvs-white); font: 800 1rem/1.1 var(--hvs-font-head); letter-spacing: .01em; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; } .hvs-btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--hvs-green-700); color: var(--hvs-white); transform: translateY(-1px); } .hvs-btn:disabled, .hvs-btn[disabled], .button:disabled { opacity: .45; cursor: not-allowed; transform: none; } .hvs-btn--accent, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order, .woocommerce a.checkout-button { background: var(--hvs-yellow); color: var(--hvs-ink); box-shadow: 0 6px 16px -8px rgba(226, 180, 0, .9); } .hvs-btn--accent:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover, .woocommerce a.checkout-button:hover { background: var(--hvs-yellow-600); color: var(--hvs-ink); } .hvs-btn--primary { background: var(--hvs-green); color: var(--hvs-white); } .hvs-btn--ghost { background: transparent; color: var(--hvs-green); border-color: currentColor; } .hvs-btn--ghost:hover { background: var(--hvs-green); color: var(--hvs-white); border-color: var(--hvs-green); } .hvs-btn--outline-light { background: transparent; color: var(--hvs-white); border-color: rgba(255, 255, 255, .7); } .hvs-btn--outline-light:hover { background: var(--hvs-white); color: var(--hvs-forest); border-color: var(--hvs-white); } .hvs-btn--lg { min-height: 56px; padding: .9em 1.8em; font-size: 1.08rem; } .hvs-btn--block { width: 100%; } .hvs-field { display: block; margin: 0 0 14px; } .hvs-field__label { display: block; margin: 0 0 6px; color: var(--hvs-ink); font: 700 .92rem/1.3 var(--hvs-font-head); } .hvs-field__label small { color: var(--hvs-muted); font-weight: 600; } .hvs-input, .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce-page form .form-row .input-text, .select2-container--default .select2-selection--single, .woocommerce .quantity .qty, .wpforms-form input[type], .wpforms-form textarea, .wpforms-form select { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); background: var(--hvs-white); color: var(--hvs-ink); font: 400 16px/1.4 var(--hvs-font-body); transition: border-color .15s, box-shadow .15s; } textarea.hvs-input { min-height: 96px; resize: vertical; } .hvs-input:focus, .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .wpforms-form input:focus, .wpforms-form textarea:focus { outline: none; border-color: var(--hvs-green); box-shadow: 0 0 0 4px rgba(14, 109, 6, .14); } .select2-container--default .select2-selection--single { display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); } .hvs-check { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 14px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); cursor: pointer; } .hvs-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--hvs-green); flex: none; } .hvs-check:has(input:checked) { border-color: var(--hvs-green); background: var(--hvs-green-050); } /* 5. Header ---------------------------------------------------------------- */ .hvs-topbar { background: var(--hvs-forest-900); color: rgba(255, 255, 255, .8); font-size: .85rem; } .hvs-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; } .hvs-topbar__msg { display: none; margin: 0; } .hvs-topbar__msg .hvs-icon { color: var(--hvs-lime); margin-right: 6px; } .hvs-topbar__links { display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; } .hvs-topbar__links a { display: inline-flex; align-items: center; gap: 7px; color: var(--hvs-white); font-weight: 600; text-decoration: none; } .hvs-topbar__links a:hover { color: var(--hvs-yellow); } .hvs-topbar__links .hvs-icon { color: var(--hvs-lime); } @media (max-width: 599px) { /* Phone and email on one line: the text scales down a little on narrow phones so both always fit. */ .hvs-topbar__links { flex-wrap: nowrap; justify-content: center; gap: 14px; margin: 0 auto; font-size: min(.8rem, calc(3.4vw - 2px)); white-space: nowrap; } .hvs-topbar__links a { gap: 5px; } .hvs-topbar__links .hvs-icon { width: 1.1em; height: 1.1em; } } @media (min-width: 900px) { .hvs-topbar__msg { display: block; } } .hvs-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--hvs-line); transition: box-shadow .2s; } .hvs-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(10, 29, 13, .45); } .admin-bar .hvs-header { top: 46px; } @media (min-width: 783px) { .admin-bar .hvs-header { top: 32px; } } .hvs-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--hvs-header-h); } .hvs-logo { flex: none; display: block; } .hvs-logo img { width: 200px; height: auto; } @media (min-width: 768px) { .hvs-logo img { width: 250px; } } @media (min-width: 1200px) { .hvs-logo img { width: 270px; } } .hvs-nav { display: none; margin-left: auto; } .hvs-nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } .hvs-nav__list a { display: block; padding: 10px 10px; border-radius: 8px; color: var(--hvs-ink); font: 700 .95rem/1 var(--hvs-font-head); text-decoration: none; white-space: nowrap; } .hvs-nav__list a:hover { color: var(--hvs-green); background: var(--hvs-green-050); } .hvs-nav__list .current-menu-item > a, .hvs-nav__list .current_page_item > a { color: var(--hvs-green); box-shadow: inset 0 -3px 0 var(--hvs-yellow); border-radius: 0; } .hvs-nav__list .sub-menu { display: none; } .hvs-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .hvs-header__account { display: none; align-items: center; gap: 7px; white-space: nowrap; color: var(--hvs-ink); font: 700 .95rem/1 var(--hvs-font-head); text-decoration: none; padding: 10px 6px; } .hvs-header__account:hover { color: var(--hvs-green); } .hvs-header__book { display: none; } .hvs-header__toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--hvs-line); border-radius: 12px; background: var(--hvs-white); color: var(--hvs-ink); cursor: pointer; } .hvs-header__toggle .is-close-icon, .hvs-header__toggle[aria-expanded="true"] .is-open-icon { display: none; } .hvs-header__toggle[aria-expanded="true"] .is-close-icon { display: block; } @media (min-width: 600px) { .hvs-header__book { display: inline-flex; } } @media (min-width: 1100px) { .hvs-nav { display: block; } .hvs-header__actions { margin-left: 8px; } .hvs-header__toggle { display: none; } .hvs-header__account { display: inline-flex; } } @media (min-width: 1100px) and (max-width: 1399px) { .hvs-nav__list a { padding: 10px 7px; font-size: .9rem; } .hvs-logo img { width: 220px; } .hvs-header__account span { display: none; } } .hvs-drawer { position: fixed; left: 0; right: 0; top: var(--hvs-drawer-top, var(--hvs-header-h)); bottom: 0; z-index: 60; border-top: 1px solid var(--hvs-line); background: var(--hvs-white); overflow-y: auto; overscroll-behavior: contain; } /* Menu open: the page behind can't scroll, and the floating Book button steps aside. */ /* Lock the root only: hiding overflow on body as well makes body the scroller and the sticky header scrolls away with the page. */ html.hvs-menu-open { overflow: hidden; } html.hvs-menu-open .hvs-mobile-book { display: none; } html.hvs-menu-open .hvs-header { backdrop-filter: none; background: var(--hvs-white); } /* a backdrop-filter would make the fixed drawer size itself to the header, not the screen */ .hvs-drawer__list { margin: 0; padding: 8px var(--hvs-gutter); list-style: none; } .hvs-drawer__list a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--hvs-line); color: var(--hvs-ink); font: 800 1.1rem/1.2 var(--hvs-font-head); text-decoration: none; } .hvs-drawer__list .current-menu-item > a { color: var(--hvs-green); } .hvs-drawer__actions { display: grid; gap: 10px; padding: 16px var(--hvs-gutter) 24px; } .hvs-drawer__phone { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; color: var(--hvs-green); font: 800 1.15rem/1 var(--hvs-font-head); text-decoration: none; } @media (min-width: 1100px) { .hvs-drawer { display: none !important; } } /* 6. Hero ------------------------------------------------------------------ */ .hvs-hero { position: relative; color: rgba(255, 255, 255, .88); background: linear-gradient(100deg, rgba(10, 29, 13, .80) 0%, rgba(10, 29, 13, .62) 45%, rgba(10, 29, 13, .25) 100%), var(--hvs-hero-img) center / cover no-repeat, var(--hvs-forest); } .hvs-hero__inner { display: grid; gap: 32px; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(48px, 8vw, 112px); align-items: center; } @media (min-width: 960px) { .hvs-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 56px; } } .hvs-hero__title { color: var(--hvs-white); font-size: clamp(2.2rem, 1.3rem + 4vw, 3.9rem); font-weight: 900; letter-spacing: -.02em; margin-bottom: .35em; } .hvs-hero__title span { display: block; color: var(--hvs-yellow); } .hvs-hero__title, .hvs-hero__lead { text-shadow: 0 2px 14px rgba(10, 29, 13, .55); } .hvs-hero__lead { max-width: 560px; font-size: 1.1em; margin-bottom: 1.6em; } .hvs-123 { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: none; } @media (min-width: 600px) { .hvs-123 { grid-template-columns: repeat(3, 1fr); } } .hvs-123 li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--hvs-radius-sm); background: rgba(255, 255, 255, .06); font-size: .88rem; line-height: 1.3; } .hvs-123 strong { display: block; color: var(--hvs-white); font: 800 1rem/1.2 var(--hvs-font-head); } .hvs-123__num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hvs-yellow); color: var(--hvs-ink); font: 900 1.15rem/1 var(--hvs-font-head); } .hvs-hero__card { background: var(--hvs-white); color: var(--hvs-body); border-radius: calc(var(--hvs-radius) + 4px); padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); border-top: 6px solid var(--hvs-yellow); } /* Desktop: the price card is taken out of the flow so a price result grows the card (from its centre), not the hero. */ @media (min-width: 960px) { .hvs-hero__aside { position: relative; align-self: stretch; min-height: 540px; } .hvs-hero__aside .hvs-hero__card { position: absolute; top: 50%; left: 0; right: 0; z-index: 2; transform: translateY(-50%); } } @media (min-width: 1280px) { .hvs-hero__aside { min-height: 440px; } } .hvs-quick__title { font-size: 1.55rem; margin-bottom: .2em; } .hvs-quick__sub { color: var(--hvs-muted); margin-bottom: 18px; font-size: .95rem; } .hvs-quick__result:empty { display: none; } .hvs-quick__result { margin-top: 14px; padding: 14px; border-radius: var(--hvs-radius-sm); background: var(--hvs-mist); font-size: .95rem; } .hvs-quick__result.is-ok { display: grid; gap: 12px; background: var(--hvs-green-050); border: 2px solid rgba(14, 109, 6, .25); } .hvs-quick__result.is-error { background: var(--hvs-danger-050); color: var(--hvs-danger); } .hvs-quick__line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; color: var(--hvs-ink); } .hvs-quick__price { font: 900 1.7rem/1 var(--hvs-font-head); color: var(--hvs-green); } .hvs-quick__small { margin: 14px 0 0; color: var(--hvs-muted); font-size: .82rem; } /* Inner page hero */ .hvs-pagehero { background: var(--hvs-forest); color: rgba(255, 255, 255, .85); padding: clamp(44px, 7vw, 88px) 0; } .hvs-pagehero.has-image { background: linear-gradient(100deg, rgba(10, 29, 13, .88) 0%, rgba(12, 52, 14, .72) 50%, rgba(14, 109, 6, .45) 100%), var(--hvs-hero-img) var(--hvs-hero-pos, center 55%) / cover no-repeat, var(--hvs-forest); } .hvs-pagehero.has-image :is(.hvs-pagehero__title, .hvs-pagehero__intro, .hvs-crumbs) { text-shadow: 0 2px 12px rgba(10, 29, 13, .5); } .hvs-pagehero.is-compact { padding: clamp(28px, 4vw, 48px) 0; } .hvs-pagehero__title { color: var(--hvs-white); font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); font-weight: 900; margin: 0; } .hvs-pagehero.is-compact .hvs-pagehero__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); } .hvs-pagehero__intro { max-width: 680px; margin: .6em 0 0; font-size: 1.08em; } .hvs-crumbs { margin-bottom: 10px; font-size: .85rem; color: rgba(255, 255, 255, .65); } .hvs-crumbs a { color: var(--hvs-lime); text-decoration: none; } /* 7. Sections -------------------------------------------------------------- */ .hvs-trust { background: var(--hvs-green); color: var(--hvs-white); } .hvs-trust__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; list-style: none; } @media (min-width: 900px) { .hvs-trust__list { grid-template-columns: repeat(4, 1fr); } } .hvs-trust__item { display: flex; gap: 10px; align-items: center; font-size: .86rem; line-height: 1.3; color: rgba(255, 255, 255, .85); } .hvs-trust__item strong { display: block; color: var(--hvs-white); font: 800 1rem/1.2 var(--hvs-font-head); } .hvs-trust__item .hvs-icon { width: 30px; height: 30px; color: var(--hvs-yellow); } .hvs-ticks, .is-style-hvs-ticks { margin: 0 0 1.4em; padding: 0; list-style: none; } .hvs-ticks li, .is-style-hvs-ticks li { position: relative; padding-left: 32px; margin-bottom: 10px; } .hvs-ticks li::before, .is-style-hvs-ticks li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--hvs-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; } .hvs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.6em 0; } .hvs-stats div { padding: 16px 12px; border-radius: var(--hvs-radius-sm); background: var(--hvs-mist); text-align: center; } .hvs-stats strong { display: block; color: var(--hvs-green); font: 900 clamp(1.5rem, 1rem + 2vw, 2.1rem)/1 var(--hvs-font-head); } .hvs-stats span { display: block; margin-top: 6px; font-size: .82rem; color: var(--hvs-muted); line-height: 1.3; } .hvs-coverage { display: grid; gap: 28px; align-items: start; } @media (min-width: 900px) { .hvs-coverage.has-map { grid-template-columns: 1.3fr 1fr; } .hvs-coverage.has-map .hvs-coverage__check { grid-column: 1 / -1; } } .hvs-coverage__label { margin: 0 0 12px; color: var(--hvs-yellow); font: 800 .8rem/1 var(--hvs-font-head); letter-spacing: .12em; text-transform: uppercase; } .hvs-coverage__areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin: 0; padding: 0; list-style: none; } @media (min-width: 600px) { .hvs-coverage__areas { grid-template-columns: repeat(3, 1fr); } } .hvs-coverage__areas li { display: flex; gap: 10px; align-items: center; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); color: var(--hvs-white); font: 700 1rem/1.25 var(--hvs-font-head); } .hvs-coverage__areas .hvs-icon { flex: none; width: 18px; height: 18px; color: var(--hvs-yellow); } .hvs-section:not(.hvs-section--forest) .hvs-coverage__label, .hvs-prose .hvs-coverage__label { color: var(--hvs-green); } .hvs-section:not(.hvs-section--forest) .hvs-coverage__areas li, .hvs-prose .hvs-coverage__areas li { border-color: var(--hvs-line); color: var(--hvs-ink); } .hvs-section:not(.hvs-section--forest) .hvs-coverage__areas .hvs-icon, .hvs-prose .hvs-coverage__areas .hvs-icon { color: var(--hvs-green); } .hvs-coverage__map { margin: 0; } .hvs-coverage__map img { width: 100%; border-radius: var(--hvs-radius); border: 6px solid rgba(255, 255, 255, .9); } .hvs-coverage__check { margin: 0; text-align: center; font-weight: 600; } .hvs-cta { position: relative; background: linear-gradient(90deg, rgba(14, 109, 6, .96), rgba(10, 84, 4, .9)), var(--hvs-cta-img) center / cover no-repeat, var(--hvs-green); color: rgba(255, 255, 255, .9); } .hvs-cta__inner { display: grid; gap: 24px; align-items: center; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); } @media (min-width: 900px) { .hvs-cta__inner { grid-template-columns: 1.4fr auto; } } .hvs-cta__title { color: var(--hvs-white); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); margin-bottom: .3em; } .hvs-cta__text { margin: 0; max-width: 620px; } .hvs-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hvs-contact { display: grid; gap: 10px; margin: 1.4em 0 0; padding: 0; list-style: none; } @media (min-width: 600px) { .hvs-contact { grid-template-columns: 1fr 1fr; } } .hvs-contact a { display: flex; gap: 12px; align-items: center; height: 100%; padding: 14px 16px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); color: var(--hvs-ink); font-weight: 600; font-size: .92rem; line-height: 1.35; text-decoration: none; word-break: break-word; transition: border-color .15s, background .15s; } .hvs-contact a:hover { border-color: var(--hvs-green); background: var(--hvs-green-050); } .hvs-contact small { display: block; color: var(--hvs-muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; } .hvs-contact .hvs-icon { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--hvs-green); color: var(--hvs-white); } .hvs-testimonials { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .hvs-testimonial { display: flex; flex-direction: column; margin: 0; padding: 26px; border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); } .hvs-testimonial__quote { position: relative; margin: 0 0 20px; padding-top: 34px; color: var(--hvs-ink); font-size: 1rem; } .hvs-testimonial__quote::before { content: "\201C"; position: absolute; left: -4px; top: -14px; color: var(--hvs-yellow); font: 900 4.2rem/1 var(--hvs-font-head); } .hvs-testimonial__quote p { margin: 0; } .hvs-testimonial__by { display: flex; gap: 12px; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hvs-line); color: var(--hvs-ink); font: 800 1rem/1.2 var(--hvs-font-head); } .hvs-testimonial__by img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--hvs-line); background: var(--hvs-white); } .hvs-testimonial__company { display: block; margin-top: 3px; color: var(--hvs-muted); font: 600 .85rem/1.3 var(--hvs-font-body); } .hvs-prose .hvs-testimonials { margin: 0 0 2em; } .hvs-prose .hvs-testimonial__by img { border-radius: 10px; } .hvs-hours { margin: 0 0 1.4em; } .hvs-hours div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; padding: 3px 0; } .hvs-hours dt { color: var(--hvs-ink); font-weight: 600; } .hvs-hours dd { margin: 0; color: var(--hvs-body); } .is-style-hvs-band .hvs-hours { margin: 0; } .is-style-hvs-band .hvs-hours dt { color: var(--hvs-white); } .is-style-hvs-band .hvs-hours dd { color: rgba(255, 255, 255, .8); } /* 8. Cards ----------------------------------------------------------------- */ .hvs-skipgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .hvs-skipcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); transition: transform .2s, box-shadow .2s; } .hvs-skipcard:hover { transform: translateY(-3px); box-shadow: var(--hvs-shadow); } .hvs-skipcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--hvs-mist); overflow: hidden; } .hvs-skipcard__media img { width: 100%; height: 100%; object-fit: cover; } .hvs-skipcard__yards { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--hvs-yellow); color: var(--hvs-ink); font: 900 1.25rem/1 var(--hvs-font-head); box-shadow: var(--hvs-shadow-sm); } .hvs-skipcard__yards small { font-size: .65em; margin-left: 2px; } .hvs-skipcard.is-phone .hvs-skipcard__yards { background: var(--hvs-white); } .hvs-skipcard__body { display: flex; flex: 1; flex-direction: column; padding: 18px; } .hvs-skipcard__name { font-size: 1.2rem; margin-bottom: .4em; } .hvs-skipcard__name a { color: inherit; text-decoration: none; } .hvs-skipcard__facts { margin: 0 0 16px; padding: 0; list-style: none; font-size: .9rem; line-height: 1.4; } .hvs-skipcard__facts li { display: flex; gap: 8px; margin-bottom: 6px; } .hvs-skipcard__facts .hvs-icon { color: var(--hvs-green); margin-top: 1px; } .hvs-skipcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hvs-line); } .hvs-skipcard__price { margin: 0; color: var(--hvs-ink); font: 900 1.4rem/1.1 var(--hvs-font-head); } .hvs-skipcard__price small { display: block; color: var(--hvs-muted); font: 700 .72rem/1.2 var(--hvs-font-body); text-transform: uppercase; letter-spacing: .06em; } .hvs-skipcard__foot .hvs-btn { min-height: 44px; padding: .6em 1.1em; font-size: .95rem; } .hvs-services { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .hvs-service { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--hvs-radius); background: var(--hvs-white); color: var(--hvs-body); text-decoration: none; box-shadow: var(--hvs-shadow-sm); transition: transform .2s, box-shadow .2s; } .hvs-service:hover { transform: translateY(-3px); box-shadow: var(--hvs-shadow); color: var(--hvs-body); } .hvs-service.is-static:hover { transform: none; box-shadow: var(--hvs-shadow-sm); } .hvs-service.is-static:hover .hvs-service__media img { transform: none; } .hvs-service__media { aspect-ratio: 3 / 2; overflow: hidden; } .hvs-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .hvs-service:hover .hvs-service__media img { transform: scale(1.04); } .hvs-service__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px; border-top: 4px solid var(--hvs-yellow); } .hvs-service__title { color: var(--hvs-ink); font: 800 1.2rem/1.2 var(--hvs-font-head); } .hvs-service__text { font-size: .93rem; line-height: 1.5; } .hvs-service__more { display: inline-flex; gap: 6px; align-items: center; margin-top: auto; padding-top: 6px; color: var(--hvs-green); font: 800 .95rem/1 var(--hvs-font-head); } .hvs-posts { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .hvs-post { overflow: hidden; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); } .hvs-post__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .hvs-post__body { padding: 20px; } .hvs-post__date { margin: 0 0 6px; color: var(--hvs-muted); font-size: .82rem; } .hvs-post__title { font-size: 1.25rem; } .hvs-post__title a { color: inherit; text-decoration: none; } /* Prose (page content / core blocks) */ .hvs-prose { color: var(--hvs-body); } /* Every page uses the same content width as the homepage (.hvs-container). */ .hvs-prose h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem); margin-top: 1.4em; } .hvs-prose .hvs-eyebrow + h2 { margin-top: 0; } /* small label sits tight above its heading, as in centred section headers */ .hvs-prose h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); margin-top: 1.3em; } .hvs-prose > :first-child, .hvs-prose .wp-block-column > :first-child, .hvs-prose .wp-block-group__inner-container > :first-child, .hvs-prose .wp-block-group > :first-child { margin-top: 0; } .hvs-prose ul:not([class]), .hvs-prose ol:not([class]) { padding-left: 1.3em; margin: 0 0 1.2em; } .hvs-prose li { margin-bottom: .35em; } .hvs-prose img { border-radius: var(--hvs-radius); } .hvs-prose figure { margin: 0 0 1.4em; } .hvs-prose figcaption { color: var(--hvs-muted); font-size: .85rem; margin-top: 8px; } .hvs-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; } .hvs-prose th, .hvs-prose td { padding: 10px 12px; border-bottom: 1px solid var(--hvs-line); text-align: left; } .hvs-prose th { color: var(--hvs-ink); font-family: var(--hvs-font-head); background: var(--hvs-mist); } .hvs-prose .wp-block-table { overflow-x: auto; } .hvs-prose .wp-block-columns { display: grid; gap: clamp(24px, 4vw, 48px); margin: 0 0 1.6em; align-items: center; } @media (min-width: 782px) { .hvs-prose .wp-block-columns { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } /* WordPress core sets align-items: normal !important on columns; centre text beside its photo instead. */ .hvs-prose .wp-block-columns { align-items: center !important; } .hvs-prose .wp-block-columns.are-vertically-aligned-top { align-items: start !important; } .hvs-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.4em; } .hvs-prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: .75em 1.4em; border-radius: 999px; background: var(--hvs-green); color: var(--hvs-white); font: 800 1rem/1.1 var(--hvs-font-head); text-decoration: none; } .hvs-prose .wp-block-button__link:hover { background: var(--hvs-green-700); color: var(--hvs-white); } .hvs-prose .is-style-hvs-accent .wp-block-button__link { background: var(--hvs-yellow); color: var(--hvs-ink); } .hvs-prose .is-style-hvs-accent .wp-block-button__link:hover { background: var(--hvs-yellow-600); } .hvs-prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--hvs-green); border: 2px solid currentColor; } .hvs-prose .is-style-hvs-panel { padding: clamp(20px, 3vw, 32px); margin: 0 0 1.6em; border-radius: var(--hvs-radius); background: var(--hvs-mist); border-left: 6px solid var(--hvs-yellow); } /* Credentials card: forest panel, intro left, licence badges right. */ .hvs-prose .is-style-hvs-creds > .wp-block-group__inner-container { display: grid; gap: 24px; align-items: center; } @media (min-width: 900px) { .hvs-prose .is-style-hvs-creds > .wp-block-group__inner-container { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 40px; } } .hvs-prose .is-style-hvs-creds > .wp-block-group__inner-container > * { margin: 0; } .hvs-prose .is-style-hvs-creds { margin: 0 0 1.8em; padding: clamp(24px, 4vw, 44px); border-radius: var(--hvs-radius); background: radial-gradient(120% 140% at 100% 0%, rgba(126, 217, 87, .16), transparent 55%), var(--hvs-forest); color: rgba(255, 255, 255, .82); } .hvs-prose .hvs-creds__intro h3 { margin: 0 0 .4em; color: var(--hvs-white); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); } .hvs-prose .hvs-creds__intro h3::before { content: "Licensed & accredited"; display: block; margin-bottom: 8px; color: var(--hvs-lime); font: 800 .75rem/1 var(--hvs-font-head); letter-spacing: .12em; text-transform: uppercase; } .hvs-prose .hvs-creds__intro p { margin: 0; } .hvs-prose ul.hvs-creds { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); } .hvs-prose ul.hvs-creds li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 18px 18px 18px 60px; position: relative; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--hvs-radius-sm); background: rgba(255, 255, 255, .06); } .hvs-prose ul.hvs-creds li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 32px; height: 32px; border-radius: 10px; background: var(--hvs-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316201a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 18px no-repeat; } .hvs-prose .hvs-creds__label { color: rgba(255, 255, 255, .72); font-size: .8rem; font-weight: 600; line-height: 1.3; } .hvs-prose .hvs-creds__num { color: var(--hvs-white); font: 900 1.2rem/1.1 var(--hvs-font-head); letter-spacing: .01em; word-break: break-word; } .hvs-prose .hvs-creds a { color: var(--hvs-lime); font-size: .8rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .hvs-prose .hvs-creds a:hover, .hvs-prose .hvs-creds a:focus-visible { color: var(--hvs-white); } /* Role cards (SWMP responsibilities): white card, coloured top edge, icon badge, ticked duties. */ .hvs-prose .wp-block-columns.hvs-roles { align-items: stretch !important; } .hvs-prose .hvs-roles > .wp-block-column { display: flex; } .hvs-prose .is-style-hvs-role { position: relative; flex: 1; margin: 0; padding: clamp(24px, 3vw, 32px); padding-top: calc(clamp(24px, 3vw, 32px) + 4px); border: 1px solid var(--hvs-line); border-top: 6px solid var(--hvs-green); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); } .hvs-prose .is-style-hvs-role.hvs-role--contractor { border-top-color: var(--hvs-yellow); } .hvs-prose .is-style-hvs-role::before { content: ""; float: right; width: 52px; height: 52px; margin: -4px 0 8px 16px; border-radius: 14px; background: var(--hvs-green-050) center / 28px no-repeat; } .hvs-prose .hvs-role--client::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6d06' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h1M14 15h1M10 21v-3h4v3'/%3E%3C/svg%3E"); } .hvs-prose .hvs-role--contractor::before { background-color: #fff6d1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5c00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18v2H3zM5 18v-3a7 7 0 0 1 14 0v3'/%3E%3Cpath d='M10 8V5h4v3M8 10v3M16 10v3'/%3E%3C/svg%3E"); } .hvs-prose .hvs-role__label { margin: 0 0 6px; color: var(--hvs-muted); font: 800 .72rem/1 var(--hvs-font-head); letter-spacing: .12em; text-transform: uppercase; } .hvs-prose .is-style-hvs-role h3 { margin: 0 0 16px; font-size: 1.35rem; } .hvs-prose .is-style-hvs-role ul { clear: both; margin: 0; } .hvs-prose .is-style-hvs-role ul li { margin-bottom: .55em; } .hvs-prose .is-style-hvs-role ul li:last-child { margin-bottom: 0; } /* Breathing room between the contact details block and the buttons that follow it. */ .hvs-prose .hvs-contact + .wp-block-buttons, .hvs-prose .hvs-contact + p + .wp-block-buttons { margin-top: 28px; } /* Warning box ("what can't go in a skip") and info box (permits): plain panel with a coloured edge. */ .hvs-prose :is(.is-style-hvs-warning, .is-style-hvs-info) { margin: 0 0 1.8em; padding: clamp(20px, 3vw, 28px); border-left: 5px solid; border-radius: 4px; background: var(--hvs-mist); } .hvs-prose :is(.is-style-hvs-warning, .is-style-hvs-info) h3 { margin: 0 0 .4em; font-size: 1.25rem; } .hvs-prose :is(.is-style-hvs-warning, .is-style-hvs-info) p { margin-bottom: .8em; } .hvs-prose :is(.is-style-hvs-warning, .is-style-hvs-info) > :last-child { margin-bottom: 0; } .hvs-prose .is-style-hvs-warning { border-color: var(--hvs-danger); } .hvs-prose .is-style-hvs-info { border-color: var(--hvs-green); } .hvs-prose .hvs-panel-note { color: var(--hvs-muted); font-size: .92rem; } .hvs-prose ul.hvs-nogo { columns: 2 200px; column-gap: 32px; margin: 0; padding-left: 1.2em; } .hvs-prose ul.hvs-nogo li { margin: 0 0 .35em; break-inside: avoid; } .hvs-prose .is-style-hvs-band { padding: clamp(28px, 4vw, 48px); margin: 2em 0; border-radius: var(--hvs-radius); background: var(--hvs-forest); color: rgba(255, 255, 255, .85); } .hvs-prose .is-style-hvs-band h2, .hvs-prose .is-style-hvs-band h3 { color: var(--hvs-white); } .hvs-prose .is-style-hvs-band a:not(.wp-block-button__link) { color: var(--hvs-lime); } .hvs-prose .wp-block-details { margin: 0 0 12px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); background: var(--hvs-white); transition: border-color .15s; } .hvs-prose .wp-block-details[open] { border-color: var(--hvs-green); } .hvs-prose .wp-block-details summary { position: relative; padding: 16px 52px 16px 18px; color: var(--hvs-ink); font: 800 1.08rem/1.3 var(--hvs-font-head); cursor: pointer; list-style: none; } .hvs-prose .wp-block-details summary::-webkit-details-marker { display: none; } .hvs-prose .wp-block-details summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--hvs-green-050); color: var(--hvs-green); font: 900 1.2rem/28px var(--hvs-font-head); text-align: center; } .hvs-prose .wp-block-details[open] summary::after { content: "−"; background: var(--hvs-green); color: var(--hvs-white); } .hvs-prose .wp-block-details > :not(summary) { padding: 0 18px; } .hvs-prose .wp-block-details > :last-child { padding-bottom: 16px; margin-bottom: 0; } .hvs-prose .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 1.6em; padding: 0; list-style: none; } .hvs-prose .wp-block-gallery figure { margin: 0; } .hvs-prose .wp-block-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; } /* Photo gallery: large stage with clickable, auto-cycling thumbnails below. */ .hvs-gallery { margin: 0 0 2em; } .hvs-gallery__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--hvs-radius-sm); background: var(--hvs-forest); } .hvs-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; } .hvs-gallery__slide.is-active { opacity: 1; } .hvs-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 8px; } .hvs-gallery__thumb { padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; opacity: .55; outline: 3px solid transparent; outline-offset: -3px; transition: opacity .2s, outline-color .2s; } .hvs-gallery__thumb:hover { opacity: .85; } .hvs-gallery__thumb.is-active { opacity: 1; outline-color: var(--hvs-yellow); } .hvs-gallery__thumb:focus-visible { opacity: 1; outline-color: var(--hvs-green); } .hvs-gallery__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .hvs-gallery__slide { transition: none; } } .hvs-prose .hvs-skipgrid, .hvs-prose .hvs-coverage { margin: 0 0 2em; } .hvs-prose .hvs-skipcard__name { margin-top: 0; } .hvs-prose .hvs-quick { max-width: 520px; padding: 24px; border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow); border-top: 6px solid var(--hvs-yellow); margin-bottom: 2em; } .hvs-prose .wp-block-column .hvs-quick { max-width: none; margin-bottom: 0; } .hvs-prose .hvs-quick .hvs-quick__title { margin-top: 0; font-size: 1.55rem; } .hvs-specs-table td:first-child { font-weight: 700; color: var(--hvs-ink); } /* 9. Booking --------------------------------------------------------------- */ .hvs-booklayout { display: grid; gap: 24px; align-items: start; } @media (min-width: 1000px) { .hvs-booklayout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; } .hvs-booklayout__aside { position: sticky; top: calc(var(--hvs-header-h) + 20px); } } .hvs-helpcard { padding: 22px; margin-bottom: 16px; border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); font-size: .93rem; } .hvs-helpcard h2 { font-size: 1.2rem; } .hvs-helpcard .hvs-ticks li { margin-bottom: 8px; } .hvs-helpcard--plain { display: flex; gap: 12px; align-items: center; background: transparent; box-shadow: none; padding: 6px 4px; color: var(--hvs-muted); } .hvs-helpcard--plain p { margin: 0; } .hvs-helpcard--plain .hvs-icon { width: 32px; height: 32px; color: var(--hvs-green); } .hvs-booking { padding: clamp(18px, 3vw, 36px); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow); } .hvs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: none; } .hvs-steps__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 12px; color: var(--hvs-muted); font: 700 .78rem/1.2 var(--hvs-font-head); text-align: center; border-bottom: 4px solid var(--hvs-line); } @media (min-width: 600px) { .hvs-steps__item { flex-direction: row; justify-content: center; font-size: .98rem; } } .hvs-steps__btn { display: flex; flex-direction: inherit; align-items: center; justify-content: center; gap: inherit; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; text-decoration: none; cursor: pointer; } .hvs-steps__btn:focus-visible { outline: 3px solid var(--hvs-yellow); outline-offset: 4px; border-radius: 6px; } .hvs-steps__item.is-done .hvs-steps__btn:hover .hvs-steps__label { text-decoration: underline; } .hvs-steps__item.is-active .hvs-steps__btn { cursor: default; } .hvs-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hvs-mist); color: var(--hvs-muted); font: 900 1rem/1 var(--hvs-font-head); flex: none; } .hvs-steps__item.is-active { color: var(--hvs-ink); border-color: var(--hvs-yellow); } .hvs-steps__item.is-active .hvs-steps__num { background: var(--hvs-yellow); color: var(--hvs-ink); } .hvs-steps__item.is-done { color: var(--hvs-green); border-color: var(--hvs-green); } .hvs-steps__item.is-done .hvs-steps__num { background: var(--hvs-green); color: var(--hvs-white); } .hvs-booking__notice { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--hvs-radius-sm); background: var(--hvs-danger-050); color: var(--hvs-danger); font-weight: 600; } .hvs-step__title { font-size: 1.3rem; margin: 1.4em 0 .6em; } .hvs-step > .hvs-step__title:first-child { margin-top: 0; } .hvs-step__hint { color: var(--hvs-muted); font-size: .92rem; } .hvs-step__nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hvs-line); } .hvs-step__nav .hvs-btn--lg:last-child { margin-left: auto; } @media (max-width: 599px) { .hvs-step__nav .hvs-btn--lg { width: 100%; } .hvs-step__nav .hvs-btn--ghost { order: 2; width: 100%; } } .hvs-postcode { display: flex; flex-wrap: wrap; gap: 10px; } .hvs-postcode__input { flex: 1 1 220px; font-size: 1.1rem; text-transform: uppercase; } .hvs-postcode__input::placeholder { text-transform: none; } .hvs-postcode__go { flex: 0 0 auto; } @media (max-width: 479px) { .hvs-postcode__go { width: 100%; } } .hvs-postcode__result { min-height: 1.5em; margin: 10px 0 0; font-weight: 600; font-size: .95rem; } .hvs-postcode__result.is-ok { color: var(--hvs-green); } .hvs-postcode__result.is-error { color: var(--hvs-danger); } .hvs-skips { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } .hvs-skip { position: relative; display: block; cursor: pointer; } .hvs-skip__radio { position: absolute; opacity: 0; pointer-events: none; } .hvs-skip__card { display: flex; gap: 14px; height: 100%; padding: 12px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); transition: border-color .15s, box-shadow .15s, background .15s; } .hvs-skip__media { flex: none; width: 92px; } .hvs-skip__media img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--hvs-radius-sm); } .hvs-skip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 22px; } .hvs-skip__name { margin-bottom: 4px; color: var(--hvs-green); font: 900 1.3rem/1.15 var(--hvs-font-head); } .hvs-skip__meta { color: var(--hvs-muted); font-size: .8rem; line-height: 1.35; } .hvs-skip__price { margin-top: auto; padding-top: 6px; color: var(--hvs-ink); font: 900 1.2rem/1.1 var(--hvs-font-head); } .hvs-skip__price small { color: var(--hvs-muted); font: 600 .78rem/1 var(--hvs-font-body); } .hvs-skip__tick { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; border: 2px solid var(--hvs-line); border-radius: 50%; background: var(--hvs-white); } .hvs-skip:hover .hvs-skip__card { border-color: rgba(14, 109, 6, .45); } .hvs-skip__radio:checked + .hvs-skip__card { border-color: var(--hvs-green); background: var(--hvs-green-050); box-shadow: 0 0 0 4px rgba(14, 109, 6, .12); } .hvs-skip__radio:checked + .hvs-skip__card .hvs-skip__tick { border-color: var(--hvs-green); background: var(--hvs-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat; } .hvs-skip__radio:focus-visible + .hvs-skip__card { outline: 3px solid var(--hvs-yellow); outline-offset: 2px; } .hvs-skip.is-unavailable { cursor: not-allowed; opacity: .55; } .hvs-days { max-width: 520px; } .hvs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .hvs-cal__title { color: var(--hvs-ink); font: 800 1.15rem/1.2 var(--hvs-font-head); } .hvs-cal__nav { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--hvs-line); border-radius: 50%; background: var(--hvs-white); color: var(--hvs-green); font: 900 1.5rem/1 var(--hvs-font-head); cursor: pointer; } .hvs-cal__nav:hover:not(:disabled) { border-color: var(--hvs-green); background: var(--hvs-green-050); } .hvs-cal__nav:disabled { color: var(--hvs-line); cursor: default; } .hvs-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .hvs-cal__dow { padding-bottom: 2px; color: var(--hvs-muted); font: 700 .72rem/1 var(--hvs-font-head); text-align: center; text-transform: uppercase; letter-spacing: .06em; } .hvs-day { position: relative; display: block; cursor: pointer; } .hvs-day__radio, .hvs-slot__radio { position: absolute; opacity: 0; pointer-events: none; } .hvs-day__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; min-height: 40px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); background: var(--hvs-white); line-height: 1; transition: border-color .15s, background .15s; } .hvs-day__num { color: var(--hvs-ink); font: 800 1.05rem/1 var(--hvs-font-head); } .hvs-day__tag { margin-top: 3px; color: var(--hvs-danger); font: 800 .62rem/1 var(--hvs-font-head); text-transform: uppercase; letter-spacing: .04em; } .hvs-day:hover .hvs-day__chip { border-color: rgba(14, 109, 6, .45); background: var(--hvs-green-050); } .hvs-day__radio:checked + .hvs-day__chip { border-color: var(--hvs-green); background: var(--hvs-green); } .hvs-day__radio:checked + .hvs-day__chip span { color: var(--hvs-white); } .hvs-day__radio:focus-visible + .hvs-day__chip, .hvs-slot__radio:focus-visible + .hvs-slot__chip { outline: 3px solid var(--hvs-yellow); outline-offset: 2px; } .hvs-day.is-full, .hvs-day.is-closed { cursor: not-allowed; } .hvs-day.is-full .hvs-day__chip, .hvs-day.is-full:hover .hvs-day__chip { border-color: transparent; background: repeating-linear-gradient(-45deg, var(--hvs-mist) 0 6px, #e7ece5 6px 12px); } .hvs-day.is-full .hvs-day__num { color: var(--hvs-muted); text-decoration: line-through; } .hvs-day.is-closed .hvs-day__chip { border-color: transparent; background: none; } .hvs-day.is-closed .hvs-day__num { color: #b9c3bb; font-weight: 600; } .hvs-cal__key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; color: var(--hvs-muted); font-size: .82rem; } .hvs-cal__swatch { width: 14px; height: 14px; margin-left: 8px; border: 2px solid var(--hvs-line); border-radius: 4px; background: var(--hvs-white); } .hvs-cal__swatch:first-child { margin-left: 0; } .hvs-cal__swatch.is-full { border-color: transparent; background: repeating-linear-gradient(-45deg, var(--hvs-mist) 0 3px, #dfe5dc 3px 6px); } .hvs-cal__swatch.is-closed { border-color: transparent; background: none; box-shadow: inset 0 0 0 1px #d5ddd6; } .hvs-slots { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); } @media (max-width: 479px) { .hvs-slots { grid-template-columns: repeat(2, 1fr); } } .hvs-slot { position: relative; cursor: pointer; } .hvs-slot__chip { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; text-align: center; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); background: var(--hvs-white); transition: border-color .15s, background .15s; } .hvs-slot__label { color: var(--hvs-ink); font: 800 1.02rem/1.2 var(--hvs-font-head); } .hvs-slot__time { color: var(--hvs-muted); font-size: .8rem; } .hvs-slot__left { color: var(--hvs-green); font-size: .82rem; font-weight: 700; } .hvs-slot:hover .hvs-slot__chip { border-color: rgba(14, 109, 6, .45); } .hvs-slot__radio:checked + .hvs-slot__chip { border-color: var(--hvs-green); background: var(--hvs-green-050); box-shadow: 0 0 0 4px rgba(14, 109, 6, .12); } .hvs-slot.is-full { cursor: not-allowed; } .hvs-slot.is-full .hvs-slot__chip { background: var(--hvs-mist); } .hvs-slot.is-full .hvs-slot__label { color: var(--hvs-muted); text-decoration: line-through; } .hvs-slot.is-full .hvs-slot__time { color: var(--hvs-muted); font-size: .8rem; } .hvs-slot__left { color: var(--hvs-danger); } .hvs-loading { color: var(--hvs-muted); } .hvs-summary { margin: 0 0 18px; border: 2px solid var(--hvs-line); border-radius: var(--hvs-radius); overflow: hidden; } .hvs-summary > div { display: grid; gap: 4px; padding: 14px 18px; border-bottom: 1px solid var(--hvs-line); } @media (min-width: 600px) { .hvs-summary > div { grid-template-columns: 160px 1fr; gap: 16px; } } .hvs-summary > div:last-child { border-bottom: 0; } .hvs-summary dt { color: var(--hvs-muted); font: 700 .85rem/1.4 var(--hvs-font-head); text-transform: uppercase; letter-spacing: .06em; } .hvs-summary dd { margin: 0; color: var(--hvs-ink); font-weight: 600; } .hvs-summary__total { background: var(--hvs-green-050); } .hvs-summary__total dd { color: var(--hvs-green); font: 900 1.6rem/1 var(--hvs-font-head); } /* 10. WooCommerce ---------------------------------------------------------- */ .hvs-shop { --wc-primary: var(--hvs-green); } .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { position: relative; margin: 0 0 22px !important; padding: 16px 18px 16px 52px !important; list-style: none; border: 0 !important; border-left: 6px solid var(--hvs-green) !important; border-radius: var(--hvs-radius-sm); background: var(--hvs-green-050) !important; color: var(--hvs-ink) !important; font-weight: 600; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: 18px !important; top: 16px !important; color: var(--hvs-green) !important; } .woocommerce-error { border-left-color: var(--hvs-danger) !important; background: var(--hvs-danger-050) !important; } .woocommerce-error::before { color: var(--hvs-danger) !important; } .woocommerce-error li { margin: 0 0 4px; } .woocommerce-message .button, .woocommerce-info .button { float: none !important; margin: 0 0 0 auto; min-height: 40px; padding: .5em 1em; } /* Info/success notices: text, icon and any button share one centred line. */ .woocommerce-message, .woocommerce-info { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-height: 56px; } .woocommerce-message::before, .woocommerce-info::before { top: 50% !important; transform: translateY(-50%); } .woocommerce form .form-row { margin: 0 0 14px; padding: 0; } .woocommerce form .form-row label { color: var(--hvs-ink); font: 700 .92rem/1.4 var(--hvs-font-head); margin-bottom: 6px; } .woocommerce form .form-row .required { color: var(--hvs-danger); text-decoration: none; } .woocommerce-input-wrapper { display: block; width: 100%; } .woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--hvs-danger); } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } @media (min-width: 600px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 48.5%; float: left; } .woocommerce form .form-row-last { float: right; } } .woocommerce form .form-row-wide { clear: both; } /* Basket */ .woocommerce table.shop_table { border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); border-collapse: separate; overflow: hidden; background: var(--hvs-white); margin-bottom: 24px; } .woocommerce table.shop_table th { background: var(--hvs-mist); color: var(--hvs-ink); font-family: var(--hvs-font-head); padding: 14px 16px; } .woocommerce table.shop_table td { padding: 14px 16px; border-top: 1px solid var(--hvs-line); } .woocommerce table.cart img { width: 72px; border-radius: var(--hvs-radius-sm); } .woocommerce table.cart td.actions .coupon .input-text { width: 160px; min-height: 48px; margin-right: 8px; } .woocommerce td.product-name dl.variation, .woocommerce .wc-item-meta { margin: 8px 0 0; font-size: .86rem; color: var(--hvs-body); } .woocommerce td.product-name dl.variation dt, .woocommerce .wc-item-meta .wc-item-meta-label { float: none; display: inline; font-weight: 700; color: var(--hvs-ink); } .woocommerce td.product-name dl.variation dd { display: inline; margin: 0; } .woocommerce td.product-name dl.variation dd::after { content: ""; display: block; } .woocommerce td.product-name dl.variation dd p { display: inline; margin: 0; } .woocommerce .wc-item-meta { padding: 0; list-style: none; } .woocommerce .wc-item-meta p { display: inline; margin: 0; } .woocommerce a.remove { color: var(--hvs-danger) !important; } .woocommerce a.remove:hover { background: var(--hvs-danger); color: var(--hvs-white) !important; } .woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; } @media (min-width: 900px) { .woocommerce .cart-collaterals .cart_totals { width: 46%; float: right; } } .woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-account h2, .woocommerce-account h3 { font-size: 1.4rem; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; font-size: 1.1rem; min-height: 58px; } /* Checkout: step bar, left column of numbered cards, sticky "Your booking" summary on the right. */ .hvs-steps--checkout { max-width: 760px; margin: 0 auto 32px; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { margin: 0 0 20px !important; padding: 12px 16px 12px 46px !important; font-size: .95rem; } .woocommerce-checkout .col2-set { width: 100%; } .woocommerce-checkout .col2-set::before, .woocommerce-checkout .col2-set::after { display: none; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; } @media (min-width: 1000px) { .woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr; gap: 0 32px; align-items: start; } .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } .woocommerce-checkout form.checkout > :not(#customer_details, #order_review_heading, #order_review, .woocommerce-NoticeGroup) { display: none; } .woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; } .woocommerce-checkout #order_review_heading { grid-row: 1; } .woocommerce-checkout #order_review { grid-row: 2; position: sticky; top: calc(var(--hvs-header-h) + 20px); } } .hvs-co-card, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout .woocommerce-additional-fields { margin: 0 0 20px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); } .woocommerce-checkout .woocommerce-shipping-fields:not(:has(#ship-to-different-address)) { display: none; } .hvs-co-card .woocommerce-billing-fields__field-wrapper::after, .hvs-co-card .create-account::after { content: ""; display: table; clear: both; } .hvs-co-card__title, .woocommerce-checkout .woocommerce-additional-fields h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px !important; font-size: 1.3rem !important; } .hvs-co-card__num { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--hvs-green); color: var(--hvs-white); font: 900 .95rem/1 var(--hvs-font-head); } .hvs-co-card__hint { margin: -10px 0 16px; color: var(--hvs-muted); font-size: .9rem; } .hvs-co-card .form-row:last-child { margin-bottom: 0; } .woocommerce form .form-row.hvs-hidden-field { display: none !important; } .woocommerce-checkout .form-row .description { margin-top: 6px; color: var(--hvs-muted); font-size: .82rem; } .woocommerce-checkout .create-account { margin: 0; padding: 0; background: none; } .woocommerce-checkout .woocommerce-account-fields .create-account .form-row { margin-bottom: 0; } #ship-to-different-address { margin: 0 !important; font-size: 1.05rem !important; } #ship-to-different-address label { display: flex; gap: 12px; align-items: center; margin: 0; font-weight: 700; cursor: pointer; } #ship-to-different-address input { width: 20px; height: 20px; accent-color: var(--hvs-green); } .woocommerce-checkout .shipping_address { margin-top: 18px; } .woocommerce-checkout .woocommerce-additional-fields h3 { font-size: 1.15rem !important; } .woocommerce-checkout #order_comments { min-height: 96px; } .woocommerce-checkout #order_comments_field label:empty { display: none; } /* Your booking summary */ .woocommerce-checkout #order_review_heading { margin: 0 0 12px; font-size: 1.3rem; } .woocommerce-checkout #order_review { padding: 0; overflow: hidden; border: 1px solid var(--hvs-line); border-top: 6px solid var(--hvs-yellow); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow); } .woocommerce-checkout #order_review table.shop_table { margin: 0; border: 0; border-radius: 0; } .woocommerce-checkout #order_review thead { display: none; } .woocommerce-checkout #order_review tbody td { border-top: 0; } .woocommerce-checkout #order_review .cart_item td.product-name { padding: 20px 20px 16px; } .woocommerce-checkout #order_review .cart_item td.product-total { display: none; } .woocommerce-checkout #order_review table.shop_table, .woocommerce-checkout #order_review table.shop_table :is(tbody, tfoot, .cart_item, td.product-name) { display: block; width: 100%; } .woocommerce-checkout #order_review tfoot tr { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hvs-line); } .woocommerce-checkout #order_review tfoot tr > * { display: block; border-top: 0 !important; } .woocommerce-checkout #order_review tfoot th { flex: none; } .hvs-mobile-book[hidden] { display: none !important; } .hvs-co-item { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; } .hvs-co-item__img { flex: none; width: 64px !important; height: 64px; object-fit: cover; border-radius: var(--hvs-radius-sm); } .hvs-co-item__name { color: var(--hvs-ink); font: 900 1.2rem/1.2 var(--hvs-font-head); } .woocommerce-checkout #order_review dl.variation { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 12px 0 0; padding: 14px; border-radius: var(--hvs-radius-sm); background: var(--hvs-mist); font-size: .88rem; } .woocommerce-checkout #order_review dl.variation dt { display: block; color: var(--hvs-muted); font-weight: 600; } .woocommerce-checkout #order_review dl.variation dd { display: block; color: var(--hvs-ink); font-weight: 600; } .woocommerce-checkout #order_review dl.variation dd::after { content: none; } .woocommerce-checkout #order_review tfoot th, .woocommerce-checkout #order_review tfoot td { padding: 10px 20px; border-top: 1px solid var(--hvs-line); background: none; font-size: .95rem; } .woocommerce-checkout #order_review tfoot th { color: var(--hvs-body); font-family: var(--hvs-font-body); font-weight: 600; } .woocommerce-checkout #order_review tfoot td { text-align: right; color: var(--hvs-ink); } .woocommerce-checkout #order_review tfoot .woocommerce-shipping-totals td { font-size: .9rem; color: var(--hvs-green); font-weight: 700; } .woocommerce-checkout #order_review tfoot .woocommerce-shipping-totals td p { margin: 0; } .woocommerce-checkout #order_review tfoot ul#shipping_method { margin: 0; padding: 0; list-style: none; } .woocommerce-checkout #order_review tfoot tr.order-total { background: var(--hvs-green-050); } .woocommerce-checkout #order_review tfoot .order-total th, .woocommerce-checkout #order_review tfoot .order-total td { padding-top: 16px; padding-bottom: 16px; background: none; color: var(--hvs-ink); font: 900 1.3rem/1 var(--hvs-font-head); } .woocommerce-checkout #order_review tfoot .order-total td strong { font-weight: 900; } .woocommerce-checkout #payment { border-radius: 0; background: var(--hvs-white) !important; } .woocommerce-checkout #payment ul.payment_methods { padding: 18px 20px !important; border-bottom: 1px solid var(--hvs-line) !important; } .woocommerce-checkout #payment ul.payment_methods li { font-weight: 700; color: var(--hvs-ink); } .woocommerce-checkout #payment div.payment_box { margin: 10px 0 0 !important; padding: 12px 14px !important; background: var(--hvs-mist) !important; color: var(--hvs-body) !important; border-radius: var(--hvs-radius-sm); font-size: .88rem; font-weight: 400; } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--hvs-mist) !important; } .woocommerce-checkout #payment div.form-row.place-order { margin: 0; padding: 18px 20px 20px !important; } .woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 12px; color: var(--hvs-muted); font-size: .8rem; line-height: 1.5; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0 0 16px; padding: 0; } .woocommerce-checkout .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 600; } .woocommerce-checkout .woocommerce-form__label-for-checkbox input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--hvs-green); } .woocommerce-checkout #place_order { width: 100%; min-height: 60px; font-size: 1.15rem; float: none !important; } .hvs-co-trust { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 12px 0 0; color: var(--hvs-muted); font-size: .8rem; } .hvs-co-trust svg { flex: none; color: var(--hvs-green); } /* Single skip product */ .single-product div.product { display: grid; gap: 32px; } @media (min-width: 900px) { .single-product div.product { grid-template-columns: 1fr 1fr; align-items: start; } .single-product div.product .woocommerce-tabs { grid-column: 1 / -1; } } .single-product div.product .woocommerce-product-gallery, .single-product div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; } .single-product div.product .woocommerce-product-gallery img { border-radius: var(--hvs-radius); } .single-product .product_title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); } .single-product div.product p.price { color: var(--hvs-green) !important; font: 900 1.8rem/1.2 var(--hvs-font-head); } .hvs-price-note { color: var(--hvs-muted); font: 600 .85rem/1.3 var(--hvs-font-body); } .hvs-specs { display: grid; gap: 0; margin: 18px 0 22px; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); overflow: hidden; } .hvs-specs div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--hvs-line); font-size: .95rem; } .hvs-specs div:last-child { border-bottom: 0; } .hvs-specs dt { color: var(--hvs-muted); font-weight: 700; } .hvs-specs dd { margin: 0; color: var(--hvs-ink); font-weight: 600; } .single-product .product_meta { display: none; } .woocommerce-tabs ul.tabs { display: none; } .woocommerce-tabs .panel { padding: 0; } .woocommerce-tabs .panel > h2:first-child { display: none; } .woocommerce ul.products { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 0 18px; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); overflow: hidden; background: var(--hvs-white); text-align: center; } .woocommerce ul.products li.product img { margin: 0 0 12px !important; aspect-ratio: 4 / 3; object-fit: cover; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 14px !important; font-size: 1.15rem !important; color: var(--hvs-ink); } .woocommerce ul.products li.product .price { display: block; padding: 0 14px; color: var(--hvs-green) !important; font-weight: 800; } .woocommerce ul.products li.product .button { margin-top: 10px; } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { display: none; } /* 11. Account -------------------------------------------------------------- */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } /* minmax(0) keeps the scrolling tab strip from widening the page on mobile */ @media (min-width: 900px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } .woocommerce-account.logged-in .woocommerce > :is(.woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-info, .woocommerce-error) { grid-column: 1 / -1; } .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation { grid-column: 1; } .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content { grid-column: 2; } } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; min-width: 0; float: none !important; } .woocommerce-MyAccount-navigation ul { margin: 0; padding: 8px; list-style: none; border-radius: var(--hvs-radius); background: var(--hvs-mist); } /* Phones and tablets: every account tab visible as a grid (2 across, 3 on tablets) rather than a strip that scrolls off-screen. */ @media (max-width: 899px) { .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .woocommerce-MyAccount-navigation a { text-align: center; white-space: normal; } } @media (min-width: 600px) and (max-width: 899px) { .woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .woocommerce-MyAccount-navigation a { display: block; padding: 12px 14px; border-radius: var(--hvs-radius-sm); color: var(--hvs-ink); font: 700 .95rem/1.2 var(--hvs-font-head); text-decoration: none; white-space: nowrap; } .woocommerce-MyAccount-navigation a:hover { background: var(--hvs-white); color: var(--hvs-green); } .woocommerce-MyAccount-navigation .is-active a { background: var(--hvs-green); color: var(--hvs-white); } .woocommerce-MyAccount-navigation-link--my-skips a::before { content: ""; } /* Logged out: Log in and Register as two matching cards, side by side from 768px. */ .woocommerce-account:not(.logged-in) .woocommerce > .u-columns, .woocommerce-account:not(.logged-in) #customer_login { display: grid; gap: 24px; width: 100%; } #customer_login::before, #customer_login::after { display: none !important; } /* Woo clearfix would take grid cells */ @media (min-width: 768px) { .woocommerce-account:not(.logged-in) #customer_login { grid-template-columns: 1fr 1fr; align-items: stretch; } } #customer_login .u-column1, #customer_login .u-column2 { display: flex; flex-direction: column; width: 100% !important; float: none !important; margin: 0; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--hvs-line); border-top: 5px solid var(--hvs-green); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); } #customer_login .u-column2 { border-top-color: var(--hvs-yellow); } #customer_login h2 { margin: 0 0 6px; font-size: 1.5rem; } #customer_login form.login, #customer_login form.register { display: flex; flex: 1; flex-direction: column; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none; } #customer_login .hvs-auth__intro { margin: 0 0 18px; color: var(--hvs-muted); font-size: .95rem; } #customer_login .form-row { margin: 0 0 16px; padding: 0; } #customer_login .woocommerce-privacy-policy-text p { margin: 0 0 16px; color: var(--hvs-muted); font-size: .82rem; line-height: 1.5; } #customer_login form.login > .form-row:last-of-type { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; } #customer_login .woocommerce-form-login__rememberme { order: 2; display: inline-flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; } #customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { order: 1; width: 100%; margin: 0 !important; } #customer_login .lost_password { margin: 4px 0 0; font-size: .9rem; } #customer_login form.register > .form-row:last-of-type { margin-top: auto; margin-bottom: 0; } .woocommerce form.login, .woocommerce form.register { margin: 0 !important; padding: 24px !important; border: 1px solid var(--hvs-line) !important; border-radius: var(--hvs-radius) !important; background: var(--hvs-white); } /* Checkout "Booked with us before?" login: keep it clear of the billing card below and space out its controls. */ .woocommerce-checkout .woocommerce form.login { margin: 0 0 28px !important; padding: clamp(20px, 3vw, 28px) !important; } .woocommerce-checkout form.login > p:first-child { margin: 0 0 18px; color: var(--hvs-muted); } .woocommerce-checkout form.login .form-row { margin: 0 0 16px; padding: 0; } .woocommerce-checkout form.login .form-row:has(.woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 4px; } .woocommerce-checkout form.login .woocommerce-form-login__rememberme { display: inline-flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; } .woocommerce-checkout form.login .woocommerce-form-login__submit { margin: 0 !important; } .woocommerce-checkout form.login .lost_password { margin: 0; font-size: .9rem; } .hvs-account-panel { display: grid; gap: 16px; margin: 0 0 24px; } @media (min-width: 700px) { .hvs-account-panel { grid-template-columns: 1fr 1fr; } } .hvs-account-panel > div { padding: 22px; border-radius: var(--hvs-radius); background: var(--hvs-mist); border-top: 5px solid var(--hvs-yellow); } .hvs-account-panel > div + div { border-top-color: var(--hvs-green); } .hvs-account-panel h3 { font-size: 1.25rem; margin-bottom: .3em; } .hvs-myskips { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .hvs-myskip { padding: 20px; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); border-left: 6px solid var(--hvs-green); } .hvs-myskip--requested { border-left-color: var(--hvs-yellow); } .hvs-myskip--collected { border-left-color: var(--hvs-line); opacity: .85; } .hvs-myskip__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hvs-myskip__name { color: var(--hvs-ink); font: 800 1.2rem/1.2 var(--hvs-font-head); } .hvs-myskip__meta { display: grid; gap: 8px 20px; margin: 0 0 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); } .hvs-myskip__meta dt { color: var(--hvs-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .hvs-myskip__meta dd { margin: 0; color: var(--hvs-ink); font-weight: 600; font-size: .95rem; } .hvs-myskip__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; } .hvs-myskip__note { align-self: center; color: var(--hvs-muted); font-size: .9rem; } .hvs-collect { flex: 1 1 260px; } .hvs-collect summary { list-style: none; } .hvs-collect summary::-webkit-details-marker { display: none; } .hvs-collect[open] summary { margin-bottom: 12px; } .hvs-collect__form { padding: 18px; border-radius: var(--hvs-radius-sm); background: var(--hvs-mist); } .hvs-badge { display: inline-block; padding: 5px 12px; border-radius: 999px; font: 800 .78rem/1.2 var(--hvs-font-head); letter-spacing: .03em; } .hvs-badge--booked { background: #e8f0fe; color: #1a4fb5; } .hvs-badge--onhire { background: var(--hvs-green-050); color: var(--hvs-green); } .hvs-badge--requested { background: #fff4cc; color: #7a5c00; } .hvs-badge--collected { background: var(--hvs-mist); color: var(--hvs-muted); } .hvs-empty { padding: 32px; border-radius: var(--hvs-radius); background: var(--hvs-mist); text-align: center; } .woocommerce-orders-table .button { min-height: 38px; padding: .4em .9em; font-size: .88rem; } /* Contact Form 7 */ .hvs-cf7 .wpcf7-form-control-wrap { display: block; } .hvs-cf7 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px 18px; } .hvs-cf7 .wpcf7-list-item { margin: 0; } .hvs-cf7 .wpcf7-list-item label { display: flex; gap: 8px; align-items: center; font-weight: 600; } .hvs-cf7 .wpcf7-list-item input { width: 20px; height: 20px; accent-color: var(--hvs-green); } .hvs-cf7 .wpcf7-not-valid { border-color: var(--hvs-danger); } .hvs-cf7 .wpcf7-not-valid-tip { margin-top: 6px; color: var(--hvs-danger); font-size: .88rem; font-weight: 600; } .hvs-cf7 .wpcf7-submit { margin-top: 6px; } .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--hvs-radius-sm); border-width: 2px; font-weight: 600; } .wpcf7 form.sent .wpcf7-response-output { border-color: var(--hvs-green); background: var(--hvs-green-050); } .wpcf7-spinner { vertical-align: middle; } /* WPForms */ .wpforms-container .wpforms-field-label { color: var(--hvs-ink) !important; font: 700 .92rem/1.4 var(--hvs-font-head) !important; } .wpforms-container button[type="submit"] { background: var(--hvs-yellow) !important; color: var(--hvs-ink) !important; border: 0 !important; border-radius: 999px !important; min-height: 52px; padding: .8em 1.8em !important; font: 800 1.05rem/1 var(--hvs-font-head) !important; } /* 12. Footer --------------------------------------------------------------- */ .hvs-footer { background: var(--hvs-forest-900); color: rgba(255, 255, 255, .72); font-size: .94rem; padding-bottom: 72px; } @media (min-width: 768px) { .hvs-footer { padding-bottom: 0; } } .hvs-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; } .hvs-footer a:hover { color: var(--hvs-yellow); } .hvs-footer__grid { display: grid; gap: 32px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: 40px; } @media (min-width: 700px) { .hvs-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { .hvs-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } } .hvs-footer__brand .hvs-logo img { width: 260px; margin-bottom: 18px; } .hvs-footer__brand p { max-width: 380px; } .hvs-footer__social { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; } .hvs-footer__social .hvs-icon { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .1); } .hvs-footer__title { color: var(--hvs-white); font-size: 1.05rem; margin-bottom: 14px; } .hvs-footer__list { margin: 0; padding: 0; list-style: none; } .hvs-footer__list li { margin-bottom: 8px; } .hvs-footer__contact { margin: 0; padding: 0; list-style: none; } .hvs-footer__contact li { display: flex; gap: 10px; margin-bottom: 12px; line-height: 1.45; word-break: break-word; } .hvs-footer__contact .hvs-icon { color: var(--hvs-lime); margin-top: 3px; } .hvs-footer__licences { border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 0; font-size: .82rem; } .hvs-footer__licences .hvs-icon { color: var(--hvs-lime); margin-right: 8px; } .hvs-footer__bottom { background: rgba(0, 0, 0, .25); font-size: .82rem; } .hvs-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .hvs-footer__bottom p { margin: 0; } .hvs-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; } .hvs-mobile-book { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 54px; border-radius: 999px; background: var(--hvs-yellow); color: var(--hvs-ink); font: 900 1.08rem/1 var(--hvs-font-head); text-decoration: none; transition: transform .25s, opacity .2s, visibility 0s; } .hvs-mobile-book:hover { color: var(--hvs-ink); } /* Once slid away it must also stop being drawn: iOS Safari tints its see-through toolbar with whatever sits behind it. */ .hvs-mobile-book.is-hidden { transform: translateY(150%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s, opacity .2s, visibility 0s .25s; } @media (min-width: 768px) { .hvs-mobile-book { display: none; } } /* 13. Utilities ------------------------------------------------------------ */ .alignwide { max-width: 1200px; } .has-text-align-center { text-align: center; } .has-hvs-green-color { color: var(--hvs-green); } .has-hvs-forest-color { color: var(--hvs-forest); } .has-hvs-yellow-background-color { background-color: var(--hvs-yellow); } .has-hvs-mist-background-color { background-color: var(--hvs-mist); } .has-hvs-forest-background-color { background-color: var(--hvs-forest); } .has-hvs-green-background-color { background-color: var(--hvs-green); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Quantity is fixed at one skip per booking, so the basket has nothing to update. */ .woocommerce-cart-form button[name="update_cart"] { display: none !important; } .woocommerce-cart-form td.actions:not(:has(.coupon)) { display: none; } /* Postcode address finder (checkout + My Account addresses): button beside the postcode box. */ .woocommerce form .form-row:has(.hvs-findaddr__btn) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; } .woocommerce form .form-row:has(.hvs-findaddr__btn) > label { grid-column: 1 / -1; margin-bottom: -2px; } .hvs-findaddr__btn { min-height: 48px; padding-inline: 20px; white-space: nowrap; } .hvs-findaddr__btn:disabled { opacity: .7; cursor: progress; } .hvs-findaddr__panel, .hvs-findaddr__msg { grid-column: 1 / -1; } .hvs-findaddr__select { width: 100%; min-height: 48px; border-color: var(--hvs-green) !important; } .hvs-findaddr__msg:empty { display: none; } .hvs-findaddr__msg { color: var(--hvs-green); font-size: .88rem; font-weight: 600; } .hvs-findaddr__msg.is-error { color: var(--hvs-danger); } /* Order received / booking confirmed */ .hvs-thanks { margin: 0 0 40px; } .hvs-thanks__head { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 24px; } .hvs-thanks__tick { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--hvs-green); color: var(--hvs-white); } .hvs-thanks__title { margin: 4px 0 6px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); } .hvs-thanks__sub { margin: 0; color: var(--hvs-muted); } .hvs-thanks__sub strong { color: var(--hvs-ink); } .hvs-thanks__grid { display: grid; gap: 20px; } @media (min-width: 900px) { .hvs-thanks__grid { grid-template-columns: 1.1fr .9fr; align-items: start; } } .hvs-thanks__card { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); } .hvs-thanks__card h3 { margin: 0 0 14px; font-size: 1.25rem; } .hvs-thanks__list { margin: 0; } .hvs-thanks__list div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hvs-line); } .hvs-thanks__list div:last-child { border-bottom: 0; } .hvs-thanks__list dt { color: var(--hvs-muted); } .hvs-thanks__list dd { margin: 0; color: var(--hvs-ink); font-weight: 600; } @media (max-width: 479px) { .hvs-thanks__list div { grid-template-columns: 1fr; gap: 2px; } } .hvs-thanks__card > p:not(.hvs-thanks__actions) { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--hvs-radius-sm); background: var(--hvs-mist); font-size: .92rem; } .hvs-thanks__steps { margin: 0 0 20px; padding-left: 1.3em; } .hvs-thanks__steps li { margin-bottom: .6em; padding-left: 4px; } .hvs-thanks__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .woocommerce-order-received .woocommerce-order-details, .woocommerce-order-received .woocommerce-customer-details { margin: 0 0 32px; } .woocommerce-order-received .woocommerce-order-details__title, .woocommerce-order-received .woocommerce-column__title { font-size: 1.25rem; margin: 0 0 12px; } .woocommerce-order-received table.order_details tfoot th { background: none; font-family: var(--hvs-font-body); font-weight: 600; color: var(--hvs-body); } .woocommerce-order-received table.order_details tfoot tr:last-child th, .woocommerce-order-received table.order_details tfoot tr:last-child td { font-weight: 400; } .woocommerce-order-received .woocommerce-customer-details .col2-set { display: grid; gap: 20px; width: 100%; } .woocommerce-order-received .woocommerce-customer-details .col2-set::before, .woocommerce-order-received .woocommerce-customer-details .col2-set::after { display: none; } @media (min-width: 700px) { .woocommerce-order-received .woocommerce-customer-details .col2-set { grid-template-columns: 1fr 1fr; } } .woocommerce-order-received .woocommerce-customer-details .col2-set .col-1, .woocommerce-order-received .woocommerce-customer-details .col2-set .col-2 { width: 100%; float: none; } .woocommerce-customer-details address { height: calc(100% - 40px); padding: 18px 20px; border: 1px solid var(--hvs-line) !important; border-radius: var(--hvs-radius) !important; font-style: normal; line-height: 1.7; } /* Notices: Woo focuses them for screen readers; no visible focus ring needed. */ .woocommerce-error:focus, .woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-notices-wrapper:focus, .woocommerce-NoticeGroup:focus { outline: none; } /* Forgotten / reset password + email sent: one centred card, like the log in card. */ .woocommerce-lost-password .woocommerce { display: block; max-width: 560px; margin: 0 auto; } .hvs-auth-card { padding: clamp(24px, 4vw, 36px); border: 1px solid var(--hvs-line); border-top: 5px solid var(--hvs-green); border-radius: var(--hvs-radius); background: var(--hvs-white); box-shadow: var(--hvs-shadow-sm); } .hvs-auth-card__title { margin: 0 0 8px; font-size: 1.5rem; } .hvs-auth-card form.lost_reset_password { margin: 0; padding: 0; border: 0; } .hvs-auth-card form.lost_reset_password > p:first-child, .hvs-auth-card > p:not([class]) { margin: 0 0 18px; color: var(--hvs-muted); } .hvs-auth-card .form-row-first, .hvs-auth-card .form-row-last { width: 100% !important; float: none !important; } .hvs-auth-card form .form-row { margin: 0 0 16px; padding: 0; } .hvs-auth-card button[type="submit"] { width: 100%; } .hvs-auth-card .woocommerce-message, .hvs-auth-card .woocommerce-info { margin: 0 0 16px !important; } .hvs-auth-card__back { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hvs-line); font-size: .92rem; } /* My account: addresses as cards; edit forms in a card. */ .woocommerce-account .woocommerce-Addresses { display: grid; gap: 20px; width: 100%; margin-top: 12px; } .woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after { display: none; } @media (min-width: 700px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } } .woocommerce-account .woocommerce-Address { width: 100% !important; float: none !important; padding: 22px; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); } .woocommerce-account .woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .woocommerce-account .woocommerce-Address-title::before, .woocommerce-account .woocommerce-Address-title::after { display: none; } .woocommerce-account .woocommerce-Address-title h2 { flex: 1; margin: 0; font-size: 1.2rem; text-align: left; } .woocommerce-account .woocommerce-Address-title a.edit { float: none; padding: 7px 14px; border: 2px solid var(--hvs-green); border-radius: 999px; color: var(--hvs-green); font: 800 .85rem/1 var(--hvs-font-head); text-decoration: none; } .woocommerce-account .woocommerce-Address-title a.edit:hover { background: var(--hvs-green); color: var(--hvs-white); } .woocommerce-account .woocommerce-Address address { margin: 0; font-style: normal; line-height: 1.7; color: var(--hvs-body); } .woocommerce-account .woocommerce-Address address:has(> em:only-child) em, .woocommerce-account .woocommerce-Address address em { color: var(--hvs-muted); font-style: normal; } .woocommerce-account .woocommerce-MyAccount-content > form, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields { margin: 0; } .woocommerce-account .woocommerce-MyAccount-content > form.edit-account, .woocommerce-account .woocommerce-MyAccount-content > form:has(.woocommerce-address-fields) { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-white); } .woocommerce-account .woocommerce-MyAccount-content > form h2, .woocommerce-account .woocommerce-MyAccount-content > form h3 { margin: 0 0 16px; font-size: 1.3rem; } .woocommerce-account .woocommerce-address-fields__field-wrapper::after { content: ""; display: table; clear: both; } .woocommerce-account form.edit-account fieldset { margin: 8px 0 20px; padding: 20px; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius-sm); background: var(--hvs-mist); } /* Float the legend so it sits inside the box as a heading instead of straddling the border. */ .woocommerce-account form.edit-account legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; color: var(--hvs-ink); font: 800 1.15rem/1.2 var(--hvs-font-head); } .woocommerce-account form.edit-account legend + * { clear: both; } .woocommerce-account form.edit-account fieldset .form-row:last-of-type { margin-bottom: 0; } #account_display_name_description { display: block; margin-top: 6px; color: var(--hvs-muted); font-size: .85rem; } #account_display_name_description em { font-style: normal; } .woocommerce-MyAccount-content > p:first-child { color: var(--hvs-body); } /* Empty basket */ .woocommerce-cart .wc-empty-cart-message { max-width: 560px; margin: 0 auto; } .woocommerce-cart .cart-empty.woocommerce-info { display: block; margin: 0 !important; padding: 36px 24px 16px !important; border: 1px solid var(--hvs-line) !important; border-bottom: 0 !important; border-radius: var(--hvs-radius) var(--hvs-radius) 0 0 !important; background: var(--hvs-white) !important; color: var(--hvs-ink); font: 800 1.3rem/1.3 var(--hvs-font-head); text-align: center; } .woocommerce-cart .cart-empty.woocommerce-info::before { display: none; } .woocommerce-cart .return-to-shop { max-width: 560px; margin: 0 auto !important; padding: 0 24px 32px; border: 1px solid var(--hvs-line); border-top: 0; border-radius: 0 0 var(--hvs-radius) var(--hvs-radius); background: var(--hvs-white); text-align: center; } .woocommerce-cart .return-to-shop::before { content: "Pick a skip size, delivery day and time slot in three quick steps."; display: block; margin-bottom: 18px; color: var(--hvs-muted); font: 400 1rem/1.5 var(--hvs-font-body); } /* Legal pages (terms, delivery, privacy): contents list beside the text. */ .hvs-legal { display: grid; gap: 28px; } @media (min-width: 1000px) { .hvs-legal.has-toc { grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; } } .hvs-legal__toc { padding: 18px 20px; border: 1px solid var(--hvs-line); border-radius: var(--hvs-radius); background: var(--hvs-mist); } @media (min-width: 1000px) { .hvs-legal__toc { position: sticky; top: calc(var(--hvs-header-h) + 20px); max-height: calc(100vh - var(--hvs-header-h) - 40px); overflow-y: auto; } } .hvs-legal__toc summary { color: var(--hvs-ink); font: 800 1rem/1.2 var(--hvs-font-head); cursor: pointer; } .hvs-legal__toc ol { margin: 12px 0 0; padding-left: 1.4em; font-size: .9rem; } .hvs-legal__toc li { margin-bottom: 6px; color: var(--hvs-muted); } .hvs-legal__toc a { color: var(--hvs-body); text-decoration: none; } .hvs-legal__toc a:hover { color: var(--hvs-green); text-decoration: underline; } .hvs-legal__body { max-width: 860px; } .hvs-legal__body > p:first-child, .hvs-legal__body > p:nth-child(2):not(:has(+ h2 ~ p ~ p ~ h2)) { margin: 0; color: var(--hvs-muted); font-size: .92rem; } .hvs-legal__body > p:first-child { color: var(--hvs-ink); font-weight: 700; } .hvs-legal__body h2 { scroll-margin-top: calc(var(--hvs-header-h) + 20px); margin-top: 1.6em; padding-top: 1.1em; border-top: 1px solid var(--hvs-line); font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); } .hvs-legal__body h3 { font-size: 1.15rem; margin-top: 1.2em; } .hvs-legal__body li { margin-bottom: .4em; } /* Two columns where the left one ends in a photo that stretches to match the right (e.g. trade account form). */ @media (min-width: 782px) { .hvs-prose .wp-block-columns.hvs-fill-cols { align-items: stretch !important; } .hvs-prose .hvs-fill-cols > .wp-block-column:has(.hvs-fill-image) { display: flex; flex-direction: column; } .hvs-prose .hvs-fill-cols .hvs-fill-image { position: relative; flex: 1 1 auto; min-height: 260px; margin: 8px 0 0; overflow: hidden; border-radius: var(--hvs-radius); } .hvs-prose .hvs-fill-cols .hvs-fill-image :is(img, iframe) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } .hvs-prose .hvs-fill-image { margin-top: 8px; } .hvs-prose .hvs-map { overflow: hidden; border-radius: var(--hvs-radius); background: var(--hvs-mist); } .hvs-prose .hvs-map iframe { display: block; width: 100%; height: 320px; border: 0; } /* Contact details as a full-width row (top of the contact page): four across on desktop. */ .hvs-prose > .hvs-contact:first-child { margin: 0 0 clamp(32px, 5vw, 56px); } @media (min-width: 1000px) { .hvs-prose > .hvs-contact:first-child { grid-template-columns: repeat(4, 1fr); } } .hvs-prose > .hvs-contact:first-child a { padding: 18px 20px; word-break: normal; overflow-wrap: break-word; } /* Global Payments card fields (iframes): keep them inside the payment box on phones */ .woocommerce-checkout #payment div.payment_box fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .woocommerce-checkout #payment .globalpayments { width: 100% !important; max-width: 100%; float: none !important; margin: 0 0 14px; padding: 0; } .woocommerce-checkout #payment .globalpayments > label { display: block; margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: var(--hvs-ink); } .woocommerce-checkout #payment .globalpayments > div { width: 100%; max-width: 100%; } .woocommerce-checkout #payment .globalpayments iframe { display: block; width: 100% !important; max-width: 100%; min-height: 54px; border: 0; } /* Testimonial slider (homepage): native swipe/scroll-snap, arrows + auto-advance in main.js */ .hvs-testimonials--slider { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 4px 14px; margin: 0 -4px; overscroll-behavior-x: contain; } .hvs-testimonials--slider::-webkit-scrollbar { display: none; } .hvs-testimonials--slider:focus-visible { outline: 3px solid var(--hvs-green); outline-offset: 2px; border-radius: var(--hvs-radius); } .hvs-testimonials--slider > .hvs-testimonial { flex: 0 0 100%; scroll-snap-align: start; } @media (min-width: 700px) { .hvs-testimonials--slider > .hvs-testimonial { flex-basis: calc((100% - 18px) / 2); } } @media (min-width: 1024px) { .hvs-testimonials--slider > .hvs-testimonial { flex-basis: calc((100% - 36px) / 3); } } .hvs-tslider__nav { display: flex; justify-content: center; gap: 12px; margin-top: 10px; } .hvs-tslider__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 2px solid var(--hvs-green); border-radius: 50%; background: var(--hvs-white); color: var(--hvs-green); font: 800 1.3rem/1 var(--hvs-font-head); cursor: pointer; transition: background .15s, color .15s; } .hvs-tslider__btn:hover, .hvs-tslider__btn:focus-visible { background: var(--hvs-green); color: var(--hvs-white); outline: none; } @media (prefers-reduced-motion: reduce) { .hvs-testimonials--slider { scroll-behavior: auto; } } .hvs-account-back { margin: 0 0 20px; } .hvs-account-back .hvs-btn { min-height: 44px; padding: .55em 1.1em; font-size: .95rem; } .hvs-prose .hvs-tslider { margin: 0 0 2em; } .hvs-prose .hvs-tslider .hvs-testimonials { margin-bottom: 0; } /* My skips: current / past split + pager */ .hvs-myskips__title { margin: 0 0 12px; font: 800 1.25rem/1.2 var(--hvs-font-head); color: var(--hvs-ink); } .hvs-myskips + .hvs-myskips__title, .hvs-empty + .hvs-myskips__title { margin-top: 32px; } .hvs-myskips__count { display: inline-block; min-width: 1.6em; padding: 2px 8px; margin-left: 6px; border-radius: 999px; background: var(--hvs-mist); color: var(--hvs-muted); font-size: .8rem; text-align: center; vertical-align: middle; } .hvs-myskips__pager { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 20px; } .hvs-myskips__page { color: var(--hvs-muted); font-weight: 600; }