diff --git a/css/header-footer.css b/css/header-footer.css
index 8fe5e7a..0a914d5 100644
--- a/css/header-footer.css
+++ b/css/header-footer.css
@@ -37,7 +37,6 @@
.nav {
justify-self: center;
- white-space: nowrap;
}
.nav-links {
@@ -53,13 +52,15 @@
.nav-links li a {
color: var(--site-text);
font-weight: 550;
- padding: 10px 0;
+ padding: 10px 0 9px;
display: block;
transition: color 0.2s ease, border-color 0.2s ease;
border-bottom: 2px solid transparent;
}
-.nav-links li a:hover {
+.nav-links li a:hover,
+.nav-links li a.is-current,
+.dropdown.is-current-section > a {
color: var(--site-link);
border-color: var(--site-link);
}
@@ -74,42 +75,85 @@
position: relative;
}
+.dropdown > a {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.28rem;
+}
+
.dropdown > a:after {
- content: ' \25BE';
+ content: '\25BE';
+ display: inline-block;
font-size: 10px;
+ line-height: 1;
+ transition: transform 0.18s ease;
+}
+
+.dropdown:hover > a:after,
+.dropdown:focus-within > a:after {
+ transform: rotate(180deg);
}
.dropdown-menu {
- display: none;
+ display: block;
position: absolute;
- top: 100%;
+ top: calc(100% + 8px);
left: 0;
+ z-index: 1002;
background-color: var(--site-surface);
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 14px 32px rgba(12, 40, 69, 0.13);
list-style: none;
padding: 10px 0;
margin: 0;
- min-width: 200px;
- border-radius: 5px;
+ width: max-content;
+ min-width: 230px;
+ max-width: min(360px, calc(100vw - 2rem));
+ border: 1px solid var(--site-border);
+ border-radius: 6px;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-4px);
+ transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
+}
+
+.dropdown-menu::before {
+ content: '';
+ position: absolute;
+ top: -9px;
+ left: 0;
+ right: 0;
+ height: 9px;
}
.dropdown-menu li a {
- padding: 10px 20px;
- white-space: nowrap;
+ padding: 9px 18px;
+ white-space: normal;
font-weight: 400;
color: inherit;
+ line-height: 1.25;
+ border-bottom: 0;
}
.dropdown-parent span {
display: block;
font-weight: 700;
color: var(--site-text);
- padding: 14px 20px 6px;
+ padding: 14px 18px 6px;
font-family: 'Source Sans Pro', sans-serif;
+ font-size: 0.82rem;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+.dropdown-menu .dropdown-parent-link > a {
+ font-weight: 700;
+ color: var(--site-text);
+ padding-top: 14px;
+ padding-bottom: 6px;
}
.dropdown-subitem a {
- padding-left: 34px;
+ padding-left: 30px;
padding-top: 7px;
padding-bottom: 7px;
font-size: 0.96em;
@@ -119,13 +163,19 @@
padding-top: 4px;
}
-.dropdown-menu li a:hover {
+.dropdown-menu li a:hover,
+.dropdown-menu li a:focus-visible,
+.dropdown-menu li a.is-current {
background-color: var(--site-link-soft);
color: var(--site-link);
+ border-bottom: 0;
}
-.dropdown:hover .dropdown-menu {
- display: block;
+.dropdown:hover .dropdown-menu,
+.dropdown:focus-within .dropdown-menu {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
}
.header-actions {
@@ -423,10 +473,11 @@
right: 0;
background: var(--site-surface);
border-bottom: 1px solid var(--site-border);
- padding: 20px;
+ padding: 12px 20px 18px;
width: 100%;
z-index: 999;
justify-self: stretch;
+ box-shadow: 0 12px 22px rgba(12, 40, 69, 0.08);
}
.nav.active {
@@ -446,29 +497,57 @@
.nav-links {
flex-direction: column;
- gap: 15px;
+ align-items: stretch;
+ gap: 2px;
padding: 0;
}
.nav-links li a {
- padding: 10px 0;
+ padding: 11px 0;
color: var(--site-text);
border-bottom: 2px solid transparent;
}
+ .dropdown > a {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ }
+
.dropdown-menu {
display: none;
position: static;
+ width: auto;
+ max-width: none;
+ min-width: 0;
+ opacity: 1;
+ visibility: visible;
+ transform: none;
+ transition: none;
box-shadow: none;
- margin-top: 10px;
- padding-left: 20px;
+ margin: 0 0 8px;
+ padding: 7px 0;
background: var(--site-link-soft);
+ border: 1px solid var(--site-border);
+ border-radius: 6px;
}
.dropdown.active .dropdown-menu {
display: block;
}
+ .dropdown.active > a:after {
+ transform: rotate(180deg);
+ }
+
+ .dropdown-menu li a {
+ padding: 9px 14px;
+ }
+
+ .dropdown-subitem a {
+ padding-left: 24px;
+ }
+
.footer {
padding: 30px 20px;
}
@@ -563,12 +642,13 @@
top: 100%;
left: 0;
right: 0;
- background: #fff;
- border-bottom: 1px solid #ddd;
- padding: 20px;
+ background: var(--site-surface);
+ border-bottom: 1px solid var(--site-border);
+ padding: 12px 20px 18px;
width: 100%;
z-index: 999;
justify-self: stretch;
+ box-shadow: 0 12px 22px rgba(12, 40, 69, 0.08);
}
.nav.active {
@@ -581,16 +661,40 @@
.nav-links {
flex-direction: column;
- gap: 15px;
+ align-items: stretch;
+ gap: 2px;
padding: 0;
}
.dropdown-menu {
display: none;
position: static;
+ width: auto;
+ max-width: none;
+ min-width: 0;
+ opacity: 1;
+ visibility: visible;
+ transform: none;
+ transition: none;
box-shadow: none;
- margin-top: 10px;
- padding-left: 20px;
- background: #f9f9f9;
+ margin: 0 0 8px;
+ padding: 7px 0;
+ background: var(--site-link-soft);
+ border: 1px solid var(--site-border);
+ border-radius: 6px;
+ }
+
+ .dropdown.active .dropdown-menu {
+ display: block;
+ }
+
+ .dropdown > a {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ }
+
+ .dropdown.active > a:after {
+ transform: rotate(180deg);
}
}
diff --git a/css/style.css b/css/style.css
index d8a6a7e..84292da 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,6 +141,245 @@ a {
max-width: 42rem;
}
+.policy-page {
+ padding-bottom: 5rem;
+}
+
+.policy-hero,
+.policy-content {
+ width: min(820px, calc(100% - 2rem));
+ margin: 0 auto;
+}
+
+.policy-hero {
+ padding: 4rem 0 1.5rem;
+}
+
+.policy-hero h1,
+.policy-content h2 {
+ font-family: 'IBM Plex Sans', sans-serif;
+ color: var(--site-text);
+}
+
+.policy-hero h1 {
+ position: relative;
+ margin: 0 0 1rem;
+ padding-bottom: 0.85rem;
+ font-size: clamp(2.2rem, 5vw, 3.4rem);
+ line-height: 1.12;
+}
+
+.policy-hero h1::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 4rem;
+ height: 4px;
+ background: var(--site-accent);
+}
+
+.policy-hero p {
+ max-width: 46rem;
+ margin: 0;
+ color: var(--site-text-muted);
+ font-size: 1.12rem;
+ line-height: 1.65;
+}
+
+.policy-content {
+ display: grid;
+ gap: 0.75rem;
+ padding-top: 0.5rem;
+}
+
+.policy-content h2 {
+ margin: 2.1rem 0 0.35rem;
+ font-size: clamp(1.35rem, 3vw, 1.75rem);
+ line-height: 1.2;
+}
+
+.policy-content p,
+.policy-content li,
+.policy-content blockquote {
+ font-size: 1.08rem;
+ line-height: 1.68;
+}
+
+.policy-content p {
+ margin: 0.25rem 0 0;
+}
+
+.policy-section {
+ padding-top: 0.35rem;
+}
+
+.principles-list {
+ margin: 0.7rem 0 1rem;
+ padding-left: 1.35rem;
+}
+
+.principles-list li {
+ margin-bottom: 0.65rem;
+ padding-left: 0.15rem;
+}
+
+.principles-list li::marker {
+ color: var(--site-accent);
+}
+
+.principles-list strong {
+ color: var(--site-text);
+}
+
+.policy-content ul,
+.policy-content ol:not(.principles-list) {
+ margin: 0.6rem 0 0;
+ padding-left: 1.35rem;
+}
+
+.policy-content blockquote {
+ margin: 1rem 0 0;
+ padding: 0.2rem 0 0.2rem 1rem;
+ border-left: 3px solid var(--site-link);
+ color: var(--site-text-muted);
+ background: transparent;
+}
+
+.policy-content blockquote p {
+ margin: 0;
+}
+
+.policy-note {
+ color: var(--site-text-muted);
+ font-weight: 700;
+}
+
+.policy-content a {
+ color: var(--site-link);
+ text-decoration: underline;
+ text-underline-offset: 0.12em;
+}
+
+.policy-emphasis {
+ display: block;
+ margin-top: 1rem;
+ font-weight: 700;
+}
+
+.travel-steps li {
+ margin-bottom: 0.85rem;
+ padding-left: 0.15rem;
+}
+
+.travel-steps li::marker {
+ color: var(--site-accent);
+ font-weight: 700;
+}
+
+.travel-steps ul {
+ margin-top: 0.45rem;
+}
+
+.travel-steps ul li {
+ margin-bottom: 0.25rem;
+}
+
+.travel-steps ul li::marker {
+ color: var(--site-text-muted);
+}
+
+.policy-important {
+ margin-top: 1.25rem;
+ padding-left: 1rem;
+ border-left: 3px solid var(--site-accent);
+ color: var(--site-text-muted);
+}
+
+.policy-important strong {
+ color: var(--site-text);
+}
+
+.values-content .policy-section + .policy-section {
+ margin-top: 0.45rem;
+}
+
+.values-content h2 {
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+}
+
+.values-content p {
+ color: var(--site-text-muted);
+}
+
+.policy-linkout {
+ margin-top: 1.6rem;
+ font-weight: 700;
+}
+
+.directory-section,
+.nextgens-section {
+ width: min(1160px, calc(100% - 2rem));
+ margin: 1rem auto 0;
+}
+
+.directory-list,
+.nextgens-list {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 0.55rem 1.5rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ color: var(--site-text-muted);
+}
+
+.directory-list li,
+.nextgens-list li {
+ line-height: 1.45;
+}
+
+.nextgens-list strong {
+ color: var(--site-text);
+ font-weight: 700;
+}
+
+.nextgens-note {
+ margin: 1rem 0 0;
+ color: var(--site-text-muted);
+ font-size: 0.95rem;
+ line-height: 1.5;
+}
+
+.form-embed-section {
+ width: min(1000px, calc(100% - 2rem));
+ margin: 1rem auto 0;
+}
+
+.form-embed {
+ display: block;
+ width: 100%;
+ min-height: 760px;
+ border: 1px solid var(--site-border);
+ border-radius: 6px;
+ background: var(--site-surface);
+}
+
+.form-embed-fallback {
+ margin: 0.9rem 0 0;
+ color: var(--site-text-muted);
+ font-size: 0.98rem;
+ line-height: 1.5;
+}
+
+.form-embed-fallback a {
+ color: var(--site-link);
+ font-weight: 700;
+ text-decoration: underline;
+ text-underline-offset: 0.12em;
+}
+
.people-page {
padding-bottom: 3.5rem;
}
@@ -268,12 +507,36 @@ a {
grid-template-columns: 1fr;
}
+ .nextgens-list {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .directory-list {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
.people-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
+ .policy-page {
+ padding-bottom: 3.5rem;
+ }
+
+ .policy-hero {
+ padding-top: 3.2rem;
+ }
+
+ .nextgens-list {
+ grid-template-columns: 1fr;
+ }
+
+ .directory-list {
+ grid-template-columns: 1fr;
+ }
+
.people-grid {
grid-template-columns: 1fr;
}
diff --git a/html/about/code-of-conduct.html b/html/about/code-of-conduct.html
index e88fa75..635ee3d 100644
--- a/html/about/code-of-conduct.html
+++ b/html/about/code-of-conduct.html
@@ -10,7 +10,70 @@
-
+
+
+ Imageomics Code of Conduct
+ As members of the Imageomics community, we agree to maintain an environment where every person feels welcome to be their true self and speak from the heart. As such, all members of the Imageomics Institute community agree to abide by the principles outlined in our Code of Conduct.
+
+
+
+ Imageomics Code of Conduct
+ We agree as individuals and as a group to:
+
+
+ -
+ Listen to understand. When one person talks, others listen.
+
+ -
+ Speak to be understood. We use lay terms and are patient with people who are not experts in our specific field. We are all learning, no matter who we are.
+
+ -
+ Embrace “Yes and...” Focus on possibilities instead of obstacles. Embrace others' ideas and honor divergence of thought.
+
+ -
+ Take space / make space. Those who tend to talk a lot are intentional about letting others talk first, while those who tend to hold back are intentional about contributing.
+
+ -
+ Beware of blind spots. We do not know what we do not know. We are vigilant for differences among our experiences and positions.
+
+ -
+ Respect time. Once a meeting or session time concludes, we need to move on. Be proactive in scheduling time for follow-up and ongoing in-depth conversations.
+
+ -
+ Care for each other. We bring our full selves to the community, and we look out for each other wholeheartedly.
+
+
+
+
+ AI Use Policy
+ Borrowed from CRA.
+
+ - Allowable use of AI tools that do not share or use the data for training.
+ - Requires permission if recording others. Language to use when requesting permission:
+
+
+ “We would like to use <insert tool name here> during this discussion to assist with note-taking. <insert tool name here> records and transcribes audio and can produce a summary of the discussion. The audio and transcription will only be saved and used internally. Please let us know if you object to the use of <insert tool name here>.”
+
+
+
+
+ Scope
+ We abide by these principles in all Imageomics spaces, including but not limited to digital and in-person meetings, formal and informal gatherings, online discussion forums and chat spaces, and field and lab work.
+ Acts of misconduct are prohibited. Those found to engage in misconduct will be subject to dismissal from the project and further actions as directed by the guidelines of the employers, federal law, and the place of incidence.
+
+
+
+ Reporting Misconduct
+ If you believe you have experienced or witnessed misconduct in an Imageomics setting, please take these steps:
+
+ - Document the incident.
+ - Tell someone you trust.
+ - Report the incident to Sam Stevens, Diane, or Tanya.
+
+ Privacy will be protected to the greatest extent possible.
+
+
+