/* ========================================================= Blog module — theme styles ----------------------------------------------------------- Light theme site-wide (white background, near-black text, gold/black brand accents), except the two photo-backed hero sections (blog listing hero + single post hero) and the bottom CTA band, which intentionally stay dark for contrast against their background imagery/gradient — matching the original design reference. Adjust the CSS variables below to match your brand exactly. ========================================================= */ :root { /* Page chrome — light theme */ --tc-bg: #fff; --tc-surface: #fff; /* card background */ --tc-surface-alt: #f7f7f8; /* subtle alt panel (tabs, pill buttons) */ --tc-border: #e6e6e8; --tc-text: #16181c; /* headings / strong text */ --tc-text-body: #3a3d42; /* body copy */ --tc-text-muted: #71757c; /* Brand */ --tc-accent: #eeaf0a; --tc-accent-dark: #c9930a; --tc-black: #000; --tc-purple: #7c5cff; /* Dark sections only (hero banners + CTA band) */ --tc-hero-bg-color: #0b0b0c; --tc-hero-text: #fff; --tc-hero-text-muted: #b7b8bc; --tc-hero-border: #2c2c2e; --tc-hero-card: #17171a; --tc-radius: 14px; --tc-max: 1480px; --tc-font: 'Titillium Web', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: var(--tc-font); } .tc-blog-listing, .tc-single-post { background: var(--tc-bg); color: var(--tc-text-body); font-family: var(--tc-font); } .tc-blog-listing h1, .tc-blog-listing h2, .tc-blog-listing h3, .tc-blog-listing h4, .tc-single-post h1, .tc-single-post h2, .tc-single-post h3, .tc-single-post h4 { color: var(--tc-text); font-family: var(--tc-font); } .tc-blog-container, .tc-single-container { max-width: var(--tc-max); margin: 0 auto; padding: 0 20px; } /* ========================================================= Astra hardening ----------------------------------------------------------- Guarantees full-width + white background + no-sidebar on the blog module regardless of which internal layout mechanism Astra ends up using for a given view (per-post meta on single posts vs. global Customizer options on the blog index / homepage). functions.php adds the `tc-blog-module` body class on every view this module controls. These rules intentionally use !important because Astra prints its own dynamic CSS inline in , which otherwise outranks a normally-cascaded stylesheet rule regardless of source order. ========================================================= */ body.tc-blog-module { background: var(--tc-bg) !important; } body.tc-blog-module #content, body.tc-blog-module .site-content, body.tc-blog-module #primary, body.tc-blog-module .content-area, body.tc-blog-module .ast-container, body.tc-blog-module .ast-separate-container, body.tc-blog-module .site-main { background: var(--tc-bg) !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } body.tc-blog-module .ast-container { padding-left: 0 !important; padding-right: 0 !important; } /* Astra's default sidebar markup, if it still renders at all, is hidden outright */ body.tc-blog-module .secondary, body.tc-blog-module #secondary, body.tc-blog-module .widget-area { display: none !important; } /* Belt-and-braces: card backgrounds re-asserted in case Astra's own archive/entry CSS wins by specificity on some Astra versions. */ body.tc-blog-module .tc-blog-card, body.tc-blog-module .tc-related-card, body.tc-blog-module .tc-sidebar-card { background: var(--tc-surface) !important; } .text-accent { color: var(--tc-accent); } .tc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; font-size: 15px; } .tc-btn--accent { background: var(--tc-accent); color: #fff; } .tc-btn--accent:hover { background: var(--tc-accent-dark); } .tc-btn--outline { background: transparent; border: 1px solid var(--tc-border); color: var(--tc-text); } .tc-btn--whatsapp { background: #25D366; color: #06301a; } .tc-btn--sm { padding: 8px 16px; font-size: 13px; width: 100%; justify-content: center; margin-top: 10px; } /* ---------- Hero (listing) — intentionally dark, photo-backed ---------- */ .tc-blog-hero { position: relative; padding: 90px 20px 60px; background: var(--tc-hero-bg-color) var(--tc-hero-bg, none) center/cover; text-align: left; color: var(--tc-hero-text); } .tc-blog-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.92) 40%, rgba(0,0,0,.55)); } .tc-blog-hero__inner { position: relative; max-width: var(--tc-max); margin: 0 auto; } .tc-blog-hero .tc-eyebrow { color: var(--tc-accent); } .tc-blog-hero__title { font-size: clamp(32px, 5vw, 52px); line-height: 1.1; margin: 12px 0; color: #fff; } .tc-blog-hero__subtitle { color: var(--tc-hero-text-muted); max-width: 520px; margin-bottom: 26px; } .tc-blog-search { display: flex; max-width: 460px; background: #fff; border-radius: 999px; overflow: hidden; } .tc-blog-search input { flex: 1; border: none; padding: 14px 20px; font-size: 14px; outline: none; color: var(--tc-text); } .tc-blog-search button { background: var(--tc-accent); border: none; padding: 0 18px; color: #fff; cursor: pointer; } .tc-eyebrow { font-weight: 700; letter-spacing: .08em; font-size: 13px; } /* ---------- Category tabs ---------- */ .tc-category-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 28px 0; } .tc-tab { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--tc-border); background: var(--tc-surface-alt); color: var(--tc-text-body); cursor: pointer; font-size: 14px; } .tc-tab.is-active, .tc-tab:hover { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; } /* ---------- Trending row ---------- */ .tc-trending-row { display: flex; align-items: center; gap: 18px; background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); padding: 14px 22px; margin-bottom: 30px; flex-wrap: wrap; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .tc-trending-row__label { font-weight: 700; font-size: 13px; color: var(--tc-accent-dark); line-height: 1.3; white-space: nowrap; } .tc-trending-row__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; overflow-x: auto; } .tc-trending-row__list li { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .tc-trending-row__num { color: var(--tc-purple); font-weight: 700; font-size: 13px; } .tc-trending-row__list a { color: var(--tc-text); text-decoration: none; font-size: 14px; } .tc-trending-row__list a:hover { color: var(--tc-accent-dark); } /* ---------- Listing layout ---------- */ .tc-blog-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 32px; align-items: start; } .tc-blog-main__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .tc-view-all { color: var(--tc-accent-dark); text-decoration: none; font-size: 14px; font-weight: 600; } .tc-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; transition: opacity .2s; } .tc-blog-grid.is-loading { opacity: .4; pointer-events: none; } /* ---------- Blog card ---------- */ .tc-blog-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .tc-blog-card__thumb { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; } .tc-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .tc-blog-card__tag { position: absolute; top: 12px; left: 12px; background: var(--tc-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; } .tc-blog-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tc-blog-card__meta { font-size: 12px; color: var(--tc-text-muted); display: flex; gap: 6px; } .tc-blog-card__title a { color: var(--tc-text); text-decoration: none; font-size: 17px; line-height: 1.3; } .tc-blog-card__title a:hover { color: var(--tc-accent-dark); } .tc-blog-card__excerpt { color: var(--tc-text-muted); font-size: 13.5px; line-height: 1.5; flex: 1; } .tc-blog-card__readmore { color: var(--tc-accent-dark); text-decoration: none; font-size: 13px; font-weight: 600; margin-top: auto; } /* ---------- Pagination ---------- */ .tc-pagination { display: flex; gap: 6px; justify-content: center; margin: 34px 0; flex-wrap: wrap; } .tc-page-btn { background: var(--tc-surface-alt); border: 1px solid var(--tc-border); color: var(--tc-text-body); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; } .tc-page-num.is-active { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; } .tc-page-btn:disabled { opacity: .4; cursor: default; } /* ---------- Sidebar shared ---------- */ .tc-blog-sidebar, .tc-single-right { display: flex; flex-direction: column; gap: 20px; } .tc-sidebar-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .tc-sidebar-card h3, .tc-sidebar-card h4 { margin: 0 0 6px; } /* ---------- Consultation form ---------- */ .tc-consult-form p { color: var(--tc-text-muted); font-size: 13.5px; margin-bottom: 16px; } .tc-consult-form input, .tc-consult-form select, .tc-consult-form textarea { width: 100%; background: #fff; border: 1px solid var(--tc-border); border-radius: 8px; color: var(--tc-text); padding: 11px 14px; margin-bottom: 10px; font-size: 13.5px; font-family: inherit; } .tc-phone-row { display: flex; gap: 8px; } .tc-phone-prefix { background: var(--tc-surface-alt); border: 1px solid var(--tc-border); border-radius: 8px; padding: 11px 14px; font-size: 13.5px; } .tc-consult-form button[type="submit"] { width: 100%; justify-content: center; margin-top: 4px; } .tc-form-status { font-size: 13px; margin-top: 10px; } .tc-form-status.is-success { color: #1a9d5c; } .tc-form-status.is-error { color: #d43f3f; } /* ---------- Fluent Forms — re-skinned to match the light card ---------- These overrides only target forms rendered inside .tc-consult-form so the rest of the site's Fluent Forms (e.g. on other pages) keep their normal look. */ .tc-consult-form .fluentform { font-family: var(--tc-font); } .tc-consult-form .ff-el-group { margin-bottom: 10px; } .tc-consult-form .ff-el-input--label label, .tc-consult-form label { color: var(--tc-text-muted); font-size: 12.5px; margin-bottom: 4px; } .tc-consult-form input[type="text"], .tc-consult-form input[type="email"], .tc-consult-form input[type="tel"], .tc-consult-form input[type="number"], .tc-consult-form input[type="url"], .tc-consult-form select, .tc-consult-form textarea, .tc-consult-form .ff-el-form-control { background: #fff !important; border: 1px solid var(--tc-border) !important; border-radius: 8px !important; color: var(--tc-text) !important; padding: 11px 14px !important; font-size: 13.5px !important; box-shadow: none !important; } .tc-consult-form input::placeholder, .tc-consult-form textarea::placeholder { color: var(--tc-text-muted); opacity: .8; } .tc-consult-form input:focus, .tc-consult-form select:focus, .tc-consult-form textarea:focus, .tc-consult-form .ff-el-form-control:focus { border-color: var(--tc-accent) !important; outline: none; } .tc-consult-form button, .tc-consult-form .ff-btn-submit, .tc-consult-form input[type="submit"] { width: 100%; justify-content: center; display: flex; align-items: center; gap: 8px; background: var(--tc-accent) !important; color: #fff !important; border: none !important; border-radius: 999px !important; padding: 12px 22px !important; font-weight: 700 !important; font-size: 15px !important; cursor: pointer; margin-top: 4px; } .tc-consult-form button:hover, .tc-consult-form .ff-btn-submit:hover, .tc-consult-form input[type="submit"]:hover { background: var(--tc-accent-dark) !important; } .tc-consult-form .ff-message-success, .tc-consult-form .ff_success_message { color: #1a9d5c; background: transparent; padding-top: 10px; } .tc-consult-form .error, .tc-consult-form .text-danger { color: #d43f3f !important; font-size: 12px; } /* ---------- Offer banner ---------- */ .tc-offer-banner { background: linear-gradient(135deg, #fff6e0, #fff); border-color: var(--tc-accent); } .tc-offer-tag { color: var(--tc-accent-dark); font-size: 12px; font-weight: 700; } .tc-offer-banner h4 { font-size: 16px; margin-top: 10px; color: var(--tc-text); } .tc-offer-banner p { color: var(--tc-text-muted); font-size: 13px; margin-bottom: 14px; } /* ---------- Recent posts ---------- */ .tc-recent-posts ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .tc-recent-posts li { display: flex; gap: 12px; align-items: center; } .tc-recent-posts__thumb { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: block; } .tc-recent-posts__thumb img { width: 100%; height: 100%; object-fit: cover; } .tc-recent-posts__title { display: block; color: var(--tc-text); text-decoration: none; font-size: 13.5px; line-height: 1.3; } .tc-recent-posts__title:hover { color: var(--tc-accent-dark); } .tc-recent-posts__date { font-size: 11.5px; color: var(--tc-text-muted); } /* ---------- CTA band — soft brand-tinted panel (not the dark hero) ---------- */ .tc-cta-band { text-align: center; background: linear-gradient(135deg, #fff6e0, #fffdf7); border: 1px solid var(--tc-border); border-radius: 20px; padding: 60px 20px; margin: 50px 0; } .tc-cta-band__icon { width: 64px; height: 64px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; background: var(--tc-accent); border-radius: 50%; color: #fff; } .tc-cta-band h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; color: var(--tc-text); } .tc-cta-band p { color: var(--tc-text-muted); max-width: 480px; margin: 0 auto 26px; } .tc-cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---------- Single post hero — intentionally dark, photo-backed ---------- */ .tc-single-hero { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--tc-hero-bg-color); overflow: hidden; color: var(--tc-hero-text); } .tc-single-hero::after { content: ""; position: absolute; inset: 0; background: var(--tc-featured-img, none) right center/50% 100% no-repeat; opacity: .85; } .tc-single-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, var(--tc-hero-bg-color) 48%, rgba(0,0,0,.45) 100%); z-index: 1; } .tc-single-hero__inner { position: relative; z-index: 2; max-width: var(--tc-max); margin: 0 auto; padding: 90px 20px 50px; width: 100%; } .tc-single-hero__title { text-shadow: 0 2px 18px rgba(0,0,0,.6); font-size: clamp(28px, 4vw, 44px); line-height: 1.15; max-width: 720px; margin-bottom: 16px; color: #fff; } .tc-breadcrumb { font-size: 13px; color: var(--tc-hero-text-muted); margin-bottom: 14px; } .tc-breadcrumb a { color: var(--tc-hero-text-muted); text-decoration: none; } .tc-breadcrumb a:hover { color: var(--tc-accent); } .tc-post-cat-badge { display: inline-block; background: var(--tc-accent); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; } .tc-single-hero__meta { color: var(--tc-hero-text-muted); font-size: 13.5px; display: flex; gap: 8px; margin-bottom: 24px; } .tc-single-hero__meta a { color: var(--tc-hero-text-muted); } .tc-single-hero__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .tc-single-hero__share { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tc-hero-text-muted); } .tc-single-left__share { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tc-text-muted); } /* ---------- Social share icons ---------- Used both inside the dark hero (light chips) and in the light left column / mobile footer (dark chips) — each context sets its own background/color instead of relying on the shared page tokens. */ .tc-social-share { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; } .tc-social-share a, .tc-social-share button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--tc-border); display: flex; align-items: center; justify-content: center; cursor: pointer; } .tc-social-share a:hover, .tc-social-share button:hover { background: var(--tc-accent); border-color: var(--tc-accent); color: #fff; } .tc-copy-link.is-copied { background: #1a9d5c; border-color: #1a9d5c; color: #fff; } .tc-single-hero__share .tc-social-share a, .tc-single-hero__share .tc-social-share button { background: var(--tc-hero-card); border-color: var(--tc-hero-border); color: var(--tc-hero-text); } .tc-single-left__share .tc-social-share a, .tc-single-left__share .tc-social-share button { background: var(--tc-surface-alt); border-color: var(--tc-border); color: var(--tc-text); } /* ---------- Single layout ---------- */ .tc-single-layout { display: grid; grid-template-columns: 220px minmax(0,1fr) 320px; gap: 32px; padding: 46px 0; align-items: start; } .tc-single-left { position: sticky; top: 30px; display: flex; flex-direction: column; gap: 26px; } .tc-share--mobile { display: none; } /* Table of contents */ .tc-toc { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .tc-toc h4 { margin: 0 0 12px; font-size: 14px; color: var(--tc-text); } .tc-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tc-toc a { display: flex; gap: 8px; color: var(--tc-text-muted); text-decoration: none; font-size: 13px; line-height: 1.4; } .tc-toc__item--h3 { padding-left: 14px; } .tc-toc__num { color: var(--tc-purple); font-weight: 700; flex-shrink: 0; } .tc-toc a.is-active, .tc-toc a:hover { color: var(--tc-accent-dark); } /* Article body */ .tc-single-content { color: var(--tc-text-body); line-height: 1.8; font-size: 16px; } .tc-single-content h2 { font-size: 26px; margin: 40px 0 14px; scroll-margin-top: 100px; color: var(--tc-text); } .tc-single-content h3 { font-size: 20px; margin: 30px 0 12px; scroll-margin-top: 100px; color: var(--tc-text); } .tc-single-content p { color: var(--tc-text-body); margin-bottom: 16px; } .tc-single-content blockquote { border-left: 3px solid var(--tc-accent); background: var(--tc-surface-alt); padding: 18px 22px; border-radius: 0 10px 10px 0; font-style: italic; margin: 24px 0; } .tc-single-content img { max-width: 100%; border-radius: 12px; } .tc-single-content__foot { border-top: 1px solid var(--tc-border); margin-top: 40px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .tc-was-helpful { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tc-text-muted); } .tc-thumb { background: var(--tc-surface-alt); border: 1px solid var(--tc-border); border-radius: 8px; padding: 6px 12px; cursor: pointer; color: var(--tc-text); font-size: 13px; } /* Author box */ .tc-author-box__row { display: flex; gap: 12px; align-items: center; margin: 14px 0; } .tc-author-box__avatar { border-radius: 50%; } .tc-author-box__name { color: var(--tc-text); font-weight: 700; text-decoration: none; display: block; } .tc-author-box__position { color: var(--tc-text-muted); font-size: 12.5px; margin: 2px 0 0; } .tc-author-box__bio { color: var(--tc-text-muted); font-size: 13px; margin-bottom: 10px; } .tc-author-box__company { font-size: 13px; margin-bottom: 10px; } .tc-author-box__company a { color: var(--tc-accent-dark); text-decoration: none; } .tc-author-box__socials { display: flex; gap: 12px; margin-top: 10px; } .tc-author-box__socials a { font-size: 12px; color: var(--tc-text-muted); text-decoration: none; } /* Services list */ .tc-services-list ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tc-services-list a { color: var(--tc-text); text-decoration: none; font-size: 14px; display: flex; justify-content: space-between; } .tc-services-list a:hover { color: var(--tc-accent-dark); } /* Related articles */ .tc-related-articles { padding-bottom: 60px; } .tc-related-articles h2 { margin-bottom: 22px; color: var(--tc-text); } .tc-related-articles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tc-related-card { background: var(--tc-surface); border: 1px solid var(--tc-border); border-radius: var(--tc-radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .tc-related-card__thumb { position: relative; display: block; aspect-ratio: 4/3; } .tc-related-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .tc-related-card h3 { font-size: 14.5px; padding: 14px 14px 4px; margin: 0; } .tc-related-card h3 a { color: var(--tc-text); text-decoration: none; } .tc-related-card__date { display: block; padding: 0 14px 14px; font-size: 12px; color: var(--tc-text-muted); } /* ---------- Responsive ---------- */ @media (min-width: 1600px) { :root { --tc-max: 1600px; } } @media (max-width: 1080px) { .tc-blog-layout { grid-template-columns: 1fr; } .tc-blog-grid { grid-template-columns: repeat(2, 1fr); } .tc-single-layout { grid-template-columns: 1fr; } .tc-single-left { position: static; flex-direction: row; flex-wrap: wrap; } .tc-single-left__share:first-of-type { display: none; } .tc-share--mobile { display: flex; } .tc-related-articles__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .tc-blog-grid { grid-template-columns: 1fr; } .tc-related-articles__grid { grid-template-columns: 1fr; } .tc-single-hero::after { background-size: cover; opacity: .25; } }