/* Theme Name: Back Pain STL Template: twentytwentyfive Description: Back Pain STL — dark ground, Goudy display over Montserrat, single accent. Generated from the shared Padda site base; edit ~/Websites/_tools/brandtheme/base.css, not this file. Version: 1.0.0 */ /* ==== Back Pain STL — brand tokens ========================================= The ONLY per-brand block in this stylesheet. Everything below is shared with the sibling sites and must not carry a literal brand color. Source of truth: 03-brand-assets/README.md The `prp-` class prefix is the shared design-system prefix across all four sites, not a reference to platelet-rich plasma. Renaming it would mean rewriting the block markup of every published page for no visible gain. Do not "correct" it. ------------------------------------------------------------------ */ :root { --bd-ink: #0B0A0A; /* page ground */ --bd-masthead: #0E0D0D; /* header + footer band */ --bd-paper: #F2F0F0; /* body text on the dark ground */ --bd-ground: #F3F2F2; /* light surfaces */ --bd-charcoal: #444141; --bd-mist: #D7D3D3; /* rules and dividers */ --bd-accent: #FF563C; /* links, eyebrow rules, primary button fill */ --bd-accent-d: #AE1800; /* hover fill, Call button */ --bd-accent-l: #FF8D7A; /* uncommon-tier marker */ --bd-alert: #EC3013; /* alert tier only */ --bd-ink-soft: #252222; /* Channel tokens. Translucent tints are written rgb(var(--bd-X-rgb) / a) because rgba() cannot take a hex custom property. Without these the shared stylesheet silently rendered PRP STL's orange, paper, ink, ember and red on every sibling site -- 57 declarations of the wrong brand. */ --bd-accent-rgb: 255 86 60; --bd-accent-d-rgb: 174 24 0; --bd-accent-l-rgb: 255 141 122; --bd-paper-rgb: 242 240 240; --bd-ink-rgb: 11 10 10; --bd-alert-rgb: 236 48 19; --bd-charcoal-rgb: 68 65 65; } /* ---- ground -------------------------------------------------------- */ html { background: var(--bd-ink, #080807); } body { background: var(--bd-ink, #080807); color: var(--bd-paper, #f2efea); font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ---- display type -------------------------------------------------- */ h1, h2, .wp-block-post-title { font-family: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif; font-weight: 400; color: #FFFFFF; text-wrap: balance; } .wp-block-post-title, h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.013em; margin: 0 0 .6em; } h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.15rem); line-height: 1.15; letter-spacing: -.008em; margin: 2.6em 0 .7em; padding-top: 1.5em; border-top: 1px solid rgba(255,255,255,.12); } h2:first-of-type { border-top: 0; padding-top: 0; } /* h3 was pinned at 1.18rem, which overrode the theme.json h3 token and left it 0.9px above body copy -- on the FAQ pages, where h3 carries the question, that is not a heading, it is a bold paragraph. Back to the token so the ramp is body 18 / h3 22 / h2 34. */ h3 { font-family: Montserrat, sans-serif; font-weight: 600; font-size: var(--wp--preset--font-size--h3, 1.38rem); color: #FFFFFF; margin: 2em 0 .4em; letter-spacing: -.004em; } /* ---- body ---------------------------------------------------------- */ p { color: rgb(var(--bd-paper-rgb) / 0.74); line-height: 1.68; margin: 0 0 1.15em; max-width: 68ch; } p strong, li strong { color: var(--bd-paper, #f2efea); font-weight: 600; } p em { color: rgb(var(--bd-paper-rgb) / 0.86); } /* lead paragraph — the first one after the title carries the hook. :not(.prp-eyebrow) matters: :first-of-type is a pseudo-class, so this selector outranks the eyebrow rule and would style the eyebrow as a lead. */ .entry-content > p:first-of-type:not(.prp-eyebrow), .wp-block-post-content > p:first-of-type:not(.prp-eyebrow) { font-size: 1.18rem; line-height: 1.6; color: rgb(var(--bd-paper-rgb) / 0.86); max-width: 52ch; } /* the paragraph right after the opening eyebrow is the real lead */ .entry-content > .prp-eyebrow:first-child + p, .wp-block-post-content > .prp-eyebrow:first-child + p { font-size: 1.18rem; line-height: 1.6; color: rgb(var(--bd-paper-rgb) / 0.86); max-width: 52ch; } /* ---- links --------------------------------------------------------- */ a { color: var(--bd-accent, #e2661a); text-decoration: none; border-bottom: 1px solid rgb(var(--bd-accent-rgb) / 0.32); transition: color .16s, border-color .16s; } a:hover { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.5); } /* ---- lists: accent markers ----------------------------------------- */ ul.wp-block-list { list-style: none; padding-left: 0; margin: 0 0 1.6em; } ul.wp-block-list li { position: relative; padding-left: 1.5em; margin-bottom: .8em; color: rgb(var(--bd-paper-rgb) / 0.74); line-height: 1.62; max-width: 68ch; } ul.wp-block-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--bd-accent, #e2661a); } /* ---- the call-to-action block -------------------------------------- */ .prp-cta { border: 1px solid rgb(var(--bd-accent-rgb) / 0.45); background: rgb(var(--bd-accent-rgb) / 0.05); padding: 2.2rem 2rem; margin: 3.5rem 0 1rem; } .prp-cta h2 { border-top: 0; padding-top: 0; margin-top: 0; font-size: 1.6rem; } .prp-cta p { max-width: 60ch; } .prp-cta a { border-bottom: 0; font-weight: 600; } /* ---- images -------------------------------------------------------- */ img, .wp-block-post-featured-image img { max-width: 100%; height: auto; } .wp-block-post-featured-image { margin-bottom: 2.5rem; } .wp-block-post-featured-image img { filter: saturate(.82) contrast(1.04); } /* ---- masthead / nav ------------------------------------------------ */ .wp-block-site-title a { font-family: "Sorts Mill Goudy", Georgia, serif; color: #FFFFFF; border-bottom: 0; font-size: 1.42rem; } .wp-block-navigation { font-size: .8rem; letter-spacing: .01em; } .wp-block-navigation a { color: rgba(255,255,255,.72); border-bottom: 0; } .wp-block-navigation a:hover { color: #FFFFFF; } header.wp-block-template-part { background: var(--bd-masthead, #0b0b0a); border-bottom: 1px solid rgba(255,255,255,.12); } /* ---- footer -------------------------------------------------------- */ footer.wp-block-template-part { background: var(--bd-masthead, #0b0b0a); margin-top: 5rem; border-top: 1px solid rgba(255,255,255,.12); } footer.wp-block-template-part p:not([class]) { font-size: .95rem; color: rgba(255,255,255,.62); } footer.wp-block-template-part a { color: rgba(255,255,255,.62); border-bottom: 0; } footer.wp-block-template-part a:hover { color: var(--bd-accent, #e2661a); } /* ---- separators ---------------------------------------------------- */ hr.wp-block-separator { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 3rem 0; } /* ---- reading measure ----------------------------------------------- */ .wp-block-post-content { max-width: 760px; margin-inline: auto; padding: 0 1.5rem; } @media (max-width: 700px) { h2 { margin-top: 2em; padding-top: 1.2em; } .prp-cta { padding: 1.6rem 1.2rem; } } /* ---- eyebrow: the accent rule + tracked caps above a section -------- */ /* Eyebrow sized against the headline it introduces. At .625rem it was a fifth of the H1 and read as a caption rather than as a kicker; it now sits at roughly two fifths, on the same viewport curve as the H1 so the relationship holds at every width instead of only at one. Tracking comes down from .2em to .11em -- letter-spacing that reads as deliberate at 10px reads as broken at 20px. The rule before it is set in em so it grows with the type rather than shrinking against it. */ .prp-eyebrow { font-size: clamp(1.2rem, .78rem + 1.45vw, 1.75rem); letter-spacing: .085em; color: var(--bd-accent, #e2661a); line-height: 1.25; text-transform: none; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .75em; max-width: none; font-weight: 600; } .prp-eyebrow::before { content: ""; width: 1.7em; height: 2px; background: var(--bd-accent, #e2661a); flex: 0 0 1.7em; } /* Card and callout eyebrows stay small -- inside a bordered tier box the label is chrome, not a kicker, and the section rule above would swamp it. */ .prp-tier .prp-eyebrow, .prp-flag .prp-eyebrow { font-size: .82rem; letter-spacing: .15em; } .prp-tier .prp-eyebrow::before, .prp-flag .prp-eyebrow::before { width: 1.9em; flex: 0 0 1.9em; } /* ---- FAQ: h3 rows read as an accordion list ------------------------ */ .wp-block-post-content h3 { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.1em; } .wp-block-post-content h3 + p { color: rgb(var(--bd-paper-rgb) / 0.66); font-size: .96rem; } /* ---- pull the stat figure out of the paragraph --------------------- */ .wp-block-post-content p > strong:first-child { font-family: "Sorts Mill Goudy", Georgia, serif; font-weight: 400; } /* ---- link lists (the cross-link blocks) ---------------------------- */ ul.wp-block-list li a { border-bottom: 0; } ul.wp-block-list li a:hover { border-bottom: 1px solid rgba(255,255,255,.5); } /* ---- selection ----------------------------------------------------- */ ::selection { background: var(--bd-accent, #e2661a); color: #FFFFFF; } /* ---- focus, kept visible ------------------------------------------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--bd-accent, #e2661a); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ==== layout vocabulary from the approved artboards =================== */ /* hero: text left, image right, flush to the rule below */ .prp-hero { padding: 3.2rem 0 3rem; border-bottom: 1px solid rgba(255,255,255,.12); } .prp-hero h1 { margin-top: 0; } .prp-lead { font-size: 1.06rem; line-height: 1.6; color: rgb(var(--bd-paper-rgb) / 0.74); max-width: 44ch; } .prp-hero-img { margin: 0; } .prp-hero-img img { width: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06) brightness(.92); } /* two-column split used throughout */ .prp-split { gap: 3rem; align-items: flex-start; margin: 0 0 1rem; } .prp-split > .wp-block-column > *:first-child { margin-top: 0; } /* severity scale: four boxes across */ .prp-scale ul.wp-block-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 2.5rem; } .prp-scale li { padding: .95rem 1rem; border: 1px solid rgba(255,255,255,.14); border-bottom: 2px solid var(--bd-accent, #e2661a); font-size: .82rem; color: rgb(var(--bd-paper-rgb) / 0.86); } .prp-scale li::before { display: none; } /* the flagged callout */ .prp-flag { border: 1px solid rgb(var(--bd-accent-rgb) / 0.45); padding: 1.4rem 1.5rem; } .prp-flag p { margin-bottom: 0; font-size: .92rem; } /* the statistic panel */ .prp-stat { border-left: 1px solid rgba(255,255,255,.12); padding-left: 2rem; } .prp-stat p { font-size: .93rem; } /* after .prp-stat p, and matched at equal-or-higher specificity, or the body size wins and the figure renders at 15px. */ .prp-stat p.prp-fig, p.prp-fig { font-family: "Sorts Mill Goudy", Georgia, serif; font-size: clamp(2.8rem, 2rem + 2.6vw, 3.9rem); line-height: .98; color: var(--bd-accent, #e2661a); margin: 0 0 .6rem; max-width: none; letter-spacing: -.02em; } /* numbered steps */ .prp-steps ol.wp-block-list { list-style: none; counter-reset: s; padding-left: 0; } .prp-steps li { counter-increment: s; position: relative; padding-left: 2.6rem; margin-bottom: 1.25rem; color: rgb(var(--bd-paper-rgb) / 0.74); } .prp-steps li::before { content: "0" counter(s); position: absolute; left: 0; top: .1em; font-size: .72rem; letter-spacing: .12em; color: var(--bd-accent, #e2661a); font-weight: 600; background: none; width: auto; height: auto; } /* the pull quote */ .prp-quote { border-left: 2px solid var(--bd-accent, #e2661a); padding-left: 1.6rem; margin: 0 0 1.4rem; } .prp-q { font-family: "Sorts Mill Goudy", Georgia, serif; font-size: 1.42rem; line-height: 1.34; color: #FFFFFF; font-style: italic; margin-bottom: .5rem; } .prp-attrib { font-size: .78rem; letter-spacing: .1em; color: rgba(255,255,255,.42); } /* drive-time row */ .prp-access ul.wp-block-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); margin: 0 0 1.2rem; } .prp-access li { padding: 1.3rem 1.2rem; border-right: 1px solid rgba(255,255,255,.12); } .prp-access li:last-child { border-right: 0; } .prp-access li::before { display: none; } .prp-access a { border-bottom: 0; display: block; } .prp-from { display: block; font-size: .62rem; letter-spacing: .18em; color: rgba(255,255,255,.42); margin-bottom: .45rem; } .prp-min { font-family: "Sorts Mill Goudy", Georgia, serif; font-size: 1.7rem; color: #FFFFFF; } .prp-access a:hover .prp-min { color: var(--bd-accent, #e2661a); } /* wide sections escape the reading measure */ /* NOTE on full-bleed: margin-inline: calc(50% - 50vw) is the common idiom and it failed here twice, for two different reasons. Its 50% resolves against the PARENT's content box, which on this theme is neither full width nor always centered; and TT5 sets margin-left/right: auto !important on constrained children, which silently discards the negative margin while leaving width:100vw in place -- the element then overflows by exactly the offset it should have been pulled back by. left/translateX depends on neither, so it is the house pattern. */ .wp-block-post-content > .prp-hero, .wp-block-post-content > .wp-block-columns, .wp-block-post-content > .prp-scale, .wp-block-post-content > .prp-access { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; margin-left: 0 !important; margin-right: 0 !important; padding-inline: max(1.5rem, calc(50vw - 620px)); } @media (max-width: 860px) { .prp-split { gap: 1.6rem; } .prp-scale ul.wp-block-list { grid-template-columns: repeat(2, 1fr); } .prp-access ul.wp-block-list { grid-template-columns: repeat(2, 1fr); } .prp-access li:nth-child(2) { border-right: 0; } .prp-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: 1.5rem; } .prp-fig { font-size: 2.8rem; } } /* The front page carries its H1 inside the hero, so the template title would duplicate it. Every other page still uses the template title as its H1. */ body.home .wp-block-post-title, body.page-template-home .wp-block-post-title { display: none; } /* Child pages: give the template title the same hero framing as the front page so the look is one system rather than two. */ body:not(.home) .wp-block-post-title { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; margin-left: 0 !important; margin-right: 0 !important; padding: 3.2rem max(1.5rem, calc(50vw - 620px)) 2.4rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 3rem; } body:not(.home) .wp-block-post-featured-image { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; /* The parent theme's border-box reset does not reach
, so this element alone computed content-box: width:100vw PLUS 48px of padding measured 828px in a 780px viewport and gave every non-home page a 24px horizontal scroll. The sibling .wp-block-post-title uses the same full-bleed idiom and was fine only because it inherits border-box. Set it here rather than adding a global reset, which would silently resize every other block that has been sized against the current behavior. */ box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; padding-inline: max(1.5rem, calc(50vw - 620px)); margin-bottom: 3rem; } body:not(.home) .wp-block-post-featured-image img { width: 100%; max-height: 340px; object-fit: cover; } /* The parent template emits the featured image before the title. The approved layout leads with the hook, so reorder the wrapper rather than fork the template. */ body:not(.home) .wp-block-group:has(> .wp-block-post-title) { display: flex; flex-direction: column; } body:not(.home) .wp-block-post-title { order: 1; } body:not(.home) .wp-block-post-featured-image { order: 2; } body:not(.home) .entry-content, body:not(.home) .wp-block-post-content { order: 3; } body:not(.home) .wp-block-post-title { border-bottom: 0; margin-bottom: 0; padding-bottom: 1.1rem; } body:not(.home) .wp-block-post-featured-image { margin-top: 0; margin-bottom: 2.6rem; } body:not(.home) .wp-block-post-content > .prp-eyebrow:first-child { margin-bottom: 2.2rem; } /* Editorial treatment for the photography: the design's images are desaturated and slightly crushed so a full-color stock frame never fights the type. */ .wp-block-post-featured-image img, .prp-hero-img img { filter: saturate(.68) contrast(1.08) brightness(.86); } body:not(.home) .wp-block-post-featured-image { position: relative; } body:not(.home) .wp-block-post-featured-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(var(--bd-ink-rgb) / 0.10) 0%, rgb(var(--bd-ink-rgb) / 0.62) 100%); } /* ---- severity tiers (SideEffects artboard) -------------------------- Expected = accent, Uncommon = ember, Call us if = alert. Color is a second channel on top of the wording, never the only one. */ .prp-tier { border: 1px solid rgba(255,255,255,.14); padding: 1.5rem 1.6rem; margin: 0 0 1.2rem; } .prp-tier .prp-eyebrow { margin-bottom: .9rem; } .prp-tier ul.wp-block-list li::before { background: currentColor; } .prp-tier-expected { border-color: rgb(var(--bd-accent-rgb) / 0.42); background: rgb(var(--bd-accent-rgb) / 0.04); } .prp-tier-expected .prp-eyebrow { color: var(--bd-accent, #e2661a); } .prp-tier-expected .prp-eyebrow::before { background: var(--bd-accent, #e2661a); } .prp-tier-expected ul.wp-block-list li::before { background: var(--bd-accent, #e2661a); } .prp-tier-uncommon { border-color: rgb(var(--bd-accent-l-rgb) / 0.42); background: rgb(var(--bd-accent-l-rgb) / 0.04); } .prp-tier-uncommon .prp-eyebrow { color: var(--bd-accent, #e2661a); } .prp-tier-uncommon .prp-eyebrow::before { background: var(--bd-accent, #e2661a); } .prp-tier-uncommon ul.wp-block-list li::before { background: var(--bd-accent, #e2661a); } .prp-tier-alert { border-color: rgb(var(--bd-alert-rgb) / 0.55); background: rgb(var(--bd-alert-rgb) / 0.05); } .prp-tier-alert .prp-eyebrow { color: var(--bd-alert, #ff1d25); } .prp-tier-alert .prp-eyebrow::before { background: var(--bd-alert, #ff1d25); } .prp-tier-alert ul.wp-block-list li::before { background: var(--bd-alert, #ff1d25); } .prp-tier-alert p strong { color: #FFFFFF; } /* ---- eyebrows are section markers, not captions -------------------- They were 10px and butted against the paragraph above, so they read as small print instead of announcing a new section. Larger, and with real air plus a rule above. */ .wp-block-post-content > .prp-eyebrow, .entry-content > .prp-eyebrow { font-weight: 700; margin-top: 4.5rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.12); margin-bottom: 1.1rem; } .wp-block-post-content > .prp-eyebrow::before, .entry-content > .prp-eyebrow::before { width: 1.9em; flex-basis: 1.9em; height: 2px; } /* an eyebrow immediately followed by its heading owns the rule; the heading must not draw a second one right underneath it */ .wp-block-post-content > .prp-eyebrow + h2, .entry-content > .prp-eyebrow + h2 { border-top: 0; padding-top: 0; margin-top: .1rem; } /* the eyebrow that opens a page sits under the title, so no rule or gap */ .wp-block-post-content > .prp-eyebrow:first-child, .entry-content > .prp-eyebrow:first-child { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 2.4rem; } /* Nested eyebrows: reset the section chrome only. Size is NOT set here -- it was, at .72rem, and with `.wp-block-column` in the selector it caught the hero eyebrow and pinned it small. Size belongs to .prp-eyebrow and to the card variants, nowhere else. */ .prp-tier .prp-eyebrow, .prp-flag .prp-eyebrow { margin-top: 0; padding-top: 0; border-top: 0; } /* headings need the same breathing room the artboards give them */ .wp-block-post-content h2, .entry-content h2 { margin-top: 4.5rem; padding-top: 1.8rem; } .wp-block-post-content h2:first-child, .entry-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .wp-block-post-content h3, .entry-content h3 { margin-top: 2.6rem; padding-top: 1.4rem; } /* Size and tracking for eyebrows live on .prp-eyebrow alone. They used to be set again here at (0,2,0) and again on the card variants, so raising the base size silently did nothing on inner pages -- the descendant rule won on specificity. Contextual variants below set size ONLY where the context genuinely differs (inside a card), never as a restatement. */ /* Card variants only. `.wp-block-column .prp-eyebrow` used to be in this list, which silently caught the HERO eyebrow -- the hero's text column is a plain wp-block-column -- and held it at .85rem while every other eyebrow on the page scaled. A layout wrapper is not a context; only the actual card components are. */ /* A promoted tier label is an

carrying the eyebrow treatment: it keeps the tracked-caps look while giving the page a real heading outline, so color is never the only thing conveying structure. */ h3.prp-eyebrow { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: .85rem; letter-spacing: .15em; font-weight: 700; border-top: 0; padding-top: 0; margin: 0 0 .9rem; display: flex; align-items: center; gap: .7rem; } h3.prp-eyebrow::before { content: ""; width: 1.9em; flex: 0 0 1.9em; height: 2px; background: currentColor; } .prp-tier-expected h3.prp-eyebrow { color: var(--bd-accent, #e2661a); } .prp-tier-uncommon h3.prp-eyebrow { color: var(--bd-accent, #e2661a); } .prp-tier-alert h3.prp-eyebrow { color: var(--bd-alert, #ff1d25); } /* An eyebrow that now sits directly above its own heading owns the spacing; the heading must not add a second rule or a second gap. */ .wp-block-post-content > .prp-eyebrow + h2, .entry-content > .prp-eyebrow + h2, .wp-block-column > .prp-eyebrow + h3 { border-top: 0; padding-top: 0; margin-top: .1rem; } /* ==== graphic vertical timeline ====================================== Staged recovery lists render as a real timeline: a spine running down the left, a node per stage, and the interval promoted out of the sentence into a display label. The spine fades as it descends, because the far end of a recovery is the least certain part of it. */ ul.prp-timeline { list-style: none; padding-left: 2.5rem; margin: 2rem 0 2.6rem; position: relative; } ul.prp-timeline::before { content: ""; position: absolute; left: 6px; top: .7rem; bottom: 1.1rem; width: 1px; background: linear-gradient(180deg, var(--bd-accent, #e2661a) 0%, rgb(var(--bd-accent-rgb) / 0.55) 45%, rgba(255,255,255,.14) 100%); } ul.prp-timeline > li { position: relative; padding-left: 0; margin-bottom: 1.9rem; color: rgb(var(--bd-paper-rgb) / 0.74); line-height: 1.62; max-width: 62ch; } ul.prp-timeline > li:last-child { margin-bottom: 0; } /* the node sits on the spine, punched out of the page ground */ ul.prp-timeline > li::before { content: ""; position: absolute; left: -2.5rem; top: .34em; width: 13px; height: 13px; border-radius: 50%; background: var(--bd-ink, #080807); border: 2px solid var(--bd-accent, #e2661a); box-shadow: 0 0 0 4px var(--bd-ink, #080807); } ul.prp-timeline > li:last-child::before { border-color: rgba(255,255,255,.30); } /* the interval becomes the stage label rather than a bold run-in */ ul.prp-timeline > li > strong:first-child { display: block; font-family: "Sorts Mill Goudy", "Goudy Old Style", Georgia, serif; font-weight: 400; font-size: 1.24rem; line-height: 1.2; color: #FFFFFF; letter-spacing: -.006em; margin-bottom: .3rem; } ul.prp-timeline > li:last-child > strong:first-child { color: rgb(var(--bd-paper-rgb) / 0.82); } @media (max-width: 700px) { ul.prp-timeline { padding-left: 2rem; } ul.prp-timeline::before { left: 5px; } ul.prp-timeline > li::before { left: -2rem; width: 11px; height: 11px; } ul.prp-timeline > li > strong:first-child { font-size: 1.12rem; } } /* The footer part renders as