Template:FieldReportsRegistry/styles.css
Template page
More actions
/* Template:FieldReportsRegistry/styles.css
Styles for the Field Reports registry: a wiki-side index of primary research
deposited at the Zenodo Landrace Cannabis Research and Documentation community.
Distinct from the community smoke/grow report stylesheets — field reports are
project-published primary research, not community testimony. Same visual
vocabulary for family resemblance; CTAs route to external deposits, not wiki
forms.
Used by Field_Reports (the registry page) and Template:FieldReportCard
(per-deposit card display).
*/
/* ===== Registry page header ===== */
.fr-page-header {
border-bottom: 1px solid #d2ddce;
padding-bottom: 14px;
margin-bottom: 22px;
}
.fr-page-subtitle {
font-size: 14px;
color: #34402d;
max-width: 70ch;
margin: 0 0 14px 0;
line-height: 1.55;
}
/* ===== Page-level stats strip (under subtitle) ===== */
.fr-page-stats {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 10px;
padding-top: 4px;
font-size: 13px;
color: #5a6650;
}
.fr-stat-item {
display: inline-flex;
align-items: baseline;
gap: 5px;
line-height: 1.3;
}
.fr-stat-num {
font-variant-numeric: tabular-nums;
font-weight: 700;
color: #1a2612;
font-size: 15px;
line-height: 1;
}
.fr-stat-lbl {
color: #5a6650;
}
.fr-stat-sep {
color: #b8c2af;
}
/* ===== Two-column layout ===== */
.fr-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 18px;
}
@media (max-width: 980px) {
.fr-grid {
grid-template-columns: 1fr;
}
}
/* ===== Sections (main column) ===== */
.fr-section {
border: 1px solid #d2ddce;
border-radius: 8px;
background: #ffffff;
overflow: hidden;
margin-bottom: 14px;
}
.fr-section-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
background: #f7faf6;
border-bottom: 1px solid #d2ddce;
padding: 10px 14px;
}
.fr-section-title {
font-weight: 600;
color: #1a2612;
font-size: 14px;
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.fr-section-meta {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #5a6650;
font-weight: 500;
white-space: nowrap;
}
.fr-section-body {
padding: 14px;
}
/* ===== Empty state ===== */
.fr-empty-state {
padding: 28px 20px 22px;
text-align: center;
background: linear-gradient(180deg, #fafbf9 0%, #ffffff 80%);
border: 1px dashed #d2ddce;
border-radius: 6px;
}
.fr-empty-headline {
font-size: 17px;
font-weight: 600;
color: #1a2612;
margin-bottom: 10px;
}
.fr-empty-text {
font-size: 13.5px;
color: #34402d;
line-height: 1.55;
max-width: 60ch;
margin: 0 auto 18px;
}
.fr-empty-steps {
display: flex;
justify-content: center;
gap: 22px;
flex-wrap: wrap;
padding-top: 18px;
border-top: 1px solid #e8ede5;
margin-top: 22px;
}
.fr-empty-step {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: #5a6650;
line-height: 1.4;
text-align: left;
max-width: 200px;
}
.fr-empty-stepnum {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #eef3eb;
color: #2d6a4f;
font-weight: 600;
font-size: 11px;
flex-shrink: 0;
border: 1px solid #d2ddce;
line-height: 1;
}
.fr-empty-steptext {
padding-top: 3px;
}
/* ===== Button-styled external link (used in empty-state CTA and sidebar) ===== */
.fr-button-link a,
.fr-cta-button a {
display: inline-block;
background: #2d6a4f;
color: #ffffff !important;
border: 1px solid #2d6a4f;
border-radius: 6px;
padding: 9px 18px;
font-weight: 600;
cursor: pointer;
font-size: 13.5px;
line-height: 1.2;
text-decoration: none;
}
.fr-button-link a:hover,
.fr-cta-button a:hover {
background: #1f563e;
border-color: #1f563e;
color: #ffffff !important;
text-decoration: none;
}
/* External-link arrow suppressed on these buttons — would clash with affordance.
Citizen and most skins inject a glyph after .external links; override it. */
.fr-button-link a.external::after,
.fr-cta-button a.external::after {
display: none !important;
}
.fr-button-link {
margin: 0 0 22px 0;
}
.fr-cta-button {
margin: 10px 0 4px 0;
text-align: center;
}
.fr-cta-button a {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 8px 14px;
font-size: 13px;
}
/* ===== Sidebar cards ===== */
.fr-card {
border: 1px solid #d2ddce;
border-radius: 8px;
background: #ffffff;
margin-bottom: 14px;
overflow: hidden;
}
.fr-card-title {
background: #f7faf6;
border-bottom: 1px solid #d2ddce;
padding: 10px 14px;
font-weight: 600;
color: #1a2612;
font-size: 13px;
}
.fr-card-body {
padding: 12px 14px;
font-size: 13px;
color: #34402d;
line-height: 1.5;
}
.fr-card-body p {
margin: 0 0 8px 0;
}
.fr-card-body p:last-child {
margin-bottom: 0;
}
.fr-card-body ul,
.fr-card-body ol {
margin: 0;
padding-left: 18px;
}
.fr-card-body li {
margin-bottom: 6px;
}
.fr-card-foot {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #eef2eb;
font-size: 12px;
color: #5a6650;
line-height: 1.5;
}
.fr-card-foot a {
color: #2d6a4f;
}
/* CTA card variant */
.fr-card-cta {
border-color: #c5d6bd;
}
.fr-card-cta .fr-card-title {
background: #eef3eb;
border-bottom-color: #c5d6bd;
color: #1a2612;
}
/* ===== Numbered list with circular badges ===== */
.fr-numlist {
counter-reset: frnum;
list-style: none;
padding: 0;
margin: 0;
}
.fr-numlist li {
counter-increment: frnum;
position: relative;
padding-left: 30px;
margin-bottom: 11px;
line-height: 1.5;
font-size: 13px;
color: #34402d;
}
.fr-numlist li:last-child {
margin-bottom: 0;
}
.fr-numlist li::before {
content: counter(frnum);
position: absolute;
left: 0;
top: 1px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #eef3eb;
color: #2d6a4f;
font-weight: 600;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d2ddce;
line-height: 1;
}
/* ===== Browse list ===== */
.fr-browselist {
list-style: none;
padding: 0;
margin: 0;
}
.fr-browselist li {
margin: 0;
border-bottom: 1px solid #eef2eb;
}
.fr-browselist li:last-child {
border-bottom: none;
}
.fr-browselist li a {
display: block;
padding: 8px 0;
color: #2d6a4f;
font-size: 13px;
text-decoration: none;
line-height: 1.4;
}
.fr-browselist li a:hover {
color: #1f563e;
text-decoration: underline;
}
.fr-browselist li a::before {
content: "→";
color: #b8c2af;
margin-right: 8px;
font-weight: 400;
}
.fr-browselist li a:hover::before {
color: #2d6a4f;
}
/* ===== Page footer note ===== */
.fr-page-foot {
margin-top: 8px;
padding: 14px 16px;
border-top: 1px solid #e8ede5;
background: #fafbf9;
border-radius: 0 0 6px 6px;
}
.fr-page-foot p {
margin: 0;
font-size: 12px;
color: #5a6650;
line-height: 1.55;
max-width: 80ch;
}
/* ===== Card variant (used by Template:FieldReportCard) ===== */
.fr-report {
border: 1px solid #e1e6df;
border-radius: 6px;
padding: 14px 16px;
margin-bottom: 10px;
background: #ffffff;
}
.fr-report:hover {
border-color: #d2ddce;
background: #fafbf9;
}
.fr-report-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}
.fr-report-title {
font-weight: 600;
font-size: 15.5px;
color: #1a2612;
line-height: 1.35;
}
.fr-report-title a {
color: #1a2612;
text-decoration: none;
}
.fr-report-title a:hover {
color: #2d6a4f;
text-decoration: underline;
}
.fr-report-date {
font-size: 12px;
color: #7a8472;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.fr-report-authors {
margin-top: 4px;
font-size: 13px;
color: #5a6650;
font-style: italic;
line-height: 1.4;
}
.fr-report-summary {
margin-top: 8px;
font-size: 13px;
color: #34402d;
line-height: 1.55;
}
.fr-report-meta {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #eef2eb;
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
font-size: 11.5px;
}
.fr-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
border: 1px solid #d2ddce;
background: #f7faf6;
font-size: 11px;
color: #5a6650;
line-height: 1.4;
}
.fr-tag-doi {
border-color: #c5d6bd;
background: #eef3eb;
color: #1a4a32;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 10.5px;
letter-spacing: 0.01em;
}
.fr-tag-doi a {
color: #1a4a32;
text-decoration: none;
}
.fr-tag-doi a:hover {
text-decoration: underline;
}
.fr-tag-cc {
border-color: #c5cdd6;
background: #eef1f4;
color: #34495e;
font-size: 10.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
}