/* ============================================================ PlumePHP Theme — custom.css Inspired by blog.birdor.com design system Light / Dark mode via [data-theme] on ============================================================ */ /* ── 1. Font Face ─────────────────────────────────────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter/Inter-roman.var.woff2') format('woff2'); } /* ── 2. CSS Variables (Light Mode default) ─────────────────── */ :root { --plume-bg: #fbfaf7; --plume-surface: #ffffff; --plume-ink: #252422; --plume-muted: #6b6860; --plume-gold: #8a6a24; --plume-gold-dark: #6b5118; --plume-gold-soft: #f5edd8; --plume-button-primary-fg: #ffffff; --plume-line: #e8e5de; --plume-shadow: 0 2px 8px rgba(37, 36, 34, .08); --bg: var(--plume-bg); --fg: var(--plume-ink); } /* ── 3. Dark Mode ──────────────────────────────────────────── */ :root[data-theme="dark"] { --plume-bg: #11110f; --plume-surface: #191816; --plume-ink: #f4f1e9; --plume-muted: #9e9b93; --plume-gold: #d1aa54; --plume-gold-dark: #b8922e; --plume-gold-soft: #2a2415; --plume-button-primary-fg: #11110f; --plume-line: #2e2c28; --plume-shadow: 0 2px 8px rgba(0, 0, 0, .32); --bg: var(--plume-bg); --fg: var(--plume-ink); } /* ── 4. Reset & Base ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--plume-bg); color: var(--plume-ink); font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.6; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--plume-bg); color: var(--plume-ink); margin: 0; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--plume-gold); text-decoration: none; transition: color .15s ease; } a:hover, a:focus { color: var(--plume-gold-dark); } img { display: block; max-width: 100%; height: auto; } /* ── 5. Navigation ─────────────────────────────────────────── */ .plume-site-header { background: var(--plume-surface); border-bottom: 1px solid var(--plume-line); position: sticky; top: 0; z-index: 100; } .plume-nav { padding: 0 1.5rem; } .plume-nav__inner { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin: 0 auto; max-width: 1180px; min-height: 60px; } .plume-nav__brand { align-items: center; color: var(--plume-ink) !important; display: flex; flex-shrink: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; font-weight: 500; gap: .5rem; text-decoration: none; } .plume-nav__brand img { border-radius: 4px; } .plume-nav__brand svg { width: 36px; height: 36px; flex-shrink: 0; color: var(--plume-ink); transition: color .2s; } .plume-nav__brand-text { color: var(--plume-ink); } .plume-nav__right { align-items: center; display: flex; gap: 1.5rem; } .plume-main-menu { align-items: center; display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .plume-main-menu__item a { color: var(--plume-muted) !important; font-size: .9rem; font-weight: 500; letter-spacing: .02em; transition: color .15s ease; } .plume-main-menu__item a:hover, .plume-main-menu__item a:focus { color: var(--plume-ink) !important; } .plume-header-actions { align-items: center; display: flex; gap: .5rem; } .plume-theme-toggle { align-items: center; background: transparent; border: 1px solid var(--plume-line); border-radius: 6px; color: var(--plume-muted); cursor: pointer; display: flex; justify-content: center; padding: .4rem; transition: background .15s ease, border-color .15s ease, color .15s ease; } .plume-theme-toggle:hover, .plume-theme-toggle:focus { background: var(--plume-gold-soft); border-color: var(--plume-gold); color: var(--plume-gold); } /* ── 6. Footer ─────────────────────────────────────────────── */ .plume-site-footer { background: var(--plume-surface); border-top: 1px solid var(--plume-line); margin-top: auto; padding: 1.5rem; } .plume-site-footer__inner { align-items: center; display: grid; gap: 1rem; grid-template-columns: auto 1fr auto; margin: 0 auto; max-width: 1180px; } .plume-site-footer__copyright { color: var(--plume-muted) !important; font-size: .85rem; } .plume-site-footer__links { align-items: center; display: flex; flex-wrap: wrap; font-size: .82rem; gap: .5rem 1rem; justify-content: center; } .plume-site-footer__links a, .plume-site-footer__links span { color: var(--plume-muted) !important; } .plume-site-footer__links a:hover { color: var(--plume-ink) !important; } .plume-site-footer__social { display: flex; gap: .75rem; justify-self: end; } .plume-social-link { align-items: center; color: var(--plume-muted) !important; display: flex; font-size: .82rem; gap: .35rem; } .plume-social-link:hover { color: var(--plume-ink) !important; } /* ── 7. Shell / Layout ─────────────────────────────────────── */ .plume-blog-shell { color: var(--plume-ink); margin: 0 auto; max-width: 1180px; padding: clamp(2rem, 4vw, 4.25rem) 1.25rem 4rem; } /* ── 8. Buttons ────────────────────────────────────────────── */ .plume-button { align-items: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; display: inline-flex; font-size: .82rem; font-weight: 700; gap: .45rem; justify-content: center; letter-spacing: .06em; line-height: 1; min-height: 44px; padding: 0 1.2rem; text-decoration: none; text-transform: uppercase; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; } .plume-button--primary { background: var(--plume-gold); border-color: var(--plume-gold); color: var(--plume-button-primary-fg) !important; } .plume-button--primary:hover, .plume-button--primary:focus { background: var(--plume-gold-dark); border-color: var(--plume-gold-dark); box-shadow: 0 4px 14px rgba(138, 106, 36, .2); color: var(--plume-button-primary-fg) !important; } .plume-button--secondary { background: transparent; border-color: var(--plume-gold); color: var(--plume-gold) !important; } .plume-button--secondary:hover, .plume-button--secondary:focus { background: var(--plume-gold); color: #fff !important; } /* ── 9. Section Headings ───────────────────────────────────── */ .plume-section-heading { margin-bottom: 1.2rem; } .plume-section-heading p { color: var(--plume-gold); font-size: .74rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .4rem; text-transform: uppercase; } .plume-section-heading h2 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: 0; line-height: 1.05; margin: 0; } /* ── 10. Hero ──────────────────────────────────────────────── */ .plume-hero { display: grid; gap: clamp(2.4rem, 4.5vw, 4.5rem); grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); min-height: 560px; align-items: center; } .plume-hero__copy h1 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3rem, 7vw, 6rem); font-weight: 500; line-height: .95; letter-spacing: 0; margin: 0 0 1.2rem; } .plume-hero__copy p { color: var(--plume-muted); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.7; margin: 0; max-width: 36rem; } .plume-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* ── 11. Featured Slider ───────────────────────────────────── */ .plume-featured-shell { min-width: 0; } .plume-featured__header { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; } .plume-featured__header .plume-section-heading { margin: 0; } .plume-featured__controls { align-items: center; display: flex; gap: .45rem; } .plume-featured__controls button { appearance: none; background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; color: var(--plume-ink); cursor: pointer; font-size: 1.35rem; font-weight: 700; height: 2.35rem; line-height: 1; width: 2.35rem; transition: background .15s ease, border-color .15s ease; } .plume-featured__controls button:hover, .plume-featured__controls button:focus { background: var(--plume-gold-soft); border-color: var(--plume-gold); } .plume-featured { display: grid; gap: 1rem; grid-auto-flow: column; grid-auto-columns: calc(50% - .5rem); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding: .25rem .25rem 1.1rem; scroll-padding-inline: .25rem; scroll-snap-type: x mandatory; scrollbar-width: thin; } .plume-featured__item { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; box-shadow: var(--plume-shadow); min-height: 520px; scroll-snap-align: start; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .plume-featured__item:hover, .plume-featured__item:focus-within { border-color: color-mix(in srgb, var(--plume-gold) 50%, var(--plume-line)); box-shadow: var(--plume-shadow); transform: translateY(-2px); } .plume-featured__item a { box-sizing: border-box; color: inherit !important; display: flex; flex-direction: column; height: 100%; padding: clamp(1.1rem, 2vw, 1.6rem); } .plume-featured__count { color: var(--plume-gold); font-size: .74rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .7rem; text-transform: uppercase; } .plume-featured h2 { color: var(--plume-ink); display: -webkit-box; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-height: 1.1; margin: 0; overflow: hidden; } .plume-featured p { color: var(--plume-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.65; margin: 1rem 0 1.2rem; overflow: hidden; } /* ── 12. Topic Band ────────────────────────────────────────── */ .plume-topic-band { border-top: 1px solid var(--plume-line); margin-top: clamp(2rem, 6vw, 5rem); padding-top: clamp(1.5rem, 4vw, 3rem); } .plume-topic-grid { display: grid; gap: .85rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .plume-topic { align-items: center; background: transparent; border-bottom: 1px solid var(--plume-line); color: var(--plume-ink) !important; display: flex; justify-content: space-between; min-height: 54px; padding: .65rem 0; transition: color .15s ease; } .plume-topic:hover { color: var(--plume-gold) !important; } .plume-topic strong { color: var(--plume-gold); font-size: .9rem; } /* ── 13. Content Grid ──────────────────────────────────────── */ .plume-content-grid { border-top: 1px solid var(--plume-line); display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; margin-top: clamp(2rem, 6vw, 5rem); padding-top: clamp(1.5rem, 4vw, 3rem); } .plume-side-column { display: grid; gap: 1.2rem; position: sticky; top: 4.5rem; } /* ── 14. Article Cards ─────────────────────────────────────── */ .plume-card-list { display: grid; gap: 1rem; } .plume-card { background: var(--plume-surface); border: 1px solid color-mix(in srgb, var(--plume-line) 70%, var(--plume-ink) 8%); border-radius: 4px; box-shadow: 0 1px 2px rgba(37, 36, 34, .04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .plume-card:hover, .plume-card:focus-within { border-color: color-mix(in srgb, var(--plume-gold) 50%, var(--plume-line)); box-shadow: var(--plume-shadow); transform: translateY(-2px); } .plume-card__link { box-sizing: border-box; color: inherit !important; display: flex; flex-direction: column; gap: .65rem; padding: clamp(1rem, 2vw, 1.4rem); } .plume-card--list .plume-card__link, .plume-card--standard .plume-card__link { min-height: 160px; } .plume-card__category { color: var(--plume-gold); font-size: .74rem; font-weight: 800; letter-spacing: .08em; margin: 0; text-transform: uppercase; } .plume-card__title { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 500; letter-spacing: 0; line-height: 1.1; margin: 0; } .plume-card__desc { color: var(--plume-muted); line-height: 1.65; margin: 0; } .plume-card__meta { align-items: center; border-top: 1px solid var(--plume-line); color: var(--plume-muted); display: flex; flex-wrap: wrap; font-size: .82rem; gap: .7rem; margin-top: auto; padding-top: .85rem; } .plume-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; } .plume-card__tags span { border: 1px solid var(--plume-line); border-radius: 3px; color: var(--plume-muted); font-size: .72rem; font-weight: 600; padding: .2rem .4rem; } /* ── 15. Tags Panel ────────────────────────────────────────── */ .plume-tags-panel { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; padding: 1.2rem; } .plume-tags-panel .plume-section-heading h2 { font-size: 1.35rem; } .plume-tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; } .plume-tag-cloud a { border: 1px solid var(--plume-line); border-radius: 3px; color: var(--plume-ink) !important; font-size: .84rem; padding: .35rem .55rem; transition: background .15s ease, border-color .15s ease, color .15s ease; } .plume-tag-cloud a:hover, .plume-tag-cloud a:focus { background: var(--plume-gold-soft); border-color: var(--plume-gold); color: var(--plume-gold-dark) !important; } .plume-tag-cloud a span { color: var(--plume-gold); font-size: .75rem; } /* ── 16. Archive ───────────────────────────────────────────── */ .plume-archive { border-top: 1px solid var(--plume-line); margin-top: clamp(2rem, 6vw, 5rem); padding-top: clamp(1.5rem, 4vw, 3rem); } .plume-archive__list { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .plume-archive__year { border-top: 1px solid var(--plume-line); padding: 1rem 0; } .plume-archive__year summary { color: var(--plume-ink); cursor: pointer; display: flex; font-family: Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 500; justify-content: space-between; list-style: none; user-select: none; } .plume-archive__year summary::-webkit-details-marker { display: none; } .plume-archive__year summary span { color: var(--plume-muted); font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: .9rem; font-weight: 400; } .plume-archive__months { display: grid; gap: 1rem; margin-top: 1rem; } .plume-archive__month { border-top: 1px solid var(--plume-line); padding-top: .85rem; } .plume-archive__month h3 { align-items: center; color: var(--plume-ink); display: flex; font-size: .9rem; justify-content: space-between; letter-spacing: .04em; margin: 0 0 .65rem; text-transform: uppercase; } .plume-archive__month h3 span { color: var(--plume-gold); font-size: .82rem; } .plume-archive__year ol { list-style: none; margin: 0; padding: 0; } .plume-archive__year li { display: grid; gap: .75rem; grid-template-columns: 4rem minmax(0, 1fr); margin: .5rem 0; } .plume-archive__year time { color: var(--plume-muted); font-size: .84rem; } .plume-archive__year a { color: var(--plume-ink) !important; font-size: .9rem; } .plume-archive__year a:hover { color: var(--plume-gold) !important; } /* ── 17. List Page / Page Kicker ───────────────────────────── */ .plume-list-page { max-width: 980px; } .plume-page-kicker { border-bottom: 1px solid var(--plume-line); margin-bottom: 1.4rem; padding-bottom: 1.4rem; } .plume-page-kicker p { color: var(--plume-gold); font-size: .74rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .5rem; text-transform: uppercase; } .plume-page-kicker h1 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 500; line-height: .95; margin: 0 0 .75rem; } .plume-page-kicker__desc { color: var(--plume-muted); font-size: clamp(1rem, 1.8vw, 1.15rem); line-height: 1.7; max-width: 44rem; } /* ── 18. Filter Bar ────────────────────────────────────────── */ .plume-filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1.4rem; } .plume-filter-bar a { border: 1px solid var(--plume-line); border-radius: 3px; color: var(--plume-ink) !important; font-size: .86rem; padding: .4rem .6rem; transition: background .15s ease, border-color .15s ease, color .15s ease; } .plume-filter-bar a:hover, .plume-filter-bar a:focus, .plume-filter-bar a.is-active { background: var(--plume-gold-soft); border-color: var(--plume-gold); color: var(--plume-gold-dark) !important; } .plume-filter-bar a.is-active { font-weight: 700; } .plume-card-list--wide .plume-card__link { min-height: 200px; } /* ── 19. Term Grid ─────────────────────────────────────────── */ .plume-term-grid { display: grid; gap: .85rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; } .plume-term-card { align-items: center; background: transparent; border-bottom: 1px solid var(--plume-line); color: var(--plume-ink) !important; display: flex; justify-content: space-between; min-height: 54px; padding: .65rem 0; transition: color .15s ease; } .plume-term-card:hover { color: var(--plume-gold) !important; } .plume-term-card strong { color: var(--plume-gold); } /* ── 20. Article Single Page ───────────────────────────────── */ .plume-article-shell { max-width: 1180px; } .plume-article__header { border-bottom: 1px solid var(--plume-line); margin: 0 auto clamp(2rem, 5vw, 4rem); max-width: 900px; padding-bottom: clamp(1.5rem, 4vw, 3rem); text-align: center; } .plume-breadcrumbs { align-items: center; color: var(--plume-muted); display: flex; flex-wrap: wrap; font-size: .86rem; gap: .45rem; justify-content: center; margin-bottom: 1.5rem; } .plume-breadcrumbs a { color: var(--plume-muted) !important; } .plume-breadcrumbs a:hover { color: var(--plume-ink) !important; } .plume-article__category { color: var(--plume-gold); font-size: .74rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .8rem; text-transform: uppercase; } .plume-article__header h1 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem, 6vw, 5.5rem); font-weight: 500; letter-spacing: 0; line-height: .96; margin: 0; } .plume-article__dek { color: var(--plume-muted); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.7; margin: 1.2rem auto 0; max-width: 720px; } .plume-article__meta { align-items: center; color: var(--plume-muted); display: flex; flex-wrap: wrap; font-size: .9rem; gap: .5rem 1rem; justify-content: center; margin-top: 1.2rem; } .plume-article__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 720px) 280px; justify-content: center; } /* ── 21. Article Content (Markdown) ────────────────────────── */ .plume-article__content { color: var(--fg); font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 1.06rem; line-height: 1.82; min-width: 0; } .plume-article__content > :first-child { margin-top: 0; } .plume-article__content h1, .plume-article__content h2, .plume-article__content h3, .plume-article__content h4, .plume-article__content h5, .plume-article__content h6 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-weight: 500; letter-spacing: 0; line-height: 1.15; } .plume-article__content h2 { border-top: 1px solid var(--plume-line); font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin-top: 3rem; padding-top: 2rem; } .plume-article__content h3 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); margin-top: 2.2rem; } .plume-article__content h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: 1.8rem; } .plume-article__content p, .plume-article__content ul, .plume-article__content ol { color: var(--fg); } .plume-article__content a { color: var(--plume-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .plume-article__content a:hover { color: var(--plume-gold-dark); } .plume-article__content blockquote { border-left: 3px solid var(--plume-gold); color: var(--plume-muted); font-style: italic; margin: 1.5rem 0; padding: .75rem 1.25rem; } .plume-article__content code { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 3px; font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; font-size: .88em; padding: .15em .35em; } .plume-article__content pre { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; margin: 1.5rem 0; overflow-x: auto; padding: 1.25rem; } .plume-article__content pre code { background: none; border: none; font-size: .9rem; padding: 0; } .plume-article__content table { border-collapse: collapse; display: block; font-size: .95rem; margin: 1.5rem 0; overflow-x: auto; width: 100%; } .plume-article__content th { background: var(--plume-surface); border: 1px solid var(--plume-line); color: var(--plume-ink); font-weight: 700; padding: .6rem .85rem; text-align: left; } .plume-article__content td { border: 1px solid var(--plume-line); padding: .55rem .85rem; } .plume-article__content img, .plume-article__content figure { border-radius: 4px; box-shadow: var(--plume-shadow); margin: 1.5rem auto; } .plume-article__content hr { display: none; } /* ── 22. Article Tags Footer ───────────────────────────────── */ .plume-article__tags { border-top: 1px solid var(--plume-line); display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; padding-top: 1rem; } .plume-article__tags a { border: 1px solid var(--plume-line); border-radius: 3px; color: var(--plume-ink) !important; font-size: .86rem; padding: .4rem .6rem; text-decoration: none; transition: background .15s ease, border-color .15s ease; } .plume-article__tags a:hover { background: var(--plume-gold-soft); border-color: var(--plume-gold); color: var(--plume-gold-dark) !important; } /* ── 23. Article CTA ───────────────────────────────────────── */ .plume-article-cta { align-items: center; background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; margin-top: 2rem; padding: clamp(1rem, 2vw, 1.35rem); } .plume-article-cta__eyebrow { color: var(--plume-gold) !important; font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .45rem !important; text-transform: uppercase; } .plume-article-cta h2 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.3rem, 2.5vw, 1.85rem); font-weight: 500; line-height: 1.1; margin: 0; } .plume-article-cta p { color: var(--plume-muted); line-height: 1.6; margin: .5rem 0 0; } .plume-article-cta__actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; } /* ── 24. Article Aside ─────────────────────────────────────── */ .plume-article__aside { align-self: start; display: grid; gap: 1rem; position: sticky; top: 4.5rem; } .plume-article__toc { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; padding: 1rem; } .plume-article__toc h2 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; font-weight: 500; margin: 0 0 .8rem; } .plume-article__toc #TableOfContents { margin: 0; padding: 0; } .plume-article__toc #TableOfContents ul { list-style: none; margin: 0; padding: 0 0 0 .75rem; } .plume-article__toc #TableOfContents > ul { padding: 0; } .plume-article__toc a { color: var(--plume-muted) !important; display: block; font-size: .88rem; line-height: 1.5; padding: .2rem 0; transition: color .15s ease; } .plume-article__toc a:hover { color: var(--plume-gold) !important; } .plume-context-panel { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; padding: 1rem; } .plume-context-panel h2 { color: var(--plume-ink); font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; font-weight: 500; margin: 0 0 .75rem; } .plume-context-list { list-style: none; margin: 0; padding: 0; } .plume-context-list li { border-bottom: 1px solid var(--plume-line); display: grid; gap: .2rem; padding: .6rem 0; } .plume-context-list li:last-child { border-bottom: none; } .plume-context-list a { color: var(--plume-ink) !important; font-size: .9rem; font-weight: 500; line-height: 1.4; } .plume-context-list a:hover { color: var(--plume-gold) !important; } .plume-context-list span { color: var(--plume-muted); font-size: .78rem; } .plume-comments { margin-top: 3rem; } /* ── 25. Syntax Highlighting ───────────────────────────────── */ .highlight { background: var(--plume-surface); border: 1px solid var(--plume-line); border-radius: 4px; margin: 1.5rem 0; overflow-x: auto; } .highlight pre { background: none; border: none; margin: 0; padding: 1.25rem; } /* ── 26. Responsive ────────────────────────────────────────── */ @media (max-width: 1024px) { .plume-hero { grid-template-columns: 1fr; min-height: auto; } .plume-content-grid { grid-template-columns: 1fr; } .plume-side-column { position: static; } .plume-topic-grid, .plume-term-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plume-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .plume-featured { grid-auto-columns: calc(60% - .5rem); } .plume-article__grid { grid-template-columns: 1fr; } .plume-article__aside { position: static; } .plume-article-cta { grid-template-columns: 1fr; } .plume-article-cta__actions { justify-content: flex-start; } .plume-site-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .plume-nav { padding-left: 1rem; padding-right: 1rem; } .plume-nav__inner { flex-wrap: wrap; min-height: 52px; } .plume-nav__right { flex: 0 0 100%; order: 3; padding-bottom: .5rem; } .plume-main-menu { gap: 1rem; } .plume-hero__copy h1 { font-size: 2.8rem; } .plume-featured { grid-auto-columns: minmax(82vw, 1fr); } .plume-featured__item { min-height: 460px; } .plume-topic-grid, .plume-term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plume-archive__list { grid-template-columns: 1fr; } .plume-blog-shell { padding-left: 1rem; padding-right: 1rem; } .plume-site-footer__inner { grid-template-columns: 1fr; justify-items: start; } .plume-site-footer__social { justify-self: start; } .plume-site-footer__links { justify-content: flex-start; } } /* ── 27. Accessibility ─────────────────────────────────────── */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* ── 28. Nested Links (Markdown content) ───────────────────── */ .nested-links a { color: var(--plume-gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .nested-links a:hover { color: var(--plume-gold-dark); } .nested-copy-line-height { line-height: 1.82; } /* ── 29. Prevent mermaid code block rendering ──────────────── */ pre code.language-mermaid { background: none !important; color: inherit !important; }