/* Portfolio detail page (single `portfolio` CPT item). Tier 1 port (see single-portfolio.php's header comment and references/WORDPRESS_DEVELOPMENT.md §8.2): this is the OLD theme's proven `.portfolio-detail`/`.case-study-list`/... CSS (old-wordpress/tbi/tbi/style.css, ~lines 4550-4930), retinted onto this site's design tokens rather than rebuilt from scratch. Layout logic (feature-grid column math, alternating image/text rows, two-column/ four-column/video-wrapper modifiers) is unchanged from the old theme — it was already tested against every real post's structural variance. Retint changes from the old theme: - Poppins already matches (var(--font-display)) — no font swap needed. - Old near-black/slate body text (#070707 / #414C5B) -> this site's heading/body tone (#0b0b12 / #55576b), consistent with other pages. - Old yellow CTA (#F8B532) -> this site's purple accent + the existing scale-hover CTA pattern (references/ANIMATION.md, pattern 5). - Old category-pill white hover -> the site's pill highlight pattern (ANIMATION.md, pattern 2: darker purple + glow), not a plain white fill. - Breadcrumb/glass panels kept (works on a dark background either way). - Old theme colored the banner per-post via the `portfolio_color` ACF field (e.g. flat #E7A701 on the "Website Makeover Boosts Sales by 400%" post — confirmed live on production, not a bug, just what that field held). Per explicit decision, this port does NOT do that: every portfolio detail page now shares ONE fixed banner background, matching the Figma-driven design's own .case-hero treatment (see css/our-work-detail.css: solid #0b041b + a purple radial glow) instead of varying per post. single-portfolio.php no longer reads portfolio_color/portfolio_gradient_color for this. */ /* This site's global `body` background is dark (base.css, #0d0714) — every other page's content area explicitly overrides it back to white (css/our-work-detail.css's `.case-detail { background-color: #ffffff }` is the precedent). Without this, the near-black text below reads almost invisibly against the dark body. */ .portfolio-detail { background-color: #ffffff; } /* ---------- In-page jump nav ---------- */ /* Matches css/our-work-detail.css's `.case-jumpnav` exactly (color, sizing, hover state, fixed 5-tab labels + active state) — sits between the site header and the banner. See single-portfolio.php for how the 5 fixed tabs (Overview / The Problem / Our Approach / The Solution / Results) map to each real post's actual `.casestudy-phead` headings. */ /* Smooth "sliding" scroll on tab click — CSS-only (`scroll-behavior`), not a JS library. This theme has no jQuery dependency anywhere (confirmed: not enqueued in functions.php, js/main.js is vanilla JS throughout) — adding jQuery for a single anchor-scroll effect would be a new dependency the project doesn't otherwise need, and native `scroll-behavior: smooth` + `scroll-margin-top` gets the identical user-facing result with zero JS. Scoped to this template only via `body.single-portfolio` (WordPress's own body_class() output for this CPT), not applied site-wide. `scroll-margin-top` on the heading targets compensates for the sticky site header (css/header.css: `.site-header { position: sticky; }`, measured 93px) — without it, the header would cover the top of each section right after the smooth-scroll lands. */ /* scroll-behavior must be set on the actual scrolling root (), not — body isn't the document's scrolling element and the rule would silently do nothing there. */ html:has(body.single-portfolio) { scroll-behavior: smooth; } .portfolio-detail .casestudy-phead { scroll-margin-top: 113px; } .portfolio-jumpnav { background-color: #4d0077; } .portfolio-jumpnav__container { max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding-inline); display: flex; align-items: center; justify-content: flex-end; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .portfolio-jumpnav__container::-webkit-scrollbar { display: none; } .portfolio-jumpnav__link { flex: 0 0 auto; padding: 13px 20px; font-family: var(--font-base); font-size: 15px; color: #ffffff; white-space: nowrap; text-decoration: none; transition: background-color 0.2s ease; } .portfolio-jumpnav__link:hover, .portfolio-jumpnav__link:focus-visible { background-color: rgba(255, 255, 255, 0.08); } .portfolio-jumpnav__link.is-active { background-color: #7500c0; } .portfolio-detail .container { max-width: 100%; margin: 0 auto; } /* ---------- Banner ---------- */ .portfolio-detail .portfolio-banner { position: relative; overflow: hidden; background-color: #010116; padding: 65px 0; } .portfolio-detail .portfolio-banner .container { max-width: 1280px; padding-inline: var(--container-padding-inline); } .portfolio-detail .hero_bg { width: 100%; max-width: 100%; position: absolute; inset: 0; z-index: 1; opacity: .4; height: 100%; object-fit: cover; object-position: center right; } .portfolio-detail video.hero_bg_video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Fixed, same-on-every-post background — matches css/our-work-detail.css's .case-hero__bg exactly (Figma-driven design's hero treatment). */ /*.portfolio-detail .portfolio-banner:before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 60% at 12% 15%, rgba(161, 0, 255, 0.28) 0%, rgba(11, 4, 27, 0) 60%), radial-gradient(50% 50% at 90% 10%, rgba(118, 5, 245, 0.22) 0%, rgba(11, 4, 27, 0) 65%); }*/ .portfolio-detail .portfolio-banner .breadcrumb-wrap, .portfolio-detail .portfolio-banner__row { position: relative; z-index: 1; } .portfolio-detail .portfolio-banner .breadcrumb-wrap { padding: 12px 0; background: rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); } .portfolio-detail .portfolio-banner .breadcrumbs { font-family: var(--font-base); font-size: 12px; font-weight: bold; color: #CAB5FF; line-height: normal; margin: 0 0 20px; letter-spacing: 2.86px; text-transform: uppercase; display: flex; align-items: center; gap: 5px; width: 100%; max-width: 100%; } .portfolio-detail .portfolio-banner .breadcrumbs a { padding: 0; margin: 0; } .portfolio-banner .breadcrumbs .dot { width: 2px; height: 2px; border-radius: 50%; background: #CAB5FF; line-height: 0; margin-right: 2px; } .portfolio-detail .portfolio-banner .breadcrumbs a:hover { text-decoration: underline; } .portfolio-detail .portfolio-banner__row { display: flex; align-items: center; flex-wrap: wrap; gap: 80px; margin-top: 50px; row-gap: 0; } .portfolio-detail .portfolio-banner__col { flex: 1 1 420px; min-width: 0; } .portfolio-detail .portfolio-banner .title h1 { font-family: 'Inter'; font-weight: 700; color: #ffffff; font-size: clamp(32px, 4.2vw, 64px); line-height: 1.18; margin: 0; letter-spacing: 0; max-width: 540px; } .portfolio-detail .portfolio-banner .post-categories { display: flex; flex-wrap: wrap; list-style: none; margin: 18px 0 0; padding: 0; gap: 10px 8px; } .portfolio-detail .portfolio-banner .post-categories li { border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; border-radius: 999px; text-transform: uppercase; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 14px; transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .portfolio-detail .portfolio-banner .post-categories li:hover { background-color: #9a60fb; border-color: #b96cff; box-shadow: 0 0 0 1px rgba(185, 108, 255, 0.3), 0 8px 20px rgba(120, 60, 200, 0.35); } .portfolio-detail .portfolio-banner .featured-image { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); border-radius: 14px; max-width: 515px; margin-left: auto; } .portfolio-detail .portfolio-banner .featured-image img { display: block; width: 100%; height: auto; border-radius: 14px; object-fit: cover; } .post-stats { display: flex; align-items: center; margin-top: 35px; gap: 20px; justify-content: space-between; } .stats_box { display: flex; flex-direction: column; width: auto; max-width: fit-content; } .post-stats .stats_box .uppr_line { height: 3px; display: block; background: #B96CFF; width: 100%; max-width: 41px; } .post-stats .stats_box .stat_numbers { font-size: 32px; line-height: 35.6px; font-family: 'Inter'; font-weight: 800; color: #fff; margin-top: 20px; display: inline-block; } .post-stats .stats_box .stat_name { font-size: 15px; line-height: 28px; font-family: 'Inter'; font-weight: 400; letter-spacing: 0; color: #ffffffcc; display: inline-block; margin: 12px 0 0; } /* ---------- Content ---------- */ .portfolio-detail .content > .container > .case-study-list, .portfolio-detail .case-study { max-width: 1035px; margin: 0 auto; } .portfolio-detail .case-study-list .casestudy-phead { font-family: var(--font-display); font-weight: 700; color: #0b0b12; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; margin: 64px 0 12px; } .portfolio-detail .case-study-list:first-child .casestudy-phead { margin-top: 0; } .portfolio-detail .case-study-list p { font-family: var(--font-base); font-size: 16px; line-height: 1.8; color: #55576b; margin: 0 0 14px; } .portfolio-detail .case-study-list p:empty { display: none; } .portfolio-detail .case-study-list p a { color: #8a1fff; text-decoration: underline; } /* Feature jump-list */ .portfolio-detail .case-study-list .features-list { display: flex; flex-wrap: wrap; border: 1px solid #e7e3f2; border-radius: 14px; overflow: hidden; margin: 24px 0; } .portfolio-detail .case-study-list .features-list .feature { max-width: 33.33%; width: 100%; display: flex; align-items: center; padding: 16px; border-bottom: 1px solid #e7e3f2; border-right: 1px solid #e7e3f2; transition: background-color 0.2s ease; } .portfolio-detail .case-study-list .features-list .feature:hover { background-color: #f7f2ff; } .portfolio-detail .case-study-list .features-list .feature a { display: flex; align-items: center; text-decoration: none; width: 100%; } .portfolio-detail .case-study-list .features-list .feature img { width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; transition: transform 0.25s ease; } .portfolio-detail .case-study-list .features-list .feature:hover img { transform: scale(1.1); } .portfolio-detail .case-study-list .features-list .feature p { width: calc(100% - 48px); padding-left: 14px; font-size: 15px; line-height: 1.35; color: #0b0b12; margin: 0; font-weight: 700; } .portfolio-detail .case-study-list .features-list .feature:nth-child(3n) { border-right: 0; } .portfolio-detail .case-study-list .features-list .feature:nth-last-child(-n + 3) { border-bottom: 0; } .portfolio-detail .case-study-list .features-list.four-column .feature { max-width: 50%; } .portfolio-detail .case-study-list .features-list.four-column .feature:nth-child(2n) { border-right: 0; } .portfolio-detail .case-study-list .features-list.four-column .feature:nth-child(3n) { border-right: 1px solid #e7e3f2; } .portfolio-detail .case-study-list .features-list.four-column .feature:last-child, .portfolio-detail .case-study-list .features-list.four-column .feature:nth-last-child(2) { border-bottom: 0; } /* Bullet lists (Project Overview / Action Plan) */ .portfolio-detail .case-study-list ul { list-style: none; padding: 0; margin: 0 0 14px; } .portfolio-detail .case-study-list ul li { font-size: 16px; line-height: 1.7; color: #55576b; margin-bottom: 12px; padding-left: 28px; position: relative; } .portfolio-detail .case-study-list ul li:before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 12px; background: #9a60fb; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6l4.5 4.5L15 1' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; } .portfolio-detail .case-study-list ul li strong { color: #0b0b12; } /* Tech Stack grid */ .portfolio-detail .case-study-list.tech ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; column-gap: 16px; margin-top: 18px; } .portfolio-detail .case-study-list.tech ul li { font-family: var(--font-display); font-size: 15px; line-height: 1.5; padding: 0; margin: 0; } .portfolio-detail .case-study-list.tech ul li::before { display: none; } .portfolio-detail .case-study-list.tech ul li strong { display: block; font-size: 16px; color: #0b0b12; margin: 0 0 3px; } /* Alternating image / text rows */ .portfolio-detail .case-study-list .image-content { display: flex; align-items: center; flex-wrap: wrap; gap: 40px; margin-bottom: 70px; } .portfolio-detail .case-study-list.two-column .image-content { margin: 20px 0; } .portfolio-detail .case-study-list.two-column .image-content img { margin-bottom: 16px; border-radius: 12px; } .portfolio-detail .case-study-list .image-content .left-content, .portfolio-detail .case-study-list .image-content .right-image { max-width: calc(50% - 20px); width: 100%; } .portfolio-detail .case-study-list .image-content .right-image img { display: block; width: 100%; height: auto; border-radius: 14px; } .portfolio-detail .case-study-list .image-content .left-content .main-list { margin: 0 0 6px; } .portfolio-detail .case-study-list .image-content .left-content p:last-child { margin: 0; } .portfolio-detail .case-study-list .main-list { font-family: var(--font-display); font-weight: 700; color: #0b0b12; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; display: block; margin: 30px 0 10px; } /* Standalone framed image/video block */ .portfolio-detail .content .image-wrapper { position: relative; text-align: center; padding: 40px 20px; margin: 20px 0 60px; overflow: hidden; } .portfolio-detail .content .image-wrapper:before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 60% at 80% 0%, rgba(154, 96, 251, 0.14), transparent 70%); } .portfolio-detail .content .image-wrapper img, .portfolio-detail .content .image-wrapper video { position: relative; z-index: 1; max-width: 100%; width: 100%; height: auto; padding: 12px; background: rgba(255, 255, 255, 0.5); border: 1px solid #e7e3f2; border-radius: 14px; } .portfolio-detail .content .image-wrapper video { display: block; margin: 0 auto; } /* ---------- Results / closing section ---------- */ /* The Figma-driven design (css/our-work-detail.css: `.case-results`) treats "Results" as its own dedicated dark section — big heading, stat cards, checklist grid. The real post content only has 2-3 freeform paragraphs here (no discrete stat numbers or checklist items to build cards from — same content-shape gap documented in WORDPRESS_DEVELOPMENT.md §8.2), so a full 1:1 port isn't possible without new content structure. This gives the block the same SECTION-LEVEL visual weight (dark panel, prominent heading) instead of blending into the rest of the white page — the closest CSS-only match to design intent. Targeted via :has() at the "Result:"-heading block that sits immediately before the testimonial block — matches every real post's structure (confirmed: the Result section is always the last text `.case-study-list` before `.feedback-wrapper`'s wrapper). Falls back to no special styling on the one post with no testimonial at all (high-performance-print-on-demand-woo-plugin) — acceptable since that post's Result text still reads fine as a plain block, just without the extra visual emphasis. Full-bleed edge-to-edge (matches `.case-results`/`.case-hero`/etc. in the Figma-driven design — every section-level background there spans the full viewport, not just the ~1035px content column every other `.case-study-list` block is capped to). Standard "break out of a centered container" technique: 100vw + negative margins to escape `.case-study-list`'s inherited `max-width: 1035px`/`margin: 0 auto`, then inner padding recalculated so the TEXT still lines up with the rest of the page's content edge instead of running edge-to-edge itself. */ .portfolio-detail .case-study-list:has(> p.casestudy-phead):has(+ .case-study-list .feedback-wrapper) { background-color: #020010; border-radius: 0; width: 100%; max-width: 100%; margin-top: 56px; margin-bottom: 24px; padding-block: clamp(40px, 5vw, 72px); padding-inline: max(var(--container-padding-inline), calc((100vw - var(--container-max-width)) / 2 + var(--container-padding-inline))); } .portfolio-detail .case-study-list:has(> p.casestudy-phead):has(+ .case-study-list .feedback-wrapper) .casestudy-phead { color: #ffffff; font-size: clamp(26px, 2.6vw, 34px); margin-top: 0; } .portfolio-detail .case-study-list:has(> p.casestudy-phead):has(+ .case-study-list .feedback-wrapper) p { color: rgba(255, 255, 255, 0.72); } /* ---------- Testimonial ---------- */ /* Matches css/our-work-detail.css's `.case-testimonial` exactly: a full-bleed section (flat #f7f5f9, not a floating card), a large quote mark ahead of the text, and a plain name/role footer — not the boxed rounded-card-with-divider layout this used to have. Same full-bleed technique as the Results panel above, but with the content column centered/capped at 960px (matching `.case-testimonial__container`) instead of aligned to the page's own wider edge, since that's what the Figma reference actually does here. One real difference from the Figma reference, kept deliberately: the real post content includes a star rating (`.rating-sec` — 5.0/5.0 + star image) that `.case-testimonial` has no equivalent for at all. That real data isn't dropped — folded into the name/role footer as a small, de-emphasized accessory instead of the old design's large centered rating column, so the layout stays close to Figma while not discarding real content. */ .portfolio-detail .case-study-list:has(> .feedback-wrapper) { background-color: #f7f5f9; width: 100%; max-width: 100%; margin-top: 0; margin-bottom: 24px; padding-block: clamp(56px, 8vw, 96px); } .portfolio-detail .content .feedback-wrapper { max-width: 960px; margin-inline: auto; padding-inline: var(--container-padding-inline); display: flex; flex-direction: column; gap: 40px; } .portfolio-detail .content .feedback-wrapper:before { content: '\201C'; display: block; font-family: var(--font-display); font-weight: 700; font-size: 70px; line-height: 1; color: #cec9d0; } .portfolio-detail .content .feedback-wrapper .comment { margin-top: -32px; } .portfolio-detail .content .feedback-wrapper .comment p { font-family: var(--font-base); font-size: clamp(20px, 1vw + 14px, 27px); line-height: 1.52; color: #716a79; margin: 0; } .portfolio-detail .content .feedback-wrapper .rating-sec { display: flex; align-items: center; gap: 14px; text-align: left; } .portfolio-detail .content .feedback-wrapper .rating-sec .name { font-family: var(--font-base); font-weight: 800; font-size: 14px; color: #171717; margin: 0; order: 1; } .portfolio-detail .content .feedback-wrapper .rating-sec p { font-family: var(--font-base); font-weight: 700; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(23, 23, 23, 0.5); margin: 0; order: 2; } .portfolio-detail .content .feedback-wrapper .rating-sec span { order: 3; font-family: var(--font-base); font-size: 12px; font-weight: 700; color: #171717; padding-left: 14px; border-left: 1px solid rgba(23, 23, 23, 0.15); } .portfolio-detail .content .feedback-wrapper .rating-sec img { order: 4; width: 78px; height: auto; } /* ---------- Prev / next nav ---------- */ .nav-single { margin: 0; display: flex; align-items: stretch; justify-content: center; column-gap: 12px; padding: 0 0 40px; } .nav-single .nav-button a { font-family: var(--font-base); font-size: 15px; font-weight: 700; color: #55576b; line-height: normal; display: flex; align-items: center; gap: 8px; padding: 13px 18px; border: 1px solid #e2e2ea; border-radius: 999px; height: 100%; transition: color 0.25s ease, border-color 0.25s ease; } .nav-single .nav-button a:hover, .nav-single .nav-button a:focus-visible { color: #8a1fff; border-color: #b96cff; } .nav-single .nav-button.nav-all a { padding: 13px; color: #0b0b12; } /* ---------- Bottom CTA ---------- */ .portfolio-cta { background: #1b0b2e; border-radius: 24px; padding: 56px 40px; margin: 40px 0 0; text-align: center; } .portfolio-cta .content h3 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 700; color: #ffffff; margin: 0 0 10px; line-height: normal; } .portfolio-cta .content p { font-family: var(--font-base); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin: 0 0 24px; } .portfolio-cta .content .btn_common { display: inline-flex; align-items: center; gap: 8px; background: #9a60fb; color: #ffffff; font-family: var(--font-base); font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 999px; padding: 14px 28px; transition: transform 0.2s ease; } .portfolio-cta .content .btn_common:hover, .portfolio-cta .content .btn_common:focus-visible { transform: scale(1.06); } /* ---------- Touch guard + reduced motion (ANIMATION.md pattern 8) ---------- */ /* -------------------------------------------------------------------- Promo CTA — dual card (AI-Readiness Audit / Ask Jovian) Figma: node 15536:21093 (auto-named "Tech News" from a stray text layer per the known Figma-naming quirk — this is a two-CTA promo, not article content). -------------------------------------------------------------------- */ .promo-cta { background-color: #fff; padding-block: clamp(48px, 8vw, 120px); } .promo-cta__container { max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding-inline); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .promo-cta__card { border-radius: 20px; padding: clamp(28px, 3vw, 48px) 35px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .promo-cta__card--audit { background-color: #f6e33b; } .promo-cta__card--jovian { background-color: #050216; background-image: radial-gradient(circle at 100% 100%, #633060ba, rgba(154, 96, 251, 0) 60%); } .promo-cta__eyebrow { font-family: var(--font-base); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-purple); } .promo-cta__eyebrow--light { color: #b67ae8; } .promo-cta__heading { font-family: var(--font-base); font-weight: 900; font-size: clamp(26px, 2.8vw, 34px); color: #171717; margin: 0; } .promo-cta__heading--light { color: var(--color-text-light); } .promo-cta__text { font-family: var(--font-base); font-size: 16px; line-height: 1.625; color: rgba(25, 24, 27, 0.7); margin: 0; max-width: 34em; } .promo-cta__text--light { color: rgba(255, 255, 255, 0.7); } .promo-cta__button { display: inline-flex; align-items: center; gap: 10px; height: 64px; padding-inline: 36px; border-radius: 0; font-family: var(--font-mono-label); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-text-light); margin-top: 8px; transition: transform 0.2s ease; } .promo-cta__button--dark { background-color: #171717; } .promo-cta__button--purple { background-color: #7605f5; } .promo-cta__button:hover, .promo-cta__button:focus-visible { transform: scale(1.08); } /* -------------------------------------------------------------------- Tablet -------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { .promo-cta__container { grid-template-columns: 1fr; gap: 24px; } } /* -------------------------------------------------------------------- Mobile -------------------------------------------------------------------- */ @media (max-width: 767px) { .promo-cta__container { grid-template-columns: 1fr; gap: 20px; } .promo-cta__heading { font-size: 26px; } .promo-cta__button { height: 56px; padding-inline: 28px; font-size: 14px; } } @media (max-width: 479px) { .promo-cta__button { width: 100%; justify-content: center; } } /*Custom Css by Tbi*/ .wp-block-group.overview_section_row { width: 100%; max-width: 1280px; margin-inline: auto; padding: 90px 0; gap: 56px; padding-inline: var(--container-padding-inline); } .overview_section_row .overview_left_g { width: 100%; max-width: calc(100% - 374px); } .overview_section_row .overview_right_g { width: 100%; max-width: 374px; } .portfolio-detail .content h2 { font-size: 56px; line-height: 58.5px; letter-spacing: -2.08px; font-family: 'Inter'; font-weight: bold; color: #171717; margin-bottom: 26px; } .portfolio-detail .content .sub_heading { color: #A100FF; font-size: 12px; line-height: normal; text-transform: uppercase; font-weight: bold; margin: 0 0 12px; } .portfolio-detail .content p { font-size: 16px; font-family: 'Inter'; font-weight: 400; line-height: 29px; color: #51495A; letter-spacing: -0.17px; margin: 19px 0; } .wp-block-group.overview_box { padding: 0; background: #FFFFFF; border: 1px solid rgba(110, 44, 229, 0.16); box-shadow: 0px 0px 16px rgba(185, 108, 255, 0.14); border-radius: 16px; transition: all .3s ease; } .wp-block-group.overview_box:hover { transform: translateY(-4px); border-color: rgba(185, 108, 255, 0.6); box-shadow: 0 16px 32px rgba(120, 60, 200, 0.2); } .wp-block-group.overview_boxhead { padding: 20px 24px; align-items: center; justify-content: space-between; } .wp-block-group.boxhead_title_box { gap: 12px; align-items: center; } .wp-block-group.boxhead_title_box .boxhead_tag { background: #f0e7ff; width: 32px; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 17px; color: #B96CFF; line-height: normal; font-weight: bold; font-family: 'Inter'; } .wp-block-group.boxhead_title_box .boxhead_title { font-size: 17px; color: #5B5264; letter-spacing: -0.43px; line-height: normal; font-family: 'Inter'; font-weight: bolder; } .wp-block-group.overview_boxhead .boxhead_side { color: #99A1AF; font-family: 'Inter'; font-size: 12px; letter-spacing: 1.2px; line-height: 16px; font-weight: bold; text-transform: uppercase; } .wp-block-group.overview_box_row p { margin: 0; } .wp-block-group.overview_box_row { padding: 16px 24px; gap: 16px; align-items: center; border-top: 1px solid #6e2ce529; } .wp-block-group.overview_box_row .o_box_row_title { width: 100%; max-width: 35%; font-size: 12px; color: #9199A7; font-weight: 600; line-height: 16px; letter-spacing: 0.6px; text-transform: uppercase; } .wp-block-group.overview_box_row .o_box_row_desc { width: 100%; max-width: 65%; text-align: left; color: #000; font-size: 14px; line-height: 19.3px; letter-spacing: 0; font-weight: 400; } .wp-block-group.overview_boxhead p { margin: 0; } .wp-block-group.dark_section { padding: 90px 0; padding-inline: var(--container-padding-inline); background: #020010; } .wp-block-group.dark_section > .wp-block-group__inner-container { width: 100%; max-width: 1200px; margin-inline: auto; } .wp-block-group.dark_sec_row { gap: 72px; flex-wrap: wrap; } .wp-block-group.dark_sec_left { width: 100%; max-width: calc(49% - (72px/2)); } .wp-block-group.dark_sec_right { width: 100%; max-width: calc(51% - (72px/2)); } .wp-block-group.dark_sec_left h2 { color: #fff; font-size: 70px; letter-spacing: -3.15px; line-height: 75.6px; font-weight: 500; margin-bottom: 22px; } .wp-block-group.dark_sec_left h2 strong { font-weight: 600; } .wp-block-group.dark_sec_left p { font-size: 18px; line-height: 29px; color: #ffffffb3; } .wp-block-group.dark_sec_grid { gap: 24px; } .wp-block-group.dark_sec_grid_stack { border: 1px solid #9b89ff2e; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; background: linear-gradient(145deg, #0D0B17 6.17%, #090813 93.83%); justify-content: flex-start; gap: 0; transition: all .3s ease; } .wp-block-group.dark_sec_grid_stack:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(120, 60, 200, 0.2); } .wp-block-group.dark_sec_grid_stack .grid_stack_num.wp-block-paragraph { margin: 0; background: #f0e7ff; width: 48px; min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 16px; color: #B96CFF; line-height: normal; font-weight: bold; font-family: 'Inter'; letter-spacing: 1.04px; } .wp-block-group.dark_sec_grid_stack .grid_stack_para.wp-block-paragraph { font-size: 16px; letter-spacing: -0.25px; line-height: 22px; color: #fff; font-family: 'Inter'; font-weight: 500; margin: 30px 0 6px; } .wp-block-group.dark_sec_grid_stack .wp-block-paragraph { font-size: 14px; letter-spacing: -0.25px; line-height: 20px; color: rgb(255 255 255 / 70%); margin: 0; font-family: 'Inter'; font-weight: 400; } .wp-block-group.dark_sec_left .sub_heading.wp-block-paragraph { color: #CAB5FF; } .wp-block-group.light_feature_sec { background: #F7F5F9; padding: 90px 0; padding-inline: var(--container-padding-inline); } .light_feature_sec > .wp-block-group__inner-container { width: 100%; max-width: 1200px; margin-inline: auto; } .wp-block-group.feature_sec_headings .sub_heading { margin: 0 0 20px; } .feature_sec_headings > .wp-block-group__inner-container { max-width: 795px; } .feature_sec_points { margin-top: 56px; } .feature_sec_points > .wp-block-group__inner-container { width: 100%; max-width: 1015px; margin-inline: auto; } .feature_sec_points .wp-block-group.feature_points_row { padding: 48px 0; gap: 44px; border-top: 1px solid #26152f1f; align-items: start; } .feature_sec_points .wp-block-group .wp-block-group { padding: 0; } .wp-block-group.feature_point_num_block .feature_point_num { color: #909090; font-size: 60px; line-height: 60px; font-family: 'Inter'; font-weight: bold; margin: 0; transition: all .3s; } .feature_sec_points .wp-block-group.feature_points_row:hover .feature_point_num { color: #7605F5; } .wp-block-group.feature_point_details_block .feature_point_title { color: #111111; font-size: 24px; line-height: 31px; letter-spacing: -0.88px; font-family: 'Inter'; font-weight: 650; margin: 0 0 4px; } .wp-block-group.feature_point_details_block .wp-block-paragraph { font-size: 16px; line-height: 24px; color: #51495A; letter-spacing: -0.17px; margin: 7px 0 0; } .feature_sec_points .wp-block-group.feature_points_row:last-child { border-bottom: 1px solid #26152f1f; } .wp-block-group.feature_sec_headings .sub_heading.wp-block-paragraph { color: #A100FF; } .wp-block-group.feature_point_num_block { width: 100%; max-width: 180px; min-width: 180px; } .wp-block-group.solutions_section { background: #fff; padding: 90px 0; padding-inline: var(--container-padding-inline); } .solutions_section > .wp-block-group__inner-container { width: 100%; max-width: 1200px; margin-inline: auto; } .wp-block-group.solutions_grid_block { margin-top: 56px; } .wp-block-group.solutions_grid { gap: 24px; } .wp-block-group.solutions_grid_box { border: 1px solid #0000001a; padding: 24px; background: #FAF9FD; transition: all .3s ease; } .wp-block-group.solutions_grid_box:hover { transform: translateY(-4px); border-color: rgba(185, 108, 255, 0.6); box-shadow: 0 16px 32px rgba(120, 60, 200, 0.2); } .s_grid_box_icon .wp-block-image { width: 56px; max-width: fit-content; min-width: 56px; height: 56px; background: #f0e7ff; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin: 0 0 20px; } .wp-block-group.solutions_grid_box .wp-block-heading { color: #171717; font-size: 22px; line-height: 28px; font-family: 'Inter'; font-weight: 800; letter-spacing: 0; } .wp-block-group.solutions_grid_box p { line-height: 28px; color: #171717b8; margin: 10px 0 0; } .wp-block-group.solutions_section_img .ss_img { border: 1px solid #0000001a; background: #FAF9FD; margin-top: 32px; padding: 10px; } .wp-block-group.ss_img img { width: 100%; max-width: 100%; height: auto; } .wp-block-group.ss_img figure { margin: 0; } .wp-block-group.ss_img { background: #FAF9FD; padding: 10px; border: 1px solid #0000001a; margin: 32px 0 0; } .wp-block-group.ssi_text { background: #fff; padding: 20px; border: 1px solid #0000001a; border-top: 0; } .wp-block-group.ssi_text p.wp-block-paragraph { margin: 0; font-size: 13px; color: #17131E; font-family: 'Inter'; font-weight: 700; line-height: 20px; } .wp-block-group.ssi_text p.ss_text_right.wp-block-paragraph { color: #716A79; font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0; } .wp-block-group.results_sec { background: #020010; padding: 90px 0; padding-inline: var(--container-padding-inline); } .wp-block-group.results_sec > .wp-block-group__inner-container { width: 100%; max-width: 1200px; margin-inline: auto; } .wp-block-group.results_sec_head h2 { color: #fff; } .wp-block-group.results_sec_head { margin: 0 0 48px; } .wp-block-group.results_sec_grid { gap: 20px; } p.rs_grid_box_desc.wp-block-paragraph { font-size: 16px; line-height: 24px; letter-spacing: -0.25px; color: #ffffffa3; font-family: 'Inter'; font-weight: 500; margin: 20px 0 0; } p.rs_grid_box_title.wp-block-paragraph { color: #B96CFF; font-size: 52px; line-height: 52px; margin: 0; letter-spacing: -2.08px; font-family: 'Inter'; font-weight: 700; } .wp-block-group.results_sec_grid_box { background: #b96cff0a; border: 1px solid #9b89ff2e; padding: 28px 32px; border-radius: 26px; transition: all .3s ease; } .wp-block-group.results_sec_grid_box:hover { transform: scale(1.03); box-shadow: 0 16px 32px rgba(120, 60, 200, 0.2); } .wp-block-group.results_sec_list_row { margin: 22px 0 0; gap: 55px; } .wp-block-list.results_sec_list { color: #fff; } .wp-block-list.results_sec_list li { font-size: 16px; line-height: 25px; font-weight: 400; font-family: 'Inter'; letter-spacing: 0; color: #C6C2CA; margin: 19px 0 0; position: relative; padding-left: 32px; } .wp-block-list.results_sec_list li strong { font-weight: 600; color: #fff; } .wp-block-list.results_sec_list li:before { content: ''; position: absolute; left: 0; width: 20px; height: 20px; top: 2px; background-image: url('../assets/icons/tickicon.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } .wp-block-group.testimonial_sec { background: #F7F5F9; padding: 100px 0; padding-inline: var(--container-padding-inline); } .wp-block-group.testimonial_sec_innr { width: 100%; max-width: 960px; margin-inline: auto; } .wp-block-group.testimonial_sec_innr h2.wp-block-heading { font-size: 52px; line-height: 56px; letter-spacing: -2.08px; margin-bottom: 32px; } .wp-block-group.testimonial_box .testimonial_quote_img { margin: 0 0 35px; } .testimonial_quote_img img { width: 100%; max-width: 30px; } blockquote.wp-block-quote.testimonial_box_quote p { color: #716A79; font-size: 27px; line-height: 41px; letter-spacing: 0; } blockquote.wp-block-quote.testimonial_box_quote { margin: 0 0 46px; } .wp-block-group.testimonial_box .testimonial_box_name { font-size: 14px; line-height: normal; margin: 0; color: #171717; font-weight: 800; letter-spacing: 0; } .wp-block-group.testimonial_box .testimonial_box_desig { color: #17171780; font-size: 12px; line-height: normal; font-weight: 700; letter-spacing: 0.88px; text-transform: uppercase; margin: 8px 0 0; } .portfolio-detail .faq .faq__heading { color: #F7F7F8; } .portfolio-detail .faq .faq__answer p { color: #AAB1C0; } .promo-cta .promo-cta__card .promo-cta__heading { margin: 0; font-size: 34px; line-height: normal; font-weight: 900; letter-spacing: 0; } .promo-cta .promo-cta__card .promo-cta__text { margin: 0; } .promo-cta__card.promo-cta__card--jovian .promo-cta__heading.promo-cta__heading--light { color: #fff; } .promo-cta__card.promo-cta__card--jovian .promo-cta__text.promo-cta__text--light { color: #ffffffb3; } .portfolio-template-default section.faq { padding-block: 100px; } /*--------*/ @media (hover: none) and (pointer: coarse) { .portfolio-detail .portfolio-banner .post-categories li:hover, .portfolio-detail .case-study-list .features-list .feature:hover img, .portfolio-cta .content .btn_common:hover { background-color: initial; transform: none; } } @media (prefers-reduced-motion: reduce) { .portfolio-detail .portfolio-banner .post-categories li, .portfolio-detail .case-study-list .features-list .feature img, .nav-single .nav-button a, .portfolio-cta .content .btn_common { transition: none !important; } .portfolio-cta .content .btn_common:hover { transform: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .portfolio-detail .portfolio-banner .featured-image { order: -1; } .portfolio-detail .case-study-list .image-content .left-content, .portfolio-detail .case-study-list .image-content .right-image { max-width: 100%; } .portfolio-detail .case-study-list .features-list .feature { max-width: 50%; } .portfolio-detail .case-study-list .features-list .feature:nth-child(3n) { border-right: 1px solid #e7e3f2; } .portfolio-detail .case-study-list .features-list .feature:nth-child(2n) { border-right: 0; } .portfolio-detail .case-study-list.tech ul { grid-template-columns: 1fr 1fr; } /* .feedback-wrapper is a plain column layout now (matches .case-testimonial) — no split/divider to collapse here anymore. */ .portfolio-detail .content .feedback-wrapper .rating-sec { flex-wrap: wrap; } } @media (max-width: 479px) { .portfolio-detail .content .feedback-wrapper:before { font-size: 52px; } } @media (max-width: 767px) { /* flex-end (desktop) would hide the first tab off-screen behind the horizontal scroll on mobile — matches .case-jumpnav__container's own mobile override in css/our-work-detail.css. */ .portfolio-jumpnav__container { justify-content: flex-start; } .portfolio-detail .content { padding: 44px 0; } .portfolio-detail .case-study-list .features-list .feature { max-width: 100%; border-right: 0 !important; } .portfolio-detail .case-study-list.tech ul { grid-template-columns: 1fr; } .portfolio-detail .case-study-list .image-content { gap: 20px; margin-bottom: 40px; } .portfolio-cta { padding: 40px 24px; } .portfolio-detail .portfolio-banner .breadcrumbs { flex-wrap: wrap; } .post-stats { align-items: start; gap: 20px; } .post-stats .stats_box .stat_numbers { font-size: 28px; line-height: normal; } .post-stats .stats_box .stat_name { line-height: normal; font-size: 14px; margin-top: 8px; } .portfolio-detail .content h2 { font-size: 32px; line-height: normal; } .wp-block-group.results_sec_head { margin: 0 0 40px; } .wp-block-group.results_sec_grid_box { padding: 25px 21px; } .wp-block-group.overview_section_row { flex-wrap: wrap; gap: 40px; } .overview_section_row .overview_left_g, .overview_section_row .overview_right_g { max-width: 100%; } .wp-block-group.dark_sec_row { gap: 40px; } .wp-block-group.dark_sec_left, .wp-block-group.dark_sec_right { max-width: 100%; } .wp-block-group.dark_sec_grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .wp-block-group.dark_sec_grid_stack { gap: 0; } .feature_sec_points .wp-block-group.feature_points_row { gap: 20px; padding: 35px 0; } .wp-block-group.feature_point_num_block .feature_point_num { font-size: 40px; line-height: normal; } .wp-block-group.feature_point_details_block .feature_point_title { font-size: 20px; line-height: normal; } .wp-block-group.feature_point_details_block .wp-block-paragraph { font-size: 15px; } .wp-block-group.solutions_section { padding-block: 65px; } .wp-block-group.solutions_grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } .wp-block-group.results_sec { padding-block: 64px; } .wp-block-group.results_sec_grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } p.rs_grid_box_title.wp-block-paragraph { font-size: 32px; line-height: 32px; } p.rs_grid_box_desc.wp-block-paragraph { font-size: 15px; margin: 15px 0 0; } .wp-block-group.results_sec_list_row { gap: 10px; flex-wrap: wrap; } .wp-block-group.testimonial_sec { padding-block: 65px; } .wp-block-group.testimonial_sec_innr h2.wp-block-heading { font-size: 32px; line-height: normal; } blockquote.wp-block-quote.testimonial_box_quote p { font-size: 18px; line-height: 32px; } .promo-cta .promo-cta__card .promo-cta__heading { font-size: 28px; line-height: normal; } .nav-single { padding: 0; } .portfolio-detail .portfolio-banner__row { margin-top: 0; gap: 60px; } .wp-block-group.overview_section_row { padding-block: 65px; padding-top: 10px; } .wp-block-group.dark_section { padding-block: 65px; } .wp-block-group.light_feature_sec { padding-block: 65px; } .wp-block-group.feature_point_num_block { min-width: auto; max-width: fit-content; } }