/* ============================================================= Avenir Technology — Website Shared stylesheet. Builds on the design-system tokens in assets/colors_and_type.css. ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg1); /* accent — tweakable (purple default; gold / sage alternates) */ --accent: var(--av-royal-purple); --accent-hover: var(--av-purple-700); --accent-press: var(--av-purple-800); --accent-ink: #ffffff; --accent-wash: var(--av-purple-100); } img { max-width: 100%; display: block; } /* ---- accent variants (set on ) ---- */ html[data-accent="gold"] body { --accent: var(--av-gold-600); --accent-hover: var(--av-gold-700); --accent-press: var(--av-gold-800); --accent-ink: #ffffff; --accent-wash: var(--av-gold-100); } html[data-accent="sage"] body { --accent: var(--av-blue-700); --accent-hover: var(--av-blue-800); --accent-press: var(--av-blue-900); --accent-ink: #ffffff; --accent-wash: var(--av-blue-100); } /* ============================ LAYOUT ============================ */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } .section { padding: 96px 0; } .section--sm { padding: 64px 0; } .section--tint { background: var(--av-purple-50); } .section--mint { background: var(--av-blue-100); } .section--paper { background: var(--av-paper); } .section--line { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .lead { max-width: 60ch; } .measure { max-width: 64ch; } .center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } /* gold hairline divider motif */ .rule-gold { width: 56px; height: 2px; background: var(--av-gold-600); border: 0; margin: 0 0 24px; } .rule-gold--center { margin-left: auto; margin-right: auto; } /* ============================ BUTTONS ============================ */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 14px; letter-spacing: 0.02em; line-height: 1; padding: 14px 24px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease); } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); box-shadow: var(--shadow-md); } .btn--primary:active { background: var(--accent-press); transform: translateY(1px); } .btn--sage { background: var(--av-cambridge-blue); color: var(--av-purple-900); } .btn--sage:hover { background: var(--av-blue-400); color: var(--av-purple-900); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--fg1); border-color: var(--border-strong); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); } .btn--ghost-light:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); color:#fff; } .btn--lg { padding: 17px 30px; font-size: 15px; } .btn--block { display: flex; width: 100%; justify-content: center; } .btn .ic { width: 18px; height: 18px; } /* text link with arrow */ .tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); font-size: 14px; letter-spacing: .01em; color: var(--accent); } .tlink .ic { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); } .tlink:hover { text-decoration: none; } .tlink:hover .ic { transform: translateX(3px); } /* ============================ HEADER / NAV ============================ */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); } .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav__logo { display: flex; align-items: center; flex: none; } .nav__logo img { height: 30px; width: auto; } .nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: var(--fw-medium); color: var(--av-iron-700); padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .nav__link:hover { color: var(--av-royal-purple); text-decoration: none; background: var(--av-purple-50); } .nav__link[aria-current="page"] { color: var(--av-royal-purple); } .nav__link .caret { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease); } .nav__item.is-open .nav__link .caret { transform: rotate(180deg); } .nav__item.is-open .nav__link { color: var(--av-royal-purple); background: var(--av-purple-50); } .nav__right { display: flex; align-items: center; gap: 10px; } /* mega-menu */ .mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); opacity: 0; visibility: hidden; pointer-events: none; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px; z-index: 120; transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base); } .nav__item.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .mega::before { content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px; background:#fff; border-left:1px solid var(--border-subtle); border-top:1px solid var(--border-subtle); transform: translateX(-50%) rotate(45deg); } .mega--products { width: 720px; } .mega--solutions { width: 560px; } .mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .mega__col-head { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--av-blue-700); padding: 6px 12px 10px; } .mega__link { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: var(--r-md); text-decoration: none; transition: background var(--dur-fast) var(--ease); } .mega__link:hover { background: var(--av-purple-50); text-decoration: none; } .mega__ic { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--av-purple-100); color: var(--av-royal-purple); } .mega__ic .ic { width: 19px; height: 19px; } .mega__name { font-size: 14px; font-weight: var(--fw-semibold); color: var(--av-royal-purple); line-height: 1.2; } .mega__desc { font-size: 12.5px; color: var(--fg2); line-height: 1.45; margin-top: 3px; } .mega__foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mega__packaged { display: flex; gap: 10px; } .mega__pill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:var(--fw-medium); color: var(--av-purple-800); background: var(--av-purple-50); border:1px solid var(--av-purple-200); padding: 7px 12px; border-radius: var(--r-pill); text-decoration:none; } .mega__pill:hover { background: var(--av-purple-100); text-decoration:none; } /* mobile */ .nav__burger { display: none; background: transparent; border: 0; padding: 10px; cursor: pointer; color: var(--av-iron-700); } .nav__burger .ic { width: 24px; height: 24px; } .mobile-nav { display: none; border-top: 1px solid var(--border-subtle); background: #fff; } .mobile-nav.is-open { display: block; } .mobile-nav__links { display: flex; flex-direction: column; padding: 16px 20px 24px; gap: 2px; } .mobile-nav__links a { font-size: 16px; font-weight: var(--fw-medium); color: var(--av-iron-700); padding: 13px 8px; border-bottom: 1px solid var(--border-subtle); text-decoration: none; } .mobile-nav__links a:last-of-type { border-bottom: 0; } .mobile-nav__links a.btn { color: var(--accent-ink); border-bottom: 0; } /* ============================ HERO ============================ */ .hero { position: relative; background: var(--av-purple-900); color: #fff; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; } .hero__veil { position: absolute; inset: 0; background: linear-gradient(100deg, var(--av-purple-900) 18%, rgba(26,2,31,.72) 50%, rgba(26,2,31,.35) 100%); } .hero__pattern { position: absolute; inset: 0; background-image: url(assets/patterns/pattern-white-tile.png); background-size: 200px; opacity: .06; mix-blend-mode: screen; } .hero__rings { position: absolute; right: -220px; top: -200px; width: 760px; height: 760px; border: 1px solid rgba(146,188,179,.12); border-radius: 50%; } .hero__rings::after { content:""; position:absolute; inset:130px; border:1px solid rgba(146,188,179,.16); border-radius:50%; } .hero__inner { position: relative; z-index: 2; padding-top: 120px; padding-bottom: 128px; } .hero__eyebrow { color: var(--av-cambridge-blue); margin-bottom: 22px; } .hero h1 { color: #fff; font-size: var(--fs-5xl); font-weight: var(--fw-medium); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 26px; max-width: 16ch; } .hero h1 em { font-style: normal; color: var(--av-cambridge-blue); font-weight: var(--fw-light); } /* 42ch, not 52: the hero image's mesh brightens toward the right, so the copy is kept in the quiet left band rather than running across it. */ .hero__sub { font-size: var(--fs-lg); font-weight: var(--fw-light); line-height: 1.55; color: rgba(255,255,255,.82); max-width: 42ch; margin: 0 0 36px; } .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; } /* compact page hero (interior pages) */ .phero { position: relative; background: var(--av-purple-900); color: #fff; overflow: hidden; } .phero__pattern { position:absolute; inset:0; background-image:url(assets/patterns/pattern-white-tile.png); background-size:200px; opacity:.05; mix-blend-mode:screen; } .phero__inner { position: relative; z-index: 2; padding-top: 84px; padding-bottom: 80px; } .phero .eyebrow { color: var(--av-cambridge-blue); } .phero h1 { color: #fff; max-width: 18ch; font-size: var(--fs-4xl); letter-spacing: -.02em; } .phero__sub { font-size: var(--fs-lg); font-weight: var(--fw-light); color: rgba(255,255,255,.82); max-width: 56ch; margin: 0; } /* ============================ TRUST STRIP ============================ */ .trust { padding: 40px 0; border-bottom: 1px solid var(--border-subtle); background: #fff; } .trust__label { font-size: 12.5px; color: var(--fg3); text-align: center; margin-bottom: 22px; } .trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 36px; } .trust__mkt { font-size: 15px; font-weight: var(--fw-medium); color: var(--av-iron-600); letter-spacing: .01em; } .trust__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--av-silver-400); } .std-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--av-iron-600); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; background: #fff; } /* ============================ EYEBROW BLOCK ============================ */ .eyebrow { display: inline-block; margin-bottom: 14px; } .block-head { max-width: 40ch; } .block-head h2 { color: var(--av-royal-purple); } .block-head--center { margin: 0 auto; text-align: center; } /* ============================ STAT BLOCKS ============================ */ .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .stat { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 32px 28px; text-decoration: none; display: block; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } a.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--av-purple-200); text-decoration: none; } .stat__num { font-size: var(--fs-3xl); font-weight: var(--fw-medium); letter-spacing: -.02em; color: var(--av-royal-purple); line-height: 1; } .stat__label { font-size: 14px; color: var(--fg2); margin-top: 12px; line-height: 1.45; } .stat__more { font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--accent); margin-top: 16px; display: inline-flex; align-items: center; gap: 5px; } /* stat panel on dark / tint */ .statpanel { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: #fff; } .statpanel > div { padding: 28px 26px; border-right: 1px solid var(--border); } .statpanel > div:last-child { border-right: 0; } .statpanel .n { font-size: var(--fs-2xl); font-weight: var(--fw-medium); color: var(--av-royal-purple); letter-spacing: -.02em; line-height: 1; } .statpanel .l { font-size: 13px; color: var(--fg2); margin-top: 10px; line-height: 1.4; } /* ============================ CARDS ============================ */ .grid { display: grid; gap: 20px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 28px; } .pcard { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 196px; text-decoration: none; color: inherit; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--av-purple-200); text-decoration: none; } .pcard__ic { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--av-purple-100); color: var(--av-royal-purple); display: grid; place-items: center; margin-bottom: 4px; } .pcard__ic .ic { width: 22px; height: 22px; } .pcard__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--av-royal-purple); letter-spacing: -.01em; } .pcard__desc { font-size: 14px; color: var(--fg2); line-height: 1.55; } .pcard__more { margin-top: auto; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--accent); display: inline-flex; align-items: center; gap: 5px; padding-top: 6px; } .pcard:hover .pcard__more .ic { transform: translateX(3px); } .pcard__more .ic { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease); } .pcard--flagship { background: var(--av-royal-purple); border-color: var(--av-royal-purple); color: #fff; } .pcard--flagship .pcard__name { color: #fff; } .pcard--flagship .pcard__desc { color: rgba(255,255,255,.82); } .pcard--flagship .pcard__ic { background: rgba(146,188,179,.22); color: var(--av-cambridge-blue); } .pcard--flagship .pcard__more { color: var(--av-cambridge-blue); } .pcard__flag { font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--av-cambridge-blue); } /* ============================ FEATURE / SPLIT ============================ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split--label { grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } .label-col { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--av-blue-700); padding-top: 6px; position: sticky; top: 96px; } .media { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--av-purple-900); } .media img { width: 100%; height: 100%; object-fit: cover; } .media--ratio { aspect-ratio: 4 / 3; } /* ============================ LISTS ============================ */ .flist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .flist li { position: relative; padding-left: 30px; font-size: 15px; color: var(--fg1); line-height: 1.5; } .flist li::before { content:""; position:absolute; left:0; top:7px; width:16px; height:16px; background: var(--accent-wash); border-radius: 50%; } .flist li::after { content:""; position:absolute; left:5px; top:11px; width:6px; height:6px; background: var(--accent); border-radius: 50%; } /* capability / grey panel */ .panel { background: var(--av-silver-100); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: 32px; } .panel--tint { background: var(--av-purple-50); border-color: var(--av-purple-100); } .panel__head { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--av-blue-700); margin-bottom: 16px; } /* capability group */ .capgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .capcard { background:#fff; border:1px solid var(--border); border-radius: var(--r-md); padding: 26px; } .capcard h4 { color: var(--av-royal-purple); margin-bottom: 8px; } .capcard p { font-size: 14px; color: var(--fg2); margin: 0; } .capcard__ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--av-blue-100); color: var(--av-blue-700); display: grid; place-items: center; margin-bottom: 14px; } .capcard__ic .ic { width: 21px; height: 21px; } /* spec table */ .spec { border-top: 1px solid var(--border); } .spec__row { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border); } .spec__k { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--av-iron-600); } .spec__v { font-size: 15px; color: var(--fg1); line-height: 1.55; } /* ============================ CASE STUDY CARDS ============================ */ .ccard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .ccard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--av-purple-200); text-decoration: none; } .ccard__top { position: relative; aspect-ratio: 16/9; background: var(--av-purple-900); overflow: hidden; } .ccard__top img { width: 100%; height: 100%; object-fit: cover; opacity: .62; } .ccard__top .veil { position:absolute; inset:0; background: linear-gradient(160deg, rgba(26,2,31,.2), rgba(92,6,140,.55)); } .ccard__stat { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff; } .ccard__stat .n { font-size: var(--fs-2xl); font-weight: var(--fw-medium); letter-spacing: -.02em; line-height: 1; } .ccard__stat .l { font-size: 12.5px; color: rgba(255,255,255,.85); margin-top: 5px; } .ccard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .ccard__tags { display: flex; gap: 8px; flex-wrap: wrap; } .ccard__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--av-royal-purple); letter-spacing: -.01em; } .ccard__focus { font-size: 14px; color: var(--fg2); line-height: 1.5; } .ccard__more { margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--accent); display: inline-flex; align-items: center; gap: 5px; } .ccard__more .ic { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease); } .ccard:hover .ccard__more .ic { transform: translateX(3px); } .chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .04em; color: var(--av-iron-600); background: var(--av-silver-100); border: 1px solid var(--border-subtle); border-radius: var(--r-pill); padding: 4px 10px; } /* filter bar */ .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .filter-btn { font-size: 13px; font-weight: var(--fw-medium); color: var(--av-iron-700); background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .filter-btn:hover { border-color: var(--av-purple-300); color: var(--av-royal-purple); } .filter-btn.is-active { background: var(--av-royal-purple); border-color: var(--av-royal-purple); color: #fff; } .filter-group { display: flex; gap: 8px; flex-wrap: wrap; } .filter-label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); margin-right: 4px; align-self: center; } /* ============================ CTA BAND ============================ */ .ctaband { position: relative; background: var(--av-royal-purple); color: #fff; overflow: hidden; } .ctaband__pattern { position:absolute; inset:0; background-image:url(assets/patterns/pattern-white-tile.png); background-size: 160px; opacity:.1; mix-blend-mode: screen; } .ctaband__inner { position: relative; z-index: 2; padding-top: 92px; padding-bottom: 92px; text-align: center; max-width: 50ch; margin: 0 auto; } .ctaband h2 { color: #fff; font-size: var(--fs-4xl); letter-spacing: -.02em; margin-bottom: 16px; } .ctaband__sub { font-size: var(--fs-lg); font-weight: var(--fw-light); color: rgba(255,255,255,.82); margin: 0 0 32px; } /* ============================ FORMS ============================ */ .form { display: grid; gap: 18px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--av-iron-700); letter-spacing: .01em; } .field label .req { color: var(--av-danger); margin-left: 2px; } .field input, .field select, .field textarea { font-family: var(--font-sans); font-size: 15px; font-weight: var(--fw-light); color: var(--fg1); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field textarea { resize: vertical; min-height: 120px; line-height: 1.5; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--av-royal-purple); box-shadow: 0 0 0 3px var(--av-purple-100); } .field input::placeholder, .field textarea::placeholder { color: var(--fg4); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--av-danger); } .field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px var(--av-danger-bg); } .field__err { font-size: 12.5px; color: var(--av-danger); display: none; } .field.has-error .field__err { display: block; } .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form__note { font-size: 12.5px; color: var(--fg3); line-height: 1.5; } .form-error { font-size: 13px; color: var(--av-danger); margin-top: 12px; font-weight: var(--fw-medium); } .form-success { background: var(--av-success-bg); border: 1px solid var(--av-success-border); border-radius: var(--r-md); padding: 28px 30px; } .form-success h3 { color: var(--av-success); margin-bottom: 8px; } .form-success p { margin: 0; color: var(--av-iron-700); } .hidden { display: none !important; } /* ============================ FOOTER ============================ */ .site-footer { background: var(--av-purple-900); color: rgba(255,255,255,.7); padding: 64px 0 32px; } .site-footer a { color: rgba(255,255,255,.7); font-weight: var(--fw-light); } .site-footer a:hover { color: #fff; text-decoration: none; } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(146,188,179,.16); } .footer__brand img { height: 34px; margin-bottom: 18px; } .footer__tag { font-size: 13.5px; line-height: 1.6; max-width: 34ch; color: rgba(255,255,255,.72); } .footer__loc { font-size: 12.5px; color: rgba(255,255,255,.5); margin-top: 16px; line-height: 1.6; } .footer__col h3 { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--av-cambridge-blue); margin: 0 0 16px; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer__col a { font-size: 13.5px; } .footer__bottom { padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: rgba(255,255,255,.5); } .footer__bottom .wm { letter-spacing: .06em; } .footer__legal { display: flex; gap: 18px; flex-wrap: wrap; } .footer__legal a { font-size: 12px; } /* news article media */ .news-lead { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 28px; margin: 0 0 28px; display: grid; place-items: center; } .news-lead img { max-width: 100%; max-height: 300px; object-fit: contain; display: block; } .news-inline { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 20px 0; display: block; } .news-thumb { height: 120px; display: grid; place-items: center; margin-bottom: 6px; } .news-thumb img { max-height: 92px; max-width: 75%; object-fit: contain; display: block; } /* ============================ BRAND LOGOS / STANDARDS / MAP ============================ */ /* product lockups + standards marks carry a near-white background; multiply blend drops it cleanly onto any light surface */ .prodlogo { mix-blend-mode: multiply; } .std-logo { height: 26px; width: auto; object-fit: contain; mix-blend-mode: multiply; opacity: .85; transition: opacity var(--dur-base) var(--ease); } .std-logo--svg { mix-blend-mode: normal; } .trust__row .std-logo:hover { opacity: 1; } /* product card with real lockup */ .plcard { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .plcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--av-purple-200); text-decoration: none; } .plcard__logo { background: #fff; border-bottom: 1px solid var(--border-subtle); padding: 8px; aspect-ratio: 16 / 7; display: grid; place-items: center; } .plcard__logo img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .plcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .plcard__desc { font-size: 14px; color: var(--fg2); line-height: 1.55; } .plcard__more { margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--accent); display: inline-flex; align-items: center; gap: 5px; } .plcard__more .ic { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease); } .plcard:hover .plcard__more .ic { transform: translateX(3px); } .plcard--flagship { grid-column: span 1; } /* product-page hero lockup plate */ .hero-lockup { display: inline-flex; background: #fff; border-radius: var(--r-md); padding: 14px 22px; margin-bottom: 22px; box-shadow: var(--shadow-md); } .hero-lockup img { height: 40px; width: auto; object-fit: contain; display: block; mix-blend-mode: multiply; } /* global-reach map band */ .mapband { position: relative; background: var(--av-purple-900); overflow: hidden; } .mapband__map { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .08; display: block; } .mapband__grad { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, rgba(26,2,31,0) 30%, rgba(26,2,31,.65) 100%); pointer-events: none; } .mapband__inner { position: relative; z-index: 2; } .markets-row { display: flex; flex-wrap: wrap; gap: 12px 14px; } .market-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--fw-medium); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(146,188,179,.28); border-radius: var(--r-pill); padding: 8px 16px; backdrop-filter: blur(2px); } .market-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--av-cambridge-blue); } /* banner image (marketing lockup art) */ .banner-img { width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); display: block; } /* leadership cards (monogram avatars — no headshots supplied) */ .leadgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .leadcard { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; } .leadcard__av { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 22px; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--av-royal-purple), var(--av-cambridge-blue)); } .leadcard__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--av-royal-purple); letter-spacing: -.01em; } .leadcard__role { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--av-blue-700); margin: 3px 0 10px; } .leadcard__bio { font-size: 13.5px; color: var(--fg2); line-height: 1.55; margin: 0; } .leadcard__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 12.5px; font-weight: var(--fw-semibold); color: var(--accent); } .leadcard__link .ic { width: 15px; height: 15px; } @media (max-width: 760px) { .leadgrid { grid-template-columns: 1fr; } } /* values grid */ .valgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .valcard { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 20px; text-align: center; } .valcard__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--av-purple-50); color: var(--av-royal-purple); display: grid; place-items: center; margin: 0 auto 14px; } .valcard__ic .ic { width: 24px; height: 24px; } .valcard h4 { color: var(--av-royal-purple); margin: 0 0 6px; } .valcard p { font-size: 13px; color: var(--fg2); line-height: 1.5; margin: 0; } @media (max-width: 980px) { .valgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .valgrid { grid-template-columns: 1fr; } } /* ============================ CASE STUDY DETAIL ============================ */ .cs-wrap { max-width: 1040px; } .cs-section { padding: 64px 0; border-bottom: 1px solid var(--border-subtle); } .cs-section:last-of-type { border-bottom: 0; } .cs-body p { font-size: var(--fs-md); line-height: 1.7; color: var(--fg1); } .cs-body p:last-child { margin-bottom: 0; } .cs-lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--av-iron-700); font-weight: var(--fw-regular); } .cs-meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; } .cs-meta__k { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--av-cambridge-blue); } .cs-meta__v { font-size: 15px; color: #fff; margin-top: 4px; font-weight: var(--fw-medium); } /* ============================ ANIMATIONS ============================ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } } /* ============================ RESPONSIVE ============================ */ @media (max-width: 1024px) { .hero h1 { font-size: var(--fs-4xl); } .split { grid-template-columns: 1fr; gap: 40px; } .split--label { grid-template-columns: 1fr; gap: 20px; } .label-col { position: static; } .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 860px) { .grid--3 { grid-template-columns: 1fr 1fr; } .stat-grid { grid-template-columns: 1fr; } .statpanel { grid-template-columns: 1fr 1fr; } .statpanel > div:nth-child(2) { border-right: 0; } .statpanel > div:nth-child(1), .statpanel > div:nth-child(2) { border-bottom: 1px solid var(--border); } } @media (max-width: 760px) { .nav__links, .nav__right .btn { display: none; } .nav__burger { display: inline-flex; } } @media (max-width: 640px) { .container { padding: 0 24px; } .section { padding: 48px 0; } .section--sm { padding: 36px 0; } .hero__inner { padding-top: 84px; padding-bottom: 88px; } .hero h1 { font-size: var(--fs-3xl); line-height: 1.15; } .hero__sub { font-size: var(--fs-md); } .hero__cta .btn { flex: 1 1 100%; } .eyebrow { font-size: 12px; } .grid--3, .grid--2 { grid-template-columns: 1fr; } .capgrid { grid-template-columns: 1fr; } .statpanel { grid-template-columns: 1fr; } .statpanel > div { border-right: 0; border-bottom: 1px solid var(--border); } .statpanel > div:last-child { border-bottom: 0; } .field--row { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; gap: 12px; text-align: center; } .ctaband h2 { font-size: var(--fs-3xl); } .phero h1 { font-size: var(--fs-3xl); } .spec__row { grid-template-columns: 1fr; gap: 6px; } } /* inline two-column blocks (built with an inline grid-template-columns) stack on small screens */ @media (max-width: 860px) { .stack-sm { grid-template-columns: 1fr !important; } }