/* * CADchat — pattern styles (extras) * * Continuation of patterns.css for the 10 patterns added after the initial * batch: page-hero, uc-section, stat-strip, six-questions, old-vs-new, * demo-booking, pillar, numbered-steps, feature-cards, security-strip. * * Kept separate from patterns.css for maintainability — both files are * enqueued by inc/enqueue.php (patterns-extra registered alongside patterns). */ /* === Pattern: Page hero (generic) === */ .cc-page-hero { padding-block: clamp(3.5rem, 7vw, 5.5rem); } .cc-page-hero__h { max-width: 820px; margin-inline: auto; margin-bottom: var(--cc-space-5); } /* * Purple accent span for the second line of a page hero h1 (e.g. /why-cadchat/ * "And it didn't work." / /use-cases/ "decisions happen." / /features/ * "Together." / /for-engineering-leaders/ "Ship dates slip."). Matches * the prototype's brand-purple color emphasis on the second clause. */ .cc-page-hero__h-accent { color: var(--cc-color-brand-primary, var(--cc-color-brand-primary)); } .cc-page-hero__lead { max-width: 680px; margin-inline: auto; font-size: clamp(1.0625rem, 1.2vw, 1.25rem); color: var(--cc-color-text-muted); } .cc-page-hero__lead strong { color: var(--cc-color-text-heading, #1A1A2E); font-weight: 700; } /* === Pattern: Use case section === */ .cc-uc-section { scroll-margin-top: 96px; } .cc-uc-section__head { max-width: 720px; margin: 0 auto var(--cc-space-10); text-align: center; } .cc-uc-section__h { margin-bottom: var(--cc-space-4); } .cc-uc-section__lead { font-size: clamp(1rem, 1.1vw, 1.125rem); color: var(--cc-color-text-muted); } .cc-uc-section__grid { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-10); align-items: start; } @media (min-width: 900px) { .cc-uc-section__grid { grid-template-columns: 1.1fr 1fr; gap: var(--cc-space-12); } } .cc-uc-section__mockup-frame { background: var(--cc-color-bg-section-alt); border: 1px solid var(--cc-color-border-subtle); border-radius: var(--cc-radius-lg); padding: var(--cc-space-4); overflow: hidden; } .cc-uc-section__mockup-frame img { border-radius: var(--cc-radius-md); } /* Use-case highlights — proto FeatureHighlights component (line 1997). * Layout: flex column gap 18px, marginTop 8. * Each highlight: flex row gap 14, alignItems flex-start. * LEFT: 38×38 rounded box (radius 10), bg {color}14 (8% alpha), border 1px {color}28 (16% alpha), icon centered. * RIGHT: stack of title (14px / fw 700 / #18181B / mb 3) + desc (13px / #71717A / lh 1.6). * Per-section accent COLOR overrides via section anchor + nth-child rules below. */ /* New structure: cc-uc-section__highlights as flex container of cc-uc-section__highlight rows */ .cc-section .cc-uc-section__highlights { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 8px 0 32px !important; padding: 0 !important; } /* Each highlight = flex row with icon-box at left + text-stack at right */ .cc-section .cc-uc-section__highlight { display: flex !important; flex-direction: row !important; gap: 14px !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; position: relative !important; } /* Icon box (::before pseudo on the highlight group) */ .cc-section .cc-uc-section__highlight::before { content: '' !important; display: block !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.16); background-image: url("../img/icons/cc-css-01-cc-section--cc-uc-section--highlight--b.png"); background-position: center; background-repeat: no-repeat; background-size: 18px 18px; flex-shrink: 0 !important; } /* Title + desc paragraphs */ .cc-section .cc-uc-section__highlight-title { font-size: 14px !important; font-weight: 700 !important; color: #18181B !important; line-height: 1.4 !important; margin: 0 0 3px !important; } .cc-section .cc-uc-section__highlight-desc { font-size: 13px !important; color: #71717A !important; line-height: 1.6 !important; margin: 0 !important; } /* Wrap title+desc so they stack vertically in the right column */ .cc-section .cc-uc-section__highlight > .cc-uc-section__highlight-title, .cc-section .cc-uc-section__highlight > .cc-uc-section__highlight-desc { flex: 0 0 auto; } /* Per-section accent color on icon box (bg + border) */ #design-reviews .cc-uc-section__highlight::before { background-color: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.16); } #drawing-reviews .cc-uc-section__highlight::before { background-color: rgba(0,114,186,0.08); border-color: rgba(0,114,186,0.16); } #supplier-collaboration .cc-uc-section__highlight::before { background-color: rgba(87,43,122,0.08); border-color: rgba(87,43,122,0.16); } #manufacturing-handoff .cc-uc-section__highlight::before { background-color: rgba(230,81,0,0.08); border-color: rgba(230,81,0,0.16); } #cross-functional-teams .cc-uc-section__highlight::before { background-color: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.16); } #field-service .cc-uc-section__highlight::before { background-color: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.16); } #education .cc-uc-section__highlight::before { background-color: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.16); } /* Per-section per-nth-child icon SVGs (21 unique icons from proto FeatureHighlights items) */ /* design-reviews — purple var(--cc-color-brand-primary): navigation arrow / search / pin */ #design-reviews .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-02-design-reviews--cc-uc-section--highligh.png"); } #design-reviews .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-03-design-reviews--cc-uc-section--highligh.png"); } #design-reviews .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-04-design-reviews--cc-uc-section--highligh.png"); } /* drawing-reviews — blue var(--cc-color-action): file / pen / split */ #drawing-reviews .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-05-drawing-reviews--cc-uc-section--highlig.png"); } #drawing-reviews .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-06-drawing-reviews--cc-uc-section--highlig.png"); } #drawing-reviews .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-07-drawing-reviews--cc-uc-section--highlig.png"); } /* supplier-collaboration — deep-purple var(--cc-color-brand-primary-deep): user-plus / lock / pin */ #supplier-collaboration .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-08-supplier-collaboration--cc-uc-section.png"); } #supplier-collaboration .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-09-supplier-collaboration--cc-uc-section.png"); } #supplier-collaboration .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-10-supplier-collaboration--cc-uc-section.png"); } /* manufacturing-handoff — orange #E65100: clock / pen / file */ #manufacturing-handoff .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-11-manufacturing-handoff--cc-uc-section--h.png"); } #manufacturing-handoff .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-12-manufacturing-handoff--cc-uc-section--h.png"); } #manufacturing-handoff .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-13-manufacturing-handoff--cc-uc-section--h.png"); } /* cross-functional-teams — cyan #0891B2: monitor / video / camera */ #cross-functional-teams .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-14-cross-functional-teams--cc-uc-section.png"); } #cross-functional-teams .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-15-cross-functional-teams--cc-uc-section.png"); } #cross-functional-teams .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-16-cross-functional-teams--cc-uc-section.png"); } /* field-service — purple var(--cc-color-brand-primary): phone / pin / mail */ #field-service .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-17-field-service--cc-uc-section--highlight.png"); } #field-service .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-18-field-service--cc-uc-section--highlight.png"); } #field-service .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-19-field-service--cc-uc-section--highlight.png"); } /* education — blue #2563EB: book / users / message */ #education .cc-uc-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-20-education--cc-uc-section--highlight-nth.png"); } #education .cc-uc-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-21-education--cc-uc-section--highlight-nth.png"); } #education .cc-uc-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-22-education--cc-uc-section--highlight-nth.png"); } /* Per-section accent color for highlight check icons (matches eyebrow) */ #design-reviews ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-23-design-reviews-ul-cc-uc-section--highli.png") !important; } #drawing-reviews ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-24-drawing-reviews-ul-cc-uc-section--highl.png") !important; } #supplier-collaboration ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-25-supplier-collaboration-ul-cc-uc-section.png") !important; } #manufacturing-handoff ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-26-manufacturing-handoff-ul-cc-uc-section.png") !important; } #cross-functional-teams ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-27-cross-functional-teams-ul-cc-uc-section.png") !important; } #field-service ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-28-field-service-ul-cc-uc-section--highlig.png") !important; } #education ul.cc-uc-section__highlights li::before { background-image: url("../img/icons/cc-css-29-education-ul-cc-uc-section--highlights.png") !important; } /* Highlight title (strong) — bold, dark; em-dash separator stays inline */ .cc-section ul.cc-uc-section__highlights li strong, .cc-section .cc-uc-section__highlights li strong { color: #0F0F0F !important; font-weight: 700 !important; } .cc-uc-section__h3 { font-size: var(--cc-type-h4); margin-bottom: var(--cc-space-2); } .cc-uc-section__story-block { padding: var(--cc-space-5); background: var(--cc-color-brand-primary-fade); border-radius: var(--cc-radius-md); border-left: 3px solid var(--cc-color-brand-primary); } .cc-uc-section__story-eyebrow { font-size: var(--cc-type-eyebrow); font-weight: var(--cc-fw-semibold); letter-spacing: var(--cc-ls-eyebrow); text-transform: uppercase; color: var(--cc-color-brand-primary); margin: 0 0 var(--cc-space-3); } .cc-uc-section__story-scenario, .cc-uc-section__story-outcome { margin-bottom: var(--cc-space-3); font-size: var(--cc-type-small); line-height: var(--cc-lh-relaxed); } .cc-uc-section__story-outcome { margin-bottom: 0; } /* === Pattern: /features/ page hero (with product mockup) === * * Per prototype features-preview.html: white-bg hero with eyebrow + h1 * (line 2 in brand purple) + lead + 2 CTAs, then a 1280x480 product mockup * butted up against the bottom of the section. Mockup defaults to a * theme-bundled placeholder; replaceable in the WP editor. */ .cc-features-hero { background: #FFFFFF; border-bottom: 1px solid #E4E4E7; padding-block: clamp(56px, 7vw, 100px) 0; overflow: hidden; } .cc-features-hero__copy { padding-inline: 24px; margin-bottom: clamp(40px, 5vw, 64px); } .cc-features-hero__h-accent { color: var(--cc-color-brand-primary, var(--cc-color-brand-primary)); } .cc-features-hero__lead { color: var(--cc-color-text-muted, #71717A); max-width: 540px; margin-inline: auto; } .cc-features-hero__btns { gap: 12px; margin-block: clamp(24px, 3vw, 40px); } /* * Mockup image: full-bleed at desktop, 16/16/0/0 rounded top corners, * subtle border + drop shadow. Bottom rendered without rounding so it * blends into the next section. */ .cc-features-hero__mockup { max-width: 1280px; margin-inline: auto; margin-bottom: 0 !important; padding-inline: 24px; position: relative; } .cc-features-hero__mockup img { display: block; width: 100%; height: auto; border-radius: 16px 16px 0 0; border: 1px solid #E4E4E7; border-bottom: none; box-shadow: 0 -4px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03); } @media (max-width: 768px) { .cc-features-hero__mockup { padding-inline: 0; } .cc-features-hero__mockup img { border-radius: 12px 12px 0 0; } } /* === Pattern: Stat strip — single hero "70%" with gradient === * * Prototype why-cadchat-preview.html: huge gradient "70%" stat with eyebrow * "Get aligned at the design stage" and supporting suffix/subtext copy. Not * a 4-column grid (that was the v1.x version of this pattern). */ .cc-stat-strip__inner { text-align: center; padding-block: clamp(64px, 8vw, 96px); } .cc-stat-strip__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 24px; } .cc-stat-strip__num { font-size: clamp(7rem, 20vw, 14rem); font-weight: 900; line-height: 0.88; letter-spacing: -0.05em; background: linear-gradient(130deg, var(--cc-color-brand-primary) 0%, #D4B5EC 48%, var(--cc-color-action) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin: 0 0 36px; text-align: center; } .cc-stat-strip__suffix { font-size: clamp(1.4rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--cc-color-text-heading, #1A1A2E); line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 20px; } .cc-stat-strip__suffix-em { color: var(--cc-color-brand-primary); font-style: italic; } .cc-stat-strip__subtext { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--cc-color-text-muted, #52525B); line-height: 1.55; max-width: 660px; margin: 0 auto 28px; } /* === Pattern: Six questions === */ .cc-six-q__h { margin-bottom: var(--cc-space-12); } /* Each question is a single

styled as a card with a leading "?" marker. */ .cc-six-q__card { background: var(--cc-color-bg-section); border: 1px solid var(--cc-color-border-subtle); border-radius: var(--cc-radius-md); padding: var(--cc-space-6) var(--cc-space-6) var(--cc-space-6) var(--cc-space-16); margin: 0; font-weight: var(--cc-fw-medium); color: var(--cc-color-text-heading); position: relative; } .cc-six-q__card::before { content: '?'; position: absolute; left: var(--cc-space-5); top: var(--cc-space-5); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--cc-color-brand-primary-tint); color: var(--cc-color-brand-primary); border-radius: var(--cc-radius-pill); font-weight: var(--cc-fw-bold); font-size: var(--cc-type-h5); } /* === Pattern: Old vs new === */ .cc-vs__h { max-width: 720px; margin-inline: auto; margin-bottom: var(--cc-space-12); } .cc-vs__cols { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-6); } @media (min-width: 768px) { .cc-vs__cols { grid-template-columns: 1fr 1fr; } } .cc-vs__col { padding: var(--cc-space-8); border-radius: var(--cc-radius-lg); } .cc-vs__col--old { background: var(--cc-color-bg-section); border: 1px solid var(--cc-color-border-subtle); color: var(--cc-color-text-muted); } .cc-vs__col--old .cc-vs__col-h { color: var(--cc-color-text-muted); } .cc-vs__col--new { background: var(--cc-color-brand-primary-fade); border: 1px solid var(--cc-color-border-purple); } .cc-vs__col-h { font-size: var(--cc-type-h4); margin: 0 0 var(--cc-space-5); } .cc-vs__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cc-space-3); } .cc-vs__col li { padding-left: var(--cc-space-6); position: relative; } .cc-vs__col--old li::before { content: '✕'; position: absolute; left: 0; top: 0; color: var(--cc-color-text-muted); font-weight: var(--cc-fw-bold); } .cc-vs__col--new li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--cc-color-brand-primary); font-weight: var(--cc-fw-bold); } /* === Pattern: Demo / booking === */ .cc-demo__grid { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-10); align-items: start; } @media (min-width: 900px) { .cc-demo__grid { grid-template-columns: 1fr 1.1fr; gap: var(--cc-space-12); } } .cc-demo__h { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: var(--cc-fw-black); letter-spacing: var(--cc-ls-h1); line-height: var(--cc-lh-tight); margin: 0 0 var(--cc-space-4); } .cc-demo__pill { display: inline-flex; align-items: center; gap: var(--cc-space-2); background: var(--cc-color-brand-primary-fade); color: var(--cc-color-brand-primary); padding: var(--cc-space-1) var(--cc-space-4); border-radius: var(--cc-radius-pill); font-weight: var(--cc-fw-semibold); font-size: var(--cc-type-small); margin-bottom: var(--cc-space-6); } .cc-demo__lead { font-size: var(--cc-type-h5); color: var(--cc-color-text-primary); margin-bottom: var(--cc-space-5); } .cc-demo__bullets { list-style: none; padding: 0; margin: 0 0 var(--cc-space-8); display: flex; flex-direction: column; gap: var(--cc-space-3); } .cc-demo__bullets li { padding-left: var(--cc-space-6); position: relative; } .cc-demo__bullets li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 14px; height: 14px; background: url("../img/icons/cc-css-30-cc-demo--bullets-li--before.png") center / contain no-repeat; } .cc-demo__fallback { font-size: var(--cc-type-small); color: var(--cc-color-text-muted); } .cc-demo__calendar { background: var(--cc-color-bg-section); border: 1px solid var(--cc-color-border-subtle); border-radius: var(--cc-radius-lg); padding: var(--cc-space-4); min-height: 600px; } .cc-demo__calendar-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 600px; color: var(--cc-color-text-muted); text-align: center; padding: var(--cc-space-6); background: var(--cc-color-bg-section-alt); border: 2px dashed var(--cc-color-border-subtle); border-radius: var(--cc-radius-md); } /* === Pattern: Pillar === */ .cc-pillar { border-top: 1px solid var(--cc-color-border-medium); } .cc-pillar__grid { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-10); align-items: center; } @media (min-width: 900px) { .cc-pillar__grid { grid-template-columns: 1.2fr 1fr; gap: var(--cc-space-16); } } .cc-pillar--flip .cc-pillar__copy { order: 2; } .cc-pillar__h { font-size: var(--cc-type-h2); margin: var(--cc-space-3) 0 var(--cc-space-5); } .cc-pillar__body { font-size: var(--cc-type-h5); color: var(--cc-color-text-primary); line-height: var(--cc-lh-relaxed); margin-bottom: var(--cc-space-5); } .cc-pillar__takeaway { padding: var(--cc-space-4); background: var(--cc-color-brand-primary-fade); border-radius: var(--cc-radius-md); border-left: 3px solid var(--cc-color-brand-primary); font-size: var(--cc-type-small); margin: 0; } /* cc-pillar__quote was originally the blockquote, but page DB has it as the * RIGHT COLUMN wrapper. Strip column-style bg/padding/radius so the right * column matches proto's plain layout (no card chrome around takeaway/quote/author). */ .cc-pillar__quote { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Force takeaway non-italic — the .cc-pillar__quote font-style:italic at line 2225 * cascades down to the takeaway when takeaway is now inside this column wrapper. * Proto: takeaway is bold but NOT italic. */ .cc-section .cc-pillar__quote .cc-pillar__takeaway, .cc-pillar__quote .cc-pillar__takeaway { font-style: normal !important; } .cc-pillar__quote blockquote { margin: 0; } .cc-pillar__quote-text { font-size: var(--cc-type-h4); font-weight: var(--cc-fw-medium); color: var(--cc-color-text-heading); line-height: var(--cc-lh-snug); margin: 0 0 var(--cc-space-5); } .cc-pillar__quote-author { color: var(--cc-color-text-heading); font-weight: var(--cc-fw-semibold); font-size: var(--cc-type-small); margin: 0; } .cc-pillar__quote-co { color: var(--cc-color-text-muted); font-size: var(--cc-type-small); margin: var(--cc-space-1) 0 0; } /* === Pattern: Numbered steps === */ .cc-steps__h { max-width: 680px; margin-inline: auto; margin-bottom: var(--cc-space-12); } .cc-steps__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cc-space-6); max-width: 720px; margin-inline: auto; } .cc-steps__item { display: flex; gap: var(--cc-space-6); padding: var(--cc-space-6); background: var(--cc-color-bg-section); border: 1px solid var(--cc-color-border-subtle); border-radius: var(--cc-radius-lg); } .cc-steps__num { flex-shrink: 0; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: var(--cc-fw-black); color: var(--cc-color-brand-primary); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .cc-steps__item-h { font-size: var(--cc-type-h5); font-weight: var(--cc-fw-semibold); margin: 0 0 var(--cc-space-2); color: var(--cc-color-text-heading); } .cc-steps__body { margin: 0; color: var(--cc-color-text-muted); font-size: var(--cc-type-small); line-height: var(--cc-lh-relaxed); } /* === Pattern: Feature cards === */ .cc-feat-cards__head { max-width: 720px; margin-inline: auto; margin-bottom: var(--cc-space-12); } .cc-feat-cards__h { margin: var(--cc-space-3) 0 var(--cc-space-4); } .cc-feat-cards__lead { color: var(--cc-color-text-muted); font-size: var(--cc-type-body); line-height: var(--cc-lh-relaxed); margin: 0; } .cc-feat-cards__grid { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-6); } @media (min-width: 600px) { .cc-feat-cards__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cc-feat-cards__grid { grid-template-columns: repeat(3, 1fr); } } .cc-feat-card { padding: var(--cc-space-8); background: var(--cc-color-bg-section); border: 1px solid var(--cc-color-border-subtle); border-radius: var(--cc-radius-lg); transition: transform var(--cc-duration-base) var(--cc-easing-standard), box-shadow var(--cc-duration-base) var(--cc-easing-standard); } .cc-feat-card:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow-md); } .cc-feat-card__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--cc-color-brand-primary-tint); color: var(--cc-color-brand-primary); border-radius: var(--cc-radius-md); margin-bottom: var(--cc-space-5); } .cc-feat-card__h { font-size: var(--cc-type-h4); margin: 0 0 var(--cc-space-3); } .cc-feat-card__body { margin: 0; color: var(--cc-color-text-muted); } /* === Pattern: Security strip === */ .cc-sec__h { max-width: 680px; margin-inline: auto; margin-bottom: var(--cc-space-12); } .cc-sec__grid { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-6); } @media (min-width: 600px) { .cc-sec__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cc-sec__grid { grid-template-columns: repeat(4, 1fr); } } .cc-sec__item { padding: var(--cc-space-6); position: relative; } /* Per-card icons — proto cc-sec cards have a 20px purple SVG icon at top-left. * Source: landing-preview.html cc-sec items array, lines 215-222. * Icons stroked with var(--cc-color-brand-primary) (purple) for both light and dark variants. */ .cc-sec__item::before { content: ''; display: block; width: 20px; height: 20px; margin: 0 0 12px; background-repeat: no-repeat; background-size: contain; } .cc-sec__item--soc2::before { background-image: url("../img/icons/cc-css-31-cc-sec--item--soc2--before.png"); } .cc-sec__item--access::before { background-image: url("../img/icons/cc-css-32-cc-sec--item--access--before.png"); } .cc-sec__item--ip::before { background-image: url("../img/icons/cc-css-33-cc-sec--item--ip--before.png"); } .cc-sec__item--workarounds::before { background-image: url("../img/icons/cc-css-34-cc-sec--item--workarounds--before.png"); } .cc-sec__h3 { font-size: var(--cc-type-h5); margin: 0 0 var(--cc-space-3); color: var(--cc-color-text-heading); } .cc-sec__body { margin: 0; color: var(--cc-color-text-muted); font-size: var(--cc-type-small); line-height: var(--cc-lh-relaxed); } /* === Pattern: Features section === */ .cc-feat-section { /* * ~65px sticky site-header + ~62px sticky cc-scrollspy = ~127px combined * sticky offset above the section. Use 130px so the heading clears both. * (v1.4.46: was 150px, based on the pre-shrink 85px header.) * Logged-in users get +32px for the WP admin bar (overridden below). */ scroll-margin-top: 130px; } body.admin-bar .cc-feat-section { scroll-margin-top: 162px; } @media (max-width: 782px) { /* WP admin bar is 46px on small screens (v1.4.46) */ body.admin-bar .cc-feat-section { scroll-margin-top: 176px; } } .cc-feat-section__grid { display: grid; grid-template-columns: 1fr; gap: var(--cc-space-10); align-items: center; } @media (min-width: 900px) { .cc-feat-section__grid { grid-template-columns: 1fr 1.1fr; gap: var(--cc-space-12); } } .cc-feat-section__h { margin: var(--cc-space-3) 0 var(--cc-space-4); } .cc-feat-section__lead { font-size: var(--cc-type-h5); color: var(--cc-color-text-primary); line-height: var(--cc-lh-relaxed); margin-bottom: var(--cc-space-6); } .cc-feat-section__checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cc-space-3); } .cc-feat-section__checks li { padding-left: var(--cc-space-6); position: relative; color: var(--cc-color-text-primary); } .cc-feat-section__checks li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 14px; height: 14px; background: url("../img/icons/cc-css-35-cc-feat-section--checks-li--before.png") center / contain no-repeat; } .cc-feat-section__mockup-frame { background: var(--cc-color-bg-section-alt); border: 1px solid var(--cc-color-border-subtle); border-radius: var(--cc-radius-lg); padding: var(--cc-space-4); } .cc-feat-section__mockup-frame img { border-radius: var(--cc-radius-md); } /* === Pattern: Scrollspy sub-nav === * * The scrollspy must "stick" to the BOTTOM of the 85px sticky site-header as * the user scrolls past it on /features/. Two requirements: * 1. top offset must equal the visible header height (85px), or 117px when * the WP admin bar is present (32px bar + 85px header). * 2. The sticky element's parent containing block must span all the * sibling feature sections — otherwise sticky has no scroll room and * the nav simply scrolls away with the page. * * We apply position:sticky on the WRAP (whose parent is .entry-content, * which is tall and spans the whole page) instead of on .cc-scrollspy * itself (whose immediate parent .cc-scrollspy-wrap is only ~62px tall). * Matches prototype behavior: sticky feature-nav at top:60 below main nav. */ .cc-scrollspy-wrap { /* v1.4.46: 85px predated the v1.4.16-18 header shrink — the real sticky * header is ~65px, so the old offset floated the subnav 20px too low on * every features page except EN (which had a page-id-1811 patch, now * removed as redundant). */ position: sticky; top: 65px; z-index: calc(var(--cc-z-header) - 1); } body.admin-bar .cc-scrollspy-wrap { top: 97px; } @media (max-width: 782px) { /* WP admin bar is 46px tall on small screens; site-header is pushed to top:46 in nav.css to match. Scrollspy follows at 46 + 65 = 111px. */ body.admin-bar .cc-scrollspy-wrap { top: 111px; } } .cc-scrollspy { position: relative; background: var(--cc-color-bg-section); border-bottom: 1px solid var(--cc-color-border-subtle); overflow-x: auto; -webkit-overflow-scrolling: touch; } .cc-scrollspy__list { display: flex; gap: var(--cc-space-2); list-style: none; margin: 0; padding: var(--cc-space-3) 0; white-space: nowrap; } .cc-scrollspy__link { display: inline-block; padding: var(--cc-space-2) var(--cc-space-4); border-radius: var(--cc-radius-pill); color: var(--cc-color-text-muted); font-size: var(--cc-type-small); font-weight: var(--cc-fw-semibold); transition: background var(--cc-duration-fast) var(--cc-easing-standard), color var(--cc-duration-fast) var(--cc-easing-standard); } .cc-scrollspy__link:hover { color: var(--cc-color-text-heading); opacity: 1; } .cc-scrollspy__link.is-active { background: var(--cc-color-brand-primary-tint); color: var(--cc-color-brand-primary); } /* ============================================================ * v1.1.0 — patterns added in the giant parity-fix pass * ============================================================ */ /* ============ cc-formats — supported CAD formats grid ============ */ .cc-formats { background: #FAFAFA; border-bottom: 1px solid var(--cc-color-border-subtle); } .cc-formats__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; } .cc-formats__h { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 900; color: #1A1A2E; line-height: 1.2; letter-spacing: -0.03em; max-width: 720px; margin: 0 auto 12px; } .cc-formats__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #52525B; max-width: 620px; margin: 0 auto 28px; line-height: 1.5; } .cc-formats__grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 900px; margin: 0 auto 24px; } .cc-formats__pill { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #FFFFFF; color: #52525B; border: 1px solid #E4E4E7; font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-formats__caption { font-size: 13px; color: #71717A; } .cc-formats__see-all { color: var(--cc-color-brand-primary); font-weight: 700; text-decoration: none; } .cc-formats__see-all:hover { text-decoration: underline; } /* ============ cc-problem — purple narrative ============ */ .cc-problem { background: #EAE0F4; padding-block: clamp(64px, 8vw, 100px); text-align: center; } .cc-problem__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 24px; letter-spacing: 0.2em; } .cc-problem__h { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.035em; color: #0F0F0F; max-width: 600px; margin: 0 auto 20px; } .cc-problem__caption { font-size: 14px; color: #71717A; font-family: var(--cc-font-mono, "DM Mono", monospace); margin-bottom: 32px; } .cc-problem__solution { font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 800; color: var(--cc-color-action); margin: 0 auto 8px; } .cc-problem__sub-solution { font-size: 15px; color: #52525B; margin: 0; } /* ============ cc-inline-testimonial — single card on purple ============ */ .cc-inline-testimonial { background: #EAE0F4; padding-block: clamp(0px, 0vw, 0px) clamp(64px, 8vw, 100px); } .cc-inline-testimonial__container { max-width: 900px; margin: 0 auto; } .cc-inline-testimonial__card { position: relative; padding: clamp(32px, 4vw, 40px) clamp(24px, 4vw, 48px); background: #FFFFFF; border-radius: 18px; border: 1px solid #E0CCF5; box-shadow: 0 0 0 6px rgb(from var(--cc-color-brand-primary) r g b / 0.06), 0 0 80px rgb(from var(--cc-color-brand-primary) r g b / 0.22), 0 16px 48px rgb(from var(--cc-color-brand-primary) r g b / 0.18); text-align: center; } .cc-inline-testimonial__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 20px; letter-spacing: 0.2em; } .cc-inline-testimonial__quote { font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 600; color: #1A1A2E; line-height: 1.45; letter-spacing: -0.015em; max-width: 760px; margin: 0 auto 28px; border: 0; padding: 0; } .cc-inline-testimonial__quote::before { content: "\201C"; color: var(--cc-color-brand-primary); } .cc-inline-testimonial__quote::after { content: "\201D"; color: var(--cc-color-brand-primary); } .cc-inline-testimonial__attribution { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .cc-inline-testimonial__logo img { height: 28px; max-height: 28px; object-fit: contain; filter: grayscale(1); opacity: 0.75; } .cc-inline-testimonial__author { text-align: left; padding-left: 16px; border-left: 1px solid #E4E4E7; } .cc-inline-testimonial__author-name { font-size: 13px; font-weight: 700; color: #0F0F0F; margin: 0; } .cc-inline-testimonial__author-role { font-size: 12px; color: #71717A; margin: 2px 0 0; } /* ============ cc-hidden-cost — peach card with clock icon ============ * Per prototype why-cadchat-preview.html "URGENCY PARAGRAPH" section. Single * card on a #FAFAFA section bg, with a top orange-amber-red accent gradient, * an amber clock icon on the left, and amber-toned eyebrow + larger body * copy on the right. Different from the v1.2.x neutral-purple variant. */ .cc-hidden-cost { background: #FAFAFA; border-top: 1px solid #EDE4F7; padding: clamp(48px, 7vw, 88px) 24px; } .cc-hidden-cost__card { max-width: 860px; margin: 0 auto; position: relative; padding: clamp(36px, 5vw, 48px) clamp(24px, 5vw, 56px) clamp(32px, 4.5vw, 44px); background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%); border-radius: 20px; border: 1px solid #FDE68A; box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.08), 0 20px 50px rgba(180, 83, 9, 0.08); overflow: hidden; } .cc-hidden-cost__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #F97316, #F59E0B, #EF4444); } .cc-hidden-cost__inner { display: flex; align-items: center; gap: 28px; } @media (max-width: 600px) { .cc-hidden-cost__inner { flex-direction: column; align-items: flex-start; gap: 18px; } } .cc-hidden-cost__icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #FFF7ED, #FEE4C2); border: 1.5px solid #FED7AA; display: flex; align-items: center; justify-content: center; } .cc-hidden-cost__copy { flex: 1; } .cc-hidden-cost__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #B45309; margin: 0 0 12px; font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-hidden-cost__body { font-size: clamp(1.1rem, 2vw, 1.4rem); color: #1A1A2E; line-height: 1.55; font-weight: 500; letter-spacing: -0.01em; margin: 0; } /* ============ cc-replaces-mix — single framing strip ============ */ .cc-replaces-mix { background: #FAFAFA; padding-block: clamp(40px, 6vw, 64px); } .cc-replaces-mix__lead { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; color: #1A1A2E; line-height: 1.5; letter-spacing: -0.015em; max-width: 920px; margin: 0 auto; } /* ============ cc-what-changes — before/after pair ============ */ .cc-what-changes__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 18px; letter-spacing: 0.2em; } .cc-what-changes__h { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.035em; color: #1A1A2E; max-width: 720px; margin: 0 auto 48px; } .cc-what-changes__grid { gap: 32px; } .cc-what-changes__col { padding: 28px 24px; border-radius: 14px; } .cc-what-changes__col--before { background: #F8F8FA; border: 1px solid #E4E4E7; } .cc-what-changes__col--after { background: rgb(from var(--cc-color-brand-primary) r g b / 0.06); border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.20); } .cc-what-changes__col-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px; color: #71717A; } .cc-what-changes__col--after .cc-what-changes__col-eyebrow { color: var(--cc-color-brand-primary); } .cc-what-changes__list { padding-left: 20px; margin: 0; } .cc-what-changes__list li { color: #52525B; font-size: 15px; line-height: 1.6; padding-block: 4px; } .cc-what-changes__list--after li::marker { color: var(--cc-color-brand-primary); } /* ============ cc-plm — coexists with PLM ============ */ .cc-plm__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; letter-spacing: 0.2em; } .cc-plm__h { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 900; line-height: 1.12; letter-spacing: -0.035em; color: #1A1A2E; max-width: 820px; margin: 0 auto 18px; } .cc-plm__h-emphasis { color: var(--cc-color-brand-primary); } .cc-plm__sub { font-size: 16px; color: #52525B; line-height: 1.65; max-width: 720px; margin: 0 auto 36px; } .cc-plm__audience { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 auto 48px; } .cc-plm__audience-item { padding: 8px 16px; border-radius: 999px; background: rgb(from var(--cc-color-brand-primary) r g b / 0.08); color: var(--cc-color-brand-primary); font-size: 13px; font-weight: 600; font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-plm__stack { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .cc-plm__layer { padding: 24px 28px; border-radius: 14px; } .cc-plm__layer--top { background: linear-gradient(135deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary-deep) 100%); color: #FFFFFF; box-shadow: 0 16px 40px rgb(from var(--cc-color-brand-primary) r g b / 0.25); } .cc-plm__layer--bottom { background: #F8F8FA; border: 1px solid #E4E4E7; } .cc-plm__layer-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.8; margin-bottom: 8px; font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-plm__layer-label { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin: 0; } .cc-plm__layer--top .cc-plm__layer-label { color: #FFFFFF; } .cc-plm__layer--bottom .cc-plm__layer-label { color: #0F0F0F; } .cc-plm__layer-caption { font-size: 12px; opacity: 0.85; margin-top: 6px; line-height: 1.5; } .cc-plm__layer--bottom .cc-plm__layer-caption { color: #71717A; } /* ============ cc-by-audience — teaser cards ============ */ .cc-by-audience__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; letter-spacing: 0.2em; } .cc-by-audience__h { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.035em; color: #1A1A2E; max-width: 720px; margin: 0 auto 48px; } .cc-by-audience__grid { gap: 24px; } .cc-by-audience__card { display: flex; flex-direction: column; justify-content: space-between; padding: 36px 32px; border-radius: 18px; background: #FAFAFA; min-height: 280px; transition: all 0.2s; text-decoration: none; } .cc-by-audience__card--leaders { border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.16); } .cc-by-audience__card--leaders:hover { background: #FFFFFF; border-color: var(--cc-color-brand-primary); box-shadow: 0 16px 40px rgb(from var(--cc-color-brand-primary) r g b / 0.08); } .cc-by-audience__card--suppliers { border: 1px solid rgba(87,43,122,0.16); } .cc-by-audience__card--suppliers:hover { background: #FFFFFF; border-color: var(--cc-color-brand-primary-deep); box-shadow: 0 16px 40px rgba(87,43,122,0.08); } .cc-by-audience__card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 16px; } .cc-by-audience__card--leaders .cc-by-audience__card-eyebrow { color: var(--cc-color-brand-primary); } .cc-by-audience__card--suppliers .cc-by-audience__card-eyebrow { color: var(--cc-color-brand-primary-deep); } .cc-by-audience__card-h { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; color: #1A1A2E; line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 14px; } .cc-by-audience__card-body { font-size: 15px; color: #52525B; line-height: 1.65; } .cc-by-audience__card-cta { margin-top: 28px; font-size: 14px; font-weight: 700; } .cc-by-audience__card--leaders .cc-by-audience__card-cta a { color: var(--cc-color-brand-primary); text-decoration: none; } .cc-by-audience__card--suppliers .cc-by-audience__card-cta a { color: var(--cc-color-brand-primary-deep); text-decoration: none; } /* ============ cc-qualifier — "Sound like last week?" ============ */ .cc-qualifier__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 18px; letter-spacing: 0.2em; text-align: center; } .cc-qualifier__h { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 900; color: #1A1A2E; line-height: 1.12; letter-spacing: -0.035em; max-width: 780px; margin: 0 auto 48px; } .cc-qualifier__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 768px) { .cc-qualifier__list { grid-template-columns: 1fr 1fr; gap: 16px 32px; } } .cc-qualifier__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; } @media (max-width: 767px) { .cc-qualifier__item { border-bottom: 1px solid #E4E4E7; } } .cc-qualifier__check { color: var(--cc-color-brand-primary); flex-shrink: 0; margin-top: 2px; } .cc-qualifier__item span { font-size: clamp(0.98rem, 1.6vw, 1.1rem); color: #1A1A2E; line-height: 1.55; font-weight: 500; } .cc-qualifier__tagline { font-size: clamp(1.05rem, 1.9vw, 1.2rem); font-weight: 700; color: #1A1A2E; margin-top: clamp(36px, 5vw, 48px); } /* ============ cc-trust-badges — 4-icon row ============ */ .cc-trust-badges { padding-block: clamp(48px, 6vw, 64px); border-top: 1px solid var(--cc-color-border-subtle); } .cc-trust-badges__row { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 36px; justify-content: center; align-items: center; } .cc-trust-badges__item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #52525B; } .cc-trust-badges__icon { color: var(--cc-color-brand-primary); flex-shrink: 0; } .cc-trust-badges__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--cc-color-brand-primary); text-decoration: none; } .cc-trust-badges__link:hover { text-decoration: underline; } /* ============ cc-timezones — async narrative ============ */ .cc-timezones { padding-block: clamp(64px, 8vw, 100px); border-top: 1px solid var(--cc-color-border-subtle); } .cc-timezones__grid { gap: clamp(40px, 6vw, 80px); align-items: center; } .cc-timezones__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 20px; letter-spacing: 0.18em; } .cc-timezones__h { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; margin-bottom: 22px; } .cc-timezones__lead { font-size: 16px; color: #52525B; line-height: 1.8; margin-bottom: 36px; } .cc-timezones__callout { padding: 22px 26px; background: rgb(from var(--cc-color-brand-primary) r g b / 0.06); border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.2); border-radius: 14px; border-left: 3px solid var(--cc-color-brand-primary); } .cc-timezones__callout-eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 10px; letter-spacing: 0.12em; font-size: 12px; font-weight: 700; } .cc-timezones__callout-body { font-size: 14px; color: #52525B; line-height: 1.7; margin: 0; } .cc-timezones__map svg { display: block; width: 100%; max-width: 500px; margin: 0 auto; border-radius: 14px; } /* ============ hero-landing additions (v1.1.0) ============ */ .cc-hero-landing__h { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.045em; color: #1A1A2E; max-width: 900px; margin: 0 auto 18px; } .cc-hero-landing__lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #52525B; max-width: 640px; margin: 0 auto 32px; line-height: 1.5; } .cc-hero-landing__rotator { color: var(--cc-color-brand-primary); font-weight: 700; text-decoration: underline; text-decoration-color: rgb(from var(--cc-color-brand-primary) r g b / 0.4); text-underline-offset: 4px; display: inline-block; min-width: 0.5em; transition: opacity 220ms ease-out; } .cc-hero-landing__caret { color: var(--cc-color-brand-primary); font-weight: 700; animation: cc-caret-blink 1s steps(1) infinite; } @keyframes cc-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .cc-hero-landing__btns { gap: 12px; align-items: center; margin-bottom: 48px; } .cc-hero-landing__tour-link { display: inline-flex; align-items: center; gap: 6px; color: #1A1A2E; font-weight: 700; font-size: 14px; text-decoration: none; padding: 10px 14px; } .cc-hero-landing__tour-link:hover { color: var(--cc-color-brand-primary); } .cc-hero-landing__tour-link svg { color: var(--cc-color-brand-primary); } .cc-hero-landing__media { max-width: 1100px; margin: 0 auto; } .cc-hero-landing__media img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04); } /* ============ ticker-logos head (v1.1.0) ============ */ .cc-ticker-section__head { max-width: 720px; margin: 0 auto 36px; padding-bottom: 8px; } .cc-ticker-section__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 18px; letter-spacing: 0.2em; } .cc-ticker-section__h { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.035em; color: #1A1A2E; margin: 0 auto 14px; } .cc-ticker-section__lead { font-size: 15px; color: #52525B; line-height: 1.5; margin: 0 auto; max-width: 600px; } /* ============ cc-pricing-toggle (v1.1.0) ============ */ .cc-pricing-toggle { padding-block: clamp(24px, 4vw, 36px) 0; background: transparent; } .cc-pricing-toggle__row { display: inline-flex; align-items: center; gap: 14px; padding: 4px; margin: 0 auto; } .cc-pricing-toggle__btn { background: transparent; border: 0; padding: 8px 14px; font-size: 14px; font-weight: 700; color: #71717A; cursor: pointer; font-family: inherit; transition: color 0.2s; } .cc-pricing-toggle__btn.is-selected { color: #1A1A2E; } .cc-pricing-toggle__pill { display: inline-block; width: 38px; height: 22px; border-radius: 999px; background: var(--cc-color-brand-primary); position: relative; transition: background 0.2s; } .cc-pricing-toggle__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s; } .cc-pricing-toggle[data-cc-billing-current="monthly"] .cc-pricing-toggle__knob { transform: translateX(16px); } .cc-pricing-toggle__caption { text-align: center; font-size: 13px; color: var(--cc-color-brand-primary); margin-top: 12px; } /* ============================================================ * cc-feat-anims — homepage spotlight (v1.2.0) * * Per-capability pure-CSS keyframes. Each row alternates left/right via * .cc-feat-anim--flip. The accent color is set per-row via CSS custom * property `--cc-anim-accent`, applied to the visual frame as `currentColor`. * ============================================================ */ .cc-feat-anims { background: #FFFFFF; padding-block: 0; } .cc-feat-anim { padding-block: clamp(48px, 7vw, 84px); border-top: 1px solid #EBEBEB; } .cc-feat-anim:first-of-type { border-top: 0; } .cc-feat-anim__grid { gap: clamp(2rem, 5vw, 5rem); align-items: center; } .cc-feat-anim--flip .cc-feat-anim__grid { flex-direction: row-reverse; } @media (max-width: 768px) { .cc-feat-anim--flip .cc-feat-anim__grid { flex-direction: column; } } .cc-feat-anim__eyebrow { color: var(--cc-anim-accent, var(--cc-color-brand-primary)); margin-bottom: 18px; letter-spacing: 0.18em; } .cc-feat-anim__h { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 900; color: #1A1A2E; line-height: 1.1; letter-spacing: -0.035em; margin-bottom: 18px; } .cc-feat-anim__body { font-size: 16px; color: #71717A; line-height: 1.78; margin-bottom: 0; } .cc-feat-anim__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; } .cc-feat-anim__pill { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--cc-anim-accent) 12%, transparent); color: var(--cc-anim-accent); font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-feat-anim__visual { display: flex; align-items: center; } .cc-feat-anim__frame { position: relative; aspect-ratio: 5 / 3; width: 100%; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 80px color-mix(in srgb, var(--cc-anim-accent) 12%, transparent), 0 32px 64px rgba(0,0,0,0.4); border: 1px solid color-mix(in srgb, var(--cc-anim-accent) 16%, transparent); color: var(--cc-anim-accent); } .cc-feat-anim__frame svg { width: 100%; height: 100%; display: block; } /* Respect prefers-reduced-motion across all feature animations. */ @media (prefers-reduced-motion: reduce) { .cc-feat-anim__frame * { animation: none !important; transition: none !important; } } /* viewer — slow rotation around y-axis using transform-origin */ @keyframes cc-anim-viewer-rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } @keyframes cc-anim-viewer-rings { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes cc-anim-viewer-pill-cycle { 0%, 20% { fill-opacity: 0.15; } 25%, 95% { fill-opacity: 1; } } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__rings { animation: cc-anim-viewer-rings 4s ease-in-out infinite; transform-origin: 200px 115px; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__cube { transform-origin: 200px 115px; transform-box: fill-box; animation: cc-anim-viewer-rotate 12s linear infinite; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__pill rect { fill: currentColor; fill-opacity: 0.15; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__pill text { fill: rgba(255,255,255,0.7); font-family: "DM Mono", monospace; font-size: 10px; font-weight: 600; text-anchor: middle; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__pill--1 rect { animation: cc-anim-viewer-pill-cycle 8s ease-in-out infinite; animation-delay: 0s; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__pill--2 rect { animation: cc-anim-viewer-pill-cycle 8s ease-in-out infinite; animation-delay: 2s; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__pill--3 rect { animation: cc-anim-viewer-pill-cycle 8s ease-in-out infinite; animation-delay: 4s; } .cc-feat-anim__frame[data-anim="viewer"] .cc-anim-viewer__pill--4 rect { animation: cc-anim-viewer-pill-cycle 8s ease-in-out infinite; animation-delay: 6s; } /* access — avatars fade in sequentially */ @keyframes cc-anim-access-pop { 0%, 20% { transform: scale(0.4); opacity: 0; } 30%, 100% { transform: scale(1); opacity: 1; } } .cc-feat-anim__frame[data-anim="access"] .cc-anim-access__a { transform-origin: center; transform-box: fill-box; animation: cc-anim-access-pop 5s ease-out infinite; } .cc-feat-anim__frame[data-anim="access"] .cc-anim-access__a--1 { animation-delay: 0.0s; } .cc-feat-anim__frame[data-anim="access"] .cc-anim-access__a--2 { animation-delay: 0.4s; } .cc-feat-anim__frame[data-anim="access"] .cc-anim-access__a--3 { animation-delay: 0.8s; } .cc-feat-anim__frame[data-anim="access"] .cc-anim-access__a--4 { animation-delay: 1.2s; } /* collab — three users orbit gently */ @keyframes cc-anim-collab-u1 { 0% { transform: translate(115px, 95px); } 50% { transform: translate(170px, 130px); } 100% { transform: translate(115px, 95px); } } @keyframes cc-anim-collab-u2 { 0% { transform: translate(225px, 125px); } 50% { transform: translate(180px, 75px); } 100% { transform: translate(225px, 125px); } } @keyframes cc-anim-collab-u3 { 0% { transform: translate(168px, 72px); } 50% { transform: translate(220px, 145px); } 100% { transform: translate(168px, 72px); } } .cc-feat-anim__frame[data-anim="collab"] .cc-anim-collab__user--1 { animation: cc-anim-collab-u1 8s ease-in-out infinite; } .cc-feat-anim__frame[data-anim="collab"] .cc-anim-collab__user--2 { animation: cc-anim-collab-u2 9s ease-in-out infinite; } .cc-feat-anim__frame[data-anim="collab"] .cc-anim-collab__user--3 { animation: cc-anim-collab-u3 7s ease-in-out infinite; } /* comments — pins fade in/out with stagger */ @keyframes cc-anim-comments-pin { 0%, 12% { opacity: 0; } 18%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } } .cc-feat-anim__frame[data-anim="comments"] .cc-anim-comments__pin { animation: cc-anim-comments-pin 7s ease-in-out infinite; } .cc-feat-anim__frame[data-anim="comments"] .cc-anim-comments__pin--1 { animation-delay: 0s; } .cc-feat-anim__frame[data-anim="comments"] .cc-anim-comments__pin--2 { animation-delay: 1.2s; } .cc-feat-anim__frame[data-anim="comments"] .cc-anim-comments__pin--3 { animation-delay: 2.4s; } /* 3draw — stroke draws on, cursor follows */ @keyframes cc-anim-3draw-stroke { 0% { stroke-dasharray: 200; stroke-dashoffset: 200; } 60% { stroke-dasharray: 200; stroke-dashoffset: 0; } 100% { stroke-dasharray: 200; stroke-dashoffset: 0; opacity: 1; } } @keyframes cc-anim-3draw-fade { 0%, 70% { opacity: 1; } 95%, 100% { opacity: 0; } } @keyframes cc-anim-3draw-cursor { 0% { transform: translate(0, 0); } 30% { transform: translate(40px, 8px); } 60% { transform: translate(90px, -10px); } 100% { transform: translate(90px, -15px); } } .cc-feat-anim__frame[data-anim="3draw"] .cc-anim-3draw__stroke { animation: cc-anim-3draw-stroke 5s ease-in-out infinite, cc-anim-3draw-fade 5s ease-in-out infinite; } .cc-feat-anim__frame[data-anim="3draw"] .cc-anim-3draw__cursor { animation: cc-anim-3draw-cursor 5s ease-in-out infinite; } /* splitscreen — sync line pulses */ @keyframes cc-anim-split-sync { 0%, 100% { stroke-opacity: 0.2; } 50% { stroke-opacity: 0.95; } } @keyframes cc-anim-split-cube { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } .cc-feat-anim__frame[data-anim="splitscreen"] .cc-anim-split__sync { animation: cc-anim-split-sync 2.4s ease-in-out infinite; } .cc-feat-anim__frame[data-anim="splitscreen"] .cc-anim-split__cube { transform-origin: 295px 115px; transform-box: fill-box; animation: cc-anim-split-cube 14s linear infinite; } /* ============ cc-more-tools — capability mini-grid (v1.2.0) ============ */ .cc-more-tools__h { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #1A1A2E; max-width: 720px; margin: 0 auto 14px; } .cc-more-tools__lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #52525B; max-width: 640px; margin: 0 auto 56px; } .cc-more-tools__grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1100px; margin: 0 auto; } @media (min-width: 600px) { .cc-more-tools__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .cc-more-tools__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .cc-more-tools__tile { padding: 28px 28px 32px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E4E7; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .cc-more-tools__tile:hover { transform: translateY(-2px); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.30); box-shadow: 0 16px 40px rgba(15,15,15,0.06); } .cc-more-tools__tile--purple .cc-more-tools__icon { color: var(--cc-color-brand-primary); } .cc-more-tools__tile--blue .cc-more-tools__icon { color: var(--cc-color-action); } .cc-more-tools__icon { display: block; margin-bottom: 16px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, currentColor 10%, transparent); width: 44px; height: 44px; } .cc-more-tools__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #71717A; font-family: var(--cc-font-mono, "DM Mono", monospace); margin: 0 0 6px; } .cc-more-tools__name { font-size: 18px; font-weight: 800; color: #1A1A2E; letter-spacing: -0.02em; margin: 0 0 8px; } .cc-more-tools__desc { font-size: 14px; color: #52525B; line-height: 1.65; margin: 0; } /* ============================================================ * Session 6 / v1.2.2 fixes — landing parity * ============================================================ */ /* === video-hero (homepage section under the hero, anchor #video) === * Per prototype landing-preview.html: section max-width 1100px with 24px * horizontal padding -> inner frame is 1052px wide, full bleed within the * section. Default WP `is-layout-constrained > *` would clip the frame to * the theme's content-size (820px), so we use a higher-specificity rule to * push the frame to the section's full inner width. */ .cc-video-hero { max-width: 1100px; margin-inline: auto; padding: 0 24px 56px; scroll-margin-top: 80px; } .cc-video-hero.is-layout-constrained > .cc-video-hero__frame, .cc-video-hero__frame { max-width: 1052px; width: 100%; margin-inline: auto; border-radius: 20px; overflow: hidden; line-height: 0; box-shadow: 0 40px 100px rgb(from var(--cc-color-brand-primary) r g b / 0.2), 0 0 0 3px var(--cc-color-brand-primary); } .cc-video-hero__media { width: 100%; display: block; height: auto; } @media (max-width: 768px) { .cc-video-hero { padding: 0 16px 48px; } } /* === tagline-strip (standalone "video calling app" section) === * Prototype landing-preview.html lines ~559-568. White bg, h2 with line 1 dark, * line 2 (the .cc-tagline-strip__accent span) in brand purple. Subhead muted. */ .cc-tagline-strip { background: #FFFFFF; border-top: 1px solid #E4E4E7; padding-block: clamp(48px, 7vw, 64px); text-align: center; } .cc-tagline-strip__h { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; margin: 0; } .cc-tagline-strip__accent { color: var(--cc-color-brand-primary); } .cc-tagline-strip__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #52525B; margin: 20px auto 0; max-width: 620px; line-height: 1.5; } /* === Ticker section (logos-only, with small gray eyebrow above) === * v1.2.2 restructure: the tagline + h2 + lead head block has moved to the * `tagline-strip` pattern. ticker-logos now renders only the eyebrow + logo * marquee. Eyebrow is small uppercase gray per prototype lines ~570-580. */ .cc-ticker-section { background: #FFFFFF; padding-block: clamp(36px, 5vw, 48px); } .cc-ticker-section__eyebrow { color: #A1A1AA; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 28px; } /* === cc-sec--dark variant (security-strip on prototype homepage) === * Prototype landing-preview.html: bg #0F0F0F, eyebrow purple `var(--cc-color-brand-primary)`, * heading + body white. Cards on dark bg. */ .cc-sec.cc-sec--dark { background: #0F0F0F; color: #F4F4F5; } .cc-sec.cc-sec--dark .cc-sec__eyebrow { color: var(--cc-color-brand-primary); } .cc-sec.cc-sec--dark .cc-sec__h { color: #FFFFFF; } .cc-sec.cc-sec--dark .cc-sec__h3 { color: #FFFFFF; } .cc-sec.cc-sec--dark .cc-sec__body { color: #A1A1AA; } .cc-sec.cc-sec--dark .cc-sec__item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 28px 24px; } /* ============================================================ * Session 6 / v1.2.4 fixes — typography + eyebrow + heading parity * ============================================================ */ /* === Global eyebrow style === * WP block attrs `fontFamily="mono"` + `fontSize="eyebrow"` add * .has-mono-font-family + .has-eyebrow-font-size but DON'T set weight, * letter-spacing, or text-transform. Per prototype every eyebrow is * uppercase + 700 + ~0.18em letter-spacing. Apply globally so every * pattern's eyebrow renders consistently without per-pattern repeats. */ .has-mono-font-family.has-eyebrow-font-size { font-weight: 700; text-transform: uppercase; letter-spacing: 0.20em; } /* === Hero lead size + weight === * Prototype (landing-preview.html line 528): clamp(1.05rem, 2.2vw, 1.35rem) * fontWeight: 600. Test was rendering ~18.4px / 400 (too small + too thin). * Bump specificity by adding .cc-section to win over the global p rule. */ .cc-section .cc-hero-landing__lead { font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; margin: 0 auto 40px !important; } /* CTA-banner h2 margin per proto: marginBottom 18px not 0 */ .cc-section .cc-cta-banner__h, .cc-section .cc-cta-banner h2.wp-block-heading { margin-bottom: 18px !important; } /* Hero h1 margin per proto: marginBottom 22px not 18 */ .cc-section .cc-hero-landing__h { margin-bottom: 22px !important; } /* Section h2 margin per proto: 18px (was 48px on dark sec) */ .cc-section .cc-sec__h { margin-bottom: 18px !important; } /* Inline-testimonial eyebrow margin per proto: 20px (was 16px) */ .cc-section .cc-inline-testimonial__eyebrow { margin-bottom: 20px !important; } /* === Per-section h2 sizing overrides === * Global .cc-section h2 = clamp(1.8rem, 3.5vw, 2.8rem) (max 44.8px) wins * via specificity (0,1,1) over per-pattern single-class rules (0,1,0). * Add specificity-winning overrides for sections where the prototype * uses smaller h2 sizes: * cc-formats: 33.6px (clamp 1.6/2.5vw/2.1rem) * cc-how: 38.4px (clamp 1.6/3vw/2.4rem) * cc-more-tools: 38.4px */ .cc-section.cc-formats .cc-formats__h, .cc-section.cc-formats h2 { font-size: clamp(1.6rem, 2.5vw, 2.1rem); } .cc-section.cc-how h2, .cc-section.cc-more-tools h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } /* === cc-feat-anim h3 weight + size === * Prototype renders these at 35.2px / 900 weight. Global .cc-section h3 * applies 700 weight which loses to (and overrides) our pattern rule. * Add specificity by including .cc-section. */ .cc-section .cc-feat-anim__h { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 900; } /* === Watch 2-min Tour text link === * Prototype: color #52525B (gray), padding 14px 20px, font-size 15px, * font-weight 700. Test was rendering dark + smaller padding. */ .cc-hero-landing__tour-link { color: #52525B; padding: 14px 20px; font-size: 15px; font-weight: 700; } .cc-hero-landing__tour-link:hover { color: var(--cc-color-brand-primary); opacity: 1; } .cc-hero-landing__tour-link svg { color: var(--cc-color-brand-primary); } /* === Footer text color (prototype: #27272A near-black, not muted) === */ .cc-footer { color: #27272A; } .cc-footer a { color: #71717A; } .cc-footer a:hover { color: var(--cc-color-brand-primary); opacity: 1; } /* ============================================================= * v1.3.0 — full prototype-parity additions * ============================================================= */ /* === Trust-pill row inside file-formats section === * Prototype: 32px padding-top + 1px top border, flex with 28px gap, * 14px shield/lock/IP icons (purple), 13px label, Trust Center link in purple. */ .cc-formats__trust { margin-top: 56px; padding-top: 32px; border-top: 1px solid #E4E4E7; gap: 28px; } .cc-formats__trust-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #52525B; margin: 0; } .cc-formats__trust-pill::before { content: ""; display: inline-block; width: 14px; height: 14px; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; } .cc-formats__trust-pill--soc2::before { background-image: url("../img/icons/cc-css-36-cc-formats--trust-pill--soc2--before.png"); } .cc-formats__trust-pill--sso::before { background-image: url("../img/icons/cc-css-37-cc-formats--trust-pill--sso--before.png"); } .cc-formats__trust-pill--ip::before { background-image: url("../img/icons/cc-css-38-cc-formats--trust-pill--ip--before.png"); } .cc-formats__trust-link { font-size: 13px; font-weight: 700; color: var(--cc-color-brand-primary); margin: 0; } .cc-formats__trust-link a { color: inherit; text-decoration: none; } .cc-formats__trust-link a:hover { text-decoration: underline; } /* === How CADchat Works — rebuilt as 2 modes × 3 numbered cards === * Prototype structure: eyebrow + 2-line h2 (purple accent line 2) + sub + * mode band (badge + caption + 3 numbered step cards w/ mockup image) ×2 + * "Works with Google & Microsoft calendars" caption. */ .cc-section.cc-how { padding: clamp(64px, 8vw, 120px) clamp(16px, 4vw, 24px); } .cc-how__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; letter-spacing: 0.18em; } .cc-how__h { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; max-width: 740px; margin: 0 auto 16px; } .cc-how__h-accent { color: var(--cc-color-brand-primary); } .cc-how__sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #52525B; line-height: 1.6; max-width: 700px; margin: 0 auto 56px; } /* Proto: tinted purple mode container (#FAF8FF) with 2px purple border + 20px radius. * WP previously had white bg with thin gray border — inverted from proto. */ .cc-how__mode { max-width: 1100px; margin: 0 auto 56px; padding: 36px clamp(20px, 3vw, 36px) 40px; border-radius: 20px; background: #FAF8FF; border: 2px solid #EDE8FF; } /* Per-mode left accent stripe — proto retains brand color cue */ .cc-how__mode--live { border-left: 4px solid var(--cc-color-brand-primary); } .cc-how__mode--async { border-left: 4px solid #0891B2; } /* cc-how mode badges — proto: colored pill (purple LIVE, green ASYNC) with * white text, 5px 14px padding, 20px border-radius, inline-flex. * Source: landing-preview.html cc-how MODE_BADGE inline styles. */ .cc-how__mode-badge { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.20em !important; color: #FFFFFF !important; background: var(--cc-color-brand-primary) !important; padding: 5px 14px !important; border-radius: 20px !important; margin: 0 12px 0 0 !important; width: auto !important; } .cc-how__mode--async .cc-how__mode-badge { color: #FFFFFF !important; background: #059669 !important; } /* Caption (next to badge) — proto has it INLINE with the pill, not below */ .cc-how__mode-caption { display: inline !important; font-size: 14px !important; color: #71717A !important; margin: 0 !important; vertical-align: middle !important; } /* Wrap badge + caption in a flex row at top of mode container */ .cc-how__mode { display: flex !important; flex-direction: column !important; } .cc-how__mode-badge, .cc-how__mode-caption { align-self: flex-start; } .cc-how__mode-caption { font-size: 14px; color: #71717A; margin: 0 0 32px; } .cc-how__steps { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 900px) { .cc-how__steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } } /* Proto: white bg with light purple border (#EDE8FF) inside the tinted mode container. * Inverted from WP's previous gray-bg / lavender-border. */ .cc-how__step { position: relative; padding: 16px 18px 20px; border-radius: 14px; background: #FFFFFF; border: 1px solid #EDE8FF; display: flex; flex-direction: column; } /* Async step border same as live per proto — both use #EDE8FF on white */ .cc-how__step-num { width: 32px; height: 32px; border-radius: 999px; background: var(--cc-color-brand-primary); color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 32px; text-align: center; margin: 0 0 14px; } .cc-how__mode--async .cc-how__step-num { background: var(--cc-color-action); } .cc-section .cc-how__step-h { font-size: 14px !important; font-weight: 800 !important; color: #1A1A2E !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin: 0 0 10px !important; } .cc-how__step-body { font-size: 13.5px; color: #52525B; line-height: 1.6; margin: 0 0 16px; flex: 1; } .cc-how__step-mockup { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid #E4E4E7; background: #FFFFFF; } .cc-how__step-mockup img, .cc-how__step-mockup svg { display: block; width: 100%; height: auto; } .cc-how__step-mockup--placeholder { padding: 0; } .cc-how__calendar-note { font-size: 13px; color: #71717A; letter-spacing: 0.04em; margin: 8px 0 0; } /* === Timezones cities (5 cities with times) === * Prototype: vertically stacked rows, each "TIME — CITY", monospace, * subtle dot/dash, purple highlights. Replaces old SVG world-map visual. */ .cc-timezones__cities { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; background: #FFFFFF; border: 1px solid #EDE4F7; border-radius: 18px; box-shadow: 0 12px 40px rgb(from var(--cc-color-brand-primary) r g b / 0.06); } .cc-timezones__city { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; color: #27272A; } .cc-timezones__city-time { font-weight: 700; color: #1A1A2E; min-width: 88px; display: inline-block; } .cc-timezones__city-dash { color: var(--cc-color-brand-primary); opacity: 0.6; } .cc-timezones__city-name { color: #52525B; font-weight: 500; } /* === More-tools tile (now native blocks: heading + body + tag eyebrow) === */ .cc-more-tools__tile { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 28px 32px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E4E7; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .cc-more-tools__tile:hover { transform: translateY(-2px); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.30); box-shadow: 0 16px 40px rgba(15,15,15,0.06); } .cc-more-tools__tile .cc-more-tools__name { font-size: 18px; font-weight: 800; color: #1A1A2E; letter-spacing: -0.02em; margin: 0 0 8px; } .cc-more-tools__tile .cc-more-tools__desc { font-size: 14px; color: #52525B; line-height: 1.65; margin: 0 0 14px; } .cc-more-tools__tile .cc-more-tools__tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #71717A; margin: 0; } /* === Security strip — h2 accent line, lead, item icons, Trust Center btn === */ .cc-sec__h-accent { color: var(--cc-color-brand-primary); } .cc-sec__lead { font-size: 17px; color: #A1A1AA; line-height: 1.75; max-width: 600px; margin: 0 auto 56px; } .cc-sec.cc-sec--dark .cc-sec__lead { color: #A1A1AA; } .cc-sec__cta { margin-top: 40px; } .cc-sec__cta .wp-block-button.is-style-brand .wp-block-button__link { background: var(--cc-color-brand-primary); color: #FFFFFF; border: none; font-weight: 700; } .cc-sec__cta .wp-block-button.is-style-brand .wp-block-button__link:hover { background: var(--cc-color-brand-primary); } /* === CTA banner — added "Or talk to our team →" subtext === */ .cc-cta-banner__or { font-size: 14px; color: #71717A; margin: 0; } .cc-cta-banner__or-link { color: var(--cc-color-brand-primary); font-weight: 700; text-decoration: none; } .cc-cta-banner__or-link:hover { text-decoration: underline; } .cc-cta-banner.cc-section--brand .cc-cta-banner__or { color: rgba(255,255,255,0.75); } .cc-cta-banner.cc-section--brand .cc-cta-banner__or-link { color: #FFFFFF; } /* === Six questions — quote cards (replaces simple bulleted list) === */ .cc-six-q__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; letter-spacing: 0.18em; } .cc-six-q__h { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; max-width: 740px; margin: 0 auto 14px; } .cc-six-q__h-accent { color: var(--cc-color-brand-primary); } .cc-six-q__sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: #71717A; font-style: italic; max-width: 700px; margin: 0 auto 48px; } .cc-six-q__grid { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 1100px; margin: 0 auto; } @media (min-width: 700px) { .cc-six-q__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){ .cc-six-q__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .cc-six-q__card { padding: 28px 26px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E4E7; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; } .cc-six-q__card:hover { transform: translateY(-2px); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.28); box-shadow: 0 14px 36px rgba(15,15,15,0.06); } .cc-six-q__card-title { font-size: 16px; font-weight: 700; color: #18181B; line-height: 1.45; margin: 0 0 8px; } .cc-six-q__card-sub { font-size: 13px; color: #71717A; margin: 0; } .cc-six-q__card--resolution { background: rgb(from var(--cc-color-brand-primary) r g b / 0.06); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.30); } .cc-six-q__card--resolution .cc-six-q__card-title { color: var(--cc-color-brand-primary); } .cc-six-q__card--resolution .cc-six-q__card-sub { color: #52525B; } /* === Old vs new — 5-step sequence + RESULT + WITH CADCHAT panels === */ .cc-vs__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; letter-spacing: 0.18em; } .cc-vs__h { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; margin: 0 auto 14px; } .cc-vs__h-accent { color: var(--cc-color-brand-primary); } .cc-vs__sub { font-size: clamp(1rem, 1.4vw, 1.05rem); color: #52525B; line-height: 1.7; max-width: 700px; margin: 0 auto 48px; } .cc-vs__sub-secondary { color: #71717A; } .cc-vs__steps { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 1100px; margin: 0 auto 36px; } @media (min-width: 600px) { .cc-vs__steps { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .cc-vs__steps { grid-template-columns: repeat(5, 1fr); gap: 18px; } } .cc-vs__step { padding: 20px 18px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E4E4E7; } .cc-vs__step-label { font-size: 14px; font-weight: 800; color: #1A1A2E; margin: 0 0 6px; letter-spacing: -0.01em; } .cc-vs__step-sub { font-size: 12.5px; color: #71717A; line-height: 1.6; margin: 0; } .cc-vs__result { max-width: 760px; margin: 0 auto 36px; padding: 24px 28px; border-radius: 14px; background: #FFF7ED; border: 1px solid #F2D6B0; text-align: center; } .cc-vs__result-eyebrow { color: #C2410C; margin: 0 0 8px; letter-spacing: 0.18em; } .cc-vs__result-text { font-size: 15px; color: #7C2D12; margin: 0; line-height: 1.5; } .cc-vs__with { max-width: 760px; margin: 0 auto; padding: 36px 32px; border-radius: 18px; background: linear-gradient(135deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary-deep) 100%); color: #FFFFFF; text-align: center; } .cc-vs__with-eyebrow { color: rgba(255,255,255,0.75); margin: 0 0 14px; letter-spacing: 0.18em; } .cc-vs__with-h { font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.025em; margin: 0 auto 12px; color: #FFFFFF; } .cc-vs__with-h-accent { color: rgba(255,255,255,0.86); } .cc-vs__with-text { font-size: 15px; margin: 0; color: rgba(255,255,255,0.85); } /* === Use-case section — title + desc highlight pairs === */ .cc-uc-section__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 14px; letter-spacing: 0.18em; } .cc-uc-section__h { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; margin: 0 0 18px; } .cc-uc-section__lead { font-size: 16px; color: #71717A; line-height: 1.75; margin: 0 0 28px; } .cc-uc-section__highlights { display: flex; flex-direction: column; gap: 18px; } .cc-uc-section__highlight { display: flex; flex-direction: column; gap: 4px; } .cc-uc-section__highlight-title { font-size: 14px; font-weight: 700; color: #18181B; margin: 0; } .cc-uc-section__highlight-desc { font-size: 13px; color: #71717A; line-height: 1.6; margin: 0; } .cc-uc-section__story-block { max-width: 1160px; margin: 56px auto 0; padding: 28px 32px; background: rgb(from var(--cc-color-brand-primary) r g b / 0.04); border-left: 4px solid var(--cc-color-brand-primary); border-radius: 6px; } .cc-uc-section__story-eyebrow { color: var(--cc-color-brand-primary); margin: 0 0 14px; letter-spacing: 0.20em; } .cc-uc-section__story-scenario, .cc-uc-section__story-outcome { font-size: 15px; color: #3F3F46; line-height: 1.75; margin: 0 0 12px; } .cc-uc-section__story-outcome { margin-bottom: 0; } .cc-uc-section__mockup-frame img { width: 100%; height: auto; border-radius: 14px; border: 1px solid #E4E4E7; display: block; } /* === Features section — title + desc highlight pairs (mirror of uc-section) === */ .cc-feat-section__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 14px; letter-spacing: 0.18em; } .cc-feat-section__h { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; margin: 0 0 18px; } .cc-feat-section__lead { font-size: 16px; color: #71717A; line-height: 1.75; margin: 0 0 28px; } .cc-feat-section__highlights { display: flex; flex-direction: column; gap: 18px; } .cc-feat-section__highlight { display: flex; flex-direction: column; gap: 4px; } .cc-feat-section__highlight-title { font-size: 14px; font-weight: 700; color: #18181B; margin: 0; } .cc-feat-section__highlight-desc { font-size: 13px; color: #71717A; line-height: 1.6; margin: 0; } .cc-feat-section__mockup-frame img { width: 100%; height: auto; border-radius: 14px; border: 1px solid #E4E4E7; display: block; } /* === Numbered steps (cc-steps) — eyebrow + h2 + lead + 3-step list === */ .cc-steps__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 14px; letter-spacing: 0.18em; } .cc-steps__h { font-size: clamp(2rem, 3.5vw, 2.6rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; color: #1A1A2E; margin: 0 auto 16px; } .cc-steps__lead { font-size: 16px; color: #71717A; line-height: 1.7; max-width: 720px; margin: 0 auto 48px; } .cc-steps__list { gap: 28px; } .cc-steps__item { gap: 22px; align-items: flex-start; } .cc-steps__num { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.20); color: var(--cc-color-brand-primary); font-size: 18px; font-weight: 800; line-height: 44px; text-align: center; margin: 0; } .cc-steps__content { flex: 1; } .cc-steps__item-h { font-size: 18px; font-weight: 800; color: #18181B; margin: 0 0 6px; letter-spacing: -0.01em; } .cc-steps__body { font-size: 14.5px; color: #52525B; line-height: 1.7; margin: 0; } /* === PLM coexists — audience pills + 2-layer stack === */ .cc-plm__audience { margin: 28px auto 36px; gap: 10px 12px; } .cc-plm__audience-item { padding: 8px 14px; border-radius: 999px; background: #FFFFFF; border: 1px solid #E4E4E7; font-size: 13px; font-weight: 600; color: #52525B; margin: 0; } .cc-plm__stack { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .cc-plm__layer { padding: 22px 26px; border-radius: 16px; background: #FFFFFF; border: 1px solid #E4E4E7; text-align: center; } .cc-plm__layer--top { background: rgb(from var(--cc-color-brand-primary) r g b / 0.06); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.30); } .cc-plm__layer--bottom { background: #FAFAFA; } .cc-plm__layer-eyebrow { color: var(--cc-color-brand-primary); margin: 0 0 6px; letter-spacing: 0.18em; } .cc-plm__layer--bottom .cc-plm__layer-eyebrow { color: #71717A; } .cc-plm__layer-label { font-size: 17px; font-weight: 800; color: #1A1A2E; letter-spacing: -0.02em; margin: 0 0 4px; } .cc-plm__layer-caption { font-size: 13px; color: #71717A; line-height: 1.6; margin: 0; } /* === Pillar — leadership card with takeaway + quote + author === */ .cc-pillar__eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 18px; letter-spacing: 0.20em; } .cc-pillar__h { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; color: #1A1A2E; line-height: 1.12; letter-spacing: -0.035em; margin: 0 0 20px; } .cc-pillar__body { font-size: 17px; color: #52525B; line-height: 1.7; white-space: pre-line; margin: 0; } .cc-pillar__card-inner { padding: clamp(28px, 4vw, 44px); background: #FAFAFA; border-radius: 18px; border: 1px solid #EDE4F7; } .cc-pillar__takeaway { font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important; font-weight: 800 !important; color: #1A1A2E !important; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 20px !important; } .cc-pillar__quote { border: none; padding: 0; margin: 0 0 24px; font-style: italic; } .cc-pillar__quote-text { font-size: clamp(0.98rem, 1.6vw, 1.1rem); font-weight: 500; color: #3F3F46; line-height: 1.6; margin: 0; } .cc-pillar__author { padding-top: 20px; border-top: 1px solid #E4E4E7; display: block; } .cc-pillar__author-name { font-size: 13px; font-weight: 700; color: #0F0F0F; margin: 0; } .cc-pillar__author-role { font-size: 12px; color: #71717A; margin: 2px 0 0; } .cc-pillar--flip .cc-pillar__copy { order: 2; } .cc-pillar--flip .cc-pillar__card { order: 1; } /* === Demo/booking — head row + tz note === */ .cc-demo__head { gap: 16px; margin-bottom: 18px; } .cc-demo__h { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900; color: #1A1A2E; letter-spacing: -0.035em; margin: 0; } .cc-demo__pill { padding: 6px 12px; border-radius: 999px; background: rgb(from var(--cc-color-brand-primary) r g b / 0.10); color: var(--cc-color-brand-primary); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin: 0; font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-demo__calendar-eyebrow { color: var(--cc-color-brand-primary); margin-bottom: 16px; letter-spacing: 0.18em; } .cc-demo__tz-note { margin-top: 14px; font-size: 12px; color: #71717A; } /* === Pricing — billed copy line (single paragraph per proto) === */ .cc-pricing__billed { font-size: 13px; color: #71717A; margin: 0 0 24px; } /* ============================================================= * v1.3.1 — pure-parity pass: supplier hero pills, supplier sec * lead/footer, supplier CTA eyebrow/body, inline-testimonial qmarks, * section bg striping (white / #FAFAFA / #F8F8FA alternating). * ============================================================= */ /* === Supplier hero pill row (4 pills with checkmark) === */ .cc-page-hero .cc-supplier-pills { margin-top: 8px; gap: 10px; font-size: 13px; color: #52525B; font-family: var(--cc-font-mono, "DM Mono", monospace); } .cc-supplier-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: #FFFFFF; border: 1px solid #E4E4E7; margin: 0; } .cc-supplier-pill::before { content: ""; display: inline-block; width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; background-image: url("../img/icons/cc-css-39-cc-supplier-pill--before.png"); } /* === Supplier cc-sec body lead + trust footer === */ .cc-sec__lead-supplier { font-size: 16px; color: #52525B; line-height: 1.7; max-width: 720px; margin: 0 auto 36px; } .cc-section--alt .cc-sec__lead-supplier { color: #52525B; } .cc-sec__trust-footer { font-size: 13px; color: #71717A; margin: 32px auto 0; } .cc-sec__trust-footer a { color: var(--cc-color-brand-primary); font-weight: 700; text-decoration: none; } .cc-sec__trust-footer a:hover { text-decoration: underline; } .cc-sec__trust-dot { color: #D4D4D8; margin: 0 6px; } /* === Supplier CTA eyebrow + body inserted before/after the headline === */ .cc-cta-banner__eyebrow { color: var(--cc-color-brand-primary); margin: 0 0 14px; letter-spacing: 0.18em; } .cc-cta-banner.cc-section--brand .cc-cta-banner__eyebrow { color: rgba(255,255,255,0.85); } .cc-cta-banner__body-supplier { font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: #52525B; line-height: 1.7; max-width: 720px; margin: 0 auto 16px; } .cc-cta-banner.cc-section--brand .cc-cta-banner__body-supplier { color: rgba(255,255,255,0.85); } /* === Inline-testimonial decorative quote chars (purple, larger) === */ .cc-inline-testimonial__qmark { color: var(--cc-color-brand-primary); font-weight: 700; font-size: 1.15em; display: inline-block; margin: 0 2px; line-height: 1; } /* === Section background striping per prototype === * Prototype: white default, `cc-section--alt` is #FAFAFA, `cc-section--alt2` is #F8F8FA, * `cc-section--brand` is the purple gradient (already styled), `cc-sec--dark` is #0F0F0F. * Test sections were all transparent — give them explicit backgrounds to match. */ .cc-section { background: #FFFFFF; } .cc-section.cc-section--alt { background: #FAFAFA; } .cc-section.cc-section--alt2 { background: #F8F8FA; } /* Brand and dark variants keep their own backgrounds (defined elsewhere). */ .cc-section.cc-section--brand, .cc-section.cc-sec--dark { background: inherit; } /* Hero sections that should remain visually contiguous with the page bg keep transparent */ .cc-section.cc-hero-landing, .cc-section.cc-features-hero, .cc-section.cc-page-hero { background: transparent; } /* === Use-case + feature-section mockup frames (inline-HTML mockups) === * Mockups embedded as wp:html with inline styles (extracted from prototype). * Frame just constrains max-width and adds spacing. */ .cc-uc-section__mockup-frame, .cc-feat-section__mockup-frame { width: 100%; max-width: 600px; margin: 0; } .cc-uc-section__mockup-frame > div, .cc-feat-section__mockup-frame > div { width: 100%; } .cc-uc-section__mockup-placeholder svg, .cc-feat-section__mockup-placeholder svg { width: 100%; height: auto; display: block; } /* ======================================================================== * SESSION 10 v1.3.5 — Typography & formatting parity (Dan's review) * Source: /tmp/typo-audit/delta-report.md + Loom transcript flags. * Globals already updated in theme.json (h1/h2/h3 color + lh, button ls) * and tokens.css (--cc-ls-eyebrow 0.18em → 0.20em). * Below: per-pattern overrides + Dan's specific call-outs. * ======================================================================== */ /* --- Pass 2: Per-pattern hero H1 sizing --- * Test renders all H1s at 73.6px (4.6rem). Inner pages in proto use: * 67.2px (use-cases/features/for-suppliers/leadership), 57.6px (pricing), * 44.8px (demo — h2-sized "Book a Demo"). */ .cc-page-hero__h { font-size: clamp(2.4rem, 5.4vw, 4.2rem); letter-spacing: -0.04em; line-height: 1.04; } .cc-pricing-tiers .cc-page-hero__h, .page-id-527 .cc-page-hero__h { font-size: clamp(2rem, 4.8vw, 3.6rem); } .cc-demo .cc-page-hero__h, .cc-demo__h, .page-id-853 .cc-page-hero__h, .page-id-853 h1.wp-block-heading { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.08; letter-spacing: -0.04em; } /* --- Pass 2: CTA-banner heading is 57.6px in proto (vs default 44.8px) --- */ .cc-cta-banner__h, .cc-cta-banner h2.wp-block-heading { font-size: clamp(2.4rem, 4.5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.04em; } /* --- Pass 3: Larger H2 on /why-cadchat/ section heads (51.2px in proto). * Specificity bumped via .cc-section to override global `.cc-section h2`. */ .cc-section .cc-six-q__h, .cc-section .cc-vs__h, .cc-section .cc-plm__h, .cc-section .cc-what-changes__h, .cc-section .cc-replaces-mix__h { font-size: clamp(2.2rem, 4vw, 3.2rem) !important; line-height: 1.08 !important; letter-spacing: -0.035em !important; } /* --- Pass 3: by-audience-teaser cards (use-cases) — proto: 28px / 900, * not the 38.4 / 700 that h2 default produces. */ .cc-by-audience-teaser h2, .cc-by-audience-teaser h3, .cc-by-audience-teaser .wp-block-heading { font-size: 1.75rem; font-weight: 900; line-height: 1.20; letter-spacing: -0.025em; } /* --- Pass 3: Page-hero eyebrow is 14px / 0.18em (not the default 11px / 0.20em). * Inner-page hero eyebrows on prototype use the slightly larger size. */ .cc-page-hero .cc-eyebrow, .cc-features-hero .cc-eyebrow { font-size: 0.875rem; letter-spacing: 0.18em; line-height: 1.5; } /* --- Pass 3: Per-pattern eyebrow color variety. Proto uses thematic colors; * Test renders almost everything in --cc-color-brand-primary. Restore the * variety by per-pattern modifier classes (added in pattern PHP per section). */ /* The screenshare problem (six-q) + The old way (cc-vs) eyebrows are RED in proto. */ .cc-six-q__eyebrow, .cc-vs__eyebrow { color: #EF4444; } /* PLM coexists eyebrow is BLUE in proto (not the global purple). */ .cc-plm__eyebrow { color: var(--cc-color-action); } .cc-feat-section--canvas .cc-eyebrow, .cc-feat-section--canvas .cc-feat-section__eyebrow { color: var(--cc-color-action); } .cc-feat-section--documents .cc-eyebrow, .cc-feat-section--documents .cc-feat-section__eyebrow { color: var(--cc-color-brand-primary-deep); } .cc-feat-section--whiteboard .cc-eyebrow, .cc-feat-section--whiteboard .cc-feat-section__eyebrow { color: #E65100; } .cc-feat-section--meeting .cc-eyebrow, .cc-feat-section--meeting .cc-feat-section__eyebrow { color: #08919B; } .cc-feat-section--files .cc-eyebrow, .cc-feat-section--files .cc-feat-section__eyebrow { color: #A21CAF; } .cc-uc-section--drawing-reviews .cc-uc-section__eyebrow { color: var(--cc-color-action); } .cc-uc-section--supplier-collaboration .cc-uc-section__eyebrow { color: var(--cc-color-brand-primary-deep); } .cc-uc-section--manufacturing-handoff .cc-uc-section__eyebrow { color: #E65100; } .cc-uc-section--cross-functional-teams .cc-uc-section__eyebrow { color: #08919B; } .cc-uc-section--field-service .cc-uc-section__eyebrow { color: #A21CAF; } /* For-suppliers pillar eyebrows use the deep-purple thematic color. */ .cc-pillar--supplier .cc-pillar__eyebrow, body.page-id-1801 .cc-pillar__eyebrow { color: var(--cc-color-brand-primary-deep); } /* --- Pass 4: Per-pattern lead / body tweaks --- */ /* Why-cadchat hero lead is bigger than other pages (22.4px / lh 1.55) */ .cc-page-hero--why .cc-page-hero__lead, body.page-id-1645 .cc-page-hero__lead { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.55; } /* Six-questions card title — proto: 17.6px / fw 800 / -0.02em / lh 1.30 / #0F0F0F. * Specificity bumped via .cc-section to override global `.cc-section p`. */ .cc-section .cc-six-q__card-title { font-size: 1.1rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.30 !important; color: #0F0F0F !important; } /* Pillar quote text (leadership) — proto: 17px / lh 1.70 */ .cc-pillar__quote-text, .cc-pillar__body p { font-size: 1.0625rem; line-height: 1.70; } /* Pillar lead — bigger (20.8px) */ .cc-pillar__lead { font-size: 1.3rem; line-height: 1.60; } /* Pillar takeaway — proto has plain text (no bg card), tighter lh. * Matches the design decision D2: strip purple-fade bg per Dan / proto. */ .cc-pillar__takeaway { background: transparent !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; font-size: 1.25rem; line-height: 1.30; font-weight: 700; } /* Pricing tiers lead */ .cc-pricing-tiers__lead, .cc-pricing-tiers .cc-section__lead { font-size: 1.0625rem; line-height: 1.70; } /* For-suppliers hero lead is bigger (20.8px / lh 1.60) */ body.page-id-1801 .cc-page-hero__lead { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.60; } /* ======================================================================== * DAN'S VIDEO 1 FLAGS (specific call-outs) * ======================================================================== */ /* --- DAN-1: Test header is taller than proto. Tighten vertical padding. --- * v1.4.46: scoped to desktop — below 769px GeneratePress's standard mobile * header + .menu-toggle drawer own the layout (mobile audit Phase A). */ @media (min-width: 771px) { .site-header, .main-navigation, .main-nav, #site-navigation { padding-top: 4px; padding-bottom: 4px; } .site-header .inside-header, .site-header .grid-container, .main-navigation .inside-navigation, .main-navigation .main-nav { min-height: 56px; } } /* --- DAN-2: Nav menu items belong on LEFT (between logo and login pill). * GeneratePress defaults push the menu to the right — flip the flex ordering * so categories sit alongside the logo, login pill stays at far right. * v1.4.46: desktop-only (was breaking GP's stacked mobile drawer). */ @media (min-width: 771px) { .site-header .inside-header, .main-navigation .inside-navigation { display: flex; align-items: center; gap: 1.5rem; } .site-header .site-branding, .site-header .header-image, .site-header .site-logo { margin-right: 0; } .main-navigation, #site-navigation { margin-right: auto; /* push login pill to the right edge */ margin-left: 1rem; } .main-navigation .menu, .main-navigation .main-nav > ul { justify-content: flex-start; } } /* DAN-3 dropdown rules superseded by newer pixel-perfect blocks below (search: * "Dropdown card — match proto" + "MENU DROPDOWN CTA cells"). Keep only the * hover-title-color effect proto has: title goes purple on hover. */ .main-navigation .cc-has-mega > .sub-menu > li > a:hover .cc-menu-item__title { color: var(--cc-color-brand-primary, var(--cc-color-brand-primary)); } /* --- DAN-4: Wider container — proto layout is "wider, less squished". * Bump container max + narrow widths. */ :root { --cc-container-max: 1240px; --cc-container-narrow: 880px; } /* --- DAN-5: "More tools. Less tabs." — proto highlights "Less tabs" in purple. * Theme already supports this via h-accent pattern (page-hero pattern uses * .cc-page-hero__h-accent). Add .cc-more-tools__h-accent for parity, and * also add a generic .cc-h-accent utility for any heading. */ .cc-more-tools__h-accent, .cc-h-accent { color: var(--cc-color-brand-primary, var(--cc-color-brand-primary)); } /* --- DAN-6: More-tools tile hover glow. Match proto's "distinct line + glow". */ .cc-more-tools__tile:hover { transform: translateY(-2px); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.45); box-shadow: 0 0 0 1px rgb(from var(--cc-color-brand-primary) r g b / 0.30), 0 16px 40px rgb(from var(--cc-color-brand-primary) r g b / 0.18), 0 0 32px rgb(from var(--cc-color-brand-primary) r g b / 0.20); } /* --- DAN-7: cc-how transition. Test shows distinct line; proto blends bg. * Soften the boundary by gradient-fading the cc-how section into neighbors. */ .cc-how { background: linear-gradient(180deg, #FAFAFA 0%, #F5F0FF 50%, #FAFAFA 100%); } /* --- DAN-8: Steven Bietz inline-testimonial — extra quote marks, font/size, * name+title spacing. Tighten typography + spacing. */ .cc-inline-testimonial__quote::before, .cc-inline-testimonial__quote::after { content: ""; } .cc-inline-testimonial__quote { font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.4; } .cc-inline-testimonial__attribution { gap: 12px; } .cc-inline-testimonial__author { padding-left: 12px; } .cc-inline-testimonial__author-name { font-size: 14px; font-weight: 800; color: #0F0F0F; } .cc-inline-testimonial__author-role { font-size: 13px; color: #71717A; margin-top: 1px; } /* --- DAN-9: Logo-ticker space below "fewer meetings" subtext. Ensure ticker * has visible vertical breathing room and the marquee actually has height. */ .cc-tagline-strip + .cc-ticker-section, .cc-tagline-strip + section.cc-ticker-section { padding-block: clamp(36px, 5vw, 56px); } .cc-ticker-section .cc-ticker { min-height: 56px; } /* --- DAN-10: Login pill line-height (proto 21px = 14×1.5; Test 16.8 = 14×1.2). --- */ .main-navigation .menu > li.cc-cta-button > a, .main-navigation .menu > li.menu-item-cta > a { line-height: 1.5; } /* --- DAN-11: For-suppliers buttons — proto uses brand-primary-deep (var(--cc-color-brand-primary-deep)) * not action-blue. Override on for-suppliers page only. (Action-blue stays the * locked default for every other page per DECISIONS.md; this is a per-page * thematic override that matches the prototype's deep-purple supplier theme.) */ body.page-id-1801 .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--cc-color-brand-primary-deep); color: #FFFFFF; } body.page-id-1801 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: var(--cc-color-brand-primary-deep); } body.page-id-1801 .wp-block-button.is-style-outline .wp-block-button__link { color: var(--cc-color-brand-primary-deep); border-color: var(--cc-color-brand-primary-deep); background: transparent; } body.page-id-1801 .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: rgba(87, 43, 122, 0.08); } /* --- DAN-12: For-suppliers cta-banner — proto does NOT use brand variant. * Even when --brand class is on the section, render text in dark for parity. * (Alternative: remove --brand from the section block on the page directly; * this CSS handles either case to be safe.) */ body.page-id-1801 .cc-cta-banner.cc-section--brand .cc-cta-banner__h, body.page-id-1801 .cc-cta-banner.cc-section--brand h2.wp-block-heading { color: #1A1A2E; } body.page-id-1801 .cc-cta-banner.cc-section--brand .cc-cta-banner__lead, body.page-id-1801 .cc-cta-banner.cc-section--brand p { color: #52525B; opacity: 1; } body.page-id-1801 .cc-cta-banner.cc-section--brand { background: #FFFFFF; } /* --- BONUS: 'Open your native CAD files' h2 (ticker tagline) — proto uses * tighter letter-spacing -0.03em (vs default -0.035em) at 33.6px size. * Override via the ticker-section's pattern-specific class. */ .cc-ticker-section__h { letter-spacing: -0.03em; } /* --- BONUS: "Meet when it matters" / "More tools.Less tabs." h2 are the * "smaller h2" variant in proto (38.4px / fw 900 / lh 1.15 / -0.03em LS). * The cc-how and cc-more-tools sections use this size. */ .cc-how__h, .cc-how h2.wp-block-heading, .cc-more-tools__h, .cc-more-tools h2.wp-block-heading { font-size: clamp(2rem, 3.8vw, 2.4rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 900; color: #0F0F0F; } /* ======================================================================== * SESSION 10 v1.3.5 — Dan's videos 3 + 4 (why-cadchat, use-cases, features, * pricing). Adds ID-based per-section eyebrow colors, layout reversals, * full-width callouts, X-vs-check bullet pseudos, features hero/scrollspy/ * feat-section formatting, pricing reformat, footer cleanup. * ======================================================================== */ /* --- F1: Per-use-case eyebrow colors (ID-based — uses anchor IDs already * set on each uc-section block on /use-cases/ page 1809). */ #design-reviews .cc-uc-section__eyebrow { color: var(--cc-color-brand-primary); } #drawing-reviews .cc-uc-section__eyebrow { color: var(--cc-color-action); } #supplier-collaboration .cc-uc-section__eyebrow { color: var(--cc-color-brand-primary-deep); } #manufacturing-handoff .cc-uc-section__eyebrow { color: #E65100; } #cross-functional-teams .cc-uc-section__eyebrow { color: #08919B; } #field-service .cc-uc-section__eyebrow { color: #A21CAF; } #education .cc-uc-section__eyebrow { color: var(--cc-color-brand-primary); } /* --- DAN v3.1: what-changes bullets — proto uses ✗ for BEFORE column and * ✓ for AFTER column. Currently both use generic browser bullet markers. */ .cc-what-changes__list { list-style: none !important; padding-left: 0 !important; } .cc-what-changes__list li { position: relative; padding-left: 28px; color: #52525B; font-size: 15px; line-height: 1.6; padding-block: 4px; } .cc-what-changes__list li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: contain; } .cc-what-changes__list--before li::before { background-image: url("../img/icons/cc-css-40-cc-what-changes--list--before-li--befor.png"); } .cc-what-changes__list--after li::before { background-image: url("../img/icons/cc-css-41-cc-what-changes--list--after-li--before.png"); } /* --- DAN v3.2: PLM "is your system of record. CADchat is your collaboration * layer on top." needs to be BOLDER. Currently .cc-plm__sub uses font-size * 16px, regular weight. Bump to semibold. */ .cc-plm__sub { font-weight: 600; color: #1A1A2E; } /* --- DAN v3.4: CTA-banner is now default --brand (purple gradient). Ensure * the brand variant has white text + the "Or talk to our team" link visible. * Existing .cc-section--brand background gradient already in patterns.css, * but we need the text/lead/or-link to be white. */ .cc-cta-banner.cc-section--brand { background: linear-gradient(140deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary-deep) 100%); color: #FFFFFF; } .cc-cta-banner.cc-section--brand .cc-cta-banner__h { color: #FFFFFF; } .cc-cta-banner.cc-section--brand .cc-cta-banner__lead { color: rgba(255,255,255,0.85); } .cc-cta-banner.cc-section--brand .cc-cta-banner__or { color: rgba(255,255,255,0.75); } .cc-cta-banner.cc-section--brand .cc-cta-banner__or-link { color: #FFFFFF; } /* CTA-banner buttons on brand bg: outline + primary should be light/dark. */ .cc-cta-banner.cc-section--brand .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: #FFFFFF; color: var(--cc-color-brand-primary-deep); } .cc-cta-banner.cc-section--brand .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background-color: rgba(255,255,255,0.92); } .cc-cta-banner.cc-section--brand .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: #FFFFFF; border-color: #FFFFFF; } .cc-cta-banner.cc-section--brand .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: rgba(255,255,255,0.10); } /* --- DAN v3.5: Hide GeneratePress's footer-bar / "double footer" content row. * Per Dan's video: the bottom strip with "CADchat uses secure data encryption, * supports native formats from Onshape, PTC, Autodesk, Siemens, and more." + * LinkedIn/YouTube/Instagram icons should NOT appear — proto's footer is just * the cc-footer (logo + nav + lang switcher row). Hide GP's footer-widgets * + footer-bar, plus any default WP credits. */ .footer-widgets, .footer-bar, .gp-footer-bar, .site-info, .copyright-bar, .footer-credits { display: none !important; } /* --- DAN v3.6: Use-cases page hero — CENTERED + WHITE bg + needs CTA buttons. * Page-hero on /use-cases/ page 1809. Buttons need to be added via wp.data * post-install (page-hero pattern doesn't include them by default). */ body.page-id-1809 .cc-page-hero { background: #FFFFFF !important; text-align: center; } body.page-id-1809 .cc-page-hero__h, body.page-id-1809 .cc-page-hero__lead { text-align: center; margin-inline: auto; } /* --- DAN v3.7: Use-cases sections image-on-RIGHT (proto), text-on-LEFT. * Use ONLY the order property (not flex-direction:row-reverse) since * combining both reverses TWICE and lands back at source order. Default * flex direction (row) + order:2 on mockup pushes it RIGHT, order:1 on * story keeps it LEFT. */ .cc-uc-section__grid > .cc-uc-section__mockup { order: 2; } .cc-uc-section__grid > .cc-uc-section__story { order: 1; } @media (max-width: 899px) { .cc-uc-section__grid.wp-block-columns, .cc-uc-section__grid { flex-direction: column !important; } } /* --- IN PRACTICE callout (MicroStory) — proto-aligned tokens. * Source: use-cases-preview.html MicroStory component, line 2014. * maxWidth 1160 / margin 56px auto 0 / padding 28px 32px / * background rgb(from var(--cc-color-brand-primary) r g b / 0.04) / borderLeft 4px solid / * borderRadius 6px / eyebrow 11px var(--cc-color-brand-primary) marginBottom 16 / * scenario+outcome 15px #3F3F46 line-height 1.75 marginBottom 14 * * Block sits as sibling of cc-uc-section__grid inside cc-container so it * spans the full container width. Per-anchor accent color overrides the * default brand purple via [id] selectors below. */ .cc-uc-section__story-block { max-width: none !important; width: 100%; margin: 56px auto 0 !important; padding: 28px 32px !important; border-radius: 6px !important; border-left: 4px solid var(--cc-color-brand-primary) !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.04) !important; display: block !important; grid-template-columns: none !important; } .cc-uc-section__story-eyebrow { display: block !important; margin: 0 0 16px !important; white-space: normal !important; color: var(--cc-color-brand-primary) !important; letter-spacing: 0.20em !important; } .cc-uc-section__story-scenario, .cc-uc-section__story-outcome { display: block !important; font-size: 15px !important; line-height: 1.75 !important; color: #3F3F46 !important; margin: 0 0 14px !important; max-width: none !important; width: 100% !important; } .cc-uc-section__story-outcome { margin-bottom: 0 !important; } /* Per-section accent colors — match proto MicroStory color prop per anchor */ #design-reviews .cc-uc-section__story-block { border-left-color: var(--cc-color-brand-primary) !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.04) !important; } #design-reviews .cc-uc-section__story-eyebrow { color: var(--cc-color-brand-primary) !important; } #drawing-reviews .cc-uc-section__story-block { border-left-color: var(--cc-color-action) !important; background: rgba(0, 114, 186, 0.04) !important; } #drawing-reviews .cc-uc-section__story-eyebrow { color: var(--cc-color-action) !important; } #supplier-collaboration .cc-uc-section__story-block { border-left-color: var(--cc-color-brand-primary-deep) !important; background: rgba(87, 43, 122, 0.04) !important; } #supplier-collaboration .cc-uc-section__story-eyebrow { color: var(--cc-color-brand-primary-deep) !important; } #manufacturing-handoff .cc-uc-section__story-block { border-left-color: #E65100 !important; background: rgba(230, 81, 0, 0.04) !important; } #manufacturing-handoff .cc-uc-section__story-eyebrow { color: #E65100 !important; } #cross-functional-teams .cc-uc-section__story-block { border-left-color: #0891B2 !important; background: rgba(8, 145, 178, 0.04) !important; } #cross-functional-teams .cc-uc-section__story-eyebrow { color: #0891B2 !important; } #field-service .cc-uc-section__story-block { border-left-color: var(--cc-color-brand-primary) !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.04) !important; } #field-service .cc-uc-section__story-eyebrow { color: var(--cc-color-brand-primary) !important; } #education .cc-uc-section__story-block { border-left-color: #2563EB !important; background: rgba(37, 99, 235, 0.04) !important; } #education .cc-uc-section__story-eyebrow { color: #2563EB !important; } /* --- DAN v3.9: By-audience-teaser cards — RECTANGULAR (Test renders square). * Wider, less vertical, more horizontal. */ .cc-by-audience-teaser__grid, .cc-by-audience-teaser .wp-block-columns { grid-template-columns: repeat(2, 1fr); gap: 20px; } .cc-by-audience-teaser__card, .cc-by-audience-teaser .wp-block-column { min-height: 0; padding: 28px 32px; border-radius: 14px; } /* --- DAN v4.1: Features hero "Product Features" eyebrow — PURPLE not gray. */ .cc-features-hero .cc-eyebrow, .cc-features-hero__eyebrow, body.page-id-1811 .cc-page-hero .cc-eyebrow { color: var(--cc-color-brand-primary, var(--cc-color-brand-primary)) !important; } /* --- DAN v4.2 (removed v1.4.46): the even-spacing rules here targeted * `.cc-scrollspy-subnav__*`, classes that do not exist in the markup (real * prefix is `.cc-scrollspy__*`) — 100% dead CSS. The desktop even-spacing * intent is covered by the `body.page-id-1811 .cc-scrollspy__list` rules * later in this file; the mobile behavior (horizontal scroll + edge fade) * lives in the v1.4.46 mobile remediation section at the end. */ /* --- DAN v4.3: Features feat-section formatting: * - Title icons should be inline with bolded titles * - Fonts smaller / image bigger * - Per-feature accent colors */ .cc-feat-section__h { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.10; letter-spacing: -0.035em; font-weight: 900; color: #0F0F0F; } /* feat-section lead/sub — proto: 16px / lh 1.75 / #71717A. * Specificity bumped via .cc-section to override `.cc-section p` baseline. */ .cc-section .cc-feat-section__sub, .cc-section .cc-feat-section__lead { font-size: 16px !important; line-height: 1.75 !important; color: #71717A !important; } /* === Feat-section + uc-section grid widths — proto has maxWidth 1160. * theme.json contentSize is 820px which constrains the WP columns block, * so we explicitly widen here. Features uses 1fr/1.15fr ratio (alternating * 1.15fr/1fr for image-on-left), use-cases uses 1fr/1.4fr (mockup wider). * Source: features-preview.html line 3199, use-cases-preview.html line 2575. */ .cc-feat-section__grid.wp-block-columns, .cc-uc-section__grid.wp-block-columns { max-width: 1160px !important; width: 100% !important; margin-inline: auto !important; gap: 4rem !important; } @media (min-width: 900px) { /* Features: 1fr 1.15fr → copy 46.5% / mockup 53.5% */ .cc-feat-section__grid > .cc-feat-section__copy { flex-basis: 46.5% !important; flex-grow: 0 !important; } .cc-feat-section__grid > .cc-feat-section__mockup { flex-basis: 53.5% !important; flex-grow: 0 !important; } /* Use-cases: 1fr 1.4fr → story 41.7% / mockup 58.3% */ .cc-uc-section__grid > .cc-uc-section__story { flex-basis: 41.7% !important; flex-grow: 0 !important; } .cc-uc-section__grid > .cc-uc-section__mockup { flex-basis: 58.3% !important; flex-grow: 0 !important; } } /* feat-section h2 — proto: lh 1.08, color #1A1A2E */ .cc-feat-section__h { line-height: 1.08 !important; letter-spacing: -0.035em !important; color: #1A1A2E !important; margin: 14px 0 18px !important; } /* Feat-section highlight = proto FeatureHighlights component (matches use-cases). * 38×38 icon box on left + stacked title (14px / fw 700 / #18181B) + desc (13px / #71717A). */ .cc-section .cc-feat-section__highlights { display: flex !important; flex-direction: column !important; gap: 18px !important; margin: 8px 0 32px !important; padding: 0 !important; } .cc-section .cc-feat-section__highlight { display: flex !important; flex-direction: row !important; gap: 14px !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; position: relative !important; } .cc-section .cc-feat-section__highlight::before { content: '' !important; display: block !important; width: 38px !important; height: 38px !important; border-radius: 10px !important; background-color: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border: 1px solid rgb(from var(--cc-color-brand-primary) r g b / 0.16); background-image: url("../img/icons/cc-css-42-cc-section--cc-feat-section--highlight.png"); background-position: center; background-repeat: no-repeat; background-size: 18px 18px; flex-shrink: 0 !important; } .cc-section .cc-feat-section__highlight-title { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: #18181B !important; line-height: 1.4 !important; margin: 0 0 3px !important; gap: 0 !important; } .cc-section .cc-feat-section__highlight-title::before { display: none !important; } .cc-section .cc-feat-section__highlight-desc { font-size: 13px !important; line-height: 1.6 !important; color: #71717A !important; margin: 0 !important; } /* Per-section accent color on icon box */ #canvas .cc-feat-section__highlight::before { background-color: rgba(0,114,186,0.08); border-color: rgba(0,114,186,0.16); } #documents .cc-feat-section__highlight::before { background-color: rgba(87,43,122,0.08); border-color: rgba(87,43,122,0.16); } #whiteboard .cc-feat-section__highlight::before { background-color: rgba(230,81,0,0.08); border-color: rgba(230,81,0,0.16); } #meeting .cc-feat-section__highlight::before { background-color: rgba(8,145,178,0.08); border-color: rgba(8,145,178,0.16); } #files .cc-feat-section__highlight::before { background-color: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.16); } #dashboard .cc-feat-section__highlight::before { background-color: rgb(from var(--cc-color-brand-primary) r g b / 0.08); border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.16); } /* Per-section per-nth-child icons (22 unique SVGs from proto features-preview FeatureHighlights items) */ /* canvas — blue var(--cc-color-action) — 6 highlights: box / users / cube / pin / pen / split */ #canvas .cc-feat-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-43-canvas--cc-feat-section--highlight-nth.png"); } #canvas .cc-feat-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-44-canvas--cc-feat-section--highlight-nth.png"); } #canvas .cc-feat-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-45-canvas--cc-feat-section--highlight-nth.png"); } #canvas .cc-feat-section__highlight:nth-child(4)::before { background-image: url("../img/icons/cc-css-46-canvas--cc-feat-section--highlight-nth.png"); } #canvas .cc-feat-section__highlight:nth-child(5)::before { background-image: url("../img/icons/cc-css-47-canvas--cc-feat-section--highlight-nth.png"); } #canvas .cc-feat-section__highlight:nth-child(6)::before { background-image: url("../img/icons/cc-css-48-canvas--cc-feat-section--highlight-nth.png"); } /* documents — deep-purple var(--cc-color-brand-primary-deep) — 4 highlights: file / pen / pin / split */ #documents .cc-feat-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-49-documents--cc-feat-section--highlight-n.png"); } #documents .cc-feat-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-50-documents--cc-feat-section--highlight-n.png"); } #documents .cc-feat-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-51-documents--cc-feat-section--highlight-n.png"); } #documents .cc-feat-section__highlight:nth-child(4)::before { background-image: url("../img/icons/cc-css-52-documents--cc-feat-section--highlight-n.png"); } /* whiteboard — orange #E65100 — 3 highlights: pen / users / folder */ #whiteboard .cc-feat-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-53-whiteboard--cc-feat-section--highlight.png"); } #whiteboard .cc-feat-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-54-whiteboard--cc-feat-section--highlight.png"); } #whiteboard .cc-feat-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-55-whiteboard--cc-feat-section--highlight.png"); } /* meeting — cyan #0891B2 — 3 highlights: calendar / video / phone */ #meeting .cc-feat-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-56-meeting--cc-feat-section--highlight-nth.png"); } #meeting .cc-feat-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-57-meeting--cc-feat-section--highlight-nth.png"); } #meeting .cc-feat-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-58-meeting--cc-feat-section--highlight-nth.png"); } /* files — purple var(--cc-color-brand-primary) — 3 highlights: upload / arrow-back / search */ #files .cc-feat-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-59-files--cc-feat-section--highlight-nth-c.png"); } #files .cc-feat-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-60-files--cc-feat-section--highlight-nth-c.png"); } #files .cc-feat-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-61-files--cc-feat-section--highlight-nth-c.png"); } /* dashboard — purple var(--cc-color-brand-primary) — 3 highlights: folder / grid / users */ #dashboard .cc-feat-section__highlight:nth-child(1)::before { background-image: url("../img/icons/cc-css-62-dashboard--cc-feat-section--highlight-n.png"); } #dashboard .cc-feat-section__highlight:nth-child(2)::before { background-image: url("../img/icons/cc-css-63-dashboard--cc-feat-section--highlight-n.png"); } #dashboard .cc-feat-section__highlight:nth-child(3)::before { background-image: url("../img/icons/cc-css-64-dashboard--cc-feat-section--highlight-n.png"); } .cc-feat-section__mockup-frame { max-width: 700px; } /* Feat-section per-feature highlight icon color (inherits eyebrow color * via the per-section modifier classes). */ .cc-feat-section--canvas .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-65-cc-feat-section--canvas-------cc-feat-s.png"); } .cc-feat-section--documents .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-66-cc-feat-section--documents----cc-feat-s.png"); } .cc-feat-section--whiteboard .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-67-cc-feat-section--whiteboard---cc-feat-s.png"); } .cc-feat-section--meeting .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-68-cc-feat-section--meeting------cc-feat-s.png"); } /* --- DAN v4.4: Pricing tiers — formatting (alignment, bg, text size). * Constrain text-align: left to the actual TIER CARDS only — the toggle row, * hero, lead, and CTA banner all need to stay centered per proto. */ .cc-pricing-tiers, body.page-id-527 .cc-pricing__card { text-align: left; } /* CRITICAL: cc-pricing__card padding was 0px because patterns.css uses * `padding: var(--cc-space-8) var(--cc-space-7) var(--cc-space-6)` and * --cc-space-7 was undefined → invalid shorthand → falls to 0. * Force explicit proto-matching padding 36px 32px here. Source: * pricing-preview.html line ~2186 `padding:"36px 32px"`. */ body.page-id-527 .cc-pricing__card { padding: 36px 32px !important; gap: 12px !important; } /* === cc-testimonials homepage cards — proto: 3-card grid, small grayscale logo * (~24px tall) at right of author footer. WP was rendering logo at 734×162. * Source: landing-preview.html testimonials cards w/ logo {height:24, opacity:0.6, filter:grayscale(1)}. */ .cc-testimonials .cc-testimonial__author { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid #E4E4E7 !important; } .cc-testimonials .cc-testimonial__author > div:first-child, .cc-testimonials .cc-testimonial__author cite { display: flex !important; flex-direction: column !important; gap: 2px !important; } .cc-testimonials .cc-testimonial__author strong, .cc-testimonials .cc-testimonial__author .cc-testimonial__name { font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; font-style: normal !important; } .cc-testimonials .cc-testimonial__author .cc-testimonial__role, .cc-testimonials .cc-testimonial__author span { font-size: 12px !important; font-weight: 400 !important; color: #71717A !important; font-style: normal !important; } .cc-testimonials .cc-testimonial__author img { height: 28px !important; width: auto !important; max-width: 110px !important; max-height: 28px !important; object-fit: contain !important; filter: grayscale(1) !important; opacity: 0.6 !important; display: block !important; margin: 0 !important; } /* Quote text — proto: italic 17px lh 1.6 #3F3F46 with quote icon above */ .cc-testimonials .cc-testimonial__quote { font-size: 17px !important; font-weight: 400 !important; font-style: italic !important; color: #3F3F46 !important; line-height: 1.6 !important; margin: 0 0 0 !important; } /* Card spacing tighter per proto */ .cc-testimonials .cc-testimonial { padding: 32px !important; border-radius: 14px !important; background: #FAFAFA !important; border: 1px solid #E4E4E7 !important; box-shadow: none !important; } /* Override the broad body.page-id-527 from older versions if it's still in cache */ body.page-id-527 .cc-pricing-toggle, body.page-id-527 .cc-pricing-toggle * { text-align: center !important; } /* Center the toggle row + caption per proto (Annual [pill] Monthly stacked above caption) */ body.page-id-527 .cc-pricing-toggle .cc-container { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; } body.page-id-527 .cc-pricing-toggle__row { display: inline-flex !important; margin: 0 auto !important; } body.page-id-527 .cc-pricing-toggle__caption { text-align: center !important; width: auto !important; margin: 0 auto !important; } .cc-pricing-tiers .wp-block-columns { gap: 20px; align-items: stretch; } .cc-pricing-tiers .wp-block-column { border: 1px solid #E4E4E7; border-radius: 16px; padding: 32px 28px; background: #FFFFFF; } .cc-pricing-tiers__tier-name, .cc-pricing-tiers .wp-block-heading[class*="tier"] { font-size: 1.25rem; font-weight: 800; color: #0F0F0F; margin-bottom: 4px; } .cc-pricing-tiers__price { font-size: 2.4rem; font-weight: 900; color: #0F0F0F; letter-spacing: -0.04em; line-height: 1; } /* --- DAN v3.5b: Suppress qmark spans on inline-testimonial in case any * legacy stored block content still contains them after pattern PHP edit. */ .cc-inline-testimonial__qmark { display: none; } /* --- DAN v4.5: cc-problem section bg — proto homepage problem section uses * a slightly different lavender. Currently #EAE0F4. Bump to a richer shade * to better match. */ .cc-problem { background: #F0E6FA; } /* ======================================================================== * SESSION 10 v1.3.5 — Post-install audit fixes (round 2). * Hardcoded #1A1A2E heading colors that override theme.json's text-primary * default. Per proto: heroes + section heads on inner pages = #0F0F0F. * Headings inside white-bg "tagline" sections stay #1A1A2E. * ======================================================================== */ .cc-hero-landing__h, .cc-page-hero__h, .cc-plm__h, .cc-what-changes__h, .cc-by-audience__h, .cc-by-audience__card-h, .cc-qualifier__h, .cc-formats__h { color: #0F0F0F; } /* --- Brand variant CTA-banner h2 should be WHITE (overrides patterns.css * .cc-cta-banner__h color: text-heading). Use higher specificity. */ .cc-section.cc-cta-banner.cc-section--brand .cc-cta-banner__h, .cc-section.cc-cta-banner.cc-section--brand h2.wp-block-heading { color: #FFFFFF !important; } /* --- Inline-testimonial — kill ALL qmark span content, in addition to * display:none, so they don't take up flow space or affect line-height. */ .cc-inline-testimonial__qmark { display: none !important; font-size: 0 !important; line-height: 0 !important; } /* --- inline-testimonial quote text in proto: smaller (24.8px is too big), * tighter, dark color. Proto: ~22.4px / fw 700. Reset font-size override * because earlier rule was too generous. */ .cc-inline-testimonial__quote, .cc-inline-testimonial__quote p { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; line-height: 1.4; color: #1A1A2E; } /* --- More aggressive double-footer hiding (Dan video 3): kills any GP/legacy * footer rendering below cc-footer with secure-data-encryption strip + extra * social icons. Matches GP's various footer area class patterns. */ .footer-widgets-container, .footer-widgets-wrap, .gp-footer-area, #footer-widgets, .site-footer > .inside-site-info, .site-footer .footer-bar, .site-footer .footer-bar-active, .site-footer .footer-credits, body > .site-footer:not(:has(.cc-footer)), .site-info-wrap { display: none !important; } /* Ensure cc-footer is visible + properly placed (in case parent .site-footer * gets hidden by an over-aggressive rule above). */ .site-footer:has(.cc-footer), .site-footer .cc-footer { display: block !important; } /* --- Page-hero CTA buttons (added on use-cases via wp.data) — center the * button group below the lead. */ .cc-page-hero .cc-page-hero__cta, .cc-page-hero .wp-block-buttons { justify-content: center; margin-top: 24px; gap: 12px; } /* --- v1.3.7 fix: GeneratePress's `.inside-article` wrapper hardcodes white bg * which causes a visible color band where transparent sections (cc-video-hero) * sit between explicit-bg sections (cc-hero-landing #FAFAFA above, transparent * → white inside-article below). Make .inside-article transparent so body bg * (#FAFAFA) shows through and the hero blends seamlessly into the video. */ .inside-article, .inside-content-area, .inside-content { background: transparent !important; } /* ======================================================================== * SESSION 10 v1.3.7 — Full section-bg audit (Dan video re-review) * Source: /tmp/typo-audit/bg-audit.py side-by-side proto vs Test * Per-pattern bg fixes to restore proto's section-color rhythm. * ======================================================================== */ /* HOMEPAGE bg fixes */ .cc-formats { /* Proto: #FAFAFA bg with subtle border-bottom; Test was rendering white. */ background: #FAFAFA !important; } .cc-problem { /* Proto: #EAE0F4 lavender. v1.3.5 wrongly bumped to #F0E6FA — revert. */ background: #EAE0F4 !important; } .cc-inline-testimonial { /* Proto: #EAE0F4 lavender wraps the testimonial card. Currently white. */ background: #EAE0F4 !important; } /* More-tools should be WHITE (proto), but block has cc-section--alt class that * forces #FAFAFA. Override per-pattern. */ .cc-more-tools.cc-section--alt, .cc-more-tools { background: #FFFFFF !important; } /* cc-sec on homepage uses cc-sec--dark variant. Ensure dark bg renders even * if cc-section--alt or other classes interfere. */ .cc-sec.cc-sec--dark { background: #0F0F0F !important; color: #F4F4F5; } /* WHY-CADCHAT bg fixes */ .cc-hidden-cost { /* Proto: #FAFAFA. Test renders white. */ background: #FAFAFA !important; } .cc-plm { /* Proto: #F8F8FA. Test renders white. */ background: #F8F8FA !important; } /* The cc-replaces-mix on why-cadchat should be transparent (inherit body * #FAFAFA) but is rendering white. */ .cc-replaces-mix { background: transparent !important; } /* USE-CASES — v1.4.43 (Dan Issue 8): the proto striped use-cases 3/5/7, * which left Design + Drawing Reviews double-white at the top. Alternation * is now strict and driven by cc-section--alt classes in page content * (drawing-reviews / manufacturing-handoff / field-service striped); the * old anchor-ID stripe rule was removed. */ /* FEATURES — per-section stripes by anchor ID (modifier classes weren't * emitted on stored block content). Proto: documents + meeting alt-striped, * dashboard purple-fade. */ #documents, #meeting { background: #F8F8FA !important; } #dashboard { background: #F5EDFB !important; } /* FEATURES — per-feat-section thematic eyebrow colors (proto uses different * accent per feature section; we use anchor IDs since modifier classes aren't * on stored block content). */ #canvas .cc-eyebrow, #canvas .cc-feat-section__eyebrow { color: var(--cc-color-action); } #documents .cc-eyebrow, #documents .cc-feat-section__eyebrow { color: var(--cc-color-brand-primary-deep); } #whiteboard .cc-eyebrow, #whiteboard .cc-feat-section__eyebrow { color: #E65100; } #meeting .cc-eyebrow, #meeting .cc-feat-section__eyebrow { color: #08919B; } #files .cc-eyebrow, #files .cc-feat-section__eyebrow { color: #A21CAF; } #dashboard .cc-eyebrow, #dashboard .cc-feat-section__eyebrow { color: var(--cc-color-brand-primary); } /* Also color the highlight check-icons per section. */ #canvas .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-69-canvas------cc-feat-section--highlight.png"); } #documents .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-70-documents---cc-feat-section--highlight.png"); } #whiteboard .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-71-whiteboard--cc-feat-section--highlight.png"); } #meeting .cc-feat-section__highlight-title::before { background-image: url("../img/icons/cc-css-72-meeting-----cc-feat-section--highlight.png"); } /* ======================================================================== * SESSION 10 v1.4.0 — Visual scan fixes (overlap/alignment/icon issues) * ======================================================================== */ /* cc-how step number badges: shrink + lighten to match for-suppliers style. * Was a 32px solid blue/purple circle dominating the card head; proto uses * a small tinted square with the digit in the accent color. */ .cc-how__step-num { width: 28px !important; height: 28px !important; border-radius: 8px !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.10) !important; color: var(--cc-color-brand-primary) !important; font-size: 12px !important; line-height: 28px !important; font-weight: 700 !important; letter-spacing: 0; } .cc-how__mode--async .cc-how__step-num { background: rgba(0, 114, 186, 0.10) !important; color: var(--cc-color-action) !important; } /* Inline-testimonial quote + pillar role text should NOT be italic. * Pillar QUOTE TEXT itself IS italic per proto (leadership-preview MicroStory * line ~2014, fontStyle:italic on quote). Only nuke italics on author/role * lines and inline-testimonial. */ .cc-inline-testimonial__quote, .cc-inline-testimonial__quote *, .cc-pillar__author-role, .cc-pillar__author-role *, .cc-pillar__quote-co, .cc-pillar__quote-co * { font-style: normal !important; } /* === Pillar tokens — proto-aligned (leadership-preview.html) === * eyebrow 11px / fw 700 / var(--cc-color-brand-primary) / ls 0.2em / mb 18 * heading "h3" (cc-pillar__h) 28px / fw 800 / #1A1A2E / lh 1.08 / ls -0.035em / mb 14 * body 17px / #52525B / lh 1.70 (28.9) / mb 0 * takeaway 24px / fw 800 / #1A1A2E / ls -0.02em / lh 1.25 (30) / mb 20 * quote 17.6px / fw 500 / italic / #3F3F46 / lh 1.60 (28.16) / mb 24 * author/name 13px / fw 700 / #0F0F0F / lh 1.5 (19.5) / mb 0 * role/co 12px / fw 400 / #71717A / lh 1.5 (18) / mb 0 */ .cc-pillar__body, .cc-pillar__body p { font-size: 17px !important; line-height: 1.70 !important; font-weight: 400 !important; color: #52525B !important; margin-bottom: 0 !important; } .cc-pillar__takeaway { font-size: 24px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #1A1A2E !important; letter-spacing: -0.02em !important; margin: 0 0 20px !important; } .cc-pillar__quote-text { font-size: 17.6px !important; font-weight: 500 !important; font-style: italic !important; color: #3F3F46 !important; line-height: 1.60 !important; margin: 0 0 24px !important; } .cc-pillar__quote-author, .cc-pillar__author-name, .cc-pillar__quote strong, .cc-pillar__quote-text + p strong { font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; line-height: 1.5 !important; margin: 0 !important; } .cc-pillar__quote-co, .cc-pillar__author-role { font-size: 12px !important; font-weight: 400 !important; color: #71717A !important; line-height: 1.5 !important; margin: 2px 0 0 !important; } /* Eyebrows render LEFT-aligned in some sections because the parent container * doesn't have text-align: center and the eyebrow is display: inline-block. * Force these specific eyebrows to render block-level + centered. */ .cc-testimonials__eyebrow, .cc-sec.cc-sec--dark .cc-sec__eyebrow, .cc-vs__eyebrow, .cc-pillar__eyebrow { display: block !important; text-align: center !important; width: 100%; margin-left: auto; margin-right: auto; } /* cc-pillar eyebrow shouldn't be centered (it's left-aligned next to content * in the pillar layout). Revert that one. */ .cc-pillar__eyebrow { display: inline-block !important; text-align: left !important; width: auto; } /* cc-six-q section needs centering for eyebrow + sub: * - eyebrow "THE SCREENSHARE PROBLEM" was left-aligned, force centered * - sub text was italic + light, force normal style + slightly darker * Plus the h2 accent "multiplayer." should be DARK (text-primary), not purple * — proto renders both heading lines in the same dark color. */ .cc-six-q__eyebrow { display: block !important; text-align: center !important; width: 100%; margin-left: auto; margin-right: auto; } .cc-six-q__h-accent { color: #0F0F0F !important; } .cc-six-q__sub { font-style: normal !important; color: #52525B; text-align: center; } /* cc-six-q card ::before "?" icon overlaps text because the second override * at line ~1665 set padding: 28px 26px (no left padding for the icon). Proto * has no ? icon — kill it entirely. */ .cc-six-q__card::before { display: none !important; content: none !important; } /* Menu CTA cell rework — proto uses the NATURAL last item in each dropdown * (e.g. "Let's chat →") as a colored accent link at bottom-right, NOT a * separate full-width CTA cell. My v1.3.6 additions (1923/1924/1925) created * duplicates. Hide my additions, restore + style the natural last items. */ .menu-item-1923, /* was: "Don't see your use case? Let's chat →" — duplicate of 1853 */ .menu-item-1924, /* was: "Compare all plans →" — duplicate of 1866 */ .menu-item-1925 /* was: "Want to see it live? Book a Demo →" — duplicate of 1861 */ { display: none !important; } /* Natural CTA items per dropdown — proto-canonical footer row. * * Layout (proto landing-preview.html .uc-dropdown footer): * - Spans the full grid width (grid-column: 1 / -1) * - Top divider 1px solid #E4E4E7 (matches per-cell border style) * - Padding 14px 20px (proto exact) * - Right-aligned blue link (var(--cc-color-action)), 12px / 700 * - LEFT-side prefix text ("Don't see your use case?", "Want to see it live?", * "Need to compare plans?") added via ::before float-left in gray (#A1A1AA), * 12px / 500 — proto's footer uses flex space-between to put the question * on the left and the arrow link on the right. * * NB: per-cell border-right/border-bottom from nav.css would draw a vertical * line in the middle of the footer; override to none for these CTA rows. */ .menu-item-1853, /* Use Cases > "Let's chat →" */ .menu-item-1861, /* Features > "Book a demo →" */ .menu-item-1866 /* Plans & Pricing > "Compare all plans →" */ { display: list-item !important; grid-column: 1 / -1 !important; justify-self: stretch !important; background: #FFFFFF !important; /* white bg so the rounded card corners stay white */ border-right: 0 !important; border-bottom: 0 !important; } .menu-item-1853 > a, .menu-item-1861 > a, .menu-item-1866 > a { display: block !important; color: var(--cc-color-action) !important; background: transparent !important; font-weight: 700 !important; font-size: 12px !important; text-align: right !important; padding: 14px 20px !important; border: 0 !important; /* no border-top — 1px grid gap above provides divider */ border-radius: 0 !important; text-decoration: none !important; height: auto !important; overflow: hidden; /* contain the ::before float */ } /* Left-side prefix per dropdown — proto's "Don't see your use case?" etc. */ .menu-item-1853 > a::before { content: "Don't see your use case?"; float: left; color: #A1A1AA; font-weight: 500; } .menu-item-1861 > a::before { content: "Want to see it live?"; float: left; color: #A1A1AA; font-weight: 500; } .menu-item-1866 > a::before { content: "Need to compare plans?"; float: left; color: #A1A1AA; font-weight: 500; } .menu-item-1853 > a:hover, .menu-item-1861 > a:hover, .menu-item-1866 > a:hover { color: var(--cc-color-action-deep) !important; background: transparent !important; } /* Grid lines between mega-menu items — proto shows hairline #E4E4E7 * dividers between each cell. Use the gap-shows-bg-color trick: parent has * #E4E4E7 bg, items have white bg, 1px gap reveals the line color. */ /* Dropdown card styling moved to nav.css (canonical source). Old gray-bg+gap * implementation removed — proto uses per-cell border-right/bottom for the * grid lines, not a gap-reveal trick. nav.css owns all dropdown styling now. */ /* cc-what-changes h-accent — proto wants purple "Work in it." but it's * rendering black. Stronger selector to win over h2 color cascade. */ .cc-what-changes__h .cc-what-changes__h-accent, .cc-what-changes__h-accent, h2 .cc-what-changes__h-accent { color: var(--cc-color-brand-primary) !important; } /* More-tools Folder tile icon (lilac was almost invisible) — bump to brand * purple for visibility. */ .cc-more-tools__tile--lilac .cc-more-tools__icon { color: var(--cc-color-brand-primary) !important; } /* Caption text letter-spacing — should be NORMAL, was rendering wide because * the cc-eyebrow letter-spacing token was leaking via cascade in some cases. * Force these specific captions to normal. */ .cc-problem__caption, .cc-formats__caption, .cc-formats__lead, .cc-timezones__caption, .cc-timezones__sub { letter-spacing: normal !important; } /* WHY-CADCHAT — finer per-pattern bg fixes: * - cc-stat-strip should be WHITE not #FAFAFA (cc-section--alt default) * - cc-vs (uses cc-section--alt2 = #F8F8FA) should be #F4F4F5 * - cc-what-changes (uses cc-section--alt = #FAFAFA) should be #F4F4F5 */ .cc-stat-strip, .cc-stat-strip.cc-section--alt { background: #FFFFFF !important; } .cc-vs, .cc-vs.cc-section--alt2 { background: #F4F4F5 !important; } .cc-what-changes, .cc-what-changes.cc-section--alt { background: #F4F4F5 !important; } /* FOR-SUPPLIERS — alternating sections. Proto: hero #FAFAFA, steps white, * feat-cards #FAFAFA, sec white, cta-banner #FAFAFA (or brand purple now). */ body.page-id-1801 .cc-feat-cards, .cc-feat-cards { background: #FAFAFA !important; } body.page-id-1801 .cc-sec:not(.cc-sec--dark) { background: #FFFFFF !important; } /* CTA-banner brand variant: ensure the gradient bg-image actually renders * (computed bg-color is transparent because gradient is on bg-image; verify * gradient is set). Match the existing rule but with !important defense. */ .cc-section.cc-cta-banner.cc-section--brand { background-image: linear-gradient(140deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary-deep) 100%) !important; background-color: var(--cc-color-brand-primary) !important; } /* Section borders — proto uses no harsh borders between sections. Test had * GP defaults adding 1px border-color on borders (even if 0px width). Force * border-color to transparent so any inadvertent 1px border doesn't show. */ .cc-section, .cc-section--alt, .cc-section--alt2 { border-color: transparent; } /* Soft separator lines — proto has subtle 1px border-bottom on cc-formats and * a few other pivotal sections. Match by ensuring the existing border-color * matches proto's #E4E4E7 (not Test's GP-default rgb(63,63,70) heading color). */ .cc-formats { border-bottom: 1px solid #E4E4E7; } /* --- v1.3.7 fix: ticker logos must be STATIC in proto, not marquee-scrolling. * Disable the cc-ticker-scroll animation, hide the duplicate second-pass set * (aria-hidden by the pattern PHP), and center the visible logos. */ .cc-ticker__track { animation: none !important; justify-content: center; } .cc-ticker__item[aria-hidden="true"] { display: none !important; } .cc-ticker { mask-image: none; -webkit-mask-image: none; overflow: visible; } /* --- F4: more-tools tile additional accent colors + arrow link --- */ .cc-more-tools__tile--cyan .cc-more-tools__icon { color: #08919B; } .cc-more-tools__tile--deep-purple .cc-more-tools__icon { color: var(--cc-color-brand-primary-deep); } .cc-more-tools__tile--orange .cc-more-tools__icon { color: #E65100; } .cc-more-tools__tile--lilac .cc-more-tools__icon { color: #D4B5EC; } .cc-more-tools__tile { position: relative; padding-bottom: 56px; } .cc-more-tools__arrow { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #71717A; background: transparent; border: 1px solid #E4E4E7; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .cc-more-tools__tile:hover .cc-more-tools__arrow { color: #FFFFFF; background: var(--cc-color-brand-primary, var(--cc-color-brand-primary)); border-color: var(--cc-color-brand-primary, var(--cc-color-brand-primary)); transform: translateX(2px); } .cc-more-tools__tile--cyan:hover .cc-more-tools__arrow { background: #08919B; border-color: #08919B; } .cc-more-tools__tile--blue:hover .cc-more-tools__arrow { background: var(--cc-color-action); border-color: var(--cc-color-action); } .cc-more-tools__tile--deep-purple:hover .cc-more-tools__arrow { background: var(--cc-color-brand-primary-deep); border-color: var(--cc-color-brand-primary-deep); } .cc-more-tools__tile--orange:hover .cc-more-tools__arrow { background: #E65100; border-color: #E65100; } .cc-more-tools__tile--lilac:hover .cc-more-tools__arrow { background: var(--cc-color-brand-primary); border-color: var(--cc-color-brand-primary); } /* ============================================================ * Session 13 / v1.4.11 — comprehensive proto-vs-WP audit fixes * Source: /tmp/audit-deltas.md (8 pages probed via JS, 2026-05-01). * ============================================================ */ /* ---------- Homepage testimonials: carousel → 3-card grid ---------- * Proto landing-preview.html renders 3 cards side-by-side, each card * has a purple quote-icon SVG above the quote, italic 15px quote text, * border-top divider in the author footer with name+role left and * small grayscale logo right. Override Glide's inline transform/width * to flatten the carousel into a static 3-col grid. */ .cc-testimonials .glide__track { overflow: visible !important; } .cc-testimonials .glide__slides { transform: none !important; width: 100% !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; transition: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .cc-testimonials .glide__slide { width: auto !important; margin: 0 !important; height: auto !important; } .cc-testimonials .glide__slide--clone { display: none !important; } .cc-testimonials .glide__bullets, .cc-testimonials .glide__arrows { display: none !important; } /* v1.4.46 (mobile audit Phase B): the 3-across flatten above pinned ~90px * columns on phones. Stack single-column below 900px; the grid stays static * at every width (Glide is no longer enqueued — see inc/enqueue.php). */ @media (max-width: 899px) { .cc-testimonials .glide__slides { grid-template-columns: 1fr !important; gap: 20px !important; } } /* Card chrome — proto: white bg, 16px radius, 1px gray border, subtle shadow */ .cc-testimonials .cc-testimonial { padding: 32px 28px !important; border-radius: 16px !important; background: #FFFFFF !important; border: 1px solid #E4E4E7 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important; height: 100% !important; display: flex !important; flex-direction: column !important; margin: 0 !important; position: relative; } /* Quote icon ::before — proto purple var(--cc-color-brand-primary) opacity 0.18, 28×28 SVG */ .cc-testimonials .cc-testimonial::before { content: ""; display: block; width: 28px; height: 28px; margin-bottom: 12px; background-image: url("../img/icons/cc-css-73-cc-testimonials--cc-testimonial--before.png"); background-repeat: no-repeat; background-size: contain; opacity: 0.18; } /* Quote text — proto: 15px (not 17), color #27272A, lh 1.65, italic */ .cc-testimonials .cc-testimonial__quote { font-size: 15px !important; color: #27272A !important; line-height: 1.65 !important; font-style: italic !important; margin: 0 0 24px !important; flex: 1 1 0 !important; font-weight: 400 !important; } /* Author footer logo — proto: 22px (not 28), max-w 90px, opacity 0.65 */ .cc-testimonials .cc-testimonial__author img { height: 22px !important; max-width: 90px !important; max-height: 22px !important; opacity: 0.65 !important; } /* Tighter top border per proto */ .cc-testimonials .cc-testimonial__author { border-top: 1px solid #F4F4F5 !important; padding-top: 20px !important; margin-top: 0 !important; } /* Hide cc-testimonial__company span — proto only shows name + role on left */ .cc-testimonials .cc-testimonial__company { display: none !important; } /* Override Glide's stock max-width: 800px on .glide so cards have proto width. * Proto: 3 cards × ~380px + 2 × 28px gap ≈ 1200px container. */ .cc-testimonials .glide.cc-testimonials__glide, .cc-testimonials .glide { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } /* ---------- Homepage section padding deltas ---------- */ .cc-formats { padding-block: 72px !important; } .cc-how { padding-block: 100px !important; } body.home .cc-cta-banner { padding-block: 108px !important; } .cc-tagline-strip { background: transparent !important; padding-top: 0 !important; padding-bottom: 56px !important; border-top: none !important; } .cc-ticker-section { padding-block: 64px !important; } /* ---------- Homepage h2 deltas ---------- * Open your native CAD: lh 36.96 → 40.32 (1.2) * 9pm Zoom call: center → start, color #0F0F0F → #1A1A2E, add line break */ body.home .cc-formats__h, body.home .cc-formats h2 { line-height: 1.2 !important; color: #1A1A2E !important; } /* "Nobody wants the 9pm Zoom call." appears in cc-timezones section. * Fix alignment + color + line-break (line-break needs DB edit). */ body.home .cc-timezones h2, body.home .cc-timezones .cc-timezones__h { text-align: start !important; color: #1A1A2E !important; } /* ---------- /why-cadchat/ h2 fixes ---------- * "Screenshare isn't multiplayer." — fs 51.2 → 57.6, color #1A1A2E → #0F0F0F * "Meet. Scatter. Repeat." — color #1A1A2E → #0F0F0F (size 51.2 stays) * cc-six-q__h is the "Screenshare" one specifically. */ body.page-id-1645 .cc-six-q__h, body.page-id-1645 .cc-six-q h2 { /* v1.4.46: was fixed 57.6px at all widths; clamp hits exactly 57.6px * from 720px viewports up (desktop unchanged), fluid below. */ font-size: clamp(34px, 8vw, 57.6px) !important; color: #0F0F0F !important; line-height: 1.05 !important; } body.page-id-1645 .cc-vs__h, body.page-id-1645 .cc-vs h2, body.page-id-1645 .cc-what-changes__h, body.page-id-1645 .cc-what-changes h2, body.page-id-1645 .cc-plm__h, body.page-id-1645 .cc-plm h2 { color: #0F0F0F !important; } /* ---------- /use-cases/ ---------- * H2 in story col → left-aligned (was center), lh 1.08 (was 1.10) * cc-by-audience h2: 44.8 → 41.6, lh 47.84, color #1A1A2E * cc-uc-section .cc-container max-width: 1192 → 1160 (match grid) */ .cc-uc-section .cc-uc-section__story h2, .cc-uc-section .cc-uc-section__story .wp-block-heading { text-align: left !important; line-height: 1.08 !important; } .cc-uc-section .cc-container, .cc-uc-section > .wp-block-group.cc-container { max-width: 1160px !important; } body.page-id-1809 .cc-by-audience h2, body.page-id-1809 .cc-by-audience-teaser h2 { /* v1.4.46: fluid below ~694px viewports, exactly 41.6px above */ font-size: clamp(29px, 6vw, 41.6px) !important; line-height: 1.15 !important; color: #1A1A2E !important; } /* ---------- /features/ — alternate column order on even sections ---------- */ .cc-feat-section#documents .wp-block-columns, .cc-feat-section#meeting .wp-block-columns, .cc-feat-section#dashboard .wp-block-columns { flex-direction: row-reverse !important; } /* ---------- /pricing/ — full card chrome rebuild ---------- * Tier name (h3): 38.4 → 22px / fw 800 / #0F0F0F / -0.02em * Pro card: 2px purple border + glow shadow; $17 amount → purple var(--cc-color-brand-primary) * Top accent bar (4px) per tier (use ::before pseudo) * Enterprise lead "Looking for a custom plan?" → var(--cc-color-action) blue * /per text: 14 → 15px */ body.page-id-527 .cc-pricing__name, body.page-id-527 .cc-pricing__card .cc-pricing__name, body.page-id-527 .cc-pricing__card h3 { font-size: 22px !important; font-weight: 800 !important; color: #0F0F0F !important; letter-spacing: -0.02em !important; margin-bottom: 16px !important; line-height: 1.2 !important; } body.page-id-527 .cc-pricing__per { font-size: 15px !important; } /* Card overflow:hidden so top accent bar stays inside card radius */ body.page-id-527 .cc-pricing__card { overflow: hidden !important; position: relative !important; } /* Free top accent — gray */ body.page-id-527 .cc-pricing__card--free::before, body.page-id-527 #plan-free::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #A1A1AA; } /* Pro top accent — purple gradient */ body.page-id-527 .cc-pricing__card--pro::before, body.page-id-527 #plan-pro::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cc-color-brand-primary), var(--cc-color-brand-primary-deep)); } /* Enterprise top accent — blue gradient */ body.page-id-527 .cc-pricing__card--ent::before, body.page-id-527 .cc-pricing__card--enterprise::before, body.page-id-527 #plan-ent::before, body.page-id-527 #plan-enterprise::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--cc-color-action), #0891B2); } /* Pro popular tier emphasis */ body.page-id-527 .cc-pricing__card--pro, body.page-id-527 #plan-pro { border: 2px solid var(--cc-color-brand-primary) !important; box-shadow: 0 8px 40px rgb(from var(--cc-color-brand-primary) r g b / 0.12) !important; } body.page-id-527 .cc-pricing__card--pro .cc-pricing__amt, body.page-id-527 #plan-pro .cc-pricing__amt { color: var(--cc-color-brand-primary) !important; } /* MOST POPULAR badge (is-style-pill or .cc-pricing__badge) */ body.page-id-527 .cc-pricing__badge, body.page-id-527 .cc-pricing__card--pro .cc-pricing__name + .cc-pricing__badge, body.page-id-527 .cc-pricing__most-popular { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; color: var(--cc-color-brand-primary) !important; background: #F5F0FF !important; padding: 4px 12px !important; border-radius: 20px !important; font-family: var(--cc-font-mono, "DM Mono", monospace) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 1.2 !important; } /* Enterprise lead caption — blue */ body.page-id-527 .cc-pricing__card--ent .cc-pricing__lead, body.page-id-527 .cc-pricing__card--enterprise .cc-pricing__lead, body.page-id-527 #plan-ent .cc-pricing__lead, body.page-id-527 #plan-enterprise .cc-pricing__lead { font-size: 18px !important; font-weight: 700 !important; color: var(--cc-color-action) !important; } /* ---------- /contact-sales/ hero h1 color ---------- */ body.page-id-1641 .cc-page-hero__h, body.page-id-1641 .cc-demo h1 { color: #0F0F0F !important; } /* ---------- /for-suppliers/ ---------- * H2 sizes: 44.8 → 41.6 on cc-steps, cc-feat-cards, cc-sec * cc-feat-cards__grid: 2-col → 3-col */ body.page-id-1801 .cc-steps__h, body.page-id-1801 .cc-steps h2, body.page-id-1801 .cc-feat-cards__h, body.page-id-1801 .cc-feat-cards h2, body.page-id-1801 .cc-sec__h, body.page-id-1801 .cc-sec h2 { /* v1.4.46: fluid below ~694px viewports, exactly 41.6px above */ font-size: clamp(29px, 6vw, 41.6px) !important; line-height: 1.15 !important; } /* v1.4.46: desktop-only (was pinning 3 columns on phones) */ @media (min-width: 900px) { body.page-id-1801 .cc-feat-cards__grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ---------- /for-engineering-leaders/ ---------- * Pillar grid: 1.2fr/1fr → 1fr/1fr, gap 64 → 80, max-w 820 → 1100 * cc-qualifier h2: color #0F0F0F → #1A1A2E, lh 50.176, py 96/96 */ /* v1.4.46: desktop-only — the 1fr/1fr + 80px-gap lock produced ~130px * columns on phones; below 900px the pattern's own 1fr stack returns. */ @media (min-width: 900px) { body.page-id-1805 .cc-pillar__grid, body.page-id-1805 .cc-pillar > .wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; max-width: 1100px !important; margin-left: auto !important; margin-right: auto !important; } } body.page-id-1805 .cc-qualifier { padding-block: 96px !important; } body.page-id-1805 .cc-qualifier__h, body.page-id-1805 .cc-qualifier h2 { color: #1A1A2E !important; line-height: 1.15 !important; } /* Pillar logos — 24px tall grayscale 0.75 opacity in author area */ body.page-id-1805 .cc-pillar__quote img, body.page-id-1805 .cc-pillar__author img { height: 24px !important; max-height: 24px !important; width: auto !important; max-width: 130px !important; object-fit: contain !important; filter: grayscale(1) !important; opacity: 0.75 !important; display: block !important; margin-top: 8px !important; } /* ============================================================ * Session 14 / v1.4.13 — Dan Loom feedback rounds 1 + 2 * Source: Dan's video review notes captured in conversation * ============================================================ */ /* ---------- HEADER + NAV ---------- * Dan: header bar should be thinner; menu items belong on the LEFT * (right after CADchat logo) — currently floated right with login pill. * Proto header is ~65px tall (NAV element). WP currently 109px. * v1.4.46: desktop-only — margin-left:auto pushed Login off-screen in the * non-wrapping row on phones (mobile audit Phase A). */ @media (min-width: 771px) { .site-header, header.site-header { padding-block: 6px !important; min-height: 0 !important; } .site-header .inside-header, header.site-header .inside-header { padding-top: 6px !important; padding-bottom: 6px !important; } /* Push login pill RIGHT, keep menu items LEFT next to logo */ .main-navigation { margin-left: 24px !important; margin-right: 0 !important; } .main-navigation .menu, .main-navigation > div > ul { justify-content: flex-start !important; } /* If nav uses inline-flex with auto-margins, force menu items to bunch left */ .main-navigation .menu > li:not(:last-child) { margin-right: 0 !important; } /* Login pill stays on the far right via auto margin on the LAST nav item */ .main-navigation .menu > li.cc-menu-item--cta:last-child, .main-navigation .menu > li:last-child { margin-left: auto !important; } } /* ---------- TAGLINE STRIP ---------- * Dan: more space between H2 and subtext. Proto: 20px mt on lead. */ .cc-tagline-strip__lead { margin-top: 20px !important; } /* ---------- TICKER ---------- * Dan: add vertical line dividers between logos (currently logos just float side-by-side). * Proto: 1×24 div with bg #E4E4E7 between each logo. */ .cc-ticker .cc-ticker__logo, .cc-ticker__logos > *, .cc-ticker img:not(:last-child) { position: relative; } .cc-ticker img:not(:last-child)::after, .cc-ticker .cc-ticker__logo:not(:last-child)::after { content: ""; display: inline-block; width: 1px; height: 24px; background: #E4E4E7; margin-left: 32px; margin-right: 32px; vertical-align: middle; } /* Simpler approach: use border-right on every img except last */ .cc-ticker img, .cc-ticker__logo { padding-right: 32px; margin-right: 32px; border-right: 1px solid #E4E4E7; } .cc-ticker img:last-child, .cc-ticker__logo:last-child { border-right: none; padding-right: 0; margin-right: 0; } /* ---------- STEVEN BIETZ INLINE-TESTIMONIAL ---------- * Dan: add quote marks (purple) around the quote, tighten name/role spacing. * Proto: quote 27.2px fw 600 with purple "" spans; name 13px mb 0; role 12px. */ .cc-inline-testimonial__quote::before { content: "\201C"; /* opening curly quote */ color: var(--cc-color-brand-primary); font-weight: 700; } .cc-inline-testimonial__quote::after { content: "\201D"; /* closing curly quote */ color: var(--cc-color-brand-primary); font-weight: 700; } .cc-inline-testimonial__quote, .cc-inline-testimonial .wp-block-quote p, .cc-inline-testimonial blockquote p { font-size: 27.2px !important; font-weight: 600 !important; line-height: 1.3 !important; color: #0F0F0F !important; margin-bottom: 28px !important; } .cc-inline-testimonial__name, .cc-inline-testimonial cite strong, .cc-inline-testimonial blockquote + p strong { font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; margin-bottom: 0 !important; display: block; } .cc-inline-testimonial__role, .cc-inline-testimonial cite, .cc-inline-testimonial blockquote + p { font-size: 12px !important; color: #71717A !important; margin-top: 0 !important; font-style: normal !important; } /* ---------- cc-how MODE HEAD: pill + caption side-by-side ---------- * Dan: subtext should be to the RIGHT of the LIVE/ASYNC pill, not underneath. * Proto: flex row, gap 10px, badge inline-flex pill, caption inline 13px gray. */ .cc-how__mode-badge { display: inline-block !important; vertical-align: middle !important; margin-bottom: 24px !important; margin-right: 10px !important; } .cc-how__mode-caption { display: inline !important; vertical-align: middle !important; font-size: 13px !important; color: #71717A !important; margin: 0 0 24px 0 !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; } /* ---------- cc-more-tools TILES ---------- * Dan rounds 1 + 2: icons should all be PURPLE (not per-tile colored), Threads * needs a RED DOT, action phrase + arrow should be INLINE and PURPLE, tiles * should be MORE RECTANGULAR (less tall). * Proto: SVG icon 28×28 with rgb(from var(--cc-color-brand-primary) r g b / 0.12) bg + var(--cc-color-brand-primary) stroke; * tag "CORE VIEWER" + arrow inline, both var(--cc-color-brand-primary). */ .cc-more-tools__tile { padding-bottom: 20px !important; } .cc-more-tools__icon { color: var(--cc-color-brand-primary) !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.12); padding: 6px; border-radius: 8px; width: 36px !important; height: 36px !important; box-sizing: content-box; } /* Override any per-tile color CSS from earlier sessions */ .cc-more-tools__tile--cyan .cc-more-tools__icon, .cc-more-tools__tile--blue .cc-more-tools__icon, .cc-more-tools__tile--purple .cc-more-tools__icon, .cc-more-tools__tile--deep-purple .cc-more-tools__icon, .cc-more-tools__tile--orange .cc-more-tools__icon, .cc-more-tools__tile--lilac .cc-more-tools__icon { color: var(--cc-color-brand-primary) !important; background: rgb(from var(--cc-color-brand-primary) r g b / 0.12) !important; } /* Threads tile — red dot indicator on icon */ .cc-more-tools__tile--purple .cc-more-tools__icon, .cc-more-tools__tile:has(h3:where(.cc-more-tools__name)):has(h3:where(:contains("Threads"))) .cc-more-tools__icon { position: relative; } /* Use simpler nth-of-type fallback for browsers without :has — Threads is the 3rd tile in the proto order */ .cc-more-tools__grid > .cc-more-tools__tile--purple .cc-more-tools__icon::after, .cc-more-tools__grid > .cc-more-tools__tile:nth-child(3) .cc-more-tools__icon::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #EF4444; border: 2px solid #FFFFFF; } /* Action phrase + arrow inline, both purple */ .cc-more-tools__tag, .cc-more-tools__tile .cc-more-tools__tag { display: inline-block !important; vertical-align: middle !important; color: var(--cc-color-brand-primary) !important; font-weight: 700 !important; margin-right: 8px !important; margin-bottom: 0 !important; } .cc-more-tools__arrow, .cc-more-tools__tile .cc-more-tools__arrow { display: inline-flex !important; vertical-align: middle !important; color: var(--cc-color-brand-primary) !important; background: transparent !important; border-color: var(--cc-color-brand-primary) !important; } .cc-more-tools__arrow svg { stroke: var(--cc-color-brand-primary) !important; color: var(--cc-color-brand-primary) !important; } /* ---------- cc-sec--dark ---------- * v1.4.13 attempted to add a "CC" mark above the SECURITY & GOVERNANCE eyebrow * per Dan's "missing logo above" callout, but the inline SVG rendered as `< CC >` * chevron-text which looked worse than the proto (which has no logo there). * v1.4.23: removed the pseudo-element. */ .cc-sec.cc-sec--dark .cc-sec__lead-supplier, .cc-sec.cc-sec--dark .cc-sec__lead { font-size: 17px !important; color: #A1A1AA !important; margin-bottom: 48px !important; } .cc-sec.cc-sec--dark .cc-sec__body, .cc-sec.cc-sec--dark .cc-sec__item p { font-size: 12.5px !important; color: #A1A1AA !important; line-height: 1.5 !important; } .cc-sec.cc-sec--dark .cc-sec__h3 { font-size: 14px !important; font-weight: 700 !important; color: #FFFFFF !important; } /* Trust center button — text + arrow inline, purple, target=_blank icon */ .cc-sec.cc-sec--dark a[href*="trust.cadchat.com"], .cc-sec.cc-sec--dark .cc-sec__trust-cta a, .cc-sec.cc-sec--dark .wp-block-button__link[href*="trust"] { color: var(--cc-color-brand-primary) !important; font-weight: 700 !important; } .cc-sec.cc-sec--dark a[href*="trust.cadchat.com"][target="_blank"]::after, .cc-sec.cc-sec--dark .cc-sec__trust-cta a[target="_blank"]::after { content: " \2197"; /* North-East arrow indicating new tab */ display: inline-block; margin-left: 4px; color: var(--cc-color-brand-primary); } /* ---------- cc-cta-banner BUTTONS (Dan R2) ---------- * Dan: darker purple bg; "Book a Demo" → blue bg + white text; "Get Started Free" * → white bg + blue border + blue text; "Talk to our team" → underline + smaller * (text link); "No credit card required" smaller. */ .cc-cta-banner.cc-section--brand, .cc-cta-banner { background: linear-gradient(135deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary-deep) 100%) !important; } /* Primary: BLUE button (overrides previous white default) */ .cc-cta-banner .wp-block-button.is-style-action .wp-block-button__link, .cc-cta-banner .wp-block-button:not(.is-style-action-outline):not(.is-style-outline) .wp-block-button__link { background: var(--cc-color-action) !important; color: #FFFFFF !important; border: 2px solid var(--cc-color-action) !important; } /* Secondary: outline blue button */ .cc-cta-banner .wp-block-button.is-style-action-outline .wp-block-button__link, .cc-cta-banner .wp-block-button.is-style-outline .wp-block-button__link, .cc-cta-banner .wp-block-button--outline .wp-block-button__link { background: #FFFFFF !important; color: var(--cc-color-action) !important; border: 2px solid var(--cc-color-action) !important; } /* "Talk to our team" / "Or" text + smaller "no credit card" */ .cc-cta-banner__or, .cc-cta-banner .cc-cta-banner__or-link { font-size: 13px !important; color: rgba(255, 255, 255, 0.85) !important; } .cc-cta-banner__or-link { text-decoration: underline !important; color: #FFFFFF !important; } .cc-cta-banner__lead, .cc-cta-banner .cc-cta-banner__lead { font-size: 12px !important; color: rgba(255, 255, 255, 0.7) !important; } /* ---------- /why-cadchat/ DELTAS (Dan R2) ---------- * cc-replaces-mix: gradient bg + bold text * cc-vs "Repeat" word: should be black (currently colored) * cc-what-changes: red X's → gray X's * cc-hidden-cost: title smaller, body bigger * Bold "In meetings that don't work" — needs DB edit */ body.page-id-1645 .cc-replaces-mix { background: linear-gradient(135deg, #F4EDFF 0%, #E8F0FF 100%) !important; } body.page-id-1645 .cc-replaces-mix p, body.page-id-1645 .cc-replaces-mix .cc-replaces-mix__copy { font-weight: 700 !important; color: #0F0F0F !important; } /* Make X's gray (override the v1.3.5 red X SVG) */ body.page-id-1645 .cc-what-changes__list--before li::before { background-image: url("../img/icons/cc-css-74-body-page-id-1645--cc-what-changes--list.png") !important; } /* cc-hidden-cost — smaller title, bigger body */ body.page-id-1645 .cc-hidden-cost__h, body.page-id-1645 .cc-hidden-cost h2 { /* v1.4.46: fluid below ~699px viewports, exactly 38.4px above */ font-size: clamp(28px, 5.5vw, 38.4px) !important; line-height: 1.15 !important; } body.page-id-1645 .cc-hidden-cost__lead, body.page-id-1645 .cc-hidden-cost p:not(.cc-eyebrow) { font-size: 20px !important; line-height: 1.6 !important; } /* MENU DROPDOWN CTA styling moved to nav.css (canonical source). */ /* ============================================================ * Session 14 / v1.4.14 — Dan-feedback corrective ship * Reasons: flex parent blockified inline-block children; wrong * selectors on cc-inline-testimonial author name/role; header * min-height + logo size still too tall; cc-hidden-cost h2 selector. * ============================================================ */ /* ---------- HEADER: actually shrink to ~65px ---------- * v1.4.46: desktop-only (mobile header height is GP's own). Logo cap below * stays global — a 40px logo cap is right on phones too. */ @media (min-width: 771px) { .site-header .inside-header, header.site-header .inside-header { min-height: 40px !important; padding-top: 4px !important; padding-bottom: 4px !important; } } .site-header .site-logo img, .site-branding img, .header-image img, .navigation-branding img { max-height: 40px !important; height: auto !important; width: auto !important; } /* ---------- cc-how MODE: grid layout (badge+caption row, steps row) ---------- * Issue: parent .cc-how__mode is flex-column, which "blockifies" child * inline-block/inline-flex per the flexbox spec. Convert to grid so badge * and caption can sit on the same row. */ .cc-how__mode { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-areas: "badge caption" "steps steps" !important; column-gap: 10px !important; row-gap: 24px !important; flex-direction: initial !important; } .cc-how__mode-badge { grid-area: badge !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; align-self: center !important; width: auto !important; } .cc-how__mode-caption { grid-area: caption !important; display: inline-block !important; align-self: center !important; margin: 0 !important; font-size: 13px !important; color: #71717A !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; } .cc-how__steps { grid-area: steps !important; } /* ---------- cc-more-tools TILE: grid layout (tag + arrow same row) ---------- * Same blockification issue. Convert tile to grid with tag+arrow on bottom row. */ .cc-more-tools__tile { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "icon icon" "name name" "desc desc" "tag arrow" !important; row-gap: 12px !important; flex-direction: initial !important; align-items: start !important; } .cc-more-tools__icon { grid-area: icon !important; align-self: start !important; } .cc-more-tools__name { grid-area: name !important; margin: 0 !important; } .cc-more-tools__desc { grid-area: desc !important; margin: 0 !important; } .cc-more-tools__tag { grid-area: tag !important; align-self: center !important; justify-self: start !important; margin: 0 !important; color: var(--cc-color-brand-primary) !important; } .cc-more-tools__arrow { grid-area: arrow !important; align-self: center !important; justify-self: end !important; margin: 0 !important; } /* ---------- Steven Bietz inline-testimonial — CORRECT selectors ---------- * Pattern uses .cc-inline-testimonial__author-name (p with strong) and * .cc-inline-testimonial__author-role (p). Earlier selectors targeted * __name/__role which don't exist. */ .cc-inline-testimonial__author-name, .cc-inline-testimonial__author-name strong { font-size: 13px !important; font-weight: 700 !important; color: #0F0F0F !important; margin: 0 !important; line-height: 1.3 !important; } .cc-inline-testimonial__author-role { font-size: 12px !important; color: #71717A !important; margin: 2px 0 0 0 !important; line-height: 1.4 !important; font-style: normal !important; font-weight: 400 !important; } /* Logo above the author name — tighter spacing */ .cc-inline-testimonial__attribution { gap: 16px !important; align-items: center !important; } .cc-inline-testimonial__logo img { height: 28px !important; max-height: 28px !important; width: auto !important; max-width: 110px !important; object-fit: contain !important; filter: grayscale(1) !important; opacity: 0.65 !important; } /* ---------- cc-hidden-cost h2 — correct selector ---------- */ body.page-id-1645 .cc-hidden-cost__h, body.page-id-1645 .cc-hidden-cost .wp-block-heading { /* v1.4.46: fluid below ~699px viewports, exactly 38.4px above */ font-size: clamp(28px, 5.5vw, 38.4px) !important; line-height: 1.15 !important; } /* ============================================================ * Session 14 / v1.4.15 — second corrective ship * - cc-more-tools tile col2 (auto) was sizing to 0px because earlier rows * span both cols, so auto col had no content reference. Fix by giving it * explicit minmax + force tag/arrow row to align. * - Header still 97px because content (logo div, menu items, login pill) * has tall line-height. Cap line-height + actually shrink to ~65px. * - cc-cta-banner subtext styling for "Up and running in under 5 minutes" * ============================================================ */ /* cc-more-tools tile: explicit auto col sizing */ .cc-more-tools__tile { grid-template-columns: 1fr minmax(40px, max-content) !important; } /* Pull tag + arrow into one explicit grid row at the bottom */ .cc-more-tools__tile { grid-template-rows: auto auto 1fr auto !important; } .cc-more-tools__tag, .cc-more-tools__arrow { min-height: 32px !important; display: inline-flex !important; align-items: center !important; } /* Header — actually thin (v1.4.16: probe found NAV element 64px, * menu with 8px vert padding. Shrink to ~65px total to match proto). * v1.4.46: desktop-only — the 4px paddings crushed mobile tap targets to * ~21px and shrank the .menu-toggle hit area (mobile audit Phase A). */ @media (min-width: 771px) { .site-header, header.site-header { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .site-header .inside-header, header.site-header .inside-header { min-height: 32px !important; padding-top: 4px !important; padding-bottom: 4px !important; align-items: center !important; } /* Strip NAV wrapper's own padding */ .site-header nav.main-navigation, .main-navigation.stuckElement { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* Menu link vertical padding 8 → 4 (was making nav 36px tall) */ .site-header .main-navigation .menu > li > a, .main-navigation .menu > li > a, .main-navigation .navigation-branding, .main-navigation .menu-toggle { line-height: 1.4 !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* v1.4.62: the li:last-child Login-pill padding override is GONE — the * pill itself is gone (Login is a text link since v1.4.61; the header * CTA is .cc-header-cta). nav.css owns the demoted link's padding. */ } /* ============================================================ * v1.4.18 — header pixel-perfect alignment to proto * Deltas closed (probe-confirmed): * - Logo x: 96 → 180 (proto centers via max-width container) * - Menu link fw: 600 → 500 (proto) * - Menu link color: #3F3F46 → #52525B (proto) * - Menu link padding: tighter (h goes 28 → 21) * - Login pill: padding 6→10 vert, h goes 32→41 * - Inside-header max-width: 1160px centered (was full 1432) * - BG alpha: 1.0 → 0.94 with backdrop blur (proto) * ============================================================ */ /* v1.4.46: entire v1.4.18 header block scoped to desktop. The * `display:flex !important` at the end defeated BOTH of GP's mobile drawer * states (collapsed AND .toggled open) — the single worst mobile-nav bug * (mobile audit Phase A). Zero-padding menu links also crushed tap targets. */ @media (min-width: 771px) { .site-header, header.site-header { background: rgba(250, 250, 250, 0.94) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } .site-header .inside-header, header.site-header .inside-header { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } /* Menu links — match proto fw 500, color #52525B, NO horizontal padding (gap on UL provides spacing) */ .site-header .main-navigation .menu > li > a, .main-navigation .menu > li > a { font-weight: 500 !important; color: #52525B !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; line-height: 1.5 !important; } /* Proto spacing: 28px gap between menu items (proto: ul flex column-gap 28px) */ .site-header .main-navigation .menu, .site-header .main-navigation > div > ul, .main-navigation .menu, .main-navigation .sf-menu { column-gap: 28px !important; } /* v1.4.66/67: below 1200px the 28px gaps overflow the row — Login wrapped * onto a second line at 800-999 (all langs) and in the 1100-1199 compact- * pill belt for the longer FR/ES/DE label sets (ES even at 1000). * Compact the gaps across 771-1199 → one row from 900px up (EN/DE/PT; * FR/ES from ~950); below that the wrap is retained but vertically * centered (accepted narrow-band tradeoff, flagged 2026-09-09). * v1.4.67: band was shipped as max-width 999px by mistake — the belt * half of the fix never applied; widened to 1199px as measured. * Must live AFTER the 28px rule — same selectors + !important, later * wins. */ @media (min-width: 771px) and (max-width: 1199px) { .site-header .main-navigation .menu, .site-header .main-navigation > div > ul, .main-navigation .menu, .main-navigation .sf-menu { column-gap: 12px !important; } .main-navigation .inside-navigation { gap: 10px; } } /* Push the last (Login) item to the far right — the flex tail anchor. * v1.4.62: its `> a` padding/colour override is GONE (this was the * position-keyed WHITE that made the demoted v1.4.61 Login text link * invisible — the pill lives on as .cc-header-cta, not a menu item). */ .main-navigation .menu > li:last-child { margin-left: auto !important; } /* Make sure menu container is flex so margin-left:auto works */ .main-navigation .menu, .main-navigation > div > ul, .main-navigation .sf-menu { display: flex !important; align-items: center !important; width: 100% !important; } } /* ============================================================ * v1.4.22 — Session 15 Phase 2 (Dan-feedback closure round) * Probe-driven deltas closed: * - cc-six-q cards: white → alternating light-pink + light-purple bgs (proto) * - reveal-on-scroll: subtle scale-up + fade-in when in viewport * - cc-how broken mockup PNGs (404): hide instead of showing 2px boxes * - h1 color on /contact-sales/: #1A1A2E → #0F0F0F (proto) * - /for-engineering-leaders/ pillar h2: #1A1A2E → #0F0F0F (proto) * - Homepage h2 lh nudges (49.28 → 51.52 on 2 specific h2s) * ============================================================ */ /* cc-six-q cards — proto colors (alternating pink/purple-light to evoke Dan's * "orange and purple light background" callout). Proto uses light pink for * red-toned cards and light purple gradient for the better-way card. */ .cc-six-q__card { background: #FFFFFF; } .cc-six-q__card:nth-of-type(1), .cc-six-q__card:nth-of-type(2), .cc-six-q__card:nth-of-type(4), .cc-six-q__card:nth-of-type(5) { background: #FFF8F8 !important; border-color: rgba(239, 68, 68, 0.15) !important; } .cc-six-q__card:nth-of-type(3), .cc-six-q__card:nth-of-type(6) { background: linear-gradient(145deg, #F5F0FF 0%, #EAE4FF 100%) !important; border-color: rgb(from var(--cc-color-brand-primary) r g b / 0.18) !important; } /* Reveal-on-scroll: small fade+scale when section enters viewport. * .reveal-on-scroll starts dimmer & slightly scaled-down; .in-view returns to 1.0. * JS that toggles .in-view is added in inc/enqueue.php as inline footer script. */ .reveal-on-scroll { opacity: 0.65; transform: translateY(12px) scale(0.985); transition: opacity 0.6s cubic-bezier(.2,.8,.2,1), transform 0.6s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform; } .reveal-on-scroll.is-revealed, .reveal-on-scroll.in-view { opacity: 1; transform: translateY(0) scale(1); /* v1.4.46: release the GPU layer once revealed — a permanent will-change * on every section costs a compositor layer each on low-end phones. */ will-change: auto; } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } } /* cc-how mockup figures — 3 PNGs are 404 (hiw-live-1-meeting / -2-canvas / * -3-threads). Hide broken images entirely until v1.4.25 ships proper inline * SVG mockups. Detect via figure with img that has 0 natural dimensions via * :has selector — fallback: just hide all hiw-live PNGs. */ .cc-how__step-mockup img[src*="hiw-live-1-meeting"], .cc-how__step-mockup img[src*="hiw-live-2-canvas"], .cc-how__step-mockup img[src*="hiw-live-3-threads"] { display: none !important; } /* Make figure collapse to 0 if its only img is hidden */ .cc-how__step-mockup:has(img[src*="hiw-live-1-meeting"]), .cc-how__step-mockup:has(img[src*="hiw-live-2-canvas"]), .cc-how__step-mockup:has(img[src*="hiw-live-3-threads"]) { display: none !important; } /* /contact-sales/ h1 color */ body.page-id-549 .cc-page-hero__h, body.page-id-549 main h1, .cc-demo h1, .cc-demo__h { color: #0F0F0F !important; } /* /for-engineering-leaders/ pillar h2 color */ body.page-id-1805 .cc-pillar h2, body.page-id-1805 .cc-pillar__h { color: #0F0F0F !important; } /* Homepage h2 lh nudge — proto uses 51.52 (1.15 lh) for these two specific h2s. * v1.4.46: unitless 1.15 — identical at desktop (44.8px × 1.15 = 51.52px) but * scales with the fluid clamp() size on phones instead of gapping hugely. */ .cc-problem h2, .cc-testimonials h2, .cc-testimonials__h { line-height: 1.15 !important; } /* ============================================================ * v1.4.23 — cc-vs graphic redesign (5-step sequence + arrows + result + with-CADchat) * Source: why-cadchat-preview.html * ============================================================ */ .cc-vs__steps { display: flex !important; align-items: center !important; justify-content: center !important; gap: 16px !important; flex-wrap: nowrap !important; max-width: 1080px !important; margin: 0 auto 40px !important; padding: 0 !important; } .cc-vs__step { flex: 1 1 0 !important; min-width: 140px !important; background: #FFFFFF !important; border: 1.5px solid #E4E4E7 !important; border-radius: 14px !important; padding: 20px 16px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; } .cc-vs__step-icon { width: 40px; height: 40px; border-radius: 10px; background: #FFF7ED; display: flex; align-items: center; justify-content: center; } .cc-vs__step-label { font-size: 13px !important; font-weight: 800 !important; color: #0F0F0F !important; margin: 0 !important; line-height: 1.3 !important; } .cc-vs__step-sub { font-size: 11px !important; color: #71717A !important; margin: 0 !important; line-height: 1.5 !important; } .cc-vs__step-arrow { flex-shrink: 0; } .cc-vs__result { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important; border: 1.5px solid rgba(239, 68, 68, 0.18) !important; border-radius: 14px !important; padding: 24px 28px !important; max-width: 720px !important; margin: 0 auto 28px !important; text-align: center !important; } .cc-vs__result-eyebrow { color: #EF4444 !important; margin: 0 0 12px !important; } .cc-vs__result-text { font-size: 17px !important; color: #0F0F0F !important; font-weight: 600 !important; margin: 0 0 4px !important; line-height: 1.5 !important; } .cc-vs__with { background: linear-gradient(135deg, #F5F0FF 0%, #EAE4FF 100%) !important; border: 1.5px solid rgb(from var(--cc-color-brand-primary) r g b / 0.20) !important; border-radius: 14px !important; padding: 28px 32px !important; max-width: 720px !important; margin: 0 auto !important; text-align: center !important; } .cc-vs__with-eyebrow { color: var(--cc-color-brand-primary) !important; margin: 0 0 12px !important; } .cc-vs__with-h { font-size: 24px !important; font-weight: 800 !important; color: #0F0F0F !important; margin: 0 0 8px !important; line-height: 1.2 !important; } .cc-vs__with-h-accent { color: var(--cc-color-brand-primary); } .cc-vs__with-text { font-size: 15px !important; color: #52525B !important; margin: 0 !important; line-height: 1.5 !important; } /* ============================================================ * v1.4.24 — cc-plm graphic redesign (audience badges with circle icons + 2-layer stack) * Source: why-cadchat-preview.html * ============================================================ */ .cc-plm__audience { display: flex !important; justify-content: center !important; gap: 24px !important; flex-wrap: wrap !important; max-width: 700px !important; margin: 0 auto 48px !important; } .cc-plm__audience-item { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } .cc-plm__audience-icon { width: 40px; height: 40px; border-radius: 50%; background: #F5F0FF; border: 1.5px solid rgb(from var(--cc-color-brand-primary) r g b / 0.25); display: flex; align-items: center; justify-content: center; } .cc-plm__audience-label { font-size: 10px; font-weight: 600; color: var(--cc-color-brand-primary); font-family: var(--cc-font-mono, "DM Mono", monospace); letter-spacing: 0.05em; text-transform: uppercase; } .cc-plm__stack { display: flex !important; flex-direction: column !important; gap: 0 !important; max-width: 600px !important; margin: 0 auto !important; position: relative !important; } .cc-plm__layer { border-radius: 14px !important; padding: 24px 28px !important; text-align: center !important; position: relative !important; } .cc-plm__layer--top { background: linear-gradient(135deg, var(--cc-color-brand-primary) 0%, var(--cc-color-brand-primary-deep) 100%) !important; color: #FFFFFF !important; box-shadow: 0 4px 20px rgb(from var(--cc-color-brand-primary) r g b / 0.25) !important; z-index: 2 !important; margin-bottom: -6px !important; } .cc-plm__layer--top .cc-plm__layer-eyebrow, .cc-plm__layer--top .cc-plm__layer-label, .cc-plm__layer--top .cc-plm__layer-caption { color: #FFFFFF !important; } .cc-plm__layer--top .cc-plm__layer-eyebrow { color: rgba(255, 255, 255, 0.85) !important; } .cc-plm__layer--bottom { background: #F8F8FA !important; border: 1.5px solid #E4E4E7 !important; padding-top: 32px !important; } .cc-plm__layer-eyebrow { margin: 0 0 8px !important; letter-spacing: 0.20em !important; } .cc-plm__layer-label { font-size: 22px !important; font-weight: 800 !important; color: #0F0F0F !important; margin: 0 0 8px !important; line-height: 1.2 !important; } .cc-plm__layer-caption { font-size: 13px !important; color: #52525B !important; margin: 0 !important; line-height: 1.5 !important; } /* ============================================================ * v1.4.22 — cc-more-tools icon-wrap + red dot (replaces fragile nth-child pseudo) * ============================================================ */ .cc-more-tools__icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgb(from var(--cc-color-brand-primary) r g b / 0.12); border-radius: 8px; color: var(--cc-color-brand-primary); margin-bottom: 8px; } .cc-more-tools__icon-wrap .cc-more-tools__icon { background: transparent !important; padding: 0 !important; width: 22px !important; height: 22px !important; box-sizing: content-box !important; } /* Red dot indicator inside the icon-wrap (Threads tile) — replaces v1.4.13 nth-child pseudo */ .cc-more-tools__icon-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #EF4444; border: 2px solid #FAFAFA; z-index: 2; } /* If the new icon-wrap exists, suppress the older nth-child red dot pseudo from v1.4.13 */ .cc-more-tools__tile:has(.cc-more-tools__icon-wrap) .cc-more-tools__icon::after { display: none !important; content: none !important; } /* v1.4.20 — make inside-header flex so nav can flex-grow to fill space. * Without this, NAV is only as wide as its content (654px), so margin-left:auto * on the Login pill has no free space to consume. * v1.4.46: desktop-only (GP's mobile header manages its own row layout). */ @media (min-width: 771px) { .site-header .inside-header, header.site-header .inside-header { display: flex !important; align-items: center !important; gap: 32px !important; } .site-header nav.main-navigation:not(.mobile-menu-control-wrapper), .main-navigation:not(.mobile-menu-control-wrapper) { flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: auto !important; width: auto !important; } .main-navigation .main-nav { width: 100% !important; } } /* cc-cta-banner sub-paragraph (Up and running in under 5 minutes) — emphasis line under main h2 */ .cc-cta-banner__sub, .cc-cta-banner .cc-cta-banner__sub { font-size: 18px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.95) !important; margin: 8px 0 24px 0 !important; text-align: center !important; } /* ============================================================ * Pricing page bottom CTA — match proto pricing-preview.html section * "Not sure what plan is best for you?" + outline "Book a Demo" button. * Replaces the old "Up and running in under 5 minutes" cc-cta-banner. * ============================================================ */ .cc-pricing-bottom-cta { padding: 64px 24px !important; background: #FFFFFF !important; border-top: 1px solid #E4E4E7 !important; text-align: center !important; } .cc-pricing-bottom-cta__row { max-width: 700px !important; margin: 0 auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 32px !important; } .cc-pricing-bottom-cta__text { font-size: 16px !important; color: #52525B !important; margin: 0 !important; line-height: 1.6 !important; flex: 1 1 auto; min-width: 0; text-align: left; } .cc-pricing-bottom-cta__btn .wp-block-button__link { font-size: 14px !important; font-weight: 700 !important; color: var(--cc-color-action) !important; background: transparent !important; border: 1.5px solid var(--cc-color-action) !important; padding: 12px 28px !important; border-radius: 8px !important; white-space: nowrap !important; transition: all 0.2s !important; text-decoration: none !important; } .cc-pricing-bottom-cta__btn .wp-block-button__link:hover { background: var(--cc-color-action) !important; color: #FFFFFF !important; } /* ============================================================================ * MIGRATED FROM CUSTOMIZER -> ADDITIONAL CSS (moved into the theme 2026-06-01) * -------------------------------------------------------------------------- * Everything below previously lived ONLY in the Test database * (Appearance -> Customize -> Additional CSS), 2026-05-26..2026-06-01. * Moved here so it is version-controlled and ships with the theme zip. * Appended at the END of patterns-extra.css to preserve the original * "loads last" cascade these overrides rely on. Original date-stamped * authoring comments are kept inline. * * NOTE: the display:none section-hides below are INTENTIONAL and REVERSIBLE * (homepage cc-timezones/cc-more-tools/cc-sec--dark; why-cadchat * cc-hidden-cost/cc-vs). Delete a rule to restore that section. Graham to * revisit whether to delete the underlying blocks entirely. * ============================================================================ */ /* 2026-05-26: Spotlight tiles flat render for transparent PNG mockups */ .cc-feat-anim__frame { background-color: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } /* 2026-05-26: Center page-hero eyebrow */ .cc-page-hero__eyebrow { display: block !important; } /* === 2026-05-26 Marketing leader feedback (Phase 1, reversible). Each rule independent: delete a rule to restore that section. === */ /* --- v1.4.54: the "HIDE cc-timezones" rule was REMOVED — Graham chose to * DELETE the hidden homepage sections outright (2026-08-24), so the blocks * are gone from content and the hide would only booby-trap a future * re-insert of the timezones pattern. --- */ /* TRIM Feature Spotlight 83: keep viewer/access/collab, hide the other 5 */ .cc-feat-anim:has(img[src*="fa-comments"]), .cc-feat-anim:has(img[src*="fa-3draw"]), .cc-feat-anim:has(img[src*="fa-drawings"]), .cc-feat-anim:has(img[src*="fa-splitscreen"]), .cc-feat-anim:has(img[src*="fa-whiteboard"]) { display: none !important; } /* 2026-05-27: Widen cc-timezones grid + larger SVG map */ .cc-timezones__grid { max-width: 1100px !important; } .cc-timezones svg { max-width: 600px !important; } /* 2026-05-27: Higher-specificity widen for cc-timezones grid */ .cc-timezones .cc-timezones__grid { max-width: 1100px !important; } /* 2026-05-27: Brute-force specificity for timezones grid widen */ body.page-id-1645 .cc-timezones .cc-timezones__grid { max-width: 1100px !important; } body.page-id-1645 .cc-timezones .cc-timezones__grid > .wp-block-column { flex-basis: 50% !important; } /* 2026-05-27: Unhide LIVE REVIEW mockup images in cc-how (theme had display:none which blocked lazy-load) */ .cc-how__mode--live .cc-how__step-mockup, .cc-how__mode--live .cc-how__step-mockup img { display: block !important; } /* 2026-05-27: HIGHER specificity to unhide LIVE REVIEW mockups */ .cc-how .cc-how__mode--live .wp-block-image.size-large.cc-how__step-mockup, .cc-how .cc-how__mode--live .wp-block-image.size-large.cc-how__step-mockup img { display: block !important; } /* --- v1.4.54: the cc-more-tools and cc-sec--dark homepage hide rules were * REMOVED — the sections were deleted from all 5 homepage languages * (Graham, 2026-08-24; restore via WP revisions). Patterns stay available * and would now render normally if ever re-inserted. --- */ /* 2026-05-27: Fix invisible button text in cc-sec--dark (was purple-on-purple) */ .cc-sec--dark a.wp-block-button__link, .cc-sec--dark .wp-block-button__link { color: #ffffff !important; } /* 2026-05-27: Force white text on cc-sec--dark CTA button (theme color was purple-on-purple) */ body.page-id-1805 .cc-sec--dark a.wp-block-button__link.wp-element-button, body.page-id-1805 .cc-sec--dark .wp-block-button__link { color: #ffffff !important; } /* 2026-05-27 — close 7px white gap between cc-problem and cc-inline-testimonial (both share lavender bg; gap shows body off-white) */ body.home .cc-problem + .cc-inline-testimonial { margin-top: -8px; } /* 2026-05-28 — sticky-header offset for the cc-problem bridge link to the How-It-Works section. Deliberately NOT using smooth scrolling on the root — it silently breaks Chrome fragment navigation on long jumps; the instant jump is reliable. */ #how-it-works { scroll-margin-top: 90px; } /* 2026-05-28 — even out primary-nav spacing. The dropdown caret sits in a 44px .dropdown-menu-toggle box (padding 10px/20px) which inflated the visual gap after "Use Cases"/"Features" vs the caret-less "Why CADchat". Tighten on desktop so the caret hugs its label and inter-item gaps read uniform. (Left at default below 769px so the mobile tap target is unaffected.) */ @media (min-width: 771px) { .main-navigation .menu-item-has-children > a .dropdown-menu-toggle { padding-left: 6px !important; padding-right: 0 !important; } } /* 2026-05-28 — /features/ hero: subtext sat flush (0px) under the large "Work on CAD. Together." H1 (heading margin-bottom:0 + lead margin-top:0). Add breathing room. */ .cc-features-hero__lead { margin-top: 22px !important; } /* 2026-05-28 — Nav items flush with the bar. GeneratePress defaults gave nav links a grey-100 (hover/focus) / grey-050 (current) background that reads as an off-color box against the near-white header bar. Force transparent in all states so items always match the bar; mega-menu open + cursor pointer provide the interaction feedback. * v1.4.55 (CC-04): the Login pill (li.cc-cta-button) is now EXEMPT — this * rule was stripping its blue fill on hover (white text on a transparent * header = the button "disappeared"). nav.css already exempted it; this rule * re-applied the transparency with !important and won. */ .main-navigation .main-nav ul li:not([class*="current-menu-"]):not(.cc-cta-button):hover > a, .main-navigation .main-nav ul li:not([class*="current-menu-"]):not(.cc-cta-button):focus > a, .main-navigation .main-nav ul li:not(.cc-cta-button)[class*="current-menu-"] > a, .main-navigation .main-nav ul li:not(.cc-cta-button) > a:hover, .main-navigation .main-nav ul li:not(.cc-cta-button) > a:focus { background-color: transparent !important; } /* 2026-05-28 — Trust Center button arrow. The ↗ is a ::after pseudo with its own color: brand-purple (= button bg), so it was invisible. The earlier white-text fix only set the anchor color, not the pseudo. Force the pseudo white. */ body.page-id-1805 .cc-sec--dark .wp-block-button__link::after { color: #ffffff !important; } /* 2026-05-28 — /use-cases/ section body text was centered (cc-uc-section__lead has has-text-align-center) while the eyebrow, heading, and feature rows in the same left column are left-aligned — so the lead read as indented/misaligned in all 7 sections. Left-align to match the column. (Features-page leads were already left-aligned; this brings Use Cases in line.) */ .cc-uc-section .cc-uc-section__lead { text-align: left !important; } /* 2026-05-28 — /features/ two-column sections: the grid was align-items:normal (stretch), so the mockup sat top-aligned while the text column defined the height. Center the columns vertically so the image is centered against the text (alternating left/right layout preserved). */ .cc-feat-section .cc-feat-section__grid { align-items: center !important; } /* 2026-05-28 — /features/ hero tab bar (scrollspy): was max-width:820px centered with tabs packed left. Make it span full width and distribute the 6 tabs evenly so it reads like the app’s tab bar under the hero mockup. */ body.page-id-1811 .cc-scrollspy { max-width: none !important; } body.page-id-1811 .cc-scrollspy .cc-container { max-width: none !important; } /* v1.4.46: desktop-only — space-between + forced width squeezed the six * nowrap pills into the viewport with no scroll affordance on phones. */ @media (min-width: 900px) { body.page-id-1811 .cc-scrollspy__list { justify-content: space-between !important; width: 100% !important; } } /* --- v1.4.54: the why-cadchat cc-hidden-cost/cc-vs hide rule was REMOVED — * both sections were deleted from all 5 why-cadchat languages (Graham, * 2026-08-24; the 2026-05-28 rationale — problem repetition/whiplash — * became permanent). Restore via WP revisions if ever needed. --- */ /* 2026-05-28 — Why CADchat background rhythm. Top sections were all white (flat) and the testimonial was a lone lavender band. Alternate soft-gray (#f4f4f5, matches cc-what-changes) and white down the page so adjacent sections separate cleanly; brand purple stays reserved for the CTA. Testimonial set white (its card has its own border+shadow) so it alternates against the gray What-Changes above. */ body.page-id-1645 .cc-stat-strip { background-color: #f4f4f5 !important; } body.page-id-1645 .cc-timezones { background-color: #f4f4f5 !important; } body.page-id-1645 .cc-replaces-mix { background-color: #ffffff !important; } /* 2026-05-28 — /why-cadchat/ testimonial sat with padding-top:0, so its card was flush on the gray→white section boundary (shadow bled into the gray section above). Add top padding (matches its 100px bottom) so the card sits centered within its own white section, clear of the break line. */ body.page-id-1645 .cc-inline-testimonial { padding-top: 100px !important; } /* 2026-05-28 — /features/ feature rows: .cc-feat-section__highlight was align-items:flex-start, so each single-line label sat at the TOP of its taller icon box (off-center vs the icon). Center the icon + text vertically. Covers all feature rows across the page. */ body.page-id-1811 .cc-feat-section__highlight { align-items: center !important; } /* 2026-05-28 — /features/ feature-row titles: a long label ("Pins, snapshots & markup", 177px) was being squeezed in the flex row and wrapped to 2 awkward lines. Keep titles on one line; the description takes the remaining space and wraps. (Titles are short labels — no overflow risk.) */ body.page-id-1811 .cc-feat-section__highlight-title { white-space: nowrap; flex-shrink: 0; } /* 2026-05-28 — /features/ feature rows: stack description UNDER the title (was icon|title|desc side-by-side, which read ragged when titles/descs varied in length). Grid: icon (::before) in col 1 spanning both rows + centered; title col2/row1; desc col2/row2. Consistent rows regardless of copy length. Supersedes the earlier nowrap patch (#59) — kept harmless. */ body.page-id-1811 .cc-feat-section__highlight { display: grid !important; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 3px; } body.page-id-1811 .cc-feat-section__highlight::before { grid-row: 1 / span 2; grid-column: 1; align-self: center; } body.page-id-1811 .cc-feat-section__highlight-title { grid-column: 2; grid-row: 1; } body.page-id-1811 .cc-feat-section__highlight-desc { grid-column: 2; grid-row: 2; } /* === Files-section feature-row icons: replace clipped theme PNGs (cc-css-59/60/61) with crisp inline SVG (Feather icons from prototype). Added 2026-05-28. === */ body.page-id-1811 #files .cc-feat-section__highlights > .cc-feat-section__highlight:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239346CF%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27%2F%3E%3Cpolyline%20points%3D%2717%208%2012%203%207%208%27%2F%3E%3Cline%20x1%3D%2712%27%20y1%3D%273%27%20x2%3D%2712%27%20y2%3D%2715%27%2F%3E%3C%2Fsvg%3E") !important; } body.page-id-1811 #files .cc-feat-section__highlights > .cc-feat-section__highlight:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239346CF%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%271%204%201%2010%207%2010%27%2F%3E%3Cpath%20d%3D%27M3.51%2015a9%209%200%201%200%202.13-9.36L1%2010%27%2F%3E%3C%2Fsvg%3E") !important; } body.page-id-1811 #files .cc-feat-section__highlights > .cc-feat-section__highlight:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%239346CF%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%278%27%2F%3E%3Cline%20x1%3D%2721%27%20y1%3D%2721%27%20x2%3D%2716.65%27%20y2%3D%2716.65%27%2F%3E%3C%2Fsvg%3E") !important; } /* === Features feature-row: tighten title↔subtext gap. Rows inherited WP block-gap (14px) + title margin (3px) = ~17px, floating subtext from its title. row-gap !important pulls each pair together (icon stays centered). All sections, for consistency. 2026-05-28. === */ body.page-id-1811 .cc-feat-section__highlight { row-gap: 2px !important; } /* === Use Cases feature rows → stacked grid layout, matching the Features page (icon col1 centered across both rows; title row1; subtext row2; tight row-gap). Original was a flex ROW (icon|title|desc) so descriptions started at ragged x across rows. 2026-05-28. === */ body.page-id-1809 .cc-uc-section__highlight { display: grid !important; grid-template-columns: auto 1fr; column-gap: 14px !important; row-gap: 2px !important; align-items: center; } body.page-id-1809 .cc-uc-section__highlight::before { grid-row: 1 / span 2; grid-column: 1; align-self: center; } body.page-id-1809 .cc-uc-section__highlight-title { grid-column: 2; grid-row: 1; } body.page-id-1809 .cc-uc-section__highlight-desc { grid-column: 2; grid-row: 2; } /* === Use Cases proof band ("From the field") — distinct soft-lavender moment between gray Education + white By-Audience; white equal-height cards, purple mono tags. 2026-05-28. === */ /* (cc-uc-proof rules removed v1.4.73 — the "From the field" section was * deleted from all 5 use-cases pages per Dan/Graham 2026-09-17.) */ /* === Features hero mockup: PNG is 1280x480 native but was rendering ~1933px wide (1.5x upscale → pixelated). Cap below native + center so it's sharp and not oversized. 2026-05-28. === */ body.page-id-1811 .cc-features-hero__mockup { max-width: 1040px !important; margin-left: auto !important; margin-right: auto !important; } body.page-id-1811 .cc-features-hero__mockup img { width: 100%; height: auto; } /* Features final-CTA payoff line (white lead-in above headline on purple gradient banner) */ body.page-id-1811 .cc-cta-banner__payoff { color: rgba(255,255,255,0.9); font-size: 18px; line-height: 1.55; margin: 0 0 16px; } /* Features scrollspy sticky offset: the 2026-05-28 page-id-1811 patch * (top 65/97px) was folded into the base .cc-scrollspy-wrap rules in * v1.4.46 so ALL languages get the correct offset — removed here. */ /* === Plans & Pricing: per-tier "who it's for" descriptor + "no credit card" reassurance under CTAs. 2026-05-28 === */ body.page-id-527 .cc-pricing__forwho { color:#71717A; font-size:13px; line-height:1.4; margin:2px 0 4px; } body.page-id-527 .cc-pricing__nocc { color:#a1a1aa; font-size:12px; margin:12px 0 0; } /* Plans & Pricing: align the 3 CTAs on one baseline. Buttons use margin-top:auto, but the "No credit card" line under Free/Pro lifts their buttons 42px above Enterprise's (which has no such line). Reserve matching space under the Enterprise button. 2026-05-28 */ body.page-id-527 .cc-pricing__card--ent .wp-block-buttons, body.page-id-527 .cc-pricing__card--pro .wp-block-buttons { margin-bottom: 42px !important; } /* Plans & Pricing: hero eyebrow was display:inline-block inside a text-align:start container, so it sat left. Make it block so its own center alignment takes effect. 2026-05-28 */ body.page-id-527 .cc-eyebrow { display: block; text-align: center; } /* Plans & Pricing: make Enterprise positioning line match the Free/Pro "who it's for" descriptors (was blue 18px bold caption → gray 13px regular). 2026-05-28 */ body.page-id-527 .cc-pricing__caption { color: #71717A !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; } /* Plans & Pricing bottom CTA: put the button to the RIGHT of the sentence (was stacking). 2026-05-28 */ body.page-id-527 .cc-pricing-bottom-cta__row { flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; max-width: 860px !important; } body.page-id-527 .cc-pricing-bottom-cta__text { margin: 0; flex: 0 1 auto; } /* Plans & Pricing billing toggle: labels were transparent w/ a dark hover (looked weird). Make them white pills, purple on hover + when selected; mark the middle pill clickable. 2026-05-28 */ body.page-id-527 .cc-pricing-toggle__btn { background:#fff !important; color:#52525B !important; border:1px solid #E4E4E7 !important; border-radius:8px !important; transition: background .15s, color .15s, border-color .15s; } body.page-id-527 .cc-pricing-toggle__btn:hover { background:#fff !important; color:var(--cc-color-brand-primary) !important; border-color:var(--cc-color-brand-primary) !important; } body.page-id-527 .cc-pricing-toggle__btn.is-selected { background:#fff !important; color:var(--cc-color-brand-primary) !important; border-color:var(--cc-color-brand-primary) !important; } body.page-id-527 .cc-pricing-toggle__pill { cursor:pointer; } /* Nav mega-menus: open down-and-to-the-RIGHT (left-anchored under the menu item) instead of down-and-to-the-left. Desktop only. 2026-05-28 */ @media (min-width: 771px) { .main-navigation li.menu-item-has-children > ul.sub-menu { left: 0 !important; right: auto !important; } } /* For Suppliers (1801): center the generic eyebrows (display:inline-block in a text-align:start container → sit left). Make block. 2026-05-28 */ body.page-id-1801 .cc-eyebrow { display: block; text-align: center; } /* For Suppliers: vertically center the step number badges (44px box, digit line-height 27.6px left it top-aligned). 2026-05-28 */ body.page-id-1801 .cc-steps__num { display: flex; align-items: center; justify-content: center; } /* For Suppliers: tighten section vertical rhythm (was 100px / hero 88px) for a denser page. 2026-05-28 */ body.page-id-1801 .cc-section { padding-top: 76px !important; padding-bottom: 76px !important; } /* For Suppliers closing CTA (purple): eyebrow + body were dark gray (#52525B) → unreadable. Make light. 2026-05-28 */ body.page-id-1801 .cc-cta-banner__eyebrow { color: rgba(255,255,255,0.8) !important; } body.page-id-1801 .cc-cta-banner__body-supplier { color: rgba(255,255,255,0.92) !important; } body.page-id-1801 .cc-cta-banner__lead { color: rgba(255,255,255,0.85) !important; } /* Use Cases: alternate rows (zigzag) like Features — reverse the EVEN sections so mockup goes left, text right. Sections are flex with story order:1 / mockup order:2. 2026-05-28 */ body.page-id-1809 #drawing-reviews .cc-uc-section__story, body.page-id-1809 #manufacturing-handoff .cc-uc-section__story, body.page-id-1809 #field-service .cc-uc-section__story { order: 2 !important; } body.page-id-1809 #drawing-reviews .cc-uc-section__mockup, body.page-id-1809 #manufacturing-handoff .cc-uc-section__mockup, body.page-id-1809 #field-service .cc-uc-section__mockup { order: 1 !important; } /* For Engineering Leaders (1805): hero eyebrow was inline-block + left while the hero is centered → center it. (Pillar eyebrows intentionally LEFT — pillars are left-aligned.) + tighten section rhythm 100→76 (match Suppliers). 2026-05-28 */ body.page-id-1805 .cc-page-hero .cc-eyebrow { display: block; text-align: center; } body.page-id-1805 .cc-section { padding-top: 76px !important; padding-bottom: 76px !important; } /* Homepage: combine the Bietz quote + "Teams shipping hardware faster" CTA into one lavender band; link sits just under the quote. 2026-05-29 */ body.page-id-1359 .cc-inline-testimonial { padding-bottom: 48px !important; } body.page-id-1359 .cc-inline-testimonial__cta { margin-top: 28px; } body.page-id-1359 .cc-inline-testimonial__cta a { color: var(--cc-color-brand-primary); font-weight: 700; font-size: 18px; text-decoration: none; } body.page-id-1359 .cc-inline-testimonial__cta a:hover { text-decoration: underline; } /* i18n hide duplicated page title on translated inner pages (2026-05-29) */ body.page-id-2169 .entry-header,body.page-id-2171 .entry-header,body.page-id-2174 .entry-header,body.page-id-2177 .entry-header,body.page-id-2180 .entry-header,body.page-id-2183 .entry-header,body.page-id-2186 .entry-header,body.page-id-2191 .entry-header,body.page-id-2194 .entry-header,body.page-id-2197 .entry-header,body.page-id-2200 .entry-header,body.page-id-2203 .entry-header,body.page-id-2206 .entry-header,body.page-id-2209 .entry-header,body.page-id-2213 .entry-header,body.page-id-2216 .entry-header,body.page-id-2219 .entry-header,body.page-id-2222 .entry-header,body.page-id-2225 .entry-header,body.page-id-2228 .entry-header,body.page-id-2231 .entry-header,body.page-id-2237 .entry-header,body.page-id-2240 .entry-header,body.page-id-2243 .entry-header,body.page-id-2246 .entry-header,body.page-id-2249 .entry-header,body.page-id-2252 .entry-header,body.page-id-2255 .entry-header{display:none!important} /* ============================================================ * v1.4.46 — Mobile remediation (audit: _build/MOBILE-AUDIT.md) * Everything here is scoped to small viewports / coarse pointers; * desktop ≥900px (nav: ≥771px) renders pixel-identically to v1.4.45. * Breakpoint convention: 899/900 for layout, 770/771 only to match GP's * menu breakpoint (from its emitted mobile-menu CSS — NOT 768/769), * 781/782 only to match WP's own small-screen line. * ============================================================ */ /* --- Pricing tiers: the wp:group grid (columnCount:3) never collapses on * its own — WP emits a fixed repeat(3,minmax(0,1fr)) with no breakpoint. * Live-confirmed 99px-wide cards at 399px viewport. Stack ≤781px (WP's own * small-screen breakpoint, matching the admin-bar switch). --- */ @media (max-width: 781px) { .cc-pricing__grid { grid-template-columns: 1fr !important; } } /* --- Features scrollspy subnav on phones: keep the pills on one row and * let the bar itself scroll horizontally (it already has overflow-x:auto), * with comfortable tap sizes, edge padding, and a right-edge fade as the * scroll affordance. scrollspy.js scrolls the active pill into view. --- */ @media (max-width: 899px) { .cc-scrollspy .cc-container { padding-inline: 0 !important; max-width: none !important; } .cc-scrollspy__list { justify-content: flex-start !important; width: max-content !important; min-width: 100%; gap: 4px !important; padding: 6px 16px !important; } .cc-scrollspy__link { padding: 12px 14px !important; /* ≥44px effective tap height */ } /* Edge fade: signals more pills off-screen to the right */ .cc-scrollspy { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%); } } /* --- Pricing billing toggle: comfortable tap sizes on phones (buttons were * ~37px). The decorative pill gets an invisible enlarged hit area on coarse * pointers (pricing-toggle.js makes it clickable in v1.4.46). --- */ @media (max-width: 899px) { .cc-pricing-toggle__btn { padding: 12px 16px !important; /* → ~45px tall */ } } @media (pointer: coarse) { .cc-pricing-toggle__pill::after { content: ""; position: absolute; inset: -12px -8px; /* 38×22 pill → ~54×46 touch target, no visual change */ } } /* --- Legibility: raise sub-13px sentence-case copy on phones (eyebrows and * mono tag labels are intentionally small and stay as designed). --- */ @media (max-width: 899px) { .cc-cta-banner__lead, .cc-cta-banner .cc-cta-banner__lead { font-size: 14px !important; color: rgba(255, 255, 255, 0.85) !important; /* was 12px @ 70% on purple */ } .cc-vs__step-sub { font-size: 13px !important; } body.page-id-527 .cc-pricing__nocc { font-size: 13px; } .cc-plm__layer-caption { font-size: 13px; } } /* --- Sticky announcement banner: ≥44px close-button hit area on phones * (was ~36px; centered so the larger box doesn't shift the × glyph). --- */ @media (max-width: 899px) { .banner-close-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ============================================================ * v1.4.47 — Dan design/content feedback, 2026-07-15 * Source: _build/dan-feedback-2026-07-15.txt (artifact review) * ============================================================ */ /* --- Issue 1: homepage "The Problem" and "Proven in Production" sat on the * SAME lavender ground with no break. The testimonial section goes WHITE on * the homepage family only — its proof card already carries a lavender * border + purple glow, so it reads as a distinct "here's the receipts" * moment. (why-cadchat keeps its lavender band per Dan's July-14 request.) * Top padding was 0 (it used to merge into the problem band) — the white * section needs its own head-room. --- */ body.home .cc-inline-testimonial, body.page-id-1974 .cc-inline-testimonial, body.page-id-1975 .cc-inline-testimonial, body.page-id-1976 .cc-inline-testimonial, body.page-id-2234 .cc-inline-testimonial { background: #FFFFFF !important; padding-top: clamp(56px, 7vw, 88px) !important; } /* --- Issue 3: "There's a way that is →" is the pivot into the solution but * rendered as a plain text link. Promote to a filled brand button. Class- * based, so all 5 language homepages pick it up without content edits. --- */ .cc-problem__solution > a { display: inline-block; background: var(--cc-color-brand-primary); color: #FFFFFF !important; padding: 14px 28px; border-radius: 8px; font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none !important; transition: background 0.15s ease, transform 0.15s ease; } .cc-problem__solution > a:hover, .cc-problem__solution > a:focus-visible { background: var(--cc-color-brand-primary-deep, #7C3AED); color: #FFFFFF !important; transform: translateY(-1px); opacity: 1 !important; } /* --- Issue 2: "Meet when it matters" Live/Async step cards. Number now sits * INLINE with the title (one unit), body copy hangs together beneath, every * mockup is normalized to the same 16:10 footprint (top-anchored crop), and * a connector line walks the eye 1 → 2 → 3 across the desktop row. CSS-only * — the block markup is untouched. --- */ .cc-how__step { display: grid !important; grid-template-columns: 32px 1fr; grid-template-rows: auto 1fr auto; column-gap: 12px; } .cc-how__step-num { grid-column: 1; grid-row: 1; margin: 0 !important; align-self: center; position: relative; z-index: 1; } .cc-section .cc-how__step-h { grid-column: 2; grid-row: 1; margin: 0 !important; align-self: center; font-size: 15px !important; } .cc-how__step-body { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 14px !important; } .cc-how__step-mockup { grid-column: 1 / -1; grid-row: 3; aspect-ratio: 16 / 10; } .cc-how__step-mockup img, .cc-how__step-mockup svg { width: 100%; height: 100%; object-fit: cover; object-position: top left; } @media (min-width: 900px) { /* Connector: a short line bridging each 28px grid gap at badge height * (16px card padding + half the 32px badge). Live = brand tint, async = * action tint, matching each mode's badge color. */ .cc-how__step:not(:last-child)::after { content: ""; position: absolute; top: calc(16px + 16px); right: -28px; width: 28px; height: 2px; background: color-mix(in srgb, var(--cc-color-brand-primary) 32%, #FFFFFF); } .cc-how__mode--async .cc-how__step:not(:last-child)::after { background: color-mix(in srgb, var(--cc-color-action) 32%, #FFFFFF); } } /* --- Issue 6: /features/ graphics — one consistent size, more visual * weight. The image column takes a larger share of the row and every * mockup frame is normalized to the same 16:10 footprint; object-fit * CONTAIN (not cover) because these are app UIs — nothing gets cropped, * shorter shots letterbox onto the frame's own #FAFAFA. --- */ @media (min-width: 782px) { /* v1.4.48: the columns carry explicit flex-basis, so flex-grow had no * free space to hand out — override the basis split instead (was * ~46.5/53.5, now 42/58 in the visual's favor). */ .cc-feat-section .wp-block-columns > .wp-block-column:has(.cc-feat-section__mockup-frame) { flex-basis: 58% !important; flex-grow: 1 !important; } .cc-feat-section .wp-block-columns > .wp-block-column:not(:has(.cc-feat-section__mockup-frame)) { flex-basis: 42% !important; } } .cc-feat-section__mockup-frame { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; } .cc-feat-section__mockup-frame img { width: 100% !important; height: 100% !important; object-fit: contain; } /* --- Issue 9: /for-suppliers/ 3-step "what happens" flow — the section * just below the hero. Was a vertical stack of text rows; now a compact * horizontal 3-card sequence (number inline with title, connector line, * equal cards) so "how do I get in?" reads at a glance. All languages. --- */ @media (min-width: 900px) { .cc-steps__list { flex-direction: row !important; align-items: stretch; max-width: 1100px; gap: 28px !important; } /* Each step: equal-width card, number + title on one line via grid */ .cc-steps__item { flex: 1 1 0; position: relative; padding: 24px 22px !important; display: grid !important; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; } .cc-steps__num { grid-column: 1; grid-row: 1; /* v1.4.69: start, not center — a longer wrapped title (row 1 grows) * floated the badge down, so 1/2/3 sat at different heights across * the cards and the connector line missed them. At the top the badge * centers on the title's first line (44px badge vs 42px line). */ align-self: start; position: relative; z-index: 1; } .cc-steps__content { display: contents; /* lift h3 + body into the card grid */ } .cc-steps__item-h { grid-column: 2; grid-row: 1; /* v1.4.70: start, not center — the single-line "You're in." title * centered against a taller row and sat 9px below the other cards' * first lines (Graham/Dan 2026-09-11). Matches the badge fix above. */ align-self: start; margin: 0 !important; } .cc-steps__body { grid-column: 1 / -1; grid-row: 2; margin-top: 12px !important; } /* Connector line 1 → 2 → 3 through the 28px gaps at badge height * (24px padding + half the 44px badge) */ .cc-steps__item:not(:last-child)::after { content: ""; position: absolute; top: calc(24px + 22px); right: -28px; width: 28px; height: 2px; background: color-mix(in srgb, var(--cc-color-brand-primary) 32%, #FFFFFF); } } /* --- v1.4.49: video-modal window sizing. The hystmodal engine CSS (WPCode * "ModalCSS") gives .hystmodal__window no width — it hugs its content, so * with preload="none" the modal opened at the video element's 300×150 * default and then jumped to the full 1920px intrinsic width once playback * began (spilling past the viewport). Cap it responsively; the video's * declared 16/9 aspect keeps the box stable before metadata arrives. * Specificity (0,2,0) so source order vs the engine's inline CSS is moot. --- */ .hystmodal .hystmodal__window { width: min(960px, 92vw); } /* --- Issue 14: "Help" utility link in the header (menu item carries class * cc-menu-help) — quieter than the primary nav items so it reads as * utility, not navigation. Footer gets its own Help Center link via the * footer template. --- */ @media (min-width: 771px) { .site-header .main-navigation .menu > li.cc-menu-help > a, .main-navigation .menu > li.cc-menu-help > a { font-size: 13px !important; color: #71717A !important; font-weight: 500 !important; } .main-navigation .menu > li.cc-menu-help > a:hover { color: #27272A !important; } } /* Why CADchat — screenshare cards pop (only resolution box purple) 2026-05-29 */ .cc-six-q__card{border:1px solid rgba(20,16,40,.05)!important;box-shadow:0 2px 10px rgba(20,16,40,.045)!important} .cc-six-q__grid .cc-six-q__card:nth-of-type(3){background:#fff8f8!important} .cc-six-q__grid .cc-six-q__card:nth-of-type(6){background:linear-gradient(135deg,var(--cc-color-brand-primary) 0%,var(--cc-color-brand-primary-deep) 100%)!important;border:none!important;box-shadow:0 16px 40px rgb(from var(--cc-color-brand-primary) r g b / .38)!important} .cc-six-q__grid .cc-six-q__card:nth-of-type(6) .cc-six-q__card-title,.cc-six-q__grid .cc-six-q__card:nth-of-type(6) .cc-six-q__card-sub{color:#fff!important} .cc-six-q__grid .cc-six-q__card:nth-of-type(6) .cc-six-q__card-sub{opacity:.92!important} .cc-six-q__grid .cc-six-q__card:nth-of-type(6)::before{display:none!important} /* Eng Leaders — space qualifier tagline below checklist */ .cc-qualifier__tagline{margin-top:2.75rem!important} /* === Eng Leaders Option D — visual restructure (2026-05-31) === */ /* Hero split layout — text left, mockup right */ .cc-page-hero--split .cc-container{max-width:1200px} .cc-page-hero--split .cc-page-hero__split{align-items:center;gap:3rem} .cc-page-hero--split .cc-page-hero__split-text .cc-eyebrow, .cc-page-hero--split .cc-page-hero__split-text .cc-page-hero__h, .cc-page-hero--split .cc-page-hero__split-text > p{text-align:left!important} .cc-page-hero--split .cc-page-hero__h{font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.05;margin:.6rem 0 1.1rem} .cc-page-hero--split .cc-page-hero__lead{font-size:1.05rem;line-height:1.55;color:#4a4661;margin:0;max-width:560px} .cc-page-hero--split .cc-page-hero__mockup img{width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(20,16,40,.18);background:#0f0d1c} @media (max-width:880px){ .cc-page-hero--split .cc-page-hero__split{gap:2rem} .cc-page-hero--split .cc-page-hero__split-text .cc-eyebrow, .cc-page-hero--split .cc-page-hero__split-text .cc-page-hero__h, .cc-page-hero--split .cc-page-hero__split-text > p{text-align:center!important} .cc-page-hero--split .cc-page-hero__lead{margin:0 auto} } /* Metric strip — 3 tiles replacing the long pillars */ .cc-metric-strip{padding:4.5rem 0;background:#fff} .cc-metric-strip .cc-container{max-width:1180px} .cc-metric-grid{gap:1.5rem!important;margin-top:0!important} .cc-metric-tile{background:#fff!important;border:1px solid rgba(20,16,40,.07)!important;border-radius:16px;padding:2.25rem 1.75rem!important;box-shadow:0 4px 18px rgba(20,16,40,.05);transition:transform .25s ease,box-shadow .25s ease;display:flex!important;flex-direction:column;gap:.4rem} .cc-metric-tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,16,40,.09)} .cc-metric-tile__eyebrow{color:var(--cc-color-brand-primary)!important;margin:0 0 .9rem!important} .cc-metric-tile__big{font-size:1.95rem!important;line-height:1.08!important;font-weight:800!important;color:#141028!important;margin:0 0 .75rem!important;letter-spacing:-.01em} .cc-metric-tile__big .cc-metric-tile__arrow{color:var(--cc-color-brand-primary);font-weight:700;display:inline-block;padding:0 .15em} .cc-metric-tile__sub{font-size:.98rem!important;line-height:1.55!important;color:#4a4661!important;margin:0!important} /* Testimonials grid — 3-up consolidating pillar quotes */ .cc-tg{padding:4rem 0 5rem;background:#FAFAFA} .cc-tg .cc-container{max-width:1180px} .cc-tg__eyebrow{color:var(--cc-color-brand-primary)!important;margin:0 0 2rem!important} .cc-tg__grid{gap:1.5rem!important;margin-top:0!important} .cc-tg__card{background:#fff!important;border:1px solid rgba(20,16,40,.07)!important;border-radius:14px;padding:1.85rem 1.6rem!important;display:flex!important;flex-direction:column;gap:.55rem;box-shadow:0 2px 10px rgba(20,16,40,.04)} .cc-tg__quote{font-size:.98rem!important;line-height:1.6!important;color:#1a1632!important;margin:0 0 .9rem!important;font-style:italic} .cc-tg__quote em{font-style:italic;color:var(--cc-color-brand-primary);font-weight:600} .cc-tg__author{font-weight:700!important;color:#141028!important;margin:0!important;font-size:.95rem!important} .cc-tg__co{color:#6b6a86!important;font-size:.85rem!important;margin:0 0 .6rem!important} /* cc-tg logo: supports both a bare and a wp:image