/*
Theme Name: NEP Theme
Theme URI: https://linesandbeyond.com/
Description: Custom Hello Elementor child theme for Nickel Entertainment Partners. Holds all custom CSS, design tokens, the global custom scrollbar, and the enqueue logic for self-hosted GSAP / custom JS. Built for speed and easy maintenance.
Author: Lines & Beyond Creative Design Agency
Author URI: https://linesandbeyond.com/
Template: hello-elementor
Version: 1.19.4
Text Domain: nep-theme
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Copyright (c) 2026 Lines & Beyond Creative Design Agency — https://linesandbeyond.com/
All custom code in this theme is the work of Lines & Beyond Creative Design Agency.
*/
/* ============================================================
1. DESIGN TOKENS
These MIRROR the Elementor Global Colors (Site Settings).
Elementor's globals remain the source of truth for all
content built in the editor; these variables let your CUSTOM
CSS/JS use the exact same palette. If you change a global
colour in Elementor, update the matching value here too.
============================================================ */
:root {
/* ---- Brand palette (= Elementor Global Colors) ---- */
--ne-primary: #515455; /* Elementor: Primary */
--ne-secondary: #E2DDDB; /* Elementor: Secondary */
--ne-text: #221128; /* Elementor: Text */
--ne-accent: #84298E; /* Elementor: Accent */
/* ---- Scrollbar (composed from the palette) ---- */
--ne-scrollbar-track: var(--ne-text); /* #221128 */
--ne-scrollbar-thumb: var(--ne-primary); /* #515455 */
--ne-scrollbar-hover: var(--ne-accent); /* #84298E */
--ne-scrollbar-size: 12px;
--ne-scrollbar-radius: 6px;
}
/* ============================================================
2. GLOBAL SCROLLBAR (site-wide, cross-browser)
IMPORTANT: the standard `scrollbar-width` / `scrollbar-color`
properties are scoped to Firefox ONLY (via @supports). In
Chrome/Edge/Safari, setting `scrollbar-width` switches the
browser to standard scrollbar rendering and DISABLES every
::-webkit-scrollbar rule below (no custom colour, no hover).
Keeping them out of WebKit is what makes the hover work.
Literal hex on purpose — var() is unreliable inside
::-webkit-scrollbar pseudo-elements.
============================================================ */
/* --- Firefox only (browsers without ::-webkit-scrollbar support) --- */
@supports not selector(::-webkit-scrollbar) {
html {
scrollbar-width: thin;
scrollbar-color: #515455 #221128; /* thumb, track (FF has no hover state) */
}
}
/* --- Chromium, Edge, Safari (WebKit) --- */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: #221128 !important;
}
::-webkit-scrollbar-thumb {
background-color: #515455 !important; /* grey resting */
border-radius: 6px;
border: 3px solid #221128; /* padding effect inside the track */
}
::-webkit-scrollbar-thumb:hover {
background-color: #84298E !important; /* purple on hover */
}
/* ============================================================
3. CUSTOM SITE STYLES (add component / section CSS below)
Use the palette tokens, e.g. color: var(--ne-accent);
============================================================ */
/* ===== SITE-WIDE BACKGROUND: Magenta Orb Grid ============
Fixed, full-viewport layer behind ALL content. For it to show,
page/section/container backgrounds in Elementor must be
transparent (or this dark theme's own colours).
========================================================== */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1; /* behind all content */
pointer-events: none; /* never blocks clicks/scroll */
background-color: #020617;
background-image:
linear-gradient(to right, rgba(71,85,105,0.15) 1px, transparent 1px),
linear-gradient(to bottom, rgba(71,85,105,0.15) 1px, transparent 1px),
radial-gradient(circle at 50% 60%, rgba(236,72,153,0.15) 0%, rgba(168,85,247,0.05) 40%, transparent 70%);
background-size: 40px 40px, 40px 40px, 100% 100%;
background-repeat: repeat, repeat, no-repeat;
}
/* let the orb grid show through the base page */
body { background-color: transparent; }
/* ===== STICKY HIDE/SHOW HEADER (Headroom-style) ==========
Targets Elementor's site-header wrapper. Build the header in
Theme Builder (Display: Entire Site) and do NOT enable
Elementor's own Sticky — the JS in custom.js drives this.
========================================================== */
.elementor-location-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
/* gentle, soft slide (easeOutQuint-style curve) */
transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, background-color 0.3s ease;
will-change: transform;
}
/* JS adds this while scrolling DOWN → header slides up out of view */
.elementor-location-header.ne-header--hidden {
transform: translateY(-100%);
}
/* JS adds this once the page is scrolled → subtle depth cue (optional) */
.elementor-location-header.ne-header--scrolled {
box-shadow: 0 6px 24px rgba(2, 6, 23, 0.25);
}
/* ===== HERO TITLE 3D SPIN (paired with custom.js) ========
Add CSS class `ne-hero-title` to the hero Heading in Elementor
(Advanced -> CSS Classes). Pre-hidden to avoid a flash before
the animation; custom.js reveals it (and reveals immediately
for reduced-motion / if GSAP is unavailable).
========================================================== */
.ne-hero-title {
perspective: 700px; /* 3D depth for the character spin */
}
/* pre-hide for the reveal, but NOT inside the Elementor editor */
body:not(.elementor-editor-active) .ne-hero-title { opacity: 0; }
/* ===== LINE-MASK PARAGRAPH REVEAL (paired with custom.js) =
Add CSS class `ne-reveal-lines` to a Heading/Text widget in
Elementor (Advanced -> CSS Classes). Lines rise from behind a
mask as the element scrolls into view; inline bold is kept.
Pre-hidden to avoid a flash; custom.js reveals it (and reveals
immediately for reduced-motion / if GSAP is unavailable).
========================================================== */
body:not(.elementor-editor-active) .ne-reveal-lines {
opacity: 0;
}
/* ===== BUTTON: GENTLE SPOTLIGHT GLOW ON HOVER ============
Add CSS class `ne-btn-glow` to a Button widget (Advanced ->
CSS Classes), or to any container/link. Soft lift + magenta
glow — subtle, not flashy.
========================================================== */
.ne-btn-glow .elementor-button,
.ne-btn-glow.elementor-button,
a.ne-btn-glow,
button.ne-btn-glow {
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.ne-btn-glow .elementor-button:hover,
.ne-btn-glow.elementor-button:hover,
a.ne-btn-glow:hover,
button.ne-btn-glow:hover {
transform: translateY(-1px);
box-shadow: 0 6px 22px -6px rgba(168, 85, 247, 0.45);
}
/* ===== CARD: OCEAN ABYSS (dark surface + top glow) =======
Class name kept as `ne-card-glass` so existing containers
don't need re-tagging. Add it to a Container (Advanced ->
CSS Classes) and leave the container Background EMPTY in
Elementor. Solid dark base = no grid lines; soft magenta glow
at the top edge for depth.
========================================================== */
.ne-card-glass {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(132, 41, 142, 0.30), transparent 70%),
#060410;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
/* border-radius intentionally omitted — set it in Elementor */
}
.ne-img-rise, .ne-img-zoom, .ne-img-left, .ne-img-right, .ne-img-tilt, .ne-img-parallax {
transition: none !important; /* stop Elementor's transform .4s transition fighting GSAP */
}
/* ===== IMAGE SCROLL-IN ANIMATIONS (paired with custom.js) =
Add ONE of these CSS classes to an Image widget (Advanced ->
CSS Classes). They animate as the image scrolls into view.
No CSS needed beyond this note — the motion is in custom.js.
.ne-img-rise rise up + fade
.ne-img-zoom scale up + fade
.ne-img-left slide in from the left
.ne-img-right slide in from the right
.ne-img-tilt 3D tilt-in
.ne-img-parallax gentle continuous parallax drift while in view
========================================================== */
/* ===== LOGO: fade-in + continuous spin =================
Add CSS class `ne-logo-spin` to the logo Image widget
(Advanced -> CSS Classes). Fade+scale runs on the wrapper,
the endless spin runs on the inner — so the two never
fight over `transform`. Honors reduced-motion automatically.
========================================================== */
.ne-logo-spin {
animation: neLogoIn 1.2s ease-out both;
will-change: opacity, transform;
}
.ne-logo-spin img {
display: block;
animation: neLogoSpin 20s linear infinite;
transform-origin: center center;
will-change: transform;
}
@keyframes neLogoIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
@keyframes neLogoSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ===== WORDMARK SVG ON-LOAD REVEAL (paired with custom.js) =
Add CSS class `ne-logo-text-in` to the wordmark SVG Image
widget. Pre-hidden to avoid flash; custom.js wipes it in
left-to-right (and reveals instantly for reduced-motion).
========================================================== */
body:not(.elementor-editor-active) .ne-logo-text-in { opacity: 0; }
/* ===== SVG DRAW / ASSEMBLE (paired with custom.js) =======
Inline an SVG (HTML widget) and put class `ne-svg-draw` on the