Color Palette

Surfaces

Surface 0#0a0a0f
Surface 1#141419
Surface 2#1e1e26
Surface 3#282833
Surface 4#33333f
Surface 5#3d3d4a

Reflex Films Brand Colors

RFX Red#e63946
RFX Red Hover#ef5350
RFX Red Active#c62828
RFX Blue#2979ff
RFX Dark#0d0d12
RFX White#f5f5f7

Accent Colors

Cyan#00e5ff
Cyan Hover#18ffff
Cyan Active#00b8d4
Magenta#ea80fc
Magenta Hover#f3a0ff
Magenta Active#d500f9
Blue#448aff
Green#69f0ae
Orange#ffab40

Feedback Colors

Success#69f0ae
Warning#ffd740
Error#ff5252
Info#448aff

Text on Surfaces

Primary 87% Secondary 60% Tertiary 38%
Primary 87% Secondary 60%
Primary 87% Cyan Accent

Typography Scale

Fluid clamp() — resize browser to see scaling

Step 5 — Hero Heading (h1)
Step 4 — Section Heading (h2)
Step 3 — Subsection (h3)
Step 2 — Card Title (h4)
Step 1 — Large Body (h5)
Step 0 — Base Body Text (16px → 20px)
Step -1 — Small Text / Labels
Step -2 — Caption / Fine Print

Special Text Styles

This is lead text — used for intro paragraphs and subheadings. It has a larger size and secondary color with a max-width of 65ch for optimal readability.

This is caption text — used for small annotations and metadata.

Overline Label

const framework = 'elmntr-dark';

Gradient Text Effect

Surface Elevation

Higher number = higher elevation = lighter surface

Raised

Subtle border, surface-1 background

Elevated

Surface-2 with shadow

Overlay

Surface-3, modal-level depth

Accent Border

Gradient border via ::before

Dividers

Fluid Spacing Scale

Resize browser to see fluid scaling

3xs
2xs
xs
sm
md
lg
xl
2xl

Buttons

Variants

Sizes

Full Width

Cards

Default Card

Hover to see elevation change. Surface-1 base with subtle border.

Interactive Card

Clickable — lifts on hover with shadow increase.

Accent Top

Cyan top border accent for visual emphasis.

Gradient Border

Cyan → magenta gradient border using mask technique.

★

Feature Card

Centered layout with icon for feature showcases.

Pro Plan
$49

/month

Form Elements

This field is required.

Scroll Animations

Scroll down to trigger each animation

Fade In

.ed-animate-fade-in

Slide Up

.ed-animate-slide-up

Slide Down

.ed-animate-slide-down

Slide Left

.ed-animate-slide-left

Slide Right

.ed-animate-slide-right

Scale

.ed-animate-scale

Hover Micro-Animations

Hover Lift
Hover Glow
Hover Scale
Hover Brightness

Visual Effects

Glassmorphism

.ed-glass

Glass Heavy

.ed-glass-heavy

Noise Texture

.ed-noise

Glow Cyan

.ed-glow-cyan

Glow Magenta

.ed-glow-magenta

Glow Multi

.ed-glow-multi

Gradient Mesh — Default (Cyan + Magenta)

Hero Section

Default gradient mesh with cyan + magenta + blue

Gradient Mesh — RFX Variant (Cyan + Red)

Reflex Films Hero

RFX gradient mesh with cyan + red + blue

Gradient Border — Default

Gradient Border Container

Cyan → magenta gradient border using ::before technique.

Gradient Border — RFX Variant

RFX Gradient Border Container

Cyan → red gradient border for Reflex Films branded elements.

Responsive Grid

Resize browser to see grid collapse

4 Column Grid

1
2
3
4

3 Column Grid

1
2
3

Auto-Fit Grid (min 250px)

Auto 1
Auto 2
Auto 3
Auto 4
Auto 5

Elementor Widget Previews

Simulated Elementor widget classes

Heading Widget

Dark Theme Heading

Text Editor Widget

This is body text in the Elementor Text Editor widget. It should render in the primary text color on the dark background. Links appear in blue and change on hover.

Button Widget
Icon Box Widget
★

Icon Box Title

Description text for the icon box widget with secondary color.

Tabs Widget (static preview)
Tab 1
Tab 2
Tab 3
Tab content area. This shows the selected tab's content with proper dark styling.
Accordion Widget (static preview)
Accordion Item 1 (Active) ▼
Expanded accordion content with proper dark background and text colors.
Accordion Item 2 ▶
Progress Bar Widget
Alert Widgets
Success: Operation completed.
Warning: Check your settings.
Error: Something went wrong.
Info: Additional details available.

Reflex Films — Brand Components

Client-specific variants using RFX brand palette

RFX Buttons

RFX Cards

Red Accent Top

Card with RFX red top border and red hover glow.

★

Feature Card (RFX Glow)

Hover to see the red glow variant.

RFX Gradient Border

Cyan → red gradient border card.

RFX Visual Effects

RFX Red Glow

.ed-glow-rfx-red

RFX Gradient Text

.ed-rfx-text-gradient
●

RFX Red Text

.ed-text-rfx-red

Keyword Highlights in Headings

Perth's Video Production Partner for Businesses That Mean Business

End-to-End Video Production for Western Australian Businesses

Inline <span style="color:#00e5ff"> highlights keywords in brand cyan.

Video Showcase (Scroll-Expanding)

Scroll down to watch the card expand from 85% width to full viewport. Video auto-plays at 30%.

▶ Video placeholder — scroll to watch this card expand

.ed-video-showcase + .ed-video-showcase__card + <video> — GSAP ScrollTrigger drives the expansion.

RFX Form Error State

Please enter a valid email address.