/* Redefine the Bootstrap/Template CSS variable to prioritize web font */
/* Make sure the fonts are included. - */
/* Make sure the fonts are included. - */
:root {
--bs-font-sans-serif: Roboto, "Open Sans", "Segoe UI", sans-serif, system-ui !important;
}
/* Fix right side margin in article category view
body.view-category .blog .article-list .row {
--bs-gutter-x: 0;
}*/
/* Reduce margin */
li p {
margin-bottom: 5px;
}
/*For adjusting space between menu items*/
.sp-dropdown .sp-menu-item > a > span {
padding: 0px !important;
}
/* For showing the intro image and article text in grid view*/
/* 1. Target the article in the category blog list view.
2. Set it to use CSS Grid.
3. Define two columns: 1fr (fractional unit) for the image and 2fr for the text (1/3 image, 2/3 text).
4. Set a gap between the columns.
*/
.articles-leading .article {
display: grid;
grid-template-columns: 300px 1fr; /* Adjust the ratio as needed (e.g., 300px 1fr) */
gap: 5px; /* Space between the image and text */
margin-bottom: 30px; /* Space between articles */
}
/* 4. Ensure the image container and the body flow correctly into the grid cells.
*/
.articles-leading .article .article-intro-image, .article-list .article-body {
/* Remove default margins/padding that might break the alignment */
margin: 5px !important;
border: 0px !important;
padding: 0px !important;
}
/* 5. Make the image fill its new container.
*/
.articles-leading .article .article-intro-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover; /* Optional: ensures the image covers the area without distortion */
}
/* 6. **Crucial for Responsiveness:** Revert to a single column on smaller screens
*/
@media (max-width: 768px) {
.articles-leading .article {
grid-template-columns: 1fr; /* Image and text stack on top of each other */
gap: 15px;
}
}
/* Set maximum size of the full article image. */
.article-details .article-full-image img {
max-width: 400px;
max-height: 400px;
width: auto;
height: auto;
}
/* For making articles in columns of the same height */
/* ensure each bootstrap column becomes a vertical flex container */
.article-list .row > [class*="col-"] {
display: flex;
flex-direction: column;
/* allow columns to size by their normal grid width */
box-sizing: border-box;
}
/* make the actual article fill the column height */
.article-list .row > [class*="col-"] .article {
flex: 1 1 auto; /* fill available height inside the column */
display: flex;
flex-direction: column; /* if article has stacked pieces (title, body, footer) */
box-sizing: border-box;
}
/* Add space after image in feature-box */
.sppb-img-responsive {
margin-bottom: 0.8em;
}
/* For lightbox */
/* Small plus overlay on links that should open the lightbox */
a.kindle-image-lightbox {
position: relative; /* make pseudo-element position relative to the link */
display: inline-block; /* anchor now has the same size as the image */
text-decoration: none; /* remove underline if any */
outline: none;
}
/* The plus badge */
a.kindle-image-lightbox::after {
content: "+";
position: absolute;
right: 8px; /* adjust horizontal offset */
bottom: 8px; /* adjust vertical offset */
width: 28px; /* badge size */
height: 28px;
line-height: 28px; /* vertically center the plus */
text-align: center;
font-size: 16px; /* plus size */
font-weight: 700;
color: white;
background: rgba(0,0,0,0.55); /* semi-transparent dark circle */
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.35);
transition: transform 0.15s ease, opacity 0.15s ease;
opacity: 0; /* only shown when the user hovers over the image */
pointer-events: none; /* clicks pass through to the link */
z-index: 5;
}
/* Optional: subtle scale effect on hover */
a.kindle-image-lightbox:hover::after {
transform: scale(1.08);
opacity: 1;
}
/* Make sure badge doesn't overflow small thumbnails */
a.kindle-image-lightbox img {
display: block;
max-width: 100%;
height: auto;
}
/* Smaller badge for very small images */
@media (max-width: 480px) {
a.kindle-image-lightbox::after {
right: 6px;
bottom: 6px;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 14px;
}
}
/* Make lightbox appear above top menu */
.mfp-wrap {
z-index: 99999 !important;
}
.mfp-bg {
z-index: 99998 !important;
}
/* For highlight box */
.kindle-box-story {
border: 1px;
border-style: solid;
border-width: 1px;
border-color: black;
border-radius: 5px;
margin: 10px;
padding: 10px 10px 0px 10px;
}
.kindle-concept-section {
border-top: 1px dashed gray;
margin: 0px -10px 0px -10px;
padding: 10px 10px 0px 10px;
}
.kindle-activity-section {
border-top: 1px dashed gray;
border-bottom: 1px dashed gray;
margin: 0px -10px 0px -10px;
padding: 10px 10px 0px 10px;
}
.kindle-reference-section {
border-bottom: 1px dashed gray;
margin: 0px -10px 0px -10px;
padding: 10px 10px 0px 10px;
}
.kindle-safety-section {
position: relative;
z-index: 1;
background-color: seashell;
}
.kindle-safety-section::before {
content: "";
background-color: seashell;
z-index: -1;
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
}
.kindle-box-whitesmoke {
border-color: grey;
background-color: whitesmoke;
}
.kindle-box-honeydew {
border-color: green;
background-color: honeydew;
}
.kindle-box-cornsilk {
border-color: maroon;
background-color: cornsilk;
}
.kindle-box-gainsboro {
border-color: black;
background-color: gainsboro;
}
.kindle-box-seashell {
border-color: red;
background-color: seashell;
}
/* For making feature boxes of the same height */
.feature-box-grid .sppb-row-column :is(
.sppb-addon-wrapper,
.clearfix,
.sppb-addon-feature,
.sppb-addon-content) {
height: 100%;
}
/* For observation tables within activities */
.kindle-observation-table {
border-color: black;
border-style: solid;
border-width: 1px;
margin-bottom: 1rem;
}
.kindle-observation-table th, .kindle-observation-table td {
border-color: black;
border-style: solid;
border-width: 1px;
padding: 5px;
}
figure {
margin-left: 0px;
margin-right: 0px;
}
/*Font for image credit*/
.kindle-image-title, .kindle-image-credit, .article-details .article-full-image figcaption {
font-size: 0.8rem;
margin-left: 0px;
}