:root {
–purple: #553480;
–purple-dark: #3a2258;
–purple-deep: #1e1130;
–rose: #B76E79;
–rose-light: #d4969f;
–cream: #F6F4F1;
–cream-dark: #ede9e3;
–gold: #c9a96e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background-color: var(–cream);
color: var(–purple-deep);
font-family: ‘Cormorant Garamond’, ‘Times New Roman’, serif;
overflow-x: hidden;
}
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 3rem;
background: rgba(246,244,241,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(183,110,121,0.15);
}
.nav-name {
font-family: ‘Cinzel’, serif;
font-size: 1.1rem;
letter-spacing: 0.15em;
color: var(–purple);
text-decoration: none;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1rem;
font-style: italic;
letter-spacing: 0.05em;
color: var(–purple-deep);
text-decoration: none;
transition: color 0.3s ease;
}
.nav-links a:hover { color: var(–rose); }
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}
.hero-left {
background: var(–purple-deep);
display: flex;
flex-direction: column;
justify-content: center;
padding: 8rem 4rem 4rem 5rem;
position: relative;
z-index: 2;
}
.hero-eyebrow {
font-family: ‘Cinzel’, serif;
font-size: 0.7rem;
letter-spacing: 0.3em;
color: var(–rose);
text-transform: uppercase;
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 1s ease 0.3s forwards;
}
.hero-name {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(3.5rem, 6vw, 5.5rem);
font-weight: 300;
line-height: 1.05;
color: var(–cream);
margin-bottom: 1rem;
opacity: 0;
animation: fadeUp 1s ease 0.5s forwards;
}
.hero-name em {
font-style: italic;
color: var(–rose-light);
}
.hero-divider {
width: 60px;
height: 1px;
background: var(–gold);
margin: 1.5rem 0;
opacity: 0;
animation: fadeUp 1s ease 0.7s forwards;
}
.hero-tagline {
font-size: 1.05rem;
font-style: italic;
font-weight: 300;
color: rgba(246,244,241,0.75);
line-height: 1.8;
margin-bottom: 0.8rem;
opacity: 0;
animation: fadeUp 1s ease 0.85s forwards;
}
.hero-spark {
font-size: 1rem;
font-style: italic;
color: var(–gold);
opacity: 0;
animation: fadeUp 1s ease 1s forwards;
margin-bottom: 2.5rem;
}
.hero-cta {
display: inline-block;
font-family: ‘Cinzel’, serif;
font-size: 0.72rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(–cream);
border: 1px solid var(–rose);
padding: 0.9rem 2rem;
text-decoration: none;
transition: all 0.3s ease;
opacity: 0;
animation: fadeUp 1s ease 1.2s forwards;
width: fit-content;
}
.hero-cta:hover {
background: var(–rose);
color: var(–cream);
}
.hero-right {
position: relative;
overflow: hidden;
background: var(–purple);
}
.hero-photo-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
opacity: 0;
animation: fadeIn 1.5s ease 0.5s forwards;
}
.hero-photo-bg {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(–purple) 0%, var(–purple-dark) 40%, var(–purple-deep) 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hero-photo-bg::before {
content: ”;
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 60% 40%, rgba(183,110,121,0.2) 0%, transparent 60%);
}
.hero-image-text {
position: absolute;
bottom: 3rem;
right: 3rem;
text-align: right;
}
.hero-image-text p {
font-family: ‘Cinzel’, serif;
font-size: 0.65rem;
letter-spacing: 0.2em;
color: rgba(246,244,241,0.5);
text-transform: uppercase;
}
.identity-strip {
background: var(–rose);
padding: 1.2rem 0;
overflow: hidden;
}
.identity-scroll {
display: flex;
gap: 3rem;
animation: scrollLeft 20s linear infinite;
width: max-content;
}
.identity-scroll span {
font-family: ‘Cinzel’, serif;
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(–cream);
white-space: nowrap;
}
.identity-scroll .dot {
color: rgba(246,244,241,0.5);
}
.intro {
padding: 7rem 5rem;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 5rem;
align-items: start;
max-width: 1200px;
margin: 0 auto;
background: var(–cream);
}
.intro-label {
font-family: ‘Cinzel’, serif;
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–rose);
padding-top: 0.5rem;
}
.intro-text h2 {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 300;
line-height: 1.3;
color: var(–purple-deep);
margin-bottom: 1.5rem;
}
.intro-text h2 em {
font-style: italic;
color: var(–purple);
}
.intro-text p {
font-size: 1.15rem;
line-height: 1.9;
color: #3a2e50;
margin-bottom: 1.2rem;
font-weight: 300;
}
.doors {
background: var(–purple-deep);
padding: 6rem 5rem;
}
.doors-header {
text-align: center;
margin-bottom: 4rem;
}
.doors-header p {
font-family: ‘Cinzel’, serif;
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–rose);
margin-bottom: 1rem;
}
.doors-header h2 {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 300;
color: var(–cream);
font-style: italic;
}
.doors-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5px;
max-width: 1100px;
margin: 0 auto;
}
.door {
background: rgba(246,244,241,0.04);
padding: 3rem 2rem;
text-decoration: none;
transition: all 0.4s ease;
border: 1px solid rgba(183,110,121,0.1);
position: relative;
overflow: hidden;
}
.door::before {
content: ”;
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(–rose);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.door:hover { background: rgba(183,110,121,0.08); }
.door:hover::before { transform: scaleX(1); }
.door-number {
font-family: ‘Cinzel’, serif;
font-size: 0.6rem;
letter-spacing: 0.2em;
color: var(–rose);
margin-bottom: 1.5rem;
display: block;
}
.door h3 {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.4rem;
font-weight: 400;
color: var(–cream);
margin-bottom: 0.8rem;
font-style: italic;
}
.door p {
font-size: 0.9rem;
color: rgba(246,244,241,0.55);
line-height: 1.7;
}
.door-arrow {
display: block;
margin-top: 1.5rem;
font-family: ‘Cinzel’, serif;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–rose);
transition: letter-spacing 0.3s ease;
}
.door:hover .door-arrow { letter-spacing: 0.35em; }
.pullquote {
padding: 7rem 5rem;
text-align: center;
max-width: 900px;
margin: 0 auto;
position: relative;
background: var(–cream);
width: 100%;
}
.pullquote::before {
content: ‘\201C’;
font-family: ‘Cormorant Garamond’, serif;
font-size: 12rem;
color: rgba(85,52,128,0.06);
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%);
line-height: 1;
pointer-events: none;
}
.pullquote blockquote {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-style: italic;
font-weight: 300;
line-height: 1.4;
color: var(–purple-deep);
position: relative;
z-index: 1;
}
.pullquote cite {
display: block;
margin-top: 2rem;
font-family: ‘Cinzel’, serif;
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(–rose);
font-style: normal;
}
.bridge {
background: linear-gradient(135deg, var(–purple) 0%, var(–purple-dark) 100%);
padding: 5rem;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: center;
}
.bridge-text p {
font-family: ‘Cinzel’, serif;
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–rose-light);
margin-bottom: 1rem;
}
.bridge-text h2 {
font-family: ‘Cormorant Garamond’, serif;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 300;
font-style: italic;
color: var(–cream);
margin-bottom: 1.2rem;
line-height: 1.3;
}
.bridge-text p.body {
font-family: ‘Cormorant Garamond’, serif;
font-size: 1.1rem;
line-height: 1.8;
color: rgba(246,244,241,0.75);
letter-spacing: normal;
text-transform: none;
}
.bridge-cta {
display: inline-block;
margin-top: 2rem;
font-family: ‘Cinzel’, serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–cream);
border: 1px solid rgba(246,244,241,0.3);
padding: 1rem 2.2rem;
text-decoration: none;
transition: all 0.3s ease;
}
.bridge-cta:hover {
border-color: var(–rose-light);
color: var(–rose-light);
}
.bridge-logo-text {
font-family: ‘Cinzel’, serif;
font-size: 2.5rem;
font-weight: 400;
color: rgba(246,244,241,0.12);
letter-spacing: 0.15em;
line-height: 1.2;
text-align: center;
}
footer {
background: var(–purple-deep);
padding: 3rem 5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(183,110,121,0.2);
}
.footer-name {
font-family: ‘Cinzel’, serif;
font-size: 1rem;
letter-spacing: 0.15em;
color: var(–cream);
}
.footer-copy {
font-size: 0.85rem;
font-style: italic;
color: rgba(246,244,241,0.4);
}
.footer-elowah {
font-family: ‘Cinzel’, serif;
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–rose);
text-decoration: none;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scrollLeft {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (max-width: 900px) {
nav { padding: 1rem 1.5rem; }
.nav-links { gap: 1.5rem; }
.hero { grid-template-columns: 1fr; }
.hero-left { padding: 7rem 2rem 3rem; }
.hero-right { min-height: 50vh; }
.intro { grid-template-columns: 1fr; gap: 1.5rem; padding: 4rem 2rem; }
.doors { padding: 4rem 2rem; }
.doors-grid { grid-template-columns: 1fr 1fr; }
.pullquote { padding: 4rem 2rem; }
.bridge { grid-template-columns: 1fr; padding: 4rem 2rem; }
.bridge-logo { display: none; }
footer { flex-direction: column; gap: 1rem; text-align: center; padding: 2rem; }
}
@media (max-width: 500px) {
.doors-grid { grid-template-columns: 1fr; }
.nav-links { display: none; }
}
Amber Madayag
Camden, Arkansas · USAF Veteran
Amber
Madayag
Veteran. Healer. Author. Speaker. Teacher.
You never know when a spark will land.
Enter →
Founder · Elowah Wellness
Veteran·
Massage Therapist·
Herbalist·
Author·
Speaker·
Teacher·
Course Creator·
Founder of Elowah·
Veteran·
Massage Therapist·
Herbalist·
Author·
Speaker·
Teacher·
Course Creator·
Founder of Elowah·
She didn’t choose
this path. The path chose her.
Fifteen years in the United States Air Force taught Amber Madayag systems thinking, discipline, and how to lead under pressure. What the military couldn’t teach her — she went looking for on her own.
Today she is a massage therapist, herbalist, author, speaker, and the founder of the Elowah Wellness ecosystem in Camden, Arkansas. Her work lives at the intersection of the body, the mind, and the spirit — and her mission is simple: help people come back to themselves.
She is not here to perform wellness. She is here to teach it, live it, and pass it on.
Come back to center and love who you see when you look in the mirror.
— Amber Madayag
The Ecosystem
Amber’s work lives inside
Elowah Wellness
Bodywork. Herbal medicine. Courses. Community. The Elowah ecosystem is the full expression of everything Amber has built — a place where healing is not a transaction but a way of life.
Visit Elowah.com →
Amber Madayag 