/* ============================================ 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: #1B2D4C; /* indigo body */ --bg-alt: #243A5D; /* indigo soft */ --bg-surface: rgba(255, 255, 255, 0.04); --bg-dark: #1B2D4C; --bg-dark-2: #284267; /* 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 94% 64% at 50% 0%, rgba(94, 234, 212, 0.09), transparent 58%), radial-gradient(ellipse 86% 56% at 50% 100%, rgba(125, 211, 252, 0.07), transparent 54%), linear-gradient(180deg, #243B62 0%, var(--bg) 34%, #182742 100%); background-attachment: fixed; color: var(--text); } .theme-dark body { font-family: var(--font-body); } /* ============================================ Typography — Nunito brand across display + body, Fraunces italic reserved for .headline-emph flourish ============================================ */ .theme-dark h1, .theme-dark h2 { font-family: var(--font-body); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; } .theme-dark h3, .theme-dark h4 { font-family: var(--font-body); font-weight: 700; 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: var(--font-body); font-weight: 800; font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.02em; } .theme-dark .headline-emph { font-family: var(--font-emph); font-style: italic; font-weight: 500; 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); } /* Dropdown — dark panel to match theme */ .theme-dark .site-nav__dropdown { background: rgba(15, 23, 42, 0.96); border-color: rgba(248, 250, 252, 0.10); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45); } .theme-dark .site-nav__dropdown-link { color: var(--text); } .theme-dark .site-nav__dropdown-link:hover, .theme-dark .site-nav__dropdown-link:focus-visible { background: rgba(16, 185, 129, 0.14); color: #6EE7B7; } .theme-dark .site-nav__drawer-sublink { color: rgba(248, 250, 252, 0.78); } .theme-dark .site-nav__drawer-sublink:hover { background: rgba(16, 185, 129, 0.14); color: #6EE7B7; } .theme-dark .site-nav__drawer-sublist { border-left-color: rgba(248, 250, 252, 0.14); } /* ============================================ 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.13), transparent 46%), radial-gradient(circle at 80% 85%, rgba(125, 211, 252, 0.10), transparent 46%), #243A5D; } /* 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 46%), radial-gradient(circle at 82% 80%, rgba(125, 211, 252, 0.18), transparent 46%), radial-gradient(circle at 50% 100%, rgba(45, 212, 191, 0.12), transparent 62%), linear-gradient(160deg, #214B55 0%, #173842 58%, #112933 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 — light at the top, heavier at the bottom for copy legibility */ .theme-dark .hero-overlay { background: linear-gradient( 180deg, rgba(27, 45, 76, 0.04) 0%, rgba(27, 45, 76, 0.02) 28%, rgba(23, 56, 66, 0.24) 72%, rgba(17, 41, 51, 0.54) 100% ), radial-gradient(circle at 14% 100%, rgba(94, 234, 212, 0.12), transparent 50%), radial-gradient(circle at 90% 10%, rgba(125, 211, 252, 0.09), transparent 44%); } .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 sits in normal flow but the hero is pulled upward, so the headline needs enough vertical room to clear the glass bar at desktop widths. ============================================ */ .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(36px, 5.5vw, 72px); gap: 18px; } .theme-dark .hero-title { max-width: min(100%, 18ch); } @media (max-width: 767px) { .theme-dark .hero-content { padding-top: 120px; padding-bottom: max(32px, env(safe-area-inset-bottom)); } .theme-dark .hero-title { max-width: 100%; } .theme-dark .hero-title .headline-emph { display: block; } .theme-dark .hero-overlay { background: linear-gradient( 180deg, rgba(27, 45, 76, 0.08) 0%, rgba(27, 45, 76, 0.05) 20%, rgba(23, 56, 66, 0.26) 75%, rgba(17, 41, 51, 0.58) 100% ); } /* 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