[data-template="neon-grid"] {
--site-cut: none;
--site-cut-sm: none;
--ng-line: color-mix(in srgb, var(--site-primary) 30%, transparent);
--ng-glow: color-mix(in srgb, var(--site-primary) 45%, transparent);
--ng-accent-glow: color-mix(in srgb, var(--site-accent) 45%, transparent);
--ng-spark-glow: color-mix(in srgb, var(--site-highlight) 35%, transparent);
--ng-frost: color-mix(in srgb, var(--site-text) 4%, transparent);
--site-line: var(--site-border, var(--ng-line));
--site-panel: var(--site-surface, color-mix(in srgb, var(--site-bg), var(--site-primary) 6%));
--site-panel-strong: var(--site-surface-strong, color-mix(in srgb, var(--site-bg), var(--site-primary) 12%));
isolation: isolate;
}
[data-template="neon-grid"] [data-scheme] {
--ng-line: color-mix(in srgb, var(--site-primary) 30%, transparent);
--ng-glow: color-mix(in srgb, var(--site-primary) 45%, transparent);
--ng-accent-glow: color-mix(in srgb, var(--site-accent) 45%, transparent);
--ng-spark-glow: color-mix(in srgb, var(--site-highlight) 35%, transparent);
--ng-frost: color-mix(in srgb, var(--site-text) 4%, transparent);
--site-line: var(--site-border, var(--ng-line));
--site-panel: var(--site-surface, color-mix(in srgb, var(--site-bg), var(--site-primary) 6%));
--site-panel-strong: var(--site-surface-strong, color-mix(in srgb, var(--site-bg), var(--site-primary) 12%));
}
[data-template="neon-grid"] .ng-texture {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--site-accent) 10%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--site-primary) 10%, transparent) 1px, transparent 1px);
background-size: 50px 50px;
}
[data-template="neon-grid"] .ng-grain {
position: fixed;
inset: 0;
z-index: 60;
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-template="neon-grid"] .ng-progress {
position: fixed;
top: 0;
inset-inline-end: 0;
z-index: 70;
width: 5px;
background: var(--site-accent);
box-shadow: 0 0 12px var(--ng-accent-glow);
}
[data-template="neon-grid"] .site-nav-bar {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--site-bg) 92%, transparent);
border-bottom: 2px solid var(--site-primary);
box-shadow: 0 6px 30px -12px var(--ng-glow);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
[data-template="neon-grid"] .site-nav-link {
color: var(--site-link, var(--site-primary));
border-bottom-color: transparent;
transition:
color 0.3s,
text-shadow 0.3s,
transform 0.3s;
}
[data-template="neon-grid"] .site-nav-link:hover,
[data-template="neon-grid"] .site-nav-link[aria-current="page"],
[data-template="neon-grid"] .site-nav-link[aria-current="location"] {
color: var(--site-text);
text-shadow:
0 0 10px var(--ng-glow),
0 0 20px var(--ng-glow);
border-bottom-color: transparent;
}
[data-template="neon-grid"] .site-footer-bar {
background: var(--site-bg);
border-top: 2px solid color-mix(in srgb, var(--site-accent) 50%, transparent);
}
[data-template="neon-grid"] .site-display {
font-weight: 800;
text-shadow: 0 0 24px color-mix(in srgb, var(--site-text) 18%, transparent);
}
[data-template="neon-grid"] .site-kicker {
color: var(--site-link, var(--site-accent));
letter-spacing: 0.24em;
}
[data-template="neon-grid"] .site-more {
color: var(--site-link, var(--site-highlight));
}
[data-template="neon-grid"] .site-panel {
background: var(--site-surface, var(--ng-frost));
border: 1px solid var(--site-border, var(--ng-line));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition:
border-color 0.3s,
box-shadow 0.3s,
transform 0.3s;
}
[data-template="neon-grid"] a.site-panel:hover,
[data-template="neon-grid"] .site-panel:has(a:hover) {
border-color: color-mix(in srgb, var(--site-highlight) 80%, transparent);
box-shadow:
0 0 20px var(--ng-spark-glow),
0 0 40px color-mix(in srgb, var(--site-primary) 20%, transparent);
}
[data-template="neon-grid"] .site-photo {
background:
linear-gradient(135deg, color-mix(in srgb, var(--site-primary) 25%, transparent), transparent 60%),
var(--site-panel);
color: var(--site-caption, color-mix(in srgb, var(--site-text) 55%, transparent));
}
[data-template="neon-grid"] .site-page-header {
position: relative;
background:
radial-gradient(60% 120% at 20% 0%, color-mix(in srgb, var(--site-primary) 22%, transparent), transparent 70%),
radial-gradient(50% 100% at 90% 100%, color-mix(in srgb, var(--site-accent) 14%, transparent), transparent 70%);
border-bottom: 2px solid var(--ng-line);
}
[data-template="neon-grid"] .site-tag-accent {
background: var(--site-highlight);
color: color-mix(in srgb, var(--site-highlight), #000 80%);
}
[data-template="neon-grid"] .site-stat {
background: var(--site-surface, var(--ng-frost));
border-color: color-mix(in srgb, var(--site-highlight) 30%, transparent);
}
[data-template="neon-grid"] .site-btn {
position: relative;
overflow: hidden;
background: transparent;
border: 2px solid var(--ng-line);
color: var(--site-text);
letter-spacing: 0.1em;
transition:
border-color 0.3s,
box-shadow 0.3s;
}
[data-template="neon-grid"] .site-btn-accent {
background: var(--site-button, transparent);
color: var(--site-button-text, var(--site-text));
border-color: color-mix(in srgb, var(--site-accent) 70%, transparent);
box-shadow:
0 0 20px var(--ng-accent-glow),
inset 0 0 10px color-mix(in srgb, var(--site-accent) 12%, transparent);
}
[data-template="neon-grid"] .site-btn:hover {
border-color: var(--site-highlight);
box-shadow:
0 0 30px var(--ng-spark-glow),
0 0 60px var(--ng-glow);
}
[data-template="neon-grid"] .ng-btn-sweep {
position: absolute;
inset: 0;
background: currentColor;
opacity: 0.18;
transform: translateX(-100%);
transition: transform 0.35s;
pointer-events: none;
}
[data-template="neon-grid"] .ng-btn:hover .ng-btn-sweep {
transform: translateX(100%);
}
[data-template="neon-grid"] .ng-hero {
--ng-glow-end: var(--site-accent);
--ng-glow-mid: color-mix(in srgb, var(--site-accent) 55%, var(--site-primary));
--ng-glow-mid-at: 22%;
--ng-glow-ground-at: 60%;
position: relative;
display: flex;
min-height: 620px;
align-items: center;
overflow: hidden;
padding: 72px 16px 56px;
background: linear-gradient(
200deg,
var(--ng-glow-end) 0%,
var(--ng-glow-mid) var(--ng-glow-mid-at),
var(--site-bg) var(--ng-glow-ground-at)
);
border-bottom: 2px solid color-mix(in srgb, var(--site-accent) 40%, transparent);
}
[data-template="neon-grid"][data-hero-glow="dark"] .ng-hero {
--ng-glow-end: color-mix(
in srgb,
color-mix(in srgb, var(--site-primary), var(--site-accent) 35%),
var(--site-bg) 62%
);
--ng-glow-mid: color-mix(
in srgb,
color-mix(in srgb, var(--site-primary), var(--site-accent) 35%),
var(--site-bg) 80%
);
--ng-glow-mid-at: 25%;
--ng-glow-ground-at: 62%;
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-hero {
--ng-glow-mid-at: 30%;
--ng-glow-ground-at: 62%;
min-height: 86vh;
padding: 96px 48px 72px;
background: linear-gradient(
to left,
var(--ng-glow-end) 0%,
var(--ng-glow-mid) var(--ng-glow-mid-at),
var(--site-bg) var(--ng-glow-ground-at)
);
}
[data-template="neon-grid"][data-hero-glow="dark"] .ng-hero {
--ng-glow-mid-at: 35%;
--ng-glow-ground-at: 70%;
}
}
[data-template="neon-grid"] .ng-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
gap: 2px;
opacity: 0.35;
}
[data-template="neon-grid"][data-hero-glow="dark"] .ng-grid {
opacity: 0.3;
}
[data-template="neon-grid"] .ng-grid-square {
background: linear-gradient(
45deg,
color-mix(in srgb, var(--site-primary) 70%, var(--site-accent)),
color-mix(in srgb, var(--site-primary), #000 60%)
);
animation: ng-fill 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
animation-delay: var(--ng-delay, 0s);
}
[data-template="neon-grid"] .ng-scanlines {
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, transparent 96%, color-mix(in srgb, var(--site-primary) 28%, transparent) 100%),
linear-gradient(0deg, transparent 96%, color-mix(in srgb, var(--site-highlight) 22%, transparent) 100%);
background-size: 40px 40px;
animation: ng-lines 15s linear infinite;
}
[data-template="neon-grid"] .ng-hero-image {
position: absolute;
inset: 0;
opacity: 0.22;
mix-blend-mode: luminosity;
}
[data-template="neon-grid"] .ng-hero-mark {
position: absolute;
top: -8%;
left: 50%;
width: min(92vw, 1100px);
aspect-ratio: 1;
transform: translateX(-50%);
opacity: 0.3;
filter: drop-shadow(0 0 60px color-mix(in srgb, var(--site-accent) 70%, transparent));
pointer-events: none;
animation: ng-float 4s ease-in-out infinite;
}
[data-template="neon-grid"] .ng-hero-mark img {
object-fit: contain;
}
[data-template="neon-grid"] .ng-hero-content {
position: relative;
isolation: isolate;
display: flex;
max-width: 1100px;
flex-direction: column;
gap: 22px;
padding: 16px;
}
[data-template="neon-grid"] .ng-hero-content::before {
content: "";
position: absolute;
z-index: -1;
inset-block: -80px;
inset-inline: -120px -160px;
background: radial-gradient(closest-side, color-mix(in srgb, var(--site-bg) 78%, transparent), transparent);
pointer-events: none;
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-hero-content {
padding: 40px;
}
}
[data-template="neon-grid"] .ng-corner {
position: absolute;
width: 32px;
height: 32px;
border-color: var(--site-primary);
pointer-events: none;
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-corner {
width: 80px;
height: 80px;
}
}
[data-template="neon-grid"] .ng-corner-start {
top: -4px;
inset-inline-start: -4px;
border-top: 2px solid;
border-inline-start: 2px solid;
}
[data-template="neon-grid"] .ng-corner-end {
inset-inline-end: -4px;
bottom: -4px;
border-inline-end: 2px solid;
border-bottom: 2px solid;
}
[data-template="neon-grid"] .ng-headline {
display: flex;
flex-wrap: wrap;
column-gap: 0.28em;
font-family: var(--site-font-heading);
font-size: clamp(44px, 9vw, 128px);
font-weight: 800;
line-height: 0.92;
text-transform: uppercase;
}
[data-template="neon-grid"] .ng-word {
display: inline-flex;
white-space: nowrap;
}
[data-template="neon-grid"] .ng-letter {
display: inline-block;
text-shadow:
0 0 24px color-mix(in srgb, currentColor 55%, transparent),
0 0 60px color-mix(in srgb, var(--site-accent) 35%, transparent);
animation: ng-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
animation-delay: calc(var(--ng-i, 0) * 45ms + 0.2s);
transition: text-shadow 0.3s;
}
[data-template="neon-grid"] .ng-letter::before {
content: attr(data-letter);
}
[data-template="neon-grid"] .ng-letter:hover {
text-shadow:
0 0 30px var(--ng-spark-glow),
0 0 60px var(--ng-glow),
0 0 90px color-mix(in srgb, var(--site-text) 20%, transparent);
}
[data-template="neon-grid"] .ng-section {
position: relative;
padding: 40px 16px 0;
}
[data-template="neon-grid"] .ng-section:last-child {
padding-bottom: 40px;
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-section {
padding: 64px 48px 0;
}
[data-template="neon-grid"] .ng-section:last-child {
padding-bottom: 64px;
}
}
[data-template="neon-grid"] .ng-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
[data-template="neon-grid"] .ng-title {
font-size: clamp(36px, 6vw, 72px);
}
[data-template="neon-grid"] .ng-stat {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
background: var(--site-surface, var(--ng-frost));
border: 1px solid color-mix(in srgb, var(--site-highlight) 30%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
animation: ng-card 0.5s ease-out backwards;
animation-delay: var(--ng-delay, 0s);
transition:
transform 0.3s,
border-color 0.3s,
box-shadow 0.3s;
}
[data-template="neon-grid"] .ng-stat:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--site-highlight) 80%, transparent);
box-shadow:
0 0 20px var(--ng-spark-glow),
0 0 40px color-mix(in srgb, var(--site-primary) 20%, transparent);
}
[data-template="neon-grid"] .ng-stat-value {
font-family: var(--site-font-heading);
font-size: min(28px, var(--fit-size, 28px));
line-height: 1;
overflow-wrap: break-word;
text-shadow:
0 0 10px color-mix(in srgb, var(--site-highlight) 45%, transparent),
0 0 20px color-mix(in srgb, var(--site-highlight) 25%, transparent);
animation: ng-glow 2s ease-in-out infinite alternate;
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-stat-value {
font-size: min(36px, var(--fit-size, 36px));
}
}
[data-template="neon-grid"] .ng-stat-label {
color: var(--site-caption, color-mix(in srgb, var(--site-text) 60%, transparent));
font-size: 14px;
}
[data-template="neon-grid"] .ng-carousel {
position: relative;
height: 300px;
overflow: hidden;
border: 2px solid color-mix(in srgb, var(--site-highlight) 30%, transparent);
transition:
border-color 0.3s,
box-shadow 0.3s;
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-carousel {
height: 440px;
}
}
[data-template="neon-grid"] .ng-carousel:hover {
border-color: color-mix(in srgb, var(--site-highlight) 80%, transparent);
box-shadow:
0 0 30px var(--ng-spark-glow),
0 0 50px color-mix(in srgb, var(--site-primary) 20%, transparent);
}
[data-template="neon-grid"] .ng-carousel-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
[data-template="neon-grid"] .ng-carousel-slide[data-active="true"] {
opacity: 1;
pointer-events: auto;
}
[data-template="neon-grid"] .ng-featured-card {
position: relative;
display: block;
height: 100%;
}
[data-template="neon-grid"] .ng-glint {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(
135deg,
transparent 40%,
color-mix(in srgb, var(--site-highlight) 14%, transparent) 50%,
transparent 60%
);
transform: translateX(-100%);
transition: transform 0.6s;
}
[data-template="neon-grid"] .ng-featured-card:hover .ng-glint {
transform: translateX(100%);
}
[data-template="neon-grid"] .ng-featured-copy {
position: absolute;
inset: auto 0 0;
z-index: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding: 24px;
}
[data-template="neon-grid"] .ng-featured-copy.site-cover-title {
--site-heading: initial;
--site-link: initial;
}
[data-template="neon-grid"] .ng-featured-copy:not(.site-cover-title) {
background: linear-gradient(to top, color-mix(in srgb, var(--site-bg) 85%, transparent), transparent);
}
[data-template="neon-grid"] .ng-featured-title {
font-size: clamp(22px, 3vw, 36px);
text-transform: none;
overflow-wrap: anywhere;
}
[data-template="neon-grid"] .ng-carousel-dots {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 3;
display: flex;
gap: 8px;
transform: translateX(-50%);
}
[data-template="neon-grid"] .ng-carousel-dot {
width: 10px;
height: 10px;
border: 1px solid var(--site-highlight);
background: transparent;
cursor: pointer;
}
[data-template="neon-grid"] .ng-carousel-dot[data-active="true"] {
background: var(--site-highlight);
}
[data-template="neon-grid"] .ng-ticker {
overflow: hidden;
padding: 20px 0;
border-block: 1px solid color-mix(in srgb, var(--site-accent) 35%, transparent);
background: var(--site-bg);
}
[data-template="neon-grid"] .ng-ticker-track {
display: flex;
width: max-content;
gap: 32px;
animation: ng-marquee 40s linear infinite;
}
[data-template="neon-grid"] .ng-ticker-item {
font-family: var(--site-font-heading);
font-size: 22px;
font-weight: 800;
color: var(--site-link, var(--site-accent));
text-transform: uppercase;
white-space: nowrap;
}
[data-template="neon-grid"] .ng-ticker-item::after {
content: "—";
margin-inline-start: 32px;
color: var(--site-primary);
}
[data-template="neon-grid"] .ng-callout {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 32px 24px;
border: 4px solid var(--site-accent);
background: linear-gradient(
135deg,
var(--site-bg),
color-mix(in srgb, var(--site-primary) 18%, var(--site-bg)),
var(--site-bg)
);
box-shadow: 0 0 40px var(--ng-accent-glow);
}
[data-template="neon-grid"] .ng-callout .ng-corner {
border-color: var(--site-text);
}
@media (min-width: 768px) {
[data-template="neon-grid"] .ng-callout {
flex-direction: row;
align-items: center;
padding: 48px;
}
}
@keyframes ng-fill {
from {
opacity: 0;
transform: scale(0);
}
}
@keyframes ng-lines {
to {
background-position:
40px 40px,
40px 40px;
}
}
@keyframes ng-float {
50% {
translate: 0 -20px;
}
}
@keyframes ng-glow {
to {
text-shadow:
0 0 16px color-mix(in srgb, var(--site-highlight) 70%, transparent),
0 0 34px color-mix(in srgb, var(--site-highlight) 45%, transparent),
0 0 60px color-mix(in srgb, var(--site-highlight) 25%, transparent);
}
}
@keyframes ng-rise {
from {
opacity: 0;
transform: translateY(100px);
}
}
@keyframes ng-card {
from {
opacity: 0;
transform: translateY(20px);
}
}
@keyframes ng-marquee {
to {
transform: translateX(-50%);
}
}
[data-template="neon-grid"][data-motion="calm"] *,
[data-template="neon-grid"][data-motion="calm"] *::before,
[data-template="neon-grid"][data-motion="calm"] *::after {
animation: none !important;
transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
[data-template="neon-grid"] *,
[data-template="neon-grid"] *::before,
[data-template="neon-grid"] *::after {
animation: none !important;
transition: none !important;
}
}
.ng-hero-logo {
position: relative;
display: block;
margin-bottom: 16px;
}
[data-template="neon-grid"] .phb {
background-image:
linear-gradient(color-mix(in srgb, var(--site-primary) 14%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--site-primary) 14%, transparent) 1px, transparent 1px);
background-size: 40px 40px;
}
[data-template="neon-grid"] .phb-image:not([data-size="FILL"]) img {
filter: drop-shadow(0 0 18px color-mix(in srgb, var(--site-primary) 45%, transparent));
}
[data-template="neon-grid"] .phb-title {
text-shadow: 0 0 18px color-mix(in srgb, var(--site-primary) 70%, transparent);
}
[data-template="neon-grid"] .ng-team-card .ng-corner {
z-index: 3;
width: 22px;
height: 22px;
border-color: var(--site-highlight);
}
[data-template="neon-grid"] .ng-team-card .ng-corner-start {
top: 10px;
inset-inline-start: 10px;
}
[data-template="neon-grid"] .ng-team-card .ng-corner-end {
inset-inline-end: 10px;
bottom: 10px;
}
[data-template="neon-grid"] .site-stream-countdown {
background: color-mix(in srgb, var(--site-accent) 6%, var(--site-bg));
border-block: 2px solid var(--site-accent);
font-family: var(--site-font-heading);
text-transform: uppercase;
letter-spacing: 0.04em;
}
[data-template="neon-grid"] .site-stream-countdown-in,
[data-template="neon-grid"] .site-stream-countdown-tag {
color: var(--site-link, var(--site-accent));
border-color: var(--site-accent);
}
[data-template="neon-grid"] .site-stream {
background: transparent;
border-bottom: 2px solid var(--site-accent);
}
[data-template="neon-grid"] .site-stream-until {
color: var(--site-link, var(--site-highlight));
}
[data-template="neon-grid"] .site-stream-frame {
border: 2px solid var(--site-primary);
box-shadow: 0 0 30px -8px var(--ng-accent-glow);
}