/* CloudPress — extras that theme.json can't express.
Mostly: hero gradients, sticky header backdrop-blur, badge pill,
alternating-section flip, button glow, MCP demo mock. */
:root {
--cp-navy: #0E1A27;
--cp-navy-700: #15293c;
--cp-blue: #1A8FD1;
--cp-blue-600: #1577ad;
--cp-sky: #38BDF8;
--cp-orange: #F5841F;
--cp-orange-600: #db6f10;
--cp-green: #2BAD76;
--cp-gray-50: #f6f9fc;
--cp-gray-100: #EEF4FA;
--cp-gray-200: #D0E4F4;
--cp-gray-300: #c2d2df;
--cp-gray-400: #8AAEC8;
--cp-gray-500: #5b6b7a;
--cp-gray-700: #33414f;
--cp-border: var(--cp-gray-200);
--cp-border-strong: var(--cp-gray-300);
}
html { scroll-behavior: smooth; }
::selection { background: rgba(26,143,209,.22); }
/* Kill block-gap between top-level page sections so dark sections touch */
.wp-site-blocks > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.cp-header, .cp-hero, .cp-mcp, .cp-feature, .cp-cred, .cp-footer { margin: 0 !important; }
/* ---------- Sticky header ---------- */
.cp-header {
position: sticky; top: 0; z-index: 50;
background: var(--cp-navy);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.cp-header .wp-block-site-logo img { height: 26px; width: auto; display: block; }
/* Pill button look + glow (applies to all primary buttons globally;
theme.json already sets orange fill + 999px radius). */
.wp-block-button__link {
display: inline-flex; align-items: center; gap: 8px;
transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wp-block-button__link:hover { transform: translateY(-1px); }
/* Ghost variants */
.wp-block-button.is-style-ghost-light .wp-block-button__link {
background: rgba(255,255,255,.06) !important;
color: #fff !important;
border: 1.5px solid rgba(255,255,255,.26);
box-shadow: none;
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover {
background: rgba(255,255,255,.14) !important;
border-color: rgba(255,255,255,.4);
}
.wp-block-button.is-style-ghost-dark .wp-block-button__link {
background: transparent !important;
color: var(--cp-navy) !important;
border: 1.5px solid var(--cp-border-strong);
box-shadow: none;
}
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover {
border-color: var(--cp-blue);
color: var(--cp-blue) !important;
}
/* ---------- Eyebrow label ---------- */
.cp-eyebrow {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 13px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase;
color: var(--cp-blue);
display: inline-flex; align-items: center; gap: 9px;
}
.cp-eyebrow.on-dark { color: #7FD0F5; }
.cp-eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; opacity: .7;
}
/* ---------- Hero ---------- */
.cp-hero {
position: relative; overflow: hidden;
color: #fff;
background:
radial-gradient(680px 380px at 84% -10%, rgba(56,189,248,.20), transparent 60%),
radial-gradient(560px 340px at -2% 120%, rgba(26,143,209,.18), transparent 60%),
var(--cp-navy);
}
.cp-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
linear-gradient(rgba(127,208,245,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(127,208,245,.06) 1px, transparent 1px);
background-size: 54px 54px;
-webkit-mask-image: radial-gradient(circle at 50% 0, #000, transparent 72%);
mask-image: radial-gradient(circle at 50% 0, #000, transparent 72%);
}
.cp-hero > * { position: relative; }
.cp-hero .cp-hero-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 8px 7px 16px; border-radius: 999px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.82);
}
.cp-hero .cp-hero-badge b {
font-weight: 600; background: var(--cp-blue); color: #fff;
padding: 4px 10px; border-radius: 999px; letter-spacing: .1em; font-size: 11px;
}
.cp-hero h1 {
font-size: clamp(2.7rem, 5.6vw, 4.6rem) !important;
line-height: 1.04;
letter-spacing: -.03em;
font-weight: 800;
color: #fff;
}
.cp-hero h1 .accent { color: var(--cp-sky); }
.cp-mcp-head h2 { font-size: clamp(2.25rem, 3.4vw, 3rem) !important; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
.cp-hero .cp-hero .cp-hero .cp-hero /* ---------- MCP demo (centerpiece, placeholder) ---------- */
.cp-mcp {
position: relative; overflow: hidden;
color: var(--cp-navy); background: #fff;
padding: 104px 0;
}
.cp-mcp::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(700px 380px at 92% -6%, rgba(26,143,209,.07), transparent 58%),
radial-gradient(560px 360px at 4% 108%, rgba(245,132,31,.05), transparent 58%);
}
.cp-mcp > * { position: relative; }
.cp-mcp-head { text-align: center; max-width: 680px; margin: 0 auto; }
.cp-mcp-head h2 { color: var(--cp-navy); margin-top: 14px; }
.cp-mcp-head p { color: var(--cp-fg-muted, rgba(14,26,39,.7)); margin-top: 14px; font-size: 1.125rem; }
.cp-mcp .cp-eyebrow.on-dark { color: var(--cp-blue); }
.cp-mcp-stage {
position: relative;
display: block; max-width: 720px;
margin: 48px auto 0;
border: 1px solid rgba(255,255,255,.1);
border-radius: 22px; overflow: hidden;
background: #0c1722;
box-shadow: 0 40px 90px rgba(0,0,0,.46);
}
.cp-mcp-link {
position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); z-index: 6;
display: flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 999px;
background: #0c1722; border: 1px solid rgba(255,255,255,.16);
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9fd4f3;
white-space: nowrap;
}
.cp-mcp-link .pulse {
width: 7px; height: 7px; border-radius: 50%;
background: var(--cp-green); box-shadow: 0 0 0 0 rgba(43,173,118,.6);
animation: cp-pulse 2s infinite;
}
@keyframes cp-pulse {
0% { box-shadow: 0 0 0 0 rgba(43,173,118,.5); }
70% { box-shadow: 0 0 0 7px rgba(43,173,118,0); }
100% { box-shadow: 0 0 0 0 rgba(43,173,118,0); }
}
.cp-mcp-chat, .cp-mcp-dash { padding: 18px 20px; }
.cp-mcp-chat { background: #0e1b29; min-height: 560px; display: flex; flex-direction: column; gap: 14px; }
.cp-mcp-dash { background: #0c1722; display: flex; flex-direction: column; gap: 12px; }
.cp-mcp-toolbar {
display: flex; align-items: center; gap: 10px;
padding-bottom: 14px; margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,.07);
font-size: 14px; font-weight: 600;
}
.cp-mcp-toolbar .sub {
font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
color: rgba(255,255,255,.62); margin-left: auto; letter-spacing: .04em;
font-weight: 400;
}
.cp-mcp-toolbar .ava {
width: 26px; height: 26px; border-radius: 8px;
background: linear-gradient(135deg, #1A8FD1, #38BDF8);
}
.cp-msg-user {
align-self: flex-end; max-width: 90%;
background: var(--cp-blue-600); color: #fff;
padding: 11px 15px; border-radius: 14px 14px 4px 14px;
font-size: 14px; line-height: 1.5;
}
.cp-msg-bot {
align-self: flex-start; max-width: 90%;
color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.5;
}
.cp-toolcall {
margin-left: 0;
border: 1px solid rgba(255,255,255,.12); border-radius: 11px;
background: rgba(255,255,255,.03); padding: 10px 12px;
font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px;
max-width: 340px;
}
.cp-toolcall-h { display: flex; align-items: center; gap: 8px; color: #cfe8f8; }
.cp-toolcall-h .tname { color: #7FD0F5; }
.cp-toolcall-h .ok { margin-left: auto; color: var(--cp-green); font-weight: 700; }
.cp-toolcall-args { margin-top: 7px; color: rgba(255,255,255,.62); font-size: 11px; line-height: 1.5; }
.cp-toolcall-h .tscope {
font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
color: rgba(159,180,198,.92);
border: 1px solid rgba(255,255,255,.18);
border-radius: 5px; padding: 2px 6px;
}
.cp-toolcall-h .spin {
width: 12px; height: 12px; margin-left: auto;
border: 2px solid rgba(255,255,255,.25); border-top-color: #7FD0F5;
border-radius: 50%; animation: cp-spin .8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
.cp-toolcall-args .k { color: #9fb4c6; }
.cp-toolcall-args .v { color: #9ad0a8; }
.cp-dash-sec {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(255,255,255,.62);
margin-top: 4px;
}
.cp-dns-empty {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.6;
padding: 11px 14px; border: 1px solid rgba(255,255,255,.09);
border-radius: 12px; background: rgba(255,255,255,.02);
}
.cp-site-row {
display: flex; align-items: center; gap: 12px;
padding: 13px 14px; border: 1px solid rgba(255,255,255,.09);
border-radius: 12px; background: rgba(255,255,255,.02);
}
.cp-site-fav {
width: 30px; height: 30px; border-radius: 8px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
font-family: 'Geist Mono', ui-monospace, monospace;
font-weight: 600; font-size: 13px; color: #fff;
}
.cp-site-name { font-size: 13.5px; font-weight: 500; }
.cp-site-meta {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; color: rgba(255,255,255,.62); margin-top: 2px;
}
.cp-site-row.cp-fresh { animation: cp-popin .35s var(--cp-ease, ease-out); }
@keyframes cp-popin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cp-st-work { background: rgba(245,132,31,.18); color: #f6b06a; }
.cp-st-warn { background: rgba(245,132,31,.16); color: #f7a85a; }
.cp-st-warn .d { background: #F5841F; }
.cp-st-work .d { background: #F5841F; animation: cp-pulse 1.4s infinite; }
.cp-site-status {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px;
padding: 5px 10px; border-radius: 999px;
}
.cp-site-status .d { width: 7px; height: 7px; border-radius: 50%; }
.cp-st-live { background: rgba(43,173,118,.14); color: #5fd6a0; }
.cp-st-live .d { background: #2BAD76; }
.cp-st-staging { background: rgba(26,143,209,.16); color: #7FD0F5; }
.cp-st-staging .d { background: #1A8FD1; }
.cp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-metric-wide { grid-column: 1 / -1; }
.cp-metric {
border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
padding: 13px 14px; background: rgba(255,255,255,.02);
}
.cp-metric-l {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.62);
}
.cp-metric.cp-flash { animation: cp-metric-flash .55s var(--cp-ease, ease-out); }
@keyframes cp-metric-flash {
0% { box-shadow: 0 0 0 0 rgba(56,189,248,.0); }
35% { box-shadow: 0 0 0 6px rgba(56,189,248,.16); }
100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}
.cp-metric-v {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 1.5rem; font-weight: 600; margin-top: 5px;
letter-spacing: -.02em; color: #fff;
}
.cp-metric-v .u { font-size: .8rem; color: rgba(255,255,255,.5); margin-left: 3px; }
.cp-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.cp-bar > div { height: 100%; background: linear-gradient(90deg, var(--cp-blue), var(--cp-sky)); border-radius: 999px; }
.cp-mcp-footnote {
text-align: center; margin-top: 18px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .04em;
}
/* ---------- Alternating feature sections (LIGHT, per design) ---------- */
.cp-feature { padding: 96px 0; border-bottom: 1px solid var(--cp-border); background: #fff; color: var(--cp-navy); }
.cp-feature.alt { background: var(--cp-gray-50); }
.cp-feature h2 {
color: var(--cp-navy);
font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
line-height: 1.08;
letter-spacing: -.02em;
font-weight: 700;
}
.cp-feature .has-muted-color { color: var(--cp-gray-500) !important; }
.cp-feature .cp-feature-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.cp-feature.flip .cp-feature-grid > :first-child { order: 2; }
.cp-feature.flip .cp-feature-grid > :last-child { order: 1; }
.cp-feature-list {
list-style: none;
margin: 26px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 520px;
}
.cp-feature-list li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 1.02rem; line-height: 1.5;
color: var(--cp-gray-500);
}
.cp-feature-list li::before {
content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px;
background-color: var(--cp-check, var(--cp-blue));
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.cp-feature-list.is-blue { --cp-check: #1A8FD1; }
.cp-feature-list.is-green { --cp-check: #2BAD76; }
.cp-feature-list.is-orange { --cp-check: #F5841F; }
.cp-feature-list.is-teal { --cp-check: #1299A6; }
.cp-feature-list.is-purple { --cp-check: #A78BFA; }
.cp-feature-list.is-slate { --cp-check: #5B8AB0; }
.cp-feature-panel {
width: 100%; aspect-ratio: 4 / 3; border-radius: 22px;
border: 1px solid var(--cp-border);
background: radial-gradient(120% 120% at 30% 0, #fff, var(--cp-gray-100));
box-shadow: 0 8px 24px rgba(14,26,39,.09);
display: flex; align-items: center; justify-content: center;
}
.cp-feature.alt .cp-feature-panel {
background: radial-gradient(120% 120% at 30% 0, #fff, #fff);
}
.cp-feature-bigicon {
width: 120px; height: 120px; border-radius: 28px;
display: inline-flex; align-items: center; justify-content: center;
}
.cp-feature-bigicon svg { width: 58px; height: 58px; stroke-width: 1.6; fill: none; }
/* ---------- Credibility band (LIGHT, per design) ---------- */
.cp-cred { background: var(--cp-gray-100); padding: 96px 0; color: var(--cp-navy); }
.cp-cred h2 {
color: var(--cp-navy);
font-size: clamp(2.25rem, 3.4vw, 3rem) !important;
line-height: 1.1;
letter-spacing: -.02em;
font-weight: 700;
}
.cp-cred .has-muted-color { color: var(--cp-gray-500) !important; }
.cp-cred-grid {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; align-items: center;
}
.cp-cred-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-cred-stat {
background: #fff; border: 1px solid var(--cp-border); border-radius: 16px;
padding: 22px; box-shadow: 0 1px 2px rgba(14,26,39,.06);
}
.cp-cred-stat .n {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 2rem; font-weight: 600; letter-spacing: -.02em; color: var(--cp-navy);
}
.cp-cred-stat .l { font-size: .9rem; color: var(--cp-gray-500); margin-top: 4px; }
.cp-cred-chips { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.cp-cred-chip {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px;
padding: 7px 13px; border-radius: 999px;
background: #fff; border: 1px solid var(--cp-border); color: var(--cp-gray-700);
}
.cp-cred-chip::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--cp-blue);
}
/* ---------- CTA box (dark card on light page, per design) ---------- */
.cp-cta-section { background: #fff; }
.cp-cta-box {
position: relative; overflow: hidden;
background: var(--cp-navy); color: #fff;
border-radius: 28px; padding: 72px 56px; text-align: center;
box-shadow: 0 30px 80px rgba(14,26,39,.22);
background-image:
radial-gradient(520px 320px at 90% 130%, rgba(245,132,31,.22), transparent 60%),
radial-gradient(440px 260px at 6% -25%, rgba(56,189,248,.24), transparent 60%);
}
.cp-cta-box h2 {
color: #fff !important;
font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
line-height: 1.08;
letter-spacing: -.02em;
font-weight: 700;
max-width: 720px;
margin-left: auto; margin-right: auto;
}
.cp-cta-box .cp-eyebrow { color: #7FD0F5; }
/* ---------- Footer ---------- */
.cp-footer { background: var(--cp-navy); color: rgba(255,255,255,.66); padding: 48px 0 36px; border-top: 1px solid rgba(255,255,255,.08); }
.cp-footer a { color: rgba(255,255,255,.66); text-decoration: none; }
.cp-footer a:hover { color: #fff; }
.cp-footer-h {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.5); margin-bottom: 10px;
}
.cp-footer-base {
display: flex; justify-content: space-between; align-items: center;
margin-top: 48px; padding-top: 24px;
border-top: 1px solid rgba(255,255,255,.1);
font-size: 13px; color: rgba(255,255,255,.5);
}
.cp-footer-built { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.cp-feature .cp-feature-grid { grid-template-columns: 1fr; gap: 36px; }
.cp-feature.flip .cp-feature-grid > :first-child { order: 1; }
.cp-feature.flip .cp-feature-grid > :last-child { order: 2; }
.cp-feature-panel { aspect-ratio: 16 / 9; }
.cp-mcp-stage { grid-template-columns: 1fr; }
.cp-mcp-chat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.cp-mcp-link { display: none; }
.cp-cred-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ===== Hero stack-logo strip (replaces .cp-proof) ===== */
.cp-stack {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 80px;
padding: 36px 28px 8px;
border-top: 1px solid rgba(255,255,255,.14);
text-align: center;
}
.cp-stack-label {
display: block;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
margin-bottom: 22px;
}
.cp-stack-logos {
display: flex;
justify-content: space-around;
align-items: center;
gap: clamp(28px, 5vw, 80px);
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
}
.cp-stack-logo {
height: clamp(48px, 6vw, 72px);
flex: 1 1 140px;
max-width: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.cp-stack-logo img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: .85;
filter: saturate(0) brightness(1.8);
transition: opacity .2s, filter .2s;
}
.cp-stack-logo:hover img { opacity: 1; filter: none; }
.cp-stack-ph {
display: none;
align-items: center;
gap: 8px;
height: 34px;
padding: 0 14px;
border: 1px dashed rgba(255,255,255,.22);
border-radius: 8px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: .04em;
color: rgba(255,255,255,.62);
background: rgba(255,255,255,.03);
}
@media (max-width: 640px) {
.cp-stack-logos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 32px;
justify-items: center;
}
.cp-stack-logo { flex: none; justify-content: center; }
}
/* ===== Slim footer ===== */
.cp-footer-min {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.cp-footer-min .cp-footer-logo { margin: 0; }
.cp-footer-min .cp-footer-logo img { height: 24px; width: auto; display: block; }
.cp-footer-links {
display: flex;
gap: 30px;
flex-wrap: wrap;
font-size: 15px;
}
.cp-footer-links a {
color: rgba(255,255,255,.66);
text-decoration: none;
transition: color .15s;
}
.cp-footer-links a:hover { color: #fff; }
.cp-footer .cp-footer-base { margin-top: 22px; padding-top: 18px; }
@media (max-width: 640px) {
.cp-footer-min { justify-content: center; text-align: center; }
.cp-footer-links { justify-content: center; }
.cp-footer .cp-footer-base { flex-direction: column; gap: 8px; text-align: center; }
}
/* ===== Interactive MCP demo — chat controls ===== */
.cp-mcp-pause {
display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
min-height: 32px; padding: 6px 13px;
border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
background: rgba(255,255,255,.05); color: rgba(255,255,255,.9);
cursor: pointer;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
transition: background .15s, border-color .15s;
}
.cp-mcp-pause:hover { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.5); }
.cp-chat-feed {
flex: 1; min-height: 220px; max-height: 320px; overflow-y: auto;
display: flex; flex-direction: column; gap: 12px;
padding-right: 4px;
}
.cp-chat-prompts {
display: flex; flex-wrap: wrap; gap: 8px;
padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07);
}
.cp-pchip {
font-family: inherit; font-size: 12.5px; font-weight: 500;
padding: 8px 13px; min-height: 36px; border-radius: 999px;
border: 1px solid rgba(255,255,255,.28);
background: rgba(255,255,255,.04); color: rgba(255,255,255,.86);
cursor: pointer; transition: .15s;
}
.cp-pchip:hover { border-color: rgba(56,189,248,.45); color: #fff; }
.cp-pchip.is-active { background: rgba(56,189,248,.16); border-color: rgba(56,189,248,.55); color: #fff; }
.cp-chat-input {
display: flex; align-items: center; gap: 10px;
padding: 8px 8px 8px 14px;
border: 1px solid rgba(255,255,255,.26); border-radius: 13px;
background: rgba(255,255,255,.04);
}
.cp-chat-input span { flex: 1; font-size: 13.5px; color: rgba(255,255,255,.62); }
.cp-chat-send {
width: 38px; height: 38px; border-radius: 9px; border: none;
background: var(--cp-blue-600); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex: none;
}
.cp-chat-send:hover { background: var(--cp-blue); }
.cp-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.cp-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); animation: cp-typing 1.2s infinite; }
.cp-typing span:nth-child(2) { animation-delay: .15s; }
.cp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cp-typing { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
/* ===== a11y: skip link, focus rings, motion, anchor offsets, sr-only ===== */
.cp-skip {
position: absolute; left: 14px; top: -60px; z-index: 200;
background: #fff; color: var(--cp-navy);
font-weight: 600; font-size: 15px;
padding: 12px 18px; border-radius: 10px;
box-shadow: 0 8px 24px rgba(14,26,39,.18);
transition: top .15s ease;
text-decoration: none;
}
.cp-skip:focus { top: 14px; outline: 2px solid var(--cp-sky); outline-offset: 3px; }
:where(a, button, [role="button"], input, textarea, select, summary, [tabindex]):focus-visible {
outline: 2px solid var(--cp-sky); outline-offset: 3px; border-radius: 6px;
}
.cp-feature :focus-visible,
.cp-cred :focus-visible,
.cp-cta-section :focus-visible { outline-color: var(--cp-blue-600); }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* keep in-page anchor jumps clear of the sticky header */
#main, #mcp, #features, #mcp-feature, #top { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* ===== Button contrast: navy text on accent fills (was white ~2.6:1 → ~6.8:1) ===== */
.wp-block-button__link.has-orange-background-color { color: var(--cp-navy) !important; }
.wp-block-button.is-style-fill .wp-block-button__link.has-orange-background-color,
.wp-block-button .wp-block-button__link.has-orange-background-color { color: var(--cp-navy) !important; }
.cp-header .wp-block-button__link { min-height: 40px; }
/* Footer link tap targets + slightly higher contrast */
.cp-footer-links a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(255,255,255,.78); }
.cp-footer-base { color: rgba(255,255,255,.66) !important; }
/* ============================================================
Blog & News — page hero, filter, featured, post grid, cards
Companion to templates/page-blog-news.html + category.html
============================================================ */
/* keep zero margin between blog sections (matches other top-level sections) */
.cp-blog-main, .cp-phero, .cp-filterbar { margin: 0 !important; }
.cp-blog-main { background: #fff; }
/* ---------- Header: full nav + login link ---------- */
.cp-header .wp-block-navigation { font-family: var(--wp--preset--font-family--sans); }
.cp-header .wp-block-navigation a.wp-block-navigation-item__content {
font-size: 15px; font-weight: 500;
color: rgba(255,255,255,.74);
padding: 8px 0;
transition: color .15s;
min-height: 36px;
display: inline-flex; align-items: center;
}
.cp-header .wp-block-navigation a.wp-block-navigation-item__content:hover,
.cp-header .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content { color: #fff; }
.cp-header .cp-nav-right { align-items: center; gap: 18px; }
.cp-header .cp-nav-right .cp-login-link { margin: 0; }
.cp-header .cp-nav-right .cp-login-link a {
font-size: 15px; font-weight: 500;
color: rgba(255,255,255,.74);
text-decoration: none;
transition: color .15s;
}
.cp-header .cp-nav-right .cp-login-link a:hover { color: #fff; }
.cp-header .cp-header-logo { margin: 0; }
@media (max-width: 880px) {
.cp-header .wp-block-navigation { display: none; }
}
/* ---------- Category accent map ---------- */
.cp-cat-chip [data-cat="Hosting"], .cp-cat-chip a[href*="/category/hosting"] { --cat: #1A8FD1; --cat-tint: rgba(26,143,209,.12); }
.cp-cat-chip [data-cat="WordPress"], .cp-cat-chip a[href*="/category/wordpress"] { --cat: #5B8AB0; --cat-tint: rgba(91,138,176,.14); }
.cp-cat-chip [data-cat="Security"], .cp-cat-chip a[href*="/category/security"] { --cat: #2BAD76; --cat-tint: rgba(43,173,118,.13); }
.cp-cat-chip [data-cat="Performance"], .cp-cat-chip a[href*="/category/performance"] { --cat: #F5841F; --cat-tint: rgba(245,132,31,.13); }
.cp-cat-chip [data-cat="Agencies"], .cp-cat-chip a[href*="/category/agencies"] { --cat: #A78BFA; --cat-tint: rgba(167,139,250,.16); }
.cp-cat-chip [data-cat="Product"], .cp-cat-chip a[href*="/category/product"] { --cat: #1299A6; --cat-tint: rgba(18,153,166,.13); }
.cp-cat-chip [data-cat="Company"], .cp-cat-chip a[href*="/category/company"] { --cat: #1577ad; --cat-tint: rgba(21,119,173,.12); }
.cp-cat-chip {
display: inline-flex; align-items: center;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
padding: 0; border-radius: 999px;
white-space: nowrap;
margin: 0 !important;
}
.cp-cat-chip a {
display: inline-flex; align-items: center; gap: 7px;
color: var(--cat, #1A8FD1);
background: var(--cat-tint, rgba(26,143,209,.12));
padding: 6px 11px;
border-radius: 999px;
text-decoration: none;
}
.cp-cat-chip a::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* ---------- Page hero (light) ---------- */
.cp-phero {
position: relative; overflow: hidden;
background:
radial-gradient(720px 360px at 84% -20%, rgba(56,189,248,.14), transparent 62%),
linear-gradient(var(--cp-gray-100), #fff);
padding: 74px 0 56px;
}
.cp-phero-grid {
position: absolute; inset: 0; pointer-events: none; opacity: .6;
background-image:
linear-gradient(rgba(14,26,39,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,26,39,.045) 1px, transparent 1px);
background-size: 54px 54px;
-webkit-mask-image: radial-gradient(circle at 50% 0, #000, transparent 70%);
mask-image: radial-gradient(circle at 50% 0, #000, transparent 70%);
}
.cp-phero-in { position: relative; max-width: 760px; margin-left: auto; margin-right: auto; }
.cp-phero .cp-eyebrow { margin-bottom: 18px; color: var(--cp-blue); }
.cp-phero-title {
font-family: var(--wp--preset--font-family--sans);
font-weight: 800;
font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
line-height: 1.05;
letter-spacing: -.03em;
color: var(--cp-navy);
margin: 0;
}
.cp-phero-sub {
font-size: 1.18rem; line-height: 1.55;
color: var(--cp-gray-500);
margin-top: 18px; max-width: 560px;
}
.cp-phero-search { margin-top: 30px; max-width: 380px; }
.cp-phero-search .wp-block-search__inside-wrapper {
background: #fff; border: 1px solid var(--cp-border-strong);
border-radius: 999px; padding: 11px 18px;
box-shadow: 0 1px 2px rgba(14,26,39,.06);
transition: .15s;
}
.cp-phero-search .wp-block-search__inside-wrapper:focus-within {
border-color: var(--cp-blue);
box-shadow: 0 0 0 4px rgba(26,143,209,.2);
}
.cp-phero-search input.wp-block-search__input {
border: none !important; outline: none !important;
font-family: var(--wp--preset--font-family--sans);
font-size: 15px; color: var(--cp-navy); background: transparent !important;
padding: 0 !important; width: 100%;
}
/* ---------- Filter bar (sticky) ---------- */
.cp-filterbar {
position: sticky; top: 73px; z-index: 30;
background: rgba(255,255,255,.86);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--cp-border);
padding-left: 28px; padding-right: 28px;
}
.cp-filter-row { display: flex; gap: 9px; flex-wrap: wrap; padding: 16px 0; }
.cp-fchip {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
color: var(--cp-gray-700); background: #fff;
border: 1px solid var(--cp-border-strong);
padding: 9px 15px; border-radius: 999px;
cursor: pointer; text-decoration: none;
transition: .15s ease;
min-height: 38px; display: inline-flex; align-items: center;
}
.cp-fchip:hover { border-color: var(--cp-blue); color: var(--cp-blue); }
.cp-fchip.is-active { background: var(--cp-navy); border-color: var(--cp-navy); color: #fff; }
/* ---------- Featured article ---------- */
.cp-featured-q { margin: 0; }
.cp-featured-q .wp-block-post-template {
list-style: none; padding: 0; margin: 0;
}
.cp-featured-q .wp-block-post-template > li { margin: 0; }
.cp-featured {
display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
background: #fff;
border: 1px solid var(--cp-border);
border-radius: 20px; overflow: hidden;
box-shadow: 0 8px 24px rgba(14,26,39,.09);
transition: transform .25s ease, box-shadow .25s ease;
margin: 0;
}
.cp-featured:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(14,26,39,.12); }
.cp-featured-media {
position: relative; min-height: 420px;
background: var(--cp-gray-100);
margin: 0;
}
.cp-featured-media .wp-block-post-featured-image,
.cp-featured-media .wp-block-post-featured-image a,
.cp-featured-media .wp-block-post-featured-image img {
width: 100%; height: 100%; display: block; object-fit: cover;
}
.cp-featured-flag {
position: absolute; top: 18px; left: 18px; z-index: 2;
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--cp-navy); background: var(--cp-orange);
padding: 7px 13px; border-radius: 999px;
box-shadow: 0 6px 18px rgba(245,132,31,.34);
}
.cp-featured-body {
padding: 44px;
display: flex; flex-direction: column; justify-content: center; gap: 0;
}
.cp-featured-body > * { margin: 0; }
.cp-featured-body > * + * { margin-top: 16px; }
.cp-featured-body .cp-cat-chip { align-self: flex-start; }
.cp-featured-title {
font-family: var(--wp--preset--font-family--sans);
font-weight: 800;
font-size: clamp(1.7rem, 2.6vw, 2.3rem) !important;
line-height: 1.12; letter-spacing: -.025em;
text-wrap: balance;
color: var(--cp-navy);
}
.cp-featured-title a { color: inherit; text-decoration: none; }
.cp-featured-title a:hover { color: var(--cp-blue); }
.cp-featured-excerpt {
font-size: 1.05rem; line-height: 1.55;
color: var(--cp-gray-500); max-width: 46ch;
}
.cp-featured-excerpt p { margin: 0; }
.cp-featured-foot {
display: flex; align-items: center; gap: 18px;
margin-top: 26px !important; flex-wrap: wrap;
}
.cp-featured-foot > * { margin: 0; }
/* Read article button */
.cp-read-more {
display: inline-flex; align-items: center; gap: 8px;
text-decoration: none;
margin-top: 26px !important;
}
.cp-read-more.is-style-primary,
a.cp-read-more {
background: var(--cp-orange); color: var(--cp-navy);
font-family: var(--wp--preset--font-family--sans);
font-size: 15px; font-weight: 600;
padding: 13px 22px; border-radius: 999px;
box-shadow: 0 10px 24px rgba(245,132,31,.30);
transition: transform .15s ease, background .15s ease;
}
a.cp-read-more:hover { background: var(--cp-orange-600); transform: translateY(-1px); color: var(--cp-navy); }
/* author + date meta */
.cp-post-author {
display: inline-flex; align-items: center; gap: 11px;
font-family: var(--wp--preset--font-family--sans);
font-size: 13.5px; color: var(--cp-navy); margin: 0;
}
.cp-post-author .wp-block-post-author__avatar img {
width: 38px; height: 38px; border-radius: 50%; display: block;
}
.cp-post-author .wp-block-post-author__name { font-weight: 600; }
.cp-post-meta {
display: inline-flex; align-items: center; gap: 9px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; letter-spacing: .04em;
color: var(--cp-gray-400);
margin: 0;
}
/* ---------- Post grid ---------- */
.cp-grid-q { margin: 0; }
ul.wp-block-post-template.cp-post-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
list-style: none; padding: 0; margin: 0;
}
ul.wp-block-post-template.cp-post-grid > li { margin: 0; }
.cp-post-card {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--cp-border);
border-radius: 14px; overflow: hidden;
box-shadow: 0 2px 8px rgba(14,26,39,.07);
transition: transform .2s ease, box-shadow .2s ease;
margin: 0;
height: 100%;
}
.cp-post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(14,26,39,.12); }
.cp-post-thumb {
position: relative;
background: var(--cp-gray-100);
overflow: hidden;
margin: 0 !important;
}
.cp-post-thumb .wp-block-post-featured-image {
margin: 0; width: 100%;
}
.cp-post-thumb .wp-block-post-featured-image img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.cp-post-thumb .cp-cat-chip-overlay {
position: absolute; top: 14px; left: 14px; z-index: 2;
}
.cp-post-thumb .cp-cat-chip-overlay a {
background: rgba(255,255,255,.94) !important;
backdrop-filter: blur(6px);
box-shadow: 0 1px 2px rgba(14,26,39,.06);
}
.cp-post-card-body {
display: flex; flex-direction: column;
flex: 1;
padding: 22px 22px 24px;
gap: 0;
margin: 0 !important;
}
.cp-post-card-body > * { margin: 0; }
.cp-post-card-title {
font-family: var(--wp--preset--font-family--sans);
font-weight: 700;
font-size: 1.22rem !important;
line-height: 1.24;
letter-spacing: -.01em;
text-wrap: balance;
color: var(--cp-navy);
}
.cp-post-card-title a { color: inherit; text-decoration: none; transition: color .15s; }
.cp-post-card-title a:hover { color: var(--cp-blue); }
.cp-post-card-excerpt {
font-size: .96rem; line-height: 1.55;
color: var(--cp-gray-500);
margin-top: 11px !important;
}
.cp-post-card-excerpt p { margin: 0; }
.cp-post-card-body .cp-post-meta {
margin-top: auto !important;
padding-top: 18px;
}
/* ---------- Pagination ---------- */
.cp-loadmore {
display: flex; justify-content: center;
margin-top: 48px;
gap: 12px;
flex-wrap: wrap;
}
.cp-loadmore .wp-block-query-pagination-numbers,
.cp-loadmore .wp-block-query-pagination-previous,
.cp-loadmore .wp-block-query-pagination-next {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 13px; letter-spacing: .04em;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid var(--cp-border-strong);
color: var(--cp-gray-700);
text-decoration: none;
background: #fff;
transition: .15s;
}
.cp-loadmore a:hover { border-color: var(--cp-blue); color: var(--cp-blue); }
.cp-loadmore .wp-block-query-pagination-numbers .current {
background: var(--cp-navy); color: #fff; border-radius: 999px; padding: 6px 12px;
}
.cp-empty {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 13px; color: var(--cp-gray-400);
padding: 48px 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.cp-featured { grid-template-columns: 1fr; }
.cp-featured-media { min-height: 300px; }
ul.wp-block-post-template.cp-post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
ul.wp-block-post-template.cp-post-grid { grid-template-columns: 1fr; }
.cp-featured-body { padding: 30px 26px; }
.cp-phero-search { max-width: none; width: 100%; }
.cp-phero { padding: 56px 0 40px; }
}
/* =============================================================
ARTICLE TEMPLATE — single post (Article.html design)
Layout: centered head, hero image, prose + sticky aside.
============================================================= */
/* per-category accent — body class set by WP body_class() */
body.category-hosting { --cat: var(--cp-blue); --cat-tint: rgba(26,143,209,.12); }
body.category-wordpress { --cat: #5B8AB0; --cat-tint: rgba(91,138,176,.14); }
body.category-security { --cat: var(--cp-green); --cat-tint: rgba(43,173,118,.13); }
body.category-performance { --cat: var(--cp-orange); --cat-tint: rgba(245,132,31,.13); }
body.category-agencies { --cat: #A78BFA; --cat-tint: rgba(167,139,250,.16); }
body.category-product { --cat: #1299A6; --cat-tint: rgba(18,153,166,.13); }
body.category-company { --cat: var(--cp-blue-600); --cat-tint: rgba(21,119,173,.12); }
body.single { --cat: var(--cp-blue); --cat-tint: rgba(26,143,209,.12); }
/* ---------- Breadcrumb ---------- */
.cp-breadcrumb {
display: flex; align-items: center; justify-content: center; gap: 9px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; letter-spacing: .04em; color: var(--cp-gray-400);
}
.cp-breadcrumb a { color: inherit; text-decoration: none; transition: color .15s; }
.cp-breadcrumb a:hover { color: var(--cp-blue); }
.cp-breadcrumb .cp-breadcrumb-sep {
display: inline-block; width: 6px; height: 6px;
border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
transform: rotate(45deg); opacity: .55;
}
/* category chip used inside breadcrumb — re-use existing .cp-cat-chip or hand-rolled */
.cp-cat-chip {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
color: var(--cat, var(--cp-blue));
background: var(--cat-tint, rgba(26,143,209,.12));
padding: 6px 11px; border-radius: 999px; white-space: nowrap;
text-decoration: none;
}
.cp-cat-chip::before {
content:""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
/* the WP post-terms block can be a flow of links; normalize each to a chip */
.cp-breadcrumb .wp-block-post-terms { display: inline-flex; gap: 8px; }
.cp-breadcrumb .wp-block-post-terms a {
display: inline-flex; align-items: center; gap: 7px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
color: var(--cat, var(--cp-blue));
background: var(--cat-tint, rgba(26,143,209,.12));
padding: 6px 11px; border-radius: 999px; text-decoration: none;
}
.cp-breadcrumb .wp-block-post-terms a::before {
content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.cp-breadcrumb .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
/* ---------- Article head (centered) ---------- */
.cp-art-head { max-width: 780px; margin: 0 auto; text-align: center; }
.cp-art-title.wp-block-post-title {
font-family: 'Geist', system-ui, sans-serif;
font-weight: 800;
font-size: clamp(2.1rem, 4vw, 3.1rem) !important;
line-height: 1.08; letter-spacing: -.03em;
margin-top: 18px !important; text-wrap: balance;
}
.cp-art-lead p {
font-size: 1.24rem; line-height: 1.55;
color: var(--cp-gray-500);
margin: 20px auto 0 !important; max-width: 62ch;
}
.cp-art-meta {
display: flex; align-items: center; justify-content: center;
gap: 22px; margin-top: 30px; flex-wrap: wrap;
}
.cp-art-meta .wp-block-post-author {
display: inline-flex; align-items: center; gap: 11px; margin: 0;
}
.cp-art-meta .wp-block-post-author__avatar img { width: 38px; height: 38px; border-radius: 50%; }
.cp-art-meta .wp-block-post-author__name {
font-size: 13.5px; font-weight: 600; color: var(--cp-navy); margin: 0;
}
.cp-art-meta .wp-block-post-author__bio { display: none; }
.cp-post-meta {
display: inline-flex; align-items: center; gap: 9px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; letter-spacing: .04em; color: var(--cp-gray-400);
}
.cp-post-meta .wp-block-post-date { color: inherit; font: inherit; margin: 0; }
.cp-post-meta .sep {
display: inline-block; width: 3px; height: 3px; border-radius: 50%;
background: currentColor; opacity: .6;
}
.cp-post-meta .cp-read-time { display: inline-flex; align-items: center; gap: 6px; }
.cp-post-meta .cp-read-time svg { width: 13px; height: 13px; stroke-width: 2; }
/* ---------- Hero image ---------- */
.cp-art-hero-img.wp-block-post-featured-image {
max-width: 1080px; margin: 44px auto 0 !important;
border-radius: 28px; overflow: hidden;
border: 1px solid var(--cp-border);
box-shadow: 0 8px 24px rgba(14,26,39,.09);
background: var(--cp-gray-100);
}
.cp-art-hero-img img {
width: 100%; aspect-ratio: 21/9; object-fit: cover; display: block;
}
/* ---------- Article layout (sidebar + prose) ---------- */
.cp-art-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 64px !important;
max-width: 1080px; margin: 0 auto;
align-items: start;
}
.cp-art-layout.is-centered {
grid-template-columns: minmax(0, 760px);
justify-content: center;
}
.cp-art-layout.is-centered .cp-art-aside { display: none; }
/* ---------- Prose (post content) ---------- */
.cp-prose.wp-block-post-content {
font-family: 'Geist', system-ui, sans-serif;
font-size: 1.12rem; line-height: 1.7; color: var(--cp-gray-900);
max-width: 720px;
}
.cp-prose > * + * { margin-top: 1.4em; }
.cp-prose h2 {
font-size: 1.7rem !important; font-weight: 700 !important;
letter-spacing: -.02em; line-height: 1.2 !important;
margin-top: 2em !important; color: var(--cp-navy);
scroll-margin-top: 100px;
}
.cp-prose h3 {
font-size: 1.3rem !important; font-weight: 600 !important;
letter-spacing: -.01em; line-height: 1.3 !important;
margin-top: 1.6em !important; color: var(--cp-navy);
scroll-margin-top: 100px;
}
.cp-prose a {
color: var(--cp-blue-600); text-decoration: underline;
text-decoration-thickness: 1.5px; text-underline-offset: 2px;
}
.cp-prose a:hover { color: var(--cp-blue); }
.cp-prose strong { font-weight: 600; color: var(--cp-navy); }
.cp-prose ul, .cp-prose ol {
padding-left: 1.3em; display: flex; flex-direction: column; gap: .5em;
}
.cp-prose li { padding-left: .2em; }
.cp-prose ul li::marker { color: var(--cp-blue); }
.cp-prose blockquote, .cp-prose .wp-block-quote {
border-left: 3px solid var(--cp-blue) !important;
background: var(--cp-gray-50);
padding: 18px 26px !important;
border-radius: 0 14px 14px 0 !important;
font-size: 1.28rem !important; line-height: 1.5;
font-weight: 500; color: var(--cp-navy);
font-style: normal; margin: 0;
}
.cp-prose .wp-block-quote p { margin: 0; font-size: inherit; }
.cp-prose figure { margin-top: 2em; }
.cp-prose figure img, .cp-prose .wp-block-image img {
width: 100%; border-radius: 20px;
border: 1px solid var(--cp-border);
}
.cp-prose figcaption {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; color: var(--cp-gray-400);
margin-top: 10px !important; text-align: center; letter-spacing: .02em;
}
.cp-prose code, .cp-prose :not(pre) > code {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: .86em;
background: var(--cp-gray-100);
border: 1px solid var(--cp-border);
border-radius: 6px;
padding: .12em .42em;
color: var(--cp-navy);
}
.cp-prose pre, .cp-prose .wp-block-code, .cp-prose .wp-block-preformatted {
background: var(--cp-navy) !important;
color: #dbe7f0 !important;
border-radius: 14px !important;
padding: 20px 22px !important;
overflow-x: auto;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: .92rem !important; line-height: 1.6;
}
.cp-prose pre code, .cp-prose .wp-block-code code {
background: none !important; border: none !important;
padding: 0 !important; color: inherit !important;
}
/* ---------- Callout (use group with .cp-callout className) ---------- */
.cp-prose .cp-callout {
display: flex; gap: 14px;
background: var(--cp-gray-100);
border: 1px solid var(--cp-border);
border-radius: 20px;
padding: 20px 22px;
}
.cp-prose .cp-callout .cp-callout-ic {
width: 38px; height: 38px; border-radius: 11px; flex: none;
display: flex; align-items: center; justify-content: center;
background: rgba(26,143,209,.12); color: var(--cp-blue);
}
.cp-prose .cp-callout .cp-callout-ic svg { width: 20px; height: 20px; stroke-width: 1.8; }
.cp-prose .cp-callout b {
display: block; font-weight: 600; color: var(--cp-navy); margin-bottom: 3px;
}
.cp-prose .cp-callout p {
margin: 0 !important; font-size: 1rem;
color: var(--cp-gray-500); line-height: 1.55;
}
/* ---------- Sidebar ---------- */
.cp-art-aside {
position: sticky; top: 100px;
display: flex; flex-direction: column; gap: 28px;
}
.cp-aside-card {
border: 1px solid var(--cp-border);
border-radius: 20px; padding: 22px; background: #fff;
}
.cp-aside-label {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; font-weight: 500; letter-spacing: .14em;
text-transform: uppercase; color: var(--cp-gray-400);
margin: 0 0 14px !important;
}
.cp-toc { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; }
.cp-toc a {
display: block; padding: 7px 0 7px 14px;
border-left: 2px solid var(--cp-border);
font-size: 14px; color: var(--cp-gray-500);
transition: .15s; line-height: 1.4; text-decoration: none;
}
.cp-toc a.lvl-3 { padding-left: 26px; font-size: 13px; }
.cp-toc a:hover { color: var(--cp-blue); border-color: var(--cp-blue); }
.cp-toc a.is-active {
color: var(--cp-navy); border-color: var(--cp-blue); font-weight: 600;
}
.cp-toc-empty {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; color: var(--cp-gray-400);
}
.cp-share { display: flex; gap: 9px; }
.cp-share a {
width: 40px; height: 40px; border-radius: 11px;
border: 1px solid var(--cp-border-strong);
display: flex; align-items: center; justify-content: center;
color: var(--cp-gray-700); transition: .15s; text-decoration: none;
}
.cp-share a:hover { border-color: var(--cp-blue); color: var(--cp-blue); background: rgba(26,143,209,.06); }
.cp-share a svg { width: 18px; height: 18px; }
/* ---------- Tag row ---------- */
.cp-tag-row {
display: flex !important; gap: 9px; flex-wrap: wrap;
max-width: 720px; margin: 36px auto 0 !important;
}
.cp-tag-row .wp-block-post-terms { display: contents; }
.cp-tag-row .wp-block-post-terms a, .cp-tag {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; color: var(--cp-gray-700);
background: var(--cp-gray-100);
border: 1px solid var(--cp-border);
padding: 7px 13px; border-radius: 999px;
text-decoration: none;
}
.cp-tag-row .wp-block-post-terms a::before, .cp-tag::before {
content: "#"; color: var(--cp-gray-400); margin-right: 2px;
}
.cp-tag-row .wp-block-post-terms .wp-block-post-terms__separator { display: none; }
/* ---------- Author bio ---------- */
.cp-author-bio {
display: flex !important; gap: 18px; align-items: center;
background: var(--cp-gray-50);
border: 1px solid var(--cp-border);
border-radius: 28px;
padding: 26px 30px;
max-width: 720px; margin: 48px auto 0 !important;
}
.cp-author-bio .wp-block-post-author__avatar img,
.cp-author-bio .wp-block-avatar img {
width: 64px; height: 64px; border-radius: 50%; display: block;
}
.cp-author-bio .wp-block-post-author__avatar,
.cp-author-bio .wp-block-avatar { flex: none; }
.cp-author-bio .wp-block-post-author__content,
.cp-author-bio .cp-author-bio-text { flex: 1; }
.cp-author-bio .wp-block-post-author__name,
.cp-author-bio h4 {
font-size: 1.05rem !important; font-weight: 600 !important;
margin: 0 !important; color: var(--cp-navy);
}
.cp-author-bio .cp-author-role, .cp-author-bio .role {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11.5px; letter-spacing: .06em;
color: var(--cp-blue-600); text-transform: uppercase;
margin: 3px 0 0 !important;
}
.cp-author-bio .wp-block-post-author__bio,
.cp-author-bio p {
font-size: .96rem !important; line-height: 1.55;
color: var(--cp-gray-500); margin: 8px 0 0 !important;
}
/* ---------- Section heading for Related ---------- */
.cp-sec-title {
display: flex !important; align-items: baseline;
justify-content: space-between; gap: 20px;
margin-bottom: 30px !important; flex-wrap: wrap;
}
.cp-sec-title h2, .cp-sec-title .wp-block-heading {
font-family: 'Geist', system-ui, sans-serif;
font-weight: 700 !important; font-size: 1.9rem !important;
letter-spacing: -.02em; margin: 0 !important;
}
.cp-sec-title a {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--cp-blue);
display: inline-flex; align-items: center; gap: 7px;
text-decoration: none;
}
.cp-sec-title a:hover { color: var(--cp-blue-600); }
.cp-sec-title a::after {
content: ""; width: 8px; height: 8px;
border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
transform: rotate(45deg);
}
/* ---------- Article responsive ---------- */
@media (max-width: 980px) {
.cp-art-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
.cp-art-aside { position: static; flex-direction: row; flex-wrap: wrap; gap: 18px; }
.cp-art-aside .cp-aside-card { flex: 1; min-width: 200px; }
}
/* ============================================================
wp-admin style top navbar (front-end, always-on partner view)
Authentic WP admin-bar chrome with CloudPress blue accents.
============================================================ */
:root { --cp-abh: 38px; }
body { padding-top: var(--cp-abh); }
.wp-adminbar {
position: fixed; top: 0; left: 0; right: 0; height: var(--cp-abh);
z-index: 120; display: flex; align-items: center;
background: #1d2327; color: #c3c4c7;
border-bottom: 1px solid rgba(0,0,0,.4);
font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif;
font-size: 13px;
box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.wp-adminbar * { box-sizing: border-box; }
.wp-adminbar .abi {
display: inline-flex; align-items: center; gap: 7px;
height: var(--cp-abh); padding: 0 12px;
color: #c3c4c7; text-decoration: none;
border: 0; background: transparent; cursor: pointer;
font: inherit; white-space: nowrap;
transition: background .12s, color .12s;
}
.wp-adminbar .abi:hover,
.wp-adminbar .abi:focus-visible { background: #2c3338; color: var(--cp-sky); outline: none; }
.wp-adminbar .abi:focus-visible { outline: 2px solid var(--cp-sky); outline-offset: -2px; }
.wp-adminbar .abi svg { width: 16px; height: 16px; color: #a7aaad; flex: none; }
.wp-adminbar .abi:hover svg,
.wp-adminbar .abi:focus-visible svg { color: var(--cp-sky); }
.wp-adminbar .abi.brand { padding-left: 15px; padding-right: 11px; }
.wp-adminbar .abi.brand img { height: 18px; width: auto; display: block; }
.wp-adminbar .sep { width: 1px; height: var(--cp-abh); background: rgba(255,255,255,.07); flex: none; }
.wp-adminbar .sp { flex: 1; }
.wp-adminbar .ab-bell { position: relative; }
.wp-adminbar .badge {
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; background: var(--cp-blue); color: #fff;
font-size: 11px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.wp-adminbar .ab-howdy .avatar {
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, #1A8FD1, #38BDF8);
color: #fff; font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 860px) {
/* Icon-only mode for nav links: hide text labels but keep SVG icons. */
/* SVGs have explicit width/height so font-size:0 doesn't shrink them. */
.wp-adminbar .abi.hide-sm { font-size: 0; gap: 0; padding: 0 10px; }
}
/* Push the sticky brand header down below the admin bar */
.cp-header { top: var(--cp-abh); }
/* Bell dropdown */
.wp-adminbar .ab-bell { display: inline-flex; align-items: stretch; }
.wp-adminbar .ab-dropdown {
position: fixed; top: var(--cp-abh); right: 0;
width: 320px; max-width: calc(100vw - 16px);
background: #fff; border: 1px solid var(--cp-border, #D0E4F4);
border-radius: 0 0 12px 12px;
box-shadow: 0 20px 40px rgba(14,26,39,.18);
z-index: 119; overflow: hidden;
}
.wp-adminbar .ab-dropdown[hidden] { display: none; }
.wp-adminbar .ab-dropdown .dd-h {
padding: 11px 16px; border-bottom: 1px solid var(--cp-border, #D0E4F4);
font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
color: var(--cp-gray-500, #5b6b7a);
}
.wp-adminbar .ab-dropdown .post-item {
display: flex; flex-direction: column; gap: 4px;
padding: 12px 16px; border-bottom: 1px solid var(--cp-border, #D0E4F4);
text-decoration: none; color: var(--cp-navy, #0E1A27); transition: background .12s;
}
.wp-adminbar .ab-dropdown .post-item:last-child { border-bottom: 0; }
.wp-adminbar .ab-dropdown .post-item:hover { background: var(--cp-gray-50, #f6f9fc); }
.wp-adminbar .ab-dropdown .post-item:focus-visible { outline: 2px solid var(--cp-blue, #1A8FD1); outline-offset: -2px; }
.wp-adminbar .ab-dropdown .post-item .pt { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--cp-navy, #0E1A27); }
.wp-adminbar .ab-dropdown .post-item .pm { font-size: 12px; color: var(--cp-gray-500, #5b6b7a); font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); }
.wp-adminbar .ab-dropdown .dd-foot { padding: 10px 16px; text-align: center; font-size: 13px; }
.wp-adminbar .ab-dropdown .dd-foot a { color: var(--cp-blue, #1A8FD1); font-weight: 600; text-decoration: none; }
.wp-adminbar .ab-dropdown .dd-foot a:hover { color: var(--cp-blue-600, #1577ad); }
/* Mobile hamburger + flyout */
.wp-adminbar .ab-burger { display: none; }
.ab-mobile-menu { display: none; }
@media (max-width: 560px) {
.wp-adminbar .ab-howdy .hide-sm { display: none; }
.wp-adminbar .abi.hide-sm { display: none; }
.wp-adminbar .ab-burger {
display: inline-flex; align-items: center; height: var(--cp-abh);
padding: 0 14px; cursor: pointer; border: 0; background: transparent;
color: #c3c4c7; gap: 6px;
}
.wp-adminbar .ab-burger:hover,
.wp-adminbar .ab-burger:focus-visible { background: #2c3338; color: var(--cp-sky); outline: none; }
.wp-adminbar .ab-burger:focus-visible { outline: 2px solid var(--cp-sky); outline-offset: -2px; }
.wp-adminbar .ab-burger svg { width: 18px; height: 18px; }
.ab-mobile-menu:not([hidden]) {
display: block; position: fixed;
top: var(--cp-abh); left: 0; right: 0; z-index: 119;
background: #1d2327; border-bottom: 1px solid rgba(0,0,0,.4);
box-shadow: 0 8px 20px rgba(0,0,0,.35);
max-height: calc(100vh - var(--cp-abh)); overflow-y: auto;
}
.ab-mobile-menu a, .ab-mobile-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 14px 20px; color: #c3c4c7; text-decoration: none;
border: 0; background: transparent; font-size: 14px;
border-bottom: 1px solid rgba(255,255,255,.06);
cursor: pointer; text-align: left;
}
.ab-mobile-menu a:hover, .ab-mobile-menu button:hover { background: #2c3338; color: #fff; }
.ab-mobile-menu a:focus-visible, .ab-mobile-menu button:focus-visible { outline: 2px solid var(--cp-sky); outline-offset: -2px; }
.ab-mobile-menu svg { width: 16px; height: 16px; color: #a7aaad; flex: none; }
.ab-mobile-menu .mob-sec {
padding: 9px 20px 5px;
font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: #5a6370;
}
.ab-mobile-menu .mob-post .pt { font-size: 13.5px; font-weight: 600; color: #c3c4c7; }
.ab-mobile-menu .mob-post .pm { font-size: 11px; color: #7a8a98; margin-top: 2px; font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace); }
}
body.admin-bar .ab-mobile-menu { display: none !important; }
/* ============================================================
Feature panel — use the real screenshot, drop the tinted-icon
"AI-generated" framing. Image fills the panel.
============================================================ */
.cp-feature-image {
margin: 0;
border-radius: 18px;
background: #fff;
border: 1px solid var(--cp-border);
box-shadow:
0 1px 0 rgba(255,255,255,.6) inset,
0 12px 32px -8px rgba(14,26,39,.14),
0 4px 10px -4px rgba(14,26,39,.08);
overflow: hidden;
position: relative;
}
.cp-feature-image img {
display: block;
width: 100%; height: auto;
border-radius: inherit;
}
.cp-feature.alt .cp-feature-image { background: #fff; }
/* ============================================================
Polish — reduce the "every-section-is-a-poster" AI feel:
tighter type scale, breathing room, calmer eyebrow chip.
============================================================ */
.cp-feature { padding: 72px 0; }
.cp-feature h2 {
font-size: clamp(1.7rem, 2.4vw + .4rem, 2.25rem) !important;
line-height: 1.15;
letter-spacing: -.018em;
font-weight: 700;
}
.cp-feature .cp-feature-grid { gap: 72px; }
.cp-feature-list { margin-top: 22px; gap: 12px; }
.cp-feature-list li { font-size: .98rem; line-height: 1.55; color: var(--cp-gray-700); }
.cp-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
color: var(--cp-gray-500);
margin: 0 0 4px;
}
.cp-eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--cp-orange);
}
@media (max-width: 980px) {
.cp-feature { padding: 56px 0; }
.cp-feature .cp-feature-grid { gap: 36px; }
}
/* ============================================================
Polish pass — eyebrow //, hero label, feature seq+chip,
data-sheet credibility, hero grid removal, logged-in adminbar.
============================================================ */
/* 1. Hero label: typographic rule, no pill, no NEW */
.cp-hero .cp-hero-label {
display: flex; align-items: center; justify-content: center; gap: 14px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
font-weight: 500;
color: rgba(255,255,255,.62);
max-width: 520px; margin: 0 auto;
}
.cp-hero .cp-hero-label-rule {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}
.cp-hero .cp-hero-label-rule:first-child {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.20));
}
.cp-hero .cp-hero-label-rule:last-child {
background: linear-gradient(90deg, rgba(255,255,255,.20), transparent);
}
.cp-hero .cp-hero-label-txt { white-space: nowrap; }
.cp-hero-badge { display: none !important; } /* old pill, defensive */
/* 2. Eyebrow: "//" instead of dot */
.cp-eyebrow::before {
content: "//" !important;
width: auto !important; height: auto !important;
border-radius: 0 !important; background: transparent !important;
opacity: 1 !important;
color: var(--cp-blue);
font-weight: 700; letter-spacing: 0;
}
.cp-eyebrow.on-dark::before { color: #7FD0F5; }
.cp-eyebrow .dot { display: none; }
/* 3. Feature panels: faint sequence number + bottom-left chip */
.cp-main { counter-reset: cpfeature; }
.cp-feature { counter-increment: cpfeature; }
.cp-feature .cp-feature-image {
position: relative;
}
.cp-feature .cp-feature-image::before {
content: counter(cpfeature, decimal-leading-zero);
position: absolute; top: 14px; left: 18px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 56px; font-weight: 600; line-height: 1;
color: rgba(14,26,39,.06);
letter-spacing: -.02em;
pointer-events: none; z-index: 2;
}
.cp-feature-chip {
position: absolute;
left: 18px; bottom: 16px;
display: inline-flex; align-items: center;
padding: 6px 11px; border-radius: 999px;
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
background: rgba(255,255,255,.92);
border: 1px solid var(--cp-border);
color: var(--cp-gray-700);
backdrop-filter: blur(4px);
z-index: 3;
}
.wp-block-column { position: relative; }
.wp-block-column:has(> .cp-feature-image) { position: relative; }
.wp-block-column > .cp-feature-chip { /* chip lives in the same column as the image */ }
/* 4. Credibility: hairline data-sheet, no cards */
.cp-cred-stats {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--cp-border);
border-left: 1px solid var(--cp-border);
background: transparent;
}
.cp-cred-stat {
background: transparent !important;
border: 0 !important;
border-right: 1px solid var(--cp-border) !important;
border-bottom: 1px solid var(--cp-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 26px 22px !important;
}
.cp-cred-stat .n {
font-size: 2.1rem;
font-weight: 500;
color: var(--cp-navy);
}
.cp-cred-stat .l {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--cp-gray-500);
margin-top: 8px;
}
/* 5. Hero grid texture — gone, glints alone */
.cp-hero::before { display: none !important; }
/* 6. Logged-in: hide our fake adminbar under WP's real one */
body.admin-bar .wp-adminbar { display: none !important; }
body.admin-bar { padding-top: 0 !important; }
body.admin-bar .cp-header { top: 0 !important; }
html.wp-toolbar body .cp-header { top: 0 !important; }
/* ============================================================
404 Not-Found page
============================================================ */
.nf-stage {
background:
radial-gradient(680px 380px at 84% -10%, rgba(56,189,248,.18), transparent 60%),
radial-gradient(560px 340px at -2% 120%, rgba(26,143,209,.16), transparent 60%),
var(--cp-navy);
color: #fff;
min-height: calc(100vh - 74px);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.nf-ghost {
position: absolute;
font-family: var(--cp-font-mono);
font-size: clamp(14rem, 38vw, 32rem);
font-weight: 800;
color: #fff;
opacity: .025;
line-height: 1;
letter-spacing: -.05em;
pointer-events: none;
user-select: none;
left: 50%;
top: 50%;
transform: translate(-50%, -52%);
white-space: nowrap;
}
.nf-inner {
position: relative;
text-align: center;
max-width: 580px;
margin: 0 auto;
padding: 110px 0 120px;
}
.nf-code {
font-family: var(--cp-font-mono);
font-size: clamp(4.5rem, 13vw, 9rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.05em;
color: var(--cp-sky);
display: block;
margin-bottom: 4px;
}
.nf-title {
font-family: var(--cp-font-sans);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.03em;
color: #fff;
margin: 0;
}
.nf-desc {
font-size: 1.08rem;
line-height: 1.6;
color: rgba(255,255,255,.6);
margin: 18px auto 0;
max-width: 420px;
}
.nf-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 38px;
}
.nf-divider {
width: 40px;
height: 1px;
background: rgba(255,255,255,.18);
margin: 32px auto;
}
.nf-links {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
}
.nf-link {
font-family: var(--cp-font-sans);
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,.55);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color .15s;
}
.nf-link:hover { color: var(--cp-sky); }
/* ============================================================
Contact page
============================================================ */
/* Hero */
.contact-hero {
background:
radial-gradient(600px 320px at 96% -8%, rgba(56,189,248,.10), transparent 60%),
var(--wp--preset--color--gray-50, #f6f9fc);
border-bottom: 1px solid var(--cp-border, #D0E4F4);
padding: 80px 28px 72px;
}
.contact-hero-inner {
max-width: 640px;
}
.contact-eyebrow {
font-family: var(--wp--preset--font-family--mono, 'Geist Mono', monospace);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--wp--preset--color--blue, #1A8FD1);
margin-bottom: 18px;
}
/* Body layout */
.contact-body {
padding: 72px 28px 96px;
}
.contact-grid {
gap: 64px !important;
align-items: start !important;
}
.contact-grid > .wp-block-column:first-child {
flex-basis: 0 !important;
flex-grow: 1 !important;
}
.contact-grid > .wp-block-column.contact-sidebar {
flex-basis: 380px !important;
flex-grow: 0 !important;
}
/* Sidebar cards */
.cside-card {
background: #fff;
border: 1px solid var(--cp-border, #D0E4F4);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(14,26,39,.07);
padding: 28px;
margin-bottom: 16px;
}
.cside-card:last-child { margin-bottom: 0; }
.cside-label {
font-family: var(--wp--preset--font-family--mono, 'Geist Mono', monospace);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--wp--preset--color--gray-500, #5b6b7a);
margin-bottom: 18px;
}
.cside-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 0;
border-bottom: 1px solid var(--cp-border, #D0E4F4);
text-decoration: none;
transition: color .15s;
}
.cside-item:last-child { border-bottom: none; padding-bottom: 0; }
.cside-item:first-of-type { padding-top: 0; }
.cside-icon {
width: 36px !important;
min-width: 36px;
height: 36px;
border-radius: 10px;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: none;
}
.cside-icon-blue { background: rgba(26,143,209,.10); }
.cside-icon-green { background: rgba(43,173,118,.10); }
.cside-icon-purple { background: rgba(167,139,250,.10); }
.cside-item-body {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.cside-item-title {
font-size: 14px;
font-weight: 600;
color: var(--wp--preset--color--ink, #0E1A27);
}
.cside-item-title a {
color: inherit;
text-decoration: none;
}
.cside-item-title a:hover { color: var(--wp--preset--color--blue, #1A8FD1); }
.cside-item-sub {
font-family: var(--wp--preset--font-family--mono, 'Geist Mono', monospace);
font-size: 11px;
color: var(--wp--preset--color--gray-400, #8AAEC8);
}
/* Dark infra card */
.cside-card-dark {
background: var(--wp--preset--color--navy, #0E1A27) !important;
border-color: rgba(255,255,255,.08) !important;
color: #fff;
background-image:
radial-gradient(380px 220px at 110% -20%, rgba(56,189,248,.18), transparent 60%),
radial-gradient(280px 180px at -10% 110%, rgba(245,132,31,.12), transparent 60%) !important;
}
.cside-card-dark .cside-label { color: rgba(255,255,255,.5); }
.cside-dc-chips {
display: flex !important;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.dc-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid;
font-size: 13px;
font-family: var(--wp--preset--font-family--mono, 'Geist Mono', monospace);
letter-spacing: .04em;
}
.cside-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
margin-top: 20px;
}
.cside-stat {
padding: 14px 0;
border-right: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.cside-stat:nth-child(2n) { border-right: none; padding-left: 18px; }
.cside-stat:nth-child(n+3) { border-bottom: none; }
.cside-stat .n {
font-family: var(--wp--preset--font-family--mono, 'Geist Mono', monospace);
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -.04em;
color: #fff;
line-height: 1;
}
.cside-stat .l {
font-size: 12px;
color: rgba(255,255,255,.5);
margin-top: 5px;
}
/* Forminator overrides — match the design system */
.forminator-ui .forminator-label,
.forminator-ui label {
font-family: var(--wp--preset--font-family--mono, 'Geist Mono', monospace) !important;
font-size: 11px !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
color: var(--wp--preset--color--gray-500, #5b6b7a) !important;
font-weight: 500 !important;
margin-bottom: 7px !important;
}
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui input[type=text],
.forminator-ui input[type=email],
.forminator-ui textarea {
font-family: var(--wp--preset--font-family--sans, 'Geist', sans-serif) !important;
font-size: 15px !important;
color: var(--wp--preset--color--ink, #0E1A27) !important;
background: #fff !important;
border: 1px solid var(--cp-border, #D0E4F4) !important;
border-radius: 10px !important;
padding: 13px 16px !important;
box-shadow: 0 1px 2px rgba(14,26,39,.06) !important;
transition: border-color .15s, box-shadow .15s !important;
outline: none !important;
width: 100% !important;
-webkit-appearance: none !important;
}
.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui input[type=text]:focus,
.forminator-ui input[type=email]:focus,
.forminator-ui textarea:focus {
border-color: var(--wp--preset--color--blue, #1A8FD1) !important;
box-shadow: 0 0 0 3px rgba(26,143,209,.22), 0 1px 2px rgba(14,26,39,.06) !important;
}
.forminator-ui .forminator-textarea,
.forminator-ui textarea {
min-height: 148px !important;
line-height: 1.55 !important;
resize: vertical !important;
}
.forminator-ui .forminator-btn,
.forminator-ui button[type=submit] {
background: var(--wp--preset--color--orange, #F5841F) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: 15px 28px !important;
font-size: 16px !important;
font-weight: 600 !important;
font-family: var(--wp--preset--font-family--sans, 'Geist', sans-serif) !important;
box-shadow: 0 8px 20px rgba(245,132,31,.30) !important;
cursor: pointer !important;
transition: background .15s, transform .15s !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 28px !important;
}
.forminator-ui .forminator-btn:hover,
.forminator-ui button[type=submit]:hover {
background: var(--wp--preset--color--orange-600, #db6f10) !important;
transform: translateY(-1px) !important;
}
.forminator-ui .forminator-response-output {
border-radius: 14px !important;
padding: 20px 24px !important;
}
.forminator-ui .forminator-success {
background: rgba(43,173,118,.08) !important;
border-color: rgba(43,173,118,.3) !important;
color: var(--wp--preset--color--ink, #0E1A27) !important;
}
.forminator-ui .forminator-row {
margin-bottom: 18px !important;
}
/* Responsive */
@media (max-width: 900px) {
.contact-grid { flex-direction: column !important; }
.contact-grid > .wp-block-column.contact-sidebar {
flex-basis: auto !important;
width: 100% !important;
}
}
@media (max-width: 560px) {
.contact-hero { padding: 56px 0 48px; }
.contact-body { padding: 48px 0 64px; }
}
/* ============ 2×3 feature card grid (per design) ============ */
.cp-fsecwrap { padding: 96px 0; border-bottom: 1px solid var(--cp-border); background: #fff; color: var(--cp-navy); }
.cp-fsecwrap .cp-fsec-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.cp-fgrid-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cp-fcell {
display: flex; flex-direction: column; background: #fff;
border: 1px solid var(--cp-border); border-radius: 20px;
overflow: hidden; box-shadow: 0 1px 2px rgba(14,26,39,.06);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cp-fcell:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(14,26,39,.10); border-color: var(--cp-border-strong); }
.cp-fcell-visual {
height: 240px; display: flex; align-items: center; justify-content: center;
overflow: hidden; border-bottom: 1px solid var(--cp-border);
background: radial-gradient(120% 120% at 30% 0, #fff, var(--cp-gray-100));
}
.cp-fcell-copy { flex: 1; display: flex; flex-direction: column; padding: 30px 32px 32px; }
.cp-fcell-copy .cp-eyebrow { font-size: 12px; }
.cp-fcell-title { margin: 11px 0 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; color: var(--cp-navy); }
.cp-fcell .cp-feature-list { margin-top: 20px; }
.cp-fcell .wp-block-buttons { margin-top: 24px; }
/* viz container */
.cp-viz { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 22px 26px; box-sizing: border-box; }
/* portal (white-label) */
.cp-viz-portal { align-items: center; }
.cp-viz-win { width: 100%; max-width: 330px; border: 1px solid var(--cp-border); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(14,26,39,.06); overflow: hidden; }
.cp-viz-bar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-bottom: 1px solid var(--cp-border); background: var(--cp-gray-50); }
.cp-viz-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--cp-gray-300); display: inline-block; }
.cp-viz-url { margin-left: 8px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: var(--cp-gray-500); }
.cp-viz-winbody { padding: 17px; }
.cp-viz-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: .96rem; color: var(--cp-navy); margin-bottom: 15px; }
.cp-viz-mark { width: 20px; height: 20px; border-radius: 7px; display: inline-block; }
.cp-viz-rows { display: flex; flex-direction: column; gap: 10px; }
.cp-viz-row { display: flex; align-items: center; gap: 10px; font-size: .87rem; color: var(--cp-gray-500); }
.cp-viz-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
/* dns */
.cp-viz-dns { gap: 10px; padding: 26px 32px; }
.cp-viz-rec { display: flex; align-items: center; gap: 12px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; background: #fff; border: 1px solid var(--cp-border); border-radius: 9px; padding: 9px 13px; box-shadow: 0 1px 2px rgba(14,26,39,.04); }
.cp-viz-rt { font-size: 10px; font-weight: 600; letter-spacing: .05em; border: 1px solid; border-radius: 5px; padding: 2px 7px; }
.cp-viz-name { color: var(--cp-navy); min-width: 34px; }
.cp-viz-val { color: var(--cp-gray-500); margin-left: auto; white-space: nowrap; }
/* stats (cdn) */
.cp-viz-stats { justify-content: center; gap: 18px; padding: 26px 32px; }
.cp-viz-statrow { display: flex; gap: 40px; }
.cp-viz-stat { display: flex; flex-direction: column; }
.cp-viz-big { font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; line-height: 1; }
.cp-viz-lbl { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-gray-500); margin-top: 7px; }
.cp-viz-bars { display: flex; align-items: flex-end; gap: 7px; height: 56px; width: 100%; }
.cp-viz-bars span { flex: 1; border-radius: 4px 4px 0 0; opacity: .85; min-height: 6px; display: inline-block; }
/* containers */
.cp-viz-cont { align-items: center; gap: 12px; }
.cp-viz-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; width: 100%; max-width: 186px; }
.cp-viz-box { aspect-ratio: 1; border: 1px solid var(--cp-border); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--cp-gray-400); box-shadow: 0 1px 2px rgba(14,26,39,.04); }
.cp-viz-box svg { width: 18px; height: 18px; stroke-width: 1.6; fill: none; }
.cp-viz-box.on { border-width: 2px; box-shadow: 0 8px 24px rgba(14,26,39,.10); }
.cp-viz-cap { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-gray-500); }
/* ai terminal */
.cp-viz-ai { align-items: center; }
.cp-viz-term { width: 100%; max-width: 330px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #0e1b29; padding: 17px; box-shadow: 0 16px 40px rgba(14,26,39,.22); display: flex; flex-direction: column; gap: 11px; }
.cp-viz-tline { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.4; }
.cp-viz-prompt { color: #7FD0F5; margin-right: 6px; }
.cp-viz-tool { display: flex; align-items: center; gap: 9px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 9px 11px; background: rgba(255,255,255,.03); }
.cp-viz-tool svg { width: 13px; height: 13px; stroke-width: 2; fill: none; }
.cp-viz-ok { margin-left: auto; color: var(--cp-green); display: flex; }
.cp-viz-ok svg { width: 14px; height: 14px; }
/* perf cache stack */
.cp-viz-perf { align-items: center; }
.cp-viz-stack { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 11px; }
.cp-viz-layer { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--cp-border); border-radius: 11px; background: #fff; padding: 14px 16px; font-weight: 600; font-size: .92rem; color: var(--cp-navy); box-shadow: 0 1px 2px rgba(14,26,39,.04); }
.cp-viz-layer svg { width: 18px; height: 18px; stroke-width: 2; fill: none; }
@media (max-width: 980px) {
.cp-fgrid-feat { grid-template-columns: 1fr; gap: 24px; }
.cp-fcell-visual { height: 220px; }
.cp-fcell-copy { padding: 26px 26px 28px; }
}
/* ============================================================
2026-06-09 — feedback-driven fixes (mobile-first patches)
1. Ensure light-page H1s have explicit navy color.
2. Fix .cside-item icon vertical alignment.
3. Equalize 2x2 sidebar stats so columns line up.
4. Footer columns stack cleanly on mobile/tablet.
5. Contact hero/body mobile-first padding.
============================================================ */
/* 1. H1 color on light pages (post-title + cp-h1 fallbacks) */
.wp-block-post-title,
.cp-h1,
.cp-contact-main h1,
.cp-contact-main h2 { color: var(--cp-navy); }
.cp-h1 {
font-family: var(--wp--preset--font-family--sans);
font-weight: 800;
font-size: clamp(2.2rem, 6vw, 3.4rem);
line-height: 1.05;
letter-spacing: -.03em;
margin: 0;
}
.cp-lead { color: var(--cp-gray-500); }
/* 2. Reach-us-directly: icon + text inline, vertically centered */
.cside-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
flex-wrap: nowrap !important;
}
.cside-icon {
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
.cside-item-body { flex: 1 1 auto !important; min-width: 0; }
/* 3. Equalize sidebar stats so column 1 and column 2 align */
.cside-stats {
gap: 0 !important;
margin-top: 18px;
}
.cside-stat {
padding: 16px 18px !important;
border-right: 1px solid rgba(255,255,255,.10);
border-bottom: 1px solid rgba(255,255,255,.10);
}
.cside-stat:nth-child(2n) { border-right: none; padding-right: 0 !important; }
.cside-stat:nth-child(2n+1) { padding-left: 0 !important; }
.cside-stat:nth-child(n+3) { border-bottom: none; padding-bottom: 0 !important; }
/* Match dark card sizing/padding to the light cards above it */
.contact-sidebar .cside-card,
.contact-sidebar .cside-card-dark { width: 100%; box-sizing: border-box; }
/* 4. Footer: stack columns at ≤860px so they don't squeeze awkwardly */
@media (max-width: 860px) {
.cp-footer .wp-block-columns {
flex-direction: column !important;
gap: 36px !important;
}
.cp-footer .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
.cp-footer-base {
flex-direction: column !important;
gap: 12px;
text-align: center;
}
}
/* 5. Contact page mobile-first padding */
@media (max-width: 640px) {
.contact-hero { padding: 56px 28px 40px !important; }
.contact-hero-inner { max-width: 100% !important; }
.contact-hero .cp-h1 { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
.contact-body { padding: 40px 28px 64px !important; }
.contact-grid { gap: 32px !important; }
.cside-card,
.cside-card-dark { padding: 22px !important; }
.contact-sidebar { flex-basis: 100% !important; width: 100% !important; }
}
/* MCP demo section: white surface with dark text (per design) */
section.cp-mcp.wp-block-cloudpress-mcp-demo {
background: #fff !important;
color: var(--cp-navy) !important;
}
section.cp-mcp.wp-block-cloudpress-mcp-demo .cp-mcp-head h2 { color: var(--cp-navy) !important; }
section.cp-mcp.wp-block-cloudpress-mcp-demo .cp-mcp-head p { color: var(--cp-fg-muted, rgba(14,26,39,.7)) !important; }