528 lines
13 KiB
CSS
528 lines
13 KiB
CSS
|
|
:root {
|
|
--brand-gold: #C8963E;
|
|
--brand-espresso: #2B1E16;
|
|
--brand-sand: #F6F0E6;
|
|
--brand-white: #FFFFFF;
|
|
--brand-text: #201711;
|
|
--brand-muted: #7A6A5C;
|
|
--brand-border: #E5D9C8;
|
|
--brand-hover: #A87A2B;
|
|
--brand-success: #3E6B52;
|
|
--brand-error: #A94442;
|
|
|
|
--bg-main: #F7F3EC;
|
|
--bg-card: #FFFFFF;
|
|
--bg-subtle: #EFE8DC;
|
|
--bg-accent-section: #EADFCF;
|
|
--text-primary: #231B15;
|
|
--text-secondary: #6B5E52;
|
|
--text-muted: #948577;
|
|
--accent-gold: #C8963E;
|
|
--accent-gold-hover: #A87A2B;
|
|
--accent-gold-light: rgba(200, 150, 62, 0.12);
|
|
--brand-dark: #2B1E16;
|
|
--border-color: 137,159,135; /* #E2D5C3 */
|
|
--hero-gradient: linear-gradient(135deg, rgba(200, 150, 62, 0.18) 0%, rgba(247, 243, 236, 0.96) 42%, rgba(255, 255, 255, 0.92) 100%);
|
|
--font-sans: 'Plus Jakarta Sans', sans-serif;
|
|
--font-serif: 'Cinzel', serif;
|
|
}
|
|
|
|
.text-brand-dark {
|
|
color: var(--brand-dark);
|
|
}
|
|
|
|
.text-gold {
|
|
color: var(--brand-gold);
|
|
}
|
|
|
|
.font-serif {
|
|
font-family: var(--font-serif);
|
|
}
|
|
|
|
.btn-gold {
|
|
color: var(--brand-white);
|
|
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--accent-gold) 100%);
|
|
border: 1px solid var(--brand-gold);
|
|
border-radius: 999px;
|
|
box-shadow: 0 12px 24px rgba(200, 150, 62, 0.18);
|
|
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
|
|
}
|
|
|
|
.btn-gold:hover,
|
|
.btn-gold:focus,
|
|
.btn-gold:active {
|
|
color: var(--brand-white);
|
|
background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand-gold) 100%);
|
|
border-color: var(--brand-hover);
|
|
box-shadow: 0 16px 28px rgba(168, 122, 43, 0.22);
|
|
}
|
|
|
|
.bg-card-custom {
|
|
background-color: var(--bg-card);
|
|
border: 1px solid var(--brand-border);
|
|
border-radius: 1.5rem;
|
|
box-shadow: 0 18px 42px rgba(43, 30, 22, 0.04);
|
|
}
|
|
|
|
.bg-brand-dark {
|
|
background-color: var(--brand-dark);
|
|
}
|
|
|
|
.bg-brand-sand {
|
|
background-color: var(--brand-sand);
|
|
}
|
|
|
|
/* BASE */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
#main {
|
|
min-height: 380px;
|
|
}
|
|
|
|
.product-action .tooltip-text {
|
|
padding: 5px 10px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
/* COOKIES STYLE */
|
|
.accept_cookies {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 30px 20px;
|
|
position: fixed;
|
|
z-index: 99999;
|
|
box-shadow: rgba(0, 0, 0, .2) 0 2px 14px 0;
|
|
display: block;
|
|
bottom: 0;
|
|
background: linear-gradient(to bottom, #ffffff 0%,rgb(255, 255, 255) 100%);
|
|
opacity: 0.85;
|
|
}
|
|
.accept_cookies .popup-content-wrapper{
|
|
max-width: 1170px;
|
|
margin: 0 auto;
|
|
}
|
|
.accept_cookies .popup-container{
|
|
display: flex;
|
|
}
|
|
.accept_cookies .popup-container .logo {
|
|
background: url(/img/assets/logo.png?v=1) no-repeat center / 75%;
|
|
width: 20%;
|
|
}
|
|
.accept_cookies .popup-container .text {
|
|
text-align: left;
|
|
width: 60%;
|
|
}
|
|
.accept_cookies .popup-container .text h4{
|
|
font-size: 14px !important;
|
|
margin-bottom: 0;
|
|
}
|
|
.accept_cookies .popup-container .text p{
|
|
font-size: 12px;
|
|
color: #878787;
|
|
line-height: 16px;
|
|
}
|
|
.accept_cookies .popup-container .text a {
|
|
color: rgb(0, 95, 253);
|
|
}
|
|
.accept_cookies .popup-container .cbtn {
|
|
text-align: center;
|
|
width: 30%;
|
|
}
|
|
.accept_cookies .popup-container .cbtn a {
|
|
border: 1px solid !important;
|
|
background-color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 2px;
|
|
font-weight: bold;
|
|
opacity: 0.75;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
line-height: 36px;
|
|
margin-right: 6px;
|
|
font-size: 12px;
|
|
|
|
transition: opacity 0.25s ease;
|
|
}
|
|
.accept_cookies .popup-container .cbtn a:hover{
|
|
opacity: 1;
|
|
}
|
|
.accept_cookies .popup-container .cbtn a#accept-all-cookies {
|
|
background-color: #000000;
|
|
color: #FFF;
|
|
}
|
|
.accept_cookies .popup-container li {
|
|
margin-right: 15px;
|
|
}
|
|
.accept_cookies .popup-container .disabled {
|
|
-webkit-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
|
|
.chk {
|
|
cursor: pointer;
|
|
font-size: 1px;
|
|
background: rgb(239, 239, 239);
|
|
border: 1px solid rgb(60, 94, 57);
|
|
display: inline-block;
|
|
height: 15px;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
outline: 0 none;
|
|
width: 15px;
|
|
position: relative;
|
|
vertical-align: top;
|
|
box-sizing: content-box;
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
-webkit-box-shadow: 1px 1px 0 rgba(217, 217, 217, 0.1);
|
|
-moz-box-shadow: 1px 1px 0 rgba(217, 217, 217, 0.1);
|
|
-o-box-shadow: 1px 1px 0 rgba(217, 217, 217, 0.1);
|
|
box-shadow: 1px 1px 0 rgba(217, 217, 217, 0.1);
|
|
}
|
|
.chk > div {
|
|
width: 11px;
|
|
height: 11px;
|
|
margin: auto;
|
|
border-radius: 1px;
|
|
top: 2px;
|
|
position: relative;
|
|
left: 0;
|
|
background: transparent;
|
|
transition: background 0.2s ease;
|
|
z-index: 3;
|
|
}
|
|
.chk.chked > div, .chk.chked:hover > div {
|
|
background: #c49c1c;
|
|
}
|
|
|
|
#cookie-widget .chk:hover > div{
|
|
background: #c49c1c;
|
|
}
|
|
#cookie-widget.chk.chked > div,
|
|
#cookie-widget .chk.chked:hover > div { background: #c49c1c; }
|
|
#cookie-widget .checkbox > .chk::before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #FFF;
|
|
display: block;
|
|
content: "";
|
|
z-index: 2;
|
|
}
|
|
#cookie-widget .checkbox > .chk::after {
|
|
content: "";
|
|
width: 15px;
|
|
height: 15px;
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition: all .20s ease-in-out;
|
|
background-color: rgba(70, 70, 70, 0.1);
|
|
top: calc((100% - 15px) / 2);
|
|
left: calc((100% - 15px) / 2);
|
|
z-index: 1;
|
|
}
|
|
#cookie-widget .checkbox > .chk.chked::after {
|
|
background-color: rgba(38, 84, 160, 0.2);
|
|
}
|
|
#cookie-widget .checkbox > .chk:hover::after,
|
|
#cookie-widget .checkbox > .chk.click-animation::after{
|
|
opacity: 1;
|
|
width: 35px;
|
|
height: 35px;
|
|
top: calc((100% - 35px) / 2);
|
|
left: calc((100% - 35px) / 2);
|
|
}
|
|
.cs-checkbox-list {
|
|
margin: 15px 30px 10px;
|
|
}
|
|
|
|
.agree_to > *{
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
}
|
|
.agree_to a{
|
|
margin: 0 !important;
|
|
color: #3c5e39;
|
|
}
|
|
.agree_to a:hover{
|
|
text-decoration: underline!important;
|
|
}
|
|
.rchk > div {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
margin-top: 2px;
|
|
}
|
|
.rchk > label {
|
|
width: calc(100% - 40px);
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
}
|
|
.rchk > label a {
|
|
display: inline !important;
|
|
}
|
|
|
|
.chk:hover > div {
|
|
background: rgba(60, 94, 57, 0.6);
|
|
}
|
|
.chk.chked > div { background: rgb(60, 94, 57); }
|
|
|
|
|
|
|
|
|
|
/* Form input validation */
|
|
.validate {
|
|
position: relative;
|
|
}
|
|
.frm_input div.validate {
|
|
width: 100%;
|
|
}
|
|
.frm_input label {
|
|
color: #545454;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
}
|
|
input.valid,
|
|
.v-ok > div > input,
|
|
.v-ok > div > textarea,
|
|
.v-ok > input,
|
|
.v-ok > textarea {
|
|
background: white url("/img/pub/svg/chk_ok.svg?v=2") no-repeat scroll right center / 18px auto;
|
|
}
|
|
input.invalid,
|
|
.v-error > div > input,
|
|
.v-error > div > textarea,
|
|
.v-error > input,
|
|
.v-error > textarea {
|
|
background: white url("/img/pub/svg/chk_err.svg?v=1") no-repeat scroll right center / 18px auto;
|
|
}
|
|
.v-error input { border-color: red; }
|
|
|
|
/* ERROR BUBBLE */
|
|
.v-error .errMsg {
|
|
opacity: 0;
|
|
background: #ffeb80;
|
|
position: absolute;
|
|
bottom: -8px;
|
|
font-size: 12px;
|
|
line-height: 22px;
|
|
padding: 2px 15px;
|
|
color: rgb(71, 71, 71);
|
|
white-space: nowrap;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
|
|
transition: opacity 0.12s ease-in-out, bottom 0.12s ease-in-out;
|
|
top: unset;
|
|
}
|
|
.v-error .errMsg::after{
|
|
content: "";
|
|
margin: 0 auto;
|
|
border-left: 4px solid rgb(255, 235, 128);
|
|
border-top: 4px solid rgb(255, 235, 128);
|
|
border-bottom: 4px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
height: 0;
|
|
width: 0;
|
|
display: block;
|
|
transform: rotate(45deg);
|
|
top: -4px;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.v-error:hover .errMsg,
|
|
.v-error:focus-within .errMsg {
|
|
opacity: 1;
|
|
bottom: -35px;
|
|
}
|
|
|
|
/* ==========================================
|
|
CUSTOM CHECKBOX COLORS (BY ATTRIBUTE ID)
|
|
========================================== */
|
|
/* 3: Zils / Blue / Синий */
|
|
.cust-checkbox-label.color-3 .cust-check, .color-3 {
|
|
background-color: #0000ff !important;
|
|
}
|
|
/* 101: Melns / Black / Черный */
|
|
.cust-checkbox-label.color-101 .cust-check, .color-101 {
|
|
background-color: #000000 !important;
|
|
}
|
|
/* 102: Balts / White / Белый */
|
|
.cust-checkbox-label.color-102 .cust-check, .color-102 {
|
|
background-color: #ffffff !important;
|
|
border: 1px solid #d1d5db !important;
|
|
}
|
|
/* 103: Pelēks / Grey / Серый */
|
|
.cust-checkbox-label.color-103 .cust-check, .color-103 {
|
|
background-color: #808080 !important;
|
|
}
|
|
/* 104: Tumši zils / Navy blue / Темно-синий */
|
|
.cust-checkbox-label.color-104 .cust-check, .color-104 {
|
|
background-color: #001f3f !important;
|
|
}
|
|
/* 105: Gaiši zils / Light blue / Голубой */
|
|
.cust-checkbox-label.color-105 .cust-check, .color-105 {
|
|
background-color: #87ceeb !important;
|
|
}
|
|
/* 106: Sarkans / Red / Красный */
|
|
.cust-checkbox-label.color-106 .cust-check, .color-106 {
|
|
background-color: #e53935 !important;
|
|
}
|
|
/* 107: Zaļš / Green / Зеленый */
|
|
.cust-checkbox-label.color-107 .cust-check, .color-107 {
|
|
background-color: #2e7d32 !important;
|
|
}
|
|
/* 108: Haki / Khaki / Хаки */
|
|
.cust-checkbox-label.color-108 .cust-check, .color-108 {
|
|
background-color: #6b705c !important;
|
|
}
|
|
/* 109: Bēšs / Beige / Бежевый */
|
|
.cust-checkbox-label.color-109 .cust-check, .color-109 {
|
|
background-color: #f5f5dc !important;
|
|
border: 1px solid #e0e0e0 !important;
|
|
}
|
|
/* 110: Brūns / Brown / Коричневый */
|
|
.cust-checkbox-label.color-110 .cust-check, .color-110 {
|
|
background-color: #795548 !important;
|
|
}
|
|
/* 111: Dzeltens / Yellow / Желтый */
|
|
.cust-checkbox-label.color-111 .cust-check, .color-111 {
|
|
background-color: #fdd835 !important;
|
|
}
|
|
/* 112: Rozā / Pink / Розовый */
|
|
.cust-checkbox-label.color-112 .cust-check, .color-112 {
|
|
background-color: #ff80ab !important;
|
|
}
|
|
/* 113: Violets / Purple / Фиолетовый */
|
|
.cust-checkbox-label.color-113 .cust-check, .color-113 {
|
|
background-color: #8e24aa !important;
|
|
}
|
|
/* 114: Oranžs / Orange / Оранжевый */
|
|
.cust-checkbox-label.color-114 .cust-check, .color-114 {
|
|
background-color: #ff9800 !important;
|
|
}
|
|
/* 115: Zelta / Gold / Золотой */
|
|
.cust-checkbox-label.color-115 .cust-check, .color-115 {
|
|
background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) !important;
|
|
}
|
|
/* 116: Sudraba / Silver / Серебряный */
|
|
.cust-checkbox-label.color-116 .cust-check, .color-116 {
|
|
background: linear-gradient(135deg, #e0e0e0, #ffffff, #b0b0b0, #f5f5f5, #9e9e9e) !important;
|
|
}
|
|
/* 117: Daudzkrāsains / Multicolor / Разноцветный */
|
|
.cust-checkbox-label.color-117 .cust-check, .color-117 {
|
|
background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff) !important;
|
|
}
|
|
|
|
|
|
/* Media queries */
|
|
@media (max-width: 1199.98px) {
|
|
html,
|
|
body {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
body.mobile-menu-open {
|
|
overflow: hidden;
|
|
}
|
|
.mobile-menu {
|
|
left: 0;
|
|
width: calc(100vw - 24px);
|
|
max-width: min(350px, calc(100vw - 24px));
|
|
visibility: hidden;
|
|
transform: translateX(calc(-100% - 24px));
|
|
-webkit-transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
|
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
|
|
}
|
|
.mobile-menu.active {
|
|
visibility: visible;
|
|
transform: translateX(0);
|
|
}
|
|
.mobile-menu .mobilemenu-account a {
|
|
min-height: 56px;
|
|
}
|
|
.mobile-menu .menu-btn {
|
|
align-items: stretch;
|
|
}
|
|
.mobile-menu .menu-btn button {
|
|
background-color: transparent;
|
|
-webkit-transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
|
|
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
|
|
}
|
|
.mobilemenu-content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overscroll-behavior: contain;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.mobilemenu-content .main-wrap ul.menu-ul li.menu-li .menu-btn button[aria-expanded="true"] i {
|
|
transform: rotate(45deg);
|
|
}
|
|
.mobile-menu,
|
|
.cart-drawer {
|
|
max-width: calc(100vw - 16px);
|
|
}
|
|
.slider-content,
|
|
.breadcrumb-area,
|
|
.main-header,
|
|
#main,
|
|
footer {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
.account-page,
|
|
.account-page .ap-detail,
|
|
.account-page .ap-detail-info,
|
|
.account-page .acc-info,
|
|
.account-page .wish-table,
|
|
.account-page .od-wrap {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
.account-page .acc-title,
|
|
.account-page #address-book-section .extra-bg .d-flex.justify-content-between,
|
|
.account-page .ap-profile a {
|
|
gap: 12px;
|
|
}
|
|
.account-page .acc-title {
|
|
align-items: flex-start !important;
|
|
flex-direction: column;
|
|
}
|
|
.account-page .btn-style,
|
|
.account-page input,
|
|
.account-page select,
|
|
.account-page textarea {
|
|
max-width: 100%;
|
|
}
|
|
.account-page .field-row,
|
|
.account-page .btn-row,
|
|
.account-page .row-mtm,
|
|
.account-page .row-mtm15,
|
|
.account-page .row-mtm20,
|
|
.account-page .row-mtm30 {
|
|
--bs-gutter-x: 16px;
|
|
}
|
|
.account-page .od-wrap .col-6:last-child,
|
|
.account-page .od-wrap .col-lg-3:last-child,
|
|
.account-page .od-wrap .col-lg-6:last-child {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
} |