/* =========================================================== Simplifi Commerce — Case Study DETAIL template Pure CSS, no framework. Depends only on styles/tokens.css. This is a LIGHT-FIRST page with explicitly dark sections. Toggling flips the light sections (tokens.css already defines the dark overrides), while the .section--dark blocks stay dark in both themes. ─────────────────────────────────────────────────────────── THEMING PER CASE STUDY Change ONE line — the --cs-accent group on .cs-detail below — to re-tint the whole page for a different industry: ecommerce #2B7DE9 healthcare #006875 energy #F5A623 saas #6b5ee8 =========================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg-page); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } .container { width: min(var(--container), 100% - var(--container-gutter)); margin-inline: auto; } /* Per-case-study accent. Default: this study is an ecommerce migration. */ .cs-detail { --cs-accent: var(--industry-ecommerce); /* light-surface accent */ --cs-accent-bright: #5ecfda; /* dark-surface accent */ --cs-glow: #2b7de9; } /* ===================================================== HEADER (shared chrome — identical to listing page) ===================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; background: #060a1beb; backdrop-filter: blur(16px); border-bottom: 1px solid #ffffff14; } .nav-wrap { width: min(var(--container), 100% - var(--container-gutter)); margin-inline: auto; display: flex; align-items: center; gap: 32px; padding: 16px 0; } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand-logo { height: 32px; width: auto; } .desktop-nav { display: flex; align-items: center; gap: 34px; flex: 1; margin-left: 8px; } .desktop-nav a { font-size: 14px; font-weight: var(--fw-medium); color: var(--text-on-dark-soft); letter-spacing: -0.01em; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); } .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: #fff; } .header-actions { display: flex; align-items: center; gap: 14px; } .theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: #ffffff0d; border: 1px solid #ffffff21; color: var(--text-on-dark-mid); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { background: #ffffff1a; color: #fff; } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } .nav-cta { font-size: 14px; font-weight: var(--fw-extrabold); color: #fff; padding: 11px 20px; border-radius: var(--radius); background: var(--accent); box-shadow: var(--shadow-cta); white-space: nowrap; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); } .nav-cta:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); } .mobile-menu-btn { display: none; background: transparent; border: 1px solid #ffffff1f; color: #fff; width: 40px; height: 40px; border-radius: var(--radius); font-size: 18px; } .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 8px 0 16px; border-top: 1px solid #ffffff14; } .mobile-nav.open { display: flex; } .mobile-nav a { padding: 12px 4px; font-size: 15px; font-weight: var(--fw-medium); color: var(--text-on-dark-soft); } .mobile-nav a:hover { color: #fff; } @media (max-width: 920px) { .desktop-nav { display: none; } .nav-cta { display: none; } .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; } .nav-wrap { justify-content: space-between; } } /* ===================================================== GENERIC BUTTONS / ELEMENTS ===================================================== */ .primary-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: var(--radius); background: var(--accent); color: #fff; font-size: 15px; font-weight: var(--fw-extrabold); letter-spacing: -0.01em; border: none; box-shadow: var(--shadow-cta); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); } .primary-btn:hover { background: var(--accent-2); transform: translateY(-2px); box-shadow: var(--shadow-cta-hover); } .primary-btn .arrow, .ghost-link .arrow, .cta-light-btn .arrow { transition: transform var(--dur-base) var(--ease-out); } .primary-btn:hover .arrow, .cta-light-btn:hover .arrow { transform: translateX(3px); } .secondary-btn-dark { display: inline-flex; align-items: center; gap: 8px; padding: 15px 24px; border-radius: var(--radius); background: #ffffff0f; border: 1px solid #ffffff2e; color: #fff; font-size: 15px; font-weight: var(--fw-semibold); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .secondary-btn-dark:hover { background: #ffffff14; border-color: #ffffff52; } .secondary-btn-light { display: inline-flex; align-items: center; gap: 8px; padding: 15px 24px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-card); color: var(--text-h); font-size: 15px; font-weight: var(--fw-semibold); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .secondary-btn-light:hover { border-color: #00687566; transform: translateY(-2px); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: var(--radius-pill); background: #00687528; border: 1px solid #00687566; color: var(--accent-bright); font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; } .eyebrow-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px #22c4cc24; flex-shrink: 0; } /* ===================================================== SECTION SCAFFOLD ===================================================== */ .section { padding: clamp(56px, 8vw, 92px) 0; position: relative; } .section--alt { background: var(--bg-alt); } .section--dark { background: radial-gradient(circle at 8% 6%, #00687542, transparent 30%), radial-gradient(circle at 92% 96%, #22c4cc1f, transparent 32%), linear-gradient(180deg, #020817 0%, #04112a 100%); color: var(--text-on-dark); } .section-heading { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 760px; } .section-heading.center { align-items: center; text-align: center; margin-inline: auto; } .section-heading .label { font-size: 11px; font-weight: var(--fw-extrabold); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); } .section--dark .section-heading .label { color: var(--accent-bright); } .section-heading h2 { font-size: clamp(28px, 4vw, 48px); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); line-height: 1.1; margin: 0; color: var(--text-h); text-wrap: balance; } .section--dark .section-heading h2 { color: #fff; } .section-heading .sub { font-size: 17px; line-height: 1.7; color: var(--text-body); margin: 0; } .section--dark .section-heading .sub { color: var(--text-on-dark-mid); } .section-heading.center .sub { max-width: 640px; } /* ===================================================== HERO (dark) ===================================================== */ .cd-hero { position: relative; overflow: hidden; background: radial-gradient(circle at 6% 14%, #00687540, transparent 42%), radial-gradient(circle at 96% 88%, #2b7de926, transparent 40%), radial-gradient(circle at 50% 120%, #04338233, transparent 55%), linear-gradient(180deg, #020817 0%, #04112a 60%, #050e22 100%); color: var(--text-on-dark); padding: 150px 0 84px; } .cd-hero-inner { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: start; } .cd-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--fw-bold); color: var(--text-on-dark-soft); margin-bottom: 22px; transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .cd-back:hover { gap: 12px; color: #fff; } .cd-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .cd-meta { font-size: 11px; font-weight: var(--fw-extrabold); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: #ffffff14; border: 1px solid #ffffff2e; padding: 6px 12px; border-radius: var(--radius-pill); } .cd-hero h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tightest); line-height: 1.04; margin: 0 0 22px; color: #fff; text-wrap: balance; } .cd-hero h1 .accent { background: linear-gradient(120deg, #5ecfda 0%, #2b7de9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .cd-hero-sub { font-size: 17px; line-height: 1.75; color: var(--text-on-dark-mid); margin: 0 0 32px; max-width: 560px; } .hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Project snapshot panel (hero right) */ .snapshot { background: #061227cc; border: 1px solid #ffffff1f; border-radius: var(--radius-2xl); backdrop-filter: blur(14px); box-shadow: 0 32px 80px #00040f80; overflow: hidden; } .snapshot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #ffffff14; background: #ffffff08; } .snapshot-head .t { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-soft); } .snapshot-head .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--fw-bold); color: var(--success); letter-spacing: 0.04em; } .snapshot-head .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px #4ade8033; } .snapshot-list { padding: 6px 20px; } .snapshot-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #ffffff0d; } .snapshot-row:last-child { border-bottom: none; } .snapshot-row .k { font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-quiet); } .snapshot-row .v { font-size: 14px; font-weight: var(--fw-semibold); color: #fff; text-align: right; } .snapshot-foot { display: grid; grid-template-columns: 1fr 1fr; } .snapshot-metric { padding: 18px 20px; border-top: 1px solid #ffffff14; border-right: 1px solid #ffffff0d; } .snapshot-metric:last-child { border-right: none; } .snapshot-metric .mv { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 26px; color: var(--accent-bright); letter-spacing: -0.04em; line-height: 1; } .snapshot-metric .ml { display: block; margin-top: 7px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-quiet); } @media (max-width: 1024px) { .cd-hero { padding: 128px 0 72px; } .cd-hero-inner { grid-template-columns: 1fr; gap: 48px; } .snapshot { max-width: 560px; } } /* hero right column with snapshot + strategy note cards */ .cd-hero-right { display: flex; flex-direction: column; gap: 16px; } .cd-hero-right .snapshot { max-width: none; } .hero-note { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-lg); padding: 18px 20px; } .hero-note .nl { font-size: 10px; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); display: block; margin-bottom: 6px; } .hero-note p { font-size: 13px; line-height: 1.55; color: var(--text-on-dark-mid); margin: 0; } /* ===================================================== OVERVIEW — narrative + facts card ===================================================== */ .overview-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 48px; align-items: start; } .overview-copy p { font-size: 16px; line-height: 1.85; color: var(--text-body); margin: 0 0 18px; } .overview-copy p:last-child { margin-bottom: 0; } .overview-copy strong { color: var(--text-h); font-weight: var(--fw-bold); } .facts-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-2xl); padding: 28px; box-shadow: var(--shadow-sm); } .facts-card h4 { font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } .facts-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border-subtle); } .facts-row:last-of-type { border-bottom: none; } .facts-row .k { font-size: 13px; color: var(--text-subtle); font-weight: var(--fw-medium); } .facts-row .v { font-size: 13px; color: var(--text-h); font-weight: var(--fw-bold); text-align: right; } .facts-cta { margin-top: 18px; } /* ===================================================== FEATURE CARD GRID (challenge / capabilities / foundation) ===================================================== */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .feature-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .feature-card:hover { transform: translateY(-4px); border-color: #00687538; box-shadow: var(--shadow-hover); } .feature-badge { width: 48px; height: 48px; border-radius: var(--radius); background: #0068751a; border: 1px solid #00687529; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 18px; } .feature-badge svg { width: 24px; height: 24px; } .feature-card h3 { font-size: 17px; font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-snug); line-height: 1.3; color: var(--text-h); margin: 0 0 10px; } .feature-card p { font-size: 14px; line-height: 1.7; color: var(--text-body); margin: 0; } /* dark variant for the complexity section */ .section--dark .feature-card { background: var(--dark-card); border-color: #ffffff14; box-shadow: none; } .section--dark .feature-card:hover { border-color: #00687566; background: var(--dark-card-hover); } .section--dark .feature-card h3 { color: #fff; } .section--dark .feature-card p { color: var(--text-on-dark-mid); } .section--dark .feature-badge { background: #0068751f; border-color: #00687566; color: var(--accent-bright); } /* bullet list inside cards */ .card-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; } .card-list li { position: relative; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-mid); } .section--dark .card-list li { color: var(--text-on-dark-mid); } .card-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 6px; border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg); border-radius: 1px; } .section--dark .card-list li::before { border-color: var(--accent-bright); } @media (max-width: 1024px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .feature-grid, .feature-grid.cols-2 { grid-template-columns: 1fr; } } /* ===================================================== METHODOLOGY — numbered steps ===================================================== */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .step-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 28px; box-shadow: var(--shadow-sm); position: relative; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .step-card:hover { transform: translateY(-4px); border-color: #00687538; box-shadow: var(--shadow-hover); } .step-num { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 38px; color: var(--accent); line-height: 1; letter-spacing: -0.04em; margin-bottom: 14px; display: block; } .step-card h3 { font-size: 18px; font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-snug); color: var(--text-h); margin: 0 0 10px; } .step-card p { font-size: 14px; line-height: 1.7; color: var(--text-body); margin: 0; } @media (max-width: 1024px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .steps-grid { grid-template-columns: 1fr; } } /* 4-up steps row */ .steps-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .steps-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .steps-grid.cols-4 { grid-template-columns: 1fr; } } /* step card can carry a bullet list */ .step-card .card-list { margin-top: 14px; } /* ===================================================== BANNER CARD (dark intro strip above capabilities) ===================================================== */ .banner-card { background: radial-gradient(circle at 0% 0%, #00687566, transparent 42%), radial-gradient(circle at 100% 100%, #2b7de933, transparent 46%), linear-gradient(180deg, #020817 0%, #04112a 100%); border: 1px solid #ffffff14; border-radius: var(--radius-2xl); padding: 36px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 44px; box-shadow: var(--shadow-xl); } .banner-card .label { font-size: 11px; font-weight: var(--fw-extrabold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 10px; display: block; } .banner-card h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-snug); color: #fff; margin: 0; line-height: 1.2; text-wrap: balance; } .banner-card p { font-size: 15px; line-height: 1.7; color: var(--text-on-dark-mid); margin: 8px 0 0; max-width: 520px; } .banner-stat { text-align: right; flex-shrink: 0; } .banner-stat .v { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 44px; color: var(--accent-bright); letter-spacing: -0.04em; line-height: 1; } .banner-stat .l { display: block; margin-top: 8px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-quiet); } @media (max-width: 760px) { .banner-card { flex-direction: column; align-items: flex-start; padding: 28px; } .banner-stat { text-align: left; } } /* ===================================================== BEFORE / AFTER (dark) — two columns ===================================================== */ .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ba-col { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-2xl); padding: 30px; } .ba-col.after { border-color: #00687566; background: #00687517; } .ba-col h3 { font-size: 13px; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 10px; } .ba-col.before h3 { color: var(--text-on-dark-soft); } .ba-col.after h3 { color: var(--accent-bright); } .ba-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .ba-item { display: flex; gap: 12px; align-items: flex-start; } .ba-mark { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); margin-top: 1px; } .ba-col.before .ba-mark { background: #ffffff14; color: var(--error); } .ba-col.after .ba-mark { background: var(--accent); color: #fff; } .ba-item .txt { font-size: 14px; line-height: 1.6; } .ba-col.before .ba-item .txt { color: var(--text-on-dark-soft); } .ba-col.after .ba-item .txt { color: #fff; } .ba-item .txt b { display: block; font-weight: var(--fw-bold); margin-bottom: 2px; } @media (max-width: 760px) { .ba-grid { grid-template-columns: 1fr; } } /* ===================================================== RESULTS — stat strip (dark) ===================================================== */ .results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .result-card { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-xl); padding: 30px 26px; text-align: center; } .result-card .v { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(34px, 4vw, 46px); color: var(--accent-bright); letter-spacing: -0.04em; line-height: 1; } .result-card .l { display: block; margin-top: 12px; font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-quiet); } @media (max-width: 860px) { .results-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .results-grid { grid-template-columns: 1fr; } } /* ===================================================== QUOTE ===================================================== */ .quote-block { max-width: 860px; margin-inline: auto; text-align: center; } .quote-mark { font-family: var(--font-display); font-size: 64px; font-weight: var(--fw-black); color: var(--accent); line-height: 0.6; } .quote-block blockquote { font-size: clamp(20px, 2.6vw, 28px); font-weight: var(--fw-semibold); line-height: 1.5; letter-spacing: -0.01em; color: var(--text-h); margin: 18px 0 26px; text-wrap: balance; } .quote-author { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-h); } .quote-role { font-size: 13px; color: var(--text-subtle); margin-top: 2px; } /* ===================================================== RELATED CASE STUDIES (light cards) ===================================================== */ .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .related-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .related-card:hover { transform: translateY(-4px); border-color: #00687538; box-shadow: var(--shadow-hover); } .related-cat { font-size: 10px; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .related-card h3 { font-size: 18px; font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-snug); line-height: 1.3; color: var(--text-h); margin: 0; text-wrap: balance; } .related-card p { font-size: 14px; line-height: 1.65; color: var(--text-body); margin: 0; } .ghost-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; color: var(--accent); font-size: 13px; font-weight: var(--fw-extrabold); letter-spacing: -0.01em; transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ghost-link:hover { gap: 12px; color: var(--accent-2); } @media (max-width: 920px) { .related-grid { grid-template-columns: 1fr; } } /* ===================================================== FINAL CTA card (light section, dark card) ===================================================== */ .final-cta-card { background: radial-gradient(circle at 0% 0%, #00687566, transparent 40%), radial-gradient(circle at 100% 100%, #2b7de933, transparent 42%), linear-gradient(180deg, #020817 0%, #04112a 100%); border: 1px solid #ffffff14; border-radius: 28px; padding: clamp(48px, 6vw, 72px) clamp(28px, 5vw, 56px); text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-xl); } .final-cta-card::before { content: ""; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px; border: 1px solid #22c4cc24; border-radius: 50%; pointer-events: none; } .final-cta-card::after { content: ""; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; border: 1px dashed #22c4cc1a; border-radius: 50%; pointer-events: none; } .final-cta-card .label { font-size: 11px; font-weight: var(--fw-extrabold); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-bright); } .final-cta-card h2 { font-size: clamp(28px, 4.2vw, 50px); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); line-height: 1.12; color: #fff; margin: 14px auto 18px; max-width: 680px; text-wrap: balance; } .final-cta-card p { font-size: 17px; line-height: 1.7; color: var(--text-on-dark-mid); margin: 0 auto 32px; max-width: 560px; } .final-cta-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ===================================================== FOOTER (shared chrome) ===================================================== */ .footer { background: #020817; color: var(--text-on-dark-soft); padding: 64px 0 32px; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid #ffffff14; } .footer-brand .brand-logo { height: 34px; margin-bottom: 18px; } .footer-brand p { font-size: 14px; line-height: 1.7; color: var(--text-on-dark-quiet); margin: 0; max-width: 360px; } .footer-col h6 { font-size: 11px; font-weight: var(--fw-extrabold); letter-spacing: 0.22em; text-transform: uppercase; color: #fff; margin: 0 0 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-col li, .footer-col a { font-size: 14px; color: var(--text-on-dark-soft); line-height: 1.6; transition: color var(--dur-fast) var(--ease-out); } .footer-col a:hover { color: var(--accent-bright); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-dark-quiet); gap: 24px; flex-wrap: wrap; } .footer-bottom-links { display: flex; gap: 26px; } .footer-bottom-links a { color: var(--text-on-dark-quiet); transition: color var(--dur-fast) var(--ease-out); } .footer-bottom-links a:hover { color: #fff; } @media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ===================================================== SHARED SMALL-SCREEN TUNING ===================================================== */ @media (max-width: 920px) { .overview-grid { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 520px) { .hero-actions .primary-btn, .hero-actions .secondary-btn-dark { width: 100%; justify-content: center; } .cd-meta-row { gap: 6px; } } /* ===================================================== EXTRA REUSABLE CASE-STUDY COMPONENTS ===================================================== */ /* 4-up feature grid (integration cards) */ .feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } /* challenge badge — red problem tint */ .feature-badge.warn { background: #dc35451a; border-color: #dc354533; color: #e06a72; } /* highlighted capability card — solid teal */ .feature-card.highlight { background: linear-gradient(160deg, #008290 0%, #006875 100%); border-color: #006875; } .feature-card.highlight h3, .feature-card.highlight p { color: #fff; } .feature-card.highlight .feature-badge { background: #ffffff21; border-color: #ffffff45; color: #fff; } .feature-card.highlight:hover { border-color: #22c4cc; } /* metric line inside a feature card (outcomes) */ .feature-card .metric { display: block; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 32px; color: var(--accent); letter-spacing: -0.04em; line-height: 1; margin-bottom: 12px; } /* integration hub badge (centered above integration grid) */ .int-hub { display: flex; justify-content: center; margin-bottom: 38px; } .int-hub .hub { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius-pill); background: #ffffff0d; border: 1px solid #00687566; color: #fff; font-size: 16px; font-weight: var(--fw-extrabold); letter-spacing: -0.01em; box-shadow: 0 0 46px #00687540; } .int-hub .hub .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px #22c4cc24; } /* wordmark / tool logo row (on dark) */ .logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; margin-top: 38px; padding-top: 30px; border-top: 1px solid #ffffff14; } .logo-row .lw { font-size: 15px; font-weight: var(--fw-extrabold); letter-spacing: -0.01em; color: var(--text-on-dark-soft); opacity: 0.85; } /* the model execution band — 2 columns on dark */ .exec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .exec-copy h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-tight); line-height: 1.12; color: #fff; margin: 12px 0 18px; text-wrap: balance; } .exec-copy .label { font-size: 11px; font-weight: var(--fw-extrabold); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-bright); } .exec-copy p { font-size: 16px; line-height: 1.8; color: var(--text-on-dark-mid); margin: 0; } .exec-points { display: flex; flex-direction: column; gap: 14px; } .exec-point { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-lg); padding: 20px 22px; } .exec-point h4 { font-size: 15px; font-weight: var(--fw-bold); color: #fff; margin: 0 0 6px; } .exec-point p { font-size: 13.5px; line-height: 1.6; color: var(--text-on-dark-mid); margin: 0; } @media (max-width: 860px) { .exec-grid { grid-template-columns: 1fr; gap: 28px; } } /* related services chip grid (light) */ .services-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .service-chip { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 22px 14px; text-align: center; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .service-chip:hover { transform: translateY(-3px); border-color: #00687538; } .service-chip .ic { width: 42px; height: 42px; border-radius: var(--radius); background: #0068751a; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; } .service-chip .ic svg { width: 22px; height: 22px; } .service-chip span { display: block; font-size: 13px; font-weight: var(--fw-bold); color: var(--text-h); letter-spacing: -0.01em; line-height: 1.3; } @media (max-width: 900px) { .services-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .services-row { grid-template-columns: repeat(2, 1fr); } } /* 5-up results strip (hero stat band) */ .results-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1024px) { .results-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } } /* 6-up results strip */ .results-grid.cols-6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 1024px) { .results-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } } /* browser / store mock (dark) */ .browser-mock { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid #ffffff1f; box-shadow: 0 32px 80px #00040f80; background: #0a1530; } .browser-mock .bbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #ffffff08; border-bottom: 1px solid #ffffff14; } .browser-mock .bbar i { width: 11px; height: 11px; border-radius: 50%; display: block; } .browser-mock .bbar i:nth-child(1){ background:#ff5f57; } .browser-mock .bbar i:nth-child(2){ background:#febc2e; } .browser-mock .bbar i:nth-child(3){ background:#28c840; } .browser-mock .burl { margin-left: 10px; font-size: 12px; font-weight: var(--fw-medium); color: var(--text-on-dark-soft); background: #ffffff0d; border-radius: var(--radius-pill); padding: 5px 16px; } .browser-mock .bscreen { aspect-ratio: 16 / 10; background: linear-gradient(160deg, #0c2c4e 0%, #06182f 100%); display: flex; flex-direction: column; } .store-hero { flex: 1; background: linear-gradient(135deg, #f5a623 0%, #d97a14 100%); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 26px 28px; color: #1a1004; } .store-hero .eb { font-size: 10px; font-weight: var(--fw-extrabold); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .store-hero .ht { font-size: clamp(18px, 2.4vw, 26px); font-weight: var(--fw-extrabold); letter-spacing: -0.02em; line-height: 1.1; } .store-hero .pill { align-self: flex-start; margin-top: 8px; background: #1a1004; color: #ffd98a; font-size: 11px; font-weight: var(--fw-bold); padding: 7px 14px; border-radius: var(--radius-pill); } .store-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; } .store-tile { background: #ffffff0d; border: 1px solid #ffffff14; border-radius: var(--radius); height: 56px; display: flex; align-items: center; justify-content: center; color: var(--accent-bright); } .store-tile svg { width: 22px; height: 22px; } /* flow list panel (email automation) */ .flow-panel { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-2xl); padding: 24px; } .flow-row { display: flex; align-items: center; gap: 14px; padding: 14px 6px; border-bottom: 1px solid #ffffff0d; } .flow-row:last-child { border-bottom: none; } .flow-row .fn { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: #f5a6231f; border: 1px solid #f5a62359; color: var(--accent-bright); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-extrabold); } .flow-row .ft { font-size: 14px; font-weight: var(--fw-semibold); color: #fff; } .stat-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; } .stat-chip { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-lg); padding: 14px 20px; } .stat-chip .v { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 24px; color: var(--accent-bright); letter-spacing: -0.04em; line-height: 1; } .stat-chip .l { display: block; margin-top: 6px; font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-on-dark-quiet); } /* subscription pricing cards (dark) */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .price-card { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-2xl); padding: 32px; } .price-card.featured { border-color: var(--accent-bright); background: #ffffff12; } .price-card .ptier { font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-bright); } .price-card .pprice { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 46px; color: #fff; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 4px; } .price-card .pprice small { font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-on-dark-quiet); letter-spacing: 0; } .price-card .pdesc { font-size: 14px; line-height: 1.6; color: var(--text-on-dark-mid); margin: 0 0 18px; } .price-card .card-list { margin-top: 0; } @media (max-width: 680px) { .pricing-grid { grid-template-columns: 1fr; } } /* video infrastructure mock (dark) */ .video-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 36px; align-items: center; } .video-mock { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid #ffffff1f; background: radial-gradient(circle at 50% 38%, #16273f 0%, #050e22 72%); box-shadow: 0 32px 80px #00040f80; display: flex; align-items: center; justify-content: center; } .video-mock .play { width: 74px; height: 74px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px #ffffff14, var(--shadow-cta); } .video-mock .play svg { width: 28px; height: 28px; color: #fff; margin-left: 4px; } .video-mock .vbar { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 4px; border-radius: 2px; background: #ffffff21; } .video-mock .vbar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 38%; border-radius: 2px; background: var(--accent-bright); } @media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; gap: 24px; } } /* phone mock (mobile commerce — Vendsmart) */ .phone-mock { width: 268px; max-width: 100%; margin-inline: auto; border-radius: 38px; padding: 12px; background: linear-gradient(180deg, #11203a 0%, #070f20 100%); border: 1px solid #ffffff1f; box-shadow: 0 40px 90px #00040f99; } .phone-screen { border-radius: 26px; overflow: hidden; background: #0a1326; aspect-ratio: 9 / 18; display: flex; flex-direction: column; } .ps-top { background: linear-gradient(135deg, #2b7de9 0%, #1a4fb0 100%); padding: 24px 18px 20px; color: #fff; } .ps-top .eb { font-size: 10px; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; } .ps-top .bal { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 28px; letter-spacing: -0.03em; margin-top: 6px; } .ps-top .sub { font-size: 11px; opacity: 0.8; margin-top: 2px; } .ps-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .ps-row { display: flex; align-items: center; justify-content: space-between; background: #ffffff0d; border: 1px solid #ffffff14; border-radius: 12px; padding: 11px 13px; } .ps-row .nm { font-size: 12px; font-weight: var(--fw-semibold); color: #fff; } .ps-row .pr { font-size: 12px; font-weight: var(--fw-extrabold); color: #5b9bf0; } .ps-cta { margin: 4px 14px 16px; text-align: center; background: #2b7de9; color: #fff; font-size: 13px; font-weight: var(--fw-extrabold); padding: 13px; border-radius: 12px; } /* tap-to-vend step row */ .tap-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .tap-step { text-align: center; } .tap-step .tn { width: 50px; height: 50px; margin: 0 auto 14px; border-radius: 50%; background: #2b7de91a; border: 1px solid #2b7de933; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .tap-step .tn svg { width: 22px; height: 22px; } .tap-step h4 { font-size: 14px; font-weight: var(--fw-extrabold); color: var(--text-h); margin: 0 0 6px; letter-spacing: -0.01em; } .tap-step p { font-size: 12.5px; line-height: 1.55; color: var(--text-body); margin: 0; } @media (max-width: 860px) { .tap-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .tap-steps { grid-template-columns: 1fr; } } /* mobile-to-machine workflow */ .workflow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .wf-node { background: var(--dark-card); border: 1px solid #ffffff14; border-radius: var(--radius-lg); padding: 18px 16px; text-align: center; } .wf-node .wt { font-size: 13px; font-weight: var(--fw-extrabold); color: #fff; letter-spacing: -0.01em; } .wf-node .ws { display: block; margin-top: 5px; font-size: 11px; color: var(--text-on-dark-quiet); } @media (max-width: 860px) { .workflow { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .workflow { grid-template-columns: 1fr; } } /* ===================================================== BLOCKSY THEME OVERRIDE GUARD (appended) Our CSS loads before wp_head() so Blocksy stylesheets that follow can override equal-specificity rules. This block uses body.cs-detail prefix (extra class) + !important on properties that were observed to be overridden: SVG icon sizes and heading colors in dark. ===================================================== */ /* --- Icon container hard-lock --- Blocksy resets may remove display/width from spans. */ .cs-detail .service-chip .ic { width: 42px !important; height: 42px !important; min-width: 42px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } .cs-detail .feature-badge { width: 48px !important; height: 48px !important; min-width: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } .cs-detail .tap-step .tn { width: 50px !important; height: 50px !important; min-width: 50px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; flex-shrink: 0 !important; } /* --- SVG size hard-lock --- */ .cs-detail .service-chip .ic svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex-shrink: 0 !important; display: block !important; } .cs-detail .feature-badge svg { width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; flex-shrink: 0 !important; display: block !important; } .cs-detail .tap-step .tn svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex-shrink: 0 !important; display: block !important; } .cs-detail .theme-toggle svg { width: 18px !important; height: 18px !important; display: block !important; } .cs-detail .video-mock .play svg { width: 28px !important; height: 28px !important; display: block !important; } .cs-detail .cd-back svg { width: 14px !important; height: 14px !important; display: block !important; } .cs-detail .ghost-link svg, .cs-detail .primary-btn svg, .cs-detail .secondary-btn-dark svg { width: 16px !important; height: 16px !important; display: block !important; } /* --- Heading color hard-lock (dark sections) --- Blocksy h2/h3/h4 { color: var(--theme-heading-color) } loads later; force white in our dark contexts. */ .cs-detail .exec-copy h2 { color: #fff !important; } .cs-detail .exec-point h4 { color: #fff !important; } .cs-detail .section--dark .feature-card h3, .cs-detail .section--dark .step-card h3 { color: #fff !important; } .cs-detail .section--dark .banner-card h3 { color: #fff !important; } .cs-detail .section--dark .section-heading h2 { color: #fff !important; } .cs-detail .section--dark .wf-node .wt { color: #fff !important; } /* --- Heading color lock (light sections) --- */ .cs-detail .section-heading h2 { color: var(--text-h) !important; } .cs-detail .feature-card h3 { color: var(--text-h) !important; } .cs-detail .step-card h3 { color: var(--text-h) !important; } .cs-detail .related-card h3 { color: var(--text-h) !important; } .cs-detail .quote-block blockquote { color: var(--text-h) !important; } /* --- Metric value colors --- */ .cs-detail .snapshot-metric .mv { color: var(--accent-bright) !important; } .cs-detail .result-card .v { color: var(--accent-bright) !important; } .cs-detail .banner-stat .v { color: var(--accent-bright) !important; } .cs-detail .feature-card .metric { color: var(--accent) !important; } /* ===================================================== MOBILE OVERHAUL — overflow fix + layout polish ===================================================== */ body { overflow-x: hidden; } @media (max-width: 768px) { .cd-hero { padding: 110px 0 64px; } .cd-hero h1 { font-size: clamp(28px, 8vw, 48px); } .snapshot { max-width: 100%; } .hero-actions { flex-direction: column; gap: 10px; } .hero-actions .primary-btn, .hero-actions .secondary-btn-dark { width: 100%; justify-content: center; text-align: center; } } @media (max-width: 640px) { .cd-hero { padding: 92px 0 56px; } .cd-meta-row { gap: 6px; } .cd-meta { font-size: 10px; padding: 5px 9px; } .section { padding: 48px 0; } .section-heading h2 { font-size: clamp(22px, 6vw, 32px); } .ba-grid { grid-template-columns: 1fr; } .final-cta-card { padding: 40px 20px; border-radius: 18px; } .final-cta-actions { flex-direction: column; align-items: stretch; } .final-cta-actions .primary-btn, .final-cta-actions .secondary-btn-dark { width: 100%; justify-content: center; } .footer-top { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .banner-card { flex-direction: column; align-items: flex-start; padding: 24px 20px; } .banner-stat { text-align: left; } .results-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .cd-hero { padding: 84px 0 48px; } .nav-wrap { gap: 8px; padding: 10px 0; } .snapshot { border-radius: 14px; } .results-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .feature-grid, .feature-grid.cols-2 { grid-template-columns: 1fr; } .final-cta-card { padding: 32px 16px; } .final-cta-card h2 { font-size: clamp(24px, 7vw, 32px) !important; } .overview-grid { grid-template-columns: 1fr; gap: 24px; } .facts-card { padding: 20px; } }