@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap"); /* ---- palette ------------------------------------------------------------ */ :root { --rx3-blue: #2b5cb8; --rx3-blue-dark: #1c3d8f; --rx3-navy: #111f5c; --rx3-navy-deep: #0a1440; --rx3-amber: #ffe699; --rx3-tint: #eaf1fb; --md-primary-fg-color: #2b5cb8; --md-primary-fg-color--light: #4477d0; --md-primary-fg-color--dark: #1c3d8f; --md-primary-bg-color: #fff; --md-primary-bg-color--light: #ffffffb3; --md-accent-fg-color: #1c3d8f; --md-typeset-a-color: #2b5cb8; } /* Material sets data-md-color-scheme on , so its own definitions of these sit on a closer ancestor than :root and win by proximity, not specificity. Redeclaring on the same selector puts us last in source order, which wins. */ :root, [data-md-color-scheme="default"] { --md-footer-bg-color: #111f5c; --md-footer-bg-color--dark: #0a1440; } /* ---- header + nav strip -------------------------------------------------- */ .md-header { box-shadow: none; } .md-tabs { background-color: var(--rx3-blue-dark); } .md-tabs__link { font-family: Poppins, sans-serif; font-weight: 600; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; } /* Logo is a black wordmark on transparent: knock it out to solid white. Alpha is preserved, so no new asset and no white header needed. */ .md-header__button.md-logo img { height: 1.9rem; width: auto; filter: brightness(0) invert(1); } .md-header__title { font-family: Poppins, sans-serif; font-weight: 600; } .md-footer-meta { background-color: var(--rx3-navy); } /* ---- typography ---------------------------------------------------------- */ .md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { font-family: Poppins, var(--md-text-font-family), sans-serif; font-weight: 700; color: var(--rx3-navy); } .md-typeset h1, .md-typeset h2 { text-transform: uppercase; letter-spacing: .015em; } .md-typeset h1 { font-size: 1.75rem; line-height: 1.2; } .md-typeset h2 { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--md-default-fg-color--lightest); } /* ---- hero (index.md, needs hide: [navigation, toc]) ---------------------- */ /* Eat the 100vw overflow, but only on the hero page: it hides its sidebars, so the `hidden` fallback (for browsers without `clip`) can't break sticky nav. */ .md-main:has(.hero) { overflow-x: hidden; overflow-x: clip; } /* Let the hero sit flush under the nav strip instead of below Material's gap. */ .md-main__inner:has(.hero) { margin-top: 0; } .md-content__inner:has(> .hero) { padding-top: 0; } .md-content__inner:has(> .hero)::before { display: none; } .md-typeset .hero { margin-inline: calc(50% - 50vw); padding-block: 4.5rem; background: linear-gradient(160deg, var(--rx3-navy) 0%, var(--rx3-navy-deep) 100%); color: #fff; } .md-typeset .hero > * { max-width: 34rem; margin-inline: auto; padding-inline: 1.2rem; } .md-typeset .hero h1 { color: #fff; margin-top: 0; font-size: 2.1rem; } /* Dim via colour, not opacity: the buttons live inside a hero

, and opacity on the parent would composite their white fill down to grey. */ .md-typeset .hero p { font-size: .85rem; color: #ffffffe0; } .md-typeset .hero .md-button { margin: .5rem .5rem 0 0; color: #fff; border-color: #fff; } .md-typeset .hero .md-button--primary, .md-typeset .hero .md-button:hover { background-color: #fff; color: var(--rx3-navy); border-color: #fff; } /* ---- numbered cards ------------------------------------------------------ */ .cards { display: grid; gap: 1.2rem; margin: 1.6rem 0; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: card; } .card { position: relative; counter-increment: card; background: #fff; border: 1px solid var(--md-default-fg-color--lightest); border-radius: .5rem; padding: 1.3rem 1.2rem 1rem; box-shadow: 0 2px 12px #111f5c14; } .card::after { content: counter(card, decimal-leading-zero) "."; position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--rx3-tint); color: var(--rx3-blue-dark); font-family: Poppins, sans-serif; font-weight: 700; font-size: .62rem; } .md-typeset .card h3 { margin-top: 0; padding-right: 2.4rem; font-size: .85rem; text-transform: none; } .md-typeset .card p:last-child { margin-bottom: 0; } /* ---- tables -------------------------------------------------------------- */ .md-typeset table:not([class]) { border: 1px solid var(--md-default-fg-color--lightest); box-shadow: none; font-size: .68rem; } .md-typeset table:not([class]) th { background-color: var(--rx3-tint); color: var(--rx3-navy); font-family: Poppins, sans-serif; font-weight: 700; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .md-typeset table:not([class]) td:first-child { font-weight: 600; color: var(--rx3-navy); } .md-typeset table:not([class]) code { font-size: .92em; } /* ---- column-ownership pills ---------------------------------------------- */ .owner-you, .owner-rx3 { display: inline-block; padding: .1em .55em; border-radius: 1em; font-size: .85em; font-weight: 600; white-space: nowrap; } .owner-you { background-color: var(--rx3-amber); color: #4a3600; } .owner-rx3 { background-color: var(--rx3-navy); color: #fff; } /* ---- definition lists (workbook Read Me sections) ------------------------ */ .md-typeset dl dt { font-family: Poppins, sans-serif; font-weight: 700; color: var(--rx3-navy); }