/* Base Style: Aged Journal Strip */ .journal-strip { --paper-color: #fff8e1; /* Default light, creamy color */ --ink-color: #4b3832; /* Default dark brown ink */ background-color: var(--paper-color); color: var(--ink-color); padding: 2.5rem 2rem; margin: 1.5rem auto; max-width: 650px; position: relative; overflow: visible; filter: sepia(20%) contrast(105%); /* Basic aging effect */ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(75, 56, 50, 0.15); border-radius: 5px 15px 8px 20px / 15px 5px 20px 8px; /* Irregular corners */ border: 1px solid #e0c9a9; transform: rotate(0deg); font-family: 'Georgia', serif; line-height: 1.7; font-size: 1.1rem; } /* Default pseudo-elements for subtle tears (now simulating old tape) */ .journal-strip::before, .journal-strip::after { content: ""; position: absolute; height: 25px; /* Thicker height for tape look */ /* Translucent, light brown/aged look for the tape */ background-color: rgba(230, 219, 179, 0.7); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Softer shadow for tape */ border: 1px solid rgba(138, 115, 84, 0.2); /* Very subtle border for definition */ z-index: 1; } /* Base style for small top tear (overridden by nth-of-type) */ .journal-strip::before { top: -12px; /* Adjusted position for new height */ width: 35%; /* Slightly wider */ transform: skewX(-15deg); /* Less severe skew */ clip-path: none; } /* Base style for small bottom tear (overridden by nth-of-type) */ .journal-strip::after { bottom: -12px; /* Adjusted position for new height */ width: 25%; /* Slightly wider */ transform: skewX(15deg); /* Less severe skew */ clip-path: none; } .journal-strip p { margin-bottom: 1em; text-indent: 1em; } /* --- Randomization using :nth-of-type (20 unique variations) --- */ .journal-strip:nth-of-type(20n+1) { transform: rotate(1.8deg); } .journal-strip:nth-of-type(20n+1)::before { left: 12%; transform: skewX(-25deg) rotate(-1.5deg); } .journal-strip:nth-of-type(20n+1)::after { right: 8%; transform: skewX(20deg) rotate(3.2deg); } .journal-strip:nth-of-type(20n+2) { transform: rotate(-3.5deg); } .journal-strip:nth-of-type(20n+2)::before { left: 8%; transform: skewX(-25deg) rotate(4.0deg); } .journal-strip:nth-of-type(20n+2)::after { right: 15%; transform: skewX(20deg) rotate(-0.8deg); } .journal-strip:nth-of-type(20n+3) { transform: rotate(4.1deg); } .journal-strip:nth-of-type(20n+3)::before { left: 5%; transform: skewX(-25deg) rotate(-4.5deg); } .journal-strip:nth-of-type(20n+3)::after { right: 18%; transform: skewX(20deg) rotate(1.1deg); } .journal-strip:nth-of-type(20n+4) { transform: rotate(-1.0deg); } .journal-strip:nth-of-type(20n+4)::before { left: 15%; transform: skewX(-25deg) rotate(2.8deg); } .journal-strip:nth-of-type(20n+4)::after { right: 5%; transform: skewX(20deg) rotate(-4.2deg); } .journal-strip:nth-of-type(20n+5) { transform: rotate(0.5deg); } .journal-strip:nth-of-type(20n+5)::before { left: 7%; transform: skewX(-25deg) rotate(-0.2deg); } .journal-strip:nth-of-type(20n+5)::after { right: 12%; transform: skewX(20deg) rotate(4.8deg); } .journal-strip:nth-of-type(20n+6) { transform: rotate(3.0deg); } .journal-strip:nth-of-type(20n+6)::before { left: 18%; transform: skewX(-25deg) rotate(1.9deg); } .journal-strip:nth-of-type(20n+6)::after { right: 2%; transform: skewX(20deg) rotate(-2.5deg); } .journal-strip:nth-of-type(20n+7) { transform: rotate(-2.8deg); } .journal-strip:nth-of-type(20n+7)::before { left: 10%; transform: skewX(-25deg) rotate(-3.1deg); } .journal-strip:nth-of-type(20n+7)::after { right: 10%; transform: skewX(20deg) rotate(0.1deg); } .journal-strip:nth-of-type(20n+8) { transform: rotate(4.9deg); } .journal-strip:nth-of-type(20n+8)::before { left: 20%; transform: skewX(-25deg) rotate(4.5deg); } .journal-strip:nth-of-type(20n+8)::after { right: 5%; transform: skewX(20deg) rotate(-3.9deg); } .journal-strip:nth-of-type(20n+9) { transform: rotate(-0.1deg); } .journal-strip:nth-of-type(20n+9)::before { left: 13%; transform: skewX(-25deg) rotate(-0.5deg); } .journal-strip:nth-of-type(20n+9)::after { right: 14%; transform: skewX(20deg) rotate(2.0deg); } .journal-strip:nth-of-type(20n+10) { transform: rotate(1.5deg); } .journal-strip:nth-of-type(20n+10)::before { left: 6%; transform: skewX(-25deg) rotate(-2.9deg); } .journal-strip:nth-of-type(20n+10)::after { right: 11%; transform: skewX(20deg) rotate(-1.7deg); } .journal-strip:nth-of-type(20n+11) { transform: rotate(-4.3deg); } .journal-strip:nth-of-type(20n+11)::before { left: 9%; transform: skewX(-25deg) rotate(3.7deg); } .journal-strip:nth-of-type(20n+11)::after { right: 16%; transform: skewX(20deg) rotate(4.0deg); } .journal-strip:nth-of-type(20n+12) { transform: rotate(2.2deg); } .journal-strip:nth-of-type(20n+12)::before { left: 17%; transform: skewX(-25deg) rotate(-4.1deg); } .journal-strip:nth-of-type(20n+12)::after { right: 3%; transform: skewX(20deg) rotate(-0.9deg); } .journal-strip:nth-of-type(20n+13) { transform: rotate(-0.7deg); } .journal-strip:nth-of-type(20n+13)::before { left: 4%; transform: skewX(-25deg) rotate(0.8deg); } .journal-strip:nth-of-type(20n+13)::after { right: 19%; transform: skewX(20deg) rotate(3.5deg); } .journal-strip:nth-of-type(20n+14) { transform: rotate(3.9deg); } .journal-strip:nth-of-type(20n+14)::before { left: 14%; transform: skewX(-25deg) rotate(-2.3deg); } .journal-strip:nth-of-type(20n+14)::after { right: 6%; transform: skewX(20deg) rotate(-1.1deg); } .journal-strip:nth-of-type(20n+15) { transform: rotate(-1.9deg); } .journal-strip:nth-of-type(20n+15)::before { left: 11%; transform: skewX(-25deg) rotate(1.2deg); } .journal-strip:nth-of-type(20n+15)::after { right: 13%; transform: skewX(20deg) rotate(4.9deg); } .journal-strip:nth-of-type(20n+16) { transform: rotate(0.8deg); } .journal-strip:nth-of-type(20n+16)::before { left: 16%; transform: skewX(-25deg) rotate(-0.7deg); } .journal-strip:nth-of-type(20n+16)::after { right: 4%; transform: skewX(20deg) rotate(-3.3deg); } .journal-strip:nth-of-type(20n+17) { transform: rotate(4.5deg); } .journal-strip:nth-of-type(20n+17)::before { left: 3%; transform: skewX(-25deg) rotate(4.8deg); } .journal-strip:nth-of-type(20n+17)::after { right: 17%; transform: skewX(20deg) rotate(1.6deg); } .journal-strip:nth-of-type(20n+18) { transform: rotate(-2.1deg); } .journal-strip:nth-of-type(20n+18)::before { left: 19%; transform: skewX(-25deg) rotate(-1.0deg); } .journal-strip:nth-of-type(20n+18)::after { right: 1%; transform: skewX(20deg) rotate(-4.5deg); } .journal-strip:nth-of-type(20n+19) { transform: rotate(1.1deg); } .journal-strip:nth-of-type(20n+19)::before { left: 2%; transform: skewX(-25deg) rotate(3.0deg); } .journal-strip:nth-of-type(20n+19)::after { right: 20%; transform: skewX(20deg) rotate(0.4deg); } .journal-strip:nth-of-type(20n+20) { transform: rotate(-3.0deg); } .journal-strip:nth-of-type(20n+20)::before { left: 21%; transform: skewX(-25deg) rotate(-4.9deg); } .journal-strip:nth-of-type(20n+20)::after { right: 9%; transform: skewX(20deg) rotate(2.5deg); } /* Fallback style for entries beyond 20 */ .journal-strip:nth-of-type(n+21) { transform: rotate(0.3deg); } .journal-strip:nth-of-type(n+21)::before { left: 10%; transform: skewX(-25deg) rotate(1.0deg); } .journal-strip:nth-of-type(n+21)::after { right: 10%; transform: skewX(20deg) rotate(-1.0deg); } /* --- DAMAGED STRIP Modifier (Damage variations via nth-of-type) --- */ /* Shared Damaged Strip Properties (Filters and shadows) -- This block now includes all structural and visual base properties to stand alone. */ .damaged-strip { /* Paper appearance and structural styles from base .journal-strip */ --paper-color: #f0e6c5; /* Darker, yellower, damaged paper color */ --ink-color: #302421;   /* Slightly more defined ink color, though faded in p */ background-color: var(--paper-color); color: var(--ink-color); padding: 2.5rem 2rem; margin: 1.5rem auto; max-width: 650px; position: relative; overflow: visible; font-family: 'Cursive', 'Georgia', serif; line-height: 1.7; font-size: 1.1rem; /* END Base structural properties */ /* Damage-specific properties */ filter: sepia(70%) contrast(180%) saturate(150%) blur(0.7px); /* Heavy aging filter */ border: 2px ridge #8a735c; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), inset 0 0 25px rgba(75, 56, 50, 0.45), inset 5px 5px 15px -5px rgba(0, 0, 0, 0.7), inset -5px -5px 15px -5px rgba(0, 0, 0, 0.7); } /* Shared Pseudo-element Properties (Position and size) */ .damaged-strip::before, .damaged-strip::after { content: ""; position: absolute; width: 100%; height: 30px; background-color: var(--paper-color); /* Uses the new damaged paper color */ z-index: 2; border-top: none; border-bottom: none; } /* Top tear shared properties */ .damaged-strip::before { top: -20px; left: 0; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.8); } /* Bottom tear shared properties */ .damaged-strip::after { bottom: -20px; right: 0; box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.8); } /* Text style for damaged strips */ .damaged-strip p { color: rgba(75, 56, 50, 0.3); /* Faded and blurred text */ line-height: 1.8; text-shadow: 0 0 3px rgba(75, 56, 50, 0.8), 1px 1px 5px rgba(75, 56, 50, 0.5); letter-spacing: 0.1em; text-decoration: line-through solid rgba(75, 56, 50, 0.15) 2px; /* Unreadable text effect */ } /* --- DAMAGED STRIP VARIATIONS (5 total) --- */ /* Variation 1 (5n+1): Light rotation, standard shape, jagged rip */ .damaged-strip:nth-of-type(5n+1) { transform: rotate(2.5deg) scale(1.02); border-radius: 10px 30px 5px 40px / 30px 10px 40px 5px; } .damaged-strip:nth-of-type(5n+1)::before { clip-path: polygon( 0% 50%, 5% 10%, 15% 40%, 25% 0%, 35% 60%, 45% 20%, 55% 80%, 65% 30%, 75% 90%, 85% 45%, 95% 15%, 100% 50% ); /* Jagged top rip */ } .damaged-strip:nth-of-type(5n+1)::after { clip-path: polygon( 0% 50%, 5% 90%, 15% 60%, 25% 100%, 35% 40%, 45% 80%, 55% 20%, 65% 70%, 75% 10%, 85% 55%, 95% 85%, 100% 50% ); /* Jagged bottom rip */ } /* Variation 2 (5n+2): Heavier rotation, rounder corners, wider, offset rip */ .damaged-strip:nth-of-type(5n+2) { transform: rotate(-3.5deg) scale(1.0); border-radius: 20px 5px 30px 5px / 5px 30px 5px 20px; } .damaged-strip:nth-of-type(5n+2)::before { clip-path: polygon( 0% 30%, 10% 80%, 20% 10%, 30% 60%, 40% 0%, 50% 70%, 60% 15%, 70% 85%, 80% 25%, 90% 95%, 100% 40% ); /* Wide, random top rip */ } .damaged-strip:nth-of-type(5n+2)::after { clip-path: polygon( 0% 70%, 10% 20%, 20% 90%, 30% 40%, 40% 100%, 50% 30%, 60% 85%, 70% 15%, 80% 75%, 90% 5%, 100% 60% ); /* Wide, random bottom rip */ } /* Variation 3 (5n+3): Minimal rotation, sharper, more uniform corners */ .damaged-strip:nth-of-type(5n+3) { transform: rotate(0.8deg) scale(1.01); border-radius: 3px 15px 3px 15px / 15px 3px 15px 3px; } .damaged-strip:nth-of-type(5n+3)::before { clip-path: polygon( 0% 50%, 10% 25%, 20% 50%, 30% 15%, 40% 55%, 50% 30%, 60% 60%, 70% 40%, 80% 70%, 90% 35%, 100% 50% ); /* Shallow, uniform top rip */ } .damaged-strip:nth-of-type(5n+3)::after { clip-path: polygon( 0% 50%, 10% 75%, 20% 50%, 30% 85%, 40% 45%, 50% 70%, 60% 40%, 70% 60%, 80% 30%, 90% 65%, 100% 50% ); /* Shallow, uniform bottom rip */ } /* Variation 4 (5n+4): Extreme negative rotation, offset corners */ .damaged-strip:nth-of-type(5n+4) { transform: rotate(-5.0deg) scale(0.98); border-radius: 40px 10px 20px 5px / 5px 20px 10px 40px; } .damaged-strip:nth-of-type(5n+4)::before { clip-path: polygon( 0% 0%, 5% 50%, 15% 10%, 25% 60%, 35% 20%, 45% 70%, 55% 30%, 65% 80%, 75% 40%, 85% 90%, 95% 50%, 100% 10% ); /* Starts/ends low, erratic top rip */ } .damaged-strip:nth-of-type(5n+4)::after { clip-path: polygon( 0% 100%, 5% 50%, 15% 90%, 25% 40%, 35% 80%, 45% 30%, 55% 70%, 65% 20%, 75% 60%, 85% 10%, 95% 50%, 100% 90% ); /* Starts/ends high, erratic bottom rip */ } /* Variation 5 (5n+5): Forward rotation, large scale */ .damaged-strip:nth-of-type(5n+5) { transform: rotate(4.2deg) scale(1.05); border-radius: 5px 50px 5px 50px / 50px 5px 50px 5px; } .damaged-strip:nth-of-type(5n+5)::before { clip-path: polygon( 0% 0%, 10% 40%, 25% 10%, 40% 50%, 50% 15%, 65% 55%, 75% 20%, 90% 60%, 100% 30% ); /* Fewer, longer teeth on top rip */ } .damaged-strip:nth-of-type(5n+5)::after { clip-path: polygon( 0% 100%, 10% 60%, 25% 90%, 40% 50%, 50% 85%, 65% 45%, 75% 80%, 90% 40%, 100% 70% ); /* Fewer, longer teeth on bottom rip */ } /* --- SINGLE STRIP MODIFIER (JOURNAL-STRIP-SINGLE) --- */ /* * The .journal-strip-single class overrides the randomized rotation with 0deg * and applies the specific tape placement/rotation from the first child variant * to the pseudo-elements, allowing it to be used as a modifier class alongside .journal-strip. */ .journal-strip-single { /* Override nth-of-type rotations with maximum specificity */ transform: rotate(0deg) !important; } /* Apply specific tape positioning/rotation from :nth-of-type(20n+1) */ .journal-strip-single::before { left: 12%; transform: skewX(-25deg) rotate(-1.5deg); } .journal-strip-single::after { right: 8%; transform: skewX(20deg) rotate(3.2deg); } /* --- NEW STYLE: FUTURISTIC LOG STRIP --- */ .log-strip { /* Base for a clean, futuristic data log */ --main-color: #00ffcc; /* Neon cyan/green for text/accents */ --bg-color: #0d1a1b; /* Dark, almost black background */ --border-color: #004d40; /* Darker teal/green for borders */ background-color: var(--bg-color); color: var(--main-color); font-family: 'Consolas', 'Courier New', monospace; font-size: 1.05rem; line-height: 1.6; padding: 1.5rem 2rem; margin: 2rem auto; max-width: 700px; border: 1px solid var(--border-color); border-left: 5px solid var(--main-color); /* Highlight bar */ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3), /* Subtle neon glow */ 0 0 20px rgba(0, 255, 204, 0.1) inset; /* Crisp, slightly rounded edges */ border-radius: 4px; /* transform: perspective(1000px) rotateY(-0.5deg) rotateX(0.5deg); /* Slight 3D tilt */ } /* Pseudo-element for a subtle HUD-like data grid overlay */ .log-strip::before { content: "LOG: // STATUS: ONLINE"; position: absolute; top: 0; right: 0; font-size: 0.8rem; padding: 0.25rem 0.5rem; background-color: rgba(0, 255, 204, 0.1); color: var(--main-color); border-bottom-left-radius: 4px; z-index: 1; letter-spacing: 0.1em; } .log-strip p { margin-bottom: 1em; text-indent: 0; } /* Highlight for data fields */ .log-strip strong { color: #ccffff; /* Brighter highlight color */ text-shadow: 0 0 5px #ccffff; } /* --- NEW STYLE: ELITE DANGEROUS LOG STRIP --- */ .ed-log-strip { /* Elite Dangerous HUD Aesthetic (Orange/Amber) */ --ed-orange: #ff7000; /* Distinct orange/amber color */ --ed-dark: #121212; /* Very dark background */ --ed-light: #444444; /* Grid/secondary lines */ background-color: var(--ed-dark); color: var(--ed-orange); font-family: 'Share Tech Mono', 'Consolas', monospace; /* Monospace font */ font-size: 1.0rem; line-height: 1.4; padding: 2rem; margin: 2rem auto; max-width: 680px; position: relative; overflow: hidden; /* Hide the grid overflow */ /* Sharp corners, with slight internal beveling effect */ border: 1px solid var(--ed-light); clip-path: polygon( 2% 0%, 100% 0%, 98% 100%, 0% 100% ); /* Subtle parallelogram skew */ box-shadow: 0 0 5px var(--ed-orange), 0 0 15px rgba(255, 112, 0, 0.4); /* Stronger amber glow */ } /* Pseudo-element for the angular top-right detail and grid effect */ .ed-log-strip::before { content: "CMDR'S LOG // SYSTEM STATUS: OK"; position: absolute; top: 0; right: 0; font-size: 0.75rem; color: var(--ed-light); padding: 0.5rem 0.5rem 0.5rem 2rem; background-color: var(--ed-dark); border-bottom: 1px solid var(--ed-orange); border-left: 1px solid var(--ed-orange); clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); /* Angled background */ z-index: 2; letter-spacing: 0.1em; } /* Pseudo-element for a subtle, repeating dashed line/grid */ .ed-log-strip::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient( to bottom, transparent, transparent 19px, rgba(255, 112, 0, 0.1) 20px, rgba(255, 112, 0, 0.1) 21px ); opacity: 0.2; pointer-events: none; z-index: 0; } .ed-log-strip p { margin-bottom: 0.8em; text-indent: 0; text-shadow: 0 0 2px var(--ed-orange); } /* Highlight important data in ED style */ .ed-log-strip strong { color: #ffee00; /* Yellow for warnings/highlights */ text-shadow: 0 0 5px #ffee00; } /* --- NEW STYLE: TELEX/OLD FAX STRIP --- */ .telex-fax-strip { /* Base Colors and Structure */ --paper-color: #f7f3e8; /* Off-white/cream paper */ --ink-color: #333333; /* Dark, slightly faded ink */ --header-color: #5d5d5d; /* Darker header/detail color */ background-color: var(--paper-color); color: var(--ink-color); font-family: 'Monospace', 'Courier New', monospace; font-size: 1.0rem; line-height: 1.2; /* Tight line spacing */ padding: 3rem 2.5rem 2rem 2.5rem; /* Extra padding on top for header */ margin: 2rem auto; max-width: 600px; /* Narrower width for old paper rolls */ position: relative; overflow: hidden; /* Visual Texture: Faded, low-res print and paper grain */ filter: grayscale(10%) contrast(110%); border: 1px solid #cccccc; /* Simple paper edge */ box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); /* Simple drop shadow */ border-radius: 2px; } /* Pseudo-element for the characteristic Telex/Fax Header */ .telex-fax-strip::before { content: "--- PACT TELEX [07/18 14:32] FROM: SENDER_ID-3841 ---"; position: absolute; top: 0; left: 0; width: 100%; /* Dark, thick band across the top */ background-color: var(--header-color); color: var(--paper-color); font-size: 0.75rem; padding: 0.5rem 2.5rem; box-sizing: border-box; letter-spacing: 0.1em; font-weight: bold; text-align: center; border-bottom: 2px solid #a0a0a0; z-index: 2; } /* Pseudo-element for a subtle, faint background scan/banding pattern */ .telex-fax-strip::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Repeating faint horizontal lines (like low-res scan lines) */ background-image: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 3px ); opacity: 0.7; pointer-events: none; z-index: 1; } .telex-fax-strip p { margin-bottom: 0.8em; text-indent: 0; /* Simulate thermal or carbon ink smear/fade */ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05), -1px -1px 1px rgba(0, 0, 0, 0.05); } /* Highlight for machine-printed codes or important fields */ .telex-fax-strip strong { color: #000000; background-color: #e0e0e0; /* Block highlight */ padding: 1px 3px; font-weight: normal; font-style: italic; /* To distinguish from surrounding text */ } /* --- KEYFRAMES FOR REVISED AURORA EFFECT --- */ @keyframes aurora-wave { /* Define keyframes to shift the background diagonally for a gentle wave motion */ 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } /* --- REVISED CLASS: LOG DISRUPTION EFFECT (Inner Container, Dreamy/Aurora/Wisps) --- */ /* This class should be applied to an inner container within the .journal-strip element. */ .log-disruption { /* 1. Base Overrides (Soft, Pale Colors) */ --dream-bg-color: #fcf6ff; /* Very light lavender/pale background */ --dream-ink-color: #58587d; /* Soft, deep purple ink */ background-color: var(--dream-bg-color) !important; color: var(--dream-ink-color); /* Apply color to container for any non-paragraph text */ /* Removed: heavy blur, rotation, and sickly hue-rotate */ filter: sepia(20%) saturate(110%) contrast(105%) grayscale(5%) !important; /* Soft, pale, slightly warm filter */ opacity: 0.98; /* Allows for slight blending with background */ transform: none !important; /* Ensure no rotation overrides */ transition: all 2.5s ease-in-out; /* 2. Aurora Background Setup (Vibrant and Moving) */ background-image: /* Deep Aurora Colors: Cyan, Magenta, Lime Green */ linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, /* Soft Cyan */ rgba(255, 0, 255, 0.1) 25%, /* Soft Magenta */ rgba(127, 255, 0, 0.15) 50%, /* Lime Green */ rgba(255, 0, 255, 0.1) 75%, rgba(0, 255, 255, 0.2) 100%), /* Light background to smooth the colors */ linear-gradient(90deg, #fce4ec 0%, #ffffff 50%, #fce4ec 100%); background-size: 400% 400%; /* Very large size for slow, gentle wave motion */ animation: aurora-wave 120s ease-in-out infinite alternate; /* Very slow movement */ /* 3. Wispy Border/Fuzzing Effect (Inward Glow) */ /* This creates the glow effect, padding it to just inside the interior spacing (2rem/32px) */ box-shadow: /* Outer, soft glow (Fuzzes the edge of the inner element) */ 0 0 10px rgba(138, 43, 226, 0.3), /* Amethyst/Purple Glow */ /* Inner, wispy layers - 5px max depth from the edge */ inset 5px 0 10px rgba(255, 255, 255, 0.2), /* Soft white shimmer on the left edge */ inset -5px 0 10px rgba(255, 255, 255, 0.2), /* Soft white shimmer on the right edge */ inset 0 5px 15px rgba(138, 43, 226, 0.1), /* Purple glow top */ inset 0 -5px 15px rgba(138, 43, 226, 0.1); /* Purple glow bottom */ /* 4. Padding/Layout Adjustment (Self-paddings to prevent affecting text) */ /* Assumes original journal-strip padding is 2.5rem 2rem; (40px 32px) We need to ensure the inner content (paragraphs) has padding. */ width: 100%; box-sizing: border-box; /* Adding padding to the inner container to respect content spacing */ padding: 2.5rem 2rem; /* Explicitly remove parent's inherited border for a clean edge to fuzz */ border: none !important; } /* 3. Text Effect: Target the paragraphs inside the disruption container */ .log-disruption p { color: var(--dream-ink-color); font-family: 'Georgia', serif; font-size: 1.15rem; line-height: 1.8; text-shadow: 0 0 1px rgba(88, 88, 125, 0.2); letter-spacing: 0em; transition: all 2.5s ease-in-out; }