/* Cookie consent — bottom-right compact box matching the marketing site. */ /* Overrides vanilla-cookieconsent v3 defaults. Library CSS must load first. v3 DOM (consent modal, "box" layout): .cm div ← empty wrapper / close-icon slot .cm__body .cm__texts > .cm__desc .cm__btns > .cm__btn-group > button.cm__btn × 2 .cm__footer > .cm__links > .cm__link-group > a We grid-layout .cm and use `display: contents` on the in-between wrappers so the desc / btn-group / footer link land directly on .cm's grid. Theme: the site sets `data-theme="light|dark"` on (default dark, follows system pref, persisted in localStorage['keygraph-theme']). The banner lives in , so light-mode rules are scoped under `[data-theme="light"] #cc-main`. Dark is the default below. */ #cc-main { --cc-font-family: var(--sans, 'Geist', -apple-system, BlinkMacSystemFont, sans-serif); --cc-bg: #0F0F12; --cc-primary-color: #FFFFFF; --cc-secondary-color: #A1A1A8; --cc-border-color: #26262E; --cc-modal-border-radius: 12px; --cc-btn-border-radius: 8px; --cc-modal-margin: 16px; --cc-link-color: #FFFFFF; --cc-overlay-bg: transparent; --cc-z-index: 2147483646; } /* Box container */ #cc-main .cm { width: 100%; max-width: 380px; padding: 16px 16px 14px; border: 1px solid var(--cc-border-color); border-radius: 12px; background: var(--cc-bg); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04); display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 12px; align-items: center; } /* Empty close-icon slot and title — not used. */ #cc-main .cm > div:first-child:empty, #cc-main .cm__title, #cc-main .cm__btn--close { display: none; } /* Flatten wrappers so children participate in .cm's grid. */ #cc-main .cm__body, #cc-main .cm__btns, #cc-main .cm__links, #cc-main .cm__link-group { display: contents; } /* Row 1 — description spans the full width. */ #cc-main .cm__texts { grid-column: 1 / -1; padding: 0; margin: 0; } #cc-main .cm__desc { margin: 0; padding: 0; font-size: 14px; line-height: 1.45; color: var(--cc-secondary-color); } /* Row 2, column 1 — Privacy policy text link. */ #cc-main .cm__footer { grid-column: 1; grid-row: 2; margin: 0; padding: 0; border: none; background: transparent; } #cc-main .cm__footer a { color: var(--cc-primary-color); font-weight: 600; font-size: 14px; text-decoration: none; background: transparent; padding: 0; border: none; } #cc-main .cm__footer a:hover { text-decoration: underline; } /* Row 2, column 2 — Opt-out / Accept buttons. Source order is acceptAllBtn → acceptNecessaryBtn (Accept, then Opt-out). Reverse visually so the layout reads "Opt-out Accept" — matches the primary-action-on-the-right convention. */ #cc-main .cm__btn-group { grid-column: 2; grid-row: 2; display: flex; flex-direction: row-reverse; gap: 8px; padding: 0; margin: 0; border: none; width: auto; } #cc-main .cm__btn { margin: 0 !important; padding: 8px 14px; min-height: 0; height: auto; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: 8px; background: #1C1C22; color: var(--cc-primary-color); border: 1px solid #2A2A33; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; white-space: nowrap; box-sizing: border-box; } #cc-main .cm__btn > span { line-height: 1.4; } #cc-main .cm__btn:hover { background: #25252D; border-color: #3A3A45; } #cc-main .cm__btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .35); outline-offset: 2px; } /* Mobile — stack the bottom row so it doesn't overflow. */ @media (max-width: 480px) { #cc-main .cm { max-width: none; width: calc(100vw - 32px); grid-template-columns: 1fr; } #cc-main .cm__footer { grid-column: 1; grid-row: 2; } #cc-main .cm__btn-group { grid-column: 1; grid-row: 3; justify-content: flex-end; } } /* ───────────────────────────── Light mode ───────────────────────────── Warm beige/taupe palette mirroring the site's [data-theme="light"] tokens (--bg #E1DCD2, --white #FFFDF9, --text #2A2218, --border #BDB39D). */ [data-theme="light"] #cc-main { --cc-bg: #FFFDF9; --cc-primary-color: #2A2218; --cc-secondary-color: #5A4F3D; --cc-border-color: #BDB39D; } [data-theme="light"] #cc-main .cm { box-shadow: 0 16px 40px rgba(42, 34, 24, .16), 0 0 0 1px rgba(42, 34, 24, .04); } [data-theme="light"] #cc-main .cm__btn { background: #EDE7D8; color: #2A2218; border-color: #BDB39D; } [data-theme="light"] #cc-main .cm__btn:hover { background: #E1DCD2; border-color: #A89784; } [data-theme="light"] #cc-main .cm__btn:focus-visible { outline-color: rgba(42, 34, 24, .35); } [data-theme="light"] #cc-main .cm__footer a { color: #2A2218; }