/* =========================================
   UI / UX CASE STUDY
========================================= */

.ux-page {

    --ux-cream: #f2eddf;
    --ux-dark: #292929;
    --ux-green: #20b957;
    --ux-text: #222222;
    --ux-muted: #858585;
    --ux-border: #d8d5cc;

    background: var(--ux-cream);
    color: var(--ux-text);

}


/* =========================================
   GENERAL
========================================= */

.ux-page img {

    display: block;

    width: 100%;

}


.ux-section {

    padding: 150px 0;

}


.ux-dark-section {

    padding: 150px 0;

    background: var(--ux-dark);

    color: #ffffff;

}


.ux-showcase {

    padding: 140px 0;

}


.ux-final {

    padding: 160px 0;

    background: #e7e3d7;

}


.eyebrow {

    display: block;

    margin-bottom: 25px;

    font-size: 11px;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--ux-muted);

}


.light .eyebrow {

    color: #999999;

}



/* =========================================
   HERO
========================================= */

.ux-hero {

    padding-top: 180px;

    padding-bottom: 120px;

}


.ux-hero-meta {

    display: flex;

    justify-content: space-between;

    margin-bottom: 70px;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #888888;

}


.ux-hero-title {

    max-width: 1200px;

    margin: 0;

    font-size: clamp(
        75px,
        13vw,
        190px
    );

    font-weight: 400;

    letter-spacing: -0.09em;

    line-height: 0.78;

}


.ux-hero-title span {

    display: block;

    color: #8e8e8e;

}


.ux-hero-bottom {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    margin-top: 80px;

}


.ux-hero-bottom p {

    max-width: 520px;

    margin: 0;

    font-size: 18px;

    line-height: 1.6;

}


.ux-hero-bottom > span {

    color: #777777;

    font-size: 12px;

}


.ux-image-large {

    margin-top: 90px;

    overflow: hidden;

}


.ux-image-large img {

    aspect-ratio: 16 / 9;

    object-fit: cover;

}



/* =========================================
   SECTION HEADINGS
========================================= */

.ux-section-heading {

    max-width: 1000px;

}


.ux-section-heading h2 {

    margin: 0;

    font-size: clamp(
        50px,
        7vw,
        105px
    );

    font-weight: 400;

    letter-spacing: -0.075em;

    line-height: 0.9;

}


.ux-wide-text {

    max-width: 650px;

    margin-top: 60px;

    font-size: 18px;

    line-height: 1.7;

    color: #666666;

}



/* =========================================
   OVERVIEW
========================================= */

.ux-overview-grid {

    display: grid;

    grid-template-columns:
        1.3fr 1fr;

    gap: 100px;

    margin-top: 100px;

}


.ux-overview-text {

    max-width: 600px;

}


.ux-overview-text p {

    margin: 0 0 30px;

    font-size: 24px;

    line-height: 1.45;

}


.ux-project-details {

    border-top: 1px solid var(--ux-border);

}


.ux-detail {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid var(--ux-border);

}


.ux-detail span {

    color: #888888;

    font-size: 12px;

}


.ux-detail strong {

    max-width: 250px;

    text-align: right;

    font-size: 13px;

    font-weight: 400;

}



/* =========================================
   GOALS
========================================= */

.ux-goals {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 30px;

    margin-top: 100px;

}


.ux-goals > div {

    padding: 35px;

    border: 1px solid #4a4a4a;

}


.ux-goals span {

    color: #888888;

    font-size: 12px;

}


.ux-goals h3 {

    margin: 70px 0 15px;

    font-size: 25px;

    font-weight: 400;

    letter-spacing: -0.03em;

}


.ux-goals p {

    max-width: 300px;

    color: #aaa;

    font-size: 14px;

    line-height: 1.6;

}



/* =========================================
   PROCESS
========================================= */

.ux-process {

    display: flex;

    align-items: stretch;

    margin-top: 100px;

}


.process-item {

    flex: 1;

}


.process-item > span {

    color: #999999;

    font-size: 11px;

}


.process-item h3 {

    margin: 45px 0 15px;

    font-size: 22px;

    font-weight: 400;

}


.process-item p {

    max-width: 200px;

    margin: 0;

    color: #777777;

    font-size: 13px;

    line-height: 1.6;

}


.process-line {

    width: 40px;

    height: 1px;

    margin-top: 7px;

    background: #cccccc;

}



/* =========================================
   TOOLS
========================================= */

.ux-tools-section {

    padding: 150px 0;

    background: #e8e4d9;

}


.tool-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 1px;

    margin-top: 100px;

    background: #c9c5bb;

}


.tool-card {

    min-height: 350px;

    padding: 35px;

    background: var(--ux-cream);

}


.tool-card > span {

    color: #999999;

    font-size: 11px;

}


.tool-card h3 {

    margin-top: 100px;

    font-size: 38px;

    font-weight: 400;

    letter-spacing: -0.05em;

}


