/* ---------------------------------------------------------------------------- * Shell alignment for v3 pages. * * The site header and footer are shared Bootstrap 3 markup used by all ~143 * marketing pages, so they are not rewritten here. This file only brings their * TYPOGRAPHY into line with the v3 design system, and it is loaded exclusively * by views/partials/v3_head.php — i.e. only on the five redesigned pages. * Every other page renders exactly as before. * -------------------------------------------------------------------------- */ /* Full v3 palette exposed globally so markup outside .v3 (the shared header and footer, and the .blog-article posts) can use the same tokens. */ :root{ --v3-radius-btn:30px; --v3-radius-input:26px; --v3-display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif; --v3-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif; --v3-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --v3-ink:#0e100b; --v3-ink-2:#171a12; --v3-ink-3:#22261b; --v3-lime:#e5f538; --v3-olive:#566000; --v3-paper:#f3f5ee; --v3-card:#ffffff; --v3-steel:#5d6556; --v3-steel-2:#9aa38f; --v3-rule:#dde2d3; --v3-rule-dark:#2c3124; } /* top nav */ .navbar-nav > li > a.erpnavlink, .navbar-nav > li > a{font-family:var(--v3-body);font-weight:600;letter-spacing:.005em} .top-header,.top-header a{font-family:var(--v3-body)} /* footer */ footer.footer{font-family:var(--v3-body)} footer.footer h5.headin5_amrc{font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.05;letter-spacing:.005em} footer.footer a{transition:color .15s ease} footer.footer a:hover{color:var(--v3-lime)} /* ---------------------------------------------------------------------------- * Control radii. * * The legacy stylesheets set their own radii on buttons and inputs in several * places — style.css uses 2px on `input, button`, the shared .lerp-demo block * uses 6px, and individual pages use 3–5px. Normalised here to the v3 radius so * every control matches, rather than chasing each page. * * This file loads on every page via header.php, so these apply site-wide. * Selectors stay specific: no bare `button` / `input` rule. * -------------------------------------------------------------------------- */ /* shared demo form (features, industry, blog and pricing pages) */ .lerp-demo input[type="text"],.lerp-demo input[type="tel"], .lerp-demo input[type="email"],.lerp-demo textarea,.lerp-demo select{ border-radius:var(--v3-radius-input)!important; } .lerp-demo button,.lerp-demo .btn,.lerp-demo input[type="submit"]{ border-radius:var(--v3-radius-btn)!important; } /* careers, free trial, signup and the bespoke industry pages */ .btn-register-header,.wpcf7-submit,.gradient-color,.black_btn, .btn.lspl-form,.btn-info.btn-lg,.contact-formss .wpcf7-submit{ border-radius:var(--v3-radius-btn)!important; } .contact-formss input,.contact-formss select,.contact-formss textarea, .form-horizontal .item.form-group input,.form-horizontal .item.form-group select{ border-radius:var(--v3-radius-input)!important; } /* ---------- link focus ---------- * Bootstrap 3 ships * a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px} * on PLAIN :focus, so the ring is drawn when a link is CLICKED, not only * when it is reached by keyboard - which is the border that appears * around a link after you press it and stays until you click elsewhere. * * The ring is dropped and handed to :focus-visible, which a browser * matches for keyboard focus and not for a mouse click. So the border * goes away on click and a keyboard user still gets a clear indicator - * a bare "a:focus{outline:none}" would have taken that away with it and * left the site unusable without a mouse. * * This file loads on every page via header.php, so it applies site-wide. */ a:focus{outline:none;outline-offset:0} a:focus-visible{outline:3px solid var(--v3-lime);outline-offset:3px;border-radius:2px} /* header hamburger */ .v3-nav .navbar-toggle{border-radius:8px} /* ---------- footer, v3 ---------- * Shared by every page. Restyled in place - the Bootstrap 3 column structure * in views/footer.php is untouched so nothing else can break. * Fixes: the two link columns had lost their
headings to comments, so * they read as two anonymous lists; the lists carried a hard * `padding-left:100px`; and the bottom bar separated policy links with bare * "-" text nodes. */ footer.footer{ background:var(--v3-ink);color:#c6cdb9; border-top:1px solid var(--v3-rule-dark); padding-block:clamp(44px,5vw,68px) 0;font-size:15px; } footer.footer h5.headin5_amrc{ font-family:var(--v3-display);font-weight:800;text-transform:uppercase; font-size:22px;line-height:1.08;letter-spacing:-.005em;color:#fff; margin:0 0 20px; } /* the company name is the anchor of the block, so it stays larger */ footer.footer .col-md-4:first-child h5.headin5_amrc{font-size:25px;max-width:16ch} /* column headings sit on the same baseline as the company name */ footer.footer h5.ftr-col-h{ font-family:var(--v3-mono);font-weight:400;font-size:11.5px; letter-spacing:.1em;color:var(--v3-steel-2); padding-bottom:12px;border-bottom:1px solid var(--v3-rule-dark); } footer.footer .lft-box{display:grid;gap:4px;margin-top:4px} footer.footer .lft-box > div{float:none;display:flex;align-items:flex-start;gap:10px} footer.footer .lft-box i{color:var(--v3-lime);margin-top:7px;width:16px;flex:none;text-align:center} footer.footer .lft-box p{margin:0;padding:6px 0;line-height:1.45;color:#c6cdb9} footer.footer .lft-box a{color:#e8ecdf!important;margin-right:0!important} /* was padding-left:100px, which pushed both lists off their column */ footer.footer .right-footer .footer_ul_amrc{padding-left:0;padding-top:0;margin:0;list-style:none} footer.footer .footer_ul_amrc li{margin:0} footer.footer .footer_ul_amrc li a{ color:#c6cdb9;display:block;padding:7px 0;line-height:1.45; } footer.footer .footer_ul_amrc li a:hover{color:var(--v3-lime);text-decoration:none} footer.footer a{color:#c6cdb9} footer.footer a:hover{color:var(--v3-lime);text-decoration:none} /* social: real round buttons rather than bare glyphs */ footer.footer .mobile-social-links{ display:flex;gap:10px;list-style:none;padding:0; margin:clamp(24px,3vw,36px) 0 0; } footer.footer .mobile-social-links li{margin:0} footer.footer .mobile-social-links li a{ width:42px;height:42px;border-radius:50%; border:1px solid var(--v3-rule-dark);background:var(--v3-ink-2); color:#c6cdb9;transition:background .15s ease,border-color .15s ease,color .15s ease; } footer.footer .mobile-social-links li a:hover{ background:var(--v3-lime);border-color:var(--v3-lime);color:var(--v3-ink); } footer.footer .mobile-social-links .fa-2x{font-size:18px} /* bottom bar */ footer.footer .copyrght, footer.footer .bottom-footer{font-size:13px!important;color:#8b937d!important} footer.footer .copyrght a{color:#c6cdb9!important} footer.footer .bottom-footer{ display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end; list-style:none;padding:0;margin:0;text-align:right!important; } footer.footer .bottom-footer li a{color:#8b937d;padding:6px 0!important} footer.footer .bottom-footer li a:hover{color:var(--v3-lime)} @media (max-width:991px){ footer.footer .right-footer{margin-top:32px} } @media (max-width:767px){ footer.footer .bottom-footer{justify-content:center;text-align:center!important} footer.footer .mobile-social-links{justify-content:flex-start;margin-top:28px!important} } /* style.css:9602 sets `position:relative; top:40px` on the footer, which pushed it 40px down the page and left a white band of body background between the last section and it. */ footer.footer{position:static;top:auto} /* the site ground is paper, not the browser default white */ body{background:var(--v3-paper)} /* footer logo above the legal company name */ footer.footer .ftr-logo{display:inline-block;margin:0 0 18px;line-height:0} footer.footer .ftr-logo img{width:170px;height:auto;max-width:100%} footer.footer .col-md-4:first-child h5.headin5_amrc{ font-size:15px;font-family:var(--v3-body);font-weight:600; text-transform:none;letter-spacing:0;color:#c6cdb9;margin:0 0 16px;max-width:none; } /* the icons sat 36px below the address with nothing in between */ footer.footer .mobile-social-links{margin-top:20px} /* The footer columns inherit `text-align:center` from legacy CSS; every other child overrides it individually, so the inline-block logo was the one thing left centred. Set the columns left once and make the logo a block. */ footer.footer .col-md-4{text-align:left} footer.footer .ftr-logo{display:block;width:max-content;max-width:100%} /* style.css gives `.foote_bottom_ul_amrc_policy li a` a 20px side margin, so each 42px social button sat inside an 82px li. Spacing comes from the flex gap on the list instead. */ footer.footer .mobile-social-links li a{margin:0} /* the social list lives in its own .row, outside the column, so it misses Bootstrap's 15px gutter and sat 15px left of everything above it */ footer.footer .mobile-social-links{padding-left:15px} footer.footer .bottom-footer li a{margin:0} /* ========================================================================== MOBILE PASS (added 2026-10-09) Measured at 390x844 in a real rendered window across ten pages. Almost everything that failed was in this shared chrome, so fixing it here fixes every page at once rather than ten times over. The sizes below come from the WCAG 2.2 target-size minimum (24x24 CSS px is the AA floor; 44x44 is the AAA and platform guidance both Apple and Google publish). Nothing here changes a single desktop pixel - the whole block is inside one phone-width media query. ========================================================================== */ @media (max-width:767.98px){ /* ---- the hamburger ---- It was 30x35. This is the single most-used control on the site on a phone, and it was the smallest target on the page. The glyph inside is a 35px , so the button only needed a box and centring. */ .v3-nav .navbar-toggle{ min-width:46px;min-height:46px;padding:0; display:inline-flex;align-items:center;justify-content:center; margin:8px 0; } /* ---- footer link columns ---- 12px type in 29-33px rows. Two links a finger-width apart is a mis-tap waiting to happen, and 12px is below what anyone should have to read at arm's length. */ footer.footer .footer_ul_amrc li a{ font-size:15px!important; padding:11px 0!important;min-height:44px; display:flex;align-items:center;line-height:1.35; } footer.footer .lft-box p, footer.footer .lft-box a{font-size:15px!important} footer.footer .lft-box > div{padding:2px 0} footer.footer h5.ftr-col-h{font-size:12.5px} /* ---- footer bottom bar ---- The four policy links were 12px in 29px rows, centred and tightly packed - four tiny targets in a row. */ footer.footer .copyrght, footer.footer .bottom-footer{font-size:14px!important} footer.footer .bottom-footer{gap:0 18px} footer.footer .bottom-footer li a{ font-size:14px!important; padding:11px 2px!important;min-height:44px; display:inline-flex;align-items:center; } footer.footer .copyrght a{padding:6px 0;display:inline-block} footer.footer .ftr-logo{min-height:44px;display:inline-flex;align-items:center} /* ---- eyebrow labels ---- 12.5px uppercase mono with .12em tracking is a fine desktop label and a squint on a phone. One step up; they are still clearly labels rather than body copy. */ .v3-eyebrow,.ind-eyebrow,.lerp-videyebrow, .k-marquee-lbl,.v3-legal__eyebrow{font-size:13px!important} /* ---- the mobile logo ---- 23px tall, and it is the way back to the home page from every page on the site. */ .v3-nav .navbar-header .visible-xs > a{ display:inline-flex;align-items:center;min-height:44px; } /* ---- footer contact rows ---- The address block's phone and email are links too, and they were the same 33px as the columns beside them. */ footer.footer .lft-box a{ display:inline-flex;align-items:center;min-height:44px;padding:2px 0; } footer.footer .copyrght a{ display:inline-flex;align-items:center;min-height:44px; } footer.footer .mobile-social-links li a{width:44px;height:44px} } /* -------------------------------------------------------------------------- TOUCH TARGETS, by INPUT DEVICE rather than by width The block above is keyed to max-width:767.98px, which is right for type - a phone needs bigger text than a desktop - but wrong for targets. A 768px iPad is a touch device with the desktop chrome, and it came back with 22 to 35 sub-36px targets per page for exactly that reason. (hover:none) and (pointer:coarse) is the actual question being asked: is this a finger? A mouse user at 768px keeps the compact footer. -------------------------------------------------------------------------- */ @media (hover:none) and (pointer:coarse){ footer.footer .footer_ul_amrc li a{ padding:11px 0!important;min-height:44px; display:flex;align-items:center;line-height:1.35; } footer.footer .lft-box a, footer.footer .copyrght a{ display:inline-flex;align-items:center;min-height:44px; } footer.footer .bottom-footer li a{ padding:11px 2px!important;min-height:44px; display:inline-flex;align-items:center; } footer.footer .ftr-logo{min-height:44px;display:inline-flex;align-items:center} footer.footer .mobile-social-links li a{width:44px;height:44px} .v3-nav .navbar-header .visible-xs > a{display:inline-flex;align-items:center;min-height:44px} .v3-nav .navbar-toggle{ min-width:46px;min-height:46px;padding:0; display:inline-flex;align-items:center;justify-content:center; } .v3-legal__toc a{min-height:44px;display:flex;align-items:center} .case_studyy > a{display:block;padding:7px 0} .case_studyy a.clickcustomform{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px; } /* The top bar - phone, email, Login, Book a demo - is hidden below 768px, so it never showed up in the phone pass. On a tablet it is visible AND touched: four links at 11.5px in 15px rows, the smallest targets left on the site. */ /* .v3-nav prefix needed: v3-header.css styles these at (0,2,1) and a bare .top-header a is (0,1,1) and loses. */ .v3-nav .top-header a{ /* min-height needs the !important too - something in the header chain sets min-height:0 and wins on the cascade. The li is already 47px tall, so the link just was not filling the row it sits in. */ display:inline-flex!important;align-items:center; min-height:40px!important; font-size:13px!important; } .v3-nav .top-header li{display:inline-flex;align-items:center} } /* -------------------------------------------------------------------------- MOBILE NAV TOGGLE (fixed 2026-10-09) The hamburger did nothing on the homepage while working everywhere else. Two Bootstraps are live on the same page: header.php loads Bootstrap 3.3.6 JS + CSS on EVERY page 8 views, incl. landing2.php, additionally load Bootstrap 5.0.2 from the CDN - landing2, freetrial_2, erplanding, landing_new, next_step, pricingdetail, register, signup Bootstrap 3's JS is still the one bound to data-toggle="collapse", and it opens a menu by adding the class "in". Bootstrap 5 renamed that class to "show" and its CSS carries ".collapse:not(.show){display:none}". So on those 8 pages the tap WAS working - the menu got its "in" class and then BS5's stylesheet kept it display:none. Measured: class goes to "navbar-collapse erpnavfont collapse in", height stays 0. One line puts the BS3 state back in charge of its own menu. Pure CSS: no markup, no handler and no library change, so pages carrying only BS3 are unaffected (there ".collapse.in" was already display:block). The real repair is to stop loading two major versions of Bootstrap on one page, but that is a change with a blast radius across those 8 views and wants its own pass. -------------------------------------------------------------------------- */ .navbar-collapse.collapse.in{display:block!important}