/* style and html for share modal */
:root {
--modal-bg: #ffffff;
--backdrop: rgba(0, 0, 0, 0.5);
--text-header: #000000;
--text-card-title: #222222;
--text-card-site: #ffffff;
--card-bg-color: #0c111d;
/* The olive/grey tone from the screenshot */
--btn-bg: #f3f3f3;
--btn-hover: #e5e5e5;
}
/* Reset & Base Fonts */
.modal-container * {
box-sizing: border-box;
}
/* Trigger Button */
.share-trigger-btn {
padding: 12px 24px;
background: #000;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
font-size: 16px;
}
/* Overlay */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--backdrop);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
z-index: 9999;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
/* Modal Card */
.modal-container {
background: var(--modal-bg);
width: 90%;
max-width: 440px;
/* Slightly wider */
border-radius: 24px;
/* Larger border radius */
padding: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
transform: scale(0.95);
transition: transform 0.2s ease;
}
.modal-overlay.active .modal-container {
transform: scale(1);
}
/* Header */
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-title {
font-size: 26px;
/* Bolder, larger header */
font-weight: 800;
margin: 0;
color: var(--text-header);
letter-spacing: -0.5px;
}
.close-btn {
background: transparent;
border: 1px solid #e0e0e0;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #666;
transition: background 0.2s;
}
.close-btn:hover {
background: #f7f7f7;
color: #000;
}
/* Link Preview Card */
.preview-card {
border-radius: 16px;
overflow: hidden;
background: var(--card-bg-color);
margin-bottom: 24px;
display: flex;
flex-direction: column;
}
.preview-image-container {
width: 100%;
height: 200px;
background: #eee;
position: relative;
}
.preview-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.preview-meta {
padding: 16px 20px;
}
#shareSiteName {
color: var(--text-card-site);
font-size: 13px;
font-weight: 500;
opacity: 0.9;
text-transform: uppercase;
/* Optional stylistic choice */
letter-spacing: 0.5px;
}
/* The requested H2 with no margins */
#shareTitle {
margin: 0;
/* Specific Request: No margins */
font-size: 20px;
line-height: 1.25;
color: white;
}
h2.modal-title {
margin-top: 1rem;
}
@Triangle Media only screen and (max-width: 800px) {
.ds-blog-content h2#share-title {
margin-top: 0.5rem !important;
}
}
/* Share Buttons Grid */
.share-grid {
display: flex;
justify-content: space-between;
gap: 10px;
}
.share-item {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 0;
width: 100%;
}
.share-item span {
font-size: 12px;
color: #333;
font-weight: 500;
}
.modal-share-icon {
width: 56px;
/* Large click target */
height: 56px;
background: var(--btn-bg);
border-radius: 18px;
/* Squircle */
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
transition: background 0.2s, transform 0.1s;
}
.share-item:hover .modal-share-icon {
background: var(--btn-hover);
}
.share-item:active .modal-share-icon {
transform: scale(0.96);
}
About the video
“So then, as occasion and opportunity open up to us, let us do good to all people [not only being useful or profitable to them, but also doing what is for their spiritual good and advantage]…”
Galatians 6:10 AMPC
If we are going to build our #friendships, it is important we know how to be a great friend. This video looks at the characters from Stranger Things to give us three ways to be a great friend to others:
- Make it personal
- Give a new perspective
- Build a partnership
More in
Recommended for you
How God helps us let go of old habits and become new people
