/* Theme Name: Smooth Dimensions Theme URI: n/a Template: kadence Author: The Digital Depot Author URI: n/a Description: Child Theme Description Version: 1.0 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* ========================================================================== Smooth Dimensions custom CSS Rules for the site's own utility classes, applied via the Advanced tab "Additional CSS Class(es)" field on Kadence blocks. ========================================================================== */ /* -------------------------------------------------------------------------- .smooth-info-box Info box cards. Used on the How It Works / benefit grids. -------------------------------------------------------------------------- */ /* Round the icon medallion behind the info box media. 4 classes (0,4,0) beats Kadence's generated per-block rule .wp-block-kadence-infobox.kt-info-box_xxxxxx .kt-blocks-info-box-media (0,3,0), so this wins on specificity regardless of stylesheet order. */ .smooth-info-box .kt-blocks-info-box-media-container .kt-blocks-info-box-media.kt-info-media-animate-none { border-radius: 99px; overflow: hidden; } /* -------------------------------------------------------------------------- .smooth-accordion FAQ accordions. -------------------------------------------------------------------------- */ /* Close the card when a pane is collapsed. Kadence splits each pane across two elements: the header button gets border-top/right/left, 16px top corners and border-bottom: 0, while .kt-accordion-panel-inner gets border-right/bottom/left and the 16px bottom corners. Open, the two halves join into one bordered card. Collapsed, the panel is display:none, so the header is left with no bottom edge and square bottom corners. Kadence exposes no setting for a collapsed-only border. Giving the header its own bottom border and bottom radius while it lacks .kt-accordion-panel-active restores the closed card. The moment JS adds that class the rule drops out and Kadence's own values take over, so the open state is untouched. Specificity: 7 classes (0,7,0) against Kadence's generated .kt-accordion-idXX > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header (0,5,0). This also beats the tablet and mobile copies of that rule, since media queries add no specificity. No !important needed. */ .smooth-accordion .kt-accordion-wrap > .kt-accordion-inner-wrap > .wp-block-kadence-pane > .kt-accordion-header-wrap > .kt-blocks-accordion-header:not(.kt-accordion-panel-active) { border-bottom: 1px solid var(--global-palette6, #dddbda); border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; } /* -------------------------------------------------------------------------- .smooth-svg-background Kadence Vector blocks that need the same icon medallion as the info box media, e.g. the highlight callout. -------------------------------------------------------------------------- */ /* Matches .kt-blocks-info-box-media, which Kadence generates as background: var(--global-palette7) and which the .smooth-info-box rule above rounds to 99px. width: fit-content is the part that is easy to miss. .kb-vector-container is a block-level flex container, so without it the background paints across the full column as a wide bar instead of a medallion. Kadence's per-block rule .kb-vector-containerXX is a single class (0,1,0) and sets no background, radius or width, so there is nothing to override. */ .smooth-svg-background { background: var(--global-palette7, #fafafa); border-radius: 99px; width: fit-content; } /* -------------------------------------------------------------------------- .smooth-svg-background--brown Modifier for .smooth-svg-background. Swaps the medallion fill from the default palette7 surface tint to a bespoke warm brown (#826955) that has no matching slot in the current Kadence Global Palette, so it's a literal hex rather than a var(--global-palette*) reference. Chained with the base class in the selector (0,2,0) rather than declared standalone, so it reliably beats the base rule's (0,1,0) regardless of stylesheet order - no !important needed. Apply BOTH classes on the block: "smooth-svg-background smooth-svg-background--brown" in Additional CSS Class(es). -------------------------------------------------------------------------- */ .smooth-svg-background.smooth-svg-background--brown { background: #826955; } /* -------------------------------------------------------------------------- .dd-no-wrap-value Plan-value labels ("Included", "Longer Plans") in the Signature Skin Health Plans pricing rows. The row is a Kadence flex column with flex-wrap: nowrap and justify-content: space-between; at the row's exact design width the label and value sit with zero spare pixels, so any sub-pixel or zoom difference makes the single-word value break onto its own line. Locking it to nowrap + flex-shrink: 0 forces the longer label text to absorb any squeeze instead. -------------------------------------------------------------------------- */ .dd-no-wrap-value { white-space: nowrap; flex-shrink: 0; } /* -------------------------------------------------------------------------- .dd-price-period The "per month" subscript next to plan prices (e.g. "£79 per month"). Overrides the heading's serif display font with the site's body font at a fixed readable size, since browsers shrink text automatically. -------------------------------------------------------------------------- */ .dd-price-period { font-family: Manrope, sans-serif; font-size: 16px; } /* -------------------------------------------------------------------------- .smooth-header-contact Phone and email links in the header utility bar (header_html_content / header_html2_content in the Kadence Customizer). Kadence's kses filter strips out of those raw-HTML fields, so the icon can't be inline markup there - it has to come from CSS instead. Uses mask-image rather than a plain background-image so the icon's colour still tracks var(--global-palette9), matching every other palette-driven colour in this file, instead of a hex value baked into the data URI. -------------------------------------------------------------------------- */ .smooth-header-contact { display: inline-flex; align-items: center; gap: 8px; } .smooth-header-contact::before { content: ""; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-color: var(--global-palette9, #ffffff); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Feather "phone" icon, the same fe_phone SVG Kadence Blocks uses for button icons elsewhere on the site (wp-content/plugins/kadence-blocks/ includes/icons-ico-array.php). Fill colour inside the data URI is irrelevant for a mask - only its shape/alpha is used. */ .smooth-header-contact-phone::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } /* Feather "mail" icon, same source as above. */ .smooth-header-contact-email::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- .dd-jusitfy-content-icon Homepage only. Applied to kadence/advancedheading blocks that have a trailing icon (e.g. the "Skin Analysis" card title's arrow). Kadence renders the heading's own text and icon as two child spans (.kb-adv-text-inner and .kb-adv-heading-icon) inside a wrapper Kadence already sets to display:flex via its own per-block generated CSS, so this class only needs to add the spacing behaviour, not the flex context itself. -------------------------------------------------------------------------- */ .dd-jusitfy-content-icon { justify-content: space-between; } /* ========================================================================== .smooth-accent-icon Apply to an Image block inside a card. Adds the sparkle accent medallion (Accent Icon.svg, embedded as a data URI) overlapping the image's top right corner and breaking out past the card edge. Tweak position with the custom properties below. ========================================================================== */ .smooth-accent-icon { --accent-size: 64px; /* icon diameter */ --accent-overhang: 55%; /* how far it pokes past the image's right edge */ --accent-drop: 2px; /* nudge down from the image's top edge */ position: relative; overflow: visible !important; } .smooth-accent-icon::after { content: ""; position: absolute; top: var(--accent-drop); right: 0; width: var(--accent-size); height: var(--accent-size); transform: translateX(var(--accent-overhang)); background: url("data:image/svg+xml,%3Csvg width='114' height='114' viewBox='0 0 114 114' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='57' cy='57' r='56.5' fill='%23FAFAFA' stroke='%23D9D9D9'/%3E%3Cpath d='M56.1282 34.3826C56.369 33.0823 57.6211 32.2154 58.9455 32.4562C59.9328 32.6488 60.6793 33.3953 60.8719 34.3826L63.4003 47.771C63.7615 49.7215 65.3026 51.2386 67.229 51.5998L80.6175 54.1282C81.9178 54.369 82.7847 55.6211 82.5439 56.9455C82.3512 57.9328 81.6048 58.6793 80.6175 58.8719L67.229 61.4003C65.2785 61.7615 63.7615 63.3026 63.4003 65.229L60.8719 78.6175C60.6311 79.9178 59.3789 80.7847 58.0546 80.5439C57.0673 80.3512 56.3208 79.6048 56.1282 78.6175L53.5998 65.229C53.2386 63.2785 51.6974 61.7615 49.771 61.4003L36.3826 58.8719C35.0823 58.6311 34.2154 57.3789 34.4562 56.0546C34.6488 55.0673 35.3953 54.3208 36.3826 54.1282L49.771 51.5998C51.7215 51.2386 53.2386 49.6974 53.5998 47.771L56.1282 34.3826Z' stroke='%23B18F73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M77.752 32.4082V42.0402' stroke='%23B18F73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M82.568 37.2236H72.936' stroke='%23B18F73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M39.2242 80.5675C41.884 80.5675 44.0402 78.4113 44.0402 75.7515C44.0402 73.0917 41.884 70.9355 39.2242 70.9355C36.5644 70.9355 34.4082 73.0917 34.4082 75.7515C34.4082 78.4113 36.5644 80.5675 39.2242 80.5675Z' stroke='%23B18F73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; z-index: 2; pointer-events: none; } /* Let the icon break out of the card instead of being clipped */ .kt-inside-inner-col:has(> .smooth-accent-icon), .wp-block-kadence-column:has(.smooth-accent-icon) { overflow: visible !important; } @media (max-width: 767px) { .smooth-accent-icon { --accent-size: 52px; --accent-overhang: 40%; } }