diff --git a/src/assets/rylo-logo.svg b/src/assets/rylo-logo.svg
new file mode 100644
index 00000000..9267ef62
--- /dev/null
+++ b/src/assets/rylo-logo.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/index.md b/src/index.md
index 2b9e3fb7..dfb58932 100644
--- a/src/index.md
+++ b/src/index.md
@@ -21,8 +21,8 @@ abstract: |
```{=html}
-
-Try sign translate to experience state-of-the art-sign language translation technology.
+
+Try sign translate to experience state-of-the art-sign language translation technology.
```
diff --git a/src/sitemap.js b/src/sitemap.js
index f2c11936..91eadaf4 100644
--- a/src/sitemap.js
+++ b/src/sitemap.js
@@ -9,7 +9,7 @@ console.log(`
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
- https://sign-language-processing.github.io/
+ https://rylo.com/sign/research/
${date}
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 98e0ee81..c1a24149 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -1,3 +1,74 @@
+/* Rylo brand layer — values mirror the live rylo.com swatches
+ (--swatch--light, --swatch--dark, --swatch--brand-primary, radii) so this
+ page reads as part of the main site. Inter Tight matches rylo.com/sign/translate. */
+:root {
+ --rylo-cream: #faf5f2;
+ --rylo-dark: #191412;
+ --rylo-orange: #ff8b2b;
+ --rylo-orange-shade: #e07826;
+ --rylo-sky: #a9c2d7;
+ --rylo-dark-rgb: 25, 20, 18;
+ --rylo-border: rgba(var(--rylo-dark-rgb), 0.1);
+ --rylo-radius: 16px;
+
+ --bs-body-bg: var(--rylo-cream);
+ --bs-body-color: var(--rylo-dark);
+ --bs-body-font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
+ --bs-emphasis-color: var(--rylo-dark);
+ --bs-link-color: var(--rylo-orange-shade);
+ --bs-link-hover-color: var(--rylo-dark);
+ --bs-border-radius: var(--rylo-radius);
+ --bs-border-radius-lg: 24px;
+ --bs-nav-pills-link-active-bg: var(--rylo-orange);
+ --bs-nav-pills-link-active-color: #fff;
+}
+
+h1, h2, h3, h4, h5, h6, .rylo-navbar-title {
+ letter-spacing: -0.02em;
+}
+
+::selection {
+ background: var(--rylo-sky);
+ color: var(--rylo-dark);
+}
+
+.rylo-navbar {
+ background-color: rgba(250, 245, 242, 0.85);
+ backdrop-filter: saturate(180%) blur(12px);
+ border-bottom: 1px solid var(--rylo-border);
+ padding-top: 0.6rem;
+ padding-bottom: 0.6rem;
+}
+
+.rylo-navbar-brand {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.85rem;
+ min-height: 44px;
+}
+
+.rylo-logo {
+ display: inline-flex;
+ color: var(--rylo-dark);
+}
+
+.rylo-navbar-divider {
+ width: 1px;
+ height: 22px;
+ background: var(--rylo-border);
+}
+
+.rylo-navbar-title {
+ color: var(--rylo-dark);
+ font-weight: 600;
+ font-size: 1.05rem;
+ text-decoration: none;
+}
+
+.rylo-navbar-title:hover {
+ color: var(--rylo-orange-shade);
+}
+
#container {
max-width: 1800px;
margin: 1em auto;
@@ -89,6 +160,15 @@ iframe {
padding: 0.1em 0.2em;
}
+#navbar .nav-link {
+ color: rgba(var(--rylo-dark-rgb), 0.7);
+ border-radius: 8px;
+}
+
+#navbar .nav-link:hover {
+ color: var(--rylo-orange-shade);
+}
+
#refs div[id] {
padding-top: 66px;
margin-top: -66px;
diff --git a/src/template/index.html b/src/template/index.html
index 29e932de..4c7eeb20 100644
--- a/src/template/index.html
+++ b/src/template/index.html
@@ -5,10 +5,29 @@
+
+
$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
$for(author-meta)$
$endfor$
@@ -42,9 +61,15 @@
$for(include-before)$$include-before$$endfor$
- 
+