.rdhdr-bar,
.rdhdr-bar *,
.rdhdr-nav,
.rdhdr-nav *,
.rdhdr-overlay,
.rdhdr-overlay * {
box-sizing: border-box;
}
.rdhdr-nav ul,
.rdhdr-nav li {
list-style: none;
margin: 0;
padding: 0;
}
.rdhdr-nav a,
.rdhdr-overlay a {
text-decoration: none;
} .rdhdr-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
pointer-events: none;
margin: 0;
padding: 0;
}
.rdhdr-bar__fill {
height: 100%;
width: 0%;
transition: width 0.12s linear;
} .rdhdr-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
margin: 0;
padding: 0;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(139, 58, 42, 0.12);
transition: background 0.4s ease, box-shadow 0.4s ease;
}
.rdhdr-nav.scrolled {
box-shadow: 0 2px 30px rgba(44, 36, 32, 0.08);
}
.rdhdr-nav--dark:not(.scrolled) {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-bottom-color: rgba(232, 221, 208, 0.08);
}
.rdhdr-nav--dark:not(.scrolled) .rdhdr-nav__logo img {
filter: brightness(0) invert(1);
opacity: 0.9;
}
.rdhdr-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: clamp(1.5rem, 5vw, 4rem);
padding-right: clamp(1.5rem, 5vw, 4rem);
margin: 0;
}
.rdhdr-nav__logo {
display: inline-flex;
align-items: center;
line-height: 0;
}
.rdhdr-nav__logo img {
width: auto;
display: block;
margin: 0;
}
.rdhdr-nav__links {
display: flex;
align-items: center;
}
.rdhdr-nav__links a {
position: relative;
transition: color 0.3s ease;
}
.rdhdr-nav__links a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.rdhdr-nav__links a:hover::after,
.rdhdr-nav__links a.active::after {
transform: scaleX(1);
}
.rdhdr-nav__cta {
display: inline-flex;
align-items: center;
transition: background-color 0.3s ease;
}
.rdhdr-nav__cta::after {
display: none;
}
.rdhdr-nav__hamburger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
cursor: pointer;
background: transparent;
border: none;
outline: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
padding: 0;
margin: 0;
position: relative;
z-index: 200;
}
.rdhdr-nav__hamburger span {
display: block;
width: 22px;
height: 1.25px;
border-radius: 2px;
transform-origin: center;
pointer-events: none;
transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.3s ease, background-color 0.3s ease;
}
.rdhdr-nav__hamburger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.rdhdr-nav__hamburger.is-open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.rdhdr-nav__hamburger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .rdhdr-overlay {
position: fixed;
inset: 0;
z-index: 99998;
margin: 0;
padding: 0;
clip-path: circle(0% at calc(100% - 36px) 36px);
transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1);
pointer-events: none;
overflow: hidden;
}
.rdhdr-overlay.is-open {
clip-path: circle(150% at calc(100% - 36px) 36px);
pointer-events: all;
}
.rdhdr-overlay__illus {
position: absolute;
bottom: -4%;
right: -3%;
width: clamp(260px, 55vw, 460px);
height: auto;
max-width: none;
pointer-events: none;
user-select: none;
transform: rotate(8deg);
filter: brightness(3) saturate(0);
}
.rdhdr-overlay__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.8rem, 7vw, 3.5rem);
}
.rdhdr-overlay__topbar {
display: block;
}
.rdhdr-overlay__logo {
height: 36px;
width: auto;
max-width: 160px;
display: block;
opacity: 0;
transform: translateY(-12px);
transition: opacity 0.5s ease 0.08s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.08s;
}
.rdhdr-overlay.is-open .rdhdr-overlay__logo {
opacity: 0.85;
transform: translateY(0);
}
.rdhdr-overlay__close {
position: absolute;
top: clamp(1.5rem, 5vw, 2.5rem);
right: clamp(1.8rem, 7vw, 3.5rem);
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
background: transparent;
border: 1px solid;
border-radius: 0;
box-shadow: none;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
opacity: 0;
transform: translateY(-10px) rotate(-45deg);
transition: opacity 0.45s ease 0.1s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, border-color 0.3s ease, background-color 0.3s ease;
}
.rdhdr-overlay.is-open .rdhdr-overlay__close {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
.rdhdr-overlay__close svg {
transition: transform 0.3s ease;
}
.rdhdr-overlay__close:hover svg {
transform: rotate(90deg);
}
.rdhdr-overlay__list {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
margin-top: -1rem;
}
.rdhdr-overlay__item {
overflow: hidden;
border-bottom: 1px solid;
}
.rdhdr-overlay__item:first-child {
border-top: 1px solid;
}
.rdhdr-overlay__link {
display: flex;
align-items: baseline;
gap: clamp(0.8rem, 2vw, 1.4rem);
padding: clamp(0.65rem, 2.5vw, 1rem) 0;
position: relative;
transform: translateY(40px);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease;
cursor: pointer;
}
.rdhdr-overlay.is-open .rdhdr-overlay__link {
transform: translateY(0);
opacity: 1;
}
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(1) .rdhdr-overlay__link { transition-delay: 0.20s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(2) .rdhdr-overlay__link { transition-delay: 0.26s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(3) .rdhdr-overlay__link { transition-delay: 0.32s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(4) .rdhdr-overlay__link { transition-delay: 0.38s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(5) .rdhdr-overlay__link { transition-delay: 0.44s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(6) .rdhdr-overlay__link { transition-delay: 0.50s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(7) .rdhdr-overlay__link { transition-delay: 0.56s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(8) .rdhdr-overlay__link { transition-delay: 0.62s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(9) .rdhdr-overlay__link { transition-delay: 0.68s; }
.rdhdr-overlay.is-open .rdhdr-overlay__item:nth-child(10) .rdhdr-overlay__link { transition-delay: 0.74s; }
.rdhdr-overlay__num {
font-style: italic;
flex-shrink: 0;
width: clamp(1.8rem, 4vw, 2.6rem);
line-height: 1;
transition: color 0.3s ease;
}
.rdhdr-overlay__text {
line-height: 1;
letter-spacing: -0.02em;
position: relative;
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s ease;
}
.rdhdr-overlay__text::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
height: 1.5px;
width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.rdhdr-overlay__link:hover .rdhdr-overlay__text {
transform: translateX(8px);
}
.rdhdr-overlay__link:hover .rdhdr-overlay__text::after {
transform: scaleX(1);
}
.rdhdr-overlay__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.2rem;
border-top: 1px solid rgba(232, 221, 208, 0.12);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease 0.1s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.rdhdr-overlay.is-open .rdhdr-overlay__footer {
opacity: 1;
transform: translateY(0);
transition-delay: 0.8s;
}
.rdhdr-overlay__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.4rem;
text-transform: uppercase;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.rdhdr-overlay__cta:hover {
transform: translateY(-2px);
}
@media (max-width: 800px) {
.rdhdr-nav__links {
display: none;
}
.rdhdr-nav__hamburger {
display: flex;
}
}