overrides must beat Enfold's generic `.template-page .entry-content-wrapper p { color: var(--slate); font-size: 15.5px }` (specificity 1,2,1). */ #top .hm-fares-foot { margin-top: 14px; font-size: 13px !important; color: var(--warm-grey) !important; } /* Home intro (sits between the hero and the fares table): teal Kanit statement in the left third, body copy in the right two-thirds, inset ~60px from the fares rules. The [av_section] is padding='no-padding', so the top spacing below is the only top spacing; the fares section's own 70px top padding supplies the gap underneath. The copy column is a

holding the

s (not one

with

) because wpautop splits a double
into separate paragraphs, which would fall out of the grid cell. */ #top .hm-intro { padding: 44px 0 0; } #top .hm-intro .intro-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px var(--gutter); align-items: start; max-width: 1200px; margin: 0 60px; } #top .hm-intro .intro-title { font-family: var(--font-display) !important; font-weight: 500 !important; font-size: 34px !important; line-height: 1.15 !important; color: #007d87 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } /* !important: beats Enfold's generic `.template-page .entry-content-wrapper p` (15.5px, specificity 1,2,1). */ #top .hm-intro .intro-copy p { font-size: 17px !important; line-height: 1.75 !important; color: var(--slate) !important; margin: 0 0 1.75em !important; } #top .hm-intro .intro-copy p:last-child { margin-bottom: 0 !important; } @media only screen and (max-width: 900px) { #top .hm-intro { padding-top: 32px; } #top .hm-intro .intro-grid { grid-template-columns: 1fr; gap: 20px; margin: auto 0; } #top .hm-intro .intro-title { font-size: 28px !important; } #top .hm-intro .intro-copy p { font-size: 16px !important; } } /* Timetable: teal departure bar + month-by-month season list (v2). */ #top .hm-ttbar { display: flex; flex-wrap: wrap; gap: 6px 40px; background: var(--teal); color: #fff; padding: 15px 24px; border-radius: 14px 14px 0 0; margin: 16px 0 0; } #top .hm-ttbar .svc { font-size: 14px; color: rgba(255,255,255,.82); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } #top .hm-ttbar .svc strong { color: #fff; font-weight: 600; } #top .hm-seasonlist { border: 1px solid var(--stone); border-top: none; border-radius: 0 0 14px 14px; overflow: hidden; background: var(--cream); } #top .hm-seasonlist .sl-row { display: grid; grid-template-columns: 1.6fr 1fr 160px; align-items: center; gap: 20px; padding: 0 24px; min-height: 66px; border-bottom: 1px solid var(--cyan); } #top .hm-seasonlist .sl-row:last-child { border-bottom: none; } #top .hm-seasonlist .sl-hdr { min-height: 44px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--warm-grey); } #top .hm-seasonlist .sl-mo { font-family: var(--font-body); font-size: 20px; font-weight: 500; color: var(--ink); display: flex; align-items: baseline; gap: 9px; } #top .hm-seasonlist .sl-mo .yr { font-size: 12px; letter-spacing: .08em; color: var(--warm-grey); text-transform: uppercase; } #top .hm-seasonlist .sl-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #2E9E6B; } #top .hm-seasonlist .sl-status .sd { width: 7px; height: 7px; border-radius: 50%; background: #2E9E6B; flex: 0 0 auto; } #top .hm-seasonlist .sl-status.off { color: var(--warm-grey); } #top .hm-seasonlist .sl-status.off .sd { background: var(--warm-grey); } #top .hm-seasonlist .sl-book { justify-self: end; display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: var(--paper) !important; text-decoration: none; border: none; padding: 10px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .15s ease; } #top .hm-seasonlist .sl-book:hover { background: var(--teal); color: #fff !important; } #top .hm-seasonlist .sl-row.is-off { background: #F1ECDD; } #top .hm-seasonlist .sl-row.is-off .sl-mo { color: var(--warm-grey); } #top .hm-seasonlist .sl-year { display: flex; align-items: center; gap: 14px; padding: 14px 24px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-grey); border-bottom: 1px solid var(--cyan); } /*#top .hm-seasonlist .sl-year::after { content: ''; flex: 1; height: 1px; background: var(--cyan); }*/ #top .hm-tt-note { font-size: 13px !important; color: var(--warm-grey) !important; margin-top: 12px; /* remove? */ } /* Timetable: daily departure cards (.dep-cards) - first content section under the hero (2026-09-16). Selectors are prefixed with #top so they out-rank Enfold's generic heading/paragraph rules (.responsive #top h2 = 0,2,1; #top .template-page .entry-content-wrapper p = 1,2,1). */ /* No inner gutter/max-width: the Enfold .container already supplies both, and the cards must stay flush with the teal .hm-ttbar below. */ #top .dep-cards { padding: 44px 0 0; } #top .dep-cards .section-label { font-size: 15px; color: #5E6A65; margin-bottom: 6px; } #top .dep-cards h2 { font-family: var(--font-display); font-weight: 500; font-size: 40px; line-height: 1.1; letter-spacing: 0; text-transform: none; color: #007d87; margin: 0 0 28px; } #top .dep-cards .dc-grid + .section-label { margin-top: 40px; } #top .dep-cards p.dc-note { margin: 0 0 28px; padding: 16px 20px; background: #F4EFE3; border-left: 3px solid #0F6E70; border-radius: 4px; font-size: 16px; line-height: 1.5; font-weight: 500; color: #1B2225; } #top .dep-cards .dc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } #top .dep-cards .dc-card { background: #F4EFE3; border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 3px rgba(27,34,37,.06); } #top .dep-cards .dc-card.dc-origin { background: #E4EFE9; box-shadow: inset 0 0 0 1.5px #0F6E70, 0 1px 3px rgba(27,34,37,.06); } #top .dep-cards .dc-card.dc-origin .dc-from { color: #0F6E70; } #top .dep-cards .dc-card.dc-origin .dc-dep { color: #0F6E70; } #top .dep-cards .dc-card.dc-dest { background: #0F6E70; } #top .dep-cards .dc-card.dc-dest .dc-from { color: #CFE7E0; } #top .dep-cards .dc-card.dc-dest .dc-stop { color: #fff; } #top .dep-cards .dc-card.dc-dest .dc-dep { color: #7ff0e8; } #top .dep-cards .dc-from { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8A8678; } #top .dep-cards .dc-stop { font-size: 19px; line-height: 1.25; color: #1B2225; margin-bottom: 10px; min-height: calc(19px * 1.25 * 2); } #top .dep-cards .dc-dep { font-family: var(--font-display); font-size: 38px; font-weight: 500; line-height: 1; color: #1B2225; font-variant-numeric: tabular-nums; margin-top: auto; } #top .dep-cards .dc-rule { height: 1px; background: #D9D1BE; margin: 16px 0 12px; } #top .dep-cards .dc-arrlab { font-size: 10.5px; white-space: nowrap; letter-spacing: .14em; text-transform: uppercase; color: #8A8678; } #top .dep-cards .dc-arr { font-size: 15px; color: #0F6E70; display: flex; align-items: baseline; gap: 8px; } #top .dep-cards .dc-arr b { font-family: var(--font-display); font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; } @media only screen and (max-width: 1100px) { #top .dep-cards .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (max-width: 700px) { #top .dep-cards { padding: 30px 0 0; } #top .dep-cards h2 { font-size: 26px; margin-bottom: 18px; } #top .dep-cards p.dc-note { font-size: 15px; padding: 14px 16px; margin-bottom: 22px; } /* mobile: one continuous journey list per direction instead of tiles */ #top .dep-cards .dc-grid { display: block; background: #F4EFE3; border-radius: 16px; padding: 6px 18px; box-shadow: 0 1px 3px rgba(27,34,37,.06); } #top .dep-cards .dc-card { background: none; border-radius: 0; box-shadow: none; padding: 0; display: grid; grid-template-columns: 62px 26px minmax(0, 1fr); align-items: center; column-gap: 0; row-gap: 0; position: relative; min-height: 62px; } #top .dep-cards .dc-card::before { content: ''; position: absolute; left: 73px; top: 0; bottom: 0; width: 2px; background: #D9D1BE; } #top .dep-cards .dc-card:first-child::before { top: 50%; } #top .dep-cards .dc-card:last-child::before { bottom: 50%; } #top .dep-cards .dc-card::after { content: ''; position: absolute; left: 68px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #F4EFE3; box-shadow: inset 0 0 0 2px #8A8678; } #top .dep-cards .dc-card.dc-origin::after, #top .dep-cards .dc-card.dc-dest::after { background: #0F6E70; box-shadow: inset 0 0 0 2px #0F6E70; } #top .dep-cards .dc-from { grid-column: 3; grid-row: 2; font-size: 10px; letter-spacing: .14em; padding-left: 18px; } #top .dep-cards .dc-stop { grid-column: 3; grid-row: 1; font-size: 17px; margin: 0; min-height: 0; padding-left: 18px; } #top .dep-cards .dc-dep { grid-column: 1; grid-row: 1 / span 2; font-size: 26px; margin: 0; text-align: left; } #top .dep-cards .dc-card.dc-origin, #top .dep-cards .dc-card.dc-dest { background: none; box-shadow: none; } #top .dep-cards .dc-card.dc-dest .dc-stop { color: #1B2225; font-weight: 500; } #top .dep-cards .dc-card.dc-dest .dc-dep { color: #0F6E70; } #top .dep-cards .dc-card.dc-dest .dc-from { color: #0F6E70; } } @media only screen and (max-width: 767px) { #top .hm-ttbar { flex-direction: column; gap: 4px; } #top .hm-seasonlist .sl-hdr { display: none; } #top .hm-seasonlist .sl-row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 18px; min-height: 0; align-items: baseline; } #top .hm-seasonlist .sl-mo { font-size: 18px; } #top .hm-seasonlist .sl-book { grid-column: 1 / -1; justify-self: start; margin-top: 8px; } } @media only screen and (max-width: 767px) { #top .hm-quickfacts { gap: 22px; } #top .hm-quote { font-size: 21px; } #top .hm-fares .fare-row { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 8px; padding: 20px 0; } #top .hm-fares .ftype { font-size: 19px; } #top .hm-fares .fprice { font-size: 26px; } #top .hm-fares .fnote { grid-column: 1 / -1; font-size: 13.5px; } } /* ================================================================== 12b. ROUTE PAGE - stop blocks (v2): photo/map slider + big heading + fact chips ================================================================== */ #top .hm-stops .stop { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; margin-bottom: 90px; } #top .hm-stops .stop:last-child { margin-bottom: 0; } #top .hm-stops .stop.reverse { grid-template-columns: 1fr 1.3fr; } #top .hm-stops .stop.reverse .stop-photo { grid-column: 2; grid-row: 1; } #top .hm-stops .stop.reverse .stop-text { grid-column: 1; grid-row: 1; } #top .hm-stops .stop-photo { position: relative; aspect-ratio: 4/3; background: var(--cream); overflow: hidden; border-radius: 14px; } #top .hm-stops .stop-photo .ss-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; z-index: 0; } #top .hm-stops .stop-photo .ss-slide.is-active { opacity: 1; z-index: 1; } #top .hm-stops .stop-photo .ss-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* embedded Google Map slide (Christchurch Airport "Live map") fills the slide like an image */ #top .hm-stops .stop-photo .ss-slide iframe.ss-map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } #top .hm-stops .stop-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,0) 66%, rgba(10,40,40,.5) 100%); } #top .hm-stops .stop-photo .ss-kind { position: absolute; top: 16px; right: 16px; z-index: 4; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; padding: 6px 12px; border-radius: 99px; } #top .hm-stops .stop-photo .coord { position: absolute; bottom: 16px; left: 16px; z-index: 3; color: rgba(255,255,255,.92); font-family: var(--font-body); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.5); } #top .hm-stops .stop-photo .ss-directions { position: absolute; bottom: 16px; right: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: var(--paper) !important; text-decoration: none; border: none; padding: 9px 15px; border-radius: 99px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; white-space: nowrap; transition: background .15s ease, transform .15s ease; } #top .hm-stops .stop-photo .ss-directions:hover { background: var(--teal); transform: translateY(-1px); } #top .hm-stops .stop-photo .ss-directions svg { width: 14px; height: 14px; } #top .hm-stops .stop-photo .ss-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,.85); color: var(--ink); font-size: 19px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s ease; } #top .hm-stops .stop-photo .ss-arrow:hover { background: #fff; } #top .hm-stops .stop-photo .ss-prev { left: 16px; } #top .hm-stops .stop-photo .ss-next { right: 16px; } #top .hm-stops .stop-photo .ss-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; } #top .hm-stops .stop-photo .ss-dot { width: 8px; height: 8px; border-radius: 99px; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: width .2s ease, background .2s ease; } #top .hm-stops .stop-photo .ss-dot.is-on { background: #fff; width: 22px; } #top .hm-stops .stop-text h3 { font-family: var(--font-display); font-size: 60px; line-height: .98; font-weight: 400; letter-spacing: -.03em; color: var(--ink); margin: 0 0 8px; } #top .hm-stops .stop-text h3 em { font-style: italic; color: var(--teal); } #top .hm-stops .stop-text .te-reo { font-family: var(--font-body) !important; font-style: italic; font-size: 20px !important; color: var(--slate) !important; margin: 0 0 20px !important; letter-spacing: -.01em; } #top .hm-stops .stop-text p.lede { font-size: 17px !important; line-height: 1.75; color: var(--charcoal) !important; margin: 0 0 22px; max-width: 520px; } #top .hm-stops .stop-text .facts { display: flex; flex-wrap: wrap; gap: 8px 10px; } #top .hm-stops .stop-text .facts .chip { background: var(--cream); color: var(--charcoal); padding: 8px 14px; border-radius: 99px; font-size: 15px; border: 1px solid var(--stone); display: inline-flex; align-items: center; gap: 8px; line-height: 1.35; } #top .hm-stops .stop-text .facts .chip .k { font-family: var(--font-body); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 500; } @media only screen and (max-width: 900px) { #top .hm-stops .stop, #top .hm-stops .stop.reverse { grid-template-columns: 1fr; gap: 22px; margin-bottom: 56px; } #top .hm-stops .stop.reverse .stop-photo, #top .hm-stops .stop.reverse .stop-text { grid-column: 1; grid-row: auto; } #top .hm-stops .stop-text h3 { font-size: 40px; } } /* ================================================================== 13. NATIVE Enfold images / galleries - Lake & Stone ================================================================== */ #top .avia_image, #top .avia-image-container img, #top .av-image-caption-overlay img { border-radius: 14px; } /* Enfold gallery: its defaults frame each image (#top div .avia-gallery img has a 1px border + 7px padding + square corners) - strip that for clean, rounded, full-bleed images. */ #top div .avia-gallery img, #top .avia-gallery .avia-gallery-thumb img { border: none !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 12px !important; width: 100% !important; height: auto !important; display: block; } #top .avia-gallery .avia-gallery-thumb, #top .avia-gallery .avia-gallery-thumb a { padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; } #top .avia-gallery { margin: 8px 0 0; } /* native card columns (things-to-do): image + heading + text */ #top .hm-cardcol .av-image-caption-overlay, #top .hm-cardcol img { border-radius: 12px; } #top .hm-cardcol .av-special-heading { margin-top: 14px; } #top .hm-cardcol .avia_textblock p { font-size: 14px; color: var(--slate); } /* Destinations "things to do" - v2 tiles: 2-wide grid, image with title/text overlaid */ #top .hm-things { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 28px; } #top .hm-things .hm-thing { position: relative; height: 380px; border-radius: 20px; overflow: hidden; /*border: 1px solid var(--stone);*/ display: flex; align-items: flex-end; background: var(--teal-deep); text-decoration: none; color: inherit; } #top .hm-things .hm-thing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; transition: transform .4s ease; } #top .hm-things .hm-thing:has(a.hm-thing-link):hover img { transform: scale(1.04); } /* whole-tile clickable via a stretched link (keeps the tile a wpautop-safe

) */ #top .hm-things .hm-thing .cap h3 a.hm-thing-link::after { content: ''; position: absolute; inset: 0; z-index: 3; } #top .hm-things .hm-thing::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(12,40,42,.86) 0%, rgba(12,40,42,.15) 55%, rgba(12,40,42,0) 100%); } #top .hm-things .hm-thing .cap { position: relative; z-index: 2; padding: 32px; color: #fff; } #top .hm-things .hm-thing .cap h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: #fff !important; margin: 0 0 8px; line-height: 1.15; } #top .hm-things .hm-thing .cap h3 a { color: #fff !important; text-decoration: none; border: none; } #top .hm-things .hm-thing .cap p { font-size: 15px !important; margin: 0; line-height: 1.6; color: rgba(255,255,255,.85) !important; } @media only screen and (max-width: 767px) { #top .hm-things { grid-template-columns: 1fr; } } /* "In pictures" - v2 photo rail slider (scroll-snap; arrows are progressive enhancement) */ #top .hm-gal .hm-rail-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } #top .hm-gal .hm-rail-head h2 { margin: 0; } #top .hm-gal .rail-nav { display: flex; gap: 8px; } #top .hm-gal .rn-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--stone); background: #fff; color: var(--teal); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease; } #top .hm-gal .rn-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); } #top .hm-gal .hm-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px)/4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #top .hm-gal .hm-rail .shot { scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; gap: 8px; } #top .hm-gal .hm-rail .shot-img { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: var(--cream); position: relative; } #top .hm-gal .hm-rail .shot-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #top .hm-gal .hm-rail .shot-credit { font-family: var(--font-body); font-size: 11px !important; letter-spacing: .04em; color: var(--warm-grey) !important; margin: 0; } @media only screen and (max-width: 900px) { #top .hm-gal .hm-rail { grid-auto-columns: calc((100% - 16px)/2); } } @media only screen and (max-width: 600px) { #top .hm-gal .hm-rail { grid-auto-columns: 86%; } } #top .hm-gal .hm-rail .shot { cursor: zoom-in; } /* Gallery lightbox (appended to by the footer script; not scoped to #top) */ .hm-lb { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(15,20,22,.93); padding: 48px; } .hm-lb.open { display: flex; } .hm-lb-fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: min(1100px, 92vw); } .hm-lb-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); display: block; } .hm-lb-cap { margin-top: 14px; text-align: center; color: rgba(244,239,227,.9); font-family: var(--font-body); font-size: 14px; line-height: 1.5; } .hm-lb-cap .cr { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,239,227,.6); } .hm-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(244,239,227,.14); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .hm-lb-btn:hover { background: rgba(244,239,227,.3); } .hm-lb-prev { left: 24px; } .hm-lb-next { right: 24px; } .hm-lb-close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(244,239,227,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .hm-lb-close:hover { background: rgba(244,239,227,.3); } .hm-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-family: var(--font-body); font-size: 12px; letter-spacing: .1em; color: rgba(244,239,227,.7); } @media only screen and (max-width: 600px) { .hm-lb { padding: 20px; } .hm-lb-btn { width: 42px; height: 42px; } .hm-lb-prev { left: 8px; } .hm-lb-next { right: 8px; } } /* ================================================================== 14. CONTACT methods + FORMINATOR form styling ================================================================== */ #top .hm-contact .method { padding: 22px 0; border-bottom: 1px solid var(--line); } #top .hm-contact .method:first-child { padding-top: 0; } #top .hm-contact .big { font-size: 22px; color: var(--ink); font-weight: 500; display: inline-block; margin: 4px 0; border: none; letter-spacing: -.01em; } #top .hm-contact a.big { color: var(--teal); text-decoration: none; } #top .hm-contact a.big:hover { color: var(--lake); } #top .hm-contact p { font-size: 14px !important; color: var(--slate); margin: 2px 0 0; } #top .hm-form-note { font-size: 12.5px; color: var(--warm-grey); margin-top: 14px; } /* Private-hire v2: intro callout + form-in-a-cream-card */ #top .hm-phintro h2 em { color: var(--cyan); font-style: italic; } #top .hm-phintro .ph-note { margin-top: 12px; padding: 18px 22px; background: var(--cream); border: 1px solid var(--stone); border-radius: 14px; font-size: 13.5px !important; line-height: 1.65; color: var(--slate) !important; display: flex; gap: 13px; align-items: flex-start; } #top .hm-phintro .ph-note::before { content: 'i'; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-body); font-style: italic; font-size: 13px; display: flex; align-items: center; justify-content: center; } /* the vehicle photo on private hire is landscape (4/3), not the portrait 5/6 */ body.page-id-47 #top .hm-bus-photo { aspect-ratio: 4/3; } /* "Planning a private trip?" (v2): two cards on a light band - a photo card with the heading pinned to its bottom + the enquiry form card (paired two-column fields, dark submit). Enfold builds this as a full-bleed bg-photo section with a dark overlay, so we neutralise both, re-home the photo onto the left column, and re-flex the row. */ #top .hm-phcta { background-color: var(--enfold-main-color-bg, var(--paper)) !important; } /* #F5F5F5 - form card stays --cream #F4EFE3 for contrast */ #top .hm-phcta .av-section-color-overlay { display: none !important; } #top .hm-phcta .container.av-section-cont-open { background: transparent !important; padding: 44px 50px !important; } /* constrain to the standard content column (1220px) so the two cards line up with the sections above/below - the section is avia-full-stretch, so cap + centre the content here. */ #top .hm-phcta .entry-content-wrapper { display: flex !important; align-items: stretch; gap: 32px; max-width: 1220px; margin-left: auto; margin-right: auto; } #top .hm-phcta .entry-content-wrapper > p { display: none !important; } /* the .clearfix ::before/::after become flex items and eat a leading+trailing `gap`, shifting the cards ~32px inward - drop them so the cards fill the column edge-to-edge. */ #top .hm-phcta .entry-content-wrapper::before, #top .hm-phcta .entry-content-wrapper::after { display: none !important; } #top .hm-phcta .flex_column { display: block !important; float: none !important; width: auto !important; flex: 1 1 0 !important; margin: 0 !important; } /* LEFT = contained photo card, heading pinned to the bottom over a legibility scrim */ #top .hm-phcta .flex_column:not(.hm-phform-card) { position: relative; border-radius: 18px; overflow: hidden; background: var(--ink) url(/wp-content/uploads/2026/07/cta-highway.jpg) center/cover no-repeat; min-height: 420px; display: flex !important; /*align-items: flex-end !important;*/ align-items: flex-start !important; padding: 40px !important; } #top .hm-phcta .flex_column:not(.hm-phform-card)::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(27,34,37,.82) 0%, rgba(27,34,37,.40) 42%, rgba(27,34,37,.06) 78%); } #top .hm-phcta .flex_column:not(.hm-phform-card) .av_textblock_section { position: relative; z-index: 1; width: 100%; } #top .hm-phcta .flex_column:not(.hm-phform-card) h2 { color: #fff !important; margin: 0 0 10px; } #top .hm-phcta .flex_column:not(.hm-phform-card) p { color: rgba(255,255,255,.85) !important; font-size: 15px !important; margin: 0; } /* RIGHT = enquiry form card */ #top .hm-phcta .flex_column.hm-phform-card { flex: 1.1 1 0 !important; background: var(--cream) !important; border: 1px solid var(--stone); border-radius: 18px; padding: 36px !important; align-self: stretch; } /* fields -> V2 two-column pairing (name|email, phone|passengers, pickup|destination, date|return trip), then details + submit full-width. The form is built with each field full-width in its own row, so we flex-wrap the rows and re-order into pairs. */ #top .hm-phform-card .forminator-custom-form { display: flex; flex-wrap: wrap; column-gap: 20px; align-content: flex-start; } #top .hm-phform-card .forminator-row { width: 100%; margin-bottom: 14px !important; } #top .hm-phform-card .forminator-row:has(.forminator-field-phone), #top .hm-phform-card .forminator-row:has(.forminator-field-number), #top .hm-phform-card .forminator-row:has([name="text-1"]), #top .hm-phform-card .forminator-row:has([name="text-2"]), #top .hm-phform-card .forminator-row:has(.forminator-field-date), #top .hm-phform-card .forminator-row:has(.forminator-field-radio) { width: calc(50% - 10px); } #top .hm-phform-card .forminator-row:has(.forminator-field-name) { order: 1; } #top .hm-phform-card .forminator-row:has(.forminator-field-phone) { order: 2; } #top .hm-phform-card .forminator-row:has(.forminator-field-number) { order: 3; } #top .hm-phform-card .forminator-row:has([name="text-1"]) { order: 4; } #top .hm-phform-card .forminator-row:has([name="text-2"]) { order: 5; } #top .hm-phform-card .forminator-row:has(.forminator-field-date) { order: 6; } #top .hm-phform-card .forminator-row:has(.forminator-field-radio) { order: 7; } #top .hm-phform-card .forminator-row:has(.forminator-field-textarea) { order: 8; } #top .hm-phform-card .forminator-row.forminator-row-last { order: 9; } /* boxed WHITE inputs on the cream card; teal accent kept for focus/radio */ #top .hm-phcta .hm-phform-card .forminator-ui { --sc-color-main: var(--teal); } body.page-id-47 #top .hm-phform-card .forminator-ui input.forminator-input, body.page-id-47 #top .hm-phform-card .forminator-ui textarea.forminator-textarea, body.page-id-47 #top .hm-phform-card .forminator-ui select.forminator-select--field { background: #fff !important; border: 1px solid var(--stone) !important; border-radius: 12px !important; } /* submit = dark ink pill (V2), teal on hover */ #top .hm-phcta .forminator-custom-form button.forminator-button-submit { background: var(--ink) !important; } #top .hm-phcta .forminator-custom-form button.forminator-button-submit:hover { background: var(--teal) !important; } /* Two-column field grid. Forminator's native flex-wrap gives the original name/email pair a different width + gutter than the programmatically-paired rows, so the pairs don't line up. Dissolve the .forminator-row wrappers (display:contents) and lay every field out on one shared 2-col grid - every pair now aligns exactly; full-width fields (details, submit) span both. */ #top .hm-phcta .forminator-custom-form { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 14px; align-items: start; } #top .hm-phcta .forminator-custom-form > .forminator-row { display: contents !important; } #top .hm-phcta .forminator-custom-form .forminator-row { margin: 0 !important; } #top .hm-phcta .forminator-custom-form .forminator-col { padding: 0 !important; } #top .hm-phcta .forminator-custom-form .forminator-col-12 { grid-column: 1 / -1; } #top .hm-phcta .forminator-custom-form > .forminator-row:last-child > .forminator-col { grid-column: 1 / -1; } @media only screen and (max-width: 767px) { #top .hm-phcta .forminator-custom-form { grid-template-columns: 1fr; } } /* tablet/below: stack the two cards so the form card regains full width for its 2-col fields. The stacked photo card is shorter, so darken the scrim for heading legibility. */ @media only screen and (max-width: 980px) { #top .hm-phcta .entry-content-wrapper { flex-direction: column; align-items: stretch; gap: 24px; } /* stacked column: size cards to content (flex-basis:0 collapses their height otherwise) */ #top .hm-phcta .flex_column, #top .hm-phcta .flex_column.hm-phform-card { flex: 0 0 auto !important; } #top .hm-phcta .flex_column:not(.hm-phform-card) { min-height: 300px; } #top .hm-phcta .flex_column:not(.hm-phform-card)::after { background: linear-gradient(to top, rgba(27,34,37,.85) 0%, rgba(27,34,37,.55) 55%, rgba(27,34,37,.22) 100%); } } /* phones (<=767 = Enfold's mobile-container breakpoint): Enfold already narrows every .container to 85%-centred here, so the two cards only need their horizontal padding dropped to fill that 85% and line up with the sections above/below. Also tighten the form-card's inner padding. */ @media only screen and (max-width: 767px) { #top .hm-phcta .container.av-section-cont-open { padding: 28px 0 !important; } #top .hm-phcta .flex_column.hm-phform-card { padding: 26px 20px !important; } } /* Contact page v2: LIGHT hero + connected icon method-cards + office-hours card + form card */ #top .hm-contacthero .hm-eyebrow { color: var(--teal); } #top .hm-contacthero .hm-title { font-family: var(--font-display); font-size: clamp(48px, 6vw, 92px) !important; line-height: 1.0; font-weight: 400; letter-spacing: -.025em; color: var(--ink); margin: 0; } #top .hm-contacthero .hm-title em { font-style: italic; font-weight: 400; color: var(--cyan); } #top .hm-contacthero .hm-lede { font-size: 17px !important; line-height: 1.7; color: var(--slate) !important; max-width: 460px; } /* connected method cards */ #top .hm-methods { display: flex; flex-direction: column; gap: 1px; background: var(--stone); border: 1px solid var(--stone); border-radius: 18px; overflow: hidden; } #top .hm-methods .hm-method { position: relative; background: var(--paper); padding: 26px 30px; display: grid; grid-template-columns: 56px 1fr auto; gap: 20px; align-items: center; transition: background .15s ease; } #top .hm-methods .hm-method:not(.post):hover { background: var(--cream); } #top .hm-methods .hm-method-link { position: absolute; inset: 0; z-index: 2; } #top .hm-methods .ico { width: 56px; height: 56px; border-radius: 14px; background: var(--lake-pale); color: var(--teal-deep); display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; } #top .hm-methods .hm-method.alt .ico { background: #F4E7CD; color: var(--tussock); } #top .hm-methods .hm-method.post .ico { background: var(--cream); color: var(--warm-grey); } #top .hm-methods .text .lbl { font-family: var(--font-body); font-size: 10px; color: var(--warm-grey); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; } #top .hm-methods .text .v { font-family: var(--font-body); font-size: 22px; font-weight: 400; color: var(--ink) !important; letter-spacing: -.005em; } #top .hm-methods .text .v small { display: block; font-size: 12.5px; color: var(--slate); font-weight: 400; margin-top: 4px; letter-spacing: 0; line-height: 1.45; } /* wpautop wraps the trailing .arr + stretched link in a

