:root .bricks-button { cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } :root .bricks-button svg { transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); } :root .bricks-button.circle { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--control-md); block-size: var(--control-md); width: var(--control-md); height: var(--control-md); min-inline-size: var(--control-md); min-block-size: var(--control-md); min-width: var(--control-md); min-height: var(--control-md); max-inline-size: var(--control-md); max-block-size: var(--control-md); max-width: var(--control-md); max-height: var(--control-md); flex: 0 0 var(--control-md); aspect-ratio: 1 / 1; padding: 0; border-radius: 50%; box-sizing: border-box; line-height: 1; overflow: hidden; } :root .bricks-button.circle.sm { inline-size: var(--control-sm); block-size: var(--control-sm); width: var(--control-sm); height: var(--control-sm); min-inline-size: var(--control-sm); min-block-size: var(--control-sm); min-width: var(--control-sm); min-height: var(--control-sm); max-inline-size: var(--control-sm); max-block-size: var(--control-sm); max-width: var(--control-sm); max-height: var(--control-sm); flex-basis: var(--control-sm); } :root .bricks-button.circle.lg { inline-size: var(--control-lg); block-size: var(--control-lg); width: var(--control-lg); height: var(--control-lg); min-inline-size: var(--control-lg); min-block-size: var(--control-lg); min-width: var(--control-lg); min-height: var(--control-lg); max-inline-size: var(--control-lg); max-block-size: var(--control-lg); max-width: var(--control-lg); max-height: var(--control-lg); flex-basis: var(--control-lg); } :root .bricks-button.circle svg { inline-size: 18px; block-size: 18px; } :root .bricks-button:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):active { opacity: .86; } :root .bricks-button:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-gold) 72%, var(--color-white)); outline-offset: 3px; } :root .bricks-button.bricks-background-primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: color-mix(in srgb, var(--color-navy) 84%, var(--color-dark)); border-color: color-mix(in srgb, var(--color-navy) 84%, var(--color-dark)); } :root .bricks-button.bricks-background-secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: color-mix(in srgb, var(--color-gold) 88%, var(--color-dark)); border-color: color-mix(in srgb, var(--color-gold) 88%, var(--color-dark)); } :root .bricks-button.outline, :root .bricks-button.outline[class*="primary"], :root .bricks-button.outline[class*="secondary"], :root .bricks-button.outline[class*="dark"] { background-color: transparent; border-color: var(--color-navy); color: var(--color-navy); } :root .bricks-button.outline:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: var(--color-cream); border-color: var(--color-gold); color: var(--color-navy); } :root .hero-card .bricks-button.outline, :root .intro-demo--hero .bricks-button.outline { border-color: var(--color-white); color: var(--color-white); } :root .hero-card .bricks-button.outline:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover, :root .intro-demo--hero .bricks-button.outline:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: rgba(255,255,255,.08); border-color: rgba(231,201,153,.76); color: var(--color-white); } :root .bricks-button.kl-home-btn--ghost:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover, :root .bricks-button.kl-advisors-button--ghost:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.72); color: var(--text-inverse); box-shadow: none; transform: none; } :root .bricks-button.kl-home-btn--ghost-gold:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: color-mix(in srgb, var(--color-gold) 10%, transparent); border-color: var(--color-gold-soft); color: var(--color-gold-soft); box-shadow: none; transform: none; } :root .bricks-button.kl-button--text-cta, :root .bricks-button.kl-button--text-cta.bricks-background-primary, :root .bricks-button.kl-button--text-cta.bricks-background-secondary, :root .bricks-button.kl-button--text-cta.bricks-background-light, :root .bricks-button.kl-button--text-cta.bricks-background-dark { min-height: 44px; padding: 0; background-color: transparent; border: 0; border-radius: 0; color: var(--color-white); box-shadow: none; } :root .bricks-button.kl-button--text-cta:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover { background-color: transparent; color: var(--color-white); opacity: .86; box-shadow: none; transform: none; } :root .bricks-button.kl-button--text-cta:not(:disabled):not([disabled]):not([aria-disabled="true"]):not(.disabled):hover svg { transform: translateX(2px); } :root .bricks-button:disabled, :root .bricks-button[disabled], :root .bricks-button[aria-disabled="true"], :root .bricks-button.disabled { cursor: not-allowed; opacity: .46; filter: grayscale(.35) saturate(.45); transform: none; box-shadow: none; } :root .bricks-button:disabled svg, :root .bricks-button[disabled] svg, :root .bricks-button[aria-disabled="true"] svg, :root .bricks-button.disabled svg { opacity: .6; } @media (prefers-reduced-motion: reduce) { :root .bricks-button, :root .bricks-button svg { transition: none; } }   :root { --container-width: min(1360px, calc(100% - 80px)); } #brx-content, #brx-content.wordpress { width: 100%; max-width: none; } @media (max-width: 720px) { :root { --container-width: calc(100% - 30px); } }