S SHIV THE REALTY BOOK A SITE VISIT ↗

HOME ABOUT PROJECTS CONTACT BOOK A SITE VISIT ↗

/* ========================================================= RESET ========================================================= */ #shiv-premium-header, #shiv-premium-header * { box-sizing:border-box; } /* ========================================================= STICKY HEADER WRAPPER ========================================================= */ #shiv-premium-header { position:fixed; top:0; left:0; width:100%; z-index:999999; padding-top:24px; pointer-events:none; transition: padding .4s ease; } /* ========================================================= MAIN HEADER ========================================================= */ #shiv-premium-header .shiv-header { position:relative; width:min(1280px,90%); min-height:76px; margin:0 auto; padding: 0 20px 0 24px; display:flex; align-items:center; justify-content:space-between; gap:35px; pointer-events:auto; } /* ========================================================= GLASS PILL ========================================================= */ #shiv-premium-header .shiv-header::before { content:""; position:absolute; z-index:-1; top:50%; left:50%; width:100%; height:100%; transform: translate(-50%,-50%); border-radius:999px; background: linear-gradient( 135deg, rgba(255,255,255,.11), rgba(255,255,255,.025) ); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.035), 0 15px 50px rgba(0,0,0,.25); } /* ========================================================= SUBTLE GOLD BORDER ========================================================= */ #shiv-premium-header .shiv-header::after { content:""; position:absolute; z-index:-2; inset:-1px; border-radius:999px; background: linear-gradient( 90deg, transparent 0%, rgba(213,173,91,.12) 20%, rgba(213,173,91,.42) 50%, rgba(213,173,91,.12) 80%, transparent 100% ); opacity:.7; pointer-events:none; } /* ========================================================= LOGO ========================================================= */ #shiv-premium-header .shiv-brand { position:relative; z-index:5; display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; flex-shrink:0; } /* ========================================================= LOGO CIRCLE ========================================================= */ #shiv-premium-header .shiv-brand-mark { width:43px; height:43px; display:flex; align-items:center; justify-content:center; border-radius:50%; border: 1px solid rgba(213,173,91,.65); background: radial-gradient( circle at 35% 30%, rgba(255,255,255,.13), rgba(213,173,91,.07) 45%, rgba(0,0,0,.20) ); color:#d8b568; font-family: Georgia, "Times New Roman", serif; font-size:22px; font-style:italic; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 20px rgba(213,173,91,.08); } /* ========================================================= LOGO TEXT ========================================================= */ #shiv-premium-header .shiv-brand-text { display:flex; flex-direction:column; justify-content:center; line-height:1; } #shiv-premium-header .shiv-brand-text strong { color:#fff; font-family: Arial, sans-serif; font-size:15px; font-weight:700; letter-spacing:4px; } #shiv-premium-header .shiv-brand-text small { margin-top:5px; color:#d5ad5b; font-family: Arial, sans-serif; font-size:7px; font-weight:600; letter-spacing:3px; } /* ========================================================= DESKTOP NAVIGATION ========================================================= */ #shiv-premium-header .shiv-navigation { position:relative; z-index:5; display:flex; align-items:center; justify-content:center; gap:35px; margin-left:auto; } /* ========================================================= NAV LINKS ========================================================= */ #shiv-premium-header .shiv-navigation a { position:relative; overflow:hidden; padding: 11px 15px; border-radius:30px; color: rgba(255,255,255,.72); text-decoration:none; font-family: Arial, sans-serif; font-size:9px; font-weight:600; letter-spacing:2px; transition: color .35s ease, transform .35s ease; } /* ========================================================= STATIC + ANIMATED GRADIENT HOVER ========================================================= */ #shiv-premium-header .shiv-navigation a::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:30px; background: linear-gradient( 115deg, transparent 10%, rgba(213,173,91,.05) 30%, rgba(213,173,91,.28) 50%, rgba(255,255,255,.08) 65%, transparent 90% ); background-size:220% 100%; opacity:0; transform:scale(.85); transition: opacity .35s ease, transform .35s ease; } /* ========================================================= HOVER GRADIENT ANIMATION DOES NOT FOLLOW MOUSE ========================================================= */ @keyframes shivNavGradient { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media(hover:hover) { #shiv-premium-header .shiv-navigation a:hover { color:#fff; transform: translateY(-1px); } #shiv-premium-header .shiv-navigation a:hover::before { opacity:1; transform:scale(1); animation: shivNavGradient 1.8s ease-in-out infinite; } } /* ========================================================= ACTIVE NAV ========================================================= */ #shiv-premium-header .shiv-navigation a.active { color:#fff; } #shiv-premium-header .shiv-navigation a.active::after { content:""; position:absolute; left:50%; bottom:4px; width:18px; height:1px; transform: translateX(-50%); background:#d5ad5b; } /* ========================================================= HEADER CTA ========================================================= */ #shiv-premium-header .shiv-header-button { position:relative; z-index:5; overflow:hidden; min-height:46px; padding: 0 18px 0 21px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border: 1px solid rgba(213,173,91,.45); border-radius:999px; background: rgba(213,173,91,.08); color:#fff; text-decoration:none; font-family: Arial, sans-serif; font-size:8px; font-weight:700; letter-spacing:1.7px; transition: color .35s ease, border-color .35s ease, transform .35s ease; } /* ========================================================= CTA GRADIENT ========================================================= */ #shiv-premium-header .shiv-header-button::before { content:""; position:absolute; z-index:-1; inset:0; background: linear-gradient( 110deg, #b88a3b, #f0d18a, #d5ad5b, #fff0b8, #b88a3b ); background-size: 300% 100%; opacity:0; transition: opacity .35s ease; } @keyframes shivCtaGradient { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media(hover:hover) { #shiv-premium-header .shiv-header-button:hover { color:#111; border-color: #d5ad5b; transform: translateY(-2px); } #shiv-premium-header .shiv-header-button:hover::before { opacity:1; animation: shivCtaGradient 2s ease-in-out infinite; } } #shiv-premium-header .shiv-header-button b { width:25px; height:25px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#d5ad5b; color:#111; font-size:14px; font-weight:400; transition: background .35s ease, color .35s ease; } #shiv-premium-header .shiv-header-button:hover b { background:#111; color:#d5ad5b; } /* ========================================================= MOBILE MENU BUTTON ========================================================= */ #shiv-premium-header .shiv-menu-button { display:none; position:relative; z-index:10; width:44px; height:44px; padding:0; border: 1px solid rgba(255,255,255,.20); border-radius:50%; background: rgba(255,255,255,.06); cursor:pointer; } #shiv-premium-header .shiv-menu-button span { position:absolute; left:50%; width:17px; height:1px; background:#fff; transform: translateX(-50%); transition: transform .3s ease, top .3s ease; } #shiv-premium-header .shiv-menu-button span:first-child { top:17px; } #shiv-premium-header .shiv-menu-button span:last-child { top:24px; } /* ========================================================= MENU OPEN ========================================================= */ #shiv-premium-header .shiv-menu-button.open span:first-child { top:21px; transform: translateX(-50%) rotate(45deg); } #shiv-premium-header .shiv-menu-button.open span:last-child { top:21px; transform: translateX(-50%) rotate(-45deg); } /* ========================================================= MOBILE MENU ========================================================= */ #shiv-premium-header .shiv-mobile-menu { display:none; width:min(1280px,90%); margin: 14px auto 0; padding:22px; border: 1px solid rgba(255,255,255,.15); border-radius:25px; background: rgba(10,10,10,.72); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); box-shadow: 0 20px 60px rgba(0,0,0,.30); pointer-events:auto; } #shiv-premium-header .shiv-mobile-menu.open { display:flex; flex-direction:column; gap:4px; } /* ========================================================= MOBILE LINKS ========================================================= */ #shiv-premium-header .shiv-mobile-menu a { position:relative; overflow:hidden; padding: 16px 12px; border-bottom: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.80); text-decoration:none; font-family: Arial, sans-serif; font-size:10px; font-weight:600; letter-spacing:2px; } #shiv-premium-header .shiv-mobile-menu a::before { content:""; position:absolute; z-index:-1; inset:0; background: linear-gradient( 100deg, transparent, rgba(213,173,91,.16), transparent ); background-size: 250% 100%; opacity:0; } @media(hover:hover) { #shiv-premium-header .shiv-mobile-menu a:hover::before { opacity:1; animation: shivNavGradient 1.8s ease-in-out infinite; } #shiv-premium-header .shiv-mobile-menu a:hover { color:#d5ad5b; } } #shiv-premium-header .shiv-mobile-menu a:last-child { border-bottom:0; } /* ========================================================= MOBILE CTA ========================================================= */ #shiv-premium-header .shiv-mobile-menu .shiv-mobile-cta { margin-top:10px; display:flex; align-items:center; justify-content:space-between; padding: 16px 18px; border: 1px solid rgba(213,173,91,.35); border-radius:40px; background: rgba(213,173,91,.08); color:#d5ad5b; } /* ========================================================= STICKY SCROLL STATE ========================================================= */ #shiv-premium-header.scrolled { padding-top:12px; } #shiv-premium-header.scrolled .shiv-header { min-height:64px; } #shiv-premium-header.scrolled .shiv-header::before { background: linear-gradient( 135deg, rgba(15,15,15,.72), rgba(15,15,15,.42) ); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 15px 55px rgba(0,0,0,.32); } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px) { #shiv-premium-header { padding-top:18px; } #shiv-premium-header .shiv-header { width:92%; min-height:68px; padding: 0 14px 0 18px; } #shiv-premium-header .shiv-navigation { display:none; } #shiv-premium-header .shiv-header-button { margin-left:auto; margin-right:10px; } #shiv-premium-header .shiv-menu-button { display:block; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px) { #shiv-premium-header { padding-top:14px; } #shiv-premium-header .shiv-header { width:92%; min-height:62px; padding: 0 10px 0 14px; gap:8px; } #shiv-premium-header .shiv-header::before { width:100%; height:100%; border-radius:999px; backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); } #shiv-premium-header .shiv-brand { gap:8px; } #shiv-premium-header .shiv-brand-mark { width:37px; height:37px; font-size:19px; } #shiv-premium-header .shiv-brand-text strong { font-size:12px; letter-spacing:3px; } #shiv-premium-header .shiv-brand-text small { font-size:6px; letter-spacing:2px; } #shiv-premium-header .shiv-header-button { display:none; } #shiv-premium-header .shiv-menu-button { width:40px; height:40px; } #shiv-premium-header.scrolled { padding-top:9px; } #shiv-premium-header.scrolled .shiv-header { min-height:58px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:380px) { #shiv-premium-header .shiv-header { width:94%; } #shiv-premium-header .shiv-brand-text { display:none; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce) { #shiv-premium-header *, #shiv-premium-header *::before, #shiv-premium-header *::after { animation:none !important; transition:none !important; } } (function(){ /* ===================================================== ELEMENTS ===================================================== */ const header = document.getElementById( 'shiv-premium-header' ); const menuButton = document.getElementById( 'shiv-menu-button' ); const mobileMenu = document.getElementById( 'shiv-mobile-menu' ); if(!header) return; /* ===================================================== STICKY SCROLL EFFECT ===================================================== */ function updateHeader(){ if(window.scrollY > 35){ header.classList.add( 'scrolled' ); } else { header.classList.remove( 'scrolled' ); } } updateHeader(); window.addEventListener( 'scroll', updateHeader, { passive:true } ); /* ===================================================== MOBILE MENU ===================================================== */ if( menuButton && mobileMenu ){ menuButton.addEventListener( 'click', function(){ const isOpen = mobileMenu.classList .toggle('open'); menuButton.classList .toggle('open'); menuButton.setAttribute( 'aria-expanded', isOpen ? 'true' : 'false' ); } ); /* ================================================ CLOSE AFTER LINK CLICK ================================================= */ mobileMenu .querySelectorAll('a') .forEach( function(link){ link.addEventListener( 'click', function(){ mobileMenu.classList .remove('open'); menuButton.classList .remove('open'); menuButton.setAttribute( 'aria-expanded', 'false' ); } ); } ); } })();