MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Rolexopedia — clean reference site with deep green accents */
/* ===== Typography ===== */
body, .mw-body, .mw-body-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
color: #1a1a1a;
}
/* Override Vector 2022's 0.875rem (14px) body text */
.vector-body,
.mw-parser-output,
.mw-body-content {
font-size: 1rem !important;
}
/* Tighten paragraph spacing */
.mw-body-content p {
margin: 0.4em 0;
}
/* ===== Page title ===== */
.mw-page-title-main,
.mw-first-heading,
.mw-body h1.firstHeading,
.vector-body h1 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
font-weight: 800;
font-size: 2.3em;
letter-spacing: -0.03em;
line-height: 1.1;
border-bottom: none !important;
color: #1b3a2d;
margin-bottom: 0.2em;
}
/* Vector draws a grey hairline under the title bar via ::after; the
breadcrumb + spacing does that job here. */
.vector-page-titlebar::after,
.mw-body-header::after {
display: none !important;
}
/* ===== Headings — sans, deep green, light rule ===== */
.mw-body-content h2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.5em;
font-weight: 700;
letter-spacing: -0.01em;
border-bottom: 1px solid #d4e0d8;
padding-bottom: 0.25em;
margin-top: 1.4em;
margin-bottom: 0.4em;
color: #1b3a2d;
}
.mw-body-content h3 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.2em;
font-weight: 650;
border-bottom: none;
padding-bottom: 0;
margin-top: 1.1em;
margin-bottom: 0.25em;
color: #1b3a2d;
}
.mw-body-content h4 {
margin-top: 0.6em;
margin-bottom: 0.15em;
}
/* ===== Links — dark green ===== */
.mw-body-content a:not(.new) {
color: #1b5e3b;
text-decoration: none;
}
.mw-body-content a:not(.new):hover {
color: #0f3d25;
text-decoration: underline;
}
.mw-body-content a.new {
color: #b33;
}
/* ===== Header bar — light with green accent ===== */
.vector-header,
.mw-header {
background: #f7f9f7 !important;
border-bottom: 2px solid #2d5e3f !important;
}
/* Site name — dark green */
.mw-logo-wordmark {
font-weight: 700 !important;
letter-spacing: 0.05em !important;
color: #1b3a2d !important;
}
.vector-header a {
color: #1b3a2d !important;
}
.vector-header a:hover {
color: #0f3d25 !important;
}
/* ===== Search box ===== */
.vector-search-box-input {
border-radius: 6px !important;
border: 1px solid #c8d6cc !important;
}
.vector-search-box-input:focus {
border-color: #2d5e3f !important;
box-shadow: 0 0 0 1px #2d5e3f33 !important;
}
/* ===== Content area — centered, TOC as left sidebar ===== */
/* Let Vector 2022 keep its grid but widen + center it */
.mw-page-container {
max-width: 1240px !important;
margin: 0 auto !important;
padding: 0 1em !important;
}
.mw-body {
padding: 0.8em 0;
}
/* Disable the limited-width feature that offsets content */
.vector-feature-limited-width-clientpref-1 .mw-content-container,
.vector-feature-limited-width-content-enabled .mw-content-container {
max-width: none !important;
}
/* Header centered */
.vector-header-container {
max-width: 1240px !important;
margin: 0 auto !important;
}
/* ===== TOC sidebar — clean, no overlap ===== */
.vector-column-start {
width: 200px !important;
min-width: 200px !important;
}
/* Prevent TOC from overlapping content */
.vector-toc {
position: sticky;
top: 1em;
}
.vector-sidebar-container-no-toc ~ .mw-content-container {
margin-left: 0 !important;
}
/* ===== Tables — horizontal rules only, rounded frame ===== */
.wikitable {
border-collapse: separate;
border-spacing: 0;
border: 1px solid #d4e0d8;
border-radius: 8px;
overflow: hidden;
background: #fff;
font-size: 0.92em;
margin: 0.6em 0 1em;
}
.wikitable th {
background: #eef3ef;
font-weight: 600;
font-size: 0.82em;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.55em 0.9em;
border: none;
border-bottom: 1px solid #d4e0d8;
text-align: left;
color: #2f5541;
vertical-align: bottom;
}
.wikitable td {
padding: 0.5em 0.9em;
border: none;
border-bottom: 1px solid #eef3ef;
vertical-align: top;
}
.wikitable tr:last-child td {
border-bottom: none;
}
.wikitable tr:nth-child(even) td {
background: #fafcfa;
}
/* Core-facts table on reference pages: key/value card. The class is set
by import_reference.py and by the 2026-09-05 backfill pass. */
.wikitable.rp-facts {
width: auto;
min-width: min(100%, 480px);
max-width: 640px;
font-size: 0.95em;
}
.wikitable.rp-facts td:first-child {
white-space: nowrap;
}
.wikitable.rp-facts th {
display: none;
}
.wikitable.rp-facts td:first-child {
width: 32%;
font-size: 0.8em;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #5a7a63;
font-weight: 600;
background: #f7faf8 !important;
padding-top: 0.7em;
}
.wikitable.rp-facts td:last-child {
font-weight: 500;
color: #1a1a1a;
background: #fff !important;
}
/* ===== Images ===== */
.thumb {
border: none !important;
background: none !important;
}
.thumbinner,
figure[typeof~="mw:File/Thumb"],
figure[typeof~="mw:File/Frame"] {
border: 1px solid #d4e0d8 !important;
border-radius: 8px;
background: #fafcfa !important;
padding: 6px !important;
overflow: hidden;
}
figure[typeof~="mw:File/Thumb"] > a > img,
figure[typeof~="mw:File/Frame"] > a > img {
border-radius: 4px;
background: #fff;
}
.thumbcaption,
figure[typeof~="mw:File/Thumb"] > figcaption,
figure[typeof~="mw:File/Frame"] > figcaption {
font-size: 0.82em;
color: #5a6b60;
padding: 6px 4px 2px;
line-height: 1.4;
}
/* ===== Table of contents =====
Vector 2022 drops the sidebar table of contents below 1120px and replaces it
with a dropdown in the title bar, which on a reference article means losing
the one control that makes a long dial timeline navigable. The left column
is still 200px wide and empty at those widths, so keep the real TOC down to
1000px and hide the title-bar fallback that would otherwise double it. */
@media screen and (min-width: 1000px) and (max-width: 1119px) {
.client-js .mw-table-of-contents-container.vector-toc-landmark,
.client-js #vector-toc-pinned-container,
.client-js .vector-sticky-pinned-container {
display: block;
}
#vector-page-titlebar-toc,
.vector-page-titlebar .vector-page-titlebar-toc {
display: none;
}
}
/* ===== Lead image =====
A reader arriving from a search result confirms one thing first: is this the
watch I am looking at. A 220px crop floated into the margin answers that
badly, so references lead with the hero shot at column width. Placed by
scripts/place_hero.py as <div class="rp-lead"> wrapping a centered thumb,
which keeps the caption and keeps MultimediaViewer's click-to-enlarge. */
.rp-lead {
margin: 0.2em 0 1.4em;
clear: both;
}
/* Keep a section's figures inside that section. A tall right-floated thumb
near the end of one section otherwise overhangs the next heading and its
first paragraphs, which is where the "images interfering with each other"
messiness comes from. Scoped to parser output so it never touches the
skin's own headings. */
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output .mw-heading2,
.mw-parser-output .mw-heading3 {
clear: both;
}
.rp-lead .thumb,
.rp-lead .thumbinner,
.rp-lead figure {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
border: none !important;
background: none !important;
padding: 0 !important;
}
.rp-lead img {
display: block;
width: 100%;
height: auto;
border: 1px solid #d4e0d8;
border-radius: 8px;
background: #fff;
}
.rp-lead .thumbcaption,
.rp-lead figcaption {
text-align: left;
font-size: 0.82em;
color: #5a6b60;
padding: 8px 2px 0 !important;
border-top: 1px solid #e3eae5;
margin-top: 8px;
}
/* The magnify pointer is redundant when the whole image opens the lightbox. */
.rp-lead .magnify {
display: none;
}
@media (max-width: 640px) {
.rp-lead {
margin-bottom: 1.1em;
}
.rp-lead img {
border-radius: 6px;
}
}
/* ===== Galleries =====
MediaWiki ships galleries as grey-bordered boxes with a byte count under
each cell, which is the single least pristine thing on a watch page. The
rules below strip the chrome back to the photograph: uniform tiles, one
consistent gutter, captions that read as labels, and a hover state that
signals the MultimediaViewer lightbox is there. */
ul.gallery {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin: 1.2em 0 1.6em;
padding: 0;
background: none;
border: none;
/* A gallery is a full-width comparison plate and must never share a line
with a floated figure. Without this, packed mode measures the narrowed
gutter beside the float and lays out ragged rows at inconsistent sizes —
seen live on Reference:5513, where a 250px right float bled 348px down
from the previous section and broke the Special-branches plate into a
1-then-2 stagger. */
clear: both;
}
li.gallerybox {
margin: 0 !important;
border: none !important;
background: none !important;
vertical-align: top;
}
li.gallerybox div.thumb {
margin: 0 !important;
padding: 0 !important;
border: 1px solid #d4e0d8 !important;
border-radius: 8px;
background: #fff !important;
overflow: hidden;
transition: box-shadow 0.18s ease, transform 0.18s ease,
border-color 0.18s ease;
}
li.gallerybox div.thumb img {
display: block;
border-radius: 7px;
}
/* The lightbox is the point of a gallery — say so on hover. */
li.gallerybox div.thumb:hover {
border-color: #1b5e3b !important;
box-shadow: 0 6px 18px rgba(27, 94, 59, 0.16);
transform: translateY(-2px);
}
li.gallerybox div.thumb a {
cursor: zoom-in;
}
li.gallerybox .gallerytext {
padding: 7px 2px 0 !important;
font-size: 0.8em;
line-height: 1.4;
color: #5a6b60;
text-align: center;
}
li.gallerybox .gallerytext p {
margin: 0;
}
/* Byte counts and pixel dimensions belong on a File: page, not under a
photograph of a 5513. $wgGalleryOptions suppresses them server-side; this
is the belt-and-braces for galleries written with explicit attributes. */
li.gallerybox .gallerytext .bytes,
li.gallerybox .gallerytext .fileinfo {
display: none;
}
/* Packed mode sets its own inline widths — don't fight them, just keep the
rhythm consistent. */
ul.mw-gallery-packed li.gallerybox,
ul.mw-gallery-packed-hover li.gallerybox,
ul.mw-gallery-packed-overlay li.gallerybox {
margin: 0 !important;
}
ul.mw-gallery-packed li.gallerybox div.thumb {
background: #fff !important;
}
@media (max-width: 600px) {
ul.gallery {
gap: 8px;
}
li.gallerybox .gallerytext {
font-size: 0.75em;
}
}
/* ===== Breadcrumb ===== */
.mw-parser-output > small:first-of-type,
.mw-parser-output > p:first-of-type > small:first-child {
display: block;
margin: 0 0 0.9em;
font-size: 0.82em;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #5a7a63;
}
.mw-parser-output > small:first-of-type a,
.mw-parser-output > p:first-of-type > small:first-child a {
color: #1b5e3b;
font-weight: 600;
}
.mw-parser-output > small:first-of-type b,
.mw-parser-output > p:first-of-type > small:first-child b {
color: #1b3a2d;
}
/* ===== TOC — dark green links ===== */
.vector-toc {
font-size: 0.88em;
border-left: 1px solid #e3ebe5;
padding-left: 0.8em !important;
}
.vector-toc .vector-pinnable-header-label {
color: #5a7a63 !important;
font-size: 0.8em;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.vector-toc a,
.vector-toc .vector-toc-link,
.vector-toc-text,
.sidebar-toc a,
.sidebar-toc .sidebar-toc-link {
color: #1b5e3b !important;
}
.vector-toc a:hover,
.vector-toc .vector-toc-link:hover,
.sidebar-toc a:hover {
color: #0f3d25 !important;
}
/* Active TOC item */
.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.sidebar-toc .sidebar-toc-list-item-active > a {
color: #1b3a2d !important;
font-weight: 600;
}
/* ===== Categories ===== */
#catlinks {
background: #f3f7f4;
border: 1px solid #d4e0d8;
border-radius: 4px;
padding: 0.5em 1em;
font-size: 0.85em;
margin-top: 1.2em;
}
/* ===== Strip wiki UI ===== */
/* Hide "Reference:" namespace prefix from h1 on Reference pages.
Wiki URL stays /wiki/Reference:5513; visible h1 is just "5513".
ns-3000 = NS_REFERENCE (custom namespace defined in LocalSettings.php). */
body.ns-3000 .mw-page-title-namespace,
body.ns-3000 .mw-page-title-separator {
display: none !important;
}
/* Hide Discussion tab */
#ca-talk,
li#ca-talk {
display: none !important;
}
/* Hide View history */
#ca-history,
li#ca-history {
display: none !important;
}
/* Hide "Read" tab (redundant) */
#ca-view,
li#ca-view {
display: none !important;
}
/* Hide "Reference" / namespace tab label — title is enough */
#ca-nstab-reference,
#ca-nstab-main,
li#ca-nstab-reference,
li#ca-nstab-main {
display: none !important;
}
/* Hide View source for logged-out */
body:not(.mw-user-logged-in) #ca-viewsource,
body:not(.mw-user-logged-in) li#ca-viewsource {
display: none !important;
}
/* Clean up tab bar */
.vector-page-toolbar {
border-bottom: none !important;
}
nav.vector-menu-tabs {
border-bottom: none !important;
}
.mw-body .vector-page-toolbar-container {
border-bottom: none !important;
}
/* Hide Tools dropdown */
#vector-page-tools {
display: none !important;
}
/* Hide the entire page toolbar row (empty after removing all tabs) */
.vector-page-toolbar {
display: none !important;
}
/* Hide "Create account" */
body:not(.mw-user-logged-in) #pt-createaccount,
body:not(.mw-user-logged-in) li#pt-createaccount {
display: none !important;
}
/* Hide categories for anonymous */
body:not(.mw-user-logged-in) #catlinks {
display: none !important;
}
/* Hide sidebar hamburger for anonymous */
body:not(.mw-user-logged-in) .vector-main-menu-landmark {
display: none !important;
}
/* ===== Footer — minimal ===== */
#footer {
border-top: 1px solid #d4e0d8;
text-align: center;
padding: 1em 0;
color: #999;
font-size: 0.82em;
}
#footer-info-copyright {
display: none;
}
#footer-places {
display: none;
}
#footer-icons {
display: none;
}
/* ===== External links ===== */
.mw-parser-output a.external {
background: none !important;
padding-right: 0 !important;
}
.mw-parser-output a.external::after {
content: " \2197";
font-size: 0.75em;
color: #999;
}
/* ===== Lists ===== */
.mw-body-content ul, .mw-body-content ol {
margin: 0.3em 0;
padding-left: 1.5em;
}
.mw-body-content li {
margin: 0.15em 0;
}
/* ===== Remove extra spacing from pandoc span anchors ===== */
/* Only target empty span anchors, not headline spans */
.mw-body-content > span[id]:empty,
.mw-body-content p + span[id]:empty {
display: block;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
/* ===== Reference-page sections ===== */
/* Sources footer: long external-link list → two quiet columns. */
.mw-body-content h2:has(> #Sources) ~ ul {
columns: 2;
column-gap: 2.5em;
font-size: 0.88em;
color: #444;
padding-left: 1.2em;
}
.mw-body-content h2:has(> #Sources) ~ ul li {
break-inside: avoid;
margin: 0 0 0.35em;
}
/* Related references: link + one-line gloss, as a light list. */
.mw-body-content h2:has(> #Related_references) + ul,
.mw-body-content h2:has(> #Related_references) + p + ul {
list-style: none;
padding: 0;
margin: 0.4em 0 1em;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4em 1.4em;
}
.mw-body-content h2:has(> #Related_references) + ul li,
.mw-body-content h2:has(> #Related_references) + p + ul li {
padding: 0.45em 0;
border-top: 1px solid #eef3ef;
font-size: 0.95em;
line-height: 1.45;
}
@media (max-width: 720px) {
.mw-body-content h2:has(> #Sources) ~ ul {
columns: 1;
}
.mw-body-content h2:has(> #Related_references) + ul,
.mw-body-content h2:has(> #Related_references) + p + ul {
grid-template-columns: 1fr;
}
}
/* Sub-family / era wrapper headings on family pages read better with air. */
.mw-body-content h2 + p {
margin-top: 0.5em;
}
/* ===== Blockquotes ===== */
.mw-body-content blockquote {
border-left: 3px solid #2d5e3f;
margin: 0.6em 0;
padding: 0.5em 1em;
color: #444;
font-style: italic;
}
/* ===== Responsive tables (mobile) ===== */
/* The multi-column serial-range and generation grids are wider than a phone
screen, which made the whole page scroll horizontally (content-wider-than-
screen — a mobile-usability fail under mobile-first indexing). Below the
tablet breakpoint, let a wide table scroll inside its own box instead of
pushing the page. display:block is what makes overflow-x take effect on a
<table>; desktop layout is untouched. */
@media (max-width: 720px) {
.mw-parser-output .wikitable {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* =====================================================================
Main Page — layout system (classes prefixed rp-). Scoped so article
pages are unaffected. Grid falls back to one column on phones.
===================================================================== */
body.page-Main_Page .mw-first-heading,
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page #siteSub,
body.page-Main_Page .vector-body-before-content,
body.page-Main_Page #contentSub {
display: none !important;
}
body.page-Main_Page .mw-body {
padding-top: 0;
}
body.page-Main_Page .mw-body-content h2 {
border-bottom: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1.45em;
font-weight: 700;
letter-spacing: -0.01em;
margin: 2em 0 0.7em;
padding: 0;
}
body.page-Main_Page .mw-body-content h2 .mw-editsection {
display: none;
}
/* Hero */
.rp-hero {
padding: 2.2em 0 1.8em;
border-bottom: 1px solid #e3ebe5;
}
.rp-hero-title {
font-size: 2.6em;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
color: #1b3a2d;
margin: 0 0 0.35em;
}
.rp-hero-lede {
font-size: 1.15em;
line-height: 1.55;
max-width: 62ch;
color: #2b2b2b;
}
.rp-hero-lede p {
margin: 0 0 0.6em !important;
}
.rp-stats {
display: flex;
flex-wrap: wrap;
gap: 2.2em;
margin-top: 1.4em;
}
.rp-stat b {
display: block;
font-size: 1.7em;
font-weight: 700;
color: #1b3a2d;
line-height: 1.1;
}
.rp-stat span {
font-size: 0.85em;
color: #5a7a63;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Eyebrow label */
.rp-eyebrow {
display: block;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5a7a63;
margin-bottom: 0.3em;
}
/* Card grid */
.rp-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1em;
margin: 0.6em 0 0.4em;
}
.rp-grid.rp-grid-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rp-card {
display: flex;
flex-direction: column;
border: 1px solid #d4e0d8;
border-radius: 10px;
background: #fff;
overflow: hidden;
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.rp-card:hover {
border-color: #9fb8a8;
box-shadow: 0 8px 22px rgba(27, 58, 45, 0.12);
transform: translateY(-2px);
}
.rp-card-img {
aspect-ratio: 4 / 3;
background: #f3f7f4;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.rp-card-img a,
.rp-card-img span {
display: block;
width: 100%;
height: 100%;
}
.rp-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.rp-card-img.rp-cover img {
object-fit: cover;
}
.rp-card-img.rp-cover-top img {
object-position: center top;
}
.rp-card-body {
padding: 0.85em 1em 1em;
display: flex;
flex-direction: column;
gap: 0.25em;
}
.rp-card-title {
font-size: 1.1em;
font-weight: 700;
color: #1b3a2d;
line-height: 1.2;
}
.rp-card-title a {
color: #1b3a2d !important;
}
.rp-card-meta {
font-size: 0.82em;
color: #5a7a63;
}
.rp-card-text {
font-size: 0.92em;
color: #333;
line-height: 1.45;
}
.rp-card-text p {
margin: 0 !important;
}
/* Featured (from the archive) */
.rp-featured {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 1.6em;
align-items: center;
padding: 1.4em;
border: 1px solid #d4e0d8;
border-radius: 10px;
background: #fff;
}
.rp-featured-img {
aspect-ratio: 1 / 1;
background: #f3f7f4;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.rp-featured-img a,
.rp-featured-img span {
display: block;
width: 100%;
height: 100%;
}
.rp-featured-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.rp-featured-title {
font-size: 1.5em;
font-weight: 700;
color: #1b3a2d;
letter-spacing: -0.01em;
margin-bottom: 0.4em;
}
.rp-featured-body {
font-size: 1em;
line-height: 1.55;
}
.rp-featured-body p {
margin: 0 0 0.6em !important;
}
.rp-button {
display: inline-block;
margin-top: 0.4em;
padding: 0.5em 1em;
border-radius: 6px;
background: #1b5e3b;
color: #fff !important;
font-weight: 600;
font-size: 0.92em;
text-decoration: none !important;
}
.rp-button a,
.rp-button a:not(.new) {
color: #fff !important;
text-decoration: none !important;
}
.rp-button:hover {
background: #0f3d25;
}
/* Reference index — one block per family, eras as rows, refs as chips */
.rp-index {
border: 1px solid #d4e0d8;
border-radius: 10px;
background: #fff;
padding: 1em 1.2em 0.6em;
margin: 0 0 0.9em;
}
.rp-index-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1em;
margin-bottom: 0.4em;
}
.rp-index-title {
font-size: 1.15em;
font-weight: 700;
color: #1b3a2d;
}
.rp-index-title a {
color: #1b3a2d !important;
}
.rp-index-more {
font-size: 0.85em;
white-space: nowrap;
}
.rp-era {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 0.3em 1em;
padding: 0.55em 0;
border-top: 1px solid #eef3ef;
align-items: start;
}
.rp-era-name {
font-size: 0.92em;
font-weight: 600;
color: #1b3a2d;
line-height: 1.3;
}
.rp-era-name small {
display: block;
font-weight: 400;
color: #5a7a63;
font-size: 0.88em;
}
.rp-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35em;
}
.rp-chips a {
display: inline-block;
padding: 0.18em 0.65em;
border: 1px solid #cfdcd3;
border-radius: 999px;
background: #f7faf8;
font-size: 0.88em;
line-height: 1.5;
color: #1b5e3b !important;
text-decoration: none !important;
transition: background 0.1s ease, color 0.1s ease;
}
.rp-chips a:hover {
background: #1b5e3b;
border-color: #1b5e3b;
color: #fff !important;
}
/* Recently updated */
.rp-recent ul {
list-style: none;
padding: 0 !important;
margin: 0 !important;
}
.rp-recent li {
padding: 0.55em 0;
border-top: 1px solid #eef3ef;
margin: 0 !important;
line-height: 1.6;
}
.rp-recent li:last-child {
border-bottom: 1px solid #eef3ef;
}
.rp-recent li b {
display: inline-block;
min-width: 9.5em;
color: #5a7a63;
font-weight: 600;
font-size: 0.85em;
letter-spacing: 0.02em;
}
/* Footnote */
.rp-footnote {
margin-top: 2.5em;
padding-top: 1em;
border-top: 1px solid #e3ebe5;
font-size: 0.85em;
color: #666;
}
@media (max-width: 960px) {
.rp-grid,
.rp-grid.rp-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rp-featured {
grid-template-columns: 200px minmax(0, 1fr);
}
}
@media (max-width: 600px) {
.rp-hero-title {
font-size: 2em;
}
.rp-grid,
.rp-grid.rp-grid-4 {
grid-template-columns: 1fr;
}
.rp-featured {
grid-template-columns: 1fr;
}
.rp-era {
grid-template-columns: 1fr;
gap: 0.25em;
}
.rp-recent li b {
display: block;
min-width: 0;
}
}