1350 lines
31 KiB
SCSS
1350 lines
31 KiB
SCSS
/*
|
|
CollectionBuilder Custom SCSS
|
|
*/
|
|
|
|
/* ============================================================================
|
|
DESIGN SYSTEM VARIABLES
|
|
============================================================================ */
|
|
|
|
:root {
|
|
/* COLORS - Base Palette */
|
|
--bg-black: #000000;
|
|
--bg-soft-black: #0e0e0e;
|
|
--text-white: #f5f5f5;
|
|
--text-muted: #bfbfbf;
|
|
--border-white: #ffffff;
|
|
|
|
/* COLORS */
|
|
--accent-blue: #4da3ff;
|
|
--accent-blue-dim: #3d8ace;
|
|
--accent-blue-subtle: rgba(77, 163, 255, 0.15);
|
|
|
|
/* TYPOGRAPHY - Font Sizes */
|
|
--text-xs: 0.7rem; /* labels, captions */
|
|
--text-sm: 0.8rem; /* small body, metadata */
|
|
--text-base: 0.98rem; /* body text */
|
|
--text-lg: 1.1rem; /* large body */
|
|
--text-xl: 1.25rem; /* page titles (non-home) */
|
|
--text-2xl: 1.5rem; /* section headers */
|
|
--text-3xl: clamp(2rem, 3.4vw, 3rem); /* home title */
|
|
|
|
/* TYPOGRAPHY - Weights & Spacing */
|
|
--font-normal: 400;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
--letter-spacing-tight: 0.04em;
|
|
--letter-spacing-normal: 0.08em;
|
|
--letter-spacing-wide: 0.14em;
|
|
--letter-spacing-wider: 0.16em;
|
|
--letter-spacing-widest: 0.18em;
|
|
|
|
/* SPACING SCALE */
|
|
--space-xs: 0.25rem; /* 4px */
|
|
--space-sm: 0.5rem; /* 8px */
|
|
--space-md: 1rem; /* 16px */
|
|
--space-lg: 1.5rem; /* 24px */
|
|
--space-xl: 2rem; /* 32px */
|
|
--space-2xl: 2.5rem; /* 40px */
|
|
--space-3xl: 3rem; /* 48px */
|
|
|
|
/* BORDERS & RADIUS */
|
|
--border-radius: 4px;
|
|
--border-radius-lg: 10px;
|
|
--border-width: 1px;
|
|
--border-color-subtle: rgba(255, 255, 255, 0.18);
|
|
--border-color-normal: rgba(255, 255, 255, 0.35);
|
|
--border-color-strong: rgba(255, 255, 255, 0.75);
|
|
|
|
/* OPACITY LEVELS */
|
|
--opacity-subtle: 0.15;
|
|
--opacity-muted: 0.35;
|
|
--opacity-normal: 0.65;
|
|
--opacity-strong: 0.85;
|
|
--opacity-full: 1;
|
|
|
|
/* TRANSITIONS */
|
|
--transition-fast: 150ms ease-out;
|
|
--transition-normal: 200ms ease;
|
|
--transition-slow: 300ms ease;
|
|
|
|
/* OVERLAYS & BACKGROUNDS */
|
|
--overlay-dark: rgba(0, 0, 0, 0.45);
|
|
--overlay-darker: rgba(0, 0, 0, 0.75);
|
|
--overlay-darkest: rgba(0, 0, 0, 0.88);
|
|
}
|
|
|
|
/* ============================================================================
|
|
GLOBAL STYLES
|
|
============================================================================ */
|
|
|
|
body {
|
|
background-color: var(--bg-black);
|
|
color: var(--text-white);
|
|
}
|
|
|
|
input, textarea {
|
|
color: white;
|
|
}
|
|
|
|
::placeholder {
|
|
color: rgba(255, 255, 255, var(--opacity-normal));
|
|
}
|
|
|
|
/* ============================================================================
|
|
COLOR OVERRIDES
|
|
============================================================================ */
|
|
|
|
.navbar-brand,
|
|
.navbar-brand a,
|
|
.navbar-dark .navbar-brand,
|
|
.navbar-dark .navbar-brand:focus,
|
|
.navbar-dark .navbar-brand:hover {
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.text-muted {
|
|
color: rgba(255, 255, 255, var(--opacity-normal)) !important;
|
|
}
|
|
|
|
header .navbar-brand,
|
|
header .navbar-brand *,
|
|
#home-banner-logo {
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
header a,
|
|
header a * {
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
#header a,
|
|
#header a * {
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
#title a.text-dark,
|
|
#title a.text-dark:hover,
|
|
#title a.text-dark:focus {
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
FOOTER STYLING
|
|
============================================================================ */
|
|
|
|
.footer-top {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.footer-logo-spinner {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: var(--space-sm) 0;
|
|
}
|
|
|
|
.footer-logo-spinner video {
|
|
width: 300px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.footer-logo-spinner video {
|
|
animation: none !important;
|
|
filter: grayscale(30%);
|
|
}
|
|
}
|
|
|
|
#footer-credits {
|
|
text-align: center;
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
.bg-dark,
|
|
.navbar-dark.bg-dark,
|
|
footer.bg-dark {
|
|
background-color: var(--bg-black) !important;
|
|
}
|
|
|
|
footer,
|
|
#footer,
|
|
.site-footer,
|
|
#collection-footer {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white);
|
|
}
|
|
|
|
footer a {
|
|
color: var(--border-white);
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #cccccc;
|
|
}
|
|
|
|
/* ============================================================================
|
|
ITEM PAGE CARD FIXES
|
|
============================================================================ */
|
|
|
|
main[role="main"] .card.mb-4.text-center {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
main[role="main"] .card.mb-4.text-center img {
|
|
border-radius: var(--border-radius-lg);
|
|
border: var(--border-width) solid var(--border-color-subtle);
|
|
}
|
|
|
|
main[role="main"] .text-center small {
|
|
color: rgba(255, 255, 255, var(--opacity-strong)) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LINKS
|
|
============================================================================ */
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.18em;
|
|
}
|
|
|
|
.navbar a,
|
|
#footer-nav a,
|
|
.btn,
|
|
.btn a,
|
|
.card-title a,
|
|
.browse .card-title a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ============================================================================
|
|
BUTTONS - BASE STYLES
|
|
============================================================================ */
|
|
|
|
.btn,
|
|
.btn-outline-secondary,
|
|
.btn-outline-dark,
|
|
.btn-outline-primary {
|
|
background-color: transparent !important;
|
|
color: var(--border-white) !important;
|
|
border: var(--border-width) solid var(--border-white) !important;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus,
|
|
.btn-outline-secondary:hover,
|
|
.btn-outline-secondary:focus,
|
|
.btn-outline-dark:hover,
|
|
.btn-outline-dark:focus,
|
|
.btn-outline-primary:hover,
|
|
.btn-outline-primary:focus {
|
|
background-color: var(--border-white) !important;
|
|
color: var(--bg-black) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ============================================================================
|
|
BUTTONS - CARD SPECIFIC
|
|
============================================================================ */
|
|
|
|
.card .btn,
|
|
.bg-white .btn,
|
|
.bg-light .btn {
|
|
background-color: transparent !important;
|
|
color: var(--bg-black) !important;
|
|
border-color: var(--bg-black) !important;
|
|
}
|
|
|
|
.card .btn:hover,
|
|
.card .btn:focus,
|
|
.bg-white .btn:hover,
|
|
.bg-white .btn:focus,
|
|
.bg-light .btn:hover,
|
|
.bg-light .btn:focus {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
BUTTONS - BROWSE PAGE
|
|
============================================================================ */
|
|
|
|
#browse .input-group .btn {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
border: var(--border-width) solid var(--border-white) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
#browse .input-group .btn:hover,
|
|
#browse .input-group .btn:focus {
|
|
background-color: var(--border-white) !important;
|
|
color: var(--bg-black) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
BUTTONS - NAVBAR SEARCH
|
|
============================================================================ */
|
|
|
|
.navbar .input-group .btn {
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
background-color: transparent !important;
|
|
border: var(--border-width) solid var(--border-white) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.navbar .btn .bi-search,
|
|
.navbar .btn svg {
|
|
color: var(--border-white) !important;
|
|
fill: var(--border-white) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
BUTTONS - ITEM PAGE
|
|
============================================================================ */
|
|
|
|
body.item-page main[role="main"] .text-center a.btn {
|
|
display: inline-block;
|
|
background-color: transparent !important;
|
|
color: var(--border-white) !important;
|
|
border: var(--border-width) solid var(--border-white) !important;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
body.item-page main[role="main"] .text-center a.btn:hover,
|
|
body.item-page main[role="main"] .text-center a.btn:focus {
|
|
background-color: var(--border-white) !important;
|
|
color: var(--bg-black) !important;
|
|
}
|
|
|
|
main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary {
|
|
background-color: transparent !important;
|
|
color: var(--border-white) !important;
|
|
border: var(--border-width) solid var(--border-white) !important;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary:hover,
|
|
main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary:focus {
|
|
background-color: var(--border-white) !important;
|
|
color: var(--bg-black) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
MAP PAGE
|
|
============================================================================ */
|
|
|
|
.leaflet-fusesearch-panel .search-input {
|
|
color: var(--bg-black) !important;
|
|
background-color: var(--border-white) !important;
|
|
border: var(--border-width) solid #00000033;
|
|
}
|
|
|
|
.leaflet-fusesearch-panel .search-input::placeholder {
|
|
color: #555555 !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
CAROUSEL BUTTONS
|
|
============================================================================ */
|
|
|
|
.carousel .btn,
|
|
.carousel .btn-outline-primary {
|
|
color: var(--border-white) !important;
|
|
border: var(--border-width) solid var(--border-white) !important;
|
|
background: rgba(0, 0, 0, 0.55) !important;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.carousel .btn:hover,
|
|
.carousel .btn-outline-primary:hover {
|
|
background: var(--border-white) !important;
|
|
color: var(--bg-black) !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
TYPOGRAPHY
|
|
============================================================================ */
|
|
|
|
main h1,
|
|
main h2,
|
|
main h3 {
|
|
letter-spacing: var(--letter-spacing-tight);
|
|
}
|
|
|
|
.section-label {
|
|
font-size: var(--text-sm);
|
|
letter-spacing: var(--letter-spacing-wider);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
main p {
|
|
font-size: var(--text-base);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
#metadata p,
|
|
#metadata li {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#metadata strong {
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
text-transform: uppercase;
|
|
font-size: var(--text-sm);
|
|
}
|
|
|
|
/* ============================================================================
|
|
HOME BANNER
|
|
============================================================================ */
|
|
|
|
#home-banner {
|
|
position: relative;
|
|
min-height: 380px;
|
|
max-height: 580px;
|
|
padding: var(--space-3xl) 0 var(--space-2xl);
|
|
background-color: var(--bg-black);
|
|
}
|
|
|
|
#home-title-box {
|
|
position: relative;
|
|
}
|
|
|
|
#home-title-box > .p-2 {
|
|
display: inline-block;
|
|
text-align: left;
|
|
padding: var(--space-lg) var(--space-xl) !important;
|
|
margin-left: var(--space-lg);
|
|
background: var(--overlay-darkest) !important;
|
|
border-radius: var(--border-radius-lg);
|
|
border: var(--border-width) solid rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
#home-title-box h1 {
|
|
margin: 0;
|
|
font-size: var(--text-3xl);
|
|
text-align: left;
|
|
letter-spacing: var(--letter-spacing-tight);
|
|
font-weight: var(--font-bold);
|
|
}
|
|
|
|
#home-title-box h1 a {
|
|
color: var(--border-white) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#home-title-box p {
|
|
margin: var(--space-sm) 0 0;
|
|
font-size: 0.95rem;
|
|
opacity: var(--opacity-strong);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
#home-title-box {
|
|
text-align: center;
|
|
}
|
|
#home-title-box > .p-2 {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
#home-banner {
|
|
position: relative;
|
|
}
|
|
|
|
#home-banner .featured-image-label {
|
|
position: absolute;
|
|
bottom: 0.75rem;
|
|
right: var(--space-md);
|
|
padding: 0.15rem var(--space-md);
|
|
background: var(--overlay-darker);
|
|
}
|
|
|
|
#home-banner .featured-image-label a {
|
|
font-size: var(--text-xs);
|
|
letter-spacing: var(--letter-spacing-widest);
|
|
text-transform: uppercase;
|
|
font-weight: var(--font-bold);
|
|
color: var(--border-white) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#home-banner .featured-image-label a:hover,
|
|
#home-banner .featured-image-label a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================================================
|
|
PAGE HEADERS (NON-HOME)
|
|
============================================================================ */
|
|
|
|
main #title h1 {
|
|
margin: 0;
|
|
font-size: var(--text-xl);
|
|
letter-spacing: var(--letter-spacing-tight);
|
|
font-weight: var(--font-bold);
|
|
text-transform: none;
|
|
}
|
|
|
|
main #title h1 a {
|
|
color: var(--border-white) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
main #title p {
|
|
margin: var(--space-sm) 0 0;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
main #title {
|
|
padding: 1.1rem 0 0.8rem;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
main #title h1 {
|
|
font-size: var(--text-xl);
|
|
}
|
|
}
|
|
|
|
#title {
|
|
padding: var(--space-lg) 0 1.1rem;
|
|
border-bottom: var(--border-width) solid var(--border-color-subtle);
|
|
margin-bottom: var(--space-lg);
|
|
}
|
|
|
|
#title h1 {
|
|
margin: 0;
|
|
font-size: var(--text-xl);
|
|
letter-spacing: var(--letter-spacing-tight);
|
|
font-weight: var(--font-bold);
|
|
text-transform: none;
|
|
}
|
|
|
|
#title h1 a {
|
|
color: var(--border-white) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#title p {
|
|
margin: var(--space-sm) 0 0;
|
|
font-size: 0.9rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
#title {
|
|
padding: 1.1rem 0 0.8rem;
|
|
margin-bottom: var(--space-md);
|
|
}
|
|
#title h1 {
|
|
font-size: var(--text-xl);
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
PORTFOLIO RETURN LINK
|
|
============================================================================ */
|
|
|
|
.portfolio-site-link {
|
|
position: absolute;
|
|
top: var(--space-md);
|
|
right: 1.25rem;
|
|
z-index: 10;
|
|
|
|
font-size: var(--text-xs);
|
|
letter-spacing: var(--letter-spacing-wide);
|
|
text-transform: uppercase;
|
|
font-weight: var(--font-semibold);
|
|
|
|
color: rgba(255, 255, 255, var(--opacity-strong));
|
|
text-decoration: none;
|
|
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: var(--border-width) solid var(--border-color-normal);
|
|
border-radius: var(--border-radius);
|
|
background: var(--overlay-dark);
|
|
}
|
|
|
|
.portfolio-site-link:hover,
|
|
.portfolio-site-link:focus {
|
|
color: var(--border-white);
|
|
border-color: var(--border-color-strong);
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.portfolio-site-link {
|
|
font-size: 0.65rem;
|
|
padding: 0.3rem var(--space-sm);
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
MODAL STYLES
|
|
============================================================================ */
|
|
|
|
.modal-content .card.mb-4.text-center small {
|
|
color: var(--bg-black) !important;
|
|
}
|
|
|
|
.modal-header .small.text-muted {
|
|
color: #555555 !important;
|
|
}
|
|
|
|
.modal-content .card.mb-4.text-center .btn-group .btn-outline-primary {
|
|
background-color: transparent !important;
|
|
color: var(--bg-black) !important;
|
|
border: var(--border-width) solid var(--bg-black) !important;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:hover,
|
|
.modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:focus {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.modal-body .btn.btn-outline-secondary.btn-sm {
|
|
background-color: transparent !important;
|
|
color: var(--bg-black) !important;
|
|
border: var(--border-width) solid var(--bg-black) !important;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.modal-body .btn.btn-outline-secondary.btn-sm:hover,
|
|
.modal-body .btn.btn-outline-secondary.btn-sm:focus {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.modal-footer .btn.btn-secondary,
|
|
.modal-footer .btn.btn-primary {
|
|
background-color: transparent !important;
|
|
color: var(--bg-black) !important;
|
|
border: var(--border-width) solid var(--bg-black) !important;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.modal-footer .btn.btn-secondary:hover,
|
|
.modal-footer .btn.btn-secondary:focus {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.modal-footer .btn.btn-primary:hover,
|
|
.modal-footer .btn.btn-primary:focus {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.modal,
|
|
.modal * ,
|
|
.modal-backdrop {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary {
|
|
background-color: transparent !important;
|
|
color: var(--bg-black) !important;
|
|
border: var(--border-width) solid var(--bg-black) !important;
|
|
border-radius: var(--border-radius);
|
|
text-decoration: none;
|
|
}
|
|
|
|
html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:hover,
|
|
html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:focus {
|
|
background-color: var(--bg-black) !important;
|
|
color: var(--border-white) !important;
|
|
}
|
|
|
|
.modal .card.mb-4.text-center {
|
|
transition: none !important;
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.modal .card.mb-4.text-center:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
CARD ANIMATIONS
|
|
============================================================================ */
|
|
|
|
main[role="main"] .card {
|
|
transition:
|
|
transform var(--transition-fast),
|
|
box-shadow var(--transition-fast),
|
|
border-color var(--transition-fast);
|
|
}
|
|
|
|
main[role="main"] .card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
|
|
border-color: var(--border-white);
|
|
}
|
|
|
|
/* Disable animations for compound cards */
|
|
main[role="main"] .row.row-cols-lg-4.g-2 .card,
|
|
main[role="main"] .row.row-cols-lg-4.g-2 .card:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
border-color: var(--bg-black) !important;
|
|
}
|
|
|
|
.modal .card,
|
|
.modal .card:hover {
|
|
transform: none !important;
|
|
box-shadow: none !important;
|
|
border-color: inherit !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
QUOTE STYLES - FOUR VARIATIONS
|
|
============================================================================ */
|
|
|
|
/* VARIATION 1: Line Accent (blue left border) */
|
|
.quote-line {
|
|
margin: var(--space-xl) 0;
|
|
padding-left: var(--space-lg);
|
|
border-left: 4px solid var(--text-white);
|
|
color: var(--text-white);
|
|
}
|
|
|
|
.quote-line p {
|
|
margin: var(--space-sm) 0;
|
|
font-size: var(--text-base);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.quote-line .quote-attrib {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
margin-top: var(--space-md);
|
|
}
|
|
|
|
/* VARIATION 2: Solid Box (white background) */
|
|
.quote-box {
|
|
background-color: var(--text-white);
|
|
color: var(--bg-black);
|
|
padding: var(--space-xl) var(--space-xl);
|
|
margin: var(--space-2xl) 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.quote-box .quote-text {
|
|
font-size: var(--text-lg);
|
|
font-style: italic;
|
|
margin-bottom: var(--space-md);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.quote-box .quote-attrib {
|
|
font-size: var(--text-sm);
|
|
text-align: right;
|
|
color: #555555;
|
|
}
|
|
|
|
/* VARIATION 3: Outline Box (transparent with blue border) */
|
|
.quote-outline {
|
|
background-color: transparent;
|
|
border: var(--border-width) solid var(--border-white);
|
|
padding: var(--space-xl) var(--space-xl);
|
|
margin: var(--space-2xl) 0;
|
|
border-radius: var(--border-radius);
|
|
position: relative;
|
|
}
|
|
|
|
.quote-outline::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: -0.5rem;
|
|
left: var(--space-lg);
|
|
font-size: 3rem;
|
|
line-height: 1;
|
|
color: var(--text-white);
|
|
background: var(--bg-black);
|
|
padding: 0 var(--space-sm);
|
|
}
|
|
|
|
.quote-outline .quote-text {
|
|
font-size: var(--text-lg);
|
|
font-style: italic;
|
|
color: var(--text-white);
|
|
margin-bottom: var(--space-md);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.quote-outline .quote-attrib {
|
|
font-size: var(--text-sm);
|
|
text-align: right;
|
|
color: var(--text-white);
|
|
font-style: normal;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
}
|
|
|
|
/* VARIATION 4: Minimal (subtle background glow) */
|
|
.quote-minimal {
|
|
background: var(--accent-blue-subtle);
|
|
border-left: 3px solid var(--accent-blue);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
margin: var(--space-xl) 0;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.quote-minimal .quote-text {
|
|
font-size: var(--text-base);
|
|
font-style: italic;
|
|
color: var(--text-white);
|
|
margin-bottom: var(--space-sm);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.quote-minimal .quote-attrib {
|
|
font-size: var(--text-xs);
|
|
color: var(--accent-blue);
|
|
font-style: normal;
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--letter-spacing-wide);
|
|
}
|
|
|
|
blockquote {
|
|
max-width: 700px;
|
|
}
|
|
|
|
/* ============================================================================
|
|
TABLE OF CONTENTS (ABOUT PAGE)
|
|
============================================================================ */
|
|
|
|
#about-toc {
|
|
background-color: var(--bg-black);
|
|
padding: var(--space-md);
|
|
margin-bottom: var(--space-xl);
|
|
position: sticky;
|
|
top: var(--space-md);
|
|
}
|
|
|
|
#about-toc,
|
|
#about-toc * {
|
|
font-style: normal;
|
|
}
|
|
|
|
#about-toc-title .btn {
|
|
background-color: var(--bg-black);
|
|
color: var(--border-white);
|
|
width: 100%;
|
|
text-align: left;
|
|
padding: var(--space-sm) 0.75rem;
|
|
}
|
|
|
|
#about-toc-title .btn:hover,
|
|
#about-toc-title .btn:focus {
|
|
background-color: #111111;
|
|
}
|
|
|
|
#about-toc-title svg {
|
|
float: right;
|
|
fill: var(--border-white);
|
|
}
|
|
|
|
#about-toc-list {
|
|
background-color: var(--bg-black);
|
|
padding-top: var(--space-md);
|
|
}
|
|
|
|
#about-toc-list ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
#about-toc-list li {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
/* TOC links */
|
|
#about-toc-list a {
|
|
color: var(--border-white);
|
|
text-decoration: none;
|
|
font-size: var(--text-sm);
|
|
line-height: 1.3;
|
|
opacity: 0.3;
|
|
position: relative;
|
|
padding-left: 0.75rem;
|
|
}
|
|
|
|
#about-toc-list a:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Active section indicator */
|
|
#about-toc-list a.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
#about-toc-list a.active::before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.25em;
|
|
height: 1em;
|
|
width: 3px;
|
|
background-color: var(--border-white);
|
|
}
|
|
|
|
/* Nested hierarchy */
|
|
#about-toc-list ul ul {
|
|
padding-left: var(--space-md);
|
|
border-left: var(--border-width) solid #444444;
|
|
margin-top: var(--space-xs);
|
|
align-items: left;
|
|
}
|
|
|
|
#about-toc-list ul ul a {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#about-toc {
|
|
position: sticky;
|
|
bottom: var(--space-md);
|
|
margin-bottom: 0;
|
|
z-index: 998;
|
|
max-width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
ABOUT PAGE LAYOUT
|
|
============================================================================ */
|
|
|
|
#about-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr;
|
|
gap: var(--space-xl);
|
|
}
|
|
|
|
#about-contents-wrapper {
|
|
max-width: 800px;
|
|
padding: 0 var(--space-xl);
|
|
margin: 0 auto;
|
|
}
|
|
#about-contents-wrapper ul {
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
#about-contents-wrapper li {
|
|
font-size: var(--text-base);
|
|
}
|
|
|
|
#about-contents-wrapper p {
|
|
max-width: 70ch;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
#about-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
#about-contents-wrapper {
|
|
max-width: 100%;
|
|
padding: var(--space-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
WRAPPED IMAGES
|
|
============================================================================ */
|
|
|
|
.float-img {
|
|
max-width: 40%;
|
|
margin: var(--space-sm) var(--space-lg) var(--space-md) 0;
|
|
}
|
|
|
|
.float-left {
|
|
float: left;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
margin: var(--space-sm) 0 var(--space-md) var(--space-lg);
|
|
}
|
|
|
|
.float-img img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.float-img .caption {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: var(--space-xs);
|
|
}
|
|
|
|
.clearfix::after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.float-img {
|
|
float: none;
|
|
max-width: 100%;
|
|
margin: var(--space-md) 0;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
TECHNICAL SECTION
|
|
============================================================================ */
|
|
|
|
#technical {
|
|
background-color: #f8f9fa;
|
|
color: var(--bg-black);
|
|
}
|
|
|
|
#technical .bg-white {
|
|
background-color: var(--border-white) !important;
|
|
color: var(--bg-black) !important;
|
|
}
|
|
|
|
#technical h3 {
|
|
color: var(--bg-black);
|
|
}
|
|
|
|
#technical p {
|
|
color: var(--bg-black);
|
|
}
|
|
|
|
/* ============================================================================
|
|
DONOR LIST
|
|
============================================================================ */
|
|
|
|
.donor-list {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.donor-list em {
|
|
font-size: 0.95em;
|
|
color: #555;
|
|
}
|
|
|
|
/* ============================================================================
|
|
NAVIGATION
|
|
============================================================================ */
|
|
|
|
/* Hamburger menu button */
|
|
.navbar-toggler {
|
|
background-color: transparent !important;
|
|
border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
|
|
border-radius: var(--border-radius);
|
|
padding: var(--space-sm) 0.65rem;
|
|
transition: all var(--transition-normal);
|
|
}
|
|
|
|
.navbar-toggler:hover,
|
|
.navbar-toggler:focus {
|
|
border-color: rgba(255, 255, 255, 0.75) !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Hamburger menu button */
|
|
.navbar-toggler {
|
|
background-color: transparent !important;
|
|
border: var(--border-width) solid rgba(255, 255, 255, 0.35) !important;
|
|
border-radius: var(--border-radius);
|
|
padding: var(--space-sm) 0.65rem;
|
|
transition: all var(--transition-normal);
|
|
}
|
|
|
|
.navbar-toggler:hover,
|
|
.navbar-toggler:focus {
|
|
border-color: rgba(255, 255, 255, 0.75) !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Hamburger icon - custom 3 lines */
|
|
.navbar-toggler-icon {
|
|
background-image: none !important;
|
|
width: 20px;
|
|
height: 14px;
|
|
position: relative;
|
|
display: inline-block;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
/* Top line */
|
|
.navbar-toggler-icon::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 1px;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
transition: background-color var(--transition-normal);
|
|
}
|
|
|
|
/* Bottom line */
|
|
.navbar-toggler-icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 1px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(255, 255, 255, 0.85);
|
|
transition: background-color var(--transition-normal);
|
|
}
|
|
|
|
/* Middle line - using a span */
|
|
.navbar-toggler-icon {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
transparent 45%,
|
|
rgba(255, 255, 255, 0.85) 45%,
|
|
rgba(255, 255, 255, 0.85) 55%,
|
|
transparent 55%,
|
|
transparent 100%
|
|
) !important;
|
|
}
|
|
|
|
.navbar-toggler:hover .navbar-toggler-icon::before,
|
|
.navbar-toggler:hover .navbar-toggler-icon::after {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.navbar-toggler:hover .navbar-toggler-icon {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
transparent 45%,
|
|
#ffffff 45%,
|
|
#ffffff 55%,
|
|
transparent 55%,
|
|
transparent 100%
|
|
) !important;
|
|
}
|
|
|
|
.dropdown-header.nav-section-label {
|
|
font-size: var(--text-xs);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--letter-spacing-normal);
|
|
font-weight: var(--font-semibold);
|
|
color: rgba(0,0,0,0.6);
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.dropdown-header.nav-section-label:not(:first-child) {
|
|
margin-top: var(--space-sm);
|
|
border-top: var(--border-width) solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* ============================================================================
|
|
SPOTLIGHT FIXES
|
|
============================================================================ */
|
|
|
|
.spl-autofit {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ============================================================================
|
|
IMAGE CONTAINERS
|
|
============================================================================ */
|
|
|
|
.image-container {
|
|
text-align: center;
|
|
max-width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.image-container img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.image-container figcaption {
|
|
font-size: 0.85rem;
|
|
width: 100%;
|
|
margin-top: var(--space-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============================================================================
|
|
GLOBAL MOBILE OVERFLOW FIX
|
|
============================================================================ */
|
|
|
|
html {
|
|
overflow-x: hidden;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
max-width: 100vw;
|
|
min-width: 0;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main,
|
|
main > *:not(.dropdown-menu):not(.modal):not(#scroll-to-top) {
|
|
max-width: 100%;
|
|
}
|
|
|
|
img:not(#scroll-to-top *) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
figure {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
figure[style*="inline-block"] {
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
figure[style*="grid-template-columns"] {
|
|
display: block !important;
|
|
}
|
|
|
|
figure[style*="grid-template-columns"] > div {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
figure[style*="grid-template-columns"] img {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
SCROLL TO TOP - FULL STYLING (all viewports)
|
|
============================================================================ */
|
|
|
|
#scroll-to-top {
|
|
position: fixed;
|
|
bottom: 4.5rem;
|
|
right: 1rem;
|
|
z-index: 9999;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
#scroll-to-top:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* ============================================================================
|
|
LONG LINKS & BIBLIOGRAPHY - OVERFLOW FIX
|
|
============================================================================ */
|
|
|
|
a {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.bibliography,
|
|
h3 + ol,
|
|
h3 + ul,
|
|
h3 + p {
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.footnotes {
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.footnotes p,
|
|
.footnotes ol li {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.footnotes a {
|
|
display: inline;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.footnote-ref,
|
|
.footnote-backref {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
p, li, td {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* Tables */
|
|
table {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.footnotes p,
|
|
.footnotes ol li {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.footnotes a {
|
|
font-size: 0.8rem;
|
|
}
|
|
} |