/** * Campbell Asset Management - Global Styles * Block-specific styles are in assets/css/blocks/ */ /* ========================================================================== Design tokens — shared animation & color values ========================================================================== */ :root { /* Interactive colors (alias theme.json palette) */ --cam-blue: var(--wp--preset--color--cfp-blue); --cam-blue-dark: var(--wp--preset--color--primary); --cam-hover-lift: translateY(-2px); --cam-active-settle: translateY(0); /* Shared transition */ --cam-ease: cubic-bezier(0.4, 0, 0.2, 1); --cam-duration: 0.25s; /* Glow shadows */ --cam-shadow-hover: 0 4px 14px rgba(31, 125, 207, 0.4); --cam-shadow-active: 0 2px 6px rgba(31, 125, 207, 0.3); --cam-shadow-outline-hover: 0 4px 14px rgba(17, 114, 186, 0.35); --cam-shadow-outline-active: 0 2px 6px rgba(17, 114, 186, 0.25); } /* Smooth scrolling + prevent horizontal overflow */ html { scroll-behavior: smooth; overflow-x: hidden; } /* Balance text wrap utility */ .text-balance { text-wrap: balance; } /* ========================================================================== Global button hover effects ========================================================================== */ /* Solid fills */ .wp-block-button:not(.is-style-outline) .wp-block-button__link { transition: transform var(--cam-duration) var(--cam-ease), box-shadow var(--cam-duration) var(--cam-ease), background-color var(--cam-duration) ease; &:hover { transform: var(--cam-hover-lift); box-shadow: var(--cam-shadow-hover); } &:active { transform: var(--cam-active-settle); box-shadow: var(--cam-shadow-active); } } /* Outline variant */ .wp-block-button.is-style-outline .wp-block-button__link { transition: transform var(--cam-duration) var(--cam-ease), box-shadow var(--cam-duration) var(--cam-ease), background-color var(--cam-duration) ease, color var(--cam-duration) ease; &:hover { transform: var(--cam-hover-lift); background-color: var(--wp--preset--color--cfp-blue) !important; color: var(--wp--preset--color--white) !important; box-shadow: var(--cam-shadow-outline-hover); } &:active { transform: var(--cam-active-settle); box-shadow: var(--cam-shadow-outline-active); } } /* All CTA buttons - consistent sizing and center text */ .cta-button .wp-block-button__link { justify-content: center; text-align: center; } /* ========================================================================== Navigation styles ========================================================================== */ .wp-block-navigation .wp-block-navigation-item a { transition: color var(--cam-duration) var(--cam-ease); &:hover { color: var(--wp--preset--color--light-blue) !important; } } /* ========================================================================== Header — sticky + frosted glass ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 1000; margin: 0 !important; & > * { margin: 0 !important; } .header-main { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25); border-bottom: none; margin: 0 !important; } } /* Remove default WordPress spacing on header template part */ .wp-site-blocks > header.wp-block-template-part { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================================== Navigation - CTA link styled as button ========================================================================== */ /* * When the mobile nav overlay is open, WP adds "has-modal-open" to . * We must neutralize every property on header ancestors that creates a * containing block for position:fixed (trapping the overlay inside the header). */ html.has-modal-open .site-header { z-index: auto; contain: none !important; will-change: auto !important; .header-main { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; filter: none !important; perspective: none !important; contain: none !important; will-change: auto !important; } } /* * Override WordPress's default 600px mobile nav breakpoint to 1050px. * Between 600–1050px, keep the hamburger visible and nav links hidden. */ @media (min-width: 600px) and (max-width: 1049px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* Style the Schedule Consultation nav link as a button */ .wp-block-navigation .wp-block-navigation-item.header-cta-link a { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--white) !important; padding: 13px var(--wp--preset--spacing--40); border-radius: 6px; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; transition: transform var(--cam-duration) var(--cam-ease), box-shadow var(--cam-duration) var(--cam-ease), background-color var(--cam-duration) ease; &:hover { transform: var(--cam-hover-lift); box-shadow: var(--cam-shadow-hover); color: var(--wp--preset--color--white) !important; } &:active { transform: var(--cam-active-settle); box-shadow: var(--cam-shadow-active); } } /* Inside mobile nav overlay, make the CTA link full-width and centered */ .wp-block-navigation__responsive-container.is-menu-open .header-cta-link { width: 100% !important; max-width: 400px !important; align-self: center !important; .wp-block-navigation-item__content { display: block !important; width: 100% !important; text-align: center !important; padding: 13px var(--wp--preset--spacing--40) !important; } } .mobile-client-login-wrapper { display: none; } /* Responsive header adjustments */ @media (max-width: 1050px) { .header-logo img { width: 150px !important; } } /* ========================================================================== Global responsive ========================================================================== */ /* Mobile: all CTA buttons span full width, capped at a max-width */ @media (max-width: 600px) { .cta-button { width: 100%; .wp-block-button__link { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; display: block; } } } @media (max-width: 781px) { /* Reduce section side padding on mobile */ main.wp-block-group > .wp-block-group:not(.team-section), main.wp-block-group > .wp-block-cover, .site-header .header-main { padding-left: var(--wp--preset--spacing--20) !important; padding-right: var(--wp--preset--spacing--20) !important; } .wp-block-columns { flex-direction: column; &.text-image-columns { display: flex !important; flex-direction: column !important; & > .wp-block-column.image-column { order: -1 !important; } } } .wp-block-column { flex-basis: 100% !important; } } /* ========================================================================== Focus styles for accessibility ========================================================================== */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible, summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* Keep :focus for older browsers / forced-colors */ a:focus, button:focus, .wp-block-button__link:focus, summary:focus { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* SVG icon alignment */ .wp-block-group svg { display: block; } /* ========================================================================== Office photo caption ========================================================================== */ .office-photo .wp-element-caption { margin-top: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--stat-label); font-weight: 500; text-align: left; } /* ========================================================================== Footer ========================================================================== */ /* Remove template-level gap above footer */ .wp-site-blocks > footer.wp-block-template-part { margin-top: 0 !important; } footer { ul { list-style: none; padding-left: 0; margin: 0; } li { padding: var(--wp--preset--spacing--05) 0; } a { transition: color var(--cam-duration) var(--cam-ease); &:hover { color: var(--wp--preset--color--light-blue) !important; } } } .footer-columns { display: grid !important; grid-template-columns: 1.2fr 1fr 1.2fr; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); @media (max-width: 900px) { grid-template-columns: 1fr 1fr; } @media (max-width: 500px) { grid-template-columns: 1fr; } } /* Utility: hide blocks/elements until client provides content. Add .is-hidden-until-ready to any block or element to hide it. Remove the class when it's ready to go live. */ .is-hidden-until-ready { display: none !important; } /* ========================================================================== Split Button v2 (CodyHouse) — Client Login dropdown ========================================================================== */ .split-btn-v2 { position: relative !important; z-index: 1; display: inline-flex !important; } .split-btn-v2 .split-btn-v2__btn { position: relative; z-index: 1; display: inline-flex !important; justify-content: center; align-items: center; gap: 0.5rem; white-space: nowrap; text-decoration: none !important; border: none !important; border-radius: 6px; padding: 13px 24px !important; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.2; color: var(--wp--preset--color--primary); background: transparent !important; cursor: pointer; transition: var(--cam-duration) var(--cam-ease); box-shadow: none !important; } .split-btn-v2 .split-btn-v2__btn:hover .split-btn-v2__btn-icon { transform: translateY(1px); } .split-btn-v2 .split-btn-v2__btn:hover ~ .split-btn-v2__morph-bg { background: #f8fafc !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(15, 23, 43, 0.05), 0 1px 2px rgba(15, 23, 43, 0.05) !important; } .split-btn-v2 .split-btn-v2__btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent) !important; outline-offset: 2px !important; } .split-btn-v2 .split-btn-v2__btn:focus-visible ~ .split-btn-v2__morph-bg { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(15, 23, 43, 0.05), 0 1px 3px rgba(15, 23, 43, 0.1), 0 0 0 2px #fff, 0 0 0 4px #334155 !important; } .split-btn-v2 .split-btn-v2__btn:active { transform: translateY(2px); } .split-btn-v2 .split-btn-v2__btn-icon { transition: var(--cam-duration) var(--cam-ease); } .split-btn-v2 .split-btn-v2__list-wrapper { position: absolute !important; z-index: 1; top: 0; left: 0; width: max-content; min-width: 100%; padding: 4px; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.2s; } .split-btn-v2 .split-btn-v2__list { display: flex !important; flex-direction: column !important; gap: 2px; padding: 6px !important; transform: scale(0.5); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .split-btn-v2 .split-btn-v2__list-item { position: relative; display: flex !important; gap: 8px; align-items: center; justify-content: flex-start; line-height: 1; font-weight: 500; white-space: nowrap; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--primary) !important; padding: 10px 16px !important; border-radius: 4px; cursor: pointer; background: none !important; border: none !important; box-shadow: none !important; font-family: inherit; text-decoration: none !important; svg { flex-shrink: 0; } } .split-btn-v2 .split-btn-v2__list-item:hover { transform: none !important; filter: none !important; } .split-btn-v2 .split-btn-v2__list-item::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: scale(0.95); transition: 0.2s; } .split-btn-v2 .split-btn-v2__list-item:hover::after { transform: scale(1); background-color: rgba(15, 23, 43, 0.075); } .split-btn-v2 .split-btn-v2__list-item:focus-visible { outline: 2px solid var(--wp--preset--color--accent) !important; outline-offset: -2px !important; background-color: rgba(21, 93, 252, 0.15) !important; color: var(--wp--preset--color--accent) !important; } /* Morphing background */ .split-btn-v2 > .split-btn-v2__morph-bg { display: block !important; position: absolute !important; top: 0; left: 0; height: 100%; width: 100%; border-radius: 6px; pointer-events: none !important; transform-origin: left top; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(15, 23, 43, 0.05), 0 1px 3px rgba(15, 23, 43, 0.1) !important; transition: box-shadow 0.2s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, height, width; } /* Header-specific: style as blue CTA */ .header-cta-button.split-btn-v2 .split-btn-v2__btn { color: #ffffff !important; } .header-cta-button.split-btn-v2 > .split-btn-v2__morph-bg { background-color: var(--wp--preset--color--secondary) !important; box-shadow: 0 1px 3px rgba(15, 23, 43, 0.2) !important; } .header-cta-button.split-btn-v2 .split-btn-v2__btn:hover ~ .split-btn-v2__morph-bg { background-color: #1a6ab8 !important; box-shadow: var(--cam-shadow-hover) !important; } .header-cta-button.split-btn-v2 .split-btn-v2__list-item { color: var(--wp--preset--color--primary) !important; } /* Ensure split button dropdown is above header glass + allow overflow */ .header-cta-button.split-btn-v2 { z-index: 10; overflow: visible !important; } /* Allow the header to show overflowing dropdown */ .site-header, .site-header .header-main, .site-header .header-main > .wp-block-group { overflow: visible !important; } /* Expanded state - MUST come after base styles to win the cascade */ .split-btn-v2.split-btn-v2--expanded .split-btn-v2__btn { opacity: 0 !important; pointer-events: none !important; } .split-btn-v2.split-btn-v2--expanded .split-btn-v2__list-wrapper { opacity: 1 !important; pointer-events: auto !important; background: #ffffff; border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 43, 0.15); } .split-btn-v2.split-btn-v2--expanded .split-btn-v2__list { transform: scale(1) !important; } .split-btn-v2.split-btn-v2--expanded .split-btn-v2__morph-bg { opacity: 0 !important; } /* Hide split button on mobile (shown in mobile nav overlay instead) */ @media (max-width: 1049px) { .header-cta-button.split-btn-v2 { display: none !important; } .wp-block-navigation__responsive-container.is-menu-open .mobile-client-login-wrapper { display: flex; justify-content: center; width: 100%; margin-top: var(--wp--preset--spacing--20); } .wp-block-navigation__responsive-container.is-menu-open .mobile-client-login { display: block !important; width: 100%; max-width: 400px; } .wp-block-navigation__responsive-container.is-menu-open .mobile-client-login .split-btn-v2__btn { width: 100%; justify-content: center; } .wp-block-navigation__responsive-container.is-menu-open .mobile-client-login .split-btn-v2__list-wrapper { left: 0; right: 0; } } /* ========================================================================== Print styles ========================================================================== */ @media print { header.wp-block-template-part, footer.wp-block-template-part { display: none; } }