/* ============================================================ spero-blog article styling Shared by posts carrying the .spero-blog-post wrapper, currently "Do More Bank Regulations Reduce Share Prices?" and "What Will Happen with a 10% Cap on Credit Card Rates?" Location: 2023SRA/css/spero-blog.css Loaded by sra_enqueue_page_bundles() in functions.php, keyed on the marker "spero-blog-post". Depends on 'chld_thm_cfg_child' so it loads after style.css. Versioned by filemtime(). Pairs with /js/spero-blog.js. Merged from two _wpb_post_custom_css postmeta fields that had diverged from a common ancestor. Where they conflicted, the "Do More Bank Regulations" values were kept — the eight decisions are listed at the bottom of this file, along with which two a reader would actually notice. No !important anywhere. Both source blocks worked as inline styles, and this loads at the same cascade position via the style.css dependency, so the ~200 !important declarations the credit-card copy carried are not needed. If a rule loses a specificity fight after deploying, start here. ============================================================ */ .spero-blog-post * { box-sizing: border-box; } .spero-blog-post { max-width: 1200px; margin: 0 auto; padding: 0 10px 10px 10px; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; line-height: 1.7; color: #333; background: white; /* From the credit-card copy: stops the wide table and chart grid forcing a horizontal scrollbar. Harmless where there is no wide content. */ overflow-x: hidden; width: 100%; /* Shared padding for the callout boxes. Five rules used to repeat 20px -> 15px at 768px; they now all read this token. */ --spero-box-pad: 20px; } .spero-blog-post .spero-content { max-width: 100%; margin: 0; overflow-x: hidden; width: 100%; } .spero-blog-post .spero-intro { font-size: 0.95em; line-height: 1.7; color: #333; margin: 0 0 20px 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; font-weight: 400; } .spero-blog-post .spero-mission { font-size: 0.95em; line-height: 1.7; color: #2c3e50; margin-bottom: 30px; text-align: left; font-weight: 500; background-color: #f8f9fa; padding: var(--spero-box-pad); border-radius: 5px; border: 1px solid #dee2e6; } .spero-blog-post .spero-section { margin-bottom: 20px; } .spero-blog-post .spero-heading { font-size: 1.4em; color: #34495e; margin-top: 0; margin-bottom: 20px; font-weight: 600; line-height: 1.3; border-left: 4px solid #3a4373; padding-left: 15px; text-align: left; } .spero-blog-post .spero-text { font-size: 0.95em; line-height: 1.7; margin-bottom: 15px; color: #333; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } .spero-blog-post .spero-text a { color: #3a4373; text-decoration: none; font-weight: 600; border-bottom: 1px solid #3a4373; } .spero-blog-post .spero-text a:hover { color: #4a61a3; border-bottom-color: #4a61a3; } /* ============================================ CHART IMAGES (click to zoom, driven by spero-blog.js) ============================================ */ .spero-blog-post .charts-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; } .spero-blog-post .chart-container { text-align: center; position: relative; } .spero-blog-post .chart-image { max-width: 100%; height: auto; border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: zoom-in; } /* Focus ring for the charts, which spero-blog.js makes keyboard reachable. */ .spero-blog-post .chart-image:focus-visible { outline: 3px solid #3a4373; outline-offset: 3px; } /* NOT scoped under .spero-blog-post: spero-blog.js appends the overlay to , so it is never a descendant of the article. */ .chart-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.85); z-index: 9998; cursor: zoom-out; } .chart-overlay.active { display: block; } /* Also unscoped: the zoomed chart is position: fixed above the overlay. */ .chart-image.zoomed { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 85vw; max-height: 85vh; width: auto; height: auto; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4); z-index: 9999; cursor: zoom-out; border-radius: 8px; } .spero-blog-post .chart-caption { font-size: 0.9em; color: #3a4373; font-weight: 500; margin-top: 8px; text-align: center; } /* ============================================ COMPACT CALCULATION TABLE ============================================ */ .spero-blog-post .compact-calc-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95em; } .spero-blog-post .compact-calc-table td { padding: 8px 12px; border-bottom: 1px solid #e0e0e0; } .spero-blog-post .compact-calc-table tr:last-child td { border-bottom: none; } .spero-blog-post .compact-calc-table .label-col { font-weight: 600; color: #2c3e50; width: 35%; } .spero-blog-post .compact-calc-table .calc-col { font-family: 'Courier New', monospace; color: #555; text-align: center; } .spero-blog-post .compact-calc-table .result-col { font-weight: 700; color: #3a4373; text-align: right; } .spero-blog-post .compact-calc-table .scenario-divider { background: #f8f9fa; } .spero-blog-post .compact-calc-table .scenario-divider td { font-weight: 600; color: #3a4373; font-size: 0.9em; padding: 10px 12px; } /* ============================================ SUBSECTIONS AND CLOSING BOX ============================================ */ .spero-blog-post .subsection { margin: 20px 0; } .spero-blog-post .subsection-label { font-weight: 600; color: #3a4373; font-size: 0.95em; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .spero-blog-post .spero-closing { background: #f8f9fa; padding: var(--spero-box-pad); border-radius: 5px; margin: 30px 0; text-align: left; border: 1px solid #dee2e6; } .spero-blog-post .spero-closing h3 { color: #2c3e50; font-size: 1.3em; margin: 0 0 15px 0; font-weight: 600; text-align: left; } .spero-blog-post .spero-closing p { font-size: 0.95em; line-height: 1.7; color: #333; margin-bottom: 10px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } /* ============================================ CALLOUT BOXES AND LISTS ============================================ */ .spero-blog-post .spero-demo { background: linear-gradient(135deg, #3a4373 0%, #4a61a3 100%); color: white; padding: var(--spero-box-pad); border-radius: 5px; text-align: center; margin: 15px 0 30px 0; } .spero-blog-post .spero-demo h3 { font-size: 1.3em; margin: 0 0 10px 0; font-weight: 600; color: white; } .spero-blog-post .spero-demo p { margin-bottom: 15px; font-size: 1em; opacity: 0.95; } .spero-blog-post .spero-list { background-color: #f8f9fa; border: 1px solid #dee2e6; border-left: 4px solid #3a4373; padding: 15px 20px; margin: 15px 0; border-radius: 5px; } .spero-blog-post .spero-list ul, .spero-blog-post .spero-list ol { margin: 0; padding-left: 20px; } /* Only the Corona Virus copy set this, and only on ul. Applying it to ol as well would replace the numbers with bullets, so it stays split out. */ .spero-blog-post .spero-list ul { list-style-type: disc; } .spero-blog-post .spero-list li { font-size: 0.95em; line-height: 1.7; color: #333; margin-bottom: 8px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } .spero-blog-post .spero-link { color: #3a4373; text-decoration: none; font-weight: 600; } .spero-blog-post .spero-link:hover { text-decoration: underline; color: #2c3e50; } /* -- from "Q1 2020 Large Bank CECL Estimates" -- */ .spero-blog-post .spero-formula { background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; margin: 15px 0; border-radius: 5px; text-align: center; font-style: italic; font-size: 1.1em; color: #2c3e50; } .spero-blog-post .spero-caveat { background-color: #fff3cd; border: 1px solid #ffeaa7; border-left: 4px solid #f39c12; padding: var(--spero-box-pad); margin: 20px 0; border-radius: 5px; } .spero-blog-post .spero-caveat h4 { color: #e67e22; margin-top: 0; font-weight: 600; } .spero-blog-post .spero-data-note { background-color: #e8f4f8; border: 1px solid #bee5eb; padding: 15px; margin: 20px 0; border-radius: 5px; font-size: 0.9em; line-height: 1.6; } /* -- from "Is the Third Time a Charm for Effective Risk Management?" -- */ .spero-blog-post .spero-definition { background-color: #e9ecef; border: 1px solid #ced4da; padding: var(--spero-box-pad); margin: 20px 0; border-radius: 5px; font-size: 0.95em; line-height: 1.7; } .spero-blog-post .spero-definition h4 { color: #2c3e50; margin-top: 0; font-weight: 600; } /* NOTE: .spero-footnote is a standalone italic aside, distinct from the .spero-footnotes / .spero-footnote-item pair below. Class selectors match whole tokens, so the singular and plural cannot collide. */ .spero-blog-post .spero-footnote { font-size: 0.9em; color: #666; font-style: italic; background-color: #f8f9fa; padding: 10px 15px; border-left: 3px solid #dee2e6; margin: 10px 0; border-radius: 0 5px 5px 0; } /* ============================================ FOOTNOTES AND CITATIONS ============================================ */ .spero-blog-post .spero-footnotes { border-top: 2px solid #dee2e6; margin-top: 40px; padding-top: 20px; font-size: 0.9em; color: #666; } .spero-blog-post .spero-footnote-item { margin-bottom: 15px; padding-left: 20px; text-indent: -20px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; line-height: 1.6; } .spero-blog-post .spero-citation { color: #3a4373; font-size: 0.9em; font-weight: 600; text-decoration: none; vertical-align: super; } .spero-blog-post .spero-citation:hover { text-decoration: underline; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .spero-blog-post { padding: 0 15px 10px 15px; max-width: 100vw; /* was five separate padding overrides on the callout boxes */ --spero-box-pad: 15px; } .spero-blog-post .spero-heading { font-size: 1.2em; margin-bottom: 8px; padding-left: 12px; border-left-width: 3px; } .spero-blog-post .spero-text { margin-bottom: 8px; } .spero-blog-post .spero-section { margin-bottom: 14px; } .spero-blog-post .spero-closing { margin: 14px 0; } .spero-blog-post .spero-closing h3 { margin-bottom: 8px; } .spero-blog-post .spero-closing p { margin-bottom: 8px; } .spero-blog-post .spero-list { padding: 12px 16px; } .spero-blog-post .chart-container { margin: 15px 0; } .spero-blog-post .charts-wrapper { grid-template-columns: 1fr; gap: 15px; } .spero-blog-post .compact-calc-table { font-size: 0.9em; } .spero-blog-post .compact-calc-table .label-col { width: 40%; } .spero-blog-post .subsection-label { font-size: 0.9em; } } @media (prefers-reduced-motion: reduce) { .spero-blog-post .chart-image { transition-duration: 0.01ms; } } /* ============================================================ THE EIGHT MERGE DECISIONS Left value is what this file uses; right is what the credit-card copy had. Only the first two are visible to a reader. VISIBLE .spero-heading margin-bottom 20px was 10px (space under headings doubles) .spero-intro font-weight 400 was 500 (lede goes from semibold to regular) BARELY VISIBLE .spero-text margin-bottom 15px was 10px .spero-section margin-bottom 20px was 18px .spero-intro margin 0 0 20px 0 was 10px 0 20px 0 .spero-closing p margin-bottom 15px was 10px NOT VISIBLE .spero-intro font-size 0.95em was 1em .spero-text font-size 0.95em was 1em If the credit-card post reads too loose under its headings, or its opening paragraph too light, those are the two lines to change — and changing them moves both posts, which is the trade for having one file. ============================================================ */