feat: decorative gold side lines + frosted glass header
- Gold vertical lines on both sides (desktop 1280px+), fixed position, gradient fade at top/bottom, positioned at 3vw from edges - Header light mode: frosted glass (bg-white/60 backdrop-blur-xl) with subtle bottom border, matching dark mode aesthetic
This commit is contained in:
@@ -26,6 +26,37 @@ body {
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== Decorative side lines (desktop only) ===== */
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
body::before,
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 1px;
|
||||||
|
z-index: 40;
|
||||||
|
pointer-events: none;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(201, 169, 110, 0.15) 15%,
|
||||||
|
rgba(201, 169, 110, 0.25) 50%,
|
||||||
|
rgba(201, 169, 110, 0.15) 85%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
left: clamp(16px, 3vw, 48px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body::after {
|
||||||
|
right: clamp(16px, 3vw, 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ===== Selection ===== */
|
/* ===== Selection ===== */
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
|
|||||||
@@ -126,7 +126,7 @@ export function Header() {
|
|||||||
<header
|
<header
|
||||||
className={`fixed top-0 z-50 w-full transition-all duration-500 ${
|
className={`fixed top-0 z-50 w-full transition-all duration-500 ${
|
||||||
scrolled || menuOpen
|
scrolled || menuOpen
|
||||||
? "bg-white/90 shadow-none backdrop-blur-xl dark:bg-black/40"
|
? "bg-white/60 backdrop-blur-xl border-b border-neutral-200/30 dark:bg-black/40 dark:border-white/[0.06]"
|
||||||
: "bg-transparent"
|
: "bg-transparent"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user