/* 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
Here at Deep Spirituality, we’ve been working on a project that’s taken us over a year to make. He’s Not Who You Think He Is: Dropping Your Assumptions and Discovering God for Yourself is a book written by our editor in chief, Russ Ewell. It also includes interactive media put together by our team here at Deep Spirituality.
In today’s video, you can watch us unbox our book for the first time ever 😯👏
You can buy the book on Amazon for print, Kindle, or audiobook on April 24th, 2023! Thank you to everyone who has supported us through this journey, and we hope you get as much out of this book as we have.
References
He’s Not Who You Think He Is: Dropping Your Assumptions and Discovering God for Yourself is out April 24th
Subscribe to our newsletter
The Ultimate Love Story: God’s Pursuit of Intimacy with You video
More in
Recommended for you
How God helps us let go of old habits and become new people
