/* ========================================================= Credence Theme · Front-end styles Brand Palette (per Brand Book): Primary #E26D25 Brand Orange Secondary #C8C7DF Lavender Ink #000000 Black Base #FFFFFF White Typography (Brand Book): Display / Heading → Texas Troupe (fallback Bebas Neue → Oswald) Body / Secondary → Sheffield (fallback Inter) Drop licensed .woff2 files at /assets/fonts/ to enable Texas Troupe & Sheffield. ========================================================= */ /* ---------- Brand fonts (activated when files exist) ---------- */ /* * Texas Troupe & Sheffield are licensed brand fonts that are NOT bundled. * Their @font-face blocks are disabled to avoid 404 requests on every page * load; the font stacks fall back to Brothers / Public Sans / Inter, which is * the intended substitute. To enable the real fonts later, drop the licensed * files at /assets/fonts/{TexasTroupe,Sheffield}.{woff2,woff} and uncomment: * * @font-face { * font-family: 'Texas Troupe'; * src: url('../fonts/TexasTroupe.woff2') format('woff2'), * url('../fonts/TexasTroupe.woff') format('woff'); * font-weight: 400 700; font-style: normal; font-display: swap; * } * @font-face { * font-family: 'Sheffield'; * src: url('../fonts/Sheffield.woff2') format('woff2'), * url('../fonts/Sheffield.woff') format('woff'); * font-weight: 300 700; font-style: normal; font-display: swap; * } */ @font-face { font-family: 'Brothers'; src: url('../fonts/brothers-regular.otf') format('opentype'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { --cr-easing: cubic-bezier(0.22, 0.61, 0.36, 1); --cr-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --cr-radius: 22px; --cr-radius-sm: 14px; --cr-header-h: 84px; /* Brand palette helpers */ --cr-brand-orange: #E26D25; --cr-brand-orange-dark: #B0531A; --cr-brand-lavender: #C8C7DF; --cr-brand-lavender-dark: #8A88B3; --cr-text-graphite: #383838; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'Sheffield', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--cr-text-graphite); } h1, h2, h3, h4, h5, h6, .wp-block-heading, .has-heading-font-family { font-family: 'Brothers','Texas Troupe', 'Bebas Neue', 'Oswald', 'Brothers', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-weight: 400; color: var(--cr-text-graphite); } /* Kill the default 24px stack margin WordPress adds between sibling sections */ .wp-site-blocks > * + *, main > * + *, .wp-block-template-part > * + * { margin-block-start: 0 !important; } .wp-site-blocks .wp-block-template-part + .wp-block-template-part, .wp-site-blocks .wp-block-group + .wp-block-group, .wp-site-blocks .wp-block-cover + .wp-block-group, .wp-site-blocks .wp-block-group + .wp-block-cover, .wp-site-blocks > section + section { margin-top: 0 !important; } ::selection { background: var(--wp--preset--color--primary); color: #fff; } img { max-width: 100%; height: auto; } /* Visible "PLACEHOLDER" badge on any element marked .is-placeholder so it's obvious which images still need to be replaced with real photography. */ .is-placeholder { position: relative; } .is-placeholder::after { content: "PLACEHOLDER"; position: absolute; top: 10px; left: 10px; z-index: 2; font-family: 'Inter', system-ui, sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; background: rgba(27,27,27,0.85); color: #fff; padding: 0.3rem 0.55rem; border-radius: 4px; pointer-events: none; } /* Strong default focus */ *:focus-visible { outline: 3px solid var(--wp--preset--color--primary); outline-offset: 3px; border-radius: 6px; } /* ---------- Utility ---------- */ .credence-eyebrow { display: inline-block; font-family: var(--wp--preset--font-family--body); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark); position: relative; padding-left: 2.4rem; } .credence-eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.8rem; height: 2px; background: var(--wp--preset--color--primary); transform: translateY(-50%); } .credence-eyebrow--center { padding-left: 0; } .credence-eyebrow--center::before { display: none; } .credence-eyebrow--light { color: var(--wp--preset--color--primary-light); } .credence-eyebrow--light::before { background: var(--wp--preset--color--primary); } .credence-eyebrow--primary { color: var(--wp--preset--color--primary); padding-left: 0; } .credence-eyebrow--primary::before { display: none; } .credence-section__head { text-align: center; } .credence-section__head .credence-eyebrow { padding-left: 0; } .credence-section__head .credence-eyebrow::before { display: none; } .credence-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(6px); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .credence-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px rgba(226,109,37,0.25); animation: cr-pulse 2.4s var(--cr-easing) infinite; } @keyframes cr-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(226,109,37,0.25); } 50% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(226,109,37,0.05); } } .credence-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark); margin-top: 1.25rem; transition: gap .25s var(--cr-easing), color .2s ease; } .credence-link::after { content: "→"; transition: transform .3s var(--cr-easing); } /* ---------- Buttons (outline variant) ---------- */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; border: 1.5px solid currentColor; transition: background .25s var(--cr-easing), color .25s var(--cr-easing), border-color .25s ease, transform .3s var(--cr-easing), box-shadow .3s var(--cr-easing); } /* IMPORTANT: do NOT use `currentColor` for background here — it collapses with the simultaneous `color: base` change and renders invisible text. Use explicit brand colour so the label stays readable in every context. */ .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background: var(--wp--preset--color--primary) !important; color: #ffffff !important; border-color: var(--wp--preset--color--primary) !important; transform: translateY(-2px); box-shadow: var(--wp--preset--shadow--md); } .wp-block-button .wp-block-button__link { transition: background .25s var(--cr-easing), color .25s var(--cr-easing), transform .3s var(--cr-easing), box-shadow .3s var(--cr-easing); } .wp-block-button .wp-block-button__link:not(.is-style-outline):hover { transform: translateY(-2px); } /* ---------- Announcement bar ---------- */ .credence-announcement { font-size: 0.78rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .credence-announcement a { color: inherit; text-decoration: none; opacity: 0.9; transition: opacity .2s; } .credence-announcement a:hover { opacity: 1; color: var(--wp--preset--color--primary-light); } .credence-announcement__inner { gap: 1.2rem; align-items: center; } .credence-announcement__contact { gap: 1.5rem; } .credence-announcement__contact p { margin: 0; } .credence-announcement__tagline { margin: 0; color: var(--wp--preset--color--primary-light); } /* ---------- Header ---------- */ .credence-sticky-header { position: sticky; top: 0; z-index: 50; transition: box-shadow .3s var(--cr-easing), background .3s ease; } /* Smooth collapse of the announcement bar instead of display:none (avoids layout-jump feedback loop that caused flickering on scroll up). */ .credence-sticky-header .credence-announcement { overflow: hidden; max-height: 80px; transition: max-height .35s var(--cr-easing), opacity .25s ease, padding .35s var(--cr-easing); will-change: max-height; } .credence-sticky-header.is-scrolled .credence-announcement { max-height: 0 !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; pointer-events: none; } .credence-sticky-header.is-scrolled .credence-header { background: rgba(255,255,255,0.92) !important; backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 12px 30px rgba(27,27,27,0.08); padding-top: 0.55rem !important; padding-bottom: 0.55rem !important; } .credence-header { transition: padding .25s var(--cr-easing), background .25s ease; } .credence-header__inner { gap: 2rem; align-items: center; } .credence-header__brand { gap: 0.75rem; align-items: center; } .credence-header__brand .wp-block-site-logo img { display: block; } .credence-header__logo-link { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; background: transparent; } .credence-header__logo { display: block; height: 44px; width: auto; max-width: 100%; background: transparent; } @media (max-width: 781px) { .credence-header__logo { height: 38px; } } @media (max-width: 480px) { .credence-header__logo { height: 34px; } } @media (max-width: 360px) { .credence-header__logo { height: 30px; } } .credence-header__sitetitle a { color: var(--wp--preset--color--ink); text-decoration: none; } .credence-primary-nav { font-size: 0.78rem; } .credence-primary-nav .wp-block-navigation-item__content { position: relative; padding: 0.4rem 0; color: var(--wp--preset--color--ink) !important; transition: color .2s; } .credence-primary-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 0; height: 2px; background: var(--wp--preset--color--primary); transform: translateX(-50%); transition: width .3s var(--cr-easing); } .credence-primary-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content, .current-menu-item > .wp-block-navigation-item__content, .current_page_item > .wp-block-navigation-item__content { color: var(--wp--preset--color--primary-dark) !important; } .credence-primary-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after { width: 100%; } /* Submenu styling */ .credence-primary-nav .wp-block-navigation-submenu { position: relative; } .credence-primary-nav .wp-block-navigation__submenu-container { position: absolute !important; top: calc(100% + 14px) !important; /* gap so dropdown sits BELOW the link, not over it */ left: 0 !important; right: auto !important; border: 1px solid var(--wp--preset--color--border) !important; border-radius: 14px !important; padding: 0.6rem !important; box-shadow: 0 24px 50px rgba(27,27,27,0.12) !important; min-width: 260px; background: #fff !important; } /* Right-most submenus open to the LEFT to avoid overflowing the viewport. */ .credence-primary-nav > .wp-block-navigation__container > .wp-block-navigation-submenu:nth-last-child(-n+2) .wp-block-navigation__submenu-container { left: auto !important; right: 0 !important; } /* Invisible hover bridge so cursor can travel from parent item into submenu */ .credence-primary-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 18px; background: transparent; } .credence-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 10px; padding: 0.65rem 0.85rem !important; font-size: 0.78rem; } .credence-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--primary-soft); } .credence-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; } .credence-header__cta .wp-block-button__link { font-size: 0.72rem !important; padding: 0.75rem 1.4rem !important; } /* ---------- Hero ---------- */ .credence-hero { overflow: hidden; position: relative; } .credence-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 30%, rgba(226,109,37,0.18), transparent 40%), radial-gradient(circle at 85% 70%, rgba(226,109,37,0.10), transparent 45%); mix-blend-mode: screen; } .credence-hero__inner { position: relative; z-index: 2; } .credence-hero__title em { font-style: italic; font-weight: 300; color: var(--wp--preset--color--primary-light); } .credence-hero--home .wp-block-cover__image-background { transition: transform 12s linear; transform: scale(1.05); } .credence-hero--home.is-revealed .wp-block-cover__image-background { transform: scale(1.12); } /* ---------- Pillars ---------- */ .credence-pillars__grid { row-gap: 1.5rem; } .credence-pillar-card { background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: var(--cr-radius); padding: 2rem 1.6rem; text-align: center; height: 100%; position: relative; overflow: hidden; transition: transform .4s var(--cr-easing), border-color .3s, box-shadow .35s var(--cr-easing); } .credence-pillar-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(226,109,37,0.06) 100%); opacity: 0; transition: opacity .35s; } .credence-pillar-card:hover { transform: translateY(-6px); border-color: var(--wp--preset--color--primary-light); box-shadow: var(--wp--preset--shadow--md); } .credence-pillar-card:hover::before { opacity: 1; } .credence-pillar-card__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--wp--preset--color--primary-soft); margin-bottom: 1.1rem; transition: transform .4s var(--cr-easing-spring), background .25s; } .credence-pillar-card:hover .credence-pillar-card__icon { background: var(--wp--preset--color--primary); transform: rotate(-6deg) scale(1.08); } .credence-pillar-card:hover .credence-pillar-card__icon img { filter: brightness(0) invert(1); } .credence-pillar-card__icon img { transition: filter .25s; } .credence-pillar-card__title { margin: 0; color: var(--wp--preset--color--ink); line-height: 1.25; } .credence-pillar-card__title span { display: block; color: var(--wp--preset--color--muted); font-weight: 600; font-size: 0.85em; letter-spacing: 0.04em; } /* ---------- Services grid ---------- */ .credence-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 3rem; } /* First row spans 3, second row spans 2 — make first card wider on large */ @media (min-width: 1100px) { .credence-services__grid { grid-template-columns: repeat(6, 1fr); } .credence-services__grid > a:nth-child(1), .credence-services__grid > a:nth-child(2), .credence-services__grid > a:nth-child(3) { grid-column: span 2; } .credence-services__grid > a:nth-child(4), .credence-services__grid > a:nth-child(5) { grid-column: span 3; } } .credence-service-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--cr-radius); overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--wp--preset--color--border); transition: transform .4s var(--cr-easing), box-shadow .4s var(--cr-easing), border-color .3s; position: relative; } .credence-service-card:hover { transform: translateY(-8px); box-shadow: var(--wp--preset--shadow--lg); border-color: transparent; } .credence-service-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--wp--preset--color--sand); position: relative; } .credence-service-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(27,27,27,0.25) 100%); opacity: 0; transition: opacity .35s; } .credence-service-card:hover .credence-service-card__media::after { opacity: 1; } .credence-service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--cr-easing); } .credence-service-card:hover .credence-service-card__media img { transform: scale(1.08); } .credence-service-card__body { padding: 1.6rem 1.5rem 1.7rem; } .credence-service-card__body h3 { font-size: 1.35rem; margin: 0.5rem 0 0.6rem; color: var(--wp--preset--color--ink); line-height: 1.2; } .credence-service-card__body p { margin: 0; color: var(--wp--preset--color--muted); line-height: 1.55; font-size: 0.95rem; } .credence-service-card:hover .credence-link { gap: 0.7rem; color: var(--wp--preset--color--primary); } .credence-service-card:hover .credence-link::after { transform: translateX(4px); } /* Related-services grid: equal-height cards */ .credence-related .wp-block-post-template.is-layout-grid { align-items: stretch; } .credence-related .wp-block-post-template.is-layout-grid > li { display: flex; } .credence-related .credence-service-card--compact { display: flex; flex-direction: column; width: 100%; height: 100%; box-shadow: 0 1px 2px rgba(20,20,20,0.04); border: 1px solid var(--wp--preset--color--border); transition: transform .35s var(--cr-easing), box-shadow .35s var(--cr-easing), border-color .35s; overflow: hidden; } .credence-related .credence-service-card--compact:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(226,109,37,0.45); border-color: rgba(226,109,37,0.35); } .credence-related .credence-service-card--compact > .wp-block-group { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.6rem; } .credence-related .credence-service-card--compact .wp-block-post-excerpt { margin-top: auto; } .credence-related .credence-service-card--compact .wp-block-post-excerpt__more-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.8rem; color: var(--wp--preset--color--primary-dark); font-weight: 600; text-decoration: none; } .credence-related .credence-service-card--compact .wp-block-post-excerpt__more-link:hover { gap: 0.7rem; } .credence-service-card--compact .wp-block-post-featured-image img { transition: transform .8s var(--cr-easing); } .credence-service-card--compact:hover .wp-block-post-featured-image img { transform: scale(1.06); } /* ---------- Expectations / Steps ---------- */ .credence-steps { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .credence-step-card { background: #fff; border-radius: var(--cr-radius); padding: 1.8rem 1.6rem; position: relative; border: 1px solid var(--wp--preset--color--border); transition: transform .35s var(--cr-easing), box-shadow .35s var(--cr-easing); } .credence-step-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--md); } .credence-step-card__num { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 2.6rem; font-weight: 700; color: var(--wp--preset--color--primary); line-height: 1; margin-bottom: 0.7rem; letter-spacing: -0.03em; } .credence-step-card__title { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 700; color: var(--wp--preset--color--ink); text-transform: uppercase; letter-spacing: 0.06em; } .credence-step-card__text { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.92rem; line-height: 1.55; } /* ---------- Testimonials ---------- */ .credence-testimonials { position: relative; overflow: hidden; } .credence-testimonials::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 20%, rgba(226,109,37,0.10), transparent 40%), radial-gradient(circle at 90% 80%, rgba(226,109,37,0.06), transparent 45%); pointer-events: none; } .credence-quote-card { position: relative; height: 100%; border: 1px solid rgba(255,255,255,0.06); transition: transform .35s var(--cr-easing), border-color .3s; } .credence-quote-card:hover { transform: translateY(-4px); border-color: rgba(226,109,37,0.4); } .credence-quote-card::after { content: "”"; position: absolute; top: -16px; right: 24px; font-family: var(--wp--preset--font-family--heading); font-size: 6rem; line-height: 1; color: var(--wp--preset--color--primary); opacity: 0.35; } .credence-quote-card__stars { color: var(--wp--preset--color--accent); letter-spacing: 0.12em; font-size: 1.05rem; margin-bottom: 0.9rem; } .credence-quote-card .wp-block-post-excerpt { margin: 0; } /* ---------- Blog ---------- */ .credence-blog-card { height: 100%; overflow: hidden; border: 1px solid var(--wp--preset--color--border); transition: transform .35s var(--cr-easing), box-shadow .35s var(--cr-easing); } .credence-blog-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--md); } .credence-blog-card .wp-block-post-featured-image { overflow: hidden; } .credence-blog-card .wp-block-post-featured-image img { transition: transform .8s var(--cr-easing); } .credence-blog-card:hover .wp-block-post-featured-image img { transform: scale(1.06); } /* ---------- Certifications ---------- */ .credence-badges { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .credence-badge { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 14px; transition: transform .3s var(--cr-easing), border-color .3s; } .credence-badge:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--primary-light); } .credence-badge__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--wp--preset--color--primary-soft); flex-shrink: 0; } .credence-badge__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink); line-height: 1.35; } /* ---------- FAQ (collapsible) ---------- */ .credence-faq { display: flex; flex-direction: column; gap: 0.9rem; margin: 1.5rem 0; } .credence-faq__item { background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 16px; box-shadow: 0 1px 2px rgba(20,20,20,0.03); overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; } .credence-faq__item:hover { border-color: rgba(226,109,37,0.4); box-shadow: 0 8px 24px -16px rgba(226,109,37,0.35); } .credence-faq__item[open] { border-color: rgba(226,109,37,0.55); box-shadow: 0 14px 40px -20px rgba(226,109,37,0.4); } .credence-faq__q, .credence-faq__item > summary { display: flex; align-items: center; gap: 1rem; justify-content: space-between; cursor: pointer; list-style: none; padding: 1.15rem 1.4rem; font-family: var(--wp--preset--font-family--heading); font-size: 1.08rem; font-weight: 600; color: var(--wp--preset--color--ink); transition: color .2s, background .2s; line-height: 1.4; } .credence-faq__q::-webkit-details-marker, .credence-faq__q::marker, .credence-faq__item > summary::-webkit-details-marker, .credence-faq__item > summary::marker { display: none; content: ""; } .credence-faq__item[open] .credence-faq__q, .credence-faq__item[open] > summary { background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); } .credence-faq__q:hover, .credence-faq__item > summary:hover { color: var(--wp--preset--color--primary-dark); } @media (max-width: 540px) { .credence-faq__q, .credence-faq__item > summary { padding: 1rem 1.1rem; font-size: 1rem; } .credence-faq__a { padding: 0 1.1rem 1.2rem; } } .credence-faq__toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); display: grid; place-items: center; flex-shrink: 0; position: relative; transition: background .25s, transform .35s var(--cr-easing-spring); } .credence-faq__toggle::before, .credence-faq__toggle::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .35s var(--cr-easing-spring); } .credence-faq__toggle::before { width: 14px; height: 2px; } .credence-faq__toggle::after { width: 2px; height: 14px; } .credence-faq__item[open] .credence-faq__toggle { background: var(--wp--preset--color--primary); color: #fff; transform: rotate(180deg); } .credence-faq__item[open] .credence-faq__toggle::after { transform: scaleY(0); } .credence-faq__a { padding: 0 1.4rem 1.4rem; color: var(--wp--preset--color--muted); line-height: 1.7; max-width: 78ch; animation: cr-fade-in .35s var(--cr-easing); } .credence-faq__a p { margin: 0; } .credence-faq__a p + p { margin-top: 0.7rem; } /* ---------- Page hero (inner) ---------- */ .credence-page-hero { position: relative; overflow: hidden; } .credence-page-hero::before, .credence-page-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .credence-page-hero::before { width: 380px; height: 380px; top: -140px; right: -110px; background: radial-gradient(circle, rgba(226,109,37,0.22), transparent 70%); } .credence-page-hero::after { width: 260px; height: 260px; bottom: -120px; left: -80px; background: radial-gradient(circle, rgba(226,109,37,0.14), transparent 70%); } .credence-page-hero .wp-block-cover__inner-container { position: relative; z-index: 1; } .credence-page-hero__media { border-radius: 26px; overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #F4B98A 0%, #E26D25 100%); box-shadow: 0 30px 60px -30px rgba(176,83,26,0.45); } .credence-page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .credence-page-hero__badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; border-radius: 999px; background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); border: 1px solid rgba(226,109,37,0.25); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark); } .credence-page-hero__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--primary); box-shadow: 0 0 0 4px rgba(226,109,37,0.2); animation: cr-pulse 2.2s ease-in-out infinite; } @keyframes cr-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.6; } } .credence-page-hero__stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.4rem; margin-top: 2rem; } .credence-page-hero__stat strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; color: var(--wp--preset--color--primary-dark); line-height: 1; } .credence-page-hero__stat span { display: block; margin-top: 0.3rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); font-weight: 600; } @media (max-width: 781px) { .credence-page-hero__media { aspect-ratio: 16 / 11; margin-top: 1.5rem; } } @keyframes cr-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ---------- Contact / NAP ---------- */ .credence-nap { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .credence-nap li { display: grid; grid-template-columns: 90px 1fr; gap: 0.5rem; padding: 1rem 1.2rem; background: #fff; border-radius: 14px; border: 1px solid var(--wp--preset--color--border); } .credence-nap strong { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark); align-self: center; } .credence-nap a { color: var(--wp--preset--color--ink); text-decoration: none; } .credence-nap a:hover { color: var(--wp--preset--color--primary-dark); } .credence-map iframe { box-shadow: var(--wp--preset--shadow--md); } /* ---------- Sidecard (service single) ---------- */ /* NOTE: sidebar must scroll naturally with the page (per UX request) — do NOT use position:sticky. */ .credence-service-sidebar { position: static; align-self: flex-start; } /* ---------- Footer ---------- */ .credence-footer { position: relative; overflow: hidden; } .credence-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 0%, rgba(226,109,37,0.18), transparent 40%); pointer-events: none; } .credence-footer__cols { gap: 2rem; align-items: flex-start; } .credence-footer__title { margin: 0 0 1rem; } .credence-footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .credence-footer__list a { color: #d6d2cc; font-size: 0.88rem; text-decoration: none; transition: color .2s, padding-left .25s var(--cr-easing); position: relative; } .credence-footer__list a::before { content: "›"; position: absolute; left: -0.9rem; opacity: 0; color: var(--wp--preset--color--primary); transition: opacity .25s, left .25s var(--cr-easing); } .credence-footer__list a:hover { color: #fff; padding-left: 0.6rem; } .credence-footer__list a:hover::before { opacity: 1; left: -0.2rem; } .credence-footer__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; } .credence-footer__contact li { display: flex; gap: 0.7rem; align-items: flex-start; } .credence-footer__contact li span[aria-hidden] { display: inline-grid; place-items: center; width: 30px; height: 30px; background: rgba(226,109,37,0.15); border-radius: 8px; color: var(--wp--preset--color--primary); flex-shrink: 0; } .credence-footer__contact a { color: #d6d2cc; text-decoration: none; font-size: 0.9rem; line-height: 1.4; transition: color .2s; } .credence-footer__contact a:hover { color: #fff; } .credence-footer__hours { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; } .credence-footer__hours li { display: flex; justify-content: space-between; font-size: 0.85rem; color: #d6d2cc; padding: 0.35rem 0; border-bottom: 1px dashed rgba(255,255,255,0.08); } .credence-footer__hours li strong { color: #fff; font-weight: 600; } .credence-footer__social { gap: 0.6rem; } .credence-social { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; transition: background .25s, transform .3s var(--cr-easing-spring), color .25s; } .credence-social:hover { background: var(--wp--preset--color--primary); color: #fff; transform: translateY(-3px) rotate(-4deg); } .credence-footer__bottom { gap: 1rem; align-items: center; } .credence-footer__links { margin: 0; font-size: 0.8rem; color: #9b9690; } .credence-footer__links a { color: #9b9690; text-decoration: none; transition: color .2s; } .credence-footer__links a:hover { color: #fff; } /* ---------- Reveal animations ---------- */ .cr-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--cr-easing), transform .9s var(--cr-easing); will-change: opacity, transform; } .cr-reveal.is-visible { opacity: 1; transform: none; } .cr-reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--cr-easing), transform .7s var(--cr-easing); } .cr-reveal-stagger.is-visible > * { opacity: 1; transform: none; } .cr-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; } .cr-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; } .cr-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; } .cr-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; } .cr-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; } .cr-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; } .cr-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .48s; } /* ---------- Page hero ---------- */ .credence-page-hero { overflow: hidden; } .credence-page-hero .wp-block-cover__image-background { transition: transform 14s linear; transform: scale(1.06); } .credence-page-hero.is-revealed .wp-block-cover__image-background { transform: scale(1.14); } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .credence-header__inner { gap: 1rem; } } @media (max-width: 781px) { .credence-announcement__inner { justify-content: center; text-align: center; flex-wrap: wrap; } .credence-announcement__contact { gap: 1rem; flex-wrap: wrap; justify-content: center; } .credence-header__cta { display: none; } .credence-hero { min-height: 72vh !important; } .credence-hero__title { font-size: clamp(2.5rem, 10vw, 4rem) !important; } .credence-services__grid { grid-template-columns: 1fr; } .credence-steps { grid-template-columns: repeat(2, 1fr); } .credence-nap li { grid-template-columns: 1fr; gap: 0.2rem; } .credence-footer__cols { gap: 2.5rem; } } @media (max-width: 480px) { .credence-steps { grid-template-columns: 1fr; } .credence-pill { font-size: 0.62rem; padding: 0.35rem 0.7rem; } .credence-hero__title { font-size: clamp(2rem, 11vw, 3rem) !important; } .credence-hero__lede { font-size: 1rem !important; } .credence-announcement__contact { font-size: 0.7rem; gap: 0.6rem; } } @media (max-width: 360px) { .credence-header { padding-left: 0.85rem !important; padding-right: 0.85rem !important; } .credence-header__brand { gap: 0.45rem !important; } .credence-header__brand .wp-block-site-logo img { width: 110px !important; height: auto !important; } .credence-header__sitetitle { font-size: 0.95rem !important; } .credence-announcement { font-size: 0.68rem; } .credence-announcement__tagline { display: none; } } /* ---------- Mobile navigation (responsive container) ---------- */ @media (max-width: 781px) { /* Force WP to show the hamburger even though our nav has no overlayMenu setting */ .credence-primary-nav .wp-block-navigation__responsive-container-open { display: flex !important; width: 44px; height: 44px; place-items: center; justify-content: center; border-radius: 12px; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--ink); border: none; cursor: pointer; } .credence-primary-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; } .credence-primary-nav .wp-block-navigation__container:not(.is-responsive) { display: none !important; } } /* Open overlay panel */ .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink) !important; padding: 1.6rem 1.25rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3rem; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column !important; align-items: stretch !important; gap: 0.25rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff !important; font-size: 1rem !important; padding: 0.85rem 0.5rem !important; border-bottom: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.04em; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; top: auto !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 0 0 1rem !important; min-width: 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: rgba(255,255,255,0.82) !important; font-size: 0.88rem !important; padding: 0.55rem 0.5rem !important; border-bottom: 1px solid rgba(255,255,255,0.05); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before { display: none !important; } .wp-block-navigation__responsive-container-close { color: #fff !important; } @media (max-width: 360px) { .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem 0.85rem !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 0.95rem !important; padding: 0.7rem 0.4rem !important; } } /* ---------- Responsive buttons (mobile shrink) ---------- */ @media (max-width: 781px) { .wp-block-button .wp-block-button__link { font-size: 0.92rem; padding: 0.75rem 1.25rem; } .credence-header__cta .wp-block-button__link { font-size: 0.66rem !important; padding: 0.55rem 0.95rem !important; letter-spacing: 0.06em; } .wp-block-buttons { gap: 0.6rem !important; } } @media (max-width: 480px) { .wp-block-button .wp-block-button__link { font-size: 0.85rem; padding: 0.65rem 1.05rem; border-radius: 999px; } .credence-header__cta .wp-block-button__link { font-size: 0.6rem !important; padding: 0.5rem 0.8rem !important; } /* Stack buttons full-width inside button groups for cleaner mobile layout */ .wp-block-buttons:not(.is-content-justification-center):not(.is-horizontal) .wp-block-button { flex: 1 1 100%; } .wp-block-buttons:not(.is-content-justification-center):not(.is-horizontal) .wp-block-button .wp-block-button__link { width: 100%; text-align: center; } } @media (max-width: 360px) { .wp-block-button .wp-block-button__link { font-size: 0.78rem; padding: 0.6rem 0.9rem; } .credence-header__cta .wp-block-button__link { font-size: 0.56rem !important; padding: 0.45rem 0.7rem !important; } } /* ---------- Page hero lede ---------- */ .credence-page-hero__lede { max-width: 720px; margin-top: 1.25rem; color: var(--wp--preset--color--muted); } /* ---------- Team cards (Meet the Team) ---------- */ .credence-team-grid > .wp-block-paragraph, .credence-team-grid > p { max-width: 820px; } .credence-team-card { background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 24px; padding: 1.6rem !important; margin-bottom: 1.6rem; transition: transform .35s var(--cr-easing), box-shadow .35s var(--cr-easing), border-color .25s; } .credence-team-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -28px rgba(226,109,37,0.45); border-color: rgba(226,109,37,0.35); } .credence-team-card__img figure { margin: 0; } .credence-team-card__img img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; box-shadow: 0 18px 36px -20px rgba(27,27,27,0.35); } .credence-team-card__role { margin: 0 0 0.3rem; } .credence-team-card__name { color: var(--wp--preset--color--ink); } @media (max-width: 781px) { .credence-team-card .wp-block-columns { gap: 1.2rem; } .credence-team-card .wp-block-column[style*="320px"] { flex-basis: 100% !important; max-width: 280px; } } /* ---------- New-patient step blocks ---------- */ .credence-step { border: 1px solid var(--wp--preset--color--border); transition: border-color .25s, box-shadow .25s, transform .25s; } .credence-step:hover { border-color: rgba(226,109,37,0.4); box-shadow: 0 14px 32px -20px rgba(226,109,37,0.35); transform: translateY(-2px); } .credence-step__num { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--wp--preset--color--primary); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.8rem; font-weight: 700; line-height: 1; box-shadow: 0 12px 28px -14px rgba(226,109,37,0.6); } @media (max-width: 781px) { .credence-step .wp-block-column[style*="96px"] { flex-basis: 100% !important; } .credence-step__num { width: 52px; height: 52px; font-size: 1.4rem; } } .credence-step-note p { margin: 0; color: var(--wp--preset--color--ink); } /* ---------- Hours table (Contact) ---------- */ .credence-hours-table { margin: 1.25rem 0 0; } .credence-hours-table table { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 16px; overflow: hidden; } .credence-hours-table td { padding: 0.85rem 1.1rem; border-top: 1px solid var(--wp--preset--color--border); font-size: 0.95rem; } .credence-hours-table tr:first-child td { border-top: 0; } .credence-hours-table td:first-child { width: 36%; color: var(--wp--preset--color--primary-dark); } /* ---------- Review cards (Testimonials) ---------- */ .credence-review-card { border: 1px solid var(--wp--preset--color--border); height: 100%; transition: transform .35s var(--cr-easing), box-shadow .35s var(--cr-easing), border-color .25s; } .credence-review-card:hover { transform: translateY(-4px); border-color: rgba(226,109,37,0.45); box-shadow: 0 18px 40px -22px rgba(226,109,37,0.5); } .credence-review-card__stars { font-size: 1.15rem; color: #F5B945; letter-spacing: 0.18em; } /* Google review CTA */ .credence-google-cta { border: 1px solid rgba(226,109,37,0.18); box-shadow: 0 24px 60px -32px rgba(226,109,37,0.4); max-width: 880px; margin-left: auto; margin-right: auto; } .credence-google-cta .wp-block-image img { width: 56px; height: auto; } /* ---------- Generic feature card (laser benefits) ---------- */ .credence-feature-card { height: 100%; border: 1px solid var(--wp--preset--color--border); transition: transform .35s var(--cr-easing), box-shadow .35s var(--cr-easing), border-color .25s; } .credence-feature-card:hover { transform: translateY(-4px); border-color: rgba(226,109,37,0.4); box-shadow: 0 18px 40px -22px rgba(226,109,37,0.4); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } .cr-reveal, .cr-reveal-stagger > * { opacity: 1 !important; transform: none !important; } .credence-hero--home .wp-block-cover__image-background, .credence-page-hero .wp-block-cover__image-background { transform: none !important; } } /* ========================================================= Live-site alignment (credencechiro.com mirror) ========================================================= */ /* Kill any lingering announcement bar reference */ .credence-announcement { display: none !important; } /* ---------- Hero: bright, photo-dominant ---------- */ .credence-hero--home { min-height: 70vh; } .credence-hero--home .wp-block-cover__background { display: none !important; } .credence-hero--home .wp-block-cover__image-background { object-fit: cover; object-position: center 30%; filter: none !important; transform: none !important; } .credence-hero--home::after { display: none !important; } .credence-hero--home .credence-hero__inner { display: none; } .credence-hero-caption { text-align: center; } .credence-hero-caption__kicker { font-family: 'Sheffield', 'Inter', Georgia, serif; font-style: italic; text-transform: lowercase; margin-bottom: 0.4rem !important; } .credence-hero-caption__title { font-family: 'Brothers','Texas Troupe', 'Brothers','Texas Troupe', 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 1.05 !important; text-transform: uppercase !important; color: var(--wp--preset--color--ink) !important; margin: 0.4rem 0 1.25rem !important; } .credence-hero-caption__lede { max-width: 720px; margin: 0 auto !important; color: var(--wp--preset--color--muted); } /* ---------- Outline pill button (live brand) ---------- */ .credence-btn-outline .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link { border: 2px solid var(--wp--preset--color--primary) !important; color: var(--wp--preset--color--primary) !important; background: transparent !important; border-radius: 999px !important; padding: 0.95rem 2.4rem !important; font-family: 'Brothers','Texas Troupe', 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 0.95rem !important; transition: background .25s ease, color .25s ease, transform .3s ease, box-shadow .3s ease; } .credence-btn-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primary) !important; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(226,109,37,0.55); } /* Section headings: uppercase sans-serif like live site */ .wp-block-heading.has-display-font-family, .credence-section__title, section .wp-block-heading[class*="has-huge-font-size"], section .wp-block-heading[class*="has-xxxl-font-size"] { font-family: 'Brothers','Texas Troupe', 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; } /* ---------- Footer: orange accent under titles (live) ---------- */ .credence-footer__title { font-family: 'Brothers','Texas Troupe', 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; text-transform: uppercase; letter-spacing: 0.16em !important; font-weight: 700 !important; font-size: 1.1rem !important; color: #fff !important; padding-bottom: 0.65rem; border-bottom: 2px solid var(--wp--preset--color--primary); margin-bottom: 1.1rem !important; display: inline-block; } /* ---------- Header: tighten + center align nav ---------- */ .credence-header__inner { align-items: center; } .credence-header__logo { display: block; max-height: 56px; width: auto; } .credence-header .credence-primary-nav .wp-block-navigation-item__content { font-family: 'Brothers','Texas Troupe', 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem !important; font-weight: 600; } .credence-header__cta .wp-block-button__link { font-family: 'Brothers','Texas Troupe', 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; letter-spacing: 0.14em !important; font-size: 0.85rem !important; padding: 0.75rem 1.6rem !important; border-radius: 999px !important; border: 2px solid var(--wp--preset--color--primary) !important; background: transparent !important; color: var(--wp--preset--color--primary) !important; text-transform: uppercase !important; } .credence-header__cta .wp-block-button__link:hover { background: var(--wp--preset--color--primary) !important; color: #fff !important; } @media (max-width: 781px) { .credence-hero--home { min-height: 50vh; } .credence-hero-caption__title { font-size: 2.4rem !important; } } /* ========================================================= New brand-aligned components (services hub, hero banners, service tiles, review cards, mini-steps, CTA bands) ========================================================= */ .credence-page-banner { padding: 0 !important; } .credence-page-banner .wp-block-cover__inner-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .credence-page-banner__title { color: #fff !important; margin: 0; font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: 1.05; } .credence-intro h2 { color: var(--cr-text-graphite, #383838); } .credence-intro__tagline p { color: var(--wp--preset--color--primary, #E26D25); } .credence-intro__body p { color: var(--cr-text-graphite, #383838); font-size: 1.05rem; line-height: 1.7; } .credence-two-col { } .credence-two-col h2 { color: var(--cr-text-graphite, #383838); margin: 0 0 1rem; } .credence-two-col p { line-height: 1.7; } .credence-two-col .is-reverse { flex-direction: row-reverse; } @media (max-width: 781px) { .credence-two-col .is-reverse { flex-direction: column; } } .credence-rounded-img img { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: 0 24px 48px -28px rgba(0,0,0,.35); } .credence-services-list .wp-block-columns { gap: 2.5rem; } .credence-services-home .credence-service-tile, .credence-service-tile { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(0,0,0,.22); transition: transform .25s, box-shadow .25s; height: 100%; display: flex; flex-direction: column; } .credence-service-tile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(0,0,0,.32); } .credence-service-tile__img { margin: 0 !important; } .credence-service-tile__img img { width: 100%; height: 220px; object-fit: cover; display: block; } .credence-service-tile h3 { padding: 1rem 1.25rem 0; margin: 0; font-size: 1.25rem !important; } .credence-service-tile h3 a { color: var(--cr-text-graphite, #383838); text-decoration: none; } .credence-service-tile h3 a:hover { color: var(--wp--preset--color--primary, #E26D25); } .credence-service-tile p { padding: 0 1.25rem; margin: .75rem 0 1rem; color: #555; font-size: .95rem; line-height: 1.55; } .credence-service-tile .wp-block-buttons { padding: 0 1.25rem 1.25rem; margin: 0 auto 0 0; } .credence-btn-outline a, .wp-block-button.is-style-outline.credence-btn-outline > a { border: 2px solid var(--wp--preset--color--primary, #E26D25) !important; color: var(--wp--preset--color--primary, #E26D25) !important; background: transparent !important; border-radius: 999px !important; padding: .75rem 1.6rem !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .92rem; transition: background .2s, color .2s; } .credence-btn-outline a:hover { background: var(--wp--preset--color--primary, #E26D25) !important; color: #fff !important; } .credence-btn-sm a { padding: .55rem 1.2rem !important; font-size: .82rem; } .credence-btn-outline-light a { border: 2px solid #fff !important; color: #fff !important; background: transparent !important; border-radius: 999px !important; padding: .75rem 1.6rem !important; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; } .credence-btn-outline-light a:hover { background: #fff !important; color: var(--wp--preset--color--ink, #000) !important; } .credence-pillar-card { background: #fff; border-radius: 14px; padding: 1.6rem 1rem; text-align: center; box-shadow: 0 8px 22px -16px rgba(0,0,0,.22); transition: transform .25s, box-shadow .25s; height: 100%; } .credence-pillar-card:hover { transform: translateY(-3px); } .credence-pillar-card::before { display: none !important; } .credence-pillar-card img { width: 64px; height: 64px; } .credence-expectations .credence-step-mini { background: #fff; border-radius: 14px; padding: 1.2rem .6rem; text-align: center; box-shadow: 0 6px 18px -14px rgba(0,0,0,.2); height: 100%; } .credence-step-mini img { width: 56px; height: 56px; margin: 0 auto; } .credence-step-mini p { margin: .6rem 0 0; color: var(--cr-text-graphite, #383838); } .credence-review-card { background: #fff; border-radius: 18px; padding: 1.6rem !important; box-shadow: 0 12px 30px -22px rgba(0,0,0,.25); height: 100%; } .credence-review-card__stars { color: #f5a623; font-size: 1.05rem; letter-spacing: .15em; margin: 0 0 .5rem; } .credence-review-card p { line-height: 1.6; color: var(--cr-text-graphite, #383838); } .credence-cta-band { background-color: #000 !important; } .credence-cta-band h2, .credence-cta-band p { color: #fff !important; } /* Block details (FAQ) � match credence-faq look */ .credence-faq-section .wp-block-details { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: .75rem; box-shadow: 0 4px 14px -10px rgba(0,0,0,.18); border: 1px solid rgba(0,0,0,.06); } .credence-faq-section .wp-block-details summary { cursor: pointer; font-weight: 600; color: var(--cr-text-graphite, #383838); font-size: 1.02rem; list-style: none; position: relative; padding-right: 2rem; font-family: 'Sheffield','Inter',system-ui,sans-serif; } .credence-faq-section .wp-block-details summary::-webkit-details-marker { display: none; } .credence-faq-section .wp-block-details summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--wp--preset--color--primary, #E26D25); font-weight: 400; font-size: 1.5rem; line-height: 1; } .credence-faq-section .wp-block-details[open] summary::after { content: '�'; } .credence-faq-section .wp-block-details[open] summary { color: var(--wp--preset--color--primary, #E26D25); } .credence-faq-section .wp-block-details > *:not(summary) { margin-top: .75rem; color: var(--cr-text-graphite, #383838); line-height: 1.65; } .credence-faq-section .wp-block-details[open] { border-color: var(--wp--preset--color--primary, #E26D25); } /* Navigation submenu visual polish */ .wp-block-navigation .wp-block-navigation__submenu-container { border-radius: 10px; box-shadow: 0 20px 40px -22px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.06); padding: .5rem 0; } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1rem; font-family: 'Sheffield','Inter',system-ui,sans-serif; font-size: .92rem; color: var(--cr-text-graphite, #383838); } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary, #E26D25); } @media (max-width: 781px) { .credence-service-tile__img img { height: 200px; } .credence-services-home .wp-block-columns, .credence-services-list .wp-block-columns, .credence-pillars__grid { gap: 1rem; } } /* ========================================================= Home · Wellness Tips & Tricks (static blog cards) ========================================================= */ .credence-home-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin-top: 3rem; } @media (max-width: 1024px) { .credence-home-blog__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .credence-home-blog__grid { grid-template-columns: 1fr; } } .credence-home-blog .credence-blog-card, .credence-home-blog__grid .credence-blog-card { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--wp--preset--color--border, rgba(0,0,0,.08)); box-shadow: 0 12px 28px -22px rgba(0,0,0,.28); display: flex; flex-direction: column; transition: transform .35s var(--cr-easing, ease), box-shadow .35s var(--cr-easing, ease); } .credence-home-blog .credence-blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -22px rgba(226,109,37,.35); } .credence-blog-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wp--preset--color--primary-soft, #FCEFE3); } .credence-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--cr-easing, ease); } .credence-home-blog .credence-blog-card:hover .credence-blog-card__media img { transform: scale(1.06); } .credence-blog-card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1 1 auto; } .credence-blog-card__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-size: 1.15rem; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 .65rem; color: var(--cr-text-graphite, #383838); font-weight: 400; } .credence-blog-card__title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--cr-easing, ease), color .2s; } .credence-blog-card__title a:hover { color: var(--wp--preset--color--primary, #E26D25); background-size: 100% 1px; } .credence-blog-card__excerpt { margin: 0 0 .9rem; color: var(--cr-text-graphite, #383838); font-size: .95rem; line-height: 1.55; } .credence-blog-card__more { margin-top: auto; font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--primary, #E26D25); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; transition: gap .25s var(--cr-easing, ease), color .2s; } .credence-blog-card__more::after { content: "->"; font-family: 'Arial', sans-serif; } .credence-blog-card__more:hover { color: var(--wp--preset--color--primary-dark, #B0531A); gap: .65rem; } /* ========================================================= Newsletters · dynamic archive grid ([credence_newsletters]) ========================================================= */ .credence-nl-grid { margin-top: 2.5rem; } .credence-nl-grid .credence-blog-card { transition: transform .35s var(--cr-easing, ease), box-shadow .35s var(--cr-easing, ease); } .credence-nl-grid .credence-blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -22px rgba(226,109,37,.35); } .credence-nl-grid .credence-blog-card:hover .credence-blog-card__media img { transform: scale(1.06); } .credence-nl-card__date { margin: 0 0 .55rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark, #B0531A); } .credence-nl-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 3rem; } .credence-nl-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border, rgba(0,0,0,.12)); background: #fff; color: var(--cr-text-graphite, #383838); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } .credence-nl-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--primary, #E26D25); color: var(--wp--preset--color--primary, #E26D25); } .credence-nl-pagination .page-numbers.current { background: var(--wp--preset--color--primary, #E26D25); border-color: var(--wp--preset--color--primary, #E26D25); color: #fff; } .credence-nl-pagination .page-numbers.dots { border-color: transparent; background: transparent; } /* ========================================================= Blog archive (templates/index.html) · equal-height cards ========================================================= */ /* Wider, responsive grid handled by the block layout (minimumColumnWidth). */ .wp-block-query .wp-block-post-template.is-layout-grid { gap: 1.85rem; } /* Card is a flex column so the Read More link can sit flush at the bottom, giving every card the same height regardless of title/excerpt length. */ .credence-archive-card { position: relative; display: flex !important; flex-direction: column; height: 100%; gap: .7rem; overflow: hidden; transition: transform .35s var(--cr-easing, ease), box-shadow .35s var(--cr-easing, ease); } .credence-archive-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -26px rgba(226,109,37,.4); } .credence-archive-card .wp-block-post-featured-image { margin: 0; border-radius: 14px; overflow: hidden; } .credence-archive-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--cr-easing, ease); } .credence-archive-card:hover .wp-block-post-featured-image img { transform: scale(1.05); } .credence-archive-card .wp-block-post-date { margin: 0; color: var(--wp--preset--color--primary-dark, #B0531A); letter-spacing: .04em; text-transform: uppercase; } /* Clamp the title to 2 lines so long headlines never push card height. */ .credence-archive-card .wp-block-post-title { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.3em; } .credence-archive-card .wp-block-post-title a { text-decoration: none; color: inherit; } .credence-archive-card .wp-block-post-title a:hover { color: var(--wp--preset--color--primary, #E26D25); } .credence-archive-card .wp-block-post-excerpt { margin: 0; } /* Clamp the excerpt to 3 lines via CSS line-clamping. */ .credence-archive-card .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; min-height: 4.65em; } .credence-archive-card .wp-block-post-excerpt__more-link { display: none; } /* Read More pinned to the bottom edge of every card. */ .credence-archive-card .wp-block-read-more { margin-top: auto; align-self: flex-start; font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--primary, #E26D25); text-decoration: none; transition: color .2s; } .credence-archive-card .wp-block-read-more:hover { color: var(--wp--preset--color--primary-dark, #B0531A); } /* Whole-card click target: the Read More link stretches over the entire card. We place the overlay on Read More (not the title) because the clamped title uses overflow:hidden, which would clip a pseudo-element stretched link. */ .credence-archive-card .wp-block-read-more::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Keep the title link individually focusable/clickable above the overlay. */ .credence-archive-card .wp-block-post-title a { position: relative; z-index: 2; } /* Branded fallback when a post has no featured image (any context). */ .credence-featured-fallback { margin: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--wp--preset--color--primary-soft, #FCEFE3); display: flex; align-items: center; justify-content: center; } .credence-featured-fallback__img { width: 72%; max-width: 240px; height: auto; object-fit: contain; } /* Placeholder media inside the home/teaser blog cards. */ .credence-blog-card__media--placeholder { display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--primary-soft, #FCEFE3); } .credence-blog-card__media--placeholder img { width: 72%; height: auto; object-fit: contain; } /* ========================================================= Home · Certifications & Memberships ========================================================= */ .credence-home-certs > .wp-block-heading { color: var(--cr-text-graphite, #383838); margin-bottom: 0.5rem; } .credence-cert-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; justify-items: center; } @media (max-width: 900px) { .credence-cert-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .credence-cert-grid { grid-template-columns: 1fr; } } .credence-cert { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; max-width: 240px; } .credence-cert__badge { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--wp--preset--color--primary-soft, #FCEFE3); box-shadow: 0 14px 30px -20px rgba(0,0,0,.3); transition: transform .4s var(--cr-easing-spring, ease), box-shadow .35s ease; } .credence-cert:hover .credence-cert__badge { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 24px 40px -22px rgba(226,109,37,.5); } .credence-cert__badge img { width: 100%; height: 100%; object-fit: cover; display: block; } .credence-cert__label { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-text-graphite, #383838); line-height: 1.3; font-weight: 400; } /* ========================================================= PHASE 5 � Hero card, mission icons, service tiles v2, what-to-expect 2-col, compact certs ========================================================= */ /* ---------- Hero with white card overlay ---------- */ .credence-hero-shell { position: relative; padding: 0 !important; margin-bottom: 0 !important; } .credence-hero-shell > .wp-block-group__inner-container, .credence-hero-shell .wp-block-group__inner-container { max-width: none !important; padding: 0 !important; margin: 0 !important; } .credence-hero-shell .credence-hero-photo { position: relative; width: 100%; overflow: hidden; line-height: 0; } .credence-hero-shell .credence-hero-photo__img { width: 100%; height: auto; display: block; /* The hero banner is a composed graphic (rounded photo cards on a light field), not a full-bleed photo. Display it in full so the cards are never clipped — `cover` cropping made the banner look cut off. */ object-fit: contain; } .credence-hero-shell .credence-hero-card { position: relative; z-index: 3; max-width: 880px; margin: -180px auto 5px; background: #ffffff; border-radius: 6px; padding: 3rem 3.25rem 3rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 8px 40px rgba(0,0,0,.18); } .credence-hero-card__kicker { font-family: 'Sheffield','Inter',Georgia,serif; font-style: italic; text-transform: lowercase; color: var(--wp--preset--color--primary, #E26D25); letter-spacing: 0.02em; font-size: 1.05rem; margin: 0 0 .85rem; } .credence-hero-card__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; color: var(--wp--preset--color--ink, #000); font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 0 0 1.1rem; } .credence-hero-card__lede { color: var(--cr-text-graphite, #383838); font-size: 1.05rem; line-height: 1.55; margin: 0 auto 1.8rem; max-width: 640px; } .credence-hero-card__cta { display: inline-block; border: 2px solid var(--wp--preset--color--primary, #E26D25); color: var(--wp--preset--color--primary, #E26D25); background: transparent; border-radius: 999px; padding: .95rem 2.4rem; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: .95rem; text-decoration: none; transition: background .25s, color .25s, transform .25s, box-shadow .3s; } .credence-hero-card__cta:hover { background: var(--wp--preset--color--primary, #E26D25); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(226,109,37,.55); } @media (max-width: 900px) { .credence-hero-shell .credence-hero-card { margin-top: 0; padding: 2rem 1.5rem; max-width: calc(100% - 32px); } } /* ---------- Mission: centered orange icons + dark CTA ---------- */ .credence-mission { background: #ffffff !important; } .credence-mission__lede { max-width: 820px; margin-left: auto !important; margin-right: auto !important; color: var(--cr-text-graphite, #383838); line-height: 1.7; } .credence-mission-icons { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; margin: 3rem auto 0; padding: 0; max-width: 980px; text-align: center; } .credence-mission-icons li { display: flex; flex-direction: column; align-items: center; gap: .9rem; } .credence-pillar-icon { display: inline-block; width: 64px; height: 64px; background-color: var(--wp--preset--color--primary, #E26D25); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .credence-pillar-icon.is-family { -webkit-mask-image: url('../images/family.svg'); mask-image: url('../images/family.svg'); } .credence-pillar-icon.is-heart { -webkit-mask-image: url('../images/heart-pulse-solid.svg'); mask-image: url('../images/heart-pulse-solid.svg'); } .credence-pillar-icon.is-dollar { -webkit-mask-image: url('../images/hand-holding-dollar.svg'); mask-image: url('../images/hand-holding-dollar.svg'); } .credence-pillar-icon.is-bulb { -webkit-mask-image: url('../images/lightbulb-exclamation-on.svg'); mask-image: url('../images/lightbulb-exclamation-on.svg'); } .credence-pillar-label { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: .92rem; color: var(--cr-text-graphite, #383838); line-height: 1.3; } .credence-btn-dark a { background: var(--wp--preset--color--ink, #000) !important; color: #fff !important; border: 2px solid var(--wp--preset--color--ink, #000) !important; border-radius: 999px !important; padding: .95rem 2.4rem !important; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: .95rem !important; } .credence-btn-dark a:hover { background: transparent !important; color: var(--wp--preset--color--ink, #000) !important; } @media (max-width: 860px) { .credence-mission-icons { grid-template-columns: repeat(2, 1fr); } } /* ---------- Services v2: arched dome + lavender card + arrow ---------- */ .credence-services-home { background: #fff !important; } .credence-svc-grid { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } .credence-svc-tile { display: flex; flex-direction: column; align-items: stretch; } .credence-svc-tile__media { display: block; text-align: center; line-height: 0; margin-bottom: -28px; position: relative; z-index: 2; } .credence-svc-tile__media img { display: block; width: 100%; height: auto; max-width: 240px; margin: 0 auto; } .credence-svc-tile__body { background: var(--wp--preset--color--secondary, #C8C7DF); color: var(--cr-text-graphite, #383838); border-radius: 4px; padding: 2.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; text-align: center; position: relative; } .credence-svc-tile__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; line-height: 1.2; margin: 0 0 .8rem; } .credence-svc-tile__title a { color: var(--wp--preset--color--ink, #000); text-decoration: none; } .credence-svc-tile__title a:hover { color: var(--wp--preset--color--primary, #E26D25); } .credence-svc-tile__desc { font-size: .9rem; line-height: 1.55; margin: 0 0 1.5rem; color: #2a2a2a; } .credence-svc-tile__arrow { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: var(--wp--preset--color--ink, #000); color: #fff !important; font-size: 1.6rem; line-height: 1; text-decoration: none; margin: auto auto 0; transition: background .25s, transform .25s; } .credence-svc-tile__arrow:hover { background: var(--wp--preset--color--primary, #E26D25); transform: translateX(2px); } @media (max-width: 1100px) { .credence-svc-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .credence-svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .credence-svc-grid { grid-template-columns: 1fr; } } /* ================================================================= SERVICES ARCHIVE (Phase 16) — pixel-aligned with live reference ================================================================= */ /* --- Banner — short cover with just a small uppercase eyebrow on dark overlay --- */ .credence-archive-banner { min-height: 360px !important; } .credence-archive-banner .wp-block-cover__inner-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem !important; } .credence-archive-banner__eyebrow { font-family: 'Public Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif; color: #ffffff; text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.95rem; font-weight: 600; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.45); } /* --- Intro section: centered H1 + UVP + CTA + paragraphs --- */ .credence-archive-intro { text-align: center; } .credence-archive-intro__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.025em; line-height: 1.08; font-size: clamp(1.75rem, 4vw, 2.75rem) !important; color: var(--wp--preset--color--ink, #1a1a1a); margin: 0 0 2.25rem !important; max-width: 920px; margin-left: auto !important; margin-right: auto !important; } .credence-archive-uvp { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; display: flex; flex-direction: column; gap: 0.4rem; } .credence-archive-uvp li { font-family: 'Public Sans','Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; color: var(--wp--preset--color--ink, #1a1a1a); line-height: 1.4; } .credence-archive-cta .wp-block-button__link { background-color: var(--wp--preset--color--primary, #E26D25) !important; color: #ffffff !important; border-radius: 4px !important; padding: 0.95rem 1.9rem !important; font-family: 'Public Sans','Inter',sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; border: 0 !important; transition: background-color 0.25s, transform 0.25s; } .credence-archive-cta .wp-block-button__link:hover { background-color: #c45a18 !important; transform: translateY(-1px); } .credence-archive-intro p { font-family: 'Public Sans','Inter',-apple-system,sans-serif; font-size: 1.02rem; line-height: 1.7; color: #383838; max-width: 820px; margin-left: auto; margin-right: auto; } .credence-archive-intro p a { color: var(--wp--preset--color--primary, #E26D25); text-decoration: underline; text-underline-offset: 3px; } /* --- Tiles grid --- */ .credence-archive-tiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; } .credence-archive-card { display: flex; flex-direction: column; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.18); transition: transform 0.3s, box-shadow 0.3s; } .credence-archive-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.28); } .credence-archive-card__media { display: block; line-height: 0; overflow: hidden; background: #f3efe9; } .credence-archive-card__media img { display: block; width: 100%; height: 240px; object-fit: cover; transition: transform 0.6s ease; } .credence-archive-card:hover .credence-archive-card__media img { transform: scale(1.04); } .credence-archive-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.6rem 1.5rem 1.7rem; text-align: left; } .credence-archive-card__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.15; font-size: 1.25rem !important; margin: 0 0 0.85rem !important; color: var(--wp--preset--color--ink, #1a1a1a); } .credence-archive-card__title a { color: inherit; text-decoration: none; transition: color 0.2s; } .credence-archive-card__title a:hover { color: var(--wp--preset--color--primary, #E26D25); } .credence-archive-card__desc { font-family: 'Public Sans','Inter',sans-serif; font-size: 0.95rem; line-height: 1.6; color: #4a4a4a; margin: 0 0 1.5rem; flex: 1 1 auto; } .credence-archive-card__btn { display: inline-block; align-self: flex-start; background-color: var(--wp--preset--color--ink, #1a1a1a); color: #ffffff; font-family: 'Public Sans','Inter',sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.78rem; padding: 0.85rem 1.4rem; border-radius: 3px; text-decoration: none; transition: background-color 0.25s, transform 0.25s; } .credence-archive-card__btn:hover { background-color: var(--wp--preset--color--primary, #E26D25); color: #ffffff; transform: translateY(-1px); } @media (max-width: 992px) { .credence-archive-tiles__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .credence-archive-card__media img { height: 210px; } } @media (max-width: 600px) { .credence-archive-tiles__grid { grid-template-columns: 1fr; gap: 1.25rem; } .credence-archive-intro__title { font-size: clamp(1.5rem, 7vw, 2rem) !important; margin-bottom: 1.75rem !important; } .credence-archive-banner__eyebrow { font-size: 0.78rem; letter-spacing: 0.24em; } .credence-archive-banner { min-height: 260px !important; } } /* --- FAQs --- */ .credence-archive-faqs { background: #ffffff; } .credence-archive-faqs__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; letter-spacing: 0.06em !important; font-size: clamp(1.8rem, 3vw, 2.4rem) !important; margin: 0 0 2.5rem !important; color: var(--wp--preset--color--ink, #1a1a1a); } .credence-archive-faq { max-width: 900px; margin: 0 auto; } .credence-archive-faq .credence-faq__item { background: #f8f6f2; border-radius: 6px; margin-bottom: 0.85rem; overflow: hidden; } .credence-archive-faq .credence-faq__q { font-family: 'Public Sans','Inter',sans-serif !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; color: var(--wp--preset--color--ink, #1a1a1a); padding: 1.15rem 3.5rem 1.15rem 1.4rem !important; line-height: 1.35; } .credence-archive-faq .credence-faq__a { padding: 0 1.4rem 1.3rem; font-family: 'Public Sans','Inter',sans-serif; font-size: 0.97rem; line-height: 1.65; color: #383838; } .credence-archive-faq .credence-faq__a p { margin: 0 0 0.85rem; } .credence-archive-faq .credence-faq__a p:last-child { margin-bottom: 0; } .credence-archive-faq .credence-faq__a a { color: var(--wp--preset--color--primary, #E26D25); text-decoration: underline; text-underline-offset: 3px; } /* ---------- What to Expect: 2 columns image + content ---------- */ .credence-expect-row { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; margin: 0 auto; max-width: 1180px; } .credence-expect-row__media img { width: 100%; height: auto; display: block; border-radius: 0; } .credence-expect-row__kicker { font-family: 'Sheffield','Inter',Georgia,serif; font-style: italic; text-transform: lowercase; color: var(--wp--preset--color--primary, #E26D25); margin: 0 0 .6rem; font-size: 1.05rem; } .credence-expect-row__title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; color: var(--wp--preset--color--ink, #000); font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0 0 1.4rem; } .credence-expect-list { list-style: none; counter-reset: cr-step; padding: 0; margin: 0 0 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1.5rem; } .credence-expect-list li { counter-increment: cr-step; display: flex; align-items: center; gap: .8rem; font-size: .98rem; color: var(--cr-text-graphite, #383838); } .credence-expect-list li::before { content: counter(cr-step); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--wp--preset--color--primary, #E26D25); color: #fff; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 700; font-size: .85rem; } .credence-expect-row__cta { display: flex; flex-wrap: wrap; gap: .9rem; } .credence-btn-dark-pill { display: inline-block; background: var(--wp--preset--color--ink, #000); color: #fff; border: 2px solid var(--wp--preset--color--ink, #000); border-radius: 999px; padding: .85rem 1.8rem; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: .88rem; text-decoration: none; transition: background .25s, color .25s; } .credence-btn-dark-pill:hover { background: transparent; color: var(--wp--preset--color--ink, #000); } .credence-btn-orange-outline { display: inline-block; background: transparent; color: var(--wp--preset--color--primary, #E26D25); border: 2px solid var(--wp--preset--color--primary, #E26D25); border-radius: 999px; padding: .85rem 1.8rem; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: .88rem; text-decoration: none; transition: background .25s, color .25s; } .credence-btn-orange-outline:hover { background: var(--wp--preset--color--primary, #E26D25); color: #fff; } @media (max-width: 900px) { .credence-expect-row { grid-template-columns: 1fr; gap: 1.5rem; } .credence-expect-list { grid-template-columns: 1fr; } } /* ---------- Compact certifications grid ---------- */ .credence-home-certs { background: #fff !important; } .credence-certs-mini { list-style: none; padding: 0; margin: 2rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; max-width: 760px; } .credence-certs-mini li { display: flex; align-items: center; gap: .85rem; font-size: .92rem; line-height: 1.35; color: var(--cr-text-graphite, #383838); font-weight: 600; } .credence-certs-mini img { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; } @media (max-width: 720px) { .credence-certs-mini { grid-template-columns: 1fr; } } /* ========================================================= PHASE 6 — Footer redesign (certs band + 3 cols + orange CTA bar) redesigned FAQ (gray, separators, smooth, chevron icon) ========================================================= */ /* ---------- Reset/override any previous footer styles ---------- */ .credence-footer { background: transparent !important; color: #383838; padding: 0 !important; margin: 0 !important; max-width: none !important; position: relative; overflow: hidden; } .credence-footer::before, .credence-footer::after { display: none !important; } .credence-footer > * { margin: 0 !important; } /* ---------- Certifications band (white background) ---------- */ .credence-footer-certs-band { background: #ffffff; padding: 3rem 1rem 2.5rem; } .credence-footer-certs-inner { max-width: 920px; margin: 0 auto; text-align: center; } .credence-footer-certs__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 600; font-size: 1.95rem; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.02em; color: #383838; margin: 0 0 1.5rem !important; } .credence-footer-certs { list-style: none; margin: 0 auto !important; padding: 0 !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.7rem 2.2rem; max-width: 1280px; text-align: center; } /* Each cert badge: single line, regular weight */ .credence-footer-certs li { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; color: #383838; line-height: 1.2; white-space: nowrap; } .credence-footer-certs li img { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; mix-blend-mode: multiply; filter: contrast(1.05); } @media (max-width: 720px) { .credence-footer-certs { gap: 0.8rem 0; flex-direction: column; } .credence-footer-certs li { white-space: normal; } .credence-footer-certs__title { font-size: 1.55rem; } } /* ---------- Main 3-column section (light gray background) ---------- */ .credence-footer-main { background: #e6e6e6; padding: 3.5rem 1.5rem; } .credence-footer-main-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2.5rem; align-items: stretch; } /* Each column is a flex column — button (last child) pushes to bottom */ .credence-footer-col { display: flex; flex-direction: column; height: 100%; } /* Per-column text alignment per design */ .credence-footer-col--left { text-align: left; } .credence-footer-col--center { text-align: center; } .credence-footer-col--right { text-align: right; } /* CTA buttons (last child) push to bottom of column */ .credence-footer-col > .credence-footer-btn { margin-top: auto; align-self: flex-start; } .credence-footer-col--right > .credence-footer-btn { align-self: flex-end; } @media (max-width: 900px) { .credence-footer-main-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; } .credence-footer-col, .credence-footer-col--left, .credence-footer-col--right { text-align: center; } .credence-footer-col > .credence-footer-btn, .credence-footer-col--right > .credence-footer-btn { align-self: center; } } /* Section titles (Check us out / Our open hours) */ .credence-footer-col__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 600; font-size: 1.55rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wp--preset--color--primary, #E26D25); margin: 0 0 0.5rem !important; } @media (max-width: 900px) { .credence-footer-col__title { text-align: center; } } /* Divider rule — full column width, no centering */ .credence-footer-rule { border: 0 !important; height: 3px !important; background: var(--wp--preset--color--primary, #E26D25); margin: 0.6rem 0 1rem !important; opacity: 1; width: 100%; } /* Lists for left + right columns — flex-grow so both col 1 + col 3 lists fill the available height, keeping the bottom HR + button aligned between columns. */ .credence-footer-col__list, .credence-footer-col__hours { list-style: none !important; margin: 0 0 1.2rem !important; padding: 0 !important; flex: 1 0 auto; } .credence-footer-col__list li { margin: 0.35rem 0; } .credence-footer-col__list a { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; color: #383838; text-transform: uppercase; letter-spacing: 0.01em; text-decoration: none; transition: color 0.2s; } .credence-footer-col__list a:hover { color: var(--wp--preset--color--primary, #E26D25); } /* Right column hours rows: only the column TITLE stays right-aligned (via .credence-footer-col--right). The hours rows themselves are left-aligned so DAY starts at the left edge of the divider rule. */ .credence-footer-col__hours li { display: flex; align-items: baseline; justify-content: flex-start; gap: 0.5rem; font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; color: #383838; text-transform: uppercase; letter-spacing: 0.01em; padding: 0.18rem 0; text-align: left; } .credence-footer-col__hours .day { font-weight: 600; } .credence-footer-col__hours .sep { color: var(--wp--preset--color--primary, #E26D25); font-weight: 700; } .credence-footer-col__hours .hrs { flex: 0 0 auto; } @media (max-width: 900px) { .credence-footer-col__hours li { justify-content: center; } } .credence-footer-col--left .credence-footer-col__list, .credence-footer-col--left .credence-footer-col__list li, .credence-footer-col--left .credence-footer-col__list a { text-align: left; } .credence-footer-col--right .credence-footer-col__hours, .credence-footer-col--right .credence-footer-col__hours li, .credence-footer-col--right .credence-footer-col__hours .day { text-align: left; } /* Orange outline pill CTAs */ .credence-footer-btn { display: inline-block; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--primary, #E26D25); background: transparent; border: 1.6px solid var(--wp--preset--color--primary, #E26D25); border-radius: 999px; padding: 0.55rem 1.4rem; text-decoration: none; transition: background 0.2s, color 0.2s; margin-top: 0.2rem; } .credence-footer-btn:hover { background: var(--wp--preset--color--primary, #E26D25); color: #ffffff; } /* Center column: logo + tagline + address + contact icons */ .credence-footer-col--center .credence-footer-logo { display: inline-block; margin: 0 auto 0.6rem; } .credence-footer-logo img { display: block; height: auto; max-width: 220px; margin: 0 auto; } .credence-footer-center__tagline { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 600; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.06em; color: #383838; margin: 0.4rem 0 1rem !important; } .credence-footer-center__address { font-style: normal; margin: 0 0 0.8rem; } .credence-footer-center__address a { font-family: 'Inter','Sheffield',sans-serif; font-size: 0.98rem; color: #383838; line-height: 1.5; text-decoration: none; } .credence-footer-center__address a:hover { color: var(--wp--preset--color--primary, #E26D25); } .credence-footer-center__contacts { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .credence-footer-center__contacts a { display: inline-flex; align-items: center; gap: 0.45rem; font-family: 'Inter','Sheffield',sans-serif; font-size: 0.95rem; color: #383838; text-decoration: none; } .credence-footer-center__contacts a svg { color: var(--wp--preset--color--primary, #E26D25); flex: 0 0 auto; } .credence-footer-center__contacts a:hover { color: var(--wp--preset--color--primary, #E26D25); } /* ---------- Orange bottom bar (copy + social + legal) ---------- */ .credence-footer-bar { background: var(--wp--preset--color--primary, #E26D25); padding: 1.1rem 1.5rem; color: #ffffff; } .credence-footer-bar-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1rem; } .credence-footer-bar__copy { margin: 0 !important; font-family: 'Inter','Sheffield',sans-serif; font-size: 0.88rem; color: #ffffff; } .credence-footer-bar__social { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; gap: 0.6rem; } .credence-footer-bar__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #ffffff; text-decoration: none; transition: background 0.2s, color 0.2s, transform 0.2s; } .credence-footer-bar__social a:hover { background: #ffffff; color: var(--wp--preset--color--primary, #E26D25); transform: translateY(-1px); } .credence-footer-bar__links { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; gap: 1rem; } .credence-footer-bar__links a { font-family: 'Inter','Sheffield',sans-serif; font-size: 0.88rem; color: #ffffff; text-decoration: none; opacity: 0.95; } .credence-footer-bar__links a:hover { opacity: 1; text-decoration: underline; } @media (max-width: 700px) { .credence-footer-bar-inner { flex-direction: column; text-align: center; gap: 0.8rem; } } /* ---------- FAQ: gray boxes, separators, smooth open/close, chevron icon ---------- */ .credence-faq-section { background: transparent !important; } .credence-faq-section > .wp-block-group__inner-container, .credence-faq-section.has-background { max-width: 880px !important; margin: 0 auto; } /* Wrapper around the FAQ list � gives it the gray panel look */ .credence-faq { background: #f4f4f4; border-radius: 12px; padding: .5rem 1.5rem; margin: 1.5rem auto 0 !important; max-width: 820px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* Each item: no border/shadow, just a thin divider */ .credence-faq__item, .credence-faq-section .wp-block-details { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(0,0,0,.10) !important; overflow: hidden; } .credence-faq__item:last-child, .credence-faq-section .wp-block-details:last-child { border-bottom: 0 !important; } .credence-faq__item:hover, .credence-faq__item[open] { border-color: rgba(0,0,0,.10) !important; box-shadow: none !important; background: transparent !important; } /* Summary row */ .credence-faq__item > summary, .credence-faq-section .wp-block-details > summary { list-style: none !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; padding: 1.1rem .25rem !important; cursor: pointer; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: #1a1a1a; text-transform: none; position: relative; background: transparent !important; transition: color .25s; } .credence-faq__item > summary::-webkit-details-marker, .credence-faq-section .wp-block-details > summary::-webkit-details-marker { display: none; } .credence-faq__item > summary::marker, .credence-faq-section .wp-block-details > summary::marker { display: none; content: ""; } .credence-faq__item[open] > summary, .credence-faq-section .wp-block-details[open] > summary { color: var(--wp--preset--color--primary, #E26D25); background: transparent !important; } .credence-faq__item > summary:hover, .credence-faq-section .wp-block-details > summary:hover { color: var(--wp--preset--color--primary, #E26D25); } /* Chevron icon (right side) � rotates 180� on open */ .credence-faq__item > summary::after, .credence-faq-section .wp-block-details > summary::after { content: ""; flex: 0 0 auto; width: 28px; height: 28px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: transform .4s var(--cr-easing-spring, cubic-bezier(.34,1.56,.64,1)); } .credence-faq__item[open] > summary::after, .credence-faq-section .wp-block-details[open] > summary::after { transform: rotate(180deg); } /* Answer area + smooth animation */ .credence-faq__item > *:not(summary), .credence-faq-section .wp-block-details > *:not(summary) { margin: 0 !important; } .credence-faq__a-wrap { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--cr-easing, ease); } .credence-faq__item[open] .credence-faq__a-wrap, .credence-faq-section .wp-block-details[open] .credence-faq__a-wrap { grid-template-rows: 1fr; } .credence-faq__a-wrap > .credence-faq__a-inner { min-height: 0; padding: 0 .25rem 1.2rem; color: #383838; line-height: 1.65; font-size: .96rem; } .credence-faq__a-wrap > .credence-faq__a-inner > p { margin: 0; } /* ========================================================= PHASE 7 (v2) — Meet the Team page (pixel clone of live /about-us/meet-the-team) Banner + intro + 7 plain (no card) team rows Uses Public Sans (free Interstate clone) + Big Shoulders (Brothers clone) ========================================================= */ /* ---------- Banner (full-bleed via WP alignfull on parent has-global-padding) ---------- */ .credence-team-banner { position: relative; margin-top: 0; height: 350px; overflow: hidden; background: #383838; max-width: none !important; } .credence-team-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .credence-team-banner__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 0 40px; box-sizing: border-box; } .credence-team-banner__inner { max-width: 1140px; width: 100%; margin: 0 auto; padding: 0 30px; box-sizing: border-box; } .credence-team-banner__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 50px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #383838; margin: 0 !important; padding: 0; /* Align with the H1 of the intro section: same offset as .credence-team-intro__inner (max-width:1140 + padding:0 15px, centered inside .credence-team-intro which has padding:0 30px). Net: max content = 1170px, centered, with 15px inner pad. */ max-width: 1170px; width: 100%; padding-left: 45px; padding-right: 45px; margin-inline: auto !important; box-sizing: border-box; } @media (max-width: 720px) { .credence-team-banner { height: 240px; } .credence-team-banner__title { font-size: 34px; } } /* ---------- Intro section (H1 + 3 paragraphs + sidebar with contact form) ---------- */ .credence-team-intro { background: #ffffff; padding: 0 30px; } .credence-team-intro__inner { max-width: 1140px; margin: 0 auto; padding: 0 15px; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; } .credence-team-intro__main { min-width: 0; } .credence-team-intro__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 31.25px; line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; color: #000000; margin: 60px 0 2rem !important; text-align: left; } .credence-team-intro__main p { font-family: 'Public Sans','Inter',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.5; color: #383838; margin: 0 0 1rem; text-align: left; } @media (max-width: 900px) { .credence-team-intro__inner { grid-template-columns: 1fr; } } /* ---------- Team members section ---------- */ .credence-team-list { background: #ffffff; padding: 0 30px; } .credence-team-list__inner { max-width: 1140px; margin: 0 auto; padding: 0 15px; } .credence-team-member { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 30px; align-items: flex-start; margin: 20px 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .credence-team-member__media { margin: 0; } .credence-team-member__media img { display: block; width: 100%; height: auto; border-radius: 0; object-fit: cover; } .credence-team-member__body { padding-top: 0; } .credence-team-member__name { font-family: 'Public Sans','Inter',sans-serif; font-size: 18.75px; font-weight: 700; line-height: 1.38; letter-spacing: 0; text-transform: uppercase; color: #000000; margin: 48px 0 16px !important; padding: 10px 0 0; text-align: left; } .credence-team-member__body p { font-family: 'Public Sans','Inter',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.5; color: #383838; margin: 0 0 1rem; text-align: left; } .credence-team-member__body p:last-child { margin-bottom: 0; } @media (max-width: 900px) { .credence-team-member { grid-template-columns: 1fr; gap: 1.2rem; } .credence-team-member__media img { max-width: 380px; margin: 0 auto; } .credence-team-member__name { margin-top: 1.5rem !important; text-align: center; } .credence-team-member__body p { text-align: center; } } /* ---------- Team members rendered INSIDE the intro main column ---------- The team roster now lives in the left/main column of the .credence-bts-intro grid (beside the contact sidebar) instead of a separate full-width section. This lets the tall sidebar sit alongside the roster and removes the large blank gap that appeared when the short intro was the sidebar's only neighbour. The first member is separated from the intro copy by a top divider. */ .credence-team-members { margin-top: 2.5rem; padding-top: 0.5rem; border-top: 1px solid #ececec; } /* First member sits flush under the divider (its name already carries a 48px top margin, so suppress the extra article margin to keep balance). */ .credence-team-members > .credence-team-member:first-child { margin-top: 0; } .credence-team-members > .credence-team-member:first-child .credence-team-member__name { margin-top: 0 !important; } /* ---------- Contact form widget (sidebar) ---------- */ .credence-contact-form { margin: 60px 0 0; } .credence-contact-form__inner { background: #e26d25; padding: 28px 26px 32px; border-radius: 6px; color: #ffffff; } .credence-contact-form__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 39.58px; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: #ffffff; text-align: center; margin: 0 0 22px !important; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.35); } .credence-contact-form__field { display: block; width: 100%; border: 0; background: #ffffff; color: #383838; font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 14px; line-height: 1.2; padding: 10px 12px; margin: 0 0 12px; border-radius: 0; box-sizing: border-box; } .credence-contact-form__field::placeholder { color: #555555; opacity: 1; } .credence-contact-form__phone { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; margin: 0 0 12px; } .credence-contact-form__phone .credence-contact-form__field { margin: 0; text-align: center; } .credence-contact-form__textarea { min-height: 110px; resize: vertical; font-family: 'Public Sans','Inter','Sheffield',sans-serif; } .credence-contact-form__submit { display: block; width: 100%; margin: 18px auto 0; background: #333333; color: #ffffff; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 25px; line-height: 1; letter-spacing: 0.04em; text-transform: none; border: 0; border-radius: 35px; padding: 12px 0; cursor: pointer; transition: background .2s ease, transform .2s ease; } .credence-contact-form__submit:hover, .credence-contact-form__submit:focus-visible { background: #1a1a1a; transform: translateY(-1px); } /* Ratings strip below the form */ .credence-contact-form__ratings { display: flex; align-items: center; justify-content: center; gap: 14px; list-style: none !important; margin: 18px 0 0 !important; padding: 0 !important; } .credence-contact-form__ratings li { margin: 0; } .credence-contact-form__ratings .sep { color: #b5b5b5; font-weight: 300; } .credence-contact-form__ratings img { display: block; height: 38px; width: auto; } @media (max-width: 900px) { .credence-contact-form { margin-top: 30px; max-width: 420px; } .credence-team-intro__inner .credence-contact-form { margin: 30px auto 0; } } /* ============================================================ PHASE 8 — Book Us to Speak page (post 11) — replicates live ============================================================ */ /* Two-col page layout 8/4 (content + sidebar) — reuses team-intro grid pattern but with a sidebar (NOT contact form aside) on the right. */ .credence-bts-intro .credence-team-intro__inner { grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; } @media (max-width: 900px) { .credence-bts-intro .credence-team-intro__inner { grid-template-columns: 1fr; } } /* Outline orange pill button used inline within content */ .credence-bts-btn-outline { display: inline-block; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 14.4px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wp--preset--color--primary, #E26D25); background: transparent; border: 1.6px solid var(--wp--preset--color--primary, #E26D25); border-radius: 22px; padding: 8px 20px; text-decoration: none; transition: background 0.2s, color 0.2s; margin-top: 8px; } .credence-bts-btn-outline:hover { background: var(--wp--preset--color--primary, #E26D25); color: #ffffff; } /* Sidebar wrapper (right column) */ .credence-bts-sidebar { display: block; } /* Formwrap: contains iframe + ratings band; pulled up to overlap banner */ .credence-bts-formwrap { margin-top: -45px; position: relative; } /* "Contact Us" header sitting on the orange form card (matches legacy form) */ .credence-bts-formtitle { margin: 0; background: var(--wp--preset--color--primary, #E26D25); color: #ffffff; text-align: center; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 2rem; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; padding: 1.4rem 1rem 0.4rem; } /* Iframe contact form (Wufoo replica or real iframe) */ .credence-bts-iframe { display: block; width: 100%; min-height: 490px; border: 0; background: var(--wp--preset--color--primary, #E26D25); } /* Configurable embed wrappers (Credence Website Embeds plugin) */ .credence-embed { position: relative; width: 100%; } .credence-embed iframe { display: block; width: 100%; border: 0; } /* Contact-form embed inside the sidebar formwrap: preserve orange backdrop */ .credence-bts-embed { background: var(--wp--preset--color--primary, #E26D25); min-height: 490px; } .credence-bts-embed iframe { min-height: 744px; background: transparent; } /* Dark orange ratings band below iframe (overlaps iframe bottom edge) */ .credence-bts-ratings { background: #8E4C24; color: #ffffff; padding: 25px 40px; margin-top: -35px; position: relative; z-index: 1; } .credence-bts-ratings ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; gap: 14px; } .credence-bts-ratings li { margin: 0; display: flex; align-items: center; } .credence-bts-ratings img { display: block; height: 26px; width: auto; } .credence-bts-ratings .sep { color: #ffffff; font-weight: 300; font-size: 22px; } /* Stacked tertiary nav buttons (Share Your Story, Book An Appointment, etc.) */ .credence-bts-nav { margin: 40px 0 0; display: flex; flex-direction: column; gap: 5px; } .credence-bts-nav__btn { display: block; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; text-decoration: none; padding: 10px 20px; border-radius: 30px; transition: background 0.2s, color 0.2s, transform 0.15s; } .credence-bts-nav__btn--gray { background: #e6e6e6; color: #383838; } .credence-bts-nav__btn--gray:hover { background: #d8d8d8; color: #000000; } .credence-bts-nav__btn--orange { background: var(--wp--preset--color--primary, #E26D25); color: #ffffff; } .credence-bts-nav__btn--orange:hover { background: #B0531A; color: #ffffff; } /* Google review badge widget */ .credence-bts-review { display: block; margin: 32px 0 64px; padding: 16px 18px; border: 1px solid #e0e0e0; border-radius: 6px; background: #ffffff; text-align: center; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s; } .credence-bts-review:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .credence-bts-review__rating { font-family: 'Public Sans','Inter',sans-serif; font-size: 22px; font-weight: 400; color: #4a4a4a; display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 6px; } .credence-bts-review__body { display: block; } .credence-bts-review__stars { color: #fbbc04; letter-spacing: 1px; font-size: 20px; } .credence-bts-review__link { display: block; font-family: 'Public Sans','Inter',sans-serif; font-size: 14px; color: #5f6368; margin: 0; } .credence-bts-review__logo { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-bottom: 6px; } /* On stack (mobile), align sidebar contents to center, narrower */ @media (max-width: 900px) { .credence-bts-sidebar { max-width: 420px; margin: 0 auto; } .credence-bts-formwrap { margin-top: 30px; } } /* ============================================================ PHASE 8 — Contact Us page (post 14) ============================================================ */ /* PHONE / FAX / ADDRESS inline lines */ .credence-team-intro__main .credence-contact-line { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.5; color: #383838; margin: 0 0 0.6rem; } .credence-team-intro__main .credence-contact-line strong { font-weight: 700; color: #000000; margin-right: 4px; } .credence-team-intro__main .credence-contact-line a { color: var(--wp--preset--color--primary, #E26D25); text-decoration: none; } .credence-team-intro__main .credence-contact-line a:hover { text-decoration: underline; } /* Gray rounded hours box */ .credence-contact-hours { background: #e6e6e6; padding: 25px 30px; border-radius: 40px; margin: 1.5rem 0 2rem; } .credence-contact-hours__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 25px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; color: var(--wp--preset--color--primary, #E26D25); margin: 0 0 0.8rem !important; } .credence-contact-hours p { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.5; color: #383838; margin: 0 0 0.35rem; } .credence-contact-hours p strong { font-weight: 700; color: #000000; } /* Google Map embed */ .credence-contact-map { display: block; width: 100%; height: 450px; border: 0; margin: 4rem 0 2rem; } /* ============================================================ PHASE 9 — Testimonials page (post 17) ============================================================ */ /* Action buttons row (Read More Reviews + Leave us a Review) */ .credence-testimonials-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 1.5rem 0 2.5rem; } /* Neutralise stray block-spacing margin on the second button so the flex line height is not inflated (which previously stretched the first button). */ .credence-testimonials-actions > .credence-btn { margin: 0; box-sizing: border-box; } .credence-btn { display: inline-block; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 14.4px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; padding: 12px 28px; border-radius: 22px; border: 1.6px solid var(--wp--preset--color--primary, #E26D25); transition: background 0.2s, color 0.2s; white-space: nowrap; } .credence-btn--outline { color: var(--wp--preset--color--primary, #E26D25); background: transparent; } .credence-btn--outline:hover { background: var(--wp--preset--color--primary, #E26D25); color: #ffffff; } .credence-btn--solid { color: #ffffff; background: var(--wp--preset--color--primary, #E26D25); } .credence-btn--solid:hover { background: #B0531A; border-color: #B0531A; } /* Reviews list */ .credence-testimonials-list { margin: 0 0 4rem; } .credence-review { background: #ffffff; border: 1px solid #dddddd; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 20px; margin: 20px 0; } .credence-review__content { padding: 0; border-radius: 4px; } .credence-review__text { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: #000000; margin: 0 0 0.6rem; } .credence-review__text + .credence-review__text { margin-top: 0.6rem; } .credence-review__stars { color: #ffcc00; font-size: 18px; letter-spacing: 2px; text-align: center; margin: 0.4rem 0 10px; line-height: 1; } .credence-review__author { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 14px; font-style: italic; font-weight: 400; color: #e47836; margin: 10px 0 0; } /* ============================================================ PHASE 10 — New Patients page (post 15) ============================================================ */ .credence-np-main { font-family: 'Public Sans','Inter','Sheffield',sans-serif; } /* H1: Brothers, ~31.25px, black uppercase */ .credence-np-title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 31.25px; line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; color: #000000; margin: 60px 0 1rem !important; text-align: left; } /* H2: Brothers 25px orange */ .credence-np-h2 { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 25px; line-height: 1.2; letter-spacing: 0.01em; text-transform: none; color: #e47836; margin: 3rem 0 1rem !important; text-align: left; } /* H3: bold black uppercase ~18.75px */ .credence-np-h3 { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-weight: 700; font-size: 18.75px; line-height: 1.3; text-transform: uppercase; color: #000000; margin: 3rem 0 1rem !important; text-align: left; } /* Body paragraphs */ .credence-np-main p { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.6; color: #383838; margin: 0 0 1rem; } .credence-np-main p a { color: #e47836; text-decoration: underline; } .credence-np-main p a:hover { color: #000000; } /* UVP callout list — items with stamp logo on the left, matches live .uvp.uvp-callout-1 */ .credence-np-uvp { list-style: none !important; padding: 0 !important; margin: 1rem 0 10px !important; background: transparent; } .credence-np-uvp li { position: relative; padding: 2px 0 2px 32px; margin: 0 0 1rem; font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 400; line-height: 1.4; color: #000000; background-image: url("../images/stamp-logo.jpg"); background-repeat: no-repeat; background-position: left center; background-size: 22px auto; } .credence-np-uvp li:last-child { margin-bottom: 0; } /* CTA wrapper — left-aligned */ .credence-np-cta { display: flex; flex-direction: column; align-items: flex-start; margin: 2rem 0 1rem; } .credence-np-cta .credence-btn { max-width: 320px; width: 100%; white-space: normal; box-sizing: border-box; } /* New Patients FAQ — each step on a gray panel with smooth open animation */ .credence-np-faq { background: transparent; border-radius: 0; padding: 0; margin: 1.5rem 0 2rem !important; max-width: none; box-shadow: none; } .credence-np-faq .credence-faq__item { background: #f4f4f4 !important; border: 0 !important; border-radius: 8px !important; margin: 0 0 12px !important; padding: 0 1.25rem !important; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; transition: background-color .25s ease; } .credence-np-faq .credence-faq__item:last-child { margin-bottom: 0 !important; } .credence-np-faq .credence-faq__item[open] { background: #eeeeee !important; } .credence-np-faq .credence-faq__item > summary { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-weight: 700 !important; font-size: 14px; text-transform: uppercase !important; letter-spacing: 0.04em; color: #000000 !important; padding: 18px 0 !important; } .credence-np-faq .credence-faq__item > summary::after { background-color: #e47836; } .credence-np-faq .credence-faq__item[open] > summary { color: #e47836 !important; } .credence-np-faq .credence-faq__a-wrap { transition: grid-template-rows .45s ease; } .credence-np-faq .credence-faq__a-wrap > .credence-faq__a-inner { padding: 0 0 1.2rem; font-size: 16.67px; font-weight: 300; line-height: 1.6; color: #383838; } .credence-np-faq .credence-faq__a-wrap > .credence-faq__a-inner > p { margin: 0 0 0.8rem; } .credence-np-faq .credence-faq__a-wrap > .credence-faq__a-inner > p:last-child { margin-bottom: 0; } /* ============================================================ PHASE 11 — New Patient Forms page (post 16) ============================================================ */ /* Dark outline button variant (matches live .button--secondary / .button--tertiary) */ .credence-btn--outline-dark { display: inline-block; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 16.67px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: #333333; background: transparent; border: 1.6px solid #333333; border-radius: 22px; padding: 8px 20px; cursor: pointer; transition: color .25s ease, border-color .25s ease, background-color .25s ease; } .credence-btn--outline-dark:hover, .credence-btn--outline-dark:focus { color: #e47836; border-color: #e47836; background: transparent; } /* ----- Forms section (cards) ----- */ .credence-npf { background: #ffffff; } .credence-npf__inner { max-width: 1170px; margin: 0 auto; padding: 0 45px; box-sizing: border-box; } .credence-npf__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 4rem 0 8rem; } .credence-npf-card-link { display: block; text-decoration: none !important; color: inherit; } .credence-npf-card { display: flex; align-items: center; gap: 1.5rem; padding: 0; background: transparent; border: 0; } .credence-npf-card__logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .credence-npf-card__logo img { width: 150px; height: auto; display: block; transition: transform .3s ease; } .credence-npf-card-link:hover .credence-npf-card__logo img { animation: credence-pulse-shrink 0.6s ease; } @keyframes credence-pulse-shrink { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } .credence-npf-card__body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; } .credence-npf-card__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 25px; line-height: 1.15; text-transform: uppercase; color: #e47836; margin: 0 !important; transition: color .25s ease; } .credence-npf-card__btn { margin: 0; } .credence-npf-card-link:hover .credence-npf-card__title { color: #c25c1f; } @media (max-width: 991px) { .credence-npf__grid { grid-template-columns: 1fr; gap: 2.5rem; margin: 2.5rem 0 4rem; } .credence-npf-card { flex-direction: column; align-items: center; gap: 1rem; } .credence-npf-card__body { align-items: center; text-align: center; } } /* ----- Wellness Tips and Tricks (lavender band) ----- */ .credence-wellness { background: rgba(199, 198, 221, 0.65); padding: 32px 0; margin: 0 !important; } .credence-wellness__inner { max-width: 1170px; margin: 0 auto; padding: 0 45px; box-sizing: border-box; } .credence-wellness__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 31.25px; line-height: 1.1; text-transform: uppercase; text-align: center; color: #383838; margin: 0 0 2rem !important; } .credence-wellness__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .credence-wellness-card { position: relative; margin: 0 0 2rem; } .credence-wellness-card__overlay { position: absolute; inset: 0; z-index: 2; display: block; text-indent: -9999px; overflow: hidden; } .credence-wellness-card__image { width: 100%; height: 250px; max-width: 380px; background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 25px; } .credence-wellness-card__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 18.75px; line-height: 1.2; text-transform: uppercase; color: #1a1a1a; margin: 1rem 0 0.5rem !important; transition: color .25s ease; } .credence-wellness-card:hover .credence-wellness-card__title { color: #e57a39; } .credence-wellness-card__summary { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.5; color: #383838; } .credence-wellness-card__summary p { margin: 0; display: inline; } .credence-wellness-card__readmore { display: inline; color: #e57a39; margin-left: 0.25rem; font-weight: 400; } .credence-wellness__more { display: flex; justify-content: center; margin: 1.5rem 0 0; } @media (max-width: 991px) { .credence-wellness__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 600px) { .credence-wellness__grid { grid-template-columns: 1fr; } } /* ----- Certifications & Memberships ----- */ .credence-cert { background: #ffffff; padding: 3rem 0; } .credence-cert__inner { max-width: 1170px; margin: 0 auto; padding: 0 45px; box-sizing: border-box; } .credence-cert__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 31.25px; line-height: 1.1; text-transform: uppercase; text-align: center; color: #383838; margin: 0 0 2rem !important; } .credence-cert__grid { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .credence-cert__item { display: flex; align-items: center; gap: 1rem; margin: 0; font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 1.041875rem; text-transform: uppercase; color: #383838; line-height: 1.2; } .credence-cert__icon { flex: 0 0 25px; width: 25px; height: 25px; object-fit: contain; } .credence-cert__label { flex: 1 1 auto; } @media (max-width: 600px) { .credence-cert__grid { grid-template-columns: 1fr; } } /* ============================================================ PHASE 12 — Share Your Story page (post 18) ============================================================ */ .credence-sys-main { font-family: 'Public Sans','Inter','Sheffield',sans-serif; } /* Live uses an

that visually reads like an H3 — bold black uppercase ~18.75px */ .credence-sys-title { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-weight: 700; font-size: 18.75px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; color: #000000; margin: 60px 0 1rem !important; text-align: left; } .credence-sys-main > p { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.6; color: #383838; margin: 0 0 1rem; } .credence-sys-main > p a { color: #e47836; text-decoration: underline; } .credence-sys-main > p a:hover { color: #000000; } .credence-sys-h3 { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-weight: 700; font-size: 18.75px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; color: #000000; margin: 1.5rem 0 0.75rem !important; text-align: left; } .credence-sys-review-btns { display: flex; align-items: center; gap: 12px; margin: 0.5rem 0 1.5rem; } .credence-sys-review-btns a { display: inline-flex; align-items: center; justify-content: center; line-height: 0; transition: transform .2s ease, opacity .2s ease; } .credence-sys-review-btns a:hover { transform: scale(1.08); opacity: 0.9; } .credence-sys-review-btns img { display: block; width: 35px; height: 35px; /* Tint icons to brand orange #e47836 */ filter: invert(57%) sepia(74%) saturate(553%) hue-rotate(338deg) brightness(91%) contrast(89%); } /* ============================================================ PHASE 13 — Schedule an Assessment page (post 20) ============================================================ */ .credence-sa { background: #ffffff; } .credence-sa__inner { max-width: 1170px; margin: 0 auto; padding: 0 45px; box-sizing: border-box; } /* Centered H1 (Brothers, ~31.25px) */ .credence-sa__title { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 31.25px; line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase; color: #000000; text-align: center; margin: 60px 0 2rem !important; } .credence-sa__lede, .credence-sa__intro, .credence-sa__phone { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.6; color: #383838; margin: 0 0 1rem; } .credence-sa__lede { margin: 0 0 -2rem; } .credence-sa__phone a, .credence-sa__phone a:visited { color: #e47836; text-decoration: underline; } .credence-sa__phone a:hover { color: #000000; } /* Sked calendar embed — responsive aspect-ratio container. Mirrors the vendor's `.sked-portal-container` ratios but taller (75% / 125% / 360%) so the booking portal fits without an internal vertical scrollbar. */ .credence-sa__calendar { position: relative; width: 100%; margin: 4rem 0 2rem; padding-top: 75%; overflow: hidden; } .credence-sa__calendar-iframe, .credence-sa__calendar iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; } .credence-sa__calendar-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; min-height: 820px; background: #f7f5f2; border: 1px dashed #d3cfc7; border-radius: 12px; color: #6b6258; box-sizing: border-box; } .credence-sa__calendar-icon { color: #e47836; margin-bottom: 1rem; } .credence-sa__calendar-text { font-family: 'Brothers','Big Shoulders Display','Oswald','Bebas Neue',sans-serif; font-weight: 400; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; color: #383838; margin: 0 0 0.5rem; } .credence-sa__calendar-sub { font-family: 'Public Sans','Inter',sans-serif; font-size: 14px; color: #6b6258; margin: 0; } @media (max-width: 900px) { .credence-sa__calendar { padding-top: 125%; } } @media (max-width: 750px) { .credence-sa__calendar { padding-top: 360%; } } /* Day One / Day Two headings (uppercase bold) */ .credence-sa__h3 { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-weight: 700; font-size: 18.75px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; color: #000000; margin: 2rem 0 0.75rem !important; text-align: left; } /* Numbered list (1. 2. 3...) */ .credence-sa__list { list-style: decimal; list-style-position: inside; margin: 0 0 1rem !important; padding: 0 0 0 1.25rem !important; } .credence-sa__list li { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.7; color: #383838; margin: 0; padding-left: 0.25rem; } /* =================================================================== PHASE 14 — Service detail pages (CPT `service`, theme v1.6.0) =================================================================== Layout pattern for /services/{slug}/ pages. The banner + 2-col + sidebar wrapper is provided by templates/single-service.html (block template). Post content is a single wp:html block holding only the LEFT column markup (H1 + UVP + CTA + intro + inner-img grid + H2 + paragraphs + bulleted benefits + H3 + paragraphs + FAQ accordion). Reuses: .credence-team-banner, .credence-bts-sidebar, .credence-np-uvp, .credence-faq, .credence-btn--outline (from earlier phases). =================================================================== */ /* Banner — inherits .credence-team-banner sizing; service-specific overrides only. */ .credence-service-banner { min-height: 350px; align-items: flex-end; } .credence-service-banner .wp-block-cover__image-background, .credence-service-banner img.wp-block-cover__image-background { object-fit: cover; object-position: center; } .credence-service-banner .wp-block-cover__inner-container { width: 100%; max-width: 1170px; margin-inline: auto; padding: 0 45px 40px; box-sizing: border-box; } .credence-service-banner .credence-team-banner__title, .credence-service-banner .wp-block-post-title { font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 50px; line-height: 1.05; text-transform: uppercase; color: #383838; margin: 0; letter-spacing: 0.01em; } /* 2-col detail layout — overrides default wp:columns spacing to match live grid. */ .credence-service-detail { padding: 0 30px; } .credence-service-detail__inner.wp-block-columns { max-width: 1140px; margin: 0 auto; padding: 0 15px; gap: 30px; column-gap: 30px; } .credence-service-detail__main { min-width: 0; /* prevent column blowout from long image rows */ } .credence-service-detail__aside { min-width: 0; } /* MAIN COLUMN — replicate live `.content-area` typography from credencechiro.com. */ .credence-service-detail__main h1, .credence-service-detail__main > h1, .credence-service-detail__main > :first-child h1:first-child { font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 1.953125rem; /* 31.25px @ 16px root */ line-height: 1.2; text-transform: uppercase; color: #000000; letter-spacing: 0.01em; /* !important required to beat WP block-editor "first-child margin-block-start:0" rule. */ margin: 60px 0 2rem !important; } .credence-service-detail__main h2 { font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 1.5625rem; /* 25px */ line-height: 1.2; text-transform: uppercase; color: #e47836; letter-spacing: 0.01em; margin: 2.5rem 0 1rem; } .credence-service-detail__main h3 { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-weight: 700; font-size: 1.171875rem; /* 18.75px */ line-height: 1.25; text-transform: uppercase; color: #000000; letter-spacing: 0.01em; margin: 2.5rem 0 1rem; } .credence-service-detail__main p { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.6; color: #383838; letter-spacing: 0; margin: 0 0 1rem; } .credence-service-detail__main p a, .credence-service-detail__main li a { color: #e47836; text-decoration: underline; transition: color .18s ease; } .credence-service-detail__main p a:hover, .credence-service-detail__main li a:hover { color: #000000; } .credence-service-detail__main ul:not(.uvp):not(.credence-faq__list) { margin: 0 0 1.5rem 1.25rem; padding: 0; list-style: disc outside; } .credence-service-detail__main ul:not(.uvp):not(.credence-faq__list) > li { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 300; line-height: 1.6; color: #383838; margin: 0 0 .5rem; } .credence-service-detail__main ul:not(.uvp):not(.credence-faq__list) > li strong { font-weight: 700; color: #000000; } /* UVP stamp-logo bullet list — matches live (.uvp.uvp-callout-1). background-size: auto preserves the native logo aspect ratio so the badge does not get squashed. Padding-left 28px = live spec. */ .credence-service-detail__main ul.uvp, .credence-service-detail__main ul.credence-svc-uvp { list-style: none !important; margin: 0 0 1.5rem !important; padding: 0 !important; } .credence-service-detail__main ul.uvp > li, .credence-service-detail__main ul.credence-svc-uvp > li { font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 16.67px; font-weight: 400; line-height: 1.6; color: #000000; padding: 4px 0 4px 28px; background: url("../images/stamp-logo.jpg") left center / auto 18px no-repeat; margin: 0 0 6px; list-style: none; } /* CTA button row (matches live .feature__buttons + .button--primary). */ .credence-service-detail__main .feature__buttons, .credence-service-detail__main .credence-svc-cta { margin: 1.5rem 0 2rem; } .credence-service-detail__main .feature__buttons a.button, .credence-service-detail__main .feature__buttons a.button--primary, .credence-service-detail__main .credence-svc-cta a { display: inline-block; font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 14.4px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; color: #e47836; background: transparent; border: 1.6px solid #e47836; border-radius: 22px; padding: 12px 28px; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; } .credence-service-detail__main .feature__buttons a.button:hover, .credence-service-detail__main .feature__buttons a.button--primary:hover, .credence-service-detail__main .credence-svc-cta a:hover { background: #e47836; color: #ffffff; transform: translateY(-1px); } /* Inner image pair grid (matches live .row.inner-img). */ .credence-service-detail__main .inner-img, .credence-service-detail__main .credence-svc-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1.5rem 0 2rem; } .credence-service-detail__main .inner-img .col-sm-6, .credence-service-detail__main .credence-svc-imgs > * { min-width: 0; } .credence-service-detail__main .inner-img img, .credence-service-detail__main .credence-svc-imgs img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.08); transition: transform .35s ease, box-shadow .35s ease; } .credence-service-detail__main .inner-img img:hover, .credence-service-detail__main .credence-svc-imgs img:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.14); } /* ============================================================ FAQ — gray-panel variant (matches live .DnnModule-411 #faq-section). Single source of truth for /services/{slug}/ FAQ AND any other page using .credence-faq with the .credence-svc-faq modifier. ============================================================ */ .credence-svc-faq, .credence-service-detail__main .credence-svc-faq { margin: 2.5rem 0 3rem !important; background: #e6e6e6; padding: 40px 60px; border-radius: 40px; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .credence-svc-faq > h2, .credence-service-detail__main .credence-svc-faq > h2 { margin: 0 0 1.5rem !important; font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 1.5625rem; line-height: 1.2; text-transform: uppercase; color: #e47836; letter-spacing: 0.01em; } /* Each item — transparent, NO border-radius. Bottom divider line per question (last item has no divider to avoid double line at panel edge). */ .credence-svc-faq .credence-faq__item, .credence-service-detail__main .credence-svc-faq .credence-faq__item { background: transparent !important; border: 0 !important; border-bottom: 1px solid #c8c8c8 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; overflow: hidden; } .credence-svc-faq .credence-faq__item:last-child, .credence-service-detail__main .credence-svc-faq .credence-faq__item:last-child { border-bottom: 0 !important; } /* Question summary — 16px bold uppercase, chevron absolutely positioned at right. `display: block` overrides the older `.credence-faq__item > summary { display: flex }` rule (line ~2522) which would otherwise treat ::after as a flex item and break absolute positioning. */ .credence-svc-faq .credence-faq__item > summary, .credence-svc-faq .credence-faq__q, .credence-service-detail__main .credence-svc-faq .credence-faq__item > summary, .credence-service-detail__main .credence-svc-faq .credence-faq__q { font-family: 'Public Sans','Inter','Sheffield',sans-serif !important; font-weight: 700 !important; font-size: 16px !important; line-height: 1.4 !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; color: #000000 !important; padding: 20px 52px 20px 0 !important; box-sizing: border-box !important; cursor: pointer; list-style: none; position: relative; background: transparent !important; display: block !important; transition: color .2s ease; } .credence-svc-faq .credence-faq__item > summary::-webkit-details-marker, .credence-service-detail__main .credence-svc-faq .credence-faq__item > summary::-webkit-details-marker { display: none; } .credence-svc-faq .credence-faq__item > summary:hover, .credence-service-detail__main .credence-svc-faq .credence-faq__item > summary:hover { color: #e47836; } /* Chevron — uses the live SVG asset rendered via mask so we can recolor it. Sized 24x24 (Phase 16.1: was 22x22 → user requested +2px). Color is orange #e47836. */ .credence-svc-faq .credence-faq__item > summary::after, .credence-service-detail__main .credence-svc-faq .credence-faq__item > summary::after { content: '' !important; position: absolute !important; right: 10px !important; top: 50% !important; width: 24px !important; height: 24px !important; flex: none !important; background-color: #e47836 !important; background-image: none !important; -webkit-mask-image: url("../images/circle-chevron-up-light.svg") !important; mask-image: url("../images/circle-chevron-up-light.svg") !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; -webkit-mask-size: contain !important; mask-size: contain !important; transform: translateY(-50%) rotate(180deg) !important; transform-origin: center center !important; transition: transform .35s ease, background-color .2s ease !important; } .credence-svc-faq .credence-faq__item[open] > summary::after, .credence-service-detail__main .credence-svc-faq .credence-faq__item[open] > summary::after { transform: translateY(-50%) rotate(0deg) !important; } /* Smooth open animation — grid-template-rows transition lets
animate without JS height calculation. Inner div hides overflow during the transition. */ .credence-svc-faq .credence-faq__a-wrap, .credence-service-detail__main .credence-svc-faq .credence-faq__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .credence-svc-faq .credence-faq__item[open] .credence-faq__a-wrap, .credence-service-detail__main .credence-svc-faq .credence-faq__item[open] .credence-faq__a-wrap { grid-template-rows: 1fr; } .credence-svc-faq .credence-faq__a-inner, .credence-service-detail__main .credence-svc-faq .credence-faq__a-inner { overflow: hidden; min-height: 0; padding: 0; } .credence-svc-faq .credence-faq__item[open] .credence-faq__a-inner, .credence-service-detail__main .credence-svc-faq .credence-faq__item[open] .credence-faq__a-inner { padding: 4px 0 18px; } .credence-svc-faq .credence-faq__a-inner p, .credence-svc-faq .credence-faq__a-inner li, .credence-service-detail__main .credence-svc-faq .credence-faq__a-inner p, .credence-service-detail__main .credence-svc-faq .credence-faq__a-inner li { font-family: 'Public Sans','Inter','Sheffield',sans-serif !important; font-size: 15.5px !important; font-weight: 300 !important; line-height: 1.6 !important; color: #383838 !important; margin: 0 0 .75rem !important; } .credence-svc-faq .credence-faq__a-inner ul, .credence-service-detail__main .credence-svc-faq .credence-faq__a-inner ul { margin: .25rem 0 .75rem 1.25rem !important; list-style: disc outside !important; padding: 0 !important; } /* Sidebar — DO NOT push down with margin-top here. The reusable .credence-bts-formwrap already has margin-top: -45px to overlap the banner (Phase 8 pattern). Just normalize the aside itself. */ .credence-service-detail__aside { padding-top: 0; } .credence-service-detail__aside .credence-bts-sidebar, .credence-service-detail__aside .credence-service-sidebar { margin-top: 0; } /* Responsive: stack columns on tablet & below; banner type scales down. */ @media (max-width: 991px) { .credence-service-detail__inner.wp-block-columns { flex-direction: column; } .credence-service-detail__main, .credence-service-detail__aside { flex-basis: 100% !important; width: 100%; } .credence-service-detail__aside .credence-bts-sidebar, .credence-service-detail__aside .credence-service-sidebar { max-width: 480px; margin: 2rem auto 0; } } @media (max-width: 720px) { .credence-service-banner { min-height: 240px; } .credence-service-banner .wp-block-cover__inner-container { padding: 0 25px 28px; } .credence-service-banner .credence-team-banner__title, .credence-service-banner .wp-block-post-title { font-size: 34px; } .credence-service-detail__main h1 { font-size: 1.6rem; margin: 40px 0 1.25rem; } .credence-service-detail__main .inner-img, .credence-service-detail__main .credence-svc-imgs { grid-template-columns: 1fr; } } /* END PHASE 14 */ /* Banner image: force object-fit cover for wp:cover with useFeaturedImage (no JS required). */ .credence-service-banner > img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .credence-service-banner > .wp-block-cover__background { z-index: 1; } .credence-service-banner > .wp-block-cover__inner-container { position: relative; z-index: 2; } /* Banner image: force object-fit cover for wp:cover with useFeaturedImage (no JS required). */ .credence-service-banner > img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .credence-service-banner > .wp-block-cover__background { z-index: 1; } .credence-service-banner > .wp-block-cover__inner-container { position: relative; z-index: 2; } /* ======================================================================== PHASE 16 — Service detail polish ======================================================================== */ /* Phase 16.1 — Inline icons (neurological page + similar lists). Detail-page content sometimes contains patterns where the SVG icons render at their intrinsic 150x150 (or fill the cell). Force them to a small text-aligned size in primary orange via filter. */ .credence-service-detail__main .neurological-listing > li > img, .credence-service-detail__main ul > li > img[src$=".svg"]:first-child, .credence-service-detail__main ul > li > p > img[src$=".svg"]:first-child { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; display: inline-block !important; vertical-align: -5px; margin-right: 10px; /* Approximate primary orange #e26d25 via filter */ filter: brightness(0) saturate(100%) invert(48%) sepia(57%) saturate(2120%) hue-rotate(354deg) brightness(95%) contrast(85%); } /* Lists holding only icons + strong + short text — drop bullets & padding */ .credence-service-detail__main .neurological-listing { list-style: none !important; padding-left: 0 !important; margin: 1rem 0 1.5rem !important; } .credence-service-detail__main .neurological-listing > li { padding-left: 0 !important; margin: .5rem 0 !important; } .credence-service-detail__main .neurological-listing > li::before { display: none !important; } /* Phase 16.2 — Push sidebar form down so it doesn't crowd the hero H1. The shared .credence-bts-formwrap has margin-top:-45px to overlap the banner on the BTS page; on service detail pages this collides with the hero title. Override it here. */ .credence-service-detail__aside .credence-bts-formwrap, .credence-service-detail__aside.wp-block-column .credence-bts-formwrap { margin-top: 40px !important; } @media (max-width: 991px) { .credence-service-detail__aside .credence-bts-formwrap, .credence-service-detail__aside.wp-block-column .credence-bts-formwrap { margin-top: 16px !important; } } /* Give the hero content area extra bottom breathing room on service detail banners */ .credence-service-banner .wp-block-cover__inner-container { padding-bottom: 56px !important; } @media (max-width: 720px) { .credence-service-banner .wp-block-cover__inner-container { padding-bottom: 32px !important; } } /* END PHASE 16 */ /* =================================================================== PHASE 17 — Task 3: Team member images smaller + aligned to name =================================================================== */ .credence-team-member { grid-template-columns: 160px 1fr !important; gap: 24px !important; align-items: flex-start !important; } .credence-team-member__media { width: 160px; flex-shrink: 0; } .credence-team-member__media img { width: 160px !important; height: 160px !important; object-fit: cover !important; object-position: top center !important; border-radius: 4px !important; } .credence-team-member__name { margin: 0 0 10px !important; padding: 0 !important; } @media (max-width: 900px) { .credence-team-member { grid-template-columns: 1fr !important; } .credence-team-member__media { width: 100%; } .credence-team-member__media img { width: 140px !important; height: 140px !important; margin: 0 auto; display: block; } .credence-team-member__name { text-align: center !important; margin-top: 0.75rem !important; } } /* =================================================================== PHASE 17 — Task 5: Responsive navbar Logo on first row (centered), CTA button + hamburger on second row =================================================================== */ @media (max-width: 768px) { .credence-header { padding: 0.6rem 1rem !important; } .credence-header__inner { flex-wrap: wrap !important; gap: 0.4rem 0.6rem !important; align-items: center !important; } .credence-header__brand { flex: 0 0 100% !important; justify-content: center !important; order: 1; } .credence-header__logo { height: 36px !important; width: auto !important; max-width: none !important; max-height: none !important; } .credence-header__cta { flex: 1 1 auto !important; order: 2; } .credence-header__cta .wp-block-button__link { font-size: 0.76rem !important; padding: 0.45rem 0.85rem !important; white-space: nowrap; } /* Navigation block (hamburger icon) — right side of second row */ .credence-header__inner > .wp-block-navigation.credence-primary-nav { flex: 0 0 auto !important; order: 3; margin-left: auto; } /* Hamburger / close button size */ .credence-primary-nav .wp-block-navigation__responsive-container-open svg, .credence-primary-nav .wp-block-navigation__responsive-container-close svg { width: 28px !important; height: 28px !important; } } /* =================================================================== PHASE 17 — Task 8: Services archive — center FAQ section =================================================================== */ .credence-archive-faqs__title { text-align: center !important; } .credence-archive-faqs { text-align: center; } .credence-archive-faq { text-align: left; /* override so FAQ item text stays left-aligned */ margin-left: auto !important; margin-right: auto !important; } /* =================================================================== PHASE 17 — Task 3: Team member images smaller + aligned to name =================================================================== */ .credence-team-member { grid-template-columns: 160px 1fr !important; gap: 24px !important; align-items: flex-start !important; } .credence-team-member__media { width: 160px; flex-shrink: 0; } .credence-team-member__media img { width: 160px !important; height: 160px !important; object-fit: cover !important; object-position: top center !important; border-radius: 4px !important; } .credence-team-member__name { margin: 0 0 10px !important; padding: 0 !important; } @media (max-width: 900px) { .credence-team-member { grid-template-columns: 1fr !important; } .credence-team-member__media { width: 100%; } .credence-team-member__media img { width: 140px !important; height: 140px !important; margin: 0 auto; display: block; } .credence-team-member__name { text-align: center !important; margin-top: 0.75rem !important; } } /* =================================================================== PHASE 17 — Task 5: Responsive navbar Logo on first row (centered), CTA button + hamburger on second row =================================================================== */ @media (max-width: 768px) { .credence-header { padding: 0.6rem 1rem !important; } .credence-header__inner { flex-wrap: wrap !important; gap: 0.4rem 0.6rem !important; align-items: center !important; } .credence-header__brand { flex: 0 0 100% !important; justify-content: center !important; order: 1; } .credence-header__logo { height: 36px !important; width: auto !important; max-width: none !important; max-height: none !important; } .credence-header__cta { flex: 1 1 auto !important; order: 2; } .credence-header__cta .wp-block-button__link { font-size: 0.76rem !important; padding: 0.45rem 0.85rem !important; white-space: nowrap; } /* Navigation block (hamburger icon) — right side of second row */ .credence-header__inner > .wp-block-navigation.credence-primary-nav { flex: 0 0 auto !important; order: 3; margin-left: auto; } /* Hamburger / close button size */ .credence-primary-nav .wp-block-navigation__responsive-container-open svg, .credence-primary-nav .wp-block-navigation__responsive-container-close svg { width: 28px !important; height: 28px !important; } } /* =================================================================== PHASE 17 — Task 8: Services archive — center FAQ section =================================================================== */ .credence-archive-faqs__title { text-align: center !important; } .credence-archive-faqs { text-align: center; } .credence-archive-faq { text-align: left; /* override so FAQ item text stays left-aligned */ margin-left: auto !important; margin-right: auto !important; } /* =================================================================== PHASE 17 — Task 2: About Us page custom styles =================================================================== */ /* Big H1 title */ .credence-about__h1 { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #000000 !important; margin: 0 0 1.5rem !important; line-height: 1.15 !important; } /* UVP badge list */ .credence-about-uvp { list-style: none !important; padding: 0 !important; margin: 0 0 1.8rem !important; display: flex; flex-direction: column; gap: 0.6rem; } .credence-about-uvp li { display: flex; align-items: center; gap: 0.75rem; font-family: 'Public Sans','Inter',sans-serif; font-size: 0.97rem; font-weight: 600; letter-spacing: 0.03em; color: #383838; } .credence-about-uvp li img { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; } /* CTA button */ .credence-about-cta { margin: 0 0 1.8rem; } .credence-btn-orange { display: inline-block; background: var(--wp--preset--color--primary, #E26D25) !important; color: #ffffff !important; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.75rem 2rem; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .credence-btn-orange:hover { background: var(--wp--preset--color--primary-dark, #B0531A) !important; transform: translateY(-1px); } /* "Who We Are" 2-col */ .credence-about__who-title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important; text-transform: uppercase !important; color: var(--wp--preset--color--primary, #E26D25) !important; letter-spacing: 0.04em !important; margin: 2rem 0 1rem !important; } .credence-about__who-inner { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; } .credence-about__who-media img { width: 100%; height: auto; border-radius: 16px; display: block; } @media (max-width: 900px) { .credence-about__who-inner { grid-template-columns: 1fr; } .credence-about__who-media img { max-width: 400px; margin: 0 auto; } } /* Why Choose FAQ section */ .credence-about-faq .credence-faq__item { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.10); } .credence-about-faq .credence-faq__item:last-child { border-bottom: none; } /* END PHASE 17 ABOUT */ /* =================================================================== PHASE 17 — Task 2: About Us page custom styles =================================================================== */ /* Big H1 title */ .credence-about__h1 { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: #000000 !important; margin: 0 0 1.5rem !important; line-height: 1.15 !important; } /* UVP badge list */ .credence-about-uvp { list-style: none !important; padding: 0 !important; margin: 0 0 1.8rem !important; display: flex; flex-direction: column; gap: 0.6rem; } .credence-about-uvp li { display: flex; align-items: center; gap: 0.75rem; font-family: 'Public Sans','Inter',sans-serif; font-size: 0.97rem; font-weight: 600; letter-spacing: 0.03em; color: #383838; } .credence-about-uvp li img { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; } /* CTA button */ .credence-about-cta { margin: 0 0 1.8rem; } .credence-btn-orange { display: inline-block; background: var(--wp--preset--color--primary, #E26D25) !important; color: #ffffff !important; font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.75rem 2rem; border-radius: 999px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } .credence-btn-orange:hover { background: var(--wp--preset--color--primary-dark, #B0531A) !important; transform: translateY(-1px); } /* "Who We Are" 2-col */ .credence-about__who-title { font-family: 'Brothers','Texas Troupe','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important; text-transform: uppercase !important; color: var(--wp--preset--color--primary, #E26D25) !important; letter-spacing: 0.04em !important; margin: 2rem 0 1rem !important; } .credence-about__who-inner { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; } .credence-about__who-media img { width: 100%; height: auto; border-radius: 16px; display: block; } @media (max-width: 900px) { .credence-about__who-inner { grid-template-columns: 1fr; } .credence-about__who-media img { max-width: 400px; margin: 0 auto; } } /* Why Choose FAQ section */ .credence-about-faq .credence-faq__item { background: #ffffff; border-bottom: 1px solid rgba(0,0,0,0.10); } .credence-about-faq .credence-faq__item:last-child { border-bottom: none; } /* END PHASE 17 ABOUT */ /* =================================================================== PHASE 18.1 — Tasks 1,2,3,4,5,6 (corrections / final) =================================================================== */ /* Task 1 (updated per client feedback): Services archive title. Must stay CENTERED and wrap evenly into balanced lines so "TX" never orphans onto its own line on desktop. `text-wrap: balance` distributes words evenly across lines; the non-breaking space in the markup (Georgetown, TX) is the cross-browser fallback that keeps the city and state together. */ .credence-archive-intro__title { font-family: 'Public Sans','Inter','Segoe UI','Roboto',sans-serif !important; font-size: clamp(1.8rem, 3.2vw, 2.4rem) !important; font-weight: 700 !important; text-align: center !important; text-transform: none !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; text-wrap: balance !important; margin-left: auto !important; margin-right: auto !important; } /* Task 5: About Us main H1 — LEFT aligned (like /services/pediatric-chiropractor/) */ .credence-about__h1 { text-align: left !important; font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important; } /* Task 4: Responsive nav — logo on top row, CTA + hamburger on second row at same level */ @media (max-width: 599px) { .credence-header__inner { flex-wrap: wrap !important; gap: 0.5rem !important; align-items: center !important; } .credence-header__brand { flex: 0 0 100% !important; justify-content: center !important; order: 1 !important; } .credence-header__cta { display: flex !important; align-items: center !important; flex: 1 1 auto !important; order: 2 !important; margin: 0 !important; } .credence-header__cta .wp-block-button.is-style-outline .wp-block-button__link, .credence-header__cta .wp-block-button__link { font-size: 0.62rem !important; padding: 0.4rem 0.7rem !important; white-space: nowrap !important; letter-spacing: 0.05em !important; line-height: 1.1 !important; } .credence-header__inner > .wp-block-navigation.credence-primary-nav { flex: 0 0 auto !important; order: 3 !important; margin-left: 0 !important; } .credence-primary-nav .wp-block-navigation__responsive-container-open { width: 40px !important; height: 40px !important; } .credence-primary-nav .wp-block-navigation__responsive-container-open svg, .credence-primary-nav .wp-block-navigation__responsive-container-close svg { width: 24px !important; height: 24px !important; } /* Hide inline nav links when overlay is not open */ .credence-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container { display: none !important; } .credence-primary-nav .wp-block-navigation__responsive-container.is-menu-open { display: block !important; } } /* Task 6: About Us "Why Choose" — text left-aligned, whole accordion block centered */ .credence-about-faq .credence-faq__q, .credence-about-faq .credence-faq__a-inner, .credence-about-faq .credence-faq__a-inner * { text-align: left !important; justify-content: flex-start !important; } .credence-about-faq { max-width: 880px; margin-left: auto !important; margin-right: auto !important; } /* Task 2: Apex (post 150) — override banner background image with about-us banner */ body.postid-150 .credence-service-banner { background-image: url('../images/about-us-1600-banner.webp') !important; background-size: cover !important; background-position: center center !important; background-color: transparent !important; } body.postid-150 .credence-service-banner > .wp-block-cover__image-background { display: none !important; } body.postid-150 .credence-service-banner > .wp-block-cover__background { background-color: rgba(0,0,0,0.35) !important; opacity: 1 !important; } /* Apex (post 150) — keep client photo gallery proportional, not full content-column width */ body.postid-150 .apex-feature-gallery { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; } /* END PHASE 18.1 */ /* =================================================================== PHASE 18.2 — small banner corrections =================================================================== */ /* Task 1: Apex (post 150) banner H1 — white over dark overlay */ body.postid-150 .credence-service-banner .credence-team-banner__title, body.postid-150 .credence-service-banner .wp-block-post-title, body.postid-150 .credence-service-banner .wp-block-post-title a { color: #ffffff !important; } /* Task 2: /services banner eyebrow — Brothers font + bottom-left aligned like the other page banner titles (1170px container, 45px side padding). */ .credence-archive-banner .wp-block-cover__inner-container { align-items: flex-start !important; justify-content: flex-end !important; max-width: 1170px !important; width: 100% !important; margin-inline: auto !important; padding: 0 45px 40px !important; box-sizing: border-box !important; } .credence-archive-banner__eyebrow { font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif !important; font-weight: 400 !important; font-size: 50px !important; line-height: 1 !important; letter-spacing: 0.02em !important; text-align: left !important; text-shadow: none !important; } @media (max-width: 720px) { .credence-archive-banner .wp-block-cover__inner-container { padding: 0 25px 28px !important; } .credence-archive-banner__eyebrow { font-size: 34px !important; letter-spacing: 0.02em !important; } } /* END PHASE 18.2 */ /* ========================================================= PHASE 25 — Single article (blog + newsletter share single.html) Editorial content (left) + reusable Contact Us sidebar (right), matching the service-detail experience. All titles capped at 32px. ========================================================= */ /* Layout: 2-column shell, content-width matched to the rest of the site. */ .credence-article { padding-left: 24px; padding-right: 24px; } .credence-article__inner.wp-block-columns { max-width: 1140px; margin-inline: auto; gap: 40px; column-gap: 40px; align-items: flex-start; /* keep the sidebar anchored to the top, not stretched */ } .credence-article__main { min-width: 0; } /* prevent long words/images from blowing out the column */ .credence-article__aside { min-width: 0; } /* Dynamic kicker / eyebrow above the title. */ .credence-article__kicker { margin: 0 0 0.75rem; font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark, #B0531A); } /* Title — capped at 32px (2rem) and bold, on-brand Brothers display. */ .credence-article__title { margin: 0 0 0.6rem; font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 700; font-size: clamp(1.55rem, 1.05rem + 2vw, 2rem); /* fluid, never exceeds 32px */ line-height: 1.12; letter-spacing: 0.005em; text-transform: uppercase; color: #000; } /* Publish date — quiet meta line. */ .credence-article__date { margin: 0 0 1.6rem; font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.03em; color: #6b6b6b; } /* Featured image — constrained to the original 480x600 cover proportions. Newsletter covers are 4:5 (1080x1350) so max-width:480px renders them at exactly 480x600; landscape blog images scale down proportionally. */ .credence-article__cover { margin: 0 0 1.85rem; max-width: 480px; } .credence-article__cover img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(0,0,0,0.45); } /* Body content — keep inline media inside the column. */ .credence-article__body > *:first-child { margin-top: 0; } .credence-article__body img { max-width: 100%; height: auto; } /* Sidebar — neutralise the banner-overlap offset (there is no banner here). */ .credence-article__aside .credence-bts-formwrap { margin-top: 0; } /* Responsive: stack to a single column on tablet & below. */ @media (max-width: 991px) { .credence-article__inner.wp-block-columns { flex-direction: column; gap: 2.5rem; } .credence-article__main, .credence-article__aside { flex-basis: 100% !important; width: 100%; } .credence-article__aside .credence-bts-sidebar { max-width: 480px; margin-inline: auto; } } /* ---- Newsletter archive intro (page 13) ---- */ .credence-nl-archive__head { max-width: 760px; margin: 0 auto; text-align: center; } .credence-nl-archive__title { margin: 0.5rem 0 1.1rem; font-family: 'Brothers','Big Shoulders Display','Bebas Neue','Oswald',sans-serif; font-weight: 700; font-size: clamp(1.55rem, 1.05rem + 2vw, 2rem); /* capped at 32px */ line-height: 1.12; letter-spacing: 0.005em; text-transform: uppercase; color: #000; } .credence-nl-archive__lede { margin: 0 auto 1rem; max-width: 680px; font-family: 'Public Sans','Inter','Sheffield',sans-serif; font-size: 1.0625rem; font-weight: 300; line-height: 1.6; color: #383838; } /* ---- Newsletter grid: smaller, uniform thumbnails (match blog cards' 4:3) ---- */ .credence-nl-grid .credence-blog-card__media { aspect-ratio: 4 / 3; } /* ---- Blog archive (index.html): force 3-per-row, responsive ---- */ .credence-archive-heading { font-size: clamp(1.55rem, 1.05rem + 2vw, 2rem) !important; /* capped at 32px */ line-height: 1.12; } .credence-blog-grid.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.85rem; } @media (max-width: 991px) { .credence-blog-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { .credence-blog-grid.is-layout-grid { grid-template-columns: 1fr !important; } } /* END PHASE 25 */