@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap'); :root { --white-color: #ffffff; --primary-color: #91570c; --secondary-color: #d58216; --section-bg-color: #f0f8ff; --custom-btn-bg-color: #EE5007; --custom-btn-bg-hover-color: #c01f27; --dark-color: #000000; --p-color: #252629; --border-color: #7fffd4; --link-hover-color: #B22727; --body-font-family: 'Urbanist', sans-serif; --h1-font-size: 74px; --h2-font-size: 46px; --h3-font-size: 32px; --h4-font-size: 28px; --h5-font-size: 24px; --h6-font-size: 22px; --p-font-size: 18px; --btn-font-size: 14px; --copyright-font-size: 16px; --border-radius-large: 100px; --border-radius-medium: 20px; --border-radius-small: 10px; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-bold: 700; } body { background-color: var(--white-color); font-family: var(--body-font-family); } h2, h3, h4, h5, h6 { color: var(--dark-color); font-family: Urbanist !important; } h1 { font-size: var(--h1-font-size); letter-spacing: -3px; margin-top: 10px; } h2 { font-size: var(--h2-font-size); letter-spacing: -2px; } h3 { font-size: var(--h3-font-size); } h4 { font-size: var(--h4-font-size); } h5 { font-size: var(--h5-font-size); } h6 { font-size: var(--h6-font-size); } p { color: var(--p-color); font-size: var(--p-font-size); font-weight: var(--font-weight-light); margin-bottom: 2rem !important; } ul li { color: var(--p-color); font-size: var(--p-font-size); font-weight: var(--font-weight-light); } a, button { touch-action: manipulation; transition: all 0.3s; } a { display: inline-block; color: var(--primary-color); text-decoration: none; } a:hover { color: var(--link-hover-color); } b, strong { font-weight: var(--font-weight-bold); } .link-fx-1 { color: var(--white-color); position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 6px; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .link-fx-1:hover { color: var(--link-hover-color); } .link-fx-1:hover::before { transform: translateX(17px) scaleX(0); transition: transform .2s; } .link-fx-1:hover .icon circle { stroke-dashoffset: 200; transition: stroke-dashoffset .2s .1s; } .link-fx-1:hover .icon line { transform: rotate(-180deg); } .link-fx-1:hover .icon line:last-child { transform: rotate(180deg); } .link-fx-1::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: currentColor; transform-origin: right center; transition: transform .2s .1s; } .link-fx-1 .icon { position: absolute; right: 0; bottom: 0; transform: translateX(100%) rotate(90deg); font-size: 32px; } .icon { --size: 1em; height: var(--size); width: var(--size); display: inline-block; color: inherit; fill: currentColor; line-height: 1; flex-shrink: 0; max-width: initial; } .link-fx-1 .icon circle { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .2s; } .link-fx-1 .icon line { transition: transform .4s; transform-origin: 13px 15px; } .link-fx-1 .icon line:last-child { transform-origin: 19px 15px; } /*--------------------------------------- SECTION -----------------------------------------*/ .section-padding { padding-top: 100px; padding-bottom: 100px; } .section-bg { background-color: var(--section-bg-color); } .section-overlay { background-color: var(--dark-color); position: absolute; top: 0; left: 0; pointer-events: none; width: 100%; height: 100%; opacity: 0.35; } .section-overlay + .container { position: relative; } .tab-content { background-color: var(--white-color); border-radius: var(--border-radius-medium); padding: 45px; } .nav-tabs { background-color: var(--section-bg-color); border-radius: var(--border-radius-large); border-bottom: 0; padding: 15px; } .nav-tabs .nav-link { border-radius: var(--border-radius-large); border: 0; padding: 15px 25px; transition: all 0.3s; } .nav-tabs .nav-link:first-child { margin-right: 15px; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background: var(--white-color); box-shadow: 0 1rem 3rem rgba(0,0,0,.175); color: var(--primary-color); } .nav-tabs h5 { color: var(--p-color); margin-bottom: 0; } .nav-tabs .nav-link.active h5, .nav-tabs .nav-link:focus h5, .nav-tabs .nav-link:hover h5 { color: var(--primary-color); } /*--------------------------------------- CUSTOM ICON COLOR -----------------------------------------*/ .custom-icon { color: var(--secondary-color); } /*--------------------------------------- CUSTOM BUTTON -----------------------------------------*/ .custom-btn { background: linear-gradient(90deg, rgba(195,89,42,1) 0%, rgba(255,189,124,1) 51%, rgba(195,89,42,1) 100%); border: 2px solid transparent; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--btn-font-size); font-weight: var(--font-weight-bold); line-height: normal; transition: all 0.3s; padding: 10px 20px; } .custom-btn:hover { color: var(--white-color); } .custom-border-btn { background: transparent; border: 2px solid var(--custom-btn-bg-color); color: var(--custom-btn-bg-color); } .navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover, .custom-border-btn:hover { background: var(--custom-btn-bg-hover-color); border-color: transparent; color: var(--white-color); } .custom-btn-bg-white { border-color: var(--white-color); color: var(--white-color); } /*--------------------------------------- VIDEO -----------------------------------------*/ .video-wrap { z-index: -100; } .custom-video { position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; } /*--------------------------------------- SITE HEADER -----------------------------------------*/ .site-header { background-color: var(--primary-color); padding-top: 12px; padding-bottom: 12px; } /*--------------------------------------- NAVIGATION -----------------------------------------*/ .sticky-wrapper { position: absolute; top: 0; right: 0; left: 0; margin-top: 51px; } .sticky-wrapper.is-sticky .navbar { background-color: var(--dark-color); } .navbar { background: transparent; z-index: 9; } .navbar-brand, .navbar-brand:hover { color: var(--white-color); font-size: var(--h5-font-size); font-weight: var(--font-weight-bold); } .navbar-expand-lg .navbar-nav .nav-link { border-radius: var(--border-radius-large); margin: 10px; padding: 10px 20px; } .navbar-nav .nav-link { display: inline-block; color: var(--white-color); font-size: var(--p-font-size); font-weight: var(--font-weight-normal); position: relative; padding-top: 15px; padding-bottom: 15px; } .navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--secondary-color); } .navbar-toggler { border: 0; padding: 0; cursor: pointer; margin: 0; width: 30px; height: 35px; outline: none; } .navbar-toggler:focus { outline: none; box-shadow: none; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before, .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease; transition: top 300ms 50ms ease, transform 300ms 350ms ease; transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease; top: 0; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(-45deg); } .navbar-toggler .navbar-toggler-icon { background: var(--white-color); transition: background 10ms 300ms ease; display: block; width: 30px; height: 2px; position: relative; } .navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after { transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease; transition: top 300ms 350ms ease, transform 300ms 50ms ease; transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease; position: absolute; right: 0; left: 0; background: var(--white-color); width: 30px; height: 2px; content: ''; } .navbar-toggler .navbar-toggler-icon::before { top: -8px; } .navbar-toggler .navbar-toggler-icon::after { top: 8px; } /*--------------------------------------- HERO -----------------------------------------*/ .hero-section { position: relative; overflow: hidden; padding-top: 100px; height: 100vh; } .hero-section small { color: var(--white-color); } .hero-section .section-overlay { z-index: 2; opacity: 0.45; } .hero-section .container { position: relative; z-index: 2; height: 100%; padding-bottom: 50px; } .hero-section .container .row { height: 100%; } .about-section { background-color: #fff; background-repeat: no-repeat; background-size: cover; position: relative; } .about-image { border-radius: var(--border-radius-medium); display: block; } .about-text-wrap { position: relative; } .about-text-icon { background: var(--primary-color); border-radius: 100%; font-size: var(--h3-font-size); width: 70px; height: 70px; line-height: 70px; text-align: center; } .about-text-info { backdrop-filter: blur(5px) saturate(180%); -webkit-backdrop-filter: blur(5px) saturate(180%); background-color: rgba(255, 255, 255, 0.75); border-radius: var(--border-radius-medium); border: 1px solid rgba(209, 213, 219, 0.3); position: absolute; bottom: 0; right: 0; left: 0; margin: 20px; padding: 35px; } /*--------------------------------------- TICKET -----------------------------------------*/ .ticket-section { background-image: url('../images/nicholas-green-unsplash-blur.jpg'); background-repeat: no-repeat; background-size: cover; position: relative; padding-top: 130px; } .ticket-form { background: var(--white-color); border-radius: var(--border-radius-medium); padding: 50px; } .ticket-form .form-check { position: relative; min-height: 52px; padding-left: 35px; } .ticket-form .form-check .form-check-label { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 12px; margin-left: 35px; width: 100%; height: 100%; } /*--------------------------------------- ARTISTS -----------------------------------------*/ .artists-thumb { position: relative; overflow: hidden; margin-bottom: 30px; } .artists-image { border-radius: var(--border-radius-medium); display: block; width: 100%; } .artists-thumb:hover .artists-hover { transform: translateY(0); opacity: 1; } .artists-hover { background-color: var(--primary-color); background-color: rgba(248, 203, 46, 0.75); border-radius: var(--border-radius-medium); backdrop-filter: blur(5px) saturate(180%); -webkit-backdrop-filter: blur(5px) saturate(180%); margin: 20px; padding: 35px; transition: all 0.5s ease; transform: translateY(100%); position: absolute; bottom: 0; right: 0; left: 0; opacity: 0; } .artists-hover p strong { color: var(--white-color); display: inline-block; min-width: 180px; margin-right: 20px; } .artists-hover p a { color: var(--secondary-color); } .artists-hover p a:hover { color: var(--white-color); } .artists-hover hr { margin: 1.5rem 0; } /*--------------------------------------- SCHEDULE -----------------------------------------*/ .schedule-section { background-image: url('../images/nainoa-shizuru-unsplash-blur.jpg'); background-color: #242424; background-repeat: no-repeat; background-position: center; background-size: cover; } .table-responsive { filter: drop-shadow(2px 2px 4px #606060); } .schedule-table { border-radius: var(--border-radius-medium); position: relative; overflow: hidden; } .schedule-table .bg-warning { background: #f0a5a5 !important; } .schedule-table thead th { background-color: var(--secondary-color); } .schedule-table th, .schedule-table tr, .schedule-table td { border-bottom-color: #363a3e; padding: 30px; } .schedule-table tr:last-child th, .schedule-table tr:last-child td { border-bottom-color: transparent; } .schedule-table thead th { border-right: 1px solid #c7460a; border-bottom-color: transparent; } .schedule-table th + td { border-bottom: 0; } .schedule-table thead th:last-child { border-right-color: transparent; } .schedule-table .pop-background-image { background-image: url('../images/artists/joecalih-UmTZqmMvQcw-unsplash.jpg'); } .schedule-table .rock-background-image { background-image: url('../images/artists/abstral-official-bdlMO9z5yco-unsplash.jpg'); } .schedule-table .country-background-image { background-image: url('../images/artists/soundtrap-rAT6FJ6wltE-unsplash.jpg'); } .table-background-image-wrap { background-repeat: no-repeat; background-position: center; background-size: cover; box-shadow: none; position: relative; } .schedule-table h3, .schedule-table p { color: var(--white-color); position: relative; z-index: 2; } /*--------------------------------------- PRICING -----------------------------------------*/ .pricing-thumb { border: 5px dotted var(--dark-color); border-radius: var(--border-radius-medium); position: relative; padding: 50px; } .pricing-thumb h3 small { display: inline-block; font-size: var(--p-font-size); margin-right: 15px; } .pricing-list { column-count: 2; padding-left: 20px; } .pricing-list-item { line-height: normal; margin-right: 10px; margin-bottom: 10px; } .pricing-tag { background-color: var(--secondary-color); border-radius: var(--border-radius-large); color: var(--white-color); font-weight: var(--font-weight-bold); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 120px; height: 120px; position: absolute; top: 0; right: 0; margin: 20px; } .pricing-tag span { font-size: 180%; line-height: normal; } .pricing-thumb .link-fx-1 { color: var(--primary-color); } .pricing-thumb .link-fx-1:hover { color: var(--link-hover-color); } /*--------------------------------------- CONTACT -----------------------------------------*/ .google-map { border-radius: var(--border-radius-medium); } /*--------------------------------------- CUSTOM FORM -----------------------------------------*/ .custom-form .form-control { color: var(--p-color); margin-bottom: 24px; padding-top: 13px; padding-bottom: 13px; outline: none; } .custom-form button[type="submit"] { background: var(--custom-btn-bg-color); border: none; border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--p-font-size); font-weight: var(--font-weight-medium); transition: all 0.3s; margin-bottom: 0; } .custom-form button[type="submit"]:hover, .custom-form button[type="submit"]:focus { background: var(--custom-btn-bg-hover-color); border-color: transparent; } /*--------------------------------------- SITE FOOTER -----------------------------------------*/ .site-footer { background-color: var(--dark-color); position: relative; overflow: hidden; padding-bottom: 30px; } .site-footer-top { background-color: var(--secondary-color); background-image: url('../images/nainoa-shizuru-NcdG9mK3PBY-unsplash.jpg'); background-repeat: no-repeat; margin-bottom: 70px; padding-top: 30px; padding-bottom: 30px; } .site-footer-bottom { border-top: 1px solid #1f1c1c; margin-top: 60px; } .site-footer-title { color: var(--primary-color); } .site-footer-link, .copyright-text { color: var(--white-color); } .site-footer-links { padding-left: 0; } .site-footer-link-item { list-style: none; display: inline-block; margin-right: 15px; } .copyright-text { font-size: var(--copyright-font-size); } /*--------------------------------------- SOCIAL ICON -----------------------------------------*/ .social-icon { margin: 0; padding: 0; } .social-icon-item { list-style: none; display: inline-block; vertical-align: top; } .social-icon-link { background: var(--secondary-color); border-radius: var(--border-radius-large); color: var(--white-color); font-size: var(--copyright-font-size); display: block; margin-right: 10px; text-align: center; width: 35px; height: 35px; line-height: 36px; transition: background 0.2s, color 0.2s; } .social-icon-link:hover { background: var(--primary-color); color: var(--white-color); } .social-icon-link span { display: block; } .social-icon-link span:hover::before{ animation: spinAround 2s linear infinite; } @keyframes spinAround { from { transform: rotate(0deg) } to { transform: rotate(360deg); } } /*--------------------------------------- RESPONSIVE STYLES -----------------------------------------*/ @media screen and (max-width: 991px) { h1 { font-size: 62px; } h2 { font-size: 36px; } h3 { font-size: 32px; } h4 { font-size: 28px; } h5 { font-size: 20px; } h6 { font-size: 18px; } .section-padding { padding-top: 50px; padding-bottom: 50px; } .navbar { background-color: var(--dark-color); } .navbar-expand-lg .navbar-nav { padding-bottom: 30px; } .navbar-expand-lg .navbar-nav .nav-link { padding: 0; } .hero-section { padding-top: 150px; } .pricing-thumb { padding: 35px; } .schedule-table h3 { font-size: 22px; } .schedule-table th { padding: 20px; } .schedule-table tr, .schedule-table td { padding: 25px; } .ticket-section { padding-top: 130px; } .ticket-form { padding: 30px; } } @media screen and (max-width: 767px) { .custom-btn { font-size: 14px; padding: 10px 20px; } } @media screen and (max-width: 480px) { h1 { font-size: 52px; } h2 { font-size: 28px; } h3 { font-size: 26px; } h4 { font-size: 22px; } h5 { font-size: 20px; } }