/* ═══════════════════════════════════════════════════════════════ Edith & Lennart — 6 februari 2027 — Rånäs Slott "Vinterakvarell på handgjort papper" ═══════════════════════════════════════════════════════════════ */ :root { --paper: #f6f2e9; --paper-deep: #efe9db; --sand: #e3d9c4; --gold: #b3924f; --gold-deep: #97783c; --ink: #363433; --ink-soft: #625c58; --serif: "Cormorant Garamond", "Cormorant", Georgia, serif; --body: "EB Garamond", Georgia, serif; --script: "Pinyon Script", cursive; /* ── Tema: ROST (aktivt) — vinterrost/terrakotta, ej jul ── Växla till bla genom data-theme="blue" pa , eller besök sidan med ?theme=blue */ --wash-blue: #eddcd1; --wash-blue2: #e2cbbd; --dusty: #c69a87; --slate: #9c5b45; --sage: #c9b18f; --wash-rgb: 198, 154, 135; --wash2-rgb: 214, 187, 150; --sheet-a: #e3c6b5; --sheet-b: #d7b5a2; --tear-wash-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='42' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q30 4 75 16 T160 12 Q210 26 260 10 T370 18 Q420 2 480 16 T590 10 Q650 24 710 12 T820 18 Q860 6 900 20 L900 42 L0 42 Z' fill='%23eddcd1'/%3E%3Cpath d='M0 24 Q30 8 75 20 T160 16 Q210 30 260 14 T370 22 Q420 6 480 20 T590 14 Q650 28 710 16 T820 22 Q860 10 900 24 L900 42 L0 42 Z' fill='%23eddcd1' opacity='.45'/%3E%3C/svg%3E"); } /* ── Tema: BLA (originalet) ── */ [data-theme="blue"] { --wash-blue: #dde4ea; --wash-blue2: #cdd8e1; --dusty: #a8bac9; --slate: #7d93a8; --sage: #a9b3a1; --wash-rgb: 168, 186, 201; --wash2-rgb: 169, 179, 161; --sheet-a: #cfd9e2; --sheet-b: #c0cdd8; --ink: #33383c; --ink-soft: #5a6167; --tear-wash-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='42' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q30 4 75 16 T160 12 Q210 26 260 10 T370 18 Q420 2 480 16 T590 10 Q650 24 710 12 T820 18 Q860 6 900 20 L900 42 L0 42 Z' fill='%23dde4ea'/%3E%3Cpath d='M0 24 Q30 8 75 20 T160 16 Q210 30 260 14 T370 22 Q420 6 480 20 T590 14 Q650 28 710 16 T820 22 Q860 10 900 24 L900 42 L0 42 Z' fill='%23dde4ea' opacity='.45'/%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body); font-size: 1.125rem; line-height: 1.65; color: var(--ink); background-color: var(--paper); /* handmade paper: fibrous grain + faint warm mottling */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 90% 60% at 15% 8%, rgba(var(--wash-rgb), .10), transparent 60%), radial-gradient(ellipse 70% 50% at 88% 30%, rgba(227,217,196,.35), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--wash-rgb), .12), transparent 55%); overflow-x: hidden; } ::selection { background: var(--dusty); color: #fff; } /* ─── Snöfall ─────────────────────────────────────────────── */ #snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; opacity: .8; } /* ─── Typografi ───────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); } h2 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: .18em; text-transform: uppercase; text-align: center; margin-bottom: .4em; } .flourish { font-family: var(--script); text-transform: none; letter-spacing: 0; font-size: 1.25em; color: var(--slate); vertical-align: -0.06em; } .kicker { font-family: var(--serif); font-size: .85rem; letter-spacing: .42em; text-transform: uppercase; text-align: center; color: var(--gold-deep); margin-bottom: 1.1em; display: flex; align-items: center; justify-content: center; gap: 1.1em; } .kicker::before, .kicker::after { content: ""; width: 3.2em; height: 1px; flex-shrink: 0; } .kicker::before { background: linear-gradient(to right, transparent, var(--gold)); } .kicker::after { background: linear-gradient(to left, transparent, var(--gold)); } .lede { font-size: 1.25rem; text-align: center; max-width: 38em; margin: 0 auto; color: var(--ink-soft); } /* ─── Navigation ──────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: .65rem 1.4rem; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(179,146,79,.25); transition: transform .35s ease; } .nav.nav-hidden { transform: translateY(-100%); } .nav-monogram { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .1em; color: var(--gold-deep); text-decoration: none; border: 1px solid rgba(179,146,79,.5); border-radius: 50%; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; } .nav-links { display: flex; gap: 1.6rem; list-style: none; } .nav-links a { font-family: var(--serif); font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding-bottom: .2em; background: linear-gradient(var(--gold), var(--gold)) bottom center / 0% 1px no-repeat; transition: background-size .3s ease, color .25s; } .nav-links a:hover { color: var(--gold-deep); background-size: 100% 1px; } .nav-links .nav-osa { color: var(--gold-deep); border: 1px solid var(--gold); border-radius: 2em; padding: .35em 1em .3em; background-image: none; transition: background-color .25s, color .25s; } .nav-links .nav-osa:hover { background-color: var(--gold); color: var(--paper); } .nav-toggle { display: none; } /* ─── Hero ────────────────────────────────────────────────── */ .hero { min-height: 100vh; display: grid; place-items: center; padding: 6.5rem 1.25rem 3rem; position: relative; } /* ─── Flat-lay på stora skärmar: brevpapper runt inbjudan ── */ .hero-flatlay { display: none; } @media (min-width: 1180px) { .hero-flatlay { display: block; position: absolute; inset: 0; pointer-events: none; } .hero-flatlay .flatlay-sheet { position: absolute; top: 50%; left: 50%; width: 730px; height: 82%; translate: calc(-50% + var(--px, 0) * .4px) calc(-50% + var(--py, 0) * .4px); rotate: -3.4deg; background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(255,255,255,.25), transparent 60%), linear-gradient(160deg, var(--sheet-a), var(--sheet-b)); clip-path: polygon( 0.8% 1%, 10% 0.3%, 22% 1.2%, 36% 0.3%, 50% 1.1%, 64% 0.3%, 78% 1.2%, 90% 0.4%, 99.2% 1.2%, 99.6% 10%, 99.1% 24%, 99.7% 40%, 99.1% 56%, 99.6% 72%, 99.1% 86%, 99.5% 96%, 92% 99.6%, 80% 99%, 66% 99.7%, 52% 99%, 38% 99.6%, 24% 99%, 12% 99.7%, 2% 99%, 0.4% 90%, 0.9% 74%, 0.3% 58%, 0.9% 42%, 0.3% 26%, 0.8% 12% ); box-shadow: 0 24px 60px -20px rgba(51,56,60,.4); } .hero-flatlay .flatlay-card { position: absolute; background: #fbf8f1; box-shadow: 0 2px 4px rgba(51,56,60,.12), 0 16px 40px -14px rgba(51,56,60,.3); padding: 2rem 2.2rem 1.8rem; text-align: center; clip-path: polygon( 1% 2%, 8% 0.5%, 18% 1.5%, 30% 0.4%, 43% 1.6%, 56% 0.5%, 69% 1.4%, 81% 0.4%, 92% 1.5%, 99% 2.5%, 99.5% 12%, 99% 30%, 99.6% 50%, 99% 70%, 99.5% 88%, 98.5% 98%, 90% 99.4%, 78% 98.6%, 64% 99.5%, 50% 98.5%, 36% 99.4%, 22% 98.6%, 10% 99.5%, 1.5% 98%, 0.5% 86%, 1% 68%, 0.4% 50%, 1% 32%, 0.5% 14% ); } .hero-flatlay .flatlay-right { right: calc(50% - 700px); top: 24%; rotate: 6.5deg; translate: calc(var(--px, 0) * 1.1px) calc(var(--py, 0) * 1.1px); } .hero-flatlay .flatlay-left { left: calc(50% - 690px); top: 56%; rotate: -5.5deg; translate: calc(var(--px, 0) * .9px) calc(var(--py, 0) * .9px); } .flatlay-left.taped::before, .flatlay-left.taped::after { clip-path: none; } .seal-sm { width: 48px; height: 48px; margin-bottom: .9rem; } .seal-sm span { font-size: 1rem; } .fl-script { font-family: var(--script); font-size: 1.7rem; color: var(--slate); margin-bottom: .2em; } .fl-caps { font-family: var(--serif); font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); } .hero-card { position: relative; z-index: 2; } } @media (min-width: 1600px) { .flatlay-right { right: calc(50% - 780px); } .flatlay-left { left: calc(50% - 770px); } .flatlay-sheet { width: 780px; } } .hero-card { text-align: center; max-width: 620px; padding: 3.2rem 2.6rem 2.8rem; background: #fbf8f1; position: relative; box-shadow: 0 1px 2px rgba(51,56,60,.08), 0 12px 40px -12px rgba(51,56,60,.25); /* deckled paper edge */ clip-path: polygon( 0.6% 1.2%, 4% 0.2%, 9% 1%, 15% 0.4%, 22% 1.1%, 30% 0.3%, 38% 1%, 47% 0.2%, 55% 1.2%, 63% 0.4%, 71% 1%, 79% 0.3%, 87% 1.1%, 93% 0.4%, 97% 1.3%, 99.6% 3%, 99.2% 9%, 99.8% 17%, 99.1% 26%, 99.7% 36%, 99.2% 46%, 99.8% 56%, 99.1% 66%, 99.7% 76%, 99.2% 85%, 99.8% 92%, 99.3% 97%, 96% 99.6%, 89% 99%, 81% 99.7%, 72% 99.1%, 62% 99.8%, 52% 99.2%, 42% 99.8%, 33% 99.1%, 24% 99.7%, 16% 99.2%, 9% 99.8%, 4% 99.3%, 0.8% 97%, 0.3% 90%, 0.9% 81%, 0.2% 71%, 0.8% 60%, 0.3% 49%, 0.9% 38%, 0.2% 28%, 0.8% 18%, 0.3% 9% ); } .hero-eyebrow { font-family: var(--serif); font-size: .8rem; letter-spacing: .5em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2rem; } .hero-names { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.7rem; } .hero-name { font-family: "Petit Formal Script", var(--script), cursive; font-size: clamp(2.2rem, 6vw, 3.1rem); font-weight: 400; line-height: 1.15; white-space: nowrap; } .hero-amp, .hero-amp-sm { font-family: var(--script); font-size: clamp(2.2rem, 6vw, 3.2rem); color: var(--gold); line-height: .9; } .hero-amp { background: linear-gradient(110deg, var(--gold) 32%, #ecd49a 50%, var(--gold) 68%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: rise .9s ease-out both, shimmer 5.5s ease-in-out 1.6s infinite; animation-delay: var(--d, 0s), 1.6s; } @keyframes shimmer { 0%, 100% { background-position: 110% 0; } 50% { background-position: -10% 0; } } .hero-painting { margin: 0 auto 1.8rem; max-width: 460px; position: relative; } #paintingSnow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mask-image: radial-gradient(ellipse 65% 62% at 50% 47%, #000 46%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 65% 62% at 50% 47%, #000 46%, transparent 75%); } .hero-painting img { /* OBS: "backwards", inte "both" — ett kvarhängande filter (även blur(0)) tvingar Safari att rastrera lagret i 1x → suddig målning på mobil */ animation: inksettle 1.8s ease-out .75s backwards; width: 100%; height: auto; display: block; /* soft watercolor bleed into the paper */ mask-image: radial-gradient(ellipse 65% 62% at 50% 47%, #000 46%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 65% 62% at 50% 47%, #000 46%, transparent 75%); } @keyframes inksettle { from { filter: blur(9px) saturate(.75); transform: scale(1.045); } to { filter: blur(0) saturate(1); transform: none; } } .hero-venue { font-family: var(--serif); font-size: clamp(1.3rem, 3.5vw, 1.7rem); letter-spacing: .38em; text-transform: uppercase; margin-bottom: .5rem; } .hero-date { font-family: var(--serif); font-size: .95rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2rem; } /* nedräkning */ .countdown { display: flex; justify-content: center; align-items: baseline; gap: .9rem; padding: 1.1rem 0 .4rem; border-top: 1px solid rgba(179,146,79,.35); margin-bottom: 1.6rem; } .count-unit { display: flex; flex-direction: column; align-items: center; min-width: 3.2em; } .count-num { font-family: var(--serif); font-size: clamp(1.6rem, 4.5vw, 2.2rem); font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; } .count-label { font-family: var(--serif); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); } .count-sep { color: var(--gold); font-size: 1.4rem; align-self: center; padding-bottom: 1em; } .hero-cta { display: inline-block; font-family: var(--serif); font-size: .85rem; letter-spacing: .34em; text-transform: uppercase; color: var(--paper); background: var(--gold); padding: .8em 2.2em .7em; border-radius: 2em; text-decoration: none; transition: background-color .25s, transform .25s; position: relative; overflow: hidden; } .hero-cta:hover { background-color: var(--gold-deep); transform: translateY(-2px); } /* guldskimmer som sveper över knappar */ .hero-cta::after, .btn-solid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.38) 50%, transparent 58%); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; } .hero-cta:hover::after, .btn-solid:hover::after { transform: translateX(130%); } .scroll-hint { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); font-size: 1.6rem; color: var(--slate); animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%,100% { translate: 0 0; opacity: .55; } 50% { translate: 0 8px; opacity: 1; } } /* ─── Sektioner ───────────────────────────────────────────── */ .section { padding: 5.5rem 1.4rem; position: relative; } .section-blue { background: radial-gradient(ellipse 100% 80% at 20% 0%, rgba(var(--wash-rgb), .16), transparent 55%), radial-gradient(ellipse 90% 70% at 85% 100%, rgba(var(--wash2-rgb), .14), transparent 60%), linear-gradient(var(--wash-blue), var(--wash-blue)); } .section-inner { max-width: 1060px; margin: 0 auto; } .section-inner.narrow { max-width: 720px; } .section-inner.center { text-align: center; } /* riven pappers-kant mellan sektioner */ .tear { height: 42px; margin-top: -1px; background-repeat: repeat-x; background-size: auto 100%; } .tear-blue { background-image: var(--tear-wash-img); } .tear-paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='42' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q40 6 90 18 T190 12 Q240 26 300 10 T410 18 Q460 4 530 16 T640 10 Q700 24 760 12 T870 18 Q890 8 900 18 L900 42 L0 42 Z' fill='%23f6f2e9'/%3E%3Cpath d='M0 26 Q40 12 90 24 T190 18 Q240 32 300 16 T410 24 Q460 10 530 22 T640 16 Q700 30 760 18 T870 24 Q890 14 900 24 L900 42 L0 42 Z' fill='%23f6f2e9' opacity='.5'/%3E%3C/svg%3E"); } .tear-blue { background-color: var(--paper); } .tear-paper { background-color: var(--wash-blue); } /* ─── Sigill ──────────────────────────────────────────────── */ .seal { width: 62px; height: 62px; margin: 0 auto 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #cfae67, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 2px 6px rgba(151,120,60,.4), inset 0 0 0 3px rgba(246,242,233,.25), inset 0 0 12px rgba(90,70,30,.35); display: grid; place-items: center; } .seal span { font-family: "Petit Formal Script", var(--script), cursive; font-size: 1.05rem; letter-spacing: 0; color: var(--paper); text-shadow: 0 1px 2px rgba(90,70,30,.5); } .seal-inline { width: 46px; height: 46px; margin-bottom: 1rem; } .seal-footer { margin-bottom: 1rem; } /* ─── Fotografier: "itejpade" i albumet ───────────────────── */ .taped { position: relative; } .taped::before, .taped::after { content: ""; position: absolute; width: 84px; height: 25px; z-index: 2; background: linear-gradient(rgba(230,221,201,.85), rgba(219,208,184,.7)); box-shadow: 0 1px 3px rgba(51,56,60,.2); clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%); } .taped::before { top: -10px; left: -26px; rotate: -40deg; } .taped::after { bottom: -10px; right: -26px; rotate: -40deg; } .story-photo { margin: 2.6rem auto 0; max-width: 440px; } .story-photo img { width: 100%; height: auto; display: block; border: 10px solid #fbf8f1; box-shadow: 0 2px 4px rgba(51,56,60,.12), 0 18px 44px -14px rgba(51,56,60,.3); transform: rotate(-.7deg); } .story-photo figcaption { text-align: center; font-style: italic; font-size: .95rem; color: var(--ink-soft); margin-top: 1.1rem; } .photo-band { padding: 4.5rem 1.6rem 5rem; } .photo-band figure { max-width: 920px; margin: 0 auto; } .photo-band img { width: 100%; height: auto; display: block; border: 12px solid #fbf8f1; box-shadow: 0 2px 4px rgba(51,56,60,.12), 0 22px 52px -16px rgba(51,56,60,.35); transform: rotate(.35deg); } .osa-photo { width: min(280px, 68%); margin: 2.4rem auto 0; transform: rotate(1.4deg); } .osa-photo img { width: 100%; height: auto; display: block; border: 9px solid #fbf8f1; box-shadow: 0 2px 4px rgba(51,56,60,.12), 0 14px 34px -12px rgba(51,56,60,.3); } /* ─── Program / tidslinje ─────────────────────────────────── */ .timeline { list-style: none; max-width: 640px; margin: 3rem auto 0; position: relative; padding-left: 0; } .timeline::before { content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--gold) 0 70%, transparent); opacity: .6; } .tl-item { display: grid; grid-template-columns: 68px 48px 1fr; margin-bottom: 2.4rem; position: relative; } .tl-item::before { /* lyktan/flamman */ content: ""; grid-column: 2; grid-row: 1; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 40% 35%, #e8c97e, var(--gold)); box-shadow: 0 0 0 4px rgba(179,146,79,.18), 0 0 14px rgba(179,146,79,.55); justify-self: center; margin-top: .5em; } .tl-time { grid-column: 1; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; color: var(--slate); text-align: right; padding-right: .4rem; font-variant-numeric: tabular-nums; } .tl-time--word { font-size: .82rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding-top: .35em; } .tl-dayrow { display: grid; grid-template-columns: 68px 48px 1fr; margin: 2.8rem 0 1.6rem; } .timeline .tl-dayrow:first-child { margin-top: 0; } .tl-dayname { grid-column: 3; padding-left: .4rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .tl-dayname::after { content: ""; display: block; width: 3.4em; height: 1px; margin-top: .35em; background: linear-gradient(to right, var(--gold), transparent); } .tl-body { grid-column: 3; padding-left: .4rem; } .tl-body h3 { font-size: 1.3rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .3em; } .tl-body p { color: var(--ink-soft); font-size: 1.05rem; } /* ─── Platsen ─────────────────────────────────────────────── */ .venue-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; margin-top: 2.6rem; align-items: start; } .venue-text p { margin-bottom: 1.1em; color: var(--ink-soft); } .venue-sub { font-size: 1.2rem; letter-spacing: .2em; text-transform: uppercase; margin: 1.6em 0 .5em; } .venue-text address { font-style: normal; font-weight: 500; margin-bottom: .8em; } .venue-facts { list-style: none; margin-bottom: 1.6em; } .venue-facts li { margin-bottom: .7em; color: var(--ink-soft); } .venue-facts strong { color: var(--ink); } .venue-facts a { color: var(--gold-deep); } /* telefonlänkar (toastmasters): smälter in i texten, diskret understrykning */ a[href^="tel:"] { color: var(--ink); text-decoration-color: rgba(54,52,51,.35); text-underline-offset: 2px; } .venue-map { position: sticky; top: 90px; } .venue-map iframe { width: 100%; aspect-ratio: 4 / 5; border: 10px solid #fbf8f1; box-shadow: 0 2px 4px rgba(51,56,60,.12), 0 18px 44px -14px rgba(51,56,60,.3); filter: sepia(.18) saturate(.82); display: block; } .btn-outline, .btn-solid { display: inline-block; font-family: var(--serif); font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; border-radius: 2em; padding: .85em 2em .75em; cursor: pointer; transition: all .25s; } .btn-outline { color: var(--gold-deep); border: 1px solid var(--gold); background: transparent; } .btn-outline:hover { background: var(--gold); color: var(--paper); } .btn-solid { color: var(--paper); background: var(--gold); border: 1px solid var(--gold); font-size: .9rem; position: relative; overflow: hidden; } .btn-solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-2px); } /* ─── Boende & klädkod ────────────────────────────────────── */ .stay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 2.4rem auto 0; } .stay-card { background: #fbf8f1; padding: 1.9rem 1.8rem 1.6rem; text-align: center; box-shadow: 0 2px 4px rgba(51,56,60,.1), 0 12px 30px -12px rgba(51,56,60,.22); clip-path: polygon( 1% 2%, 8% 0.5%, 18% 1.5%, 30% 0.4%, 43% 1.6%, 56% 0.5%, 69% 1.4%, 81% 0.4%, 92% 1.5%, 99% 2.5%, 99.5% 12%, 99% 30%, 99.6% 50%, 99% 70%, 99.5% 88%, 98.5% 98%, 90% 99.4%, 78% 98.6%, 64% 99.5%, 50% 98.5%, 36% 99.4%, 22% 98.6%, 10% 99.5%, 1.5% 98%, 0.5% 86%, 1% 68%, 0.4% 50%, 1% 32%, 0.5% 14% ); } .stay-card h3 { font-size: 1.15rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: .5em; } .stay-card p { color: var(--ink-soft); font-size: 1.02rem; } .stay-price { text-align: center; margin-top: 1.8rem; color: var(--ink-soft); } .dresscode { margin-top: 3rem; text-align: center; background: #fbf8f1; padding: 2.4rem 2rem 2rem; box-shadow: 0 2px 4px rgba(51,56,60,.1), 0 14px 36px -14px rgba(51,56,60,.25); clip-path: polygon( 1% 2%, 8% 0.5%, 18% 1.5%, 30% 0.4%, 43% 1.6%, 56% 0.5%, 69% 1.4%, 81% 0.4%, 92% 1.5%, 99% 2.5%, 99.5% 12%, 99% 30%, 99.6% 50%, 99% 70%, 99.5% 88%, 98.5% 98%, 90% 99.4%, 78% 98.6%, 64% 99.5%, 50% 98.5%, 36% 99.4%, 22% 98.6%, 10% 99.5%, 1.5% 98%, 0.5% 86%, 1% 68%, 0.4% 50%, 1% 32%, 0.5% 14% ); } .dresscode h3 { font-size: 1.1rem; letter-spacing: .34em; text-transform: uppercase; margin-bottom: .4em; } .dc-main { font-family: var(--script); font-size: 2.1rem; color: var(--slate); margin-bottom: .4em; } .dc-note { font-size: 1rem; color: var(--ink-soft); max-width: 34em; margin: 0 auto; } /* ─── OSA-formulär ────────────────────────────────────────── */ .rsvp { margin-top: 2.6rem; padding: 2.6rem 2.4rem; display: flex; flex-direction: column; gap: 1.4rem; position: relative; } /* Papperet ligger som eget lager bakom formuläret: clip-path på .rsvp själv skulle klippa autocomplete-listan som sticker ut under kanten */ .rsvp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fbf8f1; box-shadow: 0 2px 4px rgba(51,56,60,.1), 0 16px 40px -14px rgba(51,56,60,.25); clip-path: polygon( 0.8% 1%, 10% 0.3%, 22% 1.2%, 36% 0.3%, 50% 1.1%, 64% 0.3%, 78% 1.2%, 90% 0.4%, 99.2% 1.2%, 99.6% 10%, 99.1% 24%, 99.7% 40%, 99.1% 56%, 99.6% 72%, 99.1% 86%, 99.5% 96%, 92% 99.6%, 80% 99%, 66% 99.7%, 52% 99%, 38% 99.6%, 24% 99%, 12% 99.7%, 2% 99%, 0.4% 90%, 0.9% 74%, 0.3% 58%, 0.9% 42%, 0.3% 26%, 0.8% 12% ); } .field label, .field legend { display: block; font-family: var(--serif); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45em; } .field label em { text-transform: none; letter-spacing: .05em; } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; font-family: var(--body); font-size: 1.05rem; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid rgba(90,97,103,.4); padding: .45em .1em; outline: none; transition: border-color .25s; border-radius: 0; } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); } .field textarea { resize: vertical; } .field-radios { border: none; } .field-radios .radio, .person-card .radio, .person-card .checkbox { display: inline-flex; align-items: center; gap: .5em; margin: .2em 1.6em .2em 0; cursor: pointer; font-size: 1.05rem; } .field-radios input, .person-card input[type="radio"], .person-card input[type="checkbox"] { accent-color: var(--gold-deep); width: 1.05em; height: 1.05em; } /* radioetiketter är löptext, inte rubriker (motverka .field label-stilen) */ .field-radios label.radio { text-transform: none; letter-spacing: normal; font-family: var(--body); color: var(--ink); } /* ─── OSA: autocomplete ───────────────────────────────────── */ .field-ac { position: relative; } .ac-list { position: absolute; left: 0; right: 0; z-index: 4; margin: 0; padding: 0; list-style: none; background: #fffdf8; border: 1px solid var(--sand); box-shadow: 0 10px 26px -8px rgba(51,56,60,.3); } .ac-list li { padding: .55em .9em; cursor: pointer; font-size: 1.02rem; } .ac-list li:hover { background: var(--paper-deep); } .ac-miss { margin-top: .5em; font-size: .92rem; font-style: italic; color: var(--ink-soft); } /* ─── OSA: personkort & sällskap ─────────────────────────── */ .person-card { border: 1px solid var(--sand); background: #fffdf8; padding: 1.2rem 1.3rem 1.1rem; margin-bottom: 1.1rem; } .pc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; } .pc-name { font-family: var(--serif); font-size: 1.2rem; letter-spacing: .06em; font-weight: 600; } .pc-remove { background: none; border: none; font-size: 1.4rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 .2em; } .pc-remove:hover { color: var(--slate); } .pc-food { margin-top: .8rem; } .pc-food-label, .ap-label { font-family: var(--serif); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5em; } .pc-allergy, .pc-email { margin-top: .9rem; } .add-persons { margin: .2rem 0 .6rem; } .ap-buttons { display: flex; flex-wrap: wrap; gap: .6em; } .ap-btn { font-family: var(--body); font-size: 1rem; padding: .45em 1em; background: none; border: 1px solid var(--gold); color: var(--gold-deep); cursor: pointer; transition: background .2s, color .2s; } .ap-btn:hover { background: var(--gold); color: #fff; } .legend-note { display: block; text-transform: none; letter-spacing: .04em; font-size: .82rem; margin-top: .3em; } .rsvp-details { display: flex; flex-direction: column; gap: 1.4rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .4s ease .1s; } .rsvp-details.open { max-height: 600px; opacity: 1; } .rsvp .btn-solid { align-self: center; margin-top: .4rem; } /* ─── Bildgalleri ─────────────────────────────────────────── */ .gallery { columns: 3; gap: 1.4rem; margin-top: 2.6rem; } .gallery-item { break-inside: avoid; margin: 0 0 1.4rem; background: #fdfbf6; padding: 9px; box-shadow: 0 2px 5px rgba(51,56,60,.14), 0 12px 30px -12px rgba(51,56,60,.3); } .gallery-item img { width: 100%; height: auto; display: block; } @media (max-width: 880px) { .gallery { columns: 2; gap: 1rem; } .gallery-item { margin-bottom: 1rem; } } @media (max-width: 560px) { .gallery { columns: 1; } } /* ─── Tackkort (bekräftelsemodal) ─────────────────────────── */ .thanks { border: none; padding: 0; background: transparent; max-width: min(92vw, 430px); width: 100%; max-height: 88vh; overflow: visible; margin: auto; /* den globala margin-nollningen slår ut dialogens egen centrering */ outline: none; } .thanks::backdrop { background: rgba(42, 36, 30, .55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .tm-card { position: relative; background: #fbf8f1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); padding: 2.4rem 2rem 2.1rem; text-align: center; max-height: 88vh; overflow-y: auto; box-shadow: 0 6px 18px rgba(30,25,20,.3), 0 30px 70px -20px rgba(30,25,20,.5); } .thanks[open] .tm-card { animation: tmSettle .55s cubic-bezier(.2,.9,.3,1) both; } /* skrollbar yta blir autofokuserad av showModal — ingen ring på själva kortet */ .tm-card:focus { outline: none; } @keyframes tmSettle { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } } .tm-rules { height: 2.2mm; border-top: .5px solid rgba(98,92,88,.75); border-bottom: .5px solid rgba(98,92,88,.75); margin: 0 .2rem; } .tm-fleuron { font-family: var(--serif); font-size: 1.15rem; color: var(--slate); margin: 1.5rem 0 .9rem; } .thanks[open] .tm-fleuron { animation: tmSeal .6s cubic-bezier(.2,1.4,.4,1) .25s both; } @keyframes tmSeal { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } .tm-eyebrow { font-family: var(--serif); font-size: .72rem; letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; color: var(--ink-soft); } .tm-title { font-family: "Petit Formal Script", var(--script), cursive; font-size: clamp(1.9rem, 6vw, 2.4rem); font-weight: 400; margin: .35em 0 .3em; color: var(--ink); text-transform: none; /* motverka globala h2-stilen */ letter-spacing: 0; } .tm-lede { font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); max-width: 30ch; margin: 0 auto 1.4rem; } .tm-summary { border-top: .5px solid rgba(98,92,88,.45); text-align: left; margin-bottom: 1.4rem; } .tm-row { padding: .75rem .2rem; border-bottom: .5px solid rgba(98,92,88,.45); } .tm-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .tm-row-name { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; letter-spacing: .04em; } .tm-row-att { font-family: var(--serif); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .tm-row-att.yes { color: var(--gold-deep); } .tm-row-att.no { color: var(--ink-soft); } .tm-row-detail { font-size: .92rem; color: var(--ink-soft); margin-top: .2rem; } .tm-boende { padding: .7rem .2rem; font-size: .92rem; font-style: italic; color: var(--ink-soft); border-bottom: .5px solid rgba(98,92,88,.45); } .tm-note { font-size: .85rem; font-style: italic; color: var(--ink-soft); max-width: 32ch; margin: 0 auto 1.3rem; } .tm-btn { margin-bottom: 1.6rem; } .tm-close { position: absolute; top: .6rem; right: .8rem; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: .2em; } .tm-close:hover { color: var(--ink); } @media (prefers-reduced-motion: reduce) { .thanks[open] .tm-card, .thanks[open] .tm-photo-wrap { animation: none; } } @media (max-width: 640px) { .tm-card { padding: 2rem 1.3rem 1.8rem; } } .rsvp-status { text-align: center; font-style: italic; color: var(--gold-deep); min-height: 1.4em; } /* ─── FAQ ─────────────────────────────────────────────────── */ .faq { margin-top: 2.4rem; } .faq details { border-bottom: 1px solid rgba(179,146,79,.35); padding: 1.1rem .2rem; interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; } .faq details[open]::details-content { block-size: auto; } .faq summary { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; letter-spacing: .04em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.5rem; color: var(--gold); transition: transform .3s; flex-shrink: 0; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: .8em .2em .2em; color: var(--ink-soft); } /* ─── Footer: natt på slottet ─────────────────────────────── */ .tear-night { background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='42' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q30 4 75 16 T160 12 Q210 26 260 10 T370 18 Q420 2 480 16 T590 10 Q650 24 710 12 T820 18 Q860 6 900 20 L900 42 L0 42 Z' fill='%232e3a46'/%3E%3Cpath d='M0 24 Q30 8 75 20 T160 16 Q210 30 260 14 T370 22 Q420 6 480 20 T590 14 Q650 28 710 16 T820 22 Q860 10 900 24 L900 42 L0 42 Z' fill='%232e3a46' opacity='.45'/%3E%3C/svg%3E"); } .footer { position: relative; text-align: center; padding: 2.6rem 1.4rem 3.6rem; background: radial-gradient(ellipse 130% 90% at 50% 120%, rgba(179,146,79,.16), transparent 60%), linear-gradient(#2e3a46 0%, #26303b 55%, #1e2731 100%); overflow: hidden; } .footer::before { content: ""; position: absolute; inset: 0 0 42% 0; background-image: radial-gradient(1.3px 1.3px at 11% 24%, rgba(246,242,233,.9), transparent 50%), radial-gradient(1px 1px at 23% 62%, rgba(246,242,233,.7), transparent 50%), radial-gradient(1.6px 1.6px at 34% 18%, rgba(246,242,233,.95), transparent 50%), radial-gradient(1px 1px at 45% 45%, rgba(246,242,233,.6), transparent 50%), radial-gradient(1.4px 1.4px at 57% 12%, rgba(246,242,233,.85), transparent 50%), radial-gradient(1px 1px at 66% 55%, rgba(246,242,233,.65), transparent 50%), radial-gradient(1.5px 1.5px at 78% 28%, rgba(246,242,233,.9), transparent 50%), radial-gradient(1px 1px at 89% 60%, rgba(246,242,233,.7), transparent 50%), radial-gradient(1.2px 1.2px at 94% 15%, rgba(246,242,233,.8), transparent 50%); animation: twinkle 5s ease-in-out infinite alternate; pointer-events: none; } @keyframes twinkle { from { opacity: .5; } to { opacity: 1; } } .seal-footer { position: relative; margin-top: 1.6rem; } .footer-script { font-family: var(--script); font-size: clamp(2rem, 5vw, 2.7rem); color: #d3ab61; margin: .1em 0 .5em; position: relative; } .footer-names { font-family: var(--serif); font-size: 1.8rem; letter-spacing: .22em; text-transform: uppercase; color: #ece5d4; position: relative; } .hero-amp-sm { font-size: 1.6em; } .footer-line { font-family: var(--serif); letter-spacing: .3em; text-transform: uppercase; font-size: .78rem; color: #93a5b5; margin: .7em 0 1.4em; position: relative; } .footer-note { font-size: .95rem; color: #8b99a7; font-style: italic; position: relative; } /* ─── Reveal-animationer ──────────────────────────────────── */ .reveal-load { opacity: 0; translate: 0 18px; animation: rise .9s ease-out forwards; animation-delay: var(--d, 0s); } @keyframes rise { to { opacity: 1; translate: 0 0; } } .reveal-fade { opacity: 0; animation: fadein 1.4s ease-out forwards; animation-delay: var(--d, 0s); } @keyframes fadein { to { opacity: 1; } } .reveal { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .8s ease; } .reveal.in { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-load, .reveal { opacity: 1; translate: 0 0; animation: none; transition: none; } .reveal-fade { opacity: 1; animation: none; } .scroll-hint { animation: none; } #snow { display: none; } .hero-painting img { animation: none; } .hero-amp { animation: rise .01s both; } .footer::before { animation: none; } .faq details::details-content { transition: none; } } /* ─── Responsivt ──────────────────────────────────────────── */ @media (max-width: 880px) { .venue-grid { grid-template-columns: 1fr; gap: 2rem; } .venue-map { position: static; } .venue-map iframe { aspect-ratio: 4 / 3; } } @media (max-width: 640px) { body { font-size: 1.05rem; } .section { padding: 4rem 1.1rem; } .hero { padding-top: 5.4rem; padding-bottom: 2.4rem; } .hero-card { padding: 2.5rem 1.2rem 2rem; } .hero-eyebrow { font-size: .68rem; letter-spacing: .34em; margin-bottom: 1.6rem; } .hero-name { font-size: clamp(1.9rem, 8vw, 2.4rem); } .hero-amp { font-size: 2rem; } .hero-venue { letter-spacing: .26em; } .hero-date { font-size: .78rem; letter-spacing: .16em; } .countdown { gap: .55rem; } .count-unit { min-width: 2.4em; } .count-num { font-size: 1.5rem; } .count-label { font-size: .55rem; letter-spacing: .16em; } .count-sep { display: none; } h2 { letter-spacing: .12em; } /* "Platsen — Rånäs Slott" bryts till två centrerade rader på mobil. translateX = optisk centrering: R:ets svep drar visuellt åt vänster */ #platsen .platsen-dash { display: none; } #platsen h2 .flourish { display: block; margin-top: .1em; transform: translateX(.14em); } .kicker { font-size: .72rem; letter-spacing: .26em; } .kicker::before, .kicker::after { width: 1.8em; } .lede { font-size: 1.12rem; } .taped::before, .taped::after { width: 62px; height: 19px; } .taped::before { top: -8px; left: -18px; } .taped::after { bottom: -8px; right: -18px; } .photo-band { padding: 3.2rem 1.3rem 3.6rem; } .photo-band img { border-width: 7px; } .story-photo img, .osa-photo img { border-width: 7px; } .dc-main { font-size: 1.8rem; } .faq summary { font-size: 1.12rem; } .footer-names { font-size: 1.4rem; } .footer-script { margin-top: .3em; } .rsvp { padding: 1.8rem 1.2rem; } .timeline::before { left: 74px; } .tl-item { grid-template-columns: 56px 36px 1fr; margin-bottom: 1.9rem; } .tl-body h3 { font-size: 1.15rem; letter-spacing: .1em; } .tl-time--word { font-size: .68rem; letter-spacing: .08em; } .tl-dayrow { grid-template-columns: 56px 36px 1fr; margin: 2.2rem 0 1.3rem; } .tl-dayname { font-size: 1.12rem; letter-spacing: .14em; } .stay-grid { grid-template-columns: 1fr; gap: 1.1rem; } .nav { flex-wrap: wrap; } .nav-toggle { display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: .6rem .2rem; } .nav-toggle span { width: 26px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .3s; } .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); } .nav-links { display: none; flex-direction: column; align-items: center; gap: 1.1rem; width: 100%; padding: 1rem 0 1.4rem; } .nav-links.open { display: flex; } } /* länkar i löptext (t.ex. önskelistan under Gåvor) */ .lede a { color: var(--gold-deep); text-underline-offset: 3px; } /* Swish-numret ska aldrig radbrytas (lätt att läsa/kopiera på mobil) */ .js-swish { white-space: nowrap; }