/* ============================================ Touch2Pay — Dark / Liquid Glass theme Inspired by parityai's liquid-glass recipe. Applied by adding class="theme-dark" on or . ============================================ */ .theme-dark { /* Surfaces — cool indigo body + warm plum-mocha for "dark moments" */ --bg: #121E3A; /* indigo body */ --bg-alt: #182846; /* indigo soft */ --bg-surface: rgba(255, 255, 255, 0.04); --bg-dark: #121E3A; --bg-dark-2: #1E3056; /* Deep jewel-teal — the accent palette at its maximum depth */ --deep-teal: #0E2128; /* deepest teal-black */ --deep-teal-2: #143038; /* mid teal */ --deep-teal-3: #1C4351; /* lighter teal accent */ --deep-glow: rgba(52, 211, 194, 0.12); /* teal wash */ /* Brand — brighter mint + teal for luminosity against midnight */ --primary: #5EEAD4; --primary-hover: #34D399; --primary-strong: #2DD4BF; --primary-soft: rgba(94, 234, 212, 0.16); --primary-tint: rgba(94, 234, 212, 0.10); --accent: #7DD3FC; --accent-hover: #38BDF8; --accent-soft: rgba(125, 211, 252, 0.16); --accent-tint: rgba(125, 211, 252, 0.10); /* Text — cleaner whites for higher contrast */ --text: #F8FAFC; --text-secondary: rgba(248, 250, 252, 0.78); --text-muted: rgba(248, 250, 252, 0.55); --text-on-dark: #F8FAFC; --text-on-dark-muted: rgba(248, 250, 252, 0.72); /* Borders — low-opacity whites for hairlines on dark */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-dark: rgba(255, 255, 255, 0.08); --border-dark-soft: rgba(255, 255, 255, 0.06); /* Status */ --danger: #F87171; /* Gradients */ --gradient-brand: linear-gradient(135deg, #5EEAD4 0%, #7DD3FC 100%); --gradient-text: linear-gradient(120deg, #A7F3D0 0%, #BAE6FD 100%); --gradient-dark: linear-gradient(160deg, #143038 0%, #0E2128 55%, #0A1A20 100%); --gradient-warm: linear-gradient(135deg, #1C4351 0%, #0E2128 55%, #0A1A20 100%); --gradient-hero: radial-gradient(circle at 85% 8%, rgba(94, 234, 212, 0.20), transparent 45%), radial-gradient(circle at 10% 92%, rgba(125, 211, 252, 0.18), transparent 40%); /* Shadows — none on dark, replaced by glow + inset highlights */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.6); --shadow-primary: 0 12px 40px rgba(52, 211, 153, 0.28); --shadow-accent: 0 12px 40px rgba(56, 189, 248, 0.24); --shadow-glow: 0 0 0 1px rgba(52, 211, 153, 0.22), 0 24px 60px -20px rgba(52, 211, 153, 0.35); } .theme-dark html, .theme-dark body, html.theme-dark, html.theme-dark body { background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(94, 234, 212, 0.06), transparent 55%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(125, 211, 252, 0.04), transparent 50%), var(--bg); background-attachment: fixed; color: var(--text); } .theme-dark body { font-family: Inter, system-ui, sans-serif; } /* ============================================ Typography swap — Instrument Serif for display ============================================ */ .theme-dark h1, .theme-dark h2 { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-weight: 400; line-height: 0.96; letter-spacing: -0.022em; } .theme-dark h3, .theme-dark h4 { font-family: Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; } .theme-dark h1 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.02em; } .theme-dark h2 { font-size: clamp(34px, 4.4vw, 60px); } .theme-dark .hero-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(44px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.02em; } .theme-dark .headline-emph { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================ Liquid glass (parityai recipe) ============================================ */ .theme-dark .liquid-glass, .theme-dark .glass { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10); } .theme-dark .liquid-glass::before, .theme-dark .glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0.38) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ============================================ Nav — pill-shaped glass floating above hero ============================================ */ .theme-dark .site-nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; } .theme-dark .site-nav__bar { position: relative; margin: 16px auto; padding: 8px 20px; border-radius: 9999px; background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10); height: auto; min-height: 56px; max-width: 1100px; } .theme-dark .site-nav__bar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.12) 80%, rgba(255, 255, 255, 0.38) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .theme-dark .site-nav__link { color: var(--text); } .theme-dark .site-nav__link:hover, .theme-dark .site-nav__link:focus-visible { color: var(--primary); } .theme-dark .site-nav__link::after { background: var(--gradient-text); } .theme-dark .site-nav__toggle { color: var(--text); } /* ============================================ Buttons ============================================ */ .theme-dark .btn-primary { background: #FFFFFF; color: #000000; box-shadow: 0 10px 32px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5); border: 0; } .theme-dark .btn-primary:hover, .theme-dark .btn-primary:focus-visible { background: #F3F4F6; color: #000000; transform: translateY(-2px); box-shadow: 0 18px 48px rgba(255, 255, 255, 0.2); } .theme-dark .btn-ghost, .theme-dark .btn-ghost-light { background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10); } .theme-dark .btn-ghost:hover, .theme-dark .btn-ghost:focus-visible, .theme-dark .btn-ghost-light:hover, .theme-dark .btn-ghost-light:focus-visible { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: rgba(255, 255, 255, 0.28); } .theme-dark .btn-accent { background: var(--gradient-brand); color: #0B1220; box-shadow: 0 10px 30px rgba(52, 211, 153, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* ============================================ Cards / Pillars / Industries — all liquid-glass ============================================ */ .theme-dark .card, .theme-dark .pillar, .theme-dark .industry-card, .theme-dark .device-card, .theme-dark .stat-card, .theme-dark .testimonial-card, .theme-dark .form-shell, .theme-dark .info-panel, .theme-dark .mock-panel { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--text); } .theme-dark .card::after, .theme-dark .pillar::after, .theme-dark .industry-card::after, .theme-dark .device-card::after, .theme-dark .stat-card::after, .theme-dark .testimonial-card::after, .theme-dark .form-shell::after, .theme-dark .info-panel::after, .theme-dark .mock-panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.28) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .theme-dark .card:hover { transform: translateY(-4px); border-color: rgba(52, 211, 153, 0.24); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10), 0 18px 40px rgba(0, 0, 0, 0.4); } .theme-dark .card h3, .theme-dark .pillar h3, .theme-dark .industry-card h3, .theme-dark .device-card h4, .theme-dark .stat-card h4, .theme-dark .testimonial-card cite, .theme-dark .form-shell h3 { color: var(--text); } .theme-dark .chip { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; border: 1px solid rgba(52, 211, 153, 0.22); } .theme-dark .chip--accent { background: rgba(56, 189, 248, 0.16); color: #7DD3FC; border-color: rgba(56, 189, 248, 0.22); } .theme-dark .pillar__icon { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } .theme-dark .pillar__icon--accent { background: rgba(56, 189, 248, 0.16); color: #7DD3FC; } /* ============================================ Section backgrounds ============================================ */ .theme-dark .page-shell { background: transparent; color: var(--text); } .theme-dark .section { background: transparent; color: var(--text); } .theme-dark .section--soft { background: radial-gradient(circle at 20% 15%, rgba(94, 234, 212, 0.10), transparent 45%), radial-gradient(circle at 80% 85%, rgba(125, 211, 252, 0.08), transparent 45%), #182846; } /* section--dark = deep jewel-teal — brand mint/sky glow at max saturation */ .theme-dark .section--dark { background: radial-gradient(circle at 18% 20%, rgba(94, 234, 212, 0.22), transparent 44%), radial-gradient(circle at 82% 80%, rgba(125, 211, 252, 0.18), transparent 44%), radial-gradient(circle at 50% 100%, rgba(45, 212, 191, 0.10), transparent 60%), linear-gradient(160deg, #143038 0%, #0E2128 55%, #0A1A20 100%); } .theme-dark .section--dark::before { opacity: 0; } .theme-dark .trust-strip { background: transparent; border-color: rgba(255, 255, 255, 0.06); } .theme-dark .logo-row__item { color: rgba(230, 233, 239, 0.45); } .theme-dark .logo-row__item:hover { color: var(--text); } .theme-dark .integration-grid__item { background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); border-color: rgba(255, 255, 255, 0.08); color: rgba(230, 233, 239, 0.70); } .theme-dark .integration-grid__item:hover { color: var(--primary); border-color: rgba(52, 211, 153, 0.30); } /* ============================================ Hero — dark scrim ============================================ */ .theme-dark .hero-fullbleed { color: var(--text); } /* Hero scrim fades from cool indigo top to deep teal bottom */ .theme-dark .hero-overlay { background: linear-gradient( 180deg, rgba(18, 30, 58, 0.22) 0%, rgba(18, 30, 58, 0.08) 28%, rgba(20, 48, 56, 0.55) 72%, rgba(14, 33, 40, 0.90) 100% ), radial-gradient(circle at 14% 100%, rgba(94, 234, 212, 0.30), transparent 48%), radial-gradient(circle at 90% 10%, rgba(125, 211, 252, 0.22), transparent 42%); } .theme-dark .hero-eyebrow { color: #6EE7B7; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.8); } .theme-dark .hero-subtitle { color: rgba(230, 233, 239, 0.72); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); } .theme-dark .hero-trust-inline { color: rgba(230, 233, 239, 0.55); } .theme-dark .hero-trust-inline span::before { background: var(--primary); } .theme-dark .hero-scroll { color: rgba(230, 233, 239, 0.45); } .theme-dark .hero-scroll__line { background: rgba(255, 255, 255, 0.10); } .theme-dark .hero-scroll__line::before { background: linear-gradient(180deg, transparent, #6EE7B7); } /* ============================================ FAQ — dark accordion ============================================ */ .theme-dark details { border-bottom-color: rgba(255, 255, 255, 0.08); } .theme-dark details[open] { border-bottom-color: rgba(52, 211, 153, 0.35); } .theme-dark summary { color: var(--text); } .theme-dark summary:hover { color: var(--primary); } .theme-dark summary::after { background: rgba(255, 255, 255, 0.05); color: var(--primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); } .theme-dark details[open] summary::after { background: var(--primary); color: #000; } .theme-dark details > :not(summary) { color: var(--text-secondary); } /* ============================================ Forms ============================================ */ .theme-dark input[type="text"], .theme-dark input[type="email"], .theme-dark input[type="tel"], .theme-dark input[type="url"], .theme-dark textarea, .theme-dark select { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text); } .theme-dark input:focus, .theme-dark textarea:focus, .theme-dark select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14); } /* ============================================ Final CTA band — glassy dark ============================================ */ /* CTA band = deep teal canvas with mint+sky at peak saturation */ .theme-dark .cta-band { background: radial-gradient(circle at 20% 15%, rgba(125, 211, 252, 0.42), transparent 38%), radial-gradient(circle at 85% 85%, rgba(94, 234, 212, 0.42), transparent 38%), radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.14), transparent 55%), linear-gradient(135deg, #1C4351 0%, #0E2128 55%, #0A1A20 100%); } .theme-dark .cta-band::after { background: radial-gradient(circle at 50% 0%, rgba(94, 234, 212, 0.28), transparent 60%); } /* ============================================ Footer — deep teal fade ============================================ */ .theme-dark .site-footer { background: linear-gradient(180deg, #143038 0%, #0E2128 55%, #0A1A20 100%); } .theme-dark .site-footer::before { background: radial-gradient(circle at 20% 0%, rgba(94, 234, 212, 0.24), transparent 40%), radial-gradient(circle at 85% 100%, rgba(125, 211, 252, 0.18), transparent 40%), radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.10), transparent 55%); } .theme-dark .site-footer__col h4 { color: var(--text); } .theme-dark .site-footer__col a { color: rgba(230, 233, 239, 0.60); } .theme-dark .site-footer__col a:hover { color: var(--primary); } .theme-dark .site-footer__bottom { border-top-color: rgba(255, 255, 255, 0.06); color: rgba(230, 233, 239, 0.45); } /* Scrollbar on dark */ .theme-dark::-webkit-scrollbar-track, .theme-dark body::-webkit-scrollbar-track { background: #000; } .theme-dark ::-webkit-scrollbar-thumb { background: var(--gradient-brand); border: 2px solid #000; } /* ============================================ Hero clearance below the floating glass nav The pill nav is 16px margin + ~56px pill = ~88px total. Push hero content further from the top so Instrument Serif's tall cap height doesn't kiss the nav bottom edge. ============================================ */ .theme-dark .hero-fullbleed { /* Flex column so the content can still align bottom but has a defined top */ flex-direction: column; align-items: stretch; justify-content: flex-end; } .theme-dark .hero-content { padding-top: clamp(120px, 11vw, 160px); padding-bottom: clamp(56px, 8vw, 112px); gap: 18px; } @media (max-width: 767px) { .theme-dark .hero-content { padding-top: 120px; padding-bottom: max(32px, env(safe-area-inset-bottom)); } /* Slim the pill on mobile so it doesn't gobble horizontal space */ .theme-dark .site-nav__bar { margin: 10px 16px; min-height: 52px; padding: 6px 14px; } } /* ============================================ Solutions-page sub-nav (POS · Inventory · …) on the dark theme ============================================ */ .theme-dark .page-subnav { top: 88px; /* clear the floating pill nav */ background: rgba(14, 33, 40, 0.72); /* deep teal with glass */ backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); } .theme-dark .page-subnav__link { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.10); color: rgba(248, 250, 252, 0.80); backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); } .theme-dark .page-subnav__link:hover, .theme-dark .page-subnav__link:focus-visible { color: var(--primary); border-color: rgba(94, 234, 212, 0.36); background: rgba(94, 234, 212, 0.10); } /* ============================================ Floating glass nav: collapse margin on scroll so the bar sits flush at the top instead of looking like it's hovering with a gap above it. ============================================ */ .theme-dark .site-nav { transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .theme-dark .site-nav.is-scrolled .site-nav__bar { margin: 0 auto; max-width: 100%; border-radius: 0; padding: 10px clamp(20px, 4vw, 48px); background: rgba(14, 33, 40, 0.82); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease; } .theme-dark .site-nav.is-scrolled .site-nav__bar::before { /* Hide the pill ring border-gradient on the expanded state */ opacity: 0; transition: opacity 0.3s ease; } .theme-dark .site-nav__bar { transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease; } .theme-dark .site-nav__bar::before { transition: opacity 0.3s ease; } /* When sub-nav is present on solutions.html, it sits directly under the full-width expanded nav and both glass layers read cleanly together. */ /* ============================================ POS-DEMO page — dark-theme card overrides All the cards in the endless-aisle flow had hardcoded white/near-white backgrounds that read as solid white on dark theme. Swap them to dark glass with light text. ============================================ */ .theme-dark .pos-demo-page .feature-card, .theme-dark .pos-demo-page .compare-card, .theme-dark .pos-demo-page .system-card, .theme-dark .pos-demo-page .flow-step, .theme-dark .pos-demo-page .animated-node, .theme-dark .pos-demo-page .scenario-btn, .theme-dark .pos-demo-page .sms-bubble, .theme-dark .pos-demo-page .code-card, .theme-dark .pos-demo-page .timeline { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08); } /* ::after border-gradients on feature/compare/system/flow become invisible on dark bg — hide them */ .theme-dark .pos-demo-page .feature-card::after, .theme-dark .pos-demo-page .compare-card::after, .theme-dark .pos-demo-page .system-card::after, .theme-dark .pos-demo-page .flow-step::after { opacity: 0; } /* Tinted callout variants — keep the hue but shift to glass-on-dark */ .theme-dark .pos-demo-page .inventory-alert { background: rgba(248, 113, 113, 0.10); border: 1px solid rgba(248, 113, 113, 0.28); color: var(--text); } .theme-dark .pos-demo-page .quote-panel { background: linear-gradient(135deg, rgba(125, 211, 252, 0.16), rgba(94, 234, 212, 0.12)); border: 1px solid rgba(125, 211, 252, 0.24); color: var(--text); } .theme-dark .pos-demo-page .merchant-callout { background: rgba(125, 211, 252, 0.14); border: 1px solid rgba(125, 211, 252, 0.28); color: var(--text); } .theme-dark .pos-demo-page .event-card { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); } /* Text inside the flow cards */ .theme-dark .pos-demo-page .feature-card, .theme-dark .pos-demo-page .compare-card, .theme-dark .pos-demo-page .system-card, .theme-dark .pos-demo-page .flow-step, .theme-dark .pos-demo-page .animated-node, .theme-dark .pos-demo-page .scenario-btn, .theme-dark .pos-demo-page .event-card { color: var(--text); } .theme-dark .pos-demo-page .feature-card p, .theme-dark .pos-demo-page .compare-card p, .theme-dark .pos-demo-page .system-card p, .theme-dark .pos-demo-page .flow-step p, .theme-dark .pos-demo-page .animated-node p, .theme-dark .pos-demo-page .animated-node .node-copy, .theme-dark .pos-demo-page .scenario-btn p, .theme-dark .pos-demo-page .event-card p, .theme-dark .pos-demo-page .timeline-item p, .theme-dark .pos-demo-page .sms-bubble { color: var(--text-secondary); } /* Node meta, code meta */ .theme-dark .pos-demo-page .node-meta, .theme-dark .pos-demo-page .timeline-item time, .theme-dark .pos-demo-page .code-head small { color: var(--text-muted); } /* Small label pills inside flow cards (INVENTORY + FULFILMENT tag, etc.) */ .theme-dark .pos-demo-page .animated-node-tag { background: rgba(94, 234, 212, 0.14); color: #6EE7B7; border: 1px solid rgba(94, 234, 212, 0.22); } /* Store-row borders on dark */ .theme-dark .pos-demo-page .store-row { border-bottom-color: rgba(255, 255, 255, 0.08); } /* Timeline spine + dots */ .theme-dark .pos-demo-page .timeline::before { background: rgba(255, 255, 255, 0.08); } .theme-dark .pos-demo-page .timeline-item::before { background: var(--primary); box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.18); } /* Phone shell outline on dark */ .theme-dark .pos-demo-page .phone-shell { background: linear-gradient(180deg, #0E2128 0%, #143038 100%); border: 1px solid rgba(255, 255, 255, 0.08); } .theme-dark .pos-demo-page .phone-topbar { background: rgba(255, 255, 255, 0.04); color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Code card syntax colors on dark */ .theme-dark .pos-demo-page .code-content { color: rgba(248, 250, 252, 0.78); } .theme-dark .pos-demo-page .code-content .key { color: #BAE6FD; /* bright sky — property keys */ } .theme-dark .pos-demo-page .code-content .str { color: #A7F3D0; /* mint — strings */ } .theme-dark .pos-demo-page .code-content .tag { color: #F0ABFC; /* pink — HTTP verbs / tags */ background: rgba(240, 171, 252, 0.12); } .theme-dark .pos-demo-page .code-content .cm { color: rgba(248, 250, 252, 0.42); /* muted comments */ font-style: italic; } .theme-dark .pos-demo-page .code-head { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); } /* Flow step number circles */ .theme-dark .pos-demo-page .flow-step-number { background: rgba(94, 234, 212, 0.18); color: #6EE7B7; border: 1px solid rgba(94, 234, 212, 0.28); } /* Status chips */ .theme-dark .pos-demo-page .status-chip { background: rgba(255, 255, 255, 0.05); color: rgba(248, 250, 252, 0.78); border: 1px solid rgba(255, 255, 255, 0.10); } /* ============================================ POS-DEMO round 2 — animation frame shell + step pills ============================================ */ .theme-dark .pos-demo-page .animation-frame { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); } .theme-dark .pos-demo-page .control-strip { background: rgba(14, 33, 40, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .theme-dark .pos-demo-page .flow-step-pill { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); } .theme-dark .pos-demo-page .flow-step-pill:hover, .theme-dark .pos-demo-page .flow-step-pill:focus-visible { background: rgba(94, 234, 212, 0.08); border-color: rgba(94, 234, 212, 0.28); } .theme-dark .pos-demo-page .flow-step-pill.active { background: rgba(94, 234, 212, 0.14); border-color: rgba(94, 234, 212, 0.42); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .theme-dark .pos-demo-page .flow-step-pill.complete { background: rgba(125, 211, 252, 0.10); border-color: rgba(125, 211, 252, 0.32); color: rgba(248, 250, 252, 0.82); } .theme-dark .pos-demo-page .flow-step-count { background: rgba(94, 234, 212, 0.18); color: #6EE7B7; border: 1px solid rgba(94, 234, 212, 0.32); } .theme-dark .pos-demo-page .flow-step-pill.complete .flow-step-count { background: rgba(125, 211, 252, 0.16); color: #BAE6FD; border-color: rgba(125, 211, 252, 0.32); } .theme-dark .pos-demo-page .node-kpi { color: var(--text); } .theme-dark .pos-demo-page .node-copy { color: var(--text-secondary); } .theme-dark .pos-demo-page .node-meta { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(248, 250, 252, 0.62); } /* Playback buttons on dark */ .theme-dark .pos-demo-page .playback-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); } .theme-dark .pos-demo-page .playback-btn:hover, .theme-dark .pos-demo-page .playback-btn:focus-visible { background: rgba(94, 234, 212, 0.10); border-color: rgba(94, 234, 212, 0.36); color: var(--text); } .theme-dark .pos-demo-page .playback-btn.primary { background: var(--gradient-brand); color: #0B1424; border: 0; } .theme-dark .pos-demo-page .playback-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(94, 234, 212, 0.28); } /* Scenario pills */ .theme-dark .pos-demo-page .scenario-pill { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text-secondary); } .theme-dark .pos-demo-page .scenario-pill.active { background: rgba(94, 234, 212, 0.14); border-color: rgba(94, 234, 212, 0.36); color: var(--text); } /* Progress bar in the flow journey */ .theme-dark .pos-demo-page .flow-progress-track { background: rgba(255, 255, 255, 0.06); } .theme-dark .pos-demo-page .flow-progress-fill { background: var(--gradient-brand); } .theme-dark .pos-demo-page .flow-signal { background: rgba(94, 234, 212, 0.22); color: #A7F3D0; border: 1px solid rgba(94, 234, 212, 0.38); } /* Section-wash utility (used on various pos-demo sections) */ .theme-dark .pos-demo-page .section-wash { background: transparent; } /* ============================================ POS-DEMO — override the --demo-panel + --demo-border tokens so every card using them (including the root .terminal-shell that wraps the entire Brisbane City / endless aisle flow) picks up dark glass instead of the baked-in white gradient. ============================================ */ .theme-dark .pos-demo-page { --demo-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); --demo-border: rgba(255, 255, 255, 0.08); --demo-border-strong: rgba(94, 234, 212, 0.28); } /* The terminal + phone shells are the big fish — give them a fuller dark glass treatment with proper inset highlight */ .theme-dark .pos-demo-page .terminal-shell, .theme-dark .pos-demo-page .phone-shell { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.4); color: var(--text); } /* The terminal-topbar stays slightly darker to read as a "chrome" strip */ .theme-dark .pos-demo-page .terminal-topbar { background: rgba(14, 33, 40, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--text); } /* Make sure text INSIDE the terminal shell uses light colors */ .theme-dark .pos-demo-page .terminal-shell p, .theme-dark .pos-demo-page .terminal-shell div, .theme-dark .pos-demo-page .terminal-shell h1, .theme-dark .pos-demo-page .terminal-shell h2, .theme-dark .pos-demo-page .terminal-shell h3, .theme-dark .pos-demo-page .terminal-shell h4 { color: inherit; } .theme-dark .pos-demo-page .terminal-shell { color: var(--text); } /* ============================================ POS-DEMO — neutralise Tailwind utility bg colors that force sections to white, and extend feature-card text rules to

============================================ */ .theme-dark .pos-demo-page .bg-white { background: transparent !important; color: var(--text); } .theme-dark .pos-demo-page section.bg-white { background: transparent !important; } /* feature-card / compare-card list items */ .theme-dark .pos-demo-page .feature-card ul, .theme-dark .pos-demo-page .feature-card li, .theme-dark .pos-demo-page .compare-card ul, .theme-dark .pos-demo-page .compare-card li, .theme-dark .pos-demo-page .system-card li, .theme-dark .pos-demo-page .flow-step li { color: var(--text-secondary); } /* Ensure the pill chips on feature cards have readable hues on dark */ .theme-dark .pos-demo-page .feature-card .pill, .theme-dark .pos-demo-page .compare-card .pill { background: rgba(94, 234, 212, 0.14) !important; color: #6EE7B7 !important; border: 1px solid rgba(94, 234, 212, 0.22); } /* ============================================ POS-DEMO — phone body + danger chip (replaces inline bg/colour hardcodes we scrubbed from HTML) ============================================ */ .pos-demo-page .phone-shell__body { background: rgba(248, 250, 251, 0.92); /* light-theme default */ } .theme-dark .pos-demo-page .phone-shell__body { background: rgba(14, 33, 40, 0.55); color: var(--text); } .pos-demo-page .status-chip--danger { background: rgba(196, 68, 42, 0.12); color: var(--danger); border: 1px solid rgba(196, 68, 42, 0.32); } .theme-dark .pos-demo-page .status-chip--danger { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; border: 1px solid rgba(248, 113, 113, 0.40); } /* sms-bubble on dark — explicit recipe so the text reads on dark bg */ .theme-dark .pos-demo-page .sms-bubble { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text); } /* ============================================ AUX PAGES — dark overrides for per-page card classes that each page's inline