/* ============================================================================ mast.css — local re-implementation of the MAST v2.4 class CONTRACT (No-Code Supply Co.). Scoped to the subset the Vectorsolv landing uses. Class names + behavior mirror the MAST skill references so this markup maps onto the real MAST Webflow project. All values come from tokens.css. Breakpoints (MAST infixes, Webflow defaults): -lg- desktop (base) -md- ≤991px -sm- ≤767px -xs- ≤478px ============================================================================ */ /* ---- Reset / base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; } body { margin: 0; font-family: var(--font-primary); font-size: var(--fs-text); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--theme-text); background: var(--theme-background); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } /* ---- Page shell ---------------------------------------------------------- */ .page-wrapper { background: var(--theme-background); color: var(--theme-text); min-height: 100vh; /* clip only horizontally — `overflow: clip` here would propagate to the viewport (this class is on ) and disable vertical scrolling. */ overflow-x: clip; } .page-main { display: block; } /* ---- Section ------------------------------------------------------------- */ .section { position: relative; padding-top: var(--section-pad-lg); padding-bottom: var(--section-pad-lg); } .section.cc-footer { padding-bottom: var(--section-pad-md); } .section.cc-flush-top { padding-top: 0; } .section.cc-flush-bottom { padding-bottom: 0; } /* ---- Container ----------------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--max-width) + (2 * var(--padding-global))); margin-inline: auto; padding-inline: var(--padding-global); } .container.cc-narrow { max-width: calc(var(--max-width-large) + (2 * var(--padding-global))); } /* ---- Grid: row / col (12-col flexbox) ------------------------------------ */ .row { display: flex; flex-wrap: wrap; gap: var(--gap-main); } .row.row-gap-md { gap: var(--gap-md); } .row.row-gap-sm { gap: var(--gap-sm); } .row.row-gap-button { gap: var(--gap-button); } .row.row-gap-0 { gap: 0; } .row.row-gutterless { gap: 0; } .row.row-align-center { align-items: center; } .row.row-align-end { align-items: flex-end; } .row.row-justify-center { justify-content: center; } .row.row-justify-end { justify-content: flex-end; } .row.row-justify-between { justify-content: space-between; } .row.row-justify-around { justify-content: space-around; } .row.row-content-center { align-content: center; } .row.row-content-between { align-content: space-between; } .col { flex: 1 1 0%; min-width: 0; } .col.col-shrink { flex: 0 0 auto; } /* width spans — computed against 12 cols accounting for the row gap */ .col-lg-1 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 1 / 12 + 0 * var(--gap-main)); } .col-lg-2 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 2 / 12 + 1 * var(--gap-main)); } .col-lg-3 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 3 / 12 + 2 * var(--gap-main)); } .col-lg-4 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 4 / 12 + 3 * var(--gap-main)); } .col-lg-5 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 5 / 12 + 4 * var(--gap-main)); } .col-lg-6 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 6 / 12 + 5 * var(--gap-main)); } .col-lg-7 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 7 / 12 + 6 * var(--gap-main)); } .col-lg-8 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 8 / 12 + 7 * var(--gap-main)); } .col-lg-9 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 9 / 12 + 8 * var(--gap-main)); } .col-lg-10 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 10 / 12 + 9 * var(--gap-main)); } .col-lg-11 { flex: 0 0 calc((100% - 11 * var(--gap-main)) * 11 / 12 + 10 * var(--gap-main)); } .col-lg-12 { flex: 0 0 100%; } /* ---- Typography ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0 0 0.5em; font-family: var(--font-primary); color: var(--theme-text); } h1, .h1, h2, .h2 { font-weight: var(--fw-medium); } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-normal); } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-regular); } h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-bold); } h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-normal); font-weight: var(--fw-semibold); } h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-normal); font-weight: var(--fw-semibold); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* Eyebrow / tagline (the `eyebrow` text class is framework — restyled via the Eyebrow/* variables; `eyebrow-wrapper`/`eyebrow-dot` are custom → styles.css) */ .eyebrow { font-size: var(--fs-tagline); font-weight: var(--fw-semibold); line-height: var(--lh-relaxed); letter-spacing: 0.02em; color: var(--theme-text); } .btn-icon { width: 1.25rem; height: 1.25rem; } /* ---- Card ---------------------------------------------------------------- */ .card { background: var(--theme-foreground); border: var(--stroke-divider) solid var(--theme-border); border-radius: var(--radius-medium); overflow: hidden; } .card-body { padding: 1.5rem; } /* ---- Accordion (native details/summary) ---------------------------------- */ .accordion-item { border-bottom: var(--stroke-divider) solid var(--theme-border); } .accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.5rem 0; background: transparent; border: 0; text-align: left; cursor: pointer; font-size: var(--fs-h6); font-weight: var(--fw-semibold); color: var(--theme-text); } .accordion-icon { flex: 0 0 auto; transition: transform .2s ease; } .accordion-item[open] .accordion-icon { transform: rotate(180deg); } .accordion-content { padding-bottom: 1.5rem; color: var(--theme-text-muted); max-width: var(--max-width-large); } .accordion-trigger::-webkit-details-marker { display: none; } /* ---- Table --------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; } .table-cell { padding: 1.25rem 1.5rem; border-bottom: var(--stroke-divider) solid var(--theme-border); text-align: left; } /* ============================================================================ UTILITIES (u- prefix) ============================================================================ */ /* Margin */ .u-m-0 { margin: 0 !important; } .u-mt-0 { margin-top: 0 !important; } .u-mb-0 { margin-bottom: 0 !important; } .u-mt-sm { margin-top: var(--gap-sm); } .u-mb-sm { margin-bottom: var(--gap-sm); } .u-mt-md { margin-top: var(--gap-md); } .u-mb-md { margin-bottom: var(--gap-md); } .u-mt-lg { margin-top: 2rem; } .u-mb-lg { margin-bottom: 2rem; } .u-mlr-auto { margin-inline: auto; } /* Padding */ .u-p-0 { padding: 0 !important; } .u-pt-0 { padding-top: 0 !important; } .u-pb-0 { padding-bottom: 0 !important; } /* Text */ .u-text-center { text-align: center; } .u-text-right { text-align: right; } .u-text-left { text-align: left; } .u-text-balance { text-wrap: balance; } .u-text-pretty { text-wrap: pretty; } .u-text-clamp-1, .u-text-clamp-2, .u-text-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .u-text-clamp-1 { -webkit-line-clamp: 1; } .u-text-clamp-2 { -webkit-line-clamp: 2; } .u-text-clamp-3 { -webkit-line-clamp: 3; } /* Display / position */ .u-d-none { display: none; } .u-d-block { display: block; } .u-d-flex { display: flex; } .u-d-inline-flex { display: inline-flex; } .u-position-relative { position: relative; } .u-position-sticky { position: sticky; } .u-z-index-1 { position: relative; z-index: 1; } /* Size / aspect */ .u-w-100 { width: 100%; } .u-h-100 { height: 100%; } .u-minh-100vh { min-height: 100vh; } .u-aspect-1x1 { aspect-ratio: 1 / 1; } .u-aspect-16x9 { aspect-ratio: 16 / 9; } .u-aspect-4x3 { aspect-ratio: 4 / 3; } /* Helpers */ .u-img-cover { width: 100%; height: 100%; object-fit: cover; } .u-link-cover::after { content: ""; position: absolute; inset: 0; } .u-overflow-hidden { overflow: hidden; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .u-border { border: var(--stroke-divider) solid var(--theme-border); } /* Background colors */ .u-bg-primary { background-color: var(--color-primary); } .u-bg-black { background-color: var(--color-black); } .u-bg-darkgray { background-color: var(--color-darkgray); } .u-bg-midgray-1 { background-color: var(--color-midgray-1); } .u-bg-midgray-2 { background-color: var(--color-midgray-2); } .u-bg-lightgray { background-color: var(--color-lightgray); } .u-bg-white { background-color: var(--color-white); } /* Text colors */ .u-text-primary { color: var(--color-primary); } .u-text-black { color: var(--color-black); } .u-text-white { color: var(--color-white); } .u-text-midgray-1 { color: var(--color-midgray-1); } /* Theme modes */ .u-mode-dark { --theme-background: var(--color-neutral-darkest); --theme-foreground: var(--color-neutral-darker); --theme-border: var(--color-neutral-dark); --theme-text: var(--color-neutral-lightest); --theme-text-muted: var(--color-neutral-light); color: var(--theme-text); background: var(--theme-background); } .u-mode-light { --theme-background: var(--color-white); --theme-foreground: var(--color-neutral-lightest); --theme-border: var(--color-neutral-lighter); --theme-text: var(--color-neutral-darkest); --theme-text-muted: var(--color-neutral); color: var(--theme-text); background: var(--theme-background); } /* ---- Stagger animation (data-animate) ------------------------------------ */ [data-animate="stagger-children"] > * { opacity: 0; transform: translateY(16px); animation: mast-fade-up .6s ease forwards; } [data-animate="stagger-children"] > *:nth-child(1) { animation-delay: .05s; } [data-animate="stagger-children"] > *:nth-child(2) { animation-delay: .12s; } [data-animate="stagger-children"] > *:nth-child(3) { animation-delay: .19s; } [data-animate="stagger-children"] > *:nth-child(4) { animation-delay: .26s; } [data-animate="stagger-children"] > *:nth-child(5) { animation-delay: .33s; } [data-animate="stagger-children"] > *:nth-child(6) { animation-delay: .40s; } @keyframes mast-fade-up { to { opacity: 1; transform: none; } } /* ============================================================================ RESPONSIVE — desktop cascades down; declare only the changes ============================================================================ */ @media (max-width: 991px) { :root { --padding-global: 2.5rem; } .section { padding-top: var(--section-pad-md); padding-bottom: var(--section-pad-md); } [class*="col-lg-"] { flex: 0 0 100%; } /* default stack on tablet */ .col-md-6 { flex: 0 0 calc((100% - var(--gap-main)) / 2); } .col-md-4 { flex: 0 0 calc((100% - 2 * var(--gap-main)) / 3); } .col-md-12 { flex: 0 0 100%; } .u-md-d-none { display: none; } .u-md-d-block { display: block; } } @media (max-width: 767px) { :root { --padding-global: 1.5rem; } .section { padding-top: var(--section-pad-sm); padding-bottom: var(--section-pad-sm); } .col-md-6, .col-md-4 { flex: 0 0 100%; } .col-sm-6 { flex: 0 0 calc((100% - var(--gap-main)) / 2); } .col-sm-12 { flex: 0 0 100%; } .u-sm-d-none { display: none; } .u-sm-d-block { display: block; } } @media (max-width: 478px) { .col-sm-6 { flex: 0 0 100%; } .u-xs-d-none { display: none; } .u-xs-d-block { display: block; } } @media (prefers-reduced-motion: reduce) { [data-animate="stagger-children"] > * { animation: none; opacity: 1; transform: none; } * { scroll-behavior: auto !important; } }