/* Trybus Solutions — article layout. * * Loaded on the eleven blog posts and /resources/ only, and every rule is * scoped to body.tb-article or to markup this project introduced, so nothing * here can reach the service, industry or contact pages. * * The three layouts the posts were migrated in are matched by selector rather * than normalised by rewriting anyone's markup: * * .elementor-widget-theme-post-content 3 posts * .elementor-widget-text-editor 5 posts * bare Gutenberg blocks on 2 posts * * Layout properties carry !important because Elementor emits per-page rules * like `.elementor-2618 .elementor-element.elementor-element-a1b2c3d {...}` * that outrank any reasonable selector written from outside. This is an * override sheet; that is the job. * * Palette comes from the site's own Elementor globals, not invented: * ink #242424 · deep #274550 · gold #D9A774 · cream #FAF2EC * Contrast for every foreground/background pair used here is noted inline. */ body.tb-article { --tb-ink: #242424; --tb-deep: #274550; --tb-gold: #D9A774; --tb-cream: #FAF2EC; --tb-on-gold: #241705; /* 8.9:1 on #D9A774 */ --tb-measure: 44rem; } /* ============================================================= site header */ /* The site navigation is white text on a transparent bar. Everywhere else that works because the page's hero is pulled up underneath it. On the blog posts it was landing on white, so the entire menu was invisible — which is what "the header is not clean" was describing. Rather than reproduce the pull-up (which is a hard-coded offset in the theme and would break the moment the hero height changes), the bar gets a solid ground on article pages. It reads as one unit with the scrimmed hero directly beneath it. */ body.tb-article .ekit-template-content-header { background: #16232B; position: relative; z-index: 5; } /* =========================================================== article header */ .tb-article-head { position: relative; isolation: isolate; background: #274550; color: #fff; padding: clamp(3.5rem, 9vw, 6.5rem) 1.25rem clamp(2.25rem, 5vw, 3.25rem); overflow: hidden; } .tb-article-head__media { position: absolute; inset: 0; z-index: -2; } .tb-article-head__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; margin: 0; border-radius: 0; } /* The scrim is what makes the headline legible over an arbitrary photograph. At the bottom, where the text sits, it is dark enough that white clears 4.5:1 no matter what the underlying image happens to be. */ .tb-article-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 30, 36, 0.60) 0%, rgba(16, 30, 36, 0.80) 45%, rgba(16, 30, 36, 0.93) 100%); } .tb-article-head__inner { max-width: 58rem; margin: 0 auto; } .tb-breadcrumb { font-family: "Rubik", "Montserrat", system-ui, sans-serif; font-size: 0.8125rem; letter-spacing: 0.04em; margin: 0 0 1.15rem; color: #E8E2DA; /* 10.9:1 on the scrim */ } .tb-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; } .tb-breadcrumb li { margin: 0; } .tb-breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; color: #D9A774; } .tb-breadcrumb a { color: #E8E2DA; text-decoration: underline; text-underline-offset: 2px; } .tb-breadcrumb a:hover, .tb-breadcrumb a:focus-visible { color: #fff; } .tb-article-head h1 { font-family: "Eurostile", "Rubik", "Montserrat", system-ui, sans-serif; font-size: clamp(1.85rem, 4.2vw, 3rem); line-height: 1.12; margin: 0 0 1rem; color: #fff; text-wrap: balance; } .tb-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; font-family: "Rubik", "Montserrat", system-ui, sans-serif; font-size: 0.9375rem; color: #E8E2DA; margin: 0; } .tb-article-meta__sep { color: #D9A774; } .tb-article-meta__tag { display: inline-block; padding: 0.2rem 0.7rem; border: 1px solid #D9A774; border-radius: 999px; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: #E8B984; /* 6.4:1 on the scrim; the border stays #D9A774 */ } /* ============================================================ article body */ /* one column, one measure, whichever widget the text happens to live in */ body.tb-article .elementor-widget-theme-post-content, body.tb-article .elementor-widget-text-editor, body.tb-article > p.wp-block-paragraph, body.tb-article > h2.wp-block-heading, body.tb-article > h2.tb-h2, body.tb-article > h3.tb-h2, body.tb-article > h3.wp-block-heading, body.tb-article > h4.wp-block-heading, body.tb-article > ul.wp-block-list, body.tb-article > ol.wp-block-list, body.tb-article > figure, body.tb-article > .wp-block-columns, body.tb-article > .wp-block-buttons, body.tb-article > .tb-cta--inline, body.tb-article .elementor-widget-theme-post-content > *, body.tb-article .elementor-widget-text-editor > * { max-width: var(--tb-measure) !important; margin-left: auto !important; margin-right: auto !important; } body.tb-article .elementor-widget-theme-post-content, body.tb-article .elementor-widget-text-editor, body.tb-article > p.wp-block-paragraph, body.tb-article > h2.wp-block-heading, body.tb-article > h2.tb-h2, body.tb-article > h3.tb-h2, body.tb-article > h3.wp-block-heading, body.tb-article > h4.wp-block-heading, body.tb-article > ul.wp-block-list, body.tb-article > ol.wp-block-list, body.tb-article > figure, body.tb-article > .wp-block-columns { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /* Deliberately NOT overriding .e-con-inner or .elementor-widget-wrap here. The site header is built from those same classes, so a global override collapsed the main navigation on every blog page. The widget-level max-width above centres inside whatever container Elementor provides, which is all this needs. */ /* prose */ body.tb-article .elementor-widget-theme-post-content :is(p, li), body.tb-article .elementor-widget-text-editor :is(p, li), body.tb-article > p.wp-block-paragraph, body.tb-article > [class*="wp-block"] :is(p, li), body.tb-article > .wp-block-list li { font-family: "Rubik", "Montserrat", system-ui, sans-serif !important; font-size: 1.0625rem !important; line-height: 1.75 !important; color: #303030 !important; /* 12.0:1 on white */ } body.tb-article .elementor-widget-theme-post-content p, body.tb-article .elementor-widget-text-editor p, body.tb-article > p.wp-block-paragraph { margin: 0 auto 1.35rem !important; } body.tb-article .elementor-widget-theme-post-content li, body.tb-article .elementor-widget-text-editor li, body.tb-article > .wp-block-list li { margin-bottom: 0.55rem; } body.tb-article .elementor-widget-theme-post-content :is(ul, ol), body.tb-article .elementor-widget-text-editor :is(ul, ol), body.tb-article > ul.wp-block-list, body.tb-article > ol.wp-block-list { padding-left: 2.5rem !important; margin-bottom: 1.35rem !important; } body.tb-article :is(.elementor-widget-theme-post-content, .elementor-widget-text-editor) ul > li::marker { color: #C08B4E; } body.tb-article :is(.elementor-widget-theme-post-content, .elementor-widget-text-editor) ol > li::marker { color: #274550; font-weight: 600; } /* headings */ body.tb-article .elementor-widget-theme-post-content :is(h2, h3, h4), body.tb-article .elementor-widget-text-editor :is(h2, h3, h4), body.tb-article > :is(h2, h3, h4).wp-block-heading, body.tb-article > [class*="wp-block"] :is(h2, h3, h4) { max-width: var(--tb-measure) !important; margin-left: auto !important; margin-right: auto !important; color: #274550 !important; text-wrap: balance; } body.tb-article .elementor-widget-theme-post-content h2, body.tb-article .elementor-widget-text-editor h2, body.tb-article > h2.wp-block-heading, body.tb-article > h2.tb-h2, body.tb-article > h3.tb-h2, body.tb-article > [class*="wp-block"] h2 { font-family: "Eurostile", "Rubik", system-ui, sans-serif !important; font-size: clamp(1.35rem, 2.6vw, 1.7rem) !important; line-height: 1.25 !important; margin-top: 2.4rem !important; margin-bottom: 0.8rem !important; padding-top: 0.5rem !important; border-top: 3px solid #D9A774; } body.tb-article .elementor-widget-theme-post-content :is(h3, h4), body.tb-article .elementor-widget-text-editor :is(h3, h4), body.tb-article > :is(h3, h4).wp-block-heading, body.tb-article > [class*="wp-block"] :is(h3, h4) { font-family: "Rubik", "Montserrat", system-ui, sans-serif !important; font-weight: 600 !important; font-size: 1.1875rem !important; line-height: 1.4 !important; margin-top: 1.9rem !important; margin-bottom: 0.55rem !important; } /* first paragraph reads as a standfirst */ body.tb-article .elementor-widget-theme-post-content > p:first-of-type, body.tb-article > p.wp-block-paragraph:first-of-type { font-size: 1.1875rem !important; line-height: 1.68 !important; color: #242424 !important; } /* links in prose */ /* .trybus-share is excluded: its links sit on a gold chip, where the prose link colour lands at 3.4:1. It carries its own accessible colour already. */ body.tb-article .elementor-widget-theme-post-content a:not(.tb-btn):not(.wp-block-button__link):not(.trybus-share a), body.tb-article .elementor-widget-text-editor a:not(.tb-btn):not(.wp-block-button__link):not(.trybus-share a), body.tb-article > p.wp-block-paragraph a, body.tb-article > [class*="wp-block"] :is(p, li) a:not(.wp-block-button__link) { color: #1F5C70 !important; /* 5.9:1 on white */ text-decoration: underline; text-underline-offset: 2px; } body.tb-article .elementor-widget-theme-post-content a:not(.tb-btn):not(.wp-block-button__link):not(.trybus-share a):hover, body.tb-article .elementor-widget-text-editor a:not(.tb-btn):not(.wp-block-button__link):not(.trybus-share a):hover, body.tb-article > p.wp-block-paragraph a:hover { color: #16404E !important; } body.tb-article :is(.elementor-widget-theme-post-content, .elementor-widget-text-editor) img, body.tb-article > figure img { border-radius: 4px; height: auto; } /* ======================================================================= CTA */ .tb-cta { font-family: "Rubik", "Montserrat", system-ui, sans-serif; } .tb-cta--inline { max-width: var(--tb-measure) !important; margin: 2.5rem auto !important; padding: 1.5rem 1.6rem !important; background: #FAF2EC; border-left: 4px solid #D9A774; border-radius: 4px; box-sizing: border-box; } .tb-cta--inline .tb-cta__kicker { font-size: 0.8125rem !important; letter-spacing: 0.09em; text-transform: uppercase; color: #74532C !important; /* 5.6:1 on #FAF2EC */ margin: 0 0 0.4rem !important; font-weight: 600; line-height: 1.4 !important; } .tb-cta--inline .tb-cta__text { margin: 0 0 1.1rem !important; color: #242424 !important; font-size: 1.0625rem !important; line-height: 1.6 !important; max-width: none !important; } .tb-cta--end { background: #274550; color: #fff; padding: clamp(2.5rem, 6vw, 3.75rem) 1.25rem; margin: 3rem 0 0; } .tb-cta--end__inner { max-width: 52rem; margin: 0 auto; text-align: center; } .tb-cta--end h2 { font-family: "Eurostile", "Rubik", system-ui, sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.2; margin: 0 0 0.9rem; color: #fff; text-wrap: balance; border: 0; padding: 0; } .tb-cta--end p { margin: 0 auto 1.7rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.65; color: #EDE6DE; /* 9.6:1 on #274550 */ } .tb-cta__row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; } .tb-btn { display: inline-block; padding: 0.85rem 1.75rem; border-radius: 3px; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none !important; border: 2px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .tb-btn--primary { background: #D9A774; color: #241705 !important; border-color: #D9A774; } /* 8.9:1 */ .tb-btn--primary:hover, .tb-btn--primary:focus-visible { background: #C08B4E; border-color: #C08B4E; } .tb-btn--ghost { background: transparent; color: #fff !important; border-color: #9FB4BC; } .tb-btn--ghost:hover, .tb-btn--ghost:focus-visible { background: #fff; color: #274550 !important; border-color: #fff; } .tb-cta--inline .tb-btn--primary { text-transform: none; letter-spacing: 0.01em; } .tb-cta__fine { margin: 1.4rem 0 0; font-size: 0.9375rem; color: #DCD4CB; } .tb-cta__fine a { color: #E8B984; text-decoration: underline; text-underline-offset: 2px; } .tb-cta__fine a:hover, .tb-cta__fine a:focus-visible { color: #fff; } .tb-btn:focus-visible, .tb-breadcrumb a:focus-visible, .tb-keep-reading a:focus-visible { outline: 3px solid #D9A774; outline-offset: 3px; } /* ============================================================ keep reading */ .tb-keep-reading { max-width: 62rem; margin: 3.5rem auto 0; padding: 0 1.25rem; font-family: "Rubik", "Montserrat", system-ui, sans-serif; } .tb-keep-reading h2 { font-family: "Eurostile", "Rubik", system-ui, sans-serif; font-size: 1.35rem; color: #274550; margin: 0 0 1.1rem; padding-top: 0.5rem; border-top: 3px solid #D9A774; display: inline-block; } .tb-keep-reading ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .tb-keep-reading li { margin: 0; } .tb-keep-reading a { display: block; height: 100%; padding: 1.15rem 1.25rem; background: #FAF2EC; border-left: 3px solid #D9A774; border-radius: 4px; text-decoration: none; transition: background-color .15s ease; } .tb-keep-reading a:hover { background: #F2E6D9; } .tb-kr__tag { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #74532C; /* 5.6:1 on #FAF2EC */ margin-bottom: 0.35rem; } .tb-kr__title { display: block; font-size: 1rem; line-height: 1.4; font-weight: 600; color: #274550; /* 9.6:1 on #FAF2EC */ } /* ================================================== related-posts clean-up */ /* Two pieces of the Elementor grid are noise: an author slot that renders the literal string "No Comments" because comments are switched off, and a Load More button wired to //2/, a paginated route a static export does not have. Both are stripped from the markup; these rules are the backstop for any cached copy that still carries them. */ .elementor-post-avatar, .e-load-more-spinner, .e-load-more-anchor + .elementor-button-wrapper { display: none !important; } .elementor-post__excerpt p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ==================================================================== small */ @media (max-width: 640px) { .tb-article-head { padding-top: 2.75rem; } .tb-cta__row { flex-direction: column; } .tb-btn { width: 100%; text-align: center; box-sizing: border-box; } body.tb-article .elementor-widget-theme-post-content h2, body.tb-article .elementor-widget-text-editor h2 { display: block; } } @media (prefers-reduced-motion: reduce) { .tb-btn, .tb-keep-reading a { transition: none; } } /* A paragraph that shipped inside a heading tag. It is demoted in the markup; this gives it the standfirst treatment it was always meant to have. */ body.tb-article .tb-lede { font-size: 1.25rem !important; line-height: 1.5 !important; font-weight: 500 !important; color: #274550 !important; margin: 0 auto 1.5rem !important; max-width: var(--tb-measure) !important; } /* Gutenberg column pairs stack rather than squeeze at the article measure. */ body.tb-article > .wp-block-columns, body.tb-article > .wp-block-columns .wp-block-columns { gap: 1.75rem; align-items: center; } @media (max-width: 820px) { body.tb-article .wp-block-columns { flex-direction: column !important; } body.tb-article .wp-block-column { flex-basis: 100% !important; } } /* Gutenberg buttons pick up the article button styling instead of floating loose at the far left of the viewport. */ body.tb-article > .wp-block-buttons { display: flex !important; justify-content: flex-start; padding-left: 1.25rem !important; padding-right: 1.25rem !important; margin-bottom: 2rem !important; } body.tb-article .wp-block-button__link, body.tb-article a.wp-block-button__link.wp-element-button, body.tb-article .wp-block-button__link * { background: #D9A774 !important; color: #241705 !important; border-radius: 3px !important; padding: 0.8rem 1.6rem !important; font-weight: 600 !important; letter-spacing: 0.04em; text-decoration: none !important; } /* the theme paints this link from a :where() rule that any real selector beats, but the anchor also inherits from .wp-element-button, so both are pinned */ body.tb-article a.wp-block-button__link, body.tb-article a.wp-block-button__link:visited, body.tb-article a.wp-block-button__link * { color: #241705 !important; } /* 8.9:1 on #D9A774 */ body.tb-article .wp-block-button__link:hover, body.tb-article .wp-block-button__link:focus-visible { background: #C08B4E !important; } /* the pre-existing share chip keeps its own palette */ body.tb-article .trybus-share a { color: inherit !important; } /* A few posts were written with inline gold text — on white is 2.15:1, well under the 4.5:1 floor. The article palette takes over; these spans inherit the heading or body colour around them. */ body.tb-article :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content) [style*="#d9a774" i], body.tb-article > [class*="wp-block"] [style*="#d9a774" i], body.tb-article > p [style*="#d9a774" i] { color: inherit !important; } /* ---- plain header ------------------------------------------------------- The photographs came off the posts: fourteen articles were sharing a handful of stock images, and one of them was an unlicensed comp. Without a picture to sit over, the scrim has nothing to do, so the header becomes the brand slate with the type doing the work. */ .tb-article-head--plain::before { display: none; } .tb-article-head--plain { background: linear-gradient(180deg, #274550 0%, #1d353e 100%); border-bottom: 3px solid #C68D76; padding-top: clamp(2.75rem, 6vw, 4.25rem); padding-bottom: clamp(2rem, 4vw, 2.75rem); } /* the category reads as an eyebrow above the headline rather than trailing after the read time */ .tb-article-head--plain .tb-article-meta { margin-top: 1.1rem; } .tb-article-head--plain .tb-article-meta__tag { background: rgba(214, 167, 116, 0.18); border: 1px solid rgba(217, 167, 116, 0.55); color: #F0D9C2; } /* ---- resources grid without thumbnails ---------------------------------- */ .elementor-posts--skin-classic .elementor-post { border: 1px solid #61667038; background: #fff; transition: border-color .3s, transform .3s; } .elementor-posts--skin-classic .elementor-post:hover { border-color: #C68D76; transform: translateY(-2px); } .elementor-posts--skin-classic .elementor-post__text { padding: 1.6rem 1.5rem 1.75rem; } .elementor-posts--skin-classic .elementor-post__title { margin: 0 0 .5rem; } .elementor-posts--skin-classic .elementor-post__title a { font-family: "Eurostile", "Rubik", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.3; color: #242424; } .elementor-posts--skin-classic .elementor-post__meta-data { font-size: .8125rem; color: #6B6B6B; margin-bottom: .6rem; } .elementor-posts--skin-classic .elementor-post__excerpt p { font-size: .9375rem; line-height: 1.6; color: #616670; margin: 0; }