/** * Sterling component styles * --------------------------------------------------------------------------- * Global tokens (colour, type, spacing) live in theme.json and arrive here as * --wp--preset--* custom properties. This file only holds component styles that * theme.json cannot express. * * Contents * 1. Local aliases and base * 2. Utility: section rhythm, eyebrow, reveal animation * 3. Buttons * 4. Header, navigation, mobile menu * 5. Mobile action bar * 6. Cards (service, office, post, team) * 7. Navy bands * 8. Team grid and team strip * 9. FAQ accordion * 10. Forms * 11. Footer * 12. Reduced motion and print * * @package Sterling * @version 1.0.0 */ /* ======================================================================== 1. Local aliases and base ======================================================================== */ :root { --st-navy: var(--wp--preset--color--navy, #004459); --st-teal: var(--wp--preset--color--teal, #146C84); --st-gold: var(--wp--preset--color--gold, #C49A45); --st-gold-deep: var(--wp--preset--color--gold-deep, #B0863C); --st-gold-soft: var(--wp--preset--color--gold-soft, #FAF3E2); --st-paper: var(--wp--preset--color--paper, #FAFCFA); --st-ink: var(--wp--preset--color--ink, #1E2326); --st-grey: var(--wp--preset--color--grey, #5E6566); --st-line: var(--wp--preset--color--line, #E2E8E7); --st-radius-sm: 10px; --st-radius-md: 16px; --st-radius-lg: 20px; --st-shadow-card: 0 16px 36px rgba(0, 68, 89, 0.09); --st-shadow-soft: 0 12px 28px rgba(0, 68, 89, 0.08); --st-transition: 0.18s ease; --st-header-height: 76px; } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Skip link. Visible the moment it receives focus. */ .sterling-skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.85rem 1.4rem; background: var(--st-navy); color: #fff; font-weight: 700; border-radius: 0 0 var(--st-radius-sm) 0; text-decoration: none; } .sterling-skip-link:focus { left: 0; } /* Images never overflow or shift layout. */ img { max-width: 100%; height: auto; } /* ======================================================================== 2. Utilities ======================================================================== */ /* Standard vertical rhythm for a full-width section. */ .st-section { padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); } .st-section--tight { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); } /* Small uppercase label above a heading. Rationed: at most one per three sections. */ .st-eyebrow { display: inline-block; font-family: var(--wp--preset--font-family--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-teal); margin: 0 0 0.7rem; } /* Card label. A second, distinct eyebrow the original uses inside cards: display face, gold, tighter tracking. Do not merge with .st-eyebrow. */ .st-card-label { display: inline-block; font-family: var(--wp--preset--font-family--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-gold-deep); margin: 0; } .st-band .st-eyebrow, .has-navy-background-color .st-eyebrow { color: var(--st-gold); } /* Comfortable reading measure for long-form body copy. */ .st-measure { max-width: 65ch; } /* Scroll reveal. Hiding is gated behind the .js class that sterling.js adds to , so with no JavaScript, a blocked script, a crawler or print, everything renders visible. */ .js .st-reveal { opacity: 0; transform: translateY(14px); } .js .st-reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; } /* ======================================================================== 3. Buttons ======================================================================== */ .wp-block-button__link { display: inline-block; transition: background-color var(--st-transition), color var(--st-transition), border-color var(--st-transition), transform var(--st-transition); } .wp-block-button__link:active { transform: translateY(1px); } /* Secondary: navy outline on a light ground. */ .is-style-st-outline .wp-block-button__link, .wp-block-button.is-style-st-outline .wp-block-button__link { background: transparent; color: var(--st-navy); border: 1.5px solid var(--st-line); } .is-style-st-outline .wp-block-button__link:hover { border-color: var(--st-navy); background: transparent; color: var(--st-navy); transform: translateY(-1px); } /* Secondary on a navy ground. */ .is-style-st-outline-light .wp-block-button__link, .wp-block-button.is-style-st-outline-light .wp-block-button__link { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.45); } .is-style-st-outline-light .wp-block-button__link:hover { background: #fff; color: var(--st-navy); border-color: #fff; } /* ======================================================================== 4. Header and navigation ======================================================================== */ .st-header { position: sticky; top: 0; z-index: 90; background: rgba(250, 252, 250, 0.9); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .st-header.is-scrolled { border-bottom-color: var(--st-line); box-shadow: 0 6px 22px rgba(0, 68, 89, 0.07); } .st-header .wp-block-site-logo img, .st-header .st-logo img { height: 46px; width: auto; display: block; } /* Navigation links */ .st-header .wp-block-navigation { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: 0.95rem; } .st-header .wp-block-navigation-item__content { color: var(--st-ink); text-decoration: none; padding: 0.2rem 0; white-space: nowrap; } .st-header .wp-block-navigation-item__content:hover, .st-header .wp-block-navigation-item__content:focus-visible { color: var(--st-gold-deep); } /* Gold bar sliding in under the hovered link, staying full on the current page, exactly as the original .nav a::after. Top-level items only; submenu links keep their tinted hover instead. */ .st-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; } .st-header .wp-block-navigation .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: var(--st-gold); transition: width 0.22s ease; } .st-header .wp-block-navigation .wp-block-navigation-item__content:hover::after, .st-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible::after, .st-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after, .st-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after { width: 100%; } /* Dropdown links sit on their own padded row; the bar hugs the text row edge. */ .st-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { bottom: 2px; left: 0.85rem; right: 0.85rem; width: auto; max-width: 0; transition: max-width 0.22s ease; } .st-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after, .st-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible::after { max-width: 100%; width: auto; } /* Inside the mobile overlay the bar is off; tap targets carry the state. */ .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { content: none; } @media (prefers-reduced-motion: reduce) { .st-header .wp-block-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after { transition: none; } } /* Submenu panel */ .st-header .wp-block-navigation__submenu-container { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-radius-md); box-shadow: var(--st-shadow-soft); padding: 0.5rem; min-width: 232px; } .st-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 0.6rem 0.8rem; border-radius: 8px; font-weight: 500; } .st-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--st-gold-soft); color: var(--st-navy); } /* Phone link in the header */ .st-header-phone { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.94rem; color: var(--st-navy); white-space: nowrap; } .st-header-phone:hover { color: var(--st-gold-deep); } @media (max-width: 430px) { .st-header-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .st-header-phone { border: 1px solid var(--st-line); border-radius: 9px; width: 44px; height: 44px; justify-content: center; } } /* Visible focus everywhere in the header. */ .st-header a:focus-visible, .st-header button:focus-visible { outline: 2px solid var(--st-gold); outline-offset: 2px; border-radius: 4px; } /* ======================================================================== 5. Mobile action bar ======================================================================== */ .st-mobile-bar { display: none; } @media (max-width: 760px) { .st-mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--st-line); box-shadow: 0 -6px 22px rgba(0, 68, 89, 0.08); } .st-mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.85rem 0.6rem; border-radius: var(--st-radius-sm); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.95rem; text-decoration: none; min-height: 44px; } .st-mobile-bar .st-mb-call { background: var(--st-navy); color: #fff; } .st-mobile-bar .st-mb-book { background: var(--st-gold); color: var(--st-navy); } /* Reserve room so the bar never covers the end of the footer. */ body { padding-bottom: 76px; } } /* ======================================================================== 6. Cards ======================================================================== */ .st-card { background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-radius-md); padding: 2rem 1.8rem; height: 100%; display: flex; flex-direction: column; transition: transform var(--st-transition), box-shadow var(--st-transition), border-color var(--st-transition); } /* Only lift cards that are actually a link or contain one. */ .st-card--link:hover, .st-card:has(a:hover) { transform: translateY(-3px); box-shadow: var(--st-shadow-card); border-color: var(--st-gold); } .st-card:has(a:focus-visible) { border-color: var(--st-gold); box-shadow: var(--st-shadow-card); } .st-card h3, .st-card h4 { color: var(--st-navy); } .st-card h3 { font-size: 1.32rem; margin: 0.5rem 0 0; } .st-card p { margin: 0.6rem 0 0; flex: 1; font-size: 1rem; } /* Small tinted icon chip used at the top of service and feature cards. */ .st-icon-chip { width: 42px; height: 42px; border-radius: 11px; background: var(--st-gold-soft); color: var(--st-gold-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } /* ======================================================================== 7. Navy bands ======================================================================== */ .st-band { background: var(--st-navy); color: #fff; border-radius: var(--st-radius-lg); padding: clamp(2rem, 4vw, 3rem); } .st-band h2, .st-band h3 { color: #fff; } .st-band p, .st-band li { color: #DBE5E8; } .st-band a:not(.wp-block-button__link) { color: #fff; text-decoration: none; border-bottom: 1px solid var(--st-gold); } /* Checklist used inside navy bands. */ .st-band .st-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 2rem; } .st-band .st-checklist li { padding-left: 1.7rem; position: relative; color: #EAF0F1; } .st-band .st-checklist li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--st-gold); border-bottom: 2px solid var(--st-gold); transform: rotate(-45deg); } @media (max-width: 860px) { .st-band .st-checklist { grid-template-columns: 1fr; } } /* ======================================================================== 8. Team ======================================================================== */ .st-team-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; border-radius: var(--st-radius-md); } .st-team-role { font-family: var(--wp--preset--font-family--display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-gold-deep); } /* Stacked avatar teaser strip. */ .st-team-strip { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem; background: #fff; border: 1px solid var(--st-line); border-radius: var(--st-radius-md); flex-wrap: wrap; } .st-team-strip .st-faces { display: flex; flex: none; align-items: center; } .st-team-strip .st-faces .wp-block-image { margin: 0 0 0 -14px; line-height: 0; } .st-team-strip .st-faces .wp-block-image:first-child { margin-left: 0; } @media (max-width: 760px) { .st-team-strip .st-faces img { width: 46px; height: 46px; } } .st-team-strip .st-faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 68, 89, 0.12); display: block; } @media (max-width: 760px) { .st-team-strip { flex-direction: column; align-items: flex-start; gap: 0.9rem; } .st-team-strip .st-faces img { width: 46px; height: 46px; } } /* ======================================================================== 9. FAQ accordion Built on native
, so it is keyboard accessible and works with no JS. ======================================================================== */ .st-faq { max-width: 820px; } .st-faq .wp-block-details { border-bottom: 1px solid var(--st-line); padding: 1.15rem 0; } .st-faq .wp-block-details summary { font-family: var(--wp--preset--font-family--display); color: var(--st-navy); font-size: 1.08rem; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .st-faq .wp-block-details summary::-webkit-details-marker { display: none; } .st-faq .wp-block-details summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-top: 0.35rem; border-right: 2px solid var(--st-gold-deep); border-bottom: 2px solid var(--st-gold-deep); transform: rotate(45deg); transition: transform var(--st-transition); } .st-faq .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: 0.6rem; } .st-faq .wp-block-details summary:focus-visible { outline: 2px solid var(--st-gold); outline-offset: 3px; } .st-faq .wp-block-details p { margin: 0.55rem 0 0; color: var(--st-grey); } /* ======================================================================== 10. Forms Styles target generic form elements so they apply to whichever form plugin block is placed, without the pattern needing to know the plugin. ======================================================================== */ .st-form input[type="text"], .st-form input[type="email"], .st-form input[type="tel"], .st-form select, .st-form textarea, .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container select, .wpforms-container textarea { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); font: inherit; background: #fff; color: var(--st-ink); } .st-form textarea, .wpforms-container textarea { min-height: 130px; resize: vertical; } .st-form input:focus, .st-form select:focus, .st-form textarea:focus, .wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus { outline: 2px solid var(--st-gold); outline-offset: 1px; border-color: var(--st-gold); } .st-form label, .wpforms-container .wpforms-field-label { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 0.92rem; color: var(--st-navy); margin-bottom: 0.35rem; } /* Required marker is not colour-only. */ .wpforms-container .wpforms-required-label { color: var(--st-gold-deep); } /* The standing privacy notice that sits above every form. */ .st-form-notice { background: var(--st-gold-soft); border-left: 3px solid var(--st-gold); border-radius: 0 var(--st-radius-sm) var(--st-radius-sm) 0; padding: 1rem 1.15rem; font-size: 0.94rem; line-height: 1.6; color: var(--st-ink); margin-bottom: 1.5rem; } .st-form-notice p { margin: 0; color: inherit; } /* Placeholder shown where a form plugin block will be inserted. */ .st-form-placeholder { border: 2px dashed var(--st-line); border-radius: var(--st-radius-md); padding: 2rem 1.5rem; text-align: center; color: var(--st-grey); background: #fff; } /* Newsletter form sitting on a navy band. */ .st-band .st-form input[type="email"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .st-band .st-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.6); } .st-band .st-form label { color: #fff; } /* ======================================================================== 11. Footer ======================================================================== */ .st-footer { background: var(--st-navy); color: #fff; } .st-footer h2, .st-footer h3, .st-footer h4 { color: #fff; } .st-footer p, .st-footer li { color: #C6D5D9; } .st-footer a { color: #E8EFF1; text-decoration: none; } .st-footer a:hover, .st-footer a:focus-visible { color: #fff; text-decoration: underline; } .st-footer a:focus-visible { outline: 2px solid var(--st-gold); outline-offset: 3px; border-radius: 3px; } .st-footer .st-footer-heading { font-family: var(--wp--preset--font-family--display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--st-gold); margin: 0 0 0.9rem; } .st-footer .st-legal { font-size: 0.86rem; line-height: 1.6; color: #A9BFC5; } .st-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; transition: background-color var(--st-transition), border-color var(--st-transition); } .st-footer-social a:hover { background: var(--st-gold); border-color: var(--st-gold); color: var(--st-navy); } /* Hide the header portal button once the nav collapses, so the row stays on one line. The same link is repeated inside the mobile overlay menu and in the footer, so nothing becomes unreachable. */ @media (max-width: 1080px) { .st-header-cta { display: none; } } /* The overlay menu opens as a full panel on small screens. Give its links room to be tapped and keep them left aligned rather than centred. */ .st-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; } .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 0.75rem 0; font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; } .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { border: 0; box-shadow: none; padding-left: 0.9rem; } /* Footer link columns render as plain stacked links, not bulleted lists. */ .st-footer .st-footer-list { list-style: none; padding-left: 0; margin: 0; } .st-footer .st-footer-list li { margin: 0; } /* ======================================================================== 11b. Home page components ======================================================================== */ /* Hero. A soft gold wash behind the top of the page, no image required. */ .st-hero { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); } /* Concentric teal and gold arcs behind the top right of the hero, drawn as a decorative SVG exactly as the original site does. Hidden from assistive tech. */ .st-hero-swirl { position: absolute; right: -14%; top: -30%; width: 760px; height: 760px; pointer-events: none; opacity: 0.5; z-index: 0; } .st-hero > *:not(.st-hero-swirl) { position: relative; z-index: 1; } /* Short gold rule under the hero headline. */ .st-rule-gold { width: 46px; height: 3px; border: 0; border-radius: 3px; background: var(--st-gold); margin: 1.1rem 0 1.3rem; opacity: 1; } /* Hero supporting points. Ticked, not bulleted. */ .st-marks { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--st-line); } .st-marks li { position: relative; padding-left: 1.5rem; font-size: 0.93rem; font-weight: 500; color: var(--st-ink); } .st-marks li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.7rem; height: 0.36rem; border-left: 2px solid var(--st-gold-deep); border-bottom: 2px solid var(--st-gold-deep); transform: rotate(-45deg); } .st-ticks li::before { content: ""; flex: none; width: 0.8rem; height: 0.45rem; margin-top: 0.5em; border-left: 1.8px solid var(--st-gold-deep); border-bottom: 1.8px solid var(--st-gold-deep); transform: rotate(-45deg); } .st-ticks { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; } .st-ticks li { display: flex; gap: 0.7rem; font-size: 0.97rem; color: var(--st-grey); line-height: 1.55; } /* The benefits card in the right hero column. */ .st-trust-card { background: #fff; border-radius: 18px; padding: 2rem 1.9rem; box-shadow: 0 26px 54px -36px rgba(0, 68, 89, 0.45); } .st-trust-card h2 { color: var(--st-ink); } /* Audience chooser doors. */ .st-fork { border-top: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); } .st-door { display: block; padding: 1.1rem 1.3rem; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-paper); height: 100%; transition: border-color var(--st-transition), transform var(--st-transition), box-shadow var(--st-transition); } .st-door:has(a:hover), .st-door:has(a:focus-visible) { border-color: var(--st-gold); transform: translateY(-2px); box-shadow: var(--st-shadow-soft); } .st-door h2 a { text-decoration: none; color: var(--st-navy); } /* Make the whole door clickable without nesting links. */ .st-door h2 a::after { content: ""; position: absolute; inset: 0; } .st-door { position: relative; } .st-door::after { content: "\2192"; margin-left: auto; color: var(--st-navy); font-weight: 700; flex: none; } .st-door-txt { min-width: 0; flex: 1; } .st-door-txt h2 a { color: var(--st-navy); text-decoration: none; } /* Numbered process steps. */ .st-step { height: 100%; padding-top: 1.5rem; border-top: 2px solid var(--st-gold-soft); } .st-step-num { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 700; color: var(--st-gold-deep); margin: 0; } /* The read-more line at the bottom of a service card. */ .st-card-go { margin-top: auto; padding-top: 1.1rem; } .st-card-go a { color: var(--st-navy); font-size: 0.92rem; font-weight: 600; text-decoration: none; } .st-card-go a::after { content: " \2192"; } .st-card-go a:hover { color: var(--st-gold-deep); } /* Make the whole service card clickable via its read-more link. */ .st-card--link { position: relative; } .st-card--link .st-card-go a::before { content: ""; position: absolute; inset: 0; } /* Team strip copy column. */ .st-ts-copy { flex: 1; min-width: 0; } .st-ts-copy a { color: var(--st-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--st-gold); } /* A tinted full-width section, used to separate the individuals block. */ .st-tint { background: var(--st-gold-soft); } .st-tint .st-card, .st-tint .st-team-strip { background: #fff; } /* Audience marker pill. */ .st-aud-marker { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.45rem 1.15rem 0.45rem 0.45rem; background: var(--st-navy); border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 68, 89, 0.14); margin: 0 0 1rem; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; line-height: 1.4; } @media (max-width: 781px) { .st-marks { gap: 0.5rem 1rem; } } /* ======================================================================== 12. Reduced motion and print ======================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .st-reveal, .js .st-reveal.is-visible { opacity: 1; transform: none; transition: none; } .st-card, .wp-block-button__link, .st-faq .wp-block-details summary::after { transition: none; } .st-card--link:hover, .st-card:has(a:hover) { transform: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @media print { .st-header, .st-mobile-bar, .st-footer { display: none; } .js .st-reveal { opacity: 1; transform: none; } } /* ======================================================================== 13. Icon treatments carried over from the original site ======================================================================== */ /* Gold disc holding the icon inside the navy audience marker pill. */ .st-am-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--st-gold); color: var(--st-navy); display: flex; align-items: center; justify-content: center; flex: none; } .st-am-label { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; line-height: 1; } /* Tinted square chip holding the icon in each chooser door. */ .st-fork-ico { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--st-gold-soft); color: var(--st-gold-deep); display: flex; align-items: center; justify-content: center; } /* Small check and tick glyphs sit inline before their text. */ .st-marks li svg, .st-ticks li svg { position: absolute; left: 0; top: 0.15em; color: var(--st-gold-deep); } /* Hero intro paragraph. */ .st-lede { font-size: 1.2rem; color: var(--st-grey); margin-bottom: 1.9rem; } @media (max-width: 600px) { .st-aud-marker { padding: 0.4rem 0.95rem 0.4rem 0.4rem; gap: 0.55rem; } .st-am-ico { width: 30px; height: 30px; } .st-am-label { font-size: 0.82rem; letter-spacing: 0.07em; } } /* Headings inside navy bands stay white, overriding the ink default. */ .st-band h2, .st-band h3, .st-band h4 { color: #fff; } /* Card labels inside navy bands take the gold accent. */ .st-band .st-card-label { color: var(--st-gold); } /* ======================================================================== 14. Interior page components ======================================================================== */ /* Page hero: soft gold ground, matching the original .page-hero exactly. */ .st-page-hero { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); background: var(--st-gold-soft); border-bottom: 1px solid var(--st-line); } .st-page-hero .st-ph-title { color: var(--st-navy); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; } .st-page-hero .st-ph-lede { color: var(--st-grey); font-size: 1.1rem; max-width: 640px; margin: 1rem 0 0; } /* Gold eyebrow variant for navy bands. */ .st-eyebrow-gold { color: var(--st-gold); } /* Band intro line under the heading. */ .st-band .st-band-lede { color: #DBE5E8; font-size: 1.08rem; max-width: 640px; margin: 0.9rem 0 0; line-height: 1.65; } /* Centered closing band. */ .st-ctaband { text-align: center; color: #CFE1E6; padding: clamp(2.2rem, 4vw, 3.2rem); } .st-ctaband h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); } .st-ctaband .st-ctaband-lede { color: #BCD3D9; margin: 0.6rem auto 0; max-width: 50ch; } /* ======================================================================== 15. Layout corrections: full-width sections and the 1080px nav collapse ======================================================================== */ /* Full-width sections keep readable gutters on every screen, matching the original wrap of min(92%, 1160px). */ .st-hero.alignfull, .st-page-hero.alignfull, .st-fork.alignfull, .st-section.alignfull { padding-left: max(4vw, calc((100% - 1160px) / 2)); padding-right: max(4vw, calc((100% - 1160px) / 2)); } /* The original collapses the navigation at 1080px, not the WordPress default of 600px. Between those widths the horizontal menu does not fit alongside the logo, phone and button, so force the overlay toggle in that range. */ @media (min-width: 600px) and (max-width: 1080px) { .st-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) { display: none; } .st-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } /* The overlay itself must win over the range rule once open. */ .st-header .wp-block-navigation__responsive-container.is-menu-open { display: flex !important; } /* ======================================================================== 16. Corrections from client review round 2 ======================================================================== */ /* WordPress constrained layout centres any capped-width child with margin auto important. Everything with a reading-measure cap must anchor left instead, exactly as the original. The centered CTA band is the one deliberate exception. */ .st-measure, .st-lede, .st-ph-lede, .st-band .st-band-lede, .st-section-head, .st-sh-lede, .st-rule-gold { margin-left: 0 !important; margin-right: 0 !important; } /* Section heading unit: capped, left, generous space below. */ .st-section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3rem); } .st-section-head .st-sh-lede { margin-top: 0.4rem; font-size: 1.06rem; color: var(--st-grey); } /* Default section heading scale matches the original .section-head h2. Navy band headings stay at their own smaller scales. */ h2.wp-block-heading { font-size: clamp(1.9rem, 3.7vw, 2.7rem); } .st-band h2.wp-block-heading { font-size: clamp(1.6rem, 3.1vw, 2.2rem); } .st-ctaband h2.wp-block-heading { font-size: clamp(1.7rem, 3vw, 2.3rem); } .st-card h3, .st-card h2 { font-size: 1.32rem; } /* White two-column checklist, ink text, gold checks. The original .fit. */ .st-fit { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem 2rem; margin: 1.8rem 0 0; padding: 0; } .st-fit li { position: relative; padding-left: 1.7rem; color: var(--st-ink); font-size: 1.03rem; line-height: 1.55; } .st-fit li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.75rem; height: 0.4rem; border-left: 2px solid var(--st-gold-deep); border-bottom: 2px solid var(--st-gold-deep); transform: rotate(-45deg); } @media (max-width: 860px) { .st-fit { grid-template-columns: 1fr; } } /* Band separators run the full band width, not the core 100px default. */ .st-band .wp-block-separator { width: 100%; max-width: none; } /* Portal links live inside the mobile overlay menu only, exactly as the original nav-mobile-cta items. */ .st-header .st-nav-mobile-cta { display: none; } .st-header .wp-block-navigation__responsive-container.is-menu-open .st-nav-mobile-cta { display: block; border-top: 1px solid var(--st-line); padding-top: 0.85rem; margin-top: 0.5rem; } .st-header .wp-block-navigation__responsive-container.is-menu-open .st-nav-mobile-cta .wp-block-navigation-item__content { font-weight: 600; color: var(--st-navy); } /* ======================================================================== 17. Review round 3: logo scaling, header collapse, the bundle band ======================================================================== */ /* The logo scales by height only and never squishes in the flex row. */ .st-header .wp-block-site-logo { flex: none; } .st-header .wp-block-site-logo img { height: 46px !important; width: auto !important; max-width: none; } @media (max-width: 600px) { .st-header .wp-block-site-logo img { height: 40px !important; } } /* Belt and braces: the portal button is gone below 1080px, full stop. The same link lives in the mobile menu and the footer. */ @media (max-width: 1080px) { .st-header .st-header-cta { display: none !important; } } /* Header children may shrink text, never the row itself. */ .st-header .header-inner, .st-header .wp-block-group { min-width: 0; } /* The featured offer is the original .bundle: a navy gradient panel. */ .st-bundle { background: linear-gradient(140deg, var(--st-navy), #013A49); position: relative; overflow: hidden; } .st-bundle h2.wp-block-heading { font-size: clamp(1.7rem, 3.3vw, 2.4rem); margin-top: 1rem; } .st-bundle .st-bp { color: #FFFFFF; font-size: 1.1rem; max-width: 660px; margin: 1rem 0 0; } /* "Most popular" is a gold pill badge, not a text eyebrow. */ .st-tag { display: inline-block; background: var(--st-gold); color: var(--st-navy); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 20px; margin: 0; } /* Checklist rhythm inside the bundle matches the original .bgrid. */ .st-bundle .st-checklist { gap: 0.65rem 2rem; margin-top: 1.7rem; } /* ======================================================================== 18. Review round 4: root spacing, trust card fidelity, base size ======================================================================== */ /* WordPress inserts a block gap between every root template item, adding space above and below the header that the original does not have. */ .wp-site-blocks > * + * { margin-block-start: 0; } /* Trust card heading, exactly as the original .trust-card h2. */ .st-trust-card h2 { font-size: 1.26rem !important; line-height: 1.28; margin: 0.9rem 0 1.1rem !important; } /* ======================================================================== 19. Review round 5: trust card accent, fork lead, strip heading ======================================================================== */ /* The 3px gold accent across the top of the trust card, inset to the card padding, exactly as .trust-card::before on the original. */ .st-trust-card { position: relative; } .st-trust-card::before { content: ""; position: absolute; top: 0; left: 1.9rem; right: 1.9rem; height: 3px; background: var(--st-gold); border-radius: 3px; } /* "Which sounds like you?" is the gold fork lead, not a teal eyebrow. */ .st-fork-lead { margin: 0 0 0.2rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--st-gold-deep); } /* Team strip heading is navy, as .ts-copy strong. */ .st-ts-copy h3 { color: var(--st-navy); } /* ======================================================================== 20. Dropdown: keep the parent bar lit while the panel is open, drop the panel a smidge lower with a hover bridge so it cannot flicker shut. ======================================================================== */ /* While the pointer is anywhere over the item, panel included, the top-level bar stays fully drawn. This is what makes the gold line visible while the dropdown is down. */ .st-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content::after, .st-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content::after { width: 100%; } /* Panel sits 12px lower, as the original top: calc(100% + 12px). */ .st-header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation__submenu-container { margin-top: 12px; } /* Invisible bridge spanning the gap so hover is not lost crossing it. */ .st-header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* No offset inside the mobile overlay. */ .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { margin-top: 0; } /* ======================================================================== 21. Ported original components The rules below are the original site's own declarations, extracted verbatim per class. The aliases make the original custom properties resolve against the theme tokens so those rules work untouched. ======================================================================== */ :root { --navy: var(--st-navy); --teal: var(--st-teal); --gold: var(--st-gold); --gold-deep: var(--st-gold-deep); --gold-soft: var(--st-gold-soft); --paper: var(--st-paper); --ink: var(--st-ink); --grey: var(--st-grey); --line: var(--st-line); --card: #FFFFFF; --soft: #FFFFFF; --display: var(--wp--preset--font-family--display); --body: var(--wp--preset--font-family--body); } .article{max-width:72ch;} .article h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:2rem 0 .6rem;} .article p{margin:.9rem 0 0;line-height:1.7;} .article ul,.article ol{margin:.9rem 0 0;padding-left:1.6rem;} .article li{margin-top:.5rem;line-height:1.65;} .back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--grey);font-size:.92rem;text-decoration:none;margin-bottom:1.4rem;} .back-link:hover{color:var(--navy);} .band-dark{background:linear-gradient(135deg,var(--navy) 60%,#013A49);border-radius:20px;padding:clamp(2.5rem,5vw,3.8rem);} .band-dark .eyebrow{color:var(--gold);} .band-dark h2{color:#fff;font-size:clamp(1.7rem,3.3vw,2.5rem);margin:.7rem 0 0;} .band-dark p{color:#dbe5e8;font-size:1.08rem;margin:.9rem 0 0;max-width:640px;line-height:1.65;} .btn-navy{background:var(--navy);color:#fff;} .btn-navy:hover{background:#003748;transform:translateY(-2px);} .btn-light{background:#fff;color:var(--navy);} .btn-light:hover{background:var(--gold-soft);} .cat{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);} .checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem 2rem;margin:1.7rem 0 0;padding:0;} .checklist li{list-style:none;padding-left:1.7rem;position:relative;color:#eaf0f1;font-size:1.01rem;} .checklist li::before{content:"";position:absolute;left:0;top:.45em;width:.75rem;height:.4rem;border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg);} .contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;} .contact-side h3{font-family:var(--display);color:var(--navy);font-size:1.1rem;font-weight:700;margin:0 0 .5rem;} .contact-side p{color:var(--grey);font-size:.96rem;margin:.35rem 0 0;} .contact-side a{color:var(--teal);text-decoration:none;font-weight:500;} .cta{text-align:center;} .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem;} .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);vertical-align:middle;} .driver{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.8rem;} .driver .k{display:block;margin-bottom:.6rem;} .driver h3{font-family:var(--display);color:var(--navy);font-size:1.18rem;font-weight:700;margin:0 0 .5rem;} .driver p{color:var(--grey);font-size:.95rem;margin:0;line-height:1.6;} .drivers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} .em{color:var(--teal);font-style:normal;font-weight:600;} .faq{display:grid;gap:1rem;} .faq-item{border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem;background:var(--card);} .faq-item h3{font-family:var(--display);color:var(--navy);font-size:1.05rem;font-weight:700;margin:0 0 .6rem;} .faq-item p{color:var(--grey);font-size:.97rem;margin:0;line-height:1.65;} .feat{background:var(--gold-soft);border:1px solid var(--line);border-radius:18px;padding:2rem 1.9rem;margin-bottom:2.2rem;} .feat .k{margin-bottom:.5rem;} .feat h3{font-family:var(--display);color:var(--navy);font-size:1.26rem;font-weight:700;line-height:1.28;margin:0 0 .5rem;} .feat p{color:var(--grey);font-size:.96rem;line-height:1.65;margin:.4rem 0 0;} .field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem;color:var(--ink);} .form{display:grid;gap:1rem;} .form input,.form textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff;color:var(--ink);} .form input:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;} .ic{width:40px;height:40px;border-radius:11px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;flex:none;color:var(--gold-deep);margin-bottom:1rem;} .incl{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem 2.8rem;margin-top:1.8rem;} .incl-col h4{font-family:var(--display);color:var(--navy);font-size:.96rem;font-weight:700;margin:0 0 .5rem;} .incl-col ul{padding-left:1.4rem;margin:0;} .incl-col li{font-size:.94rem;color:var(--grey);line-height:1.6;margin-top:.3rem;} .info{color:var(--grey);font-size:.95rem;line-height:1.65;margin:.5rem 0 0;max-width:56ch;} .lead{font-size:1.18rem;color:var(--ink);line-height:1.65;font-weight:400;max-width:68ch;margin:0 0 2rem;} .loc-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2rem 1.9rem;} .loc-meta{display:grid;gap:.5rem;margin:.9rem 0 0;} .loc-meta a{color:var(--teal);text-decoration:none;font-weight:500;} .loc-meta a:hover{color:var(--navy);} .lockup{display:flex;gap:3rem;align-items:flex-start;} .lock-row{flex:1;} .lock-sterling h2,.lock-sg h2{font-size:clamp(1.5rem,2.8vw,2rem);} .lock-eyebrow{font-family:var(--body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--gold);display:inline-block;margin-bottom:.5rem;} .lock-div{width:1px;background:var(--line);align-self:stretch;} .lock-cap{color:var(--grey);font-size:.95rem;margin:.6rem 0 0;max-width:44ch;line-height:1.65;} .lock-item{display:flex;gap:.7rem;align-items:flex-start;margin-top:.8rem;color:var(--grey);font-size:.95rem;line-height:1.55;} .member{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.8rem;} .member .photo{width:72px;height:72px;border-radius:50%;object-fit:cover;grid-row:1/3;} .member .role{display:block;font-family:var(--body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--teal);margin-bottom:.25rem;} .member h3{font-family:var(--display);color:var(--navy);font-size:1.08rem;font-weight:700;margin:0;line-height:1.3;} .member .info{font-size:.93rem;color:var(--grey);grid-column:1/-1;margin-top:0;} .n{background:var(--gold-soft);border-radius:20px;padding:clamp(2rem,4vw,3rem);} .n h2{color:var(--navy);font-size:clamp(1.5rem,2.8vw,2.1rem);} .n p{color:var(--grey);font-size:1rem;margin:.6rem 0 0;} .ocard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.8rem;} .ocard h3{font-family:var(--display);color:var(--navy);font-size:1.1rem;font-weight:700;margin:0 0 .5rem;} .ocard p{color:var(--grey);font-size:.95rem;margin:.35rem 0 0;line-height:1.6;} .ocard a{color:var(--teal);text-decoration:none;font-weight:500;} .office{margin-top:1.4rem;} .office h3{font-family:var(--display);color:var(--navy);font-size:1.05rem;font-weight:700;margin:0 0 .4rem;} .office p,.office a{color:var(--grey);font-size:.95rem;line-height:1.65;text-decoration:none;} .office a:hover{color:var(--teal);} .offices{display:grid;gap:1rem;margin-top:1.4rem;} .offices3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} .on-tint{background:var(--gold-soft);border-radius:16px;padding:1.8rem;margin-top:1.6rem;} .p-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.8rem;} .p-card h3{font-family:var(--display);color:var(--navy);font-size:1.12rem;font-weight:700;margin:0 0 .5rem;} .p-card p{color:var(--grey);font-size:.95rem;line-height:1.65;margin:.4rem 0 0;} .p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.8rem;} .p-list{display:grid;gap:.5rem;margin:.8rem 0 0;padding:0;list-style:none;} .p-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;color:var(--grey);line-height:1.55;} .p-list li::before{content:"";flex:none;width:.7rem;height:.38rem;margin-top:.48em;border-left:1.8px solid var(--gold-deep);border-bottom:1.8px solid var(--gold-deep);transform:rotate(-45deg);} .pc-body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;flex:1;} .phero{background:var(--gold-soft);border-bottom:1px solid var(--line);padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);} .phero h1{color:var(--navy);font-size:clamp(2rem,4.5vw,3rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;} .phero p{color:var(--grey);font-size:1.1rem;max-width:640px;margin:1rem 0 0;} .phone{color:var(--teal);text-decoration:none;font-weight:600;} .portal-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.8rem;} .post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;} .post-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,68,89,.09);} .post-card .bar{height:7px;background:linear-gradient(90deg,var(--gold),var(--teal));} .post-card .cat{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);} .post-card h3{font-family:var(--display);color:var(--navy);font-size:1.24rem;font-weight:700;line-height:1.22;margin:.6rem 0 0;} .post-card p{color:var(--grey);font-size:.96rem;margin:.6rem 0 0;flex:1;} .post-card .rd{color:var(--navy);font-weight:600;font-size:.92rem;margin-top:1.1rem;} .post-cta{background:var(--gold-soft);border-top:1px solid var(--line);padding:2.5rem;text-align:center;margin-top:3rem;border-radius:16px;} .post-cta h3{font-family:var(--display);color:var(--navy);font-size:1.3rem;font-weight:700;margin:0 0 .5rem;} .post-cta p{color:var(--grey);font-size:.97rem;margin:0 0 1.2rem;} .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;} .post-meta{color:var(--grey);font-size:.9rem;margin-top:1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;} .profile{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.6rem;} .profile .photo{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:.9rem;} .profile h3{font-family:var(--display);color:var(--navy);font-size:1.05rem;font-weight:700;margin:0;} .profile .role{display:block;color:var(--teal);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin:.25rem 0 .6rem;} .profile p{color:var(--grey);font-size:.92rem;line-height:1.6;margin:0;} .profiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2rem;} .prose h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:2rem 0 .6rem;color:var(--navy);} .prose p{margin:.9rem 0 0;color:var(--grey);line-height:1.7;} .prose a{color:var(--teal);} .prose ul{margin:.9rem 0 0;padding-left:1.6rem;} .prose li{margin-top:.4rem;color:var(--grey);line-height:1.65;} .rd{color:var(--navy);font-weight:600;font-size:.92rem;margin-top:1.1rem;} .role{display:block;font-family:var(--body);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--teal);} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;} .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} .svc-note{display:flex;gap:.6rem;align-items:flex-start;color:var(--grey);font-size:.92rem;margin-top:1.2rem;line-height:1.55;} .svc-note::before{content:"";flex:none;width:.7rem;height:.38rem;margin-top:.48em;border-left:1.8px solid var(--teal);border-bottom:1.8px solid var(--teal);transform:rotate(-45deg);} .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;} .tf{font-size:.78rem;font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--grey);margin-bottom:.4rem;} .tier{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.8rem;} .tier h3{font-family:var(--display);color:var(--navy);font-size:1.18rem;font-weight:700;margin:0 0 .4rem;} .tier .tp{font-size:1.6rem;font-weight:800;color:var(--navy);font-family:var(--display);} .tier .tn{font-size:.9rem;color:var(--grey);font-weight:400;} .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} .upsell{display:flex;gap:1.2rem;align-items:flex-start;background:var(--gold-soft);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.8rem;margin-top:2.2rem;} .upsell .ic{margin-bottom:0;} .us{flex:1;} .ut{font-family:var(--display);color:var(--navy);font-size:1.06rem;font-weight:700;margin:0 0 .3rem;} .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2rem;} .val{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.8rem;} .val h3{font-family:var(--display);color:var(--navy);font-size:1.1rem;font-weight:700;margin:.7rem 0 .4rem;} .val p{color:var(--grey);font-size:.95rem;line-height:1.65;margin:0;} .vnum{font-size:2rem;font-weight:800;color:var(--gold-deep);font-family:var(--display);line-height:1;} .why{background:var(--gold-soft);border-radius:18px;padding:2rem 1.9rem;margin-top:2rem;} .why h3{font-family:var(--display);color:var(--navy);font-size:1.12rem;font-weight:700;margin:0 0 .5rem;} .why p{color:var(--grey);font-size:.95rem;line-height:1.65;margin:.4rem 0 0;} @media(max-width:860px){.drivers,.tiers,.steps3,.offices3,.p-grid,.val-grid,.incl,.profiles,.team-grid{grid-template-columns:1fr;} .contact-cols{grid-template-columns:1fr;} .post-grid{grid-template-columns:1fr;} .lockup{flex-direction:column;gap:1.5rem;} .lock-div{display:none;} .checklist{grid-template-columns:1fr;}} /* Support glue */ .lnk{position:relative;} .lnk .lnk-a{text-decoration:none;color:inherit;} .lnk .lnk-a::before{content:"";position:absolute;inset:0;} .lnk:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,68,89,.09);border-color:var(--gold);} .drivers>*,.tiers>*,.steps3>*,.offices3>*,.loc-meta>*,.team-grid>*,.post-grid>*,.p-grid>*,.val-grid>*,.contact-cols>*,.incl>*,.profiles>*,.lock-row>*,.cta-row>*,.upsell>*,.st-steps-4>*,.faq>*,.post-card>*,.pc-body>*,.member>*,.tier>*,.driver>*,.ocard>*,.loc-box>*,.p-card>*,.profile>*,.val>*,.office>*,.offices>*,.checklist>*{margin-block-start:0!important;} .wp-block-button.btn-navy .wp-block-button__link{background:var(--st-navy);color:#fff;} .wp-block-button.btn-navy .wp-block-button__link:hover{background:#003748;transform:translateY(-2px);} .wp-block-button.btn-light .wp-block-button__link{background:#fff;color:var(--st-navy);} .wp-block-button.btn-light .wp-block-button__link:hover{background:var(--st-gold-soft);} .st-form-notice{background:var(--gold-soft);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1.2rem;font-size:.9rem;color:var(--grey);} .st-form-placeholder{border:2px dashed var(--line);border-radius:10px;padding:2rem;text-align:center;color:var(--grey);font-size:.95rem;background:#fafafa;} /* ======================================================================== Stage 6 — WPForms styling + newsletter band ======================================================================== */ /* ----- Newsletter band ----- */ .st-newsletter { background: var(--st-gold-soft); border-top: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); padding: clamp(2rem, 4vw, 2.8rem) 0; } .st-news-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .st-news-copy { flex: 1 1 340px; } .st-news-copy h3 { font-family: var(--wp--preset--font-family--display); color: var(--st-navy); font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; margin: 0; } .st-news-note { color: var(--st-grey); font-size: .93rem; margin: .4rem 0 0; } .st-news-form-wrap { flex: 1 1 300px; max-width: 420px; } /* ----- WPForms global reset ----- */ .wpforms-container, .wpforms-form { font-family: var(--wp--preset--font-family--body); font-size: 1rem; } .wpforms-field-container { margin: 0; padding: 0; } .wpforms-field { padding: 0 0 1rem; margin: 0; } /* Labels */ .wpforms-field-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; color: var(--st-ink); letter-spacing: 0; } /* Inputs, selects, textareas */ .wpforms-field input[type="text"], .wpforms-field input[type="email"], .wpforms-field input[type="tel"], .wpforms-field input[type="number"], .wpforms-field input[type="url"], .wpforms-field select, .wpforms-field textarea { width: 100% !important; padding: .8rem .95rem; border: 1px solid var(--st-line); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: var(--st-ink); box-shadow: none; transition: border-color .15s, outline .15s; appearance: none; } .wpforms-field input:focus, .wpforms-field select:focus, .wpforms-field textarea:focus { outline: 2px solid var(--st-gold); outline-offset: 1px; border-color: var(--st-gold); } .wpforms-field textarea { min-height: 130px; resize: vertical; } /* Name field: first + last side by side */ .wpforms-field-name .wpforms-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 580px) { .wpforms-field-name .wpforms-field-row { grid-template-columns: 1fr; } } /* Select arrow */ .wpforms-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6566' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } /* Submit button */ .wpforms-submit-container { margin-top: .5rem; padding: 0; } .wpforms-submit { display: inline-flex; align-items: center; justify-content: center; background: var(--st-gold); color: var(--st-navy); font-family: var(--wp--preset--font-family--display); font-size: .97rem; font-weight: 700; padding: .85rem 2rem; border: none; border-radius: 10px; cursor: pointer; transition: background .18s, transform .15s; width: 100%; } .wpforms-submit:hover { background: var(--st-gold-deep); transform: translateY(-2px); } .wpforms-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; } /* Newsletter form: email + button inline */ .st-news-form-wrap .wpforms-field-email { padding-bottom: .5rem; } .st-news-form-wrap .wpforms-submit { background: var(--st-navy); color: #fff; } .st-news-form-wrap .wpforms-submit:hover { background: #003748; } /* Error states */ .wpforms-error-container, .wpforms-field .wpforms-error { color: #b91c1c; font-size: .85rem; margin-top: .3rem; } .wpforms-field input.wpforms-error, .wpforms-field select.wpforms-error, .wpforms-field textarea.wpforms-error { border-color: #b91c1c; outline: 2px solid #fecaca; } /* Confirmation message */ .wpforms-confirmation-container-full { background: var(--st-gold-soft); border: 1px solid var(--st-line); border-radius: 12px; padding: 1.4rem 1.6rem; color: var(--st-ink); font-size: 1rem; margin-top: 1rem; } /* Remove WPForms default branding */ .wpforms-container-full .wpforms-form .wpforms-field-hp { display: none !important; } /* Hide WPForms footer link */ .wpforms-container .wpforms-not-core-field { display: none !important; } /* ======================================================================== Stage 7 — Scroll-reveal animations Matches original: .reveal{opacity:0;transform:translateY(14px)} Ours uses .st-reveal (same semantics). JS adds .in on intersection. prefers-reduced-motion: show immediately, no transition. ======================================================================== */ /* Initial hidden state — applied only when JS has loaded (html.js class) */ html.js .st-reveal { opacity: 0; transform: translateY(14px); } /* Revealed state — added by IntersectionObserver */ html.js .st-reveal.in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { html.js .st-reveal, html.js .st-reveal.in { opacity: 1; transform: none; transition: none; } } /* Stagger grid children so cards cascade in sequence */ html.js .st-reveal.in .st-card:nth-child(1), html.js .st-reveal.in .driver:nth-child(1), html.js .st-reveal.in .tier:nth-child(1), html.js .st-reveal.in .ocard:nth-child(1), html.js .st-reveal.in .val:nth-child(1), html.js .st-reveal.in .p-card:nth-child(1), html.js .st-reveal.in .faq-item:nth-child(1) { transition-delay: 0.00s; } html.js .st-reveal.in .st-card:nth-child(2), html.js .st-reveal.in .driver:nth-child(2), html.js .st-reveal.in .tier:nth-child(2), html.js .st-reveal.in .ocard:nth-child(2), html.js .st-reveal.in .val:nth-child(2), html.js .st-reveal.in .p-card:nth-child(2), html.js .st-reveal.in .faq-item:nth-child(2) { transition-delay: 0.08s; } html.js .st-reveal.in .st-card:nth-child(3), html.js .st-reveal.in .driver:nth-child(3), html.js .st-reveal.in .tier:nth-child(3), html.js .st-reveal.in .ocard:nth-child(3), html.js .st-reveal.in .val:nth-child(3), html.js .st-reveal.in .p-card:nth-child(3), html.js .st-reveal.in .faq-item:nth-child(3) { transition-delay: 0.16s; } html.js .st-reveal.in .st-card:nth-child(4), html.js .st-reveal.in .driver:nth-child(4), html.js .st-reveal.in .faq-item:nth-child(4) { transition-delay: 0.24s; } html.js .st-reveal.in .faq-item:nth-child(5) { transition-delay: 0.32s; } html.js .st-reveal.in .faq-item:nth-child(6) { transition-delay: 0.40s; } html.js .st-reveal.in .faq-item:nth-child(7) { transition-delay: 0.48s; } html.js .st-reveal.in .faq-item:nth-child(8) { transition-delay: 0.56s; } /* Steps also stagger */ html.js .st-reveal.in .st-step:nth-child(1) { transition-delay: 0.00s; } html.js .st-reveal.in .st-step:nth-child(2) { transition-delay: 0.09s; } html.js .st-reveal.in .st-step:nth-child(3) { transition-delay: 0.18s; } html.js .st-reveal.in .st-step:nth-child(4) { transition-delay: 0.27s; } @media (prefers-reduced-motion: reduce) { html.js .st-reveal.in .st-card, html.js .st-reveal.in .driver, html.js .st-reveal.in .tier, html.js .st-reveal.in .ocard, html.js .st-reveal.in .val, html.js .st-reveal.in .p-card, html.js .st-reveal.in .faq-item, html.js .st-reveal.in .st-step { transition-delay: 0s; } } /* Skip link — visually hidden until focused */ .st-skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} .st-skip-link:focus{position:fixed;top:.75rem;left:.75rem;z-index:9999;width:auto;height:auto;padding:.6rem 1.2rem;background:var(--st-navy);color:#fff;font-weight:700;font-size:.95rem;border-radius:8px;text-decoration:none;outline:3px solid var(--st-gold);outline-offset:2px;} /* ======================================================================== Stage 9 — Tax+Wealth page corrections Corrected from original site source. Previous port had wrong structure. ======================================================================== */ /* lockup — single centered card, gold top border, shadow */ .lockup { max-width: 720px; margin-left: auto; margin-right: auto; background: #fff; border: 1px solid var(--st-line); border-top: 4px solid var(--st-gold); border-radius: 20px; padding: 3.2rem 2.4rem 2.8rem; box-shadow: 0 22px 56px rgba(0,68,89,.11); } /* lock-eyebrow — centred label above logos */ .lock-eyebrow { display: block; text-align: center; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--st-gold-deep); margin-bottom: 1.9rem; } /* lock-row — logo row, centred */ .lock-row { display: flex; align-items: center; justify-content: center; gap: 3.6rem; flex-wrap: wrap; } /* logo sizes */ .lock-sterling img { height: 74px; width: auto; max-width: 100%; display: block; } .lock-sg img { height: 70px; width: auto; max-width: 100%; display: block; } /* lock-div — vertical rule between logos */ .lock-div { width: 1px; height: 84px; background: var(--st-line); flex: none; } /* lock-cap — caption below logo row */ .lock-cap { text-align: center; color: var(--st-grey); font-size: 1rem; margin: 2.1rem 0 0; line-height: 1.65; } .lock-cap a { color: var(--st-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--st-gold); } .lock-cap a:hover { color: var(--st-teal); } /* p-grid — 2-column in band-dark: text left, card right */ .p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; } /* p-card on dark background */ .band-dark .p-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 2rem 1.9rem; } .band-dark .p-card h3 { color: #fff; font-family: var(--wp--preset--font-family--display); font-size: 1.18rem; font-weight: 700; margin: 0 0 1rem; } /* p-list with tick icons on dark bg */ .p-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; } .p-list li { display: flex; align-items: flex-start; gap: .7rem; color: #cfe1e6; font-size: 1rem; line-height: 1.55; } .p-list .tick { color: var(--st-gold); flex: none; margin-top: .2rem; width: 18px; height: 18px; } /* band-dark text colours */ .band-dark .st-eyebrow { color: var(--st-gold); } .band-dark h2 { color: #fff; font-size: clamp(1.9rem,3.7vw,2.7rem); } .band-dark p { color: #bcd3d9; font-size: 1.06rem; margin-bottom: 1.1rem; } /* cta-row — centred button pair */ .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; } /* disclosure — fine print section */ .disclosure { border-top: 1px solid var(--st-line); padding-top: 1.6rem; margin-top: .5rem; } .disclosure h3 { font-family: var(--wp--preset--font-family--display); color: var(--st-ink); font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; } .disclosure p { color: var(--st-grey); font-size: .88rem; line-height: 1.7; margin: 0; } @media (max-width: 720px) { .lock-row { gap: 2rem; } .lock-div { display: none; } .p-grid { grid-template-columns: 1fr; } .lockup { padding: 2rem 1.4rem; } } /* ======================================================================== Stage 9 CSS — Fine-grained corrections from original-source audit ======================================================================== */ /* 1. steps3 step-num: CIRCULAR badge (vs 4-col plain-text numbers) */ .steps3 .st-step-num { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--st-gold); color: var(--st-gold-deep); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0; } /* steps3 container gap (original: 1.5rem, margin-top: 2.4rem) */ .steps3 { gap: 1.5rem; margin-top: 2.4rem; } /* 2. phero: gold-soft background + consistent padding + h1 size */ .phero { background: var(--st-gold-soft); padding: clamp(3rem, 6vw, 5rem) 0; } .phero h1 { color: var(--st-navy); font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0; } .phero .st-lede { font-size: 1.15rem; color: var(--st-grey); margin-top: .2rem; max-width: 660px; } /* 3. page-hero eyebrow spacing when it’s a plain paragraph (no icon) */ .st-page-hero .st-eyebrow { margin-bottom: .6rem; } /* 4. section-head: used in tax-wealth partnership + estate sections Left-aligned on service pages, inherits from natural flow. */ .st-section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3rem); } /* 5. svc-note: check icon in teal, used on sterling-complete + location pages */ .svc-note { display: flex; gap: .6rem; align-items: flex-start; color: var(--st-grey); font-size: .92rem; margin-top: 1.2rem; line-height: 1.55; } .svc-note::before { content: ""; flex: none; width: .7rem; height: .38rem; margin-top: .48em; border-left: 1.8px solid var(--st-teal); border-bottom: 1.8px solid var(--st-teal); transform: rotate(-45deg); } /* 6. incl-col h3: matches original — display face, navy, 1rem */ .incl-col h3.wp-block-heading { font-family: var(--wp--preset--font-family--display); color: var(--st-navy); font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; } /* 7. contact-cols: fix gap for narrower screens */ @media (max-width: 780px) { .contact-cols { grid-template-columns: 1fr; } } /* 8. Disclosure fine-print text */ .disclosure h3.wp-block-heading { font-size: .95rem; font-weight: 700; color: var(--st-ink); margin: 0 0 .5rem; } .disclosure p { font-size: .88rem; color: var(--st-grey); line-height: 1.7; } /* 9. hero buttons group: flex-wrap with correct gap */ .st-page-hero .wp-block-buttons { margin-top: 1.6rem; flex-wrap: wrap; gap: .8rem; } .phero .wp-block-buttons { margin-top: 1.6rem; flex-wrap: wrap; gap: .8rem; } /* 10. band-dark eyebrow fix: already have .band-dark .st-eyebrow but also target the HTML inline eyebrow spans used in phero sections */ .band-dark p { color: #bcd3d9; } .band-dark .st-eyebrow { color: var(--st-gold); } /* ======================================================================== Tax+Wealth exact fix - lockup card + band-dark p-grid ======================================================================== */ /* Lockup: centred card with gold top border */ .lockup { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--st-line); border-top: 4px solid var(--st-gold); border-radius: 20px; padding: clamp(2rem,4vw,3.2rem) clamp(1.4rem,3vw,2.4rem) clamp(1.8rem,3.5vw,2.8rem); box-shadow: 0 22px 56px rgba(0,68,89,.11); } /* Eyebrow inside lockup */ .lock-eyebrow { display: block; text-align: center; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--st-gold-deep); margin-bottom: 1.9rem; } /* Logo row: flex, centred */ .lock-row { display: flex !important; align-items: center !important; justify-content: center !important; gap: 3.6rem; flex-wrap: wrap; margin-block-start: 0 !important; } /* Logo wrappers */ .lock-item { display: flex; align-items: center; justify-content: center; } .lock-sterling img { height: 74px; width: auto; max-width: 260px; display: block; } .lock-sg img { height: 70px; width: auto; max-width: 260px; display: block; } /* Vertical divider */ .lock-div { width: 1px; height: 84px; background: var(--st-line); flex: none; margin-block-start: 0 !important; } /* Caption */ .lock-cap { text-align: center; color: var(--st-grey); font-size: 1rem; margin: 2.1rem 0 0; line-height: 1.65; } .lock-cap a { color: var(--st-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--st-gold); } .lock-cap a:hover { color: var(--st-teal); border-bottom-color: var(--st-teal); } /* band-dark solid navy */ .band-dark { background: var(--st-navy); color: #cfe1e6; } /* p-grid 2-col */ .band-dark .p-grid, .p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items: center; } /* CTA link inside band-dark left col */ .band-dark .cta-row { margin-top: 1.5rem; } .band-dark .cta-row a { display: inline-flex; align-items: center; background: var(--st-gold); color: var(--st-navy); font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .97rem; padding: .85rem 1.8rem; border-radius: 10px; text-decoration: none; transition: background .18s, transform .15s; } .band-dark .cta-row a:hover { background: var(--st-gold-deep); transform: translateY(-2px); } /* p-card on dark */ .band-dark .p-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 2rem 1.9rem; margin-block-start: 0 !important; } .band-dark .p-card h3 { color: #fff; font-family: var(--wp--preset--font-family--display); font-size: 1.18rem; font-weight: 700; margin: 0 0 1.1rem; } /* p-list ticks */ .p-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; } .p-list li { display: flex; align-items: flex-start; gap: .7rem; color: #cfe1e6; font-size: 1rem; line-height: 1.55; margin-block-start: 0 !important; } .p-list .tick { flex: none; margin-top: .2rem; width: 18px; height: 18px; color: var(--st-gold); } /* band-dark text */ .band-dark .st-eyebrow { color: var(--st-gold) !important; } .band-dark h2 { color: #fff; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.9rem,3.7vw,2.7rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; } .band-dark p { color: #bcd3d9; } .band-dark hr.st-rule-gold { border: none; height: 2px; background: rgba(196,154,69,.5); margin: .8rem 0 1.5rem; } /* Responsive */ @media (max-width: 700px) { .lock-row { gap: 2rem; } .lock-div { display: none; } .p-grid, .band-dark .p-grid { grid-template-columns: 1fr; } } /* === Smart Money Brief design system === */ /* ======================================================================== Smart Money Brief design system Tokens from email HTML. All rules scoped to SMB classes. ======================================================================== */ /* Masthead */ .smb-masthead{background:#013F51;padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden;} .smb-masthead::after{content:"";position:absolute;right:-80px;bottom:-60px;width:280px;height:280px;border:44px solid rgba(196,154,69,.08);border-radius:50%;pointer-events:none;} .smb-coin{width:90px;height:90px;margin:0 auto 1.4rem;display:block;} .smb-eyebrow{font-family:var(--wp--preset--font-family--body);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--st-gold);margin:0 0 .8rem;display:block;} .smb-title{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(2.4rem,5vw,3.8rem);color:#fff;line-height:1.06;letter-spacing:.01em;margin:0;} .smb-rule{width:80px;height:3px;background:var(--st-gold);margin:1.1rem auto 1.3rem;border:none;} .smb-tagline{font-size:.97rem;color:#D7E7EC;line-height:1.55;margin:0 auto;max-width:460px;} /* Four Pillars */ .smb-pillars{background:#fff;border-bottom:1px solid var(--st-line);padding:clamp(2rem,4vw,3rem) 0;} .smb-pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.5rem;align-items:start;text-align:center;} .smb-pillar img{width:48px;height:48px;margin:0 auto .8rem;display:block;} .smb-pillar-label{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--st-navy);display:block;margin-bottom:.4rem;} .smb-pillar-desc{font-size:.88rem;color:#737373;line-height:1.45;margin:0;} @media(max-width:640px){.smb-pillar-grid{grid-template-columns:1fr 1fr;gap:1.5rem 1rem;}} /* SMB post hero */ .smb-post-hero{background:#013F51;padding:clamp(2.8rem,5vw,4.5rem) 0 clamp(2rem,4vw,3.2rem);text-align:center;} .smb-post-hero .back-link{color:#9FC0CB;font-size:.9rem;text-decoration:none;display:block;margin-bottom:1.4rem;} .smb-post-hero .back-link:hover{color:var(--st-gold);} .smb-post-hero .wp-block-post-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.7rem,3.5vw,2.6rem);color:#fff;font-weight:700;line-height:1.18;letter-spacing:-.01em;margin:.5rem auto 1rem;max-width:720px;} .smb-post-hero .wp-block-post-date{color:#9FC0CB;font-size:.88rem;} .smb-post-hero .wp-block-post-terms{font-family:var(--wp--preset--font-family--body);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--st-gold);display:block;margin-bottom:.5rem;} .smb-post-hero .wp-block-post-terms a{color:var(--st-gold);text-decoration:none;} .smb-category-label{font-family:var(--wp--preset--font-family--body);font-weight:700;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--st-gold);display:block;margin-bottom:.6rem;} /* Article body - Soro HTML */ .soro-body{padding-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,4vw,3.5rem);} .article{max-width:72ch;margin-left:auto;margin-right:auto;} .article h2{font-family:var(--wp--preset--font-family--display);font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--st-navy);font-weight:700;margin:2rem 0 .6rem;line-height:1.28;} .article h3{font-family:var(--wp--preset--font-family--display);font-size:1.1rem;color:var(--st-navy);font-weight:700;margin:1.6rem 0 .4rem;} .article p{font-size:1.02rem;line-height:1.72;color:#3A4044;margin:.9rem 0 0;} .article ul,.article ol{margin:.9rem 0 0;padding-left:1.6rem;} .article li{font-size:1.02rem;line-height:1.65;color:#3A4044;margin-top:.5rem;} .article a{color:var(--st-teal);} .article a:hover{color:var(--st-navy);} .article strong{color:var(--st-ink);} .article blockquote{border-left:3px solid var(--st-gold);margin:1.5rem 0;padding:.8rem 1.2rem;background:#F1F6F8;border-radius:0 8px 8px 0;color:var(--st-navy);font-size:1.05rem;} .smb-review-card{background:#F1F6F8;border:1px solid #E0EAEE;border-radius:10px;padding:1.2rem 1.4rem 1rem;margin:1.4rem 0;} .smb-review-card-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--st-teal);font-weight:700;display:block;margin-bottom:.8rem;} .smb-review-card li{display:flex;align-items:flex-start;gap:.6rem;padding:.4rem 0;border-bottom:1px solid rgba(0,68,89,.06);list-style:none;font-size:.97rem;color:#23282B;} .smb-review-card li:last-child{border-bottom:none;} .smb-review-card li::before{content:"\2713";color:var(--st-teal);font-weight:700;flex:none;margin-top:.05em;} .smb-quick-tip{display:flex;gap:.7rem;align-items:flex-start;background:var(--st-gold-soft);border-radius:12px;padding:1.2rem 1.4rem;margin:1.6rem 0;border-left:3px solid var(--st-gold);} .smb-quick-tip-label{font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--st-navy);display:block;margin-bottom:.35rem;} .smb-quick-tip-text{font-size:.97rem;color:#3A4044;line-height:1.6;margin:0;} /* Post cards */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;} .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--st-line);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s;} .post-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,68,89,.09);} .post-card .bar{height:7px;background:linear-gradient(90deg,var(--st-gold),var(--st-teal));} .post-card .pc-body{padding:1.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1;} .post-card .cat{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--st-gold-deep);} .post-card h3.wp-block-heading{font-family:var(--wp--preset--font-family--display);color:var(--st-navy);font-size:1.18rem;font-weight:700;line-height:1.25;margin:.5rem 0 0;} .post-card p{color:var(--st-grey);font-size:.94rem;margin:.6rem 0 0;flex:1;line-height:1.6;} .post-card .rd{color:var(--st-navy);font-weight:600;font-size:.9rem;margin-top:1.1rem;} .post-meta{color:var(--st-grey);font-size:.88rem;} @media(max-width:760px){.post-grid{grid-template-columns:1fr;}} @media(min-width:480px) and (max-width:760px){.post-grid{grid-template-columns:1fr 1fr;}} /* SMB signup */ .smb-signup{background:#013F51;border-radius:20px;padding:clamp(2.2rem,4vw,3.2rem) clamp(1.5rem,3vw,2.5rem);text-align:center;} .smb-signup h2{font-family:Georgia,'Times New Roman',serif;color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin:0 0 .6rem;} .smb-signup p{color:#D7E7EC;font-size:.97rem;margin:0 0 1.6rem;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.6;} .smb-signup .wpforms-submit{background:var(--st-gold);color:var(--st-navy);} .smb-signup .wpforms-field input[type="email"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;} .soro-featured{margin-bottom:0;} .soro-featured .wp-block-post-featured-image img{border-radius:12px;width:100%;height:360px;object-fit:cover;} /* ===== Location page FAQ + section spacing ===== */ .faq-list{max-width:820px;margin-left:0;} .faq-item{border-top:1px solid var(--st-line);padding:1.25rem 0;} .faq-item:last-child{border-bottom:1px solid var(--st-line);} .faq-item h3.wp-block-heading{font-family:var(--wp--preset--font-family--display);color:var(--st-navy);font-size:1.06rem;font-weight:700;line-height:1.35;margin:0 0 .45rem;} .faq-item p{color:var(--st-grey);font-size:1rem;line-height:1.65;margin:0;max-width:70ch;} .loc-box{background:var(--st-gold-soft);border-radius:16px;padding:1.8rem 2rem;max-width:620px;margin-left:0;} .loc-box p{margin:0 0 .7rem;color:var(--st-ink);} .loc-box p:last-child{margin-bottom:0;color:var(--st-grey);font-size:.95rem;line-height:1.6;} .loc-box a{color:var(--st-navy);font-weight:600;text-decoration:none;border-bottom:1px solid var(--st-gold);} .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;} @media(max-width:720px){.svc-grid{grid-template-columns:1fr;}} /* Service x location cross-link grid */ .svc-local-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} @media(max-width:860px){.svc-local-grid{grid-template-columns:1fr;}} .areas-served .st-card h3.wp-block-heading{font-size:1.1rem;} /* ======================================================================== Smart Money Brief - blended treatment Posts and the Insights archive now use the same gold-soft hero, display face and left alignment as the rest of the site. ======================================================================== */ /* Archive masthead */ .smb-masthead{ background:var(--st-gold-soft); border-bottom:1px solid var(--st-line); padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.2rem,4vw,3rem); text-align:left; position:static; overflow:visible; } .smb-masthead::after{content:none;} .smb-coin{display:none;} .smb-eyebrow{ font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--st-teal); margin:0 0 .7rem; display:block; } .smb-title{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:clamp(2.3rem,4.6vw,3.4rem); color:var(--st-navy); line-height:1.08; letter-spacing:-.02em; margin:0; } .smb-rule{ width:64px; height:3px; background:var(--st-gold); border:none; margin:1.1rem 0 1.2rem; } .smb-tagline{ font-size:1.08rem; color:var(--st-grey); line-height:1.6; margin:0; max-width:60ch; } /* Pillars stay on white below the hero, as in the email */ .smb-pillars{ background:#fff; border-bottom:1px solid var(--st-line); padding:clamp(2rem,4vw,2.8rem) 0; } /* Post hero */ .smb-post-hero{ background:var(--st-gold-soft); border-bottom:1px solid var(--st-line); padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(1.8rem,3.5vw,2.6rem); text-align:left; } .smb-post-hero .back-link{ color:var(--st-teal); font-size:.92rem; font-weight:600; text-decoration:none; display:inline-block; margin-bottom:1.3rem; } .smb-post-hero .back-link:hover{color:var(--st-navy);} .smb-post-hero .wp-block-post-title{ font-family:var(--wp--preset--font-family--display); font-size:clamp(1.9rem,3.8vw,2.8rem); color:var(--st-navy); font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:.3rem 0 0; max-width:22ch; margin-left:0; } .smb-post-hero .wp-block-post-terms, .smb-category-label{ font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--st-gold-deep); display:block; margin:0 0 .1rem; } .smb-post-hero .wp-block-post-terms a{ color:var(--st-gold-deep); text-decoration:none; } .smb-post-hero .wp-block-post-terms a:hover{color:var(--st-navy);} .smb-post-hero .wp-block-post-date, .smb-post-hero .post-meta{ color:var(--st-grey); font-size:.92rem; margin:0; } .st-readtime{color:var(--st-grey);} .st-readtime::before{content:"\00a0\00b7\00a0";} /* Signup band picks up the site tint instead of dark navy */ .smb-signup{ background:var(--st-gold-soft); border:1px solid var(--st-line); border-radius:18px; padding:clamp(2rem,4vw,2.8rem) clamp(1.5rem,3vw,2.4rem); text-align:center; } .smb-signup h2{ font-family:var(--wp--preset--font-family--display); color:var(--st-navy); font-size:clamp(1.4rem,2.8vw,1.95rem); font-weight:800; letter-spacing:-.02em; margin:0 0 .5rem; } .smb-signup p{ color:var(--st-grey); font-size:1rem; margin:0 auto 1.4rem; max-width:52ch; line-height:1.6; } .smb-signup .wpforms-field input[type="email"]{ background:#fff; border-color:var(--st-line); color:var(--st-ink); } .smb-signup .wpforms-field input[type="email"]::placeholder{color:#9aa3a5;} .smb-signup .wpforms-submit{background:var(--st-gold);color:var(--st-navy);} .smb-signup .wpforms-submit:hover{background:var(--st-gold-deep);} /* ======================================================================== Header rigidity fix WP block flex layout allows children to shrink. The original site sets flex:none on the brand and the action cluster so nothing squishes as the viewport narrows or the page is zoomed. Match that behaviour. ======================================================================== */ /* The header row itself */ .st-header > .wp-block-group.alignwide{ gap:1rem; flex-wrap:nowrap; } /* Logo never shrinks */ .st-header .wp-block-site-logo{ flex:none; } .st-header .wp-block-site-logo img{ height:46px; width:auto; display:block; max-width:none; } /* Right-hand action cluster: nav + phone + portal button. flex:none is the key rule - this is what stops the squish. */ .st-header > .wp-block-group.alignwide > .wp-block-group{ flex:none; flex-wrap:nowrap; } /* Phone link holds its width */ .st-header .st-header-phone{ flex:none; white-space:nowrap; } /* Portal button holds its width and never wraps its label */ .st-header .st-header-cta, .st-header .st-header-cta .wp-block-button{ flex:none; } .st-header .st-header-cta .wp-block-button__link{ white-space:nowrap; flex:none; } /* Navigation: items sit on one line, none of them compress */ .st-header .wp-block-navigation{ flex:none; flex-wrap:nowrap; } .st-header .wp-block-navigation__container{ flex-wrap:nowrap; } .st-header .wp-block-navigation-item{ flex:none; } .st-header .wp-block-navigation-item__content{ white-space:nowrap; } /* Matches the original: tighten the nav slightly before it collapses */ @media (max-width:1040px){ .st-header .wp-block-navigation{ --wp--style--block-gap:1.1rem; } .st-header .wp-block-navigation-item__content{ font-size:.9rem; } } /* Below the collapse point the nav becomes the overlay menu, so the desktop rigidity rules must not fight the mobile layout. */ @media (max-width:1080px){ .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ flex-wrap:wrap; } .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ flex:1 1 100%; } } /* ======================================================================== Header stack: Portal login on top, phone number underneath ======================================================================== */ .st-header-stack{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; } /* Button sits flush right and keeps its own width */ .st-header-stack .st-header-cta{ margin:0; flex:none; } .st-header-stack .wp-block-button{ flex:none; } .st-header-stack .wp-block-button__link{ white-space:nowrap; } /* Phone reads as a secondary line under the button */ .st-header-stack .st-header-phone{ flex:none; white-space:nowrap; font-size:.86rem; font-weight:600; color:var(--st-navy); line-height:1.2; gap:.32rem; } .st-header-stack .st-header-phone svg{ width:14px; height:14px; } .st-header-stack .st-header-phone:hover{ color:var(--st-gold-deep); } /* The header row is taller now, so ease the vertical padding back */ .st-header > .wp-block-group.alignwide{ padding-top:.65rem; padding-bottom:.65rem; } /* Below the nav collapse point the Portal button hides, so the phone stops being a stacked sub-line and returns to sitting inline. */ @media (max-width:1080px){ .st-header-stack{ flex-direction:row; align-items:center; gap:.9rem; } .st-header-stack .st-header-cta{ display:none; } .st-header-stack .st-header-phone{ font-size:.9rem; } } /* Very narrow: phone collapses to an icon button, matching the original */ @media (max-width:430px){ .st-header-stack .st-header-phone span{ display:none; } .st-header-stack .st-header-phone{ border:1px solid var(--st-line); border-radius:9px; width:44px; height:44px; justify-content:center; } .st-header-stack .st-header-phone svg{ width:17px; height:17px; } } /* ======================================================================== Silver Grove partner strip (Why Sterling card) ======================================================================== */ .st-partner-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--st-line); } .st-partner-label{ font-size:.78rem; letter-spacing:.06em; color:var(--st-grey); white-space:nowrap; } .st-partner-link{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.98rem; color:var(--st-navy); text-decoration:none; border-bottom:1.5px solid var(--st-gold); padding-bottom:1px; transition:color .15s ease,border-color .15s ease; } .st-partner-link svg{flex:none;transition:transform .15s ease;} .st-partner-link:hover{ color:var(--st-teal); border-color:var(--st-teal); } .st-partner-link:hover svg{transform:translateX(2px);} /* ======================================================================== Sterling Complete lockup - a self-contained wordmark treatment used on the homepage bundle band and the Sterling Complete page hero. ======================================================================== */ .st-sc-lockup{ display:inline-flex; align-items:center; gap:.7rem; margin:0; } .st-sc-mark{ flex:none; display:inline-flex; color:var(--st-gold); } .st-sc-word{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:-.015em; line-height:1; white-space:nowrap; } .st-sc-word-a{color:#fff;} .st-sc-word-b{color:var(--st-gold);margin-left:.4rem;} .st-sc-tagline{ display:block; margin-top:.55rem; font-family:var(--wp--preset--font-family--body); font-weight:600; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; color:#B9CBD1; } /* Stacked variant: wordmark over descriptor, no mark. */ .st-sc-lockup.st-sc-stacked{ flex-direction:column; align-items:flex-start; gap:0; } /* Light-background variant, used on the Sterling Complete page hero */ .st-sc-lockup.st-sc-light .st-sc-mark{color:var(--st-navy);} .st-sc-lockup.st-sc-light .st-sc-word-a{color:var(--st-navy);} .st-sc-lockup.st-sc-light .st-sc-tagline{color:var(--st-grey);} @media (max-width:520px){ .st-sc-word{font-size:1.4rem;} .st-sc-mark svg{width:28px;height:28px;} } /* ======================================================================== Tax + Wealth page — isolated fix Namespaced tw- classes only. Nothing else on the site uses these class names, so there is zero risk of touching other pages by editing here. Matches the original static site's tax-wealth.html section for section. ======================================================================== */ /* Logo lockup: centered card, gold top edge, two logos + divider */ .tw-lockup{ max-width:720px; margin:0 auto; background:#fff; border:1px solid var(--st-line); border-top:4px solid var(--st-gold); border-radius:20px; padding:clamp(2.2rem,4vw,3.2rem) clamp(1.4rem,3vw,2.4rem) clamp(2rem,3.5vw,2.8rem); box-shadow:0 22px 56px rgba(0,68,89,.11); } .tw-lock-eyebrow{ display:block; text-align:center; font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase; color:var(--st-gold-deep); margin-bottom:1.9rem; } .tw-lock-row{ display:flex; align-items:center; justify-content:center; gap:3.2rem; flex-wrap:wrap; } .tw-lock-item{ display:flex; align-items:center; justify-content:center; min-width:0; } .tw-lock-item img{display:block;height:auto;width:auto;max-width:100%;} .tw-lock-sterling img{height:64px;} .tw-lock-sg img{height:60px;} .tw-lock-div{ width:1px; height:74px; background:var(--st-line); flex:none; } .tw-lock-cap{ text-align:center; color:var(--st-grey); font-size:1rem; margin:2rem 0 0; line-height:1.65; } .tw-lock-cap a{ color:var(--st-navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--st-gold); } .tw-lock-cap a:hover{color:var(--st-teal);border-color:var(--st-teal);} @media (max-width:640px){ .tw-lock-row{gap:1.8rem;flex-direction:column;} .tw-lock-div{width:64px;height:1px;} .tw-lock-sterling img{height:48px;} .tw-lock-sg img{height:44px;} } /* Dark band: full-bleed navy, sits inside the theme's own .st-section (vertical padding) + alignfull/constrained (horizontal), so this class only needs to supply color. */ .tw-band-dark{ background:var(--st-navy); color:#CFE1E6; } .tw-band-dark .st-eyebrow{color:var(--st-gold);} .tw-band-dark h2.wp-block-heading{ color:#fff; margin-top:.7rem; } .tw-band-dark p{ color:#BCD3D9; font-size:1.06rem; max-width:640px; line-height:1.65; } .tw-band-dark .wp-block-buttons{margin-top:1.5rem;} .tw-band-dark .wp-block-button__link{ background:var(--st-gold); color:var(--st-navy); } .tw-band-dark .wp-block-button__link:hover{ background:var(--st-gold-deep); transform:translateY(-2px); } .tw-p-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:center; } .tw-p-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:clamp(1.6rem,3vw,2rem) clamp(1.5rem,3vw,1.9rem); } .tw-p-card h3{ color:#fff; font-family:var(--wp--preset--font-family--display); font-size:1.18rem; font-weight:700; margin:0 0 1rem; } .tw-p-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; } .tw-p-list li{ display:flex; gap:.7rem; color:#CFE1E6; font-size:1rem; line-height:1.5; } .tw-p-list .tw-tick{ color:var(--st-gold); flex:none; margin-top:.2rem; } @media (max-width:960px){ .tw-p-grid{grid-template-columns:1fr;} } /* ===== Fix: leftover generic '.phero p' rule (from the ported-original block) was more specific than the bare .st-eyebrow class, so the small uppercase eyebrow label above every .phero H1 was rendering as plain grey body text instead. Affects Tax + Wealth, Privacy, About, Contact. ===== */ .phero .st-eyebrow { display: inline-block; font-family: var(--wp--preset--font-family--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-teal); max-width: none; margin: 0 0 0.7rem; } /* ======================================================================== Bookkeeping tier cards + add-ons box Isolated bk- namespace, mirrors the printed Bookkeeping flyer. No pricing shown — "Quoted monthly" replaces the dollar figure. ======================================================================== */ .bk-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch; } .bk-card{ background:#fff; border:1px solid var(--st-gold); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; } .bk-card-head{ padding:1.3rem 1.5rem 1.15rem; text-align:center; color:#fff; } .bk-card-essential .bk-card-head{background:linear-gradient(135deg,#7C8A90,#54626A);} .bk-card-plus .bk-card-head{background:linear-gradient(135deg,var(--st-teal),#0C4E5E);} .bk-card-advisory .bk-card-head{background:linear-gradient(135deg,var(--st-navy),#012E3D);} .bk-card-icon{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; margin:0 auto .8rem; } .bk-card-icon svg{display:block;} .bk-card-head h3{ color:#fff; font-family:var(--wp--preset--font-family--display); font-size:1.14rem; font-weight:700; margin:0; } .bk-card-body{ padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1; } .bk-quoted{ text-align:center; font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:1.02rem; color:var(--st-navy); margin:0 0 .9rem; padding-bottom:.9rem; border-bottom:1px solid var(--st-line); } .bk-quoted span{ display:block; font-weight:500; font-size:.82rem; color:var(--st-grey); margin-top:.15rem; } .bk-best-for{ font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--st-grey); margin:0 0 .35rem; } .bk-card-body > p{ font-size:.93rem; color:var(--st-ink); line-height:1.5; margin:0 0 .9rem; } .bk-volume{ display:inline-block; background:var(--st-gold-soft); color:var(--st-navy); font-size:.83rem; font-weight:600; padding:.35rem .75rem; border-radius:8px; margin-bottom:.85rem; } .bk-inherit{ font-size:.82rem; font-weight:700; color:var(--st-navy); margin:0 0 .6rem; } .bk-list{ list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; gap:.45rem; flex:1; } .bk-list li{ display:flex; gap:.55rem; font-size:.92rem; color:var(--st-ink); line-height:1.45; } .bk-list li svg{flex:none;margin-top:.15rem;color:var(--st-gold-deep);} .bk-footnote{ font-size:.78rem; color:var(--st-grey); margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--st-line); } @media (max-width:900px){ .bk-tiers{grid-template-columns:1fr;} } /* Common add-ons box */ .bk-addons{ background:#fff; border:1px solid var(--st-line); border-radius:16px; padding:1.4rem 1.6rem; margin-top:1.1rem; } .bk-addons-label{ font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--st-gold-deep); margin:0 0 .2rem; } .bk-addons-sub{ font-size:.86rem; color:var(--st-grey); margin:0 0 .85rem; } .bk-addons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem 1.8rem; } .bk-addons-grid div{ display:flex; gap:.55rem; font-size:.93rem; color:var(--st-ink); } .bk-addons-grid div span{color:var(--st-gold-deep);font-weight:700;flex:none;} @media (max-width:760px){ .bk-addons-grid{grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .bk-addons-grid{grid-template-columns:1fr;} } .bk-disclaimer{ font-size:.82rem; color:var(--st-grey); line-height:1.6; margin-top:.9rem; max-width:90ch; } /* ===== Sterling Complete hero: center the lockup as its own branded moment, keep H1/lede/buttons on a clean shared left edge. Scoped to page-id-45 only — st-page-hero is shared by 20 pages and looks correct everywhere else. ===== */ .page-id-45 .st-page-hero .st-sc-heading { display: flex; justify-content: center; text-align: center; margin: 0 0 1.6rem; } .page-id-45 .st-page-hero .st-sc-lockup.st-sc-stacked { align-items: center; } .page-id-45 .st-page-hero .st-sc-tagline { text-align: center; } .page-id-45 .st-page-hero h1.wp-block-heading, .page-id-45 .st-page-hero .st-lede, .page-id-45 .st-page-hero .wp-block-buttons { text-align: left; margin-left: 0; margin-right: 0; max-width: none; } /* ===== Sterling Complete: Flagship treatment (page-id-45 only). The only dark hero on the site. Every service page opens gold-soft; the flagship opening navy+gold is what signals "this is the one." ===== */ .page-id-45 .st-page-hero { background: linear-gradient(140deg, var(--st-navy), #013A49); border-bottom: 3px solid var(--st-gold); padding-top: clamp(2.6rem, 5.5vw, 4.2rem); padding-bottom: clamp(2.2rem, 4.5vw, 3.4rem); } .page-id-45 .st-sc-flagtag { text-align: center; margin: 0 0 1.1rem; } .page-id-45 .st-page-hero h1.wp-block-heading { color: #fff; } .page-id-45 .st-page-hero .st-lede { color: #BCD3D9; } .page-id-45 .st-page-hero .wp-block-button:not(.is-style-st-outline) .wp-block-button__link { background: var(--st-gold); color: var(--st-navy); } .page-id-45 .st-page-hero .wp-block-button:not(.is-style-st-outline) .wp-block-button__link:hover { background: var(--st-gold-deep); } .page-id-45 .st-page-hero .is-style-st-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .page-id-45 .st-page-hero .is-style-st-outline .wp-block-button__link:hover { border-color: #fff; background: rgba(255,255,255,.08); } /* ======================================================================== About page — exact port of the original about.html components. Namespaced abt- to avoid the shared-class collisions that hit tax-wealth (session 19) and phero (session 20). Values copied verbatim from the original static stylesheet. ======================================================================== */ /* Values grid (Our approach) */ .abt-val-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem; } .abt-val{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:1.6rem; } .abt-val .abt-vnum{ font-family:var(--wp--preset--font-family--display); font-weight:700; color:var(--st-gold-deep); font-size:1.05rem; } .abt-val h3{ font-family:var(--wp--preset--font-family--display); color:var(--st-ink); font-size:1.16rem; font-weight:700; margin:.55rem 0 .5rem; } .abt-val p{ color:var(--st-grey); font-size:.96rem; line-height:1.65; margin:0; } /* Centered section head (team intro) */ .abt-center{ text-align:center; max-width:62ch; margin-left:auto; margin-right:auto; } .abt-center .st-rule-gold{margin-left:auto;margin-right:auto;} /* Team grid — vertical portrait cards */ .abt-team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1.2rem; } .abt-member{ background:#fff; border:1px solid var(--st-line); border-radius:14px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; } .abt-member:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -34px rgba(0,68,89,.5); } .abt-member .abt-photo{ aspect-ratio:3/4; width:100%; object-fit:cover; object-position:center 18%; display:block; background:var(--st-gold-soft); } .abt-member .abt-info{padding:.95rem 1.05rem 1.15rem;} .abt-member h3{ font-family:var(--wp--preset--font-family--display); color:var(--st-ink); font-size:1.04rem; font-weight:700; margin:0 0 .2rem; } .abt-member .abt-role{ font-size:.82rem; color:var(--st-teal); font-weight:600; line-height:1.35; } /* Office cards */ .abt-offices3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.2rem; } .abt-ocard{ background:#fff; border:1px solid var(--st-line); border-radius:16px; padding:1.7rem 1.5rem; text-decoration:none; display:block; transition:transform .18s, box-shadow .18s, border-color .18s; } .abt-ocard:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,68,89,.09); border-color:var(--st-gold); } .abt-ocard .abt-k{ font-family:var(--wp--preset--font-family--display); font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--st-gold-deep); } .abt-ocard h3{ font-family:var(--wp--preset--font-family--display); color:var(--st-navy); font-size:1.2rem; font-weight:700; margin:.45rem 0 .5rem; } .abt-ocard p{ color:var(--st-grey); font-size:.95rem; margin:0; line-height:1.55; } .abt-ocard .abt-go{ color:var(--st-navy); font-weight:600; font-size:.9rem; display:block; margin-top:.9rem; } .abt-svc-note{ color:var(--st-grey); font-size:.92rem; margin-top:1.2rem; line-height:1.55; } @media(max-width:860px){ .abt-offices3{grid-template-columns:1fr;} } @media(max-width:640px){ .abt-team-grid{grid-template-columns:repeat(2,1fr);} } /* ===== Sterling Complete: flagship lockup scale (page-id-45 only). On this page the lockup is the hero brand moment, so it sits above H1 scale. Homepage bundle-band lockup is untouched. ===== */ .page-id-45 .st-page-hero .st-sc-word { font-size: clamp(2.6rem, 6vw, 4.1rem); } .page-id-45 .st-page-hero .st-sc-tagline { font-size: clamp(.92rem, 1.4vw, 1.05rem); letter-spacing: .14em; margin-top: .8rem; } .page-id-45 .st-page-hero .st-sc-heading { margin-bottom: 2rem; } .page-id-45 .st-page-hero h1.wp-block-heading { font-size: clamp(1.6rem, 3vw, 2.15rem); } /* ======================================================================== Advisory page — mirrors SterlingStrategy_FINAL_DRAFT flyer. Isolated adv- namespace per the collision lessons of sessions 19-22. ======================================================================== */ /* Hero grid: copy left, custom-quote card right */ .adv-hero-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.6rem,3.5vw,3rem); align-items:start; } @media(max-width:860px){ .adv-hero-grid{grid-template-columns:1fr;} } .adv-quote{ background:linear-gradient(150deg,var(--st-navy),#013A49); border:1.5px solid var(--st-gold); border-radius:14px; padding:1.7rem 1.5rem; text-align:center; color:#fff; } .adv-quote .adv-q-rule{width:38px;height:3px;background:var(--st-gold);margin:0 auto .9rem;} .adv-q-label{ font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; color:var(--st-gold); } .adv-q-sub{font-size:.9rem;color:#BCD3D9;margin:.5rem 0 0;line-height:1.5;} .adv-q-div{border-top:1px solid rgba(255,255,255,.2);margin:1rem 0;} .adv-q-foot{ font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; } /* Two-column tick grid (Everything in Forecast, plus) */ .adv-ticks{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.65rem 2.4rem; } .adv-ticks li{ display:flex; gap:.6rem; color:var(--st-ink); font-size:1rem; line-height:1.5; } .adv-ticks li svg{flex:none;margin-top:.2rem;color:var(--st-gold-deep);} @media(max-width:720px){ .adv-ticks{grid-template-columns:1fr;} } .adv-built{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--st-line); color:var(--st-ink); font-size:1.02rem; } .adv-built strong{font-family:var(--wp--preset--font-family--display);color:var(--st-navy);} /* Numbered gold-circle steps */ .adv-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:1.8rem; } .adv-step-num{ width:42px; height:42px; border-radius:50%; border:2px solid var(--st-gold); color:var(--st-gold-deep); font-family:var(--wp--preset--font-family--display); font-weight:800; font-size:1.15rem; display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; } .adv-step h3{ font-family:var(--wp--preset--font-family--display); color:var(--st-ink); font-size:1.14rem; font-weight:700; margin:0 0 .4rem; } .adv-step p{color:var(--st-grey);font-size:.97rem;line-height:1.6;margin:0;} @media(max-width:860px){ .adv-steps{grid-template-columns:1fr;} } /* Gold CTA band — the flyer's signature closer */ .adv-cta{ background:var(--st-gold); border-radius:20px; padding:clamp(1.8rem,3.5vw,2.6rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; } .adv-cta h2.wp-block-heading{ color:var(--st-navy); font-size:clamp(1.5rem,2.9vw,2rem); margin:0 0 .4rem; } .adv-cta p{color:#5a4a1e;font-size:1.02rem;margin:0;max-width:52ch;} .adv-cta .wp-block-button__link{ background:var(--st-navy); color:#fff; white-space:nowrap; } .adv-cta .wp-block-button__link:hover{ background:#003748; transform:translateY(-2px); } /* ===== About alignment patch ===== A global rule pins .st-rule-gold left with !important, which was silently defeating the centered team head. Match its weight here. Grid top-margins move to the head wrappers' bottom margins. */ .abt-center .st-rule-gold{ margin-left:auto !important; margin-right:auto !important; } .abt-center{margin-bottom:clamp(1.5rem,3vw,2.1rem);} .abt-center p{margin-left:auto;margin-right:auto;} .abt-offices3{margin-top:0;} .abt-svc-note{margin-top:1rem;} .abt-val-grid{gap:1rem;} .abt-team-grid{gap:1.05rem;} /* ===== Root alignment fix (sitewide) ===== WP constrained layout force-centers every direct child with margin auto !important. Any child carrying its own max-width (hero ledes, notes, width-capped paragraphs) floats to center while its text stays left. Doubled class = higher specificity than WP's container rule, so left-pinning wins everywhere. */ .st-page-hero.st-page-hero > :where(p,h1,h2,h3,ul,ol,hr), .phero.phero > :where(p,h1,h2,h3,ul,ol,hr), .st-section.st-section > :where(p,h1,h2,h3,ul,ol,hr){ /* anchor narrow children to the centered 1160 column left edge: 0 on small screens, half the leftover space on wide screens */ margin-left:max(0px, calc((100% - 1160px) / 2)) !important; margin-right:0 !important; } /* About: tighter rhythm */ .page-id-53 .phero{padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(1.5rem,3vw,2.2rem);} .page-id-53 .st-section-head{margin-bottom:clamp(1.3rem,2.4vw,1.8rem);} .page-id-53 .abt-center{margin-bottom:clamp(1.2rem,2.2vw,1.6rem);} /* ======================================================================== Mobile header — mirrors the original site's behavior Original: hamburger at ≤1080px (slide-down paper panel, bordered full-width links, portal link inside the menu), phone collapses to a 44px icon-only bordered button, logo 40px on small screens. WP's nav block only collapses at 600px, so the 600-1080 band is forced into overlay mode here with CSS. ======================================================================== */ /* --- 600-1080: force the hamburger (WP would show inline nav) --- */ @media (min-width:600px) and (max-width:1080px){ .st-header .wp-block-navigation__responsive-container-open{ display:flex !important; } .st-header .wp-block-navigation__responsive-container:not(.is-menu-open){ display:none !important; } } /* --- ≤1080: portal button leaves the header (lives in the menu now), actions become one row: phone + hamburger --- */ @media (max-width:1080px){ .st-header .st-header-stack .st-header-cta{display:none;} .st-header-stack{ flex-direction:row; align-items:center; gap:.6rem; } /* hamburger styled like the original 44px bordered square */ .st-header .wp-block-navigation__responsive-container-open{ border:1px solid var(--st-line); border-radius:9px; width:44px; height:44px; align-items:center; justify-content:center; color:var(--st-ink); background:none; padding:0; } } /* --- ≤600: phone goes icon-only (44px bordered), logo 40px --- */ @media (max-width:600px){ .st-header-phone span{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .st-header-phone{ border:1px solid var(--st-line); border-radius:9px; width:44px; height:44px; justify-content:center; gap:0; } .st-header .wp-block-site-logo img{height:40px;} } /* --- overlay panel: paper background, room under the close button, full-width bordered links like the original slide-down --- */ .st-header .wp-block-navigation__responsive-container.is-menu-open{ background:var(--st-paper); padding:4.6rem 1.4rem 1.5rem; } .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ border-bottom:1px solid var(--st-line); width:100%; } .st-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child{ border-bottom:none; } /* submenus open flat inside the panel, like the original dd-panel static */ .st-header .is-menu-open .wp-block-navigation-submenu .wp-block-navigation__submenu-container{ display:block !important; position:static !important; visibility:visible !important; opacity:1 !important; box-shadow:none !important; border:0 !important; padding:0 0 .3rem .9rem !important; min-width:0 !important; } .st-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ font-size:.92rem; color:var(--st-grey); } /* portal item: hidden in desktop nav, shown in the open panel, bold navy */ .st-header .wp-block-navigation .st-nav-portal{display:none;} .st-header .is-menu-open .st-nav-portal{display:block;} .st-header .is-menu-open .st-nav-portal .wp-block-navigation-item__content{ color:var(--st-navy); font-weight:700; } /* ===== Tax + Wealth polish: bigger logos, tighter rhythm ===== */ .tw-lock-sterling img{height:84px;} .tw-lock-sg img{height:78px;display:block;} .tw-lock-sg a{display:block;line-height:0;} .tw-lock-sg a:hover img{opacity:.85;} .tw-lockup{padding:clamp(1.7rem,3vw,2.4rem) clamp(1.2rem,2.5vw,2rem) clamp(1.5rem,2.5vw,2rem);} .tw-lock-eyebrow{margin-bottom:1.4rem;} .tw-lock-row{gap:2.4rem;} .tw-lock-cap{margin:1.4rem 0 0;} @media (max-width:640px){ .tw-lock-sterling img{height:58px;} .tw-lock-sg img{height:54px;} } .page-id-52 .st-section-head{margin-bottom:clamp(1.3rem,2.4vw,1.8rem);} .page-id-52 .phero{padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(1.5rem,3vw,2.2rem);} .page-id-52 .disclosure{margin-top:0;} /* ===== Insights pillar + coin fix (session 36) ===== .smb-pillar item styling was missing entirely; icons/labels rendered unstyled across the page. Authoritative block. */ .smb-coin{ display:block; width:clamp(64px,8vw,84px); height:auto; margin:0 0 1rem; } .smb-pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; } .smb-pillar{ background:#fff; border:1px solid var(--st-line); border-radius:14px; padding:1.4rem 1.2rem; text-align:center; } .smb-pillar img{ width:48px; height:48px; display:block; margin:0 auto .7rem; } .smb-pillar-label{ display:block; font-family:var(--wp--preset--font-family--display); font-weight:700; color:var(--st-navy); font-size:1rem; margin-bottom:.3rem; } .smb-pillar-desc{ color:var(--st-grey); font-size:.88rem; line-height:1.5; margin:0; } @media (max-width:900px){ .smb-pillar-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:480px){ .smb-pillar-grid{grid-template-columns:1fr;} } /* ===== Insights pillar equal-height (session 37) ===== An earlier .smb-pillar-grid block sets align-items:start, so cards sized to their own content and the row looked ragged. */ .smb-pillar-grid{align-items:stretch;} .smb-pillar{display:flex;flex-direction:column;height:100%;} .smb-pillar-desc{margin-top:0;} /* ===== Insights masthead: centered stacked lockup + tighter rhythm (session 39). Appended last so it beats the three earlier .smb-* blocks still present in this sheet. ===== */ .smb-masthead{ text-align:center; padding:clamp(1.8rem,3.6vw,2.6rem) 0 clamp(1.3rem,2.5vw,1.8rem); } .smb-coin{ display:block; width:clamp(72px,8vw,92px); height:auto; margin:0 auto .85rem; } .smb-eyebrow{margin:0 0 .55rem;} .smb-rule{margin:.9rem auto 1rem;} .smb-tagline{margin:0 auto;max-width:56ch;} .smb-pillars{padding:clamp(1.1rem,2.2vw,1.6rem) 0;} .smb-pillar-grid{gap:1rem;align-items:stretch;} .smb-pillar{ padding:1.15rem 1rem; display:flex; flex-direction:column; justify-content:center; height:100%; } /* ===== Mobile overlay: full-width left-aligned panel (session 40) ===== WP sets align-items to --navigation-layout-justification-setting on the overlay content, container AND items. This nav is items-justified-right (correct for the desktop bar), so the OPEN menu inherited flex-end and every link was squeezed into a ~136px column on the right edge with 16-18px tap targets. Override to stretch/left for the overlay only. */ .st-header .wp-block-navigation__responsive-container.is-menu-open{ padding:0 !important; background:var(--st-paper) !important; --wp--style--block-gap:0px; gap:0 !important; } .st-header .is-menu-open .wp-block-navigation__responsive-container-content{ padding:4.2rem 1.25rem 1.5rem !important; align-items:stretch !important; gap:0 !important; width:100%; } .st-header .is-menu-open .wp-block-navigation__container{ align-items:stretch !important; gap:0 !important; width:100%; } .st-header .is-menu-open .wp-block-navigation-item{ align-items:stretch !important; width:100%; } /* 46px tap targets, comfortably above the 44px minimum */ .st-header .is-menu-open .wp-block-navigation-item__content{ display:flex !important; align-items:center; min-height:46px; width:100%; font-size:1.02rem; color:var(--st-ink); } .st-header .is-menu-open .wp-block-navigation__submenu-container{ padding:0 0 .35rem .9rem !important; gap:0 !important; width:100%; } .st-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border-bottom:none !important;} .st-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ min-height:38px;font-size:.92rem;color:var(--st-grey); } /* close button to the top right, 44px target */ .st-header .wp-block-navigation__responsive-container-close{ position:absolute;top:1rem;right:1.25rem; width:44px;height:44px; display:flex;align-items:center;justify-content:center; color:var(--st-navy); } /* ======================================================================== Contact page — CTA landing layout (ctc- namespace, session 41) Form is the primary conversion element: elevated card, top right of the hero, above the fold on desktop. ======================================================================== */ .ctc-hero{ background:var(--st-gold-soft); border-bottom:1px solid var(--st-line); padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(2.4rem,5vw,3.6rem); } .ctc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:start; } .ctc-hero h1{ font-size:clamp(2.1rem,4.4vw,3rem); color:var(--st-navy); line-height:1.06; letter-spacing:-.02em; margin:0; } .ctc-lede{font-size:1.12rem;line-height:1.6;margin:0 0 1.4rem;max-width:46ch;} .ctc-trust{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.6rem;} .ctc-trust li{display:flex;gap:.6rem;align-items:flex-start;color:var(--st-ink);font-size:1rem;line-height:1.45;} .ctc-trust svg{flex:none;margin-top:.15rem;color:var(--st-gold-deep);} .ctc-direct{border-top:1px solid rgba(0,68,89,.13);padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;} .ctc-direct a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--st-navy);font-weight:600;font-size:1rem;} .ctc-direct a:hover{color:var(--st-gold-deep);} .ctc-direct svg{flex:none;color:var(--st-gold-deep);} .ctc-hourscard{ margin-top:1.5rem; background:rgba(255,255,255,.55); border:1px solid rgba(0,68,89,.10); border-radius:14px; padding:1.1rem 1.2rem; } .ctc-hourscard .ctc-k{ font-family:var(--wp--preset--font-family--display); font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; color:var(--st-gold-deep);display:block;margin-bottom:.5rem; } .ctc-hourscard p{margin:0 0 .55rem;font-size:.95rem;line-height:1.55;color:var(--st-ink);} .ctc-hourscard p:last-child{margin-bottom:0;} .ctc-hourscard .ctc-sm{font-size:.87rem;color:var(--st-grey);} /* ---------- form card ---------- */ .ctc-card{ background:#fff; border:1px solid var(--st-line); border-radius:18px; padding:clamp(1.4rem,2.6vw,2rem); box-shadow:0 22px 48px -30px rgba(0,68,89,.35); } .ctc-badge{ display:inline-flex;align-items:center;gap:.4rem; background:var(--st-gold-soft);color:var(--st-navy); font-family:var(--wp--preset--font-family--display); font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase; padding:.35rem .7rem;border-radius:999px;margin-bottom:.8rem; } .ctc-card-head{margin-bottom:1.1rem;} .ctc-card-head h2{font-size:1.32rem;font-weight:700;color:var(--st-navy);margin:0 0 .3rem;} .ctc-card-head p{margin:0;font-size:.95rem;color:var(--st-grey);} /* WPForms restyled to brand */ .ctc-card .wpforms-container{margin:0;} .ctc-card fieldset{border:0;padding:0;margin:0;min-width:0;} .ctc-card legend{padding:0;} .ctc-card .wpforms-field{padding:0 0 .9rem;} .ctc-card .wpforms-field-label{ font-family:var(--wp--preset--font-family--display); font-weight:700;font-size:.86rem;color:var(--st-ink); margin:0 0 .35rem;display:block;padding:0; } .ctc-card .wpforms-required-label{color:var(--st-gold-deep);} .ctc-card input[type=text], .ctc-card input[type=email], .ctc-card input[type=tel], .ctc-card select, .ctc-card textarea{ width:100%;box-sizing:border-box; font-family:var(--wp--preset--font-family--body); font-size:.98rem;color:var(--st-ink);background:#fff; border:1px solid var(--st-line);border-radius:10px; padding:.72rem .85rem;line-height:1.35; } .ctc-card textarea{min-height:118px;resize:vertical;} .ctc-card input:focus,.ctc-card select:focus,.ctc-card textarea:focus{ outline:none;border-color:var(--st-teal);box-shadow:0 0 0 3px rgba(20,108,132,.13); } .ctc-card .wpforms-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;} .ctc-card .wpforms-field-row-block{width:auto !important;padding:0 !important;float:none !important;} .ctc-card .wpforms-field-sublabel{ font-size:.76rem;color:var(--st-grey);margin-top:.25rem;display:block; font-family:var(--wp--preset--font-family--body);font-weight:400; } .ctc-card .wpforms-field-hp{display:none !important;} .ctc-card .wpforms-submit-container{padding-top:.3rem;} .ctc-card button[type=submit], .ctc-card .wpforms-submit{ width:100%;background:var(--st-navy);color:#fff; font-family:var(--wp--preset--font-family--display); font-weight:700;font-size:1rem;border:0;border-radius:11px; padding:.9rem 1.4rem;cursor:pointer;transition:var(--st-transition); } .ctc-card button[type=submit]:hover, .ctc-card .wpforms-submit:hover{background:#013A49;transform:translateY(-1px);} .ctc-card .wpforms-error{color:#b3261e;font-size:.82rem;margin-top:.3rem;} .ctc-card .wpforms-confirmation-container-full{ background:var(--st-gold-soft);border:1px solid var(--st-gold); border-radius:12px;padding:1rem 1.1rem;color:var(--st-ink); } .ctc-note{ font-size:.79rem;line-height:1.5;color:var(--st-grey); margin:.9rem 0 0;padding-top:.85rem;border-top:1px solid var(--st-line); } /* ---------- what happens next ---------- */ .ctc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;} .ctc-step-num{ width:40px;height:40px;border-radius:50%; border:2px solid var(--st-gold);color:var(--st-gold-deep); font-family:var(--wp--preset--font-family--display);font-weight:800; display:flex;align-items:center;justify-content:center;margin-bottom:.7rem; } .ctc-step h3{font-size:1.08rem;font-weight:700;margin:0 0 .3rem;color:var(--st-ink);} .ctc-step p{margin:0;font-size:.96rem;line-height:1.55;color:var(--st-grey);} /* ---------- offices ---------- */ .ctc-offices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;} .ctc-ocard{ background:#fff;border:1px solid var(--st-line);border-radius:16px; padding:1.5rem 1.4rem;display:flex;flex-direction:column; text-decoration:none;color:var(--st-grey);transition:var(--st-transition); } .ctc-ocard:hover{transform:translateY(-3px);border-color:var(--st-gold);box-shadow:0 16px 36px rgba(0,68,89,.09);} .ctc-ocard *{text-decoration:none;} .ctc-ocard .ctc-k{ font-family:var(--wp--preset--font-family--display); font-weight:700;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--st-gold-deep); } .ctc-ocard h3{font-size:1.2rem;font-weight:700;color:var(--st-navy);margin:.4rem 0 .5rem;} .ctc-ocard p{margin:0;font-size:.95rem;line-height:1.55;} .ctc-ocard .ctc-tel{ display:inline-flex;align-items:center;gap:.45rem;margin-top:.7rem; color:var(--st-navy);font-weight:700;font-size:1.02rem; } .ctc-ocard .ctc-go{margin-top:auto;padding-top:.9rem;color:var(--st-navy);font-weight:600;font-size:.9rem;} /* ---------- closing band ---------- */ .ctc-band{ background:linear-gradient(140deg,var(--st-navy),#013A49); color:#fff;border-radius:20px; padding:clamp(1.8rem,3.5vw,2.6rem); } .ctc-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;} .ctc-band h2{color:#fff;font-size:clamp(1.5rem,2.8vw,2rem);margin:0 0 .35rem;} .ctc-band p{color:#BCD3D9;margin:0;max-width:52ch;font-size:1rem;} .ctc-band .wp-block-buttons{gap:.8rem;} .ctc-band .wp-block-button__link{background:var(--st-gold);color:var(--st-navy);white-space:nowrap;} .ctc-band .wp-block-button__link:hover{background:var(--st-gold-deep);} .ctc-band .is-style-st-outline-light .wp-block-button__link{ background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45); } .ctc-hours{ margin:1.2rem 0 0;font-size:.93rem;color:#BCD3D9; border-top:1px solid rgba(255,255,255,.16);padding-top:1rem; } @media (max-width:900px){ .ctc-grid{grid-template-columns:1fr;} .ctc-steps,.ctc-offices{grid-template-columns:1fr;} } /* ======================================================================== CRITICAL mobile menu containment fix (session 42) .st-header carries backdrop-filter for the frosted glass effect. Per spec, an element with backdrop-filter becomes the CONTAINING BLOCK for position:fixed descendants. The nav overlay (position:fixed;inset:0) was therefore clamped to the header box: measured 46px tall holding 749px of links, unscrollable. Drop the effect below the desktop breakpoint (solid background instead) so the overlay escapes to the viewport, and again whenever the menu is open at any width. ======================================================================== */ @media (max-width:1080px){ .st-header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--st-paper) !important; } } /* belt and braces: any width, while the overlay is open */ .st-header:has(.wp-block-navigation__responsive-container.is-menu-open){ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--st-paper) !important; position:static !important; } /* the panel itself: full dynamic viewport height and properly scrollable */ .st-header .wp-block-navigation__responsive-container.is-menu-open{ position:fixed !important; inset:0 !important; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* keep the last items clear of the phone home indicator */ .st-header .is-menu-open .wp-block-navigation__responsive-container-content{ padding-bottom:calc(2.5rem + env(safe-area-inset-bottom)) !important; } /* stop the page behind the overlay from scrolling */ body.has-modal-open,html:has(.wp-block-navigation__responsive-container.is-menu-open){ overflow:hidden; } /* ======================================================================== Contact form: deterministic field geometry (session 44) WPForms modern sets .wpforms-container .wpforms-field .wpforms-field-row {display:flex;justify-content:space-between} at 0,3,0 which beat my grid, while .wpforms-field-sublabel{min-width:120px} gives each half a floor of 120px. On narrower cards the two halves then exceed the row and wrap, leaving First/Last ragged and out of line with the fields below. These selectors sit at 0,5,0 / 0,6,0 so nothing in that sheet outranks them, and every control is pinned to one shared geometry. ======================================================================== */ .ctc-card .wpforms-container .wpforms-form .wpforms-field.wpforms-field-name .wpforms-field-row, .ctc-card .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:.7rem !important; margin:0 !important; align-items:start !important; container-type:normal !important; } .ctc-card .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block{ width:100% !important; max-width:100% !important; min-width:0 !important; padding:0 !important; margin:0 !important; float:none !important; } .ctc-card .wpforms-container .wpforms-form .wpforms-field-sublabel{ min-width:0 !important; margin-top:.25rem !important; font-size:.76rem !important; color:var(--st-grey) !important; } /* one shared geometry for every control so nothing reads ragged */ .ctc-card .wpforms-container .wpforms-form input[type=text], .ctc-card .wpforms-container .wpforms-form input[type=email], .ctc-card .wpforms-container .wpforms-form input[type=tel], .ctc-card .wpforms-container .wpforms-form select, .ctc-card .wpforms-container .wpforms-form textarea{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; height:auto !important; min-height:46px !important; padding:.72rem .85rem !important; border:1px solid var(--st-line) !important; border-radius:10px !important; background:#fff !important; color:var(--st-ink) !important; font-family:var(--wp--preset--font-family--body) !important; font-size:.98rem !important; line-height:1.35 !important; margin:0 !important; } .ctc-card .wpforms-container .wpforms-form textarea{min-height:118px !important;} .ctc-card .wpforms-container .wpforms-form input:focus, .ctc-card .wpforms-container .wpforms-form select:focus, .ctc-card .wpforms-container .wpforms-form textarea:focus{ border-color:var(--st-teal) !important; box-shadow:0 0 0 3px rgba(20,108,132,.13) !important; outline:none !important; } .ctc-card .wpforms-container .wpforms-form .wpforms-field{padding:0 0 .9rem !important;} /* very narrow phones: stack the two halves rather than squeeze them */ @media (max-width:420px){ .ctc-card .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row{ grid-template-columns:1fr !important; gap:.9rem !important; } } /* ======================================================================== Contact form name row: clearfix pseudo-elements become grid items WPForms ships: .wpforms-field-row:before{content:"";display:table} .wpforms-field-row:after {content:"";display:table} Harmless in their float layout, but session 44 made the row a grid and pseudo-elements ARE grid items: ::before took cell 1, First was pushed to cell 2, Last wrapped to the next row and ::after took the last cell, producing the diagonal First/Last stagger. Remove them from this row. ======================================================================== */ .ctc-card .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row:before, .ctc-card .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row:after, .ctc-card .wpforms-container .wpforms-field .wpforms-field-row:before, .ctc-card .wpforms-container .wpforms-field .wpforms-field-row:after{ content:none !important; display:none !important; } /* ===== Thank you page (conversion endpoint) ===== */ .ty-hero{text-align:left;} .ty-check{ width:58px;height:58px;border-radius:50%; background:var(--st-navy);color:#fff; display:flex;align-items:center;justify-content:center; margin:0 0 1.1rem;border:3px solid var(--st-gold); } .ty-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;} .ty-card{ background:#fff;border:1px solid var(--st-line);border-radius:16px; padding:1.5rem 1.4rem;display:flex;flex-direction:column; text-decoration:none;color:var(--st-grey);transition:var(--st-transition); } .ty-card:hover{transform:translateY(-3px);border-color:var(--st-gold);box-shadow:0 16px 36px rgba(0,68,89,.09);} .ty-card *{text-decoration:none;} .ty-card .ty-k{ font-family:var(--wp--preset--font-family--display);font-weight:700; font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--st-gold-deep); } .ty-card h3{font-family:var(--wp--preset--font-family--display);font-size:1.14rem;font-weight:700;color:var(--st-navy);margin:.4rem 0 .5rem;} .ty-card p{margin:0;font-size:.95rem;line-height:1.55;} .ty-card .ty-go{margin-top:auto;padding-top:.9rem;color:var(--st-navy);font-weight:600;font-size:.9rem;} @media (max-width:900px){.ty-cards{grid-template-columns:1fr;}} /* ===== Footer: service by location links ===== Keeps the nine service x town pages linked from every page after the Bookkeeping "Areas we serve" section was removed. Deliberately quiet: small, muted, below the main footer columns. ===== */ .st-footer-local{margin-top:2.4rem;} .st-fl-head{ display:block; font-family:var(--wp--preset--font-family--display); font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--st-gold);margin-bottom:.9rem; } .st-fl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.6rem;} .st-fl-col{display:flex;flex-direction:column;gap:.28rem;} .st-fl-town{ font-weight:600;font-size:.86rem;color:#fff;margin-bottom:.15rem; } .st-fl-col a{ color:rgba(255,255,255,.62); font-size:.84rem;line-height:1.5;text-decoration:none; transition:color .18s ease; } .st-fl-col a:hover{color:#fff;} @media (max-width:760px){ .st-fl-grid{grid-template-columns:1fr;gap:1.1rem;} } /* Checklist contrast fix. .checklist li was set to #eaf0f1, a near-white intended for navy bands. On light sections (for example .st-tint on the Preparation page) that text was unreadable. Default the list to ink and keep the light colour only where the checklist sits inside a dark .st-band. */ .checklist li{color:var(--st-ink);} .st-band .checklist li{color:#eaf0f1;} /* Outline button on dark bands. .is-style-st-outline sets navy text for light backgrounds. Several pages use it inside a navy .st-band, where the label became navy on navy and looked like an empty box. Inside a dark band, render it like the light variant. */ .st-band .is-style-st-outline .wp-block-button__link, .st-band .wp-block-button.is-style-st-outline .wp-block-button__link{ color:#fff; border-color:rgba(255,255,255,.45); } .st-band .is-style-st-outline .wp-block-button__link:hover{ background:#fff; color:var(--st-navy); border-color:#fff; } /* Checklist marker fix. .checklist sits on the wrapper div, with a wp-block-list ul inside, so the list-style:none on li was not reliably suppressing the default disc. The marker inherits text colour, so it was invisible while the text was near-white and appeared once the text was darkened. Suppress the list marker on the list itself and keep the gold check from li::before. */ .checklist ul, .checklist ol{list-style:none;margin:0;padding:0;} .checklist ul li, .checklist ol li{list-style:none;} .checklist ul li::marker, .checklist ol li::marker{content:"";} /* Grid child alignment fix. WordPress applies margin-block-start to every child except the first via :where(.wp-block-group.is-layout-flow) > :not(:first-child). In a grid row that pushes cards 2 and 3 down while card 1 stays put, so the row looks misaligned. The theme already zeroes this for .drivers, .tiers, .offices3 and others, but .svc-local-grid and .areas-served were missed. */ .svc-local-grid > *, .areas-served > *, .svc-grid > *{margin-block-start:0 !important;} .svc-local-grid, .areas-served{align-items:stretch;} /* Sterling Complete band alignment. The band uses WordPress constrained layout, which puts margin-left/right:auto !important on every block child and caps them at the content size. That centred the heading, list and buttons at one indent and the paragraph (max-width 660px) at a deeper one, while the inline-block .st-tag pill stayed flush left. Pin every child to the band's left edge and keep a readable measure on the paragraph. */ .st-bundle > *{ margin-left:0 !important; margin-right:0 !important; max-width:none; } .st-bundle > .st-bp{max-width:660px;} .st-bundle > .st-sc-heading{margin-top:.9rem !important;} /* Audience chooser doors, centred. Was a cramped left-aligned row with the title at 1.05rem and the arrow pushed to the far right, so the cards read as list items rather than a choice. Stack and centre the contents, lift the title to headline size and bring the arrow under the text as a centred affordance. */ .st-fork .st-door{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:.8rem; padding:1.9rem 1.5rem 1.5rem; } .st-fork .st-door .st-fork-ico{ width:52px; height:52px; border-radius:14px; } .st-fork .st-door .st-fork-ico svg{width:24px;height:24px;} .st-fork .st-door .st-door-txt{flex:0 1 auto;width:100%;} .st-fork .st-door .st-door-txt h2{ font-size:clamp(1.2rem,2vw,1.45rem) !important; line-height:1.2; margin:0 0 .35rem !important; } .st-fork .st-door .st-door-txt p{ font-size:.95rem !important; color:var(--st-grey); max-width:34ch; margin:0 auto !important; } .st-fork .st-door::after{ margin-left:0; margin-top:.2rem; font-size:1.05rem; color:var(--st-gold-deep); transition:transform var(--st-transition); } .st-fork .st-door:has(a:hover)::after, .st-fork .st-door:has(a:focus-visible)::after{transform:translateX(4px);} @media (max-width:600px){ .st-fork .st-door{padding:1.5rem 1.2rem 1.2rem;} }