/* ========================================================================== LibNext Science Quiz — stylesheet Design goals: scientific, youthful, clean, premium. Matures automatically for senior classes via the data-stage attribute on . ========================================================================== */ :root { --bg: #f5f7fb; --bg-deep: #eef1f8; --surface: #ffffff; --surface-2: #f8fafc; --ink: #0f1b2d; --ink-soft: #4a5a72; --ink-faint: #8494ab; --line: #e3e8f0; --brand: #1f6feb; --brand-deep: #14449b; --brand-soft: #e8f0ff; --accent: #6a5ae0; --good: #17a673; --good-soft: #e6f7f0; --bad: #e05252; --bad-soft: #fdeded; --warn: #e8a33d; --radius-lg: 22px; --radius: 16px; --radius-sm: 11px; --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06), 0 2px 8px rgba(15, 27, 45, .05); --shadow: 0 4px 12px rgba(15, 27, 45, .07), 0 12px 32px rgba(15, 27, 45, .07); --shadow-lg: 0 8px 24px rgba(15, 27, 45, .10), 0 24px 60px rgba(15, 27, 45, .11); --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --card-title: 1.35rem; --hero-emoji: 1em; --speed: .22s; } /* Primary (Classes 1–5): warmer, rounder, bigger. */ body[data-stage="primary"] { --bg: #fff8ef; --bg-deep: #ffeedd; --brand: #f2792b; --brand-deep: #c85b16; --brand-soft: #ffeadb; --accent: #33b1a0; --radius-lg: 30px; --radius: 22px; --radius-sm: 15px; --card-title: 1.55rem; } body[data-stage="middle"] { --bg: #f2fbfa; --bg-deep: #e3f5f3; --brand: #0f9d8f; --brand-deep: #0a7268; --brand-soft: #dbf5f1; --accent: #4a7fe0; --radius-lg: 24px; } body[data-stage="secondary"] { --bg: #f4f7fc; --bg-deep: #e9eefa; --brand: #2563d6; --brand-deep: #17429b; --brand-soft: #e4edff; --accent: #7a4fd6; } /* Senior (11–12): deeper, more restrained, exam-serious but not dull. */ body[data-stage="senior"] { --bg: #f4f5f9; --bg-deep: #e8eaf3; --brand: #3b3f8f; --brand-deep: #262a6b; --brand-soft: #e6e7f5; --accent: #0f7d8c; --radius-lg: 16px; --radius: 12px; --radius-sm: 9px; --card-title: 1.2rem; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: radial-gradient(1100px 520px at 12% -8%, var(--brand-soft) 0%, transparent 60%), radial-gradient(900px 480px at 92% 0%, var(--bg-deep) 0%, transparent 55%), var(--bg); background-attachment: fixed; min-height: 100vh; line-height: 1.55; transition: background-color var(--speed) ease; } img { max-width: 100%; display: block; } button { font-family: inherit; } .wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; } .hidden { display: none !important; } /* ---------------------------------------------------------------- header */ .site-head { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.4) blur(10px); background: rgba(255, 255, 255, .82); border-bottom: 1px solid var(--line); } .site-head .wrap { display: flex; align-items: center; gap: 1rem; min-height: 66px; padding-block: .55rem; } .brand { display: flex; align-items: center; gap: .6rem; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; } .brand-mark { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: linear-gradient(140deg, var(--brand), var(--accent)); box-shadow: var(--shadow-sm); } .brand-text strong { display: block; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.15; } .brand-text span { display: block; font-size: .74rem; color: var(--ink-faint); letter-spacing: .04em; } .head-spacer { flex: 1; } .chip-row { display: flex; align-items: center; gap: .45rem; } .chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .34rem .68rem; font-size: .8rem; font-weight: 650; color: var(--ink-soft); box-shadow: var(--shadow-sm); white-space: nowrap; } .chip b { color: var(--ink); font-weight: 800; } .chip.tappable { cursor: pointer; } .chip.tappable:hover { border-color: var(--brand); color: var(--brand); } /* ------------------------------------------------------------------ hero */ .hero { padding: 2.6rem 0 1.4rem; text-align: center; } .hero h1 { font-size: clamp(1.85rem, 5.2vw, 3rem); letter-spacing: -.035em; margin: 0 0 .35rem; line-height: 1.08; } .hero .tag { display: inline-block; font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep); background: var(--brand-soft); border-radius: 999px; padding: .3rem .8rem; margin-bottom: .9rem; } .hero p.lede { font-size: clamp(1rem, 2.4vw, 1.2rem); color: var(--ink-soft); margin: 0 auto; max-width: 44ch; } /* ---------------------------------------------------------------- search */ .search-box { margin: 1.5rem auto 0; max-width: 540px; position: relative; } .search-box input { width: 100%; font: inherit; font-size: 1rem; padding: .85rem 1rem .85rem 2.9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); outline: none; transition: box-shadow var(--speed), border-color var(--speed); } .search-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .search-box .ico { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); font-size: 1.05rem; opacity: .65; pointer-events: none; } .search-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; max-height: 60vh; overflow-y: auto; text-align: left; } .search-results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .7rem 1rem; cursor: pointer; border-bottom: 1px solid var(--line); font-size: .92rem; } .search-results button:last-child { border-bottom: 0; } .search-results button:hover { background: var(--brand-soft); } .search-results .sr-title { font-weight: 700; display: block; } .search-results .sr-sub { font-size: .8rem; color: var(--ink-faint); display: block; } .search-results .sr-empty { padding: .9rem 1rem; color: var(--ink-faint); font-size: .9rem; } /* ----------------------------------------------------------------- cards */ .stage-block { margin-top: 2.2rem; } .stage-title { display: flex; align-items: center; gap: .7rem; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .85rem; } .stage-title::after { content: ""; flex: 1; height: 1px; background: var(--line); } .stage-title em { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--ink-faint); } .grid { display: grid; gap: .9rem; } .grid-classes { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); } .grid-topics { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid-modes { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.05rem; text-align: left; cursor: pointer; transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed); position: relative; overflow: hidden; width: 100%; font: inherit; color: inherit; } .card:hover, .card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); outline: none; } .card .emoji { font-size: 1.9rem; line-height: 1; display: block; margin-bottom: .5rem; } .card h3 { margin: 0; font-size: var(--card-title); letter-spacing: -.02em; } .card p { margin: .25rem 0 0; font-size: .85rem; color: var(--ink-soft); } .card .meta { margin-top: .55rem; font-size: .75rem; color: var(--ink-faint); font-weight: 650; } .card-class { text-align: center; padding: 1.2rem .7rem; } .card-class .emoji { font-size: 2.1rem; margin-bottom: .35rem; } .card-class h3 { font-size: 1.05rem; } .card-class .meta { margin-top: .3rem; } .card-topic::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--dot, var(--brand)); } .card-topic { padding-left: 1.3rem; } /* ------------------------------------------------------------------- nav */ .crumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: 1.4rem 0 .2rem; font-size: .88rem; color: var(--ink-faint); } .crumbs button { background: none; border: 0; color: var(--brand-deep); font-weight: 700; cursor: pointer; padding: 0; font-size: inherit; } .crumbs button:hover { text-decoration: underline; } .crumbs .sep { opacity: .5; } .section-head { margin: .6rem 0 1.2rem; } .section-head h2 { margin: 0; font-size: clamp(1.4rem, 3.6vw, 2rem); letter-spacing: -.03em; } .section-head p { margin: .3rem 0 0; color: var(--ink-soft); } /* ----------------------------------------------------------------- quiz */ .quiz-shell { max-width: 760px; margin-inline: auto; padding-bottom: 3rem; } .qbar { display: flex; align-items: center; gap: .8rem; padding: 1.2rem 0 .8rem; } .qbar .count { font-size: .82rem; font-weight: 750; color: var(--ink-soft); white-space: nowrap; } .progress { flex: 1; height: 9px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; } .progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--accent)); transition: width .35s cubic-bezier(.4,0,.2,1); } .btn-quit { background: none; border: 0; color: var(--ink-faint); font-size: .82rem; cursor: pointer; font-weight: 650; } .btn-quit:hover { color: var(--bad); } .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.1rem, 3vw, 1.8rem); animation: rise .3s cubic-bezier(.2,.7,.3,1); } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .qtags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; } .pill { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); } .pill.easy { background: #e7f7ef; border-color: #bde8d3; color: #15784f; } .pill.medium { background: #fff4e0; border-color: #f6ddb2; color: #96650f; } .pill.hard { background: #fdeaea; border-color: #f7c6c6; color: #ab3232; } .pill.challenge { background: #f0e9ff; border-color: #d9c9f9; color: #5b34b5; } .case-box { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: .85rem 1rem; margin-bottom: 1rem; font-size: .92rem; color: var(--ink-soft); } .case-box strong { color: var(--ink); } .qtext { font-size: clamp(1.08rem, 2.7vw, 1.32rem); font-weight: 700; letter-spacing: -.015em; margin: 0 0 1rem; line-height: 1.4; } .qtext .ar-line { display: block; margin-top: .5rem; font-weight: 600; font-size: .96em; } .figure { margin: 0 0 1.1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; } .figure svg { width: 100%; height: auto; max-height: 260px; display: block; } .figure img { border-radius: var(--radius-sm); margin-inline: auto; max-height: 280px; width: auto; } .figure figcaption { margin-top: .5rem; font-size: .74rem; color: var(--ink-faint); text-align: center; } .options { display: grid; gap: .6rem; } .opt { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; font: inherit; font-size: 1rem; cursor: pointer; color: inherit; transition: border-color var(--speed), background var(--speed), transform var(--speed); } .opt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); } .opt:disabled { cursor: default; } .opt .key { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: .82rem; font-weight: 800; color: var(--ink-faint); background: var(--surface-2); } .opt.correct { border-color: var(--good); background: var(--good-soft); } .opt.correct .key { background: var(--good); border-color: var(--good); color: #fff; } .opt.wrong { border-color: var(--bad); background: var(--bad-soft); } .opt.wrong .key { background: var(--bad); border-color: var(--bad); color: #fff; } .opt.dim { opacity: .55; } .feedback { margin-top: 1.1rem; animation: rise .28s cubic-bezier(.2,.7,.3,1); } .verdict { display: flex; align-items: center; gap: .5rem; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; } .verdict.ok { color: var(--good); } .verdict.no { color: var(--bad); } .explain { margin: .5rem 0 0; color: var(--ink-soft); font-size: .96rem; } .explain strong { color: var(--ink); } .note { margin-top: .85rem; border-radius: var(--radius-sm); padding: .75rem .9rem; font-size: .9rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); } .note b { color: var(--ink); } .note.fact { background: #fff8e8; border-color: #f3e0b4; } .note.link { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); } .note.link a { color: var(--brand-deep); font-weight: 750; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: 999px; padding: .8rem 1.5rem; font: inherit; font-weight: 750; font-size: 1rem; cursor: pointer; background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); transition: transform var(--speed), filter var(--speed); } .btn:hover { transform: translateY(-2px); filter: brightness(1.06); } .btn.ghost { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); } .btn.ghost:hover { border-color: var(--brand); color: var(--brand-deep); } .btn.block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; } /* --------------------------------------------------------------- results */ .result-hero { text-align: center; padding: 1.6rem 0 .4rem; } .result-hero h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); margin: 0 0 .2rem; letter-spacing: -.03em; } .score-ring { width: 168px; height: 168px; margin: 1.1rem auto .6rem; position: relative; } .score-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; } .score-ring .val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .score-ring .val b { display: block; font-size: 2.1rem; letter-spacing: -.03em; line-height: 1; } .score-ring .val span { font-size: .82rem; color: var(--ink-faint); font-weight: 650; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; margin-top: 1rem; } .panel h3 { margin: 0 0 .7rem; font-size: 1rem; letter-spacing: -.01em; } .tally { display: flex; gap: 1.4rem; font-weight: 700; } .tally .ok { color: var(--good); } .tally .no { color: var(--bad); } .topic-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .93rem; } .topic-row:last-child { border-bottom: 0; } .topic-row .name { flex: 1; font-weight: 650; } .topic-row .bar { width: 90px; height: 7px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; flex: none; } .topic-row .bar i { display: block; height: 100%; background: var(--good); } .topic-row .verdict-tag { font-size: .78rem; font-weight: 750; white-space: nowrap; } .review-item { border-top: 1px solid var(--line); padding: .8rem 0; font-size: .92rem; } .review-item:first-of-type { border-top: 0; } .review-item .q { font-weight: 700; margin-bottom: .25rem; } .review-item .a { color: var(--ink-soft); } .review-item .a .right { color: var(--good); font-weight: 700; } .review-item .a .yours { color: var(--bad); font-weight: 700; } .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .7rem; } .badge { text-align: center; padding: .85rem .5rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); } .badge.locked { opacity: .38; filter: grayscale(1); } .badge .b-ico { font-size: 1.7rem; display: block; } .badge .b-name { font-size: .74rem; font-weight: 750; margin-top: .25rem; display: block; line-height: 1.25; } .toast-wrap { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90; display: grid; gap: .5rem; width: min(360px, calc(100% - 2rem)); } .toast { background: var(--ink); color: #fff; border-radius: 14px; padding: .7rem 1rem; box-shadow: var(--shadow-lg); font-size: .9rem; font-weight: 650; display: flex; align-items: center; gap: .55rem; animation: pop .3s cubic-bezier(.2,.8,.3,1); } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } } /* ---------------------------------------------------------------- footer */ .site-foot { border-top: 1px solid var(--line); margin-top: 3rem; padding: 1.6rem 0 2.4rem; color: var(--ink-faint); font-size: .84rem; } .site-foot .wrap { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; } .site-foot a { color: var(--ink-soft); text-decoration: none; font-weight: 650; } .site-foot a:hover { color: var(--brand-deep); text-decoration: underline; } .site-foot .grow { flex: 1; } /* --------------------------------------------------------------- sources */ .sources-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .sources-table th, .sources-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; } .sources-table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .prose { max-width: 70ch; } .prose h2 { letter-spacing: -.02em; } .prose a { color: var(--brand-deep); } .loading { text-align: center; padding: 3rem 0; color: var(--ink-faint); font-weight: 650; } .spinner { width: 34px; height: 34px; border-radius: 50%; margin: 0 auto .8rem; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Inside an embed on libnext.in the surrounding page supplies the branding, so the quiz drops its own footer and sits flush to the top. */ body.embedded { background-attachment: scroll; min-height: 0; } html.embedded { height: auto; } body.embedded .site-foot { display: none; } body.embedded .site-head { position: static; } body.embedded .hero { padding-top: 1.4rem; } /* Younger learners get larger, friendlier type and tap targets. */ body[data-stage="primary"] .qtext { font-size: clamp(1.25rem, 3.4vw, 1.62rem); } body[data-stage="primary"] .opt { font-size: 1.1rem; padding: 1.05rem 1.1rem; } body[data-stage="primary"] .opt .key { width: 34px; height: 34px; font-size: .9rem; } body[data-stage="primary"] .explain { font-size: 1.02rem; } body[data-stage="primary"] .card-class .emoji { font-size: 2.5rem; } body[data-stage="senior"] .qtags .pill { font-size: .67rem; } @media (max-width: 560px) { .grid-classes { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .hero { padding-top: 1.8rem; } .chip-row .chip.hide-sm { display: none; } .btn { padding: .75rem 1.15rem; } .btn-row .btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }