/* Supplemental CSS for the PHP MVC conversion. Holds page-specific WPBakery/Elementor padding rules that the mirror carried inline per page and that are NOT present in the exported theme CSS. */ /* ========================================================================== Blog + content additions (Snap Marketing). Built on the existing Seosight design system: Nunito body font, accent colours (--primary-accent-color / --secondary-accent-color), card radius and shadow conventions already used by .crumina-* modules. ========================================================================== */ .blog-wrap { padding: 60px 0 40px; } /* Blog index cards */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; margin-bottom: 20px; } .blog-card { background: #fff; border-radius: 8px; box-shadow: 0 6px 30px rgba(10, 31, 68, 0.08); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(10, 31, 68, 0.14); } .blog-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #f1f5f8; } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .blog-card:hover .blog-card__media img { transform: scale(1.05); } .blog-card__body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1 1 auto; } .blog-card__cat { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-accent-color, #1b8edf); margin-bottom: 10px; } .blog-card__title { font-size: 20px; line-height: 1.35; margin: 0 0 12px; } .blog-card__title a { color: #0a1f44; } .blog-card__title a:hover { color: var(--primary-accent-color, #1b8edf); } .blog-card__excerpt { color: #5a6b7b; font-size: 15px; line-height: 1.7; margin-bottom: 18px; flex: 1 1 auto; } .blog-meta { font-size: 13px; color: #8a97a6; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .blog-meta span { display: inline-flex; align-items: center; } .blog-card__more { margin-top: 18px; font-weight: 700; color: var(--primary-accent-color, #1b8edf); display: inline-flex; align-items: center; gap: 6px; } /* Single post */ .post-single { max-width: 820px; margin: 0 auto; padding: 50px 0 30px; } .post-single .post-featured { border-radius: 10px; overflow: hidden; margin-bottom: 36px; box-shadow: 0 10px 40px rgba(10,31,68,.1); } .post-single .post-featured img { width: 100%; height: auto; display: block; } .post-single .post-meta { color: #8a97a6; font-size: 14px; margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 8px 18px; } .post-single .post-meta .post-cat { color: var(--primary-accent-color, #1b8edf); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .post-single .entry-body { font-size: 17px; line-height: 1.8; color: #3d4a57; } .post-single .entry-body h2 { font-size: 27px; margin: 42px 0 16px; color: #0a1f44; } .post-single .entry-body h3 { font-size: 21px; margin: 32px 0 12px; color: #0a1f44; } .post-single .entry-body p { margin: 0 0 20px; } .post-single .entry-body ul { margin: 0 0 24px; padding-left: 0; list-style: none; } .post-single .entry-body ul li { position: relative; padding-left: 30px; margin-bottom: 12px; } .post-single .entry-body ul li:before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-accent-color, #f37421); } .post-single .entry-body a { color: var(--primary-accent-color, #1b8edf); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .post-single .entry-body a:hover { color: var(--secondary-accent-color, #f37421); } .post-single .blog-lead { font-size: 19px; line-height: 1.75; color: #243548; } /* FAQ block */ .faq-block { max-width: 820px; margin: 48px auto 0; } .faq-block h2 { font-size: 27px; margin-bottom: 22px; color: #0a1f44; } .faq-item { border: 1px solid #e6ecf2; border-radius: 8px; padding: 22px 26px; margin-bottom: 16px; background: #fff; } .faq-item h3 { font-size: 18px; margin: 0 0 10px; color: #0a1f44; } .faq-item p { margin: 0; color: #5a6b7b; line-height: 1.7; } /* Author / CTA / related */ .post-cta { max-width: 820px; margin: 48px auto 0; background: linear-gradient(135deg, #1b8edf 0%, #0a6fb8 100%); color: #fff; border-radius: 12px; padding: 44px 46px; text-align: center; } .post-cta h3 { color: #fff; font-size: 25px; margin: 0 0 10px; } .post-cta p { color: rgba(255,255,255,.9); margin: 0 0 24px; font-size: 16px; } .related-posts { max-width: 1070px; margin: 60px auto 0; } .related-posts h2 { font-size: 25px; margin-bottom: 26px; color: #0a1f44; } /* About page helpers */ .about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin: 10px 0; } .about-stat { text-align: center; padding: 20px; } .about-stat .num { font-size: 44px; font-weight: 800; color: var(--primary-accent-color, #1b8edf); line-height: 1; } .about-stat .label { color: #5a6b7b; margin-top: 8px; font-size: 15px; } @media (max-width: 767px) { .post-single .entry-body { font-size: 16px; } .post-cta { padding: 34px 24px; } } /* ========================================================================== Icon fallback fix. The original "seosight" icon webfont was not captured by the site mirror (its @font-face has no src), so every seoicon-* glyph (menu/submenu arrows, button arrows, check bullets, quote and search icons) rendered blank. Font Awesome 4 IS present and loaded, so we remap the handful of seoicon-* classes the site actually uses onto Font Awesome glyphs. This keeps the original design intact with no external dependency. ========================================================================== */ [class^="seoicon-"], [class*=" seoicon-"] { font-family: "FontAwesome" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .seoicon-right-arrow:before { content: "\f105"; } /* chevron/arrow right */ .seoicon-check:before { content: "\f00c"; } /* check mark */ .seoicon-quotes:before { content: "\f10d"; } /* quote-left */ .seoicon-loupe:before { content: "\f002"; } /* magnifier / search */ /* -------------------------------------------------------------------------- Menu submenu (dropdown) right-arrow indicator. Ensure every submenu link shows a clear right arrow even if the theme markup omits the , and give the top-level "has children" items a down caret so users can see which menu entries open a submenu. -------------------------------------------------------------------------- */ .navigation-dropdown .menu-item > a .seoicon-right-arrow, .sub-menu .menu-item > a .seoicon-right-arrow { font-size: 11px; margin-left: 8px; opacity: .65; vertical-align: middle; } /* The submenu links already include an explicit , now rendered via the Font Awesome remap above, so no :after fallback is needed here (which would risk a double arrow). Push the arrow to the right. */ .navigation-dropdown .menu-item > a, .sub-menu li > a { display: flex; align-items: center; justify-content: space-between; } .navigation-dropdown .menu-item > a .seoicon-right-arrow, .sub-menu li > a .seoicon-right-arrow { margin-left: auto; } /* Top-level parent items get a down caret indicator. */ .navigation .menu-item-has-children > a:after { font-family: "FontAwesome"; content: "\f107"; font-size: 12px; margin-left: 6px; opacity: .7; } /* ========================================================================== "seotheme" icon-font fallback (same root cause as seoicon: the webfont's @font-face has an empty src and the font files were not captured). These classes drive the Services submenu icons and a few content icons, so we remap the ones actually used onto matching Font Awesome 4 glyphs. ========================================================================== */ [class^="seotheme-"]:before, [class*=" seotheme-"]:before { font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .seotheme-pin-2:before { content: "\f041"; } /* map-marker (Local SEO) */ .seotheme-letter:before { content: "\f0e0"; } /* envelope (Email) */ .seotheme-search-1-1:before { content: "\f002"; } /* search (SEO) */ .seotheme-button:before { content: "\f0a6"; } /* hand-pointer-ish (PPC click) */ .seotheme-pie-graph-split-1:before{ content: "\f200"; } /* pie-chart (Services) */ .seotheme-pie-graph:before { content: "\f200"; } /* pie-chart */ .seotheme-typewriter:before { content: "\f02f"; } /* print (Office supply) */ .seotheme-strategy:before { content: "\f0e8"; } /* sitemap (strategy) */ .seotheme-refresh-button:before { content: "\f021"; } /* refresh */ .seotheme-newspaper:before { content: "\f1ea"; } /* newspaper (blog/news) */ /* Give the submenu icon a little breathing room before the label. */ .navigation-dropdown .menu-item > a [class^="seotheme-"], .navigation-dropdown .menu-item > a [class*=" seotheme-"], .sub-menu li > a [class^="seotheme-"], .sub-menu li > a [class*=" seotheme-"] { margin-right: 10px; font-size: 15px; opacity: .85; } /* ========================================================================== Button fixes. 1) Remove the decorative ".semicircle" arc. The theme draws a small white quarter-circle in the top-left of every button; because the mirror/JS state is partial it renders as a stray "spinner" arc, so we hide it and reclaim the extra left padding it reserved. 2) The theme ships pairs of "seosight_button" widgets (e.g. More info / Get started!, Learn more / Get a quote) that rely on runtime jQuery to go inline. Without that they stack. Force the widgets inline so each pair sits in one row, wrapping only on small screens. ========================================================================== */ /* 1) Hide the decorative semicircle arc on all buttons. */ .btn .semicircle, .crum-button .semicircle { display: none !important; } /* Reclaim the left space the semicircle reserved so text is centred. */ .btn.icon-left, .btn.icon-right { padding-left: 36px; padding-right: 36px; } /* 2) Make the button widgets flow inline (high specificity to beat the theme's inline