/* --- Sumo-like theme --- */ #sqro-app{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;color:#eaeaea} #sqro-app .sqro-ui{background:#0b0b0b;min-height:70vh} /* Top bar */ #sqro-app .sqro-topbar{position:sticky;top:0;z-index:9;background:#0b0b0b;padding:8px 10px;border-bottom:1px solid #1c1c1c;display:flex;align-items:center;gap:10px} #sqro-app .sqro-tabs{display:flex;gap:10px;overflow:auto;padding:4px 2px} #sqro-app .sqro-tab{border:1px solid #2b2b2b;background:#141414;color:#ddd;padding:10px 14px;border-radius:999px;font-weight:600;white-space:nowrap;opacity:.9} #sqro-app .sqro-tab.active{background:#f39c12;color:#111;border-color:#f39c12;opacity:1} #sqro-app .sqro-timer{margin-left:auto;border:1px solid #2b2b2b;background:#141414;border-radius:999px;padding:6px 10px;font-weight:700;display:flex;gap:6px;align-items:center} #sqro-app .sqro-timer:before{content:"\23F3";} /* hourglass not emoji to keep neutral font */ /* Grid & cards */ #sqro-app .sqro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:12px} @media(min-width:900px){#sqro-app .sqro-grid{grid-template-columns:repeat(3,minmax(0,1fr));}} @media(min-width:1200px){#sqro-app .sqro-grid{grid-template-columns:repeat(4,minmax(0,1fr));}} #sqro-app .sqro-card{background:#121212;border:1px solid #1f1f1f;border-radius:18px;overflow:hidden;display:flex;flex-direction:column} #sqro-app .sqro-photo{aspect-ratio:16/10;background:#161616;overflow:hidden} #sqro-app .sqro-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96)} #sqro-app .sqro-title{display:flex;justify-content:space-between;gap:8px;font-weight:700;padding:10px 12px 0 12px} #sqro-app .sqro-price{display:none} /* all-you-can-eat look */ #sqro-app .sqro-desc{display:none} /* compact like Sumo */ #sqro-app .sqro-flags{display:flex;gap:6px;flex-wrap:wrap;padding:4px 12px 0 12px} #sqro-app .sqro-chip{font-size:12px;background:#1a1a1a;border:1px solid #262626;border-radius:999px;padding:3px 8px;opacity:.9} #sqro-app .sqro-actions{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 12px 12px} #sqro-app .sqro-station{opacity:.9;display:flex;align-items:center;gap:6px} #sqro-app .sqro-qty{display:flex;align-items:center;gap:10px} #sqro-app .sqro-btn{width:30px;height:30px;border-radius:999px;background:#171717;color:#eee;border:1px solid #2a2a2a;font-weight:800;display:flex;align-items:center;justify-content:center} #sqro-app .sqro-btn:active{transform:scale(.98)} #sqro-app .sqro-q{min-width:18px;text-align:center;font-weight:700;opacity:.85} /* Count bubble on image */ #sqro-app .sqro-countbubble{position:absolute;right:10px;top:10px;background:#f39c12;color:#111;font-weight:900;border-radius:999px;padding:4px 8px;border:1px solid #c07d0b;box-shadow:0 2px 6px rgba(0,0,0,.35)} #sqro-app .sqro-photo-wrap{position:relative} /* Bottom bar */ #sqro-app .sqro-bottombar{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;background:#0b0b0b;border-top:1px solid #1c1c1c;padding:10px 12px} #sqro-app .sqro-warn{color:#f39c12;font-weight:700} #sqro-app #sqro-place{background:#f39c12;color:#111;border:0;padding:12px 18px;font-weight:800;border-radius:12px} #sqro-app #sqro-place:disabled{background:#2a2a2a;color:#777} /* Login */ #sqro-app .sqro-login{max-width:420px;margin:40px auto;padding:16px;background:#111;border:1px solid #333;border-radius:16px} #sqro-app input{width:100%;padding:11px 12px;margin:8px 0;background:#1a1a1a;border:1px solid #2a2a2a;color:#fff;border-radius:10px} #sqro-app button{padding:10px 14px;border-radius:10px;border:0;background:#f39c12;color:#111;font-weight:800} /* --- SQRO: subtitle under title --- */ #sqro-app .sqro-desc{ padding:2px 12px 0 12px; font-size:12px; line-height:1.25; opacity:.75; } /* --- SQRO: Light Theme (set or ?theme=light) --- */ :root[data-theme="light"] #sqro-app{ background:#f8f9fb; color:#111; } :root[data-theme="light"] #sqro-app .sqro-ui{ background:#f8f9fb; } :root[data-theme="light"] #sqro-app .sqro-card{ background:#fff; border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 2px rgba(0,0,0,.05); } :root[data-theme="light"] #sqro-app .sqro-tab{ background:#fff; color:#111; border:1px solid rgba(0,0,0,.08); } :root[data-theme="light"] #sqro-app .sqro-tab.active{ background:#f39c12; color:#111; border-color:transparent; } :root[data-theme="light"] #sqro-app .sqro-bottombar{ background:#fff; color:#111; border-top:1px solid #e5e7eb; } :root[data-theme="light"] #sqro-app .sqro-chip, :root[data-theme="light"] #sqro-app .sqro-qtybtn{ background:#f3f4f6; color:#111; border:1px solid #e5e7eb; } :root[data-theme="light"] #sqro-app .sqro-photo img{ filter:saturate(1.02) contrast(1.02); } /* ===== Watami Front Theme (as per mock) ===== */ :root[data-theme="watami"] #sqro-app{ background:#ffffff; color:#0b1220; } :root[data-theme="watami"] #sqro-app .sqro-ui{ background:#ffffff; } /* Header: clean white with subtle divider */ :root[data-theme="watami"] #sqro-app .sqro-topbar{ background:#ffffff; border-bottom:1px solid #edf2f7; box-shadow:none; padding-top:12px; padding-bottom:8px; } :root[data-theme="watami"] #sqro-app .sqro-timer{ background:#0f172a; color:#e5e7eb; border:0; } /* Tabs: soft pills with border, active = rose/red */ :root[data-theme="watami"] #sqro-app .sqro-tabs{ gap:10px; padding:8px 8px; } :root[data-theme="watami"] #sqro-app .sqro-tab{ background:#ffffff; color:#111827; border:1px solid #e5e7eb; border-radius:999px; padding:9px 14px; font-weight:600; } :root[data-theme="watami"] #sqro-app .sqro-tab.active{ background:#e11d48; color:#fff; border-color:#e11d48; } /* Grid & Cards */ :root[data-theme="watami"] #sqro-app .sqro-grid{ gap:24px; padding:16px; } :root[data-theme="watami"] #sqro-app .sqro-card{ background:#ffffff; border:1px solid #e5e7eb; border-radius:18px; box-shadow:0 1px 2px rgba(0,0,0,.03); } :root[data-theme="watami"] #sqro-app .sqro-photo{ background:#f3f4f6; border-radius:14px; } :root[data-theme="watami"] #sqro-app .sqro-photo img{ border-radius:14px; height:220px; object-fit:cover; } /* Title + description */ :root[data-theme="watami"] #sqro-app .sqro-title{ color:#0b1220; font-weight:800; } :root[data-theme="watami"] #sqro-app .sqro-title .sqro-price{ display:none; } :root[data-theme="watami"] #sqro-app .sqro-desc{ color:#4b5563; font-size:13px; padding:4px 16px 0 16px; } /* Hide station line */ :root[data-theme="watami"] #sqro-app .sqro-station{ display:none; } /* Plus-only button floating bottom-right */ :root[data-theme="watami"] #sqro-app .sqro-actions{ position:relative; min-height:54px; } :root[data-theme="watami"] #sqro-app .sqro-btn.minus, :root[data-theme="watami"] #sqro-app .sqro-q{ display:none !important; } :root[data-theme="watami"] #sqro-app .sqro-btn.plus{ position:absolute; right:14px; bottom:14px; width:44px; height:44px; border-radius:12px; background:#0f172a; color:#fff; border:0; font-size:22px; line-height:1; box-shadow:0 4px 10px rgba(2,6,23,.2); } /* Bottom bar: dark navy with rose CTA */ :root[data-theme="watami"] #sqro-app .sqro-bottombar{ background:#0f172a; color:#e5e7eb; border-top:0; padding:14px 18px; } :root[data-theme="watami"] #sqro-app #sqro-place{ background:#e11d48; color:#fff; border:0; padding:14px 22px; border-radius:14px; font-weight:800; } :root[data-theme="watami"] #sqro-app #sqro-place:disabled{ opacity:.5; }