/* ============================================================ main.css — Ujian Seru SKI Tema warna berubah lewat [data-theme] di ============================================================ */ /* ---------- TOKEN TEMA ---------- */ :root { --radius: 22px; --shadow: 0 10px 30px rgba(0, 0, 0, .12); --shadow-sm: 0 4px 14px rgba(0, 0, 0, .1); --font-head: 'Baloo 2', system-ui, sans-serif; --font-body: 'Fredoka', system-ui, sans-serif; } /* Cinnamoroll — biru langit lembut */ body[data-theme="cinnamoroll"] { --c-bg1: #d9f0ff; --c-bg2: #fff3fb; --c-primary: #5cb3ff; --c-primary-dark: #2f8fe0; --c-accent: #ffb3d9; --c-ink: #2a4a6b; --c-card: #ffffff; --c-soft: #eaf6ff; } /* Pochacco — putih & kuning ceria */ body[data-theme="pochacco"] { --c-bg1: #fff6cc; --c-bg2: #eafaff; --c-primary: #ffcf33; --c-primary-dark: #e6a700; --c-accent: #6fd0e8; --c-ink: #5a4a17; --c-card: #ffffff; --c-soft: #fffae0; } /* Kuromi — ungu & hitam manis */ body[data-theme="kuromi"] { --c-bg1: #efe3ff; --c-bg2: #ffe3f3; --c-primary: #9b5de5; --c-primary-dark: #6f3bbf; --c-accent: #ff7ec2; --c-ink: #3a2a55; --c-card: #fffafd; --c-soft: #f4e9ff; } /* Keroppi — hijau segar */ body[data-theme="keroppi"] { --c-bg1: #d7f7d2; --c-bg2: #eafff5; --c-primary: #4fc04f; --c-primary-dark: #2f9b2f; --c-accent: #ffe066; --c-ink: #1f5a2a; --c-card: #ffffff; --c-soft: #e6fbe2; } /* ---------- DASAR ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--c-ink); background: linear-gradient(160deg, var(--c-bg1), var(--c-bg2)); min-height: 100vh; transition: background .5s ease; overflow-x: hidden; } .app { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 20px 16px 60px; } h1, h2, h3, .title { font-family: var(--font-head); } /* ---------- BACKGROUND DECOR ---------- */ .bg-decor { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .bg-decor__item { position: absolute; top: -10%; opacity: .55; animation: floatDown linear infinite; } @keyframes floatDown { 0% { transform: translateY(-10vh) rotate(0deg); } 100% { transform: translateY(115vh) rotate(360deg); } } #confettiCanvas { position: fixed; inset: 0; z-index: 50; pointer-events: none; } /* ---------- SCREENS ---------- */ .screen { display: none; animation: fadeIn .45s ease; } .screen.is-active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- CARD ---------- */ .card { background: var(--c-card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 22px; margin-bottom: 18px; } /* ---------- MASCOT ---------- */ .mascot--big { font-size: 4.6rem; text-align: center; display: block; animation: bob 2.4s ease-in-out infinite; } .mascot--small { font-size: 2rem; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---------- START SCREEN ---------- */ .card--start { text-align: center; } .title { font-size: 2.4rem; font-weight: 800; margin-top: 6px; } .title span { color: var(--c-primary-dark); } .subtitle { font-size: 1.05rem; opacity: .85; margin-bottom: 22px; } .field { text-align: left; margin: 18px 0; } .field__label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 1.02rem; } .field__hint { color: #e0457a; font-size: .9rem; margin-top: 6px; min-height: 1em; } .field__input { width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 1.1rem; border: 3px solid var(--c-soft); border-radius: 16px; background: var(--c-soft); color: var(--c-ink); outline: none; transition: border-color .2s; } .field__input:focus { border-color: var(--c-primary); background: #fff; } .field__input::placeholder { color: #aab; } .shake { animation: shake .4s; } @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } /* theme + grade grids */ .theme-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .theme-pick, .grade-pick { font-family: var(--font-body); cursor: pointer; border: 3px solid var(--c-soft); background: var(--c-soft); color: var(--c-ink); border-radius: 16px; padding: 14px 10px; transition: transform .15s, border-color .2s, background .2s; display: flex; flex-direction: column; align-items: center; gap: 4px; } .theme-pick:hover, .grade-pick:hover { transform: translateY(-3px); } .theme-pick.is-selected, .grade-pick.is-selected { border-color: var(--c-primary); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 25%, transparent); } .theme-pick__emoji { font-size: 2rem; } .theme-pick__name { font-weight: 600; } .grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grade-pick { text-align: center; } .grade-pick__num { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; } .grade-pick__desc { font-size: .8rem; opacity: .75; line-height: 1.25; } /* ---------- BUTTONS ---------- */ .btn { font-family: var(--font-head); font-weight: 700; cursor: pointer; border: none; border-radius: 16px; padding: 14px 20px; font-size: 1.05rem; transition: transform .15s, box-shadow .2s, opacity .2s; } .btn:active { transform: scale(.97); } .btn--big { width: 100%; font-size: 1.2rem; padding: 16px; margin-top: 12px; } .btn--primary { background: var(--c-primary); color: #fff; box-shadow: 0 6px 0 var(--c-primary-dark); } .btn--primary:hover { transform: translateY(-2px); } .btn--primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 6px 0 var(--c-primary-dark); transform: none; } .btn--wa { background: #25d366; color: #fff; box-shadow: 0 6px 0 #1da851; width: 100%; } .btn--wa:hover { transform: translateY(-2px); } .btn--ghost { background: var(--c-soft); color: var(--c-ink); } .btn--ghost:hover { background: #fff; } /* ---------- QUIZ BAR ---------- */ .quiz-bar { display: flex; justify-content: space-between; align-items: center; background: var(--c-card); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-sm); margin-bottom: 14px; } .quiz-bar__info { display: flex; align-items: center; gap: 10px; } .quiz-bar__name { font-weight: 700; font-family: var(--font-head); } .quiz-bar__meta { font-size: .82rem; opacity: .75; } .quiz-bar__score { background: var(--c-soft); padding: 8px 14px; border-radius: 14px; font-weight: 700; font-family: var(--font-head); white-space: nowrap; } /* ---------- PROGRESS ---------- */ .progress { margin-bottom: 14px; } .progress__track { height: 14px; background: var(--c-card); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); } .progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--c-accent), var(--c-primary)); border-radius: 10px; transition: width .4s ease; } .progress__label { text-align: center; font-size: .85rem; margin-top: 6px; opacity: .8; } /* ---------- QUESTION ---------- */ .qtag { display: inline-block; background: var(--c-soft); color: var(--c-primary-dark); font-weight: 700; font-family: var(--font-head); padding: 4px 14px; border-radius: 12px; font-size: .85rem; margin-bottom: 12px; } .question { font-size: 1.3rem; line-height: 1.4; margin-bottom: 18px; } .options { display: flex; flex-direction: column; gap: 10px; } .option { display: flex; align-items: center; gap: 12px; text-align: left; font-family: var(--font-body); font-size: 1.05rem; cursor: pointer; border: 3px solid var(--c-soft); background: var(--c-soft); color: var(--c-ink); border-radius: 16px; padding: 14px; transition: transform .12s, border-color .2s, background .2s; } .option:hover:not(.is-disabled) { transform: translateX(4px); border-color: var(--c-primary); background: #fff; } .option__label { flex: 0 0 34px; height: 34px; display: grid; place-items: center; background: var(--c-primary); color: #fff; border-radius: 10px; font-weight: 700; font-family: var(--font-head); } .option__text { flex: 1; } .option.is-disabled { cursor: default; } .option.is-correct { border-color: #2bb673; background: #e7fbf0; } .option.is-correct .option__label { background: #2bb673; } .option.is-wrong { border-color: #ff5d73; background: #ffeaed; } .option.is-wrong .option__label { background: #ff5d73; } /* ---------- FEEDBACK ---------- */ .feedback { min-height: 0; margin: 14px 0 0; border-radius: 14px; transition: all .25s; overflow: hidden; } .feedback--good, .feedback--bad { padding: 14px; } .feedback--good { background: #e7fbf0; color: #1f8a5b; } .feedback--bad { background: #fff1f2; color: #c33; } .feedback small { display: block; margin-top: 6px; font-weight: 400; color: var(--c-ink); opacity: .85; } /* ---------- RESULT ---------- */ .card--result { text-align: center; } .result__headline { font-size: 1.8rem; margin: 8px 0; } .result__name { opacity: .8; margin-bottom: 16px; font-weight: 600; } .score-ring { --pct: 0%; width: 160px; height: 160px; border-radius: 50%; margin: 6px auto 20px; background: conic-gradient(var(--c-primary) var(--pct), var(--c-soft) 0); display: grid; place-items: center; transition: background 1s ease; } .score-ring__inner { width: 122px; height: 122px; border-radius: 50%; background: var(--c-card); display: grid; place-items: center; box-shadow: inset 0 2px 8px rgba(0,0,0,.06); } .score-ring__num { font-family: var(--font-head); font-weight: 800; font-size: 3rem; color: var(--c-primary-dark); line-height: 1; } .score-ring__label { font-size: .9rem; opacity: .7; } .result__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .stat { background: var(--c-soft); border-radius: 16px; padding: 14px 6px; } .stat__num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; } .stat__label { font-size: .8rem; opacity: .8; } /* ---------- REWARD ---------- */ .reward { background: var(--c-soft); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; text-align: left; } .reward__title { font-size: 1.2rem; text-align: center; margin-bottom: 8px; } .reward__main { text-align: center; font-weight: 600; margin-bottom: 4px; } .reward__sub { text-align: center; font-size: .85rem; opacity: .75; margin-bottom: 14px; } .reward__list { list-style: none; display: flex; flex-direction: column; gap: 8px; } .reward__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--c-card); padding: 12px 14px; border-radius: 14px; opacity: .55; border: 2px dashed transparent; } .reward__item.is-unlocked { opacity: 1; border-color: var(--c-primary); } .reward__cost { font-weight: 700; font-family: var(--font-head); white-space: nowrap; font-size: .9rem; } .result__actions { display: flex; flex-direction: column; gap: 10px; } /* ---------- REVIEW ---------- */ .review__title { text-align: center; margin-bottom: 14px; } .review-item { padding: 14px; border-radius: 14px; margin-bottom: 10px; border-left: 6px solid; background: var(--c-soft); } .review-item--good { border-color: #2bb673; } .review-item--bad { border-color: #ff5d73; } .review-item__q { font-weight: 600; margin-bottom: 6px; } .review-item__a, .review-item__correct { font-size: .95rem; margin-bottom: 4px; } .review-item__exp { font-size: .9rem; opacity: .85; margin-top: 6px; background: var(--c-card); padding: 8px 10px; border-radius: 10px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 420px) { .title { font-size: 2rem; } .question { font-size: 1.15rem; } .theme-grid { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .mascot--big, .bg-decor__item { animation: none; } }