/* ========================================================================== Attic Salt — shared components Reads exclusively from as-tokens.css. Load order: as-tokens → as-components → page CSS. Every component here uses the CONTEXTUAL tokens (--as-fg, --as-bg, --as-accent-text …), so one definition works on a white section and on a #111418 section. Put data-as-ground="dark" on the section, not a variant class on the component. ========================================================================== */ /* ========================================================================== THEME BUTTON RESET The WordPress theme ships: button:where(:not(.components-button)…):focus, button:where(…):hover { background-color: var(--theme-color-hover) } `:where()` contributes nothing, but the `button` element plus `:focus` still scores 0,1,1 — which outranks a single class. So a plain `.as-btn { background: … }` loses the moment the control is focused or hovered, and the theme paints #001B72 over it. That is where the drawer's close button was turning into a blue disc. Matching the pseudo-class here lifts our selectors to 0,2,0 and the theme rule is outranked for good. These files load last in , so equal specificity would also fall our way. ========================================================================== */ .as-btn, .as-btn:hover, .as-btn:focus, .as-btn:active, .as-header__burger, .as-header__burger:hover, .as-header__burger:focus, .as-header__burger:active, .as-drawer__close, .as-drawer__close:hover, .as-drawer__close:focus, .as-drawer__close:active { text-shadow: none; box-shadow: none; } .as-header__burger, .as-header__burger:hover, .as-header__burger:focus, .as-header__burger:active, .as-drawer__close, .as-drawer__close:hover, .as-drawer__close:focus, .as-drawer__close:active { background: none; border: 0; } .as-drawer__close, .as-drawer__close:hover, .as-drawer__close:focus, .as-drawer__close:active { color: #F2F1EA; } .as-drawer__close:hover { color: var(--as-green); } /* ========================================================================== BUTTONS Replaces the seven specs the audit found. Pills are actions; rectangles are surfaces. Four variants, two sizes, one hover, one active, one focus ring. ========================================================================== */ .as-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--as-s-2); margin: 0; padding: 14px 32px; /* md */ border: 1px solid transparent; border-radius: var(--as-r-pill); font-family: var(--as-font); font-size: 0.9375rem; /* 15px */ font-weight: var(--as-w-semi); line-height: 1; letter-spacing: 0.01em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color var(--as-dur-fast) var(--as-ease), border-color var(--as-dur-fast) var(--as-ease), color var(--as-dur-fast) var(--as-ease), transform var(--as-dur-fast) var(--as-ease); } .as-btn--sm { padding: 12px 24px; font-size: 0.875rem; /* 14px */ } /* --- Contact band card box --------------------------------------------- Last difference between the two implementations: CF7 ends the form with the submit's

and its 37px bottom margin, while .as-contact ends at the button and carries the space as card padding. Drop that trailing margin and state the padding here, and both cards close at the same pixel at every width. Keep these three values in step with .as-contact__card in as-contact.css. */ #contact .wpcf7-form > p:last-of-type { margin-bottom: 0; } #contact .e-con.e-child { padding: 50px 40px 67px 45px; } @media (max-width: 1024px) { #contact .e-con.e-child { padding: 40px 37px; } } @media (max-width: 767px) { #contact .e-con.e-child { padding: 35px 30px; } } /* --- Contact band widget spacing --------------------------------------- Elementor stores per-breakpoint margins on each widget wrapper. In the contact band those tablet/phone values were never tidied: the lede carries an 80px bottom margin below 1024px and the form widget adds its own 15px/25px, so the six Elementor pages opened a gap the .as-contact pages do not have. Scoped to #contact, which is the band on every page — the .elementor-* classes simply do not exist on the seven .as-contact ones, and an id beats anything Elementor writes. */ #contact .elementor-widget-text-editor > .elementor-widget-container { margin: 0 0 15px; } #contact .elementor-widget-uael-cf7-styler > .elementor-widget-container { margin: 0; padding: 0; } /* --- CF7 responsive typography ----------------------------------------- Elementor also ships per-widget rules inside (max-width:1024px) and (max-width:767px) that push the field labels to 18px/17px and the inputs to 12px, so the six Elementor pages grew a taller, mismatched form on tablet and phone while their desktop sizes were already correct. Those rules are (0,6,2) and (0,6,1); a plain declaration at higher specificity beats a media query, hence the chain — it is (0,7,2), and it holds at every width. */ .elementor-widget-uael-cf7-styler .elementor-widget-container .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form.wpcf7-form label { font-size: 14px; line-height: 1.2631em; font-weight: 300; letter-spacing: -0.3px; } .elementor-widget-uael-cf7-styler .elementor-widget-container .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form.wpcf7-form input:not([type="submit"]), .elementor-widget-uael-cf7-styler .elementor-widget-container .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form.wpcf7-form textarea { font-size: 14px; line-height: 1.6; } /* --- CF7 field boxes ---------------------------------------------------- CF7 wraps every control in an inline , so each input sits on a text baseline and drags a line-box below it. That is the whole reason the six Elementor pages measured taller than the seven .as-contact ones carrying identical content. Take the controls off the baseline and the two render the same box. */ /* CF7 puts each field in a

whose 26px line-height (inherited at 16px) sets the label's line box, pushing the control 9px lower than the block labels on the .as-contact pages. Matching the line-height and the 37px field margin gives both the same 81px pitch. */ .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form > p { margin: 0 0 37px; font-size: 14px; /* the

inherits 16px; the label inside it is 14px, and the larger of the two sets the line box */ line-height: 1.2631; } .uael-cf7-style .wpcf7-form-control-wrap { display: block; } .uael-cf7-style .wpcf7-form-control-wrap input, .uael-cf7-style .wpcf7-form-control-wrap textarea { display: block; } /* UAEL sets display:flex on the submit, which stretches the pill; .as-btn is inline-flex, so it hugs its label as it does on the .as-contact pages. */ .uael-cf7-button-left input.wpcf7-form-control.wpcf7-submit.as-btn { display: inline-flex; } /* --- CF7 submit buttons ------------------------------------------------- The ported Elementor pages (home, the AI page, the four project pages) still carry per-widget rules like .elementor-4065 .elementor-element-d307a12 .uael-cf7-style input[type=submit] — (0,5,1) — plus UAEL's .uael-cf7-btn-size-xs sizing. Between them they rendered the "Let's work together" Submit at 16px with a 20px radius and a hard-coded fill, so it read smaller and squarer than the identical form on /about/ and /services/, than every other button on the same page, and it never picked up the green hover. Nothing shorter than the chain below outranks a five-class Elementor selector, hence the length: (0,7,2). The Elementor markup is the only place this applies; the .as-contact pages get the plain .as-btn rules above and already match. */ .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form input[type="submit"].as-btn.as-btn--primary { padding: 14px 32px; border-radius: var(--as-r-pill); /* 15px flat, not 0.9375rem: the ported theme shrinks the root font size below 768px, which silently scaled this button down on phones while the .as-contact pages kept theirs at 15px. */ font-size: 15px; font-weight: var(--as-w-semi); line-height: 1; letter-spacing: 0.15px; text-transform: none; border: 1px solid transparent; /* the theme strips input borders */ background-color: var(--as-btn-primary-bg); color: var(--as-btn-primary-fg); } .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form input[type="submit"].as-btn.as-btn--primary:hover, .uael-cf7-container .uael-cf7.uael-cf7-style .wpcf7 form input[type="submit"].as-btn.as-btn--primary:focus-visible { background-color: var(--as-green); color: var(--as-ink); /* 6.97:1 */ } .as-btn:hover { transform: translateY(-1px); } .as-btn:active { transform: translateY(0); } /* --- primary: the main CTA. Highest contrast available on each ground. ---- Driven by tokens so a nested ground resolves correctly — see the note in as-tokens.css. Ink/white on light, white/ink on dark, green on hover in both (6.97:1). */ .as-btn--primary { background-color: var(--as-btn-primary-bg); color: var(--as-btn-primary-fg); } .as-btn--primary:hover, .as-btn--primary:focus-visible { background-color: var(--as-green); color: var(--as-ink); /* 6.97:1 */ } /* --- accent: green fill, ink text. Legal on ANY ground (6.97:1). ---------- */ .as-btn--accent { background-color: var(--as-green); color: var(--as-ink); } .as-btn--accent:hover, .as-btn--accent:focus-visible { background-color: var(--as-ink); color: var(--as-green); /* green on ink — 6.97:1 */ } /* --- ghost: secondary ---------------------------------------------------- */ .as-btn--ghost { background-color: transparent; border-color: var(--as-rule); color: var(--as-fg); } .as-btn--ghost:hover, .as-btn--ghost:focus-visible { border-color: var(--as-green); color: var(--as-fg); } /* --- link: inline "Explore X →". Not a pill; still part of the ladder. ---- */ .as-btn--link { padding: 0; border: 0; border-radius: 0; background: none; color: var(--as-fg); font-size: 0.9375rem; font-weight: var(--as-w-med); } .as-btn--link .as-btn__arrow { display: inline-block; transition: transform var(--as-dur-fast) var(--as-ease); } .as-btn--link:hover { transform: none; } .as-btn--link:hover .as-btn__arrow { transform: translateX(4px); } /* The underline is a RULE, so the green law permits it on any ground. */ .as-btn--link::after { content: ""; position: absolute; inset: auto 0 -4px 0; height: 1px; background: var(--as-green); transform: scaleX(0); transform-origin: left; transition: transform var(--as-dur-fast) var(--as-ease); } .as-btn--link { position: relative; } .as-btn--link:hover::after, .as-btn--link:focus-visible::after { transform: scaleX(1); } /* ========================================================================== ICON BUTTON Not part of the button ladder. A close or dismiss control is a different thing from a CTA — it carries a glyph, not a label, and giving it a pill fill would make it compete with the real action on the screen. One spec, used by every modal and drawer close on the site. ========================================================================== */ .as-iconbtn, .as-iconbtn:hover, .as-iconbtn:focus, .as-iconbtn:active { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; border-radius: var(--as-r-round); font-family: var(--as-font); font-size: 26px; font-weight: var(--as-w-reg); /* or it inherits 600 from a bold container */ line-height: 1; color: var(--as-fg-mute); cursor: pointer; transition: color var(--as-dur-fast) var(--as-ease); } .as-iconbtn:hover, .as-iconbtn:focus-visible { color: var(--as-fg); } /* ========================================================================== CHIP A filter toggle, not a CTA — it reports state rather than performing an action, so it gets the square-ish chip radius and reads quieter than a button. Selected state is a green fill with ink on it (6.97:1), which the green law permits on any ground. ========================================================================== */ .as-chip, .as-chip:hover, .as-chip:focus, .as-chip:active { display: inline-flex; align-items: center; padding: 8px 16px; background: transparent; border: 1px solid transparent; border-radius: var(--as-r-pill); font-family: var(--as-font); font-size: 0.75rem; font-weight: var(--as-w-med); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--as-fg-mute); cursor: pointer; transition: color var(--as-dur-fast) var(--as-ease), background var(--as-dur-fast) var(--as-ease), border-color var(--as-dur-fast) var(--as-ease); } .as-chip:hover, .as-chip:focus-visible { color: var(--as-fg); border-color: var(--as-rule); } .as-chip.is-active, .as-chip.active { background: var(--as-green); border-color: var(--as-green); color: var(--as-ink); } /* ========================================================================== ACCORDION A disclosure control, not a CTA — it reveals adjacent content rather than navigating or submitting, so it is a full-width row with a rule, not a pill. The services FAQs already implement the WAI-ARIA accordion pattern correctly (button inside a heading, aria-expanded); this only replaces the local colours with tokens so it stops being a fourth way of drawing a control. ========================================================================== */ .as-accordion__item { border-top: 1px solid var(--as-rule); } .as-accordion__item:last-child { border-bottom: 1px solid var(--as-rule); } .as-accordion__q, .as-accordion__q:hover, .as-accordion__q:focus, .as-accordion__q:active { display: flex; align-items: center; justify-content: space-between; gap: var(--as-s-4); width: 100%; padding: 22px 0; background: none; border: 0; border-radius: 0; font-family: var(--as-font); font-size: var(--as-t-body); font-weight: var(--as-w-reg); line-height: 1.4; text-align: left; color: var(--as-fg); cursor: pointer; transition: color var(--as-dur-fast) var(--as-ease); } .as-accordion__q:hover, .as-accordion__q:focus-visible { color: var(--as-accent-text); } .as-accordion__icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--as-green); /* an icon — legal on any ground */ transition: transform 300ms var(--as-ease); } .as-accordion__item.is-open .as-accordion__icon, .faq-item.open .as-accordion__icon { transform: rotate(45deg); } .as-accordion__a { max-height: 0; overflow: hidden; transition: max-height 400ms var(--as-ease); } .as-accordion__a-inner { padding-bottom: 22px; font-size: var(--as-t-sm); line-height: 1.75; color: var(--as-fg-soft); } /* ========================================================================== EYEBROW / SECTION HEAD The green-law workhorse. On a light ground the label is INK and the green returns as the rule beside it; on a dark ground the label itself is green. Both come free from --as-accent-text. ========================================================================== */ .as-eyebrow { display: flex; align-items: center; gap: var(--as-s-3); margin: 0 0 var(--as-s-4); font-family: var(--as-font); font-size: var(--as-t-eyebrow); font-weight: var(--as-w-semi); letter-spacing: var(--as-ls-eyebrow); text-transform: uppercase; color: var(--as-accent-text); } .as-eyebrow::after { content: ""; flex: 0 0 auto; width: 28px; height: 2px; background: var(--as-green); } .as-section-head { margin: 0 0 var(--as-s-6); } .as-section-head h2, .as-section-head .as-h2 { margin: 0; font-family: var(--as-font); font-size: var(--as-t-h2); font-weight: var(--as-w-med); line-height: var(--as-lh-head); letter-spacing: var(--as-ls-head); color: var(--as-fg); text-wrap: balance; } .as-section-head p { max-width: var(--as-measure); margin: var(--as-s-3) 0 0; font-size: var(--as-t-lede); font-weight: var(--as-w-light); line-height: var(--as-lh-body); color: var(--as-fg-soft); } /* ========================================================================== SECTION BAND A full-width strip of content. Ground comes from data-as-ground, so the same band works on a light or dark page without a variant. ========================================================================== */ .as-section { padding: var(--as-s-9) var(--as-gutter); background: var(--as-bg); } .as-section__inner { max-width: var(--as-max); margin: 0 auto; } .as-section__foot { margin: var(--as-s-7) 0 0; } @media (max-width: 767px) { .as-section { padding: var(--as-s-8) var(--as-gutter); } } /* ========================================================================== SURFACES Square corners + a hairline rule. Shares the geometry of the boxed logo. ========================================================================== */ .as-card { display: flex; flex-direction: column; gap: var(--as-s-4); padding: var(--as-s-6); background: var(--as-card-bg); border: 1px solid var(--as-rule); border-radius: var(--as-r-surface); } /* ========================================================================== ARTICLE CARD Ported from the Perspectives hub card, which is the best card on the property — and used in all three places that currently render articles three different ways (home teaser, services "Worth reading first", Perspectives grid). ========================================================================== */ .as-article-card { position: relative; display: flex; flex-direction: column; background: var(--as-card-bg); border: 1px solid var(--as-rule); border-radius: var(--as-r-surface); color: inherit; text-decoration: none; overflow: hidden; transition: border-color var(--as-dur-fast) var(--as-ease), background var(--as-dur-fast) var(--as-ease); } .as-article-card:hover { background: var(--as-card-bg-hover); } /* Accent wipe — a rule, legal on any ground. */ .as-article-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--as-green); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--as-ease); } .as-article-card:hover::after { transform: scaleX(1); } .as-article-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--as-bg-alt); } .as-article-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--as-ease); } .as-article-card:hover .as-article-card__media img { transform: scale(1.03); } .as-article-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--as-s-3); padding: var(--as-s-5); } .as-article-card__meta { display: flex; align-items: center; gap: var(--as-s-3); flex-wrap: wrap; } .as-article-card__tag { font-size: 0.625rem; /* 10px */ font-weight: var(--as-w-semi); letter-spacing: 0.18em; text-transform: uppercase; color: var(--as-accent-text); } .as-article-card__dot { width: 3px; height: 3px; border-radius: var(--as-r-round); background: var(--as-fg-mute); flex-shrink: 0; } .as-article-card__date, .as-article-card__read { font-size: 0.75rem; font-weight: var(--as-w-light); color: var(--as-fg-mute); } .as-article-card__title { margin: 0; font-family: var(--as-font); font-size: var(--as-t-h3); font-weight: var(--as-w-med); line-height: 1.3; letter-spacing: var(--as-ls-head); color: var(--as-fg); text-wrap: balance; } .as-article-card__excerpt { margin: 0; font-size: var(--as-t-sm); font-weight: var(--as-w-light); line-height: var(--as-lh-body); color: var(--as-fg-soft); } .as-article-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--as-s-4); margin-top: auto; padding-top: var(--as-s-4); border-top: 1px solid var(--as-rule-soft); } .as-arrow-circle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--as-rule); border-radius: var(--as-r-round); transition: background var(--as-dur-fast) var(--as-ease), border-color var(--as-dur-fast) var(--as-ease); } .as-arrow-circle svg { width: 14px; height: 14px; fill: none; stroke: var(--as-fg); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--as-dur-fast) var(--as-ease); } .as-article-card:hover .as-arrow-circle { background: var(--as-green); border-color: var(--as-green); } .as-article-card:hover .as-arrow-circle svg { stroke: var(--as-ink); } /* Grid the cards sit in. */ .as-article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--as-s-5); } /* ========================================================================== FORM FIELDS ========================================================================== */ .as-field { display: block; margin: 0 0 var(--as-s-6); font-family: var(--as-font); font-size: var(--as-t-sm); font-weight: var(--as-w-light); color: var(--as-fg); } .as-field input, .as-field textarea { display: block; width: 100%; margin: var(--as-s-1) 0 0; padding: var(--as-s-1) 0; background: transparent; border: 0; border-bottom: 1px solid var(--as-rule); border-radius: 0; font-family: var(--as-font); font-size: var(--as-t-sm); font-weight: var(--as-w-reg); line-height: 1.5; color: var(--as-fg); -webkit-appearance: none; appearance: none; transition: border-color var(--as-dur-fast) var(--as-ease); } .as-field textarea { resize: vertical; } .as-field input:focus, .as-field textarea:focus { border-bottom-color: var(--as-green); } /* ========================================================================== REVEAL One system, replacing three: Elementor's ta_fadeinup, the services observer (which staggered by batch index, so its delay depended on scroll speed) and the Perspectives observer with its .rd1/.rd2/.rd3 classes. Delay is a custom property so a container can stagger its children without any per-element class. Driven by whenInView() in attic.js. ========================================================================== */ .as-reveal { opacity: 0; transform: translateY(var(--as-reveal-shift)); transition: opacity var(--as-dur) var(--as-ease) var(--as-stagger), transform var(--as-dur) var(--as-ease) var(--as-stagger); will-change: opacity, transform; } .as-reveal.is-visible { opacity: 1; transform: none; will-change: auto; } /* Above-the-fold entrance (home hero). Same motion as .as-reveal, but pure CSS: it starts at first paint instead of waiting for as-motion.js and the IntersectionObserver. .as-reveal on the hero held the largest paint on phones back by 3-8 s, since nothing could show until the script had run. */ @keyframes as-enter { from { opacity: 0; transform: translateY(var(--as-reveal-shift)); } to { opacity: 1; transform: none; } } .as-enter { animation: as-enter var(--as-dur) var(--as-ease) both; } @media (prefers-reduced-motion: reduce) { .as-enter { animation: none; } } /* Container-level stagger: children reveal in sequence with no extra markup. */ .as-reveal-group > *:nth-child(1) { --as-stagger: 0ms; } .as-reveal-group > *:nth-child(2) { --as-stagger: 80ms; } .as-reveal-group > *:nth-child(3) { --as-stagger: 160ms; } .as-reveal-group > *:nth-child(4) { --as-stagger: 240ms; } .as-reveal-group > *:nth-child(5) { --as-stagger: 320ms; } .as-reveal-group > *:nth-child(6) { --as-stagger: 400ms; } /* ========================================================================== UTILITIES ========================================================================== */ .as-measure { max-width: var(--as-measure); } .as-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== FOOTER One footer replacing three. The Elementor one carried an address and two social icons and NO internal links at all — on the home page and every case study, the footer was a dead end. The services pages had a four-link bar; Perspectives had a third with a subscribe form. ========================================================================== */ .as-footer { background: var(--as-ink-deep); color: var(--as-fg); padding: var(--as-s-9) var(--as-gutter) 0; } .as-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--as-s-7); max-width: var(--as-max); margin: 0 auto; padding-bottom: var(--as-s-8); } .as-footer__logo { display: block; line-height: 0; } .as-footer__logo img { width: auto; height: 56px; } .as-footer__line { margin: var(--as-s-4) 0 0; max-width: 26ch; font-size: var(--as-t-sm); font-weight: var(--as-w-light); line-height: var(--as-lh-body); color: var(--as-fg-mute); } .as-footer__col { display: flex; flex-direction: column; align-items: flex-start; } /* Scoped through .as-footer so it outranks the theme's `.elementor-kit-XXXX h2` (0,1,1), which was rendering these at 30px. */ .as-footer .as-footer__head { margin: 0 0 var(--as-s-4); font-family: var(--as-font); font-size: var(--as-t-eyebrow); font-weight: var(--as-w-semi); letter-spacing: var(--as-ls-eyebrow); text-transform: uppercase; color: var(--as-accent-text); /* green here: dark ground, 10.35:1 */ } .as-footer__col a { padding: 5px 0; font-size: var(--as-t-sm); font-weight: var(--as-w-light); line-height: 1.5; color: var(--as-fg-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--as-dur-fast) var(--as-ease), border-color var(--as-dur-fast) var(--as-ease); } .as-footer__col a:hover, .as-footer__col a:focus-visible { color: var(--as-fg); border-bottom-color: var(--as-green); } .as-footer__social { display: flex; gap: var(--as-s-4); margin-top: var(--as-s-4); } .as-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--as-s-4); flex-wrap: wrap; max-width: var(--as-max); margin: 0 auto; padding: var(--as-s-5) 0; border-top: 1px solid var(--as-rule); font-size: 0.75rem; font-weight: var(--as-w-light); color: var(--as-fg-mute); } .as-footer__bar-links { display: flex; gap: var(--as-s-5); } .as-footer__bar a { color: var(--as-fg-mute); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--as-dur-fast) var(--as-ease), border-color var(--as-dur-fast) var(--as-ease); } .as-footer__bar a:hover, .as-footer__bar a:focus-visible { color: var(--as-fg); border-bottom-color: var(--as-green); } @media (max-width: 900px) { .as-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--as-s-6); } .as-footer__brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .as-footer { padding-top: var(--as-s-8); } .as-footer__inner { grid-template-columns: 1fr; } .as-footer__bar { flex-direction: column; align-items: flex-start; } } /* Thank-you page. Was a single unstyled "Back To Home" text link — the highest-intent moment on the site, showing the exit. */ .as-thanks { margin-top: var(--as-s-6); text-align: center; } .as-thanks__next { max-width: 46ch; margin: 0 auto var(--as-s-6); font-size: var(--as-t-body); font-weight: var(--as-w-light); line-height: var(--as-lh-body); color: var(--as-fg-soft); } .as-thanks__next a { color: inherit; text-decoration-color: var(--as-green); text-underline-offset: 3px; } .as-thanks__actions { display: flex; flex-wrap: wrap; gap: var(--as-s-3); justify-content: center; } .as-thanks__back { margin: var(--as-s-6) 0 0; text-align: center; } /* Mailing-list capture, kept above the shared footer on Perspectives. */ .as-subscribe { background: var(--as-ink-deep); padding: var(--as-s-8) var(--as-gutter) 0; } .as-subscribe .footer-subscribe { display: flex; flex-direction: column; align-items: center; gap: var(--as-s-3); max-width: var(--as-max); margin: 0 auto; padding-bottom: var(--as-s-7); border-bottom: 1px solid var(--as-rule); } /* ========================================================================== THIRD-PARTY CHAT WIDGET (Starways) Vendor markup. It builds its own DOM and stylesheet at runtime, so blanket !important overrides on [class*="starways"] hit its INNER nodes too and stopped it laying itself out. Only the stacking context is ours to set, and only on the container the vendor gives an id. ========================================================================== */ #starways-widget-container, #starways-preset-bubble, #starways-chat-window { z-index: 800; } /* Phones: the preset-question bubble is fixed over the bottom of the first screen, and on the home page it sat on top of the hero copy. Hold it back until the visitor has scrolled past that screen (html.as-past-hero, set in as-header.js). The "Ask AI" button stays visible throughout, and the bubble still appears — just not over the first thing anyone reads. The container id only, per the note above. */ @media (max-width: 767px) { html:not(.as-past-hero) #starways-preset-bubble { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } }