daveadmin/dobetternorge-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: lightweight header/footer — IBM Plex Sans, slimmed nav badge, compact footer

Browse Source 
Drops Roboto + IBM Plex Mono from Google Fonts, replaces with IBM Plex
Sans (matching dobetternorge.no). Nav badge loses bordered pill, becomes
plain uppercase label with slash separator. Footer cut from 3-column
text-wall (~300 words) to compact 2-column layout (~50 words) — logo +
tagline + privacy note on left, 5 links in 2 columns on right.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
davegilligan
2026-05-18 07:10:46 +02:00
parent f0b7d343a3
commit f2fbb69e0a
4 changed files with 109 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/tools.css
+85 -79
View File
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
:root {
--bg: #f7f8fb;
@@ -4440,7 +4440,7 @@ body {
body.lt-landing {
background: #fff;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ── Sticky nav ─────────────────────────────────────────────────────────── */
@@ -4472,16 +4472,23 @@ body.lt-landing {
display: block;
}
.lt-nav__brand::after {
content: '/';
color: rgba(255,255,255,0.22);
font-size: 1rem;
font-weight: 300;
margin: 0 4px;
line-height: 1;
}
.lt-nav__badge {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.07em;
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244,197,66,0.85);
border: 1px solid rgba(244,197,66,0.28);
border-radius: 6px;
padding: 3px 9px;
color: rgba(244,197,66,0.55);
padding: 0;
}
.lt-nav__right {
@@ -4555,7 +4562,7 @@ body.lt-landing {
}
.lt-hero__kicker {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.12em;
@@ -4618,7 +4625,7 @@ body.lt-landing {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.80rem;
font-weight: 700;
letter-spacing: 0.06em;
@@ -4640,7 +4647,7 @@ body.lt-landing {
margin: 0 auto 3rem;
}
.lt-tools__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.11em;
@@ -4710,7 +4717,7 @@ body.lt-landing {
flex-direction: column;
}
.lt-card__badge {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.09em;
@@ -4738,7 +4745,7 @@ body.lt-landing {
align-items: center;
gap: 5px;
margin-top: 1rem;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
@@ -4817,7 +4824,7 @@ body.lt-landing {
text-align: center;
}
.lt-access__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.11em;
@@ -4924,88 +4931,87 @@ body.lt-landing {
.lt-footer {
background: var(--lt-navy);
border-top: 1px solid rgba(255,255,255,0.07);
padding: clamp(2.5rem, 5vw, 4rem) clamp(16px, 4vw, 60px) 1.5rem;
color: rgba(255,255,255,0.62);
font-family: 'Roboto', -apple-system, sans-serif;
padding: clamp(2rem, 4vw, 3rem) clamp(16px, 4vw, 60px) 1.5rem;
color: rgba(255,255,255,0.55);
font-family: 'IBM Plex Sans', -apple-system, sans-serif;
}
.lt-footer__grid {
max-width: 1280px;
.lt-footer__inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr 0.8fr;
gap: 3rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 1.5rem;
grid-template-columns: 1fr auto;
gap: 4rem;
align-items: start;
padding-bottom: 1.75rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
margin-bottom: 1.25rem;
}
.lt-footer__logo {
height: 32px;
height: 28px;
width: auto;
opacity: 0.85;
opacity: 0.82;
display: block;
margin-bottom: 1.1rem;
margin-bottom: 1rem;
}
.lt-footer__heading {
font-family: 'Crimson Pro', serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.7rem;
.lt-footer__tagline {
font-size: 0.87rem;
line-height: 1.65;
margin: 0 0 0.55rem;
max-width: 42ch;
color: rgba(255,255,255,0.58);
}
.lt-footer__body {
font-size: 0.84rem;
line-height: 1.74;
margin: 0;
}
.lt-footer__body a {
color: rgba(244,197,66,0.75);
text-decoration: none;
}
.lt-footer__body a:hover { color: var(--lt-gold); }
.lt-footer__sub {
.lt-footer__tagline a { color: rgba(244,197,66,0.72); text-decoration: none; }
.lt-footer__tagline a:hover { color: var(--lt-gold); }
.lt-footer__privacy-note {
font-size: 0.78rem;
color: rgba(255,255,255,0.35);
margin: 0.75rem 0 0;
line-height: 1.60;
line-height: 1.6;
color: rgba(255,255,255,0.3);
max-width: 42ch;
margin: 0;
}
.lt-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2.5rem;
align-items: flex-start;
padding-top: 0.2rem;
}
.lt-footer__link-col {
display: flex;
flex-direction: column;
gap: 9px;
gap: 10px;
}
.lt-footer__links a {
color: rgba(255,255,255,0.56);
.lt-footer__link-col a {
color: rgba(255,255,255,0.5);
text-decoration: none;
font-size: 0.87rem;
transition: color 140ms;
font-size: 0.84rem;
transition: color 130ms;
white-space: nowrap;
}
.lt-footer__links a:hover { color: var(--lt-gold); }
.lt-footer__link-col a:hover { color: var(--lt-gold); }
.lt-footer__bottom {
max-width: 1280px;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
gap: 10px;
justify-content: space-between;
align-items: flex-start;
}
.lt-footer__copy {
font-size: 0.80rem;
color: rgba(255,255,255,0.32);
font-size: 0.77rem;
color: rgba(255,255,255,0.26);
margin: 0;
}
.lt-footer__disclaimer {
font-size: 0.76rem;
color: rgba(255,255,255,0.24);
line-height: 1.62;
max-width: 62ch;
font-size: 0.74rem;
color: rgba(255,255,255,0.2);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
@media (max-width: 820px) {
.lt-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
@media (max-width: 620px) {
.lt-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
.lt-footer__links { flex-direction: column; gap: 1.25rem; }
.lt-footer__bottom { flex-direction: column; }
}
@@ -5049,7 +5055,7 @@ body.lt-landing {
}
.lt-preview-back {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.72rem;
color: rgba(255,255,255,0.48);
text-decoration: none;
@@ -5060,7 +5066,7 @@ body.lt-landing {
.lt-preview-back:hover { color: rgba(255,255,255,0.82); }
.lt-preview-badge {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
@@ -5149,7 +5155,7 @@ body.lt-landing {
align-items: start;
}
.lt-preview-sample__label {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
@@ -5190,7 +5196,7 @@ body.lt-landing {
}
.lt-preview-output pre {
margin: 0;
font-family: 'IBM Plex Mono', 'Courier New', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.80rem;
line-height: 1.78;
color: rgba(255,255,255,0.85);
@@ -5219,7 +5225,7 @@ body.lt-landing {
position: relative;
}
.lt-preview-cta__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.70rem;
letter-spacing: 0.1em;
text-transform: uppercase;
@@ -5245,7 +5251,7 @@ body.lt-landing {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Roboto', sans-serif;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
font-size: 1.0rem;
letter-spacing: 0.02em;
@@ -5279,7 +5285,7 @@ body.lt-landing {
padding-top: 2rem;
}
.lt-preview-cta__tools-label {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
@@ -5293,7 +5299,7 @@ body.lt-landing {
gap: 0.5rem 0.75rem;
}
.lt-preview-cta__tool-link {
font-family: 'Roboto', sans-serif;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: rgba(255,255,255,0.48);
@@ -5331,7 +5337,7 @@ body.lt-landing {
gap: 12px;
}
.lt-auth-nav__email {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
max-width: 200px;
@@ -5371,7 +5377,7 @@ body.lt-landing {
flex-shrink: 0;
}
.lt-hero__auth-label {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.75rem;
color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
@@ -5444,7 +5450,7 @@ body.lt-landing {
background: linear-gradient(145deg, #00205b 0%, #001540 100%);
}
.lt-gate__card-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
dashboard.php
+1 -1
View File
@@ -24,7 +24,7 @@ require_once __DIR__ . '/includes/tool-svgs.php';
<meta name="theme-color" content="#00205B">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="assets/css/tools.css">
</head>
<body data-authenticated="true" class="lt-app">
includes/footer.php
+20 -18
View File
@@ -1,35 +1,37 @@
<?php declare(strict_types=1); ?>
<footer class="lt-footer">
<div class="lt-footer__grid">
<div class="lt-footer__inner">
<div>
<div class="lt-footer__brand">
<picture>
<source srcset="assets/images/logo-header.webp" type="image/webp">
<img class="lt-footer__logo" src="assets/images/logo-header.png" alt="Do Better Norge" width="140" height="34" loading="lazy">
</picture>
<h3 class="lt-footer__heading">Zero Storage</h3>
<p class="lt-footer__body">Your documents are processed entirely in memory and discarded the moment your session ends. Nothing is written to disk, cached on our servers, or retained in any database. What you upload stays private&nbsp;&mdash; always.</p>
<p class="lt-footer__tagline">
AI legal tools for families navigating Norwegian child-welfare cases.
Powered by <a href="https://bluenotelogic.com/caveauai" target="_blank" rel="noopener noreferrer">CaveauAI</a>.
</p>
<p class="lt-footer__privacy-note">
Your documents are processed in memory and discarded when your session ends.
Nothing is stored or retained.
</p>
</div>
<div>
<h3 class="lt-footer__heading">Powered by CaveauAI</h3>
<p class="lt-footer__body">These tools run on <a href="https://bluenotelogic.com/caveauai" target="_blank" rel="noopener noreferrer">CaveauAI</a>, Blue Note Logic&rsquo;s private AI infrastructure &mdash; a multi-stage pipeline that ingests your documents, extracts structured legal meaning using large language models, and cross-references findings against a curated corpus of Norwegian case law and tribunal decisions. Your data never leaves our environment and is never shared with third-party AI providers or used for model training.</p>
<p class="lt-footer__sub">Hosted by Blue Note Logic Inc. &middot; Part of the Do Better Norge advocacy group.</p>
<nav class="lt-footer__links" aria-label="Footer links">
<div class="lt-footer__link-col">
<a href="https://dobetternorge.no" target="_blank" rel="noopener noreferrer">Do Better Norge</a>
<a href="https://dobetternorge.no/library.php">Legal library</a>
<a href="mailto:support@dobetternorge.no">Report an issue</a>
</div>
<div>
<h3 class="lt-footer__heading">Resources</h3>
<ul class="lt-footer__links">
<li><a href="https://dobetternorge.no" target="_blank" rel="noopener noreferrer">Do Better Norge</a></li>
<li><a href="https://bluenotelogic.com/caveauai" target="_blank" rel="noopener noreferrer">About CaveauAI</a></li>
<li><a href="https://dobetternorge.no/library.php">Legal library</a></li>
<li><a href="mailto:support@dobetternorge.no">Report an issue</a></li>
</ul>
<div class="lt-footer__link-col">
<a href="https://bluenotelogic.com/caveauai" target="_blank" rel="noopener noreferrer">About CaveauAI</a>
<a href="https://bluenotelogic.com" target="_blank" rel="noopener noreferrer">Blue Note Logic</a>
</div>
</nav>
</div>
<div class="lt-footer__bottom">
<p class="lt-footer__copy">&copy; 2026 Blue Note Logic Inc. All rights reserved.</p>
<p class="lt-footer__disclaimer">AI-generated output is provided for informational and advocacy support purposes only. It does not constitute legal advice and should not be relied upon as a substitute for qualified legal counsel. Always verify results with a licensed lawyer familiar with Norwegian law.</p>
<p class="lt-footer__disclaimer">AI output is for advocacy support only &mdash; not legal advice. Always verify with a licensed Norwegian lawyer.</p>
</div>
</footer>
index.php
+1 -1
View File
@@ -69,7 +69,7 @@ require_once __DIR__ . '/includes/tool-svgs.php';
<meta name="theme-color" content="#00205B">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Roboto:wght@300;400;500;700&family=IBM+Plex+Mono:wght@400;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="assets/css/tools.css">
</head>
<body data-authenticated="<?= $isAuthed ? 'true' : 'false' ?>" class="lt-landing">