/*
Theme Name: Until Old Age Theme
Theme URI: https://rubahbesi.com
Author: Rubahbesi Team
Author URI: https://rubahbesi.com
Description: ...
Requires at least: 6.1
Tested up tp: 6.2
Requires PHP: 8
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: uoa
Tags: wedding, online-catalogue
*/



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');



:root {

    /** Basic Color Palette **/
    --cp-red: #C5172E;   
    --cp-blue: #224db7;
    --cp-text-dark: #22303e;
    --cp-text-light: #f5f5f9;

    /** Romantic & Soft Color Palette **/
    --cp-blush-pink:#FADADD;
    --cp-dusty-rose:#D8A7B1;
    --cp-puce:#CC8A97;
    --cp-champagne:#F7E7CE;
    --cp-sage-green:#B2C8BA;
    --cp-ivory:#FFFFF0;

    /** Elegant & Timeless Color Palette **/
    --cp-navy-blue: #2C3E50;
    --cp-gold:#D4AF37;
    --cp-cream:#FFFDD0;
    --cp-charcoal:#36454F;


    --cp-ink-gild:#74583E;
    --cp-butter-creme:#FFF7EE;
    --cp-rustic-warm:#E5BDA7;
    --cp-fleet-grey:#5E6572;

    --cp-rosy-brown:#BC8F8F;

    --ff-prime: 'Playfair Display', serif;
    --ff-second: 'Schibsted Grotesk', sans-serif;

}


::placeholder { color:#ccc !important; }










.redline * { outline: orangered solid 1px; }


body { 
    font-family: 'Schibsted Grotesk', sans-serif; 
    color:var(--cp-fleet-grey); 
    font-size:16px;
    /* background:linear-gradient(0deg, var(--cp-butter-creme) 0%, var(--cp-champagne) 100%);  */
}

h1, h2, h3, h4, h5, h6 { color:var(--cp-text-dark); }

a { text-decoration:none; color:var(--cp-puce);
    transition: color 0.3s ease-in-out;
    &:hover { color:var(--cp-dusty-rose); }
    &:focus { color:var(--cp-dusty-rose); }
}

.txt-dusty-rose { color:var(--cp-dusty-rose); }

/** Utilities **/
label > sup { color: var(--cp-red); }
button.btn { overflow:hidden !important; }

hr { opacity:.1; }

button .htmx-indicator { 
    z-index:-1000; overflow:hidden; position:absolute; transition: right 0.5s ease-in-out;
    &.htmx-request { 
        z-index:unset; position:relative; right:unset; opacity:.7 !important; 
    }
}

/* Bootstrap */
.accordion-button:not(.collapsed) {
    background:linear-gradient(145deg, var(--cp-butter-creme) 0%, var(--cp-blush-pink) 100%);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); font-weight:bold;
}

/* Hide default text while loading */
.htmx-indicator.htmx-request + .htmx-default { display:none; }

.header-gap { padding-top:70px; }



.txt-prime { font-family:var(--ff-prime); }
.txt-gold { color:var(--cp-gold); }
.txt-fam-prime { font-family:var(--ff-prime); }



/** Bootstrap Overrides **/
.btn-primary {
    background-color: var(--cp-puce) !important;
    border-color: var(--cp-puce) !important;
    &:hover {
        background-color: var(--cp-dusty-rose) !important;
        border-color: var(--cp-dusty-rose) !important;
    }
}
.btn-outline-primary {
    color: var(--cp-puce) !important;
    border-color: var(--cp-puce) !important;
    &:hover {
        background-color: var(--cp-dusty-rose) !important;
        border-color: var(--cp-dusty-rose) !important;
    }
}

.form-control,
.form-select {
    &:focus {
        box-shadow:0 0 0 .25rem rgba(255, 171, 210, 0.15); border-color: var(--cp-dusty-rose);
    }
}

.bg-floras {
    position:relative; background:none;
    &::after {
        content:'';background-image: url(images/floras.png); background-size:cover; background-color:var(--cp-butter-creme); opacity:.1; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;
    }
}

