/** Shopify CDN: Minification failed Line 155:0 Unexpected "}" Line 577:52 Expected identifier but found whitespace Line 579:3 Unexpected "{" Line 579:5 Expected identifier but found "'nm-styles.css'" Line 580:1 Unexpected "/" Line 711:0 Unexpected "}" **/ /* Nutramare – Global Styles nm-styles.css Add this file to your Shopify theme assets folder. Then include it in your theme.liquid via: {{ 'nm-styles.css' | asset_url | stylesheet_tag }} */ /* ─── Tokens ─────────────────────────────────────────── */ :root { --nm-teal: #3ccce9; --nm-teal-dark: #28b5d0; --nm-cream: #f0ede8; --nm-cream-mid: #e8e4de; --nm-ink: #1a1a18; --nm-ink-mid: #3d3d3a; --nm-ink-muted: #7a7a74; --nm-white: #ffffff; --nm-card-bg: #eae6e0; --nm-border: rgba(26,26,24,0.10); --nm-font: 'Poppins', sans-serif; --nm-radius-sm: 8px; --nm-radius-md: 16px; --nm-radius-lg: 24px; --nm-radius-pill: 999px; --nm-max-w: 1200px; --nm-gutter: clamp(20px, 5vw, 80px); } /* ─── Reset helpers ───────────────────────────────────── */ .nm-hero, .nm-stats, .nm-cards, .nm-reviews { box-sizing: border-box; font-family: var(--nm-font); color: var(--nm-ink); background: var(--nm-cream); } .nm-hero *, .nm-stats *, .nm-cards *, .nm-reviews * { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════ */ .nm-hero { position: relative; min-height: 60vh; display: flex; align-items: center ; padding: 0 var(--nm-gutter) clamp(60px, 8vw, 100px); background-color: var(--nm-cream); /* Diagonal texture */ background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(180,170,155,0.13) 18px, rgba(180,170,155,0.13) 19px ); overflow: hidden; } .nm-hero__inner { max-width: var(--nm-max-w); margin: 0 auto; width: 100%; position: relative; z-index: 2; text-align: center; } .nm-hero__origin { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; color: var(--nm-ink-muted); margin: 0 0 32px; font-weight: 500; text-shadow: 0 2px 12px rgba(0,0,0,0.8); color: var(--nm-white); } .nm-hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-teal); display: inline-block; flex-shrink: 0; } .nm-hero__headline { font-size: clamp(36px, 7vw, 88px); font-weight: 300; line-height: 1.0; letter-spacing: -0.02em; color: var(--nm-white); margin: 0 0 24px; white-space: normal; text-shadow: 0 2px 30px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.7); } .nm-hero__subtext { font-size: clamp(18px, 2.5vw, 28px); font-weight: 600; font-style: italic; color: var(--nm-teal) line-height: 1.6; max-width: 300px; margin: 0 auto 36px; text-shadow: 0 1px 20px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.8); } .nm-hero__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .nm-hero__cta { display: inline-flex; align-items: center; gap: 10px; background: var(--nm-teal); color: var(--nm-white); font-family: var(--nm-font); font-size: 15px; font-weight: 600; padding: 16px 32px; border-radius: var(--nm-radius-pill); text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; white-space: nowrap; flex-shrink: 0; border: 1px solid #ffffff !important; } } .nm-hero__cta:hover { background: var(--nm-teal-dark); transform: translateY(-1px); } .nm-hero__cta-note { font-size: 12px; color: var(--nm-ink-muted); margin: 0; letter-spacing: 0.03em; text-shadow: 0 1px 10px rgba(0,0,0,0.8); color: var(--nm-white); } /* ═══════════════════════════════════════════════════════ STATS STRIP ═══════════════════════════════════════════════════════ */ .nm-stats { padding: 0 var(--nm-gutter); background: var(--nm-cream); } .nm-stats__grid { max-width: var(--nm-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); overflow: hidden; background: var(--nm-white); } .nm-stats__item { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 36px); border-right: 1px solid var(--nm-border); gap: 4px; } .nm-stats__item:last-child { border-right: none; } .nm-stats__index { font-size: 11px; font-weight: 600; color: var(--nm-teal); letter-spacing: 0.06em; margin-bottom: 6px; } .nm-stats__number { font-size: clamp(28px, 3.5vw, 48px); font-weight: 300; color: var(--nm-ink); line-height: 1; letter-spacing: -0.02em; } .nm-stats__label { font-size: 13px; font-weight: 600; color: var(--nm-ink); margin-top: 8px; } .nm-stats__sub { font-size: 12px; color: var(--nm-ink-muted); line-height: 1.4; } /* ═══════════════════════════════════════════════════════ NAVIGATION CARDS ═══════════════════════════════════════════════════════ */ .nm-cards { padding: clamp(60px, 8vw, 100px) var(--nm-gutter); background: var(--nm-cream); } .nm-cards__header { max-width: var(--nm-max-w); margin: 0 auto 48px; text-align: center; } .nm-cards__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--nm-teal); margin: 0 0 12px; text-transform: uppercase; } .nm-cards__title { font-size: clamp(28px, 4vw, 52px); font-weight: 300; letter-spacing: -0.02em; color: var(--nm-ink); margin: 0; } .nm-cards__grid { max-width: var(--nm-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .nm-cards__card { border-radius: var(--nm-radius-lg); overflow: hidden; background: var(--nm-card-bg); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nm-cards__card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); } .nm-cards__image-wrap { aspect-ratio: 1/1; min-height: 200px overflow: hidden; background: var(--nm-cream-mid); background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(180,170,155,0.18) 18px, rgba(180,170,155,0.18) 19px ); } .nm-cards__image { width: 100%; height: 100%; object-fit: cover; display: block; } .nm-cards__image-placeholder { width: 100%; height: 100%; } .nm-cards__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; background: var(--nm-white); } .nm-cards__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--nm-teal); margin: 0; text-transform: uppercase; } .nm-cards__card-title { font-size: clamp(20px, 2vw, 26px); font-weight: 400; color: var(--nm-ink); margin: 0; letter-spacing: -0.01em; line-height: 1.2; } .nm-cards__card-text { font-size: 13px; color: var(--nm-ink-mid); line-height: 1.6; margin: 0; flex: 1; } .nm-cards__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--nm-ink); text-decoration: none; border: 1px solid var(--nm-border); padding: 10px 18px; border-radius: var(--nm-radius-pill); margin-top: 8px; align-self: flex-start; transition: border-color 0.2s, background 0.2s; } .nm-cards__link:hover { border-color: var(--nm-teal); background: rgba(60,204,233,0.06); } /* ═══════════════════════════════════════════════════════ REVIEWS MARQUEE ═══════════════════════════════════════════════════════ */ .nm-reviews { padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px); background: var(--nm-cream); overflow: hidden; } .nm-reviews__header { max-width: var(--nm-max-w); margin: 0 auto clamp(36px, 4vw, 56px); padding: 0 var(--nm-gutter); } .nm-reviews__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--nm-teal); margin: 0 0 12px; text-transform: uppercase; } .nm-reviews__title-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .nm-reviews__title { font-size: clamp(28px, 4vw, 52px); font-weight: 300; letter-spacing: -0.02em; color: var(--nm-ink); margin: 0; } .nm-reviews__count { font-size: 12px; color: var(--nm-ink-muted); letter-spacing: 0.03em; } .nm-reviews__track-wrap { overflow: hidden; cursor: default; } .nm-reviews__track { display: flex; gap: 24px; width: max-content; animation: nm-scroll 40s linear infinite; } .nm-reviews__track:hover { animation-play-state: paused; } @keyframes nm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .nm-reviews__item { flex-shrink: 0; width: clamp(280px, 30vw, 420px); background: var(--nm-white); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; } .nm-reviews__quote-mark { font-size: 36px; line-height: 1; color: var(--nm-teal); font-family: Georgia, serif; display: block; margin-bottom: -8px; } .nm-reviews__text { font-size: 14px; line-height: 1.65; color: var(--nm-ink-mid); margin: 0; flex: 1; } .nm-reviews__author { font-size: 12px; font-weight: 600; color: var(--nm-ink); margin: 0; letter-spacing: 0.02em; } .nm-reviews__breed { font-weight: 400; color: var(--nm-ink-muted); font-style: italic; } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { .nm-stats__grid { grid-template-columns: repeat(2, 1fr); } .nm-stats__item:nth-child(2) { border-right: none; } .nm-stats__item:nth-child(3), .nm-stats__item:nth-child(4) { border-top: 1px solid var(--nm-border); } .nm-cards__grid { grid-template-columns: 1fr; max-width: 480px; } .nm-cards__image-wrap { aspect-ratio: 1/1; } } @media (max-width: 600px) { .nm-hero { min-height: 80vh; padding-bottom: 60px; } .nm-stats__grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--nm-radius-sm); } .nm-reviews__title-row { flex-direction: column; } } /* Hide existing theme email section on NM homepage */ .template-page .email-signup-banner, .template-page [class*="email"], .template-page [class*="signup"] { display: none; } .template-page .email-signup-banner, .template-page [class*="email"], .template-page [class*="signup"], .template-page section.color-inverse-with-accent { display: none; } .template-page [class*="newsletter"] { display: none !important; } .nm-hero__form { width: 100%; max-width: 480px; margin: 0 auto; } .nm-hero__form-row { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; } .nm-hero__input { flex: 2; padding: 15px 20px; border-radius: var(--nm-radius-pill); border: 1px solid var(--nm-border); font-family: var(--nm-font); font-size: 14px; background: var(--nm-white); color: var(--nm-ink); outline: none; } .nm-hero__input:focus { border-color: var(--nm-teal); } .nm-hero__success { font-size: 18px; color: #a8eef5 margin: 10px 0 0; text-align: center; text-shadow: 0 2px 20px rgba(14, 13, 13, 1), 0 0 40px rgba(0,0,0,1.3); font-weight: 900; letter-spacing: 0.03em; } * Nutramare – Global Styles nm-styles.css Add this file to your Shopify theme assets folder. Then include it in your theme.liquid via: {{ 'nm-styles.css' | asset_url | stylesheet_tag }} */ /* ─── Tokens ─────────────────────────────────────────── */ :root { --nm-teal: #3ccce9; --nm-teal-dark: #28b5d0; --nm-cream: #f0ede8; --nm-cream-mid: #e8e4de; --nm-ink: #1a1a18; --nm-ink-mid: #3d3d3a; --nm-ink-muted: #7a7a74; --nm-white: #ffffff; --nm-card-bg: #eae6e0; --nm-border: rgba(26,26,24,0.10); --nm-font: 'Poppins', sans-serif; --nm-radius-sm: 8px; --nm-radius-md: 16px; --nm-radius-lg: 24px; --nm-radius-pill: 999px; --nm-max-w: 1200px; --nm-gutter: clamp(20px, 5vw, 80px); } /* ─── Reset helpers ───────────────────────────────────── */ .nm-hero, .nm-stats, .nm-cards, .nm-reviews { box-sizing: border-box; font-family: var(--nm-font); color: var(--nm-ink); background: var(--nm-cream); } .nm-hero *, .nm-stats *, .nm-cards *, .nm-reviews * { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════ */ .nm-hero { position: relative; min-height: 60vh; display: flex; align-items: center ; padding: 0 var(--nm-gutter) clamp(60px, 8vw, 100px); background-color: var(--nm-cream); /* Diagonal texture */ background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(180,170,155,0.13) 18px, rgba(180,170,155,0.13) 19px ); overflow: hidden; } .nm-hero__inner { max-width: var(--nm-max-w); margin: 0 auto; width: 100%; text-align: center; } .nm-hero__origin { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.08em; color: var(--nm-ink-muted); margin: 0 0 32px; font-weight: 500; color: var(--nm-white); } .nm-hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-teal); display: inline-block; flex-shrink: 0; } .nm-hero__headline { font-size: clamp(36px, 7vw, 88px); font-weight: 300; line-height: 1.0; letter-spacing: -0.02em; color: var(--nm-white); margin: 0 0 24px; white-space: normal; } .nm-hero__subtext { font-size: clamp(14px, 1.8vw, 17px); font-weight: 400; color: var(--nm-white); line-height: 1.6; max-width: 460px; margin: 0 auto 36px; text-shadow: 0 1px 20px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.8); } .nm-hero__cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; } .nm-hero__cta { display: inline-flex; align-items: center; gap: 10px; background: var(--nm-teal); color: var(--nm-white); font-family: var(--nm-font); font-size: 15px; font-weight: 600; padding: 16px 32px; border-radius: var(--nm-radius-pill); text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; white-space: nowrap; flex-shrink: 0; } } .nm-hero__cta:hover { background: var(--nm-teal-dark); transform: translateY(-1px); } .nm-hero__cta-note { font-size: 12px; color: var(--nm-ink-muted); margin: 0; letter-spacing: 0.03em; text-shadow: 0 1px 10px rgba(0,0,0,0.8); color: var(--nm-white); } /* ═══════════════════════════════════════════════════════ STATS STRIP ═══════════════════════════════════════════════════════ */ .nm-stats { padding: 0 var(--nm-gutter); background: var(--nm-cream); } .nm-stats__grid { max-width: var(--nm-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); overflow: hidden; background: var(--nm-white); } .nm-stats__item { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 36px); border-right: 1px solid var(--nm-border); gap: 4px; } .nm-stats__item:last-child { border-right: none; } .nm-stats__index { font-size: 11px; font-weight: 600; color: var(--nm-teal); letter-spacing: 0.06em; margin-bottom: 6px; } .nm-stats__number { font-size: clamp(28px, 3.5vw, 48px); font-weight: 300; color: var(--nm-ink); line-height: 1; letter-spacing: -0.02em; } .nm-stats__label { font-size: 13px; font-weight: 600; color: var(--nm-ink); margin-top: 8px; } .nm-stats__sub { font-size: 12px; color: var(--nm-ink-muted); line-height: 1.4; } /* ═══════════════════════════════════════════════════════ NAVIGATION CARDS ═══════════════════════════════════════════════════════ */ .nm-cards { padding: clamp(60px, 8vw, 100px) var(--nm-gutter); background: var(--nm-cream); } .nm-cards__header { max-width: var(--nm-max-w); margin: 0 auto 48px; text-align: center; } .nm-cards__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--nm-teal); margin: 0 0 12px; text-transform: uppercase; } .nm-cards__title { font-size: clamp(28px, 4vw, 52px); font-weight: 300; letter-spacing: -0.02em; color: var(--nm-ink); margin: 0; } .nm-cards__grid { max-width: var(--nm-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .nm-cards__card { border-radius: var(--nm-radius-lg); overflow: hidden; background: var(--nm-card-bg); display: flex; flex-direction: column; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nm-cards__card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); } .nm-cards__image-wrap { aspect-ratio: 1/1; min-height: 200px overflow: hidden; background: var(--nm-cream-mid); background-image: repeating-linear-gradient( -45deg, transparent, transparent 18px, rgba(180,170,155,0.18) 18px, rgba(180,170,155,0.18) 19px ); } .nm-cards__image { width: 100%; height: 100%; object-fit: cover; display: block; } .nm-cards__image-placeholder { width: 100%; height: 100%; } .nm-cards__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; background: var(--nm-white); } .nm-cards__tag { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--nm-teal); margin: 0; text-transform: uppercase; } .nm-cards__card-title { font-size: clamp(20px, 2vw, 26px); font-weight: 400; color: var(--nm-ink); margin: 0; letter-spacing: -0.01em; line-height: 1.2; } .nm-cards__card-text { font-size: 13px; color: var(--nm-ink-mid); line-height: 1.6; margin: 0; flex: 1; } .nm-cards__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--nm-ink); text-decoration: none; border: 1px solid var(--nm-border); padding: 10px 18px; border-radius: var(--nm-radius-pill); margin-top: 8px; align-self: flex-start; transition: border-color 0.2s, background 0.2s; } .nm-cards__link:hover { border-color: var(--nm-teal); background: rgba(60,204,233,0.06); } /* ═══════════════════════════════════════════════════════ REVIEWS MARQUEE ═══════════════════════════════════════════════════════ */ .nm-reviews { padding: clamp(60px, 8vw, 100px) 0 clamp(60px, 8vw, 100px); background: var(--nm-cream); overflow: hidden; } .nm-reviews__header { max-width: var(--nm-max-w); margin: 0 auto clamp(36px, 4vw, 56px); padding: 0 var(--nm-gutter); } .nm-reviews__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--nm-teal); margin: 0 0 12px; text-transform: uppercase; } .nm-reviews__title-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .nm-reviews__title { font-size: clamp(28px, 4vw, 52px); font-weight: 300; letter-spacing: -0.02em; color: var(--nm-ink); margin: 0; } .nm-reviews__count { font-size: 12px; color: var(--nm-ink-muted); letter-spacing: 0.03em; } .nm-reviews__track-wrap { overflow: hidden; cursor: default; } .nm-reviews__track { display: flex; gap: 24px; width: max-content; animation: nm-scroll 40s linear infinite; } .nm-reviews__track:hover { animation-play-state: paused; } @keyframes nm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .nm-reviews__item { flex-shrink: 0; width: clamp(280px, 30vw, 420px); background: var(--nm-white); border: 1px solid var(--nm-border); border-radius: var(--nm-radius-md); padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; } .nm-reviews__quote-mark { font-size: 36px; line-height: 1; color: var(--nm-teal); font-family: Georgia, serif; display: block; margin-bottom: -8px; } .nm-reviews__text { font-size: 14px; line-height: 1.65; color: var(--nm-ink-mid); margin: 0; flex: 1; } .nm-reviews__author { font-size: 12px; font-weight: 600; color: var(--nm-ink); margin: 0; letter-spacing: 0.02em; } .nm-reviews__breed { font-weight: 400; color: var(--nm-ink-muted); font-style: italic; } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { .nm-stats__grid { grid-template-columns: repeat(2, 1fr); } .nm-stats__item:nth-child(2) { border-right: none; } .nm-stats__item:nth-child(3), .nm-stats__item:nth-child(4) { border-top: 1px solid var(--nm-border); } .nm-cards__grid { grid-template-columns: 1fr; max-width: 480px; } .nm-cards__image-wrap { aspect-ratio: 1/1; } } @media (max-width: 600px) { .nm-hero { min-height: 80vh; padding-bottom: 60px; } .nm-stats__grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--nm-radius-sm); } .nm-reviews__title-row { flex-direction: column; } } /* Hide existing theme email section on NM homepage */ .template-page .email-signup-banner, .template-page [class*="email"], .template-page [class*="signup"] { display: none; } .template-page .email-signup-banner, .template-page [class*="email"], .template-page [class*="signup"], .template-page section.color-inverse-with-accent { display: none; } .template-page [class*="newsletter"] { display: none !important; } .nm-hero__form { width: 100%; max-width: 480px; margin: 0 auto; } .nm-hero__form-row { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; } .nm-hero__input { flex: 2; padding: 15px 20px; border-radius: var(--nm-radius-pill); border: 1px solid var(--nm-border); font-family: var(--nm-font); font-size: 14px; background: var(--nm-white); color: var(--nm-ink); outline: none; } .nm-hero__input:focus { border-color: var(--nm-teal); } .nm-hero__success { font-size: 13px; color: var(--nm-teal-dark); margin: 10px 0 0; text-align: center; } /* ═══════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width: 900px) { .nm-stats__grid { grid-template-columns: repeat(2, 1fr); } .nm-stats__item:nth-child(2) { border-right: none; } .nm-stats__item:nth-child(3), .nm-stats__item:nth-child(4) { border-top: 1px solid var(--nm-border); } .nm-cards__grid { grid-template-columns: 1fr; max-width: 480px; } .nm-cards__image-wrap { aspect-ratio: 1/1; } } @media (max-width: 600px) { .nm-hero { min-height: 80vh; padding-bottom: 60px; } .nm-stats__grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--nm-radius-sm); } .nm-reviews__title-row { flex-direction: column; } .nm-hero__form-row { flex-direction: column; } .nm-hero__input { width: 100%; border: 1px solid rgba(255,255,255,0.6); } } /* Hide existing theme email section on NM homepage */ .template-page [class*="newsletter"] { display: none !important; } .nm-hero__form { width: 100%; max-width: 480px; margin: 0 auto; } .nm-hero__form-row { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; } .nm-hero__input { flex: 2; padding: 15px 20px; border-radius: var(--nm-radius-pill); border: 1px solid var(--nm-border); font-family: var(--nm-font); font-size: 14px; background: var(--nm-white); color: var(--nm-ink); outline: none; } .nm-hero__input:focus { border-color: var(--nm-teal); } .nm-hero__success { font-size: 13px; color: var(--nm-teal-dark); margin: 10px 0 0; text-align: center; } .nm-hero__launch-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nm-white) !important; margin: 0 0 16px; text-shadow: 0 1px 10px rgba(0,0,0,0.8); } .nm-hero__headline-accent { color: var(--nm-teal); font-weight:500; text-shadow: 0 0.5px 8px rgba(0, 0, 0, 0.5); } .nm-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); pointer-events: none; z-index: 1; } .nm-hero__subtext-break { display: block; } a.nm-cards__card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }