/* ------------------------------------------------------------------------ Site styles. Bootstrap 5 provides the grid and components; everything here reproduces the look the Hugo Blox "ocean" theme gave the old site. ------------------------------------------------------------------------ */ :root { /* Blox "ocean" theme (data/themes/ocean.toml in blox-bootstrap). */ --tcs-primary: #3f51b5; --tcs-menu-bg: #3f51b5; --tcs-menu-text: #fff; --tcs-menu-text-active: #ffeb3b; --tcs-section-odd: #fff; --tcs-section-even: rgb(247, 247, 247); --bs-link-color: #3f51b5; --bs-link-hover-color: #2c3a82; } /* Root type scale, copied from Blox's core style. Everything below is sized in rem against it, so this is what makes the page match the old site rather than rendering ~25% smaller against the browser's default 16px root. */ html { font-size: 16.17px; line-height: 1.65; color: rgba(0, 0, 0, 0.8); } @media screen and (min-width: 58em) { html { font-size: 21px; } } body { font-size: 1rem; line-height: inherit; color: inherit; } /* Blox's heading scale — Bootstrap's own defaults are a different progression. */ h1, h2, h3, h4, h5, h6 { margin-top: 1rem; margin-bottom: 0.5rem; line-height: 1.25; color: #313131; } h1 { font-size: 2.25rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; } h4, h5, h6 { font-size: 1rem; font-weight: 700; } a { color: var(--tcs-primary); } /* Anchor offset so the sticky navbar does not cover section headings. The navbar is sized in rem, so this offset has to scale with the root too. */ html { scroll-padding-top: 4.4rem; } section[id] { scroll-margin-top: 4.4rem; } /* ------------------------------------------------------------------ navbar */ #navbar-main { background-color: var(--tcs-menu-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } #navbar-main .navbar-brand, #navbar-main .nav-link { color: var(--tcs-menu-text); } #navbar-main .navbar-brand { font-weight: 500; } #navbar-main .nav-link:hover, #navbar-main .nav-link:focus, #navbar-main .nav-link.active { color: var(--tcs-menu-text-active); } #navbar-main .navbar-toggler { color: var(--tcs-menu-text); border-color: rgba(255, 255, 255, 0.4); } /* ---------------------------------------------------------------- search */ /* Ported from Blox's search-modal styles. The overlay is scaled to 0 rather than hidden so it can animate in when `.searching` lands on . */ .search-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; overflow: auto; visibility: hidden; transform: scale(0); background-color: #fff; } body.searching .search-modal { z-index: 1031; visibility: visible; transform: scale(1); } .search-modal > .container-xl { padding-top: 70px; } .search-header { position: sticky; top: 0; padding-top: 2rem; padding-bottom: 1rem; background-color: #fff; } .search-header h1 { margin: 0; line-height: 1; } .col-search-close { text-align: right; } .col-search-close i { font-size: 2rem; line-height: 1; } #search-box { position: relative; margin-bottom: 0.5rem; } #search-box::before { content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 0.6rem; left: 0.7rem; font-size: 1rem; line-height: 1rem; opacity: 0.5; } #search-box #search-query { width: 100%; height: 1rem; padding: 1rem 1rem 1rem 2rem; border: 1px solid #dedede; border-radius: 1rem; font-size: 0.8rem; line-height: 1rem; } .search-hit { margin-bottom: 1.5rem; } .search-hit-name a { text-decoration: none; } .search-hit-name a:hover { text-decoration: underline; } .search-hit-type { margin-bottom: 0 !important; text-transform: capitalize; } .search-hit-description { font-size: 0.7rem; } .search-hit mark { padding: 0 0.1em; background-color: #fcf8e3; color: inherit; } .search-no-results { color: #666; } /* ---------------------------------------------------------- home sections */ .home-section { padding: 110px 0; } .home-section:first-of-type { padding-top: 50px; } @media screen and (max-width: 768px) { .home-section { padding: 60px 0; } .home-section:first-of-type { padding-top: 40px; } } .section-odd { background-color: var(--tcs-section-odd); } .section-even { background-color: var(--tcs-section-even); } .hero-title { font-size: 2.7rem; font-weight: 300; line-height: 1; margin-top: 0; margin-bottom: 1rem; } .hero-lead { max-width: 768px; font-size: 1.35rem; } .hero-lead p:last-child { margin-bottom: 0; } .section-heading h1 { font-weight: 300; } .section-subheading { font-size: 1.25rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; } .section-heading p { font-weight: 400; font-size: 1.1rem; color: rgba(0, 0, 0, 0.54); } .article-title a { color: #1c1c1c; text-decoration: none; } .article-title a:hover { text-decoration: underline; } /* Ported from the old assets/scss/template.scss. The heading rule there applied to Blox's widget pages, which are now the listing pages — those centre their own headings, so only the call-to-action rule is still needed here. */ .cta-group { justify-content: center; } /* ---------------------------------------------------------- people widget */ .people-widget { font-size: 0.8rem; text-align: center; } .people-widget .portrait-title h2 { font-size: 1rem; } .people-widget .portrait-title h3 { font-size: 0.7rem; } .people-widget .avatar { width: 80%; max-width: 150px; height: auto; aspect-ratio: 1 / 1; } @media (min-width: 576px) { .people-widget .col-sm-auto { width: 30%; } } @media (min-width: 992px) { .people-widget .col-sm-auto { width: 20%; } } .people-person { margin-bottom: 1.5rem; } .avatar { width: 270px; height: 270px; margin: 0 auto; object-fit: cover; } .avatar-circle { border-radius: 50%; } .portrait-title h2 { font-size: 1.75em; font-weight: 300; color: #000; margin: 20px 0 10px; } .portrait-title h3 { font-size: 1rem; font-weight: 300; color: #666; margin: 0 0 8px; } .portrait-title a { color: var(--tcs-primary); text-decoration: none; } .portrait-title a:hover { text-decoration: underline; } /* Group headings ("Scientific Staff", "PhD Students", ...) inside the team grid — the light weight Blox used, not the people-card heading size. */ .people-widget .group-heading { font-size: 1.75rem; font-weight: 300; } ul.network-icon { display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; } .network-icon li { margin-right: 10px; } .network-icon li:last-of-type { margin-right: 0; } .network-icon li:hover { transform: scale(1.2); } .network-icon a { color: var(--tcs-primary); } .big-icon { font-size: 2rem; } ul.ul-interests li { font-size: 0.9rem; } ul.ul-edu { list-style: none; } ul.ul-edu li { position: relative; padding: 0 15px 4px 3px; } ul.ul-edu li .description p { margin: 0; } ul.ul-edu li .description p.course { font-weight: 500; } ul.ul-edu li .description p.institution { font-size: 0.75rem; color: #666; } #profile { text-align: center; } #profile .network-icon { margin-top: 0.5rem; } /* -------------------------------------------------- collection list views */ /* "showcase" view: image on one side, title and summary on the other. */ .view-showcase .showcase-image { max-width: 100%; height: auto; border-radius: 3px; } /* "compact" view: small square thumbnail beside the text. */ .media.stream-item { display: flex; align-items: flex-start; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #e3e3e3; } .media.stream-item:last-of-type { border-bottom: none; } .stream-item .media-body { flex: 1; min-width: 0; } .compact-thumb { width: 150px; height: 150px; object-fit: cover; border-radius: 3px; } @media (max-width: 575.98px) { .compact-thumb { width: 90px; height: 90px; } } .summary-link, .summary-link:hover { color: inherit; text-decoration: none; } /* Absolute, as in the old stylesheet — this stays 14px at both root sizes. */ .article-metadata { font-size: 14px; letter-spacing: 0.03em; color: #666; } .article-metadata a { color: #666; text-decoration: none; } .article-metadata a:hover { text-decoration: underline; } .middot-divider { padding: 0 6px; } .middot-divider::after { content: '\00b7'; } /* ----------------------------------------------------------- article page */ /* Blox kept article text in a ~740px measure rather than the full container. */ .article-container { max-width: 760px; margin-left: auto; margin-right: auto; } .article-style { line-height: 1.7; } .article-style img { max-width: 100%; height: auto; } .featured-image-wrapper { text-align: center; } .featured-image { max-width: 100%; height: auto; border-radius: 3px; } .author-boxes { border-top: 1px solid #e3e3e3; } .author-box { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #e3e3e3; } .author-box .avatar { width: 50px; height: 50px; margin: 0; flex: 0 0 auto; } .author-box-name { font-weight: 600; color: #1c1c1c; text-decoration: none; } .author-box-name:hover { text-decoration: underline; } .author-box-role { font-size: 0.9rem; color: #666; } .video-shortcode { max-width: 100%; margin: 1rem 0; } /* ------------------------------------------- gallery shortcode (ported CSS) */ .gallery-grid { display: grid; grid-gap: 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 150px; grid-auto-flow: row dense; margin: 1.5rem 0; } .gallery-item { position: relative; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; color: #fff; background: #000 center; background-size: cover; box-shadow: -2px 2px 10px 0 rgba(68, 68, 68, 0.4); transition: transform 0.3s ease-in-out; cursor: zoom-in; overflow: hidden; } .gallery-item a { z-index: 1; text-decoration: none; cursor: zoom-in; } .gallery-item img { object-fit: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: zoom-in; min-height: 48px; min-width: 48px; } .gallery-item:hover { transform: scale(1.05); } .gallery-item--medium { grid-row-end: span 2; } .gallery-item--large { grid-row-end: span 3; } .gallery-item--full { grid-column-end: auto; } @media screen and (min-width: 768px) { .gallery-item--full { grid-column: 1/-1; grid-row-end: span 2; } } /* --------------------------------------------------------------- contact */ .contact-list { font-size: 1rem; } .contact-list li { margin-bottom: 1.25rem; } /* The directions link is a long unbreakable URL — let it wrap on narrow screens. */ .contact-list a { overflow-wrap: anywhere; } .contact-map { width: 100%; height: 320px; border: 1px solid #ccc; border-radius: 3px; } /* ---------------------------------------------------------------- footer */ .page-footer { background-color: #f5f5f5; border-top: 1px solid #e3e3e3; padding: 1.5rem 0; margin-top: 0; font-size: 0.75rem; color: #666; text-align: center; } .page-footer a { color: #666; }