/* ============================================================================ FlashGo — Módulo de Cliente · capa de rediseño visual ---------------------------------------------------------------------------- Se carga DESPUÉS de style.css. Todo va scopeado a una raíz de cliente (.role-cliente en para la app autenticada; #loginScreen / #otpScreen para la entrada) para no alterar el layout de vendedor, repartidor ni admin. Dirección de diseño: FlashGo = "flash" (rapidez) + "go" (movimiento), para municipios pequeños de Colombia. Cálido y local, no corporativo. · Tipografía: Baloo 2 (display, redondeada y cálida) + Nunito (cuerpo). Se cambia en un solo sitio: --font-display en style.css (+ el de Google Fonts en index.html). · Signature "la chispa": el rayo de la marca convertido en un trazo/streak diagonal que subraya la pestaña activa y cruza bajo el titular del hero. · Sistema de naranja de dos niveles: relleno de botón = naranja profundo + texto blanco (contraste AA); superficies de etiqueta = naranja vivo + tinta oscura (más legible y con aire de letrero pintado a mano). ============================================================================ */ .role-cliente, #loginScreen, #otpScreen{ --r:20px;--r2:14px; } /* ------------------------------------------------------------------ motion -- */ @keyframes fgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes fgHeroIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} @keyframes fgStreak{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes fgSparkIn{from{opacity:0;transform:rotate(-18deg) scale(.6)}to{opacity:.14;transform:rotate(-8deg) scale(1)}} @keyframes fgPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}} @keyframes heroMotoMove{from{transform:translateX(-50px);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateX(120px);opacity:0}} /* ================================================================= LOGIN === */ #loginScreen{ background:var(--bg); } #loginScreen::before{ width:520px;height:520px;top:-220px;right:-160px; background:radial-gradient(circle,rgba(255,59,31,.16) 0%,transparent 68%); } #loginScreen::after{ width:360px;height:360px;bottom:-140px;left:-120px; background:radial-gradient(circle,rgba(255,59,31,.10) 0%,transparent 70%); } #loginScreen .login-card, #otpScreen .login-card{ border-radius:26px; box-shadow:0 24px 60px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06); border:1px solid var(--line); } #loginScreen .brand-mark, #otpScreen .brand-mark{gap:14px;margin-bottom:1.6rem} #loginScreen .brand-icon, #otpScreen .brand-icon{ width:56px;height:56px;border-radius:16px; background:linear-gradient(150deg,var(--p) 0%,var(--p2) 100%); transform:rotate(-4deg); } #loginScreen .brand-name, #otpScreen .brand-name{font-size:2rem;letter-spacing:-.02em} #loginScreen .login-headline h2, #otpScreen .login-headline h2{ font-family:var(--font-display);font-size:1.4rem;font-weight:800;letter-spacing:-.02em; } #loginScreen .ltab.active, #otpScreen .ltab.active{color:var(--p)} #loginScreen .inp:focus, #otpScreen .inp:focus{box-shadow:0 0 0 3px rgba(255,59,31,.14)} #loginScreen .client-only-note{ background:var(--p-bg);color:#9A2A15;border:1px solid var(--p-border);font-weight:600; } /* ============================================================ APP CLIENTE === */ /* ---- topnav + tabbar ---- */ .role-cliente #clientScreen .topnav{border-bottom:1px solid var(--line)} .role-cliente #clientScreen .nav-brand .nicon{ border-radius:10px;background:linear-gradient(150deg,var(--p),var(--p2));transform:rotate(-4deg); } .role-cliente #clientScreen .nav-brand .ntxt{letter-spacing:-.02em} .role-cliente #clientScreen .tabbar{border-bottom:1px solid var(--line)} .role-cliente #clientScreen .tabbar .tb{border-bottom:none;position:relative;padding-bottom:13px} .role-cliente #clientScreen .tabbar .tb.active::after{ content:"";position:absolute;left:50%;bottom:6px;width:24px;height:3px; background:var(--p);border-radius:3px;transform:translateX(-50%) skewX(-22deg); } /* ---- hero ---- */ .role-cliente #clientScreen .hero{ border-radius:24px;padding:1.75rem 1.5rem 1.4rem; background:linear-gradient(140deg,var(--p2) 0%,var(--p) 78%); box-shadow:0 14px 34px rgba(255,59,31,.28); isolation:isolate; } .role-cliente #clientScreen .hero::after{ right:-40px;top:-50px;width:230px;height:230px;background:rgba(255,255,255,.14); } .role-cliente #clientScreen .hero-spark{ position:absolute;right:-8px;bottom:-24px;width:150px;height:150px; color:#fff;opacity:.14;transform:rotate(-8deg);pointer-events:none;z-index:-1; } .role-cliente #clientScreen .hero-spark svg{width:100%;height:100%;fill:currentColor} .role-cliente #clientScreen .hero h2{ font-family:var(--font-display);font-weight:800; font-size:clamp(1.9rem,7.4vw,2.55rem);line-height:1.06;letter-spacing:-.02em; margin-bottom:.5rem;color:#fff; } .role-cliente #clientScreen .hero-word{ display:inline-block;position:relative; padding:.02em .2em;color:var(--ink);z-index:0; } .role-cliente #clientScreen .hero-word::after{ content:"";position:absolute;left:0;right:0;top:.16em;bottom:.14em;z-index:-1; background:#FFE8E1;border-radius:6px;transform-origin:left; box-shadow:0 4px 12px rgba(140,25,10,.28); } .role-cliente #clientScreen .hero p{ font-size:.9rem;opacity:.92;font-weight:600;margin-bottom:1.1rem;color:#fff; } .role-cliente #clientScreen .hero .search-wrap{ background:#fff;border:none;border-radius:16px;padding:6px 6px 6px 16px; box-shadow:0 8px 22px rgba(0,0,0,.16); } .role-cliente #clientScreen .hero .search-wrap svg{stroke:var(--ink4)} .role-cliente #clientScreen .hero .search-wrap input{color:var(--ink);font-weight:600;min-width:0} .role-cliente #clientScreen .hero .search-wrap input::placeholder{color:var(--ink4)} .role-cliente #clientScreen .hero .search-wrap button{ background:var(--p);border-radius:12px;padding:10px 18px;font-weight:800; } .role-cliente #clientScreen .hero .search-wrap button:hover{background:var(--p2)} /* ---- category pills ---- */ .role-cliente #clientScreen .pills{gap:8px;margin-bottom:1.5rem} .role-cliente #clientScreen .pill{ border:1.5px solid var(--line);border-radius:12px;font-weight:800;box-shadow:none; padding:9px 15px;color:var(--ink2); } .role-cliente #clientScreen .pill:hover{border-color:var(--p);color:var(--p);background:var(--p-bg)} .role-cliente #clientScreen .pill.active{ background:var(--p);border-color:var(--p);color:#fff;box-shadow:0 4px 12px rgba(255,59,31,.28); } /* ---- section header ---- */ .role-cliente #clientScreen .stitle{letter-spacing:-.02em;font-size:1.15rem} .role-cliente #clientScreen .scount{font-weight:700} /* ---- store cards ---- */ .role-cliente #clientScreen .store-grid{gap:16px} .role-cliente #clientScreen .scard{ border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh); transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease; } .role-cliente #clientScreen .scard:hover{transform:translateY(-4px);box-shadow:var(--sh3)} .role-cliente #clientScreen .scard-banner{height:132px} .role-cliente #clientScreen .scard-banner img{transition:transform .35s ease} .role-cliente #clientScreen .scard:hover .scard-banner img{transform:scale(1.05)} .role-cliente #clientScreen .open-badge{top:10px;left:10px;right:auto} .role-cliente #clientScreen .open-badge .badge-g{ background:#fff;color:#0a7a4e;box-shadow:0 2px 8px rgba(0,0,0,.14);font-weight:800; } .role-cliente #clientScreen .badge-r{background:var(--line2);color:var(--ink3)} .role-cliente #clientScreen .scard-body{padding:.85rem 1rem 1rem} .role-cliente #clientScreen .scard-name{font-size:1.04rem;font-weight:800;letter-spacing:-.01em} .role-cliente #clientScreen .scard-meta{ gap:7px;margin-bottom:.65rem;font-weight:700;align-items:center; } .role-cliente #clientScreen .scard-eta{ display:inline-flex;align-items:center;gap:3px;color:var(--p);font-weight:800; } .role-cliente #clientScreen .scard-eta svg{flex-shrink:0} .role-cliente #clientScreen .scard-cat{color:var(--ink3);font-weight:700} .role-cliente #clientScreen .scard-sep{color:var(--ink4);font-weight:700} .role-cliente #clientScreen .stag{ background:var(--line2);border:1px solid var(--line);border-radius:7px; color:var(--ink3);font-weight:700; } /* ---- search results (hgroup / hcard) ---- */ .role-cliente #clientScreen .hcard{border-radius:var(--r2);border:1px solid var(--line)} .role-cliente #clientScreen .hcard:hover{transform:translateY(-3px);box-shadow:var(--sh2)} .role-cliente #clientScreen .hcard-price, .role-cliente #clientScreen .pcard-price, .role-cliente #clientScreen .hcard-name{letter-spacing:-.01em} .role-cliente #clientScreen .hcard-btn:hover{background:var(--p2)} /* ---- store detail ---- */ .role-cliente #clientScreen .sd-name{font-size:1.25rem;letter-spacing:-.02em} .role-cliente #clientScreen .sd-metric-val{letter-spacing:-.01em} .role-cliente #clientScreen .sd-search-wrap:focus-within{border-color:var(--p)} .role-cliente #clientScreen .sd-search-btn:hover{background:var(--p2)} .role-cliente #clientScreen .sd-back:hover{transform:scale(1.08)} .role-cliente #clientScreen .sd-sec-title{font-weight:800;letter-spacing:-.01em} /* ---- product cards ---- */ .role-cliente #clientScreen .pcard{border-radius:var(--r2);border:1.5px solid var(--line)} .role-cliente #clientScreen .pcard:hover{border-color:var(--p-border);box-shadow:var(--sh2)} .role-cliente #clientScreen .pcard-name{font-weight:800} .role-cliente #clientScreen .add-btn:hover{background:var(--p2);transform:scale(1.1)} /* ---- option modal ---- */ .role-cliente #opModal .modal{border-radius:22px} .role-cliente #opModal .op-grupo-title{letter-spacing:.02em} .role-cliente #opModal .op-pill{border-radius:12px;font-weight:700} .role-cliente #opModal .op-pill:hover{border-color:var(--p);color:var(--p)} .role-cliente #opModal .op-pill.sel{background:var(--p)} .role-cliente #opModal .op-pill.sel:hover{color:#fff} /* ---- cart / checkout drawer ---- */ .role-cliente #cartDr{border-left:none;box-shadow:-14px 0 44px rgba(0,0,0,.20)} .role-cliente #cartDr .cart-scroll{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0} .role-cliente #cartDr .cart-head h3{font-size:1.15rem;letter-spacing:-.02em} .role-cliente #cartDr .citem{border-radius:14px;border:1.5px solid var(--line)} .role-cliente #cartDr .qbtn{border-radius:9px} .role-cliente #cartDr .qbtn:hover{background:var(--p-bg);border-color:var(--p-border);color:var(--p)} .role-cliente #cartDr .cart-foot{background:var(--line2);border-top:1px solid var(--line)} .role-cliente #cartDr .crow.total{font-size:1.05rem;letter-spacing:-.01em} .role-cliente #cartDr .addr-card.sel, .role-cliente #cartDr .pay-opt.sel{border-color:var(--p);background:var(--p-bg)} .role-cliente #cartDr .pay-opt{border-radius:12px} .role-cliente #cartDr .btn-p.btn-full{ border-radius:14px;padding:14px;font-size:.95rem;box-shadow:0 8px 20px rgba(255,59,31,.30); } /* ---- mis pedidos ---- */ .role-cliente #clientScreen .cosec-title{letter-spacing:.12em} .role-cliente #clientScreen .cocard{border-radius:var(--r);border:1px solid var(--line)} .role-cliente #clientScreen .cocard--active{ box-shadow:0 0 0 1.5px var(--p-border),0 4px 14px rgba(255,59,31,.10); } .role-cliente #clientScreen .cocard-store{font-weight:800;letter-spacing:-.01em} .role-cliente #clientScreen .cocard-total{letter-spacing:-.01em} /* ---- mis direcciones ---- */ .role-cliente #clientScreen .dir-item{border-radius:var(--r2);border:1.5px solid var(--line)} .role-cliente #clientScreen .dir-item.default{ border-color:var(--p);background:linear-gradient(180deg,var(--p-bg) 0%,var(--white) 55%); } .role-cliente #clientScreen .dir-item-icon{border-radius:12px} .role-cliente #clientScreen .dir-item-lbl{font-weight:800} .role-cliente #addressModal .modal{border-radius:22px} .role-cliente #addressModal .addr-loc-hint{background:var(--p-bg);color:#9A2A15} /* ---- modales compartidos (solo en sesión de cliente) ---- */ .role-cliente #orderDetailModal .modal, .role-cliente #perfilModal .modal, .role-cliente #tipModal .modal{border-radius:22px} .role-cliente #orderDetailModal .modal-title, .role-cliente #perfilModal .modal-title{letter-spacing:-.01em} .role-cliente #orderDetailModal .ir-icon{color:var(--p)} /* ---- perfil menu ---- */ .perfil-menu{display:flex;flex-direction:column;gap:0} .perfil-menu-item{ display:flex;align-items:center;gap:14px;padding:14px 0;border:none;background:none; color:var(--ink);font-size:.95rem;font-weight:600;text-align:left;cursor:pointer; border-bottom:1px solid var(--line);transition:all .15s ease; } .perfil-menu-item:hover{background:var(--line2);padding-left:8px;padding-right:-8px} .perfil-menu-item:active{transform:translateY(1px)} .perfil-menu-item svg:first-child{flex-shrink:0;color:var(--ink3)} .perfil-menu-item span{flex:1} .perfil-menu-item svg:last-child{flex-shrink:0;color:var(--ink4)} .perfil-menu-item--danger{color:#D32F2F} .perfil-menu-item--danger svg:first-child{color:#D32F2F} .perfil-menu-item--danger:hover{background:rgba(211,47,47,.08)} .perfil-back{ display:flex;align-items:center;gap:8px;padding:0 0 8px;border:none;background:none; color:var(--p);font-weight:700;font-size:.9rem;cursor:pointer;margin-bottom:.5rem; transition:all .15s ease; } .perfil-back:hover{gap:12px} /* ---- panel de notificaciones ---- */ .role-cliente #notifPanel .notif-panel-hdr{font-weight:800;letter-spacing:-.01em} .role-cliente #notifPanel .notif-item.unread{border-left-color:var(--p);background:var(--p-bg)} /* ---- estados vacíos ---- */ .role-cliente #clientScreen .empty p{font-weight:600} /* ---- botones (feedback de pulsación) ---- */ .role-cliente #clientScreen .btn:active, .role-cliente #cartDr .btn:active, .role-cliente #clientScreen .pill:active{transform:translateY(1px) scale(.985)} /* ============================================================== FOOTER ===== */ .fg-footer{ margin:1.75rem 0 .5rem;padding:1.5rem .35rem .25rem; border-top:1px solid var(--line);text-align:center; } .fg-footer-top{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:1rem} .fg-footer-brand{ display:flex;align-items:center;gap:9px; font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.02em; } .fg-footer-brand > span span{color:var(--p)} .fg-footer-mark{ width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,var(--p),var(--p2));transform:rotate(-4deg); } .fg-footer-mark svg{width:17px;height:17px;fill:#fff} .fg-footer-links{ display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:.9rem; } .fg-footer-links a{ font-size:.82rem;font-weight:700;color:var(--ink2);text-decoration:none; border-bottom:1.5px solid transparent;transition:border-color .15s,color .15s; } .fg-footer-links a:hover{color:var(--p);border-bottom-color:var(--p)} .fg-footer-social{display:flex;justify-content:center;gap:10px;margin-bottom:1rem} .fg-footer-social a{ width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line); display:flex;align-items:center;justify-content:center;color:var(--ink3); transition:all .16s ease; } .fg-footer-social a svg{width:17px;height:17px} .fg-footer-social a:hover{border-color:var(--p);color:var(--p);transform:translateY(-2px)} .fg-footer-legal{font-size:.72rem;color:var(--ink4);font-weight:600} /* ================================================================ MOBILE === */ @media(max-width:600px){ .role-cliente #cartDr{ top:0;bottom:0;height:auto;max-height:100dvh; display:flex;flex-direction:column; } .role-cliente #cartDr .cart-scroll{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; overflow-x:hidden;-webkit-user-select:text;user-select:text; } } /* ============================================================== MOTION ===== */ @media (prefers-reduced-motion: no-preference){ .role-cliente #cp-shop.active .hero{animation:fgHeroIn .5s cubic-bezier(.2,.7,.2,1) both} .role-cliente #cp-shop.active .hero-spark{animation:fgSparkIn .6s .1s cubic-bezier(.2,.7,.2,1) both} .role-cliente #cp-shop.active .hero-word::after{animation:fgStreak .55s .18s cubic-bezier(.2,.7,.2,1) both} .role-cliente #cp-shop.active .hero-moto{animation:fgHeroIn .5s cubic-bezier(.2,.7,.2,1) both} .role-cliente #cp-shop.active .pills{animation:fgRise .4s .06s ease both} .role-cliente #clientScreen .store-grid .scard{animation:fgRise .42s ease both} .role-cliente #clientScreen .store-grid .scard:nth-child(2){animation-delay:.05s} .role-cliente #clientScreen .store-grid .scard:nth-child(3){animation-delay:.1s} .role-cliente #clientScreen .store-grid .scard:nth-child(4){animation-delay:.15s} .role-cliente #clientScreen .store-grid .scard:nth-child(5){animation-delay:.2s} .role-cliente #clientScreen .store-grid .scard:nth-child(6){animation-delay:.24s} .role-cliente #clientScreen .store-grid .scard:nth-child(n+7){animation-delay:.28s} }