/* ========================================================================= Michelle Weindorf-Klasen — One Pager Aesthetic: hell & luftig + sanft & erdig. Elegant (Yoga) meets lively (Showtanz). Theme + font are switchable via [data-theme] / [data-font] on . ========================================================================= */ /* ---- Palettes ---------------------------------------------------------- */ :root, :root[data-theme="airy"] { --bg: #FBF8F3; --bg-2: #F4EFE6; --surface: #FFFFFF; --ink: #37322B; --ink-soft: #5A534A; --muted: #948B7E; --line: #E8E0D3; --sage: #A6B398; --sage-deep: #7E8C6E; --terra: #D08C6E; --terra-deep:#B86F50; --accent: #C56B7A; --stage-bg: #2E2A2E; --stage-bg-2:#3A343A; --stage-ink: #F6EFE7; --stage-accent:#E2A77F; } :root[data-theme="earthy"] { --bg: #EFE7D9; --bg-2: #E6DBC8; --surface: #FBF6EC; --ink: #2D2922; --ink-soft: #564E42; --muted: #877D6E; --line: #DACEB8; --sage: #8B987A; --sage-deep: #6C795A; --terra: #C2724D; --terra-deep:#A55C3C; --accent: #A85A4E; --stage-bg: #33291F; --stage-bg-2:#41342763; --stage-bg-2:#413427; --stage-ink: #F2E7D5; --stage-accent:#D89A5C; } :root[data-theme="stage"] { --bg: #FBF6F1; --bg-2: #F6EAE6; --surface: #FFFFFF; --ink: #2A2230; --ink-soft: #574B5C; --muted: #948A98; --line: #ECDFDB; --sage: #9DB0A2; --sage-deep: #6F8475; --terra: #E08756; --terra-deep:#C96A3C; --accent: #B6436B; --stage-bg: #241726; --stage-bg-2:#39213C; --stage-ink: #F7E9EE; --stage-accent:#E89BB6; } /* ---- Fonts ------------------------------------------------------------- */ :root { --font-display: "Cormorant Garamond", Georgia, serif; } :root[data-font="marcellus"] { --font-display: "Marcellus", Georgia, serif; } :root[data-font="playfair"] { --font-display: "Playfair Display", Georgia, serif; } :root { --font-body: "Mulish", system-ui, -apple-system, sans-serif; --font-script: "Caveat", cursive; --maxw: 1180px; --gut: clamp(20px, 5vw, 80px); } /* ---- Reset / base ------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.5; font-weight: 400; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Bilingual visibility */ :root[data-lang="de"] .en { display: none; } :root[data-lang="en"] .de { display: none; } /* ---- Typographic helpers ---------------------------------------------- */ .eyebrow { font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--terra-deep); display: inline-flex; align-items: center; gap: .7em; } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--terra); display: inline-block; } .display { font-family: var(--font-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; color: var(--ink); } .script { font-family: var(--font-script); font-weight: 500; color: var(--terra-deep); line-height: 1; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.75; color: var(--ink-soft); font-weight: 400; text-wrap: pretty; max-width: 42ch; } /* ---- Layout ------------------------------------------------------------ */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } section { position: relative; } /* ---- Top bar ----------------------------------------------------------- */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gut); transition: background .4s ease, box-shadow .4s ease, padding .4s ease; } .topbar.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 var(--line); padding-block: 12px; } .brand { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; } .brand .dot { color: var(--terra); } .nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); } .nav a { font-size: .82rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); position: relative; padding-block: 4px; } .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--terra); transition: width .3s ease; } .nav a:hover::after { width: 100%; } .nav a:hover { color: var(--ink); } @media (max-width: 720px) { .nav .navlink { display: none; } } .lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang button { appearance: none; border: 0; background: transparent; font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding: 6px 12px; cursor: pointer; transition: background .25s, color .25s; } :root[data-lang="de"] .lang button[data-set="de"], :root[data-lang="en"] .lang button[data-set="en"] { background: var(--ink); color: var(--bg); } /* ---- Hero -------------------------------------------------------------- */ .hero { min-height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 5vw, 80px); padding-top: 120px; padding-bottom: 60px; } .hero-copy .hello { font-size: clamp(2rem, 3vw, 2.7rem); margin: 0 0 -.1em; display: block; transform: rotate(-4deg); transform-origin: left; } .hero-name { font-size: clamp(3.2rem, 8.5vw, 7.2rem); margin: .04em 0 .12em; } .hero-name .ln { display: block; } .hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); letter-spacing: .01em; max-width: 40ch; margin: 0 0 26px; text-wrap: pretty; } .hero-tags { display: flex; flex-wrap: wrap; gap: 10px; } .tag { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage-deep); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; background: var(--surface); } .tag.t-terra { color: var(--terra-deep); } .tag.t-accent { color: var(--accent); } .hero-media { position: relative; } .arch { position: relative; aspect-ratio: 4 / 5; border-radius: 50% 50% 16px 16px / 32% 32% 4px 4px; overflow: hidden; box-shadow: 0 40px 90px -40px color-mix(in srgb, var(--ink) 45%, transparent); } .arch image-slot { width: 100%; height: 100%; display: block; } .arch img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-media .blob { position: absolute; inset: auto -8% -6% auto; width: 46%; aspect-ratio: 1; background: var(--sage); opacity: .5; border-radius: 47% 53% 60% 40% / 47% 45% 55% 53%; z-index: -1; filter: blur(2px); } .hero-media .ring { position: absolute; top: -22px; left: -22px; width: 110px; height: 110px; border: 1.5px solid var(--terra); border-radius: 50%; opacity: .5; } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 110px; } .hero-media { max-width: 420px; margin-inline: auto; order: -1; } } /* ---- Section scaffolding ---------------------------------------------- */ .band { padding-block: clamp(70px, 11vw, 140px); } .band.alt { background: var(--bg-2); } .sect-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 60px); } .sect-title { font-size: clamp(2.2rem, 5.2vw, 4rem); margin: .28em 0 0; } /* Two-column feature row */ .feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 90px); align-items: center; } .feature.flip .feature-media { order: 2; } .feature-copy .sect-title { margin-top: .18em; } .feature-copy .lead { margin-top: 22px; } @media (max-width: 820px) { .feature { grid-template-columns: 1fr; gap: 34px; } .feature.flip .feature-media { order: 0; } } /* Media frames */ .frame { border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -42px color-mix(in srgb, var(--ink) 50%, transparent); } .frame image-slot { width: 100%; height: 100%; display: block; } .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .frame img.contain { object-fit: contain; } .frame.tall { aspect-ratio: 4 / 5; } .frame.wide { aspect-ratio: 16 / 10; } /* Centered intro (About) */ .about-intro { max-width: 780px; margin-inline: auto; text-align: center; } .about-intro .feature-copy { display: contents; } .about-intro .eyebrow { justify-content: center; } .about-intro .sect-title { margin-top: .26em; } .about-intro .lead { max-width: 54ch; margin: 24px auto 0; } .about-sprig { color: var(--sage-deep); margin: 0 auto 14px; opacity: .9; } /* Civic / home (Albig) section */ .civic { background: color-mix(in srgb, var(--sage) 15%, var(--bg)); } .civic-inner { max-width: 760px; margin-inline: auto; text-align: center; } .civic-inner .eyebrow { justify-content: center; color: var(--sage-deep); } .civic-inner .eyebrow::before { background: var(--sage-deep); } .civic-pin { color: var(--sage-deep); margin: 0 auto 16px; display: block; } .civic-inner .sect-title { margin-top: .2em; } .civic-inner .lead { max-width: 52ch; margin: 24px auto 0; } .civic-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .civic-badge { display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; letter-spacing: .02em; color: var(--ink-soft); } .civic-badge.link { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .civic-badge.link:hover { border-color: var(--sage-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -18px var(--sage-deep); } .civic-badge.link .hus-arrow { color: var(--sage-deep); margin-left: 2px; } .civic-badge.link:hover .hus-arrow { transform: translateX(4px); } .civic-badge b { color: var(--sage-deep); font-weight: 700; } .civic-badge .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-deep); display: inline-block; } .media-stack { position: relative; } .media-stack .leaf { position: absolute; z-index: 2; color: var(--sage-deep); opacity: .8; } /* ---- Pull quote / divider --------------------------------------------- */ .quote-band { padding-block: clamp(56px, 9vw, 110px); text-align: center; } .quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.7rem, 4vw, 3rem); line-height: 1.25; max-width: 18ch; margin: 0 auto; color: var(--ink); text-wrap: balance; } .quote em { font-style: italic; color: var(--terra-deep); } /* ---- Showtanz stage band ---------------------------------------------- */ .stage { background: radial-gradient(120% 90% at 80% 0%, var(--stage-bg-2), var(--stage-bg) 60%); color: var(--stage-ink); overflow: hidden; } .stage .eyebrow { color: var(--stage-accent); } .stage .eyebrow::before { background: var(--stage-accent); } .stage .sect-title, .stage .display { color: var(--stage-ink); } .stage .lead { color: color-mix(in srgb, var(--stage-ink) 78%, transparent); } .stage-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(34px, 6vw, 80px); align-items: center; } .stage-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .stage-collage .frame { box-shadow: 0 30px 60px -36px rgba(0,0,0,.6); } .stage-collage .c1 { aspect-ratio: 1 / 2; background: color-mix(in srgb, var(--stage-ink) 6%, transparent); box-shadow: 0 30px 60px -40px rgba(0,0,0,.55); } .stage-collage .c-right { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; } .stage-collage .c2 { aspect-ratio: 1; } .show-caption { font-size: .84rem; letter-spacing: .03em; line-height: 1.5; color: color-mix(in srgb, var(--stage-ink) 82%, transparent); background: color-mix(in srgb, var(--stage-ink) 8%, transparent); border: 1px solid color-mix(in srgb, var(--stage-ink) 16%, transparent); border-radius: 13px; padding: 13px 15px; } .show-caption b { color: var(--stage-accent); font-weight: 700; display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; } .sparkle { color: var(--stage-accent); } .stage-stats { display: flex; gap: clamp(20px, 4vw, 48px); margin-top: 30px; flex-wrap: wrap; } .stat .n { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; color: var(--stage-accent); line-height: 1; } .stat .l { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .72; margin-top: 6px; } .stage-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding: 12px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--stage-ink) 26%, transparent); background: color-mix(in srgb, var(--stage-ink) 8%, transparent); color: var(--stage-ink); width: fit-content; transition: border-color .25s ease, transform .25s ease, background .25s ease; } .stage-link:hover { border-color: var(--stage-accent); transform: translateY(-2px); background: color-mix(in srgb, var(--stage-ink) 14%, transparent); } .stage-link .hus-txt { color: color-mix(in srgb, var(--stage-ink) 62%, transparent); } .stage-dom { font-family: var(--font-display); font-size: 1.2rem; color: var(--stage-ink); } .stage-link .hus-arrow { color: var(--stage-accent); transition: transform .25s ease; } .stage-link:hover .hus-arrow { transform: translateX(4px); } @media (max-width: 820px) { .stage-grid { grid-template-columns: 1fr; } } /* ---- Family (privacy-friendly note card, no photos) ------------------- */ .family-note { background: color-mix(in srgb, var(--sage) 24%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sage-deep) 24%, transparent); border-radius: 24px; padding: clamp(36px, 5vw, 60px); text-align: center; box-shadow: 0 34px 80px -50px color-mix(in srgb, var(--ink) 55%, transparent); } .fn-hearts { color: var(--terra); margin: 0 auto 16px; display: block; } .fn-script { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--terra-deep); margin: .1em 0 .35em; line-height: 1.1; } .fn-sub { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; max-width: 26ch; margin: 0 auto; text-wrap: pretty; } .family-stack { display: flex; flex-direction: column; gap: 14px; } .family-stack .fam-photo { aspect-ratio: 3 / 2; } .family-stack .fam-dogs { aspect-ratio: 3 / 2; } .photo-credit { text-align: center; font-size: .78rem; letter-spacing: .03em; color: var(--muted); margin: 8px 0 0; } .photo-credit a { color: var(--terra-deep); border-bottom: 1px solid color-mix(in srgb, var(--terra) 45%, transparent); } .photo-credit a:hover { color: var(--terra); } .dog-cap { text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--terra-deep); margin: 2px 0 8px; line-height: 1.1; } /* Husband link */ .hus-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); width: fit-content; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .hus-link:hover { border-color: var(--terra); transform: translateY(-2px); box-shadow: 0 14px 28px -18px var(--terra-deep); } .hus-txt { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .hus-dom { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); } .hus-arrow { color: var(--terra); transition: transform .25s ease; } .hus-link:hover .hus-arrow { transform: translateX(4px); } /* ---- Closing ----------------------------------------------------------- */ .closing { text-align: center; padding-block: clamp(70px, 11vw, 150px); } .closing .script { font-size: clamp(2.4rem, 6vw, 4rem); display: block; margin-bottom: .1em; } .closing .sect-title { margin: 0 auto; max-width: 16ch; } .closing .lead { margin: 26px auto 0; text-align: center; } .signature { font-family: var(--font-script); font-size: 2rem; color: var(--ink); margin-top: 30px; } /* ---- Footer ------------------------------------------------------------ */ .footer { border-top: 1px solid var(--line); padding-block: 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .85rem; } .footer .fb { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); } .foot-links { display: flex; gap: 22px; flex-wrap: wrap; } .foot-links a { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); position: relative; } .foot-links a:hover { color: var(--terra-deep); } /* ---- Contact ----------------------------------------------------------- */ .contact-inner { max-width: 820px; margin-inline: auto; text-align: center; } .contact-inner .eyebrow { justify-content: center; } .contact-inner .sect-title { margin-top: .2em; } .contact-cards { display: grid; grid-template-columns: minmax(280px, 440px); justify-content: center; gap: 18px; margin-top: clamp(30px, 5vw, 48px); } .contact-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(26px, 4vw, 38px) 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--ink); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } a.contact-card:hover { border-color: var(--terra); transform: translateY(-3px); box-shadow: 0 22px 44px -28px var(--terra-deep); } .contact-card svg { color: var(--terra-deep); margin-bottom: 6px; } .contact-card .cc-l { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .contact-card .cc-v { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--ink); line-height: 1.3; } @media (max-width: 620px) { .contact-cards { grid-template-columns: minmax(0, 1fr); } } /* ---- Legal pages (Impressum / Datenschutz) ---------------------------- */ .legal { max-width: 760px; margin: 0 auto; padding: 130px var(--gut) 90px; } .legal .back { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terra-deep); margin-bottom: 30px; } .legal .back:hover { color: var(--terra); } .legal h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 .5em; letter-spacing: -0.01em; } .legal h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 2em 0 .4em; } .legal p, .legal address { color: var(--ink-soft); line-height: 1.7; font-style: normal; margin: 0 0 1em; } .legal a { color: var(--terra-deep); border-bottom: 1px solid color-mix(in srgb, var(--terra) 45%, transparent); } .legal a:hover { color: var(--terra); } .legal .muted { color: var(--muted); font-size: .9rem; } /* ---- Decorative sprig SVG --------------------------------------------- */ .sprig { display: block; color: var(--sage-deep); opacity: .9; } /* ---- Reveal animation (progressive enhancement: visible by default) --- */ .reveal { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } /* Only hide initially once JS has confirmed it can animate */ html.anim .reveal { opacity: 0; transform: translateY(26px); } html.anim .reveal.in { opacity: 1; transform: none; } html.anim .reveal.d1 { transition-delay: .08s; } html.anim .reveal.d2 { transition-delay: .16s; } html.anim .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.anim .reveal { opacity: 1; transform: none; transition: none; } }