/* QR Craft website * ─────────────────────────────────────────────────────────────────────────── * The palette, relief and type are the app's own: lib/core/theme/app_colors.dart * (Light and Midnight Orange) and lib/core/theme/neumorphic.dart (a top-left * light source, a raised pair and a carved pair). Fraunces carries the claim, * as it does across the store listing; DM Sans, the app's face, does the rest. */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dmsans-400.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/dmsans-500.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/dmsans-600.woff2") format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/dmsans-700.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-600.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/fraunces-700.woff2") format("woff2"); } /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --bg: #ECEFF3; --bg-2: #E3E7EE; --surface: #F1F4F8; --paper: #F6F1EB; --paper-2: #F1E4D6; --ink: #0F172A; --ink-2: #334155; --dim: #64748B; --dimmer: #94A3B8; --line: #DCE1EA; --line-2: #C3CAD8; --brand: #F97316; --brand-2: #EA580C; --brand-3: #FB923C; --brand-soft: rgba(249, 115, 22, .12); --brand-glow: rgba(249, 115, 22, .30); --brand-ink: #C2410C; --amber: #F59E0B; --success: #16A34A; --danger: #DC2626; --info: #0284C7; --warning: #D97706; --neu-hi: rgba(255, 255, 255, .95); --neu-lo: rgba(163, 173, 192, .70); --raise: 7px 7px 16px var(--neu-lo), -7px -7px 16px var(--neu-hi); --raise-sm: 4px 4px 9px var(--neu-lo), -4px -4px 9px var(--neu-hi); --raise-xs: 2px 2px 5px var(--neu-lo), -2px -2px 5px var(--neu-hi); --inset: inset 4px 4px 8px var(--neu-lo), inset -4px -4px 8px var(--neu-hi); --inset-sm: inset 2px 2px 5px var(--neu-lo), inset -2px -2px 5px var(--neu-hi); --sheen: linear-gradient(145deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); --glass: rgba(236, 239, 243, .76); --scrim: rgba(15, 23, 42, .42); --shadow-deep: 0 30px 60px -24px rgba(15, 23, 42, .35); --ink-band: #151515; --ink-band-2: #1f1f1f; --on-ink: #F7F2EC; --on-ink-dim: #B9AEA3; --f-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 30px; --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --hdr-h: 72px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1E1815; --bg-2: #2C231C; --surface: #241D19; --paper: #221A16; --paper-2: #2B211B; --ink: #FDF8F4; --ink-2: #E7D8CB; --dim: #B59B87; --dimmer: #8A7565; --line: #3A2C22; --line-2: #574334; --brand-soft: rgba(249, 115, 22, .16); --brand-ink: #FB923C; --success: #22C55E; --danger: #EF4444; --info: #60A5FA; --warning: #FACC15; --neu-hi: rgba(52, 43, 36, .70); --neu-lo: rgba(8, 6, 5, .80); --sheen: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%); --glass: rgba(30, 24, 21, .78); --scrim: rgba(0, 0, 0, .55); --shadow-deep: 0 30px 60px -24px rgba(0, 0, 0, .7); --ink-band: #0F0C0A; --ink-band-2: #171210; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #1E1815; --bg-2: #2C231C; --surface: #241D19; --paper: #221A16; --paper-2: #2B211B; --ink: #FDF8F4; --ink-2: #E7D8CB; --dim: #B59B87; --dimmer: #8A7565; --line: #3A2C22; --line-2: #574334; --brand-soft: rgba(249, 115, 22, .16); --brand-ink: #FB923C; --success: #22C55E; --danger: #EF4444; --info: #60A5FA; --warning: #FACC15; --neu-hi: rgba(52, 43, 36, .70); --neu-lo: rgba(8, 6, 5, .80); --sheen: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 60%); --glass: rgba(30, 24, 21, .78); --scrim: rgba(0, 0, 0, .55); --shadow-deep: 0 30px 60px -24px rgba(0, 0, 0, .7); --ink-band: #0F0C0A; --ink-band-2: #171210; color-scheme: dark; } /* ── Base ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background-color .4s var(--ease), color .4s var(--ease); } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: var(--brand-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { color: var(--brand-2); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } p, h1, h2, h3, h4, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } code, pre { font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace; font-size: .88em; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 10px; } ::selection { background: var(--brand); color: #fff; } [hidden] { display: none !important; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ic { width: 1.25em; height: 1.25em; flex: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: top .2s; } .skip:focus { top: 16px; color: #fff; } .wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 44px); } /* ── Type ───────────────────────────────────────────────────────────────── */ .display, .h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.022em; color: var(--ink); font-optical-sizing: auto; } .display { font-size: clamp(2.7rem, 6.2vw, 5.4rem); line-height: .98; } .display-md { font-size: clamp(2.5rem, 5vw, 4.4rem); } .h2 { font-size: clamp(2.05rem, 4.3vw, 3.55rem); line-height: 1.03; } .display em, .h2 em { font-style: normal; color: var(--brand); } .kd { color: var(--brand); } .lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 36em; } .lead-sm { font-size: 1rem; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 5px; height: 20px; border-radius: 3px; background: var(--brand); box-shadow: 0 0 12px var(--brand-glow); } .eyebrow i { font-style: normal; color: var(--brand); } .mini-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--dim); margin: 18px 0 10px; } .hint { font-size: .9rem; color: var(--dim); line-height: 1.55; margin-top: 12px; } .gate { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; letter-spacing: 0; color: var(--dim); } .gate .ic { width: 14px; height: 14px; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 24px; border-radius: 999px; border: 0; font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s; } .btn .ic { width: 20px; height: 20px; } .btn:active { transform: scale(.97); } .btn-primary { color: #fff; background: linear-gradient(100deg, #FDA766 0%, #F97316 55%, #E2560B 100%); box-shadow: 0 10px 24px -8px rgba(234, 88, 12, .6), inset 0 1px 0 rgba(255, 255, 255, .35); text-shadow: 0 1px 1px rgba(154, 52, 18, .35); } .btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(234, 88, 12, .7), inset 0 1px 0 rgba(255, 255, 255, .35); } .btn-ghost { color: var(--ink); background: var(--bg); box-shadow: var(--raise-sm); } .btn-ghost:hover { color: var(--brand-ink); transform: translateY(-2px); } .btn-ghost:active { box-shadow: var(--inset-sm); } .btn-sm { --h: 42px; padding: 0 18px; font-size: .92rem; } .btn-xs { --h: 34px; padding: 0 14px; font-size: .8rem; } .btn-block { width: 100%; } .play-badge { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 24px 8px 18px; border-radius: 18px; background: #0f0f10; color: #fff; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .play-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 36px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .2); } .play-badge .pl { width: 28px; height: 28px; } .play-badge span { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; font-size: 1.28rem; letter-spacing: -.01em; } .play-badge small { font-size: .66rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 2px; } .play-badge-lg { min-height: 66px; padding-inline: 22px 30px; } .round-btn { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--bg); color: var(--ink); box-shadow: var(--raise-sm); transition: transform .2s var(--ease), color .2s, box-shadow .2s; } .round-btn:hover { color: var(--brand-ink); transform: translateY(-2px); } .round-btn:active { box-shadow: var(--inset-sm); transform: none; } .round-btn:disabled { opacity: .4; cursor: default; transform: none; } .round-nav { display: flex; gap: 14px; } /* ── Segmented, chips, fields, wells ────────────────────────────────────── */ .well { background: var(--bg); box-shadow: var(--inset); border-radius: var(--r-md); } .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 6px; border-radius: 18px; background: var(--bg); box-shadow: var(--inset-sm); } .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 10px; border: 1.5px solid transparent; border-radius: 13px; background: transparent; font-weight: 600; font-size: .9rem; color: var(--dim); white-space: nowrap; transition: color .2s, background .25s, box-shadow .25s, border-color .25s; } .seg button .ic { width: 17px; height: 17px; } .seg button:hover { color: var(--ink); } .seg button[aria-checked="true"], .seg button[aria-selected="true"] { color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 13%, var(--bg)); border-color: var(--brand); box-shadow: 0 0 14px -2px var(--brand-glow); } .seg-sm button { min-height: 36px; font-size: .82rem; } .chip-row { display: flex; flex-wrap: wrap; gap: 10px; } .chip-row button, .sample-chips button, .scene-chips button, .flow-chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid transparent; background: var(--bg); box-shadow: var(--raise-xs); font-weight: 600; font-size: .9rem; color: var(--ink-2); transition: color .2s, box-shadow .25s, border-color .25s, transform .2s var(--ease), background .25s; } .chip-row button .ic, .scene-chips button .ic, .flow-chips button .ic { width: 18px; height: 18px; color: var(--brand); } .chip-row button:hover, .sample-chips button:hover, .scene-chips button:hover, .flow-chips button:hover { transform: translateY(-2px); color: var(--ink); } .chip-row button[aria-checked="true"], .scene-chips button[aria-checked="true"], .flow-chips button[aria-checked="true"] { color: var(--brand-ink); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--bg)); box-shadow: 0 0 16px -4px var(--brand-glow); } .chip-row .badge-ad { display: inline-flex; font-size: .66rem; font-weight: 700; color: var(--dim); opacity: .8; } .field { display: grid; gap: 7px; margin-top: 14px; } .field > span { font-size: .8rem; font-weight: 700; color: var(--dim); letter-spacing: .02em; } .field > span small { font-weight: 500; color: var(--dimmer); margin-left: 6px; } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 16px; background: var(--bg); box-shadow: var(--inset-sm); outline: none; color: var(--ink); transition: border-color .2s, box-shadow .2s; } .field textarea { min-height: 88px; resize: vertical; line-height: 1.5; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); } .field input::placeholder, .field textarea::placeholder { color: var(--dimmer); } .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .fields .field { grid-column: span 2; margin-top: 12px; } .fields .field.half { grid-column: span 1; } .fields .field:first-child, .fields .field.half:nth-child(2) { margin-top: 0; } .checks { display: grid; gap: 12px; margin-top: 26px; } .checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); line-height: 1.5; } .checks .ic { width: 22px; height: 22px; color: var(--brand); margin-top: 1px; } .checks-sm { gap: 9px; margin-top: 22px; font-size: .94rem; } .checks-sm .ic { width: 19px; height: 19px; } .aside-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 14px 18px; border-radius: 18px; background: var(--brand-soft); color: var(--ink-2); font-size: .93rem; line-height: 1.5; } .aside-note .ic { color: var(--brand); width: 22px; height: 22px; margin-top: 1px; } /* ── Header ─────────────────────────────────────────────────────────────── */ .hdr { position: fixed; inset: 12px 0 auto; z-index: 100; padding-inline: clamp(10px, 2.4vw, 28px); pointer-events: none; } .hdr-in { pointer-events: auto; max-width: 1240px; margin-inline: auto; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 10px 0 16px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--line-2) 45%, transparent); transition: box-shadow .35s var(--ease), background .35s; } .hdr.scrolled .hdr-in { box-shadow: var(--raise-sm), 0 0 0 1px color-mix(in srgb, var(--line-2) 30%, transparent); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; } .brand img { border-radius: 10px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); } .wm { font-family: var(--f-display); font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em; } .wm b { color: var(--brand); font-weight: 700; } .brand:hover { color: var(--ink); } .nav { margin-inline: auto; } .nav ul { display: flex; gap: 2px; } .nav a { position: relative; display: block; padding: 9px 13px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .92rem; transition: color .2s, background .2s; } .nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } .nav a.on { color: var(--brand-ink); } .nav a.on::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 2px; background: var(--brand); } .theme-seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bg); box-shadow: var(--inset-sm); flex: none; } .theme-seg button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--dim); display: grid; place-items: center; transition: color .2s, background .25s, box-shadow .25s; } .theme-seg button .ic { width: 18px; height: 18px; } .theme-seg button:hover { color: var(--ink); } .theme-seg button[aria-checked="true"] { color: #fff; background: var(--brand); box-shadow: 0 4px 12px -3px var(--brand-glow); } .menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg); box-shadow: var(--raise-xs); color: var(--ink); place-items: center; } .menu-btn .ic { width: 22px; height: 22px; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: min(100svh, 980px); padding: calc(var(--hdr-h) + 56px) 0 90px; overflow: hidden; isolation: isolate; } .field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .9; -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 78%); } .hero-pool { position: absolute; z-index: -1; width: 900px; height: 900px; right: -220px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 115, 22, .22), rgba(249, 115, 22, .08) 55%, transparent 72%); filter: blur(6px); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hero-copy .lead { margin-top: 26px; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; color: var(--dim); font-weight: 600; font-size: .92rem; } .hero-trust li { display: inline-flex; align-items: center; gap: 8px; } .hero-trust .ic { width: 18px; height: 18px; color: var(--brand); } .hero-stage { position: relative; display: grid; place-items: center; min-height: 700px; } .orbit { position: absolute; width: min(640px, 118%); aspect-ratio: 1; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; pointer-events: none; } .orbit-ring { fill: none; stroke: color-mix(in srgb, var(--line-2) 70%, transparent); stroke-width: 1.5; } .orbit-dash { fill: none; stroke: var(--brand); stroke-opacity: .35; stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; transform-origin: 320px 320px; animation: spin 60s linear infinite; } .orbit-arc { fill: none; stroke: url(#arcGrad); stroke-width: 26; stroke-linecap: round; opacity: .9; stroke-dasharray: 760 900; stroke-dashoffset: 760; transform-origin: 320px 320px; animation: drawArc 1.8s .3s var(--ease) forwards; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes drawArc { to { stroke-dashoffset: 0; } } .orbit-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--raise-sm), 0 0 0 1px color-mix(in srgb, var(--line-2) 40%, transparent); text-decoration: none; color: var(--ink); line-height: 1.2; white-space: nowrap; transition: transform .5s var(--ease), box-shadow .3s; animation: bob 6s ease-in-out infinite; } .orbit-chip:hover { color: var(--ink); box-shadow: var(--raise), 0 0 0 1.5px var(--brand); } .orbit-chip b { display: block; font-size: .9rem; } .orbit-chip small { display: block; font-size: .74rem; color: var(--dim); font-weight: 500; } .oc-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; } .oc-ic .ic { width: 22px; height: 22px; } .oc-ic.ok { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); } .oc-ic.bad { color: #fff; background: var(--danger); } .oc-ic.brand { color: #fff; background: var(--brand); font-size: 1.1rem; } .oc-1 { left: -26%; top: 9%; } .oc-2 { right: -23%; top: 45%; animation-delay: -2s; } .oc-3 { left: 2%; bottom: 14%; animation-delay: -4s; } @keyframes bob { 50% { translate: 0 -10px; } } .hero-card { position: absolute; z-index: 4; width: 236px; right: -17%; bottom: -4%; rotate: -9deg; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .35)); transition: transform .5s var(--ease); } .scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 30px; height: 48px; border-radius: 20px; box-shadow: var(--inset-sm); display: grid; justify-items: center; padding-top: 9px; } .scroll-cue span { width: 5px; height: 10px; border-radius: 3px; background: var(--brand); animation: cue 1.8s ease-in-out infinite; } @keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } } /* ── Phone replica ──────────────────────────────────────────────────────── */ .phone { --pw: 318px; position: relative; z-index: 2; width: var(--pw); height: calc(var(--pw) * 2.06); border-radius: 46px; padding: 10px; flex: none; background: linear-gradient(145deg, #2b2b2e, #0d0d0f 60%, #1b1b1d); box-shadow: var(--shadow-deep), 0 0 0 1.5px rgba(255, 255, 255, .06) inset, 0 2px 0 rgba(255, 255, 255, .12) inset; font-size: 13px; line-height: 1.35; color: var(--ink); } .phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 20px; background: #050505; z-index: 6; } .phone > .ph-sb, .phone > .ph-body, .phone > .ph-nav { position: relative; } .phone > .ph-sb { border-radius: 36px 36px 0 0; } .phone .ph-sb { height: 40px; padding: 12px 26px 0; display: flex; justify-content: space-between; align-items: center; background: var(--bg); font-weight: 700; font-size: 12px; color: var(--ink); } .ph-sb-ic { display: flex; gap: 4px; } .ph-sb-ic .ic { width: 13px; height: 13px; } .phone .ph-body { height: calc(100% - 40px - 74px); background: var(--bg); padding: 6px 16px 0; overflow: hidden; display: flex; flex-direction: column; } .phone .ph-body-scroll { overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding-bottom: 20px; height: calc(100% - 40px); border-radius: 0 0 36px 36px; } .phone .ph-body-scroll::-webkit-scrollbar { display: none; } .ph-title { font-size: 25px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin: 2px 2px 8px; } .ph-titlebar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .ph-titlebar .ph-title { margin-bottom: 4px; } .ph-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 4px 2px 10px; } .ph-eyebrow::before { content: ""; width: 4px; height: 15px; border-radius: 3px; background: var(--brand); } .ph-searchrow { display: flex; gap: 10px; margin-bottom: 12px; } .ph-search { flex: 1; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border-radius: 16px; background: var(--bg); box-shadow: var(--inset-sm); color: var(--dim); min-width: 0; } .ph-search .ic { width: 18px; height: 18px; } .ph-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 13.5px; color: var(--ink); } .ph-search input::placeholder, .ph-ph { color: var(--dimmer); font-size: 13.5px; } .ph-search input::-webkit-search-cancel-button { filter: grayscale(1); } .ph-search-full { flex: none; margin: 4px 0 12px; } .ph-sq { width: 46px; height: 46px; border: 0; border-radius: 16px; background: var(--bg); box-shadow: var(--raise-xs); color: var(--brand); display: grid; place-items: center; flex: none; } .ph-sq .ic { width: 22px; height: 22px; } .ph-sq .ic-grid { display: none; } .ph-sq[aria-pressed="true"] { box-shadow: var(--inset-sm); } .ph-sq[aria-pressed="true"] .ic-ring { display: none; } .ph-sq[aria-pressed="true"] .ic-grid { display: block; } .ph-scroll { flex: 1; overflow-y: auto; margin: 0 -16px; padding: 4px 16px 18px; scrollbar-width: none; overscroll-behavior: contain; position: relative; } .ph-scroll::-webkit-scrollbar { display: none; } .ph-empty { display: grid; gap: 4px; text-align: center; padding: 30px 10px; color: var(--dim); } .ph-empty b { color: var(--ink); font-size: 15px; } .ph-icon-btn { width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--brand); display: grid; place-items: center; } .ph-icon-btn .ic { width: 22px; height: 22px; } .ph-icon-btn[aria-pressed="true"] { color: var(--amber); } .ph-icon-btn[aria-pressed="true"] .ic { fill: currentColor; } .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; } .tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; width: 100%; min-height: 108px; padding: 11px 9px 10px 10px; border: 0; border-radius: 18px; text-align: left; background: var(--sheen), var(--bg); box-shadow: var(--raise-sm); color: var(--ink); transition: transform .25s var(--ease-spring), box-shadow .25s; } .tile:hover { transform: translateY(-3px); } .tile:active { box-shadow: var(--inset-sm); transform: none; } .tile .plate { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; } .tile .plate .ic { width: 19px; height: 19px; } .tile b { display: block; font-size: 13px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; } .tile small { display: block; font-size: 10.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.2; } .tile.in { animation: tileIn .45s var(--ease-spring) both; } @keyframes tileIn { from { opacity: 0; transform: translateY(12px) scale(.94); } } .plate { background: color-mix(in srgb, var(--c) 18%, var(--bg)); color: var(--c); box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--c) 60%, transparent); } .ph-nav { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 74px; border-radius: 0 0 36px 36px; background: var(--bg); padding: 0 10px 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; } .ph-nav::before { content: ""; position: absolute; inset: 0 8px 10px; border-radius: 26px; background: var(--bg); box-shadow: var(--raise-sm); } .ph-nav > * { position: relative; display: grid; justify-items: center; gap: 1px; text-decoration: none; color: var(--dim); font-size: 10.5px; font-weight: 500; } .ph-nav .pill { width: 50px; height: 30px; border-radius: 12px; display: grid; place-items: center; transition: background .25s; } .ph-nav .pill .ic { width: 20px; height: 20px; } .ph-nav a:hover { color: var(--ink); } .ph-nav .on { color: var(--brand); font-weight: 700; } .ph-nav .on .pill { background: color-mix(in srgb, var(--brand) 14%, var(--bg)); } /* Wheel view */ .wheel { position: relative; width: 100%; aspect-ratio: 1; margin-top: 16px; touch-action: none; user-select: none; } .wheel-dial { position: absolute; inset: 0; border-radius: 50%; box-shadow: var(--inset); transition: transform .5s var(--ease); } .wheel-dial.dragging { transition: none; } .wheel-dot { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 13px; display: grid; place-items: center; border: 0; box-shadow: var(--raise-xs); } .wheel-dot .ic { width: 20px; height: 20px; } .wheel-hub { position: absolute; inset: 27%; border-radius: 50%; background: var(--sheen), var(--bg); box-shadow: var(--raise); display: grid; place-content: center; justify-items: center; text-align: center; gap: 1px; padding: 6px; } .wheel-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--brand)) 18%, var(--bg)); color: var(--c, var(--brand)); } .wheel-ic .ic { width: 18px; height: 18px; } .wheel-hub b { font-size: 14px; margin-top: 3px; } .wheel-hub small { font-size: 10px; color: var(--dim); margin-bottom: 5px; } .wheel-pointer { position: absolute; top: -4px; left: 50%; width: 0; height: 0; margin-left: -7px; border: 7px solid transparent; border-top: 10px solid var(--brand); } /* ── Ribbon ─────────────────────────────────────────────────────────────── */ .ribbon { position: relative; padding: 10px 0 70px; } .ribbon-svg { width: 100%; height: clamp(150px, 16vw, 240px); overflow: hidden; } .ribbon-band { fill: none; stroke: var(--ink-band); stroke-width: 58; stroke-linecap: round; } .ribbon-text { font-family: var(--f-sans); font-size: 22px; font-weight: 700; letter-spacing: .14em; fill: var(--on-ink); dominant-baseline: central; } .proof { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .proof li { text-align: center; padding: 10px 6px; } .proof b { display: block; font-family: var(--f-display); font-size: clamp(2.4rem, 4.8vw, 3.8rem); font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; } .proof li:last-child b { color: var(--brand); } .proof span { display: block; margin-top: 8px; color: var(--dim); font-size: .92rem; font-weight: 500; } /* ── Sections ───────────────────────────────────────────────────────────── */ .sec { position: relative; padding: clamp(80px, 11vw, 150px) 0; } .sec-paper { background: radial-gradient(60% 50% at 85% 0%, rgba(249, 115, 22, .10), transparent 70%), var(--paper); } .sec-paper + .sec:not(.sec-paper) { padding-top: clamp(70px, 9vw, 120px); } .wave { position: absolute; left: 0; width: 100%; height: clamp(40px, 6vw, 90px); pointer-events: none; } .wave-top { bottom: 100%; margin-bottom: -1px; fill: var(--paper); } .wave-bottom { top: 100%; margin-top: -1px; fill: var(--paper); z-index: 1; } .wave-ink { fill: var(--ink-band); top: auto; bottom: -1px; margin: 0; } .wave-from-ink { fill: var(--ink-band); bottom: auto; top: -1px; margin: 0; } .sec-head { max-width: 780px; margin-bottom: clamp(40px, 6vw, 70px); } .sec-head .lead { margin-top: 22px; } .sec-head-wide { max-width: 920px; } .sec-head-center { margin-inline: auto; text-align: center; } .sec-head-center .eyebrow { justify-content: center; } .sec-head-center .lead { margin-inline: auto; } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; } .split-rev .split-copy { order: 2; } .split-stage { position: relative; display: grid; place-items: center; min-height: 700px; } .stage-blob { position: absolute; width: 118%; aspect-ratio: 1; z-index: 0; left: 50%; top: 50%; translate: -50% -50%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%), conic-gradient(from 200deg, var(--bg-2), var(--paper-2), var(--bg-2)); border-radius: 43% 57% 62% 38% / 44% 38% 62% 56%; animation: blob 18s ease-in-out infinite; opacity: .8; } .stage-blob::after { content: ""; position: absolute; inset: 9%; border-radius: inherit; border: 2px dashed color-mix(in srgb, var(--brand) 30%, transparent); } .blob-b { animation-delay: -6s; } .blob-c { animation-delay: -12s; } @keyframes blob { 33% { border-radius: 58% 42% 38% 62% / 56% 60% 40% 44%; rotate: 20deg; } 66% { border-radius: 38% 62% 54% 46% / 38% 46% 54% 62%; rotate: -12deg; } } /* reveal */ .js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .js [data-reveal].seen { opacity: 1; transform: none; } /* ── Studio ─────────────────────────────────────────────────────────────── */ .studio { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 70px); align-items: start; } .studio-stage { position: sticky; top: calc(var(--hdr-h) + 34px); display: grid; justify-items: center; } .qr-plate { position: relative; width: min(100%, 460px); padding: clamp(18px, 3vw, 30px); border-radius: 40px; background: var(--sheen), var(--paper); box-shadow: var(--raise), 0 0 0 1px color-mix(in srgb, var(--line) 50%, transparent); overflow: hidden; } .sec-paper .qr-plate { --neu-lo: rgba(176, 150, 124, .45); background: var(--sheen), var(--paper); } :root[data-theme="dark"] .sec-paper .qr-plate { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec-paper .qr-plate { --neu-lo: rgba(8, 6, 5, .8); } } .qr-plate canvas { width: 100%; height: auto; border-radius: 22px; transition: transform .4s var(--ease-spring); } .qr-plate canvas.bump { transform: scale(.975); } .st-meta { margin-top: 18px; font-size: .86rem; font-weight: 600; color: var(--dim); font-variant-numeric: tabular-nums; } .st-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; } .payload { width: min(100%, 460px); margin-top: 18px; } .payload summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--dim); text-align: center; list-style: none; } .payload summary::-webkit-details-marker { display: none; } .payload summary::after { content: " +"; color: var(--brand); } .payload[open] summary::after { content: " –"; } .payload pre { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--bg); box-shadow: var(--inset-sm); white-space: pre-wrap; word-break: break-all; color: var(--ink-2); max-height: 180px; overflow: auto; } .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 22px 22px 20px; background: var(--bg); border-radius: 28px 28px 0 0; box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, .35); animation: sheetUp .45s var(--ease) both; } @keyframes sheetUp { from { transform: translateY(105%); } } .sheet.closing { animation: sheetDown .3s var(--ease) both; } @keyframes sheetDown { to { transform: translateY(105%); } } .st-sheet { border-radius: 26px; inset: auto 10px 10px; } .sheet-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--dim); display: grid; place-items: center; } .verdict { display: flex; align-items: center; gap: 10px; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; color: var(--success); } .verdict .ic { width: 30px; height: 30px; } .verdict.fail { color: var(--danger); } .verdict.warn { color: var(--warning); } .verdict.busy { color: var(--dim); } .verdict.busy .ic { animation: spin 1s linear infinite; } .verdict-body { margin-top: 6px; color: var(--ink-2); font-size: .94rem; line-height: 1.5; } .st-sheet .mini-label { margin: 12px 0 6px; } .decoded { padding: 10px 14px; border-radius: 14px; font-size: .86rem; color: var(--ink-2); word-break: break-all; max-height: 64px; overflow: auto; } .sheet-foot { margin-top: 10px; font-size: .74rem; color: var(--dimmer); } .steps { position: relative; display: grid; gap: 34px; counter-reset: step; } .steps::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(to bottom, var(--brand) 0 6px, transparent 6px 14px); opacity: .55; } .step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; } .step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(145deg, #FB923C, #EA580C); box-shadow: 0 8px 18px -6px var(--brand-glow), 0 0 0 6px var(--paper); position: relative; z-index: 1; } .step-body h3 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; margin: 7px 0 16px; } .type-rail { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 16px; margin: -8px -4px 0; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .type-chip { scroll-snap-align: start; flex: none; display: grid; justify-items: center; gap: 7px; width: 82px; padding: 12px 6px 10px; border: 1.5px solid transparent; border-radius: 20px; background: var(--sheen), var(--paper); box-shadow: var(--raise-xs); font-size: .76rem; font-weight: 700; color: var(--ink-2); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; } .sec-paper .type-chip, .sec-paper .shape-tile, .sec-paper .preset, .sec-paper .tpl { --neu-lo: rgba(176, 150, 124, .42); } :root[data-theme="dark"] .sec-paper .type-chip, :root[data-theme="dark"] .sec-paper .shape-tile, :root[data-theme="dark"] .sec-paper .preset, :root[data-theme="dark"] .sec-paper .tpl { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec-paper :is(.type-chip, .shape-tile, .preset, .tpl) { --neu-lo: rgba(8, 6, 5, .8); } } .type-chip .plate { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; } .type-chip .plate .ic { width: 20px; height: 20px; } .type-chip:hover { transform: translateY(-3px); } .type-chip[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 18px -4px var(--brand-glow); color: var(--brand-ink); } .sec-paper :is(.seg, .field input, .field select, .field textarea, .theme-seg) { background: var(--paper); } .sec-paper .seg { --neu-lo: rgba(176, 150, 124, .42); } .st-panel { margin-top: 4px; animation: fadeUp .35s var(--ease) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } } .presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .preset { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 16px; border: 1.5px solid transparent; background: var(--paper); box-shadow: var(--raise-xs); font-weight: 600; font-size: .86rem; color: var(--ink-2); transition: border-color .2s, transform .2s var(--ease); } .preset:hover { transform: translateY(-2px); } .preset i { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .preset i + i { margin-left: -12px; } .preset[aria-checked="true"] { border-color: var(--brand); color: var(--brand-ink); } .pickers { display: flex; flex-wrap: wrap; gap: 12px; } .picker { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--paper); box-shadow: var(--raise-xs); font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer; } .picker input { width: 36px; height: 36px; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; } .picker input::-webkit-color-swatch-wrapper { padding: 0; } .picker input::-webkit-color-swatch { border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; } .picker input::-moz-color-swatch { border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%; } .shape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; } .shape-tile { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 16px; border: 1.5px solid transparent; background: var(--paper); box-shadow: var(--raise-xs); font-size: .7rem; font-weight: 600; color: var(--ink-2); transition: border-color .2s, transform .2s var(--ease); } .shape-tile canvas { width: 34px; height: 34px; } .shape-tile:hover { transform: translateY(-2px); } .shape-tile[aria-checked="true"] { border-color: var(--brand); color: var(--brand-ink); } .shape-tile .ad { position: absolute; top: 4px; right: 5px; width: 13px; height: 13px; color: var(--dim); opacity: .75; } .seg-4 { grid-auto-columns: minmax(0, 1fr); } .seg-4 button { font-size: .8rem; padding: 0 4px; } /* ── Scanner ────────────────────────────────────────────────────────────── */ .scene-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .phone-scan { --scan-dark: 1; } .ph-torch { width: 46px; height: 46px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--brand) 16%, var(--bg)); color: var(--brand); display: grid; place-items: center; transition: background .25s, box-shadow .25s; } .ph-torch .ic { width: 24px; height: 24px; } .ph-torch[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: 0 0 18px var(--brand-glow); } .vf { position: relative; flex: 1; min-height: 0; border-radius: 26px; overflow: hidden; background: #080605; cursor: pointer; box-shadow: var(--inset); outline-offset: -3px; } .vf-scene { position: absolute; inset: -10%; transform: scale(var(--zoom, 1.25)); transition: transform .3s var(--ease), filter .4s; background: radial-gradient(90% 60% at 50% 110%, #6b4a26 0%, #3a2714 45%, #1a120b 80%); filter: brightness(.78) saturate(.95); } .vf-scene.torch { filter: brightness(1.18) saturate(1.05); } .bokeh { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .5), transparent); filter: blur(4px); } .b1 { width: 110px; height: 110px; left: 8%; top: 12%; } .b2 { width: 80px; height: 80px; right: 12%; top: 8%; } .b3 { width: 60px; height: 60px; right: 4%; top: 30%; opacity: .6; } .target { position: absolute; left: 50%; top: 47%; width: 50%; translate: -50% -50%; rotate: -2deg; padding: 12px 10px 10px; border-radius: 10px; background: #e9e2d8; color: #3b2a1b; text-align: center; box-shadow: 0 16px 24px -10px rgba(0, 0, 0, .7); transition: rotate .5s var(--ease), background .4s; } .target canvas { width: 78%; margin: 6px auto 4px; } .t-kick { font-size: 10px; font-weight: 700; letter-spacing: .18em; } .t-name { font-size: 11px; font-weight: 700; color: #7a4a1d; } .t-sub { font-size: 8px; opacity: .75; } .target.t-wifi { background: #dfeee4; color: #16361f; } .target.t-wifi .t-name { color: #166534; } .target.t-contact { background: #15213d; color: #e7d6a8; width: 58%; } .target.t-contact .t-name { color: #e7c67a; } .target.t-link { background: #fdf2e4; color: #7c2d12; rotate: 3deg; } .target.t-link .t-name { color: #b91c1c; } .target.t-event { background: #fff7f1; color: #5b2333; rotate: -4deg; } .target.t-event .t-name { color: #9f1239; } .vf-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .18); pointer-events: none; } .vf-frame { position: absolute; inset: 15% 12% 19%; border-radius: 26px; border: 2.5px solid var(--brand); box-shadow: 0 0 22px var(--brand-glow), inset 0 0 22px rgba(249, 115, 22, .25); transition: inset .45s var(--ease), border-color .3s; } .vf-frame i { position: absolute; width: 36px; height: 36px; border: 4px solid var(--brand-3); border-radius: 4px; } .vf-frame i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; } .vf-frame i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; } .vf-frame i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; } .vf-frame i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; } .vf-line { position: absolute; left: 8%; right: 8%; top: 10%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--brand-3), transparent); box-shadow: 0 0 14px var(--brand); animation: scanline 2.2s ease-in-out infinite alternate; } @keyframes scanline { to { top: 88%; } } .vf.locked .vf-frame { inset: 22% 18% 24%; border-color: var(--success); box-shadow: 0 0 26px rgba(34, 197, 94, .5); } .vf.locked .vf-frame i { border-color: #4ade80; } .vf.locked .vf-line { opacity: 0; } .vf-toast { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(20, 18, 16, .88); color: #f5f1ed; font-size: 11.5px; font-weight: 600; text-align: center; opacity: 0; translate: 0 10px; transition: opacity .3s, translate .3s; pointer-events: none; } .vf-toast.show { opacity: 1; translate: 0 0; } .zoom { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; margin: 12px 0 10px; border-radius: 18px; background: var(--bg); box-shadow: var(--inset-sm); color: var(--dim); } .zoom .ic { width: 20px; height: 20px; } input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; height: 26px; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand) var(--pct, 25%), var(--line-2) var(--pct, 25%)); } input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-2); } input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--brand); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; } .sc-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; padding-bottom: 12px; } .ph-gallery { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 16px; background: var(--bg); box-shadow: var(--raise-xs); color: var(--brand); font-weight: 700; font-size: 13px; } .ph-gallery .ic { width: 20px; height: 20px; } .batch-pill { position: absolute; top: 118px; left: 50%; translate: -50% 0; z-index: 3; padding: 5px 12px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 6px 14px -4px var(--brand-glow); } .batch-pill span { opacity: .85; margin-right: 5px; } .sc-sheet { padding: 12px 18px 18px; border-radius: 26px 26px 0 0; max-height: 78%; overflow-y: auto; scrollbar-width: none; } .grab { display: block; width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 4px; background: var(--line-2); } .sc-head { display: flex; align-items: center; gap: 12px; } .sc-type-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; } .sc-type-ic .ic { width: 24px; height: 24px; } .sc-type { font-size: 16px; font-weight: 700; } .sc-val { font-size: 12px; color: var(--dim); word-break: break-all; } .sc-detail { display: grid; gap: 8px; margin: 12px 0 6px; } .sc-detail .kv { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bg); box-shadow: var(--inset-sm); font-size: 12px; } .sc-detail .kv span { color: var(--dim); } .sc-detail .kv b { text-align: right; word-break: break-word; } .sc-detail .mini-verdict { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 11.5px; line-height: 1.4; color: #fff; } .sc-detail .mini-verdict .ic { width: 20px; height: 20px; flex: none; } .sc-detail .mini-verdict b { display: block; font-size: 13px; } .mini-verdict.v-danger { background: var(--danger); } .mini-verdict.v-caution { background: #B45309; } .mini-verdict.v-unchecked { background: color-mix(in srgb, var(--info) 14%, var(--bg)); color: var(--ink-2); } .mini-verdict.v-unchecked b { color: var(--info); } .sc-actions { display: grid; } .sc-actions button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; border: 0; background: transparent; font-weight: 600; font-size: 13.5px; color: var(--ink); text-align: left; border-radius: 12px; padding: 0 6px; } .sc-actions button:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .sc-actions .ic { width: 22px; height: 22px; color: var(--brand); } /* ── Link safety ────────────────────────────────────────────────────────── */ .safety-input { display: flex; gap: 14px; flex-wrap: wrap; } .url-well { flex: 1 1 380px; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 20px; background: var(--paper); --neu-lo: rgba(176, 150, 124, .45); border-radius: 22px; } :root[data-theme="dark"] .url-well { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .url-well { --neu-lo: rgba(8, 6, 5, .8); } } .url-well .ic { color: var(--brand); width: 22px; height: 22px; } .url-well input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1.02rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ink); } .safety-input .btn { min-height: 60px; } .sample-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .sample-chips button { background: var(--paper); --neu-lo: rgba(176, 150, 124, .42); font-size: .85rem; min-height: 38px; } :root[data-theme="dark"] .sample-chips button { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sample-chips button { --neu-lo: rgba(8, 6, 5, .8); } } .track { position: relative; height: clamp(230px, 24vw, 300px); margin: 40px 0 20px; } .track-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .track-line { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; } .track-fill { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; } .track-packet { fill: var(--brand); filter: drop-shadow(0 0 8px var(--brand)); } .nodes li { position: absolute; display: grid; justify-items: center; gap: 8px; translate: -50% -50%; width: 110px; text-align: center; pointer-events: none; } .nodes .node { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--dimmer); box-shadow: var(--raise-sm), 0 0 0 1.5px var(--line); --neu-lo: rgba(176, 150, 124, .45); transition: background .35s, color .35s, box-shadow .35s, transform .45s var(--ease-spring); } .nodes .node .ic { width: 22px; height: 22px; } .nodes b { font-size: .76rem; font-weight: 700; color: var(--dim); line-height: 1.2; } .nodes li.pass .node { color: #fff; background: var(--success); box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 20%, transparent); transform: scale(1.06); } .nodes li.warn .node { color: #fff; background: var(--warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 25%, transparent); transform: scale(1.12); } .nodes li.fail .node { color: #fff; background: var(--danger); box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); transform: scale(1.18); } .nodes li.skip .node { color: #fff; background: var(--info); box-shadow: 0 0 0 5px color-mix(in srgb, var(--info) 20%, transparent); } .nodes li.warn b, .nodes li.fail b { color: var(--ink); } .nodes li:nth-child(even) b { order: -1; } .verdict-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; } .verdict-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; padding: 26px; border-radius: 28px; color: #fff; transition: background .4s; } .verdict-card h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; } .verdict-card p { margin-top: 4px; opacity: .95; line-height: 1.5; } .verdict-card ul { display: grid; gap: 8px; margin-top: 14px; } .verdict-card li { position: relative; padding-left: 20px; line-height: 1.45; font-size: .96rem; } .verdict-card li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .vc-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); } .vc-ic .ic { width: 30px; height: 30px; } .v-danger { background: var(--danger); box-shadow: 0 24px 40px -22px rgba(220, 38, 38, .8); } .v-caution { background: #B45309; box-shadow: 0 24px 40px -22px rgba(180, 83, 9, .8); } .v-unchecked { background: var(--paper); color: var(--ink-2); box-shadow: var(--raise); --neu-lo: rgba(176, 150, 124, .45); } .v-unchecked h3 { color: var(--info); } .v-unchecked .vc-ic { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); } :root[data-theme="dark"] .v-unchecked, :root[data-theme="dark"] .nodes .node { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.v-unchecked, .nodes .node) { --neu-lo: rgba(8, 6, 5, .8); } } .verdict-card.pop { animation: pop .5s var(--ease-spring); } @keyframes pop { 0% { transform: scale(.96); } 60% { transform: scale(1.015); } } .sheet-list { display: grid; gap: 2px; } .sheet-list li { display: flex; align-items: center; gap: 16px; padding: 12px 6px; font-weight: 600; color: var(--ink); } .sheet-list .ic { width: 24px; height: 24px; color: var(--brand); } /* ── UPI ────────────────────────────────────────────────────────────────── */ .upi-stage { min-height: 740px; } .phone-upi { translate: -12% 0; } .amount-card { display: flex; justify-content: space-between; gap: 10px; padding: 16px; border-radius: 24px; background: var(--sheen), var(--bg); box-shadow: var(--raise-sm); margin: 6px 0 14px; } .amount-card .mini-label { margin: 0 0 4px; font-size: 10.5px; } .amount { display: flex; align-items: baseline; gap: 4px; font-size: 38px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .amount .rupee { font-size: 24px; color: var(--brand); } .amount.any { font-size: 18px; color: var(--dim); } .amount.any .rupee { display: none; } .state-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 10px; border-radius: 999px; box-shadow: var(--inset-sm); font-size: 11.5px; font-weight: 700; } .state-pill .ic { width: 16px; height: 16px; } .state-pill.ok { color: var(--success); } .state-pill.bad { color: var(--warning); } .amount-qr { width: 112px; height: 112px; padding: 7px; border-radius: 18px; background: #fff; box-shadow: var(--inset-sm); flex: none; } .amount-qr canvas { width: 100%; height: 100%; } .phone-upi .seg button { min-height: 38px; font-size: 12.5px; } .amt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 10px; margin: 0 -2px; scrollbar-width: none; } .amt-chips::-webkit-scrollbar { display: none; } .amt-chips button { flex: none; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1.5px solid transparent; background: var(--bg); box-shadow: var(--raise-xs); font-weight: 600; font-size: 13px; color: var(--ink-2); } .amt-chips button.on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bg)); } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; } .keypad button { height: 46px; border: 0; border-radius: 15px; background: var(--sheen), var(--bg); box-shadow: var(--raise-xs); font-size: 20px; font-weight: 600; color: var(--ink); display: grid; place-items: center; transition: box-shadow .12s, transform .12s; } .keypad button:active, .keypad button.hit { box-shadow: var(--inset-sm); transform: scale(.97); } .keypad [data-k="del"] { color: var(--brand); } .keypad .ic { width: 24px; height: 24px; } .keypad.disabled { opacity: .4; pointer-events: none; } .ph-field { position: relative; display: grid; gap: 5px; margin-bottom: 10px; font-size: 11.5px; font-weight: 600; color: var(--dim); } .ph-field input { height: 44px; padding: 0 38px 0 14px; border: 1.5px solid transparent; border-radius: 14px; background: var(--bg); box-shadow: var(--inset-sm); outline: 0; font-size: 13.5px; color: var(--ink); } .ph-field input:focus { border-color: var(--brand); } .ph-field .vpa-ok { position: absolute; right: 12px; bottom: 12px; width: 20px; height: 20px; color: var(--success); transition: opacity .2s; } .ph-field.bad input { border-color: var(--danger); } .ph-field.bad .vpa-ok { opacity: 0; } .ph-err { margin: -6px 0 10px; font-size: 11px; color: var(--danger); } .phone-upi .btn-block { --h: 46px; font-size: 14px; margin-top: 4px; } .standee { position: absolute; right: -6%; bottom: 3%; z-index: 3; width: 196px; rotate: 6deg; transition: rotate .5s var(--ease), transform .5s var(--ease); } .standee:hover { rotate: 2deg; transform: translateY(-6px); } .standee-in { position: relative; padding: 18px 16px 16px; border-radius: 16px; background: linear-gradient(170deg, #F97316, #C2410C); text-align: center; color: #fff; box-shadow: 0 30px 40px -18px rgba(154, 52, 18, .6); } .standee-in::before { content: ""; position: absolute; inset: 7px; border-radius: 11px; border: 1.5px solid rgba(255, 255, 255, .45); pointer-events: none; } .standee-in canvas { width: 148px; height: 148px; margin: 10px auto 8px; padding: 8px; border-radius: 12px; background: #fff; box-sizing: content-box; } .sd-kick { font-weight: 700; letter-spacing: .22em; font-size: 13px; } .sd-name { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; line-height: 1.1; } .sd-vpa { font-size: 11px; opacity: .85; } .sd-amt { display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 999px; background: #fff; color: #C2410C; font-weight: 700; font-size: 13px; } .sd-amt:empty { display: none; } .sd-apps { margin-top: 8px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; } .standee figcaption { margin-top: 12px; text-align: center; font-size: .78rem; font-weight: 600; color: var(--dim); rotate: -6deg; } /* ── Cards ──────────────────────────────────────────────────────────────── */ .kind-arc { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: -10px auto 48px; max-width: 760px; } .kind-arc button { --lift: 0px; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid transparent; background: var(--paper); --neu-lo: rgba(176, 150, 124, .42); box-shadow: var(--raise-sm); font-weight: 700; color: var(--ink-2); transform: translateY(var(--lift)); transition: transform .4s var(--ease-spring), border-color .2s, color .2s; } .kind-arc button:nth-child(1), .kind-arc button:nth-child(5) { --lift: 22px; } .kind-arc button:nth-child(2), .kind-arc button:nth-child(4) { --lift: 6px; } .kind-arc button .ic { width: 20px; height: 20px; color: var(--brand); } .kind-arc button:hover { transform: translateY(calc(var(--lift) - 4px)); } .kind-arc button[aria-checked="true"] { border-color: var(--brand); color: var(--brand-ink); box-shadow: 0 0 22px -6px var(--brand-glow), var(--raise-sm); } :root[data-theme="dark"] .kind-arc button { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind-arc button { --neu-lo: rgba(8, 6, 5, .8); } } .card-studio { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 70px); align-items: center; } .card-stage { position: relative; display: grid; justify-items: center; perspective: 1400px; padding: 20px 0; } .card-stage::before { content: ""; position: absolute; inset: 0 5%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(249, 115, 22, .18), transparent); } .card3d { --rx: 0deg; --ry: 0deg; --flip: 0deg; position: relative; z-index: 1; width: min(100%, 540px); aspect-ratio: 85.6 / 54; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); transition: transform .8s var(--ease), aspect-ratio .5s var(--ease), width .5s var(--ease); cursor: pointer; outline-offset: 8px; } .card3d.tilting { transition: transform .12s linear; } .card3d.portrait { width: min(72%, 330px); aspect-ratio: 105 / 148; } .card3d.standee-ratio { width: min(72%, 330px); aspect-ratio: 101.6 / 152.4; } .face { position: absolute; inset: 0; container-type: inline-size; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 40px 50px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .08); } .face-back { transform: rotateY(180deg); } .face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 46%, transparent 60%); translate: var(--glare, -40%) 0; pointer-events: none; mix-blend-mode: soft-light; } .card-shadow { width: 60%; height: 26px; margin-top: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .25), transparent); } .card-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 16px; } .card-tools .seg { background: var(--paper); --neu-lo: rgba(176, 150, 124, .42); min-width: 200px; } .print-spec { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--dim); } .print-spec .ic { color: var(--brand); width: 18px; height: 18px; } .tpl-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } .tpl { position: relative; display: grid; gap: 6px; padding: 7px 7px 8px; border-radius: 16px; border: 1.5px solid transparent; background: var(--paper); box-shadow: var(--raise-xs); font-size: .74rem; font-weight: 700; color: var(--ink-2); text-align: left; transition: border-color .2s, transform .2s var(--ease); } .tpl:hover { transform: translateY(-2px); } .tpl i { display: block; aspect-ratio: 16 / 10; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .tpl small { position: absolute; top: 11px; right: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .6rem; letter-spacing: .04em; } .tpl[aria-checked="true"] { border-color: var(--brand); color: var(--brand-ink); } .card-deck .fields { margin-top: 22px; } /* Card faces (template skins) */ .cf-face { position: absolute; inset: 0; display: grid; color: var(--t-ink); background: var(--t-bg); font-family: var(--f-sans); } .cf-face .qr { background: #fff; padding: 2.2cqi; border-radius: 1.6cqi; box-shadow: 0 1.2cqi 2.4cqi -1.2cqi rgba(0, 0, 0, .4); } .cf-face .qr canvas { width: 100%; height: 100%; } .cf-name { font-weight: 700; letter-spacing: .04em; line-height: 1.1; } .cf-role { letter-spacing: .28em; text-transform: uppercase; opacity: .85; } .cf-lines { display: grid; gap: .5cqi; opacity: .92; } .cf-mono { display: grid; place-items: center; border-radius: 50%; border: .4cqi solid var(--t-acc); color: var(--t-acc); font-weight: 700; } /* Regal — navy and gold, the one in the listing */ .skin-regal { --t-bg: radial-gradient(120% 90% at 30% 20%, #1b2a55, #0f1b3d 70%); --t-ink: #fff; --t-acc: #D4AF37; place-items: center; text-align: center; padding: 6cqi; } .skin-regal::before, .skin-regal::after { content: ""; position: absolute; inset: 3cqi; border: .45cqi solid var(--t-acc); border-radius: 1.2cqi; pointer-events: none; } .skin-regal::after { inset: 5cqi; border-width: .2cqi; opacity: .6; } .skin-regal .corner { position: absolute; width: 11cqi; height: 11cqi; background: linear-gradient(135deg, #e9c86a, #b8892c); } .skin-regal .corner.tl { left: 2cqi; top: 2cqi; clip-path: polygon(0 0, 100% 0, 0 60%); } .skin-regal .corner.br { right: 2cqi; bottom: 2cqi; clip-path: polygon(100% 40%, 100% 100%, 0 100%); } .skin-regal .cf-mono { width: 7cqi; height: 7cqi; font-size: 2.6cqi; margin: 0 auto 1.6cqi; } .skin-regal .cf-name { font-size: 6.4cqi; } .skin-regal .cf-role { font-size: 1.8cqi; margin-top: 1cqi; } .skin-regal .rule { width: 22cqi; height: .3cqi; margin: 2cqi auto; background: var(--t-acc); position: relative; } .skin-regal .rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.4cqi; height: 1.4cqi; translate: -50% -50%; rotate: 45deg; background: var(--t-acc); } .skin-regal .cf-lines { font-size: 2.2cqi; } .skin-regal .qr { position: absolute; right: 9cqi; bottom: 9cqi; width: 17cqi; height: 17cqi; } /* Slate — side band */ .skin-slate { --t-bg: #F4F1EA; --t-ink: #1B2430; --t-acc: #1B2430; grid-template-columns: 34% 1fr; } .skin-slate .band { background: linear-gradient(160deg, #1B2430, #4A5462); display: grid; place-items: center; padding: 4cqi; } .skin-slate .band .qr { width: 20cqi; height: 20cqi; } .skin-slate .body { padding: 7cqi 6cqi; align-self: center; } .skin-slate .cf-name { font-family: var(--f-display); font-size: 6.2cqi; letter-spacing: 0; } .skin-slate .cf-role { font-size: 1.9cqi; margin: 1.2cqi 0 4cqi; color: #4A5462; } .skin-slate .cf-lines { font-size: 2.4cqi; border-left: .5cqi solid #F97316; padding-left: 2.4cqi; } /* Carrara — ivory marble with gold */ .skin-carrara { --t-bg: linear-gradient(135deg, #FAF8F4, #efe9df); --t-ink: #2b2620; --t-acc: #C8A24C; padding: 7cqi; grid-template-columns: 1fr auto; align-items: end; } .skin-carrara::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 9cqi, rgba(160, 150, 135, .12) 9cqi 9.4cqi, transparent 9.4cqi 21cqi); } .skin-carrara .cf-name { font-family: var(--f-display); font-size: 6.8cqi; font-weight: 600; } .skin-carrara .cf-role { font-size: 1.8cqi; color: var(--t-acc); margin: 1cqi 0 3.5cqi; } .skin-carrara .cf-lines { font-size: 2.3cqi; } .skin-carrara .qr { width: 19cqi; height: 19cqi; border: .4cqi solid var(--t-acc); } .skin-carrara .top-rule { position: absolute; left: 7cqi; right: 7cqi; top: 7cqi; height: .35cqi; background: linear-gradient(90deg, var(--t-acc), transparent); } /* Vantage — charcoal and amber slab */ .skin-vantage { --t-bg: #232326; --t-ink: #f5f5f4; --t-acc: #E0A21A; grid-template-rows: 1fr auto; } .skin-vantage .body { padding: 7cqi 7cqi 0; display: grid; grid-template-columns: 1fr auto; gap: 4cqi; align-items: start; } .skin-vantage .cf-name { font-size: 6.2cqi; } .skin-vantage .cf-role { font-size: 1.8cqi; color: var(--t-acc); margin-top: 1.2cqi; } .skin-vantage .qr { width: 18cqi; height: 18cqi; } .skin-vantage .slab { background: var(--t-acc); color: #1b1b1b; padding: 3cqi 7cqi; font-size: 2.2cqi; font-weight: 600; display: flex; gap: 4cqi; flex-wrap: wrap; } /* Classic — warm brown visiting card */ .skin-classic { --t-bg: linear-gradient(160deg, #fbf5ea, #f1e5cf); --t-ink: #3d2e1a; --t-acc: #7A5C35; place-items: center; text-align: center; padding: 6cqi; } .skin-classic::before { content: ""; position: absolute; inset: 4cqi; border: .3cqi solid #C3A76A; border-radius: .6cqi; } .skin-classic .cf-name { font-family: var(--f-display); font-size: 7.4cqi; color: var(--t-acc); } .skin-classic .cf-role { font-size: 1.9cqi; margin-top: 1.4cqi; } .skin-classic .orn { font-size: 3cqi; color: #C3A76A; margin: 1.6cqi 0; letter-spacing: 1cqi; } .skin-classic .cf-lines { font-size: 2.3cqi; } .skin-classic .qr { position: absolute; left: 8cqi; bottom: 8cqi; width: 14cqi; height: 14cqi; } /* Obsidian — magenta to violet */ .skin-obsidian { --t-bg: linear-gradient(135deg, #C4278C, #7B34A8 70%, #3b1b5c); --t-ink: #fff; --t-acc: #fff; padding: 7cqi; grid-template-columns: 1fr auto; align-items: center; } .skin-obsidian::before { content: ""; position: absolute; width: 70cqi; height: 70cqi; right: -24cqi; top: -30cqi; border-radius: 50%; border: .5cqi solid rgba(255, 255, 255, .25); } .skin-obsidian .cf-name { font-size: 7cqi; } .skin-obsidian .cf-role { font-size: 1.9cqi; margin: 1.2cqi 0 4cqi; } .skin-obsidian .cf-lines { font-size: 2.3cqi; } .skin-obsidian .qr { width: 21cqi; height: 21cqi; } /* Satin — gift card */ .skin-satin { --t-bg: linear-gradient(150deg, #8E2033, #5a1220); --t-ink: #fdf1e3; --t-acc: #C3A76A; padding: 7cqi; align-content: space-between; } .skin-satin::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64%; width: 5cqi; background: linear-gradient(90deg, #b8923f, #efd79a, #b8923f); } .skin-satin::after { content: ""; position: absolute; top: 34%; left: 0; right: 0; height: 5cqi; background: linear-gradient(180deg, #b8923f, #efd79a, #b8923f); } .skin-satin .gift-k { position: relative; z-index: 1; font-size: 2cqi; letter-spacing: .3em; text-transform: uppercase; color: var(--t-acc); } .skin-satin .cf-name { position: relative; z-index: 1; font-family: var(--f-display); font-size: 7.4cqi; max-width: 55%; } .skin-satin .cf-lines { position: relative; z-index: 1; font-size: 2.3cqi; max-width: 55%; } .skin-satin .qr { position: absolute; z-index: 1; right: 7cqi; bottom: 7cqi; width: 18cqi; height: 18cqi; } /* Confetti gift */ .skin-confetti { --t-bg: #FFF4EC; --t-ink: #3a1d0c; --t-acc: #E85D26; padding: 7cqi; align-content: center; } .skin-confetti::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, #E85D26 0 1.1cqi, transparent 1.2cqi), radial-gradient(circle at 86% 14%, #F6A57A 0 1.6cqi, transparent 1.7cqi), radial-gradient(circle at 78% 82%, #FBBF24 0 1cqi, transparent 1.1cqi), radial-gradient(circle at 20% 86%, #F97316 0 1.4cqi, transparent 1.5cqi), radial-gradient(circle at 52% 8%, #fb923c 0 .8cqi, transparent .9cqi); } .skin-confetti .gift-k { font-size: 2cqi; letter-spacing: .3em; text-transform: uppercase; color: var(--t-acc); font-weight: 700; } .skin-confetti .cf-name { font-family: var(--f-display); font-size: 8cqi; color: var(--t-acc); margin: 1cqi 0 2cqi; } .skin-confetti .cf-lines { font-size: 2.4cqi; max-width: 58%; } .skin-confetti .qr { position: absolute; right: 8cqi; top: 50%; translate: 0 -50%; width: 22cqi; height: 22cqi; } /* Event — portrait invite */ .skin-invite { --t-bg: linear-gradient(180deg, #fff7f1, #fbe5dc); --t-ink: #5b2333; --t-acc: #9f1239; padding: 9cqi 8cqi; text-align: center; align-content: space-between; justify-items: center; } .skin-invite::before { content: ""; position: absolute; inset: 4cqi; border: .5cqi solid #e8b4a8; border-radius: 45cqi 45cqi 3cqi 3cqi; } .skin-invite .gift-k { font-size: 3.2cqi; letter-spacing: .3em; text-transform: uppercase; margin-top: 10cqi; } .skin-invite .cf-name { font-family: var(--f-display); font-size: 11cqi; color: var(--t-acc); line-height: 1.05; } .skin-invite .cf-lines { font-size: 3.6cqi; gap: 1.2cqi; } .skin-invite .qr { width: 34cqi; height: 34cqi; margin-bottom: 4cqi; } .skin-gala { --t-bg: radial-gradient(90% 60% at 50% 0%, #2a3a6b, #0e1530 70%); --t-ink: #f3ead2; --t-acc: #D3A84C; padding: 9cqi 8cqi; text-align: center; align-content: space-between; justify-items: center; } .skin-gala::before { content: ""; position: absolute; inset: 4cqi; border: .5cqi solid var(--t-acc); } .skin-gala::after { content: ""; position: absolute; inset: 6cqi; border: .2cqi solid rgba(211, 168, 76, .5); } .skin-gala .gift-k { font-size: 3.2cqi; letter-spacing: .3em; text-transform: uppercase; color: var(--t-acc); margin-top: 6cqi; } .skin-gala .cf-name { font-family: var(--f-display); font-size: 11cqi; line-height: 1.05; } .skin-gala .cf-lines { font-size: 3.6cqi; gap: 1.2cqi; } .skin-gala .qr { width: 32cqi; height: 32cqi; margin-bottom: 6cqi; } /* Standee */ .skin-standee { --t-bg: linear-gradient(170deg, #F97316, #C2410C); --t-ink: #fff; --t-acc: #fff; padding: 9cqi 8cqi; text-align: center; align-content: space-between; justify-items: center; } .skin-standee::before { content: ""; position: absolute; inset: 4cqi; border: .5cqi solid rgba(255, 255, 255, .5); border-radius: 5cqi; } .skin-standee .gift-k { font-size: 5.4cqi; font-weight: 700; letter-spacing: .24em; margin-top: 3cqi; } .skin-standee .qr { width: 58cqi; height: 58cqi; padding: 3.5cqi; border-radius: 4cqi; } .skin-standee .cf-name { font-family: var(--f-display); font-size: 8.4cqi; } .skin-standee .cf-lines { font-size: 3.4cqi; } .skin-kraft { --t-bg: linear-gradient(170deg, #d9b98c, #b98f5c); --t-ink: #2b1d0e; --t-acc: #2b1d0e; padding: 9cqi 8cqi; text-align: center; align-content: space-between; justify-items: center; } .skin-kraft::before { content: ""; position: absolute; inset: 4cqi; border: .6cqi dashed rgba(43, 29, 14, .5); border-radius: 3cqi; } .skin-kraft .gift-k { font-size: 5.4cqi; font-weight: 700; letter-spacing: .24em; margin-top: 3cqi; } .skin-kraft .qr { width: 58cqi; height: 58cqi; padding: 3.5cqi; border-radius: 4cqi; } .skin-kraft .cf-name { font-family: var(--f-display); font-size: 8.4cqi; } .skin-kraft .cf-lines { font-size: 3.4cqi; } /* Backs */ .cf-back { place-items: center; text-align: center; padding: 7cqi; overflow: hidden; } .cf-back .ghost { position: absolute; font-size: 42cqi; font-weight: 700; line-height: 1; opacity: .08; letter-spacing: -.02em; } .cf-back .cf-name { position: relative; font-size: 3.6cqi; letter-spacing: .3em; text-transform: uppercase; } .cf-back .rule { width: 12cqi; height: .35cqi; margin: 2cqi auto; background: currentColor; opacity: .5; } .cf-back .cf-role { position: relative; font-size: 2.4cqi; letter-spacing: .02em; text-transform: none; } .cf-back .qr { position: relative; width: 24cqi; height: 24cqi; margin: 4cqi auto 0; } .cf-back.skin-regal::before { inset: 4cqi; border-radius: 0; } /* ── History ────────────────────────────────────────────────────────────── */ .hs-chips { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 12px; margin: 0 -2px; scrollbar-width: none; flex: none; } .hs-chips::-webkit-scrollbar { display: none; } .hs-chips button { flex: none; min-height: 34px; padding: 0 13px; border: 1.5px solid transparent; border-radius: 999px; background: var(--bg); box-shadow: var(--raise-xs); font-weight: 600; font-size: 12.5px; color: var(--ink-2); } .hs-chips button[aria-checked="true"] { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--bg)); } .phone-history .seg { flex: none; padding: 4px; gap: 3px; margin-bottom: 12px; } .phone-history .seg button { min-height: 34px; font-size: 11.5px; padding: 0 4px; } .phone-history .seg button span { font-weight: 500; } .timeline { position: relative; flex: 1; overflow-y: auto; margin: 0 -16px; padding: 4px 16px 12px 16px; scrollbar-width: none; overscroll-behavior: contain; } .timeline::-webkit-scrollbar { display: none; } .tl { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 12px; padding-bottom: 12px; animation: tileIn .45s var(--ease-spring) both; } .tl::before { content: ""; position: absolute; left: 57px; top: 6px; bottom: -6px; width: 2.5px; border-radius: 3px; background: var(--brand); opacity: .85; } .tl:last-child::before { bottom: 40%; } .tl-when { text-align: right; font-size: 11px; font-weight: 700; line-height: 1.2; padding-top: 6px; } .tl-when small { display: block; font-weight: 500; color: var(--dim); margin-top: 2px; } .tl-dot { position: absolute; left: 52px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, var(--bg)); } .tl-card { position: relative; margin-left: 12px; padding: 10px 10px 8px 12px; border-radius: 18px; background: var(--sheen), var(--bg); box-shadow: var(--raise-xs); min-width: 0; } .tl-top { display: flex; gap: 9px; align-items: center; } .tl-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; } .tl-ic .ic { width: 17px; height: 17px; } .tl-t { flex: 1; min-width: 0; } .tl-t b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-tag { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; box-shadow: var(--inset-sm); font-size: 10px; font-weight: 700; color: var(--ink-2); } .tl-star { width: 30px; height: 30px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); display: grid; place-items: center; flex: none; } .tl-star .ic { width: 19px; height: 19px; } .tl-star[aria-pressed="true"] { color: var(--amber); } .tl-val { margin-top: 6px; font-size: 11px; color: var(--ink-2); word-break: break-all; line-height: 1.35; } .tl-val mark { background: color-mix(in srgb, var(--brand) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } .tl-acts { display: flex; gap: 6px; margin-top: 4px; } .tl-acts button { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--dim); display: grid; place-items: center; } .tl-acts button:hover { color: var(--brand); } .tl-acts .ic { width: 18px; height: 18px; } /* ── Languages ──────────────────────────────────────────────────────────── */ .lang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; } .dial { position: relative; width: min(100%, 520px); aspect-ratio: 2 / 1.14; margin-top: 52px; } .dial::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--inset); background: var(--paper); --neu-lo: rgba(176, 150, 124, .45); -webkit-mask-image: linear-gradient(#000 50%, transparent 50%); mask-image: linear-gradient(#000 50%, transparent 50%); top: 0; } :root[data-theme="dark"] .dial::before { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dial::before { --neu-lo: rgba(8, 6, 5, .8); } } .dial-btn { position: absolute; translate: -50% -50%; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid transparent; background: var(--paper); --neu-lo: rgba(176, 150, 124, .45); box-shadow: var(--raise-xs); font-weight: 700; font-size: .92rem; color: var(--ink-2); white-space: nowrap; transition: left .6s var(--ease), top .6s var(--ease), border-color .2s, color .2s, transform .3s var(--ease-spring), background .25s; } :root[data-theme="dark"] .dial-btn { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dial-btn { --neu-lo: rgba(8, 6, 5, .8); } } .dial-btn:hover { transform: scale(1.06); z-index: 2; } .dial-btn { z-index: 1; } .dial-btn[aria-checked="true"] { border-color: var(--brand); background: var(--brand); color: #fff; transform: scale(1.12); box-shadow: 0 10px 22px -8px var(--brand-glow); } .dial-hub { position: absolute; left: 50%; bottom: 0; translate: -50% 42%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--sheen), var(--paper); box-shadow: var(--raise); display: grid; place-items: center; align-content: start; padding-top: 11%; text-align: center; --neu-lo: rgba(176, 150, 124, .45); } :root[data-theme="dark"] .dial-hub { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dial-hub { --neu-lo: rgba(8, 6, 5, .8); } } .dial-hub b { font-family: var(--f-display); font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.1; } .dial-hub small { color: var(--dim); font-size: .78rem; font-weight: 600; } .dial-needle { position: absolute; left: 50%; bottom: 0; width: 4px; height: 52%; margin-left: -2px; border-radius: 4px; background: linear-gradient(to top, transparent 36%, var(--brand) 36%); transform-origin: 50% 100%; transition: rotate .6s var(--ease-spring); } .lang-stage { position: relative; display: grid; place-items: center; min-height: 700px; } .lang-art { position: absolute; left: -6%; bottom: 0; width: 46%; z-index: 0; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .15)); } :root[data-theme="dark"] .lang-art { filter: invert(.92) hue-rotate(180deg) drop-shadow(0 20px 30px rgba(0, 0, 0, .3)); opacity: .85; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lang-art { filter: invert(.92) hue-rotate(180deg); opacity: .85; } } .phone-lang { --pw: 300px; translate: 22% 0; } .phone-lang .ph-body, .phone-lang .ph-nav { transition: opacity .25s; } .phone-lang.swap .ph-body { opacity: .2; } .phone-lang [dir="rtl"] { text-align: right; } /* ── Stories (ink band) ─────────────────────────────────────────────────── */ .stories { position: relative; background: var(--ink-band); color: var(--on-ink); padding: clamp(60px, 8vw, 110px) 0 clamp(90px, 10vw, 140px); overflow: hidden; } .stories .h2 { color: var(--on-ink); } .eyebrow-ink { color: var(--on-ink-dim); } .stories-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; } .stories .round-btn { background: var(--ink-band-2); color: var(--on-ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); } .stories .round-btn:hover { color: var(--brand-3); box-shadow: 0 0 0 1.5px var(--brand); } .stories-wave { position: absolute; left: 0; top: 34%; width: 240%; height: 300px; fill: none; stroke: rgba(249, 115, 22, .28); stroke-width: 2; stroke-dasharray: 3 14; stroke-linecap: round; animation: waveSlide 40s linear infinite; pointer-events: none; } @keyframes waveSlide { to { translate: -50% 0; } } .sto-track { position: relative; display: flex; gap: clamp(18px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(16px, calc((100vw - 1240px) / 2 + 44px)) 30px; scrollbar-width: none; cursor: grab; outline-offset: -4px; } .sto-track::-webkit-scrollbar { display: none; } .sto-track.drag { cursor: grabbing; scroll-snap-type: none; } .sto-track.drag a { pointer-events: none; } .sto { flex: none; width: clamp(248px, 25vw, 310px); scroll-snap-align: start; } .sto:nth-child(even) { margin-top: 70px; } .sto a { display: grid; gap: 12px; text-decoration: none; color: var(--on-ink); } .sto-blob { position: relative; display: grid; place-items: end center; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(80% 60% at 50% 40%, #fbf6f0, #efe3d5); transition: border-radius .9s var(--ease), transform .5s var(--ease); } .sto-blob img { width: 82%; max-height: 96%; object-fit: contain; object-position: bottom; transition: transform .7s var(--ease); } .sto a:hover .sto-blob { transform: translateY(-6px); } .sto a:hover .sto-blob img { transform: scale(1.05); } .sb-1 { border-radius: 58% 42% 44% 56% / 46% 54% 46% 54%; } .sb-2 { border-radius: 44% 56% 30% 70% / 60% 38% 62% 40%; } .sb-3 { border-radius: 70% 30% 52% 48% / 38% 60% 40% 62%; } .sb-4 { border-radius: 36% 64% 62% 38% / 52% 40% 60% 48%; } .sb-5 { border-radius: 50% 50% 34% 66% / 62% 44% 56% 38%; } .sb-6 { border-radius: 62% 38% 46% 54% / 40% 58% 42% 60%; } .sb-7 { border-radius: 40% 60% 60% 40% / 58% 42% 58% 42%; } .sb-8 { border-radius: 56% 44% 38% 62% / 44% 62% 38% 56%; } .sb-9 { border-radius: 48% 52% 64% 36% / 36% 50% 50% 64%; } .sto a:hover .sto-blob { border-radius: 32px; } .sto-n { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-3); margin-top: 8px; } .sto-h { font-family: var(--f-display); font-size: clamp(1.45rem, 2.2vw, 1.8rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; } .sto-h em { font-style: normal; color: var(--brand); } .sto-p { color: var(--on-ink-dim); font-size: .95rem; line-height: 1.5; } .module-rule { display: flex; justify-content: center; gap: 7px; margin-top: 14px; } .module-rule button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .18); transition: background .3s, transform .3s var(--ease-spring); } .module-rule button.on { background: var(--brand); transform: scale(1.25); } /* ── Privacy flow ───────────────────────────────────────────────────────── */ .flow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 44px); align-items: center; } .flow-chips { display: grid; gap: 10px; justify-items: start; } .flow-map { position: relative; aspect-ratio: 560 / 420; } .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .fp { fill: none; stroke: var(--line-2); stroke-width: 2.5; stroke-dasharray: 3 9; stroke-linecap: round; transition: stroke .3s, opacity .3s; opacity: .55; } .fp.on { stroke: var(--brand); opacity: 1; stroke-width: 3.5; stroke-dasharray: 12 10; animation: flowDash 1s linear infinite; } @keyframes flowDash { to { stroke-dashoffset: -22; } } .fnode-phone { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 27%; display: grid; justify-items: center; gap: 10px; font-weight: 700; font-size: .9rem; } .fphone { position: relative; width: 84px; height: 124px; border-radius: 22px; display: grid; place-items: center; background: var(--sheen), var(--bg); box-shadow: var(--raise); color: var(--brand); } .fphone > .ic { width: 42px; height: 42px; } .flock { position: absolute; right: -12px; bottom: -10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 22%, var(--bg)); transition: transform .4s var(--ease-spring), background .3s; } .flock .ic { width: 20px; height: 20px; } .flow:not([data-state="scan"]):not([data-state="create"]):not([data-state="cards"]):not([data-state="history"]) .flock { transform: scale(0); } .flow[data-state="scan"] .fphone, .flow[data-state="create"] .fphone, .flow[data-state="cards"] .fphone, .flow[data-state="history"] .fphone { box-shadow: var(--raise), 0 0 0 10px color-mix(in srgb, var(--success) 10%, transparent), 0 0 0 22px color-mix(in srgb, var(--success) 5%, transparent); } .fdest { position: absolute; right: 0; top: 0; bottom: 0; width: 34%; } .fdest li { position: absolute; right: 0; translate: 0 -50%; display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 16px; background: var(--bg); box-shadow: var(--raise-xs); font-size: .78rem; font-weight: 700; color: var(--dim); line-height: 1.15; transition: color .3s, box-shadow .3s, opacity .3s, transform .4s var(--ease-spring); opacity: .6; } .fdest li .ic { width: 20px; height: 20px; flex: none; color: var(--dimmer); } .fdest li:nth-child(1) { top: 14.3%; } .fdest li:nth-child(2) { top: 38.1%; } .fdest li:nth-child(3) { top: 61.9%; } .fdest li:nth-child(4) { top: 85.7%; } .fdest li.on { opacity: 1; color: var(--ink); box-shadow: var(--raise-sm), 0 0 0 1.5px var(--brand); transform: scale(1.05); } .fdest li.on .ic { color: var(--brand); } .flow-copy { padding: 26px; border-radius: 28px; background: var(--sheen), var(--bg); box-shadow: var(--raise); } .flow-sent small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .flow-sent b { display: block; font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; margin: 4px 0 12px; color: var(--success); } .flow-sent b.out { color: var(--brand-ink); } .flow-copy > p { color: var(--ink-2); line-height: 1.55; font-size: .96rem; } .flow-ctrl { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: .88rem !important; color: var(--dim) !important; } .flow-ctrl:empty { display: none; } .plinks { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 44px; } .plinks a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; } .plinks .ic { width: 18px; height: 18px; } /* ── Coverflow ──────────────────────────────────────────────────────────── */ .shots-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 30px; } .coverflow { position: relative; height: clamp(450px, 46vw, 620px); perspective: 1600px; overflow: hidden; touch-action: pan-y; cursor: grab; outline-offset: -4px; } .coverflow.drag { cursor: grabbing; } .cf { position: absolute; left: 50%; top: 50%; width: clamp(200px, 22vw, 290px); aspect-ratio: 9 / 16; margin: 0; padding: 0; border: 0; background: none; translate: -50% -50%; transform-style: preserve-3d; transition: transform .7s var(--ease), opacity .7s, filter .7s; will-change: transform; } .cf img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; user-select: none; -webkit-user-drag: none; } .cf span { position: absolute; left: 0; right: 0; bottom: -40px; font-weight: 700; font-size: .9rem; color: var(--ink-2); opacity: 0; transition: opacity .4s; } .cf.is-center span { opacity: 0; } .cf-wide { width: clamp(300px, 40vw, 520px); aspect-ratio: 16 / 9; } .cf-caption { text-align: center; padding-inline: 20px; font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 700; margin-top: 10px; } .lightbox { max-width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 0; border-radius: 26px; background: transparent; overflow: visible; } .lightbox::backdrop { background: rgba(10, 8, 6, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox img { max-height: 90vh; width: auto; border-radius: 22px; } .lb-x { position: absolute; top: -18px; right: -18px; z-index: 2; } /* ── Premium ────────────────────────────────────────────────────────────── */ .premium { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; } .tier-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 360px); margin-top: 34px; padding: 7px; border-radius: 999px; background: var(--bg); box-shadow: var(--inset); isolation: isolate; } .tier-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border: 0; background: transparent; font-weight: 700; font-size: 1rem; color: var(--dim); transition: color .3s; } .tier-switch button .ic { width: 20px; height: 20px; } .tier-switch button[aria-checked="true"] { color: #fff; } .knob { position: absolute; z-index: 0; top: 7px; bottom: 7px; left: 7px; width: calc(50% - 7px); border-radius: 999px; background: linear-gradient(135deg, #64748B, #334155); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); transition: left .5s var(--ease-spring), background .4s; } .tier-switch[data-tier="premium"] .knob { left: 50%; background: linear-gradient(135deg, #FB923C, #EA580C); box-shadow: 0 10px 22px -8px var(--brand-glow); } .plans { display: flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; } .coin { position: relative; width: 170px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 2px; padding: 20px; background: var(--sheen), var(--bg); box-shadow: var(--raise); } .coin::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px dashed var(--line-2); } .coin b { font-family: var(--f-display); font-size: 1.35rem; } .coin span { font-weight: 700; color: var(--brand-ink); font-size: .92rem; } .coin small { font-size: .74rem; color: var(--dim); line-height: 1.3; max-width: 110px; } .coin-best::before { border-color: var(--brand); border-style: solid; } .coin-best::after { content: "Best value"; position: absolute; top: -6px; right: 0; padding: 4px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .7rem; font-weight: 700; rotate: 12deg; } .plan-foot { margin-top: 26px; font-size: .88rem; color: var(--dim); max-width: 34em; } .compare { display: grid; gap: 12px; } .compare li { display: grid; grid-template-columns: 46px 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 20px 14px 14px; border-radius: 999px; background: var(--sheen), var(--bg); box-shadow: var(--raise-sm); transition: transform .5s var(--ease-spring), box-shadow .4s; } .compare li:nth-child(odd) { margin-left: 22px; margin-right: -22px; } .compare li > .ic { width: 46px; height: 46px; padding: 11px; border-radius: 50%; box-shadow: var(--inset-sm); color: var(--dim); transition: color .4s; } .compare li > b { font-size: .96rem; } .cv { position: relative; display: grid; font-size: .9rem; color: var(--ink-2); } .cv > span { grid-area: 1 / 1; transition: opacity .35s, transform .45s var(--ease); } .cv .p { opacity: 0; transform: translateY(12px); font-weight: 700; color: var(--brand-ink); } .compare[data-tier="premium"] .cv .f { opacity: 0; transform: translateY(-12px); } .compare[data-tier="premium"] .cv .p { opacity: 1; transform: none; } .compare[data-tier="premium"] li > .ic { color: var(--brand); } .compare[data-tier="premium"] li { box-shadow: var(--raise-sm), 0 0 0 1.5px color-mix(in srgb, var(--brand) 35%, transparent); } /* ── FAQ ────────────────────────────────────────────────────────────────── */ .faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: start; } .faq-side { position: sticky; top: calc(var(--hdr-h) + 40px); } .faq-search { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; margin: 30px 0 22px; background: var(--paper); --neu-lo: rgba(176, 150, 124, .45); border-radius: 20px; } :root[data-theme="dark"] .faq-search { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .faq-search { --neu-lo: rgba(8, 6, 5, .8); } } .faq-search .ic { color: var(--brand); width: 22px; height: 22px; } .faq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--ink); } .qa-list { display: grid; gap: 14px; } .qa { border-radius: 26px; background: var(--sheen), var(--paper); --neu-lo: rgba(176, 150, 124, .40); box-shadow: var(--raise-sm); transition: box-shadow .3s; } :root[data-theme="dark"] .qa { --neu-lo: rgba(8, 6, 5, .8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qa { --neu-lo: rgba(8, 6, 5, .8); } } .qa[open] { box-shadow: var(--raise-sm), 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent); } .qa summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px 20px 26px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.05rem; } .qa summary::-webkit-details-marker { display: none; } .pm { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; box-shadow: var(--inset-sm); } .pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--brand); transition: transform .35s var(--ease); } .pm::after { transform: rotate(90deg); } .qa[open] .pm::after { transform: rotate(0); } .ans { padding: 0 26px 22px; color: var(--ink-2); line-height: 1.6; } .ans p + p { margin-top: 10px; } .faq-none { padding: 20px; color: var(--dim); } /* ── CTA ────────────────────────────────────────────────────────────────── */ .cta { padding-bottom: clamp(120px, 14vw, 190px); overflow: hidden; } .cta::before { content: ""; position: absolute; width: 1100px; height: 1100px; left: -380px; top: 50%; translate: 0 -50%; border-radius: 50%; border: 60px solid color-mix(in srgb, var(--brand) 9%, transparent); box-shadow: 0 0 0 80px color-mix(in srgb, var(--brand) 4%, transparent); pointer-events: none; } .cta-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; } .cta-code { display: grid; place-items: center; } .cta-plate { position: relative; width: min(100%, 420px); padding: 18px; border-radius: 42px; background: var(--sheen), var(--bg); box-shadow: var(--raise); rotate: -4deg; transition: rotate .6s var(--ease); } .cta-plate:hover { rotate: 0deg; } .cta-plate img { border-radius: 28px; } .cta-corners i { position: absolute; width: 54px; height: 54px; border: 6px solid var(--brand); } .cta-corners i:nth-child(1) { left: -12px; top: -12px; border-right: 0; border-bottom: 0; border-top-left-radius: 24px; } .cta-corners i:nth-child(2) { right: -12px; top: -12px; border-left: 0; border-bottom: 0; border-top-right-radius: 24px; } .cta-corners i:nth-child(3) { left: -12px; bottom: -12px; border-right: 0; border-top: 0; border-bottom-left-radius: 24px; } .cta-corners i:nth-child(4) { right: -12px; bottom: -12px; border-left: 0; border-top: 0; border-bottom-right-radius: 24px; } .cta-sweep { position: absolute; left: 6%; right: 6%; top: 8%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--brand-3), transparent); box-shadow: 0 0 20px var(--brand); animation: scanline 2.6s ease-in-out infinite alternate; } .cta-copy .lead { margin: 22px 0 34px; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .ftr { position: relative; background: var(--ink-band); color: var(--on-ink-dim); padding: 70px 0 110px; } .wave-ftr { bottom: 100%; margin-bottom: -1px; fill: var(--ink-band); } .ftr .brand, .ftr .brand:hover { color: var(--on-ink); } .ftr-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; } .ftr-brand p { margin-top: 16px; max-width: 30em; line-height: 1.6; font-size: .95rem; } .ftr-mods { display: grid; grid-template-columns: repeat(14, 10px); gap: 5px; margin-top: 26px; } .ftr-mods i { width: 10px; height: 10px; border-radius: 2.5px; background: rgba(255, 255, 255, .12); } .ftr-mods i.on { background: var(--brand); } .ftr-col h2 { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink); margin-bottom: 16px; } .ftr-col ul { display: grid; gap: 10px; } .ftr-col a { color: var(--on-ink-dim); text-decoration: none; font-size: .95rem; overflow-wrap: anywhere; } .ftr-col a:hover { color: var(--brand-3); } .ftr-mark { margin: 60px 0 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(4rem, 17vw, 15rem); line-height: .85; letter-spacing: -.04em; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14); user-select: none; } .ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .84rem; } /* ── Mobile bar, toast ──────────────────────────────────────────────────── */ .mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 24px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--raise-sm), 0 0 0 1px color-mix(in srgb, var(--line-2) 40%, transparent); translate: 0 140%; transition: translate .45s var(--ease); } .mbar.show { translate: 0 0; } .mbar img { border-radius: 11px; } .mbar div { flex: 1; line-height: 1.2; } .mbar b { display: block; } .mbar small { color: var(--dim); font-size: .8rem; } .toast { position: fixed; left: 50%; bottom: 28px; z-index: 150; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 20px 12px 14px; border-radius: 999px; background: #151515; color: #fff; font-weight: 600; font-size: .92rem; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5); translate: -50% 160%; opacity: 0; transition: translate .45s var(--ease), opacity .3s; pointer-events: none; } .toast .ic { color: #4ade80; width: 22px; height: 22px; } .toast.show { translate: -50% 0; opacity: 1; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1180px) { .nav a { padding: 9px 9px; font-size: .88rem; } .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .flow-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; } .oc-1 { left: -18%; } .oc-2 { right: -16%; } .oc-3 { left: -16%; } } @media (max-width: 1020px) { :root { --hdr-h: 66px; } .menu-btn { display: grid; } .hdr-cta { display: none; } .nav { position: absolute; left: 10px; right: 10px; top: 74px; margin: 0; padding: 12px; border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--raise), 0 0 0 1px color-mix(in srgb, var(--line-2) 40%, transparent); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .3s var(--ease), visibility .3s; } .nav.open { opacity: 1; visibility: visible; transform: none; } .nav ul { flex-direction: column; } .nav a { padding: 14px 16px; font-size: 1.02rem; } .theme-seg { margin-left: auto; } .hero { padding-top: calc(var(--hdr-h) + 50px); } .hero-grid, .split, .studio, .card-studio, .lang, .premium, .faq, .cta-in { grid-template-columns: minmax(0, 1fr); } .hero-copy { text-align: center; } .hero-copy .lead { margin-inline: auto; } .hero-copy .eyebrow { justify-content: center; } .cta-row, .hero-trust { justify-content: center; } .split-rev .split-copy { order: 0; } .studio-stage, .faq-side { position: static; } .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; } .verdict-wrap { grid-template-columns: minmax(0, 1fr); } .lang-copy .dial { margin-inline: auto; } .flow { grid-template-columns: minmax(0, 1fr); } .compare li:nth-child(odd) { margin: 0; } .ftr-grid { grid-template-columns: 1fr 1fr; } .ftr-brand { grid-column: 1 / -1; } .mbar { display: flex; } } @media (max-width: 760px) { body { font-size: 16px; } .hero .eyebrow { font-size: .68rem; letter-spacing: .1em; gap: 8px; } .hero .eyebrow i { margin: 0 2px; } .hero-stage { min-height: 640px; } .orbit-chip { padding: 7px 14px 7px 7px; } .orbit-chip small { display: none; } .oc-ic { width: 32px; height: 32px; } .oc-1 { left: -4%; top: 4%; } .oc-2 { right: -4%; top: 48%; } .oc-3 { left: -4%; bottom: 8%; } .hero-card { width: 180px; right: -4%; bottom: 0; } .phone { --pw: 292px; } .phone-upi, .phone-lang { translate: 0 0; } .standee { position: relative; right: auto; bottom: auto; margin-top: -60px; rotate: 4deg; } .upi-stage { display: flex; flex-direction: column; align-items: center; min-height: 0; } .lang-art { width: 40%; left: -8%; opacity: .5; } .split-stage, .lang-stage { min-height: 640px; } .stage-blob { width: 104%; } .dial { width: min(100%, 360px); } .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof li:last-child { grid-column: 1 / -1; } .fields { grid-template-columns: minmax(0, 1fr); } .fields .field, .fields .field.half { grid-column: 1; margin-top: 12px; } .fields .field:first-child { margin-top: 0; } .steps::before { left: 17px; } .step { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; } .step-n { width: 36px; height: 36px; } .track { height: auto; margin: 30px 0; } .track-svg { display: none; } .nodes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; } .nodes li { position: static; translate: none; width: auto; } .nodes li:nth-child(even) b { order: 0; } .verdict-card { grid-template-columns: minmax(0, 1fr); padding: 22px; } .compare li { grid-template-columns: 40px minmax(0, 1fr); border-radius: 26px; row-gap: 4px; } .compare li > .ic { width: 40px; height: 40px; padding: 9px; grid-row: span 2; } .coin { width: 150px; } .ftr-grid { grid-template-columns: minmax(0, 1fr); } .kind-arc button { --lift: 0px !important; padding: 0 14px; min-height: 42px; font-size: .9rem; } .fdest li { font-size: .68rem; padding: 7px 8px; gap: 5px; } .fdest li .ic { width: 16px; height: 16px; } .fphone { width: 62px; height: 92px; } .flock { width: 32px; height: 32px; } .sto:nth-child(even) { margin-top: 0; } .card-tools .seg { min-width: 0; } .toast { bottom: 96px; } } @media (max-width: 420px) { .hdr-in { gap: 8px; padding: 0 8px 0 12px; } .wm { font-size: 1.15rem; } .theme-seg button { width: 30px; height: 30px; } .phone { --pw: 272px; } .cta-row .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .orbit-arc { stroke-dashoffset: 0; } } /* ── Print ──────────────────────────────────────────────────────────────── */ @media print { .hdr, .mbar, .toast, .ftr-mods, .doc-kicker, .theme-seg, .scroll-cue, .wave, .field-canvas, .hero-pool, .stage-blob { display: none !important; } body { background: #fff; color: #111; font-size: 11pt; } .doc, .doc p, .doc li { color: #111; } .doc-layout { grid-template-columns: 1fr; } .toc { display: none; } .doc h2 { page-break-after: avoid; } .callout, .summary, .qa { box-shadow: none; border: 1px solid #ccc; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; } .ftr { background: #fff; color: #333; padding: 20px 0; } .ftr-col, .ftr-mark { display: none; } } /* ── Premium locks in the demos ───────────────────────────────────────────── * Presentation only. What a locked control actually does is decided in * site.js, inside a closure, and the mark is painted into the canvas by * qr.js — so editing any of these classes changes how a lock looks and * nothing about what the demo will give you. */ .lock-pip { position: absolute; top: 5px; right: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 18%, var(--bg)); color: var(--brand); } .lock-pip .ic { width: 11px; height: 11px; } .chip-row button { position: relative; } .chip-row button .lock-pip { top: 3px; right: 4px; } .shape-tile.is-locked canvas, .chip-row button.is-locked { opacity: .82; } .shape-tile.is-locked[aria-checked="true"], .chip-row button.is-locked[aria-checked="true"] { border-color: var(--amber); color: var(--brand-ink); box-shadow: 0 0 18px -4px rgba(245, 158, 11, .5); } .gate-locked { color: var(--brand-ink); } .peek-banner { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, var(--bg)); color: var(--brand-ink); font-size: .88rem; font-weight: 600; animation: fadeUp .3s var(--ease) both; } .peek-banner .ic { width: 18px; height: 18px; } .peek-banner b { font-variant-numeric: tabular-nums; } .demo-note { display: flex; gap: 10px; align-items: flex-start; max-width: 460px; margin-top: 16px; font-size: .84rem; line-height: 1.5; color: var(--dim); } .demo-note .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--brand); } /* A premium card design, watermarked here the way the app watermarks it. */ .card3d.is-locked .face { container-type: inline-size; } .card3d.is-locked .face::before { content: "PREMIUM DESIGN · QR CRAFT"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font: 700 clamp(12px, 2.4cqi, 20px)/1.6 var(--f-sans); letter-spacing: .18em; color: rgba(255, 255, 255, .82); background: repeating-linear-gradient(-24deg, rgba(20, 16, 12, .42) 0 26px, rgba(20, 16, 12, .22) 26px 52px); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); pointer-events: none; } .lock-modal { max-width: min(94vw, 460px); padding: 34px 32px 30px; border: 0; border-radius: 32px; background: var(--sheen), var(--bg); color: var(--ink); box-shadow: var(--shadow-deep); overflow: visible; } .lock-modal::backdrop { background: rgba(10, 8, 6, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lock-x { position: absolute; top: -16px; right: -16px; width: 42px; height: 42px; } .lock-crown { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 18px; border-radius: 20px; background: linear-gradient(145deg, #FB923C, #EA580C); color: #fff; box-shadow: 0 12px 26px -10px var(--brand-glow); } .lock-crown .ic { width: 32px; height: 32px; } .lock-modal h2 { font-family: var(--f-display); font-size: 1.6rem; font-weight: 700; line-height: 1.15; } .lock-modal > p { margin-top: 10px; color: var(--ink-2); line-height: 1.55; } .lock-list { display: grid; gap: 11px; margin: 20px 0 24px; } .lock-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; line-height: 1.45; color: var(--ink-2); } .lock-list .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand); } .lock-foot { margin-top: 14px; font-size: .82rem; color: var(--dim); }