/* ========================================================================= Axion — main stylesheet. Token-driven (see tokens.css). Mobile-first. Order: reset · type · layout · buttons · header · page head · hero · footer · reveal · utilities · breakpoints. ========================================================================= */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ⚠ The clip must be on the ROOT, not only on body. body{overflow-x:clip} hides the spill visually but html is what the viewport scrolls, so a wide child — the footer markets rail — still produced real sideways scroll on every page. `clip` rather than `hidden` because hidden would create a scroll container and break the sticky header. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background-image: url("../images/tex-grain.png"); background-size: 240px 240px; font-family: var(--ff-body); font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--axn-ink-2); /* background-COLOR, not the shorthand: `background` resets background-image and would wipe the grain set three lines above. The client asked for no flat colour anywhere — this is the ground that rule starts from. */ background-color: var(--axn-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul, ol { margin: 0; padding: 0; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .axn-skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--axn-ink); color: #fff; padding: 10px 14px; } .axn-skip:focus { left: 8px; } :focus-visible { outline: 2px solid var(--axn-gold-deep); outline-offset: 3px; } /* ---------- 2. Type ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); font-weight: var(--fw-head); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--axn-ink); margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; } h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; } h5 { font-size: var(--fs-h5); letter-spacing: 0; } h6 { font-size: var(--fs-h6); letter-spacing: 0; } p { margin: 0 0 1em; } /* ---- ONE eyebrow, everywhere ------------------------------------------- There were four treatments running at once — a gold dash + caps, a plain caps, a pill, and the stack's own — so two sections side by side announced themselves differently. They are all this pill now. `.axn-pillbrow` is kept as an alias so the markup that already uses it needs no edit. The `--rule` dash is neutralised below rather than hunted out of a dozen templates. ---------------------------------------------------------- */ .axn-eyebrow, .axn-pillbrow, .axn-home .axn-stack__eyebrow { display: inline-flex; align-items: center; width: auto; /* ⚠ Both of these are load-bearing. `inline-flex` shrink-wraps in normal flow, but a GRID parent stretches its items by default — which is what blew the Products eyebrow out to the full 1284px of the container. */ justify-self: start; align-self: start; text-wrap: pretty; font-family: var(--ff-tech); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--axn-ink); background: var(--axn-bg); border: 1px solid var(--axn-edge); border-radius: 99px; padding: 9px 15px; margin: 0 0 18px; } .axn-prose { max-width: 68ch; } .axn-prose h2, .axn-prose h3 { margin-top: 1.6em; } .axn-prose a { color: var(--axn-gold-deep); border-bottom: 1px solid var(--axn-edge); } .axn-prose ul, .axn-prose ol { padding-left: 1.25em; margin-bottom: 1em; } /* ---------- 3. Layout ---------- */ .axn-container { width: 100%; max-width: var(--axn-container); margin-inline: auto; padding-inline: var(--axn-gutter); } .axn-section { padding-block: var(--axn-section-y); } .axn-section--alt { background-color: var(--axn-bg-2); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; border-block: 1px solid var(--axn-edge); } .axn-section--dark { background: var(--axn-dark); color: var(--axn-dark-text); } .axn-section--dark h1, .axn-section--dark h2, .axn-section--dark h3 { color: #fff; } .axn-section--dark .axn-eyebrow { color: var(--axn-gold); } /* ---------- 4. Buttons — pill, resting shadow, lift + glow on hover ---------- */ /* ---- ONE button size for the whole site -------------------------------- There used to be four sets of metrics in play — `.axn-btn` at 14/26, `--lg` at 16/30, `--sm` at 11/22 and `.axn-pill` at 13/20 — so buttons standing next to each other did not match. Everything resolves to this now. The modifier classes stay in the markup; they simply no longer change size, which keeps the templates untouched. Change the padding here and it changes everywhere, which is the point. ---------------------------------------- */ .axn-btn, .axn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--ff-display); font-weight: var(--fw-ui); font-size: 14.5px; letter-spacing: var(--ls-tight); line-height: 1; padding: 15px 28px; border: 2px solid transparent; border-radius: 999px; white-space: nowrap; position: relative; overflow: hidden; cursor: pointer; transition: transform .2s var(--axn-ease), box-shadow .25s var(--axn-ease), background .2s ease, color .2s ease, border-color .2s ease; } .axn-btn--green { background: var(--axn-green); color: var(--axn-on-accent); box-shadow: 0 8px 20px -8px rgba(46,125,34,.45); } .axn-btn--green:hover { background: var(--axn-green-hi); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(46,125,34,.42); } .axn-btn--dark { background: var(--axn-ink); color: var(--axn-bg-2); box-shadow: 0 8px 20px -8px rgba(22,20,14,.5); } .axn-btn--dark:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(22,20,14,.38); } .axn-btn--outline { background: transparent; color: var(--axn-ink); border-color: var(--axn-edge); box-shadow: 0 4px 14px -8px rgba(22,20,14,.35); } .axn-btn--outline:hover { background: var(--axn-ink); color: var(--axn-bg-2); border-color: var(--axn-ink); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(22,20,14,.32); } .axn-btn--ghost { background: rgba(255,255,255,.07); color: var(--axn-dark-text); border-color: rgba(255,255,255,.26); backdrop-filter: blur(6px); } .axn-btn--ghost:hover { border-color: var(--axn-gold); color: #fff; background: rgba(212,175,55,.16); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(212,175,55,.26); } /* ---------- Arrows, everywhere ---------- `axn_icon( 'arrow-right' )` stamps `.axn-ar` on every arrow it draws, so one rule owns the behaviour on buttons, pills, text links, footer links and the arrows parked in the corner of a card. It used to be six different hovers — translateX on some, a widening flex gap on others. At rest the arrow points up and out at 45 degrees. Hovering the control it belongs to swings it down to straight right and stretches it along its own length: `transform-origin: left` so it grows outward from the shaft rather than fattening in place. The icon is drawn pointing right, which is why the REST state is the rotated one. */ .axn-ar { display: block; align-self: center; flex: 0 0 auto; transform: rotate(-45deg); /* Rotate about the middle, not the left edge. Spinning it around a corner swings the glyph off the optical centre of the label beside it, which is exactly what it looked like. */ transform-origin: 50% 50%; transition: transform var(--axn-dur-l) var(--axn-ease); } :is(a, button, .axn-btn, .axn-pill, .axn-link, .axn-flink, .axn-dotlink, .axn-ftop):hover > .axn-ar, :is(a, button, .axn-btn, .axn-pill, .axn-link, .axn-flink, .axn-dotlink, .axn-ftop):focus-visible > .axn-ar, :is(.axn-role__link, .axn-placelist__link, .axn-provcard__link, .axn-ty__card, .axn-mk__state, .axn-path__link):hover .axn-ar { transform: rotate(0deg) scaleX(1.6); } @media (prefers-reduced-motion: reduce) { .axn-ar { transition: none; } } .axn-btn--onGold { background: #16140E; color: #F8F4EA; box-shadow: 0 8px 20px -8px rgba(0,0,0,.45); } .axn-btn--onGold:hover { background: #000; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.42); } /* Kept so existing markup keeps working; they no longer resize anything. */ .axn-btn--lg, .axn-btn--sm { padding: 15px 28px; font-size: 14.5px; } .axn-btn .axn-shine, .axn-pill .axn-shine { position: absolute; top: 0; bottom: 0; width: 38px; left: -60px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent); transform: skewX(-18deg); } .axn-btn:hover .axn-shine, .axn-pill:hover .axn-shine { animation: axn-shine .72s ease; } @keyframes axn-shine { to { left: 120%; } } /* ---------- 5. Header — white, logo | centred nav | one button ---------- */ /* The sticky-header component paints `background: var(--axn-bg, #fff)` from inline CSS appended after this file, so specificity alone never wins. Rebind the token on the header instead — it inherits, and the component resolves to white on its own. The explicit background is the belt to that braces. */ .axn-site-header { --axn-bg: #FFFFFF; } .axn-sticky-header .axn-site-header.axn-site-header, body .axn-site-header.axn-site-header { background: #FFFFFF; border-bottom: 1px solid var(--axn-edge); position: relative; z-index: 1000; } /* ⚠ The rule above out-specifies the sticky-header component's own `position: sticky`, so the header silently stopped sticking in 0.6.0. It still needs a positioned ancestor for the beam pseudo-elements, so `relative` stays as the no-JS/no-component fallback and sticky is restored here, at a specificity that wins. Don't fold these back into one rule. */ body.axn-sticky-header .axn-site-header.axn-site-header { position: sticky; top: 0; } .axn-sticky-header .axn-site-header.axn-site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(22,20,14,.28); } /* The travelling spectrum bar under the header was removed at the client's request — it read as a decoration sitting between the menu and every hero. `.axn-site-header::before/::after` are free again if the header ever needs a pseudo-element; nothing else styles them. */ .axn-header__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: var(--axn-hdr); transition: min-height var(--axn-dur-l) ease; } .axn-sticky-shrink .axn-site-header.is-scrolled .axn-header__in { min-height: var(--axn-hdr-c); } .axn-sticky-shrink .axn-site-header.is-scrolled { padding-top: 0; padding-bottom: 0; } .axn-brand { display: inline-flex; align-items: center; gap: 13px; justify-self: start; } .axn-brand__chip { display: block; height: 64px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(138,100,22,.5), 0 6px 16px -8px rgba(22,20,14,.55); transition: height var(--axn-dur-l) ease, box-shadow var(--axn-dur) ease; } .axn-brand__chip img { height: 100%; width: auto; display: block; } .axn-brand:hover .axn-brand__chip { box-shadow: 0 0 0 1px var(--axn-gold), 0 10px 22px -8px rgba(22,20,14,.5); } .axn-sticky-shrink .axn-site-header.is-scrolled .axn-brand__chip { height: 50px; } /* A Customizer lockup is sized by width, so it holds a predictable share of the 1340px container (~19.4%) whatever its aspect ratio. */ .axn-brand__img { width: var(--axn-logo-w); height: auto; max-width: none; max-height: none; transition: width var(--axn-dur-l) ease; } /* Compacted state stays proportional to whatever width is set. */ .axn-sticky-shrink .axn-site-header.is-scrolled .axn-brand__img { width: calc(var(--axn-logo-w) * .81); } .axn-brand__txt { display: flex; flex-direction: column; gap: 4px; line-height: 1; } .axn-brand__name { font-family: var(--ff-tech); font-size: 19px; letter-spacing: .10em; color: var(--axn-ink); } .axn-brand__sub { font-family: var(--ff-tech); font-size: 8px; letter-spacing: .27em; color: var(--axn-green); } .axn-brand--dark .axn-brand__name { color: var(--axn-gold); } .axn-brand--dark .axn-brand__sub { color: var(--axn-green-bright); } .axn-nav { display: none; justify-self: center; } .axn-nav__list { display: flex; gap: clamp(16px, 1.9vw, 30px); list-style: none; align-items: center; } .axn-nav__list a { display: block; position: relative; padding: 9px 0; /* ⚠ Was 12px at `--axn-ink-3` — 5.55:1 on white, legal but thin for a primary navigation set in caps. 13px at `--axn-ink-2` reads at a glance and takes it to 9.7:1. Tracking eased slightly because caps at a larger size need less of it. */ font-family: var(--ff-display); font-size: 13px; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--axn-ink-2); transition: color var(--axn-dur) ease; } .axn-nav__list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--axn-gold); transition: right var(--axn-dur-l) var(--axn-ease); } .axn-nav__list a:hover { color: var(--axn-ink); } .axn-nav__list a:hover::after { right: 0; } /* Selected page — ink text, a held two-tone underline, and a gold dot above. */ .axn-nav__list .current-menu-item > a, .axn-nav__list .current-menu-ancestor > a, .axn-nav__list .current_page_parent > a { color: var(--axn-ink); font-weight: 700; } .axn-nav__list .current-menu-item > a::after, .axn-nav__list .current-menu-ancestor > a::after, .axn-nav__list .current_page_parent > a::after { right: 0; height: 3px; background: linear-gradient(90deg, var(--axn-gold), var(--axn-green-bright)); } .axn-nav__list .current-menu-item > a::before, .axn-nav__list .current-menu-ancestor > a::before { content: ""; position: absolute; left: 50%; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--axn-gold); transform: translateX(-50%); } .axn-header__cta { display: none; justify-self: end; } /* mobile-nav component skin */ .axn-mn__trigger { justify-self: end; border: 1px solid var(--axn-edge); width: 44px; height: 44px; padding: 0; color: var(--axn-ink); border-radius: 999px; } .axn-mn__panel { background: var(--axn-bg-2); color: var(--axn-ink); } .axn-mn__head { border-bottom-color: var(--axn-edge); } .axn-mn__list li { border-bottom-color: var(--axn-edge-soft); } .axn-mn__list a { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .axn-mn__list .current-menu-item > a { color: var(--axn-gold-deep); } .axn-mn__cta { border-radius: 999px; font-family: var(--ff-display); font-weight: var(--fw-ui); box-shadow: 0 8px 20px -8px rgba(46,125,34,.45); } /* ---------- 6. Section furniture ---------- */ /* The dash is gone with the single eyebrow treatment. The modifier stays in the markup and simply does nothing, so no template needed editing. */ .axn-eyebrow--rule { display: inline-flex; align-items: center; gap: 0; } .axn-eyebrow--rule::before { content: none; } .axn-lede { font-size: var(--fs-lede); color: var(--axn-ink-2); } .axn-sechead { max-width: 62ch; margin-bottom: clamp(34px, 4.4vw, 60px); } .axn-sechead h2 { margin: 0 0 18px; } .axn-sechead .axn-lede { margin: 0; color: var(--axn-ink-3); } .axn-sechead--split { max-width: none; display: grid; gap: 20px clamp(30px, 5vw, 80px); align-items: end; } .axn-sechead--split h2 { margin: 0; max-width: 10.37em; } .axn-notice { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 12.5px; color: var(--axn-ink-3); line-height: 1.65; max-width: 92ch; padding-left: 16px; border-left: 2px solid var(--axn-edge); } /* ---- ONE inline link, everywhere --------------------------------------- Every text link that ends a block now reads like “About the founders”: display face, the same size, a dashed gold rule under it and the shared arrow. `.axn-link`, `.axn-dotlink` and the footer's `.axn-flink` were three different sizes and three different underlines before this. ------------- */ .axn-link, .axn-dotlink, .axn-flink { display: inline-flex; align-items: center; gap: 12px; font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .5vw, 1.5rem); letter-spacing: -.02em; text-transform: none; color: var(--axn-ink); padding-bottom: 10px; border-bottom: 1px dashed var(--axn-gold-deep); transition: color var(--axn-dur) ease, border-bottom-color var(--axn-dur) ease; } .axn-link:hover, .axn-dotlink:hover, .axn-flink:hover { color: var(--axn-gold-deep); border-bottom-color: var(--axn-gold); } /* On a dark plate it inverts; the dashed rule stays gold. */ .axn-section--dark .axn-link, .axn-band .axn-link, .axn-does .axn-link, .axn-flink { color: #fff; } .axn-section--dark .axn-link:hover, .axn-band .axn-link:hover, .axn-does .axn-link:hover, .axn-flink:hover { color: var(--axn-gold-hi); } .axn-ph { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--axn-ink-3); } /* ---------- 6a. Page head ---------- */ /* ---------- 6b. Hero — overlay type on a full-bleed plate ---------- */ .axn-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--axn-dark); padding: clamp(54px, 7vw, 110px) 0 clamp(30px, 3.4vw, 44px); } .axn-hero__plate { position: absolute; inset: 0; z-index: -2; } .axn-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; } .axn-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; /* ⚠ The overlay runs the DIAGONAL: 135deg in CSS points toward the bottom-right, so the gradient STARTS at the top-left. Dark where the words are, almost nothing by the opposite corner, which is what lets a photograph actually show. It was `92deg` — near-horizontal — which flattened the plate evenly top to bottom. The second layer is a short lift off the bottom-left only. Without it the copy sitting low on the plate loses its ground once the diagonal has thinned out down there. It is deliberately short and weak; if a photo ever fights it, lighten this, not the diagonal. */ /* ⚠ The HOMEPAGE hero's ramp is heavier on the left than the inner pages'. It carries far more type over the plate — pill, three-line headline, lede, the counted figures and two buttons — where an inner hero carries a headline and one line. ⚠ The strengthening is in the MIDDLE of the ramp, not at the edge. The first stop was already .94; there is no room to take that up by a third without going opaque and killing the photograph outright. The headroom is at 30–60% across, and that is where the gain lands. */ background: linear-gradient(135deg, rgba(6,5,3,.99) 0%, rgba(6,5,3,.96) 32%, rgba(6,5,3,.74) 60%, rgba(6,5,3,.30) 80%, rgba(6,5,3,.08) 100%), linear-gradient(8deg, rgba(6,5,3,.72) 0%, rgba(6,5,3,.28) 22%, transparent 46%); } .axn-hero__in { position: relative; } /* On a dark plate the pill inverts rather than changing to bare gold text. */ .axn-eyebrow--onDark, .axn-pillbrow--onDark, .axn-section--dark .axn-eyebrow, .axn-band .axn-eyebrow { color: rgba(255,255,255,.88); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); } .axn-hero__h { margin: 0; color: #fff; font-weight: var(--fw-feature); font-size: var(--fs-hero); line-height: .98; letter-spacing: -.035em; } .axn-hero__line { display: block; } .axn-hero__line:nth-child(2) { color: var(--axn-gold-hi); } .axn-hero__lead { max-width: 44ch; margin: clamp(22px, 2.6vw, 34px) 0 0; color: rgba(255,255,255,.88); font-size: clamp(1rem, .95rem + .35vw, 1.25rem); } .axn-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 38px); } .axn-hero__rule { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: clamp(44px, 6vw, 88px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .05em; color: rgba(255,255,255,.62); } .axn-hero__rule sup { font-size: 8px; } .axn-hero__scroll { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.62); transition: color var(--axn-dur) ease, gap var(--axn-dur) ease; } .axn-hero__scroll:hover { color: var(--axn-gold); gap: 13px; } /* Rotating badge — the signature mark, built from the brand's own words. */ .axn-badge { position: absolute; right: 0; top: 6%; width: clamp(104px, 11vw, 152px); aspect-ratio: 1; display: none; place-items: center; } .axn-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: axn-spin 22s linear infinite; } .axn-badge text { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .14em; fill: var(--axn-gold-hi); } .axn-badge__core { width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--axn-gold); box-shadow: 0 0 0 8px rgba(212,175,55,.16), 0 0 34px rgba(246,226,155,.55); transition: transform var(--axn-dur-l) var(--axn-ease); } .axn-badge:hover .axn-badge__core { transform: scale(1.16); } @keyframes axn-spin { to { transform: rotate(360deg); } } /* ---------- 6c. Figures rail ---------- */ .axn-statrail { border-block: 1px solid var(--axn-edge); background-color: var(--axn-bg-2); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; } .axn-statrail__in { display: grid; grid-template-columns: repeat(2, 1fr); } .axn-stat { padding: clamp(22px, 2.6vw, 34px) 0; display: flex; flex-direction: column; gap: 6px; position: relative; } .axn-stat + .axn-stat { padding-left: clamp(18px, 2.6vw, 34px); } .axn-stat + .axn-stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--axn-edge); } .axn-stat:nth-child(3) { padding-left: 0; } .axn-stat:nth-child(3)::before { display: none; } .axn-stat__n { font-family: var(--ff-display); font-weight: var(--fw-head); font-size: clamp(2rem, 1rem + 3.2vw, 3.25rem); line-height: 1; letter-spacing: -.04em; color: var(--axn-ink); font-variant-numeric: tabular-nums; } .axn-stat__l { font-size: 13px; color: var(--axn-ink-3); max-width: 22ch; line-height: 1.45; } /* ---------- 6d. Career block ---------- */ .axn-career__in { display: grid; gap: clamp(32px, 4vw, 72px); align-items: center; } .axn-career__copy h2 { max-width: 9.07em; } .axn-career__copy .axn-lede { color: var(--axn-ink-2); } .axn-career__copy p { max-width: 52ch; color: var(--axn-ink-3); } .axn-career__copy .axn-btn { margin-top: 14px; } .axn-career__media { position: relative; margin: 0; } .axn-career__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .axn-career__media::after { content: ""; position: absolute; inset: auto -14px -14px auto; width: 46%; height: 46%; border-right: 2px solid var(--axn-gold); border-bottom: 2px solid var(--axn-gold); pointer-events: none; } .axn-career__media figcaption { position: absolute; left: 0; bottom: 0; background: var(--axn-bg-2); padding: 7px 11px; } /* ---------- 6e. Products — numbered list + swapping stage ---------- */ .axn-swap { display: grid; gap: clamp(26px, 3vw, 56px); align-items: start; } .axn-swap__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--axn-edge); } .axn-swap__item { display: grid; grid-template-columns: auto 1fr; gap: 16px clamp(16px, 2vw, 28px); padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--axn-edge); position: relative; cursor: default; transition: padding-left var(--axn-dur-l) var(--axn-ease); } .axn-swap__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--axn-gold); transform: scaleY(0); transform-origin: top; transition: transform var(--axn-dur-l) var(--axn-ease); } .axn-swap__item.is-active { padding-left: 18px; } .axn-swap__item.is-active::before { transform: scaleY(1); } .axn-swap__n { font-family: var(--ff-mono); font-size: 12px; letter-spacing: .06em; color: var(--axn-ink-3); padding-top: 6px; transition: color var(--axn-dur) ease; } .axn-swap__item.is-active .axn-swap__n { color: var(--axn-gold-deep); } .axn-swap__body h3 { margin: 0 0 8px; font-size: calc(var(--fs-h3) * .92); color: var(--axn-ink); } .axn-swap__body p { margin: 0; font-size: calc(var(--fs-body) * .94); color: var(--axn-ink-3); max-width: 46ch; line-height: 1.6; } .axn-swap__thumb { display: none; width: 92px; aspect-ratio: 4 / 3; object-fit: cover; align-self: center; } .axn-swap__inline { grid-column: 1 / -1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 4px; } .axn-swap__stage { display: none; } /* ---------- 6f. Providers marquee ---------- */ .axn-provrow { padding-block: clamp(34px, 4vw, 56px); border-block: 1px solid var(--axn-edge); background-color: var(--axn-bg-2); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; overflow: hidden; } .axn-provrow__label { font-family: var(--ff-tech); font-size: 9px; letter-spacing: var(--ls-tech); text-transform: uppercase; color: var(--axn-gold-deep); margin: 0 0 22px; } .axn-marquee { position: relative; } .axn-marquee::before, .axn-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 140px); z-index: 2; pointer-events: none; } .axn-marquee::before { left: 0; background: linear-gradient(90deg, var(--axn-bg-2), transparent); } .axn-marquee::after { right: 0; background: linear-gradient(270deg, var(--axn-bg-2), transparent); } .axn-marquee__track { display: flex; gap: clamp(28px, 4vw, 60px); width: max-content; animation: axn-slide 34s linear infinite; } .axn-marquee:hover .axn-marquee__track, .axn-marquee:focus-within .axn-marquee__track { animation-play-state: paused; } .axn-marquee__item { font-family: var(--ff-display); font-weight: var(--fw-head); font-size: clamp(1.125rem, 1rem + 1vw, 1.75rem); letter-spacing: -.02em; color: var(--axn-ink-3); white-space: nowrap; transition: color var(--axn-dur) ease; } .axn-marquee__item:hover { color: var(--axn-gold-deep); } @keyframes axn-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 6g. Markets — dark band ---------- */ .axn-band { position: relative; isolation: isolate; background: var(--axn-dark); color: var(--axn-dark-text); overflow: hidden; } .axn-band__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .52; z-index: -1; } .axn-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--axn-dark) 6%, rgba(11,10,7,.78) 40%, rgba(11,10,7,.34) 78%); } .axn-band h2, .axn-band h3 { color: #fff; } .axn-band .axn-lede { color: var(--axn-dark-text); } .axn-band p { color: var(--axn-dark-dim); } .axn-band .axn-eyebrow { color: var(--axn-gold); } .axn-markets__in { display: grid; gap: clamp(34px, 4vw, 72px); align-items: start; } .axn-markets__copy h2 { margin: 0 0 18px; } .axn-markets__copy .axn-lede { margin: 0 0 14px; } .axn-markets__copy p { max-width: 46ch; } .axn-markets__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--axn-dark-edge); font-size: 13.5px; color: var(--axn-dark-dimmer) !important; } .axn-markets__list { display: flex; flex-direction: column; } .axn-mk { border-top: 1px solid rgba(255,255,255,.20); padding: clamp(16px, 2vw, 24px) 0; } .axn-mk:last-child { border-bottom: 1px solid rgba(255,255,255,.20); } .axn-mk__state { display: flex; align-items: baseline; gap: 14px; color: #fff; transition: color var(--axn-dur) ease; } .axn-mk__state .axn-mk__name { font-family: var(--ff-display); font-weight: var(--fw-feature); font-size: clamp(1.75rem, .9rem + 3.4vw, 3.25rem); line-height: 1; letter-spacing: -.035em; } .axn-mk__state:hover { color: var(--axn-gold-hi); } .axn-mk__count { font-family: var(--ff-mono); font-size: 11px; color: var(--axn-gold); white-space: nowrap; } /* ⚠ No `transform` here. This rule out-specifies `.axn-ar` (0,1,1 against 0,1,0), and setting transform directly stopped these arrows rotating with every other arrow on the site. Position and colour only. */ .axn-mk__state svg { margin-left: auto; color: var(--axn-gold); align-self: center; } .axn-mk__items { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; } .axn-mk__item a { display: inline-block; padding: 6px 12px; border: 1px solid rgba(255,255,255,.22); font-size: 13px; color: var(--axn-dark-dim); transition: border-color var(--axn-dur) ease, color var(--axn-dur) ease, background var(--axn-dur) ease; } .axn-mk__item a:hover { color: #fff; border-color: var(--axn-gold-deep); background: rgba(212,175,55,.12); } .axn-mk__item--partnerships a { border-style: dashed; } /* ---------- 6h. Founders ---------- */ .axn-people { display: grid; gap: clamp(20px, 2.4vw, 32px); } .axn-person__media { margin: 0 0 18px; position: relative; } /* The grade that used to live here is GONE, as its own note said it should be. It existed to reconcile a dark studio shot with a bright corporate one; the headshots are now a matched pair on one set, so desaturating and warming them was flattening photographs that already agreed — and adding a sepia cast to images that are already gold. Do not reintroduce it. Portrait ratio, not square: these are composed shots with the mark behind the subject, and a square top-anchored crop cut that composition in half. */ .axn-person__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 14px; } .axn-person__ph { aspect-ratio: 3 / 4; display: grid; place-content: center; gap: 14px; justify-items: center; background: linear-gradient(155deg, #EFE7D3, var(--axn-bg) 55%, #E9DFC6); border: 1px solid var(--axn-edge); } .axn-person__initial { font-family: var(--ff-display); font-weight: var(--fw-head); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; color: var(--axn-gold-deep); opacity: .34; } .axn-person__name { margin: 0 0 5px; font-size: calc(var(--fs-h3) * .85); } .axn-person__role { margin: 0; font-size: 14px; color: var(--axn-gold-deep); font-weight: 600; } /* ---- Founders: copy on the left, the pair on the right ------------------ The heading used to run full width above the portraits, which left the right-hand third of the row empty under it. It is a column now: about a third for the words, the rest for the two photographs. The pull quote that closed the section is gone at the client's request — `.axn-quote` went with it and nothing else used it. */ .axn-founders__in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; } .axn-founders__copy { display: grid; justify-items: start; gap: clamp(14px, 1.8vw, 20px); } .axn-founders__h { /* ⚠ `em`, not `ch` — see the note on `.axn-exch__head h2`. `14ch` here was 364px, not the ~700px it reads as, and that cap is what forced this heading into three lines on a wide screen while the identical sentence on the Founders page set in two. At 1024 the COLUMN (337px) is the binding constraint, not this, so the change shows from about 1200 up. */ margin: 0; max-width: 12em; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.03em; } .axn-founders__copy .axn-lede { margin: 0; max-width: 42ch; } @media (min-width: 900px) { /* ⚠ These are FRACTIONS OF THE TRACK SPACE, not of the row — the column gap comes off the total first. .38fr read as 25% of the section once the gap was taken out; .58fr is the ~35% that was asked for. */ .axn-founders__in { grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 78px); } /* The words stay beside the faces through the whole row. */ .axn-founders__copy { position: sticky; top: calc(var(--axn-hdr, 92px) + 48px); } } @media (prefers-reduced-motion: reduce) { .axn-founders__copy { position: static; } } /* The founders section was on a four-bloom glow field. The client asked for a flat ground instead, so `.axn-glowfield`, `.axn-glows*` and their four drift keyframes came out with it — nothing else used them. The section now simply takes `--axn-bg-2` from `.axn-section--alt`. */ /* ---------- 6h-iii. Numbered product rows ---------- Lifted out of the homepage so the Products & Providers page uses the same list rather than a copy of it. */ .axn-comparison-products { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--axn-edge); } /* ---- Product rows: the dark plate wipes in from the left ---------------- Hover a row and a dark plate sweeps across it left to right while the type turns white. ⚠ The wipe is a `clip-path`, not a `scaleX`. Scaling a rounded rectangle stretches its corner radius along with it, so the 16px corners would arrive flattened and then spring square; an inset clip keeps the radius honest the whole way across. It is also paint rather than layout, so the sweep costs nothing per frame. `--pad` lets the plate run a little past the text on both sides and is pulled straight back off the row with a negative margin, so nothing moves: only the plate is wider than the words sitting on it. The type does NOT all turn white at once. Each column's colour transition is delayed roughly in proportion to how far across the row it sits, so the white arrives about when the leading edge of the plate reaches it. That is what makes it read as one sweep instead of a plate and a separate colour change. ------------------------------------------------------------------------ */ .axn-comparison-products__row { --pad: clamp(12px, 1.6vw, 22px); --wipe: .45s; position: relative; isolation: isolate; display: grid; grid-template-columns: 42px 1fr 1.2fr; gap: 24px; padding-block: 28px; border-bottom: 1px solid var(--axn-edge); align-items: baseline; } .axn-comparison-products__row::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--pad) * -1); background: var(--axn-dark, #0B0A07); clip-path: inset(0 100% 0 0 round 16px); transition: clip-path var(--wipe) cubic-bezier(.4, .02, .2, 1); } .axn-comparison-products__row h3, /* ⚠ `.axn-cprow__t` is the SAME slot as the h3, for lists whose items are not headings. ISP's nine ways to open a market are activities, not sections — marking them up as h3 would put nine more entries in that page's outline for no reader benefit. */ .axn-comparison-products__row .axn-cprow__t { display: block; margin: 0; font-size: var(--fs-h3); font-family: var(--ff-display); font-weight: var(--fw-head); line-height: 1.2; letter-spacing: -.02em; } .axn-comparison-products__row p { margin: 0; max-width: 54ch; color: var(--axn-ink-2); } .axn-comparison-products__row .axn-swap__n, .axn-comparison-products__row h3, .axn-comparison-products__row .axn-cprow__t, .axn-comparison-products__row p { transition: color .2s linear; } @media (hover: hover) and (pointer: fine) { .axn-comparison-products__row:hover::before, .axn-comparison-products__row:focus-within::before { clip-path: inset(0 0 0 0 round 16px); } .axn-comparison-products__row:hover .axn-swap__n, .axn-comparison-products__row:focus-within .axn-swap__n { color: var(--axn-gold, #D4AF37); transition-delay: .01s; } .axn-comparison-products__row:hover h3, .axn-comparison-products__row:focus-within h3, .axn-comparison-products__row:hover .axn-cprow__t, .axn-comparison-products__row:focus-within .axn-cprow__t { color: #fff; transition-delay: .06s; } .axn-comparison-products__row:hover p, .axn-comparison-products__row:focus-within p { color: rgba(255, 255, 255, .74); transition-delay: .19s; } } /* Nothing sweeps for anyone who has asked for less motion — the plate is simply there, and the staggered colour delays are dropped so the row changes in one step rather than in three. */ @media (prefers-reduced-motion: reduce) { .axn-comparison-products__row::before { transition: none; } .axn-comparison-products__row :is(.axn-swap__n, h3, .axn-cprow__t, p) { transition: none; transition-delay: 0s !important; } } /* Items with a label and no description. The third track would otherwise sit empty and strand the label in the middle of the row. */ .axn-comparison-products--compact .axn-comparison-products__row { grid-template-columns: 42px 1fr; padding-block: 22px; } .axn-comparison-products--compact .axn-cprow__t { font-size: calc(var(--fs-h3) * .78); } @media (max-width: 720px) { .axn-comparison-products__row { grid-template-columns: 30px 1fr; gap: 10px 14px; padding-block: 24px; } /* ⚠ DIRECT CHILDREN only. This was `__row p`, which also matched the paragraph nested inside `.axn-prodrow__body` on Products & Providers — and that element is its own grid, so `grid-column: 2` there asked for a second column it does not have. The browser made an implicit one, and the description rendered in a ~30-character ribbon with the provider chips stranded full-width underneath it. A descendant selector reaching into a nested grid is the whole bug. */ .axn-comparison-products__row > p, .axn-comparison-products__row > .axn-prodrow__body { grid-column: 2; } /* ⚠ The `--compact` variant has to be restated here. Its rule is `.axn-comparison-products--compact .axn-comparison-products__row` — two classes, so it out-specifies the single-class rule above no matter that this media block comes later in the file. Without this line the ISP rows keep a 42px number column on a phone while every other list uses 30px. Media-query order never beats specificity. */ .axn-comparison-products--compact .axn-comparison-products__row { grid-template-columns: 30px 1fr; } } /* ---------- 6h-iv. Products & Providers page ---------- */ /* ⚠ This hero's opening is the longest on the site — the client's heading is a two-sentence line and his first paragraph runs to 135 characters. At the shared measures that set as 3 lines + 3 lines = 389px of content in a 311px box, so the hero had to grow to 481px while every other inner hero sits at 448px. Widening the measures here brings both to two lines and the content to 310px, so this hero matches the rest again — WITHOUT shortening a word of his. The alternative was editing his copy to fit a container, which is the wrong way round. Scoped to this template so no other hero moves. */ /* ⚠ This band carries a 154-character sentence as its lede, the longest on the site. It needs a real measure — the shared 60ch is set for a supporting line, and this one is the content. `--fs-lede` keeps it in the body scale where a sentence belongs. */ .page-template-template-products .axn-pintro__in { max-width: 72ch; } .page-template-template-products .axn-pintro__in .axn-lede { font-size: var(--fs-lede); line-height: 1.6; max-width: 62ch; } .page-template-template-products .axn-phero__h { max-width: 16em; } .page-template-template-products .axn-phero__copy { max-width: 78ch; } /* The provider list under each product row. It sits with the description, in the third column, so it reads as part of that product rather than as a separate thing — and it inherits the row's wipe like everything else. */ .axn-prodrow__body { display: grid; gap: 10px; } .axn-prodrow__by { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .axn-prodrow__by li { display: inline-flex; } .axn-prodrow__by a { font-family: var(--ff-tech); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 11px; border-radius: 99px; text-decoration: none; color: var(--axn-gold-deep); border: 1px solid var(--axn-edge); background: var(--axn-bg-2); transition: color .2s linear, border-color .2s linear, background-color .2s linear; } .axn-prodrow__by a:hover { border-color: var(--axn-gold); } /* Once the dark plate has swept over the row these chips are sitting on it. */ @media (hover: hover) and (pointer: fine) { .axn-comparison-products__row:hover .axn-prodrow__by a, .axn-comparison-products__row:focus-within .axn-prodrow__by a { color: var(--axn-gold); border-color: rgba(212,175,55,.5); background: rgba(255,255,255,.06); transition-delay: .19s; } } /* The authorized-provider index. */ .axn-authprov__grid { list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0; display: grid; gap: 12px; } @media (min-width: 640px) { .axn-authprov__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .axn-authprov__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .axn-authprov__card { display: grid; gap: 10px; align-content: start; height: 100%; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--axn-edge); border-radius: 16px; /* ⚠ Solid #FFFFFF, not `--axn-bg-2`. The cards sit on the section's warm alt ground, and a cream card on a cream ground read as a tint rather than as a card. White is what separates them — the same call already made on the boxes elsewhere on the site. No media query: this holds at every width. */ background: #FFFFFF; text-decoration: none; color: var(--axn-ink); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .axn-authprov__card:hover { transform: translateY(-3px); box-shadow: var(--axn-lift); border-color: var(--axn-gold); } .axn-authprov__name { font-family: var(--ff-display); font-weight: var(--fw-head); font-size: calc(var(--fs-h3) * .82); line-height: 1.15; letter-spacing: -.02em; } .axn-authprov__tags { display: flex; flex-wrap: wrap; gap: 5px; } /* On white the product line needs to be darker than `--axn-ink-3`, which was set for a tinted ground and goes weak here. */ .axn-authprov__tag { font-family: var(--ff-tech); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--axn-ink-2); } .axn-authprov__card .axn-ar { color: var(--axn-gold-deep); justify-self: start; } /* "Built to Serve Multiple Markets" — copy, with the counted figures beside. */ .axn-prodreach__in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; } @media (min-width: 900px) { .axn-prodreach__in { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); } } .axn-prodreach__copy { display: grid; justify-items: start; gap: clamp(14px, 1.8vw, 20px); } .axn-prodreach__copy h2 { margin: 0; max-width: 12em; } .axn-prodreach__copy p { margin: 0; max-width: 54ch; } .axn-prodreach__figs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .axn-prodreach__figs li { display: grid; gap: 4px; padding-block: 14px; border-top: 1px solid var(--axn-edge); } .axn-prodreach__figs li:last-child { border-bottom: 1px solid var(--axn-edge); } .axn-prodreach__n { font-family: var(--ff-display); font-weight: var(--fw-feature); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1; letter-spacing: -.03em; color: var(--axn-gold-deep); } .axn-prodreach__l { font-family: var(--ff-tech); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--axn-ink-3); } /* The two closing calls, as a pair. */ .axn-twocall__grid { display: grid; gap: clamp(16px, 2vw, 24px); } @media (min-width: 860px) { .axn-twocall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ⚠ FLEX column, not grid, and the button takes `margin-top: auto`. The two cards carry unequal copy — one question runs to a line, the other to two — and a stretched grid row left the shorter card with 130px of empty floor under its button. Pushing the buttons to the bottom turns that slack into deliberate space and lines the two buttons up with each other, which is what a pair of doors should look like. */ .axn-twocall__card { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.8vw, 36px); border: 1px solid var(--axn-edge); border-radius: 20px; background: var(--axn-bg-2); } /* ⚠ Both cards carry the same weight on purpose. One is addressed to customers and one to providers; neither is the better offer, and giving one a gold outline would say otherwise — the same mistake the Careers exchange cards were making. The ground is what tells them apart. */ .axn-twocall__card--alt { background: var(--axn-bg-3, #F3EDDE); } .axn-twocall__h { margin: 0; font-size: calc(var(--fs-h3) * .92); max-width: 16em; } .axn-twocall__p { margin: 0; max-width: 46ch; color: var(--axn-ink-2); font-size: var(--fs-lede); } .axn-twocall__card .axn-btn { align-self: start; margin-top: auto; padding-top: 15px; } /* ---------- 6i. Gold partnership band ---------- */ .axn-gold { position: relative; isolation: isolate; background: #D4AF37; color: #221903; overflow: hidden; } .axn-gold__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .axn-gold__in { display: grid; gap: clamp(30px, 4vw, 64px); align-items: center; } .axn-eyebrow--onGold { color: #4A3708; } .axn-eyebrow--onGold::before { background: #4A3708; } .axn-gold__h { color: #1B1402; margin: 0 0 18px; max-width: 9.72em; font-size: calc(var(--fs-h2) * 1.24); } .axn-gold__lede { font-size: var(--fs-lede); color: #2B2004; max-width: 46ch; margin: 0 0 14px; font-weight: 500; } .axn-gold__p { color: #3E2F08; max-width: 48ch; margin: 0 0 26px; } .axn-gold__list { list-style: none; display: grid; gap: 0; } .axn-gold__list li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid rgba(34,25,3,.22); font-size: calc(var(--fs-body) * .94); color: #2B2004; line-height: 1.5; } .axn-gold__list li:last-child { border-bottom: 1px solid rgba(34,25,3,.22); } .axn-gold__n { font-family: var(--ff-mono); font-size: 11px; color: #4A3708; flex: 0 0 auto; } /* ---------- 6j. Dual CTA ---------- */ .axn-dual__in { display: grid; gap: 1px; background: var(--axn-edge); border: 1px solid var(--axn-edge); } .axn-dual__card .axn-eyebrow { margin-bottom: 14px; } .axn-dual__card { background-color: var(--axn-surface); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; padding: clamp(28px, 3.4vw, 46px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .axn-dual__card h3 { margin: 0; font-size: calc(var(--fs-h3) * 1.08); max-width: 12.96em; } .axn-dual__card p { margin: 0; color: var(--axn-ink-3); font-size: calc(var(--fs-body) * .94); max-width: 44ch; } .axn-dual__card .axn-btn { margin-top: 8px; } /* ---------- 7. Footer — multi-layer ---------- */ .axn-footer { position: relative; isolation: isolate; overflow: hidden; background: var(--axn-dark); color: var(--axn-dark-text); } .axn-footer__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: -2; } .axn-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 14% 0%, rgba(212,175,55,.13), transparent 58%), linear-gradient(180deg, rgba(11,10,7,.86) 0%, rgba(11,10,7,.94) 46%, rgba(11,10,7,.99) 100%); } /* Layer 1 — closing CTA band */ .axn-fcta { border-bottom: 1px solid rgba(255,255,255,.12); padding-block: clamp(46px, 6vw, 92px); } .axn-fcta__in { text-align: center; } .axn-fcta__h { color: #fff; margin: 0 auto; max-width: 12.96em; font-weight: var(--fw-feature); font-size: calc(var(--fs-h2) * 1.14); letter-spacing: -.03em; line-height: 1.06; } .axn-fcta__p { margin: 18px auto 0; max-width: 58ch; color: var(--axn-dark-text); font-size: var(--fs-lede); } .axn-fcta__btns { display: flex; gap: 13px; flex-wrap: wrap; justify-content: center; margin-top: clamp(24px, 3vw, 34px); } /* Layer 2 — the grid */ .axn-footer__body { position: relative; padding-block: clamp(44px, 5.4vw, 76px) 30px; } .axn-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 3.4vw, 48px); } .axn-fcol__h { font-family: var(--ff-tech); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--axn-gold); font-weight: 400; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(212,175,55,.34); } /* The real lockup, not a typeset stand-in. It is drawn on transparency, so the dark ground reads straight through the gold frame. Sized independently of the header's Customizer width — the footer mark is a signature, not a nav item. */ .axn-fbrand { display: inline-block; margin-bottom: 18px; } .axn-fbrand .axn-brand__img { width: clamp(178px, 17vw, 236px); transition: none; } .axn-fcol__blurb { margin: 0 0 22px; font-size: 13.5px; line-height: 1.65; color: var(--axn-dark-text); max-width: 36ch; } .axn-flist { list-style: none; display: flex; flex-direction: column; gap: 11px; } .axn-flist a { font-size: 15px; color: var(--axn-dark-text); transition: color var(--axn-dur) ease, padding-left var(--axn-dur) ease; } .axn-flist a:hover { color: var(--axn-gold); padding-left: 5px; } .axn-fmarkets { list-style: none; display: flex; flex-direction: column; gap: 15px; } .axn-fmarkets__state { display: block; font-family: var(--ff-display); font-weight: 700; font-size: 16.5px; color: var(--axn-dark-text); letter-spacing: -.01em; transition: color var(--axn-dur) ease; } .axn-fmarkets__state:hover { color: var(--axn-gold); } .axn-fmarkets__list { display: block; margin-top: 4px; font-size: 14px; color: var(--axn-dark-dim); line-height: 1.55; } /* ⚠ Shares the inline-link TREATMENT — display face, dashed gold rule, the shared arrow — but NOT its size. The unified size is tuned for body copy; at 23px in a footer column it was louder than the column heading above it and wrapped onto two lines. Treatment is the thing that should be consistent, not the measurement. */ .axn-flink { margin-top: 20px; font-size: 14px; letter-spacing: -.01em; gap: 9px; padding-bottom: 7px; } .axn-footer__social { display: flex; gap: 9px; list-style: none; } .axn-footer__social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.28); color: var(--axn-dark-text); transition: color var(--axn-dur) ease, border-color var(--axn-dur) ease; } .axn-footer__social a:hover { color: var(--axn-gold); border-color: var(--axn-gold-deep); } /* Layer 3 — legal bar */ .axn-flegal { margin-top: clamp(34px, 4vw, 54px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: baseline; } .axn-flegal__copy { margin: 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; color: var(--axn-dark-dim); } .axn-flegal__copy a { color: var(--axn-dark-text); border-bottom: 1px solid rgba(255,255,255,.3); } .axn-flegal__copy a:hover { color: var(--axn-gold); } .axn-flegal__links { display: flex; gap: 20px; } .axn-flegal__links a { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--axn-dark-dim); transition: color var(--axn-dur) ease; } .axn-flegal__links a:hover { color: var(--axn-gold); } /* Layer 4 — fine print */ .axn-fnotice { margin: 22px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--axn-dark-dimmer); max-width: 92ch; font-style: italic; } /* Layer 5 — the ghost wordmark, bleeding off the base */ /* Halved. At 331px it was the largest single element in the footer and it is decoration — it was setting the footer's height on its own. */ .axn-fghost { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 26%); font-family: var(--ff-tech); font-size: clamp(3rem, 12vw, 11rem); line-height: .74; letter-spacing: .05em; color: rgba(255,255,255,.07); white-space: nowrap; pointer-events: none; user-select: none; z-index: -1; } /* Room for the ghost to read, rather than sitting behind the fine print. */ .axn-footer__body { padding-bottom: clamp(56px, 7vw, 104px); } /* ---------- 8. Scroll reveal (below the fold only — never on the hero) ---------- */ .axn-js .axn-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--axn-ease), transform .55s var(--axn-ease); transition-delay: var(--axn-delay, 0ms); } .axn-js .axn-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .axn-js .axn-reveal { opacity: 1; transform: none; transition: none; } .axn-btn, .axn-nav__list a::after { transition: none; } } /* ---------- 9. Search ---------- */ .axn-search { display: flex; gap: 8px; max-width: 480px; } .axn-search__input { flex: 1; padding: 11px 14px; border: 1px solid var(--axn-edge); background: var(--axn-surface); font: inherit; color: var(--axn-ink); } /* ---------- 10. Breakpoints ---------- */ @media (min-width: 560px) { .axn-header__cta { display: inline-flex; } } @media (min-width: 600px) { .axn-footer__grid { grid-template-columns: 1fr 1fr; } .axn-fcol--brand, .axn-fcol--markets { grid-column: 1 / -1; } } @media (min-width: 760px) { .axn-statrail__in { grid-template-columns: repeat(4, 1fr); } .axn-stat:nth-child(3) { padding-left: clamp(18px, 2.6vw, 34px); } .axn-stat:nth-child(3)::before { display: block; } .axn-sechead--split { grid-template-columns: 1.1fr 1fr; } .axn-dual__in { grid-template-columns: 1fr 1fr; } .axn-people { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .axn-badge { display: grid; } .axn-swap__thumb { display: block; } .axn-swap__item { grid-template-columns: auto 1fr 92px; } .axn-swap__inline { display: none; } } @media (min-width: 1000px) { .axn-career__in { grid-template-columns: 1fr 1fr; } .axn-markets__in { grid-template-columns: 1fr 1fr; } .axn-gold__in { grid-template-columns: 1.05fr .95fr; } .axn-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .axn-swap { grid-template-columns: 1fr 1fr; } .axn-swap__stage { display: block; position: sticky; top: calc(var(--axn-hdr-c) + 28px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--axn-dark); } .axn-swap__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s var(--axn-ease), transform .7s var(--axn-ease); } .axn-swap__img.is-active { opacity: 1; transform: none; } .axn-ph--float { position: absolute; left: 0; bottom: 0; background: var(--axn-gold); color: #241B06; padding: 8px 12px; z-index: 2; } .axn-footer__grid { grid-template-columns: 1.45fr .8fr .9fr 1.35fr; } .axn-fcol--brand, .axn-fcol--markets { grid-column: auto; } } @media (min-width: 1180px) { .axn-nav { display: block; } .axn-mn__trigger { display: none; } } /* ---------- 11. Contact — form card + aside ---------- */ .axn-contact__in { display: grid; gap: 28px; align-items: start; } .axn-card { background: var(--axn-surface); border: 1px solid var(--axn-edge); border-radius: 22px; padding: clamp(22px, 3.4vw, 44px); box-shadow: var(--axn-lift); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; } .axn-panel { border: 1px solid var(--axn-edge); border-radius: 18px; padding: clamp(20px, 2.4vw, 28px); background-color: var(--axn-bg-2); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; } .axn-panel + .axn-panel { margin-top: 18px; } .axn-panel .axn-eyebrow { margin-bottom: 16px; } .axn-panel--dark { background-color: var(--axn-dark); color: var(--axn-dark-text); border-color: var(--axn-dark-edge); background-image: linear-gradient(rgba(11,10,7,.82), rgba(11,10,7,.9)), url("../images/plate-markets.jpg"); background-size: cover; background-position: center; } .axn-panel__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--axn-dark-dim); } .axn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: axn-step; } .axn-steps__item { display: flex; gap: 14px; align-items: flex-start; } .axn-steps__n { flex: 0 0 auto; font-family: var(--ff-mono); font-size: 12px; font-weight: 600; color: var(--axn-gold-deep); padding-top: 2px; letter-spacing: .04em; } .axn-steps__txt { font-size: 14.5px; line-height: 1.6; color: var(--axn-ink-2); } .axn-dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; } .axn-dlist li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; } .axn-dlist svg { flex: 0 0 auto; margin-top: 2px; color: var(--axn-gold-deep); } .axn-dlist a { color: var(--axn-ink); border-bottom: 1px solid var(--axn-edge); } .axn-dlist a:hover { border-bottom-color: var(--axn-green); color: var(--axn-green); } .axn-dlist--markets li { display: block; } .axn-dlist--markets strong { display: block; font-family: var(--ff-tech); font-size: 10.5px; letter-spacing: var(--ls-tech); text-transform: uppercase; color: var(--axn-gold); margin-bottom: 4px; } .axn-dlist--markets span { color: var(--axn-dark-dim); font-size: 14px; line-height: 1.55; } /* ---------- 12. Thank you ---------- */ .axn-ty { text-align: center; } .axn-ty__in { max-width: 760px; } .axn-ty__tick { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; color: var(--axn-green); background: var(--axn-surface); border: 1px solid var(--axn-edge); box-shadow: 0 0 0 10px rgba(46,125,34,.07), var(--axn-lift); } .axn-ty .axn-eyebrow--rule { justify-content: center; } .axn-ty__h { margin: 0 0 16px; } .axn-ty__lede { margin: 0 auto; max-width: 56ch; color: var(--axn-ink-3); font-size: var(--fs-lede); } .axn-ty__prose { margin: 28px auto 0; text-align: left; } .axn-ty__cards { display: grid; gap: 14px; margin-top: 38px; text-align: left; } .axn-ty__card { position: relative; display: block; padding: 22px 56px 22px 24px; background: var(--axn-surface); border: 1px solid var(--axn-edge); border-radius: 16px; background-image: url("../images/tex-grain.png"); background-size: 240px 240px; transition: border-color var(--axn-dur) var(--axn-ease), transform var(--axn-dur) var(--axn-ease), box-shadow var(--axn-dur) var(--axn-ease); } .axn-ty__card:hover { border-color: var(--axn-gold); transform: translateY(-3px); box-shadow: var(--axn-lift); } .axn-ty__card-h { display: block; font-weight: 700; font-size: 16px; color: var(--axn-ink); } .axn-ty__card-b { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--axn-ink-3); } .axn-ty__card-go { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--axn-gold-deep); transition: transform var(--axn-dur) var(--axn-ease); } .axn-ty__card:hover .axn-ty__card-go { transform: translateY(-50%) translateX(4px); } @media (min-width: 720px) { .axn-ty__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .axn-contact__in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 34px; } .axn-contact__aside { position: sticky; top: calc(var(--axn-hdr-c) + 24px); } } /* ---------- 13. Shared small parts ---------- */ /* Margin washes for a centred section, so the copy isn't floating in blank ivory — green left, gold right, the two brand colours meeting behind the text. Radial falloff does the softening, so there is no blur filter to pay for on a 620px element. Purely decorative: both sit behind the content and are clipped by the section, and neither moves measured contrast. Gold runs a little stronger than green because it is closer in tone to the ivory ground and disappears at the same alpha. */ .axn-wash { position: relative; isolation: isolate; overflow: hidden; } .axn-wash::before, .axn-wash::after { content: ""; position: absolute; top: 50%; translate: 0 -50%; width: clamp(300px, 36vw, 620px); aspect-ratio: 1.15; z-index: -1; pointer-events: none; } .axn-wash::before { left: clamp(-180px, -9vw, -60px); background: radial-gradient(closest-side, rgba(46,125,34,.20), rgba(87,179,59,.09) 55%, transparent 78%); } .axn-wash::after { right: clamp(-180px, -9vw, -60px); background: radial-gradient(closest-side, rgba(212,175,55,.26), rgba(246,226,155,.12) 55%, transparent 78%); } /* Diagonal variant — same two colours, different composition, so a second section using it reads as a relative rather than a repeat. Green enters top left, gold leaves bottom right, which also happens to match the two paths the section offers: a career, and a partnership. Wider and flatter than the symmetric version. */ .axn-wash--diag::before, .axn-wash--diag::after { width: clamp(340px, 42vw, 720px); aspect-ratio: 1.6; translate: none; } .axn-wash--diag::before { top: clamp(-150px, -13vw, -60px); bottom: auto; left: clamp(-220px, -11vw, -90px); right: auto; } .axn-wash--diag::after { top: auto; bottom: clamp(-150px, -13vw, -60px); right: clamp(-220px, -11vw, -90px); left: auto; } .axn-rule { display: block; width: 34px; height: 2px; background: var(--axn-gold); margin-bottom: 18px; } .axn-rule--onDark { background: var(--axn-gold); } .axn-rule--onGold { background: #4A3708; } .axn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--axn-edge); background: var(--axn-bg-2); font-size: 12px; color: var(--axn-ink-3); line-height: 1.3; white-space: nowrap; } .axn-chip svg { color: var(--axn-gold-deep); } /* ---------- 14. Careers ---------- */ /* Every inner page runs this hero at half the viewport — tall enough to set the page, short enough that the content below is never pushed off the first screen. The homepage keeps its own taller plate. */ .axn-phero { position: relative; isolation: isolate; overflow: hidden; background: var(--axn-dark); /* A FLOOR, not a fixed height. Every inner page still arrives at the same size — six of the seven have openings short enough that 50vh is what they get — but a longer one now grows instead of spilling out of the plate. ⚠ It was `height: 50vh`, and Products & Providers carries 389px of content in a 311px box: it overflowed the bottom by 78px, which is what made every hero look bottom-heavy rather than centred. ⚠ And the padding is SYMMETRIC. It was 102px top against 35px bottom — a clearance for a header that does not actually overlap the hero — so `align-items: center` was centring the content inside a box that was itself pushed 34px down the plate. Optical centre and true centre have to agree, and they only do when the padding matches. */ min-height: max(50vh, 430px); display: grid; align-items: center; padding-block: clamp(40px, 4.5vw, 64px); } /* On a phone 50vh is too little for a headline plus a line of copy, and the address bar moves the number around, so height goes back to the content. */ @media (max-width: 720px) { .axn-phero { min-height: 68vh; } } .axn-phero__plate { position: absolute; inset: 0; z-index: -2; } .axn-phero__img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; } .axn-phero::after { content: ""; position: absolute; inset: 0; z-index: -1; /* ⚠ The overlay runs the DIAGONAL: 135deg in CSS points toward the bottom-right, so the gradient STARTS at the top-left. Dark where the words are, almost nothing by the opposite corner, which is what lets a photograph actually show. It was `92deg` — near-horizontal — which flattened the plate evenly top to bottom. The second layer is a short lift off the bottom-left only. Without it the copy sitting low on the plate loses its ground once the diagonal has thinned out down there. It is deliberately short and weak; if a photo ever fights it, lighten this, not the diagonal. */ background: linear-gradient(135deg, rgba(6,5,3,.94) 0%, rgba(6,5,3,.82) 26%, rgba(6,5,3,.52) 55%, rgba(6,5,3,.20) 78%, rgba(6,5,3,.06) 100%), linear-gradient(8deg, rgba(6,5,3,.72) 0%, rgba(6,5,3,.28) 22%, transparent 46%); } .axn-phero__in { position: relative; } .axn-phero__h { margin: 0; color: #fff; max-width: 11.02em; font-weight: var(--fw-feature); font-size: var(--fs-phero); line-height: 1.02; letter-spacing: -.035em; } /* ⚠ ONE gap value for the whole hero stack, so the rhythm cannot drift. It was two different clamps — 20-30px above the lede, 22-32px above the button — and worse, the lede kept its default paragraph bottom margin, which does NOT collapse into the button because they are siblings of different parents. The button therefore sat 18.8px + 26.6px = 45px below the lede while the lede sat 25px below the headline. Measured, not guessed. So: one custom property for every gap in the stack, and the lede's trailing margin removed — it is the last thing in its box and has nothing to push away from. */ .axn-phero { --phero-gap: clamp(20px, 2.4vw, 30px); } .axn-phero__copy { max-width: 56ch; margin-top: var(--phero-gap); } .axn-phero__copy p { color: var(--axn-dark-dim); margin-bottom: 0; } .axn-phero__copy p + p { margin-top: .6em; } .axn-phero__lead { color: rgba(255,255,255,.92); font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); } .axn-phero .axn-btn { margin-top: var(--phero-gap); } /* ---- The drifting A-mark ------------------------------------------------ One class, used by every dark plate that carries the burst. Masked away from the left so it never sits under the words, and moved on the COMPOSITOR (transform only) so it costs nothing to run. */ .axn-burst { position: absolute; z-index: -1; pointer-events: none; top: 50%; right: -10%; translate: 0 -50%; width: clamp(360px, 46vw, 760px); aspect-ratio: 1.485; background: url("../images/mark-burst.webp") 50% 50% / contain no-repeat; opacity: .34; -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%); mask-image: linear-gradient(90deg, transparent, #000 58%); will-change: transform; animation: axn-burst-drift 30s ease-in-out infinite alternate; } @keyframes axn-burst-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3.5%, 2.5%, 0) scale(1.09); } } @media (prefers-reduced-motion: reduce) { .axn-burst { animation: none; } } @media (max-width: 720px) { .axn-burst { opacity: .22; right: -26%; } } /* ---- Running rays ------------------------------------------------------- The mark's fibre spray, travelling — light leaves the point inside the A as a directional fan and keeps going, continuously. Lifted out of the homepage call-to-action so the hero and that panel share ONE definition; a caller sets only where it sits, how big it is and how bright. ⚠ Every user of this must set `top`, `left`-or-`right`, `translate` and `width`. There are deliberately no defaults — a burst anchored in the wrong place is worse than no burst. The two pseudo-elements run the same emanation half a cycle apart, so the stream never gaps. */ .axn-rays { position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1; /* Arc first, then distance. `intersect` keeps only what both allow. ⚠ 0deg in a conic gradient is TWELVE O'CLOCK, not three. Starting the sweep at -52deg pointed the whole fan straight up; it has to start at 38deg so the 104deg arc is centred on 90deg, which is to the right. */ -webkit-mask-image: conic-gradient(from 38deg, #000 0deg 104deg, transparent 104deg 360deg), radial-gradient(closest-side, #000 2%, rgba(0,0,0,.7) 14%, rgba(0,0,0,.26) 34%, transparent 54%); mask-image: conic-gradient(from 38deg, #000 0deg 104deg, transparent 104deg 360deg), radial-gradient(closest-side, #000 2%, rgba(0,0,0,.7) 14%, rgba(0,0,0,.26) 34%, transparent 54%); -webkit-mask-composite: source-in; mask-composite: intersect; /* A whisper of sway on top of the travel, so it is not purely mechanical. */ animation: axn-rays-sway 34s ease-in-out infinite alternate; } .axn-rays::before, .axn-rays::after { content: ""; position: absolute; inset: 0; transform-origin: 50% 50%; background: /* Sparkles, scattered along the throw. */ radial-gradient(circle at 58% 44%, rgba(255,255,255,.55) 0 1.1px, transparent 2px), radial-gradient(circle at 63% 57%, rgba(246,226,155,.5) 0 1.4px, transparent 2.4px), radial-gradient(circle at 55% 53%, rgba(255,255,255,.42) 0 1px, transparent 1.8px), radial-gradient(circle at 68% 47%, rgba(224,71,158,.42) 0 1.2px, transparent 2.2px), radial-gradient(circle at 61% 39%, rgba(87,179,59,.4) 0 1.1px, transparent 2px), radial-gradient(circle at 72% 54%, rgba(255,158,44,.4) 0 1.3px, transparent 2.3px), radial-gradient(circle at 66% 62%, rgba(255,255,255,.35) 0 1px, transparent 1.8px), radial-gradient(circle at 76% 43%, rgba(246,226,155,.34) 0 1.2px, transparent 2.1px), /* The filaments themselves — uneven, and in the mark's four hues. */ repeating-conic-gradient(from -8deg, rgba(246,226,155,.16) 0deg .7deg, transparent .7deg 2.9deg, rgba(87,179,59,.1) 2.9deg 3.5deg, transparent 3.5deg 6.2deg, rgba(224,71,158,.085) 6.2deg 6.7deg, transparent 6.7deg 9.6deg, rgba(255,255,255,.09) 9.6deg 10deg, transparent 10deg 13.4deg, rgba(255,158,44,.1) 13.4deg 14.1deg, transparent 14.1deg 18.2deg); will-change: transform, opacity; animation: axn-emanate 9s linear infinite; } /* Half a cycle behind, so the stream never gaps. */ .axn-rays::after { animation-delay: -4.5s; } @keyframes axn-emanate { 0% { transform: scale(.28); opacity: 0; } 14% { opacity: 1; } 72% { opacity: 1; } 100% { transform: scale(1.42); opacity: 0; } } @keyframes axn-rays-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } } /* The hero's fan. Anchored on the A's aperture in the artwork and thrown to the LEFT, across the plate, the way the mark itself throws it. ⚠ 0deg in a conic gradient is twelve o'clock. A fan pointing left has to be centred on 270deg, so a 104deg arc starts at 218deg. Masked away from the left edge exactly like `.axn-burst`, so the filaments thin out before they reach the headline rather than running under it. */ .axn-phero__rays { top: 50%; right: 4%; translate: 50% -50%; width: 150vmax; /* Subtle. With the A-mark gone the fan is the only thing on the plate, so it has to stay atmosphere and not become the subject. Taken down again in the restraint pass — the same spray appears on nine assets across the site and repetition was doing the shouting. */ opacity: .18; -webkit-mask-image: conic-gradient(from 218deg, #000 0deg 104deg, transparent 104deg 360deg), radial-gradient(closest-side, #000 2%, rgba(0,0,0,.7) 12%, rgba(0,0,0,.24) 30%, transparent 48%), linear-gradient(90deg, transparent, #000 46%); mask-image: conic-gradient(from 218deg, #000 0deg 104deg, transparent 104deg 360deg), radial-gradient(closest-side, #000 2%, rgba(0,0,0,.7) 12%, rgba(0,0,0,.24) 30%, transparent 48%), linear-gradient(90deg, transparent, #000 46%); -webkit-mask-composite: source-in; mask-composite: intersect; } @media (max-width: 720px) { .axn-phero__rays { opacity: .12; } } /* The point the fan leaves from. Without it the rays converge on nothing, which reads as a mistake rather than as light. Unmasked on purpose — it is a dot, not a wedge, so the conic arc that shapes the rays must not touch it. */ .axn-phero__core { position: absolute; z-index: -1; pointer-events: none; top: 50%; right: 4%; translate: 50% -50%; width: clamp(150px, 20vw, 340px); aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(246, 226, 155, .34) 4%, rgba(246, 226, 155, .1) 13%, transparent 34%); animation: axn-core-pulse 7s ease-in-out infinite alternate; } @keyframes axn-core-pulse { from { opacity: .72; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .axn-phero__core { animation: none; } } @media (max-width: 720px) { .axn-phero__core { opacity: .55; } } /* Small factual chips under an inner-page heading — a market's state, a provider's products. Never a claim, only what the database holds. */ /* The opening paragraphs that used to live inside a hero. */ /* The intro paragraph under an inner-page hero is SUPPORTING copy, not a second lede. At body size and a 68ch measure it came out the same weight as the hero lede directly above it, so the top of the page read as two big undifferentiated blocks. A step down in size and a tighter measure settle it underneath the lede instead of competing with it. ⚠ `:not(.axn-lede)` is LOAD-BEARING, not defensive. Careers calls `axn_render_page_intro( $paras, true )`, which promotes its first paragraph to a lede; without the exclusion that lede is silently shrunk too. */ .axn-pintro__in { max-width: 60ch; display: grid; gap: 14px; } .axn-pintro__in p { margin: 0; } .axn-pintro__in p:not(.axn-lede) { font-size: .9375rem; line-height: 1.72; } /* The heading keeps its own, much tighter measure — the 60ch on the wrapper is a measure for PROSE, and a display-size line run out to it would read as a paragraph set in large type. */ /* ⚠ `em`, not `ch` — see `.axn-exch__head h2`. `18ch` was 473px here, close enough by luck that it read correctly, but it says 18 characters and means about 11.7em. Stated honestly it is the same 12em as every other display measure on the site. */ .axn-pintro__h { margin: 0 0 8px; max-width: 12em; line-height: 1.08; letter-spacing: -.03em; } /* ---- The drifting brand watermark -------------------------------------- "Axion" at an absurd size, almost invisible, sliding behind the intro copy. ⚠ `overflow: clip`, not `hidden` — the house rule everywhere on this site, because `hidden` would make this a scroll container for anything sticky that is ever put inside it. `clip` trims the overhang just the same. ⚠ The alpha is deliberately tiny. At anything you can comfortably read, the word competes with the paragraph sitting on top of it and the section stops being about the words. If it needs tuning, move `--wm-ink`, not the size. The track travels -50% because it holds exactly two identical groups; see the note in place-parts.php. `linear`, because any easing in an infinite marquee shows up as a pulse once per cycle. */ .axn-pintro { --wm-ink: rgba(22, 20, 14, .028); position: relative; isolation: isolate; overflow: clip; background-color: var(--axn-bg-3, #F3EDDE); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; border-block: 1px solid var(--axn-edge); } .axn-pintro__wm { position: absolute; inset: 0; z-index: -1; display: grid; align-content: center; pointer-events: none; user-select: none; } .axn-pintro__wmtrack { display: flex; width: max-content; animation: axn-wm-drift 64s linear infinite; will-change: transform; } .axn-pintro__wmgroup { display: flex; } /* The band is a row now: copy on the left, medallion on the right. Below 900px it stacks and the medallion sits under the copy, on the left, where the thumb is. */ .axn-pintro__grid { display: grid; gap: clamp(26px, 4vw, 48px); align-items: center; } @media (min-width: 900px) { .axn-pintro__grid { grid-template-columns: minmax(0, 1fr) auto; } } /* ---- The turning medallion --------------------------------------------- A ring of type going round for ever, with the site's arrow in the middle. Hover and the green disc grows out to fill the whole circle. ⚠ Grid stretches its items, so without `justify-self`/`align-self` this would be pulled into a tall oval instead of staying a circle. */ .axn-medallion { position: relative; display: grid; place-items: center; justify-self: start; align-self: center; /* ⚠ Smaller than it was (was up to 168px). It is a secondary route, not the section's subject, and at the old size it pulled the eye off the heading it sits beside. */ width: clamp(108px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; text-decoration: none; color: #fff; flex: none; } @media (min-width: 900px) { .axn-medallion { justify-self: end; } } /* At rest a small green dot behind the arrow; on hover it opens out to the full circle. Transform only — nothing here reflows. */ .axn-medallion__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--axn-green, #2E7D22); transform: scale(.58); transition: transform .55s cubic-bezier(.4, .05, .2, 1); } .axn-medallion:hover .axn-medallion__disc, .axn-medallion:focus-visible .axn-medallion__disc { transform: scale(1); } .axn-medallion__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: axn-medallion-turn 34s linear infinite; } .axn-medallion__ring text { font-family: var(--ff-display); font-weight: 700; font-size: 8.2px; text-transform: uppercase; fill: var(--axn-ink, #16140E); transition: fill .35s ease; } /* Once the disc has filled the circle the ring is sitting on green, so the type has to change with it or it disappears into the fill. */ .axn-medallion:hover .axn-medallion__ring text, .axn-medallion:focus-visible .axn-medallion__ring text { fill: #fff; } .axn-medallion > .axn-ar { position: relative; color: #fff; } /* Mid-page re-entry to the form. Margin only — no new layout. */ .axn-moves__cta { margin-top: clamp(22px, 2.6vw, 32px); } @keyframes axn-medallion-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .axn-medallion__ring { animation: none; } .axn-medallion__disc { transition: none; } } .axn-pintro__wmword { font-family: var(--ff-display); font-weight: var(--fw-feature); /* ⚠ Was clamp(6rem, 17vw, 17rem) — tall enough that the wordmark competed with the copy sitting on it. Brand character does not need to be the largest thing in the band. */ font-size: clamp(4rem, 10vw, 10rem); line-height: .82; letter-spacing: -.045em; /* Set in caps here rather than in the markup, so the template keeps the brand's own spelling and the casing stays a styling decision. */ text-transform: uppercase; padding-inline: .12em; color: var(--wm-ink); white-space: nowrap; } @keyframes axn-wm-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .axn-pintro__wmtrack { animation: none; } } .axn-phero__meta { /* Chips sit tighter to the headline than the lede does — they read as part of it, not as the next thing. Still derived from the one gap value. */ list-style: none; margin: calc(var(--phero-gap, 24px) * .72) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .axn-phero__meta li { font-family: var(--ff-tech); font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--axn-gold); border: 1px solid rgba(212,175,55,.42); border-radius: 99px; padding: 7px 13px; line-height: 1; } /* Rob's story */ .axn-story__in { display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: start; } .axn-story__h { margin: 0 0 22px; } .axn-story__figure { margin: 0 0 18px; } .axn-story__photo { border-radius: 18px; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; } .axn-story__ph { display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; border: 1px solid var(--axn-edge); background: linear-gradient(155deg, #EFE7D3, var(--axn-bg) 55%, #E9DFC6); } .axn-story__ph span { font-family: var(--ff-display); font-weight: var(--fw-head); font-size: clamp(2.5rem, 6vw, 4rem); color: var(--axn-gold-deep); opacity: .3; } .axn-story__cite { margin: 0; display: grid; gap: 3px; font-size: 14px; color: var(--axn-ink); font-weight: 600; } .axn-story__org { font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--axn-ink-3); font-weight: 400; } .axn-story__quote { margin: 0; padding: clamp(24px, 3vw, 42px); border-radius: 22px; background: var(--axn-surface); border: 1px solid var(--axn-edge); box-shadow: var(--axn-lift); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; position: relative; } .axn-story__quote::before { content: ""; position: absolute; left: 0; top: clamp(24px, 3vw, 42px); bottom: clamp(24px, 3vw, 42px); width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--axn-gold-hi), var(--axn-gold), var(--axn-green-bright)); } .axn-story__quote p { color: var(--axn-ink-2); font-size: clamp(1rem, .96rem + .3vw, 1.125rem); line-height: 1.72; } .axn-story__quote p:first-child { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); color: var(--axn-ink); font-weight: 500; line-height: 1.5; letter-spacing: -.015em; } .axn-story__quote p:last-child { margin-bottom: 0; } /* Ready for something different */ .axn-diff__in { display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: start; } .axn-stack { list-style: none; display: grid; gap: 0; } .axn-stack__item { display: flex; gap: 16px; align-items: baseline; padding: clamp(16px, 2vw, 22px) 0; border-top: 1px solid var(--axn-edge); } .axn-stack__item:last-child { border-bottom: 1px solid var(--axn-edge); } .axn-stack__n { flex: 0 0 auto; font-family: var(--ff-mono); font-size: 11px; color: var(--axn-gold-deep); letter-spacing: .06em; } .axn-stack__item p { margin: 0; font-family: var(--ff-display); font-size: clamp(1.0625rem, 1rem + .55vw, 1.375rem); line-height: 1.38; letter-spacing: -.02em; color: var(--axn-ink); } /* Skills — gold band */ /* Skills — ivory, with the bottom of the section grading into the dark band that follows it. The gold is an accent here (rule, numerals, the hairline that draws under a row) rather than a ground; a flat gold slab was the one treatment the client had already rejected twice elsewhere. */ .axn-skills { position: relative; isolation: isolate; overflow: hidden; background-color: var(--axn-bg-2); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; border-top: 1px solid var(--axn-edge); /* The join with the dark band below is a clean edge carrying a gold hairline. A long fade was tried here and read as fog over the page. */ border-bottom: 2px solid var(--axn-gold); } /* One warm source, upper right. Deliberately not the two-sided .axn-wash used on Founders and the homepage CTA — a third section running that same device would read as a template rather than a page. */ .axn-skills::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: clamp(-240px, -17vw, -120px); right: clamp(-190px, -12vw, -80px); width: clamp(360px, 44vw, 720px); aspect-ratio: 1.25; background: radial-gradient(closest-side, rgba(212,175,55,.24), rgba(246,226,155,.10) 54%, transparent 78%); } .axn-skills__head { max-width: 52ch; } .axn-skills h2 { max-width: 10.37em; } .axn-skills .axn-lede { margin-top: 14px; } .axn-skills__grid { list-style: none; margin: clamp(30px, 3.6vw, 48px) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--axn-edge); } .axn-skill { position: relative; display: grid; gap: 9px; align-content: start; padding: clamp(18px, 2.2vw, 26px) 0 clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--axn-edge); } .axn-skill__n { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; color: var(--axn-gold-deep); } .axn-skill__t { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); letter-spacing: -.015em; color: var(--axn-ink); line-height: 1.3; } /* The hairline under a row draws in on hover — the whole cell is the target, which the old 4x2 of tightly packed gold boxes never gave you. */ .axn-skill::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--axn-gold-deep); transition: width var(--axn-dur-l) var(--axn-ease); } .axn-skill:hover::after, .axn-skill:focus-within::after { width: 100%; } @media (prefers-reduced-motion: reduce) { .axn-skill::after { transition: none; } } /* The closing line is the point of the section, so it is set as a statement rather than as another paragraph. */ .axn-skills__note { margin: clamp(30px, 3.6vw, 46px) 0 0; max-width: 44ch; padding-left: clamp(16px, 2vw, 22px); border-left: 2px solid var(--axn-gold); color: var(--axn-ink); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem); line-height: 1.45; letter-spacing: -.015em; } /* Opportunity moves — reuses the markets band */ .axn-moves__in { display: grid; gap: clamp(34px, 4vw, 66px); align-items: start; } .axn-moves__copy { max-width: 56ch; } /* What you bring / what we bring */ /* ⚠ `em`, NOT `ch`. This heading was on `max-width: 24ch` and set in FOUR lines, because `ch` is the width of the "0" glyph and in this condensed display face that is only ~10.9px at a 40px font — so 24ch resolved to 263px, narrower than the word "Bring—and" is long (204px). `em` is keyed to the font size itself, so it means what it looks like it means at display sizes. ⚠ And the measure goes on the H2 ITSELF, not on the wrapper. `em` resolves against the element's OWN font-size — on the wrapper that is the inherited 16px, so 12em there is 192px and the heading gets worse, not better. On the h2 it is 12 × 40.6px ≈ 487px, which sets it in two lines. */ .axn-exch__head { max-width: none; } .axn-exch__head h2 { margin: 0; max-width: 12em; } /* The two cards are an EXCHANGE, so they carry equal weight. One of them used to have a gold outline, which read as the better half of the deal — an emphasis the client never asked for. The marks still tell them apart. */ .axn-exch__grid { display: grid; gap: clamp(16px, 1.8vw, 22px); margin-top: clamp(26px, 3vw, 38px); align-items: stretch; } .axn-exch__card { padding: clamp(22px, 2.6vw, 34px); border-radius: 20px; border: 1px solid var(--axn-edge); background: var(--axn-surface); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; transition: transform var(--axn-dur) var(--axn-ease), box-shadow var(--axn-dur) var(--axn-ease); } .axn-exch__card:hover { transform: translateY(-3px); box-shadow: var(--axn-lift); } .axn-exch__card p { margin: 0; font-size: clamp(1rem, .96rem + .35vw, 1.1875rem); line-height: 1.6; color: var(--axn-ink); } .axn-exch__mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; margin-bottom: 18px; background: var(--axn-bg); border: 1px solid var(--axn-edge); color: var(--axn-gold-deep); } /* ⚠ Gold, not green, for the same reason. It also keeps the pair even: both cards now carry a gold-family mark and neither reads as the better half. */ .axn-exch__card--axion .axn-exch__mark { background: var(--axn-gold-deep); border-color: var(--axn-gold-deep); color: #fff; } .axn-exch__note { margin: clamp(22px, 2.6vw, 30px) 0 0; max-width: 56ch; font-size: var(--fs-lede); color: var(--axn-ink-3); } /* The mark is what distinguishes the two sides now, so it earns a little more presence than a 42px chip. */ .axn-exch__mark { width: 48px; height: 48px; } /* Open roles */ /* Same fault as `.axn-ispgap__head` — 24ch on a 16px wrapper is 263px. It has not shown yet only because Open Roles hides itself while there are no openings; it would have appeared the day the client added one. */ .axn-roles__head { max-width: none; } .axn-roles__head h2 { margin: 0; max-width: 12em; } .axn-roles__list { list-style: none; display: grid; gap: 12px; margin-top: clamp(22px, 2.6vw, 32px); } .axn-role__link { display: grid; gap: 12px; padding: clamp(20px, 2.4vw, 28px); border-radius: 18px; border: 1px solid var(--axn-edge); background: var(--axn-surface); position: relative; transition: border-color var(--axn-dur) var(--axn-ease), transform var(--axn-dur) var(--axn-ease), box-shadow var(--axn-dur) var(--axn-ease); } .axn-role__link:hover { border-color: var(--axn-gold); transform: translateY(-2px); box-shadow: var(--axn-lift); } .axn-role__t { display: block; font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); letter-spacing: -.02em; color: var(--axn-ink); } .axn-role__d { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: var(--axn-ink-3); max-width: 62ch; } .axn-role__meta { display: flex; flex-wrap: wrap; gap: 8px; } .axn-role__go { position: absolute; right: clamp(20px, 2.4vw, 28px); top: clamp(20px, 2.4vw, 28px); color: var(--axn-gold-deep); transition: transform var(--axn-dur) var(--axn-ease); } .axn-roles__empty { margin-top: clamp(22px, 2.6vw, 32px); padding: clamp(22px, 2.6vw, 32px); border-radius: 18px; border: 1px dashed var(--axn-edge); background: var(--axn-surface); max-width: 62ch; } .axn-roles__empty p { color: var(--axn-ink-3); } /* The 1099 disclosure — plain on purpose. Heading one side, the disclosure the other. It used to be a 76ch card floated left inside a full-width container, which left a third of the row empty and, once Open Roles started hiding itself, sat on the same ground as the section above with nothing between them. */ .axn-terms__in { display: grid; gap: clamp(20px, 2.6vw, 38px); align-items: start; } .axn-terms__h { margin: 0; font-size: var(--fs-h3); max-width: 9.07em; } .axn-terms__body { padding-left: clamp(16px, 2vw, 24px); border-left: 3px solid var(--axn-gold-deep); max-width: 68ch; } .axn-terms__body p { color: var(--axn-ink-2); line-height: 1.7; } .axn-terms__body p:last-child { margin-bottom: 0; } @media (min-width: 900px) { .axn-terms__in { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); column-gap: clamp(34px, 5vw, 78px); } /* The heading stays with the text it labels through a long disclosure. */ .axn-terms__head { position: sticky; top: calc(var(--axn-header-h, 92px) + 24px); } } @media (prefers-reduced-motion: reduce) { .axn-terms__head { position: static; } } /* Apply */ .axn-apply__in { display: grid; gap: clamp(28px, 3.4vw, 52px); align-items: start; } .axn-apply__copy { max-width: 46ch; } @media (min-width: 720px) { .axn-skills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(22px, 3vw, 44px); } .axn-exch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .axn-story__in { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); } .axn-diff__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .axn-moves__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .axn-apply__in { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); } .axn-apply__copy { position: sticky; top: calc(var(--axn-hdr-c) + 24px); } .axn-skills__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(22px, 2.6vw, 40px); } } /* ---------- 15. Footer — markets ribbon + the rebuilt grid ---------- */ /* Layer 2 — every state and market, generated, on a moving rail. White type, the brand's fiber spectrum carried by the separators. */ .axn-fribbon { position: relative; overflow: hidden; padding-block: clamp(34px, 4.2vw, 62px); border-bottom: 1px solid rgba(255,255,255,.12); } .axn-fribbon__label, .axn-fribbon__note { text-align: center; margin: 0 auto; padding-inline: var(--axn-gutter); max-width: 62ch; } .axn-fribbon__label { font-family: var(--ff-tech); font-size: 9px; letter-spacing: var(--ls-tech); text-transform: uppercase; color: var(--axn-gold); margin-bottom: clamp(20px, 2.4vw, 30px); } .axn-fribbon__note { margin-top: clamp(18px, 2.2vw, 26px); font-size: 13px; line-height: 1.6; color: var(--axn-dark-text); } .axn-fribbon__rail { display: flex; width: max-content; } .axn-fribbon__track { display: flex; align-items: center; animation: axn-ribbon 42s linear infinite; } .axn-fribbon__rail:hover .axn-fribbon__track, .axn-fribbon__rail:focus-within .axn-fribbon__track { animation-play-state: paused; } @keyframes axn-ribbon { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .axn-fribbon__track { animation: none; } /* Stationary, so the second pass would just be a duplicate off-screen. */ .axn-fribbon__rail { width: auto; overflow-x: auto; } .axn-fribbon__track[aria-hidden="true"] { display: none; } } .axn-fribbon__item { font-family: var(--ff-display); font-weight: var(--fw-feature); font-size: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); line-height: 1.1; letter-spacing: -.03em; color: #fff; white-space: nowrap; padding-inline: clamp(14px, 1.6vw, 26px); transition: color var(--axn-dur) var(--axn-ease), opacity var(--axn-dur) var(--axn-ease); } .axn-fribbon__item--market { opacity: .9; } .axn-fribbon__item:hover, .axn-fribbon__item:focus-visible { color: var(--axn-gold-hi); opacity: 1; } /* The signature: two dots per gap, cycling the fiber spectrum. */ .axn-fribbon__dots { display: inline-flex; gap: 5px; flex: 0 0 auto; } .axn-fribbon__dots i { width: clamp(10px, 1.1vw, 15px); aspect-ratio: 1; border-radius: 50%; display: block; } .axn-fribbon__dots--0 i { background: var(--axn-gold); } .axn-fribbon__dots--1 i { background: var(--axn-green-bright); } .axn-fribbon__dots--2 i { background: var(--axn-amber); } .axn-fribbon__dots--3 i { background: var(--axn-magenta); } .axn-fribbon__dots--4 i { background: var(--axn-violet); } .axn-fribbon__dots i:first-child { opacity: .5; } /* Edge fades so the rail dissolves rather than cutting off */ .axn-fribbon::before, .axn-fribbon::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 9vw, 180px); z-index: 2; pointer-events: none; } .axn-fribbon::before { left: 0; background: linear-gradient(90deg, var(--axn-dark) 10%, transparent); } .axn-fribbon::after { right: 0; background: linear-gradient(270deg, var(--axn-dark) 10%, transparent); } /* Layer 3 — grid refinements */ .axn-fcol--contact .axn-fcontact { list-style: none; display: grid; gap: 13px; margin: 0; } .axn-fcontact li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--axn-dark-text); } .axn-fcontact svg { flex: 0 0 auto; margin-top: 2px; color: var(--axn-gold); } .axn-fcontact a { color: var(--axn-dark-text); border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 2px; transition: color var(--axn-dur) ease, border-color var(--axn-dur) ease; } .axn-fcontact a:hover { color: var(--axn-gold); border-bottom-color: var(--axn-gold); } .axn-fcol__btn { margin-top: 20px; } /* White, not grey — copy and links on the dark grounds read as content, and only the legal fine print and the copyright line step down from it. */ .axn-fmarkets__state { color: #fff; } .axn-ftop { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--axn-dark-text); padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(255,255,255,.18); transition: color var(--axn-dur) ease, border-color var(--axn-dur) ease, transform var(--axn-dur) ease; } .axn-ftop:hover { color: var(--axn-gold); border-color: var(--axn-gold-deep); transform: translateY(-2px); } @media (min-width: 640px) { .axn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .axn-fcol--brand { grid-column: 1 / -1; } } @media (min-width: 1100px) { .axn-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 44px); } .axn-fcol--brand { grid-column: auto; } /* Grid items stretch to the tallest by default, which gave Company and Opportunities ~200px of empty space under four links each. They size to their own content now. */ .axn-footer__grid > * { align-self: start; } } /* ---------- 16. ISP Partnerships ---------- */ .axn-phero__close { color: #fff !important; font-weight: 600; } .axn-ispgap__in { display: grid; gap: clamp(24px, 3vw, 48px); align-items: start; } /* ⚠ Was `max-width: 22ch` on this WRAPPER, whose font is the 16px body face — 241px, and the 41px heading inside it set in FIVE lines. Same fault as `.axn-exch__head` had: a display heading measured in a body-font unit on a parent. The measure belongs on the heading. */ .axn-ispgap__head { max-width: none; } .axn-ispgap__head h2 { margin: 0; max-width: 12em; } .axn-ispgap__copy { max-width: 62ch; } .axn-ispgap__cost { margin-top: 22px; padding: 18px 22px; border-radius: 14px; border-left: 3px solid var(--axn-gold); background: var(--axn-bg-2); font-size: var(--fs-lede); color: var(--axn-ink); line-height: 1.6; } .axn-ispmeet__in { display: grid; gap: clamp(28px, 3.4vw, 54px); align-items: center; } .axn-ispmeet__copy { max-width: 56ch; } .axn-ispmeet__close { font-family: var(--ff-display); font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem); letter-spacing: -.02em; color: var(--axn-ink); margin-top: 22px; } .axn-ispmeet__media { margin: 0; } .axn-ispmeet__media img { border-radius: 20px; width: 100%; } /* Nine ways to open a market. It was a boxed 3-column grid of its own; it now uses the shared numbered-row component so it matches "Products We Represent" on the Products & Providers page. The grid and cell rules that used to live here went with it — `.axn-ispways__grid` and `.axn-way*` are gone, and nothing else referenced them. */ .axn-ispways__head { max-width: 46ch; } .axn-ispways h2 { max-width: 11.66em; } .axn-ispways .axn-lede { margin-top: 14px; } .axn-ispways__notes { margin-top: clamp(22px, 2.6vw, 30px); display: grid; gap: 12px; max-width: 74ch; } .axn-ispways__notes p { margin: 0; color: var(--axn-ink-2); font-size: calc(var(--fs-body) * .91); line-height: 1.6; } .axn-ispmktg__copy { max-width: 64ch; } .axn-ispmktg__pivot { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.125rem, 1rem + .9vw, 1.75rem); letter-spacing: -.025em; color: var(--axn-ink); margin-block: 24px; } /* Three wins — dark band */ .axn-ispwin__head { max-width: 40ch; } .axn-ispwin__grid { list-style: none; display: grid; gap: 14px; margin-top: clamp(26px, 3vw, 38px); } .axn-win { display: flex; gap: 14px; align-items: flex-start; padding: clamp(20px, 2.2vw, 28px); border-radius: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); transition: border-color var(--axn-dur) var(--axn-ease), transform var(--axn-dur) var(--axn-ease), background var(--axn-dur) var(--axn-ease); } .axn-win:hover { border-color: var(--axn-gold); transform: translateY(-3px); background: rgba(212,175,55,.08); } .axn-win__n { flex: 0 0 auto; font-family: var(--ff-mono); font-size: 11px; color: var(--axn-gold); letter-spacing: .06em; padding-top: 3px; } .axn-win p { margin: 0; color: #fff !important; font-size: calc(var(--fs-body) * .94); line-height: 1.6; } .axn-ispwin__note { margin: clamp(22px, 2.6vw, 30px) 0 0; max-width: 56ch; font-size: var(--fs-lede); color: var(--axn-dark-text) !important; } /* Built for accountability */ .axn-ispacc__in { display: grid; gap: clamp(26px, 3.2vw, 52px); align-items: start; } .axn-ispacc__copy { max-width: 44ch; } .axn-ispacc__note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--axn-edge); font-size: 14px; color: var(--axn-ink-3); line-height: 1.6; } .axn-checks { list-style: none; display: grid; gap: 0; } .axn-check-row { display: flex; gap: 14px; align-items: flex-start; padding: clamp(13px, 1.6vw, 17px) 0; border-top: 1px solid var(--axn-edge); font-size: calc(var(--fs-body) * .94); line-height: 1.5; color: var(--axn-ink); } .axn-check-row:last-child { border-bottom: 1px solid var(--axn-edge); } /* ⚠ Gold, not green — see `.axn-does__tick`. Green marks an action; these are statements. */ .axn-check-row__tick { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--axn-gold-deep); color: #fff; margin-top: 1px; } .axn-apply__listen { font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.0625rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; color: var(--axn-ink); margin-block: 18px; } @media (min-width: 720px) { .axn-ispwin__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .axn-win { flex-direction: column; gap: 12px; } } @media (min-width: 1000px) { .axn-ispgap__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .axn-ispmeet__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .axn-ispacc__in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); } } /* ---------- 17. Founders ---------- */ .axn-bio__in { display: grid; gap: clamp(26px, 3.2vw, 56px); align-items: start; } .axn-bio__figure { margin: 0; } /* Square and top-anchored: a headshot cropped from the centre loses the head. */ /* No grade — see `.axn-person__img`. The headshots are a matched pair now and both pages must show them the same way. */ .axn-bio__photo { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 20px; } /* Same portrait placeholder as the homepage, so the two founders look like one component wherever they appear. */ .axn-bio__ph { display: grid; place-items: center; aspect-ratio: 1; border-radius: 20px; border: 1px solid var(--axn-edge); background: linear-gradient(155deg, #EFE7D3, var(--axn-bg) 55%, #E9DFC6); } .axn-bio__ph span { font-family: var(--ff-display); font-weight: var(--fw-head); font-size: clamp(3rem, 7vw, 5rem); color: var(--axn-gold-deep); opacity: .28; letter-spacing: -.03em; } .axn-bio__name { margin: 0 0 6px; font-size: var(--fs-h2); } .axn-bio__role { font-family: var(--ff-tech); font-size: 9.5px; letter-spacing: var(--ls-tech); text-transform: uppercase; color: var(--axn-gold-deep); margin: 0 0 24px; } .axn-bio__copy { max-width: 66ch; } .axn-bio__quote { margin: clamp(24px, 3vw, 34px) 0 0; padding: clamp(22px, 2.6vw, 32px); border-radius: 18px; background: var(--axn-surface); border: 1px solid var(--axn-edge); position: relative; background-image: url("../images/tex-grain.png"); background-size: 240px 240px; } .axn-bio__quote::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--axn-gold-hi), var(--axn-gold), var(--axn-green-bright)); } .axn-bio__quote p { margin: 0 0 14px; font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.0625rem, 1rem + .6vw, 1.4375rem); line-height: 1.45; letter-spacing: -.02em; color: var(--axn-ink); } .axn-bio__quote cite { font-style: normal; font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--axn-gold-deep); } /* Centred, on the ivory ground. It was a gold band; the client rejected the gold, and left-aligned it had filled only the first third of it anyway — the homepage gold band works because a second column fills the width, and this section has nothing to put there. The rule and the green button carry the brand instead of a flat gold expanse. */ .axn-vision { padding-block: clamp(50px, 5.4vw, 84px); } .axn-vision__in { max-width: 60ch; margin-inline: auto; text-align: center; } .axn-vision .axn-rule { margin-inline: auto; } .axn-vision h2 { max-width: 12.96em; margin-inline: auto; } .axn-vision .axn-lede { max-width: 54ch; margin-inline: auto; } .axn-vision__p { color: var(--axn-ink-3); max-width: 54ch; margin: 0 auto clamp(26px, 3vw, 34px); } @media (min-width: 900px) { /* Both portraits sit on the left. The mirrored variant was tried and the client rejected it — don't reintroduce `--flip`. */ .axn-bio__in { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.4fr); } } /* ---------- 18. Service areas, states, markets and providers ---------- The generated pages. Every list here is built from the database, so the styling has to hold up at one item and at fifty. */ .axn-plainlist { list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--axn-edge); } .axn-plainlist li { padding: clamp(14px, 1.7vw, 19px) 0; border-bottom: 1px solid var(--axn-edge); font-family: var(--ff-display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); color: var(--axn-ink); } .axn-section--dark .axn-plainlist li, .axn-band .axn-plainlist li { color: #fff; border-bottom-color: var(--axn-dark-edge); } /* Markets under a state, providers under a market — one row each. */ .axn-placelist { list-style: none; margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; display: grid; gap: 10px; } .axn-placelist__link { position: relative; display: grid; gap: 7px; padding: clamp(18px, 2.2vw, 26px) clamp(54px, 6vw, 72px) clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px); border: 1px solid var(--axn-edge); border-radius: 18px; background: var(--axn-surface); transition: border-color var(--axn-dur) var(--axn-ease), transform var(--axn-dur) var(--axn-ease), box-shadow var(--axn-dur) var(--axn-ease); } .axn-placelist__link:hover { border-color: var(--axn-gold); transform: translateY(-2px); box-shadow: var(--axn-lift); } .axn-placelist__t { font-family: var(--ff-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); color: var(--axn-ink); } .axn-placelist__d { font-size: 14px; line-height: 1.55; color: var(--axn-ink-3); max-width: 62ch; } .axn-placelist__s { justify-self: start; margin-top: 4px; } .axn-placelist__go { position: absolute; right: clamp(18px, 2.2vw, 26px); top: 50%; translate: 0 -50%; display: flex; align-items: center; color: var(--axn-gold-deep); } /* Provider cards — a logo where the dealer agreement allows one, the name set in the display face where it does not. Both have to sit at the same weight. */ .axn-provlist__grid { list-style: none; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; display: grid; gap: 12px; } .axn-provcard__link { position: relative; display: grid; gap: 12px; height: 100%; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--axn-edge); border-radius: 18px; background: #fff; transition: border-color var(--axn-dur) var(--axn-ease), transform var(--axn-dur) var(--axn-ease), box-shadow var(--axn-dur) var(--axn-ease); } .axn-provcard__link:hover { border-color: var(--axn-gold); transform: translateY(-2px); box-shadow: var(--axn-lift); } .axn-provcard__mark { display: flex; align-items: center; min-height: 34px; } .axn-provcard__mark img { max-height: 34px; width: auto; max-width: 160px; object-fit: contain; } .axn-provcard__word { font-family: var(--ff-display); font-weight: 700; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); letter-spacing: -.02em; color: var(--axn-ink); } .axn-provcard__p { font-size: 12.5px; line-height: 1.5; color: var(--axn-ink-3); } .axn-provcard__go { position: absolute; right: clamp(20px, 2.4vw, 28px); top: clamp(20px, 2.4vw, 28px); color: var(--axn-gold-deep); transition: transform var(--axn-dur) var(--axn-ease); } /* Service Areas index — one card per state. */ .axn-states { display: grid; gap: clamp(14px, 1.8vw, 20px); } .axn-statecard { padding: clamp(22px, 2.6vw, 32px); border-radius: 20px; border: 1px solid var(--axn-edge); background: var(--axn-surface); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; } .axn-statecard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--axn-edge); } .axn-statecard__h { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); } .axn-statecard__h a { color: var(--axn-ink); transition: color var(--axn-dur) ease; } .axn-statecard__h a:hover { color: var(--axn-gold-deep); } .axn-statecard__n { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .06em; color: var(--axn-ink-3); } .axn-statecard__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; } .axn-statecard__list li { border-bottom: 1px solid var(--axn-edge-soft); } .axn-statecard__list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 13px 0; transition: padding-left var(--axn-dur) ease; } .axn-statecard__list a:hover { padding-left: 6px; } .axn-statecard__m { font-family: var(--ff-display); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; color: var(--axn-ink); } .axn-statecard__s { font-family: var(--ff-tech); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--axn-gold-deep); } .axn-statecard__all { margin-top: 16px; } /* The two closing calls — the client's own questions, side by side. */ .axn-placecta__in { display: grid; gap: clamp(14px, 1.8vw, 22px); } .axn-placecta__card { padding: clamp(24px, 3vw, 38px); border-radius: 22px; border: 1px solid var(--axn-edge); background: var(--axn-surface); background-image: url("../images/tex-grain.png"); background-size: 240px 240px; display: grid; align-content: start; gap: 16px; } .axn-placecta__h { margin: 0; font-size: clamp(1.125rem, 1rem + .8vw, 1.625rem); line-height: 1.25; letter-spacing: -.02em; max-width: 16.85em; } .axn-placecta__card .axn-btn { justify-self: start; } .axn-placecta .axn-notice { margin-top: clamp(22px, 2.8vw, 34px); } .axn-btn--ghost.axn-btn--onLight { border-color: var(--axn-edge); color: var(--axn-ink); } .axn-btn--ghost.axn-btn--onLight:hover { border-color: var(--axn-gold); color: var(--axn-ink); background: rgba(212,175,55,.12); box-shadow: none; } .axn-outbound { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 30px); } @media (min-width: 620px) { .axn-provlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .axn-states { grid-template-columns: repeat(2, minmax(0, 1fr)); } .axn-placecta__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .axn-provlist__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .axn-states { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- 19. Headings arrive word by word ---------- The stagger is per word (`--axn-wi`), so a line reads as a wave rather than a block fade. Two modes: .axn-split below the fold — each word rises out of a clip and fades. .axn-split--hero the H1 on a hero — MOVES ONLY, never clipped, never transparent. That heading is the LCP element on every template, and a browser does not count text as painted while it sits at opacity 0 or behind an overflow clip. Breaking that rule trades a real metric for a flourish. */ .axn-word { display: inline-block; } .axn-word__i { display: inline-block; will-change: transform; } /* Below the fold: clipped, so the word climbs into view. */ .axn-js .axn-split .axn-word { overflow: hidden; vertical-align: bottom; } .axn-js .axn-split .axn-word__i { opacity: 0; transform: translateY(102%); transition: transform .62s var(--axn-ease), opacity .42s ease; transition-delay: calc(var(--axn-wi) * 42ms); } .axn-js .axn-split.is-said .axn-word__i { opacity: 1; transform: translateY(0); } /* The hero H1: painted at full opacity from the first frame, then settled. */ .axn-js .axn-split--hero .axn-word__i { transform: translateY(.26em); transition: transform .72s var(--axn-ease); transition-delay: calc(var(--axn-wi) * 48ms); } .axn-js .axn-split--hero.is-said .axn-word__i { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .axn-js .axn-split .axn-word__i, .axn-js .axn-split--hero .axn-word__i { opacity: 1; transform: none; transition: none; } .axn-js .axn-split .axn-word { overflow: visible; } }