(playbook lesson 14); judged by the harness full-diff, tagged visual-UNVERIFIED.
The form is STATIC (clean-room): label-as-placeholder underline inputs (tabindex -1), the gold
button is onclick="return false". CONTENT = the page's real Zimbabwe copy at all 3 bps (the
tablet/mobile component masters default to "Plan your Tanzania safari" → gate those by node NAME).
MOBILE (base) = every field stacked full-width; TABLET/DESKTOP = name + contact rows 2-up, the
header + button + privacy centred. FLUID per the Cardinal Rule (padding/flex, shrinkable). */
.btform { position: relative; isolation: isolate; overflow: hidden;
display: flex; justify-content: center;
background-color: #15292c;
background-image: url('../../img/v2/btform-mobile.webp');
background-size: cover; background-position: center; background-repeat: no-repeat;
box-sizing: border-box; padding: 16px; }
/* Hugo bt-formbanner: the campfire photo sits at 20% opacity over #15292c -> an 80% dark-teal scrim */
.btform::before { content: ''; position: absolute; inset: 0; z-index: 0;
background: #15292c; opacity: .8; pointer-events: none; }
/* the cream card: full-width (minus the section padding), capped per bp, internal padding. */
.btform__card { position: relative; z-index: 1; box-sizing: border-box;
width: 100%; max-width: 368px; background: #f9f5f2; padding: 72px 24px 32px; }
.btform__head { display: flex; flex-direction: column; align-items: center; gap: 24px;
margin: 0 0 48px; }
/* MOBILE title = shrink-wrapped centred (Hugo w264, x68): a fixed 264 box, text-align center. */
.btform__title { box-sizing: border-box; width: 264px; margin: 0; text-align: center;
font-family: "Bebas Neue", sans-serif; font-weight: 400;
font-size: 36px; line-height: 34px; letter-spacing: 0; color: #15292c;
text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.btform__sub { margin: 0; max-width: 320px; font-family: "Roboto Flex", sans-serif; font-weight: 300;
font-size: 14px; line-height: 24px; letter-spacing: 0; color: rgba(0,0,0,.6); text-align: center;
text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.btform__form { display: flex; flex-direction: column; gap: 39px; }
.btform__row { display: flex; flex-direction: column; gap: 39px; }
.btform__field { position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 4px; min-width: 0; }
.btform__label { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px;
line-height: 24px; letter-spacing: 0; color: #000; white-space: nowrap;
text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.btform__desc { font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px;
line-height: 24px; letter-spacing: 0; color: rgba(0,0,0,.3);
text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* the decorative underline input (label sits ABOVE it as a placeholder-like header) */
.btform__input { width: 100%; box-sizing: border-box; height: 1px; margin-top: 8px; padding: 0;
border: 0; border-bottom: 1px solid rgba(0,0,0,.2); background: none; pointer-events: none; }
/* Indent the LABEL (not the field) so the field flexes to the same width as its column sibling and
the flag lands on the column's left edge, in line with the field above it. Padding on the field
itself unbalanced the two flex columns (flex-basis:0 clamps up to the padding), sliding the whole
phone field ~19px left of "Last name" (2026-07-25). */
.btform__field--phone .btform__label { padding-left: 36px; }
/* country selector = a flag image + chevron (Hugo "us 3"), not the 🇺🇸 emoji (Windows draws it as
the letters "us"); centred on the label's line so it lines up. */
.btform__flag { position: absolute; left: 0; top: 0; display: inline-flex;
align-items: center; gap: 5px; color: #000; }
.btform__flagsvg { width: 16px; height: 12px; display: block; flex: 0 0 auto;
box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }
.btform__flagchev { font-size: 9px; line-height: 1; color: rgba(0,0,0,.5); }
/* the "your safari plans" field is a TALL textarea region in Hugo (mobile frame h148): label at the
top, the underline far below, and the placeholder text centred vertically between them (Paul). */
.btform__row--area .btform__field { min-height: 148px; }
.btform__row--area .btform__input { margin-top: auto; }
.btform__row--area .btform__desc { position: absolute; left: 0; right: 0; top: 50%;
transform: translateY(-50%); margin: 0; }
/* gold send button, full-width */
.btform__row--submit { margin-top: 8px; }
.btform__btn { position: relative; display: flex; align-items: center; justify-content: center;
width: 100%; height: 46px; padding: 0; border: 0; background: #b19f70; cursor: pointer; }
.btform__btnicon { position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; fill: none; stroke: #f9f5f2; } /* Hugo's envelope: cream outline; a global svg{fill:currentColor} was filling it dark */
.btform__btnicon path { fill: none; stroke: #f9f5f2; }
.btform__btntxt { font-family: "Roboto Flex", sans-serif; font-weight: 400; font-size: 14px;
line-height: 24px; letter-spacing: 1.68px; text-transform: uppercase; color: #fff;
text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* MOBILE priv = full-width centred text (Hugo w320, x40). It is a form flex child, so the
form's 39px gap already sits above it; a negative top margin brings the Hugo ~14px button→priv
gap (39-25=14). */
.btform__priv { width: 100%; margin: -25px auto 0; font-family: "Roboto Flex", sans-serif; font-weight: 300;
font-size: 14px; line-height: 24px; letter-spacing: 0; color: rgba(0,0,0,.3); text-align: center;
text-box-trim: trim-both; text-box-edge: cap alphabetic; }
/* TABLET (>=768): card x104 w816 (pad 80, content 656), 2-up name + contact rows.
Bg crop = btform-tablet. Title 36/34, labels 14/24 (same as mobile). */
@media (min-width: 768px) {
.btform { padding: 105px 104px; background-image: url('../../img/v2/btform-tablet.webp'); }
.btform__card { max-width: 816px; padding: 80px 80px; }
.btform__head { gap: 24px; margin: 0 0 24px; }
/* tablet title = FULL content width centred (Hugo x184 w656) */
.btform__title { width: 100%; }
.btform__sub { max-width: 519px; }
/* tablet priv = shrink-wrapped centred (Hugo w283, x370.5) */
.btform__priv { width: 283px; margin-left: auto; margin-right: auto; }
.btform__form { gap: 40px; }
.btform__row--2 { flex-direction: row; gap: 16px; }
.btform__row--2 > .btform__field { flex: 1 1 0; }
/* phone label sits after the flag/dropdown (Hugo label x558, col-left 520 → +38) */
.btform__field--phone .btform__label { padding-left: 38px; }
/* tablet "about your trip" textarea region h100 */
.btform__row--area .btform__field { min-height: 100px; }
}
/* DESKTOP (>=1280): card x208 w1024 (pad 80, content 864). Title 42/42, labels 16/26, subline 16/26.
Bg crop = btform-desktop. */
@media (min-width: 1280px) {
.btform { padding: 136px 208px; background-image: url('../../img/v2/btform-desktop.webp'); }
.btform__card { max-width: 1024px; padding: 80px 80px; }
.btform__head { gap: 23px; margin: 0 0 24px; }
/* desktop title = FULL content width centred (Hugo x288 w864) */
.btform__title { width: 100%; font-size: 42px; line-height: 42px; }
.btform__sub { max-width: 587px; font-size: 16px; line-height: 26px; }
.btform__label { font-size: 16px; line-height: 26px; }
.btform__desc { font-size: 16px; line-height: 26px; }
.btform__btntxt { font-size: 14px; line-height: 24px; }
/* desktop priv = shrink-wrapped centred (Hugo w320, x560) */
.btform__priv { width: 320px; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 26px; }
/* phone label after the flag/dropdown (Hugo label x766, col-left 728 → +38) */
.btform__field--phone .btform__label { padding-left: 38px; }
/* desktop "your safari plans" textarea region h102 */
.btform__row--area .btform__field { min-height: 102px; }
.btform__form { gap: 40px; }
}
/* ===== bt-nav: global-nav-bar (desktop 439:37092 white bar · tablet Light 753:102361 ·
mobile Light 708:71783). STANDALONE white top bar above the hero (NOT the homepage's
transparent nav over a photo) → FRESH btnav CSS, NOT the v2nav white-over-photo colours.
Colours from the spec (NOT --c-ink, which is teal #15292c): text/logo = rgba(0,0,0,.9)
pure-black, gold chevrons + phone icon + CTA bg (#b19f70), CTA label rgba(255,255,255,.9),
bar bg #fff, faint 1px rgba(0,0,0,.07) bottom border. Below 1280 = logo + gold phone icon
+ black burger (matches the Light tablet/mobile component); ≥1280 = full links + contact.
FLUID per the Cardinal Rule (flex, padding/gap, no pinned px). */
.btnav {
position: relative; z-index: 4;
height: 64px; display: flex; align-items: center;
padding: 0 20px 0 24px; /* Hugo: logo x24 left · right group ends 20px from edge */
background: #fff;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.btnav__logo { display: flex; align-items: center; color: #000; }
.btnav__logo svg, .btnav__logo img { height: 16px; width: auto; } /* mobile/tablet logo h16 */
/* logo SVG ships black → dark logo on a light bar needs NO recolour (verify vs render) */
.btnav__links, .btnav__contact { display: none; } /* burger world below 1280 */
.btnav__mob { margin-left: auto; display: flex; align-items: center; gap: 20px; } /* Hugo Frame 160 = 72: icon24 + gap20 + burger28 */
.btnav__mobphone { display: flex; align-items: center; }
.btnav__mobphone .ic { width: 24px; height: 24px; color: var(--c-gold); } /* stroked phone -> colour via currentColor */
.btnav__burger {
width: 28px; height: 20px; display: flex; flex-direction: column; justify-content: space-between;
background: none; border: 0; padding: 0; cursor: pointer;
}
.btnav__burger span { display: block; height: 2px; width: 100%; background: #000; }
/* ===== TABLET (768-1279): same layout as mobile, bar still 64px, logo + gold phone + burger ===== */
@media (min-width: 768px) {
.btnav { padding: 0 20px 0 24px; height: 64px; }
}
/* ===== DESKTOP (>=1280): white bar 82px, centred links, phone + gold CTA, no burger ===== */
@media (min-width: 1280px) {
.btnav {
height: 82px;
padding: 0 18px 0 34px; /* Hugo: logo x34 left · contact ends x1422 = 18 right */
justify-content: space-between; /* logo left · contact right (links are absolute-centred) */
}
.btnav__logo svg, .btnav__logo img { height: 17px; } /* desktop logo h17 */
.btnav__mob { display: none; }
/* Hugo centres the Navigation Links frame on the BAR (x450.5 w539 → centre 720 = bar centre),
independent of the logo/contact group widths. Absolute-centre on the bar = exact + fluid. */
.btnav__links {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 32px;
}
.btnav__links a {
display: inline-flex; align-items: center; gap: 10px; /* Hugo text→chevron gap = 10px */
color: rgba(0,0,0,0.9); font-family: "Roboto Flex", sans-serif; font-weight: 400;
font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
}
/* cancel the trailing letter-spacing advance after the link text (lesson 15) so a chevron sits
at Hugo's gap and the link width matches; harmless on the no-chevron links. */
.btnav__links a span { display: inline; margin-right: -1.44px; }
.btnav__contact { display: flex; align-items: center; gap: 24px; }
.btnav__phone {
display: flex; align-items: center; gap: 8px;
color: rgba(0,0,0,0.9); font-family: "Roboto Flex", sans-serif; font-weight: 400;
font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
}
.btnav__phone .ic { width: 16px; height: 16px; color: var(--c-gold); }
.btnav__cta {
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-gold); color: rgba(255,255,255,0.9);
padding: 13px 26px; font-family: "Roboto Flex", sans-serif; font-weight: 400;
font-size: 12px; line-height: 22px; letter-spacing: 1.44px; text-transform: uppercase;
}
/* CTA button width = pad26 + text86 + pad26 = 138 (Hugo); the trailing letter-spacing advance
adds ~1.44px → cancel it so the contact group is 297 wide and the phone text lands at x1149
(lesson 15). The label stays visually centred (the cancelled advance was dead trailing space). */
.btnav__cta span { margin-right: -1.44px; }
}
/* =====================================================================================
ABOVE THE DESIGN WIDTH (>1440) — the standard "full-bleed background, contained content"
pattern (Paul, 2026-06-13). The Figma frames stop at 1440; above that:
- Section BACKGROUNDS (colour AND photo) run EDGE-TO-EDGE / full-bleed at all widths.
NEVER cap or gutter a background. Photo backgrounds use `background-size: cover` across
the full section width (slight softening on very wide screens is accepted — sources are
@2x retina). The earlier attempt CAPPED the photos to native width → ugly gutters → Paul
rejected it (commit 0cf719b, reverted by bef0c7b). This is the CORRECTED rule.
- Section CONTENT stays in a CENTRED column capped at its design width (<=1440). Above 1440
the content stays put and the background extends around it.
Applies to the FIVE content sections only. NOT btnav / bthero (parked for Hugo — they may
still stretch above 1440, that is a deliberate design decision). Scoped under `.bt-page` so
/home-v2/ (which shares .v2reviews / .v2approach classes) is NOT affected.
Verified by tools/shot/_widewatch.js wide shots: every one of the five sections must show a
full-bleed background (no gutters) with centred content.
===================================================================================== */
@media (min-width: 1441px) {
/* btseasonal — bg colour + faint photo already full-bleed (background on the section, cover).
__inner already caps at 1440 + margin:0 auto = centred. Confirm it stays put. */
.bt-page .btseasonal__inner { max-width: 1440px; margin-left: auto; margin-right: auto; }
/* btmonths — white bg already full-bleed; __inner caps 1048 centred. Confirm. */
.bt-page .btmonths__inner { max-width: 1048px; margin-left: auto; margin-right: auto; }
/* btform — campfire PHOTO bg spreads the FULL width (section is width:100%, background cover).
The cream card is centred via justify-content:center + max-width 1024. Confirm full-bleed. */
.bt-page .btform { background-size: cover; }
.bt-page .btform__card { max-width: 1024px; }
/* btreviews (.v2reviews) — white bg full-bleed; content centred via align-items:center.
Nothing to cap (no fixed-width content row that could stretch). Confirm it stays centred. */
/* btapproach (.v2approach) — cream/sand bg full-bleed (background on the section). The
text + square-image block is a flex ROW whose text column (flex:1 1 464px) grows unbounded
above 1440, pulling text far-left and the image far-right (Paul saw this stretch). Pin the
CONTENT row to a centred 1440 column by growing the section's side padding symmetrically:
available inner width = 1440 - 2*104 = 1232 = text 464 + gap 104 + image 664 (exact), so the
columns stop growing and the row sits centred. The bg (on the section, width:100%) stays
EDGE-TO-EDGE. The square image is CONTENT — it stays inside the centred column, it does NOT
bleed to the edge. */
.bt-page .v2approach {
padding-left: calc((100% - 1440px) / 2 + 104px);
padding-right: calc((100% - 1440px) / 2 + 104px);
}
}
/* gap between stacked seasonal-guide paragraphs (the intro can be split into two) */
.btseasonal__copy + .btseasonal__copy { margin-top: 28px; }
.btseasonal__copywrap { width: 100%; }
/* ===================================================================================
btform — WORKING FORM (2026-08-14). Everything above draws Hugo's design; these rules
are what it takes to be a form rather than a picture of one. Nothing above is changed,
so the RESTING geometry measures identical at 1440/900/390 (tools/shot/_formgeom.js).
Before: .btform__input was a 1px-tall element with pointer-events:none whose bottom
border WAS the rule. You could not click it, focus it or type in it. The rule now sits
on the field, and the input is a transparent overlay whose text lands exactly where the
label text is — the label is the placeholder, so it steps aside once you type (the
:placeholder-shown mechanism proven on the footer newsletter form, 2026-08-11).
Geometry note: the label uses text-box-trim, so its box is ~11.4px tall, not the 24px
line box. padding-bottom:12 + the 1px border reproduces the old 23.4px label-to-rule
distance exactly; the overlay is pulled up 6px so its 24px line box centres on the
label's trimmed box and typed text sits on the label's baseline.
=================================================================================== */
.btform__field { padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.2); }
.btform__input {
position: absolute; left: 0; right: 0; top: -6px; width: auto; height: 24px;
margin: 0; padding: 0; border: 0; background: none; pointer-events: auto;
font-family: "Roboto Flex", sans-serif; font-weight: 300; font-size: 14px; line-height: 24px;
color: #000; -webkit-appearance: none; appearance: none; border-radius: 0;
}
.btform__input:focus { outline: none; }
.btform__input::placeholder { color: transparent; }
.btform__field--phone .btform__input--phone { padding-left: 36px; } /* match the label indent */
/* the label is the placeholder: it gets out of the way once there is real text. The
[placeholder] qualifier matters — an input with no placeholder attribute is never
:placeholder-shown, so the bare form of this rule would hide every label. */
.btform__field:has(.btform__input[placeholder]:not(:placeholder-shown)) .btform__label { opacity: 0; }
.btform__field:has(.btform__input:focus) { border-bottom-color: #b19f70; }
/* invalid fields are marked on submit by js/btform-enquiry.js, so a person sees ALL the
missing ones at once rather than the browser's one-at-a-time bubble. */
.btform__field--invalid { border-bottom-color: #a5382b; }
.btform__field--invalid .btform__label { color: #a5382b; }
/* "your safari plans" is a real textarea filling the tall field: it starts under the label
and runs down to the rule. Its own helper line (.btform__desc) is the placeholder here,
so it disappears the moment there is text. */
.btform__row--area .btform__input--area {
top: 20px; bottom: 8px; height: auto; resize: none; overflow: auto;
}
.btform__row--area .btform__field:has(.btform__input[placeholder]:not(:placeholder-shown)) .btform__desc { opacity: 0; }
.btform__btn:disabled { opacity: .6; cursor: default; }
.btform__status {
width: 100%; margin: 16px 0 0; font-family: "Roboto Flex", sans-serif; font-weight: 300;
font-size: 14px; line-height: 22px; color: rgba(0,0,0,.6); text-align: center;
}
.btform__status--error { color: #a5382b; }
@media (min-width: 768px) {
.btform__field--phone .btform__input--phone { padding-left: 38px; }
}
@media (min-width: 1280px) {
.btform__input { font-size: 16px; line-height: 26px; height: 26px; top: -7px; }
.btform__row--area .btform__input--area { top: 22px; bottom: 8px; height: auto; }
.btform__status { font-size: 16px; line-height: 26px; }
}