/* mc-gamify.css UI-only "gamified" layer that sits on top of mc-theme.css. No JS required. No app logic touched. */ /* --------- Theme Tokens --------- */ :root{ --mc-green:#22c55e; --mc-greenDark:#16a34a; --mc-ink:#062436; --mc-bg:#f5fdf8; --mc-card:#ffffff; /* Gamify accents */ --mc-gold:#fbbf24; --mc-sky:#38bdf8; --mc-violet:#a78bfa; --mc-rose:#fb7185; --mc-border: rgba(2,23,34,.10); --mc-shadow: 0 10px 30px rgba(2,23,34,.08); --mc-shadow2: 0 16px 40px rgba(2,23,34,.10); --mc-radius: 18px; /* Motion */ --mc-motion: 18s; } /* Night Mode – Calm (auto via attribute, or user OS pref) */ :root[data-theme="night"], @media (prefers-color-scheme: dark){ :root:not([data-theme="day"]) { --mc-bg:#07151c; --mc-card:#081a22; --mc-ink:#e7f6ff; --mc-border: rgba(231,246,255,.10); --mc-shadow: 0 10px 30px rgba(0,0,0,.35); --mc-shadow2: 0 16px 40px rgba(0,0,0,.45); } } /* Optional seasonal themes (set ) */ :root[data-season="mh-month"]{ --mc-gold:#f97316; /* warm orange */ --mc-violet:#fb7185; /* pink */ } :root[data-season="holiday"]{ --mc-gold:#fbbf24; --mc-rose:#ef4444; } /* --------- Base Layout Helpers --------- */ .mc-page{ min-height:100vh; background: var(--mc-bg); color: var(--mc-ink); } .mc-wrap{ max-width: 980px; margin: 0 auto; padding: 16px 16px 42px; } .mc-hero{ margin: 14px auto 12px; padding: 16px 16px; border: 1px solid var(--mc-border); background: linear-gradient(145deg, rgba(34,197,94,.10), rgba(56,189,248,.10)); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); text-align:left; } .mc-hero h1{ margin: 0 0 6px 0; font-size: 1.25rem; line-height:1.3; } .mc-hero p{ margin: 0; opacity: .92; } /* “XP / Level” bar – purely cosmetic */ .mc-xp{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .mc-pill{ display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.65); color: var(--mc-ink); font-weight: 650; } @media (prefers-color-scheme: dark){ :root:not([data-theme="day"]) .mc-pill{ background: rgba(255,255,255,.06); } } .mc-bar{ flex: 1 1 240px; min-width: 240px; height: 12px; border-radius: 999px; border: 1px solid var(--mc-border); background: rgba(2,23,34,.06); overflow:hidden; } @media (prefers-color-scheme: dark){ :root:not([data-theme="day"]) .mc-bar{ background: rgba(231,246,255,.05); } } .mc-bar > span{ display:block; height:100%; width: 62%; background: linear-gradient(90deg, var(--mc-green), var(--mc-sky), var(--mc-violet)); border-radius:999px; } /* --------- Cards & Buttons (match your vibe) --------- */ .mc-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; } .mc-card{ border: 1px solid var(--mc-border); background: var(--mc-card); border-radius: var(--mc-radius); padding: 16px; box-shadow: var(--mc-shadow); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; text-decoration:none; color: inherit; position: relative; overflow:hidden; } .mc-card:hover{ transform: translateY(-2px); box-shadow: var(--mc-shadow2); border-color: rgba(34,197,94,.35); } .mc-card .mc-big{ font-size: 30px; line-height:1; margin-bottom: 8px; } .mc-card h3{ margin: 0 0 6px; font-size: 1.05rem; } .mc-card p{ margin: 0; opacity:.85; font-size:.95rem; } /* “Achievement sparkle” corner (cosmetic) */ .mc-card::after{ content:""; position:absolute; top:-60px; right:-60px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(251,191,36,.30), transparent 60%); pointer-events:none; } /* Buttons */ .mc-btnrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; } .mc-btn{ appearance:none; border:0; cursor:pointer; padding: 12px 14px; border-radius: 14px; font-weight: 750; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; } .mc-btn.primary{ background: var(--mc-green); color:#fff; box-shadow: 0 10px 28px rgba(34,197,94,.28); } .mc-btn.primary:hover{ background: var(--mc-greenDark); } .mc-btn.ghost{ background: transparent; border:1px solid var(--mc-border); color: var(--mc-ink); } .mc-btn.ghost:hover{ border-color: rgba(34,197,94,.45); } /* --------- Counsellor Avatar Frames --------- */ .mc-profile{ display:flex; gap:12px; align-items:flex-start; } .mc-avatar{ width: 54px; height: 54px; border-radius: 16px; display:grid; place-items:center; font-size: 24px; background: rgba(34,197,94,.10); border: 2px solid rgba(34,197,94,.35); position:relative; box-shadow: 0 8px 22px rgba(2,23,34,.10); } .mc-avatar.frame-gold{ border-color: rgba(251,191,36,.80); box-shadow: 0 10px 26px rgba(251,191,36,.18); } .mc-avatar.frame-sky{ border-color: rgba(56,189,248,.75); box-shadow: 0 10px 26px rgba(56,189,248,.16); } .mc-avatar.frame-violet{ border-color: rgba(167,139,250,.75); box-shadow: 0 10px 26px rgba(167,139,250,.16); } /* Badge chips */ .mc-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .mc-chip{ font-size: .82rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--mc-border); background: rgba(255,255,255,.65); } @media (prefers-color-scheme: dark){ :root:not([data-theme="day"]) .mc-chip{ background: rgba(255,255,255,.06); } } .mc-chip.live{ border-color: rgba(34,197,94,.50); } .mc-chip.star{ border-color: rgba(251,191,36,.50); } /* --------- Subtle Background Motion (CSS only) --------- */ .mc-motion{ position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.55; } .mc-bubble{ position:absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(16px); background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.22), transparent 60%); animation: floaty var(--mc-motion) ease-in-out infinite; } .mc-bubble.b2{ width: 380px; height: 380px; background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.18), transparent 60%); animation-duration: calc(var(--mc-motion) + 6s); } .mc-bubble.b3{ width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, rgba(167,139,250,.18), transparent 60%); animation-duration: calc(var(--mc-motion) + 10s); } @keyframes floaty{ 0%,100%{ transform: translate3d(-10px,-8px,0) scale(1); } 50%{ transform: translate3d(14px,12px,0) scale(1.03); } } /* --------- Footer --------- */ .mc-footer{ margin-top: 18px; opacity:.92; font-size:.95rem; text-align:center; } .mc-footer a{ color: inherit; }