/*
 * Skin Specialist Centre visual refresh - 3 August 2026
 *
 * A deliberately separate, reversible layer over the legacy stylesheet.
 * Content, layout structure, forms, tracking and the CMS are unchanged.
 */

:root {
    --ssc-paper: #fffdfa;
    --ssc-ivory: #f8f5f0;
    --ssc-taupe: #5b5148;
    --ssc-heading: #534d47;
    --ssc-coral: #c86a52;
    --ssc-coral-dark: #9b4d3b;
    --ssc-text: #45423f;
}

::selection {
    background: var(--ssc-taupe);
    color: #fff;
}

body,
.main {
    color: var(--ssc-text);
    background-color: var(--ssc-paper);
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
    color: var(--ssc-heading);
}

a {
    color: var(--ssc-coral-dark);
}

a:active,
a:focus,
a:hover {
    color: #753a2f;
}

/* Header and footer accents. */
.site-header nav {
    border-bottom-color: var(--ssc-coral);
}

.site-header nav a,
.site-header .tel-mob,
.site-footer .footer-links .links .cat a,
.site-footer .footer-links .contact p {
    color: var(--ssc-coral-dark);
}

.site-header nav a.selected,
.site-footer .footer-links .contact .fb {
    color: var(--ssc-coral-dark);
}

.site-header .treatment {
    border-bottom-color: rgba(200, 106, 82, .38);
}

.site-header .treatment span,
.team-dropdown-module .categories a.active {
    color: var(--ssc-coral-dark);
}

.announcement,
#mobile-menu .menu-close-icon {
    color: var(--ssc-ivory);
    background: var(--ssc-taupe);
}

.announcement-link {
    color: var(--ssc-ivory);
}

.announcement-link:active,
.announcement-link:focus,
.announcement-link:hover {
    color: #fff;
}

#mobile-menu a {
    color: var(--ssc-heading);
}

#mobile-menu a:active,
#mobile-menu a:focus,
#mobile-menu a:hover {
    color: var(--ssc-coral-dark);
}

#mobile-menu,
.dropdown-module,
.team-dropdown-module .categories,
.team-dropdown-module .team-module {
    background: var(--ssc-paper);
}

.dropdown-module .col .children a,
.team-dropdown-module .categories a {
    color: var(--ssc-heading);
}

#mobile-menu .menu-close-icon span {
    color: var(--ssc-ivory);
}

.dropdown-module:before,
.team-dropdown-module .content-slider-width:before {
    background: var(--ssc-paper);
}

.dropdown-module .close span,
.team-dropdown-module .close span {
    color: var(--ssc-heading);
}

.dropdown-module .col a.parent {
    color: var(--ssc-heading);
    border-bottom-color: var(--ssc-coral);
}

.team-dropdown-module .categories {
    border-bottom-color: var(--ssc-coral);
}

.team-dropdown-module .categories a.active {
    border-color: var(--ssc-coral);
    border-bottom-color: var(--ssc-paper);
}

.dropdown-module .col .children a:active,
.dropdown-module .col .children a:focus,
.dropdown-module .col .children a:hover,
.team-dropdown-module .categories a:active,
.team-dropdown-module .categories a:focus,
.team-dropdown-module .categories a:hover {
    color: var(--ssc-coral-dark);
}

.site-footer {
    border-top-color: var(--ssc-coral);
}

.site-footer .footer-links .contact:before {
    background: var(--ssc-coral);
}

/* Accessible, high-contrast calls to action. */
.button.peach,
.button.orange,
.button-field button,
.button-field input[type="reset"],
.button-field input[type="submit"],
.signup-module form button {
    color: #fff;
    background: var(--ssc-taupe);
    box-shadow: inset 0 -3px 0 var(--ssc-coral);
}

.button.peach:active,
.button.peach:focus,
.button.peach:hover,
.button.orange:active,
.button.orange:focus,
.button.orange:hover,
.button-field button:active,
.button-field button:focus,
.button-field button:hover,
.button-field input[type="reset"]:active,
.button-field input[type="reset"]:focus,
.button-field input[type="reset"]:hover,
.button-field input[type="submit"]:active,
.button-field input[type="submit"]:focus,
.button-field input[type="submit"]:hover,
.signup-module form button:active,
.signup-module form button:focus,
.signup-module form button:hover {
    color: #fff;
    background: #433b34;
}

