From 2ed6ca4179e8bc623c669eabdf29974f971c6218 Mon Sep 17 00:00:00 2001 From: Sven Date: Tue, 24 Feb 2026 21:03:24 +0100 Subject: [PATCH] Dateien nach "as-styleguide" hochladen --- as-styleguide/README.md | 11 ++ as-styleguide/index.html | 317 +++++++++++++++++++++++++++++++++++++++ as-styleguide/script.js | 47 ++++++ as-styleguide/styles.css | 153 +++++++++++++++++++ 4 files changed, 528 insertions(+) create mode 100644 as-styleguide/README.md create mode 100644 as-styleguide/index.html create mode 100644 as-styleguide/script.js create mode 100644 as-styleguide/styles.css diff --git a/as-styleguide/README.md b/as-styleguide/README.md new file mode 100644 index 0000000..81df264 --- /dev/null +++ b/as-styleguide/README.md @@ -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 diff --git a/as-styleguide/index.html b/as-styleguide/index.html new file mode 100644 index 0000000..dad2de0 --- /dev/null +++ b/as-styleguide/index.html @@ -0,0 +1,317 @@ + + + + + + AS Styleguide – Coaching & Beratung + + + + + + + + + +
+
+ + + + + + + + +
+ Kontakt + Termin anfragen +
+
+
+ +
+
+ + +
+
+

Bewerbercoaching · Selbstpräsentation · Profil-Schärfung

+

+ Souverän auftreten.
+ Wirkung erzielen. +

+

+ Für Fachkräfte in KMU, die im Bewerbungsprozess, im Kundentermin oder intern sichtbarer werden wollen – + klar, professionell und ohne Show. +

+ +
+ Kostenloses Erstgespräch + Workbook & Minikurse +
+ +
    +
  • CV-Check & Profil-Optimierung
    • +
  • Interview-Training (realistische Simulation)
    • +
  • Storytelling & Argumentationslinien
    • +
+
+ +
+
+
Styleguide
+
WP-ready
+
+ +
+

Schnellstart-Komponenten

+

Buttons, Cards, Formulare, Grids, Sektionen – bereits so aufgebaut, dass du daraus ein WP-Template ableiten kannst.

+ +
+ Zu den Komponenten + Zu den Layouts +
+ +
+ +
+
Primärfarbe
#EB825E
+
Text
#353535
+
Background
#FAF7F2
+
Fonts
HaveHeartOne + Gilroy
+
+
+
+
+
+ +
+
+
+

Design Tokens

+

Farben, Radius, Schatten & Spacing als CSS-Variablen – damit das später in WP sauber skalierbar ist.

+
+ +
+
+
+
Accent
#EB825E
+
+ +
+
+
Ink
#353535
+
+ +
+
+
Canvas
#FAF7F2
+
+
+ +
+ Fokus-Ring: über --focus definiert (accent + transparency). Buttons/Inputs sind damit sofort „keyboard-friendly“. +
+
+
+ +
+
+
+

Typografie

+

HaveHeartOne nur für große, prägnante Statements. Gilroy für Struktur, UI und Fließtext.

+
+ +
+
+

Display / Hero (HaveHeartOne)

+

Souverän auftreten. Wirkung erzielen.

+

Regel: HaveHeartOne nur H1 + evtl. emotionales H2. Keine Navigation, keine Forms, keine Tabellen.

+
+ +
+

Body / UI (Gilroy)

+

Klare Struktur. Ruhige Abstände. Seriöse UI. Das ist die Basis für WP-Templates und WooCommerce.

+
+ Regular + Medium + SemiBold + Bold +
+
+
+
+
+ +
+
+
+

Komponenten

+

Basis-Bausteine für WP (Blocks) und später WooCommerce.

+
+ +
+
+

Buttons

+
+ + + + + +
+
+ +
+

Badges / Pills

+
+ Neu + PDF + 1:1 Coaching + KMU Workshop + WP + WooCommerce +
+
+ +
+

Card Variationen

+
+
+ Elevated +

Für Hero/CTA, Pricing, wichtige Kacheln.

+
+
+ Bordered +

Für ruhige Content-Listen, FAQs, Hinweise.

+
+
+
+
+
+
+ +
+
+
+

Layouts & Content Grids

+

Wiederverwendbare Raster: 2/3 Spalten, Feature-Grids, Split-Layouts – WP Block-kompatibel.

+
+ +
+

Feature Grid (3 Spalten)

+
+

Lebenslauf, der wirkt

Struktur, Story, Ergebnisse – ohne Buzzwords.

+

Interview-Simulation

Realistisch, ruhig, mit Feedback auf Wirkung.

+

Selbstpräsentation

Ein klarer Pitch für Meetings, Kunden, Bewerbungen.

+
+
+
+
+ +
+
+
+

Website-Sektionen

+

Beispiele für WooCommerce-Produktkacheln, FAQ und CTA.

+
+ +
+
+

Digitale Miniprodukte

+

WooCommerce-ready: PDF, Workbook, Minikurs (Video), Bundle.

+
+ +
+
+
PDF20–30 Min
+

CV-Checkliste

+

Die wichtigsten Hebel, um deinen Lebenslauf sofort professioneller wirken zu lassen.

+
29 €
Kaufen
+
+ +
+
Workbook90 Min
+

Selbstpräsentation in 7 Schritten

+

Struktur + Beispiele + Übungen, die du sofort anwenden kannst.

+
49 €
Kaufen
+
+ +
+
Videokurs2–3 h
+

Interviewtraining kompakt

+

Antworten strukturieren, Wirkung steuern, ruhig bleiben.

+
149 €
Kaufen
+
+
+
+ +
+
+

FAQ

+

Accordion via JS.

+
+ +
+ + +
+
+ +
+
+
+

Bereit für ein Profil, das wirkt?

+

Kurzes Erstgespräch, dann ein klarer Plan (kein BlaBla).

+
+
+ Termin anfragen + Erst mal Workbook +
+
+
+ +
+
+ +
+
+
+

Kontakt

+

Platzhalter – später in WP als Formular-Block.

+
+
+
+
+ + + + + + diff --git a/as-styleguide/script.js b/as-styleguide/script.js new file mode 100644 index 0000000..263ca93 --- /dev/null +++ b/as-styleguide/script.js @@ -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()); +})(); \ No newline at end of file diff --git a/as-styleguide/styles.css b/as-styleguide/styles.css new file mode 100644 index 0000000..02eea5e --- /dev/null +++ b/as-styleguide/styles.css @@ -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;}