Template:Main page/styles.css
Template page
More languages
More actions
/* OHC Network Wiki -- component styles, careui design system.
Colour comes exclusively from the --ohc-* token layer in
MediaWiki:Common.css; do not introduce literals here. Note the
TemplateStyles sanitizer rejects var() in border-radius, font-family,
padding and border-color, so those stay literal.
Reference: [[OHC Network Wiki:Design/careui]] */
/* Search trigger (opens Citizen's native search) */
.ohc-search-trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
max-width: 560px;
margin: 1.2em auto 0;
padding: 0.75em 1.2em;
border: 1px solid var(--ohc-border);
border-radius: 9999px;
background: var(--ohc-card);
cursor: pointer;
font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 0.95em;
color: var(--ohc-soft-foreground);
transition: box-shadow 0.2s, border-color 0.2s;
}
.ohc-search-trigger:hover {
border-top-color: var(--ohc-primary);
border-right-color: var(--ohc-primary);
border-bottom-color: var(--ohc-primary);
border-left-color: var(--ohc-primary);
box-shadow: 0 0 0 3px var(--ohc-ring);
}
.ohc-search-trigger__icon { font-size: 1.1em; }
.ohc-search-trigger__kbd {
margin-left: auto;
padding: 0.1em 0.55em;
border-radius: 6px;
background: var(--ohc-muted-background);
border: 1px solid var(--ohc-border);
font-size: 0.8em;
font-family: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: var(--ohc-primary);
}
/* Domain navigation pills */
.ohc-navgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
gap: 0.5em;
margin: 0.8em 0 1.2em;
}
.ohc-navpill {
position: relative;
display: flex;
align-items: center;
gap: 0.4em;
padding: 0.6em 0.9em;
border-radius: 10px;
background: var(--ohc-muted-background);
border: 1px solid var(--ohc-border);
font-weight: 600;
font-size: 0.88em;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ohc-navpill:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px var(--ohc-shadow-color-strong);
border-top-color: var(--ohc-primary);
border-right-color: var(--ohc-primary);
border-bottom-color: var(--ohc-primary);
border-left-color: var(--ohc-primary);
}
.ohc-navpill a {
text-decoration: none !important;
color: var(--ohc-foreground) !important;
font-weight: 600;
}
.ohc-navpill__count {
margin-left: auto;
font-size: 0.8em;
font-weight: 700;
color: var(--ohc-primary);
}
/* Stats bar */
.ohc-statsbar {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 1px;
background: var(--ohc-border);
border-radius: 10px;
overflow: hidden;
margin: 1em 0;
}
.ohc-statsbar__item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.7em 0.5em;
background: var(--ohc-muted-background);
}
.ohc-statsbar__num {
font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 1.5em;
font-weight: 700;
color: var(--ohc-primary);
line-height: 1.2;
}
.ohc-statsbar__label {
font-size: 0.75em;
color: var(--ohc-soft-foreground);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Section headings */
.ohc-section-label {
font-size: 0.78em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ohc-soft-foreground);
margin: 1.8em 0 0.5em;
padding-bottom: 0.3em;
border-bottom: 2px solid var(--ohc-primary-500);
}
/* Knowledge components showcase (mirrors Care·ui components-overview) */
.ohc-showcase {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 0.7em;
margin: 0.8em 0 0.2em;
}
.ohc-showcase__card {
display: flex;
flex-direction: column;
gap: 0.4em;
padding: 1em 1.1em;
border-radius: 14px;
background: var(--ohc-muted-background);
border: 1px solid var(--ohc-border);
border-top: 3px solid var(--ohc-primary);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ohc-showcase__card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px var(--ohc-shadow-color);
}
.ohc-showcase__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
}
.ohc-showcase__title {
font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-weight: 700;
font-size: 1em;
color: var(--ohc-foreground);
line-height: 1.3;
}
.ohc-showcase__title a {
color: inherit;
text-decoration: none;
}
.ohc-showcase__count {
flex-shrink: 0;
padding: 0.1em 0.55em;
border-radius: 9999px;
background: var(--ohc-primary-bg);
color: var(--ohc-primary);
font-size: 0.78em;
font-weight: 700;
font-family: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ohc-showcase__desc {
font-size: 0.85em;
color: var(--ohc-soft-foreground);
line-height: 1.45;
}
.ohc-showcase__go {
margin-top: auto;
font-size: 0.8em;
font-weight: 600;
color: var(--ohc-primary);
}
.ohc-showcase__go a {
color: inherit;
text-decoration: none;
}
.ohc-showcase__card:hover .ohc-showcase__go { color: var(--ohc-primary); }
/* Quick links grid */
.ohc-quicklinks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.7em;
margin: 0.6em 0;
}
.ohc-quicklink {
padding: 0.8em 1em;
border-radius: 10px;
background: var(--ohc-muted-background);
border: 1px solid var(--ohc-border);
border-left: 3px solid var(--ohc-primary);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ohc-quicklink:hover {
box-shadow: 0 6px 18px var(--ohc-shadow-color);
transform: translateY(-2px);
}
.ohc-quicklink__title { font-family: 'Figtree Variable', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: 0.95em; }
.ohc-quicklink__desc { font-size: 0.85em; color: var(--ohc-soft-foreground); margin-top: 0.2em; line-height: 1.45; }
/* Latest/recent section */
.ohc-recent { columns: 2; column-gap: 1.5em; }
@media (max-width: 640px) { .ohc-recent { columns: 1; } }