/* ========================================================================== Brand + landing-page styling. 1. Site-wide brand — a dark header bar and a blue accent (replaces the default Material indigo), via `body[data-md-color-primary]` so it beats the named-palette defaults on every page. 2. Home (landing) page only — a full-dark, fully template-built page (`.bd-home`, set on by home.html so there is no flash): hero band, code card, screenshot showcase, and a grid of clickable section cards. index.md has no body; `.bd-home .md-content` is hidden so the page is the custom sections only — never a hero skinned over a Markdown body. ========================================================================== */ /* ----- Site-wide brand --------------------------------------------------- */ /* `body[data-md-color-primary]` (0,1,1) beats `[data-md-color-primary=indigo]` (0,1,0), so the dark header wins over the named-palette default. Header text stays light (Material's --md-primary-bg-color is already white). */ body[data-md-color-primary] { --md-primary-fg-color: #0f1419; --md-primary-fg-color--light: #1a212b; --md-primary-fg-color--dark: #090d11; } body[data-md-color-accent] { --md-accent-fg-color: #4ea1f3; } /* ----- Header: wordmark links home (matches the logo icon) --------------- */ /* The site name in the title slot is a link (header.html override); keep it visually identical to the plain wordmark — inherit color, no underline. */ .bd-header__home { color: inherit; text-decoration: none; } .bd-header__home:hover { color: inherit; opacity: 0.85; } /* ----- Header: SaaS-style top nav (replaces the repo/stars widget) ------- */ .md-header__source { width: auto; max-width: none; } .bd-headnav { display: flex; align-items: center; gap: 1.2rem; justify-content: flex-end; } .bd-headnav__link { color: #cdd8e3; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 120ms; } .bd-headnav__link:hover { color: #ffffff; } .bd-headnav__cta { padding: 0.32rem 0.85rem; border: 1px solid #3a4a5a; border-radius: 8px; color: #eaf2fb; } .bd-headnav__cta:hover { background: #4ea1f3; border-color: #4ea1f3; color: #06121f; } .bd-headnav__icon { display: inline-flex; align-items: center; color: #aeb9c4; transition: color 120ms; } .bd-headnav__icon:hover { color: #ffffff; } .bd-headnav__icon svg { width: 1.2rem; height: 1.2rem; fill: currentColor; } /* ========================================================================== Full-dark landing (scoped to the home page; `.bd-home` is set on ). ========================================================================== */ .bd-home, .bd-home body, .bd-home .md-main { background-color: #0c1116; } /* index.md has no body — hide the (empty) Markdown content container so the landing is the custom sections plus the footer, with no blank gap. */ .bd-home .md-content { display: none; } .bd-home .md-footer { background-color: #0b0f14; } .bd-home .md-footer-meta { background-color: #080b0f; } /* ----- Hero band --------------------------------------------------------- */ .bd-hero { padding: 4.5rem 1.2rem 3.25rem; text-align: center; color: #e6edf3; background: radial-gradient(1100px 420px at 50% -8%, rgba(78, 161, 243, 0.20), transparent 62%), linear-gradient(180deg, #0f1419 0%, #121922 100%); } .bd-hero__inner { max-width: 50rem; margin: 0 auto; } .bd-hero__eyebrow { margin: 0 0 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6ea8e6; } .bd-hero__title { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.07; font-weight: 800; letter-spacing: -0.01em; color: #f4f7fa; } .bd-hero__subtitle { max-width: 38rem; margin: 0 auto 1.9rem; font-size: clamp(1rem, 2.1vw, 1.22rem); line-height: 1.5; color: #aab6c2; } .bd-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 2.4rem; } .bd-hero .md-button { border-radius: 9px; padding: 0.55rem 1.25rem; font-weight: 600; } .bd-hero .md-button--primary { background-color: #4ea1f3; border-color: #4ea1f3; color: #06121f; } .bd-hero .md-button--primary:hover { background-color: #6cb3f6; border-color: #6cb3f6; } .bd-hero .md-button:not(.md-button--primary) { color: #dbe6f1; border-color: #33414f; } .bd-hero .md-button:not(.md-button--primary):hover { background-color: #1c2530; border-color: #44546580; } /* ----- Code card (in hero) ---------------------------------------------- */ .bd-code { max-width: 38rem; margin: 0 auto; text-align: left; background: #0b0f14; border: 1px solid #232d39; border-radius: 12px; box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.7); overflow: hidden; } .bd-code__chrome { display: flex; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #1c2531; background: #10161d; } .bd-code__chrome span { width: 11px; height: 11px; border-radius: 50%; background: #2c3947; } .bd-code__chrome span:nth-child(1) { background: #f3614e; } .bd-code__chrome span:nth-child(2) { background: #f3c14e; } .bd-code__chrome span:nth-child(3) { background: #5fcf80; } .bd-code pre { margin: 0; padding: 16px 18px; font: 0.86rem/1.65 ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace; color: #c9d4df; overflow-x: auto; } .bd-code .t-kw { color: #f3839b; } .bd-code .t-dec { color: #4ea1f3; } .bd-code .t-str { color: #7fd293; } .bd-code .t-fn { color: #c9a6f3; } .bd-code .t-ty { color: #6f8190; } .bd-code .t-con { color: #f3c14e; } /* ----- Screenshot showcase band ----------------------------------------- */ .bd-showcase { padding: 0 1.2rem 2rem; background: linear-gradient(180deg, #121922 0%, #0c1116 100%); } .bd-shot { max-width: 62rem; margin: 0 auto; text-align: center; transform: translateY(-1.75rem); } .bd-shot img { width: 100%; border-radius: 13px; border: 1px solid #2b3440; box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.75); } .bd-shot figcaption { margin: 1.1rem auto 0; max-width: 34rem; font-size: 0.85rem; line-height: 1.5; color: #8a97a5; } /* ----- Explore: clickable section cards --------------------------------- */ .bd-explore { padding: 0.5rem 1.2rem 4rem; background: #0c1116; } .bd-explore__inner { max-width: 62rem; margin: 0 auto; } .bd-explore__eyebrow { margin: 0 0 1.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #62788c; } .bd-explore__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .bd-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.4rem; background: #131a22; border: 1px solid #232d39; border-radius: 12px; text-decoration: none; transition: border-color 130ms, box-shadow 130ms, transform 130ms; } .bd-card:hover { border-color: #4ea1f3; box-shadow: 0 16px 38px -20px rgba(0, 0, 0, 0.65); transform: translateY(-3px); } .bd-card__title { font-size: 1.02rem; font-weight: 700; color: #f1f5f9; } .bd-card__desc { font-size: 0.87rem; line-height: 1.5; color: #9aa7b4; } .bd-card__desc code { padding: 0.05em 0.35em; border-radius: 5px; background: #0b0f14; color: #c9d4df; font-size: 0.85em; } .bd-card__more { margin-top: auto; padding-top: 0.3rem; font-size: 0.82rem; font-weight: 600; color: #4ea1f3; }