/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Focal" (cyan) template — dark card-on-texture chrome, ribbon header, hero banner, feature columns, alternating showcase rows, contact footer, the Elements style-guide page (type, lists, table, buttons, form, images), and the in-page theme switcher (data-theme accent overrides + 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: #689aa0; --accent-rgb: 104, 154, 160; --accent-hover: #78a4aa; --accent-active: #5c8d92; --page-bg: #23141f; --card-bg: #1f1e21; --panel-bg: #19181a; --fg: #a2a2a2; --fg-bold: #ffffff; --fg-light: #757575; --border: #313032; --border-strong: #4c4b4d; --border-soft: rgba(207, 201, 214, 0.035); --border-soft-hover: rgba(207, 201, 214, 0.1); --radius: 8px; } /* In-page theme preview: the header swatches set data-theme on so all seven palettes can be compared without opening another build. Cyan is the default (:root above); green and red mirror the two real variant folders (bs5/focal/green|red); violet, amber, slate, and rose are four additional palettes in the same dusty/muted accent family, so the switcher offers seven choices like the orbit/blue and apex/blue references. Each block overrides all four accent custom properties the theme reads — --page-bg/--card-bg/--panel-bg/--fg-* stay fixed across every palette, so the dark card's own contrast never has to be re-checked per theme, only the accent's contrast against it. */ :root[data-theme="green"] { --accent: #669161; --accent-rgb: 102, 145, 97; --accent-hover: #739e6e; --accent-active: #5b8157; } :root[data-theme="red"] { --accent: #ad5858; --accent-rgb: 173, 88, 88; --accent-hover: #b66969; --accent-active: #9e4d4d; } :root[data-theme="violet"] { --accent: #8b7cad; --accent-rgb: 139, 124, 173; --accent-hover: #9889ba; --accent-active: #7e6fa0; } :root[data-theme="amber"] { --accent: #ad8a58; --accent-rgb: 173, 138, 88; --accent-hover: #ba9765; --accent-active: #a07d4b; } :root[data-theme="slate"] { --accent: #5878ad; --accent-rgb: 88, 120, 173; --accent-hover: #6585ba; --accent-active: #4b6ba0; } :root[data-theme="rose"] { --accent: #ad588a; --accent-rgb: 173, 88, 138; --accent-hover: #ba6597; --accent-active: #a04b7d; } /* Base typography */ body { background-color: var(--page-bg); background-image: url("images/overlay1.png"), url("../../images/page-backdrop.jpg"); background-repeat: repeat, no-repeat; background-position: top left, top center; background-size: auto, cover; background-attachment: scroll, fixed; font-family: 'Lato', Helvetica, sans-serif; font-weight: 300; font-size: 1.05rem; line-height: 1.75; color: var(--fg); } /* Fixed backgrounds jank on touch devices — fall back to scroll */ @media (hover: none), (max-width: 767.98px) { body { background-attachment: scroll, scroll; } } h1, h2, h3, h4, h5, h6 { font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-bold); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } strong, b { font-weight: 300; color: var(--fg-bold); } a { color: inherit; text-decoration: none; border-bottom: dotted 1px; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; } a:hover { color: var(--accent) !important; border-bottom-color: transparent; } blockquote { border-left: solid 4px var(--border); font-style: italic; padding: 0.5em 0 0.5em 2em; } code { background: var(--border-soft); border: solid 1px var(--border); border-radius: var(--radius); font-family: 'Courier New', monospace; font-size: 0.9em; padding: 0.25em 0.65em; } pre code { display: block; padding: 1em 1.5em; overflow-x: auto; } hr { border-color: var(--border); } @media (max-width: 767.98px) { body { font-size: 0.95rem; } } /* Inline sub-heading byline (Elements style-guide demo blocks) */ header p { margin-bottom: 1.5em; color: var(--fg-light); } header h2 + p { margin-top: -1em; font-size: 1.25em; } header h3 + p { margin-top: -0.8em; font-size: 1.1em; } header h4 + p, header h5 + p, header h6 + p { margin-top: -0.6em; font-size: 0.9em; } /* Shared heading block above a section's body copy */ .section-header { text-align: center; } .section-header .byline { display: inline-block; margin: 0 0 2.5em; padding-top: 1em; min-width: 50%; border-top: solid 1px var(--border); color: var(--fg-light); font-size: 1.1em; letter-spacing: 0.25em; text-transform: uppercase; } .section-footer { border-top: solid 1px var(--border); padding-top: 2.5em; text-align: center; } .section-footer .byline { color: var(--fg-light); font-size: 1.1em; letter-spacing: 0.25em; text-transform: uppercase; } /* Site shell (fixed-width page column) + card (dark chrome panel) */ .site-shell { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 1.5em; } @media (max-width: 575.98px) { .site-shell { padding: 0; } } .site-card { margin: 6em 0 3em; background: var(--card-bg); border-radius: var(--radius); } @media (max-width: 767.98px) { .site-card { margin: 3em 0 2em; } } @media (max-width: 575.98px) { .site-card { margin: 0 0 2em; border-radius: 0; } } /* Site header (ribbon + brand + nav) */ .site-header { position: relative; background-color: var(--panel-bg); border-radius: var(--radius) var(--radius) 0 0; text-align: center; } .site-header-brand { padding: 6em 3em 4em; } .site-header-brand .site-logo { font-size: 2.5em; letter-spacing: 0.15em; } /* Compact header used on secondary pages (generic, elements) */ .site-header-compact .site-header-brand { padding: 3em 3em 2em; } .site-header-compact .site-header-brand .site-logo { font-size: 1.35em; } @media (max-width: 1366px) { .site-header-brand { padding-left: 0; padding-right: 0; } } @media (max-width: 980px) { .site-header-brand { padding: 4.5em 3em 3em; } .site-header-brand .site-logo { font-size: 2em; } .site-header-compact .site-header-brand { padding: 2.5em 3em 1.5em; } } @media (max-width: 767.98px) { .site-header-brand { padding: 2.5em 3em 1.5em; } .site-header-brand .site-logo { font-size: 1.5em; } .site-header-compact .site-header-brand { padding: 1.5em 3em 1em; } .site-header-compact .site-header-brand .site-logo { font-size: 1.15em; } } /* Site navbar */ .site-navbar { border-top: solid 1px var(--border); padding: 0; } .site-nav-list { --bs-navbar-nav-link-padding-x: 2em; } .site-nav-list .nav-link { border-left: solid 1px var(--border); line-height: 3.5em; padding-top: 0; padding-bottom: 0; font-size: 0.8em; letter-spacing: 0.25em; text-transform: uppercase; color: var(--fg); border-radius: 0; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .site-nav-list .nav-item:first-child .nav-link { border-left: 0; } .site-nav-list .nav-link:hover, .site-nav-list .nav-link.active { background: var(--border-soft); color: var(--fg-bold); } .site-navbar .navbar-toggler { margin: 0.75em auto; border-color: var(--border-strong); } .site-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.35); } @media (max-width: 767.98px) { .site-nav-list .nav-link { border-left: 0; border-top: solid 1px var(--border); } .site-nav-list .nav-item:first-child .nav-link { border-top: 0; } } /* Theme picker bar (all pages) — sits below the navbar, outside the collapsible #nav-links, so the seven swatches stay reachable at every viewport width without opening the mobile toggler. */ .theme-picker-bar { border-top: solid 1px var(--border); padding: 1em 1.5em; text-align: center; } .theme-picker { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7em; margin: 0; padding: 0; list-style: none; } .theme-picker .theme-swatch { width: 1.4em; height: 1.4em; padding: 0; border: solid 2px var(--border-strong); border-radius: 50%; cursor: pointer; transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out; } .theme-picker .theme-swatch:hover, .theme-picker .theme-swatch:focus { border-color: var(--fg-light); } .theme-picker .theme-swatch.is-active { border-color: var(--fg-bold); transform: scale(1.15); } /* Static per-choice hex, not var(--accent) — every swatch must stay visible and identifiable regardless of which theme is currently applied to the page. */ .theme-swatch[data-theme-choice="cyan"] { background-color: #689aa0; } .theme-swatch[data-theme-choice="green"] { background-color: #669161; } .theme-swatch[data-theme-choice="red"] { background-color: #ad5858; } .theme-swatch[data-theme-choice="violet"] { background-color: #8b7cad; } .theme-swatch[data-theme-choice="amber"] { background-color: #ad8a58; } .theme-swatch[data-theme-choice="slate"] { background-color: #5878ad; } .theme-swatch[data-theme-choice="rose"] { background-color: #ad588a; } /* Hero banner (homepage only) */ .hero-banner { background-color: var(--panel-bg); background-image: url("images/overlay2.png"), url("../../images/hero-banner.jpg"); background-repeat: repeat, no-repeat; background-position: top left, center center; background-size: auto, cover; padding: 6em 3em; } .hero-banner h2 { margin-bottom: 1em; } @media (max-width: 767.98px) { .hero-banner { padding: 3em 1.5em; } } /* Feature columns (two-up text blocks, index + generic) */ .feature-columns { text-align: center; } .feature-column { padding: 5em 3em 3em; border-top: solid 1px var(--border); } @media (min-width: 768px) { .feature-column { border-top: 0; } .feature-column + .feature-column { border-left: solid 1px var(--border); } } @media (max-width: 767.98px) { .feature-column { padding: 3em 3em 1em; } .feature-column:first-child { border-top: 0; } } /* Content section (default padded main-content block, all pages) */ .content-section { padding: 5em 3em 3em; } @media (max-width: 767.98px) { .content-section { padding: 3em 3em 1em; } } /* Showcase rows (alternating image/text, index only) */ .showcase-row { padding-top: 4em; margin-bottom: 4em; border-top: solid 1px var(--border); } .showcase-row:first-of-type { padding-top: 0; border-top: 0; } /* Clips the .content-image tint overlay to the row's rounded corners */ .showcase-media { overflow: hidden; border-radius: var(--radius); } @media (max-width: 767.98px) { .showcase-row { padding-top: 2em; margin-bottom: 2em; } } /* Site footer (contact form + social) */ .site-footer { background-color: var(--panel-bg); border-radius: 0 0 var(--radius) var(--radius); padding: 5em 3em 3em; text-align: center; } .site-footer .section-header { margin-bottom: 4em; } .contact-form { margin: 0 auto; } .social-links { margin: 3em 0 0; padding-top: 2em; border-top: solid 1px var(--border); } .social-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 3em; height: 3em; border: solid 1px var(--border-strong); border-radius: 50%; color: inherit; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; } .social-link-icon:hover { background: var(--border-soft); color: inherit !important; } .social-link-icon:active { background: var(--border-soft-hover); } @media (max-width: 767.98px) { .site-footer { padding: 5em 3em 3em; } } @media (max-width: 575.98px) { .site-footer { border-radius: 0; padding: 3em 1.5em 1em; } } /* Site copyright */ .site-copyright { text-align: center; color: var(--fg-light); padding-bottom: 3em; } /* Buttons */ .btn-accent, .btn-ghost { display: inline-block; height: 3.5em; padding: 0 3em; border-radius: var(--radius); font-size: 0.8em; font-weight: 300; letter-spacing: 0.25em; line-height: 3.35em; text-align: center; text-transform: uppercase; white-space: nowrap; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .btn-ghost { background-color: transparent; border: solid 1px var(--border-strong); color: var(--fg-bold); } .btn-ghost:hover { background: var(--border-soft); color: var(--fg-bold); } .btn-ghost:active { background: var(--border-soft-hover); } .text-white .btn-ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; } .text-white .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; } .btn-accent { background-color: var(--accent); border: solid 1px var(--accent); color: #fff; } .btn-accent:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-accent:active { background-color: var(--accent-active); border-color: var(--accent-active); } .btn-accent.btn-lg, .btn-ghost.btn-lg { height: 3.25em; padding: 0 2em; font-size: 1.1em; line-height: 3.15em; border-radius: var(--radius); } .btn-accent.btn-sm, .btn-ghost.btn-sm { height: 2.75em; padding: 0 2em; font-size: 0.6em; line-height: 2.65em; border-radius: var(--radius); } .btn-accent.disabled, .btn-ghost.disabled { opacity: 0.25; background-color: var(--border-soft-hover) !important; border-color: var(--border-strong) !important; color: var(--fg-bold) !important; cursor: default; } /* Form */ label { color: var(--fg-bold); font-size: 0.9em; } .form-control, .form-select { background: var(--border-soft); border: solid 1px var(--border-strong); border-radius: var(--radius); color: var(--fg); } .form-control::placeholder { color: var(--fg-light); opacity: 1; } .form-control:focus, .form-select:focus { background: var(--border-soft); border-color: var(--accent); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25); color: var(--fg); } .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234c4b4d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .form-check-input { background-color: var(--border-soft); border: solid 1px var(--border-strong); } .form-check-input:checked { background-color: var(--panel-bg); border-color: var(--border-strong); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25); } .form-check-label { color: var(--fg); } /* List variants (elements page) */ .list-flush { list-style: none; padding-left: 0; } .list-flush li { padding: 0.5em 0; border-top: solid 1px var(--border); } .list-flush li:first-child { padding-top: 0; border-top: 0; } /* Thumbnail grid + table wrapper (elements page) */ .thumbnail-grid { border: solid 1px var(--border); border-radius: var(--radius); padding: 1.5em; } .thumbnail-grid-flush { border: 0; padding: 0; } .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { --bs-table-color: var(--fg); --bs-table-bg: transparent; --bs-table-border-color: var(--border); } .table thead th { color: var(--fg-bold); font-weight: 300; border-bottom-width: 2px; } .table tbody tr:nth-child(2n + 1) { --bs-table-accent-bg: var(--border-soft); } .table-bordered td, .table-bordered th { border-color: var(--border); } /* Content image (signature overlay tint) */ .content-image { position: relative; display: block; } .content-image::before { content: ''; position: absolute; inset: 0; background: url("images/overlay2.png"); opacity: 0.5; } .content-image img { display: block; width: 100%; } .content-image.float-start { max-width: 40%; margin: 0.25em 1.5em 1em 0; } .content-image.float-end { max-width: 40%; margin: 0.25em 0 1em 1.5em; } /* Icon list (elements page demo — same visual component as .social-links) */ .icon-list .social-link-icon { width: 2.5em; height: 2.5em; } @media (max-width: 736px) { .icon-list .social-link-icon { width: 2.5em; height: 2.5em; } }