/* Theme Name: Ginkgo Child Theme URI: https://biogol.ir/ Description: Ginkgo Child. A soft cream neumorphism skin for the Ginkgo parent theme. Visual layer only: no changes to markup, content, slugs or SEO. Version: 2.3 Author: Mahyar Template: xtra Text Domain: ginkgo */ /* ============================================================ GINKGO / NEUMORPHISM DESIGN SYSTEM Warm cream palette with a green accent. Rules of the system: 1. Only three shadow formulas are used. Nothing else. 2. No borders anywhere. Depth is made with shadow only. 3. Cards sit on the same colour family as the page. Only the shadow separates them. 4. Transitions are limited to box-shadow and filter. ============================================================ */ /* ============================================================ 01. DESIGN TOKENS ============================================================ */ :root { /* Base */ --bg-page: #e7ddcd; --bg-surface: #ede3d5; --bg-inset-light: #f5ecdd; --bg-inset-dark: #e3d6c2; /* Shadow colours (dual source neumorphism) */ --sh-dark: #d0c1ab; --sh-dark-hover: #c7b499; --sh-dark-inset: #d5c6ae; --sh-light: #fff9ee; /* Text */ --text-strong: #4a3b2c; --text-muted: #8d7c66; --text-faint: #a4947e; /* Accent */ --accent: #70bf44; --accent-dark: #569934; --accent-light: #7fcb54; --accent-2: #00b8a9; /* Usage tokens. These exist so contrast can be corrected in one place without touching the brand colours above. Defaults match the brief. */ --accent-text: var(--accent); /* green used as TEXT on cream */ --accent-text-hover: var(--accent-dark); --cta-from: var(--accent-light); /* CTA gradient start */ --cta-to: var(--accent-dark); /* CTA gradient end */ --cta-text: #ffffff; /* label on the CTA fill */ /* Shape */ --radius-tile: 26px; --radius-panel: 18px; --radius-btn: 12px; --radius-cta: 16px; --radius-pill: 999px; /* ---- The three shadow formulas, built from the tokens above ---- */ /* A. Raised surface: cards, widgets, boxes */ --sh-a: 10px 10px 22px var(--sh-dark), -10px -10px 22px var(--sh-light); --sh-a-hover: 14px 14px 30px var(--sh-dark-hover), -14px -14px 30px var(--sh-light); /* B. Inset surface: image frames, fields, search, progress, badges */ --sh-b: inset 6px 6px 12px var(--sh-dark-inset), inset -6px -6px 12px var(--sh-light); --sh-b-sm: inset 5px 5px 10px var(--sh-dark-inset), inset -5px -5px 10px var(--sh-light); /* C. Small raised elements: buttons, pills, icons */ --sh-c: 6px 6px 12px var(--sh-dark-inset), -6px -6px 12px var(--sh-light); --sh-c-cta: 8px 8px 18px var(--sh-dark-inset), -8px -8px 18px var(--sh-light); /* Shared gradients */ --grad-accent: linear-gradient(135deg, var(--cta-from), var(--cta-to)); --grad-inset: linear-gradient(145deg, var(--bg-inset-light), var(--bg-inset-dark)); /* Motion */ --gk-ease: cubic-bezier(0.4, 0, 0.2, 1); --gk-fx: box-shadow 0.25s var(--gk-ease), filter 0.25s var(--gk-ease); } /* ---- Readable contrast mode ---------------------------------- The brief's green sits at 1.79:1 against the cream surface, and white on the light end of the CTA gradient sits at 1.99:1. Both are below the 4.5:1 that body text needs, which matters most on prices and basket buttons. Adding the class gk-readable to keeps the same hue but darkens the green used for text and for the button fill: green text goes to 4.51:1 and white on the button to 5.73:1. Badges, borders and decorative green are untouched. Turn it on from the child functions.php with: add_filter( 'ginkgo_readable_contrast', '__return_true' ); -------------------------------------------------------------- */ html.gk-readable:not([data-theme="dark"]) { --accent-text: #427227; --accent-text-hover: #2c4c1a; --cta-from: #4f892f; --cta-to: #35651f; } /* ============================================================ 02. BASE AND TYPOGRAPHY ============================================================ */ body { background-color: var(--bg-page) !important; background-image: none !important; color: var(--text-strong) !important; } #layout, #layout.layout_1, #layout.layout_2, #layout.layout_3, .inner_layout, #content, main, .site-content, .cz_row, .cz_section, .vc_row, .wp-block-group { background-color: transparent; background-image: none; } #layout.layout_1, #layout.layout_2 { box-shadow: none !important; } h1, h2, h3, h4, h5, h6, .cz_post_title h3, .entry-title, .page-title, .widget-title, .widgettitle, .codevz-widget-title { color: var(--text-strong) !important; font-weight: 800; letter-spacing: -0.01em; } p, li, td, dd, .cz_post_content, .entry-content { color: var(--text-strong); } small, .cz_post_meta, .cz_post_date, .posted_in, .entry-meta, .wp-block-post-date { color: var(--text-muted) !important; } a { color: var(--accent-text); transition: var(--gk-fx), color 0.2s var(--gk-ease); } a:hover, a:focus { color: var(--accent-text-hover); } ::selection { background: var(--accent); color: var(--cta-text); } /* Hero heading: one or two words can carry the accent gradient. Add class gk-grad to a inside the heading in the builder. */ .gk-grad { background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Category label above a card title */ .gk-eyebrow, .woocommerce ul.products li.product .posted_in, .cz_post_cat, .cz_post_cat a { text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--text-faint) !important; } /* ============================================================ 03. HEADER AND STICKY BAR ============================================================ */ #site_header, .header_1, .header_2, .header_3, .header_4, .header_5 { background-color: var(--bg-surface) !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; } /* The whole header block reads as one raised surface */ #site_header { box-shadow: 0 10px 22px var(--sh-dark) !important; } .onSticky, .header_5.onSticky, .cz_sticky_header { background-color: var(--bg-surface) !important; box-shadow: 0 10px 22px var(--sh-dark) !important; border: none !important; backdrop-filter: none !important; } .hidden_top_bar, .hidden_top_bar > i { background-color: var(--bg-surface) !important; border: none !important; color: var(--text-muted) !important; } /* Header icon buttons: cart, account, search trigger */ .header_1 .elm_icon_text > i, .header_2 .elm_icon_text > i, .header_3 .elm_icon_text > i, #site_header .cz_cart > a, #site_header .xtra-header-icon, #site_header i.cz_icon_btn { background: var(--bg-surface); border-radius: var(--radius-pill); box-shadow: var(--sh-c); color: var(--text-muted); transition: var(--gk-fx); } #site_header .cz_cart > a:hover, #site_header i.cz_icon_btn:hover { color: var(--accent-text); } #site_header .cz_cart_count { background: var(--grad-accent) !important; color: var(--cta-text) !important; border: none !important; border-radius: var(--radius-pill); font-weight: 800; } /* ============================================================ 04. MAIN MENU AND DROPDOWNS ============================================================ */ .sf-menu > li > a, .sf-menu > .cz > a { color: var(--text-muted) !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: var(--radius-pill); font-weight: 600; transition: var(--gk-fx), color 0.2s var(--gk-ease); } /* Active item: an inset pill in the accent colour */ .sf-menu > li.current_menu > a, .sf-menu > li.current-menu-item > a, .sf-menu > li.current-menu-parent > a, .sf-menu > li.current_page_item > a, .sf-menu > li > a:hover { color: var(--accent-text) !important; background: var(--bg-surface) !important; box-shadow: var(--sh-b-sm) !important; } /* XTRA menu hover effects draw underlines. Turn them off. */ .sf-menu > li > a:before, .sf-menu > li > a:after, .cz_menu_fx_left_to_right > a:before, .cz_menu_fx_left_to_right > a:after { display: none !important; } .sf-menu ul, .sub-menu, .cz_parent_megamenu > .sub-menu, .dropdown_menu { background: var(--bg-surface) !important; background-image: none !important; border: none !important; border-radius: var(--radius-panel) !important; box-shadow: var(--sh-a) !important; padding: 10px !important; } .sf-menu ul li a, .sub-menu li a { color: var(--text-muted) !important; background: transparent !important; border: none !important; border-radius: var(--radius-btn) !important; transition: var(--gk-fx), color 0.2s var(--gk-ease); } .sf-menu ul li a:hover, .sub-menu li a:hover, .sub-menu li.current_menu > a { color: var(--accent-text) !important; box-shadow: var(--sh-b-sm) !important; } .cz_indicator, .sf-menu .fa-angle-down, .sf-menu .fa-angle-right { color: inherit !important; } /* ============================================================ 05. MOBILE MENU, OFFCANVAS, HAMBURGER ============================================================ */ .offcanvas_area, .fullscreen_menu, .xtra-mobile-menu-head, #mobile_menu { background-color: var(--bg-surface) !important; background-image: none !important; border: none !important; box-shadow: var(--sh-a) !important; } .offcanvas_area .sf-menu > li > a, .fullscreen_menu .sf-menu > li > a { color: var(--text-muted) !important; } i.offcanvas-close, .header_4 .menu_style_icon, .cz_hamburger, .menu-toggle { background: var(--bg-surface) !important; color: var(--text-muted) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-c) !important; transition: var(--gk-fx); } i.offcanvas-close:active, .header_4 .menu_style_icon:active, .cz_hamburger:active, .menu-toggle:active { box-shadow: var(--sh-b-sm) !important; } /* ============================================================ 06. SEARCH ============================================================ */ .search, .search form, .outer_search form, .search-form, .cz_search_form, .codevz-search-category { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-b) !important; } .search input[type="text"], .search input[type="search"], .search-form .search-field, .cz_search_form input { background: transparent !important; box-shadow: none !important; border: none !important; color: var(--text-strong) !important; } .ajax_search_results { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-panel) !important; box-shadow: var(--sh-a) !important; } .ajax_search_results a { color: var(--text-muted) !important; } /* ============================================================ 07. CARDS Posts, products, widgets, category boxes. Same colour as the page. Only the shadow lifts them. ============================================================ */ article.cz_default_loop, .cz_post_box, .cz_grid, .cz_latest_news, .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products li.product-category, .widget, .footer_widget, .gk-card { background-color: var(--bg-surface) !important; background-image: none !important; border: none !important; border-radius: var(--radius-tile) !important; box-shadow: var(--sh-a) !important; padding: 16px !important; transition: var(--gk-fx); } /* Hover lifts the shadow only. No colour change, no transform. */ article.cz_default_loop:hover, .cz_post_box:hover, .cz_grid:hover, .woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover, .gk-card:hover { box-shadow: var(--sh-a-hover) !important; } .widget, .footer_widget { padding: 24px !important; margin-bottom: 24px !important; } .widget-title, .widgettitle, .codevz-widget-title, .footer_widget > .codevz-widget-title { color: var(--text-strong) !important; border: none !important; background: none !important; font-size: 16px !important; font-weight: 800; padding-bottom: 12px !important; margin-bottom: 14px !important; } .widget-title:before, .widget-title:after, .codevz-widget-title:before, .codevz-widget-title:after, .footer_widget > .codevz-widget-title:before, .footer_widget > .codevz-widget-title:after { display: none !important; } /* A raised surface inside another raised surface reads as a bruise. Anything nested goes flat and lets the parent card do the lifting. */ .widget table, .gk-card table, .gk-bento > * table, .woocommerce-Tabs-panel table, .widget .gk-card, .gk-bento .widget, .gk-bento > * > .gk-card { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .widget ul li, .widget ol li { border: none !important; color: var(--text-muted) !important; } .widget a:not(.button):not(.cz_btn):not(.checkout-button):not(.gk-btn):not(.gk-cta):not(.wp-block-button__link) { color: var(--text-muted) !important; } .widget a:hover { color: var(--accent-text) !important; } /* ============================================================ 08. IMAGE FRAMES Every card image sits in an inset panel, 16px in from the card edge. The inset shadow is painted by an overlay pseudo element so it stays visible on top of the photo. ============================================================ */ a.cz_post_image, .cz_post_image, .woocommerce ul.products li.product .woocommerce-loop-product__link, .woocommerce ul.products li.product .cz_image_in, .woocommerce ul.products li.product .cz_main_image, .woocommerce div.product div.images .woocommerce-product-gallery__image, .gk-frame { position: relative; display: block; border-radius: var(--radius-panel) !important; background: var(--grad-inset); overflow: hidden; border: none !important; box-shadow: none !important; } a.cz_post_image:after, .woocommerce ul.products li.product .woocommerce-loop-product__link:after, .woocommerce ul.products li.product .cz_image_in:after, .woocommerce div.product div.images .woocommerce-product-gallery__image:after, .gk-frame:after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-panel); box-shadow: var(--sh-b); pointer-events: none; z-index: 2; } a.cz_post_image img, .cz_post_image > img, .woocommerce ul.products li.product a img, .woocommerce div.product div.images img, .gk-frame img { border-radius: var(--radius-panel) !important; object-fit: cover; width: 100%; display: block; transition: filter 0.25s var(--gk-ease); } article:hover .cz_post_image > img, .woocommerce ul.products li.product:hover a img { transform: none !important; filter: brightness(1.04); } /* Product gallery thumbnails */ .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: var(--radius-btn) !important; box-shadow: var(--sh-c); transition: var(--gk-fx); } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { box-shadow: var(--sh-b-sm); } .woocommerce-product-gallery__trigger { background: var(--bg-surface) !important; color: var(--accent-text) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-c) !important; } /* ============================================================ 09. BUTTONS Primary = green gradient, white text, formula C at 8/18. Secondary = surface colour, accent text, formula C. Active = pressed inset. ============================================================ */ /* --- Secondary and default buttons --- The bare `button` element selector is used on purpose. A :not() chain here would raise this rule's specificity above the CTA rule below and strip the green fill off Add to basket. Icon-only controls are reclaimed by the class based rules that follow, which already outrank a bare element selector. */ .button, button, input[type="submit"], input[type="button"], input[type="reset"], .cz_btn, a.cz_btn, .cz_readmore, .more-link, .wp-block-button__link, .wc-block-components-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce ul.products li.product .button, .gk-btn { background: var(--bg-surface) !important; background-image: none !important; color: var(--accent-text) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-c) !important; font-weight: 700; padding: 11px 22px !important; cursor: pointer; text-shadow: none !important; transition: var(--gk-fx); } .button:hover, button:hover, input[type="submit"]:hover, .cz_btn:hover, .cz_readmore:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce ul.products li.product .button:hover, .gk-btn:hover { background: var(--bg-surface) !important; color: var(--accent-text-hover) !important; box-shadow: var(--sh-c) !important; filter: brightness(1.02); } .button:active, button:active, input[type="submit"]:active, .cz_btn:active, .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce ul.products li.product .button:active, .gk-btn:active { box-shadow: var(--sh-b-sm) !important; filter: none; } /* --- Icon-only controls --- Search submit, slider arrows and lightbox controls. These sit inside an inset field or over an image, so they stay compact and circular instead of taking the padded button shape. */ .search button, .search form button, .slick-arrow, .slick-prev, .slick-next, .pswp__button, [class^="lg-"] button, button[class^="lg-"], button[id^="lg-"] { background: var(--bg-surface) !important; color: var(--accent-text) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-c) !important; width: 38px; height: 38px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; transition: var(--gk-fx); } .search button:active, .slick-arrow:active, .pswp__button:active { box-shadow: var(--sh-b-sm) !important; } /* --- Primary call to action --- */ .cz_btn.cz_btn_bg, .cz_btn_bg, .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .single_add_to_cart_button, .woocommerce .single_add_to_cart_button, .checkout-button, .wc-block-components-checkout-place-order-button, #place_order, input#submit, .gk-cta { background: var(--grad-accent) !important; color: var(--cta-text) !important; border: none !important; border-radius: var(--radius-cta) !important; box-shadow: var(--sh-c-cta) !important; font-weight: 800 !important; letter-spacing: 0.2px; padding: 14px 30px !important; transition: var(--gk-fx); } .cz_btn.cz_btn_bg:hover, .cz_btn_bg:hover, .woocommerce button.button.alt:hover, .woocommerce a.button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, input#submit:hover, .gk-cta:hover { background: var(--grad-accent) !important; color: var(--cta-text) !important; filter: brightness(1.08); box-shadow: var(--sh-c-cta) !important; } .cz_btn.cz_btn_bg:active, .single_add_to_cart_button:active, .checkout-button:active, #place_order:active, .gk-cta:active { filter: brightness(0.98); box-shadow: var(--sh-b-sm) !important; } /* Disabled state */ .button:disabled, button:disabled, .button.disabled, .woocommerce button.button:disabled { box-shadow: var(--sh-b-sm) !important; color: var(--text-faint) !important; filter: none; opacity: 1; } /* ============================================================ 10. PRICES, BADGES, LABELS ============================================================ */ .price, .woocommerce-Price-amount, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent-text) !important; font-weight: 800 !important; } del, del .woocommerce-Price-amount, .woocommerce ul.products li.product .price del { color: var(--text-faint) !important; font-weight: 600 !important; opacity: 1; } ins { background: transparent !important; text-decoration: none; } /* Badges: sale, new, stock and custom labels */ .onsale, .cz_new_badge, .product-tag, .post-tag, .tagcloud a, .widget_product_tag_cloud a, .gk-badge { background: var(--bg-surface) !important; background-image: none !important; color: var(--accent-text) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-b-sm) !important; text-transform: uppercase; font-size: 11px !important; font-weight: 700; letter-spacing: 1px; padding: 6px 14px !important; line-height: 1.6 !important; min-height: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; text-shadow: none !important; } .gk-badge-faint, .codevz-woo-outofstock-badge { color: var(--text-faint) !important; } .stock.in-stock { color: var(--accent-text) !important; font-weight: 700; } .stock.out-of-stock { color: var(--text-faint) !important; } /* ============================================================ 11. FORMS AND FIELDS ============================================================ */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"], textarea, select, .select2-container .select2-selection, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .wc-block-components-text-input input { background: var(--bg-surface) !important; background-image: none !important; color: var(--text-strong) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-b) !important; padding: 12px 16px !important; outline: none !important; transition: var(--gk-fx); } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="search"]:focus, textarea:focus, select:focus, .select2-container .select2-selection:focus { box-shadow: var(--sh-b), 0 0 0 2px var(--accent-light) !important; } input::placeholder, textarea::placeholder { color: var(--text-faint) !important; opacity: 1; } select { appearance: none; cursor: pointer; } .select2-dropdown, .select2-container--default .select2-dropdown { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-panel) !important; box-shadow: var(--sh-a) !important; } /* Checkbox and radio */ input[type="checkbox"], input[type="radio"] { appearance: none; width: 20px !important; height: 20px !important; background: var(--bg-surface) !important; border: none !important; border-radius: 6px !important; box-shadow: var(--sh-b-sm) !important; cursor: pointer; position: relative; padding: 0 !important; transition: var(--gk-fx); } input[type="radio"] { border-radius: 50% !important; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--grad-accent) !important; box-shadow: var(--sh-c) !important; } input[type="checkbox"]:checked:after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cta-text); font-size: 13px; font-weight: 700; } /* Quantity picker */ .quantity input.qty, .woocommerce .quantity .qty { border: none !important; box-shadow: var(--sh-b) !important; border-radius: var(--radius-btn) !important; width: 64px !important; padding: 12px 6px !important; text-align: center; } .quantity-up, .quantity-down { background: var(--bg-surface) !important; color: var(--accent-text) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-c) !important; transition: var(--gk-fx); } .quantity-up:active, .quantity-down:active { box-shadow: var(--sh-b-sm) !important; } /* Contact Form 7 and Gravity Forms */ .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select, .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-b) !important; } .wpcf7-response-output { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-panel) !important; box-shadow: var(--sh-a) !important; color: var(--text-strong) !important; } /* ============================================================ 12. WOOCOMMERCE ARCHIVE AND SINGLE ============================================================ */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3, .woocommerce ul.products li.product h2 { color: var(--text-strong) !important; font-weight: 800; letter-spacing: -0.01em; } .woocommerce div.product .product_title { color: var(--text-strong) !important; font-weight: 800; letter-spacing: -0.015em; } .woocommerce-ordering select, .woocommerce-result-count { color: var(--text-muted) !important; } .product_meta, .product_meta a { color: var(--text-muted) !important; } /* Variation swatches */ .variations td, .variations th { border: none !important; } .woocommerce div.product form.cart .variations select { box-shadow: var(--sh-b) !important; } /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { background: var(--bg-surface) !important; color: var(--text-strong) !important; border: none !important; border-radius: var(--radius-panel) !important; box-shadow: var(--sh-a) !important; } .woocommerce-message:before, .woocommerce-info:before { color: var(--accent-text) !important; } /* Sticky add to cart bar */ .cz-sticky-add-to-cart { background: var(--bg-surface) !important; border: none !important; box-shadow: 0 -10px 22px var(--sh-dark) !important; } /* Cart, checkout, my account panels */ .cart-collaterals .cart_totals, .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout-review-order, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .woocommerce-order-details, .woocommerce-customer-details, .codevz-cart-checkout-steps { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-tile) !important; box-shadow: var(--sh-a) !important; padding: 24px !important; } .woocommerce-MyAccount-navigation ul li a { border: none !important; border-radius: var(--radius-btn) !important; color: var(--text-muted) !important; transition: var(--gk-fx); } .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--accent-text) !important; box-shadow: var(--sh-b-sm) !important; } .coupon input.input-text { box-shadow: var(--sh-b) !important; } /* ============================================================ 13. TABLES ============================================================ */ table, table.shop_table, table.cart, .shop_attributes { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-tile) !important; box-shadow: var(--sh-a) !important; } /* Only non-responsive tables get separated cells. shop_table_responsive relies on the collapsed model to stack rows on small screens. */ table:not(.shop_table_responsive) { border-collapse: separate; border-spacing: 0; } table th, table td, table tr, .shop_attributes th, .shop_attributes td { border: none !important; color: var(--text-strong) !important; } table thead th { color: var(--text-faint) !important; text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; } table td, table th { padding: 14px 16px !important; } /* ============================================================ 14. TABS AND ACCORDION ============================================================ */ .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; display: flex; gap: 10px; flex-wrap: wrap; } .woocommerce div.product .woocommerce-tabs ul.tabs li, .wc-tabs li { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-c) !important; margin: 0 !important; transition: var(--gk-fx); } .woocommerce div.product .woocommerce-tabs ul.tabs li a, .wc-tabs li a { color: var(--text-muted) !important; font-weight: 700; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .wc-tabs li.active { box-shadow: var(--sh-b-sm) !important; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .wc-tabs li.active a { color: var(--accent-text) !important; } .woocommerce-Tabs-panel, .woocommerce div.product .woocommerce-tabs .panel { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-tile) !important; box-shadow: var(--sh-a) !important; padding: 26px !important; margin-top: 18px !important; } .cz_accordion .cz_accordion_title, .vc_tta-panel-heading { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-c) !important; } /* ============================================================ 15. RATINGS AND PROGRESS BARS Inset pill track with 3px padding, gradient fill. ============================================================ */ .gk-progress, .cz_skill_bar, .vc_progress_bar .vc_single_bar { background: var(--bg-surface) !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-b) !important; padding: 3px !important; overflow: hidden; } .gk-progress > span, .cz_skill_bar > span, .vc_progress_bar .vc_single_bar .vc_bar { background: linear-gradient(90deg, var(--accent), var(--accent-light)) !important; border-radius: var(--radius-pill) !important; display: block; height: 100%; } .star-rating span:before, .star-rating:before, p.stars a:before { color: var(--accent-text) !important; } .woocommerce .star-rating { color: var(--accent-text) !important; } /* ============================================================ 16. BREADCRUMBS, PAGE TITLE, PAGINATION ============================================================ */ .page_title, .xtra-page-title { background-color: transparent !important; background-image: none !important; border: none !important; } .breadcrumbs, .woocommerce-breadcrumb, .cz_breadcrumbs { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-b-sm) !important; display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 18px !important; color: var(--text-faint) !important; font-size: 13px; } .breadcrumbs a, .woocommerce-breadcrumb a { color: var(--text-muted) !important; } .breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--accent-text) !important; } .pagination .page-numbers, .woocommerce-pagination .page-numbers, nav.pagination a, nav.pagination span { background: var(--bg-surface) !important; color: var(--text-muted) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-c) !important; min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; margin: 4px !important; font-weight: 700; transition: var(--gk-fx); } .pagination .page-numbers.current, .woocommerce-pagination .page-numbers.current { color: var(--accent-text) !important; box-shadow: var(--sh-b-sm) !important; } .pagination .page-numbers:hover { color: var(--accent-text) !important; } /* ============================================================ 17. COMMENTS ============================================================ */ #comments .comment-body, #comments li.comment > div, .commentlist .comment_container { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-tile) !important; box-shadow: var(--sh-a) !important; padding: 22px !important; margin-bottom: 18px !important; } #comments .avatar, .comment img.avatar { border-radius: var(--radius-pill) !important; box-shadow: var(--sh-c); border: none !important; } #respond, .comment-respond { background: var(--bg-surface) !important; border: none !important; border-radius: var(--radius-tile) !important; box-shadow: var(--sh-a) !important; padding: 26px !important; } /* ============================================================ 18. QUOTES, CODE, SEPARATORS ============================================================ */ blockquote, .wp-block-quote { background: var(--bg-surface) !important; color: var(--text-strong) !important; border: none !important; border-radius: var(--radius-panel) !important; box-shadow: var(--sh-b) !important; padding: 22px 26px !important; } pre, code, kbd { background: var(--bg-surface) !important; color: var(--text-strong) !important; border: none !important; border-radius: var(--radius-btn) !important; box-shadow: var(--sh-b-sm) !important; } hr, .wp-block-separator, .cz_divider { border: none !important; height: 2px !important; background: linear-gradient(90deg, transparent, var(--sh-dark), transparent) !important; } /* ============================================================ 19. FOOTER Same surface colour as the rest of the page. One large raised card holds the widget area. No dark band. ============================================================ */ #site_footer, .page_footer, .cz_middle_footer, .subfooter_1, .subfooter_ { background-color: var(--bg-surface) !important; background-image: none !important; border: none !important; color: var(--text-muted) !important; } #site_footer { box-shadow: 0 -10px 22px var(--sh-dark) !important; } .cz_middle_footer > .row { background: var(--bg-surface); border-radius: var(--radius-tile); box-shadow: var(--sh-a); padding: 34px !important; margin-top: 30px; margin-bottom: 30px; } /* Footer widgets sit inside that card, so they stay flat */ .cz_middle_footer .footer_widget { background: transparent !important; box-shadow: none !important; padding: 0 !important; } #site_footer a:not(.button):not(.cz_btn):not(.checkout-button):not(.gk-btn):not(.gk-cta):not(.wp-block-button__link), .subfooter_1 a:not(.button):not(.cz_btn):not(.gk-btn):not(.gk-cta) { color: var(--text-muted) !important; } #site_footer a:hover, .subfooter_1 a:hover { color: var(--accent-text) !important; } .subfooter_1 { box-shadow: none !important; } /* ============================================================ 20. BENTO GRID For the home page and landing pages. Add class gk-bento to a section wrapper in the page builder, then gk-t1 ... gk-t8 to each child tile. ============================================================ */ .gk-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 76px; gap: 22px; } .gk-bento > * { background: var(--bg-surface); border-radius: var(--radius-tile); box-shadow: var(--sh-a); padding: 26px; overflow: hidden; transition: var(--gk-fx); display: flex; flex-direction: column; justify-content: center; } .gk-bento > *:hover { box-shadow: var(--sh-a-hover); } /* Staggered placement. Edges deliberately do not line up. */ .gk-t1 { grid-column: 1 / span 2; grid-row: 1 / span 4; } /* hero */ .gk-t2 { grid-column: 3 / span 1; grid-row: 1 / span 3; } /* tall product */ .gk-t3 { grid-column: 4 / span 1; grid-row: 1 / span 2; } /* stat */ .gk-t4 { grid-column: 4 / span 1; grid-row: 3 / span 3; } /* promo */ .gk-t5 { grid-column: 1 / span 1; grid-row: 5 / span 3; } /* product */ .gk-t6 { grid-column: 2 / span 2; grid-row: 5 / span 2; } /* wide banner */ .gk-t7 { grid-column: 3 / span 1; grid-row: 4 / span 1; } /* small stat */ .gk-t8 { grid-column: 2 / span 2; grid-row: 7 / span 2; } /* newsletter */ /* Hero tile inside the bento */ .gk-t1 h1, .gk-t1 h2 { font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15; margin-bottom: 14px; } .gk-stat { font-size: 42px; font-weight: 800; color: var(--accent-text); line-height: 1; } .gk-stat-label { text-transform: uppercase; font-size: 11px; letter-spacing: 1.5px; color: var(--text-faint); margin-top: 8px; } /* ============================================================ 21. GUTENBERG BLOCKS ============================================================ */ .wp-block-button__link { background: var(--grad-accent) !important; color: var(--cta-text) !important; border: none !important; border-radius: var(--radius-cta) !important; box-shadow: var(--sh-c-cta) !important; font-weight: 800; } .wp-block-button.is-style-outline .wp-block-button__link { background: var(--bg-surface) !important; color: var(--accent-text) !important; box-shadow: var(--sh-c) !important; } .wp-block-image img, .wp-block-post-featured-image img { border-radius: var(--radius-panel); } .wp-block-table table { box-shadow: var(--sh-a) !important; } /* ============================================================ 22. MISC CHROME ============================================================ */ #back_top, .back-to-top, .cz_back_top { background: var(--bg-surface) !important; color: var(--accent-text) !important; border: none !important; border-radius: var(--radius-pill) !important; box-shadow: var(--sh-c) !important; transition: var(--gk-fx); } #back_top:hover { box-shadow: var(--sh-c-cta) !important; } #loading, .cz_loading { background: var(--bg-page) !important; } .fixed_contact > i, .fixed_side { background: var(--bg-surface) !important; border: none !important; box-shadow: var(--sh-c) !important; color: var(--accent-text) !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-page); } ::-webkit-scrollbar-thumb { background: var(--sh-dark); border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--sh-dark-hover); } /* Keyboard focus stays visible */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-text-hover); outline-offset: 2px; } /* ============================================================ 23. LIGHT AND DARK TOGGLE BUTTON ============================================================ */ #gk-theme-toggle { position: fixed; bottom: 28px; inset-inline-start: 28px; width: 52px !important; height: 52px !important; padding: 0 !important; border-radius: var(--radius-pill) !important; background: var(--bg-surface); color: var(--accent-text); border: none; cursor: pointer; z-index: 99999; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; box-shadow: var(--sh-c); transition: var(--gk-fx); } #gk-theme-toggle:hover { box-shadow: var(--sh-c-cta); } #gk-theme-toggle:active { box-shadow: var(--sh-b-sm); } /* ============================================================ 24. DARK MODE The parent child theme shipped a light and dark switch, so the feature is kept. The dark palette is derived from the same warm family rather than the old blue grey one. ============================================================ */ html[data-theme="dark"], html.gk-dark { --bg-page: #2a231b; --bg-surface: #322a20; --bg-inset-light: #3a3126; --bg-inset-dark: #292219; --sh-dark: #221c15; --sh-dark-hover: #1c1710; --sh-dark-inset: #241e17; --sh-light: #40362a; --text-strong: #f0e6d6; --text-muted: #bfae95; --text-faint: #9b8b74; --accent: #7fcb54; --accent-dark: #70bf44; --accent-light: #93d86d; --cta-text: #2a231b; } /* ============================================================ 25. RESPONSIVE ============================================================ */ @media screen and (max-width: 1280px) { .gk-bento { gap: 20px; } } @media screen and (max-width: 980px) { .gk-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } /* Explicit placements are reset so tiles flow naturally */ .gk-t1, .gk-t2, .gk-t3, .gk-t4, .gk-t5, .gk-t6, .gk-t7, .gk-t8 { grid-column: auto; grid-row: auto; } .gk-t1, .gk-t6 { grid-column: span 2; } } @media screen and (max-width: 768px) { :root { --sh-a: 8px 8px 16px var(--sh-dark), -8px -8px 16px var(--sh-light); --sh-a-hover: 10px 10px 20px var(--sh-dark-hover), -10px -10px 20px var(--sh-light); --radius-tile: 22px; } .widget, .footer_widget { padding: 18px !important; } .cz_middle_footer > .row { padding: 22px !important; } #gk-theme-toggle { width: 46px; height: 46px; bottom: 20px; inset-inline-start: 20px; } } @media screen and (max-width: 620px) { .gk-bento { grid-template-columns: 1fr; } .gk-t1, .gk-t6 { grid-column: auto; } .gk-bento > * { padding: 20px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }