/* ========================================================================== Zon Staff — redesign Palette kept from the live brand, backgrounds neutralised so the page reads white and premium rather than green tinted. ========================================================================== */ :root { /* ink + neutrals (cool graphite, almost no green cast) */ --ink: #0d1113; --ink-2: #3d4649; --muted: #6b7478; --muted-2: #98a1a4; --white: #ffffff; --paper: #fbfbfa; --paper-2: #f5f6f5; --line: rgba(13, 17, 19, .09); --line-2: rgba(13, 17, 19, .14); /* chrome inside a card recedes, so the card edge stays the stronger line */ --line-soft: rgba(13, 17, 19, .055); /* brand accent — used sparingly */ --accent: #0f9d6e; --accent-deep: #0a7d57; --accent-lo: #e8f6f0; --accent-lo-2: #d3ece1; /* warm secondary, keeps the page human */ --amber: #f4b740; --amber-lo: #fdf3dd; --clay: #e8734a; --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px; --sh-xs: 0 1px 2px rgba(13, 17, 19, .05); --sh-sm: 0 1px 2px rgba(13, 17, 19, .04), 0 6px 16px rgba(13, 17, 19, .05); --sh-md: 0 2px 5px rgba(13, 17, 19, .04), 0 12px 26px rgba(13, 17, 19, .06); --sh-lg: 0 3px 8px rgba(13, 17, 19, .05), 0 18px 38px rgba(13, 17, 19, .08); /* for the small cards that overlap the dashboard: darker and more offset, so they read as on top of it */ --sh-float: 0 1px 2px rgba(13, 17, 19, .04), 0 14px 32px rgba(13, 17, 19, .15); --maxw: 1200px; --gutter: 28px; --ease: cubic-bezier(.22, .68, .16, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; } /* Lenis puts .lenis on for as long as it is running, so this hands it the easing and steps the CSS one aside. Without Lenis, or with reduced motion on, the class never appears and native smooth scrolling stays as it was. Hook onto Lenis's own class, never a custom lenis- prefixed one: the library rebuilds the class list on every state change with replace(/lenis(-\w+)?/g) and will quietly strip anything of ours that starts the same way. */ html.lenis { scroll-behavior: auto; } body { margin: 0; background: var(--white); color: var(--ink); font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16.5px; line-height: 1.6; font-weight: 400; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.is-locked { overflow: hidden; } /* Schibsted Grotesk has no CJK coverage. Without these the Japanese, Chinese and Korean pages fall back to a system serif and stop looking like the site. */ html[lang="ja"] body { font-family: "Schibsted Grotesk", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, ui-sans-serif, system-ui, sans-serif; } html[lang="zh-Hans"] body { font-family: "Schibsted Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; } html[lang="ko"] body { font-family: "Schibsted Grotesk", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif; } /* The home hero is the one headline with a hard line count: the stage beside it is a fixed height, so a fourth line pushes the store badges down past it. English lands on three at 66px. These three languages do not, so they get a smaller display size rather than a reworded headline. Measured, not guessed. */ html[lang="ja"] .hero-copy h1 { font-size: clamp(2.1rem, 4.05vw, 3rem); } html[lang="fr"] .hero-copy h1 { font-size: clamp(2.3rem, 4.75vw, 3.5rem); } html[lang="de"] .hero-copy h1 { font-size: clamp(2.05rem, 4.1vw, 3.05rem); } /* the tighter tracking is tuned for Latin text and reads cramped in CJK */ html[lang="ja"] body, html[lang="zh-Hans"] body, html[lang="ko"] body { letter-spacing: 0; } html[lang="ja"] h1, html[lang="ja"] h2, html[lang="zh-Hans"] h1, html[lang="zh-Hans"] h2, html[lang="ko"] h1, html[lang="ko"] h2 { letter-spacing: -.01em; line-height: 1.25; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } /* tracking is a function of size: tight at display sizes, near neutral at card sizes */ h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.06; text-wrap: balance; } p { margin: 0; } ::selection { background: var(--accent); color: #fff; } /* ---------- layout primitives ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: 1340px; } /* a tinted band earns more air than a white one, and two white sections running together should read as one stretch rather than two stamped blocks */ .section { padding: 110px 0 126px; position: relative; } .section.bg-paper { padding: 124px 0 136px; } .section:not(.bg-paper)+.section:not(.bg-paper) { padding-top: 86px; } .section-sm { padding: 84px 0; } .section-tight { padding-top: 0; } .bg-paper { background: var(--paper); } .bg-paper-2 { background: var(--paper-2); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } /* ---------- type helpers ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--white); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); box-shadow: var(--sh-xs); } .eyebrow .spark { color: var(--accent); display: grid; place-items: center; } .eyebrow .spark svg { width: 13px; height: 13px; } .h-display { font-size: clamp(2.6rem, 5.6vw, 4.15rem); letter-spacing: -.044em; } .h-section { font-size: clamp(1.85rem, 3.1vw, 2.5rem); letter-spacing: -.028em; } /* the three moments that carry the page get to speak louder than the other seven */ .h-section.lead { font-size: clamp(2.3rem, 4.4vw, 3.35rem); font-weight: 640; letter-spacing: -.036em; } .h-card { font-size: 1.2rem; letter-spacing: -.014em; font-weight: 600; } .lede { color: var(--muted); font-size: 1.055rem; line-height: 1.62; max-width: 41rem; font-weight: 400; } .accent-ink { color: var(--accent); } .section-head { max-width: 660px; } .section-head.center { margin-inline: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 22px; } .section-head .lede { margin-top: 20px; } .section-head.center .lede { margin-inline: auto; } /* ---------- buttons ---------- */ .btn { --bg: var(--ink); --fg: #fff; --bd: var(--ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border: 1px solid var(--bd); border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font-size: 14.6px; font-weight: 600; letter-spacing: -.012em; cursor: pointer; white-space: nowrap; transition: transform .34s var(--ease), background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), box-shadow .34s var(--ease); } .btn svg { width: 15px; height: 15px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { --bg: var(--accent); --bd: var(--accent); box-shadow: 0 8px 20px rgba(15, 157, 110, .24); } .btn-primary:hover { --bg: var(--accent-deep); --bd: var(--accent-deep); box-shadow: 0 14px 30px rgba(15, 157, 110, .3); } .btn-ink:hover { --bg: #000; --bd: #000; } .btn-ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); } .btn-ghost:hover { --bg: var(--white); --bd: var(--ink); box-shadow: var(--sh-sm); } .btn-lg { height: 52px; padding: 0 24px; font-size: 15.4px; } .btn-sm { height: 38px; padding: 0 16px; font-size: 13.6px; } .btn-block { width: 100%; } .btn .arr { transition: transform .38s var(--ease); } .btn:hover .arr { transform: translateX(3px); } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 80; height: var(--nav-h); display: flex; align-items: center; transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease); border-bottom: 1px solid transparent; } .nav.stuck { background: rgba(255, 255, 255, .94); border-bottom-color: var(--line); box-shadow: 0 1px 30px rgba(13, 17, 19, .04); } .nav .wrap { display: flex; align-items: center; gap: 26px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.03em; font-size: 17.5px; } .brand .mark { width: 31px; height: 31px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; background: #000; box-shadow: 0 3px 10px rgba(13, 17, 19, .22); } .brand .mark img { display: block; width: 88%; height: 88%; object-fit: contain; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 14px; } .nav-links a { position: relative; padding: 8px 13px; border-radius: var(--r-pill); font-size: 14.6px; font-weight: 500; color: var(--ink-2); transition: color .24s var(--ease), background .24s var(--ease); } .nav-links a:hover { color: var(--ink); background: var(--paper-2); } .nav-links .caret { width: 11px; height: 11px; opacity: .5; margin-left: 4px; display: inline-block; vertical-align: -1px; } .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nav-signin { font-size: 14.6px; font-weight: 550; padding: 8px 12px; color: var(--ink-2); transition: color .24s var(--ease); } .nav-signin:hover { color: var(--ink); } .nav-toggle { display: none; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); align-items: center; justify-content: center; cursor: pointer; } .nav-toggle span { display: block; width: 17px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; } .nav-toggle span+span { margin-top: 4.4px; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* The closed state has to hide from hit testing, not just from sight. Below 860px the responsive block flips this to display:flex and leaves it that way, so a drawer held shut on opacity alone stays a full viewport sheet at z-index 79 that eats every tap on the page behind it. visibility and pointer-events are what actually take it out, exactly as .mega does in pages.css. */ .nav-drawer { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 79; background: rgba(255, 255, 255, .98); backdrop-filter: blur(14px); padding: 26px var(--gutter) 40px; display: none; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; } .nav-drawer.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .nav-drawer a { padding: 14px 4px; font-size: 20px; font-weight: 550; letter-spacing: -.03em; border-bottom: 1px solid var(--line); } .nav-drawer .drawer-cta { margin-top: 22px; display: grid; gap: 10px; } .nav-drawer .drawer-cta a { border: 0; } /* ---------- hero ---------- */ .hero { position: relative; padding: calc(var(--nav-h) + 34px) 0 0; overflow: hidden; } .hero-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(13, 17, 19, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 17, 19, .045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(115% 82% at 62% 22%, #000 8%, transparent 72%); -webkit-mask-image: radial-gradient(115% 82% at 62% 22%, #000 8%, transparent 72%); } .hero-glow { position: absolute; z-index: 0; pointer-events: none; width: 760px; height: 560px; right: -120px; top: -140px; background: radial-gradient(closest-side, rgba(15, 157, 110, .14), transparent 72%); } .hero-glow.two { left: -220px; top: 180px; right: auto; width: 620px; height: 520px; background: radial-gradient(closest-side, rgba(244, 183, 64, .13), transparent 70%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 38px; align-items: start; } .hero-copy { max-width: 566px; padding: 30px 0 60px; } .hero-copy h1 { margin-top: 24px; } .hero-copy .lede { margin-top: 24px; max-width: 46ch; font-size: 1.18rem; line-height: 1.55; color: var(--ink-2); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .hero-note { margin-top: 18px; font-size: 13.6px; color: var(--muted); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .hero-note .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); } .hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; } .avatars { display: flex; } .avatars .av { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #fff; margin-left: -11px; display: grid; place-items: center; font-size: 12.5px; font-weight: 650; color: #fff; letter-spacing: -.02em; box-shadow: 0 2px 7px rgba(13, 17, 19, .13); } .avatars .av:first-child { margin-left: 0; } .stars { display: flex; gap: 2.5px; } .stars svg { width: 14px; height: 14px; color: var(--amber); } .proof-text { font-size: 13.4px; color: var(--muted); line-height: 1.35; } .proof-text b { color: var(--ink); font-weight: 650; } /* hero product panel */ /* The dashboard is absolutely placed so it can be taller than the hero and get clipped by the section edge, the way the reference comp does it. */ .hero-stage { position: relative; min-height: 600px; display: block; } .hero-stage .app { position: absolute; top: 0; left: 0; width: min(920px, 126%); } .hero-float { position: absolute; z-index: 3; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-float); padding: 14px 16px; } .hero-float.payroll { left: -58px; top: 498px; width: 206px; padding: 14px 16px 16px; } .mini-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); } .mini-value { font-size: 23px; font-weight: 650; letter-spacing: -.026em; margin-top: 3px; } .mini-sub { font-size: 11.8px; color: var(--muted); margin-top: 2px; } .spark-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 11px; } .spark-bars i { flex: 1; background: var(--accent-lo-2); border-radius: 3px; display: block; transform-origin: bottom; } .spark-bars i.on { background: var(--accent); } /* ---------- product mockup (shared) ---------- */ .app { border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); overflow: hidden; display: grid; grid-template-columns: 186px minmax(0, 1fr); } .app-side { background: var(--paper); border-right: 1px solid var(--line); padding: 15px 12px; display: flex; flex-direction: column; gap: 3px; } .app-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 15px; font-size: 13.5px; font-weight: 650; letter-spacing: -.03em; } .app-brand .mark { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); display: grid; place-items: center; } .app-brand .mark svg { width: 12px; height: 12px; } .app-nav { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px; font-size: 12.6px; font-weight: 500; color: var(--muted); } .app-nav svg { width: 14px; height: 14px; opacity: .65; flex: none; } .app-nav.active { background: var(--ink); color: #fff; font-weight: 600; } .app-nav.active svg { opacity: 1; } .app-main { padding: 16px 18px 20px; min-width: 0; background: #fff; } .app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .app-hi { font-size: 15px; font-weight: 650; letter-spacing: -.03em; } .app-hi span { display: block; font-size: 11.5px; font-weight: 450; color: var(--muted); letter-spacing: 0; margin-top: 1px; } .app-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px; font-size: 11.8px; color: var(--muted-2); background: var(--paper); } .app-search svg { width: 12px; height: 12px; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 11px 12px 12px; background: #fff; } .stat .k { font-size: 10.3px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); } .stat .v { font-size: 21px; font-weight: 650; letter-spacing: -.03em; margin-top: 5px; font-variant-numeric: tabular-nums; } .stat .d { display: inline-flex; align-items: center; gap: 4px; font-size: 10.8px; font-weight: 600; margin-top: 5px; color: var(--accent); } .stat .d.warn { color: var(--clay); } .stat .d svg { width: 10px; height: 10px; } .panel-row { display: grid; grid-template-columns: 1.12fr 1fr; gap: 10px; margin-top: 10px; } .panel { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 12px; background: #fff; min-width: 0; } .panel-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; } .panel-h b { font-size: 12.2px; font-weight: 650; letter-spacing: -.02em; } .panel-h em { font-style: normal; font-size: 10.6px; color: var(--muted-2); font-weight: 550; } /* calendar */ .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal span { font-size: 9.4px; text-align: center; color: var(--muted-2); font-weight: 600; padding-bottom: 3px; } .cal i { aspect-ratio: 1; display: grid; place-items: center; font-size: 10.2px; font-style: normal; color: var(--ink-2); border-radius: 6px; font-variant-numeric: tabular-nums; } .cal i.soft { background: var(--accent-lo); color: var(--accent-deep); font-weight: 600; } .cal i.full { background: var(--accent); color: #fff; font-weight: 650; } .cal i.dim { color: var(--muted-2); opacity: .55; } /* bar chart */ .bars { display: flex; align-items: flex-end; gap: 6px; height: 78px; } .bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--accent-lo-2); display: block; } .bars i.on { background: var(--accent); } .bars-x { display: flex; gap: 6px; margin-top: 6px; } .bars-x span { flex: 1; text-align: center; font-size: 9px; color: var(--muted-2); font-weight: 600; } /* people rows */ .rows { display: flex; flex-direction: column; gap: 8px; } .row { display: flex; align-items: center; gap: 9px; } .row .ava { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-size: 9.6px; font-weight: 650; color: #fff; flex: none; } .row .who { min-width: 0; flex: 1; } .row .who b { display: block; font-size: 11.6px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .who em { font-style: normal; font-size: 10.2px; color: var(--muted-2); } .pill { font-size: 9.6px; font-weight: 650; padding: 3px 8px; border-radius: var(--r-pill); background: var(--accent-lo); color: var(--accent-deep); flex: none; letter-spacing: .01em; } .pill.amber { background: var(--amber-lo); color: #8a6412; } .pill.grey { background: var(--paper-2); color: var(--muted); } /* progress */ .meter { height: 5px; border-radius: 4px; background: var(--paper-2); overflow: hidden; } .meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .line-chart { width: 100%; height: auto; } /* ---------- logo marquee ---------- */ .marquee-wrap { position: relative; overflow: hidden; } .marquee-wrap::before, .marquee-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 130px; z-index: 2; pointer-events: none; } .marquee-wrap::before { left: 0; background: linear-gradient(to right, var(--white), transparent); } .marquee-wrap::after { right: 0; background: linear-gradient(to left, var(--white), transparent); } .marquee { display: flex; width: max-content; animation: slide 38s linear infinite; } .marquee.paused { animation-play-state: paused; } .marquee-wrap:hover .marquee { animation-play-state: paused; } .marquee-set { display: flex; align-items: center; gap: 70px; padding-right: 70px; } .logo-txt { font-size: 23px; font-weight: 650; letter-spacing: -.045em; color: var(--muted-2); white-space: nowrap; transition: color .3s var(--ease); } .marquee-set:hover .logo-txt { color: var(--muted-2); } .logo-txt:hover { color: var(--ink); } @keyframes slide { to { transform: translateX(-50%); } } .trust-line { text-align: center; font-size: 13.4px; color: var(--muted); font-weight: 550; margin-bottom: 34px; } /* ---------- bento ---------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; } .card { position: relative; border: 1px solid var(--line); border-bottom-color: var(--line-2); border-radius: 18px; background: #fff; overflow: hidden; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-2); } .card-pad { padding: 26px 26px 0; } .card-pad-full { padding: 26px; } .card p { color: var(--muted); font-size: 14.4px; margin-top: 9px; line-height: 1.56; } .card-ico { width: 38px; height: 38px; border-radius: 12px 12px 12px 4px; display: grid; place-items: center; margin-bottom: 15px; background: var(--accent-lo); color: var(--accent-deep); } .card-ico svg { width: 18px; height: 18px; } .card-ico.amber { background: var(--amber-lo); color: #a8760a; } .card-ico.ink { background: var(--paper-2); color: var(--ink); } .card-visual { margin-top: 22px; padding: 0 26px 26px; } .card-visual.bleed { padding: 0 26px; margin-bottom: -14px; } .card-visual.bleed-b { padding: 0 26px; margin-bottom: -14px; } .c-4 { grid-column: span 4; } .c-3 { grid-column: span 3; } .c-2 { grid-column: span 2; } .c-6 { grid-column: span 6; } .card-split { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: 8px; } .card-split .card-pad-full { padding: 34px 8px 34px 34px; } .card-split p { max-width: 44ch; } .card-visual.split-visual { margin: 0; padding: 26px 26px 26px 0; } .card-split .line-chart { height: 150px; } @media (max-width:960px) { .card-split { grid-template-columns: minmax(0, 1fr); } .card-split .card-pad-full { padding: 26px 26px 0; } .card-visual.split-visual { padding: 22px 26px 26px; } } /* selfie attendance vector tiles */ .selfie-row { display: flex; gap: 9px; margin-top: 22px; } .selfie { position: relative; flex: 1; margin: 0; aspect-ratio: 1/1.08; border-radius: 15px; background: linear-gradient(155deg, var(--tint1, #f2f4f3), var(--tint2, #e4e8e6)); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; overflow: hidden; } .selfie .face { width: 44%; height: auto; overflow: visible; fill: none; stroke: rgba(13, 17, 19, .42); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .selfie figcaption { font-size: 10px; font-weight: 650; letter-spacing: .03em; color: rgba(13, 17, 19, .5); font-variant-numeric: tabular-nums; } .selfie .sf-check { position: absolute; top: 8px; right: 8px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(15, 157, 110, .35); } .selfie .sf-check svg { width: 9px; height: 9px; color: #fff; } .selfie.next { background: var(--paper-2); border-style: dashed; border-color: var(--line-2); } .selfie.next .face { stroke: var(--muted-2); } /* the illustrated avatars are filled, not stroked, so they opt out of the glyph rule above and run bigger, closer to a real clock in photo */ .selfie .face.av { width: 68%; stroke: none; } /* mini mock inside cards */ .mock { border: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0; background: #fff; padding: 13px; box-shadow: 0 -1px 0 rgba(13, 17, 19, .02); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .mock::-webkit-scrollbar { display: none; } .tbl { min-width: max-content; } .mock.rounded { border-radius: var(--r-sm); } .tbl { width: 100%; border-collapse: collapse; font-size: 11.4px; } .tbl th { text-align: left; font-size: 9.7px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); font-weight: 650; padding: 0 8px 8px 0; } .tbl td { padding: 7px 8px 7px 0; border-top: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; } .tbl td:first-child { font-weight: 600; color: var(--ink); } /* ---------- devices / apps ---------- */ .apps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .store-btn { display: inline-flex; align-items: center; gap: 11px; height: 56px; padding: 0 20px 0 17px; border: 1px solid var(--line-2); border-radius: 15px; background: #fff; transition: transform .34s var(--ease), box-shadow .34s var(--ease), border-color .3s var(--ease); } .store-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: var(--ink); } .store-btn svg { width: 24px; height: 24px; flex: none; } .store-btn span { display: block; font-size: 10.4px; color: var(--muted); letter-spacing: .03em; line-height: 1.2; } .store-btn b { display: block; font-size: 14.6px; font-weight: 650; letter-spacing: -.028em; line-height: 1.25; } .device-stage { position: relative; width: min(100%, 524px); margin-inline: auto; display: flex; justify-content: center; align-items: flex-end; min-height: 470px; } .phone { width: min(264px, 54%); border-radius: 38px; background: var(--ink); padding: 9px; box-shadow: var(--sh-lg); position: relative; z-index: 2; } .phone-screen { border-radius: 30px; background: #fff; overflow: hidden; } .phone-notch { position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: 78px; height: 20px; border-radius: var(--r-pill); background: var(--ink); z-index: 3; } .ph-top { padding: 34px 16px 12px; background: var(--paper); border-bottom: 1px solid var(--line); } .ph-hello { font-size: 11px; color: var(--muted); } .ph-name { font-size: 16px; font-weight: 650; letter-spacing: -.035em; margin-top: 1px; } .ph-body { padding: 13px 14px 20px; display: flex; flex-direction: column; gap: 9px; } .ph-card { border: 1px solid var(--line-soft); border-radius: 13px; padding: 11px 12px; } .ph-clock { background: var(--ink); color: #fff; border-radius: 15px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ph-clock .t { font-size: 22px; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .ph-clock .s { font-size: 10.4px; color: rgba(255, 255, 255, .6); margin-top: 1px; } .ph-clock .go { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; } .ph-clock .go svg { width: 17px; height: 17px; color: #fff; } /* the phone mock keeps its own width while the page narrows, so on the smallest screens the clock row runs past the handset edge */ @media (max-width:400px) { .ph-clock { padding: 12px; gap: 8px; } .ph-clock .t { font-size: 19px; } .ph-clock .go { width: 38px; height: 38px; } .ph-clock .go svg { width: 15px; height: 15px; } .row .who b { font-size: 11px; letter-spacing: -.02em; } } .pos-card { position: absolute; z-index: 1; right: 0; bottom: 52px; width: min(298px, 58%); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); padding: 16px; } .pos-card::after { content: "Shopify POS"; position: absolute; top: -11px; left: 16px; font-size: 9.6px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 9px; border-radius: var(--r-pill); } .web-card { position: absolute; z-index: 1; left: 0; top: 8px; width: min(248px, 48%); border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lg); padding: 15px; } /* ---------- tabs feature block ---------- */ .tabs-block { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; } .tabs-block.flip .tabs-visual { order: -1; } .tab-list { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; } .tab-btn { position: relative; text-align: left; cursor: pointer; border: 0; background: transparent; padding: 15px 16px 15px 20px; border-radius: var(--r-sm); transition: background .3s var(--ease); } .tab-btn::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--line-2); transition: background .3s var(--ease), transform .4s var(--ease); } .tab-btn b { display: block; font-size: 15.2px; font-weight: 600; letter-spacing: -.028em; transition: color .3s var(--ease); } .tab-btn span { display: block; font-size: 13.6px; color: var(--muted); line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease); } .tab-btn:hover { background: var(--paper); } .tab-btn.on { background: var(--paper); } .tab-btn.on::before { background: var(--accent); } .tab-btn.on span { max-height: 80px; opacity: 1; margin-top: 5px; } .tabs-visual { position: relative; min-height: 400px; } .tab-pane { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.985); pointer-events: none; transition: opacity .55s var(--ease-out), transform .6s var(--ease-out); } .tab-pane.on { opacity: 1; transform: none; pointer-events: auto; position: relative; } /* ---------- integrations ---------- */ .int-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; margin-top: 48px; max-width: 880px; margin-inline: auto; } .int-tile { aspect-ratio: 1/.92; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; } .int-tile:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--line-2); } .int-tile svg { width: 26px; height: 26px; color: var(--ink-2); transition: color .3s var(--ease); } .int-tile:hover svg { color: var(--accent); } .int-tile b { font-size: 11.2px; font-weight: 600; color: var(--muted); letter-spacing: -.01em; } /* ---------- small feature row ---------- */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; } .trio-item .card-ico { margin-bottom: 18px; } .trio-item h3 { font-size: 1rem; letter-spacing: -.008em; } /* the trio icons drop their plate entirely, so not every icon on the site is a tinted squircle */ .trio-item .card-ico { background: none; width: auto; height: auto; margin-bottom: 13px; } .trio-item .card-ico svg { width: 23px; height: 23px; color: var(--accent-deep); } .trio-item .card-ico.amber svg { color: #a8760a; } .trio-item .card-ico.ink svg { color: var(--ink); } .trio-item p { color: var(--muted); font-size: 14.3px; margin-top: 8px; line-height: 1.58; } /* ---------- pricing ---------- One bordered table rather than four floating cards. The 1px grid gap lets the panel background show through as a divider, so the lines stay correct however the columns wrap on the way down to a phone. */ .price-toggle { display: inline-flex; padding: 4px; gap: 2px; margin-top: 26px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--white); } .price-toggle button { border: 0; background: transparent; cursor: pointer; padding: 8px 18px; border-radius: var(--r-pill); font-size: 13.4px; font-weight: 600; color: var(--muted); transition: background .3s var(--ease), color .3s var(--ease); } .price-toggle button.on { background: var(--ink); color: #fff; } .price-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 52px; background: var(--line); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--sh-sm); } .plan { position: relative; background: #fff; padding: 36px 26px 32px; display: flex; flex-direction: column; transition: background .4s var(--ease); } .plan:not(.featured):hover { background: var(--paper); } .plan.featured { background: var(--ink); color: #fff; } .plan.featured::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); } .plan.featured .plan-name, .plan.featured .plan-amt { color: #fff; } .plan.featured .plan-desc, .plan.featured .plan-per, .plan.featured .plan-extra { color: rgba(255, 255, 255, .62); } .plan.featured .plan-feats li { color: rgba(255, 255, 255, .84); } .plan.featured .plan-feats svg { color: var(--accent); } .plan.featured hr { background: rgba(255, 255, 255, .14); } .plan.featured .btn { --bg: #fff; --fg: var(--ink); --bd: #fff; box-shadow: none; } .plan.featured .btn:hover { --bg: var(--accent); --fg: #fff; --bd: var(--accent); } /* pinned to the corner rather than sitting in the flow, so the plan names on all four columns still line up with each other */ .plan-tag { position: absolute; top: 26px; right: 22px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill); background: var(--accent); color: #fff; } .plan-name { font-size: 14px; font-weight: 650; letter-spacing: .01em; color: var(--ink-2); } .plan-desc { font-size: 13px; color: var(--muted); margin-top: 7px; min-height: 38px; line-height: 1.45; } .plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 20px; } .plan-amt { font-size: 38px; font-weight: 650; letter-spacing: -.035em; line-height: 1; } .plan-per { font-size: 13px; color: var(--muted); font-weight: 500; } .plan-extra { font-size: 11.8px; color: var(--muted); margin-top: 7px; min-height: 17px; } .plan hr { border: 0; height: 1px; background: var(--line); margin: 22px 0; } .plan .btn { margin-top: 2px; } .plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .plan-feats li { display: flex; gap: 9px; font-size: 13.4px; color: var(--ink-2); line-height: 1.45; } .plan-feats svg { width: 14px; height: 14px; color: var(--accent); flex: none; margin-top: 3px; } .plan-feats+.btn { margin-top: 26px; } .price-foot { margin-top: 26px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 30px; font-size: 13.2px; color: var(--muted); } .price-foot span { display: inline-flex; align-items: center; gap: 8px; } .price-foot svg { width: 13px; height: 13px; color: var(--accent); flex: none; } /* ---------- reviews ---------- A rating band across the top, then the nine listing reviews drifting past in two rows. Each row prints its set twice and travels exactly half its width, which is why the cards carry a right margin instead of the row carrying a gap: a gap would leave half a space unaccounted for at the hand off. */ .score-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 32px; margin-top: 44px; padding: 22px 26px; border: 1px solid var(--line); border-bottom-color: var(--line-2); border-radius: 20px; background: #fff; box-shadow: var(--sh-xs); } .sb-rate { display: flex; align-items: center; gap: 15px; } .sb-num { font-size: 46px; font-weight: 650; letter-spacing: -.04em; line-height: 1; } .sb-of em { display: block; font-style: normal; font-size: 12.4px; color: var(--muted); margin-top: 6px; } .sb-of .stars svg { width: 15px; height: 15px; } .sb-bar-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 12.6px; color: var(--muted); } .sb-bar-h b { color: var(--ink); font-weight: 650; } .sb-track { height: 6px; border-radius: 4px; background: var(--paper-2); margin-top: 10px; overflow: hidden; } .sb-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .sb-count { display: flex; align-items: center; gap: 11px; padding-left: 32px; border-left: 1px solid var(--line); } .sb-count b { font-size: 27px; font-weight: 650; letter-spacing: -.032em; line-height: 1; } .sb-count span { font-size: 11.6px; color: var(--muted); line-height: 1.3; } .rev-marquee { position: relative; margin-top: 32px; overflow: hidden; display: flex; flex-direction: column; gap: 16px; mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); } .rev-track { display: flex; width: max-content; animation: slide 76s linear infinite; } .rev-track.alt { animation-duration: 58s; animation-direction: reverse; animation-delay: -19s; } .rev-marquee:hover .rev-track, .rev-marquee.paused .rev-track { animation-play-state: paused; } .rev-cols { columns: 3; column-gap: 16px; margin-top: 52px; } .rev-cols-2 { columns: 2; } .rev { break-inside: avoid; margin-bottom: 16px; display: flex; flex-direction: column; border: 1px solid var(--line); border-bottom-color: var(--line-2); border-radius: 18px; background: var(--paper); padding: 24px 24px 20px; transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-out); } .rev:hover { background: #fff; border-color: var(--line-2); box-shadow: var(--sh-md); transform: translateY(-3px); } .rev .stars { margin-bottom: 13px; } .rev p { flex: 1; font-size: 14.4px; line-height: 1.6; color: var(--ink-2); letter-spacing: -.008em; } .rev-who { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .rev-who .ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 11.6px; font-weight: 650; color: #fff; flex: none; } .rev-who b { display: block; font-size: 13.2px; font-weight: 600; letter-spacing: -.018em; } .rev-who em { font-style: normal; font-size: 11.8px; color: var(--muted-2); } /* inside a drifting row the cards are fixed width and share one row height */ .rev-track .rev { width: 356px; flex: none; margin: 0 16px 0 0; } /* ---------- faq ---------- */ .faq-list { max-width: 880px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 10px; } .faq-item { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); } .faq-item::before { content: ''; position: absolute; left: 0; top: 15px; bottom: 15px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); } .faq-item.open { border-color: var(--line-2); box-shadow: var(--sh-sm); } .faq-item.open::before { transform: scaleY(1); } .faq-q { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; background: transparent; border: 0; cursor: pointer; text-align: left; padding: 19px 22px; font-size: 16px; font-weight: 600; letter-spacing: -.024em; transition: color .3s var(--ease); } .faq-q:hover { color: var(--accent-deep); } .faq-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; margin-top: -1px; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease); } .faq-ic svg { width: 12px; height: 12px; transition: color .3s; } .faq-item.open .faq-ic { background: var(--ink); border-color: var(--ink); transform: rotate(45deg); } .faq-item.open .faq-ic svg { color: #fff; } .faq-a { overflow: hidden; height: 0; transition: height .45s var(--ease); } .faq-a>div { padding: 0 58px 22px 22px; color: var(--muted); font-size: 14.6px; line-height: 1.65; } .faq-foot { max-width: 880px; margin: 32px auto 0; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; } .faq-foot p { color: var(--muted); font-size: 14.6px; } /* ---------- final cta ---------- One gradient panel, everything centred. The dark corner sits top left and the brand green burns in from the right, which is what stops a single flat green fill reading like a button blown up to 1100px. */ .cta-panel { position: relative; overflow: hidden; border-radius: 34px; padding: 100px 60px 104px; text-align: center; color: #fff; background: radial-gradient(88% 116% at 99% 50%, rgba(31, 222, 155, .72), transparent 64%), linear-gradient(116deg, #03201a 0%, #054634 38%, #0a8862 72%, #10a273 100%); } .cta-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; font-size: 11.8px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--r-pill); padding: 6px 15px; } .cta-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #7ff0c2; flex: none; } .cta-panel h2 { max-width: 25ch; margin-inline: auto; } .cta-panel p { color: rgba(255, 255, 255, .76); max-width: 54ch; margin: 20px auto 0; font-size: 1.06rem; } .cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; } .cta-panel .btn-ghost { --fg: #fff; --bd: rgba(255, 255, 255, .28); } .cta-panel .btn-ghost:hover { --bg: rgba(255, 255, 255, .1); --bd: rgba(255, 255, 255, .55); box-shadow: none; } .cta-panel .cta-mini { margin-top: 26px; max-width: none; font-size: 13px; color: rgba(255, 255, 255, .55); } /* ---------- footer ---------- A white card on the paper band, so the closing gradient and the footer read as two panels rather than one long tail. Column headings are dark and sentence case here, not the uppercase grey used inside the page. */ .foot { background: var(--paper); padding: 26px 0 30px; } .foot-panel { background: #fff; border: 1px solid var(--line); border-radius: 34px; padding: 52px 52px 32px; } .foot-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; } .foot-head .brand { font-size: 19px; } .foot-tag { color: var(--muted); font-size: 14.6px; } .foot-rule { height: 1px; background: var(--line); border: 0; margin: 0; } .foot-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 40px; padding: 36px 0 38px; } .foot-col h4 { font-size: 15px; font-weight: 650; letter-spacing: -.022em; color: var(--ink); } .foot-col ul { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .foot-col a { font-size: 14.2px; color: var(--ink-2); transition: color .25s var(--ease); } .foot-col a:hover { color: var(--accent-deep); } .foot-contact { display: flex; flex-direction: column; align-items: flex-start; } .cline { display: flex; align-items: center; gap: 12px; margin-top: 13px; font-size: 14.2px; color: var(--ink-2); transition: color .25s var(--ease); } .cline:first-of-type { margin-top: 19px; } a.cline:hover { color: var(--accent-deep); } .ci { width: 37px; height: 37px; border-radius: 11px; flex: none; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-xs); display: grid; place-items: center; color: var(--accent); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } a.cline:hover .ci { border-color: var(--accent-lo-2); box-shadow: var(--sh-sm); } .ci svg { width: 16px; height: 16px; } .foot-side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; } /* language switcher.
so it works with the JS switched off; main.js only adds closing on outside click and on Escape. It opens upward because it lives in the footer and there are ten of them. */ .lang { position: relative; } .lang summary { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13.4px; font-weight: 550; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .lang summary::-webkit-details-marker { display: none; } .lang summary:hover { border-color: var(--ink); box-shadow: var(--sh-sm); } .lang .gl { width: 15px; height: 15px; color: var(--accent); flex: none; } .lang .cv { width: 11px; height: 11px; opacity: .5; flex: none; transition: transform .3s var(--ease); } .lang[open] .cv { transform: rotate(180deg); } .lang-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg); display: flex; flex-direction: column; } .lang-opt { padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); } .lang-opt:hover { background: var(--paper-2); color: var(--ink); } .lang-opt.on { color: var(--ink); font-weight: 600; background: var(--accent-lo); } .foot-social { display: flex; gap: 10px; } .foot-social a { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--ink); transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), background .3s; } .foot-social a:hover { color: #fff; background: var(--ink); border-color: var(--ink); transform: translateY(-2px); } .foot-social svg { width: 16px; height: 16px; } .foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px 26px; flex-wrap: wrap; padding-top: 22px; font-size: 13px; color: var(--muted); } .foot-bar .links { display: flex; gap: 24px; flex-wrap: wrap; } .foot-bar a { transition: color .25s var(--ease); } .foot-bar a:hover { color: var(--ink); } /* ---------- cursor ---------- Kept deliberately plain: the native pointer stays exactly where it is and a single thin ring trails behind it. No blend modes, no labels, nothing that can get in the way of reading the page. */ .cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1.3px solid rgba(13, 17, 19, .28); opacity: 0; transform: translate3d(-100px, -100px, 0); transition: opacity .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); will-change: transform; } .cursor.on { opacity: 1; } .cursor.over { background: rgba(15, 157, 110, .1); border-color: rgba(15, 157, 110, .55); } @media (hover:none), (pointer:coarse) { .cursor { display: none; } } /* scroll progress */ .progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 90; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--accent); will-change: transform; } /* ---------- reveal ---------- */ .rv { opacity: 0; transform: translateY(24px); } .rv.in { opacity: 1; transform: none; transition: opacity .85s var(--ease-out), transform .95s var(--ease-out); transition-delay: var(--d, 0ms); } .rv-s { opacity: 0; transform: translateY(16px) scale(.985); } .card.rv-s, .plan.rv-s, .app.rv-s { transform: translateY(10px); } .rv-s.in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); } /* ---------- responsive ---------- */ @media (max-width:1080px) { .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0; } .hero-copy { max-width: none; padding: 0 0 46px; } .hero-stage { min-height: auto; } .hero-stage .app { position: relative; width: 100%; } .hero-float.clock, .hero-float.payroll { display: none; } .tabs-block { grid-template-columns: minmax(0, 1fr); gap: 38px; } .tabs-block.flip .tabs-visual { order: 0; } .tabs-visual { min-height: auto; } .tab-pane { position: relative; display: none; } .tab-pane.on { display: block; } .price-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rev-cols { columns: 2; } .apps-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .cta-panel { padding: 80px 44px 84px; } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } .foot-side { align-items: flex-start; } .score-band { grid-template-columns: auto minmax(0, 1fr); row-gap: 26px; } .sb-count { padding-left: 0; border-left: 0; } .sb-link { justify-self: start; } } @media (max-width:860px) { .nav-links, .nav-actions { display: none; } .nav-toggle { display: flex; } .nav-drawer { display: flex; } .c-4, .c-3, .c-2 { grid-column: span 6; } .trio { grid-template-columns: minmax(0, 1fr); gap: 34px; } .section { padding: 84px 0; } .section-sm { padding: 62px 0; } .cta-panel { padding: 66px 30px 70px; border-radius: 28px; } .foot-panel { padding: 42px 30px 24px; border-radius: 28px; } .app { grid-template-columns: minmax(0, 1fr); } .app-side { display: none; } /* inline grid-template-columns on individual mocks has to lose here */ .panel-row { grid-template-columns: minmax(0, 1fr) !important; } /* keep the hero mock from turning into a tower on small screens */ .hero-stage .panel-row:last-child { display: none; } } @media (max-width:640px) { :root { --gutter: 20px; } body { font-size: 16px; } .price-panel { grid-template-columns: minmax(0, 1fr); } .rev-cols { columns: 1; } .rev-track .rev { width: 288px; } .score-band { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; } .cta-panel { padding: 52px 22px 56px; border-radius: 24px; } .foot-panel { padding: 34px 22px 22px; border-radius: 24px; } .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 30px 0 32px; } .foot-head { padding-bottom: 26px; } .foot-bar .links { gap: 18px; } .hero { padding-top: calc(var(--nav-h) + 44px); } .stat { padding: 9px 9px 10px; } .stat .k { font-size: 8.8px; letter-spacing: .04em; } .stat .v { font-size: 17px; } .stat .d { font-size: 9.2px; } .h-display { font-size: clamp(2.35rem, 10vw, 3rem); } .device-stage { min-height: auto; flex-direction: column; gap: 20px; } .pos-card, .web-card { position: static; width: 100%; } .pos-card::after { display: none; } .btn { width: 100%; } .hero-cta, .cta-btns, .store-row { flex-direction: column; } .store-btn { width: 100%; } .faq-a>div { padding-right: 12px; } } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .rv, .rv-s { opacity: 1; transform: none; } html { scroll-behavior: auto; } }