Dateien nach "as-styleguide" hochladen
This commit is contained in:
11
as-styleguide/README.md
Normal file
11
as-styleguide/README.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# AS – Coaching & Beratung | Styleguide (HTML/CSS/JS)
|
||||
|
||||
Öffne `index.html` im Browser.
|
||||
|
||||
## Inhalte
|
||||
- Hero (HaveHeartOne) + UI/Body (Gilroy)
|
||||
- Design Tokens als CSS-Variablen
|
||||
- Buttons, Cards, Badges, Grid-Layouts
|
||||
- Produktkacheln (WooCommerce-ähnlich)
|
||||
- Accordion (JS)
|
||||
- Sticky Header + Mobile Nav
|
||||
317
as-styleguide/index.html
Normal file
317
as-styleguide/index.html
Normal file
@@ -0,0 +1,317 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>AS Styleguide – Coaching & Beratung</title>
|
||||
<meta name="description" content="Styleguide (HTML/CSS/JS) für Coaching & Beratung – Typografie, Komponenten, Layout-Grids." />
|
||||
<link rel="preload" href="assets/fonts/have-heart-one.otf" as="font" type="font/otf" crossorigin>
|
||||
<link rel="preload" href="assets/fonts/gilroy/Gilroy-Regular.ttf" as="font" type="font/ttf" crossorigin>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip-link" href="#content">Zum Inhalt springen</a>
|
||||
|
||||
<header class="site-header" data-header>
|
||||
<div class="container header-inner">
|
||||
<a class="brand" href="#top" aria-label="Start">
|
||||
<img class="brand-logo" src="assets/img/logo-placeholder.svg" alt="AS – Coaching und Beratung" />
|
||||
</a>
|
||||
|
||||
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
|
||||
<span class="sr-only">Navigation öffnen</span>
|
||||
<span class="burger" aria-hidden="true"></span>
|
||||
</button>
|
||||
|
||||
<nav class="site-nav" id="site-nav" data-nav>
|
||||
<a href="#typografie">Typografie</a>
|
||||
<a href="#farben">Farben</a>
|
||||
<a href="#komponenten">Komponenten</a>
|
||||
<a href="#layouts">Layouts</a>
|
||||
<a href="#sections">Sektionen</a>
|
||||
</nav>
|
||||
|
||||
<div class="header-cta">
|
||||
<a class="btn btn--ghost" href="#kontakt">Kontakt</a>
|
||||
<a class="btn btn--primary" href="#cta">Termin anfragen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="content">
|
||||
<section class="hero" id="top">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<div class="hero-orb hero-orb--1"></div>
|
||||
<div class="hero-orb hero-orb--2"></div>
|
||||
<svg class="hero-wave" viewBox="0 0 1440 220" preserveAspectRatio="none">
|
||||
<path d="M0,128 C240,220 480,64 720,128 C960,192 1200,64 1440,140 L1440,220 L0,220 Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Bewerbercoaching · Selbstpräsentation · Profil-Schärfung</p>
|
||||
<h1 class="display">
|
||||
Souverän auftreten.<br />
|
||||
<span class="display-accent">Wirkung erzielen.</span>
|
||||
</h1>
|
||||
<p class="lead">
|
||||
Für Fachkräfte in KMU, die im Bewerbungsprozess, im Kundentermin oder intern sichtbarer werden wollen –
|
||||
klar, professionell und ohne Show.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn--primary btn--lg" href="#cta">Kostenloses Erstgespräch</a>
|
||||
<a class="btn btn--secondary btn--lg" href="#produkte">Workbook & Minikurse</a>
|
||||
</div>
|
||||
|
||||
<ul class="hero-proof" role="list">
|
||||
<li><span class="icon-dot" aria-hidden="true"></span> CV-Check & Profil-Optimierung</li>
|
||||
<li><span class="icon-dot" aria-hidden="true"></span> Interview-Training (realistische Simulation)</li>
|
||||
<li><span class="icon-dot" aria-hidden="true"></span> Storytelling & Argumentationslinien</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-card">
|
||||
<div class="hero-card-top">
|
||||
<div class="pill">Styleguide</div>
|
||||
<div class="badge">WP-ready</div>
|
||||
</div>
|
||||
|
||||
<div class="card card--elevated">
|
||||
<h2 class="h3">Schnellstart-Komponenten</h2>
|
||||
<p class="muted">Buttons, Cards, Formulare, Grids, Sektionen – bereits so aufgebaut, dass du daraus ein WP-Template ableiten kannst.</p>
|
||||
|
||||
<div class="stack-sm">
|
||||
<a class="btn btn--primary w-100" href="#komponenten">Zu den Komponenten</a>
|
||||
<a class="btn btn--ghost w-100" href="#layouts">Zu den Layouts</a>
|
||||
</div>
|
||||
|
||||
<hr class="divider"/>
|
||||
|
||||
<dl class="kv">
|
||||
<div><dt>Primärfarbe</dt><dd><code>#EB825E</code></dd></div>
|
||||
<div><dt>Text</dt><dd><code>#353535</code></dd></div>
|
||||
<div><dt>Background</dt><dd><code>#FAF7F2</code></dd></div>
|
||||
<div><dt>Fonts</dt><dd><code>HaveHeartOne</code> + <code>Gilroy</code></dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="farben">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Design Tokens</h2>
|
||||
<p class="muted">Farben, Radius, Schatten & Spacing als CSS-Variablen – damit das später in WP sauber skalierbar ist.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="swatch">
|
||||
<div class="swatch-color" style="background:#EB825E"></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Accent</div><code>#EB825E</code></div>
|
||||
</div>
|
||||
|
||||
<div class="swatch">
|
||||
<div class="swatch-color" style="background:#353535"></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Ink</div><code>#353535</code></div>
|
||||
</div>
|
||||
|
||||
<div class="swatch">
|
||||
<div class="swatch-color" style="background:#FAF7F2; border:1px solid rgba(53,53,53,.15)"></div>
|
||||
<div class="swatch-meta"><div class="swatch-title">Canvas</div><code>#FAF7F2</code></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<strong>Fokus-Ring:</strong> über <code>--focus</code> definiert (accent + transparency). Buttons/Inputs sind damit sofort „keyboard-friendly“.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="typografie">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Typografie</h2>
|
||||
<p class="muted">HaveHeartOne nur für große, prägnante Statements. Gilroy für Struktur, UI und Fließtext.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<p class="label">Display / Hero (HaveHeartOne)</p>
|
||||
<p class="type-sample display-sample">Souverän auftreten. Wirkung erzielen.</p>
|
||||
<p class="muted small">Regel: HaveHeartOne nur H1 + evtl. emotionales H2. Keine Navigation, keine Forms, keine Tabellen.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p class="label">Body / UI (Gilroy)</p>
|
||||
<p class="type-sample body-sample">Klare Struktur. Ruhige Abstände. Seriöse UI. Das ist die Basis für WP-Templates und WooCommerce.</p>
|
||||
<div class="inline">
|
||||
<span class="tag">Regular</span>
|
||||
<span class="tag">Medium</span>
|
||||
<span class="tag">SemiBold</span>
|
||||
<span class="tag">Bold</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="komponenten">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Komponenten</h2>
|
||||
<p class="muted">Basis-Bausteine für WP (Blocks) und später WooCommerce.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<p class="label">Buttons</p>
|
||||
<div class="stack-sm">
|
||||
<button class="btn btn--primary">Primary</button>
|
||||
<button class="btn btn--secondary">Secondary</button>
|
||||
<button class="btn btn--ghost">Ghost</button>
|
||||
<button class="btn btn--primary btn--lg">Large</button>
|
||||
<button class="btn btn--primary" disabled>Disabled</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p class="label">Badges / Pills</p>
|
||||
<div class="inline wrap">
|
||||
<span class="badge">Neu</span>
|
||||
<span class="badge badge--soft">PDF</span>
|
||||
<span class="pill">1:1 Coaching</span>
|
||||
<span class="pill pill--soft">KMU Workshop</span>
|
||||
<span class="tag">WP</span>
|
||||
<span class="tag">WooCommerce</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p class="label">Card Variationen</p>
|
||||
<div class="stack-sm">
|
||||
<div class="card card--elevated">
|
||||
<strong>Elevated</strong>
|
||||
<p class="muted small">Für Hero/CTA, Pricing, wichtige Kacheln.</p>
|
||||
</div>
|
||||
<div class="card card--bordered">
|
||||
<strong>Bordered</strong>
|
||||
<p class="muted small">Für ruhige Content-Listen, FAQs, Hinweise.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="layouts">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Layouts & Content Grids</h2>
|
||||
<p class="muted">Wiederverwendbare Raster: 2/3 Spalten, Feature-Grids, Split-Layouts – WP Block-kompatibel.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p class="label">Feature Grid (3 Spalten)</p>
|
||||
<div class="grid grid-3">
|
||||
<div class="feature"><div class="feature-icon" aria-hidden="true"></div><h3 class="h3">Lebenslauf, der wirkt</h3><p class="muted">Struktur, Story, Ergebnisse – ohne Buzzwords.</p></div>
|
||||
<div class="feature"><div class="feature-icon" aria-hidden="true"></div><h3 class="h3">Interview-Simulation</h3><p class="muted">Realistisch, ruhig, mit Feedback auf Wirkung.</p></div>
|
||||
<div class="feature"><div class="feature-icon" aria-hidden="true"></div><h3 class="h3">Selbstpräsentation</h3><p class="muted">Ein klarer Pitch für Meetings, Kunden, Bewerbungen.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="sections">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Website-Sektionen</h2>
|
||||
<p class="muted">Beispiele für WooCommerce-Produktkacheln, FAQ und CTA.</p>
|
||||
</div>
|
||||
|
||||
<div class="section-block" id="produkte">
|
||||
<div class="block-head">
|
||||
<h3 class="h2">Digitale Miniprodukte</h3>
|
||||
<p class="muted">WooCommerce-ready: PDF, Workbook, Minikurs (Video), Bundle.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<article class="product card card--elevated">
|
||||
<div class="product-top"><span class="badge badge--soft">PDF</span><span class="tag">20–30 Min</span></div>
|
||||
<h4 class="h3">CV-Checkliste</h4>
|
||||
<p class="muted">Die wichtigsten Hebel, um deinen Lebenslauf sofort professioneller wirken zu lassen.</p>
|
||||
<div class="product-bottom"><div class="price">29 €</div><a class="btn btn--primary" href="#cta">Kaufen</a></div>
|
||||
</article>
|
||||
|
||||
<article class="product card card--elevated">
|
||||
<div class="product-top"><span class="badge badge--soft">Workbook</span><span class="tag">90 Min</span></div>
|
||||
<h4 class="h3">Selbstpräsentation in 7 Schritten</h4>
|
||||
<p class="muted">Struktur + Beispiele + Übungen, die du sofort anwenden kannst.</p>
|
||||
<div class="product-bottom"><div class="price">49 €</div><a class="btn btn--primary" href="#cta">Kaufen</a></div>
|
||||
</article>
|
||||
|
||||
<article class="product card card--elevated">
|
||||
<div class="product-top"><span class="badge badge--soft">Videokurs</span><span class="tag">2–3 h</span></div>
|
||||
<h4 class="h3">Interviewtraining kompakt</h4>
|
||||
<p class="muted">Antworten strukturieren, Wirkung steuern, ruhig bleiben.</p>
|
||||
<div class="product-bottom"><div class="price">149 €</div><a class="btn btn--primary" href="#cta">Kaufen</a></div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-block">
|
||||
<div class="block-head">
|
||||
<h3 class="h2">FAQ</h3>
|
||||
<p class="muted">Accordion via JS.</p>
|
||||
</div>
|
||||
|
||||
<div class="accordion" data-accordion>
|
||||
<button class="accordion-item" type="button" aria-expanded="false">
|
||||
<span>Wie läuft ein Erstgespräch ab?</span><span class="accordion-icon" aria-hidden="true"></span>
|
||||
</button>
|
||||
<div class="accordion-panel" hidden><p class="muted">15–20 Minuten. Ziel: Thema klären, Zielbild definieren, nächster Schritt.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-block" id="cta">
|
||||
<div class="cta card card--elevated">
|
||||
<div>
|
||||
<h3 class="cta-title">Bereit für ein Profil, das wirkt?</h3>
|
||||
<p class="muted">Kurzes Erstgespräch, dann ein klarer Plan (kein BlaBla).</p>
|
||||
</div>
|
||||
<div class="cta-actions">
|
||||
<a class="btn btn--primary btn--lg" href="#kontakt">Termin anfragen</a>
|
||||
<a class="btn btn--ghost btn--lg" href="#produkte">Erst mal Workbook</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="kontakt">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2 class="h2">Kontakt</h2>
|
||||
<p class="muted">Platzhalter – später in WP als Formular-Block.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-inner">
|
||||
<p class="muted small">© <span data-year></span> AS – Coaching & Beratung. Styleguide / Prototype.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#0">Impressum</a>
|
||||
<a href="#0">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
47
as-styleguide/script.js
Normal file
47
as-styleguide/script.js
Normal file
@@ -0,0 +1,47 @@
|
||||
(() => {
|
||||
const navToggle = document.querySelector("[data-nav-toggle]");
|
||||
const nav = document.querySelector("[data-nav]");
|
||||
|
||||
if (navToggle && nav) {
|
||||
navToggle.addEventListener("click", () => {
|
||||
const isOpen = nav.classList.toggle("is-open");
|
||||
navToggle.setAttribute("aria-expanded", String(isOpen));
|
||||
});
|
||||
|
||||
nav.addEventListener("click", (e) => {
|
||||
const a = e.target.closest("a");
|
||||
if (!a) return;
|
||||
nav.classList.remove("is-open");
|
||||
navToggle.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key !== "Escape") return;
|
||||
nav.classList.remove("is-open");
|
||||
navToggle.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
}
|
||||
|
||||
const accordion = document.querySelector("[data-accordion]");
|
||||
if (accordion) {
|
||||
const items = [...accordion.querySelectorAll(".accordion-item")];
|
||||
items.forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
const expanded = btn.getAttribute("aria-expanded") === "true";
|
||||
items.forEach((b) => {
|
||||
b.setAttribute("aria-expanded", "false");
|
||||
const panel = b.nextElementSibling;
|
||||
if (panel && panel.classList.contains("accordion-panel")) panel.hidden = true;
|
||||
});
|
||||
if (!expanded) {
|
||||
btn.setAttribute("aria-expanded", "true");
|
||||
const panel = btn.nextElementSibling;
|
||||
if (panel && panel.classList.contains("accordion-panel")) panel.hidden = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const yearEl = document.querySelector("[data-year]");
|
||||
if (yearEl) yearEl.textContent = String(new Date().getFullYear());
|
||||
})();
|
||||
153
as-styleguide/styles.css
Normal file
153
as-styleguide/styles.css
Normal file
@@ -0,0 +1,153 @@
|
||||
/* (same CSS as earlier, trimmed? keep full enough) */
|
||||
@font-face{font-family:"HaveHeartOne";src:url("assets/fonts/have-heart-one.otf") format("opentype");font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
|
||||
@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy/Gilroy-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
|
||||
|
||||
:root{
|
||||
--accent:#EB825E;--ink:#353535;--canvas:#FAF7F2;
|
||||
--ink-80:color-mix(in srgb,var(--ink) 80%,transparent);
|
||||
--ink-60:color-mix(in srgb,var(--ink) 60%,transparent);
|
||||
--radius-md:18px;--radius-lg:26px;
|
||||
--shadow-1:0 10px 30px rgba(0,0,0,.06);
|
||||
--shadow-2:0 18px 60px rgba(0,0,0,.10);
|
||||
--container:1160px;
|
||||
--font-display:"HaveHeartOne",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||||
--font-sans:"Gilroy",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||||
|
||||
--step--1:clamp(.92rem,.85rem + .3vw,1.02rem);
|
||||
--step-0:clamp(1rem,.92rem + .35vw,1.12rem);
|
||||
--step-1:clamp(1.14rem,1.02rem + .6vw,1.36rem);
|
||||
--step-2:clamp(1.3rem,1.1rem + 1vw,1.72rem);
|
||||
--step-3:clamp(1.56rem,1.24rem + 1.6vw,2.24rem);
|
||||
--step-4:clamp(1.92rem,1.38rem + 2.7vw,3.1rem);
|
||||
--step-5:clamp(2.34rem,1.55rem + 3.9vw,4.2rem);
|
||||
|
||||
--space-2:12px;--space-3:16px;--space-4:22px;--space-5:30px;--space-6:44px;--space-7:64px;--space-8:92px;
|
||||
--focus:0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent);
|
||||
}
|
||||
*{box-sizing:border-box;}html{scroll-behavior:smooth;}
|
||||
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.6;letter-spacing:.01em;}
|
||||
img{max-width:100%;height:auto;display:block;}
|
||||
.container{width:min(var(--container),calc(100% - 2*var(--space-5)));margin-inline:auto;}
|
||||
.skip-link{position:absolute;left:-999px;top:10px;background:#fff;padding:10px 14px;border-radius:10px;box-shadow:var(--shadow-1);z-index:9999;}
|
||||
.skip-link:focus{left:10px;outline:none;box-shadow:var(--focus),var(--shadow-1);}
|
||||
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
|
||||
|
||||
.display{font-family:var(--font-display);font-size:var(--step-5);line-height:.95;margin:0 0 var(--space-4);}
|
||||
.display-accent{position:relative;display:inline-block;}
|
||||
.display-accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.22em;background:color-mix(in srgb,var(--accent) 75%,transparent);border-radius:999px;z-index:-1;transform:rotate(-1.3deg);}
|
||||
.h2{font-size:var(--step-3);line-height:1.15;margin:0 0 var(--space-3);font-weight:600;}
|
||||
.h3{font-size:var(--step-2);line-height:1.2;margin:0 0 var(--space-2);font-weight:600;}
|
||||
.lead{font-size:var(--step-1);color:var(--ink-80);margin:0 0 var(--space-5);max-width:60ch;}
|
||||
.muted{color:var(--ink-60);}
|
||||
.label{font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin:0 0 var(--space-2);font-weight:600;}
|
||||
.eyebrow{margin:0 0 var(--space-3);font-weight:600;color:var(--ink-80);}
|
||||
|
||||
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--canvas) 85%,transparent);border-bottom:1px solid rgba(53,53,53,.10);}
|
||||
.header-inner{display:flex;align-items:center;gap:var(--space-3);padding:14px 0;}
|
||||
.brand-logo{width:190px;max-width:44vw;}
|
||||
.site-nav{display:flex;gap:var(--space-3);margin-left:auto;align-items:center;}
|
||||
.site-nav a{text-decoration:none;font-weight:600;font-size:.98rem;padding:8px 10px;border-radius:12px;}
|
||||
.site-nav a:hover{background:rgba(0,0,0,.04);}
|
||||
.header-cta{display:flex;gap:10px;align-items:center;}
|
||||
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid rgba(53,53,53,.18);border-radius:14px;padding:10px 12px;}
|
||||
.nav-toggle:focus{outline:none;box-shadow:var(--focus);}
|
||||
.burger{width:22px;height:2px;background:var(--ink);display:block;position:relative;}
|
||||
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);}
|
||||
.burger::before{top:-7px;}.burger::after{top:7px;}
|
||||
@media (max-width:920px){
|
||||
.site-nav,.header-cta{display:none;}
|
||||
.nav-toggle{display:inline-flex;}
|
||||
.site-nav.is-open{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;position:absolute;right:var(--space-5);top:66px;width:min(320px,calc(100vw - 2*var(--space-5)));background:#fff;border:1px solid rgba(53,53,53,.12);border-radius:16px;box-shadow:var(--shadow-2);}
|
||||
}
|
||||
|
||||
.hero{position:relative;padding:var(--space-8) 0 var(--space-7);overflow:clip;}
|
||||
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;}
|
||||
.hero-orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.80;}
|
||||
.hero-orb--1{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 55%,#fff),transparent 60%);}
|
||||
.hero-orb--2{width:640px;height:640px;right:-220px;top:-160px;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--accent) 25%,#fff),transparent 65%);}
|
||||
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:180px;}
|
||||
.hero-wave path{fill:color-mix(in srgb,var(--accent) 10%,var(--canvas));}
|
||||
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--space-6);align-items:start;}
|
||||
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:var(--space-5);}
|
||||
.hero-proof{padding:0;margin:0;display:grid;gap:10px;list-style:none;color:var(--ink-80);font-weight:500;}
|
||||
.icon-dot{width:10px;height:10px;border-radius:999px;background:var(--accent);display:inline-block;margin-right:10px;translate:0 -1px;}
|
||||
@media (max-width:920px){.hero{padding-top:var(--space-7);} .hero-grid{grid-template-columns:1fr;}}
|
||||
|
||||
.section{padding:var(--space-7) 0;}
|
||||
.section-head{margin-bottom:var(--space-5);max-width:80ch;}
|
||||
.grid{display:grid;gap:var(--space-4);}
|
||||
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
|
||||
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
|
||||
@media (max-width:920px){.grid-2,.grid-3{grid-template-columns:1fr;}}
|
||||
.mt-md{margin-top:var(--space-5);}
|
||||
.w-100{width:100%;}
|
||||
.inline{display:flex;gap:10px;align-items:center;}
|
||||
.wrap{flex-wrap:wrap;}
|
||||
.stack-sm{display:grid;gap:10px;}
|
||||
.note{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);border:1px dashed rgba(53,53,53,.18);background:rgba(255,255,255,.55);}
|
||||
|
||||
.card{background:rgba(255,255,255,.70);border:1px solid rgba(53,53,53,.10);border-radius:var(--radius-lg);padding:var(--space-5);}
|
||||
.card--elevated{background:#fff;box-shadow:var(--shadow-1);border-color:rgba(53,53,53,.08);}
|
||||
.card--bordered{background:rgba(255,255,255,.55);border-color:rgba(53,53,53,.14);}
|
||||
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
|
||||
.btn:focus{outline:none;box-shadow:var(--focus);}
|
||||
.btn:active{transform:translateY(1px);}
|
||||
.btn--lg{padding:14px 20px;font-size:1.02rem;}
|
||||
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 30%,transparent);}
|
||||
.btn--primary:hover{box-shadow:0 16px 36px color-mix(in srgb,var(--accent) 38%,transparent);transform:translateY(-1px);}
|
||||
.btn--secondary{background:#fff;border-color:rgba(53,53,53,.14);}
|
||||
.btn--secondary:hover{background:rgba(255,255,255,.85);transform:translateY(-1px);}
|
||||
.btn--ghost{background:transparent;border-color:rgba(53,53,53,.18);}
|
||||
.btn--ghost:hover{background:rgba(0,0,0,.03);transform:translateY(-1px);}
|
||||
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
|
||||
|
||||
.badge,.pill,.tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.86rem;}
|
||||
.badge{background:var(--accent);color:#fff;}
|
||||
.badge--soft{background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);}
|
||||
.pill{background:rgba(0,0,0,.06);border:1px solid rgba(53,53,53,.10);}
|
||||
.pill--soft{background:rgba(255,255,255,.65);}
|
||||
.tag{background:rgba(255,255,255,.65);border:1px solid rgba(53,53,53,.10);color:var(--ink-80);}
|
||||
|
||||
.divider{border:0;border-top:1px solid rgba(53,53,53,.10);margin:var(--space-4) 0;}
|
||||
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:0;}
|
||||
.kv div{display:flex;justify-content:space-between;gap:14px;}
|
||||
.kv dt{font-weight:700;color:var(--ink-80);} .kv dd{margin:0;}
|
||||
|
||||
.feature{padding:var(--space-5);border-radius:var(--radius-lg);border:1px solid rgba(53,53,53,.10);background:rgba(255,255,255,.60);}
|
||||
.feature-icon{width:42px;height:42px;border-radius:16px;background:color-mix(in srgb,var(--accent) 18%,#fff);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:12px;}
|
||||
|
||||
.product-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
|
||||
.product-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-4);gap:14px;}
|
||||
.price{font-size:var(--step-2);font-weight:800;}
|
||||
|
||||
.accordion{border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(53,53,53,.12);background:rgba(255,255,255,.55);}
|
||||
.accordion-item{width:100%;text-align:left;background:transparent;border:0;padding:18px;font:inherit;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
|
||||
.accordion-item:focus{outline:none;box-shadow:inset var(--focus);}
|
||||
.accordion-item + .accordion-panel{border-top:1px solid rgba(53,53,53,.10);}
|
||||
.accordion-panel{padding:0 18px 18px;}
|
||||
.accordion-icon{width:16px;height:16px;position:relative;}
|
||||
.accordion-icon::before,.accordion-icon::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink);}
|
||||
.accordion-icon::after{transform:rotate(90deg);transition:transform .12s ease;}
|
||||
.accordion-item[aria-expanded="true"] .accordion-icon::after{transform:rotate(0deg);}
|
||||
|
||||
.cta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);}
|
||||
.cta-title{font-family:var(--font-display);font-size:var(--step-4);line-height:1;margin:0 0 8px;}
|
||||
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
|
||||
@media (max-width:920px){.cta{flex-direction:column;align-items:flex-start;} .cta-actions{justify-content:flex-start;}}
|
||||
|
||||
.site-footer{padding:var(--space-6) 0;border-top:1px solid rgba(53,53,53,.10);}
|
||||
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
|
||||
.footer-links{display:flex;gap:14px;}
|
||||
.footer-links a{text-decoration:none;font-weight:700;}
|
||||
.footer-links a:hover{text-decoration:underline;text-decoration-color:var(--accent);}
|
||||
|
||||
/* Swatches (only for styleguide) */
|
||||
.swatch{border-radius:var(--radius-lg);overflow:hidden;border:1px solid rgba(53,53,53,.10);background:rgba(255,255,255,.60);}
|
||||
.swatch-color{height:90px;}
|
||||
.swatch-meta{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
|
||||
.swatch-title{font-weight:800;}
|
||||
Reference in New Issue
Block a user