/* ========================================================= LYFT v2 - TYPE + NAV Loads after silver.css. Layout untouched: this only changes how the display face and the nav bar are USED. The diagnosis was that Big Shoulders Display is the right face used timidly. It is a condensed architectural grotesk with flat square terminals and monoline strokes, chosen because that is exactly how the LYFT wordmark is drawn. At weight 600, near-zero tracking and a 1.1 line-height it was being set like a body font, so none of that came through. Nothing here swaps the typeface. It pushes it. ========================================================= */ /* --------------------------------------------------------- 1. DISPLAY SCALE Three things, all of which a condensed face wants and was not getting: heavier weight, tighter leading so stacked lines lock into a block, and real size contrast between levels instead of a gentle ramp. --------------------------------------------------------- */ .h-hero,.h-xxl,.hero-copy h1{ font-weight:800; letter-spacing:-.012em; /* condensed face: just enough to close the gaps */ line-height:.92; /* stacked hero lines read as one mass */ } .h-xl{font-weight:700;letter-spacing:-.008em;line-height:.98} .h-lg{font-weight:700;letter-spacing:-.005em;line-height:1.02} .h-md{font-weight:600;letter-spacing:0;line-height:1.15} /* wider jumps between levels. The old ramp (4rem / 2.7rem / 2.1rem) was too close to establish hierarchy on its own. */ .h-xxl{font-size:clamp(2.7rem,6.2vw,5rem)} .h-hero{font-size:clamp(2.5rem,5.4vw,4.2rem)} .h-xl{font-size:clamp(2rem,3.8vw,3.1rem)} .h-lg{font-size:clamp(1.6rem,2.6vw,2.3rem)} .hero-copy h1{font-size:clamp(2.6rem,6vw,5rem)} /* An uppercase setting of a condensed face has no descenders and no lowercase to breathe, so it takes slightly looser tracking than the sentence-case settings above or it turns into a picket fence. */ .h-xxl.is-label,.h-xl.is-label,.h-lg.is-label, .h-xxl[data-case=upper],.h-xl[data-case=upper]{letter-spacing:.005em} /* --------------------------------------------------------- 2. EYEBROW The tracked label above every h1. It was floating unattached. A short silver bar in front of it ties it to the heading AND quotes the logo, whose whole identity is a row of vertical bars. --------------------------------------------------------- */ .eyebrow::before{ content:"";flex:none;width:26px;height:2px;border-radius:1px; background-image:var(--silver-rule);opacity:.9; } .eyebrow--center{justify-content:center} .eyebrow--center::after{ content:"";flex:none;width:26px;height:2px;border-radius:1px; background-image:var(--silver-rule);opacity:.9; } /* --------------------------------------------------------- 3. NAV The bar was generic: Helvetica at 14px, sentence case, a dot under the active item. It could have been any SaaS product. The links now use the brand face in the same tracked uppercase as the eyebrows, so the nav and the page speak with one voice. --------------------------------------------------------- */ .nav-links a{ font-family:var(--font-display); text-transform:uppercase; font-weight:600; font-size:.82rem; letter-spacing:.13em; padding:9px 15px; color:var(--muted); border-radius:0; /* pills on nav links read as buttons */ transition:color .28s var(--ease); } .nav-links a:hover{color:var(--text-hi)} /* style.css tints the active link with a translucent chip and premium.css does not, so the home page and the interior pages disagreed about what "you are here" looks like. The bar marker below is the marker, on every page. */ .nav-links a.active, .nav.scrolled .nav-links a.active{color:var(--text-hi);background:none} /* Active marker: three ascending bars, the logo's silhouette in miniature, instead of a generic dot. It is the one place a literal quote of the mark is worth it, because it marks WHERE YOU ARE inside the building. */ .nav-links a.active::after{ content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%); width:14px;height:7px;border-radius:0;background:none;box-shadow:none; -webkit-mask-image:var(--bars-mask);mask-image:var(--bars-mask); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:100% 100%;mask-size:100% 100%; background-image:var(--silver-grad-t); } :root{ --bars-mask:url("data:image/svg+xml;utf8,"); } /* Scrolled bar: sits on the lacquer surface like every other 30% panel, with the same specular top edge, rather than an untinted grey blur. */ .nav.scrolled{ background:color-mix(in srgb,var(--lacquer) 82%,transparent); backdrop-filter:blur(24px) saturate(170%); -webkit-backdrop-filter:blur(24px) saturate(170%); box-shadow:0 1px 0 var(--specular) inset,0 10px 30px -18px rgba(0,0,0,.9); } /* mobile menu inherits the same voice */ .mobile-menu a{ font-family:var(--font-display);text-transform:uppercase; letter-spacing:.1em;font-weight:600; } /* --------------------------------------------------------- 4. CASE The site was mixing UPPERCASE and Sentence case headings with no rule. The rule, mechanically: UPPERCASE a LABEL. Names a place or a section. No verb, no full sentence. "THE GYM", "TRAINING ZONES", "YOUR STYLISTS". Sentence a SENTENCE. Says something, has a verb or reads as speech. "Food that fits your training.", "What are you booking?", "A Decade in the Making". Test: could it be a sign screwed to a wall? Uppercase. Could it be spoken to a member? Sentence case. Existing markup already follows this about 80% of the time, so nothing is being restyled here; the rule is written down so the next page gets it right. --------------------------------------------------------- */ /* --------------------------------------------------------- 5. MOBILE Tighter leading is riskier at small widths where a headline wraps more, so give it back a little below the fold sizes. --------------------------------------------------------- */ @media (max-width:760px){ .h-hero,.h-xxl,.hero-copy h1{line-height:.96;letter-spacing:-.005em} .h-xl{line-height:1.02} .nav-links a{letter-spacing:.1em;font-size:.78rem;padding:9px 11px} } /* --------------------------------------------------------- 6. HEADER SCALE Nav type up 20%, the mark up 50%. The bar has to grow with the mark or a 57px logo sits in a 68px bar with 5px of air and reads as cramped rather than confident, so --nav-h goes up to 84px to keep roughly the same ratio of mark to bar. --nav-h is a token, and the hero offsets are all written as calc() against it, so nothing below needs touching. --------------------------------------------------------- */ :root{--nav-h:84px} .brand-mark{height:57px} /* was 38px */ .nav-links a{font-size:.98rem} /* was .82rem */ .nav-cta .btn{font-size:.98rem;padding:13px 26px} /* the footer and preloader marks are NOT part of the header and keep their own scale - growing them too would throw off the pages they anchor */ @media (max-width:1180px){ /* the wider type plus the wider CTA runs the bar out of room before the burger breakpoint, so give the links back their tracking first */ .nav-links a{letter-spacing:.09em;padding:9px 11px} } @media (max-width:760px){ :root{--nav-h:76px} .brand-mark{height:46px} .nav-links a{letter-spacing:.1em;font-size:.9rem;padding:9px 11px} }