Initial StaySense landing page
This commit is contained in:
commit
289b808771
15 changed files with 844 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.DS_Store
|
||||||
24
README.md
Normal file
24
README.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# StaySense Landingpage (Starter)
|
||||||
|
|
||||||
|
Enthält eine **fertige, responsive Landingpage** als Vanilla **HTML + CSS** inkl. SVG-Illustrationen.
|
||||||
|
|
||||||
|
## Inhalt
|
||||||
|
- `index.html` – komplette Landingpage inkl. Text
|
||||||
|
- `styles.css` – Styling (Dark-Theme, responsive)
|
||||||
|
- `script.js` – mobile Navigation und Interaktionen
|
||||||
|
- `assets/` – erstellte SVG-Bilder/Icons
|
||||||
|
|
||||||
|
## Lokales Preview
|
||||||
|
1. Ordner öffnen
|
||||||
|
2. `index.html` im Browser öffnen
|
||||||
|
(oder via Live Server/Preview in VS Code)
|
||||||
|
|
||||||
|
## Anpassen
|
||||||
|
- Links / CTA: in `index.html` nach `staysense.vanityontour.de` suchen
|
||||||
|
- Branding/Farben: in `styles.css` die `:root` Variablen anpassen
|
||||||
|
- Text/Sections: direkt in `index.html`
|
||||||
|
|
||||||
|
## Live
|
||||||
|
- Veröffentlicht unter: `https://landing.staysense.vanityontour.de/`
|
||||||
|
|
||||||
|
Viel Spaß beim Live-Schalten 🚐
|
||||||
67
assets/hero-van.svg
Normal file
67
assets/hero-van.svg
Normal file
|
|
@ -0,0 +1,67 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" role="img" aria-label="Illustration: Campervan und Standort-Analyse">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="glow" cx="30%" cy="25%" r="70%">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.35"/>
|
||||||
|
<stop offset="1" stop-color="#0b1220" stop-opacity="0"/>
|
||||||
|
</radialGradient>
|
||||||
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#000" flood-opacity="0.45"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect width="1200" height="800" rx="28" fill="#0f1a2f"/>
|
||||||
|
<rect width="1200" height="800" rx="28" fill="url(#glow)"/>
|
||||||
|
|
||||||
|
<!-- Road -->
|
||||||
|
<path d="M0 640 C 240 600, 420 740, 680 700 C 900 666, 1000 610, 1200 640 L1200 800 L0 800 Z"
|
||||||
|
fill="#0b1220" opacity="0.85"/>
|
||||||
|
<path d="M0 665 C 260 635, 430 760, 700 730 C 920 707, 1020 650, 1200 675"
|
||||||
|
fill="none" stroke="#ffffff" stroke-opacity="0.12" stroke-width="6"/>
|
||||||
|
|
||||||
|
<!-- Location pin -->
|
||||||
|
<g transform="translate(840 210)" filter="url(#shadow)">
|
||||||
|
<path d="M120 20c-55 0-100 44-100 98 0 77 100 186 100 186s100-109 100-186c0-54-45-98-100-98z"
|
||||||
|
fill="url(#g1)" />
|
||||||
|
<circle cx="120" cy="118" r="44" fill="#071022" opacity="0.88"/>
|
||||||
|
<circle cx="120" cy="118" r="22" fill="#eaf0ff" opacity="0.95"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Camper -->
|
||||||
|
<g transform="translate(170 430)" filter="url(#shadow)">
|
||||||
|
<rect x="0" y="70" rx="26" ry="26" width="620" height="220" fill="#101f3a" stroke="#ffffff" stroke-opacity="0.12" stroke-width="3"/>
|
||||||
|
<path d="M40 70h300c40 0 70-30 90-55 30-38 70-55 120-55h30c25 0 45 20 45 45v65H40z"
|
||||||
|
fill="#12264a" stroke="#ffffff" stroke-opacity="0.12" stroke-width="3"/>
|
||||||
|
<rect x="80" y="110" width="170" height="90" rx="16" fill="#0b1220" stroke="#5eead4" stroke-opacity="0.35" stroke-width="3"/>
|
||||||
|
<rect x="270" y="110" width="160" height="90" rx="16" fill="#0b1220" stroke="#7c5cff" stroke-opacity="0.35" stroke-width="3"/>
|
||||||
|
<rect x="460" y="115" width="120" height="150" rx="18" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14" stroke-width="3"/>
|
||||||
|
<circle cx="150" cy="300" r="54" fill="#071022" stroke="#ffffff" stroke-opacity="0.14" stroke-width="10"/>
|
||||||
|
<circle cx="150" cy="300" r="22" fill="#eaf0ff" opacity="0.9"/>
|
||||||
|
<circle cx="490" cy="300" r="54" fill="#071022" stroke="#ffffff" stroke-opacity="0.14" stroke-width="10"/>
|
||||||
|
<circle cx="490" cy="300" r="22" fill="#eaf0ff" opacity="0.9"/>
|
||||||
|
|
||||||
|
<!-- Headlights -->
|
||||||
|
<rect x="600" y="210" width="18" height="30" rx="6" fill="#5eead4" opacity="0.6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Small UI chips -->
|
||||||
|
<g transform="translate(120 120)">
|
||||||
|
<rect x="0" y="0" width="380" height="70" rx="18" fill="#0b1220" opacity="0.75" stroke="#ffffff" stroke-opacity="0.12"/>
|
||||||
|
<circle cx="40" cy="35" r="14" fill="#5eead4" opacity="0.85"/>
|
||||||
|
<rect x="70" y="24" width="260" height="10" rx="5" fill="#eaf0ff" opacity="0.75"/>
|
||||||
|
<rect x="70" y="42" width="210" height="10" rx="5" fill="#eaf0ff" opacity="0.45"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(120 210)">
|
||||||
|
<rect x="0" y="0" width="420" height="80" rx="18" fill="#0b1220" opacity="0.70" stroke="#ffffff" stroke-opacity="0.12"/>
|
||||||
|
<rect x="26" y="22" width="160" height="14" rx="7" fill="#7c5cff" opacity="0.85"/>
|
||||||
|
<rect x="26" y="46" width="320" height="12" rx="6" fill="#eaf0ff" opacity="0.38"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<text x="64" y="708" font-family="Inter, system-ui, Arial" font-size="20" fill="#8ea0bf">
|
||||||
|
StaySense • Standort-Check im Browser
|
||||||
|
</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
11
assets/icon-browser.svg
Normal file
11
assets/icon-browser.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Browser">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">🌐</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 612 B |
11
assets/icon-fast.svg
Normal file
11
assets/icon-fast.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Schnell">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">⚡</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 611 B |
11
assets/icon-focus.svg
Normal file
11
assets/icon-focus.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Fokus">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">🎯</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 610 B |
11
assets/icon-leaf.svg
Normal file
11
assets/icon-leaf.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Respekt">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">🌿</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 612 B |
11
assets/icon-location.svg
Normal file
11
assets/icon-location.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Standort">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">📍</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 613 B |
11
assets/icon-sense.svg
Normal file
11
assets/icon-sense.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Einschätzung">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">🧠</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 618 B |
11
assets/icon-shield.svg
Normal file
11
assets/icon-shield.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Sicherheit">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">🛡</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 615 B |
11
assets/icon-world.svg
Normal file
11
assets/icon-world.svg
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Icon Überall">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect x="6" y="6" width="52" height="52" rx="16" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14"/>
|
||||||
|
<circle cx="20" cy="22" r="6" fill="url(#g)"/>
|
||||||
|
<text x="32" y="40" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="22" fill="#eaf0ff">🗺</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 613 B |
40
assets/roadmap.svg
Normal file
40
assets/roadmap.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 520" role="img" aria-label="Roadmap Illustration">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
||||||
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="s" x="-20%" y="-20%" width="140%" height="140%">
|
||||||
|
<feDropShadow dx="0" dy="14" stdDeviation="16" flood-color="#000" flood-opacity="0.35"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<rect width="800" height="520" rx="26" fill="#0b1220" opacity="0.55"/>
|
||||||
|
<path d="M60 380 C 180 280, 280 460, 410 360 C 540 260, 650 360, 740 260"
|
||||||
|
fill="none" stroke="#ffffff" stroke-opacity="0.16" stroke-width="10" stroke-linecap="round"/>
|
||||||
|
|
||||||
|
<g filter="url(#s)">
|
||||||
|
<circle cx="150" cy="320" r="22" fill="url(#g)"/>
|
||||||
|
<circle cx="150" cy="320" r="10" fill="#071022" opacity="0.9"/>
|
||||||
|
<text x="150" y="290" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="18" fill="#eaf0ff">Heute</text>
|
||||||
|
|
||||||
|
<circle cx="410" cy="360" r="22" fill="url(#g)"/>
|
||||||
|
<circle cx="410" cy="360" r="10" fill="#071022" opacity="0.9"/>
|
||||||
|
<text x="410" y="330" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="18" fill="#eaf0ff">Standort‑Check</text>
|
||||||
|
|
||||||
|
<circle cx="700" cy="290" r="22" fill="url(#g)"/>
|
||||||
|
<circle cx="700" cy="290" r="10" fill="#071022" opacity="0.9"/>
|
||||||
|
<text x="700" y="260" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="18" fill="#eaf0ff">2026</text>
|
||||||
|
<text x="700" y="235" text-anchor="middle" font-family="Inter, system-ui, Arial" font-size="14" fill="#8ea0bf">Spots in der Nähe</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g transform="translate(70 70)">
|
||||||
|
<rect x="0" y="0" width="660" height="140" rx="24" fill="#0f1a2f" stroke="#ffffff" stroke-opacity="0.12"/>
|
||||||
|
<text x="28" y="52" font-family="Inter, system-ui, Arial" font-size="26" fill="#eaf0ff" font-weight="700">Roadmap</text>
|
||||||
|
<text x="28" y="88" font-family="Inter, system-ui, Arial" font-size="16" fill="#d6e2ff">
|
||||||
|
Fokus bleibt: erst verstehen, dann entscheiden – Nearby‑Spots kommen als Ergänzung.
|
||||||
|
</text>
|
||||||
|
<rect x="28" y="104" width="240" height="10" rx="5" fill="#7c5cff" opacity="0.85"/>
|
||||||
|
<rect x="280" y="104" width="310" height="10" rx="5" fill="#eaf0ff" opacity="0.18"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
327
index.html
Normal file
327
index.html
Normal file
|
|
@ -0,0 +1,327 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<title>StaySense – Standort-Check fürs Vanlife</title>
|
||||||
|
<meta name="description" content="StaySense liefert dir Infos zu deinem aktuellen Standort – ohne App-Download, direkt im Browser. Öffnen, Lage checken, entspannter stehen." />
|
||||||
|
<meta name="robots" content="index,follow" />
|
||||||
|
<meta property="og:title" content="StaySense – Standort-Check fürs Vanlife" />
|
||||||
|
<meta property="og:description" content="Infos zum aktuellen Standort. Immer und überall nutzbar. Spots-in-der-Nähe kommen 2026." />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:locale" content="de_DE" />
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="theme-color" content="#0b1220" />
|
||||||
|
<link rel="canonical" href="https://landing.staysense.vanityontour.de/" />
|
||||||
|
<link rel="icon" href="./assets/icon-sense.svg" type="image/svg+xml" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="./styles.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a class="skip-link" href="#mainContent">Zum Inhalt springen</a>
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="container header__inner">
|
||||||
|
<a class="brand" href="#top" aria-label="StaySense Start">
|
||||||
|
<span class="brand__mark">SS</span>
|
||||||
|
<span class="brand__name">StaySense</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="nav" aria-label="Hauptnavigation">
|
||||||
|
<a href="#features">Vorteile</a>
|
||||||
|
<a href="#how">So funktioniert's</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<a class="btn btn--sm btn--primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">Jetzt öffnen</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<button class="nav__toggle" id="navToggle" aria-label="Menü öffnen" aria-expanded="false" aria-controls="navMobile">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav__mobile" id="navMobile" hidden>
|
||||||
|
<div class="container nav__mobileInner">
|
||||||
|
<a href="#features">Vorteile</a>
|
||||||
|
<a href="#how">So funktioniert's</a>
|
||||||
|
<a href="#faq">FAQ</a>
|
||||||
|
<a class="btn btn--primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">StaySense öffnen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="top">
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero" id="mainContent">
|
||||||
|
<div class="container hero__grid">
|
||||||
|
<div class="hero__copy">
|
||||||
|
<p class="badge">Browser-basiert • überall nutzbar • ohne Download</p>
|
||||||
|
<h1>Wissen, bevor du die Handbremse ziehst.</h1>
|
||||||
|
<p class="lead">
|
||||||
|
<strong>StaySense</strong> liefert dir Informationen zu deinem <strong>aktuellen Standort</strong> - damit du die Lage besser einschätzen kannst,
|
||||||
|
ohne Rätselraten, ohne App-Chaos, ohne "wird schon passen".
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hero__cta">
|
||||||
|
<a class="btn btn--primary" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">StaySense jetzt nutzen</a>
|
||||||
|
<a class="btn btn--ghost" href="#how">Wie es funktioniert</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero__meta">
|
||||||
|
<div class="kpi">
|
||||||
|
<div class="kpi__value">0</div>
|
||||||
|
<div class="kpi__label">Spots-Datenbank (bewusst nicht)</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi">
|
||||||
|
<div class="kpi__value">100%</div>
|
||||||
|
<div class="kpi__label">Fokus: aktueller Standort</div>
|
||||||
|
</div>
|
||||||
|
<div class="kpi">
|
||||||
|
<div class="kpi__value">2026</div>
|
||||||
|
<div class="kpi__label">"Spots in der Nähe" kommt</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="fineprint">
|
||||||
|
Hinweis: StaySense ist eine Web-Anwendung unter
|
||||||
|
<a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a>.
|
||||||
|
Du kannst sie jederzeit im Browser öffnen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero__visual" aria-hidden="true">
|
||||||
|
<img src="./assets/hero-van.svg" alt="" width="800" height="650" decoding="async" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- TRUST / PROBLEM -->
|
||||||
|
<section class="section section--muted">
|
||||||
|
<div class="container">
|
||||||
|
<div class="split">
|
||||||
|
<div>
|
||||||
|
<h2>Vanlife ist Freiheit - aber Unsicherheit fährt oft mit.</h2>
|
||||||
|
<p>
|
||||||
|
Du stehst irgendwo, es wird spät, und plötzlich kommen die Fragen:
|
||||||
|
<em>Darf ich hier? Wie sensibel ist die Umgebung? Konfliktpotenzial?</em>
|
||||||
|
StaySense ist dein digitaler Lage-Check: schnell, klar, praxisnah.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="cards cards--2">
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-location.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Hier & Jetzt</h3>
|
||||||
|
<p>Keine Jagd nach Koordinaten - sondern Einschätzung zum Ort, an dem du gerade bist.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-browser.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Im Browser</h3>
|
||||||
|
<p>Öffnen, nutzen, fertig. Kein Store, kein Update-Stress, kein "Welche App war das nochmal?"</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FEATURES -->
|
||||||
|
<section class="section" id="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section__head">
|
||||||
|
<h2>Was dir StaySense bringt</h2>
|
||||||
|
<p class="muted">Konzentriert auf Anwendung und Nutzen - ohne Technik-Blabla.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cards cards--3">
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-shield.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Weniger Stress</h3>
|
||||||
|
<p>Statt Bauchgefühl bekommst du Orientierung - und schläfst am Ende ruhiger.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-sense.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Mehr Einschätzung</h3>
|
||||||
|
<p>Du siehst Hinweise, die dir helfen, die Situation vor Ort besser einzuordnen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-leaf.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Respektvoll stehen</h3>
|
||||||
|
<p>StaySense unterstützt dich dabei, sensibel zu handeln - für Orte, Anwohner und Community.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-fast.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Sofort startklar</h3>
|
||||||
|
<p>Link öffnen, Standort checken. Perfekt für "ich brauch jetzt eine Entscheidung".</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-world.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Immer dabei</h3>
|
||||||
|
<p>Auf Handy, Tablet oder Laptop nutzbar - überall dort, wo du Browser + Empfang hast.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<img class="icon" src="./assets/icon-focus.svg" alt="" width="34" height="34" loading="lazy" decoding="async" />
|
||||||
|
<h3>Kein Overload</h3>
|
||||||
|
<p>Kein Kommentar-Sumpf. Kein Sternchen-Drama. Nur Informationen, die dir helfen sollen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOW IT WORKS -->
|
||||||
|
<section class="section section--muted" id="how">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section__head">
|
||||||
|
<h2>So funktioniert StaySense</h2>
|
||||||
|
<p class="muted">Drei Schritte, keine Zauberei - nur praktische Hilfe.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ol class="steps">
|
||||||
|
<li class="step">
|
||||||
|
<div class="step__num">1</div>
|
||||||
|
<div class="step__body">
|
||||||
|
<h3>Website öffnen</h3>
|
||||||
|
<p>Ruf <a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a> auf - fertig.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="step">
|
||||||
|
<div class="step__num">2</div>
|
||||||
|
<div class="step__body">
|
||||||
|
<h3>Standort prüfen</h3>
|
||||||
|
<p>StaySense liefert dir Hinweise zur Umgebung und zur Situation am aktuellen Ort.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="step">
|
||||||
|
<div class="step__num">3</div>
|
||||||
|
<div class="step__body">
|
||||||
|
<h3>Entscheidung treffen</h3>
|
||||||
|
<p>Mit klarerem Kopf entscheiden: bleiben, weiterfahren oder Plan B.</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<div class="callout">
|
||||||
|
<div class="callout__text">
|
||||||
|
<h3>"Spots in der Nähe" kommt noch dieses Jahr</h3>
|
||||||
|
<p>
|
||||||
|
Aktuell fokussiert StaySense die Standort-Analyse. Eine Nearby-Spot-Funktion ist geplant und wird 2026 ergänzt.
|
||||||
|
Bis dahin gilt: erst verstehen, dann entscheiden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="callout__art" aria-hidden="true">
|
||||||
|
<img src="./assets/roadmap.svg" alt="" width="640" height="420" loading="lazy" decoding="async" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SOCIAL PROOF -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section__head">
|
||||||
|
<h2>Für wen ist StaySense?</h2>
|
||||||
|
<p class="muted">Kurzfassung: Für Camper mit gesundem Menschenverstand.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cards cards--2">
|
||||||
|
<div class="card">
|
||||||
|
<h3>Einsteiger</h3>
|
||||||
|
<p>Wenn du noch nicht jeden Ort "lesen" kannst, hilft dir StaySense beim Einschätzen - ohne Overload.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h3>Erfahrene Vanlifer</h3>
|
||||||
|
<p>Wenn du schnell Klarheit willst, statt durch 200 Kommentare zu scrollen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="quote">
|
||||||
|
<p>"Ich wollte keine Spot-App. Ich wollte weniger Stress beim Stehen. Genau das macht StaySense."</p>
|
||||||
|
<span>- Nutzerstimme (Platzhalter)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section class="section section--muted" id="faq">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section__head">
|
||||||
|
<h2>FAQ</h2>
|
||||||
|
<p class="muted">Die wichtigsten Fragen - kurz und ehrlich.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<details>
|
||||||
|
<summary>Ist StaySense eine App?</summary>
|
||||||
|
<div class="faq__body">
|
||||||
|
<p>Praktisch ja - technisch ist es eine Web-Anwendung. Du nutzt sie direkt im Browser unter staysense.vanityontour.de.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Zeigt StaySense Stellplätze/Spots?</summary>
|
||||||
|
<div class="faq__body">
|
||||||
|
<p>Aktuell nein. StaySense liefert Informationen zu deinem <strong>aktuellen Standort</strong>. Spots in der Nähe sind geplant und werden 2026 ergänzt.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Brauche ich einen Account?</summary>
|
||||||
|
<div class="faq__body">
|
||||||
|
<p>Für den grundlegenden Standort-Check: nein (so bleibt's angenehm unkompliziert).</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Funktioniert das überall?</summary>
|
||||||
|
<div class="faq__body">
|
||||||
|
<p>Ja - überall, wo du einen Browser und eine Verbindung hast. Handy, Tablet oder Laptop.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>Ist das eine rechtliche Beratung?</summary>
|
||||||
|
<div class="faq__body">
|
||||||
|
<p>Nein. StaySense liefert Hinweise zur Einschätzung, ersetzt aber keine verbindliche Rechtsberatung oder Beschilderung vor Ort.</p>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="cta">
|
||||||
|
<div class="container cta__inner">
|
||||||
|
<div>
|
||||||
|
<h2>Mach den Lage-Check, bevor du bleibst.</h2>
|
||||||
|
<p>Öffne StaySense im Browser - und entscheide entspannter.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cta__actions">
|
||||||
|
<a class="btn btn--primary btn--lg" href="https://staysense.vanityontour.de" target="_blank" rel="noopener">Jetzt öffnen</a>
|
||||||
|
<a class="btn btn--ghost btn--lg" href="https://vanityontour.de" target="_blank" rel="noopener">Mehr von Vanity on Tour</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container footer__inner">
|
||||||
|
<div class="footer__left">
|
||||||
|
<div class="brand brand--footer">
|
||||||
|
<span class="brand__mark">SS</span>
|
||||||
|
<span class="brand__name">StaySense</span>
|
||||||
|
</div>
|
||||||
|
<p class="muted">
|
||||||
|
Web-Anwendung: <a href="https://staysense.vanityontour.de" target="_blank" rel="noopener">staysense.vanityontour.de</a><br>
|
||||||
|
Ein Projekt von <a href="https://vanityontour.de" target="_blank" rel="noopener">Vanity on Tour</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer__right">
|
||||||
|
<a href="#top">Nach oben ↑</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="./script.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
29
script.js
Normal file
29
script.js
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
const toggle = document.getElementById('navToggle');
|
||||||
|
const mobile = document.getElementById('navMobile');
|
||||||
|
|
||||||
|
function closeMobileMenu() {
|
||||||
|
if (!toggle || !mobile) return;
|
||||||
|
toggle.setAttribute('aria-expanded', 'false');
|
||||||
|
toggle.setAttribute('aria-label', 'Menü öffnen');
|
||||||
|
mobile.hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle?.addEventListener('click', () => {
|
||||||
|
const expanded = toggle.getAttribute('aria-expanded') === 'true';
|
||||||
|
toggle.setAttribute('aria-expanded', String(!expanded));
|
||||||
|
toggle.setAttribute('aria-label', expanded ? 'Menü öffnen' : 'Menü schließen');
|
||||||
|
mobile.hidden = expanded;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Escape') closeMobileMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('click', (event) => {
|
||||||
|
if (!mobile || mobile.hidden) return;
|
||||||
|
if (!mobile.contains(event.target) && !toggle?.contains(event.target)) closeMobileMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
mobile?.querySelectorAll('a').forEach((a) => {
|
||||||
|
a.addEventListener('click', closeMobileMenu);
|
||||||
|
});
|
||||||
268
styles.css
Normal file
268
styles.css
Normal file
|
|
@ -0,0 +1,268 @@
|
||||||
|
/* StaySense Landingpage – Vanilla HTML/CSS
|
||||||
|
Tipp: Farben/Typo gern an Vanity-on-Tour Branding anpassen.
|
||||||
|
*/
|
||||||
|
:root{
|
||||||
|
--bg:#0b1220;
|
||||||
|
--bg2:#0f1a2f;
|
||||||
|
--card:#0f1a2f;
|
||||||
|
--muted:#8ea0bf;
|
||||||
|
--text:#eaf0ff;
|
||||||
|
--line:rgba(255,255,255,.10);
|
||||||
|
--primary:#7c5cff;
|
||||||
|
--primary2:#5eead4;
|
||||||
|
--shadow:0 10px 30px rgba(0,0,0,.35);
|
||||||
|
--radius:18px;
|
||||||
|
--max:1120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
*{box-sizing:border-box}
|
||||||
|
html,body{margin:0;padding:0}
|
||||||
|
body{
|
||||||
|
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
|
||||||
|
background:radial-gradient(1200px 800px at 20% -10%, rgba(124,92,255,.30), transparent 55%),
|
||||||
|
radial-gradient(900px 700px at 90% 10%, rgba(94,234,212,.20), transparent 60%),
|
||||||
|
var(--bg);
|
||||||
|
color:var(--text);
|
||||||
|
line-height:1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{color:inherit;text-decoration:none}
|
||||||
|
a:hover{text-decoration:underline}
|
||||||
|
a:focus-visible,
|
||||||
|
button:focus-visible,
|
||||||
|
summary:focus-visible{
|
||||||
|
outline:2px solid var(--primary2);
|
||||||
|
outline-offset:2px;
|
||||||
|
}
|
||||||
|
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
|
||||||
|
|
||||||
|
.skip-link{
|
||||||
|
position:absolute;
|
||||||
|
left:12px;
|
||||||
|
top:-48px;
|
||||||
|
z-index:120;
|
||||||
|
background:#ffffff;
|
||||||
|
color:#071022;
|
||||||
|
border-radius:10px;
|
||||||
|
padding:8px 10px;
|
||||||
|
font-weight:700;
|
||||||
|
border:1px solid #d4def7;
|
||||||
|
}
|
||||||
|
.skip-link:focus{top:10px}
|
||||||
|
|
||||||
|
.header{
|
||||||
|
position:sticky;top:0;z-index:50;
|
||||||
|
background:rgba(11,18,32,.75);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom:1px solid var(--line);
|
||||||
|
}
|
||||||
|
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
|
||||||
|
|
||||||
|
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
|
||||||
|
.brand__mark{
|
||||||
|
width:36px;height:36px;border-radius:12px;
|
||||||
|
display:grid;place-items:center;
|
||||||
|
background:linear-gradient(135deg,var(--primary),rgba(94,234,212,.8));
|
||||||
|
color:#071022;font-weight:800;
|
||||||
|
box-shadow:0 8px 18px rgba(124,92,255,.25);
|
||||||
|
}
|
||||||
|
.brand__name{letter-spacing:.2px}
|
||||||
|
|
||||||
|
.nav{display:flex;align-items:center;gap:16px}
|
||||||
|
.nav a{color:var(--muted);font-weight:600}
|
||||||
|
.nav a:hover{color:var(--text);text-decoration:none}
|
||||||
|
|
||||||
|
.nav__toggle{
|
||||||
|
display:none;border:1px solid var(--line);
|
||||||
|
background:transparent;color:var(--text);
|
||||||
|
width:44px;height:40px;border-radius:12px;
|
||||||
|
align-items:center;justify-content:center;gap:4px;flex-direction:column;
|
||||||
|
}
|
||||||
|
.nav__toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:99px;opacity:.9}
|
||||||
|
|
||||||
|
.nav__mobile{
|
||||||
|
border-bottom:1px solid var(--line);
|
||||||
|
background:rgba(11,18,32,.92);
|
||||||
|
}
|
||||||
|
.nav__mobileInner{display:grid;gap:10px;padding:14px 0}
|
||||||
|
.nav__mobileInner a{padding:10px 12px;border-radius:12px;border:1px solid var(--line);color:var(--text)}
|
||||||
|
|
||||||
|
.hero{padding:64px 0 24px}
|
||||||
|
.hero__grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:28px;align-items:center}
|
||||||
|
.badge{
|
||||||
|
display:inline-flex;gap:8px;align-items:center;
|
||||||
|
padding:8px 12px;border:1px solid var(--line);
|
||||||
|
border-radius:999px;color:var(--muted);
|
||||||
|
background:rgba(255,255,255,.03);
|
||||||
|
font-weight:600;font-size:13px;
|
||||||
|
}
|
||||||
|
h1{font-size:46px;line-height:1.08;margin:14px 0 14px}
|
||||||
|
.lead{color:#d7e2ff;font-size:18px;max-width:58ch}
|
||||||
|
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
|
||||||
|
.hero__visual img{
|
||||||
|
width:100%;height:auto;display:block;
|
||||||
|
border-radius:var(--radius);
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background:rgba(255,255,255,.02);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 0}
|
||||||
|
.kpi{
|
||||||
|
border:1px solid var(--line);
|
||||||
|
border-radius:16px;padding:12px 12px;
|
||||||
|
background:rgba(255,255,255,.03);
|
||||||
|
}
|
||||||
|
.kpi__value{font-weight:800;font-size:20px}
|
||||||
|
.kpi__label{color:var(--muted);font-size:12px;margin-top:2px}
|
||||||
|
|
||||||
|
.fineprint{margin-top:12px;color:var(--muted);font-size:13px}
|
||||||
|
|
||||||
|
.section{padding:56px 0}
|
||||||
|
.section--muted{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
|
||||||
|
.section__head{margin-bottom:18px}
|
||||||
|
.section__head h2{margin:0 0 6px;font-size:30px}
|
||||||
|
.muted{color:var(--muted)}
|
||||||
|
|
||||||
|
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
|
||||||
|
.cards{display:grid;gap:14px}
|
||||||
|
.cards--2{grid-template-columns:repeat(2,1fr)}
|
||||||
|
.cards--3{grid-template-columns:repeat(3,1fr)}
|
||||||
|
.card{
|
||||||
|
border:1px solid var(--line);
|
||||||
|
border-radius:var(--radius);
|
||||||
|
padding:16px 16px;
|
||||||
|
background:rgba(255,255,255,.03);
|
||||||
|
box-shadow:0 8px 22px rgba(0,0,0,.18);
|
||||||
|
}
|
||||||
|
.card h3{margin:8px 0 6px;font-size:18px}
|
||||||
|
.card p{margin:0;color:#d6e2ff}
|
||||||
|
.icon{width:34px;height:34px;display:block}
|
||||||
|
|
||||||
|
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
|
||||||
|
.step{
|
||||||
|
display:flex;gap:14px;align-items:flex-start;
|
||||||
|
border:1px solid var(--line);
|
||||||
|
border-radius:var(--radius);
|
||||||
|
padding:14px 14px;background:rgba(255,255,255,.03);
|
||||||
|
}
|
||||||
|
.step__num{
|
||||||
|
width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
|
||||||
|
background:rgba(124,92,255,.22);
|
||||||
|
border:1px solid rgba(124,92,255,.35);
|
||||||
|
font-weight:800;color:#eaf0ff;
|
||||||
|
}
|
||||||
|
.step__body h3{margin:0 0 4px;font-size:18px}
|
||||||
|
.step__body p{margin:0;color:#d6e2ff}
|
||||||
|
|
||||||
|
.callout{
|
||||||
|
margin-top:18px;
|
||||||
|
border:1px solid rgba(94,234,212,.28);
|
||||||
|
background:linear-gradient(135deg, rgba(94,234,212,.14), rgba(124,92,255,.10));
|
||||||
|
border-radius:24px;
|
||||||
|
padding:18px;
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:1.2fr .8fr;
|
||||||
|
gap:16px;
|
||||||
|
align-items:center;
|
||||||
|
}
|
||||||
|
.callout h3{margin:0 0 6px}
|
||||||
|
.callout p{margin:0;color:#e8f3ff}
|
||||||
|
.callout__art img{width:100%;height:auto;display:block;opacity:.95}
|
||||||
|
|
||||||
|
.quote{
|
||||||
|
margin-top:16px;
|
||||||
|
border:1px dashed rgba(255,255,255,.18);
|
||||||
|
border-radius:24px;
|
||||||
|
padding:18px;
|
||||||
|
background:rgba(255,255,255,.02);
|
||||||
|
}
|
||||||
|
.quote p{margin:0 0 6px;font-size:18px}
|
||||||
|
.quote span{color:var(--muted);font-size:13px}
|
||||||
|
|
||||||
|
.faq{display:grid;gap:12px}
|
||||||
|
details{
|
||||||
|
border:1px solid var(--line);
|
||||||
|
border-radius:18px;
|
||||||
|
padding:12px 14px;
|
||||||
|
background:rgba(255,255,255,.03);
|
||||||
|
}
|
||||||
|
summary{cursor:pointer;font-weight:700}
|
||||||
|
.faq__body{color:#d6e2ff;margin-top:8px}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
display:inline-flex;align-items:center;justify-content:center;
|
||||||
|
gap:10px;
|
||||||
|
padding:12px 14px;
|
||||||
|
border-radius:14px;
|
||||||
|
border:1px solid var(--line);
|
||||||
|
background:rgba(255,255,255,.04);
|
||||||
|
color:var(--text);
|
||||||
|
font-weight:800;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
.btn:hover{text-decoration:none;transform:translateY(-1px)}
|
||||||
|
.btn--primary{
|
||||||
|
border-color:rgba(124,92,255,.55);
|
||||||
|
background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(94,234,212,.55));
|
||||||
|
color:#071022;
|
||||||
|
}
|
||||||
|
.btn--ghost{background:transparent}
|
||||||
|
.btn--sm{padding:9px 11px;border-radius:12px;font-size:14px}
|
||||||
|
.btn--lg{padding:14px 16px;border-radius:16px;font-size:16px}
|
||||||
|
|
||||||
|
.cta{
|
||||||
|
padding:46px 0;
|
||||||
|
border-top:1px solid var(--line);
|
||||||
|
background:radial-gradient(700px 400px at 20% 0%, rgba(124,92,255,.18), transparent 55%),
|
||||||
|
radial-gradient(700px 400px at 80% 0%, rgba(94,234,212,.12), transparent 55%);
|
||||||
|
}
|
||||||
|
.cta__inner{
|
||||||
|
border:1px solid rgba(255,255,255,.12);
|
||||||
|
border-radius:28px;
|
||||||
|
padding:22px;
|
||||||
|
display:flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:space-between;
|
||||||
|
gap:14px;
|
||||||
|
background:rgba(255,255,255,.03);
|
||||||
|
box-shadow:var(--shadow);
|
||||||
|
}
|
||||||
|
.cta__inner h2{margin:0 0 6px}
|
||||||
|
.cta__inner p{margin:0;color:#d6e2ff}
|
||||||
|
.cta__actions{display:flex;gap:10px;flex-wrap:wrap}
|
||||||
|
|
||||||
|
.footer{
|
||||||
|
padding:28px 0;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:18px}
|
||||||
|
.brand--footer .brand__mark{width:34px;height:34px;border-radius:12px}
|
||||||
|
.footer a{color:var(--muted)}
|
||||||
|
.footer a:hover{color:var(--text);text-decoration:none}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 980px){
|
||||||
|
.hero__grid{grid-template-columns:1fr;gap:18px}
|
||||||
|
h1{font-size:38px}
|
||||||
|
.split{grid-template-columns:1fr}
|
||||||
|
.cards--3{grid-template-columns:repeat(2,1fr)}
|
||||||
|
.callout{grid-template-columns:1fr}
|
||||||
|
.cta__inner{flex-direction:column;align-items:flex-start}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px){
|
||||||
|
.nav{display:none}
|
||||||
|
.nav__toggle{display:flex}
|
||||||
|
.cards--2{grid-template-columns:1fr}
|
||||||
|
.cards--3{grid-template-columns:1fr}
|
||||||
|
.hero__meta{grid-template-columns:1fr}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce){
|
||||||
|
*{
|
||||||
|
animation:none !important;
|
||||||
|
transition:none !important;
|
||||||
|
scroll-behavior:auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue