/* ============================================================================= VelvetPress — main stylesheet Tokens, light/dark scheme, components. theme.json drives presets; this file wires the runtime color scheme via [data-theme] on . ========================================================================== */ /* ---------- Color tokens ---------------------------------------------------- */ :root, html[data-theme="light"] { --vp-bg: #ffffff; --vp-surface: #f8fafc; /* slate-50 */ --vp-surface-muted: #f1f5f9; /* slate-100 */ --vp-text: #0f172a; /* slate-900 */ --vp-text-muted: #64748b; /* slate-500 */ --vp-border: #e2e8f0; /* slate-200 */ --vp-primary: #7c3aed; /* violet-600 */ --vp-primary-hover: #6d28d9; /* violet-700 */ --vp-accent: #8b5cf6; /* violet-500 */ --vp-shadow: 0 8px 32px -12px rgba(15, 23, 42, 0.12); --vp-shadow-violet: 0 12px 32px -10px rgba(124, 58, 237, 0.30); --vp-ring: 0 0 0 3px rgba(124, 58, 237, 0.25); color-scheme: light; } html[data-theme="dark"] { --vp-bg: #020617; /* slate-950 */ --vp-surface: #0f172a; /* slate-900 */ --vp-surface-muted: #1e293b; /* slate-800 */ --vp-text: #f1f5f9; /* slate-100 */ --vp-text-muted: #94a3b8; /* slate-400 */ --vp-border: #1e293b; /* slate-800 */ --vp-primary: #8b5cf6; /* violet-500 */ --vp-primary-hover: #a78bfa; /* violet-400 */ --vp-accent: #a78bfa; /* violet-400 */ --vp-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.5); --vp-shadow-violet: 0 16px 40px -10px rgba(139, 92, 246, 0.45); --vp-ring: 0 0 0 3px rgba(167, 139, 250, 0.35); color-scheme: dark; } /* ---------- Base ---------------------------------------------------------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; transition: background-color 0.2s ease, color 0.2s ease; } ::selection { background: var(--vp-primary); color: #ffffff; } a { transition: color 0.15s ease; } /* ---------- Header -------------------------------------------------------- */ .vp-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--vp-bg) 80%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--vp-border); padding-block: 0.6rem !important; } .vp-header__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; width: 100%; gap: 1.5rem; } .vp-header__brand { gap: 0.5rem; } .vp-header__brand .wp-block-site-title a { color: var(--vp-text); text-decoration: none; } .vp-header__nav-wrap { gap: 1rem; } .vp-nav .wp-block-navigation-item__content { font-weight: 500; transition: color 0.15s ease; } .vp-header__cta .wp-block-button__link { padding-block: 0.55rem; padding-inline: 1rem; font-size: 0.9rem; } /* ---------- Mobile nav ---------------------------------------------------- */ /* The hamburger is desktop-hidden by default; the @media block at the bottom of this file flips visibility at the mobile breakpoint (the same place the inline desktop nav + CTAs get hidden). */ .vp-menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid var(--vp-border); color: var(--vp-text); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .vp-menu-toggle:hover { background: var(--vp-surface); border-color: color-mix(in srgb, var(--vp-primary) 40%, var(--vp-border)); } .vp-menu-toggle:focus-visible { outline: none; box-shadow: var(--vp-ring); } /* Full-screen solid overlay above the sticky header (z-index 50). The panel fills the whole viewport so the page can't bleed through and there's no drawer edge to overflow horizontally. box-sizing is reset across the subtree so the panel's padding stays inside the viewport on narrow phones. */ .vp-mobile-nav, .vp-mobile-nav * { box-sizing: border-box; } .vp-mobile-nav { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--vp-bg); overflow-x: hidden; } .vp-mobile-nav[hidden] { display: none; } .vp-mobile-nav__panel { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; width: 100%; padding: 1rem 1.25rem 1.5rem; overflow-y: auto; } .vp-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: 1px solid var(--vp-border); } .vp-mobile-nav__title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vp-text-muted); } .vp-mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid var(--vp-border); color: var(--vp-text); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .vp-mobile-nav__close:hover { background: var(--vp-surface); border-color: color-mix(in srgb, var(--vp-primary) 40%, var(--vp-border)); } .vp-mobile-nav__close:focus-visible { outline: none; box-shadow: var(--vp-ring); } .vp-mobile-nav__links { display: flex; flex-direction: column; gap: 0.25rem; } .vp-mobile-nav__link { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1rem; border-radius: 12px; color: var(--vp-text); text-decoration: none; font-weight: 500; font-size: 1rem; transition: background-color 0.15s ease, color 0.15s ease; min-height: 48px; /* comfortable tap target */ } .vp-mobile-nav__link:hover, .vp-mobile-nav__link:focus-visible { background: var(--vp-surface); color: var(--vp-text); outline: none; } .vp-mobile-nav__link:focus-visible { box-shadow: var(--vp-ring); } .vp-mobile-nav__link-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--vp-primary) 10%, transparent); color: var(--vp-primary); flex-shrink: 0; } .vp-mobile-nav__link-label { flex: 1; } .vp-mobile-nav__link-chevron { color: var(--vp-text-muted); flex-shrink: 0; } .vp-mobile-nav__ctas { display: flex; flex-direction: column; gap: 0.6rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--vp-border); } .vp-mobile-nav__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: 0.975rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease; } .vp-mobile-nav__cta:focus-visible { outline: none; box-shadow: var(--vp-ring); } .vp-mobile-nav__cta--ghost { background: transparent; color: var(--vp-text); border: 1px solid var(--vp-border); } .vp-mobile-nav__cta--ghost:hover { background: var(--vp-surface); border-color: color-mix(in srgb, var(--vp-primary) 40%, var(--vp-border)); } .vp-mobile-nav__cta--primary { background: var(--vp-primary); color: #ffffff; border: 1px solid var(--vp-primary); box-shadow: var(--vp-shadow-violet); } .vp-mobile-nav__cta--primary:hover { background: var(--vp-primary-hover); border-color: var(--vp-primary-hover); color: #ffffff; } /* ---------- Theme toggle -------------------------------------------------- */ .vp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: transparent; border: 1px solid var(--vp-border); color: var(--vp-text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .vp-theme-toggle:hover { background: var(--vp-surface); color: var(--vp-text); } .vp-theme-toggle:focus-visible { outline: none; box-shadow: var(--vp-ring); } .vp-theme-toggle__icon { display: none; line-height: 0; } html[data-theme="light"] .vp-theme-toggle__icon--moon { display: inline-flex; } html[data-theme="dark"] .vp-theme-toggle__icon--sun { display: inline-flex; } /* ---------- Main / sections ----------------------------------------------- */ .vp-main { min-height: 60vh; } .vp-section { padding-block: clamp(3rem, 6vw, 5.5rem); padding-inline: var(--wp--preset--spacing--40); } .vp-section--dark { background: var(--vp-surface); border-block: 1px solid var(--vp-border); } .vp-section__heading { margin-bottom: 2.5rem; } .vp-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; } .vp-page-header { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; } /* ---------- Hero ---------------------------------------------------------- */ .vp-hero { padding-block: clamp(4rem, 9vw, 7rem); padding-inline: var(--wp--preset--spacing--40); background: radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--vp-primary) 12%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--vp-bg) 0%, var(--vp-surface) 100%); border-bottom: 1px solid var(--vp-border); } .vp-hero__inner { display: flex; flex-direction: column; gap: 1.25rem; } .vp-hero__eyebrow { display: inline-flex !important; width: fit-content; margin-inline: auto; padding: 0.35rem 0.9rem; border-radius: 999px; background: color-mix(in srgb, var(--vp-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vp-primary) 25%, transparent); color: var(--vp-primary); font-size: 0.8125rem; font-weight: 500; } .vp-hero__eyebrow span { margin-right: 0.4rem; opacity: 0.6; } .vp-hero__title { font-size: clamp(2.25rem, 5.5vw, 4rem) !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; } .vp-hero__title-accent { color: var(--vp-primary); } .vp-hero__lede { max-width: 640px; margin-inline: auto !important; } .vp-hero__ctas { margin-top: 0.5rem; } .vp-hero__ctas .wp-block-button__link { padding: 0.85rem 1.5rem !important; font-size: 1rem !important; } .vp-hero__trust { margin-top: 0.75rem !important; opacity: 0.85; } /* ---------- Buttons ------------------------------------------------------- */ .wp-element-button, .wp-block-button__link { transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-1px); } .vp-btn-primary .wp-block-button__link { box-shadow: var(--vp-shadow-violet); } .is-style-ghost .wp-block-button__link, .vp-btn-ghost .wp-block-button__link { background: transparent !important; color: var(--vp-text) !important; border: 1px solid var(--vp-border) !important; } .is-style-ghost .wp-block-button__link:hover, .vp-btn-ghost .wp-block-button__link:hover { background: var(--vp-surface) !important; border-color: color-mix(in srgb, var(--vp-primary) 40%, var(--vp-border)) !important; } /* ---------- Trust strip --------------------------------------------------- */ .vp-trust-strip { padding: 1.25rem var(--wp--preset--spacing--40); background: var(--vp-surface); border-block: 1px solid var(--vp-border); } .vp-trust-strip__inner { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; gap: 1.5rem 2.5rem; } .vp-trust-strip__inner p { margin: 0 !important; } /* ---------- Feature grid -------------------------------------------------- */ .vp-feature-grid { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; gap: 1.25rem !important; } .vp-feature-card { padding: 1.75rem; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 16px; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .vp-feature-card:hover { border-color: color-mix(in srgb, var(--vp-primary) 35%, var(--vp-border)); transform: translateY(-2px); box-shadow: var(--vp-shadow); } .vp-feature-card__icon { font-size: 1.75rem !important; margin-bottom: 0.75rem !important; line-height: 1 !important; } .vp-feature-card h3 { margin: 0 0 0.5rem !important; } /* ---------- Homepage — two-part teaching primer -------------------------- */ /* Three-beat teaser introducing the build → keep-running → outcome model that /pricing/ Section 2 teaches in full. Visually distinct from Section 2's stacked-with-chevron treatment: a light three-column grid that stacks to one column on narrow viewports so this section reads as a quick primer, not a second teaching block. Lives between social-proof and features-grid on the front page. Section-level padding + the constrained wide-size wrapper come from .vp-section / theme.json; the rules below only carry what's unique to this primer's grid and card affordance. */ /* Single column ≤767px, three columns ≥768px. The override is explicit rather than relying on WP grid layout's auto-fit, because at 641-767px auto-fit would land on an awkward two-up — the beats are sized for either a comfortable single read or three side-by-side columns. */ .vp-homepage-twoparts__grid { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; grid-template-columns: 1fr !important; gap: 1.5rem !important; } @media (min-width: 768px) { .vp-homepage-twoparts__grid { grid-template-columns: repeat(3, 1fr) !important; } } .vp-homepage-twoparts__beat { padding: 1.75rem; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 16px; } .vp-homepage-twoparts__icon { font-size: 1.75rem !important; margin-bottom: 0.5rem !important; line-height: 1 !important; } .vp-homepage-twoparts__beat h3 { margin: 0 0 0.5rem !important; } .vp-homepage-twoparts__cta-wrap { margin-top: 2.25rem !important; } .vp-homepage-twoparts__cta { display: inline-block; color: var(--vp-primary); font-weight: 600; text-decoration: none; padding: 0.5rem 0.25rem; } .vp-homepage-twoparts__cta:hover, .vp-homepage-twoparts__cta:focus { text-decoration: underline; } /* ---------- FAQ ----------------------------------------------------------- */ .vp-faq { margin-inline: auto; } .vp-faq__item { background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 12px; padding: 0; margin-bottom: 0.6rem; overflow: hidden; } .vp-faq__item summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .vp-faq__item summary::-webkit-details-marker { display: none; } .vp-faq__item summary::after { content: "+"; color: var(--vp-primary); font-size: 1.25rem; font-weight: 400; transition: transform 0.15s ease; } .vp-faq__item[open] summary::after { transform: rotate(45deg); } .vp-faq__item > p, .vp-faq__item .wp-block-paragraph { padding: 0 1.25rem 1rem; color: var(--vp-text-muted); margin: 0; } /* ---------- Final CTA ----------------------------------------------------- */ .vp-cta { padding: clamp(3rem, 6vw, 5rem) var(--wp--preset--spacing--40); background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--vp-primary) 15%, transparent) 0%, transparent 70%), var(--vp-surface); border-block: 1px solid var(--vp-border); } .vp-cta__inner > * { margin-bottom: 1.25rem !important; } /* ---------- Footer -------------------------------------------------------- */ .vp-footer { padding: clamp(3rem, 5vw, 4rem) var(--wp--preset--spacing--40) 2rem !important; border-top: 1px solid var(--vp-border); } .vp-footer__grid { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto !important; gap: 2rem !important; } .vp-footer__brand p { margin-top: 0.6rem !important; max-width: 280px; } .vp-footer__links { list-style: none !important; padding: 0 !important; margin: 0.75rem 0 0 !important; } .vp-footer__links li { margin-block: 0.35rem; } .vp-footer__links a { color: var(--vp-text-muted); text-decoration: none; } .vp-footer__links a:hover { color: var(--vp-text); } .vp-footer__meta { max-width: var(--wp--style--global--wide-size, 1200px); margin: 1.5rem auto 0 !important; } .vp-footer__meta p { margin: 0 !important; } /* ---------- Blog post list ------------------------------------------------ */ .vp-post-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin-block: 2rem; } .vp-post-card { padding: 0 !important; border-radius: 14px; overflow: hidden; } .vp-post-card .wp-block-post-title a { color: var(--vp-text); text-decoration: none; } .vp-post-card .wp-block-post-title a:hover { color: var(--vp-primary); } /* ---------- Single post --------------------------------------------------- */ .vp-single__meta { gap: 0.75rem !important; margin-bottom: 0.5rem; } .vp-single h1 { margin-top: 0.25rem !important; margin-bottom: 0.75rem !important; } .vp-single__author { gap: 1rem !important; margin-block: 2rem; } /* ---------- 404 ----------------------------------------------------------- */ .vp-404 { padding-block: clamp(4rem, 10vw, 7rem) !important; text-align: center; } .vp-404 .wp-block-buttons { margin-top: 2rem !important; } /* ---------- Pricing — situation router (Section 1) ------------------------ */ /* The /pricing/ page opens with a four-card router instead of a price grid. Each card is itself a focusable so the whole tile is the link target; keyboard users tab through four stops, not eight. The grid is 2×2 above 720px and stacks to a single column below — see the @media block at the bottom of this file. */ .vp-section--router { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .vp-router { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; } .vp-router__lead { font-size: var(--wp--preset--font-size--xl); font-weight: 600; line-height: 1.3; text-align: center; margin: 0 0 1.75rem; color: var(--vp-text); } .vp-router__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .vp-router__item { margin: 0; } .vp-route-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 1rem; row-gap: 0.5rem; align-items: center; min-height: 96px; /* well above the 44px tap-target floor */ padding: 1.25rem 1.4rem; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 14px; color: var(--vp-text); text-decoration: none; box-shadow: var(--vp-shadow); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .vp-route-card:hover { border-color: color-mix(in srgb, var(--vp-primary) 60%, var(--vp-border)); transform: translateY(-2px); box-shadow: var(--vp-shadow-violet); color: var(--vp-text); } .vp-route-card:focus-visible { outline: none; box-shadow: var(--vp-ring); border-color: var(--vp-primary); } .vp-route-card__title { grid-column: 1; grid-row: 1; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .vp-route-card__text { grid-column: 1 / -1; grid-row: 2; font-size: 0.92rem; color: var(--vp-text-muted); line-height: 1.45; } .vp-route-card__chevron { grid-column: 2; grid-row: 1; color: var(--vp-text-muted); transition: color 0.15s ease, transform 0.15s ease; } .vp-route-card:hover .vp-route-card__chevron { color: var(--vp-primary); transform: translateX(2px); } @media (prefers-reduced-motion: reduce) { .vp-route-card, .vp-route-card__chevron { transition: none; } .vp-route-card:hover { transform: none; } .vp-route-card:hover .vp-route-card__chevron { transform: none; } } /* Router-link offset. Sections 3 and 5 are jump targets for the Section 1 router cards (#build-packages and #existing-site). Without scroll-margin-top the sticky header overlaps the section heading when the page scrolls to the anchor. The 5rem clears the sticky header's height. */ .vp-section--build-packages, .vp-section--existing { scroll-margin-top: 5rem; } /* ---------- Pricing — two-part teaching (Section 2) ----------------------- */ /* The two Part blocks are deliberately stacked, not side-by-side: a 2-up grid would read as "pick one," which is the opposite of the message. A connector chevron between them and "Part 1 / Part 2" eyebrows carry the sequence; the rejoinder below sits in a violet-tinted callout so it reads as a summary, not a third equal block. */ .vp-section--teaching { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .vp-teaching { max-width: 760px; margin-inline: auto; } .vp-teaching__heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; text-align: center; margin: 0 0 2.25rem; color: var(--vp-text); } .vp-teaching__blocks { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin-bottom: 2rem; } .vp-teaching-part { padding: 1.75rem 1.75rem 1.5rem; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 16px; box-shadow: var(--vp-shadow); } .vp-teaching-part__eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vp-primary); margin: 0 0 0.4rem; } .vp-teaching-part__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 0.85rem; color: var(--vp-text); } .vp-teaching-part__cost { display: inline; margin-left: 0.4rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--vp-text-muted); } .vp-teaching-part__body { margin: 0; color: var(--vp-text); line-height: 1.6; } /* Decorative connector chevron between Part 1 and Part 2. aria-hidden in the markup keeps it out of the AT tree; the "Part 1 / Part 2" eyebrows carry the sequence for screen readers. */ .vp-teaching__connector { display: flex; justify-content: center; color: var(--vp-primary); padding-block: 0.25rem; } /* Rejoinder — distinct visual treatment so it doesn't read as a third equal block. Violet-tinted background + left border give it the "summary callout" feel called for in the spec. */ .vp-teaching__rejoinder { margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: color-mix(in srgb, var(--vp-primary) 6%, var(--vp-bg)); border-left: 3px solid var(--vp-primary); border-radius: 0 12px 12px 0; } .vp-teaching__rejoinder p { margin: 0; color: var(--vp-text); line-height: 1.6; } /* ---------- Pricing — build packages (Section 3) ------------------------- */ /* Three equal cards (Launch / Growth / Custom). Deliberately uniform — no "most popular" badge, no elevation, no center-card emphasis. The visual hero in the pricing flow is Care Pro in Section 4; here all three packages read as peer options. Cards are flex columns so the CTA can be pinned to the bottom (margin-top: auto on .vp-pkg-card__cta) and stay aligned across cards regardless of how many bullets each one carries. */ .vp-section--build-packages { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .vp-build-packages { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; } .vp-build-packages__intro { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; } .vp-build-packages__heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--vp-text); } .vp-build-packages__lede { margin: 0; color: var(--vp-text-muted); line-height: 1.6; } .vp-pkg-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; } .vp-pkg-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 18px; box-shadow: var(--vp-shadow); } .vp-pkg-card__name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vp-text-muted); margin: 0; } .vp-pkg-card__price { margin: 0; } .vp-pkg-card__price strong { display: block; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--vp-text); } .vp-pkg-card__note { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--vp-text-muted); } .vp-pkg-card__sub { margin: 0; color: var(--vp-text); font-size: 0.975rem; line-height: 1.5; } .vp-pkg-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; color: var(--vp-text-muted); font-size: 0.925rem; line-height: 1.5; } .vp-pkg-card__features li { padding-left: 1.4rem; position: relative; } /* Checkmark bullets. The mask data URL is inlined here rather than shared from a common selector so this section owns its own list styling and doesn't depend on any other pricing block. */ .vp-pkg-card__features li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.85rem; height: 0.85rem; background: var(--vp-primary); mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* CTA pinned to the bottom of the card so all three cards' buttons align on the same row regardless of bullet count. */ .vp-pkg-card__cta { display: block; margin-top: auto; padding: 0.85rem 1.25rem; background: var(--vp-primary); color: #ffffff; border: 1px solid var(--vp-primary); border-radius: 999px; font-weight: 600; text-align: center; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .vp-pkg-card__cta:hover { background: var(--vp-primary-hover); border-color: var(--vp-primary-hover); color: #ffffff; transform: translateY(-1px); } .vp-pkg-card__cta:focus-visible { outline: none; box-shadow: var(--vp-ring); } @media (prefers-reduced-motion: reduce) { .vp-pkg-card__cta { transition: none; } .vp-pkg-card__cta:hover { transform: none; } } /* ---------- Pricing — care plans (Section 4) ----------------------------- */ /* Three cards, Care Pro is the hero. The hero treatment uses violet tokens the rest of the theme already trades in (border, gradient bg, violet-cast shadow) plus a "Most popular" badge above the top edge. Essentials and Priority are plain peers: same shape, same standard shadow, no badge. The grid is align-items: start so the Care Pro badge can overflow above the top edge without stretching its siblings. Each card stays a flex column so the CTA pins to the bottom (margin-top: auto) and aligns across the row regardless of bullet count. On the badge: split into a primary label ("Most popular") and a quieter sub-line ("our recommendation") to mirror the spec copy. Both are plain inline spans inside the visible badge — no aria-hidden, no separate off-screen text — so screen readers read the badge as part of the card the same way sighted users do. */ .vp-section--care-plans { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .vp-care-plans { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; } .vp-care-plans__intro { max-width: 760px; margin: 0 auto 3rem; text-align: center; } .vp-care-plans__heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--vp-text); } .vp-care-plans__lede { margin: 0; color: var(--vp-text-muted); line-height: 1.6; } .vp-cp-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; } .vp-cp-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: var(--vp-bg); border: 1px solid var(--vp-border); border-radius: 18px; box-shadow: var(--vp-shadow); } /* Hero card. Violet-tinted border + gradient fill + violet-cast shadow give the visual emphasis; the badge above the top edge supplies the explicit "this one" cue. Padding-top is bumped so the price block doesn't sit underneath the badge on the smallest cards. */ .vp-cp-card--featured { padding-top: 2.5rem; border-color: color-mix(in srgb, var(--vp-primary) 55%, var(--vp-border)); box-shadow: var(--vp-shadow-violet); background: linear-gradient(180deg, color-mix(in srgb, var(--vp-primary) 5%, var(--vp-bg)) 0%, var(--vp-bg) 60%); } .vp-cp-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.3rem 0.85rem; background: var(--vp-primary); color: #ffffff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; border-radius: 999px; box-shadow: var(--vp-shadow); white-space: nowrap; } .vp-cp-card__badge-sub { font-weight: 500; font-size: 0.7rem; opacity: 0.85; letter-spacing: 0.02em; } .vp-cp-card__name { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vp-text-muted); margin: 0; } .vp-cp-card__price { margin: 0; } .vp-cp-card__price strong { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--vp-text); } .vp-cp-card__period { margin-left: 0.2rem; font-size: 0.95rem; color: var(--vp-text-muted); } .vp-cp-card__sub { margin: 0; color: var(--vp-text); font-size: 0.975rem; line-height: 1.5; } .vp-cp-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; color: var(--vp-text-muted); font-size: 0.925rem; line-height: 1.5; } .vp-cp-card__features li { padding-left: 1.4rem; position: relative; } /* Checkmark bullets. The mask is inlined here rather than shared from a common selector so this section owns its own list styling and doesn't depend on any other pricing block. */ .vp-cp-card__features li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.85rem; height: 0.85rem; background: var(--vp-primary); mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Essentials-only inline footnote ("Edits and changes billed separately…"). Sits between the features list and the CTA, italicised + muted so it reads as fine-print, not as a feature. */ .vp-cp-card__inline-note { margin: 0; font-size: 0.85rem; font-style: italic; color: var(--vp-text-muted); line-height: 1.5; } /* CTA pinned to the card bottom. The non-hero cards get a ghost button so Care Pro's primary CTA stays the loudest call to action in the row. */ .vp-cp-card__cta { display: block; margin-top: auto; padding: 0.85rem 1.25rem; background: transparent; color: var(--vp-text); border: 1px solid var(--vp-border); border-radius: 999px; font-weight: 600; text-align: center; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .vp-cp-card__cta:hover { border-color: color-mix(in srgb, var(--vp-primary) 60%, var(--vp-border)); color: var(--vp-primary); transform: translateY(-1px); } .vp-cp-card__cta:focus-visible { outline: none; box-shadow: var(--vp-ring); } .vp-cp-card__cta--primary { background: var(--vp-primary); color: #ffffff; border-color: var(--vp-primary); } .vp-cp-card__cta--primary:hover { background: var(--vp-primary-hover); border-color: var(--vp-primary-hover); color: #ffffff; } @media (prefers-reduced-motion: reduce) { .vp-cp-card__cta { transition: none; } .vp-cp-card__cta:hover { transform: none; } } /* Below-the-cards copy. Both lines stay small and centered so they read as clarifying footnotes rather than competing with the cards. */ .vp-care-plans__overage { max-width: 720px; margin: 2rem auto 0; text-align: center; color: var(--vp-text); font-size: 0.95rem; line-height: 1.6; } .vp-care-plans__footnote { max-width: 640px; margin: 0.75rem auto 0; text-align: center; color: var(--vp-text-muted); font-size: 0.85rem; line-height: 1.5; } /* ---------- Pricing — existing-site door (Section 5) --------------------- */ /* Quieter on purpose. Section 3 and Section 4 are the two main doors (build and care); Section 5 is the secondary door for visitors who arrive with a site they already like. Narrower column on a tinted surface band + smaller heading + a single ghost CTA so it reads as a side door, not a third major path. The Section 1 router's #existing-site link lands here. */ .vp-section--existing { padding-block: clamp(2.25rem, 4vw, 3.5rem); background: var(--vp-surface); border-block: 1px solid var(--vp-border); } .vp-existing { max-width: 640px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); text-align: center; } .vp-existing__heading { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 0.85rem; color: var(--vp-text); } .vp-existing__body { margin: 0 0 1.5rem; color: var(--vp-text-muted); line-height: 1.6; } .vp-existing__cta { display: inline-block; padding: 0.75rem 1.5rem; background: transparent; color: var(--vp-text); border: 1px solid var(--vp-border); border-radius: 999px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .vp-existing__cta:hover { border-color: color-mix(in srgb, var(--vp-primary) 60%, var(--vp-border)); color: var(--vp-primary); transform: translateY(-1px); } .vp-existing__cta:focus-visible { outline: none; box-shadow: var(--vp-ring); } @media (prefers-reduced-motion: reduce) { .vp-existing__cta { transition: none; } .vp-existing__cta:hover { transform: none; } } /* ---------- Pricing — FAQ (Section 6) ------------------------------------ */ /* Native
/ disclosure — keyboard + screen-reader support straight from the platform, no JS. The .vp-faq__item visuals are shared with the front-page FAQ pattern; this block just adds the section landmark, the heading row, and the column max-width. */ .vp-section--faq { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .vp-faq-block { max-width: 760px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); } .vp-faq-block__intro { margin: 0 0 2rem; text-align: center; } .vp-faq-block__heading { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--vp-text); } /* ---------- Pricing — closing CTA (Section 7) ---------------------------- */ /* The page's final beat — the "front desk" pulled up from the old footer because the routing conversation deserves prominence. Same radial-violet- on-surface vocabulary as the existing .vp-cta block so this reads as a recognized final-beat treatment, but it's a fresh
so the structure matches Sections 2–6 (region landmark + aria-labelledby + scoped classes). The CTA gets primary-button visual weight because this is the single most important action on the page. */ .vp-section--closing { padding-block: clamp(3rem, 6vw, 5rem); background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--vp-primary) 15%, transparent) 0%, transparent 70%), var(--vp-surface); border-block: 1px solid var(--vp-border); } .vp-closing { max-width: 720px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); text-align: center; } .vp-closing__heading { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 1rem; color: var(--vp-text); } .vp-closing__body { margin: 0 0 1.75rem; color: var(--vp-text-muted); font-size: 1.05rem; line-height: 1.6; } .vp-closing__cta { display: inline-block; padding: 0.95rem 1.75rem; background: var(--vp-primary); color: #ffffff; border: 1px solid var(--vp-primary); border-radius: 999px; font-weight: 600; text-decoration: none; box-shadow: var(--vp-shadow-violet); transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .vp-closing__cta:hover { background: var(--vp-primary-hover); border-color: var(--vp-primary-hover); color: #ffffff; transform: translateY(-1px); } .vp-closing__cta:focus-visible { outline: none; box-shadow: var(--vp-ring); } @media (prefers-reduced-motion: reduce) { .vp-closing__cta { transition: none; } .vp-closing__cta:hover { transform: none; } } /* Responsive — collapse pricing grids to a single column */ @media (max-width: 900px) { .vp-pkg-grid, .vp-cp-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .vp-router__grid { grid-template-columns: 1fr; } } /* ---------- Editor-only quality of life ----------------------------------- */ .editor-styles-wrapper { background: var(--vp-bg); color: var(--vp-text); } /* ---------- Responsive ---------------------------------------------------- */ /* At <= 781px (WP's default mobile breakpoint), the desktop nav, theme toggle, and header CTAs collapse into the [vp_mobile_nav] overlay. Above that, the hamburger stays hidden and the inline nav is the only nav. */ @media (max-width: 781px) { .vp-header__nav-wrap .vp-nav, .vp-header__nav-wrap .vp-theme-toggle, .vp-header__cta { display: none !important; } .vp-menu-toggle { display: inline-flex; } } @media (max-width: 640px) { .vp-hero__ctas { flex-direction: column !important; } .vp-hero__ctas .wp-block-button { width: 100%; } .vp-hero__ctas .wp-block-button__link { display: block; text-align: center; } }