/* Start custom CSS for html, class: .elementor-element-c164a63 *//* ============================================================
MU-SHI
DUALIDADES DEL COSMO Y LA NATURALEZA
CENTRO ANCESTRAL PACHACAMAC
============================================================ */
#cap-mushi {
--ms-night: #130d09;
--ms-night-2: #1d130d;
--ms-earth: #2a1b12;
--ms-brown: #3a261b;
--ms-gold: #c99a4a;
--ms-gold-light: #e8c67f;
--ms-cream: #f2e7d2;
--ms-paper: #f7efe1;
--ms-paper-2: #efe2d0;
--ms-ink: #2b1a10;
--ms-soft: #c4ae8e;
--ms-line: rgba(201,154,74,.25);
width: 100%;
max-width: 100%;
overflow: hidden;
font-family:
"EB Garamond",
Georgia,
serif;
}
/* ============================================================
RESET
============================================================ */
#cap-mushi *,
#cap-mushi *::before,
#cap-mushi *::after {
box-sizing: border-box;
}
#cap-mushi h1,
#cap-mushi h2,
#cap-mushi h3,
#cap-mushi p {
margin-top: 0;
}
#cap-mushi a {
text-decoration: none;
}
/* ============================================================
CONTAINER
============================================================ */
#cap-mushi .mushi-container {
width: min(
1180px,
calc(100% - 80px)
);
margin-left: auto;
margin-right: auto;
position: relative;
}
/* ============================================================
HERO
============================================================ */
#cap-mushi .mushi-hero {
min-height: 760px;
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
color: var(--ms-cream);
background:
radial-gradient(
circle at 50% 48%,
rgba(201,154,74,.11),
transparent 35%
),
linear-gradient(
135deg,
#100a07 0%,
#1d110c 50%,
#120b08 100%
);
}
/* ============================================================
HERO PATTERN
============================================================ */
#cap-mushi .mushi-hero-pattern {
position: absolute;
inset: 0;
pointer-events: none;
}
#cap-mushi .mushi-orbit {
position: absolute;
left: 50%;
top: 50%;
border:
1px solid rgba(201,154,74,.14);
border-radius: 50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .orbit-a {
width: 1400px;
height: 620px;
transform:
translate(-50%,-50%)
rotate(-18deg);
}
#cap-mushi .orbit-b {
width: 1050px;
height: 850px;
transform:
translate(-50%,-50%)
rotate(28deg);
}
#cap-mushi .orbit-c {
width: 700px;
height: 1100px;
transform:
translate(-50%,-50%)
rotate(63deg);
}
#cap-mushi .mushi-star {
position: absolute;
color: var(--ms-cream);
font-size: 18px;
}
#cap-mushi .star-1 {
top: 14%;
left: 27%;
}
#cap-mushi .star-2 {
top: 20%;
right: 27%;
}
#cap-mushi .star-3 {
bottom: 18%;
left: 19%;
}
#cap-mushi .star-4 {
bottom: 14%;
right: 21%;
}
/* ============================================================
HERO INNER
CENTRADO
============================================================ */
#cap-mushi .mushi-hero-inner {
position: relative;
z-index: 5;
width: 100%;
max-width: 1050px;
margin:
0 auto !important;
padding:
90px 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center !important;
}
/* ============================================================
LABEL
============================================================ */
#cap-mushi .mushi-label {
width: 100%;
margin:
0 auto 28px;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10px;
letter-spacing: 5px;
text-align: center !important;
}
/* ============================================================
TITLE
============================================================ */
#cap-mushi .mushi-hero h1 {
width: 100%;
margin:
0 auto 24px !important;
padding: 0;
color:
var(--ms-cream);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
clamp(
72px,
11vw,
150px
);
font-weight: 500;
line-height: .85;
letter-spacing: 7px;
text-align:
center !important;
position:
relative;
left:
0 !important;
right:
auto !important;
transform:
none !important;
}
/* ============================================================
GOLD LINE
============================================================ */
#cap-mushi .mushi-gold-line {
width: 100px;
height: 1px;
margin:
0 auto 30px;
background:
linear-gradient(
to right,
transparent,
var(--ms-gold),
transparent
);
}
/* ============================================================
HERO SUBTITLE
============================================================ */
#cap-mushi .mushi-hero-subtitle {
width: 100%;
max-width: 900px;
margin:
0 auto 16px !important;
color:
var(--ms-gold-light);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
clamp(
18px,
2vw,
26px
);
line-height:
1.4;
letter-spacing:
3px;
text-align:
center !important;
position:
relative;
left:
0 !important;
transform:
none !important;
}
/* ============================================================
HERO DESCRIPTION
SOLUCIÓN AL PROBLEMA DE CENTRADO
============================================================ */
#cap-mushi .mushi-hero-description {
width: 100%;
max-width: 760px;
margin:
0 auto 40px !important;
padding:
0 10px;
color:
var(--ms-soft);
font-size:
21px;
line-height:
1.6;
text-align:
center !important;
position:
relative;
left:
0 !important;
right:
auto !important;
transform:
none !important;
}
/* ============================================================
BUTTONS
============================================================ */
#cap-mushi .mushi-hero-buttons {
width: 100%;
margin:
0 auto !important;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
#cap-mushi .mushi-btn {
min-width: 185px;
min-height: 64px;
padding:
18px 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10px;
letter-spacing: 2px;
transition:
all .3s ease;
}
#cap-mushi .mushi-btn-gold {
color:
var(--ms-night);
background:
var(--ms-gold);
border:
1px solid var(--ms-gold);
}
#cap-mushi .mushi-btn-gold:hover {
color:
var(--ms-night);
background:
var(--ms-gold-light);
border-color:
var(--ms-gold-light);
transform:
translateY(-3px);
}
#cap-mushi .mushi-btn-line {
color:
var(--ms-cream);
border:
1px solid rgba(201,154,74,.55);
}
#cap-mushi .mushi-btn-line:hover {
color:
var(--ms-cream);
border-color:
var(--ms-gold);
background:
rgba(201,154,74,.08);
transform:
translateY(-3px);
}
/* ============================================================
SCROLL
============================================================ */
#cap-mushi .mushi-scroll {
margin-top: 65px;
color:
var(--ms-soft);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 8px;
letter-spacing: 3px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#cap-mushi .mushi-scroll span {
width: 1px;
height: 38px;
background:
linear-gradient(
to bottom,
transparent,
var(--ms-gold)
);
}
/* ============================================================
SECTIONS
============================================================ */
#cap-mushi .mushi-section {
position: relative;
padding:
130px 0;
}
#cap-mushi .mushi-dark-section {
color:
var(--ms-cream);
background:
linear-gradient(
135deg,
var(--ms-night),
var(--ms-night-2)
);
}
#cap-mushi .mushi-paper-section {
background:
var(--ms-paper);
color:
var(--ms-ink);
}
/* ============================================================
KICKER
============================================================ */
#cap-mushi .mushi-kicker {
display: inline-block;
margin-bottom: 22px;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10px;
letter-spacing: 4px;
text-transform: uppercase;
}
/* ============================================================
INTRODUCTION
============================================================ */
#cap-mushi .mushi-introduction {
background:
var(--ms-paper);
}
#cap-mushi .mushi-intro-grid {
display:
grid;
grid-template-columns:
70px
minmax(0,1fr)
400px;
gap: 55px;
align-items: center;
}
#cap-mushi .mushi-intro-number {
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size: 10px;
letter-spacing: 3px;
writing-mode:
vertical-rl;
}
#cap-mushi h2 {
font-family:
"Cinzel",
Georgia,
serif;
font-size:
clamp(
44px,
5vw,
72px
);
line-height:
1.03;
font-weight:
500;
letter-spacing:
-1px;
}
#cap-mushi em {
color:
var(--ms-gold);
font-style:
italic;
}
#cap-mushi .mushi-large-text {
max-width: 650px;
font-size: 24px;
line-height: 1.55;
color:
var(--ms-ink);
}
#cap-mushi .mushi-intro-content p:not(.mushi-large-text) {
max-width: 620px;
color:
#654f3d;
font-size: 18px;
line-height: 1.75;
}
/* ============================================================
DUALITY SYMBOL
============================================================ */
#cap-mushi .mushi-intro-symbol {
position: relative;
width: 350px;
height: 350px;
margin:
0 auto;
}
#cap-mushi .mushi-duality-symbol {
position: absolute;
width: 230px;
height: 230px;
left: 50%;
top: 50%;
transform:
translate(-50%,-50%);
border:
1px solid var(--ms-gold);
border-radius: 50%;
overflow: hidden;
background:
linear-gradient(
90deg,
var(--ms-ink) 50%,
var(--ms-paper) 50%
);
}
#cap-mushi .mushi-dark-half {
position: absolute;
width: 115px;
height: 115px;
top: 0;
left: 57.5px;
border-radius:
0 0 50% 50%;
background:
var(--ms-ink);
}
#cap-mushi .mushi-light-half {
position: absolute;
width: 115px;
height: 115px;
bottom: 0;
right: 57.5px;
border-radius:
50% 50% 0 0;
background:
var(--ms-paper);
}
#cap-mushi .mushi-dot-dark,
#cap-mushi .mushi-dot-light {
position: absolute;
width: 23px;
height: 23px;
border-radius: 50%;
}
#cap-mushi .mushi-dot-dark {
top: 46px;
left: 103px;
background:
var(--ms-paper);
}
#cap-mushi .mushi-dot-light {
bottom: 46px;
right: 103px;
background:
var(--ms-ink);
}
#cap-mushi .mushi-symbol-ring {
position: absolute;
left: 50%;
top: 50%;
border:
1px solid rgba(201,154,74,.3);
border-radius: 50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .ring-one {
width: 300px;
height: 300px;
}
#cap-mushi .ring-two {
width: 345px;
height: 345px;
}
/* ============================================================
SECTION HEADING
============================================================ */
#cap-mushi .mushi-section-heading {
max-width: 780px;
margin-bottom: 65px;
}
#cap-mushi .mushi-section-heading p {
max-width: 650px;
color:
var(--ms-soft);
font-size: 19px;
line-height: 1.7;
}
#cap-mushi .mushi-section-heading.centered {
margin-left:
auto;
margin-right:
auto;
text-align:
center;
}
#cap-mushi .mushi-section-heading.centered p {
margin-left:
auto;
margin-right:
auto;
}
/* ============================================================
DUALITY CARDS
============================================================ */
#cap-mushi .mushi-duality-grid {
display:
grid;
grid-template-columns:
repeat(4,1fr);
gap: 18px;
}
#cap-mushi .mushi-duality-card {
min-height: 390px;
padding:
38px 30px;
border:
1px solid rgba(201,154,74,.2);
background:
rgba(255,255,255,.025);
transition:
all .35s ease;
}
#cap-mushi .mushi-duality-card:hover {
transform:
translateY(-8px);
border-color:
var(--ms-gold);
}
#cap-mushi .mushi-card-number {
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
}
#cap-mushi .mushi-card-symbol {
margin:
55px 0 25px;
color:
var(--ms-gold);
font-size:
50px;
}
#cap-mushi .mushi-duality-card h3 {
font-family:
"Cinzel",
Georgia,
serif;
font-size:
19px;
font-weight:
500;
}
#cap-mushi .mushi-duality-card p {
color:
var(--ms-soft);
font-size:
17px;
line-height:
1.65;
}
/* ============================================================
TWO COLUMNS
============================================================ */
#cap-mushi .mushi-two-columns {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
100px;
align-items:
center;
}
/* ============================================================
GENERIC COPY
============================================================ */
#cap-mushi .mushi-copy p {
max-width:
620px;
font-size:
19px;
line-height:
1.75;
color:
#654f3d;
}
#cap-mushi .mushi-dark-section .mushi-copy p {
color:
var(--ms-soft);
}
/* ============================================================
LIST
============================================================ */
#cap-mushi .mushi-list {
margin-top:
35px;
}
#cap-mushi .mushi-list div {
display:
flex;
align-items:
center;
gap:
20px;
padding:
15px 0;
border-bottom:
1px solid rgba(43,26,16,.15);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
13px;
letter-spacing:
1px;
}
#cap-mushi .mushi-list span {
color:
var(--ms-gold);
font-size:
10px;
}
#cap-mushi .dark-list div {
color:
var(--ms-cream);
border-color:
var(--ms-line);
}
/* ============================================================
ALCHEMY
============================================================ */
#cap-mushi .mushi-alchemy-visual {
width:
470px;
height:
470px;
max-width:
100%;
position:
relative;
margin:
0 auto;
}
#cap-mushi .mushi-element {
position:
absolute;
width:
145px;
height:
145px;
display:
flex;
align-items:
center;
justify-content:
center;
border:
1px solid var(--ms-gold);
border-radius:
50%;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
9px;
letter-spacing:
2px;
}
#cap-mushi .element-fire {
top:
10px;
left:
50%;
transform:
translateX(-50%);
}
#cap-mushi .element-wind {
left:
10px;
bottom:
65px;
}
#cap-mushi .element-water {
right:
10px;
bottom:
65px;
}
#cap-mushi .element-earth {
left:
50%;
bottom:
0;
transform:
translateX(-50%);
}
#cap-mushi .mushi-alchemy-center {
position:
absolute;
left:
50%;
top:
50%;
width:
95px;
height:
95px;
transform:
translate(-50%,-50%);
border:
1px solid var(--ms-gold);
border-radius:
50%;
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
28px;
background:
var(--ms-paper);
}
/* ============================================================
FRACTAL ART
============================================================ */
#cap-mushi .mushi-fractal-layout {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
100px;
align-items:
center;
}
#cap-mushi .mushi-fractal-art {
width:
500px;
height:
500px;
max-width:
100%;
position:
relative;
margin:
0 auto;
}
#cap-mushi .fractal-circle {
position:
absolute;
left:
50%;
top:
50%;
border:
1px solid rgba(201,154,74,.4);
border-radius:
50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .fc-1 {
width: 480px;
height: 480px;
}
#cap-mushi .fc-2 {
width: 360px;
height: 360px;
}
#cap-mushi .fc-3 {
width: 240px;
height: 240px;
}
#cap-mushi .fc-4 {
width: 120px;
height: 120px;
}
#cap-mushi .fractal-diamond {
position:
absolute;
left:
50%;
top:
50%;
width:
285px;
height:
285px;
transform:
translate(-50%,-50%)
rotate(45deg);
border:
1px solid rgba(232,198,127,.35);
}
#cap-mushi .fractal-center {
position:
absolute;
left:
50%;
top:
50%;
width:
85px;
height:
85px;
transform:
translate(-50%,-50%);
border:
1px solid var(--ms-gold);
border-radius:
50%;
background:
var(--ms-night);
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
35px;
}
/* ============================================================
FEATURES
============================================================ */
#cap-mushi .mushi-feature {
display:
grid;
grid-template-columns:
55px 1fr;
gap:
25px;
padding:
30px 0;
border-bottom:
1px solid var(--ms-line);
}
#cap-mushi .mushi-feature > span {
width:
45px;
height:
45px;
display:
flex;
align-items:
center;
justify-content:
center;
border:
1px solid var(--ms-gold);
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
}
#cap-mushi .mushi-feature h3 {
margin-bottom:
10px;
font-family:
"Cinzel",
Georgia,
serif;
font-size:
20px;
font-weight:
500;
}
#cap-mushi .mushi-feature p {
margin:
0;
color:
var(--ms-soft);
font-size:
17px;
line-height:
1.65;
}
/* ============================================================
MOON
============================================================ */
#cap-mushi .mushi-moon-phases {
display:
flex;
gap:
20px;
margin-top:
35px;
}
#cap-mushi .mushi-moon-phases > div {
text-align:
center;
}
#cap-mushi .moon {
display:
block;
width:
58px;
height:
58px;
margin:
0 auto 10px;
border:
1px solid var(--ms-gold);
border-radius:
50%;
background:
var(--ms-night);
}
#cap-mushi .moon-growing {
background:
linear-gradient(
90deg,
var(--ms-night) 48%,
var(--ms-gold-light) 49%
);
}
#cap-mushi .moon-full {
background:
var(--ms-gold-light);
box-shadow:
0 0 25px rgba(201,154,74,.25);
}
#cap-mushi .moon-waning {
background:
linear-gradient(
90deg,
var(--ms-gold-light) 49%,
var(--ms-night) 50%
);
}
#cap-mushi .mushi-moon-phases small {
font-family:
"Cinzel",
Georgia,
serif;
font-size:
8px;
letter-spacing:
1px;
}
#cap-mushi .mushi-moon-art {
height:
500px;
position:
relative;
display:
flex;
align-items:
center;
justify-content:
center;
}
#cap-mushi .mushi-big-moon {
width:
300px;
height:
300px;
border-radius:
50%;
background:
radial-gradient(
circle at 35% 30%,
#fff4d9,
var(--ms-gold-light) 55%,
#b68232 100%
);
box-shadow:
0 0 80px rgba(201,154,74,.25);
}
#cap-mushi .mushi-moon-orbit {
position:
absolute;
width:
470px;
height:
250px;
border:
1px solid rgba(201,154,74,.35);
border-radius:
50%;
transform:
rotate(-20deg);
}
#cap-mushi .moon-orbit-two {
width:
350px;
height:
180px;
transform:
rotate(45deg);
}
#cap-mushi .moon-star {
position:
absolute;
color:
var(--ms-gold);
font-size:
20px;
}
#cap-mushi .ms-a {
top: 20%;
right: 15%;
}
#cap-mushi .ms-b {
bottom: 18%;
right: 24%;
}
#cap-mushi .ms-c {
left: 16%;
top: 55%;
}
/* ============================================================
NATURE
============================================================ */
#cap-mushi .mushi-nature-grid {
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
22px;
}
#cap-mushi .mushi-nature-card {
border:
1px solid rgba(201,154,74,.18);
background:
rgba(255,255,255,.025);
}
#cap-mushi .nature-image {
height:
330px;
position:
relative;
}
#cap-mushi .nature-image::after {
content:
"";
position:
absolute;
inset:
20px;
border:
1px solid rgba(232,198,127,.25);
}
#cap-mushi .nature-image span {
position:
absolute;
z-index:
2;
top:
25px;
left:
25px;
color:
var(--ms-gold-light);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
}
#cap-mushi .mountain {
background:
linear-gradient(
145deg,
#17100c,
#634a30,
#b28c4e
);
}
#cap-mushi .river {
background:
linear-gradient(
150deg,
#11100d,
#33483d,
#8b7953
);
}
#cap-mushi .lagoon {
background:
radial-gradient(
circle,
#a58b61,
#31271c 70%
);
}
#cap-mushi .nature-content {
padding:
30px;
}
#cap-mushi .nature-content h3 {
font-family:
"Cinzel",
Georgia,
serif;
font-size:
20px;
font-weight:
500;
}
#cap-mushi .nature-content p {
color:
var(--ms-soft);
font-size:
17px;
line-height:
1.7;
}
/* ============================================================
WATER
============================================================ */
#cap-mushi .mushi-water-art {
height:
470px;
position:
relative;
display:
flex;
align-items:
center;
justify-content:
center;
}
#cap-mushi .water-ripple {
position:
absolute;
left:
50%;
top:
50%;
border:
1px solid rgba(201,154,74,.4);
border-radius:
50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .ripple-1 {
width: 430px;
height: 250px;
}
#cap-mushi .ripple-2 {
width: 340px;
height: 200px;
}
#cap-mushi .ripple-3 {
width: 245px;
height: 145px;
}
#cap-mushi .ripple-4 {
width: 150px;
height: 90px;
}
#cap-mushi .water-drop {
width:
105px;
height:
105px;
border:
1px solid var(--ms-gold);
border-radius:
50% 50% 50% 0;
transform:
rotate(-45deg);
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
34px;
}
/* ============================================================
TRIAD
============================================================ */
#cap-mushi .mushi-triad {
display:
flex;
gap:
12px;
margin-top:
35px;
}
#cap-mushi .mushi-triad div {
min-width:
105px;
padding:
18px;
border:
1px solid var(--ms-line);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
letter-spacing:
1px;
}
#cap-mushi .mushi-triad span {
display:
block;
margin-bottom:
8px;
color:
var(--ms-gold);
font-size:
9px;
}
/* ============================================================
CONSCIOUSNESS
============================================================ */
#cap-mushi .mushi-consciousness {
width:
470px;
height:
470px;
max-width:
100%;
position:
relative;
margin:
0 auto;
}
#cap-mushi .conscious-circle {
position:
absolute;
width:
250px;
height:
250px;
border:
1px solid var(--ms-gold);
border-radius:
50%;
display:
flex;
justify-content:
center;
padding-top:
38px;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
8px;
letter-spacing:
2px;
}
#cap-mushi .body-circle {
top:
0;
left:
50%;
transform:
translateX(-50%);
}
#cap-mushi .mind-circle {
left:
0;
bottom:
0;
}
#cap-mushi .spirit-circle {
right:
0;
bottom:
0;
}
#cap-mushi .conscious-center {
position:
absolute;
left:
50%;
top:
50%;
width:
75px;
height:
75px;
transform:
translate(-50%,-50%);
border:
1px solid var(--ms-gold);
border-radius:
50%;
background:
var(--ms-night);
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
25px;
}
/* ============================================================
PRACTICES
============================================================ */
#cap-mushi .mushi-practice-grid {
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
20px;
}
#cap-mushi .mushi-practice-grid article {
min-height:
320px;
padding:
45px 30px;
text-align:
center;
border:
1px solid rgba(43,26,16,.14);
transition:
transform .3s ease;
}
#cap-mushi .mushi-practice-grid article:hover {
transform:
translateY(-7px);
}
#cap-mushi .mushi-practice-grid article > span {
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
}
#cap-mushi .practice-icon {
width:
80px;
height:
80px;
margin:
35px auto;
border:
1px solid var(--ms-gold);
border-radius:
50%;
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
28px;
}
#cap-mushi .mushi-practice-grid h3 {
font-family:
"Cinzel",
Georgia,
serif;
font-size:
20px;
font-weight:
500;
}
#cap-mushi .mushi-practice-grid p {
color:
#654f3d;
font-size:
17px;
}
/* ============================================================
EVOLUTION
============================================================ */
#cap-mushi .mushi-evolution-line {
display:
flex;
align-items:
center;
justify-content:
center;
}
#cap-mushi .mushi-evolution-line > div {
text-align:
center;
}
#cap-mushi .mushi-evolution-line span {
width:
60px;
height:
60px;
margin:
0 auto 18px;
border:
1px solid var(--ms-gold);
border-radius:
50%;
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
}
#cap-mushi .mushi-evolution-line strong {
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
letter-spacing:
2px;
}
#cap-mushi .mushi-evolution-line i {
width:
80px;
height:
1px;
margin:
0 18px;
background:
var(--ms-gold);
opacity:
.4;
}
/* ============================================================
SCHUMANN
============================================================ */
#cap-mushi .mushi-schumann {
height:
400px;
position:
relative;
display:
flex;
align-items:
center;
justify-content:
center;
}
#cap-mushi .schumann-wave {
position:
absolute;
width:
600px;
height:
170px;
border:
1px solid rgba(201,154,74,.4);
border-radius:
50%;
left:
50%;
top:
50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .wave-1 {
transform:
translate(-50%,-50%)
rotate(0deg);
}
#cap-mushi .wave-2 {
transform:
translate(-50%,-50%)
rotate(25deg);
}
#cap-mushi .wave-3 {
transform:
translate(-50%,-50%)
rotate(50deg);
}
#cap-mushi .wave-4 {
transform:
translate(-50%,-50%)
rotate(75deg);
}
#cap-mushi .schumann-center {
position:
relative;
z-index:
3;
width:
145px;
height:
145px;
border:
1px solid var(--ms-gold);
border-radius:
50%;
background:
var(--ms-paper);
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
40px;
}
/* ============================================================
TERAGONES
============================================================ */
#cap-mushi .mushi-teragone-art {
height:
470px;
position:
relative;
display:
flex;
align-items:
center;
justify-content:
center;
}
#cap-mushi .teragone {
position:
absolute;
width:
230px;
height:
230px;
border:
1px solid rgba(201,154,74,.5);
}
#cap-mushi .tg-1 {
transform:
rotate(0deg);
}
#cap-mushi .tg-2 {
transform:
rotate(30deg);
}
#cap-mushi .tg-3 {
transform:
rotate(60deg);
}
#cap-mushi .tg-4 {
transform:
rotate(90deg);
}
#cap-mushi .teragone-center {
position:
relative;
z-index:
4;
width:
90px;
height:
90px;
border:
1px solid var(--ms-gold);
border-radius:
50%;
background:
var(--ms-night);
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
25px;
}
/* ============================================================
FINAL GEOMETRY
============================================================ */
#cap-mushi .mushi-final-geometry {
width:
600px;
height:
600px;
max-width:
100%;
position:
relative;
margin:
0 auto;
}
#cap-mushi .final-circle {
position:
absolute;
left:
50%;
top:
50%;
border:
1px solid rgba(201,154,74,.4);
border-radius:
50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .final-c1 {
width: 580px;
height: 580px;
}
#cap-mushi .final-c2 {
width: 430px;
height: 430px;
}
#cap-mushi .final-c3 {
width: 280px;
height: 280px;
}
#cap-mushi .final-square {
position:
absolute;
left:
50%;
top:
50%;
width:
350px;
height:
350px;
transform:
translate(-50%,-50%)
rotate(45deg);
border:
1px solid rgba(201,154,74,.35);
}
#cap-mushi .final-center {
position:
absolute;
left:
50%;
top:
50%;
width:
110px;
height:
110px;
transform:
translate(-50%,-50%);
border:
1px solid var(--ms-gold);
border-radius:
50%;
background:
var(--ms-paper);
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
11px;
letter-spacing:
2px;
}
/* ============================================================
SEED
============================================================ */
#cap-mushi .mushi-seed {
width:
450px;
height:
450px;
max-width:
100%;
position:
relative;
margin:
0 auto;
}
#cap-mushi .seed-ring {
position:
absolute;
left:
50%;
top:
50%;
border:
1px solid rgba(201,154,74,.4);
border-radius:
50%;
transform:
translate(-50%,-50%);
}
#cap-mushi .seed-1 {
width: 420px;
height: 420px;
}
#cap-mushi .seed-2 {
width: 280px;
height: 280px;
}
#cap-mushi .seed-3 {
width: 150px;
height: 150px;
}
#cap-mushi .seed-core {
position:
absolute;
left:
50%;
top:
50%;
width:
105px;
height:
145px;
transform:
translate(-50%,-50%)
rotate(45deg);
border:
1px solid var(--ms-gold);
border-radius:
80% 15% 80% 15%;
display:
flex;
align-items:
center;
justify-content:
center;
color:
var(--ms-gold);
font-size:
28px;
}
/* ============================================================
DOWNLOAD CTA
============================================================ */
#cap-mushi .mushi-download {
min-height:
700px;
display:
flex;
align-items:
center;
justify-content:
center;
text-align:
center;
color:
var(--ms-cream);
background:
radial-gradient(
circle at center,
rgba(201,154,74,.12),
transparent 40%
),
var(--ms-night);
}
#cap-mushi .mushi-download-inner {
width:
100%;
max-width:
900px;
margin:
0 auto;
padding:
80px 30px;
}
#cap-mushi .mushi-download h2 {
font-size:
clamp(
48px,
6vw,
82px
);
margin:
0 auto 30px;
text-align:
center;
}
#cap-mushi .mushi-download p {
max-width:
650px;
margin:
0 auto 40px;
color:
var(--ms-soft);
font-size:
21px;
line-height:
1.7;
}
/* ============================================================
DOWNLOAD BUTTON
============================================================ */
#cap-mushi .mushi-download-button {
min-width:
280px;
min-height:
68px;
padding:
20px 35px;
display:
inline-flex;
align-items:
center;
justify-content:
center;
background:
var(--ms-gold);
border:
1px solid var(--ms-gold);
color:
var(--ms-night);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
10px;
letter-spacing:
2px;
transition:
all .3s ease;
}
#cap-mushi .mushi-download-button:hover {
background:
var(--ms-gold-light);
border-color:
var(--ms-gold-light);
color:
var(--ms-night);
transform:
translateY(-3px);
}
#cap-mushi .mushi-download small {
display:
block;
margin-top:
22px;
color:
var(--ms-soft);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
8px;
letter-spacing:
3px;
}
/* ============================================================
BOOK NAVIGATION
============================================================ */
#cap-mushi .mushi-book-navigation {
display:
grid;
grid-template-columns:
1fr 1fr;
background:
#0e0906;
}
#cap-mushi .mushi-book-link {
min-height:
190px;
padding:
40px;
display:
flex;
flex-direction:
column;
justify-content:
center;
transition:
background .3s ease;
}
#cap-mushi .mushi-book-link:hover {
background:
var(--ms-brown);
}
#cap-mushi .mushi-book-link span {
margin-bottom:
12px;
color:
var(--ms-gold);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
9px;
letter-spacing:
3px;
}
#cap-mushi .mushi-book-link strong {
color:
var(--ms-cream);
font-family:
"Cinzel",
Georgia,
serif;
font-size:
21px;
font-weight:
500;
}
#cap-mushi .mushi-book-link.next {
align-items:
flex-end;
text-align:
right;
border-left:
1px solid rgba(201,154,74,.2);
}
/* ============================================================
ELEMENTOR OVERRIDES
============================================================ */
#cap-mushi .elementor-widget-container {
width:
100% !important;
margin:
0 !important;
padding:
0 !important;
}
/* ============================================================
HERO CENTER FIX
============================================================ */
#cap-mushi .mushi-hero-inner,
#cap-mushi .mushi-label,
#cap-mushi .mushi-hero h1,
#cap-mushi .mushi-gold-line,
#cap-mushi .mushi-hero-subtitle,
#cap-mushi .mushi-hero-description,
#cap-mushi .mushi-hero-buttons {
position:
relative;
left:
0 !important;
right:
auto !important;
transform:
none !important;
}
#cap-mushi .mushi-hero-subtitle,
#cap-mushi .mushi-hero-description {
text-align:
center !important;
margin-left:
auto !important;
margin-right:
auto !important;
}
/* ============================================================
TABLET
============================================================ */
@media (max-width: 1024px) {
#cap-mushi .mushi-container {
width:
calc(100% - 50px);
}
#cap-mushi .mushi-intro-grid {
grid-template-columns:
55px 1fr;
gap:
35px;
}
#cap-mushi .mushi-intro-symbol {
grid-column:
2;
}
#cap-mushi .mushi-duality-grid {
grid-template-columns:
repeat(2,1fr);
}
#cap-mushi .mushi-two-columns,
#cap-mushi .mushi-fractal-layout {
gap:
60px;
}
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
#cap-mushi .mushi-container {
width:
calc(100% - 36px);
}
#cap-mushi .mushi-section {
padding:
85px 0;
}
/* HERO */
#cap-mushi .mushi-hero {
min-height:
700px;
}
#cap-mushi .mushi-hero-inner {
width:
100%;
max-width:
100%;
padding:
80px 18px 60px;
margin:
0 auto !important;
}
#cap-mushi .mushi-label {
font-size:
8px;
letter-spacing:
3px;
}
#cap-mushi .mushi-hero h1 {
font-size:
clamp(
65px,
21vw,
100px
);
letter-spacing:
3px;
margin:
0 auto 20px !important;
}
#cap-mushi .mushi-hero-subtitle {
width:
100%;
max-width:
100%;
padding:
0 5px;
font-size:
16px;
line-height:
1.5;
letter-spacing:
1.5px;
text-align:
center !important;
}
#cap-mushi .mushi-hero-description {
width:
100%;
max-width:
100%;
padding:
0 10px;
font-size:
18px;
line-height:
1.55;
text-align:
center !important;
}
#cap-mushi .mushi-hero-buttons {
flex-direction:
column;
gap:
12px;
}
#cap-mushi .mushi-btn {
width:
100%;
max-width:
280px;
}
/* INTRO */
#cap-mushi .mushi-intro-grid {
display:
flex;
flex-direction:
column;
text-align:
center;
gap:
30px;
}
#cap-mushi .mushi-intro-number {
writing-mode:
horizontal-tb;
}
#cap-mushi .mushi-intro-symbol {
width:
300px;
height:
300px;
}
/* HEADINGS */
#cap-mushi h2 {
font-size:
clamp(
40px,
12vw,
56px
);
}
/* DUALITY */
#cap-mushi .mushi-duality-grid {
grid-template-columns:
1fr;
}
/* TWO COLUMNS */
#cap-mushi .mushi-two-columns,
#cap-mushi .mushi-fractal-layout {
display:
flex;
flex-direction:
column;
gap:
60px;
}
/* ALCHEMY */
#cap-mushi .mushi-alchemy-visual {
width:
330px;
height:
330px;
}
#cap-mushi .mushi-element {
width:
105px;
height:
105px;
font-size:
7px;
}
#cap-mushi .mushi-alchemy-center {
width:
75px;
height:
75px;
}
/* FRACTALS */
#cap-mushi .mushi-fractal-art {
width:
330px;
height:
330px;
}
#cap-mushi .fc-1 {
width: 320px;
height: 320px;
}
#cap-mushi .fc-2 {
width: 240px;
height: 240px;
}
#cap-mushi .fc-3 {
width: 160px;
height: 160px;
}
#cap-mushi .fc-4 {
width: 80px;
height: 80px;
}
#cap-mushi .fractal-diamond {
width:
200px;
height:
200px;
}
/* MOON */
#cap-mushi .mushi-moon-phases {
justify-content:
center;
flex-wrap:
wrap;
}
#cap-mushi .mushi-moon-art {
height:
350px;
}
#cap-mushi .mushi-big-moon {
width:
230px;
height:
230px;
}
#cap-mushi .mushi-moon-orbit {
width:
330px;
height:
180px;
}
/* NATURE */
#cap-mushi .mushi-nature-grid {
grid-template-columns:
1fr;
}
/* WATER */
#cap-mushi .mushi-water-art {
height:
320px;
}
#cap-mushi .ripple-1 {
width: 310px;
height: 185px;
}
#cap-mushi .ripple-2 {
width: 240px;
height: 140px;
}
#cap-mushi .ripple-3 {
width: 175px;
height: 100px;
}
#cap-mushi .ripple-4 {
width: 110px;
height: 65px;
}
/* TRIAD */
#cap-mushi .mushi-triad {
flex-wrap:
wrap;
}
/* CONSCIOUSNESS */
#cap-mushi .mushi-consciousness {
width:
320px;
height:
320px;
}
#cap-mushi .conscious-circle {
width:
175px;
height:
175px;
padding-top:
25px;
font-size:
7px;
}
/* PRACTICES */
#cap-mushi .mushi-practice-grid {
grid-template-columns:
1fr;
}
/* EVOLUTION */
#cap-mushi .mushi-evolution-line {
flex-direction:
column;
gap:
20px;
}
#cap-mushi .mushi-evolution-line i {
width:
1px;
height:
45px;
margin:
0;
}
/* SCHUMANN */
#cap-mushi .mushi-schumann {
height:
300px;
}
#cap-mushi .schumann-wave {
width:
420px;
height:
120px;
}
/* TERAGONES */
#cap-mushi .mushi-teragone-art {
height:
340px;
}
#cap-mushi .teragone {
width:
155px;
height:
155px;
}
/* FINAL GEOMETRY */
#cap-mushi .mushi-final-geometry {
width:
330px;
height:
330px;
}
#cap-mushi .final-c1 {
width:
320px;
height:
320px;
}
#cap-mushi .final-c2 {
width:
245px;
height:
245px;
}
#cap-mushi .final-c3 {
width:
170px;
height:
170px;
}
#cap-mushi .final-square {
width:
190px;
height:
190px;
}
/* SEED */
#cap-mushi .mushi-seed {
width:
320px;
height:
320px;
}
#cap-mushi .seed-1 {
width:
310px;
height:
310px;
}
#cap-mushi .seed-2 {
width:
220px;
height:
220px;
}
#cap-mushi .seed-3 {
width:
130px;
height:
130px;
}
/* DOWNLOAD */
#cap-mushi .mushi-download {
min-height:
600px;
}
#cap-mushi .mushi-download-inner {
padding:
70px 20px;
}
#cap-mushi .mushi-download h2 {
font-size:
clamp(
42px,
12vw,
58px
);
}
#cap-mushi .mushi-download p {
font-size:
18px;
}
#cap-mushi .mushi-download-button {
width:
100%;
max-width:
300px;
}
/* BOOK NAV */
#cap-mushi .mushi-book-navigation {
grid-template-columns:
1fr;
}
#cap-mushi .mushi-book-link.next {
align-items:
flex-start;
text-align:
left;
border-left:
0;
border-top:
1px solid rgba(201,154,74,.2);
}
}/* End custom CSS */