; dissolve it so they return to the grid */ #top .hm-methods .hm-method > p { display: contents; } #top .hm-methods .arr { color: var(--warm-grey); font-size: 18px; transition: transform .15s ease, color .15s ease; } #top .hm-methods .hm-method:hover .arr { color: var(--teal); transform: translateX(4px); } /* office-hours card */ #top .hm-hours { margin-top: 24px; background: var(--cream); border: 1px solid var(--stone); border-radius: 14px; padding: 22px 26px; } #top .hm-hours .head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } #top .hm-hours .head::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: hm-pulse 2s ease-in-out infinite; } @keyframes hm-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } #top .hm-hours .head .lbl { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 600; } #top .hm-hours .head .now { color: var(--teal); font-size: 11.5px; font-weight: 600; } #top .hm-hours .grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; padding-top: 12px; border-top: 1px solid var(--stone); align-items: baseline; } #top .hm-hours .grid .day { font-family: var(--font-body); font-size: 16px !important; color: var(--ink) !important; margin: 0; } #top .hm-hours .grid .tm { font-family: var(--font-body); font-size: 13px !important; color: var(--slate) !important; letter-spacing: .04em; text-align: right; margin: 0; } /* form card (right column) */ #top .hm-contactmain .flex_column.av_one_half.hm-formcard { background: var(--cream); border: 1px solid var(--stone); border-radius: 18px; padding: 40px !important; } #top .hm-formcard .hm-formcard-h { font-family: var(--font-display); font-size: 32px; font-weight: 400; color: var(--ink); letter-spacing: -.015em; margin: 0 0 8px; line-height: 1.15; } #top .hm-formcard .hm-formcard-h em { font-style: italic; color: var(--teal); } #top .hm-formcard .hm-formcard-sub { font-size: 14.5px !important; color: var(--slate) !important; line-height: 1.6; margin: 0 0 24px; } /* Contact form fields: same styling as the Private Hire enquiry form - clean 2-col grid (name|email, booking ref|phone, message full), white inputs, dark submit, on a --cream card. */ #top .hm-formcard .forminator-custom-form { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 14px; align-items: start; } #top .hm-formcard .forminator-custom-form > .forminator-row { display: contents !important; } #top .hm-formcard .forminator-custom-form .forminator-row { margin: 0 !important; } #top .hm-formcard .forminator-custom-form .forminator-col { padding: 0 !important; } #top .hm-formcard .forminator-custom-form .forminator-col-12 { grid-column: 1 / -1; } #top .hm-formcard .forminator-custom-form > .forminator-row:last-child > .forminator-col { grid-column: 1 / -1; } #top .hm-formcard .forminator-ui input.forminator-input, #top .hm-formcard .forminator-ui textarea.forminator-textarea, #top .hm-formcard .forminator-ui select.forminator-select--field { background: #fff !important; } #top .hm-formcard .forminator-custom-form button.forminator-button-submit { background: var(--ink) !important; } #top .hm-formcard .forminator-custom-form button.forminator-button-submit:hover { background: var(--teal) !important; } /* "Booking reference" carries an "If relevant" hint - keep it inline with the label (one line) and cap its line-height so its input lines up with the Phone field beside it. */ #top .hm-formcard .forminator-field { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; } #top .hm-formcard .forminator-field > input, #top .hm-formcard .forminator-field > textarea, #top .hm-formcard .forminator-field > select, #top .hm-formcard .forminator-field > .forminator-input, #top .hm-formcard .forminator-field > .forminator-textarea { flex: 0 0 100%; } #top .hm-formcard .forminator-description { line-height: 14px !important; margin: 0 !important; } @media only screen and (max-width: 767px) { #top .hm-methods .hm-method { grid-template-columns: 44px 1fr auto; padding: 20px; gap: 14px; } #top .hm-methods .ico { width: 44px; height: 44px; font-size: 20px; } #top .hm-contactmain .flex_column.av_one_half.hm-formcard { padding: 26px 22px !important; } #top .hm-formcard .forminator-custom-form { grid-template-columns: 1fr; } } /* Forminator forms - Lake & Stone (matches the proof: mono labels, tight spacing, rounded inputs, teal focus, ink pill submit). The designer used ~16-22px between fields and 8px label->input; Forminator's default rows are much looser. */ #top .forminator-ui.forminator-custom-form { font-family: var(--font-sans); } /* SPACING - tighten the vertical field spacing (leave Forminator's column gutter intact so paired Name/Email fields keep a gap between them). */ #top .forminator-ui .forminator-row { margin-bottom: 12px !important; } #top .forminator-ui .forminator-row.forminator-row-last { margin-bottom: 0 !important; } #top .forminator-ui .forminator-field { margin-bottom: 0 !important; padding-bottom: 0 !important; } #top .forminator-ui input.forminator-input, #top .forminator-ui textarea.forminator-textarea { margin-bottom: 0 !important; } /* LABELS - mono, uppercase, warm-grey (per design) */ #top .forminator-ui .forminator-label { font-family: var(--font-mono) !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--warm-grey) !important; margin-bottom: 8px !important; line-height: 1.4; } #top .forminator-ui .forminator-required, #top .forminator-ui .forminator-label .forminator-required { color: #b4472f !important; } /* INPUTS - rounded, stone border, teal focus */ #top .forminator-ui input.forminator-input, #top .forminator-ui textarea.forminator-textarea, #top .forminator-ui .forminator-input-with-connectedfield, #top .forminator-ui select.forminator-select--field { border-radius: 12px !important; border: 1px solid var(--stone) !important; background: var(--paper) !important; color: var(--ink) !important; font-family: var(--font-sans) !important; font-size: 15px !important; padding: 13px 15px !important; box-shadow: none !important; } #top .forminator-ui textarea.forminator-textarea { min-height: 120px !important; line-height: 1.5; } #top .forminator-ui input.forminator-input:focus, #top .forminator-ui textarea.forminator-textarea:focus, #top .forminator-ui select.forminator-select--field:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 1.5px var(--teal) inset !important; } #top .forminator-ui ::placeholder { color: var(--warm-grey) !important; opacity: 1; } /* RADIO (Return trip?) - tidy, on-brand, with breathing room between options */ #top .forminator-ui .forminator-radio { margin: 6px 24px 10px 0 !important; } #top .forminator-ui .forminator-field-radio .forminator-radio { display: flex; align-items: center; } #top .forminator-ui .forminator-radio-label { font-family: var(--font-sans) !important; font-size: 14px !important; color: var(--charcoal) !important; text-transform: none !important; letter-spacing: 0 !important; } #top .forminator-ui .forminator-radio input:checked ~ .forminator-radio-bullet, #top .forminator-ui .forminator-radio-bullet.active { border-color: var(--teal) !important; } /* SUBMIT - teal pill, white text (per design) -> darker teal on hover */ #top .forminator-ui button.forminator-button-submit, #top .forminator-ui .forminator-button { background: var(--teal) !important; color: #fff !important; border-radius: 999px !important; font-family: var(--font-sans) !important; font-weight: 600 !important; font-size: 15px !important; border: none !important; padding: 16px 34px !important; margin-top: 8px !important; min-width: 0 !important; width: auto !important; } #top .forminator-ui button.forminator-button-submit:hover, #top .forminator-ui .forminator-button:hover { background: var(--teal-deep) !important; color: #fff !important; } /* ================================================================== 15. PRIVATE HIRE - "The vehicle" (v2: portrait photo + badge, two-column spec list, three-thumbnail row -> lightbox) ================================================================== */ #top .hm-bus { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; } /* About "The bus" reuses this component without the spec-list, so centre the info against the photo. */ #top .hm-bus.hm-bus--center { align-items: center; } #top .hm-bus .hm-bus-photo { position: relative; margin: 0; aspect-ratio: 5/6; overflow: hidden; background: var(--cream); border-radius: 10px; cursor: zoom-in; } #top .hm-bus .hm-bus-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } #top .hm-bus .hm-bus-photo p { margin: 0; } /* neutralise the wpautop

