.icon-box h2.title{font-size:18px;line-height:21.6px;font-weight:700;margin:0 0 15px;}.member-info h3.award-title{font-size:20px;line-height:24px;font-weight:700;margin:0 0 5px;}.hex64-sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);}.swiper-pagination-bullet{position:relative;margin:6px !important;}.swiper-pagination-bullet::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;} .recent-posts-widget .post-item img{width:80px;height:80px;aspect-ratio:1/1;object-fit:cover;border-radius:4px;}.recent-posts-widget .post-item{gap:12px;align-items:flex-start;} /* HEX64 hero-page calls to action (mu-plugins/hex64-hero-ctas.php) */ .hex64-hdr-ctas{display:flex;align-items:center;gap:10px} .hex64-hdr-cta,.hex64-m-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-pill,999px);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s} .hex64-hdr-cta.is-primary,.hex64-m-cta.is-primary{background:linear-gradient(135deg,var(--orange,#ff6b00),var(--orange-2,#ff8530));color:#fff;box-shadow:0 8px 22px rgba(255,107,0,.28)} .hex64-hdr-cta.is-primary:hover,.hex64-m-cta.is-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px rgba(255,107,0,.4)} .hex64-hdr-cta.is-ghost,.hex64-m-cta.is-ghost{background:#fff;color:var(--navy,#06243d);border:1.5px solid var(--navy,#06243d);padding:8.5px 16.5px} .hex64-hdr-cta.is-ghost:hover,.hex64-m-cta.is-ghost:hover{background:var(--sky,#eaf5ff);color:var(--navy,#06243d)} /* Header room, measured 18 Oct 2026. The six menu items need 733px at the theme's 16px side padding, 637px at 8px. The menu gets (viewport - 611px) beside both buttons, (viewport - 452px) beside Live Demo alone, (viewport - 319px) with none. The menu WRAPS to a second row when short - it already did at 1025-1051px on production before these buttons existed - so every band below keeps 30px+ spare for font differences between Windows and Mac: 1360+ both buttons, theme padding (749px for 733) 1280-1359 both buttons, 8px padding (669px for 637) 1140-1279 Live Demo only, 8px padding (688px for 637) 1025-1139 no buttons, 8px padding (706px for 637) Below 1025px the theme swaps the menu for the hamburger. */ @media (min-width:1025px) and (max-width:1359.98px){nav.nav > .nav-item > .nav-link{padding-left:8px;padding-right:8px}} @media (max-width:1279.98px){.hex64-hdr-cta.is-ghost{display:none}} @media (max-width:1139.98px){.hex64-hdr-ctas{display:none}} .hex64-m-ctas{display:flex;flex-direction:column;gap:10px} .hex64-m-cta{width:100%;padding:12px 18px;font-size:15px} .hex64-m-cta.is-ghost{padding:10.5px 16.5px} /* /pricing/ banner (deploy 65): the estimator and contact on the first screen. The banner is the theme's deep-blue band (#2a4196) with centred white text, so the second button is a white pill. */ .hex64-bn-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:22px 0 6px} .banner .hex64-bn-ctas{justify-content:flex-start;margin:18px 0 28px} .hex64-bn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--radius-pill,999px);font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease} .hex64-bn-cta.is-primary{background:linear-gradient(135deg,var(--orange,#ff6b00),var(--orange-2,#ff8530));color:#fff;box-shadow:0 8px 22px rgba(255,107,0,.28)} .hex64-bn-cta.is-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px rgba(255,107,0,.4)} .hex64-bn-cta.is-ghost{background:#fff;color:var(--navy,#06243d)} .hex64-bn-cta.is-ghost:hover{background:var(--sky,#eaf5ff);color:var(--navy,#06243d);transform:translateY(-1px)} .hex64-bn-cta:focus-visible{outline:3px solid #fff;outline-offset:2px} /* Homepage hero: the demo beside the existing Start Your Project button. The hero is LIGHT (a 70% white overlay, navy text), so the outline button is navy on white - a white outline would be invisible. An inset shadow, not a border, draws the outline so both buttons stay the same height. */ .hero .btn-get-started.hex64-hero-ghost{background:#fff;color:#2a4297;border:0;box-shadow:inset 0 0 0 2px #2a4297;margin-left:12px} .hero .btn-get-started.hex64-hero-ghost:hover{background:#2a4297;color:#fff} @media (max-width:575.98px){.hero .btn-get-started.hex64-hero-ghost{margin:12px 0 0}} /* The chat widget (z-index 99999) floats over the phone menu (z-index 2000) and covered the right end of Live Demo there. Hidden while the menu is open; it comes back when the menu closes. Browsers without :has() keep the old overlap. */ body:has(.mobile-menu.is-open) .hex64ai{visibility:hidden} /* Bands */ .hex64-cta-band{padding:64px 0;background:var(--bg,#f7fbff);border-top:1px solid var(--border,#e5eef7);border-bottom:1px solid var(--border,#e5eef7)} .hex64-cta-band.is-inline{padding:0;margin:8px 0 40px;background:none;border:0} .hex64-cta-band .hcb-head{text-align:center;max-width:720px;margin:0 auto 28px} .hex64-cta-band .hcb-kicker{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#0767c0;margin:0 0 6px} .hex64-cta-band .hcb-heading{font-size:30px;line-height:1.25;font-weight:800;color:var(--navy,#06243d);margin:0} .hex64-cta-band .hcb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1000px;margin:0 auto} .hex64-cta-band.is-inline .hcb-grid{max-width:none} .hex64-cta-band .hcb-card{display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:var(--radius-lg,18px);background:#fff;border:1px solid var(--border,#e5eef7);box-shadow:var(--shadow-sm,0 4px 14px rgba(6,36,61,.06));color:var(--text,#14324a);text-decoration:none;transition:transform .2s,box-shadow .2s} .hex64-cta-band .hcb-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 12px 30px rgba(6,36,61,.1))} .hex64-cta-band .hcb-card.is-primary{background:linear-gradient(135deg,var(--navy,#06243d),var(--navy-2,#0a2f4f));border-color:transparent} .hex64-cta-band .hcb-ico{flex:0 0 48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--sky,#eaf5ff);color:var(--blue,#0878d6);font-size:20px} .hex64-cta-band .is-primary .hcb-ico{background:rgba(255,255,255,.12);color:#fff} .hex64-cta-band .hcb-body{display:flex;flex-direction:column;gap:6px;min-width:0} .hex64-cta-band .hcb-title{font-size:19px;line-height:1.3;font-weight:700;color:var(--navy,#06243d)} .hex64-cta-band .hcb-text{font-size:15px;line-height:1.55;color:#5a6b7c} .hex64-cta-band .hcb-go{margin-top:4px;font-size:15px;font-weight:700;color:#0767c0} .hex64-cta-band .is-primary .hcb-title{color:#fff} .hex64-cta-band .is-primary .hcb-text{color:rgba(255,255,255,.82)} .hex64-cta-band .is-primary .hcb-go{color:var(--orange-2,#ff8530)} @media (max-width:767.98px){.hex64-cta-band{padding:44px 0}.hex64-cta-band .hcb-heading{font-size:24px}.hex64-cta-band .hcb-card{padding:20px}} @font-face{font-display:block;font-family:"bootstrap-icons";src:url("https://hex64.net/wp-content/themes/hexa-child/assets/fonts/bootstrap-icons-subset.woff2?v=20261009a") format("woff2"),url("https://hex64.net/wp-content/themes/hexa/assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff") format("woff");} /* --------------------------------------------------------------------------- * FIX 2 - the fixed enquiry bar was covering the footer, and could not be * dismissed. * * Measured on staging 9 Oct 2026: * .enquiry-form position: fixed, bottom: 0, height 86px, z-index 1050 * footer padding-bottom: 50px * 86 - 50 = 36px of the footer sat UNDERNEATH the bar, which is why the * copyright line was partly hidden on every page. * * .enquiry-toggle already exists in the markup (fixed, z-index 1040) - the * collapse control was built and then left at display:none, so visitors had no * way to put the bar away. On mobile it permanently occupies 86px of screen. * ------------------------------------------------------------------------- */ /* Clear the fixed bar so nothing is hidden behind it. */ .footer, footer.footer { padding-bottom: 96px; } /* * NOT DONE: un-hiding .enquiry-toggle. Tried it and measured the result - the * toggle is z-index 1040 and sits at the same 716-768px band as .enquiry-form * (z-index 1050), so it renders BEHIND the bar: present in the DOM, invisible to * the visitor. Making it usable needs real design work (where does it sit, what * does collapsed look like, does the state persist), not a display:flex. Left * hidden rather than shipping a control nobody can see. */ /* Logo grid: show the whole logo, do not crop it. */ .tech_tool .tool_img { display: flex; align-items: center; justify-content: center; min-height: 110px; } .tech_tool .tool_img img { width: auto; max-width: 100%; height: auto; max-height: 70px; object-fit: contain; } /* * Footer columns: one rhythm for all three (17 Oct 2026). * * Measured at 1536px before the change: * link columns a { line-height: 1 } -> 14px lines on 14px text * li { padding: 10px 0 } -> a 34px row * contact column p.mb-4 -> 24px lines + 24px gap -> a 48px row * (Bootstrap .mb-4 is margin-bottom:1.5rem !important; * the third line has no class and got 5px) * * Two visible faults followed. A link that wraps ("NOC Monitoring & Helpdesk * Dashboard", "Remote Helpdesk & NOC Cost Estimator") had NO space between its * two lines, because line-height:1 was written for one-line links. And the * columns started level then drifted 14px further apart on every row, so by * the third row Contact Us sat 38px out of line with the links beside it. * * After: 24px lines everywhere and a 34px row everywhere - 24 + 5 + 5 for a * link, 24 + 10 for a contact line - so a one-line row is EXACTLY as tall as * before, wrapped links get real leading, and row N lines up across columns. * The !important is needed only to beat .mb-4, which carries its own; the more * specific selector then wins. */ .footer .footer-links ul li { padding: 5px 0; } .footer .footer-links ul li:first-child { padding-top: 0; } .footer .footer-links ul a { line-height: 24px; } .footer .footer-contact p { line-height: 24px; margin-bottom: 10px !important; } /* * Footer column widths (17 Oct 2026, second pass). * * The rhythm fix above made row N line up across columns ONLY until a link * wraps. Two Useful Links labels need 262px and 260px on one line ("Remote * Helpdesk & NOC Cost Estimator", "NOC Monitoring & Helpdesk Dashboard") and * the col-lg-2 column gave them 196px at a 1320px container - so each wrapped * onto two lines and pushed every row below it a line out of step with Our * Services beside it (30px by row 5, 60px by row 6, in the owner screenshot). * * The first pass was verified on rows 1-3 only, and both wrapped links are * rows 4 and 5: a check bounded short of the defect could not fail. * * Widths are worked back from the longest label in each column, measured, plus * ~10px slack, against the Bootstrap container (1320 / 1140 / 960px) less 24px * of column padding. The brand column gives up the room: its paragraph wraps * more, which costs nothing. Below 992px the link columns are already side by * side at 50% each and fit. */ @media (min-width: 1200px) { .footer .footer-about { width: 34%; } .footer .col-lg-2.footer-links { width: 26%; } .footer .col-lg-3.footer-links { width: 25%; } .footer .footer-contact { width: 15%; } } @media (min-width: 992px) and (max-width: 1199.98px) { .footer .footer-about { width: 21%; } .footer .col-lg-2.footer-links { width: 31%; } .footer .col-lg-3.footer-links { width: 30%; } .footer .footer-contact { width: 18%; } } /* * Single-column mega menu (17 Oct 2026) - the Industries dropdown. * * .mega-menu.is-md is a 600px grid of 276px + 250px: a link column and a * promotional right panel. Industries has a link column only - no panel copy * was written for it, rather than invent one - and without this the box kept * its 600px with the right half empty. One column, sized to the links, and no * divider on the column edge since nothing sits beside it. */ .mega-menu.is-md.is-single { width: auto; grid-template-columns: max-content; } .mega-menu.is-single .mega-left { border-right: 0; padding-right: 0; } /* * Tap targets (20 Oct 2026, site audit HEX-144). Measured at 375px wide: * homepage service-box titles (.icon-box h2.title a) 25px tall * blog pagination numbers (.navigation.pagination) 9 x 22px * The padding/negative-margin pair grows the tappable box to 45px without moving * anything around it. Two other audit items were measured and are NOT small: * the contact office cards use stretched-link (the whole 351px card is the * target) and the quick-form checkboxes sit inside 129 x 68px labels. */ .icon-box h2.title a { display: inline-block; padding: 10px 0; margin: -10px 0; } .navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* =========================================================================== * MOBILE AUDIT FIXES (24 Oct 2026) - 48 pages measured at 390 and 360px wide, * hex64-site/audits/mobile-ui-audit-2026-10-23.md. Numbers below are from * that audit unless stated. * ======================================================================== */ /* * Pages wider than the phone. 31 of 48 pages were 8px (every page with a * Table of contents) or 20px (case studies, products) wider than the screen: * main.css @media (max-width:767px) .sidebar { margin-left: 20px } * main.css @media (max-width:991.98px) .sidebar { width: 100% } * 100% + 20px cannot fit, so mobile Chrome laid every one of those pages out * wider than the screen and showed it zoomed out: all text slightly smaller, * the ENQUIRE NOW bar pushed half off the bottom, the chat button and the * back-to-top arrow cut in half, and the menu opening off-centre. * The margin stood in for the column padding the template switches off on * phones - .sidebar-wrapper carries Bootstrap ps-0, padding-left:0 !important - * which also left the yellow Contact Us button touching the left edge of the * screen. Giving the column its padding back fixes both; the !important is * only there to beat the one on ps-0. */ @media (max-width: 991.98px) { .sidebar-wrapper.ps-0 { padding-left: calc(var(--bs-gutter-x) * .5) !important; } } @media (max-width: 767px) { .sidebar { margin-left: 0; } } /* * The pricing calculator heading badge. "HEX64 REMOTE HELPDESK & NOC COST * ESTIMATOR" is a Bootstrap .badge, which is white-space:nowrap, and spaced * capitals make it 402px long: the calculator page was 28px wider than a * 390px phone and 58px wider than a 360px one. The calculator CSS (WPCode * snippet 3199) prints later in the page than this, so each selector here * carries one extra element to outrank it rather than relying on order. */ @media (max-width: 575.98px) { .h64calc .calc-intro span.badge { white-space: normal; letter-spacing: .5px; line-height: 1.5; } } /* * Calculator text below 12px: 30 labels, pills and notes at 11px on a phone. * 12px is the floor for body text in the mobile audit (and in Google mobile * guidance). Phones only; the desktop design is unchanged. */ @media (max-width: 767.98px) { body .h64calc label, body .h64calc .calc-intro .trust-pill, body .h64calc .cur-note, body .h64calc .fld .ht, body .h64calc table.bd th, body .h64calc .modal-box .privacy, body .h64calc .disclaimer { font-size: 12px; } } /* * Rules the unused-CSS trim removed that pages now need. tools/trim-css.py * (10 Oct) kept a rule only if every class and tag in it appeared on the 28 * pages sampled that day, so content added since can need a rule that is no * longer shipped - and nothing errors, the element just falls back to the * browser default. tools/css-trim-regression.js found these by rendering all * 48 pages plus the blog at 390 and 1366px, once as shipped and once with the * untrimmed sheet appended, and comparing every element computed style: * h6 Industries, Healthcare: the section labels were 10.7px * (the browser default) instead of 16px * .text-success Outsourced NOC: the green ticks rendered blue and grey * search box products and blog sidebar: lost its borderless input - * the trim cannot see [type=text], it never collects * attribute names * .tags blog posts: the tag list fell back to a bulleted list * caption the pricing comparison table caption colour * Each rule is copied unchanged from the parent theme stylesheets. */ .h6, h6 { font-size: 1rem; } .text-success { --bs-text-opacity: 1; color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important; } .search-widget form input[type=text] { border: 0; padding: 4px; border-radius: 4px; width: calc(100% - 40px); background-color: var(--background-color); color: var(--default-color); } .search-widget form input[type=text]:focus { outline: none; } .blog-details .meta-bottom .tags { list-style: none; display: inline; padding: 0; font-size: 14px; } .blog-details .meta-bottom .tags li { display: inline-block; } .blog-details .meta-bottom .tags li + li::before { padding-right: 6px; color: var(--default-color); content: ","; } caption { padding-top: .5rem; padding-bottom: .5rem; color: var(--bs-secondary-color); text-align: left; } /* * "How We Deliver" timeline boxes lost their right edge on phones: * main.css #timeline .timeline-item .timeline-content * { width: 92%; margin-left: 61px } * 92% + 61px only fits while 8% of the row is at least 61px - rows wider * than about 760px. At 390px the box overhung by 34px and its article * (overflow: clip) cut the words off mid-letter: "Server Inventory & * Monitorin". 12 pages. The max-width caps the box exactly where it would * overflow and changes nothing where it already fits. * #timeline also pads itself 10px where a Bootstrap column has 12px, which * put every item 2px past the edge of its article; narrow screens get the * column padding. */ #timeline .timeline-item .timeline-content { max-width: calc(100% - 61px); } @media (max-width: 991.98px) { #timeline { padding-left: 12px; padding-right: 12px; } } /* * No staggered fade-in delays below 992px. Numbered lists use AOS fade-up * with data-aos-delay 0, 600, 1200, 1800 and 2400ms: a ripple along a * desktop row. Once the items stack, each is revealed only as it is scrolled * to, and the delay just holds it invisible - on Patch Management item 4 sat * at opacity 0 for 1.5s after reaching the screen, and Tiered IT Support * showed about 650px of blank page. About 13 pages. The fade itself stays. * !important because the AOS delay selectors repeat [data-aos] to win on * specificity. */ @media (max-width: 991.98px) { [data-aos] { transition-delay: 0s !important; } } /* * Content tables on phones. They are written with inline styles - 12px of * cell padding at 16px - so a four-column table needs about 530px, and the * three-column White-Label NOC comparison wrapped to one or two words a line * and ran to 2.5 screens. 8px at 14px fits about a quarter more on each line. * Matching on the inline padding picks out exactly those tables (Pricing, * Tiered, White-Label NOC, Outsourced NOC); the calculator and the NOC demo * style their own. The !important beats the inline padding only. * A table that still scrolls sideways is labelled by * mu-plugins/hex64-scroll-hints.php. */ @media (max-width: 767.98px) { table th[style*="padding"], table td[style*="padding"] { padding: 8px !important; font-size: 14px; line-height: 1.45; } } /* * The Network Monitoring SLA table on phones. Its own styles live in the page * content and only began to apply once deploy 53 repaired them (the paragraph * formatter had broken them since they were written). As designed - 16-18px * cell padding, headings and badges that never wrap - it is 432px wide on a * 390px phone. The same tightening as the tables above makes it fit (328px in * 328px) without hiding a column. body outranks the content styles, which * print later in the page. */ @media (max-width: 767.98px) { body .hex64-sla-table { font-size: 14px; } body .hex64-sla-table thead th, body .hex64-sla-table tbody td { padding: 8px; } body .hex64-sla-table thead th { white-space: normal; } body .hex64-sla-table .severity-badge { padding: 3px 8px; font-size: 12px; } } /* * The three pages on the plain page template: Services (post 1902), * Resources (1904) and Privacy Policy (3). That template prints * article > header.entry-header + div.entry-content with no container, and * the Twenty Twenty-One stylesheet that once laid them out is not loaded * (mu-plugins/hex64-drop-tt1-style.php), so their text ran edge to edge: * from x=0 on a phone, across all 1366px of a laptop. navigation32.css also * sets a { color: inherit; text-decoration: none } for the menus, which left * the links on these pages - 19 on the Services hub - looking like plain * text. * By ID because the NOC demo and the calculator use the same template, and * this column width would squeeze them. A new plain page needs adding here. * 984px is the main column of a service page (960px + gutters). */ #post-1902 > .entry-header, #post-1902 > .entry-content, #post-1904 > .entry-header, #post-1904 > .entry-content, #post-3 > .entry-header, #post-3 > .entry-content { max-width: 984px; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; } #post-1902 > .entry-header, #post-1904 > .entry-header, #post-3 > .entry-header { padding-top: 40px; } #post-1902 > .entry-content, #post-1904 > .entry-content, #post-3 > .entry-content { padding-bottom: 48px; } #post-1902 .entry-content a, #post-1904 .entry-content a, #post-3 .entry-content a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 2px; } /* * Pricing showed the monthly AND the annual plans on phones and tablets. * main.css @media (max-width: 991px) .tab-content > .tab-pane { display: block } * shows every tab panel below 992px. On Home, About and the Gallery that is * the phone design - their tab buttons are hidden there and the panels stack. * Pricing keeps its Monthly/Annual switch on screen, so it showed all six * price cards, monthly then yearly, with "Monthly billing" selected. Its own * panels get ordinary tab behaviour back; the other pages are left alone. */ @media (max-width: 991px) { .tab-content > .tab-pane[id^="pricing-tab-"]:not(.active) { display: none; } } /* * MOBILE BATCH 2 (24 Oct 2026) - the page-by-page items from the same audit * (Plane HEX-154). Each was measured on staging before and after. */ /* * Contact Us, "How We Start Working With You": the step headings set * line-height:20px on 21-24px text, and pad the grey number box 5px above * and below. A heading that wraps - every step on a phone, steps 3-5 on a * 1024px laptop - ran its second line into the box. The number now sits in * its own column, one line tall, and the text wraps beside it. Only Contact * Us uses .sub-title. */ .sub-title h4 { display: flex; align-items: flex-start; gap: 10px; line-height: 1.3; } .sub-title h4 span { flex: none; padding: 0 10px; } /* * Pictures squashed or cropped by the width/height attributes that * mu-plugins/hex64-image-optimise.php adds (they are what stops layout * shift). Where the theme sets only a width, the height attribute becomes a * fixed height: * About, client videos: 16:9 thumbnails drawn 277x432, a third of their * true width for their height. * Remote IT Support, partner logos: object-fit:cover inside that fixed box * cut Microsoft, ManageEngine, Datadog and the ISO/GDPR badge down to * about 40 percent of each logo. * height:auto gives the true proportions back, and the attributes still * reserve the space while the picture loads. Found by * tools/img-distortion-audit.js, which measures every picture with and * without its attributes: these two are the only ones the attributes break. */ .vetesti .swiper-slide img, .awa_g .footer-awa_g-img img { height: auto; } /* * About, "Our Journey": eight year buttons, 90px wide at least, in a strip * 790px long that scrolled sideways with nothing to say so. A phone showed * 2016-2019 only. Below 992px they now share the width: one row of eight on * a tablet, two rows of four on a phone. The strip CSS is a style block in * the page body, after this one, hence the body prefix. */ @media (max-width: 991.98px) { body .timeline-wrapper { overflow-x: visible; } body .timeline-wrapper .timeline { display: grid; grid-template-columns: repeat(8, 1fr); min-width: 0; } body .timeline-wrapper .timeline button { min-width: 0; padding: 10px 6px; } } @media (max-width: 575.98px) { body .timeline-wrapper .timeline { grid-template-columns: repeat(4, 1fr); } } /* * NOC demo: its section menu (Overview to Reports) is set to scroll sideways * below 900px, and on a phone five of the six links sat off screen with * nothing to show they were there. They wrap onto rows instead. The menu CSS * is in the page body; the id outranks it. */ @media (max-width: 900px) { #sd_qnav { flex-wrap: wrap; justify-content: center; overflow-x: visible; } } /* * Industries, Healthcare, Hire Us, Solutions, Tools and the service pages: * their content blocks are article.about, and .about adds padding-top:100px * on top of the 50px every section has at its foot. On a phone each block * opened with a 150px blank band. Phones get the 50px every other section * uses. */ @media (max-width: 767.98px) { .sections article.about.page-block { padding-top: 50px; } } /* * Hire Us and Remote IT Support: the "Our Mission" label above the mission * box was 10px at every width. 12px is the smallest text anywhere else. */ .about__v4 .mission-statement h3 { font-size: 12px; letter-spacing: .5px; } /* * Pricing cards (26 Oct 2026, the owner: make it aligned). At 1440px the three * cards were 632, 746 and 1118px tall, so each Start free trial button sat at its * own height, with a large gap under the two short cards. Now every card is the * full height of the row; name, description, price and button line up across it * (the button moves up under the price, so it shows before a 13-item list); and * the feature rows are tighter (a 50px pitch becomes 35px). The description keeps * three lines, and the list heading two, at the widths where they wrap * differently, so the rows stay level there too. Phones stack the cards in the * same order. The Most Popular badge is absolutely positioned and stays put. */ .pricing_in .pricing-card { display: flex; flex-direction: column; height: 100%; } .pricing_in .pricing-card > h3 { order: 1; } .pricing_in .pricing-card > .description { order: 2; margin-bottom: 16px; } .pricing_in .pricing-card > .price { order: 3; margin-bottom: 20px; } .pricing_in .pricing-card > .btn { order: 4; margin-bottom: 28px; } .pricing_in .pricing-card > h4 { order: 5; } .pricing_in .pricing-card > .features-list { order: 6; margin-bottom: 0; } .pricing_in .pricing-card .features-list li { padding-top: 5px; margin-bottom: 6px; } @media (min-width: 992px) { .pricing_in .pricing-card > .description { min-height: 72px; } } @media (min-width: 992px) and (max-width: 1199.98px) { .pricing_in .pricing-card > h4 { min-height: 43px; } } /* * In-text links (deploy 67, 26 Oct 2026). A global a { color: inherit; text-decoration: none } * makes a link inside running text look exactly like the words around it, so nobody can see it. * Links in the copy of the page sections (in a p or li, with no class of their own - buttons and * cards carry one) take the theme accent and an underline. Measured before shipping on the 138 * sitemap URLs: 6 existing links on 3 pages change (Solutions, Outsourced NOC, NOC Services), * plus the 2 that deploy 67 adds; nothing else matches. One of the 8 sits on the dark Most * Popular pricing card (white text on teal), where the accent would be 1.2:1 - there the link * keeps the white text and gets only the underline. */ .page-block p a:not([class]), .page-block li a:not([class]) { color: var(--accent-color, #2a4297); text-decoration: underline; text-underline-offset: 2px; } .page-block p a:not([class]):hover, .page-block li a:not([class]):hover, .page-block p a:not([class]):focus-visible, .page-block li a:not([class]):focus-visible { color: var(--heading-color, #124265); } .page-block .price-table.popular p a:not([class]), .page-block .price-table.popular li a:not([class]), .page-block .price-table.popular p a:not([class]):hover, .page-block .price-table.popular li a:not([class]):hover, .page-block .price-table.popular p a:not([class]):focus-visible, .page-block .price-table.popular li a:not([class]):focus-visible { color: inherit; } /* --------------------------------------------------------------------------- * Above-the-fold content must not depend on JavaScript to become visible. * AOS ships [data-aos^=fade]{opacity:0} / [data-aos^=zoom]{opacity:0} and only * restores opacity when its footer script adds .aos-animate. See file header. * * The ANIMATION was never the cost - waiting for JS to un-hide the element was. * So the hero image (the LCP element) is made instant, while the headline, * button and cards keep their designed zoom-out, re-expressed as a CSS * animation that starts the moment this stylesheet parses. * ------------------------------------------------------------------------- */ /* The LCP element: instant, never animated. !important deliberately, because an !important declaration outranks a CSS animation - which is exactly what we want here, and exactly what we must NOT do to the elements below. */ #hero img[data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* AOS values, read from the theme rather than guessed: [data-aos=zoom-out]{transform:scale(1.2)} and AOS.init({duration:600, easing:"ease-in-out"}). */ @keyframes hex64-hero-zoom-out { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: none; } } /* No !important here: a CSS animation already outranks the plain [data-aos^=zoom]{opacity:0} rule, and adding !important would kill the very animation we are restoring. `both` holds the end state, so when AOS later adds .aos-animate nothing visibly changes. */ #hero [data-aos^="zoom"] { animation: hex64-hero-zoom-out 600ms ease-in-out both; transition: none; } #hero [data-aos^="zoom"][data-aos-delay="100"] { animation-delay: 100ms; } #hero [data-aos^="zoom"][data-aos-delay="200"] { animation-delay: 200ms; } /* FIX 3: the first content section of pages with no #hero. On /about/ and on the .sections page-block templates the LCP element sits in these wrappers. Instant and never animated, for the same reason as the hero image above. */ #about-alt[data-aos], #about-alt [data-aos], .sections > .container > .row > [data-aos], #section1[data-aos], #section1 [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* Respect a reduced-motion preference: show everything at once. */ @media (prefers-reduced-motion: reduce) { #hero [data-aos^="zoom"] { animation: none; opacity: 1; transform: none; } }