/** * VALENTINE'S ROMANCE THEME STYLES * A romantic, sweetheart aesthetic featuring deep velvet red backing, lace frames, and heart details. */ /* ============================================================ 1. Background – Velvet Backing & Concentric Hearts Pattern ============================================================ */ body.theme-valentines-romance { position: relative; background: radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.15) 0%, transparent 65%), radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.75) 100%), linear-gradient(180deg, var(--color-primary) 0%, #150009 100%) !important; } /* Glowing heart spotlight backdrop behind content */ body.theme-valentines-romance::before { content: ''; position: absolute; top: 6%; left: 50%; transform: translate(-50%, 0); width: 48vw; max-width: 550px; height: 48vw; max-height: 550px; background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.22) 0%, rgba(var(--color-secondary-rgb), 0.08) 45%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 1; will-change: transform; animation: valentine-moon-pulse 11s ease-in-out infinite alternate; } @keyframes valentine-moon-pulse { 0% { transform: translate(-50%, 0) scale(0.95); opacity: 0.85; } 100% { transform: translate(-50%, 0) scale(1.05); opacity: 1; } } /* Subtle repeating miniature heart watermark texture overlay */ body.theme-valentines-romance .theme-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30,12 C30,12 28,6 22,6 C16,6 12,11 12,17 C12,25 21,31 30,42 C39,31 48,25 48,17 C48,11 44,6 38,6 C32,6 30,12 30,12 Z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30,12 C30,12 28,6 22,6 C16,6 12,11 12,17 C12,25 21,31 30,42 C39,31 48,25 48,17 C48,11 44,6 38,6 C32,6 30,12 30,12 Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: 90px 90px; mask-size: 90px 90px; background-color: var(--color-accent) !important; opacity: calc(0.04 * var(--frame-intensity, 1)); z-index: 1; pointer-events: none; } /* ============================================================ 2. Theme Frame – Elegant Double Border & Ornate Lace Corners ============================================================ */ body.theme-valentines-romance .theme-frame { opacity: 1; top: 25px; left: 25px; right: 25px; bottom: 25px; border: 2px dashed rgba(var(--color-secondary-rgb), calc(0.35 + 0.45 * var(--frame-intensity))) !important; border-radius: 12px !important; z-index: 50; pointer-events: none; box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.6), inset 0 0 20px rgba(var(--color-secondary-rgb), calc(0.05 * var(--frame-intensity))) !important; } body.theme-valentines-romance .frame-rail { display: none !important; /* Hide other themes' rails */ } body.theme-valentines-romance .floral-bg { display: none !important; } /* Ornate Scalloped Lace Corner Ornaments */ body.theme-valentines-romance .theme-frame::before, body.theme-valentines-romance .theme-frame::after, body.theme-valentines-romance .theme-frame-inner::before, body.theme-valentines-romance .theme-frame-inner::after { content: ''; position: absolute; width: 140px; height: 140px; background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 55; opacity: calc(0.55 + 0.45 * var(--frame-intensity)); } body.theme-valentines-romance .theme-frame::before { top: -4px; left: -4px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0,0 C30,0 60,10 80,30 C100,50 110,80 110,110' fill='none' stroke='%23FF8FA3' stroke-width='2'/%3E%3Cpath d='M0,0 C20,0 45,8 60,23 C75,38 83,63 83,83' fill='none' stroke='%23FF8FA3' stroke-width='1.5' stroke-dasharray='4,4'/%3E%3Cpath d='M25,25 C25,21 29,17 33,21 C37,25 29,33 29,33 C29,33 21,25 25,25 Z' fill='%23FF4D6D'/%3E%3Ccircle cx='48' cy='20' r='3.5' fill='%23FF8FA3'/%3E%3Ccircle cx='20' cy='48' r='3.5' fill='%23FF8FA3'/%3E%3Cpath d='M0,15 A15,15 0 0,1 15,0 M0,30 A30,30 0 0,1 30,0 M0,45 A45,45 0 0,1 45,0' fill='none' stroke='%23FF8FA3' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E"); } body.theme-valentines-romance .theme-frame::after { top: -4px; right: -4px; transform: scaleX(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0,0 C30,0 60,10 80,30 C100,50 110,80 110,110' fill='none' stroke='%23FF8FA3' stroke-width='2'/%3E%3Cpath d='M0,0 C20,0 45,8 60,23 C75,38 83,63 83,83' fill='none' stroke='%23FF8FA3' stroke-width='1.5' stroke-dasharray='4,4'/%3E%3Cpath d='M25,25 C25,21 29,17 33,21 C37,25 29,33 29,33 C29,33 21,25 25,25 Z' fill='%23FF4D6D'/%3E%3Ccircle cx='48' cy='20' r='3.5' fill='%23FF8FA3'/%3E%3Ccircle cx='20' cy='48' r='3.5' fill='%23FF8FA3'/%3E%3Cpath d='M0,15 A15,15 0 0,1 15,0 M0,30 A30,30 0 0,1 30,0 M0,45 A45,45 0 0,1 45,0' fill='none' stroke='%23FF8FA3' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E"); } body.theme-valentines-romance .theme-frame-inner::before { bottom: -4px; left: -4px; transform: scaleY(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0,0 C30,0 60,10 80,30 C100,50 110,80 110,110' fill='none' stroke='%23FF8FA3' stroke-width='2'/%3E%3Cpath d='M0,0 C20,0 45,8 60,23 C75,38 83,63 83,83' fill='none' stroke='%23FF8FA3' stroke-width='1.5' stroke-dasharray='4,4'/%3E%3Cpath d='M25,25 C25,21 29,17 33,21 C37,25 29,33 29,33 C29,33 21,25 25,25 Z' fill='%23FF4D6D'/%3E%3Ccircle cx='48' cy='20' r='3.5' fill='%23FF8FA3'/%3E%3Ccircle cx='20' cy='48' r='3.5' fill='%23FF8FA3'/%3E%3Cpath d='M0,15 A15,15 0 0,1 15,0 M0,30 A30,30 0 0,1 30,0 M0,45 A45,45 0 0,1 45,0' fill='none' stroke='%23FF8FA3' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E"); } body.theme-valentines-romance .theme-frame-inner::after { bottom: -4px; right: -4px; transform: scale(-1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0,0 C30,0 60,10 80,30 C100,50 110,80 110,110' fill='none' stroke='%23FF8FA3' stroke-width='2'/%3E%3Cpath d='M0,0 C20,0 45,8 60,23 C75,38 83,63 83,83' fill='none' stroke='%23FF8FA3' stroke-width='1.5' stroke-dasharray='4,4'/%3E%3Cpath d='M25,25 C25,21 29,17 33,21 C37,25 29,33 29,33 C29,33 21,25 25,25 Z' fill='%23FF4D6D'/%3E%3Ccircle cx='48' cy='20' r='3.5' fill='%23FF8FA3'/%3E%3Ccircle cx='20' cy='48' r='3.5' fill='%23FF8FA3'/%3E%3Cpath d='M0,15 A15,15 0 0,1 15,0 M0,30 A30,30 0 0,1 30,0 M0,45 A45,45 0 0,1 45,0' fill='none' stroke='%23FF8FA3' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E"); } /* ============================================================ 3. Sway Layers – Hanging Lace Ribbon & Heart Ornaments ============================================================ */ body.theme-valentines-romance .sway-layer { display: none !important; /* Disable generic sway layers */ position: absolute; pointer-events: none; z-index: 2; will-change: transform; } /* Top-Left Hanging Hearts Ribbon */ body.theme-valentines-romance .sway-top-left { display: block !important; top: 25px; left: 10vw; width: 60px; height: 180px; transform-origin: top center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 120' width='40' height='120'%3E%3Cg fill='none' stroke='%23FF8FA3' stroke-width='1.5'%3E%3Cpath d='M20,0 L20,80' stroke-dasharray='3,3'/%3E%3Ccircle cx='20' cy='20' r='3.5' fill='%23FF8FA3'/%3E%3Ccircle cx='20' cy='50' r='3.5' fill='%23FF8FA3'/%3E%3C/g%3E%3Cpath d='M20,80 C20,80 24,76 28,80 C32,84 24,92 24,92 C24,92 16,84 20,80 Z' fill='%23FF4D6D' stroke='%23FF8FA3' stroke-width='1'/%3E%3Cpath d='M20,40 C20,40 23,37 26,40 C29,43 23,49 23,49 C23,49 17,43 20,40 Z' fill='%23FF8FA3'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; animation: valentine-sway-left calc(11s / var(--gust-speed, 1)) ease-in-out infinite alternate; } /* Top-Right Hanging Hearts Ribbon */ body.theme-valentines-romance .sway-top-right { display: block !important; top: 25px; right: 10vw; width: 60px; height: 180px; transform-origin: top center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 120' width='40' height='120'%3E%3Cg fill='none' stroke='%23FF8FA3' stroke-width='1.5'%3E%3Cpath d='M20,0 L20,80' stroke-dasharray='3,3'/%3E%3Ccircle cx='20' cy='20' r='3.5' fill='%23FF8FA3'/%3E%3Ccircle cx='20' cy='50' r='3.5' fill='%23FF8FA3'/%3E%3C/g%3E%3Cpath d='M20,80 C20,80 24,76 28,80 C32,84 24,92 24,92 C24,92 16,84 20,80 Z' fill='%23FF4D6D' stroke='%23FF8FA3' stroke-width='1'/%3E%3Cpath d='M20,40 C20,40 23,37 26,40 C29,43 23,49 23,49 C23,49 17,43 20,40 Z' fill='%23FF8FA3'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; animation: valentine-sway-right calc(13s / var(--gust-speed, 1)) ease-in-out infinite alternate; } @keyframes valentine-sway-left { 0% { transform: rotate(-3.5deg) scale(0.98); } 100% { transform: rotate(3.5deg) scale(1.02); } } @keyframes valentine-sway-right { 0% { transform: rotate(3.5deg) scale(1.02); } 100% { transform: rotate(-3.5deg) scale(0.98); } } /* ============================================================ 4. Logo Banner – Velvet Chocolate Box Card Style ============================================================ */ body.theme-valentines-romance .logo-banner { position: relative; margin-top: 15px !important; margin-bottom: 20px !important; max-width: 600px !important; } body.theme-valentines-romance:not(.is-light-bg) .logo-banner { background: #2D0013 !important; /* Deep velvet-lined card/chocolate box backdrop */ border: 3px double var(--color-accent) !important; padding: 20px 48px !important; border-radius: 4px !important; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 77, 109, 0.25) !important; } /* Repeating tiny scallop lace edge trims on top and bottom of banner */ body.theme-valentines-romance:not(.is-light-bg) .logo-banner::before { content: ''; position: absolute; top: -6px; left: 8px; right: 8px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0,6 Q4,0 8,6 Q12,0 16,6' fill='none' stroke='%23FF8FA3' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 16px 6px; } body.theme-valentines-romance:not(.is-light-bg) .logo-banner::after { content: ''; position: absolute; bottom: -6px; left: 8px; right: 8px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0,0 Q4,6 8,0 Q12,6 16,0' fill='none' stroke='%23FF8FA3' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 16px 6px; } body.theme-valentines-romance .logo-text-custom { font-family: var(--font-display) !important; color: #ffffff !important; font-size: 1.6rem !important; line-height: 1.3 !important; font-weight: 700; text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5), 2px 2px 3px rgba(0, 0, 0, 0.95) !important; letter-spacing: 2px; } /* ============================================================ 5. Hosts Container – Sweetheart Box Card Style ============================================================ */ body.theme-valentines-romance .hosts-container { position: relative; padding: 28px 40px !important; margin: 2vh auto 0 auto !important; max-width: calc(var(--host-max-width) - 200px) !important; border-radius: 6px !important; z-index: 100; } body.theme-valentines-romance:not(.is-light-bg) .hosts-container { background: #2D0013 !important; /* Solid deep velvet background instead of frosted glass */ border: 2px solid var(--color-accent) !important; outline: 1px solid rgba(var(--color-secondary-rgb), 0.45) !important; outline-offset: 4px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(255, 77, 109, 0.25) !important; } /* ============================================================ 6. Typography & Dividers ============================================================ */ body.theme-valentines-romance .event-title { font-family: var(--font-display) !important; color: var(--color-accent) !important; font-weight: 700; font-size: 5.2rem; letter-spacing: 1px; text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.4), 0 0 25px rgba(var(--color-accent-rgb), 0.15), 2px 2px 4px rgba(0, 0, 0, 0.9) !important; } body.theme-valentines-romance .event-top-label { font-family: var(--font-heading) !important; font-size: 1.6rem; color: #ffffff !important; letter-spacing: 4px; text-transform: uppercase; font-style: italic; text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.4), 2px 2px 3px rgba(0, 0, 0, 0.9) !important; } body.theme-valentines-romance .event-subtitle { font-family: var(--font-heading) !important; font-size: 1.8rem; color: var(--color-secondary) !important; letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.4), 2px 2px 3px rgba(0, 0, 0, 0.9) !important; margin-top: 6px; } body.theme-valentines-romance .event-date { font-family: var(--font-primary) !important; font-size: 1.2rem; color: #ffffff !important; letter-spacing: 2px; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.9); margin-top: 8px; } /* Custom Sweetheart Divider for Host Names */ body.theme-valentines-romance .hosts-title::after { content: ''; display: block; width: 160px; height: 16px; margin: 12px auto 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='16' viewBox='0 0 160 16'%3E%3Cpath d='M80,10 C78.5,8 75,5 71.5,5 C67.5,5 64,8.5 64,12.5 C64,17.5 71.5,21.5 80,28 C88.5,21.5 96,17.5 96,12.5 C96,8.5 92.5,5 88.5,5 C85,5 81.5,8 80,10 Z' fill='%23FF4D6D' transform='scale(0.5) translate(80, -2)'/%3E%3Cline x1='10' y1='8' x2='64' y2='8' stroke='%23FF8FA3' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='96' y1='8' x2='150' y2='8' stroke='%23FF8FA3' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='8' r='2' fill='%23FF8FA3'/%3E%3Ccircle cx='125' cy='8' r='2' fill='%23FF8FA3'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.85; } body.theme-valentines-romance .hosts-title { font-family: var(--font-heading) !important; color: var(--color-accent) !important; font-size: 2.2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.85) !important; } body.theme-valentines-romance .hosts-list span { font-family: var(--font-primary) !important; color: #ffffff !important; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(var(--color-secondary-rgb), 0.25) !important; padding: 6px 16px; border-radius: 20px; display: inline-flex; align-items: center; transition: all 0.25s ease; } /* Bullet Heart Icons next to host names */ body.theme-valentines-romance .hosts-list span::before { content: '♥'; color: var(--color-accent); margin-right: 8px; font-size: 1.1rem; font-weight: bold; display: inline-block; line-height: 1; transition: transform 0.2s ease; } /* Tactile mouse hover interactivity */ body.theme-valentines-romance .hosts-list span:hover { background: rgba(var(--color-accent-rgb), 0.15) !important; border-color: var(--color-accent) !important; transform: translateY(-2px); } body.theme-valentines-romance .hosts-list span:hover::before { transform: scale(1.3); } body.theme-valentines-romance .hosts-list { padding: 0; } /* ============================================================ 7. Particles – Rising Sweetheart Vector Hearts ============================================================ */ body.theme-valentines-romance .petal { border-radius: 0 !important; box-shadow: none !important; filter: none !important; } body.theme-valentines-romance .petal.is-blurred { opacity: 0.55 !important; } /* Precision vector heart mask */ body.theme-valentines-romance .petal--heart { -webkit-mask: url("data:image/svg+xml;utf8,