/* Font loaded in via to avoid @import blocking */ :root { --cream: #f6f2ed; --olive: #6f7a64; --nav-light: rgba(210, 210, 210, 0.55); --nav-dark: rgba(245, 242, 236, 0.95); --text-light: #ffffff; --text-dark: #4f5a4a; } @font-face { font-family: "Symphony"; src: local("Symphony"), local("Symphony Script"), url("assets/fonts/symphony_script_2/Symphony Script.ttf") format("truetype"), url("assets/fonts/symphony_script_2/Symphony Script.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: swap; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; color: var(--text-light); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body { background: var(--cream); } body.page--inner { color: var(--text-dark); } .site-audio { display: none; } .music-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 30; border: 1px solid rgba(247, 238, 228, 0.56); border-radius: 999px; padding: 10px 18px; background: rgba(247, 238, 228, 0.08); color: #f7eee4; font-family: "Playfair Display", "Cormorant Garamond", serif; font-size: 0.88rem; letter-spacing: 1.3px; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); backdrop-filter: blur(10px); transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease; } .music-toggle.is-playing { background: rgba(247, 238, 228, 0.2); color: #fff7ef; } .music-toggle:hover { transform: translateY(-1px); } body.page--inner main { padding-top: 120px; } body.page--rsvp main { padding-top: 0; } .hero { position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: 0; transition: opacity 0.8s ease-in-out; will-change: opacity; } .hero__bg--current { opacity: 1; } .hero__bg--next.is-visible { opacity: 1; } .hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.25); } .hero__content { position: relative; z-index: 2; padding: 0 16px; text-align: center; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero__intro-group { transform: translateY(12vh); } .hero__countdown-group { margin-top: clamp(76px, 12vh, 132px); transform: translateY(5vh); } .hero__art { display: block; width: min(78vw, 840px); height: auto; margin: 0 auto; } .hero__names-art { display: block; width: min(86vw, 680px); height: auto; margin: -10px auto -36px; } .hero__quote-art { display: block; width: min(88vw, 640px); height: auto; margin: -46px auto -28px; } .hero__cta-art { display: block; width: min(52vw, 300px); height: auto; margin: 0 auto; } .hero-countdown { width: min(74vw, 920px); margin: 16px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 4vw, 52px); align-items: end; color: #fff; font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; text-transform: uppercase; } .hero-countdown__item { min-width: 0; display: grid; gap: 10px; } .hero-countdown__value { display: block; font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; font-size: clamp(3.1rem, 6.8vw, 6rem); font-weight: 300; line-height: 0.8; letter-spacing: 0; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); transform: translateY(-3px); } .hero-countdown__label { display: block; font-size: clamp(0.82rem, 1.6vw, 1.22rem); font-weight: 500; letter-spacing: clamp(2px, 0.36vw, 5px); line-height: 1; white-space: nowrap; } .hero h1 { font-size: clamp(2.3rem, 6.8vw, 5rem); letter-spacing: 4px; margin: 12px 0; font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; font-weight: 500; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .hero__names { display: inline-flex; align-items: baseline; justify-content: center; gap: 12px; text-transform: uppercase; flex-wrap: nowrap; width: 100%; text-align: center; white-space: nowrap; font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; font-weight: 500; } .hero__names span { font-family: inherit; } .hero__amp { font-family: "Symphony", "Great Vibes", cursive !important; font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 400; letter-spacing: 0; text-transform: none; display: inline-block; line-height: 0.8; transform: translateY(7px); } .hero__sup, .hero__date { font-size: clamp(0.9rem, 2vw, 1.2rem); letter-spacing: 2px; text-transform: uppercase; } .hero__sup, .hero__date { font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; } .hero__sup { font-family: "Cormorant Garamond", "Playfair Display", "Times New Roman", serif; text-transform: uppercase; letter-spacing: 2px; font-size: clamp(0.9rem, 2.6vw, 1.3rem); } .hero__sup-initial { display: inline-block; font-family: "Symphony", "Great Vibes", cursive; font-size: 1.95em; line-height: 0.6; letter-spacing: 0; text-transform: none; transform: translateY(4px); margin-right: 1px; } .hero__cta { font-family: "Symphony", "Great Vibes", cursive; text-transform: none; letter-spacing: 0.5px; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; margin-top: -4px; } .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; color: var(--text-light); background: transparent; backdrop-filter: none; transition: background 0.2s ease, color 0.2s ease; } .nav.scrolled { background: #ffffff; color: var(--text-dark); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .nav__inner { max-width: none; margin: 0; padding: 36px 24px; display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; align-items: center; column-gap: 0; } .logo { position: relative; display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: 120px; height: 38px; overflow: visible; padding-right: 0; margin-left: 4px; } .logo__img { display: inline-block; max-height: 38px; width: auto; transform: scale(2.55); transform-origin: center center; filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)); transition: opacity 0.2s ease; } .nav.scrolled .logo__img { filter: none; } .logo__fallback { display: none; font-weight: 600; letter-spacing: 3px; } .nav__links { list-style: none; display: flex; gap: 34px; padding: 0; margin: 0; font-size: 1.03rem; letter-spacing: 2px; text-transform: uppercase; flex-wrap: nowrap; width: max-content; justify-content: center; justify-self: center; transform: translateX(22px); } .nav__item { position: relative; } .nav__links a { display: inline-block; white-space: nowrap; text-decoration: none; color: inherit; } .nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; } .nav__submenu { position: absolute; top: calc(100% + 10px); left: 50%; z-index: 12; min-width: 240px; margin: 0; padding: 14px 0; list-style: none; text-align: center; background: rgba(255, 255, 255, 0.94); color: #5f6855; box-shadow: 0 18px 34px rgba(47, 40, 31, 0.14); opacity: 0; pointer-events: none; transform: translate(-50%, -8px); transition: opacity 0.2s ease, transform 0.2s ease; transition-delay: 0.08s; } .nav__submenu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; } .nav__item--has-submenu:hover .nav__submenu, .nav__item--has-submenu:focus-within .nav__submenu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; } .nav__submenu a { display: block; padding: 9px 20px; color: inherit; font-size: 0.82rem; letter-spacing: 1.8px; } .nav__submenu a:hover, .nav__submenu a:focus-visible { background: rgba(95, 104, 85, 0.1); } .nav__toggle { display: none; width: 42px; height: 36px; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; position: relative; z-index: 11; } .nav__spacer { width: 120px; height: 1px; justify-self: end; } .nav__toggle span { position: absolute; left: 8px; right: 8px; height: 1.5px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; } .nav__toggle span:nth-child(1) { top: 10px; } .nav__toggle span:nth-child(2) { top: 17px; } .nav__toggle span:nth-child(3) { top: 24px; } .nav__line { display: none; } .nav.scrolled .nav__line { display: none; } .section { min-height: 70vh; padding: 120px 24px 80px; text-align: center; color: var(--text-dark); } .tips-section { min-height: 82vh; padding: 148px 24px 112px; display: flex; flex-direction: column; justify-content: center; text-align: center; scroll-margin-top: 132px; } .tips-section + .tips-section { border-top: 1px solid rgba(95, 104, 85, 0.18); } .tips-section:nth-of-type(1) { background: #f8f3ec; } .tips-section:nth-of-type(2) { background: #e7e2d8; } .tips-section:nth-of-type(3) { background: #d8ddcf; } .page--tip-dress .tips-section { background: #f8f3ec; } .page--tip-location .tips-section { background: #e7e2d8; } .page--tip-info .tips-section { background: #d8ddcf; } .tips-section h2 { margin: 0 0 18px; font-family: "Playfair Display", "Cormorant Garamond", serif; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 400; color: #5f6855; } .tips-section p { max-width: 620px; margin: 0 auto; color: rgba(58, 53, 46, 0.72); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; } .page--album { background: #4b5038; color: #f4efe7; } .page--album main { padding-top: 118px; } .page--album .nav { background: #4b5038; color: #f4efe7; } .page--album .nav.scrolled { background: #4b5038; color: #f4efe7; } .page--album .logo__img { filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, 0.35)) !important; } .album { padding: 0 14px 120px; } .album__set { transition: opacity 0.24s ease; } .album__set[hidden] { display: none; } .album__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 54px; gap: 14px; } .album__item { margin: 0; overflow: hidden; background: #39402d; } .album__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.32s ease, filter 0.32s ease; } .album__item:hover img { transform: scale(1.03); filter: saturate(1.05); } .album__item--a { grid-column: 1 / span 4; grid-row: 1 / span 10; } .album__item--b { grid-column: 5 / span 4; grid-row: 1 / span 10; } .album__item--c { grid-column: 9 / span 4; grid-row: 1 / span 3; } .album__item--d { grid-column: 9 / span 4; grid-row: 4 / span 13; } .album__item--e { grid-column: 1 / span 4; grid-row: 11 / span 6; } .album__item--f { grid-column: 5 / span 4; grid-row: 11 / span 6; } .album__grid--harmonic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 10px; gap: 14px; } .album__grid--harmonic .album__item { margin: 0; grid-column: span 1; } .album__grid--harmonic .album__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .album__grid--harmonic .album__item:nth-child(6n + 1) { grid-row: span 34; } .album__grid--harmonic .album__item:nth-child(6n + 2) { grid-row: span 26; } .album__grid--harmonic .album__item:nth-child(6n + 3) { grid-row: span 30; } .album__grid--harmonic .album__item:nth-child(6n + 4) { grid-row: span 38; } .album__grid--harmonic .album__item:nth-child(6n + 5) { grid-row: span 24; } .album__grid--harmonic .album__item:nth-child(6n + 6) { grid-row: span 32; } .album__grid--harmonic .album__item--focus-bouquet { grid-row: span 18 !important; } .album__grid--harmonic .album__item--focus-bouquet img { object-position: 42% 10%; } .album__grid--harmonic .album__item--full-couple { grid-row: span 42 !important; } .album__grid--harmonic .album__item--full-couple img { object-position: 50% 50%; } .album__switch { margin-top: 0; display: flex; justify-content: center; gap: 14px; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 25; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; } .album__btn { border: 1px solid rgba(247, 238, 228, 0.52); background: rgba(70, 61, 42, 0.42); color: #f7eee4; border-radius: 999px; padding: 14px 34px; font-family: "Playfair Display", "Cormorant Garamond", serif; font-size: 1.02rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background 0.22s ease, transform 0.22s ease; } .album__btn:hover { transform: translateY(-1px); } .album__btn.is-active { background: rgba(247, 238, 228, 0.82); color: #3f442f; } .trilha { position: relative; overflow: hidden; padding: 140px 24px; color: #f6ecda; background: radial-gradient(120% 120% at 50% -10%, rgba(214, 159, 87, 0.55) 0%, rgba(140, 98, 57, 0.86) 42%, #7f5a38 100%); } .trilha::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 226, 176, 0.2) 0%, rgba(255, 226, 176, 0) 45%), radial-gradient(circle at 16% 74%, rgba(121, 83, 48, 0.32) 0%, rgba(121, 83, 48, 0) 38%); pointer-events: none; } .trilha__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; } .trilha__kicker { margin: 0; font-size: 0.82rem; letter-spacing: 4px; text-transform: uppercase; color: #f2d4a2; opacity: 0.9; } .trilha__title { margin: 10px 0 10px; font-family: "Playfair Display", "Cormorant Garamond", "Times New Roman", serif; font-size: clamp(2rem, 4.8vw, 3.3rem); } .trilha__lead { max-width: 680px; margin: 0 0 50px; font-size: clamp(1rem, 2vw, 1.2rem); letter-spacing: 0.8px; opacity: 0.98; } .trilha__path { position: relative; min-height: 2300px; border: 0; background: transparent; backdrop-filter: none; padding: 46px 32px 52px; } .trilha__curve { display: none; } .trilha__pegada { --paw-color: #6e2c0e; --base-rot: -10deg; position: absolute; width: 54px; height: 54px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%236e2c0e'%3E%3Cellipse cx='27' cy='35' rx='13' ry='18' transform='rotate(-22 27 35)'/%3E%3Cellipse cx='49' cy='23' rx='13' ry='18' transform='rotate(-8 49 23)'/%3E%3Cellipse cx='72' cy='25' rx='13' ry='18' transform='rotate(9 72 25)'/%3E%3Cellipse cx='91' cy='37' rx='12' ry='17' transform='rotate(24 91 37)'/%3E%3Cpath d='M28 61c8-9 18-13 31-13 18 0 35 9 40 24 3 9 0 18-6 25-9 10-24 13-38 13-20 0-36-6-40-20-3-11 3-20 13-29z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; opacity: 0; transform: translateY(24px) scale(0.65) rotate(var(--base-rot)); filter: blur(0.4px); transition: opacity 0.42s ease, transform 0.42s ease, filter 0.42s ease, color 0.32s ease; will-change: transform, opacity; color: var(--paw-color); } .trilha__pegada::before, .trilha__pegada::after { display: none; } .trilha__pegada.is-on { opacity: 1; transform: translateY(0) scale(1) rotate(var(--base-rot)); filter: blur(0); --paw-color: #6e2c0e; filter: blur(0); animation: paw-appear 0.44s ease both; } .trilha__pegada:nth-of-type(1) { top: 5%; left: 58%; --base-rot: -18deg; width: 56px; height: 56px; } .trilha__pegada:nth-of-type(2) { top: 10%; left: 40%; --base-rot: 14deg; width: 48px; height: 48px; } .trilha__pegada:nth-of-type(3) { top: 15%; left: 64%; --base-rot: -10deg; width: 55px; height: 55px; } .trilha__pegada:nth-of-type(4) { top: 21%; left: 47%; --base-rot: 11deg; width: 52px; height: 52px; } .trilha__pegada:nth-of-type(5) { top: 28%; left: 69%; --base-rot: -15deg; width: 58px; height: 58px; } .trilha__pegada:nth-of-type(6) { top: 35%; left: 52%; --base-rot: 10deg; width: 50px; height: 50px; } .trilha__pegada:nth-of-type(7) { top: 43%; left: 34%; --base-rot: -13deg; width: 56px; height: 56px; } .trilha__pegada:nth-of-type(8) { top: 50%; left: 55%; --base-rot: 12deg; width: 49px; height: 49px; } .trilha__pegada:nth-of-type(9) { top: 57%; left: 72%; --base-rot: -10deg; width: 54px; height: 54px; } .trilha__pegada:nth-of-type(10) { top: 65%; left: 50%; --base-rot: 9deg; width: 53px; height: 53px; } .trilha__pegada:nth-of-type(11) { top: 73%; left: 39%; --base-rot: -12deg; width: 47px; height: 47px; } .trilha__pegada:nth-of-type(12) { top: 80%; left: 61%; --base-rot: 13deg; width: 56px; height: 56px; } .trilha__pegada:nth-of-type(13) { top: 86%; left: 45%; --base-rot: -11deg; width: 50px; height: 50px; } .trilha__pegada:nth-of-type(14) { top: 91%; left: 68%; --base-rot: 12deg; width: 54px; height: 54px; } .trilha__pegada:nth-of-type(15) { top: 95%; left: 53%; --base-rot: -9deg; width: 49px; height: 49px; } .trilha__pegada:nth-of-type(16) { top: 98%; left: 37%; --base-rot: 10deg; width: 53px; height: 53px; } .trilha__ponto { position: absolute; max-width: 290px; opacity: 0.18; transform: translateY(20px); transition: opacity 0.32s ease, transform 0.32s ease; background: rgba(78, 54, 33, 0.48); border: 1px solid rgba(255, 226, 177, 0.35); padding: 16px 14px; } @keyframes paw-appear { 0% { opacity: 0; transform: translateY(26px) scale(0.66) rotate(var(--base-rot)); } 70% { opacity: 1; transform: translateY(-2px) scale(1.03) rotate(var(--base-rot)); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--base-rot)); } } .trilha__ponto.is-on { opacity: 1; transform: translateY(0); } .trilha__ponto h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 2.2vw, 1.5rem); } .trilha__ponto p { margin: 0; font-size: clamp(1rem, 1.8vw, 1.1rem); } .trilha__ponto:nth-of-type(1) { top: 13%; left: 7%; } .trilha__ponto:nth-of-type(2) { top: 46%; right: 7%; text-align: right; } .trilha__ponto:nth-of-type(3) { top: 82%; left: 7%; } .section:nth-child(odd) { background: #ffffff; } .save-date { min-height: 108vh; position: relative; display: grid; place-items: center; padding: 72px 20px; background: #ffffff; overflow: hidden; } .save-date__glow { display: none; } .save-date__content { position: relative; z-index: 1; width: min(360px, 84vw); margin: 0 auto; text-align: center; } .save-date__title { margin: 0; display: inline-block; font-family: "Cormorant Garamond", serif; font-weight: 300; font-size: clamp(4.2rem, 10.5vw, 7.8rem); line-height: 0.95; letter-spacing: 0.5px; text-align: left; } .save-date__title span { display: block; margin-top: 14px; background: linear-gradient(90deg, #161616 0%, #6f6f6d 44%, #dfddda 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .save-date__title span:first-child { margin-top: 0; } .save-date__invite { margin: 0 0 28px; color: #747b6c; font-family: "Cormorant Garamond", serif; font-size: clamp(1.35rem, 3vw, 2rem); font-style: italic; letter-spacing: 0.4px; } .save-date__title span:nth-child(3) { background: linear-gradient(90deg, #101010 0%, #666664 42%, #dbd9d6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .save-date__btn { margin-top: 54px; display: inline-flex; align-items: center; justify-content: center; min-width: 220px; border: 1px solid #8a927f; border-radius: 999px; padding: 10px 24px; text-decoration: none; font-family: "Cormorant Garamond", serif; font-size: 1.55rem; font-style: italic; color: #5f6858; background: #ffffff; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .save-date__btn:hover { background: #ffffff; border-color: #757e6b; color: #4f5848; transform: translateY(-2px); } .btn { border: 1px solid var(--olive); background: transparent; color: var(--olive); padding: 12px 28px; border-radius: 999px; font-family: inherit; letter-spacing: 1px; } .rsvp { min-height: 100vh; position: relative; display: flex; align-items: stretch; justify-content: center; overflow: hidden; padding: 0; background: #e9e3dd; } .rsvp::before { content: none; } .rsvp__card { width: 100%; min-height: 100vh; position: relative; overflow: hidden; background: #e9e3dd url("assets/rsvp-the-nenos-background.jpg?v=4") center 38px / 100% auto no-repeat; padding: clamp(150px, 16vh, 190px) clamp(26px, 7vw, 92px) clamp(70px, 8vh, 100px); display: flex; flex-direction: column; align-items: center; animation: rsvpFadeIn 0.9s ease forwards; opacity: 0; transform: translateY(14px); } .rsvp__watermark { display: none !important; } @keyframes rsvpFadeIn { to { opacity: 1; transform: translateY(0); } } .rsvp__letter { position: relative; z-index: 1; width: min(760px, 100%); margin-left: 0; color: #726b64; } .rsvp__family-title { margin: 0 0 20px; color: #9c9461; font-family: "Sloop Script Pro", "Symphony", "Great Vibes", cursive; font-size: clamp(3.4rem, 7vw, 6.2rem); font-weight: 400; line-height: 0.9; letter-spacing: 0; text-align: center; } .rsvp__letter-copy { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.15rem, 1.45vw, 1.48rem); font-weight: 400; line-height: 1.34; text-align: justify; text-align-last: left; color: rgba(83, 76, 70, 0.8); } .rsvp__letter-copy p { margin: 0 0 8px; } .rsvp__signature { padding-top: 22px; text-align: left; } .rsvp__intro { text-align: center; max-width: 700px; margin: 0 auto; } .rsvp__lead { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(1.08rem, 1.55vw, 1.35rem); font-weight: 500; line-height: 1.18; letter-spacing: 0.8px; color: rgba(83, 76, 70, 0.82); } .rsvp__name-highlight { font-family: inherit; font-size: 1em; font-weight: inherit; color: inherit; } .rsvp__heart { font-size: 0.95em; } .subtext { max-width: 620px; margin: 8px auto 0; font-size: clamp(0.95rem, 1.22vw, 1.12rem); line-height: 1.38; color: rgba(83, 76, 70, 0.68); text-wrap: balance; } .rsvp__feedback:empty { display: none; } .rsvp__feedback { margin: 14px 0 0; color: #6d4d3b; font-weight: 600; } .rsvp__guest { position: relative; } .status-card { width: min(560px, 100%); margin: 14px auto 0; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(156, 148, 97, 0.24); border-radius: 0; padding: 18px 22px; text-align: center; } .rsvp__guest-label { margin: 0; text-transform: uppercase; letter-spacing: 1.8px; color: #675647; font-size: 0.78rem; } .rsvp__guest-icon { display: inline-block; margin-bottom: 8px; font-size: 1rem; color: #918065; opacity: 0.9; } .rsvp__guest-status { margin: 8px 0 0; font-size: 1rem; letter-spacing: 1.2px; text-transform: uppercase; color: #2f342b; font-weight: 600; } .rsvp__thanks { min-height: 22px; margin: 10px 0 0; color: #4f5a4a; } .rsvp__actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .rsvp__action { cursor: pointer; padding: 12px 30px; border-radius: 30px; transition: 0.3s ease; } .rsvp__action.is-active { background: #a8a394; border-color: #8a8f7b; color: #2f342a; } .rsvp__action--primary { background-color: #b6b1a1; color: #394133; border: 1px solid #929983; } .rsvp__action--primary:hover { background-color: #a8a394; border-color: #858c76; transform: translateY(-2px); } .rsvp__action--secondary { background: transparent; border: 1px solid #929983; color: #596251; } .rsvp__action--secondary:hover { background: rgba(146, 153, 131, 0.14); transform: translateY(-2px); } .story-journey { min-height: 300vh; position: relative; background: radial-gradient(circle at 50% 10%, rgba(250, 244, 226, 0.95) 0%, rgba(243, 237, 227, 0.82) 28%, rgba(232, 227, 219, 0.98) 100%); } .story-journey__stage { position: relative; min-height: inherit; } .story-journey__copy { position: relative; padding-top: 132px; left: 50%; z-index: 3; width: min(760px, calc(100% - 48px)); text-align: center; transform: translateX(-50%); } .story-journey__kicker { margin: 0; letter-spacing: 4px; text-transform: uppercase; font-size: 0.8rem; color: #8d7d67; } .story-journey__title { margin: 16px 0 0; font-size: clamp(2.2rem, 5vw, 4.2rem); font-weight: 500; line-height: 1.02; color: #2f281f; } .story-journey__visual { position: absolute; inset: 0; height: 100%; } .story-journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 18% 0); overflow: hidden; } .story-line { fill: none; stroke-linecap: round; stroke-width: 0.16; opacity: 0.96; filter: drop-shadow(0 0 8px rgba(255, 219, 122, 0.22)); } .story-line--gold { stroke: #e2b94d; } .story-line--blue { stroke: rgba(123, 149, 166, 0.9); stroke-width: 0.12; opacity: 0.72; } .story-line--blue.is-speaking { stroke: #a8d9f5; opacity: 1; filter: drop-shadow(0 0 6px rgba(168, 217, 245, 0.68)) drop-shadow(0 0 18px rgba(168, 217, 245, 0.34)); } .story-line-hit { fill: none; stroke: transparent; stroke-width: 3; cursor: pointer; pointer-events: stroke; outline: none; -webkit-tap-highlight-color: transparent; } .story-line-hit:focus-visible { outline: none; } .story-beat { position: absolute; z-index: 3; max-width: min(36vw, 460px); opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .story-beat.is-on { opacity: 1; transform: translateY(0); } .story-beat__eyebrow { display: none; margin-bottom: 8px; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: #9a845e; } .story-beat p { position: relative; z-index: 1; margin: 0; color: rgba(103, 96, 88, 0.64); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.2rem, 1.7vw, 1.55rem); font-weight: 400; line-height: 1.28; } .story-beat--intro-left { top: 18%; left: 10%; text-align: left; } .story-beat--intro-right { top: 25%; right: 10%; text-align: right; } .story-beat--reconnect-left { top: 35%; left: 10%; text-align: left; } .story-beat--distance-right { top: 42%; right: 10%; max-width: min(40vw, 540px); text-align: right; } .story-beat--proposal-left { top: 52%; left: 10%; max-width: min(40vw, 540px); text-align: left; } .story-beat--today-right { top: 59%; right: 10%; text-align: right; } .story-beat--closing { top: 82%; left: 50%; width: min(72vw, 880px); max-width: min(72vw, 880px); text-align: center; transform: translate(-50%, 20px); } .story-beat--closing.is-on { transform: translate(-50%, 0); } .page--admin { background: #f1ece6; color: #1f1e1c; } .admin { max-width: 1100px; margin: 0 auto; padding: 28px 18px 42px; } .admin__head h1 { margin: 0; font-size: 2rem; } .admin__head p { margin: 6px 0 0; } .admin__stats { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .admin__stats article { background: #fff; border: 1px solid rgba(138, 126, 113, 0.25); border-radius: 14px; padding: 14px 12px; text-align: center; } .admin__stats span { display: block; font-size: 1.9rem; font-weight: 700; } .admin__stats small { display: block; margin-top: 4px; font-size: 0.85rem; letter-spacing: 0.6px; } .admin__controls { margin-top: 16px; display: grid; grid-template-columns: 1fr 220px; gap: 10px; } .admin__controls input, .admin__controls select { border: 1px solid rgba(130, 120, 109, 0.34); border-radius: 10px; padding: 10px 12px; font-size: 0.95rem; background: #fff; } .admin__table-wrap { margin-top: 14px; background: #fff; border-radius: 16px; border: 1px solid rgba(130, 120, 109, 0.24); overflow: hidden; } .admin__table { width: 100%; border-collapse: collapse; } .admin__table th, .admin__table td { padding: 12px; border-bottom: 1px solid rgba(130, 120, 109, 0.18); text-align: left; font-size: 0.92rem; } .admin__table th { background: #f8f5f1; font-weight: 600; } .admin__table tr:last-child td { border-bottom: 0; } .admin__link { color: #5d6d5b; } .admin__link-field { display: block; width: min(440px, 100%); margin-top: 8px; border: 1px solid rgba(130, 120, 109, 0.24); border-radius: 8px; padding: 8px 10px; color: #4d473f; background: #fbfaf8; font: inherit; } .page--gifts { background: #ebe7e4; } .page--gifts .nav { background: rgba(245, 242, 236, 0.96); color: #101013; } .page--gifts .logo__img { filter: none !important; } .page--gifts .nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; font-family: inherit; text-transform: uppercase; letter-spacing: 2px; font-size: 1.03rem; line-height: 1.2; transform: none; } .gifts-simple { min-height: calc(100vh - 120px); padding: 28px 28px 64px; background: linear-gradient(180deg, #f1ece5 0%, #e7dfd4 100%); } .gifts-simple__inner { max-width: 1280px; margin: 0 auto; } .gifts-simple__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; } .gift-card-simple { background: rgba(253, 250, 246, 0.92); border: 1px solid rgba(200, 190, 180, 0.9); border-radius: 22px; padding: 12px 12px 18px; box-shadow: 0 14px 32px rgba(72, 58, 45, 0.14); display: grid; gap: 12px; justify-items: center; } .gift-card-simple__thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; background: linear-gradient(135deg, rgba(214, 212, 210, 0.96), rgba(195, 193, 190, 0.96)); overflow: hidden; } .gift-card-simple__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gift-card-simple h3 { margin: 0; color: #2d241d; text-align: center; text-transform: uppercase; letter-spacing: 0.8px; line-height: 1.15; font-size: 1.08rem; } .gift-card-simple__price { margin: 0; color: #2c241d; font-size: 1.18rem; font-weight: 700; } .gift-card-simple__btn { border: 1px solid rgba(124, 118, 113, 0.72); background: rgba(247, 240, 232, 0.92); color: #54473b; border-radius: 999px; padding: 10px 22px; font-family: inherit; font-size: 0.96rem; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.1; cursor: pointer; } .gift-card-simple__btn:hover { background: #e6d9cc; color: #1f1d1b; } .gift-card-simple__btn:disabled { opacity: 0.72; cursor: not-allowed; } .gift-card-simple.is-gift-paid { display: none; } .gift-modal-open { overflow: hidden; } .gift-purchase[hidden] { display: none; } .gift-purchase { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(36, 32, 28, 0.42); backdrop-filter: blur(4px); } .gift-purchase__panel { position: relative; width: min(100%, 460px); border: 1px solid rgba(190, 177, 160, 0.8); border-radius: 8px; padding: 34px 30px 30px; background: #f5efe6; box-shadow: 0 24px 60px rgba(44, 35, 28, 0.25); color: #3f352c; text-align: center; } .gift-purchase__close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; background: transparent; color: #5f5348; font-family: inherit; font-size: 2rem; line-height: 1; cursor: pointer; } .gift-purchase__eyebrow { margin: 0 0 8px; color: #76695d; font-size: 0.78rem; letter-spacing: 2px; text-transform: uppercase; } .gift-purchase h2 { margin: 0; color: #29231d; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 500; letter-spacing: 0; } .gift-purchase__price { margin: 10px 0 16px; color: #2d241d; font-size: 1.55rem; font-weight: 700; } .gift-purchase__note { margin: 0 auto 22px; max-width: 330px; color: #62574d; font-size: 1.05rem; line-height: 1.45; } .gift-purchase__actions { display: grid; gap: 10px; } .gift-purchase__primary { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; padding: 12px 18px; font-family: inherit; font-size: 0.9rem; letter-spacing: 1.1px; line-height: 1.1; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; } .gift-purchase__primary { border: 1px solid rgba(69, 59, 50, 0.9); background: #3e352c; color: #fff8ed; } .gift-purchase__primary:disabled { border-color: rgba(142, 130, 116, 0.6); background: #cfc3b4; color: #776b60; cursor: not-allowed; } @media (max-width: 900px) { .nav__inner { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; } .logo__img { max-height: 32px; transform: scale(1.9); } .logo { position: static; width: 56px; height: 32px; } .nav__spacer { display: none; } .nav__links { position: fixed; inset: 0; width: 100vw; max-width: none; z-index: 9; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; background: rgba(20, 20, 20, 0.88); backdrop-filter: blur(6px); opacity: 0; transform: translateY(-12px); justify-self: auto; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .nav__links a { display: block; padding: 10px 0; font-size: 1.05rem; } .nav__item--has-submenu { text-align: center; } .nav__submenu { position: static; min-width: 0; padding: 2px 0 0; background: transparent; color: inherit; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; } .nav__item--has-submenu:hover .nav__submenu, .nav__item--has-submenu:focus-within .nav__submenu { transform: none; } .nav__submenu a { padding: 5px 0; font-size: 0.76rem; opacity: 0.78; } .nav__submenu a:hover, .nav__submenu a:focus-visible { background: transparent; opacity: 1; } .nav.nav--open .nav__links { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.nav--open .nav__toggle span:nth-child(2) { opacity: 0; } .nav.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hero__names { flex-direction: column; gap: 6px; align-items: center; } .hero__intro-group { transform: translateY(7vh); } .hero__countdown-group { margin-top: clamp(54px, 9vh, 88px); transform: translateY(3vh); } .hero__names-art { width: min(90vw, 470px); margin-top: 0; margin-bottom: -28px; } .hero__quote-art { width: min(94vw, 480px); margin-top: -34px; margin-bottom: -22px; } .hero__cta-art { width: min(64vw, 260px); margin-top: 42px; } .hero-countdown { width: min(88vw, 520px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 14px; } .hero-countdown__item--seconds { display: none; } .hero-countdown__value { font-size: clamp(2.05rem, 10vw, 3.7rem); } .hero-countdown__label { font-size: clamp(0.66rem, 2.8vw, 0.9rem); letter-spacing: 2px; } .story-journey { min-height: 300vh; } .story-journey__copy { padding-top: 118px; width: min(92vw, 560px); } .story-journey__title { font-size: clamp(1.9rem, 8vw, 3rem); } .story-line { stroke-width: 0.28; } .story-line--blue { stroke-width: 0.2; } .story-journey__svg { clip-path: inset(0 0 20% 0); } .story-beat { max-width: min(39vw, 205px); } .story-beat p { font-size: clamp(0.9rem, 3.6vw, 1.08rem); line-height: 1.25; } .story-beat--intro-left { top: 18%; left: 6%; } .story-beat--intro-right { top: 25%; right: 6%; } .story-beat--reconnect-left { top: 35%; left: 6%; } .story-beat--distance-right { top: 42%; right: 6%; max-width: min(42vw, 225px); } .story-beat--proposal-left { top: 52%; left: 6%; max-width: min(42vw, 225px); } .story-beat--today-right { top: 59%; right: 6%; } .story-beat--closing { top: 82%; width: min(84vw, 420px); max-width: min(84vw, 420px); } .hero__art { width: min(92vw, 620px); } .hero__amp { font-size: clamp(1.6rem, 6vw, 2.6rem); } .trilha { padding: 90px 18px; } .trilha__lead { margin-bottom: 34px; } .trilha__path { min-height: 1800px; padding: 24px 18px; } .trilha__curve { left: 50%; top: 48px; bottom: 48px; } .trilha__ponto { position: static; max-width: none; margin-bottom: 16px; text-align: left; opacity: 0.35; } .trilha__ponto:nth-of-type(3) { text-align: left; } .trilha__pegada:nth-of-type(1) { top: 29%; left: 55%; } .trilha__pegada:nth-of-type(2) { top: 34%; left: 40%; } .trilha__pegada:nth-of-type(3) { top: 39%; left: 62%; } .trilha__pegada:nth-of-type(4) { top: 44%; left: 47%; } .trilha__pegada:nth-of-type(5) { top: 50%; left: 66%; } .trilha__pegada:nth-of-type(6) { top: 55%; left: 52%; } .trilha__pegada:nth-of-type(7) { top: 61%; left: 36%; } .trilha__pegada:nth-of-type(8) { top: 67%; left: 55%; } .trilha__pegada:nth-of-type(9) { top: 73%; left: 68%; } .trilha__pegada:nth-of-type(10) { top: 79%; left: 50%; } .trilha__pegada:nth-of-type(11) { top: 84%; left: 42%; } .trilha__pegada:nth-of-type(12) { top: 89%; left: 61%; } .trilha__pegada:nth-of-type(13) { top: 93%; left: 47%; } .trilha__pegada:nth-of-type(14) { top: 95%; left: 66%; } .trilha__pegada:nth-of-type(15) { top: 97%; left: 52%; } .trilha__pegada:nth-of-type(16) { top: 99%; left: 39%; } .album { padding: 0 10px 30px; } .album__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 10px; } .album__item { grid-column: auto !important; grid-row: auto !important; } .album__item--a, .album__item--b, .album__item--d { grid-row: span 3 !important; } .album__item--c, .album__item--e, .album__item--f { grid-row: span 2 !important; } .album__item--f { grid-column: span 2 !important; } .album__grid--harmonic .album__item { margin: 0; } .album__grid--harmonic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8px; gap: 10px; } .album__grid--harmonic .album__item:nth-child(6n + 1) { grid-row: span 28 !important; } .album__grid--harmonic .album__item:nth-child(6n + 2) { grid-row: span 20 !important; } .album__grid--harmonic .album__item:nth-child(6n + 3) { grid-row: span 24 !important; } .album__grid--harmonic .album__item:nth-child(6n + 4) { grid-row: span 30 !important; } .album__grid--harmonic .album__item:nth-child(6n + 5) { grid-row: span 18 !important; } .album__grid--harmonic .album__item:nth-child(6n + 6) { grid-row: span 26 !important; } .album__grid--harmonic .album__item--focus-bouquet { grid-row: span 16 !important; } .album__grid--harmonic .album__item--full-couple { grid-row: span 34 !important; } .album__switch { gap: 10px; bottom: 14px; width: calc(100% - 20px); max-width: 440px; } .album__btn { padding: 12px 20px; font-size: 0.9rem; letter-spacing: 1px; } .gifts-simple { padding: 20px 14px 42px; } .gifts-simple__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; } .gift-card-simple { border-radius: 18px; padding: 10px 10px 14px; gap: 10px; } .gift-card-simple h3 { font-size: 0.92rem; letter-spacing: 1px; } .gift-card-simple__price { font-size: 1.05rem; } .gift-card-simple__btn { font-size: 0.86rem; padding: 9px 16px; } .gift-purchase { padding: 16px; } .gift-purchase__panel { padding: 32px 18px 22px; } .rsvp { min-height: 100vh; padding: 0; } .rsvp__card { min-height: 100vh; padding: 116px 22px 54px; } .rsvp__letter { width: 100%; margin-left: 0; } .rsvp__family-title { font-size: clamp(3.2rem, 17vw, 5rem); margin-bottom: 18px; } .rsvp__letter-copy { font-size: clamp(1rem, 4.5vw, 1.18rem); line-height: 1.36; text-align: left; } .rsvp__lead { font-size: clamp(1.02rem, 4.8vw, 1.2rem); line-height: 1.3; } .subtext { max-width: 100%; font-size: 14px; margin-top: 8px; } .rsvp__actions { display: grid; grid-template-columns: 1fr; } .save-date { min-height: 108vh; padding: 56px 14px; } .save-date__glow { display: none; } .save-date__title { font-size: clamp(3.1rem, 18vw, 5.2rem); } .save-date__btn { margin-top: 34px; min-width: 220px; font-size: 1.65rem; padding: 11px 24px; } .admin { padding: 16px 10px 28px; } .admin__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin__controls { grid-template-columns: 1fr; } .admin__table-wrap { overflow-x: auto; } .admin__table { min-width: 720px; } } @media (max-width: 520px) { .hero-countdown { width: min(86vw, 360px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .hero-countdown__item--minutes { display: none; } }