/* ===================================================================== Mesquite College of Business Studies — Design System --------------------------------------------------------------------- A single shared stylesheet for index.html, catalog.html, lesson.html. Built mobile-first with CSS custom properties so the whole palette, spacing scale and typography can be retuned from one place. Includes a full dark theme (toggled via [data-theme="dark"] on ). Sections: 1. Design tokens (light + dark) 2. Reset & base elements 3. Typography & helpers 4. Layout (container, grid, section) 5. Buttons & badges 6. Site header / navigation 7. Hero 8. Cards (course, faculty, testimonial) 9. FAQ accordion 10. Footer 11. Catalog toolbar (search / filter / sort) 12. Lesson player (shell, sidebar, video, body) 13. Quiz engine 14. Certificate 15. Scroll-reveal animation & reduced-motion 16. Print styles ===================================================================== */ /* ---------- 1. DESIGN TOKENS ---------------------------------------- */ :root { /* Brand palette */ --navy: #0f2148; --navy-700: #16285a; --navy-900: #0a1733; --gold: #c9a227; --gold-soft: #e7ce78; --gold-deep: #9a7a2e; --blue: #2563eb; /* accent blue */ --blue-600: #1d4ed8; --blue-50: #eff4ff; /* Neutrals */ --white: #ffffff; --gray-50: #f7f9fc; --gray-100: #eef2f8; --gray-200: #e2e8f2; --gray-300: #cdd6e6; --gray-400: #9aa6bd; --gray-500: #64748b; --gray-700: #334155; /* Semantic surfaces (light theme defaults) */ --bg: var(--white); --bg-alt: var(--gray-50); --surface: var(--white); --surface-2: var(--gray-100); --border: var(--gray-200); --ink: #0f1729; --ink-soft: #46506a; --muted: #5b6577; --on-navy: #eaf0fb; --ok: #1f9d55; --warn: #c0392b; /* Typography */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif; --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif; /* Radius / shadow / spacing */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --shadow-sm: 0 1px 2px rgba(15,33,72,.06), 0 1px 3px rgba(15,33,72,.08); --shadow: 0 6px 18px rgba(15,33,72,.10); --shadow-lg: 0 20px 50px rgba(15,33,72,.18); --container: 1200px; --header-h: 72px; } /* Dark theme overrides */ [data-theme="dark"] { --bg: #0b1430; --bg-alt: #0e1a3a; --surface: #12203f; --surface-2: #182a4d; --border: #24345f; --ink: #eaf0fb; --ink-soft: #c2cce0; --muted: #9fb0d0; --gray-100: #182a4d; --blue-50: #16234a; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 8px 24px rgba(0,0,0,.4); --shadow-lg: 0 24px 60px rgba(0,0,0,.55); } /* ---------- 2. RESET & BASE ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } img, svg { display: block; max-width: 100%; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } /* Accessibility helpers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 200; transition: top .2s ease; } .skip-link:focus { top: 12px; text-decoration: none; } /* ---------- 3. TYPOGRAPHY ------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.18; color: var(--ink); font-weight: 700; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.5px; } h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.3px; } h3 { font-size: 1.25rem; } p { color: var(--ink-soft); } .eyebrow { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--gold-deep); } .lead { font-size: 1.12rem; color: var(--muted); } .text-center { text-align: center; } .muted { color: var(--muted); } /* ---------- 4. LAYOUT ----------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } .section { padding: clamp(48px, 8vw, 96px) 0; } .section--alt { background: var(--bg-alt); } .section__head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; } .section__head .lead { margin-top: 12px; } .grid { display: grid; gap: 24px; } /* ---------- 5. BUTTONS & BADGES ------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: .98rem; line-height: 1; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--navy-700); box-shadow: var(--shadow); } .btn--gold { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: var(--navy-900); } .btn--blue { background: var(--blue); color: #fff; } .btn--blue:hover { background: var(--blue-600); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); } .btn--ghost:hover { border-color: var(--navy); } .btn--lg { padding: 15px 30px; font-size: 1.05rem; } .btn--block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--blue-50); color: var(--blue-600); } .badge--gold { background: rgba(201,162,39,.14); color: var(--gold-deep); } .badge--green { background: rgba(31,157,85,.14); color: var(--ok); } /* ---------- 6. SITE HEADER / NAV ------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; gap: 18px; height: var(--header-h); } .nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-serif); font-weight: 700; color: var(--ink); } .nav__logo img { height: 38px; width: auto; } .nav__logo span { font-size: 1.02rem; line-height: 1.1; } .nav__logo small { display:block; font-family: var(--font-sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--gold-deep); } .nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__link { color: var(--ink-soft); padding: 9px 14px; border-radius: 8px; font-weight: 500; position: relative; } .nav__link:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; } .nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--gold); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; } .theme-toggle { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--ink); } .theme-toggle:hover { border-color: var(--navy); } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; background: var(--ink); margin: 0 auto; position: relative; transition: .25s; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } @media (max-width: 900px) { .nav-toggle { display: block; } .nav__links { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px; gap: 4px; transform: translateY(-130%); transition: transform .3s ease; box-shadow: var(--shadow); margin: 0; } .nav--open .nav__links { transform: translateY(0); } .nav__link { padding: 14px; font-size: 1.05rem; } .nav__actions { margin-left: auto; } } /* ---------- 7. HERO ------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,.18), transparent 60%), linear-gradient(180deg, var(--navy-900), var(--navy)); color: var(--on-navy); } .hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding: clamp(56px, 9vw, 110px) 0; } .hero__eyebrow { color: var(--gold-soft); } .hero h1 { color: #fff; margin-top: 14px; } .hero__sub { color: #c8d4ee; font-size: 1.16rem; margin-top: 18px; max-width: 38ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; color: #b9c6e6; font-size: .9rem; } .hero__trust strong { color: #fff; font-size: 1.3rem; font-family: var(--font-serif); display: block; } .hero__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding: 26px; backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); } .hero__card img { margin: 0 auto 14px; height: 130px; } .hero__card .badge { background: rgba(201,162,39,.2); color: var(--gold-soft); } .hero__card h3 { color: #fff; margin: 10px 0 6px; } .hero__card p { color: #c8d4ee; font-size: .95rem; } @media (max-width: 860px){ .hero__inner { grid-template-columns: 1fr; } .hero__card { order: -1; } } /* ---------- 8. CARDS ------------------------------------------------ */ .course-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gray-300); } .course-card__media { aspect-ratio: 16/9; position: relative; color: #fff; display: grid; place-items: center; text-align: center; padding: 16px; overflow: hidden; } .course-card__media svg.crest-wm { position:absolute; right:-18px; bottom:-18px; width:110px; opacity:.16; } .course-card__media .badge { position: absolute; top: 12px; left: 12px; } .course-card__media h3 { color: #fff; position: relative; z-index: 1; font-size: 1.18rem; } .course-card__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .course-card__instr { color: var(--muted); font-size: .9rem; } .course-card__desc { color: var(--ink-soft); font-size: .94rem; } .rating { display: inline-flex; align-items: center; gap: 6px; color: var(--gold-deep); font-weight: 700; font-size: .9rem; } .rating .stars { color: var(--gold); letter-spacing: 1px; } .course-card__meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .price { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--ink); } .price small { font-size: .8rem; color: var(--muted); font-family: var(--font-sans); font-weight: 400; } /* Faculty */ .faculty-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .faculty-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .faculty-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .faculty-card.is-lead { border-color: var(--gold); } .avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.6rem; color: #fff; position: relative; box-shadow: 0 6px 16px rgba(15,33,72,.25); border: 3px solid var(--surface); outline: 2px solid var(--gold); } .faculty-card__name { font-family: var(--font-serif); font-weight: 700; font-size: 1.12rem; } .faculty-card__role { color: var(--gold-deep); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } .creds { color: var(--muted); font-size: .85rem; margin-top: 4px; } .faculty-card__bio { color: var(--ink-soft); font-size: .9rem; margin-top: 10px; } .faculty-card__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; } .tag { font-size: .72rem; background: var(--surface-2); color: var(--ink-soft); padding: 3px 9px; border-radius: 999px; } /* Testimonials */ .testimonial-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; } .testimonial__quote { color: var(--ink-soft); font-size: .96rem; } .testimonial__quote::before { content: "“"; font-family: var(--font-serif); font-size: 2.4rem; color: var(--gold); line-height: 0; vertical-align: -.4em; margin-right: 4px; } .testimonial__person { display: flex; align-items: center; gap: 12px; margin-top: auto; } .testimonial__person .avatar { width: 46px; height: 46px; margin: 0; font-size: 1rem; outline-width: 1.5px; border-width: 2px; } .testimonial__person b { font-size: .95rem; } .testimonial__person span { color: var(--muted); font-size: .82rem; display: block; } .stars-sm { color: var(--gold); font-size: .82rem; letter-spacing: 1px; } /* ---------- 9. FAQ -------------------------------------------------- */ .faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; } .faq__item { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; } .faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; color: var(--ink); font-weight: 600; font-size: 1.02rem; font-family: var(--font-serif); } .faq__q:hover { background: var(--surface-2); } .faq__icon { flex: none; width: 22px; height: 22px; position: relative; transition: transform .25s ease; } .faq__icon::before, .faq__icon::after { content:""; position:absolute; inset:0; margin:auto; background: var(--gold-deep); } .faq__icon::before { width: 14px; height: 2px; } .faq__icon::after { width: 2px; height: 14px; transition: transform .25s ease; } .faq__item[open] .faq__icon::after { transform: scaleY(0); } .faq__a { padding: 0 20px 20px; color: var(--ink-soft); } .faq__a p { color: var(--ink-soft); } /* ---------- 10. FOOTER ---------------------------------------------- */ .footer { background: var(--navy-900); color: #c2cee6; padding: 56px 0 28px; } .footer a { color: #c2cee6; } .footer a:hover { color: #fff; } .footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; } .footer__brand { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--font-serif); font-weight: 700; } .footer__brand img { height: 40px; } .footer h4 { color: #fff; font-family: var(--font-sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; } .footer ul { display: grid; gap: 9px; font-size: .92rem; } .footer__legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 20px; font-size: .82rem; color: #91a1c4; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; } .footer__disclaimer { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); padding: 14px 16px; font-size: .82rem; color: #b6c2dc; margin-top: 22px; } @media (max-width: 760px){ .footer__cols { grid-template-columns: 1fr 1fr; } } /* ---------- 11. CATALOG TOOLBAR ------------------------------------- */ .catalog-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-bottom: 22px; } .search { position: relative; } .search input { width: 100%; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: 1rem; } .search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); } .toolbar-right { display: flex; gap: 10px; align-items: center; } .select { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .95rem; } .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; } .chip { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); font-size: .9rem; font-weight: 500; } .chip:hover { border-color: var(--navy); } .chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); } .results-count { color: var(--muted); font-size: .9rem; margin-bottom: 16px; } .no-results { text-align: center; padding: 60px 20px; color: var(--muted); } @media (max-width: 640px){ .catalog-toolbar { grid-template-columns: 1fr; } } /* ---------- 12. LESSON PLAYER --------------------------------------- */ .lesson-topbar { position: sticky; top: 0; z-index: 90; background: var(--navy-900); color: #fff; } .lesson-topbar .nav { height: 60px; gap: 14px; } .lesson-topbar .nav__logo, .lesson-topbar .nav__logo span { color: #fff; } .lesson-topbar .nav__logo small { color: var(--gold-soft); } .course-pill { color: #c8d4ee; font-size: .9rem; padding-left: 14px; margin-left: 6px; border-left: 1px solid rgba(255,255,255,.2); } .topbar-progress { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 220px; } .topbar-progress .track { flex: 1; height: 8px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; } .topbar-progress .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width .5s ease; } .topbar-progress span { font-size: .85rem; color: #fff; font-weight: 600; min-width: 38px; text-align: right; } .lesson-shell { display: grid; grid-template-columns: 320px 1fr; min-height: calc(100vh - 60px); } .sidebar { background: var(--bg-alt); border-right: 1px solid var(--border); padding: 22px 16px; overflow-y: auto; } .sidebar__head { padding: 0 8px 16px; } .sidebar__head h2 { font-size: 1.12rem; } .sidebar__head p { font-size: .84rem; color: var(--muted); margin-top: 4px; } .module { margin-bottom: 8px; } .module__title { display: flex; align-items: center; gap: 8px; padding: 10px 8px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .module__title .m-status { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); text-transform: none; letter-spacing: 0; } .lesson-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 10px 10px; border-radius: 10px; color: var(--ink-soft); font-size: .94rem; } .lesson-link:hover { background: var(--surface-2); } .lesson-link.active { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); font-weight: 600; } .lesson-link .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--gray-300); display: grid; place-items: center; font-size: .7rem; color: var(--muted); } .lesson-link.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; } .lesson-link.locked { opacity: .55; cursor: not-allowed; } .lesson-link.locked .dot { border-style: dashed; } .lesson-link .l-type { margin-left: auto; font-size: .72rem; color: var(--muted); } .lesson-main { padding: clamp(20px, 4vw, 44px); max-width: 940px; } .lesson-main__eyebrow { color: var(--gold-deep); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; } .lesson-main h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 6px 0 14px; } /* Video */ .video { position: relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; background: radial-gradient(700px 400px at 70% -20%, rgba(37,99,235,.4), transparent 60%), linear-gradient(160deg, var(--navy-700), var(--navy-900)); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); } .video .crest-wm { position: absolute; inset: 0; margin: auto; width: 180px; opacity: .12; } .video__play { width: 78px; height: 78px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: var(--navy); display: grid; place-items: center; box-shadow: var(--shadow-lg); position: relative; z-index: 1; transition: transform .2s ease; } .video__play:hover { transform: scale(1.07); } .video__play svg { margin-left: 4px; } .video__label { position: absolute; bottom: 14px; left: 16px; right: 16px; z-index: 1; font-size: .85rem; color: #d6e0f5; display:flex; justify-content:space-between; } .video__meta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin: 16px 0 8px; color: var(--muted); font-size: .9rem; } .video__meta .btn { margin-left: auto; } /* Lesson body */ .lesson-body { margin-top: 10px; } .lesson-body h2 { font-size: 1.4rem; margin: 30px 0 12px; } .lesson-body h3 { font-size: 1.12rem; margin: 22px 0 8px; color: var(--navy); } .lesson-body p { margin: 12px 0; } .lesson-body ul:not(.takeaways__list) { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin: 12px 0; } .lesson-body ul:not(.takeaways__list) li { color: var(--ink-soft); } .lesson-body strong { color: var(--ink); } .callout { border-left: 4px solid var(--gold); background: rgba(201,162,39,.08); padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 18px 0; } .callout b { color: var(--gold-deep); } .takeaways { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; margin: 28px 0; box-shadow: var(--shadow-sm); } .takeaways h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ink); } .takeaways__list { display: grid; gap: 10px; } .takeaways__list li { display: flex; gap: 10px; color: var(--ink-soft); } .takeaways__list li::before { content: "✓"; color: var(--ok); font-weight: 700; } /* Lesson footer / mark complete */ .lesson-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); } /* Progress dashboard */ .dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 26px; } .dash__stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; text-align: center; } .dash__stat b { font-family: var(--font-serif); font-size: 1.8rem; color: var(--navy); display: block; } [data-theme="dark"] .dash__stat b { color: var(--gold-soft); } .dash__stat span { font-size: .82rem; color: var(--muted); } @media (max-width: 900px) { .lesson-shell { grid-template-columns: 1fr; } .sidebar { position: fixed; inset: 60px 0 0 0; z-index: 80; transform: translateX(-100%); transition: transform .3s ease; width: min(320px, 86vw); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } .sidebar-toggle { display: inline-flex !important; } } .sidebar-toggle { display: none; } /* ---------- 13. QUIZ ------------------------------------------------ */ .quiz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 30px); box-shadow: var(--shadow-sm); } .quiz__bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 14px 0 22px; } .quiz__bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s ease; } .quiz__q h3 { font-size: 1.22rem; margin-bottom: 4px; } .quiz__count { color: var(--muted); font-size: .85rem; font-weight: 600; } .quiz__options { display: grid; gap: 10px; margin: 18px 0; } .option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s ease, background .15s ease; } .option:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-50); } .option .key { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); color: var(--ink-soft); font-weight: 700; display: grid; place-items: center; font-size: .85rem; } .option.is-correct { border-color: var(--ok); background: rgba(31,157,85,.1); } .option.is-correct .key { background: var(--ok); color: #fff; } .option.is-wrong { border-color: var(--warn); background: rgba(192,57,43,.08); } .option.is-wrong .key { background: var(--warn); color: #fff; } .option:disabled { cursor: default; } .quiz__explain { border-radius: var(--r-sm); padding: 14px 16px; margin-top: 6px; font-size: .94rem; display: none; } .quiz__explain.show { display: block; } .quiz__explain.good { background: rgba(31,157,85,.1); border: 1px solid rgba(31,157,85,.3); } .quiz__explain.bad { background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3); } .quiz__explain b { color: var(--ink); } .quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; } /* Quiz result screen */ .quiz__result { text-align: center; padding: 12px; } .score-ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; margin: 6px auto 18px; background: conic-gradient(var(--ok) calc(var(--p)*1%), var(--surface-2) 0); display: grid; place-items: center; } .score-ring.fail { background: conic-gradient(var(--warn) calc(var(--p)*1%), var(--surface-2) 0); } .score-ring__inner { width: 116px; height: 116px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; } .score-ring__inner b { font-family: var(--font-serif); font-size: 2rem; color: var(--ink); } .score-ring__inner span { font-size: .76rem; color: var(--muted); } .quiz__result h3 { font-size: 1.5rem; } .quiz__breakdown { display: inline-flex; gap: 22px; margin: 14px 0 22px; color: var(--muted); font-size: .92rem; } .quiz__breakdown b { color: var(--ink); font-size: 1.1rem; font-family: var(--font-serif); display: block; } /* ---------- 14. CERTIFICATE ----------------------------------------- */ .cert-wrap { display: none; } .cert-wrap.show { display: block; } .certificate { position: relative; background: radial-gradient(900px 500px at 50% 0%, rgba(201,162,39,.06), transparent 60%), #fffdf8; border: 2px solid var(--gold); border-radius: 8px; padding: clamp(26px, 5vw, 56px); text-align: center; box-shadow: var(--shadow-lg); max-width: 900px; margin: 0 auto; outline: 1px solid var(--gold-deep); outline-offset: 8px; color: #20283f; } .certificate::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(154,122,46,.45); border-radius: 4px; pointer-events: none; } .cert__crest { width: 96px; margin: 0 auto 8px; } .cert__college { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--navy); letter-spacing: .5px; } .cert__rule { width: 120px; height: 2px; background: var(--gold); margin: 12px auto 18px; position: relative; } .cert__rule::before, .cert__rule::after { content:"❖"; color: var(--gold-deep); position:absolute; top:50%; transform:translateY(-50%); font-size:.8rem; } .cert__rule::before { left: -22px; } .cert__rule::after { right: -22px; } .cert__pre { font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); } .cert__name { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--navy); margin: 12px 0; border-bottom: 2px solid var(--gold-deep); display: inline-block; padding: 0 30px 8px; } .cert__body { max-width: 620px; margin: 8px auto 0; color: #3b465e; font-size: 1.02rem; } .cert__program { font-family: var(--font-serif); font-style: italic; color: var(--navy); font-size: 1.2rem; } .cert__sigs { display: flex; justify-content: center; gap: clamp(30px, 8vw, 90px); margin-top: 40px; } .sig { text-align: center; min-width: 200px; } .sig__name { font-family: "Snell Roundhand","Segoe Script",cursive; font-size: 1.5rem; color: var(--navy); } .sig__line { border-top: 1.5px solid #20283f; margin: 4px 0 6px; } .sig__role { font-size: .8rem; color: #46506a; text-transform: uppercase; letter-spacing: .06em; } .cert__seal { position: absolute; right: clamp(22px, 6vw, 70px); bottom: clamp(60px, 10vw, 96px); width: 96px; height: 96px; } .cert__meta { margin-top: 26px; font-size: .8rem; color: #6a7488; } .cert__disclaimer { margin-top: 14px; font-size: .72rem; color: #8a93a3; max-width: 640px; margin-inline: auto; } /* ---------- 15. SCROLL REVEAL --------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------- 16. PRINT (certificate) --------------------------------- */ @media print { .site-header, .lesson-topbar, .sidebar, .footer, .lesson-foot, .no-print { display: none !important; } body { background: #fff; } .cert-wrap, .cert-wrap * { visibility: visible; } .certificate { box-shadow: none; margin: 0 auto; max-width: 100%; } @page { size: landscape; margin: 12mm; } }