/* ========================================================================== Visual Style - Whimsical Tale Theme A storybook aesthetic inspired by children's fairy tales and picture books. Soft watercolor pastels, hand-drawn typography, rounded shapes, and a pale parchment with semi-transparent surfaces that let watercolor splotches bleed through for a hand-painted storybook feel. ========================================================================== */ /* -------------------------------------------------------------------------- Token Definitions -------------------------------------------------------------------------- */ [data-visual-style="whimsical_tale"] { /* Semantic Whimsical Color Palette Pale parchment with transparency for watercolor bleed-through */ /* Surface colors - pale parchment with transparency for watercolor bleed-through */ --whimsy-surface-lightest: rgba(255, 253, 250, 0.55); --whimsy-surface-lighter: rgba(252, 250, 245, 0.5); --whimsy-surface-light: rgba(248, 244, 238, 0.45); --whimsy-surface-base: rgba(244, 240, 232, 0.4); --whimsy-surface-medium: rgba(220, 214, 204, 0.5); --whimsy-surface-dark: rgba(196, 188, 176, 0.7); --whimsy-surface-darker: rgba(168, 160, 146, 0.75); --whimsy-surface-darkest: rgba(130, 122, 108, 0.8); --whimsy-surface-void-1: #5c4e3a; --whimsy-surface-void-2: #3a3228; /* Text colors - soft warm neutrals */ --whimsy-text-lightest: #faf8f4; --whimsy-text-lighter: #ece8e0; --whimsy-text-light: #d4cec4; --whimsy-text-subtle: #b0a898; --whimsy-text-muted: #8a8070; --whimsy-text-secondary: #6a6054; --whimsy-text-body: #504840; /* Warm grey body text */ --whimsy-text-primary: #3e362e; /* Deep warm brown */ --whimsy-text-emphasis: #302a24; --whimsy-text-strong: #24201a; /* Near-black warm */ /* Accent - storybook rose */ --whimsy-accent: #c75b8f; /* Storybook rose */ --whimsy-accent-rgb: 199, 91, 143; /* RGB values for alpha usage */ /* Map semantic tokens to existing variables for compatibility */ /* Surface mapping */ --parchment-50: var(--whimsy-surface-lightest); --parchment-100: var(--whimsy-surface-lighter); --parchment-200: var(--whimsy-surface-light); --parchment-300: var(--whimsy-surface-base); --parchment-400: var(--whimsy-surface-medium); --parchment-500: var(--whimsy-surface-dark); --parchment-600: var(--whimsy-surface-darker); --parchment-700: var(--whimsy-surface-darkest); --parchment-800: var(--whimsy-surface-void-1); --parchment-900: var(--whimsy-surface-void-2); /* Legacy parchment aliases */ --parchment-light: var(--whimsy-surface-light); --parchment-base: var(--whimsy-surface-base); --parchment-dark: var(--whimsy-surface-medium); /* Text color mapping */ --grey-50: var(--whimsy-text-lightest); --grey-100: var(--whimsy-text-lighter); --grey-200: var(--whimsy-text-light); --grey-300: var(--whimsy-text-subtle); --grey-400: var(--whimsy-text-muted); --grey-500: var(--whimsy-text-secondary); --grey-600: var(--whimsy-text-body); --grey-700: var(--whimsy-text-primary); --grey-800: var(--whimsy-text-emphasis); --grey-900: var(--whimsy-text-strong); /* Warm grey aliases */ --warm-grey-light: var(--whimsy-text-secondary); --warm-grey: var(--whimsy-text-body); --warm-grey-dark: var(--whimsy-text-primary); /* Primary and accent colors */ --color-primary: var(--whimsy-text-primary); --color-accent: var(--whimsy-accent); --shadow-glow: 0 0 16px rgba(var(--whimsy-accent-rgb), 0.3); /* Shadows - soft and diffuse for a dreamy feel */ --shadow-sm: 0 1px 3px rgba(80, 72, 64, 0.08), 0 1px 2px rgba(80, 72, 64, 0.05); --shadow-md: 0 3px 8px rgba(80, 72, 64, 0.10), 0 2px 4px rgba(80, 72, 64, 0.06); --shadow-lg: 0 6px 16px rgba(80, 72, 64, 0.12), 0 3px 6px rgba(80, 72, 64, 0.08); --shadow-xl: 0 10px 24px rgba(80, 72, 64, 0.14), 0 6px 12px rgba(80, 72, 64, 0.10); --shadow-inset: inset 0 2px 4px rgba(80, 72, 64, 0.08); /* Typography - hand-drawn storybook fonts */ --font-heading: 'Fredericka the Great', cursive; --font-body: 'Patrick Hand', cursive; --font-body-content: 'Patrick Hand', cursive; --font-ui: 'Nunito', sans-serif; /* Borders - very rounded for soft, playful shapes */ --radius-sm: 8px; --radius-md: 12px; } /* -------------------------------------------------------------------------- Background Pattern - soft watercolor wash -------------------------------------------------------------------------- */ body[data-visual-style="whimsical_tale"]::before { background: /* Large, visible watercolor splotches - like a painted page */ radial-gradient(ellipse 45% 40% at 10% 15%, rgba(212, 115, 155, 0.3) 0%, transparent 70%), radial-gradient(ellipse 50% 45% at 90% 25%, rgba(130, 190, 200, 0.3) 0%, transparent 70%), radial-gradient(ellipse 40% 50% at 50% 85%, rgba(160, 145, 220, 0.28) 0%, transparent 70%), radial-gradient(ellipse 55% 35% at 20% 65%, rgba(130, 200, 160, 0.25) 0%, transparent 70%), radial-gradient(ellipse 35% 45% at 75% 70%, rgba(240, 180, 120, 0.25) 0%, transparent 70%), /* Pale parchment base */ linear-gradient(to bottom, #fffdf8 0%, #f8f4ed 100%); background-size: 100% 100%; } /* -------------------------------------------------------------------------- Campaign Description Gradient -------------------------------------------------------------------------- */ [data-visual-style="whimsical_tale"] .expandable-text-enabled .campaign-description-preview:hover::after { background: linear-gradient(to bottom, transparent, rgba(244, 240, 232, 0.90) 40%, /* --whimsy-surface-base */ var(--parchment-base) 60% ); } /* -------------------------------------------------------------------------- Drop Caps - large, playful hand-drawn initial Applied via .drop-cap class on rich text containers -------------------------------------------------------------------------- */ [data-visual-style="whimsical_tale"] .drop-cap > :first-child::first-letter { font-family: 'Fredericka the Great', cursive; font-weight: 400; font-size: 5em; line-height: 0.75; color: var(--campaign-primary-color, var(--whimsy-accent)); text-shadow: 2px 2px 0 rgba(80, 72, 64, 0.1), 3px 3px 0 rgba(80, 72, 64, 0.05); margin: 0 0.1em 0 0; float: left; font-style: normal; } /* -------------------------------------------------------------------------- Whimsical UI Overrides - storybook character -------------------------------------------------------------------------- */ /* Header text gets a white-to-campaign-color gradient for storybook pop */ [data-visual-style="whimsical_tale"] .overview-card h3, [data-visual-style="whimsical_tale"] .activity-log-header, [data-visual-style="whimsical_tale"] .campaign-header h1 { background: linear-gradient( to bottom, color-mix(in srgb, var(--campaign-primary-color, var(--whimsy-accent)) 70%, white) 0%, var(--campaign-primary-color, var(--whimsy-accent)) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Card links use accent on hover */ [data-visual-style="whimsical_tale"] .card a:hover { color: var(--campaign-primary-color, var(--whimsy-accent)); opacity: 1; } /* Cards get a subtle colored left border for storybook feel */ [data-visual-style="whimsical_tale"] .card { border-left: 3px solid rgba(var(--whimsy-accent-rgb), 0.3); } /* Decorative corners use a softer, more playful color */ [data-visual-style="whimsical_tale"] .decorative-corner::before, [data-visual-style="whimsical_tale"] .decorative-corner::after { border-color: rgba(var(--whimsy-accent-rgb), 0.4); } /* Badge/count pills get accent background */ [data-visual-style="whimsical_tale"] .count-badge { background-color: var(--campaign-primary-color, var(--whimsy-accent)); color: white; } /* Buttons get rounded, playful styling */ [data-visual-style="whimsical_tale"] .button-primary { border-radius: 20px; } [data-visual-style="whimsical_tale"] .button-secondary { border-radius: 20px; }