:root{
--gold:#c8a34d;
--gold2:#e9d8a5;
--green:#071b13;
--white:#f7f7f5;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:Montserrat,sans-serif;background:#08130f;color:var(--white)}
.hero{
height:100vh;display:flex;flex-direction:column;justify-content:space-between;
background:url(images/golf-hero.jpg) center/cover no-repeat;
position:relative;overflow:hidden;
animation:zoom 28s alternate infinite ease-in-out;
}
@keyframes zoom{from{background-size:100%}to{background-size:106%}}
.overlay{
position:absolute;inset:0;
background:
linear-gradient(to bottom,rgba(5,15,10,.78),rgba(5,15,10,.28),rgba(5,15,10,.82)),
url(images/overlay.png);
}
.topbar{position:relative;z-index:2;height:120px}
.menu{position:absolute;left:60px;top:42px}
.menu a{text-decoration:none;color:var(--gold2);letter-spacing:3px}
.social{position:absolute;right:60px;top:42px;color:var(--gold2);letter-spacing:10px}
.logo{
position:absolute;left:50%;transform:translateX(-50%);
top:0;width:180px;height:250px;
background:rgba(9,35,25,.95);
clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
border:2px solid rgba(200,163,77,.55);
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(8px);
box-shadow:0 15px 40px rgba(0,0,0,.45);
}
.logo img{max-width:110px}
.content{
position:relative;z-index:2;
text-align:center;
margin-top:40px;
animation:fade 1.2s ease;
}
@keyframes fade{from{opacity:0;transform:translateY(20px)}to{opacity:1}}
h1{
font-family:"Cormorant Garamond",serif;
font-size:clamp(4rem,8vw,7rem);
font-weight:600;
letter-spacing:2px;
}
.divider{
width:320px;height:1px;margin:20px auto;
background:linear-gradient(to right,transparent,var(--gold),transparent)
}
.club{letter-spacing:7px;color:#efe9d6}
.date{
font-family:"Cormorant Garamond",serif;
font-size:8rem;color:var(--gold2);line-height:1;margin-top:20px}
.month{font-family:"Cormorant Garamond",serif;font-size:2rem;color:var(--gold2);letter-spacing:3px}
.claim{margin-top:28px;font-size:2rem;font-style:italic}
.mouse{margin-top:35px}
.mouse span{display:inline-block;width:28px;height:46px;border:2px solid var(--gold2);border-radius:18px;position:relative}
.mouse span:before{content:"";position:absolute;width:6px;height:6px;background:var(--gold2);left:50%;margin-left:-3px;top:8px;border-radius:50%;animation:wheel 2s infinite}
@keyframes wheel{to{top:24px;opacity:0}}
footer{
position:relative;z-index:2;
display:grid;grid-template-columns:repeat(3,1fr);
padding:28px 50px;
background:rgba(5,20,14,.65);
backdrop-filter:blur(10px);
border-top:1px solid rgba(200,163,77,.3)
}
.sponsor{display:flex;flex-direction:column;align-items:center;gap:12px}
.sponsor img{max-height:48px;max-width:170px}
.sponsor span{color:#fff}
@media(max-width:900px){
.hero{height:auto;min-height:100vh}
.logo{width:140px;height:200px}
.menu{left:20px}.social{right:20px}
h1{font-size:3rem}.date{font-size:5rem}
footer{grid-template-columns:1fr}
}