/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Pavilion" (blue) template — typography, light chrome navbar with centered nested dropdown, circular-portrait hero, feature strip, image showcase grid, portrait row, sidebar widgets, contact form, footer + newsletter. Loads after bootstrap.min.css. Accent colors live in :root custom properties below — cyan/red variants are a palette swap only, and the in-page theme picker (below) previews seven palettes total by overriding the same four properties via [data-theme] on . Used by: index.html, contact.html, left-sidebar.html, right-sidebar.html, two-sidebar.html, no-sidebar.html */ /* Palette + metrics */ :root { --accent: #4676AA; --accent-dark: #29578A; --accent-hover: #5587BF; --accent-light: #6597CF; --ink: #4d5251; --body-copy: #909090; --paper: #ffffff; --paper-alt: #f3f3f3; } /* 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); cyan and red mirror the values shipped in the bs5/pavilion/cyan and bs5/pavilion/red builds; violet, amber, forest, and plum are new palettes invented for the picker only — no shipping build uses them. */ :root[data-theme="cyan"] { --accent: #4CA89B; --accent-dark: #2f8a7d; --accent-hover: #5cb8ab; --accent-light: #4ea99d; } :root[data-theme="red"] { --accent: #A85561; --accent-dark: #883541; --accent-hover: #B86571; --accent-light: #B86571; } :root[data-theme="violet"] { --accent: #7A4CA9; --accent-dark: #5C2C89; --accent-hover: #895DBE; --accent-light: #996DCE; } :root[data-theme="amber"] { --accent: #997433; --accent-dark: #7B5413; --accent-hover: #A88548; --accent-light: #B89558; } :root[data-theme="forest"] { --accent: #55843E; --accent-dark: #37641E; --accent-hover: #649553; --accent-light: #74A563; } :root[data-theme="plum"] { --accent: #A94C8A; --accent-dark: #8B2C6A; --accent-hover: #B85D9F; --accent-light: #C86DAF; } /* Base typography */ body { background: #666b6a; font-family: 'Open Sans', sans-serif; font-size: 1.05rem; line-height: 1.75; color: var(--body-copy); } h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-family: 'Fjalla One', sans-serif; font-weight: 400; line-height: 1.3; color: var(--ink); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } a { color: var(--accent); } strong, b { font-weight: 700; color: #000000; } /* Subtitle line under a section heading (banner + article headers) */ .byline { display: block; padding-top: 0.5em; font-size: 1.2em; font-weight: 300; letter-spacing: 0.05em; color: var(--accent); } /* Shared heading block used above section body copy */ .section-header { margin-bottom: 2em; text-align: center; } .section-title { font-size: 2.6em; } .section-divider { display: inline-block; width: 80px; margin-top: 0.5em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } @media (max-width: 767.98px) { .section-title { font-size: 1.7em; } } /* Buttons */ .btn-accent { padding: 0.55em 1.4em 0.4em; border: 0; border-bottom: 3px solid var(--accent-dark); border-radius: 0.25rem; letter-spacing: 0.10em; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; font-size: 1em; color: #fff; background-color: var(--accent); transition: background-color 0.25s ease-in-out; } .btn-accent:hover, .btn-accent:focus { color: #fff; background-color: var(--accent-hover); } .btn-accent-alt { padding: 0.55em 1.4em 0.4em; border: 0; border-bottom: 3px solid #3D4241; border-radius: 0.25rem; letter-spacing: 0.10em; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; font-size: 1em; color: #fff; background-color: var(--ink); transition: background-color 0.25s ease-in-out; } .btn-accent-alt:hover, .btn-accent-alt:focus { color: #fff; background-color: #5D6261; } /* Navbar */ .site-navbar { padding: 1.2em 0; background-color: var(--paper); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); } .site-navbar .site-logo { font-family: 'Fjalla One', sans-serif; font-size: 1.9em; text-transform: uppercase; color: var(--accent); } .site-navbar .nav-link { margin: 0 0.15em; padding: 0.5em 1em; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85em; font-weight: 400; color: #828d8c; border-radius: 0.35em; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } .site-navbar .nav-link:hover, .site-navbar .nav-link:focus { background-color: var(--paper-alt); color: var(--ink); } .site-navbar .nav-link.active { background-color: var(--paper-alt); color: var(--ink); } .site-navbar .dropdown-menu { top: 100%; left: 50%; transform: translateX(-50%); min-width: 14em; margin-top: 0.9em; padding: 0.85em 0; background-color: var(--accent); border: 0; border-bottom: 3px solid var(--accent-dark); border-radius: 0.25rem; } .site-navbar .dropdown-menu::before { content: ''; position: absolute; top: -0.65em; left: 50%; margin-left: -0.65em; width: 0; height: 0; border-left: 0.65em solid transparent; border-right: 0.65em solid transparent; border-bottom: 0.65em solid var(--accent); } .site-navbar .dropdown-item { padding: 0.9em 1.5em; border-top: solid 1px rgba(255, 255, 255, 0.1); text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.75); background-color: transparent; } .site-navbar .dropdown-item:first-child { border-top: 0; } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { color: #fff; 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%; transform: none; margin-top: -0.9em; } .dropdown-submenu > .dropdown-menu::before { content: none; } @media (max-width: 767.98px) { .site-navbar .navbar-collapse { margin-top: 1em; } .site-navbar .dropdown-menu { left: 0; transform: none; } .site-navbar .dropdown-menu::before { content: none; } .dropdown-submenu > .dropdown-menu { position: static; margin-left: 1em; } } /* Theme picker — seven accent swatches. Lives inside the same collapsible #nav-links block as the rest of the nav, so it is reachable through the toggler on phones and inline (centered, like everything else in this navbar) from md up. The active swatch gets a solid ink ring; swatch colors mirror the :root[data-theme] overrides above. */ .theme-picker-group { margin-top: 1em; padding-top: 1em; border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: center; } .theme-picker { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin: 0; padding: 0; list-style: none; } .theme-picker .theme-swatch { width: 1.15em; height: 1.15em; 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.2); } .theme-swatch[data-theme-choice="blue"] { background-color: #4676AA; } .theme-swatch[data-theme-choice="cyan"] { background-color: #4CA89B; } .theme-swatch[data-theme-choice="red"] { background-color: #A85561; } .theme-swatch[data-theme-choice="violet"] { background-color: #7A4CA9; } .theme-swatch[data-theme-choice="amber"] { background-color: #997433; } .theme-swatch[data-theme-choice="forest"] { background-color: #55843E; } .theme-swatch[data-theme-choice="plum"] { background-color: #A94C8A; } @media (min-width: 768px) { .theme-picker-group { margin-top: 0; padding-top: 0; padding-left: 1.2em; border-top: 0; border-left: 1px solid rgba(0, 0, 0, 0.08); } } /* Hero banner (homepage only) */ /* Dark gradient layered over the photo keeps the white hero title and byline legible regardless of how bright the banner image is. */ .hero-banner { position: relative; overflow: hidden; padding: 5em 0; background-image: linear-gradient(rgba(24, 27, 26, 0.62), rgba(24, 27, 26, 0.62)), url("../../images/hero-banner.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; } .hero-portrait { display: inline-block; margin-bottom: 2em; padding: 1em; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 6px 0 -1px rgba(0, 0, 0, 0.2); } /* Source photo is 264x264 (2x) for retina sharpness; width/height pin the display size back to 132px so the circle doesn't render at its native pixel size and blow out the layout. */ .hero-portrait img { display: block; width: 132px; height: 132px; object-fit: cover; border: 4px solid rgba(255, 255, 255, 0.5); border-radius: 50%; } .hero-title { font-size: 2.6em; color: #fff; } .hero-banner .byline { display: inline-block; width: 60%; padding: 1em 0 0; color: #fff; } .hero-banner .btn-accent { margin-top: 2em; padding: 0.6em 1.6em 0.45em; font-size: 1.1em; } @media (hover: none), (max-width: 767.98px) { .hero-banner { background-attachment: scroll; } } @media (max-width: 767.98px) { .hero-title { font-size: 1.6em; } .hero-banner .byline { width: 100%; padding: 1em 0 0; font-size: 1.05em; } } /* Feature strip (homepage only) */ .feature-strip { padding: 4em 0; background-color: var(--paper); text-align: center; } .feature-card { margin-bottom: 2.2em; padding: 1.5em 0.5em 1em; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.1); } @media (max-width: 767.98px) { .feature-strip { padding: 3em 0 2em; } } /* Showcase section (homepage main image grid) */ .showcase-section { padding: 4em 0; background-color: var(--paper-alt); text-align: center; } .showcase-image { border: 6px solid var(--paper); border-radius: 0.25rem; box-shadow: 0 4px 0 -1px rgba(0, 0, 0, 0.1); margin-bottom: 1.5em; } .showcase-section h3 { padding-bottom: 0.5em; text-transform: capitalize; font-family: 'Open Sans', sans-serif; font-size: 1.3em; font-weight: 400; color: var(--ink); } .showcase-details { display: block; margin-bottom: 1.5em; } @media (max-width: 767.98px) { .showcase-section { padding: 3em 0 2em; } } /* Team roster (homepage portfolio) */ .team-section { padding: 4em 0; background-color: var(--paper); } .team-title { display: inline-block; padding: 0 1.5em 0.7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 2.6em; } .team-row + .team-row { margin-top: 2.5em; padding-top: 2.5em; border-top: 1px solid rgba(0, 0, 0, 0.1); } .team-name h3 { margin: 0; font-size: 1.5em; } .team-name span { display: block; margin-top: -4px; font-style: italic; font-size: 0.9em; letter-spacing: 0.05em; } .team-social { margin-top: 0.8em; } .team-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 3px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 1em; } .team-avatar { display: inline-block; padding: 0.8em; border: 2px solid var(--accent); border-radius: 50%; } /* Same 264x264-source-at-132px-display retina pattern as .hero-portrait img. */ .team-avatar img { display: block; width: 132px; height: 132px; object-fit: cover; border: 5px solid rgba(0, 0, 0, 0.1); border-radius: 50%; } .team-bio { color: var(--body-copy); } @media (max-width: 991.98px) { .team-name, .team-social { text-align: center !important; } .team-avatar { margin: 1.5em 0; } } /* Page main content wrapper (left/right/two/no-sidebar pages) */ .page-main { padding: 4em 0; background-color: var(--paper-alt); } /* Sidebar widgets (left/right/two-sidebar pages) */ .sidebar-widget + .sidebar-widget { margin-top: 3em; } .sidebar-widget-title { font-size: 1.6em; } .sidebar-link-list { margin: 1em 0 0; padding: 0; list-style: none; } .sidebar-link-list li { padding: 0.7em 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .sidebar-link-list li:first-child { padding-top: 0; border-top: 0; } .sidebar-link-list a { color: #353535; } .sidebar-widget .btn-accent { margin-top: 1em; } /* Content article (left/right/two/no-sidebar pages) */ .content-article h3 { margin: 1.5em 0; text-transform: none; font-family: 'Open Sans', sans-serif; font-size: 1.2em; font-weight: 700; color: var(--ink); } /* Contact page */ .contact-section { padding: 4em 0; background-color: var(--paper-alt); } .contact-form .form-control, .contact-form textarea.form-control { padding: 0.6em 0.8em; font-size: 1.1em; font-weight: 300; color: #707070; background-color: var(--paper); border: 1px solid #e8e8e8; border-radius: 0.375rem; } .contact-form .form-control:focus { box-shadow: inset 0 0 0 2px var(--accent-light); border-color: var(--accent-light); } .contact-form textarea.form-control { height: 10em; } .contact-info-list { margin: 0; padding: 0; list-style: none; } .contact-info-list li { padding: 1.3em 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } .contact-info-list li:first-child { padding-top: 0; border-top: 0; } .contact-info-list h3 { font-size: 1.15em; } .contact-info-list a { color: #898e96; } .contact-info-list a:hover { text-decoration: underline; } /* Footer (all pages) */ .site-footer { padding: 3.5em 0; text-align: center; background-color: var(--ink); color: var(--accent-light); } .site-footer h3 { margin-bottom: 0.8em; letter-spacing: 0.10em; color: #fff; } .site-footer a { color: var(--accent-light); } .newsletter-form { position: relative; max-width: 20em; margin: 0 auto; } .newsletter-input { width: 100%; height: 2.4em; padding: 0 5.5em 0 0.6em; font-family: 'Open Sans', sans-serif; font-size: 1.05em; font-weight: 300; color: #ccc; background: none; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.3125rem; } .newsletter-input::placeholder { color: #93989f; } .newsletter-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.4); box-shadow: none; } .newsletter-submit { position: absolute; right: 0; top: 0; height: 2.4em; padding: 0 0.9em; border: 0; border-radius: 0 0.3125rem 0.3125rem 0; letter-spacing: 0.10em; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; font-size: 1em; color: #fff; background-color: var(--accent-light); } /* Copyright */ .site-copyright { padding: 2em 0 3em; text-align: center; background-color: var(--ink); color: var(--body-copy); font-size: 0.9em; }