tfw
1717057e56
Introduced mobile and medium responsiveness in stylesheets for better layout on smaller screens. Adjusted FAQ script to properly remove duplicate event listeners and ensure functionality remains smooth on initialization.
580 lines
10 KiB
SCSS
580 lines
10 KiB
SCSS
//Fontawesome importieren
|
|
|
|
@import "fontawesome/fontawesome";
|
|
@import "fontawesome/regular";
|
|
@import "fontawesome/solid";
|
|
@import "fontawesome/brands";
|
|
@import "fontawesome/light";
|
|
@import "fontawesome/sharp-light";
|
|
@import "fontawesome/sharp-thin";
|
|
|
|
// Module importieren
|
|
@import "modules/consent";
|
|
@import 'modules/team';
|
|
@import "modules/header";
|
|
@import 'modules/footer';
|
|
@import 'modules/home';
|
|
@import 'modules/testimonials';
|
|
@import "modules/faq";
|
|
|
|
//Responsive Design
|
|
|
|
@import "responsive/medium";
|
|
@import "responsive/mobile";
|
|
|
|
@mixin transition {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
// satware.ai CI-Anpassungen
|
|
|
|
/* assistant-300 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 300;
|
|
src: url('../assets/fonts/assistant-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
url('../assets/fonts/assistant-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
|
}
|
|
|
|
/* assistant-regular - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('../assets/fonts/assistant-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
url('../assets/fonts/assistant-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
|
}
|
|
|
|
/* assistant-700 - latin */
|
|
@font-face {
|
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
|
font-family: 'Assistant';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
src: url('../assets/fonts/assistant-v19-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
|
url('../assets/fonts/assistant-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
|
}
|
|
|
|
html {
|
|
|
|
font-size: 100% !important;
|
|
|
|
}
|
|
|
|
// Schriftart auf "Assistant" setzen
|
|
:root {
|
|
--md-text-font: "Assistant";
|
|
--md-code-font: "Assistant";
|
|
}
|
|
|
|
// Dark Theme optimieren (schwarzer Hintergrund nach CI)
|
|
[data-md-color-scheme="slate"] {
|
|
--md-default-bg-color: #000000;
|
|
--md-default-fg-color: #ffffff;
|
|
--md-default-fg-color--light: rgba(255, 255, 255, 0.8);
|
|
--md-default-fg-color--lighter: rgba(255, 255, 255, 0.54);
|
|
--md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
|
|
|
|
// Primär- und Akzentfarben gemäß satware CI
|
|
--md-primary-fg-color: #521370; // Primärfarbe: satware Violett
|
|
--md-primary-fg-color--light: #7e3a9e; // Helle Variante
|
|
--md-primary-fg-color--dark: #3c0e52; // Dunkle Variante
|
|
--md-accent-fg-color: #8a44bd; // Akzentfarbe: Helleres Violett
|
|
|
|
// Link-Farbe anpassen
|
|
--md-typeset-a-color: #9d65cf; // Helleres Violett für Links
|
|
}
|
|
|
|
.md-search__scrollwrap {
|
|
tabindex: 0; /* Macht das Element fokussierbar */
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: var(--md-primary-fg-color);;
|
|
color: #fff;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--md-primary-fg-color);;
|
|
color: #fff;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
::-webkit-scrollbar-track {
|
|
background: #d0d0d0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Handle */
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--md-primary-fg-color);
|
|
}
|
|
|
|
|
|
body {
|
|
font-weight: 300;
|
|
font-size: 1.3rem;
|
|
line-height: 2rem;
|
|
|
|
.md-typeset,
|
|
.md-nav {
|
|
font-size: 1.3rem;
|
|
line-height: 2rem;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #fff;
|
|
|
|
a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 12px;
|
|
width: 85px;
|
|
margin-top: 1.3rem;
|
|
margin-bottom: -0.2rem;
|
|
}
|
|
}
|
|
|
|
.md-typeset ul {
|
|
list-style-type: none;
|
|
padding: 0 0 0 2rem;
|
|
|
|
li {
|
|
&:before {
|
|
|
|
content: "\f00c";
|
|
font-family: "Font Awesome 6 Pro";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
padding-right: 0.5rem;
|
|
color: var(--md-primary-fg-color);
|
|
margin-left: -1.5rem;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
[dir=ltr] .md-typeset ul li {
|
|
margin-left: -1em;
|
|
//margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.md-typeset h1,
|
|
h1 {
|
|
color: #fff;
|
|
margin-bottom: 1.75rem;
|
|
text-align: left;
|
|
font-size: 8rem;
|
|
line-height: 1.1;
|
|
|
|
a.headerlink {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.md-typeset h2,
|
|
h2 {
|
|
line-height: 3rem;
|
|
font-size: 2.7rem;
|
|
|
|
&:after {
|
|
margin-top: .6rem;
|
|
height: 7px;
|
|
width: 50px;
|
|
|
|
}
|
|
}
|
|
|
|
.md-typeset h3,
|
|
h3 {
|
|
|
|
font-size: 2.1rem;
|
|
|
|
&:after {
|
|
margin-top: 5px;
|
|
margin-bottom: 1rem;
|
|
height: 4px;
|
|
width: 33px;
|
|
}
|
|
}
|
|
|
|
.md-search-result .md-typeset {
|
|
color: #fff;
|
|
}
|
|
|
|
.md-tabs {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.md-tabs__item {
|
|
|
|
&:after {
|
|
opacity: 0;
|
|
transition: .3s all ease;
|
|
}
|
|
|
|
&:hover {
|
|
transition: .3s all ease;
|
|
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 4px;
|
|
width: 22px;
|
|
margin-top: 6px;
|
|
margin-bottom: -0.2rem;
|
|
opacity: .7;
|
|
transition: .3s all ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.md-tabs__item--active {
|
|
|
|
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 4px;
|
|
width: 22px;
|
|
margin-top: 6px;
|
|
margin-bottom: -0.2rem;
|
|
opacity: 1;
|
|
transition: .3s all ease;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.md-tabs__list {
|
|
height: 4rem;
|
|
}
|
|
|
|
.md-tabs__link {
|
|
opacity: 1;
|
|
font-size: 1.2rem;
|
|
|
|
}
|
|
|
|
.md-search__form {
|
|
input::placeholder {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
|
|
|
|
.md-search-result__meta {
|
|
background-color: #000;
|
|
}
|
|
|
|
.md-source-file {
|
|
display: none;
|
|
}
|
|
|
|
.md-grid {
|
|
max-width: 1080px;
|
|
}
|
|
|
|
.satag--padding-container {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
a.headerlink {
|
|
color: var(--md-primary-fg-color) !important;
|
|
}
|
|
|
|
.satag-trademark {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.md-header,
|
|
.md-tabs {
|
|
background-color: #000;
|
|
}
|
|
|
|
.md-tabs__item {
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.md-search__input {
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-search-result__list {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.md-social__link {
|
|
display: inline-block;
|
|
height: 1rem;
|
|
text-align: center;
|
|
width: 1rem;
|
|
}
|
|
|
|
.md-search-result__meta {
|
|
text-transform: uppercase;
|
|
font-size: 0.7rem;
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.satag--webinar-form-container {
|
|
#nextcloud-form {
|
|
width: 100%;
|
|
border: none;
|
|
min-height: 3500px;
|
|
transition: height .3s ease;
|
|
color-scheme: dark;
|
|
|
|
.ng-csp {
|
|
background-color: #000 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Footer Navigation für zusätzliche Links
|
|
.md-footer-meta .md-footer-meta__inner {
|
|
.md-footer-copyright {
|
|
width: auto;
|
|
margin: auto 1rem 0.5rem 0;
|
|
}
|
|
}
|
|
|
|
.md-content__inner {
|
|
margin: 0 0 1.2rem;
|
|
padding-top: .6rem;
|
|
}
|
|
|
|
.md-footer-meta.md-typeset a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.md-footer-meta {
|
|
background-color: #000;
|
|
}
|
|
|
|
|
|
// Füge zusätzliche Navigation im Footer hinzu
|
|
.md-footer-custom-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 0;
|
|
text-transform: uppercase;
|
|
|
|
a {
|
|
color: var(--md-footer-fg-color);
|
|
margin-right: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:hover {
|
|
color: var(--md-footer-fg-color--light);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Verbessere Lesbarkeit von Code auf dunklem Hintergrund
|
|
.md-typeset code {
|
|
background-color: rgba(255, 255, 255, 0.07);
|
|
color: #e2e2e2;
|
|
}
|
|
|
|
.md-nav__container > .md-nav__link:first-child {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.md-nav__title {
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-search__form {
|
|
&:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.md-footer__title {
|
|
|
|
font-size: 100%;
|
|
}
|
|
|
|
.md-footer__direction {
|
|
font-size: 100%;
|
|
opacity: .7;
|
|
}
|
|
|
|
.md-top {
|
|
border-radius: 0;
|
|
top: 4vh !important;
|
|
font-size: 100%;
|
|
padding: 0.8rem 1rem;
|
|
|
|
svg {
|
|
vertical-align: -.15rem;
|
|
}
|
|
}
|
|
|
|
// Buttons im CI-Design
|
|
.md-button {
|
|
|
|
border-radius: 0 !important;
|
|
color: #fff !important;
|
|
border-color: var(--md-primary-fg-color) !important;
|
|
border-width: .15rem !important;
|
|
|
|
padding: 1.7em 2.9em !important;
|
|
letter-spacing: 0.2rem !important;
|
|
font-weight: 400 !important;
|
|
|
|
@include transition;
|
|
|
|
&:hover {
|
|
border-color: #8a44bd !important;
|
|
transform: translateY(8px);
|
|
@include transition;
|
|
}
|
|
|
|
|
|
&.md-button--primary {
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-fg-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--md-primary-fg-color--light);
|
|
border-color: var(--md-primary-fg-color--light);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Karten-Styling für die Startseite
|
|
.grid.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
|
|
> * {
|
|
border-radius: 6px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 1.5rem;
|
|
background-color: rgba(82, 19, 112, 0.05);
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-3px);
|
|
background-color: rgba(82, 19, 112, 0.1);
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0.5rem;
|
|
|
|
color: var(--md-primary-fg-color);
|
|
}
|
|
|
|
.icon-card {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
// Button-Styling
|
|
.md-button {
|
|
border-radius: 4px;
|
|
transition: all 0.2s ease;
|
|
font-size: 1.1rem;
|
|
border: .15rem solid;
|
|
|
|
&.md-button--primary {
|
|
background-color: var(--md-primary-fg-color);
|
|
border-color: var(--md-primary-fg-color);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: var(--md-primary-fg-color--light);
|
|
border-color: var(--md-primary-fg-color--light) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Header-Anpassungen
|
|
|
|
// Seitentitel ausblenden
|
|
.md-header__title {
|
|
.md-header__topic {
|
|
// Der erste Eintrag (Seitenname) wird ausgeblendet
|
|
&:first-child {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Logo vergrößern
|
|
.md-header__button.md-logo {
|
|
padding: 0.2rem;
|
|
padding-left: 0;
|
|
|
|
|
|
img, svg {
|
|
width: 325px; // Größeres Logo (Standardwert ist 40px)
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// Navigationsleiste anpassen
|
|
.md-header {
|
|
height: auto;
|
|
|
|
&__inner {
|
|
padding: 0.5rem;
|
|
max-width: 98%;
|
|
}
|
|
}
|