/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
:root{--hp-mint:#e8f8ef;--hp-soft:#f3f7f5;--hp-soft-alt:#f0f4f2;--hp-white:#ffffff;--hp-lavender-soft:#eef2f8;--hp-warm:#faf8f6;--hp-peach-soft:#f5ebe6;}.homepage-section{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,3.5rem);}.section-title{font-weight:700;color:#1a202c;font-size:clamp(1.35rem,3vw,2rem);}.homepage-hero{background-color:var(--hp-mint);background-image:url('/sites/default/files/2026-06/homepage/hero-bg.webp');background-size:cover;background-position:center right;background-repeat:no-repeat;min-height:clamp(420px,55vw,560px);}.homepage-hero .hero-eyebrow{font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#2f855a;}.homepage-hero .hero-title{color:#1a202c;line-height:1.15;}.hero-stat-bar{margin-top:0.25rem;}.hero-stat-item{background:rgba(255,255,255,0.92);border:1px solid rgba(47,133,90,0.15);border-radius:0.875rem;padding:0.75rem 0.5rem;text-align:center;transition:transform 0.2s ease,box-shadow 0.2s ease;}.hero-stat-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.08);}.hero-stat-value{font-size:clamp(1.35rem,3.5vw,1.85rem);font-weight:800;color:#2563eb;line-height:1.1;}.hero-stat-label{font-size:clamp(0.72rem,2vw,0.875rem);font-weight:600;color:#4b5563;margin-top:0.15rem;}.hero-trust-line{display:flex;flex-wrap:wrap;gap:0.5rem;}.hero-trust-badge{display:inline-flex;align-items:center;gap:0.35rem;font-size:clamp(0.78rem,2vw,0.9rem);font-weight:600;color:#1f2937;background:rgba(255,255,255,0.85);border:1px solid rgba(37,99,235,0.12);border-radius:999px;padding:0.35rem 0.75rem;}.hero-trust-badge .bi{color:#059669;}.homepage-hero .hero-subtitle{color:#374151;}.journey-card{transition:transform 0.2s ease,box-shadow 0.2s ease;border-radius:1rem !important;overflow:hidden;}.journey-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,0.12) !important;}.journey-card .card-img-top{aspect-ratio:4 / 3;object-fit:cover;width:100%;}.journey-card .card-title{font-size:clamp(1rem,2.5vw,1.25rem);}.homepage-journey{background:linear-gradient(180deg,var(--hp-mint) 0%,var(--hp-soft) 14%,var(--hp-soft) 100%);}.homepage-grades{background:linear-gradient(180deg,var(--hp-soft) 0%,var(--hp-white) 16%,var(--hp-white) 84%,var(--hp-soft-alt) 100%);}.homepage-knowledge{background:linear-gradient(180deg,var(--hp-soft-alt) 0%,#fff9eb 18%,#fffdf7 50%,#f0fdf4 82%,var(--hp-mint) 100%);}.homepage-knowledge .section-title{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0.5rem;background:linear-gradient(90deg,#1e293b 0%,#2563eb 50%,#059669 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}.homepage-knowledge .kh-section-icon{display:inline-flex;align-items:center;justify-content:center;width:2.35rem;height:2.35rem;border-radius:50%;background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 45%,#f97316 100%);box-shadow:0 4px 14px rgba(245,158,11,0.4);-webkit-text-fill-color:#fff;vertical-align:middle;}.homepage-knowledge .kh-section-icon .bi{font-size:1.15rem;color:#fff;line-height:1;}.homepage-knowledge .btn-outline-primary{border-width:2px;font-weight:700;border-color:#2563eb;color:#2563eb;transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;}.homepage-knowledge .btn-outline-primary:hover{background:linear-gradient(90deg,#2563eb,#059669);border-color:transparent;color:#fff;transform:translateY(-2px);box-shadow:0 6px 18px rgba(37,99,235,0.3);}.grade-card-inner{aspect-ratio:1 / 1;display:block;line-height:0;transition:transform 0.2s ease;}.grade-card:hover .grade-card-inner{transform:scale(1.03);}.grade-panda{width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:center;display:block;}.grade-badge{position:absolute;top:0.75rem;right:0.75rem;font-size:clamp(0.75rem,2vw,1rem);background:rgba(255,255,255,0.95) !important;color:#1a202c;padding:0.35rem 0.75rem;}.legacy-grade-banner{opacity:0.92;transition:opacity 0.2s ease;width:100%;height:auto;}.legacy-grade-banner:hover{opacity:1;}.stories-banner{min-height:clamp(220px,35vw,320px);background:linear-gradient(120deg,#1d4ed8,#059669);}.stories-banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.35;}.stories-banner-content{z-index:1;}.stories-banner-content h2{font-size:clamp(1.35rem,4vw,2.5rem);}.stories-banner-content .lead{font-size:clamp(0.95rem,2.5vw,1.15rem);}.homepage-stories-banner{background:linear-gradient(180deg,var(--hp-warm) 0%,var(--hp-white) 28%,var(--hp-white) 72%,var(--hp-soft) 100%);}.homepage-popular{background:linear-gradient(180deg,var(--hp-lavender-soft) 0%,#dce4f5 10%,#6671c1 24%,#9d9aff 52%,#fad0c4 80%,var(--hp-peach-soft) 94%,var(--hp-warm) 100%);}.homepage-popular .popular-title{font-weight:700;font-size:clamp(1.5rem,3.5vw,2.25rem);background:linear-gradient(90deg,#fbbf24 0%,#f97316 40%,#ef4444 75%,#db2777 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}.homepage-popular .popular-title span[aria-hidden="true"]{-webkit-text-fill-color:initial;background:none;}.homepage-popular .popular-subtitle{color:rgba(255,255,255,0.92);font-size:clamp(0.95rem,2vw,1.1rem);}.homepage-popular-tabs{background:rgba(255,255,255,0.97);border-radius:1.25rem;padding:clamp(1rem,3vw,1.75rem);box-shadow:0 12px 32px rgba(0,0,0,0.12);}.popular-tab-bar{border-bottom:1px solid #e5e7eb;padding-bottom:1rem;}.popular-tab-btn{display:inline-flex;align-items:center;gap:0.4rem;border:2px solid transparent;border-radius:999px;padding:0.55rem 1.15rem;font-weight:600;font-size:clamp(0.85rem,2vw,0.95rem);color:#4b5563;background:#f3f4f6;transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease;}.popular-tab-btn:hover{background:#e5e7eb;color:#1f2937;}.popular-tab-btn.active{background:linear-gradient(90deg,#2563eb,#059669);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,0.35);}.popular-card{display:block;height:100%;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,0.08);transition:transform 0.2s ease,box-shadow 0.2s ease;}.popular-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,0.14);}.popular-card-image{aspect-ratio:4 / 3;overflow:hidden;background:#f9fafb;}.popular-card-img,.popular-card-image img{width:100%;height:100%;object-fit:cover;display:block;}.popular-card-title{padding:0.65rem 0.75rem;font-size:clamp(0.8rem,2vw,0.9rem);font-weight:600;color:#1f2937;text-align:center;line-height:1.3;}.popular-empty{color:#6b7280;background:#f9fafb;border-radius:1rem;}.popular-more-btn{background:#fff;border:2px solid #2563eb;color:#2563eb;font-weight:600;border-radius:999px;padding:0.5rem 1.25rem;transition:background 0.2s ease,color 0.2s ease;}.popular-more-btn:hover{background:#2563eb;color:#fff;}.popular-subsection-title{letter-spacing:0.06em;font-weight:700;}.featured-game-card{background:#fff;border-radius:1.125rem;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.08);transition:transform 0.2s ease,box-shadow 0.2s ease;}.featured-game-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,0.14);}.featured-game-card-image{aspect-ratio:16 / 10;overflow:hidden;background:#f3f4f6;}.featured-game-card-img,.featured-game-card-image img{width:100%;height:100%;object-fit:cover;display:block;}.featured-game-card-body{padding:1rem 1.1rem 1.15rem;}.featured-game-card-title{color:#1f2937;font-weight:700;}.featured-game-card-desc{color:#6b7280;font-size:0.9rem;line-height:1.45;}.featured-game-card-cta{display:inline-block;margin-top:0.75rem;font-weight:600;font-size:0.875rem;color:#2563eb;}.story-genre-card{border-radius:1rem;padding:1rem 0.85rem;min-height:8.5rem;transition:transform 0.2s ease,box-shadow 0.2s ease;}.story-genre-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.1);}.story-genre-card-icon{font-size:1.35rem;margin-bottom:0.5rem;}.story-genre-card-title{color:#1f2937;font-weight:700;}.story-genre-card-desc{color:#4b5563;font-size:0.78rem;line-height:1.35;}.story-genre-card--purple{background:linear-gradient(145deg,#f3e8ff,#ede9fe);border:1px solid #ddd6fe;}.story-genre-card--purple .story-genre-card-icon{color:#7c3aed;}.story-genre-card--amber{background:linear-gradient(145deg,#fef3c7,#fde68a);border:1px solid #fcd34d;}.story-genre-card--amber .story-genre-card-icon{color:#d97706;}.story-genre-card--green{background:linear-gradient(145deg,#dcfce7,#bbf7d0);border:1px solid #86efac;}.story-genre-card--green .story-genre-card-icon{color:#059669;}.story-genre-card--blue{background:linear-gradient(145deg,#dbeafe,#bfdbfe);border:1px solid #93c5fd;}.story-genre-card--blue .story-genre-card-icon{color:#2563eb;}@media (max-width:575.98px){.popular-tab-btn span{white-space:normal;line-height:1.2;text-align:center;}.homepage-footer-resources .footer-grid > .col-12{flex:0 0 100%;max-width:100%;}}.homepage-why-stats{background:linear-gradient(180deg,var(--hp-soft) 0%,#f5f9f7 45%,var(--hp-soft) 100%);}.why-icon{width:clamp(72px,18vw,96px);height:clamp(72px,18vw,96px);border-radius:50%;object-fit:cover;}.homepage-stats-panel .display-6{font-size:clamp(1.35rem,3.5vw,2.5rem);}.homepage-stats-panel .opacity-75{font-size:clamp(0.8125rem,2vw,1rem);}.stat-link{transition:transform 0.2s ease,opacity 0.2s ease;border-radius:0.75rem;padding:0.5rem;}a.stat-link:hover{transform:translateY(-3px);opacity:0.92;}.homepage-stats .display-6{font-size:clamp(1.35rem,3.5vw,2.5rem);}.homepage-stats .opacity-75{font-size:clamp(0.8125rem,2vw,1rem);}.homepage-steps{background:linear-gradient(180deg,var(--hp-soft-alt) 0%,var(--hp-soft) 18%,var(--hp-soft) 82%,var(--hp-lavender-soft) 100%);}.step-card-link{color:inherit;border-radius:1rem;transition:transform 0.2s ease,box-shadow 0.2s ease;}.step-card-link:hover{transform:translateY(-4px);}.step-card-link:hover .step-card{box-shadow:0 8px 24px rgba(0,0,0,0.1);}.step-card{padding:1rem;border-radius:1rem;transition:box-shadow 0.2s ease;}.step-number{font-size:1rem;width:2rem;height:2rem;line-height:2rem;padding:0;}.step-icon{max-width:clamp(80px,22vw,120px);}.homepage-reviews{background:linear-gradient(180deg,var(--hp-soft) 0%,#f8fafc 30%,var(--hp-white) 68%,var(--hp-soft-alt) 100%);}.review-card{position:relative;overflow:hidden;transition:transform 0.2s ease,box-shadow 0.2s ease;}.review-card::before{content:"\201C";position:absolute;top:0.35rem;left:1rem;font-size:3.5rem;line-height:1;font-family:Georgia,"Times New Roman",serif;opacity:0.14;pointer-events:none;}.review-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.1) !important;}.review-card--mint{background:linear-gradient(145deg,#ecfdf5 0%,#d1fae5 55%,#f0fdf4 100%);border-top:4px solid #059669 !important;}.review-card--sky{background:linear-gradient(145deg,#eff6ff 0%,#dbeafe 55%,#f0f9ff 100%);border-top:4px solid #2563eb !important;}.review-card--peach{background:linear-gradient(145deg,#fff7ed 0%,#ffedd5 55%,#fffbeb 100%);border-top:4px solid #ea580c !important;}.review-card .review-quote{position:relative;z-index:1;color:#1f2937;line-height:1.65;font-size:clamp(0.9375rem,2vw,1.05rem);}.review-card--sky .review-quote{text-align:left;}.review-card .review-author{color:#111827;}.homepage-topics{background:linear-gradient(180deg,var(--hp-soft-alt) 0%,var(--hp-soft) 50%,#eef2ef 88%,#e8eef8 100%);}.homepage-topics .btn{font-size:clamp(0.8rem,2vw,0.95rem);}.donate-banner{background:linear-gradient(180deg,#eef2ef 0%,#fef3ec 32%,#eef2fb 72%,#d4e0fb 100%);}.donate-gradient-text{background:linear-gradient(90deg,#ff7e5f,#feb47b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:clamp(1.5rem,4vw,2.5rem);}.site-footer{background:linear-gradient(180deg,#d4e0fb 0%,#8b9cf5 28%,#6e83f5 62%,#5a72e8 100%) !important;padding-top:0;color:#fff;}.homepage-footer-resources{background:transparent;color:#fff;}.homepage-footer-resources .footer-grid{align-items:flex-start;}.homepage-footer-resources .footer-column-title{font-weight:700;font-size:clamp(0.9rem,1.8vw,1.05rem);color:#fff;margin-bottom:0.85rem;padding-bottom:0.5rem;border-bottom:2px solid rgba(255,255,255,0.25);}.homepage-footer-resources .footer-column-desc{color:rgba(255,255,255,0.9);font-size:clamp(0.875rem,2vw,0.95rem);line-height:1.65;margin-bottom:1rem;}.homepage-footer-resources .footer-stat-pill{display:inline-block;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);border-radius:999px;padding:0.25rem 0.7rem;font-size:0.78rem;font-weight:600;color:rgba(255,255,255,0.95);white-space:nowrap;}.homepage-footer-resources .footer-donate-btn{display:inline-block;background:rgba(255,255,255,0.95);color:#1e40af;font-weight:700;font-size:clamp(0.875rem,2vw,0.95rem);padding:0.55rem 1.15rem;border-radius:999px;text-decoration:none;transition:background 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease,color 0.2s ease;box-shadow:0 4px 14px rgba(0,0,0,0.12);}.homepage-footer-resources .footer-donate-btn:hover,.homepage-footer-resources .footer-donate-btn:focus{background:#fff;color:#1e3a8a;transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.16);}.site-footer .homepage-footer-resources a.footer-donate-btn{color:#1e40af;}.site-footer .homepage-footer-resources a.footer-donate-btn:hover,.site-footer .homepage-footer-resources a.footer-donate-btn:focus{color:#1e3a8a;}.homepage-footer-resources .footer-column-links li + li{margin-top:0.4rem;}.homepage-footer-resources .footer-column-links a{color:rgba(255,255,255,0.88);text-decoration:none;font-size:clamp(0.8125rem,1.8vw,0.9rem);line-height:1.4;transition:color 0.2s ease,padding-left 0.2s ease;display:inline-block;}.homepage-footer-resources .footer-column-links a:hover,.homepage-footer-resources .footer-column-links a:focus{color:#fff;padding-left:0.2rem;}.homepage-footer-resources .footer-column--about{max-width:26rem;}@media (min-width:992px){.homepage-footer-resources .footer-column--about{padding-right:1.5rem;}.homepage-footer-resources .footer-grid > .col-lg-2,.homepage-footer-resources .footer-grid > .col-lg-3{border-left:1px solid rgba(255,255,255,0.15);padding-left:1.25rem;}}@media (max-width:991.98px){.homepage-footer-resources .footer-column--about{max-width:none;margin-bottom:0.5rem;}}.homepage-footer-bottom .site-footer__bottom{border-top:1px solid rgba(255,255,255,0.22);margin-top:0;padding-top:1.25rem;padding-bottom:1.5rem;}.site-footer .container{padding-left:var(--bs-gutter-x,0.75rem);padding-right:var(--bs-gutter-x,0.75rem);}.site-footer .content,.site-footer #block-learnchinese-copyright{color:rgba(255,255,255,0.88);}.site-footer a{color:rgba(255,255,255,0.9);}.site-footer a:hover,.site-footer a:focus{color:#fff;}.path-frontpage #main > .container,.path-frontpage #main > .container > .row-offcanvas{max-width:100%;}.path-frontpage #main > .container{padding-left:0;padding-right:0;}.path-frontpage main{padding-left:0 !important;padding-right:0 !important;}.path-frontpage main .section{padding-left:0;padding-right:0;}.path-frontpage .game-section > .container.position-relative{flex-wrap:wrap;gap:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;}.path-frontpage .game-section .game-title{width:100%;margin-bottom:0 !important;}@media (min-width:768px){.path-frontpage .game-section > .container.position-relative{flex-wrap:nowrap;}.path-frontpage .game-section .game-title{width:auto;}}@media (max-width:767.98px){.path-frontpage .game-section .responsive-btn{position:static !important;margin:0 auto;}.homepage-section{padding-top:clamp(1.5rem,4vw,2.25rem);padding-bottom:clamp(1.5rem,4vw,2.25rem);}.homepage-hero{background-image:url('/sites/default/files/2026-06/homepage/hero-bg-mobile.webp');background-position:center bottom;background-size:cover;min-height:auto;padding-top:1.75rem !important;padding-bottom:1.75rem !important;}.homepage-hero .hero-title{font-size:clamp(1.55rem,6vw,2rem);line-height:1.2;text-shadow:0 1px 2px rgba(255,255,255,0.85);}.homepage-hero .hero-eyebrow,.homepage-hero .hero-subtitle{text-shadow:0 1px 2px rgba(255,255,255,0.75);}.homepage-hero .hero-subtitle{font-size:0.9375rem;margin-bottom:1rem !important;}.hero-stat-item{padding:0.55rem 0.35rem;}.hero-stat-value{font-size:1.2rem;}.hero-stat-label{font-size:0.68rem;}.hero-trust-badge{font-size:0.72rem;padding:0.3rem 0.6rem;}.story-genre-card{min-height:7.5rem;padding:0.75rem 0.65rem;}.story-genre-card-desc{font-size:0.72rem;}.featured-game-card-desc{font-size:0.8125rem;}.homepage-hero .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;}.homepage-hero .hero-actions .btn{width:100%;min-width:0;margin:0;padding:0.55rem 0.5rem;font-size:0.8125rem;white-space:nowrap;}.homepage-hero .hero-actions .btn:nth-child(3){grid-column:1 / -1;}.homepage-hero .hero-actions .btn-outline-primary{background:rgba(255,255,255,0.92);}.journey-card .card-body{padding:0.65rem 0.5rem;}.journey-card .card-text{font-size:0.75rem;line-height:1.35;}.homepage-grades .grade-card > p{font-size:0.8125rem;}.grade-badge{top:0.5rem;right:0.5rem;font-size:0.7rem;padding:0.25rem 0.5rem;}.step-card{background:rgba(255,255,255,0.9);box-shadow:0 2px 12px rgba(0,0,0,0.06);}.popular-tab-bar{display:grid !important;grid-template-columns:1fr 1fr;gap:0.5rem;border-bottom:none;padding-bottom:0;}.popular-tab-btn{width:100%;justify-content:center;padding:0.5rem 0.65rem;font-size:0.8125rem;}.homepage-popular-tabs{padding:0.85rem;border-radius:1rem;}.homepage-popular .popular-subtitle{font-size:0.875rem;padding:0 0.25rem;}.stories-banner-content{padding:1.25rem !important;}.stories-banner-content .fs-4{font-size:0.95rem !important;margin-bottom:0.35rem !important;}.stories-banner-content .btn-lg{font-size:0.9375rem;padding:0.5rem 1rem;}.why-icon{width:72px;height:72px;}.homepage-stats-panel{padding:1.25rem !important;}.homepage-stats-panel .h4{font-size:1.05rem;margin-bottom:1rem !important;}.homepage-stats-panel .fs-2{font-size:1.35rem !important;}.homepage-stats-panel .display-6{font-size:1.25rem;}.review-card{padding:1rem !important;}.review-card .review-quote{font-size:0.9rem;text-align:left;}.review-card::before{font-size:2.75rem;}.homepage-topics .btn{font-size:0.78rem;padding:0.35rem 0.7rem;}.donate-banner{padding-top:1.25rem !important;padding-bottom:1.25rem !important;}.donate-banner .lead{font-size:0.9375rem !important;line-height:1.45;padding:0 0.5rem;}.homepage-footer-resources{padding-top:2rem !important;padding-bottom:2rem !important;}.homepage-footer-resources .footer-column--about{text-align:left;}.homepage-footer-resources .footer-stats{justify-content:flex-start;}.homepage-reviews .review-quote{font-size:0.95rem;}}