/*
Theme Name: West Range Dental
Theme URI: https://westrangedental.com
Author: West Range Dental
Author URI: https://westrangedental.com
Description: Custom theme for West Range Dental.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: westrangedental
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/*
* Link styles
* https://github.com/WordPress/gutenberg/issues/42319
*/
a {
text-decoration-thickness: 1px !important;
text-underline-offset: .1em;
}
header.wp-block-template-part {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 102;
}
/* Focus styles */
:where(.wp-site-blocks *:focus) {
outline-width: 2px;
outline-style: solid;
}
/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
margin-bottom: 3px;
}
/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
outline-offset: 4px;
}
/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
outline-offset: 0;
}
/*
* Progressive enhancement to reduce widows and orphans
* https://github.com/WordPress/gutenberg/issues/55190
*/
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
text-wrap: pretty;
}
/*
* Change the position of the more block on the front, by making it a block level element.
* https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
display: block;
}
@media (max-width: 767px) {
.header.wp-block-template-part .wp-block-buttons {
display: none;
}
}
@media (min-width: 768px) {
.header.wp-block-template-part .wp-block-buttons {
flex-direction: row;
}
}
/* Responsive Grid Columns for Manual Grid Layouts */
/* Controlled via UI in the block editor */
/* Tablet breakpoint (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
/* Reset manual grid positioning on tablet */
.wp-block-group[data-tablet-cols] > * {
grid-column: auto !important;
grid-row: auto !important;
}
/* Dynamic column count based on data attribute */
.wp-block-group[data-tablet-cols="1"] {
grid-template-columns: repeat(1, 1fr) !important;
}
.wp-block-group[data-tablet-cols="2"] {
grid-template-columns: repeat(2, 1fr) !important;
}
.wp-block-group[data-tablet-cols="3"] {
grid-template-columns: repeat(3, 1fr) !important;
}
.wp-block-group[data-tablet-cols="4"] {
grid-template-columns: repeat(4, 1fr) !important;
}
/* Reverse order on tablet */
.wp-block-group[data-reverse-tablet="true"] {
display: flex !important;
flex-direction: column-reverse;
flex-wrap: wrap;
}
}
/* Mobile breakpoint (max 767px) */
@media (max-width: 767px) {
/* Reset manual grid positioning on mobile */
.wp-block-group[data-mobile-cols] > * {
grid-column: auto !important;
grid-row: auto !important;
}
/* Dynamic column count based on data attribute */
.wp-block-group[data-mobile-cols="1"] {
grid-template-columns: repeat(1, 1fr) !important;
}
.wp-block-group[data-mobile-cols="2"] {
grid-template-columns: repeat(2, 1fr) !important;
}
.wp-block-group[data-mobile-cols="3"] {
grid-template-columns: repeat(3, 1fr) !important;
}
/* Reverse order on mobile */
.wp-block-group[data-reverse-mobile="true"] {
display: flex !important;
flex-direction: column-reverse;
flex-wrap: wrap;
}
}
/* Details Block - Summary Heading Styles */
/* Add border below each details block */
.wp-block-details {
padding: 1rem 0 2rem 0;
border-bottom: 1px solid currentColor;
}
.wp-block-details summary:focus {
outline: none !important;
}
/* Reset heading styles inside summary to prevent layout issues */
.wp-block-details summary .wp-block-details__summary-heading {
all: inherit;
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
/* Custom Details Block Summary Marker */
.wp-block-details summary {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
cursor: pointer;
/* Apply heading typography styles - matching h3 (large) */
font-family: var(--wp--preset--font-family--tay-bone-quixote);
font-size: var(--wp--preset--font-size--large);
font-weight: 400;
line-height: 1.125;
letter-spacing: -0.1px;
}
/* Hide default marker */
.wp-block-details summary::-webkit-details-marker {
display: none;
}
.wp-block-details summary::marker {
display: none;
}
/* Add custom SVG marker to the right */
.wp-block-details summary::after {
content: '';
flex-shrink: 0;
width: 34px;
height: 34px;
margin-left: 1rem;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
}
/* Rotate marker 45deg when details is open */
.wp-block-details[open] summary::after {
transform: rotate(45deg);
}
/* Mobile inline background images (server-side rendered for better SEO/performance) */
/* Hide inline image on desktop */
.mobile-inline-bg-image {
display: none;
}
@media (max-width: 1024px) {
/* Show inline image on mobile - full width */
.mobile-inline-bg-image {
width: 100%;
height: auto;
display: block;
margin: 0;
object-fit: cover;
}
/* Hide background image on mobile when inline image is present */
.alignfull[data-has-mobile-inline-image="true"] {
background-image: none !important;
padding-top: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Apply global padding to content inside, but not to the mobile image */
.alignfull[data-has-mobile-inline-image="true"] > *:not(.mobile-inline-bg-image) {
padding-left: var(--wp--preset--spacing--50, 30px);
padding-right: var(--wp--preset--spacing--50, 30px);
}
/* Add spacing between image and content */
.alignfull[data-has-mobile-inline-image="true"] > .mobile-inline-bg-image {
margin-bottom: var(--wp--preset--spacing--50, 30px);
}
}
footer.wp-block-template-part {
margin-top: 0 !important;
}
/* GSAP ScrollSmoother */
#smooth-wrapper {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
#smooth-content {
overflow: visible;
width: 100%;
will-change: transform;
}
/* Prevent antialiasing artifacts on sections */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
main > * {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
/* Offset main content for fixed header */
main {
padding-top: 142px;
}
@media (max-width: 767px) {
main {
padding-top: 132px;
}
}
.wp-block-image.size-full img {
object-fit: cover;
width: 100%;
}
.gform-footer .wp-element-button {
background-color: var(--wp--preset--color--accent-1);
border-width: 0;
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--open-sans);
font-size: var(--wp--preset--font-size--medium);
font-style: normal;
font-weight: 800 !important;
line-height: inherit;
padding-top: 1rem !important;
padding-right: 2.25rem;
padding-bottom: 1rem !important;
padding-left: 2.25rem !important;
padding-right: 2.25rem !important;
text-decoration: none !important;
text-transform: uppercase !important;
width: unset !important;
border-radius: 999px !important;
transition: all 0.3s ease !important;
font-size: 1rem !important;
}
.gform-footer .wp-element-button:hover {
background-color: var(--wp--preset--color--contrast) !important;
color: var(--wp--preset--color--accent-4) !important;
}
.wp-element-button {
transition: all 0.3s ease !important;
}
/* Mobile Menu / Mega Menu Styles */
.mobile-menu {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
body.menu-active .mobile-menu {
opacity: 1;
pointer-events: all;
}
.mobile-menu nav {
width: 100%;
}
.mobile-menu > .wp-block-group.is-layout-flex {
width: 100%;
max-width: 1300px !important;
}
.mobile-menu nav ul li a:hover {
text-decoration: none;
}
.mobile-menu nav ul li a:hover::before {
background-color: var(--wp--preset--color--contrast);
transition: background-color 0.3s ease;
}
/* Prevent body scroll when menu is active */
body.menu-active {
overflow: hidden;
}
/* Fade out header elements except menu trigger when menu is active */
body.menu-active header.wp-block-template-part .wp-block-site-logo,
body.menu-active header.wp-block-template-part .wp-block-site-title,
body.menu-active header.wp-block-template-part .wp-block-navigation,
body.menu-active header.wp-block-template-part .wp-block-buttons {
opacity: 0;
pointer-events: none;
}
header.wp-block-template-part .wp-block-site-logo,
header.wp-block-template-part .wp-block-site-title,
header.wp-block-template-part .wp-block-navigation,
header.wp-block-template-part .wp-block-buttons {
transition: opacity 0.3s ease;
}
/* Remove background from header direct children when menu is active */
body.menu-active header.wp-block-template-part > * {
background-color: transparent !important;
transition: background-color 0.3s ease;
}
header.wp-block-template-part > * {
transition: background-color 0.3s ease;
}
/* Mobile Menu Navigation Icons */
.mobile-menu nav ul li a {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.mobile-menu nav ul li a::before {
content: '';
width: 98px;
height: 98px;
border-radius: 999px;
background-size: 55px;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
display: inline-block;
background-color: var(--wp--preset--color--accent-2);
vertical-align: middle;
margin-right: 1rem;
}
/* Services Icon */
.mobile-menu nav ul li a[href*="services"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.mobile-menu nav ul li a[href*="services"]:hover::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* About Icon */
.mobile-menu nav ul li a[href*="about"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
.mobile-menu nav ul li a[href*="about"]:hover::before {
background-image: url('data:image/svg+xml;utf8,');
}
/* Contact Icon */
.mobile-menu nav ul li a[href*="contact"]::before {
background-image: url('data:image/svg+xml;utf8,');
}
@media (max-width: 767px) {
.mobile-menu nav ul li.has-xx-large-font-size {
font-size: var(--wp--preset--font-size--large) !important;
}
.mobile-menu nav ul li a::before {
width: 50px;
height: 50px;
background-size: 33px;
background-position: center;
background-repeat: no-repeat;
background-color: var(--wp--preset--color--accent-2);
vertical-align: middle;
margin-right: 1rem;
}
}
/* Underlined List - Remove last item margin on mobile */
@media (max-width: 767px) {
ul.is-style-underlined li:last-child,
ol.is-style-underlined li:last-child {
margin-bottom: 0;
}
}
/* Button Append SVG Styles */
.wp-block-button__link:has(.button-append-svg),
.wp-element-button:has(.button-append-svg) {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.button-append-svg {
display: inline-block;
flex-shrink: 0;
transition: all 0.3s ease;
}
.button-append-svg * {
transition: all 0.3s ease;
}
.button-text {
display: inline-block;
}
.mobile-menu nav ul li a[href*="contact"]:hover::before {
background-image: url('data:image/svg+xml;utf8,');
}
@media (max-width: 767px) {
.header-bar .wp-block-buttons {
display: none;
}
}
.mobile-menu .hide-on-desktop {
display: none;
}
.mobile-menu .hide-on-mobile {
display: block;
}
@media (max-width: 767px) {
.mobile-menu .hide-on-desktop {
display: block;
}
.mobile-menu .hide-on-mobile {
display: none;
}
}
.address-link a{
text-decoration: none;
}
.address-link a:hover {
text-decoration: underline;
}
@media (min-width: 1340px) {
.pad-edge-left {
padding-left: var(--wp--preset--spacing--wide-edge);
}
.pad-edge-right {
padding-right: var(--wp--preset--spacing--wide-edge);
}
}
@media (max-width: 767px) {
.pad-edge-left {
padding-left: var(--wp--preset--spacing--wide-edge-min);
}
.pad-edge-right {
padding-right: var(--wp--preset--spacing--wide-edge-min);
}
}