closed immediately by WP ── WP wpautop often closes
immediately, so .article-body selectors don't match. We duplicate all those rules under .article-wrapper so they still work. ── */ /* ── Disable post-content h2 underline bar inside article-wrapper ── Articles use .section-number (big "01", "02" …) instead. ── */ .article-wrapper h2::after { display: none !important; } .article-wrapper h2 { padding-bottom: 0 !important; } /* ── h4 margin reset inside cards (wpautop may add default margins) ── */ .tool-card h4, .dimension-card h4, .force-card h4, .quadrant-card h4, .segment-card h4, .level-card h4, .nego-card h4, .source-card h4 { margin-top: 0 !important; margin-bottom: 10px !important; } /* ========================================================================== CODE BLOCKS ========================================================================== */ .post-content code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: .88em; background: rgba(43,188,192,.08); color: var(--teal); padding: 2px 8px; border-radius: 4px; } .post-content pre { margin: 30px 0; padding: 24px; background: var(--navy-card); border: 1px solid rgba(43,188,192,.12); border-radius: 12px; overflow-x: auto; line-height: 1.6; } .post-content pre code { background: none; padding: 0; color: var(--off-white); font-size: .88rem; } /* ========================================================================== IMAGES IN CONTENT ========================================================================== */ .post-content img { border-radius: 12px; margin: 24px 0; border: 1px solid rgba(43,188,192,.1); } .post-content figure { margin: 30px 0; } .post-content figcaption { font-size: .82rem; color: var(--grey); text-align: center; margin-top: 10px; font-style: italic; } /* ========================================================================== HORIZONTAL RULES ========================================================================== */ .post-content hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(43,188,192,.25), transparent); margin: 50px 0; } /* ========================================================================== SIDEBAR ========================================================================== */ .post-sidebar { position: sticky; top: 100px; } .sidebar-widget { background: var(--navy-card); border: 1px solid rgba(43,188,192,.1); border-radius: 16px; padding: 28px 24px; margin-bottom: 24px; } .widget-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(43,188,192,.1); } /* ========================================================================== TAGS ========================================================================== */ .post-tags-section { padding: 40px 0; } .post-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .post-tag { background: rgba(212,168,67,.1); color: var(--gold); padding: 6px 18px; border-radius: 50px; font-size: .8rem; font-weight: 600; border: 1px solid rgba(212,168,67,.2); transition: all .3s; } .post-tag:hover { background: rgba(212,168,67,.2); transform: translateY(-2px); } /* ========================================================================== POST NAVIGATION ========================================================================== */ .post-navigation-section { padding: 50px 0; border-top: 1px solid rgba(43,188,192,.1); } .post-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .post-nav-item { background: var(--navy-card); border: 1px solid rgba(43,188,192,.1); border-radius: 16px; padding: 24px; transition: all .35s ease; display: block; } .post-nav-item:hover { border-color: rgba(43,188,192,.3); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.25); } .post-nav-next { text-align: right; } .post-nav-label { font-size: .75rem; color: var(--teal); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; margin-bottom: 8px; } .post-nav-title { font-size: .95rem; font-weight: 700; color: var(--white); display: block; line-height: 1.4; } /* ========================================================================== COMMENTS ========================================================================== */ .comments-section { padding: 60px 0; background: linear-gradient(180deg, var(--navy), var(--navy-light)); } .comments-wrapper { max-width: 800px; margin: 0 auto; } .comments-wrapper .comment-reply-title, .comments-wrapper .comments-title { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 30px; } .comments-wrapper .comment-form textarea, .comments-wrapper .comment-form input[type="text"], .comments-wrapper .comment-form input[type="email"], .comments-wrapper .comment-form input[type="url"] { width: 100%; background: var(--navy-card); border: 1px solid rgba(43,188,192,.15); border-radius: 10px; padding: 14px 18px; color: var(--white); font-family: var(--font-main); font-size: .95rem; transition: border-color .3s; } .comments-wrapper .comment-form textarea:focus, .comments-wrapper .comment-form input:focus { outline: none; border-color: var(--teal); } .comments-wrapper .comment-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .comments-wrapper .comment-form .form-submit input { background: var(--teal); color: var(--navy); border: none; padding: 14px 36px; border-radius: 50px; font-family: var(--font-main); font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .35s; } .comments-wrapper .comment-form .form-submit input:hover { background: var(--lime); transform: translateY(-2px); } /* Pagination (for archives) */ .blog-pagination .nav-links { display: flex; gap: 8px; justify-content: center; align-items: center; } .blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; background: var(--navy-card); border: 1px solid rgba(43,188,192,.12); border-radius: 10px; color: var(--off-white); font-weight: 600; font-size: .88rem; transition: all .3s; } .blog-pagination .page-numbers:hover, .blog-pagination .page-numbers.current { background: var(--teal); color: var(--navy); border-color: var(--teal); } /* ========================================================================== DARK THEME READABILITY FIX — Nuclear Override Forces ALL text inside post content to be visible on the dark navy background. Uses !important + direct hex values + -webkit-text-fill-color to override ANY plugin (ZoloBlocks, Gutenberg defaults, etc.). ========================================================================== */ /* ---- NUCLEAR: Force visible text on ALL elements inside post-content ---- */ .single-post .post-content, .single-post .post-content p, .single-post .post-content li, .single-post .post-content dd, .single-post .post-content dt, .single-post .post-content address, .single-post .post-content span, .single-post .post-content div, .single-post .post-content td, .single-post .post-content label, .single-post .post-content figcaption, .single-post .post-content cite, .single-post .post-content small { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; opacity: 1 !important; visibility: visible !important; } /* ---- Headings: force pure white ---- */ .single-post .post-content h1, .single-post .post-content h2, .single-post .post-content h3, .single-post .post-content h4, .single-post .post-content h5, .single-post .post-content h6, .single-post .post-content .wp-block-heading { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Strong / Bold: white ---- */ .single-post .post-content strong, .single-post .post-content b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Links: teal ---- */ .single-post .post-content a:not(.btn):not(.wp-block-button__link) { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; } /* ---- ALL Gutenberg blocks catch-all ---- */ .single-post .post-content [class*="wp-block-"], .single-post .post-content [class*="wp-block-"] p, .single-post .post-content [class*="wp-block-"] li, .single-post .post-content [class*="wp-block-"] span, .single-post .post-content [class*="wp-block-"] div { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- ZoloBlocks plugin overrides ---- */ .single-post .post-content [class*="zolo-"], .single-post .post-content [class*="zolo-"] p, .single-post .post-content [class*="zolo-"] span, .single-post .post-content [class*="zolo-"] div, .single-post .post-content [class*="zolo-"] li, .single-post .post-content [class*="zb-"], .single-post .post-content [class*="zb-"] p, .single-post .post-content [class*="zb-"] span, .single-post .post-content [class*="zb-"] div, .single-post .post-content [class*="zb-"] li, .single-post .post-content [class*="zoloblocks"], .single-post .post-content [class*="zoloblocks"] p, .single-post .post-content [class*="zoloblocks"] span, .single-post .post-content [class*="zoloblocks"] div { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- ZoloBlocks headings ---- */ .single-post .post-content [class*="zolo-"] h1, .single-post .post-content [class*="zolo-"] h2, .single-post .post-content [class*="zolo-"] h3, .single-post .post-content [class*="zolo-"] h4, .single-post .post-content [class*="zolo-"] h5, .single-post .post-content [class*="zolo-"] h6, .single-post .post-content [class*="zb-"] h1, .single-post .post-content [class*="zb-"] h2, .single-post .post-content [class*="zb-"] h3, .single-post .post-content [class*="zb-"] h4, .single-post .post-content [class*="zb-"] h5, .single-post .post-content [class*="zb-"] h6 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Force dark backgrounds on any light backgrounds from plugins ---- */ .single-post .post-content [class*="zolo-"], .single-post .post-content [class*="zb-"], .single-post .post-content [class*="zoloblocks"] { background-color: transparent !important; } /* ---- Gutenberg paragraph ---- */ .single-post .post-content .wp-block-paragraph, .single-post .post-content .has-text-align-left, .single-post .post-content .has-text-align-center, .single-post .post-content .has-text-align-right { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Gutenberg list ---- */ .single-post .post-content .wp-block-list, .single-post .post-content .wp-block-list li { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Gutenberg quote ---- */ .single-post .post-content .wp-block-quote, .single-post .post-content .wp-block-quote p, .single-post .post-content .wp-block-quote cite, .single-post .post-content .wp-block-pullquote, .single-post .post-content .wp-block-pullquote p, .single-post .post-content .wp-block-pullquote cite { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } .single-post .post-content .wp-block-quote { border-left-color: #d4a843 !important; background: #1e2c3d !important; padding: 24px 30px; border-radius: 0 12px 12px 0; margin-left: 0 !important; margin-right: 0 !important; } .single-post .post-content .wp-block-pullquote { border-top-color: #2bbcc0 !important; border-bottom-color: #2bbcc0 !important; } /* ---- Gutenberg table ---- */ .single-post .post-content .wp-block-table table { background: #1e2c3d !important; border-color: rgba(43,188,192,.15) !important; } .single-post .post-content .wp-block-table th { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; background: rgba(43,188,192,.1) !important; } .single-post .post-content .wp-block-table td { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } .single-post .post-content .wp-block-table figcaption { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } /* ---- Gutenberg columns & group ---- */ .single-post .post-content .wp-block-columns, .single-post .post-content .wp-block-column, .single-post .post-content .wp-block-group, .single-post .post-content .wp-block-group__inner-container { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } .single-post .post-content .wp-block-group.has-background { border-radius: 12px; padding: 24px; } /* ---- Gutenberg cover ---- */ .single-post .post-content .wp-block-cover, .single-post .post-content .wp-block-cover__inner-container, .single-post .post-content .wp-block-cover p, .single-post .post-content .wp-block-cover h2, .single-post .post-content .wp-block-cover h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .single-post .post-content .wp-block-cover { border-radius: 12px; overflow: hidden; margin: 30px 0; } /* ---- Gutenberg media-text ---- */ .single-post .post-content .wp-block-media-text, .single-post .post-content .wp-block-media-text .wp-block-media-text__content, .single-post .post-content .wp-block-media-text p { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Gutenberg code ---- */ .single-post .post-content .wp-block-code { background: #1e2c3d !important; border: 1px solid rgba(43,188,192,.12); border-radius: 12px; color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; padding: 24px; } .single-post .post-content .wp-block-code code { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; background: none !important; } /* ---- Gutenberg preformatted ---- */ .single-post .post-content .wp-block-preformatted { background: #1e2c3d !important; border: 1px solid rgba(43,188,192,.12); border-radius: 12px; padding: 24px; color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Gutenberg verse ---- */ .single-post .post-content .wp-block-verse { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; background: #1e2c3d !important; padding: 24px; border-radius: 12px; } /* ---- Gutenberg separator ---- */ .single-post .post-content .wp-block-separator { border-color: rgba(43,188,192,.2) !important; opacity: 1 !important; } .single-post .post-content .wp-block-separator:not(.is-style-dots) { background: linear-gradient(90deg, transparent, rgba(43,188,192,.25), transparent) !important; border: none !important; height: 1px; } /* ---- Gutenberg details/accordion ---- */ .single-post .post-content .wp-block-details, .single-post .post-content details { background: #1e2c3d !important; border: 1px solid rgba(43,188,192,.12); border-radius: 12px; padding: 20px 24px; margin: 20px 0; color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } .single-post .post-content .wp-block-details summary, .single-post .post-content details summary { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-weight: 700; cursor: pointer; } /* ---- Gutenberg button ---- */ .single-post .post-content .wp-block-button .wp-block-button__link { background: #2bbcc0 !important; color: #1a2535 !important; -webkit-text-fill-color: #1a2535 !important; border-radius: 50px; font-weight: 700; padding: 14px 32px; transition: all .35s; } .single-post .post-content .wp-block-button .wp-block-button__link:hover { background: #c3e030 !important; color: #1a2535 !important; -webkit-text-fill-color: #1a2535 !important; } .single-post .post-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; border: 2px solid #2bbcc0; } /* ---- Gutenberg images & gallery ---- */ .single-post .post-content .wp-block-image figcaption, .single-post .post-content .wp-block-gallery figcaption { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } .single-post .post-content .wp-block-image img, .single-post .post-content .wp-block-gallery img { border-radius: 12px; border: 1px solid rgba(43,188,192,.1); } /* ---- Gutenberg embed ---- */ .single-post .post-content .wp-block-embed figcaption { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } /* ---- Gutenberg file ---- */ .single-post .post-content .wp-block-file { background: #1e2c3d !important; border: 1px solid rgba(43,188,192,.12); border-radius: 12px; padding: 16px 20px; } .single-post .post-content .wp-block-file a { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; } /* ---- Gutenberg search ---- */ .single-post .post-content .wp-block-search { background: var(--navy-card, #1e2c3d) !important; border: 1px solid rgba(43,188,192,.12); border-radius: 16px; padding: 24px; margin: 32px 0; max-width: 100% !important; box-sizing: border-box; } .single-post .post-content .wp-block-search__label { font-size: .8rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; color: var(--teal, #2bbcc0) !important; -webkit-text-fill-color: var(--teal, #2bbcc0) !important; margin-bottom: 12px !important; display: block; } .single-post .post-content .wp-block-search input, .single-post .post-content .wp-block-search .wp-block-search__input { background: rgba(43,188,192,.06) !important; border: 1px solid rgba(43,188,192,.15); color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-radius: 50px; padding: 12px 24px; font-size: .95rem; width: 100%; box-sizing: border-box; } .single-post .post-content .wp-block-search input:focus, .single-post .post-content .wp-block-search .wp-block-search__input:focus { outline: none; border-color: var(--teal, #2bbcc0); } .single-post .post-content .wp-block-search button, .single-post .post-content .wp-block-search .wp-block-search__button { background: var(--teal, #2bbcc0) !important; color: var(--navy, #1a2535) !important; -webkit-text-fill-color: var(--navy, #1a2535) !important; border: none; padding: 12px 24px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: all .35s; margin-top: 8px; } .single-post .post-content .wp-block-search button:hover, .single-post .post-content .wp-block-search .wp-block-search__button:hover { background: var(--lime, #c3e030) !important; } /* ---- Footnotes ---- */ .single-post .post-content .wp-block-footnotes li, .single-post .post-content .wp-block-footnotes { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-size: .88rem; } /* ---- Absolute catch-all: any remaining elements ---- */ .single-post .post-content .entry-content, .single-post .post-content .wp-block-post-content, article.single-post .post-content *:not(img):not(iframe):not(video):not(svg):not(.btn):not(.wp-block-button__link) { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Re-assert headings after catch-all ---- */ article.single-post .post-content h1, article.single-post .post-content h2, article.single-post .post-content h3, article.single-post .post-content h4, article.single-post .post-content h5, article.single-post .post-content h6 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Re-assert links after catch-all ---- */ article.single-post .post-content a:not(.btn):not(.wp-block-button__link) { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; } /* ---- Re-assert strong/bold after catch-all ---- */ article.single-post .post-content strong, article.single-post .post-content b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Override dangerous dark Gutenberg palette colors ---- */ .single-post .post-content .has-black-color, .single-post .post-content .has-cyan-bluish-gray-color, .single-post .post-content .has-very-dark-gray-color { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Background blocks: ensure dark + visible text ---- */ .single-post .post-content .has-background { border-radius: 12px; padding: 20px 24px; } .single-post .post-content .has-background:not(.has-text-color) { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ========================================================================== ZOLOBLOCKS THEME-BUILDER OVERRIDE When ZoloBlocks overrides the single-post template via its Theme Builder, our .single-post / .post-content wrappers DO NOT EXIST on the page. These rules target ZoloBlocks' own post-content block DIRECTLY, with no parent-class dependency. ========================================================================== */ /* ---- Base text inside ZoloBlocks post-content ---- */ .wp-block-zolo-post-content, .wp-block-zolo-post-content p, .wp-block-zolo-post-content li, .wp-block-zolo-post-content span, .wp-block-zolo-post-content div, .wp-block-zolo-post-content dd, .wp-block-zolo-post-content dt, .wp-block-zolo-post-content td, .wp-block-zolo-post-content th, .wp-block-zolo-post-content address, .wp-block-zolo-post-content label, .wp-block-zolo-post-content small, .wp-block-zolo-post-content cite, .wp-block-zolo-post-content figcaption { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Headings ---- */ .wp-block-zolo-post-content h1, .wp-block-zolo-post-content h2, .wp-block-zolo-post-content h3, .wp-block-zolo-post-content h4, .wp-block-zolo-post-content h5, .wp-block-zolo-post-content h6, .wp-block-zolo-post-content strong, .wp-block-zolo-post-content b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Links ---- */ .wp-block-zolo-post-content a:not(.btn):not(.wp-block-button__link) { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; } /* ---- Gutenberg blocks inside ZoloBlocks post-content ---- */ .wp-block-zolo-post-content [class*="wp-block-"], .wp-block-zolo-post-content [class*="wp-block-"] p, .wp-block-zolo-post-content [class*="wp-block-"] li, .wp-block-zolo-post-content [class*="wp-block-"] span, .wp-block-zolo-post-content [class*="wp-block-"] div { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } .wp-block-zolo-post-content [class*="wp-block-"] h1, .wp-block-zolo-post-content [class*="wp-block-"] h2, .wp-block-zolo-post-content [class*="wp-block-"] h3, .wp-block-zolo-post-content [class*="wp-block-"] h4, .wp-block-zolo-post-content [class*="wp-block-"] h5, .wp-block-zolo-post-content [class*="wp-block-"] h6 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .wp-block-zolo-post-content [class*="wp-block-"] strong, .wp-block-zolo-post-content [class*="wp-block-"] b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .wp-block-zolo-post-content [class*="wp-block-"] a:not(.btn):not(.wp-block-button__link) { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; } /* ---- Tables inside ZoloBlocks ---- */ .wp-block-zolo-post-content .wp-block-table table { background: #1e2c3d !important; border-color: rgba(43,188,192,.15) !important; } .wp-block-zolo-post-content .wp-block-table th { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; background: rgba(43,188,192,.1) !important; } .wp-block-zolo-post-content .wp-block-table td { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Blockquotes inside ZoloBlocks ---- */ .wp-block-zolo-post-content .wp-block-quote { border-left-color: #d4a843 !important; background: #1e2c3d !important; padding: 24px 30px; border-radius: 0 12px 12px 0; margin-left: 0 !important; margin-right: 0 !important; } .wp-block-zolo-post-content .wp-block-quote p, .wp-block-zolo-post-content .wp-block-quote cite { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Code blocks inside ZoloBlocks ---- */ .wp-block-zolo-post-content .wp-block-code, .wp-block-zolo-post-content .wp-block-preformatted { background: #1e2c3d !important; border: 1px solid rgba(43,188,192,.12); border-radius: 12px; padding: 24px; color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* ---- Separators inside ZoloBlocks ---- */ .wp-block-zolo-post-content .wp-block-separator { border-color: rgba(43,188,192,.2) !important; opacity: 1 !important; } .wp-block-zolo-post-content .wp-block-separator:not(.is-style-dots) { background: linear-gradient(90deg, transparent, rgba(43,188,192,.25), transparent) !important; border: none !important; height: 1px; } /* ---- Buttons inside ZoloBlocks ---- */ .wp-block-zolo-post-content .wp-block-button .wp-block-button__link { background: #2bbcc0 !important; color: #1a2535 !important; -webkit-text-fill-color: #1a2535 !important; border-radius: 50px; font-weight: 700; } /* ---- Images inside ZoloBlocks ---- */ .wp-block-zolo-post-content .wp-block-image img { border-radius: 12px; border: 1px solid rgba(43,188,192,.1); } .wp-block-zolo-post-content .wp-block-image figcaption { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } /* ---- Force transparent bg on ZoloBlocks wrappers ---- */ .wp-block-zolo-post-content [class*="zolo-"], .wp-block-zolo-post-content [class*="zb-"], .wp-block-zolo-post-content [class*="zoloblocks"] { background-color: transparent !important; } /* ---- Dangerous dark palette colors ---- */ .wp-block-zolo-post-content .has-black-color, .wp-block-zolo-post-content .has-cyan-bluish-gray-color, .wp-block-zolo-post-content .has-very-dark-gray-color { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } .wp-block-zolo-post-content .has-white-color { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ---- Catch-all for remaining ZoloBlocks content ---- */ .wp-block-zolo-post-content *:not(img):not(iframe):not(video):not(svg):not(.btn):not(.wp-block-button__link) { color: #e8ecf1 !important; -webkit-text-fill-color: #e8ecf1 !important; } /* Re-assert headings after catch-all */ .wp-block-zolo-post-content h1, .wp-block-zolo-post-content h2, .wp-block-zolo-post-content h3, .wp-block-zolo-post-content h4, .wp-block-zolo-post-content h5, .wp-block-zolo-post-content h6, .wp-block-zolo-post-content strong, .wp-block-zolo-post-content b { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* Re-assert links after catch-all */ .wp-block-zolo-post-content a:not(.btn):not(.wp-block-button__link) { color: #2bbcc0 !important; -webkit-text-fill-color: #2bbcc0 !important; } /* ========================================================================== ARTICLE SERIES — Les Indispensables du Category Manager CSS pour les composants HTML personnalisés collés dans WordPress. Toutes les classes des articles de la série sont couvertes ici afin qu'elles s'affichent correctement dans WordPress. Les couleurs utilisent !important pour passer au-dessus des règles "nuclear override" dark-theme définies plus haut dans ce fichier. ========================================================================== */ /* ── CSS Variables supplémentaires pour les articles ── */ :root { --purple: #a78bfa; --orange: #f97316; --dark-grey: #475569; } /* ── Article wrapper ── */ .article-wrapper { max-width: 820px; margin: 0 auto; padding: 40px 20px 80px; } /* ── Article hero ── */ .article-hero { margin-bottom: 48px; } /* Brand-bar: style.css has margin-top only; articles also need bottom margin */ .article-wrapper .brand-bar, .article-hero .brand-bar { margin-bottom: 40px; } .article-badge { display: inline-block; background: rgba(43,188,192,0.15) !important; border: 1px solid var(--teal); color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 6px 16px; border-radius: 50px; margin-bottom: 20px; } .article-title { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; line-height: 1.2; margin-bottom: 20px; } .article-title .highlight { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .article-subtitle { font-size: 1.1rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; max-width: 620px; margin-bottom: 28px; } /* ── Article meta ── */ .article-meta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid rgba(43,188,192,0.12); border-bottom: 1px solid rgba(43,188,192,0.12); margin-bottom: 48px; } .meta-item { font-size: 0.78rem; font-weight: 600; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; } .meta-item .dot { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } /* ── Hero image placeholder ── */ .hero-image-placeholder { width: 100%; height: 320px; background: linear-gradient(135deg, var(--navy-card) 0%, var(--navy-light) 100%) !important; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px dashed rgba(43,188,192,0.3); color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; font-size: 0.85rem; margin-bottom: 48px; } /* ── Hero image (actual) ── */ .hero-image { width: 100%; border-radius: 12px; overflow: hidden; margin-bottom: 48px; border: 1px solid rgba(43,188,192,0.15); } .hero-image img { width: 100%; height: auto; display: block; } /* ── Article body typography ── */ .article-body h2, .article-wrapper h2 { font-family: var(--font-display); font-size: 1.7rem !important; font-weight: 700 !important; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin: 56px 0 20px !important; line-height: 1.3 !important; } .article-body h3, .article-wrapper h3 { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; text-transform: uppercase; letter-spacing: 1.5px; margin: 36px 0 14px !important; } .article-body p, .article-wrapper p { margin-bottom: 20px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; font-size: 1rem; } .article-body strong, .article-body b, .article-wrapper strong, .article-wrapper b { color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; font-weight: 700; } .article-body em, .article-wrapper em { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-style: normal; font-weight: 600; } /* ── Section number ── */ .section-number { font-family: var(--font-display); font-size: 4.5rem; font-weight: 700; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; line-height: 1; margin-bottom: -8px; opacity: 0.7; } /* ── Section divider ── */ .section-divider { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(43,188,192,0.25), transparent) !important; border: none !important; margin: 48px 0; } /* ── Article body lists ── */ .article-body ul, .article-body ol, .article-wrapper ul, .article-wrapper ol { padding-left: 0; margin-bottom: 20px; list-style: none; } .article-body ul li, .article-body ol li, .article-wrapper ul li, .article-wrapper ol li { padding: 7px 0 7px 28px; position: relative; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; border-bottom: 1px solid rgba(255,255,255,0.04); } .article-body ul li:last-child, .article-body ol li:last-child, .article-wrapper ul li:last-child, .article-wrapper ol li:last-child { border-bottom: none; } .article-body ul li::before, .article-wrapper ul li::before { content: "\2192"; position: absolute; left: 0; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; } .article-body ol, .article-wrapper ol { counter-reset: item; } .article-body ol li, .article-wrapper ol li { counter-increment: item; } .article-body ol li::before, .article-wrapper ol li::before { content: counter(item) "."; position: absolute; left: 0; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-weight: 700; font-size: 0.85rem; } /* ── Blockquote inside article ── */ .article-body blockquote, .article-wrapper blockquote { background: var(--navy-card) !important; border-left: 4px solid var(--gold); border-radius: 0 12px 12px 0; padding: 24px 28px; margin: 32px 0; font-style: italic; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; line-height: 1.7; } .article-body blockquote cite, .article-wrapper blockquote cite { display: block; font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 12px; } /* Override blockquote styling when it wraps a callout (wpautop artifact) */ .article-wrapper blockquote:has(> .callout), .article-body blockquote:has(> .callout), .post-content blockquote:has(> .callout) { background: transparent !important; border: none !important; padding: 0 !important; margin: 32px 0 !important; font-style: normal !important; border-radius: 0 !important; } /* ========================================================================== CALLOUT BOXES (tous les articles) ========================================================================== */ .callout { border-radius: 12px; padding: 24px 28px; margin: 32px 0; border-left: 4px solid; position: relative; } .callout p { margin-bottom: 0; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; } .callout p:not(:last-child) { margin-bottom: 10px; } .callout-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; display: block; } .callout-teal { background: rgba(43,188,192,0.08) !important; border-color: var(--teal); } .callout-gold { background: rgba(212,168,67,0.08) !important; border-color: var(--gold); } .callout-green { background: rgba(93,190,138,0.08) !important; border-color: var(--green); } .callout-lime { background: rgba(195,224,48,0.06) !important; border-color: var(--lime); } .callout-teal .callout-label { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .callout-gold .callout-label { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .callout-green .callout-label { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; } .callout-lime .callout-label { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; } /* ── Callout icon (emoji icon inside callout boxes) ── */ .callout-icon { font-size: 1.4rem; margin-bottom: 10px; display: block; } /* ========================================================================== TOOLS GRID — Article 0 (Introduction à la série) ========================================================================== */ .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; } .tool-card { background: var(--navy-card) !important; border-radius: 12px; padding: 24px 20px; border: 1px solid rgba(43,188,192,0.12); position: relative; overflow: hidden; } .tool-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal); } .tool-card.tool-1::before { background: var(--teal); } .tool-card.tool-2::before { background: var(--gold); } .tool-card.tool-3::before { background: var(--lime); } .tool-card.tool-4::before { background: var(--green); } .tool-card.tool-5::before { background: #f97316; } .tool-card.tool-6::before { background: #a78bfa; } .tool-num { font-size: 2.8rem; font-weight: 700; line-height: 1; margin-bottom: 10px; } .tool-card.tool-1 .tool-num { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .tool-card.tool-2 .tool-num { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .tool-card.tool-3 .tool-num { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; } .tool-card.tool-4 .tool-num { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; } .tool-card.tool-5 .tool-num { color: #f97316 !important; -webkit-text-fill-color: #f97316 !important; } .tool-card.tool-6 .tool-num { color: #a78bfa !important; -webkit-text-fill-color: #a78bfa !important; } .tool-name { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; display: block; } .tool-card.tool-1 .tool-name { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .tool-card.tool-2 .tool-name { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .tool-card.tool-3 .tool-name { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; } .tool-card.tool-4 .tool-name { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; } .tool-card.tool-5 .tool-name { color: #f97316 !important; -webkit-text-fill-color: #f97316 !important; } .tool-card.tool-6 .tool-name { color: #a78bfa !important; -webkit-text-fill-color: #a78bfa !important; } .tool-question { font-size: 0.82rem; font-style: italic; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; border-left: 2px solid rgba(43,188,192,0.4); padding-left: 10px; margin-bottom: 12px; line-height: 1.6; } .tool-benefit { font-size: 0.82rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 10px; line-height: 1.6; } .tool-phase { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } /* ========================================================================== FLOW DIAGRAM — Article 0 (Introduction à la série) ========================================================================== */ .flow-container { margin: 40px 0; padding: 28px; background: rgba(43,188,192,0.06) !important; border: 1px solid rgba(43,188,192,0.15); border-radius: 12px; } .flow-step { display: flex; align-items: center; margin-bottom: 12px; font-size: 0.88rem; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; } .flow-step:last-child { margin-bottom: 0; } .flow-step-label { font-weight: 600; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; } .flow-arrow { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; margin: 0 12px; font-weight: 700; } /* ========================================================================== CTA BOX (tous les articles) ========================================================================== */ .cta-box { background: linear-gradient(135deg, var(--navy-card) 0%, rgba(43,188,192,0.08) 100%) !important; border: 1px solid rgba(43,188,192,0.2); border-radius: 16px; padding: 40px 36px; text-align: center; margin-top: 56px; } .cta-box h3 { font-family: var(--font-display); font-size: 1.6rem !important; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 14px !important; margin-top: 0 !important; } .cta-box p { color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-btn { display: inline-block; background: var(--teal) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; padding: 14px 32px; border-radius: 50px; border-bottom: none !important; text-decoration: none; transition: background 0.3s ease; } .cta-btn:hover { background: var(--lime) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; } /* ========================================================================== SERIES NAVIGATION (tous les articles) ========================================================================== */ .series-nav { background: var(--navy-card) !important; border-radius: 12px; padding: 24px 28px; margin-top: 48px; border: 1px solid rgba(43,188,192,0.12); } .series-nav-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; margin-bottom: 14px; display: block; } .series-nav-list { list-style: none; padding: 0; } .series-nav-list li { display: flex; gap: 12px; align-items: center; padding: 8px 0 !important; padding-left: 0 !important; font-size: 0.88rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; border-bottom: 1px solid rgba(255,255,255,0.04); } .series-nav-list li::before { display: none !important; } .series-nav-list li:last-child { border-bottom: none; } .series-nav-list li.current { color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; font-weight: 700; } .series-nav-list li a { color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; text-decoration: none; border-bottom: none !important; } .series-nav-list li a:hover { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .nav-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; background: rgba(255,255,255,0.06) !important; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; } .series-nav-list li.current .nav-num { background: var(--teal) !important; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; } .series-nav-list li.done .nav-num { background: rgba(93,190,138,0.2) !important; color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; } /* ========================================================================== STEP LIST — Article 1 (Spend Analysis) ========================================================================== */ .step-list { margin: 24px 0; } .step-item { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); } .step-item:last-child { border-bottom: none; margin-bottom: 0; } .step-num { min-width: 36px; height: 36px; background: rgba(43,188,192,0.15) !important; border: 1px solid var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; flex-shrink: 0; } .step-content h4 { font-size: 0.95rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 6px; } .step-content p { font-size: 0.88rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 0 !important; line-height: 1.6; } /* ========================================================================== DIMENSIONS GRID — Article 1 (Spend Analysis) ========================================================================== */ .dimensions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0; } .dimension-card { background: var(--navy-card) !important; border-radius: 12px; padding: 24px 20px; border: 1px solid rgba(43,188,192,0.12); position: relative; } .dimension-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal); } .dimension-card.cat2::before { background: var(--green); } .dimension-card.cat3::before { background: var(--gold); } .dimension-card.cat4::before { background: var(--lime); } .dimension-card.cat5::before { background: #a78bfa; } .dimension-card.cat6::before { background: #fb923c; } .dim-number { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; margin-bottom: 8px; display: block; } .dimension-card.cat2 .dim-number { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; } .dimension-card.cat3 .dim-number { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .dimension-card.cat4 .dim-number { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; } .dimension-card.cat5 .dim-number { color: #a78bfa !important; -webkit-text-fill-color: #a78bfa !important; } .dimension-card.cat6 .dim-number { color: #fb923c !important; -webkit-text-fill-color: #fb923c !important; } .dimension-card h4 { font-size: 1rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 12px; } .dimension-card p { font-size: 0.85rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 12px !important; line-height: 1.6; } .dim-question { font-size: 0.78rem; font-style: italic; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; background: rgba(255,255,255,0.04) !important; padding: 10px 12px; border-radius: 6px; border-left: 2px solid var(--teal); margin-top: 10px; } .dimension-card.cat2 .dim-question { border-color: var(--green); } .dimension-card.cat3 .dim-question { border-color: var(--gold); } .dimension-card.cat4 .dim-question { border-color: var(--lime); } .dimension-card.cat5 .dim-question { border-color: #a78bfa; } .dimension-card.cat6 .dim-question { border-color: #fb923c; } /* ========================================================================== OPPORTUNITIES TABLE — Article 1 (Spend Analysis) ========================================================================== */ .opportunities-table-wrapper { margin: 32px 0; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(43,188,192,0.15); } .opportunities-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .opportunities-table thead { background: rgba(43,188,192,0.12) !important; } .opportunities-table thead th { padding: 14px 16px; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; white-space: nowrap; } .opportunities-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); } .opportunities-table tbody tr:last-child { border-bottom: none; } .opportunities-table tbody tr:hover { background: rgba(43,188,192,0.04) !important; } .opportunities-table td { padding: 12px 16px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; vertical-align: top; } .opportunities-table td:first-child { font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; } .opportunities-table .impact { font-weight: 700; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; } /* ========================================================================== KPI CARDS — Articles 1 & 6 ========================================================================== */ .kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 32px 0; } .kpi-card { background: var(--navy-card) !important; border-radius: 12px; padding: 20px 18px; border: 1px solid rgba(43,188,192,0.12); text-align: center; } .kpi-card .kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 10px; font-weight: 600; display: block; } .kpi-card .kpi-value { font-size: 1.8rem; font-weight: 800; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; margin-bottom: 6px; font-family: var(--font-display); display: block; } .kpi-card .kpi-metric { font-size: 1.4rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 6px; display: block; } .kpi-card .kpi-desc { font-size: 0.8rem; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; line-height: 1.5; } /* ========================================================================== ERREUR LIST — Article 1 (Spend Analysis) ========================================================================== */ .erreur-list { margin: 24px 0; } .erreur-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: rgba(255,255,255,0.03) !important; border-radius: 10px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.05); } .erreur-icon { font-size: 0; /* cache l'emoji ❌ */ flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; } .erreur-icon::after { content: '\2715'; /* ✕ — croix typographique */ display: block; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 0.75rem; font-weight: 700; color: #ef4444 !important; -webkit-text-fill-color: #ef4444 !important; background: rgba(239,68,68,0.12); border-radius: 50%; } .erreur-content h4 { font-size: 0.9rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 4px; } .erreur-content p { font-size: 0.85rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 0 !important; line-height: 1.6; } /* ========================================================================== FORCE CARDS — Article 2 (Porter's Five Forces) ========================================================================== */ .force-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; } .force-card { background: var(--navy-card) !important; border-radius: 12px; padding: 28px 24px; border: 1px solid rgba(43,188,192,0.15); position: relative; overflow: hidden; transition: all 0.3s ease; } .force-card:hover { border-color: rgba(43,188,192,0.35); box-shadow: 0 8px 24px rgba(43,188,192,0.1); transform: translateY(-4px); } .force-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal); } .force-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(43,188,192,0.15) !important; border: 2px solid var(--teal); border-radius: 50%; font-weight: 800; font-size: 1.2rem; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; margin-bottom: 14px; } .force-emoji { font-size: 1.6rem; margin-left: 8px; display: inline-block; } .force-card h4 { font-size: 1.05rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 16px; line-height: 1.3; } .force-card .questions-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; margin-top: 16px; margin-bottom: 10px; display: block; } .force-card ul { padding-left: 0; list-style: none; margin-bottom: 14px; } .force-card ul li { font-size: 0.88rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; padding: 6px 0 6px 18px; position: relative; border-bottom: none !important; } .force-card ul li::before { content: "\2022"; position: absolute; left: 2px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; } .force-badge { display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; padding: 6px 14px; border-radius: 50px; margin-top: 12px; } .force-badge.favorable { background: rgba(93,190,138,0.2) !important; color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; border: 1px solid rgba(93,190,138,0.3); } .force-badge.neutre { background: rgba(212,168,67,0.15) !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; border: 1px solid rgba(212,168,67,0.25); } .force-badge.defavorable{ background: rgba(255,100,100,0.12)!important; color: #ff6464 !important; -webkit-text-fill-color: #ff6464 !important; border: 1px solid rgba(255,100,100,0.25); } /* ========================================================================== SCORE BARS — Article 2 (Porter's Five Forces) ========================================================================== */ .score-bar-visual { margin: 32px 0; } .score-bar-visual-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 16px; font-weight: 600; } .score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .score-label { font-size: 0.8rem; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; min-width: 140px; font-weight: 500; } .score-track { flex: 1; height: 24px; background: rgba(255,255,255,0.06) !important; border-radius: 6px; overflow: hidden; } .score-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; } .score-fill.very-strong { background: var(--green) !important; } .score-fill.strong { background: #5dbe8a !important; } .score-fill.balanced { background: var(--gold) !important; } .score-fill.weak { background: #fb923c !important; } .score-fill.very-weak { background: #ff6464 !important; } /* ========================================================================== MATRIX TABLES — Articles 2, 3 ========================================================================== */ .matrix-table-wrapper, .scoring-table-wrapper { margin: 32px 0; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(43,188,192,0.15); } .matrix-table, .scoring-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .matrix-table thead, .scoring-table thead { background: rgba(43,188,192,0.12) !important; } .matrix-table thead th, .scoring-table thead th { padding: 14px 18px; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; white-space: nowrap; } .matrix-table tbody tr, .scoring-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); } .matrix-table tbody tr:last-child, .scoring-table tbody tr:last-child { border-bottom: none; } .matrix-table tbody tr:hover, .scoring-table tbody tr:hover { background: rgba(43,188,192,0.04) !important; } .matrix-table td, .scoring-table td { padding: 13px 18px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; vertical-align: top; } .matrix-table td:first-child, .scoring-table td:first-child { font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; } .matrix-table .score { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-weight: 700; } .matrix-table .position { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-weight: 600; } .scoring-table .pts { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-weight: 700; } /* ========================================================================== KRALJIC QUADRANT MATRIX — Article 3 ========================================================================== */ .matrix-wrapper { position: relative; margin: 40px 0 40px 80px; overflow-x: auto; } .matrix-container { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border: 2px solid rgba(43,188,192,0.2); border-radius: 12px; overflow: hidden; margin: 40px 0; } .matrix-quadrant { padding: 28px 24px; border: 1px solid rgba(255,255,255,0.06); position: relative; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; } .quadrant-non-critique { background: rgba(100,116,139,0.08) !important; border-color: rgba(100,116,139,0.2); } .quadrant-levier { background: rgba(43,188,192,0.08) !important; border-color: rgba(43,188,192,0.2); } .quadrant-goulot { background: rgba(255,152,51,0.08) !important; border-color: rgba(255,152,51,0.2); } .quadrant-strategique { background: rgba(212,168,67,0.08) !important; border-color: rgba(212,168,67,0.2); } .quadrant-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); } .quadrant-non-critique .quadrant-title { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } .quadrant-levier .quadrant-title { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .quadrant-goulot .quadrant-title { color: #ff9833 !important; -webkit-text-fill-color: #ff9833 !important; } .quadrant-strategique .quadrant-title { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .quadrant-examples { font-size: 0.82rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; line-height: 1.6; } .quadrant-examples li { padding: 4px 0; border: none !important; } .quadrant-examples li::before { content: "\00B7"; color: currentColor !important; margin-right: 8px; } .matrix-label-top { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 600; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; white-space: nowrap; text-transform: uppercase; letter-spacing: 1px; } .matrix-label-left { position: absolute; left: -65px; top: 50%; transform: translateY(-50%) rotate(-90deg); font-size: 0.7rem; font-weight: 600; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; } /* ── Quadrant detail cards ── */ .quadrant-card { background: var(--navy-card) !important; border-radius: 12px; padding: 28px 24px; margin: 28px 0; border: 1px solid rgba(255,255,255,0.06); border-top: 3px solid; } .quadrant-card.non-critique { border-top-color: #94a3b8; } .quadrant-card.levier { border-top-color: var(--teal); } .quadrant-card.goulot { border-top-color: #ff9833; } .quadrant-card.strategique { border-top-color: var(--gold); } .qc-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 4px 12px; border-radius: 50px; display: inline-block; margin-bottom: 12px; } .non-critique .qc-badge { background: rgba(100,116,139,0.2) !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } .levier .qc-badge { background: rgba(43,188,192,0.15) !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .goulot .qc-badge { background: rgba(255,152,51,0.15) !important; color: #ff9833 !important; -webkit-text-fill-color: #ff9833 !important; } .strategique .qc-badge { background: rgba(212,168,67,0.15) !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .qc-title { font-size: 1.2rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 12px; } .qc-subtitle { font-size: 0.88rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 16px; line-height: 1.6; } .qc-section { margin-bottom: 16px; } .qc-section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; margin-bottom: 8px; display: block; opacity: 0.8; } .qc-section-content { font-size: 0.85rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; line-height: 1.6; } .qc-list { padding-left: 0 !important; list-style: none; } .qc-list li { padding: 5px 0 5px 16px; position: relative; border: none !important; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; } .qc-list li::before { content: "\2192"; position: absolute; left: 0; color: currentColor !important; -webkit-text-fill-color: currentColor !important; opacity: 0.6; font-weight: 700; } /* ========================================================================== SEGMENT CARDS — Article 4 (Segmentation Fournisseurs) ========================================================================== */ .segment-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; } .segment-card { background: var(--navy-card) !important; border-radius: 12px; padding: 24px 20px; border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; } .segment-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; } .segment-card.strategique::before { background: var(--gold); } .segment-card.prefere::before { background: var(--teal); } .segment-card.transactionnel::before { background: #7c8db5; } .segment-card.exit::before { background: #475569; } .segment-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 50px; display: inline-block; margin-bottom: 12px; } .strategique .segment-badge { background: rgba(212,168,67,0.2) !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .prefere .segment-badge { background: rgba(43,188,192,0.15) !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .transactionnel .segment-badge{ background: rgba(124,141,181,0.15)!important; color: #7c8db5 !important; -webkit-text-fill-color: #7c8db5 !important; } .exit .segment-badge { background: rgba(71,85,105,0.2) !important; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; } .segment-card h4 { font-size: 1rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 12px; } .segment-card p { font-size: 0.82rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 12px !important; line-height: 1.6; } /* ========================================================================== SEGMENTATION MATRIX GRID — Article 4 ========================================================================== */ .matrix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 16px; background: rgba(255,255,255,0.02) !important; } .matrix-cell { padding: 28px 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); text-align: center; } .matrix-cell h4 { font-size: 0.95rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 10px; } .matrix-cell p { font-size: 0.8rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 0 !important; line-height: 1.5; } .matrix-cell.strategic { background: rgba(212,168,67,0.08) !important; border: 1px solid rgba(212,168,67,0.3); } .matrix-cell.develop { background: rgba(93,190,138,0.08) !important; border: 1px solid rgba(93,190,138,0.3); } .matrix-cell.transact { background: rgba(148,163,184,0.06)!important; border: 1px solid rgba(148,163,184,0.2); } .matrix-cell.exit { background: rgba(71,85,105,0.06) !important; border: 1px solid rgba(71,85,105,0.2); } /* ========================================================================== TIMELINE — Article 4 (Segmentation Fournisseurs) ========================================================================== */ .timeline { margin: 40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .timeline-item { background: var(--navy-card) !important; border-radius: 12px; padding: 28px 22px; border: 1px solid rgba(43,188,192,0.12); position: relative; } .timeline-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--teal); } .timeline-item.year2::before { background: var(--lime); } .timeline-item.year3::before { background: var(--gold); } .timeline-year { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; margin-bottom: 12px; } .timeline-item.year2 .timeline-year { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; } .timeline-item.year3 .timeline-year { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .timeline-item h4 { font-size: 1rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 10px; } .timeline-item p { font-size: 0.82rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 0 !important; line-height: 1.6; } /* ========================================================================== RESULTS TABLE — Article 4 ========================================================================== */ .results-table-wrapper { margin: 32px 0; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(43,188,192,0.15); } .results-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .results-table thead { background: rgba(43,188,192,0.12) !important; } .results-table thead th { padding: 14px 16px; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; } .results-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); } .results-table tbody tr:last-child { border-bottom: none; } .results-table td { padding: 12px 16px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; } .results-table td:first-child { font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; } .results-table .metric-good { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; font-weight: 700; } /* ========================================================================== LEVEL CARDS — Article 5 (Cost Breakdown & Should-Cost) ========================================================================== */ .level-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 32px 0; } .level-card { background: var(--navy-card) !important; border-radius: 12px; padding: 24px 20px; border: 1px solid rgba(43,188,192,0.12); position: relative; overflow: hidden; } .level-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .level-card.junior::before { background: var(--grey); } .level-card.confirme::before { background: var(--teal); } .level-card.expert::before { background: var(--gold); } .level-badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; padding: 4px 12px; border-radius: 50px; display: inline-block; margin-bottom: 14px; } .junior .level-badge { background: rgba(100,116,139,0.2) !important; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; } .confirme .level-badge { background: rgba(43,188,192,0.15) !important; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; } .expert .level-badge { background: rgba(212,168,67,0.15) !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .level-card h4 { font-size: 1rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 12px; } .level-card p { font-size: 0.88rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 12px !important; line-height: 1.6; } .level-example { font-size: 0.82rem; font-style: italic; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; background: rgba(255,255,255,0.04) !important; padding: 10px 14px; border-radius: 8px; border-left: 3px solid; margin-top: 10px; } .junior .level-example { border-color: var(--grey); } .confirme .level-example { border-color: var(--teal); } .expert .level-example { border-color: var(--gold); } /* ========================================================================== COST TABLE — Article 5 ========================================================================== */ .cost-table-wrapper { margin: 32px 0; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(43,188,192,0.15); } .cost-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .cost-table thead { background: rgba(43,188,192,0.12) !important; } .cost-table thead th { padding: 14px 18px; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; white-space: nowrap; } .cost-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); } .cost-table tbody tr:last-child { border-bottom: none; } .cost-table tbody tr:hover { background: rgba(43,188,192,0.04) !important; } .cost-table td { padding: 13px 18px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; vertical-align: top; } .cost-table td:first-child { font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; } .cost-table .pct { font-weight: 700; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-size: 0.9rem; } .cost-table .levier { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-size: 0.8rem; } .cost-table tr.total-row { background: rgba(212,168,67,0.08) !important; } .cost-table tr.total-row td { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-weight: 700; border-top: 1px solid rgba(212,168,67,0.3); } /* ========================================================================== COST BAR VISUAL — Article 5 ========================================================================== */ .cost-bar-visual { margin: 32px 0; } .cost-bar-visual-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 16px; font-weight: 600; } .bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .bar-label { font-size: 0.8rem; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; min-width: 180px; font-weight: 500; } .bar-track { flex: 1; height: 28px; background: rgba(255,255,255,0.06) !important; border-radius: 6px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 0.75rem; font-weight: 700; color: var(--navy) !important; -webkit-text-fill-color: var(--navy) !important; } .bar-fill.mat { background: var(--teal) !important; } .bar-fill.mod { background: var(--green) !important; } .bar-fill.mac { background: var(--gold) !important; } .bar-fill.fg { background: #7c8db5 !important; } .bar-fill.qual { background: #a78bfa !important; } .bar-fill.log { background: #fb923c !important; } .bar-fill.marg { background: var(--lime) !important; } /* ========================================================================== NEGOTIATION CARDS — Article 5 ========================================================================== */ .nego-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; } .nego-card { background: var(--navy-card) !important; border-radius: 12px; padding: 24px 22px; border: 1px solid rgba(255,255,255,0.06); } .nego-card.collaborative { border-top: 3px solid var(--green); } .nego-card.competitive { border-top: 3px solid var(--gold); } .nego-card .nego-type { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .collaborative .nego-type { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; } .competitive .nego-type { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; } .nego-card h4 { font-size: 1rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 12px; } .nego-card p { font-size: 0.88rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; margin-bottom: 0 !important; line-height: 1.6; } .speech { background: rgba(255,255,255,0.04) !important; border-left: 3px solid; padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 0.82rem; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; font-style: italic; margin-top: 14px; } .collaborative .speech { border-color: var(--green); } .competitive .speech { border-color: var(--gold); } /* ========================================================================== SOURCES GRID — Article 5 ========================================================================== */ .sources-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0; } .source-card { background: var(--navy-card) !important; border-radius: 10px; padding: 18px; border: 1px solid rgba(255,255,255,0.06); } .source-card .src-icon { font-size: 1.5rem; margin-bottom: 10px; display: block; } .source-card h4 { font-size: 0.88rem; font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; margin-bottom: 8px; } .source-card ul { padding-left: 0; list-style: none; } .source-card ul li { font-size: 0.8rem; color: var(--grey) !important; -webkit-text-fill-color: var(--grey) !important; padding: 4px 0 4px 16px; position: relative; border-bottom: none !important; } .source-card ul li::before { content: "\00B7"; position: absolute; left: 4px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; } /* ========================================================================== CANVAS — Article 6 (Category Strategy Canvas) ========================================================================== */ .canvas-container { margin: 48px 0; border: 2px solid rgba(43,188,192,0.25); border-radius: 16px; overflow: hidden; background: var(--navy-card) !important; } .canvas-title { background: rgba(43,188,192,0.12) !important; padding: 20px 24px; border-bottom: 1px solid rgba(43,188,192,0.15); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; } .canvas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .canvas-cell { padding: 24px; border: 1px solid rgba(43,188,192,0.12); min-height: 200px; display: flex; flex-direction: column; } .canvas-cell-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-weight: 700; margin-bottom: 12px; display: block; } .canvas-cell-content { font-size: 0.88rem; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; line-height: 1.6; flex: 1; } .canvas-cell-content strong { color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; font-weight: 700; } .canvas-cell-content em { color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-style: normal; } /* ── Canvas table ── */ .canvas-table-wrapper { margin: 32px 0; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(43,188,192,0.15); } .canvas-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .canvas-table thead { background: rgba(43,188,192,0.12) !important; } .canvas-table thead th { padding: 12px 16px; text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal) !important; -webkit-text-fill-color: var(--teal) !important; font-weight: 700; white-space: nowrap; } .canvas-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); } .canvas-table tbody tr:last-child { border-bottom: none; } .canvas-table tbody tr:hover { background: rgba(43,188,192,0.04) !important; } .canvas-table td { padding: 11px 16px; color: var(--off-white) !important; -webkit-text-fill-color: var(--off-white) !important; vertical-align: top; } .canvas-table td:first-child { font-weight: 700; color: var(--white) !important; -webkit-text-fill-color: var(--white) !important; } .canvas-table .priority { color: var(--lime) !important; -webkit-text-fill-color: var(--lime) !important; font-weight: 700; font-size: 0.8rem; } .canvas-table .status { color: var(--green) !important; -webkit-text-fill-color: var(--green) !important; font-weight: 600; font-size: 0.8rem; } /* ========================================================================== RESPONSIVE — Composants article ========================================================================== */ @media (max-width: 768px) { .article-wrapper { padding: 24px 16px 60px; } .article-title { font-size: 1.7rem !important; } .article-body h2, .article-wrapper h2 { font-size: 1.4rem !important; } .article-body h3, .article-wrapper h3 { font-size: 1rem !important; } .tools-grid, .dimensions-grid, .force-cards, .segment-cards, .level-cards, .canvas-grid, .matrix-container, .matrix-grid, .sources-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr 1fr; } .timeline { grid-template-columns: 1fr; } .nego-grid { grid-template-columns: 1fr; } .matrix-wrapper { margin-left: 0; } .matrix-label-left { display: none; } .flow-container { flex-direction: column; } .flow-arrow { transform: rotate(90deg); align-self: center; } .article-meta { gap: 14px; } .cta-box { padding: 28px 20px; } .series-nav { padding: 20px; } .score-label { min-width: 100px; } .bar-label { min-width: 120px; } } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1024px) { .post-layout { grid-template-columns: 1fr; } .post-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .post-title { font-size: 2rem; } .post-sidebar { grid-template-columns: 1fr; } .post-nav-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } /* Post hero centering */ .post-hero { padding: 120px 0 30px; text-align: center; } .post-hero-inner { padding: 0 4px; } /* H2 underline bar — center on mobile */ .post-content h2::after { left: 50%; transform: translateX(-50%); } /* Post content — tighten headings */ .post-content h2 { font-size: 1.5rem; margin: 36px 0 16px; } .post-content h3 { font-size: 1.15rem; } /* Post layout container */ .post-layout { gap: 30px; } /* Blog articles header */ .blog-articles-header h2 { font-size: 1.4rem; } /* Blog hero desc */ .blog-hero-desc { font-size: .95rem; } /* Collections heading */ .blog-collections-header h2 { font-size: 1.8rem; } /* CTA heading */ .blog-cta-inner h2 { font-size: 1.7rem; } .blog-cta-buttons { flex-direction: column; align-items: center; } /* Tags */ .post-tags { justify-content: center; } /* Nav items */ .post-nav-item { text-align: center !important; } .post-nav-label { justify-content: center; } }