@affinda/wc 0.0.7 → 0.0.8

package/dist/cjs/index.cjs.js

@@ -8,7 +8,7 @@ var afButton_entry = require('./af-button.cjs.entry.js');
 var afIconButton_entry = require('./af-icon-button.cjs.entry.js');
 var afButtonGroup_entry = require('./af-button-group.cjs.entry.js');
 var afTypographyLockup_entry = require('./af-typography-lockup.cjs.entry.js');
-require('./index-CNijn8X5.js');
+require('./index-D_ItFcqt.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CNijn8X5.js');
+var index = require('./index-D_ItFcqt.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
+  return index.bootstrapLazy([["af-hero-section.cjs",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1],"theme":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar",{"mobileMenuOpen":[32]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1],"theme":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/paperclip-decoration.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1212 753" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z" fill="var(--fill-0, white)" fill-opacity="0.06"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -13,6 +13,10 @@
     "components/af-button-group/af-button-group.js",
     "components/af-typography-lockup/af-typography-lockup.js",
     "components/af-card/af-card.js",
+    "components/af-client-carousel/af-client-carousel.js",
+    "components/af-hero-section/af-hero-section.js",
+    "components/af-logo-well/af-logo-well.js",
+    "components/af-section/af-section.js",
     "components/af-testimonial/af-testimonial.js",
     "components/af-testimonial-carousel/af-testimonial-carousel.js",
     "components/af-testimonial-stat/af-testimonial-stat.js"

package/dist/collection/components/af-button/af-button.js

@@ -17,13 +17,18 @@ export class AfButton {
          * Button type (when not using href)
          */
         this.type = 'button';
+        /**
+         * Use on dark backgrounds for better contrast
+         */
+        this.darkBackground = false;
     }
     render() {
         const classes = {
             'button': true,
             [`variant-${this.variant}`]: true,
             [`size-${this.size}`]: true,
-            'disabled': this.disabled
+            'disabled': this.disabled,
+            'on-dark': this.darkBackground
         };
         const content = [
             h("span", { class: "icon-left" }, h("slot", { name: "icon-left" })),
@@ -147,6 +152,26 @@ export class AfButton {
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "'button'"
+            },
+            "darkBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use on dark backgrounds for better contrast"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dark-background",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/af-button/af-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAwCxD;IAtCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QAEvD;;WAEG;QACK,mBAAc,GAAY,KAAK,CAAC;KAyCzC;IAvCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  \n  /**\n   * Use on dark backgrounds for better contrast\n   */\n  @Prop() darkBackground: boolean = false;\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled,\n      'on-dark': this.darkBackground\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-button-group/af-button-group.js

@@ -15,7 +15,7 @@ export class AfButtonGroup {
             'button-group': true,
             [`direction-${this.direction}`]: true
         };
-        return (h(Host, { key: 'c6cab092c05c6e6b7b859c662f318067590b51e3' }, h("div", { key: '289501b3693d0eeb68c4b2f85bb3b8398ca7610b', class: classes, style: { gap: this.gap } }, h("slot", { key: 'b852bcf016846022ee0cf8d23ce5a57aa0856adf' }))));
+        return (h(Host, { key: '5f8f8c8acd7b401c9e217a05200dfca367691723' }, h("div", { key: 'b4d14e81177523a584a961e0f20b6e7be101a8e3', class: classes, style: { gap: this.gap } }, h("slot", { key: '68cb3173bcf193eb877d66b1588500882aa52a63' }))));
     }
     static get is() { return "af-button-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-card/af-card.css

@@ -86,14 +86,17 @@
   color: #ffffff !important;
 }
 
-/* Dark text for regular cards */
-.card:not(.card--with-image) .card__content {
-  color: var(--colour-typography-heading-primary, #14343b);
+/* Dark text for regular cards (light backgrounds) */
+.card:not(.card--with-image):not(.card--dark-overlay) af-heading,
+.card:not(.card--with-image):not(.card--dark-overlay) af-text {
+  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);
+  --colour-typography-body-default: #2B484F;
 }
 
-/* Custom background color cards with white text */
-.card--custom-bg .card__content {
-  --colour-typography-heading-primary: #ffffff;
-  --colour-typography-body-default: #ffffff;
+/* Dark text for custom background color cards (unless they have dark overlay) */
+.card--custom-bg:not(.card--dark-overlay) af-heading,
+.card--custom-bg:not(.card--dark-overlay) af-text {
+  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);
+  --colour-typography-body-default: #2B484F;
 }
 

package/dist/collection/components/af-card/af-card.js

@@ -9,7 +9,7 @@ export class AfCard {
     render() {
         const hasBackgroundImage = !!this.backgroundImage;
         const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
-        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
+        return (h(Host, { key: '2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a' }, h("div", { key: '7e1ef884a203ae17e1ad417ac688f59b9acb6932', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: '4fb3cea588d42345690df68738b725a6debacc55', class: "card__background" }, h("img", { key: '0dde30e250c7cb117993e3ccbeab8f108278ae89', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: 'f604c04997720f4804d148f103f9c4a69b1ec0aa', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'a7668f98c4c8fd10b5581eac69f2a31aecbc3732' })))));
     }
     static get is() { return "af-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-client-carousel/af-client-carousel.css

@@ -0,0 +1,112 @@
+:host {
+  display: block;
+  width: 100%;
+  background-color: var(--colour-brand-inkwell, #14343B);
+}
+
+.client-carousel {
+  padding: 48px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  align-items: center;
+}
+
+.headline {
+  text-align: center;
+  padding: 24px 220px;
+}
+
+.headline h3 {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  font-size: 34px;
+  line-height: 1;
+  letter-spacing: -0.68px;
+  color: var(--colour-brand-mist-green, #C6D5D1);
+  margin: 0;
+}
+
+.carousel-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-row {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.logo-track {
+  display: flex;
+  gap: 16px;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* Scroll left animation */
+.scroll-left .logo-track {
+  animation-name: scroll-left;
+  animation-duration: 40s;
+}
+
+/* Scroll right animation */
+.scroll-right .logo-track {
+  animation-name: scroll-right;
+  animation-duration: 40s;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* Ensure slotted logos maintain their styling */
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+/* Tablet adjustments */
+@media (max-width: 1024px) {
+  .client-carousel {
+    padding: 32px 40px;
+  }
+  
+  .headline {
+    padding: 16px 40px;
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+  .client-carousel {
+    padding: 24px 16px;
+  }
+  
+  .headline {
+    padding: 16px;
+  }
+  
+  .headline h3 {
+    font-size: 25px;
+  }
+}
+

package/dist/collection/components/af-client-carousel/af-client-carousel.js

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Infinite scrolling carousel for client logos
+ */
+export class AfClientCarousel {
+    constructor() {
+        /** Show headline above carousel */
+        this.showHeadline = false;
+        /** Headline text */
+        this.headlineText = "Trusted by some of the world's leading organisations";
+    }
+    render() {
+        return (h(Host, { key: '6ee5a4e472cb082ac68cb58c00bf5b1d686dd489' }, h("div", { key: 'dc030f69bfbb55ce999f0b2f1d8a47095d75ac59', class: "client-carousel" }, this.showHeadline && (h("div", { key: 'd8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e', class: "headline" }, h("slot", { key: '3773f567bfd3de6058cd1088ba2c781cf510e63b', name: "headline" }, h("h3", { key: 'fdcab6ce99a2c477bf1e336f13f7994637b8436d' }, this.headlineText)))), h("div", { key: '30429a27f88e490051a4623195421e00a34f4db4', class: "carousel-container" }, h("div", { key: 'de187b8265b84cb3d8f22540ec283bb8b3603aa8', class: "carousel-row scroll-left" }, h("div", { key: 'd2da7c79388f53425cba20429204fea148030aa5', class: "logo-track" }, h("slot", { key: 'b4ddb6250d5893290ed40a2c765d0f0bf0a378e6', name: "row-1" }), h("slot", { key: 'ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef', name: "row-1" }))), h("div", { key: 'f6a99654384b070bf91e9ea1ebc57de304f2671f', class: "carousel-row scroll-right" }, h("div", { key: '8e31a13039f2e2df33eb7ec67f738d71d49d931f', class: "logo-track" }, h("slot", { key: '2ffeff2da8ddd4c0faefaf59fc1a45972de26943', name: "row-2" }), h("slot", { key: '2121dc84af370a41290a432e50f3c10f6b3d4b4c', name: "row-2" })))))));
+    }
+    static get is() { return "af-client-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-client-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-client-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showHeadline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show headline above carousel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-headline",
+                "defaultValue": "false"
+            },
+            "headlineText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Headline text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headline-text",
+                "defaultValue": "\"Trusted by some of the world's leading organisations\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-client-carousel.js.map

package/dist/collection/components/af-client-carousel/af-client-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-client-carousel.js","sourceRoot":"","sources":["../../../src/components/af-client-carousel/af-client-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAME,mCAAmC;QAC3B,iBAAY,GAAY,KAAK,CAAC;QAEtC,oBAAoB;QACZ,iBAAY,GAAW,sDAAsD,CAAC;KAmCvF;IAjCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,UAAU;oBACnB,6DAAM,IAAI,EAAC,UAAU;wBACnB,6DAAK,IAAI,CAAC,YAAY,CAAM,CACvB,CACH,CACP;gBAED,4DAAK,KAAK,EAAC,oBAAoB;oBAE7B,4DAAK,KAAK,EAAC,0BAA0B;wBACnC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Infinite scrolling carousel for client logos\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  shadow: true,\n})\nexport class AfClientCarousel {\n  /** Show headline above carousel */\n  @Prop() showHeadline: boolean = false;\n  \n  /** Headline text */\n  @Prop() headlineText: string = \"Trusted by some of the world's leading organisations\";\n\n  render() {\n    return (\n      <Host>\n        <div class=\"client-carousel\">\n          {this.showHeadline && (\n            <div class=\"headline\">\n              <slot name=\"headline\">\n                <h3>{this.headlineText}</h3>\n              </slot>\n            </div>\n          )}\n          \n          <div class=\"carousel-container\">\n            {/* Top row - scrolls left */}\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\">\n                <slot name=\"row-1\"></slot>\n                <slot name=\"row-1\"></slot>\n              </div>\n            </div>\n            \n            {/* Bottom row - scrolls right */}\n            <div class=\"carousel-row scroll-right\">\n              <div class=\"logo-track\">\n                <slot name=\"row-2\"></slot>\n                <slot name=\"row-2\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-heading/af-heading.css

@@ -24,6 +24,15 @@
   text-align: right;
 }
 
+/* Theme variants */
+.theme-dark {
+  color: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+.theme-light {
+  color: var(--colour-typography-heading-primary, #14343b);
+}
+
 /* Heading XL */
 .level-xl {
   font-size: 50px;

package/dist/collection/components/af-heading/af-heading.js

@@ -5,6 +5,8 @@ export class AfHeading {
         this.level = '1';
         /** Visual alignment */
         this.align = 'left';
+        /** Theme for dark backgrounds */
+        this.theme = 'light';
     }
     getHeadingTag() {
         // Map display levels to semantic HTML tags
@@ -20,11 +22,12 @@ export class AfHeading {
     }
     render() {
         const Tag = this.getHeadingTag();
-        return (h(Tag, { key: '1d3f37c8d067c3c9d0ec7f10422478ab41c990b2', class: {
+        return (h(Tag, { key: '2cc4b5d43b85fbc8251d61e822deb22641f69683', class: {
                 'heading': true,
                 [`level-${this.level}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: 'dcba9d00393f818cfceeb5eba5cc2bd874927dfd' })));
+                [`align-${this.align}`]: true,
+                [`theme-${this.theme}`]: true
+            }, part: "base" }, h("slot", { key: '0ac282842c61ec6c16929574a5ffd6530aab9759' })));
     }
     static get is() { return "af-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +82,26 @@ export class AfHeading {
                 "reflect": false,
                 "attribute": "align",
                 "defaultValue": "'left'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for dark backgrounds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
             }
         };
     }

package/dist/collection/components/af-heading/af-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;KA+BrD;IA7BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,UAAK,GAAqB,OAAO,CAAC;KAgC3C;IA9BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n  \n  /** Theme for dark backgrounds */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true,\n          [`theme-${this.theme}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-hero-section/af-hero-section.css

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.hero-section {
+  width: 100%;
+  padding-top: calc(32px + 8px + 22px + 4rem); /* navbar top offset + navbar height + gap + content padding */
+  padding-bottom: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+
+/* Light variant */
+.variant-light {
+  background-color: var(--colour-background-white, #FFFFFF);
+}
+
+/* Dark variant */
+.variant-dark {
+  background-color: var(--colour-brand-inkwell, #14343B);
+}
+
+/* Set theme colors on dark backgrounds */
+.variant-dark af-heading,
+.variant-dark af-text {
+  --typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);
+  --typography-body-default: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+.hero-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  height: 0;
+  width: 0;
+  overflow: visible;
+}
+
+.hero-decoration ::slotted(*) {
+  position: absolute !important;
+  bottom: 208px;
+  right: -557px;
+  width: 1212px;
+  height: 753px;
+  opacity: 0.5;
+}
+
+.hero-content {
+  text-align: center;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 2rem 1rem;
+  }
+}
+

package/dist/collection/components/af-hero-section/af-hero-section.js

@@ -0,0 +1,94 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Hero section component for marketing pages
+ */
+export class AfHeroSection {
+    constructor() {
+        /** Hero variant */
+        this.variant = 'dark';
+        /** Show decorative paperclip */
+        this.withDecoration = false;
+        /** Minimum height */
+        this.minHeight = '60vh';
+    }
+    render() {
+        return (h(Host, { key: '85061979e5f4d2a766574cbc355e2f833160050b' }, h("div", { key: 'f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6', class: "hero-decoration" }, h("slot", { key: 'f8c629d60b6fbb0627e0720967bbc5bfeecbfecd', name: "decoration" }))), h("af-container", { key: '07ed025ef1b11880896a0ca72916592f4b36dddf' }, h("div", { key: 'dbe586394c6e10ed672d12326e21832376661ed1', class: "hero-content" }, h("slot", { key: 'd3906e6fd0bdb1439df2c4e6b48e090472bcc2e5' }))))));
+    }
+    static get is() { return "af-hero-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-hero-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-hero-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hero variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'dark'"
+            },
+            "withDecoration": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show decorative paperclip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "with-decoration",
+                "defaultValue": "false"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height",
+                "defaultValue": "'60vh'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-hero-section.js.map

package/dist/collection/components/af-hero-section/af-hero-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-hero-section.js","sourceRoot":"","sources":["../../../src/components/af-hero-section/af-hero-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE,mBAAmB;QACX,YAAO,GAAqB,MAAM,CAAC;QAE3C,gCAAgC;QACxB,mBAAc,GAAY,KAAK,CAAC;QAExC,qBAAqB;QACb,cAAS,GAAW,MAAM,CAAC;KAoBpC;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;gBACrF,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP;gBACD;oBACE,4DAAK,KAAK,EAAC,cAAc;wBACvB,8DAAa,CACT,CACO,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages\n */\n@Component({\n  tag: 'af-hero-section',\n  styleUrl: 'af-hero-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHeroSection {\n  /** Hero variant */\n  @Prop() variant: 'light' | 'dark' = 'dark';\n  \n  /** Show decorative paperclip */\n  @Prop() withDecoration: boolean = false;\n  \n  /** Minimum height */\n  @Prop() minHeight: string = '60vh';\n\n  render() {\n    return (\n      <Host>\n        <div class={`hero-section variant-${this.variant}`} style={{ minHeight: this.minHeight }}>\n          {this.withDecoration && (\n            <div class=\"hero-decoration\">\n              <slot name=\"decoration\"></slot>\n            </div>\n          )}\n          <af-container>\n            <div class=\"hero-content\">\n              <slot></slot>\n            </div>\n          </af-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-logo/af-logo.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogo {
     render() {
-        return (h(Host, { key: '8a33b73d7a60054dde8a04327d94d78763552549' }, h("img", { key: '2dbf83d383508aaeff70f683866925e4fa98847d', src: "https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe", alt: "Affinda", class: "logo-img" })));
+        return (h(Host, { key: '6e7a2dd46fa7143bdac4dee8d7146649ff3c7f57' }, h("img", { key: '03fb48e53218c6207927f9337851e3d39c5ca4a7', src: "https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe", alt: "Affinda", class: "logo-img" })));
     }
     static get is() { return "af-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-logo-well/af-logo-well.css

@@ -0,0 +1,27 @@
+:host {
+  display: inline-block;
+}
+
+.logo-well {
+  background: var(--colour-tints-inkwell-600, #1A3038);
+  border-radius: 16px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 40px;
+  box-sizing: border-box;
+  min-width: 120px;
+}
+
+::slotted(img) {
+  max-height: 40px;
+  width: auto;
+  display: block;
+  filter: brightness(0) invert(1); /* Make logos white */
+}
+
+::slotted(div) {
+  white-space: nowrap;
+}
+