diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index edfc139..b1a6fc1 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -44,6 +44,16 @@ const config: Config = {
scripts: [{ src: 'https://plausible.io/js/script.js', defer: true, 'data-domain': 'takaro.io' }],
headTags: [
+ // Inter for headings, matching the marketing site (gettakaro/website).
+ { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.googleapis.com' } },
+ { tagName: 'link', attributes: { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: 'anonymous' } },
+ {
+ tagName: 'link',
+ attributes: {
+ rel: 'stylesheet',
+ href: 'https://fonts.googleapis.com/css2?family=Inter:wght@700;900&display=swap',
+ },
+ },
{
tagName: 'script',
attributes: {},
@@ -58,15 +68,15 @@ const config: Config = {
themeConfig: {
colorMode: {
defaultMode: 'dark',
- disableSwitch: true,
- respectPrefersColorScheme: false,
+ disableSwitch: false,
+ respectPrefersColorScheme: true,
},
navbar: {
- title: 'Takaro Documentation',
+ title: 'Documentation',
logo: {
- alt: 'Takaro Logo',
- src: 'img/takaro.png',
+ alt: 'Takaro',
+ src: 'img/takaro-portal-a.svg',
},
items: [
{
@@ -87,7 +97,16 @@ const config: Config = {
],
},
footer: {
- style: 'dark',
+ // 'light' follows the active theme; 'dark' hardcodes near-white link
+ // text, which is invisible on the light footer surface.
+ style: 'light',
+ logo: {
+ alt: 'Takaro',
+ // Letterforms flip per theme; the portal-As stay brand purple in both.
+ src: 'img/takaro-wordmark-light.svg',
+ srcDark: 'img/takaro-wordmark.svg',
+ href: 'https://takaro.io',
+ },
links: [
{
title: 'Community',
diff --git a/src/css/custom.css b/src/css/custom.css
index 9cc1009..ca09fb1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -4,21 +4,149 @@
* work well for content-centric websites.
*/
-/* You can override the default Infima variables here. */
+/**
+ * Takaro brand tokens, mirroring the marketing site's design system.
+ * Source of truth: gettakaro/website — src/styles/global.css
+ * Logo: bridge-free portal-A (gettakaro/website PR #23).
+ *
+ * Names below match the site's token names so the two stay easy to diff.
+ */
:root {
- --ifm-color-primary: #664DE5;
- --ifm-color-primary-dark: #21af90;
- --ifm-color-primary-darker: #1fa588;
- --ifm-color-primary-darkest: #1a8870;
- --ifm-color-primary-light: #29d5b0;
- --ifm-color-primary-lighter: #32d8b4;
- --ifm-color-primary-lightest: #4fddbf;
- --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+ --takaro-bg: #080808;
+ --takaro-bg-card: #151515;
+ --takaro-bg-card-hover: #1a1a1a;
+ --takaro-border: #222222;
+ --takaro-text: #ffffff;
+ --takaro-text-base: #c2c2c2;
+ --takaro-text-muted: #818181;
+ --takaro-accent: #664de5;
+ --takaro-accent-hover: #7a5ef0;
+ --takaro-link: #b8adff;
+ --takaro-link-hover: #d0c9ff;
+ --takaro-font-heading: 'Inter', sans-serif;
+
+ --ifm-color-primary: var(--takaro-accent);
+ --ifm-color-primary-dark: #5138e2;
+ --ifm-color-primary-darker: #472dda;
+ --ifm-color-primary-darkest: #3b25b6;
+ --ifm-color-primary-light: var(--takaro-accent-hover);
+ --ifm-color-primary-lighter: #8674eb;
+ --ifm-color-primary-lightest: var(--takaro-link);
+
+ --ifm-heading-font-family: var(--takaro-font-heading);
+ --docusaurus-highlighted-code-line-bg: rgba(102, 77, 229, 0.28);
+}
+
+/**
+ * Light mode.
+ *
+ * The marketing site is dark-only, so there is no upstream light palette to
+ * mirror; these are derived here. Two constraints shaped them:
+ * 1. The dark palette cannot be reused — its link (#B8ADFF, 2.01:1) and body
+ * text (#C2C2C2, 1.78:1) are unreadable on white. Light mode therefore
+ * links in the brand purple itself, which clears AA at 5.59:1.
+ * 2. Surfaces are tinted with the print pack's supporting grey (#D2CFDC)
+ * rather than plain grey, keeping the purple cast the brand has in dark.
+ */
+html[data-theme='light'] {
+ --ifm-background-color: #ffffff;
+ --ifm-background-surface-color: #f7f6fa;
+ --ifm-heading-color: #14121c;
+ --ifm-font-color-base: #3a3646;
+ --ifm-navbar-background-color: #ffffff;
+ --ifm-navbar-shadow: 0 1px 0 #e6e3ee;
+ --ifm-toc-border-color: #e6e3ee;
+ --ifm-hr-border-color: #e6e3ee;
+ --ifm-code-background: rgba(102, 77, 229, 0.09);
+
+ /* The accent doubles as the link colour here; #B8ADFF is dark-mode only. */
+ --ifm-link-color: var(--takaro-accent);
+ --ifm-link-hover-color: #4a33c9;
+ --ifm-menu-color-active: var(--takaro-accent);
+
+ --ifm-footer-link-color: #3a3646;
+ --ifm-footer-title-color: #14121c;
+ --takaro-border-themed: #e6e3ee;
+ --takaro-muted-themed: #5c5768;
+ --takaro-surface-themed: #f7f6fa;
+ --takaro-active-tint: rgba(102, 77, 229, 0.08);
+ --docusaurus-highlighted-code-line-bg: rgba(102, 77, 229, 0.14);
+}
+
+/**
+ * The site is locked to dark mode. Docusaurus defines its dark neutrals on
+ * html[data-theme='dark'], which outranks :root — so these must be scoped to
+ * the same selector to take effect.
+ */
+html[data-theme='dark'] {
+ --ifm-background-color: var(--takaro-bg);
+ --ifm-background-surface-color: var(--takaro-bg-card);
+ --ifm-heading-color: var(--takaro-text);
+ --ifm-font-color-base: var(--takaro-text-base);
+ --ifm-navbar-background-color: var(--takaro-bg);
+ --ifm-navbar-shadow: 0 1px 0 var(--takaro-border);
+ --ifm-toc-border-color: var(--takaro-border);
+ --ifm-hr-border-color: var(--takaro-border);
+ --ifm-code-background: rgba(102, 77, 229, 0.14);
+
+ /* The site links in a lifted purple, which also clears AA on this ground. */
+ --ifm-link-color: var(--takaro-link);
+ --ifm-link-hover-color: var(--takaro-link-hover);
+ --ifm-menu-color-active: var(--takaro-link);
+
+ --ifm-footer-link-color: var(--takaro-text-base);
+ --ifm-footer-title-color: var(--takaro-text);
+ --takaro-border-themed: var(--takaro-border);
+ --takaro-muted-themed: var(--takaro-text-muted);
+ --takaro-surface-themed: var(--takaro-bg-card);
+ --takaro-active-tint: rgba(102, 77, 229, 0.16);
}
+/* The navbar logo is the portal-A mark; the wordmark supplies "Takaro". */
+.navbar__logo {
+ height: 1.6rem;
+}
+
+.navbar__brand:hover .navbar__title {
+ color: var(--ifm-link-color);
+}
+
+.navbar__title {
+ font-weight: 700;
+ letter-spacing: 0.01em;
+}
+
+/* Sidebar: active item carries the brand purple, lighter on a light ground. */
+.menu__link--active:not(.menu__link--sublist) {
+ background: var(--takaro-active-tint);
+}
+
+.table-of-contents__link--active,
+.table-of-contents__link--active code {
+ color: var(--ifm-link-color);
+}
+
+blockquote {
+ border-left-color: var(--ifm-color-primary);
+}
.footer {
- --ifm-footer-background-color: #121212;
+ --ifm-footer-background-color: var(--takaro-surface-themed);
+ --ifm-footer-link-hover-color: var(--ifm-link-color);
+ border-top: 1px solid var(--takaro-border-themed);
+}
+
+/* Footer wordmark: the SVG is ~5:1, so cap the height and let width follow. */
+.footer__logo {
+ height: auto;
+ margin: 0 0 0.75rem;
+ max-width: 190px;
+ width: 100%;
+}
+
+.footer__copyright {
+ color: var(--takaro-muted-themed);
+ font-size: 0.875rem;
}
.module-marketplace-banner {
@@ -38,7 +166,7 @@
}
.module-marketplace-banner__eyebrow {
- color: #9b8cff;
+ color: var(--ifm-link-color);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0;
@@ -66,7 +194,7 @@
}
.module-marketplace-banner__button:hover {
- background: #7a63ea;
+ background: var(--ifm-color-primary-light);
color: #fff;
text-decoration: none;
}
@@ -80,13 +208,13 @@
.module-path-card {
background: var(--ifm-background-surface-color);
- border: 1px solid rgba(102, 77, 229, 0.32);
+ border: 1px solid var(--takaro-border-themed);
border-radius: 8px;
padding: 1.25rem;
}
.module-path-card__eyebrow {
- color: #9b8cff;
+ color: var(--ifm-link-color);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0;
@@ -188,7 +316,7 @@
.game-card {
display: flex;
flex-direction: column;
- border: 1px solid var(--ifm-color-emphasis-300);
+ border: 1px solid var(--takaro-border-themed);
border-radius: 8px;
overflow: hidden;
transition: all 0.2s ease;
diff --git a/static/img/takaro-portal-a.svg b/static/img/takaro-portal-a.svg
new file mode 100644
index 0000000..20ba9d6
--- /dev/null
+++ b/static/img/takaro-portal-a.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/static/img/takaro-wordmark-light.svg b/static/img/takaro-wordmark-light.svg
new file mode 100644
index 0000000..11d325d
--- /dev/null
+++ b/static/img/takaro-wordmark-light.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/static/img/takaro-wordmark.svg b/static/img/takaro-wordmark.svg
new file mode 100644
index 0000000..e6df0a7
--- /dev/null
+++ b/static/img/takaro-wordmark.svg
@@ -0,0 +1,16 @@
+
+