/* ========================================================= MICHAEL WOOD — CASE STUDIES V2 ========================================================= */ :root { --case-ink: #081225; --case-copy: #53617a; --case-dark: #050b1a; --case-soft: #f8faff; --case-border: #e1e6ed; --case-blue: #3f67e8; --case-cyan: #62d9f4; --case-purple: #825fe7; } .caseStudyPage { color: var(--case-ink); background: #fff; } .caseContainer { width: min(1500px, calc(100% - 60px)); margin: 0 auto; } .caseWhite { background: #fff; } .caseSoft { background: var(--case-soft); } .caseDark { color: #fff; background: var(--case-dark); } /* ========================================================= SHARED ========================================================= */ .caseEyebrow { display: inline-flex; align-items: center; gap: 11px; color: var(--case-cyan); font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; } .caseEyebrow>span { width: 28px; height: 1px; background: linear-gradient(90deg, var(--case-cyan), var(--case-purple)); } .caseEyebrow--dark { color: #315f93; } .caseEyebrow--dark>span { background: #5577a0; } .caseButton { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; border-radius: 5px; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .caseButton:hover { transform: translateY(-2px); } .caseButton--primary { color: #fff; border: 1px solid rgba(98, 217, 244, .28); background: linear-gradient(110deg, #3f67e8, #7659df); box-shadow: 0 18px 42px rgba(54, 75, 210, .19); } .caseButton--outline { color: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .025); } .caseTextLink { color: #263653; font-size: 10px; font-weight: 850; text-decoration: none; } .caseTextLink span { color: var(--case-blue); } .caseSectionHead { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 80px; align-items: end; margin-bottom: 38px; } .caseSectionHead h2, .caseOverview h2, .caseWorkflow h2, .caseFaq h2 { max-width: 900px; margin: 15px 0 0; font-size: clamp(44px, 5vw, 72px); line-height: .98; letter-spacing: -.06em; } .caseWhite h2, .caseSoft h2 { color: var(--case-ink); } .caseWhite h2 span, .caseSoft h2 span { background: linear-gradient(100deg, #4769df 0%, #6d63da 48%, #8a62df 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .caseDark h2 { color: #fff; } .caseDark h2 span { background: linear-gradient(100deg, #4769df 0%, #6d63da 48%, #8a62df 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .caseSectionHead__copy { margin: 0; color: var(--case-copy); font-size: 14px; line-height: 1.75; } .caseSwipeHint { display: none; align-items: center; justify-content: space-between; margin-top: 14px; color: #647089; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================= REVEALS ========================================================= */ .caseReveal { opacity: 1; transform: none; } /* * Animation is progressive enhancement. * JS adds .caseJs to . * If JS ever fails or is missing, the page stays fully visible. */ .caseJs .caseReveal { opacity: 0; transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); } .caseJs .caseReveal--left { transform: translateX(-52px); } .caseJs .caseReveal--right { transform: translateX(52px); } .caseJs .caseReveal--swing { transform: translateY(42px) rotate(1.8deg); transform-origin: 50% 0%; } .caseJs .caseReveal.is-visible { opacity: 1; transform: translate(0, 0) rotate(0); } .caseDelay1 { transition-delay: .08s; } .caseDelay2 { transition-delay: .16s; } .caseDelay3 { transition-delay: .24s; } .caseDelay4 { transition-delay: .32s; } /* ========================================================= CASE STUDY HUB HERO ========================================================= */ .caseHubHero, .caseHero { position: relative; overflow: hidden; background: var(--case-dark); } .caseHubHero__grid, .caseHero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; } .caseHubHero__glow, .caseHero__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(95px); pointer-events: none; } .caseHubHero__glow--one, .caseHero__glow--one { left: -190px; top: 70px; background: rgba(64, 99, 224, .12); } .caseHubHero__glow--two, .caseHero__glow--two { right: -210px; bottom: -250px; background: rgba(115, 79, 218, .10); } .caseHubHero__breadcrumbs, .caseHero__breadcrumbs { position: relative; z-index: 3; padding-top: 28px; } .caseHubHero__inner { position: relative; z-index: 2; min-height: 660px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 85px; align-items: center; padding: 65px 0 100px; } .caseHubHero h1 { max-width: 970px; margin: 25px 0 22px; color: #fff; font-size: clamp(58px, 6.2vw, 100px); line-height: .91; letter-spacing: -.075em; } .caseHubHero h1 span { display: block; color: #adb7cb; } .caseHubHero__lead { max-width: 760px; margin: 0; color: rgba(238, 243, 255, .64); font-size: 16px; line-height: 1.75; } .caseHubHero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 31px; } .caseHubHero__visual { min-height: 420px; position: relative; display: grid; place-items: center; } .caseHubStack { position: relative; width: min(86%, 560px); height: 350px; } .caseHubStack article { position: absolute; left: 50%; width: 82%; min-height: 190px; padding: 26px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 17px; background: #081126; box-shadow: 0 26px 60px rgba(0, 0, 0, .24); } .caseHubStack article:nth-child(1) { top: 0; transform: translateX(-50%) rotate(-7deg) scale(.88); opacity: .42; } .caseHubStack article:nth-child(2) { top: 78px; transform: translateX(-50%) rotate(5deg) scale(.94); opacity: .7; } .caseHubStack article:nth-child(3) { top: 155px; transform: translateX(-50%) rotate(-1deg); } .caseHubStack small, .caseHubStack strong, .caseHubStack span { display: block; } .caseHubStack small { color: var(--case-cyan); font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; } .caseHubStack strong { margin-top: 22px; color: #fff; font-size: 26px; } .caseHubStack span { margin-top: 8px; color: rgba(255, 255, 255, .45); font-size: 11px; } /* ========================================================= HUB INTRO / DIRECTORY ========================================================= */ .caseHubIntro, .caseOverview { padding: 110px 0; } .caseOverview__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: end; } .caseOverview__lead { color: #202a40 !important; font-size: 18px !important; line-height: 1.6 !important; } .caseOverview__copy p { margin: 0 0 16px; color: var(--case-copy); font-size: 14px; line-height: 1.75; } .caseOverview__copy a { color: var(--case-blue); } .caseHubDirectory { padding: 105px 0 115px; } .caseHubGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .caseHubCard { overflow: hidden; border: 1px solid var(--case-border); border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(15, 23, 42, .04); } .caseHubCard__media { position: relative; min-height: 330px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(360px 210px at 50% 42%, rgba(72, 93, 159, .08), transparent 72%), linear-gradient(145deg, #f8faff, #e9edf3); } .caseHubCard__media img { width: 100%; height: 100%; min-height: 330px; display: block; object-fit: cover; object-position: top center; transition: transform .65s ease; } .caseHubCard:hover .caseHubCard__media img { transform: scale(1.025); } .caseHubCard__fallback { display: none; text-align: center; } .caseHubCard.is-missing .caseHubCard__media { min-height: 330px; } .caseHubCard.is-missing .caseHubCard__fallback { display: grid; gap: 9px; } .caseHubCard__fallback small { color: #6078a5; font-size: 8px; font-weight: 900; text-transform: uppercase; } .caseHubCard__fallback strong { color: var(--case-ink); font-size: 30px; } .caseHubCard__body { min-height: 340px; display: flex; flex-direction: column; padding: 28px; } .caseHubCard__body>span { color: #5573a9; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .caseHubCard h2 { margin: 17px 0 12px; font-size: 30px; line-height: 1.06; letter-spacing: -.045em; } .caseHubCard h2 a { color: var(--case-ink); text-decoration: none; } .caseHubCard__body>p { margin: 0; color: var(--case-copy); font-size: 12px; line-height: 1.67; } .caseHubCard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .caseHubCard__tags small { padding: 6px 8px; border: 1px solid #e3e8ef; border-radius: 999px; color: #5f6d85; background: #fafbfc; font-size: 7px; font-weight: 800; } .caseHubCard__link { margin-top: auto; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid #edf0f4; color: #263653; font-size: 9px; font-weight: 850; text-decoration: none; } .caseHubCard__link span { color: var(--case-blue); } /* ========================================================= INDIVIDUAL HERO ========================================================= */ .caseHero__inner { position: relative; z-index: 2; min-height: 680px; display: grid; grid-template-columns: 1.02fr .98fr; gap: 80px; align-items: center; padding: 55px 0 95px; } .caseHero h1 { max-width: 900px; margin: 24px 0 20px; color: #fff; font-size: clamp(50px, 5.7vw, 86px); line-height: .93; letter-spacing: -.067em; } .caseHero__lead { max-width: 740px; margin: 0; color: rgba(238, 243, 255, .63); font-size: 15px; line-height: 1.75; } .caseHero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .caseHero__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; } .caseHero__tags span { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .02); font-size: 7px; font-weight: 800; } .caseHero__visual { min-height: 460px; display: grid; place-items: center; } .caseDevice { width: min(100%, 650px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 18px; background: #071021; box-shadow: 0 34px 85px rgba(0, 0, 0, .29); transform: rotate(1deg); transition: transform .5s ease; } .caseHero__visual:hover .caseDevice { transform: rotate(0deg) translateY(-4px); } .caseDevice__bar { height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid rgba(255, 255, 255, .07); } .caseDevice__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .caseDevice__bar span { margin-left: auto; color: rgba(255, 255, 255, .3); font-size: 8px; } .caseDevice__screen { min-height: 380px; position: relative; display: grid; place-items: center; overflow: hidden; background: #fff; } .caseDevice__screen img { width: 100%; height: 100%; min-height: 380px; display: block; object-fit: cover; object-position: top center; } .caseDevice__fallback { display: none; padding: 40px; text-align: center; } .caseDevice.is-missing .caseDevice__fallback { display: grid; gap: 10px; } .caseDevice__fallback small { color: #6078a5; font-size: 8px; font-weight: 900; text-transform: uppercase; } .caseDevice__fallback strong { color: var(--case-ink); font-size: 34px; } .caseDevice__fallback span { color: #647089; font-size: 10px; } /* ========================================================= PROBLEM / SOLUTION ========================================================= */ .caseProblem { padding: 105px 0; } .caseProblem__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .caseProblemCard { min-height: 420px; padding: 32px; border: 1px solid var(--case-border); border-radius: 18px; background: #fff; } .caseProblemCard--solution { background: radial-gradient(430px 240px at 100% 0%, rgba(63, 103, 232, .065), transparent 70%), #fff; } .caseProblemCard>span { color: #5573a9; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .caseProblemCard h2 { margin: 55px 0 17px; color: var(--case-ink); font-size: clamp(31px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.05em; } .caseProblemCard p { color: var(--case-copy); font-size: 13px; line-height: 1.73; } /* ========================================================= FEATURES ========================================================= */ .caseFeatures, .caseOutcomes, .caseRelated { padding: 105px 0; } .caseFeatures__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .caseFeature { min-height: 260px; padding: 25px; border: 1px solid var(--case-border); border-radius: 16px; background: #fff; } .caseFeature>span { color: #5573a9; font-size: 8px; font-weight: 900; } .caseFeature h3 { margin: 44px 0 10px; color: var(--case-ink); font-size: 21px; letter-spacing: -.035em; } .caseFeature p { margin: 0; color: var(--case-copy); font-size: 11px; line-height: 1.65; } /* ========================================================= WORKFLOW ========================================================= */ .caseWorkflow { padding: 110px 0; } .caseWorkflow__grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 95px; align-items: start; } .caseWorkflow__intro p { max-width: 620px; margin: 19px 0 0; color: rgba(238, 243, 255, .52); font-size: 14px; line-height: 1.75; } .caseWorkflow__steps { border-top: 1px solid rgba(255, 255, 255, .09); } .caseWorkflowStep { min-height: 112px; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .09); } .caseWorkflowStep>span { color: rgba(98, 217, 244, .6); font-size: 8px; font-weight: 900; } .caseWorkflowStep h3 { margin: 0 0 6px; color: #fff; font-size: 18px; } .caseWorkflowStep p { max-width: 680px; margin: 0; color: rgba(238, 243, 255, .46); font-size: 11px; line-height: 1.63; } /* ========================================================= SCREENS ========================================================= */ .caseScreens { padding: 105px 0; } .caseScreens__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; } .caseScreen { overflow: hidden; margin: 0; border: 1px solid var(--case-border); border-radius: 17px; background: #fff; } .caseScreen__image { min-height: 280px; position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #f8faff, #e8edf3); } .caseScreen__image img { width: 100%; height: 100%; min-height: 280px; display: block; object-fit: cover; object-position: top center; } .caseScreen__fallback { display: none; padding: 25px; text-align: center; } .caseScreen.is-missing .caseScreen__fallback { display: grid; gap: 8px; } .caseScreen__fallback strong { color: var(--case-ink); font-size: 20px; } .caseScreen__fallback span { color: #647089; font-size: 9px; word-break: break-all; } .caseScreen figcaption { min-height: 125px; padding: 20px; } .caseScreen figcaption strong, .caseScreen figcaption span { display: block; } .caseScreen figcaption strong { color: var(--case-ink); font-size: 14px; } .caseScreen figcaption span { margin-top: 7px; color: var(--case-copy); font-size: 10px; line-height: 1.6; } /* ========================================================= OUTCOMES ========================================================= */ .caseOutcomes__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--case-border); } .caseOutcome { min-height: 180px; padding: 25px 22px; border-right: 1px solid var(--case-border); border-bottom: 1px solid var(--case-border); } .caseOutcome:last-child { border-right: 0; } .caseOutcome span { color: #5573a9; font-size: 8px; font-weight: 900; } .caseOutcome p { margin: 45px 0 0; color: #263653; font-size: 12px; line-height: 1.55; } /* ========================================================= FAQ ========================================================= */ .caseFaq { padding: 105px 0; } .caseFaq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; align-items: start; } .caseFaq__intro { position: sticky; top: 160px; } .caseFaq__items { border-top: 1px solid var(--case-border); } .caseFaqItem { border-bottom: 1px solid var(--case-border); } .caseFaqItem summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #17213b; cursor: pointer; list-style: none; font-size: 14px; font-weight: 750; } .caseFaqItem summary::-webkit-details-marker { display: none; } .caseFaqItem summary i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border: 1px solid var(--case-border); border-radius: 50%; color: var(--case-blue); font-style: normal; transition: transform .2s ease; } .caseFaqItem[open] summary i { transform: rotate(45deg); } .caseFaqItem>div { padding: 0 55px 23px 0; color: var(--case-copy); font-size: 12px; line-height: 1.7; } /* ========================================================= RELATED ========================================================= */ .caseRelated__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; } .caseRelatedCard { min-height: 315px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--case-border); border-radius: 17px; color: var(--case-ink); background: #fff; text-decoration: none; } .caseRelatedCard>span { color: #5573a9; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .caseRelatedCard h3 { margin: 42px 0 10px; font-size: 22px; line-height: 1.1; letter-spacing: -.035em; } .caseRelatedCard p { margin: 0; color: var(--case-copy); font-size: 11px; line-height: 1.65; } .caseRelatedCard b { margin-top: auto; color: var(--case-blue); font-size: 9px; } /* ========================================================= FINAL ========================================================= */ .caseFinal { padding: 0 30px 90px; } .caseFinal__inner { padding: 52px; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: end; border-radius: 22px; background: #071021; } .caseFinal h2 { max-width: 920px; margin: 15px 0 0; color: #fff; font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -.06em; } .caseFinal h2 span { color: rgba(255, 255, 255, .42); } .caseFinal__actions { min-width: 220px; display: grid; gap: 10px; } /* ========================================================= ERROR ========================================================= */ .caseError { min-height: 70vh; display: grid; place-items: center; color: #fff; background: var(--case-dark); } .caseError__inner { max-width: 720px; text-align: center; } .caseError__inner>span { color: rgba(255, 255, 255, .08); font-size: 120px; font-weight: 900; } .caseError h1 { margin: -25px 0 10px; font-size: 48px; } .caseError p { color: rgba(255, 255, 255, .5); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1120px) { .caseHubHero__inner, .caseHero__inner, .caseWorkflow__grid { grid-template-columns: 1fr; gap: 45px; } .caseHubHero__visual, .caseHero__visual { max-width: 720px; width: 100%; } .caseFeatures__track { grid-template-columns: repeat(2, 1fr); } .caseOutcomes__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .caseSectionHead, .caseOverview__grid, .caseFaq__grid, .caseFinal__inner { grid-template-columns: 1fr; gap: 36px; } .caseHubGrid, .caseProblem__grid { grid-template-columns: 1fr; } .caseFaq__intro { position: static; } .caseScreens__track { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .caseContainer { width: calc(100% - 28px); } .caseHubHero__inner, .caseHero__inner { min-height: 0; padding: 54px 0 74px; } .caseHubHero h1 { font-size: clamp(49px, 14.5vw, 74px); } .caseHero h1 { font-size: clamp(43px, 12.5vw, 65px); } .caseHubHero__actions, .caseHero__actions { display: grid; } .caseButton { width: 100%; justify-content: space-between; } .caseHubIntro, .caseOverview, .caseHubDirectory, .caseProblem, .caseFeatures, .caseWorkflow, .caseScreens, .caseOutcomes, .caseFaq, .caseRelated { padding: 76px 0; } .caseHubCard__media { min-height: 250px; } .caseHubCard__media img { min-height: 250px; } .caseHubCard__body { min-height: 320px; padding: 22px; } .caseProblemCard { min-height: 0; padding: 24px; } .caseMobileSlider { width: calc(100vw - 14px); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: 28px; } .caseMobileSlider::-webkit-scrollbar { display: none; } .caseMobileSlider>* { scroll-snap-align: start; } .caseFeatures__track .caseFeature, .caseScreens__track .caseScreen, .caseRelated__track .caseRelatedCard { width: calc(100vw - 52px); min-width: calc(100vw - 52px); } .caseSwipeHint { display: flex; } .caseFeature { min-height: 245px; } .caseDevice__screen, .caseDevice__screen img { min-height: 270px; } .caseOutcomes__grid { grid-template-columns: 1fr; } .caseOutcome { min-height: 120px; border-right: 0; } .caseOutcome p { margin-top: 25px; } .caseFinal { padding: 0 14px 68px; } .caseFinal__inner { padding: 34px 24px; } } @media (prefers-reduced-motion: reduce) { .caseReveal, .caseJs .caseReveal { opacity: 1; transform: none; transition: none; } } /* ========================================================= V5 — LIGHT SECTION COLOUR REFINEMENT ========================================================= */ .caseWhite h2 span, .caseSoft h2 span { background: linear-gradient(100deg, #4769df 0%, #6d63da 48%, #8a62df 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .caseWhite, .caseSoft { color: #081225; } .caseSoft { background: #f8faff; }