/* KNZ public site — brand: docs/BRAND_KNZ.md (Royal Emerald & Gold; Kufam 800 / IBM Plex Sans Arabic / Manrope) */ :root { --emerald-900: #062A20; --emerald-700: #0B4434; --emerald-500: #14694E; --emerald-black: #03231A; --gold-600: #C69536; --gold-300: #F5DC96; --mist: #E3ECE7; --pearl: #F6F7F4; --bg: var(--pearl); --bg-2: #EEF3F0; --surface: #FFFFFF; --surface-2: var(--mist); --ink: var(--emerald-black); --ink-2: #2C443B; --muted: #4D6159; --line: #D6E2DB; --accent: var(--emerald-500); --accent-ink: #0F5A42; --gold-ink: #8A6516; --shadow: 0 1px 2px rgba(3, 35, 26, .06), 0 12px 32px -12px rgba(3, 35, 26, .18); --shadow-lg: 0 30px 60px -20px rgba(3, 35, 26, .35); --radius: 20px; --radius-sm: 12px; --wrap: 1180px; --gutter: 16px; --f-text: Manrope, "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; --f-head: Kufam, "IBM Plex Sans Arabic", Manrope, system-ui, sans-serif; --f-num: Manrope, system-ui, sans-serif; --light-only: block; --dark-only: none; --h-gold: var(--gold-600); --h-ul: var(--gold-300); --h-ul-op: .8; --no-ic: #B4473B; --shine: #F0CF7E; --aur-a: rgba(198,149,54,.16); --aur-b: rgba(20,105,78,.10); --aur-c: rgba(245,220,150,.20); --grain: .045; --grain-inv: 0; --chip-on-bg: var(--emerald-900); --chip-on-ink: var(--gold-300); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--emerald-black); --bg-2: #04291F; --surface: #08321F; --surface-2: #0B3A2C; --ink: #F3F6F4; --ink-2: #D6E3DC; --muted: #A9C2B6; --line: #17493A; --accent: #6FD0AA; --accent-ink: #8EDDBE; --gold-ink: var(--gold-300); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6); --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7); --light-only: none; --dark-only: block; --h-gold: var(--gold-300); --h-ul: var(--gold-600); --h-ul-op: .45; --no-ic: #F09080; --shine: #FFF4D1; --aur-a: rgba(198,149,54,.15); --aur-b: rgba(111,208,170,.10); --aur-c: rgba(20,105,78,.32); --grain: .06; --grain-inv: 1; --chip-on-bg: var(--gold-600); --chip-on-ink: var(--emerald-black); color-scheme: dark; } } :root[data-theme="dark"] { --bg: var(--emerald-black); --bg-2: #04291F; --surface: #08321F; --surface-2: #0B3A2C; --ink: #F3F6F4; --ink-2: #D6E3DC; --muted: #A9C2B6; --line: #17493A; --accent: #6FD0AA; --accent-ink: #8EDDBE; --gold-ink: var(--gold-300); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6); --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.7); --light-only: none; --dark-only: block; --h-gold: var(--gold-300); --h-ul: var(--gold-600); --h-ul-op: .45; --no-ic: #F09080; --shine: #FFF4D1; --aur-a: rgba(198,149,54,.15); --aur-b: rgba(111,208,170,.10); --aur-c: rgba(20,105,78,.32); --grain: .06; --grain-inv: 1; --chip-on-bg: var(--gold-600); --chip-on-ink: var(--emerald-black); color-scheme: dark; } /* the body fonts are self-hosted and preloaded (Manrope latin, one variable file for 400-800, and IBM Plex Sans Arabic 400; both OFL), so the first paint already uses them and the text does not re-wrap when the web fonts arrive (Lighthouse CLS); Kufam and the other Plex weights still come from Google after the first paint */ @font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/plex-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.7 var(--f-text); overflow-x: hidden; } html[data-lang="ar"] [lang="en"], html[data-lang="en"] [lang="ar"] { display: none !important; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 800; line-height: 1.25; margin: 0; letter-spacing: 0; } html[data-lang="en"] h1, html[data-lang="en"] h2 { letter-spacing: -.01em; } p { margin: 0; } .num, .price { font-family: var(--f-num); font-variant-numeric: tabular-nums; } .ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--emerald-900); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 100; } .skip:focus { top: 12px; } :focus-visible { outline: 3px solid var(--gold-600); outline-offset: 3px; border-radius: 6px; } .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ic-sm { width: 18px; height: 18px; } html[dir="rtl"] .flip { transform: scaleX(-1); } .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; } section { position: relative; } .section { padding-block: clamp(64px, 9vw, 112px); } .section-head { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; display: grid; gap: 14px; justify-items: center; } .section-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); text-wrap: balance; } .section-head p { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.12rem); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; color: var(--gold-ink); background: color-mix(in srgb, var(--gold-600) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold-600) 35%, transparent); padding: 4px 12px; border-radius: 999px; } .eyebrow .ic { width: 16px; height: 16px; } .soon { display: inline-flex; align-items: center; font: 700 .72rem var(--f-text); color: var(--gold-ink); border: 1px dashed currentColor; padding: 1px 8px; border-radius: 999px; white-space: nowrap; vertical-align: middle; } /* ---------- buttons */ .btn { --b-bg: var(--gold-600); --b-ink: var(--emerald-black); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; background: var(--b-bg); color: var(--b-ink); font: 700 1rem var(--f-text); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s; white-space: nowrap; } .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(198, 149, 54, .7); } .btn .ic { width: 20px; height: 20px; } .btn-ghost { --b-bg: transparent; --b-ink: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--surface); box-shadow: var(--shadow); } .btn-dark { --b-bg: var(--emerald-900); --b-ink: #fff; } .btn-sm { min-height: 40px; padding: 0 14px; font-size: .92rem; border-radius: 12px; } .btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.06rem; } /* ---------- header */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(3,35,26,.4); } .nav { display: flex; align-items: center; gap: 18px; min-height: 72px; } .logo { display: inline-flex; flex: none; padding: 4px 0; } .logo img { width: 128px; height: auto; } /* horizontal lockup ≥ 120 px (brand min size) */ .nav-links { display: flex; gap: 4px; margin-inline-start: 12px; } .nav-links a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 10px; } .nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); background: var(--surface-2); } .nav-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .lang-btn { font: 700 .9rem var(--f-text); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 12px; min-height: 40px; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .lang-btn:hover { background: var(--surface); } .menu-btn { display: none; background: transparent; border: 1px solid var(--line); color: var(--ink); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; place-items: center; } .mobile-nav { display: none; } @media (max-width: 1020px) { .nav-links, .nav-end .hide-md { display: none; } .menu-btn { display: grid; } .mobile-nav { display: block; position: fixed; inset: 72px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px var(--gutter) 20px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; box-shadow: var(--shadow-lg); max-height: calc(100dvh - 72px); overflow: auto; } .mobile-nav.open { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .2s; } .mobile-nav a { display: block; padding: 12px 8px; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); } .mobile-nav .btn { margin-top: 14px; width: 100%; border-bottom: 0; } } @media (max-width: 420px) { .logo img { width: 120px; } .nav-end .btn-start { display: none; } } /* ---------- hero */ .hero { overflow: hidden; padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px); isolation: isolate; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; background: radial-gradient(600px 400px at 85% 20%, color-mix(in srgb, var(--gold-300) 45%, transparent), transparent 70%), radial-gradient(700px 500px at 10% 70%, color-mix(in srgb, var(--emerald-500) 22%, transparent), transparent 70%); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 65%); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .hero-copy { display: grid; gap: 22px; justify-items: start; } .hero h1 { font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: 1.12; color: var(--ink); } .hero h1 .gold { color: var(--h-gold); position: relative; white-space: nowrap; } .hero h1 .gold::after { content: ""; position: absolute; inset-inline: 0; bottom: .02em; height: .14em; background: var(--h-ul); z-index: -1; border-radius: 4px; opacity: var(--h-ul-op); } .hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ink-2); max-width: 36em; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero-points { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0; list-style: none; color: var(--muted); font-weight: 600; font-size: .94rem; } .hero-points li { display: inline-flex; gap: 6px; align-items: center; } .hero-points .ic { width: 18px; height: 18px; color: var(--accent); stroke-width: 2.4; } /* stage with the wallet passes */ .stage { position: relative; height: 560px; display: grid; place-items: center; perspective: 1400px; } .stage .glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(198,149,54,.45), transparent 65%); filter: blur(10px); } .pass { --p-bg: var(--emerald-900); --p-bg2: var(--emerald-700); --p-ink: #fff; --p-label: var(--gold-300); --p-accent: var(--gold-600); --p-stamp-ink: var(--emerald-900); position: absolute; width: 316px; border-radius: 22px; color: var(--p-ink); overflow: hidden; background: radial-gradient(120% 80% at 100% 0%, var(--p-bg2), var(--p-bg) 60%); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.12); padding: 16px; display: grid; gap: 14px; text-align: start; } .pass::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); } .pass > * { position: relative; } .pass-front { z-index: 3; animation: float 7s ease-in-out infinite; } .pass-back1 { --p-bg: #F2E4BF; --p-bg2: var(--gold-300); --p-ink: var(--emerald-900); --p-label: #7A5A14; --p-accent: var(--emerald-900); --p-stamp-ink: var(--gold-300); transform: translate(-46%, -4%) rotate(-11deg) scale(.9); z-index: 1; opacity: .96; } .pass-back2 { --p-bg: #0F4F3B; --p-bg2: var(--emerald-500); --p-label: #CFE9DE; transform: translate(44%, 6%) rotate(9deg) scale(.88); z-index: 2; } html[dir="ltr"] .pass-back1 { transform: translate(46%, -4%) rotate(11deg) scale(.9); } html[dir="ltr"] .pass-back2 { transform: translate(-44%, 6%) rotate(-9deg) scale(.88); } @keyframes float { 0%, 100% { transform: translateY(0) rotateX(4deg) rotateY(-6deg); } 50% { transform: translateY(-12px) rotateX(2deg) rotateY(4deg); } } .pass-top { display: flex; align-items: center; gap: 10px; } .pass-logo { width: 40px; height: 40px; border-radius: 12px; background: var(--p-accent); color: var(--p-stamp-ink); display: grid; place-items: center; flex: none; } .pass-logo .ic { width: 22px; height: 22px; stroke-width: 2; } .pass-name { font: 800 1.05rem var(--f-head); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pass-field { display: grid; gap: 0; text-align: end; } .pass-field small, .pass-fields small { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--p-label); font-weight: 700; } .pass-field b { font: 800 1.5rem var(--f-num); line-height: 1.1; } .pass-strip { border-radius: 14px; padding: 14px 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 10px; } .pass-back1 .pass-strip { background: rgba(6,42,32,.06); border-color: rgba(6,42,32,.1); } .stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .stamp { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--p-ink) 40%, transparent); display: grid; place-items: center; color: color-mix(in srgb, var(--p-ink) 40%, transparent); transition: background .35s, border-color .35s, color .35s, transform .35s; } .stamp .ic { width: 55%; height: 55%; } .stamp.on { background: var(--p-accent); border: 1.5px solid var(--p-accent); color: var(--p-stamp-ink); } .stamp.pop { transform: scale(1.18); } .stamp.gift { border-style: solid; border-color: var(--p-accent); color: var(--p-accent); } .stamp.gift.on { color: var(--p-stamp-ink); } .strip-text { font-size: .8rem; font-weight: 600; opacity: .92; } .pass-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pass-fields b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pass-qr { justify-self: center; background: #fff; padding: 10px; border-radius: 12px; display: grid; gap: 4px; justify-items: center; } .pass-qr svg { width: 104px; height: 104px; } .pass-qr span { font: 600 .62rem var(--f-num); color: #44564F; letter-spacing: .12em; direction: ltr; } .toast { position: absolute; z-index: 5; display: flex; gap: 10px; align-items: center; width: 270px; padding: 10px 12px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: var(--shadow); transition: opacity .45s, transform .45s; font-size: .82rem; line-height: 1.4; } .toast .t-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--emerald-900); color: var(--gold-300); display: grid; place-items: center; flex: none; } .toast .t-icon .ic { width: 20px; height: 20px; } .toast b { display: block; font-size: .84rem; } .toast small { color: var(--muted); } .toast-a { top: -26px; inset-inline-end: -14px; } .toast-b { bottom: 46px; inset-inline-start: -6px; } .toast.hide { opacity: 0; transform: translateY(8px) scale(.98); } @media (max-width: 1020px) { .stage { height: 520px; } } @media (max-width: 860px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-copy { justify-items: center; text-align: center; } .hero-cta, .hero-points { justify-content: center; } .stage { height: 500px; margin-top: 8px; } } @media (max-width: 480px) { .stage { height: 470px; } .pass { width: 272px; padding: 14px; } .pass-back1 { transform: translate(-30%, -6%) rotate(-10deg) scale(.86); } .pass-back2 { transform: translate(30%, 6%) rotate(8deg) scale(.84); } html[dir="ltr"] .pass-back1 { transform: translate(30%, -6%) rotate(10deg) scale(.86); } html[dir="ltr"] .pass-back2 { transform: translate(-30%, 6%) rotate(-8deg) scale(.84); } .toast { width: 250px; } .toast-a { top: auto; bottom: 8px; inset-inline-end: auto; inset-inline-start: 50%; translate: 50% 0; } html[dir="ltr"] .toast-a { translate: -50% 0; } .toast-b { display: none; } .pass-qr svg { width: 88px; height: 88px; } } /* ---------- works-with strip */ .strip { border-block: 1px solid var(--line); background: var(--bg-2); } .strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; padding-block: 20px; } .strip .label { color: var(--muted); font-weight: 700; font-size: .9rem; } .chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-2); font-size: .95rem; } .chip .ic { color: var(--accent); width: 20px; height: 20px; } /* ---------- how */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; position: relative; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); position: relative; } .step-n { font: 800 .85rem var(--f-num); color: var(--gold-ink); letter-spacing: .1em; } .step h3 { font-size: 1.3rem; } .step p { color: var(--muted); } .step-art { height: 132px; border-radius: 14px; background: linear-gradient(160deg, var(--surface-2), var(--bg-2)); display: grid; place-items: center; position: relative; overflow: hidden; } .step-art .big { width: 64px; height: 64px; border-radius: 18px; background: var(--emerald-900); color: var(--gold-300); display: grid; place-items: center; box-shadow: var(--shadow); } .step-art .big .ic { width: 34px; height: 34px; } .step-art .badge { position: absolute; inset-block-end: 16px; inset-inline-end: 18px; background: var(--gold-600); color: var(--emerald-black); font: 800 .8rem var(--f-num); padding: 3px 10px; border-radius: 999px; } .step-art .ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); animation: spin 18s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } } /* ---------- features (bento) */ .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .tile { grid-column: span 2; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; box-shadow: var(--shadow); position: relative; overflow: hidden; } .tile.w3 { grid-column: span 3; } .tile.w4 { grid-column: span 4; } .tile.w6 { grid-column: 1 / -1; } .soon-tile ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px 24px; } .tile .t-ic { width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: grid; place-items: center; } .tile h3 { font-size: 1.18rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .tile p { color: var(--muted); } .tile ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .tile li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); } .tile li .ic { width: 18px; height: 18px; color: var(--accent); margin-top: 4px; stroke-width: 2.4; } .tile.dark { background: radial-gradient(120% 120% at 100% 0%, var(--emerald-700), var(--emerald-900) 60%); color: #fff; border-color: transparent; } .tile.dark p, .tile.dark li { color: #CFE0D8; } .tile.dark .t-ic { background: rgba(245,220,150,.14); color: var(--gold-300); } .tile.dark li .ic { color: var(--gold-300); } .tile.soon-tile { background: transparent; border-style: dashed; box-shadow: none; } .designer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 8px; } .designer .pass { position: relative; width: 250px; animation: none; padding: 14px; gap: 12px; box-shadow: var(--shadow-lg); } .designer .pass-qr { display: none; } .designer-ctrl { display: grid; gap: 14px; } .ctrl-label { font-weight: 700; font-size: .9rem; color: var(--ink-2); margin-bottom: 6px; } .swatches, .icons-pick { display: flex; flex-wrap: wrap; gap: 8px; } .swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; } .swatch[aria-pressed="true"], .pick[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-600); } .pick { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .pick .ic { width: 22px; height: 22px; } @media (max-width: 1020px) { .tile, .tile.w3 { grid-column: span 3; } .tile.w4, .tile.dark { grid-column: span 6; } } @media (max-width: 700px) { .bento { grid-template-columns: minmax(0, 1fr); } .tile, .tile.w3, .tile.w4, .tile.dark, .tile.w6 { grid-column: auto; } .designer { grid-template-columns: minmax(0, 1fr); justify-items: center; } .designer-ctrl { justify-items: center; text-align: center; } .swatches, .icons-pick { justify-content: center; } } /* mini receipt in the ZATCA tile */ .mini-receipt { margin-top: 10px; align-self: end; justify-self: center; width: min(220px, 100%); background: #FBFCFB; color: #03231A; border-radius: 10px 10px 0 0; padding: 14px 14px 22px; display: grid; gap: 7px; position: relative; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); -webkit-mask: radial-gradient(8px at 50% 100%, #0000 98%, #000) 50% / 16px 100%; mask: radial-gradient(8px at 50% 100%, #0000 98%, #000) 50% / 16px 100%; } .mini-receipt .l { height: 6px; border-radius: 3px; background: #DCE5E0; } .mini-receipt .l.s { width: 60%; } .mini-receipt .l.m { width: 80%; } .mini-receipt .tot { display: flex; justify-content: space-between; font: 800 .8rem var(--f-num); border-top: 1px dashed #C9D6CF; padding-top: 7px; } .mini-receipt .q { width: 64px; height: 64px; justify-self: center; } .earn-badge { justify-self: center; margin-top: -6px; background: var(--gold-600); color: #03231A; font: 800 .9rem var(--f-num); padding: 4px 12px; border-radius: 999px; box-shadow: var(--shadow); position: relative; z-index: 1; } .tile.dark { grid-template-rows: auto auto auto 1fr auto; } /* ---------- dark band (fraud) */ .band { background: radial-gradient(900px 500px at 15% 0%, #0E5440, transparent 60%), var(--emerald-900); color: #EAF2EE; overflow: hidden; } .band .section-head p { color: #BFD5CB; } .band .eyebrow { color: var(--gold-300); background: rgba(245,220,150,.08); border-color: rgba(245,220,150,.3); } .band h2, .band h3 { color: #fff; } .fraud-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .layers { display: grid; gap: 14px; } .layer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .layer .t-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(245,220,150,.12); color: var(--gold-300); display: grid; place-items: center; } .layer h3 { font-size: 1.05rem; margin-bottom: 4px; } .layer p { color: #BFD5CB; font-size: .95rem; } .verify { background: #F9FBFA; color: var(--emerald-black); border-radius: 22px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); display: grid; gap: 14px; max-width: 440px; justify-self: center; width: 100%; } .verify-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .verify-head b { font-family: var(--f-head); font-size: 1.05rem; } .verify-head .num { color: #4D6159; font-size: .82rem; } .receipt-line { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; color: #2C443B; padding-bottom: 10px; border-bottom: 1px dashed #C9D6CF; } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .checks li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .94rem; opacity: .35; transition: opacity .4s; } .checks li .dot { width: 26px; height: 26px; border-radius: 50%; background: #E3ECE7; color: #fff; display: grid; place-items: center; flex: none; transition: background .4s; } .checks li .dot .ic { width: 16px; height: 16px; stroke-width: 3; } .checks li.ok { opacity: 1; } .checks li.ok .dot { background: var(--emerald-500); } .verify-result { display: flex; align-items: center; gap: 10px; justify-content: center; background: var(--emerald-900); color: var(--gold-300); border-radius: 14px; padding: 12px; font: 800 1.05rem var(--f-head); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; } .verify-result.show { opacity: 1; transform: none; } .verify-note { font-size: .82rem; color: #4D6159; text-align: center; } @media (max-width: 860px) { .fraud-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- compare */ .compare-wrap { max-width: 920px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .compare { width: 100%; border-collapse: collapse; font-size: .97rem; } .compare th, .compare td { padding: 14px 18px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; } .compare thead th { background: var(--bg-2); font-size: .9rem; color: var(--muted); font-weight: 700; } .compare thead th.knz { background: var(--emerald-900); color: var(--gold-300); font-family: var(--f-head); font-size: 1rem; text-align: center; } .compare td.knz { background: color-mix(in srgb, var(--accent) 7%, transparent); text-align: center; width: 120px; } .compare td.other { color: var(--muted); font-size: .9rem; width: 34%; } .compare tr:last-child td { border-bottom: 0; } .yes { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--emerald-500); color: #fff; } .yes .ic { width: 18px; height: 18px; stroke-width: 3; } .no { display: inline-flex; align-items: center; gap: 6px; } .no .ic { width: 18px; height: 18px; color: var(--no-ic); stroke-width: 2.6; } @media (max-width: 640px) { .compare thead { display: none; } .compare tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; border-bottom: 1px solid var(--line); gap: 4px 12px; } .compare td { border: 0; padding: 0; } .compare td.feat { font-weight: 700; } .compare td.knz { grid-row: span 2; background: none; width: auto; align-self: center; } .compare td.other { width: auto; grid-column: 1; } .compare td.other::before { content: "غيرنا عادةً: "; font-weight: 700; font-size: .8rem; } html[data-lang="en"] .compare td.other::before { content: "Others, typically: "; } .compare td.other .no { display: inline-flex; } } /* ---------- industries */ .inds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 900px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .inds { grid-template-columns: minmax(0, 1fr); } .ind { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; } .ind .t-ic { grid-row: span 3; } } .ind { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 8px; align-content: start; transition: transform .2s, box-shadow .2s, border-color .2s; } .ind:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold-600) 50%, var(--line)); } .ind .t-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--emerald-900); color: var(--gold-300); display: grid; place-items: center; } .ind h3 { font-size: 1.08rem; } .ind p { color: var(--muted); font-size: .94rem; } .ind .idea { font-weight: 700; color: var(--gold-ink); font-size: .9rem; } /* ---------- pricing */ .billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); gap: 2px; } .billing button { font: 700 .95rem var(--f-text); border: 0; background: transparent; color: var(--ink-2); padding: 8px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; } .billing button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .billing .save { font-size: .74rem; color: var(--emerald-black); background: var(--gold-300); padding: 1px 8px; border-radius: 999px; } .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .plan { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px 24px; display: grid; gap: 16px; align-content: start; box-shadow: var(--shadow); position: relative; } .plan.featured { background: radial-gradient(120% 90% at 100% 0%, var(--emerald-700), var(--emerald-900) 60%); color: #fff; border-color: transparent; transform: translateY(-8px); box-shadow: var(--shadow-lg); } .plan.featured .plan-desc, .plan.featured li { color: #CFE0D8; } .plan.featured .per, .plan.featured .plan-name .plan-en { color: #BFD5CB; } .plan .flag { position: absolute; top: -13px; inset-inline-start: 24px; background: var(--gold-600); color: var(--emerald-black); font-weight: 800; font-size: .8rem; padding: 3px 12px; border-radius: 999px; } .plan h3 { font-size: 1.35rem; } .plan-desc { color: var(--muted); font-size: .95rem; min-height: 3.2em; } .price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .price { font-size: 2.8rem; font-weight: 800; line-height: 1; } .cur { font-weight: 700; } .per { color: var(--muted); font-size: .9rem; width: 100%; } .save-line { font-size: .86rem; font-weight: 700; color: var(--accent-ink); min-height: 1.4em; } .plan.featured .save-line { color: var(--gold-300); } .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .plan li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; color: var(--ink-2); } .plan li .ic { width: 18px; height: 18px; margin-top: 4px; color: var(--accent); stroke-width: 2.6; } .plan.featured li .ic { color: var(--gold-300); } .plan li.inherit { font-weight: 700; } .plan .btn { width: 100%; } .plan.featured .btn-ghost { --b-ink: #fff; border-color: rgba(255,255,255,.3); } .price-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 28px; } .price-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); font-size: .93rem; color: var(--ink-2); } .price-note .ic { color: var(--gold-ink); margin-top: 2px; } @media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } .plan.featured { transform: none; } } /* ---------- calculator */ .calc { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); } .calc-in { padding: 28px; display: grid; gap: 18px; } .calc-in h3 { font-size: 1.3rem; } .calc-in p { color: var(--muted); font-size: .95rem; } .field { display: grid; gap: 6px; } .field label { font-weight: 700; font-size: .92rem; display: flex; justify-content: space-between; gap: 8px; } .field output { font-family: var(--f-num); color: var(--gold-ink); } .field input[type="range"] { width: 100%; accent-color: var(--emerald-500); } .field input[type="number"], .field select { font: 600 1rem var(--f-num); min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; } .calc-out { background: radial-gradient(120% 120% at 100% 0%, var(--emerald-700), var(--emerald-900) 60%); color: #fff; padding: 28px; display: grid; gap: 14px; align-content: center; } .calc-out .big { font: 800 clamp(2rem, 4vw, 2.8rem) var(--f-num); color: var(--gold-300); line-height: 1.1; } .calc-out .row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 10px; color: #CFE0D8; font-size: .95rem; } .calc-out .row b { color: #fff; font-family: var(--f-num); } .calc-out small { color: #A9C2B6; font-size: .8rem; } @media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } } /* ---------- trust */ .trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; } .trust { padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; } .trust .t-ic { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--gold-600) 16%, transparent); color: var(--gold-ink); display: grid; place-items: center; } .trust h3 { font-size: 1.05rem; } .trust p { color: var(--muted); font-size: .94rem; } /* ---------- developers teaser */ .dev-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; } .dev-copy { display: grid; gap: 18px; justify-items: start; } .dev-copy h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); text-wrap: balance; } .dev-copy p { color: #BFD5CB; } .dev-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .dev-list li { display: flex; gap: 10px; align-items: center; color: #DCE9E3; } .dev-list .ic { color: var(--gold-300); width: 20px; height: 20px; } .code-win { background: #021A13; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); overflow: hidden; direction: ltr; text-align: left; min-width: 0; } .code-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.07); color: #8FB3A4; font: 600 .8rem var(--f-num); } .code-bar i { width: 10px; height: 10px; border-radius: 50%; background: #1F4B3C; display: inline-block; } .code-bar span { margin-inline-start: 8px; } .code-win pre { margin: 0; padding: 18px; overflow-x: auto; font: 500 .82rem/1.7 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #D8EDE4; } .tk-k { color: #F5DC96; } .tk-s { color: #8EDDBE; } .tk-n { color: #F2B880; } .tk-c { color: #6F9283; } @media (max-width: 860px) { .dev-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- FAQ */ .faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; transition: box-shadow .2s, border-color .2s; } .faq details[open] { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold-600) 45%, var(--line)); } .faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 1.04rem; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-inline-end: 2.5px solid var(--gold-600); border-bottom: 2.5px solid var(--gold-600); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; } .faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq .a { padding: 0 20px 20px; color: var(--muted); display: grid; gap: 8px; } /* ---------- CTA + footer */ .cta-final { text-align: center; } .cta-box { border-radius: 32px; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); background: radial-gradient(700px 360px at 80% 0%, rgba(245,220,150,.25), transparent 60%), radial-gradient(120% 120% at 0% 100%, var(--emerald-700), var(--emerald-900) 60%); color: #fff; display: grid; gap: 18px; justify-items: center; position: relative; overflow: hidden; } .cta-box h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; } .cta-box p { color: #CFE0D8; max-width: 40em; } .cta-box .btn-ghost { --b-ink: #fff; border-color: rgba(255,255,255,.3); } .cta-box .btn-ghost:hover { background: rgba(255,255,255,.08); } .cta-box > * { position: relative; } .cta-box .gems { position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 45deg at 12% 80%, transparent 0 25%, rgba(245,220,150,.10) 0 50%, transparent 0) 0 0 / 120px 120px; mask-image: linear-gradient(90deg, #000, transparent 45%); -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%); } .footer { background: var(--emerald-black); color: #C5D8CF; padding-block: 56px 28px; margin-top: clamp(56px, 7vw, 80px); } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; } .foot-brand { display: grid; gap: 14px; align-content: start; } .foot-brand img { width: 140px; } .foot-brand p { font-size: .94rem; max-width: 24em; } .footer h4 { font-family: var(--f-text); font-weight: 700; font-size: .95rem; color: #fff; margin-bottom: 12px; } .footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .footer a { text-decoration: none; color: #C5D8CF; font-size: .93rem; } .footer a:hover { color: var(--gold-300); } .foot-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; color: #9DB7AB; } .foot-bottom .lang-btn { color: #fff; border-color: rgba(255,255,255,.2); } @media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } } /* ---------- inner pages */ .page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 40px); text-align: center; } .page-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); text-wrap: balance; } .page-hero p { color: var(--muted); max-width: 44em; margin: 14px auto 0; font-size: 1.08rem; } .prose { max-width: 820px; margin-inline: auto; display: grid; gap: 16px; } .prose h2 { font-size: 1.4rem; margin-top: 18px; } .prose p, .prose li { color: var(--ink-2); } .prose ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; } .prose .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 10px; } .updated { color: var(--muted); font-size: .9rem; } .matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); } .matrix { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .95rem; } .matrix th, .matrix td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; } .matrix th:first-child, .matrix td:first-child { text-align: start; } .matrix thead th { background: var(--emerald-900); color: var(--gold-300); font-family: var(--f-head); position: sticky; top: 0; } .matrix tr.group td { background: var(--bg-2); font-weight: 800; color: var(--ink); text-align: start; } .matrix .ic { margin-inline: auto; color: var(--accent); stroke-width: 2.6; width: 20px; height: 20px; } .matrix .ic.dim { color: var(--muted); opacity: .5; } /* ---------- reveal on scroll (only when JS runs) */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } @media (max-width: 640px) { .matrix { min-width: 0; font-size: .86rem; } .matrix th, .matrix td { padding: 10px 6px; } .matrix th:first-child, .matrix td:first-child { padding-inline-start: 14px; } .matrix thead th { font-size: .82rem; } .matrix thead th:not(:first-child) { width: 64px; } .matrix .soon { font-size: .68rem; padding: 2px 6px; } } /* ===================================================================================================== v2 motion — see docs/shots/site/effects.md. Per-frame changes touch transform / translate / opacity only (the wordmark mask position is the one paint-only exception, on a single layer). fx.js drives the variables; with prefers-reduced-motion it attaches nothing and these rules show the resting state. ===================================================================================================== */ :root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); } /* reading progress */ .scroll-progress { position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; background: linear-gradient(90deg, var(--emerald-500), var(--gold-600) 55%, var(--gold-300)); transform: scaleX(0); transform-origin: right center; will-change: transform; } html[dir="ltr"] .scroll-progress { transform-origin: left center; } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } } /* reveals: longer ease, a hint of scale; section heads stagger their lines */ .js .reveal { transform: translateY(26px) scale(.985); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } .js .section-head.reveal > * { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .js .section-head.reveal > :nth-child(2) { transition-delay: .08s; } .js .section-head.reveal > :nth-child(3) { transition-delay: .16s; } .js .section-head.reveal.in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .section-head.reveal > * { opacity: 1; transform: none; } } /* hero entrance + underline that draws itself */ @keyframes rise { from { opacity: 0; transform: translateY(22px); } } @keyframes draw { from { transform: scaleX(0); } } .js .hero-copy > * { animation: rise .9s var(--ease-out) both; } .js .hero-copy > :nth-child(2) { animation-delay: .08s; } .js .hero-copy > :nth-child(3) { animation-delay: .16s; } .js .hero-copy > :nth-child(4) { animation-delay: .24s; } .js .hero-copy > :nth-child(5) { animation-delay: .32s; } .js .hero h1 .gold::after { transform-origin: right center; animation: draw 1s .55s var(--ease-out) both; } html[dir="ltr"].js .hero h1 .gold::after { transform-origin: left center; } /* hero: a 3D scene that leans toward the mouse; cards sit at different depths */ .stage { --px: 0; --py: 0; } .stage-3d { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; transform: rotateX(calc(var(--py) * -7deg)) rotateY(calc(var(--px) * 9deg)); } .stage-3d .pass-back1 { translate: calc(var(--px) * -26px) calc(var(--py) * -16px) -60px; } .stage-3d .pass-back2 { translate: calc(var(--px) * -14px) calc(var(--py) * -10px) -30px; } .stage-3d .pass-front { translate: calc(var(--px) * 18px) calc(var(--py) * 12px) 40px; } .stage .glow { translate: calc(var(--px) * -40px) calc(var(--py) * -30px); } .pass > .sheen { position: absolute; inset: -60%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.20), rgba(245,220,150,.08) 18%, transparent 36%); translate: calc(var(--px) * 30%) calc(var(--py) * 30%); mix-blend-mode: soft-light; } .stage .toast-a { translate: calc(var(--px) * 22px) calc(var(--py) * 14px); } .stage .toast-b { translate: calc(var(--px) * 30px) calc(var(--py) * 20px); } @media (max-width: 480px) { .stage .toast-a { translate: 50% 0; } html[dir="ltr"] .stage .toast-a { translate: -50% 0; } } /* spotlight cards: a gold light and a glowing edge that follow the cursor */ .spot { position: relative; --sx: 50%; --sy: 0%; } .spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; } .spot::after { background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(198,149,54,.13), transparent 45%); } .spot::before { padding: 1px; z-index: 1; background: radial-gradient(260px circle at var(--sx) var(--sy), rgba(245,220,150,.95), rgba(198,149,54,.45) 35%, transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .spot.lit::before, .spot.lit::after { opacity: 1; } .tile.dark.spot::after, .plan.featured.spot::after, .band .spot::after { background: radial-gradient(420px circle at var(--sx) var(--sy), rgba(245,220,150,.14), transparent 45%); } .tilt { transition: transform .35s var(--ease-out), box-shadow .3s ease, border-color .3s ease; will-change: transform; } .tilt.lit { box-shadow: var(--shadow-lg); transition: transform .12s linear, box-shadow .3s ease, border-color .3s ease; } /* tile micro-motion: radar ripple from the pin, the bell rings on hover */ .t-ic { position: relative; } .t-ic.ping::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--gold-600); animation: ping 2.6s var(--ease-out) infinite; } @keyframes ping { from { opacity: .75; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } } @keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-11deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } } .tile:hover .t-ic.bell .ic { animation: ring .9s ease-in-out; transform-origin: 50% 10%; } /* buttons: magnetic (fx.js sets `translate`), and a gold edge that keeps running round the primary CTA */ .btn-lg, .btn-start { transition: transform .15s ease, box-shadow .2s ease, background .2s, translate .35s var(--ease-spring); } .btn-glow { position: relative; isolation: isolate; overflow: hidden; background: var(--gold-600); } .btn-glow::before { content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; background: conic-gradient(from 0deg, transparent 0 62%, rgba(245,220,150,.0) 64%, #FFF4D1 72%, var(--gold-300) 76%, transparent 86%); animation: orbit 3.6s linear infinite; } .btn-glow::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 12px; background: var(--b-bg); } .btn-glow.btn-lg::after { border-radius: 12px; } @keyframes orbit { to { transform: rotate(1turn); } } .btn-glow:hover { box-shadow: 0 0 0 4px rgba(245,220,150,.22), 0 14px 36px -10px rgba(198,149,54,.85); } @media (prefers-reduced-motion: reduce) { .btn-glow::before { display: none; } } /* product facts that count up */ .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-block: clamp(28px, 4vw, 44px) 0; } .fact { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px; display: grid; gap: 4px; text-align: center; box-shadow: var(--shadow); } .fact b { font: 800 clamp(2rem, 4.4vw, 2.8rem)/1 var(--f-num); color: var(--gold-ink); font-variant-numeric: tabular-nums; display: inline-block; min-width: 2ch; } .fact span { color: var(--muted); font-size: .92rem; font-weight: 600; } @media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* footer: underline that grows from the reading side; the giant wordmark */ .footer { overflow: hidden; overflow: clip; } /* clip: never scrollable by scrollIntoView / find-in-page */ .footer ul a { background: linear-gradient(var(--gold-300), var(--gold-300)) 100% 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--ease-out), color .2s; } html[dir="ltr"] .footer ul a { background-position: 0 100%; } .footer ul a:hover { background-size: 100% 1.5px; } .footer:has(.foot-word) { padding-bottom: 0; } .foot-word { --mx: 50%; --my: 55%; --r: clamp(120px, 22vw, 320px); position: relative; isolation: isolate; text-align: center; margin: 28px 0 -.3em; font: 800 clamp(116px, 28vw, 330px)/1.15 var(--f-head); letter-spacing: 0; white-space: nowrap; user-select: none; -webkit-user-select: none; pointer-events: none; } html[data-lang="en"] .foot-word { letter-spacing: -.03em; margin-bottom: -.2em; } .foot-word > span[data-word] { position: relative; display: inline-block; color: rgba(245,220,150,.075); } .foot-word > span[data-word]::after { content: attr(data-word); position: absolute; inset: 0; -webkit-text-stroke: 0; background: linear-gradient(100deg, #FFF4D1, var(--gold-300) 30%, var(--gold-600) 62%, #E9C46F); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.55) 40%, transparent 72%); mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.55) 40%, transparent 72%); } .foot-glow { position: absolute; z-index: -1; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, rgba(198,149,54,.30), rgba(20,105,78,.16) 42%, transparent 68%); transform: translate3d(50vw, 50%, 0); opacity: .75; transition: opacity .6s ease; will-change: transform; } .foot-word.is-pointing .foot-glow { opacity: 1; } @media (max-width: 640px) { .foot-glow { width: 360px; height: 360px; margin: -180px 0 0 -180px; } } .hero { overflow: hidden; overflow: clip; } /* ===================================================================================================== v3 — hero particles, kinetic headline, holographic cards, scroll story, try-it, studio, seasons, dashboard teaser, comparison, integrations hub, live code, FAQ search, mobile CTA, theme toggle. Rule kept from v2: per-frame work touches transform / translate / opacity only. Every element's base style is its END state; animations only describe where it comes from, so prefers-reduced-motion (which removes every animation above) shows the finished picture. ===================================================================================================== */ /* ---------- theme switch (light / dark / system) and the view-transition circle */ .theme-btn { font: 700 .9rem var(--f-text); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 12px; width: 40px; height: 40px; padding: 0; cursor: pointer; display: inline-grid; place-items: center; transition: background .2s, transform .15s; } .theme-btn:hover { background: var(--surface); } .theme-btn .i-moon, .logo-l { display: var(--light-only); } .theme-btn .i-sun, .logo-d { display: var(--dark-only); } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; } .vt-theme::view-transition-old(root), .vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; } .vt-theme::view-transition-old(root) { z-index: 1; } .vt-theme::view-transition-new(root) { z-index: 2; } /* ---------- press + focus everywhere */ .btn:active { transform: translateY(0) scale(.97); } .ind-chip:active, .pick:active, .swatch:active, .rail-btn:active, .theme-btn:active, .lang-btn:active, .menu-btn:active, .story-dots button:active, .faq summary:active { transform: scale(.95); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; } .faq summary:hover { color: var(--gold-ink); } .faq summary { transition: color .2s, transform .15s; } /* ---------- aurora + grain behind the whole page (fx.js adds the element) */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; } .aurora i { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; will-change: transform; } .aurora i:nth-child(1) { top: -34vmax; right: -22vmax; background: radial-gradient(circle, var(--aur-a), transparent 62%); animation: aur1 26s ease-in-out infinite alternate; } .aurora i:nth-child(2) { bottom: -38vmax; left: -26vmax; background: radial-gradient(circle, var(--aur-b), transparent 62%); animation: aur2 32s ease-in-out infinite alternate; } .aurora i:nth-child(3) { top: 30vh; left: 30vw; width: 50vmax; height: 50vmax; background: radial-gradient(circle, var(--aur-c), transparent 64%); animation: aur3 38s ease-in-out infinite alternate; } .aurora::after { content: ""; position: absolute; inset: 0; opacity: var(--grain); filter: invert(var(--grain-inv)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } @keyframes aur1 { to { transform: translate(-14vmax, 12vmax) scale(1.12); } } @keyframes aur2 { to { transform: translate(16vmax, -10vmax) scale(1.18); } } @keyframes aur3 { from { transform: translate(-10vmax, 0) scale(.9); } to { transform: translate(8vmax, 30vh) scale(1.1); } } .hero::after { opacity: .35; } /* ---------- kinetic headline: each word rises, then light runs across the gold word */ .js .hero-copy > :nth-child(6) { animation-delay: .40s; } .js .hero-copy > :nth-child(7) { animation-delay: .48s; } .js .hero-copy > h1.is-split { animation: none; } h1.is-split .w { display: inline-block; animation: w-rise .95s var(--ease-out) both; animation-delay: calc(var(--i) * 95ms + 80ms); } @keyframes w-rise { from { opacity: 0; transform: translateY(.55em) rotate(3deg); } } h1.is-split .gold .w { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, var(--h-gold) 0 38%, var(--shine) 48%, var(--h-gold) 58% 100%); background-size: 300% 100%; background-position: 0 0; animation: w-rise .95s var(--ease-out) both, shimmer 6s ease-in-out infinite; animation-delay: calc(var(--i) * 95ms + 80ms), 1.3s; } @keyframes shimmer { 0% { background-position: 100% 0; } 26%, 100% { background-position: 0 0; } } /* ---------- industry switcher */ .ind-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ind-switch-label { flex-basis: 100%; color: var(--muted); font-weight: 700; font-size: .9rem; } .ind-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--ink-2); font: 700 .9rem var(--f-text); transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .15s; } .ind-chip .ic { width: 18px; height: 18px; } .ind-chip:hover { border-color: color-mix(in srgb, var(--gold-600) 60%, var(--line)); color: var(--ink); } .ind-chip[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: transparent; box-shadow: 0 8px 20px -10px rgba(3,35,26,.6); } .ind-ex { font: 800 clamp(1rem, 1.6vw, 1.12rem)/1.5 var(--f-head); color: var(--gold-ink); min-height: 1.5em; margin-top: -10px; } .ind-ex.swap { animation: ex-swap .55s var(--ease-out); } @keyframes ex-swap { from { opacity: 0; transform: translateY(10px); } } @media (max-width: 860px) { .ind-switch { justify-content: center; } } /* ---------- hero stage: KNZ symbol made of particles above, the card in front below */ .stage { height: 620px; } .stage .glow { top: 6%; width: 420px; height: 420px; } .stage canvas.particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .stage .stage-3d { z-index: 2; place-items: end center; padding-bottom: 6px; } .stage .toast { z-index: 6; } .stage .toast-a { top: 6px; } .stage .toast-b { display: none; } /* v3: the particle symbol takes this corner; the story shows the verified receipt */ .stage .pass-front { scale: .86; transform-origin: 50% 100%; } #hero-stamps, #try-stamps { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)) !important; } .pass-front.flip { animation: float 7s ease-in-out infinite, card-flip .56s ease-in-out; } @keyframes card-flip { 0% { rotate: y 0deg; } 50% { rotate: y 90deg; } 100% { rotate: y 0deg; } } .pass { transition: background .45s ease, color .3s; } @media (max-width: 1020px) { .stage { height: 600px; } } @media (max-width: 860px) { .stage { height: 600px; } } @media (max-width: 480px) { .stage { height: 540px; } .stage .glow { width: 300px; height: 300px; } .stage .toast-a { top: auto; bottom: 236px; } } /* holographic light on wallet cards: follows the pointer (hero via --px/--py, studio/try via --hx/--hy); drifts on touch */ .pass > .holo { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: .55; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 22%, rgba(245,220,150,.0) 30%, rgba(245,220,150,.42) 40%, rgba(142,221,190,.30) 47%, rgba(196,170,255,.26) 54%, rgba(255,244,209,.18) 60%, transparent 70%); background-size: 260% 260%; background-position: var(--hx, 50%) var(--hy, 50%); } .stage .pass > .holo { background-position: calc(50% + var(--px) * 46%) calc(50% + var(--py) * 46%); } .pass[style*="--p-ink: #062A20"] > .holo { mix-blend-mode: soft-light; opacity: .8; } @media (hover: none) { .pass > .holo { animation: holo-drift 7s ease-in-out infinite alternate; } } @keyframes holo-drift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } } .holo-card, .try-pass { transform-style: preserve-3d; } .studio-card .pass, .try-pass { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), background .45s ease, box-shadow .4s, translate .9s var(--ease-out), scale .9s var(--ease-out); } .studio-card .pass.is-tilting, .try-pass.is-tilting { transition: transform .08s linear, background .45s ease, box-shadow .4s, translate .9s var(--ease-out), scale .9s var(--ease-out); } /* ---------- scroll story: steps on one side, a sticky phone on the other */ .story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 6vw, 88px); align-items: start; } .story-steps { list-style: none; margin: 0; padding: 0; display: grid; } .story-step { min-height: 64vh; display: grid; align-content: center; gap: 10px; padding-block: 24px; opacity: .72; transition: opacity .5s ease; } .story-step:first-child { min-height: 52vh; align-content: start; padding-top: 12vh; } .story-step:last-child { min-height: 70vh; } .story-step.is-on { opacity: 1; } .step-n { font: 800 .95rem var(--f-num); color: var(--gold-ink); letter-spacing: .12em; display: inline-flex; align-items: center; gap: 10px; } .step-n::after { content: ""; width: 34px; height: 2px; background: currentColor; transform: scaleX(.4); transform-origin: right; transition: transform .6s var(--ease-out); } html[dir="ltr"] .step-n::after { transform-origin: left; } .story-step.is-on .step-n::after { transform: scaleX(1); } .story-step h3 { font-size: clamp(1.45rem, 2.7vw, 2.1rem); text-wrap: balance; } .story-step p { color: var(--muted); font-size: 1.06rem; max-width: 30em; } .story-stick { position: sticky; top: max(88px, calc(50vh - 316px)); display: grid; justify-items: center; gap: 16px; } .story-dots { display: flex; gap: 2px; } .story-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: transform .15s; } .story-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .35s var(--ease-out), background .35s; } .story-dots button[aria-current]::before { width: 22px; background: var(--gold-600); } .phone { width: 280px; height: 592px; border-radius: 46px; padding: 10px; flex: none; background: linear-gradient(150deg, #24352E, #050E0A 60%); box-shadow: 0 0 0 1.5px #33463F, inset 0 0 0 2px #0A1712, 0 50px 90px -34px rgba(3,35,26,.6); } .screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; isolation: isolate; color: #03231A; background: radial-gradient(120% 60% at 50% 0%, #FFFFFF, #EEF3F0 60%, #E3ECE7); font-size: .8rem; line-height: 1.45; } .phone-bar { direction: ltr; position: absolute; inset: 0 0 auto; z-index: 5; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 4px 26px 0; font: 700 .78rem var(--f-num); color: #03231A; transition: color .3s; } .screen:has(.scene.lock.on) .phone-bar { color: #fff; } .island { position: absolute; left: 50%; top: 10px; width: 88px; height: 26px; margin-left: -44px; border-radius: 20px; background: #000; } .phone-bar .bars { display: inline-flex; align-items: end; gap: 2px; height: 11px; } .phone-bar .bars i { width: 3px; background: currentColor; border-radius: 1px; height: 5px; } .phone-bar .bars i:nth-child(2) { height: 8px; } .phone-bar .bars i:nth-child(3) { height: 11px; } .scene { position: absolute; inset: 44px 0 0; padding: 28px 16px 16px; display: grid; align-content: start; justify-items: center; gap: 12px; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; } .scene.on { opacity: 1; visibility: visible; transition: opacity .45s ease; } .s1, .s2, .s3 { padding-top: 92px; } .story.paused .scene * { animation-play-state: paused !important; } .mp-logo { width: 30px; height: 30px; border-radius: 9px; background: var(--gold-600); color: var(--emerald-900); display: grid; place-items: center; flex: none; } .mp-logo .ic { width: 17px; height: 17px; stroke-width: 2; } .mini-pass { width: 222px; border-radius: 16px; padding: 12px; color: #fff; display: grid; gap: 12px; background: radial-gradient(120% 90% at 100% 0%, var(--emerald-700), var(--emerald-900) 60%); box-shadow: 0 18px 30px -16px rgba(3,35,26,.6); } .mp-top { display: flex; align-items: center; gap: 8px; min-width: 0; } .mp-top b { flex: 1; min-width: 0; font: 800 .86rem var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mp-pts { font: 800 1.05rem var(--f-num); color: var(--gold-300); } /* scene 1: scan the receipt's QR, points fly into the card */ .scan-receipt { width: 196px; background: #fff; border-radius: 12px; padding: 14px; display: grid; gap: 6px; box-shadow: 0 14px 30px -18px rgba(3,35,26,.55); -webkit-mask: radial-gradient(5px at 50% 100%, transparent 98%, #000) 50% 100% / 14px 100% repeat-x; mask: radial-gradient(5px at 50% 100%, transparent 98%, #000) 50% 100% / 14px 100% repeat-x; padding-bottom: 18px; } .scan-receipt .l { height: 7px; border-radius: 4px; background: #DCE6E1; } .scan-receipt .l.m { width: 70%; } .scan-receipt .l.s { width: 48%; } .r-tot { display: flex; justify-content: space-between; font-weight: 700; font-size: .78rem; padding-top: 2px; } .scan-qr { position: relative; width: 108px; margin: 6px auto 0; } .scan-qr svg { width: 108px; height: 108px; } .laser { position: absolute; inset-inline: -6px; top: 0; height: 2px; border-radius: 2px; background: var(--gold-600); box-shadow: 0 0 12px 2px rgba(198,149,54,.75); opacity: 0; } .scene.on .laser { animation: laser 1.1s ease-in-out .25s 2 alternate both; } @keyframes laser { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(106px); } } .corners { position: absolute; inset: -7px; --c: var(--gold-600); background: linear-gradient(var(--c), var(--c)) 0 0 / 18px 3px, linear-gradient(var(--c), var(--c)) 0 0 / 3px 18px, linear-gradient(var(--c), var(--c)) 100% 0 / 18px 3px, linear-gradient(var(--c), var(--c)) 100% 0 / 3px 18px, linear-gradient(var(--c), var(--c)) 0 100% / 18px 3px, linear-gradient(var(--c), var(--c)) 0 100% / 3px 18px, linear-gradient(var(--c), var(--c)) 100% 100% / 18px 3px, linear-gradient(var(--c), var(--c)) 100% 100% / 3px 18px; background-repeat: no-repeat; } .scene.on .corners { animation: corners .7s var(--ease-out) both; } @keyframes corners { from { transform: scale(1.25); opacity: 0; } } .scan-ok { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--emerald-500); color: #fff; font-weight: 700; font-size: .78rem; } .scan-ok .ic { width: 15px; height: 15px; stroke-width: 3; } .scene.on .scan-ok { animation: pop-in .5s 1.3s var(--ease-spring) both; } .s1 .mini-pass { margin-top: 2px; } .scene.on .mp-pts { animation: pop-in .55s 2.55s var(--ease-spring) both; } .scene.s1.on .mini-pass { animation: glow-once 1s 2.4s ease-out both; } @keyframes glow-once { 40% { box-shadow: 0 0 0 3px var(--gold-300), 0 18px 40px -10px rgba(198,149,54,.8); } } @keyframes pop-in { from { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.18); } } .fly { position: absolute; top: 230px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 35% 35%, #FFF4D1, var(--gold-600) 70%); box-shadow: 0 0 10px rgba(245,220,150,.9); } .scene.on .fly { animation: fly 1.05s cubic-bezier(.45, 0, .25, 1) both; animation-delay: calc(1.55s + var(--d)); } .f1 { --d: 0s; --dx: -54px; } .f2 { --d: .1s; --dx: 40px; } .f3 { --d: .2s; --dx: -18px; } .f4 { --d: .3s; --dx: 60px; } .f5 { --d: .4s; --dx: -36px; } @keyframes fly { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 18% { opacity: 1; transform: translate(calc(var(--dx) * .8), -26px) scale(1.1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 154px) scale(.45); } } /* scene 2: stamps fill, the gift bursts */ .mini-pass.tall { padding-bottom: 14px; } .mp-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .mp-stamps i { aspect-ratio: 1; border-radius: 50%; background: var(--gold-600); border: 1.5px solid var(--gold-600); display: grid; place-items: center; } .mp-stamps i:not(.g)::after { content: ""; width: 34%; height: 34%; border-radius: 50%; background: var(--emerald-900); opacity: .5; } .mp-stamps i.g { color: var(--emerald-900); } .mp-stamps i.g .ic { width: 58%; height: 58%; } .scene.on .mp-stamps i:not(.g) { animation: stamp-in .4s var(--ease-spring) both; } .mp-stamps i:nth-child(1) { animation-delay: .30s !important; } .mp-stamps i:nth-child(2) { animation-delay: .52s !important; } .mp-stamps i:nth-child(3) { animation-delay: .74s !important; } .mp-stamps i:nth-child(4) { animation-delay: .96s !important; } .mp-stamps i:nth-child(5) { animation-delay: 1.18s !important; } .mp-stamps i:nth-child(6) { animation-delay: 1.40s !important; } .mp-stamps i:nth-child(7) { animation-delay: 1.62s !important; } @keyframes stamp-in { from { background: transparent; border-color: rgba(255,255,255,.4); border-style: dashed; transform: scale(.55); } 70% { transform: scale(1.15); } } .scene.on .mp-stamps i.g { animation: gift-on .6s 1.95s var(--ease-spring) both, ring .9s 2.5s ease-in-out; } @keyframes gift-on { from { background: transparent; color: var(--gold-600); transform: scale(.8); } 60% { transform: scale(1.3); } } .burst { position: absolute; left: 50%; top: 298px; width: 0; height: 0; } .burst i { position: absolute; left: -2px; top: -9px; width: 4px; height: 18px; border-radius: 3px; background: var(--gold-600); opacity: 0; transform: rotate(calc(var(--a) * 30deg)) translateY(-70px); } .burst i:nth-child(even) { background: var(--emerald-500); height: 12px; } .scene.on .burst i { animation: ray .9s 2s var(--ease-out) both; } @keyframes ray { from { opacity: 1; transform: rotate(calc(var(--a) * 30deg)) translateY(-14px) scaleY(.4); } 60% { opacity: 1; } } .burst i:nth-child(1) { --a: 0; } .burst i:nth-child(2) { --a: 1; } .burst i:nth-child(3) { --a: 2; } .burst i:nth-child(4) { --a: 3; } .burst i:nth-child(5) { --a: 4; } .burst i:nth-child(6) { --a: 5; } .burst i:nth-child(7) { --a: 6; } .burst i:nth-child(8) { --a: 7; } .burst i:nth-child(9) { --a: 8; } .burst i:nth-child(10) { --a: 9; } .burst i:nth-child(11) { --a: 10; } .burst i:nth-child(12) { --a: 11; } .gift-ready { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font: 800 .95rem var(--f-head); background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); color: var(--emerald-black); box-shadow: 0 14px 30px -12px rgba(198,149,54,.8); } .gift-ready .ic { width: 20px; height: 20px; } .scene.on .gift-ready { animation: pop-in .6s 2.1s var(--ease-spring) both; } /* scene 3: the card drops into the wallet */ .wal-head { justify-self: stretch; font: 800 1.5rem var(--f-head); padding-inline: 6px; } .wal-stack { position: relative; width: 236px; height: 262px; } .wc { position: absolute; inset-inline: 0; height: 146px; border-radius: 16px; box-shadow: 0 -2px 10px rgba(0,0,0,.08); } .wc.c1 { top: 0; background: linear-gradient(135deg, #3B4A63, #1F2A3C); } .wc.c2 { top: 48px; background: linear-gradient(135deg, #C9CED6, #9AA3AF); } .wc.ours { top: 96px; padding: 12px; display: flex; align-items: flex-start; gap: 8px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, var(--emerald-700), var(--emerald-900) 60%); box-shadow: 0 -6px 18px rgba(3,35,26,.25), 0 20px 30px -16px rgba(3,35,26,.6); } .wc.ours b { flex: 1; min-width: 0; font: 800 .86rem var(--f-head); padding-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wc.ours > .num { font: 800 1.1rem var(--f-num); color: var(--gold-300); padding-top: 3px; } .scene.on .wc.ours { animation: drop .9s .35s cubic-bezier(.2, .9, .3, 1.15) both; } @keyframes drop { from { opacity: 0; transform: translateY(-300px) rotate(-7deg) scale(1.06); } 60% { opacity: 1; } } .wal-ok { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #03231A; color: #fff; font-weight: 700; font-size: .78rem; } .wal-ok .ic { width: 15px; height: 15px; stroke-width: 3; color: #6FD0AA; } .scene.on .wal-ok { animation: pop-in .5s 1.25s var(--ease-spring) both; } /* scenes 4–5: the lock screen */ .scene.lock { inset: 0; padding: 74px 12px 16px; color: #fff; gap: 8px; background: radial-gradient(90% 50% at 50% 18%, rgba(245,220,150,.18), transparent 70%), radial-gradient(130% 80% at 50% 0%, #14694E, #062A20 58%, #03231A); } .lock-time { font: 300 3.6rem/1 var(--f-num); letter-spacing: -.02em; } .lock-date { font-weight: 600; font-size: .86rem; opacity: .85; margin-bottom: 8px; } .radar { position: relative; width: 112px; height: 112px; display: grid; place-items: center; margin: 4px 0 10px; } .radar .ic { width: 30px; height: 30px; color: var(--gold-300); stroke-width: 2; position: relative; } .radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(245,220,150,.55); } .scene.on .radar i { animation: ping 2.4s var(--ease-out) infinite; } .scene.on .radar i + i { animation-delay: 1.2s; } .notif { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; text-align: start; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .notif > div { min-width: 0; } .notif b { display: block; font-size: .8rem; } .notif small { display: block; font-size: .74rem; opacity: .88; } .scene.on .n-near { animation: notif-in .65s 1s var(--ease-spring) both; } .n-msg { margin-top: 18px; } .scene.on .n-msg { animation: notif-in .65s .5s var(--ease-spring) both; } .scene.on .bell .ic { animation: ring .9s 1.15s ease-in-out 2; transform-origin: 50% 10%; } .n-old { opacity: .55; scale: .96; } @keyframes notif-in { from { opacity: 0; transform: translateY(-34px) scale(.94); } } @media (max-width: 860px) { .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .story-stick { order: -1; top: 72px; z-index: 3; padding-top: 8px; gap: 0; margin-inline: calc(var(--gutter) * -1); background: linear-gradient(var(--bg) 88%, color-mix(in srgb, var(--bg) 0%, transparent)); } .phone { scale: .64; transform-origin: 50% 0; margin-bottom: calc(592px * -.36); } .story-dots { margin-top: 4px; } .story-step, .story-step:first-child, .story-step:last-child { min-height: 46vh; padding: 10px 0; align-content: center; text-align: center; justify-items: center; } .story-step:last-child { min-height: 52vh; } .step-n::after { display: none; } .story-step p { font-size: 1rem; } } @media (max-width: 860px) and (max-height: 720px) { .phone { scale: .54; margin-bottom: calc(592px * -.46); } } /* ---------- try it */ .try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; } .try-copy .section-head { margin-bottom: 18px; } .try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .try-note { color: var(--muted); font-size: .88rem; margin-top: 14px; } .try-stage { position: relative; height: 460px; display: grid; place-items: center; perspective: 1200px; isolation: isolate; border-radius: 28px; background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--gold-300) 30%, transparent), transparent 70%); } .try-stage canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; } .try-pass { position: relative; z-index: 2; width: min(330px, 100%); border: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .try-pass:active { scale: .98; } .try-pass .stamp { transition: background .25s, transform .3s var(--ease-spring); } .try-pass .stamp.just { animation: stamp-pop .55s var(--ease-spring); } @keyframes stamp-pop { from { transform: scale(.2) rotate(-35deg); } 60% { transform: scale(1.25); } } .try-pass .strip-text:empty { display: none; } .strip-text { font-size: .82rem; color: var(--p-label); font-weight: 600; } .try-reward { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; padding: 10px; font: 800 1rem var(--f-head); background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); color: var(--emerald-black); } .try-reward .ic { width: 20px; height: 20px; } .try-stage:not(.rewarded) .try-reward { display: none; } .rewarded .try-reward { animation: pop-in .6s var(--ease-spring) both; } .rewarded .try-pass { box-shadow: 0 0 0 2px var(--gold-300), 0 34px 80px -24px rgba(198,149,54,.75); } .try-wallet { position: absolute; inset: auto 0 14px; height: 160px; pointer-events: none; display: grid; justify-items: center; } .tw-back, .tw-front { position: absolute; width: min(300px, 92%); border-radius: 24px; opacity: 0; translate: 0 60px; transition: opacity .45s, translate .6s var(--ease-out); } .tw-back { z-index: 1; top: 0; height: 160px; background: linear-gradient(#22302B, #0E1714); } .tw-front { z-index: 3; top: 52px; height: 108px; border-radius: 10px 10px 24px 24px; display: grid; place-items: center; color: #fff; font: 800 1rem var(--f-head); background: linear-gradient(#1C2925, #08100D); box-shadow: 0 -10px 24px -10px rgba(0,0,0,.6); } .in-wallet .tw-back, .in-wallet .tw-front { opacity: 1; translate: 0 0; } .in-wallet .try-pass { translate: 0 118px; scale: .78; pointer-events: none; } .try-added { position: absolute; z-index: 5; top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--emerald-900); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow); } .try-added .ic { width: 18px; height: 18px; color: #6FD0AA; stroke-width: 3; } .try-stage:not(.added) .try-added { opacity: 0; visibility: hidden; } .added .try-added { animation: pop-in .55s var(--ease-spring) both; } @media (max-width: 860px) { .try-grid { grid-template-columns: minmax(0, 1fr); } .try-copy { text-align: center; } .try-copy .section-head { justify-items: center !important; text-align: center !important; margin-inline: auto !important; } .try-actions { justify-content: center; } .try-stage { height: 420px; } /* phones: heading, then the card, then the buttons, so a tap always shows its result on screen */ .try-copy { display: contents; } .try-grid { gap: 14px; } .try-copy .section-head { order: 1; margin-bottom: 0; } .try-stage { order: 2; height: 380px; } .try-actions { order: 3; } .try-note { order: 4; text-align: center; margin-top: 0; } } /* ---------- card studio */ .studio { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 48px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(18px, 4vw, 44px); box-shadow: var(--shadow); } .studio-card { display: grid; place-items: center; perspective: 1200px; min-height: 340px; border-radius: 22px; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--gold-300) 35%, transparent), transparent 72%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--line) 50%, transparent) 0 1px, transparent 1px 14px); } .studio-card .pass { position: relative; width: min(340px, 100%); } .pass-logo.has-img { background: #fff; overflow: hidden; padding: 0; } .pass-logo.has-img img { width: 100%; height: 100%; object-fit: cover; } .designer-ctrl .field label { display: block; font-weight: 700; font-size: .9rem; color: var(--ink-2); margin-bottom: 6px; } .designer-ctrl input[type="text"] { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0 14px; font: 600 1rem var(--f-text); transition: border-color .2s, box-shadow .2s; } .designer-ctrl input[type="text"]:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 4px rgba(198,149,54,.18); } .swatch { transition: transform .15s, box-shadow .2s; } .swatch:hover, .pick:hover { transform: translateY(-2px); } .pick { transition: transform .15s, box-shadow .2s, border-color .2s; } .swatch-custom { position: relative; overflow: hidden; display: inline-block; background: conic-gradient(#E54B4B, #F5DC96, #6FD0AA, #4A90E2, #9B59B6, #E54B4B); } .swatch-custom input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; cursor: pointer; border: 0; padding: 0; } .swatch-custom.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-600); } .swatch-custom:focus-within { outline: 3px solid var(--gold-600); outline-offset: 3px; } .studio-row { display: flex; flex-wrap: wrap; gap: 10px; } .upload { position: relative; overflow: hidden; } .upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; } .upload:focus-within { outline: 3px solid var(--gold-600); outline-offset: 3px; } .studio-note { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: .86rem; } .studio-note .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); } .tile-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gold-ink); text-decoration: none; margin-top: 6px; } .tile-link .ic { width: 18px; height: 18px; transition: translate .25s var(--ease-out); } .tile-link:hover .ic { translate: -4px 0; } html[dir="ltr"] .tile-link:hover .ic { translate: 4px 0; } .tile.dark .tile-link { color: var(--gold-300); } @media (max-width: 860px) { .studio { grid-template-columns: minmax(0, 1fr); } .studio-card { min-height: 280px; } .designer-ctrl { justify-items: stretch; text-align: start; } } /* ---------- seasons rail */ .season-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 54px) / 4)); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 10px 4px 18px; scrollbar-width: none; border-radius: 16px; } .season-rail::-webkit-scrollbar { display: none; } .season { scroll-snap-align: start; display: grid; gap: 8px; align-content: start; } .season h3 { font-size: 1.12rem; margin-top: 6px; } .season p { color: var(--muted); font-size: .92rem; } .season-pass { position: relative; width: 100%; min-height: 200px; transition: transform .45s var(--ease-out), box-shadow .3s; } .season:hover .season-pass { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 34px 60px -24px rgba(3,35,26,.55); } html[dir="ltr"] .season:hover .season-pass { transform: translateY(-6px) rotate(1.2deg); } .season-art { position: absolute !important; inset-inline-end: -14px; top: -14px; width: 124px; height: 124px; color: var(--p-accent); opacity: .32; z-index: 0; animation: sway 9s ease-in-out infinite alternate; } @keyframes sway { from { transform: rotate(-6deg) translateY(-3px); } to { transform: rotate(5deg) translateY(4px); } } .s-ramadan .season-pass { --p-bg: #0B1430; --p-bg2: #2A3B78; --p-ink: #fff; --p-label: #F5DC96; --p-accent: #E8C27A; --p-stamp-ink: #0B1430; } .s-eid .season-pass { --p-bg: #062A20; --p-bg2: #14694E; --p-ink: #fff; --p-label: #F5DC96; --p-accent: #F5DC96; --p-stamp-ink: #062A20; } .s-national .season-pass { --p-bg: #0C5130; --p-bg2: #1E8A54; --p-ink: #fff; --p-label: #DDF3E6; --p-accent: #FFFFFF; --p-stamp-ink: #0C5130; } .s-founding .season-pass { --p-bg: #4E3119; --p-bg2: #9A6A3A; --p-ink: #FFF7EA; --p-label: #F2D9B0; --p-accent: #E9C46F; --p-stamp-ink: #4E3119; } .season .pass-strip { background: rgba(255,255,255,.08); } .rail-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; } .rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .15s, box-shadow .2s; } .rail-btn:hover { box-shadow: var(--shadow); } .rail-btn .ic { width: 20px; height: 20px; } html[dir="ltr"] .rail-btn[data-rail="-1"] .ic { transform: scaleX(-1); } .rail-dots { display: flex; gap: 6px; } .rail-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .35s var(--ease-out), background .35s; } .rail-dots i.on { width: 22px; background: var(--gold-600); } .season-note { text-align: center; color: var(--muted); margin-top: 14px; font-size: .92rem; } @media (min-width: 1100px) { .rail-nav { display: none; } } @media (max-width: 700px) { .season-rail { grid-auto-columns: 80%; } } /* ---------- dashboard teaser */ .dash-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 60px); align-items: center; } .dash-grid .section-head { margin-bottom: 18px; } .dash-list li { color: var(--ink-2); align-items: flex-start; } .dash-list .ic { color: var(--accent); margin-top: 4px; flex: none; } .dash { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding-bottom: 16px; overflow: hidden; min-width: 0; } .dash-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 700 .86rem var(--f-text); color: var(--muted); } .dash-bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); } .dash-bar > span { margin-inline-start: 6px; } .dash-tag { margin-inline-start: auto; font-style: normal; font-size: .74rem; color: var(--gold-ink); border: 1px dashed currentColor; border-radius: 999px; padding: 1px 10px; white-space: nowrap; } .dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px; } .kpi { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; background: var(--bg); min-width: 0; } .kpi small { color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi b { font: 800 1.45rem/1.2 var(--f-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; justify-self: start; } .kpi-d { font-size: .74rem; color: var(--muted); font-weight: 700; } .kpi-d.up { color: var(--accent); } .kpi.gold { background: linear-gradient(135deg, var(--emerald-900), var(--emerald-700)); border-color: transparent; color: #fff; } .kpi.gold small, .kpi.gold .kpi-d { color: var(--gold-300); } .dash-charts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; padding: 0 16px; } .chart { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 10px; align-content: start; background: var(--bg); min-width: 0; } .chart-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; } .legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .74rem; font-weight: 700; } .legend i { width: 12px; height: 3px; border-radius: 2px; } .lg-a { background: var(--gold-600); } .lg-b { background: var(--muted); } .line-chart { width: 100%; height: 140px; overflow: visible; } .line-chart .grid path { stroke: var(--line); stroke-width: 1; fill: none; } .line-chart .area { fill: color-mix(in srgb, var(--gold-600) 16%, transparent); } .ln-a, .ln-b { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; } .ln-a { stroke: var(--gold-600); stroke-width: 3; } .ln-b { stroke: var(--muted); stroke-width: 2; opacity: .65; } .ln-dot { fill: var(--gold-600); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; } .js .dash:not(.play) .ln-a, .js .dash:not(.play) .ln-b { stroke-dashoffset: 1; } .js .dash:not(.play) .area, .js .dash:not(.play) .ln-dot { opacity: 0; } .dash.play .ln-b { animation: draw-ln 1.5s var(--ease-out) both; } .dash.play .ln-a { animation: draw-ln 1.7s .15s var(--ease-out) both; } .dash.play .area { animation: fade-in .9s 1s ease both; } .dash.play .ln-dot { animation: pop-in .5s 1.75s var(--ease-spring) both; } @keyframes draw-ln { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes fade-in { from { opacity: 0; } } .bar-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: center; font-size: .78rem; color: var(--muted); font-weight: 700; } .bar-row i { height: 12px; border-radius: 6px; transform: scaleX(var(--v)); transform-origin: right center; transition: transform 1.2s var(--ease-out); background: linear-gradient(270deg, var(--emerald-500), var(--gold-600)); } html[dir="ltr"] .bar-row i { transform-origin: left center; background: linear-gradient(90deg, var(--emerald-500), var(--gold-600)); } .js .dash:not(.play) .bar-row i { transform: scaleX(0); } .bar-row:nth-child(3) i { transition-delay: .15s; } .bar-row:nth-child(4) i { transition-delay: .3s; } @media (max-width: 960px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; } .dash-charts { grid-template-columns: minmax(0, 1fr); padding: 0 12px; } .dash-bar > span { display: none; } } /* ---------- paper / typical app / KNZ */ .compare3 thead th { text-align: center; vertical-align: bottom; } .compare3 thead th:first-child { width: 42%; } .compare3 thead th .ic, .compare3 th.knz img { margin: 0 auto 6px; width: 20px; height: 20px; } .compare3 th.knz img { height: 26px; width: 18px; } .compare3 td { text-align: center; } .compare3 td.feat { text-align: start; font-weight: 600; color: var(--ink-2); } .compare3 td.knz { width: auto; } .mk { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; position: relative; } .mk.y { background: var(--emerald-500); } .mk.y::after { content: ""; width: 7px; height: 12px; border: solid #fff; border-width: 0 2.6px 2.6px 0; transform: translateY(-1px) rotate(45deg); } .mk.n { background: color-mix(in srgb, var(--no-ic) 13%, transparent); } .mk.n::before, .mk.n::after { content: ""; position: absolute; width: 12px; height: 2.4px; border-radius: 2px; background: var(--no-ic); transform: rotate(45deg); } .mk.n::after { transform: rotate(-45deg); } .mk.p { border: 2px solid var(--gold-600); } .mk.p::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: linear-gradient(90deg, var(--gold-600) 50%, transparent 50%); } td.knz .mk.y { background: var(--gold-600); box-shadow: 0 0 0 5px rgba(198,149,54,.18); } td.knz .mk.y::after { border-color: var(--emerald-black); } .compare3 td:nth-child(2) .mk { --c: 0; } .compare3 td:nth-child(3) .mk { --c: 1; } .compare3 td:nth-child(4) .mk { --c: 2; } .js .vs:not(.play) tbody .mk { transform: scale(0); } .vs.play tbody .mk { animation: mk-in .5s var(--ease-spring) both; animation-delay: calc(var(--r, 0) * 70ms + var(--c, 0) * 160ms); } @keyframes mk-in { from { transform: scale(0) rotate(-40deg); } } .vs.play tbody td.knz { animation: knz-col 1.2s calc(var(--r, 0) * 70ms + 300ms) ease both; } @keyframes knz-col { from { background: transparent; } } .vs-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; padding: 12px; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--line); } .vs-key > span { display: inline-flex; align-items: center; gap: 6px; } .vs-key .mk { width: 18px; height: 18px; } .vs-key .mk.y::after { width: 5px; height: 9px; border-width: 0 2px 2px 0; } .vs-key .mk.n::before, .vs-key .mk.n::after { width: 9px; height: 2px; } .vs-key .mk.p::after { inset: 3px; } @media (max-width: 640px) { .compare3 thead { display: table-header-group; } .compare3 tr { display: table-row; padding: 0; } .compare3 th, .compare3 td { padding: 10px 5px; border-bottom: 1px solid var(--line); } .compare3 td.feat, .compare3 thead th:first-child { padding-inline-start: 12px; font-size: .84rem; } .compare3 thead th { font-size: .7rem; line-height: 1.3; } .compare3 td.knz { background: color-mix(in srgb, var(--accent) 7%, transparent); } .compare3 tr:last-child td { border-bottom: 0; } .mk { width: 22px; height: 22px; } } /* ---------- integrations hub */ .hub { position: relative; height: 440px; max-width: 1000px; margin-inline: auto; } .hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; } .hub-lines path { fill: none; stroke: color-mix(in srgb, var(--gold-600) 60%, transparent); stroke-width: 2; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; } .hub.flow .hub-lines path:not(.soon-line) { animation: flow 1.1s linear infinite; } @keyframes flow { to { stroke-dashoffset: -14; } } .hub-lines .soon-line { stroke: var(--line); stroke-dasharray: 3 7; } .hub-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 8px; z-index: 2; } .hub-core img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--gold-600) 14%, transparent), 0 0 0 22px color-mix(in srgb, var(--gold-600) 7%, transparent), var(--shadow-lg); } .hub.flow .hub-core img { animation: core 3.2s ease-in-out infinite; } @keyframes core { 50% { transform: scale(1.05); } } .hub-core b { font: 800 1rem var(--f-head); letter-spacing: .1em; } .node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; z-index: 2; width: 236px; display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); text-align: start; transition: translate .35s var(--ease-out), box-shadow .3s, border-color .3s; } .node:hover { translate: -50% calc(-50% - 5px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--gold-600) 55%, var(--line)); } .node .t-ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .node .t-ic .ic { width: 21px; height: 21px; } .node > div { min-width: 0; } .node b { display: block; font-size: .95rem; } .node small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; } .node.is-soon { border-style: dashed; box-shadow: none; background: color-mix(in srgb, var(--surface) 55%, transparent); } @media (max-width: 1100px) { .hub { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hub-lines { display: none; } .hub-core { position: static; translate: none; grid-column: 1 / -1; margin-bottom: 12px; } .node { position: static; translate: none; width: auto; } .node:hover { translate: 0 -4px; } } @media (max-width: 560px) { .hub { grid-template-columns: minmax(0, 1fr); } } /* ---------- developers: the verify function types itself, then the signed event lands */ .dev-live { display: grid; gap: 14px; min-width: 0; } .code-win .caret { display: inline-block; width: 8px; height: 1.15em; margin-inline-start: 1px; vertical-align: text-bottom; background: var(--gold-300); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .dev-live.done .caret { display: none; } .evt { background: #04241A; border: 1px solid rgba(245,220,150,.28); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; direction: ltr; text-align: left; color: #D8EDE4; box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); transition: opacity .6s ease, transform .7s var(--ease-spring); } .js .dev-live:not(.done) .evt { opacity: 0; transform: translateY(16px) scale(.98); } .evt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font: 600 .84rem ui-monospace, "Cascadia Mono", Consolas, monospace; } .evt-pill { background: var(--gold-600); color: #03231A; font-weight: 800; border-radius: 6px; padding: 1px 8px; font-size: .74rem; } .evt-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #8EDDBE; font: 700 .82rem var(--f-text); } .evt-ok .ic { width: 16px; height: 16px; stroke-width: 3; } .dev-live.done .evt-ok { animation: pop-in .5s .35s var(--ease-spring) both; } .evt-body { font: 500 .8rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #BFD5CB; display: block; overflow-wrap: normal; overflow-x: auto; } .evt-body b { color: var(--gold-300); font-weight: 700; } /* ---------- FAQ search */ .faq-search { max-width: 860px; margin: 0 auto 14px; position: relative; display: flex; align-items: center; } .faq-search > .ic { position: absolute; inset-inline-start: 16px; color: var(--muted); pointer-events: none; width: 20px; height: 20px; } .faq-search input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 54px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding-inline: 46px 64px; font: 600 1rem var(--f-text); box-shadow: var(--shadow); transition: border-color .2s, box-shadow .2s; } .faq-search input::placeholder { color: var(--muted); opacity: .85; } .faq-search input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 4px rgba(198,149,54,.18), var(--shadow); } .faq-count { position: absolute; inset-inline-end: 16px; color: var(--muted); font-size: .85rem; font-weight: 700; } .faq-empty { text-align: center; color: var(--muted); margin: 0 auto 12px; } .faq details[hidden] { display: none; } /* ---------- sticky mobile CTA after the hero */ .m-cta { display: none; } @media (max-width: 760px) { .m-cta { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 9px; padding-inline: 16px 9px; border-radius: 18px; color: #fff; background: color-mix(in srgb, var(--emerald-900) 93%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(245,220,150,.22); box-shadow: 0 20px 40px -12px rgba(3,35,26,.55); translate: 0 150%; transition: translate .45s var(--ease-out); } .m-cta.show { translate: 0 0; } .m-cta-t { min-width: 0; } .m-cta-t b { display: block; font: 800 .95rem var(--f-head); } .m-cta-t small { display: block; color: #CFE0D8; font-size: .78rem; } .m-cta-t small b { display: inline; font: 700 .78rem var(--f-num); } .m-cta .btn { flex: none; } } /* ---------- gold light sweeps across section headings as they arrive */ h2.sweep { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, var(--sw-ink, var(--ink)) 0 40%, var(--gold-600) 46%, var(--shine) 50%, var(--gold-600) 54%, var(--sw-ink, var(--ink)) 60% 100%); background-size: 300% 100%; background-position: 100% 0; } h2.sweep.swept { background-position: 0 0; transition: background-position 1.5s cubic-bezier(.4, 0, .2, 1); } .cta-box h2.sweep { --sw-ink: #fff; } .band h2.sweep, .dark-band h2.sweep { --sw-ink: #fff; } /* ---------- footer wordmark answers scroll speed */ .foot-word > span[data-word] { transform-origin: 50% 100%; will-change: transform; color: rgba(245,220,150, calc(.075 + var(--boost, 0) * .3)); } /* ---------- 404 */ .nf { min-height: calc(100dvh - 72px); display: grid; place-items: center; text-align: center; padding-block: 48px 80px; } .nf-inner { display: grid; gap: 18px; justify-items: center; max-width: 620px; } .nf-mark { width: 120px; height: auto; animation: nf-float 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(198,149,54,.35)); } @keyframes nf-float { 50% { transform: translateY(-14px) rotate(-3deg); } } .nf-code { font: 800 clamp(4.5rem, 16vw, 9rem)/1 var(--f-num); letter-spacing: -.04em; background: linear-gradient(100deg, var(--gold-600), var(--shine) 50%, var(--gold-600)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nf h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); text-wrap: balance; } .nf p { color: var(--muted); font-size: 1.06rem; } .nf-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* ---------- reduced motion: the finished picture */ @media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } .scene, .scene.on { transition: none; } .js .dash:not(.play) .ln-a, .js .dash:not(.play) .ln-b { stroke-dashoffset: 0; } .js .vs:not(.play) tbody .mk { transform: none; } .js .dev-live:not(.done) .evt { opacity: 1; transform: none; } } .wc.ours::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 40px; height: 40px; margin-left: -20px; border-radius: 6px; border: 4px solid #fff; background: repeating-conic-gradient(#03231A 0 25%, #fff 0 50%) 0 0 / 8px 8px; } /* ---------- performance: the lede paints at first paint (it is the mobile LCP), and sections below the hero are laid out only when they come near the viewport (content-visibility; sizes are remembered once seen) */ .js .hero-copy > .lede { animation-name: rise-t; } @keyframes rise-t { from { transform: translateY(22px); } } main > section.section:not(#how):not(#try), .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; } .fact .fact-note { font-size: .74rem; font-weight: 500; color: var(--muted); line-height: 1.5; margin-top: 4px; } /* round 4: plan names (Arabic, English beneath), VAT line, plan tag on features that need a plan */ .plan-name .plan-en { display: block; font: 600 .78rem/1.3 var(--f-num); color: var(--muted); letter-spacing: .02em; margin-top: 2px; } th .plan-en { display: block; font: 600 .72rem var(--f-num); color: var(--muted); } .vat-note { text-align: center; margin-top: 14px; font-size: .86rem; font-weight: 600; color: var(--muted); } .plan-tag { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font: 700 .66rem/1.6 var(--f-text); letter-spacing: 0; color: var(--gold-ink); background: color-mix(in srgb, var(--gold-600) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold-600) 45%, transparent); white-space: nowrap; } /* round 5 (2026-11-02): per-account pricing — four plans with Free, price calculator, 5-column comparison */ .plans.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: none; } .plans-4 .plan { padding: 26px 20px; } .plans-4 .price { font-size: 2.5rem; } .plan li.dim { color: var(--muted); } .plan li.dim .ic { color: var(--muted); opacity: .7; } @media (max-width: 1100px) { .plans.plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; gap: 24px 20px; } .plans-4 .plan.featured { transform: none; } } @media (max-width: 700px) { .plans.plans-4 { grid-template-columns: minmax(0, 1fr); max-width: 520px; } } .field-l { font-weight: 700; font-size: .92rem; } .calc .billing { justify-self: start; } .calc-out .q-period { margin-top: -8px; font-size: .86rem; } .calc-out .q-quote { display: none; color: #CFE0D8; font-size: .95rem; } .calc-out .q-quote a { color: var(--gold-300); font-weight: 700; } .calc.is-quote .q-row { display: none; } .calc.is-quote .q-quote { display: block; } .matrix-4 thead th small.num { display: block; } .matrix .mx { font-size: .84rem; font-weight: 600; color: var(--ink-2); } .matrix .mx-sub { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 3px; } .matrix td .num { font-family: var(--f-num); font-weight: 700; } @media (max-width: 640px) { .matrix-4 { font-size: .8rem; } .matrix-4 thead th { font-size: .74rem; } .matrix-4 thead th:not(:first-child) { width: 50px; } .matrix-4 th, .matrix-4 td { padding: 9px 3px; } .matrix-4 .mx { font-size: .7rem; } .matrix-4 .ic { width: 18px; height: 18px; } } /* Merchant app: store badges stay «coming soon» (no link) until the real Play / App Store listings exist */ .app-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; } .app-get { display: grid; gap: 14px; justify-items: start; } .store-badges { display: flex; flex-wrap: wrap; gap: 12px; } .store-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 18px; border-radius: 14px; background: var(--emerald-900); color: #fff; border: 1px solid rgba(255,255,255,.12); opacity: .82; cursor: default; } .store-badge .ic { width: 22px; height: 22px; color: var(--gold-300); } .store-badge small { display: block; font-size: .74rem; color: #CFE0D7; line-height: 1.2; } .store-badge b { display: block; font-size: 1.05rem; line-height: 1.25; } .app-note { margin: 0; color: var(--muted); font-size: .92rem; max-width: 46ch; } @media (max-width: 820px) { .app-grid { grid-template-columns: 1fr; gap: 20px; } } /* ---------- C17 hero: the card lives on a phone; a stamp lands every 3 s, "+24" flies to the points, the notification swaps; the card flips to the QR the cashier scans. Mouse leans the stage (fx.js), a phone's tilt leans it too (v3.js). The phone fades out at the bottom, so its height never moves the layout. */ .stage { height: 660px; } .stage .stage-3d { place-items: end center; padding-bottom: 0; } .hero-phone { position: relative; width: 300px; height: 470px; padding: 10px 10px 0; border-radius: 46px 46px 0 0; background: linear-gradient(150deg, #24352E, #050E0A 60%); box-shadow: 0 0 0 1.5px #33463F, inset 0 0 0 2px #0A1712, 0 50px 90px -34px rgba(3,35,26,.6); -webkit-mask: linear-gradient(#000 84%, transparent); mask: linear-gradient(#000 84%, transparent); translate: calc(var(--px) * 16px) calc(var(--py) * 10px) 30px; transform-origin: 50% 100%; animation: hp-float 7s ease-in-out infinite; } @keyframes hp-float { 50% { transform: translateY(-10px); } } .hp-screen { position: relative; height: 100%; border-radius: 37px 37px 0 0; overflow: hidden; perspective: 1000px; background: radial-gradient(120% 60% at 50% 0%, #FFFFFF, #EEF3F0 60%, #E3ECE7); } .hero-phone .phone-bar { color: #03231A; } .stage .hero-phone .toast { position: absolute; top: 48px; inset-inline: 8px; width: auto; bottom: auto; translate: none; z-index: 4; background: rgba(255,255,255,.86); border: 1px solid rgba(3,35,26,.08); box-shadow: 0 10px 24px -14px rgba(3,35,26,.5); color: #03231A; } .stage .hero-phone .toast small, .hero-phone .toast [data-toast-text] { color: #4D6159; font-size: .76rem; line-height: 1.45; display: block; } .hero-phone .toast b { font-size: .8rem; } .hero-phone #toast-a { translate: none; } /* beats the old floating-toast centring (html[dir] .stage .toast-a) */ .card-flip { position: absolute; top: 142px; inset-inline: 10px; transform-style: preserve-3d; transition: transform .75s var(--ease-out); cursor: pointer; } .card-flip.is-flipped { transform: rotateY(180deg); } .card-flip > .pass { position: relative; width: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .stage .card-flip .pass-front { scale: none; translate: none; animation: none; transform: none; } /* not the RTL icon mirror (html[dir=rtl] .flip) */ .stage .card-flip .pass-front.flip { animation: card-flip .56s ease-in-out; } .card-flip .pass-qr-back { position: absolute; inset: 0; transform: rotateY(180deg); align-content: start; } .pass-qr-back .pass-qr { margin-top: 2px; } .pass-qr-back .pass-qr svg { width: 112px; height: 112px; } .pts-fly { position: absolute; top: 58px; inset-inline-end: 18px; z-index: 3; padding: 2px 9px; border-radius: 999px; pointer-events: none; font: 800 .95rem var(--f-num); color: var(--emerald-900); background: linear-gradient(135deg, var(--gold-300), var(--gold-600)); opacity: 0; } .pts-fly.go { animation: pts-fly 1.1s var(--ease-out) both; } @keyframes pts-fly { 0% { opacity: 0; transform: translateY(46px) scale(.6); } 25% { opacity: 1; transform: translateY(26px) scale(1.08); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(.9); } } #hero-points.bump { animation: pop-in .5s .7s var(--ease-spring) both; } .hp-lottie { position: absolute; inset: 10px 10px 0; display: none; } .hero-phone.has-lottie .hp-lottie { display: block; } .hero-phone.has-lottie .hp-screen { visibility: hidden; } .flip-btn { position: absolute; z-index: 7; bottom: 18px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; white-space: nowrap; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink); font: 700 .9rem var(--f-text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 26px -14px rgba(3,35,26,.55); transition: background .2s, transform .15s; } .flip-btn .ic { width: 18px; height: 18px; color: var(--gold-ink); } .flip-btn:hover { background: var(--surface); } .flip-btn:active { transform: scale(.96); } .flip-btn[aria-pressed="true"] { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: transparent; } .flip-btn[aria-pressed="true"] .ic { color: currentColor; } @media (max-width: 1020px) { .stage { height: 640px; } } @media (max-width: 860px) { .stage { height: 620px; } } @media (max-width: 480px) { .stage { height: 560px; } .hero-phone { scale: .86; } .stage .hero-phone .toast { top: 48px; bottom: auto; inset-inline: 8px; translate: none; } } /* ---------- C17 story: scene 6, the gift is redeemed at the till and the card starts again */ .s6 { padding-top: 70px; } .mini-pass.redeem { justify-items: center; } .mini-pass.redeem .mp-top { justify-self: stretch; } .mp-qr { margin: 0; width: 120px; } .mp-qr svg { width: 120px; height: 120px; border-radius: 8px; } .till-ok { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font: 800 .9rem var(--f-head); background: var(--emerald-500); color: #fff; } .till-ok .ic { width: 18px; height: 18px; } .scene.on .till-ok { animation: pop-in .55s 1.5s var(--ease-spring) both; } .restart { width: 222px; display: grid; gap: 8px; justify-items: center; text-align: center; } .restart .mp-stamps { width: 100%; } .restart .mp-stamps i { background: transparent; border: 1.5px dashed rgba(3,35,26,.28); } .restart .mp-stamps i::after { display: none; } .restart .mp-stamps i.g { color: var(--gold-600); border-style: solid; border-color: var(--gold-600); } .restart small { color: #4D6159; font-weight: 600; } .scene.on .restart { animation: rise-in .6s 2.2s var(--ease-out) both; } .scene.s6.on .mp-stamps i { animation: none; } @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } } /* ---------- C17 «جرّبه من هنا»: a receipt becomes a record */ .scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: start; } .rc-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; } .rc { position: relative; display: grid; gap: 7px; align-content: start; padding: 14px 12px 18px; border: 0; border-radius: 12px; cursor: pointer; text-align: start; font: inherit; color: #03231A; background: #fff; box-shadow: 0 0 0 1px rgba(3,35,26,.08), 0 14px 30px -20px rgba(3,35,26,.55); transition: transform .25s var(--ease-out), box-shadow .25s; } .rc::after { content: ""; position: absolute; inset-inline: 0; bottom: -5px; height: 10px; background: radial-gradient(5px at 50% 100%, var(--bg) 98%, transparent) 50% 0 / 14px 10px repeat-x; } .rc:hover { transform: translateY(-3px); } .rc[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--gold-600), 0 18px 36px -18px rgba(198,149,54,.7); transform: translateY(-4px); } .rc:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .rc-shop { font: 800 .86rem/1.3 var(--f-head); min-height: 2.6em; } .rc-l { height: 6px; border-radius: 4px; background: #DCE6E1; } .rc-l.m { width: 64%; } .rc-tot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; font-size: .74rem; font-weight: 700; color: #4D6159; } .rc-tot b { color: #03231A; font-size: .84rem; } .rc-qr { width: 64px; height: 64px; justify-self: center; margin-top: 2px; } .rc-sample { grid-column: 1 / -1; margin: 4px 0 0; color: var(--muted); font-size: .84rem; } .rc-out { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 20px; border-radius: 22px; min-height: 452px; align-content: start; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rc-head b { font: 800 1.1rem var(--f-head); color: var(--ink); } .rc-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; } .rc-status.ok { background: color-mix(in srgb, var(--emerald-500) 16%, transparent); color: var(--accent-ink); } .rc-status.hold { background: color-mix(in srgb, var(--gold-600) 18%, transparent); color: var(--gold-ink); } .rc-status.ai { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); } .rc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; } .rc-fields div { display: grid; gap: 1px; min-width: 0; } .rc-fields dt { font-size: .74rem; font-weight: 700; color: var(--muted); } .rc-fields dd { margin: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; min-height: 1.5em; } html[dir="rtl"] .rc-fields dd[dir="ltr"] { text-align: right; } .rc-points { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; background: var(--emerald-900); color: #fff; } .rc-points > span { font-weight: 700; color: var(--gold-300); font-size: .86rem; } .rc-points b { font: 800 1.7rem var(--f-num); justify-self: end; color: #fff; } .rc-points small { grid-column: 1 / -1; color: #CFE0D8; font-size: .78rem; min-height: 1.2em; } .rc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rc-checks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .88rem; color: var(--ink-2); } .rc-checks .ic { width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.6; } .rc-checks .ok .ic { color: var(--accent); } .rc-checks .hold .ic { color: var(--gold-ink); } .rc-checks .info .ic { color: var(--muted); } .rc-laser { position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--gold-600); box-shadow: 0 0 16px 3px rgba(198,149,54,.6); opacity: 0; pointer-events: none; } .rc-out.reading .rc-laser { animation: rc-read .7s ease-in-out both; } @keyframes rc-read { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(440px); } } .rc-out.reading .rc-fields dd, .rc-out.reading .rc-points b, .rc-out.reading .rc-checks li { animation: rise-in .45s var(--ease-out) both; } .rc-out.reading .rc-checks li:nth-child(2) { animation-delay: .08s; } .rc-out.reading .rc-checks li:nth-child(3) { animation-delay: .16s; } .rc-out.reading .rc-checks li:nth-child(4) { animation-delay: .24s; } .rc-out.reading .rc-checks li:nth-child(5) { animation-delay: .32s; } .rc-ai { margin-top: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } .rc-ai summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; font-weight: 800; color: var(--ink); list-style: none; min-height: 48px; } .rc-ai summary::-webkit-details-marker { display: none; } .rc-ai summary .ic { width: 20px; height: 20px; color: var(--gold-ink); flex: none; } .rc-ai[open] summary { border-bottom: 1px solid var(--line); } .rc-ai-note { margin: 14px 18px 0; color: var(--muted); font-size: .9rem; max-width: 70ch; } .rc-ai-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 14px 18px 18px; } .rc-ai-form label { display: grid; gap: 6px; font-weight: 700; font-size: .86rem; color: var(--ink-2); min-width: 0; } .rc-ai-form input, .rc-ai-form select { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 .92rem var(--f-text); } .rc-ai-form input[type="file"] { padding: 8px; } .rc-ai-msg { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--muted); } .rc-ai-msg.err { color: #C2412D; } @media (max-width: 960px) { .scan-grid { grid-template-columns: minmax(0, 1fr); } .rc-ai-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 560px) { .rc-picks { gap: 8px; } .rc { padding: 10px 8px 14px; } .rc-shop { font-size: .76rem; } .rc-qr { width: 52px; height: 52px; } .rc-out { padding: 16px; min-height: 0; } .rc-ai-form { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .hero-phone { animation: none; } .card-flip { transition: none; } .pts-fly { display: none; } } /* Below-the-fold sections skip style and layout until they come near the screen (Lighthouse mobile) */ main > :not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }