/* ========================================================================== Branda cookie notice. Branda sets its own colours through its options; these rules handle typography, spacing and — critically — position, so the notice does not land on top of the dock or the CLI panel, both of which are fixed to the bottom of the viewport. ========================================================================== */ /* A card in the bottom-right corner rather than a full-width bar. The dock sits bottom-centre and the CLI drawer spans the bottom edge, so the right corner is the only place nothing else already lives. IMPORTANT: #branda-cookie-notice-wrap is only a display:none shell that jQuery reveals. The positioned element is #branda-cookie-notice, which carries .ub-position-bottom and Branda's own fixed full-width placement. Styling the wrapper does nothing to where the notice lands. */ #branda-cookie-notice.ub-position-bottom, #branda-cookie-notice { font-family: var(--font-data) !important; font-size: var(--mono-data) !important; border-radius: var(--radius) !important; border: 1px solid var(--rule) !important; box-shadow: var(--shadow-rb) !important; position: fixed !important; inset-block-end: var(--s-5) !important; /* Branda sets left: 0, so both sides must be reset explicitly. */ left: auto !important; right: var(--s-5) !important; inset-inline-start: auto !important; inset-inline-end: var(--s-5) !important; /* min-width: 100% is what actually pinned this full width — min-width always beats width, so setting width alone did nothing at all. */ min-width: 0 !important; width: min(24rem, calc(100vw - var(--s-8))) !important; max-width: none !important; margin-inline: 0 !important; text-align: start !important; } /* The inner container re-centres itself with max-width 1200px and auto margins. In a 24rem card that would leave the text floating in the middle. */ #branda-cookie-notice .cookie-notice-container { max-width: none !important; margin: 0 !important; text-align: start !important; } /* Appears only once the boot sequence is over. boot.js sets has-booted on every exit path, including the ones where the boot never runs, so this cannot strand the notice. Scoped to .js: without JavaScript it shows immediately, since there is no boot to wait for. */ /* Entrance is driven by cookie.js, not by a class on : see that file for why a purely CSS-gated fade animates on a first visit and silently fails on a return visit. */ .js #branda-cookie-notice { opacity: 0; transform: translateY(14px) scale(0.985); transform-origin: bottom right; transition: opacity 620ms var(--ease-out-back), transform 620ms var(--ease-out-back); will-change: opacity, transform; } .js #branda-cookie-notice.is-in { opacity: 1; transform: none; } /* Nerd mode raises the CLI drawer; the notice has to clear it. */ .is-nerd #branda-cookie-notice, .is-nerd #branda-cookie-notice-wrap { inset-block-end: calc(min(46vh, 24rem) + var(--s-4)) !important; } @media (prefers-reduced-motion: reduce) { .js #branda-cookie-notice { transition: none; transform: none; /* Never left invisible if the script does not reach it. */ opacity: 1; } } /* Stacked, not a row: at 24rem a horizontal layout squeezes the text into a two-word column beside the button. */ .branda-cn-container, .cookie-notice-container { padding: var(--s-4) var(--s-5) !important; display: flex !important; flex-direction: column; align-items: flex-start; gap: var(--s-3); } #ub-cn-notice-text { margin: 0 !important; line-height: 1.55; } #ub-cn-notice-text p { margin: 0 !important; max-width: none; } /* Square the button to match the form and the dock. */ .ub-cn-set-cookie, .button.ub-cn-set-cookie { border-radius: 0 !important; padding: var(--s-2) var(--s-5) !important; font-family: var(--font-data) !important; font-size: var(--mono-data) !important; letter-spacing: var(--track-label); text-transform: uppercase; box-shadow: none !important; text-shadow: none !important; line-height: 1.6 !important; height: auto !important; } .ub-cn-set-cookie:focus-visible { outline: 2px solid var(--signal) !important; outline-offset: 3px; } @media (max-width: 47.99em) { /* Full width on a phone — a 24rem card in the corner is most of the screen anyway, and the dock is in flow there rather than floating. */ #branda-cookie-notice, #branda-cookie-notice-wrap { inset-inline: var(--s-3) !important; width: auto !important; inset-block-end: var(--s-3) !important; } .is-nerd #branda-cookie-notice, .is-nerd #branda-cookie-notice-wrap { inset-block-end: calc(50vh + var(--s-3)) !important; } }