diff --git a/css/event_overview.css b/css/event_overview.css index e59ec8a..674600e 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -37,21 +37,7 @@ } .detail-title { - margin: 0; - color: var(--brown); - font-family: "Bagel Fat One", cursive; - font-size: clamp(44px, 6vw, 52px); - line-height: 1.15; - font-weight: 400; -} - -.event-title { - margin: 0 0 var(--space-3); - color: var(--brown); - font-family: "Bagel Fat One", cursive; - font-size: clamp(32px, 4.2vw, 44px); - font-weight: 400; - line-height: 1.15; + margin-bottom: var(--space-4); } .detail-section-title { @@ -120,7 +106,6 @@ .meta-filter { display: block; - min-width: 220px; } .meta-filter span { @@ -185,19 +170,20 @@ .event-card { /* Core card container for every overview event entry. */ background: var(--butter-light); + border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); - padding: var(--space-5) 40px var(--space-4); + padding: var(--space-5) var(--space-6); display: flex; - justify-content: space-between; - align-items: flex-start; + /*justify-content: space-between; + align-items: flex-start;*/ gap: var(--space-6); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } -.event-card:hover { - box-shadow: var(--shadow-interaction); - transform: translateY(-3px); +.event-card:hover { + box-shadow: var(--shadow-interaction); + transform: translateY(-3px); } .event-main { @@ -215,7 +201,7 @@ display: flex; align-items: center; gap: var(--space-4); - margin-bottom: var(--space-4); + margin-bottom: var(--space-0); flex-wrap: wrap; } @@ -236,19 +222,17 @@ align-items: center; gap: var(--space-1); flex-wrap: wrap; - margin-bottom: 12px; } .event-tag { - border: 1px solid var(--tomato); + border: 1.5px solid var(--tomato); color: var(--tomato); border-radius: var(--radius-pill); - padding: 7px 14px; - font-size: 14px; - font-weight: 500; - letter-spacing: var(--ls-ui); + font-family: var(--font-main); + font-weight: 400; + font-size: 1rem; line-height: 1; - text-transform: uppercase; + padding: var(--space-1) var(--space-31); } .event-spec-chip { @@ -270,7 +254,9 @@ .event-side { /* Right-side action area: availability status and optional signup button. */ display: flex; + flex-direction: column; align-items: center; + justify-content: flex-end; gap: var(--space-3); padding-top: 36px; flex-shrink: 0; @@ -279,33 +265,21 @@ .event-spots { color: var(--olive); font-size: 18px; - font-weight: 500; white-space: nowrap; } -.event-spots-full { +.event-spots-full, .detail-spots-pill-full { /* Sold-out visual state, intentionally high-contrast and always filled. */ - border: 2px solid var(--tomato); + border: 1.5px solid var(--tomato); + padding: var(--space-01) var(--space-4); border-radius: var(--radius-pill); color: var(--butter-light); background: var(--tomato); - opacity: 1; - font-weight: 600; - font-size: 14px; - padding: 7px 14px; - line-height: 1; -} - -.btn-primary { - color: #fffde8; - border: none; - border-radius: var(--radius-pill); - padding: 10px 22px; - font-size: 16px; - line-height: 1.3; - cursor: pointer; - white-space: nowrap; - transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; + font-family: var(--font-main); + font-weight: 400; + font-size: 1.25rem; + opacity: 0.6; + cursor: not-allowed; } .btn-primary-register { @@ -407,7 +381,7 @@ .detail-hero { display: grid; - gap: var(--space-1); + margin-bottom: var(--space-6); } .detail-top-row { @@ -430,23 +404,20 @@ .detail-content-grid { /* Two-column detail layout: content stack (left) + gallery (right). */ display: grid; - grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr); + grid-template-columns: 1fr 1fr; grid-template-areas: "side gallery"; - gap: var(--space-3); + gap: var(--space-6); align-items: stretch; } .detail-side-stack { grid-area: side; display: grid; - gap: var(--space-2); + gap: var(--space-3); align-content: start; } -.host-card { - border: 2px solid var(--butter); - box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); -} + .host-header { display: flex; @@ -472,22 +443,16 @@ } .host-role { - padding: 4px 10px; - border: 1px solid var(--olive-light); + border: 1.5px solid var(--olive); + background: var(--olive);; + color: var(--butter-light); border-radius: var(--radius-pill); - background: rgba(107, 107, 5, 0.08); - color: var(--olive); - font-size: 12px; - font-weight: 600; + font-family: var(--font-main); + font-weight: 400; + font-size: 1rem; + line-height: 1; letter-spacing: var(--ls-la); - text-transform: uppercase; -} - -.host-card p { - margin: 0 0 10px; - font-size: 20px; - line-height: 1.3; - color: var(--black); + padding: var(--space-1) var(--space-31); } .detail-gallery { @@ -497,9 +462,9 @@ .detail-gallery-large { /* Editorial mosaic: first image spans two rows, side images stack vertically. */ - grid-template-columns: 1.4fr 1fr; + grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(220px, 1fr)); - gap: 12px; + gap: var(--space-3); min-height: 520px; } @@ -508,9 +473,8 @@ height: 100%; min-height: 220px; object-fit: cover; - border: 2px solid var(--black); - border-radius: 20px; - box-shadow: 0 4px 12px rgba(34, 28, 26, 0.14); + border-radius: var(--radius-md); + box-shadow: var(--shadow-interaction); } .detail-gallery-item { @@ -527,7 +491,7 @@ .detail-gallery-item:hover .detail-gallery-image, .detail-gallery-item:focus-visible .detail-gallery-image { - transform: scale(1.015); + transform: translateY(-3px); } .detail-gallery-large img:first-child { @@ -551,16 +515,18 @@ .detail-lightbox-backdrop { position: absolute; + z-index: 200; inset: 0; - background: rgba(0, 0, 0, 0.75); + background: var(--black); + opacity: 0.6; } .detail-lightbox-content { position: relative; + z-index: 300; margin: 0; max-width: min(96vw, 1100px); max-height: 90vh; - z-index: 1; } .detail-lightbox-image { @@ -568,7 +534,7 @@ width: 100%; max-height: 90vh; object-fit: contain; - border-radius: 16px; + border-radius: var(--radius-md); background: #111; } @@ -585,9 +551,9 @@ } .detail-panel { - background: rgba(255, 255, 255, 0.86); + background: var(--butter-light); border-radius: var(--radius-md); - padding: 14px 16px; + padding: var(--space-4) var(--space-5); } .detail-panel-compact { @@ -597,8 +563,8 @@ .detail-menu-list { margin: 20px; list-style: disc; - font-size: 20px; - line-height: 1.35; + font-size: 1.125rem; + line-height: 1.5; } .detail-participants-head { @@ -682,15 +648,15 @@ align-items: center; gap: var(--space-2); background: var(--white); - backdrop-filter: blur(3px) saturate(140%); - -webkit-backdrop-filter: blur(3px) saturate(140%); + border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); box-shadow: var(--shadow-interaction); - padding: 10px 14px; + padding: var(--space-4) var(--space-5); + margin-top: var(--space-6); position: sticky; - bottom: 18px; - z-index: 1001; + bottom: var(--space-6); + z-index: 100; } .detail-action-summary { @@ -711,9 +677,10 @@ flex-wrap: wrap; } -.detail-action-location { +.detail-action-location, +.detail-action-meta-text { color: var(--olive); - font-size: 17px; + font-size: 1rem; } .detail-action-location img { @@ -721,9 +688,6 @@ height: 16px; } -.detail-action-meta-text { - color: var(--brown); -} .detail-action-summary strong { font-size: 40px; @@ -739,22 +703,23 @@ gap: var(--space-1); } + .detail-spots-pill { - border: 2px solid var(--olive-light); - border-radius: var(--radius-pill); - font-size: 14px; - font-weight: 500; - letter-spacing: var(--ls-ui); - padding: 7px 14px; + border: none; + padding: var(--space-01) var(--space-4); + font-family: var(--font-main); + font-weight: 400; + font-size: 1rem; color: var(--olive); } +/* .detail-spots-pill-full { border-color: var(--tomato); color: var(--tomato); opacity: 1; font-weight: 600; -} +}*/ .detail-action-btn-wrap { display: flex; @@ -895,10 +860,6 @@ padding: 22px 20px 20px; } - .event-title { - font-size: 34px; - } - .event-date-time, .event-location, .event-spots { diff --git a/css/index.css b/css/index.css index 746e8a9..3fd3f51 100644 --- a/css/index.css +++ b/css/index.css @@ -392,7 +392,7 @@ margin-top: 40px; } -.footer__link { +.footer-link { color: var(--black); text-decoration: underline; font-size: 0.8rem; diff --git a/css/login_signup.css b/css/login_signup.css index 632b901..c707264 100644 --- a/css/login_signup.css +++ b/css/login_signup.css @@ -138,26 +138,21 @@ button[type="submit"]:active { /* --- Hints & errors --- */ -.signup-hint, -.login-hint { - text-align: center; + +.link-text { margin-top: var(--space-4); - color: var(--black); - font-size: 0.9rem; + text-align: center; } -.signup-hint a, -.login-hint a { - color: var(--olive); +.link-text a{ + color: var(--blue); text-decoration: none; - font-weight: 600; transition: color 0.3s ease; } -.signup-hint a:hover, -.login-hint a:hover { +.link-text a:hover { + color: var(--blue-dark); text-decoration: underline; - color: var(--olive-dark); } .error-message { @@ -286,7 +281,7 @@ button[type="submit"]:active { margin-top: 40px; } -.footer__link { +.footer_link { color: var(--black); text-decoration: underline; font-size: 0.8rem; diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index d065923..93d1bc5 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -40,6 +40,7 @@ /* Spacing Scale > 1rem = 16px*/ --space-0: 0.25rem; /* 4px */ + --space-01: 0.375rem; /* 6px */ --space-1: 0.5rem; /* 8px */ --space-2: 0.75rem; /* 12px */ --space-3: 1rem; /* 16px */ @@ -86,7 +87,7 @@ h1 { line-height: 120%; letter-spacing: var(--ls-sm); color: var(--brown); - margin-bottom: 2rem; + margin-bottom: var(--space-5); } h2 { @@ -95,7 +96,7 @@ h2 { line-height: 120%; letter-spacing: var(--ls-sm); color: var(--brown); - margin-bottom: 1.5rem; + margin-bottom: var(--space-4); } h3 { @@ -115,13 +116,41 @@ p { margin-bottom: 1rem; } +.p-small { + font-family: var(--font-main); + font-size: 1rem; + line-height: 1.5; + margin-bottom: 0rem; +} + +.link-text a{ + color: var(--blue); + margin-top: var(--space-4); + text-decoration: none; + transition: color 0.3s ease; +} + +.link-text a:hover { + color: var(--blue-dark); + text-decoration: underline; +} + +.link-text-footer{ + color: var(--black); + text-decoration: none; + transition: color 0.3s ease; +} + +.link-text-footer:hover { + text-decoration: underline; +} + .error-message { color: var(--error); font-size: 1rem; } /* Layout */ - .main-content { margin-top: var(--space-8); @@ -145,7 +174,7 @@ p { position: sticky; height: 58px; top: 1rem; - z-index: 1000; + z-index: 100; background: none; padding: 0 1rem; } @@ -245,7 +274,7 @@ p { /* Buttons */ .button-primary { display: inline-block; - padding: 0.375rem 1.5rem; + padding: var(--space-01) var(--space-4); background-color: var(--olive); border: 1.5px solid var(--olive); border-radius: var(--radius-lg); @@ -268,10 +297,11 @@ p { background: transparent; color: var(--olive-dark); opacity: 0.6; - padding: 0.375rem 0 0.375rem 1.5rem; + padding: var(--space-01) 0 var(--space-01) var(--space-4); cursor: not-allowed; } + .button-primary-abmelden { display: inline-block; padding: 0.375rem 1.5rem; @@ -314,6 +344,7 @@ p { border-color: var(--olive-dark); } + .button--outline { background-color: transparent; color: var(--olive); @@ -614,19 +645,10 @@ p { /* Footer */ .footer { display: flex; - justify-content: center; + justify-content: space-between; align-items: center; gap: 1.5rem; - padding: var(--space-3) var(--space-5); - border: none; - margin-top: 2.5rem; -} - -.footer__link { - color: var(--black); - text-decoration: underline; - font-size: 0.8rem; - font-weight: 400; + padding: var(--space-3) var(--space-7); } /* Media Queries (Responsive) */ diff --git a/data/events.json b/data/events.json index c8ce60a..8134836 100644 --- a/data/events.json +++ b/data/events.json @@ -5,9 +5,9 @@ "location": "Luzern", "address": "Pilatusstrasse 18, 6003 Luzern", "date": "11. APR. 2026", - "time": "3:30 UHR", - "category": "DINNER", - "diet": "VEGGIE", + "time": "15:30 UHR", + "category": "Dinner", + "diet": "Vegetarisch", "spots": 6, "host": { "name": "Ferdinando", @@ -45,9 +45,9 @@ "title": "Noche Peruana", "location": "Chur", "address": "Obere Gasse 41, 7000 Chur", - "date": "11. APR. 2026", + "date": "16. Juni 2026", "time": "19:00 UHR", - "category": "DINNER", + "category": "Dinner", "diet": "Omnivore", "spots": 4, "host": { @@ -89,7 +89,7 @@ "address": "Limmatquai 92, 8001 Zürich", "date": "02. MAI. 2026", "time": "12:30 UHR", - "category": "LUNCH", + "category": "Lunch", "diet": "Pescetarisch", "spots": 8, "host": { diff --git a/datenschutz.html b/datenschutz.html index 39eae82..1e08a59 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -93,8 +93,9 @@ diff --git a/event_create.html b/event_create.html index 217d4f3..28d4556 100644 --- a/event_create.html +++ b/event_create.html @@ -437,8 +437,8 @@ diff --git a/event_detail.html b/event_detail.html index 00dc112..4930d30 100644 --- a/event_detail.html +++ b/event_detail.html @@ -47,8 +47,8 @@ diff --git a/event_overview.html b/event_overview.html index c1043ac..a466054 100644 --- a/event_overview.html +++ b/event_overview.html @@ -80,8 +80,8 @@ \ No newline at end of file diff --git a/impressum.html b/impressum.html index 48efecd..3528066 100644 --- a/impressum.html +++ b/impressum.html @@ -67,8 +67,8 @@ diff --git a/index.html b/index.html index a2f986e..a5c9da7 100644 --- a/index.html +++ b/index.html @@ -161,8 +161,8 @@ \ No newline at end of file diff --git a/js/event_detail.js b/js/event_detail.js index 6cc4e83..76c7dd1 100644 --- a/js/event_detail.js +++ b/js/event_detail.js @@ -325,7 +325,7 @@ const shouldRevealAddress = Boolean(event.address) && isAddressVisibleWindow(event) && hasAddressAccess; const addressPanelMarkup = shouldRevealAddress ? ` -
+

Adresse

${event.address}

@@ -363,23 +363,22 @@
-
+
- ${hostInitial} - ${hostName} Host + ${hostName}
${hostMessage.map(paragraph => `

${paragraph}

`).join('')}
-
+

Menu

    ${menuItems.map(item => `
  • ${item}
    • `).join('')}
-
+

Teilnehmer

diff --git a/js/event_overview.js b/js/event_overview.js index d9b9055..d6e2186 100644 --- a/js/event_overview.js +++ b/js/event_overview.js @@ -390,7 +390,7 @@ ${bookedSeats}/${totalCapacity} Gäste
-

${event.title}

+

${event.title}

${event.category} ${event.diet} @@ -398,7 +398,7 @@
- ${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze frei`} + ${isFull ? 'Ausgebucht' : `${freePlaces} Plätze frei`} ${actionMarkup}
`; diff --git a/login.html b/login.html index 5dda876..95de20e 100644 --- a/login.html +++ b/login.html @@ -50,7 +50,7 @@ - \ No newline at end of file diff --git a/my_profil.html b/my_profil.html index 1c46338..65ea7c1 100644 --- a/my_profil.html +++ b/my_profil.html @@ -147,8 +147,8 @@ diff --git a/signup.html b/signup.html index 1e86667..c6a8a47 100644 --- a/signup.html +++ b/signup.html @@ -67,7 +67,7 @@ - \ No newline at end of file