/* * MaintainPress design system * Source: "MaintainPress" design system artifact (tokens.json + component CSS), v1. * Loaded by inc/design-system.php in the MaintainPress Kadence child theme. * * Layering: * - Kadence Customizer owns global palette (palette1-9), body/heading type, buttons, container width. * - This file adds the tokens Kadence has no slot for (navy, signal, status colours, mono type, * spacing, radius, shadows), the inverse band, and the .mp-* component classes used by page layouts. * - Light tokens point at Kadence palette variables, so a Customizer palette edit still flows through. */ /* ---------- fonts (self-hosted, OFL) ---------- */ @font-face { font-family: "Sora"; src: url("../fonts/Sora-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- tokens: light (default) ---------- */ :root { /* brand constants (same in both themes) */ --navy-950: #11161f; --navy-900: #1a202c; --navy-800: #252c39; --navy-700: #333c4d; --signal: #3296ff; --blue-700: #1560c9; --blue-900: #03377d; --ice: #edf2f7; --slate: #a0aec0; /* semantic colour, mapped onto the Kadence global palette */ --accent: var(--global-palette1, #1560c9); --accent-hover: var(--global-palette2, #0f4fa8); --ink: var(--global-palette3, #1a202c); --ink-muted: var(--global-palette4, #4a5568); --line-strong: var(--global-palette5, #7a889e); --line: var(--global-palette6, #dbe2ec); --surface-sunken: var(--global-palette7, #edf1f6); --surface: var(--global-palette8, #f6f8fb); --surface-raised: var(--global-palette9, #ffffff); --accent-soft: #e5f0ff; --on-accent: #ffffff; --link: var(--accent); --focus: var(--accent); --ok: #0f7a55; --ok-soft: #e3f6ee; --warn: #9a5b00; --warn-soft: #fdf1dc; --danger: #c2322b; --danger-soft: #fde8e6; /* type */ --font-display: "Sora", "Geist", system-ui, sans-serif; --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* space (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-full: 9999px; /* elevation */ --shadow-sm: 0 1px 2px #1a202c0f, 0 1px 3px #1a202c14; --shadow-lg: 0 2px 6px #1a202c0f, 0 16px 40px -8px #1a202c29; --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); /* layout */ --container: 1200px; --measure: 680px; } /* ---------- tokens: dark (opt-in only: add data-mp-theme="dark" to or a wrapper) ---------- */ [data-mp-theme="dark"] { --surface: #1a202c; --surface-raised: #252c39; --surface-sunken: #151a23; --line: #333c4d; --line-strong: #6e7d96; --ink: #edf2f7; --ink-muted: #a0aec0; --accent: #3296ff; --accent-hover: #5aabff; --accent-soft: #16263d; --on-accent: #0f141d; --link: #3296ff; --focus: #3296ff; --ok: #34d399; --ok-soft: #10302a; --warn: #f5b544; --warn-soft: #3a2c12; --danger: #ff7b72; --danger-soft: #3d1f22; --shadow-sm: 0 1px 2px #00000066; --shadow-lg: 0 16px 40px -8px #000000b3; --focus-ring: 0 0 0 2px #1a202c, 0 0 0 4px #3296ff; } /* ---------- inverse context: navy-950 bands (header, hero, closing CTA, footer) ---------- */ .mp-inverse { --surface: var(--navy-950); --surface-raised: var(--navy-800); --surface-sunken: var(--navy-900); --line: var(--navy-700); --line-strong: #6e7d96; --ink: var(--ice); --ink-muted: var(--slate); --accent: var(--signal); --accent-hover: #5aabff; --accent-soft: #16263d; --on-accent: #0f141d; --link: var(--signal); --ok: #34d399; --ok-soft: #10302a; --warn: #f5b544; --warn-soft: #3a2c12; --danger: #ff7b72; --danger-soft: #3d1f22; --focus: var(--signal); --focus-ring: 0 0 0 2px #11161f, 0 0 0 4px #3296ff; background-color: var(--surface); color: var(--ink); } .mp-inverse h1, .mp-inverse h2, .mp-inverse h3, .mp-inverse h4, .mp-inverse h5, .mp-inverse h6 { color: var(--ink); } .mp-inverse :where(p, li) { color: inherit; } .mp-inverse a:where(:not(.mp-btn, .button, .kb-button, .wp-block-button__link, .wp-element-button)) { color: var(--link); } /* ---------- base refinements on top of Kadence ---------- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } a { text-underline-offset: 3px; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } code, kbd, samp, pre { font-family: var(--font-mono); } ::selection { background: var(--accent-soft); color: var(--ink); } /* ---------- type classes (usable on any element, including an H1 eyebrow) ---------- */ .mp-display-xl, .mp-display, .mp-h1, .mp-h2, .mp-h3, .mp-price { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; text-transform: none; } .mp-display-xl { font-size: 64px; line-height: 68px; letter-spacing: -0.035em; } .mp-display { font-size: 48px; line-height: 54px; letter-spacing: -0.03em; } .mp-h1 { font-size: 36px; line-height: 44px; letter-spacing: -0.025em; } .mp-h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.02em; } .mp-h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; } .mp-price { font-size: 44px; line-height: 48px; letter-spacing: -0.03em; } .mp-lead { font-family: var(--font-sans); font-size: 19px; line-height: 30px; margin: 0; text-wrap: pretty; } .mp-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; } .mp-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; } .mp-body-sm p { margin: 0; } .mp-label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; } .mp-mono { font-family: var(--font-mono); font-size: 14px; line-height: 22px; } .mp-mono-sm { font-family: var(--font-mono); font-size: 12px; line-height: 18px; } .mp-muted { color: var(--ink-muted); } .mp-accent { color: var(--accent); } .mp-center { text-align: center; margin-left: auto; margin-right: auto; } .mp-measure { max-width: var(--measure); } .mp-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* status dots */ .mp-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ink-muted); flex: none; } .mp-dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .mp-dot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } .mp-dot-danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .mp-dot-accent { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------- mark / logo / icon ---------- */ .mp-mark { display: block; flex: none; } .mp-logo { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; } .mp-logo:hover { color: var(--ink); } .mp-logo-word { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; } .mp-icon { display: inline-block; flex: none; vertical-align: middle; } .mp-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); } /* ---------- buttons ---------- */ .mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 20px; height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; } .mp-btn-lg { height: 52px; padding: 0 var(--space-6); font-size: 16px; } .mp-btn-block { display: flex; width: 100%; } .mp-btn-primary { background: var(--accent); color: var(--on-accent); } .mp-btn-primary:hover, .mp-btn-primary:focus { background: var(--accent-hover); color: var(--on-accent); } .mp-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); } .mp-btn-secondary:hover, .mp-btn-secondary:focus { border-color: var(--ink); color: var(--ink); } .mp-btn-ghost { background: transparent; color: var(--accent); padding: 0 var(--space-2); } .mp-btn-ghost:hover { color: var(--accent-hover); background: var(--accent-soft); } .mp-btn-arrow { transition: transform .15s; } .mp-btn:hover .mp-btn-arrow { transform: translateX(2px); } .mp-btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-md); } /* Kadence / core buttons inside an inverse band pick up the inverse accent */ .mp-inverse .button:not(.mp-btn-secondary), .mp-inverse .wp-block-button__link, .mp-inverse .kb-button.kb-btn-global-fill { background: var(--accent); color: var(--on-accent); border-color: transparent; } .mp-inverse .button:not(.mp-btn-secondary):hover, .mp-inverse .wp-block-button__link:hover, .mp-inverse .kb-button.kb-btn-global-fill:hover { background: var(--accent-hover); color: var(--on-accent); } .mp-inverse .kb-button.kb-btn-global-outline, .mp-inverse .button.button-style-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); } .mp-inverse .kb-button.kb-btn-global-outline:hover, .mp-inverse .button.button-style-secondary:hover { border-color: var(--ink); color: var(--ink); } /* ---------- status pill ---------- */ .mp-status { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 10px 0 9px; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 12px; line-height: 18px; background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); white-space: nowrap; } .mp-status .mp-dot { box-shadow: none; } .mp-status-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .mp-status-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .mp-status-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .mp-status-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } /* ---------- cards ---------- */ .mp-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; } .mp-card > :where(h1, h2, h3, h4, p, ul) { margin: 0; } .mp-card-link:hover { border-color: var(--line-strong); color: var(--ink); } .mp-service .mp-icon-tile { margin-bottom: var(--space-2); } .mp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .mp-checks-2 { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } .mp-checks li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 22px; margin: 0; } .mp-checks li .mp-icon { color: var(--ok); margin-top: 2px; } .mp-checks li.mp-check-strong { font-weight: 500; } .mp-checks li.mp-check-strong .mp-icon { color: var(--accent); } /* plan card */ .mp-plan { gap: var(--space-4); padding: var(--space-6); } .mp-plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .mp-plan-fit { margin: 0; min-height: 44px; } .mp-plan-price { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-2) 0; } .mp-plan-tag { font-family: var(--font-mono); font-size: 12px; line-height: 18px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent); white-space: nowrap; } .mp-plan-featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); } .mp-plan .mp-checks { margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--line); } .mp-plan-note { margin: 0; } /* ---------- worklog (signature motif: one per page, generic example data only) ---------- */ .mp-worklog { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; color: var(--ink); } .mp-worklog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); color: var(--ink-muted); } .mp-worklog-rows { list-style: none; margin: 0; padding: var(--space-3) 0; } .mp-worklog-rows li { display: grid; grid-template-columns: 76px 8px 1fr; align-items: center; gap: var(--space-3); padding: 7px var(--space-5); margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; } .mp-worklog-time { color: var(--ink-muted); } .mp-worklog-rows .mp-dot { box-shadow: none; } .mp-worklog-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-muted); } /* ---------- specs, quote, faq ---------- */ .mp-specs { margin: 0; display: grid; } .mp-spec { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); } .mp-spec:first-child { border-top: 1px solid var(--line); } .mp-spec dt { color: var(--ink-muted); font-size: 15px; } .mp-spec dd { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: right; } .mp-quote { margin: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); } .mp-quote blockquote { margin: 0 0 var(--space-4); padding: 0; border: 0; font-family: var(--font-display); font-size: 22px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; font-style: normal; color: var(--ink); text-wrap: pretty; } .mp-quote blockquote::before { content: "\201C"; color: var(--accent); } .mp-quote blockquote::after { content: "\201D"; color: var(--accent); } .mp-quote figcaption, .mp-quote cite { font-style: normal; color: var(--ink-muted); font-size: 14px; line-height: 22px; } .mp-faq { border-top: 1px solid var(--line); } .mp-faq details { border-bottom: 1px solid var(--line); } .mp-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: -0.01em; color: var(--ink); } .mp-faq summary::-webkit-details-marker { display: none; } .mp-faq summary .mp-icon { color: var(--ink-muted); transition: transform .2s; } .mp-faq details[open] summary .mp-icon { transform: rotate(180deg); } .mp-faq-a { padding: 0 var(--space-8) var(--space-5) 0; color: var(--ink-muted); } .mp-faq-a p { margin: 0 0 var(--space-3); } /* ---------- forms (contact, emergency, partner application) ---------- */ .mp-form { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); color: var(--ink); } .mp-form label, .mp-form .gfield_label, .mp-form .ff-el-input--label label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); } .mp-form input[type="text"], .mp-form input[type="email"], .mp-form input[type="tel"], .mp-form input[type="url"], .mp-form input[type="number"], .mp-form select { height: 48px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 16px; box-shadow: none; } .mp-form textarea { min-height: 128px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; box-shadow: none; } .mp-form :is(input, select, textarea):focus { outline: 2px solid transparent; border-color: var(--focus); box-shadow: var(--focus-ring); } .mp-form ::placeholder { color: var(--ink-muted); opacity: 1; } /* ---------- layout ---------- */ .mp-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); } .mp-section { padding: var(--space-9) 0; } .mp-section-sunken { background: var(--surface-sunken); } .mp-section-hero { padding: var(--space-10) 0 var(--space-9); } .mp-section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); margin-bottom: var(--space-7); } .mp-section-head.mp-center { align-items: center; } .mp-grid-bg { background-image: radial-gradient(circle, var(--navy-700) 1px, transparent 1.5px); background-size: 24px 24px; background-position: 12px 12px; } .mp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .mp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .mp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* ---------- responsive ---------- */ @media (max-width: 720px) { .mp-container { padding: 0 var(--space-4); } .mp-section { padding: var(--space-8) 0; } .mp-section-hero { padding: var(--space-8) 0; } .mp-display-xl { font-size: 48px; line-height: 54px; } .mp-display { font-size: 36px; line-height: 44px; } .mp-h1 { font-size: 28px; line-height: 36px; } .mp-price { font-size: 40px; line-height: 44px; } .mp-grid-3, .mp-grid-2, .mp-checks-2 { grid-template-columns: 1fr; } .mp-faq-a { padding-right: 0; } .mp-form { padding: var(--space-5); } } @media (prefers-reduced-motion: reduce) { .mp-btn, .mp-btn-arrow, .mp-faq summary .mp-icon { transition: none; } } /* ---------- Kadence header + footer are inverse bands (colours set in the Customizer; tokens here) ---------- */ #masthead, #colophon, #mobile-drawer { --surface: var(--navy-950); --surface-raised: var(--navy-800); --surface-sunken: var(--navy-900); --line: var(--navy-700); --line-strong: #6e7d96; --ink: var(--ice); --ink-muted: var(--slate); --accent: var(--signal); --accent-hover: #5aabff; --accent-soft: #16263d; --on-accent: #0f141d; --link: var(--signal); --focus: var(--signal); --focus-ring: 0 0 0 2px #11161f, 0 0 0 4px #3296ff; } #masthead .site-title { font-family: var(--font-display); } #masthead .header-button, #mobile-drawer .mobile-header-button-wrap .button { background: var(--signal); color: #0f141d; border-color: transparent; border-radius: var(--radius-md); } #masthead .header-button:hover, #mobile-drawer .mobile-header-button-wrap .button:hover { background: #5aabff; color: #0f141d; } #colophon a:not(.button) { text-decoration: none; } #colophon a:not(.button):hover { color: var(--ink); } /* ================= Kadence Blocks bridge (added for page builds) ================= */ /* icons: Lucide set from the design system, used as CSS masks so they take token colours */ .mp-ic-shield-check { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-refresh-cw { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-database-backup { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-activity { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-life-buoy { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-pencil-line { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-server-cog { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-clock { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-lock-keyhole { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-gauge { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-key-round { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-calendar-check { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-message-square-text { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-store { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-mail { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-file-text { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-users { --mp-ic: url("data:image/svg+xml,"); } .mp-ic-send { --mp-ic: url("data:image/svg+xml,"); } :root { --mp-check: url("data:image/svg+xml,"); --mp-chevron: url("data:image/svg+xml,"); } /* icon tile before a card heading: add class mp-ic- to the heading */ :where(h2,h3,h4,p)[class*="mp-ic-"] { position: relative; padding-top: 60px; } :where(h2,h3,h4,p)[class*="mp-ic-"]::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); } :where(h2,h3,h4,p)[class*="mp-ic-"]::after { content: ""; position: absolute; top: 11px; left: 11px; width: 22px; height: 22px; background: var(--accent); -webkit-mask: var(--mp-ic) center / contain no-repeat; mask: var(--mp-ic) center / contain no-repeat; } /* rows and columns */ .mp-stack > .kt-inside-inner-col, .mp-card > .kt-inside-inner-col { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; } .mp-card > .kt-inside-inner-col { gap: var(--space-3); } .mp-stack > .kt-inside-inner-col > *, .mp-card > .kt-inside-inner-col > *, .mp-section-head > * { margin-top: 0; margin-bottom: 0; } .mp-section-head { margin-bottom: 0; } .mp-hero-copy > .kt-inside-inner-col { gap: var(--space-5); } .mp-hero-copy .mp-lead { max-width: 580px; } .mp-card .wp-block-buttons:last-child { margin-top: auto; padding-top: var(--space-3); } .mp-card .wp-block-button, .mp-card .wp-block-button__link { width: 100%; text-align: center; } .mp-plan-tag { align-self: flex-start; } p.mp-price { margin: 0; } .mp-plan .mp-price-note { margin-top: -8px; } /* core buttons: Kadence styles them from the Customizer; these add the large size and the outline variant */ .wp-block-button.mp-btn-lg .wp-block-button__link { padding: 16px 32px; font-size: 16px; line-height: 20px; } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); padding: 11px 23px; } .wp-block-button.is-style-outline.mp-btn-lg .wp-block-button__link { padding: 15px 31px; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: transparent; color: var(--ink); border-color: var(--ink); } .mp-inverse .mp-eyebrow { color: var(--accent); } /* numbered steps */ .mp-step > .kt-inside-inner-col { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 2px solid var(--accent); } .mp-step > .kt-inside-inner-col > * { margin: 0; } /* trust bar: core/list mp-trust-list, each item carries an mp-ic- class */ .mp-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .mp-trust-list li { position: relative; margin: 0; padding-left: 32px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); } .mp-trust-list li::after { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--accent); -webkit-mask: var(--mp-ic) center / contain no-repeat; mask: var(--mp-ic) center / contain no-repeat; } /* moments list (problem section) */ .mp-moments { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .mp-moments li { margin: 0; padding: var(--space-4) var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* check lists: core/list with class mp-checks */ ul.mp-checks { padding-left: 0; } .mp-checks li { position: relative; display: block; padding-left: 30px; } .mp-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--ok); -webkit-mask: var(--mp-check) center / contain no-repeat; mask: var(--mp-check) center / contain no-repeat; } .mp-checks li.mp-check-strong::before { background: var(--accent); } .mp-card .mp-checks { margin-top: var(--space-2); } .mp-plan .mp-checks { margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--line); } /* quote: core/quote with class mp-quote */ blockquote.mp-quote { margin: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); height: 100%; } blockquote.mp-quote p { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 22px; line-height: 32px; letter-spacing: -0.015em; font-weight: 500; font-style: normal; color: var(--ink); } blockquote.mp-quote p::before { content: "\201C"; color: var(--accent); } blockquote.mp-quote p::after { content: "\201D"; color: var(--accent); } blockquote.mp-quote cite { font-style: normal; font-size: 14px; line-height: 22px; color: var(--ink-muted); } .mp-placeholder > .kt-inside-inner-col { height: 100%; padding: var(--space-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); display: flex; flex-direction: column; gap: var(--space-3); } .mp-placeholder p { margin: 0; } /* FAQ: core/details blocks inside a group with class mp-faq */ .mp-faq { max-width: 840px; } .mp-faq .wp-block-details { border-bottom: 1px solid var(--line); margin: 0; } .mp-faq summary::after { content: ""; flex: none; width: 20px; height: 20px; background: var(--ink-muted); -webkit-mask: var(--mp-chevron) center / contain no-repeat; mask: var(--mp-chevron) center / contain no-repeat; transition: transform .2s; } .mp-faq details[open] > summary::after { transform: rotate(180deg); } .mp-faq .wp-block-details > :not(summary) { margin: 0 0 var(--space-3); padding-right: var(--space-8); color: var(--ink-muted); } .mp-faq .wp-block-details > :last-child { padding-bottom: var(--space-3); } /* WorkLog: a Kadence column (mp-worklog) holding a head paragraph, a core/table (mp-worklog-table) and a foot paragraph */ .mp-worklog > .kt-inside-inner-col > * { margin: 0; } .mp-worklog .mp-worklog-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 13px; line-height: 20px; } .mp-worklog .mp-worklog-foot { font-family: var(--font-mono); font-size: 12px; line-height: 18px; } .mp-worklog-table { margin: 0; padding: var(--space-3) 0; overflow-x: auto; } .mp-worklog-table table { width: 100%; border: 0; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; line-height: 20px; } .mp-worklog-table td { border: 0; padding: 7px var(--space-5); vertical-align: middle; color: var(--ink); } .mp-worklog-table td:first-child { width: 96px; padding-right: 0; color: var(--ink-muted); white-space: nowrap; } .mp-worklog-table td:last-child { position: relative; padding-left: calc(var(--space-5) + 8px); } .mp-worklog-table td:last-child::before { content: ""; position: absolute; left: 6px; top: 13px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--ok); } @media (max-width: 1024px) { .mp-trust-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .mp-trust-list { grid-template-columns: 1fr; } .mp-faq .wp-block-details > :not(summary) { padding-right: 0; } .mp-worklog-table td:first-child { width: 72px; } } /* centred closing CTA band */ .mp-cta > .kt-inside-inner-col { align-items: center; text-align: center; margin-left: auto; margin-right: auto; max-width: var(--measure); } .mp-cta .wp-block-buttons { justify-content: center; } /* trust bar sits tight under the hero */ .mp-trust { border-bottom: 1px solid var(--line); } /* core buttons inside inverse bands: signal fill, navy label (on-accent) */ .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--accent); color: var(--on-accent); } .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus { background: var(--accent-hover); color: var(--on-accent); } /* SpecList: core/table with class mp-spec-table (label | value) */ .mp-spec-table { margin: 0; } .mp-spec-table table { width: 100%; border: 0; border-collapse: collapse; } .mp-spec-table td { border: 0; border-bottom: 1px solid var(--line); padding: var(--space-3) 0; vertical-align: baseline; } .mp-spec-table tr:first-child td { border-top: 1px solid var(--line); } .mp-spec-table td:first-child { color: var(--ink-muted); font-size: 15px; } .mp-spec-table td:last-child { font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: right; } /* a card built from a core/group */ .wp-block-group.mp-card > * { margin: 0; } .mp-checks.mp-checks-2 { display: grid; } /* ---------- button colours: drive Kadence's own button variables (fixes outline + hover states) ---------- */ .mp-inverse { --global-palette3: var(--ice); --global-palette5: #6e7d96; --global-palette-btn-bg: var(--signal); --global-palette-btn-bg-hover: #5aabff; --global-palette-btn: #0f141d; --global-palette-btn-hover: #0f141d; --global-palette-btn-out: var(--ice); } .mp-inverse .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), .mp-inverse .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):visited { color: var(--ice); background: transparent; border-color: #6e7d96; } .mp-inverse .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover, .mp-inverse .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus, .mp-inverse .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):active { color: var(--ice); background: transparent; border-color: var(--ice); } .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color), .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):visited { color: #0f141d; background: var(--signal); } .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):hover, .mp-inverse .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):focus { color: #0f141d; background: #5aabff; } /* light sections: outline stays transparent on hover, ink text */ .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover, .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus { color: var(--ink); background: transparent; border-color: var(--ink); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color):hover { color: #ffffff; } /* portrait photo */ .mp-photo { margin: 0; } .mp-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); } .mp-card > .kt-inside-inner-col > p.mp-price { font-size: 36px; line-height: 44px; } /* signed note from Jeff */ .mp-note { display: grid; grid-template-columns: 64px 1fr; column-gap: var(--space-4); row-gap: var(--space-2); align-items: start; } .mp-note .mp-note-photo { grid-row: span 2; margin: 0; } .mp-note .mp-note-photo img { width: 64px; height: 64px; border-radius: var(--radius-full); object-fit: cover; display: block; } .mp-note > p:not(.mp-mono-sm) { font-family: var(--font-display); font-size: 18px; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); }