/* ========================================================================== Visual Style - Gothic Newspaper Theme Industrial Revolution London newspaper aesthetic with bold typography, typewriter body text, high contrast ink-on-paper colors, and vintage newspaper styling. ========================================================================== */ /* -------------------------------------------------------------------------- Token Definitions -------------------------------------------------------------------------- */ [data-visual-style="gothic_newspaper"] { /* Semantic Gothic Newspaper Color Palette Inspired by newsprint, printer's ink, and Victorian-era typography */ /* Surface colors - newsprint paper tones (pale, cool whites) */ --gothic-surface-lightest: #fefefd; /* Nearly pure white newsprint */ --gothic-surface-lighter: #fafaf8; /* Very light newsprint */ --gothic-surface-light: #f5f5f2; /* Subtle newsprint grey */ --gothic-surface-base: #ededea; /* Primary newsprint color */ --gothic-surface-medium: #e0e0db; /* Medium paper grey */ --gothic-surface-dark: #c8c8c0; /* Darker paper grey */ --gothic-surface-darker: #a8a89d; /* Old paper grey */ --gothic-surface-darkest: #88887a; /* Very aged grey */ --gothic-surface-void-1: #3d3a33; /* Deep charcoal */ --gothic-surface-void-2: #1a1815; /* Near-black ink */ /* Text colors - printer's ink blacks and greys */ --gothic-text-lightest: #f5f3ee; --gothic-text-lighter: #e8e4db; --gothic-text-light: #d1ccc0; --gothic-text-subtle: #b3ab9a; --gothic-text-muted: #908977; --gothic-text-secondary: #6b6456; --gothic-text-body: #4a433a; /* Rich dark grey for body text */ --gothic-text-primary: #2d2821; /* Primary ink black */ --gothic-text-emphasis: #1e1b17; --gothic-text-strong: #0d0c0a; /* Deepest ink black */ /* Accent - deep burgundy like old ink stains */ --gothic-accent: #7a1f1f; /* Deep burgundy/maroon */ --gothic-accent-rgb: 122, 31, 31; /* RGB values for alpha usage */ /* Map semantic tokens to existing variables for compatibility */ /* Surface mapping */ --parchment-50: var(--gothic-surface-lightest); --parchment-100: var(--gothic-surface-lighter); --parchment-200: var(--gothic-surface-light); --parchment-300: var(--gothic-surface-base); --parchment-400: var(--gothic-surface-medium); --parchment-500: var(--gothic-surface-dark); --parchment-600: var(--gothic-surface-darker); --parchment-700: var(--gothic-surface-darkest); --parchment-800: var(--gothic-surface-void-1); --parchment-900: var(--gothic-surface-void-2); /* Legacy parchment aliases */ --parchment-light: var(--gothic-surface-light); --parchment-base: var(--gothic-surface-base); --parchment-dark: var(--gothic-surface-medium); /* Text color mapping */ --grey-50: var(--gothic-text-lightest); --grey-100: var(--gothic-text-lighter); --grey-200: var(--gothic-text-light); --grey-300: var(--gothic-text-subtle); --grey-400: var(--gothic-text-muted); --grey-500: var(--gothic-text-secondary); --grey-600: var(--gothic-text-body); --grey-700: var(--gothic-text-primary); --grey-800: var(--gothic-text-emphasis); --grey-900: var(--gothic-text-strong); /* Warm grey aliases */ --warm-grey-light: var(--gothic-text-secondary); --warm-grey: var(--gothic-text-body); --warm-grey-dark: var(--gothic-text-primary); /* Primary and accent colors */ --color-primary: var(--gothic-text-primary); --color-accent: var(--gothic-accent); --shadow-glow: 0 0 12px rgba(var(--gothic-accent-rgb), 0.3); /* Shadows - warm, ink-stained aesthetic */ --shadow-sm: 0 1px 2px rgba(26, 24, 21, 0.12), 0 1px 3px rgba(26, 24, 21, 0.08); --shadow-md: 0 2px 4px rgba(26, 24, 21, 0.14), 0 4px 8px rgba(26, 24, 21, 0.10); --shadow-lg: 0 4px 8px rgba(26, 24, 21, 0.16), 0 8px 16px rgba(26, 24, 21, 0.12); --shadow-xl: 0 8px 16px rgba(26, 24, 21, 0.18), 0 16px 32px rgba(26, 24, 21, 0.14); --shadow-inset: inset 0 2px 4px rgba(26, 24, 21, 0.12); /* Typography - bold newspaper fonts */ --font-heading: 'Abril Fatface', serif; --font-body: 'Special Elite', monospace; --font-body-content: 'Special Elite', monospace; --font-ui: 'Source Sans 3', sans-serif; /* Borders - slightly softer than sci-fi but sharper than fantasy */ --radius-sm: 2px; --radius-md: 3px; } /* -------------------------------------------------------------------------- Background Pattern - newsprint halftone -------------------------------------------------------------------------- */ body[data-visual-style="gothic_newspaper"]::before { background: /* Subtle noise/grain texture for newsprint */ repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(26, 24, 21, 0.015) 2px, rgba(26, 24, 21, 0.015) 4px ), /* Faint halftone dots */ radial-gradient(circle at 25% 25%, rgba(26, 24, 21, 0.02) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(26, 24, 21, 0.02) 1px, transparent 1px), /* Base newsprint paper color - pale and cool */ linear-gradient(to bottom, #fefefd 0%, #fafaf8 100%); background-size: 100% 100%, 4px 4px, 4px 4px, 100% 100%; background-position: 0 0, 0 0, 2px 2px, 0 0; } /* -------------------------------------------------------------------------- Campaign Description Gradient -------------------------------------------------------------------------- */ [data-visual-style="gothic_newspaper"] .expandable-text-enabled .campaign-description-preview:hover::after { background: linear-gradient(to bottom, transparent, rgba(237, 237, 234, 0.95) 40%, /* --gothic-surface-base */ var(--parchment-base) 60% ); } /* -------------------------------------------------------------------------- Drop Caps - bold Victorian newspaper style Applied via .drop-cap class on rich text containers -------------------------------------------------------------------------- */ [data-visual-style="gothic_newspaper"] .drop-cap > :first-child::first-letter { font-family: 'Abril Fatface', serif; font-weight: 400; font-size: 5.5em; line-height: 0.75; color: var(--campaign-primary-color, var(--gothic-accent)); text-shadow: 2px 2px 0 rgba(26, 24, 21, 0.1); margin: 0.02em 0.12em 0 0; float: left; font-style: normal; letter-spacing: -0.02em; }