/* ===================================================== WeRewards — student app Same family as the terminal (PSU navy, Archivo) but warmer and more playful: this side has to feel fun. ===================================================== */ :root { --ink: #101d33; --paper: #f2f5f9; --card: #ffffff; --navy: #12294b; --navy-press: #0b1c36; --sky: #d7e5f5; --sky-line: #a9c4e4; --accent: #96bee6; --success: #157a43; --warn: #c2740a; --muted: #5a6678; --danger: #d63b2f; --danger-press: #a52a20; /* semantic roles that diverge from --ink/--navy in dark mode: --edge = the chunky borders + hard offset shadows --brand = brand-colored text/numbers sitting on light surfaces --hairline = subtle separators (e.g. the nav's top border) */ --edge: #101d33; --brand: #12294b; --hairline: #e5eaf2; } /* Dark theme — set data-theme="dark" on . Backgrounds go dark, text goes light, and the borders/hard-shadows soften to a subtle line so the playful "sticker" cards read on a dark page instead of glowing white. */ :root[data-theme="dark"] { --ink: #e8eef7; --paper: #0f1826; --card: #1c2b45; --navy: #17335c; --navy-press: #0f2447; --sky: #cfe1f5; --sky-line: #3a5074; --accent: #96bee6; --success: #43cf88; --warn: #e6a53c; --muted: #94a3ba; --danger: #ec5a4e; --danger-press: #b23a30; --edge: #35496a; --brand: #8fbdf0; --hairline: #2a3a56; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { font-family: "Archivo", system-ui, -apple-system, sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; } button { font-family: inherit; border: none; cursor: pointer; background: none; } [hidden] { display: none !important; } /* ---------- nav ---------- */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.2rem, 4vw, 3rem); } .wordmark { font-weight: 900; letter-spacing: 0.12em; font-size: 0.95rem; } .wordmark em { font-style: normal; color: var(--navy); background: var(--sky); padding: 0.1em 0.35em; border-radius: 0.3em; } .nav-signin { font-weight: 700; font-size: 0.95rem; color: var(--brand); padding: 0.6rem 1.1rem; border: 2.5px solid var(--brand); border-radius: 0.6rem; } /* ---------- hero ---------- */ .hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 2rem; padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 4vw, 3rem); max-width: 72rem; margin: 0 auto; } .hero-copy h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 900; line-height: 0.98; letter-spacing: -0.01em; } .hl { color: var(--brand); background: linear-gradient(transparent 90%, var(--accent) 70%); } .hero-sub { margin-top: 1.2rem; font-size: 1.15rem; line-height: 1.55; color: var(--muted); font-weight: 500; max-width: 30rem; } .google-btn { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 0.8rem; background: var(--card); color: var(--ink); font-size: 1.15rem; font-weight: 700; padding: 1rem 1.6rem; border-radius: 0.9rem; border: 3px solid var(--edge); box-shadow: 0 4px 0 var(--edge); transition: transform 80ms ease, box-shadow 80ms ease; } .google-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); } .auth-error { margin-top: 0.9rem; color: #a93226; font-weight: 700; } .fine { margin-top: 0.9rem; color: var(--muted); font-size: 0.92rem; font-weight: 500; } /* ---------- hero mock card ---------- */ .hero-card { position: relative; display: flex; justify-content: center; } .mock-card { background: var(--navy); color: #fff; border-radius: 1.4rem; padding: 1.6rem 1.8rem; width: min(19rem, 80%); transform: rotate(3deg); box-shadow: 0 18px 40px rgba(16, 29, 51, 0.28); } .mock-vendor { font-weight: 900; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--accent); } .mock-points { font-size: 3.4rem; font-weight: 900; line-height: 1.1; } .mock-points small { font-size: 0.35em; font-weight: 700; margin-left: 0.25em; letter-spacing: 0.08em; } .mock-code { margin: 1rem 0 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; background: #fff; padding: 0.8rem 0.7rem; border-radius: 0.7rem; } .mock-code-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; color: #7a8aa3; } .mock-code-value { font-size: 2rem; font-weight: 900; letter-spacing: 0.32em; color: #101d33; text-indent: 0.32em; /* balance the trailing letter-spacing so it reads centered */ } .mock-hint { font-size: 0.9rem; font-weight: 700; color: var(--sky); } .chip { position: absolute; background: var(--card); border: 3px solid var(--edge); border-radius: 2rem; padding: 0.45rem 0.9rem; font-weight: 900; font-size: 0.95rem; box-shadow: 0 3px 0 var(--edge); } .chip-1 { top: 8%; right: 4%; transform: rotate(-6deg); color: var(--success); } .chip-2 { bottom: -7%; left: 6%; transform: rotate(4deg); color: var(--brand); } /* ---------- how it works ---------- */ .how { background: var(--navy); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem); } .how h2 { max-width: 72rem; margin: 0 auto 2rem; font-size: 1rem; font-weight: 900; letter-spacing: 0.22em; color: var(--accent); } .steps { max-width: 72rem; margin: 0 auto; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent); color: var(--navy); font-weight: 900; font-size: 1.25rem; margin-bottom: 0.9rem; } .steps h3 { font-size: 1.35rem; font-weight: 900; margin-bottom: 0.5rem; } .steps p { color: var(--sky); line-height: 1.55; font-weight: 500; } .footer { padding: 2rem; text-align: center; color: var(--muted); font-size: 0.92rem; font-weight: 500; } /* ---------- signed-in: home (vendor carousel) ---------- */ #home { min-height: 100%; display: flex; flex-direction: column; } /* blue banner hugging the top of the screen */ .brand-banner { background: var(--navy); color: #fff; padding: calc(1.5rem + env(safe-area-inset-top)) 1.3rem 1.5rem; border-radius: 0 0 1.4rem 1.4rem; text-align: center; } .brand-word { font-weight: 900; letter-spacing: 0.01em; font-size: 2rem; line-height: 1; } .brand-word em { font-style: normal; color: var(--accent); } /* 30-day tier meter under the wordmark: fill toward the 1.5x / 2x cutoffs */ .tier-bar { position: relative; margin-top: 1.15rem; text-align: left; } .tier-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .tier-badge { font-weight: 900; font-size: 0.82rem; letter-spacing: 0.08em; background: var(--accent); color: var(--navy); padding: 0.22em 0.7em; border-radius: 2em; } .tier-bar.t2 .tier-badge { background: #ffd76e; } .tier-bar.t3 .tier-badge { background: #ffb84d; } .tier-top-right { display: flex; align-items: center; gap: 0.5rem; } .tier-hint { font-size: 0.8rem; font-weight: 700; color: var(--sky); } /* (i) info button */ .tier-info-btn { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff; font-size: 0.82rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 120ms ease, border-color 120ms ease; } .tier-info-btn:active { background: rgba(255, 255, 255, 0.2); } /* info popover: transparent full-screen backdrop catches outside clicks */ .tier-info-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: calc(4.5rem + env(safe-area-inset-top)) 1.1rem 1.1rem; background: rgba(10, 20, 40, 0.35); opacity: 0; transition: opacity 150ms ease; } .tier-info-overlay.is-open { opacity: 1; } .tier-info-card { position: relative; width: min(23rem, 100%); background: var(--card); color: var(--ink); border: 3px solid var(--edge); border-radius: 1.1rem; box-shadow: 0 12px 30px rgba(16, 29, 51, 0.3); padding: 1.3rem 1.3rem 1.4rem; transform: translateY(-8px) scale(0.97); transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1); } .tier-info-overlay.is-open .tier-info-card { transform: translateY(0) scale(1); } .tier-info-card h3 { font-size: 1.15rem; font-weight: 900; margin: 0.1rem 0 0.6rem; padding-right: 1.6rem; } .tier-info-card p { font-size: 0.9rem; line-height: 1.5; font-weight: 500; color: var(--ink); margin-bottom: 0.7rem; } .tier-info-card p:last-child { margin-bottom: 0; } .tier-info-card ul { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .tier-info-card li { font-size: 0.9rem; line-height: 1.4; font-weight: 500; padding-left: 1rem; position: relative; } .tier-info-card li::before { content: "•"; position: absolute; left: 0.1rem; color: var(--brand); font-weight: 900; } .tier-info-card strong { color: var(--brand); font-weight: 900; } .tier-info-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--paper); color: var(--muted); font-size: 0.85rem; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; } .tier-info-close:active { background: var(--sky); color: var(--navy); } .tier-track { position: relative; height: 0.7rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.16); overflow: hidden; } .tier-fill { height: 100%; width: 0; border-radius: 1rem; background: linear-gradient(90deg, var(--accent), #ffd76e); transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* cutoff marks sit above the fill so the tier boundaries stay visible */ .tier-mark { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 1; background: rgba(255, 255, 255, 0.55); } .tier-scale { display: flex; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; color: var(--sky); } .tier-scale span { text-align: center; } .home-main { flex: 1; padding: 1.7rem 0 1rem; } /* home-main has no horizontal padding (so the carousel is full-bleed), so inset the code card to match the 1.3rem gutter used by .home-sub. */ .home-main .my-code { width: auto; margin: 0 1.3rem; } .home-sub { margin: 0 1.3rem 1rem; font-weight: 900; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--muted); } /* horizontal, scroll-snapped row of vendor cards */ .vendor-carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; /* snap the nearest card into view */ -webkit-overflow-scrolling: touch; padding: 0.4rem 1.3rem 1.1rem; /* inline padding = the parent's padding */ scroll-padding-left: 1.3rem; /* align a snapped card to that same edge */ scrollbar-width: none; } .vendor-carousel::-webkit-scrollbar { display: none; } .vendor-card { flex: 0 0 75%; max-width: 300px; /* ~75% of the view (after padding), capped at 300px */ scroll-snap-align: start; scroll-snap-stop: always; /* grab the closest card, don't fly past it */ aspect-ratio: 4 / 5; background: var(--card); border: 3px solid var(--edge); border-radius: 1.3rem; box-shadow: 0 5px 0 var(--edge); padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.4rem; text-align: left; transition: transform 90ms ease; height: 150px; } .vendor-card:hover { transform: scale(1.02); } .vendor-card:active { transform: scale(0.98); } /* a lone vendor fills the full width (after the parent's padding) */ .vendor-carousel.single .vendor-card { flex-basis: 100%; max-width: none; } .vc-name { font-weight: 900; font-size: 1.5rem; line-height: 1.12; color: var(--ink); } .vc-points { display: flex; align-items: baseline; gap: 0.3rem; } /* points sit below the name */ .vc-num { font-size: 3.4rem; font-weight: 900; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; } .vc-points small { font-size: 1rem; font-weight: 700; color: var(--muted); } /* big red sign-out (now lives on the Account tab) */ .signout-big { width: 100%; background: var(--danger); color: #fff; font-size: 1.2rem; font-weight: 900; padding: 1.15rem; border-radius: 0.9rem; box-shadow: 0 4px 0 var(--danger-press); transition: transform 80ms ease, box-shadow 80ms ease; } .signout-big:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--danger-press); } /* ---------- signed-in: vendor (earn code + rewards + redeem) ---------- */ #vendor { min-height: 100%; } .points-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.3rem; padding-top: calc(1rem + env(safe-area-inset-top)); background: var(--navy); color: #fff; border-radius: 0 0 1.2rem 1.2rem; } .pb-back { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.5rem; font-weight: 900; line-height: 1; display: flex; align-items: center; justify-content: center; } .pb-back:active { background: rgba(255, 255, 255, 0.24); } .pb-vendor { flex: 1; min-width: 0; font-weight: 900; letter-spacing: 0.1em; font-size: 1rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-points { display: flex; align-items: baseline; gap: 0.3rem; flex-shrink: 0; transform-origin: right center; } .pb-points span { font-size: 2.6rem; font-weight: 900; line-height: 1; transition: color 200ms ease; } .pb-points small { font-size: 1rem; font-weight: 700; color: var(--sky); } /* live ticker feedback: a bump + a color flash on the number */ .pb-points.is-bump { animation: pbBump 480ms cubic-bezier(0.22, 1, 0.36, 1); } .pb-points.gain span { color: #7be0a6; } /* light green reads on the navy bar */ .pb-points.lose span { color: #f0b968; } /* light amber */ @keyframes pbBump { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pb-points.is-bump { animation: none; } } /* pill that pops in near the top when points are awarded or an item is redeemed */ .points-toast { position: fixed; left: 50%; top: calc(4.4rem + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-10px); z-index: 45; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.65rem 1.15rem; border-radius: 999px; font-weight: 900; font-size: 1.05rem; color: #fff; white-space: nowrap; box-shadow: 0 8px 20px rgba(16, 29, 51, 0.28); opacity: 0; pointer-events: none; transition: opacity 260ms ease, transform 260ms ease; } .points-toast[hidden] { display: none; } .points-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .points-toast.gain { background: var(--success); } .points-toast.lose { background: var(--warn); } .app-main { padding: 1.3rem 1.3rem 3rem; } .my-code { width: 100%; text-align: center; background: var(--card); border: 3px solid var(--edge); border-radius: 1.1rem; padding: 1.3rem; box-shadow: 0 4px 0 var(--edge); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .mc-label { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.16em; color: var(--muted); } .mc-value { /* Sized so all 6 characters fit on one line without clipping, even on a narrow phone (the previous size overflowed and cut off the last char). */ font-size: clamp(2rem, 11.5vw, 3.4rem); font-weight: 900; line-height: 1.05; letter-spacing: 0.08em; text-indent: 0.08em; /* keep glyphs visually centered */ white-space: nowrap; max-width: 100%; color: var(--brand); font-variant-numeric: tabular-nums; } .mc-sub { font-size: 0.92rem; font-weight: 500; color: var(--muted); } .app-sub { margin: 1.6rem 0 0.8rem; font-weight: 900; letter-spacing: 0.16em; font-size: 0.8rem; color: var(--muted); } .empty-state { color: var(--muted); font-weight: 500; padding: 1.5rem 0; } /* ---------- item cards ---------- */ .items { display: flex; flex-direction: column; gap: 0.9rem; } .item-card { width: 100%; text-align: left; background: var(--card); border: 3px solid var(--edge); border-radius: 1.1rem; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; transition: transform 80ms ease; } .item-card:active { transform: scale(0.985); } .ic-emoji { font-size: 2rem; width: 3.4rem; height: 3.4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--sky); border-radius: 0.9rem; } .ic-body { flex: 1; min-width: 0; } .ic-title { font-weight: 900; font-size: 1.15rem; line-height: 1.15; color: var(--ink)} .ic-status { font-size: 0.9rem; font-weight: 700; color: var(--success); margin-top: 0.2rem; } .ic-cost { font-weight: 900; color: var(--brand); white-space: nowrap; font-size: 1.05rem; } .item-card.locked { opacity: 0.55; } .item-card.locked .ic-emoji { background: #e3e7ee; filter: grayscale(1); } .item-card.locked .ic-status { color: var(--muted); font-weight: 500; } .item-card.locked .ic-cost { color: var(--muted); } /* ---------- overlays / modals ---------- */ .overlay { position: fixed; inset: 0; z-index: 40; background: rgba(16, 29, 51, 0); display: flex; align-items: flex-end; justify-content: center; transition: background 300ms ease; /* backdrop fades with the sheet */ } .overlay[hidden] { display: none; } .overlay.is-open { background: rgba(16, 29, 51, 0.55); } /* Bottom sheet: full width, rounded top, slides up from the bottom edge. */ .detail-card { position: relative; width: 100%; background: var(--card); border-top: 3px solid var(--edge); border-radius: 1.5rem 1.5rem 0 0; padding: 2.2rem 1.5rem calc(1.7rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; min-height: 42vh; max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1); } .overlay.is-open .detail-card { transform: translateY(0); } .detail-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2.5px solid var(--edge); background: var(--paper); font-size: 1.1rem; font-weight: 900; } .detail-emoji { font-size: 3.4rem; } .detail-title { font-size: 1.7rem; font-weight: 900; line-height: 1.1; } .detail-cost { font-weight: 900; color: var(--brand); font-size: 1.15rem; } .detail-desc { color: var(--muted); font-weight: 500; line-height: 1.5; } .detail-status { font-weight: 700; font-size: 1rem; min-height: 1.3em; } .detail-status.ok { color: var(--success); } .detail-status.locked { color: var(--muted); } .btn-redeem { margin-top: 0.6rem; width: 100%; background: var(--navy); color: #fff; font-size: 1.3rem; font-weight: 900; padding: 1.1rem; border-radius: 0.9rem; } .btn-redeem:active { background: var(--navy-press); } .btn-redeem:disabled { opacity: 0.4; } /* Redemption code shown in place of the Redeem button: code + timer, side by side. */ .item-code { margin-top: 0.6rem; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; } .item-code-value { font-size: clamp(2.2rem, 12vw, 3.2rem); font-weight: 900; letter-spacing: 0.12em; text-indent: 0.12em; color: var(--brand); font-variant-numeric: tabular-nums; } .item-code-timer { font-size: 1.1rem; font-weight: 800; color: var(--navy); background: var(--sky); border: 2px solid var(--sky-line); padding: 0.4rem 0.85rem; border-radius: 999px; font-variant-numeric: tabular-nums; } /* ===================================================== Signed-in app shell: sliding tabs + bottom nav ===================================================== */ #app { margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); } /* the three tab pages sit in one row and slide as a unit under the viewport */ .tab-viewport { flex: 1; overflow: hidden; position: relative; } .tab-track { display: flex; height: 100%; transform: translateX(calc(var(--tab, 0) * -100%)); transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } @media (prefers-reduced-motion: reduce) { .tab-track { transition: none; } } /* each page is exactly one viewport wide and scrolls on its own */ .tab-page { flex: 0 0 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; } /* Sliding between the carousel (#home) and a vendor's redeem screen (#vendor): drilling in slides them leftward, backing out slides them rightward. JS drives the direction/transforms; these rules just stack the two panes for the slide. */ #tab-home.home-sliding { overflow: hidden; } #tab-home.home-sliding > #home, #tab-home.home-sliding > #vendor { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } #tab-home.home-sliding-run > #home, #tab-home.home-sliding-run > #vendor { transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* ---------- bottom nav ---------- */ .tabbar { flex-shrink: 0; display: flex; background: var(--card); border-top: 2px solid var(--hairline); padding-bottom: env(safe-area-inset-bottom); z-index: 30; } .tab-btn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; padding: 0.62rem 0 0.55rem; color: var(--muted); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.02em; transition: color 160ms ease, transform 120ms ease; } .tab-btn svg { width: 25px; height: 25px; display: block; } .tab-btn:active { transform: scale(0.92); } .tab-btn.is-active { color: var(--brand); } /* little tab indicator riding the top edge of the bar */ .tab-btn.is-active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2.2rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); } /* ---------- history + account pages ---------- */ #history, #account { min-height: 100%; display: flex; flex-direction: column; padding: calc(1.6rem + env(safe-area-inset-top)) 1.3rem 1.6rem; } .page-head { margin-bottom: 1.2rem; } .page-title { font-size: 1.9rem; font-weight: 900; letter-spacing: -0.01em; } .page-sub { margin-top: 0.2rem; color: var(--muted); font-weight: 600; font-size: 0.95rem; } .history-list { display: flex; flex-direction: column; gap: 0.55rem; } .history-day { margin: 1.15rem 0 0.25rem; font-weight: 900; letter-spacing: 0.12em; font-size: 0.72rem; text-transform: uppercase; color: var(--muted); } .history-day:first-child { margin-top: 0; } .history-row { display: flex; align-items: center; gap: 0.85rem; background: var(--card); border: 2.5px solid var(--edge); border-radius: 1rem; padding: 0.8rem 1rem; box-shadow: 0 3px 0 var(--edge); } .hr-icon { flex-shrink: 0; width: 2.7rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; border-radius: 0.75rem; background: var(--sky); } .history-row.redeem .hr-icon { background: #ffe6c2; } .hr-body { flex: 1; min-width: 0; } .hr-title { display: block; font-weight: 900; font-size: 1rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hr-sub { display: block; margin-top: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); } .hr-points { flex-shrink: 0; font-weight: 900; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .hr-points small { font-size: 0.62em; font-weight: 800; margin-left: 0.15em; } .history-row.earn .hr-points { color: var(--success); } .history-row.redeem .hr-points { color: var(--warn); } /* ---------- account ---------- */ .account-body { flex: 1; display: flex; flex-direction: column; gap: 1rem; } /* profile card: avatar + email */ .account-card { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 3px solid var(--edge); border-radius: 1.1rem; padding: 1rem 1.15rem; box-shadow: 0 4px 0 var(--edge); } .account-avatar-wrap { flex-shrink: 0; width: 3.2rem; height: 3.2rem; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--navy); } .account-avatar { width: 100%; height: 100%; object-fit: cover; display: block; } .account-avatar-fallback { color: #fff; font-weight: 900; font-size: 1.4rem; line-height: 1; } .account-id { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; } .account-name { font-weight: 900; font-size: 1.05rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .account-email { font-weight: 600; font-size: 0.9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* section heading (shared look with the history day dividers) */ .account-section-title { margin: 0.6rem 0 -0.2rem; font-weight: 900; letter-spacing: 0.14em; font-size: 0.72rem; text-transform: uppercase; color: var(--muted); } .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--card); border: 3px solid var(--edge); border-radius: 1.1rem; padding: 1rem 1.15rem; box-shadow: 0 4px 0 var(--edge); } .setting-label { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .setting-name { font-weight: 900; font-size: 1.05rem; } .setting-desc { font-weight: 600; font-size: 0.85rem; color: var(--muted); } /* toggle switch */ .switch { flex-shrink: 0; position: relative; width: 3.4rem; height: 2rem; border-radius: 999px; background: var(--sky-line); border: 2.5px solid var(--edge); transition: background 180ms ease; } .switch-knob { position: absolute; top: 50%; left: 0.18rem; transform: translateY(-50%); width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: left 200ms cubic-bezier(0.22, 1, 0.36, 1); } .switch[aria-checked="true"] { background: var(--success); } .switch[aria-checked="true"] .switch-knob { left: calc(100% - 1.35rem - 0.18rem); } /* your-data action buttons (export / delete) */ .data-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; font-size: 1rem; background: var(--card); border: 3px solid var(--edge); border-radius: 1.1rem; padding: 1rem 1.15rem; box-shadow: 0 4px 0 var(--edge); transition: transform 60ms ease, box-shadow 60ms ease; } .data-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); } .data-btn:disabled { opacity: 0.55; } .data-btn-label { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .data-btn-name { font-weight: 900; font-size: 1.05rem; } .data-btn-desc { font-weight: 600; font-size: 0.85rem; color: var(--muted); } .data-btn-chevron { flex-shrink: 0; font-weight: 900; font-size: 1.2rem; color: var(--muted); } .data-btn.danger .data-btn-name, .data-btn.danger .data-btn-chevron { color: var(--danger); } /* delete-confirm sheet: reuse .btn-redeem, tinted danger, + a text Cancel */ .btn-redeem.danger { background: var(--danger); } .btn-redeem.danger:active { background: var(--danger-press); } .detail-textbtn { margin-top: 0.1rem; color: var(--muted); font-weight: 800; font-size: 1rem; padding: 0.6rem 1rem; } #account-signout { margin-top: auto; } /* sign-out hugs the bottom of the tab */ /* ---------- responsive ---------- */ @media (max-width: 760px) { .hero { grid-template-columns: 1fr; padding-top: 1.5rem; } .hero-card { margin-top: 1.5rem; } .steps { grid-template-columns: 1fr; } }