/* * Portfolio project detail pages (`/new-portfolio/*`). * * Live Webflow sets `class="body-3"` on ` for a full-page lavender * background (#dde3ff). Our app splits chrome (header / main / footer), so * `.portfolio-project-shell` + `:has()` extend the same colour edge-to-edge. * * Loaded from `app/(legacy)/new-portfolio/layout.tsx`. */ :root { --ads-portfolio-project-bg: #dde3ff; } body:has(.portfolio-project-shell), body:has(.portfolio-project-shell) #main { background-color: var(--ads-portfolio-project-bg); } .portfolio-project-shell, .wf-body.body-3 { background-color: var(--ads-portfolio-project-bg); width: 100%; min-height: 100%; } /* * Accessible purple on project detail pages. * Legacy Webflow uses --purple (#97a7ea), which fails contrast on white and * lavender. Match site tokens: iris-140 (#1a1b66) on lavender backgrounds. */ .portfolio-project-shell { --ads-portfolio-accent: #1a1b66; } .portfolio-project-shell .text-block-9, .portfolio-project-shell .prod-type-comma, .portfolio-project-shell .text-block-14, .portfolio-project-shell .link-block-7 { color: var(--ads-portfolio-accent); -webkit-text-stroke-color: var(--ads-portfolio-accent); } /* Metadata + "Back to projects" icons are light-purple PNGs; darken to match. */ .portfolio-project-shell .flex-block-22 .image-12:not(.author-image-2), .portfolio-project-shell .flex-block-22 .image-16, .portfolio-project-shell .link-block-7 .image-22 { filter: brightness(0) saturate(100%) invert(11%) sepia(42%) saturate(3182%) hue-rotate(221deg) brightness(95%) contrast(96%); } /* Case-study CTA pills: avoid equal flex shrink wrapping long labels. */ .portfolio-project-shell .flex-block-27 .link-block-5 { flex: 0 1 auto; width: fit-content; max-width: none; } .portfolio-project-shell .link-block-5 .text-block-13 { white-space: nowrap; } /* Long titles wrap; ensure every line stays visually centered. */ .portfolio-project-shell .flex-block-23 { align-items: center; width: 100%; } .portfolio-project-shell .heading-two { display: block; width: 100%; max-width: 100%; text-align: center; } /* Top-align hero card with the description column (e.g. KEY FEATURES). */ .portfolio-project-shell .flex-block-17 { align-items: flex-start; align-content: flex-start; place-items: start; place-content: start flex-start; } @media screen and (max-width: 991px) { .portfolio-project-shell .flex-block-17 { align-items: flex-start; } }