/* ============================================================ Αλέξης & Ρενάτε — 12.09.2026 Editorial / cinematic wedding site. Black & white photography, warm paper, sage botanical accent. Greek language. ============================================================ */ /* ---------- Fonts ---------- */ /* Cormorant Garamond (display, Greek) + Inter (UI, Greek) loaded in */ /* ---------- Design tokens ---------- */ :root { /* palette */ --paper: #F3EEE5; /* warm cream */ --paper-2: #EAE2D4; /* deeper cream panels */ --paper-3: #E2D8C6; --ink: #1B1916; /* warm near-black */ --ink-soft: #4C4740; --ink-faint: #8A8276; --line: rgba(27, 25, 22, 0.16); --line-soft: rgba(27, 25, 22, 0.08); --sage: #76805F; /* eucalyptus accent */ --sage-deep: #5C6549; --gold: #A98F63; /* used very sparingly */ --cream-glass: rgba(243, 238, 229, 0.72); /* dark (over-photo) */ --on-dark: #F4EFE6; --on-dark-soft: rgba(244, 239, 230, 0.74); /* type */ --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* fluid scale */ --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.18rem); --step-1: clamp(1.22rem, 1.06rem + 0.8vw, 1.72rem); --step-2: clamp(1.65rem, 1.3rem + 1.8vw, 2.6rem); --step-3: clamp(2.1rem, 1.4rem + 3.4vw, 4.1rem); --step-4: clamp(2.8rem, 1rem + 8vw, 6.6rem); /* spacing */ --gutter: clamp(1.25rem, 5vw, 6rem); --section-y: clamp(5rem, 12vh, 11rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --maxw: 1320px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } html, body { height: 100%; } body { font-family: var(--sans); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: var(--sage); color: var(--paper); } /* ---------- Lenis smooth scroll ---------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } /* ============================================================ Typography helpers ============================================================ */ .display { font-family: var(--display); font-weight: 500; line-height: 0.98; letter-spacing: -0.01em; } .serif { font-family: var(--display); } .eyebrow { font-family: var(--sans); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--sage-deep); } .eyebrow--light { color: var(--on-dark-soft); } .lede { font-family: var(--display); font-weight: 400; font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); } .script-accent { /* used for small italic flourishes */ font-family: var(--display); font-style: italic; font-weight: 400; } /* ============================================================ Layout ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-y); } .center { text-align: center; } .divider-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background: var(--sage); vertical-align: middle; } /* thin rule used as a decorative separator */ .rule { width: 1px; height: clamp(48px, 9vh, 110px); background: linear-gradient(var(--line), transparent); margin-inline: auto; } .rule--ink { background: linear-gradient(var(--ink), transparent); opacity: .35; } .rule--light { background: linear-gradient(var(--on-dark), transparent); opacity:.5; } /* ============================================================ Intro — opening envelope (the signature moment) ============================================================ */ #intro { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(125% 95% at 50% 28%, #f8f4eb 0%, var(--paper) 52%, #e6dccb 100%); display: grid; place-items: center; perspective: 1500px; transition: opacity 1s var(--ease); } #intro.done { opacity: 0; pointer-events: none; } .env { position: relative; width: clamp(290px, 80vw, 440px); aspect-ratio: 1.5 / 1; transform-style: preserve-3d; filter: drop-shadow(0 42px 64px rgba(40,34,24,.30)); } .env > div { position: absolute; } .env__back { inset: 0; background: linear-gradient(160deg,#efe7d8,#e3d8c4); border-radius: 9px; } .env__letter { inset: 7% 8%; background: linear-gradient(180deg,#fffdf9,#f5eee0); border: 1px solid rgba(120,110,90,.16); border-radius: 4px; box-shadow: 0 12px 34px -18px rgba(40,34,24,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5% 8%; text-align: center; transform-origin: center bottom; z-index: 2; } .env__letter .mono-svg { width: clamp(50px,13vw,72px); margin-bottom: .55rem; overflow: visible; } .env__sub { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); } .env__names { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem,5.6vw,2.15rem); margin: .45rem 0 .25rem; } .env__date { font-size: .64rem; letter-spacing: .36em; text-transform: uppercase; color: var(--sage-deep); } .env__front { inset: 0; background: linear-gradient(165deg,#f1e9da 0%, #e7dcc8 100%); clip-path: polygon(0% 15%, 50% 45%, 100% 15%, 100% 100%, 0% 100%); border-radius: 0 0 9px 9px; z-index: 4; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .env__flap { inset: 0; background: linear-gradient(180deg,#ece2d0 0%, #ddd1ba 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 62%); transform-origin: top center; z-index: 5; backface-visibility: hidden; box-shadow: 0 3px 8px rgba(40,34,24,.07); } .env__seal { left: 50%; top: 45%; transform: translate(-50%,-50%); width: clamp(46px,12vw,62px); height: clamp(46px,12vw,62px); border-radius: 50%; background: radial-gradient(circle at 38% 32%, #919b78, var(--sage-deep) 72%); display: grid; place-items: center; z-index: 6; box-shadow: 0 5px 14px rgba(40,34,24,.4), inset 0 2px 6px rgba(255,255,255,.2), inset 0 -3px 8px rgba(0,0,0,.28); } .env__seal span { font-family: var(--display); color: #f3eee5; font-size: clamp(.95rem,3vw,1.2rem); letter-spacing: .02em; } .env__seal i { opacity: .55; padding: 0 1px; font-style: normal; } .intro__btn { position: absolute; bottom: clamp(8%,12vh,15%); left: 50%; transform: translateX(-50%); font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: .85rem 1.7rem; border-radius: 100px; background: transparent; transition: background .4s var(--ease), color .4s var(--ease); } .intro__btn:hover { background: var(--ink); color: var(--paper); } .intro__hint { position: absolute; bottom: clamp(3.5%,6vh,8%); left: 50%; transform: translateX(-50%); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); animation: hintpulse 2.4s ease-in-out infinite; } @keyframes hintpulse { 0%,100%{opacity:.35} 50%{opacity:.85} } /* monogram stroke draw */ .draw path, .draw line { stroke: var(--ink); stroke-width: 2.2; fill: none; vector-effect: non-scaling-stroke; } /* ============================================================ Petals / drifting botanicals + custom cursor ============================================================ */ .petals { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; } .cursor { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .4s var(--ease); } .cursor.on { opacity: .95; } .cursor span { display: block; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; transition: transform .28s var(--ease), opacity .28s var(--ease); } .cursor.is-hover span { transform: scale(3); } .cursor.is-down span { transform: scale(1.6); } @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* ============================================================ Navigation ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: clamp(.85rem, 2vh, 1.4rem) var(--gutter); color: var(--on-dark); transition: background .5s var(--ease), color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); } .nav::before { /* readability scrim over the hero image */ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: linear-gradient(180deg, rgba(10,9,8,.6) 0%, rgba(10,9,8,0) 100%); transition: opacity .4s var(--ease); } .nav__mono, .nav__links a, .nav__cta { text-shadow: 0 1px 16px rgba(0,0,0,.34); transition: text-shadow .4s var(--ease); } .nav--solid { /* once scrolled into content */ color: var(--ink); background: rgba(243,238,229,.86); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); box-shadow: 0 1px 0 var(--line), 0 12px 30px -24px rgba(27,25,22,.55); padding-top: .7rem; padding-bottom: .7rem; } .nav--solid::before { opacity: 0; } .nav--solid .nav__mono, .nav--solid .nav__links a, .nav--solid .nav__cta { text-shadow: none; } .nav__mono { font-family: var(--display); font-size: 1.35rem; letter-spacing:.18em; font-weight:600; } .nav__links { display:flex; gap: clamp(1rem, 2.4vw, 2.4rem); } .nav__links a { font-size: var(--step--1); letter-spacing:.16em; text-transform: uppercase; position: relative; opacity:.94; } .nav__links a::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .nav__links a:hover { opacity:1; } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } @media (max-width: 760px){ .nav__links { display:none; } } /* mobile menu button */ .nav__cta { font-size: var(--step--1); letter-spacing:.18em; text-transform: uppercase; border:1px solid currentColor; padding:.5rem .95rem; border-radius: 100px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--ink); } .hero__media { position: absolute; inset: -8% 0 -8% 0; will-change: transform; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: grayscale(100%) contrast(1.04) brightness(.92); } .hero__scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,9,8,.42) 0%, rgba(10,9,8,.12) 26%, rgba(10,9,8,.16) 60%, rgba(10,9,8,.66) 100%); } .hero__grain { position:absolute; inset:0; opacity:.06; mix-blend-mode: overlay; pointer-events:none; } .hero__inner { position: relative; z-index: 3; height:100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align:center; color: var(--on-dark); padding: 6rem var(--gutter) 5.5rem; gap: clamp(.6rem, 1.7vh, 1.2rem); } .hero__eyebrow { display:block; } .hero__names { font-family: var(--display); font-weight: 500; font-size: clamp(2.7rem, 9vw, 6.4rem); line-height: .96; letter-spacing: -0.01em; text-transform: uppercase; max-width: 16ch; } .hero__names .amp { font-style: italic; font-weight:400; text-transform:none; color: var(--on-dark-soft); padding: 0 .04em; } .hero__meta { display:flex; flex-direction:column; gap:.5rem; align-items:center; margin-top:.4rem; } .hero__date { font-size: var(--step--1); letter-spacing:.42em; text-transform: uppercase; color: var(--on-dark-soft); padding-left:.42em; } .hero__place { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--on-dark); max-width: 30ch; } .hero__scroll { position: absolute; bottom: clamp(1rem,3vh,2rem); left:50%; transform: translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:.6rem; color: var(--on-dark-soft); font-size: .68rem; letter-spacing:.3em; text-transform:uppercase; } .hero__scroll .line { width:1px; height:46px; background: currentColor; transform-origin: top; } .line-anim { animation: scrolldown 2.4s var(--ease-in-out) infinite; } @keyframes scrolldown { 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* word reveal mask */ .reveal-mask { display:block; overflow:hidden; } .reveal-mask > * { display:block; } /* ============================================================ Invitation block ============================================================ */ .invite { text-align:center; } .invite__lead { font-family: var(--display); font-weight: 400; font-size: var(--step-2); line-height: 1.25; letter-spacing: -0.01em; max-width: 18ch; margin-inline:auto; color: var(--ink); } .invite__date { margin-top: 1.6rem; font-size: var(--step--1); letter-spacing:.4em; text-transform:uppercase; color: var(--sage-deep); } .invite__divider { margin: clamp(2.5rem,6vh,4rem) auto; } .parties { display:grid; gap: clamp(2rem,4vw,3rem); grid-template-columns: 1fr; max-width: 980px; margin-inline:auto; } @media (min-width:720px){ .parties { grid-template-columns: repeat(3,1fr); } } .party { text-align:center; padding: 0 .4rem; } .party h3 { font-family: var(--sans); font-size: var(--step--1); letter-spacing:.22em; text-transform:uppercase; color: var(--sage-deep); font-weight:600; margin-bottom: 1rem; min-height: 2.6em; display:flex; align-items:center; justify-content:center; line-height:1.35; } .party p { font-family: var(--display); font-size: var(--step-1); line-height:1.3; color: var(--ink); } .party__amp { display:block; font-style: italic; font-size: .82em; color: var(--ink-faint); margin: .3rem 0; } /* monogram inline */ .mono-mark { display:grid; place-items:center; margin: 0 auto clamp(1.5rem,4vh,2.5rem); } .mono-mark svg { width: clamp(64px, 9vw, 96px); height:auto; } .mono-mark svg path, .mono-mark svg line { stroke: var(--ink); } /* ============================================================ Countdown ============================================================ */ .countdown { display:flex; justify-content:center; gap: clamp(1rem, 4vw, 3.5rem); flex-wrap:wrap; margin-top: clamp(1.5rem,4vh,2.5rem); } .cd-unit { text-align:center; min-width: 64px; } .cd-num { font-family: var(--display); font-weight:500; font-size: var(--step-3); line-height:1; font-variant-numeric: tabular-nums; color: var(--ink); } .cd-lab { margin-top:.5rem; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color: var(--ink-faint); } /* ============================================================ Parallax photo sections (full-bleed cinematic) ============================================================ */ .cinema { position: relative; height: clamp(78vh, 100svh, 100svh); overflow:hidden; display:grid; place-items:center; color: var(--on-dark); background: var(--ink); } .cinema__media { position:absolute; inset: -12% 0; will-change: transform; } .cinema__media img { width:100%; height:100%; object-fit:cover; filter: grayscale(100%) contrast(1.05) brightness(.8); } .cinema__scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,8,7,.55), rgba(8,8,7,.32) 40%, rgba(8,8,7,.62)); } .cinema__content { position:relative; z-index:2; text-align:center; max-width: 60ch; padding-inline: var(--gutter); } .cinema__title { font-family: var(--display); font-weight:500; font-size: var(--step-3); line-height:1.02; margin: .8rem 0 1.2rem; } .cinema__text { font-family: var(--display); font-size: var(--step-1); font-weight:400; color: var(--on-dark-soft); line-height:1.55; } .cinema__text strong { color: var(--on-dark); font-weight:600; } /* floating sprig accents */ .sprig { position:absolute; z-index:1; opacity:.5; pointer-events:none; color: var(--on-dark); } /* ============================================================ "How to get there" — the centerpiece ============================================================ */ .journey { background: var(--paper-2); position: relative; overflow: hidden; } .journey__head { text-align:center; max-width: 56ch; margin: 0 auto clamp(2.5rem,6vh,4rem); } .journey__title { font-family: var(--display); font-weight:500; font-size: var(--step-3); line-height:1.0; margin:.8rem 0 1.2rem; } /* the animated route map: SVG path draws as you scroll */ .route { position: relative; margin: clamp(2rem,5vh,3rem) auto; max-width: 920px; } .route__svg { width:100%; height:auto; overflow: visible; } .route__line { fill:none; stroke: var(--sage); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .route__line--ghost { stroke: var(--line); stroke-width: 3; stroke-dasharray: 5 9; } .route__stop circle { fill: var(--paper); stroke: var(--sage-deep); stroke-width: 2.5; } .route__stop text { font-family: var(--sans); font-size: 13px; fill: var(--ink); letter-spacing:.02em; } .route__stop .ring { fill:none; stroke: var(--sage); stroke-width:1.5; opacity:.5; } /* steps list */ .steps { display:grid; gap: 0; max-width: 880px; margin: clamp(2rem,5vh,3.5rem) auto 0; } .step { display:grid; grid-template-columns: auto 1fr; gap: clamp(1rem,3vw,2.2rem); padding: clamp(1.4rem,3.5vh,2.4rem) 0; border-top:1px solid var(--line); align-items:start; } .step:last-child { border-bottom:1px solid var(--line); } .step__n { font-family: var(--display); font-size: var(--step-2); line-height:1; color: var(--sage-deep); font-variant-numeric: tabular-nums; min-width: 2ch; } .step__body h4 { font-family: var(--display); font-weight:600; font-size: var(--step-1); margin-bottom:.4rem; } .step__body p { color: var(--ink-soft); max-width: 60ch; } .step__body .tip { display:inline-flex; gap:.5rem; align-items:center; margin-top:.7rem; font-size: var(--step--1); color: var(--sage-deep); background: var(--paper); border:1px solid var(--line); border-radius:100px; padding:.35rem .85rem; } /* practical-info cards */ .infogrid { display:grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2rem,5vh,3rem); } @media(min-width:680px){ .infogrid { grid-template-columns: repeat(3,1fr); } } .infocard { background: var(--paper); border:1px solid var(--line); padding: clamp(1.3rem,3vw,1.8rem); border-radius: 4px; } .infocard .ic { color: var(--sage-deep); margin-bottom: .9rem; } .infocard h5 { font-family: var(--sans); font-size: var(--step--1); letter-spacing:.16em; text-transform:uppercase; color: var(--ink-faint); font-weight:600; margin-bottom:.5rem; } .infocard p { font-family: var(--display); font-size: var(--step-1); line-height:1.35; } /* big "navigate" buttons */ .btnrow { display:flex; flex-wrap:wrap; gap: 1rem; justify-content:center; margin-top: clamp(2rem,5vh,3rem); } .btn { display:inline-flex; align-items:center; gap:.7rem; font-size: var(--step--1); letter-spacing:.14em; text-transform:uppercase; font-weight:500; padding: 1rem 1.7rem; border-radius: 100px; border:1px solid var(--ink); background: var(--ink); color: var(--paper); transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); position:relative; overflow:hidden; } .btn:hover { transform: translateY(-3px); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn svg { width:18px; height:18px; } /* map frame + Leaflet (interactive, grayscale, with static fallback bg) */ .mapframe { margin: clamp(2rem,5vh,3rem) auto 0; max-width: 1000px; border:1px solid var(--line); border-radius: 8px; overflow:hidden; position: relative; background: var(--paper-3); box-shadow: 0 24px 60px -36px rgba(27,25,22,.5); } .map { width:100%; height: clamp(320px, 48vh, 460px); background-size: cover; background-position: center; } .leaflet-container { background: var(--paper-3) !important; font-family: var(--sans); } .map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05) brightness(1.02); } .leaflet-control-zoom a { background: var(--paper) !important; color: var(--ink) !important; border-color: var(--line) !important; } .leaflet-bar { box-shadow: 0 8px 22px -12px rgba(0,0,0,.45) !important; border: none !important; } .leaflet-control-attribution { background: rgba(243,238,229,.82) !important; font-size: 10px; } .pin span { display:block; position:relative; width:16px; height:16px; border-radius:50%; background: var(--sage-deep); border:3px solid var(--paper); box-shadow:0 2px 8px rgba(0,0,0,.45); } .pin span::after { content:""; position:absolute; left:-7px; top:-7px; right:-7px; bottom:-7px; border-radius:50%; border:1px solid var(--sage-deep); opacity:.55; animation: ringpulse 2.4s ease-out infinite; } .leaflet-popup-content { font-family: var(--sans); font-size: 13px; line-height:1.5; } .leaflet-popup-content a { color: var(--sage-deep); font-weight: 600; } .mapframe__open { position:absolute; right: 1rem; top: 1rem; z-index: 1001; background: var(--cream-glass); backdrop-filter: blur(8px); border:1px solid var(--line); border-radius: 100px; padding:.5rem 1rem; font-size: var(--step--1); letter-spacing:.06em; } .mapframe__tag { position:absolute; left: 1rem; bottom: 1rem; z-index: 1001; background: var(--cream-glass); backdrop-filter: blur(8px); border:1px solid var(--line); border-radius: 100px; padding:.5rem 1rem; font-size: var(--step--1); letter-spacing:.08em; display:flex; gap:.5rem; align-items:center; } /* ============================================================ Reception ============================================================ */ .venue-detail { display:grid; gap: clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center; } @media(min-width:820px){ .venue-detail { grid-template-columns: 1.05fr .95fr; } } .venue-detail__text h3 { font-family:var(--display); font-weight:500; font-size: var(--step-2); margin:.6rem 0 1rem; } .venue-detail__text p { color: var(--ink-soft); max-width: 48ch; margin-bottom:1rem; } .addr { font-family: var(--display); font-size: var(--step-1); color: var(--ink); margin-bottom:1.4rem; } .figure { position:relative; overflow:hidden; border-radius:6px; } .figure img { width:100%; filter: grayscale(100%) contrast(1.04); aspect-ratio: 3/2; object-fit:cover; will-change: transform; } .figure__cap { position:absolute; left:1rem; bottom:1rem; color:var(--on-dark); font-family:var(--display); font-style:italic; font-size:var(--step-1); text-shadow:0 2px 18px rgba(0,0,0,.5); } /* ============================================================ Programme / timeline ============================================================ */ .timeline { max-width: 720px; margin: clamp(2rem,5vh,3rem) auto 0; position:relative; } .timeline::before { content:""; position:absolute; left: 9px; top:0; bottom:0; width:1px; background: var(--line); } @media(min-width:640px){ .timeline::before { left: 50%; } } .tl-item { position:relative; padding: clamp(1rem,3vh,2rem) 0 clamp(1rem,3vh,2rem) 2.6rem; } @media(min-width:640px){ .tl-item { width:50%; padding-left:0; } .tl-item:nth-child(odd){ left:0; text-align:right; padding-right: 2.6rem; } .tl-item:nth-child(even){ left:50%; text-align:left; padding-left: 2.6rem; } } .tl-dot { position:absolute; top: calc(clamp(1rem,3vh,2rem) + .35rem); width:20px; height:20px; border-radius:50%; background:var(--paper); border:2px solid var(--sage-deep); } .tl-item .tl-dot { left: 0; } @media(min-width:640px){ .tl-item:nth-child(odd) .tl-dot { left: auto; right: -10px; } .tl-item:nth-child(even) .tl-dot { left: -10px; } } .tl-time { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--sage-deep); } .tl-title { font-family: var(--display); font-weight:600; font-size: var(--step-1); margin:.2rem 0 .3rem; } .tl-desc { color: var(--ink-soft); font-size: var(--step--1); } /* ============================================================ RSVP ============================================================ */ .rsvp { background: var(--ink); color: var(--on-dark); position:relative; overflow:hidden; } .rsvp .eyebrow { color: var(--sage); } .rsvp__title { font-family: var(--display); font-weight:500; font-size: var(--step-3); line-height:1.02; margin:.8rem 0 1.2rem; text-align:center; } .rsvp__lead { text-align:center; color: var(--on-dark-soft); font-family:var(--display); font-size: var(--step-1); max-width: 44ch; margin: 0 auto 2.5rem; } .rsvp__deadline { text-align:center; font-size: var(--step--1); letter-spacing:.28em; text-transform:uppercase; color: var(--sage); margin-bottom: 2rem; } .contacts { display:grid; gap:1rem; grid-template-columns:1fr; max-width: 560px; margin:0 auto; } @media(min-width:560px){ .contacts { grid-template-columns:1fr 1fr; } } .contact { border:1px solid rgba(244,239,230,.2); border-radius:6px; padding:1.3rem 1.5rem; display:flex; flex-direction:column; gap:.2rem; transition: border-color .4s var(--ease), background .4s var(--ease); } .contact:hover { border-color: var(--sage); background: rgba(118,128,95,.12); } .contact .who { font-size: var(--step--1); letter-spacing:.2em; text-transform:uppercase; color: var(--on-dark-soft); } .contact .tel { font-family: var(--display); font-size: var(--step-1); white-space: nowrap; } .rsvp .btnrow .btn { border-color: var(--paper); background: var(--paper); color: var(--ink); } .rsvp .btn--ghost { background:transparent; color: var(--paper); } .rsvp .btn--ghost:hover { background: var(--paper); color: var(--ink); } /* gift note — IBAN visible by default */ .gift { text-align:center; margin-top: clamp(2.8rem,7vh,4.5rem); } .gift__lead { color: var(--on-dark-soft); max-width: 46ch; margin: 1rem auto 1.6rem; font-family: var(--display); font-size: var(--step-1); line-height:1.5; } .gift__card { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 1rem 1.4rem; border:1px solid rgba(244,239,230,.22); border-radius: 12px; padding: 1.1rem 1.6rem; background: rgba(244,239,230,.05); max-width: 100%; } .gift__card .iban { font-family: var(--display); font-size: var(--step-1); color: var(--on-dark); letter-spacing:.05em; } .gift__bank { margin-top: 1rem; color: var(--on-dark-soft); font-size: var(--step--1); letter-spacing:.03em; } .copybtn { font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--sage); color: var(--sage); padding:.45rem .85rem; border-radius:100px; background:transparent; transition: background .3s var(--ease), color .3s var(--ease); } .copybtn:hover { background: var(--sage); color: var(--ink); } /* ============================================================ RSVP closing (final section) ============================================================ */ .mono-svg--light .mono-letter { fill: var(--on-dark); } .mono-svg--light .mono-line { stroke: var(--on-dark); } .rsvp__closing { text-align:center; margin-top: clamp(3rem,8vh,5rem); } .rsvp__closing .rule { margin: 0 auto clamp(2rem,5vh,3rem); } .rsvp__mono svg { width: clamp(70px,10vw,108px); margin: 0 auto 1.4rem; } .rsvp__closing-text { font-family: var(--display); font-style: italic; font-size: var(--step-2); color: var(--on-dark); margin-bottom: 1rem; } .rsvp__closing-meta { font-size: var(--step--1); letter-spacing:.28em; text-transform:uppercase; color: var(--sage); } /* ============================================================ Reveal animation primitives (driven by JS; CSS fallback) ============================================================ */ [data-reveal] { will-change: transform, opacity; } /* fade up groups when JS absent */ .no-js [data-reveal], .reduced [data-reveal] { opacity:1 !important; transform:none !important; } /* grain texture via svg fractal (added as bg) */ .grainbg::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.04; z-index:1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ Kinetic marquee strip (velocity-reactive) ============================================================ */ .marquee { overflow: hidden; white-space: nowrap; position: relative; padding: clamp(1.3rem, 4vh, 2.5rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); } .marquee--dark { background: var(--ink); border-color: rgba(244,239,230,.14); } .marquee__track { display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); will-change: transform; } .marquee__track span { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 4.4vw, 2.9rem); color: var(--ink); white-space: nowrap; } .marquee--dark .marquee__track span { color: var(--on-dark); } .marquee__star { font-style: normal !important; color: var(--sage) !important; font-size: .62em !important; transform: translateY(-0.08em); } /* ============================================================ Monogram SVG (A | R) ============================================================ */ .mono-svg { overflow: visible; } .mono-svg text { font-family: var(--display); font-weight: 500; font-size: 84px; } .mono-letter { fill: var(--ink); } .mono-line { stroke: var(--ink); stroke-width: 2; } .draw .mono-line { vector-effect: non-scaling-stroke; } /* ============================================================ Route map numbers + labels ============================================================ */ .route__num { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--sage-deep); } .route__label { font-family: var(--sans); font-size: 13.5px; fill: var(--ink-soft); letter-spacing: .01em; } .route__label--end { fill: var(--sage-deep); font-weight: 600; } .route__stop--end .ring { animation: ringpulse 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes ringpulse { 0%{ transform: scale(.7); opacity:.7 } 70%{ transform: scale(1.25); opacity:0 } 100%{ opacity:0 } } @media (max-width: 600px){ .route__label { font-size: 21px; } .route__label--end{ font-size:21px; } .route__num{ font-size:15px; } } /* ============================================================ Scroll progress hairline ============================================================ */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; pointer-events: none; background: transparent; } .progress i { display: block; height: 100%; width: 0%; background: var(--sage); } /* hide redundant mobile CTA on desktop */ @media (min-width: 761px){ .nav__cta { display: none; } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { .line-anim { animation: none; } * { scroll-behavior: auto !important; } } /* ============================================================ Small screens tuning ============================================================ */ @media (max-width: 640px){ .hero__names { letter-spacing: 0; } .nav { mix-blend-mode: difference; } .step { grid-template-columns: 1fr; gap:.4rem; } .step__n { font-size: var(--step-1); } }