/* =========================================================================== THE CITRUS SAVER — COMIC-BOOK VISUAL SYSTEM =========================================================================== Drop-in CSS for the cross-page comic-book personality layer. Include AFTER the page's own stylesheet so these tokens are available without overriding page-specific layout. Usage: Then sprinkle:
...
panel border
...
subtle dot pattern
... aggressive dot pattern POW! static comic burst animating burst

... comic display headline
...
horizontal speed-line backdrop =========================================================================== */ /* ----- FONTS — load via @import or ; this file declares no @import to keep CSP simple. Add this to on each page using the system: Then the page can use the existing --display var, or these new ones: */ :root { --comic-display: 'Bowlby One', 'Impact', 'Anton', sans-serif; --comic-shout: 'Bangers', 'Impact', sans-serif; --comic-hand: 'Patrick Hand', 'Comic Sans MS', cursive; /* Comic palette - tied to existing brand */ --comic-ink: #1A1A1A; --comic-paper: #FBF6E5; --comic-cream-dark: #E8DCC0; --comic-coral: #E2734B; --comic-coral-bright: #FF6F4D; --comic-coral-deep: #A84A22; --comic-gold: #E8B948; --comic-aqua: #6BB5BC; --comic-aqua-deep: #2D7984; --comic-moss: #5C8A4F; /* Burst sizing */ --burst-size: 88px; /* Speed line vars */ --speed-line-color: rgba(26, 26, 26, 0.12); } /* =========================================================================== 1. HALFTONE TEXTURE =========================================================================== */ .halftone-bg { position: relative; } .halftone-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(var(--comic-ink) 1px, transparent 1px); background-size: 8px 8px; opacity: 0.08; pointer-events: none; z-index: 0; } .halftone-bg > * { position: relative; z-index: 1; } .halftone-bg.halftone-bold::before { background-size: 6px 6px; opacity: 0.22; } .halftone-bg.halftone-coral::before { background-image: radial-gradient(var(--comic-coral) 1px, transparent 1px); opacity: 0.18; } .halftone-bg.halftone-gold::before { background-image: radial-gradient(var(--comic-gold) 1px, transparent 1px); opacity: 0.22; } /* =========================================================================== 2. COMIC PANEL BORDER =========================================================================== */ .comic-panel { background: var(--comic-paper); border: 3px solid var(--comic-ink); box-shadow: 6px 6px 0 var(--comic-ink); padding: 24px 28px; position: relative; } .comic-panel.panel-coral { box-shadow: 6px 6px 0 var(--comic-coral); } .comic-panel.panel-gold { box-shadow: 6px 6px 0 var(--comic-gold); } .comic-panel.panel-aqua { box-shadow: 6px 6px 0 var(--comic-aqua-deep); } .comic-panel.panel-tilt-left { transform: rotate(-1.2deg); } .comic-panel.panel-tilt-right { transform: rotate(1.2deg); } /* =========================================================================== 3. COMIC BURST (POW! BOOM! etc.) =========================================================================== */ .comic-burst { display: inline-block; position: relative; width: var(--burst-size); height: var(--burst-size); background: var(--comic-gold); color: var(--comic-ink); font-family: var(--comic-shout); font-size: 22px; letter-spacing: 1.5px; line-height: 1; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; text-align: center; border: 3px solid var(--comic-ink); transform: rotate(-8deg); /* 12-pointed star using clip-path */ clip-path: polygon( 50% 0%, 60% 14%, 76% 8%, 76% 24%, 92% 24%, 84% 38%, 100% 50%, 84% 62%, 92% 76%, 76% 76%, 76% 92%, 60% 86%, 50% 100%, 40% 86%, 24% 92%, 24% 76%, 8% 76%, 16% 62%, 0% 50%, 16% 38%, 8% 24%, 24% 24%, 24% 8%, 40% 14% ); /* Star clip-path removes box-shadow + border outline. We'll fake the border with a slightly-larger absolutely-positioned dark twin behind. */ } /* Color variants */ .comic-burst.burst-coral { background: var(--comic-coral); color: var(--comic-paper); } .comic-burst.burst-aqua { background: var(--comic-aqua); color: var(--comic-paper); } .comic-burst.burst-ink { background: var(--comic-ink); color: var(--comic-gold); } /* Sizing variants */ .comic-burst.burst-small { --burst-size: 56px; font-size: 14px; } .comic-burst.burst-large { --burst-size: 140px; font-size: 32px; } .comic-burst.burst-huge { --burst-size: 200px; font-size: 44px; } /* Animation - one-shot burst-in (use for big-action moments) */ @keyframes comic-burst-in { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.25) rotate(-10deg); opacity: 1; } 80% { transform: scale(0.95) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } } .comic-burst.burst-animated { animation: comic-burst-in 0.42s cubic-bezier(.22, 1, .36, 1) both; } /* Wiggle loop - for empty states / mascot moments */ @keyframes comic-burst-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-4deg) translateY(-2px); } } .comic-burst.burst-wiggle { animation: comic-burst-wiggle 2.2s ease-in-out infinite; } /* =========================================================================== 4. SPEED LINES =========================================================================== */ .speed-lines { position: relative; overflow: hidden; } .speed-lines::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( to right, var(--speed-line-color) 0, var(--speed-line-color) 2px, transparent 2px, transparent 22px ); opacity: 0.6; pointer-events: none; z-index: 0; mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%); } .speed-lines > * { position: relative; z-index: 1; } .speed-lines.speed-vertical::before { background-image: repeating-linear-gradient( to bottom, var(--speed-line-color) 0, var(--speed-line-color) 2px, transparent 2px, transparent 22px ); mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%); } .speed-lines.speed-radial::before { background-image: repeating-conic-gradient( from 0deg, var(--speed-line-color) 0deg, var(--speed-line-color) 1deg, transparent 1deg, transparent 6deg ); mask-image: radial-gradient(circle at center, transparent 30%, #000 50%, transparent 90%); -webkit-mask-image: radial-gradient(circle at center, transparent 30%, #000 50%, transparent 90%); } /* =========================================================================== 5. COMIC HEADLINES =========================================================================== */ .comic-headline { font-family: var(--comic-display); font-size: clamp(32px, 5vw, 58px); line-height: 0.95; letter-spacing: -0.5px; color: var(--comic-ink); text-transform: uppercase; } .comic-headline.headline-shout { font-family: var(--comic-shout); letter-spacing: 1.5px; font-size: clamp(36px, 6vw, 72px); line-height: 0.92; } .comic-headline .stroke { -webkit-text-stroke: 2px var(--comic-ink); color: var(--comic-paper); paint-order: stroke fill; } .comic-headline .yellow-pop { background: var(--comic-gold); padding: 0 8px; display: inline-block; transform: rotate(-1deg); border: 2.5px solid var(--comic-ink); box-shadow: 3px 3px 0 var(--comic-ink); } /* =========================================================================== 6. COMIC BUTTONS — flashy upgrade of standard CTAs =========================================================================== */ .btn-comic { display: inline-flex; align-items: center; gap: 8px; font-family: var(--comic-display); font-size: 14px; letter-spacing: 0.8px; text-transform: uppercase; padding: 12px 22px; background: var(--comic-coral); color: var(--comic-paper); border: 2.5px solid var(--comic-ink); box-shadow: 4px 4px 0 var(--comic-ink); text-decoration: none; cursor: pointer; transition: transform 0.12s ease-out, box-shadow 0.12s ease-out; position: relative; overflow: hidden; } .btn-comic:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--comic-ink); } .btn-comic:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--comic-ink); } .btn-comic.btn-gold { background: var(--comic-gold); color: var(--comic-ink); } .btn-comic.btn-ink { background: var(--comic-ink); color: var(--comic-gold); } .btn-comic.btn-aqua { background: var(--comic-aqua); color: var(--comic-paper); } /* =========================================================================== 7. STAMP — for "claimed", "verified", "saved" moments =========================================================================== */ .comic-stamp { display: inline-block; font-family: var(--comic-shout); font-size: 18px; letter-spacing: 2px; color: var(--comic-coral-deep); border: 3px solid var(--comic-coral-deep); padding: 6px 14px; text-transform: uppercase; transform: rotate(-6deg); background: rgba(255, 255, 255, 0.6); position: relative; } @keyframes comic-stamp-thunk { 0% { transform: rotate(-6deg) scale(2); opacity: 0; } 50% { transform: rotate(-6deg) scale(0.92); opacity: 1; } 70% { transform: rotate(-6deg) scale(1.04); opacity: 1; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } } .comic-stamp.stamp-thunk { animation: comic-stamp-thunk 0.42s cubic-bezier(.22, 1, .36, 1) both; } /* =========================================================================== 8. MASCOT WRAPPER — for the recurring cracker-character placeholder =========================================================================== */ .mascot-wrap { display: flex; gap: 24px; align-items: center; padding: 28px; background: var(--comic-paper); border: 3px solid var(--comic-ink); box-shadow: 6px 6px 0 var(--comic-gold); } .mascot-img { flex: 0 0 90px; width: 90px; height: 90px; background: var(--comic-coral); border: 3px solid var(--comic-ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 44px; } .mascot-speech { flex: 1; font-family: var(--comic-hand); font-size: 17px; line-height: 1.45; color: var(--comic-ink); } .mascot-speech strong { font-family: var(--comic-display); font-size: 18px; letter-spacing: 0.5px; } /* =========================================================================== 9. REDUCED-MOTION RESPECT =========================================================================== */ @media (prefers-reduced-motion: reduce) { .burst-animated, .stamp-thunk, .burst-wiggle { animation: none !important; } .btn-comic, .btn-comic:hover, .btn-comic:active { transform: none !important; transition: none !important; } } /* =========================================================================== 10. UTILITY — keep things tidy on small screens =========================================================================== */ @media (max-width: 600px) { :root { --burst-size: 64px; } .comic-burst.burst-large { --burst-size: 96px; font-size: 22px; } .comic-burst.burst-huge { --burst-size: 140px; font-size: 32px; } .comic-headline { font-size: clamp(26px, 8vw, 38px); } .comic-panel { padding: 18px 18px; box-shadow: 4px 4px 0 var(--comic-ink); } .mascot-wrap { flex-direction: column; text-align: center; padding: 20px; } }