/* * Katja & Darius – Feature-Komponenten (Referenz aus Strang A): * Hero, Login-Code, Ort/Karte, Swipe-Stapel, Galerie, Upload, QR-Karte, Quiz-Leerzustand. */ /* ─── Hero (öffentliche Startseite) ─────────────────────────────── */ .hero { position: relative; overflow: clip; min-height: 100svh; display: grid; align-content: start; padding: calc(var(--space-xl)) var(--gutter) calc(var(--lace-height) + var(--space-xl)); background: var(--c-pearl); } .hero__botanical { position: absolute; pointer-events: none; color: var(--c-sage); width: min(78vw, 36rem); right: -14vw; top: 1.5rem; opacity: 0.9; } .hero__inner { position: relative; display: grid; gap: var(--space-l); width: min(100%, var(--container)); margin-inline: auto; } .hero__wordmark { width: min(92vw, 40rem); margin-top: 14vw; color: var(--c-chestnut); --wm-accent: var(--c-sage); } .hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; } .hero__date { height: clamp(1.75rem, 1.4rem + 1.4vw, 2.6rem); width: auto; } .hero__media { max-width: 22rem; justify-self: end; width: 72%; margin-top: calc(-1 * var(--space-s)); } .hero__login { width: min(100%, 26rem); } /* Mobil: Login vor dem Bild – Gäste kommen per QR und wollen sofort hinein */ @media (max-width: 63.99rem) { .hero__media { order: 3; } .hero__login { order: 2; } } @media (min-width: 64rem) { .hero { align-content: center; padding-top: var(--space-2xl); } .hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; column-gap: var(--space-m); } .hero__wordmark { grid-column: 1 / span 7; margin-top: 0; width: 100%; } .hero__meta { grid-column: 1 / span 7; } .hero__login { grid-column: 1 / span 5; } .hero__media { grid-column: 9 / span 4; grid-row: 1 / span 3; width: 100%; max-width: none; align-self: center; margin: 0; } .hero__botanical { width: 30rem; right: -4rem; top: 3rem; } } /* Intro-Choreografie (einmal pro Sitzung; JS setzt .is-intro am ) */ .wordmark .wm-k, .wordmark .wm-d { clip-path: inset(0 0 0 0); } .is-intro .wordmark .wm-k, .is-intro .wordmark .wm-d { clip-path: inset(0 100% 0 0); } .is-intro .wordmark .wm-atja, .is-intro .wordmark .wm-arius, .is-intro .wordmark .wm-and { opacity: 0; transform: translateY(10px); } .is-intro .hero__botanical { opacity: 0; transform: translateX(28px) rotate(2deg); } .is-intro .hero [data-intro] { opacity: 0; transform: translateY(14px); } .is-intro .hero .lace-edge { transform: translateY(100%); } .wordmark g, .hero__botanical, .hero [data-intro], .hero .lace-edge { transform-box: fill-box; } .intro-run .wordmark .wm-k { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 250ms; } .intro-run .wordmark .wm-atja { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out) 620ms, transform 800ms var(--ease-out) 620ms; } .intro-run .wordmark .wm-d { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-in-out) 760ms; } .intro-run .wordmark .wm-and { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out) 1000ms, transform 900ms var(--ease-out) 1000ms; } .intro-run .wordmark .wm-arius { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out) 1120ms, transform 800ms var(--ease-out) 1120ms; } .intro-run .hero__botanical { opacity: 0.9; transform: none; transition: opacity 1600ms var(--ease-out) 150ms, transform 1800ms var(--ease-emph) 150ms; } .intro-run .hero [data-intro] { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(1350ms + var(--i, 0) * 110ms); } .intro-run .hero .lace-edge { transform: none; transition: transform 1100ms var(--ease-emph) 1500ms; } @media (prefers-reduced-motion: reduce) { .is-intro .wordmark *, .is-intro .hero__botanical, .is-intro .hero [data-intro], .is-intro .hero .lace-edge { clip-path: none !important; transform: none !important; } } /* ─── Login-Code (ein Feld, automatische Gruppierung XXXX-XXXX-XXXX) ── */ .code-field { width: 100%; min-height: 3.75rem; padding: 0.5rem 0.25rem; border: 0; border-bottom: 1.5px solid var(--color-line-strong); border-radius: 0; background: transparent; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(1.35rem, 1rem + 1.6vw, 1.75rem); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; font-variant-numeric: lining-nums tabular-nums; caret-color: var(--c-chestnut); transition: border-color var(--dur-fast) var(--ease-out); } .code-field::placeholder { color: var(--c-chestnut-a30); letter-spacing: 0.14em; } .code-field:focus { outline: none; border-bottom-color: var(--c-chestnut); } .code-form { display: grid; gap: var(--space-s); } .code-form[data-state="error"] .code-field { border-bottom-color: var(--c-danger); animation: shake 420ms var(--ease-out); } .code-form[data-state="success"] .code-field { border-bottom-color: var(--c-success); } @media (prefers-reduced-motion: reduce) { .code-form[data-state="error"] .code-field { animation: none; } } /* ─── Ort & Anreise ────────────────────────────────────────────── */ .venue { display: grid; gap: var(--space-xl); } .venue__map { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-arch); background: var(--map-bg); box-shadow: inset 0 0 0 1px var(--color-line); } .venue__map svg { width: 100%; height: 100%; } .venue__address { font-style: normal; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; } .venue__copy { display: inline-flex; align-items: center; gap: 0.5rem; } @media (min-width: 56rem) { .venue { grid-template-columns: 5fr 6fr; align-items: center; column-gap: var(--space-2xl); } } /* ─── Swipe-Stapel (Admin: Wunschlieder) ─────────────────────────── */ .swipe { display: grid; justify-items: center; gap: var(--space-m); } .swipe__stack { position: relative; margin-bottom: 2.5rem; width: min(86vw, 22rem); aspect-ratio: 3 / 4; touch-action: pan-y; user-select: none; } .swipe-card { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; background: var(--c-pearl-100); border: var(--hairline); border-radius: var(--radius-m); box-shadow: var(--shadow-2); overflow: hidden; transform-origin: 50% 110%; transform: translateY(calc(var(--depth, 0) * 12px)) scale(calc(1 - var(--depth, 0) * 0.045)); transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base); will-change: transform; cursor: grab; } .swipe-card[data-depth="3"] { opacity: 0; } .swipe-card.is-dragging { transition: none; cursor: grabbing; box-shadow: var(--shadow-3); } .swipe-card__art { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, var(--art-a, #c8c7b4), var(--art-b, #5c2e22)); } .swipe-card__art img { width: 100%; height: 100%; object-fit: cover; } .swipe-card__body { padding: var(--space-m); display: grid; gap: 0.25rem; } .swipe-card__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--weight-medium); line-height: 1.1; } .swipe-card__artist { font-size: var(--step--1); color: var(--color-text-muted); } .swipe-card__wish { margin-top: 0.5rem; font-family: var(--font-display); font-style: italic; font-size: var(--step-0); line-height: 1.35; } .swipe-card__stamp { position: absolute; top: 1.2rem; padding: 0.35rem 0.8rem; border: 1.5px solid currentColor; border-radius: var(--radius-xs); font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: 0.08em; text-transform: uppercase; background: rgb(251 248 243 / 0.9); opacity: 0; pointer-events: none; } .swipe-card__stamp--yes { left: 1rem; color: var(--c-success); transform: rotate(-8deg); } .swipe-card__stamp--no { right: 1rem; color: var(--c-danger); transform: rotate(8deg); } .swipe__actions { display: flex; gap: var(--space-m); } .swipe__btn { width: 3.75rem; height: 3.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--color-line-strong); background: var(--c-pearl-100); color: var(--c-chestnut); transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-fast); } .swipe__btn:hover { transform: scale(1.06); } .swipe__btn:active { transform: scale(0.94); } .swipe__btn--yes { background: var(--c-chestnut); color: var(--c-ivory); border-color: var(--c-chestnut); } .swipe__btn svg { width: 1.4rem; height: 1.4rem; } .swipe__empty { text-align: center; display: grid; gap: var(--space-2xs); justify-items: center; } /* ─── Galerie ───────────────────────────────────────────────────── */ .gallery { columns: 2; column-gap: 0.5rem; } @media (min-width: 40rem) { .gallery { columns: 3; column-gap: 0.75rem; } } @media (min-width: 70rem) { .gallery { columns: 4; } } .gallery__item { display: block; margin: 0 0 0.5rem; break-inside: avoid; position: relative; overflow: hidden; border-radius: var(--radius-xs); background: var(--c-pearl-400); } @media (min-width: 40rem) { .gallery__item { margin-bottom: 0.75rem; } } .gallery__item img { width: 100%; transition: transform 1200ms var(--ease-emph), filter var(--dur-slow) var(--ease-out); } .gallery__item:hover img { transform: scale(1.035); } .gallery__item:first-child { border-radius: var(--radius-arch); } /* erstes Bild als Bogen: Wiedererkennung */ .gallery__badge { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill); background: rgb(46 20 13 / 0.6); color: var(--c-ivory); font-size: var(--step--2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* ─── Upload ────────────────────────────────────────────────────── */ .dropzone { display: grid; justify-items: center; gap: var(--space-2xs); text-align: center; padding: var(--space-xl) var(--space-m); border: 1px dashed var(--c-chestnut-a60); border-radius: var(--radius-arch); background: var(--c-pearl-100); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-spring); } .dropzone[data-drag] { background: var(--c-lace); border-style: solid; transform: scale(1.01); } .upload-list { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; gap: var(--space-2xs); } .upload-item { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: var(--space-s); padding: 0.6rem; border: var(--hairline); border-radius: var(--radius-s); background: var(--c-pearl-100); } .upload-item__thumb { width: 3rem; height: 3rem; border-radius: var(--radius-xs); object-fit: cover; background: var(--c-pearl-400); } .upload-item__name { font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .upload-item__meta { font-size: var(--step--2); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .upload-item__bar { grid-column: 2 / -1; height: 2px; background: var(--color-line); overflow: hidden; border-radius: 2px; } .upload-item__bar i { display: block; height: 100%; width: 100%; background: var(--c-chestnut); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 240ms linear; } .upload-item[data-state="processing"] .upload-item__bar i { transform: none; background: linear-gradient(90deg, transparent, var(--c-champagne-600), transparent) 0 0 / 40% 100% no-repeat; animation: shimmer 1.3s var(--ease-in-out) infinite; } @keyframes shimmer { from { background-position: -40% 0; } to { background-position: 140% 0; } } .progress-ring { width: 2.25rem; height: 2.25rem; transform: rotate(-90deg); } .progress-ring circle { fill: none; stroke-width: 2; } .progress-ring .track { stroke: var(--color-line); } .progress-ring .value { stroke: var(--c-chestnut); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); transition: stroke-dashoffset 240ms linear; } .check-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 520ms var(--ease-out) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* ─── QR-Einladungskarte ────────────────────────────────────────── */ .qr-card { width: min(100%, 22rem); aspect-ratio: 105 / 148; /* A6 hoch */ position: relative; overflow: hidden; margin-inline: auto; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; padding: 9% 9% 7%; background: var(--c-pearl); color: var(--c-chestnut); box-shadow: var(--shadow-2); } .qr-card::before { content: ""; position: absolute; inset: 4.5%; border: 1px solid var(--c-chestnut-a30); pointer-events: none; } .qr-card::after { content: ""; position: absolute; inset: calc(4.5% + 4px); border: 1px solid var(--c-chestnut-a15); pointer-events: none; } .qr-card__botanical { position: absolute; width: 62%; right: -14%; top: 3%; opacity: 0.7; } .qr-card__wordmark { width: 70%; margin-top: 8%; } .qr-card__qr { width: 52%; align-self: center; padding: 3%; background: var(--c-ivory); border-radius: 6px; box-shadow: 0 0 0 1px var(--c-chestnut-a15); } .qr-card__guest { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; margin: 0; } .qr-card__code { font-size: 0.7rem; letter-spacing: 0.22em; color: var(--c-graphite); font-variant-numeric: tabular-nums; margin: 0.2rem 0 0; } .qr-card__hint { font-size: 0.72rem; color: var(--c-graphite); margin: 0.4rem 0 0; } /* ─── Quiz ──────────────────────────────────────────────────────── */ .quiz-empty { display: grid; justify-items: center; text-align: center; gap: var(--space-s); padding: var(--space-2xl) var(--space-m); } .quiz-empty img { width: 9rem; opacity: 0.8; } .quiz-progress { display: flex; gap: 4px; } .quiz-progress i { flex: 1; height: 2px; background: var(--color-line); } .quiz-progress i[data-done] { background: var(--c-chestnut); }