repositories
loading repo index
repositories
loading repo index
repository
loading code, commits, and activity
Fastfood QR
stars
latest
clone command
git clone gitlawb://did:key:z6Mkfh4Y...QBEi/fastfood-qrgit clone gitlawb://did:key:z6Mkfh4Y.../fastfood-qr3042a875sync from playground22h ago| #1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); |
| #2 | |
| #3 | :root { |
| #4 | --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; |
| #5 | --color-bg: #000000; |
| #6 | --color-surface: #0f0f0f; |
| #7 | --color-surface-2: #1a1a1a; |
| #8 | --color-surface-3: #242424; |
| #9 | --color-border: rgba(255, 255, 255, 0.06); |
| #10 | --color-border-hover: rgba(255, 255, 255, 0.12); |
| #11 | --color-text: #ffffff; |
| #12 | --color-text-secondary: rgba(255, 255, 255, 0.7); |
| #13 | --color-text-muted: rgba(255, 255, 255, 0.4); |
| #14 | --color-primary: #ffffff; |
| #15 | --color-primary-hover: #e0e0e0; |
| #16 | --color-accent: #00c853; |
| #17 | --color-accent-hover: #00b848; |
| #18 | --color-whatsapp: #25d366; |
| #19 | --color-whatsapp-hover: #20bd5a; |
| #20 | --color-danger: #ff4444; |
| #21 | --color-danger-hover: #e63e3e; |
| #22 | --radius-sm: 0.5rem; |
| #23 | --radius: 0.75rem; |
| #24 | --radius-lg: 1rem; |
| #25 | --radius-xl: 1.25rem; |
| #26 | --radius-full: 9999px; |
| #27 | --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); |
| #28 | --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); |
| #29 | --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); |
| #30 | --shadow-glow: 0 0 40px rgba(0, 200, 83, 0.15); |
| #31 | --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| #32 | --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); |
| #33 | --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); |
| #34 | } |
| #35 | |
| #36 | [data-theme="light"] { |
| #37 | --color-bg: #fafafa; |
| #38 | --color-surface: #ffffff; |
| #39 | --color-surface-2: #f5f5f5; |
| #40 | --color-surface-3: #eeeeee; |
| #41 | --color-border: rgba(0, 0, 0, 0.08); |
| #42 | --color-border-hover: rgba(0, 0, 0, 0.15); |
| #43 | --color-text: #111111; |
| #44 | --color-text-secondary: rgba(0, 0, 0, 0.65); |
| #45 | --color-text-muted: rgba(0, 0, 0, 0.35); |
| #46 | --color-primary: #111111; |
| #47 | --color-primary-hover: #333333; |
| #48 | --color-accent: #00a844; |
| #49 | --color-accent-hover: #009a3d; |
| #50 | --color-whatsapp: #20a855; |
| #51 | --color-whatsapp-hover: #1a8f47; |
| #52 | --color-danger: #e53935; |
| #53 | --color-danger-hover: #c62828; |
| #54 | --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); |
| #55 | --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); |
| #56 | --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); |
| #57 | --shadow-glow: 0 0 40px rgba(0, 168, 68, 0.1); |
| #58 | } |
| #59 | |
| #60 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| #61 | |
| #62 | html { |
| #63 | font-family: var(--font); |
| #64 | -webkit-font-smoothing: antialiased; |
| #65 | -moz-osx-font-smoothing: grayscale; |
| #66 | } |
| #67 | |
| #68 | html, body, #root { |
| #69 | background: var(--color-bg); |
| #70 | color: var(--color-text); |
| #71 | min-height: 100vh; |
| #72 | line-height: 1.6; |
| #73 | } |
| #74 | |
| #75 | a { color: inherit; text-decoration: none; } |
| #76 | button { font-family: inherit; } |
| #77 | |
| #78 | ::selection { |
| #79 | background: var(--color-accent); |
| #80 | color: #fff; |
| #81 | } |
| #82 | |
| #83 | /* ============ SCROLLBAR ============ */ |
| #84 | ::-webkit-scrollbar { width: 6px; height: 6px; } |
| #85 | ::-webkit-scrollbar-track { background: transparent; } |
| #86 | ::-webkit-scrollbar-thumb { background: var(--color-surface-3); border-radius: 3px; } |
| #87 | ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } |
| #88 | |
| #89 | /* ============ NAVBAR ============ */ |
| #90 | .navbar { |
| #91 | display: flex; |
| #92 | align-items: center; |
| #93 | justify-content: space-between; |
| #94 | padding: 0 1.5rem; |
| #95 | height: 64px; |
| #96 | background: var(--color-surface); |
| #97 | border-bottom: 1px solid var(--color-border); |
| #98 | position: sticky; |
| #99 | top: 0; |
| #100 | z-index: 100; |
| #101 | backdrop-filter: blur(20px); |
| #102 | -webkit-backdrop-filter: blur(20px); |
| #103 | } |
| #104 | |
| #105 | .navbar-brand { |
| #106 | font-weight: 800; |
| #107 | font-size: 1.1rem; |
| #108 | letter-spacing: -0.02em; |
| #109 | display: flex; |
| #110 | align-items: center; |
| #111 | gap: 0.5rem; |
| #112 | } |
| #113 | |
| #114 | .navbar-brand-icon { |
| #115 | width: 32px; |
| #116 | height: 32px; |
| #117 | background: var(--color-accent); |
| #118 | border-radius: 8px; |
| #119 | display: flex; |
| #120 | align-items: center; |
| #121 | justify-content: center; |
| #122 | font-size: 1rem; |
| #123 | } |
| #124 | |
| #125 | .navbar-links { display: flex; align-items: center; gap: 0.25rem; } |
| #126 | |
| #127 | .navbar-link { |
| #128 | font-size: 0.875rem; |
| #129 | font-weight: 500; |
| #130 | color: var(--color-text-secondary); |
| #131 | padding: 0.5rem 0.875rem; |
| #132 | border-radius: var(--radius); |
| #133 | transition: all var(--transition-fast); |
| #134 | } |
| #135 | |
| #136 | .navbar-link:hover { |
| #137 | color: var(--color-text); |
| #138 | background: var(--color-surface-2); |
| #139 | } |
| #140 | |
| #141 | .theme-toggle { |
| #142 | background: none; |
| #143 | border: none; |
| #144 | width: 40px; |
| #145 | height: 40px; |
| #146 | display: flex; |
| #147 | align-items: center; |
| #148 | justify-content: center; |
| #149 | border-radius: var(--radius); |
| #150 | cursor: pointer; |
| #151 | color: var(--color-text-secondary); |
| #152 | transition: all var(--transition-fast); |
| #153 | font-size: 1.1rem; |
| #154 | } |
| #155 | |
| #156 | .theme-toggle:hover { |
| #157 | color: var(--color-text); |
| #158 | background: var(--color-surface-2); |
| #159 | } |
| #160 | |
| #161 | /* ============ BUTTONS ============ */ |
| #162 | .btn { |
| #163 | display: inline-flex; |
| #164 | align-items: center; |
| #165 | justify-content: center; |
| #166 | gap: 0.5rem; |
| #167 | padding: 0.625rem 1.25rem; |
| #168 | border: none; |
| #169 | border-radius: var(--radius); |
| #170 | font-size: 0.875rem; |
| #171 | font-weight: 600; |
| #172 | cursor: pointer; |
| #173 | transition: all var(--transition); |
| #174 | white-space: nowrap; |
| #175 | letter-spacing: -0.01em; |
| #176 | } |
| #177 | |
| #178 | .btn-primary { |
| #179 | background: var(--color-text); |
| #180 | color: var(--color-bg); |
| #181 | } |
| #182 | |
| #183 | .btn-primary:hover { |
| #184 | background: var(--color-primary-hover); |
| #185 | transform: translateY(-1px); |
| #186 | box-shadow: var(--shadow); |
| #187 | } |
| #188 | |
| #189 | .btn-primary:active { |
| #190 | transform: translateY(0); |
| #191 | } |
| #192 | |
| #193 | .btn-secondary { |
| #194 | background: var(--color-surface-2); |
| #195 | color: var(--color-text); |
| #196 | border: 1px solid var(--color-border); |
| #197 | } |
| #198 | |
| #199 | .btn-secondary:hover { |
| #200 | background: var(--color-surface-3); |
| #201 | border-color: var(--color-border-hover); |
| #202 | } |
| #203 | |
| #204 | .btn-danger { |
| #205 | background: transparent; |
| #206 | color: var(--color-danger); |
| #207 | border: 1px solid var(--color-border); |
| #208 | } |
| #209 | |
| #210 | .btn-danger:hover { |
| #211 | background: var(--color-danger); |
| #212 | color: #fff; |
| #213 | border-color: var(--color-danger); |
| #214 | } |
| #215 | |
| #216 | .btn-accent { |
| #217 | background: var(--color-accent); |
| #218 | color: #fff; |
| #219 | } |
| #220 | |
| #221 | .btn-accent:hover { |
| #222 | background: var(--color-accent-hover); |
| #223 | transform: translateY(-1px); |
| #224 | box-shadow: 0 4px 16px rgba(0, 200, 83, 0.3); |
| #225 | } |
| #226 | |
| #227 | .btn-large { padding: 0.875rem 2rem; font-size: 1rem; } |
| #228 | .btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; } |
| #229 | |
| #230 | /* ============ FORMS ============ */ |
| #231 | .form-group { margin-bottom: 1.25rem; flex: 1; } |
| #232 | |
| #233 | .form-label { |
| #234 | display: block; |
| #235 | font-size: 0.8125rem; |
| #236 | font-weight: 500; |
| #237 | color: var(--color-text-secondary); |
| #238 | margin-bottom: 0.5rem; |
| #239 | letter-spacing: 0.01em; |
| #240 | } |
| #241 | |
| #242 | .form-input { |
| #243 | width: 100%; |
| #244 | padding: 0.75rem 1rem; |
| #245 | background: var(--color-surface-2); |
| #246 | border: 1px solid var(--color-border); |
| #247 | border-radius: var(--radius); |
| #248 | color: var(--color-text); |
| #249 | font-size: 0.9375rem; |
| #250 | font-family: inherit; |
| #251 | transition: all var(--transition); |
| #252 | } |
| #253 | |
| #254 | .form-input:focus { |
| #255 | outline: none; |
| #256 | border-color: var(--color-accent); |
| #257 | box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1); |
| #258 | } |
| #259 | |
| #260 | .form-input::placeholder { |
| #261 | color: var(--color-text-muted); |
| #262 | } |
| #263 | |
| #264 | textarea.form-input { resize: vertical; } |
| #265 | select.form-input { cursor: pointer; } |
| #266 | |
| #267 | .form-row { display: flex; gap: 1rem; } |
| #268 | .form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; } |
| #269 | |
| #270 | .save-success { |
| #271 | color: var(--color-accent); |
| #272 | font-weight: 600; |
| #273 | font-size: 0.875rem; |
| #274 | display: flex; |
| #275 | align-items: center; |
| #276 | gap: 0.375rem; |
| #277 | } |
| #278 | |
| #279 | /* ============ LANDING ============ */ |
| #280 | .landing { min-height: 100vh; } |
| #281 | |
| #282 | .hero { |
| #283 | padding: 8rem 1.5rem 6rem; |
| #284 | text-align: center; |
| #285 | max-width: 52rem; |
| #286 | margin: 0 auto; |
| #287 | position: relative; |
| #288 | } |
| #289 | |
| #290 | .hero-badge { |
| #291 | display: inline-flex; |
| #292 | align-items: center; |
| #293 | gap: 0.5rem; |
| #294 | font-size: 0.75rem; |
| #295 | font-weight: 600; |
| #296 | letter-spacing: 0.08em; |
| #297 | text-transform: uppercase; |
| #298 | color: var(--color-accent); |
| #299 | background: rgba(0, 200, 83, 0.1); |
| #300 | border: 1px solid rgba(0, 200, 83, 0.2); |
| #301 | padding: 0.5rem 1rem; |
| #302 | border-radius: var(--radius-full); |
| #303 | margin-bottom: 2rem; |
| #304 | } |
| #305 | |
| #306 | .hero-title { |
| #307 | font-size: clamp(2.5rem, 6vw, 4rem); |
| #308 | font-weight: 800; |
| #309 | line-height: 1.1; |
| #310 | letter-spacing: -0.04em; |
| #311 | margin-bottom: 1.5rem; |
| #312 | background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-secondary) 100%); |
| #313 | -webkit-background-clip: text; |
| #314 | -webkit-text-fill-color: transparent; |
| #315 | background-clip: text; |
| #316 | } |
| #317 | |
| #318 | .hero-subtitle { |
| #319 | font-size: 1.25rem; |
| #320 | color: var(--color-text-secondary); |
| #321 | max-width: 36rem; |
| #322 | margin: 0 auto 3rem; |
| #323 | line-height: 1.7; |
| #324 | } |
| #325 | |
| #326 | .hero-actions { |
| #327 | display: flex; |
| #328 | gap: 1rem; |
| #329 | justify-content: center; |
| #330 | flex-wrap: wrap; |
| #331 | } |
| #332 | |
| #333 | .section-title { |
| #334 | text-align: center; |
| #335 | font-size: 2rem; |
| #336 | font-weight: 800; |
| #337 | margin-bottom: 0.75rem; |
| #338 | letter-spacing: -0.03em; |
| #339 | } |
| #340 | |
| #341 | .section-subtitle { |
| #342 | text-align: center; |
| #343 | color: var(--color-text-secondary); |
| #344 | margin-bottom: 3rem; |
| #345 | font-size: 1.0625rem; |
| #346 | } |
| #347 | |
| #348 | .features { |
| #349 | padding: 5rem 1.5rem 6rem; |
| #350 | max-width: 72rem; |
| #351 | margin: 0 auto; |
| #352 | } |
| #353 | |
| #354 | .features-grid { |
| #355 | display: grid; |
| #356 | grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); |
| #357 | gap: 1.5rem; |
| #358 | } |
| #359 | |
| #360 | .feature-card { |
| #361 | background: var(--color-surface); |
| #362 | border: 1px solid var(--color-border); |
| #363 | border-radius: var(--radius-xl); |
| #364 | padding: 2rem; |
| #365 | transition: all var(--transition); |
| #366 | } |
| #367 | |
| #368 | .feature-card:hover { |
| #369 | border-color: var(--color-border-hover); |
| #370 | transform: translateY(-4px); |
| #371 | box-shadow: var(--shadow-lg); |
| #372 | } |
| #373 | |
| #374 | .feature-icon { |
| #375 | width: 48px; |
| #376 | height: 48px; |
| #377 | background: var(--color-surface-2); |
| #378 | border-radius: var(--radius); |
| #379 | display: flex; |
| #380 | align-items: center; |
| #381 | justify-content: center; |
| #382 | font-size: 1.5rem; |
| #383 | margin-bottom: 1.25rem; |
| #384 | } |
| #385 | |
| #386 | .feature-title { |
| #387 | font-size: 1.0625rem; |
| #388 | font-weight: 700; |
| #389 | margin-bottom: 0.625rem; |
| #390 | letter-spacing: -0.01em; |
| #391 | } |
| #392 | |
| #393 | .feature-desc { |
| #394 | font-size: 0.9375rem; |
| #395 | color: var(--color-text-secondary); |
| #396 | line-height: 1.6; |
| #397 | } |
| #398 | |
| #399 | .how-it-works { |
| #400 | padding: 5rem 1.5rem 6rem; |
| #401 | max-width: 64rem; |
| #402 | margin: 0 auto; |
| #403 | } |
| #404 | |
| #405 | .steps { |
| #406 | display: flex; |
| #407 | gap: 2rem; |
| #408 | justify-content: center; |
| #409 | flex-wrap: wrap; |
| #410 | margin-top: 3rem; |
| #411 | } |
| #412 | |
| #413 | .step { |
| #414 | text-align: center; |
| #415 | flex: 1; |
| #416 | min-width: 14rem; |
| #417 | position: relative; |
| #418 | } |
| #419 | |
| #420 | .step-number { |
| #421 | display: inline-flex; |
| #422 | align-items: center; |
| #423 | justify-content: center; |
| #424 | width: 3.5rem; |
| #425 | height: 3.5rem; |
| #426 | border-radius: 50%; |
| #427 | background: var(--color-accent); |
| #428 | color: #fff; |
| #429 | font-size: 1.25rem; |
| #430 | font-weight: 700; |
| #431 | margin-bottom: 1.25rem; |
| #432 | box-shadow: 0 4px 16px rgba(0, 200, 83, 0.3); |
| #433 | } |
| #434 | |
| #435 | .step-title { |
| #436 | font-size: 1.0625rem; |
| #437 | font-weight: 700; |
| #438 | margin-bottom: 0.625rem; |
| #439 | letter-spacing: -0.01em; |
| #440 | } |
| #441 | |
| #442 | .step-desc { |
| #443 | font-size: 0.9375rem; |
| #444 | color: var(--color-text-secondary); |
| #445 | line-height: 1.6; |
| #446 | } |
| #447 | |
| #448 | .cta-section { |
| #449 | text-align: center; |
| #450 | padding: 5rem 1.5rem; |
| #451 | background: var(--color-surface); |
| #452 | border-top: 1px solid var(--color-border); |
| #453 | } |
| #454 | |
| #455 | .cta-title { |
| #456 | font-size: 2rem; |
| #457 | font-weight: 800; |
| #458 | margin-bottom: 0.75rem; |
| #459 | letter-spacing: -0.03em; |
| #460 | } |
| #461 | |
| #462 | .cta-desc { |
| #463 | color: var(--color-text-secondary); |
| #464 | margin-bottom: 2rem; |
| #465 | font-size: 1.0625rem; |
| #466 | } |
| #467 | |
| #468 | /* ============ LOGIN ============ */ |
| #469 | .login-page { |
| #470 | min-height: calc(100vh - 64px); |
| #471 | display: grid; |
| #472 | place-items: center; |
| #473 | padding: 2rem; |
| #474 | } |
| #475 | |
| #476 | .login-card { |
| #477 | background: var(--color-surface); |
| #478 | border: 1px solid var(--color-border); |
| #479 | border-radius: var(--radius-xl); |
| #480 | padding: 3rem; |
| #481 | width: 100%; |
| #482 | max-width: 28rem; |
| #483 | } |
| #484 | |
| #485 | .login-title { |
| #486 | font-size: 1.5rem; |
| #487 | font-weight: 800; |
| #488 | margin-bottom: 0.375rem; |
| #489 | text-align: center; |
| #490 | letter-spacing: -0.02em; |
| #491 | } |
| #492 | |
| #493 | .login-subtitle { |
| #494 | color: var(--color-text-secondary); |
| #495 | text-align: center; |
| #496 | margin-bottom: 2.5rem; |
| #497 | font-size: 0.9375rem; |
| #498 | } |
| #499 | |
| #500 | .login-form { |
| #501 | display: flex; |
| #502 | flex-direction: column; |
| #503 | gap: 0; |
| #504 | } |
| #505 | |
| #506 | .login-error { |
| #507 | color: var(--color-danger); |
| #508 | font-size: 0.8125rem; |
| #509 | text-align: center; |
| #510 | margin-bottom: 1rem; |
| #511 | padding: 0.75rem; |
| #512 | background: rgba(255, 68, 68, 0.1); |
| #513 | border-radius: var(--radius); |
| #514 | } |
| #515 | |
| #516 | .login-hint { |
| #517 | color: var(--color-text-muted); |
| #518 | font-size: 0.8125rem; |
| #519 | text-align: center; |
| #520 | margin-top: 1.25rem; |
| #521 | } |
| #522 | |
| #523 | /* ============ DASHBOARD ============ */ |
| #524 | .dashboard { min-height: calc(100vh - 64px); } |
| #525 | |
| #526 | .dashboard-topbar { |
| #527 | display: flex; |
| #528 | align-items: center; |
| #529 | justify-content: space-between; |
| #530 | padding: 1.25rem 2rem; |
| #531 | border-bottom: 1px solid var(--color-border); |
| #532 | flex-wrap: wrap; |
| #533 | gap: 1rem; |
| #534 | } |
| #535 | |
| #536 | .topbar-name { |
| #537 | font-size: 1.375rem; |
| #538 | font-weight: 800; |
| #539 | letter-spacing: -0.02em; |
| #540 | } |
| #541 | |
| #542 | .topbar-actions { display: flex; gap: 0.75rem; } |
| #543 | |
| #544 | .tabs { |
| #545 | display: flex; |
| #546 | border-bottom: 1px solid var(--color-border); |
| #547 | overflow-x: auto; |
| #548 | padding: 0 2rem; |
| #549 | gap: 0.25rem; |
| #550 | } |
| #551 | |
| #552 | .tab { |
| #553 | padding: 1rem 1.25rem; |
| #554 | font-size: 0.875rem; |
| #555 | font-weight: 600; |
| #556 | color: var(--color-text-muted); |
| #557 | background: none; |
| #558 | border: none; |
| #559 | border-bottom: 2px solid transparent; |
| #560 | cursor: pointer; |
| #561 | white-space: nowrap; |
| #562 | transition: all var(--transition-fast); |
| #563 | } |
| #564 | |
| #565 | .tab:hover { color: var(--color-text-secondary); } |
| #566 | |
| #567 | .tab.active { |
| #568 | color: var(--color-text); |
| #569 | border-bottom-color: var(--color-accent); |
| #570 | } |
| #571 | |
| #572 | .tab-content { |
| #573 | padding: 2rem; |
| #574 | max-width: 72rem; |
| #575 | } |
| #576 | |
| #577 | /* Store form */ |
| #578 | .store-form { max-width: 52rem; } |
| #579 | |
| #580 | /* Categories */ |
| #581 | .add-category-row { |
| #582 | display: flex; |
| #583 | gap: 0.75rem; |
| #584 | margin-bottom: 1.5rem; |
| #585 | } |
| #586 | |
| #587 | .add-category-row .form-input { flex: 1; } |
| #588 | |
| #589 | .category-list { display: flex; flex-direction: column; gap: 0.625rem; } |
| #590 | |
| #591 | .category-item { |
| #592 | display: flex; |
| #593 | align-items: center; |
| #594 | justify-content: space-between; |
| #595 | padding: 1rem 1.25rem; |
| #596 | background: var(--color-surface); |
| #597 | border: 1px solid var(--color-border); |
| #598 | border-radius: var(--radius-lg); |
| #599 | gap: 1rem; |
| #600 | transition: all var(--transition); |
| #601 | } |
| #602 | |
| #603 | .category-item:hover { |
| #604 | border-color: var(--color-border-hover); |
| #605 | } |
| #606 | |
| #607 | .category-name { |
| #608 | font-weight: 600; |
| #609 | font-size: 0.9375rem; |
| #610 | } |
| #611 | |
| #612 | .category-actions { display: flex; gap: 0.5rem; } |
| #613 | .category-edit-input { max-width: 18rem; } |
| #614 | |
| #615 | .empty-msg { |
| #616 | color: var(--color-text-muted); |
| #617 | font-size: 0.9375rem; |
| #618 | padding: 2rem 0; |
| #619 | text-align: center; |
| #620 | } |
| #621 | |
| #622 | /* Products toolbar */ |
| #623 | .products-toolbar { |
| #624 | display: flex; |
| #625 | justify-content: space-between; |
| #626 | align-items: center; |
| #627 | margin-bottom: 1.5rem; |
| #628 | gap: 1rem; |
| #629 | } |
| #630 | |
| #631 | .filter-select { max-width: 16rem; } |
| #632 | |
| #633 | .product-list { display: flex; flex-direction: column; gap: 0.75rem; } |
| #634 | |
| #635 | .product-card-db { |
| #636 | display: flex; |
| #637 | align-items: center; |
| #638 | gap: 1.25rem; |
| #639 | padding: 1rem; |
| #640 | background: var(--color-surface); |
| #641 | border: 1px solid var(--color-border); |
| #642 | border-radius: var(--radius-lg); |
| #643 | transition: all var(--transition); |
| #644 | } |
| #645 | |
| #646 | .product-card-db:hover { |
| #647 | border-color: var(--color-border-hover); |
| #648 | } |
| #649 | |
| #650 | .product-thumb { |
| #651 | width: 72px; |
| #652 | height: 72px; |
| #653 | border-radius: var(--radius); |
| #654 | object-fit: cover; |
| #655 | flex-shrink: 0; |
| #656 | } |
| #657 | |
| #658 | .product-thumb-placeholder { |
| #659 | display: grid; |
| #660 | place-items: center; |
| #661 | font-size: 1.75rem; |
| #662 | background: var(--color-surface-2); |
| #663 | } |
| #664 | |
| #665 | .product-details { flex: 1; min-width: 0; } |
| #666 | |
| #667 | .product-details h3 { |
| #668 | font-size: 1rem; |
| #669 | font-weight: 700; |
| #670 | margin-bottom: 0.25rem; |
| #671 | letter-spacing: -0.01em; |
| #672 | } |
| #673 | |
| #674 | .product-cat-price { |
| #675 | font-size: 0.8125rem; |
| #676 | color: var(--color-text-secondary); |
| #677 | } |
| #678 | |
| #679 | .product-badges { display: flex; gap: 0.5rem; margin-top: 0.5rem; } |
| #680 | |
| #681 | .badge { |
| #682 | font-size: 0.6875rem; |
| #683 | font-weight: 600; |
| #684 | padding: 0.25rem 0.625rem; |
| #685 | border-radius: var(--radius-full); |
| #686 | letter-spacing: 0.02em; |
| #687 | } |
| #688 | |
| #689 | .badge-featured { |
| #690 | background: rgba(0, 200, 83, 0.1); |
| #691 | color: var(--color-accent); |
| #692 | } |
| #693 | |
| #694 | .badge-unavailable { |
| #695 | background: rgba(255, 68, 68, 0.1); |
| #696 | color: var(--color-danger); |
| #697 | } |
| #698 | |
| #699 | .product-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } |
| #700 | |
| #701 | /* Modal */ |
| #702 | .modal-overlay { |
| #703 | position: fixed; |
| #704 | inset: 0; |
| #705 | background: rgba(0, 0, 0, 0.7); |
| #706 | backdrop-filter: blur(8px); |
| #707 | -webkit-backdrop-filter: blur(8px); |
| #708 | display: grid; |
| #709 | place-items: center; |
| #710 | z-index: 200; |
| #711 | padding: 1rem; |
| #712 | animation: fadeIn var(--transition) ease; |
| #713 | } |
| #714 | |
| #715 | @keyframes fadeIn { |
| #716 | from { opacity: 0; } |
| #717 | to { opacity: 1; } |
| #718 | } |
| #719 | |
| #720 | .modal-content { |
| #721 | background: var(--color-surface); |
| #722 | border: 1px solid var(--color-border); |
| #723 | border-radius: var(--radius-xl); |
| #724 | padding: 2rem; |
| #725 | width: 100%; |
| #726 | max-width: 36rem; |
| #727 | max-height: 90vh; |
| #728 | overflow-y: auto; |
| #729 | animation: slideUp var(--transition-slow) ease; |
| #730 | } |
| #731 | |
| #732 | @keyframes slideUp { |
| #733 | from { opacity: 0; transform: translateY(16px); } |
| #734 | to { opacity: 1; transform: translateY(0); } |
| #735 | } |
| #736 | |
| #737 | .modal-header { |
| #738 | display: flex; |
| #739 | justify-content: space-between; |
| #740 | align-items: center; |
| #741 | margin-bottom: 2rem; |
| #742 | } |
| #743 | |
| #744 | .modal-header h2 { |
| #745 | font-size: 1.25rem; |
| #746 | font-weight: 700; |
| #747 | letter-spacing: -0.02em; |
| #748 | } |
| #749 | |
| #750 | .modal-close { |
| #751 | background: var(--color-surface-2); |
| #752 | border: none; |
| #753 | color: var(--color-text-secondary); |
| #754 | width: 36px; |
| #755 | height: 36px; |
| #756 | display: flex; |
| #757 | align-items: center; |
| #758 | justify-content: center; |
| #759 | border-radius: var(--radius); |
| #760 | cursor: pointer; |
| #761 | font-size: 1.25rem; |
| #762 | transition: all var(--transition-fast); |
| #763 | } |
| #764 | |
| #765 | .modal-close:hover { |
| #766 | background: var(--color-surface-3); |
| #767 | color: var(--color-text); |
| #768 | } |
| #769 | |
| #770 | .modal-actions { |
| #771 | display: flex; |
| #772 | gap: 0.75rem; |
| #773 | justify-content: flex-end; |
| #774 | margin-top: 2rem; |
| #775 | } |
| #776 | |
| #777 | .checkbox-row { display: flex; gap: 2rem; } |
| #778 | |
| #779 | .checkbox-label { |
| #780 | display: flex; |
| #781 | align-items: center; |
| #782 | gap: 0.625rem; |
| #783 | font-size: 0.9375rem; |
| #784 | cursor: pointer; |
| #785 | font-weight: 500; |
| #786 | } |
| #787 | |
| #788 | .checkbox-label input { |
| #789 | width: 1.25rem; |
| #790 | height: 1.25rem; |
| #791 | accent-color: var(--color-accent); |
| #792 | } |
| #793 | |
| #794 | /* QR Code */ |
| #795 | .qr-section { |
| #796 | text-align: center; |
| #797 | max-width: 32rem; |
| #798 | margin: 0 auto; |
| #799 | padding: 2rem 0; |
| #800 | } |
| #801 | |
| #802 | .qr-preview { margin-bottom: 1.5rem; } |
| #803 | |
| #804 | .qr-canvas { |
| #805 | width: 280px; |
| #806 | height: 280px; |
| #807 | border-radius: var(--radius-lg); |
| #808 | border: 1px solid var(--color-border); |
| #809 | box-shadow: var(--shadow-lg); |
| #810 | } |
| #811 | |
| #812 | .qr-url { |
| #813 | font-size: 0.875rem; |
| #814 | color: var(--color-text-secondary); |
| #815 | word-break: break-all; |
| #816 | margin-bottom: 1.5rem; |
| #817 | font-family: monospace; |
| #818 | } |
| #819 | |
| #820 | .qr-actions { |
| #821 | display: flex; |
| #822 | gap: 1rem; |
| #823 | justify-content: center; |
| #824 | margin-bottom: 1.5rem; |
| #825 | } |
| #826 | |
| #827 | .qr-info { |
| #828 | font-size: 0.875rem; |
| #829 | color: var(--color-text-muted); |
| #830 | max-width: 24rem; |
| #831 | margin: 0 auto; |
| #832 | } |
| #833 | |
| #834 | /* ============ CUSTOMER MENU PAGE ============ */ |
| #835 | .menu-page { padding-bottom: 6rem; } |
| #836 | |
| #837 | .menu-banner { |
| #838 | height: 16rem; |
| #839 | background-size: cover; |
| #840 | background-position: center; |
| #841 | position: relative; |
| #842 | } |
| #843 | |
| #844 | .menu-banner-overlay { |
| #845 | position: absolute; |
| #846 | inset: 0; |
| #847 | background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%); |
| #848 | display: flex; |
| #849 | flex-direction: column; |
| #850 | justify-content: flex-end; |
| #851 | padding: 2rem; |
| #852 | } |
| #853 | |
| #854 | .menu-banner-title { |
| #855 | font-size: 2rem; |
| #856 | font-weight: 800; |
| #857 | margin-bottom: 0.375rem; |
| #858 | letter-spacing: -0.02em; |
| #859 | } |
| #860 | |
| #861 | .menu-banner-desc { |
| #862 | font-size: 0.9375rem; |
| #863 | color: rgba(255,255,255,0.75); |
| #864 | } |
| #865 | |
| #866 | .menu-info { |
| #867 | display: flex; |
| #868 | flex-wrap: wrap; |
| #869 | gap: 0.625rem 1.5rem; |
| #870 | padding: 1rem 2rem; |
| #871 | font-size: 0.8125rem; |
| #872 | color: var(--color-text-secondary); |
| #873 | border-bottom: 1px solid var(--color-border); |
| #874 | background: var(--color-surface); |
| #875 | } |
| #876 | |
| #877 | .menu-info-item { |
| #878 | display: flex; |
| #879 | align-items: center; |
| #880 | gap: 0.375rem; |
| #881 | } |
| #882 | |
| #883 | .menu-info-wa { |
| #884 | color: var(--color-whatsapp); |
| #885 | font-weight: 600; |
| #886 | } |
| #887 | |
| #888 | /* Category nav */ |
| #889 | .category-nav { |
| #890 | position: sticky; |
| #891 | top: 64px; |
| #892 | z-index: 50; |
| #893 | background: var(--color-surface); |
| #894 | border-bottom: 1px solid var(--color-border); |
| #895 | backdrop-filter: blur(20px); |
| #896 | -webkit-backdrop-filter: blur(20px); |
| #897 | } |
| #898 | |
| #899 | .category-nav-inner { |
| #900 | display: flex; |
| #901 | overflow-x: auto; |
| #902 | padding: 0.75rem 1.5rem; |
| #903 | gap: 0.5rem; |
| #904 | -ms-overflow-style: none; |
| #905 | scrollbar-width: none; |
| #906 | } |
| #907 | |
| #908 | .category-nav-inner::-webkit-scrollbar { display: none; } |
| #909 | |
| #910 | .category-nav-item { |
| #911 | padding: 0.5rem 1.125rem; |
| #912 | border-radius: var(--radius-full); |
| #913 | font-size: 0.8125rem; |
| #914 | font-weight: 600; |
| #915 | background: var(--color-surface-2); |
| #916 | border: 1px solid var(--color-border); |
| #917 | color: var(--color-text-secondary); |
| #918 | cursor: pointer; |
| #919 | white-space: nowrap; |
| #920 | transition: all var(--transition); |
| #921 | } |
| #922 | |
| #923 | .category-nav-item:hover { |
| #924 | color: var(--color-text); |
| #925 | border-color: var(--color-border-hover); |
| #926 | background: var(--color-surface-3); |
| #927 | } |
| #928 | |
| #929 | .category-nav-item.active { |
| #930 | background: var(--color-text); |
| #931 | color: var(--color-bg); |
| #932 | border-color: var(--color-text); |
| #933 | } |
| #934 | |
| #935 | /* Menu content */ |
| #936 | .menu-content { |
| #937 | padding: 1.5rem 1.5rem 0; |
| #938 | max-width: 72rem; |
| #939 | margin: 0 auto; |
| #940 | } |
| #941 | |
| #942 | .menu-section { |
| #943 | margin-bottom: 2.5rem; |
| #944 | scroll-margin-top: 8rem; |
| #945 | } |
| #946 | |
| #947 | .menu-section-title { |
| #948 | font-size: 1.375rem; |
| #949 | font-weight: 800; |
| #950 | margin-bottom: 1rem; |
| #951 | padding-left: 0.25rem; |
| #952 | letter-spacing: -0.02em; |
| #953 | } |
| #954 | |
| #955 | .product-grid { |
| #956 | display: grid; |
| #957 | grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); |
| #958 | gap: 1.25rem; |
| #959 | } |
| #960 | |
| #961 | .product-card { |
| #962 | background: var(--color-surface); |
| #963 | border: 1px solid var(--color-border); |
| #964 | border-radius: var(--radius-xl); |
| #965 | overflow: hidden; |
| #966 | transition: all var(--transition); |
| #967 | } |
| #968 | |
| #969 | .product-card:hover { |
| #970 | border-color: var(--color-border-hover); |
| #971 | transform: translateY(-2px); |
| #972 | box-shadow: var(--shadow); |
| #973 | } |
| #974 | |
| #975 | .product-card.unavailable { opacity: 0.5; pointer-events: none; } |
| #976 | |
| #977 | .product-image-wrap { |
| #978 | position: relative; |
| #979 | aspect-ratio: 16/10; |
| #980 | overflow: hidden; |
| #981 | } |
| #982 | |
| #983 | .product-image { |
| #984 | width: 100%; |
| #985 | height: 100%; |
| #986 | object-fit: cover; |
| #987 | transition: transform var(--transition-slow); |
| #988 | } |
| #989 | |
| #990 | .product-card:hover .product-image { |
| #991 | transform: scale(1.05); |
| #992 | } |
| #993 | |
| #994 | .product-image-placeholder { |
| #995 | width: 100%; |
| #996 | height: 100%; |
| #997 | display: grid; |
| #998 | place-items: center; |
| #999 | font-size: 3rem; |
| #1000 | background: var(--color-surface-2); |
| #1001 | } |
| #1002 | |
| #1003 | .product-badge { |
| #1004 | position: absolute; |
| #1005 | top: 0.75rem; |
| #1006 | left: 0.75rem; |
| #1007 | font-size: 0.6875rem; |
| #1008 | font-weight: 700; |
| #1009 | padding: 0.3rem 0.75rem; |
| #1010 | border-radius: var(--radius-full); |
| #1011 | background: var(--color-accent); |
| #1012 | color: #fff; |
| #1013 | letter-spacing: 0.02em; |
| #1014 | } |
| #1015 | |
| #1016 | .product-badge-unavailable { background: var(--color-danger); } |
| #1017 | |
| #1018 | .product-info { padding: 1rem; } |
| #1019 | |
| #1020 | .product-name { |
| #1021 | font-size: 1rem; |
| #1022 | font-weight: 700; |
| #1023 | margin-bottom: 0.375rem; |
| #1024 | letter-spacing: -0.01em; |
| #1025 | } |
| #1026 | |
| #1027 | .product-desc { |
| #1028 | font-size: 0.8125rem; |
| #1029 | color: var(--color-text-secondary); |
| #1030 | margin-bottom: 0.875rem; |
| #1031 | line-height: 1.5; |
| #1032 | display: -webkit-box; |
| #1033 | -webkit-line-clamp: 2; |
| #1034 | -webkit-box-orient: vertical; |
| #1035 | overflow: hidden; |
| #1036 | } |
| #1037 | |
| #1038 | .product-bottom { |
| #1039 | display: flex; |
| #1040 | align-items: center; |
| #1041 | justify-content: space-between; |
| #1042 | } |
| #1043 | |
| #1044 | .product-price { |
| #1045 | font-size: 1.125rem; |
| #1046 | font-weight: 800; |
| #1047 | letter-spacing: -0.02em; |
| #1048 | } |
| #1049 | |
| #1050 | .add-to-cart-btn { |
| #1051 | padding: 0.5rem 1.25rem; |
| #1052 | border-radius: var(--radius-full); |
| #1053 | border: none; |
| #1054 | background: var(--color-text); |
| #1055 | color: var(--color-bg); |
| #1056 | font-size: 0.8125rem; |
| #1057 | font-weight: 700; |
| #1058 | cursor: pointer; |
| #1059 | transition: all var(--transition); |
| #1060 | letter-spacing: -0.01em; |
| #1061 | } |
| #1062 | |
| #1063 | .add-to-cart-btn:hover { |
| #1064 | transform: scale(1.05); |
| #1065 | box-shadow: var(--shadow); |
| #1066 | } |
| #1067 | |
| #1068 | /* Cart float */ |
| #1069 | .cart-float { |
| #1070 | position: fixed; |
| #1071 | bottom: 1.25rem; |
| #1072 | left: 50%; |
| #1073 | transform: translateX(-50%); |
| #1074 | display: flex; |
| #1075 | align-items: center; |
| #1076 | gap: 1rem; |
| #1077 | padding: 0.875rem 1.75rem; |
| #1078 | background: var(--color-text); |
| #1079 | color: var(--color-bg); |
| #1080 | border: none; |
| #1081 | border-radius: var(--radius-full); |
| #1082 | font-size: 0.9375rem; |
| #1083 | font-weight: 700; |
| #1084 | cursor: pointer; |
| #1085 | box-shadow: var(--shadow-lg); |
| #1086 | z-index: 80; |
| #1087 | transition: all var(--transition); |
| #1088 | animation: cartBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); |
| #1089 | } |
| #1090 | |
| #1091 | .cart-float:hover { |
| #1092 | transform: translateX(-50%) scale(1.03); |
| #1093 | box-shadow: var(--shadow-lg); |
| #1094 | } |
| #1095 | |
| #1096 | @keyframes cartBounce { |
| #1097 | 0% { transform: translateX(-50%) scale(0.9); opacity: 0; } |
| #1098 | 60% { transform: translateX(-50%) scale(1.02); } |
| #1099 | 100% { transform: translateX(-50%) scale(1); opacity: 1; } |
| #1100 | } |
| #1101 | |
| #1102 | .cart-float-count { |
| #1103 | display: inline-flex; |
| #1104 | align-items: center; |
| #1105 | justify-content: center; |
| #1106 | width: 1.625rem; |
| #1107 | height: 1.625rem; |
| #1108 | border-radius: 50%; |
| #1109 | background: var(--color-accent); |
| #1110 | color: #fff; |
| #1111 | font-size: 0.75rem; |
| #1112 | font-weight: 800; |
| #1113 | } |
| #1114 | |
| #1115 | .cart-float-label { font-weight: 700; } |
| #1116 | |
| #1117 | .cart-float-total { |
| #1118 | opacity: 0.7; |
| #1119 | font-size: 0.875rem; |
| #1120 | } |
| #1121 | |
| #1122 | /* Cart overlay + drawer */ |
| #1123 | .cart-overlay { |
| #1124 | position: fixed; |
| #1125 | inset: 0; |
| #1126 | background: rgba(0, 0, 0, 0.6); |
| #1127 | backdrop-filter: blur(4px); |
| #1128 | -webkit-backdrop-filter: blur(4px); |
| #1129 | z-index: 150; |
| #1130 | animation: fadeIn var(--transition) ease; |
| #1131 | } |
| #1132 | |
| #1133 | .cart-drawer { |
| #1134 | position: fixed; |
| #1135 | top: 0; |
| #1136 | right: 0; |
| #1137 | width: min(26rem, 100vw); |
| #1138 | height: 100vh; |
| #1139 | background: var(--color-surface); |
| #1140 | border-left: 1px solid var(--color-border); |
| #1141 | z-index: 200; |
| #1142 | display: flex; |
| #1143 | flex-direction: column; |
| #1144 | transform: translateX(100%); |
| #1145 | transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1); |
| #1146 | overflow-y: auto; |
| #1147 | } |
| #1148 | |
| #1149 | .cart-drawer.open { transform: translateX(0); } |
| #1150 | |
| #1151 | .cart-header { |
| #1152 | display: flex; |
| #1153 | justify-content: space-between; |
| #1154 | align-items: center; |
| #1155 | padding: 1.5rem 1.5rem 1rem; |
| #1156 | border-bottom: 1px solid var(--color-border); |
| #1157 | } |
| #1158 | |
| #1159 | .cart-header h2 { |
| #1160 | font-size: 1.25rem; |
| #1161 | font-weight: 800; |
| #1162 | letter-spacing: -0.02em; |
| #1163 | } |
| #1164 | |
| #1165 | .cart-close { |
| #1166 | background: var(--color-surface-2); |
| #1167 | border: none; |
| #1168 | color: var(--color-text-secondary); |
| #1169 | width: 36px; |
| #1170 | height: 36px; |
| #1171 | display: flex; |
| #1172 | align-items: center; |
| #1173 | justify-content: center; |
| #1174 | border-radius: var(--radius); |
| #1175 | cursor: pointer; |
| #1176 | font-size: 1.25rem; |
| #1177 | transition: all var(--transition-fast); |
| #1178 | } |
| #1179 | |
| #1180 | .cart-close:hover { |
| #1181 | background: var(--color-surface-3); |
| #1182 | color: var(--color-text); |
| #1183 | } |
| #1184 | |
| #1185 | .cart-empty { |
| #1186 | flex: 1; |
| #1187 | display: flex; |
| #1188 | flex-direction: column; |
| #1189 | align-items: center; |
| #1190 | justify-content: center; |
| #1191 | padding: 3rem 2rem; |
| #1192 | color: var(--color-text-muted); |
| #1193 | text-align: center; |
| #1194 | } |
| #1195 | |
| #1196 | .cart-empty p:first-child { |
| #1197 | font-size: 1.125rem; |
| #1198 | font-weight: 700; |
| #1199 | color: var(--color-text); |
| #1200 | margin-bottom: 0.5rem; |
| #1201 | } |
| #1202 | |
| #1203 | .cart-items { flex: 1; padding: 1rem 1.5rem; } |
| #1204 | |
| #1205 | .cart-item { |
| #1206 | padding: 1rem 0; |
| #1207 | border-bottom: 1px solid var(--color-border); |
| #1208 | } |
| #1209 | |
| #1210 | .cart-item:last-child { border-bottom: none; } |
| #1211 | |
| #1212 | .cart-item-info { |
| #1213 | display: flex; |
| #1214 | justify-content: space-between; |
| #1215 | margin-bottom: 0.5rem; |
| #1216 | } |
| #1217 | |
| #1218 | .cart-item-name { |
| #1219 | font-weight: 700; |
| #1220 | font-size: 0.9375rem; |
| #1221 | } |
| #1222 | |
| #1223 | .cart-item-price { |
| #1224 | font-size: 0.9375rem; |
| #1225 | color: var(--color-accent); |
| #1226 | font-weight: 700; |
| #1227 | } |
| #1228 | |
| #1229 | .cart-item-controls { |
| #1230 | display: flex; |
| #1231 | align-items: center; |
| #1232 | gap: 0.75rem; |
| #1233 | } |
| #1234 | |
| #1235 | .cart-item-controls button { |
| #1236 | width: 2rem; |
| #1237 | height: 2rem; |
| #1238 | border-radius: 50%; |
| #1239 | border: 1px solid var(--color-border); |
| #1240 | background: var(--color-surface-2); |
| #1241 | color: var(--color-text); |
| #1242 | font-size: 0.9375rem; |
| #1243 | cursor: pointer; |
| #1244 | display: inline-flex; |
| #1245 | align-items: center; |
| #1246 | justify-content: center; |
| #1247 | transition: all var(--transition-fast); |
| #1248 | } |
| #1249 | |
| #1250 | .cart-item-controls button:hover { |
| #1251 | background: var(--color-surface-3); |
| #1252 | border-color: var(--color-border-hover); |
| #1253 | } |
| #1254 | |
| #1255 | .cart-item-controls span { |
| #1256 | font-size: 0.9375rem; |
| #1257 | min-width: 1.75rem; |
| #1258 | text-align: center; |
| #1259 | font-weight: 700; |
| #1260 | } |
| #1261 | |
| #1262 | .cart-item-remove { |
| #1263 | width: auto !important; |
| #1264 | border-radius: var(--radius) !important; |
| #1265 | padding: 0.25rem 0.75rem !important; |
| #1266 | font-size: 0.75rem !important; |
| #1267 | color: var(--color-danger) !important; |
| #1268 | border-color: transparent !important; |
| #1269 | background: none !important; |
| #1270 | margin-left: auto; |
| #1271 | } |
| #1272 | |
| #1273 | .cart-item-remove:hover { |
| #1274 | color: var(--color-danger) !important; |
| #1275 | background: rgba(255, 68, 68, 0.1) !important; |
| #1276 | } |
| #1277 | |
| #1278 | .cart-summary { |
| #1279 | padding: 1.25rem 1.5rem; |
| #1280 | border-top: 1px solid var(--color-border); |
| #1281 | } |
| #1282 | |
| #1283 | .cart-summary-row { |
| #1284 | display: flex; |
| #1285 | justify-content: space-between; |
| #1286 | font-size: 0.9375rem; |
| #1287 | color: var(--color-text-secondary); |
| #1288 | margin-bottom: 0.5rem; |
| #1289 | } |
| #1290 | |
| #1291 | .cart-summary-total { |
| #1292 | font-size: 1.125rem; |
| #1293 | font-weight: 800; |
| #1294 | color: var(--color-text); |
| #1295 | margin-top: 0.75rem; |
| #1296 | padding-top: 0.75rem; |
| #1297 | border-top: 1px solid var(--color-border); |
| #1298 | letter-spacing: -0.02em; |
| #1299 | } |
| #1300 | |
| #1301 | .cart-fields { padding: 0 1.5rem; } |
| #1302 | |
| #1303 | .cart-field { margin-bottom: 1rem; } |
| #1304 | |
| #1305 | .cart-field label { |
| #1306 | display: block; |
| #1307 | font-size: 0.8125rem; |
| #1308 | color: var(--color-text-secondary); |
| #1309 | margin-bottom: 0.375rem; |
| #1310 | font-weight: 500; |
| #1311 | } |
| #1312 | |
| #1313 | .cart-field input, |
| #1314 | .cart-field textarea { |
| #1315 | width: 100%; |
| #1316 | padding: 0.625rem 1rem; |
| #1317 | background: var(--color-surface-2); |
| #1318 | border: 1px solid var(--color-border); |
| #1319 | border-radius: var(--radius); |
| #1320 | color: var(--color-text); |
| #1321 | font-size: 0.9375rem; |
| #1322 | font-family: inherit; |
| #1323 | transition: all var(--transition); |
| #1324 | } |
| #1325 | |
| #1326 | .cart-field input:focus, |
| #1327 | .cart-field textarea:focus { |
| #1328 | outline: none; |
| #1329 | border-color: var(--color-accent); |
| #1330 | box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.1); |
| #1331 | } |
| #1332 | |
| #1333 | .cart-field textarea { resize: vertical; } |
| #1334 | |
| #1335 | .whatsapp-btn { |
| #1336 | display: flex; |
| #1337 | align-items: center; |
| #1338 | justify-content: center; |
| #1339 | gap: 0.75rem; |
| #1340 | width: calc(100% - 3rem); |
| #1341 | margin: 1rem 1.5rem; |
| #1342 | padding: 1rem; |
| #1343 | background: var(--color-whatsapp); |
| #1344 | color: #fff; |
| #1345 | border: none; |
| #1346 | border-radius: var(--radius-lg); |
| #1347 | font-size: 1rem; |
| #1348 | font-weight: 700; |
| #1349 | cursor: pointer; |
| #1350 | transition: all var(--transition); |
| #1351 | letter-spacing: -0.01em; |
| #1352 | } |
| #1353 | |
| #1354 | .whatsapp-btn:hover { |
| #1355 | background: var(--color-whatsapp-hover); |
| #1356 | transform: translateY(-2px); |
| #1357 | box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3); |
| #1358 | } |
| #1359 | |
| #1360 | .cart-clear-btn { |
| #1361 | display: block; |
| #1362 | margin: 0.75rem auto 1.5rem; |
| #1363 | background: none; |
| #1364 | border: none; |
| #1365 | color: var(--color-text-muted); |
| #1366 | font-size: 0.8125rem; |
| #1367 | cursor: pointer; |
| #1368 | transition: color var(--transition-fast); |
| #1369 | } |
| #1370 | |
| #1371 | .cart-clear-btn:hover { color: var(--color-text-secondary); } |
| #1372 | |
| #1373 | /* Menu not found */ |
| #1374 | .menu-not-found { |
| #1375 | min-height: calc(100vh - 64px); |
| #1376 | display: flex; |
| #1377 | flex-direction: column; |
| #1378 | align-items: center; |
| #1379 | justify-content: center; |
| #1380 | text-align: center; |
| #1381 | padding: 2rem; |
| #1382 | } |
| #1383 | |
| #1384 | .menu-not-found h1 { |
| #1385 | font-size: 1.5rem; |
| #1386 | font-weight: 800; |
| #1387 | margin-bottom: 0.5rem; |
| #1388 | } |
| #1389 | |
| #1390 | .menu-not-found p { color: var(--color-text-secondary); } |
| #1391 | |
| #1392 | /* ============ RESPONSIVE ============ */ |
| #1393 | @media (max-width: 640px) { |
| #1394 | .navbar { padding: 0 1rem; } |
| #1395 | .form-row { flex-direction: column; gap: 0; } |
| #1396 | .product-grid { grid-template-columns: 1fr; } |
| #1397 | .hero { padding: 5rem 1rem 4rem; } |
| #1398 | .hero-title { font-size: 2rem; } |
| #1399 | .hero-subtitle { font-size: 1.0625rem; } |
| #1400 | .steps { flex-direction: column; gap: 2rem; } |
| #1401 | .product-card-db { flex-direction: column; align-items: flex-start; } |
| #1402 | .product-thumb { width: 100%; height: 140px; } |
| #1403 | .menu-banner { height: 12rem; } |
| #1404 | .dashboard-topbar { flex-direction: column; align-items: flex-start; } |
| #1405 | .tab-content { padding: 1.25rem; } |
| #1406 | .features { padding: 3rem 1rem 4rem; } |
| #1407 | .how-it-works { padding: 3rem 1rem 4rem; } |
| #1408 | } |
| #1409 |