diff --git a/assets/css/custom.css b/assets/css/custom.css index 030b6f8..a5d7d93 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1 +1,225 @@ -:root{--bg:#f8fafc;--surface:#fff;--surface-2:#f1f5f9;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;--primary:#111827;--accent:#16a34a;--danger:#dc2626;--radius:10px;--shadow:0 12px 32px rgba(15,23,42,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);font-size:15px}.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}.brand{font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:.6rem}.brand-logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;font-size:.78rem;font-weight:800}.brand-logo.lg{width:46px;height:46px;font-size:1rem}.nav-link{font-weight:600;color:var(--text)}.hero{background:#fff}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800;color:var(--accent)}h1,h2,h3{letter-spacing:-.04em}.lead{max-width:680px}.market-card,.surface,.product-card,.feature,.empty-state,.confirmation{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.market-card{padding:18px}.market-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.market-top small{display:block;color:var(--muted)}.scan-box{border:1px dashed #94a3b8;border-radius:8px;min-height:190px;display:grid;place-items:center;text-align:center;background:#f8fafc;color:var(--text);padding:18px}.scan-box span{display:block;font-weight:800}.scan-box small{display:block;color:var(--muted);max-width:260px}.scan-box.compact{min-height:140px;margin-bottom:20px}.status-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-top:14px;margin-top:14px;color:var(--muted)}.status-row strong{color:var(--text)}.section-heading{margin-bottom:22px;max-width:760px}.section-heading p{color:var(--muted);margin:0}.product-card{overflow:hidden}.product-visual{height:152px;background:#0f172a;color:#fff;display:grid;place-items:center}.product-visual span{font-size:2.4rem;font-weight:800;letter-spacing:-.08em}.product-visual.detail{height:420px;border-radius:var(--radius);box-shadow:var(--shadow)}.product-body{padding:18px}.product-body h3{font-size:1.16rem;margin:14px 0 8px}.product-body p{color:var(--muted);min-height:68px}.badge.subtle{background:#ecfdf5;color:#166534;border:1px solid #bbf7d0}.stock{font-size:.86rem;color:var(--muted);font-weight:700}.price{font-weight:800;font-size:1.25rem}.price.big{font-size:2rem}.qty{max-width:84px}.feature{padding:18px;display:flex;flex-direction:column;gap:4px;min-height:112px}.feature span{color:var(--muted)}.footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);font-size:.9rem}.whatsapp-float{position:fixed;right:18px;bottom:18px;z-index:20;width:52px;height:52px;border-radius:12px;background:#128c7e;color:#fff;display:grid;place-items:center;text-decoration:none;font-weight:900;box-shadow:var(--shadow)}.whatsapp-float:hover{background:#0f766e;color:#fff}.cart-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}.total,.summary-total{font-size:1.1rem;font-weight:800}.form-panel,.summary{padding:20px}.summary h2{font-size:1.25rem}.summary-line,.summary-total{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding:12px 0}.summary-total{border-bottom:1px solid var(--border)}.empty-state,.confirmation{padding:30px;text-align:center}.confirmation{max-width:760px;margin:auto}.back-link{color:var(--text);font-weight:700;text-decoration:none}.checkout-strip{max-width:420px}.status{font-size:.72rem;border-radius:999px;padding:3px 8px;background:#fef3c7;color:#92400e}.status.approved{background:#dcfce7;color:#166534}.tech-loader{position:fixed;inset:0;background:#f8fafc;z-index:9999;display:grid;place-items:center;transition:opacity .28s ease,visibility .28s ease}.tech-loader.is-hidden{opacity:0;visibility:hidden}.loader-card{width:min(300px,90vw);background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;text-align:center;box-shadow:var(--shadow)}.loader-mark{width:42px;height:42px;border-radius:8px;background:#111827;color:#fff;display:grid;place-items:center;font-weight:900;margin:0 auto 14px}.loader-line{height:3px;background:#e2e8f0;overflow:hidden;border-radius:99px}.loader-line:before{content:"";display:block;width:40%;height:100%;background:#16a34a;animation:loadline 1s ease-in-out infinite}.loader-card p{margin:12px 0 0;color:var(--muted);font-size:.9rem}@keyframes loadline{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}.btn{border-radius:8px;font-weight:700}.form-control,.form-select{border-radius:8px;border-color:var(--border)}.form-control:focus,.form-select:focus{border-color:#111827;box-shadow:0 0 0 .2rem rgba(17,24,39,.12)}@media(max-width:767px){.display-5{font-size:2.1rem}.product-visual.detail{height:260px}.cart-actions{align-items:stretch}.cart-actions .btn{width:100%}.total{width:100%}} +:root { + --bg: #fff8ec; + --surface: #ffffff; + --surface-2: #fff1c7; + --text: #12311f; + --muted: #607064; + --border: #f0d29a; + --primary: #12843b; + --primary-dark: #0c642c; + --accent: #f0442e; + --accent-2: #ffb703; + --accent-3: #00a7e1; + --orange: #ff7a00; + --danger: #dc2626; + --radius: 14px; + --shadow: 0 16px 38px rgba(112, 74, 18, .12); +} + +* { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + background: var(--bg); + color: var(--text); + font-size: 15px; +} + +.site-header { + background: rgba(255, 250, 239, .96); + border-top: 5px solid var(--accent-2); + border-bottom: 1px solid var(--border); + backdrop-filter: blur(10px); + box-shadow: 0 8px 24px rgba(18, 49, 31, .06); +} + +.brand { font-weight: 900; letter-spacing: -.03em; display: flex; align-items: center; gap: .6rem; } +.brand-logo { + display: inline-grid; + place-items: center; + width: 34px; + height: 34px; + border-radius: 10px; + background: var(--primary); + color: #fff; + font-size: .78rem; + font-weight: 900; + box-shadow: inset 0 -4px rgba(0,0,0,.12); +} +.brand-logo.lg { width: 50px; height: 50px; font-size: 1.05rem; background: var(--accent); } +.nav-link { font-weight: 700; color: var(--text); } +.nav-link:hover { color: var(--primary); } + +.hero { background: #fff8ec; border-bottom: 1px solid #f7dfae; } +.eyebrow { + display: inline-flex; + align-items: center; + gap: 6px; + text-transform: uppercase; + letter-spacing: .12em; + font-size: .74rem; + font-weight: 900; + color: var(--primary-dark); + background: #ffe7a3; + border: 1px solid #ffd166; + border-radius: 999px; + padding: 6px 10px; +} +.eyebrow::before { content: "•"; color: var(--accent); font-size: 1.2rem; line-height: 0; } +h1, h2, h3 { letter-spacing: -.04em; } +.lead { max-width: 680px; } + +.market-card, +.surface, +.product-card, +.feature, +.empty-state, +.confirmation { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + box-shadow: var(--shadow); +} +.market-card { padding: 20px; border-color: #ffc247; } +.market-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } +.market-top small { display: block; color: var(--muted); } +.scan-box { + border: 2px dashed var(--primary); + border-radius: 12px; + min-height: 190px; + display: grid; + place-items: center; + text-align: center; + background: #fff4c8; + color: var(--text); + padding: 18px; +} +.scan-box span { display: block; font-weight: 900; color: var(--accent); } +.scan-box small { display: block; color: var(--muted); max-width: 260px; } +.scan-box.compact { min-height: 140px; margin-bottom: 20px; } +.status-row { + display: flex; + justify-content: space-between; + gap: 12px; + border-top: 1px solid var(--border); + padding-top: 14px; + margin-top: 14px; + color: var(--muted); +} +.status-row strong { color: var(--primary-dark); } + +.section-heading { margin-bottom: 22px; max-width: 760px; } +.section-heading p { color: var(--muted); margin: 0; } +.product-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } +.product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(112, 74, 18, .18); } +.product-visual { + height: 152px; + background: var(--primary); + color: #fff; + display: grid; + place-items: center; + border-bottom: 6px solid var(--accent-2); +} +.product-visual span { font-size: 2.4rem; font-weight: 900; letter-spacing: -.08em; text-shadow: 0 3px rgba(0,0,0,.12); } +.product-visual.detail { height: 420px; border-radius: var(--radius); box-shadow: var(--shadow); } +.row.g-3 > [class*="col-"]:nth-child(3n+1) .product-visual { background: var(--primary); } +.row.g-3 > [class*="col-"]:nth-child(3n+2) .product-visual { background: var(--orange); } +.row.g-3 > [class*="col-"]:nth-child(3n+3) .product-visual { background: var(--accent-3); } +.product-body { padding: 18px; } +.product-body h3 { font-size: 1.16rem; margin: 14px 0 8px; } +.product-body p { color: var(--muted); min-height: 68px; } +.badge.subtle { background: #fff0b8; color: #7a4b00; border: 1px solid #ffd166; } +.stock { font-size: .86rem; color: var(--primary-dark); font-weight: 800; } +.price { font-weight: 900; font-size: 1.25rem; color: var(--accent); } +.price.big { font-size: 2rem; } +.qty { max-width: 84px; } + +.feature { + padding: 18px; + display: flex; + flex-direction: column; + gap: 4px; + min-height: 112px; + border-top: 6px solid var(--primary); +} +.row.g-3 > [class*="col-"]:nth-child(2) .feature { border-top-color: var(--accent); } +.row.g-3 > [class*="col-"]:nth-child(3) .feature { border-top-color: var(--accent-2); } +.feature strong { color: var(--text); } +.feature span { color: var(--muted); } +.footer { border-top: 1px solid var(--border); padding: 24px 0; color: var(--muted); font-size: .9rem; background: #fff3cf; } + +.whatsapp-float { + position: fixed; + right: 18px; + bottom: 18px; + z-index: 20; + width: 56px; + height: 56px; + border-radius: 16px; + background: #19a354; + color: #fff; + display: grid; + place-items: center; + text-decoration: none; + font-weight: 900; + box-shadow: 0 14px 28px rgba(25, 163, 84, .28); +} +.whatsapp-float:hover { background: #0f8a43; color: #fff; transform: translateY(-2px); } + +.cart-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; } +.total, .summary-total { font-size: 1.1rem; font-weight: 900; } +.form-panel, .summary { padding: 20px; } +.summary h2 { font-size: 1.25rem; } +.summary-line, .summary-total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding: 12px 0; } +.summary-total { border-bottom: 1px solid var(--border); color: var(--accent); } +.empty-state, .confirmation { padding: 30px; text-align: center; } +.confirmation { max-width: 760px; margin: auto; } +.back-link { color: var(--primary-dark); font-weight: 800; text-decoration: none; } +.checkout-strip { max-width: 420px; } +.status { font-size: .72rem; border-radius: 999px; padding: 3px 8px; background: #fff0b8; color: #7a4b00; border: 1px solid #ffd166; } +.status.approved { background: #dcfce7; color: #166534; border-color: #86efac; } + +.tech-loader { position: fixed; inset: 0; background: #fff8ec; z-index: 9999; display: grid; place-items: center; transition: opacity .28s ease, visibility .28s ease; } +.tech-loader.is-hidden { opacity: 0; visibility: hidden; } +.loader-card { width: min(300px, 90vw); background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-align: center; box-shadow: var(--shadow); } +.loader-mark { width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 900; margin: 0 auto 14px; } +.loader-line { height: 4px; background: #ffe4a8; overflow: hidden; border-radius: 99px; } +.loader-line:before { content: ""; display: block; width: 40%; height: 100%; background: var(--primary); animation: loadline 1s ease-in-out infinite; } +.loader-card p { margin: 12px 0 0; color: var(--muted); font-size: .9rem; } +@keyframes loadline { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } } + +.btn { border-radius: 10px; font-weight: 800; } +.btn-dark { + --bs-btn-bg: var(--primary); + --bs-btn-border-color: var(--primary); + --bs-btn-hover-bg: var(--primary-dark); + --bs-btn-hover-border-color: var(--primary-dark); + --bs-btn-active-bg: var(--primary-dark); + --bs-btn-active-border-color: var(--primary-dark); +} +.btn-outline-dark { + --bs-btn-color: var(--primary-dark); + --bs-btn-border-color: var(--primary); + --bs-btn-hover-bg: var(--primary); + --bs-btn-hover-border-color: var(--primary); + --bs-btn-hover-color: #fff; +} +.btn-outline-secondary { + --bs-btn-color: #7a4b00; + --bs-btn-border-color: #ffb703; + --bs-btn-hover-bg: #ffb703; + --bs-btn-hover-border-color: #ffb703; + --bs-btn-hover-color: #12311f; +} +.alert-success { background: #dcfce7; border-color: #86efac; color: #14532d; } +.text-secondary { color: var(--muted) !important; } +.form-control, .form-select { border-radius: 10px; border-color: var(--border); } +.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(18, 132, 59, .14); } + +@media (max-width: 767px) { + .display-5 { font-size: 2.1rem; } + .product-visual.detail { height: 260px; } + .cart-actions { align-items: stretch; } + .cart-actions .btn { width: 100%; } + .total { width: 100%; } +} diff --git a/assets/pasted-20260630-162052-2e0489d8.png b/assets/pasted-20260630-162052-2e0489d8.png new file mode 100644 index 0000000..23426ee Binary files /dev/null and b/assets/pasted-20260630-162052-2e0489d8.png differ