/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Apex" (blue) template — typography, fixed header + off-canvas menu, hero banner, feature sections, sidebar layouts, footer, form/table/button skins, 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, no-sidebar.html, left-sidebar.html, right-sidebar.html, contact.html, elements.html */ /* Palette + metrics */ :root { --accent: #6ec7f5; --accent-hover: #86d0f7; --accent-active: #56bef3; --accent-rgb: 110, 199, 245; --ink: #626c6e; --body-text: #93999a; --muted-text: #bbbebf; --border: #e2eaec; --border-soft: rgba(144, 144, 144, 0.075); --paper: #ffffff; --paper-alt: #f7f9fa; --navbar-height: 3.5rem; } /* In-page theme preview: the off-canvas menu's swatches set data-theme on so all seven palettes can be compared without opening another build. Blue is the default (:root above); green/purple/red mirror the three real variant folders (bs5/apex/green|purple|red); amber/teal/pink are three additional palettes in the same pastel-accent family, added so the switcher offers seven choices like the orbit/blue reference. Each block overrides all four accent custom properties the theme reads. */ :root[data-theme="green"] { --accent: #7ed5b1; --accent-hover: #8ddaba; --accent-active: #6bcfa5; --accent-rgb: 126, 213, 177; } :root[data-theme="purple"] { --accent: #a8a3e6; --accent-hover: #bbb7eb; --accent-active: #958fe1; --accent-rgb: 168, 163, 230; } :root[data-theme="red"] { --accent: #ff7065; --accent-hover: #ff7b71; --accent-active: #ff584b; --accent-rgb: 255, 112, 101; } :root[data-theme="amber"] { --accent: #f5b966; --accent-hover: #f7c37b; --accent-active: #f4ae4e; --accent-rgb: 245, 185, 102; } :root[data-theme="teal"] { --accent: #5fd3dd; --accent-hover: #72d8e1; --accent-active: #4acdd9; --accent-rgb: 95, 211, 221; } :root[data-theme="pink"] { --accent: #f386b9; --accent-hover: #f59bc5; --accent-active: #f16fac; --accent-rgb: 243, 134, 185; } /* Base typography */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-height) + 0.5rem); } body { padding-top: var(--navbar-height); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 1.05rem; line-height: 1.75; color: var(--body-text); } a { color: var(--accent); 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); border-bottom-color: transparent; } h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: bold; letter-spacing: -0.03em; } h2 { font-size: 1.85rem; } h3 { font-size: 1.35rem; } h4 { font-size: 1.1rem; } strong, b { color: var(--ink); } code { background: var(--border-soft); border: solid 1px var(--border); border-radius: 6px; padding: 0.2em 0.5em; } pre { margin: 0 0 2em 0; } pre code { display: block; padding: 1em 1.5em; overflow-x: auto; } .blockquote { border-left: solid 4px var(--border); font-style: italic; padding: 0.5em 0 0.5em 1.5em; } .section-heading p { color: var(--muted-text); margin-top: -0.5em; } .page-header { margin: 0 0 3em 0; text-align: center; } .page-header p { color: var(--muted-text); } /* Site header + nav */ .site-header { position: fixed; top: 0; left: 0; width: 100%; height: var(--navbar-height); background: var(--paper); border-bottom: solid 1px var(--border); z-index: 1030; } .site-header-inner { position: relative; height: 100%; } .site-brand { position: absolute; left: 1em; top: 0; height: 100%; margin: 0; display: flex; align-items: center; font-size: 1.1rem; } .site-brand a { border: 0; color: var(--ink); display: flex; align-items: center; gap: 0.5em; } .site-brand .fa-cloud { color: var(--accent); } .site-nav { position: absolute; right: 0; top: 0; height: 100%; } .site-nav-list { display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; } .site-nav-list > li { display: flex; align-items: center; } .site-nav-link { border: 0; color: var(--ink); font-weight: bold; padding: 0 1em; } .site-nav-link:hover { color: var(--accent); } .site-nav-menu-item { border-left: solid 1px var(--border); margin-left: 0.75em; padding-left: 0.75em; } .menu-trigger { background: transparent; border: 0; color: var(--ink); font-weight: bold; padding: 0 1.5em; height: 100%; } .menu-trigger:hover { color: var(--accent); } .menu-trigger .fa-bars { color: var(--muted-text); margin-right: 0.5em; } /* Sign Up / Log In collapse away below md; the menu trigger always stays. Selector must be at least as specific as ".site-nav-list > li" above (one class + one type = 0-1-1) or this loses the cascade and the two links stay visible, overlapping the brand at narrow widths — a bug we found and fixed here (present in every unedited variant folder too). */ @media (max-width: 767.98px) { .site-nav-list > .site-nav-link-item { display: none; } } /* Off-canvas site menu (replaces jQuery panel()) */ .site-menu .offcanvas-header { border-bottom: solid 1px var(--border); } .site-menu-list, .site-menu-sublist { list-style: none; margin: 0; padding: 0; } .site-menu-list > li { border-top: solid 1px var(--border); } .site-menu-list > li:first-child { border-top: 0; } .site-menu-link { display: block; border: 0; color: var(--ink); line-height: 3em; } .site-menu-link:hover { color: var(--accent); } .site-menu-group-label { display: block; color: var(--muted-text); font-weight: bold; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 1em; } .site-menu-sublist .site-menu-link { padding-left: 1em; } /* Theme picker — lives at the foot of the off-canvas menu, the one spot reachable from every page at every viewport width (the header bar's nav items get too cramped below md to hold seven swatches too). 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-group { margin-top: 1em; padding-top: 1em; border-top: solid 1px var(--border); } .theme-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 0.75em 0 1.5em; padding: 0; list-style: none; } .theme-picker .theme-swatch { width: 1.6em; height: 1.6em; padding: 0; border: solid 2px var(--border); 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: var(--muted-text); } .theme-picker .theme-swatch.is-active { border-color: var(--ink); transform: scale(1.15); } .theme-swatch[data-theme-choice="blue"] { background-color: #6ec7f5; } .theme-swatch[data-theme-choice="green"] { background-color: #7ed5b1; } .theme-swatch[data-theme-choice="purple"] { background-color: #a8a3e6; } .theme-swatch[data-theme-choice="red"] { background-color: #ff7065; } .theme-swatch[data-theme-choice="amber"] { background-color: #f5b966; } .theme-swatch[data-theme-choice="teal"] { background-color: #5fd3dd; } .theme-swatch[data-theme-choice="pink"] { background-color: #f386b9; } /* Hero banner */ .hero-banner { position: relative; height: calc(100vh - var(--navbar-height)); min-height: 35em; /* Three stacked layers: the dot-pattern overlay on top, a dark gradient in the middle so the white headline stays legible over a bright photo, and the photo itself on the bottom. */ background-image: url("images/overlay.png"), linear-gradient(rgba(34, 38, 40, 0.55), rgba(34, 38, 40, 0.55)), url("../../images/hero-backdrop.jpg"); background-position: top left, center center, center center; background-repeat: repeat, no-repeat, no-repeat; background-size: auto, cover, cover; background-attachment: fixed, fixed, fixed; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; } /* Fixed backgrounds jank on touch devices — fall back to scroll */ @media (hover: none), (max-width: 767.98px) { .hero-banner { background-attachment: scroll, scroll, scroll; } } .hero-banner:before { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .hero-banner:before { transition: opacity 2.5s ease-in-out; } .hero-banner-inner { transition: opacity 1s ease-in-out; } body.is-loading .hero-banner:before { opacity: 1; } body.is-loading .hero-banner-inner { opacity: 0; } } .hero-banner-inner { position: relative; z-index: 1; max-width: 90%; } .hero-banner h2 { color: #fff; font-size: 2.25rem; line-height: 1.4; } .hero-banner-footnote { font-size: 0.85rem; } .hero-banner-footnote a { color: #fff; } .scroll-indicator { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 4em; height: 3.25em; background: var(--paper); border-radius: 2em 2em 0 0; color: var(--muted-text); text-indent: -999em; overflow: hidden; border-bottom: 0; } .scroll-indicator:before { font-family: "Font Awesome 7 Free"; font-weight: 900; content: '\f078'; position: absolute; inset: 0; line-height: 3.75em; text-indent: 0; text-align: center; } .scroll-indicator:hover { color: var(--muted-text); } @media (max-width: 767.98px) { .scroll-indicator { display: none; } } /* Feature sections (index.html One–Four) */ .feature-section { padding: 6.5em 0; border-top: solid 1px var(--border); } .feature-section:first-child { border-top: 0; padding-top: 0; } .feature-section:last-child { padding-bottom: 0; } .feature-major { padding-left: 6em; padding-right: 6em; } .feature-major h2 { font-size: 2rem; margin-bottom: 0.7em; } .feature-major p { font-size: 1.1rem; } @media (max-width: 767.98px) { .feature-major { padding-left: 0; padding-right: 0; } } .icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 8em; height: 8em; border-radius: 100%; border: solid 1px var(--border); font-size: 2.5rem; color: var(--muted-text); margin-bottom: 1em; } .icon-feature-grid { list-style: none; margin: 0; padding: 0; text-align: center; } .icon-feature-item { margin-bottom: 2em; } .icon-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5em; height: 4.5em; border-radius: 100%; border: solid 1px var(--border); font-size: 1.5rem; color: var(--muted-text); margin-bottom: 0.75em; } .icon-feature-item p { color: var(--ink); font-weight: bold; margin: 0; } .image-grid-item { display: block; position: relative; border: 0; } .image-grid-item img { border-radius: 6px; width: 100%; } .image-grid-caption { position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; padding: 0.75em 1.25em; background: rgba(35, 38, 38, 0.7); color: #fff; font-size: 1rem; border-radius: 0 0 6px 6px; } /* Sidebar layouts (left-sidebar.html, right-sidebar.html) */ .sidebar-block + .sidebar-block { margin-top: 2em; } .sidebar-block-image { border-radius: 6px; width: 100%; margin-bottom: 1em; } /* Table */ .table-apex { --bs-table-bg: transparent; border-color: var(--border); } .table-apex th { color: var(--ink); font-size: 0.9em; } .table-apex tbody tr:nth-child(2n + 1) { --bs-table-bg: var(--border-soft); } /* Action lists (button rows/columns wrapped in a plain