/* ****************************************************************************************************** */
/* The Unknot Spot - Global Stylesheet */
/* CSS Variables located in style.css & linked in HTML
Example:
ALL responsive styles / @MEDIA properties for mobile/small screen sizes are located in stylesMedia.css
/* * **************************************************************************************************** */
/* --- CSS Variables at the highest level (HTML tag)--- */
:root {
--media-responsive-width: 765px; /* Use for responsive design breakpoints */
--font-base: Arial, sans-serif; /* Base font for the entire site */
--font-size-base: 16px; /* Base font size for the entire site */
--font-size-medium: 18px; /* Medium font size for emphasis */
--font-size-large: 22px; /* Large font size for headings */
--font-size-menu: 22px; /* Font size for menu items */
/* Color palette from background image */
--color-blue: #0171fe; /* Deep Sky Blue */
--color-out-of-blue: #0391e8; /* Out of the Blue */
--color-lime: #dcf803; /* Lime Zest */
--color-yellow: #d4ff08; /* Neon Yellow */
--color-purple: #b661fd; /* Bubblegum Baby Girl */
--color-magenta: #ff10cf; /* Hot Magenta */
/* --- Color scheme variables and defaults --- */
--color-scheme: dark; /* Default color scheme for the entire site */
--color-scheme-dark-text: #fbfbfb; /* Text color for dark mode / dark backgrounds */
--color-scheme-dark-text-alt: #aaaaaa; /* Alternate text color for dark mode / dark backgrounds */
--color-scheme-dark-bg: #010101; /* Background color for dark mode / dark backgrounds */
--color-scheme-dark-border: var(--color-lime); /* Border color for dark mode / dark backgrounds */
--color-scheme-dark-link: var(--color-scheme-dark-text); /* Link color for dark mode */
--color-scheme-dark-link-hv: var(--color-scheme-dark-text); /* Link hover color for dark mode */
--color-scheme-dark-link-bg: var(--color-scheme-dark-text);
--color-scheme-dark-link-a: var(--color-blue);
--color-scheme-dark-card-bg: #1a1a1a; /* Card background color for dark mode */
--color-scheme-dark-card-border: var(--color-purple); /* Card border color for dark mode OR #2a2a2a; for a grey*/
--color-scheme-dark-shadow: #00000080; /* Shadow color for dark mode */
--color-scheme-light-text: #010101; /* Text color for light mode / light backgrounds */
--color-scheme-light-bg: #fbfbfb; /* Background color for light mode / light backgrounds */
--color-scheme-light-link: var(--color-blue);
--color-scheme-light-link-bg: var(--color-scheme-light-bg);
}
/* Makes sizing and layout math much more predictable,
especially in grids/flex layouts */
*, *::before, *::after {
box-sizing: border-box;
}
/* Define over all background color behind anything transparent
and set the base font for the entire site */
body {
margin: 0;
padding: 0;
background-color: var(--color-scheme-dark-bg);
font-family: var(--font-base);
font-size: var(--font-size-base);
}
/* MAIN BACKGROUND FOR HOME PAGE */
.background {
margin: 0;
padding: 0;
min-height: 100vh;
height: 100vh;
background-image: url("images/background.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
display: flex;
flex-direction: column;
align-items: center;
}
/* Basic CSS for most text elements */
h1, h2, h3, h4, h5, h6 {
color: var(--color-scheme-dark-text);
margin: 0 0 0.5em;
line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p, li, td, th, label, input, textarea, select, span {
color: var(--color-scheme-dark-text);
}
/* Unused helper retained as reference.
.spacer {
flex: 1;
}
*/
/* --- Page wrapper --- */
.sg-page {
max-width: 90%;
margin: 0 auto;
padding: 1rem 1rem;
}
/* --- Logo bar --- */
.sg-logo-bar {
text-align: center;
padding-bottom: 1rem;
margin-bottom: 1rem;
/* border-bottom: 1px solid var(--color-blue); */
}
/* Default link styles */
a {
color: var(--color-scheme-dark-link);
text-decoration: underline;
}
a:hover {
opacity: 0.6;
}
.page-banner {
display: block;
width: min(720px, 100%);
aspect-ratio: 18 / 5;
border-radius: 8px;
margin: 0 auto 0rem auto;
background-image: url("images/banner720x200.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.info-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
/* margin-top: 1rem; */
margin-bottom: 1rem;
}
/* INFORMATION CARDS with dynamic column count to display 1-3 cards per row */
.info-cards:has(> .info-card:only-child) {
grid-template-columns: 1fr;
}
.info-cards:has(> .info-card:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.info-card {
background-color: var(--color-scheme-dark-card-bg);
border: 1px solid var(--color-scheme-dark-card-border);
border-radius: 8px;
padding: 1rem;
text-align: center;
color: var(--color-scheme-dark-text);
font-size: 1.1rem;
font-weight: 600;
}
/* @MEDIA Responsive styles for info-card(s) located in stylesMedia.css */
/* PICTURE CARDS with dynamic column count to display 1-3 cards per row */
.picture-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.picture-cards:has(> .picture-card:only-child) {
grid-template-columns: 1fr;
}
.picture-cards:has(> .picture-card:nth-child(2):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.picture-card {
background-color: var(--color-scheme-dark-card-bg);
border: 1px solid var(--color-scheme-dark-card-border);
border-radius: 8px;
padding: 1rem;
overflow: hidden;
text-align: center;
color: var(--color-scheme-dark-text);
font-size: 1.1rem;
font-weight: 600;
}
.picture-image {
display: block;
width: 100%;
max-width: 100%;
border-radius: 6px;
box-shadow: 0 2px 2px var(--color-scheme-dark-shadow);
object-fit: cover;
transition: transform 0.3s ease;
}
.picture-card:hover .picture-image {
transform: scale(1.05);
}
/* @MEDIA responsive styles for picture-cards to show 1 per row on mobile located in stylesMedia.css */