/* ═══════════════════════════════════════════════════════════════ WordGravity UI Enhancement Layer — global overrides Injected into every template via in ═══════════════════════════════════════════════════════════════ */ /* ── 1. GLOBAL TYPOGRAPHY & SIZING ───────────────────────────── */ html { font-size: 17px; scroll-behavior: smooth; } body { font-size: 1.08rem; line-height: 1.72; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 2. FULL-WIDTH CONTAINERS ─────────────────────────────────── */ .container, main, .page, main > .container { max-width: 1480px !important; padding-left: clamp(1.25rem, 3vw, 3rem) !important; padding-right: clamp(1.25rem, 3vw, 3rem) !important; width: 100% !important; } /* dashboard specific container */ .container { max-width: 1480px !important; } /* ── 3. NAVBAR HEIGHT & PADDING ──────────────────────────────── */ nav, .site-nav { height: auto !important; padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; padding-left: clamp(1.25rem, 3vw, 3rem) !important; padding-right: clamp(1.25rem, 3vw, 3rem) !important; } .nav-brand-name, .brand, .brand span { font-size: 1.45rem !important; } .nav-logo, .logo-sq { width: 46px !important; height: 46px !important; font-size: 0.9rem !important; border-radius: 12px !important; } .nav-link { font-size: 1rem !important; padding: 0.55rem 1.15rem !important; } .nav-login, .btn-ghost { font-size: 0.95rem !important; padding: 0.6rem 1.3rem !important; } .nav-cta { font-size: 0.98rem !important; padding: 0.65rem 1.5rem !important; } /* ── 4. HEADING SCALE ─────────────────────────────────────────── */ h1 { font-size: clamp(2.4rem, 5vw, 3.8rem) !important; line-height: 1.1 !important; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; line-height: 1.2 !important; } h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important; line-height: 1.3 !important; } h4 { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; } h5, h6 { font-size: clamp(0.95rem, 1.5vw, 1.2rem) !important; } /* ── 5. BUTTONS ──────────────────────────────────────────────── */ .btn, button.btn, a.btn, .btn-primary, .btn-next, .btn-finish, .sc-btn, .nav-cta { font-size: 1rem !important; padding: 0.8rem 1.8rem !important; border-radius: 12px !important; min-height: 46px !important; } .btn.sm, .btn-sm { font-size: 0.88rem !important; padding: 0.55rem 1.1rem !important; min-height: 36px !important; } .btn.teal, .btn.danger { font-size: 1rem !important; padding: 0.8rem 1.8rem !important; } /* ── 6. CARDS ────────────────────────────────────────────────── */ .card, .session-card, .course-card, .stat-card, .price-card, .act-card, .pf-card, .step-card { border-radius: 20px !important; padding: 1.9rem 2.1rem !important; } /* ── 7. FORM INPUTS ──────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select, .field input, .field textarea, .field select, .form-input, .form-textarea, .form-select, .tag-input { font-size: 1.05rem !important; padding: 0.9rem 1.15rem !important; border-radius: 12px !important; min-height: 50px !important; } textarea, .field textarea { min-height: 100px !important; } /* ── 8. FIELD LABELS ─────────────────────────────────────────── */ .field label, label, .form-label { font-size: 0.88rem !important; margin-bottom: 0.55rem !important; } /* ── 9. TABLES ───────────────────────────────────────────────── */ table { width: 100% !important; } thead th { font-size: 0.82rem !important; padding: 1rem 1.4rem !important; letter-spacing: 0.06em !important; } tbody td { font-size: 0.97rem !important; padding: 1rem 1.4rem !important; } .table-wrap { border-radius: 16px !important; overflow: hidden !important; } /* ── 10. SESSIONS LIST — PAGE ────────────────────────────────── */ .sessions-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; gap: 1.8rem !important; } .session-card .sc-name { font-size: 1.25rem !important; font-weight: 700 !important; } .session-card .sc-topic { font-size: 1rem !important; } .session-card .sc-btn { font-size: 0.95rem !important; padding: 0.65rem 1.4rem !important; } /* ── 11. SEARCH BAR ──────────────────────────────────────────── */ .search-bar, .search-wrap { max-width: 680px !important; padding: 0.9rem 1.3rem !important; } .search-bar input, .search-wrap input { font-size: 1.05rem !important; } /* ── 12. DASHBOARD — SESSION ROWS ───────────────────────────── */ .session-row { border-radius: 16px !important; padding: 1.3rem 1.6rem !important; } .sr-name { font-size: 1.45rem !important; } .sr-meta-tag { font-size: 0.72rem !important; padding: 0.3rem 0.75rem !important; } /* ── 13. TAB BUTTONS ─────────────────────────────────────────── */ .tab-btn, .tab, .tabs .tab { font-size: 0.82rem !important; padding: 0.9rem 1.6rem !important; } /* ── 14. PAGE HEADERS ────────────────────────────────────────── */ .page-header { margin-bottom: 3rem !important; } .page-title { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; font-weight: 800 !important; } .page-eyebrow { font-size: 0.8rem !important; letter-spacing: 0.3em !important; margin-bottom: 0.75rem !important; } .page-sub { font-size: 1.1rem !important; } /* masthead / section headers */ .masthead h1 { font-size: clamp(3rem, 7vw, 5rem) !important; } .eyebrow { font-size: 0.82rem !important; } /* ── 15. STAT CARDS ──────────────────────────────────────────── */ .stat-card { padding: 1.6rem 1.8rem !important; border-radius: 18px !important; } .stat-value, .stat-num { font-size: 2.6rem !important; line-height: 1 !important; } .stat-label, .stat-lbl { font-size: 0.82rem !important; } /* ── 16. SECTION TITLES ──────────────────────────────────────── */ .section-title { font-size: clamp(2rem, 4.5vw, 3rem) !important; } .section-sub { font-size: 1.05rem !important; } /* ── 17. PRICING CARDS ───────────────────────────────────────── */ .price-amount { font-size: 3.4rem !important; } .price-features li { font-size: 0.97rem !important; } /* ── 18. TOAST ───────────────────────────────────────────────── */ .toast { font-size: 0.85rem !important; padding: 0.9rem 1.8rem !important; } /* ── 19. FOOTER ──────────────────────────────────────────────── */ .footer-col-links a { font-size: 0.95rem !important; } .footer-col-title { font-size: 0.82rem !important; } .footer-tagline { font-size: 0.95rem !important; } /* ── 20. BADGES / PILLS ──────────────────────────────────────── */ .meta-pill, .level-badge, .sc-level, .badge-active, .badge-inactive, .role-badge, .pill-indigo, .pill-teal, .pill-amber { font-size: 0.78rem !important; padding: 0.32rem 0.85rem !important; } /* ── 21. GAME ROW (dashboard) ────────────────────────────────── */ .game-row { padding: 1rem 1.3rem !important; border-radius: 13px !important; } .gr-icon { font-size: 1.6rem !important; } .gr-name { font-size: 0.82rem !important; } .gr-desc { font-size: 0.97rem !important; } /* ── 22. SESSION.HTML — TOPBAR & TABS ───────────────────────── */ .topbar { padding: 0.7rem 1.5rem !important; } .session-name { font-size: 1.6rem !important; } .tabs .tab { padding: 0.85rem 1.5rem !important; font-size: 0.75rem !important; } .tab-icon { font-size: 1.2rem !important; } .btn-back { font-size: 0.72rem !important; padding: 0.45rem 0.9rem !important; } /* ── 23. COMPLETE OVERLAY ────────────────────────────────────── */ .complete-card { padding: 3rem 2.5rem !important; max-width: 480px !important; border-radius: 24px !important; } .complete-card h2 { font-size: 2.2rem !important; } .complete-card p { font-size: 1.02rem !important; } .complete-card .cc-icon { font-size: 4rem !important; } /* ── 24. BUILD / SOURCE CARDS ────────────────────────────────── */ .source-card { padding: 1.3rem 1.4rem !important; border-radius: 14px !important; } .source-card .sc-icon { font-size: 2.2rem !important; } .source-card .sc-title { font-size: 0.82rem !important; } .source-card .sc-desc { font-size: 1rem !important; } /* ── 25. AI STREAM BOX ───────────────────────────────────────── */ .ai-stream-box { font-size: 0.9rem !important; line-height: 1.85 !important; padding: 1.1rem 1.3rem !important; } /* ── 26. LOGIN CARD ──────────────────────────────────────────── */ .card.login-card, body > .card { max-width: 480px !important; padding: 3rem 2.75rem !important; border-radius: 22px !important; } /* ── 27. SECTION SPACING ─────────────────────────────────────── */ section { padding: 7rem clamp(1.25rem, 3vw, 3rem) !important; } /* ── 28. ACTIVITIES GRID ─────────────────────────────────────── */ .activities-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 1.8rem !important; } .act-card { padding: 2rem 1.8rem !important; } .act-icon { width: 60px !important; height: 60px !important; border-radius: 16px !important; margin-bottom: 1.2rem !important; } .act-title { font-size: 1.15rem !important; } .act-desc { font-size: 0.95rem !important; } /* ── 29. HOW-IT-WORKS STEPS ──────────────────────────────────── */ .step-card { padding: 2.2rem 1.8rem !important; border-radius: 24px !important; } .step-title { font-size: 1.15rem !important; } .step-desc { font-size: 0.97rem !important; } .step-num { font-size: 3.5rem !important; } /* ── 30. COURSES GRID ────────────────────────────────────────── */ .course-grid, .sessions-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; gap: 1.8rem !important; } .course-card { padding: 1.8rem 2rem !important; border-radius: 20px !important; } .course-title { font-size: 1.2rem !important; } .course-icon { width: 52px !important; height: 52px !important; border-radius: 13px !important; } /* ── 31. RESPONSIVE BREAKPOINTS ──────────────────────────────── */ @media (max-width: 1200px) { .container, main, .page { max-width: 100% !important; } } @media (max-width: 768px) { html { font-size: 15px; } h1 { font-size: clamp(2rem, 7vw, 3rem) !important; } .sessions-grid, .course-grid { grid-template-columns: 1fr !important; } .card, .session-card, .course-card { padding: 1.4rem 1.5rem !important; } .btn { min-height: 44px !important; font-size: 0.97rem !important; } } @media (max-width: 480px) { html { font-size: 14px; } nav, .site-nav { padding-left: 1rem !important; padding-right: 1rem !important; } } /* ── 32. SCROLLBAR STYLING ───────────────────────────────────── */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); } ::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.35); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: rgba(124,58,237,0.6); } /* ── 33. FOCUS RING ──────────────────────────────────────────── */ :focus-visible { outline: 2px solid rgba(124,58,237,0.7); outline-offset: 3px; border-radius: 4px; } /* ── 34. ADMIN DASHBOARD — FULL WIDTH ────────────────────────── */ main { max-width: 1480px !important; } .stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 1.2rem !important; } /* ── 35. CARD-TITLE MONO LABELS ──────────────────────────────── */ .card-title { font-size: 0.82rem !important; letter-spacing: 0.24em !important; margin-bottom: 1.3rem !important; } /* ── 36. NEXT BANNER ─────────────────────────────────────────── */ .next-banner { padding: 0.9rem 1.5rem !important; } .nb-text { font-size: 1.08rem !important; } .btn-next { font-size: 0.7rem !important; padding: 0.6rem 1.3rem !important; } /* ── 37. PREVIEW OVERLAY ─────────────────────────────────────── */ .preview-wrap { max-width: 1100px !important; } .preview-header h2 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; } /* ── 38. TAG INPUT CHIPS ─────────────────────────────────────── */ .tag-chip { font-size: 0.75rem !important; padding: 0.32rem 0.85rem !important; } .tag-input { font-size: 1.05rem !important; } /* ── 39. LEVEL PILLS ─────────────────────────────────────────── */ .level-pill { font-size: 0.78rem !important; padding: 0.5rem 1.1rem !important; border-radius: 999px !important; } /* ── 40. SP-CHIPS (AI start points) ─────────────────────────── */ .sp-chip { font-size: 0.97rem !important; padding: 0.42rem 1rem !important; } /* ── 41. COST PANEL ──────────────────────────────────────────── */ .cost-row-label { font-size: 0.78rem !important; } .cost-row-usd { font-size: 0.88rem !important; } .cost-total { font-size: 1.15rem !important; } /* ── 42. SECTION BLOCKS (dashboard) ─────────────────────────── */ .section-header .sh-game { font-size: 0.82rem !important; } .section-header .sh-sub { font-size: 0.97rem !important; } .section-body { padding: 1.2rem 1.3rem !important; } /* ── 43. HERO CTA BUTTONS ────────────────────────────────────── */ .btn-primary { font-size: 1.1rem !important; padding: 1.05rem 2.5rem !important; border-radius: 16px !important; } .btn-ghost { font-size: 1.05rem !important; padding: 1.05rem 2.1rem !important; border-radius: 16px !important; } /* ── 44. HERO TRUST BAR ──────────────────────────────────────── */ .trust-item { font-size: 0.9rem !important; } /* ── 45. TESTIMONIAL CARDS ───────────────────────────────────── */ .testi-card { padding: 2rem 1.8rem !important; border-radius: 22px !important; } .testi-text { font-size: 1rem !important; line-height: 1.8 !important; } .testi-name { font-size: 0.95rem !important; } .testi-role { font-size: 0.85rem !important; } /* ── 46. ROLE CONTENT ────────────────────────────────────────── */ .role-info h3 { font-size: 1.9rem !important; } .role-info p { font-size: 1.05rem !important; line-height: 1.85 !important; } .role-features li { font-size: 1.02rem !important; } /* ── 47. CONTACT SECTION ─────────────────────────────────────── */ .contact-info h3 { font-size: 1.75rem !important; } .contact-info p { font-size: 1.02rem !important; } /* ── 48. GR-ORDER bubble ─────────────────────────────────────── */ .gr-order { width: 28px !important; height: 28px !important; font-size: 0.72rem !important; } /* ── 49. BUILD STEPS ─────────────────────────────────────────── */ .build-step { padding: 0.95rem 1.25rem !important; border-radius: 12px !important; } .bs-title { font-size: 0.82rem !important; } .bs-sub { font-size: 0.97rem !important; }