/* FUMÉ REWARDS — Stylesheet Upload to: Online Store > Themes > Edit Code > Assets > Add a new asset > fume-rewards.css */ :root { --fr-gold: #C9A84C; --fr-gold-light: #E8C97A; --fr-gold-dark: #8B6A1F; --fr-bg: #0a0a0a; --fr-bg2: #111; --fr-bg3: #1a1a1a; --fr-bg4: #222; --fr-text: #f5f5f5; --fr-text2: #aaa; --fr-text3: #555; --fr-border: #2a2a2a; --fr-border2: #333; --fr-red: #e05050; --fr-green: #4caf80; } #fume-rewards-app { background: var(--fr-bg); color: var(--fr-text); font-family: 'Helvetica Neue', Arial, sans-serif; min-height: 80vh; padding-bottom: 3rem; } .hidden { display: none !important; } /* LOGIN PROMPT */ .fr-login-prompt { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem; } .fr-login-box { text-align: center; max-width: 400px; background: var(--fr-bg2); border: 1px solid var(--fr-border); border-radius: 16px; padding: 2.5rem; } .fr-logo { font-size: 2.5rem; font-weight: 800; letter-spacing: 8px; color: var(--fr-gold); margin-bottom: .75rem; } .fr-login-box h2 { font-size: 1rem; letter-spacing: 4px; margin-bottom: .75rem; } .fr-login-box p { color: var(--fr-text2); font-size: .85rem; margin-bottom: 1.5rem; } .fr-note { font-size: .7rem !important; color: var(--fr-text3) !important; margin-top: 1.5rem !important; line-height: 1.5; } /* BUTTONS */ .fr-btn-gold { display: inline-block; background: var(--fr-gold); color: #000; padding: .8rem 2rem; border-radius: 6px; font-weight: 700; letter-spacing: 2px; text-decoration: none; font-size: .85rem; margin: .25rem; transition: background .2s; border: none; cursor: pointer; } .fr-btn-gold:hover { background: var(--fr-gold-light); } .fr-btn-outline { display: inline-block; background: none; color: var(--fr-gold); border: 1px solid var(--fr-gold); padding: .8rem 2rem; border-radius: 6px; font-weight: 600; letter-spacing: 2px; text-decoration: none; font-size: .85rem; margin: .25rem; transition: all .2s; cursor: pointer; } .fr-btn-outline:hover { background: var(--fr-gold); color: #000; } /* NAV */ .fr-nav { display: flex; align-items: center; justify-content: space-between; background: var(--fr-bg2); border-bottom: 1px solid var(--fr-border); padding: 0 1.5rem; height: 60px; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: .5rem; } .fr-logo-sm { font-size: 1.2rem; font-weight: 800; letter-spacing: 4px; color: var(--fr-gold); } .fr-tabs { display: flex; gap: .25rem; } .fr-tab { background: none; border: none; color: var(--fr-text2); cursor: pointer; font-size: .75rem; letter-spacing: 1px; padding: .5rem .75rem; border-radius: 6px; transition: all .2s; } .fr-tab:hover { color: var(--fr-gold); } .fr-tab.active { color: var(--fr-gold); border-bottom: 2px solid var(--fr-gold); } .fr-pts-badge { background: var(--fr-bg3); border: 1px solid var(--fr-gold-dark); border-radius: 20px; padding: .3rem .9rem; font-size: .75rem; color: var(--fr-gold); font-weight: 700; } /* PAGES */ .fr-page { display: none; padding: 2rem 1.5rem; max-width: 960px; margin: 0 auto; } .fr-page.active { display: block; } /* DASHBOARD */ .fr-dash-header { margin-bottom: 1.5rem; } .fr-welcome { font-size: .75rem; letter-spacing: 3px; color: var(--fr-text2); } .fr-username { font-size: 1.8rem; font-weight: 700; } .fr-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .fr-stat { background: var(--fr-bg2); border: 1px solid var(--fr-border); border-radius: 12px; padding: 1.25rem; text-align: center; } .fr-stat-val { font-size: 1.8rem; font-weight: 800; color: var(--fr-gold); } .fr-tier-val { font-size: 1rem; letter-spacing: 2px; } .fr-stat-lbl { font-size: .65rem; letter-spacing: 2px; color: var(--fr-text2); margin-top: .25rem; } /* TIER BAR */ .fr-tier-bar-wrap { background: var(--fr-bg2); border: 1px solid var(--fr-border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; } .fr-tier-label { display: flex; justify-content: space-between; font-size: .78rem; color: var(--fr-text2); margin-bottom: .75rem; letter-spacing: 1px; } .fr-tier-bar { height: 8px; background: var(--fr-bg4); border-radius: 4px; overflow: hidden; } .fr-tier-fill { height: 100%; background: var(--fr-gold); border-radius: 4px; transition: width .5s; width: 0%; } .fr-tier-badges { display: flex; justify-content: space-between; margin-top: .5rem; } .fr-tb { font-size: .65rem; letter-spacing: 1px; color: var(--fr-text3); } .fr-tb-active { color: var(--fr-gold); font-weight: 700; } /* ACTIVITY */ .fr-section-title { font-size: .8rem; letter-spacing: 3px; color: var(--fr-text2); margin-bottom: 1rem; text-transform: uppercase; } .fr-activity-item { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: var(--fr-bg2); border: 1px solid var(--fr-border); border-radius: 8px; margin-bottom: .5rem; } .fr-activity-desc { font-size: .85rem; } .fr-activity-date { font-size: .7rem; color: var(--fr-text3); margin-top: .1rem; } .fr-activity-pts { color: var(--fr-gold); font-weight: 700; font-size: .9rem; } .fr-empty { text-align: center; padding: 2rem; color: var(--fr-text3); font-size: .85rem; } /* SCANNER */ .fr-scanner-wrap { max-width: 500px; margin: 0 auto; text-align: center; } .fr-scanner-sub { color: var(--fr-text2); font-size: .85rem; margin-bottom: 1.5rem; line-height: 1.5; } .fr-scan-types { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .fr-scan-type { display: flex; align-items: center; gap: .75rem; background: var(--fr-bg2); border: 1px solid var(--fr-border); border-radius: 10px; padding: .75rem 1.25rem; } .fr-scan-icon { font-size: 1.5rem; } .fr-scan-type strong { display: block; font-size: .8rem; letter-spacing: 2px; color: var(--fr-gold); } .fr-scan-type span { font-size: .75rem; color: var(--fr-text2); } #fr-qr-reader { border-radius: 12px; overflow: hidden; border: 2px solid var(--fr-gold-dark); margin-bottom: 1rem; } .fr-scanner-fallback { color: var(--fr-text2); font-size: .85rem; padding: 2rem; } .fr-manual-row { display: flex; gap: .5rem; margin-bottom: 1rem; } .fr-manual-row input { flex: 1; background: var(--fr-bg2); border: 1px solid var(--fr-border2); border-radius: 8px; padding: .7rem 1rem; color: var(--fr-text); font-size: .85rem; outline: none; } .fr-manual-row input:focus { border-color: var(--fr-gold); } .fr-manual-row button { background: var(--fr-gold); color: #000; border: none; border-radius: 8px; padding: .7rem 1rem; font-weight: 700; cursor: pointer; letter-spacing: 1px; font-size: .8rem; white-space: nowrap; } .fr-err { color: var(--fr-red); font-size: .8rem; margin-top: .5rem; text-align: center; } .fr-scan-success { background: var(--fr-bg2); border: 1px solid var(--fr-gold-dark); border-radius: 12px; padding: 2rem; margin-top: 1rem; text-align: center; } .fr-success-icon { font-size: 2.5rem; margin-bottom: .5rem; } .fr-success-pts { font-size: 3rem; font-weight: 800; color: var(--fr-gold); } .fr-success-label { font-size: .7rem; letter-spacing: 3px; color: var(--fr-text2); margin-top: .25rem; } .fr-success-product { font-size: .9rem; margin-top: .5rem; } .fr-success-total { font-size: .8rem; color: var(--fr-text2); margin-top: .25rem; } /* REWARDS STORE */ .fr-store-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .fr-filter-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .fr-filter { background: var(--fr-bg2); border: 1px solid var(--fr-border2); border-radius: 20px; padding: .4rem .9rem; color: var(--fr-text2); cursor: pointer; font-size: .75rem; letter-spacing: 1px; transition: all .2s; } .fr-filter.active { background: var(--fr-gold); color: #000; border-color: var(--fr-gold); font-weight: 700; } .fr-rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .fr-reward-card { background: var(--fr-bg2); border: 1px solid var(--fr-border); border-radius: 12px; overflow: hidden; transition: border .2s; } .fr-reward-card:hover { border-color: var(--fr-gold-dark); } .fr-reward-img { height: 90px; display: flex; align-items: center; justify-content: center; background: var(--fr-bg3); font-size: 2.5rem; } .fr-reward-body { padding: 1rem; } .fr-reward-tag { font-size: .65rem; letter-spacing: 2px; color: var(--fr-gold-dark); margin-bottom: .3rem; } .fr-reward-name { font-size: .9rem; font-weight: 600; margin-bottom: .25rem; } .fr-reward-desc { font-size: .75rem; color: var(--fr-text2); line-height: 1.4; margin-bottom: .75rem; } .fr-reward-footer { display: flex; align-items: center; justify-content: space-between; } .fr-reward-pts { color: var(--fr-gold); font-weight: 800; font-size: 1rem; } .fr-reward-pts span { font-size: .7rem; font-weight: 400; color: var(--fr-text2); } .fr-redeem-btn { background: var(--fr-gold); color: #000; border: none; border-radius: 6px; padding: .4rem .8rem; font-size: .72rem; font-weight: 700; cursor: pointer; letter-spacing: 1px; transition: background .2s; } .fr-redeem-btn:hover:not(:disabled) { background: var(--fr-gold-light); } .fr-redeem-btn:disabled { background: var(--fr-bg4); color: var(--fr-text3); cursor: not-allowed; } /* MODAL */ .fr-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; } .fr-modal { background: var(--fr-bg2); border: 1px solid var(--fr-gold-dark); border-radius: 16px; padding: 2rem; max-width: 380px; width: 100%; text-align: center; } .fr-modal-emoji { font-size: 2.5rem; margin-bottom: .75rem; } .fr-modal h3 { color: var(--fr-gold); letter-spacing: 2px; font-size: 1rem; margin-bottom: .5rem; } .fr-modal p { color: var(--fr-text2); font-size: .82rem; line-height: 1.6; margin-bottom: 1.5rem; } .fr-modal-btns { display: flex; gap: .75rem; justify-content: center; } .fr-modal-btns button { padding: .7rem 1.5rem; border-radius: 8px; font-weight: 700; font-size: .82rem; cursor: pointer; letter-spacing: 1px; } .fr-btn-cancel { background: var(--fr-bg3); border: 1px solid var(--fr-border2); color: var(--fr-text2); } .fr-btn-confirm { background: var(--fr-gold); border: none; color: #000; } .fr-btn-confirm:hover { background: var(--fr-gold-light); } /* TOAST */ .fr-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--fr-bg2); border: 1px solid var(--fr-gold-dark); border-radius: 10px; padding: .75rem 1.5rem; color: var(--fr-gold); font-size: .82rem; font-weight: 600; z-index: 400; opacity: 0; transition: opacity .3s; white-space: nowrap; pointer-events: none; } .fr-toast.show { opacity: 1; } @media (max-width: 600px) { .fr-page { padding: 1.5rem 1rem; } .fr-nav { padding: 0 1rem; height: auto; padding: .75rem 1rem; } .fr-stats-grid { grid-template-columns: repeat(2, 1fr); } }