/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** theme color RELATED CSS DEFINITIONS ------------------------------------------------------------------------ **/
:root, html[data-bs-theme="light"] {
--bs-primary: #d6008a;
--bs-primary-rgb: 214, 0, 138;
/* subtle background derived from your magenta */
--bs-primary-bg-subtle: #ffeaf7;
--bs-primary-border-subtle: #f7c4e5;
--bs-body-inverse-bg: #000;
--bs-body-inverse-text: #fff;
}
.btn-outline-primary {
--bs-btn-bg: #fff1fa; /** default rgba(var(--bs-primary-rgb), 0.05); **/
--bs-btn-color: rgba(var(--bs-primary-rgb)); /** default **/
--bs-btn-border-color: rgba(var(--bs-primary-rgb)); /** default **/
--bs-btn-hover-bg: rgba(var(--bs-primary-rgb)); /** when hover **/
--bs-btn-hover-border-color: rgba(var(--bs-primary-rgb)); /** when hover **/
--bs-btn-hover-color: #ffffff; /** when hover **/
--bs-btn-active-bg: rgba(var(--bs-primary-rgb)); /** when clicked **/
--bs-btn-active-border-color: rgba(var(--bs-primary-rgb)); /** when clicked **/
--bs-btn-hover-color: #ffffff; /** when clicked **/
}
.btn-primary {
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.85);
--bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.85);
--bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.75);
--bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.75);
--bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), 0.5);
--bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), 0.5);
}
/** theme color RELATED CSS DEFINITIONS ------------------------------------------------------------------------ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** background color and image RELATED CSS DEFINITIONS --------------------------------------------------------- **/
.bg_color_overlay_light {--bg_opacity: 0.8; background: linear-gradient(90deg,rgba(255, 255, 255, var(--bg_opacity)),rgba(255, 255, 255, var(--bg_opacity)));}
.bg_color_ig {
--bg_opacity: 0.2;
background-image: linear-gradient(135deg,
rgba(81, 91, 212, var(--bg_opacity)),
rgba(129, 52, 175, var(--bg_opacity)),
rgba(221, 42, 123, var(--bg_opacity)),
rgba(245, 133, 41, var(--bg_opacity)),
rgba(254, 218, 119, var(--bg_opacity))
);
}
.bg_img_bubbles {
background: linear-gradient(to bottom,rgba(255, 255, 255,0.4), rgba(255, 255, 255,0.4)),
url(https://styleverse.io/images/bg_4.jpg) center center/cover no-repeat fixed;
}
.bg_img_contact_us {
background: linear-gradient(90deg,rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.5), rgba(255,255,255,0)),
url(https://images.pexels.com/photos/8867431/pexels-photo-8867431.jpeg?auto=compress&cs=tinysrgb&w=600&h=750&dpr=2) center center/cover no-repeat;
}
.bg_img_loading {
background: linear-gradient(to bottom,rgba(255, 255, 255,0.6), rgba(255, 255, 255,0.6)),
url(https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExZzQwbm82bHh0MGplMHVxNGYyZHdjZnIyNjBidWJpdjgzMWdiY3hpMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7VzgMsB6FLCilwS30v/giphy.gif)
center center/cover no-repeat;
}
.bg_wander {
background-size: 200% 200%;
background-attachment: scroll;
background-repeat: no-repeat;
animation: bg_wander var(--bg_move_duration, 30s) ease-in-out infinite;
}
@keyframes bg_wander {
0% { background-position: top left; }
25% { background-position: top right; }
50% { background-position: bottom right; }
75% { background-position: bottom left; }
100% { background-position: top left; }
}
/** background color and image RELATED CSS DEFINITIONS --------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** navbar, header, footer RELATED CSS DEFINITIONS ------------------------------------------------------------- **/
:root { --navbar_height: 40px; }
.navbar_bypass { padding-top:var(--navbar_height); }
.navbar_bypass .navbar_toggle_menu[aria-expanded="true"] > i.fa-solid::before {content: "\f00d";}
.navbar .btn_icon {width:30px;height:30px;}
.navbar .dropdown-menu li:not(:first-child) {
border-top: dashed 1px #666666;
}
/** Below lg (xs, sm, md)  max-width **/
@media (max-width: 991.98px) {
.navbar .nav-item {border-top: dashed 1px #666666;}
.navbar .dropdown-menu {
box-shadow:unset !important;
border:unset !important;
border-radius:unset !important;
background:unset !important;
}
.navbar .dropdown-menu li {border-top: dashed 1px #666666;}
}
.navbar-brand, .navbar-brand:hover {
color:var(--bs-primary);
padding-left:35px;
background: transparent url("https://styleverse.io/images/styleverse_logo_magenta.png") left center/auto 80% no-repeat;
opacity:1;
}
.navbar-brand:hover {opacity:0.8;}
footer .navbar-brand, footer .navbar-brand:hover {padding-left:25px;}
.navbar .nav-item.active {border-bottom:solid 3px rgba(var(--bs-primary-rgb), 0.4);}
.navbar .nav-item.active .nav-link {color:rgba(var(--bs-primary-rgb), 0.4); }
.navbar .dropdown-item.active {background-color:rgba(var(--bs-primary-rgb), 0.05);color:rgba(var(--bs-primary-rgb), 0.4);}
/** Below lg (xs, sm, md)  max-width **/
@media (max-width: 991.98px) {
.navbar .nav-item.active {border-bottom:unset; }
}
.navbar .ui_credit_current {left:2px;top:3px !important;height:15px;width:15px; font-size: 0.6em;}
/** navbar, header, footer RELATED CSS DEFINITIONS ------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** progress_wrapper RELATED CSS DEFINITIONS -------------------------------------------------------------------- **/
.progress_wrapper {
--progress_msg_count: 8;
--progress_msg_height: 20px;
--progress_duration: 20s;
--progress_comet_rgb: 255, 105, 180;
}
.progress_wrapper .progress .progress-bar {
animation:
var(--progress_duration) animate_x_to_100 forwards,
0.5s linear infinite progress-bar-stripes;
}
.progress_wrapper .progress .progress-bar .progress_comet {
color: rgb(var(--progress_comet_rgb));
animation: animate_x_outside calc(var(--progress_duration) * 0.04) linear infinite;
text-shadow:
-6px 0 4px rgba(var(--progress_comet_rgb), 0.95),
-14px 0 8px rgba(var(--progress_comet_rgb), 0.75),
-26px 0 12px rgba(var(--progress_comet_rgb), 0.55),
-40px 0 16px rgba(var(--progress_comet_rgb), 0.38),
-58px 0 20px rgba(var(--progress_comet_rgb), 0.22),
-80px 0 26px rgba(var(--progress_comet_rgb), 0.12),
-108px 0 32px rgba(var(--progress_comet_rgb), 0.06),
-140px 0 40px rgba(var(--progress_comet_rgb), 0.02);
}
.progress_wrapper .progress_msg_wrapper,
.progress_wrapper .progress_msg_wrapper .progress_msg_inner .d-block {
height:var(--progress_msg_height);
line-height:var(--progress_msg_height);
}
.progress_wrapper .progress_msg_wrapper .progress_msg_inner {
height: auto; /* let it grow tall */
animation: animate_y_to_bottom var(--progress_duration) ease-in-out forwards;
}
@keyframes animate_x_to_100 {
0% { width: 0%; }
10% { width: 5%; }
30% { width: 30%; }
60% { width: 80%; }
99% { width: 99%; }
100% { width: 100%; }
}
@keyframes animate_y_to_bottom {
0% { transform: translateY(0%) }
10% { transform: translateY(0%) }
13.5% { transform: translateY(calc(-1 * 100% / var(--progress_msg_count))) }
23.5% { transform: translateY(calc(-1 * 100% / var(--progress_msg_count))) }
27% { transform: translateY(calc(-2 * 100% / var(--progress_msg_count))) }
37% { transform: translateY(calc(-2 * 100% / var(--progress_msg_count))) }
40.5% { transform: translateY(calc(-3 * 100% / var(--progress_msg_count))) }
50.5% { transform: translateY(calc(-3 * 100% / var(--progress_msg_count))) }
54% { transform: translateY(calc(-4 * 100% / var(--progress_msg_count))) }
64% { transform: translateY(calc(-4 * 100% / var(--progress_msg_count))) }
67.5% { transform: translateY(calc(-5 * 100% / var(--progress_msg_count))) }
77.5% { transform: translateY(calc(-5 * 100% / var(--progress_msg_count))) }
81% { transform: translateY(calc(-6 * 100% / var(--progress_msg_count))) }
91% { transform: translateY(calc(-6 * 100% / var(--progress_msg_count))) }
94.5% { transform: translateY(calc(-7 * 100% / var(--progress_msg_count))) }
100% { transform: translateY(calc(-7 * 100% / var(--progress_msg_count))) }
}
@keyframes animate_x_outside {
0% { left: -50%; }
100% { left: 150%; }
}
/** progress_wrapper RELATED CSS DEFINITIONS -------------------------------------------------------------------- **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** motion_item RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
/* =========================================================
Motion Host (pure infrastructure)
========================================================= */
.motion_item {
width:90px;
height:90px;
animation:
var(--mw-anim-shadow, none),
var(--mw-anim-wander, none);
will-change: transform, box-shadow;
}
/* =========================================================
Shadow pulse (standalone ✅)
========================================================= */
.motion_pulse_shadow{
--mw-shadow-duration: 2.8s;
--mw-shadow-color: rgba(var(--bs-primary-rgb),.35);
--mw-shadow-max-blur: 26px;
--mw-shadow-max-spread: 10px;
box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb),0);
--mw-anim-shadow: motion_pulse_shadow var(--mw-shadow-duration) ease-in-out infinite;
}
@keyframes motion_pulse_shadow{
0%,100%{
box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb),0);
}
50%{
box-shadow:
0 0 var(--mw-shadow-max-blur)
var(--mw-shadow-max-spread)
var(--mw-shadow-color);
}
}
/* =========================================================
Wander (standalone ✅, position-agnostic)
========================================================= */
.motion_wander_center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
--mw-wander-duration: 12s;
--mw-anim-wander: motion_wander_center var(--mw-wander-duration) ease-in-out infinite;
}
@keyframes motion_wander_center{
0% { transform: translate(-50%,-50%); }
20% { transform: translate(-55%,-60%); }
40% { transform: translate(-45%,-40%); }
60% { transform: translate(-55%,-60%); }
80% { transform: translate(-45%,-40%); }
100% { transform: translate(-50%,-50%); }
}
/* =========================================================
Blur pulse (image-level ✅)
========================================================= */
.motion_pulse_blur{
--mw-blur-duration: 2.8s;
--mw-blur-min: 1px;
--mw-blur-max: 8px;
filter: blur(var(--mw-blur-min));
animation: motion_pulse_blur var(--mw-blur-duration) ease-in-out infinite;
will-change: filter;
}
@keyframes motion_pulse_blur{
0%,100%{ filter: blur(var(--mw-blur-min)); }
50%{ filter: blur(var(--mw-blur-max)); }
}
/** motion_item RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** carousel RELATED CSS DEFINITIONS ---------------------------------------------------------------------------- **/
.carousel_item_height {height:460px;}
/** Small devices (landscape phones, 576px and up) **/
@media (min-width: 576px) {
.carousel_item_height {height:350px;}
}
.carousel-indicators.carousel_indicators_dots [data-bs-target] {
width: 4px;
height: 4px;
border-radius: 50%;
/* border for visibility on bright images */
border: 1px solid #999999;
/* inactive appearance */
background-color: rgba(255, 255, 255, 0.65);
opacity: 1;
/* spacing between dots */
margin: 0 4px;
/* bigger tap target without changing visible dot size */
padding: 4px;
box-sizing: content-box;
}
/* Active dot: more solid fill */
.carousel-indicators.carousel_indicators_dots .active {
background-color: #fff;
}
/** carousel RELATED CSS DEFINITIONS ---------------------------------------------------------------------------- **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** other ui icons and elements RELATED CSS DEFINITIONS --------------------------------------------------------- **/
.ui_contact_us_select {width:100%;max-width:300px;}
.ui_user_icon {width:60px;height:60px;}
/** other ui icons and elements RELATED CSS DEFINITIONS --------------------------------------------------------- **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** reusable utilities RELATED CSS DEFINITIONS ------------------------------------------------------------------ **/
.fa-stack {height:2em;width:2em;}
.fa-stack.border {height:2.11em;width:2.15em;}
.fa-stack.border-2 {height:2.27em;width:2.31em;}
*:focus { box-shadow: unset !important; }
[v-cloak] { display: none; }
.required::before {content:"*";color:#AA0000;}
.no_caret::after {display: none !important;}
.blur {filter: blur(5px);}
.border_dashed {border-style: dashed !important;}
.fa-flip.fa_flip_vertical {--fa-flip-x: 1; --fa-flip-y: 0;}
.w_17 {width:17%;}
.w_60 {width:60%;}
.w_87 {width:87%;}
.thumbs_up_down_wrapper .btn {width:40px;height:40px}
.text_gradient {
/* Create a horizontal gradient with 4 colors */
background: linear-gradient(90deg, rgba(254, 218, 117, 1),rgba(250, 126, 30, 1),rgba(214, 41, 118, 1),rgba(150, 47, 191, 1), rgba(79, 91, 213, 1));
-webkit-background-clip: text; /* Needed for Safari/iOS */
background-clip: text;
color: transparent; /* Makes the text itself transparent so the background shows through */
/* Optional: improve rendering on some browsers */
-webkit-text-fill-color: transparent;
background-size: 200% 200%; /* Make it larger so movement is visible */
animation: bg_wander 6s linear infinite;
}
.text_shadow { filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));}
.shadow_sm_top {
--bs-box-shadow-sm: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
box-shadow: var(--bs-box-shadow-sm) !important;
}
/** reusable utilities RELATED CSS DEFINITIONS ------------------------------------------------------------------ **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** vuejs_list RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
/* -- Item fade-in -------------------------------------------------------
Every col div gets the fade-in animation on mount.
The grid is unmounted/remounted via grid_visible v-if on search/sort,
guaranteeing every item is a fresh DOM node that triggers the animation.
On paging (load more), items append without unmounting the grid. */
@keyframes animate_paging_fadein {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Only animate items explicitly marked as new — not all col divs */
.paging_item_new {
animation: animate_paging_fadein 0.4s ease both;
}
/* Smooth fade-out while scrolling to top on search/sort.
The transition runs on the grid wrapper div when opacity-0 is applied.
Duration matches roughly half the scroll time so the fade feels
concurrent with the scroll rather than before or after it. */
.paging_grid_fadeout {
transition: opacity 0.4s ease;
}
/* -- Paging controls area -- */
.paging_controls {
min-height: 4rem;
}
/** vuejs_list RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** menu_x_scroll RELATED CSS DEFINITIONS ---------------------------------------------------------------------- **/
/*
* menu_x_scroll
* ─────────────
* Handles two nav patterns with one set of classes:
*
* Pattern A — items only:
*
*
* Pattern B — sticky label + scrollable items:
*
*
* BOOTSTRAP-FIRST:
* All spacing, colour, typography → Bootstrap utilities.
* Only the scroll mechanic and scrollbar hiding are custom below.
*
* DEPENDENCIES: Bootstrap 5.3
*/
/* Outer row — fills navbar width, centres content when it fits */
.menu_x_scroll_wrapper {
display: flex;
align-items: center;
justify-content: center; /* centres when total width fits */
width: 100%;
min-width: 0;
}
/* Optional sticky label — never scrolls, never shrinks */
.menu_x_scroll_label {
flex-shrink: 0;
white-space: nowrap;
}
/* Scrollable strip */
.menu_x_scroll_inner {
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; /* iOS momentum scroll */
min-width: 0;
}
/* Prevent any child (link, button, pill) from wrapping its text */
.menu_x_scroll_inner > * {
white-space: nowrap;
flex-shrink: 0;
}
/* Hide scrollbar visually on all browsers — still scrollable */
.menu_x_scroll_inner::-webkit-scrollbar { display: none; }
.menu_x_scroll_inner { scrollbar-width: none; -ms-overflow-style: none; }
/** menu_x_scroll RELATED CSS DEFINITIONS ---------------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** div_laurel RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
.div_laurel {width:225px;text-align:center;display:inline-block;}
.div_laurel span {
height:80px;
width:calc(100% - 60px);
display: flex;
align-items: center;
justify-content: center;
float:left;
}
.div_laurel::before, .div_laurel::after {
content:"";
height:80px;
width:30px;
background:transparent url(../images/laurel_left.png) right center/15px auto no-repeat;
display:block;
float:left;
}
.div_laurel::after {
background:transparent url(../images/laurel_right.png) left center/15px auto no-repeat;
float:right;
}
/** div_laurel RELATED CSS DEFINITIONS ------------------------------------------------------------------------- **/
/** ============================================================================================================ **/
/** ============================================================================================================ **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/
/** hover effect RELATED CSS DEFINITIONS ------------------------------------------------------------------------ **/
/* Base hover utility */
.card_hover_effect{
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
will-change: transform;
}
/* Lift + shadow on hover */
.card_hover_effect:hover{
transform: translateY(-3px);
box-shadow: var(--bs-box-shadow) !important;
}
/* Optional: only when you also use border-primary */
.card_hover_effect.border-primary{
border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
}
.card_hover_effect.border-primary:hover{
border-color: rgba(var(--bs-primary-rgb), 1) !important;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce){
.card_hover_effect{ transition: none !important; }
.card_hover_effect:hover{ transform: none !important; }
}
/** hover effect RELATED CSS DEFINITIONS ------------------------------------------------------------------------ **/
/** ============================================================================================================= **/
/** ============================================================================================================= **/