/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Marquee" (blue) template — typography, light chrome navbar with nested dropdown + in-page theme switcher, dark textured page banner, hero image carousel, 3-tab portfolio + independent lightboxes, sidebar widgets, 3-column footer. Loads after bootstrap.min.css. Used by: index.html, left-sidebar.html, right-sidebar.html, no-sidebar.html, portfolio.html */ /* Palette + metrics */ :root { --accent: #1c94e6; --accent-hover: #2ca4f6; --accent-active: #0c84d6; --ink: #262626; --body-copy: #8c8c8c; --paper: #ffffff; --paper-alt: #f5f5f5; --hairline: #e8e8e8; } /* In-page theme preview: the navbar swatches set data-theme on so all seven palettes can be compared without opening another build. Blue is the default (:root above); green and red mirror the two real variant folders (bs5/marquee/green|red). Purple/amber/teal/rose are four invented palettes in the same family — each is the blue accent's own hex triplet (1c, 94, e6) rotated across the R/G/B channels, so every invented swatch is a mathematical sibling of the blue default. Every block overrides all three accent custom properties the theme reads, using the same +/-0x10-per-channel hover/active offset the real green and red variants already use. */ :root[data-theme="green"] { --accent: #91b362; --accent-hover: #a1c372; --accent-active: #81a352; } :root[data-theme="red"] { --accent: #ec1f1f; --accent-hover: #fc2f2f; --accent-active: #dc0f0f; } :root[data-theme="purple"] { --accent: #941ce6; --accent-hover: #a42cf6; --accent-active: #840cd6; } :root[data-theme="amber"] { --accent: #e6941c; --accent-hover: #f6a42c; --accent-active: #d6840c; } :root[data-theme="teal"] { --accent: #1ce694; --accent-hover: #2cf6a4; --accent-active: #0cd684; } :root[data-theme="rose"] { --accent: #e61c94; --accent-hover: #f62ca4; --accent-active: #d60c84; } /* Base typography */ body { background-color: var(--paper-alt); background-image: url("images/bg01.jpg"); background-repeat: repeat; font-family: 'Open Sans', sans-serif; font-size: 1.05rem; line-height: 1.75; color: var(--body-copy); } h1, h2, h3, h4, h5, h6 { font-weight: 300; color: var(--ink); } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } /* Shared heading block used above every section's body copy */ .section-header { margin-bottom: 1.5em; } .section-title { font-size: 1.75em; font-weight: 300; } /* Buttons (flat, italic — the original ships no rounded corners anywhere) */ .btn-accent { padding: 0.9em 1.6em; font-style: italic; color: #fff; background-color: var(--accent); border: 0; border-radius: 0; transition: background-color 0.25s ease-in-out; } .btn-accent:hover, .btn-accent:focus { color: #fff; background-color: var(--accent-hover); } .btn-accent:active { background-color: var(--accent-active); } /* Navbar */ .site-navbar { padding: 1.5em 0; background-color: var(--paper); } .site-navbar .site-logo { font-size: 1.75em; font-weight: 300; letter-spacing: -0.5px; color: var(--ink); } .site-navbar .nav-link { padding: 0 1em 0.5em; font-size: 1.05em; font-weight: 300; font-style: italic; color: #a2a2a2; border-bottom: 4px solid transparent; transition: color 0.25s ease-in-out; } .site-navbar .nav-link:hover, .site-navbar .nav-link:focus { color: var(--ink); } .site-navbar .nav-link.active { color: var(--ink); border-bottom-color: var(--accent); } .site-navbar .dropdown-menu { min-width: 13em; padding: 1.25em; background-color: rgba(255, 255, 255, 0.97); border: 0; border-radius: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .site-navbar .dropdown-item { padding: 0.4em 0; font-style: italic; font-weight: 300; color: #a2a2a2; background-color: transparent; } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { color: var(--ink); background-color: transparent; } /* Nested dropdown (Bootstrap 5 ships one level only — this adds a second) */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -0.5em; } @media (max-width: 767.98px) { .site-navbar .navbar-collapse { margin-top: 1em; } .dropdown-submenu > .dropdown-menu { position: static; margin-left: 1em; box-shadow: none; } } /* Theme picker — sits beside the nav links inside the same collapsible area, so it's reachable at every width: inline in the navbar at md+, and one tap into the toggler below md. The active swatch gets an ink-colored ring; each swatch's fill is a static hex (not var(--accent)) so all seven stay visible regardless of which theme is currently applied. */ .theme-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 0; padding: 0.6em 0 0.6em 1.5em; list-style: none; } .theme-picker .theme-swatch { width: 1.05em; height: 1.05em; padding: 0; border: solid 2px var(--hairline); border-radius: 50%; cursor: pointer; transition: border-color 0.25s ease-in-out, transform 0.25s ease-in-out; } .theme-picker .theme-swatch:hover, .theme-picker .theme-swatch:focus { border-color: #a2a2a2; } .theme-picker .theme-swatch.is-active { border-color: var(--ink); transform: scale(1.15); } .theme-swatch[data-theme-choice="blue"] { background-color: #1c94e6; } .theme-swatch[data-theme-choice="green"] { background-color: #91b362; } .theme-swatch[data-theme-choice="red"] { background-color: #ec1f1f; } .theme-swatch[data-theme-choice="purple"] { background-color: #941ce6; } .theme-swatch[data-theme-choice="amber"] { background-color: #e6941c; } .theme-swatch[data-theme-choice="teal"] { background-color: #1ce694; } .theme-swatch[data-theme-choice="rose"] { background-color: #e61c94; } @media (max-width: 767.98px) { .theme-picker { padding-left: 0; } } /* Page banner (dark textured strip under the navbar — every page) */ .page-banner { padding: 3em 1.5em; background-color: #101010; background-image: url("images/bg02.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } .page-banner-title { margin: 0; font-size: 1.75em; font-weight: 300; color: #fff; } .page-banner-subtitle { margin: 0.5em 0 0; font-weight: 300; color: #727272; } @media (min-width: 768px) { .page-banner { display: flex; align-items: center; justify-content: space-between; padding: 2.5em 3em; } .page-banner-subtitle { margin: 0; } } /* Hero carousel (homepage only) */ .hero-carousel { aspect-ratio: 1200 / 635; overflow: hidden; background-color: var(--paper-alt); } .hero-carousel .carousel-item, .hero-carousel .carousel-item img { height: 100%; } .hero-carousel .carousel-item img { width: 100%; object-fit: cover; } .hero-caption { right: auto; bottom: 0; left: 0; max-width: 32em; padding: 1.5em 2em; text-align: left; color: var(--ink); background-color: rgba(255, 255, 255, 0.92); } .hero-caption .section-title { margin-bottom: 0.4em; letter-spacing: -1px; } .hero-caption p { margin-bottom: 1em; } @media (max-width: 767.98px) { .hero-carousel { aspect-ratio: 4 / 5; } .hero-caption { right: 0; max-width: none; padding: 1.25em; } } /* Page main content wrapper (sidebar/no-sidebar/portfolio pages) */ .page-main { padding: 3.5em 0 1em; background-color: var(--paper); } /* Sidebar widgets (left/right-sidebar pages) */ .sidebar-widget + .sidebar-widget { margin-top: 3em; } .sidebar-widget-title { font-size: 1.3em; margin-bottom: 0.75em; } .sidebar-post-list { margin: 0; padding: 0; list-style: none; } .sidebar-post-list li { padding: 1.25em 0; border-top: 1px solid var(--hairline); } .sidebar-post-list li:first-child { padding-top: 0; border-top: 0; } .sidebar-post-list a { color: #6e6d6d; } .sidebar-post-list a:hover { text-decoration: underline; } /* Small-print qualifier under a list item's link (e.g. "Common", "Optional") */ .sidebar-post-list .meta { display: block; margin-top: 0.4em; font-size: 0.9em; color: #b6b6b6; } .sidebar-link-list { margin: 0; padding: 0; list-style: none; } .sidebar-link-list li { padding: 0.75em 0; border-top: 1px solid var(--hairline); } .sidebar-link-list li:first-child { padding-top: 0; border-top: 0; } .sidebar-link-list a { color: #8d8d8d; text-decoration: underline; } .sidebar-link-list a:hover { text-decoration: none; } /* Content article (sidebar/no-sidebar pages) */ .content-article .lead-image { float: left; width: 260px; margin: 0 2em 1em 0; } @media (max-width: 575.98px) { .content-article .lead-image { float: none; width: 100%; margin: 0 0 1.5em; } } /* Portfolio tabs */ .portfolio-tabs { justify-content: center; margin-bottom: 2em; border-bottom: 0; } .portfolio-tabs .nav-link { margin: 0 0.5em; padding: 0.7em 1em; font-size: 1.1em; font-style: italic; color: #787878; background-color: transparent; border: 0; border-radius: 0; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } .portfolio-tabs .nav-link:hover, .portfolio-tabs .nav-link.active { color: #454545; background-color: #ededed; } @media (max-width: 575.98px) { .portfolio-tabs { flex-direction: column; } .portfolio-tabs .nav-link { display: block; margin: 0 0 0.3em; text-align: center; } } /* Portfolio gallery + lightbox */ .gallery-item { display: block; overflow: hidden; } /* Square crop keeps the grid even across all three tabs, whose source photos mix landscape (Places), portrait (Portraits) and square-ish (Objects) orientations. */ .gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 0.35s ease-in-out; } .gallery-item:hover img { transform: scale(1.05); } .lightbox-modal .modal-content { background-color: var(--paper); border-radius: 0; } .lightbox-modal .carousel-item img { max-height: 75vh; object-fit: contain; } .lightbox-modal .carousel-caption { position: static; padding: 0.75em 0; font-style: italic; color: var(--ink); } .lightbox-modal .carousel-caption p { margin: 0; } .back-to-top { display: block; margin-top: 1em; text-align: center; } @media (min-width: 768px) { .back-to-top { display: none; } } /* Footer (every page) */ .site-footer { padding: 5em 0 2em; background-color: var(--paper); background-image: url("images/bg01.jpg"); } .footer-heading { font-size: 1.4em; margin-bottom: 0.75em; } .footer-post-list { margin: 0; padding: 0; list-style: none; } .footer-post-list li { position: relative; margin-bottom: 1.1em; padding-left: 5.5em; } /* Short category label ("Home", "Grid", "Nav") in place of a post date */ .footer-post-list .tag { position: absolute; left: 0; top: 0; color: #b3b3b3; } .footer-post-list a { color: #8d8d8d; text-decoration: underline; } .footer-post-list a:hover { text-decoration: none; } .footer-social-list { margin: 0; padding: 0; list-style: none; } .footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-right: 0.5em; color: #fff; background-color: #c0c0c0; transition: background-color 0.25s ease-in-out; } .footer-social-icon:hover { color: #fff; background-color: #a0a0a0; } .footer-copyright { padding-top: 2.5em; margin-top: 2.5em; text-align: center; color: #b8b8b8; border-top: 1px solid var(--hairline); }