/* ========================================================================== site-v2.css — Shared, opt-in v2 design layer for the site-wide redesign -------------------------------------------------------------------------- The portable half of the homepage redesign, extracted so it can be applied to ANY page without the homepage-specific set-pieces in home-v2.css. HOW TO USE (per page): 1. Load this file LAST, after css/notify-me.webflow.css (it overrides it). 2. Add class "nm-v2" to . 3. In the WebFont.load call, swap the "Inter" family for "Inter Tight" (so body text renders in the new face). Keep PT Mono. Everything is namespaced under `.nm-v2` so it cannot leak into pages that have not opted in. This mirrors home-v2.css (which stays `.home-v2` for the homepage's bespoke sections); a page may carry BOTH classes if it wants the shared layer plus homepage set-pieces. See REDESIGN-ROLLOUT.md for the full plan and DESIGN-SYSTEM.md for the rules this encodes (Font Weight Scale, Border Radius, Section Rhythm). ========================================================================== */ /* ---- Lighter Tt Drugs faces (global — registers weights, no visual effect until something asks for weight 300/400) --------------------------------- The global stylesheet registers Tt Drugs at a single DemiBold (600) weight, so headings could not render thinner than 600. These additive @font-face rules register the real Light (300) and Regular (400) cuts so v2 headings can actually thin out. Same family name, purely additive — does not change the 600 face the rest of the site uses. ---------------------------------- */ @font-face { font-family: "Tt Drugs"; src: url("../fonts/TTDrugs-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tt Drugs"; src: url("../fonts/TTDrugs-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } /* ========================================================================== 1. TOKENS (scoped to .nm-v2 — cannot affect non-opted-in pages) ========================================================================== */ .nm-v2 { /* Brand / color */ --v2-blue: #003baf; --v2-blue-bright: #4380f9; --v2-ink: #12111c; --v2-ink-2: #1b1a26; --v2-line: #e6e8ee; --v2-muted: #5b606b; --v2-gold: #fbbf24; --v2-display: "Tt Drugs", "TT Drugs DemiBold", "Inter Tight", sans-serif; /* Type ladder — one fluid clamp() scale, ~1.25 ratio (see DESIGN-SYSTEM.md). Display & headings (Tt Drugs) */ --fs-display: clamp(3.6rem, 5.2vw, 6rem); --fs-h1: clamp(3.4rem, 4.4vw, 4.8rem); /* section titles (.big-heading-n) */ --fs-h2: clamp(2.4rem, 2.8vw, 3rem); --fs-h3: clamp(2rem, 2.1vw, 2.4rem); --fs-h4: clamp(1.8rem, 1.6vw, 2rem); --fs-stat: clamp(4.6rem, 6vw, 6.6rem); --fs-quote: clamp(2rem, 2.2vw, 2.6rem); /* Body & UI (Inter Tight) */ --fs-lead: clamp(1.6rem, 1.5vw, 1.8rem); --fs-body-lg: 1.7rem; --fs-body: 1.5rem; --fs-body-sm: 1.35rem; --fs-meta: 1.25rem; --fs-caption: 1.15rem; /* Labels / eyebrows (PT Mono) */ --fs-eyebrow: 1.2rem; --tr-eyebrow: 0.16em; /* Line-heights & display tracking */ --lh-display: 1.05; --lh-heading: 1.12; --lh-lead: 1.55; --lh-body: 1.6; --tr-display: -0.02em; --tr-heading: -0.01em; /* Section titles ride the --fs-h1 rung */ --v2-h2: var(--fs-h1); --v2-h2-leading: 1.1; --v2-h2-tracking: -0.015em; /* Inter-section vertical rhythm — one gap for every section boundary. */ --v2-rhythm: clamp(6rem, 10vw, 10rem); /* Enterprise/sharp surfaces: flatten the shared card/section radius token. Scoped to .nm-v2, so only opted-in pages go sharp. Buttons (999px), badges (999px) and circles (50%) use separate values and stay rounded — see §4 Radius for the "sharp shell / curved interior" rule. */ --border-radius-default: 0rem; /* Body type — Inter Tight (requires the page to load "Inter Tight" via WebFont). Cascades to all non-display text inside .nm-v2. */ font-family: "Inter Tight", Inter, sans-serif; } /* ========================================================================== 2. TYPOGRAPHY — the non-bold, light-weight rule (the core visual shift) -------------------------------------------------------------------------- Hierarchy comes from SIZE + SPACE + COLOR, never heavy weight. The global stylesheet ships h1–h4 at font-weight: 700; we pull every heading down so nothing reads black/heavy. Tt Drugs now has real Light (300) / Regular (400) cuts (above), so display headings render genuinely thin at 400. See DESIGN-SYSTEM.md → Font Weight Scale. ========================================================================== */ /* Headings → 400 (beats the global 700). Body emphasis → 500. Never 700+. */ .nm-v2 h1, .nm-v2 h2, .nm-v2 h3, .nm-v2 h4, .nm-v2 .big-heading-n, .nm-v2 .heading-32 { font-weight: 400; } .nm-v2 strong, .nm-v2 b { font-weight: 500; } /* Unified section-title scale for .big-heading-n (except a hero variant, which keeps its own larger size). */ .nm-v2 .big-heading-n:not(.hero) { font-size: var(--v2-h2); line-height: var(--v2-h2-leading); letter-spacing: var(--v2-h2-tracking); } /* Sentence case: several global rules force text-transform: capitalize, which Title-Cases Every Word. v2 wants the authored sentence case, with proper nouns capitalized in the HTML itself. Neutralise capitalize on headings. */ .nm-v2 .big-heading-n, .nm-v2 .heading-32, .nm-v2 .step-box-title, .nm-v2 .explore-blogs-title, .nm-v2 .pricing-hero-faq-title, .nm-v2 ._28-medium-text, .nm-v2 .keep-box-title { text-transform: none; } /* The footer newsletter "Subscribe" submit is uppercased by newsletter-form.css; sentence-case it (a CTA is not an eyebrow label). */ .nm-v2 .nm-newsletter-btn { text-transform: none; } /* Misc inherited 600s → cap at 500. */ .nm-v2 .sib-form button, .nm-v2 button[type="submit"] { font-weight: 500; } /* Reduced-motion safety for any v2 scroll-reveals added later. */ @media (prefers-reduced-motion: reduce) { .nm-v2 .nm-reveal { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 3. HEADINGS — map the ladder onto the global interior classes -------------------------------------------------------------------------- .big-heading-n is BOTH the hero H1 and the section-title workhorse. The :not(.hero) rule above pulls generic section titles down to --v2-h2 (from the old flat 6.4rem). Interior hero H1s use variant classes (.shopify-head, .pricing-hero-title), not .hero — keep those prominent at display size. ========================================================================== */ .nm-v2 .big-heading-n.shopify-head, .nm-v2 .big-heading-n.pricing-hero-title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); } /* More global title classes hard-set capitalize → neutralise to sentence case. */ .nm-v2 ._28-medium-text, .nm-v2 .keep-box-title { text-transform: none; } /* .keep-box-title ships at a very light weight 300 globally — too thin for a section statement. Bring it up to regular (body weight). */ .nm-v2 .keep-box-title { font-weight: 400; } /* Mid-level card / feature / item titles ship at weight 500 globally. The redesign builds hierarchy from SIZE, not weight, so every title reads at the same regular weight — bring these to 400 to match .big-heading-n. */ .nm-v2 ._28-medium-text, .nm-v2 .text28_bluedark { font-weight: 400; } /* Titles NEVER use PT Mono — that face is monospace (reads as code) and is reserved for eyebrows / kickers / labels only. Re-set any title class that ships in PT Mono to the display face. See DESIGN-SYSTEM.md → Typography. */ .nm-v2 .pricing-hero-faq-title, .nm-v2 .title-28-pt { font-family: var(--v2-display); font-weight: 400; } /* ========================================================================== 4. BUTTONS — keep the existing pill components; add the v2 hover lift. Every site button is already a pill in PT Mono, so we don't rebuild them — we only add the premium micro-interaction (and never let them faux-bold). ========================================================================== */ .nm-v2 .main-btn, .nm-v2 .white-btn.filled-bg, .nm-v2 .nav-btn.filled-bg, .nm-v2 .nav-btn-white.filled-bg, .nm-v2 .blue-button, .nm-v2 .transparent-button.blue.fill, .nm-v2 .transparent-button.red { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .nm-v2 .main-btn:hover, .nm-v2 .white-btn.filled-bg:hover, .nm-v2 .nav-btn.filled-bg:hover, .nm-v2 .nav-btn-white.filled-bg:hover, .nm-v2 .blue-button:hover, .nm-v2 .transparent-button.blue.fill:hover, .nm-v2 .transparent-button.red:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18, 17, 28, 0.14); } /* ========================================================================== 5. RADIUS — "sharp shell, curved interior" (see DESIGN-SYSTEM.md) -------------------------------------------------------------------------- Outer panels + full-bleed media frames go sharp; buttons/badges (pills) and circles keep their rounding. Cards hardcode their radius (32px / 3.2rem / 20px) rather than reading --border-radius-default, so target them literally. Nested inner cards/tiles stay curved — never a sharp box inside a sharp box. ========================================================================== */ .nm-v2 .control-box, .nm-v2 .control-yellow-box, .nm-v2 .yellow-box-stores, .nm-v2 .yellow-box-stores-home-page-tab, .nm-v2 .menu-box, .nm-v2 .fit-image, .nm-v2 .second-big-commerce-img-box { border-radius: 0; } /* ========================================================================== 6. RHYTHM — interior pages keep their existing 8rem section padding. The homepage's larger --v2-rhythm (13–21rem) is for cinematic set-pieces and is intentionally NOT applied here. --v2-rhythm is defined above for any page that opts to use it, but interior section spacing is left untouched for now. ========================================================================== */