taupe override across all... */
.couple-section .title-section h2,
.couple-section .title-section h2 p,
.couple-section .title-section h2 span,
/* -- Venue & RSVP bridge subtitle (audit Fix 2, Aug 7). Since Venue + R */
/* 3) Panel body text taupe across ALL sections (was couple+wishes only) */
.couple-content, .couple-content .title-section,
.wishes-section, .wishes-section .title-section,
/* Stream intro box: theme's .stream-description is SOLID cream (vision caught it as an opaque white card breaking the... */
.stream-section .stream-description {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border: 1px solid rgba(212, 175, 55, 0.45) !important;
border-radius: 6px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 0 40px rgba(74, 64, 58, 0.05) !important;
}
/* RSVP + Stream inputs stay usable on the translucent panel */
/* -- Story section: translucent content panel (audit Fix: text overlapp */
.story-section .col-md-8, .story-section .col-xl-6,
.story-section .container {
background-color: rgba(253, 251, 247, 0.72) !important;
background-image: var(--av-noise) !important;
background-size: 180px 180px !important;
border-radius: 12px !important;
padding: 32px 40px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 0 60px rgba(74, 64, 58, 0.05) !important;
margin-bottom: 24px !important;
}
.story-section p {
position: relative !important;
z-index: 1 !important;
}
.story-section .story-background {
opacity: 0.25 !important;
z-index: 0 !important;
}
/* 14a - ENGAGEMENT PHOTO as story picture (user-approved v5, Aug 8 2026 */
.story-section .image-element img.story-background {
opacity: 0 !important;
}
.story-section .image-element {
background: url('/assets/viding_db8d101d6483.webp') center / cover no-repeat !important;
}
.stream-section input::placeholder,
.stream-section textarea::placeholder {
color: #8A7A6B !important;
}
/* Wishes list/empty-state text: theme renders it white (--color-light) */
.wishes-section .wishes-preview,
.wishes-section .wishes-preview .card,
.wishes-section .wishes-preview p,
.wishes-section .wishes-preview span,
.wishes-section .wishes-preview .card-text,
.wishes-section .wishes-preview .card-title {
color: #4A403A !important;
}
.wishes-section input::placeholder,
.wishes-section textarea::placeholder {
color: #8A7A6B !important;
opacity: 1 !important;
}
/* RSVP placeholder fade - mirror the wishes pattern (short selector list +
hex color). Viding's publish pipeline DROPS... */
/* The "&" between the couple: theme renders it white (invisible on crea */
.couple-section .and span {
color: #59642D !important;
text-shadow: 0 1px 2px rgba(253, 251, 247, 0.6) !important;
}
/* Venue name vs address hierarchy (user, Aug 6 v2): "SWASANA BRIN GATOT */
/* !!? HIGH-SPECIFICITY CENTERING (verified Aug 6): the date-cluster flex */
/* Address: now owned by the Viding UI (Event Series -> Edit Event -> "Loc */
/* !!? Address centering fix (verified Aug 6): the address p lives inside */
/* Location button -> "[loc] Google Maps" (user, Aug 6). The theme's button says "Location"; CSS-only text swap via font-size:0... */
/* -- 13c. BUTTON TYPOGRAPHY (user, Aug 7: "button font clashes with des */
/* -- Maps popup modal ("show-maps") - user Aug 8: the popup's "Location */
.modal.show-maps .btn-custom.color__button__trans.mt-3,
.modal.show-maps .btn-custom.color-secondary.mt-3 {
/* (A) solid contrast - never transparent on a white modal */
background-color: var(--color-secondary) !important;
border-color: var(--color-secondary) !important;
color: #FDFBF7 !important;
/* (B) hide theme's "Location" text, show new label via ::after */
font-size: 0 !important;
padding: 10px 22px !important;
width: auto !important;
}
.modal.show-maps .btn-custom.color__button__trans.mt-3::after,
.modal.show-maps .btn-custom.color-secondary.mt-3::after {
content: "📍 Open In Google Maps" !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', sans-serif !important;
}
/* maps popup close (X): theme brown X/bg is off-palette - switch to scheme Salmon #C86D63 (user Aug 8) */
.modal.show-maps .btn-modal {
color: #C86D63 !important;
background: transparent !important;
border-color: transparent !important;
}
/* footer copyright line: theme paints off-palette brown on the forest f */
.footer .footer-text {
color: #FDFBF7 !important;
}
.cover-section input, .cover-section textarea, .cover-section select,
.header-section input, .header-section textarea, .header-section select,
/* -- 13c1. INPUT FIELD SOFTENING (audit Fix 3, Aug 7: "stark white inpu */
/* Max-specificity placeholder reset. Viding injects inline
`.form-control::placeholder{font-family:"Playfair... */
/* INDENT FIX 2 (user, Aug 9: inputs indented left vs selects on mobile */
/* FIX1 serif: Chrome uses INPUT font for ::placeholder (MDN/SO14524328); set on element. */
/* FIX2 indent: native input inset -> appearance:none + identical box model on input&select. */
/* -- 13c2. TOUCH TARGET SIZE (user, Aug 7: "RSVP form buttons and Googl */
@media (max-width: 767px) {
.btn-custom, .btn-reminder, }
@media (min-width: 1200px) {
.main-app {
background-image: url('/assets/lgrf2e.png'), url('/assets/7or44x.svg') !important;
background-size: 512px, cover !important;
}
}
/* -- 14. THANK YOU SECTION (full-bleed photo overlay) -- */
.thank-wrapper, .thank, .thank-body { background-image: none !important; }
.thank-section { position: relative !important; }
/* Overlay must live on .thank-wrapper::before - the wrapper itself is z */
.thank-wrapper::before {
content: ''; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* Aug 6: photo m7o36o.jpg is high-key white - 0.35/0.55 left white text illegible (~2.4:1). Deepened to 0.55/0.75 for... */
background: linear-gradient(to bottom, rgba(74, 64, 58, 0.55), rgba(74, 64, 58, 0.75)) !important;
z-index: 1 !important; pointer-events: none !important;
}
.thank-wrapper {
/* Aug 6: was a white paper texture (tru9sf.jpg) - white text on white = */
background-image: url('/assets/m7o36o.jpg') !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
min-height: 680px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.thank-wrapper .row { width: 100% !important; margin: 0 !important; }
.thank-wrapper .image-wrapper,
.thank-wrapper .image-wrapper .image-element,
img.thank-background { display: none !important; }
.thank-wrapper .thank {
background: transparent !important; box-shadow: none !important;
padding: 32px !important; text-align: center !important;
position: relative !important; z-index: 2 !important;
width: 100% !important; max-width: 720px !important;
margin: 0 auto !important; height: auto !important; overflow: visible !important;
}
.thank-wrapper .thank h2, .thank-wrapper .thank p,
.thank-wrapper .thank-body h2, .thank-wrapper .thank-body p,
.thank-wrapper .title-section h2, .thank-wrapper .title-section {
color: #FDFBF7 !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55) !important;
text-align: center !important;
animation: none !important; transition: none !important;
opacity: 1 !important; transform: none !important; visibility: visible !important;
}
/* -- 13. ANIMATED BOTANICAL LAYERS (v3, Aug 6 2026) -- */
@keyframes av-shimmer {
0% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
30% { opacity: .45; }
60% { transform: translateX(240%) skewX(-16deg); opacity: 0; }
100% { transform: translateX(240%) skewX(-16deg); opacity: 0; }
}
.cover-section, .header-section { position: relative; overflow: hidden; }
.cover-section::before, .header-section::before {
content: '';
position: absolute;
left: 0; bottom: 0;
width: clamp(150px, 33vw, 430px);
aspect-ratio: 1041 / 1920;
background: url('/assets/shbwul.webp') no-repeat left bottom / contain,
url('/assets/2d3ywu.png') no-repeat left bottom / contain;
transform-origin: 10% 96%;
animation: av-sway 12s ease-in-out infinite alternate;
will-change: transform;
pointer-events: none;
z-index: 0;
}
.cover-section::after, .header-section::after {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 45%;
background: linear-gradient(105deg, transparent, rgba(212,175,55,.28), transparent);
animation: av-shimmer 18s ease-in-out infinite;
will-change: transform, opacity;
pointer-events: none;
z-index: 0;
}
.cover-section > *, .header-section > * { position: relative; z-index: 1; }
/* Fix Save the Date clipping + bottom padding (Aug 6): theme gives .btn */
.header-section .btn-reminder { margin-bottom: 0 !important; }
.header-section { padding-bottom: 28px !important; }
@media (max-width: 767px) {
.header-section { padding-bottom: 20px !important; }
}
/* -- 13a. SAVE THE DATE - ADAPTIVE ONE-SCREEN (Aug 6 2026 v2) -- User v */
.header-section {
height: auto !important; /* DYNAMIC (user, Aug 6: "make the header responsive, dynamic height. Th */
min-height: 100vh !important; /* fallback for browsers without svh */
min-height: 100svh !important; /* SMALL viewport height (user, Aug 6: iQOO 15 "still have some scroll d */
max-height: none !important;
overflow: hidden !important; /* contains the lily/shimmer ::before/::after */
}
.header-section .header-content,
.header-section .header,
.header-section .header-title,
.header-section .header-title-content {
height: auto !important;
min-height: 0 !important;
}
/* The arch (.header-title-content) must rise back under the crest: the */
.header-section .header { padding-top: clamp(50px, 8vh, 72px) !important; }
/* Elongated arch: min-height stretches the oval below the text; padTop */
.header-section .header-title-content {
min-height: clamp(340px, 48vh, 640px) !important;
padding-top: clamp(170px, 24vh, 230px) !important;
padding-bottom: clamp(40px, 9vh, 120px) !important;
}
.header-section .header-title-content h1.title,
.header-section .header-title-content .title {
font-size: clamp(34px, 6.5vw, 56px) !important;
line-height: 1.15 !important;
margin-bottom: clamp(6px, 1.5vh, 16px) !important;
}
.header-section .header-title-content p {
font-size: clamp(16px, 2.2vw, 18px) !important; /* A11Y: min 16px (was 13px) */
line-height: 1.4 !important;
margin-bottom: clamp(6px, 1.5vh, 16px) !important;
}
.header-section /* Semi-transparent scrim behind countdown + button zone (all breakpoint */
.header-section .reminder-wrap {
position: relative;
background: rgba(74, 64, 58, 0.5) !important;
border-radius: 16px;
margin-top: clamp(8px, 2vh, 24px) !important;
margin-inline: clamp(4px, 1vw, 12px) !important;
padding: clamp(12px, 2vh, 24px) clamp(8px, 2vw, 20px) !important;
}
.header-section .header-section .header-section /* A11Y: min 16px (was 10px) */
.header-section .btn-reminder {
margin-top: clamp(4px, 1vh, 12px) !important;
padding: clamp(8px, 1.5vh, 12px) clamp(20px, 4vw, 32px) !important;
}
/* !!? "Save the Date" -> "Save to Google Calendar" (user, Aug 6: "is it b */
.header-section .btn-reminder { font-size: 0 !important; }
.header-section .btn-reminder::after {
content: "Save to Google Calendar" !important;
font-size: clamp(16px, 2vw, 18px) !important; /* A11Y: min 16px (was 13px) */
font-weight: 600 !important;
font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Arial, 'Apple Color Emoji', 'Segoe UI Emoji',
'Noto Color Emoji', sans-serif !important;
letter-spacing: .02em !important;
line-height: 1.2 !important;
}
/* !!? PLAY/PAUSE BUTTON - pure circle (user, Aug 6: "the play & pause bu */
#musicControl.btn-control {
/* v2 (Aug 8): background was the theme's Viding-brand HOT PINK radial g */
background: #59642D !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
#musicControl .icofont, #musicControl i, #musicControl svg {
margin: 0 !important;
font-size: 18px !important;
line-height: 1 !important;
}
/* !!? HEADER BOTTOM PADDING (user, Aug 6: "there is literally no padding */
.header-section .reminder-wrap { padding-top: clamp(40px, 8vh, 96px) !important; }
.header-section .header-section .btn-reminder { margin-top: clamp(4px, 1vh, 12px) !important; }
.header-section .reminder-content { padding-bottom: clamp(16px, 3.5vh, 40px) !important; }
/* Ultra-short screens (landscape phones, small laptops with small windo */
@media (min-width: 768px) and (max-height: 760px) {
/* !!? SHORT DESKTOP / TABLET LANDSCAPE (user, Aug 6: "MacBook Air 13" 12 */
.header-section .reminder-wrap { padding-top: clamp(4px, 1vh, 16px) !important; }
.header-section .header-section .btn-reminder { margin-top: clamp(2px, .5vh, 6px) !important; }
.header-section { padding-bottom: 20px !important; }
}
@media (max-height: 560px) {
.header-section {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.header-section .header-title-content {
min-height: 0 !important;
padding-top: clamp(150px, 24vh, 190px) !important;
padding-bottom: clamp(20px, 4vh, 40px) !important;
}
.header-section .header-title-content h1.title,
.header-section .header-title-content .title { font-size: clamp(22px, min(7vw, 6vh), 34px) !important; }
.header-section .header-section /* A11Y: min 16px (was 9px) */
}
@media (min-width: 768px) and (max-width: 1199px) {
.header-section .header-title-content h1.title,
.header-section .header-title-content .title { font-size: clamp(30px, 5vw, 48px) !important; }
}
@media (max-width: 767px) {
.header-section .header-title-content h1.title,
.header-section .header-title-content .title { font-size: clamp(30px, 10vw, 42px) !important; } /* A11Y: min 30px for script legibility at 375px (was 26px) */
/* Theme stacks names as "Arif
&
Violet" (>350px) - 3 lines ea */
.header-section .header-title-content .title br { display: none !important; }
/* !!? MOBILE PORTRAIT FIT (user, Aug 6: iQOO 15 "still have some scroll */
.header-section .header { padding-top: clamp(40px, 6vh, 64px) !important; }
.header-section .reminder-wrap { padding-top: clamp(16px, 4vh, 48px) !important; }
.header-section .header-section .btn-reminder { margin-top: clamp(2px, .5vh, 8px) !important; }
.header-section { padding-bottom: clamp(12px, 2.5vh, 24px) !important; }
}
/* -- 13ab. COUPLE FRAME INSET (Aug 6 2026, user: frame padding vs scree */
.couple-section .row > [class*="col-"],
.couple .image-wrap { min-width: 0 !important; }
.couple .image-wrap { max-width: 100% !important; }
.couple .image-wrap img { max-width: 100% !important; height: auto !important; }
@media (max-width: 767px) {
.couple-content { padding-left: 20px !important; padding-right: 20px !important; }
/* Bootstrap row -12px margins + col 12px gutters eat the padding -> kill them */
.couple-section .row { margin-left: 0 !important; margin-right: 0 !important; }
.couple-section .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
.couple .image-wrap { width: 100% !important; max-width: 340px !important; margin: 0 auto !important; }
.couple .image-wrap img { width: 100% !important; height: auto !important; }
}
/* -- 13b. KEN BURNS - REMOVED (Aug 8 2026, user: "there is no ken burns */
.couple-content .image-element,
.couple-wrapper .image-element { overflow: hidden !important; }
/* Kill theme flip360 on photo wraps (Aug 6 2026, user: "too much flippi */
.image-wrap.has-animate {
animation: av-couple-in 1.2s ease-out both !important;
}
@keyframes av-couple-in {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.image-wrapper.has-animate {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* -- 14. CONTENT-SECTION BOTANICAL LAYERS (Aug 6 2026, v2) -- The refer */
@keyframes av-sway {
from { transform: rotate(-1.6deg); }
to { transform: rotate(1.6deg); }
}
/* Stronger sway for content sections - motion must be clearly visible */
@keyframes av-sway2 {
from { transform: rotate(-3.2deg); }
to { transform: rotate(3.2deg); }
}
/* Couple section - GOLD lily bottom-right (echo of cover) + sage sprig */
.couple-section { position: relative; overflow: hidden; }
.couple-section::before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: clamp(200px, 34vw, 460px);
aspect-ratio: 1041 / 1920;
background: url('/assets/2d3ywu.png') no-repeat right bottom / contain;
transform-origin: 90% 96%;
animation: av-sway2 10s ease-in-out infinite alternate;
opacity: .8;
filter: drop-shadow(0 2px 8px rgba(74, 64, 58, 0.18));
pointer-events: none;
z-index: 0;
}
.couple-section::after {
content: '';
position: absolute;
left: 0; top: 0;
width: clamp(110px, 18vw, 240px);
aspect-ratio: 184 / 340;
background: url('/assets/ou7zkp.png') no-repeat left top / contain;
transform-origin: 10% 4%;
animation: av-sway 14s ease-in-out infinite alternate;
opacity: .75;
filter: drop-shadow(0 2px 6px rgba(74, 86, 48, 0.25));
pointer-events: none;
z-index: 0;
}
.couple-section > * { position: relative; z-index: 1; }
/* Venue section - sage sprig bottom-left + small gold lily top-right */
/* Thank You section - gold lily echo bottom-right (::before is the gradient overlay) */
.thank-section::after {
content: '';
position: absolute;
right: 0; bottom: 0;
width: clamp(160px, 26vw, 340px);
aspect-ratio: 1041 / 1920;
background: url('/assets/2d3ywu.png') no-repeat right bottom / contain;
transform-origin: 90% 96%;
animation: av-sway 16s ease-in-out infinite alternate;
opacity: .6;
pointer-events: none;
z-index: 0;
}
.thank-section > * { position: relative; z-index: 2; }
@media (max-width: 480px) {
.couple-section::before { width: clamp(130px, 30vw, 200px); }
.couple-section::after, .thank-section::after { display: none; }
}
/* -- 15. FALL BACKGROUND LIGHT SWEEP (Aug 6 2026, v2) -- PURE CSS gradient sweep. */
/* COVER: sealed - darker + framed. Brightness math (user, Aug 7): heade */
.cover-section {
box-shadow:
inset 0 0 120px 30px rgba(0, 0, 0, 0.50),
inset 0 0 0 2px rgba(201, 166, 95, 0.70),
inset 0 0 0 8px rgba(107, 93, 66, 0.5),
inset 0 0 0 10px rgba(201, 166, 95, 0.45),
inset 0 0 0 9999px rgba(0, 0, 0, 0.28) !important;
}
/* Lily pattern layer only - text stays untouched */
.cover-section::before {
filter: brightness(0.72) !important;
}
/* OPENED - NO slide-up. The background gradually brightens (0.72 -> 1.00 */
.cover-section.cover-opened {
transform: none !important;
box-shadow: none !important;
opacity: 0 !important;
pointer-events: none !important;
transition:
box-shadow 0.6s ease-out,
opacity 0.4s ease-out 0.6s !important;
}
.cover-section.cover-opened::before {
filter: brightness(1) !important;
transition: filter 0.6s ease-out !important;
}
/* COVER content exit: fade out + slide up when opening - 0.6s, synced w */
@keyframes av-cover-exit {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-40px); }
}
.cover-section.cover-opened .cover-body,
.cover-section.cover-opened #btn-envelope {
animation: av-cover-exit 0.6s ease-in forwards !important;
}
/* HEADER: exactly brightness 1.00 (natural, no filter) - the "light on" state. Warm glow at top edge only. */
.header-section {
box-shadow:
inset 0 90px 60px -50px rgba(255, 240, 210, 0.16) !important;
}
/* HEADER content: gentle rise-in after the cover clears. Uses a CSS ani */
@keyframes av-header-reveal {
0% { opacity: 0; transform: translateY(28px); }
100% { opacity: 1; transform: translateY(0); }
}
.header-section .header-title-content {
animation: av-header-reveal 0.7s ease-out forwards;
animation-delay: 1.0s;
opacity: 0;
}
/* Scroll-reveal for primary sections (couple/story/gallery/egift) — gentle rise-in.
Mirrors the original invite's entrance feel; toggled by app.js IntersectionObserver. */
@keyframes av-section-rise {
0% { opacity: 0; transform: translateY(26px); }
100% { opacity: 1; transform: translateY(0); }
}
[data-reveal] {
opacity: 0;
}
[data-reveal].in-view {
animation: av-section-rise 0.9s ease-out forwards;
}
/* If JS is unavailable, never hide content */
.no-js [data-reveal] { opacity: 1 !important; }
/* REDUCED MOTION: skip animation, instant reveal */
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; }
[data-reveal].in-view { animation: none !important; }
.cover-section { box-shadow: none !important; }
.cover-section::before { filter: none !important; }
.cover-section.cover-opened {
box-shadow: none !important; opacity: 0 !important; transform: none !important;
transition: none !important;
}
.cover-section.cover-opened::before {
filter: none !important; transition: none !important;
}
.cover-section.cover-opened .cover-body,
.cover-section.cover-opened #btn-envelope {
opacity: 0 !important; animation: none !important;
}
.header-section { box-shadow: none !important; }
.header-content::after {
animation: none !important; opacity: 1 !important; filter: none !important;
}
.image-wrap.has-animate {
animation: none !important; opacity: 1 !important; transform: none !important;
}
}
/* -- 15. FALL BACKGROUND LIGHT SWEEP (Aug 6 2026, v2) -- PURE CSS gradi */
@keyframes av-wash-sweep {
0% { background-position: 50% 100%; }
50% { background-position: 50% 0%; }
100% { background-position: 50% 100%; }
}
.main-app::before {
content: '';
position: fixed;
inset: 0;
background: linear-gradient(to bottom,
transparent 0%,
rgba(212, 175, 55, 0) 30%,
rgba(212, 175, 55, 0.30) 48%,
rgba(212, 175, 55, 0.30) 52%,
rgba(212, 175, 55, 0) 70%,
transparent 100%);
background-size: 100% 200%;
background-position: 50% 100%;
animation: av-wash-sweep 7s ease-in-out infinite;
opacity: .4;
pointer-events: none;
z-index: 0;
}
/* Kill ONLY the theme's photo-flip loop (user-disliked). The one-shot e */
.animate-loop, .image-element.animate-loop { animation: none !important; }
/* -- 14. DESKTOP/TABLET CONTENT WIDENING (user, Aug 7: "content trapped */
/* XL desktop (>=1200px): widen container + all content columns */
@media (min-width: 1200px) {
/* Title/intro columns: col-xl-6 (50%) -> col-xl-8 (67%) */
.couple-section [class*="col-xl-6"],
/* Couple photo columns: col-xl-5 (42%) -> col-xl-6 (50%) */
.couple-section [class*="col-xl-5"],
/* Couple parent description narrower column */
.couple-section [class*="col-xl-4"] {
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
/* LG desktop / tablet landscape (>=992px and <1200px): widen too */
@media (min-width: 992px) and (max-width: 1199px) {
.couple-section [class*="col-lg-8"],
.couple-section [class*="col-lg-6"],
.couple-section [class*="col-lg-5"],
}
/* MD tablet portrait (>=768px and <992px): moderate widening */
@media (min-width: 768px) and (max-width: 991px) {
.couple-section [class*="col-md-10"],
.couple-section [class*="col-md-8"],
}
@media (prefers-reduced-motion: reduce) {
.main-app::before { display: none; }
/* !!? GLOBAL REDUCED MOTION (user, Aug 7: "~35% of adults over 40 have v */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* == 13e. RSVP EVENT SELECTION + DROPDOWN AFFORDANCE (user, Aug 8) == */
/* !!? Checkbox MUST stay invisible everywhere. Theme hides it with */
/* - unselected: transparent outline pill - */
/* !!? "Attend All" is a BUTTON.btn-event-check-label-all, the events are
LABEL.btn-event-check-label. Both must be... */
/* - selected: FOREST GREEN fill + cream text + soft shadow (13f moderni */
/* - hover affordance ONLY on hover-capable devices (mobile sticky hover */
@media (hover: hover) {
}
/* - dropdown affordance: custom chevron on BOTH selects - */
/* !!? Specificity: selects carry .form-control/.form-select (13c1 rule is
(0,2,0)); plain `/* - placeholder-style text until a value is picked (matches input placeholders; both selects are required so :invalid =... */
/* - "Choose Event to Attend:" label: white text was invisible on cream - */
/* -- 13f. MODERN PASS (user, Aug 8: "why does the site look like a 90s */
/* 13f.1 - BUTTON LANGUAGE (v6, user Aug 8): forest green buttons. The t */
.sosmed-wrap a.sosmed, .sosmed-wrap .sosmed i {
color: #FDFBF7 !important;
}
.cover-section .btn, .header-section .btn,
.cover-section .btn:hover, .header-section .btn:hover,
/* 13f.2 - NO GOLD FRAMES: gallery + couple photos get clean edges & soft shadows;
venue cards drop the 1px gold border... */
.gallery-default img, .zoom-gallery-default img, .gallery-section a img {
border: none !important;
border-radius: 8px !important;
box-shadow: 0 4px 18px rgba(74, 64, 58, 0.12) !important;
}
.couple-content img[src*='media'], .couple-wrapper img[src*='media'] {
border: none !important;
border-radius: 16px !important; /* squircle feel - modern, not sticker */
padding: 0 !important;
background-color: transparent !important;
box-shadow: 0 14px 34px rgba(74, 64, 58, 0.18) !important; /* real lift */
}
/* couple content: quiet the floral behind names - localized light scrim */
.couple-section .couple-content, .couple-section .couple-wrapper {
background-color: rgba(253, 251, 247, 0.82) !important;
}
/* 13f.3 - SANS-SERIF DETAILS: dates, times, addresses, venue names, for */
/* countdown: Montserrat for modern digits, but CREAM for contrast on olive */
.cover-section /* venue name: stop shouting - smaller, sans, taupe, regular weight */
/* countdown digits: sans + weight 600 (were heavy bold serif) */
.cover-section /* helper/counter text: muted, not black */
.wishes-section form small, .wishes-section form .text-muted {
color: rgba(74, 64, 58, 0.62) !important;
}
/* 13f.4 - SOFTER TEXTURE: wash the tiled app background 55% toward crea */
.main-app {
background-image:
linear-gradient(rgba(253, 251, 247, 0.55), rgba(253, 251, 247, 0.55)),
url('/assets/lgrf2e.png'),
url('/assets/qsilwr.svg') !important;
}
:root {
--av-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
}