/*
Theme Name: ASCENDO Trading
Theme URI: https://ascendo.trading/
Author: ASCENDO Trading
Author URI: https://ascendo.trading/
Description:
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0.8
Text Domain: ascendo-block-theme-v1-0-6
Tags: block-patterns, full-site-editing
*/
/* Smoot Scroll */
html {
scroll-behavior: smooth;
font-size: 16px;
background-color: var(--wp--preset--color--background-light-gray);
box-sizing: border-box;
}
/* To make sure the form fields (input and textarea) are sized with border-box to prevent these fields to get wider than their container */
input, textarea {
box-sizing: border-box;
}
/* To set the background color to the main document content to overide the html background color. This allows to edit with the proper bg color visible */
body {
background-color: var(--wp--preset--color--background-white);
}
/* To give some space by default between the page main content and the footer */
footer {
margin-top: 48px;
}
/* Reduced motion prefs */
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@font-face {
font-family: 'Inter Variable';
src: url(./assets/fonts/Inter-VariableFont.woff2) format('woff2');
font-weight: 100 900; /* variable font weight range */
font-style: normal;
font-display: swap;
}
/* Navigation Block Breakpoint. Credit: https://wpdocs.io/ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none !important;
}
/* Change the default bottom margin for all heading to 0.5em. Using em allows for the margin to adjust according to the heading size that is dynamically adjusted according to the screen width. With this setting, the spacing looks good on the custom product posts */
.wp-block-heading {
margin-bottom: 0.5em !important;
}
/* Section to style the FAQ section to adjust the spacing between each heading and paragraph */
.faq .wp-block-heading {
margin-top: 1.6em !important;
margin-bottom: 0em !important;
}
.faq p {
margin-top: 0.4em !important;
}
@media (min-width: 800px) {
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
display: none !important;
;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: block !important;
}
}
/* Slightly increase the vertical spacing between the label and the input field */
label {
line-height: 1.7em;
}
input, textarea, .wc-blocks-components-select__select, .select2-selection {
border-radius: 8px !important;
border-color: #c7c7c7 !important;
border-width: 1px;
border-style: solid;
font-size: 1rem !important;
font-family: inherit;
color: inherit !important;
padding:calc(.667em + 2px) !important;
}
input:focus, textarea:focus, select:focus, .select2-selection:focus, .select2-selection--single:focus, .select2-results__option:focus, .select2-results__option--highlighted:focus {
border-color: var(--wp--preset--color--background-light-green) !important;
border-width: 1px;
outline: 1px solid var(--wp--preset--color--background-light-green);
box-shadow: none !important;
font-size: 1rem;
}
.wp-block-button__link:hover, .wpcf7-submit:hover {
opacity: 1 !important;
filter: brightness(0.95); /* to make the button background darker when hover it */
}
/* Adjust the contact form 7 input field to take the full width of the parent container */
.wpcf7-form-control {
width: 100%;
max-width: inherit;
}
/* Style the contact form 7 submit button to the same style as all other buttons. Also style the My Account Downloads buttons the same. */
.wpcf7-submit, .woocommerce-MyAccount-downloads-file {
border-radius: 2em !important;
border-color: var(--wp--preset--color--background-light-green) !important;
background: var(--wp--preset--color--background-light-green);
color: var(--wp--preset--color--text-heading);
font-weight: 600;
text-decoration: none !important;
line-height: 1.5em !important;
padding: 0.75em 1.5em !important;
}
/* Fixes for Core Weirdnress whereby auto padding is applied that can drive you a litle bit nuts - better to add your own when and where you need it! */
.has-global-padding>.alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid))> :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]), p, h1, h2, h3, h4, h5, h6, ul, ol) {
padding-right: 0 !important;
padding-left: 0 !important;
}
/* Stop core margin top on groups and others */
.wp-block-group,
.wp-block-columns,
.wp-block-cover {
/* margin-block-start: 0; */
}
/* Set underlines and adjust the distance */
a {
text-decoration: underline !important;
text-underline-offset: 0.3em;
}
/*
a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button, .wp-element-button, .wc-block-components-button) {
text-decoration: underline !important;
}
*/
/* For styling footer navigation section */
footer nav {
line-height: 1;
}
footer nav h2 {
font-size: var(--wp--preset--font-size--large);
margin-bottom: 24px !important;
}
footer nav h3 {
font-size: var(--wp--preset--font-size--regular);
margin-block-start: 24px !important;
}
footer nav ul {
list-style-type: none;
padding-inline-start: 0;
margin-block-start: 12px !important;
}
footer nav ul li {
margin-top: 12px;
}
/* Don't set underlines inside the footer nav menu */
footer nav a {
text-decoration: none !important;
}
/* Dont show the underline for the button classes */
.wp-element-button, .wc-block-components-button {
text-decoration: none !important;
line-height: 1.5em !important;
padding: 0.75em 1.5em !important;
}
/* Search Button default: color */
.wp-block-search__button.wp-element-button {
color: var(--wp--preset--color--base);
}
/* Button hover */
.wp-block-button__link {
transition: .3s;
display: flex;
gap: 10px;
color: var(--wp--preset--color--text-heading) !important;
}
.wp-block-button__link:hover {
opacity: .7;
}
/* When the cart is empty, adding space between the text "Your cart is currently empty!"
and the button "Start shopping */
.wc-block-mini-cart__empty-cart-wrapper .wp-block-button {
margin-top: 24px;
}
/* ------- Hide the Page Title in the Editor - it can get anoying! ------- */
/* .editor-editor-canvas__post-title-wrapper.edit-post-visual-editor__post-title-wrapper.has-global-padding h1 {
display: none;
} */
.max-width-500px {
max-width: 500px;
}
.max-width-550px {
max-width: 550px;
}
.max-width-600px {
max-width: 600px;
}
.max-width-650px {
max-width: 650px;
}
/* Add SVG icon after links that open in new tab */
a[target="_blank"]::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.25em;
vertical-align: middle;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* To make the input quantity text box smaller on the add to cart section */
.wp-block-woocommerce-add-to-cart-form .quantity .qty {
width:1em !important;
min-width:10px;
}
/* Change the width of the - and + button to adjust the quantity before adding to cart button
to 48 px to be compliant with Google recommendation to get good score on PageSpeed Insights */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
min-width: 48px;
}
/* Fix for WooCommerce mini cart quantity selector border issue */
/* Make sure the ::after covers the full width including buttons */
.wc-block-components-quantity-selector::after {
border-radius: 8px;
}
/* Fix the width issue caused by font-family: inherit */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
width: 20px !important; /* Set a fixed width for the input */
min-width: 20px !important;
min-height: 48px;
font-weight: inherit !important;
}
/* Ensure the cart quantity selector container doesn't take full width */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
width: auto !important;
/* max-width: none !important; */
}
/* Fix the layout so remove item link appears below quantity selector */
.wc-block-cart-item__quantity {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Add more spacing between the quantity input box and the add to cart button */
/* not used since switching to the add to cart with options
div.wc-block-add-to-cart-form.wc-block-add-to-cart-form--stepper form.cart div.wc-block-components-quantity-selector.quantity {
margin-right: 16px;
}
*/
/* Add more spacing between the quantity input box and the add to cart button with the new Add to Cart with Option section */
div.wp-block-add-to-cart-with-options-quantity-selector, div.wc-block-add-to-cart-with-options__quantity-selector, div.wp-block-woocommerce-add-to-cart-with-options-quantity-selector {
margin-right: var(--wp--preset--spacing--40) !important;
}
.wc-block-cart-item__remove-link {
text-decoration: none !important;
color: var(--wp--preset--color--text-link) !important;
}
/* Custom layout for image - text column */
/* On mobile screens, change the order to display the text first followed by the image */
@media (max-width: 781px) {
/* Target the column containing an image */
.wp-block-columns .wp-block-column:has(.wp-block-image) {
order: 2;
}
/* Target the column containing text/paragraphs */
.wp-block-columns .wp-block-column:has(.image-text-is-text) {
order: 1;
}
/* Make the home logo smaller on small screen */
.custom-logo-link {
max-width: 200px;
}
}
/* increase the gap which is the distance between 2 columns */
.wp-block-columns {
gap: 24px;
}
/* To hide the product image on the Cart and mini Cart page */
.wc-block-cart-item__image {
display: none;
}
.wc-block-cart-items__header-image {
width: 0px;
display: none;
}
/* To fix the order of the Product name and line total on the mini cart or on mobile */
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
grid-column-start: 1 !important;
}
/* to hide the product image on the checkout page */
.wc-block-components-order-summary-item__image img {
display: none;
}
/* Fix the quantity indication box on the checkout page. With this mod, it is position on the left
of the Product name but vertically centered between the product name and unit price line */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
position: relative;
transform: none;
}
/* Change the WooCommerce table text alignment to the left */
.woocommerce-table, .woocommerce-orders-table {
text-align: left;
}
/* Customization for the My account / My orders page to make it look nicer than the default layout */
.woocommerce-MyAccount-orders {
width: 100%;
}
tr.woocommerce-orders-table__row {
padding-bottom: 2rem;
}
tr.woocommerce-orders-table__row > * {
line-height: 2rem;
}
.woocommerce-orders-table__cell-order-actions {
padding-bottom: 10px;
padding-top: 10px;
}
/* To remove the * beside the labels for required field */
.woocommerce form .required {
display: none;
}
/* All select2 classes are used on the checkout page for the Country and State drop down selection fields. */
.select2-container {
width: 100%;
}
.select2-container .select2-selection--single {
height: auto !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
line-height: normal !important;
box-sizing: border-box;
}
.select2-container .select2-selection--single .select2-selection__arrow {
position: absolute !important;
top: 2px !important;
right: .5em !important;
height: 100% !important;
width: 16px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
border: none;
display: block;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hldnJvbi1kb3duIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=) no-repeat !important;
background-size: 16px;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 0;
margin: -8px 0 0;
}
.select2-container.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-color: #c7c7c7;
}
.select2-results__options {
list-style: none;
margin: 0;
padding: 0;
}
.select2-results__option {
margin: 0;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: var(--wp--preset--color--background-light-green) !important;
color: var(--wp--preset--color--text-heading) !important;
}
/* This is to present the blue border set by the default browser configuration that goes on top of the intended WooCommerce notification box */
.wc-block-components-notice-banner {
outline-color: transparent;
outline-width: 0px;
}
/* On the checkout page, create a single column for the billing detail and shipping */
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
float: none;
width: 100% !important;
}
/* To hide the table header for the Your order review table */
.woocommerce-checkout-review-order-table thead {
display: none;
}
/* Left align first column (product names) */
.woocommerce-checkout-review-order-table td:first-child,
.woocommerce-checkout-review-order-table th:first-child {
text-align: left;
width: auto;
}
/* Right align second column (prices/totals) */
.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
text-align: right;
width: 20%;
min-width: 100px;
}
/* Checkout page layout to set the billing and Order summary on 2 columns on wide screen */
@media (min-width: 800px) {
#customer_details {
float: left;
width: 60%;
margin-right: 4%;
}
#order_review {
float: right;
width: 36%;
}
/* Clear floats after these sections */
#customer_details:after,
#order_review:after {
content: "";
display: table;
clear: both;
}
}
/* Make checkout form First and Last name fields stack on smaller screens */
@media (max-width: 768px) {
/* Override WooCommerce's default floating behavior */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
float: none !important;
width: 100% !important;
margin-right: 0 !important;
}
}
/* To set the Place order button on the checkout page to always 100% width */
.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
float: none !important;
width: 100%;
}
/* To disable scrolling of the page in the background when a modal window is open */
body.lmb-open {
overflow: hidden;
height: 100vh; /* optional, helps prevent scroll jumping */
}
/* Remove the default outline around the close button on the modal window when navigating with keyboard */
.wp-block-cloudcatch-light-modal-block__close:focus {
outline: none; /* removes the blue ring */
/* Optionally add a custom focus style, e.g.:
box-shadow: 0 0 0 3px rgba(174, 47, 213, 0.5); /* a subtle blue shadow */
}
/* For modal window with the video class, move the close button above the actual window and remove the padding so the content fit the window */
.wp-block-cloudcatch-light-modal-block.video{
max-height: calc(100svh - 112px);
overflow: visible;
padding: 0;
}
/* For modal window with the video class, move the close button above the actual window */
.video > .wp-block-cloudcatch-light-modal-block__close {
top: -48px;
background-color: var(--wp--preset--color--background-light-green);
}
/* To change the background color and make it blurry when a modal window is open */
.wp-block-cloudcatch-light-modal-block__wrapper {
background-color: rgba(0, 0, 0, .6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* For aligning the Table of content heading with the list items and set the font size smaller than regular H2 */
.simpletoc-title {
padding-left: 16px;
font-size: 1.1rem;
}
/* For styling the Table of Content */
/* Removing the bullet from the list and reducing the indentation */
.simpletoc-list,
.simpletoc-list ul,
.simpletoc-list ol {
list-style-type: none;
margin-left: 1.5em;
padding-left: 0;
}
/* To give a little more space on the left for displaying the background */
.simpletoc-list a {
display: block;
text-decoration: none !important;
padding-left: 1em;
}
/* To style the active heading as a light button */
.simpletoc-list .active > a {
border-radius: 2em !important;
border-color: var(--wp--preset--color--background-light-gray) !important;
background: var(--wp--preset--color--background-light-gray);
color: var(--wp--preset--color--text-heading);
font-weight: 600;
padding-top: 2px;
padding-bottom: 2px;
}
/* To style the link under the mouse as a regular button */
.simpletoc-list a:hover {
border-radius: 2em !important;
border-color: var(--wp--preset--color--background-light-green) !important;
background: var(--wp--preset--color--background-light-green);
color: var(--wp--preset--color--text-heading);
}
/* Adding the WooCommerce font get the stars working fine for my "Add to cart" pattern. */
@font-face {
font-family: WooCommerce;
src: url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff2") format("woff2"),
url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"),
url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype");
font-weight: 400;
font-style: normal
}
@font-face {
font-family: star;
src: url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff2") format("woff2"),
url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"),
url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
/* Section to style the custom customer reviews */
.reviews-container {
position: relative;
background: var(--wp--preset--color--background-light-green);
overflow: hidden;
border-radius: 24px;
box-sizing: border-box;
}
/* To style the div that contains all reviews */
.reviews {
position: relative;
z-index: 1;
color: #000;
padding: 2rem;
}
/* To style individual review */
.review {
background-color: rgba(16, 43, 0, 0.96);
border-radius: 24px;
margin-bottom: 24px;
color: white;
padding: 24px 24px;
}
.review-meta {
color: var(--wp--preset--color--background-light-green);
margin-bottom: 0.5em;
}
/* Style for the wrapper containing the password label and lost password link */
.woocommerce-form-login .password-field-header {
display: flex; /* Makes it a flex container */
justify-content: space-between; /* Pushes items to opposite ends (label left, link right) */
align-items: center; /* Vertically aligns them in the middle if they have different heights */
width: 100%; /* Ensure it takes full available width */
}
/* Style for the 'Lost your password?' link paragraph when it's inline */
.woocommerce-form-login .password-field-header .lost_password_inline {
margin: 0; /* Remove default paragraph margins */
padding: 0;
font-size: 0.9em; /* Make the link slightly smaller if desired to fit better */
white-space: nowrap; /* Prevent the link from wrapping to multiple lines */
}
/* To ensure the password input field takes full width */
.woocommerce-form-login .woocommerce-Input--text.input-text {
width: 100%;
}
/* To ensure the password input box fit the form width allowed */
.woocommerce-form-login .password-input input {
box-sizing: border-box;
}
/* To give additional space below the Sign in form and limit it's width */
.woocommerce-form-login {
max-width: 600px;
margin: 48px auto; /* centers horizontally */
}
.woocommerce-form-login .form-row-first {
float: none !important;
width: 100% !important;
}
.woocommerce-form-login .form-row-last {
float: none !important;
width: 100% !important;
}
/* This is required to get the proper spacing with the My account/ My profile page above the "Public display name (shown on reviews)" field */
.form-row-last::after {
padding-bottom: 16px;
}
div[data-block-name="woocommerce/classic-shortcode"] .woocommerce-form-login {
margin: 24px 0;
}
/* Section to style the vertical timeline that is used to show the Release Notes */
.cool-vertical-timeline-body {
--ctlb-date-fontsize: 20px;
--ctlb-date-font-weight: 700;
--ctlb-date-color: var(--wp--preset--color--background-light-green);
--ctlb-icon-size: 24px;
--ctlb-sub-head-font-size: 16px;
--ctlb-sub-head-font-weight: 400;
--ctlb-line-color: var(--wp--preset--color--background-light-green);
--ctlb-icon-color: var(--wp--preset--color--background-light-green);
--ctlb-icon-bg: var(--wp--preset--color--background-light-green);
--ctlb-story-border-color: var(--wp--preset--color--background-light-green);
}
.cool-vertical-timeline-body.one-sided.left:not(.ctlb-wrapper) {
--ctlb-time-width: 20%;
}
.cool-vertical-timeline-body {
max-width: 100%;
}
.cool-vertical-timeline-body .timeline-content .story-details {
background: var(--wp--preset--color--background-light-green);
border-radius: 24px;
box-shadow: none;
}
.cool-vertical-timeline-body .timeline-content .story-details .story-content {
margin-top: 16px;
margin-bottom: 16px;
}
.cool-vertical-timeline-body .timeline-content .story-details ul {
margin-block-start: 16px;
margin-block-end: 16px;
padding-inline-start: 20px;
}
.cool-vertical-timeline-body .timeline-content .story-details ul li {
margin-bottom: 0.8em;
}
.cool-vertical-timeline-body.alternating-sided .timeline-content .position-left .story-details:before,
.cool-vertical-timeline-body.both-sided .timeline-content .position-left .story-details:before,
.cool-vertical-timeline-body.one-sided.right .timeline-content .story-details:before {
top: 32px;
}
.cool-vertical-timeline-body.alternating-sided .timeline-content .position-right .story-details:before,
.cool-vertical-timeline-body.both-sided .timeline-content .position-right .story-details:before,
.cool-vertical-timeline-body.one-sided.left .timeline-content .story-details:before {
top: 32px;
}
.cool-vertical-timeline-body .timeline-content .story-details p:not(.timeline-block_desc, .ctlb-block-desc) {
font-size: 16px;
}
.cool-vertical-timeline-body .timeline-content .story-time {
margin-top: 38px;
}
.cool-vertical-timeline-body.one-sided.left .timeline-content .timeline-block-detail {
width: 100%;
padding-right: 48px;
}
.cool-vertical-timeline-body .timeline-content.icon-false .timeline-block-icon {
top: 45px;
}
@media(max-width:767px) {
.cool-vertical-timeline-body.ctlb-wrapper.one-sided.left .timeline-content.icon-false .timeline-block-icon {
top: 141px;
}
.cool-vertical-timeline-body.one-sided.left .timeline-content .timeline-block-detail,
.cool-vertical-timeline-body.one-sided.left .timeline-content.icon-true .timeline-block-detail {
padding: 0 24px 0 40px !important;
}
}
/* Section to replace the text on the WooCommerce mini cart footer sliding drawer
The original text is: Shipping, taxes, and discounts calculated at checkout.
The modified text is: Applicable taxes are calculated during checkout.
*/
.wc-block-components-totals-item__description {
font-size: 0 !important;
}
.wc-block-components-totals-item__description::after {
content: "Applicable taxes are calculated during checkout." !important;
font-size: 14px !important;
display: block;
color: inherit;
}
/* Section to modify the cart layout on both the cart page and the mini-cart slide out */
/* Add " per computer" after the price */
.wc-block-cart-item__prices .wc-block-components-product-price__value::after {
content: " per computer";
font-weight: normal;
}
/* To add "Quantity: " before the quantity selector box icon */
.wc-block-cart-item__quantity {
display: block !important;
}
/* Add "Quantity: " before the quantity selector box icon and set the height to 48px to comply with recommendations for mobile */
.wc-block-cart-item__quantity::before {
content: "Quantity: ";
font-weight: normal;
float: left;
margin-right: 8px;
line-height: 48px; /* Match the height of your quantity selector */
}
.wc-block-components-quantity-selector {
display: inline-flex !important;
align-items: center;
vertical-align: top;
margin-right: 40px;
}
.wc-block-cart-item__remove-link {
line-height: 48px !important;
}
/* Ensure all quantity selector elements are properly aligned */
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__button {
height: 48px; /* Adjust this to match your actual button height */
line-height: 48px;
vertical-align: middle;
margin: 0;
padding: 0 8px;
}
/* Setting for the Mini Cart slide pannel. */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
padding-left: 2px !important;
padding-right: 2px !important;
}
/* To set a spacing between the quantity block input and the add to cart button on the new Add to Cart with option section */
.quantity .wc-block-components-quantity-selector {
margin-right: 100px !important;
}
/* Setting for the quantity selector (in between the - and + icon to adjust the quantity on the new Add to Cart with Option section */
.wc-block-components-quantity-selector > input {
width: 20px !important; /* Set a fixed width for the input */
min-width: 30px !important;
min-height: 48px;
text-align: center;
padding: 0px !important;
border: none;
font-weight: inherit !important;
}
/* Make the main site header sticky */
header {
position: sticky;
top: 0;
z-index: 999;
transition: all 0.7s ease;
background-color: #fff;
}
/* Remove sticky header on checkout page */
body.woocommerce-checkout header {
position: static;
}
/* Transition when changing the vertical height of the menu */
header .menu .menu__inner .menu__item {
transition: all 0.7s ease;
}
/* Shrink the vertical height of the menu when the user scroll down */
header .menu .menu__inner .menu__item {
padding-top: 15px;
padding-bottom: 15px;
}
/* Shrink the vertical height of the menu when the user scroll down */
header.scrolled .menu .menu__inner .menu__item {
padding-top: 0;
padding-bottom: 0;
}
/* Updated animations for right-side slide */
@-webkit-keyframes slideLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@keyframes slideLeft {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@-webkit-keyframes slideRight {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
@keyframes slideRight {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
/* Style the button "Add to cart" in the header. The goal is the get a small button 24px height */
.header-container .wp-block-button {
margin-right: 8px !important;
}
.header-container .wp-block-button .wp-block-button__link {
font-size: 12px !important;
line-height: 16px !important;
padding: 4px 12px !important;
}
/* Set proper styling for the "Add to Cart" button inside the site main navigation header */
.header-add-to-cart {
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
pointer-events: none;
}
/* To Hide the "add to cart" button inside the site main navigation header. This button get visible once the page scrolled past the "add-to-cart-cta" HTML ANCHOR */
.header-add-to-cart.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Mobile Navigation Reordering to place the hamburger menu as the most right item */
header .header-container {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
}
/* Mobile Navigation Reordering to place the hamburger menu as the most right item */
@media (max-width: 766px) {
.logo {
display: block;
order: 1;
padding-left: 8px;
/*width: 200px;*/
max-width: min(200px, calc(100vw - 150px));
}
.icon {
display: block;
order: 2;
margin-left: auto;
}
.navbar {
display: block;
order: 3;
margin-left: 0.5em; /* icon next to navigation */
}
}
/* Mobile Navigation Reordering to place the hamburger menu as the most right item */
@media (min-width: 767px) {
.logo {
order: 1;
margin-left: 0 !important;
margin-right: 0 !important;
}
.navbar {
order: 2;
margin-left: auto;
margin-right: auto;
/* This will center the navigation in the flex container */
}
.icon {
order: 3;
}
/* To properly set the vertical position of the 'Add to cart' button in the nav bar in the desktop version */
.header-add-to-cart.visible {
transform: translateY(0);
}
}
/* On mobile, remove the padding left - right to get the burger menu perfectly aligned to the edge of the screen */
@media (max-width: 766px) {
header .has-global-padding {
padding-left: 0;
padding-right: 0;
}
}
/* To made the mini cart button 48px size. */
.wc-block-mini-cart__button {
padding: 12px;;
}
/* To made the Sign in button 48px size. */
.wp-block-woocommerce-customer-account a {
padding: 12px;
margin: 0;
}
.icon-text-wrapper {
display: inline-flex;
align-items: center;
}
.icon-text-wrapper p, .icon-text-wrapper figure {
margin-inline-end: 0px !important;
min-width: 46px;
}
/* remove the default bottom margin from the figure for the modal window */
.wp-block-cloudcatch-light-modal-block__content > figure.wp-block-video {
margin: 0;
}
/* To style the radio buttons on the Contact Form 7 and on the checkout page. The goal is to create a nicer look than the default browser radio button image
/* 1. Hide the default radio button only on the fronend by using body:not(.wp-admin) to not impact the backend */
body:not(.wp-admin) input[type="radio"] {
position: absolute;
opacity: 0;
margin: 0;
width: 1em;
height: 1em;
}
/* 2. Create the custom radio button appearance on the label */
input[type="radio"] + label::before, .wpcf7-list-item-label::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
border-radius: 50%;
border: 2px solid #288531;
vertical-align: middle;
transition: 120ms transform ease-in-out;
}
/* 3. Style the "checked" state */
input[type="radio"]:checked + label::before, input[type="radio"]:checked + .wpcf7-list-item-label::before {
background-color: #288531;
box-shadow: inset 0 0 0 3px white; /* Creates the inner white dot */
}
/* Optional: improve user experience, change the cursor when hovering the radio button or label */
label:has(input[type="radio"]) , input[type="radio"] + label {
cursor: pointer;
}
/* To style the payment selection on the checkout page */
ul.wc_payment_methods {
list-style: none; /* removes bullets */
padding-left: 0; /* optionally remove default left padding */
margin-left: 0; /* optionally reset margin */
}
/* To change the size of the PayPal image (logo) on the payment selection and vertically align the image in the middle with the text label */
.payment_method_paypal label img {
vertical-align: middle !important;
max-height: 50px !important;
margin-left: 16px !important;
margin-right: 16px !important;
}
/*
* Forces the License Type meta data (dt and dd) to display on a single line
* in the cart and checkout order summary.
*/
.woocommerce-checkout-review-order dl.variation dt,
.woocommerce-checkout-review-order dl.variation dd,
.woocommerce-cart-form dl.variation dt,
.woocommerce-cart-form dl.variation dd {
display: inline; /* Make dt and dd flow on the same line */
margin: 0 !important; /* Remove any default margins */
padding: 0 !important;
font-size: 0.75em;
}
/* Fix for the p tag often added inside the dd element, which causes a line break */
.woocommerce-checkout-review-order dl.variation dd p,
.woocommerce-cart-form dl.variation dd p {
display: inline; /* Make the paragraph content flow inline */
margin: 0; /* Remove any default paragraph margins */
}
/* On the Checkout page, realign the price of the item line to be aligned with the product title. This became required after having added the "License type:" info */
.woocommerce-checkout-review-order .product-total {
vertical-align: baseline;
}
/* On the Checkout page, reduce the spacing above the "License Type:" text and increase the margin below it. */
.woocommerce-checkout-review-order dl.variation {
margin-top: 0.25em;
margin-bottom: 2em;
}
/*
* Create checkmark bullet characters for bullet point lists.
* To use it: In Wordpress:
* - Select the list block
* - From Advanced, Additional CSS Class(es) add: custom-bullet-list
* - Add the bullet style css class: checkmark or cross
*/
/* Target the overall unordered list (the
element) and apply our custom padding to prevent to rely on browser default values */
ul {
padding-inline-start: 40px;
padding-left: 40px;
}
/* Target our custom bullet list */
.custom-bullet-list li {
list-style: none; /* Remove default bullets */
text-indent: -20px; /* This moves the li content left. Use a value that aligns with the checkmark's placement. */
}
.custom-bullet-list.checkmark li::before {
content: "✓"; /* Checkmark character */
margin-right: 6px; /* Space between checkmark and text */
}
.custom-bullet-list.cross li::before {
content: "\2718"; /* Checkmark character */
margin-right: 8px; /* Space between checkmark and text */
}
/*
Target the direct children of your specific Group block
to restore default block spacing (margin-block-start).
*/
:root :where(.wp-block-group-is-layout-constrained) > * {
/* Set the desired block spacing */
margin-block-start: max(1em, 1rem) !important;
}
/*
The constrained layout CSS also typically removes the margin
from the first child. We often need to override that as well.
*/
:root :where(.wp-block-group-is-layout-constrained) > :first-child {
margin-block-start: 0 !important;
}
/* Used to set the minimum size of the cards for user guide categories on the user guide page like Improve your chart annotations. */
.mw-270 {
min-width: 270px;
}
/* not used I think */
.mw-350 {
min-width: 350px;
}
/**
* Section to customize layout of the My account pages
*/
/* Hide the default sidebar navigation on dashboard only */
.woocommerce-account .woocommerce-MyAccount-navigation {
display: none;
}
/* Make the content full width when navigation is hidden */
.woocommerce-account .woocommerce-MyAccount-content {
width: 100%;
float: none;
}
/* Make the content of the my-account dashboard page narrower to show 2 cards per row. */
.dashboard-wrapper {
max-width: 940px;
margin: 4rem auto;
}
/* Card container */
.woocommerce-account-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-top: 24px;
}
/* Individual card styling */
.account-card {
background: var(--wp--preset--color--background-light-gray);
padding: 24px;
border-radius: 24px;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
text-decoration: none !important;
}
/* Animate the card when the mouse hover it */
.account-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.account-card h3 {
margin: 0 0 10px 0;
font-size: 24px;
}
.account-card p {
margin: 0;
color: var(--wp--preset--color--text-link);
line-height: 1.5;
}
/* Style the table that list all available downloads under the My downloads page */
.woocommerce-table--order-downloads {
width: 100%;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
/* Remove default WooCommerce table borders */
.shop_table_responsive {
border-collapse: collapse;
}
.shop_table_responsive thead th, .shop_table_responsive tbody td {
padding: 20px 8px !important;
border-bottom: 1px solid var(--wp--preset--color--background-light-gray);
}
/* Add download icon before button text */
.woocommerce-MyAccount-downloads-file::before {
content: "⬇";
font-size: 16px;
line-height: 1;
flex-shrink: 0;
margin-right: 8px;
}
/* Table body rows */
.shop_table_responsive tbody tr {
transition: all 0.2s ease;
background-color: #ffffff;
}
/* Alternating row backgrounds - subtle stripe effect */
.shop_table_responsive tbody tr:nth-child(even) {
background-color: #fafafa;
}
/* Row hover effect */
.shop_table_responsive tbody tr:hover {
background-color: var(--wp--preset--color--background-light-gray);
}
.woocommerce-MyAccount-downloads-file {
display: inline-flex;
align-items: center;
line-height: 1.2 !important; /* Better for multi-line */
cursor: pointer;
/* Remove: white-space: nowrap; */
text-align: center; /* Center multi-line text */
max-width: 100%; /* Prevent overflow */
}
.woocommerce-MyAccount-downloads-file:hover {
transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/***
* Section to style the breadcrumbs under all My account pages
*/
.ascendo-breadcrumbs {
padding: 0 0 1rem;;
margin: 1rem 0;
/*border-bottom: 1px solid #e5e5e5;*/
}
.breadcrumb-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: var(--wp--preset--font-size--medium);
align-items: center;
}
.breadcrumb-list li {
display: flex;
align-items: center;
}
/* Separator between breadcrumb items */
.breadcrumb-list li:not(:last-child)::after {
content: "›";
margin-left: 10px;
}
/* Links */
.breadcrumb-list a {
color: var(--wp--preset--color--text-link);
transition: color 0.2s ease;
}
.breadcrumb-list a:hover {
color: var(--wp--preset--color--text-heading);
}
/* Current page (not clickable) */
.breadcrumb-list .current {
color: var(--wp--preset--color--text-heading);
font-weight: 700;
font-size: var(--wp--preset--font-size--x-large);
}
.woocommerce-MyAccount-content .wc-item-meta, .woocommerce-MyAccount-content .wc-item-meta p {
display: inline;
font-size: 0.75rem;
}
.woocommerce-MyAccount-content .wc-item-meta li {
list-style: none;
}
.woocommerce-MyAccount-content .wc-item-meta li {
margin-top: 0.5em;
margin-bottom: 1em;
}
.woocommerce-MyAccount-content .wc-item-meta .wc-item-meta-label {
font-weight: 400 !important;
}
.woocommerce-MyAccount-content .product-total {
vertical-align: baseline;
}
.woocommerce-MyAccount-content .order-actions--heading {
padding: 24px 0;
}
.woocommerce-MyAccount-content .order_details * {
text-align: left;
}
.woocommerce-order-details .order-again {
padding: 16px 0;
}
.woocommerce-order-details .order-again a {
background-color: var(--wp--preset--color--background-light-gray);
}
.woocommerce-MyAccount-content .woocommerce-customer-details address {
font-style: normal;
}
.woocommerce-MyAccount-content h2 {
margin-top: 2em;
}
/* Make the Subscription order details table with the first column that describe each element in bold and add : to make it easier to understand and consistent with other WooCommerce order tables. */
.shop_table.subscription_details tbody tr td:first-child {
font-weight: bold;
padding: 4px 1em 4px 0;
}
.shop_table.subscription_details tbody tr td:first-child::after {
content: ':';
}
/* Add a space between the View button the the Invoice button. */
a.invoice {
margin-left: 16px;
}
/* Add spacing above the Next button on the Orders details page */
.woocommerce-pagination--without-numbers {
margin-top: 32px;
}
/* Fix the Reset password button on the reset password form */
.woocommerce-ResetPassword * {
float: none !important;
}
/* Give some room to the Download table below the License credentials section */
.woocommerce-MyAccount-downloads-license-info {
margin-bottom: 2rem;
}
/* Hide the button Order again on the Order completed page when a purchase just get completed. I feel it does not make sense to show the button at that point or on that page, it is too early and add visual clutter for nothing. */
.wp-block-woocommerce-order-confirmation-totals-wrapper .order-again {
display: none;
}
/* Reset the H2 size for for the Order details and Downloads heading on the Order completed page. The goal is to use the same size as the theme. */
.wp-block-woocommerce-order-confirmation-totals-wrapper > h2, .wc-block-order-confirmation-downloads-wrapper > h2 {
font-size: var(--wp--preset--font-size--x-large) !important;
line-height: 1.2 !important;
margin-block-start: 1em;
}
.wc-block-order-confirmation-downloads {
margin-bottom: 0;
}
/* For the Previous and Next button on the carousel on the main page: Set the background color and adjust the arrow character to be horizontally centered */
.carousel-arrow-button {
padding-left: 15px !important;
background-color: var(--wp--preset--color--background-light-gray);
}
/***
* Section to get the correct position of the carousel slides and buttons
* This carousel is used on the home page to show different products in the same product type section
*/
/* Target the slide container itself */
.data-carousel-slide {
/* Ensure no residual padding/margin on the slide container */
margin: 0 !important;
padding: 0 !important;
}
/* Target the elements INSIDE the slide that might have block gaps/margins */
.data-carousel-slide > * {
/* Reset top margin for the first element in the slide (e.g., the figure/image block) */
margin-top: 0 !important;
}
/* Ensure the image itself is correctly positioned and not influenced by surrounding blocks */
.data-carousel-slide .wp-block-image {
margin-bottom: 0 !important; /* Prevents margin from image affecting slide position */
}
/***
* Section to style the customer product review form that allow to write a review directly from the My account page
*/
/* Set the width of the review section to the same width as the account page cards */
.review-notification-section {
margin: 0 auto;
max-width: 940px;
}
.ascendo-review-notification {
background: var(--wp--preset--color--background-light-green);
padding: 24px;
border-radius: 24px;
margin: 24px 0;
}
.review-notification-header {
display: flex;
justify-content: space-between;
}
.review-notification-header h3 {
margin: 0 0 10px 0;
}
p.review-notification-message {
margin: 0 0 16px 0;
}
.review-dismiss-btn {
font-size: 20px;
background: none;
border: none;
cursor: pointer;
padding: 0px 10px;
}
.products-to-review {
display: flex;
flex-direction: column;
gap: 24px;
}
.product-review-card {
padding: 24px;
background: white;
border-radius: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.product-review-header h4 {
margin: 0 0 5px 0;
font-size: 18px;
}
.product-review-header small {
display: block;
margin-bottom: 16px;
opacity: 0.6;
}
/* Star Rating Design - No Radio Buttons */
.label-text {
font-weight: 600;
font-size: 14px;
}
.stars-picker {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
font-size: 32px;
line-height: 1;
}
/* Deactivate the custom radio circles from style.css specifically for the stars */
.stars-picker input[type="radio"] + label::before {
content: none !important;
display: none !important;
}
/* Also ensure no extra margins or borders interfere with the star alignment */
.stars-picker label {
margin: 0 !important;
padding: 0 2px !important;
border: none !important;
}
.stars-picker label {
cursor: pointer;
color: var(--wp--preset--color--background-light-gray); /* Default empty star color */
transition: color 0.2s;
padding: 0 2px;
font-size: 32px; /* Ensures stars stay large regardless of global input font sizes */
}
/* Hover and Checked states */
.stars-picker input[type="radio"]:checked ~ label,
.stars-picker label:hover,
.stars-picker label:hover ~ label {
color: #fbbf24 !important; /* Gold color */
}
.review-text-input textarea {
width: 100%;
padding: 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 15px;
resize: vertical;
}
.review-form-message {
margin-top: 10px;
padding: 10px;
border-radius: 6px;
display: none;
}
.review-form-message.success {
background: #dcfce7;
color: #166534;
display: block;
}
.review-form-message.error {
background: #fee2e2;
color: #991b1b;
display: block;
}
.ascendo-review-form.loading {
opacity: 0.5;
pointer-events: none;
}
/***
* Section to style the custom search field and how the results are displayed live when searching the user guides
*/
/* Style the search input field on the User guide page. */
.custom-search-icon .wp-block-search__input {
padding-left: 40px !important; /* Makes room for the icon */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none' stroke='%237d807d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='16.65' y1='16.65' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat;
background-position: 12px center; /* Positions the icon */
background-size: 18px;
border-radius: 8px; /* Optional: matches the rounded look in your image */
}
/* Chrome, Safari, and newer versions of Edge */
.custom-search-icon .wp-block-search__input::placeholder {
color: #7d807d;
opacity: 1; /* Firefox defaults placeholders to a lower opacity */
}
/* Firefox */
.custom-search-icon .wp-block-search__input::-moz-placeholder {
color: #7d807d;
opacity: 1;
}
/* Internet Explorer 10-11 */
.custom-search-icon .wp-block-search__input:-ms-input-placeholder {
color: #7d807d;
}
/* Microsoft Edge (Older versions) */
.custom-search-icon .wp-block-search__input::-ms-input-placeholder {
color: #7d807d;
}
/* Style for the grouping of each match */
.search-match-group {
margin-bottom: 12px;
padding-left: 5px;
border-left: 2px solid var(--wp--preset--color--background-light-gray);
}
/* Style for the Parent Heading name */
.match-heading {
display: block;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--wp--preset--color--text-heading);
margin-bottom: 2px;
letter-spacing: 0.025em;
}
/* Style for the actual text snippet */
.match-snippet {
margin: 0 !important;
font-size: 0.9rem;
line-height: 1.4;
color: #7d807d;
}
/* Highlight style */
mark {
background-color: #e2f8d4;
color: #2f4521;
font-weight: 600;
padding: 0 2px;
}
/* Make the match block look like a clickable card */
.search-match-link {
text-decoration: none !important;
display: block;
transition: background 0.2s ease;
}
.search-match-link:hover .search-match-group {
background-color: #f6f8f6; /* Light gray highlight on hover */
border-left-color: #6fa24e; /* Change border color to your brand green */
}
.search-match-group {
margin-bottom: 5px;
padding: 8px;
border-left: 3px solid #dcdfdc;
}
/* Ensure smooth scrolling when the user clicks the link */
html {
scroll-behavior: smooth;
}
/* Offset for fixed headers (if your theme has one) */
:target::before {
content: "";
display: block;
height: 100px; /* Adjust this to your header height */
margin: -100px 0 0;
}
#search-results-dropdown {
box-sizing: border-box;
position: absolute;
background: #fff;
width: 100%;
max-width: 800px;
z-index: 1000;
border: 1px solid #c7c7c7;
border-radius: 8px;
box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}
/* Offset the top of the sticky containers (div) to compensate for the sticky header height */
.is-position-sticky {
top: calc(80px + var(--wp-admin--admin-bar--position-offset, 0px)) !important;
max-height: calc(100vh - 80px); /* ensures it never grows taller than the viewport */
overflow-y: auto; /* adds an inner scrollbar when content exceeds that height */
}