@font-face{ font-family: 'Cutmark'; src: url('assets/fonts/CutmarkVariable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face{ font-family: 'Cutmark'; src: url('assets/fonts/CutmarkVariable_Nr-Heavy.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; } :root{ --bg-dark:#141414; --text:#F4F4F4; --muted:#CC9337; --panel:#E6EAEE; --orange:#ED3106; --black:#161616; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family:'Cutmark', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg-dark); } img{ max-width:100%; height:auto; display:block; } .topbar{ height:102px; background:var(--bg-dark); padding:0 40px; } .topbar-inner{ height:100%; display:grid; grid-template-columns: 1fr auto 1fr; align-items:start; } .brand{ justify-self:center; padding-top:40px; } .logo-img{ width:173px; height:40px; object-fit:contain; } .btn-svg{ position:relative; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; } .btn-svg span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Cutmark', sans-serif; font-weight:400; letter-spacing:-0.02em; color:#fff; pointer-events:none; } .nav-cta{ justify-self:end; padding-top:40px; } .nav-cta img{ width:135.74px; height:41px; } .nav-cta span{ font-size:20px; line-height:1; } @media (max-width:768px){ .nav-cta{ display:none; } .topbar{ padding:0 20px; } .brand{ padding-top:28px; } } .hero{ position:relative; background:url('assets/Hook_Header_landing.jpg') center/cover no-repeat; min-height: 620px; display:flex; align-items:center; justify-content:center; padding: 90px 16px 40px; } .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.55); } .hero-content{ position:relative; z-index:1; width:100%; max-width: 1200px; display:flex; flex-direction:column; align-items:center; text-align:center; } .hero-kicker{ font-weight:400; font-size:27px; line-height:1; letter-spacing:-0.02em; color:var(--muted); margin:0 0 16px; text-transform:uppercase; } .hero-title{ margin:0 0 24px; text-transform:uppercase; color:var(--text); font-weight:900; letter-spacing:0; } .hero-title .t1, .hero-title .t2{ display:block; font-size:92px; line-height:73px; } .hero-title .t2{ white-space:nowrap; } .hero-cta img{ width:329px; height:74px; } .hero-cta span{ font-size:28px; line-height:1; } @media (max-width:1023px){ .hero{ min-height:520px; padding-top:80px; } .hero-kicker{ font-size:clamp(14px, 2.2vw, 24px); } .hero-title .t1, .hero-title .t2{ font-size:clamp(36px, 7vw, 70px); line-height:clamp(30px, 5.6vw, 58px); white-space:normal; } .hero-title .t2{ white-space:nowrap; } .hero-cta img{ width:clamp(240px, 60vw, 329px); height:auto; } .hero-cta span{ font-size:clamp(14px, 4vw, 28px); } } .event{ background:var(--panel); color:var(--black); text-align:center; padding:56px 16px 64px; } .event h2{ margin:0 0 32px; font-weight:400; font-size:27px; line-height:1; letter-spacing:-0.02em; text-transform:uppercase; } .poster{ display:flex; justify-content:center; } .poster img{ width:100%; max-width:588px; } .social{ height:220px; background:var(--orange); display:flex; align-items:center; justify-content:center; } .social-link{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; } .ig-icon{ width:51.34px; height:51.44px; } .social-text{ font-weight:400; font-size:27px; line-height:1; letter-spacing:-0.02em; color:#fff; text-transform:uppercase; } .footer{ height:clamp(260px, 36vw, 528px); background:var(--orange); overflow:hidden; } .footer img{ width:100%; height:100%; object-fit:cover; object-position:center; } .footer{ display:flex; align-items:center; justify-content:center; } .footer img{ width: min(1669px, 100%); height: auto; max-height: 387px; object-fit: contain; object-position: center; } html{ -webkit-text-size-adjust: 100%; } .topbar{ height:102px; padding:0 40px; } .topbar-inner{ position:relative; height:100%; display:flex; align-items:center; justify-content:flex-end; } .brand{ position:absolute; left:50%; transform:translateX(-50%); padding-top:0; margin:0; } .logo-img{ width:173px; height:40px; } .nav-cta{ padding-top:0; margin:0; } @media (min-width:1024px){ .nav-cta img{ width:135.74px; height:41px; } } @media (max-width:768px){ .nav-cta{ display:none; } .topbar{ padding:0 20px; } } @media (max-width:420px){ .hero-title .t2{ white-space: normal; } } body{ overflow-x:hidden; } .btn-svg img{ -webkit-transform: translateZ(0); transform: translateZ(0); } a, a:visited, a:hover, a:active{ color: inherit; text-decoration: none !important; } a{ -webkit-tap-highlight-color: rgba(0,0,0,0); } @media (max-width: 480px){ .hero{ min-height: 560px; padding-top: 78px; padding-bottom: 28px; } .hero-kicker{ font-size: 18px; margin-bottom: 14px; } .hero-title .t1, .hero-title .t2{ font-size: 56px; line-height: 50px; } .hero-cta img{ width: 280px; height: auto; } .hero-cta span{ font-size: 20px; } } .footer{ display:flex; align-items:center; justify-content:center; overflow:hidden; } @media (min-width: 1024px){ .footer{ height: 528px; } } .footer img{ width: min(1669px, 100%); height: auto; max-height: 387px; object-fit: contain; object-position: center; } @media (max-width: 768px) { html, body, h1, h2, h3, h4, h5, h6, p, span, a, button, .hero-title, .hero-kicker, .event h2, .social-text { font-style: normal !important; font-synthesis: none; } } .footer { padding-top: 24px; padding-bottom: 24px; height: auto; } .footer-logo { max-height: 387px; } @media (max-width: 768px) { .footer { padding-top: 16px; padding-bottom: 16px; } .footer-logo { max-height: 260px; } } .footer{ position: relative; height: 528px; padding: 0 !important; overflow: hidden; background: var(--orange); display:block; } .footer img{ position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1669px, 100%); max-height: 387px; height: auto; object-fit: contain; object-position: center bottom; } @media (max-width: 768px){ .footer{ height: 260px; } .footer img{ max-height: 220px; } } @media (max-width: 768px){ body{ font-style: normal !important; font-synthesis: none; -webkit-font-smoothing: antialiased; font-variation-settings: "ital" 0, "slnt" 0; } *{ font-style: normal !important; } }
.footer{position:relative;background:#ff3b00;height:280px;padding:0;overflow:hidden}
.footer-inner{height:100%;display:flex;flex-direction:column}
.footer-top{padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.footer-bottom{flex:1;display:flex;align-items:flex-end;justify-content:center}
.footer-bottom img,.footer-logo{width:100%;height:100%;max-width:1669px;object-fit:contain;object-position:center bottom;display:block}
@media(max-width:768px){.footer{height:200px}.footer-top{padding-top:12px;gap:8px}} .footer{height:clamp(240px,28vw,420px)}.footer-top{padding-top:14px;gap:8px}.footer-bottom img,.footer-logo{height:auto;max-height:100%}@media(max-width:768px){.footer{height:clamp(180px,34vw,240px)}.footer-top{padding-top:10px;gap:6px}}