.tool-card p {

    max-width: 300px;

    color: #777777;

    font-size: 14px;

    line-height: 1.6;

}



/* =========================================
   STYLE GUIDE IMAGE
========================================= */

.ux-full-image {

    margin-top: 90px;

    overflow: hidden;

    background: #ffffff;

}


.ux-full-image img {

    width: 100%;

    height: auto;

}



/* =========================================
   COLOUR PALETTE
========================================= */

.palette-section {

    background: #e8e4d9;

}


.palette-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-top: 80px;

}


.colour-card {

    padding: 12px;

    background: #ffffff;

}


.colour-card > div {

    height: 260px;

    margin-bottom: 25px;

}


.colour-card span {

    display: block;

    margin-bottom: 5px;

    font-size: 13px;

}


.colour-card strong {

    color: #888888;

    font-size: 11px;

    font-weight: 400;

}


.colour-cream > div {

    background: #f2eddf;

}


.colour-dark > div {

    background: #292929;

}


.colour-green > div {

    background: #20b957;

}


.colour-white > div {

    border: 1px solid #dddddd;

    background: #ffffff;

}


.palette-note {

    margin-top: 30px;

    color: #888888;

    font-size: 11px;

}



/* =========================================
   TYPOGRAPHY
========================================= */

.typography-section {

    background: var(--ux-dark);

}


.type-scale {

    margin-top: 100px;

    border-top: 1px solid #444444;

}


.type-row {

    display: grid;

    grid-template-columns:
        180px 1fr;

    align-items: center;

    gap: 50px;

    padding: 35px 0;

    border-bottom: 1px solid #444444;

}


.type-row > span {

    color: #888888;

    font-size: 11px;

    text-transform: uppercase;

}


.type-row strong {

    font-size: 80px;

    font-weight: 400;

    letter-spacing: -0.07em;

}


.type-row .type-h2 {

    font-size: 60px;

}


.type-row .type-h3 {

    font-size: 40px;

}


.type-row p {

    margin: 0;

    font-size: 20px;

}


.type-row small {

    color: #bbbbbb;

}



/* =========================================
   GRID / SPACING
========================================= */

.layout-grid {

    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    gap: 80px;

    margin-top: 100px;

}


.layout-image {

    overflow: hidden;

}


.spacing-system {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 25px;

}


.spacing-system > span {

    margin-bottom: 25px;

    color: #888888;

    font-size: 11px;

    letter-spacing: 0.08em;

}


.spacing-item {

    display: flex;

    align-items: center;

    gap: 25px;

}


.spacing-item i {

    display: block;

    height: 25px;

    background: #333333;

}


.space-small {

    width: 20px;

}


.space-medium {

    width: 45px;

}


.space-large {

    width: 80px;

}


.space-xl {

    width: 130px;

}



/* =========================================
   UI COMPONENTS
========================================= */

.components-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    margin-top: 100px;

    background: #444444;

}


.component-preview {

    min-height: 380px;

    padding: 35px;

    background: #303030;

}


.component-preview > span {

    color: #888888;

    font-size: 10px;

    letter-spacing: 0.1em;

}


.component-preview button {

    margin-top: 100px;

    padding: 15px 25px;

    border: none;

    background: var(--ux-green);

    color: white;

    font-family: inherit;

    cursor: pointer;

}


.demo-card {

    max-width: 280px;

    margin-top: 50px;

    padding: 15px;

    background: var(--ux-cream);

    color: #222222;

}


.demo-card-image {

    height: 130px;

    margin-bottom: 15px;

    background: #777777;

}


.demo-card h3 {

    margin: 0 0 8px;

    font-size: 18px;

    font-weight: 400;

}


.demo-card p {

    margin: 0;

    color: #777777;

    font-size: 12px;

}


.demo-event {

    max-width: 280px;

    margin-top: 50px;

    padding: 25px;

    background: var(--ux-cream);

    color: #222222;

}


.demo-event strong {

    font-size: 30px;

    font-weight: 400;

}


.demo-event p {

    margin-bottom: 0;

}


.demo-nav {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 100px;

    padding: 20px;

    background: var(--ux-cream);

    color: #222222;

    font-size: 11px;

}



/* =========================================
   IMAGE PROCESS
========================================= */

.image-process {

    display: grid;

    grid-template-columns:
        1fr 60px 1fr 60px 1fr;

    align-items: center;

    gap: 20px;

    margin-top: 90px;

}


.image-process img {

    aspect-ratio: 4 / 3;

    object-fit: cover;

}


.image-process span {

    display: block;

    margin-top: 15px;

    color: #888888;

    font-size: 11px;

    text-transform: uppercase;

}


.process-arrow {

    text-align: center;

    font-size: 30px;

    color: #888888;

}



/* =========================================
   SHOWCASE
========================================= */

.showcase-image {

    margin-top: 90px;

    overflow: hidden;

    background: #eeeeee;

}


