-
← Back to Home
-
-
-
+
-
+
diff --git a/base.css b/base.css
index 12c4927..383c9cd 100644
--- a/base.css
+++ b/base.css
@@ -1,4 +1,13 @@
/* base.css - shared variables and minimal resets used by all pages */
+/*
+ * NOTE: The Lexend font used as the primary body font is NOT loaded here.
+ * Every page that includes base.css MUST load Lexend via
tags in its
+ * (before base.css) to avoid falling back to system fonts:
+ *
+ *
+ *
+ *
+ */
:root {
--bg-color: #ffffff;
--text-color: #1a1a1a;
@@ -28,9 +37,9 @@
}
body {
- /* Primary site font: Slfdreamer (fallbacks provided) */
+ /* Primary site font: Lexend (fallbacks provided) */
font-family:
- "Slfdreamer",
+ "Lexend",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
@@ -38,7 +47,7 @@ body {
"Helvetica Neue",
Arial,
sans-serif;
- /* Base font size: larger for Slfdreamer legibility */
+ /* Base font size tuned for readability */
font-size: 18px;
background: var(--bg-color);
color: var(--text-color);
@@ -59,7 +68,7 @@ body {
}
}
-/* Slfdreamer primary display font */
+/* SLF Dreamer font used by footer copyright */
@font-face {
font-family: "Slfdreamer";
src: url("assetlab/faces/Slfdreamer-Regular.ttf") format("truetype");
@@ -167,6 +176,19 @@ footer.site-footer {
z-index: 1000;
}
+/* Keep footer copyright in SLF Dreamer */
+footer.site-footer .footer-copyright {
+ font-family:
+ "Slfdreamer",
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ "Helvetica Neue",
+ Arial,
+ sans-serif;
+}
+
/* link/button groups baseline */
.links {
display: flex;
diff --git a/brand.css b/brand.css
index cb344c4..be941c7 100644
--- a/brand.css
+++ b/brand.css
@@ -1,25 +1,113 @@
/* brand.css - overrides and layout specific to brand guidelines page */
-.container.single-column { grid-template-columns: 1fr; max-width:900px; gap:28px; padding:24px; margin: 0 auto; text-align: center }
-.brand-hero { display:flex; gap:20px; align-items:center; margin:40px 0; flex-direction:column }
-.brand-logo { width:140px; height:140px; object-fit:contain; margin:0 auto }
-.brand-section { margin:28px 0 }
-.badge-sample { width:160px; margin:8px; display:inline-block }
+.container.single-column {
+ grid-template-columns: 1fr;
+ max-width: 900px;
+ gap: 28px;
+ padding: 24px;
+ margin: 0 auto;
+ text-align: center;
+}
+.brand-hero {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ margin: 40px 0;
+ flex-direction: column;
+}
+.brand-logo {
+ width: 140px;
+ height: 140px;
+ object-fit: contain;
+ margin: 0 auto;
+}
+.brand-section {
+ margin: 28px 0;
+}
+.badge-sample {
+ width: 160px;
+ margin: 8px;
+ display: inline-block;
+}
-.back-link { display: inline-block; margin-bottom: 30px; color: var(--accent-color); text-decoration: none; font-weight: 500 }
-.back-link:hover { text-decoration: underline }
+.back-link {
+ display: inline-block;
+ margin-bottom: 30px;
+ color: var(--accent-color);
+ text-decoration: none;
+ font-weight: 500;
+}
+.back-link:hover {
+ text-decoration: underline;
+}
/* center headings and sections */
-.brand-section h3 { text-align:center }
-.brand-section p, .brand-section ul { display:inline-block; text-align:left; max-width:720px }
+.brand-section h3 {
+ text-align: center;
+}
+.brand-section p,
+.brand-section ul {
+ display: inline-block;
+ text-align: left;
+ max-width: 720px;
+}
/* center codebox */
-pre.codebox { max-width: 820px; margin: 12px auto; text-align: left }
+pre.codebox {
+ max-width: 820px;
+ margin: 12px auto;
+ text-align: left;
+}
/* tabs */
-.tab { padding:6px 10px; border-radius:8px; border:1px solid var(--border-color); background:transparent; color:var(--text-color); cursor:pointer; font-weight:600 }
-.tab.active { background: linear-gradient(180deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 82%, black 8%)); color:white; border-color:transparent }
+.tab {
+ padding: 6px 10px;
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ background: transparent;
+ color: var(--text-color);
+ cursor: pointer;
+ font-weight: 700;
+}
+.tab.active {
+ background: linear-gradient(
+ 180deg,
+ var(--accent-color),
+ color-mix(in srgb, var(--accent-color) 82%, black 8%)
+ );
+ color: white;
+ border-color: transparent;
+}
/* codebox */
-pre.codebox { background: var(--card-bg); color: var(--text-color); padding:14px; border-radius:10px; border:1px solid var(--border-color); box-shadow:0 8px 24px rgba(0,0,0,0.06); position:relative; overflow:auto }
-button.copy-btn { position:absolute; right:10px; top:10px; background:transparent; color:var(--text-color); border:1px solid var(--border-color); padding:6px 8px; border-radius:6px }
-pre.codebox, pre.codebox code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; font-size:14px }
+pre.codebox {
+ background: var(--card-bg);
+ color: var(--text-color);
+ padding: 14px;
+ border-radius: 10px;
+ border: 1px solid var(--border-color);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+ position: relative;
+ overflow: auto;
+}
+button.copy-btn {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ background: transparent;
+ color: var(--text-color);
+ border: 1px solid var(--border-color);
+ padding: 6px 8px;
+ border-radius: 6px;
+ font-weight: 700;
+}
+/* keep Tech lighter in the brand wordmark */
+.brand-wordmark .tech-thin {
+ font-weight: 300;
+}
+pre.codebox,
+pre.codebox code {
+ font-family:
+ ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New",
+ monospace;
+ font-size: 14px;
+}
diff --git a/brand.html b/brand.html
index 79ee2be..f60fcc6 100644
--- a/brand.html
+++ b/brand.html
@@ -12,6 +12,12 @@
} catch (e) {}
})();
+
+
+