GHL White-Label Login Page — Pure CSS Rebrand
Transformed a generic GoHighLevel login page into a high-end branded experience for Ential Marketing Hub — animated rotating border, CSS-only quote rotator, currency rain particle effect, and full sidebar rebrand. No JavaScript. No framework. Pure CSS.
Live result at app.ential.com — animated rotating border, currency rain, CSS quote rotator. Zero JavaScript.
The Constraint
GoHighLevel provides a white-label login page to agencies. Out of the box it ships with no brand personality — a plain card, default fonts, no visual identity. The hard constraint: no access to the underlying source code. No JavaScript injection. No template overrides.
Ential needed their login page to feel premium, distinctive, and on-brand. The only tool available: a CSS file injected via the Stylebot browser extension.
Skills Demonstrated
What Was Built
Animated Rotating Border
The login card perimeter glows with a sweeping light effect built from a conic-gradient and a registered CSS @property custom angle variable. The angle increments continuously via @keyframes — no JavaScript, no canvas, no WebGL.
CSS Quote Rotator
Ten inspirational quotes cycle at the bottom of the card — Hormozi, Serhant, Einstein, Altman, Ziglar and more. Each quote and its paired author attribution animate in lock-step using @keyframes with step-end timing over an 80-second loop. A separate 8-second opacity animation handles the fade. Zero JavaScript.
Background Currency Rain
Two pseudo-elements on the body each cast 15 text-shadow copies of a currency symbol across scattered vw/vh positions. Symbols rotate through $, €, £, ¥, ₹, ₿, ₽, ¢, ₩, ₳ with two independent rain animations at 18s and 28s for natural stagger. No DOM nodes added.
Logo Injection
GHL's login card exposes no native logo slot above the heading. The Ential logo was injected using a CSS ::before pseudo-element on h1/h2, pulling the SVG from Ential's CDN as a background-image. Height: 82px, centered, with controlled spacing below.
Sidebar Rebrand
Every default GHL sidebar icon — SVGs, <i> tags, images — was hidden and replaced with Font Awesome 6 icons via ::before pseudo-elements. Icons are mapped per nav item by id and href attribute selectors. Active state: amber background with matching glow. Section headers in uppercase amber.
Typography System
Three typefaces working in strict hierarchy: Instrument Serif italic for headings and quotes (editorial), Space Grotesk for body and inputs (modern geometric), JetBrains Mono for labels, buttons, and metadata (technical precision). All loaded from Google Fonts via CSS @import.
Technical Highlights
| Challenge | CSS Solution |
|---|---|
| Logo not exposed by GHL's template | CSS ::before pseudo-element with background-image SVG pulled from Ential's CDN |
| 50px unexpected top padding from Tailwind utility classes | Targeted > div > div and > div > div > div with padding-top: 0 !important |
| Animated border without JavaScript | @property custom angle variable + conic-gradient border-box trick |
| Quote rotator without JavaScript | @keyframes with step-end timing + content property cycling every 8 seconds |
| Currency particle effect without adding DOM nodes | CSS text-shadow stacking on ::before / ::after pseudo-elements — 30 shadow copies, zero HTML |
| GHL sidebar icons are non-standard SVGs | All defaults hidden; Font Awesome unicode injected via ::before mapped per nav id and href |
Outcome
The login page now reflects Ential's brand identity — dark, premium, and considered — while remaining fully functional within GHL's platform. Users land on a page that communicates quality before they type a single character.