/* Only reveal heading permalink icons on hover, not permanently */ .md-typeset .headerlink { opacity: 0; transition: opacity 0.2s; } .md-typeset h1:hover .headerlink, .md-typeset h2:hover .headerlink, .md-typeset h3:hover .headerlink, .md-typeset h4:hover .headerlink { opacity: 1; } /* Neutral near-black dark mode instead of Material's default blue-tinted slate, plus boosted secondary text contrast */ [data-md-color-scheme="slate"] { --md-default-bg-color: #121212; --md-default-fg-color: rgba(255, 255, 255, 0.87); --md-default-fg-color--light: rgba(255, 255, 255, 0.7); --md-default-fg-color--lighter: rgba(255, 255, 255, 0.45); } /* Explicit pure white in light mode */ [data-md-color-scheme="default"] { --md-default-bg-color: #ffffff; } /* Custom brand palette: neutral charcoal (blends with the near-black dark mode) + teal accent, instead of the Material-for-MkDocs tutorial default (indigo). Material sets the named-palette colors via attributes on (e.g. [data-md-color-primary="indigo"]), so a plain :root override is inherited past rather than beaten — this has to match on the same attributes to actually win the cascade. */ [data-md-color-primary] { --md-primary-fg-color: #23272b; --md-primary-fg-color--light: #3d434a; --md-primary-fg-color--dark: #16191c; } [data-md-color-accent] { --md-accent-fg-color: #2ba6a4; --md-accent-fg-color--transparent: #2ba6a41a; } /* Material also hardcodes link/active-nav color per named primary+scheme pair (e.g. [data-md-color-scheme=slate][data-md-color-primary=indigo]) at higher specificity than the single-attribute overrides above, so it needs its own, equally-specific override to actually take the teal */ [data-md-color-scheme][data-md-color-primary] { --md-typeset-a-color: #2ba6a4; } /* Force the homepage quick-link cards into one balanced row instead of wrapping to a lopsided 2-then-1 grid */ .grid.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } @media screen and (max-width: 76.1875em) { .grid.cards { grid-template-columns: 1fr; } } /* Make the whole card clickable (a "stretched link"), not just the "Read article" text, since each card has exactly one link */ .grid.cards > ul > li { position: relative; } .grid.cards > ul > li a:last-of-type::after { content: ""; position: absolute; inset: 0; } /* Hero search button: a prominent, non-functional-looking search bar that hands off focus to Material's real header search (see hero-search.js) rather than reimplementing search matching */ .hero-search { display: flex; align-items: center; gap: 0.6rem; width: 100%; max-width: 560px; margin: 1.2rem 0 1rem 0; padding: 0.7rem 1rem; border-radius: 2rem; border: 1px solid var(--md-default-fg-color--lightest); background: var(--md-default-bg-color); color: var(--md-default-fg-color--light); font-size: 0.85rem; font-family: inherit; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .hero-search:hover, .hero-search:focus-visible { border-color: var(--md-accent-fg-color); box-shadow: 0 0 0 3px rgba(43, 166, 164, 0.15); outline: none; } .hero-search svg { flex-shrink: 0; stroke: currentcolor; } .hero-search span { flex: 1; text-align: left; } .hero-search kbd { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 0.2rem; background: var(--md-default-fg-color--lightest); color: var(--md-default-fg-color--light); } /* "New" badge next to recently updated articles */ .new-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #23272b; background: #2ba6a4; padding: 0.1rem 0.4rem; border-radius: 0.2rem; margin-left: 0.4rem; vertical-align: middle; } /* "Still need help" ticket banner */ .help-banner { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--md-accent-fg-color); border-radius: 0.2rem; background: rgba(43, 166, 164, 0.08); } .help-banner p { margin: 0; }