feat(website): add Nuxt 4 marketing landing page
New standalone apps/website (Nuxt 4) serving the public marketing site at dezky.local / www.dezky.local. The customer portal moves off the root domain to app.dezky.local only. Landing page ported from the Dezky design handoff: light theme, Danish default, hero variant A, with a working da/en toggle. Self-contained colour system threaded through components (utils/landingTokens.ts), full bilingual copy (utils/landingCopy.ts), and shared state (composables/useLanding.ts). Sections live under components/landing/* with the Node logo under components/brand/*. Wired into docker-compose (website service, volume, Traefik labels, network aliases) and bootstrap.sh (hosts list + service URLs).
This commit is contained in:
Ronni Baslund
@@ -0,0 +1,84 @@
|
||||
/* Dezky marketing site — global styles. Ported from the design handoff's
|
||||
<style> block in Landing Page.html. The landing page is self-contained on
|
||||
colour (it threads a theme object through components), so the base just sets
|
||||
the page surface, resets, and the FAQ accordion marker animation. */
|
||||
|
||||
html,
|
||||
body,
|
||||
#__nuxt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
background: #FAFAF7;
|
||||
color: #0A0A0A;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
summary::marker {
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* FAQ accordion plus → rotates to an "open" state. Consumed by Faq.vue's
|
||||
.faq-plus span. */
|
||||
details[open] .faq-plus::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.faq-plus::before,
|
||||
.faq-plus::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: currentColor;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.faq-plus::before {
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
left: 6px;
|
||||
top: 0;
|
||||
}
|
||||
.faq-plus::after {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(128, 128, 128, 0.25);
|
||||
border-radius: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/* Dezky design tokens — shared brand palette (carbon dark by default).
|
||||
Identical variable set to apps/portal and apps/operator so the marketing
|
||||
site, the customer portal, and the operator console all speak the same
|
||||
design language. A Claude design handoff for the landing page should build
|
||||
on these tokens rather than introducing parallel hex values. */
|
||||
|
||||
:root {
|
||||
--bg: #0A0A0A;
|
||||
--surface: #141413;
|
||||
--elevated: #1C1C1A;
|
||||
--border: #262622;
|
||||
--border-hi: #33332E;
|
||||
|
||||
--text: #F4F3EE;
|
||||
--text-dim: rgba(244, 243, 238, 0.72);
|
||||
--text-mute: rgba(244, 243, 238, 0.45);
|
||||
|
||||
--side-bg: #0A0A0A;
|
||||
--side-surf: #141413;
|
||||
--side-border: #1F1F1C;
|
||||
--side-text: #F4F3EE;
|
||||
--side-dim: rgba(244, 243, 238, 0.55);
|
||||
--side-mute: rgba(244, 243, 238, 0.35);
|
||||
--side-hover: rgba(244, 243, 238, 0.06);
|
||||
--side-active: rgba(244, 243, 238, 0.1);
|
||||
|
||||
--accent: #D4FF3A;
|
||||
--accent-fg: #0A0A0A;
|
||||
--signal: #D4FF3A;
|
||||
|
||||
--ok: #34C77B;
|
||||
--warn: #F0B14A;
|
||||
--bad: #F05858;
|
||||
--info: #4D8BE8;
|
||||
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-display: 'Inter Tight', 'Inter', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, 'Menlo', monospace;
|
||||
|
||||
--input-bg: rgba(244, 243, 238, 0.04);
|
||||
|
||||
/* Cosmetic density. comfy=1, compact≈0.78. */
|
||||
--density-scale: 1;
|
||||
}
|
||||
|
||||
/* Tweaks: density overrides */
|
||||
:root[data-density='compact'] { --density-scale: 0.78; }
|
||||
|
||||
/* Tweaks: light theme (warm cream, charcoal text). Overrides every surface
|
||||
token so any component that uses var(--bg / --surface / --text / ...) flips
|
||||
without code changes. */
|
||||
:root[data-theme='light'] {
|
||||
--bg: #F6F4EF;
|
||||
--surface: #FAF8F2;
|
||||
--elevated: #FFFFFF;
|
||||
--border: #E2DED2;
|
||||
--border-hi: #D0CBBC;
|
||||
|
||||
--text: #1C1B17;
|
||||
--text-dim: rgba(28, 27, 23, 0.72);
|
||||
--text-mute: rgba(28, 27, 23, 0.50);
|
||||
|
||||
--side-bg: #F0EDE4;
|
||||
--side-surf: #FAF8F2;
|
||||
--side-border: #E2DED2;
|
||||
--side-text: #1C1B17;
|
||||
--side-dim: rgba(28, 27, 23, 0.62);
|
||||
--side-mute: rgba(28, 27, 23, 0.42);
|
||||
--side-hover: rgba(28, 27, 23, 0.05);
|
||||
--side-active: rgba(28, 27, 23, 0.08);
|
||||
|
||||
--accent: #1F8A5B;
|
||||
--accent-fg: #FAF8F2;
|
||||
--signal: #1F8A5B;
|
||||
|
||||
--ok: #1F8A5B;
|
||||
--warn: #C97F1F;
|
||||
--bad: #C03A3A;
|
||||
--info: #2A6FDB;
|
||||
|
||||
--input-bg: rgba(28, 27, 23, 0.04);
|
||||
}
|
||||
Reference in New Issue
Block a user