/* ========================================================= NextGen Vending Co — design system Mobile-first. Bright white. Premium retail-tech. ========================================================= */ /* ----------------------------------------- 1. Tokens ----------------------------------------- */ :root { /* Surfaces */ --ngv-white: #ffffff; --ngv-canvas: #ffffff; --ngv-surface: #f7f9fc; --ngv-surface-2: #eef2f8; --ngv-hairline: #e4e9f2; --ngv-hairline-soft: #eef1f6; /* Ink */ --ngv-ink: #0a0f1c; --ngv-ink-2: #182032; --ngv-muted: #4a5568; --ngv-muted-2: #6b7693; --ngv-faint: #98a2b3; /* Brand — comic-pop red. Every place the theme references --ngv-brand now renders as red, so links, focus rings, badges, tints, FAQ open-state, form-input focus borders, etc. all switch in one move. */ --ngv-brand: #e8392f; --ngv-brand-600: #b32820; --ngv-brand-700: #831a14; --ngv-brand-50: #fff0ee; --ngv-brand-100: #ffd8d4; --ngv-accent-cyan: #ffc426; /* repurposed: pop yellow for any old "cyan accent" usage */ --ngv-accent-ink: #051630; /* Supporting (retained for mascot, sparingly) */ --ngv-yellow: #ffc426; --ngv-yellow-dark: #e8a91c; --ngv-yellow-50: #fff8e0; --ngv-black: #0a0f1c; /* Elevation */ --ngv-shadow-xs: 0 1px 2px rgba(14, 23, 49, 0.04); --ngv-shadow-sm: 0 2px 8px rgba(14, 23, 49, 0.05), 0 1px 2px rgba(14, 23, 49, 0.04); --ngv-shadow-md: 0 8px 28px -8px rgba(14, 23, 49, 0.08), 0 2px 6px rgba(14, 23, 49, 0.04); --ngv-shadow-lg: 0 24px 60px -20px rgba(14, 23, 49, 0.12), 0 6px 16px -6px rgba(14, 23, 49, 0.06); --ngv-shadow-xl: 0 40px 80px -30px rgba(0, 64, 168, 0.18), 0 12px 30px -12px rgba(14, 23, 49, 0.1); /* Radii */ --ngv-r-sm: 10px; --ngv-r-md: 14px; --ngv-r-lg: 20px; --ngv-r-xl: 28px; --ngv-r-pill: 999px; /* Type — fully fluid with clamp() so every size scales smoothly from small phones all the way to large desktops. No more step-function breakpoints that crush 1366x768 and other awkward laptop resolutions. */ --ngv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ngv-fs-xs: clamp(0.78rem, 0.18vw + 0.74rem, 0.875rem); /* 12.5 → 14 */ --ngv-fs-sm: clamp(0.875rem, 0.20vw + 0.83rem, 0.9375rem); /* 14 → 15 */ --ngv-fs-base: clamp(0.9375rem, 0.25vw + 0.88rem, 1.0625rem); /* 15 → 17 */ --ngv-fs-lg: clamp(1rem, 0.40vw + 0.93rem, 1.25rem); /* 16 → 20 */ --ngv-fs-xl: clamp(1.125rem, 0.55vw + 1.02rem, 1.5rem); /* 18 → 24 */ --ngv-fs-2xl: clamp(1.5rem, 1.10vw + 1.20rem, 2.25rem); /* 24 → 36 */ --ngv-fs-3xl: clamp(1.75rem, 1.50vw + 1.30rem, 2.75rem); /* 28 → 44 */ --ngv-fs-4xl: clamp(2rem, 2.20vw + 1.40rem, 3.5rem); /* 32 → 56 */ --ngv-fs-5xl: clamp(2.25rem, 3.00vw + 1.50rem, 4.25rem); /* 36 → 68 */ --ngv-lh-tight: 1.08; --ngv-lh-snug: 1.2; --ngv-lh-normal: 1.55; --ngv-lh-loose: 1.7; /* Layout — fluid gutter that grows with viewport so small laptops don't feel cramped and large screens don't feel airy. */ --ngv-container: 1200px; --ngv-container-wide: 1320px; --ngv-gutter: clamp(16px, 2.5vw, 32px); --ngv-gutter-lg: clamp(20px, 3.2vw, 40px); /* Motion */ --ngv-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ngv-dur-fast: 160ms; --ngv-dur: 280ms; --ngv-dur-slow: 520ms; /* Header height */ --ngv-header-h: 88px; } /* Only the header height still steps — it's tied to the absolute brand mark size, not a fluid measurement. Type sizes are handled via clamp() above. */ @media (min-width: 768px) { :root { --ngv-header-h: 104px; } } @media (min-width: 1024px) { :root { --ngv-header-h: 120px; } } /* ----------------------------------------- 2. Reset + base ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } /* Global safety net — nothing inside should ever cause horizontal scroll on any viewport. Catches stray fixed-width images, long URLs, etc. */ html, body { overflow-x: clip; max-width: 100%; } img, svg, video, canvas { max-width: 100%; height: auto; } pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; } /* Long unbreakable words (URLs, technical terms) should hyphenate at the end of a line instead of pushing the layout wider. */ p, li, h1, h2, h3, h4, h5, h6, dd, dt, blockquote { overflow-wrap: anywhere; } body { margin: 0; font-family: var(--ngv-font); font-size: var(--ngv-fs-base); line-height: var(--ngv-lh-normal); color: var(--ngv-ink); background: var(--ngv-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; display: block; height: auto; } a { color: var(--ngv-brand); text-decoration: none; transition: color var(--ngv-dur-fast) var(--ngv-ease); } a:hover { color: var(--ngv-brand-600); } button { font: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; line-height: var(--ngv-lh-tight); color: var(--ngv-ink); } p { margin: 0 0 1em; color: var(--ngv-ink-2); } :focus-visible { outline: 3px solid var(--ngv-brand-100); outline-offset: 3px; border-radius: 6px; } /* ----------------------------------------- 3. Layout ----------------------------------------- */ .container { width: 100%; max-width: var(--ngv-container); margin: 0 auto; padding: 0 var(--ngv-gutter); } .container--wide { max-width: var(--ngv-container-wide); } .container--narrow { max-width: 880px; } @media (min-width: 768px) { .container { padding: 0 var(--ngv-gutter-lg); } } .section { padding: 72px 0; } .section--tight { padding: 48px 0; } .section--loose { padding: 96px 0; } .section--surface { background: var(--ngv-surface); } .section--ink { background: var(--ngv-ink); color: #fff; } .section--ink h1, .section--ink h2, .section--ink h3, .section--ink p { color: #fff; } .section--ink { background: var(--ngv-ink); color: #fff; } .section--ink h1, .section--ink h2, .section--ink h3, .section--ink p { color: #fff; } @media (min-width: 768px) { .section { padding: 112px 0; } .section--tight { padding: 72px 0; } .section--loose { padding: 144px 0; } } /* ----------------------------------------- 4. Typography utilities ----------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ngv-fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; padding: 7px 14px; background: var(--pop-red, #e8392f); border: 2px solid var(--pop-ink, #100a0a); box-shadow: 3px 3px 0 var(--pop-ink, #100a0a); border-radius: 4px; margin-bottom: 20px; transform: rotate(-1.5deg); transform-origin: left center; } .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--pop-yellow, #ffc426); border: 1px solid var(--pop-ink, #100a0a); transform: rotate(45deg); } .h-display { font-size: var(--ngv-fs-4xl); line-height: var(--ngv-lh-tight); letter-spacing: -0.03em; font-weight: 900; } .h-xl { font-size: var(--ngv-fs-3xl); line-height: var(--ngv-lh-tight); letter-spacing: -0.03em; font-weight: 900; } .h-lg { font-size: var(--ngv-fs-2xl); line-height: 1.15; letter-spacing: -0.025em; font-weight: 800; } .h-md { font-size: var(--ngv-fs-xl); line-height: 1.25; font-weight: 700; } .lede { font-size: var(--ngv-fs-lg); line-height: 1.55; color: var(--ngv-muted); max-width: 640px; } .lede--center { margin-inline: auto; } .text-muted { color: var(--ngv-muted); } .text-center { text-align: center; } /* Accent span — comic-pop yellow with italic + black stroke outline. Applies sitewide to any headline that wraps the highlighted phrase. */ .text-gradient { color: var(--pop-yellow, #ffc426); font-style: italic; font-weight: 900; text-shadow: -2px 0 var(--pop-ink, #100a0a), 2px 0 var(--pop-ink, #100a0a), 0 -2px var(--pop-ink, #100a0a), 0 2px var(--pop-ink, #100a0a), 3px 3px 0 var(--pop-ink, #100a0a); display: inline; } /* Gradient opt-in (old usage) — guarded with supports so fallback stays solid */ @supports (background-clip: text) or (-webkit-background-clip: text) { .text-gradient--rainbow { background-image: linear-gradient(120deg, var(--ngv-brand) 0%, var(--ngv-accent-cyan) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .text-yellow { color: var(--ngv-yellow); } .text-red { color: var(--ngv-brand); } .text-blue { color: var(--ngv-brand); } .bg-red { background: var(--ngv-brand); color: #fff; } .bg-yellow { background: var(--ngv-yellow); color: var(--ngv-ink); } /* Section head (eyebrow + title + lede) */ .section-head { margin-bottom: 56px; } .section-head--center { text-align: center; } .section-head--center .lede { margin-inline: auto; } @media (min-width: 768px) { .section-head { margin-bottom: 72px; } } /* ----------------------------------------- 5. Buttons ----------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--ngv-r-pill); border: 1px solid transparent; padding: 14px 24px; font-size: var(--ngv-fs-sm); transition: transform var(--ngv-dur-fast) var(--ngv-ease), background var(--ngv-dur-fast) var(--ngv-ease), color var(--ngv-dur-fast) var(--ngv-ease), box-shadow var(--ngv-dur-fast) var(--ngv-ease), border-color var(--ngv-dur-fast) var(--ngv-ease); white-space: nowrap; text-decoration: none; line-height: 1; } .btn__icon { display: inline-flex; transition: transform var(--ngv-dur-fast) var(--ngv-ease); } .btn:hover .btn__icon { transform: translateX(3px); } /* Primary CTA — comic-pop red with black border + offset shadow. This is now the default brand button across every page. */ .btn--primary { background: var(--pop-red, #e8392f); color: #fff; border: 2px solid var(--pop-ink, #100a0a); box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; transition: transform 140ms var(--ngv-ease), box-shadow 140ms var(--ngv-ease), background 140ms var(--ngv-ease); } .btn--primary:hover { background: var(--pop-red-deep, #b32820); color: #fff; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pop-ink, #100a0a); } .btn--primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pop-ink, #100a0a); } .btn--yellow { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); border: 2px solid var(--pop-ink, #100a0a); box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .btn--yellow:hover { background: var(--pop-yellow-deep, #e8a91c); color: var(--pop-ink, #100a0a); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pop-ink, #100a0a); } .btn--ghost { background: #fff; color: var(--pop-ink, #100a0a); border: 2px solid var(--pop-ink, #100a0a); box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .btn--ghost:hover { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pop-ink, #100a0a); } .btn--link { background: transparent; padding: 8px 0; color: var(--ngv-brand); border-radius: 0; } .btn--link:hover { color: var(--ngv-brand-600); } .btn--lg { padding: 18px 30px; font-size: var(--ngv-fs-base); } .btn--sm { padding: 10px 16px; font-size: var(--ngv-fs-xs); } /* ----------------------------------------- 6. Header + nav ----------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 80; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(150%) blur(18px); backdrop-filter: saturate(150%) blur(18px); border-bottom: 1px solid transparent; transition: box-shadow var(--ngv-dur-fast) var(--ngv-ease), border-color var(--ngv-dur-fast) var(--ngv-ease), background var(--ngv-dur-fast) var(--ngv-ease); } .site-header.is-scrolled { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--ngv-hairline); box-shadow: var(--ngv-shadow-xs); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--ngv-header-h); gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ngv-ink); font-weight: 800; letter-spacing: -0.02em; font-size: 1.0625rem; } .brand__mark { width: auto; height: 70px; display: inline-flex; align-items: center; justify-content: center; } .brand__mark img { height: 70px; width: auto; display: block; max-width: none; /* Now-transparent comic-burst logo (914×633, ~1.44:1). Height drives layout. */ } .brand > span:not(.brand__mark) { /* Hide text wordmark — logo image already contains the wordmark. */ display: none; } @media (min-width: 768px) { .brand__mark, .brand__mark img { height: 86px; } } @media (min-width: 1024px) { .brand__mark, .brand__mark img { height: 100px; } } /* Footer logo bigger */ .site-footer .brand__mark, .site-footer .brand__mark img { height: 96px; } .nav { display: none; } .nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 6px; align-items: center; } .nav__link { display: inline-flex; align-items: center; padding: 8px 14px; color: var(--ngv-ink-2); font-weight: 500; font-size: var(--ngv-fs-sm); border-radius: var(--ngv-r-pill); transition: color var(--ngv-dur-fast) var(--ngv-ease), background var(--ngv-dur-fast) var(--ngv-ease); } .nav__link:hover, .nav__link.is-active { color: var(--ngv-ink); background: var(--ngv-surface); } .header-cta { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--ngv-hairline); color: var(--ngv-ink); } /* Hamburger menu on ALL viewports (mobile + desktop). The slide-in drawer becomes the primary navigation everywhere. The desktop CTA "Buy a Machine" button stays in the header for one-click access. */ .nav { display: none !important; } .nav-toggle { display: inline-flex; } /* On desktop the header still shows the CTA button next to the hamburger. */ @media (min-width: 1024px) { .header-cta { display: inline-flex; } } /* Truly cramped widths — hide CTA so nothing wraps next to the hamburger. */ @media (max-width: 539px) { .header-cta { display: none; } } /* Mobile drawer */ .mobile-nav { position: fixed; inset: 0; background: radial-gradient(800px 480px at 10% 8%, rgba(255, 196, 38, 0.10), transparent 60%), radial-gradient(700px 420px at 95% 92%, rgba(232, 57, 47, 0.10), transparent 60%), #fff; z-index: 90; transform: translateY(-100%); transition: transform var(--ngv-dur) var(--ngv-ease); display: flex; flex-direction: column; padding: 20px; overflow-y: auto; visibility: hidden; } .mobile-nav.is-open { transform: translateY(0); visibility: visible; } .mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: var(--ngv-header-h); } .mobile-nav__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; } .mobile-nav__list li { border-bottom: 2px solid var(--pop-ink, #100a0a); } .mobile-nav__list li:first-child { border-top: 2px solid var(--pop-ink, #100a0a); } .mobile-nav__link { display: flex; justify-content: space-between; align-items: center; padding: 18px 6px; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.015em; color: var(--pop-ink, #100a0a); text-transform: uppercase; transition: background 140ms var(--ngv-ease), color 140ms var(--ngv-ease), padding-left 200ms var(--ngv-ease); } .mobile-nav__link:hover, .mobile-nav__link:focus { background: var(--pop-yellow, #ffc426); color: var(--pop-red, #e8392f); padding-left: 16px; } .mobile-nav__cta { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--pop-ink, #100a0a); } /* On large screens the drawer goes 2-column for nav links so the menu feels intentional on desktop, not just a phone menu. */ @media (min-width: 768px) { .mobile-nav { padding: 32px 40px; } .mobile-nav__list { grid-template-columns: 1fr 1fr; gap: 0 32px; } .mobile-nav__list li:nth-child(2) { border-top: 2px solid var(--pop-ink, #100a0a); } .mobile-nav__cta { flex-direction: row; justify-content: flex-start; } .mobile-nav__cta .btn { min-width: 240px; } } @media (min-width: 1024px) { .mobile-nav { padding: 48px 80px; } .mobile-nav__top { max-width: var(--ngv-container); margin: 0 auto; width: 100%; } .mobile-nav > .container { max-width: var(--ngv-container); margin: 0 auto; } .mobile-nav__list { grid-template-columns: 1fr 1fr 1fr; gap: 0 40px; } .mobile-nav__list li:nth-child(2), .mobile-nav__list li:nth-child(3) { border-top: 2px solid var(--pop-ink, #100a0a); } } /* ----------------------------------------- 7. Hero ----------------------------------------- */ .hero { position: relative; padding: 32px 0 48px; overflow: hidden; /* Pop background — yellow + red glows + comic page texture. Now sitewide so every page's hero matches the homepage. */ background: radial-gradient(900px 480px at 12% 8%, rgba(255, 196, 38, 0.10), transparent 60%), radial-gradient(800px 420px at 95% 90%, rgba(232, 57, 47, 0.08), transparent 60%), var(--ngv-canvas); isolation: isolate; } .hero::after { /* Faint halftone grain overlay */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(16, 10, 10, 0.025) 0.5px, transparent 0.8px); background-size: 4px 4px; pointer-events: none; z-index: 0; } .hero > .container { position: relative; z-index: 1; } /* Default hero title across every page gets the bolder pop treatment */ .hero__title { font-weight: 900; color: var(--pop-ink, #100a0a); } .hero__inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } /* Text column: prevent grid blowout (default min-width: auto can let long words stretch the cell, which on Mac/Safari can push the visual cell to overlap text). */ .hero__inner > .hero__copy, .hero__inner > :first-child { min-width: 0; position: relative; z-index: 2; /* always paint text over the visual if cells overlap */ } .hero__title { font-size: var(--ngv-fs-4xl); font-weight: 800; letter-spacing: -0.025em; /* eased from -0.035em — tighter tracking renders darker/crushed on Mac */ line-height: 1.05; /* was 1.02 — ascenders were clipping on Safari */ margin: 0 0 20px; text-wrap: balance; /* nicer line-breaks, fewer orphans */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero__sub { font-size: var(--ngv-fs-lg); color: var(--ngv-muted); max-width: 560px; margin: 0 0 32px; text-wrap: pretty; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } .hero__visual { position: relative; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; min-width: 0; /* let the cell shrink with the grid */ z-index: 1; } .hero__visual .ngv-kiosk { width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } @media (min-width: 900px) { .hero__visual { aspect-ratio: auto; perspective: 1400px; } /* No more overflow into the text column. The visual stays inside its grid cell on every screen size — this was the cause of text being covered on macOS where Safari's font metrics let the image overlap the copy. */ .hero__visual .ngv-kiosk { width: 100%; max-width: 100%; margin-left: 0; } } @media (min-width: 1200px) { .hero__visual .ngv-kiosk { width: 100%; margin-left: 0; } } /* Cool showcase idle: gentle float + slow Y-axis sway (not a full spin — keeps the product readable) */ @keyframes ngv-showcase-sway { 0% { transform: perspective(1400px) rotateY(-6deg) translateY(0); } 25% { transform: perspective(1400px) rotateY(0deg) translateY(-8px); } 50% { transform: perspective(1400px) rotateY(6deg) translateY(0); } 75% { transform: perspective(1400px) rotateY(0deg) translateY(-8px); } 100% { transform: perspective(1400px) rotateY(-6deg) translateY(0); } } .hero__visual .ngv-kiosk { animation: ngv-showcase-sway 14s cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; transform-origin: center center; } .hero__visual:hover .ngv-kiosk { animation-play-state: paused; } /* Machine-showcase visual — same treatment, bigger presence */ .machine-showcase__visual { perspective: 1400px; } .machine-showcase__visual img { animation: ngv-showcase-sway 16s cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; } .machine-showcase__visual:hover img { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hero__visual .ngv-kiosk, .machine-showcase__visual img { animation: none !important; transform: none !important; } } .hero__glow { position: absolute; inset: 6% 8%; background: radial-gradient(closest-side, rgba(232, 57, 47, 0.22), transparent 70%), radial-gradient(closest-side, rgba(255, 196, 38, 0.20), transparent 70%); filter: blur(30px); z-index: 0; } .hero__kiosk { position: relative; z-index: 1; max-height: 100%; max-width: 100%; } .hero__bubble { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--ngv-hairline); box-shadow: var(--ngv-shadow-lg); border-radius: var(--ngv-r-pill); padding: 10px 16px 10px 12px; font-size: var(--ngv-fs-xs); font-weight: 600; color: var(--ngv-ink); z-index: 2; animation: ngv-float 6s ease-in-out infinite; } .hero__bubble span.dot { width: 10px; height: 10px; border-radius: 999px; background: #18c37f; box-shadow: 0 0 0 4px rgba(24,195,127,0.15); } .hero__bubble--1 { top: 12%; left: -6%; } .hero__bubble--2 { bottom: 18%; right: -4%; animation-delay: -2s; } .hero__bubble--3 { top: 48%; left: -10%; animation-delay: -4s; } @keyframes ngv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (min-width: 900px) { .hero { padding: 28px 0 80px; } /* Give the text column a touch more room so the headline can breathe at awkward laptop widths (1280-1440). The visual column shrinks proportionally. */ .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); } .hero__title { font-size: var(--ngv-fs-5xl); } } @media (min-width: 1200px) { .hero { padding: 48px 0 128px; } .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } /* Cap the kiosk visual on small / weird-resolution laptops so the panel never crowds the text. From 1440px+ it can claim full column width. */ @media (min-width: 900px) and (max-width: 1439px) { .hero__visual .ngv-kiosk { max-width: 92%; } } /* ========================================================= POP HERO — comic-book "Profit Machine" aesthetic Bold red/yellow/black palette matching the brand banners. Layered onto the existing .hero grid so the responsive work already done still applies. ========================================================= */ :root { --pop-red: #e8392f; --pop-red-deep: #b32820; --pop-yellow: #ffc426; --pop-yellow-deep: #e8a91c; --pop-ink: #100a0a; --pop-cream: #faf6ec; } .hero--pop { background: radial-gradient(900px 480px at 12% 8%, rgba(255, 196, 38, 0.10), transparent 60%), radial-gradient(800px 420px at 95% 90%, rgba(232, 57, 47, 0.08), transparent 60%), var(--ngv-canvas); position: relative; isolation: isolate; } .hero--pop .hero__bg-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .hero--pop .hero__halftone { position: absolute; width: 200px; height: 200px; background-image: radial-gradient(circle, rgba(16, 10, 10, 0.18) 1.5px, transparent 1.8px); background-size: 12px 12px; opacity: 0.45; border-radius: 50%; filter: blur(0.3px); } .hero--pop .hero__halftone--tl { top: 4%; left: -40px; transform: rotate(-12deg); } .hero--pop .hero__halftone--br { bottom: 2%; right: -40px; transform: rotate(18deg); width: 240px; height: 240px; } .hero--pop .hero__star, .hero--pop .hero__bolt { position: absolute; color: var(--pop-ink); font-weight: 900; user-select: none; line-height: 1; } .hero--pop .hero__star { font-size: 22px; } .hero--pop .hero__star--1 { top: 18%; left: 38%; transform: rotate(-8deg); } .hero--pop .hero__star--2 { top: 62%; left: 5%; font-size: 16px; opacity: 0.75; } .hero--pop .hero__star--3 { top: 78%; left: 45%; font-size: 18px; } .hero--pop .hero__bolt { color: var(--pop-yellow-deep); font-size: 28px; } .hero--pop .hero__bolt--1 { top: 8%; right: 42%; transform: rotate(15deg); } .hero--pop .hero__bolt--2 { bottom: 14%; left: 28%; transform: rotate(-20deg); font-size: 22px; } .hero--pop .container { position: relative; z-index: 1; } /* Brand badge — comic starburst */ .hero__badge { display: inline-block; position: relative; padding: 6px 18px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; font-size: clamp(0.75rem, 0.6vw + 0.6rem, 0.875rem); color: #fff; background: var(--pop-red); border: 2px solid var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-ink); transform: rotate(-2deg); margin-bottom: 24px; clip-path: polygon( 0% 50%, 4% 30%, 0% 18%, 12% 12%, 8% 0%, 22% 8%, 30% 0%, 42% 6%, 50% 0%, 60% 8%, 72% 0%, 80% 8%, 92% 0%, 96% 14%, 100% 24%, 96% 38%, 100% 50%, 96% 60%, 100% 70%, 92% 80%, 96% 92%, 80% 96%, 70% 100%, 60% 92%, 50% 100%, 40% 92%, 28% 100%, 20% 92%, 8% 100%, 4% 86%, 0% 76%, 4% 62% ); } .hero__badge-inner { display: inline-block; } /* Pop headline — bold black-italic display, mixed colors per line */ .hero__title--pop { font-family: "Inter", system-ui, sans-serif; font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(2.5rem, 5.5vw + 1rem, 5.25rem); margin: 0 0 24px; color: var(--pop-ink); text-shadow: 4px 4px 0 rgba(16, 10, 10, 0.06); } .hero__title--pop .pop-line { display: block; } .hero__title--pop .pop-line--big { font-size: 1.18em; line-height: 0.95; margin-top: 4px; } .hero__title--pop .pop-money { color: var(--pop-red); font-weight: 900; text-shadow: -2px 0 var(--pop-ink), 2px 0 var(--pop-ink), 0 -2px var(--pop-ink), 0 2px var(--pop-ink), 3px 3px 0 var(--pop-ink); } .hero__title--pop .pop-yellow { color: var(--pop-yellow); font-style: italic; text-shadow: -2px 0 var(--pop-ink), 2px 0 var(--pop-ink), 0 -2px var(--pop-ink), 0 2px var(--pop-ink), 4px 4px 0 var(--pop-ink); } .hero__title--pop .pop-italic { font-style: italic; } .hero__title--pop .pop-word { font-size: 0.85em; } /* "$1K Profit Per Week" pill row */ .hero__pill { display: inline-flex; align-items: stretch; gap: 0; border: 2px solid var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-ink); border-radius: 8px; overflow: hidden; font-weight: 800; font-size: clamp(0.95rem, 0.6vw + 0.85rem, 1.15rem); letter-spacing: 0.02em; margin-bottom: 28px; max-width: 100%; flex-wrap: wrap; } .hero__pill-red, .hero__pill-yellow, .hero__pill-white { padding: 10px 18px; display: inline-flex; align-items: center; } .hero__pill-red { background: var(--pop-red); color: #fff; } .hero__pill-yellow { background: var(--pop-yellow); color: var(--pop-ink); font-weight: 900; font-size: 1.15em; } .hero__pill-white { background: #fff; color: var(--pop-ink); } /* Trust row — 3 icons */ .hero__trust-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 28px; } @media (min-width: 520px) { .hero__trust-row { grid-template-columns: repeat(3, 1fr); gap: 16px; } } .hero__trust { display: flex; align-items: center; gap: 12px; padding: 10px 4px; } .hero__trust-icon { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--pop-ink); border-radius: 50%; background: var(--pop-yellow); color: var(--pop-ink); box-shadow: 2px 2px 0 var(--pop-ink); } .hero__trust > div { display: flex; flex-direction: column; min-width: 0; } .hero__trust strong { font-weight: 900; color: var(--pop-red); letter-spacing: 0.04em; font-size: 0.875rem; text-transform: uppercase; } .hero__trust span { color: var(--ngv-ink-2); font-size: 0.875rem; line-height: 1.3; } /* Pop CTA — red banner with sharp black border + offset shadow */ .btn--pop { background: var(--pop-red); color: #fff; border: 2px solid var(--pop-ink); box-shadow: 5px 5px 0 var(--pop-ink); border-radius: 8px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.0625rem); padding: 14px 26px; transition: transform 140ms var(--ngv-ease), box-shadow 140ms var(--ngv-ease); } .btn--pop:hover { background: var(--pop-red-deep); color: #fff; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pop-ink); } .btn--pop:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pop-ink); } .btn--ghost-pop { background: transparent; color: var(--pop-ink); border: 2px solid var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-ink); font-weight: 800; text-transform: uppercase; font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.0625rem); padding: 14px 26px; } .btn--ghost-pop:hover { background: var(--pop-yellow); color: var(--pop-ink); } /* Pop visual side — adds the "CASES HERE NOW!" comic burst overlay */ .hero__visual--pop { position: relative; } .hero__starburst { position: absolute; width: clamp(120px, 14vw, 180px); aspect-ratio: 1; background: var(--pop-yellow); border: 3px solid var(--pop-ink); display: grid; place-items: center; text-align: center; z-index: 3; font-weight: 900; font-style: italic; color: var(--pop-red); text-transform: uppercase; line-height: 1; font-size: clamp(0.95rem, 1vw + 0.6rem, 1.25rem); box-shadow: 5px 5px 0 var(--pop-ink); clip-path: polygon( 50% 0%, 60% 14%, 75% 6%, 78% 22%, 94% 18%, 88% 34%, 100% 42%, 88% 50%, 100% 60%, 86% 68%, 96% 82%, 80% 80%, 78% 96%, 64% 86%, 56% 100%, 46% 86%, 32% 96%, 30% 82%, 12% 80%, 22% 68%, 4% 60%, 18% 50%, 4% 42%, 18% 34%, 8% 18%, 26% 22%, 28% 6%, 42% 14% ); transform: rotate(-8deg); padding: 18px; } .hero__starburst--top { right: 4%; bottom: 12%; } .hero__starburst span { display: block; } @media (max-width: 899px) { .hero__starburst--top { right: -2%; bottom: 8%; width: 110px; } } /* Subtle paper-grain texture overlay to feel like a comic page */ .hero--pop::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(16, 10, 10, 0.025) 0.5px, transparent 0.8px); background-size: 4px 4px; pointer-events: none; z-index: 0; } /* ========================================================= BANNER HERO — full-bleed marketing banner image with a floating CTA pinned to the bottom-left of the banner. ========================================================= */ .banner-hero { position: relative; padding: clamp(16px, 2.5vw, 32px) 0 clamp(24px, 3vw, 40px); background: radial-gradient(900px 480px at 12% 8%, rgba(255, 196, 38, 0.08), transparent 60%), radial-gradient(800px 420px at 95% 90%, rgba(232, 57, 47, 0.06), transparent 60%), var(--ngv-canvas); } .banner-hero .container { position: relative; } .banner-hero__pic { display: block; width: 100%; max-width: 1500px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #fff; border: 2px solid var(--pop-ink, #100a0a); box-shadow: 6px 6px 0 var(--pop-ink, #100a0a); transition: transform 360ms var(--ngv-ease), box-shadow 360ms var(--ngv-ease); } .banner-hero__pic:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--pop-ink, #100a0a); } .banner-hero__img { display: block; width: 100%; height: auto; } @media (min-width: 1024px) { .banner-hero__pic { border-width: 3px; box-shadow: 8px 8px 0 var(--pop-ink, #100a0a); } .banner-hero__pic:hover { box-shadow: 11px 11px 0 var(--pop-ink, #100a0a); } } .banner-hero__cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; } @media (min-width: 1024px) { .banner-hero { padding: 40px 0 32px; } .banner-hero__cta { margin-top: 36px; } } /* ========================================================= HOMEPAGE — dual-machine hero + machine cards ========================================================= */ .hero__visual--duo { display: flex; align-items: flex-end; justify-content: center; gap: 2%; position: relative; } .hero__duo-machine { display: block; } .hero__duo-machine img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(16,10,10,0.22)); } .hero__duo-machine--pc { width: 52%; } .hero__duo-machine--tee { width: 52%; margin-left: -6%; } @media (max-width: 640px) { .hero__visual--duo { gap: 0; } .hero__duo-machine--pc { width: 54%; } .hero__duo-machine--tee { width: 54%; margin-left: -8%; } } /* Machine cards */ .machine-cards { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .machine-cards { grid-template-columns: 1fr 1fr; } } .machine-card { display: flex; flex-direction: column; background: #fff; border: 3px solid var(--pop-ink, #100a0a); border-radius: 16px; box-shadow: 6px 6px 0 var(--pop-ink, #100a0a); overflow: hidden; transition: transform 200ms var(--ngv-ease), box-shadow 200ms var(--ngv-ease); } .machine-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--pop-ink, #100a0a); } .machine-card__media { background: radial-gradient(closest-side, rgba(232,57,47,0.10), transparent 70%), var(--ngv-surface); display: flex; align-items: center; justify-content: center; padding: 24px; border-bottom: 3px solid var(--pop-ink, #100a0a); min-height: 300px; } .machine-card__media img { max-height: 340px; width: auto; max-width: 80%; } .machine-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .machine-card__tag { align-self: flex-start; background: var(--pop-red, #e8392f); color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; padding: 5px 12px; border: 2px solid var(--pop-ink, #100a0a); box-shadow: 2px 2px 0 var(--pop-ink, #100a0a); } .machine-card__tag--alt { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); } .machine-card__title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; margin: 4px 0 0; } .machine-card__price { font-size: 1.05rem; color: var(--ngv-muted); } .machine-card__price strong { color: var(--pop-red, #e8392f); font-size: 1.2rem; } .machine-card__list { list-style: none; padding: 0; margin: 4px 0 16px; display: grid; gap: 6px; } .machine-card__list li { position: relative; padding-left: 22px; font-size: 0.95rem; color: var(--ngv-ink-2); } .machine-card__list li::before { content: "✓"; position: absolute; left: 0; color: var(--pop-red, #e8392f); font-weight: 900; } .machine-card .btn { margin-top: auto; align-self: flex-start; } /* Bundle strip */ .bundle-strip { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: var(--pop-ink, #100a0a); border: 3px solid var(--pop-ink, #100a0a); border-radius: 14px; box-shadow: 6px 6px 0 var(--pop-yellow, #ffc426); padding: 22px 28px; } .bundle-strip__copy { display: flex; flex-direction: column; gap: 3px; } .bundle-strip__k { font-family: "Inter", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--pop-yellow, #ffc426); font-size: 1.2rem; } .bundle-strip__v { color: #fff; font-size: 1rem; } .bundle-strip__v strong { color: var(--pop-yellow, #ffc426); } /* Brochure viewer page */ .brochure-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; } .brochure-viewer { max-width: 900px; margin: 0 auto; border: 3px solid var(--pop-ink, #100a0a); box-shadow: 8px 8px 0 var(--pop-ink, #100a0a); border-radius: 12px; overflow: hidden; background: #fff; } .brochure-viewer__frame { display: block; width: 100%; height: 80vh; min-height: 560px; border: 0; } .brochure-viewer__fallback { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 24px; text-align: center; } @media (max-width: 640px) { .brochure-viewer__frame { height: 70vh; min-height: 420px; } .brochure-viewer { box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); border-width: 2px; } } /* Brochure share row — sits under the banner CTA */ .brochure-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; } .brochure-share__label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem; color: #fff; } .brochure-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-weight: 800; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--pop-ink, #100a0a); background: var(--pop-yellow, #ffc426); border: 2px solid var(--pop-ink, #100a0a); box-shadow: 3px 3px 0 var(--pop-ink, #100a0a); border-radius: 6px; transition: transform 140ms var(--ngv-ease), box-shadow 140ms var(--ngv-ease); } .brochure-share__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); color: var(--pop-ink, #100a0a); } .brochure-share__btn svg { transform: rotate(-45deg); } /* Dark-mall variant for /buy-a-kiosk/ — moodier surrounding bg so the banner's mall photography feels intentional. */ .banner-hero--dark { background: radial-gradient(900px 480px at 12% 8%, rgba(255, 196, 38, 0.06), transparent 60%), radial-gradient(800px 420px at 95% 90%, rgba(232, 57, 47, 0.10), transparent 60%), #0d0a13; } .banner-hero--dark .banner-hero__img { background: #0d0a13; } .banner-hero--dark .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); box-shadow: 4px 4px 0 rgba(255,196,38,0.65); } .banner-hero--dark .btn--ghost:hover { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); border-color: var(--pop-yellow, #ffc426); } /* ========================================================= WHY-NOW BADGES — 3 column row matching banner's right column (LOW INVESTMENT / PROVEN BUSINESS / PERFECT FOR ANY LOCATION) ========================================================= */ .why-now-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 768px) { .why-now-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .why-now { display: grid; grid-template-columns: auto 1fr; gap: 16px 18px; align-items: start; padding: 22px 24px; background: #fff; border: 2px solid var(--pop-ink, #100a0a); border-radius: 12px; box-shadow: 5px 5px 0 var(--pop-ink, #100a0a); transition: transform 200ms var(--ngv-ease), box-shadow 200ms var(--ngv-ease); } .why-now:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pop-ink, #100a0a); } .why-now__icon { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--pop-ink, #100a0a); box-shadow: 2px 2px 0 var(--pop-ink, #100a0a); color: #fff; } .why-now__icon--red { background: var(--pop-red, #e8392f); color: #fff; } .why-now__icon--yellow { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); } .why-now h3 { margin: 0; font-weight: 900; font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem); color: var(--pop-ink, #100a0a); text-transform: uppercase; letter-spacing: -0.005em; line-height: 1.15; grid-column: 2; } .why-now p { margin: 0; color: var(--ngv-muted); font-size: 0.95rem; line-height: 1.45; grid-column: 2; } /* ========================================================= FEATURE STRIP — 5 comic-pop cards in the banner's color rotation black → yellow → white → red → white. Matches the bottom strip of the brand banner. ========================================================= */ .feature-strip { display: grid; grid-template-columns: 1fr; gap: 0; border: 3px solid var(--pop-ink, #100a0a); border-radius: 14px; overflow: hidden; box-shadow: 8px 8px 0 var(--pop-ink, #100a0a); } @media (min-width: 640px) { .feature-strip { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .feature-strip { grid-template-columns: repeat(5, 1fr); } } .feature-strip__card { padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; border-right: 2px solid var(--pop-ink, #100a0a); border-bottom: 2px solid var(--pop-ink, #100a0a); } @media (min-width: 1024px) { .feature-strip__card { border-bottom: 0; } .feature-strip__card:last-child { border-right: 0; } } .feature-strip__card:last-child { border-bottom: 0; border-right: 0; } .feature-strip__card--black { background: var(--pop-ink, #100a0a); color: #fff; } .feature-strip__card--yellow { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); } .feature-strip__card--white { background: #fff; color: var(--pop-ink, #100a0a); } .feature-strip__card--red { background: var(--pop-red, #e8392f); color: #fff; } .feature-strip__ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid currentColor; border-radius: 50%; margin-bottom: 6px; } .feature-strip__card h3 { margin: 0; font-weight: 900; font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem); text-transform: uppercase; letter-spacing: -0.005em; } .feature-strip__card--yellow h3 { color: var(--pop-ink, #100a0a); } .feature-strip__card--black h3, .feature-strip__card--red h3 { color: var(--pop-yellow, #ffc426); } .feature-strip__card p { margin: 0; font-size: 0.95rem; opacity: 0.9; line-height: 1.45; } /* ----------------------------------------- 8. Trust strip ----------------------------------------- */ .trust-strip { background: #fff; border-top: 1px solid var(--ngv-hairline-soft); border-bottom: 1px solid var(--ngv-hairline-soft); } .trust-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 28px 0; } .trust-strip__item { padding: 14px 8px; text-align: center; } .trust-strip__stat { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ngv-ink); margin-bottom: 4px; } .trust-strip__label { font-size: var(--ngv-fs-xs); color: var(--ngv-muted); } @media (min-width: 768px) { .trust-strip__grid { grid-template-columns: repeat(4, 1fr); padding: 36px 0; } .trust-strip__stat { font-size: 2rem; } } /* ----------------------------------------- 9. Path cards (3 audiences) ----------------------------------------- */ .paths { display: grid; grid-template-columns: 1fr; gap: 20px; } .path-card { position: relative; background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); padding: 32px; box-shadow: var(--ngv-shadow-sm); display: flex; flex-direction: column; gap: 16px; transition: transform var(--ngv-dur) var(--ngv-ease), box-shadow var(--ngv-dur) var(--ngv-ease), border-color var(--ngv-dur) var(--ngv-ease); overflow: hidden; } .path-card::before { content: ""; position: absolute; inset: -40% 40% auto auto; width: 340px; height: 340px; border-radius: 999px; background: radial-gradient(closest-side, rgba(0,102,255,0.12), transparent 70%); opacity: 0; transition: opacity var(--ngv-dur) var(--ngv-ease); } .path-card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--ngv-shadow-lg); } .path-card:hover::before { opacity: 1; } .path-card__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--ngv-brand-50); color: var(--ngv-brand); display: flex; align-items: center; justify-content: center; } .path-card__title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; } .path-card__desc { color: var(--ngv-muted); margin: 0; } .path-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ngv-brand); } .path-card__link svg { transition: transform var(--ngv-dur-fast) var(--ngv-ease); } .path-card:hover .path-card__link svg { transform: translateX(4px); } @media (min-width: 768px) { .paths { grid-template-columns: repeat(3, 1fr); gap: 24px; } } /* ----------------------------------------- 10. Feature cards / grids ----------------------------------------- */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } .feature-grid--4 { grid-template-columns: repeat(4, 1fr); } } .feature-card { background: #fff; border: 2px solid var(--pop-ink, #100a0a); border-radius: 12px; padding: 28px; box-shadow: 5px 5px 0 var(--pop-ink, #100a0a); transition: transform var(--ngv-dur) var(--ngv-ease), box-shadow var(--ngv-dur) var(--ngv-ease); } .feature-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pop-ink, #100a0a); } .feature-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--pop-ink, #100a0a); background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); border-radius: 50%; box-shadow: 2px 2px 0 var(--pop-ink, #100a0a); margin-bottom: 18px; } .feature-card__title { font-weight: 900; color: var(--pop-ink, #100a0a); text-transform: uppercase; letter-spacing: -0.005em; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--ngv-shadow-md); } .feature-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ngv-brand-50); color: var(--ngv-brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-card__title { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; } .feature-card__desc { color: var(--ngv-muted); font-size: var(--ngv-fs-sm); margin: 0; } /* ----------------------------------------- 11. How it works — numbered steps ----------------------------------------- */ .steps { display: grid; grid-template-columns: 1fr; gap: 24px; counter-reset: step; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .step { position: relative; background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); padding: 28px; counter-increment: step; } .step__num { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ngv-brand); text-transform: uppercase; margin-bottom: 16px; } .step__num::before { content: "0" counter(step); margin-right: 8px; } .step__title { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.015em; } .step__desc { color: var(--ngv-muted); margin: 0; } /* ----------------------------------------- 12. Stats block ----------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 24px; } } .stat-card { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); padding: 24px; text-align: left; } .stat-card__value { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; background: linear-gradient(120deg, var(--ngv-brand), var(--ngv-accent-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-card__label { margin-top: 10px; font-size: var(--ngv-fs-sm); color: var(--ngv-muted); } /* ----------------------------------------- 13. Machine feature callouts ----------------------------------------- */ .machine-showcase { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 960px) { .machine-showcase { grid-template-columns: 1fr 1.05fr; gap: 32px; } .machine-showcase--reverse { grid-template-columns: 1.05fr 1fr; } .machine-showcase--reverse .machine-showcase__visual { order: 2; } } .machine-showcase__visual { position: relative; aspect-ratio: 3 / 2; background: radial-gradient(closest-side, rgba(232, 57, 47, 0.10), transparent 70%) center / contain no-repeat, var(--ngv-surface); border-radius: var(--ngv-r-xl); border: 1px solid var(--ngv-hairline); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--ngv-shadow-lg); } /* Machine image fits *inside* the cell rather than filling the width. The new product shot is portrait (1122×1402); previously it overflowed vertically and got clipped because the cell is 5:4. Now both dimensions cap at the cell so the whole machine is always visible. */ .machine-showcase__visual img { width: auto; height: auto; max-width: 92%; max-height: 92%; object-fit: contain; margin: auto; } @media (min-width: 960px) { /* Taller cell so the portrait machine has vertical room without being crowded by the radial glow. */ .machine-showcase__visual { aspect-ratio: 4 / 5; min-height: 560px; } .machine-showcase__visual img { max-width: 86%; max-height: 92%; } } @media (min-width: 1200px) { .machine-showcase__visual { aspect-ratio: 4 / 5; min-height: 620px; } } .machine-showcase__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; } .machine-showcase__list li { display: flex; gap: 14px; align-items: flex-start; } .machine-showcase__list li .ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: var(--ngv-brand-50); color: var(--ngv-brand); display: flex; align-items: center; justify-content: center; margin-top: 2px; } .machine-showcase__list li strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ngv-ink); } .machine-showcase__list li span { color: var(--ngv-muted); font-size: var(--ngv-fs-sm); } /* ----------------------------------------- 14. Location / map cards ----------------------------------------- */ .locations-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .locations-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .locations-grid { grid-template-columns: repeat(3, 1fr); } } .location-card { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; transition: transform var(--ngv-dur) var(--ngv-ease), box-shadow var(--ngv-dur) var(--ngv-ease); } .location-card:hover { transform: translateY(-3px); box-shadow: var(--ngv-shadow-md); } .location-card__row { display: flex; justify-content: space-between; align-items: center; } .location-card__city { font-weight: 700; letter-spacing: -0.01em; font-size: 1.125rem; } .location-card__badge { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--ngv-brand-50); color: var(--ngv-brand); } .location-card__badge--soon { background: #fff4e5; color: #c26b00; } .location-card__venue { color: var(--ngv-muted); font-size: var(--ngv-fs-sm); } /* ----------------------------------------- 15. Gallery strip ----------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 768px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .gallery__tile { position: relative; aspect-ratio: 3 / 4; border-radius: var(--ngv-r-lg); overflow: hidden; background: var(--ngv-surface); border: 1px solid var(--ngv-hairline); } .gallery__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ngv-ease); } .gallery__tile:hover img { transform: scale(1.04); } .gallery__tile--tall { grid-row: span 2; aspect-ratio: 3 / 6; } /* ----------------------------------------- 16. FAQ accordion ----------------------------------------- */ .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; } .faq-item { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-md); overflow: hidden; transition: border-color var(--ngv-dur-fast) var(--ngv-ease), box-shadow var(--ngv-dur-fast) var(--ngv-ease); } .faq-item[open] { border-color: var(--ngv-brand-100); box-shadow: var(--ngv-shadow-sm); } .faq-item summary { cursor: pointer; list-style: none; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-weight: 600; font-size: 1.0625rem; color: var(--ngv-ink); letter-spacing: -0.01em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item__icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 99px; background: var(--ngv-surface); color: var(--ngv-brand); display: flex; align-items: center; justify-content: center; transition: transform var(--ngv-dur) var(--ngv-ease), background var(--ngv-dur) var(--ngv-ease); } .faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--ngv-brand); color: #fff; } .faq-item__body { padding: 0 24px 24px; color: var(--ngv-muted); } /* ----------------------------------------- 17. Forms ----------------------------------------- */ .form { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-xl); padding: 28px; box-shadow: var(--ngv-shadow-sm); display: grid; gap: 16px; } @media (min-width: 768px) { .form { padding: 40px; } } .form__row { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .form__field { display: grid; gap: 6px; } .form__label { font-size: var(--ngv-fs-xs); font-weight: 600; color: var(--ngv-ink-2); letter-spacing: 0.02em; } .form__input, .form__select, .form__textarea { width: 100%; font: inherit; color: var(--ngv-ink); background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-md); padding: 14px 16px; transition: border-color var(--ngv-dur-fast) var(--ngv-ease), box-shadow var(--ngv-dur-fast) var(--ngv-ease); } .form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--ngv-brand); box-shadow: 0 0 0 4px var(--ngv-brand-50); } .form__textarea { min-height: 120px; resize: vertical; } .form__fine { font-size: var(--ngv-fs-xs); color: var(--ngv-faint); margin: 0; } /* ----------------------------------------- 18. CTA banner ----------------------------------------- */ .cta-banner { position: relative; border-radius: 16px; padding: 56px 32px; background: radial-gradient(900px 420px at 18% 0%, rgba(255, 196, 38, 0.15), transparent 65%), radial-gradient(900px 420px at 92% 100%, rgba(232, 57, 47, 0.30), transparent 60%), linear-gradient(135deg, #100a0a 0%, #1a0e0e 55%, #2a1414 100%); color: #fff; overflow: hidden; text-align: center; border: 3px solid var(--pop-ink, #100a0a); box-shadow: 8px 8px 0 var(--pop-ink, #100a0a); } .cta-banner::before { /* Comic halftone dots scattered behind the text */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 196, 38, 0.18) 1.5px, transparent 1.8px); background-size: 14px 14px; opacity: 0.4; pointer-events: none; } .cta-banner h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; position: relative; } .cta-banner h2 strong, .cta-banner h2 b { color: var(--pop-yellow, #ffc426); font-style: italic; } .cta-banner p { color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto 28px; position: relative; } .cta-banner .btn--primary { background: var(--pop-red, #e8392f); color: #fff; } .cta-banner .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); box-shadow: 4px 4px 0 rgba(255,196,38,0.6); } .cta-banner .btn--ghost:hover { background: var(--pop-yellow, #ffc426); color: var(--pop-ink, #100a0a); border-color: var(--pop-yellow, #ffc426); } .cta-banner__ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; position: relative; } @media (min-width: 768px) { .cta-banner { padding: 72px 48px; } } /* ----------------------------------------- 19. Footer ----------------------------------------- */ .site-footer { background: #fff; border-top: 1px solid var(--ngv-hairline); padding: 64px 0 36px; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 48px; } } .footer-col h4 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ngv-muted-2); font-weight: 600; margin-bottom: 16px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--ngv-ink-2); font-size: var(--ngv-fs-sm); } .footer-col a:hover { color: var(--ngv-brand); } .footer__about { color: var(--ngv-muted); font-size: var(--ngv-fs-sm); max-width: 340px; } /* Social icons row */ .social-row { list-style: none; padding: 0; margin: 20px 0 0; display: flex; gap: 10px; flex-wrap: wrap; } .social-row a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 99px; background: #fff; color: var(--ngv-brand); border: 1.5px solid var(--ngv-hairline); box-shadow: 0 2px 6px rgba(11, 40, 120, 0.05); transition: transform 220ms var(--ngv-ease), background 220ms var(--ngv-ease), color 220ms var(--ngv-ease), border-color 220ms var(--ngv-ease), box-shadow 220ms var(--ngv-ease); } .social-row a:hover, .social-row a:focus-visible { background: linear-gradient(135deg, var(--ngv-brand) 0%, var(--ngv-accent-cyan) 100%); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(232, 57, 47, 0.28); outline: none; } .social-row a:focus-visible { box-shadow: 0 8px 20px rgba(232, 57, 47, 0.28), 0 0 0 3px rgba(232, 57, 47, 0.25); } .footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ngv-hairline-soft); display: flex; flex-wrap: wrap; justify-content: space-between; color: var(--ngv-muted-2); font-size: var(--ngv-fs-xs); gap: 12px; } /* ----------------------------------------- 20. Mobile sticky CTA ----------------------------------------- */ .sticky-cta { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 70; background: var(--ngv-ink); color: #fff; padding: 12px 14px; border-radius: var(--ngv-r-pill); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: var(--ngv-shadow-xl); transform: translateY(140%); transition: transform var(--ngv-dur) var(--ngv-ease); } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta__copy { font-size: var(--ngv-fs-sm); font-weight: 600; } .sticky-cta .btn--primary { padding: 10px 18px; font-size: var(--ngv-fs-xs); } @media (min-width: 1024px) { .sticky-cta { display: none; } } /* ----------------------------------------- 21. Device grid ----------------------------------------- */ .device-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .device-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .device-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } } .device-card { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-md); padding: 18px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; transition: transform var(--ngv-dur-fast) var(--ngv-ease), border-color var(--ngv-dur-fast) var(--ngv-ease), box-shadow var(--ngv-dur-fast) var(--ngv-ease); } .device-card:hover { transform: translateY(-2px); border-color: var(--ngv-brand-100); box-shadow: var(--ngv-shadow-sm); } .device-card__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--ngv-surface); color: var(--ngv-ink); display: flex; align-items: center; justify-content: center; } .device-card__name { font-size: var(--ngv-fs-sm); font-weight: 600; } .device-card__models { font-size: 0.75rem; color: var(--ngv-muted); } /* Filter chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; justify-content: center; } .chip { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: 99px; padding: 8px 16px; font-size: var(--ngv-fs-sm); font-weight: 500; color: var(--ngv-ink-2); cursor: pointer; transition: all var(--ngv-dur-fast) var(--ngv-ease); } .chip:hover { border-color: var(--ngv-brand); color: var(--ngv-brand); } .chip.is-active { background: var(--ngv-ink); color: #fff; border-color: var(--ngv-ink); } /* ----------------------------------------- 22. Utilities & motion ----------------------------------------- */ .reveal { opacity: 1; transform: translateY(0); transition: opacity 600ms var(--ngv-ease), transform 600ms var(--ngv-ease); } .reveal.is-pending { opacity: 0; transform: translateY(18px); } .reveal.is-in { opacity: 1; transform: translateY(0); } /* The intersection observer adds .is-pending early to start hidden, then .is-in on scroll-in. If JS never runs (or screenshot capture before observer fires), elements stay visible by default. */ .reveal[data-delay="1"] { transition-delay: 80ms; } .reveal[data-delay="2"] { transition-delay: 160ms; } .reveal[data-delay="3"] { transition-delay: 240ms; } .reveal[data-delay="4"] { transition-delay: 320ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip link */ .skip-link { position: absolute; top: -48px; left: 12px; background: var(--ngv-ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; transition: top var(--ngv-dur-fast) var(--ngv-ease); } .skip-link:focus { top: 12px; color: #fff; } /* Blog */ .blog-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .post-card { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ngv-dur) var(--ngv-ease), box-shadow var(--ngv-dur) var(--ngv-ease); } .post-card:hover { transform: translateY(-3px); box-shadow: var(--ngv-shadow-md); } .post-card__thumb { aspect-ratio: 16 / 10; background: var(--ngv-surface); } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; } .post-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; } .post-card__meta { font-size: var(--ngv-fs-xs); color: var(--ngv-muted-2); } .post-card__excerpt { color: var(--ngv-muted); font-size: var(--ngv-fs-sm); margin: 0; } /* Article */ .article { max-width: 720px; margin: 0 auto; } .article h2, .article h3 { margin-top: 1.5em; } .article img { border-radius: var(--ngv-r-md); margin: 1.5em 0; } /* ========================================================= PREMIUM ANIMATION LAYER ========================================================= */ /* Scroll progress bar under header */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--ngv-brand) 0%, var(--ngv-accent-cyan) 100%); transform-origin: 0 50%; transform: scaleX(0); z-index: 100; pointer-events: none; transition: transform 80ms linear; } /* Hero headline word stagger */ .hero__title .stagger-word { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 620ms var(--ngv-ease), transform 620ms var(--ngv-ease); transition-delay: calc(var(--i, 0) * 55ms); } .hero__title.is-animated .stagger-word { opacity: 1; transform: translateY(0); } /* Magnetic button — the JS applies transform; this smooths the return */ .btn { transition: transform 220ms var(--ngv-ease), background var(--ngv-dur-fast) var(--ngv-ease), color var(--ngv-dur-fast) var(--ngv-ease), box-shadow var(--ngv-dur-fast) var(--ngv-ease), border-color var(--ngv-dur-fast) var(--ngv-ease); } /* Cursor-follow spotlight on cards */ .spotlight { position: relative; overflow: hidden; } .spotlight::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 102, 255, 0.08), transparent 45%); opacity: 0; transition: opacity 420ms var(--ngv-ease); pointer-events: none; border-radius: inherit; } .spotlight:hover::after { opacity: 1; } /* Nav link animated underline */ .nav__link.has-underline { position: relative; } .nav__link.has-underline::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--ngv-brand); border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--ngv-ease); } .nav__link.has-underline:hover::after, .nav__link.has-underline.is-active::after { transform: scaleX(1); } .nav__link.has-underline:hover { background: transparent; } /* Shine sweep on CTA banner */ .cta-banner { position: relative; overflow: hidden; } .cta-banner::before { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.18) 50%, transparent 80%); transform: skewX(-20deg); transition: left 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; } .cta-banner.has-shined::before { left: 120%; } /* Hero visual tilt — smooth return */ .hero__visual { transition: transform 420ms var(--ngv-ease); transform-style: preserve-3d; } .hero__kiosk { transition: transform 60ms linear; will-change: transform; } .hero__glow { transition: transform 60ms linear; will-change: transform; } /* Gentle lift on brand mark hover */ .brand__mark { transition: transform 320ms var(--ngv-ease), box-shadow 320ms var(--ngv-ease); } .brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); box-shadow: 0 12px 24px -8px rgba(0, 102, 255, 0.7); } /* Path card — subtle arrow slide on hover (already exists, adding glow layering) */ .path-card { will-change: transform; } /* Device cards — tap scale feedback on coarse pointers */ @media (pointer: coarse) { .feature-card:active, .path-card:active, .device-card:active, .location-card:active { transform: scale(0.98); } } /* Icon pop on feature cards */ .feature-card__icon { transition: transform 420ms var(--ngv-ease), background 320ms var(--ngv-ease); } .feature-card:hover .feature-card__icon { transform: translateY(-2px) rotate(-4deg); background: var(--ngv-brand); color: #fff; } /* ========================================================= FORM FLASH — premium ========================================================= */ .form-flash { padding: 16px 20px; border-radius: var(--ngv-r-md); border: 1px solid var(--ngv-hairline); margin-bottom: 20px; box-shadow: var(--ngv-shadow-sm); font-size: var(--ngv-fs-sm); background: #fff; } .form-flash strong { display: block; font-size: var(--ngv-fs-base); margin-bottom: 2px; } .form-flash--success { border-left: 4px solid #18c37f; color: var(--ngv-ink); } .form-flash--error { border-left: 4px solid var(--ngv-brand); color: var(--ngv-ink); } .form-flash--error a { color: var(--ngv-brand); text-decoration: underline; } /* Premium card treatments — hairline border + soft shadow */ .feature-card, .path-card, .location-card, .stat-card, .step, .post-card { border: 1px solid var(--ngv-hairline); box-shadow: var(--ngv-shadow-sm); } .feature-card:hover, .path-card:hover, .location-card:hover, .post-card:hover { box-shadow: var(--ngv-shadow-md); border-color: var(--ngv-brand-100); } .path-card__icon { background: var(--ngv-brand-50); color: var(--ngv-brand); } .feature-card__icon { background: var(--ngv-brand-50); color: var(--ngv-brand); } .machine-showcase__list li .ico { background: var(--ngv-brand-50); color: var(--ngv-brand); } .location-card__badge { background: var(--ngv-brand-50); color: var(--ngv-brand); } .location-card__badge--soon { background: #fff4e5; color: #c26b00; } .trust-strip__stat { font-weight: 800; color: var(--ngv-ink); } .step__num { color: var(--ngv-brand); font-weight: 700; letter-spacing: 0.12em; } /* Nav underline in brand blue */ .nav__link.has-underline::after { background: var(--ngv-brand); } /* Chip active */ .chip.is-active { background: var(--ngv-ink); color: #fff; border-color: var(--ngv-ink); } .chip:hover { border-color: var(--ngv-brand); color: var(--ngv-brand); } /* FAQ accent */ .faq-item[open] { border-color: var(--ngv-brand-100); box-shadow: var(--ngv-shadow-sm); } .faq-item[open] .faq-item__icon { background: var(--ngv-brand); color: #fff; } /* Step number — subtle draw */ .step__num { position: relative; display: inline-block; } .step__num::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: linear-gradient(90deg, var(--ngv-brand), transparent); transform: scaleX(0); transform-origin: 0 0; transition: transform 620ms var(--ngv-ease); } .step.is-in .step__num::after { transform: scaleX(1); } /* Trust strip — slow counter feel */ .trust-strip__stat { font-variant-numeric: tabular-nums; } .stat-card__value { font-variant-numeric: tabular-nums; } /* Gallery tile — soft scale-in on reveal */ .gallery__tile.reveal { transition-duration: 720ms; } .gallery__tile.reveal:not(.is-in) { transform: translateY(18px) scale(0.98); } /* FAQ — smooth height on open via content padding and transform on icon (already rotating) */ .faq-item__body { animation: ngv-fadeIn 320ms var(--ngv-ease); } @keyframes ngv-fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Sticky header — gentle shrink on scroll */ .site-header { transition: box-shadow 240ms var(--ngv-ease), border-color 240ms var(--ngv-ease), background 240ms var(--ngv-ease), height 240ms var(--ngv-ease); } .site-header.is-scrolled .site-header__inner { height: calc(var(--ngv-header-h) - 8px); } /* Reduced motion — neutralize extras */ @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } .hero__title .stagger-word { opacity: 1 !important; transform: none !important; } .cta-banner::before { display: none; } .nav__link.has-underline::after { transition: none; } .hero__kiosk, .hero__glow, .hero__bubble, .mascot, .scroll-hint, .btn--primary::after, .feature-card, .path-card { animation: none !important; } } /* ========================================================= PREMIUM MOTION LAYER — subtle, restrained, on-brand ========================================================= */ /* Gentle hero machine float */ @keyframes ngv-hero-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } } .hero__visual .ngv-kiosk { animation: ngv-hero-float 6s ease-in-out infinite; will-change: transform; } /* Hero glow slow pulse */ @keyframes ngv-glow-pulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .hero__glow { animation: ngv-glow-pulse 7s ease-in-out infinite; will-change: opacity, transform; } /* Button primary — shine sweep on hover */ .btn--primary { position: relative; overflow: hidden; isolation: isolate; } .btn--primary::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%); transform: skewX(-18deg); transition: left 900ms cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; z-index: 0; } .btn--primary:hover::after { left: 130%; } .btn--primary > * { position: relative; z-index: 1; } /* Cards — premium lift + soft cyan glow on hover */ .feature-card, .path-card, .location-card, .stat-card, .step { transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 380ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 240ms ease; } .feature-card:hover, .path-card:hover, .location-card:hover, .stat-card:hover { transform: translateY(-6px); } /* Feature icon pop on hover */ .feature-card__icon, .path-card__icon { transition: transform 380ms cubic-bezier(0.2, 0.7, 0.2, 1), background 240ms ease, color 240ms ease, box-shadow 280ms ease; } .feature-card:hover .feature-card__icon, .path-card:hover .path-card__icon { transform: translateY(-2px) rotate(-4deg) scale(1.06); } /* Nav link slide-up indicator */ .nav__link { position: relative; transition: color 200ms ease; } .nav__link:hover { color: var(--ngv-brand); } /* Scroll hint chevron */ .scroll-hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--ngv-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; pointer-events: none; opacity: .7; animation: ngv-bounce 2.2s ease-in-out infinite; display: none; } .hero { position: relative; } @media (min-width: 1024px) { .scroll-hint { display: block; } } @keyframes ngv-bounce { 0%, 100% { transform: translate(-50%, 0); opacity: .55; } 50% { transform: translate(-50%, 6px); opacity: 1; } } /* Image fade-in on load */ img { transition: opacity 500ms ease; } img[loading="lazy"]:not([data-loaded]) { opacity: 0; } img[data-loaded] { opacity: 1; } /* Section head — stagger reveal */ .section-head > * { transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); } /* Subtle gradient sweep on CTA banner */ .cta-banner { background-size: 200% 200%; animation: ngv-cta-drift 18s ease-in-out infinite; } @keyframes ngv-cta-drift { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } /* Logo breathe on hover (header) */ .brand:hover .brand__mark img { transform: scale(1.03); transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1); } .brand__mark img { transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1); } /* Hero headline fade-up on load */ .hero__title, .hero__sub, .hero__ctas, .eyebrow { opacity: 0; transform: translateY(16px); animation: ngv-fade-up 720ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .eyebrow { animation-delay: 80ms; } .hero__title { animation-delay: 160ms; } .hero__sub { animation-delay: 240ms; } .hero__ctas { animation-delay: 320ms; } @keyframes ngv-fade-up { to { opacity: 1; transform: translateY(0); } } /* ========================================================= MASCOT — only used on white-bg accent sections ========================================================= */ .mascot-accent { background: #ffffff; } .mascot-accent__inner { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } .mascot-accent__visual { text-align: center; } .mascot-accent__img { width: 100%; max-width: 380px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 24px 40px rgba(232, 57, 47, 0.18)); animation: ngv-mascot-wave 5s ease-in-out infinite; } @keyframes ngv-mascot-wave { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } @media (min-width: 900px) { .mascot-accent__inner { grid-template-columns: 1fr 1.2fr; gap: 64px; } .mascot-accent--right .mascot-accent__visual { order: 2; } .mascot-accent__img { max-width: 440px; } } /* Legacy .mascot class — kept for backwards compat (404 page) */ .mascot { position: absolute; pointer-events: none; z-index: 4; filter: drop-shadow(0 18px 32px rgba(10, 24, 54, 0.25)); animation: ngv-float 6s ease-in-out infinite; } .cta-banner { position: relative; } .cta-banner .mascot { right: 12px; bottom: 12px; width: 120px; padding: 10px; background: #ffffff; border: 3px solid var(--ngv-ink); border-radius: 24px; box-shadow: 5px 5px 0 var(--ngv-ink); transform: rotate(-4deg); animation-delay: -3s; opacity: 1; } @media (min-width: 768px) { .cta-banner .mascot { width: 180px; right: 32px; bottom: 32px; padding: 14px; border-radius: 28px; } } @media (min-width: 1200px) { .cta-banner .mascot { width: 220px; right: 48px; bottom: 40px; } } .hero .mascot--hero-accent { display: none; /* hero composite already includes mascot */ } .mascot--404 { width: 70%; max-width: 360px; margin: 0 auto; display: block; position: relative; z-index: 2; filter: drop-shadow(0 24px 40px rgba(0, 102, 255, 0.25)); animation: ngv-float 6s ease-in-out infinite; } /* ========================================================= NEWSLETTER BLOCK ========================================================= */ .newsletter { background: #fff; border: 1px solid var(--ngv-hairline); border-radius: var(--ngv-r-xl); padding: 32px; box-shadow: var(--ngv-shadow-sm); display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } .newsletter__form { display: flex; gap: 12px; flex-wrap: wrap; } .newsletter__form input[type=email] { flex: 1 1 240px; min-width: 0; } @media (min-width: 800px) { .newsletter { grid-template-columns: 1.2fr 1fr; padding: 40px 48px; } } /* ========================================================= ROI CALCULATOR TWEAKS ========================================================= */ .roi input[type=range] { accent-color: var(--ngv-brand); width: 100%; } .roi .stat-card { padding: 20px; } .roi .stat-card__value { font-size: clamp(1.5rem, 3vw, 1.875rem); } /* ========================================================= MOBILE POLISH — final pass for phones (≤640px) and the iOS home-indicator / notch / address-bar quirks. ========================================================= */ /* iOS auto-zoom prevention: form inputs must be ≥16px font-size on focus, otherwise Safari/Chrome on iOS will zoom the page when the user taps. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], textarea, select { font-size: max(16px, 1rem); min-height: 44px; font-family: inherit; -webkit-appearance: none; appearance: none; } textarea { min-height: 96px; } /* Touch target sizing — every button reaches the 44×44px Apple/Google minimum on phones so taps don't miss. */ @media (max-width: 767px) { .btn { min-height: 48px; padding: 14px 22px; } .btn--lg { min-height: 54px; padding: 16px 24px; } .btn--sm { min-height: 40px; padding: 10px 16px; } .btn__icon { width: 18px; height: 18px; } } /* Sticky CTA — respect the iPhone home indicator and clear the bottom safe area. Without this, on iOS the CTA sits ON TOP of the home bar. */ .sticky-cta { bottom: max(12px, env(safe-area-inset-bottom, 12px)); left: max(12px, env(safe-area-inset-left, 12px)); right: max(12px, env(safe-area-inset-right, 12px)); min-height: 56px; } .sticky-cta .btn--primary { min-height: 40px; padding: 10px 18px; } /* Container padding on mobile — use safe areas so content never collides with rounded screen edges on modern phones. */ .container, .container--wide { padding-left: max(var(--ngv-gutter), env(safe-area-inset-left, 0)); padding-right: max(var(--ngv-gutter), env(safe-area-inset-right, 0)); } /* Mobile drawer — make sure it scrolls past long nav lists on phones with short viewports (e.g. iPhone SE 568px tall) + clears the bottom safe area. */ .mobile-nav { padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)); overscroll-behavior: contain; } .mobile-nav__list { gap: 0; } @media (max-width: 767px) { .mobile-nav__link { font-size: 1.25rem; padding: 14px 4px; } } /* Banner heroes on mobile — keep the picture sharp + remove heavy borders that look chunky on small screens. */ @media (max-width: 640px) { .banner-hero { padding: 12px 0 20px; } .banner-hero__pic { border-width: 2px; box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); border-radius: 10px; } .banner-hero__cta { gap: 10px; margin-top: 20px; } .banner-hero__cta .btn { width: 100%; justify-content: center; } } /* Hero pop (CSS-built fallback) — tighter on phones */ @media (max-width: 640px) { .hero--pop .hero__inner { gap: 32px; } .hero__title--pop { font-size: clamp(2rem, 9vw + 0.5rem, 3rem); } .hero__title--pop .pop-line--big { font-size: 1.1em; } .hero__badge { font-size: 0.7rem; padding: 5px 14px; } .hero__pill { font-size: 0.9rem; } .hero__pill-red, .hero__pill-yellow, .hero__pill-white { padding: 8px 14px; } .hero__starburst--top { width: 92px; right: 4%; bottom: 6%; font-size: 0.85rem; } } /* Machine-showcase visual — make sure the portrait machine fits at every width without being squished. */ @media (max-width: 640px) { .machine-showcase__visual { aspect-ratio: 4 / 5; min-height: 360px; border-radius: 16px; } .machine-showcase__visual img { max-width: 84%; max-height: 92%; } } /* Feature strip on /how-it-works/ — at narrow widths the offset shadow on the whole strip can cause horizontal scroll. Pull it inside. */ @media (max-width: 640px) { .feature-strip { box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); border-radius: 10px; } .feature-strip__card { padding: 22px 18px; } } /* Why-now badges spacing on phones */ @media (max-width: 640px) { .why-now { padding: 18px 18px; box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); } .why-now__icon { width: 48px; height: 48px; } } /* Trust strip — comfortable spacing on phones, 2 cols at small / 3 at sm */ @media (max-width: 540px) { .trust-strip__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .trust-strip__stat { font-size: 1.05rem; } .trust-strip__label { font-size: 0.75rem; } } /* Footer — smaller logo + tighter rhythm on phones */ @media (max-width: 640px) { .site-footer .brand__mark, .site-footer .brand__mark img { height: 72px; } .site-footer .footer-grid { gap: 32px; } .footer__about { font-size: 0.9rem; } .social-row { flex-wrap: wrap; } } /* Hero pop trust row — at sub-520px viewports stack into a tidy column */ @media (max-width: 519px) { .hero__trust-row { grid-template-columns: 1fr; gap: 12px; } .hero__trust { padding: 8px 0; } } /* Body content — sufficient line height on phones for readability */ @media (max-width: 640px) { p, li { line-height: 1.55; } .lede { font-size: 1.0625rem; line-height: 1.5; } } /* Stop bleed-through scrolling when sticky CTA + mobile-nav are both open */ body.has-mobile-nav-open { overflow: hidden; } /* Reveal animations — never apply transform on mobile if user prefers reduced motion. Already global, but reinforce. */ @media (prefers-reduced-motion: reduce) { .reveal { transform: none !important; opacity: 1 !important; transition: none !important; } } /* CTA banner on mobile — lighter shadow, smaller padding */ @media (max-width: 640px) { .cta-banner { padding: 40px 22px; box-shadow: 4px 4px 0 var(--pop-ink, #100a0a); border-width: 2px; } .cta-banner h2 { font-size: clamp(1.5rem, 5vw, 2rem); } } /* Stat cards — readable size on phones */ @media (max-width: 640px) { .stats { gap: 12px; } .stat-card { padding: 16px; } .stat-card__value { font-size: 1.625rem; } } /* Eyebrow on mobile — keep the comic rotation but tighter padding */ @media (max-width: 640px) { .eyebrow { padding: 6px 12px; font-size: 0.72rem; } } /* Pop hero (CSS fallback) on tablet+ — give the visual side breathing room */ @media (min-width: 640px) and (max-width: 899px) { .hero--pop .hero__visual--pop { max-width: 70%; margin-inline: auto; } } /* ========================================================================= AU EDITION — Machine catalog cards & status badges ========================================================================= */ .machine-badge { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; border: 2px solid currentColor; } .machine-badge--available { background:#16a34a; color:#fff; border-color:#0f7a37; } .machine-badge--soon { background:#ffc426; color:#100a0a; border-color:#100a0a; } .machine-badge--preorder { background:#e8392f; color:#fff; border-color:#7a1a14; } .hero--compact { padding: 56px 0 32px; } .hero--compact .hero__title { font-size: clamp(2.2rem, 6vw, 4rem); } .machines-grid { gap: 28px; } .machine-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 3px solid #100a0a; border-radius: 18px; box-shadow: 6px 6px 0 #100a0a; padding: 22px 22px 26px; color: #100a0a; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .machine-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #100a0a; } .machine-card__badge { position: absolute; top: 14px; right: 14px; } .machine-card__visual { display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 12px 0; } .machine-card__visual img, .machine-card__img { max-width: 100%; max-height: 220px; height: auto; width: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(16,10,10,0.18)); } .machine-card__title { font-family: "Arial Black", "Arial", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.4rem; line-height: 1.1; margin: 4px 0 0; } .machine-card__pitch { font-size: 0.95rem; color: #4a4038; margin: 0; min-height: 2.6em; } .machine-card__meta { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 2px dashed #100a0a22; } .machine-card__price { font-family: "Arial Black", sans-serif; font-weight: 900; font-size: 1.2rem; color: #e8392f; } .machine-card__profit { font-size: 0.85rem; font-weight: 700; color: #4a4038; text-transform: uppercase; letter-spacing: 0.03em; } .machine-card .btn { width: 100%; justify-content: center; margin-top: 6px; } /* Eyebrow inside hero supporting inline badge */ .hero .eyebrow .machine-badge { margin-top: 2px; } /* Two-column lineup grid on homepage */ .feature-grid--2 { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 720px) { .feature-grid--2 { grid-template-columns: 1fr 1fr; } } .feature-grid--2 .machine-card { padding: 28px 28px 32px; } .feature-grid--2 .machine-card__visual { min-height: 240px; } .feature-grid--2 .machine-card__visual img, .feature-grid--2 .machine-card__img { max-height: 280px; } .feature-grid--2 .machine-card__title { font-size: 1.7rem; } .feature-grid--2 .machine-card__price { font-size: 1.5rem; } /* ========================================================================= AU EDITION — Showcase lineup (homepage hero + featured-machines section) Mobile-first, designed for the 2-machine reveal. ========================================================================= */ /* --- Hero variant for 2-machine site --- */ .hero--lineup { position: relative; padding: 72px 0 56px; background: radial-gradient(900px 520px at 88% -10%, rgba(255,196,38,0.30), transparent 65%), radial-gradient(900px 520px at -8% 110%, rgba(232,57,47,0.18), transparent 65%), var(--ngv-cream, #faf6ec); overflow: hidden; } .hero--lineup .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 920px; margin: 0 auto; } .hero--lineup .hero__eyebrow { font-family: "Arial Black", "Arial", sans-serif; font-weight: 900; font-style: italic; font-size: clamp(0.85rem, 2.6vw, 1.05rem); letter-spacing: 0.08em; text-transform: uppercase; color: #e8392f; } .hero--lineup .hero__title { font-family: "Arial Black", "Arial", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(2.1rem, 7.2vw, 4.4rem); line-height: 0.98; letter-spacing: -0.02em; color: #100a0a; } .hero--lineup .hero__title .pop-yellow { display: inline-block; background: #100a0a; color: #ffc426; padding: 0 0.25em; transform: rotate(-1.5deg); } .hero--lineup .hero__sub { font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 720px; color: #4a4038; line-height: 1.55; } .hero--lineup .hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero--lineup .hero__ctas .btn { min-width: 200px; justify-content: center; } .hero--lineup .hero__pill-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 6px; font-weight: 700; font-size: 0.9rem; color: #4a4038; } .hero--lineup .hero__pill-row span::before { content: "✓ "; color: #16a34a; font-weight: 900; } /* --- Lineup-showcase section: bigger, richer 2-card layout --- */ .lineup-showcase { padding: 64px 0 56px; } .lineup-showcase__heading { text-align: center; max-width: 820px; margin: 0 auto 40px; } .lineup-showcase__grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 900px) { .lineup-showcase__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } .machine-feature { position: relative; display: flex; flex-direction: column; background: #fff; border: 3px solid #100a0a; border-radius: 22px; box-shadow: 8px 8px 0 #100a0a; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; text-decoration: none; color: #100a0a; } .machine-feature:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 #100a0a; } .machine-feature__top { position: relative; background: linear-gradient(135deg, #faf6ec 0%, #fff 100%); padding: 28px 24px 16px; display: flex; align-items: center; justify-content: center; min-height: 240px; border-bottom: 3px solid #100a0a; } @media (min-width: 600px) { .machine-feature__top { min-height: 320px; } } .machine-feature__badge { position: absolute; top: 14px; right: 14px; z-index: 2; } .machine-feature__img, .machine-feature__top img { max-width: 100%; max-height: 280px; height: auto; width: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(16,10,10,0.22)); } .machine-feature__placeholder { width: 70%; aspect-ratio: 3 / 4; background: radial-gradient(circle at 50% 30%, #fff 0 18%, transparent 18%), repeating-linear-gradient(45deg, #e8392f 0 16px, #ffc426 16px 32px); border: 3px dashed #100a0a; border-radius: 14px; opacity: 0.18; } .machine-feature__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .machine-feature__eyebrow { font-family: "Arial Black", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; color: #e8392f; font-size: 0.78rem; letter-spacing: 0.06em; } .machine-feature__title { font-family: "Arial Black", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(1.4rem, 4.2vw, 1.8rem); line-height: 1.05; margin: 0; } .machine-feature__pitch { font-size: 0.98rem; line-height: 1.5; color: #4a4038; margin: 0; } .machine-feature__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #100a0a; border: 2px solid #100a0a; border-radius: 10px; overflow: hidden; margin-top: 4px; } .machine-feature__stat { background: #faf6ec; padding: 12px 10px; text-align: center; } .machine-feature__stat-v { font-family: "Arial Black", sans-serif; font-weight: 900; font-style: italic; font-size: 1.25rem; color: #e8392f; line-height: 1; } .machine-feature__stat-l { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #4a4038; margin-top: 4px; line-height: 1.2; } .machine-feature__price-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 2px dashed rgba(16,10,10,0.18); flex-wrap: wrap; gap: 6px; } .machine-feature__price { font-family: "Arial Black", sans-serif; font-weight: 900; font-style: italic; font-size: 1.6rem; color: #e8392f; line-height: 1; } .machine-feature__price-suffix { font-size: 0.78rem; font-weight: 700; color: #4a4038; text-transform: uppercase; letter-spacing: 0.04em; } .machine-feature__ctas { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; } @media (min-width: 480px) { .machine-feature__ctas { grid-template-columns: 1fr 1fr; } } .machine-feature .btn { justify-content: center; width: 100%; } /* --- Mobile tightening --- */ @media (max-width: 720px) { .hero--lineup { padding: 48px 0 36px; } .lineup-showcase { padding: 40px 0 36px; } .machine-feature { box-shadow: 5px 5px 0 #100a0a; } .machine-feature:hover { box-shadow: 8px 8px 0 #100a0a; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .machine-feature, .machine-card { transition: none; } .machine-feature:hover, .machine-card:hover { transform: none; } } /* ========================================================================= AU EDITION — Split-layout hero (homepage) Mockup: white background, copy left, 2 machines side-by-side right. ========================================================================= */ .hero--split { background: radial-gradient(circle at 15% 18%, rgba(255, 212, 0, 0.10) 0, transparent 32%), radial-gradient(circle at 88% 82%, rgba(232, 57, 47, 0.10) 0, transparent 36%), linear-gradient(180deg, #fffaf2 0%, #fff5e6 100%); position: relative; overflow: hidden; padding: 56px 0 56px; border-bottom: 0; } @media (min-width: 960px) { .hero--split { padding: 80px 0 72px; } } .hero--split__bg { position: absolute; inset: 0; pointer-events: none; } .hero--split__halftone { position: absolute; width: 240px; height: 240px; background-image: radial-gradient(circle, rgba(232, 57, 47, 0.20) 1.3px, transparent 1.7px); background-size: 14px 14px; border-radius: 50%; opacity: 0.55; } .hero--split__halftone--tl { top: -60px; left: -60px; transform: rotate(-8deg); } .hero--split__halftone--br { bottom: -60px; right: -60px; transform: rotate(8deg); width: 320px; height: 320px; } .hero--split__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; z-index: 1; } @media (min-width: 960px) { .hero--split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; } } @media (min-width: 1280px) { .hero--split__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; } } /* ---- Pill badge ---- */ .hero--split__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: #fff; border: 2.5px solid #e8392f; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #100a0a; box-shadow: 0 4px 0 #100a0a; margin-bottom: 26px; max-width: 100%; } .hero--split__badge-bolt { color: #ffd400; font-size: 17px; line-height: 1; } .hero--split__badge-star { color: #ffd400; font-size: 14px; line-height: 1; } .hero--split__badge-text { white-space: normal; } /* ---- Headline ---- */ .hero--split__title { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 900; font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 28px; color: #100a0a; text-transform: uppercase; } .hero--split__title .hero--split__line { display: block; margin: 8px 0; white-space: nowrap; } .hero--split__line--top { color: #100a0a; } .hero--split__line--accent { color: #100a0a; } .hero--split__hl { display: inline-block; background: #100a0a; color: #ffd400; padding: 6px 20px 10px; border-radius: 6px; box-shadow: 0 4px 0 #ffd400; white-space: nowrap; transform: rotate(-1deg); margin: 4px 0 6px; letter-spacing: -0.015em; line-height: 1; } /* ---- Sub copy ---- */ .hero--split__sub { font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.55; color: #2a1f1f; max-width: 560px; margin: 0 0 28px; } .hero--split__sub strong { font-weight: 800; color: #100a0a; } /* ---- CTAs ---- */ .hero--split__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; } .btn--pill { border-radius: 999px !important; padding: 16px 30px; font-weight: 800; } .btn--ghost-dark { background: #fff; color: #100a0a; border: 2.5px solid #100a0a; } .btn--ghost-dark:hover { background: #100a0a; color: #fff; } /* ---- Check list ---- */ .hero--split__checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px 24px; font-size: 0.95rem; font-weight: 600; color: #100a0a; } @media (min-width: 560px) { .hero--split__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .hero--split__checks { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .hero--split__checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.3; } .hero--split__check { flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1a8f3a; color: #fff; font-size: 12px; font-weight: 900; margin-top: 2px; } /* ---- Machine showcase (right side) ---- */ .hero--split__machines { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; padding: 0; } @media (min-width: 960px) { .hero--split__machines { gap: 24px; } } .hero--split__machine { display: block; position: relative; transition: transform .25s ease; text-decoration: none; background: transparent; border: 0; } .hero--split__machine:hover { transform: translateY(-6px); } .hero--split__machine-img { width: 100%; height: auto; display: block; background: transparent; filter: drop-shadow(0 20px 28px rgba(20, 10, 10, 0.18)); } /* Placeholder when no featured image yet */ .hero--split__machine-ph { aspect-ratio: 4 / 5; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22) 0, transparent 35%), linear-gradient(135deg, #e8392f 0%, #b81d14 100%); border-radius: 14px; border: 4px solid #100a0a; box-shadow: 0 10px 0 #100a0a, 0 22px 36px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .hero--split__machine-ph::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.18) 1.2px, transparent 1.6px); background-size: 14px 14px; mask-image: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.2)); } .hero--split__machine-ph::after { content: '⚡'; position: absolute; top: 14px; right: 16px; font-size: 28px; color: #ffd400; filter: drop-shadow(0 2px 0 #100a0a); } .hero--split__machine-ph-inner { position: relative; background: #100a0a; color: #fff; padding: 18px 20px; border-radius: 10px; box-shadow: 0 6px 0 #ffd400; max-width: 82%; text-align: center; display: flex; flex-direction: column; gap: 6px; } .hero--split__machine-ph-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #ffd400; } .hero--split__machine-ph-title { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 900; text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; } .hero--split__machine-ph-price { font-size: 0.85rem; font-weight: 700; color: #fffaf2; opacity: 0.85; } /* Hide the old .trust-strip beneath the new hero on mobile to keep above-fold tight */ @media (max-width: 559px) { .hero--split + .finance-strip + .trust-strip .trust-strip__grid > *:nth-child(n+5) { display: none; } } /* ========================================================================= AU EDITION — Finance page (page-finance.php) ========================================================================= */ .finance-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: #fff; border: 2px solid #100a0a; border-radius: 14px; padding: 22px; box-shadow: 0 8px 0 #100a0a; } @media (min-width: 720px) { .finance-intro { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 28px 32px; } } .finance-intro__item { text-align: center; } .finance-intro__stat { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 900; color: #e8392f; letter-spacing: -0.02em; line-height: 1.1; } .finance-intro__label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #2a1f1f; margin-top: 4px; } .finance-structs { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 860px) { .finance-structs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } .finance-struct { position: relative; background: #fff; border: 2px solid #100a0a; border-radius: 14px; padding: 26px 24px 24px; box-shadow: 0 8px 0 #100a0a; } .finance-struct__badge { position: absolute; top: -14px; left: 22px; background: #ffd400; color: #100a0a; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border: 2px solid #100a0a; border-radius: 999px; } .finance-struct h3 { font-size: 1.4rem; font-weight: 900; margin: 0 0 12px; color: #100a0a; letter-spacing: -0.02em; } .finance-struct p { color: #2a1f1f; line-height: 1.55; margin: 0 0 14px; font-size: 0.95rem; } .finance-struct__pts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .finance-struct__pts li { padding-left: 22px; position: relative; font-size: 0.9rem; font-weight: 600; color: #100a0a; } .finance-struct__pts li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #1a8f3a; font-weight: 900; } /* ---- Lender cards ---- */ .finance-lenders { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 720px) { .finance-lenders { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .finance-lenders { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .finance-lenders--five { max-width: 1100px; margin: 0 auto; } @media (min-width: 1180px) { .finance-lenders--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .finance-lender { background: #fff; border: 2px solid #100a0a; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; box-shadow: 0 6px 0 #100a0a; transition: transform 0.2s ease, box-shadow 0.2s ease; } .finance-lender:hover { transform: translateY(-4px); box-shadow: 0 10px 0 #100a0a; } .finance-lender--broker { border-color: #e8392f; box-shadow: 0 6px 0 #e8392f; } .finance-lender--broker:hover { box-shadow: 0 10px 0 #e8392f; } .finance-lender__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1.5px dashed rgba(16,10,10,0.15); } .finance-lender__name { font-size: 1.25rem; font-weight: 900; color: #100a0a; letter-spacing: -0.02em; margin: 0 0 4px; line-height: 1.1; } .finance-lender__tag { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #e8392f; } .finance-lender--broker .finance-lender__tag { color: #100a0a; background: #ffd400; padding: 3px 8px; border-radius: 4px; display: inline-block; } .finance-lender__body { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .finance-lender__row { display: grid; grid-template-columns: 86px 1fr; gap: 8px; font-size: 0.88rem; line-height: 1.4; } .finance-lender__k { font-weight: 800; color: #2a1f1f; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; padding-top: 2px; } .finance-lender__v { color: #100a0a; font-weight: 600; } .finance-lender__pitch { font-size: 0.88rem; line-height: 1.5; color: #2a1f1f; margin: 8px 0 0; padding-top: 10px; border-top: 1.5px dashed rgba(16,10,10,0.12); } .finance-lender__ctas { display: flex; flex-wrap: wrap; gap: 8px; } .finance-lender__ctas .btn { padding: 10px 14px; font-size: 0.88rem; flex: 1 1 auto; justify-content: center; } /* ---- Process steps ---- */ .finance-steps { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .finance-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } } .finance-step { text-align: center; padding: 20px 16px; background: #fff; border: 2px solid #100a0a; border-radius: 12px; box-shadow: 0 4px 0 #100a0a; } .finance-step__n { width: 44px; height: 44px; margin: 0 auto 12px; background: #e8392f; color: #fff; border: 2.5px solid #100a0a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.2rem; box-shadow: 0 3px 0 #100a0a; } .finance-step h4 { font-size: 1rem; font-weight: 900; margin: 0 0 8px; color: #100a0a; letter-spacing: -0.01em; } .finance-step p { font-size: 0.85rem; line-height: 1.5; color: #2a1f1f; margin: 0; } /* ---- Disclaimer ---- */ .finance-disclaimer { background: #fffaf2; border: 2px dashed #100a0a; border-radius: 12px; padding: 24px 28px; max-width: 920px; margin: 0 auto; } .finance-disclaimer h3 { font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #e8392f; margin: 0 0 10px; } .finance-disclaimer p { font-size: 0.92rem; line-height: 1.6; color: #2a1f1f; margin: 0 0 12px; } .finance-disclaimer p:last-child { margin-bottom: 0; } /* ========================================================================= AU EDITION — Finance partner strip (homepage) ========================================================================= */ .finance-strip { background: #100a0a; color: #faf6ec; padding: 18px 0; border-top: 3px solid #ffc426; border-bottom: 3px solid #ffc426; } .finance-strip__inner { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } @media (min-width: 760px) { .finance-strip__inner { flex-direction: row; justify-content: center; gap: 18px; } } .finance-strip__label { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #ffc426; } .finance-strip__logos { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; } .finance-strip__logo { font-family: "Arial Black", "Arial", sans-serif; font-weight: 900; font-style: italic; font-size: 1.05rem; letter-spacing: 0.02em; color: #fff; } .finance-strip__sep { color: #ffc426; font-weight: 900; } .finance-strip__note { font-size: 0.78rem; opacity: 0.75; } .finance-strip__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 800; color: #ffd400; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 14px; border: 2px solid #ffd400; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; } .finance-strip__cta:hover { background: #ffd400; color: #100a0a; } /* ----------------------------------------- Buy cards — machine picker with one-click checkout ----------------------------------------- */ .buy-cards { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; max-width: 920px; margin-inline: auto; } @media (min-width: 760px) { .buy-cards { grid-template-columns: repeat(2, 1fr); } } .buy-card { position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border: 2px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); padding: 28px; box-shadow: var(--ngv-shadow-sm); transition: transform var(--ngv-dur) var(--ngv-ease), box-shadow var(--ngv-dur) var(--ngv-ease), border-color var(--ngv-dur) var(--ngv-ease); } .buy-card:hover { transform: translateY(-4px); box-shadow: var(--ngv-shadow-lg); border-color: var(--ngv-brand-100); } .buy-card--featured { border-color: var(--ngv-brand); } .buy-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ngv-brand); color: #fff; font-size: var(--ngv-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--ngv-r-pill); white-space: nowrap; } .buy-card__pic { display: block; margin: 0 auto 4px; } .buy-card__pic img { display: block; width: auto; height: 180px; max-width: 100%; object-fit: contain; margin: 0 auto; } .buy-card__title { font-size: var(--ngv-fs-xl); font-weight: 800; letter-spacing: -0.01em; } .buy-card__price { font-size: var(--ngv-fs-3xl); font-weight: 900; color: var(--ngv-brand); letter-spacing: -0.02em; line-height: 1; } .buy-card__tag { color: var(--ngv-muted); margin: 0; min-height: 0; } .buy-card__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; } .buy-card__list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ngv-fs-sm); color: var(--ngv-ink-2); } .buy-card__list .ico { color: var(--ngv-brand); flex: 0 0 auto; margin-top: 2px; } .buy-card__ctas { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 12px; } .buy-card__ctas .btn--primary { flex: 1 1 auto; justify-content: center; } /* ----------------------------------------- Post-purchase book-a-call block (order received page) ----------------------------------------- */ .ngv-book-call { background: linear-gradient(140deg, #fff, var(--ngv-brand-50)); border: 2px solid var(--ngv-brand); border-radius: var(--ngv-r-lg); padding: clamp(20px, 4vw, 36px); margin: 0 0 32px; box-shadow: var(--ngv-shadow-md); } .ngv-book-call__head h2 { margin: 6px 0 8px; } .ngv-book-call__head p { color: var(--ngv-muted); max-width: 640px; } .ngv-book-call__options { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; } .ngv-book-call__or { font-weight: 700; margin: 14px 0 6px; color: var(--ngv-ink-2); } .ngv-book-call__form .form__row { align-items: end; } @media (max-width: 640px) { .ngv-book-call__options .btn { width: 100%; justify-content: center; } } /* ----------------------------------------- US vs import comparison table ----------------------------------------- */ .vs-table-wrap { overflow-x: auto; max-width: 980px; margin-inline: auto; } .vs-table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--ngv-hairline); border-radius: var(--ngv-r-lg); overflow: hidden; font-size: var(--ngv-fs-sm); } .vs-table th, .vs-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--ngv-hairline-soft); } .vs-table thead th { background: var(--ngv-ink); color: #fff; font-size: var(--ngv-fs-xs); letter-spacing: .06em; text-transform: uppercase; border-top: 0; } .vs-table thead th.vs-table__ngv { background: var(--ngv-brand); } .vs-table tbody th { font-weight: 700; color: var(--ngv-ink-2); width: 18%; } .vs-table tbody td { color: var(--ngv-muted); width: 41%; } .vs-table tbody td.vs-table__ngv { background: var(--ngv-brand-50); color: var(--ngv-ink-2); font-weight: 500; } .vs-table td.vs-table__ngv .ico { color: var(--ngv-brand); margin-right: 6px; vertical-align: -2px; } @media (max-width: 640px) { .vs-table th, .vs-table td { padding: 10px 10px; } } /* ----------------------------------------- Callback enquiry card ----------------------------------------- */ .callback-card { background: linear-gradient(140deg, #fff, var(--ngv-brand-50)); border: 2px solid var(--ngv-brand); border-radius: var(--ngv-r-lg); padding: clamp(22px, 4vw, 40px); box-shadow: var(--ngv-shadow-md); } .callback-card__copy { margin-bottom: 20px; } .callback-card__copy p { color: var(--ngv-muted); max-width: 560px; } .form--callback .form__row { margin-bottom: 14px; } /* ----------------------------------------- Express order box (ad landing pages) ----------------------------------------- */ .express-order { background: #fff; border: 3px solid var(--ngv-brand); border-radius: var(--ngv-r-lg); padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--ngv-shadow-lg); position: sticky; top: calc(var(--ngv-header-h) + 16px); } .express-order__head { text-align: center; margin-bottom: 18px; } .express-order__price { font-size: var(--ngv-fs-4xl); font-weight: 900; color: var(--ngv-brand); letter-spacing: -0.02em; line-height: 1.05; margin-top: 8px; } .express-order__price span { display: block; font-size: var(--ngv-fs-sm); font-weight: 600; color: var(--ngv-muted); letter-spacing: 0; margin-top: 6px; } .express-order .form__row { margin-bottom: 12px; }