/* ========================================================================== Kinspire Holdings — theme stylesheet Dark navy base with a gold parent accent. Each division section swaps a single custom property, so one rule set serves all four brands. ========================================================================== */ :root { --kh-navy: #1a1a2e; --kh-navy-soft: #24243c; --kh-ink: #12121f; --kh-surface: #2c2c48; --kh-surface-2: #343455; --kh-gold: #c9a84c; --kh-gold-soft: #e3ce8f; --kh-body-light: #e8e8f0; --kh-muted-light: #a9a9be; --kh-champagne: #edeae0; /* The parent brand accent. Division sections override this one line. */ --kh-accent: #c9a84c; --kh-accent-dim: rgba(201, 168, 76, 0.34); --kh-accent-wash: rgba(201, 168, 76, 0.09); --kh-radius-card: 10px; --kh-shadow-card: 0 14px 40px rgba(0, 0, 0, 0.45); } /* Division accents. Set on by kinspireh_body_class(). All four clear WCAG AA on navy, ink, navy-soft, and the card surface. */ body.kh-division-solutions { --kh-accent: #4ea8de; --kh-accent-dim: rgba(78, 168, 222, 0.34); --kh-accent-wash: rgba(78, 168, 222, 0.09); } body.kh-division-media { --kh-accent: #ee9a5c; --kh-accent-dim: rgba(238, 154, 92, 0.34); --kh-accent-wash: rgba(238, 154, 92, 0.09); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { overflow-x: hidden; } /* Room for the sticky call bar so it never covers the footer. */ @media (max-width: 781px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } } img { max-width: 100%; height: auto; } /* Wide content must scroll inside itself rather than pushing the page. */ .wp-block-table, .wp-block-code, pre { overflow-x: auto; max-width: 100%; } :where(a):focus-visible, :where(button):focus-visible, :where(summary):focus-visible { outline: 2px solid var(--kh-gold-soft); outline-offset: 2px; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .kh-header { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .kh-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--kh-accent); opacity: 0.85; } .kh-header .wp-block-site-title a { text-decoration: none; letter-spacing: 0.02em; } .kh-tagline { margin: 0.15rem 0 0; line-height: 1.35; } .kh-header .wp-block-navigation a { text-decoration: none; } .kh-header .wp-block-navigation a:hover { color: var(--kh-gold-soft); } .kh-header-right { gap: 1.15rem; align-items: center; } .kh-header-phone .wp-block-button__link { border-color: var(--kh-accent); color: var(--kh-accent); padding: 0.5rem 0.95rem; font-size: 0.85rem; white-space: nowrap; } .kh-header-phone .wp-block-button__link:hover { background: var(--kh-accent); color: var(--kh-navy); } /* On phones the nav collapses to the overlay toggle, and the phone number button is redundant next to the sticky call bar. The selector is deliberately over-specific: core block styles are printed after the theme stylesheet, so `.wp-block-buttons{display:flex}` wins any tie on specificity. */ @media (max-width: 781px) { .kh-header .wp-block-buttons.kh-header-buttons { display: none; } .kh-tagline { display: none; } } /* -------------------------------------------------------------------------- Shared section furniture -------------------------------------------------------------------------- */ .kh-eyebrow { font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kh-accent); margin-bottom: 0.35rem; } .kh-section-lede { max-width: 62ch; margin-left: auto; margin-right: auto; color: var(--kh-muted-light); } .kh-crosslink { margin-top: 2.5rem; font-size: 0.95rem; color: var(--kh-muted-light); } .kh-page-head { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .kh-page-head::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -1px; width: 72px; height: 3px; background: var(--kh-accent); } .kh-page-head .wp-block-post-title { margin: 0; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .kh-hero { position: relative; isolation: isolate; overflow: hidden; } .kh-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 12% 0%, rgba(201, 168, 76, 0.16) 0%, rgba(18, 18, 31, 0) 58%), radial-gradient(90% 80% at 92% 100%, var(--kh-accent-wash) 0%, rgba(18, 18, 31, 0) 62%); } .kh-hero h1 { max-width: 20ch; } .kh-hero__lede { max-width: 60ch; font-size: 1.2rem; color: var(--kh-body-light); margin-top: 1.35rem; } .kh-hero .wp-block-buttons { gap: 0.85rem; } /* -------------------------------------------------------------------------- Cards and grids Grid uses auto-fill/minmax so tiles genuinely stack on phones. A columns block with a fixed count does not. -------------------------------------------------------------------------- */ .kh-division-grid, .kh-service-grid, .kh-step-grid { display: grid; gap: 1.5rem; margin-top: 2.75rem; } /* Column counts are set explicitly rather than left to auto-fill, because auto-fill lands 4 cards as 3 plus a lonely orphan at desktop widths. Four-item grids resolve to 2x2, six-item grids to 3x2. */ .kh-division-grid, .kh-service-grid, .kh-step-grid { grid-template-columns: 1fr; } @media (min-width: 600px) { .kh-division-grid, .kh-service-grid, .kh-step-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { /* Six services and six steps read best as two rows of three. */ .kh-service-grid, .kh-step-grid { grid-template-columns: repeat(3, 1fr); } /* The four-item variants stay 2x2 at every width above phone. */ .kh-division-grid, .kh-service-grid--four { grid-template-columns: repeat(2, 1fr); } } .kh-card { background: var(--kh-surface); border: 1px solid rgba(255, 255, 255, 0.07); border-top: 3px solid var(--kh-accent); border-radius: var(--kh-radius-card); padding: 1.75rem 1.6rem; box-shadow: var(--kh-shadow-card); display: flex; flex-direction: column; height: 100%; } .kh-card h3 { margin-top: 0; margin-bottom: 0.65rem; } .kh-card p { color: var(--kh-body-light); font-size: 1rem; } .kh-card .wp-block-buttons { margin-top: auto; padding-top: 1.25rem; } .kh-card__kicker { font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kh-accent); margin: 0 0 0.4rem; } .kh-card__meta { font-size: 0.85rem !important; color: var(--kh-muted-light) !important; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 0.85rem; margin-top: 1rem; } .kh-card__link { margin-top: auto; padding-top: 1.1rem; font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .kh-card__link a { color: var(--kh-accent); text-decoration: none; border-bottom: 1px solid var(--kh-accent-dim); padding-bottom: 2px; } .kh-card__link a:hover { border-bottom-color: var(--kh-accent); color: var(--kh-accent); } /* Per-division card accents on the holdings homepage, where all four sit side by side and the body class cannot distinguish them. */ .kh-card--estates { border-top-color: #c9a84c; } .kh-card--estates .kh-card__kicker { color: #c9a84c; } .kh-card--pros { border-top-color: #5fc79a; } .kh-card--pros .kh-card__kicker { color: #5fc79a; } .kh-card--media { border-top-color: #ee9a5c; } .kh-card--media .kh-card__kicker { color: #ee9a5c; } .kh-card--solutions { border-top-color: #4ea8de; } .kh-card--solutions .kh-card__kicker { color: #4ea8de; } .kh-card--estates .is-style-outline .wp-block-button__link { border-color: #c9a84c; color: #c9a84c; } .kh-card--pros .is-style-outline .wp-block-button__link { border-color: #5fc79a; color: #5fc79a; } .kh-card--media .is-style-outline .wp-block-button__link { border-color: #ee9a5c; color: #ee9a5c; } .kh-card--solutions .is-style-outline .wp-block-button__link { border-color: #4ea8de; color: #4ea8de; } .kh-card--estates .is-style-outline .wp-block-button__link:hover { background: #c9a84c; color: var(--kh-navy); } .kh-card--pros .is-style-outline .wp-block-button__link:hover { background: #5fc79a; color: var(--kh-navy); } .kh-card--media .is-style-outline .wp-block-button__link:hover { background: #ee9a5c; color: var(--kh-navy); } .kh-card--solutions .is-style-outline .wp-block-button__link:hover { background: #4ea8de; color: var(--kh-navy); } /* -------------------------------------------------------------------------- Story band -------------------------------------------------------------------------- */ .kh-story p { color: var(--kh-body-light); } .kh-facts { list-style: none; padding-left: 0; margin: 0 0 1.5rem; } .kh-facts li { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; font-size: 0.98rem; color: var(--kh-body-light); } .kh-facts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--kh-accent); } @media (max-width: 781px) { .kh-story__facts { margin-top: 2rem; } } /* -------------------------------------------------------------------------- Process steps -------------------------------------------------------------------------- */ .kh-step { background: var(--kh-surface); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--kh-radius-card); padding: 1.5rem 1.4rem; } .kh-step h3 { margin: 0 0 0.5rem; font-size: 1.15rem; } .kh-step p { font-size: 0.97rem; color: var(--kh-body-light); margin-bottom: 0; } .kh-step__num { font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--kh-accent); opacity: 0.55; margin: 0 0 0.6rem; } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .kh-faq { background: var(--kh-surface); border: 1px solid rgba(255, 255, 255, 0.07); border-left: 3px solid var(--kh-accent); border-radius: 6px; padding: 1.15rem 1.35rem; margin-bottom: 0.85rem; } .kh-faq summary { font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 1.02rem; color: #ffffff; cursor: pointer; list-style-position: outside; } .kh-faq summary::marker { color: var(--kh-accent); } .kh-faq p { margin: 0.85rem 0 0; font-size: 1rem; color: var(--kh-body-light); } .kh-faq-band h2 { margin-bottom: 2.25rem; } /* -------------------------------------------------------------------------- Contact -------------------------------------------------------------------------- */ .kh-contact__card { margin-top: 1.5rem; } .kh-contact__label { font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kh-muted-light) !important; margin: 1.1rem 0 0.15rem; } .kh-contact__card > .kh-contact__label:first-child { margin-top: 0; } .kh-contact__value { font-size: 1.15rem !important; margin: 0; } .kh-contact__value a { color: var(--kh-accent); text-decoration: none; word-break: break-word; } .kh-contact__value--small { font-size: 0.95rem !important; color: var(--kh-body-light) !important; } /* -------------------------------------------------------------------------- Closing CTA -------------------------------------------------------------------------- */ .kh-cta { position: relative; isolation: isolate; overflow: hidden; } .kh-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 120% at 50% 0%, var(--kh-accent-wash) 0%, rgba(18, 18, 31, 0) 70%); } .kh-cta .wp-block-buttons { margin-top: 2rem; gap: 0.85rem; } .kh-cta-phone .wp-block-button__link { background: var(--kh-accent); color: var(--kh-navy); } .kh-cta-phone .wp-block-button__link:hover { background: var(--kh-gold-soft); color: var(--kh-navy); } .kh-cta__meta { margin-top: 1.5rem; font-size: 0.95rem; } /* Outline buttons follow the section accent. */ .is-style-outline .wp-block-button__link { border: 2px solid var(--kh-accent); color: var(--kh-accent); background: transparent; } .is-style-outline .wp-block-button__link:hover { background: var(--kh-accent); color: var(--kh-navy); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .kh-footer h3, .kh-footer h4 { margin-top: 0; } .kh-footer p, .kh-footer li { color: var(--kh-body-light); } /* Buttons are excluded on purpose. Without the :not() these rules repaint the button label light-on-gold, which measures 1.88:1 and fails AA badly. */ .kh-footer a:not(.wp-block-button__link) { color: var(--kh-body-light); text-decoration: none; } .kh-footer a:not(.wp-block-button__link):hover { color: var(--kh-gold); text-decoration: underline; } .kh-footer .wp-block-button__link { color: var(--kh-navy); } .kh-footer-links { list-style: none; padding-left: 0; margin: 0; } .kh-footer-links li { margin-bottom: 0.55rem; font-size: 0.95rem; } .kh-footer .wp-block-separator { margin: 2.5rem 0 1.5rem; opacity: 0.3; } /* -------------------------------------------------------------------------- Blog reading surface The champagne band is the one light surface on the site. Headings are white globally, so every heading level has to be reset here or it disappears. Gold on champagne fails contrast, so gold is borders only in this band. -------------------------------------------------------------------------- */ .kh-reading, .kh-reading p, .kh-reading li { color: #333333; } .kh-reading h1, .kh-reading h2, .kh-reading h3, .kh-reading h4, .kh-reading h5, .kh-reading h6 { color: var(--kh-navy); } .kh-reading a:not(.wp-block-button__link) { color: #1a1a2e; text-decoration: underline; text-decoration-color: var(--kh-gold); text-underline-offset: 3px; } .kh-reading blockquote { border-left: 3px solid var(--kh-gold); padding-left: 1.25rem; margin-left: 0; font-style: normal; } .kh-post-grid { gap: 1.5rem; } /* -------------------------------------------------------------------------- WPForms on a dark surface The autofill rule matters: without it Chrome paints its own pale background over the field and the typed value becomes unreadable. -------------------------------------------------------------------------- */ .kh-form-card .wpforms-container, .wpforms-container { color-scheme: dark; } .wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-sublabel { color: var(--kh-body-light) !important; font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif !important; font-weight: 600 !important; } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="url"], .wpforms-container input[type="number"], .wpforms-container select, .wpforms-container textarea { background-color: var(--kh-surface-2) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; border-radius: 4px !important; } .wpforms-container input::placeholder, .wpforms-container textarea::placeholder { color: var(--kh-muted-light) !important; opacity: 1; } .wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus { border-color: var(--kh-accent) !important; outline: 2px solid var(--kh-accent-dim) !important; outline-offset: 1px; } .wpforms-container input:-webkit-autofill, .wpforms-container textarea:-webkit-autofill, .wpforms-container select:-webkit-autofill { -webkit-text-fill-color: #ffffff !important; -webkit-box-shadow: 0 0 0 1000px var(--kh-surface-2) inset !important; caret-color: #ffffff; } .wpforms-container button[type="submit"], .wpforms-container .wpforms-submit { background-color: var(--kh-accent) !important; color: var(--kh-navy) !important; border: none !important; font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.85rem 1.6rem !important; border-radius: 4px !important; cursor: pointer; } .wpforms-container button[type="submit"]:hover, .wpforms-container .wpforms-submit:hover { background-color: var(--kh-gold-soft) !important; } .wpforms-container .wpforms-error { color: #ffb3b3 !important; } /* -------------------------------------------------------------------------- Calendly The iframe interior cannot be styled, so it is framed as a light card and swapped for a plain link on phones where the tall embed is unreliable. -------------------------------------------------------------------------- */ .calendly-inline-widget { background: var(--kh-champagne); border: 1px solid var(--kh-gold); border-radius: var(--kh-radius-card); overflow: hidden; } .kh-calendly-fallback { display: none; } .kh-calendly-fallback a { display: block; text-align: center; background: var(--kh-accent); color: var(--kh-navy); font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 1.25rem; border-radius: 4px; text-decoration: none; } @media (max-width: 781px) { .calendly-inline-widget { display: none; } .kh-calendly-fallback { display: block; margin: 1rem 0; } } /* -------------------------------------------------------------------------- Sticky call bar (phones only) -------------------------------------------------------------------------- */ .kh-callbar { display: none; } @media (max-width: 781px) { .kh-callbar { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(255, 255, 255, 0.1); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(0); transition: transform 0.22s ease; } .kh-callbar.is-hidden { transform: translateY(110%); } .kh-callbar a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.05rem 0.5rem; font-family: "Montserrat", -apple-system, "Segoe UI", sans-serif; font-weight: 700; font-size: 0.9rem; text-decoration: none; letter-spacing: 0.03em; } .kh-callbar__call { background: var(--kh-accent); color: var(--kh-navy); } .kh-callbar__book { background: var(--kh-ink); color: #ffffff; } } /* -------------------------------------------------------------------------- Mobile refinements -------------------------------------------------------------------------- */ @media (max-width: 781px) { .kh-hero h1 { max-width: none; } .kh-hero__lede { font-size: 1.08rem; } .kh-hero .wp-block-buttons, .kh-cta .wp-block-buttons { flex-direction: column; align-items: stretch; } .kh-hero .wp-block-button, .kh-cta .wp-block-button { width: 100%; } .kh-hero .wp-block-button__link, .kh-cta .wp-block-button__link { display: block; text-align: center; } .kh-card { padding: 1.5rem 1.25rem; } }