/* ------------------------------------------------------------------ Entrance-animation enhancement for the static YES!Academy pages. Progressive enhancement: the hidden state only applies once JS has confirmed motion is OK (html.enh-anim is set in each page's ). With JS disabled or prefers-reduced-motion, everything stays visible. ------------------------------------------------------------------ */ html.enh-anim :is( #splash .content-container, #way-of-learning .row-title-text, #way-of-learning .three-columns > .column, #latest-courses .row-title-text, #latest-courses .three-columns > .column, #testimonials .two-columns, #earn-certificate .text, #footer-container .top-row, #auth-layout .form-container .large-text, #auth-layout .form-container input, #auth-layout .form-container .forgot-password, #auth-layout .form-container .button, .dashboard-subheader .title, .dashboard-subheader .content-container .button ) { opacity: 0; translate: 0 20px; transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--enh-d, 0s), translate .7s cubic-bezier(.2, .7, .2, 1) var(--enh-d, 0s), transform .18s ease; will-change: opacity, translate; } html.enh-anim :is( #splash .content-container, #way-of-learning .row-title-text, #way-of-learning .three-columns > .column, #latest-courses .row-title-text, #latest-courses .three-columns > .column, #testimonials .two-columns, #earn-certificate .text, #footer-container .top-row, #auth-layout .form-container .large-text, #auth-layout .form-container input, #auth-layout .form-container .forgot-password, #auth-layout .form-container .button, .dashboard-subheader .title, .dashboard-subheader .content-container .button ).enh-in { opacity: 1; translate: 0; } /* Light, on-brand hover for the existing pill buttons. */ .button { transition: transform .18s ease, box-shadow .18s ease; } .button:hover { transform: translateY(-1px); } .button.button-magenta:hover { box-shadow: 0 .4em .9em rgba(230, 0, 125, .35); }