/* ===========================
Uxbridge Massage – Brand Base
=========================== */
:root {
--ux-primary: #4f7e71;
--ux-primary-dark: #3c6459;
--ux-secondary: #cba27a;
--ux-accent: #e2b8ae;
--ux-bg: #f7f4ef;
--ux-card-bg: #ffffff;
--ux-heading: #1f2933;
--ux-body: #374151;
--ux-muted: #6b7280;
--ux-border: #e5e7eb;
}
/* Global */
body {
background-color: var(--ux-bg);
color: var(--ux-body);
line-height: 1.6;
}
h1, h2, h3, h4 {
color: var(--ux-heading);
letter-spacing: 0.03em;
}
h1 {
font-size: clamp(2.4rem, 4vw, 3.2rem);
line-height: 1.1;
}
h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem);
margin-bottom: 0.8em;
}
h3 {
font-size: 1.3rem;
margin-bottom: 0.4em;
}
p {
font-size: 1rem;
color: var(--ux-body);
}
/* Make section padding more luxurious */
.sqs-block-html,
.sqs-block-text,
.sqs-block-quote,
.sqs-block-accordion,
.sqs-block-summary-v2,
.sqs-block-image {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
section,
.sqs-row {
padding-top: 4rem;
padding-bottom: 4rem;
}
/* ===========================
Buttons
=========================== */
.sqs-block-button-element,
.sqs-button-element--primary,
.sqs-button-element--secondary,
[class*="sqs-block-button-element"] {
border-radius: 999px !important;
padding: 0.85em 2.4em !important;
font-size: 0.9rem !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
font-weight: 600 !important;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
/* Primary button style */
.sqs-block-button-element--medium.sqs-block-button-element--primary,
.sqs-button-element--primary {
background-color: var(--ux-primary) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 10px 30px rgba(79, 126, 113, 0.25);
}
.sqs-block-button-element--medium.sqs-block-button-element--primary:hover,
.sqs-button-element--primary:hover {
background-color: var(--ux-primary-dark) !important;
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(60, 100, 89, 0.35);
}
/* Secondary button style */
.sqs-block-button-element--medium.sqs-block-button-element--secondary,
.sqs-button-element--secondary {
background-color: transparent !important;
color: var(--ux-primary) !important;
border: 1px solid var(--ux-primary) !important;
box-shadow: none !important;
}
.sqs-block-button-element--medium.sqs-block-button-element--secondary:hover,
.sqs-button-element--secondary:hover {
background-color: #ffffff !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* Text links */
a {
color: var(--ux-primary);
}
a:hover {
color: var(--ux-primary-dark);
}
/* ===========================
Cards (services, locations, who-it’s-for)
Works nicely with Summary Blocks & Grid Layouts
=========================== */
.sqs-block-summary-v2 .summary-item,
.sqs-block-summary-v2 .summary-item-record-type-blog,
.sqs-block-summary-v2 .summary-item-record-type-page {
background-color: var(--ux-card-bg);
border-radius: 22px;
padding: 1.8rem;
border: 1px solid rgba(229, 231, 235, 0.8);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sqs-block-summary-v2 .summary-item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.sqs-block-summary-v2 .summary-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.3rem;
}
.sqs-block-summary-v2 .summary-excerpt {
color: var(--ux-muted);
}
/* ===========================
Hero Section
(Works best if your first section is a Banner)
=========================== */
section:first-of-type .sqs-block-html,
section:first-of-type .sqs-block-text {
text-align: left;
}
section:first-of-type {
background: radial-gradient(circle at top left, rgba(226, 184, 174, 0.25), transparent 55%),
linear-gradient(135deg, #f7f4ef 0%, #ffffff 60%);
}
/* Tighten hero subtext */
section:first-of-type p {
max-width: 600px;
}
/* ===========================
Testimonials
(Use Quote Block or Text)
=========================== */
.sqs-block-quote blockquote {
background-color: var(--ux-card-bg);
border-radius: 22px;
border: 1px solid var(--ux-border);
padding: 2.2rem 2.4rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
font-style: normal;
position: relative;
}
.sqs-block-quote blockquote:before {
content: "“";
font-size: 3rem;
color: var(--ux-accent);
position: absolute;
top: 1.4rem;
left: 1.4rem;
font-family: inherit;
}
.sqs-block-quote cite {
display: block;
margin-top: 1.2rem;
font-weight: 600;
color: var(--ux-primary);
}
/* ===========================
FAQ – Accordion Block
=========================== */
.sqs-block-accordion .accordion-item {
border-bottom: 1px solid var(--ux-border);
padding: 0.7rem 0;
}
.sqs-block-accordion .accordion-item__title {
font-weight: 600;
font-size: 1rem;
color: var(--ux-heading);
}
.sqs-block-accordion .accordion-item__content {
color: var(--ux-muted);
padding-top: 0.3rem;
}
/* Optional: soften the expand/collapse icon if visible */
.sqs-block-accordion .accordion-item__toggle-icon {
color: var(--ux-primary);
}
/* ===========================
Section Styling – subtle alternation
=========================== */
section:nth-of-type(odd),
.sqs-row:nth-of-type(odd) {
background-color: var(--ux-bg);
}
section:nth-of-type(even),
.sqs-row:nth-of-type(even) {
background-color: #ffffff;
}
/* ===========================
Lists & “How it works”
=========================== */
ol {
counter-reset: ux-counter;
list-style: none;
padding-left: 0;
}
ol li {
counter-increment: ux-counter;
margin-bottom: 1.4rem;
position: relative;
padding-left: 2.4rem;
}
ol li::before {
content: counter(ux-counter);
position: absolute;
left: 0;
top: 0.1rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
background-color: var(--ux-secondary);
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
/* ===========================
Small details
=========================== */
::selection {
background: rgba(79, 126, 113, 0.25);
}
/* Reduce max-width for long text sections for easier reading */
.sqs-block-html .sqs-block-content,
.sqs-block-text .sqs-block-content {
max-width: 700px;
}
/* Center footer text */
footer, .Footer {
text-align: center;
font-size: 0.85rem;
color: var(--ux-muted);
}
