/* One button for the whole site. * * Buttons had drifted into sixteen class names with nine corner radii, eighteen * padding pairs, five type sizes and four weights. This file settles all of * them on the header CTA: the same gradient, the same 10px corner, the same * weight, the same lift on hover. * * Loaded from every page's AFTER that page's own stylesheet, so it wins * ties on source order. Page rules carry a lot of !important from an earlier * pass, so the declarations here carry it too; the doubled class selectors * match the few page rules that are two levels deep. * * Three blocks, in order: shape and size for every button, then the fill for a * primary, then the outline for a ghost. * * primary filled, brand gradient the action you want taken * ghost outlined, transparent the alternative * .nav-cta the compact one, header only * * Adding a button: give it one of these class names rather than inventing * another. A new name has to be added to BUTTON SHAPE and to one of the two * blocks below it, or it will not match anything. */ /* ---- 1. shape and size, every button ------------------------------------ */ .nav-cta.nav-cta, .btn-p.btn-p, .btn-o.btn-o, .form-btn.form-btn, .ct-submit.ct-submit, .cr-btn.cr-btn, .cr-apply.cr-apply, .bd-btn.bd-btn, .cm-btn.cm-btn, .fs-btn.fs-btn, .bl-btn.bl-btn, .ai-btn.ai-btn, .wd-btn.wd-btn, .pm-btn.pm-btn, .ma-btn.ma-btn, .pr-btn.pr-btn, .cbtn.cbtn, .hero-cta.hero-cta, .sm-play-btn.sm-play-btn, .bd-plan .cta, .fs-plan .cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; /* Height is pinned rather than derived from padding. Letting padding decide left buttons between 49.5px and 53px, because the flex line takes its height from the text's own box and that shifts with the glyphs in it, an arrow in a span being the usual culprit. Vertical centring is the flexbox's job; padding only handles the sides. */ box-sizing: border-box !important; min-height: 52px !important; height: auto !important; padding: 0 28px !important; border: none !important; border-radius: var(--r-btn, 10px) !important; font-family: inherit !important; font-size: var(--t-btn, clamp(16px, 1.3vw, 18px)) !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: background .2s, border-color .2s, box-shadow .25s, transform .2s !important; } /* the compact one, header only */ .nav-cta.nav-cta { min-height: 38px !important; padding: 0 18px !important; } /* ---- 2. primary, filled ------------------------------------------------- */ .nav-cta.nav-cta, .btn-p.btn-p, .form-btn.form-btn, .ct-submit.ct-submit, .cr-btn.cr-btn, .cr-apply.cr-apply, .bd-btn.bd-btn, .cm-btn.cm-btn, .fs-btn.fs-btn, .bl-btn.bl-btn, .ai-btn.ai-btn, .wd-btn.wd-btn, .pm-btn.pm-btn, .ma-btn.ma-btn, .pr-btn.pr-btn, .cbtn.cbtn, .hero-cta.hero-cta, .sm-play-btn.sm-play-btn, .bd-plan .cta, .fs-plan .cta { color: #fff !important; background: var(--grad-btn, linear-gradient(95deg, #a31ce8 0%, #c41fd4 100%)) !important; } .nav-cta.nav-cta:hover, .btn-p.btn-p:hover, .form-btn.form-btn:hover, .ct-submit.ct-submit:hover, .cr-btn.cr-btn:hover, .cr-apply.cr-apply:hover, .bd-btn.bd-btn:hover, .cm-btn.cm-btn:hover, .fs-btn.fs-btn:hover, .bl-btn.bl-btn:hover, .ai-btn.ai-btn:hover, .wd-btn.wd-btn:hover, .pm-btn.pm-btn:hover, .ma-btn.ma-btn:hover, .pr-btn.pr-btn:hover, .cbtn.cbtn:hover, .hero-cta.hero-cta:hover, .sm-play-btn.sm-play-btn:hover, .bd-plan .cta:hover, .fs-plan .cta:hover { background: var(--grad-btn-hover, linear-gradient(95deg, #b228f5 0%, #d52ae6 100%)) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 24px rgba(183, 28, 237, .28) !important; } /* ---- 3. ghost, outlined ------------------------------------------------- */ .btn-o.btn-o, .fs-btn.ghost, .ai-btn.ghost, .cbtn.ghost { color: #fff !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, .22) !important; box-shadow: none !important; } .btn-o.btn-o:hover, .fs-btn.ghost:hover, .ai-btn.ghost:hover, .cbtn.ghost:hover { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .38) !important; transform: translateY(-1px) !important; box-shadow: none !important; } /* ---- keyboard ----------------------------------------------------------- */ .nav-cta.nav-cta:focus-visible, .btn-p.btn-p:focus-visible, .btn-o.btn-o:focus-visible, .form-btn.form-btn:focus-visible, .ct-submit.ct-submit:focus-visible, .cr-btn.cr-btn:focus-visible, .cr-apply.cr-apply:focus-visible, .bd-btn.bd-btn:focus-visible, .cm-btn.cm-btn:focus-visible, .fs-btn.fs-btn:focus-visible, .bl-btn.bl-btn:focus-visible, .ai-btn.ai-btn:focus-visible, .wd-btn.wd-btn:focus-visible, .pm-btn.pm-btn:focus-visible, .ma-btn.ma-btn:focus-visible, .pr-btn.pr-btn:focus-visible, .cbtn.cbtn:focus-visible, .hero-cta.hero-cta:focus-visible, .sm-play-btn.sm-play-btn:focus-visible, .bd-plan .cta:focus-visible, .fs-plan .cta:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; } /* A submit built to fill its form keeps doing that. */ .cta-sec .form-btn.form-btn, .ct-form .ct-submit.ct-submit { width: 100% !important; } @media (prefers-reduced-motion: reduce) { .nav-cta.nav-cta, .btn-p.btn-p, .btn-o.btn-o, .form-btn.form-btn, .cbtn.cbtn { transition: none !important; } }