Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* */
.mw-parser-output .tg-card {
--tg-card-image-color_r: 0;
--tg-card-image-color_g: 0;
--tg-card-image-color_b: 0;
position: relative;
background-color: var(--tg-color-surface-2);
border: var(--tg-border-base);
border-radius: var(--tg-border-radius-medium);
overflow: hidden;
display: flex;
flex-direction: column
}
.mw-parser-output .tg-card-header,
.mw-parser-output .tg-card-footer {
padding: 0.5rem 1rem;
background: var(--tg-color-surface-3)
}
.mw-parser-output .tg-card-footer {
font-size: var(--tg-font-size-small)
}
.mw-parser-output .template-flexbox-item .tg-card {
height: 100%
}
.mw-parser-output .tg-card blockquote {
margin-left: 0;
margin-right: 0
}
.mw-parser-output .tg-card-image {
position: relative;
display: flex;
flex-grow: 1
}
.mw-parser-output .tg-card-afterImage {
position: relative;
margin-top: -0.5rem;
padding: 0 1rem 1rem 1rem;
background-color: rgb(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b))
}
.mw-parser-output .tg-card-afterImage a {
color: #fff
}
.mw-parser-output .tg-card-afterImage,
.mw-parser-output .tg-card-label,
.mw-parser-output .tg-card-caption {
font-size: var(--tg-font-size-x-small)
}
.mw-parser-output .tg-card-label {
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.mw-parser-output .tg-card-label>a,
.mw-parser-output .tg-card-label>span {
display: flex;
align-items: center;
height: 32px;
padding: 0 12px;
border-bottom-right-radius: var(--tg-border-radius-medium);
background: var(--tg-color-progressive);
color: var(--tg-color-inverted-progressive);
line-height: 1
}
.mw-parser-output .tg-card-label>a:hover {
background: var(--tg-color-progressive--hover)
}
.mw-parser-output .tg-card-label>a:active {
background: var(--tg-color-progressive--hover)
}
.mw-parser-output .tg-card-content {
padding: 1rem
}
.mw-parser-output .tg-card-label+.tg-card-content {
margin-top: 1.5rem
}
.mw-parser-output .tg-card-title {
color: var(--tg-color-emphasized);
font-family: var(--tg-font-family-heading);
font-size: var(--tg-font-size-x-large);
font-weight: var(--tg-font-weight-semibold);
line-height: var(--tg-line-height-xxx-small)
}
.mw-parser-output .tg-card-caption {
margin-top: 0.25rem;
color: var(--tg-color-subtle);
line-height: var(--tg-line-height-xx-small)
}
.mw-parser-output .tg-card-title+.tg-card-body,
.mw-parser-output .tg-card-caption+.tg-card-body {
margin-top: 1rem
}
.mw-parser-output .tg-card-background,
.mw-parser-output .tg-card-link {
position: absolute;
inset: 0
}
.mw-parser-output .tg-card-background {
pointer-events: none
}
.mw-parser-output .tg-card-background::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50%;
background: linear-gradient(to top, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 1)0%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.987)8.1%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.951)15.5%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.896)22.5%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.825)29%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.741)35.3%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.648)41.2%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.55)47.1%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.45)52.9%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.352)58.8%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.259)64.7%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.175)71%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.104)77.5%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.049)84.5%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0.013)91.9%, rgba(var(--tg-card-image-color_r), var(--tg-card-image-color_g), var(--tg-card-image-color_b), 0)100%)
}
.mw-parser-output .tg-card-background--top img {
object-position: top
}
.mw-parser-output .tg-card-background--bottom img {
object-position: bottom
}
.mw-parser-output .tg-card-background img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 100ms ease;
transition-property: transform
}
.mw-parser-output .tg-card:hover .tg-card-background img {
transform: scale(1.1)
}
.mw-parser-output .tg-card-link {
opacity: 0
}
.mw-parser-output .tg-card-link>a {
display: block;
height: 100%
}
.mw-parser-output .tg-card-image .tg-card-content {
position: relative
}
.mw-parser-output .tg-card-image .tg-card-content {
margin-top: auto;
line-height: var(--tg-line-height-xx-small);
flex-grow: 1
}
.mw-parser-output .tg-card-image .tg-card-title {
color: #fff
}
.mw-parser-output .tg-card-image .tg-card-caption,
.mw-parser-output .tg-card-afterImage {
color: #ddd
}
/* Featured Section Container */
.featured-section {
background-color: #222; /* Dark background */
color: #fff; /* White text for contrast */
padding: 20px;
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow for depth */
max-width: 800px; /* Optional width constraint */
margin: auto; /* Center the section */
}
.featured-section h2 {
text-align: center;
font-family: 'Lora', serif; /* Elegant font for the title */
color: #f5eccc; /* Subtle gold for the title */
font-size: 24px;
margin-bottom: 20px;
}
/* Container for Featured Items */
.featured-container {
display: flex;
flex-wrap: wrap;
gap: 20px; /* Spacing between items */
justify-content: center; /* Center items horizontally */
}
/* Each Featured Item */
.featured-item {
background-color: #2a2a2a; /* Slightly lighter background for cards */
border-radius: 10px;
overflow: hidden;
width: 360px; /* Fixed card width */
display: flex;
flex-direction: column; /* Stack image and text vertically */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add subtle shadow */
}
/* Image Container */
.image-container {
position: relative; /* For positioning the card-label */
height: 200px; /* Fixed height for image */
overflow: hidden;
}
.image-container img {
width: 100%; /* Ensure the image fills the width */
height: 100%; /* Ensure the image fills the height */
object-fit: cover; /* Maintain aspect ratio while filling the container */
}
/* Card Label */
.card-label {
position: absolute;
top: 10px; /* Position from the top */
left: 10px; /* Position from the left */
background-color: #f5eccc; /* Light gold color for label */
color: #333; /* Dark text color */
font-weight: bold;
font-size: 12px; /* Adjust font size */
padding: 5px 10px; /* Add padding inside the label */
border-radius: 5px; /* Rounded corners */
z-index: 1; /* Ensure it stays above the image */
text-transform: uppercase; /* Capitalize text for label */
}
/* Featured Text Styling */
.featured-text {
padding: 15px;
text-align: left;
font-family: 'Lora', serif; /* Elegant font for text */
}
.featured-text h3 {
font-size: 18px;
margin-bottom: 10px;
color: #f5eccc; /* Subtle gold for headers */
}
.featured-text p {
font-size: 14px;
line-height: 1.5; /* Increase readability */
margin: 0;
color: #ddd; /* Light gray for description text */
}
/* Header */
.main-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-image: url('flourish.svg'); /* Could also be SVG code */
background-size: contain;
animation: flourishAnimation 5s infinite; /* Example animation */
}
@keyframes flourishAnimation {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Main page background */
.page-Main_Page {
background: url('https://predictive-pulse.com/images/5ean444_winter_cabin_forest_snow_night_sky_stars_peaceful_reali_fc7e7992-0c1e-4564-bf78-2930ff9dc2f9.png') no-repeat center center fixed;
background-size: cover;
}
.mainpage-navigation {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
gap: 10px; /* Adds spacing between grid items */
justify-content: center; /* Centers the items horizontally */
padding: 10px;
align-items: stretch; /* Ensures all items align consistently */
/* max-width: 660px; /* Ensures three items per row (3 items * 200px width + 2 gaps of 10px each)
margin: 0 auto; /* Centers the container horizontally */
}
.nav-item {
position: relative; /* Enables positioning of child elements */
width: 175px; /* Fixed width for each grid item. Affected by flex-basis */
height: 150px; /* Fixed height for each grid item */
border-radius: 6px; /* Consistent rounded corners */
overflow: hidden; /* Ensures child content stays within bounds */
background-color: rgba(0, 0, 0, 0.2); /* Light gray background for uniformity */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow effect */
display: flex;
flex-direction: column; /* Stacks the image and text vertically */
align-items: center; /* Centers items horizontally */
justify-content: flex-start; /* Aligns items to the top */
padding: 0; /* Removes padding */
flex-shrink: 1; /* Prevents flexbox from resizing items */
flex-basis: 150px; /* Ensures all items take up the same width. Needs flex-shrink>0 */
transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover effect */
}
/* the pre element, which is a block-level element, preserves all the whitespace,
line breaks, and formatting inside it, often causing it to exceed the intended
dimensions of the parent container (in this case, .nav-item). This can happen
if MediaWiki or some part of your content generation wraps the rendered content
(e.g., from [[File:...]]) inside a <pre> tag. */
.nav-item pre {
margin: 0; /* Removes extra margin */
padding: 0; /* Removes extra padding */
min-width: 100%; /* Ensures the pre spans at least the full width of the container */
min-height: 100%; /* Ensures the pre spans at least the full height of the container */
max-width: 100%; /* Prevents it from exceeding the container's width */
max-height: 100%; /* Prevents it from exceeding the container's height */
/*box-sizing: border-box; /* Includes padding within the specified dimensions */
overflow: hidden; /* Clips content that exceeds the container */
white-space: normal; /* Allows text to wrap instead of preserving whitespace */
}
.nav-item img {
width: 100%; /* Ensures the image takes the full width of the container */
height: 70%; /* Allocates 70% of the height to the image */
object-fit: cover; /* Ensures the image fills the area without distortion */
border-radius: 8px 8px 0 0; /* Apply rounded corners only to the top of the image */
margin: 0; /* Removes extra margin */
}
.nav-item span {
/* display: block; /* Ensures the text takes full width */
display: flex; /* Make span a flex container */
align-items: center; /* Center vertically */
justify-content: center;
text-align: center;
width: 100%; /* Matches the width of the container */
height: 30%; /* Allocates x% of the height to the text area */
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background for text */
color: #fff; /* White text color */
text-align: center !important; /* Centers the text horizontally */
/*font-size: 12px; /* Adjusts font size */
font-size: clamp(10px, 1.5vw, 12px); /* Responsive font size */
font-weight: bold; /* Makes the text bold */
line-height: 1; /* Adjusts line height for wrapped text */
padding: 5px; /* Adds padding inside the text area */
box-sizing: border-box; /* Includes padding in width/height calculations */
overflow-wrap: break-word; /* Ensures long words wrap */
overflow: hidden; /* Prevents overflowing text */
border-radius: 0 0 8px 8px; /* Rounded corners for the bottom of the text area */
}