/** * Storefront styles: Make an Offer box, account offers, badges. * Colors come from CSS variables (set globally in ). * * @package WC_Wholesale_Offers */ /* * The --wwo-* color variables are provided on :root by the plugin settings * (printed in ) so the admin color customizer applies live. var() * fallbacks below cover the rare case where that block is missing. */ /* ----- Make an Offer box ----- */ .wwo-offer-box { margin: 18px 0 6px; padding: 18px; border: 1.5px dashed rgba(51, 42, 40, 0.25); border-radius: 12px; background: rgba(240, 209, 173, 0.12); font-size: 15px; color: var(--wwo-primary); } .wwo-offer-box .wwo-btn { display: inline-block; border: 0; border-radius: 9px; padding: 11px 20px; font-weight: 600; cursor: pointer; text-decoration: none; transition: opacity 0.2s ease; } .wwo-btn--primary { background: var(--wwo-primary, #332A28); color: var(--wwo-light, #FFFFFF); } .wwo-btn--secondary { background: var(--wwo-secondary, #F0D1AD); color: var(--wwo-primary, #332A28); } .wwo-btn--ghost { background: transparent; color: var(--wwo-primary, #332A28); border: 1.5px solid var(--wwo-primary, #332A28); } .wwo-btn--text { background: transparent; color: var(--wwo-primary, #332A28); } .wwo-btn--sm { padding: 6px 13px; font-size: 13px; } .wwo-btn:hover { opacity: 0.92; } .wwo-offer-form { margin-top: 14px; } .wwo-offer-form__intro { font-size: 14px; margin: 0 0 12px; } .wwo-offer-input { display: inline-flex; align-items: center; border: 1.5px solid rgba(51, 42, 40, 0.2); border-radius: 9px; overflow: hidden; background: var(--wwo-light); margin-bottom: 12px; } .wwo-offer-input__symbol { padding: 0 12px; color: rgba(51, 42, 40, 0.6); font-weight: 600; } .wwo-offer-input input { border: 0; padding: 11px 12px; font-size: 15px; width: 130px; outline: none; background: transparent; color: var(--wwo-primary); } .wwo-offer-form__buttons { display: flex; gap: 10px; align-items: center; } /* ----- "Please log in" / "awaiting approval" panel (templates/offer-notice.php) ----- */ .wwo-offer-notice__text { margin: 0 0 14px; font-size: 14px; line-height: 1.6; } .wwo-offer-notice__action { text-decoration: none; } .wwo-offer-message { margin-top: 10px; font-size: 14px; min-height: 1em; } .wwo-offer-message--error { color: #8a1c1c; } .wwo-offer-message--success { color: #1b5e20; } .wwo-offer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .wwo-offer-status p { margin: 8px 0; } .wwo-offer-expiry { font-size: 13px; color: rgba(51, 42, 40, 0.7); } /* ----- Status badges ----- */ .wwo-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.3px; } .wwo-badge--pending { background: #fff3cd; color: #7a5c00; } .wwo-badge--countered { background: #d9ecff; color: #0b4a8a; } .wwo-badge--accepted, .wwo-badge--approved { background: #e8f5e9; color: #1b5e20; } .wwo-badge--rejected { background: #fdecea; color: #8a1c1c; } .wwo-badge--expired { background: #eceff1; color: #546e7a; } /* ----- Account offers table ----- */ .wwo-offers-table { width: 100%; border-collapse: collapse; } .wwo-offers-table th, .wwo-offers-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid rgba(51, 42, 40, 0.1); vertical-align: middle; } .wwo-offers-table th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(51, 42, 40, 0.7); } .wwo-account-actions .wwo-offer-actions { margin-top: 0; } /* Account menu badge */ .wwo-badge-count { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; text-align: center; background: #c0392b; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 5px; } .wwo-alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; } .wwo-alert--info { background: rgba(240, 209, 173, 0.35); color: var(--wwo-primary, #332A28); } .wwo-alert--success { background: #e8f5e9; color: #1b5e20; } .wwo-alert--error { background: #fdecea; color: #8a1c1c; } /* ===================================================================== * My Account area — branded with the plugin palette. * Scoped to .woocommerce-account so it stays out of the rest of the theme. * =================================================================== */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid rgba( 51, 42, 40, 0.12 ); border-radius: 12px; overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid rgba( 51, 42, 40, 0.08 ); margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 13px 18px; color: var(--wwo-primary, #332A28); font-weight: 600; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba( 240, 209, 173, 0.35 ); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--wwo-primary, #332A28); color: var(--wwo-light, #FFFFFF); } /* Dashboard headings + buttons */ .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { color: var(--wwo-primary, #332A28); } .woocommerce-account .woocommerce-MyAccount-content a.button, .woocommerce-account .woocommerce-MyAccount-content button.button, .woocommerce-account .woocommerce-Button { background: var(--wwo-primary, #332A28); color: var(--wwo-light, #FFFFFF); border: 0; border-radius: 8px; font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-content a.button:hover, .woocommerce-account .woocommerce-MyAccount-content button.button:hover, .woocommerce-account .woocommerce-Button:hover { opacity: 0.92; color: var(--wwo-light, #FFFFFF); } /* The "My Offers" table header bar */ .woocommerce-account .wwo-offers-table th { color: var(--wwo-primary, #332A28); } /* Account-menu unread badge already styled above (.wwo-badge-count). */ /* ===================================================================== * Account dashboard (logged-in view of [wwo_login_register]) — professional * dark layout: sidebar navigation + content card, white text, brand accents. * =================================================================== */ .wwo-account-embed { --wwo-line: rgba(255, 255, 255, 0.12); --wwo-panel: rgba(255, 255, 255, 0.04); color: #fff; font-size: 15px; margin: 0 auto; /* Vertically centre the dashboard in the viewport. */ min-height: 100vh; display: flex; flex-direction: column; } /* Ensure width:100% includes padding/border so the banner and the nav+content row line up to exactly the same width. */ .wwo-account-embed, .wwo-account-embed *, .wwo-account-embed *::before, .wwo-account-embed *::after { box-sizing: border-box; } /* Nav + content fill the full width so they align with the banner. */ .wwo-account-embed .woocommerce { justify-content: flex-start; width: 100%; } /* Notices/messages inside the flex row must span the full width (their own row above the nav + content), not sit as a column beside the navigation. */ .wwo-account-embed .woocommerce > .wwo-alert, .wwo-account-embed .woocommerce > .woocommerce-notices-wrapper, .wwo-account-embed .woocommerce > .woocommerce-message, .wwo-account-embed .woocommerce > .woocommerce-info, .wwo-account-embed .woocommerce > .woocommerce-error { flex: 0 0 100%; width: 100%; order: -1; margin: 0 0 4px; } /* Full-width post-auth notice above the dashboard row. */ .wwo-account-embed .wwo-acc-notice { width: 100%; margin: 0 0 20px; border-radius: 12px; } /* ---- Glass "My Account" banner (compact) ---- */ .wwo-acc-banner { position: relative; width: 100%; margin: 0 0 50px; padding: 50px 0px; overflow: hidden; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) ); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); } /* Subtle tan sheen for the glass. */ .wwo-acc-banner::before { content: ""; position: absolute; top: -40%; right: -10%; width: 280px; height: 200px; background: radial-gradient( circle, rgba(240, 209, 173, 0.18), transparent 70% ); pointer-events: none; } .wwo-acc-banner__inner { position: relative; z-index: 1; text-align: center; } .wwo-acc-banner__title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: 0.2px; color: #fff !important; } .wwo-acc-banner__crumb { margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, 0.62); } .wwo-acc-banner__crumb a { color: rgba(255, 255, 255, 0.82) !important; text-decoration: none; } .wwo-acc-banner__crumb a:hover { text-decoration: underline; } .wwo-acc-banner__crumb span { margin: 0 7px; opacity: 0.55; } @media ( max-width: 600px ) { .wwo-acc-banner { padding: 15px 18px; margin-bottom: 20px; } .wwo-acc-banner__title { font-size: 20px; } } .wwo-account-embed, .wwo-account-embed p, .wwo-account-embed li, .wwo-account-embed td, .wwo-account-embed th, .wwo-account-embed span, .wwo-account-embed strong, .wwo-account-embed label, .wwo-account-embed h1, .wwo-account-embed h2, .wwo-account-embed h3, .wwo-account-embed address, .wwo-account-embed .woocommerce-MyAccount-content, .wwo-account-embed .woocommerce-MyAccount-content * { color: #ffffff; } /* Two-column layout with comfortable spacing. */ .wwo-account-embed .woocommerce { display: flex; gap: 30px; align-items: flex-start; } /* ---- Sidebar navigation ---- */ .wwo-account-embed .woocommerce-MyAccount-navigation { flex: 0 0 240px; width: 240px; float: none; margin: 0; } .wwo-account-embed .woocommerce-MyAccount-navigation ul { margin: 0; padding: 8px; list-style: none; background: var(--wwo-panel); border: 1px solid var(--wwo-line); border-radius: 14px; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li { border: 0; margin: 2px 0; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { display: block; padding: 12px 16px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: rgba(255, 255, 255, 0.82) !important; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(255, 255, 255, 0.07); color: #fff !important; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--wwo-secondary, #F0D1AD); color: var(--wwo-accent, #050909) !important; box-shadow: 0 6px 16px rgba(240, 209, 173, 0.18); } /* ---- Content panel ---- */ .wwo-account-embed .woocommerce-MyAccount-content { flex: 1 1 auto !important; min-width: 0; float: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 26px 28px; line-height: 1.7; background: var(--wwo-panel); border: 1px solid var(--wwo-line); border-radius: 14px; } .wwo-account-embed .woocommerce-MyAccount-content > :first-child { margin-top: 0; } .wwo-account-embed .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; } .wwo-account-embed .woocommerce-MyAccount-content h2, .wwo-account-embed .woocommerce-MyAccount-content h3 { margin: 0 0 14px; font-weight: 700; line-height: 1.25; } .wwo-account-embed .woocommerce-MyAccount-content p { margin: 0 0 16px; } /* Tidy the default WooCommerce dashboard greeting. */ .wwo-account-embed .woocommerce-MyAccount-content .woocommerce-MyAccount-content__greeting, .wwo-account-embed .woocommerce-MyAccount-content > p:first-of-type { font-size: 18px; font-weight: 600; color: #fff; } /* Hide the verbose default "From your account dashboard…" line. */ .wwo-account-embed .woocommerce-MyAccount-content > p:nth-of-type(2) { display: none; } /* ---- Dashboard quick-action cards ---- */ .wwo-dash-cards { display: grid; grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); gap: 14px; margin-top: 22px; } .wwo-dash-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--wwo-line); border-radius: 14px; background: rgba(255, 255, 255, 0.03); text-decoration: none !important; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .wwo-dash-card:hover { transform: translateY(-2px); border-color: rgba(240, 209, 173, 0.55); background: rgba(255, 255, 255, 0.06); } .wwo-dash-card__icon { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--wwo-secondary, #F0D1AD); color: var(--wwo-accent, #050909); } .wwo-dash-card__icon svg { width: 22px; height: 22px; } .wwo-dash-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .wwo-dash-card__title { font-size: 15px; font-weight: 700; color: #fff !important; } .wwo-dash-card__desc { font-size: 12.5px; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.4; } .wwo-dash-card__arrow { flex: 0 0 auto; color: var(--wwo-secondary, #F0D1AD) !important; font-size: 18px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s ease, transform 0.15s ease; } .wwo-dash-card:hover .wwo-dash-card__arrow { opacity: 1; transform: translateX(0); } /* Links — branded, readable on dark. */ .wwo-account-embed a:not(.button):not(.wwo-btn) { color: var(--wwo-secondary, #F0D1AD); text-decoration: none; font-weight: 600; } .wwo-account-embed a:not(.button):not(.wwo-btn):hover { text-decoration: underline; } /* Address / info blocks become subtle cards. */ .wwo-account-embed .woocommerce-Addresses .woocommerce-Address, .wwo-account-embed .woocommerce-Address { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--wwo-line); border-radius: 12px; padding: 18px 20px; } /* * Address / column titles ("Billing address", "Shipping address"). Some themes * colour these headings with a dark brand colour, which is unreadable on the * dark account panel — force them light with enough specificity to win. */ .wwo-account-embed .woocommerce-column__title, .wwo-account-embed .woocommerce-Address-title h3, .wwo-account-embed .woocommerce-Address-title .title, .wwo-account-embed h3.woocommerce-column__title { color: #ffffff !important; opacity: 1 !important; } /* Notices / messages. */ .wwo-account-embed .woocommerce-message, .wwo-account-embed .woocommerce-info, .wwo-account-embed .woocommerce-error, .wwo-account-embed .woocommerce-notice { background: rgba(255, 255, 255, 0.06) !important; border-top: 3px solid var(--wwo-secondary, #F0D1AD) !important; border-radius: 10px; color: #fff !important; padding: 14px 18px; } /* Tables (orders etc.). */ .wwo-account-embed table.shop_table { border: 1px solid var(--wwo-line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: transparent; } .wwo-account-embed table.shop_table th, .wwo-account-embed table.shop_table td { border-color: var(--wwo-line) !important; } /* Form fields readable (dark text on light field). */ .wwo-account-embed input, .wwo-account-embed select, .wwo-account-embed textarea { color: #2a2320 !important; background: #f3f3f3 !important; border: 1.5px solid transparent !important; border-radius: 9px !important; padding: 12px 14px !important; box-shadow: none !important; } .wwo-account-embed input:focus, .wwo-account-embed select:focus, .wwo-account-embed textarea:focus { border-color: var(--wwo-secondary, #F0D1AD) !important; outline: none; } /* Password-field show/hide button background fix. */ .wwo-account-embed .password-input .show-password-input, .wwo-account-embed .show-password-input { background: transparent !important; } /* Buttons → brand tan with dark text. */ .wwo-account-embed .button, .wwo-account-embed button[type="submit"], .wwo-account-embed .woocommerce-Button { background: var(--wwo-secondary, #F0D1AD) !important; color: var(--wwo-accent, #050909) !important; border: 0 !important; border-radius: 10px !important; padding: 13px 22px !important; font-weight: 700 !important; box-shadow: none !important; } .wwo-account-embed .button:hover, .wwo-account-embed button[type="submit"]:hover { opacity: 0.92; } /* Boxed variant (self-contained card on any background). */ .wwo-account-embed--boxed { max-width: 1040px; margin: 40px auto; padding: 34px; background: #141110; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } @media ( max-width: 760px ) { .wwo-account-embed .woocommerce { flex-direction: column; } .wwo-account-embed .woocommerce-MyAccount-navigation, .wwo-account-embed .woocommerce-MyAccount-content { flex: 1 1 100%; width: 100%; } } @media ( max-width: 600px ) { .wwo-offers-table thead { display: none; } .wwo-offers-table, .wwo-offers-table tbody, .wwo-offers-table tr, .wwo-offers-table td { display: block; width: 100%; } .wwo-offers-table tr { margin-bottom: 16px; border: 1px solid rgba(51, 42, 40, 0.12); border-radius: 10px; padding: 6px 12px; } .wwo-offers-table td { border: 0; padding: 7px 0; } .wwo-offers-table td::before { content: attr(data-title) ": "; font-weight: 700; } } /* ===================================================================== * ACCOUNT AREA DESIGN SYSTEM * * One set of rules for every screen in My Account — Dashboard, Orders, * Account Details, Make Offer, Addresses. Tables, buttons and headings are * defined once here so no screen can drift from another. * * Appended last on purpose: several rules above set the same properties at * the same specificity, and the later declaration wins. That is what repairs * the invisible offers headers and the washed-out status badges without * having to raise specificity everywhere. * =================================================================== */ .wwo-account-embed, .wwo-acc-banner { /* Menseal is registered by WWO_Public::add_menseal_font_face() when its files are present in assets/fonts/ (see the README there). Poppins is the fallback until then, so nothing ever renders unstyled. */ /* Every plausible name the font may be registered under on the site — Elementor/theme custom fonts keep whatever name they were given, and "Menseal Regular" is as common a registration as plain "Menseal". */ --wwo-f-display: "Menseal Regular", "Menseal", "menseal regular", "menseal", "MenSeal", "Menseal-Regular", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wwo-f-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Shared type scale — every table on every screen uses these two. */ --wwo-th-size: 15px; --wwo-td-size: 14.5px; } /* ---- 1. Navigation: Menseal ---- */ .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { font-family: var(--wwo-f-display); font-size: 15px; letter-spacing: 0.2px; } /* ---- 2a. Section headings ---- */ .wwo-account-embed .woocommerce-MyAccount-content h1, .wwo-account-embed .woocommerce-MyAccount-content h2, .wwo-account-embed .woocommerce-MyAccount-content h3, .wwo-account-embed .woocommerce-column__title, .wwo-account-embed .woocommerce-Address-title h3 { font-family: var(--wwo-f-display); font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: 0.1px; color: #ffffff !important; } /* ---- 5. Addresses: Billing / Shipping titles were dark on dark ---- */ .wwo-account-embed .woocommerce-Addresses .woocommerce-Address-title h3, .wwo-account-embed .woocommerce-Address-title h3, .wwo-account-embed .woocommerce-Address h3, .wwo-account-embed header.woocommerce-Address-title h3 { color: #ffffff !important; } .wwo-account-embed .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } /* ---- 2b. Tables: identical on every screen ---- */ .wwo-account-embed table, .wwo-account-embed .shop_table, .wwo-account-embed .woocommerce-orders-table, .wwo-account-embed .wwo-offers-table { width: 100%; margin: 0 0 8px; border: 0; border-collapse: collapse; background: transparent; font-family: var(--wwo-f-body); } .wwo-account-embed table th, .wwo-account-embed .shop_table th, .wwo-account-embed .woocommerce-orders-table th, .wwo-account-embed .wwo-offers-table th, .woocommerce-account .wwo-offers-table th { padding: 14px 12px; border: 0; border-bottom: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.14)); background: transparent; font-family: var(--wwo-f-display); font-size: var(--wwo-th-size); font-weight: 700; line-height: 1.3; letter-spacing: 0.4px; text-align: left; text-transform: uppercase; color: #ffffff !important; } .wwo-account-embed table td, .wwo-account-embed .shop_table td, .wwo-account-embed .woocommerce-orders-table td, .wwo-account-embed .wwo-offers-table td { padding: 14px 12px; border: 0; border-bottom: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.10)); background: transparent; font-family: var(--wwo-f-body); font-size: var(--wwo-td-size); font-weight: 400; line-height: 1.5; text-align: left; vertical-align: middle; color: #ffffff; } .wwo-account-embed table tr:last-child td { border-bottom: 0; } .wwo-account-embed table td a:not(.button):not(.wwo-btn) { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; } /* ---- 2c. One button style, everywhere ---- */ .wwo-account-embed .button, .wwo-account-embed a.button, .wwo-account-embed button.button, .wwo-account-embed .woocommerce-Button, .wwo-account-embed input[type="submit"], .wwo-account-embed .wwo-btn, .woocommerce-account .woocommerce-MyAccount-content a.button, .woocommerce-account .woocommerce-MyAccount-content button.button, .woocommerce-account .woocommerce-Button { display: inline-block; width: auto; padding: 10px 20px; border: 0 !important; border-radius: 8px; background: var(--wwo-secondary, #F0D1AD) !important; font-family: var(--wwo-f-body); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-align: center; text-decoration: none !important; text-transform: none; white-space: nowrap; color: var(--wwo-accent, #050909) !important; cursor: pointer; box-shadow: none; transition: opacity 0.18s ease; } .wwo-account-embed .button:hover, .wwo-account-embed a.button:hover, .wwo-account-embed button.button:hover, .wwo-account-embed .woocommerce-Button:hover, .wwo-account-embed input[type="submit"]:hover, .wwo-account-embed .wwo-btn:hover, .woocommerce-account .woocommerce-MyAccount-content a.button:hover, .woocommerce-account .woocommerce-MyAccount-content button.button:hover, .woocommerce-account .woocommerce-Button:hover { background: var(--wwo-secondary, #F0D1AD) !important; color: var(--wwo-accent, #050909) !important; opacity: 0.9; } /* Quieter variants keep the same geometry, outlined instead of filled. */ .wwo-account-embed .wwo-btn--ghost, .wwo-account-embed .wwo-btn--text { background: transparent !important; border: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.28)) !important; color: #ffffff !important; } .wwo-account-embed .wwo-btn--ghost:hover, .wwo-account-embed .wwo-btn--text:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } .wwo-account-embed .wwo-btn--sm { padding: 8px 14px; font-size: 13px; } /* * ---- 4. Orders: the View action ---- * WooCommerce renders these as . * The blanket white-text rule in the account block was recolouring them, so * they came out invisible against the cream fill. Pinned explicitly here. */ .wwo-account-embed .woocommerce-orders-table__cell-order-actions a, .wwo-account-embed td.woocommerce-orders-table__cell-order-actions a, .wwo-account-embed a.woocommerce-button { display: inline-block; margin: 2px 4px 2px 0; padding: 9px 18px; border: 0 !important; border-radius: 8px; background: var(--wwo-secondary, #F0D1AD) !important; font-family: var(--wwo-f-body); font-size: 13.5px; font-weight: 600; text-decoration: none !important; color: var(--wwo-accent, #050909) !important; } .wwo-account-embed .woocommerce-orders-table__cell-order-actions { white-space: nowrap; } /* ---- 3. Dashboard card icons: black ---- */ .wwo-account-embed .wwo-dash-card__icon, .wwo-dash-card__icon { color: #000000 !important; } .wwo-account-embed .wwo-dash-card__icon svg, .wwo-dash-card__icon svg { stroke: #000000 !important; color: #000000 !important; } .wwo-account-embed .wwo-dash-card__title { font-family: var(--wwo-f-display); } /* * ---- 6. Status badges ---- * `.wwo-account-embed span { color:#fff }` earlier in this file outranks the * plain `.wwo-badge--*` rules, which is why every badge lost its text colour * and read as white-on-pale. These win it back, on backgrounds dark enough to * carry white text. */ .wwo-account-embed .wwo-badge, .wwo-account-embed span.wwo-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--wwo-f-body); font-size: 11.5px; font-weight: 700; line-height: 1.6; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; } .wwo-account-embed .wwo-badge--accepted, .wwo-account-embed .wwo-badge--approved, .wwo-account-embed span.wwo-badge--accepted { background: #1e7a3c !important; color: #ffffff !important; } .wwo-account-embed .wwo-badge--pending, .wwo-account-embed span.wwo-badge--pending { background: #d9a108 !important; color: #1a1200 !important; } .wwo-account-embed .wwo-badge--countered, .wwo-account-embed span.wwo-badge--countered { background: #1f6feb !important; color: #ffffff !important; } .wwo-account-embed .wwo-badge--rejected, .wwo-account-embed span.wwo-badge--rejected { background: #a32b22 !important; color: #ffffff !important; } .wwo-account-embed .wwo-badge--expired, .wwo-account-embed span.wwo-badge--expired { background: rgba(255, 255, 255, 0.18) !important; color: rgba(255, 255, 255, 0.85) !important; } /* Response controls, now living under the Status cell. */ .wwo-account-embed .wwo-account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* ---- 7. "My Account" banner ---- */ .wwo-acc-banner__title { font-family: var(--wwo-f-display); font-size: 38px; font-weight: 800; line-height: 1.15; letter-spacing: 0.2px; } @media ( max-width: 900px ) { .wwo-acc-banner__title { font-size: 32px; } } @media ( max-width: 600px ) { .wwo-acc-banner__title { font-size: 26px; } .wwo-account-embed table th, .wwo-account-embed table td { padding: 12px 8px; } } /* ===================================================================== * Follow-up refinements (appended last so these are the winning values). * =================================================================== */ /* ---- Banner: taller, with the heading in the display face ---- */ .wwo-acc-banner { padding: 84px 0; margin-bottom: 50px; } .wwo-acc-banner__title { font-family: var(--wwo-f-display); font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: 0.2px; } .wwo-acc-banner__crumb { margin-top: 10px; font-size: 13.5px; } @media ( max-width: 900px ) { .wwo-acc-banner { padding: 64px 0; margin-bottom: 36px; } .wwo-acc-banner__title { font-size: 34px; } } @media ( max-width: 600px ) { .wwo-acc-banner { padding: 44px 18px; margin-bottom: 26px; } .wwo-acc-banner__title { font-size: 27px; } } /* * ---- Tables: roomier headers, display face ---- * * Applies to every table in the account area — Orders, Make Offer and any * other — so they stay identical. The extra top padding is what lifts the * header row off the top edge of the panel. */ .wwo-account-embed table th, .wwo-account-embed .shop_table th, .wwo-account-embed .woocommerce-orders-table th, .wwo-account-embed .wwo-offers-table th, .wwo-account-embed thead th, .woocommerce-account .wwo-offers-table th { padding: 22px 18px !important; font-family: var(--wwo-f-display) !important; font-size: 15px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #ffffff !important; } /* Body cells follow the same horizontal rhythm so columns line up. */ .wwo-account-embed table td, .wwo-account-embed .shop_table td, .wwo-account-embed .woocommerce-orders-table td, .wwo-account-embed .wwo-offers-table td { padding: 18px 18px; } @media ( max-width: 600px ) { .wwo-account-embed table th, .wwo-account-embed .shop_table th, .wwo-account-embed .woocommerce-orders-table th, .wwo-account-embed .wwo-offers-table th, .wwo-account-embed thead th, .woocommerce-account .wwo-offers-table th { padding: 16px 12px !important; } .wwo-account-embed table td, .wwo-account-embed .shop_table td, .wwo-account-embed .woocommerce-orders-table td, .wwo-account-embed .wwo-offers-table td { padding: 14px 12px; } } /* Navigation and headings share the same display face. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul li a, .wwo-account-embed .woocommerce-MyAccount-content h1, .wwo-account-embed .woocommerce-MyAccount-content h2, .wwo-account-embed .woocommerce-MyAccount-content h3, .wwo-account-embed .woocommerce-column__title, .wwo-account-embed .woocommerce-Address-title h3, .wwo-account-embed .wwo-dash-card__title { font-family: var(--wwo-f-display) !important; } /* ===================================================================== * ACCOUNT AREA — RESPONSIVE * * The dashboard had no breakpoints at all: `.woocommerce` stayed a flex row * with a fixed 240px sidebar at every width, so on a phone the content column * was squeezed into whatever was left. These rules stack it, give the tables * a real small-screen layout, and keep everything inside the viewport. * =================================================================== */ /* ---- Laptop: narrow the sidebar before giving up on the row ---- */ @media ( max-width: 1100px ) { .wwo-account-embed .woocommerce { gap: 22px; } .wwo-account-embed .woocommerce-MyAccount-navigation { flex: 0 0 200px; width: 200px; } .wwo-account-embed .woocommerce-MyAccount-content { padding: 22px 22px; } } /* ---- Tablet and below: stack, both columns full width ---- */ @media ( max-width: 980px ) { .wwo-account-embed .woocommerce { display: block; } .wwo-account-embed .woocommerce-MyAccount-navigation { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; margin: 0 0 20px !important; } .wwo-account-embed .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; } /* * Tablet: an even grid rather than a wrapping flex row. Sizing the pills * by their labels left them ragged — "Account Details" taking a whole line * next to "Orders" taking a third of one. auto-fit keeps every column the * same width and picks the count from the space available. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 10px; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li { flex: none; margin: 0; min-width: 0; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { padding: 12px 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* ---- Phone ---- */ @media ( max-width: 640px ) { .wwo-account-embed { font-size: 14.5px; } .wwo-account-embed .woocommerce-MyAccount-content { padding: 18px 16px; border-radius: 12px; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { padding: 10px 13px; font-size: 14px; } .wwo-dash-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; } .wwo-dash-card { padding: 14px 15px; } } /* * ---- Tables on small screens ---- * * Every table in the account area carries data-title on its cells (the Orders * table from WooCommerce, the offers table from our own template), so each row * can become a self-contained card with the column name on the left and the * value on the right. Applied to both so Orders and Make Offer stay identical. */ @media ( max-width: 768px ) { .wwo-account-embed table thead, .wwo-account-embed .shop_table thead, .wwo-account-embed .woocommerce-orders-table thead, .wwo-account-embed .wwo-offers-table thead { display: none; } .wwo-account-embed table, .wwo-account-embed table tbody { display: block; width: 100%; } .wwo-account-embed table tbody tr { display: block; width: 100%; margin: 0 0 14px; border: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.14)); border-radius: 12px; overflow: hidden; } .wwo-account-embed table tbody tr:last-child { margin-bottom: 0; } .wwo-account-embed table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100% !important; padding: 12px 14px !important; border: 0; border-bottom: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.10)); text-align: right; } .wwo-account-embed table tbody tr td:last-child { border-bottom: 0; } /* The column name, taken from the cell's own data-title. */ .wwo-account-embed table tbody td::before { content: attr(data-title); flex: 0 0 auto; float: none; font-family: var(--wwo-f-display); font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; text-align: left; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, 0.68); } /* Cells with no data-title (rare) should not leave an empty gap. */ .wwo-account-embed table tbody td:not([data-title])::before { content: none; } /* Buttons and the response controls sit right, wrapping if they must. */ .wwo-account-embed table tbody td .wwo-account-actions, .wwo-account-embed table tbody td .wwo-offer-actions { justify-content: flex-end; margin-top: 0; } .wwo-account-embed .woocommerce-orders-table__cell-order-actions a, .wwo-account-embed a.woocommerce-button { margin: 2px 0 2px 6px; } /* Status cell: badge and any buttons stack neatly on the right. */ .wwo-account-embed .wwo-offers-table td[data-title] { flex-wrap: wrap; } } /* ---- Very narrow: let long values wrap under their label ---- */ @media ( max-width: 400px ) { .wwo-account-embed table tbody td { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; } .wwo-account-embed table tbody td .wwo-account-actions, .wwo-account-embed table tbody td .wwo-offer-actions { justify-content: flex-start; } .wwo-account-embed .woocommerce-orders-table__cell-order-actions a, .wwo-account-embed a.woocommerce-button { margin: 2px 6px 2px 0; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li { flex: 1 1 100%; } } /* ---- Nothing may push the page sideways at any width ---- */ .wwo-account-embed, .wwo-account-embed .woocommerce, .wwo-account-embed .woocommerce-MyAccount-content { max-width: 100%; min-width: 0; } .wwo-account-embed table { max-width: 100%; } /* * Specificity guard for the stacked tables. * * woocommerce-smallscreen.css styles the same cells through * `.woocommerce table.shop_table_responsive tr td::before` — two classes and * three elements, which outranks the rules above and would reinstate its * `float: left` layout on top of ours. Rather than escalate every selector, * the handful of properties the two stylesheets actually disagree on are * pinned here. Load order between the two files is not guaranteed, so this * cannot rely on "later wins". */ @media ( max-width: 768px ) { .wwo-account-embed .woocommerce table.shop_table_responsive tbody tr td, .wwo-account-embed table.shop_table_responsive tbody tr td, .wwo-account-embed table tbody tr td { display: flex !important; float: none !important; clear: none !important; width: 100% !important; text-align: right !important; } .wwo-account-embed .woocommerce table.shop_table_responsive tbody tr td::before, .wwo-account-embed table.shop_table_responsive tbody tr td::before, .wwo-account-embed table tbody tr td::before { float: none !important; text-align: left !important; } .wwo-account-embed .woocommerce table.shop_table_responsive tbody tr, .wwo-account-embed table.shop_table_responsive tbody tr { display: block !important; } } @media ( max-width: 400px ) { .wwo-account-embed .woocommerce table.shop_table_responsive tbody tr td, .wwo-account-embed table.shop_table_responsive tbody tr td, .wwo-account-embed table tbody tr td { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } } /* ===================================================================== * ACCOUNT AREA — tablet & mobile refinements * =================================================================== */ /* * ---- Account forms ---- * * WooCommerce renders these with the theme's default input styling: a solid * white box. On the dark account panel that reads as a hole punched through * the card. Restyled to match the panel it sits in, at every width — the same * field treatment the rest of the plugin uses. */ .wwo-account-embed .woocommerce-MyAccount-content input[type="text"], .wwo-account-embed .woocommerce-MyAccount-content input[type="email"], .wwo-account-embed .woocommerce-MyAccount-content input[type="tel"], .wwo-account-embed .woocommerce-MyAccount-content input[type="number"], .wwo-account-embed .woocommerce-MyAccount-content input[type="password"], .wwo-account-embed .woocommerce-MyAccount-content select, .wwo-account-embed .woocommerce-MyAccount-content textarea { width: 100%; margin: 0; padding: 13px 15px; border: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.16)) !important; border-radius: 10px; background: rgba(255, 255, 255, 0.06) !important; box-shadow: none !important; font-family: var(--wwo-f-body); font-size: 15px; line-height: 1.4; color: #ffffff !important; -webkit-appearance: none; appearance: none; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .wwo-account-embed .woocommerce-MyAccount-content input::placeholder, .wwo-account-embed .woocommerce-MyAccount-content textarea::placeholder { color: rgba(255, 255, 255, 0.42); opacity: 1; } .wwo-account-embed .woocommerce-MyAccount-content input:focus, .wwo-account-embed .woocommerce-MyAccount-content select:focus, .wwo-account-embed .woocommerce-MyAccount-content textarea:focus { outline: none; border-color: var(--wwo-secondary, #F0D1AD) !important; background: rgba(255, 255, 255, 0.10) !important; box-shadow: 0 0 0 3px rgba(240, 209, 173, 0.25) !important; } .wwo-account-embed .woocommerce-MyAccount-content label { display: block; margin: 0 0 7px; font-family: var(--wwo-f-body); font-size: 13.5px; font-weight: 600; color: #ffffff; } .wwo-account-embed .woocommerce-MyAccount-content .required { color: var(--wwo-secondary, #F0D1AD) !important; text-decoration: none; border: 0; } .wwo-account-embed .woocommerce-MyAccount-content .form-row, .wwo-account-embed .woocommerce-MyAccount-content .woocommerce-form-row { margin: 0 0 18px; padding: 0; } .wwo-account-embed .woocommerce-MyAccount-content span.description, .wwo-account-embed .woocommerce-MyAccount-content em { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; line-height: 1.5; color: rgba(255, 255, 255, 0.6); } .wwo-account-embed .woocommerce-MyAccount-content fieldset { margin: 26px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.14)); } .wwo-account-embed .woocommerce-MyAccount-content fieldset legend { padding: 0; font-family: var(--wwo-f-display); font-size: 17px; font-weight: 700; color: #ffffff; } /* ---- Tablet & mobile: 10px side padding on the content panel ---- */ @media ( max-width: 980px ) { .wwo-account-embed .woocommerce-MyAccount-content { padding: 20px 10px !important; } } /* ---- Mobile navigation: an even two-up grid ---- */ @media ( max-width: 640px ) { .wwo-account-embed .woocommerce-MyAccount-content { padding: 16px 10px !important; border-radius: 12px; } /* * Mobile navigation: a single centred column, one item per line, with the * current page as a full-width filled pill and the rest as plain text. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li { flex: none; margin: 0; min-width: 0; grid-column: 1 / -1; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { display: block; width: 100%; padding: 13px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; line-height: 1.3; text-align: center; } /* First / last name stop sharing a line. */ .wwo-account-embed .woocommerce-MyAccount-content .form-row-first, .wwo-account-embed .woocommerce-MyAccount-content .form-row-last, .wwo-account-embed .woocommerce-MyAccount-content .form-row-wide { float: none !important; width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; } .wwo-account-embed .woocommerce-MyAccount-content input[type="text"], .wwo-account-embed .woocommerce-MyAccount-content input[type="email"], .wwo-account-embed .woocommerce-MyAccount-content input[type="tel"], .wwo-account-embed .woocommerce-MyAccount-content input[type="number"], .wwo-account-embed .woocommerce-MyAccount-content input[type="password"], .wwo-account-embed .woocommerce-MyAccount-content select { padding: 12px 13px; font-size: 15px; /* 16px-ish keeps iOS from zooming on focus. */ } .wwo-account-embed .woocommerce-MyAccount-content .button, .wwo-account-embed .woocommerce-MyAccount-content button.button, .wwo-account-embed .woocommerce-MyAccount-content input[type="submit"] { display: block; width: 100%; } } /* ---- Narrow phones ---- */ @media ( max-width: 380px ) { /* Already one per line from 640px down; just ease the type. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { padding: 12px 10px; font-size: 14px; } } /* ===================================================================== * Outer gutters on tablet and mobile. * * The nav box and the content panel were running to the very edge of the * screen. The padding goes on the nav+content row rather than on * .wwo-account-embed so the banner keeps its full-bleed background — insetting * the wrapper would have pulled the gradient in off the edges with it. * =================================================================== */ @media ( max-width: 980px ) { .wwo-account-embed .woocommerce { padding-right: 16px; padding-left: 16px; } /* Banner text needs the same breathing room as the panels below it. */ .wwo-acc-banner { padding-right: 16px; padding-left: 16px; } } @media ( max-width: 640px ) { .wwo-account-embed .woocommerce { padding-right: 12px; padding-left: 12px; } .wwo-acc-banner { padding-right: 12px; padding-left: 12px; } } /* ===================================================================== * MOBILE NAVIGATION — 2×2 grid with hairline dividers, Logout beneath. * * Mobile only (<=640px). Tablet keeps its auto-fit row and desktop keeps the * sidebar; neither is touched here. * =================================================================== */ @media ( max-width: 640px ) { .wwo-account-embed .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.14)); border-radius: 14px; background: var(--wwo-panel, rgba(255, 255, 255, 0.04)); } /* Cell dividers: each cell draws its own right and bottom rule, and the right-hand column drops the vertical one so nothing doubles up on the container border. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul li { margin: 0; min-width: 0; border-right: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.14)); border-bottom: 1px solid var(--wwo-line, rgba(255, 255, 255, 0.14)); } .wwo-account-embed .woocommerce-MyAccount-navigation ul li:nth-child(2n) { border-right: 0; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { display: block; width: 100%; padding: 16px 10px; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--wwo-f-display); font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff !important; } /* * Current page. The reference shows no highlight, but losing "where am I" * altogether is a step backwards — so this is a soft tint plus the brand * tone on the label, rather than the full cream pill used elsewhere. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul li.is-active a { background: rgba(255, 255, 255, 0.07); box-shadow: none; color: var(--wwo-secondary, #F0D1AD) !important; } /* * Logout sits on its own full-width row as a filled button. Targeted by * WooCommerce's own class rather than :last-child, so it still behaves * when the Make Offer item is absent and the count changes. */ .wwo-account-embed .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; padding: 14px 12px; border-right: 0; border-bottom: 0; text-align: center; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a, .wwo-account-embed .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout.is-active a { display: inline-block; width: auto; min-width: 150px; padding: 12px 30px; border-radius: 8px; background: var(--wwo-primary, #332A28); color: #ffffff !important; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--wwo-primary, #332A28); opacity: 0.88; } } /* Narrow phones: keep the 2×2 grid, just ease the type. */ @media ( max-width: 380px ) { .wwo-account-embed .woocommerce-MyAccount-navigation ul li a { padding: 14px 6px; font-size: 13px; } .wwo-account-embed .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { min-width: 130px; padding: 11px 24px; font-size: 13.5px; } } /* ===================================================================== * Password reveal toggle on the Account Details form. * * WooCommerce wraps each password field in .password-input and drops a * .show-password-input span on top of it, drawing the eye through an ::after * glyph. Its colour is inherited and its "shown" state is hard-coded to a dark * grey (#585858) — both invisible against our dark field. Repainted here, and * repositioned: WooCommerce anchors it with `top: 0.7em`, which assumes its own * input height, not ours. * =================================================================== */ .wwo-account-embed .woocommerce-MyAccount-content .password-input, .wwo-account-embed .woocommerce-MyAccount-content .woocommerce-password-input { position: relative; display: block; width: 100%; } /* Room for the toggle so it never sits over the typed characters. */ .wwo-account-embed .woocommerce-MyAccount-content .password-input input, .wwo-account-embed .woocommerce-MyAccount-content .woocommerce-password-input input { padding-right: 48px; } .wwo-account-embed .woocommerce-MyAccount-content .show-password-input { position: absolute; top: 50%; right: 12px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transform: translateY(-50%); border-radius: 6px; background: transparent; cursor: pointer; opacity: 1; color: rgba(255, 255, 255, 0.7) !important; } .wwo-account-embed .woocommerce-MyAccount-content .show-password-input::after, .wwo-account-embed .woocommerce-MyAccount-content .show-password-input.display-password::after { font-size: 16px; line-height: 1; opacity: 1; color: rgba(255, 255, 255, 0.7) !important; } .wwo-account-embed .woocommerce-MyAccount-content .show-password-input:hover, .wwo-account-embed .woocommerce-MyAccount-content .show-password-input:hover::after, .wwo-account-embed .woocommerce-MyAccount-content .show-password-input.display-password, .wwo-account-embed .woocommerce-MyAccount-content .show-password-input.display-password::after { color: var(--wwo-secondary, #F0D1AD) !important; } .wwo-account-embed .woocommerce-MyAccount-content .show-password-input:hover { background: rgba(255, 255, 255, 0.08); } /* Some builds draw the eye as a background image instead of a glyph; a dark SVG needs lifting rather than recolouring. Scoped to that case only, so it cannot touch the glyph version above. */ .wwo-account-embed .woocommerce-MyAccount-content .show-password-input[style*="background-image"] { filter: invert(1) brightness(1.6); } /* Our own eye button, wherever a plugin form appears inside the account area. */ .wwo-account-embed .wwo-eye, .wwo-account-embed .wwo-eye svg { color: rgba(255, 255, 255, 0.7) !important; stroke: currentColor; background: transparent; opacity: 1; } .wwo-account-embed .wwo-eye:hover, .wwo-account-embed .wwo-eye:hover svg { color: var(--wwo-secondary, #F0D1AD) !important; } /* Edge draws its own reveal control on top of everything; lift it too. */ .wwo-account-embed input[type="password"]::-ms-reveal, .wwo-account-embed input[type="password"]::-ms-clear { filter: invert(1) brightness(1.6); } /* * WooCommerce notice icon: stop it landing on the text. * * WooCommerce draws an icon into ::before on these notices, absolutely * positioned at left:1.5em, and leaves 3.5em of left padding to clear it. The * account rule above sets 18px of padding instead, so the icon ends up sitting * directly on top of the first word — the dark mark over "No" in "No order has * been made yet." * * Removing the glyph fixes it without moving anything: it is absolutely * positioned, so nothing reflows, and the padding, colours, border, button and * spacing all stay exactly as they are. */ .wwo-account-embed .woocommerce-message::before, .wwo-account-embed .woocommerce-info::before, .wwo-account-embed .woocommerce-error::before, .wwo-account-embed .woocommerce-notice::before, .wwo-account-embed .woocommerce-Message::before { content: none; display: none; } /* ===================================================================== * "As a Guest" offer — centred modal. * * Presentation only. The element carrying .wwo-guest-form is the modal root, * so every selector wwo-guest-offer.js uses is untouched: the data attributes, * data-field / data-error, .wwo-guest-submit, .wwo-guest-cancel and the * [hidden] toggle all behave exactly as before. * * Field chrome follows the checkout form — Poppins body, "menseal" display * face for the heading, hairline border at 35% of the brand primary, 7px * radius, legend breaking the top border. * =================================================================== */ .wwo-guest-modal { --g-primary: var(--wwo-primary, #332A28); --g-surface: #F0D1AD; --g-light: var(--wwo-light, #FFFFFF); --g-line: rgba(51, 42, 40, 0.35); --g-muted: rgba(51, 42, 40, 0.6); --g-radius: 7px; --g-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --g-display: "menseal", "Menseal", "MenSeal", "menseal bold", "Poppins", -apple-system, sans-serif; position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; font-family: var(--g-body); -webkit-overflow-scrolling: touch; } /* * [hidden] must win here. The inline-offer stylesheet forces display:block on * a hidden panel so it can animate, and a modal that stays on screen while * "closed" would trap the whole page. */ .wwo-guest-modal[hidden] { display: none !important; } .wwo-guest-modal *, .wwo-guest-modal *::before, .wwo-guest-modal *::after { box-sizing: border-box; } .wwo-guest-modal__backdrop { position: fixed; inset: 0; border: 0; padding: 0; background: rgba(5, 9, 9, 0.62); cursor: pointer; } .wwo-guest-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: auto; padding: 34px 38px 28px; border-radius: 20px; background: var(--g-surface); color: var(--g-primary); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); text-align: left; } /* ---- Corner close ---- */ .wwo-guest-modal .wwo-guest-modal__close { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-family: var(--g-body); font-size: 26px; line-height: 1; color: var(--g-primary); cursor: pointer; transition: background-color 0.18s ease; } .wwo-guest-modal .wwo-guest-modal__close:hover { background: rgba(51, 42, 40, 0.1); } /* ---- Heading + range line ---- */ .wwo-guest-modal__title { margin: 0 0 24px; text-align: center; padding: 0; font-family: var(--g-display); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--g-primary); } /* ---- Fields: two up, legend breaking the border ---- */ .wwo-guest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } /* * One field + its message. The message used to live inside the fieldset, which * pushed the border down around it and made the box look crowded; it is now a * sibling below, so the field keeps its original height and the text sits * clear of the box. */ .wwo-guest-modal .wwo-guest-cell { min-width: 0; margin: 0 0 18px; } .wwo-guest-modal .wwo-guest-field { /* fieldset defaults to min-inline-size:min-content, which stops it shrinking inside the grid. */ min-width: 0; margin: 0; padding: 2px 14px 9px; border: 1px solid var(--g-line); border-radius: var(--g-radius); background: transparent; } .wwo-guest-modal .wwo-guest-field > legend { float: none; width: auto; max-width: 100%; margin: 0; padding: 0 6px; border: 0; font-family: var(--g-body); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--g-primary); } .wwo-guest-modal .wwo-guest-field:focus-within { border-color: var(--g-primary); box-shadow: 0 0 0 2px rgba(51, 42, 40, 0.12); } .wwo-guest-modal .wwo-guest-input { width: 100%; min-height: 0; margin: 0; padding: 3px 0 2px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; font-family: var(--g-body); font-size: 14px; line-height: 1.6; text-align: left; text-align: start; color: var(--g-primary) !important; -webkit-appearance: none; appearance: none; } .wwo-guest-modal .wwo-guest-input::placeholder { color: rgba(51, 42, 40, 0.45); opacity: 1; } /* Invalid: the box reddens, matching how the checkout flags a field. */ .wwo-guest-modal .wwo-guest-field:has(.wwo-guest-input--invalid), .wwo-guest-modal .wwo-guest-cell:has(.wwo-guest-input--invalid) .wwo-guest-field { border-color: #b3261e; } .wwo-guest-modal .wwo-guest-input--invalid { color: #b3261e !important; } /* ---- Offer amount: currency prefix inside the same box ---- */ .wwo-guest-modal .wwo-guest-price { display: flex; align-items: center; gap: 6px; width: 100%; } .wwo-guest-modal .wwo-guest-price__symbol { flex: 0 0 auto; font-family: var(--g-body); font-size: 14px; font-weight: 500; color: var(--g-muted); } .wwo-guest-modal .wwo-guest-input--price { flex: 1 1 auto; min-width: 0; -moz-appearance: textfield; appearance: textfield; } .wwo-guest-modal .wwo-guest-input--price::-webkit-outer-spin-button, .wwo-guest-modal .wwo-guest-input--price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ---- Per-field message, under its own box ---- */ .wwo-guest-modal .wwo-guest-error { display: block; margin: 6px 0 0; padding: 0 2px; font-family: var(--g-body); font-size: 12px; font-weight: 500; line-height: 1.45; color: #b3261e; } .wwo-guest-modal .wwo-guest-error[hidden] { display: none; } /* ---- Buttons ---- */ .wwo-guest-modal .wwo-guest-form__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 6px 0 0; } .wwo-guest-modal .wwo-guest-submit { min-width: 230px; padding: 15px 30px; border: 0 !important; border-radius: 8px; background: var(--g-primary) !important; box-shadow: none !important; font-family: var(--g-display); font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; text-align: center; text-transform: none; color: var(--g-light) !important; cursor: pointer; transition: opacity 0.18s ease; } .wwo-guest-modal .wwo-guest-submit:hover { background: var(--g-primary) !important; color: var(--g-light) !important; opacity: 0.9; } .wwo-guest-modal .wwo-guest-submit[disabled] { opacity: 0.6; cursor: default; } /* ---- Status line + footnote ---- */ .wwo-guest-modal .wwo-guest-message { margin: 0 0 12px; min-height: 0; font-family: var(--g-body); font-size: 13px; line-height: 1.5; text-align: center; } .wwo-guest-modal .wwo-guest-message:empty { margin: 0; } .wwo-guest-modal .wwo-guest-message.is-error { color: #b3261e; } .wwo-guest-modal .wwo-guest-message.is-success { color: #14622f; } .wwo-guest-modal__note { margin: 18px 0 0; font-family: var(--g-body); font-size: 12px; line-height: 1.6; text-align: center; color: var(--g-muted); } /* ---- Country selector, restyled onto the beige card ---- */ .wwo-guest-modal .iti { display: block; width: 100%; } .wwo-guest-modal .iti--separate-dial-code { --wwo-iti-pad: 88px; } .wwo-guest-modal .iti--separate-dial-code input.wwo-guest-phone { padding-left: var(--wwo-iti-pad) !important; } .wwo-guest-modal .iti--separate-dial-code .iti__flag-container { display: flex; align-items: center; } .wwo-guest-modal .iti--separate-dial-code .iti__selected-flag { display: flex; align-items: center; height: 100%; padding: 0 6px 0 0; background: transparent; } .wwo-guest-modal .iti__selected-dial-code { margin-left: 7px; font-family: var(--g-body); font-size: 14px; color: var(--g-primary); } .wwo-guest-modal .iti__arrow { margin-left: 6px; border-top-color: var(--g-muted); } .wwo-guest-modal .iti__arrow--up { border-bottom-color: var(--g-muted); } .wwo-guest-modal .iti__country-list { max-height: 210px; border: 1px solid var(--g-line); border-radius: 10px; background: var(--wwo-light, #FFFFFF); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); font-family: var(--g-body); font-size: 13.5px; color: var(--g-primary); text-align: left; } .wwo-guest-modal .iti__country { padding: 8px 11px; } .wwo-guest-modal .iti__country.iti__highlight { background: var(--g-surface); } .wwo-guest-modal .iti__dial-code { color: var(--g-muted); } /* ---- Responsive ---- */ @media ( max-width: 640px ) { .wwo-guest-modal { padding: 16px 12px; align-items: flex-start; } .wwo-guest-modal__dialog { padding: 26px 20px 22px; border-radius: 16px; } .wwo-guest-modal__title { font-size: 24px; } /* One field per line — two columns are unusable at this width. */ .wwo-guest-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .wwo-guest-modal .wwo-guest-cell { margin-bottom: 16px; } .wwo-guest-modal .wwo-guest-form__buttons { flex-direction: column-reverse; align-items: stretch; } .wwo-guest-modal .wwo-guest-submit { width: 100%; min-width: 0; } } @media ( max-width: 380px ) { .wwo-guest-modal__dialog { padding: 22px 15px 18px; } .wwo-guest-modal__title { font-size: 21px; } .wwo-guest-modal .wwo-guest-input, .wwo-guest-modal .wwo-guest-field > legend { font-size: 13.5px; } } @media ( prefers-reduced-motion: reduce ) { .wwo-guest-modal *, .wwo-guest-modal *::before, .wwo-guest-modal *::after { transition-duration: 0.001ms !important; } } /* * "As a Guest" trigger: solid brand primary with white text. * * Three classes plus the pseudo-class on purpose. The inline panel styles all * of its buttons through `.wwo-inline-offer .wwo-btn:hover` with !important, * and wwo-inline-offer.css is enqueued after this file — so matching that * specificity would lose on source order and the button would flip to cream on * hover. Four beats three outright, whichever file loads last. */ .wwo-offer-box .wwo-guest-open.wwo-btn, .wwo-offer-box .wwo-guest-open.wwo-btn:hover, .wwo-offer-box .wwo-guest-open.wwo-btn:focus, .wwo-offer-box .wwo-guest-open.wwo-btn:focus-visible { background: var(--wwo-primary, #332A28) !important; border-color: var(--wwo-primary, #332A28) !important; color: var(--wwo-light, #FFFFFF) !important; } .wwo-offer-box .wwo-guest-open.wwo-btn:hover { opacity: 0.9; }