Almost Perfect

About

/* ============================================================ Brand tokens ============================================================ */ .np-page { font-family: inherit; color: #232323; } .np-page * { box-sizing: border-box; } .np-page img { max-width: 100%; display: block; } /* ============================================================ 1. HERO — full-bleed image, gradient fade, title + CTAs ============================================================ */ .np-hero { position: relative; width: 100%; min-height: 480px; /* contain shows the WHOLE photo (box, arrow, mark all visible); right-aligned so any contain "bars" sit on the left and blend seamlessly with the dark gradient overlay. */ background: #1a1a1a url("https://cdn.shopify.com/s/files/1/0590/7955/7317/files/Arrow_detailing_Example_of_Cosmetic_Mark.jpg?v=1780484349") right center/contain no-repeat; color: #fff; overflow: hidden; isolation: isolate; } .np-hero::after { content: ""; position: absolute; inset: 0; /* Deep black anchored on the far left, fully clear by ~75% so the image's annotation box, arrow and mark stay visible. */ background: linear-gradient(90deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.92) 12%, rgba(0,0,0,0.75) 28%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.08) 62%, rgba(0,0,0,0) 75%); z-index: 1; pointer-events: none; } .np-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 64px 24px 64px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 480px; } .np-hero-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #b5ab75; margin: 0 0 22px; } .np-hero-title { font-family: rift, 'Rift', 'Barlow Condensed', 'Oswald', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.98; font-size: clamp(44px, 6.8vw, 84px); color: #fff; margin: 0 0 26px; max-width: 560px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); } .np-hero-title em