/* Theme Name: MedTec Theme URI: https://medtec.ai Author: MedTec Health Description: Custom block theme for MedTec Health. Navy and sky design system, self-hosted Inter, and every template (including WooCommerce) owned by this theme. Design contract: medtec-navy-sky. Version: 1.17.1 Requires at least: 6.5 Tested up to: 6.9 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: medtec */ /* ============ tokens fallback (mirrors theme.json) ============ */ :root{ --mt-navy:#101828; --mt-navy-deep:#0A101E; --mt-sky:#0369A1; --mt-sky-dark:#075985; --mt-sky-light:#BAE6FD; --mt-sky-tint:#E0F2FE; --mt-gray-body:#6A7282; --mt-gray-bg:#F9FAFB; --mt-border:#E5E7EB; } body{-webkit-font-smoothing:antialiased} /* ============ buttons ============ */ .wp-block-button__link, .wc-block-components-button, button.button, .woocommerce a.button, .woocommerce button.button{ border-radius:8px !important; font-weight:600; box-shadow:0 4px 6px -1px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.10); transition:all .15s ease; } .wp-block-button__link:hover, .woocommerce a.button:hover{transform:translateY(-1px)} /* outline style on dark surfaces */ .is-style-outline-light .wp-block-button__link{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none; } .is-style-outline-light .wp-block-button__link:hover{border-color:#fff;background:rgba(255,255,255,.06)} /* ============ header ============ */ .mt-header{border-bottom:1px solid rgba(255,255,255,.08)} .mt-header .wp-block-navigation a{color:rgba(255,255,255,.8);font-size:14.5px;font-weight:500} .mt-header .wp-block-navigation a:hover{color:#fff} /* topbar sits on the sky ground: links must be white, not the global sky-dark link colour, which scored 1.27:1 against it (WCAG AA needs 4.5:1). */ .mt-topbar a{color:#fff;text-decoration:underline;text-underline-offset:2px} .mt-topbar a:hover{color:var(--mt-sky-light)} /* ============ cards / blog ============ */ .mt-card, .wp-block-post-template .wp-block-post{border:1px solid var(--mt-border);border-radius:14px;background:#fff} .wp-block-post-template .wp-block-post{padding:22px;transition:transform .16s ease,box-shadow .16s ease} .wp-block-post-template .wp-block-post:hover{transform:translateY(-3px);box-shadow:0 18px 38px -24px rgba(16,24,40,.35)} .wp-block-post-title a:hover{color:var(--mt-sky)} /* footer link lists */ .mt-footer-list{list-style:none;margin-left:0} .mt-footer-list li{margin-bottom:9px} /* eyebrow utility */ .mt-eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mt-sky)} /* ============ links ============ */ .entry-content a:not(.wp-block-button__link){color:var(--mt-sky-dark);text-decoration:underline;text-underline-offset:2px} .entry-content a:not(.wp-block-button__link):hover{color:var(--mt-sky)} /* ============ WooCommerce polish ============ */ .woocommerce span.onsale{background:var(--mt-sky)} .woocommerce .price{color:var(--mt-navy)} /* ============ Contact Form 7 ============ */ .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea{ width:100%; border:1px solid var(--mt-border); border-radius:8px; padding:12px 14px; font-family:'Inter',sans-serif; font-size:15px; color:var(--mt-navy); background:#fff; transition:border-color .15s ease; } .wpcf7 input:focus, .wpcf7 textarea:focus{border-color:var(--mt-sky); outline:none; box-shadow:0 0 0 3px rgba(3,105,161,.15)} .wpcf7 input[type=submit]{ background:var(--mt-sky); color:#fff; border:none; border-radius:8px; padding:12px 26px; font-family:'Inter',sans-serif; font-weight:600; font-size:15px; cursor:pointer; box-shadow:0 4px 6px -1px rgba(16,24,40,.10); } .wpcf7 input[type=submit]:hover{background:var(--mt-sky-dark)} .wpcf7 label{font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:var(--mt-gray-body)} .wpcf7 p{margin-bottom:14px} /* ============ palette slug collision: has-border-color ============ theme.json names a palette colour with the slug "border" (#E5E7EB), so WordPress auto-generates the text utility `.has-border-color{color:...}`. That is the SAME class WordPress adds to any block carrying a border colour, so every bordered block inherited hairline grey as its TEXT colour. On the Home pricing cards that meant plan names, prices and every feature line rendered at 1.24:1 against white, far below the 4.5:1 floor. Restore inheritance unless the block genuinely asked for a text colour. Border colour itself is untouched. */ /* WordPress emits its palette text utilities with !important, so the override must match that priority to win. */ .has-border-color:not(.has-text-color){color:inherit !important} /* ============ body text on tinted grounds ============ gray-body #6A7282 measures 4.84:1 on white (passes AA) but only 4.21:1 on sky-tint #E0F2FE, just under the 4.5 floor. The tinted panel already gives the visual separation the grey was carrying, so body copy inside one steps up to ink. Stays on-palette; no new colour introduced. */ .has-sky-tint-background-color .has-gray-body-color, .has-sky-light-background-color .has-gray-body-color{color:var(--mt-navy) !important} /* focus visibility */ a:focus-visible,button:focus-visible,input:focus-visible, textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--mt-sky);outline-offset:2px} /* ============ long-form block content (Phases 2-3 targets) ============ */ .wp-block-details{border:1px solid var(--mt-border);border-radius:8px;background:var(--mt-gray-bg);padding:16px 20px;margin-bottom:12px} .wp-block-details summary{font-weight:600;color:var(--mt-navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px} .wp-block-details summary::-webkit-details-marker{display:none} .wp-block-details summary::after{content:'+';color:var(--mt-sky);font-weight:600;font-size:20px;line-height:1;flex:none} .wp-block-details[open] summary::after{content:'\2013'} .wp-block-details[open] summary{margin-bottom:12px} .wp-block-details p:last-child{margin-bottom:0} .wp-block-table table{border-collapse:collapse;width:100%} .wp-block-table th,.wp-block-table td{border:1px solid var(--mt-border);padding:11px 14px;text-align:left;vertical-align:top} .wp-block-table th{background:var(--mt-sky-tint);color:var(--mt-navy);font-weight:700;font-size:14px} .wp-block-table td{color:var(--mt-navy);font-size:15px} .wp-block-table tr:nth-child(even) td{background:var(--mt-gray-bg)} .wp-block-quote{border-left:3px solid var(--mt-sky);padding:4px 0 4px 24px;margin-left:0;font-style:normal} .wp-block-quote cite{display:block;margin-top:10px;font-size:14px;font-weight:400;color:var(--mt-gray-body);font-style:normal} /* ============ WooCommerce surface (Phase 1) ============ */ /* product cards match blog cards exactly */ .mt-product-card{ border:1px solid var(--mt-border);border-radius:14px;background:#fff;height:100%; display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease; } .mt-product-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -24px rgba(16,24,40,.35)} .mt-product-card .wp-block-post-title a{color:var(--mt-navy);text-decoration:none} .mt-product-card .wp-block-post-title a:hover{color:var(--mt-sky)} /* price and button pin to the bottom so uneven summaries still align */ .mt-product-card .wp-block-woocommerce-product-price{margin-top:auto} /* product imagery: 28 of 29 products have no image yet (Phase 5). Render an on-palette placeholder rather than a broken grey box. */ .mt-product-card .wc-block-components-product-image, .mt-product-card .wp-block-woocommerce-product-image{ display:block;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--mt-sky-tint) 0%,var(--mt-sky-light) 100%); aspect-ratio:16/10; } .mt-product-card .wc-block-components-product-image img, .mt-product-card .wp-block-woocommerce-product-image img{width:100%;height:100%;object-fit:cover;display:block} .mt-product-card .wc-block-components-product-image img[src*="woocommerce-placeholder"]{opacity:0;} /* add-to-cart buttons inherit the primary button treatment */ .wc-block-components-product-button .wp-block-button__link, .wc-block-components-button:not(.is-link){ background:var(--mt-sky);color:#fff;border-radius:8px;font-weight:600;border:none; box-shadow:0 4px 6px -1px rgba(16,24,40,.10);transition:all .15s ease; } .wc-block-components-product-button .wp-block-button__link:hover, .wc-block-components-button:not(.is-link):hover{background:var(--mt-sky-dark);transform:translateY(-1px)} /* sale badge on the accent, not Woo default */ .wc-block-components-product-sale-badge{ background:var(--mt-sky);color:#fff;border-radius:8px;font-weight:600;font-size:12px; letter-spacing:.02em;border:none;padding:4px 10px; } /* shop toolbar controls */ .mt-shop-toolbar select, .woocommerce-ordering select{ border:1px solid var(--mt-border);border-radius:8px;padding:9px 12px;font-family:inherit; font-size:14px;color:var(--mt-navy);background:#fff; } .mt-shop-toolbar select:focus{border-color:var(--mt-sky);outline:none;box-shadow:0 0 0 3px rgba(3,105,161,.15)} /* breadcrumbs */ .wc-block-breadcrumbs a{color:var(--mt-gray-body);text-decoration:none} .wc-block-breadcrumbs a:hover{color:var(--mt-sky)} /* single product */ .mt-product-media .wp-block-woocommerce-product-image-gallery img{border-radius:14px} .mt-product-media:has(img[src*="woocommerce-placeholder"]){ background:linear-gradient(135deg,var(--mt-sky-tint) 0%,var(--mt-sky-light) 100%); border-radius:14px;min-height:320px; } .mt-product-media:has(img[src*="woocommerce-placeholder"]) img{opacity:0} /* cart + checkout: tables, panels, states */ .mt-cart table,.mt-checkout table{border-collapse:collapse;width:100%} .mt-cart th,.mt-cart td{border-bottom:1px solid var(--mt-border);padding:14px 12px;text-align:left} .wc-block-cart-items__header{color:var(--mt-gray-body);font-size:13px;letter-spacing:.06em;text-transform:uppercase} .wc-block-components-sidebar .wc-block-components-panel, .wc-block-cart__sidebar .wc-block-components-panel{ border:1px solid var(--mt-border);border-radius:14px;background:var(--mt-gray-bg);padding:20px; } .wc-block-components-totals-item__value{color:var(--mt-navy);font-weight:700} /* inline form errors, never a page-level banner */ .wc-block-components-validation-error{color:#B42318;font-size:13px;margin-top:6px} .wc-block-components-text-input input:focus, .wc-block-components-select select:focus, .mt-checkout input:focus,.mt-checkout textarea:focus{ border-color:var(--mt-sky);outline:none;box-shadow:0 0 0 3px rgba(3,105,161,.15); } .wc-block-components-text-input input,.wc-block-components-select select{ border:1px solid var(--mt-border);border-radius:8px; } /* empty cart: composed, shows how to fill it */ .wp-block-woocommerce-empty-cart-block{padding:56px 0;text-align:center} .wp-block-woocommerce-empty-cart-block h2{font-size:26px;margin-bottom:10px} .wp-block-woocommerce-empty-cart-block .wc-block-grid__products{margin-top:40px;text-align:left} /* loading: skeleton shaped like the result, not a spinner */ .wc-block-components-skeleton, .wc-block-product-template__skeleton{ background:linear-gradient(90deg,var(--mt-gray-bg) 25%,var(--mt-border) 37%,var(--mt-gray-bg) 63%); background-size:400% 100%;border-radius:8px;animation:mt-shimmer 1.3s ease-in-out infinite; } @keyframes mt-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}} @media (prefers-reduced-motion:reduce){ .wc-block-components-skeleton,.wc-block-product-template__skeleton{animation:none} .mt-product-card,.wp-block-post-template .wp-block-post{transition:none} .mt-product-card:hover{transform:none} } /* mobile collapse, declared not assumed */ @media (max-width:781px){ .mt-shop-toolbar{gap:12px} .mt-product-media{margin-bottom:28px} .mt-shop-intro{padding-top:40px;padding-bottom:40px} } /* ============ long-form measure (Phase 4) ============ Every surface now uses the same 1200px section container as the Home page, so no template reads as narrower than another. Panels, tables, images and grids take that full width; running prose is capped to 820px inside it and centred, which is the owner-approved measure recorded in design-system.md. */ .wp-block-post-content > p, .wp-block-post-content > ul, .wp-block-post-content > ol, .wp-block-post-content > h2, .wp-block-post-content > h3, .wp-block-post-content > h4, .wp-block-post-content > .wp-block-quote, .wp-block-post-content > .wp-block-details, .mt-longform > p, .mt-longform > ul, .mt-longform > ol, .mt-longform > h2, .mt-longform > h3, .mt-longform > h4, .mt-longform > .wp-block-quote, .mt-longform > .wp-block-details{ max-width:820px;margin-left:auto;margin-right:auto; } /* Index group headings belong to the 1200px index beneath them, not to the 820px running-prose measure. Without this the heading sits indented while its rule and two-column list run full width. */ .mt-longform > .mt-group-head, .wp-block-post-content > .mt-group-head{max-width:1200px;margin-left:auto;margin-right:auto} /* Panels, tables, images and grids keep the full 1200px section measure. The constrained layout already sizes them, so only the centring is asserted; an outright max-width:none let a panel spill to the viewport edge. */ .wp-block-post-content > .wp-block-table, .wp-block-post-content > .wp-block-image, .wp-block-post-content > .wp-block-columns, .mt-longform > .wp-block-table, .mt-longform > .wp-block-image, .mt-longform > .wp-block-columns, .mt-longform > .wp-block-group{ max-width:1200px;margin-left:auto;margin-right:auto; } /* Section wrappers (the navy hero, tinted bands) are full-bleed by design and must not be caught by the panel cap above. */ .wp-block-post-content > .wp-block-group{max-width:none} @media (max-width:900px){ .wp-block-post-content > *,.mt-longform > *{max-width:none} } /* --- Site logo (option D lockup) --------------------------------------- Live text plus one inline SVG glyph, not an image. Three reasons: the wordmark stays selectable and perfectly crisp at any DPR, it costs no extra request, and the glyph can animate. 29px reproduces exactly the size the PNG lockup rendered at. The pulse draws itself once on load and replays on hover. It does NOT loop: this is a fixed header, and perpetual motion there fights the contract's motion dial (0.15) and is a vestibular-accessibility problem. prefers-reduced-motion removes it entirely. --- */ .mt-logo{display:inline-flex;align-items:baseline;font-weight:800;letter-spacing:-.03em; font-size:29px;line-height:1;white-space:nowrap;text-decoration:none;color:#fff} .mt-logo:hover,.mt-logo:focus{color:#fff;text-decoration:none} .mt-logo:focus-visible{outline:2px solid #38BDF8;outline-offset:4px;border-radius:8px} .mt-logo--footer{font-size:26px} .mt-logo .mt-pulse{width:.80em;height:.80em;margin:0 .04em;flex:none;overflow:visible; transform:translateY(.046em)} /* The trace is always fully drawn, so the wordmark is never shown broken. A brighter segment travels along it instead: the logo reads as live signal rather than as something still loading. Runs once on load and on hover, never on a loop. */ .mt-logo .mt-pulse .mt-trace{stroke:#38BDF8} .mt-logo .mt-pulse .mt-sweep{stroke:#BAE6FD;stroke-dasharray:16 84;opacity:0} /* Loops continuously, at the owner's request. The 2.2s cycle is sweep for half, rest for half, so it reads as a monitor trace rather than a flashing badge. prefers-reduced-motion still switches it off entirely: that only affects visitors who asked their OS for less motion. */ @keyframes mt-pulse-sweep{ 0%{stroke-dashoffset:100;opacity:0} 6%{opacity:1} 44%{opacity:1} 50%{stroke-dashoffset:0;opacity:0} 100%{stroke-dashoffset:0;opacity:0} } .mt-logo--anim .mt-sweep{animation:mt-pulse-sweep 2.2s linear .25s infinite} .mt-logo--anim:hover .mt-sweep{animation-play-state:running} @media(prefers-reduced-motion:reduce){ .mt-logo--anim .mt-sweep{animation:none;opacity:0} } @media(max-width:781px){.mt-logo{font-size:24px}.mt-logo--footer{font-size:22px}} @media(max-width:480px){.mt-logo{font-size:21px}.mt-logo--footer{font-size:20px}} /* --- Home hero background: drifting signal (option A) ------------------ Two tiled ECG layers scrolling right to left at different scales and speeds. The tile is 1600px with deliberately irregular beat spacing (350/250/310/270px) and varying R amplitudes, and the second layer repeats on a different period, so no readable pattern emerges. A single evenly-spaced tile read as wallpaper. Pseudo-elements only, so no markup changes and nothing to keep in sync with the block content. Only transform animates, so this stays off the main thread. Each layer is oversized by exactly one tile so the translate never exposes an uncovered edge. Worst case (both layers' strokes crossing) measures 13.47:1 for white body copy and 6.29:1 for the 12px sky eyebrow, against 4.5:1 AA. --- */ .mt-hero{position:relative;overflow:hidden;isolation:isolate} .mt-hero > *{position:relative;z-index:1} .mt-hero::before,.mt-hero::after{content:"";position:absolute;top:-8%;bottom:-8%;left:0; z-index:0;pointer-events:none;background-repeat:repeat;will-change:transform; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%221600%22%20height%3D%22200%22%20viewBox%3D%220%200%201600%20200%22%3E%3Cpath%20d%3D%22M0%20120%20L120%20120%20L142%20107%20L164%20120%20L178%20129%20L190%2074%20L202%20135.6%20L216%20120%20L250%20106.2%20L284%20120%20L470%20120%20L492%20107%20L514%20120%20L528%20129%20L540%2046%20L552%20145.2%20L566%20120%20L600%2097.8%20L634%20120%20L720%20120%20L742%20107%20L764%20120%20L778%20129%20L790%2086%20L802%20131.6%20L816%20120%20L850%20109.8%20L884%20120%20L1030%20120%20L1052%20107%20L1074%20120%20L1088%20129%20L1100%2058%20L1112%20141.1%20L1126%20120%20L1160%20101.4%20L1194%20120%20L1300%20120%20L1322%20107%20L1344%20120%20L1358%20129%20L1370%2076%20L1382%20135%20L1396%20120%20L1430%20106.8%20L1464%20120%20L1600%20120%22%20fill%3D%22none%22%20stroke%3D%22%2338BDF8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E")} .mt-hero::before{width:calc(100% + 1600px);background-size:1600px 200px;opacity:.10; animation:mtHeroSignal1 62s linear infinite} .mt-hero::after{width:calc(100% + 1000px);background-size:1000px 125px;background-position:0 44%; opacity:.055;animation:mtHeroSignal2 97s linear infinite} @keyframes mtHeroSignal1{to{transform:translate3d(-1600px,0,0)}} @keyframes mtHeroSignal2{to{transform:translate3d(-1000px,0,0)}} @media(prefers-reduced-motion:reduce){.mt-hero::before,.mt-hero::after{animation:none}} /* --- Blog filter bar, load-more, and states ---------------------------- Chips are links, not buttons, because they change the URL; active state is aria-current, which is valid on an anchor. Numeric pagination is only hidden once .mt-js is on the root, so a visitor without JavaScript keeps a working way to page through. --- */ .mt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .mt-blogfilter{display:flex;flex-direction:column;gap:18px;margin:0 0 40px} .mt-blogfilter__search{display:flex;gap:8px;max-width:460px;width:100%} /* gray-body, not the hairline border token: an empty text field is identified only by its edge, and #E5E7EB measures 1.24:1 on white, well under the 3:1 WCAG 1.4.11 asks of a control boundary. #6A7282 is already in the palette (4.84:1), so this needs no new colour. Chips and the load-more button keep the hairline: both carry a visible text label, and the chip's active state is a filled background, so neither relies on its border to be identified. */ .mt-blogfilter__search input[type=search]{flex:1;min-width:0;font:inherit;font-size:15px; padding:11px 14px;border:1px solid #6A7282;border-radius:8px; background:#fff;color:var(--mt-navy,#101828);-webkit-appearance:none;appearance:none} .mt-blogfilter__search input[type=search]::placeholder{color:#6A7282;opacity:1} .mt-blogfilter__search input[type=search]:focus-visible{outline:2px solid #0369A1;outline-offset:1px; border-color:#0369A1} .mt-blogfilter__submit{font:inherit;font-size:15px;font-weight:600;padding:11px 20px;border:0; border-radius:8px;background:#0369A1;color:#fff;cursor:pointer} .mt-blogfilter__submit:hover{background:#075985} .mt-blogfilter__submit:focus-visible{outline:2px solid #0369A1;outline-offset:2px} .mt-blogfilter__topics{display:flex;flex-wrap:wrap;gap:8px} .mt-chip{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600; line-height:1;padding:9px 14px;border:1px solid var(--mt-border,#E5E7EB);border-radius:8px; color:var(--mt-navy,#101828);background:#fff;text-decoration:none;white-space:nowrap; transition:border-color .15s ease,background-color .15s ease} .mt-chip:hover{border-color:#0369A1;color:#0369A1} .mt-chip:focus-visible{outline:2px solid #0369A1;outline-offset:2px} .mt-chip.is-active{background:#0369A1;border-color:#0369A1;color:#fff} .mt-chip.is-active:hover{background:#075985;border-color:#075985;color:#fff} .mt-chip__n{font-size:12px;font-weight:600;color:#6A7282} .mt-chip.is-active .mt-chip__n{color:#E0F2FE} .mt-blogfilter__status{margin:0;font-size:14px;color:#6A7282} .wp-block-query.is-loading{opacity:.45;transition:opacity .15s ease} .mt-blogmore{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:40px} .mt-blogmore[hidden]{display:none} .mt-blogmore__sentinel{width:1px;height:1px} .mt-blogmore__btn{font:inherit;font-size:15px;font-weight:600;padding:13px 26px;border-radius:8px; border:1px solid var(--mt-border,#E5E7EB);background:#fff;color:var(--mt-navy,#101828);cursor:pointer} .mt-blogmore__btn:hover:not(:disabled){border-color:#0369A1;color:#0369A1} .mt-blogmore__btn:focus-visible{outline:2px solid #0369A1;outline-offset:2px} .mt-blogmore__btn:disabled{opacity:.6;cursor:default} .mt-js .wp-block-query-pagination{display:none} @media(max-width:600px){ .mt-blogfilter__search{max-width:none} /* the chip row scrolls rather than wrapping to four lines on a phone */ .mt-blogfilter__topics{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .mt-blogfilter__topics::-webkit-scrollbar{display:none} } /* --- Header account menu ---------------------------------------------- Replaces the static "Sign in" button once a user is signed in. Built on a native
disclosure, so it opens and closes without JS. Deliberately NOT scoped under .wp-block-details: the FAQ accordion's summary styling (+/- affordance, flex layout) lives there and would otherwise bleed into this control. --- */ .mt-account{position:relative;display:inline-block} .mt-account__toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer; list-style:none;padding:3px;border-radius:999px;color:rgba(255,255,255,.8)} .mt-account__toggle::-webkit-details-marker{display:none} .mt-account__toggle:hover{color:#fff} .mt-account__toggle:focus-visible{outline:2px solid #38BDF8;outline-offset:2px} .mt-account__avatar{display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:999px;background:#0369A1;color:#fff; /* #0369A1 measures 2.99:1 against the navy header, just under the 3:1 WCAG 1.4.11 wants for a control boundary. This ring carries the edge instead (6.1:1) and matches the rgba(255,255,255,.5) border already used by .is-style-outline-light in this same header. */ box-shadow:0 0 0 1px rgba(255,255,255,.55); font-size:14px;font-weight:700;line-height:1;letter-spacing:0;flex:none} .mt-account__chev{width:12px;height:8px;flex:none;transition:transform .15s ease} .mt-account[open] .mt-account__chev{transform:rotate(180deg)} .mt-account__panel{position:absolute;top:calc(100% + 10px);right:0;z-index:40; min-width:238px;background:#fff;border:1px solid var(--mt-border,#E5E7EB); border-radius:14px;box-shadow:0 18px 38px -18px rgba(16,24,40,.35); padding:6px;text-align:left} .mt-account__who{margin:0;padding:12px 14px 10px;border-bottom:1px solid var(--mt-border,#E5E7EB); display:flex;flex-direction:column;gap:2px;line-height:1.35} .mt-account__who span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#6A7282} .mt-account__who strong{font-size:13.5px;font-weight:600;color:#101828;overflow-wrap:anywhere} .mt-account__list{list-style:none;margin:0;padding:6px 0} .mt-account__list--end{border-top:1px solid var(--mt-border,#E5E7EB);padding-bottom:2px} .mt-account__item{display:block;padding:9px 14px;border-radius:8px;font-size:14.5px; font-weight:500;color:#101828;text-decoration:none} .mt-account__item:hover{background:#F9FAFB;color:#0369A1} .mt-account__item:focus-visible{outline:2px solid #0369A1;outline-offset:-2px} /* Log out is the same weight as the rest: muted grey read as disabled in review, and the dividing rule above it already marks it as a separate group without also weakening it. */ .mt-account__item--out:hover{background:#F9FAFB;color:#0369A1} @media(max-width:781px){ /* keep the panel on screen when the control sits beside the hamburger */ .mt-account__panel{right:0;min-width:220px} } /* ============ Phase 4 finish ============ */ /* CF7 text inputs are width:100% with 14px side padding and a 1px border. Without border-box they overrun their container's right padding by exactly 30px, which is what pushed the demo form past its card edge on Home and on Contact Us. */ .wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=search], .wpcf7 textarea{box-sizing:border-box;max-width:100%} /* .entry-content a:not(.wp-block-button__link) is (0,2,1) and beats .mt-chip (0,1,0), so chips and heading links inherited the underlined body-link treatment and read as raw HTML. Headings follow the pattern .wp-block-post-title already uses: navy, no underline, sky on hover. */ .entry-content a.mt-chip{color:var(--mt-navy);text-decoration:none} .entry-content a.mt-chip:hover{color:var(--mt-sky);border-color:var(--mt-sky)} .entry-content :is(h1,h2,h3,h4,h5,h6) a:not(.wp-block-button__link){color:inherit;text-decoration:none} .entry-content :is(h1,h2,h3,h4,h5,h6) a:not(.wp-block-button__link):hover{color:var(--mt-sky);text-decoration:none} .entry-content .wp-block-post-title a{color:var(--mt-navy);text-decoration:none} .entry-content .wp-block-post-title a:hover{color:var(--mt-sky)} /* Honeypot for the CF7 anti-bot mu-plugin. Offscreen rather than display:none, because some bots skip display:none fields on purpose. aria-hidden and tabindex=-1 on the markup keep it away from screen readers and the tab order. */ .mt-hp{position:absolute!important;left:-9999px!important;top:auto!important; width:1px!important;height:1px!important;overflow:hidden!important} /* --- Mobile navigation drawer ----------------------------------------- The drawer shipped as unmodified Gutenberg default and was the least designed surface on the site. Measured at 390px before this change: links 23px tall and 28-76px wide (FAQ was a 28x23 tap target), the list centre-aligned so eight different-length labels zigzagged between x=157 and x=181, a 24x24 close button with its right edge flush at x=390, and no "Book a Free Demo" anywhere inside the open menu, so the primary conversion action was unreachable from the navigation. Everything here is scoped to the drawer at <=781px. The desktop bar is deliberately untouched. --- */ @media(max-width:781px){ /* Full-bleed rows on one left margin. align-items:center is what made eight different-length labels read as a ragged stack; stretch gives every row the same box, so every label starts on a single axis. */ .mt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ align-items:stretch;gap:0;width:100%} .mt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ width:100%} /* 48px rows: WCAG 2.5.5 asks for 44, and the extra 4px absorbs the divider so the label stays optically centred in its row. 17px because a drawer row is a destination, not a 14.5px item in a crowded bar. The divider is rgba white rather than #1e3a52: it renders the same on navy, survives on any ground, and adds no undeclared hex to the palette, which is what open issue 7 is about. */ .mt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ /* border-box because core leaves the row anchor content-box: width:100% plus horizontal padding overflowed the viewport by 4px and pulled every row to x=-2. The 20px inset stops labels sitting on the screen edge, while the tap target and the divider stay full-bleed. */ box-sizing:border-box; display:flex;align-items:center;width:100%;min-height:48px; padding:0 20px;font-size:17px; border-bottom:1px solid rgba(255,255,255,.12)} /* 44x44 with a real inset. The close control previously sat flush to the right screen edge, where it competes with the hand gripping the phone. */ .mt-header .wp-block-navigation__responsive-container-close{ top:16px;right:16px;width:44px;height:44px; display:flex;align-items:center;justify-content:center} .mt-header .wp-block-navigation__responsive-container-close svg{width:24px;height:24px} /* Same treatment for the hamburger, which inherited core's 24px icon box. */ .mt-header .wp-block-navigation__responsive-container-open{ width:44px;height:44px; display:flex;align-items:center;justify-content:center} /* The primary CTA, duplicated into the drawer as a navigation-link and restyled as a button. It has to be a navigation-link because only the navigation block renders inside the overlay: the real button block is a sibling in the header and cannot reach it. */ .mt-header .wp-block-navigation__responsive-container.is-menu-open .mt-nav-cta{ /* a button, not a row: it takes the same 20px margin as the labels rather than bleeding to both screen edges */ width:auto;margin:24px 20px 0} .mt-header .wp-block-navigation__responsive-container.is-menu-open .mt-nav-cta .wp-block-navigation-item__content{ justify-content:center;min-height:52px;border-bottom:0;border-radius:8px; background:var(--mt-sky);color:#fff;font-weight:600} /* The tagline wrapped to two lines and, with the email on a third, pushed the header to 220px of an 844px viewport: a quarter of the screen spent before any content. The email is the useful half and stays. */ .mt-topbar__tag{display:none} } /* The drawer CTA exists only for the drawer. The desktop bar already carries the real button block, and a ninth nav item there would duplicate it. */ @media(min-width:782px){ .mt-header .mt-nav-cta{display:none} } /* Sticky header. At position:static the nav and the CTA left the screen after the first viewport and did not return until the footer, across 6,822px of desktop scroll and 11,104px of mobile. Only the navy bar sticks; the sky topbar scrolls away, so the persistent cost is one 62px row. top follows the admin bar when one is present, so it never hides underneath. */ .mt-header{ position:sticky; top:var(--wp-admin--admin-bar--height,0px); z-index:50} /* --- Hardening: closed account menu, focus rings ---------------------- 1. The account panel stayed in the tab order while its
was closed. Measured on the live header: details.open false, yet the panel reported a 252x299 rect with all five links tabbable, no inert and no aria-hidden, painted behind the hero because the hero wins the paint order. A keyboard user tabbing the header fell into five invisible links, and a screen reader read them out. No stylesheet was overriding content-visibility (0 matching rules across all 57 sheets), so this is not a case of fighting the UA default: it is that nothing ever asserted the closed state. An explicit display:none is the fix, and it does not depend on how a given browser chooses to hide ::details-content. The panel has no transition, so there is nothing to animate away. --- */ .mt-account:not([open]) .mt-account__panel{display:none} /* 2. CF7 fields set outline:none on :focus and leaned on a 1px border change plus a 15%-alpha glow. That is fine as a mouse affordance and far too quiet as the only keyboard indicator, so the real ring comes back for :focus-visible while the quiet glow stays for pointer focus. */ .wpcf7 input:focus-visible, .wpcf7 textarea:focus-visible{outline:3px solid var(--mt-sky);outline-offset:2px} /* 3. --mt-sky (#0369A1) measures ~2.5:1 against the navy header, under the 3:1 WCAG 1.4.11 asks of a focus indicator. #38BDF8 measures ~8.7:1 on the same ground and is already what the logo and the account toggle use in this header, so this makes the header consistent rather than introducing a new value. Scoped to the header only: on white grounds #0369A1 is correct and #38BDF8 would be too light. */ .mt-header a:focus-visible, .mt-header button:focus-visible, .mt-header summary:focus-visible, .mt-header .wp-block-navigation-item__content:focus-visible{outline-color:#38BDF8} /* --- Section seams ---------------------------------------------------- The root flow layout puts a 24px block gap between every child of .wp-site-blocks, so
and