Home
/* =========================================================
NTSHEBE2HD — FULL SCREEN HOMEPAGE
WordPress / Elementor
========================================================= */
/* =========================================================
GLOBAL FULL-WIDTH RESET
========================================================= */
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-width: 100% !important;
background: #080808 !important;
}
body {
overflow-x: hidden !important;
}
/* Force WordPress / Elementor containers full width */
.elementor-section:has(.nt-home),
.elementor-container:has(.nt-home),
.elementor-widget-html:has(.nt-home),
.elementor-widget-container:has(.nt-home),
.wp-block-html:has(.nt-home),
.entry-content:has(.nt-home) {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================================================
MAIN SITE WRAPPER
========================================================= */
.nt-home {
--black: #080808;
--dark: #101010;
--panel: #151515;
--panel-light: #1d1d1d;
--cream: #f1ece6;
--muted: #aaa39d;
--accent: #a88f7c;
--line: rgba(241,236,230,.14);
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 0 !important;
background: var(--black);
color: var(--cream);
font-family:
Arial,
Helvetica,
sans-serif;
overflow-x: hidden;
}
/* =========================================================
RESET
========================================================= */
.nt-home *,
.nt-home *::before,
.nt-home *::after {
box-sizing: border-box;
}
.nt-home h1,
.nt-home h2,
.nt-home h3,
.nt-home h4,
.nt-home p {
margin-top: 0;
}
.nt-home a {
color: inherit;
text-decoration: none;
}
/* =========================================================
CONTENT WIDTH
========================================================= */
.nt-container {
width:
min(
1180px,
calc(100% - 48px)
);
margin-left: auto;
margin-right: auto;
}
/* =========================================================
NAVIGATION
========================================================= */
.nt-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 50;
padding: 28px 0;
background:
linear-gradient(
to bottom,
rgba(0,0,0,.75),
transparent
);
}
.nt-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.nt-logo {
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.nt-nav-links {
display: flex;
align-items: center;
gap: 30px;
}
.nt-nav-links a {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .85;
transition:
opacity .25s ease,
color .25s ease;
}
.nt-nav-links a:hover {
opacity: 1;
color: var(--accent);
}
.nt-nav-book {
border:
1px solid var(--cream);
padding:
11px 17px;
}
/* =========================================================
HERO
========================================================= */
.nt-hero {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: flex-end;
/*
Dark background allows the photograph to be displayed
slightly smaller without looking broken.
*/
background-color:
var(--black);
background-image:
linear-gradient(
to top,
rgba(0,0,0,.94) 0%,
rgba(0,0,0,.45) 45%,
rgba(0,0,0,.10) 100%
),
url(
"https://djntshebe.co.za/wp-content/uploads/2026/09/20260828-IMG_8994-scaled.jpg"
);
/*
UPDATED:
Instead of cover, the image is displayed at approximately
92% of the hero height.
This reduces cropping and zooming.
*/
background-size:
auto 92%;
background-position:
center center;
background-repeat:
no-repeat;
}
/* =========================================================
HERO CONTENT
========================================================= */
.nt-hero-content {
width:
min(
1180px,
calc(100% - 48px)
);
margin-left: auto;
margin-right: auto;
padding-top:
180px;
padding-bottom:
90px;
position: relative;
z-index: 2;
}
.nt-eyebrow {
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 18px;
}
.nt-hero h1 {
font-size:
clamp(
58px,
10vw,
140px
);
line-height: .85;
letter-spacing: -5px;
margin: 0;
font-weight: 700;
}
.nt-hero-sub {
margin-top: 28px;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
}
.nt-hero-actions {
margin-top: 35px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* =========================================================
BUTTONS
========================================================= */
.nt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding:
0 24px;
border:
1px solid rgba(255,255,255,.45);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease;
cursor: pointer;
}
.nt-btn:hover {
background:
var(--cream);
color:
var(--black);
border-color:
var(--cream);
}
.nt-btn-primary {
background:
var(--cream);
color:
var(--black);
border-color:
var(--cream);
}
/* =========================================================
INTRO
========================================================= */
.nt-intro {
width: 100%;
padding:
130px 0;
}
.nt-intro-grid {
display: grid;
grid-template-columns:
.8fr 1.2fr;
gap:
100px;
align-items:
start;
}
.nt-section-label {
font-size: 10px;
letter-spacing: 3px;
color:
var(--accent);
text-transform:
uppercase;
}
.nt-intro h2 {
font-size:
clamp(
42px,
6vw,
78px
);
line-height:
.95;
margin:
20px 0;
letter-spacing:
-3px;
}
.nt-intro-text {
max-width:
650px;
font-size:
19px;
line-height:
1.7;
color:
var(--muted);
}
.nt-intro-text p {
margin-bottom:
22px;
}
.nt-intro-text strong {
color:
var(--cream);
}
/* =========================================================
SECOND IMAGE / EDITORIAL
========================================================= */
.nt-editorial {
width: 100%;
padding-bottom:
130px;
}
/*
UPDATED IMAGE PRESENTATION
Previously:
background-size: cover;
Now:
auto 92%;
This means more of the original photograph is visible
and less of the subject is cropped.
*/
.nt-editorial-image {
width: 100%;
height: 650px;
background-color:
var(--black);
background-image:
linear-gradient(
to top,
rgba(0,0,0,.18),
transparent
),
url(
"https://djntshebe.co.za/wp-content/uploads/2026/09/20260828-IMG_8978-scaled.jpg"
);
background-size:
auto 92%;
background-position:
center center;
background-repeat:
no-repeat;
}
/* =========================================================
LATEST RELEASE
========================================================= */
.nt-release {
width: 100%;
padding:
120px 0;
background:
var(--dark);
}
.nt-release-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap:
80px;
align-items:
center;
}
.nt-release-art {
width: 100%;
aspect-ratio:
1 / 1;
background-image:
url(
"https://djntshebe.co.za/wp-content/uploads/2026/09/Something-Bad-Artwork-scaled.jpg"
);
background-size:
cover;
background-position:
center;
background-repeat:
no-repeat;
}
.nt-release-info h2 {
font-size:
clamp(
48px,
7vw,
86px
);
line-height:
.9;
letter-spacing:
-4px;
margin:
15px 0 25px;
}
.nt-release-info p {
color:
var(--muted);
line-height:
1.7;
max-width:
500px;
}
.nt-release-meta {
font-size:
11px;
text-transform:
uppercase;
letter-spacing:
3px;
color:
var(--accent);
}
/* =========================================================
PLATFORM LINKS
========================================================= */
.nt-platforms {
margin-top:
35px;
display:
flex;
flex-direction:
column;
gap:
9px;
}
.nt-platform {
display:
flex;
align-items:
center;
gap:
15px;
border:
1px solid var(--line);
padding:
13px 16px;
transition:
background .25s ease,
border-color .25s ease;
}
.nt-platform:hover {
background:
var(--panel-light);
border-color:
rgba(255,255,255,.3);
}
.nt-platform img {
width:
26px;
height:
26px;
object-fit:
contain;
}
.nt-platform span {
font-size:
11px;
text-transform:
uppercase;
letter-spacing:
2px;
}
/* =========================================================
MUSIC
========================================================= */
.nt-music {
width:
100%;
padding:
130px 0;
}
.nt-heading-row {
display:
flex;
align-items:
flex-end;
justify-content:
space-between;
gap:
30px;
margin-bottom:
55px;
}
.nt-heading-row h2 {
font-size:
clamp(
48px,
7vw,
90px
);
letter-spacing:
-4px;
line-height:
.9;
margin:
12px 0 0;
}
.nt-view-all {
font-size:
10px;
letter-spacing:
2px;
text-transform:
uppercase;
border-bottom:
1px solid var(--accent);
padding-bottom:
6px;
}
.nt-music-card {
display:
grid;
grid-template-columns:
1fr 1fr;
background:
var(--panel);
}
.nt-music-image {
min-height:
520px;
background-image:
linear-gradient(
to top,
rgba(0,0,0,.25),
transparent
),
url(
"https://djntshebe.co.za/wp-content/uploads/2026/09/20260828-IMG_8980-scaled.jpg"
);
background-size:
cover;
background-position:
center;
background-repeat:
no-repeat;
}
.nt-music-content {
padding:
65px;
display:
flex;
flex-direction:
column;
justify-content:
center;
}
.nt-music-content h3 {
font-size:
48px;
margin:
10px 0 20px;
letter-spacing:
-2px;
}
.nt-music-content p {
color:
var(--muted);
line-height:
1.7;
}
/* =========================================================
THE 2 HOUR DRIVE
========================================================= */
.nt-podcast {
width:
100%;
padding:
140px 0;
position:
relative;
background:
linear-gradient(
90deg,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.65) 50%,
rgba(0,0,0,.25) 100%
),
url(
"https://djntshebe.co.za/wp-content/uploads/2026/09/20260828-IMG_8983-scaled.jpg"
);
background-size:
cover;
background-position:
center;
background-repeat:
no-repeat;
}
.nt-podcast-content {
max-width:
620px;
}
.nt-podcast h2 {
font-size:
clamp(
50px,
8vw,
100px
);
line-height:
.88;
letter-spacing:
-5px;
margin:
15px 0 30px;
}
.nt-podcast p {
color:
#c4beb8;
line-height:
1.8;
font-size:
17px;
}
/* =========================================================
EVENTS
========================================================= */
.nt-events {
width:
100%;
padding:
130px 0;
}
.nt-event-grid {
display:
grid;
grid-template-columns:
repeat(2, 1fr);
gap:
25px;
}
.nt-event {
border-top:
1px solid var(--line);
padding:
25px 0;
}
.nt-event-date {
color:
var(--accent);
font-size:
11px;
letter-spacing:
2px;
text-transform:
uppercase;
}
.nt-event h3 {
font-size:
28px;
margin:
12px 0;
}
.nt-event p {
color:
var(--muted);
margin:
0;
line-height:
1.7;
}
/* =========================================================
EXPERIENCE
========================================================= */
.nt-experience {
width:
100%;
padding:
130px 0;
background:
var(--dark);
}
.nt-experience-grid {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
80px;
align-items:
center;
}
.nt-experience-image {
min-height:
620px;
background-image:
linear-gradient(
to top,
rgba(0,0,0,.25),
transparent
),
url(
"https://djntshebe.co.za/wp-content/uploads/2026/09/20260828-IMG_8966-scaled.jpg"
);
background-size:
cover;
background-position:
center;
background-repeat:
no-repeat;
}
.nt-experience h2 {
font-size:
clamp(
48px,
6vw,
78px
);
line-height:
.95;
letter-spacing:
-3px;
margin:
15px 0 30px;
}
.nt-experience p {
color:
var(--muted);
line-height:
1.8;
font-size:
17px;
}
/* =========================================================
STATS
========================================================= */
.nt-stats {
display:
grid;
grid-template-columns:
repeat(2, 1fr);
gap:
35px;
margin-top:
45px;
}
.nt-stat-number {
display:
block;
font-size:
42px;
font-weight:
700;
}
.nt-stat-label {
color:
var(--muted);
font-size:
10px;
letter-spacing:
2px;
text-transform:
uppercase;
}
/* =========================================================
SOUNDS OF THE EAST
========================================================= */
.nt-label {
width:
100%;
padding:
130px 0;
text-align:
center;
}
.nt-label h2 {
font-size:
clamp(
46px,
8vw,
105px
);
letter-spacing:
-5px;
line-height:
.9;
margin:
20px 0 30px;
}
.nt-label p {
max-width:
620px;
margin:
0 auto;
color:
var(--muted);
line-height:
1.8;
}
/* =========================================================
BOOKING
========================================================= */
.nt-booking {
width:
100%;
padding:
120px 0;
border-top:
1px solid var(--line);
}
.nt-booking-grid {
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
100px;
}
.nt-booking h2 {
font-size:
clamp(
50px,
7vw,
90px
);
line-height:
.9;
letter-spacing:
-4px;
margin:
15px 0;
}
.nt-booking p {
color:
var(--muted);
line-height:
1.7;
}
.nt-contact {
border-top:
1px solid var(--line);
}
.nt-contact-row {
padding:
22px 0;
border-bottom:
1px solid var(--line);
}
.nt-contact-label {
display:
block;
color:
var(--accent);
font-size:
9px;
letter-spacing:
2px;
text-transform:
uppercase;
margin-bottom:
7px;
}
.nt-contact-value {
font-size:
16px;
}
/* =========================================================
FOOTER
========================================================= */
.nt-footer {
width:
100%;
padding:
35px 0;
border-top:
1px solid var(--line);
}
.nt-footer-inner {
display:
flex;
justify-content:
space-between;
gap:
20px;
color:
var(--muted);
font-size:
10px;
letter-spacing:
1px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.nt-container,
.nt-hero-content {
width:
min(
calc(100% - 40px),
900px
);
}
.nt-intro-grid {
grid-template-columns:
1fr 1.5fr;
gap:
50px;
}
.nt-release-grid,
.nt-experience-grid {
gap:
45px;
}
.nt-music-content {
padding:
45px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 800px) {
.nt-container,
.nt-hero-content {
width:
calc(100% - 32px);
max-width:
600px;
}
/* -------------------------------------------------------
NAVIGATION
------------------------------------------------------- */
.nt-nav {
padding:
20px 0;
}
.nt-nav-links {
display:
none;
}
/* -------------------------------------------------------
HERO
------------------------------------------------------- */
.nt-hero {
min-height:
100svh;
/*
Slightly smaller image on mobile.
This shows more of the original photograph
and reduces cropping.
*/
background-size:
auto 88%;
background-position:
center center;
}
.nt-hero-content {
padding-top:
150px;
padding-bottom:
55px;
}
.nt-hero h1 {
font-size:
clamp(
52px,
17vw,
90px
);
letter-spacing:
-3px;
}
.nt-hero-sub {
font-size:
10px;
letter-spacing:
2px;
}
/* -------------------------------------------------------
GENERAL SECTIONS
------------------------------------------------------- */
.nt-intro,
.nt-music,
.nt-events,
.nt-experience,
.nt-label {
padding:
85px 0;
}
/* -------------------------------------------------------
INTRO
------------------------------------------------------- */
.nt-intro-grid {
grid-template-columns:
1fr;
gap:
40px;
}
.nt-intro h2 {
font-size:
clamp(
40px,
12vw,
65px
);
}
/* -------------------------------------------------------
SECOND IMAGE
------------------------------------------------------- */
.nt-editorial {
padding-bottom:
85px;
}
.nt-editorial-image {
height:
500px;
/*
Keep the photograph smaller on mobile.
*/
background-size:
auto 90%;
background-position:
center center;
}
/* -------------------------------------------------------
RELEASE
------------------------------------------------------- */
.nt-release {
padding:
85px 0;
}
.nt-release-grid {
grid-template-columns:
1fr;
gap:
45px;
}
.nt-release-art {
max-width:
500px;
margin:
0 auto;
}
.nt-release-info h2 {
font-size:
clamp(
48px,
14vw,
75px
);
}
/* -------------------------------------------------------
MUSIC
------------------------------------------------------- */
.nt-heading-row {
align-items:
flex-start;
flex-direction:
column;
gap:
20px;
}
.nt-heading-row h2 {
font-size:
clamp(
48px,
14vw,
75px
);
}
.nt-music-card {
grid-template-columns:
1fr;
}
.nt-music-image {
min-height:
450px;
}
.nt-music-content {
padding:
40px 30px;
}
/* -------------------------------------------------------
PODCAST
------------------------------------------------------- */
.nt-podcast {
padding:
100px 0;
background-position:
65% center;
}
.nt-podcast h2 {
font-size:
clamp(
50px,
15vw,
85px
);
}
/* -------------------------------------------------------
EVENTS
------------------------------------------------------- */
.nt-event-grid {
grid-template-columns:
1fr;
}
/* -------------------------------------------------------
EXPERIENCE
------------------------------------------------------- */
.nt-experience-grid {
grid-template-columns:
1fr;
gap:
45px;
}
.nt-experience-image {
min-height:
500px;
order:
2;
}
/* -------------------------------------------------------
STATS
------------------------------------------------------- */
.nt-stats {
gap:
25px;
}
/* -------------------------------------------------------
LABEL
------------------------------------------------------- */
.nt-label h2 {
font-size:
clamp(
46px,
14vw,
80px
);
}
/* -------------------------------------------------------
BOOKING
------------------------------------------------------- */
.nt-booking {
padding:
85px 0;
}
.nt-booking-grid {
grid-template-columns:
1fr;
gap:
50px;
}
.nt-booking h2 {
font-size:
clamp(
48px,
14vw,
80px
);
}
/* -------------------------------------------------------
FOOTER
------------------------------------------------------- */
.nt-footer-inner {
flex-direction:
column;
gap:
10px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.nt-container,
.nt-hero-content {
width:
calc(100% - 28px);
}
.nt-logo {
font-size:
16px;
letter-spacing:
2px;
}
.nt-hero {
/*
Even more controlled image size on small phones.
*/
background-size:
auto 84%;
background-position:
center center;
}
.nt-hero h1 {
font-size:
50px;
letter-spacing:
-2px;
}
.nt-hero-actions {
width:
100%;
flex-direction:
column;
}
.nt-hero-actions .nt-btn {
width:
100%;
}
.nt-editorial-image {
height:
420px;
background-size:
auto 88%;
background-position:
center center;
}
.nt-music-image {
min-height:
380px;
}
.nt-experience-image {
min-height:
420px;
}
.nt-platform {
padding:
12px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.nt-home a:focus-visible {
outline:
2px solid var(--cream);
outline-offset:
4px;
}
/* =========================================================
REDUCE MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.nt-home *,
.nt-home *::before,
.nt-home *::after {
scroll-behavior:
auto !important;
transition:
none !important;
}
}
THE SOUND
SOMETHING
View Discography →
HOUSE MUSIC
THE 2
View Events →
MORE THAN
SOUNDS
LET'S MAKE
The Artist
THE SOUND
OF EXPERIENCE.
Ntshebe2HD is the musical identity of DJ Ntshebe — a South African DJ, producer and curator with more than two decades behind the decks.
Rooted in deep and soulful house, his sound is built around atmosphere, emotion and movement. From intimate sessions to larger dance floors, every set is about creating a journey rather than simply playing records.
SOMETHING
BAD
A funky, soulful house record built around regret, emotion and reflection. A man confronts his mistakes, acknowledges the hurt he has caused and admits that he has done something bad.
Selected Music
MUSIC.
Ntshebe2HD
HOUSE MUSIC
WITH SOUL.
Deep grooves. Soulful melodies. Honest stories. Explore the music and releases from Ntshebe2HD.
The Podcast
THE 2
HOUR DRIVE
A journey through deep, soulful and contemporary house music. The 2 Hour Drive is Ntshebe's signature mix series, created for long drives, late nights and moments that deserve a soundtrack.
Live
EVENTS.
The 2 Hour Drive
Park & Play
A deep and soulful house experience bringing music, cars and culture together.
Live Sessions
DJ Ntshebe
Discover upcoming performances, appearances and curated music experiences.
The Journey
MORE THAN
20 YEARS.
Ntshebe has spent more than two decades immersed in South Africa's house music culture.
From DJ booths and radio-style mixes to events, artist development and independent music releases, the journey has always centred around one thing: keeping the music moving forward.
20+
Years Behind The Decks
2HD
Artist Identity
SA
Based In South Africa
∞
Love For House Music
Independent Music & Culture
SOUNDS
OF THE EAST
An independent platform for music, artists, events and culture. Sounds of The East represents the wider creative ecosystem surrounding Ntshebe's work.
Book Ntshebe2HD
LET'S MAKE
SOMETHING MOVE.
For bookings, events, collaborations, music projects and brand opportunities, get in touch.
