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 <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:
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user