/** * Theme Name: Vocal Mastery * Author: Sparkloom Digital * Author URI: https://sparkloom.digital/ * Description: Custom child theme developed for vocal mastery website. * Version: 1.1.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Text Domain: vocal-mastery * Template: astra * * TABLE OF CONTENTS * ----------------- * 0. Custom Properties (Design Tokens) * 1. Reset & Base * 2. Accessibility — Focus States * 3. Decorative Elements (Sparks, Underlines, Overlays) * 4. Buttons * 5. Video Components * 6. Slick Carousel / Testimonials * 7. Brand Slider * 8. Header * 9. Mobile Navigation * 10. Home Page — Hero Animation * 11. Home Page — Commands & Performance Mode * 12. Social Proof Badge * 13. Meet Your Teacher — Polaroid Stack * 14. Meet Your Teacher — GIF Scroller * 15. Scrolling Text Column * 16. FAQ Section * 17. Course Landing Page — Layout & CTA * 18. Course Landing Page — Highlights, Meta, Learnings * 19. Course Landing Page — Ideal Target * 20. Course Landing Page — Curriculum Accordion * 21. Course Landing Page — Video Testimonials * 22. Allegri Foundation — Polaroid 3D * 23. LearnDash Overrides */ /* =========================================== 0. CUSTOM PROPERTIES (DESIGN TOKENS) =========================================== */ :root { /* Repeated colour values used outside WP/Astra vars */ --vm-white: #ffffff; --vm-focus-ring: #0055ce; --vm-underline-color-gold: #ffc27a; --vm-underline-color-white: #fbfbfd; --vm-pink-accent: #f34692; --vm-blue-accent: #0055ce; /* Shared transition */ --vm-transition-lift: transform 0.25s ease, box-shadow 0.25s ease; /* Arrow-button icon (shared between header CTA, block buttons, CL CTA) */ --vm-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z'/%3E%3C/svg%3E"); --vm-arrow-icon-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230055ce' d='M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z'/%3E%3C/svg%3E"); } /* =========================================== 1. RESET & BASE =========================================== */ html { scroll-behavior: smooth; } html, body { overflow-x: clip !important; } [id^="uagb-tabs__tab"] { scroll-margin-top: 120px; } /* =========================================== 2. ACCESSIBILITY — FOCUS STATES Replace blanket outline:none with a custom visible focus ring that matches brand style. =========================================== */ a:focus-visible, button:focus-visible, #ast-scroll-top:focus-visible, .ast-custom-button-link:focus-visible, .ast-builder-button-wrap .ast-custom-button-link:focus-visible { outline: 2px solid var(--vm-focus-ring) !important; outline-offset: 2px; border-style: none !important; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), #ast-scroll-top:focus:not(:focus-visible), .ast-custom-button-link:focus:not(:focus-visible), .ast-builder-button-wrap .ast-custom-button-link:focus:not(:focus-visible), .ast-builder-button-wrap:has(.ast-custom-button-link:focus:not(:focus-visible)) { outline: none !important; border-style: none !important; } /* =========================================== 3. DECORATIVE ELEMENTS =========================================== */ /* --- Spark icons (shared base) --- */ span.vm-pink-spark, span.vm-blue-spark { width: 40px; height: 40px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 2px 30px 0; } span.vm-pink-spark { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.5047%2024.6797L16.8047%2032.0063C16.7248%2032.2216%2016.5809%2032.4073%2016.3924%2032.5384C16.2038%2032.6695%2015.9797%2032.7398%2015.75%2032.7398C15.5204%2032.7398%2015.2962%2032.6695%2015.1077%2032.5384C14.9191%2032.4073%2014.7752%2032.2216%2014.6953%2032.0063L11.9953%2024.6797C11.9384%2024.5251%2011.8485%2024.3846%2011.732%2024.2681C11.6154%2024.1516%2011.475%2024.0617%2011.3203%2024.0047L3.99377%2021.3047C3.77847%2021.2248%203.59279%2021.0809%203.46166%2020.8924C3.33054%2020.7038%203.26025%2020.4797%203.26025%2020.25C3.26025%2020.0204%203.33054%2019.7962%203.46166%2019.6077C3.59279%2019.4191%203.77847%2019.2752%203.99377%2019.1953L11.3203%2016.4953C11.475%2016.4384%2011.6154%2016.3485%2011.732%2016.232C11.8485%2016.1154%2011.9384%2015.975%2011.9953%2015.8203L14.6953%208.49377C14.7752%208.27847%2014.9191%208.09279%2015.1077%207.96166C15.2962%207.83054%2015.5204%207.76025%2015.75%207.76025C15.9797%207.76025%2016.2038%207.83054%2016.3924%207.96166C16.5809%208.09279%2016.7248%208.27847%2016.8047%208.49377L19.5047%2015.8203C19.5617%2015.975%2019.6516%2016.1154%2019.7681%2016.232C19.8846%2016.3485%2020.0251%2016.4384%2020.1797%2016.4953L27.5063%2019.1953C27.7216%2019.2752%2027.9073%2019.4191%2028.0384%2019.6077C28.1695%2019.7962%2028.2398%2020.0204%2028.2398%2020.25C28.2398%2020.4797%2028.1695%2020.7038%2028.0384%2020.8924C27.9073%2021.0809%2027.7216%2021.2248%2027.5063%2021.3047L20.1797%2024.0047C20.0251%2024.0617%2019.8846%2024.1516%2019.7681%2024.2681C19.6516%2024.3846%2019.5617%2024.5251%2019.5047%2024.6797Z%22%20fill%3D%22%23F34692%22%2F%3E%3Cpath%20d%3D%22M24.75%202.25V9%22%20stroke%3D%22%23F34692%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28.125%205.625H21.375%22%20stroke%3D%22%23F34692%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M31.5%2010.125V14.625%22%20stroke%3D%22%23F34692%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M33.75%2012.375H29.25%22%20stroke%3D%22%23F34692%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } span.vm-blue-spark { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.5047%2024.6797L16.8047%2032.0063C16.7248%2032.2216%2016.5809%2032.4073%2016.3924%2032.5384C16.2038%2032.6695%2015.9797%2032.7398%2015.75%2032.7398C15.5204%2032.7398%2015.2962%2032.6695%2015.1077%2032.5384C14.9191%2032.4073%2014.7752%2032.2216%2014.6953%2032.0063L11.9953%2024.6797C11.9384%2024.5251%2011.8485%2024.3846%2011.732%2024.2681C11.6154%2024.1516%2011.475%2024.0617%2011.3203%2024.0047L3.99377%2021.3047C3.77847%2021.2248%203.59279%2021.0809%203.46166%2020.8924C3.33054%2020.7038%203.26025%2020.4797%203.26025%2020.25C3.26025%2020.0204%203.33054%2019.7962%203.46166%2019.6077C3.59279%2019.4191%203.77847%2019.2752%203.99377%2019.1953L11.3203%2016.4953C11.475%2016.4384%2011.6154%2016.3485%2011.732%2016.232C11.8485%2016.1154%2011.9384%2015.975%2011.9953%2015.8203L14.6953%208.49377C14.7752%208.27847%2014.9191%208.09279%2015.1077%207.96166C15.2962%207.83054%2015.5204%207.76025%2015.75%207.76025C15.9797%207.76025%2016.2038%207.83054%2016.3924%207.96166C16.5809%208.09279%2016.7248%208.27847%2016.8047%208.49377L19.5047%2015.8203C19.5617%2015.975%2019.6516%2016.1154%2019.7681%2016.232C19.8846%2016.3485%2020.0251%2016.4384%2020.1797%2016.4953L27.5063%2019.1953C27.7216%2019.2752%2027.9073%2019.4191%2028.0384%2019.6077C28.1695%2019.7962%2028.2398%2020.0204%2028.2398%2020.25C28.2398%2020.4797%2028.1695%2020.7038%2028.0384%2020.8924C27.9073%2021.0809%2027.7216%2021.2248%2027.5063%2021.3047L20.1797%2024.0047C20.0251%2024.0617%2019.8846%2024.1516%2019.7681%2024.2681C19.6516%2024.3846%2019.5617%2024.5251%2019.5047%2024.6797Z%22%20fill%3D%22%230055CE%22%2F%3E%3Cpath%20d%3D%22M24.75%202.25V9%22%20stroke%3D%22%230055CE%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28.125%205.625H21.375%22%20stroke%3D%22%230055CE%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M31.5%2010.125V14.625%22%20stroke%3D%22%230055CE%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M33.75%2012.375H29.25%22%20stroke%3D%22%230055CE%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } @media (max-width: 768px) { span.vm-pink-spark, span.vm-blue-spark { margin: 0 0 10px 0; } } /* --- Underlines (shared base + size modifiers) --- */ .vm-underline-sm, .vm-underline-md, .vm-underline-lg, .vm-underline-xl { position: relative; } .vm-underline-sm::after, .vm-underline-md::after, .vm-underline-lg::after, .vm-underline-xl::after { content: ""; display: block; width: 100%; background-size: contain; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; } .vm-underline-sm::after { height: 10px; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22121%22%20height%3D%2210%22%20viewBox%3D%220%200%20121%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.99975%207.81404C27.9746%204.49737%2056.2135%20-3.42%20118.047%207.81332%22%20stroke%3D%22%23FFC27A%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } .vm-underline-md::after { height: 10px; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22137%22%20height%3D%2210%22%20viewBox%3D%220%200%20137%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M134.491%202.00031C108.613%206.00031%2064.1084%2011.6004%202.00011%202.00037%22%20stroke%3D%22%23FFC27A%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } .vm-underline-lg::after { height: 14px; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22254%22%20height%3D%2210%22%20viewBox%3D%220%200%20254%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M251.555%202.00031C225.676%206.00031%2064.1083%2011.6003%202.00003%202.00025%22%20stroke%3D%22%23FFC27A%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } .vm-underline-xl::after { height: 16px; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22383%22%20height%3D%2210%22%20viewBox%3D%220%200%20383%2010%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M380.939%202C355.061%206%2064.109%2011.6%202%202%22%20stroke%3D%22%23ffc27a%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } /* Underline modifiers: inverted, white, lower */ .vm-underline-xl.inverted::after, .vm-underline-lg.inverted::after, .vm-underline-md.inverted::after, .vm-underline-sm.inverted::after { transform: rotate(180deg); bottom: 1px; } .vm-underline-sm.white::after { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22139%22%20height%3D%2211%22%20viewBox%3D%220%200%20139%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%206.02c11.644-3.695%20106.756-7.816%20134.195%202.51%22%20stroke%3D%22%23fbfbfd%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } .vm-underline-lg.white::after { background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22255%22%20height%3D%2213%22%20viewBox%3D%220%200%20255%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2%204.694c21.672-3.43%20199.289-5.377%20250.794%205.584%22%20stroke%3D%22%23fbfbfd%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E'); } .vm-underline-lg.lower::after { bottom: -2px; } /* --- Blurry Pink Overlay --- TODO: Move this SVG to /assets/svg/blurry-pink-overlay.svg */ .vm-blurry-pink-overlay::after { content: ""; display: block; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%221440%22%20height%3D%22492%22%20viewBox%3D%220%200%201440%20492%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_146_99)%22%3E%3Cg%20clip-path%3D%22url(%23clip1_146_99)%22%3E%3Cg%20filter%3D%22url(%23filter0_f_146_99)%22%3E%3Cellipse%20cx%3D%22785.218%22%20cy%3D%22724.769%22%20rx%3D%22656%22%20ry%3D%22256.5%22%20transform%3D%22rotate(12.6338%20785.218%20724.769)%22%20fill%3D%22%23F34692%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22filter0_f_146_99%22%20x%3D%22-91.3906%22%20y%3D%22202.222%22%20width%3D%221753.22%22%20height%3D%221045.09%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22shape%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%22117%22%20result%3D%22effect1_foregroundBlur_146_99%22%2F%3E%3C%2Ffilter%3E%3CclipPath%20id%3D%22clip0_146_99%22%3E%3Crect%20width%3D%221440%22%20height%3D%22492%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22clip1_146_99%22%3E%3Crect%20width%3D%221440%22%20height%3D%22492%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E'); background-position: bottom; width: 100%; height: 300px; position: absolute; bottom: 0; left: 0; z-index: 1; } /* =========================================== 4. BUTTONS Shared arrow-pill pattern used by UAGB buttons, header CTA, and course CTA. =========================================== */ /* Mixin-like: arrow icon pill positioned inside a button */ .vm-arrow-pill-after { position: relative; } .vm-arrow-pill-after::after { content: ""; display: block; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 8px; background: var(--ast-global-color-2); background-image: var(--vm-arrow-icon); background-repeat: no-repeat; background-position: center; background-size: 15px 15px; } /* UAGB Block Buttons */ .uagb-buttons-repeater.wp-block-button__link { position: relative; } .wp-block-uagb-buttons .uagb-button__icon.uagb-button__icon-position-after { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background: var(--ast-global-color-2); width: 36px; height: 36px; padding: 10px; border-radius: 8px; } .uagb-buttons__outer-wrap.wp-block-button { transition: var(--vm-transition-lift); border-radius: 8px; } .uagb-buttons__outer-wrap.wp-block-button:hover { transform: translateY(-2px); border-radius: 8px; box-shadow: 0 4px 12px rgba(233, 30, 99, 0.2), 0 8px 24px rgba(233, 30, 99, 0.1), 0 12px 32px rgba(0, 0, 0, 0.05); } /* =========================================== 5. VIDEO COMPONENTS =========================================== */ /* --- Video Play Button Overlay (image block) --- */ .vm-video-play .wp-block-uagb-image__figure { position: relative; } .vm-video-play .wp-block-uagb-image__figure::after { content: ""; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22136%22%20height%3D%22136%22%20viewBox%3D%220%200%20136%20136%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%2224%22%20y%3D%2224%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2244%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%22112%22%20height%3D%22112%22%20rx%3D%2256%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.32%22%20stroke-width%3D%2224%22%2F%3E%3Cpath%20d%3D%22m77.78%2066.72-13.499-8.25A1.5%201.5%200%200%200%2062%2059.751v16.498a1.501%201.501%200%200%200%202.282%201.28L77.78%2069.28a1.5%201.5%200%200%200%200-2.56%22%20fill%3D%22%230b63e5%22%2F%3E%3C%2Fsvg%3E'); background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%) scale(1); transition: transform 0.25s ease; } .vm-video-play .wp-block-uagb-image__figure:hover::after { transform: translate(-50%, -50%) scale(1.1); } /* --- Chrissellene Video Embed --- */ .vm-chrissellene-video iframe { border-radius: 15px; box-shadow: 12px 12px var(--wp--preset--color--pink-500); } @media (max-width: 768px) { .vm-chrissellene-video iframe { box-shadow: 5px 5px var(--wp--preset--color--pink-500); } } .vm-popup-video-cls { position: absolute; bottom: 0; right: 0; } /* --- Lazy Iframe Proxy (thumbnail → iframe swap) --- */ .vm-video-wrap { position: relative; padding-bottom: 56.25%; background: #111; cursor: pointer; overflow: hidden; } .vm-video-wrap img.vm-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .vm-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; padding: 0; background: var(--ast-global-color-4); border-radius: 50%; border: 10px solid #77696954; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vm-play-btn::after { content: ''; border-style: solid; border-width: 7px 0 7px 14px; border-color: transparent transparent transparent var(--ast-global-color-0); margin-left: 4px; } .vm-video-wrap:hover .vm-play-btn { background: #1ab7ea; border: 10px solid #77696954; transform: translate(-50%, -50%) scale(1.04); } .vm-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* =========================================== 6. SLICK CAROUSEL / TESTIMONIALS =========================================== */ .uagb-slick-carousel .slick-slide { position: relative; } .uagb-slick-carousel .slick-slide::before { content: ""; width: 100%; height: 15px; position: absolute; left: 24px; top: 20px; z-index: 2; display: block; background-image: url('https://woocommerce-697373-6151482.cloudwaysapps.com/wp-content/uploads/2026/03/star-rating-yellow.svg'); background-size: contain; background-repeat: no-repeat; } .uagb-slick-carousel .slick-slide::after { content: ""; width: 100%; max-width: 50px; height: 50px; position: absolute; right: 40px; bottom: 30px; z-index: 2; display: block; background-image: url('https://woocommerce-697373-6151482.cloudwaysapps.com/wp-content/uploads/2026/02/testimonial-quote.svg'); background-size: contain; background-repeat: no-repeat; } @media (max-width: 768px) { .uagb-slick-carousel .slick-slide::after { display: none !important; } } /* --- Testimonial Slider: Peek Effect --- */ .vm-global-testimonials, .vm-course-testimonials { overflow-x: hidden; overflow-y: visible; } .vm-global-testimonials ul.slick-dots, .vm-course-testimonials ul.slick-dots { position: relative !important; } .vm-global-testimonials button, .vm-course-testimonials button { box-shadow: none !important; } .vm-global-testimonials .uagb-tm__content { min-height: 325px; display: flex; } .vm-course-testimonials .uagb-tm__content { min-height: 350px; display: flex; } .vm-global-testimonials .uagb-testimonial__wrap, .vm-course-testimonials .uagb-testimonial__wrap { height: 100% !important; } .vm-global-testimonials .uagb-tm__text-wrap, .vm-course-testimonials .uagb-tm__text-wrap { display: flex; flex: 1; flex-direction: column; justify-content: space-between; } .vm-global-testimonials .is-carousel { margin-left: -10%; margin-right: -10%; } .vm-course-testimonials .is-carousel { margin-left: -40%; margin-right: -40%; } .vm-global-testimonials .slick-list, .vm-course-testimonials .slick-list { overflow: visible !important; } @media (max-width: 900px) { .vm-global-testimonials .is-carousel { margin-left: 0; margin-right: 0; min-height: 450px !important; } .vm-course-testimonials .is-carousel { margin-left: 0; margin-right: 0; } } @media (max-width: 767px) { .vm-global-testimonials, .vm-course-testimonials { overflow-x: hidden; overflow-y: visible; } .vm-global-testimonials .is-carousel, .vm-course-testimonials .is-carousel { margin-left: 0; margin-right: 0; padding: 0; } .vm-global-testimonials .uagb-tm__content { min-height: 460px; display: flex; } .vm-course-testimonials .uagb-tm__content { min-height: 480px; display: flex; } } /* =========================================== 7. BRAND SLIDER =========================================== */ .vm-brand-slider img { max-width: 150px; max-height: 40px; width: auto; height: auto; object-position: center; object-fit: contain; } /* =========================================== 8. HEADER =========================================== */ .ast-primary-header.main-header-bar { border: none !important; } .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle { padding: 0 !important; } .ast-mobile-header-wrap .ast-header-sticked { top: 0 !important; max-width: 100% !important; } .ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item > a.menu-link { line-height: 40px; border-radius: 8px; margin-right: 3px; } .ast-header-button-4 .ast-custom-button-link, .spectra-pro-login-form-submit-button { position: relative; } .ast-header-button-4:hover, .ast-header-button-1:hover { transform: translateY(-2px); } .site-header-focus-item.ast-header-button-4 .ast-custom-button-link::after, .spectra-pro-login-form-submit-button::after { content: ""; display: block; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background: var(--ast-global-color-2); width: 36px; height: 36px; padding: 10px; border-radius: 8px; background-image: var(--vm-arrow-icon); background-repeat: no-repeat; background-position: center; background-size: 15px 15px; } .ast-mobile-header-content { background-color: transparent !important; } /* =========================================== 9. MOBILE NAVIGATION =========================================== */ nav#ast-mobile-site-navigation { padding: 0; } nav#ast-mobile-site-navigation .main-navigation { margin: -1rem auto auto auto; width: 100%; padding: 1rem 1rem 4rem 1rem; border-radius: 14px; } nav#ast-mobile-site-navigation a, nav#ast-mobile-site-navigation ul { border-radius: 12px; } nav#ast-mobile-site-navigation ul#ast-hf-mobile-menu { padding: 10px; box-shadow: 0 2px 40px rgba(0, 0, 0, 0.05); } nav#ast-mobile-site-navigation li#menu-item-691 a, nav#ast-mobile-site-navigation li#menu-item-2000 a { display: flex; justify-content: center; border: 1px solid var(--wp--preset--color--blue-500); margin-top: var(--vm-space-sm); } nav#ast-mobile-site-navigation li#menu-item-2000 a { background: var(--wp--preset--color--blue-500); color: var(--wp--preset--color--neutral-0); } /* =========================================== 10. HOME PAGE — HERO ANIMATION Letter-by-letter hollow/solid text effect =========================================== */ [id="7-vocal-commands"], [id="performance-mode"] { scroll-margin-top: 100px; } .uagb-block-c972ca42 .uagb-heading-text, .uagb-block-54c5f6d2 .uagb-heading-text { animation: none !important; } .vma-letter { display: inline-block; -webkit-text-stroke: 1px var(--vm-white); animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--i) * 0.08s); } [data-vma-text="voice"] .vma-letter { animation-name: vmaSolidToHollow; } [data-vma-text="confidence"] .vma-letter { animation-name: vmaHollowToSolid; } @keyframes vmaSolidToHollow { 0%, 35% { color: var(--vm-white); -webkit-text-stroke-color: var(--vm-white); } 50%, 85% { color: transparent; -webkit-text-stroke-color: var(--vm-white); } 100% { color: var(--vm-white); -webkit-text-stroke-color: var(--vm-white); } } @keyframes vmaHollowToSolid { 0%, 35% { color: transparent; -webkit-text-stroke-color: var(--vm-white); } 50%, 85% { color: var(--vm-white); -webkit-text-stroke-color: var(--vm-white); } 100% { color: transparent; -webkit-text-stroke-color: var(--vm-white); } } /* =========================================== 11. HOME PAGE — COMMANDS & PERFORMANCE MODE =========================================== */ .wp-block-uagb-container.vm-cp__sticky-col { position: sticky !important; top: 65px; z-index: 2; align-self: flex-start; } /* TODO: Move this SVG to /assets/svg/sticky-col-line.svg */ .wp-block-uagb-container.vm-cp__sticky-col::after { content: ""; width: 70px; height: 120%; display: block; position: absolute; top: 0; right: -36px; background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2258%22%20height%3D%22342%22%20viewBox%3D%220%200%2058%20342%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%23f34692%22%20stroke-width%3D%223%22%20d%3D%22M27.5%20300V0%22%2F%3E%3CforeignObject%20x%3D%223%22%20y%3D%22277%22%20width%3D%2252%22%20height%3D%2252%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22backdrop-filter%3Ablur(1.5px)%3Bclip-path%3Aurl(%23a)%3Bheight%3A100%25%3Bwidth%3A100%25%22%2F%3E%3C%2FforeignObject%3E%3Cg%20filter%3D%22url(%23b)%22%20data-figma-bg-blur-radius%3D%223%22%3E%3Cpath%20d%3D%22M6%20296c0-8.837%207.163-16%2016-16h14c8.837%200%2016%207.163%2016%2016v14c0%208.837-7.163%2016-16%2016H22c-8.837%200-16-7.163-16-16z%22%20fill%3D%22%23d1d5db%22%20fill-opacity%3D%22.22%22%20shape-rendering%3D%22crispEdges%22%2F%3E%3Cg%20filter%3D%22url(%23c)%22%3E%3Crect%20x%3D%2212%22%20y%3D%22286%22%20width%3D%2234%22%20height%3D%2234%22%20rx%3D%2216%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%223%22%20y%3D%22277%22%20width%3D%2252%22%20height%3D%2252%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeMorphology%20radius%3D%221%22%20operator%3D%22dilate%22%20in%3D%22SourceAlpha%22%20result%3D%22effect1_dropShadow_155_95%22%2F%3E%3CfeOffset%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.03%200%22%2F%3E%3CfeBlend%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_155_95%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_155_95%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22c%22%20x%3D%220%22%20y%3D%22284%22%20width%3D%2258%22%20height%3D%2258%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeMorphology%20radius%3D%224%22%20in%3D%22SourceAlpha%22%20result%3D%22effect1_dropShadow_155_95%22%2F%3E%3CfeOffset%20dy%3D%224%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.435294%200%200%200%200%200.294118%200%200%200%200%201%200%200%200%200.4%200%22%2F%3E%3CfeBlend%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_155_95%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeMorphology%20radius%3D%223%22%20in%3D%22SourceAlpha%22%20result%3D%22effect2_dropShadow_155_95%22%2F%3E%3CfeOffset%20dy%3D%2210%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%227.5%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.435294%200%200%200%200%200.294118%200%200%200%200%201%200%200%200%200.1%200%22%2F%3E%3CfeBlend%20in2%3D%22effect1_dropShadow_155_95%22%20result%3D%22effect2_dropShadow_155_95%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeMorphology%20radius%3D%221%22%20operator%3D%22dilate%22%20in%3D%22SourceAlpha%22%20result%3D%22effect3_dropShadow_155_95%22%2F%3E%3CfeOffset%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.05%200%22%2F%3E%3CfeBlend%20in2%3D%22effect2_dropShadow_155_95%22%20result%3D%22effect3_dropShadow_155_95%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%3CfeOffset%20dy%3D%224%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.321569%200%200%200%200%200.298039%200%200%200%200%200.94902%200%200%200%200.05%200%22%2F%3E%3CfeBlend%20in2%3D%22effect3_dropShadow_155_95%22%20result%3D%22effect4_dropShadow_155_95%22%2F%3E%3CfeBlend%20in%3D%22SourceGraphic%22%20in2%3D%22effect4_dropShadow_155_95%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3CclipPath%20id%3D%22a%22%20transform%3D%22translate(-3%20-277)%22%3E%3Cpath%20d%3D%22M6%20296c0-8.837%207.163-16%2016-16h14c8.837%200%2016%207.163%2016%2016v14c0%208.837-7.163%2016-16%2016H22c-8.837%200-16-7.163-16-16z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E'); background-position: center; background-size: contain; background-repeat: no-repeat; } /* =========================================== 12. SOCIAL PROOF BADGE [vm_social_proof] =========================================== */ .vm-sp { white-space: nowrap; } .vm-sp__avatars { height: clamp(2rem, 1.35rem + 1.25vw, 2.5rem); width: auto; display: block; flex-shrink: 0; } .vm-sp__body { display: flex; flex-direction: column; gap: 0.3em; flex-shrink: 0; } .vm-sp__stars { color: var(--vm-sp-accent, #e6a118); font-size: clamp(0.65rem, 0.55rem + 0.5vw, 1rem); line-height: 1; letter-spacing: 0.05em; flex-shrink: 0; } img.vm-sp__stars { height: clamp(0.65rem, 0.55rem + 0.5vw, 1rem); width: auto; display: block; } .vm-sp__trusted, .vm-sp__rated { color: var(--vm-sp-accent, #e6a118); font-size: clamp(0.75rem, 0.38rem + 0.55vw, 1rem); font-weight: 500; line-height: 1.2; } /* =========================================== 13. MEET YOUR TEACHER — POLAROID STACK =========================================== */ .vma-polaroid-stack { position: relative; width: 100%; max-width: 650px; height: 620px; margin: 0 auto; } .vma-polaroid-stack .vma-photo { position: absolute; background: #fff; padding: 10px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3); will-change: transform; left: 50%; top: 50%; transform: translate(-50%, -50%); } .vma-photo-1 { width: 280px; z-index: 1; } .vma-photo-2 { width: 260px; z-index: 2; } .vma-polaroid-stack .vma-photo img { width: 100%; height: auto; display: block; } .vma-polaroid-stack .vma-photo .vma-tag-1 { position: absolute; left: -30%; bottom: 20%; max-width: 160px; transform: rotate(-5deg); } .vma-polaroid-stack .vma-photo .vma-tag-2 { position: absolute; right: -20%; top: 25%; max-width: 90px; transform: rotate(12deg); } @media (max-width: 976px) { .vma-polaroid-stack { height: 500px; max-width: 500px; } .vma-photo-1 { width: 240px; } .vma-photo-2 { width: 220px; } .vma-polaroid-stack .vma-photo { padding: 9px; } } @media (max-width: 767px) { .vma-polaroid-stack { height: 460px; max-width: 450px; } .vma-photo-1 { width: 240px; } .vma-photo-2 { width: 220px; } .vma-polaroid-stack .vma-photo { padding: 9px; } } @media (max-width: 480px) { .vma-polaroid-stack { height: 420px; max-width: 100%; } .vma-photo-1 { width: 200px; } .vma-photo-2 { width: 180px; } .vma-polaroid-stack .vma-photo { padding: 8px; } } /* =========================================== 14. MEET YOUR TEACHER — GIF SCROLLER =========================================== */ .vma-gif-scroller { display: flex; gap: var(--vm-space-sm); height: 100%; max-height: 72vh; justify-content: end; overflow: hidden; } .vma-gif-column { display: flex; flex-direction: column; gap: var(--vm-space-sm); animation: vmaScrollUp 12s linear infinite; } .vma-gif-column.scroll-down { animation-name: vmaScrollDown; } .vma-gif-column.slow { animation-duration: 24s; } .vma-gif-column.fast { animation-duration: 6s; } .vma-gif-scroller:hover .vma-gif-column { animation-play-state: paused; } .vma-gif-column img { width: 100%; border-radius: 12px; display: block; object-fit: cover; aspect-ratio: 3 / 4; } @media (max-width: 768px) { .vma-gif-scroller { gap: 8px; max-height: 50vh; } .vma-gif-column { gap: 8px; } .vma-gif-column img { border-radius: 8px; } } /* =========================================== 15. SCROLLING TEXT COLUMN =========================================== */ .vma-scroll-text-container { width: 100%; height: 600px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); } .vma-text-item h2.vm-text-hallow-pink { font-size: clamp(2rem, 5vw, 4rem); } .vma-scroll-content { animation: vmaScrollUp 20s linear infinite; will-change: transform; } .vm-img-above__scroll { position: absolute !important; } @media (max-width: 768px) { .vma-scroll-text-container { height: 400px; } } @media (max-width: 480px) { .vma-scroll-text-container { height: 300px; } } /* =========================================== SHARED KEYFRAMES Single definition used by GIF scroller and scrolling text column. =========================================== */ @keyframes vmaScrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes vmaScrollDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } } /* =========================================== 16. FAQ SECTION =========================================== */ .vm-faqs .uagb-icon.uagb-faq-icon-wrap { transform: rotate(-45deg); } .vm-faqs .uagb-faq-content { background-color: var(--wp--preset--color--neutral-50); border-radius: 10px; } /* =========================================== 17. COURSE LANDING PAGE — LAYOUT & CTA =========================================== */ .vm-cl-video-intro__embed iframe { border-radius: 14px; } .vm-cta-container { min-width: 340px !important; flex-shrink: 0 !important; } .vm-cta-container.sticky { height: 100% !important; position: sticky !important; top: 110px !important; } .vm-cl-cta .vm-cl-cta__body { display: flex; flex-direction: column; gap: 1em; } .vm-cl-cta .vm-cl-cta__button { position: relative; min-width: 250px; margin: 0 auto; padding: 18px 60px 18px 24px; border-radius: 8px; background-color: var(--wp--preset--color--blue-500, #0055ce); color: #fff; font-weight: 500; font-size: 1rem; text-align: center; line-height: 1; transition: all 0.2s linear; } .vm-cl-cta .vm-cl-cta__button:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 85, 206, 0.3), 0 8px 24px rgba(0, 85, 206, 0.2), 0 12px 32px rgba(0, 0, 0, 0.08); } .vm-cl-cta .vm-cl-cta__button::after { content: ""; display: block; position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background: var(--ast-global-color-4); width: 36px; height: 36px; border-radius: 8px; background-image: var(--vm-arrow-icon-blue); background-repeat: no-repeat; background-position: center; background-size: 15px 15px; } .vm-cl-cta .vm-cl-cta__highlights-item { display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; line-height: 1.6; } .vm-cl-cta .vm-cl-cta__highlights-item-icon { display: inline-block; margin-top: 3px; } .vm-cl-cta .vm-cl-cta__payment-icons-img { max-width: 380px; margin: 0 auto; } @media (max-width: 767px) { .vm-cta-container { min-width: min(340px, 100%) !important; } } /* =========================================== 18. COURSE LANDING — HIGHLIGHTS, META, LEARNINGS =========================================== */ /* --- Highlights --- */ .vm-cl-highlights__list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .vm-cl-highlights__icon { flex-shrink: 0; color: var(--wp--preset--color--pink-500, #f34692); line-height: 0; } .vm-cl-highlights__text { font-size: clamp(1rem, 0.72rem + 0.36vw, 1rem); line-height: 1.4; } /* --- Meta 3-column grid --- */ .vm-cl-meta { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--vm-space-xs, 0.5rem) !important; } .vm-cl-meta__item { display: flex !important; align-items: center !important; gap: var(--vm-space-sm, 1rem) !important; padding: 10px; background: var(--ast-global-color-4); border: 1px solid var(--ast-global-color-5); border-radius: 12px; } .vm-cl-meta__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 0; } .vm-cl-meta__text { display: flex !important; flex-direction: column !important; row-gap: 5px; column-gap: 5px; } .vm-cl-meta__label { font-size: 13px; color: var(--wp--preset--color--neutral-500, #6b7280); line-height: 1.3; } .vm-cl-meta__value { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ast-global-color-2, #1e293b); } @media (max-width: 768px) { .vm-cl-meta { grid-template-columns: 1fr !important; } } /* --- Learning Outcomes 2-column checklist --- */ .vm-cl-learnings__list { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--vm-space-md, 1.5rem) !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .vm-cl-learnings__item { display: flex !important; align-items: flex-start !important; gap: var(--vm-space-xs, 0.5rem) !important; } .vm-cl-learnings__icon { flex-shrink: 0; color: var(--wp--preset--color--pink-500, #f34692); line-height: 0; margin-top: 2px; } .vm-cl-learnings__text { font-size: clamp(1rem, 0.78rem + 0.36vw, 1rem); line-height: 1.5; } @media (max-width: 768px) { .vm-cl-learnings__list { grid-template-columns: 1fr !important; } } /* =========================================== 19. COURSE LANDING — IDEAL TARGET =========================================== */ .vm-cl-ideal-target__list { display: flex !important; flex-direction: column !important; gap: var(--vm-space-md, 1.5rem) !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .vm-cl-ideal-target__item { display: flex !important; align-items: flex-start !important; gap: var(--vm-space-md, 1.5rem) !important; } .vm-cl-ideal-target__num { font-weight: 900; display: inline-flex !important; align-items: center; justify-content: center; min-width: 40px; width: 40px; height: 40px; color: #F9AACD; } .vm-cl-ideal-target__content { display: flex !important; flex-direction: column !important; gap: var(--vm-space-xs, 0.5rem) !important; } .vm-cl-ideal-target__title { font-size: clamp(1.05rem, 0.88rem + 0.36vw, 1.2rem); font-weight: 600; color: var(--ast-global-color-2, #1e293b); } .vm-cl-ideal-target__desc { margin: 0; font-size: clamp(1rem, 0.78rem + 0.36vw, 1rem); color: var(--wp--preset--color--neutral-500, #6b7280); line-height: 1.6; } /* =========================================== 20. COURSE LANDING — CURRICULUM ACCORDION =========================================== */ .vm-cl-curriculum { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--vm-space-md, 1.5rem) var(--vm-space-lg, 2.5rem) !important; } .vm-cl-curriculum__item { background-color: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: none; overflow: hidden; } .vm-cl-curriculum__header { display: flex !important; align-items: center !important; gap: var(--vm-space-sm, 1rem) !important; list-style: none !important; cursor: pointer; padding: var(--vm-space-sm, 1rem) var(--vm-space-md, 1.5rem); user-select: none; } .vm-cl-curriculum__header::-webkit-details-marker { display: none; } .vm-cl-curriculum__header::marker { display: none; content: ""; } .vm-cl-curriculum__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: var(--wp--preset--color--blue-500, #0055ce); } .vm-cl-curriculum__icon svg { width: 24px; height: 24px; } .vm-cl-curriculum__title { flex: 1; font-size: clamp(1rem, 0.83rem + 0.36vw, 1.1rem); font-weight: 600; line-height: 1.4; color: var(--ast-global-color-2, #1e293b); } .vm-cl-curriculum__toggle { flex-shrink: 0; margin-left: auto; line-height: 0; color: var(--wp--preset--color--neutral-500, #6b7280); transition: transform 0.25s ease; } .vm-cl-curriculum__item[open] > .vm-cl-curriculum__header .vm-cl-curriculum__toggle { transform: rotate(180deg); } .vm-cl-curriculum__body { padding: var(--vm-space-sm); margin: var(--vm-space-xs); font-size: clamp(1rem, 0.78rem + 0.36vw, 1rem); color: var(--wp--preset--color--neutral-500, #6b7280); background: var(--ld-color-primitives-grey-100); border-radius: 12px; line-height: 1.6; } @media (max-width: 768px) { .vm-cl-curriculum { grid-template-columns: 1fr !important; } } /* =========================================== 21. COURSE LANDING — VIDEO TESTIMONIALS =========================================== */ .vm-video-testimonial .swiper-content { box-shadow: 1px 3px 25px #00000003; border-radius: 10px !important; border: 1px solid var(--wp--preset--color--blue-50); margin: 0; } .vm-video-testimonial .swiper-content iframe { border-radius: 10px 10px 0 0; } /* =========================================== 22. ALLEGRI FOUNDATION — POLAROID 3D =========================================== */ .allegri-foundation-pollaroid { position: relative; perspective: 1500px; perspective-origin: center center; } .allegri-foundation-pollaroid img, .allegri-foundation-pollaroid .allegri-card { display: block; width: 100%; height: auto; transform-style: preserve-3d; backface-visibility: hidden; } /* =========================================== 23. LEARNDASH OVERRIDES =========================================== */ #ld-focus-content h1 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); } #ld-focus-content .ld-layout__header { background: var(--wp--preset--color--neutral-50); padding: 1rem; border-radius: 14px; } #ld-focus-content .ld-navigation__previous a, #ld-focus-content .ld-navigation__next a, #ld-focus-content .wpProQuiz_content .wpProQuiz_button, #ld-focus-content .wpProQuiz_content .wpProQuiz_button2 { background: var(--wp--preset--color--pink-500) !important; color: #ffffff !important; padding: var(--ld-spacer-2) var(--ld-spacer-fixed-4) !important; border: none !important; border-radius: var(--ld-button-border-radius) !important; } #ld-focus-content .ld-navigation__previous a:hover, #ld-focus-content .ld-navigation__next a:hover { background: var(--wp--preset--color--pink-600) !important; border: none !important; } #ld-focus-content .ld-navigation.ld-navigation--lesson a, #ld-focus-content .ld-navigation.ld-navigation--lesson button { font-size: 14px; } #ld-focus-content .ld-layout__content .ld-accordion__heading { font-size: clamp(1.2rem, 1.5vw + 1rem, 2rem); } #ld-focus-content .wpProQuiz_reviewDiv .learndash-quiz-review__list { padding: 10px 0 20px 0 !important; overflow: hidden !important; } #ld-focus-content .wpProQuiz_questionList input[type="radio"], #ld-focus-content .wpProQuiz_questionList input[type="checkbox"] { margin-right: 5px !important; } #ld-focus-content .wpProQuiz_reviewQuestion .learndash-quiz-review__button { padding: 0 10px !important; } #ld-focus-content .wpProQuiz_header { font-weight: normal !important; } .single-sfwd-courses .learndash-wrapper .ld-lesson-list .ld-section-heading h2 { font-family: 'Inter', sans-serif; font-size: 18px; } .single-sfwd-courses .learndash-wrapper .ld-lesson-list .ld-lesson-section-heading { font-family: 'Anton', sans-serif; font-weight: normal; font-size: 20px; } /* Tablet Styles */ @media screen and (max-width: 1024px) { .learndash-wrapper .ld-layout__header .ld-breadcrumbs__item { max-width: 100% !important; } } @media screen and (max-width: 768px) { #ld-focus-content .wpProQuiz_content .wpProQuiz_button { width: auto !important; margin: 1em 0 0 auto !important; } #ld-focus-content .wpProQuiz_content .wpProQuiz_button2 { width: auto !important; margin: 1em auto 0 0 !important; } #ld-focus-content .ld-focus .ld-focus-header .ld-content-actions>* { padding: 5px 10px !important; } }