/* Website Maintenance.co, site chrome. md-v3.css is the design system and owns everything inside
. This file owns what Elementor used to render: the header, the footer, and the blog, page, search and 404 templates the builder never had real designs for. The header and footer numbers are not invented. They were measured on the live Elementor build at 1440px on 2026-08-20 and are reproduced here: pill 1296x97, radius 100, padding 16/16/16/35, border 1px #FFFFFF12 logo 166x53 at x=108 nav Onest 16/400 #0A1642, 12px between items CTA 294x63, #0964FC, 18/600, radius 100 footer band with footer-bg-1.png at cover, inner cap 1320, row 1296, brand column 421, rule 1px rgba(217,217,217,.4) ------------------------------------------------------------------------- */ :root { --wm-blue:#0964FC; --wm-blue-dk:#003691; --wm-ink:#0A1642; --wm-navy:#001b48; --wm-line:#e3e9f4; --wm-soft:#F7F9FC; --wm-body:#41506b; --wm-wrap:1320px; --wm-pad:12px; } /* Anchor scrolling. md-v3.css puts scroll-behavior on .mdv3, but that element does not scroll: the scroll container is , so every in page link landed with a jump. Declared here, and turned off for anyone who asked their system for less motion. */ html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } } body { margin:0; background:#fff; color:var(--wm-ink); font-family:"Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img { max-width:100%; height:auto; } .wm-skip { position:absolute; left:-9999px; top:0; z-index:999; padding:12px 18px; background:var(--wm-blue); color:#fff; border-radius:0 0 10px 0; font-weight:600; } .wm-skip:focus { left:0; } .wm-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:17px 28px; border-radius:100px; background:var(--wm-blue); color:#fff; font-size:18px; font-weight:600; line-height:1.6; text-decoration:none; transition:background .15s ease, transform .15s ease; } .wm-btn:hover { background:#0a58db; transform:translateY(-1px); } /* The button glyph is the same 18x18 SVG the Elementor buttons used, so the buttons keep their measured width (294x63 in the header). */ .wm-arrow { flex:none; width:18px; height:18px; display:inline-block; } .wm-arrow svg { width:18px; height:18px; display:block; fill:currentColor; } /* ---------- header ---------- */ .wm-hdr { position:relative; z-index:99; } .wm-hdr--overlay { position:absolute; top:95px; left:0; right:0; } .wm-hdr--solid { background:var(--wm-navy); padding:22px 0; } .wm-hdr__pill { /* 1296 border-box, which is the 1320 container less its 12px gutters. */ max-width:1296px; margin:0 auto; box-sizing:border-box; display:flex; align-items:center; padding:16px 16px 16px 35px; border-radius:100px; background:#fff; border:1px solid rgba(255,255,255,.07); } /* The pill stays white on inner pages too. A translucent pill on the navy band put the dark blue logo on a dark blue background, which was unreadable, and the site only has the one logo file in that color. */ .wm-hdr__logo { display:block; flex:none; line-height:0; } .wm-hdr__logo img { width:166px; height:53px; object-fit:contain; } /* The Elementor menu was a STRETCHED nav: it spanned a fixed band and spread its items across it, which is why the gaps between them are uneven. Measured at 1440 the band runs 359 to 953, i.e. 85px after the logo and 104px before the button, with the items justified inside it. Reproduced rather than approximated, because centering the menu instead moves every item. */ .wm-nav { flex:1 1 auto; display:flex; margin-left:85px; margin-right:104px; } .wm-nav__list { display:flex; align-items:center; justify-content:space-between; width:100%; list-style:none; margin:0; padding:0; } .wm-nav__list li { margin:0; } .wm-nav__list a { /* The 12px right margin is Elementor's menu item spacing. It matters even under space-between, because it comes out of the slack the band distributes. */ display:inline-block; margin-right:12px; padding:0; font-size:16px; font-weight:400; line-height:1.6; color:var(--wm-ink); text-decoration:none; position:relative; } .wm-nav__list a:hover { color:var(--wm-blue); } .wm-nav__list a::after { content:""; position:absolute; left:0; right:12px; bottom:-4px; height:2px; background:var(--wm-blue); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; } .wm-nav__list a:hover::after, .wm-nav__list .current-menu-item > a::after { transform:scaleX(1); } .wm-hdr__cta { flex:none; } .wm-hdr__cta .wm-btn { white-space:nowrap; } .wm-burger { display:none; flex:none; width:44px; height:44px; margin-left:auto; background:none; border:0; cursor:pointer; padding:10px; border-radius:10px; } .wm-burger span { display:block; height:2px; margin:5px 0; background:var(--wm-ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } .wm-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); } .wm-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; } .wm-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); } @media (max-width:1024px) { .wm-hdr--overlay { top:24px; } .wm-hdr__pill { padding:12px 12px 12px 20px; margin:0 16px; max-width:none; } .wm-nav { margin:0; } .wm-nav__list { justify-content:flex-start; } .wm-nav__list a { margin-right:0; } .wm-hdr__logo img { width:132px; height:42px; } .wm-hdr__cta { display:none; } /* hidden on tablet and phone, as it was */ .wm-burger { display:block; } .wm-nav { position:absolute; left:16px; right:16px; top:calc(100% + 10px); display:none; background:#fff; border-radius:20px; padding:14px 20px; box-shadow:0 18px 40px rgba(11,18,32,.18); } .wm-nav.is-open { display:block; } .wm-nav__list { flex-direction:column; align-items:stretch; } .wm-nav__list a { display:block; margin:0; padding:12px 0; border-bottom:1px solid var(--wm-line); } .wm-nav__list li:last-child a { border-bottom:0; } .wm-nav__list a::after { display:none; } } /* ---------- footer ---------- */ .wm-ftr { background:var(--wm-navy) center/cover no-repeat; color:#fff; padding:80px 0 0; } .wm-ftr__in { max-width:var(--wm-wrap); margin:0 auto; padding:0 var(--wm-pad); box-sizing:border-box; } .wm-ftr__row { display:flex; gap:20px; justify-content:space-between; padding-bottom:60px; } .wm-ftr__brand { width:421px; max-width:100%; display:flex; flex-direction:column; gap:28px; align-items:flex-start; } .wm-ftr__logo { line-height:0; } .wm-ftr__logo img { width:347px; height:111px; object-fit:contain; } .wm-ftr__tag { margin:0; font-size:20px; line-height:1.4; color:#fff; } /* Measured: the right hand block runs 877 to 1368 at 1440, with the contact column starting at 1084. Equal columns made "Quick links", "Work Process" and "Why Choose Us" wrap onto two lines, which the Elementor footer never did. */ .wm-ftr__cols { display:flex; gap:0; flex:0 0 491px; } .wm-ftr__links { flex:0 0 207px; } .wm-ftr__contact { flex:0 0 284px; } .wm-ftr__h { margin:0 0 22px; font-size:20px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; } .wm-ftr__list { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .wm-ftr__list a { font-size:18px; font-weight:500; color:#EDE7DE; text-decoration:none; } .wm-ftr__list a:hover { color:#fff; } .wm-ftr__cl { list-style:none; margin:0; padding:0; display:grid; gap:16px; } .wm-ftr__cl li { display:flex; gap:14px; align-items:flex-start; font-size:18px; font-weight:500; color:#fff; } .wm-ftr__cl a { color:#fff; text-decoration:none; } .wm-ftr__cl a:hover { text-decoration:underline; } .wm-ftr__ico { flex:none; width:24px; height:24px; color:var(--wm-blue); } .wm-ftr__ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .wm-ftr__ico svg path[d^="M6.6"] { fill:currentColor; stroke:none; } .wm-ftr__bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 0; border-top:1px solid rgba(217,217,217,.4); } .wm-ftr__bottom p { margin:0; font-size:16px; color:#EDE7DE; } .wm-ftr__terms a { color:#EDE7DE; text-decoration:underline; } .wm-ftr__copy { text-align:center; } .wm-ftr__social { display:flex; gap:10px; } .wm-soc { width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--wm-blue); color:#fff; transition:background .15s ease; } .wm-soc:hover { background:#fff; color:var(--wm-blue); } .wm-soc svg { width:18px; height:18px; fill:currentColor; } /* The P mark is tall and narrow, so matching it on height rather than on box size keeps its optical weight with the square glyphs beside it. */ .wm-soc__pin { width:auto !important; height:17px !important; } @media (max-width:1024px) { .wm-ftr { padding-top:56px; } .wm-ftr__row { flex-direction:column; gap:44px; } .wm-ftr__cols { gap:40px; flex-wrap:wrap; flex:1 1 auto; } .wm-ftr__links, .wm-ftr__contact { flex:1 1 240px; } .wm-ftr__brand { width:100%; } .wm-ftr__logo img { width:260px; height:83px; } .wm-ftr__bottom { flex-direction:column; text-align:center; } } /* ---------- blog, pages, search, 404 ---------- The Elementor build had no designed archive or single template: /blog/ returned the 404 layout. These are plain, readable and use the same palette and type scale. */ .wm-page { padding:150px 0 90px; } .wm-has-solid-header .wm-page { padding-top:70px; } .wm-wrap { max-width:1160px; margin:0 auto; padding:0 24px; box-sizing:border-box; } .wm-narrow { max-width:780px; } .wm-hero { background:var(--wm-navy); color:#fff; padding:170px 0 70px; margin-bottom:64px; } .wm-has-solid-header .wm-hero { padding-top:80px; } .wm-hero h1 { margin:0 0 12px; font-size:clamp(30px,4vw,46px); font-weight:800; letter-spacing:-.02em; line-height:1.15; } .wm-hero p { margin:0; color:#cfdff8; font-size:18px; } .wm-post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:28px; } .wm-card { border:1px solid var(--wm-line); border-radius:16px; overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:box-shadow .18s ease, transform .18s ease; } .wm-card:hover { box-shadow:0 12px 32px rgba(11,18,32,.10); transform:translateY(-2px); } .wm-card__img { aspect-ratio:16/9; overflow:hidden; background:var(--wm-soft); } .wm-card__img img { width:100%; height:100%; object-fit:cover; display:block; } .wm-card__b { padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; } .wm-card__meta { color:#7b8aa6; } .wm-card h2 { margin:0; font-size:21px; font-weight:700; line-height:1.3; letter-spacing:-.01em; } .wm-card h2 a { color:var(--wm-ink); text-decoration:none; } .wm-card h2 a:hover { color:var(--wm-blue); } .wm-card p { margin:0; color:var(--wm-body); font-size:15.5px; } .wm-card__more { margin-top:auto; font-weight:600; color:var(--wm-blue); text-decoration:none; } .wm-entry { font-size:17.5px; color:var(--wm-body); } .wm-entry h2 { font-size:28px; margin:44px 0 14px; color:var(--wm-ink); font-weight:800; letter-spacing:-.02em; } .wm-entry h3 { font-size:22px; margin:32px 0 12px; color:var(--wm-ink); font-weight:700; } .wm-entry p { margin:0 0 18px; } .wm-entry ul, .wm-entry ol { margin:0 0 18px; padding-left:22px; } .wm-entry li { margin:0 0 8px; } .wm-entry a { color:var(--wm-blue); } .wm-entry img { border-radius:14px; } .wm-entry blockquote { margin:26px 0; padding:18px 24px; border-left:4px solid var(--wm-blue); background:var(--wm-soft); border-radius:0 12px 12px 0; } .wm-entry code { background:var(--wm-soft); padding:2px 6px; border-radius:6px; font-size:.92em; } .wm-entry pre { background:#0b1220; color:#e6eefb; padding:18px; border-radius:12px; overflow:auto; } .wm-meta { color:#7b8aa6; font-size:14.5px; margin:0 0 26px; } .wm-thumb { margin:0 0 34px; border-radius:18px; overflow:hidden; } .wm-pager { display:flex; gap:10px; justify-content:center; margin:56px 0 0; flex-wrap:wrap; } .wm-pager .page-numbers { min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:1px solid var(--wm-line); border-radius:10px; color:var(--wm-ink); text-decoration:none; font-weight:600; } .wm-pager .page-numbers.current, .wm-pager .page-numbers:hover { background:var(--wm-blue); border-color:var(--wm-blue); color:#fff; } .wm-searchform { display:flex; gap:10px; max-width:520px; } .wm-searchform input[type=search] { flex:1; padding:14px 16px; border:1px solid var(--wm-line); border-radius:12px; font:inherit; color:var(--wm-ink); background:#fff; } .wm-searchform button { padding:14px 22px; border:0; border-radius:12px; background:var(--wm-blue); color:#fff; font:inherit; font-weight:600; cursor:pointer; } .wm-404 { text-align:center; } .wm-404 h1 { font-size:clamp(34px,6vw,64px); font-weight:800; margin:0 0 10px; letter-spacing:-.02em; } .wm-404 p { font-size:19px; color:var(--wm-body); margin:0 0 28px; } .wm-comments { margin-top:56px; padding-top:36px; border-top:1px solid var(--wm-line); } .wm-comments .comment-list { list-style:none; margin:0 0 32px; padding:0; } .wm-comments .comment-list li { margin:0 0 22px; } /* ---------- the five section pages ---------- Added 2026-08-22 with template-benefits.php and the other four. The section itself is md-v3.css's, unchanged, so all this owns is what sits around it: the navy band with the page's own H1, and the close that offers the audit and links to the other four sections so none of these pages is a dead end. */ .wm-hero--flush { margin-bottom:0; } .wm-crumbs { margin:0 0 14px; font-size:14px; color:#9fc3ff; letter-spacing:.01em; } .wm-crumbs a { color:#9fc3ff; text-decoration:none; } .wm-crumbs a:hover { color:#fff; text-decoration:underline; } .wm-crumbs span { margin:0 8px; opacity:.6; } .wm-secpage .wm-hero p { max-width:70ch; } .mdv3 .wm-secpage__cta { padding:76px 0 88px; background:#fff; } .wm-secpage__cta .wm-wrap { max-width:1160px; } .wm-secpage__offer { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:34px; align-items:center; padding:44px; border-radius:24px; background:var(--wm-navy); color:#fff; box-shadow:0 22px 60px rgba(0,27,72,.18); } .mdv3 .wm-secpage__offer .eyebrow { color:#9fc3ff; margin-bottom:12px; } .mdv3 .wm-secpage__offer h2 { color:#fff; margin:0 0 14px; } .wm-secpage__offer p { margin:0; color:#cfdff8; font-size:17px; line-height:1.6; } .wm-secpage__offer-act { display:grid; gap:14px; justify-items:start; } .wm-secpage__note { font-size:14.5px; color:#9fb6dd; } .wm-secpage__more { margin-top:56px; } .wm-secpage__more-h { font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0 0 20px; color:var(--wm-ink); } .wm-secpage__more ul { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); } .wm-secpage__more a { display:block; height:100%; padding:22px 24px; border:1px solid var(--wm-line); border-radius:16px; background:#fff; color:var(--wm-ink); text-decoration:none; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .wm-secpage__more a:hover { border-color:#c9dcff; box-shadow:0 14px 34px rgba(11,18,32,.10); transform:translateY(-2px); } .wm-secpage__more b { display:block; font-size:17px; font-weight:800; margin-bottom:8px; } .wm-secpage__more span { display:block; font-size:15px; color:var(--wm-body); line-height:1.5; } @media (max-width:900px) { .wm-secpage__offer { grid-template-columns:1fr; padding:32px; gap:24px; } .mdv3 .wm-secpage__cta { padding:56px 0 64px; } } /* The footer contact column carries two offices from 2026-08-22, each a label over its address, so the line has to be allowed to wrap. */ .wm-ftr__addr { display:block; } .wm-ftr__addr b { display:block; font-weight:700; } /* ============================================================ THE BLOG, 2026-08-22. Built to match https://allforfishing.com/blog/rig-a-fishing-rod/, which Khalid named as the reference, measured at 1440px: 1320 wrap, a wide column beside a 300px sticky sidebar, 24px cards with a 1px border and a 20px picture radius, a meta row of category / read time / date divided by hairlines, a gray author card at 24px radius, and a "Read More" row with an outlined SEE ALL pill. Its typeface and palette are NOT copied: this site has its own. ============================================================ */ /* ---------- the tinted band the blog, archives and search open with ---------- */ .wm-band { background:var(--wm-soft); padding:72px 0 76px; border-bottom:1px solid var(--wm-line); } .wm-band h1 { margin:0 0 14px; font-size:clamp(32px,4.2vw,56px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--wm-ink); } .wm-band p { margin:0; font-size:18px; line-height:1.6; color:var(--wm-body); } .wm-band--center { text-align:center; } .wm-band--center h1, .wm-band--center p { max-width:70ch; margin-left:auto; margin-right:auto; } .wm-band__form { margin-top:26px; display:flex; justify-content:center; } .wm-band__form .wm-searchform { width:min(520px,100%); } .wm-blog__body { padding:64px 0 96px; } .wm-bempty { font-size:18px; color:var(--wm-body); } /* ---------- the card grid ---------- */ .wm-bgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .wm-bcard { display:flex; flex-direction:column; gap:16px; background:#fff; border:1px solid var(--wm-line); border-radius:24px; padding:24px; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .wm-bcard:hover { border-color:#c9dcff; box-shadow:0 16px 40px rgba(11,18,32,.10); transform:translateY(-2px); } .wm-bcard__img { display:block; border-radius:20px; overflow:hidden; background:var(--wm-soft); aspect-ratio:16 / 10; } .wm-bcard__img img { width:100%; height:100%; object-fit:cover; display:block; } /* No post on this site has a featured image yet, so the tile carries the category instead of leaving a hole in the grid. */ .wm-bcard__ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:18px; text-align:center; background:linear-gradient(135deg,var(--wm-navy) 0%,#0a3f8f 55%,var(--wm-blue) 100%); color:#dce9ff; font-size:13px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; } .wm-bcard__t { margin:0; font-size:21px; font-weight:800; line-height:1.28; letter-spacing:-.01em; } .wm-bcard__t a { color:var(--wm-ink); text-decoration:none; } .wm-bcard__t a:hover { color:var(--wm-blue); } .wm-bcard__x { margin:0; font-size:15.5px; line-height:1.55; color:var(--wm-body); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .wm-bcard__x:last-child { margin-bottom:2px; } /* ---------- the meta row: category | read time | date ---------- */ /* The divider is an ::after on every item but the last, not a border-left on every item but the first. It looks the same on one line, and when the row wraps, which it does in a card as soon as the category name is long, the second line starts with a word instead of a stray hairline. */ .wm-bmeta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; margin:0; font-size:14.5px; line-height:1.25; } .wm-bmeta > * { display:inline-flex; align-items:center; } .wm-bmeta > *:not(:last-child)::after { content:""; display:inline-block; flex:none; width:1px; height:14px; margin:0 12px; background:var(--wm-line); } .wm-bmeta__cat { color:var(--wm-blue); font-weight:600; text-decoration:none; } .wm-bmeta__cat:hover { text-decoration:underline; } .wm-bmeta__i { gap:7px; color:var(--wm-body); white-space:nowrap; } .wm-bmeta__ico { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.8; } .wm-bmeta--lg { font-size:16px; } .wm-bmeta--lg > *:not(:last-child)::after { height:16px; } /* ---------- a single post ---------- */ /* 36px under a full-width hero was too tight, and with only one published post the Read More row does not render at all, which left the author card sitting flush on the footer: measured gap 0px. --tail is set by single.php in exactly that case. */ .wm-post { padding:52px 0 0; } .wm-post--tail { padding-bottom:92px; } /* The reference page runs its body text the full 988px of its column, which is about 110 characters a line and hard to read, and a max-width on the paragraphs alone left a 200px hole beside them. The column itself is narrower instead: same shape as the reference, 780 beside 300 in a 1320 wrap with the slack in the middle, so the picture, the H1 and the text all share one measure and the line lands around 90 characters. */ .wm-post__grid { max-width:1320px; display:grid; grid-template-columns:minmax(0,780px) 300px; justify-content:space-between; gap:44px; align-items:start; } /* A grid item is min-width:auto, so anything wide inside the article, a table with a minimum width above all, stretches the column and takes the whole page sideways. Measured at 390px before this line: 86px of horizontal page scroll. */ .wm-post__main { min-width:0; } .wm-crumbs--ink { color:var(--wm-body); font-size:17px; } .wm-crumbs--ink a { color:rgba(51,51,51,.7); text-decoration:none; } .wm-crumbs--ink a:hover { color:var(--wm-ink); text-decoration:underline; } .wm-crumbs--ink em { color:var(--wm-blue); font-style:normal; } .wm-post__feat { margin:20px 0 30px; border-radius:20px; overflow:hidden; background:var(--wm-soft); } .wm-post__feat img { width:100%; height:100%; aspect-ratio:1024 / 550; object-fit:cover; display:block; } .wm-post__head { margin:0 0 30px; } .wm-post__head h1 { margin:0 0 16px; font-size:clamp(32px,4vw,56px); font-weight:800; line-height:1.12; letter-spacing:-.025em; color:var(--wm-ink); } /* ---------- the hero of a single post, 2026-08-25 ---------- The cover photo carries no type of its own any more; the title sits on top of it instead. .wm-post__feat and .wm-post__head above are what this replaced. They are left in place because nothing costs anything to keep and putting the old layout back is then one edit in single.php rather than a rewrite. Stacking, and it matters: the photo is a positioned child with z-index auto, so it paints ABOVE .wm-phero's own navy background. Giving it a negative z-index would drop it behind that background and it would vanish. */ .wm-phero { position:relative; overflow:hidden; background:var(--wm-navy); } .wm-phero__img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:62% 50%; } /* Two scrims in one layer. Vertical: opaque #001b48 at the very top edge, so the hero meets the flat navy header on exactly the same colour. That join is the fault Khalid caught on the section pages ("hero background color not blend, check") and a photo makes it worse, not better, because the seam would be a colour change AND a texture change. Horizontal: keeps the left side dark enough for white text whatever the photograph is doing over there. */ .wm-phero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg, rgba(0,27,72,.92) 0%, rgba(0,27,72,.70) 38%, rgba(0,20,58,.30) 74%, rgba(0,20,58,.20) 100%), linear-gradient(180deg, #001b48 0%, rgba(0,27,72,.46) 18%, rgba(0,20,58,.12) 56%, rgba(0,20,58,.46) 100%); } .wm-phero__inner { position:relative; z-index:2; max-width:1320px; min-height:352px; display:flex; flex-direction:column; justify-content:center; padding-top:56px; padding-bottom:60px; } .wm-crumbs--over { margin:0 0 18px; font-size:15px; color:#a8c6f4; } .wm-crumbs--over a { color:#a8c6f4; text-decoration:none; } .wm-crumbs--over a:hover { color:#fff; text-decoration:underline; } .wm-crumbs--over em { color:#fff; font-style:normal; } .wm-phero__h1 { margin:0 0 20px; max-width:20ch; color:#fff; text-wrap:balance; font-size:clamp(31px,4.2vw,54px); font-weight:800; line-height:1.1; letter-spacing:-.025em; } .wm-bmeta--over .wm-bmeta__cat { color:#8fbaff; } .wm-bmeta--over .wm-bmeta__i { color:#cfdff8; } .wm-bmeta--over > *:not(:last-child)::after { background:rgba(255,255,255,.3); } /* No featured image: the same navy and blue glow the section pages open with, so a post without a picture still looks made rather than broken. */ .wm-phero--plain { background-color:#001b48; background-image: radial-gradient(1100px 460px at 76% -70px, rgba(9,100,252,.55), transparent 62%), linear-gradient(180deg, #001b48 0%, #01143a 100%); } .wm-phero--plain::after { content:none; } @media (max-width:700px) { .wm-phero__inner { min-height:236px; padding-top:34px; padding-bottom:38px; } /* The laptop is right of centre; on a phone the crop keeps it in frame. */ .wm-phero__img { object-position:70% 50%; } .wm-phero__h1 { max-width:none; margin-bottom:16px; } .wm-crumbs--over { margin-bottom:14px; font-size:14px; } /* A phone has no empty left third to put the title in: the headline crosses the lit laptop screen, which is the brightest thing in the frame. So the scrim goes flat and even rather than directional, dark enough that white type holds over the screen and the desk both. */ .wm-phero::after { background: linear-gradient(180deg, #001b48 0%, rgba(0,27,72,.72) 24%, rgba(0,20,58,.66) 100%); } } /* Body copy. Scoped to the post so the plain page template keeps its own scale. Paragraph width is capped at 78 characters: the reference page runs its text the full 988px, which is about 110 characters a line and hard to read. Headings, images and anything wide still span the whole column. */ .wm-post .wm-entry { font-size:18px; line-height:1.65; color:var(--wm-body); } .wm-post .wm-entry h2 { font-size:clamp(28px,3vw,40px); font-weight:800; line-height:1.18; letter-spacing:-.02em; color:var(--wm-ink); margin:46px 0 16px; scroll-margin-top:26px; } .wm-post .wm-entry h3 { font-size:23px; font-weight:700; line-height:1.28; color:var(--wm-ink); margin:34px 0 10px; scroll-margin-top:26px; } .wm-post .wm-entry h4 { font-size:19px; font-weight:700; color:var(--wm-ink); margin:26px 0 8px; } .wm-post .wm-entry p { margin:0 0 18px; } .wm-post .wm-entry li { margin:0 0 10px; } .wm-post .wm-entry img { border-radius:16px; } .wm-post .wm-entry a { color:var(--wm-blue); text-decoration:underline; } .wm-post .wm-entry > *:first-child { margin-top:0; } /* ---------- a picture inside the article, 2026-08-25 ---------- Khalid: "why you did not used image on blog content?". Placed by wmco_insert_figures() after the first paragraph of a section, so it breaks up the column at a point where the reader already knows what the section is about. */ .wm-figure { margin:34px 0; } .wm-figure .wm-figure__img, .wm-figure img { display:block; width:100%; height:auto; border-radius:16px; background:var(--wm-soft); } .wm-figure figcaption { margin:12px 2px 0; font-size:15px; line-height:1.5; color:#697b99; } /* ---------- the FAQ accordion, 2026-08-25, restyled the same day ---------- First pass was hairline rules and a plain plus. Khalid: "faq accrodiun not smooth we need to work more grafhical work, user frindly, goot read". So: SMOOTH is the JavaScript in assets/js/site.js, not a CSS transition. A
element cannot transition its own height, and the trick that can, ::details-content with interpolate-size, is Chromium only today. The script animates the panel height and this file only styles the states it moves between. With the script off, every question still opens: it just snaps, which is what a
does. GRAPHICAL is a card per question instead of a list of rules, a circular control that fills with brand blue and turns from a plus into a minus, and a blue rule that grows down the left edge of the open card so a reader scanning nine questions can see where one answer begins and ends. GOOD READ is the measure: the answer is capped at 64 characters a line with a taller line height than the body copy, because an answer is read after a scan and wants to be easy to land in, not dense. */ .wm-faqs { margin:28px 0 8px; display:grid; gap:14px; } .wm-faq { position:relative; overflow:hidden; background:#fff; border:1px solid var(--wm-line); border-radius:18px; transition:border-color .3s ease, box-shadow .3s ease; } .wm-faq:hover { border-color:#c6d7f5; box-shadow:0 10px 26px -20px rgba(10,22,66,.4); } .wm-faq[open] { border-color:rgba(9,100,252,.34); box-shadow:0 16px 40px -26px rgba(9,100,252,.55); } /* The left rule. Grows from the top, so it reads as the card opening rather than as a colour appearing. */ .wm-faq::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--wm-blue); transform:scaleY(0); transform-origin:top; transition:transform .38s cubic-bezier(.4,0,.2,1); } .wm-faq[open]::before { transform:scaleY(1); } .wm-faq > summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 22px; cursor:pointer; list-style:none; font-size:18.5px; font-weight:700; line-height:1.4; color:var(--wm-ink); transition:color .22s ease; } .wm-faq > summary::-webkit-details-marker { display:none; } .wm-faq > summary:hover, .wm-faq[open] > summary { color:var(--wm-blue); } /* Inset, because the card clips at 18px and an outset ring would be cut off. */ .wm-faq > summary:focus-visible { outline:2px solid var(--wm-blue); outline-offset:-4px; border-radius:18px; } /* The control. A plus that rotates a half turn while one of its bars swings flat, so the movement reads as the same object changing rather than two icons swapping. */ .wm-faq__ico { position:relative; flex:none; width:34px; height:34px; border-radius:50%; background:rgba(9,100,252,.1); transition:background .3s ease, transform .45s cubic-bezier(.4,0,.2,1); } .wm-faq__ico::before, .wm-faq__ico::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; border-radius:2px; background:var(--wm-blue); transition:transform .45s cubic-bezier(.4,0,.2,1), background .3s ease; } .wm-faq__ico::after { transform:rotate(90deg); } .wm-faq[open] .wm-faq__ico { background:var(--wm-blue); transform:rotate(180deg); } .wm-faq[open] .wm-faq__ico::before, .wm-faq[open] .wm-faq__ico::after { background:#fff; } .wm-faq[open] .wm-faq__ico::after { transform:rotate(0deg); } .wm-faq__body { padding:0 22px 4px; } .wm-post .wm-entry .wm-faq__body p { margin:0 0 18px; max-width:64ch; font-size:17.5px; line-height:1.7; color:var(--wm-body); } .wm-post .wm-entry .wm-faq__body > *:last-child { margin-bottom:18px; } /* The field-driven block, for an article with no FAQ section of its own. */ .wm-postfaq { margin-top:46px; } .wm-post .wm-entry .wm-postfaq > h2 { margin-top:0; } @media (max-width:560px) { .wm-faqs { gap:12px; } .wm-faq > summary { font-size:17px; padding:16px 17px; gap:13px; } .wm-faq__ico { width:30px; height:30px; } .wm-faq__body { padding:0 17px 2px; } .wm-post .wm-entry .wm-faq__body p { font-size:16.5px; } .wm-figure { margin:26px 0; } } /* ---------- tables inside an article ---------- There were none until the first pillar guide, whose maintenance schedule is a three column table and reads far worse as a list. The table sits in its own scrolling box so a narrow phone scrolls the table sideways and never the page. The wrapper is added automatically by wmco_wrap_tables() in inc/blog.php, because the note that used to sit here said to add it by hand in the post content and nobody did: at 500px the schedule table pushed the whole page 84px sideways. A table already wrapped by hand is left alone. */ .wm-entry .wm-tablewrap { overflow-x:auto; margin:0 0 26px; border:1px solid var(--wm-line); border-radius:16px; -webkit-overflow-scrolling:touch; /* Scrolling shadows. A table wider than a phone gives no sign that it moves, so the edge that can still be scrolled carries a soft shadow and the edge that cannot does not. Pure CSS: the white pair scrolls with the content and covers the shadow pair when there is nothing more to see. */ background: linear-gradient(to right, #fff 34%, rgba(255,255,255,0)) left center, linear-gradient(to left, #fff 34%, rgba(255,255,255,0)) right center, radial-gradient(farthest-side at 0 50%, rgba(10,22,66,.16), rgba(10,22,66,0)) left center, radial-gradient(farthest-side at 100% 50%, rgba(10,22,66,.16), rgba(10,22,66,0)) right center; background-repeat:no-repeat; background-size:34px 100%, 34px 100%, 15px 100%, 15px 100%; background-attachment:local, local, scroll, scroll; } /* It is focusable now, so it has to show focus. */ .wm-entry .wm-tablewrap:focus-visible { outline:2px solid var(--wm-blue); outline-offset:2px; } .wm-entry table { width:100%; min-width:560px; border-collapse:collapse; font-size:16px; line-height:1.5; } .wm-entry thead th { text-align:left; font-weight:800; color:var(--wm-ink); background:var(--wm-soft); padding:13px 16px; border-bottom:1px solid var(--wm-line); white-space:nowrap; } .wm-entry tbody td { padding:13px 16px; border-bottom:1px solid var(--wm-line); vertical-align:top; } .wm-entry tbody tr:last-child td { border-bottom:0; } .wm-entry tbody td:first-child { font-weight:600; color:var(--wm-ink); } /* ---------- the author card ---------- */ .wm-author { margin:44px 0 0; padding:24px; background:var(--wm-soft); border-radius:24px; } .wm-author__top { display:flex; align-items:center; gap:20px; } .wm-author__pic { width:92px; height:92px; border-radius:50%; object-fit:cover; flex:none; background:#fff; } .wm-author__name { margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--wm-ink); } .wm-author__role { margin:2px 0 0; font-size:16px; color:var(--wm-body); } .wm-author__bio { margin:18px 0 0; font-size:17px; line-height:1.6; color:var(--wm-body); } /* ---------- the sticky sidebar ---------- */ /* The grid uses align-items:start so the main column does not stretch, and that made the sidebar cell exactly as tall as its own cards, which left a sticky child with nowhere to travel: measured at -1820px after a scroll, i.e. not sticking at all. The cell alone is stretched back to the row height. */ .wm-post__side { align-self:stretch; } .wm-post__stick { position:sticky; top:24px; display:grid; gap:16px; } .wm-side-card { background:var(--wm-soft); border:1px solid var(--wm-line); border-radius:16px; padding:20px; } .wm-side-card__h { margin:0 0 12px; font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--wm-ink); } .wm-toc__list { list-style:none; margin:0; padding:0; } .wm-toc__li { border-bottom:1px solid var(--wm-line); } .wm-toc__li:last-child { border-bottom:0; } .wm-toc__li.is-hidden { display:none; } .wm-toc.is-open .wm-toc__li.is-hidden { display:block; } .wm-toc__li a { display:block; padding:11px 0; font-size:15.5px; line-height:1.4; color:var(--wm-body); text-decoration:none; } .wm-toc__li a:hover { color:var(--wm-blue); } .wm-toc__li.is-active a { color:var(--wm-blue); font-weight:600; } .wm-toc__more { width:100%; margin-top:6px; padding:10px 0 2px; border:0; background:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15px; font-weight:600; color:var(--wm-blue); } .wm-toc__more svg { width:18px; height:18px; transition:transform .35s ease; } .wm-toc.is-open .wm-toc__more svg { transform:rotate(180deg); } .wm-share__row { display:flex; align-items:center; gap:10px; } .wm-share__b { position:relative; width:40px; height:40px; flex:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#e8f0ff; color:var(--wm-blue); transition:background .15s ease, transform .15s ease; } .wm-share__b:hover { background:var(--wm-blue); color:#fff; transform:translateY(-1px); } .wm-share__b svg { width:19px; height:19px; fill:currentColor; } .wm-share__b--copy svg { fill:none; } .wm-share__said { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:4px 9px; border-radius:7px; background:var(--wm-ink); color:#fff; font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; } .wm-share__b.is-said .wm-share__said { opacity:1; } /* ---------- Read More ---------- */ .wm-related { padding:76px 0 96px; } /* The article above runs in a 1320 wrap, so this row has to as well or its left edge sits 80px in from the text it follows. */ .wm-related > .wm-wrap { max-width:1320px; } .wm-related__head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 28px; } .wm-related__head h2 { margin:0; font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.02em; color:var(--wm-ink); } .wm-seeall { flex:none; display:inline-flex; align-items:center; gap:10px; padding:16px 26px; border:1px solid var(--wm-ink); border-radius:100px; font-size:15px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wm-ink); text-decoration:none; transition:background .15s ease, color .15s ease; } .wm-seeall svg { width:18px; height:18px; } .wm-seeall:hover { background:var(--wm-ink); color:#fff; } @media (max-width:1024px) { .wm-post__grid { grid-template-columns:minmax(0,1fr); gap:34px; } .wm-post__stick { position:static; } /* The reference page hides its table of contents from tablet down, and it is right to: a 300px card of links above the article is in the way, not useful. */ .wm-toc { display:none; } .wm-bgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px) { .wm-bgrid { grid-template-columns:1fr; } .wm-band { padding:52px 0 56px; } .wm-blog__body { padding:44px 0 68px; } .wm-related { padding:56px 0 72px; } .wm-related__head { flex-direction:column; align-items:flex-start; gap:16px; } .wm-author__top { gap:14px; } .wm-author__pic { width:72px; height:72px; } .wm-bmeta { font-size:14px; } .wm-bmeta > *:not(:last-child)::after { margin:0 9px; } } /* ============================================================ USABILITY, 2026-08-22, on Khalid's rule that anything built here has to be user friendly. ============================================================ */ /* Only the skip link had a focus style, so everything else fell back to whatever the browser draws, which on a white pill over navy and on a tinted round button is close to invisible. One ring, on keyboard focus only, so a mouse click never shows it. */ 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(--wm-blue); outline-offset:2px; border-radius:4px; } .wm-hdr a:focus-visible, .wm-ftr a:focus-visible { outline-color:#7fb0ff; } .wm-share__b:focus-visible, .wm-seeall:focus-visible { outline-offset:3px; } /* The contents list a phone reader gets, in place of the sidebar. */ .wm-toc-m { display:none; } .wm-toc-m > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-radius:14px; background:var(--wm-soft); border:1px solid var(--wm-line); cursor:pointer; list-style:none; font-size:16px; font-weight:700; color:var(--wm-ink); } .wm-toc-m > summary::-webkit-details-marker { display:none; } .wm-toc-m > summary svg { width:18px; height:18px; flex:none; color:var(--wm-blue); transition:transform .3s ease; } .wm-toc-m[open] > summary svg { transform:rotate(180deg); } .wm-toc-m[open] > summary { border-radius:14px 14px 0 0; } .wm-toc-m ul { list-style:none; margin:0; padding:4px 18px 10px; border:1px solid var(--wm-line); border-top:0; border-radius:0 0 14px 14px; background:#fff; } .wm-toc-m li { border-bottom:1px solid var(--wm-line); } .wm-toc-m li:last-child { border-bottom:0; } .wm-toc-m a { display:block; padding:12px 0; font-size:16px; line-height:1.4; color:var(--wm-body); text-decoration:none; } .wm-toc-m a:hover { color:var(--wm-blue); } @media (max-width:1024px) { .wm-toc-m { display:block; margin:0 0 30px; } } /* ============================================================ 2026-08-23: THE CLOSING CTA ON THE SECTION PAGES, from the cta-section.html Khalid handed over. White card on a tinted band: offer, chips, two buttons and a phone line on the left, a photograph with two floating panels on the right. Ported rather than pasted. The handed-over file was teal (#0f766e) on #f6f8f7, which is not this brand, so every accent here is the site's own blue and navy and the band is the site's soft grey. Its geometry is kept as it was: 1080px card, 24px radius, 999px chips, 12px buttons, 18px picture radius, the 920px and 560px breakpoints. The old .wm-secpage__offer navy block above is left in place, unused, rather than deleted, so going back is one template edit. ------------------------------------ */ .wm-cta { --wm-cta-accent: var(--wm-blue); --wm-cta-accent-dk: var(--wm-blue-dk); background: linear-gradient(135deg, rgba(9,100,252,.07), transparent 34%), var(--wm-soft); padding: clamp(36px, 7vw, 82px) 0; color: var(--wm-ink); } .wm-cta * { box-sizing: border-box; } .wm-cta__wrap { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.72fr); gap: clamp(22px, 4vw, 44px); align-items: center; padding: clamp(18px, 3.6vw, 36px); border: 1px solid var(--wm-line); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(10,22,66,.10); } .wm-cta__eyebrow { display: inline-flex; width: fit-content; margin: 0 0 18px; padding: 8px 12px; border: 1px solid rgba(9,100,252,.20); border-radius: 999px; background: #eef4ff; color: var(--wm-cta-accent-dk); font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .02em; text-transform: uppercase; } .mdv3 .wm-cta h2 { max-width: 20ch; margin: 0; color: var(--wm-ink); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.02em; } .wm-cta__copy { max-width: 60ch; margin: 18px 0 0; color: var(--wm-body); font-size: clamp(16px,1.6vw,17.5px); line-height: 1.6; } /* The three promises the homepage audit form makes. They were pills until 2026-08-23: the third one orphaned onto its own line, the dot in front of each said nothing, and a pill inside a card is a box inside a box. Three equal columns divided by hairlines cannot orphan, and each line gets the icon its own words ask for. */ .wm-cta__proof { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--wm-line); border-bottom: 1px solid var(--wm-line); } .wm-cta__proof li { display: flex; align-items: flex-start; gap: 10px; padding: 15px 16px; border-left: 1px solid var(--wm-line); color: #233041; font-size: 13.8px; font-weight: 600; line-height: 1.4; } .wm-cta__proof li:first-child { padding-left: 0; border-left: 0; } .wm-cta__proof-i { flex: none; display: block; width: 19px; height: 19px; margin-top: 1px; } .wm-cta__proof-i svg { width: 19px; height: 19px; display: block; fill: none; stroke: var(--wm-cta-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Three columns need about 170px each to hold two lines. Below 1100 the copy column cannot give them that, and at 1024 the first cell was wrapping to three lines, so the strip stacks instead: hairlines turn horizontal and nothing is cramped. */ @media (max-width: 1100px) { .wm-cta__proof { grid-template-columns: 1fr; } .wm-cta__proof li { padding: 13px 0; border-left: 0; border-top: 1px solid var(--wm-line); } .wm-cta__proof li:first-child { border-top: 0; padding-left: 0; } } .wm-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .wm-cta__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 12px; font-size: 16px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; } .wm-cta__button:hover { transform: translateY(-1px); } .wm-cta__button:focus-visible { outline: 3px solid rgba(9,100,252,.35); outline-offset: 3px; } /* THE `a` IN THESE SELECTORS IS LOAD BEARING. `.mdv3 a { color: inherit }` is one class plus one element, so it beats a class-only rule: without it the label on the blue button inherited the card's navy and rendered #0A1642 on #0964FC, which is 3.5:1 and fails AA for 16px bold text. White on that blue is 4.95:1 and passes. */ .mdv3 a.wm-cta__button--primary { background: var(--wm-cta-accent); color: #fff; box-shadow: 0 14px 30px rgba(9,100,252,.24); } .mdv3 a.wm-cta__button--primary:hover, .mdv3 a.wm-cta__button--primary:focus-visible { background: var(--wm-cta-accent-dk); color: #fff; box-shadow: 0 18px 36px rgba(9,100,252,.28); } .mdv3 a.wm-cta__button--secondary { border: 1px solid var(--wm-line); background: #fff; color: var(--wm-ink); } .mdv3 a.wm-cta__button--secondary:hover, .mdv3 a.wm-cta__button--secondary:focus-visible { background: #f4f8ff; color: var(--wm-cta-accent-dk); border-color: #c9dcff; } .wm-cta__fine { margin: 16px 0 0; color: var(--wm-body); font-size: 14px; } .wm-cta__fine a { color: var(--wm-cta-accent-dk); font-weight: 800; text-decoration: none; } .wm-cta__fine a:hover { text-decoration: underline; } .wm-cta__visual { position: relative; min-height: 390px; border-radius: 18px; overflow: hidden; background: #e6edf9; box-shadow: 0 22px 54px rgba(10,22,66,.16); } .wm-cta__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 42%, rgba(0,27,72,.72)), linear-gradient(135deg, rgba(9,100,252,.26), transparent 48%); } .wm-cta__visual img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; } .wm-cta__panel { position: absolute; z-index: 2; margin: 0; display: flex; align-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 14px; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0,0,0,.16); } .wm-cta__panel--top { top: 16px; left: 16px; gap: 10px; padding: 12px 14px; color: var(--wm-ink); font-size: 14px; font-weight: 800; } .wm-cta__status { width: 10px; height: 10px; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 6px rgba(16,185,129,.18); } .wm-cta__panel--bottom { right: 16px; bottom: 16px; width: min(290px, calc(100% - 32px)); flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; } .wm-cta__panel--bottom strong { color: var(--wm-ink); font-size: 30px; line-height: 1; font-weight: 800; } .wm-cta__panel--bottom span { color: var(--wm-body); font-size: 14px; line-height: 1.45; } /* The band already closes the page, so "The rest of it" below it only needs its own top padding, not the old section's 76px plus a margin. */ .wm-secpage__more--first { margin-top: 0; } /* ---- THE CARD ACROSS THE MIDDLE WIDTHS, rebuilt 2026-08-23. Khalid: "CTA not responsive", and the measurement backed him: between 561 and 920 the card stacked and the photograph became 814 by 611, a wall of picture under the buttons, with the card 1106px tall. Two columns now hold down to 761, and once it does stack the picture is a band with an aspect ratio rather than something that grows with the width. ---- */ @media (min-width: 761px) and (max-width: 1100px) { .wm-cta__wrap { grid-template-columns: minmax(0, 1fr) minmax(272px, .58fr); gap: 26px; padding: 24px; } .wm-cta__visual, .wm-cta__visual img { min-height: 300px; } .wm-cta__panel--bottom { right: 12px; bottom: 12px; padding: 14px; width: min(250px, calc(100% - 24px)); } .wm-cta__panel--bottom strong { font-size: 26px; } } @media (max-width: 760px) { .wm-cta__wrap { grid-template-columns: 1fr; padding: 18px; } /* A band, not a wall. Height is set and the width follows the column, which is the way round that fills the card: aspect-ratio with a max-height did cap the wall, but it also shrank the picture to 533px inside a 599px column and left a gap. */ .wm-cta__visual { min-height: 0; height: clamp(220px, 34vw, 300px); } .wm-cta__visual img { min-height: 0; height: 100%; } } @media (max-width: 560px) { .wm-cta__button { width: 100%; } .wm-cta__visual { height: clamp(190px, 52vw, 240px); } /* On a phone the price panel was 272 by 101 over a 304 by 203 picture, so it covered the photograph rather than sitting on it. It becomes a strip along the bottom: same words, one line of price beside its explanation, and the picture stays visible. */ .wm-cta__panel--bottom { left: 10px; right: 10px; bottom: 10px; width: auto; flex-direction: row; align-items: baseline; gap: 9px; padding: 10px 12px; } .wm-cta__panel--bottom strong { font-size: 21px; } .wm-cta__panel--bottom span { font-size: 12.5px; line-height: 1.35; } } @media (max-width: 560px) { .mdv3 .wm-cta h2 { font-size: 28px; } .wm-cta__visual { border-radius: 20px; } } /* ============================================================ 2026-08-23: THE SECTION PAGE HERO. Khalid: "hero section not good". The old one was a flat navy slab: 272px tall, copy in the left 60 percent, the right half empty, a fixed 46px heading and nothing to click. Scoped to .wm-hero--sec so the blog and archive heroes, which share .wm-hero, are untouched. The glow sits where the emptiness was, the weave keeps the flat navy from reading as a printing error, and both are painted with pseudo elements so no image is downloaded for them. ------------------------------------ */ .wm-hero--sec { position: relative; overflow: hidden; padding: clamp(52px, 6vw, 88px) 0 clamp(54px, 6vw, 86px); background: radial-gradient(1100px 460px at 76% -70px, rgba(9,100,252,.55), transparent 62%), linear-gradient(180deg, #001b48 0%, #01143a 100%); } /* THE GLOW HAS TO CROSS THE HEADER OR IT LOOKS LIKE A SEAM, 2026-08-23. Khalid: "hero background color not blend, check". He was right and the cause was measurable: .wm-hdr--solid is a flat #001b48 block 141px tall sitting directly on the hero, and the glow was centred 18 percent ABOVE the hero's own top edge, so its brightest part was clipped dead straight along that join. Two changes fix it. The centre is now -70px instead of -18%, which is a fixed distance rather than one that moves with the hero's height, and the header carries the same ellipse at `calc(100% - 70px)`, which lands on exactly the same absolute point whatever the header's height is. The header keeps #001b48 underneath and the hero's vertical gradient starts on #001b48, so the two meet on the same colour. Scoped by the wm-secpage- body class, so no other page's header changes. */ body[class*="wm-secpage-"] .wm-hdr--solid { background-color: #001b48; background-image: radial-gradient(1100px 460px at 76% calc(100% - 70px), rgba(9,100,252,.55), transparent 62%); } /* A faint diagonal weave, the same idea as the footer's. Decorative only. */ .wm-hero--sec::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(115deg, rgba(255,255,255,.055) 0 1px, transparent 1px 34px), repeating-linear-gradient(65deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px); /* Fades in downward as well as sideways, so the pattern does not begin on a hard line where the header ends. */ -webkit-mask-image: linear-gradient(105deg, #000 12%, transparent 68%), linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(105deg, #000 12%, transparent 68%), linear-gradient(180deg, transparent 0, #000 34%); -webkit-mask-composite: source-in; mask-composite: intersect; } .wm-hero--sec .wm-wrap { position: relative; z-index: 1; } .mdv3 .wm-hero--sec h1 { margin: 0 0 16px; max-width: 19ch; color: #fff; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.025em; } .wm-hero--sec .wm-hero__lede { max-width: 58ch; margin: 0; color: #cfdff8; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; } .wm-hero__act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } @media (max-width: 560px) { .wm-hero--sec { padding: 40px 0 44px; } .mdv3 .wm-hero--sec h1 { font-size: 31px; } .wm-hero__act { gap: 10px; } .wm-hero__act .btn { width: 100%; justify-content: center; } } /* ============================================================ 2026-08-23: NARROW PHONE SWEEP. Khalid: "make sure the page responsive". Measured at 320px, which is the narrowest phone still in use, and two real faults showed up. Both are in the footer, so they were on every page, not only this one. 1. THE PAGE SCROLLED SIDEWAYS. `.wm-ftr__contact` is a flex item with basis 240px, and a flex item will not shrink below its own min-content: the unbroken email address plus its 24px icon measured 324px in a 320px window, so the document was 16px wider than the screen. Fixed by letting the columns take the full width and by allowing the long strings to break. 2. THE FOOTER LINKS WERE 22px TALL. That is half a finger. They now carry vertical padding so every one clears 40px. ------------------------------------------------------------ */ @media (max-width: 560px) { .wm-ftr__cols { gap: 30px; } .wm-ftr__links, .wm-ftr__contact { flex: 1 1 100%; min-width: 0; } .wm-ftr__cl li { font-size: 16px; gap: 12px; } .wm-ftr__cl a, .wm-ftr__addr, .wm-ftr__cl li { overflow-wrap: anywhere; } .wm-ftr__ico, .wm-ftr__ico svg { width: 20px; height: 20px; } .wm-ftr__h { font-size: 18px; margin-bottom: 16px; } .wm-ftr__list { gap: 2px; } .wm-ftr__list a { display: inline-block; padding: 9px 0; font-size: 17px; } /* Every footer control clears 40px on a phone. Measured before this: the phone and email links were 32px, "Terms and conditions" 21px, the social circles 36px. */ .wm-ftr__cl a { display: inline-block; padding: 8px 0; } .wm-ftr__terms a { display: inline-block; padding: 10px 0; } .wm-soc { width: 40px; height: 40px; } .wm-ftr__tag { font-size: 18px; } /* The step label is a 11.5px uppercase chip, which is fine on a desktop and mean on a phone held at arm's length. */ .mdv3 .wm-proc-tag { font-size: 12.5px; } } /* ============================================================ Draft workbench pages, 2026-08-27. Only the lab template adds .wm-lab-page, and that template is only ever on a draft, so none of this can reach a public page. ============================================================ */ .wm-lab-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 14px clamp(18px, 3vw, 32px); background: #fff4d6; border-bottom: 1px solid #f0dca6; color: #6b4e00; font-size: 14px; line-height: 1.5; } .wm-lab-bar strong { font-weight: 800; } .wm-lab-foot { padding: clamp(28px, 4vw, 48px) clamp(18px, 3vw, 32px); background: #f7f9fc; color: #5b6a85; font-size: 14px; text-align: center; } .wm-lab-foot p { margin: 0; } /* The section is the last thing on the homepage and its own gradient runs to the bottom of the page there. On its own it needs an end. */ .wm-lab .final { padding-bottom: clamp(56px, 6vw, 96px); } /* ============================================================ THE FREE AUDIT SECTION, LAB VERSION: two forms behind one obvious switch. 2026-08-27. Khalid: "i want user can change 2 forms, like flip", then the Conran contact page for the idea, then "ux not good". THIRD ATTEMPT. The first two are recorded because both were pretty and neither was usable: 1. A card turning over in 3D. It has to hide one side, so it needs a height measured before anything lays out, and the side facing away keeps its fields in the tab order. 2. Two panels, the shut one narrowed to a 112px spine with its name set vertically and a plus underneath. That is what "ux not good" was about and it was right: rotated type at the far edge of the section, beside a form nobody has finished reading, with nothing about it that says a choice is available. Decoration that happened to be clickable. What a reader needs is to be asked, once, in words, where the decision is made. That is the top of the form card. So: a plain two option switch, both labelled, both always visible, the chosen one filled in. The half of the Conran idea that survives is that both choices stay on screen, the page does not scroll and nothing pops up. What is dropped is their full height panels, which only work because each one is a photograph. ⚠️ Everything is scoped .mdv3, because md-v3.css opens with `.mdv3 *{padding:0}` and `.mdv3 button{padding:0}`, and the field grid needs #audit to beat `.mdv3 #audit .v3-af-card .v3-af-grid`. Both traps cost time today. ============================================================ */ /* Not an even split. The card holds six controls and the argument is a paragraph and three lines, and on an even split the longest placeholder had 24px of clearance. .88/1.12 puts it near ninety. */ .mdv3 .wm-two { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; } /* ---- the argument, which follows the choice ---- NOTHING MOVES WHEN THE CHOICE CHANGES, and that is the whole point of the stack. Khalid: "when i swich tab , i am feeling its jumping section and content, its not smooth". Measured: the plan form is 77px taller than the audit form because of the platform row, so display:none on one and block on the other meant the card, the section and every pixel of the page below it moved 77px on every switch. Both versions now sit in the SAME grid cell. The container is always as tall as the taller of the two, the geometry never changes, and the swap is a cross fade with nothing underneath it shifting. The cost is that the shorter side carries some empty space; in a white card that reads as room to breathe, and a page that jumps does not. visibility rather than display, because a cell has to keep its size to reserve it. inert, set alongside, is what keeps the hidden one out of the tab order. */ .mdv3 .wm-two__stack { display: grid; align-items: start; } .mdv3 .wm-two__side { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s ease; } .mdv3 .wm-two__side.is-on { opacity: 1; visibility: visible; pointer-events: auto; } .mdv3 .wm-two__copy .v3-af-call { margin: 24px 0 0; } /* ---- the card ---- */ .mdv3 .wm-two__card { background: #fff; border-radius: 22px; padding: clamp(22px, 2.4vw, 30px); box-shadow: 0 26px 62px rgba(3, 20, 55, .26); } /* ⚠️ #audit again. `.mdv3 #audit p` paints every paragraph in this section #d7e3f7, which is right for pale text on the blue band and wrong for a label inside a white card: it rendered as near-invisible light blue on white. Same family of trap as the field grid and the button padding. */ .mdv3 #audit p.wm-two__ask { margin: 0 0 12px; max-width: none; color: #26334d; font-size: 14.5px; font-weight: 700; } /* The switch. A filled track with the chosen option lifted out of it: the shape people already read as "one of these two". */ /* BOTH OPTIONS HAVE TO LOOK PRESSABLE. Khalid: "how user know this is tab?". The first version left the option that is off as bare text on the grey track, which reads as a label for the thing that is on, not as the other half of a choice. It now has a white face, a border and a shadow: the shape of a button that has not been pressed. The one that is on is filled and sunk into the track. Two buttons, one of them down, which is a control people already know how to read. */ .mdv3 .wm-two__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin: 0 0 clamp(18px, 2vw, 24px); background: #e8eef8; border-radius: 999px; } .mdv3 .wm-two__tab { appearance: none; cursor: pointer; padding: 12px 14px; border-radius: 999px; background: #fff; border: 1px solid #d4dfef; color: #26334d; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; box-shadow: 0 1px 2px rgba(10, 25, 60, .1); transition: background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease; } .mdv3 .wm-two__tab:hover { border-color: #0964fc; color: #0964fc; } .mdv3 .wm-two__tab:active { transform: translateY(1px); } .mdv3 .wm-two__tab.is-on { background: #0964fc; border-color: #0964fc; color: #fff; box-shadow: inset 0 2px 5px rgba(3, 40, 110, .28); } .mdv3 .wm-two__tab.is-on:hover { color: #fff; } .mdv3 .wm-two__tab:focus-visible { outline: 3px solid #0964fc; outline-offset: 3px; } /* The forms are stacked so the shorter one never leaves a hole, and the wrapper's height is set in script and transitioned. Reserving max height instead was the first fix for the jump and it worked, but it left 106px of empty white under the audit form permanently. Moving the height smoothly is the better trade: nothing snaps, and neither side carries a hole. overflow stays visible on purpose. The height only disagrees with the content while the transition runs, and during that the other form is fading anyway, so there is nothing to clip and no focus ring gets cut off. */ .mdv3 .wm-two__forms { display: grid; align-items: start; transition: height .3s cubic-bezier(.4, .02, .2, 1); } .mdv3 .wm-two__form { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s ease; } .mdv3 .wm-two__form.is-on { opacity: 1; visibility: visible; pointer-events: auto; } /* ---- the platform pills ---- NOTHING HERE STYLES THEM, AND THAT IS THE FIX. Khalid: "why duble border". md-v3.css already builds this control, and it builds it out of the SPAN: `.mdv3 #audit .v3-af-plat input` is taken off screen and `+ span` is the pill, with its own hover, checked and focus-visible states. I had styled the LABEL as a pill as well, so every option was a pill drawn inside a pill and showed two rounded borders. The form carries .v3-af-card, so it already gets the light-card version of that control at `.mdv3 #audit .v3-af-card .v3-af-plat span`. The only thing worth adding is the gap above it, because this card is tighter than the homepage's. */ .mdv3 #audit .wm-two__form .v3-af-plat { margin: 4px 0 0; } /* Two fields a row while the card can hold them. Measured: the card is 500 wide here, so each field is 213 and the longest placeholder, "If you would rather talk", needs 174. Below 620 the card cannot, and one field a row is the honest answer. */ .mdv3 #audit .wm-two__form .v3-af-grid { grid-template-columns: 1fr 1fr; } @media (max-width: 980px) { .mdv3 .wm-two { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 620px) { .mdv3 #audit .wm-two__form .v3-af-grid { grid-template-columns: 1fr; } .mdv3 .wm-two__card { border-radius: 18px; } .mdv3 .wm-two__tab { font-size: 14px; padding: 11px 8px; } } /* The fade is decoration. The switch is the function, so keep the switch. */ @media (prefers-reduced-motion: reduce) { .mdv3 .wm-two__side, .mdv3 .wm-two__form, .mdv3 .wm-two__tab, .mdv3 .wm-two__forms { transition: none; } } /* No script: both forms are simply there, each under its own heading, rather than one of them hidden for good. */ .no-js .mdv3 .wm-two__stack, .no-js .mdv3 .wm-two__forms { display: block; } .no-js .mdv3 .wm-two__side, .no-js .mdv3 .wm-two__form { opacity: 1; visibility: visible; pointer-events: auto; } .no-js .mdv3 .wm-two__switch { display: none; } .no-js .mdv3 .wm-two__form + .wm-two__form { margin-top: 28px; border-top: 1px solid #e3e9f4; padding-top: 28px; } /* The form keeps .v3-af-card, and it has to: every input, label, placeholder and focus ring in this section is styled off `.mdv3 #audit .v3-af-card input` and friends. Dropping the class for a tidier name took the field boxes with it and left four labels floating on a white panel. What the class must NOT keep here is its own box, because .wm-two__card is already that box. */ .mdv3 #audit .wm-two__form.v3-af-card { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; backdrop-filter: none; }