/* Supplemental styles for the Laravel CMS — block containers and the pricing table that aren't part of the compiled Angular design system (marketing.css). Uses the same tokens; scoped under .av-home. */ /* Global reset — the Angular app had this in its bundle; without it the browser's default 8px margin leaves white bands beside full-bleed dark sections (the hero). */ html, body { margin: 0; padding: 0; } body { background: #ffffff; } [x-cloak] { display: none !important; } .av-home { --_green: var(--green, #16a34a); --_ink: var(--ink, #0b1a12); --_line: var(--line, rgba(10, 30, 20, 0.1)); --_muted: var(--muted, #5b6b62); } /* The feature_grid / band / feeders blocks now emit the ORIGINAL classes (.avs-inside, .avs-band__cell, .avs-feeders) which are already styled by marketing.css — no supplemental grid rules needed here. Only the checklist block uses a class the compiled CSS doesn't define: */ .av-home .avs-checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .av-home .avs-checklist__col h4 { font-family: var(--display, inherit); margin: 0 0 10px; } @media (max-width: 900px) { .av-home .avs-checklist { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .av-home .avs-checklist { grid-template-columns: 1fr; } } /* rich_text / blog prose. */ .av-home .av-prose { max-width: 760px; margin: 0 auto; line-height: 1.7; color: var(--_ink); } .av-home .av-prose h2 { font-family: var(--display, inherit); font-size: 28px; margin: 1.6em 0 .5em; } .av-home .av-prose h3 { font-family: var(--display, inherit); font-size: 21px; margin: 1.4em 0 .4em; } .av-home .av-prose p { margin: 0 0 1em; } .av-home .av-prose ul, .av-home .av-prose ol { margin: 0 0 1em; padding-left: 1.3em; } .av-home .av-prose li { margin: .3em 0; } .av-home .av-prose a { color: var(--_green); text-decoration: underline; } .av-home .av-prose img { max-width: 100%; height: auto; border-radius: 12px; } .av-home .av-prose table { width: 100%; border-collapse: collapse; margin: 1em 0; } .av-home .av-prose td { padding: 8px 10px; border-bottom: 1px solid var(--_line); } /* Pricing table (pricing_table block). */ .av-home .avp-toggle { display: flex; width: fit-content; gap: 4px; padding: 5px; margin: 0 auto 32px; border: 1px solid var(--_line); border-radius: 999px; background: rgba(10,30,20,.03); } .av-home .avp-toggle__btn { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--_muted); padding: 9px 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s; } .av-home .avp-toggle__btn.is-on { background: #fff; color: var(--_ink); box-shadow: 0 1px 3px rgba(10,30,20,.12); } .av-home .avp-save { background: #dcfce7; color: var(--_green); font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .01em; } .av-home .avp-card__price { min-height: 44px; } .av-home .avp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .av-home .avp-card { position: relative; border: 1px solid var(--_line); border-radius: 18px; padding: 28px; background: #fff; display: flex; flex-direction: column; } .av-home .avp-card--featured { border-color: var(--_green); box-shadow: 0 20px 50px -24px rgba(22,163,74,.5); } .av-home .avp-card__badge { position: absolute; top: -12px; left: 28px; background: var(--_green); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; } .av-home .avp-card__name { font-family: var(--display, inherit); font-size: 22px; margin: 0 0 4px; } .av-home .avp-card__tag { color: var(--_muted); font-size: 14px; margin: 0 0 16px; min-height: 40px; } .av-home .avp-card__price { display: flex; align-items: baseline; gap: 6px; } .av-home .avp-card__amt { font-family: var(--display, inherit); font-size: 30px; font-weight: 700; } .av-home .avp-card__per { color: var(--_muted); font-size: 14px; } .av-home .avp-card__note { color: var(--_muted); font-size: 13px; margin: 4px 0 0; } .av-home .avp-card__list { margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 11px; } .av-home .avp-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--_ink); line-height: 1.4; } .av-home .avp-card__list li i { color: var(--_green); font-size: 18px; flex: none; margin-top: 1px; } .av-home .avp-card__cta { margin-top: auto; } /* pin the button to the bottom so all CTAs align */ .av-home .avp-matrix { overflow-x: auto; } .av-home .avp-table { width: 100%; border-collapse: collapse; min-width: 640px; } .av-home .avp-table th, .av-home .avp-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--_line); } .av-home .avp-table th:first-child, .av-home .avp-table__feat { text-align: left; } .av-home .avp-table__group td { background: rgba(10,30,20,.03); font-weight: 600; text-align: left; } .av-home .avp-yes { color: var(--_green); } .av-home .avp-no { color: #c4ccc7; } @media (max-width: 820px) { .av-home .avp-cards { grid-template-columns: 1fr; } } /* Contact channel cards (contact_form block) — light fallbacks if the compiled avc-* omits them. */ .av-home .avc-channels { display: grid; gap: 12px; } /* Nav/footer chrome links have no underline (the compiled reset only covered `.vx a`, not `.vx-nav a`). */ .vx-nav a, .vx-footer a, .vx-brand { text-decoration: none; } /* Text brand fallback (when no logo image is set) — the Angular site used a logo image, so .vx-brand__text needs explicit styling. The nav bar is dark in BOTH states (transparent over the hero, and the dark translucent solid bar on scroll), so the brand text stays light throughout. */ .vx-brand__text { font-family: var(--display, 'Bricolage Grotesque', sans-serif); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: #fff; } .vx-nav--solid .vx-brand__text { color: #fff; } /* The footer is a pale ground (#eef3f0), not the dark one this rule was written for: white on it is 1.12:1, so the wordmark was invisible on every page at every width. --ink is what the footer's own column headings use - near-black here, near-white if the footer is ever dark again - which is 16:1 and cannot drift out of step with the ground the way a literal colour did. */ .vx-footer .vx-brand__text { color: var(--ink); } /* Features page: the "Run the operation" and "Run the platform" grids pack 4 content-heavy cards into a row (avf-cards--4), which reads as very compressed on desktop. Give them 2 roomier columns instead. */ .av-home .avf-cards--4 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .av-home .avf-cards--4 { grid-template-columns: 1fr; } } /* Equal-height cards across every marketing card grid. The design system sets align-items:start on these grids, so each card is only as tall as its own content (a card with more bullets towers over its neighbour). Stretch each card to fill its row AND force every row to the tallest, so one long card lifts all its siblings to match. (Two-column text/image layouts and the FAQ/band grids keep their original align-items:start — stretching those would distort them. Blog cards already stretch.) */ .av-home .avf-cards, .av-home .ava-values, .av-home .ava-team, .av-home .avs-inside, .av-home .avs-why, .av-home .avg-reports, .av-home .av-plans, .av-home .avi-verts, .av-home .avi-trades { align-items: stretch; grid-auto-rows: 1fr; } /* Bottom-anchored links/buttons pin to the card foot so they line up on the now-equal-height cards. */ .av-home .avf-card__link, .av-home .avi-vbtn, .av-home .avi-maplink { margin-top: auto; } /* Screen-reader-only utility. The .vx pricing compare table marks each check/cross cell with a .visually-hidden "Included"/"Not included" label for accessibility; without this rule that text would render visibly next to every icon. (Angular defined it in its global stylesheet, outside _vx*.scss.) */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Industries page: the final CTA (.av-section--flush = no top padding) sits directly under the dark .avi-flow band, so the two dark blocks crowd together. Add breathing room between them (only in this pairing — other pages' flush CTAs, which follow light sections, are untouched). */ .av-home .avi-flow + .av-section--flush { padding-top: 64px; } /* Contact page: float the channel cards over the dark hero, wrap made transparent so the hero shows behind their top edge instead of a white strip. The pull was -95px, which reached past the hero's 88px bottom padding and covered the last line of the hero lead by 7px at every width. -58px keeps a clear overlap with the hero (about a fifth of the 272px card height) and leaves 30px between the text and the cards. */ .av-home .avc-channels-wrap { background: transparent; } .av-home .avc-channels { margin-top: -58px; } @media (max-width: 700px) { .av-home .avc-channels { margin-top: -48px; } } /* Contact hero uses the shared 2-column .av-hero__grid (same as the About hero): copy left, the "Where we are" card filling the right. The card is restyled for the dark hero (the base .avc-where was built for the light sidebar). */ .av-home .avc-where--hero { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); } .av-home .avc-where--hero h3 { color: #fff; } .av-home .avc-where--hero .avc-where__strong { color: #fff !important; } .av-home .avc-where--hero .avc-where__mut { color: rgba(255,255,255,.6) !important; } .av-home .avc-where--hero .avc-where__rule { background: rgba(255,255,255,.12); } .av-home .avc-where--hero i { color: #4ade80; } /* Pricing hero (About style): dark 2-column, copy + toggle left, "Every plan includes" card right. */ .av-home .avp-hero__toggle { margin-left: 0; margin-right: auto; } /* toggle sits left, not centred */ .av-home .avp-includes { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 26px 28px; } .av-home .avp-includes h3 { color: #fff; font-size: 17px; margin: 0; } .av-home .avp-includes__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; } .av-home .avp-includes__list li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15px; } .av-home .avp-includes__list li i { color: #4ade80; font-size: 18px; flex: none; } /* Solutions hub (/solutions): reuses the /industries trade-card grid (.avi-trades / .avi-trade) so the two hubs look identical, but with five cards instead of six the trailing row would sit hard left against an empty third column. Flex with the same track widths and the same breakpoints as .avi-trades (3 up, 2 up at 1040px, 1 up at 760px) keeps every card the same size and centres the last row. */ .av-home .avi-trades--center { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 20px; } .av-home .avi-trades--center > .avi-trade { flex: 0 1 calc((100% - 40px) / 3); } @media (max-width: 1040px) { .av-home .avi-trades--center > .avi-trade { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 760px) { .av-home .avi-trades--center > .avi-trade { flex-basis: 100%; } } /* Header fit. Between the phone-hide breakpoint (991px) and roughly 1200px the primary menu, the phone number and the two action links stop fitting on one line: the brand wraps to two lines and the "Start free trial" button is clipped. That squeeze predates the /solutions link — it already wrapped with seven menu items — but an eighth item makes it plainly visible. The phone number is the widest optional element and is already dropped below 991px, so drop it a little sooner and keep the brand and the text link from breaking mid-word. */ /* The header carries five top-level items (Features, Compliance, Pricing, Industries, Resources). Measured: brand + menu + actions needs ~958px of viewport at full padding, ~1108px with the phone number. The phone is the widest optional element and repeats in the footer, on /contact and in every CTA, so it is the first thing to go. */ @media (max-width: 1180px) { .vx-nav__phone { display: none; } } .vx-nav .vx-brand__text, .vx-nav__actions .vx-link { white-space: nowrap; } /* Breadcrumb: the five solution module pages back to the /solutions hub. Hub-and-spoke linking is what marks those five out as a set rather than five unrelated pages. Two hero systems carry it - the dark .av-hero (accounting, HR, property) and the light centred .vx-phero (inventory, assets) - so colour and alignment are set per hero rather than with a modifier class in the markup. Type comes from the site's own .av-mono utility, so the crumb matches the eyebrow it sits above. */ .av-home .avx-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; padding: 0; list-style: none; } .av-home .avx-crumb li { display: inline-flex; align-items: center; gap: 9px; } .av-home .avx-crumb li + li::before { content: "\203A"; opacity: .5; } .av-home .avx-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s var(--ease, ease); } .av-home .avx-crumb a:hover { border-bottom-color: currentColor; } .av-home .avx-crumb [aria-current="page"] { opacity: .62; } /* Dark hero. .av-hero__copy is a 26px-gap flex column - too much air under one line of 12px type - so pull the badge underneath back up. */ .av-home .av-hero .avx-crumb { color: hsla(0, 0%, 100%, .74); margin-bottom: -14px; } /* Light centred hero. */ .av-home .vx-phero .avx-crumb { color: var(--muted); margin-bottom: 16px; } .av-home .vx-phero .avx-crumb ol { justify-content: center; } /* Header dropdown. Any primary nav item with children renders as a panel; nav_items.icon and nav_items.description feed the glyph and the supporting line. The nav bar is dark in both themes, so the panel is dark too and deliberately does not use the light-mode tokens. */ .vx-nav__group { position: relative; display: inline-flex; align-items: center; } .vx-nav__menu .vx-nav__toggle { display: inline-flex; align-items: center; gap: 5px; } .vx-nav__menu .vx-nav__toggle i { font-size: 15px; opacity: .55; transition: transform .18s var(--ease, ease); } .vx-nav__group:hover .vx-nav__toggle i, .vx-nav__group:focus-within .vx-nav__toggle i { transform: rotate(180deg); } .vx-nav__drop { position: absolute; top: calc(100% + 12px); left: 0; z-index: 10; width: 340px; padding: 8px; background: #121915; border: 1px solid hsla(0, 0%, 100%, .12); border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75), 0 4px 12px rgba(0, 0, 0, .35); } /* Bridges the 12px gap so the panel does not close as the pointer travels down to it. */ .vx-nav__drop::before { content: ""; position: absolute; inset: -14px 0 100% 0; } .vx-nav .vx-nav__menu .vx-nav__dropitem { display: flex; align-items: flex-start; gap: 11px; padding: 10px 11px; border-radius: 11px; color: #cfe0d6; background: none; } .vx-nav .vx-nav__menu .vx-nav__dropitem:hover { background: hsla(0, 0%, 100%, .06); color: #fff; } .vx-nav__dropicon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(34, 197, 94, .13); color: #4ade80; font-size: 17px; } .vx-nav__droptext { display: grid; gap: 2px; min-width: 0; } .vx-nav__droptext strong { font-size: 14px; font-weight: 600; line-height: 1.3; } .vx-nav__droptext span { font-size: 12.5px; line-height: 1.4; color: #8ea89a; } .vx-nav .vx-nav__menu .vx-nav__dropall { display: flex; align-items: center; gap: 7px; margin: 5px 0 0; padding: 11px; border-top: 1px solid hsla(0, 0%, 100%, .09); border-radius: 0 0 11px 11px; font-size: 13px; font-weight: 600; color: #4ade80; background: none; } .vx-nav .vx-nav__menu .vx-nav__dropall:hover { background: hsla(0, 0%, 100%, .06); } /* Mobile drawer: children as an indented list under their parent. */ .vx-drawer__sub { display: flex; flex-direction: column; margin: -2px 0 6px; padding-left: 15px; border-left: 1px solid hsla(0, 0%, 100%, .13); } .vx-drawer__sub a { font-size: 14px; opacity: .82; } /* Focus ring for the header. The dropdown opens on keyboard focus, so the focused item has to be visible - marketing.css defines no :focus-visible rules at all. Scoped to the nav; the rest of the site still needs the same treatment. */ /* The header is sticky, so an in-page anchor lands with its heading tucked underneath it. iOS Safari is the worst case because the heading ends up completely hidden. One rule fixes every anchor on the site. */ html { scroll-padding-top: 80px; } /* The nav rule below covers the header only; everything else on the page - FAQ accordions, buttons, in-content links - had no visible focus state at all, because marketing.css defines none. */ .av-home a:focus-visible, .av-home button:focus-visible, .av-home summary:focus-visible, .vx-main a:focus-visible, .vx-main button:focus-visible, .vx-main summary:focus-visible, .vx-footer a:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 8px; } /* summary carries a default marker in some browsers and list-style in others; the FAQ blocks style their own chevron, so suppress the native one and keep the hit target obvious. */ .av-home summary:focus-visible, .vx-main summary:focus-visible { outline-offset: 4px; } .vx-nav a:focus-visible, .vx-nav button:focus-visible { outline: 2px solid #4ade80; outline-offset: 2px; border-radius: 8px; } /* Update note at the top of a blog post. The article body has no callout of its own, and a correction has to read as editorial rather than as more body copy. */ .vx-article__body .vx-article__note { margin: 0 0 26px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--em); border-radius: var(--r-btn, 12px); background: rgba(34, 197, 94, .06); font-size: 15.5px; line-height: 1.6; } .vx-article__body .vx-article__note strong { color: var(--ink); } /* Header collapse point. The compiled design system switches at 900px, which is a shade too early now that three of the five items carry a dropdown chevron. 980px is the measured fit; below it the drawer is the honest answer rather than a clipped menu. The drawer is styled at every width already. */ @media (max-width: 980px) { .vx-nav__menu, .vx-nav__actions { display: none; } .vx-burger { display: inline-flex; } } /* Features page rhythm. Three consecutive grids of identical .avf-card gave eleven modules the same visual weight, so nothing read as more important than anything else - while the section headings claim a hierarchy (a ledger everything reports into, work that posts at real cost, controls around it). Each section now gets a texture matching what it is, decreasing in weight down the page. */ /* 1. Foundation: the ledger card leads its section and runs full width, bullets in two columns. */ .av-home .avf-card--lead { grid-column: 1 / -1; } .av-home .avf-card--lead .avf-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; } @media (max-width: 760px) { .av-home .avf-card--lead .avf-ticks { grid-template-columns: 1fr; } } /* 2. Feeders: the operational modules lose their card chrome and become columns above a rail naming what they all post into. Same information, but it reads as a flow rather than four peers. */ .av-home .avf-feeders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .av-home .avf-feed { display: flex; flex-direction: column; gap: 11px; } .av-home .avf-feed__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(22,163,74,.09); color: var(--em-deep); font-size: 20px; } .av-home .avf-feed h3 { font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; margin: 0; } .av-home .avf-feed__blurb { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0; } .av-home .avf-feed ul { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .av-home .avf-feed li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .av-home .avf-feed li i { color: var(--em-deep); font-size: 15px; flex: none; margin-top: 2px; } .av-home .avf-rail { position: relative; margin-top: 40px; padding-top: 26px; text-align: center; border-top: 1px solid var(--line); } .av-home .avf-rail::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 34%; height: 2px; background: var(--em); border-radius: 2px; } .av-home .avf-rail__label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); } .av-home .avf-rail__label i { color: var(--em-deep); font-size: 18px; } .av-home .avf-rail__note { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); } /* 3. Controls: governance is supporting detail, so it gets the quietest treatment on the page - hairline rows, no card, no tick bullets. */ .av-home .avf-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 52px; } .av-home .avf-control { padding: 22px 0; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: flex-start; } .av-home .avf-control__icon { color: var(--em-deep); font-size: 20px; flex: none; margin-top: 2px; } .av-home .avf-control h3 { font-family: var(--display); font-size: 17px; margin: 0 0 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .av-home .avf-control p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); } .av-home .avf-control__caps { font-size: 13.5px; line-height: 1.6; color: var(--muted); } .av-home .avf-control__link { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--em-deep); } @media (max-width: 980px) { .av-home .avf-feeders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; } .av-home .avf-controls { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 560px) { .av-home .avf-feeders { grid-template-columns: 1fr; } } /* Industries mega panel: category tabs on the left, that category's sub-categories on the right. Same dark surface as the simple dropdown, just wider and split in two. */ /* The mega panel is wider than the gap between its trigger and the right edge of the viewport, so it anchors to the header container rather than to its own tab. The group goes static and .vx-nav__inner becomes the positioning context. */ .vx-nav__inner { position: relative; } .vx-nav__group--mega { position: static; } .vx-nav__drop--mega { left: 0; right: auto; width: 760px; max-width: 100%; padding: 0; overflow: hidden; } .vx-mega { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 340px; } .vx-mega__tabs { display: flex; flex-direction: column; padding: 10px; gap: 2px; background: hsla(0, 0%, 100%, .03); border-right: 1px solid hsla(0, 0%, 100%, .09); } .vx-nav .vx-nav__menu .vx-mega__tab { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: 13.8px; font-weight: 500; color: #cfe0d6; background: none; } .vx-nav .vx-nav__menu .vx-mega__tab i:first-child { font-size: 17px; color: #7fcfa0; flex: none; } .vx-mega__tab span { flex: 1; min-width: 0; } .vx-mega__chev { font-size: 15px; opacity: 0; transition: opacity .15s; } .vx-nav .vx-nav__menu .vx-mega__tab.is-active { background: hsla(0, 0%, 100%, .08); color: #fff; } .vx-mega__tab.is-active .vx-mega__chev { opacity: .55; } .vx-mega__panel { padding: 20px 24px 22px; } .vx-nav .vx-nav__menu .vx-mega__panehead { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-family: var(--display, inherit); font-size: 17px; font-weight: 700; color: #fff; background: none; } .vx-nav .vx-nav__menu .vx-mega__panehead i { font-size: 16px; color: #4ade80; } .vx-mega__panedesc { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #8ea89a; } .vx-mega__subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid hsla(0, 0%, 100%, .09); } .vx-nav .vx-nav__menu .vx-mega__subs a { display: block; padding: 7px 9px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; color: #cfe0d6; background: none; } .vx-nav .vx-nav__menu .vx-mega__subs a:hover { background: hsla(0, 0%, 100%, .06); color: #fff; } /* Mobile drawer: the third level hides behind a per-category toggle. */ .vx-drawer__sub--deep { margin: 0 0 4px; padding-left: 13px; border-left: 1px solid hsla(0, 0%, 100%, .1); } .vx-drawer__more { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: #8ea89a; cursor: pointer; } .vx-drawer__sub--deep a { font-size: 13.5px; opacity: .78; } @media (max-width: 1100px) { .vx-nav__drop--mega { width: 640px; } .vx-mega { grid-template-columns: 216px minmax(0, 1fr); } } /* Comparison table for the retail/POS page. marketing.css only styles tables inside .vx-article__body (the blog) and the .vx pricing matrix, so an av-home page had no table style at all. Scoped to .avr-cmp so it can't reach the blog or the pricing page. Wrapped in .avr-cmp__scroll because a 3-column comparison will not fit a phone — the table scrolls inside its own box rather than pushing the page sideways. */ .av-home .avr-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r, 16px); margin-top: 28px; } .av-home .avr-cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; } .av-home .avr-cmp th, .av-home .avr-cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .av-home .avr-cmp thead th { background: var(--tint); font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--ink); } .av-home .avr-cmp tbody tr:last-child td { border-bottom: 0; } .av-home .avr-cmp tbody td:first-child { font-weight: 600; color: var(--ink); } .av-home .avr-cmp .is-no { color: var(--muted); } .av-home .avr-cmp .is-yes { color: var(--green-deep); font-weight: 600; } /* Pricing callout on an av-home page (the /pricing table itself lives in the .vx namespace). */ .av-home .avr-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; border: 1.5px solid var(--green); background: #f0fdf4; border-radius: 22px; padding: 30px; margin-top: 26px; } .av-home .avr-price__amt { font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--green-deep); line-height: 1.05; } .av-home .avr-price__per { font-size: 13.5px; color: var(--muted); margin-top: 4px; } .av-home .avr-price__side { text-align: right; } @media (max-width: 760px) { .av-home .avr-price { grid-template-columns: 1fr; } .av-home .avr-price__side { text-align: left; } } /* Chip row of related links. */ .av-home .avr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .av-home .avr-chips a { font-size: 14px; border: 1px solid var(--line); padding: 9px 15px; border-radius: 99px; color: var(--body); } .av-home .avr-chips a:hover { border-color: var(--green); color: var(--green-deep); } /* "Not listed?" tile at the end of a trade grid — a dashed, tinted card so it reads as an invitation rather than as a twelfth trade. .avi-trade carries the layout; this only changes the surface. */ .av-home .avi-trade--ghost { background: var(--tint); border-style: dashed; } /* ── Floating contact dock ─────────────────────────────────────────────────────────────────────── WhatsApp + "talk to us" panel, bottom-right on every public page (partials/chat-dock.blade.php). z-index 90 keeps it under .vx-nav (100), so the mobile nav drawer covers it instead of competing. Positioned with env(safe-area-inset-*) so it clears the home indicator on iOS. */ .vx-dock { position: fixed; z-index: 90; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .vx-dock__btn { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 25px; color: #fff; text-decoration: none; box-shadow: 0 8px 24px -8px rgba(6, 24, 15, .45), 0 2px 6px rgba(6, 24, 15, .18); transition: transform .18s var(--ease, ease), box-shadow .18s ease; } .vx-dock__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(6, 24, 15, .5); } .vx-dock__btn:active { transform: translateY(0); } .vx-dock__btn--chat { background: var(--green-deep, #15803d); } .vx-dock__btn--chat:hover { background: var(--green, #16a34a); } .vx-dock__panel { width: min(320px, calc(100vw - 36px)); background: #fff; color: var(--ink, #0b1a12); border: 1px solid var(--line, rgba(6, 24, 15, .12)); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -22px rgba(6, 24, 15, .45); } .vx-dock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 16px; background: var(--tint, #f4f8f6); border-bottom: 1px solid var(--line-soft, rgba(6, 24, 15, .09)); } .vx-dock__head strong { display: block; font-family: var(--display, inherit); font-size: 15.5px; } .vx-dock__head span { display: block; font-size: 12.5px; color: var(--muted, #6b7a72); margin-top: 2px; } .vx-dock__close { border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: var(--muted, #6b7a72); padding: 2px; border-radius: 8px; } .vx-dock__close:hover { color: var(--ink, #0b1a12); } .vx-dock__links { display: flex; flex-direction: column; padding: 6px; } .vx-dock__links a { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; text-decoration: none; color: inherit; } .vx-dock__links a:hover { background: var(--tint, #f4f8f6); } .vx-dock__links b { display: block; font-size: 14.5px; font-weight: 600; } .vx-dock__links em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted, #6b7a72); margin-top: 1px; } .vx-dock__ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #dcfce7; color: var(--green-deep, #15803d); font-size: 18px; } .vx-dock__ic--wa { background: #dcfce7; color: #128c47; } @media (max-width: 560px) { .vx-dock { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .vx-dock__btn { width: 48px; height: 48px; font-size: 23px; } } @media (prefers-reduced-motion: reduce) { .vx-dock__btn { transition: none; } .vx-dock__btn:hover { transform: none; } } /* A fixed control is noise on paper. */ @media print { .vx-dock { display: none !important; } } /* ── Pricing: plan cards merged into the comparison table as a sticky head ─────────────────────── The plan cards used to be a separate grid above the matrix. They are now the table's , so there is one table on the page and the price + CTA stay pinned while the feature rows scroll. Why the wrapper's overflow moves: `position: sticky` is confined to the nearest ancestor with a scrolling box, and `.vx-tablewrap` sets `overflow-x: auto`, which makes the browser compute `overflow-y: auto` too. Sticky would then pin to a box that never scrolls vertically — i.e. do nothing. So the sticky variant drops overflow and carries the frame on the table instead, and the horizontal-scroll fallback is kept only for the narrow band where the 720px table cannot fit. */ .vx .vx-tablewrap--sticky { overflow: visible; border: 0; border-radius: 0; box-shadow: none; background: none; } .vx .vx-table--merged { border-collapse: separate; border-spacing: 0; } /* Sticky head. 78px clears the fixed site header; the row sits above the body cells but below the nav (z-index 100) and below the contact dock's panel. */ .vx .vx-table--merged thead th { position: sticky; top: 78px; z-index: 5; background: var(--bg-soft); vertical-align: top; padding: 22px 20px 24px; text-align: center; border-bottom: 1px solid var(--line); } /* The featured column keeps the same green wash the body cells use, but a sticky head must be opaque or the rows scroll through it — so the tint is layered over the theme background rather than being a hardcoded colour. Hardcoding a dark hex here dropped the text contrast to 1.09:1 in the light theme, which is invisible. */ .vx .vx-table--merged thead th.is-hot { background: linear-gradient(rgba(34, 197, 94, .06), rgba(34, 197, 94, .06)), var(--bg-soft); } /* Rounded top corners on the pinned row, so it reads as a card strip rather than a raw table edge. */ .vx .vx-table--merged thead th:first-child { border-radius: 16px 0 0 0; } .vx .vx-table--merged thead th:last-child { border-radius: 0 16px 0 0; } .vx-ptop__name { display: block; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); } .vx-ptop__price { display: block; font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--ink); margin-top: 10px; line-height: 1.1; } .vx-ptop__price small { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 3px; } .vx-ptop__note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; } .vx-ptop__desc { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 8px; min-height: 38px; } .vx .vx-table--merged thead th .vx-btn { display: inline-flex; margin-top: 14px; } /* "Best seller" ribbon, matching the home page cards: a pill sitting on the column's top edge rather than a chip in the flow. The sticky head parks at 78px and the nav is 66px, so the 12px gap between them is exactly where this lands — it stays visible when the head is pinned. Taking it out of the flow also aligns the featured column's name and price with its neighbours; the in-flow chip had been pushing them about 30px lower than the columns either side. */ .vx .vx-table--merged thead th .vx-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--green-solid, #15803d); padding: 5px 12px; border-radius: 999px; } /* Corner cell: label, the monthly/annual toggle and the VAT note. */ .vx-ptop__corner { text-align: left !important; } .vx-ptop__vat { display: block; font-size: 12.5px; color: var(--muted); margin-top: 10px; } .vx .vx-toggle--sm { margin-top: 12px; padding: 4px; } .vx .vx-toggle--sm button { padding: 7px 14px; font-size: 13px; } /* Group headings pin directly under the plan row, so the section you are reading is always named. --vx-head-h is written by the block's script and already includes the 78px site-header offset; the fallback only matters for the frame before it runs. Each heading paints over the previous one as it arrives, which is what makes them read as a single swapping section label. */ .vx .vx-table--merged .vx-table__group td { position: sticky; top: var(--vx-head-h, 334px); z-index: 3; background: var(--panel-2, #0e1512); border-top: 1px solid var(--line-2); padding-top: 13px; padding-bottom: 13px; } .vx .vx-table--merged .vx-table__group strong { font-family: var(--display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink); } /* Tracking one feature across four columns over seventy-odd rows needs a guide for the eye. A background-image tint layers over the featured column's background-colour instead of replacing it, so the highlighted plan stays highlighted while hovered. */ @media (hover: hover) { .vx .vx-table--merged tbody tr:not(.vx-table__group):hover > th, .vx .vx-table--merged tbody tr:not(.vx-table__group):hover > td { background-image: linear-gradient(rgba(34, 197, 94, .07), rgba(34, 197, 94, .07)); } } /* A little tighter than the 16px default: at 72 rows the saving is most of a screen. */ .vx .vx-table--merged tbody td, .vx .vx-table--merged tbody th { padding-top: 13px; padding-bottom: 13px; } @media (max-width: 800px) { /* Below this the 720px table stops fitting. Horizontal scroll wins over sticky here; under 720px the table is hidden entirely and the per-plan mobile cards take over. */ .vx .vx-tablewrap--sticky { overflow-x: auto; } .vx .vx-table--merged thead th { position: static; } /* The head is no longer pinned here, so a group heading pinned under where it used to be would float over the rows at a stale offset. */ .vx .vx-table--merged .vx-table__group td { position: static; } } /* Mobile comparison cards now carry the price, tagline and CTA the desktop head shows. */ .vx-cmob__desc { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 6px; } .vx .vx-cmob__cta { display: inline-flex; margin-top: 14px; } .vx-cmob__price small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; } /* Keeps the rule and feature list aligned across a row of plan cards when the trial button is off on some of them but not others — the card is a flex column, so an empty box of the button's height restores the shared baseline. */ .av-home .av-pcard__ctaspace { height: 50px; flex: none; } /* Feature tooltip. The `title` attribute carries the text, so this is only the affordance: a small muted glyph that hints there is more to read. It is also on aria-label, so a screen reader gets the explanation without needing hover. */ .vx .vx-ftip { font-size: 14px; margin-left: 6px; color: var(--muted); cursor: help; vertical-align: -1px; transition: color .15s var(--ease, ease); } .vx .vx-ftip:hover, .vx .vx-ftip:focus { color: var(--em, #22c55e); } /* Second line inside a cell — an allowance's overage price, e.g. "AED 8.06 /month per extra". Smaller and muted so the allowance itself stays the thing you read first. */ .vx .vx-cellnote { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; line-height: 1.35; color: var(--muted); white-space: normal; } /* The mobile row is a flex pair with the value on the right; the note has to follow it over. */ .vx .vx-cmob__row .vx-cellnote { text-align: right; } /* Value + note are two lines, so the row can no longer centre on a single one. */ .vx .vx-cmob__row:has(.vx-cellnote) { align-items: flex-start; } /* The home-page ribbon and the pricing table's are now one badge in two places, so they share a colour. Matched on the darker green rather than the lighter one the cards used: white on #16a34a is 3.30:1, under the 4.5:1 AA needs at 11px bold, while #166534 is 7.13:1. */ /* The one green that carries white text. #16a34a — the brand green — is 3.30:1 against white, under the 4.5:1 AA needs at the sizes these components use. #15803d is already in the palette (it is the hover green) and reaches 5.02:1. The lighter green stays as it is for icons, rules and glows, where nothing sits on top of it. */ :root { --green-solid: #15803d; --green-solid-hover: #14532d; } .av-home .av-pcard__flag { background: var(--green-solid); font-family: var(--display); letter-spacing: .04em; } /* The mobile comparison cards carry the same ribbon as the home cards and the desktop table head — a card needs a positioned ancestor for it, which .vx-cmob did not have. */ .vx .vx-cmob { position: relative; } .vx .vx-cmob .vx-tag { position: absolute; top: -11px; left: 24px; margin: 0; white-space: nowrap; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--green-solid, #15803d); padding: 5px 12px; border-radius: 999px; } /* marketing.css carries '.vx a { color: inherit }' at specificity (0,1,1), which outranks '.vx-btn--primary { color: #06130b }' at (0,1,0). Every button that is a link inside .vx was therefore taking its section's text colour instead of its own. On the closing CTA that painted #4A5A51 onto the green button — 2.22:1, against the 4.5:1 AA needs — and the same colour onto the outline button over a dark panel, where it was near enough invisible. Written with two classes so it beats EVERY container rule of that shape, not just '.vx a' — there are 15 of them ('.vx-drawer a', '.vx-nav__menu a', '.vx-cta__contact a' and so on), and the mobile drawer's button was being clobbered the same way at 3.00:1. */ a.vx-btn.vx-btn--primary { color: #06130b; } a.vx-btn.vx-btn--outline { color: var(--ink); } a.av-btn.av-btn--primary { color: #fff; } a.av-btn.av-btn--outline-d { color: #fff; } a.av-btn.av-btn--outline { color: var(--ink); } /* Every remaining surface that puts white text on the brand green, moved onto --green-solid. Found by scanning the stylesheets for rules pairing a white colour with a var(--green)/#16a34a background — fixing them one at a time as they were spotted would have left the next one to be found later. */ .av-home .av-btn--primary, .av-home .av-flag__tag, .av-home .av-ai__q, .av-home .av-ai__input i, .av-home .av-step__n, .av-home .avg-rail__node span, .av-home .avg-step__n.is-hot, .av-home .avg-pill--posted, .av-home .avg-new, .av-home .avs-badge__flag, .av-home .avi-vtag, .av-home .avc-step__n, .vx-social a:hover, /* These four set the green on a panel and the white on its children, so a scan for rules pairing the two in one place missed them; the rendered-page audit is what turned them up. */ .av-home .avf-sor__ledger, .av-home .avi-sor__core, .av-home .avi-flow__outcome, .av-home .avc-chan--wa { background: var(--green-solid, #15803d); } /* Keeps its gradient, both stops deepened. */ .av-home .av-proof__one { background: linear-gradient(135deg, var(--green-solid, #15803d) 0%, var(--green-solid-hover, #14532d) 100%); } /* The button's hover used to be --green-deep, which is now its resting colour — so the hover has to step down again or pressing it gives no feedback. */ .av-home .av-btn--primary:hover { background: var(--green-solid-hover, #14532d); } .av-home button.av-btn--primary { background: var(--green-solid, #15803d) !important; } .av-home button.av-btn--primary:hover { background: var(--green-solid-hover, #14532d) !important; } /* '.av-home .avc-step span' (0,2,1) outranks '.avc-step__n { color:#fff }' (0,2,0), so these step numerals have always rendered grey on green — 2.22:1 before this pass, and worse once the green deepened. Restored at matching specificity. */ .av-home .avc-step span.avc-step__n { color: #fff; } /* The --dark variant is deliberately dark-filled; the blanket green rule above must not claim it. */ .av-home .avc-step__n--dark { background: var(--ink); } /* Body copy on the green panels was 85–88% white, which composites to 4.09–4.27:1 — improved by the deeper green but still short of 4.5:1. Opaque white on --green-solid is 5.02:1. */ .av-home .avf-sor__ledger span, .av-home .avi-sor__core span, .av-home .avc-chan--wa p { color: #fff; } /* The "Fastest" chip is a translucent white pill, so white-on-white-over-green gave 3.37:1. Dark ink on the pale chip reads 5.67:1 and keeps the light-chip look. */ .av-home .avc-chan__tag { color: #06130b; } /* The VAT line sits tighter under the saving line than that line does under the toggle — they are one block of small print, not two separate notes. It hides with the rest of the corner copy when the head condenses, so the pinned row stays compact. */ .vx-ptop__vat--tax { margin-top: 3px; } /* Header above the mobile comparison cards. Carries the monthly/annual toggle, which otherwise only exists in the desktop table's corner cell — hidden below 720px, leaving a phone no way to reach the annual prices — plus the small print that belongs beside a price. */ .vx .vx-cmob-head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .vx .vx-cmob-head .vx-toggle { margin-bottom: 8px; } .vx .vx-cmob-head .vx-ptop__vat { margin-top: 0; } /* The brand green as a FOREGROUND is 3.30:1 on white — fine for an icon (needs 3:1), short of the 4.5:1 that text needs, and these selectors cover both. --green-solid is the same hue at 5.02:1, and is already what the buttons and badges use, so this also stops green text and green buttons being two different greens. Generated from a scan of marketing.css rather than typed, so none are missed. */ .av-home .av-eyebrow, .av-home .av-link:hover, .av-home .av-kpi__delta, .av-home .av-chip-float i, .av-home .av-proof__arrow, .av-home .av-mini__row--total b, .av-home .av-module>i, .av-home .av-ai__ic, .av-home .av-quote__stats strong, .av-home .av-pcard__list li i, .av-home .av-qa summary i, .vx-footer__contact i, .av-home .avg-step__n, .av-home .avg-figs b.is-green, .av-home .is-green, .av-home .avf-ticks i, .av-home .avf-included__col li i, .av-home .avs-tb__row--total .avs-tb__r, .av-home .avs-replaces__arrow, .av-home .avs-ticks i, .av-home .avs-mini__ok i, .av-home .avs-mini__big, .av-home .avs-switch__list i, .av-home .avs-import__row i, .av-home .avs-feeder>i, .av-home .avs-qa .avs-qa__minus, .av-home .avs-prk__v--green, .av-home .avs-prd i, .av-home .avi-checks i, .av-home .avi-vticks i, .av-home .avre-pos, .av-home .avb-empty i, .av-home .avb-cat, .av-home .avc-req, .av-home .avc-where__row i { color: var(--green-solid, #15803d); } /* .av-hero is a near-black hero (#08150E), but the note inside it inherits the light theme's muted grey — #4A5A51 on that ground is 2.56:1, effectively unreadable. This is the dateline under the e-invoicing hero, among others. Light muted on the dark hero reads 11.6:1. */ .av-home .av-hero .av-hero__note { color: #c3cdc7; } /* The blanket darkening above is right on light grounds and wrong on dark ones: an eyebrow sitting on the #08150E hero went from 5.72:1 to 3.73:1 because of it. The --on-dark variant keeps the lighter green, which is what it was built for. */ .av-home .av-eyebrow--on-dark { color: #16a34a; } /* Body links inside article text resolve --em-2 to the brand green in the light theme, so they were 3.30:1 — missed by the scan above because that rule names --em-2 rather than --green. */ .vx .vx-article__body a, .vx .rich-text a, .vx .av-link { color: var(--green-solid, #15803d); } /* "Replaced tool" chips are meant to read as faded, but 2.69–2.94:1 is past faded into unreadable. */ .av-home .avs-chip, .av-home .av-strike { color: #5f6d66; } /* --muted scrapes 4.51:1 on pure white and drops below the 4.5 line on every tinted panel the site actually uses it on (4.38 on #fafcfb, 4.21 on #f4f8f6). A shade darker clears it everywhere — 5.05 / 4.90 / 4.72 — without changing what "muted" looks like. */ .av-home { --muted: #64726a; } /* These 14 rules hardcode #6b7a72 rather than reading --muted, so the token change above never reached them. On the tinted panels they sit on that is 4.21-4.38:1, just under the line; a shade darker clears it. Generated from a scan, not typed. */ .vx-footer__bar, .av-home .avs-tb__row--head .av-mono, .av-home .avs-replaces__label, .av-home .avs-mini__cap, .av-home .avs-import__cap, .av-home .avs-import__n, .av-home .avs-qa .avs-qa__plus, .av-home .avs-prk__tile .av-mono, .av-home .avs-prt__row--head .av-mono, .av-home .avs-att__legend em, .av-home .avs-appr__step span, .av-home .avs-mini__mut, .av-home .avre-chq__head .av-mono, .av-home .avre-chq__st--held { color: #64726a; } /* The other half of the on-dark problem: darkening the brand green helped every light ground and hurt the two variants built for dark ones. The link matches the eyebrow fix. */ .av-home .av-link--on-dark { color: #16a34a; } /* The prose block is bare admin HTML with no classes on its links, so the earlier link fix could not reach them - 3.30:1 on white. */ .vx .av-prose a { color: var(--green-solid, #15803d); } /* An eyebrow on the pale green chip is 4.32:1 at --green-solid; one step deeper reads 6.13:1. */ .vx .vx-eyebrow { color: #166534; } /* The form is a flex column with a gap; a normal wrapper round the fields would collapse them into one flex item and lose the spacing. display:contents keeps them as direct children of that layout. It is a class rather than an inline style on purpose — Alpine's x-show removes the inline display property when it shows an element, which would drop the value and leave a plain block. */ .avb-news__fields { display: contents; } /* Field-level validation text on the contact form. Smaller than the .avc-err block, which stays for the whole-form message; #b91c1c on white is 6.4:1. */ .avc-fielderr { font-size: 13px; line-height: 1.4; color: #b91c1c; } /* The hero sits behind the fixed nav on purpose - margin-top:-76px lets the dark background run up under a transparent header - and its padding-top is what pushes the content back into view. At =<900px that padding drops to 132px while the header is still 66px tall, so the first line of every hero (the eyebrow, or the breadcrumb on solution pages) rendered 10px UNDER the header: on /about the word "About us" was cut in half by the logo row. 170px restores the clearance desktop has. */ @media (max-width: 900px) { .av-home .av-hero { padding-top: 170px; } } /* The mobile menu lives inside .vx-nav, which is position:fixed, and had no height limit: with every nav group listed it stands 1593px tall in an 812px viewport, and because a fixed ancestor does not scroll with the page, everything past the fold was simply unreachable - 21 of 40 items, including Blog, FAQ, About, Contact, Log in and Start free trial. Making the drawer its own scroll container is the fix. dvh rather than vh so the mobile browser's collapsing address bar is accounted for, and overscroll-behavior stops a flick at the end of the list scrolling the page underneath. */ @media (max-width: 900px) { .vx-drawer { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } } /* iOS Safari zooms the page in whenever a focused field's text is under 16px, and then leaves the layout scaled and scrolled sideways. Every field on the site is 14.5-15px, so the contact form, the blog search and the newsletter box all did it. 16px only at mobile widths - the desktop sizing is a deliberate part of the design and is not affected by this behaviour. The viewport meta stays free of maximum-scale: stopping the zoom by banning zoom would take pinch-zoom away from everyone. */ @media (max-width: 900px) { .vx-field input, .vx-field textarea, .av-home .avc-field input, .av-home .avc-field textarea, .av-home .avb-news__input, .av-home .avb-search input { font-size: 16px; } } /* Touch targets. Everything below is mobile-only: on a pointer device a 22px link is a fine target, and growing all of them would stretch the layout for no gain. Two techniques, chosen per case: - a real min-height where the extra height costs nothing; - an invisible ::after for the two controls in the header, because making those 44px tall would grow the header itself, and the hero's clearance and the drawer's max-height are both measured against that height. .vx-nav is overflow:visible, so the extended area is not clipped, and each one's nearest neighbour is at the opposite end of the bar, so it cannot swallow another tap. */ @media (max-width: 900px) { /* Standalone links that read as buttons - 22-24px each. */ .av-ind__link, .av-link, .ava-member__link, .avc-selfserve__links a, .vx-footer__contact a, .av-final__contact a { min-height: 44px; align-items: center; } /* Footer navigation: 21 links in two columns, 29px each. 40px rather than 44px - they are already contiguous, so a near miss lands on a neighbouring link rather than on nothing, and 44 would add another 80px of footer to scroll past on every page. */ .vx-footer__cols a { display: flex; align-items: center; min-height: 40px; } /* Segmented month/year control on the pricing page, and the blog category chips. */ .vx-toggle button { min-height: 44px; } .avb-catchip { min-height: 44px; } /* The wordmark is 108x22 and the burger 37x37; both keep their size and gain a 44px hit area. */ .vx-nav .vx-brand, .vx-burger { position: relative; } .vx-nav .vx-brand::after, .vx-burger::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 44px; transform: translateY(-50%); } .vx-burger::after { left: -4px; right: -4px; } /* The "Show 6 types" reveals inside the mobile menu are 25px of small green text. The drawer scrolls now, so the extra height they add costs nothing. */ .vx-drawer__more { min-height: 44px; } /* The footer wordmark has room to grow properly. */ .vx-footer .vx-brand--light { min-height: 44px; align-items: center; } }