html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
html, body {
margin: 0;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
.footer {
position: static !important;
margin-top: auto;
width: 100%;
}
:root {
--av-ink: #1b2a22;
--av-ink-2: #24372d;
--av-accent: #e6a646;
--av-accent-2: #e8a744;
--av-bg: #f7e3ab;
--av-surface: #fff8e6;
--av-surface-2: #ffffff;
--av-border: rgba(27,42,34,.14);
--av-shadow: 0 10px 28px rgba(0,0,0,.08);
--av-shadow-soft: 0 8px 22px rgba(0,0,0,.06);
--av-radius: 16px;
--av-radius-sm: 12px;
}
.logo-img {
width: 8%;
}
.dropdown-item {
color: #123250;
}
.navbar {
background-color: #ebebeb;
}
.navbar-light .navbar-nav .nav-link {
color: #123250;
font-weight: bold;
}
.navbar-nav .nav-link:hover {
color: rgb(241 203 143) !important;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu {
position: absolute !important;
z-index: 1050 !important;
}
.dropdown-menu .dropdown-item {
padding: 10px 20px;
font-size: 16px;
font-weight: 500;
transition: background-color 0.3s ease, color 0.3s ease;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
color: #e7a844;
border-radius: 4px;
background-color: #ffffff;
}
.dropdown-menu {
background-color: #ffffff;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
padding: 6px 0;
}
.db-name {
color: #e8a744 !important;
font-weight: bold;
font-size: 28px;
}
.db-name-init {
color: #123250;
}
#ladybug {
position: fixed;
width: 35px;
height: auto;
pointer-events: none;
z-index: 9999;
top: 0;
left: 0;
}
.btn-explore {
border: 3px solid #123250;
color: #123250;
background-color: transparent;
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 12px;
}
.btn-explore:hover {
background-color: #123250;
color: #e6a646;
}
.btn-explore-index:hover {
background-color: #123250;
color: #e6a646;
}
.btn-explore-reverse {
border: 3px solid #e6a646;
color: #e6a646;
background-color: #123250;
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 12px;
}
.btn-explore-reverse:hover {
background-color: transparent;
color: #1b2a22;
}
#percentage {
-webkit-appearance: none;
width: 300px;
height: 8px;
border-radius: 5px;
background: #123250;
outline: none;
}
.home-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 40px;
height: calc(100vh - 56px - 40px);
min-height: 420px;
position: relative;
overflow: hidden;
}
.logo-frame {
width: 50%;
height: 100%;
border: none;
display: block;
flex-shrink: 0;
}
.hero-wrapper {
position: relative;
width: 100vw;
height: 100vh;
}
.btn-explore-index {
border: 3px solid #123250;
color: #123250;
background-color: transparent;
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 12px;
}
/* Diamond Page*/
.diamond-header,
.diamond-results-header,
.diamond-unique-header {
text-align: center;
font-weight: 900;
color: var(--av-ink);
letter-spacing: .2px;
}
.diamond-header { font-size: clamp(22px, 3vw, 30px); margin: 0 0 18px; }
.diamond-results-header { font-size: clamp(20px, 2.6vw, 28px); margin: 0 0 14px; }
.diamond-unique-header { font-size: 20px; margin: 28px 0 8px; }
.diamond-results-parameters {
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--av-ink);
padding-bottom: 0.65rem;
border-bottom: 2px solid rgba(230,166,70,.25);
margin: 18px 0 12px;
}
#diamond-searcher,
.diamond-results {
max-width: 1100px;
margin: 0 auto;
}
.load-example-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
padding: 8px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
text-decoration: none;
cursor: pointer;
border: 2px solid #123250;
background: #123250;
color: var(--av-accent);
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.load-example-btn:hover {
background: transparent;
color: #123250;
}
.load-example-btn:active { transform: translateY(1px); }
.diamond-add-fasta-input {
display: block;
text-align: center;
color: rgba(27,42,34,.85);
font-weight: 600;
margin: 0 0 10px;
font-size: 0.88rem;
}
#diamond-searcher {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
}
.diamond-fasta-input {
width: 100%;
min-height: 220px;
resize: vertical;
border-radius: 8px;
border: 1px solid rgba(27,42,34,.18);
background: rgba(255,255,255,.92);
padding: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 13px;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
transition: border-color .2s ease, box-shadow .2s ease;
}
.diamond-fasta-input:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
.form-row {
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
align-items: center;
margin-top: 12px;
}
.form-row label {
font-weight: 900;
color: rgba(27,42,34,.92);
font-size: 13px;
margin: 0;
}
.form-row input[type="number"],
.form-row input[type="file"],
.form-row select {
border-radius: 10px;
border: 1px solid rgba(27,42,34,.18);
background: rgba(255,255,255,.88);
padding: 8px 10px;
font-size: 13px;
color: var(--av-ink);
transition: box-shadow .2s ease, border-color .2s ease;
}
.form-row input[type="number"] { width: 110px; }
.form-row select { min-width: 160px; }
.form-row input[type="file"] { padding: 7px 10px; }
.form-row input:focus,
.form-row select:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
.form-upload {
background: rgba(255,255,255,.55);
border: 1px dashed rgba(27,42,34,.18);
border-radius: 8px;
padding: 10px 12px;
}
.search-diamond {
padding: 9px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
border: 2px solid #123250;
background: #123250;
color: var(--av-accent);
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.search-diamond:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.search-diamond:active { transform: translateY(1px); }
.download-section {
max-width: 1100px;
margin: 0 auto 14px;
display: flex;
justify-content: flex-end;
}
.download-section a {
text-decoration: none;
border-radius: 999px;
padding: 9px 18px;
font-size: 13px;
font-weight: 900;
border: 2px solid #123250;
background: transparent;
color: #123250;
transition: background .15s, color .15s, box-shadow .15s;
}
.download-section a:hover {
background: #123250;
color: var(--av-accent);
box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
#loader {
max-width: 900px;
margin: 18px auto;
padding: 1.4rem 1.8rem;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
text-align: center;
}
#loader p {
margin: 0 0 10px;
font-weight: 900;
color: rgba(27,42,34,.85);
}
.diamond-query-section {
max-width: 1100px;
margin: 0 auto 1.4rem;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.6rem 1.8rem;
}
.diamond-query-section > h3 {
margin: 0 0 1rem;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--av-ink);
padding-bottom: 0.65rem;
border-bottom: 2px solid rgba(230,166,70,.25);
}
.diamond-hit-section {
background: rgba(255,255,255,.70);
border: 1px solid rgba(27,42,34,.10);
border-radius: 8px;
padding: 12px 14px 10px;
margin-bottom: 12px;
}
.diamond-hit-section h4 {
margin: 0 0 10px;
font-weight: 900;
font-size: 0.9rem;
color: rgba(27,42,34,.95);
}
.diamond-hit-section a {
color: var(--av-ink);
text-decoration: none;
font-weight: 700;
border-bottom: 2px solid rgba(230,166,70,.5);
}
.diamond-hit-section a:hover { border-bottom-color: var(--av-accent); }
.diamond-results-parameters-tbl {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
margin-bottom: 1.2rem;
font-size: 13px;
}
.diamond-results-parameters-tbl th,
.diamond-results-parameters-tbl td {
padding: 10px 14px;
border-bottom: 1px solid rgba(27,42,34,.08);
}
.diamond-results-parameters-tbl th {
width: 240px;
font-weight: 900;
color: #e8a744;
text-align: left;
}
.diamond-results-parameters-tbl tr:last-child th,
.diamond-results-parameters-tbl tr:last-child td { border-bottom: none; }
.diamond-hit-table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
}
.diamond-hit-table thead th {
padding: 10px 10px;
font-size: 13px;
font-weight: 900;
color: #e8a744;
background: #1a4a6b;
border-bottom: none;
white-space: nowrap;
}
.diamond-hit-table tbody td {
padding: 9px 10px;
border-bottom: 1px solid rgba(27,42,34,.07);
vertical-align: middle;
}
.diamond-hit-table tbody tr:hover td { background: rgba(230,166,70,.07); }
.diamond-hit-table tbody tr:last-child td { border-bottom: none; }
.diamond-show-btn {
appearance: none;
border: 2px solid #123250;
background: transparent;
color: #123250;
border-radius: 999px;
padding: 5px 12px;
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.diamond-show-btn:hover {
background: #123250;
color: var(--av-accent);
box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.diamond-show-btn:active { transform: translateY(1px); }
.alignment-row td { background: rgba(248,250,253,.95); }
.alignment-box {
margin: 0;
padding: 12px;
border-radius: 8px;
border: 1px solid #e4eaf2;
background: #fff;
max-height: 360px;
overflow: auto;
font-size: 12.5px;
line-height: 1.35;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.diamond-unique-count {
max-width: 1100px;
margin: 0 auto 10px;
font-weight: 900;
color: rgba(27,42,34,.85);
text-align: center;
font-size: 13px;
}
.diamond-unique {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
max-width: 1100px;
margin: 0 auto;
}
.diamond-unique thead th {
padding: 10px 14px;
font-weight: 900;
font-size: 13px;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
text-align: left;
}
.diamond-unique tbody td {
padding: 10px 14px;
border-bottom: 1px solid rgba(27,42,34,.07);
}
.diamond-unique tbody tr:hover td { background: rgba(230,166,70,.07); }
.diamond-unique tbody tr:last-child td { border-bottom: none; }
.hit-link {
color: var(--av-ink);
text-decoration: none;
font-weight: 900;
border-bottom: 2px solid rgba(230,166,70,.50);
}
.hit-link:hover { border-bottom-color: var(--av-accent); }
@media (max-width: 768px) {
#diamond-searcher { padding: 1.2rem; }
.form-row { gap: 10px; }
.form-row input[type="number"] { width: 96px; }
.diamond-results-parameters-tbl th { width: 140px; }
#loader img { width: min(320px, 92vw) !important; }
}
/* hmmersearch Page*/
.hmm-search-title {
text-align: center;
font-weight: 900;
color: #123250;
letter-spacing: .2px;
font-size: clamp(22px, 3vw, 30px);
margin: 0 0 18px;
}
.hmm-search-box {
max-width: 1100px;
margin: 0 auto 1.8rem;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.8rem 2rem;
}
.hmm-search-box h4 {
margin: 14px 0 8px;
font-weight: 900;
color: #123250;
font-size: 0.92rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.hmm-search-box p {
margin: 6px 0 10px;
color: rgba(18,50,80,.80);
font-weight: 600;
font-size: 0.88rem;
}
.outer-link {
color: #123250;
text-decoration: none;
border-bottom: 2px solid rgba(230,166,70,.6);
font-weight: 800;
}
.outer-link:hover { border-bottom-color: #e8a744; }
#fastainput {
width: 100%;
min-height: 220px;
resize: vertical;
border-radius: 8px;
border: 1px solid rgba(18,50,80,.18);
background: rgba(255,255,255,.92);
padding: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 13px;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
transition: border-color .2s ease, box-shadow .2s ease;
}
#fastainput:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
#hmmerForm input[type="file"] {
border-radius: 10px;
border: 1px solid rgba(18,50,80,.18);
background: rgba(255,255,255,.88);
padding: 8px 10px;
color: #123250;
}
.form-section {
margin-top: 14px;
padding: 14px 16px 12px;
background: rgba(255,255,255,.55);
border: 1px dashed rgba(18,50,80,.18);
border-radius: 8px;
}
.form-right h4 { margin-top: 0; }
.radio-group {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
margin: 6px 0 12px;
align-items: center;
}
.radio-group label {
font-weight: 900;
color: #123250;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.radio-group input[type="radio"] { accent-color: #e8a744; }
.hmm-parameters-grid {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 12px 14px;
margin-top: 6px;
}
.hmm-parameters-grid label {
display: block;
margin-bottom: 6px;
font-weight: 900;
color: #123250;
font-size: 13px;
}
.hmm-parameter-input {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(18,50,80,.18);
background: rgba(255,255,255,.88);
padding: 8px 10px;
color: #123250;
font-size: 13px;
transition: box-shadow .2s ease, border-color .2s ease;
}
.hmm-parameter-input:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
#hmmerForm button[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 28px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
cursor: pointer;
border: 2px solid #123250;
background: #123250;
color: #e8a744;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
#hmmerForm button[type="submit"]:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
#hmmerForm button[type="submit"]:active { transform: translateY(1px); }
.hmmer-results-parameters {
max-width: 1100px;
margin: 24px auto 10px;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: #123250;
text-align: center;
}
.hmmer-results-parameters-tbl {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.8rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
}
.hmmer-results-parameters-tbl th,
.hmmer-results-parameters-tbl td {
padding: 10px 14px;
border-bottom: 1px solid rgba(18,50,80,.08);
}
.hmmer-results-parameters-tbl th {
width: 280px;
font-weight: 900;
text-align: left;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
}
.hmmer-results-parameters-tbl tr:last-child th,
.hmmer-results-parameters-tbl tr:last-child td { border-bottom: none; }
div > h3 {
max-width: 1100px;
margin: 18px auto 10px;
font-weight: 900;
color: #123250;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
}
.hmmer-results {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.8rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.hmmer-results thead th {
padding: 10px 12px;
font-size: 13px;
font-weight: 900;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
white-space: nowrap;
}
.hmmer-results tbody td {
padding: 9px 12px;
border-bottom: 1px solid rgba(18,50,80,.07);
vertical-align: middle;
}
.hmmer-results tbody tr:hover td { background: rgba(230,166,70,.07); }
.hmmer-results tbody tr:last-child td { border-bottom: none; }
.alignment-toggle {
display: inline-block;
text-decoration: none;
border: 2px solid #123250;
color: #123250;
background: transparent;
border-radius: 999px;
padding: 5px 12px;
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
user-select: none;
}
.alignment-toggle:hover {
background: #123250;
color: #e8a744;
box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.alignment-toggle:active { transform: translateY(1px); }
[id^="align-"] {
max-width: 1100px;
margin: 0 auto 1.4rem;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.4rem 1.8rem;
}
[id^="align-"] h3 {
margin: 0 0 8px;
font-weight: 900;
color: #123250;
}
[id^="align-"] h5 {
margin: 0 0 6px;
font-weight: 800;
font-size: 0.88rem;
color: rgba(18,50,80,.90);
}
[id^="align-"] p {
margin: 4px 0;
color: rgba(18,50,80,.80);
font-weight: 600;
font-size: 0.85rem;
}
.alignment-block {
max-width: 100%;
margin-top: 10px;
padding: 12px;
border-radius: 8px;
border: 1px solid #e4eaf2;
background: rgba(248,250,253,.95);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12.5px;
line-height: 1.35;
overflow: auto;
}
.form-buttons {
max-width: 1100px;
margin: 18px auto 30px;
display: flex;
gap: 12px;
justify-content: flex-end;
flex-wrap: wrap;
}
.form-buttons button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
cursor: pointer;
border: 2px solid #123250;
background: transparent;
color: #123250;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.form-buttons button:hover {
background: #123250;
color: #e8a744;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.form-buttons button:active { transform: translateY(1px); }
@media (max-width: 768px) {
.hmm-search-box { padding: 1.2rem; }
.hmm-parameters-grid { grid-template-columns: 1fr; }
#loader img { width: min(320px, 92vw) !important; }
.hmmer-results-parameters-tbl th { width: 160px; }
}
.unique-hits-header{
max-width: 1100px;
margin: 26px auto 8px;
text-align:center;
font-weight: 900;
color: var(--av-ink);
}
.unique-hits-count{
max-width: 1100px;
margin: 0 auto 10px;
text-align:center;
font-weight: 900;
color: rgba(27,42,34,.85);
}
@media (max-width: 768px){
#hmmerForm .hmm-parameters-grid{ grid-template-columns: 1fr; }
.hmmer-results-parameters-tbl th{ width: 180px; }
}
/* Pattern Page */
.pattern-container {
max-width: 1100px;
margin: 0 auto;
}
.pattern-header {
text-align: center;
font-weight: 900;
color: #123250;
letter-spacing: .2px;
font-size: clamp(22px, 3vw, 30px);
margin: 0 0 18px;
}
.pattern-results-header {
text-align: center;
font-weight: 900;
color: #123250;
margin: 22px 0 10px;
font-size: clamp(20px, 2.6vw, 28px);
}
.pattern-title,
.pattern-results-parameters,
.pattern-unique-header {
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: #123250;
padding-bottom: 0.65rem;
border-bottom: 2px solid rgba(230,166,70,.25);
margin-bottom: 1rem;
}
.pattern-title { margin: 14px 0 10px; }
.pattern-results-parameters { margin: 18px 0 10px; text-align: center; border-bottom: none; }
.pattern-unique-header { margin: 26px 0 8px; text-align: center; border-bottom: none; }
#patternForm {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
}
#pattern {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(18,50,80,.18);
background: rgba(255,255,255,.88);
padding: 10px 12px;
font-size: 15px;
font-weight: 700;
color: #123250;
margin: 6px 0 10px;
transition: border-color .2s ease, box-shadow .2s ease;
}
#pattern:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
.pattern-type {
margin-top: 12px;
padding: 12px 14px 10px;
background: rgba(255,255,255,.55);
border: 1px dashed rgba(18,50,80,.18);
border-radius: 8px;
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: center;
}
.pattern-type label {
font-weight: 900;
color: #123250;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
}
.pattern-type input[type="radio"] { accent-color: #e8a744; }
.pattern-type a {
color: #123250;
text-decoration: none;
border-bottom: 2px solid rgba(230,166,70,.6);
font-weight: 800;
}
.pattern-type a:hover { border-bottom-color: #e8a744; }
.pattern-form-buttons {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 16px;
}
.pattern-form-buttons button,
.pattern-form-buttons .btn-explore {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 24px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
cursor: pointer;
border: 2px solid #123250;
background: #123250;
color: #e8a744;
text-decoration: none;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.pattern-form-buttons button:hover,
.pattern-form-buttons .btn-explore:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.pattern-form-buttons button:active,
.pattern-form-buttons .btn-explore:active { transform: translateY(1px); }
.pattern-results-parameters-tbl {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.6rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
}
.pattern-results-parameters-tbl th,
.pattern-results-parameters-tbl td {
padding: 10px 14px;
border-bottom: 1px solid rgba(18,50,80,.08);
}
.pattern-results-parameters-tbl th {
width: 260px;
font-weight: 900;
text-align: left;
color: #e8a744;
}
.pattern-results-parameters-tbl tr:last-child th,
.pattern-results-parameters-tbl tr:last-child td { border-bottom: none; }
.pattern-results {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.8rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pattern-results thead td {
padding: 10px 12px;
font-size: 13px;
font-weight: 900;
color: #e8a744;
background: #123250;
border-bottom: none;
white-space: nowrap;
}
.pattern-results tbody td {
padding: 9px 12px;
border-bottom: 1px solid rgba(18,50,80,.07);
font-size: 13px;
vertical-align: top;
}
.pattern-results tbody tr:hover td { background: rgba(230,166,70,.07); }
.pattern-results tbody tr:last-child td { border-bottom: none; }
.no-underline {
color: #123250;
text-decoration: none;
font-weight: 900;
}
.no-underline:hover { border-bottom: 2px solid rgba(230,166,70,.55); }
.pattern-results code {
background: rgba(230,166,70,.12);
border: 1px solid rgba(18,50,80,.10);
border-radius: 8px;
padding: 2px 6px;
color: rgba(18,50,80,.95);
font-weight: 900;
}
.consensus-seq {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12.5px;
line-height: 1.35;
word-break: break-word;
}
.consensus-seq .w3-yellow,
.consensus-seq .w3-blue {
background: rgba(230,166,70,.25) !important;
color: #123250 !important;
padding: 0 2px;
border-radius: 4px;
}
.pattern-container form[action*="Download"] button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
cursor: pointer;
border: 2px solid #123250;
background: transparent;
color: #123250;
margin-top: 16px;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.pattern-container form[action*="Download"] button:hover {
background: #123250;
color: #e8a744;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.pattern-container form[action*="Download"] button:active { transform: translateY(1px); }
.pattern-unique-count {
max-width: 1100px;
margin: 0 auto 10px;
text-align: center;
font-weight: 900;
font-size: 13px;
color: rgba(18,50,80,.85);
}
.pattern-unique {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.8rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
}
.pattern-unique thead th {
padding: 10px 14px;
font-weight: 900;
font-size: 13px;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
text-align: left;
}
.pattern-unique tbody td {
padding: 10px 14px;
border-bottom: 1px solid rgba(18,50,80,.07);
}
.pattern-unique tbody tr:hover td { background: rgba(230,166,70,.07); }
.pattern-unique tbody tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
.pattern-container { padding: 0 10px; }
#patternForm { padding: 1.2rem; }
.pattern-results-parameters-tbl th { width: 160px; }
}
/* Reseek Page */
.reseek-title,
.reseek-results-header {
text-align: center;
font-weight: 900;
color: #123250;
letter-spacing: .2px;
}
.reseek-title { font-size: clamp(22px, 3vw, 30px); margin: 0 0 18px; }
.reseek-results-header { font-size: clamp(20px, 2.6vw, 28px); margin: 22px 0 10px; }
.reseek-results-parameters,
.unique-hits-header {
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: #123250;
text-align: center;
margin: 18px 0 10px;
}
#reseek-searcher,
.reseek-results,
.citation {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.reseek-add-text-input {
display: block;
text-align: center;
color: rgba(18,50,80,.80);
font-weight: 600;
font-size: 0.88rem;
margin: 0 0 14px;
}
#reseek-searcher {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
}
.reseek-text-input {
width: 100%;
min-height: 260px;
resize: vertical;
border-radius: 8px;
border: 1px solid rgba(18,50,80,.18);
background: rgba(255,255,255,.92);
padding: 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 13px;
line-height: 1.35;
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
transition: border-color .2s ease, box-shadow .2s ease;
}
.reseek-text-input:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
#reseek-searcher .form-row {
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
align-items: center;
margin-top: 12px;
}
#reseek-searcher .form-row label {
font-weight: 900;
color: #123250;
font-size: 13px;
margin: 0;
}
#reseek-searcher input[type="number"],
#reseek-searcher input[type="file"],
#reseek-searcher select {
border-radius: 10px;
border: 1px solid rgba(18,50,80,.18);
background: rgba(255,255,255,.88);
padding: 8px 10px;
font-size: 13px;
color: #123250;
transition: box-shadow .2s ease, border-color .2s ease;
}
#reseek-searcher input[type="number"] { width: 120px; }
#reseek-searcher select { min-width: 190px; }
#reseek-searcher input:focus,
#reseek-searcher select:focus {
outline: none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
#reseek-searcher .form-upload {
background: rgba(255,255,255,.55);
border: 1px dashed rgba(18,50,80,.18);
border-radius: 8px;
padding: 10px 12px;
}
.search-reseek {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 28px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
cursor: pointer;
border: 2px solid #123250;
background: #123250;
color: #e8a744;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.search-reseek:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.search-reseek:active { transform: translateY(1px); }
.reseek-search-area {
display: flex;
justify-content: center;
margin-top: 14px;
}
.reseek-results-parameters-tbl {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.6rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
}
.reseek-results-parameters-tbl th,
.reseek-results-parameters-tbl td {
padding: 10px 14px;
border-bottom: 1px solid rgba(18,50,80,.08);
}
.reseek-results-parameters-tbl th {
width: 260px;
font-weight: 900;
text-align: left;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
}
.reseek-results-parameters-tbl tr:last-child th,
.reseek-results-parameters-tbl tr:last-child td { border-bottom: none; }
.reseek-query-section {
max-width: 1100px;
margin: 0 auto 1.4rem;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
padding: 1.6rem 1.8rem;
}
.reseek-query-section > h3 {
margin: 0 0 1rem;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: #123250;
padding-bottom: 0.65rem;
border-bottom: 2px solid rgba(230,166,70,.25);
}
.reseek-hit-table {
width: 100%;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.reseek-hit-table thead th {
padding: 10px 10px;
font-size: 13px;
font-weight: 900;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
white-space: nowrap;
}
.reseek-hit-table tbody td {
padding: 9px 10px;
border-bottom: 1px solid rgba(18,50,80,.07);
font-size: 13px;
white-space: nowrap;
vertical-align: middle;
}
.reseek-hit-table tbody tr:hover td { background: rgba(230,166,70,.07); }
.reseek-hit-table tbody tr:last-child td { border-bottom: none; }
.alignment-row td { background: rgba(248,250,253,.95); white-space: normal; }
.link-element {
color: #123250;
text-decoration: none;
border-bottom: 2px solid rgba(230,166,70,.55);
font-weight: 900;
}
.link-element:hover { border-bottom-color: #e8a744; color: #123250; }
.reseek-show-btn {
appearance: none;
border: 2px solid #123250;
background: transparent;
color: #123250;
border-radius: 999px;
padding: 5px 12px;
font-size: 12px;
font-weight: 900;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.reseek-show-btn:hover {
background: #123250;
color: #e8a744;
box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.reseek-show-btn:active { transform: translateY(1px); }
.hmmer-unique {
width: 100%;
max-width: 1100px;
margin: 0 auto 1.8rem;
border-collapse: collapse;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e4eaf2;
background: #fff;
font-size: 13px;
}
.hmmer-unique thead th {
padding: 10px 14px;
font-weight: 900;
font-size: 13px;
color: #e8a744;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
text-align: left;
}
.hmmer-unique tbody td {
padding: 10px 14px;
border-bottom: 1px solid rgba(18,50,80,.07);
}
.hmmer-unique tbody tr:hover td { background: rgba(230,166,70,.07); }
.hmmer-unique tbody tr:last-child td { border-bottom: none; }
.unique-hits-count {
max-width: 1100px;
margin: 0 auto 10px;
text-align: center;
font-weight: 900;
font-size: 13px;
color: rgba(18,50,80,.85);
}
.citation {
margin-top: 18px;
margin-bottom: 70px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
font-size: 0.85rem;
color: rgba(18,50,80,.80);
}
@media (max-width: 768px) {
#reseek-searcher { padding: 1.2rem; }
#reseek-searcher select { min-width: 160px; }
#reseek-searcher input[type="number"] { width: 96px; }
.reseek-results-parameters-tbl th { width: 160px; }
#loader img { width: min(320px, 92vw) !important; }
}
/* About Page */
.subpage-hero {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
padding: 4rem 2rem;
margin-bottom: 2rem;
border-radius: 0 0 16px 16px;
box-shadow: 0 8px 28px rgba(15,39,68,.18);
}
.hero-title {
font-size: 2.4rem;
font-weight: 900;
color: #fff;
letter-spacing: -0.5px;
margin: 0 0 0.6rem;
}
.hero-subtitle {
font-size: 1rem;
color: rgba(255,255,255,.70);
font-weight: 500;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.about-contact-section {
padding: 0 18px 40px;
}
.about-contact-section .container {
max-width: 1200px;
margin: 0 auto;
}
.about-card {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
height: 100%;
}
.section-title {
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--av-ink);
padding-bottom: 0.7rem;
border-bottom: 2px solid rgba(230,166,70,.25);
margin-bottom: 1.2rem !important;
}
.section-text {
font-size: 0.88rem;
color: rgba(27,42,34,.80);
font-weight: 500;
line-height: 1.65;
}
.section-text strong {
font-weight: 900;
color: var(--av-ink);
display: block;
margin: 1rem 0 0.4rem;
}
.section-text strong:first-child {
margin-top: 0;
}
.contact-person {
padding: 0.6rem 0.9rem;
margin: 0.4rem 0;
border-left: 3px solid rgba(230,166,70,.55);
background: rgba(230,166,70,.05);
border-radius: 0 6px 6px 0;
}
.person-name {
font-size: 0.88rem;
font-weight: 900;
color: var(--av-ink);
margin: 0 0 0.1rem;
}
.contact-person .section-text {
font-size: 0.82rem;
color: rgba(27,42,34,.60);
margin: 0;
}
.collab-logos {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.2rem;
margin: 0.8rem 0 1.4rem;
}
.abt-logo-img {
display: inline-flex;
align-items: center;
opacity: 0.85;
transition: opacity .15s, transform .15s;
}
.abt-logo-img:hover {
opacity: 1;
transform: translateY(-1px);
}
.collab-logo {
height: 48px;
width: auto;
object-fit: contain;
}
.logo-img {
display: inline-flex;
align-items: center;
opacity: 0.85;
transition: opacity .15s, transform .15s;
}
.logo-img:hover {
opacity: 1;
transform: translateY(-1px);
}
.data-logo {
height: 40px;
width: auto;
object-fit: contain;
}
@media (max-width: 768px) {
.subpage-hero {
padding: 2.5rem 1.2rem;
border-radius: 0 0 10px 10px;
}
.hero-title {
font-size: 1.8rem;
}
.about-contact-section {
padding: 0 12px 30px;
}
.about-card {
margin-bottom: 1.2rem;
}
}
/* Dataset Info Page */
.dsinfo-page {
width: 100%;
margin: 0;
padding: 18px 18px 28px;
}
.dsinfo-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
.tax-info-searchbytaxon.dsinfo-card {
background: #fff !important;
border: 1px solid #e4eaf2 !important;
border-radius: 12px !important;
padding: 1.8rem 2rem !important;
margin-bottom: 1.8rem !important;
box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
.dsinfo-form-row {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
align-items: end;
padding: 12px 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
}
.dsinfo-field {
flex: 1 1 240px;
min-width: 220px;
}
.dsinfo-label {
display: block;
font-size: 12px;
font-weight: 900;
color: rgba(27,42,34,.65);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.dsinfo-actions {
flex: 0 0 auto;
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: flex-end;
}
.dsinfo-input,
.dsinfo-select {
width: 100%;
border-radius: 12px !important;
border: 1px solid rgba(27,42,34,.18) !important;
background: rgba(255,255,255,.88) !important;
padding: 10px 12px !important;
color: var(--av-ink) !important;
font-size: 13px;
transition: box-shadow .2s ease, border-color .2s ease;
}
.dsinfo-input:focus,
.dsinfo-select:focus {
outline: none !important;
border-color: rgba(230,166,70,.7) !important;
box-shadow: 0 0 0 3px rgba(230,166,70,.22) !important;
}
.dsinfo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
text-decoration: none !important;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
border: 2px solid #174162;
}
.dsinfo-btn.btn-explore {
background: #174162;
color: var(--av-accent);
}
.dsinfo-btn.btn-explore:hover {
background: transparent;
color: var(--av-ink);
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.dsinfo-btn.btn-explore-reverse {
background: transparent;
color: #174162;
}
.dsinfo-btn.btn-explore-reverse:hover {
background: #174162;
color: var(--av-accent);
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.dsinfo-btn:active { transform: translateY(1px); }
.dsinfo-range {
width: 100%;
padding: 12px 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
}
.dsinfo-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 900;
color: rgba(27,42,34,.92);
margin: 0 0 10px;
cursor: pointer;
}
.dsinfo-checkbox input[type="checkbox"] {
accent-color: var(--av-accent);
width: 15px;
height: 15px;
}
.dsinfo-slider { width: 100%; margin: 12px 0 6px; }
.range-slider-custom .noUi-target {
border: 1px solid rgba(27,42,34,.18);
background: rgba(255,255,255,.85);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
border-radius: 999px;
}
.range-slider-custom .noUi-connect { background: rgba(230,166,70,.75); }
.range-slider-custom .noUi-handle {
border: 2px solid rgba(27,42,34,.65);
background: rgba(255,255,255,.95);
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.range-slider-custom .noUi-tooltip {
border: 1px solid rgba(27,42,34,.14);
background: rgba(255,255,255,.96);
border-radius: 10px;
font-weight: 900;
color: var(--av-ink);
font-size: 12px;
}
.dsinfo-meta {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
padding: 12px 0 0;
}
.dsinfo-pill {
position: relative;
padding: 10px 18px;
background: rgba(255,255,255,.70);
color: rgba(27,42,34,.92);
font-weight: 900;
font-size: 13px;
letter-spacing: .1px;
border: 1px solid rgba(27,42,34,.12);
box-shadow: 0 10px 22px rgba(0,0,0,.06);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
}
.dsinfo-pill::before {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
border: 1px solid rgba(230,166,70,.35);
pointer-events: none;
}
.dsinfo-pagesize {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.dsinfo-pagesize .dsinfo-select {
width: auto;
min-width: 90px;
}
.dsinfo-summary {
background: #fff !important;
border: 1px solid #e4eaf2 !important;
border-radius: 12px !important;
padding: 1.2rem 1.8rem !important;
margin-bottom: 1.8rem !important;
box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
}
.dsinfo-card-title {
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--av-ink);
margin: 0 0 8px;
}
.dsinfo-summary-list {
margin: 0;
padding-left: 18px;
color: rgba(27,42,34,.86);
font-weight: 650;
font-size: 13px;
}
.dsinfo-tablewrap {
background: #fff !important;
border: 1px solid #e4eaf2 !important;
border-radius: 12px !important;
padding: 1.8rem 2rem !important;
margin-bottom: 1.8rem !important;
box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
overflow: hidden;
}
.dsinfo-table {
width: 100%;
border: none !important;
background: transparent !important;
}
.dsinfo-row {
display: grid;
grid-template-columns:
minmax(120px, 1fr)
minmax(260px, 2.4fr)
140px
minmax(180px, 1.8fr)
120px
120px;
align-items: stretch;
border-bottom: 1px solid rgba(27,42,34,.08);
}
.dsinfo-col {
padding: 10px 12px;
border-bottom: none;
display: flex;
align-items: center;
background: transparent;
}
.dsinfo-row-head {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
border-radius: 8px;
margin-bottom: 2px;
}
.dsinfo-link-tbl {
color: #e8a744 !important;
text-decoration: none;
font-weight: 900;
font-size: 13px;
letter-spacing: .2px;
}
.dsinfo-link-tbl:hover { color: #fff !important; }
.dsinfo-row:not(.dsinfo-row-head):hover .dsinfo-col {
background: rgba(230,166,70,.08);
}
.dsinfo-link {
color: var(--av-ink);
text-decoration: none;
font-weight: 900;
font-size: 13px;
display: inline-block;
line-height: 1.2;
}
.dsinfo-link:hover {
color: var(--av-ink);
border-bottom: 2px solid rgba(230,166,70,.55);
}
.dsinfo-text {
font-size: 13px;
color: rgba(27,42,34,.88);
font-weight: 650;
overflow-wrap: anywhere;
word-break: break-word;
}
.dsinfo-muted {
color: rgba(27,42,34,.35);
font-size: 13px;
font-weight: 650;
}
.dsinfo-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
height: 32px;
line-height: 1;
align-self: center;
font-size: 12px;
font-weight: 900;
color: rgba(27,42,34,.92);
background: rgba(230,166,70,.12);
border: 1px solid rgba(27,42,34,.10);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.dsinfo-col-map {
font-weight: 900;
color: #e8a744;
font-size: 13px;
}
.hex-btn {
--hex-border: var(--av-accent);
--hex-text: var(--av-ink);
--hex-hover-bg: var(--av-ink);
--hex-hover-text: var(--av-accent);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 14px;
font-size: 12.5px;
font-weight: 900;
text-decoration: none;
color: var(--hex-text);
background: #fcf4e9;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.hex-btn::after {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
border: 1px solid rgba(230,166,70,.35);
pointer-events: none;
}
.hex-btn:hover {
background: var(--hex-hover-bg);
color: var(--hex-hover-text);
box-shadow: 0 10px 18px rgba(0,0,0,.12);
}
.hex-btn:active { transform: translateY(1px); }
.dsinfo-empty {
padding: 2rem;
text-align: center;
color: rgba(27,42,34,.45);
font-weight: 650;
font-size: 0.9rem;
}
.dsinfo-pagination {
width: 100%;
margin: 14px 0 0;
padding: 12px 0 0;
border-top: 1px solid rgba(27,42,34,.10);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.dsinfo-pagination-left {
font-size: 13px;
font-weight: 650;
color: rgba(27,42,34,.70);
}
.dsinfo-pagination-right {
display: flex;
gap: 10px;
}
@media (max-width: 980px) {
.dsinfo-tablewrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.dsinfo-row { min-width: 980px; }
}
@media (max-width: 768px) {
.dsinfo-page { padding: 14px 12px 24px; }
.tax-info-searchbytaxon.dsinfo-card { padding: 1.2rem !important; }
}
/* MetaData Page */
.md-page {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
.md-hero {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-radius: 0 0 16px 16px;
padding: 2.8rem 2.5rem 2.4rem;
margin-bottom: 2rem;
box-shadow: 0 8px 28px rgba(15,39,68,.18);
text-align: center;
}
.md-hero-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 900;
color: #fff;
margin: 0;
letter-spacing: -0.3px;
word-break: break-all;
}
.md-hero-title span {
display: block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #e8a744;
margin-bottom: 0.4rem;
}
.md-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 860px) {
.md-grid {
grid-template-columns: 1fr;
}
}
.md-card {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.6rem 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.md-card-title {
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: #0f2744;
border-bottom: 2px solid rgba(230,166,70,.25);
padding-bottom: 0.65rem;
margin: 0 0 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.md-card-icon {
font-size: 1rem;
opacity: 0.8;
}
.md-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.md-table tbody tr {
border-bottom: 1px solid rgba(27,42,34,.07);
}
.md-table tbody tr:last-child {
border-bottom: none;
}
.md-table tbody tr:hover td {
background: rgba(230,166,70,.06);
}
.md-key {
width: 42%;
padding: 0.6rem 0.75rem 0.6rem 0;
font-weight: 700;
color: rgba(27,42,34,.65);
vertical-align: top;
white-space: nowrap;
}
.md-val {
padding: 0.6rem 0;
font-weight: 500;
color: rgba(27,42,34,.88);
word-break: break-word;
overflow-wrap: anywhere;
}
.md-thead {
padding: 0.5rem 0.75rem 0.5rem 0;
font-weight: 900;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(27,42,34,.55);
border-bottom: 1px solid rgba(27,42,34,.10);
text-align: left;
}
.md-link {
color: #1a6fba;
text-decoration: none;
font-weight: 700;
border-bottom: 1px solid rgba(26,111,186,.3);
transition: border-color .15s, color .15s;
}
.md-link:hover {
color: #0f2744;
border-bottom-color: #e8a744;
}
.md-map-area {
margin-bottom: 2rem;
}
.md-map-card {
padding: 1.6rem 1.8rem;
}
#map {
width: 100%;
height: 380px;
border-radius: 8px;
border: 1px solid rgba(27,42,34,.10);
box-shadow: 0 4px 14px rgba(0,0,0,.06);
margin-bottom: 1rem;
overflow: hidden;
}
.md-map-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
text-decoration: none;
border: 2px solid #123250;
background: #123250;
color: #e8a744;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.md-map-btn:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.md-map-btn:active {
transform: translateY(1px);
}
@media (max-width: 768px) {
.md-page {
padding: 0 1rem 3rem;
}
.md-hero {
padding: 2rem 1.2rem 1.8rem;
}
.md-card {
padding: 1.2rem;
}
.md-key {
white-space: normal;
}
#map {
height: 280px;
}
}
/* Scaffolds Page */
.scaff-page {
width: 100%;
margin: 0;
padding: 18px 18px 28px;
}
.scaff-card {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.scaff-grid {
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
align-items: end;
padding: 0 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
}
.scaff-field {
flex: 1 1 220px;
min-width: 200px;
}
.scaff-label {
display: block;
font-size: 12px;
font-weight: 900;
color: rgba(27,42,34,.65);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.scaff-actions {
flex: 0 0 auto;
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: flex-end;
}
.scaff-input,
.scaff-select {
width: 100%;
border-radius: 12px !important;
border: 1px solid rgba(27,42,34,.18) !important;
background: rgba(255,255,255,.88) !important;
padding: 10px 12px !important;
color: var(--av-ink) !important;
font-size: 13px;
transition: box-shadow .2s ease, border-color .2s ease;
}
.scaff-input:focus,
.scaff-select:focus {
outline: none !important;
border-color: rgba(230,166,70,.7) !important;
box-shadow: 0 0 0 3px rgba(230,166,70,.22) !important;
}
.scaff-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
text-decoration: none !important;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
border: 2px solid #123250;
}
.scaff-btn.btn-explore {
background: #123250;
color: var(--av-accent);
}
.scaff-btn.btn-explore:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.scaff-btn.btn-explore-reverse {
background: transparent;
color: #123250;
}
.scaff-btn.btn-explore-reverse:hover {
background: #123250;
color: var(--av-accent);
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.scaff-btn:active { transform: translateY(1px); }
.scaff-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
padding: 12px 0 0;
}
.scaff-stats {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.scaff-pill {
position: relative;
padding: 10px 18px;
background: rgba(255,255,255,.70);
color: rgba(27,42,34,.92);
font-weight: 900;
font-size: 13px;
letter-spacing: .1px;
border: 1px solid rgba(27,42,34,.12);
box-shadow: 0 10px 22px rgba(0,0,0,.06);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
}
.scaff-pill::before {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
border: 1px solid rgba(230,166,70,.35);
pointer-events: none;
}
.scaff-pagesize {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.scaff-pagesize .scaff-select {
width: auto;
min-width: 90px;
}
.scaff-summary {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.2rem 1.8rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.scaff-card-title {
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--av-ink);
margin: 0 0 8px;
}
.scaff-summary-list {
margin: 0;
padding-left: 18px;
color: rgba(27,42,34,.86);
font-weight: 650;
font-size: 13px;
}
.scaf-general-results {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
overflow: hidden;
}
.scaff-table {
width: 100%;
}
.scaff-row {
display: grid;
grid-template-columns:
minmax(130px, 1.2fr)
minmax(160px, 1.8fr)
minmax(100px, .8fr)
minmax(100px, .8fr)
minmax(140px, 1.2fr)
minmax(160px, 1.4fr);
align-items: stretch;
border-bottom: 1px solid rgba(27,42,34,.08);
}
.scaff-col {
padding: 10px 12px;
display: flex;
align-items: center;
background: transparent;
}
.scaff-row-head {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
border-radius: 8px;
margin-bottom: 2px;
}
.scaff-link-tbl {
color: #e8a744 !important;
text-decoration: none;
font-weight: 900;
font-size: 13px;
letter-spacing: .2px;
}
.scaff-link-tbl:hover { color: #fff !important; }
.scaff-row:not(.scaff-row-head):hover .scaff-col {
background: rgba(230,166,70,.08);
}
.scaff-link {
color: var(--av-ink);
text-decoration: none;
font-weight: 900;
font-size: 13px;
display: inline-block;
line-height: 1.2;
}
.scaff-link:hover {
color: var(--av-ink);
border-bottom: 2px solid rgba(230,166,70,.55);
}
.scaff-num {
font-size: 13px;
font-weight: 850;
color: rgba(27,42,34,.90);
}
.scaff-text {
font-size: 13px;
font-weight: 650;
color: rgba(27,42,34,.88);
overflow-wrap: anywhere;
word-break: break-word;
}
.scaff-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
height: 32px;
line-height: 1;
align-self: center;
font-size: 12px;
font-weight: 900;
color: rgba(27,42,34,.92);
background: rgba(230,166,70,.12);
border: 1px solid rgba(27,42,34,.10);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.scaff-empty {
padding: 2rem;
text-align: center;
color: rgba(27,42,34,.45);
font-weight: 650;
font-size: 0.9rem;
}
.scaff-paging {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 0 0;
border-top: 1px solid rgba(27,42,34,.10);
margin-top: 4px;
}
.scaff-pageinfo {
font-size: 13px;
font-weight: 650;
color: rgba(27,42,34,.70);
}
.scaff-navbtns {
display: flex;
gap: 10px;
}
@media (max-width: 980px) {
.scaf-general-results { overflow-x: auto; }
.scaff-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scaff-row { min-width: 900px; }
}
@media (max-width: 768px) {
.scaff-page { padding: 14px 12px 24px; }
.scaff-card { padding: 1.2rem !important; }
}
/* Scaffold Info Page */
.scaffold-page {
width: 100%;
margin: 0;
padding: 18px 18px 28px;
}
.scaffold-hero {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-radius: 12px;
padding: 2.2rem 2.5rem;
margin-bottom: 1.8rem;
box-shadow: 0 8px 28px rgba(15,39,68,.20);
}
.scaffold-hero-inner { max-width: 100%; }
.scaffold-title {
font-size: 1.9rem;
font-weight: 900;
color: #fff;
margin: 0 0 0.3rem;
letter-spacing: -0.3px;
}
.scaffold-subtitle {
font-size: 0.88rem;
color: rgba(255,255,255,.65);
font-weight: 500;
margin: 0 0 1.4rem;
}
.scaffold-chips {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.chip {
display: inline-flex;
flex-direction: column;
padding: 0.55rem 1.1rem;
background: rgba(255,255,255,.10);
border: 1px solid rgba(232,167,68,.35);
border-radius: 10px;
min-width: 100px;
text-decoration: none;
transition: background .15s, border-color .15s;
}
.chip-link:hover {
background: rgba(232,167,68,.18);
border-color: rgba(232,167,68,.6);
}
.chip-label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #e8a744;
margin-bottom: 0.2rem;
}
.chip-value {
font-size: 0.88rem;
font-weight: 900;
color: #fff;
word-break: break-all;
}
.scaffold-content {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.6fr);
gap: 1.8rem;
align-items: start;
}
@media (max-width: 860px) {
.scaffold-content { grid-template-columns: 1fr; }
}
.scaffold-card {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.2rem;
padding-bottom: 0.7rem;
border-bottom: 2px solid rgba(230,166,70,.25);
}
.card-title {
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--av-ink);
margin: 0;
}
.card-subtitle {
font-size: 0.82rem;
color: rgba(27,42,34,.55);
font-weight: 500;
margin: 0;
}
.card-actions { flex-shrink: 0; }
.mini-link {
font-size: 0.8rem;
font-weight: 700;
color: #1a4a6b;
text-decoration: none;
}
.mini-link:hover { border-bottom: 2px solid rgba(230,166,70,.55); }
.scaffold-dl {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
.dl-row {
display: grid;
grid-template-columns: 130px 1fr;
gap: 0.5rem 1rem;
padding: 0.6rem 0;
border-bottom: 1px solid rgba(27,42,34,.07);
font-size: 0.85rem;
}
.dl-row:last-child { border-bottom: none; }
.dl-row dt {
font-weight: 900;
color: rgba(27,42,34,.60);
white-space: nowrap;
}
.dl-row dd {
font-weight: 650;
color: rgba(27,42,34,.90);
margin: 0;
word-break: break-word;
}
.scaffold-divider {
height: 1px;
background: rgba(27,42,34,.08);
margin: 1.2rem 0;
}
.scaffold-links {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.btn-like {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
text-decoration: none !important;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
border: 2px solid #123250;
background: #123250;
color: var(--av-accent);
}
.btn-like:hover {
background: transparent;
color: #123250;
box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.btn-like-outline {
background: transparent;
color: #123250;
}
.btn-like-outline:hover {
background: #123250;
color: var(--av-accent);
}
.btn-like:active { transform: translateY(1px); }
.honeycomb {
display: flex;
flex-wrap: wrap;
gap: 10px 8px;
padding: 0.5rem 0;
}
.hex {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 110px;
height: 64px;
background: rgba(230,166,70,.10);
border: 1px solid rgba(27,42,34,.12);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
text-decoration: none;
transition: background .15s, box-shadow .15s, transform .1s;
cursor: pointer;
}
.hex::after {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
border: 1px solid rgba(230,166,70,.30);
pointer-events: none;
}
.hex:hover {
background: #123250;
box-shadow: 0 8px 20px rgba(15,39,68,.18);
transform: translateY(-2px);
}
.hex:hover .hex-top,
.hex:hover .hex-id {
color: #e8a744;
}
.hex:active { transform: translateY(0); }
.hex-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
z-index: 1;
}
.hex-top {
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(27,42,34,.55);
transition: color .15s;
}
.hex-id {
font-size: 0.82rem;
font-weight: 900;
color: var(--av-ink);
transition: color .15s;
}
.empty-state {
padding: 2rem;
text-align: center;
color: rgba(27,42,34,.45);
font-weight: 650;
font-size: 0.9rem;
border: 1px dashed rgba(27,42,34,.15);
border-radius: 8px;
}
@media (max-width: 768px) {
.scaffold-page { padding: 14px 12px 24px; }
.scaffold-hero { padding: 1.6rem 1.4rem; }
.scaffold-title { font-size: 1.4rem; }
.scaffold-card { padding: 1.2rem; }
.dl-row { grid-template-columns: 110px 1fr; }
}
/* Isolates Page */
.iso-page{
width: 100%;
margin: 0;
padding: 18px 18px 28px;
}
.iso-card{
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
.scaf-general-filters.iso-card {
width: 100%;
margin: 0 0 14px;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.iso-header{
width: 100%;
display:flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 0 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
}
.iso-stats{
display:flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
}
.iso-pill{
position: relative;
padding: 10px 18px;
background: rgba(255,255,255,.70);
color: rgba(27,42,34,.92);
font-weight: 900;
letter-spacing: .1px;
border: 1px solid rgba(27,42,34,.12);
box-shadow: 0 10px 22px rgba(0,0,0,.06);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
}
.iso-pill::before{
content:"";
position:absolute;
inset: 2px;
clip-path: inherit;
border: 1px solid rgba(230,166,70,.35);
pointer-events:none;
}
.iso-grid{
width: 100%;
display:flex;
flex-wrap: wrap;
gap: 12px 14px;
align-items: end;
padding: 12px 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
}
.iso-field{
flex: 1 1 240px;
min-width: 220px;
}
.iso-actions{
flex: 0 0 auto;
display:flex;
gap: 10px;
flex-wrap: wrap;
}
.iso-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 900;
text-decoration: none !important;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.iso-btn:active { transform: translateY(1px); }
.iso-input,
.iso-select{
width: 100%;
border-radius: 12px;
border: 1px solid rgba(27,42,34,.18);
background: rgba(255,255,255,.88);
padding: 10px 12px;
color: var(--av-ink);
transition: box-shadow .2s ease, border-color .2s ease;
}
.iso-input:focus,
.iso-select:focus{
outline:none;
border-color: rgba(230,166,70,.7);
box-shadow: 0 0 0 3px rgba(230,166,70,.22);
}
.iso-label{
font-weight: 900;
color: rgba(27,42,34,.92);
margin: 0 0 6px;
display: inline-block;
}
.iso-pagesize{
margin-left: auto;
display:flex;
align-items: center;
gap: 10px;
padding: 12px 0 12px;
}
.iso-pagesize .iso-select{
width: auto;
min-width: 90px;
}
.iso-summary{
width: 100%;
margin: 14px 0 10px;
padding: 12px 0;
border-bottom: 1px solid rgba(27,42,34,.10);
}
.iso-card-title{
margin: 0 0 8px;
font-weight: 900;
color: var(--av-ink);
}
.iso-summary-list{
margin: 0;
padding-left: 18px;
color: rgba(27,42,34,.86);
font-weight: 650;
}
.iso-table{
width: 100%;
border: none !important;
background: transparent !important;
}
.iso-row {
display: grid;
grid-template-columns: minmax(160px, 1.6fr)
minmax(110px, .8fr)
minmax(110px, .8fr)
minmax(160px, 1.2fr)
minmax(180px, 1.4fr);
align-items: stretch;
border-bottom: 1px solid rgba(27,42,34,.08);
}
.iso-row-head {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
border-radius: 8px;
margin-bottom: 2px;
}
.iso-col{
padding: 10px 12px;
border-bottom: none !important;
display:flex;
align-items: center;
background: transparent;
}
.iso-row:not(.iso-row-head):hover .iso-col{
background: rgba(230,166,70,.08);
}
.iso-link-tbl {
color: #e8a744 !important;
text-decoration: none;
font-weight: 900;
font-size: 13px;
letter-spacing: .2px;
}
.iso-link-tbl:hover { color: #fff !important; }
.iso-link,
.no-underline.iso-link {
color: var(--av-ink) !important;
text-decoration: none;
font-weight: 900;
}
.iso-link:hover {
color: var(--av-ink) !important;
border-bottom: 2px solid rgba(230,166,70,.55);
}
.iso-num{
font-weight: 900;
color: rgba(27,42,34,.92);
}
.iso-badge{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
min-height: 32px;
font-weight: 900;
color: rgba(27,42,34,.92);
background: rgba(230,166,70,.12);
border: 1px solid rgba(27,42,34,.10);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.iso-text{
color: rgba(27,42,34,.86);
font-weight: 650;
}
.iso-empty {
padding: 2rem;
text-align: center;
color: rgba(27,42,34,.45);
font-weight: 650;
font-size: 0.9rem;
}
.iso-paging{
width: 100%;
margin: 14px 0 0;
padding: 12px 0 0;
border-top: 1px solid rgba(27,42,34,.10);
display:flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.iso-pageinfo{
font-weight: 800;
color: rgba(27,42,34,.9);
}
.iso-navbtns{
display:flex;
gap: 10px;
flex-wrap: wrap;
}
.iso-meta {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
padding: 12px 0 0;
}
@media (max-width: 980px) {
.iso-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.iso-row {
min-width: 820px;
}
}
@media (max-width: 768px){
.iso-page{ padding: 16px 12px 24px; }
}
/* Families Page */
/* Families Page */
.fam-general-searcharea {
width: 100%;
margin: 0;
padding: 18px 18px 28px;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.fam-general-searchbyfamily {
width: 100%;
}
.fam-general-searchbyfamily form {
width: 100%;
padding: 12px 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
align-items: end;
}
.fam-general-searchbyfamily .search-box-text,
.fam-general-searchbyfamily .search-box-dd,
.fam-general-searchbyfamily select {
border-radius: 12px !important;
border: 1px solid rgba(27,42,34,.18) !important;
background: rgba(255,255,255,.88) !important;
padding: 10px 12px !important;
color: var(--av-ink) !important;
transition: box-shadow .2s ease, border-color .2s ease;
}
.fam-general-searchbyfamily .search-box-text:focus,
.fam-general-searchbyfamily .search-box-dd:focus,
.fam-general-searchbyfamily select:focus {
outline: none !important;
border-color: rgba(230,166,70,.7) !important;
box-shadow: 0 0 0 3px rgba(230,166,70,.22) !important;
}
.fam-general-searchbyfamily select[style*="width:436px"] {
width: min(436px, 100%) !important;
}
#searchbyfamily,
#searchbycategory {
flex: 1 1 280px;
min-width: 240px;
}
#searchbytaxonomy,
#searchbyquality {
flex: 1 1 260px;
min-width: 220px;
}
/* Range sliders */
.ranges-filters {
padding: 12px 0 12px;
border-top: 1px solid rgba(27,42,34,.10);
border-bottom: 1px solid rgba(27,42,34,.10);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 55px;
flex: 1 1 100%;
width: 100%;
}
@media (max-width: 900px) {
.ranges-filters { grid-template-columns: 1fr; }
}
.plddt-range,
.ptm-range {
margin: 0;
gap: 40px;
}
.fams-checkbox {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 900;
color: rgba(27,42,34,.92);
margin: 0 0 10px;
}
.fams-checkbox input[type="checkbox"] {
accent-color: var(--av-accent);
}
.fams-slider { width: 100%; margin: 10px 0 6px; }
/* Habitat filter */
#habitat-filter,
.dsinfo-meta {
flex: 1 1 100%;
width: 100%;
}
#habitat-filter {
padding: 12px 0 12px;
border-bottom: 1px solid rgba(27,42,34,.10);
}
#habitat-filter > label {
display: block;
font-weight: 900;
color: rgba(27,42,34,.92);
margin: 6px 0 10px;
}
#habitat-filter .habitat-filters-container {
max-height: 220px;
overflow-y: auto;
border: 1px solid rgba(27,42,34,.10);
border-radius: 8px;
padding: 8px;
}
.habitat-filters-container {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 10px 14px;
margin: 8px 0 12px;
}
@media (max-width: 980px) { .habitat-filters-container { grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width: 640px) { .habitat-filters-container { grid-template-columns: 1fr; } }
.habitat-filters-chk {
display: flex;
align-items: center;
gap: 10px;
}
.habitat-filters-chk label {
margin: 0;
font-weight: 800;
color: rgba(27,42,34,.86);
}
.habitat-chk { accent-color: var(--av-accent); }
#percentage {
width: min(520px, 100%);
margin: 8px 10px 0 0;
accent-color: var(--av-accent);
}
#percent-display {
font-weight: 900;
color: rgba(27,42,34,.90);
}
.match-logic-selector { margin-top: 10px; }
.match-logic-selector label {
font-weight: 900;
color: rgba(27,42,34,.90);
margin-right: 12px;
}
.match-logic-selector input[type="radio"] { accent-color: var(--av-accent); }
.fam-general-searchbyfamily .dsinfo-meta {
padding: 12px 0 0 !important;
border-top: 1px solid rgba(27,42,34,.10);
margin-top: 6px;
}
/* MSA pane */
.fi-msa-pane {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
#alignedSequenceDisplay,
#sequenceDisplay {
min-width: 0;
overflow-x: auto;
}
/* Search summary */
.search-summary-box {
width: 100%;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.search-summary-box h4 {
margin: 0 0 8px;
font-weight: 900;
color: var(--av-ink);
}
.search-summary-box ul {
margin: 0;
padding-left: 18px;
color: rgba(27,42,34,.86);
font-weight: 650;
}
/* Results card */
.fam-general-results {
width: 100%;
margin: 14px auto 0;
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
/* =====================================================
Families table grid — 9 columns
Family | Category | Members | Datasets | Scaffolds | 3D Model | Quality | pLDDT | pTM
===================================================== */
.fam-dsscaf-header {
display: grid;
grid-template-columns:
minmax(140px, 1.4fr) /* Family */
minmax(180px, 1.8fr) /* Category */
minmax(100px, .85fr) /* Members */
minmax(100px, .85fr) /* Datasets */
minmax(100px, .85fr) /* Scaffolds */
minmax(100px, .85fr) /* 3D Model */
minmax(100px, .85fr) /* Quality */
minmax(90px, .75fr) /* pLDDT */
minmax(90px, .75fr); /* pTM */
align-items: center;
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-bottom: none;
border-radius: 12px;
}
.fam-dsscaf-columns {
display: grid;
grid-template-columns:
minmax(140px, 1.4fr)
minmax(180px, 1.8fr)
minmax(100px, .85fr)
minmax(100px, .85fr)
minmax(100px, .85fr)
minmax(100px, .85fr)
minmax(100px, .85fr)
minmax(90px, .75fr)
minmax(90px, .75fr);
align-items: stretch;
}
.fam-dsscaf-title {
margin: 0;
padding: 10px 12px;
font-size: 13px;
font-weight: 900;
color: var(--av-ink);
}
.fam-dsscaf-header .fam-dsscaf-title,
.fam-dsscaf-header .fam-dsscaf-title a,
.fam-dsscaf-header a.no-underline {
color: #e8a744 !important;
}
.fam-dsscaf-header a:hover { color: #ffffff !important; }
.fam-dsscaf-header a,
.fam-dsscaf-container a {
color: var(--av-ink) !important;
text-decoration: none !important;
font-weight: 900;
}
.fam-dsscaf-container {
border-bottom: 1px solid rgba(27,42,34,.08);
padding: 10px;
}
.fam-dsscaf-column {
padding: 10px 12px;
display: flex;
align-items: center;
background: transparent;
}
.fam-dsscaf-container:hover .fam-dsscaf-column {
background: rgba(230,166,70,.08);
}
.fam-dsscaf-details {
margin: 0;
font-size: 13px;
line-height: 1.25;
font-weight: 850;
color: rgba(27,42,34,.90);
word-break: break-word;
}
.fam-dsscaf-quality {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 14px;
min-height: 32px;
font-weight: 900;
color: rgba(27,42,34,.92);
background: rgba(230,166,70,.12);
border: 1px solid rgba(27,42,34,.10);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.fam-dsscaf-quality-High { box-shadow: 0 10px 22px rgba(0,0,0,.06); }
.fam-dsscaf-quality-Medium { opacity: .95; }
.fam-dsscaf-quality-Low { opacity: .90; }
/* Pagination */
.fam-general-paging {
width: 100%;
max-width: 1100px;
margin: 14px auto 0;
padding: 12px 0 0;
border-top: 1px solid rgba(27,42,34,.10);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.fam-general-navarrows {
font-weight: 850;
color: rgba(27,42,34,.90);
display: flex;
align-items: center;
gap: 12px;
}
.prev-arrow::before,
.next-arrow::before { font-weight: 900; color: var(--av-ink); }
.prev-arrow:hover,
.next-arrow:hover {
background: var(--av-ink);
box-shadow: 0 14px 26px rgba(0,0,0,.12);
}
.prev-arrow:hover::before,
.next-arrow:hover::before { color: var(--av-accent); }
.prev-arrow:active,
.next-arrow:active { transform: translateY(1px); }
/* Responsive */
@media (max-width: 980px) {
.fam-general-info {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.fam-dsscaf-header,
.fam-dsscaf-columns {
min-width: 1000px;
}
}
@media (max-width: 768px) {
.fam-general-searcharea { padding: 16px 12px 24px; }
}
/* Family Info Page */
.footer { position: relative !important; }
.dropdown-menu { top: 2rem !important; }
.fi-page {
max-width: 1300px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
font-family: 'Segoe UI', system-ui, sans-serif;
color: #1a2332;
}
.fi-hero {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-radius: 14px;
padding: 2.2rem 2.8rem;
margin-bottom: 2rem;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.5rem;
box-shadow: 0 8px 28px rgba(6,58,157,.22);
}
.fi-hero-title {
font-size: 2rem;
font-weight: 900;
letter-spacing: -0.3px;
margin: 0;
color: #fff;
}
.fi-hero-title span {
font-size: 0.78rem;
font-weight: 600;
display: block;
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 0.3rem;
color: #e8a744;
}
.fi-stat-pills { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.fi-pill {
background: rgba(255,255,255,.10);
border: 1px solid rgba(232,167,68,.35);
border-radius: 50px;
padding: 0.5rem 1.2rem;
text-align: center;
min-width: 88px;
}
.fi-pill-val { font-size: 1.25rem; font-weight: 900; display: block; color: #e8a744; }
.fi-pill-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.75); }
.fi-type-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.fi-badge {
background: #e8f0fb;
color: #1a4a6b;
border-radius: 20px;
padding: 0.25rem 0.85rem;
font-size: 0.8rem;
font-weight: 600;
}
.fi-card {
background: #fff;
border: 1px solid #e4eaf2;
border-radius: 12px;
padding: 1.8rem 2rem;
margin-bottom: 1.8rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.fi-card-title {
font-size: 1.05rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #0f2744;
border-bottom: 2px solid #e4eaf2;
padding-bottom: 0.7rem;
margin: 0 0 1.4rem;
}
.fi-icon { margin-right: 0.5rem; opacity: 0.7; }
.fi-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.fi-three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 1000px) { .fi-three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .fi-two-col { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .fi-three-col { grid-template-columns: 1fr; } }
.fi-repseq-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.4rem 1rem;
font-size: 0.88rem;
}
.fi-repseq-grid dt { font-weight: 600; color: #5a6a7e; white-space: nowrap; }
.fi-repseq-grid dd {
font-family: 'Courier New', monospace;
margin: 0;
word-break: break-all;
background: #fffbf1;
border-radius: 4px;
padding: 0.25rem 0.5rem;
}
.fi-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-height: 420px;
overflow-y: auto;
border-radius: 8px;
border: 1px solid #e4eaf2;
}
.fi-tbl {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
min-width: 480px;
}
.fi-tbl th {
background: #f0f5fb;
padding: 0.65rem 1rem;
text-align: left;
font-weight: 600;
color: #2a3f5f;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.fi-tbl td {
padding: 0.6rem 1rem;
border-bottom: 1px solid #eef2f7;
vertical-align: top;
}
.fi-tbl tbody tr:last-child td { border-bottom: none; }
.fi-tbl tbody tr:hover td { background: #f8fafd; }
.fi-link { color: #1a6fba; text-decoration: none; }
.fi-link:hover { text-decoration: underline; }
.fi-donut-wrap { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.fi-donut-canvas { flex: 0 0 200px; max-width: 200px; }
.fi-donut-legend { flex: 1; min-width: 180px; max-height: 155px; overflow-y: auto; }
.fi-legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.83rem;
margin-bottom: 0.35rem;
}
.fi-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fi-legend-perc { margin-left: auto; font-weight: 600; color: #2a3f5f; }
.fi-tab-bar { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.fi-tab-btn {
padding: 0.45rem 1.1rem;
border: 1px solid #c8d8ea;
border-radius: 6px;
background: #f0f5fb;
font-size: 0.85rem;
font-weight: 600;
color: #2a3f5f;
cursor: pointer;
transition: all .15s;
}
.fi-tab-btn:hover,
.fi-tab-btn.active { background: #0f2744; color: #fff; border-color: #0f2744; }
.fi-tab-btn:active { transform: translateY(1px); }
.fi-tab-pane { display: none; }
.fi-tab-pane.active { display: block; }
.fi-msa-pane { display: none; }
.fi-msa-pane.active { display: block; }
.fi-struct-tab { display: none; }
.fi-struct-tab.active { display: block; }
.fi-btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.fi-btn {
display: inline-block;
padding: 0.5rem 1.3rem;
background: #0f2744;
color: #fff !important;
border-radius: 7px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none !important;
border: 2px solid #0f2744;
transition: background .15s, color .15s;
cursor: pointer;
}
.fi-btn:hover { background: #1a4a6b; color: #fff !important; border-color: #1a4a6b; }
.fi-btn:active { transform: translateY(1px); }
.fi-fv-pdb { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 860px) { .fi-fv-pdb { grid-template-columns: 1fr; } }
#pdbViewer {
position: relative;
max-width: 100%;
height: 350px;
border-radius: 8px;
border: 1px solid rgba(27,42,34,.10);
box-shadow: 0 4px 14px rgba(0,0,0,.06);
overflow: hidden;
background: rgba(255,255,255,.60);
}
.family-info-logo-view {
background: rgba(255,255,255,.65);
border: 1px solid rgba(27,42,34,.10);
border-radius: 8px;
padding: 12px;
overflow: auto;
}
#btn_logo {
appearance: none;
border: 2px solid #123250;
background: transparent;
color: #123250;
border-radius: 999px;
padding: 8px 16px;
font-weight: 900;
font-size: 13px;
cursor: pointer;
transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
#btn_logo:hover { background: #123250; color: #e8a744; box-shadow: 0 6px 18px rgba(6,58,157,.18); }
#btn_logo:active { transform: translateY(1px); }
#familyMap {
height: 500px;
width: 100%;
border-radius: 10px;
border: 1px solid rgba(27,42,34,.10);
box-shadow: 0 4px 18px rgba(0,0,0,.06);
overflow: hidden;
}
.fi-map-note { font-size: 0.8rem; color: #7a8fa6; margin-bottom: 0.6rem; }
.fi-powered { font-size: 0.75rem; color: #9aacbf; text-align: right; margin-top: 0.4rem; }
.fi-powered a { color: #9aacbf; text-decoration: none; }
.fi-powered a:hover { color: #123250; }
.fi-powered strong { font-weight: 900; }
@media (max-width: 768px) {
.fi-page { padding: 1.2rem 1rem 3rem; }
.fi-hero { padding: 1.6rem 1.4rem; }
.fi-hero-title { font-size: 1.5rem; }
.fi-card { padding: 1.1rem 1rem; }
}
/* Downloads Page */
.dl-page {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem 4rem;
}
.dl-hero {
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
border-radius: 0 0 16px 16px;
padding: 3rem 2.5rem 2.5rem;
margin-bottom: 2.5rem;
box-shadow: 0 8px 28px rgba(15,39,68,.18);
text-align: center;
}
.dl-hero-title {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 900;
color: #fff;
margin: 0 0 0.5rem;
letter-spacing: -0.3px;
}
.dl-hero-title span {
display: block;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #e8a744;
margin-bottom: 0.3rem;
}
.dl-hero-sub {
color: rgba(255,255,255,.65);
font-size: 0.92rem;
font-weight: 500;
margin: 0;
}
.dl-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem 1.5rem;
}
@media (max-width: 1100px) {
.dl-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.dl-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.dl-grid {
grid-template-columns: 1fr;
}
}
.dl-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
.dl-hex-link {
text-decoration: none;
display: block;
width: 160px;
}
.dl-hex {
position: relative;
width: 160px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(255,248,230,.95) 0%, rgba(255,255,255,.88) 100%);
border: 1px solid rgba(27,42,34,.14);
box-shadow: 0 10px 22px rgba(0,0,0,.08);
clip-path: polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
cursor: pointer;
}
.dl-hex::before {
content: "";
position: absolute;
inset: 6px;
clip-path: inherit;
border: 1px solid rgba(230,166,70,.3);
pointer-events: none;
}
.dl-hex:hover,
.dl-hex-link:hover .dl-hex {
transform: translateY(-4px);
background: linear-gradient(135deg, #0f2744 0%, #1a4a6b 60%, #133352 100%);
box-shadow: 0 16px 28px rgba(15,39,68,.22);
}
.dl-hex:hover .dl-hex-icon,
.dl-hex-link:hover .dl-hex-icon {
filter: brightness(0) invert(1);
}
.dl-hex:hover .dl-hex-label,
.dl-hex-link:hover .dl-hex-label {
color: #e8a744;
}
.dl-hex-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
z-index: 1;
padding: 0 1rem;
}
.dl-hex-icon {
font-size: 1.6rem;
line-height: 1;
transition: filter .18s ease;
}
.dl-hex-label {
font-size: 0.82rem;
font-weight: 900;
color: #1b2a22;
letter-spacing: .2px;
transition: color .18s ease;
text-align: center;
line-height: 1.2;
}
.dl-desc {
font-size: 0.8rem;
color: rgba(27,42,34,.72);
font-weight: 500;
line-height: 1.55;
margin: 0;
max-width: 220px;
}