/* ═══════════════════════════════════════════════════════════════════ WILDBOSSES · INNER PAGES Tours, trip detail, guides, about, contact. ═══════════════════════════════════════════════════════════════════ */ /* Scoped to .wb-reveal — a class the head script stamps on . Without it these rules do not exist, so if the script never runs, or the browser has no IntersectionObserver, the content is simply visible. It used to be hidden unconditionally by CSS and revealed only by JS, which meant any failure in that chain silently erased whole sections of the page. */ .wb-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .wb-reveal [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wb-reveal [data-reveal]{opacity:1;transform:none;transition:none} } /* ── filters ────────────────────────────────────────────── */ .wb-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; } .wb-chip { font-size: 12px; font-weight: 500; letter-spacing: .04em; padding: 9px 17px; border-radius: 999px; cursor: pointer; background: var(--glass-2); color: var(--ink-2); border: 1px solid var(--line); text-transform: capitalize; transition: background .2s, color .2s, border-color .2s; } .wb-chip:hover { color: var(--ink); border-color: var(--wild-ink); } .wb-chip.on { background: var(--grad-sun); color: var(--on-sun); border-color: transparent; font-weight: 700; } /* ── prose ──────────────────────────────────────────────── */ .wb-prose { border-radius: var(--r-lg); padding: clamp(24px,4vw,52px); max-width: 78ch; margin: 0 auto; } .wb-prose p { color: var(--ink-2); font-size: 16px; line-height: 1.75; margin: 0 0 18px; } .wb-prose p:last-child { margin-bottom: 0; } .wb-lead { font-size: 21px !important; color: var(--ink) !important; line-height: 1.5 !important; font-weight: 500; } .wb-pillars { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); margin: 40px auto 0; max-width: var(--max); } .wb-pillar { border-radius: var(--r-lg); padding: 26px; } .wb-pillar b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink); margin-bottom: 8px; letter-spacing:.01em } .wb-pillar p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; } .wb-cta-band { margin: 46px auto 0; max-width: var(--max); border-radius: var(--r-lg); padding: clamp(24px,3.4vw,44px); display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .wb-cta-band h2 { margin: 0 0 6px; font-family: var(--display); font-size: clamp(24px,3vw,38px); color: var(--ink); letter-spacing:.01em } .wb-cta-band p { margin: 0; color: var(--ink-2); font-size: 14.5px; } /* ── guide card ─────────────────────────────────────────── */ .wb-guide { border-radius: var(--r-lg); overflow: hidden; text-align: center; padding: 28px 22px; } .wb-guide-face { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 16px; background: var(--bg-deep) center/cover; border: 2px solid var(--line); display: grid; place-items: center; font-family: var(--display); font-size: 32px; color: var(--gold); } .wb-guide b { display: block; font-family: var(--display); font-size: 21px; color: var(--ink); letter-spacing:.01em } .wb-guide-role { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 5px 0 12px; display:block } .wb-guide p { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; } .wb-guide-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .wb-tagpill { font-size: 10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink-3) } /* ── trip detail ──────────────────────────────────────────────────── THE 700px BUG. This box used to read `aspect-ratio:21/9; min-height:300px` with an auto width. CSS resolves that by transferring the minimum height back *through* the ratio into a minimum WIDTH — 300 x 21/9 = 700px — so on a 390px phone the hero forced the document to 716px, the sticky nav only painted the real viewport, and the entire page slid sideways. Two guards, because one was clearly not enough: `width:100%` makes the inline size definite so nothing can be transferred into it, and the ratio is chosen per breakpoint instead of being propped up by a min-height. 21/9 is a cinema crop that only makes sense on a wide screen anyway; on a phone it is a 40px-tall letterbox, which is why the min-height was there in the first place. Give each width the ratio it actually wants and the prop is no longer needed. */ .wb-trip-hero { position: relative; width: 100%; aspect-ratio: 4 / 5; /* phone: upright, the photograph gets the room */ min-height: 0; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; background: var(--bg-deep); } @media (min-width: 560px) { .wb-trip-hero { aspect-ratio: 16 / 10; margin-bottom: 34px; } } @media (min-width: 1000px) { .wb-trip-hero { aspect-ratio: 21 / 9; } } .wb-trip-hero img { width:100%;height:100%;object-fit:cover } .wb-trip-hero-in { position:absolute; inset:auto 0 0 0; padding: clamp(18px,3vw,40px); background: linear-gradient(to top, rgba(4,21,15,.94), rgba(4,21,15,.42) 58%, transparent); } .wb-trip-hero h1 { margin:0 0 6px; font-family:var(--display); font-size:clamp(30px,7.2vw,64px); line-height:.98; color:var(--pollen); letter-spacing:.01em; text-wrap:balance } .wb-trip-hero p { margin:0; color:rgba(243,238,228,.86); font-size:15px } /* the badge row that sits above the trip title */ .wb-trip-hero-tags { display:flex; flex-wrap:wrap; gap:7px; margin:0 0 11px } .wb-trip-hero-tag { font-size:10px; letter-spacing:.15em; text-transform:uppercase; font-weight:600; padding:5px 11px; border-radius:999px; background:rgba(4,36,26,.58); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); color:var(--pollen); border:1px solid rgba(180,255,200,.26); } .wb-trip-hero-tag.is-sun { background:var(--grad-sun); color:var(--on-sun); border-color:transparent } .wb-trip { display: grid; gap: 28px; grid-template-columns: minmax(0,1.7fr) minmax(280px,1fr); align-items: start; } @media (max-width: 900px) { .wb-trip { grid-template-columns: 1fr; } } .wb-trip-body h2 { font-family:var(--display); font-size:26px; color:var(--ink); margin:30px 0 12px; letter-spacing:.01em } .wb-trip-body h2:first-child { margin-top:0 } .wb-trip-body p { color:var(--ink-2); line-height:1.75; margin:0 0 14px } .wb-inc { list-style:none; padding:0; margin:0; display:grid; gap:9px } .wb-inc li { position:relative; padding-left:24px; color:var(--ink-2); font-size:14.5px } .wb-inc li::before { content:''; position:absolute; left:0; top:8px; width:11px; height:6px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg) } .wb-book { position: sticky; top: 88px; border-radius: var(--r-lg); padding: 24px; display: grid; gap: 14px; } .wb-book-price { font-family:var(--display); font-size:34px; color:var(--ink); line-height:1; letter-spacing:.01em } .wb-book-price small { display:block; font-family:var(--body); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:6px } .wb-book-facts { display:grid; gap:9px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) } .wb-book-fact { display:flex; justify-content:space-between; gap:12px; font-size:13px } .wb-book-fact span { color:var(--ink-3) } .wb-book-fact b { color:var(--ink); font-weight:600 } .wb-count { display:flex; gap:10px; justify-content:space-between; } .wb-count div { text-align:center; flex:1 } .wb-count b { display:block; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:23px; font-weight:600; color:var(--ink); line-height:1 } .wb-count i { font-style:normal; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) } /* ── forms ──────────────────────────────────────────────── */ .wb-contact { display:grid; gap:22px; grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); align-items:start } @media (max-width: 860px) { .wb-contact { grid-template-columns:1fr } } .wb-contact-form { border-radius:var(--r-lg); padding: clamp(22px,3vw,38px) } .wb-contact-side { display:grid; gap:14px } .wb-contact-card { border-radius:var(--r-md); padding:20px } .wb-contact-card b { display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:7px } .wb-contact-card p { margin:0 0 12px; font-size:14px; color:var(--ink-2); line-height:1.55 } .wb-contact-card p:last-child { margin-bottom:0 } form label { display:grid; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:15px } form label span { font-weight:400; color:var(--ink-3) } form input, form select, form textarea { width:100%; background:var(--glass-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--ink); font:400 15px var(--body); transition:border-color .2s, background .2s; } form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--focus); background:var(--glass) } form textarea { resize:vertical; line-height:1.55 } .wb-form-msg { margin:14px 0 0; font-size:13.5px; min-height:20px; color:var(--gold) } .wb-form-msg.bad { color:var(--ember) } .wb-form-ok { text-align:center; padding:34px 10px } .wb-form-ok b { display:block; font-family:var(--display); font-size:27px; color:var(--ink); margin-bottom:10px } .wb-form-ok p { color:var(--ink-2); margin:0 0 6px; font-size:14.5px } .wb-ref { font-family:var(--mono); color:var(--gold); font-size:15px; letter-spacing:.06em } /* ═══════════════════════════════════════════════════════════════════ BOOKING PANEL · TRAVELLERS · INTENT · M-PESA MODAL ═══════════════════════════════════════════════════════════════════ */ .wb-bookform{border-radius:var(--r-lg);padding:26px;margin-top:16px;display:grid;gap:22px} .wb-fset{display:grid;gap:12px} .wb-flabel,.wb-f>span{ display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);margin-bottom:7px} .wb-f>span>i{font-style:normal;opacity:.6;letter-spacing:.04em;text-transform:none;font-weight:500} .wb-f{display:block} .wb-f input,.wb-f textarea{ width:100%;box-sizing:border-box;padding:13px 14px;font:inherit;font-size:.95rem; color:var(--fg);background:var(--glass);border:1px solid var(--glass-border); border-radius:var(--r-md);transition:border-color .16s,box-shadow .16s} .wb-f input::placeholder,.wb-f textarea::placeholder{color:var(--muted);opacity:.65} .wb-f input:focus,.wb-f textarea:focus{ outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(18,160,90,.18)} .wb-f textarea{resize:vertical;min-height:84px} /* travellers stepper */ .wb-stepper{display:flex;align-items:center;gap:14px} .wb-stepper button{ width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer; font-size:1.35rem;line-height:1;font-weight:400; color:var(--fg);background:var(--glass);border:1px solid var(--glass-border); transition:border-color .16s,background .16s,transform .1s} .wb-stepper button:hover{border-color:var(--wild-ink);color:var(--wild-ink)} .wb-stepper button:active{transform:scale(.93)} .wb-stepper>b{min-width:2ch;text-align:center;font-size:1.5rem;font-weight:700; font-variant-numeric:tabular-nums} .wb-stepper>small{color:var(--muted);font-size:.82rem;margin-left:2px} /* intent choices */ .wb-choices{display:grid;gap:10px} .wb-choice{display:block;cursor:pointer;position:relative} .wb-choice input{position:absolute;opacity:0;pointer-events:none} .wb-choice-in{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 16px; padding:15px 17px;border-radius:var(--r-md); border:1px solid var(--glass-border);background:var(--glass); transition:border-color .16s,background .16s} .wb-choice-in>b{grid-column:1;font-size:.98rem;font-weight:650} .wb-choice-in>i{grid-column:1;grid-row:2;font-style:normal;font-size:.82rem;color:var(--muted);line-height:1.4} .wb-choice-in>em{ grid-column:2;grid-row:1/3;font-style:normal;font-weight:750;font-size:1rem; white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums} .wb-choice:hover .wb-choice-in{border-color:rgba(247,190,24,.5)} .wb-choice.is-on .wb-choice-in{ border-color:var(--wild-ink);background:rgba(18,160,90,.09); box-shadow:0 0 0 1px var(--gold) inset} .wb-choice.is-on .wb-choice-in>em{color:var(--gold)} .wb-choice input:focus-visible+.wb-choice-in{box-shadow:0 0 0 3px rgba(18,160,90,.30)} /* running total */ /* ── custom amount block ──────────────────────────────────────────── */ .wb-custom-amt{ margin-top:14px;padding:18px 20px;border-radius:var(--r-md); background:rgba(247,190,24,.06);border:1px solid rgba(247,190,24,.22); display:grid;gap:12px} .wb-custom-amt-head{display:flex;justify-content:space-between;align-items:center} .wb-custom-pct{ font-size:.78rem;font-weight:700;letter-spacing:.06em; color:var(--gold);background:rgba(247,190,24,.15); padding:3px 9px;border-radius:20px} .wb-custom-input-wrap{ display:flex;align-items:center;gap:0; border:1.5px solid rgba(247,190,24,.45);border-radius:var(--r-sm); background:var(--bg);overflow:hidden;transition:border-color .15s} .wb-custom-input-wrap:focus-within{border-color:var(--focus)} .wb-custom-prefix{ padding:0 12px;font-size:.88rem;font-weight:700;color:var(--gold); background:rgba(247,190,24,.1);border-right:1.5px solid rgba(247,190,24,.25); height:100%;display:flex;align-items:center;white-space:nowrap;line-height:2.8} .wb-custom-input-wrap input[type=number]{ flex:1;border:none;background:transparent;color:var(--fg); font-size:1.18rem;font-weight:700;padding:10px 14px;outline:none; font-variant-numeric:tabular-nums;min-width:0;width:100%} .wb-custom-input-wrap input[type=number]::-webkit-inner-spin-button, .wb-custom-input-wrap input[type=number]::-webkit-outer-spin-button{opacity:.4} .wb-custom-range-wrap{display:grid;gap:6px} .wb-custom-range-wrap input[type=range]{ width:100%;accent-color:var(--gold);cursor:pointer;height:6px;border-radius:3px} .wb-custom-range-labels{ display:flex;justify-content:space-between; font-size:.72rem;color:var(--muted)} .wb-custom-hint{ margin:0;font-size:.78rem;color:var(--muted);line-height:1.5} /* modal custom amount */ .wb-modal-custom{margin:-4px 0} .wb-summary{ display:grid;gap:9px;padding:16px 18px;border-radius:var(--r-md); background:var(--glass);border:1px dashed var(--glass-border)} .wb-summary>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .wb-summary span{color:var(--muted);font-size:.88rem} .wb-summary b{font-variant-numeric:tabular-nums;font-weight:650} .wb-summary-now{padding-top:9px;border-top:1px solid var(--glass-border)} .wb-summary-now span{color:var(--fg);font-weight:600;font-size:.9rem} .wb-summary-now b{color:var(--gold);font-size:1.22rem;font-weight:800} .wb-submit{width:100%;justify-content:center} .wb-trust{margin:0;text-align:center;font-size:.78rem;color:var(--muted);line-height:1.5} /* confirmation */ .wb-done{border-radius:var(--r-lg);padding:34px 26px;margin-top:16px;text-align:center;display:grid;gap:10px;justify-items:center} .wb-done .wb-btn{margin-top:4px} .wb-done-tick{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; font-size:1.5rem;color:var(--on-sun);background:var(--grad-sun); box-shadow:var(--glow-sun);margin-bottom:6px} .wb-done>b{font-size:1.22rem} .wb-done>p{margin:0;color:var(--muted);font-size:.92rem;max-width:38ch;line-height:1.55} .wb-done-ref{ margin:12px 0 4px!important;font-size:.7rem!important;letter-spacing:.11em;text-transform:uppercase} .wb-done-ref span{ display:block;margin-top:6px;font-family:var(--mono,ui-monospace,monospace); font-size:1.08rem;letter-spacing:.06em;color:var(--gold);font-weight:700} /* ── modal ──────────────────────────────────────────────────────── */ body.wb-locked{overflow:hidden} .wb-modal{ position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center; padding:18px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px); opacity:0;transition:opacity .2s ease} .wb-modal.is-in{opacity:1} .wb-modal-card{ position:relative;width:100%;max-width:400px;border-radius:var(--r-lg); padding:30px 26px;display:grid;gap:16px; background:var(--bg);box-shadow:0 28px 90px rgba(0,0,0,.45); transform:translateY(10px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.3,1)} .wb-modal.is-in .wb-modal-card{transform:none} .wb-modal-x{ position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%; border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1} .wb-modal-x:hover{background:var(--glass);color:var(--fg)} .wb-pay-head{display:grid;gap:6px;justify-items:start} .wb-pay-badge{ font-size:.62rem;font-weight:800;letter-spacing:.16em;padding:5px 9px;border-radius:4px; background:var(--grad-sun);color:var(--on-sun);font-weight:700} .wb-pay-head h3{margin:4px 0 0;font-size:1.16rem} .wb-pay-head p{margin:0;font-size:.82rem;color:var(--muted)} .wb-pay-head p b{color:var(--fg);font-family:var(--mono,ui-monospace,monospace);letter-spacing:.04em} .wb-pay-amt{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:16px 18px;border-radius:var(--r-md); background:rgba(247,190,24,.1);border:1px solid rgba(247,190,24,.34)} .wb-pay-amt span{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .wb-pay-amt b{font-size:1.42rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums} .wb-pay-breakdown{ border-radius:var(--r-md);overflow:hidden; border:1px solid rgba(247,190,24,.28)} .wb-pay-row{ display:flex;justify-content:space-between;align-items:center; padding:12px 16px;font-size:.9rem} .wb-pay-row:first-child{background:rgba(247,190,24,.1)} .wb-pay-row:first-child b{font-size:1.18rem;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums} .wb-pay-row+.wb-pay-row{border-top:1px solid rgba(247,190,24,.15)} .wb-pay-row-muted{color:var(--muted);font-size:.82rem} .wb-pay-go{width:100%;justify-content:center} .wb-pay-go.is-paid{background:var(--shoot)!important;color:var(--on-sun)!important} .wb-pay-go:disabled{opacity:.62;cursor:default} .wb-pay-state{margin:0;font-size:.86rem;text-align:center;line-height:1.5;min-height:1.2em;color:var(--muted)} .wb-pay-state.is-wait{display:flex;align-items:center;justify-content:center;gap:9px} .wb-pay-state.is-good{color:var(--shoot);font-weight:600} .wb-pay-state.is-bad{color:var(--ember);font-weight:600} .wb-spin{ width:14px;height:14px;flex:none;border-radius:50%; border:2px solid var(--glass-border);border-top-color:var(--sun); animation:wbspin .7s linear infinite} @keyframes wbspin{to{transform:rotate(360deg)}} .wb-pay-foot{margin:0;font-size:.74rem;text-align:center;color:var(--muted);line-height:1.5} @media (max-width:560px){ .wb-bookform{padding:20px} .wb-choice-in{grid-template-columns:1fr;gap:3px} .wb-choice-in>em{grid-column:1;grid-row:3;margin-top:4px} .wb-modal-card{padding:26px 20px} } /* ═══════════════════════════════════════════════════════════════════ TRIP PAGE · MOBILE BOOKING BAR ───────────────────────────────────────────────────────────────── Below 900px the .wb-book aside stops being sticky and drops to the bottom of a very long page, so the price and the one action the page exists for scroll out of reach the moment the reader starts reading. This parks both on the bottom edge instead. It appears only once the reader has passed the hero — showing it immediately would cover the photograph they came to look at — and it hides itself again when the booking form is on screen, because at that point the real submit button is right there and two competing calls to action is one too many. ═══════════════════════════════════════════════════════════════════ */ .wb-bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 480; display: none; align-items: center; gap: 14px; padding: 11px clamp(14px, 4vw, 22px); padding-bottom: max(11px, env(safe-area-inset-bottom)); background: var(--forest); border-top: 1px solid rgba(247,190,24,.34); box-shadow: 0 -10px 30px -12px rgba(0,18,10,.7); transform: translateY(102%); transition: transform .34s var(--ease); } .wb-bookbar.is-up { transform: none; } .wb-bookbar-price { display: grid; gap: 2px; min-width: 0; } .wb-bookbar-price b { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--leaf-white); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-bookbar-price span { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #96BCA1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-bookbar .wb-btn { margin-left: auto; flex: 0 0 auto; padding: 13px 22px; font-size: 13px; } @media (max-width: 900px) { .wb-bookbar { display: flex; } } @media (prefers-reduced-motion: reduce) { .wb-bookbar { transition: none; } } /* ── the deposit slider ───────────────────────────────────────────── A 13px-tall range input is a 13px-tall target. The track keeps its weight; the thumb is grown to something a thumb can actually find. */ .wb-custom-range-wrap input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent; cursor: pointer; } .wb-custom-range-wrap input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--sun), var(--citrine)); } .wb-custom-range-wrap input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--sun), var(--citrine)); } .wb-custom-range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--forest); border: 3px solid var(--sun); box-shadow: 0 2px 8px rgba(0,18,10,.4); } .wb-custom-range-wrap input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--forest); border: 3px solid var(--sun); } .wb-custom-range-wrap input[type=range]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; } /* the amount field is the number people re-read before paying: give it size */ .wb-custom-input-wrap input[type=number] { min-height: 48px; } .wb-custom-prefix { line-height: normal; align-self: stretch; } /* ── day-by-day itinerary ─────────────────────────────────────────── Renders only when tours.itinerary actually holds days. Nothing here invents a schedule — an absent itinerary shows no section at all. */ .wb-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .wb-day { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 18px 0; border-top: 1px solid var(--line); } .wb-day:last-child { border-bottom: 1px solid var(--line); } .wb-day-n { grid-row: 1 / 3; align-self: start; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--gold); padding-top: 3px; white-space: nowrap; } .wb-day b { font-size: 16px; color: var(--ink); font-weight: 600; } .wb-day p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; } @media (max-width: 520px) { .wb-day { grid-template-columns: 1fr; gap: 3px; } .wb-day-n { grid-row: auto; padding-top: 0; } } /* breadcrumb above the trip hero — also the visible half of the BreadcrumbList that goes into the page graph */ .wb-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 12.5px; color: var(--ink-3); } .wb-crumb a { color: var(--ink-3); transition: color .2s; display:inline-flex; align-items:center; min-height:32px; } .wb-crumb a:hover { color: var(--gold); } .wb-crumb span { opacity: .5; } .wb-crumb b { color: var(--ink-2); font-weight: 500; } /* "not included" reuses the tick list with a rule instead of a check */ .wb-exc li::before { border-left: 0; border-bottom: 2px solid var(--ink-3); transform: none; top: 11px; width: 9px; opacity: .8; } /* the contact cards hold the phone number and the email address — the two links on this site most likely to be tapped, and both were 16px tall */ .wb-contact-card a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 600; } .wb-contact-card a:hover { text-decoration: underline; }