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

feat: rebrand landing page to match dobetternorge.no

Browse Source 
- Add sticky navy nav with logo-header.webp, Legal Tools badge, lang switcher, red CTA
- Replace showcase-hero with full-bleed dark hero (Crimson Pro, IBM Plex Mono, stat pills)
- Redesign tool cards: 3-col grid, 178px illustrated SVG art per card (7 unique illustrations)
- Add lt-trust 3-col strip and lt-access navy gate panel
- Rebuild footer with 3-col navy layout matching main site
- Add Crimson Pro / Roboto / IBM Plex Mono Google Fonts via <link> + @import
- CSS: new lt-* variables, all new landing component styles appended to tools.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
davegilligan
2026-05-17 12:33:31 +02:00
parent 8b77acb828
commit 38683cffc0
3 changed files with 711 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/tools.css
+587
View File
@@ -1,3 +1,5 @@
@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');
:root { :root {
--bg: #f7f8fb; --bg: #f7f8fb;
--panel: #ffffff; --panel: #ffffff;
@@ -4424,3 +4426,588 @@ body {
from { opacity: 0; transform: translateX(-50%) translateY(8px); } from { opacity: 0; transform: translateX(-50%) translateY(8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 1; transform: translateX(-50%) translateY(0); }
} }
/* ═══════════════════════════════════════════════════════════════════════════
Landing page rebrand — matches dobetternorge.no
═════════════════════════════════════════════════════════════════════════ */
:root {
--lt-red: #BA0C2F;
--lt-navy: #00205B;
--lt-navy-dark: #001540;
--lt-gold: #f4c542;
}
body.lt-landing {
background: #fff;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ── Sticky nav ─────────────────────────────────────────────────────────── */
.lt-nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
padding: 0 clamp(16px, 3vw, 48px);
background: rgba(0, 32, 91, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.09);
}
.lt-nav__brand {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
}
.lt-nav__logo {
height: 34px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.90;
display: block;
}
.lt-nav__badge {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.07em;
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;
}
.lt-nav__right {
display: flex;
align-items: center;
gap: 14px;
}
.lt-nav .shell-lang-switcher {
background: rgba(255,255,255,0.09);
border-color: rgba(255,255,255,0.16);
}
.lt-nav .shell-lang-switcher a { color: rgba(255,255,255,0.72); }
.lt-nav .shell-lang-switcher a.is-active,
.lt-nav .shell-lang-switcher a:hover {
background: rgba(255,255,255,0.17);
color: #fff;
}
.lt-nav__cta {
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 20px;
border-radius: 50px;
background: var(--lt-red);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
text-decoration: none;
transition: background 140ms, transform 140ms, box-shadow 140ms;
white-space: nowrap;
}
.lt-nav__cta:hover {
background: #9a0a26;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(186,12,47,0.40);
}
/* ── Hero ───────────────────────────────────────────────────────────────── */
.lt-hero {
position: relative;
overflow: hidden;
background: linear-gradient(148deg, var(--lt-navy-dark) 0%, #00205b 58%, #180010 100%);
padding: clamp(4rem, 9vw, 7.5rem) clamp(16px, 4vw, 60px) clamp(3.5rem, 8vw, 6.5rem);
text-align: center;
}
.lt-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 65% at 50% 0%, rgba(186,12,47,0.22), transparent);
pointer-events: none;
}
.lt-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, rgba(244,197,66,0.04) 1px, transparent 1px),
linear-gradient(180deg, rgba(244,197,66,0.03) 1px, transparent 1px);
background-size: 52px 52px;
pointer-events: none;
}
.lt-hero__inner {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.lt-hero__kicker {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--lt-gold);
margin-bottom: 1.2rem;
opacity: 0.88;
}
.lt-hero__title {
font-family: 'Crimson Pro', serif;
font-size: clamp(2.5rem, 5.5vw, 5rem);
font-weight: 700;
line-height: 1.04;
color: #fff;
margin: 0 0 1.25rem;
text-wrap: balance;
}
.lt-hero__body {
font-size: clamp(1rem, 1.6vw, 1.10rem);
line-height: 1.82;
color: rgba(255,255,255,0.74);
margin: 0 auto 2.6rem;
max-width: 60ch;
}
.lt-hero__stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 2.8rem;
}
.lt-hero__stat {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 14px 22px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(4px);
min-width: 116px;
}
.lt-hero__stat strong {
font-family: 'Crimson Pro', serif;
font-size: 2rem;
font-weight: 700;
color: var(--lt-gold);
line-height: 1;
}
.lt-hero__stat span {
font-size: 0.68rem;
font-weight: 700;
color: rgba(255,255,255,0.52);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 5px;
text-align: center;
}
.lt-hero__cta-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.80rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
text-decoration: none;
transition: color 160ms;
}
.lt-hero__cta-link:hover { color: var(--lt-gold); }
/* ── Tool cards ─────────────────────────────────────────────────────────── */
.lt-tools {
padding: clamp(3rem, 6vw, 5.5rem) clamp(16px, 4vw, 60px);
background: #f6f2ea;
}
.lt-tools__header {
text-align: center;
max-width: 700px;
margin: 0 auto 3rem;
}
.lt-tools__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--lt-red);
margin-bottom: 0.7rem;
}
.lt-tools__title {
font-family: 'Crimson Pro', serif;
font-size: clamp(1.9rem, 3.5vw, 2.75rem);
font-weight: 700;
color: var(--lt-navy);
margin: 0 0 0.75rem;
line-height: 1.1;
}
.lt-tools__sub {
color: #5a544d;
font-size: 0.96rem;
line-height: 1.75;
margin: 0;
}
.lt-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.2rem;
max-width: 1280px;
margin: 0 auto;
}
.lt-card {
background: #fff;
border: 1px solid rgba(0,32,91,0.10);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms;
box-shadow: 0 4px 14px rgba(0,32,91,0.06);
}
.lt-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(0,32,91,0.12);
border-color: rgba(186,12,47,0.28);
}
.lt-card__art {
width: 100%;
height: 178px;
display: block;
overflow: hidden;
flex-shrink: 0;
line-height: 0;
}
.lt-card__art svg {
width: 100%;
height: 100%;
display: block;
}
.lt-card__body {
padding: 1.2rem 1.4rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.lt-card__badge {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--lt-red);
margin: 0 0 0.45rem;
}
.lt-card__title {
font-family: 'Crimson Pro', serif;
font-size: 1.48rem;
font-weight: 700;
color: var(--lt-navy);
margin: 0 0 0.45rem;
line-height: 1.1;
}
.lt-card__desc {
font-size: 0.88rem;
line-height: 1.70;
color: #5a544d;
margin: 0;
flex: 1;
}
.lt-card__arrow {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 1rem;
font-family: 'IBM Plex Mono', monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lt-navy);
opacity: 0.38;
transition: opacity 150ms, gap 150ms;
}
.lt-card:hover .lt-card__arrow { opacity: 1; gap: 9px; }
@media (max-width: 900px) {
.lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.lt-grid { grid-template-columns: 1fr; }
.lt-hero__stats { flex-direction: column; align-items: center; }
.lt-nav__badge { display: none; }
}
/* ── Trust strip ────────────────────────────────────────────────────────── */
.lt-trust {
padding: clamp(2.5rem, 5vw, 4rem) clamp(16px, 4vw, 60px);
background: #fffaf3;
border-top: 1px solid rgba(0,32,91,0.07);
border-bottom: 1px solid rgba(0,32,91,0.07);
}
.lt-trust__grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.lt-trust__item {
padding: 1.5rem 1.4rem 1.5rem 1.8rem;
border-left: 4px solid rgba(186,12,47,0.38);
background: rgba(255,255,255,0.65);
border-radius: 0 10px 10px 0;
}
.lt-trust__item h3 {
font-family: 'Crimson Pro', serif;
font-size: 1.28rem;
font-weight: 700;
color: var(--lt-navy);
margin: 0 0 0.55rem;
}
.lt-trust__item p {
font-size: 0.88rem;
line-height: 1.74;
color: #5a544d;
margin: 0;
}
@media (max-width: 760px) {
.lt-trust__grid { grid-template-columns: 1fr; }
}
/* ── Access gate ────────────────────────────────────────────────────────── */
.lt-access {
padding: clamp(3rem, 7vw, 5.5rem) clamp(16px, 4vw, 60px);
background: var(--lt-navy);
position: relative;
overflow: hidden;
}
.lt-access::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(244,197,66,0.06), transparent);
pointer-events: none;
}
.lt-access__inner {
position: relative;
z-index: 1;
max-width: 520px;
margin: 0 auto;
text-align: center;
}
.lt-access__eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 0.70rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--lt-gold);
margin-bottom: 0.8rem;
opacity: 0.85;
}
.lt-access__title {
font-family: 'Crimson Pro', serif;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 700;
color: #fff;
margin: 0 0 0.75rem;
line-height: 1.08;
}
.lt-access__note {
color: rgba(255,255,255,0.60);
font-size: 0.90rem;
line-height: 1.72;
margin: 0 0 1.8rem;
}
.lt-access-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
border-radius: 10px;
background: var(--lt-red);
color: #fff;
font-weight: 700;
font-size: 0.98rem;
letter-spacing: 0.02em;
text-decoration: none;
margin: 0 0 1rem;
transition: background 150ms, transform 150ms, box-shadow 150ms;
box-shadow: 0 6px 24px rgba(186,12,47,0.35);
}
.lt-access-btn:hover {
background: #9a0a26;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(186,12,47,0.50);
}
.lt-access .gate-copy {
color: rgba(255,255,255,0.45);
font-size: 0.84rem;
margin: 0.4rem 0;
}
.lt-access .gate-copy a {
color: rgba(244,197,66,0.78);
text-decoration: underline;
text-decoration-color: rgba(244,197,66,0.30);
}
.lt-access .fallback-login summary {
color: rgba(255,255,255,0.42);
cursor: pointer;
font-size: 0.84rem;
margin-top: 0.6rem;
text-align: center;
list-style: none;
}
.lt-access .passcode-form {
margin-top: 1.1rem;
text-align: left;
}
.lt-access .passcode-form label {
display: block;
color: rgba(255,255,255,0.60);
font-size: 0.84rem;
margin-bottom: 4px;
}
.lt-access .passcode-form input {
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 8px;
background: rgba(255,255,255,0.07);
color: #fff;
font-size: 0.95rem;
margin-bottom: 10px;
outline: none;
transition: border-color 150ms;
}
.lt-access .passcode-form input:focus { border-color: rgba(244,197,66,0.50); }
.lt-access .passcode-row { display: flex; gap: 8px; }
.lt-access .passcode-row input { flex: 1; margin-bottom: 0; }
.lt-access .passcode-row button {
padding: 0 18px;
background: var(--lt-gold);
color: var(--lt-navy);
border: none;
border-radius: 8px;
font-weight: 700;
font-size: 0.90rem;
cursor: pointer;
transition: background 140ms;
}
.lt-access .passcode-row button:hover { background: #e2b230; }
.lt-access .form-status { color: rgba(255,255,255,0.55); font-size: 0.82rem; margin-top: 8px; }
/* ── Footer ─────────────────────────────────────────────────────────────── */
.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;
}
.lt-footer__grid {
max-width: 1280px;
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;
}
.lt-footer__logo {
height: 32px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.78;
display: block;
margin-bottom: 1.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__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 {
font-size: 0.78rem;
color: rgba(255,255,255,0.35);
margin: 0.75rem 0 0;
line-height: 1.60;
}
.lt-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.lt-footer__links a {
color: rgba(255,255,255,0.56);
text-decoration: none;
font-size: 0.87rem;
transition: color 140ms;
}
.lt-footer__links a:hover { color: var(--lt-gold); }
.lt-footer__bottom {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: space-between;
align-items: flex-start;
}
.lt-footer__copy {
font-size: 0.80rem;
color: rgba(255,255,255,0.32);
margin: 0;
}
.lt-footer__disclaimer {
font-size: 0.76rem;
color: rgba(255,255,255,0.24);
line-height: 1.62;
max-width: 62ch;
margin: 0;
}
@media (max-width: 820px) {
.lt-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
.lt-footer__bottom { flex-direction: column; }
}
includes/footer.php
+21 -16
View File
@@ -1,30 +1,35 @@
<?php declare(strict_types=1); ?> <?php declare(strict_types=1); ?>
<footer class="site-footer"> <footer class="lt-footer">
<div class="site-footer__inner"> <div class="lt-footer__grid">
<div class="site-footer__col"> <div>
<h3 class="site-footer__heading">Zero Storage</h3> <picture>
<p class="site-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> <source srcset="https://dobetternorge.no/assets/images/brand/logo-header.webp" type="image/webp">
<img class="lt-footer__logo" src="https://dobetternorge.no/assets/images/brand/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>
</div> </div>
<div class="site-footer__col"> <div>
<h3 class="site-footer__heading">Powered by CaveauAI</h3> <h3 class="lt-footer__heading">Powered by CaveauAI</h3>
<p class="site-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&nbsp;&mdash; a multi-stage processing 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__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="site-footer__sub">Hosted by Blue Note Logic Inc. &middot; Part of the Do Better Norge advocacy group.</p> <p class="lt-footer__sub">Hosted by Blue Note Logic Inc. &middot; Part of the Do Better Norge advocacy group.</p>
</div> </div>
<div class="site-footer__col"> <div>
<h3 class="site-footer__heading">Resources</h3> <h3 class="lt-footer__heading">Resources</h3>
<ul class="site-footer__links"> <ul class="lt-footer__links">
<li><a href="https://bluenotelogic.com/caveauai" target="_blank" rel="noopener noreferrer">About CaveauAI</a></li>
<li><a href="https://dobetternorge.no" target="_blank" rel="noopener noreferrer">Do Better Norge</a></li> <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> <li><a href="mailto:support@dobetternorge.no">Report an issue</a></li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="site-footer__bottom"> <div class="lt-footer__bottom">
<p class="site-footer__copy">&copy; 2026 Blue Note Logic Inc. All rights reserved.</p> <p class="lt-footer__copy">&copy; 2026 Blue Note Logic Inc. All rights reserved.</p>
<p class="site-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-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>
</div> </div>
</footer> </footer>
index.php
+103 -60
View File
@@ -46,6 +46,23 @@ if (isset($_GET['sso']) && !dbnToolsIsAuthenticated()) {
$tools = dbnToolsLaunchedTools($uiLang); $tools = dbnToolsLaunchedTools($uiLang);
$langPath = '/'; $langPath = '/';
$toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode($returnPath); $toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode($returnPath);
// SVG illustrations for each tool card (navy bg, brand palette)
$toolSvgs = [
'transcribe' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><line x1="0" y1="44" x2="480" y2="44" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><line x1="0" y1="89" x2="480" y2="89" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><line x1="0" y1="134" x2="480" y2="134" stroke="rgba(244,197,66,0.05)" stroke-width="1"/><path d="M0,89 C10,89 12,112 20,112 C28,112 30,66 38,66 C46,66 48,132 56,132 C64,132 66,46 74,46 C82,46 84,124 92,124 C100,124 102,72 110,72 C118,72 120,108 128,108 C136,108 138,86 148,89" fill="none" stroke="#f4c542" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M332,89 C342,89 344,70 352,70 C360,70 362,112 370,112 C378,112 380,58 388,58 C396,58 398,120 406,120 C414,120 416,76 424,76 C432,76 434,102 442,102 C450,102 452,84 462,86 C470,87 472,89 480,89" fill="none" stroke="#f4c542" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="217" y="33" width="46" height="68" rx="23" fill="none" stroke="white" stroke-width="2.5" opacity="0.88"/><line x1="226" y1="57" x2="254" y2="57" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><line x1="226" y1="68" x2="254" y2="68" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><line x1="226" y1="79" x2="254" y2="79" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><path d="M203,84 Q203,122 240,122 Q277,122 277,84" fill="none" stroke="white" stroke-width="2.5" opacity="0.84"/><line x1="240" y1="122" x2="240" y2="148" stroke="white" stroke-width="2.5" opacity="0.84"/><line x1="221" y1="148" x2="259" y2="148" stroke="white" stroke-width="2.5" opacity="0.84"/></svg>',
'timeline' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><rect x="400" y="0" width="80" height="178" fill="rgba(186,12,47,0.07)"/><line x1="38" y1="89" x2="445" y2="89" stroke="rgba(244,197,66,0.42)" stroke-width="2"/><circle cx="38" cy="89" r="4" fill="rgba(244,197,66,0.38)"/><polyline points="439,82 449,89 439,96" fill="none" stroke="rgba(244,197,66,0.42)" stroke-width="2" stroke-linejoin="round"/><line x1="94" y1="89" x2="94" y2="58" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="94" cy="89" r="7" fill="#f4c542"/><text x="94" y="48" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.58)">JAN</text><line x1="175" y1="89" x2="175" y2="120" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="175" cy="89" r="6" fill="rgba(255,255,255,0.76)"/><text x="175" y="138" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.55)">MAR</text><line x1="256" y1="89" x2="256" y2="50" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="256" cy="89" r="11" fill="#ba0c2f" opacity="0.92"/><circle cx="256" cy="89" r="5" fill="white" opacity="0.94"/><text x="256" y="40" text-anchor="middle" font-family="monospace" font-size="10" fill="#f4c542">HEARING</text><line x1="336" y1="89" x2="336" y2="120" stroke="rgba(255,255,255,0.28)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="336" cy="89" r="6" fill="rgba(255,255,255,0.76)"/><text x="336" y="138" text-anchor="middle" font-family="monospace" font-size="11" fill="rgba(255,255,255,0.55)">AUG</text><line x1="406" y1="89" x2="406" y2="58" stroke="rgba(255,255,255,0.18)" stroke-width="1" stroke-dasharray="4,3"/><circle cx="406" cy="89" r="8" fill="none" stroke="rgba(244,197,66,0.46)" stroke-width="2" stroke-dasharray="4,2"/><text x="406" y="48" text-anchor="middle" font-family="monospace" font-size="10" fill="rgba(255,255,255,0.32)">PENDING</text></svg>',
'redact' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g opacity="0.09" stroke="white" stroke-width="1"><line x1="44" y1="38" x2="138" y2="38"/><line x1="44" y1="52" x2="112" y2="52"/><line x1="44" y1="66" x2="124" y2="66"/><line x1="44" y1="80" x2="100" y2="80"/><line x1="44" y1="110" x2="130" y2="110"/><line x1="44" y1="124" x2="106" y2="124"/></g><rect x="155" y="21" width="176" height="140" rx="4" fill="rgba(0,0,0,0.18)"/><rect x="152" y="18" width="176" height="140" rx="4" fill="#fff" opacity="0.97"/><path d="M296,18 L328,18 L296,50 Z" fill="rgba(0,32,91,0.09)"/><line x1="296" y1="18" x2="296" y2="50" stroke="rgba(0,32,91,0.14)" stroke-width="1"/><line x1="296" y1="50" x2="328" y2="50" stroke="rgba(0,32,91,0.14)" stroke-width="1"/><line x1="168" y1="38" x2="286" y2="38" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="50" x2="264" y2="50" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="168" y="62" width="136" height="12" rx="2" fill="#111"/><rect x="168" y="82" width="82" height="12" rx="2" fill="#111"/><line x1="257" y1="88" x2="294" y2="88" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="104" x2="290" y2="104" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="168" y="116" width="114" height="12" rx="2" fill="#111"/><line x1="289" y1="122" x2="302" y2="122" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="138" x2="280" y2="138" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="168" y1="150" x2="244" y2="150" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><rect x="338" y="120" width="42" height="11" rx="4" fill="#ba0c2f" transform="rotate(-40 359 125)"/><rect x="338" y="120" width="9" height="11" rx="3" fill="rgba(244,197,66,0.28)" transform="rotate(-40 359 125)"/><polygon points="318,147 326,139 330,143 322,151" fill="#ba0c2f"/></svg>',
'barnevernet' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><rect x="0" y="0" width="480" height="8" fill="rgba(186,12,47,0.22)"/><rect x="0" y="170" width="480" height="8" fill="rgba(186,12,47,0.22)"/><rect x="147" y="22" width="196" height="142" rx="4" fill="rgba(0,0,0,0.18)"/><rect x="144" y="19" width="196" height="142" rx="4" fill="#fff" opacity="0.97"/><rect x="144" y="19" width="196" height="28" rx="4" fill="#00205b"/><rect x="144" y="38" width="196" height="9" fill="#00205b"/><line x1="160" y1="31" x2="224" y2="31" stroke="rgba(255,255,255,0.60)" stroke-width="2"/><line x1="160" y1="39" x2="202" y2="39" stroke="rgba(255,255,255,0.28)" stroke-width="1.5"/><line x1="160" y1="61" x2="318" y2="61" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="73" x2="296" y2="73" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="85" x2="306" y2="85" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="97" x2="278" y2="97" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="112" x2="318" y2="112" stroke="rgba(0,32,91,0.11)" stroke-width="1"/><line x1="160" y1="122" x2="298" y2="122" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><line x1="160" y1="134" x2="284" y2="134" stroke="rgba(0,0,0,0.09)" stroke-width="1.5"/><circle cx="298" cy="138" r="26" fill="none" stroke="rgba(186,12,47,0.68)" stroke-width="2.5"/><circle cx="298" cy="138" r="20" fill="none" stroke="rgba(186,12,47,0.35)" stroke-width="1"/><line x1="286" y1="138" x2="310" y2="138" stroke="rgba(186,12,47,0.65)" stroke-width="3"/><line x1="298" y1="126" x2="298" y2="150" stroke="rgba(186,12,47,0.65)" stroke-width="3"/><circle cx="274" cy="118" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="282" cy="112" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="291" cy="110" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="300" cy="110" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="309" cy="112" r="1.4" fill="rgba(186,12,47,0.50)"/><circle cx="318" cy="118" r="1.4" fill="rgba(186,12,47,0.50)"/></svg>',
'advocate' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><radialGradient id="adv_g" cx="50%" cy="40%" r="55%"><stop offset="0%" stop-color="rgba(244,197,66,0.11)"/><stop offset="100%" stop-color="transparent"/></radialGradient></defs><rect width="480" height="178" fill="#00205b"/><rect width="480" height="178" fill="url(#adv_g)"/><line x1="240" y1="22" x2="240" y2="158" stroke="rgba(255,255,255,0.84)" stroke-width="3" stroke-linecap="round"/><line x1="126" y1="68" x2="354" y2="68" stroke="rgba(255,255,255,0.84)" stroke-width="3" stroke-linecap="round"/><circle cx="240" cy="68" r="6" fill="#f4c542"/><circle cx="240" cy="22" r="5" fill="#f4c542"/><path d="M214,158 L266,158 L240,128 Z" fill="rgba(255,255,255,0.82)"/><line x1="126" y1="68" x2="126" y2="118" stroke="rgba(255,255,255,0.60)" stroke-width="1.8"/><line x1="354" y1="68" x2="354" y2="106" stroke="rgba(255,255,255,0.60)" stroke-width="1.8"/><path d="M100,118 Q126,132 152,118" fill="none" stroke="rgba(255,255,255,0.80)" stroke-width="2.5" stroke-linecap="round"/><line x1="100" y1="118" x2="152" y2="118" stroke="rgba(255,255,255,0.24)" stroke-width="1"/><path d="M328,106 Q354,120 380,106" fill="none" stroke="rgba(255,255,255,0.80)" stroke-width="2.5" stroke-linecap="round"/><line x1="328" y1="106" x2="380" y2="106" stroke="rgba(255,255,255,0.24)" stroke-width="1"/><circle cx="118" cy="116" r="7" fill="rgba(244,197,66,0.58)"/><circle cx="134" cy="117" r="7" fill="rgba(244,197,66,0.38)"/><rect x="346" y="100" width="17" height="11" rx="2" fill="rgba(255,255,255,0.38)"/><rect x="366" y="99" width="11" height="12" rx="2" fill="rgba(255,255,255,0.24)"/></svg>',
'deep-research' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g stroke="rgba(244,197,66,0.24)" stroke-width="1.5" fill="none"><line x1="88" y1="48" x2="178" y2="88"/><line x1="88" y1="48" x2="88" y2="138"/><line x1="88" y1="138" x2="178" y2="88"/><line x1="178" y1="88" x2="268" y2="48"/><line x1="178" y1="88" x2="268" y2="138"/><line x1="268" y1="48" x2="268" y2="138"/><line x1="268" y1="48" x2="358" y2="68"/><line x1="268" y1="138" x2="358" y2="128"/></g><circle cx="88" cy="48" r="10" fill="rgba(244,197,66,0.68)"/><circle cx="88" cy="138" r="8" fill="rgba(255,255,255,0.46)"/><circle cx="178" cy="88" r="13" fill="#f4c542"/><circle cx="268" cy="48" r="9" fill="rgba(255,255,255,0.46)"/><circle cx="268" cy="138" r="8" fill="rgba(244,197,66,0.56)"/><circle cx="358" cy="68" r="9" fill="rgba(255,255,255,0.38)"/><circle cx="358" cy="128" r="8" fill="rgba(244,197,66,0.46)"/><circle cx="358" cy="88" r="44" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="3"/><line x1="392" y1="122" x2="424" y2="154" stroke="rgba(255,255,255,0.55)" stroke-width="4" stroke-linecap="round"/><circle cx="350" cy="80" r="6" fill="rgba(244,197,66,0.88)"/><circle cx="370" cy="96" r="5" fill="rgba(255,255,255,0.78)"/><line x1="350" y1="80" x2="370" y2="96" stroke="rgba(244,197,66,0.46)" stroke-width="1.5"/></svg>',
'corpus' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 178" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><rect width="480" height="178" fill="#00205b"/><g stroke="rgba(244,197,66,0.28)" stroke-width="1.5" fill="none"><line x1="286" y1="54" x2="376" y2="36"/><line x1="286" y1="89" x2="390" y2="89"/><line x1="286" y1="124" x2="376" y2="143"/></g><circle cx="382" cy="36" r="16" fill="rgba(244,197,66,0.15)" stroke="rgba(244,197,66,0.38)" stroke-width="1.5"/><circle cx="396" cy="89" r="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.22)" stroke-width="1.5"/><circle cx="382" cy="143" r="16" fill="rgba(186,12,47,0.14)" stroke="rgba(186,12,47,0.34)" stroke-width="1.5"/><text x="382" y="40" text-anchor="middle" font-family="monospace" font-size="8" fill="rgba(244,197,66,0.72)">ECHR</text><text x="396" y="93" text-anchor="middle" font-family="monospace" font-size="7" fill="rgba(255,255,255,0.52)">LOV</text><text x="382" y="147" text-anchor="middle" font-family="monospace" font-size="7" fill="rgba(255,200,200,0.52)">BVJ</text><ellipse cx="196" cy="40" rx="78" ry="13" fill="rgba(0,18,56,0.94)" stroke="rgba(244,197,66,0.68)" stroke-width="1.5"/><rect x="118" y="40" width="156" height="26" fill="rgba(0,14,46,0.96)"/><ellipse cx="196" cy="66" rx="78" ry="13" fill="rgba(0,12,40,0.96)" stroke="rgba(244,197,66,0.48)" stroke-width="1.5"/><text x="196" y="58" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(244,197,66,0.62)">220K PASSAGES</text><ellipse cx="196" cy="78" rx="78" ry="13" fill="rgba(0,28,76,0.94)" stroke="rgba(255,255,255,0.36)" stroke-width="1.5"/><rect x="118" y="78" width="156" height="26" fill="rgba(0,12,46,0.96)"/><ellipse cx="196" cy="104" rx="78" ry="13" fill="rgba(0,10,38,0.96)" stroke="rgba(255,255,255,0.26)" stroke-width="1.5"/><text x="196" y="96" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(255,255,255,0.46)">QDRANT + AZURE</text><ellipse cx="196" cy="116" rx="78" ry="13" fill="rgba(186,12,47,0.18)" stroke="rgba(186,12,47,0.48)" stroke-width="1.5"/><rect x="118" y="116" width="156" height="20" fill="rgba(100,4,18,0.14)"/><ellipse cx="196" cy="136" rx="78" ry="13" fill="rgba(80,3,14,0.20)" stroke="rgba(186,12,47,0.32)" stroke-width="1.5"/><text x="196" y="130" text-anchor="middle" font-family="monospace" font-size="9" fill="rgba(255,170,170,0.48)">NOMIC EMBED</text></svg>',
];
?> ?>
<!doctype html> <!doctype html>
<html lang="<?= htmlspecialchars($uiLang) ?>"> <html lang="<?= htmlspecialchars($uiLang) ?>">
@@ -60,10 +77,13 @@ $toolsLogin = 'https://dobetternorge.no/tools-login.php?return=' . urlencode($re
<meta property="og:description" content="<?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?>"> <meta property="og:description" content="<?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?>">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://tools.dobetternorge.no/"> <meta property="og:url" content="https://tools.dobetternorge.no/">
<meta name="theme-color" content="#f6f2ea"> <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="assets/css/tools.css"> <link rel="stylesheet" href="assets/css/tools.css">
</head> </head>
<body data-authenticated="<?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>"> <body data-authenticated="<?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>" class="<?= dbnToolsIsAuthenticated() ? 'lt-app' : 'lt-landing' ?>">
<script> <script>
window.DBN_TOOLS_AUTHENTICATED = <?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>; window.DBN_TOOLS_AUTHENTICATED = <?= dbnToolsIsAuthenticated() ? 'true' : 'false' ?>;
window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>; window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
@@ -122,78 +142,100 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
</section> </section>
</main> </main>
<?php else: ?> <?php else: ?>
<main id="publicLanding" class="showcase-page dbn-public-tools"> <main id="publicLanding" class="dbn-public-tools">
<header class="showcase-header">
<div class="showcase-header-inner"> <header class="lt-nav">
<div class="showcase-brand"> <a href="https://dobetternorge.no" class="lt-nav__brand">
<p class="eyebrow"><?= htmlspecialchars(dbnToolsT('landing_kicker', $uiLang)) ?></p> <picture>
<h1 class="showcase-title"><?= htmlspecialchars(dbnToolsT('landing_title', $uiLang)) ?></h1> <source srcset="https://dobetternorge.no/assets/images/brand/logo-header.webp" type="image/webp">
<p class="showcase-tagline"><?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?></p> <img class="lt-nav__logo" src="https://dobetternorge.no/assets/images/brand/logo-header.png" alt="Do Better Norge" width="140" height="36" loading="eager">
</div> </picture>
<div class="showcase-header-actions"> <span class="lt-nav__badge">Legal Tools</span>
<nav class="shell-lang-switcher" aria-label="Language"> </a>
<div class="lt-nav__right">
<nav class="shell-lang-switcher" aria-label="Language">
<?php foreach (dbnToolsSupportedLanguages() as $langCode): ?> <?php foreach (dbnToolsSupportedLanguages() as $langCode): ?>
<a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode . '&return=' . urlencode($returnPath)) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a> <a href="<?= htmlspecialchars($langPath . '?lang=' . $langCode . '&return=' . urlencode($returnPath)) ?>" class="<?= $langCode === $uiLang ? 'is-active' : '' ?>"><?= htmlspecialchars(dbnToolsLanguageLabel($langCode)) ?></a>
<?php endforeach; ?> <?php endforeach; ?>
</nav> </nav>
<a href="#access" class="cta-button"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a> <a href="#access" class="lt-nav__cta"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
</div>
</div> </div>
</header> </header>
<section class="landing-hero"> <section class="lt-hero">
<div class="landing-hero__copy"> <div class="lt-hero__inner">
<p class="manifesto-eyebrow"><?= htmlspecialchars(dbnToolsT('manifesto_eyebrow', $uiLang)) ?></p> <p class="lt-hero__kicker">AI Legal Tools &middot; Norway &middot; Free for members</p>
<h2><?= htmlspecialchars(dbnToolsT('manifesto_title', $uiLang)) ?></h2> <h1 class="lt-hero__title"><?= htmlspecialchars(dbnToolsT('landing_title', $uiLang)) ?></h1>
<p><?= htmlspecialchars(dbnToolsT('manifesto_sub', $uiLang)) ?></p> <p class="lt-hero__body"><?= htmlspecialchars(dbnToolsT('landing_sub', $uiLang)) ?></p>
</div> <div class="lt-hero__stats">
<div class="landing-hero__stats"> <div class="lt-hero__stat">
<div><strong>23</strong><span><?= htmlspecialchars(dbnToolsT('stat_echr', $uiLang)) ?></span></div> <strong>23</strong>
<div><strong>1,731</strong><span><?= htmlspecialchars(dbnToolsT('stat_tribunal', $uiLang)) ?></span></div> <span><?= htmlspecialchars(dbnToolsT('stat_echr', $uiLang)) ?></span>
<div><strong>20+</strong><span><?= htmlspecialchars(dbnToolsT('stat_pending', $uiLang)) ?></span></div> </div>
<div class="lt-hero__stat">
<strong>1,731</strong>
<span><?= htmlspecialchars(dbnToolsT('stat_tribunal', $uiLang)) ?></span>
</div>
<div class="lt-hero__stat">
<strong>20+</strong>
<span><?= htmlspecialchars(dbnToolsT('stat_pending', $uiLang)) ?></span>
</div>
<div class="lt-hero__stat">
<strong>220K</strong>
<span>Legal passages indexed</span>
</div>
</div>
<a href="#tools" class="lt-hero__cta-link">Explore tools &#x2193;</a>
</div> </div>
</section> </section>
<section class="cap-section"> <section class="lt-tools" id="tools">
<div class="section-inner"> <div class="lt-tools__header">
<p class="eyebrow"><?= htmlspecialchars(dbnToolsT('tools_title', $uiLang)) ?></p> <p class="lt-tools__eyebrow"><?= htmlspecialchars(dbnToolsT('tools_title', $uiLang)) ?></p>
<div class="cap-grid cap-grid--six"> <h2 class="lt-tools__title">Built for families navigating a complex system.</h2>
<?php foreach ($tools as $item): ?> <p class="lt-tools__sub">Seven purpose-built AI tools &mdash; from audio transcription to deep legal research. Every tool processes your documents in memory and discards them when you&rsquo;re done.</p>
<article class="cap-card"> </div>
<span class="cap-label"><?= htmlspecialchars($item['badge']) ?></span> <div class="lt-grid">
<h3><?= htmlspecialchars($item['label']) ?></h3> <?php foreach ($tools as $slug => $item): ?>
<p><?= htmlspecialchars($item['description']) ?></p> <a class="lt-card" href="#access" data-tool="<?= htmlspecialchars($slug) ?>">
</article> <div class="lt-card__art" aria-hidden="true">
<?= $toolSvgs[$slug] ?? '' ?>
</div>
<div class="lt-card__body">
<p class="lt-card__badge"><?= htmlspecialchars($item['badge']) ?></p>
<h3 class="lt-card__title"><?= htmlspecialchars($item['label']) ?></h3>
<p class="lt-card__desc"><?= htmlspecialchars($item['description']) ?></p>
<span class="lt-card__arrow">Get access &#x2192;</span>
</div>
</a>
<?php endforeach; ?> <?php endforeach; ?>
</div>
</section>
<section class="lt-trust">
<div class="lt-trust__grid">
<div class="lt-trust__item">
<h3><?= htmlspecialchars(dbnToolsT('cause_title', $uiLang)) ?></h3>
<p><?= htmlspecialchars(dbnToolsT('cause_text', $uiLang)) ?></p>
</div>
<div class="lt-trust__item">
<h3><?= htmlspecialchars(dbnToolsT('privacy_title', $uiLang)) ?></h3>
<p><?= htmlspecialchars(dbnToolsT('privacy_text', $uiLang)) ?></p>
</div>
<div class="lt-trust__item">
<h3><?= htmlspecialchars(dbnToolsT('source_title', $uiLang)) ?></h3>
<p><?= htmlspecialchars(dbnToolsT('source_text', $uiLang)) ?></p>
</div> </div>
</div> </div>
</section> </section>
<section class="evidence-section"> <section id="access" class="lt-access" aria-labelledby="ltAccessTitle">
<div class="section-inner evidence-inner"> <div class="lt-access__inner">
<article> <p class="lt-access__eyebrow">Do Better Norge</p>
<h2><?= htmlspecialchars(dbnToolsT('cause_title', $uiLang)) ?></h2> <h2 class="lt-access__title" id="ltAccessTitle"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></h2>
<p><?= htmlspecialchars(dbnToolsT('cause_text', $uiLang)) ?></p> <p class="lt-access__note"><?= htmlspecialchars(dbnToolsT('member_note', $uiLang)) ?></p>
</article> <a class="lt-access-btn" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
<article>
<h2><?= htmlspecialchars(dbnToolsT('privacy_title', $uiLang)) ?></h2>
<p><?= htmlspecialchars(dbnToolsT('privacy_text', $uiLang)) ?></p>
</article>
<article>
<h2><?= htmlspecialchars(dbnToolsT('source_title', $uiLang)) ?></h2>
<p><?= htmlspecialchars(dbnToolsT('source_text', $uiLang)) ?></p>
</article>
</div>
</section>
<section id="access" class="access-section" aria-labelledby="accessTitle">
<div class="gate-panel">
<p class="eyebrow">Do Better Norge</p>
<h2 id="accessTitle"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></h2>
<p class="gate-copy"><?= htmlspecialchars(dbnToolsT('member_note', $uiLang)) ?></p>
<a class="google-access-button" href="<?= htmlspecialchars($toolsLogin) ?>"><?= htmlspecialchars(dbnToolsT('primary_access', $uiLang)) ?></a>
<p class="gate-copy"><a href="https://dobetternorge.no/register.php"><?= htmlspecialchars(dbnToolsT('register', $uiLang)) ?></a></p> <p class="gate-copy"><a href="https://dobetternorge.no/register.php"><?= htmlspecialchars(dbnToolsT('register', $uiLang)) ?></a></p>
<details class="fallback-login"> <details class="fallback-login">
<summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary> <summary><?= htmlspecialchars(dbnToolsT('secondary_access', $uiLang)) ?></summary>
<form id="passcodeForm" class="passcode-form"> <form id="passcodeForm" class="passcode-form">
@@ -209,6 +251,7 @@ window.DBN_TOOLS_LANG = <?= json_encode($uiLang, JSON_UNESCAPED_UNICODE) ?>;
</details> </details>
</div> </div>
</section> </section>
</main> </main>
<?php endif; ?> <?php endif; ?>
<?php require_once __DIR__ . '/includes/footer.php'; ?> <?php require_once __DIR__ . '/includes/footer.php'; ?>