/* 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; } .vx-footer .vx-brand__text { color: #fff; } /* 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 ~25% of their height over the dark hero (was a subtle -34px). The cards' wrap is made transparent so the hero shows behind their top edge instead of a white strip; below the hero the cards still sit on the white page. Card height ~272px, so ~68px overlaps the hero. */ .av-home .avc-channels-wrap { background: transparent; } .av-home .avc-channels { margin-top: -95px; } @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; }