/* ================================================================== Top urgency strip + bottom sticky buy bar. index.html only. Purely additive: nothing here redefines a rule styles.css or landing.css already owns, except body{padding-bottom}, which is deliberate and explained where it sits. Every color is a token. There are no hex values in this build. ================================================================== */ /* ------------------------------------------------------------------ 1. Top urgency strip OVERLAY, NOT A BAND IN THE FLOW. It was sticky, which meant it sat in normal flow, took its own 45px of the document and pushed the masthead down - a separate band stacked above the brand rather than a bar over the top of the page. It is now fixed, so it occupies no layout space at all and nothing below it moves. The masthead reserves room for it with padding-top:var(--urg-h) (see landing.css) so the wordmark still centers in what is left of the band, and the band's own 170px height is unchanged. GEOMETRY IS THE LIVE SITE'S, measured off theseniorflyer.com's .sale-bar rather than estimated: .sale-bar 59.6px tall on desktop, 65px at 390 .sale-bar__inner padding 10.5px 24px, max-width 1300px, centered .sale-bar__left 13.1px / 600 / .14em tracking, uppercase Our own content and palette A styling are unchanged; only the box and the type scale come across. The 59.6px is set as a min-height rather than left to the content, because the live bar gets its height from a CTA button in the bar and ours has no button - without the min-height the same padding and type land at ~43px. ------------------------------------------------------------------ */ :root{--urg-h:59.6px} @media (max-width:768px){:root{--urg-h:65px}} /* COLOR ONLY - geometry above is unchanged and verified. The strip used to be teal on teal: --accent-lift for the dot, the warning glyph, the promo words and the timer border, all sitting on a dark teal ground, one step from the masthead below it. Now the ground is the darkest ink token, the copy is cream at reduced opacity, and the only color in the strip is the alert red - which is the one thing in it that is actually urgent. */ .urg{ position:fixed;top:0;left:0;right:0;z-index:950; background:var(--ink-deep); color:var(--paper); border-bottom:1px solid rgba(245,241,232,.10); font-family:var(--ui); } .urg-in{ width:min(1300px,100%);margin-inline:auto; /* --urg-h is the strip's TOTAL height, which is what the masthead has to reserve. The 1px border-bottom is part of it, exactly as it is on the live site (its bar measures 59.6 with a 58.6 inner). */ min-height:calc(var(--urg-h) - 1px);padding:10.5px 24px; display:flex;align-items:center;justify-content:center; gap:.85rem; font-size:13.1px;letter-spacing:.14em;line-height:1.2; text-transform:uppercase;color:rgba(245,241,232,.72); } /* max-width:none IS LOAD-BEARING, NOT TIDYING. .urg-item is a

, and styles.css:86 sets p{margin:0 0 1rem;max-width:48ch} globally. The margin was already overridden here; the max-width was not. At 390 the strip's .74rem type makes 48ch = 322.45px, and the promo line needs 347px, so it overflowed its own capped box by 24.55px to the right while the box itself stayed centred by .urg-in's align-items:center. The live line is only 180px wide, well under the cap, so it centred exactly - which is why one line looked off and the other did not. Measured ink centres before this rule, at 390: live 195.24, promo 207.23, viewport centre 195. Uncapping the item lets both lines centre on their content. */ .urg-item{display:flex;align-items:center;gap:.45rem;margin:0;max-width:none;white-space:nowrap} .urg-item b{font-weight:700;color:rgba(245,241,232,.92)} .urg-sep{color:rgba(245,241,232,.28)} /* The counter is rewritten by script every few seconds. Tabular figures plus a fixed three-digit box keep its width constant, so a drift from 147 to 152 to 98 never nudges the line it sits on. Without this the strip contributes a small but real layout shift on every tick. */ .urg-live b{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; display:inline-block;min-width:3ch; } /* The live dot, in the brighter alert red. It was --accent-lift, which put a teal dot on a teal-family ground and read as decoration rather than as something live. */ .urg-dot{ width:.5rem;height:.5rem;flex:none;border-radius:50%; background:var(--signal-lift); animation:urg-pulse 1.6s ease-in-out infinite; } @keyframes urg-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.8)} } @media (prefers-reduced-motion:reduce){ .urg-dot{animation:none} } .urg-warn{color:var(--signal-lift)} .urg-promo b{color:rgba(245,241,232,.92)} .urg-ends{opacity:.62} /* Boxed digits. Tabular figures and a fixed tracking stop the width changing as the numbers tick, which is what makes a countdown jitter. */ .urg-timer{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; font-weight:600;font-size:.95rem;letter-spacing:.12em; padding:.24rem .5rem .22rem .55rem; /* A plate, not an outline, so no border: a solid deep desaturated red ground with the brighter alert red on it, 4.52 : 1. Every value here is a token - an rgba() of --signal-lift would have hardcoded it. */ color:var(--signal-lift); background:var(--signal-deep); border-radius:3px; } /* Two centered lines on a phone, no separator, larger digits. Box is the live site's: 65px tall, 10px vertical padding, 14px side gutter. The type scale is NOT the live site's here and that is deliberate - its mobile bar drops .sale-bar__left to 9.5px, which this audience cannot read. Ours holds at .74rem (~12.6px). Flagged in HANDOFF rather than matched. */ @media (max-width:768px){ .urg-in{ flex-direction:column;justify-content:center; gap:.12rem;padding:10px 14px;min-height:calc(var(--urg-h) - 1px); font-size:.74rem; } .urg-sep{display:none} /* .9rem, not 1rem: two stacked lines plus a 1rem timer overshoot the live bar's 65px box by ~2.6px and the min-height stops governing. At .9rem the content sits inside the box and the height is exact. */ .urg-timer{font-size:.9rem;letter-spacing:.1em} } @media (max-width:360px){ .urg-in{font-size:.66rem} .urg-timer{font-size:.95rem} } /* ------------------------------------------------------------------ 2. Bottom sticky buy bar z-index sits above the page but below .xi, the exit-intent overlay, which landing.css puts at 9998. The modal has to cover this bar. ------------------------------------------------------------------ */ /* Measured height of the bar at each width, reserved at the foot of the page so the footer is never sitting underneath it. styles.css and landing.css both end on body{padding-bottom:0} - the comment there says the room was for a sticky bar "no longer on the page" - so this puts the reservation back rather than inventing it. */ :root{--buybar-h:85px} @media (max-width:768px){:root{--buybar-h:69px}} body{padding-bottom:var(--buybar-h)} /* MOBILE ONLY, FROM 820px UP IT IS NOT THERE AT ALL. display:none rather than visibility or a transform: the bar must take no layout space on desktop, and the reserved --buybar-h at the foot of the page goes with it - otherwise the footer would sit above 85px of nothing. urgency.js reads the same 820px in a matchMedia and never attaches its scroll listener above it, so no handler runs on desktop either. The two thresholds are the same number and must stay the same number. 820 is not a new breakpoint. It is the page's own single-column line - where .hero-in collapses, .offer-grid collapses and the hero swaps to hero-560 - so "the bar is on where the page is one column" needs no extra rule to remember. */ @media (min-width:820px){ .buybar{display:none} body{padding-bottom:0} } .buybar{ position:fixed;left:0;right:0;bottom:0;z-index:900; background:var(--tile); border-top:2px solid var(--ink); box-shadow:0 -14px 34px -20px rgba(0,0,0,.4); transform:translateY(110%);opacity:0;pointer-events:none; transition:transform .25s ease,opacity .25s ease; } .buybar.show{transform:translateY(0);opacity:1;pointer-events:auto} @media (prefers-reduced-motion:reduce){ .buybar{transition:none} } /* FULL BLEED, NOT A CENTERED CONTAINER. The rest of the page sits in a 1080px column, but a fixed bar that inherits that column leaves the price and the button floating in the middle of a 1920px screen with dead space either side. The inner is therefore edge to edge with a fixed gutter, so the label sits flush left and the CTA flush right at every width. */ .buybar-in{ width:100%;max-width:none;margin:0; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.55rem 2rem; } .buybar-offer{min-width:0} .buybar-label{ display:block; font-family:var(--ui);font-weight:700; text-transform:uppercase;letter-spacing:.16em; font-size:.6rem;color:var(--ink-mute); margin-bottom:.18rem; } .buybar-price{display:flex;align-items:baseline;gap:.55rem} .buybar-was{font-size:1rem;color:var(--ink-mute);text-decoration:line-through} .buybar-now{font-family:var(--ui);font-size:1.9rem;line-height:1;color:var(--accent)} /* The page button at bar scale. Scoped to .buybar so .btn itself is untouched everywhere else on the page. */ .buybar .btn{ min-height:52px;padding:.7rem 1.7rem; font-size:1.05rem;white-space:nowrap;flex:none; /* 10px, not the .5rem this inherited: the arrow below is the one the offer CTA and the hero pair carry, and 10px is the gap they set it at. */ gap:10px; } /* THE TRAILING ARROW, THE SAME ONE THE OTHER CTAs USE. Identical declaration to .ep-btn::after and .hero .btn-row.top-cta .btn::after - the serif face, 1.1rem, no tracking, and the 4px slide on hover. Drawn with ::after rather than typed into the label so it can move on its own, which is why the markup says only GET IT NOW. */ .buybar .btn::after{ content:"\2192"; /* 17.6px, matching the offer/last-call/modal arrow and the hero pair - one arrow size on the page. The buybar is our own component and not a port of his, so this is a consistency decision, not a match to him. */ font-family:var(--serif);font-size:17.6px;letter-spacing:0; transition:transform .25s ease; } .buybar .btn:hover::after{transform:translateX(4px)} @media (prefers-reduced-motion:reduce){ .buybar .btn::after{transition:none} .buybar .btn:hover::after{transform:none} } @media (max-width:768px){ .buybar-in{gap:.7rem;padding:.45rem 1rem} .buybar-label{font-size:.55rem;letter-spacing:.14em} .buybar-now{font-size:1.5rem} .buybar-was{font-size:.85rem} .buybar .btn{min-height:46px;padding:.6rem 1.05rem;font-size:.92rem} } /* styles.css sends .btn to width:100% here, which would break the row. */ @media (max-width:560px){ .buybar .btn{width:auto} } @media (max-width:360px){ .buybar-in{padding:.45rem .8rem} .buybar .btn{padding:.6rem .8rem;font-size:.85rem} .buybar-label{font-size:.5rem} }