/* =========================================================
Paradise Point
MASTER STYLESHEET
Luxury Wellness / Modern Gen-Z
========================================================= */
/* =========================================================
1. ROOT VARIABLES
========================================================= */
:root {
--cream: #f5f0e7;
--cream-light: #fbf9f5;
--cream-dark: #e9e0d2;
--espresso: #211b17;
--brown: #342a24;
--brown-light: #55473e;
--sage: #65705d;
--sage-dark: #485144;
--sage-light: #dce0d5;
--gold: #b59a67;
--gold-light: #d7c59f;
--white: #ffffff;
--black: #11100e;
--text: #2b2520;
--muted: #766d64;
--border: rgba(33, 27, 23, 0.14);
--border-light: rgba(255, 255, 255, 0.25);
--max-width: 1280px;
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Montserrat", Arial, sans-serif;
--transition: 0.4s ease;
--slow-transition: 0.7s ease;
}
/* =========================================================
2. RESET
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--cream-light);
color: var(--text);
font-family: var(--sans);
font-size: 14px;
line-height: 1.7;
overflow-x: hidden;
}
img {
width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
button {
cursor: pointer;
}
ul {
list-style: none;
}
/* =========================================================
3. GLOBAL TYPOGRAPHY
========================================================= */
h1,
h2,
h3,
h4 {
font-family: var(--serif);
font-weight: 400;
line-height: 0.95;
color: var(--espresso);
}
h1 em,
h2 em,
h3 em {
font-style: italic;
color: var(--sage);
}
p {
color: var(--muted);
}
.section-padding {
padding: 120px 7%;
}
.eyebrow,
.section-label,
.hero-small-text,
.journey-label,
.quote-small {
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.eyebrow {
color: var(--gold);
}
.section-label {
color: var(--sage);
}
.container {
width: min(100% - 80px, var(--max-width));
margin: 0 auto;
}
/* =========================================================
4. NAVIGATION — UNIFIED ACROSS ALL PAGES
========================================================= */
.navbar {
position: relative;
z-index: 1000;
width: 100%;
min-height: 86px;
padding: 18px 5%;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(251, 249, 245, 0.97);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.logo img {
display: block;
width: 250px;
height: auto;
max-height: 150px;
object-fit: contain;
}
/* BOTH NAVIGATION CLASSES */
.nav-links,
.nav-menu {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
margin-left: auto;
}
/* NAVIGATION LINKS */
.nav-links a,
.nav-menu a {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
color: var(--brown-light);
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.16em;
white-space: nowrap;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* UNDERLINE */
.nav-links a::after,
.nav-menu a::after {
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: 0;
height: 1px;
background: var(--gold);
transition: width 0.3s ease;
}
.nav-links a:hover,
.nav-menu a:hover {
color: var(--sage-dark);
}
.nav-links a:hover::after,
.nav-menu a:hover::after {
width: 100%;
}
/* BOOK NOW */
.nav-book,
.nav-book-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 13px 20px;
color: var(--white) !important;
background: var(--espresso);
border: 1px solid var(--espresso);
transition:
background 0.3s ease,
border-color 0.3s ease,
transform 0.3s ease;
}
.nav-book::after,
.nav-book-btn::after {
display: none !important;
}
.nav-book:hover,
.nav-book-btn:hover {
color: var(--white) !important;
background: var(--sage-dark);
border-color: var(--sage-dark);
transform: translateY(-2px);
}
/* =========================================================
NAVIGATION — TABLET
========================================================= */
@media (max-width: 1000px) {
.navbar {
flex-wrap: wrap;
gap: 15px;
padding: 15px 4%;
}
.nav-links,
.nav-menu {
width: 100%;
margin-left: 0;
justify-content: center;
gap: 20px;
overflow-x: auto;
scrollbar-width: none;
}
.nav-links::-webkit-scrollbar,
.nav-menu::-webkit-scrollbar {
display: none;
}
}
/* =========================================================
NAVIGATION — MOBILE
========================================================= */
@media (max-width: 700px) {
.navbar {
min-height: auto;
padding: 14px 20px;
align-items: center;
gap: 12px;
}
.logo img {
width: 110px;
max-height: 45px;
}
.logo {
font-size: 26px;
}
.nav-links,
.nav-menu {
width: 100%;
justify-content: flex-start;
gap: 18px;
margin-left: 0;
padding-bottom: 3px;
overflow-x: auto;
scrollbar-width: none;
}
.nav-links::-webkit-scrollbar,
.nav-menu::-webkit-scrollbar {
display: none;
}
.nav-links a,
.nav-menu a {
flex-shrink: 0;
font-size: 8px;
}
.nav-book,
.nav-book-btn {
padding: 10px 13px;
}
}
/* =========================================================
5. BUTTONS
========================================================= */
.light-button,
.dark-button,
.btn-light,
.booking-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
min-height: 52px;
padding: 0 28px;
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: var(--transition);
}
.light-button,
.btn-light {
color: var(--espresso);
background: var(--cream-light);
border: 1px solid var(--cream-light);
}
.light-button:hover,
.btn-light:hover {
background: transparent;
color: var(--white);
border-color: var(--white);
transform: translateY(-3px);
}
.dark-button {
color: var(--white);
background: var(--espresso);
border: 1px solid var(--espresso);
}
.dark-button:hover {
background: var(--sage-dark);
border-color: var(--sage-dark);
transform: translateY(-3px);
}
.hero-text-link,
.text-button,
.luxury-link,
.experience-scroll,
.experience-text-link {
display: inline-flex;
align-items: center;
gap: 15px;
margin-top: 28px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: var(--transition);
}
.hero-text-link span,
.luxury-link span,
.experience-scroll span {
font-size: 18px;
transition: var(--transition);
}
.hero-text-link:hover span,
.luxury-link:hover span,
.experience-scroll:hover span {
transform: translateX(6px);
}
.text-button,
.experience-text-link {
color: var(--sage-dark);
}
.text-button:hover,
.experience-text-link:hover {
color: var(--gold);
}
/* =========================================================
6. HOMEPAGE HERO
========================================================= */
.home-hero {
position: relative;
min-height: calc(100vh - 86px);
display: flex;
align-items: center;
overflow: hidden;
background: var(--espresso);
}
.home-hero-image {
position: absolute;
inset: 0;
}
.home-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =====================================================
Paradise Point— SOFT CLEAR HERO COVER
===================================================== */
.home-hero-overlay {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
/* Soft transparent cover */
background:
linear-gradient(
90deg,
rgba(25, 20, 18, 0.48) 0%,
rgba(25, 20, 18, 0.28) 40%,
rgba(25, 20, 18, 0.10) 75%,
rgba(25, 20, 18, 0.05) 100%
) !important;
}
.home-hero-content {
position: relative;
z-index: 2;
width: min(700px, 80%);
margin-left: 9%;
color: var(--white);
}
.home-hero-content .eyebrow {
color: var(--gold-light);
}
.home-hero-content h1 {
margin: 25px 0;
color: var(--white);
font-size: clamp(70px, 9vw, 145px);
letter-spacing: -0.035em;
}
.home-hero-content h1 em {
color: var(--cream);
}
.home-hero-content > p {
max-width: 520px;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
}
.home-hero-buttons {
display: flex;
align-items: center;
gap: 25px;
margin-top: 35px;
}
.home-hero-side {
position: absolute;
right: 5%;
bottom: 10%;
z-index: 2;
display: flex;
flex-direction: column;
gap: 8px;
color: rgba(255, 255, 255, 0.7);
text-align: right;
}
.home-hero-side span {
font-family: var(--serif);
font-size: 40px;
}
.home-hero-side small {
font-size: 8px;
letter-spacing: 0.2em;
}
.home-hero-bottom {
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 5%;
color: rgba(255, 255, 255, 0.65);
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 9px;
letter-spacing: 0.15em;
}
/* =========================================================
7. HOMEPAGE INTRO
========================================================= */
.home-intro {
display: grid;
grid-template-columns: 100px 1fr;
gap: 50px;
padding: 140px 10%;
}
.home-intro-number {
font-family: var(--serif);
font-size: 70px;
color: var(--gold);
line-height: 1;
}
.home-intro-content {
max-width: 900px;
}
.home-intro-content h2 {
margin-bottom: 30px;
font-size: clamp(50px, 6vw, 90px);
}
.home-intro-content p {
max-width: 720px;
font-size: 15px;
line-height: 2;
}
/* =========================================================
8. HOMEPAGE TREATMENTS
========================================================= */
.home-treatments {
padding: 120px 7%;
background: var(--cream);
}
.home-section-heading {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 60px;
}
.home-section-heading h2 {
max-width: 700px;
font-size: clamp(50px, 6vw, 90px);
}
.home-treatment-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.home-treatment-card {
overflow: hidden;
background: var(--cream-light);
border: 1px solid var(--border);
transition: var(--slow-transition);
}
.home-treatment-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 60px rgba(33, 27, 23, 0.1);
}
.home-treatment-image {
position: relative;
height: 340px;
overflow: hidden;
}
.home-treatment-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.home-treatment-card:hover .home-treatment-image img {
transform: scale(1.05);
}
.home-treatment-content {
padding: 30px;
}
.home-treatment-content h3 {
margin: 10px 0 15px;
font-size: 38px;
}
.home-treatment-content p {
font-size: 13px;
}
/* =========================================================
9. HOMEPAGE EXPERIENCE
========================================================= */
.home-experience {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--espresso);
}
.home-experience-image {
position: absolute;
inset: 0;
}
.home-experience-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-experience-overlay {
position: absolute;
inset: 0;
background: rgba(30, 24, 20, 0.55);
}
.home-experience-content {
position: relative;
z-index: 2;
width: min(700px, 85%);
margin-left: 10%;
}
.home-experience-content h2 {
margin: 20px 0;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
.home-experience-content p {
max-width: 580px;
color: rgba(255, 255, 255, 0.8);
}
/* =========================================================
10. HOMEPAGE PHILOSOPHY
========================================================= */
.home-philosophy {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
}
.home-philosophy-image {
overflow: hidden;
}
.home-philosophy-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-philosophy-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10%;
}
.home-philosophy-content h2 {
margin: 20px 0 30px;
font-size: clamp(50px, 6vw, 82px);
}
.home-philosophy-content p {
max-width: 520px;
line-height: 2;
}
/* =========================================================
11. HOMEPAGE VALUES
========================================================= */
.home-values {
padding: 120px 7%;
background: var(--sage);
}
.home-values-heading {
max-width: 800px;
margin-bottom: 60px;
}
.home-values-heading h2 {
margin-top: 20px;
color: var(--white);
font-size: clamp(50px, 6vw, 90px);
}
.home-values-heading .eyebrow {
color: var(--gold-light);
}
.home-values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255, 255, 255, 0.25);
}
.home-values-grid > * {
background: var(--sage);
padding: 40px;
}
.home-values-grid h3 {
margin-bottom: 15px;
color: var(--white);
font-size: 36px;
}
.home-values-grid p {
color: rgba(255, 255, 255, 0.75);
}
/* =========================================================
12. HOMEPAGE QUOTE
========================================================= */
.home-quote {
padding: 140px 10%;
text-align: center;
background: var(--cream-light);
}
.quote-mark {
display: block;
margin-bottom: 20px;
color: var(--gold);
font-family: var(--serif);
font-size: 70px;
}
.home-quote blockquote {
max-width: 900px;
margin: auto;
color: var(--espresso);
font-family: var(--serif);
font-size: clamp(38px, 5vw, 70px);
font-style: italic;
line-height: 1;
}
/* =========================================================
13. HOMEPAGE FINAL CTA
========================================================= */
.home-final {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--espresso);
}
.home-final-image {
position: absolute;
inset: 0;
}
.home-final-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-final-overlay {
position: absolute;
inset: 0;
background: rgba(25, 20, 17, 0.62);
}
.home-final-content {
position: relative;
z-index: 2;
width: min(750px, 85%);
margin: auto;
text-align: center;
}
.home-final-content h2 {
margin: 20px 0 30px;
color: var(--white);
font-size: clamp(55px, 7vw, 105px);
}
.home-final-content p {
color: rgba(255, 255, 255, 0.8);
}
/* =========================================================
14. SERVICES HERO
========================================================= */
.page-hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--espresso);
}
.page-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.page-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(26, 21, 18, 0.75),
rgba(26, 21, 18, 0.25)
);
}
.page-hero-content {
position: relative;
z-index: 2;
max-width: 750px;
margin-left: 9%;
color: var(--white);
}
.page-hero-content .hero-small-text {
color: var(--gold-light);
}
.page-hero-content h1 {
margin: 25px 0;
color: var(--white);
font-size: clamp(70px, 9vw, 125px);
}
.page-hero-content > p:last-child {
max-width: 600px;
color: rgba(255, 255, 255, 0.8);
}
/* =========================================================
15. SERVICES INTRO
========================================================= */
.services-intro {
background: var(--cream-light);
}
.services-intro-content {
max-width: 900px;
margin: 30px auto 0;
}
.services-intro-content h2 {
margin-bottom: 30px;
font-size: clamp(50px, 6vw, 85px);
}
.services-intro-content p {
max-width: 700px;
font-size: 15px;
line-height: 2;
}
/* =========================================================
16. SERVICES GRID
========================================================= */
.all-services {
padding-top: 0;
background: var(--cream-light);
}
.services-page-grid {
width: min(1180px, 90%);
margin: auto;
display: flex;
flex-direction: column;
gap: 100px;
}
.full-service-card {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 540px;
background: var(--cream);
border: 1px solid var(--border);
}
.full-service-card.reverse .full-service-image {
order: 2;
}
.full-service-card.reverse .full-service-content {
order: 1;
}
.full-service-image {
position: relative;
min-height: 500px;
overflow: hidden;
}
.full-service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.full-service-card:hover .full-service-image img {
transform: scale(1.04);
}
.full-service-image > span {
position: absolute;
top: 25px;
left: 25px;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: rgba(33, 27, 23, 0.7);
border: 1px solid rgba(255, 255, 255, 0.35);
font-family: var(--serif);
font-size: 20px;
}
.full-service-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px;
}
.full-service-content h2 {
margin: 15px 0 25px;
font-size: clamp(45px, 5vw, 70px);
}
.full-service-content > p {
max-width: 480px;
line-height: 1.9;
}
.service-meta {
display: flex;
align-items: center;
gap: 15px;
color: var(--sage-dark);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.service-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 35px;
padding-top: 25px;
border-top: 1px solid var(--border);
}
.service-bottom strong {
color: var(--espresso);
font-family: var(--serif);
font-size: 28px;
}
.service-bottom a {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sage-dark);
}
.service-bottom a:hover {
color: var(--gold);
}
/* =========================================================
17. SERVICES CTA
========================================================= */
.services-cta {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--espresso);
text-align: center;
}
.services-cta-image {
position: absolute;
inset: 0;
}
.services-cta-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.services-cta-overlay {
position: absolute;
inset: 0;
background: rgba(30, 23, 19, 0.62);
}
.services-cta-content {
position: relative;
z-index: 2;
width: min(850px, 90%);
}
.services-cta-content > p {
color: var(--gold-light);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.25em;
}
.services-cta-content h2 {
margin: 25px 0 35px;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
/* =========================================
ABOUT HERO — FULL SCREEN
========================================= */
.about-hero {
position: relative;
width: 100%;
height: calc(100vh - 86px);
min-height: 700px;
overflow: hidden;
display: flex;
align-items: center;
background: var(--espresso);
}
/* HERO IMAGE */
.about-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image: url("images/about-hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* DARK OVERLAY */
.about-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(26, 21, 18, 0.80) 0%,
rgba(26, 21, 18, 0.48) 45%,
rgba(26, 21, 18, 0.15) 100%
);
}
/* CONTENT */
.about-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 7%;
}
/* SMALL LABEL */
.about-hero-content .eyebrow {
margin-bottom: 22px;
color: rgba(255,255,255,0.75);
}
/* TITLE */
.about-hero-content h1 {
max-width: 850px;
margin: 0 0 30px;
font-family: var(--serif);
font-size: clamp(65px, 8vw, 120px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.03em;
color: var(--white);
}
/* SECOND LINE */
.about-hero-content h1 span {
display: block;
}
/* DESCRIPTION */
.about-hero-text {
max-width: 500px;
margin-bottom: 35px;
font-family: var(--sans);
font-size: 15px;
line-height: 1.8;
color: rgba(255,255,255,0.82);
}
/* STORY LINK */
.about-hero-content .luxury-link {
display: inline-flex;
align-items: center;
gap: 15px;
color: var(--white);
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-decoration: none;
transition: 0.4s ease;
}
.about-hero-content .luxury-link span {
font-size: 18px;
transition: transform 0.4s ease;
}
.about-hero-content .luxury-link:hover span {
transform: translateY(5px);
}
/* NUMBER */
.about-hero-number {
position: absolute;
right: 6%;
bottom: 60px;
z-index: 3;
font-family: var(--serif);
font-size: 55px;
font-weight: 400;
color: rgba(255,255,255,0.75);
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 768px) {
.about-hero {
height: calc(100vh - 75px);
min-height: 650px;
}
.about-hero-content {
padding: 0 8%;
}
.about-hero-content h1 {
font-size: clamp(55px, 15vw, 85px);
}
.about-hero-text {
max-width: 90%;
font-size: 14px;
}
.about-hero-number {
display: none;
}
}
/* =========================================================
19. ABOUT PHILOSOPHY
========================================================= */
.about-philosophy {
display: grid;
grid-template-columns: 100px 1fr 1fr;
gap: 60px;
padding: 140px 9%;
}
.philosophy-number {
font-family: var(--serif);
font-size: 70px;
color: var(--gold);
}
.philosophy-content h2 {
margin: 20px 0 30px;
font-size: clamp(50px, 6vw, 82px);
}
.philosophy-content p {
max-width: 500px;
line-height: 2;
}
.philosophy-image {
min-height: 500px;
overflow: hidden;
}
.philosophy-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-caption {
margin-top: 12px;
color: var(--muted);
font-size: 8px;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* =========================================================
20. ABOUT STORY
========================================================= */
.about-story {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
background: var(--cream);
}
.story-image {
overflow: hidden;
}
.story-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.story-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10%;
}
.story-content h2 {
margin: 20px 0 30px;
font-size: clamp(50px, 6vw, 80px);
}
.story-content p {
max-width: 530px;
margin-bottom: 18px;
line-height: 2;
}
.story-signature {
margin-top: 25px;
font-family: var(--serif);
font-size: 32px;
font-style: italic;
color: var(--sage-dark);
}
/* =========================================================
21. ABOUT VALUES
========================================================= */
.about-values {
padding: 130px 7%;
background: var(--espresso);
}
.values-heading {
max-width: 800px;
margin-bottom: 60px;
}
.values-heading h2 {
margin-top: 20px;
color: var(--white);
font-size: clamp(50px, 6vw, 90px);
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.value-card {
min-height: 300px;
padding: 40px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: var(--transition);
}
.value-card:hover {
transform: translateY(-6px);
border-color: var(--gold);
}
.value-card.featured {
background: var(--sage);
border-color: var(--sage);
}
.value-number {
display: block;
margin-bottom: 45px;
color: var(--gold-light);
font-family: var(--serif);
font-size: 25px;
}
.value-icon {
margin-bottom: 25px;
color: var(--gold-light);
font-size: 24px;
}
.value-card h3 {
margin-bottom: 15px;
color: var(--white);
font-size: 38px;
}
.value-card p {
color: rgba(255, 255, 255, 0.68);
}
/* =========================================================
22. ABOUT TEAM
========================================================= */
.about-team {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 650px;
}
.team-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10%;
}
.team-content h2 {
margin: 20px 0 30px;
font-size: clamp(50px, 6vw, 80px);
}
.team-content p {
max-width: 520px;
line-height: 2;
}
.team-image {
position: relative;
min-height: 600px;
overflow: hidden;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 55%,
rgba(20, 16, 13, 0.5)
);
}
/* =========================================================
23. ABOUT SENSORY
========================================================= */
.about-sensory {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
}
.sensory-background {
position: absolute;
inset: 0;
}
.sensory-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sensory-overlay {
position: absolute;
inset: 0;
background: rgba(30, 24, 20, 0.6);
}
.sensory-content {
position: relative;
z-index: 2;
width: min(850px, 90%);
}
.sensory-content h2 {
margin: 20px 0 30px;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
.sensory-content p {
max-width: 650px;
margin: auto;
color: rgba(255, 255, 255, 0.8);
}
/* =========================================================
24. ABOUT QUOTE
========================================================= */
.about-quote {
padding: 130px 10%;
text-align: center;
}
.about-quote blockquote {
max-width: 950px;
margin: auto;
font-family: var(--serif);
font-size: clamp(40px, 5vw, 72px);
font-style: italic;
line-height: 1;
color: var(--espresso);
}
/* =========================================================
25. ABOUT FINAL CTA
========================================================= */
.about-final-cta {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background: var(--espresso);
}
.final-cta-content {
position: relative;
z-index: 2;
max-width: 800px;
}
.final-cta-content h2 {
margin: 20px 0 35px;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
.final-cta-buttons {
display: flex;
justify-content: center;
gap: 20px;
}
/* =========================================================
26. EXPERIENCE INTRO
========================================================= */
.experience-intro {
display: grid;
grid-template-columns: 100px 1fr;
gap: 50px;
padding: 140px 10%;
}
.experience-intro-number {
font-family: var(--serif);
font-size: 70px;
color: var(--gold);
}
.experience-intro-main {
max-width: 950px;
}
.experience-lead {
margin-top: 25px;
max-width: 800px;
font-family: var(--serif);
font-size: clamp(35px, 4vw, 58px);
line-height: 1.05;
color: var(--espresso);
}
/* =========================================================
27. EXPERIENCE JOURNEY
========================================================= */
.experience-journey {
background: var(--cream);
}
.journey-step {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 650px;
}
.journey-step.reverse .journey-image {
order: 2;
}
.journey-step.reverse .journey-content {
order: 1;
}
.journey-image {
position: relative;
min-height: 600px;
overflow: hidden;
}
.journey-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.journey-step:hover .journey-image img {
transform: scale(1.04);
}
.journey-image-number {
position: absolute;
top: 30px;
left: 30px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
background: rgba(30, 24, 20, 0.7);
font-family: var(--serif);
font-size: 22px;
}
.journey-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10%;
}
.journey-content h2 {
margin: 20px 0 25px;
font-size: clamp(50px, 5vw, 75px);
}
.journey-content p {
max-width: 500px;
line-height: 2;
}
/* =========================================================
28. EXPERIENCE STATEMENT
========================================================= */
.experience-statement {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
}
.statement-image {
position: absolute;
inset: 0;
}
.statement-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.statement-overlay {
position: absolute;
inset: 0;
background: rgba(25, 20, 17, 0.58);
}
.statement-content {
position: relative;
z-index: 2;
width: min(850px, 90%);
}
.statement-content h2 {
margin: 20px 0;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
.statement-content p {
color: rgba(255, 255, 255, 0.8);
}
/* =========================================================
29. EXPERIENCE FEATURES
========================================================= */
.experience-features {
padding: 130px 8%;
}
.features-heading {
max-width: 750px;
margin-bottom: 70px;
}
.features-heading h2 {
margin-top: 20px;
font-size: clamp(50px, 6vw, 85px);
}
.features-list {
border-top: 1px solid var(--border);
}
.experience-feature {
display: grid;
grid-template-columns: 90px 1fr;
gap: 40px;
padding: 45px 0;
border-bottom: 1px solid var(--border);
transition: var(--transition);
}
.experience-feature:hover {
padding-left: 15px;
}
.experience-feature > span {
font-family: var(--serif);
font-size: 25px;
color: var(--gold);
}
.experience-feature h3 {
margin-bottom: 10px;
font-size: 42px;
}
.experience-feature p {
max-width: 700px;
}
/* =========================================================
30. EXPERIENCE GALLERY
========================================================= */
.experience-gallery {
padding: 120px 7%;
background: var(--cream);
}
.gallery-heading {
display: flex;
align-items: end;
justify-content: space-between;
margin-bottom: 50px;
}
.gallery-heading h2 {
margin-top: 20px;
font-size: clamp(50px, 6vw, 85px);
}
.experience-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 300px;
gap: 15px;
}
.experience-gallery-item {
position: relative;
overflow: hidden;
}
.experience-gallery-item.large {
grid-row: span 2;
}
.experience-gallery-item.wide {
grid-column: span 2;
}
.experience-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.experience-gallery-item:hover img {
transform: scale(1.05);
}
.gallery-item-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
transparent 55%,
rgba(20, 16, 13, 0.5)
);
opacity: 0;
transition: var(--transition);
}
.experience-gallery-item:hover .gallery-item-overlay {
opacity: 1;
}
/* =========================================================
31. EXPERIENCE QUOTE
========================================================= */
.experience-quote {
padding: 130px 10%;
text-align: center;
}
.experience-quote blockquote {
max-width: 950px;
margin: 25px auto;
font-family: var(--serif);
font-size: clamp(42px, 5vw, 75px);
font-style: italic;
line-height: 1;
}
.experience-quote-button {
margin-top: 30px;
}
/* =========================================================
32. EXPERIENCE FINAL
========================================================= */
.experience-final {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background: var(--espresso);
}
.experience-final-image {
position: absolute;
inset: 0;
}
.experience-final-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.experience-final-overlay {
position: absolute;
inset: 0;
background: rgba(25, 20, 17, 0.62);
}
.experience-final-content {
position: relative;
z-index: 2;
width: min(850px, 90%);
}
.experience-final-content h2 {
margin: 20px 0 35px;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
/* =================================================
CONTACT HERO
================================================= */
.contact-hero {
position: relative;
width: 100%;
height: 90vh;
min-height: 700px;
overflow: hidden;
display: flex;
align-items: center;
background: #211b17;
}
/* HERO IMAGE */
.contact-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* DARK OVERLAY */
.contact-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(20, 16, 13, 0.80) 0%,
rgba(20, 16, 13, 0.50) 45%,
rgba(20, 16, 13, 0.15) 100%
);
}
/* HERO WORDS */
.contact-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 7%;
color: #ffffff;
}
/* EYEBROW */
.contact-hero-content .eyebrow {
margin: 0 0 20px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
/* MAIN TITLE */
.contact-hero-content h1 {
margin: 0 0 30px;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(70px, 10vw, 140px);
font-weight: 400;
line-height: 0.82;
letter-spacing: -0.04em;
color: #ffffff;
}
.contact-hero-content h1 span {
display: block;
}
/* DESCRIPTION */
.contact-hero-content > p:not(.eyebrow) {
max-width: 480px;
margin: 0 0 35px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 15px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.85);
}
/* BOOKING BUTTON */
.contact-hero-content .light-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 28px;
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
font-family: "Montserrat", Arial, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-decoration: none;
background: transparent;
transition: 0.4s ease;
}
.contact-hero-content .light-button:hover {
background: #ffffff;
color: #211b17;
transform: translateY(-2px);
}
/* RIGHT SIDE NUMBER */
.contact-hero-side {
position: absolute;
right: 6%;
bottom: 55px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
color: rgba(255, 255, 255, 0.8);
}
.contact-hero-side span {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 55px;
font-weight: 400;
}
.contact-hero-side small {
margin-top: 5px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.6);
}
/* =================================================
MOBILE
================================================= */
@media (max-width: 768px) {
.contact-hero {
height: 82vh;
min-height: 620px;
}
.contact-hero-image {
object-position: center;
}
.contact-hero-content {
padding: 0 8%;
}
.contact-hero-content h1 {
font-size: clamp(65px, 17vw, 95px);
}
.contact-hero-content > p:not(.eyebrow) {
max-width: 90%;
font-size: 14px;
}
.contact-hero-side {
display: none;
}
}
/* =========================================================
34. CONTACT INTRO
========================================================= */
.contact-intro {
display: grid;
grid-template-columns: 100px 1fr;
gap: 50px;
padding: 130px 10%;
}
.contact-intro-number {
font-family: var(--serif);
font-size: 70px;
color: var(--gold);
}
.contact-intro-content {
max-width: 900px;
}
.contact-intro-content h2 {
margin: 20px 0 30px;
font-size: clamp(50px, 6vw, 85px);
}
.contact-intro-content p {
max-width: 700px;
line-height: 2;
}
/* =========================================================
35. CONTACT DETAILS
========================================================= */
.contact-details {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--cream);
}
.contact-info-image {
min-height: 650px;
overflow: hidden;
}
.contact-info-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-info-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10%;
}
.contact-info-content h2 {
margin: 20px 0 40px;
font-size: clamp(50px, 5vw, 75px);
}
.contact-detail {
display: grid;
grid-template-columns: 55px 1fr;
gap: 20px;
padding: 20px 0;
border-top: 1px solid var(--border);
}
.detail-number {
color: var(--gold);
font-family: var(--serif);
font-size: 22px;
}
.contact-detail h3 {
margin-bottom: 4px;
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.contact-detail p,
.contact-detail a {
color: var(--muted);
font-size: 13px;
}
.contact-detail a:hover {
color: var(--sage);
}
.contact-socials {
display: flex;
gap: 20px;
margin-top: 25px;
}
.contact-socials a {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sage-dark);
}
/* =========================================================
36. OPENING HOURS
========================================================= */
.opening-hours {
padding: 120px 10%;
}
.hours-heading {
max-width: 700px;
margin-bottom: 55px;
}
.hours-heading h2 {
margin-top: 20px;
font-size: clamp(50px, 6vw, 85px);
}
.hours-list {
max-width: 900px;
border-top: 1px solid var(--border);
}
.hours-row {
display: flex;
justify-content: space-between;
padding: 22px 0;
border-bottom: 1px solid var(--border);
}
.hours-row span:first-child {
font-weight: 600;
color: var(--espresso);
}
.hours-row span:last-child {
color: var(--muted);
}
.hours-row.closed span {
color: var(--gold);
}
/* =========================================================
37. BOOKING SECTION
========================================================= */
.booking-section {
position: relative;
padding: 130px 7%;
overflow: hidden;
background: var(--espresso);
}
.booking-background {
position: absolute;
inset: 0;
}
.booking-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.booking-overlay {
position: absolute;
inset: 0;
background: rgba(25, 20, 17, 0.7);
}
.booking-wrapper {
position: relative;
z-index: 2;
width: min(1050px, 100%);
margin: auto;
}
.booking-heading {
max-width: 800px;
margin-bottom: 60px;
}
.booking-heading h2 {
margin: 20px 0;
color: var(--white);
font-size: clamp(55px, 7vw, 90px);
}
.booking-heading p {
color: rgba(255, 255, 255, 0.75);
}
.booking-form {
padding: 50px;
background: rgba(251, 249, 245, 0.96);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.form-group {
margin-bottom: 25px;
}
.form-group.full {
width: 100%;
}
.form-group label {
display: block;
margin-bottom: 9px;
color: var(--espresso);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 15px 0;
color: var(--espresso);
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
outline: none;
transition: var(--transition);
}
.form-group textarea {
min-height: 130px;
resize: vertical;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--sage);
}
.booking-submit {
margin-top: 20px;
}
.booking-button {
color: var(--white);
background: var(--espresso);
border: 1px solid var(--espresso);
}
.booking-button:hover {
background: var(--sage-dark);
border-color: var(--sage-dark);
transform: translateY(-3px);
}
.booking-submit p {
margin-top: 15px;
font-size: 10px;
}
/* =========================================================
38. LOCATION
========================================================= */
.location-section {
padding: 120px 7%;
}
.location-heading {
max-width: 800px;
margin-bottom: 50px;
}
.location-heading h2 {
margin-top: 20px;
font-size: clamp(50px, 6vw, 85px);
}
.map-container {
width: 100%;
height: 500px;
overflow: hidden;
border: 1px solid var(--border);
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* =========================================================
39. CONTACT FINAL
========================================================= */
.contact-final {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background: var(--espresso);
}
.contact-final-image {
position: absolute;
inset: 0;
}
.contact-final-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact-final-overlay {
position: absolute;
inset: 0;
background: rgba(25, 20, 17, 0.65);
}
.contact-final-content {
position: relative;
z-index: 2;
width: min(850px, 90%);
}
.contact-final-content h2 {
margin: 20px 0 35px;
color: var(--white);
font-size: clamp(55px, 7vw, 100px);
}
/* =========================================================
40. FOOTER
========================================================= */
.footer {
padding: 80px 6% 25px;
color: rgba(255, 255, 255, 0.7);
background: var(--espresso);
}
.footer-main,
.footer-container {
width: min(1200px, 100%);
margin: auto;
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 60px;
padding-bottom: 70px;
}
.footer-brand {
max-width: 300px;
}
.footer-logo {
margin-bottom: 20px;
color: var(--white);
font-family: var(--serif);
font-size: 38px;
letter-spacing: 0.08em;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
line-height: 1.9;
}
.footer-column h4 {
margin-bottom: 22px;
color: var(--gold-light);
font-family: var(--sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.footer-column a {
display: block;
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
transition: var(--transition);
}
.footer-column a:hover {
color: var(--white);
transform: translateX(4px);
}
.footer-bottom {
width: min(1200px, 100%);
margin: auto;
padding-top: 25px;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.13);
color: rgba(255, 255, 255, 0.4);
font-size: 9px;
letter-spacing: 0.08em;
}
/* =========================================================
41. IMAGE HOVER EFFECT
========================================================= */
.philosophy-image,
.story-image,
.team-image,
.contact-info-image,
.journey-image {
position: relative;
}
.philosophy-image::after,
.story-image::after,
.team-image::after,
.contact-info-image::after,
.journey-image::after {
content: "";
position: absolute;
inset: 0;
background: rgba(181, 154, 103, 0.08);
pointer-events: none;
}
/* =========================================================
42. SELECTION
========================================================= */
::selection {
color: var(--white);
background: var(--sage-dark);
}
/* =========================================================
43. RESPONSIVE — TABLET
========================================================= */
@media (max-width: 1000px) {
.navbar {
flex-wrap: wrap;
gap: 20px;
}
.nav-links,
.nav-menu {
width: 100%;
justify-content: center;
gap: 18px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
.nav-links::-webkit-scrollbar,
.nav-menu::-webkit-scrollbar {
display: none;
}
.home-treatment-grid {
grid-template-columns: 1fr 1fr;
}
.home-treatment-card:last-child {
grid-column: span 2;
}
.home-values-grid {
grid-template-columns: 1fr;
}
.about-philosophy {
grid-template-columns: 80px 1fr;
}
.philosophy-image {
grid-column: 2;
}
.values-grid {
grid-template-columns: 1fr 1fr;
}
.footer-main,
.footer-container {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: span 2;
}
.experience-gallery-grid {
grid-template-columns: 1fr 1fr;
}
}
/* =========================================================
44. RESPONSIVE — MOBILE
========================================================= */
@media (max-width: 700px) {
body {
font-size: 13px;
}
.navbar {
min-height: auto;
padding: 15px 20px;
gap: 12px;
}
.logo img {
width: 110px;
max-height: 45px;
}
.logo {
font-size: 26px;
}
.nav-links,
.nav-menu {
justify-content: flex-start;
gap: 18px;
}
.nav-links a,
.nav-menu a {
flex-shrink: 0;
font-size: 8px;
}
.nav-book,
.nav-book-btn {
padding: 10px 13px;
}
.section-padding {
padding: 80px 6%;
}
.container {
width: min(100% - 40px, var(--max-width));
}
/* HERO */
.home-hero,
.about-hero,
.experience-hero,
.contact-hero {
min-height: 720px;
}
.home-hero-content,
.about-hero-content,
.experience-hero-content,
.contact-hero-content,
.page-hero-content {
width: 88%;
margin-left: 6%;
}
.home-hero-content h1,
.about-hero-content h1,
.experience-hero-content h1,
.contact-hero-content h1,
.page-hero-content h1 {
font-size: clamp(58px, 16vw, 90px);
}
.home-hero-buttons {
flex-direction: column;
align-items: flex-start;
}
.home-hero-side,
.about-hero-number,
.experience-hero-side,
.contact-hero-side {
right: 6%;
bottom: 5%;
}
.home-hero-bottom {
display: none;
}
/* HOME INTRO */
.home-intro,
.experience-intro,
.contact-intro {
grid-template-columns: 1fr;
gap: 20px;
padding: 85px 7%;
}
.home-intro-number,
.experience-intro-number,
.contact-intro-number {
font-size: 50px;
}
/* HOME TREATMENTS */
.home-treatments {
padding: 80px 6%;
}
.home-section-heading {
display: block;
}
.home-section-heading h2 {
margin-bottom: 30px;
}
.home-treatment-grid {
grid-template-columns: 1fr;
}
.home-treatment-card:last-child {
grid-column: auto;
}
.home-treatment-image {
height: 280px;
}
/* HOME PHILOSOPHY */
.home-philosophy,
.about-story,
.about-team,
.contact-details {
grid-template-columns: 1fr;
}
.home-philosophy-image {
min-height: 450px;
}
.home-philosophy-content {
padding: 80px 7%;
}
/* HOME VALUES */
.home-values {
padding: 80px 6%;
}
/* HOME QUOTE */
.home-quote,
.about-quote,
.experience-quote {
padding: 90px 7%;
}
/* SERVICES */
.page-hero {
min-height: 620px;
}
.services-page-grid {
width: 88%;
gap: 50px;
}
.full-service-card {
grid-template-columns: 1fr;
}
.full-service-card.reverse .full-service-image,
.full-service-card.reverse .full-service-content {
order: initial;
}
.full-service-image {
min-height: 350px;
}
.full-service-content {
padding: 45px 30px;
}
.full-service-content h2 {
font-size: 55px;
}
.services-cta {
min-height: 550px;
}
/* ABOUT */
.about-philosophy {
grid-template-columns: 1fr;
padding: 85px 7%;
}
.philosophy-image {
grid-column: auto;
min-height: 420px;
}
.story-image,
.team-image,
.contact-info-image {
min-height: 450px;
}
.story-content,
.team-content,
.contact-info-content {
padding: 80px 7%;
}
.values-grid {
grid-template-columns: 1fr;
}
.about-values {
padding: 80px 6%;
}
.about-sensory {
min-height: 550px;
}
/* EXPERIENCE */
.journey-step {
grid-template-columns: 1fr;
}
.journey-step.reverse .journey-image,
.journey-step.reverse .journey-content {
order: initial;
}
.journey-image {
min-height: 400px;
}
.journey-content {
padding: 75px 7%;
}
.experience-features {
padding: 85px 7%;
}
.experience-feature {
grid-template-columns: 45px 1fr;
gap: 15px;
padding: 35px 0;
}
.experience-feature h3 {
font-size: 35px;
}
.experience-gallery {
padding: 80px 6%;
}
.gallery-heading {
display: block;
}
.experience-gallery-grid {
grid-template-columns: 1fr;
grid-auto-rows: 280px;
}
.experience-gallery-item.large,
.experience-gallery-item.wide {
grid-row: auto;
grid-column: auto;
}
/* CONTACT */
.opening-hours,
.location-section {
padding: 80px 7%;
}
.hours-row {
gap: 20px;
}
.booking-section {
padding: 80px 6%;
}
.booking-form {
padding: 30px 22px;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.map-container {
height: 380px;
}
/* FOOTER */
.footer {
padding: 65px 6% 25px;
}
.footer-main,
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 35px;
}
.footer-brand {
grid-column: span 2;
}
.footer-bottom {
flex-direction: column;
gap: 10px;
}
}
/* =========================================================
45. VERY SMALL PHONES
========================================================= */
@media (max-width: 430px) {
.nav-links,
.nav-menu {
gap: 13px;
}
.home-hero-content h1,
.about-hero-content h1,
.experience-hero-content h1,
.contact-hero-content h1,
.page-hero-content h1 {
font-size: 55px;
}
.home-treatment-content h3 {
font-size: 34px;
}
.service-bottom {
align-items: flex-start;
flex-direction: column;
gap: 15px;
}
.footer-main,
.footer-container {
grid-template-columns: 1fr;
}
.footer-brand {
grid-column: auto;
}
.footer-logo {
font-size: 32px;
}
}
/* =========================================================
46. ACCESSIBILITY
========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
/* =========================================================
47. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
INDEX / HOME HERO
========================================================= */
.home-hero {
height: 92vh;
min-height: 720px;
}
/* Home hero image */
.home-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.home-hero-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* Home overlay */
.home-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
/* Home content */
.home-hero-content {
position: relative;
z-index: 2;
}
/* =========================================================
SERVICES HERO
========================================================= */
.page-hero {
height: 90vh;
min-height: 700px;
}
.page-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.page-hero-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.page-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.page-hero-content {
position: relative;
z-index: 2;
}
/* =========================================================
ABOUT HERO
========================================================= */
.about-hero {
height: 90vh;
min-height: 700px;
}
.about-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.about-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.about-hero-content {
position: relative;
z-index: 2;
}
/* ================= EXPERIENCE HERO ================= */
.experience-hero {
position: relative;
width: 100%;
height: 90vh;
min-height: 700px;
overflow: hidden;
display: flex;
align-items: center;
background: #211b17;
}
/* HERO IMAGE */
.experience-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* DARK OVERLAY */
.experience-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(20, 16, 13, 0.78) 0%,
rgba(20, 16, 13, 0.48) 45%,
rgba(20, 16, 13, 0.15) 100%
);
}
/* WORDS ON TOP OF IMAGE */
.experience-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 7%;
color: #ffffff;
}
/* SMALL TITLE */
.experience-hero-content .eyebrow {
margin: 0 0 20px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.75);
}
/* MAIN HERO TITLE */
.experience-hero-content h1 {
margin: 0 0 30px;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(70px, 10vw, 140px);
font-weight: 400;
line-height: 0.82;
letter-spacing: -0.04em;
color: #ffffff;
}
.experience-hero-content h1 span {
display: block;
}
/* DESCRIPTION */
.experience-hero-content > p:not(.eyebrow) {
max-width: 480px;
margin: 0 0 35px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 15px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.85);
}
/* BEGIN JOURNEY LINK */
.experience-scroll {
display: inline-flex;
align-items: center;
gap: 15px;
color: #ffffff;
font-family: "Montserrat", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-decoration: none;
transition: 0.4s ease;
}
.experience-scroll span {
font-size: 20px;
transition: transform 0.4s ease;
}
.experience-scroll:hover span {
transform: translateY(6px);
}
/* RIGHT SIDE Paradise Point LABEL */
.experience-hero-side {
position: absolute;
right: 6%;
bottom: 55px;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
color: rgba(255, 255, 255, 0.8);
}
.experience-hero-side span {
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 48px;
font-weight: 400;
}
.experience-hero-side small {
margin-top: 5px;
font-family: "Montserrat", Arial, sans-serif;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.6);
}
/* ================= MOBILE ================= */
@media (max-width: 768px) {
.experience-hero {
height: 82vh;
min-height: 620px;
}
.experience-hero-image {
object-position: center;
}
.experience-hero-content {
padding: 0 8%;
}
.experience-hero-content h1 {
font-size: clamp(65px, 17vw, 95px);
}
.experience-hero-content > p:not(.eyebrow) {
max-width: 90%;
font-size: 14px;
}
.experience-hero-side {
display: none;
}
}
/* ================= WHATSAPP BUTTON ================= */
.contact-hero-buttons {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.whatsapp-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 28px;
border: 1px solid rgba(255, 255, 255, 0.7);
color: #ffffff;
font-family: "Montserrat", Arial, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-decoration: none;
background: rgba(255, 255, 255, 0.08);
transition: 0.4s ease;
}
.whatsapp-button:hover {
background: #ffffff;
color: #211b17;
transform: translateY(-2px);
}
/* MOBILE */
@media (max-width: 768px) {
.contact-hero-buttons {
flex-direction: column;
align-items: flex-start;
}
.whatsapp-button,
.contact-hero-content .light-button {
width: auto;
}
}
/* =========================================================
Paradise Point — FINAL LUXURY DESIGN POLISH
Images + Purple Accent + Mobile Luxury
PUT THIS AT THE VERY BOTTOM OF style.css
========================================================= */
/* =========================================================
1. LUXURY PURPLE ACCENT
========================================================= */
:root {
--calme-purple: #75627f;
--calme-purple-dark: #594765;
--calme-purple-light: #a999ad;
--calme-purple-soft: #eee8f0;
}
/* Small luxury accent details */
.eyebrow {
color: var(--calme-purple);
}
.section-label {
color: var(--calme-purple);
}
.section-label span {
background: var(--calme-purple);
}
/* Buttons */
.dark-button:hover,
.text-button:hover,
.luxury-link:hover {
color: var(--calme-purple);
}
/* Links */
a:hover {
transition: 0.35s ease;
}
/* =========================================================
2. ALL HERO SECTIONS
========================================================= */
.page-hero,
.home-hero,
.about-hero,
.experience-hero,
.contact-hero {
position: relative;
width: 100%;
height: 90vh;
min-height: 680px;
overflow: hidden;
}
/* =========================================================
3. HERO ![]()
IMAGES
Used by Services, Contact and any hero using ![]()
========================================================= */
.page-hero > img,
.home-hero > img,
.about-hero > img,
.experience-hero > img,
.contact-hero > img,
.page-hero-image img,
.home-hero-image img,
.contact-hero-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
z-index: 0;
}
/* =========================================================
4. HERO IMAGE DIVS
Used by About / Experience when image is a background
========================================================= */
.about-hero-image,
.experience-hero-image,
.home-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
z-index: 0;
}
/* =========================================================
5. SERVICES HERO IMAGE
========================================================= */
.page-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.page-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
6. HERO OVERLAYS
Keeps text readable without destroying the photograph
========================================================= */
.page-hero-overlay,
.home-hero-overlay,
.about-hero-overlay,
.experience-hero-overlay,
.contact-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(25, 19, 23, 0.76) 0%,
rgba(25, 19, 23, 0.42) 48%,
rgba(25, 19, 23, 0.12) 100%
);
}
/* =========================================================
7. HERO CONTENT ALWAYS ABOVE IMAGE
========================================================= */
.page-hero-content,
.home-hero-content,
.about-hero-content,
.experience-hero-content,
.contact-hero-content {
position: relative;
z-index: 2;
}
/* =========================================================
8. OTHER LARGE IMAGES
EXCLUDES CARDS
========================================================= */
/* About */
.philosophy-image img,
.story-image img,
.team-image img,
.sensory-background img,
.about-final-cta img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* Experience */
.journey-image img,
.statement-image img,
.experience-final-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* Contact */
.contact-info-image img,
.contact-final-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* Home */
.home-experience-image img,
.home-philosophy-image img,
.home-final-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* =========================================================
9. GALLERY IMAGES
Keep them sharp and properly cropped
========================================================= */
.experience-gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
.experience-gallery-item:hover img {
transform: scale(1.04);
}
/* =========================================================
10. PREVENT RANDOM IMAGE DISTORTION
========================================================= */
img {
max-width: 100%;
}
/* Never stretch normal images */
img {
height: auto;
}
/* Re-apply full height to intentional image containers */
.page-hero img,
.home-hero img,
.about-hero img,
.experience-hero img,
.contact-hero img,
.page-hero-image img,
.home-hero-image img,
.contact-hero-image img,
.philosophy-image img,
.story-image img,
.team-image img,
.journey-image img,
.statement-image img,
.contact-info-image img,
.contact-final-image img,
.home-experience-image img,
.home-philosophy-image img,
.home-final-image img,
.experience-gallery-item img {
height: 100%;
}
/* =========================================================
11. LUXURY IMAGE CAPTIONS
========================================================= */
.image-caption {
color: var(--calme-purple);
}
/* =========================================================
12. PURPLE DETAILS THROUGHOUT THE WEBSITE
========================================================= */
.value-number,
.philosophy-number,
.experience-intro-number,
.contact-intro-number {
color: var(--calme-purple);
}
/* Quote marks */
.quote-mark {
color: var(--calme-purple);
}
/* Small decorative borders */
.value-card,
.experience-feature,
.contact-detail {
border-color: rgba(117, 98, 127, 0.18);
}
/* =========================================================
13. PURPLE BOOKING / CTA ACCENT
========================================================= */
.booking-button,
.booking-submit {
background: var(--calme-purple);
border-color: var(--calme-purple);
color: #ffffff;
transition: 0.4s ease;
}
.booking-button:hover,
.booking-submit:hover {
background: var(--calme-purple-dark);
border-color: var(--calme-purple-dark);
transform: translateY(-2px);
}
/* =========================================
HOME HERO SLIDESHOW
========================================= */
.home-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.home-hero-image .hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease;
}
.home-hero-image .hero-slide.active {
opacity: 1;
visibility: visible;
}
/* =========================================================
Paradise Point— FINAL HOME HERO TEXT FIX
========================================================= */
.home-hero {
position: relative;
min-height: calc(100vh - 86px);
height: 92vh;
overflow: hidden;
display: flex;
align-items: center;
background: var(--espresso);
}
/* Slideshow stays behind everything */
.home-hero-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* Dark luxury overlay */
.home-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
90deg,
rgba(20, 16, 13, 0.80) 0%,
rgba(20, 16, 13, 0.50) 45%,
rgba(20, 16, 13, 0.18) 100%
);
}
/* HERO TEXT — MUST BE ABOVE IMAGE */
.home-hero-content {
position: relative !important;
z-index: 5 !important;
display: block !important;
width: min(700px, 80%);
margin-left: 9%;
color: #ffffff;
}
/* Eyebrow */
.home-hero-content .eyebrow {
display: block !important;
margin: 0 0 22px;
color: var(--gold-light) !important;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
}
/* Main heading */
.home-hero-content h1 {
display: block !important;
margin: 0 0 28px;
color: #ffffff !important;
font-family: var(--serif);
font-size: clamp(65px, 9vw, 135px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.04em;
}
/* Second line */
.home-hero-content h1 span {
display: block;
color: var(--cream) !important;
}
/* Description */
.home-hero-content > p {
display: block !important;
max-width: 520px;
margin: 0;
color: rgba(255, 255, 255, 0.82) !important;
font-family: var(--sans);
font-size: 14px;
line-height: 1.8;
}
/* Buttons */
.home-hero-buttons {
position: relative;
z-index: 6;
display: flex !important;
align-items: center;
gap: 25px;
margin-top: 35px;
}
/* Prevent old hero-link margin from pushing things around */
.home-hero-buttons .hero-text-link {
margin-top: 0 !important;
}
/* Right-side number */
.home-hero-side {
position: absolute;
right: 5%;
bottom: 10%;
z-index: 5;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
color: rgba(255, 255, 255, 0.75);
}
.home-hero-side span {
font-family: var(--serif);
font-size: 40px;
}
.home-hero-side small {
font-family: var(--sans);
font-size: 8px;
letter-spacing: 0.2em;
}
/* Bottom words */
.home-hero-bottom {
position: absolute;
left: 0;
bottom: 0;
z-index: 5;
width: 100%;
display: flex;
justify-content: space-between;
padding: 20px 5%;
color: rgba(255, 255, 255, 0.70);
border-top: 1px solid rgba(255, 255, 255, 0.20);
font-family: var(--sans);
font-size: 9px;
letter-spacing: 0.15em;
}
/* =========================================================
Paradise Point— PREMIUM TYPOGRAPHY
Add this at the VERY BOTTOM of style.css
========================================================= */
/* Import luxury fonts */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Manrope:wght@300;400;500;600;700&display=swap');
/* ---------------------------------------------------------
GLOBAL
--------------------------------------------------------- */
:root {
--calme-display: "Bodoni Moda", Georgia, serif;
--calme-body: "Manrope", Arial, sans-serif;
}
/* ---------------------------------------------------------
BODY
--------------------------------------------------------- */
body {
font-family: var(--calme-body) !important;
font-weight: 400;
letter-spacing: 0.01em;
}
/* ---------------------------------------------------------
LARGE HEADINGS
--------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--calme-display) !important;
font-weight: 400 !important;
letter-spacing: -0.025em;
line-height: 0.95;
}
/* ---------------------------------------------------------
HERO HEADINGS
--------------------------------------------------------- */
.home-hero-content h1,
.page-hero h1,
.about-hero-content h1,
.experience-hero-content h1,
.contact-hero-content h1 {
font-family: var(--calme-display) !important;
font-weight: 400 !important;
letter-spacing: -0.045em !important;
line-height: 0.86 !important;
}
/* ---------------------------------------------------------
HERO BODY TEXT
--------------------------------------------------------- */
.home-hero-content .hero-description,
.about-hero-content p,
.experience-hero-content p,
.contact-hero-content p {
font-family: var(--calme-body) !important;
font-weight: 400 !important;
letter-spacing: 0.01em;
line-height: 1.8;
}
/* ---------------------------------------------------------
NAVIGATION
--------------------------------------------------------- */
.navbar,
.nav-links,
.nav-links a,
.nav-book {
font-family: var(--calme-body) !important;
}
/* ---------------------------------------------------------
EYEBROWS / SMALL LABELS
--------------------------------------------------------- */
.eyebrow,
.section-eyebrow,
.hero-eyebrow,
.label,
.small-label {
font-family: var(--calme-body) !important;
font-weight: 600 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
}
/* ---------------------------------------------------------
BUTTONS
--------------------------------------------------------- */
button,
.btn,
.light-button,
.dark-button,
.nav-book,
.hero-text-link,
.whatsapp-button {
font-family: var(--calme-body) !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
}
/* ---------------------------------------------------------
CARDS
--------------------------------------------------------- */
.service-card h3,
.experience-card h3,
.package-card h3,
.treatment-card h3 {
font-family: var(--calme-display) !important;
font-weight: 400 !important;
}
/* ---------------------------------------------------------
QUOTES
--------------------------------------------------------- */
blockquote,
.quote,
.philosophy-quote {
font-family: var(--calme-display) !important;
font-weight: 400 !important;
letter-spacing: -0.02em;
line-height: 1.05;
}
/* ---------------------------------------------------------
NUMBERS
--------------------------------------------------------- */
.home-hero-side span,
.about-hero-number,
.experience-hero-side span,
.contact-hero-side span {
font-family: var(--calme-display) !important;
font-weight: 400 !important;
}
/* ---------------------------------------------------------
FOOTER
--------------------------------------------------------- */
.footer,
.footer a,
.footer p,
.footer small {
font-family: var(--calme-body) !important;
}
/* ---------------------------------------------------------
TEXT SELECTION
--------------------------------------------------------- */
::selection {
background: #75627f;
color: #ffffff;
}
/* ---------------------------------------------------------
MOBILE
--------------------------------------------------------- */
@media (max-width: 768px) {
.home-hero-content h1,
.page-hero h1,
.about-hero-content h1,
.experience-hero-content h1,
.contact-hero-content h1 {
letter-spacing: -0.04em !important;
line-height: 0.9 !important;
}
}
/* =========================================================
Paradise Point— NEW LUXURY COLOR PALETTE
========================================================= */
:root {
--calme-espresso: #211B17;
--calme-espresso-soft: #342A24;
--calme-cream: #F3EDE3;
--calme-cream-light: #FAF7F1;
--calme-sand: #D8C9B5;
--calme-sand-light: #E7DED1;
--calme-sage: #687261;
--calme-sage-dark: #4B5547;
--calme-sage-light: #D9DED3;
--calme-plum: #75627F;
--calme-plum-light: #A999AD;
--calme-gold: #B59A67;
--calme-gold-light: #D7C59F;
}
/* MAIN BACKGROUND */
body {
background: var(--calme-cream) !important;
color: var(--calme-espresso) !important;
}
/* DARK LUXURY SECTIONS */
.dark-section,
.philosophy-section,
.quote-section,
.footer {
background: var(--calme-espresso) !important;
color: var(--calme-cream-light) !important;
}
/* SAGE SECTIONS */
.sage-section,
.experience-section {
background: var(--calme-sage) !important;
color: var(--calme-cream-light) !important;
}
/* WARM BEIGE SECTIONS */
.beige-section,
.values-section {
background: var(--calme-sand) !important;
color: var(--calme-espresso) !important;
}
/* CARDS */
.service-card,
.experience-card,
.package-card,
.treatment-card {
background: var(--calme-cream-light) !important;
border-color: rgba(33, 27, 23, 0.12) !important;
}
/* CARD HOVER */
.service-card:hover,
.experience-card:hover,
.package-card:hover,
.treatment-card:hover {
background: var(--calme-sand-light) !important;
}
/* GOLD DETAILS */
.eyebrow,
.section-eyebrow,
.hero-eyebrow {
color: var(--calme-gold) !important;
}
/* DARK BUTTON */
.dark-button,
.btn-dark {
background: var(--calme-espresso) !important;
color: var(--calme-cream-light) !important;
}
/* SAGE BUTTON */
.sage-button {
background: var(--calme-sage-dark) !important;
color: var(--calme-cream-light) !important;
}
/* PURPLE ACCENT */
.calme-accent,
.accent {
color: var(--calme-plum) !important;
}
/* HEADINGS */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--calme-espresso);
}
/* DARK SECTION HEADINGS */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
color: var(--calme-cream-light) !important;
}
/* DECORATIVE LINES */
.section-line {
background: var(--calme-gold) !important;
}
/* SELECTION */
::selection {
background: var(--calme-plum);
color: white;
}
/* =========================================================
Paradise Point— LIVE BREATHING ORB
========================================================= */
.calme-live-orb {
position: absolute;
right: 5%;
bottom: 15%;
width: 54px;
height: 54px;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* CENTER LIGHT */
.live-orb-core {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #B8C8A8;
box-shadow:
0 0 8px rgba(184, 200, 168, 0.9),
0 0 20px rgba(184, 200, 168, 0.55);
animation: calmeBreath 2.8s ease-in-out infinite;
}
/* MAIN RING */
.live-orb-ring {
position: absolute;
width: 30px;
height: 30px;
border: 1px solid rgba(216, 226, 205, 0.7);
border-radius: 50%;
animation: calmeRing 2.8s ease-out infinite;
}
/* SECOND EXPANDING RING */
.live-orb-ring.ring-two {
animation-delay: 1.4s;
}
/* CENTER BREATH */
@keyframes calmeBreath {
0%,
100% {
transform: scale(0.75);
opacity: 0.65;
}
50% {
transform: scale(1.35);
opacity: 1;
}
}
/* EXPANDING RINGS */
@keyframes calmeRing {
0% {
transform: scale(0.45);
opacity: 0;
}
20% {
opacity: 0.8;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}
/* MOBILE */
@media (max-width: 768px) {
.calme-live-orb {
right: 7%;
bottom: 10%;
width: 42px;
height: 42px;
}
.live-orb-ring {
width: 25px;
height: 25px;
}
}
/* =========================================================
PARADISE POINT — MOBILE MASTER RESPONSIVE DESIGN
Add this at the VERY BOTTOM of style.css
========================================================= */
/* ---------- GLOBAL MOBILE FIXES ---------- */
html {
overflow-x: hidden;
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
width: 100%;
}
img {
max-width: 100%;
}
section {
max-width: 100%;
overflow: hidden;
}
/* =========================================================
MOBILE NAVIGATION
========================================================= */
@media (max-width: 768px) {
.navbar {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 78px !important;
padding: 0 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
z-index: 9998 !important;
}
.navbar .logo img {
width: 125px !important;
height: auto !important;
max-height: 48px !important;
object-fit: contain !important;
}
.nav-links {
position: fixed !important;
top: 0 !important;
right: -100% !important;
width: 82% !important;
max-width: 340px !important;
height: 100vh !important;
padding: 110px 30px 40px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 22px !important;
background: #211b17 !important;
transition: right 0.4s ease !important;
z-index: 9997 !important;
}
.nav-links.mobile-open {
right: 0 !important;
}
.nav-links a {
font-size: 11px !important;
letter-spacing: 0.18em !important;
color: #f5f0e7 !important;
text-decoration: none !important;
}
.nav-links .nav-book,
.nav-links .light-button {
margin-top: 15px !important;
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
.mobile-menu-toggle {
position: relative !important;
z-index: 10000 !important;
width: 44px !important;
height: 44px !important;
padding: 10px !important;
border: 1px solid rgba(255,255,255,0.35) !important;
background: rgba(33,27,23,0.35) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 5px !important;
cursor: pointer !important;
}
.mobile-menu-toggle span {
width: 20px !important;
height: 1px !important;
background: #ffffff !important;
display: block !important;
transition: 0.3s ease !important;
}
.mobile-menu-toggle.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg) !important;
}
.mobile-menu-toggle.active span:nth-child(2) {
opacity: 0 !important;
}
.mobile-menu-toggle.active span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg) !important;
}
}
/* =========================================================
LIVE ORB
========================================================= */
@media (max-width: 768px) {
.calme-live-orb {
top: 88px !important;
right: 18px !important;
width: 38px !important;
height: 38px !important;
z-index: 9990 !important;
}
.live-orb-core {
width: 6px !important;
height: 6px !important;
}
.live-orb-ring {
width: 20px !important;
height: 20px !important;
}
}
/* =========================================================
HOME HERO
========================================================= */
@media (max-width: 768px) {
.home-hero {
position: relative !important;
width: 100% !important;
height: 88vh !important;
min-height: 650px !important;
max-height: 850px !important;
overflow: hidden !important;
}
.home-hero-image,
.home-hero-image .hero-slide {
width: 100% !important;
height: 100% !important;
}
.home-hero-image .hero-slide {
object-fit: cover !important;
object-position: center center !important;
}
.home-hero-overlay {
background:
linear-gradient(
180deg,
rgba(20,16,14,0.28) 0%,
rgba(20,16,14,0.18) 35%,
rgba(20,16,14,0.72) 100%
) !important;
}
.home-hero-content {
position: absolute !important;
left: 0 !important;
bottom: 90px !important;
width: 88% !important;
max-width: none !important;
margin: 0 6% !important;
}
.home-hero-content .eyebrow {
margin-bottom: 18px !important;
font-size: 9px !important;
letter-spacing: 0.22em !important;
}
.home-hero-content h1 {
margin-bottom: 22px !important;
font-size: clamp(58px, 16vw, 88px) !important;
line-height: 0.86 !important;
letter-spacing: -0.045em !important;
}
.home-hero-content .hero-description {
width: 90% !important;
max-width: 430px !important;
font-size: 12px !important;
line-height: 1.7 !important;
}
.home-hero-buttons {
margin-top: 25px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 13px !important;
}
.home-hero-buttons .light-button {
min-height: 48px !important;
padding: 14px 20px !important;
font-size: 9px !important;
}
.home-hero-buttons .hero-text-link {
font-size: 9px !important;
}
.home-hero-side,
.home-hero-bottom {
display: none !important;
}
}
/* =========================================================
GENERAL HERO SECTIONS
========================================================= */
@media (max-width: 768px) {
.services-hero,
.about-hero,
.experience-hero,
.contact-hero {
min-height: 650px !important;
height: 82vh !important;
position: relative !important;
overflow: hidden !important;
}
.services-hero img,
.about-hero img,
.experience-hero img,
.contact-hero-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.contact-hero-content,
.experience-header,
.about-hero-content,
.services-hero-content {
width: 88% !important;
max-width: none !important;
margin: 0 6% !important;
left: 0 !important;
bottom: 70px !important;
}
.contact-hero-content h1,
.experience-header h1,
.about-hero-content h1,
.services-hero-content h1 {
font-size: clamp(55px, 15vw, 85px) !important;
line-height: 0.88 !important;
}
.contact-hero-content p,
.experience-header p,
.about-hero-content p,
.services-hero-content p {
max-width: 95% !important;
font-size: 12px !important;
line-height: 1.7 !important;
}
.contact-hero-buttons {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
margin-top: 25px !important;
}
.contact-hero-buttons a {
width: auto !important;
}
.contact-hero-side,
.experience-hero-side,
.about-hero-side,
.services-hero-side {
display: none !important;
}
}
/* =========================================================
SECTION CONTAINERS
========================================================= */
@media (max-width: 768px) {
.section-container,
.container,
.section-inner {
width: 88% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
section {
padding-left: 0 !important;
padding-right: 0 !important;
}
h2 {
font-size: clamp(42px, 12vw, 65px) !important;
line-height: 0.92 !important;
}
h3 {
font-size: 22px !important;
}
p {
font-size: 13px;
line-height: 1.75;
}
}
/* =========================================================
INTRO SECTIONS
========================================================= */
@media (max-width: 768px) {
.contact-intro,
.about-intro,
.services-intro,
.experience-intro {
display: block !important;
width: 100% !important;
padding: 80px 6% !important;
}
.contact-intro-number,
.about-intro-number,
.services-intro-number,
.experience-intro-number {
margin-bottom: 30px !important;
font-size: 14px !important;
}
.contact-intro-content,
.about-intro-content,
.services-intro-content,
.experience-intro-content {
width: 100% !important;
max-width: none !important;
}
.contact-intro-content h2,
.about-intro-content h2,
.services-intro-content h2,
.experience-intro-content h2 {
font-size: clamp(43px, 12vw, 68px) !important;
margin-bottom: 25px !important;
}
.contact-intro-content p:last-child,
.about-intro-content p:last-child,
.services-intro-content p:last-child,
.experience-intro-content p:last-child {
max-width: 100% !important;
}
}
/* =========================================================
CARDS — PERFECT MOBILE STACK
========================================================= */
@media (max-width: 768px) {
.services-grid,
.treatments-grid,
.experience-grid,
.packages-grid,
.cards-grid,
.gallery-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
width: 88% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.service-card,
.treatment-card,
.experience-card,
.package-card,
.card {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.service-card img,
.treatment-card img,
.experience-card img,
.package-card img,
.card img {
width: 100% !important;
height: 260px !important;
object-fit: cover !important;
display: block !important;
}
.service-card-content,
.treatment-card-content,
.experience-card-content,
.package-card-content,
.card-content {
padding: 25px 22px !important;
}
.service-card h3,
.treatment-card h3,
.experience-card h3,
.package-card h3,
.card h3 {
font-size: 24px !important;
line-height: 1.05 !important;
margin-bottom: 12px !important;
}
.service-card p,
.treatment-card p,
.experience-card p,
.package-card p,
.card p {
font-size: 12px !important;
line-height: 1.7 !important;
}
}
/* =========================================================
IMAGE GALLERIES
========================================================= */
@media (max-width: 768px) {
.experience-gallery,
.about-gallery,
.services-gallery {
width: 88% !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.experience-gallery-item,
.about-gallery-item,
.services-gallery-item {
width: 100% !important;
height: 300px !important;
overflow: hidden !important;
}
.experience-gallery-item img,
.about-gallery-item img,
.services-gallery-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
}
/* =========================================================
FEATURED LARGE IMAGES
========================================================= */
@media (max-width: 768px) {
.feature-image,
.featured-image,
.content-image,
.section-image {
width: 100% !important;
height: 380px !important;
overflow: hidden !important;
}
.feature-image img,
.featured-image img,
.content-image img,
.section-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* =========================================================
TWO COLUMN SECTIONS → MOBILE STACK
========================================================= */
@media (max-width: 768px) {
.contact-details,
.about-details,
.services-details,
.experience-details,
.split-section,
.two-column-section {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.contact-info-image,
.about-info-image,
.services-info-image,
.experience-info-image {
width: 100% !important;
height: 360px !important;
}
.contact-info-image img,
.about-info-image img,
.services-info-image img,
.experience-info-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.contact-info-content,
.about-info-content,
.services-info-content,
.experience-info-content {
width: 100% !important;
padding: 65px 6% !important;
}
}
/* =========================================================
OPENING HOURS
========================================================= */
@media (max-width: 768px) {
.opening-hours {
display: block !important;
padding: 75px 6% !important;
}
.hours-heading {
width: 100% !important;
margin-bottom: 45px !important;
}
.hours-heading h2 {
font-size: clamp(45px, 13vw, 70px) !important;
margin-bottom: 20px !important;
}
.hours-list {
width: 100% !important;
}
.hours-row {
width: 100% !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 15px !important;
padding: 17px 0 !important;
border-bottom: 1px solid rgba(33,27,23,0.15) !important;
}
.hours-row span {
font-size: 10px !important;
letter-spacing: 0.12em !important;
}
.hours-row strong {
font-size: 10px !important;
text-align: right !important;
}
}
/* =========================================================
BOOKING FORM
========================================================= */
@media (max-width: 768px) {
.booking-section {
min-height: auto !important;
padding: 80px 0 !important;
}
.booking-background {
position: absolute !important;
inset: 0 !important;
}
.booking-background img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.booking-wrapper {
position: relative !important;
width: 88% !important;
margin: 0 auto !important;
}
.booking-heading {
width: 100% !important;
margin-bottom: 40px !important;
}
.booking-heading h2 {
font-size: clamp(45px, 13vw, 70px) !important;
}
.booking-form {
width: 100% !important;
padding: 30px 22px !important;
display: flex !important;
flex-direction: column !important;
gap: 17px !important;
box-sizing: border-box !important;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
width: 100% !important;
min-height: 52px !important;
box-sizing: border-box !important;
font-size: 13px !important;
padding: 14px 15px !important;
}
.booking-form textarea {
min-height: 130px !important;
resize: vertical !important;
}
.booking-button {
width: 100% !important;
min-height: 54px !important;
padding: 15px 20px !important;
font-size: 10px !important;
}
}
/* =========================================================
LOCATION / MAP
========================================================= */
@media (max-width: 768px) {
.location-section {
padding: 75px 6% !important;
}
.location-heading {
width: 100% !important;
margin-bottom: 35px !important;
}
.location-heading h2 {
font-size: clamp(44px, 13vw, 70px) !important;
}
.map-container {
width: 100% !important;
height: 350px !important;
overflow: hidden !important;
}
.map-container iframe {
width: 100% !important;
height: 350px !important;
display: block !important;
}
}
/* =========================================================
BUTTONS
========================================================= */
@media (max-width: 768px) {
.light-button,
.whatsapp-button,
.booking-button,
.btn {
max-width: 100% !important;
box-sizing: border-box !important;
}
.light-button,
.whatsapp-button {
min-height: 48px !important;
padding: 14px 20px !important;
font-size: 9px !important;
letter-spacing: 0.14em !important;
}
}
/* =========================================================
QUOTES / PHILOSOPHY
========================================================= */
@media (max-width: 768px) {
.quote-section,
.philosophy-section,
.testimonial-section {
padding: 85px 6% !important;
}
.quote-section blockquote,
.philosophy-section blockquote,
.testimonial-section blockquote {
font-size: clamp(35px, 10vw, 55px) !important;
line-height: 1 !important;
}
}
/* =========================================================
FINAL CTA
========================================================= */
@media (max-width: 768px) {
.contact-final,
.services-cta,
.experience-cta,
.final-cta {
min-height: 620px !important;
height: 75vh !important;
position: relative !important;
}
.contact-final-image,
.services-cta-image,
.experience-cta-image,
.final-cta-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
}
.contact-final-image img,
.services-cta-image img,
.experience-cta-image img,
.final-cta-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.contact-final-content,
.services-cta-content,
.experience-cta-content,
.final-cta-content {
position: absolute !important;
left: 6% !important;
bottom: 70px !important;
width: 88% !important;
}
.contact-final-content h2,
.services-cta-content h2,
.experience-cta-content h2,
.final-cta-content h2 {
font-size: clamp(48px, 14vw, 75px) !important;
}
}
/* =========================================================
FOOTER
========================================================= */
@media (max-width: 768px) {
.footer {
width: 100% !important;
}
.footer-main {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 40px 25px !important;
padding: 65px 6% 45px !important;
}
.footer-brand {
grid-column: 1 / -1 !important;
width: 100% !important;
}
.footer-logo img {
width: 125px !important;
height: auto !important;
max-height: 50px !important;
object-fit: contain !important;
}
.footer-brand p {
max-width: 300px !important;
font-size: 12px !important;
line-height: 1.7 !important;
}
.footer-column {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.footer-column h4 {
font-size: 9px !important;
letter-spacing: 0.16em !important;
margin-bottom: 7px !important;
}
.footer-column a {
font-size: 11px !important;
}
.footer-bottom {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 22px 6% !important;
}
.footer-bottom p {
font-size: 8px !important;
letter-spacing: 0.12em !important;
}
}
/* =========================================================
VERY SMALL PHONES
320px — 360px
========================================================= */
@media (max-width: 380px) {
.navbar {
padding: 0 15px !important;
}
.navbar .logo img {
width: 110px !important;
}
.home-hero-content {
width: 90% !important;
margin-left: 5% !important;
bottom: 70px !important;
}
.home-hero-content h1 {
font-size: 54px !important;
}
.home-hero-content .hero-description {
width: 100% !important;
font-size: 11px !important;
}
.services-grid,
.treatments-grid,
.experience-grid,
.packages-grid,
.cards-grid {
width: 90% !important;
}
.service-card img,
.treatment-card img,
.experience-card img,
.package-card img,
.card img {
height: 230px !important;
}
.footer-main {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
TABLET — 769px TO 1024px
========================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
.navbar {
padding-left: 30px !important;
padding-right: 30px !important;
}
.nav-links {
gap: 18px !important;
}
.nav-links a {
font-size: 9px !important;
}
.home-hero-content {
margin-left: 7% !important;
width: 70% !important;
}
.home-hero-content h1 {
font-size: clamp(70px, 10vw, 105px) !important;
}
.services-grid,
.treatments-grid,
.experience-grid,
.packages-grid,
.cards-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
.service-card img,
.treatment-card img,
.experience-card img,
.package-card img,
.card img {
height: 280px !important;
}
}
/* =========================================================
IMAGE QUALITY / PERFORMANCE
========================================================= */
img {
image-rendering: auto;
}
@media (max-width: 768px) {
.home-hero-image img,
.contact-hero-image,
.booking-background img,
.contact-final-image img,
.service-card img,
.treatment-card img,
.experience-card img,
.package-card img,
.card img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
}