/* ============================================ Complete Dental Care — Blog template styles Brand tokens pulled from Figma (CDC file) ============================================ */ :root { --blue: #21b5ec; --black: #0a0a0a; --near-black: #111111; --white: #ffffff; --muted: #8f8f8f; --ink: #2b2b2b; --line: #e6e6e6; --off-white: #f7f8f9; --max: 1280px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', sans-serif; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; margin: 0; color: var(--near-black); } /* Link color, scoped to #cdc-blog (the wrapper each template renders inside). A bare `a { }` rule ties in specificity with Hello Biz / Elementor's own global link color, and whichever loads later in the wins that tie — which was landing on their red/reddish default. Scoping to #cdc-blog gives our rule strictly higher specificity so it always wins regardless of load order. Default is near-black; hover and focus are brand blue. */ #cdc-blog a { text-decoration: none; color: var(--near-black) !important; } #cdc-blog a:visited { color: var(--near-black) !important; } #cdc-blog a:hover, #cdc-blog a:focus { color: var(--blue) !important; } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 80px; } @media (max-width: 900px) { .wrap { padding: 0 24px; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--blue); color: #000; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 400; padding: 18px 26px; border: none; cursor: pointer; white-space: nowrap; transition: background .18s ease; } .btn:hover { background: #1a9fd1; } .btn-white { background: var(--white); color: #000; } .btn-white:hover { background: #eaeaea; } .btn-outline { background: transparent; border: 1.5px solid var(--near-black); color: var(--near-black); } .btn-outline:hover { background: var(--near-black); color: var(--white); } /* ---------- Header / Nav ---------- */ .site-header { position: relative; background: var(--near-black); overflow: hidden; } .site-header .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; } .site-header .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 100%); } .nav-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 24px; padding-bottom: 24px; } .nav-row .logo img { height: 56px; width: auto; } .main-nav { display: flex; align-items: center; gap: 30px; flex: 1; } .main-nav a { color: var(--white); font-size: 16px; letter-spacing: .3px; text-transform: lowercase; display: flex; align-items: center; gap: 6px; } .main-nav .caret { font-size: 10px; opacity: .7; } .nav-contact { display: flex; align-items: center; gap: 28px; } .nav-contact .phone { color: var(--white); font-size: 16px; white-space: nowrap; } @media (max-width: 1100px) { .main-nav, .nav-contact .phone { display: none; } } .header-inner { position: relative; padding-top: 70px; padding-bottom: 64px; } .breadcrumb { color: rgba(255,255,255,.65); font-size: 14px; margin-bottom: 18px; } .breadcrumb a { color: rgba(255,255,255,.85); } .breadcrumb a:hover { color: var(--blue); } .eyebrow-tag { display: inline-block; background: var(--blue); color: #000; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; padding: 6px 14px; text-transform: lowercase; margin-bottom: 18px; } .header-inner h1 { color: var(--white); font-weight: 300; font-size: 44px; line-height: 1.2; max-width: 780px; text-transform: lowercase; } .header-inner h1 strong { font-weight: 700; } .header-inner .sub { color: rgba(255,255,255,.75); font-size: 18px; max-width: 620px; margin-top: 18px; line-height: 1.6; } .post-meta-row { display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,.65); font-size: 14px; margin-top: 26px; flex-wrap: wrap; } .post-meta-row .dot { opacity: .5; } /* ---------- CTA band (matches homepage "schedule your first visit") ---------- */ .cta-band { background: var(--black); padding: 64px 0; } .cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .cta-band h3 { color: var(--white); font-weight: 300; font-size: 28px; } .cta-band h3 strong { font-weight: 700; } .cta-band .cta-actions { display: flex; gap: 16px; flex-wrap: wrap; } /* ---------- Footer ---------- */ .site-footer { background: var(--black); padding: 80px 0 40px; } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 56px; } .footer-top .logo img { height: 60px; width: auto; margin-bottom: 32px; } .footer-cols { display: flex; gap: 77px; flex-wrap: wrap; } .footer-col h5 { color: var(--white); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px; } .footer-col ul li { margin-bottom: 16px; } .footer-col a, .footer-col p { color: var(--muted); font-size: 15px; line-height: 1.6; } .footer-col a:hover { color: var(--blue); } .footer-rule { border: none; border-top: 1px solid #262626; margin: 0; } .footer-bottom { padding-top: 26px; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; } .footer-bottom a { color: rgba(255,255,255,.75); } .footer-bottom a:hover { color: var(--blue); } /* ---------- Blog grid (archive) ---------- */ .blog-main { padding: 72px 0 88px; } .blog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; padding-bottom: 28px; border-bottom: 1px solid var(--line); } .blog-toolbar .count { color: var(--muted); font-size: 15px; } .filter-pills { display: flex; gap: 10px; flex-wrap: wrap; } .filter-pills a { font-size: 14px; padding: 8px 16px; border: 1px solid var(--line); color: var(--ink); } .filter-pills a.active { background: var(--near-black); border-color: var(--near-black); color: var(--white); } .filter-pills a:hover:not(.active) { border-color: var(--near-black); } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; } @media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .post-grid { grid-template-columns: 1fr; } } .post-card { display: flex; flex-direction: column; } .post-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--off-white); margin-bottom: 20px; position: relative; } .post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .post-card:hover .thumb img { transform: scale(1.045); } .post-card .cat { position: absolute; top: 14px; left: 14px; background: var(--blue); color: #000; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; padding: 5px 12px; text-transform: lowercase; } .post-card .meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; } .post-card h3 { font-size: 21px; font-weight: 700; line-height: 1.35; margin-bottom: 12px; } #cdc-blog .post-card h3 a { color: var(--near-black) !important; } #cdc-blog .post-card h3 a:hover { color: var(--blue) !important; } .post-card p.excerpt { color: #555; font-size: 15px; line-height: 1.65; margin-bottom: 16px; } .post-card .read-more { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; } #cdc-blog .post-card .read-more { color: var(--near-black) !important; } #cdc-blog .post-card .read-more:hover { color: var(--blue) !important; } .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 64px; } .pagination a, .pagination span { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); border: 1px solid var(--line); } .pagination a:hover { border-color: var(--near-black); } .pagination .current { background: var(--near-black); color: var(--white); border-color: var(--near-black); } /* ---------- Single post layout ---------- */ .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; padding-top: 64px; padding-bottom: 96px; } @media (max-width: 980px) { .post-layout { grid-template-columns: 1fr; } } .featured-image { margin-bottom: 40px; aspect-ratio: 16/9; overflow: hidden; } .featured-image img { width: 100%; height: 100%; object-fit: cover; } .entry-content { font-size: 17px; line-height: 1.85; color: #333; max-width: 700px; } .entry-content > * + * { margin-top: 22px; } .entry-content h2 { font-size: 26px; font-weight: 700; margin-top: 44px; line-height: 1.35; } .entry-content h3 { font-size: 20px; font-weight: 700; margin-top: 32px; } .entry-content ul { margin: 0; padding-left: 22px; list-style: disc; } .entry-content ul li { margin-bottom: 10px; } #cdc-blog .entry-content a { color: var(--blue) !important; text-decoration: underline; text-underline-offset: 3px; } .pull-quote { border-left: 4px solid var(--blue); padding: 6px 0 6px 26px; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 22px; line-height: 1.5; color: var(--near-black); } .tag-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px !important; } .tag-row a { font-size: 13px; padding: 7px 14px; background: var(--off-white); color: #444; } .tag-row a:hover { background: var(--near-black); color: var(--white); } .share-row { display: flex; align-items: center; gap: 16px; margin-top: 32px !important; padding-top: 32px; border-top: 1px solid var(--line); } .share-row span { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; } .share-row .icons { display: flex; gap: 10px; } .share-row .icons a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 14px; } .share-row .icons a:hover { background: var(--near-black); color: var(--white); border-color: var(--near-black); } /* Sidebar */ .sidebar { display: flex; flex-direction: column; gap: 40px; } .widget { } .widget h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding-bottom: 14px; border-bottom: 2px solid var(--near-black); margin-bottom: 22px; } .recent-post { display: flex; gap: 14px; margin-bottom: 20px; } .recent-post:last-child { margin-bottom: 0; } .recent-post .thumb { width: 74px; height: 74px; flex-shrink: 0; overflow: hidden; } .recent-post .thumb img { width: 100%; height: 100%; object-fit: cover; } .recent-post .info span { color: var(--muted); font-size: 12px; } .recent-post .info h5 { font-size: 14px; font-weight: 700; line-height: 1.4; margin-top: 4px; } #cdc-blog .recent-post .info h5 a { color: var(--near-black) !important; } #cdc-blog .recent-post .info h5 a:hover { color: var(--blue) !important; } .sidebar-cta { background: var(--near-black); padding: 32px 28px; text-align: left; } .sidebar-cta h4 { color: var(--white); font-weight: 300; font-size: 22px; border: none; padding: 0; margin-bottom: 6px; text-transform: none; letter-spacing: 0; } .sidebar-cta h4 strong { font-weight: 700; display: block; } .sidebar-cta p { color: rgba(255,255,255,.7); font-size: 14px; margin: 12px 0 22px; line-height: 1.6; } .sidebar-cta .btn { width: 100%; } .sidebar-cta .phone-link { display: block; text-align: center; color: var(--white); font-size: 14px; margin-top: 14px; } .sidebar-cta .phone-link:hover { color: var(--blue); } /* ---------- Related posts ---------- */ .related-posts { padding: 0 0 96px; } .related-posts h3 { font-size: 24px; font-weight: 700; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 40px; } /* ---------- Build note banner (remove when converting to PHP) ---------- */ .build-note { background: #fff7e6; border-bottom: 1px solid #f0d999; color: #6b5417; font-size: 13px; text-align: center; padding: 10px 16px; font-family: 'Inter', sans-serif; } .build-note strong { font-weight: 700; } /* ---------- WordPress core pagination markup (the_posts_pagination) ---------- */ .pagination-wrap { margin-top: 64px; } .pagination-wrap .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .pagination-wrap .page-numbers { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); border: 1px solid var(--line); padding: 0 8px; } .pagination-wrap .page-numbers:hover { border-color: var(--near-black); } .pagination-wrap .page-numbers.current { background: var(--near-black); color: var(--white); border-color: var(--near-black); } .pagination-wrap .page-numbers.dots { border: none; } /* ---------- Category pill list (wp_list_categories) ---------- */ .filter-pills .cat-item { display: inline-flex; } .filter-pills .cat-item.current-cat a, .filter-pills a.active { background: var(--near-black); border-color: var(--near-black); color: var(--white); } /* ---------- Re-assert contrast on chrome that must NOT be blue ---------- */ /* All scoped under #cdc-blog for the same guaranteed-specificity reason as the base link rule above. */ #cdc-blog .btn, #cdc-blog .btn:visited { color: #000 !important; } #cdc-blog .breadcrumb a, #cdc-blog .breadcrumb a:visited { color: rgba(255,255,255,.85) !important; } #cdc-blog .breadcrumb a:hover { color: var(--blue) !important; } #cdc-blog .pagination-wrap .page-numbers, #cdc-blog .pagination-wrap .page-numbers:visited { color: var(--ink) !important; } #cdc-blog .pagination-wrap .page-numbers.current { color: var(--white) !important; } #cdc-blog .filter-pills a, #cdc-blog .filter-pills a:visited { color: var(--ink) !important; } #cdc-blog .filter-pills a.active, #cdc-blog .filter-pills .cat-item.current-cat a { color: var(--white) !important; } #cdc-blog .share-row .icons a, #cdc-blog .share-row .icons a:visited { color: var(--near-black) !important; } #cdc-blog .share-row .icons a:hover { color: var(--white) !important; } #cdc-blog .sidebar-cta .phone-link, #cdc-blog .sidebar-cta .phone-link:visited { color: var(--white) !important; } #cdc-blog .sidebar-cta .phone-link:hover { color: var(--blue) !important; } #cdc-blog .tag-row a, #cdc-blog .tag-row a:visited { color: #444 !important; } #cdc-blog .tag-row a:hover { color: var(--white) !important; } /* ---------- In-content CTA (replaces AI-tool-generated banners) ---------- */ #cdc-blog .cdc-inline-cta { background: var(--near-black); padding: 40px 36px; margin: 40px 0 !important; text-align: left; } #cdc-blog .cdc-inline-cta__eyebrow { display: inline-block; background: var(--blue); color: #000 !important; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 5px 12px; margin-bottom: 18px; } #cdc-blog .cdc-inline-cta__title { color: var(--white) !important; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 24px; line-height: 1.3; margin: 0 0 12px; } #cdc-blog .cdc-inline-cta__title strong { font-weight: 700; } #cdc-blog .cdc-inline-cta__text { color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.6; margin: 0 0 24px; max-width: 520px; } #cdc-blog a.cdc-inline-cta__btn { display: inline-flex; background: var(--blue); color: #000 !important; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; padding: 16px 26px; } #cdc-blog a.cdc-inline-cta__btn:visited { color: #000 !important; } #cdc-blog a.cdc-inline-cta__btn:hover, #cdc-blog a.cdc-inline-cta__btn:focus { background: #1a9fd1; color: #000 !important; }