559 lines
9.9 KiB
CSS
559 lines
9.9 KiB
CSS
/* ===========================================
|
|
INDEX.CSS — Styles specific to index.html
|
|
Global styles (reset, variables, body, nav,
|
|
brand, typography) are in stylesheet_global.css
|
|
=========================================== */
|
|
|
|
|
|
/* --- Navigation overrides (index-specific) --- */
|
|
.nav-link {
|
|
border: 2px solid var(--olive-light);
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.nav-link.active,
|
|
.nav-link:focus-visible {
|
|
background: var(--olive);
|
|
color: var(--white);
|
|
border-color: var(--olive);
|
|
}
|
|
|
|
.nav-link--login {
|
|
background: var(--olive);
|
|
color: var(--white);
|
|
border-color: var(--olive);
|
|
}
|
|
|
|
.nav-link--login:hover,
|
|
.nav-link--login:focus-visible {
|
|
background: var(--white);
|
|
color: var(--olive);
|
|
border-color: var(--olive);
|
|
}
|
|
|
|
|
|
/* --- Page layout --- */
|
|
|
|
.container {
|
|
width: min(100% - 4rem, 1200px);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
/* --- Hero section --- */
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.hero__right {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.image-card {
|
|
width: 100%;
|
|
max-width: 436px;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.hero-image {
|
|
width: 100%;
|
|
max-width: 436px;
|
|
max-height: 510px;
|
|
height: auto;
|
|
border-radius: var(--radius-lg);
|
|
object-fit: cover;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.hero__right {
|
|
order: -1;
|
|
}
|
|
|
|
.hero-image {
|
|
min-height: 320px;
|
|
}
|
|
}
|
|
|
|
|
|
/* --- "So funktioniert's" steps --- */
|
|
|
|
.how-it-works {
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.how-it-works__header {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.how-it-works__header h2 {
|
|
font-size: 2rem;
|
|
margin: 0;
|
|
color: var(--black);
|
|
}
|
|
|
|
.how-it-works__steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.how-step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--space-40);
|
|
background: var(--butter-light);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.how-step-number-numbered {
|
|
position: relative;
|
|
}
|
|
|
|
.how-step_corner-number {
|
|
position: absolute;
|
|
color: var(--butter-light);
|
|
background: var(--tomato);
|
|
border-radius: var(--radius-lg);
|
|
top: var(--space-20);
|
|
left: var(--space-20);
|
|
width: 44px;
|
|
height: 44px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-family: 'Bagel Fat One';
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: var(--butter-light);
|
|
}
|
|
|
|
.how-step_corner-number--brown {
|
|
color: var(--brown);
|
|
}
|
|
|
|
.how-step_icon {
|
|
font-size: 3.5rem;
|
|
color: var(--brown);
|
|
margin: var(--space-4) 0;
|
|
}
|
|
|
|
.how-step__png {
|
|
width: 192px;
|
|
height: 192px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.how-step__png--brown {
|
|
filter: brightness(0) saturate(100%) invert(18%) sepia(56%) saturate(2800%) hue-rotate(16deg) brightness(92%) contrast(95%);
|
|
}
|
|
|
|
.how-step_text {
|
|
margin-bottom: var(--space-4);
|
|
text-align: center;
|
|
}
|
|
|
|
.text-left{
|
|
text-align: left;
|
|
}
|
|
.how-step__footer-pill {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.how-step__footer-badges {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
justify-content: center;
|
|
}
|
|
|
|
.how-step__footer-banner {
|
|
width: 100%;
|
|
padding: 10px 16px;
|
|
background: var(--butter);
|
|
border-radius: var(--radius-sm);
|
|
text-align: center;
|
|
font-family: 'Bagel Fat One', sans-serif;
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.12rem;
|
|
color: var(--brown);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.how-it-works__steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
|
|
/* --- Carousel gallery --- */
|
|
|
|
.gallery__carousel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gallery__track {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.gallery__item {
|
|
flex: 0 0 calc((100% - 40px) / 3);
|
|
min-width: calc((100% - 40px) / 3);
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
background: var(--white);
|
|
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
|
|
aspect-ratio: 2 / 3;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gallery__item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* =========================================
|
|
NEW INSTAGRAM HOVER STYLES START HERE
|
|
========================================= */
|
|
|
|
.ig-post-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%; /* Ensures it fills the existing gallery__item */
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ig-post-wrapper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.ig-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 24px;
|
|
color: #ffffff;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.ig-post-wrapper:hover .ig-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ig-overlay span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.gallery__arrow {
|
|
position: absolute;
|
|
display: grid;
|
|
top: 45%;
|
|
width: 44px;
|
|
height: 44px;
|
|
border: 1.5px solid var(--butter-light);
|
|
background: var(--butter-light);
|
|
border-radius: var(--radius-lg);
|
|
font-family: var(--font-main);
|
|
display: none;
|
|
font-weight: 400;
|
|
font-size: 1.25rem;
|
|
place-items: center;
|
|
z-index: 2;
|
|
color: var(--olive);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
|
|
.gallery__arrow:hover,
|
|
.gallery__arrow:focus-visible {
|
|
border: 1.5px solid var(--butter);
|
|
background: var(--butter);
|
|
}
|
|
|
|
.gallery__arrow--prev {
|
|
left: var(--space-4);
|
|
}
|
|
|
|
.gallery__arrow--next {
|
|
right: var(--space-4);
|
|
}
|
|
|
|
|
|
/* --- Carousel dot indicators --- */
|
|
|
|
.gallery_dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 12px 0 8px;
|
|
}
|
|
|
|
.gallery_dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--olive);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: background 0.25s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.gallery_dot:hover,
|
|
.gallery_dot--active {
|
|
background: var(--olive);;
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.gallery_dot:focus-visible {
|
|
outline: 2px solid var(--olive);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.gallery__track {
|
|
gap: 16px;
|
|
}
|
|
|
|
.gallery__item {
|
|
flex: 0 0 100%;
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* --- Gallery info (Instagram link) --- */
|
|
|
|
.gallery__info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.gallery__icon--instagram {
|
|
height: 32px;
|
|
width: 32px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
background: none;
|
|
filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
|
|
}
|
|
|
|
.gallery__icon--invite {
|
|
height: 56px;
|
|
width: 56px;
|
|
object-fit: contain;
|
|
margin-left: 0;
|
|
transform: translate(-4%, -1%);
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* --- CTA button --- */
|
|
|
|
.btn {
|
|
border: none;
|
|
background: var(--olive);
|
|
color: var(--white);
|
|
padding: 12px 22px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.95rem;
|
|
transition: background-color 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: var(--olive-dark);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
|
|
/* --- Footer --- */
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 24px;
|
|
padding: 16px 24px;
|
|
border: none;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.footer-link {
|
|
color: var(--black);
|
|
text-decoration: underline;
|
|
font-size: 0.8rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
|
|
/* --- FAQ Section: Akkordion --- */
|
|
|
|
.faq-section {
|
|
padding: var(--space-8) var(--space-4);
|
|
margin: var(--space-8) 0 var(--space-5);
|
|
}
|
|
|
|
.faq-section h2 {
|
|
text-align: center;
|
|
margin-bottom: var(--space-5);
|
|
color: var(--brown);
|
|
}
|
|
|
|
.faq-accordion {
|
|
width: 100%;
|
|
max-width: 56rem;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.faq-item {
|
|
border: 1.5px solid var(--olive-light);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
background: var(--white);
|
|
transition: background-color 0.2s ease, box-shadow var(--shadow-interaction);
|
|
}
|
|
|
|
.faq-item:hover {
|
|
box-shadow: var(--shadow-interaction);
|
|
}
|
|
|
|
.faq-trigger {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: var(--space-3) var(--space-4);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
color: var(--olive);
|
|
text-align: left;
|
|
transition: background-color 0.2s ease;
|
|
font-family: var(--font-main);
|
|
}
|
|
|
|
.faq-trigger:hover {
|
|
background-color: var(--butter-light);
|
|
}
|
|
|
|
.faq-trigger:focus-visible {
|
|
outline: 2px solid var(--olive);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.faq-title {
|
|
flex: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.faq-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
font-size: 1.5rem;
|
|
font-weight: 300;
|
|
color: var(--olive);
|
|
transition: transform 0.3s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.faq-trigger[aria-expanded="true"] .faq-icon {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.faq-content {
|
|
padding: 0 var(--space-4);
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease, padding 0.3s ease;
|
|
font-size: 1.125rem;
|
|
line-height: 1.7;
|
|
color: var(--black);
|
|
font-family: var(--font-main);
|
|
}
|
|
|
|
.faq-content p {
|
|
margin: 0;
|
|
padding: var(--space-3) 0;
|
|
}
|
|
|
|
.faq-trigger[aria-expanded="true"] + .faq-content {
|
|
display: block;
|
|
max-height: 500px;
|
|
padding: var(--space-3) var(--space-4);
|
|
}
|
|
|
|
|
|
/* --- Responsive: FAQ Section --- */
|
|
|
|
@media (max-width: 768px) {
|
|
.faq-section {
|
|
padding: var(--space-40) var(--space-4);
|
|
margin: var(--space-40) 0 var(--space-5);
|
|
}
|
|
|
|
.faq-trigger {
|
|
padding: var(--space-2) var(--space-3);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.faq-content {
|
|
padding: 0 var(--space-3);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.faq-content p {
|
|
padding: var(--space-2) 0;
|
|
}
|
|
} |