/* ══════════════════════════════════════════════════════════════ PinkoQR — Premium Design System (marketing + auth surfaces) Light mode = default. Dark mode = html[data-theme="dark"] or prefers-color-scheme when no explicit choice has been made. Scoped to assets/design-system.css — does NOT touch assets/theme.css (restaurant-admin / platform-admin dashboards keep their own tokens). ══════════════════════════════════════════════════════════════ */ /* ── Fonts ─────────────────────────────────────────────────────── */ /* Inter / Manrope / Instrument Serif are loaded via a Google Fonts in each page's (no local()-only @font-face here — that pattern is what silently broke the old 'Yu Buyan' heading font sitewide, since it never had a real src to fall back to). */ :root{ --font-body:'Inter','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --font-display:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-accent:'Instrument Serif','Cormorant Garamond',Georgia,serif; /* ── Color scales — Primary (Indigo) ──────────────────────────── */ --indigo-50:#EEF2FF; --indigo-100:#E0E7FF; --indigo-200:#C7D2FE; --indigo-300:#A5B4FC; --indigo-400:#818CF8; --indigo-500:#6366F1; --indigo-600:#4F46E5; --indigo-700:#4338CA; --indigo-800:#3730A3; --indigo-900:#312E81; /* ── Secondary (Violet) ────────────────────────────────────────── */ --violet-50:#F5F3FF; --violet-100:#EDE9FE; --violet-200:#DDD6FE; --violet-300:#C4B5FD; --violet-400:#A78BFA; --violet-500:#8B5CF6; --violet-600:#7C3AED; --violet-700:#6D28D9; --violet-800:#5B21B6; --violet-900:#4C1D95; /* ── Accent (Cyan) ─────────────────────────────────────────────── */ --cyan-50:#ECFEFF; --cyan-100:#CFFAFE; --cyan-200:#A5F3FC; --cyan-300:#67E8F9; --cyan-400:#22D3EE; --cyan-500:#06B6D4; --cyan-600:#0891B2; --cyan-700:#0E7490; --cyan-800:#155E75; --cyan-900:#164E63; /* ── Status: success / warning / danger / info ────────────────── */ --success-50:#ECFDF5; --success-100:#D1FAE5; --success-200:#A7F3D0; --success-300:#6EE7B7;--success-400:#34D399; --success-500:#10B981; --success-600:#059669;--success-700:#047857; --success-800:#065F46; --success-900:#064E3B; --warning-50:#FFFBEB; --warning-100:#FEF3C7; --warning-200:#FDE68A; --warning-300:#FCD34D;--warning-400:#FBBF24; --warning-500:#F59E0B; --warning-600:#D97706;--warning-700:#B45309; --warning-800:#92400E; --warning-900:#78350F; --danger-50:#FEF2F2; --danger-100:#FEE2E2; --danger-200:#FECACA; --danger-300:#FCA5A5; --danger-400:#F87171; --danger-500:#EF4444; --danger-600:#DC2626; --danger-700:#B91C1C; --danger-800:#991B1B; --danger-900:#7F1D1D; --info-50:#F0F9FF; --info-100:#E0F2FE; --info-200:#BAE6FD; --info-300:#7DD3FC; --info-400:#38BDF8; --info-500:#0EA5E9; --info-600:#0284C7; --info-700:#0369A1; --info-800:#075985; --info-900:#0C4A6E; /* ── Neutrals ──────────────────────────────────────────────────── */ --gray-50:#F8FAFC; --gray-100:#F1F5F9; --gray-200:#E2E8F0; --gray-300:#CBD5E1; --gray-400:#94A3B8; --gray-500:#64748B; --gray-600:#475569; --gray-700:#334155; --gray-800:#1E293B; --gray-900:#0F172A; /* ── Semantic aliases — LIGHT (default) ───────────────────────── */ --bg:#FFFFFF; --bg-alt:var(--gray-50); --surface:#FFFFFF; --surface-2:var(--gray-50); --border:var(--gray-200); --border-strong:var(--gray-300); --border2:var(--border-strong); --text:var(--gray-900); --text-2:var(--gray-600); --text-3:var(--gray-400); --ink-on-primary:#FFFFFF; --primary:var(--indigo-600); --primary-hover:var(--indigo-700); --primary-soft:var(--indigo-50); --accent:var(--cyan-500); --secondary:var(--violet-600); --success:var(--success-600); --warning:var(--warning-600); --danger:var(--danger-600); --info:var(--info-600); --grad-primary:linear-gradient(135deg,var(--indigo-600) 0%,var(--violet-600) 100%); --grad-accent:linear-gradient(135deg,var(--violet-500) 0%,var(--cyan-400) 100%); --grad-text:linear-gradient(135deg,var(--indigo-500) 0%,var(--violet-500) 55%,var(--cyan-400) 100%); --grad-mesh: radial-gradient(ellipse 900px 600px at 15% -10%, rgba(99,102,241,0.16), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 10%, rgba(139,92,246,0.14), transparent 60%), radial-gradient(ellipse 700px 700px at 50% 100%, rgba(34,211,238,0.10), transparent 60%); --nav-bg:rgba(255,255,255,0.78); --overlay:rgba(15,17,23,0.55); /* ── Radius / elevation / motion ───────────────────────────────── */ --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --shadow-xs:0 1px 2px rgba(15,23,42,0.06); --shadow-sm:0 2px 8px rgba(15,23,42,0.06); --shadow-md:0 8px 24px rgba(15,23,42,0.08); --shadow-lg:0 16px 48px rgba(15,23,42,0.10); --shadow-xl:0 28px 80px rgba(15,23,42,0.14); --shadow-glow-primary:0 0 0 1px rgba(79,70,229,0.28), 0 12px 32px rgba(79,70,229,0.28); --shadow-glow-accent:0 0 0 1px rgba(34,211,238,0.28), 0 12px 32px rgba(34,211,238,0.22); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-fast:150ms; --dur-base:250ms; --dur-slow:450ms; /* ── Fluid type scale ──────────────────────────────────────────── */ --fs-display:clamp(2.75rem,3.2vw + 2rem,5.5rem); --fs-h1:clamp(2.25rem,2vw + 1.75rem,3.5rem); --fs-h2:clamp(1.75rem,1.4vw + 1.4rem,2.75rem); --fs-h3:clamp(1.25rem,.5vw + 1.1rem,1.5rem); --fs-h4:1.125rem; --fs-body-lg:1.125rem; --fs-body:1rem; --fs-sm:0.875rem; --fs-xs:0.75rem; } html[data-theme="dark"]{ --bg:#08090D; --bg-alt:#0C0E14; --surface:#111319; --surface-2:#15171E; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --text:#F4F5F7; --text-2:#A0A3AD; --text-3:#6B6E76; --ink-on-primary:#FFFFFF; --primary:var(--indigo-400); --primary-hover:var(--indigo-300); --primary-soft:rgba(99,102,241,0.14); --accent:var(--cyan-400); --secondary:var(--violet-400); --grad-mesh: radial-gradient(ellipse 900px 600px at 15% -10%, rgba(99,102,241,0.24), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 10%, rgba(139,92,246,0.20), transparent 60%), radial-gradient(ellipse 700px 700px at 50% 100%, rgba(34,211,238,0.14), transparent 60%); --nav-bg:rgba(8,9,13,0.72); --overlay:rgba(0,0,0,0.65); --shadow-xs:0 1px 2px rgba(0,0,0,0.3); --shadow-sm:0 2px 8px rgba(0,0,0,0.3); --shadow-md:0 8px 24px rgba(0,0,0,0.35); --shadow-lg:0 16px 48px rgba(0,0,0,0.4); --shadow-xl:0 28px 80px rgba(0,0,0,0.5); } @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]){ --bg:#08090D; --bg-alt:#0C0E14; --surface:#111319; --surface-2:#15171E; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14); --text:#F4F5F7; --text-2:#A0A3AD; --text-3:#6B6E76; --primary:var(--indigo-400); --primary-hover:var(--indigo-300); --primary-soft:rgba(99,102,241,0.14); --accent:var(--cyan-400); --secondary:var(--violet-400); --grad-mesh: radial-gradient(ellipse 900px 600px at 15% -10%, rgba(99,102,241,0.24), transparent 60%), radial-gradient(ellipse 800px 600px at 100% 10%, rgba(139,92,246,0.20), transparent 60%), radial-gradient(ellipse 700px 700px at 50% 100%, rgba(34,211,238,0.14), transparent 60%); --nav-bg:rgba(8,9,13,0.72); --overlay:rgba(0,0,0,0.65); --shadow-xs:0 1px 2px rgba(0,0,0,0.3); --shadow-sm:0 2px 8px rgba(0,0,0,0.3); --shadow-md:0 8px 24px rgba(0,0,0,0.35); --shadow-lg:0 16px 48px rgba(0,0,0,0.4); --shadow-xl:0 28px 80px rgba(0,0,0,0.5); } } /* ══════════════════════════════════════════════ RESET + BASE ══════════════════════════════════════════════ */ .pk *{box-sizing:border-box} .pk-root{ font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.65; transition:background var(--dur-base) ease,color var(--dur-base) ease; } .pk-root a{text-decoration:none;color:inherit} .pk-root img{max-width:100%;display:block} .pk-root button{font-family:inherit;cursor:pointer;border:none;background:none} .pk-root h1,.pk-root h2,.pk-root h3,.pk-root h4,.pk-root h5,.pk-root h6{ font-family:var(--font-display);line-height:1.1;letter-spacing:-0.02em;font-weight:700; } .pk-root h1{font-size:var(--fs-h1)} .pk-root h2{font-size:var(--fs-h2)} .pk-root h3{font-size:var(--fs-h3);font-weight:600} .pk-root p{line-height:1.75;color:var(--text-2)} .fs-display{font-family:var(--font-display);font-size:var(--fs-display);line-height:1.05;letter-spacing:-0.03em;font-weight:700} .fs-caption{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--text-3)} .fs-label{font-size:var(--fs-sm);font-weight:600;color:var(--text-2)} .accent-italic{font-family:var(--font-accent);font-style:italic;font-weight:500;color:var(--secondary)} .grad-text{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} /* ══════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════ */ .pk-wrap{max-width:1240px;margin:0 auto;padding:0 40px} .pk-section{padding:120px 0;position:relative} .pk-section-tight{padding:64px 0} @media(max-width:480px){.pk-wrap{padding:0 20px}} /* ── Background primitives ────────────────────────────────────── */ .bg-mesh{position:relative} .bg-mesh::before{content:'';position:absolute;inset:0;background:var(--grad-mesh);pointer-events:none;z-index:0} .bg-mesh>*{position:relative;z-index:1} .bg-grain::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } .bg-dot-grid{background-image:radial-gradient(var(--border-strong) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 40%,transparent 100%)} .glow-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0} .glow-orb-primary{background:radial-gradient(circle at center,rgba(99,102,241,0.20),transparent 70%)} .glow-orb-accent{background:radial-gradient(circle at center,rgba(34,211,238,0.16),transparent 70%)} .glow-orb-secondary{background:radial-gradient(circle at center,rgba(139,92,246,0.16),transparent 70%)} @keyframes orbFloat{ 0%,100%{transform:translateY(0) translateX(0) scale(1)} 33%{transform:translateY(-35px) translateX(20px) scale(1.04)} 66%{transform:translateY(20px) translateX(-24px) scale(0.98)} } .glow-orb{animation:orbFloat 16s ease-in-out infinite} /* ══════════════════════════════════════════════ REVEAL ANIMATIONS ══════════════════════════════════════════════ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)} .reveal.visible{opacity:1;transform:none} .reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}.reveal-d5{transition-delay:.4s}.reveal-d6{transition-delay:.48s} /* ══════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 28px;border-radius:var(--r-pill); font-size:14px;font-weight:600;letter-spacing:0.01em; transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease; position:relative;overflow:hidden;white-space:nowrap; } .btn::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.16) 50%,transparent 100%); transform:translateX(-120%);transition:transform .5s ease; } .btn:hover::after{transform:translateX(120%)} .btn-primary{background:var(--grad-primary);color:var(--ink-on-primary);box-shadow:var(--shadow-glow-primary)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(79,70,229,0.4),0 20px 48px rgba(79,70,229,0.38)} .btn-primary:active{transform:translateY(0)} .btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);box-shadow:var(--shadow-xs)} .btn-secondary:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)} .btn-ghost{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)} .btn-ghost:hover{background:var(--border);color:var(--text)} .btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border-strong)} .btn-outline:hover{border-color:var(--primary);color:var(--primary)} .btn-glass{ background:rgba(255,255,255,0.06);color:var(--text); border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } .btn-glass:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.24)} .btn-icon{width:44px;height:44px;padding:0;border-radius:var(--r-pill)} .btn-sm{padding:9px 20px;font-size:13px} .btn-lg{padding:16px 34px;font-size:15px} .btn[disabled],.btn.is-loading{pointer-events:none;opacity:.72} .btn-spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:pkspin .7s linear infinite} @keyframes pkspin{to{transform:rotate(360deg)}} /* Ripple (injected by assets/interactions.js onto .btn/.ra-btn clicks) */ .pk-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);animation:pkRipple .6s ease-out;pointer-events:none} @keyframes pkRipple{to{transform:scale(1);opacity:0}} /* ══════════════════════════════════════════════ CARDS ══════════════════════════════════════════════ */ .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) ease; } .card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)} .card-glass{ background:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.4); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-md); } html[data-theme="dark"] .card-glass{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]):not([data-theme="dark"]) .card-glass{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1)} } .card-gradient-border{position:relative;border-radius:var(--r-lg);background:var(--surface);z-index:0} .card-gradient-border::before{ content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1; background:var(--grad-accent); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity var(--dur-base) ease; } .card-gradient-border:hover::before{opacity:1} .card-glow{position:relative} .card-glow::after{ content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%); width:70%;height:60%;background:var(--grad-accent);filter:blur(60px);opacity:0; transition:opacity var(--dur-slow) ease;pointer-events:none;z-index:-1; } .card-glow:hover::after{opacity:.35} /* ══════════════════════════════════════════════ BADGES / PILLS ══════════════════════════════════════════════ */ .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;letter-spacing:.02em} .badge-primary{background:var(--primary-soft);color:var(--primary)} .badge-success{background:var(--success-50);color:var(--success-700)} html[data-theme="dark"] .badge-success{background:rgba(16,185,129,.14);color:var(--success-400)} .badge-warning{background:var(--warning-50);color:var(--warning-700)} html[data-theme="dark"] .badge-warning{background:rgba(245,158,11,.14);color:var(--warning-400)} .badge-danger{background:var(--danger-50);color:var(--danger-700)} html[data-theme="dark"] .badge-danger{background:rgba(239,68,68,.14);color:var(--danger-400)} .badge-neutral{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)} /* ══════════════════════════════════════════════ FORMS ══════════════════════════════════════════════ */ .field{position:relative;margin-bottom:20px} .field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);margin-bottom:8px} .field .input,.field select,.field textarea{ width:100%;padding:14px 16px;border-radius:var(--r-md); background:var(--surface-2);border:1.5px solid var(--border); color:var(--text);font-size:14.5px;font-family:inherit; transition:border-color var(--dur-base) ease,box-shadow var(--dur-base) ease,background var(--dur-base) ease; } .field .input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--primary);background:var(--surface); box-shadow:0 0 0 4px var(--primary-soft); } .field.is-invalid .input,.field.is-invalid textarea{border-color:var(--danger);box-shadow:0 0 0 4px var(--danger-50)} .field.is-valid .input,.field.is-valid textarea{border-color:var(--success);box-shadow:0 0 0 4px var(--success-50)} .field-hint{font-size:var(--fs-xs);color:var(--text-3);margin-top:6px} .field-hint.error{color:var(--danger)} .field-hint.success{color:var(--success)} .strength-meter{display:flex;gap:5px;margin-top:8px} .strength-bar{height:4px;flex:1;border-radius:var(--r-pill);background:var(--border);transition:background var(--dur-base) ease} .strength-bar.weak{background:var(--danger)} .strength-bar.fair{background:var(--warning)} .strength-bar.strong{background:var(--success)} .checkbox-wrap{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .checkbox-custom{ width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong); flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px; transition:all var(--dur-fast) ease; } input:checked+.checkbox-custom,.checkbox-wrap input:checked~.checkbox-custom{ background:var(--grad-primary);border-color:transparent; } /* ══════════════════════════════════════════════ ACCORDION ══════════════════════════════════════════════ */ .pk-accordion-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:border-color var(--dur-base) ease} .pk-accordion-item.open{border-color:var(--border-strong);box-shadow:var(--shadow-sm)} .pk-accordion-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;font-weight:600;color:var(--text)} .pk-accordion-q .chev{transition:transform var(--dur-base) var(--ease-out);color:var(--text-3);flex-shrink:0} .pk-accordion-item.open .pk-accordion-q .chev{transform:rotate(180deg);color:var(--primary)} .pk-accordion-a{display:none;padding:0 22px 20px;color:var(--text-2);line-height:1.7} .pk-accordion-item.open .pk-accordion-a{display:block} /* ══════════════════════════════════════════════ ICONS (24x24 viewBox, 1.75 stroke, round caps/joins) ══════════════════════════════════════════════ */ .pk-icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} /* ══════════════════════════════════════════════ RESPONSIVE HELPERS ══════════════════════════════════════════════ */ @media(max-width:900px){.pk-section{padding:80px 0}} @media(max-width:600px){.pk-section{padding:64px 0}.pk-section-tight{padding:48px 0}}