/* Brand accent: the violet from the logo mark (img/logo.png, #761CFD) and the section-title icon badges below, adopted as the site's actual link/button/ active-tab color instead of Material's unrelated default indigo. Verified ~6.3:1 contrast on white. Lightened for dark mode, where the saturated light-mode violet reads too dim against the near-black surface. `primary: white` in mkdocs.yml (an untinted header) makes Material hardcode --md-typeset-a-color to its own default indigo on [data-md-color-primary= white] — that attribute lives on , closer to every link than a plain :root rule, so inheritance takes Material's value first regardless of stylesheet order. Matching its own selector is what lets this rule win. */ [data-md-color-primary="white"] { --md-typeset-a-color: #761cfd; --md-accent-fg-color: #761cfd; --md-accent-fg-color--transparent: #761cfd1a; } [data-md-color-primary="white"][data-md-color-scheme="slate"] { --md-typeset-a-color: #a879ff; --md-accent-fg-color: #bd9dff; --md-accent-fg-color--transparent: #bd9dff1a; } /* Every page title: serif, and full-strength body text color instead of Material's default dimmed h1. Page-specific heroes (.bc-hero, .bc-page- hero below) already set their own bigger font-size on top of this. */ .md-typeset h1 { color: var(--md-default-fg-color); font-family: Georgia, "Times New Roman", serif; font-weight: 400; } /* Keep the site title in the header visible on scroll instead of Material's default crossfade to the current page title. */ .md-header__title--active .md-header__topic { z-index: 1; transform: translateX(0); pointer-events: auto; opacity: 1; } .md-header__title--active .md-header__topic + .md-header__topic { pointer-events: none; opacity: 0; } /* Homepage hero: large serif display heading, and the image column centered against the text column rather than top-aligned. */ .md-typeset .grid.bc-hero { align-items: center; } .md-typeset .bc-hero h1 { margin-bottom: 0.625rem; letter-spacing: -0.01em; color: var(--md-typeset-color); font-family: Georgia, "Times New Roman", serif; font-size: 4.25rem; font-weight: 400; line-height: 1.05; } /* At narrow widths 4.25rem doesn't leave room for "Bootstrap" or "Components" to wrap at a word boundary, so the browser breaks mid-word instead. */ @media screen and (max-width: 44.9375em) { .md-typeset .bc-hero h1 { font-size: 2.75rem; } } .md-typeset .bc-cards-4 { grid-template-columns: repeat(4, 1fr); } @media screen and (max-width: 76.25em) { .md-typeset .bc-cards-4 { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 44.9375em) { .md-typeset .bc-cards-4 { grid-template-columns: 1fr; } } .md-typeset .bc-cards-2 { grid-template-columns: repeat(2, 1fr); } @media screen and (max-width: 44.9375em) { .md-typeset .bc-cards-2 { grid-template-columns: 1fr; } } .md-typeset .component-card-art { display: block; box-sizing: border-box; width: 100%; height: 7.5rem; margin-bottom: 0.75rem; padding: 1.25rem; object-fit: contain; border-radius: 0.75rem; background: #f4eefe; } [data-md-color-scheme="slate"] .md-typeset .component-card-art { background: #2e1c4d; } .md-typeset .grid.cards > ul > li:has(.component-card-art), .md-typeset .grid.cards > ul > li:has(.component-card-icon), .md-typeset .grid.cards > ul > li:has(.component-card-icon-badge) { position: relative; display: flex; flex-direction: column; } /* Component cards link out via a single title link; stretch it over the whole card so anywhere on the card is clickable, not just the title text. */ .md-typeset .grid.cards > ul > li:has(.component-card-art) a::after { position: absolute; content: ""; inset: 0; } /* Section header with a badged icon (e.g. Accessibility's "What this module handles"), and its subtitle line directly underneath. */ .md-typeset .component-section-title { display: flex; align-items: center; gap: 0.6rem; } .md-typeset .component-section-title .twemoji { --md-icon-size: 1.5rem; box-sizing: content-box; padding: 0.4rem; color: #761cfd; border-radius: 0.5rem; background: #f4eefe; } [data-md-color-scheme="slate"] .md-typeset .component-section-title .twemoji { background: #2a1a52; } .md-typeset .component-section-subtitle { margin-top: -0.6rem; color: var(--md-default-fg-color--light); } /* Flat SVG badge icons: self-contained (their own tinted square is baked into the artwork), so no extra background wrapper here. */ .md-typeset .component-card-icon { display: block; width: 3.25rem; height: 3.25rem; margin-bottom: 0.75rem; } /* Material-icon badge sized to sit where .component-card-icon does, for cards that don't have a bespoke illustrated SVG — same violet square as .component-section-title .twemoji, just bigger. */ .md-typeset .component-card-icon-badge { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; margin-bottom: 0.75rem; color: #761cfd; border-radius: 0.75rem; background: #f4eefe; } .md-typeset .component-card-icon-badge .twemoji { --md-icon-size: 1.75rem; } [data-md-color-scheme="slate"] .md-typeset .component-card-icon-badge { background: #2a1a52; } /* Interior page hero: a scaled-down version of the homepage's serif treatment, plus an eyebrow line above the heading. */ .md-typeset .bc-eyebrow { display: block; margin-bottom: 0.5rem; letter-spacing: 0.02em; color: var(--md-default-fg-color--light); font-size: 0.8rem; font-weight: 700; } .md-typeset .bc-page-hero h1 { margin: 0 0 0.75rem; letter-spacing: -0.01em; font-family: Georgia, "Times New Roman", serif; font-size: 3rem; font-weight: 400; line-height: 1.08; } .md-typeset .bc-lede { max-width: 46rem; color: var(--md-default-fg-color--light); font-size: 1.05rem; } /* Component page: lede row (description + link to the upstream Bootstrap docs) and the live demo iframe below it. */ .md-typeset .component-lede { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; } .md-typeset .component-lede p { max-width: 40rem; margin: 0; color: var(--md-default-fg-color--light); font-size: 1.05rem; } .md-typeset .component-source-link { white-space: nowrap; } /* Component page: the getbootstrap.com reference, demoted from a big button up top (competing with the actual content) to a quiet footer link. */ .md-typeset .component-source-footer { color: var(--md-default-fg-color--light); font-size: 0.85rem; } .md-typeset .component-demo-frame { display: block; width: 100%; min-height: 4rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 0.75rem; background: #fff; } /* Props/slots/variants reference tables: full width instead of shrinking to content, with a non-wrapping first column so long descriptions don't push the whole table wide on narrow screens. */ /* Material wraps every table in .md-typeset__scrollwrap > .md-typeset__table, both display:inline-block (shrink-to-fit) — that's what keeps a short table narrow. Force the wrappers, and the itself (which only fills 100% of that shrink-to-fit wrapper, not the page column), to full width instead. */ .md-typeset .component-reference-table .md-typeset__scrollwrap, .md-typeset .component-reference-table .md-typeset__table { display: block; } .md-typeset .component-reference-table table { width: 100%; } .md-typeset .component-reference-table th:first-child, .md-typeset .component-reference-table td:first-child { white-space: nowrap; }