From 38683cffc064f52866c963f2ff7db248247f02da Mon Sep 17 00:00:00 2001 From: davegilligan Date: Sun, 17 May 2026 12:33:31 +0200 Subject: [PATCH] feat: rebrand landing page to match dobetternorge.no - 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 + @import - CSS: new lt-* variables, all new landing component styles appended to tools.css Co-Authored-By: Claude Sonnet 4.6 --- assets/css/tools.css | 587 +++++++++++++++++++++++++++++++++++++++++++ includes/footer.php | 37 +-- index.php | 163 +++++++----- 3 files changed, 711 insertions(+), 76 deletions(-) diff --git a/assets/css/tools.css b/assets/css/tools.css index 547787f..584ced0 100644 --- a/assets/css/tools.css +++ b/assets/css/tools.css @@ -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 { --bg: #f7f8fb; --panel: #ffffff; @@ -4424,3 +4426,588 @@ body { from { opacity: 0; transform: translateX(-50%) translateY(8px); } 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; } +} diff --git a/includes/footer.php b/includes/footer.php index f75a4e3..5851252 100644 --- a/includes/footer.php +++ b/includes/footer.php @@ -1,30 +1,35 @@ -