Visible teaser copy… …the
rest of the same paragraph, hidden until expanded.
The copy is ONE continuous flow shown as a 2-column teaser.
On expand it becomes a single full-width column and the rest
continues from the exact cut-off point (not a box below, and
not cramped in a narrow column).
============================================================ */
.get-ready-copy {
column-count: 2;
column-gap: 44px;
}
.get-ready-txt { display: none; }
.get-ready.is-open .get-ready-copy { column-count: 1; }
.get-ready.is-open .get-ready-txt,
.get-ready-txt.is-open { display: inline; }
@media (max-width: 720px) {
/* Single column on small screens regardless of state. */
.get-ready-copy { column-count: 1; }
}
/* ============================================================
MEET YOUR INSTRUCTOR — photo floats so the intro wraps beside
it, then the expanded copy continues FULL-WIDTH below it
(one text flow, no separate columns). Wrapper uses
.get-ready (so the existing Read More JS toggles it).
============================================================ */
.mentor-photo {
float: right;
width: 46%;
max-width: 520px;
margin: 6px 0 26px 38px;
border-radius: 6px;
display: block;
}
.mentor-photo-right{
float:left;
margin: 6px 38px 26px 0px;
}
.get-ready.mentor::after { content: ""; display: block; clear: both; }
/* Multi-paragraph reveal here = block (the generic one is inline
for mid-sentence continuation). */
.get-ready.mentor .get-ready-txt { display: none; }
.get-ready.mentor.is-open .get-ready-txt { display: block; }
.get-ready.mentor .mentor-byline { margin-top: 22px; }
@media (max-width: 768px) {
.mentor-photo { float: none; width: 100%; max-width: none; margin: 0 0 22px; }
}
/* ============================================================
PARTNER APPLICATION — eligibility / T&C card + accept box
(replaces the old consent pop-up). Sits just above Submit.
============================================================ */
.pp-elig { margin: 6px 0 24px; }
.pp-elig-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px;
overflow: hidden;
}
.pp-elig-head {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 22px;
border-bottom: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
}
.pp-elig-ico { width: 18px; height: 18px; color: var(--orange); flex: 0 0 auto; }
.pp-elig-ico svg { width: 100%; height: 100%; display: block; }
.pp-elig-title {
font-family: 'Bebas Neue', 'Oswald', sans-serif;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white);
font-size: 14px;
}
.pp-elig-body {
max-height: 240px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px 22px;
color: var(--text);
font-size: 13.5px;
line-height: 1.75;
text-align: left;
}
.pp-elig-body:focus { outline: 2px solid var(--orange); outline-offset: -2px; }
.pp-elig-body::-webkit-scrollbar { width: 9px; }
.pp-elig-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 5px; }
.pp-elig-body strong { color: var(--white); }
.pp-elig-body h4 {
color: var(--white);
margin: 16px 0 6px;
font-family: 'Oswald', sans-serif;
letter-spacing: 0;
text-transform: uppercase;
color: var(--white);
font-size: 13px;
}
.pp-elig-body h4:first-child { margin-top: 0; }
.pp-elig-body p { margin: 0 0 12px; }
.pp-elig-body p:last-child { margin-bottom: 0; }
.pp-elig-accept {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 16px 22px;
border-top: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.015);
color: var(--white);
font-size: 14px;
line-height: 1.5;
cursor: pointer;
}
.pp-elig-accept .wpcf7-list-item { margin: 0; }
.pp-elig-accept input[type="checkbox"] {
width: 19px; height: 19px; margin-top: 1px;
accent-color: var(--orange); flex: 0 0 auto; cursor: pointer;
}
.pp-elig-card:has(.wpcf7-not-valid) { border-color: rgba(255,107,107,0.5); }
.pp-elig .wpcf7-not-valid-tip {
display: block;
margin-top: 8px;
color: #ff8a8a;
font-size: 13px;
}
/* Make the application submit button full-width like the reference. */
.pp-form-submit .pp-btn-primary,
.pp-form-submit input.pp-btn-primary {
width: 100%;
justify-content: center;
}
/* ============================================================
SITE-WIDE CTA / FORM SUBMIT BUTTON STYLE
Unified gradient button for every primary CTA and form submit.
!important is required to override Jupiter / WPBakery / the
existing per-component button styles.
============================================================ */
.cta,
.wpcf7-submit, .pp-btn-primary,
input.wpcf7-submit,
.wpcf7-form input[type="submit"]{
margin: 10px !important;
padding: 15px 30px !important;
text-align: center !important;
text-transform: uppercase !important;
transition: 0.5s !important;
background-size: 200% auto !important;
color: #fff !important;
border-radius: 10px !important;
display: block !important;
border: 0 !important;
font-weight: 700 !important;
box-shadow: 0px 0px 14px -7px #f09819 !important;
background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%) !important;
background-color: transparent !important;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
text-decoration: none !important;
line-height: 34px !important;
font-family: 'Inter', sans-serif;
letter-spacing: 1px;
}
/* Animate the gradient across on hover/focus (the 200% + transition
in the spec is designed for this). */
.cta:hover, .cta:focus,
.pp-btn-primary:hover, .pp-btn-primary:focus,
.wpcf7-submit:hover, .wpcf7-submit:focus,
.ma-btn:hover, .ma-btn:focus,
.acm-pl-btn:hover, .acm-pl-btn:focus,
.ph-card-cta:hover, .ph-card-cta:focus,
.ma-download-btn:hover, .ma-download-btn:focus,
.test-loadmore:hover, .test-loadmore:focus,
.faq-pointer-cta:hover, .faq-pointer-cta:focus,
.login-btn:hover, .login-btn:focus,
.acm-logout-btn:hover, .acm-logout-btn:focus,
.amc-co-btn:hover, .amc-co-btn:focus,
.amc-pp-btn:hover, .amc-pp-btn:focus {
background-position: right center !important;
color: #fff !important;
}
/* ============================================================
LOGIN — Twine-style two-panel box (form + sign-up / partner)
Also fixes the previous left-aligned / cut-off layout: the
whole box is now centred with a max-width and wraps cleanly.
============================================================ */
.acm-pl {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 0;
max-width: 940px;
margin: 0 auto;
padding: 56px 16px;
box-sizing: border-box;
}
.acm-pl-card {
flex: 1 1 420px;
max-width: 480px;
box-sizing: border-box;
}
.acm-pl:has(.acm-pl-aside) .acm-pl-card { border-radius: 8px 0 0 8px; }
.acm-pl-aside {
flex: 1 1 360px;
max-width: 420px;
box-sizing: border-box;
background: linear-gradient(165deg, rgba(232,119,34,0.14), rgba(255,255,255,0.03));
border: 1px solid rgba(255,255,255,0.08);
border-left: 0;
border-radius: 0 8px 8px 0;
padding: 46px 40px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 34px;
text-align: left;
}
.acm-pl-aside-block h2 {
font-family: 'Bebas Neue', 'Oswald', sans-serif;
font-weight: 400;
color: var(--white);
font-size: clamp(20px, 2.6vw, 26px);
letter-spacing: 0.02em;
margin: 0 0 8px;
}
.acm-pl-aside-block p {
color: var(--text);
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 16px;
}
.acm-pl-aside-btn {
display: inline-block;
align-self: flex-start;
padding: 12px 22px;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 6px;
color: var(--white);
text-decoration: none;
font-family: 'Bebas Neue', 'Oswald', sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 14px;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.acm-pl-aside-btn:hover,
.acm-pl-aside-btn:focus {
background: var(--orange);
border-color: var(--orange);
color: #fff;
}
@media (max-width: 820px) {
.acm-pl-card, .acm-pl-aside { flex: 1 1 100%; max-width: 480px; }
.acm-pl:has(.acm-pl-aside) .acm-pl-card { border-radius: 8px 8px 0 0; }
.acm-pl-aside {
border-radius: 0 0 8px 8px;
border-left: 1px solid rgba(255,255,255,0.08);
border-top: 0;
}
}
/* ============================================================
LAUNCH PRICE — [acm_price]
============================================================ */
.acm-price { text-align: left; }
.acm-price-label {
font-family: 'Bebas Neue', 'Oswald', sans-serif;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--orange);
font-size: 13px;
margin-bottom: 8px;
}
.acm-price-row {
display: flex;
align-items: baseline;
justify-content: left;
flex-wrap: wrap;
gap: 12px 16px;
}
.hero-cta .acm-price-row, .hero-cta .acm-price {
justify-content: center;
text-align: center;
}
.acm-price-was {
position: relative;
color: var(--text-soft);
font-size: clamp(20px, 3vw, 28px);
font-weight: 600;
text-decoration: line-through;
text-decoration-color: rgba(255,107,107,0.7);
text-decoration-thickness: 2px;
}
.acm-price-now {
font-family: 'Bebas Neue', 'Oswald', sans-serif;
color: var(--white);
font-size: clamp(44px, 7vw, 72px);
line-height: 1;
letter-spacing: 0.01em;
}
.acm-price-badge {
align-self: center;
background: var(--orange);
color: #fff;
font-family: 'Bebas Neue', 'Oswald', sans-serif;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 14px;
padding: 6px 14px;
border-radius: 999px;
box-shadow: 0 6px 20px rgba(232,119,34,0.28);
}
.acm-price-note {
margin-top: 10px;
color: var(--text-soft);
font-size: 13.5px;
letter-spacing: 0.02em;
}
/* ============================================================
DEDICATED SIGN-UP PAGE — [acm_signup]
Reuses the login two-panel (.acm-pl) + partner T&C card
(.pp-elig). These only adjust alignment + states.
============================================================ */
.acm-signup .acm-pl-form,
.acm-signup .pp-elig,
.acm-signup .pp-elig-body,
.acm-signup .pp-elig-accept { text-align: left; }
.acm-signup .pp-elig { margin-bottom: 0; }
.pp-elig-card.is-invalid { border-color: rgba(255,107,107,0.55); }
.acm-pl-msg-ok {
background: rgba(57,255,20,0.07);
border: 1px solid rgba(57,255,20,0.3);
color: var(--green);
padding: 12px 16px;
border-radius: 4px;
font-size: 13.5px;
line-height: 1.5;
text-align: left;
}