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 */
|
||||
.about-locked-img {
|
||||
.about-locked-wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: auto;
|
||||
margin: 32px auto 0;
|
||||
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;
|
||||
}
|
||||
.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
|
||||
|
||||
+15
@@ -349,7 +349,22 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-locked-wrap">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user