/* File: assets/css/theme.css Purpose: Theme layer over Bootstrap 5 for the "Graphite" template — fixed/overlay navbar with dropdown + nested submenu + off-canvas panel, fading hero carousel, spotlight/feature/post sections, hexagon icon badges, sidebar content layouts, flat square buttons, elements-page component styles (tables, images, lists), footer, and the in-page theme switcher (data-theme accent overrides + swatch styles) that turns the single shipped palette into seven. Loads after bootstrap.min.css. Used by: index.html, elements.html, left-sidebar.html, right-sidebar.html, no-sidebar.html */ /* Palette + metrics */ :root { --ink: #444444; --ink-light: #bbbbbb; --paper: #ffffff; --paper-alt: #f6f6f6; --border: #e6e6e6; --border-bg: #f6f6f6; --on-dark: #ffffff; /* Accent — every interactive/decorative surface (buttons, the nav CTA pill, hexagon icon badges, active nav/dropdown states, form focus rings) reads this instead of --ink, so it's the one thing the theme switcher below has to touch. --ink stays fixed across all seven palettes — body text and headings never change color, only the accented UI does. "graphite" (this block) is the shipped default: accent equals the original monochrome ink, so the default look is unchanged from the single-palette version of this template. */ --accent: #444444; --accent-hover: #575757; --accent-active: #2e2e2e; --accent-rgb: 68, 68, 68; --element-margin: 2em; --navbar-height-solid: 3.5em; --navbar-height-overlay: 5.5em; } /* In-page theme preview: swatches in the navbar (desktop) and the off-canvas panel (all widths) set data-theme on so all seven palettes can be compared without opening another build. "graphite" is the default (:root above, no attribute needed); the other six are invented palettes in the same light-background-friendly family — darkened enough from their hue's usual saturation to still clear 4.5:1 contrast against white for button/badge text. */ :root[data-theme="teal"] { --accent: #1f7a6d; --accent-hover: #279385; --accent-active: #175f54; --accent-rgb: 31, 122, 109; } :root[data-theme="indigo"] { --accent: #4a5bc4; --accent-hover: #5c6cd6; --accent-active: #3a49a3; --accent-rgb: 74, 91, 196; } :root[data-theme="rust"] { --accent: #c1502e; --accent-hover: #d4633f; --accent-active: #9e3f23; --accent-rgb: 193, 80, 46; } :root[data-theme="olive"] { --accent: #697530; --accent-hover: #7d8a3d; --accent-active: #545e26; --accent-rgb: 105, 117, 48; } :root[data-theme="plum"] { --accent: #8a4c82; --accent-hover: #a15d98; --accent-active: #6e3b67; --accent-rgb: 138, 76, 130; } :root[data-theme="cobalt"] { --accent: #3e6f9e; --accent-hover: #4d84b8; --accent-active: #325a80; --accent-rgb: 62, 111, 158; } /* Base typography */ html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: 'Open Sans', Helvetica, sans-serif; font-weight: 400; font-size: 1.05rem; line-height: 1.7; padding-top: var(--navbar-height-solid); } a { color: var(--ink); text-decoration: none; border-bottom: dotted 1px currentColor; transition: border-color 0.2s ease-in-out; } a:hover { border-bottom-color: transparent; } /* Anchors that are really UI controls, not inline text links — no dotted underline on these regardless of where they sit in the document. */ .navbar-brand, .nav-link, .dropdown-item, .nav-panel-link, .btn, .carousel-caption a, .footer-menu-link, .icon-link-row a, .social-icon-list a, .content-image-link { border-bottom: 0; } strong, b { font-weight: 600; } p { margin: 0 0 var(--element-margin) 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 1em 0; padding-bottom: 0.85em; position: relative; color: var(--ink); } h1::after, h2::after, h3::after, h4::after, h5::after, h6::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3rem; border-bottom: solid 1px currentColor; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; border-bottom: 0; } /* Sub-headings that sit inside a body of text rather than titling a whole section don't need the underline rule repeated everywhere. */ .heading-plain { padding-bottom: 0; } .heading-plain::after { display: none; } h1 { font-size: 2em; } h2 { font-size: 1.65em; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5 { font-size: 0.95em; } h6 { font-size: 0.8em; } blockquote { border-left: solid 4px var(--border); font-style: italic; margin: 0 0 var(--element-margin) 0; padding: 0.5em 0 0.5em 1.5em; } code { border: solid 1px var(--border); background: var(--border-bg); font-family: 'Courier New', monospace; font-size: 0.9em; padding: 0.2em 0.6em; } pre { margin: 0 0 var(--element-margin) 0; } pre code { display: block; padding: 1em 1.5em; overflow-x: auto; line-height: 1.75; } hr { border: 0; border-bottom: solid 1px var(--border); margin: var(--element-margin) 0; } @media (max-width: 767.98px) { body { font-size: 1rem; } } /* Page section rhythm (wrapper / inner replacement) */ .section-inner { max-width: 90em; width: 90%; margin: 0 auto; } .page-section { padding: 4em 0; border-top: solid 1px var(--border); } .page-section:first-of-type { border-top: 0; } .page-section-lg { padding: 6em 0; } .page-section-alt { background: var(--paper-alt); border-top: 0; } .page-title { margin-bottom: 2.5em; } .page-title p { margin-bottom: 0; color: var(--ink); } @media (max-width: 991.98px) { .page-section { padding: 3em 0; } .page-section-lg { padding: 4em 0; } } @media (max-width: 767.98px) { .page-section { padding: 2.5em 0; } .page-section-lg { padding: 2.5em 0; } .section-inner { width: 100%; padding: 0 1.5em; } } /* Navbar */ .site-navbar { min-height: var(--navbar-height-solid); background: rgba(255, 255, 255, 0.97); box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, box-shadow 0.3s ease, min-height 0.3s ease; } .site-navbar .site-logo { font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); } .site-navbar .nav-link { font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); padding: 0.5em 0.9em; } .site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--ink); box-shadow: inset 0 -2px 0 0 var(--accent); } .site-navbar .nav-link-cta { background: var(--accent); color: var(--on-dark); border-radius: 0; padding: 0.5em 1.25em; margin-left: 0.5em; } .site-navbar .nav-link-cta:hover { background: var(--accent-hover); box-shadow: none; } /* Overlay state: transparent, taller — floats over the hero carousel on index.html 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, .site-navbar.is-overlay .nav-link, .site-navbar.is-overlay .navbar-toggler-icon { color: var(--on-dark); } .site-navbar.is-overlay .site-logo { color: var(--on-dark); } .site-navbar.is-overlay .nav-link:hover, .site-navbar.is-overlay .nav-link.active { color: var(--on-dark); box-shadow: inset 0 -2px 0 0 var(--on-dark); } .site-navbar.is-overlay .navbar-toggler { border-color: rgba(255, 255, 255, 0.5); } .site-navbar.is-overlay .navbar-toggler-icon { filter: invert(1); } /* Desktop nav row: plain flex row — mobile uses the off-canvas panel instead of Bootstrap's Collapse component, so this never collapses. */ .site-navbar .navbar-links { display: none; } @media (min-width: 768px) { .site-navbar .navbar-links { display: flex; align-items: center; } } /* Theme picker, desktop copy — .navbar-expand-md hides the off-canvas toggler at this width (see .navbar-toggler below), so the swatches need a second home here or they're unreachable above 768px. Sits at the end of .navbar-links, after the nav list. The off-canvas copy below is the mobile-reachable one. */ .site-navbar .theme-picker { margin-left: 1em; padding-left: 1em; border-left: solid 1px var(--border); } .site-navbar.is-overlay .theme-picker { border-left-color: rgba(255, 255, 255, 0.35); } /* Dropdown + nested submenu (dropotron replacement) */ .site-navbar .dropdown-menu { border: 0; border-radius: 0; box-shadow: 0 0.1em 0.3em 0 rgba(0, 0, 0, 0.2); padding: 0.5em 0; min-width: 13em; } .site-navbar .dropdown-item { font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.75em 1.25em; color: var(--ink); } .site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus { background: var(--paper-alt); color: var(--ink); } /* Active layout link in the "Page Layouts" dropdown (left/right/no sidebar pages mark their own entry) — routed through --accent so it tracks the chosen palette instead of Bootstrap's default blue. */ .site-navbar .dropdown-item.active, .site-navbar .dropdown-item:active { background: var(--accent); color: var(--on-dark); } .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: 85%; background: var(--paper); } .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 1px var(--border); font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); } .nav-panel-list li:first-child > .nav-panel-link { border-top: 0; } .nav-panel-link:hover { color: var(--accent); } /* Theme picker, off-canvas copy — sits at the foot of the mobile panel, the one spot reachable from every page at every viewport width (see the desktop copy in the navbar block above for >=768px). */ .theme-picker-group { margin-top: 1em; padding-top: 1em; border-top: solid 1px var(--border); } .theme-picker-group .theme-picker-label { display: block; color: var(--ink-light); font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Shared swatch styling — both the desktop-navbar and off-canvas pickers use this. Each swatch's fill is a static hex (not var(--accent)) so all seven stay visible regardless of which theme is currently applied; the active one gets an ink-colored ring. */ .theme-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 0.75em 0 0 0; padding: 0; list-style: none; } .theme-picker .theme-swatch { width: 1.4em; height: 1.4em; 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(--ink-light); } .theme-picker .theme-swatch.is-active { border-color: var(--ink); transform: scale(1.15); } .site-navbar.is-overlay .theme-picker .theme-swatch { border-color: rgba(255, 255, 255, 0.5); } .site-navbar.is-overlay .theme-picker .theme-swatch:hover, .site-navbar.is-overlay .theme-picker .theme-swatch:focus { border-color: rgba(255, 255, 255, 0.85); } .site-navbar.is-overlay .theme-picker .theme-swatch.is-active { border-color: var(--on-dark); } .theme-swatch[data-theme-choice="graphite"] { background-color: #444444; } .theme-swatch[data-theme-choice="teal"] { background-color: #1f7a6d; } .theme-swatch[data-theme-choice="indigo"] { background-color: #4a5bc4; } .theme-swatch[data-theme-choice="rust"] { background-color: #c1502e; } .theme-swatch[data-theme-choice="olive"] { background-color: #697530; } .theme-swatch[data-theme-choice="plum"] { background-color: #8a4c82; } .theme-swatch[data-theme-choice="cobalt"] { background-color: #3e6f9e; } /* Hero carousel (custom banner-slider replacement) */ .hero-carousel { /* body's padding-top reserves space for the solid navbar; pull the carousel back up flush with the viewport so the transparent overlay navbar floats over the image instead of over blank body background (which would make the white nav text invisible). */ margin-top: calc(var(--navbar-height-solid) * -1); min-height: 30em; height: 70vh; } .hero-carousel .carousel-item { min-height: 30em; height: 70vh; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; display: flex; align-items: center; justify-content: center; text-align: center; } /* Fixed backgrounds jank on touch devices — fall back to scroll */ @media (hover: none), (max-width: 767.98px) { .hero-carousel .carousel-item { background-attachment: scroll; } } .hero-carousel .carousel-item::before { content: ''; position: absolute; inset: 0; background: #000511; opacity: 0.35; } .hero-carousel-slide-1 { background-image: url("../../images/light-painting-portrait.jpg"); } .hero-carousel-slide-2 { background-image: url("../../images/ballet-dancers-shoes.jpg"); } .hero-carousel-slide-3 { background-image: url("../../images/carnival-dancer.jpg"); } .hero-carousel-caption { position: relative; z-index: 1; color: var(--on-dark); max-width: 42em; padding: 0 1.5em; } .hero-carousel-caption h2 { color: var(--on-dark); font-size: 2.5em; margin: 0; } .hero-carousel-caption h2::after { left: 50%; transform: translateX(-50%); } .hero-carousel-caption p { margin: 1em 0 0 0; font-size: 1.1em; line-height: 1.6; /* Slides vary from near-black (light-painting-portrait) to mid-tone (the other two) even under the shared 35% dark overlay — the text-shadow keeps this line legible across all three without needing a per-slide scrim tweak. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } /* The base chip (light background, dark border) reads fine for contrast but looks like a stray white tile against a photo — swap to a translucent chip that stays on-brand with the dark overlay instead. */ .hero-carousel-caption code { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.4); color: var(--on-dark); } @media (max-width: 575.98px) { .hero-carousel-caption p { font-size: 1em; } } .hero-carousel .carousel-indicators { bottom: 1.5em; } .hero-carousel .carousel-indicators [data-bs-target] { width: 0.8em; height: 0.8em; border-radius: 50%; border: 0; background-color: rgba(255, 255, 255, 0.35); opacity: 1; } .hero-carousel .carousel-indicators .active { background-color: var(--on-dark); } @media (max-width: 991.98px) { .hero-carousel, .hero-carousel .carousel-item { min-height: 26em; height: 60vh; } .hero-carousel-caption h2 { font-size: 1.85em; } } @media (max-width: 575.98px) { .hero-carousel, .hero-carousel .carousel-item { min-height: 22em; } .hero-carousel-caption h2 { font-size: 1.5em; } } /* Spotlight (text + large image split) */ .spotlight-image img { width: 100%; display: block; } /* Features (3-across icon columns with dividers) */ .features-grid { --divider-color: var(--border); } .features-grid > .col { position: relative; } .features-grid > .col:not(:first-child) { border-left: solid 1px var(--divider-color); } @media (max-width: 767.98px) { .features-grid > .col:not(:first-child) { border-left: 0; border-top: solid 1px var(--divider-color); padding-top: 2.5em; margin-top: 2.5em; } } /* Hexagon icon badge (icon-wrapper replacement) */ .icon-badge { --badge-size: 4em; width: var(--badge-size); aspect-ratio: 0.9; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: var(--accent); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 0 1.25em 0; } .icon-badge-sm { --badge-size: 2.75em; font-size: 1rem; margin: 0; position: absolute; left: 0; top: 0.2em; } /* Post grid ("Etiam sed tellus"-style content cards) */ .post-card { height: 100%; display: flex; flex-direction: column; background: var(--paper); border: solid 1px var(--border); } .post-card-image img { width: 100%; display: block; } .post-card-body { padding: 2em; flex-grow: 1; display: flex; flex-direction: column; } .post-card-body p { flex-grow: 1; } /* Reach list (bulleted-icons contact block) */ .reach-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .reach-item { width: 50%; position: relative; padding: 0 0 0 3.75em; margin-top: var(--element-margin); } .reach-item:nth-child(-n+2) { margin-top: 0; } .reach-item h3 { font-size: 1em; margin-bottom: 0.35em; padding-bottom: 0; } .reach-item h3::after { display: none; } .reach-item p { margin-bottom: 0; } @media (max-width: 575.98px) { .reach-item { width: 100%; } .reach-item:nth-child(2) { margin-top: var(--element-margin); } } /* Buttons */ .btn-accent, .btn-outline-accent { border-radius: 0; font-family: 'Raleway', Helvetica, sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.85em 1.75em; } .btn-accent { background: var(--accent); border: 0; color: var(--on-dark); } .btn-accent:hover, .btn-accent:focus { background: var(--accent-hover); color: var(--on-dark); } .btn-accent:active { background: var(--accent-active); } .btn-outline-accent { background: transparent; border: solid 1px var(--accent); color: var(--accent); } .btn-outline-accent:hover, .btn-outline-accent:focus { background: var(--border-bg); color: var(--accent); } .btn-accent.disabled, .btn-outline-accent.disabled, .btn-accent[aria-disabled="true"], .btn-outline-accent[aria-disabled="true"] { opacity: 0.3; pointer-events: none; } .btn-accent.btn-sm, .btn-outline-accent.btn-sm { padding: 0.5em 1.25em; font-size: 0.75rem; } .btn-accent.btn-lg, .btn-outline-accent.btn-lg { padding: 1em 2.25em; font-size: 1.1rem; } .btn .icon-inline { margin-right: 0.6em; } .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 { display: block; width: 100%; } /* Forms */ .form-control, .form-select { border-color: var(--border); background: var(--border-bg); border-radius: 0; 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.15); } .form-check-input { border-radius: 0; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.15); } /* Tables */ .table-graphite { --bs-table-border-color: var(--border); } .table-graphite thead { border-bottom: solid 2px var(--border); } .table-graphite tfoot { border-top: solid 2px var(--border); } .table-graphite th { font-family: 'Raleway', Helvetica, sans-serif; font-size: 0.85em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .table-graphite-alt tbody tr:nth-child(2n + 1) { background: var(--border-bg); } /* Inline / fit images */ .fit-photo { width: 100%; height: 100%; object-fit: cover; } .inline-photo { max-width: 40%; } .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; } .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 { color: var(--ink); } .icon-link-row a:hover { color: var(--accent); } /* Sidebar page layouts (left-sidebar / right-sidebar / no-sidebar) */ .content-layout > .content-main { order: 1; } .content-layout > .content-sidebar { order: 2; } .content-layout-left > .content-main { order: 2; } .content-layout-left > .content-sidebar { order: 1; } .content-image-link { display: block; margin-bottom: 1.5em; } .content-image-link img { width: 100%; display: block; } .sidebar-widget + .sidebar-widget { margin-top: var(--element-margin); padding-top: var(--element-margin); border-top: solid 1px var(--border); } @media (max-width: 767.98px) { .content-layout > .content-main, .content-layout-left > .content-main { order: 1; } .content-layout > .content-sidebar, .content-layout-left > .content-sidebar { order: 2; border-top: solid 2px var(--border); padding-top: var(--element-margin); } } /* Footer */ .site-footer { padding: 2.5em 0; } .site-footer .copyright { color: var(--ink-light); font-size: 0.9em; margin: 0; } .footer-menu { list-style: none; display: flex; gap: 1.5em; margin: 0; padding: 0; font-size: 0.9em; } .footer-menu-link { color: var(--ink-light); } .footer-menu-link:hover { color: var(--accent); } @media (max-width: 991.98px) { .site-footer .section-inner { text-align: center; flex-direction: column; gap: 1em; } .footer-menu { justify-content: center; } }