/* ========================================================================== loyalino.io Layout is modelled on profitview.ai, measured from its live DOM: container max-width 1152px with 16/24px padding, NO css grid anywhere, asymmetric flex rows (58/42, 45/55) at a fixed 10px gap, cards #F4F2F0 at radius 20/28 and padding 20/30, all headings weight 500 at -0.03em. Colour and type come from Loyalino's own App Store assets: the green mark, black display type, hairline-bordered surfaces, pastel accent cards. ========================================================================== */ /* ---------- tokens ---------- */ :root { /* Brand, sampled from the App Store icon and promotional image. */ --brand: #1a9e16; --brand-bright: #22b91d; --brand-deep: #0a7307; --brand-soft: #e5ffe4; --forest: #234e32; --ground: #ffffff; --card: #f4f2f0; --card-2: #f7f7f7; --cream: #fff9ed; --ink: #171717; --ink-2: #666666; --ink-3: #999999; --line: #ededed; --line-2: #e5e5e5; /* Pastels from the real loyalty landing page tier cards. */ --p-yellow: #fde4aa; --p-mint: #dafbda; --p-lav: #e3e0f5; --p-blue: #d9e8f5; --p-pink: #fbdfe4; /* Shopify admin (Polaris) surface tokens, for the admin mockups. */ --pol-bg: #f1f1f1; --pol-surface: #ffffff; --pol-border: #e3e3e3; --pol-ink: #303030; --pol-ink-2: #616161; --pol-fill: #f1f1f1; --pol-success-bg: #cdfee1; --pol-success-ink: #0c5132; --r-card: 20px; --r-card-lg: 28px; --r-panel: 12px; --r-pill: 999px; --shadow-hair: 0 1px 3px rgba(0, 0, 0, 0.06); --pad-x: 16px; --wrap: 1152px; --gap: 10px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Read out of profitview's own bundle: every reveal uses ease [.25,.1,.25,1] at 0.4-0.5s, with a 100ms stagger between siblings. */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --dur: 500ms; } @media (min-width: 768px) { :root { --pad-x: 24px; } } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; } /* Lenis drives scrolling; it sets .lenis on . Without JS we fall back to the browser's own smooth anchor scrolling. */ html:not(.lenis) { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font); font-size: 16px; line-height: 22px; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: separate; border-spacing: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--brand-soft); color: var(--brand-deep); } .skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; } .skip:focus { left: 12px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== CONTAINER + RHYTHM (profitview's exact system) One element carries both the horizontal inset and the vertical rhythm. ========================================================================== */ .k { margin-inline: auto; width: 100%; max-width: var(--wrap); padding-inline: var(--pad-x); } .k-narrow { max-width: 576px; } .k-mid { max-width: 1024px; } .py-feature { padding-block: 48px; } .py-big { padding-block: 64px; } @media (min-width: 768px) { .py-feature { padding-block: 80px; } .py-big { padding-block: 160px; } .py-faq { padding-block: 180px; } } .py-faq { padding-block: 64px; } /* ---------- rows: flex, never grid, 10px gap ---------- */ .row2 { display: flex; flex-direction: column; gap: var(--gap); } .row2 + .row2 { margin-top: var(--gap); } @media (min-width: 1024px) { .row2 { flex-direction: row; align-items: stretch; } /* Every column in a row is the same width. The reference uses asymmetric 58/42 and 45/55 splits; equal columns were asked for instead. */ .row2 > * { flex: 1 1 0; min-width: 0; } } /* align-items:stretch equalises the flex children, but the card inside each one has to fill that height or the row still looks ragged. */ .row2 > * { display: flex; } .row2 > * > .fc, .row2 > .fc { flex: 1 1 auto; height: 100%; } /* ========================================================================== TYPE (profitview's measured scale; weight 500 throughout) ========================================================================== */ h1, .t-h1 { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 40px; letter-spacing: -1px; } h2, .t-h2 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 34px; letter-spacing: -0.84px; color: var(--ink); } .t-h2-mid { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -0.72px; } h3, .t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -0.6px; color: var(--ink); } @media (min-width: 768px) { h1, .t-h1 { font-size: 72px; line-height: 74px; letter-spacing: -2.88px; } h2, .t-h2 { font-size: 48px; line-height: 56px; letter-spacing: -1.44px; } .t-h2-mid { font-size: 32px; line-height: 38px; letter-spacing: -0.96px; } h3, .t-h3 { font-size: 24px; line-height: 28px; letter-spacing: -0.72px; } } .lede { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ink-2); } @media (min-width: 768px) { .lede { font-size: 16px; line-height: 22px; } } .muted { color: var(--ink-2); } .t-sm { font-size: 14px; line-height: 20px; color: var(--ink-2); } .t-xs { font-size: 13px; line-height: 18px; color: var(--ink-2); } .eyebrow { font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: 0.24px; text-transform: uppercase; color: var(--brand-deep); } .sec-head { max-width: 720px; } .sec-head.mid { margin-inline: auto; text-align: center; } .sec-head .lede { margin-top: 12px; } .sec-head h2 { margin-top: 8px; } .rows { margin-top: 40px; } @media (min-width: 768px) { .rows { margin-top: 65px; } } /* ========================================================================== BUTTONS ========================================================================== */ .btn { --bg: var(--ink); --fg: #fff; --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1px solid var(--bd); border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font-size: 14px; line-height: 19.6px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: none; } .btn-primary { --bg: var(--brand); } .btn-primary:hover { --bg: var(--brand-deep); } .btn-dark { --bg: var(--ink); } .btn-dark:hover { --bg: #000; } .btn-ghost { --bg: #fff; --fg: var(--ink); --bd: var(--line-2); } .btn-ghost:hover { --bd: var(--ink-3); } .btn-lg { padding: 14px 26px; font-size: 15px; } .btn-block { width: 100%; } .btn-arrow { transition: transform 0.18s var(--ease); } .btn:hover .btn-arrow { transform: translateX(3px); } /* ========================================================================== NAV ========================================================================== */ .nav-wrap { position: sticky; top: 0; z-index: 90; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .nav-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); opacity: 0; transition: opacity 0.25s ease; } .nav-wrap.stuck::after { opacity: 1; } .nav { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; } @media (min-width: 768px) { .nav { padding-block: 18px; } } .brand { display: inline-flex; align-items: center; gap: 9px; } .brand img { width: 30px; height: 30px; border-radius: 7px; } .brand span { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.5px; } .nav-mid { display: none; align-items: center; gap: 26px; } @media (min-width: 900px) { .nav-mid { display: flex; } } .nav-mid a { font-size: 15px; color: var(--ink-2); transition: color 0.15s ease; } .nav-mid a:hover { color: var(--ink); } .nav-end { display: flex; align-items: center; gap: 10px; } .nav-login { display: none; font-size: 14px; font-weight: 500; color: var(--ink); padding: 8px 4px; } @media (min-width: 900px) { .nav-login { display: inline-block; } } .burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; } @media (min-width: 900px) { .burger { display: none; } } .burger i { display: block; width: 15px; height: 1.5px; background: var(--ink); position: relative; } .burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; background: var(--ink); transition: transform 0.22s var(--ease); } .burger i::before { top: -5px; } .burger i::after { top: 5px; } .burger[aria-expanded="true"] i { background: transparent; } .burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); } .nav-mob { display: none; padding-bottom: 16px; } .nav-mob.open { display: block; } .nav-mob a { display: block; padding: 13px 2px; font-size: 16px; border-bottom: 1px solid var(--line); } .nav-mob .btn { margin-top: 14px; } /* ========================================================================== HERO ========================================================================== */ .hero { padding-top: 56px; text-align: center; } @media (min-width: 768px) { .hero { padding-top: 96px; } } .hero h1 { max-width: 15ch; margin-inline: auto; } .hero .lede { max-width: 448px; margin: 16px auto 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; } .hero-note { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 13px; line-height: 18px; color: var(--ink-3); } .hero-note li { display: inline-flex; align-items: center; gap: 5px; } .hero-note svg { color: var(--brand); flex-shrink: 0; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 6px 14px 6px 7px; margin-bottom: 22px; font-size: 13px; line-height: 18px; color: var(--ink-2); background: #fff; } .hero-badge img { width: 18px; height: 18px; border-radius: 5px; } .hero-badge b { color: var(--ink); font-weight: 500; } .hero-shot { margin-top: 40px; } @media (min-width: 768px) { .hero-shot { margin-top: 48px; } } /* ========================================================================== FEATURE CARD (profitview grammar) ========================================================================== */ .fc { width: 100%; background: var(--card); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; overflow: hidden; } @media (min-width: 768px) { .fc { border-radius: var(--r-card-lg); padding: 30px; gap: 24px; } } .fc > header h3 { color: var(--ink); } .fc > header p { margin-top: 8px; font-size: 16px; line-height: 22px; color: var(--ink-2); } .fc-flush { padding-bottom: 0; } /* Rows are height-equalised by align-items:stretch, so the illustration takes the slack instead of leaving a gap under the shorter card. */ .fc > .fig { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; } .fc-tint-mint { background: var(--p-mint); } .fc-tint-cream { background: var(--cream); } .fc-forest { background: var(--forest); } .fc-forest > header h3 { color: #fff; } .fc-forest > header p { color: rgba(255, 255, 255, 0.62); } /* the illustration well */ .fig { position: relative; width: 100%; } /* ========================================================================== SHOPIFY ADMIN (POLARIS) MOCKS Matched to real Loyalino admin screenshots: white cards on #f1f1f1, 1px #e3e3e3 borders, 36px #f1f1f1 icon tiles, 14px/13px type, #303030 buttons. ========================================================================== */ .pol { background: var(--pol-surface); border: 1px solid var(--pol-border); border-radius: var(--r-panel); overflow: hidden; font-size: 13px; line-height: 18px; color: var(--pol-ink); } .pol-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; } .pol-hd h4 { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; } .pol-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--pol-border); } .pol-ico { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; background: var(--pol-fill); display: grid; place-items: center; color: var(--pol-ink); } .pol-ico svg { width: 16px; height: 16px; } .pol-txt { flex: 1; min-width: 0; } .pol-t { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--pol-ink); } .pol-s { display: block; font-size: 12px; line-height: 16px; color: var(--pol-ink-2); } .pol-btn { flex-shrink: 0; border: 1px solid #b5b5b5; border-radius: 8px; background: #fff; padding: 4px 11px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--pol-ink); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); } .pol-btn-primary { background: var(--pol-ink); border-color: var(--pol-ink); color: #fff; } .pol-badge { display: inline-block; flex-shrink: 0; padding: 2px 8px; border-radius: 8px; font-size: 12px; line-height: 16px; font-weight: 500; background: var(--pol-success-bg); color: var(--pol-success-ink); } .pol-badge-grey { background: #e3e3e3; color: #4a4a4a; } .pol-tile { background: #fff; border: 1px solid var(--pol-border); border-radius: 10px; padding: 12px 14px; } .pol-tile .lbl { font-size: 12px; line-height: 16px; color: var(--pol-ink-2); } .pol-tile .val { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 28px; letter-spacing: -0.04em; color: var(--pol-ink); margin-top: 2px; display: flex; align-items: center; gap: 7px; } .pol-pastel { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; } .pol-pastel svg { width: 15px; height: 15px; } /* ========================================================================== STOREFRONT WIDGET MOCKS Matched to the real widget: uppercase black display headings, hairline cards, black pill buttons with a trailing arrow, divider rows. ========================================================================== */ .sf { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; color: #111; } .sf-hd { background: #f5f6f8; padding: 16px 18px 18px; } .sf-eyebrow { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #111; } .sf-title { font-family: var(--font-display); font-size: 26px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; margin-top: 4px; } .sf-body { padding: 14px; display: grid; gap: 12px; } .sf-card { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; } .sf-card h5 { font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em; } .sf-card p { margin-top: 4px; font-size: 13px; line-height: 18px; color: #666; } .sf-btn { margin-top: 12px; width: 100%; display: flex; align-items: center; justify-content: space-between; background: #111; color: #fff; border-radius: var(--r-pill); padding: 11px 18px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .sf-label { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #111; } .sf-list { display: grid; } .sf-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 13px; font-weight: 600; } .sf-item + .sf-item { border-top: 1px solid var(--line); } .sf-item svg:first-child { width: 20px; height: 20px; flex-shrink: 0; color: #111; } .sf-item .grow { flex: 1; min-width: 0; letter-spacing: 0.02em; text-transform: uppercase; font-size: 12px; } .sf-item .arr { color: #111; flex-shrink: 0; } .sf-pts { font-size: 12px; font-weight: 700; color: #111; } /* points badge as it renders on a real product page */ .pdp-badge { display: flex; align-items: center; gap: 10px; background: #f3f3f3; border-radius: 10px; padding: 12px 14px; } .pdp-badge .ic { width: 32px; height: 32px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex-shrink: 0; } .pdp-badge .ic svg { width: 17px; height: 17px; color: #111; } .pdp-badge p { font-size: 13px; line-height: 18px; color: #4a4a4a; } /* ---------- generic mock helpers ---------- */ .bar { height: 6px; border-radius: 99px; background: #ececec; overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; background: var(--ink); } .chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 3px 8px; font-size: 11px; line-height: 16px; font-weight: 500; } .chip-green { background: var(--brand-soft); color: var(--brand-deep); } .chip-yellow { background: var(--p-yellow); color: #7a5405; } .chip-grey { background: #ececec; color: #5a5a5a; } .chip-ink { background: #111; color: #fff; } .mlabel { font-size: 11px; line-height: 16px; color: var(--ink-3); } .mval { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); } /* ========================================================================== STATS / LIST SECTION (profitview section-2 pattern, 576px column) ========================================================================== */ .vlist { margin-top: 32px; } .vlist li { display: flex; align-items: flex-start; gap: 16px; padding-block: 24px; } .vlist li + li { border-top: 1px solid var(--line); } .vtile { width: 72px; height: 72px; flex-shrink: 0; border-radius: 12px; background: var(--card); display: grid; place-items: center; } @media (min-width: 640px) { .vtile { width: 90px; height: 90px; } } .vtile svg { width: 30px; height: 30px; color: var(--ink); } .vlist h3 { font-size: 20px; line-height: 28px; } @media (min-width: 768px) { .vlist h3 { font-size: 24px; line-height: 32px; } } .vlist p { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-2); } @media (min-width: 768px) { .vlist p { font-size: 16px; line-height: 22px; } } /* ========================================================================== LOGOS ========================================================================== */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .logo-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 16px 8px 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); } .logo-pill img { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; object-fit: contain; } .logo-pill svg { width: 20px; height: 20px; flex-shrink: 0; } .logo-grid { display: flex; flex-wrap: wrap; gap: 8px; } .logo-tile { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 8px 13px 8px 8px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-hair); } .logo-tile img { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; flex-shrink: 0; } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 12px; width: max-content; animation: slide 42s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes slide { to { transform: translateX(-50%); } } /* ========================================================================== COMPARISON ========================================================================== */ .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp { width: 100%; min-width: 700px; font-size: 14px; } .cmp th, .cmp td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); } .cmp thead th { font-size: 13px; font-weight: 500; color: var(--ink-2); padding-bottom: 12px; } .cmp thead .us { color: var(--brand-deep); font-weight: 600; } .cmp tbody th { text-align: left; font-weight: 400; color: var(--ink); width: 30%; min-width: 190px; } .cmp .us { background: #fff; } .cmp tbody .us { font-weight: 500; color: var(--brand-deep); } .cmp small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-3); font-weight: 400; margin-top: 2px; } .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; } .cmp-wrap { background: var(--card); border-radius: var(--r-card); padding: 8px 8px 4px; } @media (min-width: 768px) { .cmp-wrap { border-radius: var(--r-card-lg); padding: 14px 14px 8px; } } .cmp-hint { display: none; font-size: 12px; color: var(--ink-3); text-align: right; margin-bottom: 8px; } @media (max-width: 860px) { .cmp-hint { display: block; } } /* ========================================================================== PRICING ========================================================================== */ .plans { display: flex; flex-direction: column; gap: var(--gap); margin-top: 40px; } .guarantee { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:28px; padding:clamp(20px,3vw,30px); border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--brand-soft); } .guarantee > div { flex:1 1 420px; min-width:0; } .guarantee h3 { margin-bottom:8px; } .guarantee p { color:var(--ink-2); line-height:1.6; } .guarantee .btn { white-space:normal; text-align:center; } .guarantee-note { flex-basis:100%; font-size:14px; } .guarantee-note a, .support-copy a:not(.btn), .support-options a { color:var(--brand-deep); text-decoration:underline; text-underline-offset:3px; } .page-nav { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-block:18px; } .page-nav-links { display:flex; flex-wrap:wrap; gap:8px 24px; } .page-nav-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; } .page-nav-links a[aria-current="page"] { color:var(--brand-deep); text-decoration:underline; text-underline-offset:5px; } .public-page .sec-head h1 { font-size:clamp(32px,4vw,48px); line-height:1.15; margin-top:8px; letter-spacing:-.03em; } .public-page .rv { opacity:1; transform:none; } .public-page .foot { padding-bottom:28px; } .support-options { display:flex; flex-wrap:wrap; gap:var(--gap); margin-top:32px; } .support-options > article { flex:1 1 280px; min-width:0; } .support-options h2, .support-copy h2 { font-size:24px; line-height:1.3; letter-spacing:-.02em; } .support-options p, .support-copy p { color:var(--ink-2); line-height:1.7; overflow-wrap:anywhere; } .support-copy { margin-top:40px; } .support-copy > * + * { margin-top:16px; } @media(max-width:520px) { .page-nav-links { order:3; width:100%; justify-content:space-between; } .guarantee > .btn { width:100%; } } @media (min-width: 1024px) { .plans { flex-direction: row; align-items: stretch; } .plans > * { flex: 1 1 0; min-width: 0; } } .plan { background: var(--card); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; } @media (min-width: 768px) { .plan { border-radius: var(--r-card-lg); padding: 26px; } } .plan.pop { background: var(--forest); color: #fff; } .plan.pop .plan-orders, .plan.pop li { color: rgba(255, 255, 255, 0.72); } .plan.pop .plan-hr { background: rgba(255, 255, 255, 0.16); } .plan.pop li svg { color: var(--brand-bright); } .plan.pop .btn-ghost { --bg: #fff; --fg: var(--ink); --bd: #fff; } .plan-tag { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-bright); margin-bottom: 8px; min-height: 16px; } .plan-name { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; } .plan-price { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 4px; font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 500; letter-spacing: -0.045em; } .plan-price span { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); } .plan.pop .plan-price span { color: rgba(255, 255, 255, 0.6); } .plan-orders { font-size: 14px; line-height: 20px; color: var(--ink-2); min-height: 40px; } .plan .btn { margin: 18px 0; } .plan-hr { height: 1px; background: var(--line-2); border: 0; margin-bottom: 16px; } .plan ul { display: grid; gap: 10px; font-size: 14px; line-height: 20px; color: var(--ink-2); } .plan li { display: flex; gap: 8px; align-items: flex-start; } .plan li svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); } /* ========================================================================== FAQ ========================================================================== */ .faq { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; } @media (min-width: 768px) { .faq { margin-top: 64px; } } .faq details { background: var(--card); border-radius: 14px; overflow: hidden; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; font-size: 16px; line-height: 22px; font-weight: 500; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 10px; height: 10px; flex-shrink: 0; border-right: 1.6px solid var(--ink-2); border-bottom: 1.6px solid var(--ink-2); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.24s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq .a { padding: 0 20px 18px; font-size: 14px; line-height: 21px; color: var(--ink-2); } .faq .a a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; } .faq .a code { font-family: var(--font-mono); font-size: 0.9em; background: #fff; padding: 1px 5px; border-radius: 4px; } /* ========================================================================== CTA + FOOTER ========================================================================== */ .cta { background: var(--forest); color: #fff; text-align: center; } .cta h2 { color: #fff; } .cta p { color: rgba(255, 255, 255, 0.7); max-width: 460px; margin: 14px auto 0; font-size: 16px; line-height: 22px; } .cta .hero-cta { margin-top: 26px; } .cta .btn-primary { --bg: var(--brand-bright); --fg: #0a2a10; } .cta .btn-primary:hover { --bg: #fff; --fg: var(--forest); } .cta .btn-ghost { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, 0.3); } .cta .btn-ghost:hover { --bd: rgba(255, 255, 255, 0.6); } .cta .hero-note { color: rgba(255, 255, 255, 0.55); } .cta .hero-note svg { color: var(--brand-bright); } .foot { border-top: 1px solid var(--line); } .foot-grid { display: flex; flex-direction: column; gap: 40px; } @media (min-width: 1024px) { .foot-grid { flex-direction: row; align-items: flex-start; } } .foot-brand { max-width: 384px; } .foot-brand p { margin-top: 14px; font-size: 14px; line-height: 20px; color: var(--ink-2); } .foot-cols { display: flex; flex-wrap: wrap; gap: 40px; flex: 1; } @media (min-width: 640px) { .foot-cols { flex-wrap: nowrap; } } @media (min-width: 1024px) { .foot-cols { justify-content: flex-end; } } .foot h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; } .foot ul { display: grid; gap: 11px; } .foot li a { font-size: 14px; color: var(--ink-2); } .foot li a:hover { color: var(--ink); } .foot-bar { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; font-size: 13px; color: var(--ink-3); } .foot-bar nav { display: flex; gap: 18px; flex-wrap: wrap; } /* ========================================================================== REVEAL Below the fold: whileInView, once, -100px margin. y+20 → 0 over 500ms. Hero: no scroll trigger, a fixed delay ladder on mount. ========================================================================== */ .rv { opacity: 0; transform: translateY(20px); } .rv-sm { transform: translateY(8px); } .rv-shot { transform: translateY(40px) scale(0.98); } .rv.in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0ms); } .no-js .rv { opacity: 1; transform: none; } /* Hero ladder. This runs on a CSS animation, NOT on the JS reveal, so it starts at first paint instead of waiting for app.js. The reference can afford a 0.4s delay before its headline because its hero sits on a dark image that fades in immediately; ours is white, so any delay is a blank screen. Measured before this change: h1 still at opacity 0 with load at 1512ms, i.e. roughly 2.4s before the headline was readable. Timings compressed to match. */ .hero .rv { animation: rise 500ms var(--ease) both; animation-delay: var(--d, 0ms); transition: none; } .hero .rv.in { transition: none; } .hero-badge { --d: 0ms; } .hero-shot { --d: 50ms; } .hero h1 { --d: 80ms; } .hero .lede { --d: 160ms; } .hero-cta { --d: 220ms; } .hero-note { --d: 280ms; } @keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .hero .rv-shot { animation-name: rise-shot; } @keyframes rise-shot { from { opacity: 0; transform: translateY(40px) scale(0.98); } to { opacity: 1; transform: none; } } .hero .rv-sm { animation-name: rise-sm; } @keyframes rise-sm { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .rv { opacity: 1; transform: none; } .hero .rv { animation: none; } .marquee-track { animation: none; } } /* ========================================================================== MOBILE TOUCH TARGETS Footer and brand links measure 17-30px tall by default, under the 44px minimum, so give them real vertical padding on touch widths. ========================================================================== */ @media (max-width: 767px) { .foot li a, .foot-bar nav a { display: inline-block; padding-block: 12px; min-height: 44px; line-height: 20px; } .foot ul { gap: 0; } .brand { padding-block: 7px; } .faq summary { padding-block: 18px; } } /* Below the layout breakpoint the rows stack, so a card that was 45-58% wide becomes full width while its mock keeps its natural width. Centre the narrow mocks rather than leave a void on one side. Measured at a 952px window: the 340px widget sat left in an 889px card. */ @media (max-width: 1023px) { .fc .fig > .sf, .fc .fig > .pol { margin-inline: auto; } .fc .fig > .sf { max-width: 420px !important; } } /* Page-preview screenshot of a custom loyalty page. Rendered at a true 1280px desktop viewport and shown at the container's full width, so the page's own type stays legible instead of being scaled to a third. */ .shot { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .shot img { width: 100%; height: auto; display: block; } /* why-Loyalino comparison strip */ .why-grid { display: flex; flex-wrap: wrap; gap: 8px; } .why-grid > div { flex: 1 1 220px; min-width: 0; background: #fff; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .why-grid b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .why-grid span { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 24px; letter-spacing: -0.03em; color: var(--brand-deep); } .why-grid i { font-style: normal; font-size: 12px; line-height: 16px; color: var(--ink-3); } .plan-annual { display: inline-block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--ink-3); } .plan.pop .plan-annual { color: rgba(255, 255, 255, 0.55); }