/* ===================================================================== Hochzeit Laura & Thomas – Theme-Schicht auf Pico CSS v2 Angelehnt an das Layout der Papier-Einladung (Aquarell blau, Baskerville). Reihenfolge im : pico.min.css -> styles.css ===================================================================== */ /* ---------- Lokale Schriften ---------- */ /* Hauptschrift: "Baskerville Display PT" falls auf dem Gerät vorhanden, sonst die lokal gebündelte, sehr ähnliche "Libre Baskerville". */ @font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/baskerville-400.woff2") format("woff2"); } @font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/baskerville-400-italic.woff2") format("woff2"); } @font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/baskerville-700.woff2") format("woff2"); } /* Schreibschrift für die Namen / Unterschrift (wie handgeschrieben) */ @font-face { font-family: "Script Signature"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/script-600.woff2") format("woff2"); } /* ---------- Palette & Pico-Mapping ---------- */ :root:not([data-theme="dark"]), :root[data-theme="light"] { /* Vorgegebene Farben */ --ink: #083354; /* Schriftfarbe (Dunkelblau) */ --accent: #006cb2; /* Highlight-Blau */ --light: #c3daeb; /* Helles Blau */ --bg: #ffffff; --muted: #4a6b86; /* abgeleitetes gedämpftes Blau */ --border: #d8e6f1; --card: #ffffff; --serif: "Baskerville Display PT", "Libre Baskerville", Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, Georgia, serif; --script: "Script Signature", "Segoe Script", "Brush Script MT", cursive; /* Pico auf die Palette umbiegen */ --pico-font-family-sans-serif: var(--serif); --pico-font-family: var(--serif); --pico-line-height: 1.65; --pico-background-color: var(--bg); --pico-color: var(--ink); --pico-muted-color: var(--muted); --pico-h1-color: var(--ink); --pico-h2-color: var(--ink); --pico-h3-color: var(--accent); --pico-h4-color: var(--accent); --pico-primary: var(--accent); --pico-primary-hover: #005a95; --pico-primary-focus: rgba(0, 108, 178, 0.3); --pico-primary-background: var(--accent); --pico-primary-hover-background: #005a95; --pico-primary-border: var(--accent); --pico-primary-hover-border: #005a95; --pico-primary-inverse: #ffffff; --pico-card-background-color: var(--card); --pico-card-border-color: var(--border); --pico-border-color: var(--border); --pico-muted-border-color: var(--border); --pico-form-element-background-color: #f7fbfe; --pico-form-element-border-color: var(--border); --pico-form-element-active-border-color: var(--accent); --pico-form-element-focus-color: var(--accent); --pico-border-radius: 8px; } body { font-family: var(--serif); } /* Serifen-Überschriften */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; letter-spacing: 0.01em; } .amp { font-style: italic; } /* ---------- Hero (Aquarell-Klecks + Namen) ---------- */ /* Klecks als vollständiges Bild im Hintergrund (contain = wird nie beschnitten), Inhalt liegt mittig darüber. */ .hero { position: relative; min-height: min(80vh, 760px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; background-image: url("/images/aquarell-klecks.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; } .hero .kicker { text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.6rem; } /* Handschrift-Namen als Bild, weißer JPG-Hintergrund wird per mix-blend-mode entfernt -> wirkt transparent über dem Aquarell. */ .hero__names { display: block; width: min(440px, 82%); height: auto; margin: 0.2rem auto 0.7rem; mix-blend-mode: multiply; } .hero .date { font-family: var(--serif); font-size: clamp(1.3rem, 3.5vw, 1.9rem); color: var(--ink); margin: 0; } .hero .place { text-transform: uppercase; letter-spacing: 0.4em; font-size: 0.95rem; color: var(--ink); margin-top: 0.4rem; } /* ---------- Sections ---------- */ .section { max-width: 720px; margin: 0 auto; padding: 2.8rem 1.5rem; } .section-title { text-transform: uppercase; letter-spacing: 0.28em; font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 1.4rem; } .rule { border: none; border-top: 1px solid var(--border); max-width: 720px; margin: 0 auto; } .greeting { font-family: var(--script); font-weight: 600; color: var(--accent); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin: 0 0 1.2rem; } /* Signatur als transparentes Handschrift-Bild */ .signature-img { display: block; width: min(320px, 70%); height: auto; margin: 1.8rem 0 0; } .lead { font-size: 1.15rem; color: var(--ink); } /* ---------- Programm (Zeit | Beschreibung) ---------- */ .program { display: grid; grid-template-columns: max-content 1fr; gap: 0.9rem 1.6rem; margin: 0; } .program dt { font-weight: 700; color: var(--accent); white-space: nowrap; } .program dd { margin: 0; color: var(--ink); } /* ---------- Info / RSVP ---------- */ .info a { color: var(--accent); font-weight: 700; } .pw { display: inline-block; background: var(--light); color: var(--ink); padding: 0.15em 0.6em; border-radius: 4px; font-weight: 700; letter-spacing: 0.03em; } /* ---------- Buttons (Pill) ---------- */ .btn { --pico-border-radius: 999px; padding-inline: 1.8rem; letter-spacing: 0.04em; width: auto; } .center { text-align: center; } /* ---------- Footer mit Aquarell-Welle unten ---------- */ .footer { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 2rem; } .footer .footer__inner { padding: 1.5rem; } .footer a { color: var(--muted); } /* Textfreie Aquarell-Welle als Abschluss – volles Bild, nicht beschnitten */ .footer__wave-img { display: block; width: 100%; height: auto; margin-top: 1rem; } /* ---------- Login ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background-image: url("/images/aquarell-klecks.png"); background-repeat: no-repeat; background-position: center -40px; background-size: min(520px, 96%) auto; } .login-card { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--border); border-radius: 12px; padding: 2.6rem 2rem; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 12px 44px rgba(8, 51, 84, 0.12); margin: 0; } .login-card .kicker { text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.72rem; color: var(--muted); } .login-card .login__names { display: block; width: min(280px, 88%); height: auto; margin: 0.6rem auto 0.4rem; mix-blend-mode: multiply; } .login-card p.hint { color: var(--muted); font-size: 0.95rem; margin: 0.4rem 0 1.6rem; } .login-card input[type="password"] { margin-bottom: 1rem; text-align: center; } .login-card .btn { width: 100%; } .error { background: #fbeaea; color: #a23b3b; border: 1px solid #eecccc; border-radius: 8px; padding: 0.7rem; font-size: 0.9rem; margin-bottom: 1rem; }