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;
|
||||
}
|
||||
|
||||
/* ===== 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 {
|
||||
|
||||
@@ -126,7 +126,7 @@ export function Header() {
|
||||
<header
|
||||
className={`fixed top-0 z-50 w-full transition-all duration-500 ${
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user