/* ============================================================ Rocket Show — the pages WordPress still serves Cart, checkout, account, privacy policy, 404. Loaded only by the rocketshow-chrome plugin, on top of base.css + site.css. Presentation only. Nothing here hides a field, a total or a payment method — a checkout that looks right but has swallowed a control is worse than one that looks foreign. ============================================================ */ /* ---------------------------------------------------------------- chrome */ /* The block theme's own header and footer. The plugin prints the site's own in their place; these are hidden rather than filtered out of the block pipeline, which keeps the change to one line and easy to reverse. */ header.wp-block-template-part, footer.wp-block-template-part { display: none !important; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper); } /* Twenty Twenty-Five's global styles put letter-spacing: -0.1px and a 21.8px base font size on , and both inherit. The header and footer here are the same markup the static pages use, so they have to start from the same typography — otherwise the menu sits a hair tighter on the shop than it does everywhere else, which is exactly the seam this plugin exists to remove. */ .site-header, .site-footer { font-size: 1rem; line-height: 1.65; letter-spacing: normal; } /* WooCommerce opens woocommerce-layout.css with .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% } and the cart and checkout carry woocommerce-page on the body. One class plus one element outranks the lone class in .brand-logo, so our height is dropped and both logos render at their natural 315x55. These put them back, with enough specificity to stay put. */ .site-header .brand-logo { height: 34px; width: auto; max-width: none; } .site-footer .footer-logo { height: 30px; width: auto; max-width: none; } @media (max-width: 480px) { .site-header .brand-logo { height: 26px; } } /* Twenty Twenty-Five sets its own measure through theme.json. The shop reads better at the width the rest of the site uses. */ .wp-site-blocks > main, .wp-site-blocks > .entry-content, main.wp-block-group { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 88px; } .wp-block-post-title, .woocommerce-products-header__title, main h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: .5px; color: var(--navy-900); margin-bottom: 28px; } /* ------------------------------------------------------------- notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { display: flex; align-items: center; gap: 14px; list-style: none; border: 1px solid var(--line); border-left: 4px solid var(--purple-500); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); padding: 16px 20px; margin: 0 0 26px; font-size: .96rem; } .woocommerce-error { border-left-color: #d4536b; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } /* the theme's icon font */ .woocommerce-message .button, .woocommerce-info .button { margin-left: auto; } /* --------------------------------------------------------------- forms */ .woocommerce form .form-row, .woocommerce-page form .form-row { display: grid; gap: 6px; padding: 0; margin: 0 0 16px; } .woocommerce form .form-row label, .woocommerce-page form .form-row label { font-size: .88rem; font-weight: 600; color: var(--navy-800); } .woocommerce form .form-row .optional { font-weight: 400; color: var(--slate-light); } .woocommerce form .form-row .required { color: var(--purple-600); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea, .woocommerce-page form .form-row select, .select2-container .select2-selection--single { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: .72em .85em; height: auto; transition: border-color .18s ease, box-shadow .18s ease; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .select2-container--focus .select2-selection--single { outline: none; border-color: var(--purple-500); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); } /* select2 draws the country picker; line its inner parts up with the box */ .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: inherit; padding: 0; color: var(--ink); } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); } .select2-dropdown { border-color: var(--line); border-radius: 12px; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--purple-600); } /* WooCommerce lays the billing and additional columns out with floats, and already does it correctly. Nothing here re-does that: a checkout is the last place to trade a working layout for a tidier rule. Only the parts inside are restyled. */ /* -------------------------------------------------------------- buttons */ .woocommerce #payment #place_order, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button.alt { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; padding: .95em 1.8em; border: 1.5px solid transparent; border-radius: 999px; background: linear-gradient(135deg, var(--purple-600), var(--purple-500)); color: #fff; box-shadow: 0 12px 26px -10px rgba(124, 58, 237, .7); transition: transform .18s ease, box-shadow .25s ease; } .woocommerce #payment #place_order:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -10px rgba(124, 58, 237, .8); color: #fff; } .woocommerce #payment #place_order { width: 100%; font-size: 1.05rem; padding: 1.05em 2em; } /* Proceed to checkout is sized in ems by WooCommerce — font-size: 1.25em and padding: 1em — which compounds against the theme's 21.8px base into a 27px font inside a 90px-tall bar, dwarfing everything else on the cart. Full width is kept, matching Place order on the next step; only the scale is normal. */ .woocommerce .wc-proceed-to-checkout a.checkout-button.button { display: block; width: 100%; font-size: 1.05rem; padding: 1.05em 2em; text-align: center; } /* secondary actions read as links, not as a second call to action */ .woocommerce .cart .button[name="update_cart"], .woocommerce a.button.wc-backward, .woocommerce-message a.button { background: transparent; color: var(--purple-600); border-color: rgba(124, 58, 237, .35); box-shadow: none; } .woocommerce .cart .button[name="update_cart"]:hover, .woocommerce a.button.wc-backward:hover, .woocommerce-message a.button:hover { background: var(--purple-600); color: #fff; } /* --------------------------------------------------------------- tables */ .woocommerce table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); font-size: .96rem; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--slate); vertical-align: middle; } .woocommerce table.shop_table thead th { font-family: var(--font-display); font-size: .95rem; letter-spacing: .5px; text-transform: uppercase; color: var(--navy-900); background: var(--paper-2); } .woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { color: var(--navy-900); font-weight: 600; } .woocommerce table.shop_table tfoot tr:last-child th, .woocommerce table.shop_table tfoot tr:last-child td { border-bottom: none; font-size: 1.1rem; } .woocommerce table.shop_table .amount { color: var(--navy-900); font-weight: 600; } .woocommerce-checkout-review-order { margin-top: 8px; } #order_review_heading, .woocommerce-billing-fields h3, .woocommerce-shipping-fields h3, .woocommerce-additional-fields h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--navy-900); margin: 0 0 18px; } /* ------------------------------------------------------------- payment */ /* The panel itself is not boxed — the card moved inwards, onto the list of methods. The PayPal plugin appends its button, and its Google Pay and messaging containers, to #order_review as siblings of #payment rather than children of it, and hides the normal Place order button. Anything drawn around #payment therefore has that button sitting outside it. Boxing the choices instead leaves both Place order and the PayPal button below the card, where an action button belongs, and they line up with the order table above. Note the explicit background: WooCommerce paints this panel rgba(129,110,153,.14) with a radius of its own, so simply not declaring one here uncovers theirs rather than removing the box. */ .woocommerce #payment, #add_payment_method #payment { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0 0; margin-top: 26px; } .woocommerce #payment ul.payment_methods { list-style: none; margin: 0; padding: 22px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); } /* Spacing comes from margins, not from a grid. Making the

a grid gives the radio input a row of its own and stretches it the full width of the box — a 933px-wide radio button with its label stranded underneath. The radio and its label belong on one line, which is what WooCommerce already does. */ .woocommerce #payment ul.payment_methods li + li { margin-top: 14px; } .woocommerce #payment ul.payment_methods label { font-weight: 600; color: var(--navy-800); } .woocommerce #payment ul.payment_methods input[type="radio"] { width: auto; margin-right: 6px; } .woocommerce #payment div.payment_box { margin-top: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font-size: .92rem; color: var(--slate); } .woocommerce #payment div.payment_box::before { display: none; } /* the little arrow */ .woocommerce-privacy-policy-text { font-size: .88rem; color: var(--slate-light); } .woocommerce #payment .form-row.place-order { padding: 0; margin: 18px 0 0; } /* --------------------------------------------------------------- extras */ .woocommerce-form-coupon-toggle .woocommerce-info { font-size: .92rem; } .woocommerce form.checkout_coupon { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--paper-2); } .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; } .woocommerce ul.order_details { list-style: none; padding: 0; } @media (max-width: 860px) { .wp-site-blocks > main, main.wp-block-group { padding: 40px 20px 64px; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px 14px; } }