/* ===================================================================== SPARKLE — theme.css · Fresh Geometry design system · C270 AY2026S1 --------------------------------------------------------------------- One shared stylesheet so all six features look like one app. HOW TO USE (every teammate, in your Flask template ): Then use the tokens (var(--color-...)) and base classes (.btn, .card, .pill, .input) below. Do NOT hard-code hex values in your feature — always reference a token so the whole app stays consistent. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap'); :root{ /* ---- Brand ---- */ --color-marine:#0B4F58; /* dark surfaces, footers, depth */ --color-primary:#0C7D80; /* buttons, links, key actions (AA/white)*/ --color-primary-hover:#096467; /* hover / active state */ --color-aqua:#14B8A6; /* bright accent, focus ring, gradients */ --color-mint:#7FE0CE; /* soft brand highlight */ --color-foam:#DFF6F1; /* tinted brand background */ --color-leaf:#34C77B; /* eco / success */ --color-leaf-soft:#E3F6EC; --color-sunbeam:#FFC95C; /* ratings, highlights, warmth */ --color-coral:#FF7A66; /* alerts & emphasis — use sparingly */ /* ---- Neutrals ---- */ --color-ink:#103A40; /* primary text & headings */ --color-slate:#4F6B70; /* secondary text */ --color-steam:#8FA6AA; /* muted / placeholder */ --color-mist:#DDE8EA; /* borders & dividers */ --color-cloud:#F1F7F8; /* page / app background */ --color-surface:#FFFFFF; /* cards & surfaces */ /* ---- Semantic ---- */ --color-success:#2FB36B; --color-warning:#F5A623; --color-error:#E5544B; --color-info:var(--color-aqua); /* ---- Type ---- */ --font-head:'Outfit', system-ui, sans-serif; --font-body:'Work Sans', system-ui, sans-serif; --text-display:3rem; /* 48px */ --text-h1:2.25rem; /* 36px */ --text-h2:1.75rem; /* 28px */ --text-h3:1.375rem; /* 22px */ --text-body:1rem; /* 16px */ --text-small:0.875rem; /* 14px */ --text-caption:0.75rem; /* 12px */ /* ---- Spacing (4px grid) ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px; /* ---- Radius ---- */ --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px; /* ---- Shadow (soft & diffuse) ---- */ --shadow-sm:0 2px 10px rgba(16,58,64,.06); --shadow-md:0 8px 22px rgba(16,58,64,.08); --shadow-btn:0 6px 16px rgba(12,125,128,.28); } /* ---------- Base ---------- */ *{box-sizing:border-box} body{ margin:0; font-family:var(--font-body); font-size:var(--text-body); line-height:1.6; color:var(--color-ink); background:var(--color-cloud); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--color-ink);margin:0 0 var(--space-3)} h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} a{color:var(--color-primary);text-decoration:none} a:hover{color:var(--color-primary-hover);text-decoration:underline} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:var(--space-2); font-family:var(--font-head);font-weight:700;font-size:.9375rem; border:none;border-radius:var(--radius-md); padding:13px 24px;cursor:pointer;transition:.15s ease; } .btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-btn)} .btn-primary:hover{background:var(--color-primary-hover)} .btn-accent{background:var(--color-sunbeam);color:#5a3d00} .btn-accent:hover{filter:brightness(.96)} .btn-ghost{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-mist)} .btn-ghost:hover{border-color:var(--color-primary);background:var(--color-foam)} /* ---------- Cards ---------- */ .card{ background:var(--color-surface); border:1px solid var(--color-mist); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm); } .card-raised{box-shadow:var(--shadow-md);border:none} /* ---------- Category pills ---------- */ .pill{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-body);font-weight:600;font-size:var(--text-small); padding:7px 15px;border-radius:var(--radius-pill); background:var(--color-foam);color:var(--color-primary); } .pill-eco{background:var(--color-leaf-soft);color:#1f8a52} /* ---------- Forms ---------- */ .field-label{display:block;font-family:var(--font-head);font-weight:600;font-size:var(--text-small);margin-bottom:6px;color:var(--color-ink)} .input{ width:100%;font-family:var(--font-body);font-size:var(--text-small); background:var(--color-cloud);color:var(--color-ink); border:1.5px solid var(--color-mist);border-radius:var(--radius-md); padding:13px 16px;transition:.15s ease; } .input::placeholder{color:var(--color-steam)} .input:focus{outline:none;border-color:var(--color-aqua);background:#fff;box-shadow:0 0 0 4px rgba(20,184,166,.16)} /* ---------- Status / toasts ---------- */ .toast{ display:flex;gap:12px;align-items:flex-start; background:#fff;border:1px solid var(--color-mist); border-left:4px solid var(--color-leaf); border-radius:var(--radius-md);padding:15px 17px;box-shadow:var(--shadow-sm); } .toast-warning{border-left-color:var(--color-sunbeam)} .toast-error{border-left-color:var(--color-error)} /* ---------- Star rating ---------- */ .stars{color:var(--color-sunbeam);letter-spacing:1px} /* ---------- Helpers ---------- */ .text-muted{color:var(--color-slate)} .bg-app{background:var(--color-cloud)} .container{max-width:1100px;margin:0 auto;padding:0 var(--space-6)} /* ---------- App layout (header / nav / footer) ---------- */ .site-header{display:flex;align-items:center;gap:24px;padding:14px 32px;background:#fff;border-bottom:1px solid var(--color-mist)} .brand{font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--color-ink);text-decoration:none} .brand .dot{color:var(--color-sunbeam)} .site-nav{display:flex;gap:20px;margin-left:8px;flex-wrap:wrap} .site-nav a{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--color-slate);text-decoration:none} .site-nav a:hover{color:var(--color-primary);text-decoration:none} .site-actions{margin-left:auto;display:flex;gap:10px;align-items:center} .site-footer{text-align:center;padding:28px;color:var(--color-steam);font-family:var(--font-head);font-weight:600;font-size:14px;border-top:1px solid var(--color-mist);margin-top:40px} .site-footer .dot{color:var(--color-sunbeam)} /* ---------- User menu: avatar chip + dropdown ---------- */ .user-menu{position:relative} .user-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--color-mist);border-radius:var(--radius-pill);padding:6px 14px 6px 6px;cursor:pointer;transition:.15s ease} .user-chip:hover{border-color:var(--color-primary)} .avatar{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--color-primary);color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px} .user-name{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--color-ink)} .chev{color:var(--color-steam);font-size:12px} .user-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--color-mist);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:190px;padding:6px;display:none;z-index:50} .user-dropdown.open{display:block} .dropdown-item{display:block;width:100%;text-align:left;background:none;border:none;font-family:var(--font-body);font-size:14px;color:var(--color-ink);padding:11px 12px;border-radius:8px;cursor:pointer;text-decoration:none} .dropdown-item:hover{background:var(--color-foam);text-decoration:none} .dropdown-item.danger{color:var(--color-error)} .dropdown-item.danger:hover{background:#FDECEA} /* ---------- Modal (confirmation dialog) ---------- */ .modal-overlay{position:fixed;inset:0;background:rgba(16,58,64,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px} .modal-overlay.open{display:flex} .modal{background:#fff;border-radius:16px;padding:28px 30px;max-width:400px;width:100%;box-shadow:var(--shadow-md)} .modal h3{margin-bottom:8px} .modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px} /* ---------- Centered single-column page ---------- */ .page-narrow{max-width:520px;margin:0 auto} .page-narrow h1{text-align:center} /* ---------- Notification bell ---------- */ .bell-menu{position:relative} .bell-btn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--color-mist);cursor:pointer;color:var(--color-slate);transition:.15s ease} .bell-btn:hover{border-color:var(--color-primary)} .bell-btn svg{width:20px;height:20px;stroke:currentColor} .bell-dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--color-coral);border:2px solid #fff;display:none} .bell-dot.show{display:block} .bell-dropdown{position:absolute;right:0;top:calc(100% + 8px);width:300px;background:#fff;border:1px solid var(--color-mist);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:8px;display:none;z-index:50} .bell-dropdown.open{display:block} .bell-head{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--color-ink);padding:8px 10px 10px} .bell-empty{padding:22px 10px;text-align:center;color:var(--color-steam);font-size:14px} .bell-item{display:block;padding:11px 10px;border-radius:8px;text-decoration:none;color:var(--color-ink);font-size:14px;line-height:1.4} .bell-item:hover{background:var(--color-foam);text-decoration:none} .bell-seeall{display:block;text-align:center;padding:10px;margin-top:4px;border-top:1px solid var(--color-mist);color:var(--color-primary);font-family:var(--font-head);font-weight:600;font-size:14px;text-decoration:none} .bell-seeall:hover{text-decoration:none}