/* Your overrides. This file loads after all Minted styles, so anything here wins. */ /* ---- Injected close button for the open mobile menu overlay ---- */ .oal-menu-close { position: fixed; left: 50%; bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 100000; width: 3.1rem; height: 3.1rem; display: flex; align-items: center; justify-content: center; background: none; border: 1.5px solid rgba(70, 66, 58, 0.3); border-radius: 999px; padding: 0; cursor: pointer; color: #6b6862; transition: background 0.15s ease; } .oal-menu-close:hover { background: rgba(70, 66, 58, 0.06); } .oal-menu-close svg { width: 1.5rem; height: 1.5rem; } /* ---- Delightful page transitions (crossfade + gentle rise) ---- */ @media (prefers-reduced-motion: no-preference) { @keyframes oal-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Entrance: the whole page rises and fades in on load (pure CSS, no JS). */ .designProvider { animation: oal-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } /* Exit: JS adds .oal-leaving to just before navigating away. */ html.oal-leaving .designProvider, html.oal-leaving body { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease; } } /* ---- Tasteful section dividers (replace the solid olive bars) ---- */ /* A center-fading hairline with a small diamond, instead of the PNG bar. */ .largeDivider.fancyclothes-3egj4s { position: relative; background: none !important; height: 18px !important; /* was 50px — tightens the line to the nav / footer */ } /* Sticky footer: pin it to the bottom of the viewport on short pages, while still getting pushed down by long content. margin-top:auto eats the free space; padding-top keeps a 32px minimum gap from the content above it. */ /* Footer removed entirely (Minted "minted." branding + artist credit), along with its closing divider line. No sticky-footer layout needed anymore. */ .fancyclothes-npgrt2, [class*="mintedArtistFooter"], .oal-footer-divider { display: none !important; } /* ---- Balance the content block between the two section lines ---- */ /* Page title sat 80px below the top line; content wrapper had 80px of padding below it — leaving a big void under short pages (e.g. RSVP). Tighten both. */ /* Keep every page's title the same distance below the top line. RSVP + FAQ use the ktrf42 wrapper; other pages use an 80px wrapper — match them at 80px. */ .fancyclothes-ktrf42-alignmentStyles { margin-top: 80px !important; } .fancyclothes-m82eoy-wrapperStyles { padding-bottom: 8px !important; } .largeDivider.fancyclothes-3egj4s::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(74%, 42rem); height: 2px; background: linear-gradient( to right, transparent, #808000 10%, #808000 90%, transparent ); } /* ---- Modernized RSVP search field + CTA (olive kept) ---- */ /* Neutralize Minted's square-cornered input container (1px #ccc border, radius 0) that peeked out behind the rounded field as sharp corners on focus. */ [class*="fancyclothes-10grnv"], [class*="fancyclothes-h7zfgy"] { display: block !important; /* were flex, height:0, overflow:hidden — clipped the field */ height: auto !important; overflow: visible !important; border: none !important; background: transparent !important; border-radius: 12px !important; } /* 20px between the "Enter Your Name to RSVP" label and the field. */ [class*="nameInput"] { margin-top: 20px !important; } [class*="nameInput"] input { position: static !important; /* Minted had it absolute inside the collapsed container */ width: 100% !important; box-sizing: border-box !important; height: 40px !important; border: 1.5px solid rgba(128, 128, 0, 0.5) !important; border-radius: 12px !important; padding: 0 1.1rem !important; background: #ffffff !important; /* white so the field stands out on the cream page */ font-size: 1rem !important; color: #3a3a28 !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important; } [class*="nameInput"] input::placeholder { color: #9a9a86 !important; } [class*="nameInput"] input:focus { outline: none !important; border-color: #808000 !important; background: #fff !important; box-shadow: 0 4px 14px rgba(128, 128, 0, 0.2) !important; } [data-cy="rsvp_findRsvpButton"] { margin-top: 0.85rem; } [data-cy="rsvp_findRsvpButton"] button { box-sizing: border-box !important; height: 50px !important; background: #808000 !important; color: #fff !important; border: none !important; border-radius: 12px !important; padding: 0 1.5rem !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 2px 10px rgba(128, 128, 0, 0.22) !important; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease !important; } [data-cy="rsvp_findRsvpButton"] button:hover { background: #707000 !important; box-shadow: 0 8px 22px rgba(128, 128, 0, 0.34) !important; transform: translateY(-1px) !important; } [data-cy="rsvp_findRsvpButton"] button:active { transform: translateY(0) !important; } /* ---- Tighten the OLIVIA ✣ LIAM header spacing (desktop only) ---- */ /* The ornament sat in a fixed 135px column around a mostly-empty 100px canvas, leaving big gaps. Shrink the column to hug the graphic and pull the names in. */ @media (min-width: 544px) { .coupleHorizontalNames .fancyclothes-kvt3a3 { flex: 0 0 auto; margin: 0; } .coupleHorizontalNames .smallGraphic { width: 74px; height: 74px; margin: 0 -6px; } } /* ---- Mobile header cleanup (phones) ---- */ @media (max-width: 543px) { /* Compact the stacked couple names so the header isn't half the screen. */ [class*="coupleNamesWrapper"] h1, [class*="coupleNamesWrapper"] [class*="Headline"] { font-size: 22px !important; line-height: 1.2 !important; } /* Home page only (vertical names): treat OLIVIA & LIAM as hero text. */ .coupleVerticalNames h1, .coupleVerticalNames [class*="Headline"] { font-size: 44px !important; line-height: 1.06 !important; } [class*="coupleVerticalNamesSeparator"] { font-size: 34px !important; margin: 10px 0 !important; } /* Subpages: keep OLIVIA ✣ LIAM on one line instead of stacking. */ .coupleHorizontalNames { flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; } .coupleHorizontalNames > div { flex: 0 0 auto !important; margin-bottom: 0 !important; } .coupleHorizontalNames .smallGraphic { margin: 0 8px !important; } [class*="coupleNamesWrapper"] .smallGraphic { width: 34px !important; height: 34px !important; } /* Keep the flanking clovers, but shrink the background so both sit fully inside the viewport (they clipped off-screen at Minted's mobile size). */ [class*="MastheadContainer"] { background-size: 460px !important; background-position: center center !important; } /* The 80px title gap is too much on a phone — pull the page title up. */ .fancyclothes-ktrf42-alignmentStyles, .fancyclothes-1m87qlw-alignmentStyles-alignmentStyles { margin-top: 30px !important; } /* Tighten the header block: the divider sat 44px below the menu — pull it up so names + menu + divider read as one cohesive header. */ .largeDivider:not(.oal-footer-divider) { margin-top: -16px !important; } /* Keep the footer credit from breaking "Ani Somi" mid-name. */ [class*="mintedArtistFooter"] { letter-spacing: 0.5px !important; } [class*="mintedArtistFooter"] span { white-space: nowrap !important; } /* Make the MENU read as an intentional, centered button. */ [class*="navbarContainer"], [class*="Navbar"] { text-align: center !important; } [class*="navbarList"] { justify-content: center !important; } [class*="navbarList"] { display: block !important; width: 100% !important; } [data-test-ref="NavbarButton-text"] { display: flex !important; box-sizing: border-box !important; width: calc(100% - 3rem) !important; align-items: center !important; justify-content: center !important; gap: 0.5em !important; margin: 0.25rem auto !important; padding: 0.5em 1.4em !important; border: 1px solid rgba(128, 128, 0, 0.32) !important; border-radius: 10px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-size: 0.78rem !important; } [data-test-ref="NavbarButton-text"] svg { width: 14px !important; height: 14px !important; } /* Menu is neutral, not green — trigger, links, and dividers in warm grey. */ [data-test-ref="NavbarButton-text"] { color: #6b6862 !important; border-color: rgba(70, 66, 58, 0.3) !important; } [class*="navbarList"] a { color: #6b6862 !important; } [class*="navbarList"] li { border-color: rgba(70, 66, 58, 0.14) !important; } } /* ---- Registry detail modal (matches the live Minted popup) ---- */ .reg-overlay { position: fixed; inset: 0; background: rgba(40, 38, 30, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 1000; opacity: 0; transition: opacity 0.18s ease; } .reg-overlay.reg-open { opacity: 1; } /* Minted's pages don't set border-box globally, so width:100% + padding would overflow (the button pushed past the right edge). Force it for the modal. */ .reg-overlay, .reg-overlay * { box-sizing: border-box; } .reg-window { position: relative; display: flex; gap: 2rem; width: 100%; max-width: 53rem; padding: 1.5rem; background: #fff; border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); transform: translateY(8px); transition: transform 0.18s ease; } .reg-overlay.reg-open .reg-window { transform: translateY(0); } .reg-image { flex: 0 0 45%; } .reg-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; } .reg-content { flex: 1; min-width: 0; padding: 0.4rem 0; } .reg-badge { height: 26px; width: auto; display: block; margin-bottom: 1.25rem; } .reg-title { font-family: "Brandon Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.1; color: #262626; margin: 0 0 1rem; } .reg-desc { color: #333; font-size: 1.2rem; line-height: 1.4; margin: 0 0 1.75rem; } .reg-btn { display: flex; align-items: center; justify-content: center; gap: 0.55em; width: 100%; padding: 1.05rem 1rem; background: #808000; color: #fff; border: none; cursor: pointer; font: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: background 0.15s ease; } .reg-btn:hover { background: #707000; } .reg-btn svg { width: 1.05em; height: 1.05em; } .reg-note { color: #7a7a7a; font-size: 1rem; line-height: 1.45; text-align: center; margin: 1.1rem 0 0; } .reg-close { position: absolute; top: 1.1rem; right: 1.1rem; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #2b2b2b; line-height: 0; } .reg-close svg { width: 1.6em; height: 1.6em; } body.reg-locked { overflow: hidden; } @media (max-width: 600px) { .reg-window { flex-direction: column; max-width: 24rem; gap: 1.25rem; } .reg-image { flex: none; max-height: 40vh; } .reg-content { padding: 0 0.25rem 0.5rem; } .reg-title { font-size: 1.7rem; } .reg-desc { font-size: 1.05rem; } }