/* --- Bootstrap reconciliation --------------------------------------- This site's own reset zeroes margins with `* { margin:0; padding:0 }`, which loses on specificity to Bootstrap Reboot's element selectors (`figure { margin: 0 0 1rem }`, `ul { padding-left: 2rem }`, and so on). Re-assert the zeroing at element specificity, after Bootstrap, so the existing pixel-tuned layout is unchanged by loading it. */ :where(.rvh-root) h1, :where(.rvh-root) h2, :where(.rvh-root) h3, :where(.rvh-root) h4, :where(.rvh-root) h5, :where(.rvh-root) h6, :where(.rvh-root) p, :where(.rvh-root) figure, :where(.rvh-root) blockquote, :where(.rvh-root) dl, :where(.rvh-root) dd, :where(.rvh-root) ol, :where(.rvh-root) ul, :where(.rvh-root) fieldset, :where(.rvh-root) legend, :where(.rvh-root) pre { margin: 0; padding: 0; } :where(.rvh-root) ol, :where(.rvh-root) ul { padding-left: 0; } :where(.rvh-root) label { display: inline; margin-bottom: 0; } :where(.rvh-root) img, :where(.rvh-root) svg, :where(.rvh-root) video, :where(.rvh-root) canvas { vertical-align: baseline; } :where(.rvh-root) button, :where(.rvh-root) input, :where(.rvh-root) select, :where(.rvh-root) textarea { font-family: inherit; font-size: inherit; line-height: inherit; } :where(.rvh-root) b, :where(.rvh-root) strong { font-weight: bolder; } /* ---- scroll behaviour ------------------------------------------------- Bootstrap's reboot sets, globally: @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } That does not just affect anchor links. It makes EVERY scroll correction the browser performs animate, including the scroll-anchoring adjustments it makes when something above the viewport changes height -- a section animating in, an image arriving, a font swapping. Measured here: the document grows from 9129px to 9143px as the moodboard section enters view. Instantaneous corrections are invisible; the same correction animated over ~700ms reads as the page scrolling on its own. Restoring the browser default fixes that. Nothing is lost: the few deliberate smooth scrolls in home.js/moodboard.js pass behavior:'smooth' on the call itself, which still wins. NOTE: :root cannot be scoped to .rvh-root, so on a page that already loads Bootstrap this restores the default for the whole document. Remove this block if smooth anchor-scrolling is wanted site-wide. */ :root { scroll-behavior: auto; } .rvh-root { background-color: transparent; color: inherit; font-size: inherit; line-height: inherit; } :root { --brand-color: #6C151C; /* Rich velvet maroon */ --text-dark: #3b332d; --gold: #B5955C; --gold-light: #E2CDA6; /* Realistic Paper Gradient Colors */ --paper-center: #FDFCF8; --paper-mid: #F5EFE3; --paper-edge: #EAE0CD; /* Section 8 membership seal — see .rvh-rc-seal-art */ --rc-seal-src: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/seal/rivaah-seal.png"); } /* Scoped with :where() rather than a plain descendant combinator: :where() contributes no specificity, so this stays at 0,0,0 exactly as the bare `*` was and keeps losing to everything, including Bootstrap's component classes. Written as `.rvh-root *` it would weigh 0,1,0 and start beating rules it used to lose to. */ :where(.rvh-root, .rvh-root *) { margin: 0; padding: 0; box-sizing: border-box; } /* ---- stacking containment ------------------------------------------- This microsite is embedded inside the host storefront's page, whose fixed header sits at z-index 9. Our own sections go as high as 999, so without a stacking context of its own the microsite paints over that header -- "Explore the Traditions" landing on top of the nav. isolation:isolate makes .rvh-root a stacking context, so every z-index inside it is resolved relative to the wrapper rather than competing with the host page. The whole microsite then participates in the host's stacking at a single, low level. The exception is our own full-screen overlays: those have to cover the host chrome or they get clipped by it, so while one is open the wrapper lifts above everything. :has() keeps that in CSS rather than needing every open/close path to remember to toggle a class. ---- */ .rvh-root { position: relative; z-index: 0; isolation: isolate; } /* EVERY full-screen dialog must be listed here. One that is missed does not fail loudly -- it simply renders underneath the host page's fixed header, which is how the moodboard's share modal slipped through. If a dialog is added, add it here too. Matching .rvh-is-open generically would be wrong: those classes are also used on non-dialog elements, and lifting the wrapper when no dialog is open would put the microsite over the host's chrome. */ .rvh-root:has(.rvh-sd-share-overlay.rvh-is-open), .rvh-root:has(.rvh-mb-sd-share-overlay.rvh-is-open), .rvh-root:has(.rvh-mb-sd-share-overlay.rvh-mb-is-open), .rvh-root:has(.rvh-mb-mood-contact-modal.rvh-mb-is-open), .rvh-root:has(.rvh-mb-mood-share-modal.rvh-mb-is-open), .rvh-root:has(.rvh-mb-asset-modal.rvh-mb-is-open) { z-index: 2147483000; } .rvh-root { margin: 0; padding: 0; font-family: 'Playfair Display', serif; overflow-x: hidden; background-color: #f6f0e5; background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/paper-warm.png"); background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; } /* --- UNIFIED SEAMLESS PAPER WRAPPER --- */ /* ============================================================ SITE HEADER — adapted from the live Tanishq site's header (logo, search, wishlist/account/cart, full mega-menu nav). Colors and logo are kept exactly as Tanishq's own (white chrome, #832729 maroon accents/hovers, black nav text) rather than reskinned into this page's paper/gold palette — only the layout/markup was rebuilt from scratch. Every shopping destination (search, mega-menu links, wishlist, account, cart) is a real, live tanishq.rvh-co.rvh-in URL opened in a new tab — this page has no product catalogue or account system of its own to link to internally. ============================================================ */ .rvh-rv-header { position: sticky; top: 0; z-index: 60; width: 100%; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 2px 10px -6px rgba(0,0,0,.2); } .rvh-rv-header-top { display: flex; align-items: center; gap: 22px; max-width: 1560px; margin: 0 auto; padding: 14px 32px; } .rvh-rv-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; padding: 0; flex: none; } .rvh-rv-hamburger span { display: block; width: 100%; height: 1.5px; background: #000; transition: transform .3s ease, opacity .3s ease; } .rvh-rv-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .rvh-rv-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rvh-rv-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .rvh-rv-logo { display: flex; align-items: center; flex: none; } .rvh-rv-logo-mark { height: 38px; width: auto; display: block; } .rvh-rv-logo-word { height: 24px; width: auto; display: none; } .rvh-rv-search { position: relative; flex: 1 1 auto; max-width: 400px; } .rvh-rv-search-input { width: 100%; box-sizing: border-box; padding: 10px 42px 10px 16px; border: 1px solid #e2e1df; border-radius: 999px; background: #fff; font-family: 'Playfair Display', serif; font-size: .85rem; color: #222; outline: none; } .rvh-rv-search-input::placeholder { color: #beb3b8; } .rvh-rv-search-input:focus { border-color: #832729; } .rvh-rv-search-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #000; } .rvh-rv-search-btn svg { width: 17px; height: 17px; } .rvh-rv-icons { display: flex; align-items: center; gap: 18px; margin-left: auto; flex: none; } .rvh-rv-icon { position: relative; color: #000; display: flex; text-decoration: none; } .rvh-rv-icon svg { width: 21px; height: 21px; } .rvh-rv-icon:hover { color: #832729; } .rvh-rv-cart-count { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #832729; color: #fff; font-family: 'Cinzel', serif; font-size: .55rem; line-height: 15px; text-align: center; } /* ---- desktop mega-menu nav ---- */ .rvh-rv-nav { border-top: 1px solid #eee; } .rvh-rv-nav-list { list-style: none; display: flex; justify-content: center; gap: 2px; max-width: 1560px; margin: 0 auto; padding: 0 32px; } .rvh-rv-nav-item { position: relative; } .rvh-rv-nav-link { display: block; padding: 12px 15px; border: none; background: transparent; cursor: pointer; font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: #000; white-space: nowrap; } .rvh-rv-nav-item:hover .rvh-rv-nav-link, .rvh-rv-nav-link[aria-expanded="true"] { color: #832729; } .rvh-rv-nav-item::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 1px; background: #832729; transform: scaleX(0); transition: transform .25s ease; } .rvh-rv-nav-item:hover::after, .rvh-rv-nav-item:focus-within::after { transform: scaleX(1); } .rvh-rv-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); display: flex; gap: 38px; background: #fff; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 20px 44px -18px rgba(0,0,0,.3); padding: 26px 32px; min-width: 300px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 5; } .rvh-rv-nav-item:hover .rvh-rv-mega, .rvh-rv-nav-item:focus-within .rvh-rv-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .rvh-rv-nav-item:nth-child(1) .rvh-rv-mega, .rvh-rv-nav-item:nth-child(2) .rvh-rv-mega, .rvh-rv-nav-item:nth-child(3) .rvh-rv-mega { left: 0; transform: translateY(6px); } .rvh-rv-nav-item:nth-child(1):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-child(1):focus-within .rvh-rv-mega, .rvh-rv-nav-item:nth-child(2):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-child(2):focus-within .rvh-rv-mega, .rvh-rv-nav-item:nth-child(3):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-child(3):focus-within .rvh-rv-mega { transform: translateY(0); } .rvh-rv-nav-item:nth-last-child(1) .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(2) .rvh-rv-mega { left: auto; right: 0; transform: translateY(6px); } .rvh-rv-nav-item:nth-last-child(1):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(1):focus-within .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(2):hover .rvh-rv-mega, .rvh-rv-nav-item:nth-last-child(2):focus-within .rvh-rv-mega { transform: translateY(0); } .rvh-rv-mega-col { display: flex; flex-direction: column; gap: 9px; min-width: 148px; } .rvh-rv-mega-head { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: #832729; margin-bottom: 3px; text-decoration: none; } .rvh-root a.rvh-rv-mega-head:hover { color: #5e1c1d; } .rvh-rv-mega-col a:not(.rvh-rv-mega-head) { font-family: 'Playfair Display', serif; font-size: .85rem; color: #000; text-decoration: none; opacity: .82; } .rvh-rv-mega-col a:not(.rvh-rv-mega-head):hover { opacity: 1; color: #832729; } .rvh-rv-mega-blurb { font-family: 'Playfair Display', serif; font-size: .84rem; color: #444; opacity: .9; max-width: 220px; line-height: 1.5; margin-bottom: 10px; } .rvh-rv-mega-view-all { display: inline-block; margin-top: 4px; font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #832729; text-decoration: none; border-bottom: 1px solid #832729; padding-bottom: 2px; } .rvh-rv-mega-view-all:hover { color: #5e1c1d; border-color: #5e1c1d; } /* ---- mobile: hamburger + slide-in accordion panel ---- */ .rvh-rv-mobile-panel { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.42); opacity: 0; visibility: hidden; transition: opacity .3s ease; } .rvh-rv-mobile-panel.rvh-is-open { opacity: 1; visibility: visible; } .rvh-rv-mobile-sheet { position: absolute; top: 0; left: 0; bottom: 0; width: min(86%, 360px); background: #fff; box-shadow: 14px 0 40px -20px rgba(0,0,0,.4); transform: translateX(-100%); transition: transform .35s cubic-bezier(.22,1,.36,1); overflow-y: auto; padding: 18px 0 40px; } .rvh-rv-mobile-panel.rvh-is-open .rvh-rv-mobile-sheet { transform: translateX(0); } .rvh-rv-mobile-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 16px; border-bottom: 1px solid #eee; margin-bottom: 6px; } .rvh-rv-mobile-close { border: none; background: transparent; color: #000; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 6px; } .rvh-rv-accordion-item { border-bottom: 1px solid #eee; } .rvh-rv-accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: none; border: none; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #000; cursor: pointer; } .rvh-rv-accordion-trigger[aria-expanded="true"] { color: #832729; } .rvh-rv-accordion-trigger .rvh-rv-accordion-arrow { transition: transform .25s ease; color: #832729; } .rvh-rv-accordion-trigger[aria-expanded="true"] .rvh-rv-accordion-arrow { transform: rotate(180deg); } .rvh-rv-accordion-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0 20px; } .rvh-rv-accordion-panel.rvh-is-open { max-height: 620px; padding-bottom: 14px; } .rvh-rv-accordion-panel a { display: block; padding: 6px 0; font-family: 'Playfair Display', serif; font-size: .85rem; color: #000; text-decoration: none; opacity: .85; } .rvh-rv-accordion-panel a:hover { opacity: 1; color: #832729; } .rvh-rv-accordion-panel .rvh-rv-mega-blurb { max-width: none; margin: 6px 0 8px; } @media (max-width: 1024px) { .rvh-rv-search { display: none; } .rvh-rv-hamburger { display: flex; } .rvh-rv-logo-mark { display: none; } .rvh-rv-logo-word { display: block; } .rvh-rv-nav { display: none; } .rvh-rv-header-top { padding: 12px 16px; gap: 12px; } .rvh-rv-icons { gap: 14px; } } /* Every in-page "jump to section" target (hero Explore buttons, Explore Lookbook, the checklist stage action, Curate My Checklist results) needs to land below the sticky .rvh-rv-header instead of under it -- scroll-margin-top covers both native anchor jumps and .rvh-scrollIntoView(). */ #bridesBookSection, #section5Moodboard, #notesSection, #lookbookSection, #bcResults { scroll-margin-top: 128px; } @media (max-width: 1024px) { #bridesBookSection, #section5Moodboard, #notesSection, #lookbookSection, #bcResults { scroll-margin-top: 80px; } } .rvh-main-wrapper { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: transparent; overflow: hidden; } /* Removed the global grain/film overlay so the paper texture shows cleanly */ .rvh-main-wrapper::before { content: none; display: none; } /* --- HERO SECTION --- */ .rvh-hero-section { display: flex; width: 100%; max-width: 1400px; height: 90vh; min-height: 750px; position: relative; z-index: 2; } /* Elegant Golden Border Box */ .rvh-border-frame { position: absolute; top: 25px; left: 25px; right: 25px; bottom: 25px; border: 1px solid rgba(181, 149, 92, 0.4); pointer-events: none; z-index: 2; } .rvh-border-frame::before, .rvh-border-frame::after { content: '✿'; position: absolute; color: rgba(181, 149, 92, 0.7); font-size: 14px; background: transparent; border-radius: 50%; } .rvh-border-frame::before { top: -9px; left: -9px; } .rvh-border-frame::after { bottom: -9px; right: -9px; } /* --- LEFT CONTENT: BRANDING --- */ .rvh-left-content { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 50; } .rvh-top-note { position: absolute; top: 8%; left: 8%; font-family: 'Caveat', cursive; font-size: 1.6rem; color: var(--text-dark); transform: rotate(-4deg); line-height: 1.2; opacity: 0.8; } .rvh-branding { text-align: center; color: var(--brand-color); margin-top: -40px; } .rvh-divider { width: 80px; height: 1px; background-color: var(--gold-light); margin: 30px auto; position: relative; } .rvh-divider::after { content: '✧'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); color: var(--gold); background: transparent; font-size: 16px; } /* --- RIGHT CONTENT: POLAROIDS & MEMO --- */ .rvh-right-content { flex: 1.2; position: relative; z-index: 5; } .rvh-polaroid { background: #fff; padding: 12px 12px 16px 12px; box-shadow: 4px 10px 30px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.05); position: absolute; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .rvh-polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; } .rvh-tape { position: absolute; width: 80px; height: 25px; background: rgba(240, 235, 220, 0.85); box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 0 4px rgba(0,0,0,0.02); backdrop-filter: blur(2px); z-index: 20; border-left: 2px dotted rgba(0,0,0,0.1); border-right: 2px dotted rgba(0,0,0,0.1); } .rvh-img-main { width: 340px; height: 500px; left: 8%; top: 8%; z-index: 6; transform: rotate(-2deg); } .rvh-img-main:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: 6px 15px 40px rgba(0,0,0,0.12); } .rvh-tape-main { top: -12px; left: 50%; transform: translateX(-50%) rotate(-1deg); } .rvh-img-tr { width: 270px; height: 260px; right: 8%; top: 4%; z-index: 5; transform: rotate(4deg); } .rvh-img-tr:hover { transform: rotate(2deg) translateY(-8px) scale(1.02); } .rvh-tape-tr { top: -10px; left: 15%; transform: rotate(3deg); } .rvh-img-br { width: 260px; height: 280px; right: 12%; bottom: 10%; z-index: 4; transform: rotate(-3deg); } .rvh-img-br:hover { transform: rotate(-1deg) translateY(-8px) scale(1.02); } .rvh-memo-card { position: absolute; bottom: 8%; left: 15%; background: #FDFBF7; padding: 30px 20px; width: 200px; box-shadow: 3px 8px 20px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(181, 149, 92, 0.2); z-index: 30; transform: rotate(-3deg); font-family: 'Caveat', cursive; font-size: 1.5rem; color: var(--text-dark); text-align: center; line-height: 1.4; pointer-events: none; } /* --- BRIDES BOOK SECTION (FULL-VIEWPORT BOOK) --- */ .rvh-brides-book-section { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; padding: 40px 24px 60px; position: relative; z-index: 10; } .rvh-section-tagline { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 500; color: var(--brand-color); letter-spacing: 3px; text-transform: uppercase; line-height: 1.2; margin-bottom: 5px; z-index: 5; text-align: center; } /* Stage that holds the open book + the closed books beside it */ .rvh-book-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; max-width: 1560px; height: 70vh; min-height: 520px; margin-top: 26px; perspective: 2600px; perspective-origin: 30% 50%; } /* ---------- THE OPEN BOOK ---------- */ .rvh-book-open { position: relative; flex: 0 0 auto; width: min(70%, 1080px); height: 100%; transform-style: preserve-3d; transform-origin: left center; border-radius: 3px 8px 8px 3px; background: radial-gradient(ellipse at 60% 35%, var(--paper-center) 0%, var(--paper-mid) 62%, var(--paper-edge) 100%); box-shadow: -6px 0 0 0 rgba(120, 96, 52, 0.10), -14px 0 26px -10px rgba(0,0,0,0.18), 34px 40px 70px -20px rgba(0,0,0,0.28), inset 0 0 90px rgba(150, 120, 70, 0.10); transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 0.5s ease, filter 0.4s ease; overflow: hidden; z-index: 20; cursor: pointer; } /* the open book is a link to that region's community page -- kept subtle (no transform, to avoid fighting the page-turn rotation) rather than a lift like .rvh-book-closed gets */ .rvh-book-open:not(.rvh-turning):hover { filter: brightness(1.03); } /* thick page block on the right edge (real book depth) */ .rvh-book-open::after { content: ''; position: absolute; top: 6px; bottom: 6px; right: -14px; width: 16px; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(to right, #fdfbf5 0px, #fdfbf5 1px, #e6dcc6 1px, #e6dcc6 2px, #f7f2e6 2px, #f7f2e6 3px); box-shadow: 6px 8px 18px rgba(0,0,0,0.18); z-index: 1; } /* soft inner spine gradient on the left */ .rvh-book-spine-shadow { position: absolute; top: 0; bottom: 0; left: 0; width: 70px; background: linear-gradient(to right, rgba(90, 70, 37, 0.30) 0%, rgba(90, 70, 37, 0.12) 35%, rgba(90, 70, 37, 0.02) 75%, transparent 100%); pointer-events: none; z-index: 6; } /* engraved gold frame */ .rvh-book-frame { position: absolute; top: 22px; left: 30px; right: 26px; bottom: 22px; border: 1px solid rgba(181, 149, 92, 0.55); pointer-events: none; z-index: 7; } .rvh-book-frame::before { content: ''; position: absolute; top: 7px; left: 7px; right: 7px; bottom: 7px; border: 1px solid rgba(181, 149, 92, 0.22); } .rvh-book-corner { position: absolute; width: 74px; height: 74px; border: 0 solid rgba(181, 149, 92, 0.85); pointer-events: none; z-index: 8; } .rvh-book-corner::after { content: '❈'; position: absolute; color: rgba(181, 149, 92, 0.9); font-size: 15px; line-height: 1; } .rvh-bc-tl { top: 22px; left: 30px; border-top-width: 2px; border-left-width: 2px; } .rvh-bc-tl::after { top: 6px; left: 8px; } .rvh-bc-tr { top: 22px; right: 26px; border-top-width: 2px; border-right-width: 2px; } .rvh-bc-tr::after { top: 6px; right: 8px; } .rvh-bc-bl { bottom: 22px; left: 30px; border-bottom-width: 2px; border-left-width: 2px; } .rvh-bc-bl::after { bottom: 6px; left: 8px; } .rvh-bc-br { bottom: 22px; right: 26px; border-bottom-width: 2px; border-right-width: 2px; } .rvh-bc-br::after { bottom: 6px; right: 8px; } /* faint damask motif behind everything */ .rvh-book-motif { position: absolute; inset: 0; opacity: 0.16; z-index: 1; pointer-events: none; background-image: radial-gradient(circle at 12% 22%, rgba(181,149,92,0.35) 0 2px, transparent 3px), radial-gradient(circle at 26% 68%, rgba(181,149,92,0.3) 0 2px, transparent 3px), radial-gradient(circle at 8% 82%, rgba(181,149,92,0.25) 0 2px, transparent 3px); background-size: 260px 260px; } /* left page: the storytelling side */ .rvh-page-left { position: absolute; top: 0; bottom: 0; left: 0; width: 52%; /* percentages here resolve against the book's WIDTH, so on a wide screen the top padding alone pushes the CTA down ~30px further while the book itself is no taller -- cap it on height too. */ padding: min(9%, 12vh) 5% min(8%, 10vh) 8%; display: flex; flex-direction: column; justify-content: flex-start; z-index: 10; } .rvh-book-title { font-family: 'Cinzel', serif; font-size: clamp(2.4rem, 4.2vw, 4.2rem); font-weight: 500; line-height: 1.05; letter-spacing: 6px; color: var(--brand-color); } .rvh-book-title-sub { font-size: 0.7em; } .rvh-book-divider { width: 190px; max-width: 70%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); position: relative; margin: 22px 0 18px; } .rvh-book-divider::after { content: '❖'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 13px; background: transparent; } .rvh-book-subtitle { font-family: 'Playfair Display', serif; font-size: clamp(1rem, 1.25vw, 1.35rem); letter-spacing: 1.5px; color: var(--text-dark); opacity: 0.85; } .rvh-book-cta { display: inline-flex; align-items: center; position: relative; align-self: flex-start; /* The CTA is pushed down by type that scales on vw, while the polaroids below are pinned to a book whose height scales on vh. On wide-but-short screens (1366x768, 1280x720, 1536x864) the two used to collide, so every input here is capped on height too. */ margin-top: clamp(16px, 4vh, 42px); padding: 13px 30px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); color: #fffaf0; font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; } .rvh-book-cta::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(226,205,166,.5); border-radius: 999px; pointer-events: none; } .rvh-book-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); } /* right page: the bride photograph, bleeding into the paper */ .rvh-page-right { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: 3; overflow: hidden; } .rvh-page-right img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; mask-image: linear-gradient(to left, rgba(0,0,0,1) 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 52%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0) 100%); } /* The cover is masked so its left edge fades into the page -- opaque from the right to 52%, fully transparent by 100%. Anything sitting in that left band reads as washed out, which is what was reported as the Rajasthani bride's face being "in the blurry section". rivaah-rajasthan.jpg is now the deck's Rajasthan (1).jpg, 1440x720 like the Metro and Marathi covers, and her face moved: it sits at source x 555 (39%), not 44% of the old 1600x822 frame. At the default 50% object-position the visible window is 548-892, putting her ahead of the left edge but still inside the fade; 29% moves the window to 321-664 and puts her ~68% across, past the mask's opaque threshold. Only ~24% of the image's width is ever visible in the portrait cover, so this only changes which slice that is. */ .rvh-page-right img[src*="rivaah-rajasthan"] { object-position: 29% 22%; } /* Same fade, same problem, for the two covers added from the deck. The visible window is only ~24% of each source's width (both are 1440x720 landscape in a portrait cover), so object-position picks which slice shows. Metro's bride sits at source x 553 (38%) and Marathi's at x 666 (46%); at the default 50% both land inside the left 48% of the box that the mask fades out. 29% and 39% move each face to ~68% across the window -- the same place the Rajasthani fix puts hers. */ .rvh-page-right img[src*="rivaah-metro"] { object-position: 29% 22%; } .rvh-page-right img[src*="rivaah-marathi"] { object-position: 39% 22%; } /* pinned polaroids along the bottom of the left page */ .rvh-book-polaroids { position: absolute; bottom: 5%; left: 7%; display: flex; align-items: flex-end; /* Column gap only, and no flex-wrap: the row must stay on one line. Bounding it on the right and letting it wrap pushed the photos onto two and three rows. */ /* The gap was a flat 46px while the photos themselves scale with the viewport, so on narrow screens the row outgrew the book and the third polaroid (and its caption) was clipped on the right. Scaling the gap with the viewport keeps 46px on desktop and tightens it only where the row would otherwise overflow. */ gap: 0 clamp(14px, 5.5vw, 46px); z-index: 12; } .rvh-pinned-photo { position: relative; background: #fff; padding: 8px 8px 10px 8px; box-shadow: 3px 9px 22px rgba(0,0,0,0.18); border: 1px solid rgba(0,0,0,0.05); } .rvh-pinned-photo img { width: clamp(72px, min(8.5vw, 10.7vh), 132px); height: clamp(80px, min(9.5vw, 12vh), 148px); object-fit: cover; display: block; } /* Short viewports (16:9 laptops, and any window with a lot of browser chrome) are where the CTA and the pinned photos collide: the CTA is pushed down by width-driven type and width-percentage padding, while the book itself gets no taller. Compress only in that band so 900px+ screens keep the original proportions. */ @media (max-height: 820px) { .rvh-page-left { padding-top: min(9%, 9vh); padding-bottom: min(8%, 7vh); } .rvh-book-cta { margin-top: clamp(12px, 3vh, 42px); } .rvh-pinned-photo img { width: clamp(64px, min(8.5vw, 9.5vh), 132px); height: clamp(72px, min(9.5vw, 10.5vh), 148px); } } .rvh-pinned-text { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%) rotate(-2deg); padding: 5px 14px; background: linear-gradient(to bottom, #f6efdf, #eadfc4); box-shadow: 1px 3px 8px rgba(0,0,0,0.12); font-family: 'Great Vibes', cursive; /* The photos are height-capped (min(8.5vw,10.7vh)) so they shrink on short screens while a vw-only label does not -- that mismatch is what made "Chero Pakaryo" overlap its neighbours. Cap the label on height too so the two shrink together. */ font-size: clamp(.82rem, min(1.15vw, 1.5vh), 1.2rem); color: var(--brand-color); white-space: nowrap; } .rvh-gold-pin { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; background: radial-gradient(circle at 32% 28%, #f4e3bf, #c9a765 55%, #6d5527); border-radius: 50%; box-shadow: 1px 3px 6px rgba(0,0,0,0.35); z-index: 4; } /* The handwritten labels are absolutely positioned under each photo and set nowrap, so a long ritual name ("Chero Pakaryo") is wider than the 128px photo it belongs to. The negative margins that used to tuck the photos into each other therefore made the labels collide. Photos now sit apart, with a gentler tilt so the labels stay clear of each other while the scrapbook feel survives. */ .rvh-pp-1 { transform: rotate(-5deg); z-index: 1; margin-bottom: 6px; } .rvh-pp-2 { transform: rotate(2.5deg); z-index: 3; margin-left: 0; margin-bottom: 26px; } .rvh-pp-3 { transform: rotate(-2.5deg); z-index: 2; margin-left: 0; } /* page-turn animation on switch */ .rvh-book-open.rvh-turning { transform: rotateY(-16deg) translateX(-1%) scale(0.985); } .rvh-book-open.rvh-turning .rvh-page-left, .rvh-book-open.rvh-turning .rvh-page-right { opacity: 0; transition: opacity 0.25s ease; } .rvh-page-left, .rvh-page-right, .rvh-book-polaroids { transition: opacity 0.45s ease 0.12s; } .rvh-book-open.rvh-turning .rvh-book-polaroids { opacity: 0; transition: opacity 0.2s ease; } /* turning sheet that sweeps across like a real page */ .rvh-turn-sheet { position: absolute; inset: 0; transform-origin: left center; transform: rotateY(0deg); background: linear-gradient(to right, #fdfbf5, #f1e9d7 70%, #e3d8bd); box-shadow: 18px 0 40px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; z-index: 30; } .rvh-book-open.rvh-turning .rvh-turn-sheet { animation: sweepPage 0.85s cubic-bezier(0.5, 0, 0.4, 1); } @keyframes sweepPage { 0% { opacity: 1; transform: rotateY(0deg); } 99% { opacity: 1; transform: rotateY(-172deg); } 100% { opacity: 0; transform: rotateY(-172deg); } } /* ---------- THE CLOSED BOOKS BESIDE IT ---------- */ .rvh-book-shelf { position: relative; display: flex; align-items: center; height: 100%; z-index: 15; margin-left: 22px; } .rvh-book-closed { position: relative; width: clamp(96px, 9vw, 150px); height: 84%; margin-left: -14px; border-radius: 3px 5px 5px 3px; background: radial-gradient(ellipse at 50% 25%, var(--paper-center) 0%, var(--paper-mid) 58%, var(--paper-edge) 100%); box-shadow: -8px 0 18px -6px rgba(0,0,0,0.20), 14px 26px 40px -18px rgba(0,0,0,0.22), inset 0 0 40px rgba(150,120,70,0.10); cursor: pointer; overflow: hidden; transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.2, 1), box-shadow 0.5s ease, filter 0.5s ease; display: flex; flex-direction: column; align-items: center; padding: 12% 8px 0; text-align: center; } .rvh-book-closed:nth-child(1) { height: 92%; } .rvh-book-closed:nth-child(2) { height: 86%; } .rvh-book-closed:nth-child(3) { height: 80%; } .rvh-book-closed::before { content: ''; position: absolute; top: 10px; left: 8px; right: 8px; bottom: 10px; border: 1px solid rgba(181, 149, 92, 0.45); z-index: 3; pointer-events: none; } /* spine highlight */ .rvh-book-closed::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 16px; background: linear-gradient(to right, rgba(90,70,37,0.28), transparent); z-index: 4; pointer-events: none; } .rvh-book-closed:hover { transform: translateY(-14px) translateX(6px); box-shadow: -10px 0 22px -6px rgba(0,0,0,0.24), 18px 32px 48px -18px rgba(0,0,0,0.28); filter: brightness(1.03); } .rvh-closed-title { font-family: 'Cinzel', serif; font-size: clamp(0.75rem, 0.95vw, 1.05rem); letter-spacing: 1.6px; padding: 0 4px; color: var(--brand-color); line-height: 1.25; z-index: 5; margin-top: 8px; } .rvh-closed-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.6rem, 0.72vw, 0.82rem); color: var(--text-dark); opacity: 0.75; margin-top: 10px; z-index: 5; line-height: 1.35; } .rvh-closed-img { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; } .rvh-closed-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0.9; mask-image: linear-gradient(to top, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%); } /* ---------- CONTROLS ---------- */ .rvh-book-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; z-index: 40; } .rvh-slider-arrow { background: rgba(253, 252, 248, 0.85); border: 1px solid var(--gold); color: var(--gold); width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .rvh-slider-arrow:hover { background: var(--gold); color: #fff; box-shadow: 0 6px 16px rgba(181,149,92,0.4); } .rvh-book-dots { display: flex; gap: 12px; align-items: center; } .rvh-book-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(181,149,92,0.35); cursor: pointer; transition: all 0.35s ease; } .rvh-book-dot.rvh-active { background: var(--brand-color); transform: scale(1.5); } .rvh-book-hint { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.92rem; line-height: 1.55; color: var(--text-dark); opacity: 0.6; margin-top: 12px; text-align: center; } @media (max-width: 1024px) { .rvh-brides-book-section { min-height: auto; padding: 60px 16px; } .rvh-book-stage { height: auto; min-height: 0; flex-direction: column; } .rvh-book-open { width: 100%; max-width: 640px; height: 62vh; min-height: 420px; } .rvh-book-open::after { display: none; } .rvh-page-left { width: 62%; padding: 8% 5%; } .rvh-book-cta { margin-top: 30px; padding: 11px 24px; font-size: .64rem; letter-spacing: .14em; } .rvh-page-right { width: 70%; } .rvh-book-polaroids { bottom: 5%; left: 5%; } .rvh-pinned-photo img { width: 66px; height: 76px; } .rvh-pinned-text { font-size: 0.9rem; bottom: -22px; } .rvh-book-shelf { margin: 26px 0 0; height: 190px; } .rvh-book-closed { width: 100px; margin-left: -10px; padding: 12% 4px 0; } .rvh-closed-title { font-size: 0.48rem; letter-spacing: 0.1px; white-space: nowrap; padding: 0 2px; } } /* Below ~360px even the tightened gap is not enough: the captions are wider than the photos they sit under, so "Fusion Vows" ran past the book's right edge and was clipped. Shrink the photos and the caption type in that band only. */ @media (max-width: 360px) { .rvh-book-polaroids { left: 4%; } .rvh-pinned-photo img { width: 58px; height: 68px; } .rvh-pinned-text { font-size: 0.78rem; bottom: -19px; } } @media (max-width: 680px) { /* The visible gold frame around the card isn't .rvh-page-left's own edge - it's a separate absolutely-positioned .rvh-book-frame/.rvh-book-corner set with FIXED pixel insets (22px top/bottom, 30px left, 26px right) relative to .rvh-book-open. .rvh-page-left starts at .rvh-book-open's raw (0,0) corner, so a percentage padding here is computed against .rvh-page-left's own (narrower) width - at this breakpoint that came out to less than the frame's 30px inset, which is why text was still reading as flush against/crossing the border after the first pass. Matching fixed-px padding (safely exceeding every side's inset by 10-14px) is what actually guarantees clearance regardless of the exact rendered width. */ .rvh-page-left { width: 80%; padding: 72px 30px 34px 52px; } .rvh-book-title { font-size: clamp(1.3rem, 5.6vw, 1.7rem); letter-spacing: 1px; max-width: 100%; white-space: nowrap; overflow-wrap: break-word; } .rvh-book-divider { margin: 18px 0 14px; } .rvh-book-subtitle { font-size: .8rem; letter-spacing: .5px; max-width: 100%; } } @media (max-width: 360px) { .rvh-page-left { padding: 72px 24px 34px 44px; } .rvh-book-title { font-size: 1.15rem; letter-spacing: .5px; } } /* --- DAINTY, DRIFTING ROSE PETALS --- */ .rvh-petal { position: absolute; background-repeat: no-repeat; background-size: contain; background-position: center; filter: drop-shadow(1px 4px 6px rgba(90,60,55,.22)); z-index: 25; opacity: 0.85; pointer-events: none; will-change: transform; } /* Hero Petals */ /* Second section (Book of Traditions) - a soft, constant petal shower */ .rvh-p7 { width: 30px; height: 30px; top: 10%; left: 9%; --base-transform: rotate(85deg) skew(12deg); transform: var(--base-transform); animation: driftA 7s ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png'); } .rvh-p8 { width: 22px; height: 22px; bottom: 12%; right: 16%; --base-transform: rotate(-35deg) skew(8deg); transform: var(--base-transform); animation: driftB 8.5s ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png'); } .rvh-p9 { width: 17px; height: 17px; top: 38%; right: 5%; opacity: 0.55; --base-transform: rotate(120deg) skew(15deg); transform: var(--base-transform); animation: driftC 6.5s ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); } .rvh-p10 { width: 25px; height: 25px; top: 4%; right: 32%; opacity: 0.7; --base-transform: rotate(30deg) skew(10deg); transform: var(--base-transform); animation: driftD 9s ease-in-out infinite; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); } .rvh-p11 { width: 15px; height: 15px; top: 62%; left: 5%; opacity: 0.6; --base-transform: rotate(-70deg) skew(12deg); transform: var(--base-transform); animation: driftB 7.5s ease-in-out infinite 1.2s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png'); } .rvh-p12 { width: 19px; height: 19px; bottom: 26%; left: 46%; opacity: 0.5; --base-transform: rotate(155deg) skew(8deg); transform: var(--base-transform); animation: driftE 8s ease-in-out infinite 0.6s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png'); } .rvh-p13 { width: 13px; height: 13px; top: 22%; left: 30%; opacity: 0.5; --base-transform: rotate(10deg) skew(14deg); transform: var(--base-transform); animation: driftC 6s ease-in-out infinite 2s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); } .rvh-p14 { width: 27px; height: 27px; bottom: 4%; left: 24%; opacity: 0.6; --base-transform: rotate(-15deg) skew(10deg); transform: var(--base-transform); animation: driftD 10s ease-in-out infinite 1.6s; z-index: 5; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); } /* Third section petals */ .rvh-p4 { width: 32px; height: 32px; top: -4%; right: 12%; --base-transform: rotate(45deg) skew(5deg); transform: var(--base-transform); animation: driftD 10s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png'); } .rvh-p5 { width: 24px; height: 24px; bottom: 6%; left: 8%; --base-transform: rotate(-60deg) skew(15deg); transform: var(--base-transform); animation: driftE 11s ease-in-out infinite; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png'); } .rvh-p6 { width: 18px; height: 18px; top: 30%; left: 20%; opacity: 0.55; --base-transform: rotate(15deg) skew(10deg); transform: var(--base-transform); animation: driftC 9s ease-in-out infinite 1s; background-image: url('https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png'); } /* fuller, faster, but still feather-light drifting */ @keyframes driftA { 0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); } 25% { transform: var(--base-transform) translate(-34px, 46px) rotate(-70deg); } 50% { transform: var(--base-transform) translate(-70px, 96px) rotate(-150deg) scale(1.08); } 75% { transform: var(--base-transform) translate(-26px, 52px) rotate(-232deg); } 100% { transform: var(--base-transform) translate(0, 0) rotate(-360deg); } } @keyframes driftB { 0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); } 30% { transform: var(--base-transform) translate(48px, -40px) rotate(90deg); } 60% { transform: var(--base-transform) translate(96px, 28px) rotate(200deg) scale(1.12); } 100% { transform: var(--base-transform) translate(0, 0) rotate(360deg); } } @keyframes driftC { 0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); } 50% { transform: var(--base-transform) translate(44px, 82px) rotate(180deg) scale(0.92); } 100% { transform: var(--base-transform) translate(0, 0) rotate(360deg); } } @keyframes driftD { 0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); } 35% { transform: var(--base-transform) translate(-56px, 60px) rotate(-110deg) scale(1.06); } 70% { transform: var(--base-transform) translate(30px, 110px) rotate(-220deg) scale(0.95); } 100% { transform: var(--base-transform) translate(0, 0) rotate(-360deg); } } @keyframes driftE { 0% { transform: var(--base-transform) translate(0, 0) rotate(0deg); } 40% { transform: var(--base-transform) translate(70px, 54px) rotate(130deg); } 80% { transform: var(--base-transform) translate(18px, 108px) rotate(280deg) scale(1.1); } 100% { transform: var(--base-transform) translate(0, 0) rotate(360deg); } } /* Responsive Fixes */ @media (max-width: 1024px) { .rvh-hero-section { flex-direction: column; height: auto; padding-bottom: 2rem; } .rvh-left-content { padding: 4rem 0 2rem 0; } .rvh-right-content { height: 700px; margin-top: 2rem; } .rvh-img-main { left: 0; width: 300px; height: 420px; } .rvh-img-tr { width: 220px; height: 220px; right: 0; } .rvh-img-br { width: 220px; height: 240px; right: 0; bottom: 25%; } .rvh-memo-card { left: 15%; bottom: 5%; } } /* ============================================================ SAVE YOUR DATE — paper tile, flipping keepsake card ============================================================ */ :root { --blush: #F7DCE1; --blush-deep: #E9B9C3; --blush-soft: #FDF3F4; --ink-soft: rgba(59, 51, 45, 0.62); } .rvh-savedate-section { position: relative; z-index: 2; width: 100%; max-width: 1400px; padding: 80px 22px 120px; display: flex; flex-direction: column; align-items: center; } .rvh-std-eyebrow { font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 6px; text-transform: uppercase; color: var(--gold); text-align: center; } /* ---------- THE PAPER TILE (same language as the Traditions book) ---------- */ .rvh-std-flip { position: relative; width: 100%; max-width: 1240px; margin-top: 34px; perspective: 2400px; perspective-origin: 50% 42%; } .rvh-std-flip-inner { position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; transform: rotateY(0deg) translateZ(0); transition: transform 1.15s cubic-bezier(0.45, 0.05, 0.15, 1); /* height is set directly (not transitioned) to whichever face is tallest, so the 3D flip never has to fight a layout reflow mid-animation \u2014 this is what was causing the stutter */ } .rvh-savedate-section.rvh-is-sealed .rvh-std-flip-inner { transform: rotateY(180deg); } /* Mobile flip sharpness: will-change promotes each face to its own GPU layer, and mobile rasterises that layer once at its pre-rotation size -- so after the 180deg flip the back face is scaled up from a stale bitmap and reads soft. Letting the browser rasterise on demand costs nothing here (the flip is a one-off) and keeps the text crisp. */ @media (max-width: 680px) { .rvh-savedate-section .rvh-std-flip-inner, .rvh-savedate-section .rvh-std-face { will-change: auto; } .rvh-savedate-section .rvh-std-face { transform: none; } .rvh-savedate-section .rvh-std-face.rvh-back { transform: rotateY(180deg); } } .rvh-std-face { position: absolute; top: 0; left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; will-change: transform; transform: translateZ(0); border-radius: 10px; padding: 56px 58px 62px; background: radial-gradient(ellipse at 50% 14%, var(--paper-center) 0%, var(--paper-mid) 54%, var(--paper-edge) 100%); /* the tile now floats above the page paper */ box-shadow: 0 2px 4px rgba(120, 96, 52, 0.10), 0 14px 28px -12px rgba(120, 96, 52, 0.24), 0 48px 90px -38px rgba(112, 78, 62, 0.42), 0 80px 120px -60px rgba(112, 78, 62, 0.30), inset 0 1px 0 rgba(255,255,255,0.9); overflow: hidden; transition: box-shadow 0.9s ease; } .rvh-std-face.rvh-back { transform: rotateY(180deg); } /* the hidden face must never steal a click mid-flip */ .rvh-std-face.rvh-back { pointer-events: none; } .rvh-savedate-section.rvh-is-sealed .rvh-std-face.rvh-back { pointer-events: auto; } .rvh-savedate-section.rvh-is-sealed .rvh-std-face.rvh-front { pointer-events: none; } /* a soft cast shadow under the floating tile */ .rvh-std-flip::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -34px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(112, 78, 62, 0.20) 0%, rgba(112, 78, 62, 0.07) 48%, transparent 74%); filter: blur(10px); pointer-events: none; z-index: -1; } /* paper grain */ .rvh-std-face::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sd)'/%3E%3C/svg%3E"); opacity: 0.28; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } .rvh-std-face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 8% 92%, rgba(120,96,52,0.10), transparent 42%), radial-gradient(circle at 96% 6%, rgba(120,96,52,0.08), transparent 40%); pointer-events: none; z-index: 1; } /* engraved gold double frame + corner motifs, exactly like the book */ .rvh-std-frame { position: absolute; inset: 18px; border: 1px solid rgba(181, 149, 92, 0.5); border-radius: 3px; pointer-events: none; z-index: 3; } .rvh-std-frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(181, 149, 92, 0.2); border-radius: 2px; } .rvh-std-corner { position: absolute; width: 70px; height: 70px; border: 0 solid rgba(181, 149, 92, 0.85); pointer-events: none; z-index: 4; } .rvh-std-corner::after { content: '\2748'; position: absolute; color: rgba(181, 149, 92, 0.9); font-size: 14px; line-height: 1; } .rvh-sc-tl { top: 18px; left: 18px; border-top-width: 2px; border-left-width: 2px; } .rvh-sc-tl::after { top: 6px; left: 8px; } .rvh-sc-tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; } .rvh-sc-tr::after { top: 6px; right: 8px; } .rvh-sc-bl { bottom: 18px; left: 18px; border-bottom-width: 2px; border-left-width: 2px; } .rvh-sc-bl::after { bottom: 6px; left: 8px; } .rvh-sc-br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; } .rvh-sc-br::after { bottom: 6px; right: 8px; } /* faint damask dots */ .rvh-std-motif { position: absolute; inset: 0; opacity: 0.16; z-index: 1; pointer-events: none; background-image: radial-gradient(circle at 12% 22%, rgba(181,149,92,0.35) 0 2px, transparent 3px), radial-gradient(circle at 26% 68%, rgba(181,149,92,0.3) 0 2px, transparent 3px), radial-gradient(circle at 8% 82%, rgba(181,149,92,0.25) 0 2px, transparent 3px); background-size: 260px 260px; } .rvh-std-grid { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(250px, 0.62fr) minmax(520px, 1.16fr); gap: 34px; align-items: center; } /* ---------- PHOTOBOOTH STRIPS ---------- */ .rvh-strip-theatre { position: relative; height: 620px; display: flex; align-items: center; justify-content: center; } .rvh-photo-strip { position: absolute; top: 50%; width: 190px; padding: 13px 13px 32px; background: linear-gradient(180deg, #FFFDFB 0%, #FBF5EE 100%); box-shadow: 6px 16px 34px -12px rgba(110, 90, 60, 0.42); transition: transform 1.5s cubic-bezier(0.62, 0.01, 0.24, 1), box-shadow 1.2s ease, filter 1.2s ease; will-change: transform; } .rvh-photo-strip::before, .rvh-photo-strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9px; background-image: radial-gradient(circle at 50% 9px, var(--paper-mid) 5px, transparent 5.5px); background-size: 9px 18px; background-repeat: repeat-y; } .rvh-photo-strip::before { left: -4px; } .rvh-photo-strip::after { right: -4px; } .rvh-photo-strip img.rvh-strip-photo { display: block; width: 100%; height: 172px; object-fit: cover; filter: saturate(1.04) contrast(1.02) brightness(1.02); margin-bottom: 11px; } .rvh-photo-strip img.rvh-strip-photo:last-of-type { margin-bottom: 0; } .rvh-strip-caption { position: absolute; left: 4px; right: 4px; bottom: 8px; white-space: nowrap; overflow: hidden; text-align: center; font-family: 'Caveat', cursive; font-size: 0.98rem; color: rgba(108, 21, 28, 0.72); } /* the real golden clip image */ .rvh-clip-img { position: absolute; top: -46px; left: 50%; transform: translateX(-50%); width: 86px; height: auto; z-index: 6; filter: drop-shadow(0 8px 12px rgba(90, 70, 40, 0.42)); pointer-events: none; } .rvh-photo-strip.rvh-at-front { transform: translate(-58%, -50%) rotate(-3.2deg); z-index: 3; } .rvh-photo-strip.rvh-at-back { transform: translate(24%, -46%) rotate(3.6deg) scale(0.93); z-index: 2; box-shadow: 4px 12px 26px -14px rgba(110, 90, 60, 0.4); } .rvh-photo-strip.rvh-at-back .rvh-clip-img { opacity: 0; transition: opacity 0.5s ease; } .rvh-photo-strip.rvh-at-front .rvh-clip-img { opacity: 1; transition: opacity 0.6s ease 0.4s; } .rvh-back-strips { height: 540px; align-self: center; } /* ---------- THE LETTER SIDE ---------- */ .rvh-std-letter { position: relative; } .rvh-std-title { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); line-height: 1.2; } .rvh-std-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.95rem, 1.3vw, 1.1rem); line-height: 1.65; color: var(--text-dark); opacity: 0.8; margin-top: 12px; max-width: 380px; line-height: 1.6; } /* the same gold rule-with-diamond divider used on the sealed card (.rvh-sealed-rule / .rvh-stage-line), reused here under the section heading */ .rvh-std-flourish { width: min(30%, 136px); height: 1px; margin: 16px auto 53px; background: linear-gradient(to right, transparent, var(--gold), transparent); position: relative; } .rvh-std-flourish::after { content: '❖'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 11px; } /* primary step : the date */ .rvh-step-primary { width: 100%; max-width: 560px; margin-left: 18px; } .rvh-step-tag { display: flex; align-items: center; gap: 10px; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 3.4px; text-transform: uppercase; color: var(--brand-color); margin-bottom: 14px; } .rvh-step-tag i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6rem; color: #FFFBEF; background: linear-gradient(140deg, var(--gold-light), var(--gold) 55%, #8d7748); } .rvh-date-row { display: flex; align-items: flex-end; gap: 12px; } .rvh-date-cell { display: flex; flex-direction: column; } .rvh-date-cell.rvh-yy { flex: 1.3 1 0; } .rvh-date-cell.rvh-dd, .rvh-date-cell.rvh-mm { flex: 1 1 0; } .rvh-date-label { font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(108, 21, 28, 0.6); margin-bottom: 8px; text-align: center; } .rvh-date-input { width: 100%; box-sizing: border-box; font-family: 'Cinzel', serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: 2px; text-align: center; color: var(--brand-color); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(181, 149, 92, 0.45); border-radius: 5px; padding: 16px 8px 13px; outline: none; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .rvh-date-input::placeholder { color: rgba(59,51,45,0.24); letter-spacing: 3px; } .rvh-date-input:focus { background: #fff; border-color: var(--gold); box-shadow: 0 10px 22px -14px rgba(120, 96, 52, 0.7); } .rvh-date-sep { font-family: 'Cinzel', serif; font-size: 1.4rem; color: rgba(181, 149, 92, 0.8); padding-bottom: 20px; } .rvh-date-hint { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; } .rvh-date-input.rvh-missing { border-color: rgba(150, 40, 48, 0.85); background: rgba(255, 244, 244, 0.95); } /* secondary step : names, deliberately quieter */ .rvh-step-secondary { max-width: 470px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed rgba(181, 149, 92, 0.42); } .rvh-step-secondary .rvh-step-note { font-family: 'Caveat', cursive; font-size: 1rem; color: rgba(59,51,45,0.6); margin-bottom: 10px; } .rvh-name-row { display: flex; gap: 14px; flex-wrap: wrap; } .rvh-name-field { flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; } .rvh-name-label { font-family: 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 2.6px; text-transform: uppercase; color: rgba(59, 51, 45, 0.45); margin-bottom: 6px; } .rvh-name-input { width: 100%; box-sizing: border-box; font-family: 'Playfair Display', serif; font-size: 0.92rem; color: var(--text-dark); background: transparent; border: none; border-bottom: 1px solid rgba(181, 149, 92, 0.4); padding: 7px 2px 6px; outline: none; transition: border-color 0.4s ease; } .rvh-name-input::placeholder { color: rgba(59,51,45,0.26); font-style: italic; } .rvh-name-input:focus { border-color: var(--gold); } .rvh-btn-seal { margin-top: 26px; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 4px; text-transform: uppercase; color: #fffaf0; padding: 15px 34px; border: none; border-radius: 999px; cursor: pointer; position: relative; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease; } .rvh-btn-seal::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(226,205,166,0.5); border-radius: 999px; pointer-events: none; } .rvh-btn-seal:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); } .rvh-btn-seal.rvh-ghost { background: transparent; color: var(--brand-color); border: 1px solid rgba(181, 149, 92, 0.75); box-shadow: none; padding: 13px 28px; } .rvh-btn-seal.rvh-ghost::after { content: none; } .rvh-btn-seal.rvh-ghost:hover { background: rgba(255,255,255,0.7); } /* ============ BACK FACE : THE SEALED KEEPSAKE ============ */ /* ============ BACK FACE : BUILT FROM THE PROVIDED IVORY CARD ASSET ============ */ .rvh-back-inner { position: relative; z-index: 6; padding: 8px 8px 12px; display: grid; grid-template-columns: minmax(520px, 1.05fr) minmax(300px, 0.62fr); gap: clamp(38px, 4.3vw, 62px); align-items: center; } .rvh-back-card-column { position: relative; width: 100%; max-width: 590px; justify-self: center; } .rvh-back-card-shell { position: relative; width: 100%; aspect-ratio: 1122 / 1402; filter: drop-shadow(0 4px 5px rgba(85,60,40,.10)) drop-shadow(0 22px 30px rgba(85,60,40,.18)) drop-shadow(0 46px 54px rgba(85,60,40,.13)); } .rvh-back-card-shell.rvh-is-capturing { filter: none; } /* The card artwork used to set the height on its own (shell aspect-ratio + an auto-height ) while the content was absolutely positioned inside it. Content that outgrew the artwork simply spilled: at 320px the Share / Invite buttons hung 36px below the card. The image now stretches to fill the shell and the content sits in normal flow, so aspect-ratio acts as a floor -- the card keeps its proportions whenever the content fits, and grows to contain it when it does not. Vertical padding percentages are the old inset values x1.2496, because padding resolves against width where inset's top/bottom resolved against height. */ .rvh-back-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; user-select:none; } .rvh-back-card-content { position:relative; z-index:3; padding:9.5% 10.8% 9.25%; display:flex; flex-direction:column; align-items:center; text-align:center; min-height:0; } .rvh-sealed-eyebrow { font-family:'Cinzel',serif; font-size:clamp(.48rem,.64vw,.62rem); letter-spacing:clamp(3px,.38vw,5px); text-transform:uppercase; color:var(--gold); margin-top:2%; } .rvh-sealed-main-date { font-family:'Playfair Display',serif; font-size:clamp(1.46rem,2.18vw,2.02rem); font-weight:500; line-height:1.04; letter-spacing:.15px; color:var(--brand-color); margin-top:clamp(10px,.95vw,13px); white-space:nowrap; } .rvh-sealed-forever { font-family:'Great Vibes',cursive; font-size:clamp(1.05rem,1.62vw,1.46rem); line-height:1.08; letter-spacing:.45px; color:rgba(181,149,92,.72); margin-top:clamp(11px,1.05vw,14px); transform:translateY(2px); } .rvh-sealed-date { font-family:'Cinzel',serif; font-size:clamp(.5rem,.72vw,.66rem); letter-spacing:clamp(2.6px,.44vw,4.5px); text-transform:uppercase; color:rgba(59,51,45,.62); margin-top:clamp(11px,1.35vw,16px); white-space:nowrap; } .rvh-sealed-rule { width:min(30%,136px); height:1px; margin:clamp(18px,1.75vw,23px) auto 0; background:linear-gradient(to right,transparent,var(--gold),transparent); position:relative; } .rvh-sealed-rule::after { content:'❖'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:11px; } .rvh-reveal { opacity:0; transform:translateY(14px); } .rvh-savedate-section.rvh-is-sealed .rvh-reveal { animation:sealedRise 1.05s cubic-bezier(.22,1,.32,1) forwards; animation-delay:calc(.62s + var(--i,0)*.075s); } @keyframes sealedRise { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} } .rvh-countdown { width:84%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.05vw,13px); margin-top:clamp(18px,1.8vw,22px); } .rvh-count-card { position:relative; min-width:0; padding:clamp(10px,1.25vw,14px) clamp(4px,.55vw,8px) clamp(8px,1.02vw,11px); border-radius:clamp(10px,1vw,13px); text-align:center; background:linear-gradient(168deg,#FBE4EA 0%,#F7D9E2 100%); border:1px solid rgba(255,255,255,.75); box-shadow:0 2px 5px rgba(150,104,116,.10),0 10px 18px -13px rgba(150,104,116,.36),0 18px 28px -24px rgba(112,78,62,.25),inset 0 1px 0 rgba(255,255,255,.88); } .rvh-count-card::before { content:''; position:absolute; inset:5px; border-radius:max(7px,calc(1vw - 2px)); background:linear-gradient(172deg,#FFF7F9 0%,#FDECF1 48%,#F9DDE5 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -7px 12px -11px rgba(160,110,122,.25); } .rvh-count-card::after { content:''; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.68); border-radius:max(5px,calc(1vw - 4px)); pointer-events:none; } .rvh-count-inner { position:relative; z-index:2; min-width:0; } .rvh-count-num { font-family:'Playfair Display',serif; font-weight:400; font-size:clamp(1.34rem,2.2vw,2.08rem); line-height:1; color:var(--brand-color); font-variant-numeric:tabular-nums; white-space:nowrap; } .rvh-count-rule { width:clamp(14px,1.6vw,18px); height:1px; margin:clamp(6px,.75vw,8px) auto clamp(4px,.55vw,6px); background:var(--gold); opacity:.72; } .rvh-count-label { font-family:'Cinzel',serif; font-size:clamp(.38rem,.48vw,.46rem); letter-spacing:clamp(1.5px,.2vw,2.2px); text-transform:uppercase; color:rgba(59,51,45,.55); white-space:nowrap; } .rvh-stage-card { position:relative; width:100%; flex:1 1 auto; min-height:0; margin:clamp(30px,3.15vw,38px) auto 0; padding:clamp(18px,1.8vw,24px) 4px clamp(12px,1.2vw,16px); text-align:center; display:flex; flex-direction:column; align-items:center; } .rvh-stage-card::before { content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(34%,150px); height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); } .rvh-stage-chapter { font-family:'Caveat',cursive; font-size:clamp(.88rem,1.16vw,1.02rem); color:rgba(108,21,28,.78); margin-bottom:2px; } .rvh-stage-name { font-family:'Great Vibes',cursive; font-size:clamp(1.55rem,2.5vw,2.15rem); font-weight:400; letter-spacing:.3px; text-transform:none; color:var(--gold); margin-top:2px; line-height:1.18; } .rvh-stage-line { width:min(30%,130px); height:1px; margin:clamp(8px,1vw,13px) auto; background:linear-gradient(to right,transparent,var(--gold),transparent); position:relative; } .rvh-stage-line::after { content:'❖'; position:absolute; top:-9px; left:50%; transform:translateX(-50%); color:var(--gold); font-size:10px; } .rvh-stage-timeframe { font-family:'Playfair Display',serif; font-weight:600; font-style:normal; font-size:clamp(.9rem,1.1vw,1.04rem); letter-spacing:.2px; color:rgba(43,37,32,.86); margin:0 auto 4px; } .rvh-stage-message { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(.70rem,.84vw,.82rem); line-height:1.72; color:rgba(59,51,45,.70); max-width:84%; margin:0 auto; } .rvh-stage-actions { width:min(70%,330px); display:grid; grid-template-columns:1fr; justify-items:center; gap:18px; margin:auto auto 16px; padding-top:clamp(18px,1.7vw,22px); } /* the bottom "share" action split into two peer CTAs (same style as the single share button they replaced) side by side; together they span the same width as .rvh-stage-cta.rvh-primary above, since both sit in the same width:min(70%,330px) .rvh-stage-actions column */ .rvh-stage-cta-row { display:flex; gap:10px; width:100%; } .rvh-stage-cta-row .rvh-stage-cta.rvh-share { flex:1 1 0; width:auto; min-height:52px; padding:12px 8px; font-size:.6rem; letter-spacing:.09em; } .rvh-stage-cta { width:100%; min-height:40px; font-family:'Cinzel',serif; font-size:clamp(.44rem,.52vw,.5rem); letter-spacing:clamp(1.9px,.21vw,2.45px); text-transform:uppercase; padding:10px clamp(16px,1.25vw,21px); border-radius:999px; cursor:pointer; border:1px solid rgba(108,21,28,.55); color:var(--brand-color); background:rgba(255,255,255,.42); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background .35s ease; } .rvh-stage-cta:hover { transform:translateY(-2px); box-shadow:0 12px 22px -16px rgba(108,21,28,.55); } .rvh-stage-cta.rvh-primary { position:relative; overflow:hidden; background:linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); color:#fffaf0; border:none; padding:14px 34px; font-size:.8rem; letter-spacing:.24em; box-shadow: 0 14px 26px rgba(108,21,28,.32), inset 0 1px 0 rgba(255,255,255,.22); } .rvh-stage-cta.rvh-primary::before { content:''; position:absolute; inset:4px; border-radius:999px; border:1px solid rgba(226,205,166,.5); pointer-events:none; } .rvh-stage-cta.rvh-primary:hover { box-shadow: 0 20px 34px rgba(108,21,28,.38), inset 0 1px 0 rgba(255,255,255,.28); } .rvh-stage-cta.rvh-share { display:block; width:100%; padding:14px 34px; font-size:.8rem; letter-spacing:.24em; background:rgba(255,255,255,.06); border-color:rgba(108,21,28,.30); box-shadow:none; } .rvh-stage-cta.rvh-share:hover { background:rgba(108,21,28,.055); border-color:rgba(108,21,28,.48); box-shadow:0 8px 16px -14px rgba(108,21,28,.42); transform:translateY(-1px); } /* --- SHARE THE DATE : email / WhatsApp popup --- */ .rvh-sd-share-overlay { position: fixed; inset: 0; background: rgba(43,30,22,.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 999; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .rvh-sd-share-overlay.rvh-is-open { opacity: 1; pointer-events: auto; } .rvh-sd-share-card { position: relative; width: min(420px, 100%); background: linear-gradient(180deg, var(--paper-center) 0%, var(--paper-mid) 100%); border: 1px solid rgba(181,149,92,.4); border-radius: 14px; padding: 34px 30px 28px; box-shadow: 0 40px 70px -20px rgba(43,30,22,.5); text-align: center; transform: translateY(14px) scale(.98); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .rvh-sd-share-overlay.rvh-is-open .rvh-sd-share-card { transform: translateY(0) scale(1); } .rvh-sd-share-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(108,21,28,.25); background: rgba(255,255,255,.6); color: var(--brand-color); font-size: 1rem; line-height: 1; cursor: pointer; } .rvh-sd-share-kicker { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .rvh-sd-share-title { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--brand-color); margin: 0 0 8px; } .rvh-sd-share-copy { font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; color: rgba(59,51,45,.72); margin: 0 0 22px; line-height: 1.55; } .rvh-sd-share-field { text-align: left; margin-bottom: 16px; } .rvh-sd-share-field span { display: block; font-family: 'Cinzel', serif; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(59,51,45,.6); margin-bottom: 6px; } .rvh-sd-share-field input { width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid rgba(181,149,92,.45); background: rgba(255,255,255,.8); font-family: 'Playfair Display', serif; font-size: .88rem; color: var(--text-dark); } .rvh-sd-share-field input:focus { outline: none; border-color: rgba(108,21,28,.55); } .rvh-sd-share-field.rvh-has-error input { border-color: rgba(178,40,40,.75); } .rvh-sd-share-row { display: flex; gap: 10px; align-items: flex-end; } .rvh-sd-share-row[hidden] { display: none; } .rvh-sd-share-row .rvh-sd-share-field { flex: 1; margin-bottom: 0; } .rvh-sd-share-btn { appearance: none; border: none; cursor: pointer; position: relative; font-family: 'Cinzel', serif; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #fffaf0; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); padding: 11px 16px; border-radius: 999px; box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; white-space: nowrap; } .rvh-sd-share-btn::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(226,205,166,0.5); border-radius: 999px; pointer-events: none; } .rvh-sd-share-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); } .rvh-sd-share-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; } .rvh-sd-share-status { margin-top: 16px; min-height: 18px; font-family: 'Caveat', cursive; font-size: .95rem; color: var(--brand-color); } .rvh-sd-share-status.rvh-is-error { color: #a22; font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; } .rvh-sd-share-note { margin-top: 4px; font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; line-height: 1.55; color: rgba(59,51,45,.5); } @media (max-width: 480px) { /* The base .rvh-sd-share-row rule sets align-items:flex-end for its normal row layout (aligning the field and button to a shared baseline). Switching to flex-direction:column here flips the cross axis to horizontal, so that same flex-end silently became "align right" instead of the intended centered stack - override it explicitly. */ .rvh-sd-share-row { flex-direction: column; align-items: stretch; } } .rvh-sd-share-checkbox-row { display: flex; align-items: flex-start; gap: 9px; text-align: left; margin: 4px 0 20px; cursor: pointer; } .rvh-sd-share-checkbox-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin-top: 1px; border-radius: 4px; border: 1px solid rgba(181,149,92,.6); background: rgba(255,255,255,.85); cursor: pointer; position: relative; transition: background .2s ease, border-color .2s ease; } .rvh-sd-share-checkbox-row input[type="checkbox"]:checked { background: var(--brand-color); border-color: var(--brand-color); } .rvh-sd-share-checkbox-row input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fffaf0; border-width: 0 2px 2px 0; transform: rotate(45deg); } .rvh-sd-share-checkbox-row span { font-family: 'Playfair Display', serif; font-size: .8rem; line-height: 1.4; color: rgba(59,51,45,.78); } .rvh-sd-share-checkbox-row.rvh-has-error input[type="checkbox"] { border-color: rgba(178,40,40,.75); } .rvh-sd-share-btn-block { display: block; width: 100%; } .rvh-sd-share-btn-block[hidden] { display: none; } /* ---- share-card loader ------------------------------------------------ The card is composed on a canvas and encoded before it can be shown, so this stands in rather than leaving the dialog empty. It is a miniature of the card itself -- seal, three ruled lines -- with a gold sheen passing over it, so the wait reads as the card being made. ---- */ .rvh-sd-share-loader { display: grid; justify-items: center; gap: 16px; padding: 14px 0 6px; } .rvh-sd-share-loader-card { position: relative; width: 168px; height: 252px; border-radius: 10px; background: linear-gradient(160deg, var(--paper-center) 0%, var(--paper-mid) 62%, var(--paper-edge) 100%); border: 1px solid rgba(181,149,92,.38); box-shadow: 0 2px 4px rgba(55,39,32,.05), 0 16px 30px -14px rgba(55,39,32,.22); overflow: hidden; } .rvh-sd-share-loader-seal { position: absolute; top: 30px; left: 50%; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #9d2731, var(--brand-color) 58%, #4d0f14); box-shadow: 0 3px 7px rgba(70,15,20,.32); animation: rvh-sd-seal-beat 1.9s ease-in-out infinite; } .rvh-sd-share-loader-line { position: absolute; left: 26px; height: 7px; border-radius: 4px; background: rgba(108,21,28,.14); animation: rvh-sd-line-fade 1.9s ease-in-out infinite; } .rvh-sd-share-loader-line.rvh-l1 { top: 104px; width: 116px; animation-delay: .10s; } .rvh-sd-share-loader-line.rvh-l2 { top: 126px; width: 92px; animation-delay: .25s; } .rvh-sd-share-loader-line.rvh-l3 { top: 148px; width: 104px; animation-delay: .40s; } /* the gold sweep -- this is the part that reads as "being pressed" */ .rvh-sd-share-loader-sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(226,205,166,.62) 50%, transparent 68%); transform: translateX(-100%); animation: rvh-sd-sheen 1.5s ease-in-out infinite; } .rvh-sd-share-loader-text { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-color); opacity: .72; } @keyframes rvh-sd-sheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes rvh-sd-seal-beat{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } } @keyframes rvh-sd-line-fade{ 0%,100% { opacity: .5; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rvh-sd-share-loader-sheen { animation: none; opacity: 0; } .rvh-sd-share-loader-seal, .rvh-sd-share-loader-line { animation: none; } } .rvh-sd-share-preview-img { display: block; width: 100%; max-height: 380px; object-fit: contain; border-radius: 10px; border: 1px solid rgba(181,149,92,.35); background: rgba(255,255,255,.5); margin-bottom: 10px; } .rvh-sd-share-preview-names { font-family: 'Caveat', cursive; font-size: 1.2rem; color: var(--brand-color); margin: 0 0 16px; } .rvh-sd-share-channel-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; } .rvh-sd-share-back { appearance: none; border: none; background: none; cursor: pointer; font-family: 'Playfair Display', serif; font-style: italic; font-size: .82rem; color: rgba(59,51,45,.55); padding: 4px 2px; } .rvh-sd-share-back:hover { color: var(--brand-color); } .rvh-stage-hint { font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(.70rem,.84vw,.82rem); line-height:1.6; color:rgba(59,51,45,.70); max-width:84%; margin:6px auto 0; } .rvh-stage-hint-lead { font-style:normal; font-weight:600; color:rgba(59,51,45,.86); } .rvh-back-foot { margin-top:10px; text-align:center; } .rvh-back-foot .rvh-btn-seal.rvh-ghost { background:transparent; border:0; border-bottom:1px solid rgba(108,21,28,.45); border-radius:0; padding:3px 2px; font-family:'Playfair Display',serif; font-size:.84rem; letter-spacing:0; text-transform:none; box-shadow:none; } .rvh-back-strips { height:610px; align-self:center; justify-self:center; transform:translateY(-2px); } @media (max-width: 1080px) { .rvh-std-face { padding: 40px 22px 48px; } .rvh-std-grid { grid-template-columns: 1fr; gap: 26px; } .rvh-back-inner { grid-template-columns: 1fr; gap: 12px; } .rvh-back-inner .rvh-sealed-col { order: 1; } .rvh-back-inner .rvh-strip-theatre { order: 2; } .rvh-strip-theatre { height: 540px; order: 2; } .rvh-std-letter { order: 1; text-align: center; } .rvh-std-sub, .rvh-step-primary, .rvh-step-secondary { margin-left: auto; margin-right: auto; } .rvh-std-flourish { margin-left: auto; margin-right: auto; } .rvh-step-tag { justify-content: center; } .rvh-btn-seal { display: block; margin-left: auto; margin-right: auto; } .rvh-photo-strip { width: 152px; } .rvh-photo-strip img.rvh-strip-photo { height: 138px; } .rvh-clip-img { width: 70px; top: -38px; } .rvh-photo-strip.rvh-at-front { transform: translate(-52%, -50%) rotate(-3deg); } .rvh-photo-strip.rvh-at-back { transform: translate(18%, -46%) rotate(3.4deg) scale(0.93); } .rvh-back-inner { grid-template-columns:1fr; gap:28px; } .rvh-back-card-column { max-width:570px; } .rvh-back-inner .rvh-back-card-column { order:1; } .rvh-back-inner .rvh-back-strips { order:2; } .rvh-back-strips { height:520px; transform:none; } } @media (max-width: 560px) { .rvh-savedate-section { padding: 56px 12px 90px; } .rvh-strip-theatre { height: 460px; } .rvh-photo-strip { width: 122px; padding: 9px 9px 26px; } .rvh-photo-strip img.rvh-strip-photo { height: 108px; margin-bottom: 8px; } .rvh-strip-caption { font-size: 0.85rem; } .rvh-clip-img { width: 58px; top: -30px; } .rvh-count-card { width: 42%; } .rvh-date-input { font-size: 1.25rem; padding: 13px 4px 11px; } } @media (max-width: 680px) { .rvh-back-card-content { padding:8.75% 8.2% 9.12%; } .rvh-sealed-main-date { font-size:clamp(1.45rem,7vw,2rem); } .rvh-sealed-forever { font-size:clamp(1.15rem,5vw,1.55rem); } .rvh-sealed-date { font-size:clamp(.43rem,2.1vw,.58rem); letter-spacing:clamp(2px,.9vw,4px); } .rvh-countdown { width:82%; gap:8px; } .rvh-count-card { padding:9px 4px 8px; border-radius:10px; } .rvh-count-num { font-size:clamp(1.28rem,6.5vw,1.8rem); } .rvh-count-label { font-size:.36rem; letter-spacing:1.3px; } .rvh-stage-card { margin-top:13px; padding-top:12px; } .rvh-stage-timeframe { font-size:clamp(.78rem,3vw,.92rem); margin:0 auto 3px; } .rvh-stage-message { font-size:clamp(.62rem,2.5vw,.76rem); line-height:1.42; } .rvh-stage-actions { margin-top:auto; gap:10px; width:82%; padding-top:13px; } .rvh-stage-cta { padding:9px 16px; font-size:.47rem; letter-spacing:1.7px; } .rvh-stage-cta-row { gap:7px; } .rvh-stage-cta-row .rvh-stage-cta.rvh-share { min-height:46px; padding:10px 6px; font-size:.52rem; letter-spacing:.07em; } .rvh-stage-hint { font-size:clamp(.62rem,2.5vw,.76rem); line-height:1.5; margin:5px auto 0; } } @media (max-width: 480px) { .rvh-countdown { grid-template-columns:repeat(2,minmax(0,1fr)); width:78%; gap:6px; margin-top:4px; } .rvh-back-card-content { padding:4.25% 7.4% 3.25%; } .rvh-sealed-eyebrow { margin-top:0; font-size:.40rem; letter-spacing:2.2px; } .rvh-sealed-main-date { margin-top:5px; font-size:clamp(1.25rem,6.4vw,1.7rem); } .rvh-sealed-forever { margin-top:6px; font-size:clamp(1rem,4.7vw,1.35rem); } .rvh-sealed-date { margin-top:6px; font-size:.39rem; letter-spacing:1.7px; } .rvh-sealed-rule { margin-top:4px; } .rvh-count-card { padding:7px 3px 6px; } .rvh-count-num { font-size:clamp(1.05rem,5.8vw,1.45rem); } .rvh-count-rule { margin:5px auto 4px; } .rvh-count-label { font-size:.31rem; letter-spacing:1px; } .rvh-stage-card { margin-top:2px; padding-top:3px; } .rvh-stage-chapter { font-size:.72rem; } .rvh-stage-name { font-size:clamp(1.15rem,6.6vw,1.45rem); letter-spacing:.2px; } .rvh-stage-line { margin:3px auto; } .rvh-stage-timeframe { font-size:clamp(.7rem,2.8vw,.82rem); margin:0 auto 2px; } .rvh-stage-message { display:block; font-size:clamp(.52rem,2.25vw,.64rem); line-height:1.3; max-width:96%; } .rvh-stage-actions { margin-top:4px; gap:6px; width:86%; padding-top:0; } .rvh-stage-cta { padding:8px 14px; font-size:.41rem; letter-spacing:1.35px; min-height:32px; } .rvh-stage-cta.rvh-primary { padding:14px 26px; font-size:.68rem; letter-spacing:.16em; } .rvh-stage-cta-row .rvh-stage-cta.rvh-share { min-height:40px; padding:9px 5px; font-size:.46rem; letter-spacing:.05em; } .rvh-stage-hint { display:block; font-size:clamp(.52rem,2.25vw,.64rem); line-height:1.3; max-width:96%; margin:2px auto 0; } .rvh-back-foot { margin-top:6px; } } /* ---------- THE REAL ENVELOPE, HOLDING ONE COHERENT DATE CARD ---------- */ .rvh-env-stage { position: relative; width: 100%; max-width: 560px; margin: -50px 0 0; } .rvh-env-tilt { position: relative; transform: rotate(1.6deg); transform-origin: 50% 60%; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .rvh-env-stage:hover .rvh-env-tilt, .rvh-env-stage:focus-within .rvh-env-tilt { transform: rotate(2.4deg) translateY(-6px); } /* The card is now part of the rendered envelope asset; HTML only overlays editable content. */ .rvh-env-img { position: relative; z-index: 2; display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 1px rgba(74, 58, 52, 0.22)) drop-shadow(0 8px 14px rgba(74, 58, 52, 0.20)) drop-shadow(0 30px 46px rgba(74, 58, 52, 0.26)); } /* the soft shadow the envelope casts on the paper below it */ .rvh-env-tilt::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -3.5%; height: 9%; background: radial-gradient(50% 50% at 50% 50%, rgba(86, 66, 58, 0.34), rgba(86, 66, 58, 0) 72%); filter: blur(7px); z-index: -1; transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .rvh-env-stage:hover .rvh-env-tilt::after { transform: scale(1.04) translateY(4px); opacity: 0.85; } .rvh-env-card-hint { position: absolute; z-index: 4; left: 14.5%; right: 12.5%; top: 19.8%; margin: 0; text-align: left; line-height: 1.32; white-space: nowrap; font-size: clamp(0.64rem, 0.88vw, 0.82rem); color: rgba(90, 46, 44, 0.66); pointer-events: none; } .rvh-env-paper { position: absolute; z-index: 4; left: 15.5%; right: 15.5%; top: 31.2%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1vw, 11px); } .rvh-dtile { flex: 1 1 0; min-width: 0; text-align: center; } .rvh-dtile.rvh-yy { flex: 1.34 1 0; } .rvh-dtile-label { display: block; font-family: 'Cinzel', serif; font-size: clamp(0.4rem, 0.62vw, 0.56rem); letter-spacing: 3px; text-transform: uppercase; color: rgba(150, 106, 74, 0.78); margin-bottom: clamp(4px, 0.7vw, 8px); } .rvh-dtile-inner { position: relative; border-radius: clamp(8px, 1vw, 13px); background: linear-gradient(176deg, #FEFCF7 0%, #F8F2E7 100%); border: 1px solid rgba(181, 149, 92, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -8px 14px -10px rgba(150, 118, 78, 0.35), 0 6px 12px -8px rgba(120, 94, 62, 0.4); transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.5s ease; } .rvh-dtile-input { position: relative; z-index: 2; display: block; width: 100%; box-sizing: border-box; border: none; background: transparent; outline: none; font-family: 'Playfair Display', serif; font-size: clamp(1.35rem, 2.5vw, 2.3rem); line-height: 1.1; letter-spacing: 1px; text-align: center; color: var(--brand-color); padding: clamp(10px, 1.5vw, 18px) 2px clamp(10px, 1.5vw, 18px); cursor: text; } .rvh-dtile-input::placeholder { color: rgba(108, 21, 28, 0.22); } .rvh-dtile-slash { font-family: 'Playfair Display', serif; font-size: clamp(0.9rem, 1.5vw, 1.35rem); color: rgba(181, 149, 92, 0.75); padding-bottom: clamp(12px, 1.7vw, 20px); user-select: none; } .rvh-dtile:focus-within .rvh-dtile-inner { transform: translateY(-2px); border-color: rgba(181, 149, 92, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 2px rgba(181, 149, 92, 0.18), 0 12px 20px -10px rgba(120, 94, 62, 0.45); } .rvh-dtile:has(.rvh-dtile-input.rvh-missing) .rvh-dtile-inner { border-color: rgba(150, 40, 48, 0.7); box-shadow: 0 0 0 2px rgba(150, 40, 48, 0.14), 0 10px 18px -12px rgba(150, 40, 48, 0.4); } /* CTA now belongs to the card itself, replacing the old two-line quote. */ .rvh-env-card-action { position: absolute; z-index: 5; left: 0; right: 0; top: 54.2%; display: flex; justify-content: center; pointer-events: none; } .rvh-env-card-cta { pointer-events: auto; margin: 0; padding: 14px 34px; font-size: .8rem; letter-spacing: .24em; white-space: nowrap; } @media (max-width: 680px) { .rvh-env-card-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } } @media (max-width: 480px) { .rvh-env-card-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } } @media (max-width: 1080px) { .rvh-step-primary { margin-left: auto; margin-right: auto; } .rvh-env-stage { margin-left: auto; margin-right: auto; } } @media (max-width: 560px) { .rvh-env-stage { margin-top: 18px; } .rvh-env-card-hint { left: 14%; right: 12%; top: 19.4%; font-size: 0.62rem; text-align: left; white-space: nowrap; } .rvh-env-paper { left: 14.5%; right: 14.5%; top: 31%; gap: 4px; } .rvh-dtile-label { letter-spacing: 2px; margin-bottom: 3px; } .rvh-dtile-inner { border-radius: 8px; } .rvh-dtile-input { padding: 8px 1px; } .rvh-env-card-action { top: 53.7%; } } /* ---------- DUPLICATE SAVE-THE-DATE LAYOUT : CENTERED HEADING, ELEMENTS BELOW ---------- */ /* hidden on request -- markup/JS left intact, remove this rule to bring it back */ #saveDateSectionDuplicate { display: none; } .rvh-savedate-duplicate { padding-top: 22px; } /* warm ivory glossy card treatment, swapped in for the card's own CSS paper gradient — scoped to this duplicate section only, so the original save-the-date section is untouched. Only the card's surface changes here (background/shadow/border + the two decorative pseudo-elements below); .rvh-std-frame and .rvh-std-corner (the engraved gold inner frame + corner flourishes) are separate elements already in the markup, so they keep showing exactly as before, now against the glossier surface. And since none of this touches .rvh-std-flip-inner, the 3D flip still works exactly as before in both directions. */ .rvh-savedate-duplicate .rvh-std-face { border-radius: 18px; background: radial-gradient(ellipse at 24% 14%, rgba(255,255,255,.54) 0%, rgba(255,255,255,.28) 28%, rgba(255,255,255,.10) 52%, transparent 72%), linear-gradient(120deg, #fdf9f0 0%, #fbf5e8 18%, #f8efdc 38%, #f5e8cd 58%, #f1dfbc 78%, #ecd5a8 100%); box-shadow: 0 24px 56px rgba(88,62,35,.16), 0 8px 18px rgba(88,62,35,.10), inset 0 1px 0 rgba(255,255,255,.99), inset 0 -1px 0 rgba(210,191,163,.22); border: 1px solid rgba(220,205,182,.48); } /* drop the paper-grain noise here — this surface is glossy, not textured */ .rvh-savedate-duplicate .rvh-std-face::before { content: none; } /* the original soft corner-glow, plus this design's satin sheen, layered together */ .rvh-savedate-duplicate .rvh-std-face::after { background: radial-gradient(circle at 8% 92%, rgba(120,96,52,0.10), transparent 42%), radial-gradient(circle at 96% 6%, rgba(120,96,52,0.08), transparent 40%), linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.10) 24%, rgba(255,255,255,.04) 42%, transparent 58%, rgba(255,255,255,.035) 76%, rgba(255,255,255,.10) 100%); mix-blend-mode: screen; opacity: .9; } .rvh-savedate-dup-tile { position: relative; width: 100%; max-width: 1240px; border-radius: 10px; padding: 56px 58px 62px; background: radial-gradient(ellipse at 50% 14%, var(--paper-center) 0%, var(--paper-mid) 54%, var(--paper-edge) 100%); box-shadow: 0 2px 4px rgba(120, 96, 52, 0.10), 0 14px 28px -12px rgba(120, 96, 52, 0.24), 0 48px 90px -38px rgba(112, 78, 62, 0.42), 0 80px 120px -60px rgba(112, 78, 62, 0.30), inset 0 1px 0 rgba(255,255,255,0.9); overflow: hidden; } .rvh-savedate-dup-tile::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sd)'/%3E%3C/svg%3E"); opacity: 0.28; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } .rvh-savedate-dup-tile::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 8% 92%, rgba(120,96,52,0.10), transparent 42%), radial-gradient(circle at 96% 6%, rgba(120,96,52,0.08), transparent 40%); pointer-events: none; z-index: 1; } .rvh-savedate-duplicate .rvh-std-dup-head { position: relative; z-index: 6; text-align: center; max-width: 680px; margin: 0 auto 26px; } .rvh-savedate-duplicate .rvh-std-sub, .rvh-savedate-duplicate .rvh-std-flourish { margin-left: auto; margin-right: auto; } .rvh-savedate-duplicate .rvh-std-dup-grid { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(260px, 0.62fr) minmax(430px, 0.95fr); gap: 40px; align-items: start; justify-content: center; } .rvh-savedate-duplicate .rvh-std-letter { text-align: center; } .rvh-savedate-duplicate .rvh-step-primary { margin-left: auto; margin-right: auto; } .rvh-savedate-duplicate .rvh-env-stage { margin: -10px auto 0; } @media (max-width: 1080px) { .rvh-savedate-duplicate .rvh-std-dup-grid { grid-template-columns: 1fr; gap: 26px; } .rvh-savedate-duplicate .rvh-std-letter { order: 2; } .rvh-savedate-duplicate .rvh-strip-theatre { order: 1; } } @media (max-width: 560px) { .rvh-savedate-dup-tile { padding: 46px 22px 52px; } .rvh-savedate-duplicate .rvh-std-dup-head { margin-bottom: 20px; } } /* ================= RIVAAH WEDDING MOODBOARD ================= */ .rvh-mood-section { position: relative; z-index: 2; width: 100%; padding: 90px 24px 110px; display: flex; flex-direction: column; align-items: center; background: transparent; } .rvh-mood-eyebrow { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .rvh-mood-heading { font-family: 'Cinzel', serif; font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.4rem); line-height: 1.25; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); text-align: center; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,0.7); } .rvh-mood-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.95rem, 1.6vw, 1.12rem); color: var(--text-dark); opacity: 0.72; text-align: center; max-width: 560px; margin: 14px auto 6px; } .rvh-mood-rule { width: 120px; height: 1px; margin: 20px auto 6px; background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent); } /* ---- the open journal, floating with depth ---- */ .rvh-mood-stage { position: relative; width: 100%; max-width: 1340px; aspect-ratio: 1340 / 1010; margin: 52px auto 0; perspective: 1600px; } .rvh-mood-stage::after { /* soft cast shadow on the paper below */ content: ''; position: absolute; left: 22%; right: 22%; bottom: 5%; height: 120px; background: radial-gradient(ellipse at 50% 50%, rgba(60,44,30,0.30) 0%, rgba(60,44,30,0.12) 45%, rgba(60,44,30,0) 75%); filter: blur(10px); z-index: 0; } .rvh-mood-book { position: absolute; z-index: 1; top: 1.5%; left: 50%; width: 51%; margin-left: -25.5%; transform: rotate(-1.2deg); animation: moodFloat 9s ease-in-out infinite; } @keyframes moodFloat { 0%,100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(-0.7deg) translateY(-10px); } } .rvh-mood-book > img.rvh-mood-book-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 34px rgba(58,42,28,0.34)) drop-shadow(0 60px 90px rgba(58,42,28,0.22)) drop-shadow(0 2px 3px rgba(58,42,28,0.18)); } /* ---- items scattered on the pages ---- */ .rvh-mood-items { position: absolute; inset: 0; } .rvh-mood-item { position: absolute; transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease; will-change: transform; } .rvh-mood-item:hover { z-index: 30 !important; } .rvh-mood-photo { background: #fffdf8; padding: 11px 11px 38px; border-radius: 2px; box-shadow: 0 10px 20px rgba(58,42,28,0.26), 0 2px 4px rgba(58,42,28,0.18); } .rvh-mood-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.96) contrast(1.02); } .rvh-mood-photo .rvh-cap { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-family: 'Caveat', cursive; font-size: 1.22rem; color: #6b5a49; } .rvh-mood-photo:hover { transform: var(--t, rotate(0deg)) scale(1.045) translateY(-4px); box-shadow: 0 18px 32px rgba(58,42,28,0.32); } /* washi tape strip */ .rvh-tape { position: absolute; top: -15px; left: 50%; width: 92px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: linear-gradient(180deg, rgba(226,205,166,0.85), rgba(200,175,132,0.75)); box-shadow: 0 2px 4px rgba(58,42,28,0.18); opacity: 0.92; } .rvh-tape::before, .rvh-tape::after { content: ''; position: absolute; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.5) 0 2px, transparent 2px 4px); } .rvh-tape::before { left: 0; } .rvh-tape::after { right: 0; } .rvh-tape.rvh-right { left: 78%; transform: translateX(-50%) rotate(6deg); } .rvh-tape.rvh-left { left: 22%; transform: translateX(-50%) rotate(-8deg); } /* handwritten memo notes */ .rvh-mood-memo { background: linear-gradient(180deg, #fffefb 0%, #f7f1e5 100%); padding: 18px 20px 19px; font-family: 'Caveat', cursive; font-size: clamp(1.05rem, 1.45vw, 1.42rem); line-height: 1.25; color: #4a3c30; box-shadow: 0 8px 16px rgba(58,42,28,0.2), 0 1px 2px rgba(58,42,28,0.16); border-radius: 1px; } .rvh-mood-memo::after { /* torn-ish bottom edge */ content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px; background: radial-gradient(circle at 4px -2px, #f7f1e5 4px, transparent 4px) repeat-x; background-size: 9px 8px; } .rvh-mood-memo .rvh-pin-note { display: block; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.26em; color: var(--gold); margin-bottom: 5px; text-transform: uppercase; } .rvh-mood-memo:hover { transform: var(--t, rotate(0deg)) scale(1.05); } /* pressed serif label */ .rvh-mood-label { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.95rem, 1.25vw, 1.2rem); color: #4a3c30; background: rgba(255,253,248,0.92); padding: 9px 18px; box-shadow: 0 6px 14px rgba(58,42,28,0.16); } /* paper clip + thread flourishes */ .rvh-clip { position: absolute; top: -18px; left: 50%; width: 16px; height: 40px; transform: translateX(-50%) rotate(9deg); border: 2.5px solid #c9b489; border-radius: 10px; border-bottom-color: transparent; box-shadow: 0 2px 3px rgba(58,42,28,0.2); } .rvh-mood-ink { position: absolute; font-family: 'Great Vibes', cursive; color: rgba(108,21,28,0.5); font-size: clamp(1rem, 1.6vw, 1.5rem); pointer-events: none; } .rvh-mood-dot { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff, #e6d7b8 60%, #c7b189); box-shadow: 0 2px 4px rgba(58,42,28,0.25); } /* ---- CTA ---- */ .rvh-mood-cta-wrap { margin-top: 34px; text-align: center; } .rvh-mood-cta { appearance: none; border: none; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fffaf0; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); padding: 17px 40px; border-radius: 999px; box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease; position: relative; } .rvh-mood-cta::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(226,205,166,0.5); border-radius: 999px; pointer-events: none; } .rvh-mood-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); } .rvh-mood-cta-hint { margin-top: 14px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.9rem; color: var(--text-dark); opacity: 0.6; } /* ---- placements (desktop) ---- */ .rvh-mi-1 { width: 21%; top: 2%; left: 3%; --t: rotate(-5deg); transform: rotate(-5deg); z-index: 6; } .rvh-mi-1 img { height: 240px; } .rvh-mi-2 { width: 18%; top: 60%; left: 4%; --t: rotate(4deg); transform: rotate(4deg); z-index: 8; } .rvh-mi-2 img { height: 196px; } .rvh-mi-3 { width: 18%; top: 30%; left: 18.5%; --t: rotate(3.5deg); transform: rotate(3.5deg); z-index: 7; } .rvh-mi-3 img { height: 200px; } .rvh-mi-4 { width: 19%; top: 3%; left: 39.5%; --t: rotate(-3deg); transform: rotate(-3deg); z-index: 15; } .rvh-mi-4 img { height: 212px; } .rvh-mi-5 { width: 16%; top: 62%; left: 33%; --t: rotate(5deg); transform: rotate(5deg); z-index: 16; } .rvh-mi-5 img { height: 176px; } .rvh-mi-6 { width: 21%; top: 40%; left: 74%; --t: rotate(-4.5deg); transform: rotate(-4.5deg); z-index: 8; } .rvh-mi-6 img { height: 230px; } .rvh-mi-7 { width: 17%; top: 4%; left: 79%; --t: rotate(6deg); transform: rotate(6deg); z-index: 6; } .rvh-mi-7 img { height: 182px; } .rvh-mm-1 { width: 17%; top: 38%; left: 0.5%; --t: rotate(-4deg); transform: rotate(-4deg); z-index: 12; } .rvh-mm-2 { width: 16%; top: 87%; left: 21%; --t: rotate(3deg); transform: rotate(3deg); z-index: 12; } .rvh-mm-3 { width: 17%; top: 31%; left: 58.5%; --t: rotate(-2.5deg); transform: rotate(-2.5deg); z-index: 17; } .rvh-mm-4 { width: 16%; top: 66%; left: 52.5%; --t: rotate(5deg); transform: rotate(5deg); z-index: 17; } .rvh-mm-5 { width: 17%; top: 74%; left: 72%; --t: rotate(2deg); transform: rotate(2deg); z-index: 12; } .rvh-ml-1 { top: 2%; left: 60%; --t: rotate(-2deg); transform: rotate(-2deg); z-index: 18; } .rvh-ml-2 { top: 90%; left: 41%; --t: rotate(2.5deg); transform: rotate(2.5deg); z-index: 18; } .rvh-ink-1 { top: 15%; left: 29%; transform: rotate(-8deg); } .rvh-ink-2 { top: 95%; left: 8%; transform: rotate(6deg); } .rvh-dot-1 { width: 10px; height: 10px; top: 18%; left: 35%; } .rvh-dot-2 { width: 8px; height: 8px; top: 70%; left: 19%; } .rvh-dot-3 { width: 9px; height: 9px; top: 48%; left: 69%; } /* ---- film reel strip ---- */ .rvh-mood-reel-wrap { position: relative; width: 100%; max-width: 780px; margin: 44px auto 0; display: flex; justify-content: center; } .rvh-mood-reel { position: relative; display: flex; gap: 10px; padding: 22px 26px; background: #16130f; transform: rotate(-1.4deg); box-shadow: 0 18px 34px rgba(58,42,28,0.34), 0 3px 6px rgba(58,42,28,0.24); } .rvh-mood-reel::before, .rvh-mood-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; background-image: radial-gradient(#f7f2e6 0 4.4px, transparent 5px); background-size: 22px 14px; background-repeat: repeat-x; background-position: 6px center; } .rvh-mood-reel::before { top: 4px; } .rvh-mood-reel::after { bottom: 4px; } .rvh-mood-reel .rvh-frame { width: 152px; height: 112px; overflow: hidden; background: #fffdf8; } .rvh-mood-reel .rvh-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) contrast(1.02); } .rvh-mood-reel-cap { font-family: 'Caveat', cursive; font-size: 1.2rem; color: #6b5a49; text-align: center; margin-top: 18px; } @media (max-width: 900px) { .rvh-mood-section { padding: 64px 14px 84px; } .rvh-mood-item .rvh-cap { font-size: 0.8rem; } .rvh-mood-photo { padding: 5px 5px 20px; } .rvh-mi-1 img, .rvh-mi-3 img, .rvh-mi-4 img, .rvh-mi-6 img { height: 116px; } .rvh-mi-2 img, .rvh-mi-5 img, .rvh-mi-7 img { height: 96px; } .rvh-mood-memo { padding: 9px 10px 10px; font-size: 0.86rem; } .rvh-mood-label { font-size: 0.78rem; padding: 5px 10px; } .rvh-tape { width: 52px; height: 17px; top: -9px; } .rvh-mood-stage::after { bottom: 8%; height: 54px; } .rvh-mood-book { width: 56%; margin-left: -28%; } .rvh-mood-reel { gap: 7px; padding: 17px 18px; } .rvh-mood-reel .rvh-frame { width: 104px; height: 78px; } } @media (max-width: 560px) { .rvh-mood-stage { aspect-ratio: 1 / 1.12; } .rvh-mood-book { width: 62%; margin-left: -31%; } .rvh-mood-memo { font-size: 0.72rem; padding: 7px 8px 8px; } .rvh-mood-memo .rvh-pin-note { display: none; } .rvh-mood-photo { padding: 4px 4px 4px; } .rvh-mood-photo .rvh-cap { display: none; } .rvh-mi-1 img, .rvh-mi-3 img, .rvh-mi-4 img, .rvh-mi-6 img { height: 78px; } .rvh-mi-2 img, .rvh-mi-5 img, .rvh-mi-7 img { height: 64px; } .rvh-mood-reel { gap: 5px; padding: 14px 14px; } .rvh-mood-reel .rvh-frame { width: 74px; height: 56px; } .rvh-mood-reel-cap { font-size: 1rem; } .rvh-mood-cta { padding: 14px 26px; font-size: 0.68rem; letter-spacing: 0.16em; } .rvh-ink-1, .rvh-ink-2 { display: none; } } /* ================= BRIDE CHECKLIST / BASKET ================= */ .rvh-bc-section { position: relative; width: 100%; z-index: 2; padding: 110px 20px 130px; background: transparent; overflow: hidden; } .rvh-bc-section::before, .rvh-bc-section::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(181,149,92,0.16), transparent 70%); pointer-events: none; } .rvh-bc-section::before { top: -90px; left: -110px; } .rvh-bc-section::after { bottom: -120px; right: -100px; } /* Embedded moodboard/checklist sections */ .rvh-embedded-section { position: relative; width: 100%; background: transparent; } .rvh-section-iframe { display: block; width: 100%; border: 0; background: transparent; position: relative; z-index: 1; } /* ================= LOOKBOOK SECTION (final section, image left / copy right) ================= */ .rvh-lookbook-section { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; padding: 120px 24px 130px; } /* Soft depth separator before the lookbook section — anchored to the top of #lookbookSection itself (not the checklist iframe above it), so it always sits at the checklist→lookbook boundary even while the checklist section grows taller when its results panel expands. */ #lookbookSection::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at 50% 0%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%), linear-gradient(to bottom, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%); } .rvh-lookbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .rvh-lookbook-image-wrap { position: relative; } .rvh-lookbook-image-wrap img { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 10px rgba(40,24,14,.16)) drop-shadow(0 26px 24px rgba(40,24,14,.20)) drop-shadow(0 54px 48px rgba(40,24,14,.20)); } .rvh-lookbook-content { text-align: left; } .rvh-lookbook-kicker { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .rvh-lookbook-heading { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.2; margin: 0 0 18px; } .rvh-lookbook-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; line-height: 1.65; color: rgba(59,51,45,.75); max-width: 440px; margin: 0 0 32px; } .rvh-lookbook-cta { display: inline-block; position: relative; overflow: hidden; padding: 14px 34px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); color: #fffaf0; font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; box-shadow: 0 14px 26px rgba(108,21,28,.32), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, letter-spacing .25s ease; } .rvh-lookbook-cta::before { content: ''; position: absolute; inset: 4px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; } .rvh-lookbook-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 34px rgba(108,21,28,.38), inset 0 1px 0 rgba(255,255,255,.28); } @media (max-width: 900px) { .rvh-lookbook-grid { grid-template-columns: 1fr; gap: 40px; } .rvh-lookbook-content { text-align: center; } .rvh-lookbook-sub { margin-left: auto; margin-right: auto; } .rvh-lookbook-image-wrap { max-width: 460px; margin: 0 auto; } } @media (max-width: 680px) { .rvh-lookbook-section { padding: 76px 20px 72px; } #lookbookSection::before { height: 76px; } .rvh-lookbook-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } } @media (max-width: 480px) { .rvh-lookbook-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } } .rvh-bc-head { position: relative; text-align: center; z-index: 2; } .rvh-bc-eyebrow { font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .rvh-bc-heading { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.4vw, 2.7rem); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); line-height: 1.3; } .rvh-bc-script { font-family: 'Great Vibes', cursive; font-size: clamp(1.5rem, 3vw, 2.2rem); color: #8d7748; margin-bottom: 4px; } .rvh-bc-rule { width: 190px; height: 1px; margin: 22px auto 18px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .rvh-bc-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.02rem; color: rgba(59,51,45,0.66); max-width: 620px; margin: 0 auto; line-height: 1.75; } /* ===== instructions ===== */ .rvh-bc-howto { position: relative; z-index: 3; max-width: 940px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; background: rgba(255,253,248,0.72); border: 1px solid rgba(181,149,92,0.38); border-radius: 999px; padding: 16px 26px; box-shadow: 0 14px 34px rgba(84,62,36,0.10), inset 0 0 0 1px rgba(255,255,255,0.6); backdrop-filter: blur(4px); } .rvh-bc-howto-step { display: flex; align-items: flex-start; gap: 11px; padding: 6px 22px; text-align: left; } .rvh-bc-howto-step + .rvh-bc-howto-step { border-left: 1px solid rgba(181,149,92,0.32); } .rvh-bc-howto-num { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--gold); color: var(--brand-color); font-family: 'Cinzel', serif; font-size: 0.66rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); } .rvh-bc-howto-text { font-family: 'Playfair Display', serif; font-size: 0.9rem; color: rgba(59,51,45,0.8); line-height: 1.5; } .rvh-bc-howto-text b { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-color); display: block; margin-bottom: 3px; font-weight: 600; } /* stage — spread across the full viewport */ .rvh-bc-stage { position: relative; width: 100%; max-width: 1560px; margin: 44px auto 0; min-height: 78vh; aspect-ratio: 1560 / 740; z-index: 2; } .rvh-bc-stage::before { /* soft ground so the pieces feel placed, not stuck */ content: ''; position: absolute; left: 50%; bottom: 4%; width: 78%; height: 22%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(84,62,36,0.16) 0%, rgba(84,62,36,0.06) 46%, transparent 74%); filter: blur(20px); pointer-events: none; } .rvh-bc-stage-script { position: absolute; left: 50%; top: 48%; max-width: 340px; white-space: normal; transform: translate(-50%, -50%); text-align: center; font-family: 'Great Vibes', cursive; font-size: clamp(1.7rem, 4vw, 3.3rem); color: rgba(141,119,72,0.34); line-height: 1.3; pointer-events: none; z-index: 1; } .rvh-bc-stage-script small { display: block; font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(141,119,72,0.5); margin-top: 14px; } /* checklist items — big, tilted, scattered */ .rvh-bc-item { position: absolute; display: block; cursor: pointer; background: none; border: 0; padding: 0; z-index: 4; -webkit-tap-highlight-color: transparent; } .rvh-bc-cut { position: relative; width: 100%; transform: rotate(var(--tilt, 0deg)); transition: transform 0.55s cubic-bezier(.2,.8,.2,1); } .rvh-bc-cut img { display: block; width: 100%; filter: drop-shadow(0 18px 26px rgba(76,56,32,0.28)) drop-shadow(0 42px 54px rgba(76,56,32,0.16)); transition: filter 0.45s ease; animation: bcDrift var(--dur, 9s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes bcDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .rvh-bc-item:hover { z-index: 8; } .rvh-bc-item:hover .rvh-bc-cut { transform: rotate(calc(var(--tilt, 0deg) * 0.3)) translateY(-10px) scale(1.05); } .rvh-bc-item:hover .rvh-bc-cut img { filter: drop-shadow(0 28px 36px rgba(76,56,32,0.34)) drop-shadow(0 54px 70px rgba(76,56,32,0.18)); } .rvh-bc-item:focus-visible { outline: none; } .rvh-bc-item:focus-visible .rvh-bc-tag { border-color: var(--brand-color); } .rvh-bc-tag { position: absolute; top: 40%; display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px 12px 15px; border-radius: 999px; background: rgba(255,253,248,0.96); border: 1px solid rgba(181,149,92,0.5); box-shadow: 0 12px 26px rgba(84,62,36,0.14), inset 0 0 0 1px rgba(255,255,255,0.7); backdrop-filter: blur(3px); transition: all 0.4s ease; z-index: 7; transform: rotate(calc(var(--tilt, 0deg) * -0.25)); } .rvh-bc-item.rvh-side-l .rvh-bc-tag { right: 96%; } .rvh-bc-item.rvh-side-r .rvh-bc-tag { left: 96%; } .rvh-bc-hook { position: absolute; top: 50%; width: 54px; color: var(--gold); opacity: 0.8; pointer-events: none; } .rvh-bc-item.rvh-side-l .rvh-bc-hook { right: 88%; margin-right: 4px; } .rvh-bc-item.rvh-side-r .rvh-bc-hook { left: 88%; margin-left: 4px; transform: scaleX(-1); } .rvh-bc-hook svg { width: 100%; height: auto; display: block; } .rvh-bc-tick { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--gold); flex: 0 0 auto; transition: all 0.35s ease; box-shadow: 0 0 0 0 rgba(181,149,92,0.45); animation: bcInvite 2.6s ease-in-out infinite; } @keyframes bcInvite { 0%, 100% { box-shadow: 0 0 0 0 rgba(181,149,92,0.42); } 60% { box-shadow: 0 0 0 9px rgba(181,149,92,0); } } .rvh-bc-tick::after { content: ''; position: absolute; left: 7px; top: 4px; width: 7px; height: 13px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) scale(0); transition: transform 0.4s cubic-bezier(.2,1.6,.4,1); } .rvh-bc-label { font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dark); white-space: nowrap; } .rvh-bc-hint-tap { display: block; margin-top: 4px; font-family: 'Caveat', cursive; text-transform: none; letter-spacing: 0; font-size: 0.94rem; color: rgba(141,119,72,0.85); } .rvh-bc-item.rvh-is-checked .rvh-bc-hint-tap { color: rgba(253,251,246,0.75); } .rvh-bc-item.rvh-is-checked .rvh-bc-tag { background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 55%, #521015 100%); border-color: rgba(226,205,166,0.65); box-shadow: 0 14px 28px rgba(108,21,28,0.30), inset 0 0 0 1px rgba(226,205,166,0.35); } .rvh-bc-item.rvh-is-checked .rvh-bc-tick { background: var(--gold); border-color: var(--gold-light); animation: none; } .rvh-bc-item.rvh-is-checked .rvh-bc-tick::after { transform: rotate(45deg) scale(1); } .rvh-bc-item.rvh-is-checked .rvh-bc-label { color: #FDFBF6; } .rvh-bc-item.rvh-is-checked .rvh-bc-cut img { filter: drop-shadow(0 20px 30px rgba(108,21,28,0.26)) saturate(1.08); } /* the cute tick animation */ .rvh-bc-item.rvh-just-ticked .rvh-bc-cut { animation: bcPop 0.75s cubic-bezier(.2,1.5,.35,1); } @keyframes bcPop { 0% { transform: rotate(var(--tilt,0deg)) scale(1); } 32% { transform: rotate(calc(var(--tilt,0deg) * 0.2)) scale(1.14) translateY(-14px); } 62% { transform: rotate(var(--tilt,0deg)) scale(0.97) translateY(2px); } 100% { transform: rotate(var(--tilt,0deg)) scale(1); } } .rvh-bc-item.rvh-just-ticked .rvh-bc-tag { animation: bcTagPop 0.6s cubic-bezier(.2,1.5,.35,1); } @keyframes bcTagPop { 0%, 100% { transform: rotate(calc(var(--tilt,0deg) * -0.25)) scale(1); } 40% { transform: rotate(calc(var(--tilt,0deg) * -0.25)) scale(1.09); } } .rvh-bc-spark { position: absolute; left: 50%; top: 42%; width: 12px; height: 12px; pointer-events: none; z-index: 9; font-family: 'Playfair Display', serif; font-size: 15px; color: var(--gold); animation: bcSpark 0.95s ease-out forwards; } @keyframes bcSpark { 0% { opacity: 0; transform: translate(0,0) scale(0.3) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1.1) rotate(var(--sr)); } } .rvh-bc-ring { position: absolute; left: 50%; top: 45%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid rgba(181,149,92,0.7); pointer-events: none; z-index: 8; animation: bcRing 0.85s ease-out forwards; } @keyframes bcRing { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } } /* item placements — spread right across the stage */ .rvh-bc-i1 { left: 3%; top: 6%; width: 17%; --tilt: -6deg; --dur: 9s; --delay: 0s; } .rvh-bc-i2 { left: 30%; top: 2%; width: 18%; --tilt: 5deg; --dur: 10.5s; --delay: .7s; } .rvh-bc-i3 { left: 62%; top: 4%; width: 23%; --tilt: -4deg; --dur: 9.6s; --delay: 1.3s; } .rvh-bc-i4 { left: 8%; top: 62%; width: 20%; --tilt: 7deg; --dur: 11s; --delay: .4s; } .rvh-bc-i5 { left: 52%; top: 64%; width: 24%; --tilt: -5deg; --dur: 10s; --delay: 1s; } /* central cta */ .rvh-bc-actions { position: relative; z-index: 3; text-align: center; margin-top: 34px; } .rvh-bc-progress { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; color: rgba(59,51,45,0.6); margin-bottom: 18px; } .rvh-bc-progress b { font-style: normal; color: var(--brand-color); } .rvh-bc-cta { appearance: none; border: none; cursor: pointer; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fffaf0; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); padding: 17px 40px; border-radius: 999px; box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease; position: relative; } .rvh-bc-cta::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(226,205,166,0.5); border-radius: 999px; pointer-events: none; } .rvh-bc-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); } .rvh-bc-cta-hint { font-family: 'Caveat', cursive; font-size: 1.1rem; color: rgba(59,51,45,0.6); margin-top: 14px; } /* results */ .rvh-bc-results { position: relative; z-index: 3; max-width: 1180px; margin: 0 auto; padding-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.9s ease, opacity 0.7s ease, padding-top 0.6s ease; } .rvh-bc-results.rvh-is-open { max-height: 1400px; opacity: 1; padding-top: 70px; } .rvh-bc-res-head { text-align: center; margin-bottom: 34px; } .rvh-bc-res-title { font-family: 'Cinzel', serif; font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: 2.5px; text-transform: uppercase; color: var(--brand-color); } .rvh-bc-res-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.98rem; color: rgba(59,51,45,0.62); margin-top: 10px; } .rvh-bc-stagewrap { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 74px; } .rvh-bc-viewport { position: relative; height: 560px; overflow: hidden; perspective: 1400px; } .rvh-bc-card { position: absolute; left: 50%; top: 18px; width: 430px; max-width: 84%; padding: 46px 40px 40px; border-radius: 4px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, #FFFDF8 0%, #FBF5E9 100%); border: 1px solid rgba(181,149,92,0.42); box-shadow: 0 26px 50px rgba(84,62,36,0.20), inset 0 0 0 6px rgba(255,255,255,0.6); transition: transform 0.75s cubic-bezier(.2,.8,.2,1), opacity 0.6s ease, filter 0.6s ease; will-change: transform; } .rvh-bc-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(181,149,92,0.35); border-radius: 2px; pointer-events: none; } .rvh-bc-card::after { content: ''; position: absolute; left: 50%; top: 0; width: 66px; height: 22px; transform: translate(-50%, -52%) rotate(-2deg); background: linear-gradient(135deg, rgba(226,205,166,0.75), rgba(181,149,92,0.55)); box-shadow: 0 4px 10px rgba(84,62,36,0.16); } .rvh-bc-card.rvh-is-side { filter: blur(3.6px) saturate(0.86); opacity: 0.5; box-shadow: 0 16px 30px rgba(84,62,36,0.12); } .rvh-bc-card.rvh-is-side-2 { filter: blur(6px) saturate(0.76); opacity: 0.26; } .rvh-bc-card.rvh-is-far { opacity: 0; pointer-events: none; } .rvh-bc-card-kicker { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .rvh-bc-card-name { font-family: 'Cinzel', serif; font-size: 1.18rem; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; color: var(--brand-color); line-height: 1.4; } .rvh-bc-card-rule { width: 96px; height: 1px; margin: 18px auto 22px; background: linear-gradient(to right, transparent, var(--gold), transparent); } .rvh-bc-card-mark { font-family: 'Playfair Display', serif; font-size: 2.6rem; line-height: 0.6; color: rgba(181,149,92,0.55); display: block; margin-bottom: 10px; } .rvh-bc-card-quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.06rem; line-height: 1.85; color: rgba(59,51,45,0.86); } .rvh-bc-card-by { display: block; margin-top: 22px; font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-color); } .rvh-bc-card-role { display: block; margin-top: 7px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.82rem; color: rgba(59,51,45,0.55); } .rvh-bc-nav button { position: absolute; top: 46%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,253,248,0.94); border: 1px solid rgba(181,149,92,0.55); color: var(--brand-color); font-size: 1rem; cursor: pointer; box-shadow: 0 10px 20px rgba(84,62,36,0.14); transition: all 0.35s ease; z-index: 5; } .rvh-bc-nav button:hover { background: var(--brand-color); color: #FDFBF6; border-color: var(--brand-color); } #bcPrev { left: 0; } #bcNext { right: 0; } .rvh-bc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; } .rvh-bc-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(181,149,92,0.35); cursor: pointer; transition: all 0.35s ease; } .rvh-bc-dots span.rvh-is-on { background: var(--brand-color); transform: scale(1.35); } .rvh-bc-expert { text-align: center; margin-top: 34px; } .rvh-bc-expert-btn { appearance: none; border: none; cursor: pointer; position: relative; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: #fffaf0; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); padding: 17px 40px; border-radius: 999px; box-shadow: 0 14px 26px rgba(108,21,28,0.32), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease; } .rvh-bc-expert-btn::after { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(226,205,166,0.5); border-radius: 999px; pointer-events: none; } .rvh-bc-expert-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 34px rgba(108,21,28,0.38), inset 0 1px 0 rgba(255,255,255,0.28); } .rvh-bc-expert-note { font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.88rem; color: rgba(59,51,45,0.55); margin-top: 12px; } @media (max-width: 1024px) { .rvh-bc-label { font-size: 0.66rem; letter-spacing: 0.12em; } .rvh-bc-tag { padding: 9px 16px 9px 11px; gap: 9px; } .rvh-bc-hint-tap { font-size: 0.8rem; } .rvh-bc-hook { width: 38px; } .rvh-bc-stagewrap { padding: 0 46px; } .rvh-bc-howto { border-radius: 26px; padding: 14px 10px; } .rvh-bc-howto-step { padding: 8px 16px; } .rvh-bc-howto-text { font-size: 0.82rem; } } @media (max-width: 760px) { .rvh-bc-section { padding: 80px 16px 100px; } .rvh-bc-stage { aspect-ratio: auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 14px; margin-top: 34px; } .rvh-bc-stage::before { display: none; } .rvh-bc-stage-script { display: none; } .rvh-bc-howto { grid-template-columns: 1fr; gap: 2px; border-radius: 24px; } .rvh-bc-label { white-space: normal; font-size: 0.62rem; text-align: left; } .rvh-bc-tag { padding: 8px 14px 8px 10px; } .rvh-bc-howto-step + .rvh-bc-howto-step { border-left: 0; border-top: 1px solid rgba(181,149,92,0.28); } .rvh-bc-item { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .rvh-bc-item.rvh-side-l .rvh-bc-tag, .rvh-bc-item.rvh-side-r .rvh-bc-tag, .rvh-bc-i5 .rvh-bc-tag, .rvh-bc-tag { position: relative; top: auto; left: auto; right: auto; transform: none; } .rvh-bc-hook { display: none; } .rvh-bc-i1, .rvh-bc-i2, .rvh-bc-i3, .rvh-bc-i4, .rvh-bc-i5 { left: auto; top: auto; } .rvh-bc-i5 { grid-column: 1 / -1; width: 58%; margin: 0 auto; } .rvh-bc-viewport { height: 470px; perspective: none; } .rvh-bc-stagewrap { padding: 0 8px; } .rvh-bc-nav button { top: auto; bottom: -6px; width: 40px; height: 40px; } .rvh-bc-card { padding: 34px 24px 30px; } .rvh-bc-card-quote { font-size: 0.98rem; } .rvh-bc-results.rvh-is-open { max-height: 1600px; padding-top: 50px; } } /* --- SECTION 1: RIVAAH SIGNATURE HERO --- */ /* ============================================================ HERO — a single pre-composed image (desktop/mobile variants), replacing the earlier live polaroid-collage build. The whole visual (logo, tagline, photos, Explore button) is baked into the image; only two invisible buttons sit on top, positioned over the image's own "Explore" pill, to keep it a real, clickable, accessible control instead of a dead picture. ============================================================ */ .rvh-rv-hero { position: relative; width: 100%; line-height: 0; } .rvh-rv-hero-img { width: 100%; height: auto; display: block; } .rvh-rv-hero-explore { position: absolute; border: none; background: transparent; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .rvh-rv-hero-explore-desktop { left: 41.9%; top: 59.6%; width: 16.2%; height: 6.2%; display: block; } .rvh-rv-hero-explore-mobile { left: 35.9%; top: 65.3%; width: 28.5%; height: 5.9%; display: none; } @media (max-width: 680px) { .rvh-rv-hero-explore-desktop { display: none; } .rvh-rv-hero-explore-mobile { display: block; } } /* ============================================================ SAVE THE DATE — MOBILE REFINEMENT (approved composition) Layout only; the flip/swap JS (initSaveDate) is untouched - same 1.15s 3D flip, same at-front/at-back strip swap timer, same validation/countdown/share flow. Appears after every earlier .rvh-savedate-section rule so it wins the cascade at these widths without touching desktop/tablet above 680px. ============================================================ */ @media (max-width: 680px) { .rvh-root, body { min-width: 0; } /* background-attachment:fixed is buggy on mobile Safari, so we drop to scroll here - but scroll changes what background-size:cover measures against: instead of the viewport, it now covers the body's full (very tall, multi-section) scrollable height, which blows the paper texture up to many times its intended size. An explicit tile size + repeat keeps the grain scale correct regardless of page height, matching section6-checklist.html's approach for the same bug. */ .rvh-root { background-attachment: scroll; background-size: 900px auto; background-repeat: repeat; } .rvh-main-wrapper { min-height: 100vh; overflow: hidden; } .rvh-savedate-section { width: 100%; max-width: 100%; padding: 42px 10px 72px; } .rvh-std-flip { width: 100%; max-width: 390px; margin-top: 0; perspective: 2400px; perspective-origin: 50% 42%; } .rvh-std-face { padding: 38px 14px 42px; border-radius: 14px; } .rvh-std-frame { inset: 10px; } .rvh-std-frame::after { inset: 6px; } .rvh-std-corner { width: 46px; height: 46px; } .rvh-sc-tl { top: 10px; left: 10px; } .rvh-sc-tr { top: 10px; right: 10px; } .rvh-sc-bl { bottom: 10px; left: 10px; } .rvh-sc-br { bottom: 10px; right: 10px; } .rvh-std-corner::after { font-size: 10px; } .rvh-std-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .rvh-std-letter { order: 1; width: 100%; text-align: center; } .rvh-std-title { font-size: clamp(1.48rem, 7vw, 1.82rem); line-height: 1.18; letter-spacing: 2.2px; } .rvh-std-sub { max-width: 310px; margin: 9px auto 0; font-size: clamp(.84rem, 3.7vw, .98rem); line-height: 1.55; } .rvh-std-flourish { margin: 17px auto 0; } .rvh-step-primary { width: 100%; margin-left: auto; margin-right: auto; } .rvh-env-stage { width: 100%; max-width: 358px; margin: 10px auto 0; } .rvh-env-card-hint { left: 13.7%; right: 11.8%; top: 19.1%; font-size: clamp(.52rem, 2.55vw, .64rem); line-height: 1.28; white-space: nowrap; } .rvh-env-paper { left: 14.2%; right: 14.2%; top: 30.8%; gap: 4px; } .rvh-dtile-label { font-size: .40rem; letter-spacing: 1.5px; margin-bottom: 3px; } .rvh-dtile-inner { border-radius: 7px; } .rvh-dtile-input { font-size: clamp(1rem, 5vw, 1.30rem); padding: 7px 1px; } .rvh-dtile-slash { font-size: .80rem; padding-bottom: 10px; } .rvh-env-card-action { top: 53.5%; } .rvh-env-card-cta { min-width: 0; padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } .rvh-strip-theatre { order: 2; position: relative; width: 100%; height: 112px; margin: 4px auto 0; display: block; overflow: visible; } .rvh-photo-strip { top: 50%; left: 50%; width: min(94%, 344px); padding: 8px 8px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; box-shadow: 3px 10px 22px -10px rgba(110,90,60,.34); } .rvh-photo-strip img.rvh-strip-photo { display: block; width: 100%; height: 78px; object-fit: cover; margin: 0; } .rvh-photo-strip::before, .rvh-photo-strip::after { left: 0; right: 0; top: auto; bottom: auto; width: auto; height: 8px; background-image: radial-gradient(circle at 8px 50%, var(--paper-mid) 4px, transparent 4.5px); background-size: 16px 8px; background-repeat: repeat-x; } .rvh-photo-strip::before { top: -4px; } .rvh-photo-strip::after { bottom: -4px; } .rvh-clip-img { width: 48px; top: -25px; } .rvh-strip-caption { left: 6px; right: 6px; bottom: 3px; font-size: .72rem; line-height: 1; } .rvh-back-inner { padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } .rvh-back-card-column { order: 1; width: 100%; max-width: 350px; justify-self: auto; } .rvh-back-inner .rvh-back-strips, .rvh-back-strips { order: 2; width: 100%; height: 112px; margin: 4px auto 0; transform: none; } .rvh-back-foot { margin-top: 5px; } .rvh-back-foot .rvh-btn-seal.rvh-ghost { font-size: .78rem; } .rvh-back-card-shell, .rvh-back-card-content, .rvh-countdown, .rvh-stage-card, .rvh-stage-actions { min-width: 0; } .rvh-sd-share-overlay { padding: 14px; } .rvh-sd-share-card { padding: 30px 18px 24px; } } @media (max-width: 380px) { .rvh-savedate-section { padding-left: 8px; padding-right: 8px; } .rvh-std-face { padding-left: 12px; padding-right: 12px; } .rvh-env-stage { max-width: 336px; } .rvh-photo-strip { width: 93%; } .rvh-photo-strip img.rvh-strip-photo { height: 72px; } .rvh-strip-theatre, .rvh-back-strips { height: 105px; } } @media (max-width: 680px) { .rvh-savedate-section { padding: 34px 10px 58px; } .rvh-std-flip { max-width: 390px; } .rvh-std-face { padding: 30px 12px 28px; border-radius: 13px; } /* less side padding than the front face: the back card's own width (via .rvh-back-card-column) drives its height through the card image's fixed aspect-ratio, so trimming this margin is what actually grows the card enough for the share button to land inside it, instead of just widening empty gutters. */ .rvh-std-face.rvh-back { padding-top: 24px; padding-bottom: 24px; padding-left: 6px; padding-right: 6px; } .rvh-std-frame { inset: 9px; } .rvh-std-frame::after { inset: 6px; } .rvh-sc-tl { top: 9px; left: 9px; } .rvh-sc-tr { top: 9px; right: 9px; } .rvh-sc-bl { bottom: 9px; left: 9px; } .rvh-sc-br { bottom: 9px; right: 9px; } .rvh-std-grid { gap: 2px; } .rvh-std-title { font-size: clamp(1.46rem, 7vw, 1.78rem); letter-spacing: 2.5px; margin-bottom: 0; } .rvh-std-sub { max-width: 304px; margin-top: 8px; font-size: clamp(.82rem, 3.55vw, .94rem); line-height: 1.52; } .rvh-std-flourish { margin-top: 14px; margin-bottom: 0; } .rvh-env-stage { max-width: 362px; margin-top: 5px; } .rvh-env-card-hint { left: 16%; right: 16%; top: 19.15%; text-align: center; white-space: nowrap; font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(.54rem, 2.35vw, .62rem); color: rgba(83, 52, 48, .62); letter-spacing: .1px; } .rvh-env-paper { left: 15.2%; right: 15.2%; top: 30.7%; gap: 5px; } .rvh-dtile-label { font-size: .39rem; letter-spacing: 1.65px; margin-bottom: 4px; color: rgba(143, 101, 68, .74); } .rvh-dtile-inner { border-radius: 8px; border-color: rgba(181,149,92,.48); background: linear-gradient(178deg, rgba(255,254,250,.98), rgba(248,241,229,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 10px -8px rgba(118,89,60,.46); } .rvh-dtile-input { font-family: 'Playfair Display',serif; font-size: clamp(1.12rem, 5.4vw, 1.38rem); font-weight: 500; padding: 7px 1px 8px; letter-spacing: .4px; } .rvh-dtile-slash { font-size: .78rem; padding-bottom: 10px; opacity: .76; } .rvh-env-card-action { top: 53.25%; } .rvh-env-card-cta { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } /* Two horizontal strips, always visible, trading upper/lower positions with the same at-front/at-back swap the JS already drives on an interval and on click - only the mobile transform differs. Matched to desktop's own transition (1.5s cubic-bezier(.62,.01,.24,1)) for the same roll/alternate feel, and given a top-left transform-origin (matching the clip's position, moved off-center below) so the rotation reads as the strip swinging from that one pinned corner rather than spinning in place. */ .rvh-strip-theatre, .rvh-back-strips { position: relative; width: 100%; height: 164px; margin: 4px auto 0; overflow: visible; } .rvh-photo-strip { top: 50%; left: 50%; width: min(92%, 342px); padding: 8px 8px 18px; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; box-shadow: 3px 11px 24px -10px rgba(104,80,57,.36); transform-origin: 24% 6%; /* smoother + snappier than the desktop curve: that one holds almost still for the first half before rushing the rest of the way, which reads as a stutter at this faster mobile swap cadence - an ease-out with no near-flat start keeps the motion visibly continuous throughout. */ transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1s ease, filter 1s ease; } .rvh-photo-strip img.rvh-strip-photo { height: 74px; margin: 0; border-radius: 1px; } .rvh-photo-strip.rvh-at-front { transform: translate(-53%, -72%) rotate(-1.45deg); z-index: 3; filter: saturate(1.02); } .rvh-photo-strip.rvh-at-back { transform: translate(-47%, -24%) rotate(1.35deg) scale(.965); z-index: 2; filter: saturate(.94) brightness(.985); box-shadow: 2px 8px 18px -12px rgba(104,80,57,.32); } .rvh-clip-img { width: 46px; top: -24px; left: 24%; } .rvh-strip-caption { bottom: 3px; font-size: .70rem; } .rvh-back-inner { padding: 0; gap: 0; align-items: center; } .rvh-back-card-column { width: 98%; max-width: 366px; } .rvh-back-card-shell { filter: drop-shadow(0 3px 4px rgba(85,60,40,.08)) drop-shadow(0 16px 24px rgba(85,60,40,.14)) drop-shadow(0 30px 40px rgba(85,60,40,.09)); } .rvh-back-card-content { padding: 6.5% 7.6% 6.5%; } .rvh-sealed-eyebrow { margin-top: 8px; font-size: .40rem; letter-spacing: 2.35px; } .rvh-sealed-main-date { margin-top: 7px; font-size: clamp(1.42rem, 6.9vw, 1.76rem); line-height: 1; letter-spacing: .1px; } .rvh-sealed-forever { margin-top: 7px; font-size: clamp(1.08rem, 5vw, 1.38rem); line-height: 1.02; } .rvh-sealed-rule { width: 30%; margin-top: 8px; } .rvh-countdown { width: 90%; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; margin-top: 10px; } .rvh-count-card { width: auto; padding: 7px 2px 6px; border-radius: 9px; background: linear-gradient(168deg, #FBE8EC 0%, #F7DEE4 100%); box-shadow: 0 2px 4px rgba(150,104,116,.07), 0 8px 14px -12px rgba(150,104,116,.28), inset 0 1px 0 rgba(255,255,255,.88); } .rvh-count-card::before { inset: 3px; border-radius: 7px; } .rvh-count-card::after { inset: 5px; border-radius: 5px; opacity: .82; } .rvh-count-num { font-size: clamp(1.08rem, 5.1vw, 1.34rem); } .rvh-count-rule { width: 13px; margin: 5px auto 4px; } .rvh-count-label { font-size: clamp(.27rem, 1.22vw, .33rem); letter-spacing: .75px; } .rvh-stage-card { margin-top: 10px; padding: 10px 2px 4px; } .rvh-stage-card::before { width: 30%; } .rvh-stage-chapter { font-size: .72rem; line-height: 1; margin-bottom: 3px; } .rvh-stage-name { font-size: clamp(1.22rem, 5.9vw, 1.52rem); line-height: 1.05; max-width: 98%; margin-top: 1px; } .rvh-stage-line { margin: 5px auto 6px; width: 28%; } .rvh-stage-timeframe { font-size: clamp(.74rem, 3.15vw, .86rem); margin-bottom: 3px; } .rvh-stage-message, .rvh-stage-hint { display: block; max-width: 94%; font-size: clamp(.59rem, 2.55vw, .69rem); line-height: 1.4; } .rvh-stage-message { margin-bottom: 2px; } .rvh-stage-hint { margin-top: 16px; } .rvh-stage-actions { width: 90%; gap: 8px; margin-top: 20px; padding-top: 0; } .rvh-stage-cta { min-height: 31px; padding: 7px 10px; font-size: .40rem; letter-spacing: 1.25px; } .rvh-stage-cta.rvh-primary { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } .rvh-stage-cta-row .rvh-stage-cta.rvh-share { min-height: 42px; padding: 9px 6px; font-size: .48rem; letter-spacing: .05em; } .rvh-back-foot { margin-top: 2px; transform: translateY(-18px); position: relative; z-index: 6; } .rvh-back-foot .rvh-btn-seal.rvh-ghost { font-size: .80rem; padding: 3px 2px; } .rvh-back-inner .rvh-back-strips, .rvh-back-strips { margin-top: 12px; height: 164px; } } @media (max-width: 360px) { .rvh-std-face { padding-left: 10px; padding-right: 10px; } .rvh-env-stage { max-width: 338px; } .rvh-photo-strip { width: 91%; } .rvh-photo-strip img.rvh-strip-photo { height: 68px; } .rvh-strip-theatre, .rvh-back-strips { height: 152px; } .rvh-back-card-column { width: 100%; } .rvh-countdown { width: 92%; gap: 4px; } .rvh-count-label { letter-spacing: .45px; font-size: .26rem; } .rvh-stage-name { font-size: 1.18rem; } .rvh-stage-message, .rvh-stage-hint { font-size: .56rem; } } /* ========================================================================== SECTION 8 : JOIN THE RIVAAH COMMUNITY ("The Sealed Reply") Built on the Save The Date architecture: one big paper tile that flips, with a second card sitting on it. Front = the reply card the bride writes on. Back = the certificate of membership, sealed. ========================================================================== */ .rvh-rc-section { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 96px 24px 150px; z-index: 10; /* the flip resizes .rvh-rc-flip-inner's height via JS right before the transform runs; without this, the browser's scroll-anchoring can mistake that shift for a reason to re-anchor scroll position onto a neighbouring section, producing a visible jump mid-flip. */ overflow-anchor: none; } /* The separator that used to sit here, at the lookbook -> certificate boundary, is removed by request. */ /* ---------- THE PAPER TILE (identical language to the Save The Date tile) ---------- */ .rvh-rc-flip { position: relative; width: 100%; max-width: 1240px; perspective: 2400px; perspective-origin: 50% 42%; } .rvh-rc-flip-inner { position: relative; width: 100%; transform-style: preserve-3d; will-change: transform; transform: rotateY(0deg) translateZ(0); transition: transform 1.15s cubic-bezier(0.45, 0.05, 0.15, 1); } .rvh-rc-section.rvh-is-sealed .rvh-rc-flip-inner { transform: rotateY(180deg); } .rvh-rc-flip::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: -34px; height: 46px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(112, 78, 62, 0.20) 0%, rgba(112, 78, 62, 0.07) 48%, transparent 74%); filter: blur(10px); pointer-events: none; z-index: -1; } .rvh-rc-face { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; will-change: transform; transform: translateZ(0); border-radius: 10px; padding: 56px 58px 62px; background: radial-gradient(ellipse at 50% 14%, var(--paper-center) 0%, var(--paper-mid) 54%, var(--paper-edge) 100%); box-shadow: 0 2px 4px rgba(120, 96, 52, 0.10), 0 14px 28px -12px rgba(120, 96, 52, 0.24), 0 48px 90px -38px rgba(112, 78, 62, 0.42), 0 80px 120px -60px rgba(112, 78, 62, 0.30), inset 0 1px 0 rgba(255,255,255,0.9); overflow: hidden; transition: box-shadow .9s ease; } .rvh-rc-face.rvh-front { display: flex; align-items: center; } .rvh-rc-face.rvh-front > .rvh-rc-grid { width: 100%; } .rvh-rc-face.rvh-back { transform: rotateY(180deg); pointer-events: none; } .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-back { pointer-events: auto; } .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-front { pointer-events: none; } .rvh-rc-face::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='rc'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23rc)'/%3E%3C/svg%3E"); opacity: .28; mix-blend-mode: multiply; pointer-events: none; z-index: 1; } .rvh-rc-face::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 8% 92%, rgba(120,96,52,.10), transparent 42%), radial-gradient(circle at 96% 6%, rgba(120,96,52,.08), transparent 40%); pointer-events: none; z-index: 1; } .rvh-rc-frame { position: absolute; inset: 18px; border: 1px solid rgba(181,149,92,.5); border-radius: 3px; pointer-events: none; z-index: 3; } .rvh-rc-frame::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(181,149,92,.2); border-radius: 2px; } .rvh-rc-corner { position: absolute; width: 70px; height: 70px; border: 0 solid rgba(181,149,92,.85); pointer-events: none; z-index: 4; } .rvh-rc-corner::after { content: '\2748'; position: absolute; color: rgba(181,149,92,.9); font-size: 14px; line-height: 1; } .rvh-rc-corner.rvh-tl { top: 18px; left: 18px; border-top-width: 2px; border-left-width: 2px; } .rvh-rc-corner.rvh-tl::after { top: 6px; left: 8px; } .rvh-rc-corner.rvh-tr { top: 18px; right: 18px; border-top-width: 2px; border-right-width: 2px; } .rvh-rc-corner.rvh-tr::after { top: 6px; right: 8px; } .rvh-rc-corner.rvh-bl { bottom: 18px; left: 18px; border-bottom-width: 2px; border-left-width: 2px; } .rvh-rc-corner.rvh-bl::after { bottom: 6px; left: 8px; } .rvh-rc-corner.rvh-br { bottom: 18px; right: 18px; border-bottom-width: 2px; border-right-width: 2px; } .rvh-rc-corner.rvh-br::after { bottom: 6px; right: 8px; } .rvh-rc-motif { position: absolute; inset: 0; opacity: .16; z-index: 1; pointer-events: none; background-image: radial-gradient(circle at 12% 22%, rgba(181,149,92,.35) 0 2px, transparent 3px), radial-gradient(circle at 26% 68%, rgba(181,149,92,.3) 0 2px, transparent 3px), radial-gradient(circle at 8% 82%, rgba(181,149,92,.25) 0 2px, transparent 3px); background-size: 260px 260px; } .rvh-rc-grid { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(260px, .88fr) minmax(400px, 1.04fr); gap: 44px 48px; /* the polaroid and the form sit beside each other on the second row, centred against each other; .rvh-rc-copy spans both columns above them. */ align-items: center; } .rvh-rc-copy { grid-column: 1 / -1; } /* ---------- LEFT : the invitation ---------- */ .rvh-rc-kicker { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: #8d7748; margin-bottom: 14px; } .rvh-rc-heading { font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.2; margin: 0; } .rvh-rc-copy .rvh-rc-rule { margin: 18px 0 22px; } .rvh-rc-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.02rem; line-height: 1.68; color: rgba(59,51,45,.82); max-width: 34ch; margin: 0; } /* ---------- LEFT : a polaroid lifted off the invitation ---------- */ .rvh-rc-polaroid { position: relative; width: min(268px, 100%); /* the rotation pushes the visual bounding box ~16px left of the untransformed one, so nudge it back onto the heading's edge */ margin: 0 0 0 16px; justify-self: start; padding: 13px 13px 52px; background: linear-gradient(180deg, #fffdf8 0%, #fdf6ea 100%); border: 1px solid rgba(181,149,92,.28); border-radius: 3px; transform: rotate(-3.2deg); transform-origin: 60% 100%; /* stacked, tightening shadows so it reads as sitting ON the paper rather than printed into it. No ::after ground shadow: the rotation makes this a stacking context, where a negative z-index child would paint over the polaroid's own background. */ box-shadow: 0 1px 2px rgba(120,96,52,.16), 0 8px 14px -6px rgba(112,78,62,.30), 0 26px 40px -20px rgba(112,78,62,.44); transition: transform 1s cubic-bezier(.22,1,.36,1), box-shadow 1s ease; } .rvh-rc-polaroid:hover { transform: rotate(-1.2deg) translateY(-7px); box-shadow: 0 2px 3px rgba(120,96,52,.18), 0 14px 22px -8px rgba(112,78,62,.34), 0 40px 60px -24px rgba(112,78,62,.48); } .rvh-rc-polaroid-photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-edge); } .rvh-rc-polaroid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rvh-rc-polaroid-caption { position: absolute; left: 13px; right: 13px; bottom: 14px; font-family: 'Caveat', cursive; font-size: 1.14rem; line-height: 1.2; color: rgba(59,51,45,.7); text-align: center; } /* the small note taped to the corner */ .rvh-rc-polaroid-note { position: absolute; right: -44px; bottom: 84px; width: 104px; padding: 15px 9px 12px; background: linear-gradient(180deg, #fdf3da 0%, #f6e6c2 100%); border: 1px solid rgba(181,149,92,.34); border-radius: 2px; transform: rotate(7.5deg); box-shadow: 0 5px 12px -5px rgba(112,78,62,.5); font-family: 'Caveat', cursive; font-size: 1.02rem; line-height: 1.22; color: #8a5a2b; text-align: center; } .rvh-rc-polaroid-note::before { content: ''; position: absolute; top: -8px; left: 50%; width: 46px; height: 16px; transform: translateX(-50%) rotate(-5deg); background: linear-gradient(180deg, rgba(236,219,186,.82), rgba(214,190,148,.66)); border-left: 1px solid rgba(255,255,255,.55); border-right: 1px solid rgba(255,255,255,.55); } /* ---------- RIGHT : the reply card, sitting on the paper ---------- */ .rvh-rc-stage { position: relative; width: 100%; max-width: 470px; margin: 0 auto; } .rvh-rc-tilt { position: relative; transform-origin: 50% 60%; transition: transform 1.1s cubic-bezier(.22,1,.36,1); } .rvh-rc-stage:hover .rvh-rc-tilt, .rvh-rc-stage:focus-within .rvh-rc-tilt { transform: translateY(-6px); } .rvh-rc-tilt::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -3.5%; height: 9%; background: radial-gradient(50% 50% at 50% 50%, rgba(86,66,58,.34), rgba(86,66,58,0) 72%); filter: blur(7px); z-index: -1; transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.22,1,.36,1); } .rvh-rc-stage:hover .rvh-rc-tilt::after { transform: scale(1.04) translateY(4px); opacity: .85; } .rvh-rc-reply { position: relative; z-index: 2; border-radius: 12px; padding: 34px 34px 32px; background: linear-gradient(176deg, #FEFCF7 0%, #F8F2E7 100%); border: 1px solid rgba(181,149,92,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -10px 18px -12px rgba(150,118,78,.35), 0 1px 1px rgba(74,58,52,.22), 0 8px 14px rgba(74,58,52,.20), 0 30px 50px rgba(74,58,52,.28), 0 60px 90px rgba(74,58,52,.20); } .rvh-rc-reply::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(181,149,92,.32); border-radius: 7px; pointer-events: none; } .rvh-rc-reply-inner { position: relative; z-index: 2; } .rvh-rc-rsvp { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: #8d7748; text-align: center; } .rvh-rc-flourish { width: min(34%, 110px); height: 1px; margin: 12px auto 26px; background: linear-gradient(to right, transparent, var(--gold), transparent); position: relative; } .rvh-rc-flourish::after { content: '\2756'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 11px; } /* ---- fields: their own text-input pattern (.rvh-sd-share-field) on the richer .rvh-dtile-inner surface, so this card reads as the same stationery as the Save The Date envelope ---- */ .rvh-rc-field { margin-bottom: 18px; } .rvh-rc-label { display: block; font-family: 'Cinzel', serif; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(59,51,45,.6); margin-bottom: 6px; } .rvh-rc-tile { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 8px; background: rgba(255,255,255,.8); border: 1px solid rgba(181,149,92,.45); transition: border-color .5s ease; } .rvh-rc-tile:focus-within { border-color: rgba(108,21,28,.55); } .rvh-rc-code { font-family: 'Playfair Display', serif; font-size: .88rem; color: var(--text-dark); flex: none; padding-bottom: 1px; } .rvh-rc-input { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; border: none; background: transparent; outline: none; font-family: 'Playfair Display', serif; font-size: .88rem; line-height: 1.3; color: var(--text-dark); padding: 11px 2px; cursor: text; } .rvh-rc-input::placeholder { color: rgba(59,51,45,.4); } .rvh-rc-tile:focus-within { outline: none; } .rvh-rc-input:focus-visible { outline: none; } .rvh-rc-field:focus-within .rvh-rc-label { color: rgba(59,51,45,.85); } .rvh-rc-field.rvh-has-error .rvh-rc-tile { border-color: rgba(178,40,40,.75); } .rvh-rc-field.rvh-has-error .rvh-rc-label { color: rgba(150, 40, 48, .95); } .rvh-rc-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 2px 0 4px; padding: 6px 0; min-height: 44px; } .rvh-rc-consent input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rvh-rc-tickbox { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1px solid rgba(181,149,92,.7); border-radius: 3px; display: grid; place-items: center; background: rgba(255,255,255,.6); transition: border-color .3s ease, background .3s ease; } .rvh-rc-tickbox svg { width: 16px; height: 16px; display: block; overflow: visible; } .rvh-rc-tickbox path { fill: none; stroke: var(--brand-color); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .38s cubic-bezier(.2,.8,.2,1); } .rvh-rc-consent input:checked ~ .rvh-rc-tickbox path { stroke-dashoffset: 0; } .rvh-rc-consent input:checked ~ .rvh-rc-tickbox { border-color: var(--gold); background: rgba(255,255,255,.92); } .rvh-rc-consent input:focus-visible ~ .rvh-rc-tickbox { outline: 2px solid rgba(181,149,92,.95); outline-offset: 3px; } .rvh-rc-consent-text { font-family: 'Caveat', cursive; font-size: 1.15rem; line-height: 1.3; color: rgba(59,51,45,.82); padding-top: 2px; } .rvh-rc-consent.rvh-has-error .rvh-rc-tickbox { border-color: rgba(150,40,48,.9); } .rvh-rc-actions { margin-top: 14px; text-align: center; } .rvh-rc-actions .rvh-btn-seal { margin-top: 8px; } /* .rvh-btn-seal's own font-size/letter-spacing/padding never respond to viewport width, unlike every other primary CTA on the page (each of which has its own override class, e.rvh-g. .rvh-env-card-cta) - #rcSubmit had no such class, so it stayed at desktop sizing at every width. */ #rcSubmit { padding: 14px 34px; font-size: .8rem; letter-spacing: .24em; } @media (max-width: 680px) { #rcSubmit { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } } .rvh-rc-status { text-align: center; font-family: 'Playfair Display', serif; font-style: italic; font-size: .84rem; min-height: 1.3em; margin-top: 10px; color: rgba(59,51,45,.7); } .rvh-rc-status.rvh-is-error { color: #96282f; } /* ---------- BACK : the certificate, also a card on the paper ---------- */ .rvh-rc-face.rvh-back { display: flex; align-items: center; justify-content: center; } .rvh-rc-cert-stage { position: relative; z-index: 6; width: 100%; max-width: 520px; margin: 34px auto 0; } .rvh-rc-cert { position: relative; border-radius: 12px; padding: 92px 42px 40px; text-align: center; background: linear-gradient(176deg, #FEFCF7 0%, #F8F2E7 100%); border: 1px solid rgba(181,149,92,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -10px 18px -12px rgba(150,118,78,.35), 0 1px 1px rgba(74,58,52,.22), 0 8px 14px rgba(74,58,52,.18), 0 30px 46px rgba(74,58,52,.24); } .rvh-rc-cert::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(181,149,92,.32); border-radius: 7px; pointer-events: none; opacity: 0; } .rvh-rc-section.rvh-is-sealed .rvh-rc-cert::after { animation: rcFrameIn .9s ease-in-out .3s forwards; } @keyframes rcFrameIn { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } } .rvh-rc-seal-wrap { position: absolute; top: -74px; left: 50%; width: 156px; height: 156px; transform: translateX(-50%); z-index: 9; pointer-events: none; } .rvh-rc-seal { position: relative; width: 100%; height: 100%; opacity: 0; transform: scale(2.6); filter: drop-shadow(0 4px 8px rgba(74,13,17,.34)) blur(6px); } /* The artwork is inlined as a data URI rather than referenced from assets/seal/, because Chrome blocks mask-image across file:// origins and this page is opened straight off disk -- the same reason the save-the-date share art is inlined. One source of truth, used by both the visible seal and the sheen mask: swap --rc-seal-src to swap the seal (a plain url("../seal/....png") works once served over http). */ .rvh-rc-seal-art { position: absolute; inset: 0; background-image: var(--rc-seal-src); background-size: contain; background-repeat: no-repeat; background-position: center; transform-origin: 50% 50%; } .rvh-rc-seal-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,250,232,.72) 48%, rgba(255,255,255,.9) 51%, rgba(255,250,232,.6) 55%, transparent 66%); background-size: 280% 280%; background-position: 120% 50%; -webkit-mask-image: var(--rc-seal-src); mask-image: var(--rc-seal-src); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; mix-blend-mode: screen; opacity: 0; } .rvh-rc-seal-ring { position: absolute; inset: 6%; border-radius: 50%; border: 2px solid rgba(181,149,92,.55); opacity: 0; pointer-events: none; } .rvh-rc-section.rvh-is-sealed .rvh-rc-seal { animation: rcPress .42s cubic-bezier(.16,1,.3,1) 1.32s forwards, rcSquish .14s ease-out 1.74s, rcBreathe 8s ease-in-out 2.4s infinite; } .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-ring { animation: rcRing .6s ease-out 1.74s forwards; } .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-sheen { animation: rcSheen 4.5s ease-in-out 2.6s infinite; } @keyframes rcPress { from { opacity: 0; transform: scale(2.6); filter: drop-shadow(0 4px 8px rgba(74,13,17,.20)) blur(6px); } to { opacity: 1; transform: scale(1); filter: drop-shadow(0 18px 30px rgba(74,13,17,.38)) blur(0); } } @keyframes rcSquish { 0% { transform: scale(1); } 45% { transform: scaleX(1.06) scaleY(.94); } 100% { transform: scale(1); } } @keyframes rcBreathe { 0%,100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } } @keyframes rcRing { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.45); } } @keyframes rcSheen { 0% { background-position: 120% 50%; opacity: 0; } 8% { opacity: .95; } 26% { background-position: -40% 50%; opacity: 0; } 100%{ background-position: -40% 50%; opacity: 0; } } .rvh-rc-spark { position: absolute; font-size: 13px; color: rgba(242,226,188,.95); text-shadow: 0 0 6px rgba(226,205,166,.9); opacity: 0; pointer-events: none; z-index: 10; } .rvh-rc-section.rvh-is-sealed .rvh-rc-spark { animation: rcSpark 2.8s ease-in-out infinite; } .rvh-rc-spark.rvh-s1 { top: -46px; left: 26%; animation-delay: 2.8s !important; } .rvh-rc-spark.rvh-s2 { top: -22px; right: 24%; animation-delay: 3.5s !important; } .rvh-rc-spark.rvh-s3 { top: 46px; left: 12%; animation-delay: 4.2s !important; } .rvh-rc-spark.rvh-s4 { top: 62px; right: 14%; animation-delay: 4.9s !important; } @keyframes rcSpark { 0%,72%,100% { opacity: 0; transform: scale(.6); } 82% { opacity: 1; transform: scale(1.15); } } .rvh-rc-sealed-eyebrow { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: #8d7748; line-height: 1.6; } .rvh-rc-script { font-family: 'Great Vibes', cursive; font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.1; color: var(--brand-color); margin: 16px 0 6px; } .rvh-rc-name { font-family: 'Cinzel', serif; font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.6rem); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-color); margin: 0; word-break: break-word; } .rvh-rc-rule { width: min(40%, 150px); height: 1px; margin: 20px auto; background: linear-gradient(to right, transparent, var(--gold), transparent); position: relative; } .rvh-rc-rule::after { content: '\2756'; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 11px; } .rvh-rc-body { font-family: 'Playfair Display', serif; font-style: italic; font-size: .93rem; line-height: 1.72; color: rgba(59,51,45,.85); max-width: 38ch; margin: 0 auto 22px; } .rvh-rc-since { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: #8d7748; margin-bottom: 26px; } .rvh-rc-foot { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; } .rvh-rc-details-foot { display: flex; justify-content: center; margin-top: 22px; } .rvh-rc-secondary { position: relative; overflow: hidden; font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: #fffaf0; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); border: none; border-radius: 999px; padding: 14px 34px; cursor: pointer; box-shadow: 0 14px 26px rgba(108,21,28,.32), inset 0 1px 0 rgba(255,255,255,.22); transition: box-shadow .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); } .rvh-rc-secondary::before { content: ''; position: absolute; inset: 4px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; } .rvh-rc-secondary:hover { box-shadow: 0 20px 34px rgba(108,21,28,.38), inset 0 1px 0 rgba(255,255,255,.28); transform: translateY(-2px); } .rvh-rc-secondary:focus-visible { outline: 2px solid rgba(181,149,92,.95); outline-offset: 3px; } .rvh-rc-secondary.rvh-ghost { color: var(--brand-color); background: transparent; border: 1px solid rgba(108,21,28,.5); box-shadow: none; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .rvh-rc-secondary.rvh-ghost::before { border-color: rgba(181,149,92,.4); } .rvh-rc-secondary.rvh-ghost:hover { background: rgba(108,21,28,.06); box-shadow: none; transform: translateY(-2px); } .rvh-rc-textlink { font-family: 'Playfair Display', serif; font-size: .84rem; color: var(--brand-color); background: transparent; border: 0; padding: 10px 6px; cursor: pointer; } .rvh-rc-textlink span { border-bottom: 1px solid rgba(108,21,28,.45); padding-bottom: 2px; } .rvh-rc-textlink:hover span { border-bottom-color: var(--brand-color); } .rvh-rc-textlink:focus-visible { outline: 2px solid rgba(181,149,92,.95); outline-offset: 3px; } /* ---------- petals ---------- */ .rvh-rc-petal { position: absolute; width: 26px; height: 26px; background-repeat: no-repeat; background-size: contain; background-position: center; filter: drop-shadow(1px 4px 6px rgba(90,60,55,.22)); opacity: 0; z-index: 1; pointer-events: none; } .rvh-rc-petal.rvh-f1 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png"); left: 7%; bottom: 60px; } .rvh-rc-petal.rvh-f2 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-b.png"); left: 20%; bottom: 34px; width: 20px; height: 20px; } .rvh-rc-petal.rvh-f3 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-c.png"); right: 11%; bottom: 66px; width: 30px; height: 30px; } .rvh-rc-petal.rvh-f4 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-d.png"); right: 25%; bottom: 30px; } .rvh-rc-petal.rvh-f5 { background-image: url("https://staticimg.tanishq.co.in/microsite/rivaahhp-26/assets/petals/petal-a.png"); left: 46%; bottom: 22px; width: 18px; height: 18px; } .rvh-rc-section.rvh-is-settled .rvh-rc-petal { animation: rcSettle 1.5s cubic-bezier(.22,1,.32,1) forwards; } .rvh-rc-petal.rvh-f2 { animation-delay: .18s; } .rvh-rc-petal.rvh-f3 { animation-delay: .34s; } .rvh-rc-petal.rvh-f4 { animation-delay: .52s; } .rvh-rc-petal.rvh-f5 { animation-delay: .7s; } @keyframes rcSettle { from { opacity: 0; transform: translateY(-90px) rotate(-25deg); } 60% { opacity: .9; } to { opacity: .82; transform: translateY(0) rotate(6deg); } } .rvh-rc-rise { position: absolute; width: 22px; height: 22px; background-repeat: no-repeat; background-size: contain; opacity: 0; z-index: 8; pointer-events: none; filter: drop-shadow(1px 3px 5px rgba(90,60,55,.2)); } .rvh-rc-section.rvh-is-sealed .rvh-rc-rise { animation: rcRise 2.4s ease-out forwards; } @keyframes rcRise { from { opacity: 0; transform: translateY(40px) rotate(0deg); } 18% { opacity: .85; } to { opacity: 0; transform: translateY(-300px) rotate(180deg); } } /* ---------- the shared .rvh-reveal stagger, pushed past the flip ---------- Scoped to the whole back face (not just .rvh-rc-cert) so the CTAs/details link living on the section board below the cert card get the same staggered rise as the certificate's own lines. */ .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-back .rvh-reveal { animation: sealedRise 1.05s cubic-bezier(.22,1,.32,1) forwards; animation-delay: calc(1.62s + var(--i,0) * .09s); } /* ---------- responsive ---------- */ @media (max-width: 1000px) { .rvh-rc-grid { grid-template-columns: 1fr; gap: 40px; } .rvh-rc-copy { text-align: center; } .rvh-rc-sub { margin-left: auto; margin-right: auto; } .rvh-rc-copy .rvh-rc-rule { margin-left: auto; margin-right: auto; } .rvh-rc-polaroid { margin-left: auto; margin-right: auto; } .rvh-rc-face { padding: 46px 34px 52px; } } @media (max-width: 680px) { .rvh-rc-section { padding: 58px 12px 92px; } .rvh-rc-face { padding: 38px 16px 44px; border-radius: 14px; } /* .rvh-rc-face clips its overflow, so the polaroid and the note's overhang have to come in on narrow phones. */ .rvh-rc-polaroid { width: min(236px, 100%); } .rvh-rc-polaroid-note { right: -24px; bottom: 78px; width: 92px; font-size: .95rem; } .rvh-rc-frame { inset: 10px; } .rvh-rc-frame::after { inset: 6px; } .rvh-rc-corner { width: 46px; height: 46px; } .rvh-rc-corner.rvh-tl, .rvh-rc-corner.rvh-tr { top: 10px; } .rvh-rc-corner.rvh-bl, .rvh-rc-corner.rvh-br { bottom: 10px; } .rvh-rc-corner.rvh-tl, .rvh-rc-corner.rvh-bl { left: 10px; } .rvh-rc-corner.rvh-tr, .rvh-rc-corner.rvh-br { right: 10px; } .rvh-rc-reply { padding: 26px 20px 24px; } .rvh-rc-cert { padding: 78px 20px 32px; } .rvh-rc-cert-stage { margin-top: 26px; } .rvh-rc-seal-wrap { width: 124px; height: 124px; top: -58px; } .rvh-rc-line { flex-wrap: wrap; gap: 5px 9px; } .rvh-rc-secondary { padding: 14px 26px; font-size: .68rem; letter-spacing: .16em; } } @media (max-width: 420px) { .rvh-rc-foot { flex-direction: column; width: 100%; } .rvh-rc-foot .rvh-rc-secondary { width: 100%; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .rvh-rc-flip-inner, .rvh-rc-tilt, .rvh-rc-tilt::after { transition: none !important; } .rvh-rc-section.rvh-is-sealed .rvh-rc-seal, .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-ring, .rvh-rc-section.rvh-is-sealed .rvh-rc-seal-sheen, .rvh-rc-section.rvh-is-sealed .rvh-rc-spark, .rvh-rc-section.rvh-is-sealed .rvh-rc-rise, .rvh-rc-section.rvh-is-settled .rvh-rc-petal, .rvh-rc-section.rvh-is-sealed .rvh-rc-cert::after, .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-back .rvh-reveal { animation: none !important; } .rvh-rc-section.rvh-is-sealed .rvh-rc-seal { opacity: 1; transform: none; filter: drop-shadow(0 14px 24px rgba(74,13,17,.34)); } .rvh-rc-section.rvh-is-sealed .rvh-rc-cert::after { opacity: 1; } .rvh-rc-section.rvh-is-sealed .rvh-rc-face.rvh-back .rvh-reveal { opacity: 1; transform: none; } .rvh-rc-section.rvh-is-settled .rvh-rc-petal { opacity: .82; } .rvh-rc-tickbox path { transition: none; } } /* ============================================================ SECTION 9: GET IN TOUCH — a tabbed "desk calendar" that page- flips between three real contact paths (store, appointment, expert chat). Same mechanics as the source build; restyled onto this page's own tokens/fonts (Cinzel/Playfair Display, --brand-color/--gold/--paper-*) and CTA pill treatment instead of its original Cormorant/Montserrat look. ============================================================ */ .rvh-gt-section { width: 100%; max-width: 1400px; padding: 90px 24px 120px; position: relative; z-index: 5; } .rvh-gt-intro { text-align: center; margin-bottom: 50px; } .rvh-gt-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.95rem, 1.3vw, 1.1rem); color: var(--text-dark); opacity: 0.8; margin-top: 10px; } .rvh-gt-container { position: relative; width: min(1080px, 100%); margin: 0 auto; padding-top: 46px; } .rvh-gt-controls { display: none; align-items: center; justify-content: center; gap: 20px; margin-top: 22px; position: relative; z-index: 5; } .rvh-gt-tabs { position: absolute; top: 0; left: 56px; z-index: 10; display: flex; align-items: flex-end; gap: 5px; max-width: calc(100% - 112px); } .rvh-gt-tab { appearance: none; border: 1px solid rgba(181,149,92,.3); border-bottom: 0; color: var(--text-dark); font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 14px 20px 16px; border-radius: 9px 9px 0 0; cursor: pointer; position: relative; transition: transform .24s ease, background-color .24s ease, color .24s ease, box-shadow .24s ease; box-shadow: 0 -3px 8px rgba(90,69,56,.035); white-space: nowrap; background: var(--paper-mid); } .rvh-gt-tab:nth-child(2) { transform: translateY(3px); background: var(--paper-edge); } .rvh-gt-tab:nth-child(3) { transform: translateY(6px); background: var(--gold-light); } .rvh-gt-tab:hover { color: var(--brand-color); } .rvh-gt-tab.rvh-active { background: var(--paper-center); color: var(--brand-color); font-weight: 600; transform: translateY(0); box-shadow: 0 -5px 12px rgba(90,69,56,.06); z-index: 3; } .rvh-gt-tab.rvh-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; background: var(--paper-center); } .rvh-gt-backing { position: absolute; inset: 52px 10px -12px 14px; background: var(--paper-edge); border: 1px solid rgba(181,149,92,.2); border-radius: 10px; box-shadow: 0 14px 24px rgba(80,60,50,.06); transform: rotate(.25deg); z-index: 0; } .rvh-gt-backing-2 { position: absolute; inset: 58px 20px -20px 24px; background: var(--gold-light); border-radius: 11px; transform: rotate(-.3deg); z-index: -1; opacity: .55; } .rvh-gt-card { position: relative; z-index: 2; perspective: 1500px; isolation: isolate; min-height: 575px; background: linear-gradient(115deg, rgba(255,255,255,.38), transparent 30%), repeating-linear-gradient(0deg, rgba(131,105,86,.018) 0 1px, transparent 1px 4px), var(--paper-center); border: 1px solid rgba(181,149,92,.25); border-radius: 7px; overflow: visible; box-shadow: 0 28px 50px -30px rgba(66,48,39,.34), 0 8px 20px rgba(76,58,48,.06), inset 0 1px 0 rgba(255,255,255,.9); } .rvh-gt-grid { display: grid; grid-template-columns: minmax(0,58%) minmax(340px,42%); min-height: 575px; } .rvh-gt-left { padding: 92px 48px 52px 56px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; position: relative; z-index: 3; } .rvh-gt-tagline { font-family: 'Cinzel', serif; font-size: .62rem; line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .rvh-gt-title { font-family: 'Cinzel', serif; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.08; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-color); margin-bottom: 20px; max-width: 380px; } .rvh-gt-desc { font-family: 'Playfair Display', serif; max-width: 410px; font-size: .92rem; line-height: 1.75; color: var(--text-dark); opacity: .82; margin-bottom: 30px; } .rvh-gt-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; position: relative; padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); color: #fffaf0; text-decoration: none; font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; } .rvh-gt-cta::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; } .rvh-gt-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); } .rvh-gt-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; } .rvh-gt-cta:hover svg { transform: translateX(2px); } .rvh-gt-cta-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; } /* The lounge link reuses .rvh-rc-secondary, which is sized for the certificate card a size up from here (.8rem/.24em against this section's .68rem/.18em). Sitting next to .rvh-gt-cta it out-measured the primary it is meant to defer to, so pull it onto the gt scale -- and take the ghost's 1px border out of the padding so both buttons land on the same 44px height. The fill/outline contrast carries the hierarchy; size should not. */ .rvh-gt-cta-row .rvh-rc-secondary.rvh-ghost { font-size: .68rem; letter-spacing: .18em; padding: 13px 31px; } /* below this, "Find Your Nearest Store" and "Visit Rivaah Lounge" no longer fit on one line and wrap -- stack them centered instead, at a shared width so neither reads as the "main" one by being wider */ @media (max-width: 640px) { .rvh-gt-cta-row { flex-direction: column; align-items: center; width: 100%; } .rvh-gt-cta-row .rvh-gt-cta, .rvh-gt-cta-row .rvh-rc-secondary.rvh-ghost { width: 100%; max-width: 320px; } } .rvh-gt-right { position: relative; min-height: 575px; padding: 0 34px 42px 4px; display: flex; align-items: flex-start; justify-content: flex-end; z-index: 4; } .rvh-gt-photo { position: relative; width: min(100%, 410px); height: 500px; margin-top: -9px; transform: rotate(.9deg); transform-origin: 50% 10%; filter: drop-shadow(0 18px 18px rgba(59,43,36,.11)); } .rvh-gt-photo-print { position: absolute; inset: 0; background: var(--paper-center); padding: 8px; border: 1px solid rgba(181,149,92,.3); border-radius: 3px; box-shadow: 0 2px 4px rgba(55,39,32,.05), 0 14px 24px rgba(55,39,32,.09); overflow: hidden; } .rvh-gt-photo-print img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 1px; transition: opacity .22s ease, transform .36s ease; } .rvh-gt-paperclip { position: absolute; top: -18px; right: 38px; width: 25px; height: 74px; border: 3px solid var(--gold); border-radius: 14px; transform: rotate(4deg); z-index: 6; box-shadow: 1px 2px 2px rgba(59,44,34,.13), inset 1px 0 0 rgba(255,255,255,.55); background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(181,149,92,.08)); } .rvh-gt-paperclip::after { content: ''; position: absolute; top: 7px; left: 5px; width: 9px; height: 52px; border: 2px solid var(--gold-light); border-radius: 9px; box-shadow: inset 1px 0 0 rgba(255,255,255,.5); } .rvh-gt-paperclip::before { content: ''; position: absolute; left: 50%; bottom: -6px; width: 15px; height: 8px; background: rgba(66,50,40,.09); filter: blur(4px); transform: translateX(-50%); z-index: -1; } .rvh-gt-flip-sheet { position: absolute; inset: 0; z-index: 30; background: linear-gradient(115deg, rgba(255,255,255,.38), transparent 30%), repeating-linear-gradient(0deg, rgba(131,105,86,.018) 0 1px, transparent 1px 4px), var(--paper-center); border-radius: 7px; transform-origin: 50% 0%; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity, filter; pointer-events: none; box-shadow: 0 28px 50px -30px rgba(66,48,39,.28), 0 8px 20px rgba(76,58,48,.05); animation: gtFlipPageUp 680ms cubic-bezier(.55,.06,.20,1) forwards; } .rvh-gt-flip-sheet::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(115,88,70,0) 0%, rgba(115,88,70,.035) 52%, rgba(70,49,38,.14) 100%); opacity: 0; animation: gtFlipShade 680ms cubic-bezier(.55,.06,.20,1) forwards; } .rvh-gt-grid.rvh-page-incoming { animation: gtIncomingSettle 520ms cubic-bezier(.22,.72,.25,1) both; } @keyframes gtFlipPageUp { 0% { transform: rotateX(0deg) translateZ(0); opacity: 1; filter: brightness(1); } 38% { transform: rotateX(34deg) translateZ(2px); opacity: 1; filter: brightness(.985); } 72% { transform: rotateX(76deg) translateZ(4px); opacity: .96; filter: brightness(.95); } 100% { transform: rotateX(96deg) translateZ(2px); opacity: 0; filter: brightness(.9); } } @keyframes gtFlipShade { 0% { opacity: 0; } 48% { opacity: .34; } 82% { opacity: .62; } 100% { opacity: .2; } } @keyframes gtIncomingSettle { 0% { opacity: .76; transform: translateY(5px); } 45% { opacity: .92; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } .rvh-gt-container.rvh-is-flipping .rvh-gt-backing { animation: gtBackingReact 680ms ease both; } @keyframes gtBackingReact { 0%,100% { transform: rotate(.25deg) translateY(0); } 48% { transform: rotate(.25deg) translateY(2px); } } @media (prefers-reduced-motion: reduce) { .rvh-gt-flip-sheet, .rvh-gt-flip-sheet::after, .rvh-gt-grid.rvh-page-incoming, .rvh-gt-container.rvh-is-flipping .rvh-gt-backing { animation-duration: 1ms !important; } } @media (max-width: 920px) { .rvh-gt-section { padding: 60px 18px 80px; } .rvh-gt-intro { margin-bottom: 60px; } .rvh-gt-container { padding-top: 54px; } .rvh-gt-tabs { left: 0; right: 0; max-width: none; overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding-right: 18px; padding-top: 6px; } /* the chosen tab jumps to the front of the rail so it is always the one visible at the left edge, however far along the row it sits */ .rvh-gt-tab { order: 1; } .rvh-gt-tab.rvh-active { order: 0; } .rvh-gt-tabs::-webkit-scrollbar { display: none; } .rvh-gt-tab { padding: 15px 16px 17px; font-size: .6rem; } .rvh-gt-tab:nth-child(2), .rvh-gt-tab:nth-child(3) { transform: none; } .rvh-gt-controls { display: flex; } .rvh-gt-grid { grid-template-columns: 1fr; } .rvh-gt-card { min-height: 0; } .rvh-gt-right { order: 1; min-height: 0; height: 340px; padding: 0 22px; justify-content: center; } .rvh-gt-photo { width: min(88%,520px); height: 330px; margin-top: -8px; } .rvh-gt-left { order: 2; padding: 56px 28px 40px; align-items: center; text-align: center; } .rvh-gt-desc { max-width: 520px; } .rvh-gt-backing { inset: 50px 6px -10px 9px; } .rvh-gt-backing-2 { inset: 55px 12px -17px 16px; } } @media (max-width: 560px) { .rvh-gt-tab { padding-left: 13px; padding-right: 13px; } .rvh-gt-right { height: 280px; padding-left: 14px; padding-right: 14px; } .rvh-gt-photo { height: 270px; width: 91%; } .rvh-gt-paperclip { right: 28px; transform: scale(.88) rotate(4deg); transform-origin: top right; } .rvh-gt-left { padding: 48px 22px 34px; } .rvh-gt-title { font-size: 1.05rem; letter-spacing: .2px; white-space: nowrap; max-width: 100%; } .rvh-gt-desc { font-size: .85rem; } } /* ---------- BRIDAL BLISS (category browse) ---------- */ .rvh-bb-section { padding: 90px 24px 100px; position: relative; z-index: 10; text-align: center; } /* Soft depth separator, matching #lookbookSection::before: a diffuse glow overlaying the section's own edge rather than a hard band between sections. ::before shades the top edge, ::after mirrors it on the bottom, so a section reads as separated above and below without adding any height to the page. */ .rvh-bb-section::before, .rvh-bb-section::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 2; } .rvh-bb-section::before { top: 0; background: radial-gradient(ellipse at 50% 0%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%), linear-gradient(to bottom, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%); } .rvh-bb-section::after { bottom: 0; background: radial-gradient(ellipse at 50% 100%, rgba(92, 73, 53, 0.16) 0%, rgba(92, 73, 53, 0.08) 26%, rgba(92, 73, 53, 0.02) 48%, rgba(92, 73, 53, 0) 74%), linear-gradient(to top, rgba(255, 248, 239, 0.28) 0%, rgba(255, 248, 239, 0.12) 20%, rgba(255, 248, 239, 0) 100%); } .rvh-bb-sub { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(0.95rem, 1.3vw, 1.1rem); color: var(--text-dark); opacity: 0.8; margin-top: 8px; } .rvh-bb-categories { display: flex; justify-content: center; align-items: flex-start; gap: 44px; flex-wrap: wrap; margin: 0 auto 60px; max-width: 900px; } /* Swiper is disabled above 861px, so the wrapper must behave like the plain wrapped flex row it used to be at those widths. */ .rvh-bb-categories .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 44px; } /* set by home.js when the categories are narrower than their rail, i.e. there is nothing to scroll. Centres the row as a group. transform:none is needed because Swiper still writes an inline translate3d on the wrapper -- with centeredSlides it centres the ACTIVE slide rather than the group, which pushed the row right and ran the last category off the edge. A CSS !important beats a non-important inline style, so this wins without having to fight Swiper for control. Both classes are on the same element deliberately: the @media (max-width:860px) block below sets justify-content:flex-start at the same specificity and later in the file, so a single-class selector lost to it and the row stayed flush left. */ /* The rail is itself a flex container with gap:44px, and Swiper appends a zero-width .swiper-notification as a second child. The gap sits between the wrapper and that empty node, so the wrapper measured 814px inside an 858px rail and the centred row came out 44px left of true centre. */ .rvh-bb-categories.rvh-bb-locked { gap: 0; } .rvh-bb-categories.rvh-bb-locked .swiper-wrapper { justify-content: center; transform: none !important; width: 100%; } /* Swiper puts spaceBetween on every slide including the last, so the trailing 26px pulled the centred row left of true centre. */ .rvh-bb-categories.rvh-bb-locked .swiper-slide:last-child { margin-right: 0 !important; } .rvh-bb-category-slide { width: auto; display: flex; justify-content: center; } /* Above 861px Swiper is disabled and the rail is a plain wrapped flex row, which must show each category exactly once -- so the two extra copies that give the mobile strip its left/right neighbours are dropped here. */ @media (min-width: 861px) { .rvh-bb-category-slide[data-rvh-rep="0"], .rvh-bb-category-slide[data-rvh-rep="2"] { display: none; } } @media (max-width: 860px) { .rvh-bb-categories .swiper-wrapper { flex-wrap: nowrap; gap: 0; justify-content: flex-start; } } .rvh-bb-category-item { appearance: none; border: 0; background: transparent; cursor: pointer; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 12px; } .rvh-bb-quatrefoil-wrap { width: 110px; height: 110px; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--paper-center) 0%, var(--paper-mid) 100%); border: 1px solid rgba(181,149,92,.5); transition: all .3s ease; } .rvh-bb-quatrefoil-wrap::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(181,149,92,.22); pointer-events: none; } .rvh-bb-tile-corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--gold); pointer-events: none; transition: border-color .3s ease; } .rvh-bb-tile-corner.rvh-tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; } .rvh-bb-tile-corner.rvh-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; } .rvh-bb-tile-corner.rvh-bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; } .rvh-bb-tile-corner.rvh-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; } .rvh-bb-category-item.rvh-active .rvh-bb-quatrefoil-wrap { border-color: var(--brand-color); background: linear-gradient(180deg, rgba(226,205,166,.4) 0%, rgba(226,205,166,.18) 100%); box-shadow: 0 10px 22px rgba(108,21,28,.16); } .rvh-bb-category-item.rvh-active .rvh-bb-tile-corner { border-color: var(--brand-color); } .rvh-bb-quatrefoil-wrap img { display: block; max-width: 100%; max-height: 100%; position: relative; z-index: 1; } .rvh-bb-category-label { font-family: 'Cinzel', serif; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-dark); transition: color .2s ease; } .rvh-bb-category-item.rvh-active .rvh-bb-category-label { color: var(--brand-color); } .rvh-bb-content { display: grid; grid-template-columns: 1.35fr .65fr; gap: 54px; align-items: center; max-width: 1080px; margin: 0 auto; text-align: left; } .rvh-bb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-left: -28px; } .rvh-bb-grid-item { display: block; text-decoration: none; color: inherit; } .rvh-bb-grid-item .rvh-bb-grid-img-wrap { aspect-ratio: 1 / 0.86; border-radius: 12px; overflow: hidden; border: 1px solid rgba(181,149,92,.22); background: var(--paper-edge); } .rvh-bb-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .rvh-bb-grid-item:hover img { transform: scale(1.04); } .rvh-bb-grid-item span { display: block; margin-top: 10px; font-family: 'Playfair Display', serif; font-size: .88rem; color: var(--text-dark); } .rvh-bb-video-panel { display: flex; flex-direction: column; align-items: center; } /* Handset shell: an ivory case with the screen inset inside it, the way the reference renders it — not a dark slab with a pale rim. The bar lives inside .rvh-bb-phone-screen so it clips to the screen's corners. */ .rvh-bb-phone { width: 100%; max-width: 268px; aspect-ratio: 9 / 16; border-radius: 34px; padding: 9px; position: relative; border: 1px solid rgba(181,149,92,.42); background: linear-gradient(180deg, #fffdf9 0%, var(--paper-center) 100%); box-shadow: 0 22px 44px -18px rgba(66,48,39,.4), inset 0 0 0 1px rgba(255,255,255,.85); } .rvh-bb-phone-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px 24px; background: linear-gradient(to bottom, rgba(0,0,0,.42), transparent); color: #fffaf0; font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .04em; } .rvh-bb-phone-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rvh-bb-phone-icons { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .rvh-bb-phone-icons svg { width: 15px; height: 15px; stroke: #fffaf0; fill: none; stroke-width: 1.7; } .rvh-bb-phone-screen { width: 100%; height: 100%; position: relative; border-radius: 26px; overflow: hidden; background: #2b2320; border: 1px solid rgba(181,149,92,.3); } .rvh-bb-phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; } .rvh-bb-video-caption { margin-top: 16px; font-family: 'Playfair Display', serif; font-style: italic; font-size: .92rem; color: var(--brand-color); text-align: center; } .rvh-bb-cta-wrap { display: flex; justify-content: center; margin-top: 54px; } .rvh-bb-cta { display: inline-flex; align-items: center; gap: 10px; position: relative; padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); color: #fffaf0; text-decoration: none; font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; } .rvh-bb-cta::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; } .rvh-bb-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); } .rvh-bb-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s ease; } .rvh-bb-cta:hover svg { transform: translateX(2px); } @media (max-width: 860px) { .rvh-bb-content { grid-template-columns: 1fr; gap: 40px; } .rvh-bb-phone { max-width: 220px; } .rvh-bb-grid { max-width: 480px; margin: 0 auto; } .rvh-bb-categories { /* Swiper owns the scrolling now, so the rail is a plain overflow-hidden track. Percentage widths are avoided here: .rvh-bb-section sits in a shrink-to-fit flex column, so they are circular and blew the section out to 2081px. */ flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; padding: 4px 0 6px; margin-left: -24px; margin-right: -24px; width: 100vw; max-width: 100vw; } .rvh-bb-categories::-webkit-scrollbar { display: none; } .rvh-bb-category-item { flex: 0 0 auto; scroll-snap-align: start; } } @media (max-width: 560px) { .rvh-bb-section { padding: 70px 18px 80px; } .rvh-bb-categories { margin-bottom: 44px; margin-left: -18px; margin-right: -18px; width: 100vw; max-width: 100vw; } .rvh-bb-quatrefoil-wrap { width: 78px; height: 78px; } .rvh-bb-tile-corner { width: 11px; height: 11px; } .rvh-bb-category-label { font-size: .68rem; } } /* Desktop: sized off viewport WIDTH to hold the reference's proportions (grid : gap : phone = 33 : 12.75 : 16.25), capped in px so the band never outgrows .rvh-bb-content, and capped against viewport height so the cards and the phone still clear the 108px sticky header together. The heading and category row scroll off above, exactly as they do in the reference. */ @media (min-width: 861px) { .rvh-bb-section { padding: clamp(30px, 5.2vh, 90px) 24px clamp(32px, 5.6vh, 100px); } .rvh-bb-intro .rvh-divider { margin-top: clamp(12px, 2.2vh, 30px); margin-bottom: clamp(12px, 2.2vh, 30px); } .rvh-bb-categories { gap: clamp(26px, 2.6vw, 44px); margin-bottom: clamp(20px, 3.2vh, 60px); } .rvh-bb-quatrefoil-wrap { width: clamp(66px, 8.6vh, 110px); height: clamp(66px, 8.6vh, 110px); } /* Fixed width, not max-width: the section sits in a shrink-to-fit column, so the columns must not pull the whole band narrow. */ .rvh-bb-content { grid-template-columns: auto auto; justify-content: center; gap: min(12.75vw, 200px); width: 1080px; max-width: 100%; } /* minmax(0,1fr): the nowrap names below set a min-content floor on a plain 1fr track, which would stop the cards shrinking. */ .rvh-bb-grid { width: min(33vw, 520px, (100vh - 148px) * 0.9); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); margin-left: 0; } .rvh-bb-grid-item { min-width: 0; } /* Square crop, as the reference shows the pieces. */ .rvh-bb-grid-item .rvh-bb-grid-img-wrap { aspect-ratio: 1 / 1; } /* One line with an ellipsis, as the reference shows the names — a wrapped second line costs ~18px on every row. */ .rvh-bb-grid-item span { margin-top: 10px; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rvh-bb-video-panel { width: min(16.25vw, 256px); } .rvh-bb-video-caption { margin-top: 14px; font-size: .9rem; } .rvh-bb-cta-wrap { margin-top: clamp(20px, 3vh, 54px); } } /* ---------- NOTES FROM THE STYLIST (hanging polaroid carousel) ---------- */ .rvh-notes-section { width: 100%; max-width: 1320px; margin: 0 auto; padding: 90px 24px 180px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } .rvh-notes-head-note { font-family: 'Caveat', cursive; font-size: 1.35rem; color: var(--text-dark); opacity: 0.72; text-align: center; margin-top: 6px; line-height: 1.45; } .rvh-notes-stage { position: relative; width: 100%; max-width: 1100px; margin-top: 46px; display: flex; justify-content: center; align-items: center; gap: 40px; } .rvh-notes-carousel-wrap { display: flex; align-items: center; gap: 20px; position: relative; } .rvh-notes-nav-arrow { flex: none; } .rvh-hang { position: relative; width: 340px; height: 600px; padding-top: 4px; z-index: 4; perspective: 1200px; } .rvh-hang-ribbon { position: absolute; top: -46px; left: 50%; transform: translateX(-50%) rotate(0.6deg); width: 34px; height: 230px; background: linear-gradient(100deg, #a12a33 0%, #7d1b23 26%, var(--brand-color) 58%, #4d0f14 100%); box-shadow: inset -5px 0 10px rgba(0,0,0,0.3), inset 5px 0 8px rgba(255,255,255,0.09), 3px 8px 18px rgba(70,15,20,0.26); z-index: 1; } .rvh-hang-ribbon::before { content: ''; position: absolute; bottom: 34px; left: -9px; width: 52px; height: 30px; background: linear-gradient(160deg, #8d1f27, #5e1218); transform: rotate(-6deg); border-radius: 2px; box-shadow: 0 6px 12px rgba(70,15,20,0.28), inset 0 -3px 7px rgba(0,0,0,0.28); } .rvh-hang-cloth { position: absolute; top: 170px; left: 50%; width: 292px; height: 420px; transform: translateX(-50%) rotate(-1.4deg); background: repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px), linear-gradient(155deg, #8b1f27, var(--brand-color) 55%, #501016); border-radius: 6px; filter: blur(0.3px); box-shadow: 6px 16px 32px rgba(80, 18, 24, 0.3); opacity: 0.92; z-index: 2; } .rvh-polaroid-stack { position: relative; z-index: 3; margin: 128px auto 0; width: 290px; height: 100%; } .rvh-note-card { position: absolute; left: 50%; top: 0; width: 262px; padding: 14px 14px 40px; background: linear-gradient(160deg, #F3EFE6 0%, #E9E3D7 55%, #DED7C8 100%); border-radius: 2px; box-shadow: 0 14px 28px -10px rgba(70, 45, 30, 0.4), 0 2px 4px rgba(70,45,30,0.16); transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity, visibility; cursor: pointer; } .rvh-note-card::after { content: ''; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; border-radius: 2px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); } .rvh-note-card img { display: block; width: 100%; height: 268px; object-fit: cover; filter: saturate(0.94) contrast(1.02); } .rvh-note-card-cap { position: absolute; left: 17px; right: 17px; bottom: 13px; display: flex; justify-content: space-between; align-items: flex-end; font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 2px; text-transform: uppercase; color: var(--brand-color); opacity: 0.82; } .rvh-note-card-cap span:last-child { text-align: right; opacity: 0.65; } /* Swiper drives this stack -- index, drag, loop, autoplay, keyboard and a11y. Slides stay in normal flow so Swiper can measure them and build its snap grid; the cards are 327px tall but sat 280px apart, so the 47px overlap comes from a negative spaceBetween. The card is an inner element, so its rotation survives the transform Swiper writes on the slide. Swiper also sets an inline height on vertical slides, hence the !important. */ /* The fade itself lives here, not in JS: home.js/community.js set the target opacity from each slide's progress, and this transition animates it. Swiper applies its own transition-duration after the value changes, so relying on that alone made the card blink out instead of fading. */ .rvh-polaroid-stack .swiper-slide { height: auto !important; display: flex; justify-content: center; transition: opacity .75s cubic-bezier(.25, 1, .5, 1); } .rvh-polaroid-stack .swiper-slide .rvh-note-card { position: relative; left: auto; transform: rotate(-1deg); transition: transform .75s cubic-bezier(.25,1,.5,1); } .rvh-polaroid-stack .swiper-slide-active .rvh-note-card { transform: rotate(-1.5deg); } .rvh-polaroid-stack .swiper-slide-next .rvh-note-card { transform: rotate(1.5deg); } .rvh-polaroid-stack .swiper-slide-prev .rvh-note-card { transform: rotate(1deg); } .rvh-polaroid-stack .swiper-slide-active .rvh-note-card::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(181, 149, 92, 0.75); pointer-events: none; z-index: 3; } .rvh-notes-dots-container { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; } .rvh-notes-mobile-strip-wrap { display: none; } .rvh-notes-dots-mobile { display: none; } .rvh-notes-mobile-controls { display: none; } .rvh-tip-panel { width: 440px; max-width: 100%; position: relative; z-index: 5; text-align: left; } .rvh-tip-paper { position: relative; padding: 40px 42px 36px; background: linear-gradient(150deg, var(--paper-center) 0%, #F6F0E4 60%, var(--paper-edge) 100%); box-shadow: 0 26px 50px -18px rgba(80, 55, 35, 0.34), 0 3px 8px rgba(80,55,35,0.12); border-radius: 2px; } .rvh-tip-paper::after { content: ''; position: absolute; inset: 0; opacity: 0.32; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='tp'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23tp)'/%3E%3C/svg%3E"); } .rvh-tip-frame { position: absolute; inset: 12px; border: 1px solid rgba(181, 149, 92, 0.42); pointer-events: none; } .rvh-tip-tape { position: absolute; top: -13px; left: 40px; width: 92px; height: 26px; background: linear-gradient(120deg, rgba(226,205,166,0.55), rgba(240,228,205,0.75)); box-shadow: 0 2px 6px rgba(120,95,60,0.16); transform: rotate(-3deg); opacity: 0.9; } .rvh-tip-eyebrow { font-family: 'Cinzel', serif; font-size: 0.62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); position: relative; z-index: 2; } .rvh-tip-title { font-family: 'Cinzel', serif; font-size: 1.62rem; letter-spacing: 3px; text-transform: uppercase; color: var(--brand-color); margin-top: 8px; position: relative; z-index: 2; } .rvh-tip-script { font-family: 'Great Vibes', cursive; font-size: 1.5rem; color: var(--gold); margin-top: 2px; position: relative; z-index: 2; } .rvh-tip-rule { width: 54px; height: 1px; margin: 16px 0 18px; background: linear-gradient(to right, var(--gold), transparent); position: relative; z-index: 2; } .rvh-tip-text { font-family: 'Playfair Display', serif; font-size: 0.97rem; font-style: italic; line-height: 1.85; color: var(--text-dark); opacity: 0.86; position: relative; z-index: 2; min-height: 140px; } .rvh-tip-pair { margin-top: 20px; font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 2.6px; text-transform: uppercase; color: var(--text-dark); opacity: 0.62; position: relative; z-index: 2; } .rvh-tip-pair b { color: var(--brand-color); font-weight: 500; opacity: 1; } .rvh-tip-sign { margin-top: 22px; font-family: 'Caveat', cursive; font-size: 1.22rem; color: var(--text-dark); opacity: 0.7; position: relative; z-index: 2; } .rvh-tip-cta { display: inline-flex; align-items: center; gap: 10px; position: relative; margin-top: 26px; padding: 14px 32px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(135deg, #83202a 0%, var(--brand-color) 45%, #521015 100%); color: #fffaf0; text-decoration: none; font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 12px 22px rgba(108,21,28,.3), inset 0 1px 0 rgba(255,255,255,.2); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; } .rvh-tip-cta::before { content: ''; position: absolute; inset: 3px; border-radius: 999px; border: 1px solid rgba(226,205,166,.5); pointer-events: none; } .rvh-tip-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(108,21,28,.36), inset 0 1px 0 rgba(255,255,255,.24); } .rvh-tip-cta span:last-child { font-size: .95rem; letter-spacing: 0; line-height: 1; } .rvh-notes-seal { position: absolute; right: -25px; bottom: -25px; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #93242c, var(--brand-color) 55%, #470d12 100%); box-shadow: 0 12px 22px -8px rgba(70, 15, 20, 0.6), inset 0 -4px 10px rgba(0,0,0,0.35), inset 0 4px 8px rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 2px; color: rgba(226, 205, 166, 0.72); text-align: center; line-height: 1.5; z-index: 6; } @media (max-width: 900px) { .rvh-notes-section { padding: 70px 18px 130px; } .rvh-notes-stage { flex-direction: column; gap: 26px; margin-top: 34px; } .rvh-notes-carousel-wrap { flex-direction: row; align-items: center; width: 100%; } /* the prev/next arrows move below the strip on mobile, so the filmstrip itself gets the full width for the rods to breathe */ .rvh-notes-carousel-wrap > .rvh-notes-nav-arrow { display: none; } .rvh-hang { display: none; } .rvh-notes-mobile-strip-wrap { display: block; position: relative; width: 100%; padding: 10px 0; } /* the rod -- backmost layer, a single maroon bar the full width of the strip. Hidden behind the board everywhere except its own tips, which poke out past the board's (narrower) edges */ .rvh-notes-mobile-rod-line { position: absolute; left: 6px; right: 6px; top: 94px; height: 14px; z-index: 0; border-radius: 999px; background: linear-gradient(90deg, #4d0f14 0%, #7d1b23 12%, var(--brand-color) 50%, #7d1b23 88%, #4d0f14 100%); box-shadow: inset 0 -3px 5px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.15), 0 3px 8px rgba(70,15,20,.3); } /* the board -- middle layer, matching the desktop .rvh-hang-cloth treatment (same fabric-weave texture, gradient, rotation). Shorter than the cards and narrower than the rod, so it covers the rod within its own bounds (showing only in the gaps between cards, where nothing else covers it) while the rod's tips still poke out past both the board and the cards */ .rvh-notes-mobile-backdrop { position: absolute; top: 40px; bottom: 40px; left: 24px; right: 24px; transform: rotate(-0.8deg); background: repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px), linear-gradient(155deg, #8b1f27, var(--brand-color) 55%, #501016); border-radius: 6px; filter: blur(0.3px); box-shadow: 6px 10px 22px rgba(80,18,24,.28); opacity: .92; z-index: 1; } /* Swiper track -- this surface had no touch handling at all before (arrows and dots only); Swiper gives it real drag. */ .rvh-notes-mobile-strip { position: relative; z-index: 2; padding: 8px 0; overflow: hidden; } .rvh-notes-mobile-card { position: relative; width: 120px; height: auto; cursor: pointer; border-radius: 2px; overflow: hidden; background: linear-gradient(160deg, #F3EFE6 0%, #E9E3D7 55%, #DED7C8 100%); padding: 8px 8px 22px; box-shadow: 0 12px 22px -10px rgba(70,45,30,.45); transition: opacity .3s ease, transform .3s ease; opacity: .6; transform: scale(.9); } /* decorative peeks beyond the real first/last card, so the strip always shows a neighbour on both sides even at the true ends -- never a snap target themselves, so a swipe always settles back on a real card */ .rvh-notes-mobile-card-clone { scroll-snap-align: none; pointer-events: none; } .rvh-notes-mobile-card::after { content: ''; position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); } .rvh-notes-mobile-card.swiper-slide-active { opacity: 1; transform: scale(1); } .rvh-notes-mobile-card.swiper-slide-active::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(181, 149, 92, 0.75); pointer-events: none; z-index: 2; } .rvh-notes-mobile-card img { width: 100%; height: 140px; object-fit: cover; display: block; filter: saturate(0.94) contrast(1.02); position: relative; z-index: 1; } .rvh-notes-mobile-card-label { display: block; margin-top: 6px; font-family: 'Cinzel', serif; font-size: .52rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-color); text-align: center; position: relative; z-index: 1; } .rvh-notes-dots-mobile { display: flex; position: static; transform: none; margin-top: 0; justify-content: center; } .rvh-notes-mobile-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; } .rvh-notes-mobile-controls .rvh-notes-nav-arrow { display: flex; width: 38px; height: 38px; font-size: .85rem; } .rvh-tip-panel { text-align: center; } .rvh-tip-paper { padding: 32px 26px 30px; } .rvh-notes-seal { width: 66px; height: 66px; right: -12px; bottom: -12px; font-size: .42rem; } }