About locked image: 13px blur overlay + CTA with Telegram link
This commit is contained in:
+44
-3
@@ -896,18 +896,59 @@ body[data-lang="en"] .hide-de { display: none !important; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Locked image nach Unsere Themen — nur sichtbar wenn nicht eingeloggt */
|
/* Locked image nach Unsere Themen — nur sichtbar wenn nicht eingeloggt */
|
||||||
.about-locked-img {
|
.about-locked-wrap {
|
||||||
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 32px auto 0;
|
margin: 32px auto 0;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
[data-loggedIn="true"] .about-locked-img {
|
[data-loggedIn="true"] .about-locked-wrap {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.about-locked-img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.about-locked-blur {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
backdrop-filter: blur(13px);
|
||||||
|
-webkit-backdrop-filter: blur(13px);
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
.about-locked-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.about-locked-icon { font-size: 2.5rem; }
|
||||||
|
.about-locked-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 600;
|
||||||
|
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
.about-locked-btn {
|
||||||
|
display: inline-flex !important;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ========================================
|
/* ========================================
|
||||||
SEARCH
|
SEARCH
|
||||||
|
|||||||
+15
@@ -349,7 +349,22 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="about-locked-wrap">
|
||||||
<img class="about-locked-img" src="/spacer.png" alt="" aria-hidden="true">
|
<img class="about-locked-img" src="/spacer.png" alt="" aria-hidden="true">
|
||||||
|
<div class="about-locked-blur"></div>
|
||||||
|
<div class="about-locked-overlay">
|
||||||
|
<div class="about-locked-icon">🌴</div>
|
||||||
|
<div class="about-locked-text">
|
||||||
|
<span class="hide-de">Tritt unserer Telegram-Gruppe bei<br>und erhalte Zugang zu allen Inhalten.</span>
|
||||||
|
<span class="hide-en">Join our Telegram group<br>and get access to all content.</span>
|
||||||
|
</div>
|
||||||
|
<a href="https://t.me/YourBotUsername?start=send_a_login_link" target="_blank" rel="noopener" class="btn btn-primary about-locked-btn">
|
||||||
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0zm5.94 8.13l-1.97 9.27c-.15.67-.54.83-1.09.52l-3.02-2.22-1.46 1.4c-.16.16-.3.3-.61.3l.22-3.06 5.55-5.02c.24-.22-.05-.34-.38-.13L8.69 14.7l-2.95-.92c-.64-.2-.66-.64.14-.95l11.15-4.3c.52-.19.97.13.81.9z"/></svg>
|
||||||
|
<span class="hide-de">Jetzt Telegram beitreten</span>
|
||||||
|
<span class="hide-en">Join Telegram now</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user