/* ------------------------------------------------------------------------------ CBFGSDrawer Ported from the SWAT prototype CBF-landing-full.0.26, lines 101-140, 259 and 295. Tokens and shared primitives live in CBFGSShared/cbf-gs.css. ------------------------------------------------------------------------------ */ /* ---- scrim and panel, spec 101-105 ---- DELIBERATE DEVIATION from the spec's z-index 50 / 60. The prototype page had no site chrome, so 50/60 was above everything. The real CB skin header is position:fixed at z-index 99999, which covered the top of the drawer - hiding the country/category badges and the close button. A modal has to sit above site chrome, so these go above it. If the microsite ends up using the spec's own slim header instead (open question Q9), these can drop back to 50/60. */ .cbf-gs.scrim { position: fixed; inset: 0; background: rgba(28, 21, 38, .55); z-index: 100000; opacity: 0; pointer-events: none; transition: .2s; } .cbf-gs.scrim.show { opacity: 1; pointer-events: auto; } .cbf-gs.drawer { position: fixed; top: 0; right: 0; height: 100%; width: 456px; max-width: 94vw; z-index: 100010; background: #fff; box-shadow: -16px 0 40px -18px rgba(46, 26, 71, .5); transform: translateX(105%); transition: transform .28s, opacity .15s; display: flex; flex-direction: column; } .cbf-gs.drawer.show { transform: translateX(0); } .cbf-gs.drawer.fade { opacity: 0; } .cbf-gs.drawer:focus { outline: none; } /* spec 259 */ /* ---- close button, spec 106 ---- */ .cbf-gs.drawer .dclose { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .92); font-size: 18px; line-height: 1; z-index: 2; padding: 0; } /* ---- photo header, spec 108-113 ---- */ .cbf-gs.drawer .dphoto { position: relative; aspect-ratio: 16/9; display: flex; align-items: flex-end; overflow: hidden; } .cbf-gs.drawer .dphoto .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cbf-gs.drawer .dphoto .motif { position: absolute; inset: 0; display: grid; place-items: center; } .cbf-gs.drawer .dphoto .motif svg { width: 88px; height: 88px; stroke: #fff; fill: none; stroke-width: 1.3; opacity: .5; } .cbf-gs.drawer .dphoto .badges { left: 12px; right: auto; align-items: flex-start; } .cbf-gs.drawer .dphoto .who { padding: 14px 18px; color: #fff; position: relative; z-index: 1; } .cbf-gs.drawer .dphoto .who .nm { font-family: "Montserrat"; font-weight: 700; } /* ---- body, spec 114-121 ---- */ .cbf-gs.drawer .dbody { padding: 20px 22px; overflow: auto; flex: 1; } .cbf-gs.drawer h3 { font-size: 22px !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 0 0 4px; } .cbf-gs.drawer .dwho { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; } /* Cart lines sit two to a row and the skin's tight leading collides them. 1.5 matches the design, and is set here rather than inline so both lines of a line item agree. */ .cbf-gs.drawer .lmeta p.lt, .cbf-gs.drawer .lmeta p.lg { line-height: 1.5; } .cbf-gs.drawer .dstory { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; } .cbf-gs.drawer .whynow { background: var(--lavender); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; } .cbf-gs.drawer .whynow b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); margin-bottom: 3px; } .cbf-gs.drawer .social { display: flex; gap: 18px; font-size: 13px; color: var(--ink-soft); margin: 10px 0 2px; } .cbf-gs.drawer .social b { color: var(--ink); } /* ---- impact line, spec 122-124 and 139-140 ---- */ .cbf-gs.drawer .giftlabel { font-size: 13px; margin-top: 10px; min-height: 18px; color: var(--violet); font-weight: 700; } .cbf-gs.drawer .giftlabel .arrow { color: var(--ink-soft); font-weight: 400; margin: 0 4px; } .cbf-gs.drawer .giftlabel.finish { color: var(--ok); } .cbf-gs.drawer .prognote { font-size: 13px; color: var(--ink-soft); background: var(--lavender); border-radius: 10px; padding: 11px 13px; margin-top: 12px; } .cbf-gs.drawer .prognote b { color: var(--violet); } /* ---- amount picker, spec 132-138 ---- */ .cbf-gs.drawer .lab { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin: 14px 0 8px; } .cbf-gs.drawer .amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .cbf-gs.drawer .amounts button { border: 1.5px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 0; font-weight: 700; font-size: 14px; transition: .12s; text-transform: none; } .cbf-gs.drawer .amounts button[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; } .cbf-gs.drawer .custom { display: flex; align-items: center; gap: 6px; margin-top: 8px; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 11px; } .cbf-gs.drawer .custom span { color: var(--ink-soft); font-weight: 700; } .cbf-gs.drawer .custom input { border: 0; outline: 0; font-family: inherit; font-size: 15px; font-weight: 700; width: 100%; background: transparent; color: var(--ink); } /* ---- footer, spec 125-126 ---- */ .cbf-gs.drawer .dfoot { padding: 16px 22px; border-top: 1px solid var(--line); } /* line-height is forced because the skin sets one on .btn with !important, which was squashing the two footer buttons out of the design's height. */ .cbf-gs.drawer .dfoot .btn { width: 100%; line-height: normal !important; } /* ---- mobile: bottom sheet, spec 127 ---- */ @media (max-width: 620px) { .cbf-gs.drawer { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; height: 90%; border-radius: 20px 20px 0 0; transform: translateY(105%); } .cbf-gs.drawer.show { transform: translateY(0); } } /* ---- tray, spec CSS 91-98 ---- The persistent basket bar. Fixed to the bottom, slides up once the basket has something in it. Compound .cbf-gs.tray because it is reparented to and carries both classes. */ .cbf-gs.tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgba(46, 26, 71, .3); transform: translateY(120%); transition: transform .25s; } .cbf-gs.tray.show { transform: translateY(0); } .cbf-gs.tray .in { max-width: 1120px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cbf-gs.tray .sum { display: flex; flex-direction: column; gap: 5px; } .cbf-gs.tray .sum .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .cbf-gs.tray .sum .v { font-family: "Montserrat"; font-weight: 800; font-size: 22px; } .cbf-gs.tray .sum .v small { font-weight: 600; font-size: 14px; color: var(--ink-soft); } .cbf-gs.tray .btn { width: auto; padding: 13px 26px; margin-left: auto; } /* ---- recent-gift notification, spec CSS 276-290 ---- Compound .cbf-gs.gift-toast / .cbf-gs.gift-toggle - both are reparented to . */ .cbf-gs.gift-toast { position: fixed; left: 16px; bottom: 66px; z-index: 44; max-width: 300px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; box-shadow: 0 12px 34px -14px rgba(46, 26, 71, .4); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s, bottom .25s; pointer-events: none; } .cbf-gs.gift-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .cbf-gs.gift-toast .gt-ping { flex: none; width: 9px; height: 9px; border-radius: 999px; background: var(--ok); position: relative; } .cbf-gs.gift-toast .gt-ping::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--ok); opacity: .5; animation: gtping 1.8s ease-out infinite; } @keyframes gtping { 0% { transform: scale(.55); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } } .cbf-gs.gift-toast .gt-body { display: flex; flex-direction: column; line-height: 1.25; } .cbf-gs.gift-toast .gt-text { font-size: 13px; color: var(--ink); font-weight: 600; } .cbf-gs.gift-toast .gt-sub { font-size: 11px; color: var(--ink-soft); } .cbf-gs.gift-toast .gt-x { flex: none; background: none; border: 0; color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; width: auto; } .cbf-gs.gift-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 44; display: inline-flex; align-items: center; gap: 8px; background: rgba(28, 21, 38, .72); color: #fff; border: 0; border-radius: 999px; padding: 7px 13px; font-size: 11.5px; font-weight: 600; cursor: pointer; transition: bottom .25s; width: auto; text-transform: none; } .cbf-gs.gift-toggle .gt-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); } .cbf-gs.gift-toggle[aria-pressed="false"] .gt-dot { background: #8a8194; } /* Move clear of the tray when it is up, spec 288-289. */ .tray-open .cbf-gs.gift-toast { bottom: 150px; } .tray-open .cbf-gs.gift-toggle { bottom: 96px; } @media (max-width: 620px) { .cbf-gs.gift-toast, .cbf-gs.gift-toggle { display: none; } } /* ---- cart view, spec CSS 143-166 ---- These were missed when the cart view was built: the markup shipped without its styles, so the basket rendered as unstyled white. Scoped to .cbf-gs.drawer because the drawer is reparented to and carries both classes. */ .cbf-gs.drawer .banner { display: flex; align-items: center; gap: 10px; background: #eaf6ef; border: 1px solid #cfe9db; border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-weight: 600; color: #1e6b41; } .cbf-gs.drawer .banner .tick { width: 22px; height: 22px; border-radius: 999px; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; } .cbf-gs.drawer .line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .cbf-gs.drawer .lthumb { width: 56px; height: 56px; border-radius: 10px; flex: none; } .cbf-gs.drawer .lmeta { flex: 1; min-width: 0; } .cbf-gs.drawer .lmeta .lt { font-weight: 700; font-size: 15px; margin: 0; } .cbf-gs.drawer .lmeta .lg { font-size: 12.5px; color: var(--violet); font-weight: 700; margin: 2px 0 0; } .cbf-gs.drawer .lmeta .lg.ok { color: var(--ok); } .cbf-gs.drawer .lright { text-align: right; } .cbf-gs.drawer .lamt { font-family: "Montserrat"; font-weight: 800; font-size: 16px; } .cbf-gs.drawer .lamt small { font-weight: 600; font-size: 12px; color: var(--ink-soft); } /* Width auto and text-transform none: the skin's global .btn rules would otherwise stretch this to full width and shout it in caps. */ .cbf-gs.drawer .rm { display: block; background: none; border: 0; color: var(--ink-soft); font-size: 12px; text-decoration: underline; margin: 4px 0 0 auto; width: auto; padding: 0; text-transform: none; cursor: pointer; } .cbf-gs.drawer .totals { margin-top: 14px; } .cbf-gs.drawer .totals .tr { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; } .cbf-gs.drawer .totals .tr .tk { color: var(--ink-soft); font-size: 14px; } .cbf-gs.drawer .totals .tr.big { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; } .cbf-gs.drawer .totals .tr.big .tk { font-weight: 700; color: var(--ink); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .cbf-gs.drawer .totals .tr.big .tv { font-family: "Montserrat"; font-weight: 800; font-size: 26px; } .cbf-gs.drawer .totals .tv small { font-size: 14px; color: var(--ink-soft); font-weight: 600; } .cbf-gs.drawer .empty { color: var(--ink-soft); text-align: center; padding: 36px 0; } /* The cart thumbnail now carries the project photo over its category gradient, so it needs to clip and position like the card and drawer photos do. Spec used a bare gradient here; the image is more use on the screen where a donor checks they picked the right thing. */ .cbf-gs.drawer .lthumb { position: relative; overflow: hidden; } .cbf-gs.drawer .lthumb .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cbf-gs.drawer .lthumb .motif { position: absolute; inset: 0; display: grid; place-items: center; } .cbf-gs.drawer .lthumb .motif svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.4; opacity: .5; } /* The photo overlay's name/badges have no room at 56px. */ .cbf-gs.drawer .lthumb .who, .cbf-gs.drawer .lthumb .badges, .cbf-gs.drawer .lthumb .phlabel, .cbf-gs.drawer .lthumb svg.corner { display: none; } /* ------------------------------------------------------------------------------ Payment, inside the drawer. The donor's details and then Moneris' own payment form, so the journey ends in the same panel it started in. #cbfgsMoneris is deliberately empty markup - Moneris Checkout renders its own iframe into it, and the card fields are never ours. ------------------------------------------------------------------------------ */ .cbf-gs.drawer .gsp-sec { margin-bottom: 18px; } /* Section headings, spec .co-sec 305. !important on size and weight is required, not decoration: the skin carries a bare `h4 { font-size: 25px !important; font-family: Roboto !important }`. An !important declaration on a tag selector beats any weight of ordinary selector, so without matching it these render at 25px in the skin's face - which is what the designer saw. The h3 rule above already had to do this. letter-spacing is reset for the same reason: the shared sheet sets -0.01em on every .cbf-gs heading, which is a display value and too tight here. */ .cbf-gs.drawer .co-sec { font-family: "Montserrat" !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: normal !important; color: var(--ink); margin: 20px 0 10px; } .cbf-gs.drawer .gsp-sec > .co-sec:first-child { margin-top: 0; } /* Collapsible checkout sections. The header is a button-like toggle (role="button"), so it is given a pointer, keyboard focus ring and a chevron that rotates when the section folds. All sections open by default; .collapsed hides the body and points the chevron down. */ .cbf-gs.drawer .co-acc { border-bottom: 1px solid var(--line); } .cbf-gs.drawer .co-acc:last-of-type { border-bottom: 0; } .cbf-gs.drawer .co-sec[data-acctoggle] { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; user-select: none; } .cbf-gs.drawer .co-sec[data-acctoggle]:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 6px; } .cbf-gs.drawer .co-accchevron { flex: 0 0 auto; width: 10px; height: 10px; margin-left: auto; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .15s ease; } .cbf-gs.drawer .co-acc.collapsed .co-accchevron { transform: rotate(-45deg); } .cbf-gs.drawer .co-accbody { transition: opacity .15s ease; } .cbf-gs.drawer .co-acc.collapsed .co-accbody { display: none; } .cbf-gs.drawer .gsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cbf-gs.drawer .gsf { grid-column: 1 / -1; display: block; } .cbf-gs.drawer .gsf.half { grid-column: span 1; } .cbf-gs.drawer .gsf > span { display: block; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px; } .cbf-gs.drawer .gsf input { width: 100%; border: 1.5px solid var(--line); border-radius: 9px; padding: 10px 11px; font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .cbf-gs.drawer .gsf input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(90, 42, 130, .12); } /* Colour alone would not carry this, so the invalid field also gets a weight change. */ .cbf-gs.drawer .gsf input.bad { border-color: #c0392b; border-width: 2px; } /* The alert region is rendered empty and filled a frame later, because a live region that already carries its text when it is inserted is not reliably announced. That means it is in the DOM with nothing in it most of the time, hence :empty - without it the panel would open with an empty red box at the top of the form. */ .cbf-gs.drawer .gsp-err, .cbf-gs.drawer .gsp-err-region { background: #fdecea; border: 1px solid #f5c6c2; color: #922b21; border-radius: 9px; padding: 10px 12px; font-size: 13.5px; margin: 0 0 14px; } .cbf-gs.drawer .gsp-err-region:empty { display: none; } .cbf-gs.drawer .gsp-go { width: 100%; } .cbf-gs.drawer .gsp-go.busy { opacity: .6; pointer-events: none; } /* Moneris sizes its own iframe. The min-height stops the panel collapsing while it loads, but it is only reserved once the form is actually coming - the section is on screen from the start now, and an empty 320px hole under "Payment" reads as something that failed to load. */ .cbf-gs.drawer #cbfgsMoneris { min-height: 0; } .cbf-gs.drawer .gsp-pay.live #cbfgsMoneris { min-height: 320px; } .cbf-gs.drawer #cbfgsMoneris iframe { width: 100%; border: 0; } /* Wrapper around #cbfgsMoneris. Moneris owns and manages the inner div, so the height is set on this wrapper instead - it starts at 0 and is grown to 800px in openMoneris() once the iframe is rendered, and reset to 0 again once checkout is closed. overflow:hidden keeps the wrapper clipping to its set height while it animates. */ .cbf-gs.drawer .gsp-moneris-wrap { height: 0; overflow: hidden; transition: height .2s ease; } .cbf-gs.drawer .gsp-note { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); background: var(--lavender); border-radius: 9px; padding: 10px 12px; margin: 12px 0 0; } .cbf-gs.drawer .gsp-note .lock { flex: none; } /* ---- waiting on CRM after the card is taken ---- */ .cbf-gs.drawer .gsp-wait { display: grid; place-items: center; padding: 60px 0; } .cbf-gs.drawer .gsp-wait .spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--violet); animation: cbfgs-spin .8s linear infinite; } @keyframes cbfgs-spin { to { transform: rotate(360deg); } } /* ---- the last screen ---- */ .cbf-gs.drawer .gsp-done { text-align: center; padding: 26px 0 10px; } .cbf-gs.drawer .gsp-done .mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px; font-size: 28px; line-height: 1; color: #fff; } .cbf-gs.drawer .gsp-done.ok .mark { background: var(--ok); } .cbf-gs.drawer .gsp-done.bad .mark { background: #c0392b; } .cbf-gs.drawer .gsp-done h3 { margin: 0 0 8px; } .cbf-gs.drawer .gsp-done p { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 8px; } .cbf-gs.drawer .gsp-done p.sub { font-size: 13px; } .cbf-gs.drawer .gsp-done .ord { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; } .cbf-gs.drawer .gsp-done .ord span { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; } .cbf-gs.drawer .gsp-done .ord b { font-family: "Montserrat"; font-size: 17px; color: var(--ink); letter-spacing: .04em; } /* Narrow screens: the two-up fields stack rather than squeeze. */ @media (max-width: 420px) { .cbf-gs.drawer .gsf.half { grid-column: 1 / -1; } } /* The panel is a payment form now, so it gets the room the fields need. */ @media (prefers-reduced-motion: reduce) { .cbf-gs.drawer .gsp-wait .spin { animation-duration: 2s; } } /* ---- edit-mode placeholder ---- The drawer, tray and notification all leave this module's own markup: the first two are moved to and the host div is removed. That leaves a zero-height container, and DNN has nothing to show a settings cog on. This gives it a body while editing, and disappears for visitors - it is rendered only when IsEditable. */ .cbf-gs-editnote { border: 1px dashed #b9a8cd; border-radius: 8px; background: #faf7fd; color: #5a4a6a; padding: 14px 16px; margin: 8px 0; font-size: 13px; line-height: 1.6; } .cbf-gs-editnote b { color: #3d2a52; } /* ---- receipt preference, spec .co-receipt / .rc 300-304 and the rules at 326-330 ---- Three choices across the top of the payment panel: a tax receipt, no receipt, or anonymous. Segmented control, not tabs in the ARIA sense - it is a group of pressed buttons, because nothing is being switched between, only re-labelled and shown or hidden. */ .cbf-gs.drawer .co-receipt { display: flex; gap: 6px; background: var(--track); border-radius: 12px; padding: 5px; margin-bottom: 6px; } .cbf-gs.drawer .rc { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: inherit; } .cbf-gs.drawer .rc.on { background: #fff; color: var(--violet); box-shadow: 0 1px 4px rgba(46, 26, 71, .12); } /* The tick only appears on the chosen one - spec hides it by default and shows it when on. */ .cbf-gs.drawer .rc-tick { display: none; color: var(--ok); font-weight: 800; } .cbf-gs.drawer .rc.on .rc-tick { display: inline; } .cbf-gs.drawer .co-anon { display: none; background: var(--lavender); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--ink); margin: 2px 0 8px; line-height: 1.45; } /* ---- what each choice changes, spec 326-330 ---- Anonymous collects nothing but the payment. "No receipt" still takes a name and email, but the address stops being required - it is only needed in order to issue a receipt. */ .cbf-gs.drawer .gsp[data-receipt="anon"] [data-personal] { display: none; } .cbf-gs.drawer .gsp[data-receipt="anon"] .co-anon { display: block; } /* Sub-label on the address heading, spec .co-seclabel 316 and the swap at 326-327. */ .cbf-gs.drawer .co-seclabel { font-family: "Roboto"; font-weight: 400; font-size: 12px; color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin-left: 6px; } .cbf-gs.drawer .co-lbl-none { display: none; } .cbf-gs.drawer .gsp[data-receipt="none"] .co-lbl-receipt { display: none; } .cbf-gs.drawer .gsp[data-receipt="none"] .co-lbl-none { display: inline; } /* "(optional)" sits in the label next to the field name, so it has to be lighter than the label itself or it reads as part of the name. */ .cbf-gs.drawer .co-opt { font-weight: 400; color: var(--ink-soft); } /* ---- address finder, the same one the existing checkout page uses ---- The search box itself needs no rules: it is inside a .gsf label, so it already takes the same border, radius and padding as every other field on the form. */ .cbf-gs.drawer .co-addrsearch { margin-bottom: 10px; } .cbf-gs.drawer .co-addrtoggle { font-size: 12.5px; margin: 6px 0 0; } .cbf-gs.drawer .co-addrtoggle a { color: var(--violet); text-decoration: underline; } /* Shown only while a lookup is in flight - the two calls are not instant and the box gives no other sign that anything is happening. */ .cbf-gs.drawer .co-addrprogress { display: none; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--lavender)); margin: 4px 0; } /* ---- jQuery UI's suggestion menu ---- Not under .cbf-gs.drawer: the widget appends its menu to , outside the drawer. The menu is given the .cbf-gs class as well as this one so that it still sits inside the design system and the custom properties below resolve - they are declared on .cbf-gs, not :root. Styled here rather than by pulling in a jQuery UI theme, for the reason the giving-season skin gives for not loading skin.css: the theme styles base elements site-wide and the microsite would then have to fight it back. With no theme the menu is an unstyled