/* * SmileConnect Checkout — the ONLY stylesheet in this build. * --------------------------------------------------------- * Loaded on /cart/, /checkout/ and /checkout/order-received/ only, and every * selector begins with the single class root `.smileconnect-checkout`, which * the component adds to on exactly those screens. * * Admission 2 of `native-styling.md`: WooCommerce renders the cart table, the * billing form, the order-review panel and its notices itself, so no Elementor * control reaches inside them. The page band, the boxed width, the headings and * the two page hero blocks around this markup are all Elementor CONTROLS * (build/90-cart.php, build/95-checkout.php) — nothing below duplicates them. * * Every rule carries the reason it exists. */ /* Tokens, so the component skins itself from one place instead of repeating hexes. */ .smileconnect-checkout { --sc-black: #000; --sc-tile: #1d1d1f; --sc-tile-2: #26262a; --sc-paper: #f5f5f7; --sc-grey: #86868b; --sc-gilt: #caa57b; --sc-gilt-2: #e6cda6; --sc-teal: #75c6ca; --sc-hair: rgba(255, 255, 255, .12); --sc-r: 28px; --sc-r-s: 18px; /* WooCommerce themes its own form fields from these four variables, so the field skin is set once here instead of out-specificity-ing woocommerce.css. */ --wc-form-color-background: #1d1d1f; --wc-form-color-text: #ffffff; --wc-form-border-color: transparent; --wc-form-border-radius: 12px; } /* ═══════════ 1 · notices ══════════════════════════════════════════════ Woo prints .woocommerce-message/-info/-error with its own light-theme styling; on a black page they render as white slabs. Royal Elementor Addons restyles the same three selectors from a stylesheet that loads after this one, so these rules carry the body's second class to outrank it. */ .smileconnect-checkout.woocommerce-page .woocommerce-message, .smileconnect-checkout.woocommerce-page .woocommerce-info, .smileconnect-checkout.woocommerce-page .woocommerce-error { background: var(--sc-tile); border-top: 3px solid var(--sc-gilt); border-radius: var(--sc-r-s); color: var(--sc-paper); font-size: 15px; padding: 16px 20px 16px 48px; margin: 0 0 22px; list-style: none; } /* Woo draws its notice icon with a ::before glyph that inherits the light palette. */ .smileconnect-checkout.woocommerce-page .woocommerce-message::before, .smileconnect-checkout.woocommerce-page .woocommerce-info::before, .smileconnect-checkout.woocommerce-page .woocommerce-error::before { color: var(--sc-gilt); top: 16px; left: 20px; } /* Woo's notice is a float layout with the button first; the design reads message-then-action, and woocommerce.css paints that button its own grey. */ .smileconnect-checkout.woocommerce-page .woocommerce-message, .smileconnect-checkout.woocommerce-page .woocommerce-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; } .smileconnect-checkout.woocommerce-page .woocommerce-message .button, .smileconnect-checkout.woocommerce-page .woocommerce-info .button { float: none; font-size: 14px; font-weight: 500; padding: 9px 20px; border: 0; border-radius: 980px; background: var(--sc-gilt); color: #111; text-decoration: none; } .smileconnect-checkout.woocommerce-page .woocommerce-error li { margin: 0 0 4px; } /* ═══════════ 2 · form fields ══════════════════════════════════════════ Elementor's Theme Style form_field group covers input and textarea only (its selector list is input:not([type=button]):not([type=submit]), textarea, .elementor-field-textual) and this Kit sets no field padding, so padding, width and is absent from the Theme Style selector list, so its arrow, colour and appearance reset have nowhere else to live. */ .smileconnect-checkout.woocommerce-page .form-row select { padding-right: 40px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sc-grey) 50%), linear-gradient(135deg, var(--sc-grey) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; } /* Theme Style sets a focus border colour but this Kit emits no border style for fields, so nothing would show; and the browser default outline is not the design's. */ .smileconnect-checkout.woocommerce-page .form-row input.input-text:focus, .smileconnect-checkout.woocommerce-page .form-row textarea:focus, .smileconnect-checkout.woocommerce-page .form-row select:focus { border-color: var(--sc-gilt); outline: none; } /* Woo's field labels are theme-styled text; the design's are a 12px gilt-grey caption. */ .smileconnect-checkout.woocommerce-page .form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--sc-grey); margin: 0 0 6px; } .smileconnect-checkout .form-row label .required { color: var(--sc-gilt); text-decoration: none; } /* The design's hint sentence moved out of the label (Woo drops labels into "%s is a required field") into Woo's own `description` span. Woo hides that span and reveals it only while the field has focus, then slides it away again with inline styles — the design shows the hint at rest, so the properties its animation writes inline are the ones marked !important here. */ .smileconnect-checkout.woocommerce-page form .form-row .woocommerce-input-wrapper .description { display: block !important; height: auto !important; overflow: visible !important; margin: 6px 0 0 !important; padding: 0 !important; font-size: 12px; line-height: 1.4; color: var(--sc-grey); /* Woo skins that span as a blue tooltip with a pointer triangle — the design wants a plain grey hint, so the skin is taken back off. */ background: none; border-radius: 0; } .smileconnect-checkout.woocommerce-page form .form-row .woocommerce-input-wrapper .description::before { display: none; } .smileconnect-checkout .form-row label .optional { color: var(--sc-grey); font-weight: 400; } /* Woo lays its billing rows out with floats (.form-row-first/-last); the design is a two-column grid that collapses to one. */ .smileconnect-checkout .woocommerce-billing-fields__field-wrapper, .smileconnect-checkout .woocommerce-additional-fields__field-wrapper, /* The per-seat fieldsets are the component's own markup and sit outside Woo's billing wrapper, so they need the same two-column grid by name. */ .smileconnect-checkout .sc-seat { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .smileconnect-checkout.woocommerce-page .form-row { margin: 0; padding: 0; width: auto; float: none; min-width: 0; } .smileconnect-checkout.woocommerce-page .form-row-wide, .smileconnect-checkout.woocommerce-page .form-row.notes { grid-column: 1 / -1; } /* Woo's own clearfix rows would open a phantom grid cell. */ .smileconnect-checkout .woocommerce-billing-fields .clear { display: none; } /* Woo's own "Billing details" / "Additional information" headings are replaced by the design's copy, printed by attendee_head() on Woo's own hook. */ .smileconnect-checkout .woocommerce-billing-fields > h3, .smileconnect-checkout .woocommerce-additional-fields > h3 { display: none; } .smileconnect-checkout .sc-attendee-h { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--sc-paper); margin: 0 0 10px; } .smileconnect-checkout .sc-attendee-hint { font-size: 16px; color: var(--sc-grey); margin: 0 0 28px; max-width: 563px; } /* Order notes are switched off in WooCommerce's settings, so this column is empty. */ .smileconnect-checkout .col2-set > .col-2:not(:has(.form-row)) { display: none; } /* Woo's inline validation tip is its own markup and inherits nothing useful. */ .smileconnect-checkout .woocommerce-invalid input.input-text, .smileconnect-checkout .woocommerce-invalid select { border-color: #e4b15a; } /* select2 replaces the country