.bg-layer-floras {
    background-image: url(images/3463569.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center; opacity:.04; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;
    & + .container { position:relative; z-index:2; }
}





.creamy-bg { background:linear-gradient(180deg, var(--cp-butter-creme) 0%, #ffffff 20%, var(--cp-butter-creme) 100%); }

.floral-bg .bg-layer { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-image: url(images/florality.png); opacity:.2; background-repeat:no-repeat; background-size:cover; background-position:center center; }






/** Header Area **/

.web-header {
    a, .nav-link { color:var(--cp-text-dark); }
}

.logo {
    & > img { max-height:30px; display:inline-block; }
}


.home-hero { min-height:55vh; background:linear-gradient(135deg, #fae4e7 0%, #cf99a4 100%); }

.ai-photos { position:relative; background:linear-gradient(135deg, var(--cp-fleet-grey) 0%, var(--cp-charcoal) 100%);
    & > .bg-layer { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-image: url(images/ai-photos/ai_no_3.jpg); opacity:.15; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    & > .container { position:relative; z-index:2; }
}

.pro-photos { position:relative; background:linear-gradient(135deg, var(--cp-navy-blue) 0%, var(--cp-ink-gild) 100%);
    & > .bg-layer { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-image: url(images/ai-photos/ai_04.jpg); opacity:.15; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    & > .container { position:relative; z-index:2; }
}

.bg-bloom { position:relative;
    & > .bg-layer { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-image: url(images/5226644.jpg); opacity:.1; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    & > .container { position:relative; z-index:2; }
}

.home-features { background:linear-gradient(135deg, var(--cp-butter-creme) 0%, var(--cp-champagne) 100%); }
.home-pricing { background:linear-gradient(145deg, var(--cp-butter-creme) 0%, var(--cp-blush-pink) 100%); }

.slash-price span { 
    position:relative; padding-left:2em; padding-right:2em;
    &::before { 
        content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(images/slash.svg); background-size:contain; background-repeat:no-repeat; background-position:center center; opacity:.5;
    }
}




.ornament { background:url(images/ai-photos/ornament-01.png); background-size:contain; background-repeat:no-repeat; background-position:center center; position:absolute; bottom:-16px; left:50%; width:100%; transform:translateX(-50%); height:110px; z-index:1; }

.ornament-small { background:url(images/ai-photos/ornament-02.png); background-size:contain; background-repeat:no-repeat; width:180px; height:60px; z-index:1; position:relative; left:calc(50% - 90px); transform-origin:50% 50%; top:0; 

    &.top { background-image:url(images/ai-photos/ornament-03.png); bottom:0; background-position:center bottom; }

} 


.ornament-4 { background:url(images/ai-photos/ornament-04-a.png); background-size:contain; background-repeat:no-repeat; width:180px; height:60px; z-index:1; position:relative; left:calc(50% - 90px); transform-origin:50% 50%; top:0; background-position:center center;
    &.bottom { background-image:url(images/ai-photos/ornament-04-b.png); bottom:0; }
}




.inv-wrapper { position:relative; 
    & > .line-art { position:fixed; top:0; left:0; z-index:1; width:100%; height:100%; background-image: url(images/temp-logo/line-art.png); opacity:.05; background-repeat:no-repeat; background-size:contain; background-position:center top; background-color:transparent; }
    & > .container { position:relative; z-index:2; }

    .btn {  transition: opacity .2s ease-in-out;
        &:hover { opacity:.8 !important; }
    }
}



/* INVITATION COVER */
.inv-wrapper { position:relative; overflow:hidden; font-size:14px;
    .bounding-cover { position:fixed; top:0; left:0; z-index:10; }
}

.bounding { min-height:100vh; background:var(--cp-butter-creme); color:var(--cp-text-dark); position:relative;
    & *:disabled, * .disabled, :disabled + label { opacity:.5; }
    .form-control, .form-select { &:focus { box-shadow:0 0 0 .25rem rgba(192, 181, 34, 0.1); border-color: var(--cp-gold); } }

}

.butter_cream--gradient { background:linear-gradient(0deg, var(--cp-butter-creme) 50%, #FFF7EE 70%, #FFF7EE00 100%); }

.b-hero { 
    min-height:100vh; display:flex; justify-content:center; align-items:end; 
    .inner { min-height:60vh; background:linear-gradient(0deg, var(--cp-butter-creme) 10%, #FFF7EE70 70%, #FFF7EE00 100%); display:flex; justify-content:center; align-items:center; }
}
.b-profile { position:relative;
    background:linear-gradient(180deg, var(--cp-butter-creme) 0%, #ffffff 50%, var(--cp-butter-creme) 100%);
    & > .bg-layer { position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-image: url(images/5226644.jpg); opacity:.1; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    & > .profile-block { position:relative; z-index:2; }


}
.b-rundown { position:relative; 
    .inner { background:linear-gradient(0deg, #f9f9f9 0%, #fff 70%, #fff 100%); position:relative; }
    .pin_left { position:absolute; height:50px; width:6px; top:-33px; left:2em; z-index:5; background:#D4AF3797; border-radius:1em;
        &::before { content:""; position:absolute; top:-3px; left:-3px; width:12px; height:12px; background:var(--cp-text-dark); border-radius:100%; z-index:-1; opacity:.6; }
        &::after { content:""; position:absolute; bottom:-3px; left:-3px; width:12px; height:12px; background:var(--cp-text-dark); border-radius:100%; z-index:-1; opacity:.6; }
    }
    .pin_right { position:absolute; height:50px; width:6px; top:-33px; right:2em; z-index:5; background:#D4AF3797; border-radius:1em;
        &::before { content:""; position:absolute; top:-3px; left:-3px; width:12px; height:12px; background:var(--cp-text-dark); border-radius:100%; z-index:-1; opacity:.6; }
        &::after { content:""; position:absolute; bottom:-3px; left:-3px; width:12px; height:12px; background:var(--cp-text-dark); border-radius:100%; z-index:-1; opacity:.6; }
    }
}

.tfam-playfair {
    h1, h2, h3, h4, h5 { font-family: 'Playfair Display', serif; }
    a { color:var(--cp-ink-gild); }
}




.b-quote-2 { position:relative;
    .quote-caption { position:absolute; width:100%; left:0; bottom:-1px; background:linear-gradient(0deg, var(--cp-butter-creme) 20%, #FFF7EE40 70%, #FFF7EE00 100%); }
}


.countdown {
    small { color:var(--cp-fleet-grey); }
}

.credit-card-block { background:linear-gradient(180deg, #fff 20%, #e0e7ef 100%); border:1px solid #fff; }



/** Invitation - Comments **/
.comment-list {
    .card { background:none;
        .card-header { background:none; }
        .card-body { background:#fff; border-radius:.5em; position:relative; margin-top:.35em;
            &::after { 
                content:""; position:absolute; top:-20px; left:3em; width:0; height:0; border:10px solid transparent; border-bottom-color: #fff; 
            }
        }
    }
} 
.comment-pagination {
    ul.pagination { border:0; 
        li.page-item { 
            .page-link { border:0; margin-left:2px; margin-right:2px; color:#aaa; box-shadow:0 0 5px 0 rgba(0, 0, 0, .1); border-radius:.3em; }
            &.active .page-link { background:#aaa; color:#fff; }
        }
    }
}



.inv-footer-gap { height:70px; width:100%; position:relative; }
.inv-footer-menu { height:70px; z-index:1200; bottom:-2px; 
    a { transition: all .2s ease-in-out; 
        &:hover { opacity:.7; transform: scale(.98); }
    }
}






/* ANIMAITON */

.soft-swing { transform-origin:top center; animation: softSwing 1s ease-in-out infinite alternate; }
.soft-swing-js {
  /* Create pivot point at top center of the image */
  transform-origin: top center;
  display: inline-block;
  vertical-align: top;
  /* We'll set animation properties via JS for natural variation */
}

/* Base animation that will be customized by JavaScript */
.swing-animation {
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

@keyframes softSwing {
  0% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  100% {
    transform: rotate(1deg);
  }
}


@keyframes ultraGentleSway {
  0% { transform: rotate(-0.5deg) translateY(0.02px); }
  25% { transform: rotate(0.1deg) translateY(-0.02px); }
  50% { transform: rotate(0.3deg) translateY(0.02px); }
  75% { transform: rotate(0.1deg) translateY(-0.02px); }
  100% { transform: rotate(-0.5deg) translateY(0.02px); }
}

.css-gentle-sway {
  transform-origin:center center;
  animation: ultraGentleSway 3s ease-in infinite alternate;
  animation-delay: calc(var(--delay, 0) * 1s);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.css-gentle-sway-alt {
  transform-origin:center center;
  animation: ultraGentleSway 4s ease-in infinite alternate;
  animation-delay: calc(var(--delay, 0) * 1s);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}


@media all and (max-width: 768px) {
    .scale-down-mobile {
        max-width:30px;
        & img { max-width:100%; }
    }
}