/* ---------------------------------------------------------------- Custom CSS Add all your Custom Styled CSS here for New Styles or Overwriting Default Theme Styles for Better Hanlding Updates -----------------------------------------------------------------*/ /* device-xxs */ /* @media (max-width: 479px) { */ /* device-xs */ /* @media (min-width: 480px) and (max-width: 767px) { */ /* device-sm */ /* @media (min-width: 768px) and (max-width: 991px) { */ /* device-md */ /* @media (min-width: 992px) and (max-width: 1199px) { */ /* device-lg */ /* @media (min-width: 1200px) { */ /* body, h1, h2, h3, h4, h5, h6, .table, .cart th { color: var(--body-text-color); } a:hover { color: var(--content-links-hover-color); } #wrapper { min-height: 100%; } */ /* #header #primary-menu ul li.current>a { color: var(--primary-color); } */ /********************************************************/ /* THEMING */ /********************************************************/ body { background-color: var(--body-background-color); color: var(--body-text-color); } .dark.white, .dark.white h1, .dark.white h2, .dark.white h3, .dark.white h4, .dark.white h5, .dark.white h6 { color: #333; } /********************************************************/ /* HEADER */ /********************************************************/ /* We ensure that the header has shadow on all viewports (as removed in smaller ones by default */ @media (max-width: 991.8px) { .sticky-header #header-wrap { box-shadow: 0 0 10px rgb(0 0 0 / 10%); } } /* We set some default padding to have smaller logo and have it animated when updated */ #logo img { padding-top:5px; padding-bottom:5px; -webkit-transition: height .4s ease, padding .4s ease, opacity .3s ease; -o-transition: height .4s ease, padding .4s ease, opacity .3s ease; transition: height .4s ease, padding .4s ease, opacity .3s ease; } /* We ensure language selector links have the right color */ .language-selector ul.dropdown-menu a:hover { color: var(--header-links-hover-color) !important; } /* Dark/light logo swap. v7.4.0 injects these rules dynamically from functions.bundle.js when .logo-dark is detected. The in-tree canvas-740/ port does not include that init, so ship the rules statically. */ .dark #header-wrap:not(.not-dark) #logo [class^="logo-"], .dark .header-row:not(.not-dark) #logo [class^="logo-"] { display: none; } .dark #header-wrap:not(.not-dark) #logo .logo-dark, .dark .header-row:not(.not-dark) #logo .logo-dark { display: flex; } /* We ensure that the mobile menu trigger has the right color */ .primary-menu-trigger .cnvs-hamburger-inner, .primary-menu-trigger .cnvs-hamburger-inner::before, .primary-menu-trigger .cnvs-hamburger-inner::after { background-color: var(--header-links-color); } #header.dark .primary-menu-trigger .cnvs-hamburger-inner, #header.dark .primary-menu-trigger .cnvs-hamburger-inner::before, #header.dark .primary-menu-trigger .cnvs-hamburger-inner::after { background-color: var(--header-dark-links-color); } /* We ensure that header has the right background */ #header:not(.dark), #header:not(.dark) #header-wrap { background-color: var(--header-background-color); border-color: var(--header-border-color)!important; } /* We ensure that header has the right background in dark */ #header.dark, #header.dark #header-wrap { background-color: var(--header-dark-background-color); } /* We ensure header header links, top cart icon and language selector link have the right color */ #header:not(.dark) .primary-menu > ul.menu-container .menu-item:not(:hover):not(.current) .menu-link, #header:not(.dark) #top-cart.header-misc-icon > a, #header:not(.dark) .language-selector .menu-link, #header.dark:has(+ .slider-swiper .swiper-slide-active.white) .primary-menu > ul.menu-container .menu-item:not(:hover):not(.current) .menu-link { color: var(--header-links-color); } #header:not(.dark) .primary-menu > ul.menu-container .menu-item:hover .menu-link, #header:not(.dark) #top-cart.header-misc-icon > a:hover, #header.dark:has(+ .slider-swiper .swiper-slide-active.white) .primary-menu > ul.menu-container .menu-item:hover .menu-link { color: var(--header-links-hover-color); } #header:not(.dark) .primary-menu > ul.menu-container .menu-item.current .menu-link, #header.dark:has(+ .slider-swiper .swiper-slide-active.white) .primary-menu > ul.menu-container .menu-item.current .menu-link { color: var(--header-links-active-color); } /* We ensure header header links, top cart icon and language selector link have the right color */ #header.dark .primary-menu > ul.menu-container .menu-item:not(:hover):not(.current) .menu-link, #header.dark #top-cart.header-misc-icon > a, #header.dark .language-selector .menu-link { color: var(--header-dark-links-color); } #header.dark .primary-menu > ul.menu-container .menu-item:hover .menu-link, #header.dark #top-cart.header-misc-icon > a:hover { color: var(--header-dark-links-hover-color); } #header.dark .primary-menu > ul.menu-container .menu-item.current .menu-link { color: var(--header-dark-links-active-color); } /* We put a reduced padding top and bottom to ensure dropdown is well aligned with menu It is applied on both top cart icon and language selector icon */ .language-selector .menu-link, #top-cart.header-misc-icon { padding: 37px 15px; } /* We add some space on the right of the menu and right of language selector */ #header.full-header .primary-menu > ul.menu-container, #header.full-header .header-misc { border-right:0px; margin-right:50px; } /* For size above shrinked header without menu links */ @media (min-width: 992px) { #header.transparent-header.full-header.dark, #header.transparent-header.full-header.dark #header-wrap, #header.transparent-header.full-header.dark #logo { border-color: transparent; } /* We reduce the padding when header is shrink */ #header.sticky-header.sticky-header-shrink #logo img { padding-top:0px; padding-bottom:0px; } /* We need to ensure that top cart icon and language selector icon shrink as well as the menu */ .sticky-header-shrink .language-selector .menu-link, .sticky-header-shrink #top-cart.header-misc-icon { padding-top: 17px; padding-bottom: 17px; } } @media all and (max-width: 1250px) { /* We reduce the margin on the right of the menu and right of language selector */ #header.full-header .primary-menu > ul.menu-container, #header.full-header .header-misc { margin: 0px 10px; } } @media all and (max-width: 1200px) { /* We reduce logo padding to shrink header */ #logo img { padding-top: 0px; padding-bottom: 0px; } /* We reduce header and logo height padding to shrink header */ /* Specificity matches vendored canvas-740 rule `#header-wrap #logo img { height: var(--cnvs-header-height); }`. */ #header-wrap #logo img { height:80px; } } @media all and (max-width: 1100px) { /* We reduce logo padding to shrink header */ #logo img { padding-top: 0px; padding-bottom: 0px; } /* We reduce header and logo height padding to shrink header */ /* #header, #header-wrap, #header .header-wrap-clone, */ /* Reducing the logo height should be enough as we should have items in the header expected to be reduced and not the header itself */ #header-wrap #logo img { height:60px; } /* We add the border usually added for shrink header */ #header-wrap { border-bottom: 1px solid #EEE; } /* We reduce menu link padding to shrink header */ .menu-link { padding-top: 19px; padding-bottom: 19px; } /* We reduce top cart icon and language selector icon padding to shrink header */ .language-selector .menu-link, #top-cart.header-misc-icon { padding-top: 18px; padding-bottom: 18px; } /* We reduce the padding on the right of the links */ #header.full-header .primary-menu > ul.menu-container { padding-right:0px; } /* We reduce the margin on left and right of language selector + top cart */ #header.full-header .header-misc { margin: 0px; } } @media (max-width: 991px) { /* We ensure that the header is not sticky on mobile view */ /* The webkit transform must be overriden to avoid cart staying on top of the page and possibility to scroll to the right and see the cart when closed */ #header.sticky-header #header-wrap { position: relative; -webkit-transform: none; } /* We reduce margin to have icons closer to mobile menu trigger */ #header.full-header .header-misc { margin-right: 0px; } /* We ensure that header can take the space it needs when menu is opened */ #header, #header-wrap, #header .header-wrap-clone { height:auto; } /* We remove the border bottom of the header because header and wrap have height to auto */ #header { border-bottom:0px; } } @media (max-width: 390px) { /* We reduce the size of the logo */ #header-wrap #logo img { height:50px; } /* We reduce top cart icon and language selector icon padding to shrink header */ .language-selector .menu-link, #top-cart.header-misc-icon { padding: 12px 9px; } #header.full-header #header-wrap > div { padding-left:5px; } /* .container, #header.full-header .container, .container-fullwidth { width: 100% !important; } */ } /* @media (max-width: 991px) { #logo { height:60px; } } @media (max-width: 479px) { #header.full-header .container { width: 361px !important; } // Specific padding for modal content to keep the close button visible .mfp-content { padding-top: 40px; } } */ /********************************************************/ /* PAGE-TITLE */ /********************************************************/ #header.square-logo + #page-title { text-align: center; } /********************************************************/ /* FORM CONTROLS */ /********************************************************/ /* Input focus state: use the site theme's secondary colour instead of Bootstrap's blue (Canvas 7.4 default is a #86b7fe border + rgba(13,110,253,.25) ring). Canvas sets these custom properties on `.form-control`, so a :root bridge would be overridden — we override them at the same level. They resolve --secondary-color, which computeThemeStyle injects per CMS site (see stores/application.ts), so the focus border and ring follow the applied theme. The ring is derived from --secondary-color with color-mix (25% over transparent) rather than rgba(var(--secondary-color-rgb), …) so it always matches the border even for themes that set only --secondary-color and not --secondary-color-rgb. */ .form-control { --cnvs-input-focus-border-color: var(--secondary-color); --cnvs-input-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--secondary-color) 25%, transparent); } /* Placeholder text. Bootstrap 5.3 (shipped with Canvas 7.4) resolves `.form-control::placeholder` to --bs-secondary-color = rgba(33,37,41,.75), i.e. #575a5e on white — nearly as dark as the entered value (#000), so a placeholder reads as a filled field. That is most misleading on the checkout phone input, whose intl-tel-input placeholder is a formatted number ("6 12 34 56 78"). Canvas 6.6.4 styled `.sm-form-control::placeholder` at #999; --form-placeholder-color restores that grey for every input, including the textarea and the intl-tel-input phone field (`.iti__tel-input` carries `.form-control`). */ .form-control::placeholder, .sm-form-control::placeholder { color: var(--form-placeholder-color); opacity: 1; } /********************************************************/ /* FOOTER */ /********************************************************/ #footer #copyrights { background-color: var(--footer-background-color); } #footer { border-top: 5px solid var(--footer-border-color); color: var(--footer-text-color); /* The footer is a dark section, so its contrast colour is white (consumed by Canvas's many contrast-based styles). The `.line` separator itself is fixed with an explicit, fully-visible colour globally (see below) — Canvas 7.4's rgba(var(--cnvs-contrast-rgb), 0.1) stays too faint. */ --cnvs-contrast-rgb: 255, 255, 255; } /* `.line` / `.double-line` separators. Canvas 7.4 draws them with rgba(var(--cnvs-contrast-rgb), 0.1), which is barely visible (0.1 opacity) — faint on the dark footer and on light content alike. Production (Canvas 6.6) used a solid #EEE; restore that so the separator is clearly visible wherever it is used (footer, product details, …). The more specific Canvas `.line` rules only set margins, so this colour override reaches all of them. */ .line, .double-line { border-top-color: #EEE; } #footer .copyright-links { color: var(--footer-text-color); } #footer a { color: var(--footer-links-color); border-bottom-color: var(--footer-links-color); } #footer a.active { color: var(--footer-links-active-color); border-bottom-color: var(--footer-links-active-color); } #footer a:hover { color: var(--footer-links-hover-color); border-bottom-color: var(--footer-links-hover-color); } #footer .copyrights-menu { margin-top:10px; margin-bottom: 0px; } /* Canvas 7.4 dropped the 6.6 `.si-borderless` social-icon modifier (the border is now driven by the --cnvs-socialicon-border CSS var). Re-provide it so the existing markup renders borderless social icons, matching production. The value MUST carry a unit (0px, not 0): the var also feeds --cnvs-socialicon-lineheight via calc(size - border*2), and a unitless 0 makes that calc invalid, which breaks the line-height and makes both hover-slide icons leak into view. */ .social-icon.si-borderless { --cnvs-socialicon-border: 0px; } /* #footer, #footer .container { width:100%; } #footer .container { padding:0px 30px; } @media (max-width: 790px) { #footer #copyrights { padding: 20px 0px; } #footer #copyrights .footer-logo { margin-left: auto; margin-right: auto; } #footer .container { width: 600px; padding:0px 15px; } #copyrights .col_half { width: 100%; text-align: center; margin:0px; } #copyrights .col_half:last-child { display:block; } #footer .copyrights-menu { text-align: center; margin:0px; } } */ /* #body { position:relative; } #body .pageTemplateLoading { position:absolute; top:0px; left:0px; z-index:9999; background: #FFFFFF; filter: alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } .social-icon { background: #FFF; } .si-whatsapp:hover, .si-colored.si-whatsapp { background-color: #25D366 !important; } */ /********************************************************/ /* STICKY FOOTER */ /********************************************************/ html, body, .app, .layout { height: 100%; } .layout { display:flex; flex-direction: column; } .layout > .content { flex: 1 0 auto; display: flex; flex-direction: column; } .layout > .content > .content-wrap { flex: 1 0 auto; } .layout > .content > .content-wrap > .container { height:100% } .layout > footer, .layout > header { flex-shrink: 0; } /********************************************************/ /* SHOP PAGES */ /********************************************************/ /* We applt specific top and bottom padding */ .shop-layout .content .content-wrap, .content-wrap.shop-body, .order .content-wrap { padding-top: 0px; padding-bottom: 0px; } /* We add some margin for shop layout for page-title (used on static pages as conditions generales) */ .shop-layout .content > #page-title { margin-top:50px; } /* We apply specific top and bottom padding + content background color */ .shop-layout .content .content-wrap .container, .content-wrap.shop-body > .container, .order .content-wrap .container { padding-top: 40px; padding-bottom: 20px; background-color: var(--content-background-color); } /* We apply specific margin and padding for shop page content */ @media (max-width: 575.98px) { .shop-menu.content-wrap .container, /* sub-links */ .shop-layout .content .content-wrap .container, /* shop pages content */ .content-wrap.shop-body > .container, /* shop pages content, whatever the layout (S5ter) */ .order .order-retrieve .container { padding-left: 15px!important; padding-right: 15px!important; } } /* We apply specific margin and padding for shop page content */ @media (min-width: 576px) { .shop-menu.content-wrap .container, /* sub-links */ .shop-layout .content .content-wrap .container, /* shop pages content */ .content-wrap.shop-body > .container, /* shop pages content, whatever the layout (S5ter) */ .order .order-retrieve .container { margin-left: 40px; margin-right: 40px; max-width: unset; width: auto; } } /* We apply specific margin and padding for shop page content */ @media (min-width: 1200px) { .shop-menu.content-wrap .container, /* sub-links */ .shop-layout .content .content-wrap .container, /* shop pages content */ .content-wrap.shop-body > .container, /* shop pages content, whatever the layout (S5ter) */ .order .order-retrieve .container { margin-left: 80px; margin-right: 80px; max-width: unset; width: auto; } } /* * Shop pages on a shop's own site (S5ter, docs/SHOP_SITE_ROUTES_PLAN.md): they render in the site's layout * (`Bensadevot`), not in `Shop.vue`. The rules above are keyed on the shop bodies (`.shop-body`) so they hold * there too; this gives them the full-height stretch `.layout > .content` gives the marketplace, through the * extra `#content > .content-wrap` Bensadevot wraps every page in. Scoped with `:has` to the pages holding a * shop body, so the other pages of these sites are untouched. */ .bensadevot-layout > #content:has(> .content-wrap > .shop-body), .bensadevot-layout > #content > .content-wrap:has(> .shop-body) { flex: 1 0 auto; display: flex; flex-direction: column; } .bensadevot-layout > #content > .content-wrap > .content-wrap.shop-body { flex: 1 0 auto; } .bensadevot-layout > #content > .content-wrap > .content-wrap.shop-body > .container { height: 100%; } /********************************************************/ /* PROCESS STEP ON CHECKOUT AND CONFIRMATION PAGES */ /********************************************************/ /* Fixed width to not wrap after the list */ .checkout .row.step > div:first-child, .order-content .row.step > div:first-child { width: auto; padding: 0px; } .row.step .process-steps:not(.timeline) { width:200px; } /* We set specific style for step numbers on checkout and confirmation page */ @media (max-width: 991.98px) { .row.step .process-steps:not(.timeline) { width:auto; } } /* We set specific style for step numbers on checkout and confirmation page */ .row.step .process-steps:not(.timeline) li span { border-color: var(--secondary-color) !important; background-color:var(--secondary-color) !important; color: #FFF; } /* We set specific style for step numbers on checkout and confirmation page */ @media (max-width: 991.98px) { .row.step .process-steps:not(.timeline) li span { display: inline-block; margin-top: 0px; margin-right: 5px!important; vertical-align: bottom; } .row.step .process-steps:not(.timeline) li h5 { display: inline-block; margin-top: 0px; line-height: 52px; vertical-align: bottom; } } .row.step .process-steps:not(.timeline) li { float:none; width:auto; } /********************************************************/ /* CHECKOUT / CONFIRMATION / ORDER COMMON LAYOUT */ /********************************************************/ /* We remove the margins for the whole section */ .checkout .steps, .order-content .steps { background-color: var(--body-background-color); margin-right: -0.75rem; margin-left: -0.75rem; } .checkout .row, .order-content .row { /* We ensure that the width of the section is not bigger than container */ margin-left:0px; margin-right:0px; background-color: var(--content-background-color); } .checkout .row.step, .order-content .row.step { border: 0px; border-bottom: 1px solid rgba(0,0,0,0.075); box-shadow: 0 10px 10px rgba(0,0,0,.1); margin-bottom: 20px; padding-top:20px; } @media (max-width: 991.98px) { .checkout .row.step, .order-content .row.step { display:block; } } /********************************************************/ /* FACEBOOK */ /********************************************************/ .fb_iframe_widget > span > iframe { width:inherit; } /********************************************************/ /* BOOTSTRAP */ /********************************************************/ /* Bootstrap 5.3 (v7.4.0) changed `.table`'s `--bs-table-bg` from `transparent` (5.2, canvas 6.6.4) to `var(--bs-body-bg)`, so `.table > :not(caption) > * > *` now paints every cell with an OPAQUE colour. We deliberately do not bridge --bs-body-bg to the theme (see variables.css), so it stays Bootstrap's #fff and each table punches a white rectangle through the themed surface behind it — visible on the checkout/order recaps, which sit on `.checkout .row` = --content-background-color (e.g. #FFFEF5 on vins-faller). Restoring `transparent` puts the cells back on the surface they sit on, as in 6.6.4. Striped/hover/contextual variants are unaffected: 5.3 draws those through `box-shadow: inset` from --bs-table-bg-type/--bs-table-bg-state, not from --bs-table-bg. */ .table { --bs-table-bg: transparent; } /* We override the rule for table header to have specific border bottom */ /* This is visible in the cart recap table */ .table > :not(:last-child) > :last-child > * { border-bottom: 2px solid #dee2e6; } /* The offcanvas-backdrop is generated by bootstrap but there is no style associated. this is a copy of modal-backdrop */ .offcanvas-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: #000; } .offcanvas-backdrop.fade { opacity: 0; } .offcanvas-backdrop.show { opacity: .5; } /********************************************************/ /* GOOGLE RECAPTCHA */ /********************************************************/ .grecaptcha-badge { z-index:2000; } /********************************************************/ /* VUE COOKIE LAW */ /********************************************************/ .Cookie.Cookie--vigneron { display:block; background: transparent; height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .Cookie.Cookie--vigneron::before { position: fixed; width: 100%; height: 100%; top:0px; content:''; display: block; background-color: #000; opacity: 0.5; z-index: -1; } .Cookie.Cookie--vigneron .Cookie--modal { margin: 1.75rem auto!important; display: flex; align-items: center; min-height: calc(100% - 3.5rem)!important; max-width:800px; } .Cookie.Cookie--vigneron .Cookie--modal--content { display: flex; flex-direction: column; width: 100%; background-color: var(--content-background-color); border: 1px solid var(--primary-color); border-radius: .3rem; } .Cookie.Cookie--vigneron .Cookie__content { padding: 50px; font-size: 0.975rem; } .Cookie.Cookie--vigneron .Cookie__buttons { align-self: center; padding: 0px 50px 50px 50px ; } .Cookie.Cookie--vigneron-bottom { background-color: var(--content-background-color); color: #232323; padding: 1.250em; border-top:2px solid var(--primary-color); display: block; } .Cookie.Cookie--vigneron-bottom .Cookie--modal--content { display: flex; justify-content: space-between; align-items: baseline; } .Cookie.Cookie--vigneron-bottom .Cookie__content { font-size: 0.975rem; } /********************************************************/ /* PRETTY CHECKBOX VUE */ /********************************************************/ /* Used in radio on checkout page to set default style */ .pretty .state label { text-indent: 0px; font-size: inherit; font-weight: inherit; font-family: inherit; text-transform: inherit; letter-spacing: inherit; } /********************************************************/ /* SPINNER ANIMATION */ /********************************************************/ .spinner { position: absolute; height: 100%; z-index: 10; padding: inherit; top: 0px; text-align: center; } .spinner > div { width: 18px; height: 18px; background-color: var(--primary-color); border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } /********************************************************/ /* FORMS */ /********************************************************/ /* .invalid-feedback { font-size: 100%; } */ /******************************************************* SELECTS (native .form-select and SearchSelect) *******************************************************/ /* Same focus as the text inputs (see .form-control above): the site theme's secondary colour instead of Bootstrap's blue — for the native