/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Mosaic" (cyan) template — boxed page frame, fixed/overlay navbar with dropdown + submenu, hero banner, alternating accent spotlight sections, icon grid, testimonial list, buttons, forms, tables, footer icon rows, and the in-page tri-accent theme switcher (data-theme overrides + swatch styles) that makes this a self-describing tour of the whole template. Loads after bootstrap.min.css. Palette lives in :root so the green/orange sibling variants are a custom-property swap only. Used by: index.html, generic.html, elements.html */ /* Palette + metrics */ :root { --bg: #ffffff; --bg-alt: #f7f7f7; --fg: #6e6e6e; --fg-bold: #5e5e5e; --fg-light: #cdcdcd; --border: #e3e3e3; --border-bg: rgba(144, 144, 144, 0.075); --border-bg-alt: rgba(144, 144, 144, 0.125); /* accent-1/2/3 differ per variant; accent-4 (hero overlay tint) is constant across every palette, real or in-page-preview only. */ --accent-1: #72bee1; --accent-2: #63b6b5; --accent-3: #e78e84; --accent-4: #4a4a4a; /* every accent surface uses white text/borders, only bg differs */ --accent-on-fg: #ffffff; --accent-on-border-soft: rgba(255, 255, 255, 0.075); --accent-on-border: rgba(255, 255, 255, 0.2); --radius: 4px; --border-width: 1px; --element-height: 2.75em; --element-margin: 2em; --page-frame-radius: 1.5em; --navbar-height-solid: 3.5em; --navbar-height-overlay: 8em; } /* In-page theme preview: the navbar/off-canvas swatches set data-theme on so all seven tri-accent palettes can be compared without opening another build. Cyan is the default (:root above, this is the primary variant folder); green and orange mirror the two sibling variant folders (bs5/mosaic/green|orange); violet/rose/amber/sage are four additional tri-accent sets in the same muted-pastel family, invented so the switcher offers seven choices like the orbit/blue and apex/blue references. Each block overrides all three accent custom properties — accent-4 (the hero overlay tint) stays constant in every palette. */ :root[data-theme="green"] { --accent-1: #8bcac6; --accent-2: #7f97a5; --accent-3: #df8b97; } :root[data-theme="orange"] { --accent-1: #e09476; --accent-2: #b57168; --accent-3: #89bdc0; } :root[data-theme="violet"] { --accent-1: #ab82d3; --accent-2: #7b70b2; --accent-3: #ddc188; } :root[data-theme="rose"] { --accent-1: #d98cb2; --accent-2: #b677b1; --accent-3: #75bd93; } :root[data-theme="amber"] { --accent-1: #d9bd7d; --accent-2: #bdb665; --accent-3: #89b4d2; } :root[data-theme="sage"] { --accent-1: #74b474; --accent-2: #7ca06a; --accent-3: #dda488; } /* Base typography */ html { scroll-behavior: smooth; } body { background: var(--bg-alt); color: var(--fg); font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 1.15rem; line-height: 1.65; letter-spacing: 0.05em; padding-top: var(--navbar-height-solid); } 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 { border-bottom-color: transparent; color: var(--accent-1); } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.5; color: var(--fg-bold); } h1 { font-size: 2.5rem; } h2 { font-size: 1.85rem; } h3 { font-size: 1.35rem; } blockquote { border-left: solid 4px var(--border); font-style: italic; padding: 0.5em 0 0.5em 1.5em; margin: 0 0 1.5em 0; } code { border-radius: var(--radius); border: solid var(--border-width) var(--border); background: var(--border-bg); font-size: 0.9em; padding: 0.2em 0.5em; } pre { margin: 0 0 1.5em 0; } pre code { display: block; padding: 1em 1.5em; overflow-x: auto; line-height: 1.75; } hr { border: 0; border-bottom: solid var(--border-width) var(--border); margin: 1.5em 0; } @media (max-width: 575.98px) { body { font-size: 1.05rem; } } /* Page frame (boxed "card" that holds every page's content, incl. footer) */ .page-frame { background: var(--bg); border-radius: var(--page-frame-radius); max-width: min(70em, calc(100% - 4em)); margin: 0 auto; } .page-header { text-align: center; padding: 4em 0; } .page-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.65em; height: 1.65em; margin: 0 0 0.75em 0; border-radius: var(--radius); background: var(--accent-1); color: var(--accent-on-fg); font-size: 3em; } .page-header h1 { font-size: 1.35em; margin: 0; } .page-header-lead { max-width: 40em; margin: 1em auto 0; } @media (max-width: 991.98px) { .page-frame { border-radius: 0; max-width: 100%; } .page-header { padding: 3em 0; } } /* Navbar */ .site-navbar { min-height: var(--navbar-height-solid); background: var(--bg); box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.075); transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease; } .site-navbar .site-logo { font-weight: 600; color: var(--fg-bold); } .site-navbar .nav-link { color: var(--fg); padding: 0.35em 0.75em; border-radius: var(--radius); } .site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--fg-bold); } .site-navbar .nav-link.active { font-weight: 600; box-shadow: inset 0 -0.175em 0 0 var(--border); } /* Overlay state: transparent, taller, centered — sits over the page-header on load (index.html only) until scrolled past it. */ .site-navbar.is-overlay { background: transparent; box-shadow: none; min-height: var(--navbar-height-overlay); } .site-navbar.is-overlay .site-logo { display: none; } .site-navbar.is-overlay .navbar-nav { margin: 0 auto; } /* Desktop nav row: plain flex row, no Bootstrap Collapse JS involved */ .site-navbar .navbar-links { display: none; } @media (min-width: 768px) { .site-navbar .navbar-links { display: flex; align-items: center; } } /* Theme picker — tri-accent swatches in the desktop navbar and the off-canvas nav panel. Each swatch is a three-way conic split showing all three accent custom properties for that palette at once (not just one accent, since Mosaic runs a triad rather than a single accent color). The active swatch gets a solid ring; colors are hardcoded per selector to mirror the :root[data-theme] overrides above, same approach as orbit/apex. */ .theme-picker { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .theme-picker { margin-left: 1em; padding-left: 1em; border-left: solid var(--border-width) var(--border); } } .theme-picker .theme-swatch { width: 1.35em; height: 1.35em; padding: 0; border: solid 2px var(--border); 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-visible { border-color: var(--fg-light); } .theme-picker .theme-swatch.is-active { border-color: var(--fg-bold); transform: scale(1.15); } .theme-swatch[data-theme-choice="cyan"] { background: conic-gradient(#72bee1 0deg 120deg, #63b6b5 120deg 240deg, #e78e84 240deg 360deg); } .theme-swatch[data-theme-choice="green"] { background: conic-gradient(#8bcac6 0deg 120deg, #7f97a5 120deg 240deg, #df8b97 240deg 360deg); } .theme-swatch[data-theme-choice="orange"] { background: conic-gradient(#e09476 0deg 120deg, #b57168 120deg 240deg, #89bdc0 240deg 360deg); } .theme-swatch[data-theme-choice="violet"] { background: conic-gradient(#ab82d3 0deg 120deg, #7b70b2 120deg 240deg, #ddc188 240deg 360deg); } .theme-swatch[data-theme-choice="rose"] { background: conic-gradient(#d98cb2 0deg 120deg, #b677b1 120deg 240deg, #75bd93 240deg 360deg); } .theme-swatch[data-theme-choice="amber"] { background: conic-gradient(#d9bd7d 0deg 120deg, #bdb665 120deg 240deg, #89b4d2 240deg 360deg); } .theme-swatch[data-theme-choice="sage"] { background: conic-gradient(#74b474 0deg 120deg, #7ca06a 120deg 240deg, #dda488 240deg 360deg); } /* Overlay navbar (index.html hero) starts on a photo — swatch ring needs to read against that instead of the plain white desktop-nav case. */ .site-navbar.is-overlay .theme-picker { border-left-color: var(--accent-on-border); } .site-navbar.is-overlay .theme-picker .theme-swatch { border-color: var(--accent-on-border); } .site-navbar.is-overlay .theme-picker .theme-swatch:hover, .site-navbar.is-overlay .theme-picker .theme-swatch:focus-visible { border-color: var(--accent-on-fg); } .site-navbar.is-overlay .theme-picker .theme-swatch.is-active { border-color: var(--accent-on-fg); } .theme-picker-group { margin-top: 2em; padding-top: 1.5em; border-top: solid var(--border-width) var(--border); } .theme-picker-group-label { display: block; margin: 0 0 0.85em 0; font-weight: 600; font-size: 0.9em; color: var(--fg-bold); } /* Dropdown + nested submenu (dropotron replacement) */ .site-navbar .dropdown-menu { border: 0; border-radius: var(--radius); box-shadow: 0 0.05em 0.175em 0 rgba(0, 0, 0, 0.15); padding: 0.5em 0; } .site-navbar .dropdown-item { padding: 0.5em 1.25em; color: var(--fg); } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { background: var(--accent-1); color: var(--accent-on-fg); } .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -0.5em; display: none; } .dropdown-submenu.show > .dropdown-menu { display: block; } .dropdown-submenu > .dropdown-item::after { content: '\f105'; font-family: 'Font Awesome 7 Free'; font-weight: 900; float: right; margin-left: 0.5em; } @media (max-width: 767.98px) { .dropdown-submenu > .dropdown-menu { position: static; margin: 0; padding-left: 1em; box-shadow: none; } } /* Off-canvas nav panel (mobile) */ .nav-panel { width: 20em; max-width: 80%; } .nav-panel-list, .nav-panel-list ul { list-style: none; margin: 0; padding: 0; } .nav-panel-list ul { padding-left: 1.25em; } .nav-panel-link { display: block; padding: 0.85em 0; border-top: solid var(--border-width) var(--border); color: var(--fg); } .nav-panel-list li:first-child > .nav-panel-link { border-top: 0; } .nav-panel-list > li > .nav-panel-link { font-weight: 600; color: var(--fg-bold); } .nav-panel-link:hover { color: var(--accent-1); } /* Hero banner */ .hero-banner { position: relative; text-align: center; padding: 7em 2em; color: var(--accent-on-fg); background-image: linear-gradient(rgba(74, 74, 74, 0.5), rgba(74, 74, 74, 0.5)), url("../../images/hero-banner.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } .hero-banner h2 { color: var(--accent-on-fg); font-size: 2.25em; margin: 0 0 1em 0; } @media (max-width: 767.98px) { .hero-banner { padding: 4em 2em; } .hero-banner h2 { font-size: 1.5em; } } /* Content sections */ .content-section { padding: 5em; } /* Short line of meta prose introducing a widget block on the Elements page (e.g. "Two table skins sharing the same markup ..."). Italicized rather than lightened so it stays readable at AA contrast on white. */ .content-section-intro { max-width: 45em; margin-bottom: 1.5em; font-style: italic; } @media (max-width: 991.98px) { .content-section { padding: 4em; } } @media (max-width: 575.98px) { .content-section { padding: 3em 1.5em; } } /* Accent tone surfaces — enumerated, not computed; only the bg custom property differs between them (and between color variants). */ .tone-accent-1, .tone-accent-2, .tone-accent-3 { color: var(--accent-on-fg); } .tone-accent-1 h1, .tone-accent-1 h2, .tone-accent-1 h3, .tone-accent-2 h1, .tone-accent-2 h2, .tone-accent-2 h3, .tone-accent-3 h1, .tone-accent-3 h2, .tone-accent-3 h3 { color: var(--accent-on-fg); } .tone-accent-1 { background: var(--accent-1); } .tone-accent-2 { background: var(--accent-2); } .tone-accent-3 { background: var(--accent-3); } /* Spotlight (split content/image) sections */ .content-section-spotlight { display: flex; align-items: stretch; padding: 0; } .content-section-spotlight-reversed { flex-direction: row-reverse; } .spotlight-content { width: 60%; display: flex; align-items: center; padding: 5em; } .spotlight-media { width: 40%; overflow: hidden; } .spotlight-media img { width: 100%; height: 100%; object-fit: cover; } .spotlight-media-focus-upper-left img { object-position: 30% 30%; } .spotlight-media-focus-right img { object-position: center right; } .spotlight-media-focus-top-right img { object-position: top right; } @media (max-width: 991.98px) { .spotlight-content { padding: 4em; } } @media (max-width: 767.98px) { .content-section-spotlight, .content-section-spotlight-reversed { flex-direction: column; text-align: center; } .spotlight-content, .spotlight-media { width: 100%; } .spotlight-content { order: 2; padding: 3em 2em; } .spotlight-media { order: 1; height: 20em; } } /* Icon grid ("What I Do"-style feature grid) */ .icon-grid { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border: solid var(--border-width) var(--border); border-left: 0; } .icon-grid li { display: flex; align-items: center; justify-content: center; width: 50%; min-height: 13em; text-align: center; border: solid var(--border-width) var(--border); border-width: 0 0 0 1px; border-top-width: 1px; padding: 1em; } .icon-grid li:nth-child(1), .icon-grid li:nth-child(2) { border-top-width: 0; } .icon-grid li:nth-child(2n - 1) { border-left-width: 0; } .icon-glyph-lg { display: block; font-size: 2.5em; color: var(--fg-light); margin: 0 0 0.5em 0; } .icon-grid h3 { font-size: 1em; font-weight: 600; margin: 0; } /* Testimonial list ("faces") */ .testimonial-list { display: flex; list-style: none; margin: 3em 0 0 0; padding: 0; } .testimonial-list li { flex: 1; padding-left: 3em; margin-left: 3em; border-left: solid var(--border-width) var(--border); } .testimonial-list li:first-child { padding-left: 0; margin-left: 0; border-left: 0; } .testimonial-photo { width: 4.5em; height: 4.5em; border-radius: 50%; object-fit: cover; margin: 0 0 1em 0; } .testimonial-list h3 { font-size: 1em; font-weight: 600; margin-bottom: 0.15em; } .testimonial-role { display: block; margin-bottom: 0.85em; font-size: 0.8em; color: var(--fg); } .testimonial-list p { font-style: italic; } @media (max-width: 767.98px) { .testimonial-list { flex-direction: column; } .testimonial-list li { padding-left: 0; margin-left: 0; border-left: 0; padding-top: 3em; margin-top: 3em; border-top: solid var(--border-width) var(--border); } .testimonial-list li:first-child { padding-top: 0; margin-top: 0; border-top: 0; } } /* Buttons */ .btn-accent, .btn-outline-accent { border-radius: var(--radius); font-weight: 600; padding: 0.65em 2em; } .btn-accent { background: var(--accent-1); border: 0; color: var(--accent-on-fg); } .btn-accent:hover, .btn-accent:focus { background: color-mix(in srgb, var(--accent-1) 90%, white); color: var(--accent-on-fg); } .btn-outline-accent { background: transparent; border: solid var(--border-width) var(--border); color: var(--fg-bold); } .btn-outline-accent:hover, .btn-outline-accent:focus { background: var(--border-bg); color: var(--fg-bold); } /* On an accent-tinted surface, both button styles flip to read on top of the saturated background (matches the original's per-surface color-button mixin). */ .tone-accent-1 .btn-accent, .tone-accent-2 .btn-accent, .tone-accent-3 .btn-accent, .hero-banner .btn-accent { background: var(--accent-on-fg); color: var(--fg-bold); } .tone-accent-1 .btn-accent:hover, .tone-accent-2 .btn-accent:hover, .tone-accent-3 .btn-accent:hover, .hero-banner .btn-accent:hover { background: color-mix(in srgb, var(--accent-on-fg) 90%, black); color: var(--fg-bold); } .tone-accent-1 .btn-outline-accent, .tone-accent-2 .btn-outline-accent, .tone-accent-3 .btn-outline-accent, .hero-banner .btn-outline-accent { border-color: var(--accent-on-border); color: var(--accent-on-fg); } .tone-accent-1 .btn-outline-accent:hover, .tone-accent-2 .btn-outline-accent:hover, .tone-accent-3 .btn-outline-accent:hover, .hero-banner .btn-outline-accent:hover { background: var(--accent-on-border-soft); color: var(--accent-on-fg); } .btn-accent.disabled, .btn-outline-accent.disabled { opacity: 0.35; pointer-events: none; } /* Size modifiers pair with Bootstrap's own .btn-sm / .btn-lg utilities; the extra class raises specificity so they aren't clobbered by the base padding rule above. */ .btn-accent.btn-sm, .btn-outline-accent.btn-sm { padding: 0.35em 1.25em; font-size: 0.85em; } .btn-accent.btn-lg, .btn-outline-accent.btn-lg { padding: 0.85em 2.75em; font-size: 1.2em; } .btn .icon-inline { margin-right: 0.5em; } /* Rows of buttons (replaces skel's ul.actions) */ .button-row { display: flex; flex-wrap: wrap; gap: 0.75em; list-style: none; margin: 0 0 1.5em 0; padding: 0; } .button-row-sm { gap: 0.5em; } .button-row-vertical { flex-direction: column; align-items: flex-start; } .button-row-vertical .btn-accent, .button-row-vertical .btn-outline-accent { width: auto; } .button-row-fit > li { flex: 1 1 0; } .button-row-fit .btn-accent, .button-row-fit .btn-outline-accent { width: 100%; } /* Forms */ .form-control, .form-select { border-color: var(--border); background: var(--border-bg); color: var(--fg-bold); border-radius: var(--radius); } .form-control:focus, .form-select:focus { border-color: var(--accent-1); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-1) 25%, transparent); } .form-check-input:checked { background-color: var(--accent-1); border-color: var(--accent-1); } .form-check-input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-1) 25%, transparent); } /* Tables */ .table-mosaic { --bs-table-border-color: var(--border); } .table-mosaic thead { border-bottom: solid calc(var(--border-width) * 2) var(--border); } .table-mosaic tfoot { border-top: solid calc(var(--border-width) * 2) var(--border); } .table-mosaic th { font-size: 0.9em; font-weight: 600; } .table-mosaic-alt tbody tr:nth-child(2n + 1) { background: var(--border-bg); } /* Inline / fit images */ .inline-photo { max-width: 40%; border-radius: var(--radius); } .inline-photo-start { float: left; margin: 0.25em 1.75em 1.25em 0; } .inline-photo-end { float: right; margin: 0.25em 0 1.25em 1.75em; } .fit-photo { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; } .lead-photo { border-radius: var(--radius); width: 100%; margin: 0 0 2em 0; } /* Footer */ .site-footer { max-width: min(70em, calc(100% - 4em)); margin: 0 auto; text-align: center; padding: 5em; } .site-footer .copyright { color: var(--fg-light); margin: 3em 0 1.5em 0; font-size: 0.9em; } @media (max-width: 991.98px) { .site-footer { padding: 4em; } } @media (max-width: 575.98px) { .site-footer { padding: 3em 1.5em; } } .contact-icon-list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 2.5em 0; padding: 0; } .contact-icon-list li { min-width: 15em; padding: 0 1.5em; border-left: solid var(--border-width) var(--border); } .contact-icon-list li:first-child { border-left: 0; } .contact-icon-list .icon-glyph-lg { font-size: 1.5em; margin-bottom: 0.35em; } .contact-icon-list h3 { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.35em 0; } @media (max-width: 575.98px) { .contact-icon-list { flex-direction: column; align-items: center; } .contact-icon-list li { border-left: 0; border-top: solid var(--border-width) var(--border); padding: 1.5em 0 0 0; margin-top: 1.5em; width: 100%; } .contact-icon-list li:first-child { border-top: 0; padding-top: 0; margin-top: 0; } } .social-icon-list { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; } .social-icon-list li { border: solid var(--border-width) var(--border); border-left: 0; } .social-icon-list li:first-child { border-left: solid var(--border-width) var(--border); border-radius: var(--radius) 0 0 var(--radius); } .social-icon-list li:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .social-icon-list a { display: block; width: 2.5em; height: 2.5em; line-height: 2.5em; text-align: center; color: var(--fg-light); border-bottom: 0; } .social-icon-list a:hover { color: var(--accent-1); } .icon-link-row { display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0 0 1.5em 0; padding: 0; } .icon-link-row a { border-bottom: 0; color: var(--fg); } .icon-link-row a:hover { color: var(--accent-1); }