.tablet-showcase {

    max-width: 900px;

    margin: 90px auto 0;

}


.tablet-showcase img {

    width: 100%;

}


.mobile-showcase {

    max-width: 450px;

    margin: 90px auto 0;

}


.mobile-showcase img {

    width: 100%;

}



/* =========================================
   RESPONSIVE COMPARISON
========================================= */

.responsive-comparison {

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 50px;

    margin-top: 100px;

}


.responsive-device {

    text-align: center;

}


.responsive-device > span {

    display: block;

    margin-bottom: 20px;

    color: #888888;

    font-size: 10px;

    letter-spacing: 0.1em;

}


.responsive-device > div {

    overflow: hidden;

    background: #222222;

    box-shadow:
        0 20px 50px rgba(
            0,
            0,
            0,
            0.12
        );

}


.desktop-device > div {

    width: 550px;

}


.tablet-device > div {

    width: 300px;

}


.mobile-device > div {

    width: 150px;

}


.responsive-device img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* =========================================
   FINAL
========================================= */

.final-image {

    margin-top: 90px;

    overflow: hidden;

}


.final-image img {

    width: 100%;

}



/* =========================================
   LEARNING
========================================= */

.ux-learning-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 120px;

}


.learning-text p {

    max-width: 600px;

    margin: 0 0 30px;

    font-size: 20px;

    line-height: 1.65;

}



/* =========================================
   NEXT PROJECT
========================================= */

.next-project {

    padding: 150px 0;

    background: #e8e4d9;

}


.next-project-link {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 50px;

    padding-bottom: 20px;

    border-bottom: 1px solid #999999;

    font-size: clamp(
        50px,
        8vw,
        120px
    );

    font-weight: 400;

    letter-spacing: -0.07em;

}


.next-project-link span:last-child {

    font-size: 40px;

    transition:
        transform 0.3s ease;

}


.next-project-link:hover
span:last-child {

    transform:
        translate(8px, -8px);

}



/* =========================================
   REVEAL ANIMATION
========================================= */

.ux-page .reveal {

    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 0.9s
        cubic-bezier(.16,1,.3,1),
        transform 0.9s
        cubic-bezier(.16,1,.3,1);

}


.ux-page .reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}



/* =========================================
   IMAGE HOVER
========================================= */

.ux-page .ux-image-large img,
.ux-page .showcase-image img,
.ux-page .final-image img,
.ux-page .ux-full-image img {

    transition:
        transform 1s
        cubic-bezier(.16,1,.3,1);

}


.ux-page .ux-image-large:hover img,
.ux-page .showcase-image:hover img,
.ux-page .final-image:hover img,
.ux-page .ux-full-image:hover img {

    transform:
        scale(1.025);

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {


    .ux-section,
    .ux-dark-section,
    .ux-showcase,
    .ux-tools-section,
    .ux-final {

        padding: 100px 0;

    }


    .ux-hero {

        padding-top: 140px;

    }


    .ux-overview-grid {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .ux-goals {

        grid-template-columns: 1fr;

    }


    .ux-process {

        flex-direction: column;

        gap: 50px;

    }


    .process-line {

        width: 1px;

        height: 35px;

        margin: 0;

    }


    .tool-grid {

        grid-template-columns: 1fr;

    }


    .palette-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .layout-grid {

        grid-template-columns: 1fr;

    }


    .components-grid {

        grid-template-columns: 1fr;

    }


    .image-process {

        grid-template-columns: 1fr;

    }


    .process-arrow {

        transform:
            rotate(90deg);

    }


    .responsive-comparison {

        gap: 20px;

    }


    .desktop-device > div {

        width: 400px;

    }


    .tablet-device > div {

        width: 230px;

    }


    .mobile-device > div {

        width: 120px;

    }


    .ux-learning-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }

}



/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 600px) {


    .ux-hero {

        padding-top: 120px;

        padding-bottom: 80px;

    }


    .ux-hero-title {

        font-size: 68px;

    }


    .ux-hero-bottom {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 60px;

    }


    .ux-section-heading h2 {

        font-size: 52px;

    }


    .ux-overview-text p {

        font-size: 20px;

    }


    .palette-grid {

        grid-template-columns: 1fr;

    }


    .colour-card > div {

        height: 180px;

    }


    .type-row {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .type-row strong {

        font-size: 55px;

    }


    .type-row .type-h2 {

        font-size: 45px;

    }


    .type-row .type-h3 {

        font-size: 35px;

    }


    .responsive-comparison {

        flex-direction: column;

        align-items: center;

    }


    .desktop-device > div {

        width: 100%;

    }


    .tablet-device > div {

        width: 70%;

        margin: auto;

    }


    .mobile-device > div {

        width: 150px;

        margin: auto;

    }


    .next-project {

        padding: 100px 0;

    }


    .next-project-link {

        font-size: 55px;

    }

}