/* =========================================================
MASTER SETTINGS FOR THIS SECTION
========================================================= */
:root {
--nn3-black: #02070d;
--nn3-black-soft: #06111b;
--nn3-panel: #07131f;
--nn3-panel-light: #0a1927;
--nn3-white: #ffffff;
--nn3-grey: #bec7d1;
--nn3-muted: #83909d;
--nn3-line: rgba(183, 201, 216, 0.24);
--nn3-green: #29bfff;
--nn3-blue: #29c3ff;
--nn3-pink: #ff43aa;
--nn3-purple: #8c4dff;
--nn3-content-width: 1440px;
}
/* =========================================================
SECTION RESET
========================================================= */
.neon-info-section,
.neon-info-section *,
.neon-footer-section,
.neon-footer-section * {
box-sizing: border-box;
}
.neon-info-section {
position: relative;
width: 100%;
overflow: hidden;
padding: 46px 0 72px;
background:
radial-gradient(
circle at 10% 22%,
rgba(41, 195, 255, 0.055),
transparent 28%
),
radial-gradient(
circle at 88% 44%,
rgba(255, 67, 170, 0.045),
transparent 26%
),
var(--nn3-black);
color: var(--nn3-white);
font-family: "Inter", Arial, sans-serif;
}
.neon-info-container {
width: min(
var(--nn3-content-width),
calc(100% - 96px)
);
margin: 0 auto;
}
/* =========================================================
TOP AREA
LEFT: INTERACTIVE EVENT INFORMATION
RIGHT: REGISTRATION CALLOUT
========================================================= */
.neon-info-top-grid {
display: grid;
grid-template-columns:
minmax(440px, 0.82fr)
minmax(520px, 1.18fr);
align-items: stretch;
gap: 34px;
}
/* =========================================================
GENERAL SECTION HEADING
========================================================= */
.neon-info-heading {
margin: 0 0 20px;
color: var(--nn3-green);
font-family: "Barlow Condensed", sans-serif;
font-size: 30px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
text-transform: uppercase;
text-shadow:
0 0 9px rgba(168, 255, 0, 0.26);
}
/* =========================================================
INTERACTIVE EVENT INFORMATION PANEL
========================================================= */
.neon-tab-panel {
height: 100%;
padding: 27px;
border:
1px solid rgba(183, 201, 216, 0.36);
border-radius: 8px;
background:
linear-gradient(
180deg,
rgba(7, 20, 32, 0.94),
rgba(3, 11, 18, 0.96)
);
box-shadow:
inset 0 0 28px rgba(41, 195, 255, 0.015);
}
/* =========================================================
INTERACTIVE TAB BUTTONS
========================================================= */
.neon-tabs {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
overflow: hidden;
margin-bottom: 18px;
border-top:
1px solid rgba(255, 255, 255, 0.10);
border-bottom:
1px solid rgba(255, 255, 255, 0.10);
border-radius: 3px;
}
.neon-tab-button {
min-height: 58px;
padding: 11px 12px;
border: 0;
border-right:
1px solid rgba(255, 255, 255, 0.08);
background:
rgba(255, 255, 255, 0.025);
color: var(--nn3-grey);
cursor: pointer;
font-family: "Barlow Condensed", sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1;
text-transform: uppercase;
transition:
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.neon-tab-button:last-child {
border-right: 0;
}
.neon-tab-button:hover {
background:
rgba(168, 255, 0, 0.08);
color: var(--nn3-white);
}
.neon-tab-button.is-active {
background:
linear-gradient(
135deg,
rgba(168, 255, 0, 0.52),
rgba(82, 131, 0, 0.58)
);
color: var(--nn3-white);
box-shadow:
inset 0 0 16px rgba(168, 255, 0, 0.10);
}
/* =========================================================
TAB CONTENT
========================================================= */
.neon-tab-content {
display: none;
animation:
neonTabFade 0.24s ease;
}
.neon-tab-content.is-active {
display: block;
}
@keyframes neonTabFade {
from {
opacity: 0;
transform:
translateY(5px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
EVENT DAY SCHEDULE
========================================================= */
.neon-schedule-list {
margin: 0;
padding: 0;
list-style: none;
}
.neon-schedule-row {
display: grid;
grid-template-columns:
115px 1fr;
gap: 20px;
padding: 11px 10px;
border-bottom:
1px solid rgba(255, 255, 255, 0.12);
}
.neon-schedule-row:last-child {
border-bottom: 0;
}
.neon-schedule-time {
color: var(--nn3-green);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
.neon-schedule-name {
color: var(--nn3-grey);
font-size: 16px;
line-height: 1.4;
}
/* =========================================================
TOURNAMENT FORMAT TAB
========================================================= */
.neon-format-intro {
margin: 0 0 20px;
color: var(--nn3-grey);
font-size: 15px;
line-height: 1.7;
}
.neon-format-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 12px;
}
.neon-format-item {
min-height: 118px;
padding: 18px;
border:
1px solid rgba(255, 255, 255, 0.12);
border-radius: 5px;
background:
rgba(255, 255, 255, 0.025);
}
.neon-format-item-number {
margin-bottom: 5px;
color: var(--format-colour, var(--nn3-green));
font-family: "Barlow Condensed", sans-serif;
font-size: 31px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
text-shadow:
0 0 8px currentColor;
}
.neon-format-item-heading {
margin-bottom: 7px;
color: var(--nn3-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 19px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
}
.neon-format-item-copy {
margin: 0;
color: var(--nn3-grey);
font-size: 13px;
line-height: 1.55;
}
.neon-points-table {
width: 100%;
margin-top: 15px;
border-collapse: collapse;
}
.neon-points-table th,
.neon-points-table td {
padding: 10px 12px;
border:
1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
text-align: left;
}
.neon-points-table th {
background:
rgba(168, 255, 0, 0.08);
color: var(--nn3-green);
font-family: "Barlow Condensed", sans-serif;
font-size: 15px;
text-transform: uppercase;
}
.neon-points-table td {
color: var(--nn3-grey);
}
/* =========================================================
RULES TAB
========================================================= */
.neon-rules-box {
padding: 23px;
border:
1px solid rgba(41, 195, 255, 0.28);
border-radius: 6px;
background:
radial-gradient(
circle at 90% 10%,
rgba(41, 195, 255, 0.08),
transparent 32%
),
rgba(255, 255, 255, 0.025);
}
.neon-rules-heading {
margin: 0 0 11px;
color: var(--nn3-white);
font-family: "Barlow Condensed", sans-serif;
font-size: 27px;
font-weight: 700;
text-transform: uppercase;
}
.neon-rules-copy {
margin: 0;
color: var(--nn3-grey);
font-size: 14px;
line-height: 1.7;
}
.neon-rule-summary {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.neon-rule-summary-item {
padding: 13px 14px;
border-left:
2px solid var(--summary-colour, var(--nn3-green));
background:
rgba(255, 255, 255, 0.025);
color: var(--nn3-grey);
font-size: 13px;
line-height: 1.5;
}
.neon-rules-button {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 22px;
padding: 12px 23px;
border:
1px solid var(--nn3-blue);
border-radius: 4px;
background:
rgba(41, 195, 255, 0.06);
color: var(--nn3-white) !important;
font-family: "Barlow Condensed", sans-serif;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.4px;
text-decoration: none;
text-transform: uppercase;
box-shadow:
0 0 16px rgba(41, 195, 255, 0.10);
transition:
transform 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.neon-rules-button:hover {
transform:
translateY(-2px);
background:
rgba(41, 195, 255, 0.13);
box-shadow:
0 0 25px rgba(41, 195, 255, 0.22);
}
/* =========================================================
LARGE REGISTRATION CALLOUT
========================================================= */
.neon-register-panel {
position: relative;
height: 100%;
min-height: 485px;
overflow: hidden;
display: flex;
align-items: center;
padding: 54px;
border:
1px solid var(--nn3-green);
border-radius: 8px;
background:
radial-gradient(
circle at 80% 25%,
rgba(41, 195, 255, 0.16),
transparent 30%
),
radial-gradient(
circle at 93% 88%,
rgba(255, 67, 170, 0.13),
transparent 30%
),
linear-gradient(
135deg,
rgba(7, 22, 34, 0.98),
rgba(2, 10, 17, 0.99)
);
box-shadow:
0 0 19px rgba(168, 255, 0, 0.14),
inset 0 0 35px rgba(168, 255, 0, 0.025);
}
.neon-register-panel::before {
position: absolute;
top: -110px;
right: -70px;
width: 380px;
height: 380px;
border:
1px solid rgba(168, 255, 0, 0.14);
border-radius: 50%;
content: "";
}
.neon-register-panel::after {
position: absolute;
right: 35px;
bottom: 25px;
width: 170px;
height: 170px;
border:
1px solid rgba(41, 195, 255, 0.12);
border-radius: 50%;
content: "";
}
.neon-register-content {
position: relative;
z-index: 2;
max-width: 600px;
}
.neon-register-eyebrow {
margin-bottom: 13px;
color: var(--nn3-green);
font-family: "Barlow Condensed", sans-serif;
font-size: 21px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.neon-register-title {
margin: 0;
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(
49px,
5vw,
75px
);
font-weight: 700;
letter-spacing: -0.8px;
line-height: 0.92;
text-transform: uppercase;
}
.neon-register-title span {
color: transparent;
-webkit-text-stroke:
1px var(--nn3-blue);
text-shadow:
0 0 11px rgba(41, 195, 255, 0.46);
}
.neon-register-copy {
max-width: 520px;
margin: 22px 0 0;
color: var(--nn3-grey);
font-size: 16px;
line-height: 1.75;
}
.neon-register-features {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 24px;
}
.neon-register-feature {
padding: 8px 12px;
border:
1px solid rgba(255, 255, 255, 0.14);
border-radius: 30px;
background:
rgba(255, 255, 255, 0.025);
color: var(--nn3-grey);
font-size: 12px;
font-weight: 600;
}
.neon-register-button {
min-width: 240px;
min-height: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 29px;
padding: 14px 29px;
border:
2px solid var(--nn3-green);
border-radius: 4px;
background:
var(--nn3-green);
color: #071000 !important;
font-family: "Barlow Condensed", sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
text-transform: uppercase;
box-shadow:
0 0 14px rgba(168, 255, 0, 0.34),
0 0 28px rgba(168, 255, 0, 0.13);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.neon-register-button:hover {
transform:
translateY(-3px);
box-shadow:
0 0 20px rgba(168, 255, 0, 0.56),
0 0 40px rgba(168, 255, 0, 0.24);
}
/* =========================================================
GALLERY SECTION
Positioned underneath the two top panels.
========================================================= */
.neon-gallery-section {
margin-top: 42px;
}
.neon-gallery-heading-row {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 20px;
}
.neon-gallery-heading-row::before,
.neon-gallery-heading-row::after {
height: 1px;
flex: 1;
background:
var(--nn3-line);
content: "";
}
.neon-gallery-heading {
flex-shrink: 0;
margin: 0;
color: var(--nn3-green);
font-family: "Barlow Condensed", sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.neon-gallery-grid {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 16px;
}
.neon-gallery-item {
position: relative;
min-height: 260px;
overflow: hidden;
border:
1px solid rgba(183, 201, 216, 0.30);
border-radius: 7px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.neon-gallery-item::after {
position: absolute;
inset: 0;
background:
linear-gradient(
0deg,
rgba(2, 7, 13, 0.40),
transparent 50%
);
content: "";
}
.neon-gallery-item:hover {
transform:
translateY(-5px);
border-color:
var(--gallery-colour, var(--nn3-blue));
box-shadow:
0 0 22px rgba(41, 195, 255, 0.12);
}
/* =========================================================
FOOTER
========================================================= */
.neon-footer-section {
position: relative;
width: 100%;
overflow: hidden;
padding: 52px 0 21px;
border-top:
1px solid rgba(41, 195, 255, 0.16);
background:
radial-gradient(
circle at 10% 55%,
rgba(41, 195, 255, 0.11),
transparent 25%
),
radial-gradient(
circle at 95% 65%,
rgba(27, 83, 255, 0.14),
transparent 27%
),
#02070d;
color: var(--nn3-white);
font-family: "Inter", Arial, sans-serif;
}
.neon-footer-container {
width: min(
var(--nn3-content-width),
calc(100% - 96px)
);
margin: 0 auto;
}
.neon-footer-grid {
display: grid;
grid-template-columns:
1.05fr 0.7fr 1fr 0.8fr;
gap: 50px;
}
.neon-footer-logo {
display: inline-block;
font-family: "Barlow Condensed", sans-serif;
font-size: 48px;
font-weight: 700;
letter-spacing: -1px;
line-height: 0.72;
text-decoration: none;
text-transform: uppercase;
}
.neon-footer-logo span {
display: block;
}
.neon-footer-logo-blue {
color: transparent;
-webkit-text-stroke:
1px var(--nn3-blue);
text-shadow:
0 0 9px rgba(41, 195, 255, 0.65);
}
.neon-footer-logo-pink {
color: transparent;
-webkit-text-stroke:
1px var(--nn3-pink);
text-shadow:
0 0 9px rgba(255, 67, 170, 0.60);
}
.neon-footer-intro {
max-width: 290px;
margin: 23px 0 0;
color: var(--nn3-grey);
font-size: 14px;
line-height: 1.7;
}
.neon-footer-heading {
margin: 0 0 18px;
color: var(--nn3-green);
font-family: "Barlow Condensed", sans-serif;
font-size: 22px;
font-weight: 700;
text-transform: uppercase;
}
.neon-footer-links a,
.neon-footer-info p {
display: block;
margin: 0 0 9px;
color: var(--nn3-grey);
font-size: 14px;
line-height: 1.55;
text-decoration: none;
}
.neon-footer-links a:hover {
color: var(--nn3-blue);
}
.neon-footer-social-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.neon-footer-social-link {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(255, 255, 255, 0.30);
border-radius: 50%;
color: var(--nn3-white) !important;
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition:
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.neon-footer-social-link:hover {
border-color:
var(--nn3-blue);
color:
var(--nn3-blue) !important;
box-shadow:
0 0 14px rgba(41, 195, 255, 0.20);
}
.neon-footer-powered {
margin-top: 42px;
padding: 20px 0;
border-top:
1px solid rgba(255, 255, 255, 0.12);
border-bottom:
1px solid rgba(255, 255, 255, 0.12);
color: var(--nn3-muted);
font-family: "Barlow Condensed", sans-serif;
font-size: 16px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
}
.neon-footer-powered strong {
color: var(--nn3-green);
font-size: 19px;
text-shadow:
0 0 9px rgba(168, 255, 0, 0.28);
}
.neon-footer-bottom {
display: flex;
justify-content: space-between;
gap: 25px;
padding-top: 20px;
color: var(--nn3-muted);
font-size: 11px;
}
/* =========================================================
TABLET RESPONSIVE DESIGN
========================================================= */
@media (max-width: 1080px) {
.neon-info-container,
.neon-footer-container {
width:
calc(100% - 48px);
}
.neon-info-top-grid {
grid-template-columns: 1fr;
}
.neon-register-panel {
min-height: 430px;
}
.neon-gallery-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.neon-footer-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
MOBILE RESPONSIVE DESIGN
========================================================= */
@media (max-width: 680px) {
.neon-info-section {
padding:
36px 0
55px;
}
.neon-info-container,
.neon-footer-container {
width:
calc(100% - 30px);
}
.neon-tab-panel {
padding:
18px;
}
.neon-tabs {
grid-template-columns: 1fr;
}
.neon-tab-button {
border-right: 0;
border-bottom:
1px solid rgba(255, 255, 255, 0.08);
}
.neon-tab-button:last-child {
border-bottom: 0;
}
.neon-schedule-row {
grid-template-columns:
86px 1fr;
gap: 10px;
padding:
10px 4px;
}
.neon-schedule-time {
font-size: 15px;
}
.neon-schedule-name {
font-size: 14px;
}
.neon-format-grid,
.neon-rule-summary {
grid-template-columns: 1fr;
}
.neon-register-panel {
min-height: auto;
padding:
40px 25px;
}
.neon-register-title {
font-size:
clamp(
46px,
14vw,
62px
);
}
.neon-register-button {
width: 100%;
min-width: 0;
}
.neon-gallery-grid {
grid-template-columns: 1fr;
}
.neon-gallery-item {
min-height: 280px;
}
.neon-footer-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.neon-footer-bottom {
flex-direction: column;
text-align: center;
}
}
Schedule
Event Day
Tournament Format
Rules
6:00pm
Team Check-in & Uniform Collection
10:30pm
Championship Finals
11:00pm
Awards & Presentations
12:00am
Entertainment Begins
Neon Nights will feature a fast-paced 3x3 tournament
format designed to maximise court time, maintain intensity
and reward consistent team performance.
Result
Competition Points
Win
3 points
Draw
2 points
Loss
1 point
Forfeit
0 points
Neon Nights Tournament Rules
All teams are responsible for reviewing the tournament
rules before taking the court. The rules document covers
game play, scoring, substitutions, fouls, misconduct,
uniforms and finals eligibility.
Three players per team are permitted on court.
Substitutions must be made through designated substitution area.
All referee decisions made during play are final.
Teams are guaranteed a minimum of four games. Teams must be ready to play at their scheduled game time.
Download Tournament Rules
Limited Spots Available
Twenty Teams.$5k on the line.
Secure your team's place in Sydney's newest indoor Semi-Pro 3x3
basketball festival. Entry is strictly limited, so gather
your squad and lock in your position before registrations
close.
4–5 players per team
Pool matches and finals
Live entertainment
$5k Prize money
Register Your Team
/* =========================================================
INTERACTIVE EVENT INFORMATION TABS
========================================================= */
(function () {
const neonTabButtons =
document.querySelectorAll(
".neon-tab-button"
);
const neonTabPanels =
document.querySelectorAll(
".neon-tab-content"
);
neonTabButtons.forEach(
function (button) {
button.addEventListener(
"click",
function () {
const selectedTabId =
button.getAttribute(
"data-neon-tab"
);
/* REMOVE ACTIVE STATE FROM ALL BUTTONS */
neonTabButtons.forEach(
function (tabButton) {
tabButton.classList.remove(
"is-active"
);
tabButton.setAttribute(
"aria-selected",
"false"
);
}
);
/* HIDE ALL TAB PANELS */
neonTabPanels.forEach(
function (panel) {
panel.classList.remove(
"is-active"
);
panel.hidden = true;
}
);
/* ACTIVATE SELECTED BUTTON */
button.classList.add(
"is-active"
);
button.setAttribute(
"aria-selected",
"true"
);
/* DISPLAY SELECTED PANEL */
const selectedPanel =
document.getElementById(
selectedTabId
);
if (selectedPanel) {
selectedPanel.hidden = false;
selectedPanel.classList.add(
"is-active"
);
}
}
);
}
);
})();
