/* ===================================================================== GLOBAL MARKETING BUTTON SYSTEM Two sizes : Medium = 45px / 14px·500, Large = 50px / 16px·500 Two types : .btn-primary, .btn-secondary Both types get the gooey left-to-right bubble fluid fill on hover. Scoped to `.mkt main` — i.e. page CONTENT on marketing pages only (the nav/footer chrome keep their own styles; the marketing layout adds `mkt` to ). The bubble sub-structure (.btn-goo / .btn-fill / .btn-label) and the `.btn-fx` class are injected by buttons.js. ===================================================================== */ /* ---- Sizes: only two, height-based ---- */ .mkt main .btn { height: 45px; padding: 0 22px; font-size: 14px; font-weight: 500; border-radius: 999px; line-height: 1; } .mkt main .btn-md { height: 45px; padding: 0 22px; font-size: 14px; font-weight: 500; } .mkt main .btn-sm { height: 45px; padding: 0 22px; font-size: 14px; font-weight: 500; } .mkt main .btn-lg { height: 50px; padding: 0 28px; font-size: 16px; font-weight: 500; } /* ---- Two types: bubble fill + text colours ---- */ .mkt main .btn-primary { --bub-fill: color-mix(in srgb, var(--color-primary) 74%, #000); --bub-text: #ffffff; } .mkt main .btn-secondary { --bub-fill: #ffffff; --bub-text: var(--color-primary); } /* ---- Header CTA: outside
, so it joins the bubble system here. Matches the content primary — brand-blue rest, white text, Medium 45px size — and darkens on hover via the bubble. Overrides the black-pill rule in styles.css (this sheet loads after it, and the .mkt prefix raises specificity). ---- */ .mkt .marketing-nav .btn-primary { height: 40px; padding: 0 22px; font-size: 14px; font-weight: 500; line-height: 1; border-radius: 999px; background: var(--color-primary); border-color: var(--color-primary); color: #ffffff; --bub-fill: color-mix(in srgb, var(--color-primary) 74%, #000); --bub-text: #ffffff; } .mkt .marketing-nav .btn-primary:hover { background: var(--color-primary); border-color: var(--color-primary); } .mkt .marketing-nav .btn-secondary { --bub-fill: #ffffff; --bub-text: var(--color-primary); } /* ---- Circle fluid fill: a disc grows from the left edge and flows right (.btn-fx + .btn-fill / .btn-label injected by buttons.js) ---- */ .btn-fx { position: relative; overflow: hidden; isolation: isolate; } .btn-fx .btn-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; transition: color .35s ease .1s; } .btn-fx:hover .btn-label { color: var(--bub-text); } /* Goo container kept as the positioned wrapper (no SVG filter); blobs disabled */ .btn-fx .btn-goo { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .btn-fx .btn-goo i { display: none; } .btn-fx .btn-fill { position: absolute; top: 50%; left: 0; z-index: 1; width: 165%; aspect-ratio: 1 / 1; background: var(--bub-fill); border-radius: 50%; transform: translateY(-50%) scale(0); transform-origin: left center; transition: transform .6s cubic-bezier(.45,0,.18,1); pointer-events: none; } .btn-fx:hover .btn-fill { transform: translateY(-50%) scale(1); } .btn-fx:focus, .btn-fx:focus-visible { box-shadow: none; outline: none; } @media (prefers-reduced-motion: reduce) { .btn-fx .btn-fill { transition-duration: .3s; } }