/* ========================================================================== 01 Hero (#top). Boards m01b-hero-v2 (390) and d01b-hero-v2 (1280), v353. Mobile first: up to 767px is the phone board; 768 to 1023 is the desktop look with the booking bar as a two by two grid; 1024 and up is the desktop board. The frame's header sits over the top of this section. The hero never reveals on scroll. The energy border is on the booking box (phone) or the booking bar (768 up): both carry the class, and the one not in use is off. Phones are the board at every screen height, the photo first (D-195). From 768 it fits the screen it opens on (D-161). The hero is a column: the photo area (.hx-photo, the board's photo-only space above the headline) and then the content. On a tall screen the photo area is the board's height and the hero is the board. On a shorter one the hero's max-height is the screen, so the photo area shrinks and the content stays anchored at the bottom, with the whole booking box down to Get a price on screen at load. The photo itself is drawn from the top of the hero to a fixed overlap below the headline's top, as on the boards, so it is cropped from the bottom (and scaled, never squashed) as the photo area shrinks. ========================================================================== */ #top{ --hx-tb:312px; /* phone: 68px header + the board's 244px of photo above the headline */ --hx-ov:148px; /* phone: the photo runs 148px below the headline's top (460 - 312) */ --hx-tmin:76px; /* the photo area never gets shorter than the header plus 8px */ --hx-glass:rgba(10,39,92,.6); /* booking bar tint, the boards' barTint .6 */ position:relative;display:flex;flex-direction:column; overflow-x:clip;background:transparent; /* one page background (D-174): the navy is the body's */ padding:0 0 48px /* 48px below the form */ } /* The photo area and the photo with its overlay (the boards' navShade .82 and shade .7). The photo layer runs --hx-ov below the photo area, behind the headline, as on the boards. */ #top .hx-photo{position:relative;z-index:0;flex:0 1 var(--hx-tb);min-height:var(--hx-tmin)} #top .hx-img,#top .hx-photo::after{position:absolute;left:0;top:0;width:100%;height:calc(100% + var(--hx-ov))} #top .hx-img{max-width:none;object-fit:cover;object-position:18% 0} /* phone: the top shade scales with the photo (her face moves up as it shrinks); the bottom ramp keeps its distance from the photo's foot, so the headline sits on the same shade as m01b. At 460px tall this is m01b's gradient exactly (12%, 26%, 53%, 76.5%). */ #top .hx-photo::after{content:""; background-image:linear-gradient(180deg,rgba(4,16,39,.82) 0%,rgba(4,16,39,.78) 12%,rgba(4,16,39,0) 26%,rgba(4,16,39,0) calc(100% - 216px),rgba(4,16,39,.7) calc(100% - 108px),rgba(4,16,39,1) 100%)} #top .hx-inner{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:flex-start; width:100%;max-width:var(--wrap);margin-inline:auto; padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))} #top .hx-h1{font-family:var(--font-display);font-size:var(--fs-h1);line-height:1.08;font-weight:700;letter-spacing:-.02em;color:var(--bone)} #top .hx-sub{margin-top:14px;font-size:18px;line-height:1.45;color:var(--bone);text-wrap:pretty} /* Phones (D-171, Bobby 11 Oct: "Amy's photo just gets kind of lost. The font is too big."): the headline is cut by a sixth at every phone width, 30px at 390 (the board's 36), and the line under it one step, 16px (the board's 18). The content is anchored to the hero's foot, so the shorter text block gives the space back to the photo above the headline. 768 and up keep the board's sizes. */ @media (max-width:767px){ #top{--hx-h1:calc(var(--fs-h1) * .8334)} #top .hx-h1{font-size:var(--hx-h1)} #top .hx-sub{font-size:16px} } /* The form holds the journey type, the booking box and the trust line. */ #top .hx-form{width:100%;margin-top:24px;display:flex;flex-direction:column;align-items:flex-start} /* Journey type: real radios, so the mode is sent with JavaScript off. Each label is the chip. */ #top .hx-mode{position:relative;display:inline-flex;gap:4px;margin:0;padding:4px;min-width:0;border:0;border-radius:var(--radius); background:linear-gradient(var(--hx-glass),var(--hx-glass)); -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)} #top .hx-chip{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:var(--radius); background:transparent;color:var(--bone);font-family:var(--font-display);font-size:15px;font-weight:500;line-height:1;cursor:pointer; -webkit-user-select:none;user-select:none} #top .hx-radio:checked + .hx-chip{background-color:var(--blue-700)} #top .hx-radio:focus-visible + .hx-chip{outline:2px solid var(--blue-300);outline-offset:2px} @media (max-width:359px){#top .hx-chip{padding:0 10px}} /* D-187: three chips (One way, Return, By the hour) fit a 320px screen */ /* D-190, D-191: the return saving. From 768px a "save 10%" tag inside the Return chip (no height); below 768 the chips cannot hold it at 320, so a line under them says it in every mode. It is always there, so picking Return moves nothing (Bobby, 11 Oct: "it changes the position of the hero and it squashes it"). One way and By the hour say "Book a return and save 10% on the way back home", Return says "Save 10% on the way back home". Both sit in one grid cell and one shows at a time (visibility, so a screen reader hears only that one), so the line is as tall as the longer wording in every mode. The size follows the screen's width below 370px so the long wording stays on one line at 320 (its width is 22.5 font-sizes, so 23.3 leaves a little to spare); from 370 it is 14px (12px at 320, 13.7px at 360). Bone on the flat navy below the photo, the percent in 600. D-192, D-193: By the hour never mentions a return. It says "Save up to 10% on longer bookings" (-c), the third wording in the same cell, so the line is as tall as the longest of the three in every mode and picking By the hour moves nothing. */ #top .hx-modes{display:flex;flex-direction:column;align-items:inherit;gap:6px} #top .hx-save{display:none;margin:0;font-size:14px;line-height:1.4;color:var(--bone)} #top .hx-save [data-nv-fill]{font-weight:600} #top .hx-tag{display:none} @media (max-width:767px){ #top .hx-save{display:grid;font-size:min(14px,calc((100vw - 2 * var(--gutter)) / 23.3))} #top .hx-save > span{grid-area:1 / 1} #top .hx-save-b,#top .hx-save-c{visibility:hidden} #top .hx-form.is-return .hx-save-a{visibility:hidden} #top .hx-form.is-return .hx-save-b{visibility:visible} #top .hx-form:has(#hx-return:checked) .hx-save-a{visibility:hidden} #top .hx-form:has(#hx-return:checked) .hx-save-b{visibility:visible} #top .hx-form.is-hourly .hx-save-a{visibility:hidden} #top .hx-form.is-hourly .hx-save-c{visibility:visible} #top .hx-form:has(#hx-hourly:checked) .hx-save-a{visibility:hidden} #top .hx-form:has(#hx-hourly:checked) .hx-save-c{visibility:visible} } @media (min-width:768px){ #top .hx-tag{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid rgba(244,241,234,.55);border-radius:4px; font-family:var(--font-body);font-size:12px;font-weight:600;line-height:1.2;color:var(--bone);white-space:nowrap} } /* The booking box. Phones: the glass box holds the fields, the button and the trust line. */ #top .hx-box{position:relative;width:100%;margin-top:12px;padding:20px 16px 16px;display:flex;flex-direction:column;gap:16px;border-radius:var(--radius); background:linear-gradient(180deg,rgba(244,241,234,.1) 0%,rgba(244,241,234,0) 38px),linear-gradient(var(--hx-glass),var(--hx-glass)); -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)} #top .hx-bar{position:relative;display:flex;flex-direction:column;gap:16px;border-radius:var(--radius)} @media (max-width:767px){ #top .hx-bar.rim-hi::before,#top .hx-bar.energy::after{display:none} } #top .hx-fld{display:flex;flex-direction:column;gap:2px;min-width:0} #top .hx-fld label{font-family:var(--font-display);font-size:12px;line-height:1.55;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)} #top .hx-fld .nv-field{width:100%;height:44px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--line-control);border-radius:0; font-family:var(--font-body);font-size:16px;color:var(--bone);text-overflow:ellipsis} #top .hx-fld--when,#top .hx-fld--back{gap:6px} #top .hx-div{display:none} /* D-192: Duration takes Where to's place in By the hour (shown by :has, and by 01-hero.js's is-hourly where :has is missing), the same width and the same height, so picking a mode moves nothing (D-191). It is a native select (a phone opens its own wheel), drawn like the other fields: transparent, a bottom line, 16px so iOS never zooms, 44px tall (36px in the desktop bar). The list's last line, the note for a longer booking, is a disabled option, so the field never grows to hold it. */ #top .hx-fld--dur{display:none} #top .hx-form.is-hourly .hx-fld--dest{display:none} #top .hx-form.is-hourly .hx-fld--dur{display:flex} #top .hx-form:has(#hx-hourly:checked) .hx-fld--dest{display:none} #top .hx-form:has(#hx-hourly:checked) .hx-fld--dur{display:flex} #top .hx-sel{position:relative;display:block} #top .hx-fld .hx-sel select{display:block;-webkit-appearance:none;appearance:none;padding:0 20px 0 0;cursor:pointer;text-overflow:ellipsis; white-space:nowrap;overflow:hidden;color-scheme:dark} #top .hx-sel select:focus-visible{outline:2px solid var(--blue-300);outline-offset:2px} #top .hx-sel option{background:var(--navy);color:var(--bone)} #top .hx-sel option:disabled{color:var(--muted)} #top .hx-sel__chev{position:absolute;right:0;top:50%;width:14px;height:14px;margin-top:-7px;color:var(--bone);pointer-events:none} /* The longest choice, "10 hours, 405 pounds (save 45 pounds)", is 187px at 16px. It fits from a 1100px window up and on every phone; in the desktop bar between 1024 and about 1090 the closed box shows the longest few with an ellipsis (the list shows them whole). */ /* D-187, D-191: When and the return share one row, in When's place (a phone's full row, a desktop bar's When column). One way and By the hour: When has the row. Return: When and Return are a half each, 8px apart, so the row is exactly as tall as before and nothing above or below it moves. The return shows only while Return is picked: by :has() without JavaScript, and by 01-hero.js's is-return class where :has() is missing (two rules, so a browser without :has() keeps the second). A half is 102px of text at 320 (a phone's smallest), so in Return the calendar icon goes, the sides are 8px, the placeholder is "Date & time" (84px at 16px) and a picked time reads "15 Jan, 05:15" at 14px (at most 93px, "20 May, 00:00"; the browser's own "15/01/2027, 05:15" is 129px at 16px and would be clipped). Focused, the native control shows, at 16px as the input always is (so iOS does not zoom). */ #top .hx-whens{display:grid;grid-template-columns:minmax(0,1fr);column-gap:8px;row-gap:0;min-width:0} #top .hx-fld--back{display:none} #top .hx-form.is-return .hx-fld--back{display:flex} #top .hx-form:has(#hx-return:checked) .hx-fld--back{display:flex} #top .hx-form.is-return .hx-whens{grid-template-columns:repeat(2,minmax(0,1fr))} #top .hx-form:has(#hx-return:checked) .hx-whens{grid-template-columns:repeat(2,minmax(0,1fr))} /* When: a native date and time picker. 01-hero.js marks the box is-empty while nothing is picked, which shows the board's placeholder and hides the browser's empty segments. Without the script the browser's own control shows as it is. */ #top .hx-when{position:relative;display:flex;align-items:center;gap:8px;height:46px;padding:0 12px; background:var(--navy);border:1px solid var(--line-control);border-radius:var(--radius);cursor:text} #top .hx-when svg{flex-shrink:0} #top .hx-when input{flex:1 1 0;min-width:0;height:44px;margin:0;padding:0;background:transparent;border:0;border-radius:0; font-family:var(--font-body);font-size:16px;line-height:1.3;color:var(--bone);text-align:left;-webkit-appearance:none;appearance:none} #top .hx-when input::-webkit-date-and-time-value{text-align:left} #top .hx-when-ph,#top .hx-when-val{display:none} #top .hx-when-ph .ph-half{display:none} /* the focus ring goes round the visible box, not the bare input inside it */ #top .hx-when input:focus-visible{outline:none} #top .hx-when:focus-within{outline:2px solid var(--blue-300);outline-offset:2px} /* The browser's own calendar button, invisible and stretched over the whole input, so a mouse click anywhere on the date opens the calendar natively (Chrome, Edge). 01-hero.js's showPicker() covers the rest of the box, but browsers refuse it inside a page embedded from another site, such as the claude.ai preview (12 Oct, measured: SecurityError), which left only typing. */ #top .hx-when.is-js input{position:relative} #top .hx-when.is-js input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0; opacity:0;cursor:pointer;background:none} #top .hx-when.is-empty input:not(:focus){color:transparent} #top .hx-when.is-empty input:not(:focus) + .hx-when-ph{display:block;position:absolute;left:36px;right:12px;top:50%;transform:translateY(-50%); overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:16px;line-height:1.3;color:var(--muted)} /* D-191: the half-width boxes of Return (see the whens row above). The picked time is drawn by 01-hero.js into .hx-when-val (aria-hidden; the input keeps the real value for assistive tech) and the browser's own text is hidden until the control is focused. */ #top .hx-form.is-return .hx-when{gap:0;padding:0 8px} #top .hx-form.is-return .hx-when svg{display:none} #top .hx-form.is-return .hx-when.is-empty input:not(:focus) + .hx-when-ph{left:8px;right:8px} #top .hx-form.is-return .hx-when-ph .ph-full{display:none} #top .hx-form.is-return .hx-when-ph .ph-half{display:inline} #top .hx-form.is-return .hx-when.is-js:not(.is-empty) input:not(:focus){color:transparent} #top .hx-form.is-return .hx-when.is-js:not(.is-empty) input:not(:focus) ~ .hx-when-val{display:block;position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%); overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:14px;line-height:1.3;color:var(--bone)} #top .hx-form:has(#hx-return:checked) .hx-when{gap:0;padding:0 8px} #top .hx-form:has(#hx-return:checked) .hx-when svg{display:none} #top .hx-form:has(#hx-return:checked) .hx-when.is-empty input:not(:focus) + .hx-when-ph{left:8px;right:8px} #top .hx-form:has(#hx-return:checked) .hx-when-ph .ph-full{display:none} #top .hx-form:has(#hx-return:checked) .hx-when-ph .ph-half{display:inline} #top .hx-form:has(#hx-return:checked) .hx-when.is-js:not(.is-empty) input:not(:focus){color:transparent} #top .hx-form:has(#hx-return:checked) .hx-when.is-js:not(.is-empty) input:not(:focus) ~ .hx-when-val{display:block;position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%); overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-size:14px;line-height:1.3;color:var(--bone)} /* Required fields (D-180). The design system's error token, --danger #E58A85, on a small navy plate: 7.06:1, the measured pair (on the box's glass alone it is about 6.5:1, short of AAA). The field's underline (or the date box's edge) turns --danger too, and the message says what to do in words, so colour is never the only signal. Focus keeps its own teal and blue rings. */ #top .hx-err{align-self:flex-start;margin:6px 0 0;padding:2px 6px;border-radius:var(--radius);background:var(--navy); font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1.4;color:var(--danger);text-align:left} #top .hx-err[hidden]{display:none} #top .hx-fld.is-invalid .nv-field:not(:focus-visible){border-bottom-color:var(--danger)!important} #top .hx-fld.is-invalid .hx-when{border-color:var(--danger)} /* Get a price: the hero's one solid teal button. */ #top .hx-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;margin-top:4px;padding:0 24px; border:0;border-radius:var(--radius);background:var(--teal);color:var(--navy); font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1;white-space:nowrap} #top .hx-go svg{flex-shrink:0} /* The trust line. Phones: inside the box, under Get a price, one fact per line. */ #top .hx-trust{display:flex;flex-direction:column;align-items:center;gap:4px; text-align:center;font-size:13px;line-height:1.4;color:var(--muted-img)} @media (max-width:767px){#top .hx-trust{padding-top:14px;border-top:1px solid var(--line-strong)}} /* the rule above the trust line, phones only */ #top .hx-trust strong{color:var(--bone);font-weight:600} #top .hx-rate{display:flex;align-items:center;justify-content:center;gap:8px} /* phones: always the board's two lines ("..., licensed / by Portsmouth City Council"), so the part of the box below Get a price is the same height at every phone width (the fit below counts on it) */ #top .hx-licence{max-width:min(100%,240px);text-wrap:balance} #top .hx-sep{display:none} /* Stars: 4.9 shows as four full stars and nine tenths of the fifth, never five (D-103). */ #top .stars{--s:15px;--g:3px;position:relative;display:inline-flex;gap:var(--g);color:var(--line-strong)} #top .stars svg{display:block;flex-shrink:0;width:var(--s);height:var(--s)} #top .stars .fill{position:absolute;left:0;top:0;bottom:0;display:inline-flex;gap:var(--g);overflow:hidden;color:var(--teal);width:calc(4 * (var(--s) + var(--g)) + .9 * var(--s))} /* -------------------------------------------------------------------------- Phones: the board at every screen height (D-195, Bobby 12 Oct: "the text is too high up covering the girl, bring it down to showcase the girl image more, even if it means covering the get price button"). No phone fit: the photo area is always the board's 244px under the header, the headline sits where m01b puts it, below her face, and the booking box starts lower down, so on most phones Get a price is a short scroll away. Nothing here reads the screen's height, so nothing can re-fit the hero once it is on screen (D-194 holds by itself). The D-161 fit, D-194's held height and the short-screen shade for phones were removed with it; the desktop and tablet fit below are unchanged. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 768 and up: the desktop look. Centred, the photo grows with the width (the board's 1280 by 797 box), the booking bar is the glass, the trust line sits under it. 768 to 1023 lays the bar out as a two by two grid. -------------------------------------------------------------------------- */ @media (min-width:768px){ #top{--hx-pb:min(62.27vw,840px); /* the board's photo height: 797 at 1280 */ --hx-tb:calc(var(--hx-pb) * .6876); /* photo above the headline: 548 at 1280 */ --hx-ov:calc(var(--hx-pb) * .3124); /* photo below the headline's top: 249 at 1280 */ --hx-tmin:120px; padding-bottom:clamp(48px,calc(16.9px + 7.98vw),119px)} /* 119 at 1280 */ #top .hx-img{object-position:50% 0} /* the nav shade keeps the board's height (the header needs it); the bottom ramp keeps its distance from the photo's foot. At the board's height this is d01b's gradient exactly (8%, 22%, 53%, 76.5%). */ #top .hx-photo::after{background-image:linear-gradient(180deg,rgba(4,16,39,.82) 0,rgba(4,16,39,.78) calc(var(--hx-pb) * .08),rgba(4,16,39,0) calc(var(--hx-pb) * .22),rgba(4,16,39,0) calc(100% - var(--hx-pb) * .47),rgba(4,16,39,.7) calc(100% - var(--hx-pb) * .235),rgba(4,16,39,1) 100%)} #top .hx-inner{align-items:center;text-align:center} #top .hx-h1{max-width:860px} #top .hx-sub{max-width:800px;margin-top:16px;font-size:20px;text-wrap:balance} #top .hx-form{align-items:center} /* chips: 38px of colour as on d01b, inside a 44px tap area (the clear border is part of the label) */ #top .hx-mode{padding:3px 6px} #top .hx-chip{border-top:3px solid transparent;border-bottom:3px solid transparent;background-clip:padding-box} #top .hx-box{width:100%;margin-top:16px;padding:0;display:flex;flex-direction:column;align-items:center;gap:0;background:none; -webkit-backdrop-filter:none;backdrop-filter:none} #top .hx-box.rim-hi::before,#top .hx-box.energy::after{display:none} #top .hx-bar{width:100%;max-width:1060px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:16px;align-items:end; padding:20px 24px 24px;text-align:left; background:linear-gradient(180deg,rgba(244,241,234,.1) 0%,rgba(244,241,234,0) 40%),linear-gradient(var(--hx-glass),var(--hx-glass)); -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)} #top .hx-go{margin-top:0} #top .hx-trust{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:16px;row-gap:4px;margin-top:24px; font-size:14px;white-space:nowrap} #top .hx-rate{gap:10px} #top .stars{--s:17px} #top .hx-sep{display:block;width:1px;height:16px;background:var(--line-strong)} #top .hx-sep--2{display:none} #top .hx-licence{flex-basis:100%;max-width:none} } @media (min-width:1024px){ /* d01b: one bar, 96px tall: pickup, where to, a rule, when, Get a price */ #top .hx-bar{display:flex;flex-direction:row;align-items:center;height:96px;padding:16px 16px 16px 8px;column-gap:0;row-gap:0} /* fields 36px as on d01b. The label's 4px of padding replaces the board's 4px gap, so a tap anywhere from the label down lands on the field (58px in all), with no visual change. */ #top .hx-fld{gap:0;padding:0 16px} #top .hx-fld label{padding-bottom:4px} #top .hx-fld--pickup{flex:1.3 1 0} #top .hx-fld--dest,#top .hx-fld--dur{flex:1.2 1 0} /* the column carries the fields' 16px sides, so its flex base is the 32px a field's own padding gave When before the wrapper (without it When was 22px narrower and "Choose date and time" lost its last letters). D-191: in Return the column holds two boxes side by side, and a half must be 114px (8px sides, 96px for "20 May, 00:00" at 14px), so the column is never narrower than 268px: 2 x 114 + 8 + its 32px of sides. At 1280 that is 10px more than the board's 258px and it is so in every mode, which is what keeps pickup, Where to and the rule from moving when Return is picked. */ #top .hx-whens{flex:1.1 1 0;column-gap:8px;padding:0 16px;min-width:268px} #top .hx-whens .hx-fld{padding:0} #top .hx-fld--when,#top .hx-fld--back{gap:0} #top .hx-fld .nv-field{height:36px} #top .hx-div{display:block;flex-shrink:0;width:1px;height:48px;background:var(--line-control)} #top .hx-when{height:36px} #top .hx-when input{height:34px} #top .hx-go{width:auto;height:60px;margin-left:16px;padding:0 28px 0 32px;flex-shrink:0} #top .hx-trust{flex-wrap:nowrap} #top .hx-sep--2{display:block} #top .hx-licence{flex-basis:auto} } @media (min-width:1024px){ /* D-180: while an error shows, the bar grows to hold the messages under their fields; the fields stay top-aligned so their lines still meet, the rule and Get a price stay centred */ #top .hx-form.has-errors .hx-bar{height:auto;min-height:96px;align-items:flex-start} #top .hx-form.has-errors .hx-div,#top .hx-form.has-errors .hx-go{align-self:center} /* D-187 grew the bar while the return showed under When; D-191 puts it beside When, so it no longer does */ } /* 1024 to 1099 only: "Choose date and time" needs a 208px box, which the board's 1.3, 1.2, 1.1 split cannot give yet (a 17px scrollbar included), so When takes the larger share here. From 1100 the board's split fits it. */ @media (min-width:1024px) and (max-width:1099px){ #top .hx-fld--pickup{flex-grow:1.2} #top .hx-whens{flex-grow:1.3} } /* -------------------------------------------------------------------------- Desktop and tablet fit (D-161). The hero is at most the screen. The empty band under the trust line gives way first (down to 32px), then the photo area. The content block is 413px tall from 1024 (two-line headline, one-line sub-line, the 96px bar, the trust line) and at most 545px from 768 to 1023; those numbers only decide when the band starts to give way. Below 580px of screen (680px for the two by two bar) the hero stays the board. -------------------------------------------------------------------------- */ @media (min-width:1024px) and (min-height:580px){ #top{max-height:100vh;padding-bottom:clamp(32px,calc(100vh - var(--hx-tb) - 413px),min(119px,calc(16.9px + 7.98vw)))} @supports (height:100svh){ #top{max-height:100svh;padding-bottom:clamp(32px,calc(100svh - var(--hx-tb) - 413px),min(119px,calc(16.9px + 7.98vw)))} } } @media (min-width:768px) and (max-width:1023px) and (min-height:680px){ #top{max-height:100vh;padding-bottom:clamp(32px,calc(100vh - var(--hx-tb) - 545px),calc(16.9px + 7.98vw))} @supports (height:100svh){ #top{max-height:100svh;padding-bottom:clamp(32px,calc(100svh - var(--hx-tb) - 545px),calc(16.9px + 7.98vw))} } } /* -------------------------------------------------------------------------- Short screens only (D-161), 768 and up (phones are the board, D-195): the board's own overlay, strengthened, never lowered. When the hero is fitted to a short screen the headline's first line moves up over her hair and neck, which the board's ramp (about .45 at the headline's top) leaves under 4.5:1 (measured 2.38 at 1280x720, 4.33 at 390x664). Here the ramp starts just above the headline and is already .72 at its top. 100% minus --hx-ov is the headline's top. -------------------------------------------------------------------------- */ @media (min-width:768px) and (max-height:859px){ #top .hx-photo::after{background-image:linear-gradient(180deg,rgba(4,16,39,.82) 0,rgba(4,16,39,.78) calc(var(--hx-pb) * .08),rgba(4,16,39,0) calc(var(--hx-pb) * .22),rgba(4,16,39,0) calc(100% - var(--hx-ov) - 140px),rgba(4,16,39,.72) calc(100% - var(--hx-ov)),rgba(4,16,39,.85) calc(100% - var(--hx-ov) + 70px),rgba(4,16,39,1) 100%)} }