/* tm-late-469975ba: built by TM Core (theme/page-blocks.php) from 4 files */
/* tm-custom.css */
/*
* Customizer "Additional CSS", moved out of the page.
*
* Source: Appearance > Customize > Additional CSS (the wp-custom-css block),
* captured 2026-09-13 (51064 bytes, 269 rules).
*
* 1.53.0 CLEANUP - done mechanically and verified, not by hand:
* - 118 declarations removed that could never apply: a LATER rule with the
* identical selector, in the identical media context, set the same property
* (same specificity, later wins, so the earlier one was dead). 23 rules were
* left empty by that and went too.
* - Rules that only ever match product pages, the service catalogue, or the
* account area moved to tm-custom-product.css, tm-custom-catalog.css and
* tm-custom-account.css, loaded only there. A rule was moved only if it
* matched nothing on any other public page AND no later rule here touched
* the same element and property (so moving it could not change a winner).
* - Verified by computed style: every element on 16 pages at desktop width and
* 6 at phone width, old CSS vs new - zero differences.
*
* NEW RULES GO IN THE RIGHT FILE: site-wide here, product/catalogue/account in
* their own file. Do not re-add a "v2" block that overrides an earlier one -
* edit the earlier one.
*
* ---------------------------------------------------------------------------
* WHY
*
* WordPress printed this inline in wp_head on EVERY page. 51KB that no browser
* could cache separately and that was re-sent on every single page view - the
* largest remaining item on our own domain, bigger than all fifteen Elementor
* Custom Code snippets put together.
*
* As a file it is gzipped (~8KB on the wire) and cached for 120 days, so
* repeat views cost nothing.
*
* ---------------------------------------------------------------------------
* CASCADE - THIS IS THE PART THAT BREAKS IF YOU CHANGE IT
*
* WordPress hooks wp_custom_css_cb to wp_head at priority 101, deliberately
* late so Customizer CSS overrides theme and plugin styles. Enqueued styles
* print far earlier (wp_print_styles on wp_head 8).
*
* So this is NOT wp_enqueue_style()d. assets/custom-css.php prints a plain
* at wp_head priority 101 - the exact slot the inline block occupied.
* Enqueue it normally and every override in here silently stops winning.
* ---------------------------------------------------------------------------
*/
/* Alternative overlay selector */
.elementor-popup-modal .dialog-widget-overlay,
.dialog-widget-overlay {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.4) !important;
}
/* ===== TM — My Account styling (added via Claude) ===== */
body.woocommerce-account{ background-color:#e8eaf6 !important; }
body.woocommerce-account .elementor-element-e59d245{ background-color:#e8eaf6 !important; }
body.woocommerce-account .woocommerce-MyAccount-content{ background:transparent !important; padding:0 !important; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-notices-wrapper:empty{ margin:0 !important; padding:0 !important; }
body.woocommerce-account #tm-dash{ margin-top:0 !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0 0 8px !important; padding:0 !important; background:transparent !important; border:0 !important; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:flex !important; align-items:center !important; padding:14px 16px !important; border-radius:10px !important; line-height:1.2 !important; background:#fff !important; box-shadow:0 1px 4px rgba(40,48,113,.07) !important; transition:box-shadow .15s ease, transform .15s ease; }
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ box-shadow:0 4px 12px rgba(40,48,113,.12) !important; transform:translateY(-1px); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:#283071 !important; color:#fff !important; }
.woocommerce-account .woocommerce-MyAccount-navigation-link--marketing-plan a::before{ content:""; display:inline-block; width:18px; height:18px; margin-right:0; background-color:currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23283071'%20stroke-width='2'%3E%3Cpath%20d='M3%203v18h18'/%3E%3Cpath%20d='M7%2014l3-4%203%203%205-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23283071'%20stroke-width='2'%3E%3Cpath%20d='M3%203v18h18'/%3E%3Cpath%20d='M7%2014l3-4%203%203%205-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.tm-catalog .tm-catnav__lnk:hover,.tm-catalog .tm-catnav__lnk:focus{ background:#283071 !important; color:#ffffff !important; }
/* ===== TM — Product hero (added via Claude) ===== */
@media (min-width:881px) {
.elementor-element-c7a1be1{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:44px !important; }
.elementor-element-d57da69{ flex:1.25 1 0 !important; min-width:0 !important; }
.elementor-element-89d75dd{ flex:1 1 0 !important; min-width:0 !important; }
}
.tmh-title{ margin-bottom:16px !important; }
.elementor-element-89d75dd .woocommerce-product-gallery{ background:transparent !important; box-shadow:none !important; border:0 !important; }
.elementor-element-89d75dd .woocommerce-product-gallery__trigger{ display:none !important; }
.elementor-element-89d75dd img[src*="placeholder"]{ display:none !important; }
.elementor-element-89d75dd:has(img[src*="placeholder"]) .woocommerce-product-gallery{ background:rgba(255,255,255,.06) !important; border:1px dashed rgba(255,255,255,.22) !important; border-radius:14px !important; min-height:300px !important; }
.related.products .tm-quote-button{ background:#F57B20 !important; border-color:#F57B20 !important; color:#fff !important; border-radius:8px !important; font-weight:600 !important; }
.related.products .tm-quote-button:hover{ background:#e06a12 !important; border-color:#e06a12 !important; color:#fff !important; }
.related.products .compare.button{ display:none !important; }
.elementor-element-40cca77 a.compare.button{ background:transparent !important; color:#283071 !important; border:2px solid #283071 !important; border-radius:8px !important; font-weight:600 !important; }
.elementor-element-40cca77 a.compare.button:hover{ background:#283071 !important; color:#fff !important; border-color:#283071 !important; }
.woocommerce-tabs ul.tabs li.active{ border-bottom:3px solid #F57B20 !important; }
.woocommerce-tabs ul.tabs li.active a{ color:#283071 !important; }
.tm-pp-hero .tm-pp-price .price,.tm-pp-hero .tm-pp-price .price .woocommerce-Price-amount{ color:#fff !important; }
.tm-pp-hero .tm-pp-price .price{ font-size:32px !important; }
.tm-pp-offerrow:has(.tm-qbv) > .e-con-inner{ align-items:flex-start !important; }
/* ===== TM — Plan Builder hero (added via Claude) ===== */
.page-id-1288 .elementor-element-c795f85,.page-id-1288 .e-c795f85,.page-id-1288 [data-id="c795f85"] { background: radial-gradient(ellipse at top right, #2C3680 0%, #1B2150 100%) !important; padding: 80px 20px !important; }
.page-id-1288 .elementor-element-c795f85 h1,.page-id-1288 .elementor-element-c795f85 h2,.page-id-1288 .e-c795f85 h1,.page-id-1288 .e-c795f85 h2,.page-id-1288 [data-id="c795f85"] h1,.page-id-1288 [data-id="c795f85"] h2 { color: #ffffff !important; }
.page-id-1288 .elementor-element-c795f85 p,.page-id-1288 .e-c795f85 p,.page-id-1288 [data-id="c795f85"] p { color: #B9CEFF !important; }
.page-id-1288 .e-c795f85 .e-button-base,.page-id-1288 [data-id="c795f85"] .e-button-base,.page-id-1288 [data-id="cd3e506"] .e-button-base { background-color: #F57B20 !important; color: #ffffff !important; font-family: Poppins, sans-serif !important; font-weight: 700 !important; font-size: 18px !important; padding: 18px 48px !important; border-radius: 50px !important; border: none !important; box-shadow: 0 8px 28px rgba(245,123,32,.45) !important; min-width: 200px !important; }
.page-id-1288 .e-c795f85 .e-button-base:hover,.page-id-1288 [data-id="c795f85"] .e-button-base:hover,.page-id-1288 [data-id="cd3e506"] .e-button-base:hover { background-color: #e06a12 !important; transform: translateY(-2px) !important; box-shadow: 0 12px 36px rgba(245,123,32,.55) !important; }
/* ===== TM — Site-wide price prefix (added via Claude) ===== */
.tm-price-prefix{ display:inline-block; font-size:.6em; font-weight:600; color:#8a93b2; text-transform:uppercase; letter-spacing:.04em; margin-right:3px; vertical-align:baseline; }
/* ===== TM — Quote badge (added via Claude) ===== */
.tm-qbadge{ display:inline-flex !important; align-items:center; justify-content:center; text-decoration:none; line-height:1; }
.tm-qbadge-icon{ display:block; flex:none; }
.tm-qbadge-count{ position:absolute !important; top:-6px !important; right:-10px !important; min-width:20px !important; height:20px !important; padding:0 5px !important; border-radius:4px !important; font-size:11px !important; font-weight:700 !important; font-family:Poppins,system-ui,sans-serif !important; line-height:20px !important; text-align:center !important; pointer-events:none !important; }
.elementor-location-header .elementor-widget-shortcode{ display:inline-flex !important; align-items:center !important; }
.elementor-location-header .elementor-widget-shortcode .elementor-shortcode{ display:inline-flex !important; align-items:center !important; gap:0 !important; }
/* ===== TM — My Account requests/quotes (added via Claude) ===== */
.tm-requests-list{list-style:none;margin:0;padding:0;}
.tm-request-item{ display:grid; grid-template-columns:1fr auto; align-items:start; gap:12px; padding:14px 16px !important; background:#fff; border:1px solid #e8eaf2; border-radius:12px; margin-bottom:12px; box-shadow:0 1px 4px rgba(40,48,113,.06); min-height:0 !important; height:auto !important; }
.tm-request-item > span{ display:block !important; overflow:visible !important; }
.tm-request-item .tm-name{ display:block !important; font-weight:600 !important; font-size:15px !important; color:#283071 !important; line-height:1.35 !important; margin-bottom:4px !important; background:transparent !important; visibility:visible !important; opacity:1 !important; }
.tm-request-item .tm-date{ display:block !important; font-size:12px !important; color:#8a93b2 !important; font-weight:400 !important; background:transparent !important; visibility:visible !important; opacity:1 !important; }
.tm-remove-request{ flex-shrink:0; border:1.5px solid #d33; background:#fff; color:#d33; border-radius:8px; padding:8px 14px; cursor:pointer; font-size:13px; font-weight:600; font-family:Poppins,system-ui,sans-serif; white-space:nowrap; line-height:1; transition:background .15s,color .15s; }
.tm-remove-request:hover{background:#d33;color:#fff;}
.tm-requests-empty{color:#8a93b2;font-size:14px;padding:8px 0;}
.woocommerce-account .tm-requests-list .tm-tile__eyebrow,.woocommerce-account .tm-requests-list .badge,.woocommerce-account .tm-requests-list .onsale,.woocommerce-account .tm-requests-list .product-badge{ display:none !important; }
.tm-q-item{ display:grid !important; grid-template-columns:1fr auto !important; align-items:center !important; gap:8px 14px !important; padding:14px 16px !important; }
.tm-request-item > .tm-q-item__main,.tm-q-item__main{ display:flex !important; flex-direction:column !important; gap:4px !important; min-width:0 !important; grid-column:1 !important; grid-row:1 !important; }
.tm-q-item .tm-name{ display:block !important; font-weight:600 !important; font-size:14px !important; color:#283071 !important; line-height:1.3 !important; margin:0 !important; }
.tm-q-badge{ display:inline-block !important; width:fit-content !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.06em !important; text-transform:uppercase !important; padding:3px 8px !important; border-radius:999px !important; }
.tm-q-item .tm-date{ display:block !important; font-size:11px !important; color:#9a9ab0 !important; margin:0 !important; }
.tm-request-item > .tm-q-item__right,.tm-q-item__right{ display:flex !important; flex-direction:column !important; align-items:flex-end !important; gap:12px !important; grid-column:2 !important; grid-row:1 !important; flex:none !important; width:auto !important; }
.tm-q-price{ font-size:13px !important; font-weight:700 !important; color:#283071 !important; white-space:nowrap !important; text-align:right !important; }
.tm-q-x{ white-space:nowrap !important; font-size:12px !important; padding:6px 12px !important; }
.elementor-element-81a51148 .woocommerce-product-attributes tbody{border:0 !important;}
/* ===== TM — Spec card icon: pin to title line (added via Claude) ===== */
/* ===== TM — Quote badge v2: blue badge + hover orange (added via Claude) ===== */
.tm-qbadge{ color:#283071 !important; transition:color .15s ease !important; }
.tm-qbadge-icon{ transition:stroke .15s ease !important; }
.tm-qbadge-count{ transition:background .15s ease, border-color .15s ease !important; }
/* ===== TM — Quote badge v3: RED count box + larger icon (added via Claude) ===== */
.tm-qbadge-icon{ width:28px !important; height:28px !important; stroke:#283071 !important; }
.tm-qbadge-count{ background:#d33 !important; color:#fff !important; border:0 !important; box-shadow:0 1px 4px rgba(200,0,0,.40) !important; }
.tm-qbadge:hover{ color:#F57B20 !important; opacity:1 !important; }
.tm-qbadge:hover .tm-qbadge-icon{ stroke:#F57B20 !important; }
.tm-qbadge:hover .tm-qbadge-count{ background:#d33 !important; }
/* ===== TM — Off-canvas menu restyle (added via Claude) ===== */
/* BUG FIX: header account hover-dropdown must never show on touch (mobile/tablet) — was leaking over the page */
@media (max-width:1024px) {
.elementor-element-a19ba31 .tm-acct-menu,
.tmb-header .tm-acct-menu{ display:none !important; }
}
/* Account block -> contained card */
.elementor-element-601d08c{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:16px !important; padding:14px 16px !important; margin:4px 0 18px !important; }
/* Primary nav -> bullseye markers */
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item{ align-items:center !important; gap:13px !important; }
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item::before{ flex:none !important; box-sizing:border-box !important; }
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item:hover{ background:rgba(255,255,255,.05) !important; color:#F57B20 !important; }
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item:hover::before{ border-color:#F57B20 !important; box-shadow:inset 0 0 0 3px #F57B20 !important; }
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item.elementor-item-active{ color:#F57B20 !important; }
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item.elementor-item-active::before{ border-color:#F57B20 !important; box-shadow:inset 0 0 0 3px #F57B20 !important; }
/* CTA button spacing + glow */
.elementor-element-4fb743c{ margin:18px 0 4px !important; }
.elementor-element-4fb743c .elementor-button{ box-shadow:0 10px 24px -8px rgba(245,123,32,.5) !important; }
/* "More" heading -> small eyebrow */
.elementor-element-2aba5b9 .elementor-heading-title, .elementor-element-2aba5b9{ font-size:11px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; }
.elementor-element-2aba5b9{ opacity:.5 !important; margin-bottom:2px !important; }
/* More nav -> small inline links */
.elementor-element-287257ba .elementor-nav-menu{ display:flex !important; flex-wrap:wrap !important; gap:4px 20px !important; }
.elementor-element-287257ba .elementor-nav-menu .elementor-item{ padding:5px 0 !important; font-size:14px !important; font-weight:500 !important; opacity:.78 !important; }
.elementor-element-287257ba .elementor-nav-menu .elementor-item:hover{ color:#F57B20 !important; opacity:1 !important; }
/* ===== TM — Off-canvas bullseye fix: absolute marker, no overlap (added via Claude) ===== */
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item:hover{ padding-left:40px !important; }
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item:hover::before,
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item.elementor-item-active::before{ background:#F57B20 !important; border-color:#F57B20 !important; box-shadow:none !important; }
/* ===== TM — Off-canvas height: fit content, cap at viewport (no dead space) ===== */
/* ===== TM — Off-canvas fix: neutralize header backdrop-filter while panel is open ===== */
body.e-off-canvas__no-scroll .elementor-element-313916bc{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* ===== TM — Off-canvas fix v2: higher-specificity override of the sticky backdrop-filter ===== */
body.e-off-canvas__no-scroll .elementor-2491 .elementor-element.elementor-element-313916bc.elementor-sticky--effects{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* ===== TM — Off-canvas: inset the panel from the top & right edges (equal gap) ===== */
.elementor-element-2d5fa15c .e-off-canvas__main{ align-items:flex-start !important; }
.elementor-element-2d5fa15c .e-off-canvas__content{ margin:20px !important; height:auto !important; max-height:calc(100vh - 40px) !important; }
/* ===== TM — Header account icon: match quote-badge size + hover color (added via Claude) ===== */
/* ===== TM — Off-canvas panel logo: pin to a consistent size ===== */
.elementor-2491 .e-off-canvas .elementor-element-55bdc20 img{ width:130px !important; height:auto !important; }
.elementor-2491 .elementor-element-313916bc.elementor-sticky--effects .e-off-canvas .elementor-element-55bdc20.elementor-widget-image img{ width:130px !important; height:auto !important; }
/* ===== TM — Header account icon: nudge size up to 32px (added via Claude) ===== */
.tm-acct-trigger .tm-acct-ico{ font-size:32px !important; }
/* ===== TM — Header account icon: nudge up to align with clipboard (added via Claude) ===== */
/* ===== TM — Header account icon: perfect hover sync with text (added via Claude) ===== */
.tm-acct-trigger .tm-acct-ico,
.tm-acct-trigger:hover .tm-acct-ico,
.tm-acct-trigger:focus-visible .tm-acct-ico{ color:inherit !important; transition:none !important; }
/* ===== TM — Header account hover sync v2: explicit identical transitions (added via Claude) ===== */
.tm-acct-trigger .tm-acct-name,
.tm-acct-trigger .tm-acct-ico,
.tm-acct-trigger .tm-acct-ico::before{ color:#283071 !important; transition:color .15s ease !important; }
.tm-acct-trigger:hover .tm-acct-name,
.tm-acct-trigger:hover .tm-acct-ico,
.tm-acct-trigger:hover .tm-acct-ico::before,
.tm-acct-trigger:focus-visible .tm-acct-name,
.tm-acct-trigger:focus-visible .tm-acct-ico,
.tm-acct-trigger:focus-visible .tm-acct-ico::before{ color:#F57B20 !important; }
/* ===== TM — Header account icon: SVG render fix (added via Claude) ===== */
.tm-acct-trigger .tm-acct-ico,
.tm-acct-trigger .tm-acct-ico path{ fill:none !important; stroke:currentColor !important; }
.tm-acct-trigger .tm-acct-ico{ color:#283071 !important; position:relative !important; transition:color .15s ease !important; }
.tm-acct-trigger:hover .tm-acct-ico,
.tm-acct-trigger:focus-visible .tm-acct-ico{ color:#F57B20 !important; }
/* ===== TM — Header account icon: hover-fill fix + size match (added via Claude) ===== */
.tm-acct-trigger.tm-acct-trigger:hover .tm-acct-ico,
.tm-acct-trigger.tm-acct-trigger:hover .tm-acct-ico path,
.tm-acct-trigger.tm-acct-trigger:focus-visible .tm-acct-ico,
.tm-acct-trigger.tm-acct-trigger:focus-visible .tm-acct-ico path{ fill:none !important; stroke:currentColor !important; }
/* ===== TM — Account icon size: 34 -> 31px (added via Claude) ===== */
.tm-acct-trigger .tm-acct-ico{ width:31px !important; height:31px !important; }
/* ===== TM — Off-canvas nav: flush-left + growing accent bar (added via Claude) ===== */
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item{
display:block !important;
position:relative !important;
padding:12px 12px 12px 16px !important;
border-radius:10px !important;
font-size:17px !important;
font-weight:600 !important;
letter-spacing:-.01em !important;
transition:background .18s ease, color .18s ease !important;
}
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item::before{
content:"" !important;
position:absolute !important;
left:3px !important;
top:50% !important;
transform:translateY(-50%) !important;
width:3px !important;
height:0 !important;
margin:0 !important;
border:0 !important;
border-radius:3px !important;
background:#F57B20 !important;
box-shadow:none !important;
transition:height .2s ease !important;
}
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item:hover,
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item.elementor-item-active{
background:rgba(255,255,255,.06) !important;
color:#F57B20 !important;
padding-left:16px !important;
}
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item:hover::before,
.elementor-element-4b9be595 .elementor-nav-menu .elementor-item.elementor-item-active::before{
height:62% !important;
}
/* ===== TM — Header account icon: drop legacy nudge so it aligns with the clipboard badge ===== */
.tm-acct-trigger .tm-acct-ico{ top:0 !important; vertical-align:middle !important; }
/* ===== TM — Off-canvas logo: white wordmark, no card (added via Claude) ===== */
.elementor-2491 .e-off-canvas .elementor-element-55bdc20 .elementor-widget-container{
background-color:transparent !important;
background-image:url(https://targetmarketeer.com/wp-content/uploads/2026/06/target-marketeer-logo-white.svg) !important;
background-repeat:no-repeat !important;
background-position:left center !important;
background-size:contain !important;
}
.elementor-2491 .e-off-canvas .elementor-element-55bdc20 img{ opacity:0 !important; }
.elementor-2491 .e-off-canvas .elementor-element-bbc646d,
.elementor-2491 .e-off-canvas .elementor-element-69e016f{
background:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
border:0 !important;
border-radius:0 !important;
}
/* ===== TM — FIX: restore off-canvas panel positioning (added via Claude) ===== */
.elementor-location-header .elementor-widget-off-canvas nav.e-off-canvas{
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
z-index: 2147483630 !important;
}
/* ===== TM — off-canvas WHITE logo (corrected target) ===== */
.elementor-element-55bdc20 a{
background-image:url("https://targetmarketeer.com/wp-content/uploads/2026/06/target-marketeer-logo-white.svg") !important;
background-repeat:no-repeat !important;
background-position:left center !important;
background-size:contain !important;
}
.elementor-element-55bdc20 img{ opacity:0 !important; }
/* ===== TM — off-canvas account block: readable username + icon =====
.e-off-canvas is Elementor's menu panel, .tmb-panel the TM Base one. */
.e-off-canvas .tm-acct-name,
.tmb-panel .tm-acct-name{ color:#ffffff !important; }
.e-off-canvas .tm-acct-trigger svg,
.e-off-canvas .tm-acct-trigger svg *,
.tmb-panel .tm-acct-trigger svg,
.tmb-panel .tm-acct-trigger svg *{ color:#ffffff !important; }
.e-off-canvas .tm-acct-trigger svg,
.e-off-canvas .tm-acct-trigger svg *,
.tmb-panel .tm-acct-trigger svg,
.tmb-panel .tm-acct-trigger svg *{ fill:none !important; stroke:#ffffff !important; }
/* ===== TM — account icon hover: outline only (no fill) ===== */
.tm-acct-trigger:hover svg,
.tm-acct-trigger:hover svg *{ fill:none !important; stroke:#F57B20 !important; }
.e-off-canvas .tm-acct-trigger:hover svg,
.e-off-canvas .tm-acct-trigger:hover svg *{ stroke:#ffffff !important; }
/* ===== TM — off-canvas menu: remove the duplicated dropdown copy ===== */
.e-off-canvas .elementor-nav-menu--dropdown,
.e-off-canvas nav.elementor-nav-menu--dropdown,
.e-off-canvas .elementor-menu-toggle{ display:none !important; }
/* ===== TM — account icon hover v2: outline only, kill the orange disc (high specificity) ===== */
html body .tm-acct.tm-acct--in a.tm-acct-trigger:hover svg.tm-acct-ico,
html body .tm-acct.tm-acct--in a.tm-acct-trigger:hover svg.tm-acct-ico path,
html body .tm-acct.tm-acct--out.tm-acct-trigger:hover svg.tm-acct-ico,
html body .tm-acct.tm-acct--out.tm-acct-trigger:hover svg.tm-acct-ico path{ fill:none !important; stroke:#F57B20 !important; }
html body .e-off-canvas .tm-acct a.tm-acct-trigger:hover svg.tm-acct-ico,
html body .e-off-canvas .tm-acct a.tm-acct-trigger:hover svg.tm-acct-ico path{ fill:none !important; stroke:#ffffff !important; }
/* ===== TM — account icon hover v3: nuke the orange disc (added via Claude) ===== */
html body .tm-acct-trigger:hover .tm-acct-ico,
html body .tm-acct-trigger:hover .tm-acct-ico *,
html body .tm-acct-trigger:focus-visible .tm-acct-ico,
html body .tm-acct-trigger:focus-visible .tm-acct-ico *{
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
box-shadow:none !important;
border-radius:0 !important;
fill:none !important;
}
html body .tm-acct-trigger:hover .tm-acct-ico::before,
html body .tm-acct-trigger:hover .tm-acct-ico::after,
html body .tm-acct-trigger:focus-visible .tm-acct-ico::before,
html body .tm-acct-trigger:focus-visible .tm-acct-ico::after{
background:transparent !important;
background-color:transparent !important;
box-shadow:none !important;
content:none !important;
}
/* ===== TM — Account icon hover sync: fade the mask color in step with the username ===== */
.tm-acct-trigger::after{ transition:background-color .15s ease !important; }
/* ===== TM — Header account leak fix v2: sticky-proof (added via Claude) ===== */
@media (max-width:1024px) {
.elementor-2491 .elementor-element-a19ba31,
.elementor-2491 .elementor-sticky .elementor-element-a19ba31,
.elementor-2491 .elementor-sticky__spacer .elementor-element-a19ba31{ display:none !important; }
/* ===== TM — Bug 1 fix: show the off-canvas nav on mobile/tablet (added via Claude) ===== */
.elementor-2491 .elementor-element-4b9be595,
.elementor-2491 .elementor-element-287257ba{ display:flex !important; }
}
/* ===== TM — Off-canvas account leak fix: list follows the panel (added via Claude) ===== */
.elementor-element-601d08c .tm-acct-menu,
.tmb-panel .tm-acct-menu{ visibility:inherit !important; }
/* ===== TM — Show header account ICON on mobile/tablet (Option A) ===== */
@media (max-width:1024px) {
html body .elementor-2491 .elementor-element-a19ba31,
html body .elementor-2491 .elementor-sticky .elementor-element-a19ba31,
html body .elementor-2491 .elementor-sticky__spacer .elementor-element-a19ba31{ display:inline-flex !important; }
html body .elementor-2491 .elementor-element-a19ba31 .tm-acct-name{ display:none !important; }
html body .elementor-2491 .elementor-element-a19ba31 .tm-acct-menu{ display:none !important; pointer-events:none !important; }
}
/* ===== TM — Off-canvas: align "MORE" eyebrow with its links (added via Claude) ===== */
.elementor-element-2d5fa15c .elementor-element-2aba5b9{ padding-left:0 !important; padding-right:0 !important; }
/* ===== TM — Off-canvas: hide the Tidio chat widget while the menu is open (added via Claude) ===== */
body.e-off-canvas__no-scroll #tidio-chat,
body.e-off-canvas__no-scroll #tidio-chat-iframe,
body.e-off-canvas__no-scroll iframe[id*="tidio" i],
body.e-off-canvas__no-scroll iframe[title*="tidio" i]{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* ===== TM — Cross-browser: stop mobile text auto-inflation (added via Claude) ===== */
html{
-webkit-text-size-adjust:100% !important;
-moz-text-size-adjust:100% !important;
text-size-adjust:100% !important;
}
/* /services/ fix: reserve scrollbar gutter so page width doesn't shift when accordion collapse removes the scrollbar (2026-07-03) */
html{ scrollbar-gutter: stable; }
/* ---- TM Account dashboard (Core C v6) ---- */
.woocommerce-account .woocommerce-MyAccount-content{ background:#f4f5fb; border-radius:14px; padding:24px; }
#tm-dash .tm-welcome{ display:flex; align-items:center; gap:14px; background:#283071; border-radius:12px; padding:18px 20px; margin-bottom:16px; }
#tm-dash .tm-avatar{ width:48px; height:48px; border-radius:50%; background:#F57B20; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:20px; flex:0 0 auto; }
#tm-dash .tm-hi{ margin:0; color:#fff; font-size:19px; font-weight:600; }
#tm-dash .tm-since{ margin:3px 0 0; color:#b9bce0; font-size:13px; }
#tm-dash .tm-alert{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-radius:12px; padding:13px 18px; margin-bottom:16px; font-weight:600; font-size:14.5px; }
#tm-dash .tm-alert.warn{ background:#fff1e6; color:#c05b0a; border:1px solid #f5d9bd; }
#tm-dash .tm-alert.late{ background:#fdecec; color:#b3362f; border:1px solid #f2c6c3; }
#tm-dash .tm-alert a{ background:#F57B20; color:#fff; padding:8px 16px; border-radius:8px; text-decoration:none; font-size:14px; white-space:nowrap; }
#tm-dash .tm-alert.late a{ background:#b3362f; }
#tm-dash .tm-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
#tm-dash .tm-tile{ display:block; background:#fff; border:1px solid #ececf3; border-radius:12px; padding:16px; text-decoration:none; box-shadow:0 1px 4px rgba(40,48,113,.07); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
#tm-dash .tm-tile .tm-ti{ color:#F57B20; display:block; line-height:1; }
#tm-dash .tm-tile .tm-big{ display:block; margin:10px 0 2px; font-size:22px; font-weight:600; color:#283071; }
#tm-dash .tm-tile .tm-word{ display:block; margin:10px 0 2px; font-size:16px; font-weight:600; color:#283071; }
#tm-dash .tm-tile .tm-sub{ display:block; font-size:13px; color:#6b6b80; }
#tm-dash .tm-tile .tm-sub.hot{ color:#c05b0a; font-weight:600; }
#tm-dash .tm-tile .tm-sub2{ display:block; font-size:12px; color:#9a9ab0; margin-top:3px; }
#tm-dash .tm-preview{ background:#fff; border:1px solid #ececf3; border-radius:12px; padding:16px 18px; box-shadow:0 1px 4px rgba(40,48,113,.07); }
#tm-dash .tm-preview h4{ margin:0 0 10px; color:#283071; font-size:16px; }
#tm-dash .tm-preview ul{ list-style:none; margin:0; padding:0; }
#tm-dash .tm-preview li{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f0f0f6; color:#283071; font-weight:600; }
#tm-dash .tm-preview .tm-rq-date{ font-weight:500; color:#9a9ab0; font-size:13px; }
#tm-dash .tm-empty{ color:#6b6b80; margin:4px 0 0; }
#tm-dash .tm-btn{ display:inline-block; margin-top:14px; background:#F57B20; color:#fff; padding:10px 18px; border-radius:8px; font-weight:600; font-size:14px; text-decoration:none; }
#tm-dash .tm-btn:hover{ opacity:.9; }
/* ---- TM Messages tab ---- */
.tm-msgs h3{ color:#283071; margin:0 0 6px; }
.tm-msgs-note{ color:#6b6b80; font-size:14px; margin:0 0 14px; }
.tm-msgs-ok{ background:#e9f7ef; color:#1e7e46; border:1px solid #bfe5cd; border-radius:10px; padding:10px 14px; margin-bottom:12px; font-weight:600; }
.tm-msgs-err{ background:#fdecec; color:#b3362f; border:1px solid #f2c6c3; border-radius:10px; padding:10px 14px; margin-bottom:12px; font-weight:600; }
.tm-msgs-thread{ background:#fff; border:1px solid #ececf3; border-radius:12px; padding:16px; margin-bottom:14px; max-height:480px; overflow-y:auto; }
.tm-msgs-empty{ color:#6b6b80; margin:0; }
.tm-msg .tm-msg-body{ border-radius:12px; padding:10px 14px; font-size:15px; line-height:1.45; }
.tm-msg.mine .tm-msg-body{ background:#283071; color:#fff; border-bottom-right-radius:4px; }
.tm-msg.theirs .tm-msg-body{ background:#f4f5fb; color:#283071; border:1px solid #ececf3; border-bottom-left-radius:4px; }
.tm-msg .tm-msg-meta{ font-size:12px; color:#9a9ab0; margin-top:3px; }
.tm-msgs-form textarea{ width:100%; border:1px solid #dcdce6; border-radius:10px; padding:12px 14px; font-family:inherit; font-size:15px; background:#fff; }
.tm-msgs-form button{ margin-top:10px; background:#F57B20; color:#fff; border:0; border-radius:8px; padding:11px 22px; font-weight:600; font-size:15px; font-family:inherit; cursor:pointer; }
.tm-msgs-form button:hover{ opacity:.9; }
/* ---- TM Messages: sidebar nav icon (chat bubble mask, same pattern as marketing-plan) ---- */
.woocommerce-account .woocommerce-MyAccount-navigation-link--messages a::before{ content:""; display:inline-block; width:18px; height:18px; margin-right:0; background-color:currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23283071'%20stroke-width='2'%3E%3Cpath%20d='M4%205a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H9l-5%204z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23283071'%20stroke-width='2'%3E%3Cpath%20d='M4%205a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H9l-5%204z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ---- My Account: action buttons in content area always get white text (fix invisible label on orange) ---- */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-MyAccount-content .button:not(.tm-remove-request):not(.tm-q-x){ color:#fff !important; }
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover{ color:#fff !important; }
/* ---- My Quotes: Send button lost its styling — force brand orange + white label ---- */
.woocommerce-account .tm-q-send{ background:#F57B20 !important; color:#fff !important; border:0 !important; border-radius:8px !important; font-weight:600 !important; font-family:inherit !important; cursor:pointer; }
.woocommerce-account .tm-q-send:hover,
.woocommerce-account .tm-q-send:focus{ background:#e06a12 !important; color:#fff !important; }
/* ---- My Quotes: Browse services button — orange link-color override made it orange-on-orange ---- */
.woocommerce-account .tm-q-browse{ background:#F57B20 !important; color:#fff !important; }
.woocommerce-account .tm-q-browse:hover,
.woocommerce-account .tm-q-browse:focus{ background:#e06a12 !important; color:#fff !important; }
/* ---- My Quotes: Clear all button ---- */
.tm-q-clearwrap{ display:flex; justify-content:flex-end; margin-top:10px; }
.tm-q-clear{ background:#fff; border:1.5px solid #d33; color:#d33 !important; border-radius:8px; padding:9px 16px; font-weight:600; font-size:13px; font-family:inherit; cursor:pointer; }
.tm-q-clear:hover{ background:#d33; color:#fff !important; }
.tm-q-clear:disabled{ opacity:.6; cursor:default; }
/* ===== TM — Off-canvas CLOSE button: pin top-right + kill hover motion (added via Claude 2026-07-20) ===== */
.elementor-element-2d5fa15c .e-69e016f-bcec37c,
.elementor-element-2d5fa15c .elementor-element-69e016f{ position:relative !important; width:100% !important; }
/* ===== TM — Off-canvas CLOSE button v2 (2026-07-21): SUPERSEDES the 07-20 block below-none; that block's width rule targeted guessed atomic classes (.e-69e016f-bcec37c / .elementor-element-69e016f) that the atomic div-block never uses, so 69e016f stayed shrink-to-fit and the absolute X pinned beside the logo. Fix: widen 69e016f via an attribute match that always hits, anchor the X to its real parent bbc646d, pin top-right. ===== */
.elementor-element-2d5fa15c [class*="e-69e016f"]{ width:100% !important; box-sizing:border-box !important; }
.elementor-element-2d5fa15c .elementor-element-bbc646d{ position:relative !important; width:100% !important; }
.elementor-element-2d5fa15c .elementor-element-f32d5be{ position:absolute !important; right:14px !important; left:auto !important; margin:0 !important; z-index:10 !important; }
.elementor-element-2d5fa15c .elementor-element-f32d5be .elementor-button,
.elementor-element-2d5fa15c .elementor-element-f32d5be .elementor-button:hover,
.elementor-element-2d5fa15c .elementor-element-f32d5be:hover .elementor-button{ transform:none !important; animation:none !important; transition:color .18s ease, background-color .18s ease !important; top:auto !important; }
/* ===== TM — Off-canvas close button v2.1 (2026-07-21): after widening bbc646d it turned out to be a COLUMN flex, so the logo centered in the full-width row while the absolute X stayed top-right = misaligned. Force row layout, logo left, X vertically centered on the same line. ===== */
.elementor-element-2d5fa15c .elementor-element-bbc646d{ flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; }
.elementor-element-2d5fa15c .elementor-element-55bdc20{ text-align:left !important; }
.elementor-element-2d5fa15c .elementor-element-f32d5be{ top:50% !important; bottom:auto !important; transform:translateY(-50%) !important; }
/* ===== TM — H2 heading letter-spacing: match tablet/mobile to desktop (2026-07-21) ===== */
@media (max-width:1024px) {
h2{ letter-spacing:-0.25px !important; }
}
/* ===== TM — Off-canvas: custom brand scrollbar (2026-07-22) ===== */
.elementor-element-2d5fa15c .e-off-canvas__content,
.elementor-element-2d5fa15c .e-off-canvas__main,
.elementor-element-2d5fa15c .e-off-canvas__content *{
scrollbar-width:thin !important;
scrollbar-color:#F57B20 rgba(255,255,255,.10) !important;
}
.elementor-element-2d5fa15c .e-off-canvas__content::-webkit-scrollbar,
.elementor-element-2d5fa15c .e-off-canvas__main::-webkit-scrollbar,
.elementor-element-2d5fa15c .e-off-canvas__content *::-webkit-scrollbar{
width:6px !important;
height:6px !important;
}
.elementor-element-2d5fa15c .e-off-canvas__content::-webkit-scrollbar-track,
.elementor-element-2d5fa15c .e-off-canvas__main::-webkit-scrollbar-track,
.elementor-element-2d5fa15c .e-off-canvas__content *::-webkit-scrollbar-track{
background:rgba(255,255,255,.08) !important;
border-radius:999px !important;
margin:8px 0 !important;
}
.elementor-element-2d5fa15c .e-off-canvas__content::-webkit-scrollbar-thumb,
.elementor-element-2d5fa15c .e-off-canvas__main::-webkit-scrollbar-thumb,
.elementor-element-2d5fa15c .e-off-canvas__content *::-webkit-scrollbar-thumb{
background:#F57B20 !important;
border-radius:999px !important;
}
.elementor-element-2d5fa15c .e-off-canvas__content::-webkit-scrollbar-thumb:hover,
.elementor-element-2d5fa15c .e-off-canvas__main::-webkit-scrollbar-thumb:hover,
.elementor-element-2d5fa15c .e-off-canvas__content *::-webkit-scrollbar-thumb:hover{
background:#e06a12 !important;
}
.elementor-element-2d5fa15c .e-off-canvas__content::-webkit-scrollbar-corner,
.elementor-element-2d5fa15c .e-off-canvas__main::-webkit-scrollbar-corner{
background:transparent !important;
}
/* tm-custom-product.css */
/*
* tm-custom, product-page part. Split out of tm-custom.css in 1.53.0 (see its header).
* Printed only on single product pages, in the same wp_head 101 slot, straight after
* tm-custom.css - so it keeps its place in the cascade.
*/
.tm-pp-hero .tm-hx-left h1.tm-hx-title{ font-size:36px !important; line-height:1.15 !important; margin:6px 0 16px !important; letter-spacing:-.01em; }
.tm-hx-saved a{ white-space:nowrap; }
/* ===== TM — Details (product attributes) restyle (added via Claude) ===== */
.elementor-element-81a51148 .woocommerce-product-attributes{ width:100% !important; border-collapse:separate !important; border-spacing:0 !important; margin:0 !important; }
.elementor-element-81a51148 .woocommerce-product-attributes tr:nth-child(2n){background:#fff !important;}
.elementor-element-81a51148 .woocommerce-product-attributes tr:hover{background:#fff !important;}
.elementor-element-81a51148 .woocommerce-product-attributes th,.elementor-element-81a51148 .woocommerce-product-attributes td{ background:transparent !important; }
/* ===== TM — Spec card: center row vertically in card (added via Claude) ===== */
.tm-pp-spec{ align-items:center !important; }
/* ===== TM — Spec card icon: CENTER on the row (fix 2026-07-09; overrides the earlier flex-start pin) ===== */
.tm-pp-spec-ic{ align-self:center !important; margin-top:0 !important; }
/* ===== TM — Details table: brand restyle + label/value centering (2026-07-09; overrides earlier 81a51148 details rules) ===== */
.elementor-element-81a51148 .woocommerce-product-attributes{ border:1px solid #E7E2D8 !important; border-radius:14px !important; background:#fff !important; font-family:Poppins,sans-serif !important; overflow:hidden !important; }
.elementor-element-81a51148 .woocommerce-product-attributes tr{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; background:#fff !important; border:0 !important; border-top:1px solid #F0ECE3 !important; }
.elementor-element-81a51148 .woocommerce-product-attributes tr:first-child{ border-top:0 !important; }
.elementor-element-81a51148 .woocommerce-product-attributes th,
.elementor-element-81a51148 .woocommerce-product-attributes td{ display:flex !important; align-items:center !important; box-sizing:border-box !important; border:0 !important; padding:14px 20px !important; line-height:1.45 !important; text-align:left !important; margin:0 !important; }
.elementor-element-81a51148 .woocommerce-product-attributes th{ flex:0 0 36% !important; max-width:36% !important; background:#F4F5F8 !important; color:#283071 !important; font-style:normal !important; border-right:1px solid #F0ECE3 !important; }
.elementor-element-81a51148 .woocommerce-product-attributes td{ flex:1 1 64% !important; color:#3F4150 !important; font-size:14.5px !important; font-weight:400 !important; font-style:normal !important; }
.elementor-element-81a51148 .woocommerce-product-attributes td p{ margin:0 !important; }
@media (max-width:600px){
.elementor-element-81a51148 .woocommerce-product-attributes tr{ flex-direction:column !important; align-items:stretch !important; }
.elementor-element-81a51148 .woocommerce-product-attributes th,
.elementor-element-81a51148 .woocommerce-product-attributes td{ flex:1 1 100% !important; max-width:100% !important; }
.elementor-element-81a51148 .woocommerce-product-attributes th{ border-right:0 !important; border-bottom:1px solid #F0ECE3 !important; padding:12px 18px !important; }
.elementor-element-81a51148 .woocommerce-product-attributes td{ padding:12px 18px !important; } }
/* ===== TM — What's-included cards: brand polish (2026-07-09) ===== */
.tm-pp-specs .tm-pp-spec{ background:#fff !important; border:1px solid #ECEEF6 !important; border-radius:12px !important; padding:15px 16px !important; box-shadow:0 2px 10px rgba(40,48,113,.05) !important; transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease !important; }
.tm-pp-specs .tm-pp-spec:hover{ border-color:#F57B20 !important; box-shadow:0 10px 22px rgba(40,48,113,.10) !important; transform:translateY(-2px) !important; }
.tm-pp-specs .tm-pp-spec-ic{ background:#F57B20 !important; color:#fff !important; width:24px !important; height:24px !important; flex:0 0 24px !important; font-size:13px !important; box-shadow:0 2px 6px rgba(245,123,32,.35) !important; }
.tm-pp-specs .tm-pp-spec-t{ color:#283071 !important; font-weight:600 !important; }
.tm-pp-specs .tm-pp-spec-s{ color:#6B7083 !important; }
/* ===== TM — Details table: extra brand polish (orange top accent + uppercase labels) (2026-07-09) ===== */
.elementor-element-81a51148 .woocommerce-product-attributes{ border-top:3px solid #F57B20 !important; box-shadow:0 6px 22px rgba(40,48,113,.07) !important; }
.elementor-element-81a51148 .woocommerce-product-attributes th{ text-transform:uppercase !important; letter-spacing:.06em !important; font-size:11.5px !important; font-weight:700 !important; }
/* tm-notices.css */
/*
* WooCommerce notices, in the house style.
*
* The stock notices are a grey slab with square corners, a coloured top rule
* and grey body text - nothing like the rest of the site, and they appear at
* exactly the moments that matter: password reset, login failure, account
* updates, checkout.
*
* Measured before this file (login error, 2026-09-13):
* background #F6F5F8 · border-top 3px #B81C23 · radius 0 · text #515151
*
* These now match the card language used everywhere else - white, 10px radius,
* 1px #E7E9F3 border - with a 4px left accent carrying the state colour, the
* same device as the quote totals panel.
*
* ---------------------------------------------------------------------------
* MARKUP, VERIFIED NOT ASSUMED
*
*
*
…
*
*
* WooCommerce emits these as
for errors and
or
for messages
* depending on the call site, so both are selected. It is the classic notice
* system, NOT the newer block notice banner, on WooCommerce 11.1.
*
* CASCADE: loaded by includes/assets/custom-css.php at wp_head priority 101,
* alongside tm-custom.css and after WooCommerce's own stylesheet. Same
* specificity therefore wins on source order. !important is used only where
* WooCommerce sets a property this has to unset outright - the top rule.
*
* CONTRAST: the state colours are deliberately NOT the brand orange. #F57B20
* measures 2.71:1 against white, well under the 4.5:1 needed for body text.
* The greens and reds below all clear 4.5:1 on white.
* ---------------------------------------------------------------------------
*/
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info,
div.woocommerce-message,
div.woocommerce-error,
div.woocommerce-info {
background: #FFFFFF;
border: 1px solid #E7E9F3;
border-top: 1px solid #E7E9F3 !important;
border-left-width: 4px;
border-left-style: solid;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(40, 48, 113, .06);
color: #283071;
font-family: Poppins, system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
list-style: none;
margin: 0 0 20px;
padding: 16px 22px 16px 54px;
}
.woocommerce-notices-wrapper .woocommerce-message li,
.woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-notices-wrapper .woocommerce-info li,
ul.woocommerce-error li,
ul.woocommerce-message li,
ul.woocommerce-info li {
list-style: none;
margin: 0;
padding: 0;
}
ul.woocommerce-error li + li,
ul.woocommerce-message li + li,
ul.woocommerce-info li + li {
margin-top: 6px;
}
/* State accents. Left border and icon only - the text stays navy so it is
readable at full contrast rather than tinted.
These selectors MUST carry the same specificity as the base block above.
The base sets the 'border' shorthand from a descendant selector
(.woocommerce-notices-wrapper .woocommerce-error, 0-2-0), and a shorthand
writes border-left-color too - so a lower-specificity accent rule silently
loses and the accent renders grey. Measured that exact failure on the first
deploy of this file. */
.woocommerce-notices-wrapper .woocommerce-message,
div.woocommerce-message,
ul.woocommerce-message {
border-left-color: #1E8E3E;
}
.woocommerce-notices-wrapper .woocommerce-error,
div.woocommerce-error,
ul.woocommerce-error {
border-left-color: #C62828;
}
.woocommerce-notices-wrapper .woocommerce-info,
div.woocommerce-info,
ul.woocommerce-info {
border-left-color: #283071;
}
/* WooCommerce draws its icon in ::before and reserves the left padding for it.
Keep the glyph, recolour it per state, and line it up with the new padding. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
top: 18px;
left: 20px;
font-size: 18px;
line-height: 1;
}
.woocommerce-message::before {
color: #1E8E3E;
}
.woocommerce-error::before {
color: #C62828;
}
.woocommerce-info::before {
color: #283071;
}
/* Notices can carry an action button - "View cart", "Login". Match the site
button rather than WooCommerce's default pill. */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
background: #F57B20;
border: 0;
border-radius: 999px;
color: #FFFFFF;
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 9px 22px;
transition: background .18s ease;
}
.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
background: #DD6A12;
color: #FFFFFF;
}
@media (max-width: 600px) {
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info,
div.woocommerce-message,
div.woocommerce-error,
div.woocommerce-info {
font-size: 14.5px;
padding: 14px 16px 14px 46px;
}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
top: 16px;
left: 16px;
}
}
/* tm-forms.css */
/*
* TM house form styling — one look for every Elementor form on the site.
*
* THE REFERENCE IS THE APP DEMO FORM, not any Elementor form. Kirk picked it
* on 2026-09-14 ("visually I like the app form under the app look the best").
* That form is React, styled in app-mockup-engine/src/AppMockupEngine.jsx, so
* the values below are copied from its PB palette and `input` / `pill` style
* objects rather than invented here. If that component's look changes, this
* file is what has to follow it.
*
* navy #283071 labels
* orange #F57B20 button, focus ring, accents
* ink #333333 typed text
* border #eeeeee field border
* field #f7f7f7 field background, white on focus
* muted #888888 placeholder and helper text
* error #E02B4B required marker and validation text
*
* ---------------------------------------------------------------------------
* WHY SO MANY !important, WHEN tm-notices.css DELIBERATELY AVOIDED THEM
*
* Different problem. In tm-notices.css the competing rule was a WooCommerce
* stylesheet at 0-2-0, so matching specificity was enough and honest.
*
* Here the competition is Elementor's PER-WIDGET css, which it generates as:
*
* .elementor-1330 .elementor-element.elementor-element-60b88d6
* .elementor-field-group .elementor-field { ... }
*
* That is five classes — 0-5-0 — and the page id and element id in it are
* different for every form on the site. There is no selector that beats all of
* them that is not either absurd or a lie about what it targets, and adding
* more chained classes to try would produce something nobody could safely edit
* later.
*
* So: !important, confined to the handful of properties that actually define
* the look, in one file, with this note. Anything not listed here still falls
* through to Elementor normally.
*
* THE PROPER FIX, if this ever becomes painful: delete the per-widget Style
* settings from each form widget in Elementor, at which point the generated
* CSS above stops existing and every !important below can go. That is a manual
* pass over ~5 widgets and it is safe to do incrementally — remove a widget's
* settings and nothing changes visually, because this file already provides
* the same look.
*
* ---------------------------------------------------------------------------
* WHY EVERY SELECTOR EXCLUDES .tm-pb5
*
* The plan builder is an Elementor form too, and this file nearly broke it.
*
* Its question rows are real Elementor checkboxes, drawn by tm-plan-optin.css
* as grey circles sitting at the right-hand end of a full-width row. The
* checkbox rules below would have turned every one of them into a 20px orange
* square - and because this file loads at wp_head 101 and the plan builder's
* loads at 8, this file would have won. Caught by opening the live page, not
* by reading either stylesheet.
*
* .tm-pb5 sits on the form widget itself, so :not(.tm-pb5) is enough to keep
* the two apart. The plan builder keeps its bespoke look, which was already
* modelled on the same reference, and owns it in tm-plan-account.css and
* tm-plan-optin.css.
*
* ---------------------------------------------------------------------------
* LOADED AT wp_head 101 by assets/custom-css.php, the Customizer CSS slot, so
* it also sits after Elementor's enqueued stylesheets in source order.
*/
.elementor-widget-form:not(.tm-pb5) .elementor-form {
--tm-form-navy: #283071;
--tm-form-orange: #F57B20;
--tm-form-orange-dark: #D9670F;
--tm-form-ink: #333333;
--tm-form-border: #EEEEEE;
/*
* Fields sit on the same pale grey the option rows use (PB.rowBg), not
* white. White was my reading of the React `input` style object; Kirk's
* reference screenshots and the original plan-builder CSS both had grey,
* and grey is what separates a field from the white card behind it.
* Focus lifts it to white - that change of state is the point.
*/
--tm-form-field-bg: #F7F7F7;
--tm-form-muted: #888888;
--tm-form-error: #E02B4B;
--tm-form-radius: 10px;
}
/* ---------- labels ---------- */
.elementor-widget-form:not(.tm-pb5) .elementor-field-group > label.elementor-field-label {
color: var(--tm-form-navy) !important;
font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
padding-bottom: 6px !important;
}
/* Elementor marks required fields by appending * to the label text. */
.elementor-widget-form:not(.tm-pb5) .elementor-field-required .elementor-field-label:after {
color: var(--tm-form-error) !important;
}
/* ---------- text inputs, textareas, selects ---------- */
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual {
background-color: var(--tm-form-field-bg) !important;
border: 1px solid var(--tm-form-border) !important;
border-radius: var(--tm-form-radius) !important;
padding: 13px 16px !important;
font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
font-size: 15px !important;
line-height: 1.45 !important;
color: var(--tm-form-ink) !important;
box-shadow: none !important;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual::placeholder {
color: #AAAAAA !important;
opacity: 1;
}
/*
* Focus is the one place this adds something the React form does not have.
* That form relies on the browser default outline, which Elementor removes.
* Leaving it removed would fail 2.4.7 Focus Visible, so the orange ring below
* is the accessible equivalent of the same design.
*/
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual:focus {
background-color: #FFFFFF !important;
border-color: var(--tm-form-orange) !important;
box-shadow: 0 0 0 3px rgba(245, 123, 32, .18) !important;
outline: none !important;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-group textarea.elementor-field-textual {
min-height: 120px;
resize: vertical;
}
/* ---------- checkboxes and radios ---------- */
/*
* Drawn, not tinted. `accent-color` was the first attempt and it is not the
* same control: it keeps the browser's own size and corner radius, so it read
* as a default checkbox that happened to be orange. The reference is a 20px
* box with a 5px radius and a 2px border that turns solid orange when ticked,
* so it has to be built.
*
* The tick is a background-image rather than a pseudo-element because an
* cannot carry ::before or ::after in every browser.
*/
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup .elementor-field-option {
display: flex;
align-items: flex-start;
gap: 12px;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup label {
color: var(--tm-form-ink) !important;
font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.625 !important;
margin: 0 !important;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"],
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 20px !important;
height: 20px !important;
margin: 2px 0 0 0 !important;
flex: 0 0 auto;
background-color: #FFFFFF;
border: 2px solid #D8D8D8;
border-radius: 5px;
cursor: pointer;
transition: background-color .12s ease, border-color .12s ease;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"] {
border-radius: 50%;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"]:checked,
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"]:checked {
background-color: var(--tm-form-orange);
border-color: var(--tm-form-orange);
}
/* White tick, 4px stroke, to match the lucide the reference uses. */
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"]:checked {
background-image: radial-gradient(circle, #FFFFFF 0 3px, transparent 3px);
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="checkbox"]:focus-visible,
.elementor-widget-form:not(.tm-pb5) .elementor-field-subgroup input[type="radio"]:focus-visible {
outline: 3px solid rgba(245, 123, 32, .35);
outline-offset: 2px;
}
/* ---------- submit button ---------- */
.elementor-widget-form:not(.tm-pb5) .elementor-form .elementor-button[type="submit"],
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"] {
background-color: var(--tm-form-orange) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 8px !important; /* 2026-09-29: brand 8px corners, matching every other button (was a 50px pill) */
padding: 15px 40px !important;
font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1 !important;
box-shadow: 0 6px 16px rgba(245, 123, 32, .32) !important;
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.elementor-widget-form:not(.tm-pb5) .elementor-form .elementor-button[type="submit"]:hover,
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"]:hover {
background-color: var(--tm-form-orange-dark) !important;
box-shadow: 0 8px 20px rgba(245, 123, 32, .38) !important;
transform: translateY(-1px);
}
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"]:focus-visible {
outline: 3px solid var(--tm-form-navy) !important;
outline-offset: 2px;
}
/*
* Respect a reduced-motion preference: the lift on hover is decoration, and
* the colour change already carries the same information.
*/
@media (prefers-reduced-motion: reduce) {
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"],
.elementor-widget-form:not(.tm-pb5) .elementor-form button[type="submit"]:hover {
transition: none;
transform: none;
}
}
/* ---------- multi-step navigation (the plan builder) ---------- */
/*
* A multi-step Elementor form renders Previous and Next as .elementor-button
* without type="submit", so the rules above do not reach them. The reference
* pairs a quiet grey pill with the orange one, which is what stops a two-button
* row reading as two equal choices.
*/
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-previous,
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next {
border-radius: 8px !important;
font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
line-height: 1 !important;
border: none !important;
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-previous {
background-color: #F0F0F0 !important;
color: #666666 !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 13px 26px !important;
box-shadow: none !important;
}
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-previous:hover {
background-color: #E6E6E6 !important;
}
/* Next carries the same weight as a final submit - it is the forward action. */
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next {
background-color: var(--tm-form-orange) !important;
color: #FFFFFF !important;
font-size: 16px !important;
font-weight: 600 !important;
padding: 15px 40px !important;
box-shadow: 0 6px 16px rgba(245, 123, 32, .32) !important;
}
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next:hover {
background-color: var(--tm-form-orange-dark) !important;
box-shadow: 0 8px 20px rgba(245, 123, 32, .38) !important;
transform: translateY(-1px);
}
/* The step indicator, tinted to match rather than left on Elementor's blue. */
.elementor-widget-form:not(.tm-pb5) .elementor-progress-bar {
background-color: var(--tm-form-orange) !important;
}
.elementor-widget-form:not(.tm-pb5) .elementor-progress-wrapper {
background-color: #F0F0F0 !important;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next,
.elementor-widget-form:not(.tm-pb5) .e-form__buttons__wrapper__button-next:hover {
transition: none;
transform: none;
}
}
/* ---------- validation text ---------- */
.elementor-widget-form:not(.tm-pb5) .elementor-message.elementor-message-danger,
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-error .elementor-error-message {
color: var(--tm-form-error) !important;
font-family: "Poppins", system-ui, -apple-system, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
}
.elementor-widget-form:not(.tm-pb5) .elementor-field-group .elementor-field-textual.elementor-error {
border-color: var(--tm-form-error) !important;
}
/*
* The success card. Popup 1330 already had a hand-written version of this in
* its own widget CSS; this is the same design promoted to every form so the
* other four stop showing Elementor's bare green line.
*
* The ::before override exists because Elementor Pro paints its own tick as a
* background-image on .elementor-message-svg:before — without killing that,
* the glyph below stacks on top of it and you get two ticks.
*/
.elementor-widget-form:not(.tm-pb5) .elementor-message-success {
background: #FFFFFF;
border: 1px solid #E5E7EB;
padding: 30px;
border-radius: 14px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
font-family: "Poppins", system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #1F2937;
margin-top: 25px;
}
.elementor-widget-form:not(.tm-pb5) .elementor-message-success::before {
content: "\2713" !important;
background: none !important;
background-image: none !important;
font-family: "Poppins", system-ui, sans-serif !important;
display: block !important;
float: none !important;
position: static !important;
width: 100% !important;
height: auto !important;
text-align: center !important;
font-size: 36px;
line-height: 1;
color: #4CAF50;
margin: 0 0 12px !important;
}
.elementor-widget-form:not(.tm-pb5) .elementor-message-success::after {
content: none !important;
display: none !important;
}
/* ---------- fields that are never meant to be seen ---------- */
/*
* reCAPTCHA v3 and the honeypot render as empty field groups and leave a gap
* above the button. Three form widgets each carried their own copy of this
* rule in per-widget CSS; it belongs once, here, so a new form gets it free.
*/
.elementor-widget-form:not(.tm-pb5) .elementor-field-type-recaptcha_v3,
.elementor-widget-form:not(.tm-pb5) .elementor-field-type-honeypot {
display: none !important;
}
/* ---------- the app demo's hidden bridge form ---------- */
/*
* The App Blueprint form on /app-mockup/ is a BRIDGE, not something to fill in.
* The React demo collects the answers, writes them into this form's fields and
* submits it, so Elementor still does the sending, the reCAPTCHA, the honeypot
* and the database record. It must never be visible.
*
* It used to be hidden by page-level CSS keyed to ELEMENT IDS:
*
* .elementor-element-6825ba3, .elementor-element-ce777da { ... }
*
* Two problems with that. Element ids change when a widget is deleted and
* re-added, so the rule would silently stop matching and a full contact form
* would appear in the middle of the demo page with no error. And an id in a
* stylesheet is invisible from the Elementor editor - nothing tells you the
* widget is load-bearing. (6825ba3 does not even render any more; only the form
* was actually being hidden.)
*
* The widget now carries the class `tm-blueprint-bridge`, which IS visible in
* Elementor under Advanced > CSS Classes, and this rule targets that.
*
* Properties are copied exactly from the rule they replace. It is the standard
* visually-hidden pattern rather than display:none on purpose: a display:none
* form still submits, but some browsers skip validation and focus handling on
* fully removed fields, and this has always worked.
*
* If you re-create that widget, put the class back.
*/
.elementor-widget-form.tm-blueprint-bridge {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
}