/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Versa" (cyan) template — typography, fixed navbar + nested dropdown, dark-tint photo banner, post grid/pagination, footer, buttons, forms, the elements-page component set (lists, tables, boxes, wrapped images), and the in-page theme switcher (data-theme accent overrides + navbar swatch styles) that makes this a self-describing tour of the whole template. Loads after bootstrap.min.css. Used by: index.html, generic.html, elements.html */ /* Palette + metrics */ :root { --accent: #53bed5; --accent-rgb: 83, 190, 213; --ink: #404040; --ink-hover: #4d4d4d; --ink-active: #333333; --fg-light: #aaaaaa; --paper: #ffffff; --border: #dbdbdb; --border2: #f4f4f4; --border-tint: rgba(144, 144, 144, 0.075); --border-tint-strong: rgba(144, 144, 144, 0.2); --banner-tint-1: #333333; --banner-tint-2: #303030; --banner-tint-3: #2e2e2e; --twitter: #84dae7; --facebook: #75aae6; --instagram: #84c3e7; --youtube: #e78484; --navbar-height: 3.75rem; } /* In-page theme preview: the navbar swatches set data-theme on so all seven palettes can be compared without opening another build. Cyan is the default (:root above) since it's the native build; green and red mirror the two real variant folders (bs5/versa/green|red); violet, amber, rose, and indigo are four additional palettes in the same medium-saturation accent family, added so the switcher offers seven choices like the orbit/blue reference. Each block overrides both accent custom properties the theme reads. */ :root[data-theme="green"] { --accent: #61c190; --accent-rgb: 97, 193, 144; } :root[data-theme="red"] { --accent: #e66666; --accent-rgb: 230, 102, 102; } :root[data-theme="violet"] { --accent: #8b7fd6; --accent-rgb: 139, 127, 214; } :root[data-theme="amber"] { --accent: #dba54a; --accent-rgb: 219, 165, 74; } :root[data-theme="rose"] { --accent: #d6699a; --accent-rgb: 214, 105, 154; } :root[data-theme="indigo"] { --accent: #6a7fd6; --accent-rgb: 106, 127, 214; } /* Base typography */ html { scroll-behavior: smooth; scroll-padding-top: var(--navbar-height); } body { padding-top: var(--navbar-height); background: var(--paper); font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 1.125rem; line-height: 1.6; color: var(--ink); } h1, h2, h3, h4, h5, h6 { font-weight: 900; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.075em; color: var(--ink); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border-bottom: 0; color: inherit; text-decoration: none; } h2 { font-size: 1.5em; } h3 { font-size: 1.25em; } h4 { font-size: 1.05em; } h5 { font-size: 0.95em; } h6 { font-size: 0.8em; } a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; } a:hover { border-bottom-color: transparent; } blockquote { border-left: 4px solid var(--border); font-style: italic; } code { border: 1px solid var(--border); background: var(--border-tint); font-family: 'Courier New', monospace; } pre { font-family: 'Courier New', monospace; } pre code { display: block; padding: 1em 1.5em; line-height: 1.75; } .section-divider { margin: 3rem 0; border-color: var(--border); } @media (max-width: 1280px) { body { font-size: 1.05rem; } } @media (max-width: 767.98px) { body { padding-top: 2.75rem; font-size: 1rem; } } /* Navbar */ .site-navbar { min-height: var(--navbar-height); background: var(--paper); box-shadow: inset 0 -1px 0 0 var(--border); } .site-navbar .site-logo { font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; color: var(--ink); } .site-navbar .nav-link { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.075em; text-transform: uppercase; color: var(--ink); } .site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--accent); } .site-navbar .dropdown-menu { min-width: 13em; border: 1px solid var(--border); border-radius: 0; box-shadow: 0 0.125em 0.75em 0.125em rgba(0, 0, 0, 0.075); } .site-navbar .dropdown-item { padding: 0.6em 1.25em; font-size: 0.9rem; color: var(--ink); } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { color: var(--accent); background-color: var(--border-tint); } /* 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.6em; } @media (max-width: 991.98px) { .site-navbar .navbar-collapse { margin-top: 0.5em; } .dropdown-submenu > .dropdown-menu { position: static; margin-left: 1em; border: 0; box-shadow: none; } } /* Theme picker — seven accent swatches in the navbar; the active one gets a dark ring (versa's navbar is light, unlike orbit's dark chrome, so the ring uses --ink instead of white). Swatch colors mirror the :root[data-theme] overrides above. Lives inside the same collapsible #nav-links block as the nav links, so it's reachable at every width — inline on desktop, under the toggler on phones. */ .theme-picker { display: flex; 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 rgba(0, 0, 0, 0.15); 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: rgba(0, 0, 0, 0.4); } .theme-picker .theme-swatch.is-active { border-color: var(--ink); transform: scale(1.15); } .theme-swatch[data-theme-choice="cyan"] { background-color: #53bed5; } .theme-swatch[data-theme-choice="green"] { background-color: #61c190; } .theme-swatch[data-theme-choice="red"] { background-color: #e66666; } .theme-swatch[data-theme-choice="violet"] { background-color: #8b7fd6; } .theme-swatch[data-theme-choice="amber"] { background-color: #dba54a; } .theme-swatch[data-theme-choice="rose"] { background-color: #d6699a; } .theme-swatch[data-theme-choice="indigo"] { background-color: #6a7fd6; } @media (max-width: 991.98px) { .theme-picker { flex-wrap: wrap; padding: 0.75em 0 0.25em 0; } } /* Banner (dark-tint photo grid) */ .banner-grid { display: flex; flex-wrap: wrap; } .banner-item { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5rem 2rem; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Street-art source photos run busier and higher-contrast than typical stock imagery, so the tint sits well above the original 0.25 to keep white headline type legible over any of the seven palettes. */ .banner-item::before { content: ''; position: absolute; inset: 0; background-color: var(--banner-tint-1); opacity: 0.5; } .banner-item:nth-child(2)::before { background-color: var(--banner-tint-2); } .banner-item:nth-child(3)::before { background-color: var(--banner-tint-3); } .banner-item:nth-child(1) { background-image: url("../../images/hero.jpg"); } .banner-item:nth-child(2) { background-image: url("../../images/banner-nav.jpg"); } .banner-item:nth-child(3) { background-image: url("../../images/banner-grid.jpg"); } .banner-item-full { width: 100%; min-height: 60vh; } .banner-item-full h2 { font-size: 1.75em; } .banner-item-half { width: 50%; min-height: 42vh; } .banner-item-half h2 { font-size: 1.35em; } .banner-content { position: relative; z-index: 1; max-width: 30em; text-align: center; /* Extra insurance under the tint — busy mural photos can still wash out thin white type at the edges of the accent-colored dot on "i". */ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .banner-item h1, .banner-item h2, .banner-item h3 { color: #ffffff; } .banner-item h1 a, .banner-item h2 a, .banner-item h3 a { color: #ffffff; } /* Fixed-cover banner photos are fine on desktop; simplify to stacked full-width panels below tablet so text stays legible. */ @media (max-width: 767.98px) { .banner-item-full, .banner-item-half { width: 100%; min-height: 0; padding: 3rem 1.5rem; } } /* Page main wrapper */ .page-main { background: var(--paper); } .content-section { padding: 4rem 0; border-bottom: 1px solid var(--border); } .content-section-special { text-align: center; } .major-header { margin-bottom: 2rem; text-align: center; } .post-category { display: block; margin-bottom: 1em; font-size: 0.8em; font-weight: 900; letter-spacing: 0.075em; text-transform: uppercase; color: var(--fg-light); } .post-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0 0 1.5em; font-size: 0.8em; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-light); } .content-section:not(.content-section-special) .post-meta { justify-content: flex-start; } .post-meta li { padding: 0 1em; border-left: 1px solid var(--border); line-height: 1; } .post-meta li:first-child { padding-left: 0; border-left: 0; } .post-meta a { color: inherit; border-bottom: 0; } .post-meta a:hover { color: var(--accent); } .post-meta a i { margin-right: 0.4em; } .featured-post-copy { max-width: 46em; margin-bottom: 2rem; } /* Post grid */ .post-grid { border-top: 1px solid var(--border); } .post-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); } .post-card-body { padding: 1.75rem; } .post-card-body h2 { font-size: 1.15em; } .post-card .post-meta { justify-content: flex-start; } @media (min-width: 992px) { .post-card:nth-child(3n) { border-right: 0; } .post-card:nth-last-child(-n+3) { border-bottom: 0; } } @media (min-width: 768px) and (max-width: 991.98px) { .post-card:nth-child(2n) { border-right: 0; } .post-card:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 767.98px) { .post-card { border-right: 0; } .post-card:last-child { border-bottom: 0; } } /* Pagination */ .post-pagination-wrapper { margin-top: 1rem; } .pagination-demo-note { margin-bottom: 0.75rem; font-size: 0.8em; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-light); } .pagination { display: inline-flex; } .page-link { border-radius: 0; border-color: var(--border2); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); } .page-link:hover { background-color: var(--border-tint); color: var(--ink); } .page-link:focus { box-shadow: none; } .page-item.active .page-link { background-color: var(--ink); border-color: var(--ink); color: #ffffff; } .page-item.disabled .pagination-ellipsis { border-color: var(--border2); color: var(--fg-light); } @media (max-width: 480px) { .pagination li:not(:first-child):not(:last-child):not(.active) { display: none; } } /* Buttons */ .btn-accent, .btn-ghost { border-radius: 0; padding: 0.85em 2em; font-size: 0.85em; font-weight: 900; letter-spacing: 0.075em; text-transform: uppercase; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .btn-accent { background-color: var(--ink); border: 0; color: #ffffff; } .btn-accent:hover { background-color: var(--ink-hover); color: #ffffff; } .btn-accent:active { background-color: var(--ink-active); } .btn-ghost { background-color: transparent; border: 1px solid var(--border); color: var(--ink); } .btn-ghost:hover { background-color: var(--border-tint); color: var(--ink); } .btn-ghost:active { background-color: var(--border-tint-strong); } .text-white .btn-ghost { border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } .text-white .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } .btn-accent.disabled, .btn-accent:disabled, .btn-ghost.disabled, .btn-ghost:disabled { opacity: 0.25; } .action-stack .btn { width: 100%; } /* Forms */ .form-control, .form-select { border-radius: 0; border-color: var(--border); color: var(--ink); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25); } .form-control::placeholder { color: var(--fg-light); } .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25); } /* Footer */ .site-footer { background: var(--paper); } .footer-panel { padding: 3rem 1.25rem; } @media (min-width: 768px) { .footer-panel { padding: 4rem; } .footer-panel-bordered { border-right: 1px solid var(--border); } } .footer-copyright { padding: 2rem 1rem 4rem; border-top: 1px solid var(--border); text-align: center; } .footer-copyright p { font-size: 0.85em; color: var(--fg-light); } /* Icon link lists (footer social + elements-page icon demos) */ .icon-link-list { margin: 0; } .icon-link { display: inline-block; border-bottom: 0; } .icon-link-list-plain .icon-link { font-size: 1.15em; color: var(--fg-light); } .icon-link-list-plain .icon-link:hover { color: var(--ink); } .icon-link-list-badge .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2.125em; height: 2.125em; border-radius: 50%; background-color: var(--ink); color: #ffffff; transition: background-color 0.2s ease-in-out; } .icon-link-list-badge .icon-link:hover { background-color: var(--ink-hover); } .icon-link-list-badge .icon-link-twitter { background-color: var(--twitter); } .icon-link-list-badge .icon-link-facebook { background-color: var(--facebook); } .icon-link-list-badge .icon-link-instagram { background-color: var(--instagram); } .icon-link-list-badge .icon-link-youtube { background-color: var(--youtube); } /* Lists (elements page) */ .list-divided { list-style: none; padding-left: 0; } .list-divided li { padding: 0.5em 0; border-top: 1px solid var(--border); } .list-divided li:first-child { border-top: 0; padding-top: 0; } dl dt { font-weight: 900; } /* Tables (elements page) */ .table { color: var(--ink); } .table thead th { border-bottom-width: 2px; font-weight: 900; } /* Box (elements page) */ .info-box { padding: 1.5rem; margin-bottom: 1.75rem; border: 1px solid var(--border); } /* Images (elements page) */ .image-grid { margin-bottom: 1.75rem; } .text-wrap-image { max-width: 40%; }