diff --git a/css/event_create.css b/css/event_create.css index 0f40413..67b364d 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -36,7 +36,7 @@ .submission-success-title-row { display: flex; align-items: center; - gap: var(--space-5); + gap: var(--space-32); width: 100%; } @@ -93,7 +93,6 @@ .form-field, fieldset { display: grid; - gap: var(--space-24); } .step-copy { @@ -102,7 +101,7 @@ fieldset { } .step-fields { - gap: var(--space-5); + gap: var(--space-32); } .form-field, @@ -110,7 +109,6 @@ fieldset { margin: 0; padding: 0; border: 0; - gap: var(--space-16); } @@ -141,9 +139,9 @@ fieldset { } .field-hint { - margin: -0.25rem 0 0; - color: var(--color-muted); - font-size: 0.95rem; + color: var(--olive); + font-size: 1rem; + margin-bottom: var(--space-8); } input[type="text"], @@ -184,7 +182,7 @@ input[type="date"]:hover, input[type="time"]:hover, input[type="number"]:hover, textarea:hover { - border-color: rgba(102, 52, 13, 0.28); + border: 2px solid var(--olive); } input[type="text"]:focus, @@ -192,7 +190,7 @@ input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus, textarea:focus { - border-color: var(--olive-dark); + border: 2px solid var(--olive); } .field-invalid { @@ -224,13 +222,12 @@ textarea:focus { justify-items: center; align-content: center; gap: var(--space-12); - color: var(--brown); + color: var(--black); } .option-card__icon { - color: var(--brown); - font-size: 1.35rem; - line-height: 1; + color: var(--black); + font-size: 1.25rem; pointer-events: none; } @@ -246,38 +243,25 @@ textarea:focus { } .option-grid--tomato-choices .option-card:hover, -.option-grid--tomato-choices .option-card:has(input:focus-visible) { - border-color: var(--tomato); - background: var(--tomato); - color: var(--butter-light); -} - +.option-grid--tomato-choices .option-card:has(input:focus-visible), .option-grid--tomato-choices .option-card:has(input:checked) { - border-color: var(--tomato); - background: var(--tomato); - color: var(--butter-light); -} - -.option-grid--icon-choices .option-card--with-icon:hover .option-card__icon, -.option-grid--icon-choices .option-card--with-icon:has(input:focus-visible) .option-card__icon, -.option-grid--icon-choices .option-card--with-icon:has(input:checked) .option-card__icon { - color: var(--butter-light); + background: var(--olive-light); } .option-grid--icon-choices .option-card--with-icon:has(input:disabled) { - opacity: 0.45; + opacity: 0.6; } .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover { border-color: var(--olive-light); background: var(--butter-light); - color: var(--brown); + color: var(--black); box-shadow: none; transform: none; } .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon { - color: var(--brown); + color: var(--blaxk); } .option-card input { @@ -294,21 +278,16 @@ textarea:focus { .option-card--invalid { border-color: var(--error) !important; - box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14); + box-shadow: var(--shadow-error); } .guest-count-icon { - display: flex; - justify-content: center; - width: 100%; - color: var(--brown); - font-size: 3rem; - line-height: 1; -} - -.guest-count-icon::before { display: block; - transform: translateX(1.1rem); + text-align: center; + width: 100%; + color: var(--black); + font-size: 1.5rem; + line-height: 1; } .counter { @@ -319,7 +298,7 @@ textarea:focus { .counter-value-group { display: grid; - justify-items: stretch; + justify-items: center; row-gap: var(--space-8); width: 6rem; } @@ -343,7 +322,7 @@ textarea:focus { .review-card--success { display: grid; - gap: var(--space-5); + gap: var(--space-32); padding: var(--space-16) 0 0; border: 0; border-radius: 0; @@ -353,45 +332,33 @@ textarea:focus { .review-list { display: grid; - gap: var(--space-24); + gap: var(--space-12); margin: 0; } .review-item { display: grid; - gap: var(--space-12); padding: 1rem 1.1rem; - border: 1px solid var(--input-border-soft); + border: 1.5px solid var(--olive-light); border-radius: 1.125rem; background: var(--butter-light); - box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04); cursor: pointer; - transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; + transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } -.review-item:last-child { - border-bottom: 1px solid var(--input-border-soft); -} - -.review-item:hover { - border-color: rgba(102, 52, 13, 0.28); - background: rgba(247, 246, 230, 0.92); - transform: translateY(-1px); -} - -.review-item:focus-visible { - outline: 3px solid rgba(107, 107, 5, 0.2); - outline-offset: 3px; +.review-item:hover, +.review-item:focus-visible { + border: 2px solid var(--olive); + box-shadow: var(--shadow-interaction); + transform: translateY(-3px); } .review-item dt { - font-weight: 700; + font-weight: 600; } .review-item dd { margin: 0; - white-space: pre-wrap; - color: var(--color-text-secondary); } .review-gallery { @@ -415,9 +382,8 @@ textarea:focus { } .flow-footer { - bottom: 0; + padding-top: var(--space-80); backdrop-filter: none; - padding-top: var(--space-24); padding-bottom: env(safe-area-inset-bottom); } @@ -471,7 +437,6 @@ textarea:focus { align-items: center; justify-content: space-between; gap: var(--space-24); - padding: var(--space-24) 0; width: 100%; } @@ -498,37 +463,27 @@ textarea:focus { margin-top: var(--space-12); } -.gallery-upload { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-16); -} - .gallery-preview { display: contents; } .gallery-add-button { - width: 7rem; - height: 7rem; display: grid; place-items: center; align-content: center; gap: var(--space-8); - padding: var(--space-8); + padding: var(--space-20); border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); background: var(--butter-light); - color: var(--olive); font-family: var(--font-main); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .gallery-add-button__icon { - color: var(--brown); - font-size: 2rem; + color: var(--black); + font-size: 1.5rem; line-height: 1; } @@ -584,7 +539,7 @@ textarea:focus { .site-footer { width: min(100% - 2rem, var(--max-width)); margin: 0 auto; - padding: var(--space-5) 0 var(--space-40); + padding: var(--space-32) 0 var(--space-40); color: var(--color-muted); text-align: center; } diff --git a/css/event_overview.css b/css/event_overview.css index f38bba2..605b301 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -12,15 +12,6 @@ } /* Heading hierarchy: page title > detail title > card title > section title */ -.overview-title { - margin: 0 0 var(--space-24); - color: var(--olive); - font-family: "Bagel Fat One", cursive; - font-size: clamp(38px, 5vw, 44px); - font-weight: 400; - line-height: 1.15; -} - .overview-title-row { display: flex; align-items: flex-start; @@ -147,7 +138,7 @@ background: var(--butter-light); border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); - padding: var(--space-5) var(--space-40); + padding: var(--space-32) var(--space-40); display: flex; gap: var(--space-40); cursor: pointer; @@ -282,7 +273,7 @@ --------------------------------------------------------- */ .empty-state { text-align: center; - padding: 42px var(--space-5); + padding: 42px var(--space-32); border: 2px solid var(--olive-light); border-radius: var(--radius-lg); background: var(--butter-light); @@ -294,7 +285,7 @@ color: var(--olive); font-size: 13px; font-weight: 600; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } .empty-state h3 { @@ -335,7 +326,7 @@ .detail-top-row { display: inline-flex; align-items: center; - gap: var(--space-5); + gap: var(--space-32); flex-wrap: wrap; } @@ -390,7 +381,7 @@ font-weight: 400; font-size: 1rem; line-height: 1; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); padding: var(--space-8) var(--space-20); }*/ @@ -516,7 +507,7 @@ .detail-panel { background: var(--butter-light); border-radius: var(--radius-md); - padding: var(--space-24) var(--space-5); + padding: var(--space-24) var(--space-32); } .detail-panel-compact { @@ -541,7 +532,7 @@ font-size: 12px; font-weight: 600; color: var(--tomato); - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); text-decoration: none; } @@ -615,7 +606,7 @@ border-radius: var(--radius-md); box-shadow: var(--shadow-interaction); - padding: var(--space-24) var(--space-5); + padding: var(--space-24) var(--space-32); margin-top: var(--space-40); position: sticky; bottom: var(--space-40); diff --git a/css/index.css b/css/index.css index 67b289b..bdca38b 100644 --- a/css/index.css +++ b/css/index.css @@ -534,7 +534,7 @@ @media (max-width: 768px) { .faq-section { padding: var(--space-40) var(--space-24); - margin: var(--space-40) 0 var(--space-5); + margin: var(--space-40) 0 var(--space-32); } .faq-trigger { diff --git a/css/login_signup.css b/css/login_signup.css index ba67901..b1c731c 100644 --- a/css/login_signup.css +++ b/css/login_signup.css @@ -87,6 +87,7 @@ input:focus { .form-group.has-error input { border-color: var(--error); + box-shadow: var(--shadow-error); } .form-group.has-error .error-message--field-callout { @@ -149,7 +150,7 @@ input:focus { } .btn-primary { - padding: var(--space-2) var(--space-5); + padding: var(--space-2) var(--space-32); background-color: var(--olive); color: var(--white); border: none; @@ -172,7 +173,7 @@ input:focus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; - padding: var(--space-16) var(--space-5); + padding: var(--space-16) var(--space-32); border: none; margin-top: 40px; } diff --git a/css/my_profil.css b/css/my_profil.css index 6df6ec2..453cc57 100644 --- a/css/my_profil.css +++ b/css/my_profil.css @@ -6,7 +6,7 @@ justify-content: space-between; align-items: flex-start; gap: var(--space-24); - margin-bottom: var(--space-5); + margin-bottom: var(--space-32); } .profile-kicker { @@ -14,7 +14,7 @@ color: var(--olive); font-size: 1rem; font-weight: 500; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } #headline { @@ -55,7 +55,7 @@ .profile-panel { background: var(--butter-light); border-radius: var(--radius-lg); - padding: var(--space-5); + padding: var(--space-32); } .panel-head { @@ -76,7 +76,7 @@ border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-interaction); - padding: var(--space-5) var(--space-40); + padding: var(--space-32) var(--space-40); display: flex; justify-content: space-between; gap: var(--space-40); @@ -114,7 +114,7 @@ color: var(--olive); font-size: 0.72rem; font-weight: 700; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } .profile-event-address { @@ -163,7 +163,7 @@ color: var(--olive); font-size: 0.8rem; font-weight: 600; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } .profile-empty-state h3 { @@ -225,6 +225,7 @@ .form-group.has-error input { border-color: var(--error); + box-shadow: var(--shadow-error); } .profile-feedback { diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index 4963210..369587c 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -48,7 +48,7 @@ --space-16: 1rem; /* 16px */ --space-20: 1.25rem; /* 20px */ --space-24: 1.5rem; /* 24px */ - --space-5: 2rem; /* 32px */ + --space-32: 2rem; /* 32px */ --space-40: 2.5rem; /* 40px */ --space-7: 3rem; /* 48px */ --space-64: 4rem; /* 64px */ @@ -64,7 +64,7 @@ /* Letter Spacing */ --ls-none: 0; --ls-sm: 2.5%; - --ls-la: 5%; + --ls-lg: 5%; } /* Base Styles */ @@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 { h1 { font-size: clamp(2.25rem, 5vw, 3rem); letter-spacing: var(--ls-sm); - margin-bottom: var(--space-5); + margin-bottom: var(--space-32); } h2 { @@ -129,15 +129,15 @@ p { margin-bottom: var(--space-8); } -/* + label { - font-family: var(--font-main); - font-size: 1.125rem; - font-weight: 600; - letter-spacing: var(--ls-sm); - line-height: 1; - margin-bottom: var(--space-0); -}*/ + font-family: var(--font-main); + font-size: 1.125rem; + font-weight: 600; + letter-spacing: var(--ls-lg); + line-height: 1; + margin-bottom: var(--space-16); +} .option { font-family: var(--font-main); @@ -145,7 +145,7 @@ label { font-weight: 600; letter-spacing: var(--ls-sm); line-height: 1; - margin-bottom: var(--space-16); + margin-bottom: var(--space-8); } .link-text a{ @@ -211,16 +211,13 @@ label { display: none; width: max-content; max-width: 15rem; - padding: 0.7rem 1.15rem; - border-radius: 1rem; + padding: var(--space-6) var(--space-16); + border-radius: var(--radius-md); background: var(--error); - color: #ffffff; + color: var(--butter-light); text-align: center; - font-size: 0.95rem; - line-height: 1.25; - white-space: normal; overflow-wrap: anywhere; - box-shadow: var(--shadow-interaction); + z-index: 1; } @@ -342,7 +339,7 @@ label { justify-content: space-between; align-items: center; min-height: 3rem; - padding: 0.1875rem 0.75rem 0.1875rem var(--space-5); + padding: 0.1875rem 0.75rem 0.1875rem var(--space-32); max-width: none; width: 100%; box-sizing: border-box; @@ -388,7 +385,7 @@ label { .nav-tab-links { display: flex; align-items: center; - gap: var(--space-5); + gap: var(--space-32); } @@ -402,7 +399,7 @@ label { font-family: var(--font-main); font-size: 1rem; font-weight: 600; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); z-index: 0; } @@ -760,7 +757,7 @@ label { .modal-content { background-color: var(--white); - padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20); + padding: var(--space-40); border-radius: var(--radius-lg); box-shadow: var(--shadow-interaction); max-width: 500px; @@ -773,27 +770,21 @@ label { width: 48px; height: 48px; flex: 0 0 48px; - border: 1.5px solid var(--olive); - border-radius: 999px; + border: 1.5px solid var(--olive-light); + border-radius: var(--radius-pill); + color: var(--black); background: var(--butter-light); - color: var(--olive); - font-family: "Bagel Fat One", cursive; - font-size: 1.7rem; + font-family: "Bagel Fat One"; + font-size: 1.75rem; + font-weight: 500; line-height: 1; cursor: pointer; - box-shadow: var(--shadow-interaction); - transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; + transition: background-color 0.2s ease; } .btn-info:hover, .btn-info:focus-visible { - background: var(--butter); - border-color: var(--olive-dark); - transform: translateY(-1px); -} - -.btn-info:focus-visible { - outline: 2px solid var(--olive-dark); + background: var(--olive-light); } @keyframes modalSlideIn { @@ -822,7 +813,7 @@ label { margin-left: auto; border: none; background: transparent; - color: var(--olive); + color: var(--black); font-size: 2rem; line-height: 1; cursor: pointer; @@ -830,20 +821,14 @@ label { align-items: center; justify-content: center; padding: 0; - transition: color 0.2s ease, transform 0.2s ease; + transition: transform 0.2s ease; } .modal-close:hover, .modal-close:focus-visible { - color: var(--olive-dark); transform: translateY(-1px); } -.modal-close:focus-visible { - outline: 2px solid var(--olive-dark); - outline-offset: 2px; -} - .close-btn { font-size: 28px; color: var(--black); @@ -959,7 +944,7 @@ input[type="password"] { padding: var(--space-12) var(--space-16); border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); - background: transparent; + background: var(--butter-light); transition: border-color 0.3s ease; } diff --git a/event_create.html b/event_create.html index 4887b14..2149d5e 100644 --- a/event_create.html +++ b/event_create.html @@ -70,7 +70,7 @@
Schritt 1
+
Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch, ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?
@@ -150,7 +150,7 @@Schritt 2
+
Mach uns neugierig. Was gibt es zu essen? Gibt es eine bestimmte Ernährungsform oder ein Motto? Je mehr du verrätst, desto besser können sich deine Gäste auf dein Event freuen.
Schritt 3
+
Gibt es Allergien, Unverträglichkeiten oder andere Hinweise, die für dein Event wichtig sind? So wissen deine Gäste gleich, worauf sie sich einstellen können.
Optional – nur auswählen, wenn es für dein Event relevant ist.
Schritt 4
+
Wähle Datum und Uhrzeit für dein Event. So können deine Gäste direkt einschätzen, ob der Termin für sie passt.
Schritt 5
+
Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.
Schritt 6
+
Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht. Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.
@@ -308,12 +309,13 @@Optional – füge Bilder zu deinem Event hinzu.
+Schritt 7
+
Schau dir alle Details nochmal in Ruhe an. Wenn alles passt, kannst du dein Event jetzt veröffentlichen und Gäste einladen.
@@ -449,7 +451,7 @@+
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste. Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.