/** * LearnDash Start Course/Group Buttons - Frontend Styles * * WCAG AAA Compliant Colors: * Background: #2D7A2D (Brightest green that passes AAA with #f6f6f6) * Text: #f6f6f6 * Contrast Ratio: 7:1 */ .ldsb-button-wrapper { margin: 20px 0; display: block; width: 100%; } .ldsb-start-button { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; background-color: #2d7a2d; /* Brightest green that passes WCAG AAA with #f6f6f6 */ color: #f6f6f6; text-decoration: none; border-radius: 8px; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(45, 122, 45, 0.3); transition: all 0.3s ease; border: none; cursor: pointer; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } .ldsb-start-button:hover { background-color: #245f24; color: #ffffff; box-shadow: 0 6px 20px rgba(45, 122, 45, 0.4); transform: translateY(-2px); text-decoration: none; } .ldsb-start-button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(45, 122, 45, 0.3); } .ldsb-start-button:focus { outline: 3px solid #5ea85e; outline-offset: 2px; } .ldsb-button-text { font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 1.2; } .ldsb-button-arrow { width: 24px; height: 24px; transition: transform 0.3s ease; flex-shrink: 0; } .ldsb-start-button:hover .ldsb-button-arrow { transform: translateX(4px); } /* Ensure proper visibility in different contexts */ .entry-content .ldsb-start-button, .learndash-wrapper .ldsb-start-button { display: inline-flex; } /* Alignment options - using both text-align and flex for better compatibility */ .ldsb-button-wrapper.align-left { text-align: left; } .ldsb-button-wrapper.align-center { text-align: center; } .ldsb-button-wrapper.align-center .ldsb-start-button { margin-left: auto; margin-right: auto; } .ldsb-button-wrapper.align-right { text-align: right; } .ldsb-button-wrapper.align-right .ldsb-start-button { margin-left: auto; } /* Full width option */ .ldsb-button-wrapper.align-full .ldsb-start-button, .ldsb-button-wrapper.full-width .ldsb-start-button { width: 100%; justify-content: center; } /* Wide alignment */ .ldsb-button-wrapper.align-wide { max-width: 100%; width: 100%; } .ldsb-button-wrapper.align-wide .ldsb-start-button { width: 100%; max-width: 600px; margin: 0 auto; justify-content: center; } /* Mobile responsive styles */ @media (max-width: 480px) { .ldsb-start-button { padding: 14px 24px; font-size: 16px; width: 100%; justify-content: center; } .ldsb-button-text { font-size: 16px; } .ldsb-button-arrow { width: 20px; height: 20px; } } /* Tablet styles */ @media (min-width: 481px) and (max-width: 768px) { .ldsb-start-button { padding: 15px 28px; font-size: 17px; } .ldsb-button-text { font-size: 17px; } } /* High contrast mode support */ @media (prefers-contrast: high) { .ldsb-start-button { border: 2px solid currentColor; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .ldsb-start-button, .ldsb-button-arrow { transition: none; } .ldsb-start-button:hover { transform: none; } .ldsb-start-button:hover .ldsb-button-arrow { transform: none; } }