/* ============================================================ STARTER KIT · minimalistisch / modern ------------------------------------------------------------ Ziel: einmal bauen, pro Kunde in 2 Minuten umfärben. Einsatz: WordPress → Design → Customizer → Zusätzliches CSS (oder als eigenes Stylesheet enqueuen) Anwenden in Elementor Free: Widget/Section → Erweitert → "CSS-Klassen" → z. B. sk-btn oder sk-card ------------------------------------------------------------ PRO KUNDE ÄNDERST DU NUR DEN BLOCK "Brand" WEITER UNTEN. ============================================================ */ :root { /* ---- Brand (das hier pro Projekt anpassen) ------------- */ --sk-accent: #1a1a1a; /* Buttons, Links, Betonung */ --sk-accent-ink: #ffffff; /* Text, der AUF dem Akzent liegt */ --sk-ink: #1a1a1a; /* Fließtext */ --sk-paper: #fafafa; /* Seitenhintergrund */ /* ---- Neutrale (selten ändern) ------------------------- */ --sk-muted: #6b6b6b; /* Sekundärtext, Bildunterschriften */ --sk-line: #e6e6e3; /* Haarlinien, Rahmen */ --sk-surface: #ffffff; /* Karten, erhabene Flächen */ /* ---- Typografie (Fonts pro Marke tauschen) ------------ */ --sk-font-display: "Fraunces", Georgia, serif; /* Headlines */ --sk-font-body: "Inter", system-ui, sans-serif; /* Body */ /* ---- Rhythmus & Raum ----------------------------------- */ --sk-container: 1200px; /* max. Inhaltsbreite */ --sk-gutter: clamp(1.25rem, 4vw, 3rem); /* Seitenrand */ --sk-section: clamp(3.5rem, 9vw, 8rem); /* Abstand oben/unten */ /* ---- Details ------------------------------------------- */ --sk-radius: 4px; --sk-ease: cubic-bezier(0.22, 1, 0.36, 1); --sk-dur: 0.4s; --sk-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.07); } /* ============================================================ 1 · TYPOGRAFIE — Klassen auf Überschriften/Text legen Modulare Skala (Verhältnis ~1.25). Fluid, ohne Media Queries. ============================================================ */ .sk-display { /* große Hero-Headline */ font-family: var(--sk-font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; color: var(--sk-ink); } .sk-h1 { font-family: var(--sk-font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; } .sk-h2 { font-family: var(--sk-font-display); font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; } .sk-h3 { font-family: var(--sk-font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; font-weight: 500; } .sk-lead { /* Einleitungs-/Fließtext, etwas größer */ font-family: var(--sk-font-body); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.7; color: var(--sk-muted); max-width: 60ch; /* angenehme Lesebreite */ } .sk-eyebrow { /* kleines Label über einer Headline */ font-family: var(--sk-font-body); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sk-muted); font-weight: 500; } /* ============================================================ 2 · BUTTONS — CSS-Klasse: sk-btn / sk-btn sk-btn--ghost ============================================================ */ .sk-btn, .sk-btn a, a.sk-btn { --_bg: var(--sk-accent); --_fg: var(--sk-accent-ink); display: inline-flex; align-items: center; gap: 0.5em; padding: 0.9em 1.8em; font-family: var(--sk-font-body); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bg); border-radius: var(--sk-radius); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: color var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease); isolation: isolate; } /* Füllung schiebt sich beim Hover von unten rein */ .sk-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sk-ink); transform: translateY(100%); transition: transform var(--sk-dur) var(--sk-ease); } .sk-btn:hover::before { transform: translateY(0); } .sk-btn:hover { color: var(--sk-accent-ink); } /* Outline-Variante */ .sk-btn--ghost { --_bg: transparent; --_fg: var(--sk-ink); border-color: var(--sk-ink); } .sk-btn--ghost:hover { color: var(--sk-paper); } /* ============================================================ 3 · LINKS — animierter Unterstrich (sk-link) ============================================================ */ .sk-link { color: var(--sk-ink); text-decoration: none; background-image: linear-gradient(var(--sk-accent), var(--sk-accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--sk-dur) var(--sk-ease); padding-bottom: 2px; } .sk-link:hover { background-size: 100% 1px; } /* ============================================================ 4 · KARTEN — CSS-Klasse: sk-card Für Leistungen, Team, Blog-Teaser … dezenter Lift beim Hover. ============================================================ */ .sk-card { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); padding: clamp(1.5rem, 3vw, 2.5rem); transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease); height: 100%; } .sk-card:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow); border-color: transparent; } /* ============================================================ 5 · BILD-HOVER — für dein Projekt-Grid (sk-media) Klasse auf das Bild- oder Image-Box-Widget legen. ============================================================ */ .sk-media, .sk-media img { overflow: hidden; border-radius: var(--sk-radius); } .sk-media img { display: block; width: 100%; transition: transform 0.7s var(--sk-ease); will-change: transform; } .sk-media:hover img { transform: scale(1.05); } /* ============================================================ 6 · SECTION-HELFER — einheitliche vertikale Abstände Klasse: sk-section (auf die Elementor-Section) ============================================================ */ .sk-section { padding-top: var(--sk-section); padding-bottom: var(--sk-section); } .sk-section--tight { padding-top: calc(var(--sk-section) * 0.5); padding-bottom: calc(var(--sk-section) * 0.5); } .sk-divider { border: 0; border-top: 1px solid var(--sk-line); margin: 0; } /* ============================================================ 7 · STICKY / SHRINK HEADER (Elementor Free kann das nicht nativ) Section-Klasse: sk-header + das kleine JS-Snippet (README). Wenn dein Header eine oberste Section ist, reicht oft schon sticky. ============================================================ */ .sk-header { position: sticky; top: 0; z-index: 999; background: var(--sk-paper); transition: box-shadow var(--sk-dur) var(--sk-ease), padding var(--sk-dur) var(--sk-ease); } .sk-header.is-stuck { /* wird per JS beim Scrollen gesetzt */ box-shadow: 0 1px 0 var(--sk-line); padding-top: 0.25rem; padding-bottom: 0.25rem; } /* ============================================================ 8 · SCROLL-REVEAL — sanftes Einblenden (sk-reveal) Braucht das kleine JS-Snippet aus der README. ============================================================ */ .sk-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--sk-ease), transform 0.7s var(--sk-ease); } .sk-reveal.is-in { opacity: 1; transform: none; } /* ============================================================ 9 · BARRIEREFREIHEIT & MOTION ============================================================ */ :where(a, button, .sk-btn):focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .sk-reveal { opacity: 1; transform: none; } } /* ============================================================ FOOTER-FEINSCHLIFF (HTML) ============================================================ */ .sk-footer-mark{font-family:var(--sk-font-display);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.75rem} .sk-foot-desc{color:var(--sk-muted);font-size:.95rem;max-width:34ch} .sk-foot-links a{display:inline-block;margin-bottom:.55rem} .sk-foot-base{color:var(--sk-muted);font-size:.82rem} /* ============================================================ ELEMENTOR-BRIDGE ------------------------------------------------------------ Elementor setzt CSS-Klassen auf den äußeren Widget-Wrapper, Farbe/Font/Größe aber auf das innere Element. Diese Regeln zielen dorthin und setzen sich mit !important durch. (Für handgeschriebenes HTML nicht nötig, stört aber nicht.) ============================================================ */ /* ---- Headings ---- */ .sk-display .elementor-heading-title{font-family:var(--sk-font-display)!important;font-size:clamp(2.75rem,7vw,5.5rem)!important;line-height:1.02;letter-spacing:-.025em;font-weight:500;color:var(--sk-ink)!important} .sk-h1 .elementor-heading-title{font-family:var(--sk-font-display)!important;font-size:clamp(2rem,4.5vw,3.25rem)!important;line-height:1.08;letter-spacing:-.02em;font-weight:500;color:var(--sk-ink)!important} .sk-h2 .elementor-heading-title{font-family:var(--sk-font-display)!important;font-size:clamp(1.7rem,3.2vw,2.4rem)!important;line-height:1.12;letter-spacing:-.015em;font-weight:500;color:var(--sk-ink)!important} .sk-h3 .elementor-heading-title{font-family:var(--sk-font-display)!important;font-size:clamp(1.2rem,2vw,1.45rem)!important;line-height:1.25;font-weight:500;color:var(--sk-ink)!important} /* ---- Eyebrow ---- */ .sk-eyebrow .elementor-heading-title{font-family:var(--sk-font-body)!important;font-size:.78rem!important;letter-spacing:.16em;text-transform:uppercase;color:var(--sk-muted)!important;font-weight:600} /* ---- Lead / Fließtext ---- */ .sk-lead .elementor-widget-container{font-size:clamp(1.1rem,1.4vw,1.3rem)!important;line-height:1.65;color:var(--sk-muted)!important} /* ---- Links im Text-Editor ---- */ .elementor a.sk-link{color:var(--sk-ink)!important;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--sk-dur) var(--sk-ease)} .elementor a.sk-link:hover{background-size:100% 1px} /* ---- Buttons ---- */ .sk-btn .elementor-button{background:var(--sk-accent)!important;color:var(--sk-accent-ink)!important;border:1px solid var(--sk-accent);border-radius:var(--sk-radius);padding:.95em 1.8em;font-weight:500;letter-spacing:.01em;transition:background var(--sk-dur) var(--sk-ease),transform var(--sk-dur) var(--sk-ease)} .sk-btn .elementor-button:hover{background:#3a3733!important;transform:translateY(-2px)} .sk-btn--ghost .elementor-button{background:transparent!important;color:var(--sk-ink)!important;border-color:var(--sk-ink)} .sk-btn--ghost .elementor-button:hover{background:var(--sk-ink)!important;color:var(--sk-paper)!important} /* ---- Footer (Elementor-Ziel) ---- */ .sk-footer-mark .elementor-heading-title{font-family:var(--sk-font-display)!important;font-size:1.5rem!important;font-weight:600;letter-spacing:-.01em} .sk-foot-desc .elementor-widget-container{color:var(--sk-muted)!important;font-size:.95rem!important;max-width:34ch} .sk-foot-base .elementor-widget-container{color:var(--sk-muted)!important;font-size:.82rem!important}