/* ===================================================================== Halloween checkout steps (/step/halloween-standard-checkout/, /step/halloween-premium-checkout/): the regular checkout (checkout.css) in the Halloween page's night palette. Standard uses the brand blue, Premium pumpkin (as on the landing page). Loaded after checkout.css; every rule is scoped to body.mhw-checkout (set in halloween.php). ===================================================================== */ body.mco-page.mhw-checkout { --hw-night: #0A0F1F; --hw-night-2: #0D1428; --hw-plum: #121A33; --hw-plum-2: #182340; --hw-field: #0B1226; --hw-line: rgba(140, 170, 255, .16); --hw-line-2: rgba(140, 170, 255, .28); --hw-text: #EEF2FF; --hw-text-2: #D6DEF3; --hw-muted: #9AA6C4; --hw-pumpkin: #FF7A1A; --hw-pumpkin-text: #FFA45C; --mco-accent: #0171C9; --mco-accent-hover: #1E7BE0; --mco-accent-ink: #FFFFFF; --mco-accent-soft: rgba(1, 113, 201, .22); --mco-accent-line: rgba(1, 113, 201, .6); --mco-accent-text: #8CC8FF; --mco-accent-glow: rgba(1, 113, 201, .6); --e-global-color-wcfgcpprimarycolor: #0171C9; --e-global-color-wcfgcpaccentcolor: #0171C9; --e-global-color-wcfgcptextcolor: #D6DEF3; background: var(--hw-night); } body.mco-page.mco-premium.mhw-checkout { --mco-accent: #FF7A1A; --mco-accent-hover: #FF9440; --mco-accent-ink: #2B1100; --mco-accent-soft: rgba(255, 122, 26, .15); --mco-accent-line: rgba(255, 122, 26, .5); --mco-accent-text: #FFA45C; --mco-accent-glow: rgba(255, 122, 26, .6); --e-global-color-wcfgcpprimarycolor: #FF7A1A; --e-global-color-wcfgcpaccentcolor: #FF7A1A; } /* ---------- Hero: night sky, the full haunted skyline, the moon behind the trees ---------- */ /* The skyline (assets/scene.svg, 1440x260) is shown whole at its own proportions across the width; the hero's bottom padding leaves room for it, and the form card overlaps only its ground. */ .mhw-checkout .mh.mco-hero { --scene-h: clamp(170px, 18.06vw, 380px); background: radial-gradient(800px 420px at 82% 10%, rgba(120, 160, 255, .22), transparent 65%), linear-gradient(180deg, #070B17 0%, #0D1428 70%, #121C3A 100%); padding-bottom: calc(var(--scene-h) * .6); /* the top of the skyline is open sky, so it can rise behind the text area */ } /* Moon and two bats, top right (where they were before the skyline change) */ .mhw-checkout .mh.mco-hero::before { background: url(assets/bat.svg) right max(250px, calc(50% - 420px)) top calc(var(--mh-header) + 58px) / 46px auto no-repeat, url(assets/bat.svg) right max(330px, calc(50% - 340px)) top calc(var(--mh-header) + 104px) / 30px auto no-repeat, url(assets/moon.svg) right max(40px, calc(50% - 640px)) top calc(var(--mh-header) + 10px) / 170px auto no-repeat; filter: drop-shadow(0 0 34px rgba(253, 227, 161, .3)); } .mhw-checkout .mh.mco-hero::after { top: auto; right: 0; left: 0; bottom: 0; width: auto; height: var(--scene-h); opacity: 1; transform: none; background: url(assets/scene.svg) center bottom / max(100%, 940px) auto no-repeat; } .mhw-checkout .mh .mco-eyebrow { color: var(--mco-accent-text); } .mhw-checkout .mh .mco-eyebrow::before { background: var(--mco-accent); } @media (max-width: 1024px) { .mhw-checkout .mh.mco-hero::before { background: url(assets/moon.svg) right 16px top calc(var(--mh-header) + 12px) / 96px auto no-repeat; opacity: .8; } } @media (max-width: 640px) { .mhw-checkout .mh.mco-hero::after { display: block; } } /* ---------- Form card -------------------------------------------------- */ body.mco-page.mhw-checkout #wcf-embed-checkout-form { color: var(--hw-text-2); background: linear-gradient(180deg, var(--hw-plum) 0%, #0D1428 100%); border-color: var(--hw-line); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 122, 26, .06); } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(#customer_information_heading, #billing_fields_heading, #your_products_heading, #order_review_heading, #payment_options_heading) { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.woocommerce, form.checkout, .wcf-customer-info-main-wrapper, #customer_info, #order_review, #payment, .wcf-payment-option-heading, .wcf-customer-info__notice) { color: var(--hw-text-2) !important; } /* Step tabs (two-step layout, if used) */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-embed-checkout-form-steps { background: rgba(255, 255, 255, .05) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-embed-checkout-form-steps .step-number { background: transparent !important; border-color: var(--hw-line-2) !important; color: var(--hw-muted) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-embed-checkout-form-steps .step-name { color: var(--hw-text-2) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-embed-checkout-form-steps .step-sub-name { color: var(--hw-muted) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-embed-checkout-form-steps .wcf-current { background: var(--hw-plum-2) !important; box-shadow: none; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-embed-checkout-form-steps .wcf-current .step-name { color: #FFFFFF !important; } /* Phones: the collapsible order summary bar */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-collapsed-order-review-section > div:first-child { background: var(--hw-field) !important; border-color: var(--hw-line) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-collapsed-order-review-section :is(span, div):not([class*="dashicons"]):not([class*="icon"]) { color: #FFFFFF !important; } /* Fields */ body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.input-text, input.input-text, select, .select2-container--default .select2-selection--single) { background: var(--hw-field) !important; border-color: var(--hw-line-2) !important; color: #FFFFFF !important; box-shadow: none !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.input-text, input.input-text, select):hover { border-color: rgba(140, 170, 255, .45) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.input-text, input.input-text, select):focus { border-color: var(--mco-accent) !important; box-shadow: 0 0 0 3px var(--mco-accent-soft) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .input-text::placeholder { color: #7482A3 !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form label { color: var(--hw-muted) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .required { color: var(--mco-accent-text) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form select option { background: var(--hw-field); color: #FFFFFF; } body.mco-page.mhw-checkout #wcf-embed-checkout-form input:-webkit-autofill, body.mco-page.mhw-checkout #wcf-embed-checkout-form input:-webkit-autofill:hover, body.mco-page.mhw-checkout #wcf-embed-checkout-form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #10182F inset !important; -webkit-text-fill-color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .woocommerce-invalid :is(input.input-text, select), body.mco-page.mhw-checkout #wcf-embed-checkout-form .woocommerce-billing-fields :is(input.input-text, select).field-required { border-color: #F08A7A !important; box-shadow: 0 0 0 3px rgba(240, 138, 122, .18) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .select2-container--default .select2-selection--single .select2-selection__rendered { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--mco-accent-text) !important; } body.mco-page.mhw-checkout .select2-dropdown { background: var(--hw-plum) !important; border-color: var(--hw-line-2) !important; } body.mco-page.mhw-checkout .select2-search--dropdown .select2-search__field { background: var(--hw-field) !important; border-color: var(--hw-line-2) !important; color: #FFFFFF !important; } body.mco-page.mhw-checkout .select2-results__option { color: var(--hw-text-2); } body.mco-page.mhw-checkout .select2-results__option--highlighted[aria-selected] { background: var(--mco-accent) !important; color: var(--mco-accent-ink) !important; } /* Plan rows */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row { background: rgba(255, 255, 255, .03) !important; border-color: var(--hw-line) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row:hover { background: rgba(255, 255, 255, .06) !important; border-color: var(--mco-accent-line) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row:has(.wcf-single-sel:checked) { background: var(--hw-plum-2) !important; border-color: var(--mco-accent) !important; box-shadow: 0 14px 30px -18px var(--mco-accent-glow); } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row .wcf-display-title { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row .wcf-display-attributes { color: var(--hw-muted); } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row .wcf-att-inner:first-child { color: var(--hw-text-2) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row :is(.wcf-display-price, .wcf-display-price .amount) { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row:has(.wcf-single-sel:checked) :is(.wcf-display-price, .wcf-display-price .amount) { color: var(--mco-accent-text) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row :is(del, del .amount) { color: var(--hw-muted) !important; } /* Buttons */ body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.wcf-next-button, #place_order) { box-shadow: 0 14px 30px -12px var(--mco-accent-glow) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.wcf-next-button, #place_order):focus-visible { outline-color: var(--mode-sky) !important; } /* Order review */ body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) { background: var(--hw-field) !important; border-color: var(--hw-line) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) :is(th, td) { border-top-color: var(--hw-line) !important; color: var(--hw-text-2) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) thead :is(th, td) { background: rgba(255, 255, 255, .04) !important; color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) :is(.product-name, .wcf-product-name, td.product-thumbnail) { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) :is(td.product-thumbnail, td.product-name) .wcf-product-name { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) .product-quantity { color: var(--hw-muted) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) :is(.amount, .amount bdi) { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) .order-total :is(th, td) { background: rgba(255, 255, 255, .04) !important; color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(table.shop_table, .woocommerce-checkout-review-order-table) .order-total :is(.amount, .amount bdi) { color: var(--mco-accent-text) !important; } /* The Halloween discount line */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .cart-discount :is(th, td, .amount, .amount bdi) { color: #7EE2A8 !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .cart-discount a { display: none !important; } /* Payment */ body.mco-page.mhw-checkout #wcf-embed-checkout-form #payment ul.wc_payment_methods { background: var(--hw-field) !important; border-color: var(--hw-line) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form #payment .wc_payment_method > label { color: #FFFFFF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form #payment input[type="radio"] { accent-color: var(--mco-accent); } body.mco-page.mhw-checkout #wcf-embed-checkout-form #payment div.payment_box { background: var(--hw-plum) !important; border-color: var(--hw-line); color: var(--hw-text-2) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form #payment div.payment_box * { color: inherit; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p) { color: var(--hw-muted) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form a:not(.button):not(.wcf-next-button) { color: var(--mode-sky) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .place-order::after { content: "Halloween price applied · Activated in ~10 minutes · 7-day money-back guarantee"; color: var(--hw-muted); } /* Notices */ body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { background: var(--hw-field) !important; border-color: var(--hw-line) !important; color: var(--hw-text-2) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .woocommerce-message { border-left: 4px solid #3CCB7F !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .woocommerce-info { border-left: 4px solid var(--mco-accent) !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.woocommerce-error, ul.woocommerce-error, .woocommerce-NoticeGroup .woocommerce-error) { background: #2A1026 !important; border-color: rgba(240, 138, 122, .4) !important; border-left: 4px solid #F08A7A !important; color: #FFC9BF !important; } body.mco-page.mhw-checkout #wcf-embed-checkout-form ul.woocommerce-error > li, body.mco-page.mhw-checkout #wcf-embed-checkout-form .woocommerce-error li :is(a, strong), body.mco-page.mhw-checkout #wcf-embed-checkout-form ul.woocommerce-error > li a:not(.button):not(.wcf-next-button) { color: #FFC9BF !important; } /* ---------- Side column -------------------------------------------------- */ .mhw-checkout .mh .mco-order-card, .mhw-checkout .mh .mco-side__list, .mhw-checkout .mh .mco-faq details { background: var(--hw-plum); border-color: var(--hw-line); } .mhw-checkout .mh .mco-side__media { background: radial-gradient(closest-side, var(--mco-accent-soft), transparent 80%); } .mhw-checkout .mh .mco-side__list li { color: var(--hw-text-2); } .mhw-checkout .mh .mco-side__icon { background: var(--mco-accent-soft); color: var(--mco-accent-text); } .mhw-checkout .mh .mco-guarantee { background: var(--hw-night-2); border: 1px solid var(--hw-line); } .mhw-checkout .mh .mco-guarantee__icon { background: var(--hw-plum-2); color: var(--mco-accent-text); } .mhw-checkout .mh .mco-guarantee p:not(.mco-guarantee__title) { color: var(--hw-muted); } .mhw-checkout .mh .mco-faq__title { color: var(--mco-accent-text); } .mhw-checkout .mh .mco-faq details[open] { border-color: var(--mco-accent); } .mhw-checkout .mh .mco-faq summary { color: #FFFFFF; } .mhw-checkout .mh .mco-faq summary:focus-visible { outline-color: var(--mode-sky); } .mhw-checkout .mh .mco-faq__icon { background: rgba(255, 255, 255, .08); color: var(--mco-accent-text); } .mhw-checkout .mh .mco-faq details[open] .mco-faq__icon { background: var(--mco-accent); color: var(--mco-accent-ink); } .mhw-checkout .mh .mco-faq details p { color: var(--hw-muted); } /* "Your order" copy in the side column */ .mhw-checkout .mh .mco-order-slot { border-top-color: var(--hw-line); } .mhw-checkout .mh .mco-order-slot .mco-order-title { color: #FFFFFF; } .mhw-checkout .mh .mco-order-slot :is(th, td) { border-top-color: var(--hw-line); color: var(--hw-text-2); } .mhw-checkout .mh .mco-order-slot :is(td.product-name, td.product-thumbnail, td.product-total) { color: #FFFFFF; } .mhw-checkout .mh .mco-order-slot :is(.product-quantity, tfoot th) { color: var(--hw-muted); } .mhw-checkout .mh .mco-order-slot .cart-discount :is(th, td) { color: #7EE2A8; } .mhw-checkout .mh .mco-order-slot .cart-discount a { display: none; } .mhw-checkout .mh .mco-order-slot .order-total :is(th, td) { color: #FFFFFF; } .mhw-checkout .mh .mco-order-slot .order-total .amount { color: var(--mco-accent-text); } /* NORFLO footer area under the form keeps the night background */ body.mco-page.mhw-checkout .elementor .e-con.mco-layout { background: transparent; } /* ---------- The offer: side card and plan-row prices --------------------- */ .mhw-checkout .mhw-co-offer { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--mode-radius-card); border: 1.5px solid var(--mco-accent-line); background: linear-gradient(160deg, var(--hw-plum-2) 0%, var(--hw-plum) 70%); } .mhw-checkout .mhw-co-offer__title { font-family: var(--mode-font-display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mco-accent-text); } .mhw-checkout .mhw-co-offer__month { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.35; color: #FFFFFF; } .mhw-checkout .mhw-co-offer__month span { flex-shrink: 0; font-family: var(--mode-font-display); font-size: 40px; line-height: .9; color: var(--mco-accent); text-shadow: 0 0 24px var(--mco-accent-soft); } .mhw-checkout .mhw-co-offer__note { font-size: 13px; line-height: 1.55; color: var(--hw-muted); } .mhw-checkout .mhw-ladder--mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__step { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; text-align: center; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__pct { font-family: var(--mode-font-display); font-size: 17px; font-weight: 700; line-height: 1; color: #FFFFFF; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__bar { display: flex; align-items: flex-end; width: 100%; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__fill { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #1E7BE0 0%, rgba(1, 113, 201, .35) 100%); } .mhw-checkout .mhw-ladder--mini .mhw-ladder__fill--1 { height: 28px; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__fill--2 { height: 34px; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__fill--3 { height: 42px; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__fill--4 { height: 50px; } .mhw-checkout .mhw-ladder--mini .mhw-ladder__fill--5 { height: 56px; background: linear-gradient(180deg, var(--mco-accent) 0%, var(--mco-accent-soft) 100%); } .mhw-checkout .mhw-ladder--mini .mhw-ladder__label { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--hw-muted); } .mhw-checkout .mh .mh-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Plan rows: the regular price crossed out, the Halloween price, "-15%" and the months with the free one */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row .wcf-price.mhw-row-has-offer { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row .mhw-row-has-offer :is(.wcf-display-price, .wcf-display-price .amount) { font-size: 14px !important; font-weight: 600 !important; color: var(--hw-muted) !important; text-decoration: line-through; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .mhw-row-price { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .mhw-row-price__now { font-family: var(--mode-font-display) !important; font-size: 21px; font-weight: 700; line-height: 1; color: #FFFFFF; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row:has(.wcf-single-sel:checked) .mhw-row-price__now { color: var(--mco-accent-text); } body.mco-page.mhw-checkout #wcf-embed-checkout-form .mhw-row-price__tags { display: flex; gap: 5px; } body.mco-page.mhw-checkout #wcf-embed-checkout-form :is(.mhw-row-price__off, .mhw-row-price__months) { padding: 3px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; } body.mco-page.mhw-checkout #wcf-embed-checkout-form .mhw-row-price__off { background: var(--mco-accent-soft); color: var(--mco-accent-text); } body.mco-page.mhw-checkout #wcf-embed-checkout-form .mhw-row-price__months { background: rgba(126, 226, 168, .12); color: #7EE2A8; } /* "Halloween bonus: +1 free month" under the plan name in the order summary */ body.mco-page.mhw-checkout #wcf-embed-checkout-form dl.variation, .mhw-checkout .mh .mco-order-slot dl.variation { display: block; margin: 6px 0 0; font-size: 13px; color: #7EE2A8; } body.mco-page.mhw-checkout #wcf-embed-checkout-form dl.variation :is(dt, dd, p), .mhw-checkout .mh .mco-order-slot dl.variation :is(dt, dd, p) { display: inline; margin: 0; padding: 0; color: #7EE2A8 !important; font-weight: 700; } /* Ladder labels: the word "connections" is visual only where there is room (always read by screen readers) */ .mhw-checkout .mhw-ladder--mini .mhw-ladder__word { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The bonus line always sits on its own line under the plan name (the name cell can be a flex row) */ body.mco-page.mhw-checkout #wcf-embed-checkout-form dl.variation, .mhw-checkout .mh .mco-order-slot dl.variation { flex: 0 0 100%; width: 100%; } /* ---------- Audit fixes ---------------------------------------------------- */ /* Phones and small tablets: CartFlows hides the order table (the "Show Order Summary" bar at the top replaces it), so its heading would stand alone above Payment. */ @media (max-width: 768px) { body.mco-page.mhw-checkout #wcf-embed-checkout-form.wcf-embed-checkout-form-modern-checkout #order_review_heading { display: none !important; } } /* Phones: the moon would sit on the eyebrow text */ @media (max-width: 640px) { .mhw-checkout .mh.mco-hero::before { display: none; } } /* The offer, under the heading (on phones the side card only comes after the form) */ /* "71.99 CAD" in the plan rows */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .mhw-row-price__now small { font-family: var(--mode-font-body) !important; font-size: .6em; font-weight: 700; color: var(--hw-muted); } /* Phones: a narrower skyline anchored on the house, with room for it above the form (the moon is hidden on phones, see above) */ @media (max-width: 640px) { .mhw-checkout .mh.mco-hero { --scene-h: 150px; padding-bottom: 170px; } .mhw-checkout .mh.mco-hero::after { background: url(assets/scene.svg) left -36px bottom / 830px auto no-repeat; } } /* ---------- Night texture: grain over the page, stars in the heading sky ----- */ body.mhw-checkout::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; opacity: .06; mix-blend-mode: overlay; } /* ---------- The offer under the checkout heading: the landing page's badge, in the plan's colour ---------- */ .mhw-checkout .mh .mco-hero__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 9px 20px 9px 9px; border-radius: 999px; background: var(--mco-accent-soft); border: 1px solid var(--mco-accent-line); font-size: 18px; font-weight: 700; line-height: 1.3; color: #FFFFFF; } .mhw-checkout .mh .mco-hero__badge span { flex-shrink: 0; white-space: nowrap; padding: 6px 16px; border-radius: 999px; background: var(--mco-accent); color: var(--mco-accent-ink); font-size: 17px; font-weight: 800; box-shadow: 0 8px 22px -10px var(--mco-accent-glow); } .mhw-checkout .mh .mco-hero__lead { max-width: 760px; font-size: 16px; line-height: 1.6; color: #B8C3DE; } @media (max-width: 640px) { .mhw-checkout .mh .mco-hero__badge { font-size: 15px; gap: 10px; padding: 8px 14px 8px 8px; } .mhw-checkout .mh .mco-hero__badge span { font-size: 14px; padding: 5px 12px; } .mhw-checkout .mh .mco-hero__lead { font-size: 15px; } } /* The heading as on the landing page: a bigger H1 with the offer on a second line in the plan's colour */ .mhw-checkout .mh.mco-hero h1 { font-size: 54px; line-height: 1.04; max-width: 900px; } /* wraps before the moon */ .mhw-checkout .mh .mco-hero__sub { display: block; margin-top: 12px; font-size: .62em; line-height: 1.1; letter-spacing: 0; color: var(--mco-accent-text); text-shadow: 0 0 28px var(--mco-accent-soft); } @media (max-width: 1024px) { .mhw-checkout .mh.mco-hero h1 { font-size: 46px; } } @media (max-width: 640px) { .mhw-checkout .mh.mco-hero h1 { font-size: 34px; } .mhw-checkout .mh .mco-hero__sub { font-size: .7em; margin-top: 8px; } } /* Plans outside the offer (the 3-month ones) are not listed (halloween-checkout.js marks them) */ body.mco-page.mhw-checkout #wcf-embed-checkout-form .wcf-qty-row.mhw-row-out { display: none !important; }