import colorsys
import logging
import re
from typing import Optional
logger = logging.getLogger(__name__)
def hex_to_rgb(hex_color: str) -> tuple:
hex_color = hex_color.lstrip('#')
if len(hex_color) == 3:
hex_color = ''.join(c * 2 for c in hex_color)
try:
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
except (ValueError, IndexError):
return (79, 70, 229)
def rgb_to_hex(r: int, g: int, b: int) -> str:
return f"#{r:02x}{g:02x}{b:02x}"
def adjust_lightness(hex_color: str, factor: float) -> str:
r, g, b = hex_to_rgb(hex_color)
h, l, s = colorsys.rgb_to_hls(r/255, g/255, b/255)
l = max(0, min(1, l * factor))
r2, g2, b2 = colorsys.hls_to_rgb(h, l, s)
return rgb_to_hex(int(r2*255), int(g2*255), int(b2*255))
def get_contrast_text(hex_color: str) -> str:
r, g, b = hex_to_rgb(hex_color)
luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
return "#ffffff" if luminance < 0.5 else "#1a1a2e"
def _hsl_to_hex(h: float, l: float, s: float) -> str:
l = max(0, min(1, l))
s = max(0, min(1, s))
r, g, b = colorsys.hls_to_rgb(h, l, s)
return rgb_to_hex(int(r*255), int(g*255), int(b*255))
def derive_color_harmonics(primary_hex: str, secondary_hex: str, accent_hex: str = "#06B6D4") -> dict:
"""Derive a full surface/shadow/highlight palette from 3 brand colors."""
r, g, b = hex_to_rgb(primary_hex)
h, l, s = colorsys.rgb_to_hls(r/255, g/255, b/255)
sr, sg, sb = hex_to_rgb(secondary_hex)
sh, sl, ss = colorsys.rgb_to_hls(sr/255, sg/255, sb/255)
surface_1 = _hsl_to_hex(h, 0.97, s * 0.15)
surface_2 = _hsl_to_hex(h, 0.94, s * 0.2)
surface_3 = _hsl_to_hex(h, 0.90, s * 0.25)
blended_hue = (h + sh) / 2
blended_sat = (s + ss) / 2
shadow_color = _hsl_to_hex(blended_hue, 0.12, blended_sat * 0.4)
shadow_ambient = _hsl_to_hex(blended_hue, 0.06, blended_sat * 0.2)
highlight = _hsl_to_hex(sh, min(1, sl * 1.3), ss)
muted = _hsl_to_hex(h, l, max(0, s * 0.3))
muted_foreground = _hsl_to_hex(h, 0.45, s * 0.4)
primary_fg = get_contrast_text(primary_hex)
ar, ag, ab = hex_to_rgb(accent_hex)
ah, al, as_ = colorsys.rgb_to_hls(ar/255, ag/255, ab/255)
accent_muted = _hsl_to_hex(ah, min(1, al * 1.4), as_ * 0.5)
return {
"surface_1": surface_1,
"surface_2": surface_2,
"surface_3": surface_3,
"shadow_color": shadow_color,
"shadow_ambient": shadow_ambient,
"highlight": highlight,
"muted": muted,
"muted_foreground": muted_foreground,
"primary_fg": primary_fg,
"accent_muted": accent_muted,
}
BG_INTENSITY_PRESETS = {
"subtle": 0.5,
"medium": 1.0,
"vivid": 1.8,
"off": 0.0,
}
MOOD_PROFILES = {
"professional": {
"card_style": "elevated",
"section_header_style": "underline",
"background_pattern": "subtle-grid",
"divider_style": "clean-line",
"border_radius": "12px",
"shadow_intensity": "medium",
"font_weight_heading": "800",
"letter_spacing": "-0.02em",
"bg_intensity": "medium",
},
"creative": {
"card_style": "glass",
"section_header_style": "gradient-accent",
"background_pattern": "flowing-waves",
"divider_style": "wave",
"border_radius": "20px",
"shadow_intensity": "soft",
"font_weight_heading": "900",
"letter_spacing": "-0.03em",
"bg_intensity": "medium",
},
"minimal": {
"card_style": "bordered",
"section_header_style": "simple",
"background_pattern": "none",
"divider_style": "thin-line",
"border_radius": "8px",
"shadow_intensity": "none",
"font_weight_heading": "700",
"letter_spacing": "-0.01em",
"bg_intensity": "subtle",
},
"bold": {
"card_style": "gradient",
"section_header_style": "badge-accent",
"background_pattern": "geometric",
"divider_style": "diagonal",
"border_radius": "16px",
"shadow_intensity": "strong",
"font_weight_heading": "900",
"letter_spacing": "-0.03em",
"bg_intensity": "vivid",
},
"warm": {
"card_style": "elevated",
"section_header_style": "decorative",
"background_pattern": "organic",
"divider_style": "curve",
"border_radius": "16px",
"shadow_intensity": "medium",
"font_weight_heading": "800",
"letter_spacing": "-0.02em",
"bg_intensity": "medium",
},
}
NICHE_MOOD_MAP = {
"health": "warm",
"wellness": "warm",
"fitness": "bold",
"yoga": "warm",
"meditation": "warm",
"finance": "professional",
"legal": "professional",
"consulting": "professional",
"accounting": "professional",
"insurance": "professional",
"tech": "creative",
"saas": "creative",
"software": "creative",
"ai": "creative",
"crypto": "bold",
"design": "creative",
"art": "creative",
"photography": "creative",
"fashion": "bold",
"luxury": "bold",
"real estate": "professional",
"education": "warm",
"coaching": "warm",
"food": "warm",
"restaurant": "warm",
"travel": "creative",
"ecommerce": "bold",
"retail": "bold",
}
SECTION_ICON_MAP = {
"hero": '',
"about": '',
"features": '',
"pricing": '',
"testimonials": '',
"faq": '',
"how_it_works": '',
"team": '',
"contact": '',
"resources": '',
"gallery": '',
"comparison": '',
"stats": '',
"problem": '',
"solution": '',
"cta": '',
}
SVG_DIVIDERS = {
"wave": '',
"wave-inverse": '',
"diagonal": '',
"curve": '',
"clean-line": '',
"thin-line": '',
}
BACKGROUND_PATTERNS = {
"subtle-grid": "background-image:linear-gradient({line_color} 1px, transparent 1px),linear-gradient(90deg,{line_color} 1px, transparent 1px);background-size:40px 40px;",
"flowing-waves": "background-image:url(\"data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.24.19 2.491.14 2.718-.07 2.258-2.064 4.744-2.36 7.037-2.243 2.3.12 4.466.61 5.893 1.166.327.128.334.088.8-.115.36-.157.862-.375 1.69-.614.828-.24 1.848-.44 3.162-.54a47.2 47.2 0 012.67-.122c.92-.015 1.892.01 2.924.085l.143.015.13.018c1.792.262 3.07.755 4.032 1.234a8.258 8.258 0 011.47.94 4.728 4.728 0 01.49.447c.09.098.133.166.133.186 0-.107-.046-.22-.27-.387a5.7 5.7 0 00-.533-.39c-1.138-.73-3.49-1.51-6.55-1.342-1.6.088-3.373.353-5.338.881-1.16.312-1.717.532-2.06.678-.172.073-.28.12-.383.128-.105.007-.238-.024-.57-.143-1.485-.533-3.746-1.026-6.163-1.15-2.425-.126-5.026.165-7.4 2.326-.082.074-.393.146-1.2-.02a8.27 8.27 0 00-.542-.08L20 20h1.184z' fill='{line_color}' fill-rule='evenodd'/%3E%3C/svg%3E\");",
"geometric": "background-image:url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='{line_color_enc}' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");",
"organic": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='1.5' fill='{line_color_enc}' fill-opacity='0.3'/%3E%3Ccircle cx='10' cy='10' r='1' fill='{line_color_enc}' fill-opacity='0.2'/%3E%3Ccircle cx='70' cy='15' r='1.2' fill='{line_color_enc}' fill-opacity='0.25'/%3E%3Ccircle cx='20' cy='65' r='0.8' fill='{line_color_enc}' fill-opacity='0.2'/%3E%3C/svg%3E\");",
"none": "",
}
TEXTURE_CATEGORIES = {
"natural": {
"label": "Natural",
"icon": "leaf",
"textures": {
"paper": {
"label": "Handmade Paper",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='{opacity}'/%3E%3C/svg%3E\");background-size:200px 200px;",
},
"linen": {
"label": "Linen Weave",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3Crect x='2' y='2' width='1' height='1' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3C/svg%3E\");background-size:4px 4px;",
},
"ripple": {
"label": "Water Ripple",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='40' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='60' r='28' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='60' r='16' fill='none' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.5'/%3E%3C/svg%3E\");background-size:120px 120px;",
},
"grain": {
"label": "Wood Grain",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6'%3E%3Cline x1='0' y1='1' x2='200' y2='1' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline x1='0' y1='3' x2='200' y2='3.5' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Cline x1='0' y1='5' x2='200' y2='4.5' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.4'/%3E%3C/svg%3E\");background-size:200px 6px;",
},
"moss": {
"label": "Moss Scatter",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='15' cy='20' r='2' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3Ccircle cx='50' cy='50' r='3' fill='{line_color_enc}' fill-opacity='0.02'/%3E%3Ccircle cx='80' cy='30' r='1.5' fill='{line_color_enc}' fill-opacity='0.025'/%3E%3Ccircle cx='35' cy='75' r='2.5' fill='{line_color_enc}' fill-opacity='0.02'/%3E%3Ccircle cx='70' cy='85' r='1.8' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3C/svg%3E\");background-size:100px 100px;",
},
},
},
"sacred_geometry": {
"label": "Sacred Geometry",
"icon": "mandala",
"textures": {
"flower_of_life": {
"label": "Flower of Life",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='87'%3E%3Ccircle cx='50' cy='43' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='43' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='70' cy='43' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='26' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='26' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='60' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Ccircle cx='60' cy='60' r='20' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E\");background-size:100px 87px;",
},
"seed_of_life": {
"label": "Seed of Life",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.4'/%3E%3Ccircle cx='40' cy='25' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3Ccircle cx='53' cy='32.5' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3Ccircle cx='53' cy='47.5' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3Ccircle cx='40' cy='55' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3Ccircle cx='27' cy='47.5' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3Ccircle cx='27' cy='32.5' r='15' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3C/svg%3E\");background-size:80px 80px;",
},
"metatrons_cube": {
"label": "Metatron's Cube",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.4'/%3E%3Cline x1='50' y1='20' x2='76' y2='35' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cline x1='76' y1='35' x2='76' y2='65' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cline x1='76' y1='65' x2='50' y2='80' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cline x1='50' y1='80' x2='24' y2='65' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cline x1='24' y1='65' x2='24' y2='35' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cline x1='24' y1='35' x2='50' y2='20' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cline x1='50' y1='20' x2='50' y2='80' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Cline x1='24' y1='35' x2='76' y2='65' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Cline x1='76' y1='35' x2='24' y2='65' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3C/svg%3E\");background-size:100px 100px;",
},
"sri_yantra": {
"label": "Sri Yantra",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpolygon points='60,15 95,75 25,75' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.4'/%3E%3Cpolygon points='60,95 25,40 95,40' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.4'/%3E%3Ccircle cx='60' cy='55' r='35' fill='none' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Ccircle cx='60' cy='55' r='25' fill='none' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3C/svg%3E\");background-size:120px 120px;",
},
"vesica_piscis": {
"label": "Vesica Piscis",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='30' cy='40' r='25' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3Ccircle cx='50' cy='40' r='25' fill='none' stroke='{line_color_enc}' stroke-opacity='0.035' stroke-width='0.4'/%3E%3C/svg%3E\");background-size:80px 80px;",
},
},
},
"esoteric": {
"label": "Esoteric",
"icon": "eye",
"textures": {
"chakra_dots": {
"label": "Chakra Points",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='180'%3E%3Ccircle cx='30' cy='15' r='4' fill='%23EE4444' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='40' r='4' fill='%23EE8833' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='65' r='4' fill='%23EEDD33' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='90' r='4' fill='%2333BB66' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='115' r='4' fill='%233399EE' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='140' r='4' fill='%234433AA' fill-opacity='0.03'/%3E%3Ccircle cx='30' cy='165' r='4' fill='%238833AA' fill-opacity='0.03'/%3E%3C/svg%3E\");background-size:60px 180px;",
},
"energy_field": {
"label": "Energy Field",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cellipse cx='80' cy='80' rx='60' ry='40' fill='none' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Cellipse cx='80' cy='80' rx='40' ry='60' fill='none' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cellipse cx='80' cy='80' rx='50' ry='50' fill='none' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Ccircle cx='80' cy='80' r='5' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3C/svg%3E\");background-size:160px 160px;",
},
"third_eye": {
"label": "Third Eye",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cellipse cx='50' cy='50' rx='25' ry='12' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.4'/%3E%3Ccircle cx='50' cy='50' r='6' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.4'/%3E%3Ccircle cx='50' cy='50' r='2' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3Cpath d='M25,50 Q50,30 75,50' fill='none' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3Cpath d='M25,50 Q50,70 75,50' fill='none' stroke='{line_color_enc}' stroke-opacity='0.025' stroke-width='0.3'/%3E%3C/svg%3E\");background-size:100px 100px;",
},
"moon_phases": {
"label": "Moon Phases",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40'%3E%3Ccircle cx='20' cy='20' r='8' fill='{line_color_enc}' fill-opacity='0.03'/%3E%3Cpath d='M55,12 A8,8 0 1,1 55,28 A5,8 0 1,0 55,12' fill='{line_color_enc}' fill-opacity='0.025'/%3E%3Ccircle cx='100' cy='20' r='8' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Cline cx='100' x1='92' y1='20' x2='108' y2='20' stroke='{line_color_enc}' stroke-opacity='0.02' stroke-width='0.3'/%3E%3Cpath d='M145,12 A8,8 0 1,0 145,28 A5,8 0 1,1 145,12' fill='{line_color_enc}' fill-opacity='0.025'/%3E%3Ccircle cx='180' cy='20' r='8' fill='none' stroke='{line_color_enc}' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E\");background-size:200px 40px;",
},
},
},
"abstract": {
"label": "Abstract",
"icon": "sparkle",
"textures": {
"noise": {
"label": "Fine Noise",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='{opacity}'/%3E%3C/svg%3E\");background-size:200px 200px;",
},
"diagonal_lines": {
"label": "Diagonal Lines",
"css": "background-image:repeating-linear-gradient(45deg, {line_color} 0px, {line_color} 1px, transparent 1px, transparent 12px);",
},
"crosshatch": {
"label": "Crosshatch",
"css": "background-image:repeating-linear-gradient(45deg, {line_color} 0px, {line_color} 1px, transparent 1px, transparent 16px), repeating-linear-gradient(-45deg, {line_color} 0px, {line_color} 1px, transparent 1px, transparent 16px);",
},
"dots": {
"label": "Micro Dots",
"css": "background-image:radial-gradient({line_color} 1px, transparent 1px);background-size:16px 16px;",
},
"hexagons": {
"label": "Hexagonal",
"css": "background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66Z' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cpath d='M28 100L0 84L0 50L28 34L56 50L56 84L28 100Z' fill='none' stroke='{line_color_enc}' stroke-opacity='0.04' stroke-width='0.5' transform='translate(28,0)'/%3E%3C/svg%3E\");background-size:56px 100px;",
},
},
},
}
TEXTURE_CATALOG = {}
for cat_key, cat in TEXTURE_CATEGORIES.items():
for tex_key, tex in cat["textures"].items():
full_key = f"{cat_key}/{tex_key}"
TEXTURE_CATALOG[full_key] = tex
CURSOR_OPTIONS = {
"default": {"label": "Default", "css": "cursor: default;"},
"crosshair": {"label": "Crosshair", "css": "cursor: crosshair;"},
"pointer-dot": {"label": "Pointer Dot", "css": "cursor: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='4' fill='{primary_enc}' fill-opacity='0.8'/%3E%3Ccircle cx='10' cy='10' r='7' fill='none' stroke='{primary_enc}' stroke-opacity='0.4' stroke-width='1'/%3E%3C/svg%3E\") 10 10, auto;"},
"ring": {"label": "Ring", "css": "cursor: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='{primary_enc}' stroke-opacity='0.6' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2' fill='{primary_enc}' fill-opacity='0.7'/%3E%3C/svg%3E\") 12 12, auto;"},
"diamond": {"label": "Diamond", "css": "cursor: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='5' y='5' width='10' height='10' rx='1' fill='{primary_enc}' fill-opacity='0.7' transform='rotate(45 10 10)'/%3E%3C/svg%3E\") 10 10, auto;"},
}
GRADIENT_DIRECTIONS = {
"to-br": {"label": "Diagonal ↘", "css": "135deg"},
"to-r": {"label": "Right →", "css": "90deg"},
"to-b": {"label": "Down ↓", "css": "180deg"},
"to-bl": {"label": "Diagonal ↙", "css": "225deg"},
"to-tr": {"label": "Diagonal ↗", "css": "45deg"},
"radial": {"label": "Radial ○", "css": "radial"},
}
DEFAULT_ATMOSPHERE = {
"texture": "none",
"texture_opacity": 0.5,
"texture_layer": "overlay",
"animation_enabled": True,
"animation_style": "auto",
"bg_intensity": "medium",
"gradient_direction": "to-br",
"cursor": "default",
"favicon_mode": "auto",
}
ANIMATED_BACKGROUNDS = {
"professional": {
"keyframes": """
@keyframes aura-grid-pulse {
0%, 100% { opacity: 0.03; }
50% { opacity: 0.07; }
}
@keyframes aura-line-drift {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}""",
"layers": """
""",
},
"creative": {
"keyframes": """
@keyframes aura-wave-flow {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(-5%) translateY(2%); }
50% { transform: translateX(-10%) translateY(0); }
75% { transform: translateX(-5%) translateY(-2%); }
100% { transform: translateX(0) translateY(0); }
}
@keyframes aura-shimmer {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}""",
"layers": """
""",
},
"bold": {
"keyframes": """
@keyframes aura-gradient-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes aura-geo-rotate {
0% { transform: rotate(0deg) scale(1); opacity: 0.04; }
50% { transform: rotate(180deg) scale(1.1); opacity: 0.07; }
100% { transform: rotate(360deg) scale(1); opacity: 0.04; }
}""",
"layers": """
""",
},
"warm": {
"keyframes": """
@keyframes aura-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}
@keyframes aura-glow-pulse {
0%, 100% { opacity: 0.04; transform: scale(1); }
50% { opacity: 0.08; transform: scale(1.15); }
}""",
"layers": """
""",
},
"minimal": {
"keyframes": """
@keyframes aura-breathe {
0%, 100% { opacity: 0.02; }
50% { opacity: 0.04; }
}""",
"layers": """
""",
},
}
MOOD_ORNAMENTS = {
"warm": {
"header_flourish_left": '',
"header_flourish_right": '',
"section_ornament": '',
"lotus": '',
"card_corner": '',
},
"creative": {
"header_flourish_left": '',
"header_flourish_right": '',
"section_ornament": '',
"lotus": "",
"card_corner": '',
},
"bold": {
"header_flourish_left": '',
"header_flourish_right": '',
"section_ornament": '',
"lotus": "",
"card_corner": '',
},
"professional": {
"header_flourish_left": '',
"header_flourish_right": '',
"section_ornament": '',
"lotus": "",
"card_corner": "",
},
"minimal": {
"header_flourish_left": "",
"header_flourish_right": "",
"section_ornament": '',
"lotus": "",
"card_corner": "",
},
}
def detect_mood(niche: str = "", brand_tone: str = "", brand_data: dict = None) -> str:
if brand_tone:
tone_lower = brand_tone.lower()
if any(w in tone_lower for w in ["playful", "fun", "creative", "artistic", "innovative"]):
return "creative"
if any(w in tone_lower for w in ["bold", "powerful", "dynamic", "energetic", "luxury"]):
return "bold"
if any(w in tone_lower for w in ["warm", "friendly", "caring", "nurturing", "organic"]):
return "warm"
if any(w in tone_lower for w in ["clean", "simple", "minimal", "zen", "pure"]):
return "minimal"
if any(w in tone_lower for w in ["professional", "corporate", "trustworthy", "reliable", "enterprise"]):
return "professional"
niche_lower = niche.lower() if niche else ""
for keyword, mood in NICHE_MOOD_MAP.items():
if keyword in niche_lower:
return mood
return "professional"
def generate_theme_config(
primary: str = "#4F46E5",
secondary: str = "#7C3AED",
accent: str = "#06B6D4",
niche: str = "",
brand_tone: str = "",
brand_data: dict = None,
atmosphere: dict = None,
) -> dict:
mood = detect_mood(niche, brand_tone, brand_data)
profile = {**MOOD_PROFILES.get(mood, MOOD_PROFILES["professional"])}
atmo = {**DEFAULT_ATMOSPHERE, **(atmosphere or {})}
design_system = None
if brand_data and isinstance(brand_data, dict):
options = brand_data.get("options", [])
rec_idx = brand_data.get("recommended", 0)
if isinstance(rec_idx, int) and 0 <= rec_idx < len(options):
rec_option = options[rec_idx]
if isinstance(rec_option, dict):
design_system = rec_option.get("design_system")
palette = rec_option.get("palette")
if palette and isinstance(palette, dict):
if palette.get("primary") and not primary or primary == "#4F46E5":
primary = palette.get("primary", primary)
if palette.get("primary_alt") and (not secondary or secondary == "#7C3AED"):
secondary = palette.get("primary_alt", secondary)
if palette.get("accent") and (not accent or accent == "#06B6D4"):
accent = palette.get("accent", accent)
if design_system and isinstance(design_system, dict):
RADIUS_MAP = {
"none": "4px",
"subtle": "12px",
"rounded": "20px",
}
SHADOW_MAP = {
"none": "none",
"soft": "soft",
"sharp": "strong",
}
radius = design_system.get("radius_scale", "")
if radius in RADIUS_MAP:
profile["border_radius"] = RADIUS_MAP[radius]
shadow = design_system.get("shadow_style", "")
if shadow in SHADOW_MAP:
profile["shadow_intensity"] = SHADOW_MAP[shadow]
typography = design_system.get("typography", {})
if isinstance(typography, dict):
heading_style = typography.get("heading_style", "")
HEADING_STYLE_MAP = {
"geometric_sans": {"font_weight_heading": "800", "letter_spacing": "-0.02em"},
"humanist_sans": {"font_weight_heading": "700", "letter_spacing": "-0.01em"},
"serif": {"font_weight_heading": "700", "letter_spacing": "0em"},
}
if heading_style in HEADING_STYLE_MAP:
profile.update(HEADING_STYLE_MAP[heading_style])
elif isinstance(typography, str):
TYPO_FALLBACK = {
"serif": {"font_weight_heading": "700", "letter_spacing": "0em"},
"humanist_sans": {"font_weight_heading": "700", "letter_spacing": "-0.01em"},
"geometric_sans": {"font_weight_heading": "800", "letter_spacing": "-0.02em"},
}
if typography in TYPO_FALLBACK:
profile.update(TYPO_FALLBACK[typography])
logger.info(f"Applied design_system tokens: radius={radius}, shadow={shadow}, typography={typography}")
primary_light = adjust_lightness(primary, 1.3)
primary_dark = adjust_lightness(primary, 0.7)
secondary_light = adjust_lightness(secondary, 1.3)
primary_rgb = hex_to_rgb(primary)
secondary_rgb = hex_to_rgb(secondary)
accent_rgb = hex_to_rgb(accent)
primary_text = get_contrast_text(primary)
r1, g1, b1 = primary_rgb
r2, g2, b2 = secondary_rgb
line_color = f"rgba({r1},{g1},{b1},0.04)"
line_color_enc = f"%23{primary.lstrip('#')}"
bg_pattern_key = profile["background_pattern"]
bg_pattern_css = BACKGROUND_PATTERNS.get(bg_pattern_key, "")
if bg_pattern_css:
bg_pattern_css = bg_pattern_css.replace("{line_color}", line_color).replace("{line_color_enc}", line_color_enc)
def _soft_tint(hex_c, rgb_tuple):
result = adjust_lightness(hex_c, 1.6)
r, g, b = hex_to_rgb(result)
if r > 250 and g > 250 and b > 250:
cr, cg, cb = rgb_tuple
return f"rgba({cr},{cg},{cb},0.06)"
return result
soft_primary = _soft_tint(primary, primary_rgb)
soft_secondary = _soft_tint(secondary, secondary_rgb)
soft_accent = _soft_tint(accent, accent_rgb)
section_bgs = {
"hero": f"linear-gradient(135deg, {primary}, {secondary})",
"stats": f"linear-gradient(135deg, rgba({r1},{g1},{b1},0.08), rgba({r2},{g2},{b2},0.06))",
"problem": f"linear-gradient(135deg, #0f172a, #1e1b4b)",
"solution": f"linear-gradient(135deg, {adjust_lightness(accent, 1.8)}, {adjust_lightness(accent, 1.6)})",
"about": f"linear-gradient(180deg, #ffffff, {soft_primary})",
"features": f"linear-gradient(180deg, rgba({r1},{g1},{b1},0.04), rgba({r1},{g1},{b1},0.10))",
"how_it_works": f"linear-gradient(180deg, rgba({r2},{g2},{b2},0.08), rgba({r1},{g1},{b1},0.04))",
"testimonials": f"linear-gradient(180deg, rgba({r2},{g2},{b2},0.05), rgba({r2},{g2},{b2},0.12))",
"pricing": f"linear-gradient(180deg, #ffffff, rgba({r2},{g2},{b2},0.08))",
"comparison": f"linear-gradient(180deg, rgba({r1},{g1},{b1},0.04), rgba({r1},{g1},{b1},0.10))",
"gallery": f"linear-gradient(180deg, {soft_accent}, #f9fafb)",
"team": f"linear-gradient(180deg, #f9fafb, rgba({r1},{g1},{b1},0.07))",
"resources": f"linear-gradient(180deg, #ffffff, {soft_secondary})",
"faq": f"linear-gradient(180deg, rgba({r2},{g2},{b2},0.04), rgba({r2},{g2},{b2},0.10))",
"contact": f"linear-gradient(180deg, {soft_primary}, #ffffff)",
"cta": f"linear-gradient(135deg, {primary}, {secondary})",
}
divider_pairs = [
("hero", "wave"), ("stats", "clean-line"), ("problem", "diagonal"),
("solution", "curve"), ("features", "wave-inverse"), ("how_it_works", "clean-line"),
("testimonials", "wave"), ("pricing", "clean-line"), ("comparison", "curve"),
("gallery", "clean-line"), ("team", "wave-inverse"), ("resources", "clean-line"),
("faq", "wave"), ("contact", "clean-line"),
]
if profile["divider_style"] in SVG_DIVIDERS:
divider_pairs = [(s, profile["divider_style"]) for s, _ in divider_pairs]
bg_intensity_key = atmo.get("bg_intensity", profile.get("bg_intensity", "medium"))
bg_multiplier = BG_INTENSITY_PRESETS.get(bg_intensity_key, 1.0)
anim_style = atmo.get("animation_style", "auto")
anim_mood = mood if anim_style == "auto" else anim_style
anim_enabled = atmo.get("animation_enabled", True)
anim_bg = ANIMATED_BACKGROUNDS.get(anim_mood, ANIMATED_BACKGROUNDS["professional"])
anim_keyframes_raw = anim_bg.get("keyframes", "")
anim_layers_raw = anim_bg.get("layers", "")
pr_str = f"{r1},{g1},{b1}"
sr_str = f"{r2},{g2},{b2}"
ar_str = f"{accent_rgb[0]},{accent_rgb[1]},{accent_rgb[2]}"
anim_layers_html = anim_layers_raw.replace("{pr}", pr_str).replace("{sr}", sr_str).replace("{ar}", ar_str)
def _scale_opacity(match):
val = float(match.group(1))
scaled = min(val * bg_multiplier, 1.0)
return f"opacity:{scaled:.3f}"
def _scale_rgba_alpha(match):
prefix = match.group(1)
alpha = float(match.group(2))
scaled = min(alpha * bg_multiplier, 1.0)
return f"{prefix}{scaled:.3f})"
if bg_multiplier != 1.0:
anim_layers_html = re.sub(r'opacity:([\d.]+)', _scale_opacity, anim_layers_html)
anim_layers_html = re.sub(r'(rgba\(\{[a-z]+\},|rgba\([\d,]+,)([\d.]+)\)', _scale_rgba_alpha, anim_layers_html)
anim_keyframes_raw = re.sub(r'opacity:\s*([\d.]+)', _scale_opacity, anim_keyframes_raw)
if bg_multiplier != 1.0:
scaled_bgs = {}
for sec_name, bg_val in section_bgs.items():
def _scale_section_alpha(m):
pre = m.group(1)
a = float(m.group(2))
sa = min(a * bg_multiplier, 1.0)
return f"{pre}{sa:.3f})"
scaled_bgs[sec_name] = re.sub(r'(rgba\([\d,]+,)([\d.]+)\)', _scale_section_alpha, bg_val)
section_bgs = scaled_bgs
if not anim_enabled:
anim_keyframes_raw = ""
anim_layers_html = ""
texture_key = atmo.get("texture", "none")
texture_css = ""
texture_overlay_css = ""
tex_opacity = max(0.05, min(1.0, float(atmo.get("texture_opacity", 0.5))))
if texture_key and texture_key != "none" and texture_key in TEXTURE_CATALOG:
tex = TEXTURE_CATALOG[texture_key]
tex_css_raw = tex["css"]
boosted_opacity = min(tex_opacity * 8, 1.0)
boosted_line = f"rgba({r1},{g1},{b1},{boosted_opacity:.2f})"
boosted_enc = line_color_enc
tex_css_raw = tex_css_raw.replace("{line_color}", boosted_line)
tex_css_raw = tex_css_raw.replace("{line_color_enc}", boosted_enc)
tex_css_raw = tex_css_raw.replace("{opacity}", f"{boosted_opacity:.2f}")
import re as _re
def _boost_stroke_opacity(m):
orig = float(m.group(1))
new_val = min(orig * (tex_opacity * 15 + 1), 0.6)
return f"stroke-opacity='{new_val:.3f}'"
def _boost_fill_opacity(m):
orig = float(m.group(1))
new_val = min(orig * (tex_opacity * 15 + 1), 0.6)
return f"fill-opacity='{new_val:.3f}'"
tex_css_raw = _re.sub(r"stroke-opacity='([\d.]+)'", _boost_stroke_opacity, tex_css_raw)
tex_css_raw = _re.sub(r"fill-opacity='([\d.]+)'", _boost_fill_opacity, tex_css_raw)
texture_css = tex_css_raw
texture_overlay_css = tex_css_raw
cursor_key = atmo.get("cursor", "default")
cursor_css = ""
if cursor_key and cursor_key != "default" and cursor_key in CURSOR_OPTIONS:
c_css = CURSOR_OPTIONS[cursor_key]["css"]
primary_enc = f"%23{primary.lstrip('#')}"
cursor_css = c_css.replace("{primary_enc}", primary_enc)
favicon_mode = atmo.get("favicon_mode", "auto")
return {
"mood": mood,
"profile": profile,
"bg_intensity": bg_intensity_key,
"bg_multiplier": bg_multiplier,
"colors": {
"primary": primary,
"primary_light": primary_light,
"primary_dark": primary_dark,
"primary_rgb": f"{r1},{g1},{b1}",
"primary_text": primary_text,
"secondary": secondary,
"secondary_light": secondary_light,
"secondary_rgb": f"{r2},{g2},{b2}",
"accent": accent,
"accent_rgb": f"{accent_rgb[0]},{accent_rgb[1]},{accent_rgb[2]}",
},
"card_style": profile["card_style"],
"section_header_style": profile["section_header_style"],
"border_radius": profile["border_radius"],
"shadow_intensity": profile["shadow_intensity"],
"font_weight_heading": profile["font_weight_heading"],
"letter_spacing": profile["letter_spacing"],
"background_pattern": bg_pattern_css,
"section_backgrounds": section_bgs,
"divider_pairs": {s: d for s, d in divider_pairs},
"dividers": SVG_DIVIDERS,
"icons": SECTION_ICON_MAP,
"animated_bg_keyframes": anim_keyframes_raw,
"animated_bg_layers": anim_layers_html,
"ornaments": MOOD_ORNAMENTS.get(mood, MOOD_ORNAMENTS["professional"]),
"atmosphere": atmo,
"texture_css": texture_css,
"texture_overlay_css": texture_overlay_css,
"cursor_css": cursor_css,
"favicon_mode": favicon_mode,
}
def generate_theme_css(theme: dict) -> str:
c = theme["colors"]
p = theme["profile"]
shadow_map = {
"none": "0 1px 3px rgba(0,0,0,0.04)",
"soft": "0 4px 20px -4px rgba(0,0,0,0.08), 0 2px 8px -2px rgba(0,0,0,0.04)",
"medium": "0 8px 30px -6px rgba(0,0,0,0.12), 0 4px 12px -4px rgba(0,0,0,0.06)",
"strong": "0 14px 45px -10px rgba(0,0,0,0.18), 0 6px 18px -6px rgba(0,0,0,0.08)",
}
shadow = shadow_map.get(p["shadow_intensity"], shadow_map["medium"])
cursor_css_val = theme.get("cursor_css", "")
cursor_rule = f"\n {cursor_css_val}" if cursor_css_val else ""
texture_css_val = theme.get("texture_css", "")
texture_layer = theme.get("atmosphere", {}).get("texture_layer", "overlay")
texture_z = "9999" if texture_layer == "overlay" else "0"
texture_rule = f"\n.aura-texture-overlay {{ position:fixed;inset:0;pointer-events:none;z-index:{texture_z};{texture_css_val} }}" if texture_css_val else ""
css = f"""
:root {{
--theme-primary: {c['primary']};
--theme-primary-light: {c['primary_light']};
--theme-primary-dark: {c['primary_dark']};
--theme-primary-rgb: {c['primary_rgb']};
--theme-secondary: {c['secondary']};
--theme-secondary-light: {c['secondary_light']};
--theme-secondary-rgb: {c['secondary_rgb']};
--theme-accent: {c['accent']};
--theme-accent-rgb: {c['accent_rgb']};
--theme-gradient: linear-gradient(135deg, {c['primary']}, {c['secondary']});
--theme-gradient-soft: linear-gradient(135deg, rgba({c['primary_rgb']},0.08), rgba({c['secondary_rgb']},0.05));
--theme-gradient-accent: linear-gradient(135deg, {c['accent']}, {c['secondary']});
--theme-bg-intensity: {theme.get('bg_multiplier', 1.0)};
--theme-radius: {p['border_radius']};
--theme-shadow: {shadow};
--theme-heading-weight: {p['font_weight_heading']};
--theme-letter-spacing: {p['letter_spacing']};
}}
body {{{cursor_rule}
}}{texture_rule}
.theme-card {{
border-radius: var(--theme-radius);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}}
.theme-card-elevated {{
background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
border: 1px solid rgba({c['primary_rgb']},0.12);
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 4px 12px -2px rgba(0,0,0,0.06),
var(--theme-shadow),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba({c['primary_rgb']},0.04);
}}
.theme-card-elevated:hover {{
border-color: rgba({c['primary_rgb']},0.25);
box-shadow:
0 4px 8px rgba(0,0,0,0.04),
0 16px 50px -8px rgba({c['primary_rgb']},0.16),
0 8px 24px -6px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1px 0 rgba({c['primary_rgb']},0.06);
transform: translateY(-5px);
}}
.theme-card-glass {{
background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.7) 100%);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba({c['primary_rgb']},0.1);
box-shadow:
0 2px 8px rgba(0,0,0,0.04),
0 8px 32px -4px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 0 0 1px rgba(255,255,255,0.3);
}}
.theme-card-glass:hover {{
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
border-color: rgba({c['primary_rgb']},0.2);
box-shadow:
0 4px 12px rgba(0,0,0,0.05),
0 16px 48px -6px rgba({c['primary_rgb']},0.12),
0 8px 20px -4px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 0 0 1px rgba(255,255,255,0.4);
transform: translateY(-4px);
}}
.theme-card-bordered {{
background: linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
border: 2px solid rgba({c['primary_rgb']},0.15);
box-shadow:
0 2px 8px rgba(0,0,0,0.03),
inset 0 1px 0 rgba(255,255,255,0.7);
}}
.theme-card-bordered:hover {{
border-color: rgba({c['primary_rgb']},0.35);
box-shadow:
0 0 0 4px rgba({c['primary_rgb']},0.06),
0 8px 24px -4px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.9);
transform: translateY(-3px);
}}
.theme-card-gradient {{
background: linear-gradient(160deg, rgba({c['primary_rgb']},0.05) 0%, rgba({c['secondary_rgb']},0.09) 50%, rgba({c['primary_rgb']},0.04) 100%);
border: 1px solid rgba({c['primary_rgb']},0.12);
box-shadow:
0 2px 8px rgba({c['primary_rgb']},0.06),
0 6px 20px -4px rgba({c['primary_rgb']},0.08),
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -1px 0 rgba({c['primary_rgb']},0.04);
}}
.theme-card-gradient:hover {{
background: linear-gradient(160deg, rgba({c['primary_rgb']},0.08) 0%, rgba({c['secondary_rgb']},0.14) 50%, rgba({c['primary_rgb']},0.06) 100%);
border-color: rgba({c['primary_rgb']},0.22);
box-shadow:
0 4px 12px rgba({c['primary_rgb']},0.1),
0 16px 44px -8px rgba({c['primary_rgb']},0.14),
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 -1px 0 rgba({c['primary_rgb']},0.06);
transform: translateY(-5px);
}}
.theme-card-minimal {{
background: linear-gradient(180deg, #ffffff 0%, #fefefe 100%);
border: 1px solid rgba(0,0,0,0.07);
box-shadow:
0 1px 3px rgba(0,0,0,0.03),
0 2px 6px -1px rgba(0,0,0,0.02),
inset 0 1px 0 rgba(255,255,255,0.6);
}}
.theme-card-minimal:hover {{
border-color: rgba({c['primary_rgb']},0.18);
box-shadow:
0 2px 6px rgba(0,0,0,0.04),
0 8px 20px -4px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.8);
transform: translateY(-2px);
}}
.theme-section-header {{
position: relative;
display: inline-block;
}}
.theme-badge {{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 100px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}}
.theme-badge-primary {{
background: linear-gradient(135deg, rgba({c['primary_rgb']},0.1), rgba({c['secondary_rgb']},0.08));
color: var(--theme-primary);
box-shadow: 0 1px 4px rgba({c['primary_rgb']},0.1), inset 0 1px 0 rgba(255,255,255,0.5);
border: 1px solid rgba({c['primary_rgb']},0.08);
}}
.theme-badge-accent {{
background: linear-gradient(135deg, rgba({c['accent_rgb']},0.1), rgba({c['accent_rgb']},0.15));
color: var(--theme-accent);
box-shadow: 0 1px 4px rgba({c['accent_rgb']},0.1), inset 0 1px 0 rgba(255,255,255,0.5);
border: 1px solid rgba({c['accent_rgb']},0.08);
}}
.theme-heading {{
font-weight: var(--theme-heading-weight);
letter-spacing: var(--theme-letter-spacing);
line-height: 1.15;
}}
.theme-icon-box {{
width: 56px;
height: 56px;
border-radius: calc(var(--theme-radius) * 0.7);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba({c['primary_rgb']},0.14), rgba({c['secondary_rgb']},0.08));
border: 1px solid rgba({c['primary_rgb']},0.1);
color: var(--theme-primary);
box-shadow: 0 2px 8px rgba({c['primary_rgb']},0.1), inset 0 1px 0 rgba(255,255,255,0.4);
}}
.theme-icon-box svg {{
width: 26px;
height: 26px;
}}
.theme-section-icon {{
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}}
.theme-section-icon svg {{
width: 100%;
height: 100%;
}}
.theme-gradient-text {{
background: var(--theme-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}}
.theme-divider {{
display: block;
width: 100%;
line-height: 0;
overflow: hidden;
}}
.theme-step-number {{
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1rem;
color: white;
background: var(--theme-gradient);
box-shadow:
0 4px 15px rgba({c['primary_rgb']},0.3),
0 2px 4px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.25),
inset 0 -1px 0 rgba(0,0,0,0.15);
}}
.theme-accent-line {{
width: 48px;
height: 3px;
border-radius: 2px;
background: var(--theme-gradient);
margin: 0 auto 1rem;
}}
.theme-testimonial-avatar {{
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
color: white;
background: var(--theme-gradient);
box-shadow:
0 2px 8px rgba({c['primary_rgb']},0.25),
0 1px 2px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.2);
}}
.theme-pricing-featured {{
position: relative;
border: 2px solid var(--theme-primary);
box-shadow:
0 8px 40px rgba({c['primary_rgb']},0.15),
0 4px 12px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.5);
}}
.theme-pricing-featured::before {{
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--theme-gradient);
color: white;
padding: 4px 16px;
border-radius: 100px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
box-shadow: 0 2px 8px rgba({c['primary_rgb']},0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}}
.theme-stat-value {{
background: var(--theme-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 900;
font-size: 2rem;
line-height: 1.1;
}}
.theme-faq-item {{
border-radius: var(--theme-radius);
overflow: hidden;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.5);
}}
.theme-faq-item:hover {{
box-shadow: 0 4px 16px rgba({c['primary_rgb']},0.08), 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
}}
.theme-btn-primary {{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-weight: 700;
font-size: 1rem;
color: {c['primary_text']};
background: var(--theme-gradient);
border-radius: var(--theme-radius);
box-shadow:
0 4px 15px rgba({c['primary_rgb']},0.3),
0 2px 4px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.2),
inset 0 -1px 0 rgba(0,0,0,0.1);
transition: all 0.3s ease;
text-decoration: none;
}}
.theme-btn-primary:hover {{
box-shadow:
0 8px 25px rgba({c['primary_rgb']},0.4),
0 4px 8px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.25);
transform: translateY(-2px);
}}
.theme-btn-secondary {{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-weight: 600;
font-size: 1rem;
color: var(--theme-primary);
background: rgba({c['primary_rgb']},0.08);
border: 2px solid rgba({c['primary_rgb']},0.2);
border-radius: var(--theme-radius);
box-shadow: 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.3s ease;
text-decoration: none;
}}
.theme-btn-secondary:hover {{
background: rgba({c['primary_rgb']},0.15);
border-color: rgba({c['primary_rgb']},0.35);
box-shadow: 0 4px 12px rgba({c['primary_rgb']},0.12), 0 2px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
transform: translateY(-2px);
}}
.aura-animated-section {{
position: relative;
}}
.aura-animated-section > *:not(.aura-bg-layer) {{
position: relative;
z-index: 1;
}}
@media (prefers-reduced-motion: reduce) {{
.aura-bg-layer * {{
animation: none !important;
}}
}}
.photo-caption {{
padding: 0.75rem 1rem;
}}
.photo-caption-title {{
font-size: 0.875rem;
font-weight: 700;
color: #111827;
margin-bottom: 0.15rem;
letter-spacing: -0.01em;
}}
.photo-caption-subtitle {{
font-size: 0.75rem;
font-weight: 600;
background: var(--theme-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.35rem;
}}
.photo-caption-body {{
font-size: 0.8125rem;
line-height: 1.6;
color: #6b7280;
}}
.photo-caption-divider {{
width: 32px;
height: 2px;
border-radius: 1px;
background: var(--theme-gradient);
margin-bottom: 0.5rem;
opacity: 0.5;
}}
.photo-frame {{
overflow: hidden;
border-radius: var(--theme-radius);
transition: all 0.3s ease;
box-shadow:
0 2px 8px rgba(0,0,0,0.06),
0 1px 2px rgba(0,0,0,0.04),
inset 0 0 0 1px rgba(0,0,0,0.04);
}}
.photo-frame:hover {{
box-shadow:
0 8px 30px rgba({c['primary_rgb']},0.12),
0 4px 10px rgba(0,0,0,0.06),
inset 0 0 0 1px rgba({c['primary_rgb']},0.1);
}}
.photo-frame:hover img {{
transform: scale(1.03);
}}
.photo-frame img {{
transition: transform 0.4s ease;
}}
"""
anim_keyframes = theme.get("animated_bg_keyframes", "")
if anim_keyframes:
css += "\n" + anim_keyframes + "\n"
return css