/* Root variables */ :root { --blue: #0b2f64; --blue-ink: #0a2550; --yellow: #f6c343; --bg: #f8fbff; --card: #ffffff; --text: #111827; --muted: #5b6476; --border: #e3e8f0; --shadow: 0 10px 35px rgba(10, 37, 80, 0.12); --radius: 16px; --font: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Add a Google Font link in if desired */ } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: radial-gradient(circle at top left, #e9f2ff 0%, #fafbff 40%, #fffdf3 100%); color: #0d1b2a; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } main { padding: 0 1.2rem 4rem; } /* Layout containers */ .container { max-width: 1100px; margin: 0 auto; } section { padding: 3.5rem 0; } .section-heading { text-align: center; margin-bottom: 2rem; } .section-heading h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); color: var(--blue-ink); margin: 0 0 0.5rem; } .section-heading p { color: var(--muted); margin: 0; } /* Navigation */ .site-nav { background: #ffffffcc; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15, 35, 64, 0.06); position: sticky; top: 0; z-index: 50; } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0.75rem 1.25rem; display: grid; grid-template-columns: auto 1fr; align-items: flex-start; gap: 1rem; position: relative; } .nav-logo { font-weight: 800; color: var(--blue); font-size: 1.05rem; display: inline-flex; align-items: center; gap: 0.6rem; } .logo-mark { width: 39px; height: 39px; border-radius: 9px; object-fit: cover; box-shadow: 0 5px 12px rgba(11, 47, 100, 0.16); } .nav-links { list-style: none; display: flex; align-items: center; gap: 0.2rem; margin: 0; padding: 0; flex-wrap: wrap; row-gap: 0.4rem; justify-content: flex-end; } .nav-link { padding: 0.5rem 0.85rem; border-radius: 999px; color: #0d2345; font-weight: 700; background: rgba(11, 47, 100, 0.08); transition: background 0.2s ease, color 0.2s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; } .nav-link:hover { background: rgba(11, 47, 100, 0.16); } .nav-link.active { background: var(--blue); color: #fff; } .nav-toggle { display: none; border: none; background: none; font-size: 1.4rem; cursor: pointer; color: #0d2345; } .nav-item.dropdown { position: relative; } .dropdown-toggle { border: none; background: none; font: inherit; cursor: pointer; padding: 0.4rem 0.9rem; border-radius: 999px; display: flex; align-items: center; gap: 0.35rem; color: #0d2345; font-weight: 700; } .dropdown-toggle::after { content: "▾"; font-size: 0.8rem; } .dropdown-menu { position: absolute; top: 110%; left: 0; min-width: 210px; background: #ffffff; border-radius: 0.75rem; box-shadow: 0 18px 40px rgba(15, 35, 64, 0.12); padding: 0.5rem 0; list-style: none; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 100; white-space: nowrap; } .dropdown-link { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; text-decoration: none; color: #10233d; font-weight: 600; } .dropdown-link:hover { background: #f5f7ff; } .dropdown-link.active { background: #f0f3ff; font-weight: 800; } .nav-item.dropdown.open .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Hero */ .hero { display: grid; gap: 1.5rem; align-items: center; padding: 3.5rem 0 1.5rem; } .hero.with-media{ grid-template-columns: 1.05fr 0.95fr; } .hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--blue-ink); margin: 0 0 0.75rem; } .hero p { margin: 0 0 1.5rem; color: var(--muted); font-size: 1.05rem; } .hero-media{ border-radius:20px; overflow:hidden; box-shadow:0 18px 38px rgba(10,35,80,0.12); } .hero-media img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .pill { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(11, 47, 100, 0.07); color: var(--blue-ink); padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 700; } .cta-group { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.75rem 1.1rem; border-radius: 12px; font-weight: 700; border: 2px solid transparent; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue-ink)); color: #fff; box-shadow: var(--shadow); border-color: transparent; } .btn-primary:hover { transform: translateY(-1px); } .btn-secondary { background: #fff; color: var(--blue-ink); border-color: var(--border); box-shadow: inset 0 0 0 1px var(--border); } .btn-secondary:hover { border-color: var(--blue); } .highlight-card { background: var(--card); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(11, 47, 100, 0.06); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card { background: var(--card); border-radius: var(--radius); padding: 1.25rem; border: 1px solid var(--border); transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; will-change: transform; } .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 47, 100, 0.14); border-color: rgba(11, 47, 100, 0.18); } .card h3 { margin: 0 0 0.5rem; color: var(--blue-ink); } .card p, .card li { color: var(--muted); margin: 0; } .badge-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge { background: rgba(246, 195, 67, 0.2); color: var(--blue-ink); padding: 0.35rem 0.6rem; border-radius: 10px; font-weight: 700; font-size: 0.95rem; } .stages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .stage-card { display: block; padding: 1.5rem; background: #ffffff; border-radius: 1rem; box-shadow: 0 6px 18px rgba(15, 35, 64, 0.08); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; } .stage-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15, 35, 64, 0.12); } .stage-card h3 { margin-bottom: 0.5rem; color: #0d2345; font-weight: 700; } .stage-card p { margin: 0; color: #415a77; } .tuition-types { padding-top: 2.5rem; padding-bottom: 2.5rem; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; } .pricing-card { background: #fff; border-radius: 16px; border: 1px solid var(--border); padding: 1.35rem; box-shadow: 0 12px 30px rgba(11, 47, 100, 0.08); transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; } .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(11, 47, 100, 0.12); border-color: rgba(11, 47, 100, 0.15); } .pricing-card h3 { margin: 0 0 0.35rem; color: var(--blue-ink); font-size: 1.05rem; } .pricing-card .price { font-weight: 800; color: var(--blue); margin-bottom: 0.5rem; } .pricing-card p { margin: 0; color: var(--muted); } .internal-links { margin-top: 1rem; color: var(--blue-ink); font-weight: 700; } .internal-links a { color: var(--blue); } .ks1-hero .badge-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .ks2-hero .badge-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .ee-hero .badge-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .ks3-hero .badge-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .gcse-hero .badge-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .alevel-hero .badge-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; } .mini-pill { background: #eef3ff; color: #0d2345; padding: 0.35rem 0.65rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; } .ks1-early-goals, .ks1-subjects, .ks1-how, .ks1-benefits, .ks1-faq, .ks2-subjects, .ks2-how, .ks2-benefits, .ks2-faq, .ee-subjects, .ee-how, .ee-benefits, .ee-faq, .ks3-subjects, .ks3-how, .ks3-benefits, .ks3-faq, .gcse-subjects, .gcse-how, .gcse-benefits, .gcse-faq, .alevel-subjects, .alevel-how, .alevel-benefits, .alevel-faq { padding-top: 2.5rem; padding-bottom: 2.5rem; } .subject-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .subjects-layout{ display:grid; grid-template-columns: 1.4fr 1fr; gap:1.5rem; align-items:center; } .subject-media{ border-radius:18px; overflow:hidden; box-shadow:0 14px 34px rgba(10,35,80,0.16); } .subject-media img{ width:100%; height:100%; object-fit:cover; display:block; } @media (max-width: 900px){ .subjects-layout{ grid-template-columns: 1fr; } } .subject-card { min-height: 180px; } .subject-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11, 47, 100, 0.14); } .eyebrow { display: inline-flex; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(11, 47, 100, 0.06); color: #0d2345; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.6rem; } .lesson-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .lesson-card { min-height: 180px; display: grid; align-content: start; } .ks1-benefits { background: linear-gradient(180deg, #f7faff 0%, #fffdf8 100%); border-radius: 18px; padding: 3rem 1.2rem; box-shadow: 0 14px 44px rgba(10, 37, 80, 0.08); } .ks2-benefits { background: linear-gradient(180deg, #f7faff 0%, #fffdf8 100%); border-radius: 18px; padding: 3rem 1.2rem; box-shadow: 0 14px 44px rgba(10, 37, 80, 0.08); } .ee-benefits { background: linear-gradient(180deg, #f7faff 0%, #fffdf8 100%); border-radius: 18px; padding: 3rem 1.2rem; box-shadow: 0 14px 44px rgba(10, 37, 80, 0.08); } .ks3-benefits { background: linear-gradient(180deg, #f7faff 0%, #fffdf8 100%); border-radius: 18px; padding: 3rem 1.2rem; box-shadow: 0 14px 44px rgba(10, 37, 80, 0.08); } .gcse-benefits { background: linear-gradient(180deg, #f7faff 0%, #fffdf8 100%); border-radius: 18px; padding: 3rem 1.2rem; box-shadow: 0 14px 44px rgba(10, 37, 80, 0.08); } .alevel-benefits { background: linear-gradient(180deg, #f7faff 0%, #fffdf8 100%); border-radius: 18px; padding: 3rem 1.2rem; box-shadow: 0 14px 44px rgba(10, 37, 80, 0.08); } .benefits-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto; } .benefit-card { min-height: 170px; display: grid; align-content: start; } .accordion { display: grid; gap: 0.75rem; } .accordion .faq-item { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; padding: 0; } .faq-toggle { width: 100%; padding: 0.9rem 1rem; background: none; border: none; display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: #0d2345; cursor: pointer; } .faq-content { padding: 0 1rem; color: var(--muted); max-height: 0; overflow: hidden; transition: max-height 0.2s ease, padding-bottom 0.2s ease; } .faq-item.open .faq-content { max-height: 200px; padding-bottom: 1rem; } .faq-item + .faq-item { margin-top: 0.35rem; } .chevron { font-weight: 800; color: #0d2345; } .ks1-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } .ks2-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } .ee-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } .ks3-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } .gcse-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } .alevel-cta { padding-top: 2.5rem; padding-bottom: 2.5rem; } .cta-panel { background: linear-gradient(135deg, #eef5ff 0%, #fffdf3 100%); border: 1px solid rgba(11, 47, 100, 0.08); border-radius: 18px; padding: 1.75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; gap: 1rem; box-shadow: 0 16px 48px rgba(11, 47, 100, 0.12); } @media (max-width: 768px) { .nav-inner { grid-template-columns: 1fr auto; align-items: center; } .hero h1 { font-size: clamp(1.8rem, 6vw, 2.2rem); } .section-heading h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); } .hero.with-media{ grid-template-columns: 1fr; } .ks1-hero, .ks2-hero, .ee-hero, .ks3-hero, .gcse-hero, .alevel-hero { padding-top: 2.5rem; padding-bottom: 1rem; } .ks1-benefits, .ks2-benefits, .ee-benefits, .ks3-benefits, .gcse-benefits, .alevel-benefits { padding: 2.5rem 1rem; } .cta-panel { grid-template-columns: 1fr; } } /* Steps strip */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .step { background: var(--card); padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); text-align: center; font-weight: 700; color: var(--blue-ink); } .step span { display: block; color: var(--muted); font-weight: 600; margin-top: 0.35rem; } /* FAQ */ .faq { display: grid; gap: 0.75rem; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .faq-item h3 { margin: 0 0 0.5rem; color: var(--blue-ink); } .faq-item p { margin: 0; color: var(--muted); } /* Lists */ .two-col-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; padding: 0; list-style: none; } .two-col-list li { padding: 0.75rem 0.9rem; background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); font-weight: 700; color: var(--blue-ink); } /* Testimonials placeholder */ .testimonial-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .testimonial { background: var(--card); padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); } .testimonial p { margin: 0 0 0.5rem; color: var(--muted); } .testimonial strong { color: var(--blue-ink); } .testimonial-carousel { position: relative; display: flex; align-items: center; gap: 0.5rem; } .testimonial-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 1rem; overflow: hidden; padding: 0.25rem 0; scroll-behavior: smooth; } .carousel-btn { border: none; background: #fff; color: var(--blue-ink); width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 6px 18px rgba(11, 47, 100, 0.12); cursor: pointer; font-size: 1.2rem; } .carousel-btn:hover { background: rgba(11, 47, 100, 0.08); } .stars { color: #f6c343; font-weight: 800; letter-spacing: 1px; } /* Forms */ form { display: grid; gap: 1rem; } label { font-weight: 700; color: var(--blue-ink); display: block; margin-bottom: 0.25rem; } input, textarea, select { width: 100%; padding: 0.75rem; border-radius: 12px; border: 1px solid var(--border); font-size: 1rem; font-family: var(--font); background: #fff; } textarea { min-height: 140px; resize: vertical; } .map-placeholder { background: linear-gradient(135deg, rgba(11, 47, 100, 0.08), rgba(246, 195, 67, 0.15)); border: 1px dashed var(--blue); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--blue-ink); font-weight: 700; } /* Resource cards */ .resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .resource-card { background: #fff; border-radius: 1rem; padding: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.05); } .resource-card h3 { margin: 0 0 0.75rem; color: var(--blue-ink); } .resource-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; } .resource-card li a { color: var(--blue-ink); font-weight: 600; } .resources-page { padding: 3rem 0; } .resources-header { margin-bottom: 1.25rem; } .resources-controls { display: flex; gap: 0.75rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; } .resources-controls select { padding: 0.6rem 0.75rem; border-radius: 0.75rem; border: 1px solid rgba(0,0,0,0.08); background: #fff; } .resources-controls input[type="search"] { padding: 0.6rem 0.75rem; border-radius: 0.75rem; border: 1px solid rgba(0,0,0,0.08); background: #fff; min-width: 240px; } .resources-footer { margin-top: 1rem; text-align: center; } .resource-top { display: flex; flex-direction: column; gap: 0.35rem; } .resource-overview { color: #4a5d74; margin: 0.5rem 0; line-height: 1.5; } .resource-meta { color: #4a5d74; font-size: 0.9rem; display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; } .resource-preview { background: #f4f7ff; border-radius: 0.75rem; padding: 0.75rem; color: #0d2345; font-size: 0.95rem; } .resource-actions { margin-top: 1rem; } .pill-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pill { display: inline-flex; align-items: center; padding: 0.25rem 0.55rem; border-radius: 999px; background: #eef3ff; color: #0d2345; font-size: 0.85rem; font-weight: 600; } .pill-soft { background: #fff6db; } @media (max-width: 900px) { .resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .resource-grid { grid-template-columns: 1fr; } } /* Blog cards */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .blog-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.5rem; } .blog-card h3 { margin: 0; color: var(--blue-ink); } .blog-card p { margin: 0; color: var(--muted); } .blog-meta { color: var(--muted); font-weight: 700; } .read-more { color: var(--blue); font-weight: 700; } /* Footer */ .site-footer { background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 3rem 1.5rem 2rem; margin-top: 4rem; } .footer-container { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } .footer-brand h3 { font-size: 1.25rem; font-weight: 700; color: #0d2345; margin-bottom: 0.5rem; } .footer-logo { width: 51px; height: 51px; border-radius: 12px; object-fit: cover; box-shadow: 0 8px 18px rgba(11, 47, 100, 0.16); margin-bottom: 0.7rem; } .footer-brand p { max-width: 320px; color: #4a5d74; line-height: 1.5; } .footer-links h4, .footer-social h4 { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: #0d2345; } .footer-links ul { list-style: none; padding: 0; } .footer-links li { margin-bottom: 0.4rem; } .footer-links a { text-decoration: none; color: #4a5d74; transition: color 0.2s ease; } .footer-links a:hover { color: #0d2345; } .footer-social .social-icons { display: flex; gap: 0.5rem; } .social-icon { background: #eef3ff; color: #0d2345; padding: 0.45rem 0.75rem; border-radius: 0.6rem; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .social-icon:hover { background: #dce7ff; transform: translateY(-2px); } .footer-bottom { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.9rem; color: #4a5d74; border-top: 1px solid rgba(0, 0, 0, 0.05); } @media (max-width: 768px) { .footer-container { grid-template-columns: 1fr; gap: 2rem; } } /* Utility */ .subtle { color: var(--muted); } .grid-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .stack { display: grid; gap: 0.75rem; } /* Mobile nav */ @media (max-width: 768px) { .nav-toggle { display: block; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: #ffffff; padding: 0.75rem 1.25rem 1rem; gap: 0.5rem; border-bottom: 1px solid rgba(15, 35, 64, 0.06); display: none; } .nav-links.open { display: flex; } .dropdown-menu { position: static; box-shadow: none; border-radius: 0.5rem; padding-left: 0.75rem; margin-top: 0.2rem; } } .resource-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; } @media (max-width: 900px){ .resource-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px){ .resource-grid{ grid-template-columns: 1fr; } } .resource-card{ background:#fff; border:1px solid #e6eef7; border-radius: 16px; padding: 1.25rem; box-shadow: 0 6px 22px rgba(0,0,0,0.05); } .resource-title{ margin: 0 0 .35rem; font-size: 1.1rem; } .resource-meta{ margin: 0 0 .75rem; color:#4a5d74; font-size:.95rem; } .resource-overview{ margin: 0 0 .75rem; color:#1f2b3a; } .resource-preview{ background:#f3f7ff; border-radius: 12px; padding: .75rem; color:#1f2b3a; } .resource-actions{ margin-top: 1rem; display:flex; gap:.5rem; flex-wrap: wrap; } .resources-controls{ display:grid; grid-template-columns: 1fr 240px 240px; gap: .75rem; margin-top: 1rem; } @media (max-width: 800px){ .resources-controls{ grid-template-columns: 1fr; } } .resources-search{ width:100%; padding: .9rem 1rem; border-radius: 12px; border: 1px solid #dfe8f5; font-size: 1rem; } .resources-footer{ display:flex; justify-content:center; margin-top: 1.5rem; } .resources-hint{ text-align:center; margin-top: .75rem; color:#4a5d74; } .resource-detail-page .back-link{ display:inline-block; margin: 1rem 0; color:#234; text-decoration:none; } .resource-detail-card{ margin-top: 1rem; background:#fff; border:1px solid #e6eef7; border-radius: 16px; padding: 1.25rem; } .resource-detail-actions{ display:flex; gap:.5rem; flex-wrap: wrap; margin-top: .75rem; } .question-list{ padding-left: 1.25rem; } .resources-loading{ color:#4a5d74; padding: 1rem 0; } .mcq-list{ display:grid; gap:1rem; margin-top:0.75rem; } .mcq-card{ background:#fff; border:1px solid #e6eef7; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 6px 18px rgba(0,0,0,0.04); } .mcq-question{ margin:0 0 .6rem; color:#0d2345; font-size:1.05rem; } .mcq-options{ list-style:none; padding:0; margin:0 0 .75rem; display:grid; gap:.45rem; } .mcq-option label{ display:flex; gap:.65rem; align-items:flex-start; justify-content:flex-start; background:#f6f8ff; border:1px solid #e1e9fb; border-radius:10px; padding:.65rem .75rem; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .mcq-option input{ margin-top:0.15rem; } .mcq-option-inner{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; flex-direction:row-reverse; gap:1rem; } .mcq-option-text{ display:block; flex:1; color:#0d2345; line-height:1.4; } .mcq-option label:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(13,35,69,0.08); border-color:#cddaf7; } .mcq-actions{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; } .mcq-result{ font-weight:700; color:#0d2345; } .mcq-result.correct{ color:#1b7b3a; } .mcq-result.incorrect{ color:#b23b3b; } .mcq-rationale{ margin:.35rem 0 0; color:#415a77; } .question-stack{ display:grid; gap:1rem; margin-top:0.75rem; } .question-card{ display:grid; grid-template-columns:auto 1fr; gap:0.75rem; align-items:flex-start; background:#fff; border:1px solid #e6eef7; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 6px 18px rgba(0,0,0,0.04); } .question-number{ width:34px; height:34px; border-radius:10px; background:#eef3ff; color:#0d2345; font-weight:700; display:flex; align-items:center; justify-content:center; } .question-body .q-prompt{ margin:0 0 .6rem; font-weight:700; color:#0d2345; } .q-options{ margin:0 0 .6rem; padding-left:1.1rem; color:#0d2345; } .q-answerbox{ grid-column:1 / -1; background:#f6f8ff; border:1px dashed #d1dbf5; border-radius:10px; padding:.65rem .75rem; font-style:italic; } .question-select{ width:100%; padding:.65rem .75rem; border-radius:10px; border:1px solid #d1dbf5; background:#fff; color:#0d2345; margin-bottom:.6rem; } .question-actions{ display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin-bottom:.35rem; } .question-result{ font-weight:700; color:#0d2345; } .question-result.correct{ color:#1b7b3a; } .question-result.incorrect{ color:#b23b3b; } .question-card.correct{ border-color:#b7e4c7; box-shadow:0 8px 22px rgba(27,123,58,0.12); } .question-card.incorrect{ border-color:#f4c7c7; box-shadow:0 8px 22px rgba(178,59,59,0.12); } /* Page hero (shared for landing pages) */ .hero-section{ padding:3.25rem 0; background: radial-gradient(circle at top left, #e8f1ff 0%, #f7faff 45%, transparent 100%); } .online-hero{ background: linear-gradient(135deg, rgba(10,37,80,0.55), rgba(10,37,80,0.35)), url("online-hero.jpg") center/cover no-repeat; color:#fff; } .online-hero .hero-card{ background: rgba(255,255,255,0.9); color:#0d2345; backdrop-filter: blur(6px); } .hero-card{ background:#fff; border-radius:24px; border-top:4px solid #f6c343; box-shadow:0 18px 40px rgba(10,35,80,0.14); padding:2.2rem 2.4rem; margin:0 auto; } .hero-top h1{ margin:0 0 .75rem; font-size:clamp(1.8rem, 3vw, 2.3rem); color:#0d2345; } .hero-top p{ margin:0 0 1.2rem; color:#1f2b3a; max-width:720px; } .hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; } .hero-tags{ display:flex; gap:.5rem; flex-wrap:wrap; } .tag{ padding:0.35rem 0.8rem; border-radius:999px; background:#e4edff; color:#0d2345; font-weight:700; font-size:.9rem; } .tag--highlight{ background:#fff1c7; color:#764300; } .lesson-layout{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap:1.5rem; align-items:center; } .lesson-media{ border-radius:18px; overflow:hidden; box-shadow:0 14px 34px rgba(10,35,80,0.16); } .lesson-media img{ display:block; width:100%; height:100%; object-fit:cover; } @media (max-width: 900px){ .lesson-layout{ grid-template-columns: 1fr; } } .form-error{color:#b23b3b;font-weight:700;margin:0.5rem 0 0;}