that wraps the standalone photo */ #top .hm-bus .hm-bus-photo .badge { position: absolute; left: 24px; bottom: 24px; z-index: 2; background: rgba(244,239,227,.96); padding: 14px 18px; border-radius: 14px; max-width: 260px; } #top .hm-bus .hm-bus-photo .badge .l { font-family: var(--font-body); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; font-weight: 600; } #top .hm-bus .hm-bus-photo .badge .v { font-family: var(--font-body); font-size: 18px; color: var(--ink); line-height: 1.2; } #top .hm-bus .hm-bus-info .section-num { font-family: var(--font-body); font-size: 11px; letter-spacing: .16em; color: var(--teal); text-transform: uppercase; margin-bottom: 14px; } #top .hm-bus .hm-bus-info h2 { font-family: var(--font-display); font-size: 48px; line-height: 1.02; font-weight: 400; letter-spacing: -.025em; color: var(--ink); margin: 0 0 20px; } #top .hm-bus .hm-bus-info h2 em { color: var(--teal); font-style: italic; } #top .hm-bus .hm-bus-info .vehicle-note { font-size: 12.5px !important; color: var(--warm-grey) !important; font-style: italic; margin: 0 0 14px; } #top .hm-bus .hm-bus-info > p { font-size: 16px !important; line-height: 1.7; color: var(--slate) !important; max-width: 460px; margin: 0 0 24px; } #top .hm-bus .hm-bus-info .spec-list { list-style: none; margin: 20px 0 4px; padding: 20px 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 11px 32px; } #top .hm-bus .hm-bus-info .spec-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; } #top .hm-bus .hm-bus-info .spec-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } #top .hm-bus .hm-bus-thumbs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--ink); padding-top: 24px; margin-top: 8px; } #top .hm-bus .hm-bus-thumbs .shot { position: relative; margin: 0; aspect-ratio: 5/4; border-radius: 10px; overflow: hidden; background: var(--cream); cursor: zoom-in; } #top .hm-bus .hm-bus-thumbs .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } #top .hm-bus .hm-bus-thumbs .shot:hover img { transform: scale(1.04); } @media only screen and (max-width: 900px) { #top .hm-bus { grid-template-columns: 1fr; gap: 32px; } #top .hm-bus .hm-bus-info .spec-list { grid-template-columns: 1fr; } #top .hm-bus .hm-bus-info h2 { font-size: 36px; } } @media only screen and (max-width: 560px) { #top .hm-bus .hm-bus-thumbs { grid-template-columns: 1fr 1fr; } } /* widget style */ /* ------- 15. WBFM booking widget (beat Enfold's #top select/label rules) ------- *//* #top .wbfm-widget-field select, #top .wbfm-widget-field input { min-height: 54px; border: 1px solid var(--stone); border-radius: 12px; background-color: #fff; color: var(--ink); padding: 11px 16px; margin: 0; /* kill Enfold's margin-bottom:20px *//* font-family: var(--font-sans); font-size: 15px; text-transform: none; letter-spacing: normal; box-shadow: 0 1px 2px rgba(27,34,37,.04); } /* selects: replace Enfold's PNG arrow with a brand chevron, inset from the edge *//* #top .wbfm-widget-field select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2336413F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 10px 6px; } /* teal focus ring — same convention as the Forminator inputs *//* #top .wbfm-widget-field select:focus, #top .wbfm-widget-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 1.5px var(--teal) inset; } /* labels: restore the uppercase micro-label look Enfold's #top label overrides *//* #top .wbfm-widget-field label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-grey); }*/ /* ===================================================================== 15. WBFM BOOKING FLOW (book-seat page) - beat Enfold's #top form rules Enfold base.css/shortcodes.css style #top input/textarea/select/label at id-level specificity (1-0-1), out-ranking the plugin's .wbfm .field rules (0-2-1) and boxing the fields in cream. These #top .wbfm rules (1-2-1) re-assert the approved underline field design from wbfm-style.css / tekapobus-proof-v2/book.html. var(--ink/--teal/--stone/--linen/--r/--white) resolve from the .wbfm token scope, not :root. ===================================================================== */ #top .wbfm .field input, #top .wbfm .field select { font-family: inherit; font-size: 14px; color: var(--ink); border: none; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 6px 0; margin: 0; outline: none; background: transparent; /* shorthand also clears Enfold's select arrow PNG */ width: 100%; box-shadow: none; height: auto; line-height: 1.4; } #top .wbfm .field select { -webkit-appearance: auto; /* Enfold sets none; restore the native arrow (design uses it) */ appearance: auto; cursor: pointer; } #top .wbfm .field input:focus, #top .wbfm .field select:focus { border-bottom-color: var(--teal); box-shadow: none; outline: none; } #top .wbfm .field.has-error input, #top .wbfm .field.has-error select { border-bottom-color: #A8341F; } /* keep validation red (after :focus so it wins while focused, as in the plugin) */ #top .wbfm .field input[type=date] { width: auto; max-width: 170px; } /* re-assert: the generic rule above would stretch it */ #top .wbfm .field textarea { font-family: inherit; font-size: 13px; color: var(--ink); border: 1px solid var(--stone); border-radius: var(--r); padding: 8px; margin: 0; min-height: 60px; background: var(--white); width: 100%; box-shadow: none; } #top .wbfm .field textarea:focus { border-color: var(--teal); box-shadow: none; outline: none; } /* Labels: Enfold's #top label{bold, .92em} clobbers these; v2 proof = 15px, ink, regular */ #top .wbfm .field label { font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } /* Passenger cards sit on the flow's cream, not white (matches v2 proof) */ #top .wbfm .pax-card { background: var(--linen); } /* ===================================================================== 16. HEADER MUST NOT MOVE WHEN THE WOO CART GAINS ITEMS Enfold's woocommerce-mod.css (and legacy_configs.css) slides the whole .main_menu 30px left with a 0.8s transition the moment WooCommerce adds html_visible_cart to - but only under the "stretch header" option (html_header_stretch). Our cart icon sits in the far-right gutter and never overlaps the nav, so the shove is pure jank. Same selector as Enfold's rule + #top out-ranks it (1-5-0 vs 0-5-0) whatever the load order; scoped to the stretch config so it can't touch other layouts. ===================================================================== */ .html_visible_cart.html_stretched.html_header_top.html_header_stretch #top .main_menu { right: 0; transition: none; } /* The DEPLOYED (design.tekapobus.co.nz) copy of this file additionally carries `#top.page-id-56 .container { padding: 0; margin: 0 !important; }` from an older full-bleed booking-page iteration. That margin:0 kills Enfold's `.container { margin: 0 auto }` on EVERY container of the Book page - header included - so the logo + nav sit hard-left on /book-seat/ only (misreported as a cart bug: the cart icon appears mid-booking, on that same page). Re-centre the HEADER container only; the flow's own containers keep whatever the page CSS does to them. Locally this is a no-op (margin is already auto, padding already 50px) but it keeps the header safe wherever this file lands. */ #top.page-id-56 #header .container { margin: 0 auto !important; padding: 0 50px; } /* ===================================================================== 17. CHECKOUT: NO "there are no payment methods" FLASH WHILE STRIPE LOADS The Blocks checkout paints that red banner the moment its payment store reports `paymentMethodsInitialized && expressPaymentMethodsInitialized` with an empty method list (woocommerce/assets/client/blocks/checkout.js). The Stripe gateway registers its Blocks integration a beat later, so on a cold load the banner mounts, sits there for a few seconds and is then replaced by the card form - alarming, and nothing the customer can act on. Fix, no JS: hold the banner hidden for --hm-pay-hold counted from the moment it mounts (an animation's clock starts when its element is created, so the delay measures exactly the flash window - not page load), with a quiet "Loading payment options" line standing in. If Stripe arrives the banner is unmounted and never seen at all; if the store genuinely has no gateway the banner reveals itself when the hold expires, so a real outage is still reported to the customer - just late. Two mechanics worth knowing before editing this: - visibility (not display) does the hiding: it suppresses the element's own border/background, and a pseudo-element can opt back in out of a hidden parent. `display` inside @keyframes needs discrete animation (Chrome 116+ / Safari 17.4+) and would swallow the error permanently on anything older. - visibility only animates ONE WAY. Per spec the interpolated value is `visible` for every progress in (0,1], so hidden -> visible lands (the reveal below) but visible -> hidden never does - a `to { visibility: hidden }` keyframe finishes with the element still on screen (verified in Chrome). The stand-in therefore leaves on opacity, not visibility. ===================================================================== */ .wc-block-checkout__no-payment-methods-notice { --hm-pay-hold: 8s; /* tune here: how long Stripe gets to register */ visibility: hidden; position: relative; animation: hm-pay-notice-reveal 1ms linear var(--hm-pay-hold) forwards; } /* Stand-in while the banner is held back, so the step isn't a blank gap. Opts back into visibility out of the hidden parent, then fades out on the same tick the real banner is revealed. */ .wc-block-checkout__no-payment-methods-notice::after { content: "Loading payment options\2026"; visibility: visible; pointer-events: none; position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--warm-grey); animation: hm-pay-placeholder-hide 1ms linear var(--hm-pay-hold) forwards; } @keyframes hm-pay-notice-reveal { to { visibility: visible; } } @keyframes hm-pay-placeholder-hide { to { opacity: 0; } } /* ===================================================================== 18. HOMEPAGE WIDGET: DATE FIELD OVERFLOWS THE CARD ON iOS wbfm-style.css sizes the widget fields with `width:100%` only (rule `.wbfm-widget-field select,.wbfm-widget-field input`). Blink honours that on a date input, so desktop/Android Chrome look right - but WebKit gives `input[type=date]` an intrinsic width from its native shadow tree that `width` alone does not clamp, so on iPhone (Safari AND Chrome, both WebKit) the field renders at its natural width and spills past the card's 28px padding. Only the date field does it; the two selects are fine, which is why the grid track itself is not the problem. Fix: cap it with `max-width` - the same lever wbfm-style.css already uses on the booking-flow page (`.wbfm .field input[type=date]{max-width:170px}`, which is why the flow does not show this). `min-width:0` on the grid item and its flex label is belt-and-braces: it stops the automatic minimum size of a grid/flex item from letting the input widen the 1fr track instead. ===================================================================== */ #top form.wbfm-widget .wbfm-widget-field, #top form.wbfm-widget .wbfm-widget-field label { min-width: 0; } @supports (-webkit-touch-callout: none) { #top form.wbfm-widget .wbfm-widget-field input[type="date"] { width: 100%; padding-left: 0; padding-right: 0; border: 0; box-shadow: inset 0 0 0 1px #d9d1be, 0 1px 2px rgba(27, 34, 37, .04); text-indent: 16px; } #top form.wbfm-widget .wbfm-widget-field input[type="date"]::-webkit-date-and-time-value { text-align: left; } } /* token-align the widget teal (plugin hardcodes off-brand #0f8382) */ #top .wbfm-widget-submit { background: var(--teal); } #top .wbfm-widget-submit:hover { background: var(--teal-deep); } /* plugin styles */ #top .wbfm-widget-title { border-bottom: 2px solid #63C1D7; padding-bottom: 7px; margin-bottom: 9px; } #top .wbfm-widget { border: 1px solid #63C1D7; } #top .wbfm-widget-fare { border-top: 1px solid #63C1D7; } .responsive #top .container .screen.active > p.screen-title.serif{ font-size: 50px; letter-spacing: -.01em; line-height: 1.05 color: var(--teal); font-weight: 500; margin-bottom: 6px } @media (max-width: 768px){ .responsive #top .container .screen.active > p.screen-title.serif{ margin-bottom: 30px; } } .page-id-56 .wbfm{ margin-left: 0px; margin-right: 0px; width: 100vw; border-radius: 0; border-color: var(--ink) !important; } #top.page-id-56 .container { margin: 0 0 !important; padding: 0; } .content { padding-top: 0px; padding-bottom: 0px; } .wbfm .wbfm-stepper { background: var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0 0 0 0; background: var(--teal); } .wbfm .st-step.active .st-num { background: #fff; /*border-color: #fff;*/ border-color: var(--teal-mid); color: var(--ink); } .wbfm .st-step.active { border-bottom-color: var(--teal-mid); color: #fff; } .wbfm .ann{display:none}