.button-underline,
.button-more p {
    color: var(--ssc-coral-dark);
}

.button-underline:after {
    background: var(--ssc-coral);
}

label,
input,
select,
textarea {
    color: var(--ssc-text);
}

::-webkit-input-placeholder {
    color: #716b65;
}

:-ms-input-placeholder {
    color: #716b65;
}

::placeholder {
    color: #716b65;
}

.selectric,
.selectric-focus .selectric,
.selectric-hover .selectric,
.selectric-open .selectric,
.selectric-items {
    border-color: var(--ssc-coral);
}

/* Homepage: real clinic photography and a calmer primary colour block. */
.page-home .hero-container {
    min-height: 300px;
    background-image:
        linear-gradient(90deg,
            rgba(248, 245, 240, .98) 0%,
            rgba(248, 245, 240, .90) 34%,
            rgba(248, 245, 240, .28) 63%,
            rgba(248, 245, 240, 0) 82%),
        url('/images/skin-specialist-centre-waiting-room-hero-2026.jpg') !important;
    background-position: 58% center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-home .hero-container:after {
    display: none;
}

.page-home .hero-container .wrap {
    top: 82px;
    left: 6%;
    width: 82%;
}

.page-home .hero-container h1 {
    max-width: 520px;
    color: var(--ssc-heading);
}

.page-home .info-container {
    background: var(--ssc-taupe);
    border-top: 4px solid var(--ssc-coral);
}

/* Remove the legacy decorative petal mark below the homepage intro. */
.page-home .info-container::after {
    content: none !important;
    display: none !important;
}

.page-home .info-container h2,
.page-home .info-container legend {
    color: #fff;
}

.page-home .treatment-container,
.page-home .info-container-v2 {
    background: var(--ssc-paper);
}

.page-home .treatment-container article .col2 h3,
.page-home .info-container-v2 h3.sideways {
    color: var(--ssc-heading);
}

/* Shared page titles and line details. */
.title-module h1 {
    color: var(--ssc-heading);
    background: var(--ssc-paper);
}

.title-module .content-max-width:after {
    background: #cfc7bf;
}

.page-about .image-container:after {
    background: var(--ssc-taupe);
}

.page-team .detail-container h2,
.page-team .detail-container legend,
.page-team-detail .detail-container .col2 h3 {
    color: var(--ssc-heading);
}

.team-module article p,
.page-team-detail .detail-container .col2 p.position {
    color: #7b5448;
    border-bottom-color: var(--ssc-coral);
}

.page-why .detail-container .points .point img {
    border-color: var(--ssc-coral);
}

.page-why .detail-container .points .point h3 {
    color: var(--ssc-heading);
}

.page-why .detail-container .points .point h3:before,
.page-why .detail-container .content-block .title:after {
    background: var(--ssc-coral);
}

/* Treatment pages retain light reading areas and use taupe only for panels. */
.page-treatment-detail .detail-container .content h1.title,
.page-treatment-detail .results-container h3.special-title {
    color: var(--ssc-heading);
}

.page-treatment-detail .detail-container .right nav {
    border-left-color: var(--ssc-coral);
}

.page-treatment-detail .detail-container .right nav a.active {
    color: var(--ssc-coral-dark);
}

.page-treatment-detail .detail-container .right nav a {
    color: var(--ssc-text);
}

.page-treatment-detail .detail-container .right nav a.active:before,
.page-treatment-detail .whats-next-container h3.special-title:after {
    background: var(--ssc-coral);
}

.page-treatment-detail .dark-container,
.page-treatment-detail .dark-container h3.special-title,
.page-treatment-detail .tabs-container .tabs a.active,
.page-treatment-detail .tabs-container .tab-content,
.page-treatment-detail .tabs-container h3.special-title {
    background: var(--ssc-taupe);
}

.page-treatment-detail .dark-container,
.page-treatment-detail .dark-container a,
.page-treatment-detail .dark-container address,
.page-treatment-detail .dark-container dl,
.page-treatment-detail .dark-container h1,
.page-treatment-detail .dark-container h2,
.page-treatment-detail .dark-container h3,
.page-treatment-detail .dark-container h4,
.page-treatment-detail .dark-container h5,
.page-treatment-detail .dark-container h6,
.page-treatment-detail .dark-container label,
.page-treatment-detail .dark-container legend,
.page-treatment-detail .dark-container li,
.page-treatment-detail .dark-container mark,
.page-treatment-detail .dark-container p,
.page-treatment-detail .dark-container td,
.page-treatment-detail .dark-container th,
.page-treatment-detail .dark-container time,
.page-treatment-detail .tabs-container .tabs a.active p,
.page-treatment-detail .tabs-container .tab-content,
.page-treatment-detail .tabs-container .tab-content a,
.page-treatment-detail .tabs-container .tab-content address,
.page-treatment-detail .tabs-container .tab-content dl,
.page-treatment-detail .tabs-container .tab-content h1,
.page-treatment-detail .tabs-container .tab-content h2,
.page-treatment-detail .tabs-container .tab-content h3,
.page-treatment-detail .tabs-container .tab-content h4,
.page-treatment-detail .tabs-container .tab-content h5,
.page-treatment-detail .tabs-container .tab-content h6,
.page-treatment-detail .tabs-container .tab-content label,
.page-treatment-detail .tabs-container .tab-content legend,
.page-treatment-detail .tabs-container .tab-content li,
.page-treatment-detail .tabs-container .tab-content mark,
.page-treatment-detail .tabs-container .tab-content p,
.page-treatment-detail .tabs-container .tab-content td,
.page-treatment-detail .tabs-container .tab-content th,
.page-treatment-detail .tabs-container .tab-content time,
.page-treatment-detail .tabs-container h3.special-title {
    color: var(--ssc-ivory);
}

.page-treatment-detail .white-container,
.page-treatment-detail .white-container h3.special-title {
    background: var(--ssc-paper);
}

.page-treatment-detail .white-container h3.special-title,
.page-treatment-detail .tabs-container .tabs a,
.page-treatment-detail .results-container article .image span {
    border-color: var(--ssc-coral);
}

.page-treatment-detail .tabs-container .tabs a,
.page-treatment-detail .tabs-container .tabs a .center p {
    color: var(--ssc-text);
}

.page-treatment-detail .tabs-container .tabs a.active,
.page-treatment-detail .tabs-container .tabs a.active .center,
.page-treatment-detail .tabs-container .tabs a.active .center p,
.page-treatment-detail .tabs-container .tabs a.active .center span {
    color: var(--ssc-ivory);
}

.page-treatment-detail .whats-next-container {
    background: #f0e9e3;
}

/* Contact details and tabs. */
.page-contact .contact-container h3 {
    color: var(--ssc-heading);
}

.page-contact .contact-container .tabs a.activated {
    color: var(--ssc-coral-dark);
    border-color: var(--ssc-coral);
    border-bottom-color: var(--ssc-paper);
    background: var(--ssc-paper);
}

.page-contact .contact-container .col1 .phone,
.page-contact .contact-container .col1 .email,
.page-contact .map-directions a {
    color: var(--ssc-coral-dark);
}

input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
    border-color: var(--ssc-coral);
}

.announcement a:focus,
.announcement button:focus,
.page-home .info-container a:focus,
.page-home .info-container button:focus,
.page-treatment-detail .dark-container a:focus,
.page-treatment-detail .dark-container button:focus,
.page-treatment-detail .tabs-container .tab-content a:focus,
.page-treatment-detail .tabs-container .tab-content button:focus {
    outline-color: var(--ssc-ivory) !important;
    outline-offset: 3px;
}

.site-footer .footer-links .contact .footer-location-label,
.site-footer .footer-links .contact .ph,
.site-footer .footer-legal a,
.site-footer .footer-legal p {
    color: var(--ssc-heading);
}

@media (min-width: 64em) {
    .page-home .hero-container {
        min-height: 514px;
        background-position: center center;
    }

    .page-home .hero-container .wrap {
        top: 185px;
        left: 0;
        width: 50%;
    }
}

@media (min-width: 37.5em) and (max-width: 63.9375em) {
    .page-home .hero-container h1 {
        max-width: 400px;
        font-size: 40px;
        line-height: 1.08;
    }
}

@media (max-width: 37.499em) {
    .page-home .hero-container h1 {
        font-size: 32px;
        line-height: 1.08;
    }
}