*
Content
*
Content
*
* Text usage (requires JS):
*
*
Your **amazing** solution
*
*/
/* ============================================
RAINBOW TEXT GRADIENTS
============================================ */
.rainbow-text {
background: linear-gradient(90deg, #7A00FF 0%, #FF8082 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
/* Dark variant - darker purple end */
[data-wf--section--variant="dark"] .rainbow-text,
[data-rainbow-variant="dark"] .rainbow-text {
background: linear-gradient(90deg, #7A00FF 0%, #490099 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
/* Color/Purple/Pink variants - full spectrum */
[data-wf--section--variant="color"] .rainbow-text,
[data-wf--section--variant="purple"] .rainbow-text,
[data-wf--section--variant="pink"] .rainbow-text,
[data-rainbow-variant="color"] .rainbow-text,
[data-rainbow-variant="purple"] .rainbow-text,
[data-rainbow-variant="pink"] .rainbow-text {
background: linear-gradient(90deg, #7A00FF 0%, #FF8082 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
/* ============================================
RAINBOW BORDERS
============================================ */
/* ============================================
DEFAULT: Light Variant
============================================ */
.border-rainbow {
border: 1px solid transparent;
border-radius: var(--_ui-styles---radius--medium, 10px);
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #FF8082 100%) border-box;
}
/* ============================================
DARK VARIANT
============================================ */
.border-rainbow-dark {
border: 1px solid transparent;
border-radius: var(--_ui-styles---radius--medium, 10px);
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #490099 100%) border-box;
}
/* ============================================
COLOR VARIANT
============================================ */
.border-rainbow-color,
.border-rainbow-purple,
.border-rainbow-pink {
border: 1px solid transparent;
border-radius: var(--_ui-styles---radius--medium, 10px);
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #FF8082 100%) border-box;
}
/* ============================================
AUTO-DETECT FROM PARENT WEBFLOW VARIANTS
============================================ */
/* Dark parent */
[data-wf--section--variant="dark"] .border-rainbow {
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #490099 100%) border-box;
}
/* Color parent */
[data-wf--section--variant="color"] .border-rainbow,
[data-wf--section--variant="purple"] .border-rainbow,
[data-wf--section--variant="pink"] .border-rainbow {
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #FF8082 100%) border-box;
}
/**
* Rainbow Border - Pure CSS Solution
* No JavaScript required!
*
* Replaces your existing border with a rainbow gradient.
* Respects existing border-radius or uses 10px fallback.
*
* Usage:
*
Content
*
Content
*
Content
*/
/* ============================================
DEFAULT: Light Variant
============================================ */
.border-rainbow {
border: 1px solid transparent;
border-radius: var(--_ui-styles---radius--medium, 10px);
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #FF8082 100%) border-box;
}
/* ============================================
DARK VARIANT
============================================ */
.border-rainbow-dark {
border: 1px solid transparent;
border-radius: var(--_ui-styles---radius--medium, 10px);
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #490099 100%) border-box;
}
/* ============================================
COLOR VARIANT
============================================ */
.border-rainbow-color,
.border-rainbow-purple,
.border-rainbow-pink {
border: 1px solid transparent;
border-radius: var(--_ui-styles---radius--medium, 10px);
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #FF8082 100%) border-box;
}
/* ============================================
AUTO-DETECT FROM PARENT WEBFLOW VARIANTS
============================================ */
/* Dark parent */
[data-wf--section--variant="dark"] .border-rainbow {
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #490099 100%) border-box;
}
/* Color parent */
[data-wf--section--variant="color"] .border-rainbow,
[data-wf--section--variant="purple"] .border-rainbow,
[data-wf--section--variant="pink"] .border-rainbow {
background:
linear-gradient(var(--color-scheme-1--background, white), var(--color-scheme-1--background, white)) padding-box,
linear-gradient(90deg, #7A00FF 0%, #FF8082 100%) border-box;
}
*
* Advanced: Customize the variant
* Option A: Use Webflow variants (auto-detected):
*
*
* Conflict Prevention:
* - Automatically detects and skips components managing their own rainbow text
* - Add data-rainbow-managed to components with custom rainbow scripts
* - Skips dynamic content areas (Finsweet, Webflow CMS, etc.)
* - Use data-rainbow-skip to manually opt out specific elements
*/
(function() {
'use strict';
// Track processed elements to prevent conflicts and double-processing
const processedElements = new WeakSet();
/**
* Get the variant value from any Webflow-generated variant attribute
* Returns the variant value (light, dark, color, purple, etc.)
* Defaults to 'light' if no variant found - works independently!
*/
function getVariantValue(element) {
// 1. Check for manual override on the element itself
if (element.hasAttribute('data-rainbow-variant')) {
return element.getAttribute('data-rainbow-variant');
}
// 2. Search up the DOM tree for a Webflow variant attribute
let current = element;
while (current && current !== document.body) {
const attributes = current.attributes;
for (let i = 0; i < attributes.length; i++) {
const attr = attributes[i];
if (attr.name.startsWith('data-wf--') && attr.name.endsWith('--variant')) {
return attr.value;
}
}
current = current.parentElement;
}
// 3. Default to 'light' variant - makes it work independently!
return 'light';
}
/**
* Check if a component is managing its own rainbow text
* Returns true if the component should be skipped
*/
function isComponentSelfManaged(element) {
// Find the parent component with data-rainbow
const component = element.closest('[data-rainbow]');
if (!component) return false;
// Check if component has a marker indicating it manages its own rainbow text
if (component.hasAttribute('data-rainbow-managed')) {
return true;
}
// Check if component already has rainbow-text spans that weren't created by us
// (indicating another script is managing it)
const existingRainbow = component.querySelectorAll('.rainbow-text');
if (existingRainbow.length > 0) {
// Check if any of these rainbow spans don't contain ** markers
// If they don't have **, they were likely created by another script
for (let i = 0; i < existingRainbow.length; i++) {
const rainbowSpan = existingRainbow[i];
// Check parent text for ** markers
const parentText = rainbowSpan.parentNode ? rainbowSpan.parentNode.textContent : '';
if (!parentText.includes('**')) {
return true; // Component is managing its own rainbow
}
}
}
return false;
}
/**
* Check if variant should skip rainbow styling (gradient backgrounds)
* Returns true if the variant has a gradient background where rainbow wouldn't be visible
*/
function shouldSkipRainbow(variant) {
// Skip rainbow for variants with gradient backgrounds
// Add more variant names here as needed
return variant === 'color' || variant === 'purple' || variant === 'gradient';
}
/**
* Process a single text element
* Finds **text** patterns and wraps them in
