/** * ThinkForge Rem Base Fix * * Forces a 16px base font for all ThinkForge plugin content, * regardless of the theme's root font-size. * This ensures Tailwind CSS classes work correctly even when * sites use html { font-size: 10px; } or other non-standard bases. * * Problem: Tailwind uses rem units which ALWAYS reference the root element. * When a site has html { font-size: 10px }, Tailwind's text-sm (0.875rem) = 8.75px. * * Solution: Override all Tailwind text utilities within our plugin containers * to use pixel values equivalent to a 16px base. */ /* Workshop single page containers */ .workshop-container, .lms-workshop-container, .lms-workshop-main-content, .workshop-content, /* Dashboard and shortcode containers */ .thinkforge-workshop-content, .thinkforge-dashboard-shell, .thinkforge-dashboard-page, .thinkforge-course-grid, .thinkforge-container, .thinkforge-wrap { /* Force 16px base for our plugin content */ font-size: 16px !important; } /* Override Tailwind rem-based text utilities within our containers */ /* Scale factor: 16px / 10px = 1.6 */ .workshop-container .text-xs, .lms-workshop-container .text-xs, .lms-workshop-main-content .text-xs { font-size: 12px !important; } /* 0.75rem × 16 = 12px */ .workshop-container .text-sm, .lms-workshop-container .text-sm, .lms-workshop-main-content .text-sm { font-size: 14px !important; } /* 0.875rem × 16 = 14px */ .workshop-container .text-base, .lms-workshop-container .text-base, .lms-workshop-main-content .text-base { font-size: 16px !important; } /* 1rem × 16 = 16px */ .workshop-container .text-lg, .lms-workshop-container .text-lg, .lms-workshop-main-content .text-lg { font-size: 18px !important; } /* 1.125rem × 16 = 18px */ .workshop-container .text-xl, .lms-workshop-container .text-xl, .lms-workshop-main-content .text-xl { font-size: 20px !important; } /* 1.25rem × 16 = 20px */ .workshop-container .text-2xl, .lms-workshop-container .text-2xl, .lms-workshop-main-content .text-2xl { font-size: 24px !important; } /* 1.5rem × 16 = 24px */ .workshop-container .text-3xl, .lms-workshop-container .text-3xl, .lms-workshop-main-content .text-3xl { font-size: 30px !important; } /* 1.875rem × 16 = 30px */ .workshop-container .text-4xl, .lms-workshop-container .text-4xl, .lms-workshop-main-content .text-4xl { font-size: 36px !important; } /* 2.25rem × 16 = 36px */ /* Override specific elements that use rem directly in their styles */ .workshop-tabs .tab-button { font-size: 14px !important; } /* Was 0.875rem */