/* BookUno Mobile Redesign — design tokens Default purple shade can be overridden by Tweaks (data-shade on ). */ :root, [data-shade="deep"] { --pri: #6B57FF; /* brand purple */ --pri-600: #5A47EE; --pri-700: #4A38D8; --pri-800: #3324AE; --pri-50: #F1EEFF; --pri-100: #E4DFFF; --pri-200: #CFC6FF; --pri-tint: #ECE7FF; --pri-glow: rgba(107, 87, 255, 0.32); } [data-shade="violet"] { --pri: #7B5BFF; --pri-600: #6A4BF0; --pri-700: #5638D8; --pri-800: #3A22A8; --pri-50: #F2EEFF; --pri-100: #E6DEFF; --pri-200: #D2C2FF; --pri-tint: #EFE7FF; --pri-glow: rgba(123, 91, 255, 0.32); } [data-shade="indigo"] { --pri: #5550FF; --pri-600: #4A45EE; --pri-700: #3A36D2; --pri-800: #2722A0; --pri-50: #EEEEFF; --pri-100: #DDDDFF; --pri-200: #C2C0FF; --pri-tint: #E6E5FF; --pri-glow: rgba(85, 80, 255, 0.32); } [data-shade="orchid"] { --pri: #9B5DFF; --pri-600: #884DEE; --pri-700: #6E37D2; --pri-800: #4A1F9A; --pri-50: #F5EEFF; --pri-100: #ECDFFF; --pri-200: #DCC4FF; --pri-tint: #F0E5FF; --pri-glow: rgba(155, 93, 255, 0.32); } :root { /* Neutrals — warm-tinted */ --ink: #0F0E1A; --ink-2: #25243A; --muted: #5A5870; --muted-2: #8B889E; --line: #ECE9F4; --line-2: #F4F2F9; --bg: #FAF8FF; --bg-2: #F4F0FF; --card: #FFFFFF; --chip: #F2F0F9; /* Accent — used SPARINGLY */ --amber: #FFA94D; --amber-bg: #FFF1E0; --rose: #FF6B9C; --teal: #19B8A6; --green: #16A34A; --green-bg: #E6F6EC; --danger: #E11D48; --danger-bg: #FFE4EA; /* Radii / shadows */ --r-sm: 10px; --r: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --sh-1: 0 1px 2px rgba(15,14,30,0.05); --sh-2: 0 6px 22px rgba(40,30,80,0.07); --sh-3: 0 18px 48px rgba(40,30,80,0.14); --sh-pri: 0 10px 24px var(--pri-glow); --font: "Plus Jakarta Sans", "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif; --font-display: "Plus Jakarta Sans", "Inter", -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; } /* density modifier */ [data-density="cozy"] { --pad-card: 14px; --gap-stack: 12px; --row-h: 56px; } [data-density="comfy"] { --pad-card: 18px; --gap-stack: 16px; --row-h: 62px; } [data-density="airy"] { --pad-card: 22px; --gap-stack: 22px; --row-h: 72px; } * { box-sizing: border-box; } /* The mobile artboard root */ .bu { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; position: relative; line-height: 1.45; } .bu, .bu * { font-family: var(--font); } .bu a { color: inherit; text-decoration: none; } .bu button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } .bu input, .bu textarea, .bu select { font-family: inherit; color: inherit; } .bu h1, .bu h2, .bu h3, .bu h4 { margin: 0; letter-spacing: -0.02em; } .bu p { margin: 0; } /* Reusable utilities scoped to .bu */ .bu .stack { display: flex; flex-direction: column; } .bu .row { display: flex; align-items: center; } .bu .between { justify-content: space-between; } .bu .center { align-items: center; justify-content: center; } .bu .grow { flex: 1; } .bu .muted { color: var(--muted); } .bu .micro { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } /* Buttons */ .bu .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; background: var(--ink); color: #fff; transition: transform 0.15s, box-shadow 0.2s, background 0.2s; } .bu .btn:active { transform: scale(0.97); } .bu .btn.primary { background: var(--pri); color: #fff; box-shadow: var(--sh-pri); } .bu .btn.primary:active { box-shadow: 0 4px 14px var(--pri-glow); } .bu .btn.ghost { background: var(--chip); color: var(--ink); box-shadow: none; } .bu .btn.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .bu .btn.dark { background: var(--ink); color: #fff; } .bu .btn.lg { height: 56px; padding: 0 22px; font-size: 16px; border-radius: 16px; } .bu .btn.sm { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; } .bu .btn.pill { border-radius: 999px; } .bu .btn.block { width: 100%; } .bu .btn svg { width: 18px; height: 18px; } /* Inputs */ .bu .input { height: 52px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); padding: 0 16px; display: flex; align-items: center; gap: 10px; font-size: 15px; } .bu .input input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; font-size: 15px; } .bu .input.lg { height: 60px; border-radius: 18px; } /* Chip */ .bu .chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--chip); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap; } .bu .chip.on { background: var(--ink); color: #fff; } .bu .chip.pri { background: var(--pri); color: #fff; } .bu .chip.tint { background: var(--pri-50); color: var(--pri-700); } /* Card (variable card style via data-cards on .bu) */ .bu .card { background: #fff; border-radius: 20px; box-shadow: var(--sh-2); padding: 16px; } [data-cards="flat"] .card { box-shadow: none; border: 1px solid var(--line); background: #fff; } [data-cards="tinted"] .card { box-shadow: none; background: var(--pri-50); } [data-cards="elevated"] .card { box-shadow: var(--sh-3); border-radius: 24px; } /* Skeleton shimmer */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .bu .skel { background: linear-gradient(90deg, #EAE6F2 0%, #F4F1FB 50%, #EAE6F2 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: 8px; } /* Reveal on scroll */ .bu .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1); transition-delay: var(--rv-d, 0ms); } .bu .rv.in { opacity: 1; transform: none; } /* Press scale */ .bu .press { transition: transform 0.12s; } .bu .press:active { transform: scale(0.97); } /* Gradient placeholder for storefront imagery */ .bu .gph { position: relative; overflow: hidden; background: radial-gradient(120% 100% at 0% 0%, var(--g-1, #C8B8FF) 0%, transparent 60%), radial-gradient(140% 130% at 100% 100%, var(--g-2, #FF9DB6) 0%, transparent 55%), linear-gradient(135deg, var(--g-3, #6B57FF) 0%, var(--g-4, #B58CFF) 100%); color: rgba(255,255,255,0.92); display: flex; align-items: flex-end; } .bu .gph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 110%, rgba(0,0,0,0.22), transparent 60%); pointer-events: none; } .bu .gph > * { position: relative; z-index: 1; } /* Star */ .bu .star { color: var(--amber); } /* Bottom nav reusable */ .bu .botnav { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px 22px; background: rgba(255,255,255,0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(236,233,244,0.7); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 20; } .bu .botnav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted-2); padding: 6px 4px; } .bu .botnav-item.act { color: var(--pri); } .bu .botnav-item.fab { margin-top: -22px; } .bu .botnav-fab-circle { width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(135deg, var(--pri), var(--pri-700)); display: grid; place-items: center; color: #fff; box-shadow: var(--sh-pri); } /* Top app bar */ .bu .appbar { position: sticky; top: 0; z-index: 15; padding: 14px 18px 12px; background: rgba(250,248,255,0.92); backdrop-filter: blur(14px); } /* Floating pill bar */ .bu .pillbar { display: inline-flex; padding: 5px; gap: 4px; background: var(--chip); border-radius: 999px; } .bu .pillbar button { height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--muted); } .bu .pillbar button.on { background: #fff; color: var(--ink); box-shadow: var(--sh-1); } /* Section header */ .bu .sec-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 18px; margin-bottom: 12px; } .bu .sec-h h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; } .bu .sec-h a { color: var(--pri); font-weight: 700; font-size: 13px; } /* Horizontal carousel */ .bu .hcar { display: flex; gap: 12px; overflow-x: auto; overflow-y: visible; padding: 4px 18px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; } .bu .hcar::-webkit-scrollbar { display: none; } .bu .hcar > * { scroll-snap-align: start; flex: 0 0 auto; } /* Hero gradient */ .bu .hero-bg { background: radial-gradient(80% 60% at 110% -10%, rgba(255, 157, 182, 0.28) 0%, transparent 60%), radial-gradient(70% 50% at -10% 0%, rgba(123, 91, 255, 0.40) 0%, transparent 55%), linear-gradient(180deg, #1A0E4A 0%, #2B1373 60%, #3D1FA5 100%); } /* Decorative glow blob */ .bu .blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.7; pointer-events: none; } /* Generic badge */ .bu .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; background: var(--chip); color: var(--muted); } .bu .badge.ok { background: var(--green-bg); color: var(--green); } .bu .badge.pri { background: var(--pri-50); color: var(--pri-700); } .bu .badge.amber { background: var(--amber-bg); color: #B45309; } .bu .badge.dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 2px; } /* Step dots */ .bu .stepdots { display: flex; gap: 6px; align-items: center; } .bu .stepdots .d { height: 4px; border-radius: 4px; background: var(--line); transition: all 0.3s; width: 14px; } .bu .stepdots .d.on { background: var(--pri); width: 28px; } /* Marquee for trust logos */ @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .bu .mq-track { display: flex; gap: 28px; animation: mq 22s linear infinite; width: max-content; } /* Pulse */ @keyframes pulse { 0% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } 100% { opacity: 0.4; transform: scale(1); } } .bu .pulse { animation: pulse 2.4s ease-in-out infinite; } /* Page-canvas background of the surrounding design canvas — unaffected; we only style what's INSIDE .bu */ /* ── Keyboard focus (a11y) ────────────────────────────────── Visible focus ring for keyboard users only; mouse clicks stay clean. */ .web :is(a, button, input, select, textarea, [tabindex]):focus-visible, .bu :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pri, #6B57FF); outline-offset: 2px; border-radius: 6px; } /* ── Reduced motion (a11y) ────────────────────────────────── Collapse decorative animation/transitions to instants for users who ask for less motion. Content revealed by .rv still appears — the transition just snaps instead of animating. */ @media (prefers-reduced-motion: reduce) { .web *, .web *::before, .web *::after, .bu *, .bu *::before, .bu *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .web, .bu { scroll-behavior: auto !important; } }