index.css

/* ------ CSS RESET ------ */
/* Full CSS Reset here https://piccalil.li/blog/a-more-modern-css-reset/ by Andy Bell */
/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, p{
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2 {
  line-height: 1.1;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* ------ CSS VARIABLES ------ */
:root {
    /* Colors */
    --clr-primary-300: hsl(192, 90%, 77%);
    --clr-primary-500: hsl(192, 54%, 64%);
    --clr-primary-600: hsl(192, 37%, 48%);
    --clr-secondary-300: hsl(268, 100%, 86%);
    --clr-secondary-500: hsl(268, 55%, 71%);
    --clr-secondary-600: hsl(268, 34%, 53%);
    --clr-neutral-300: hsl(240, 18%, 85%);
    --clr-neutral-600: hsl(240, 10%, 57%);
    --clr-neutral-900: hsl(240, 21%, 20%);
    --clr-white: hsl(0, 0%, 98%);
    /* Typography */
    --ff-primary: "Red Hat Display", sans-serif;
    --fs-200: .75rem;
    --fs-300: .875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 2rem;
    --fs-700: 2.25rem;
    --fs-800: 2.5rem;
    --fs-900: 4rem;
    --fw-500: 500;
    --fw-900: 900;
    --ls-900: .25rem;
    /* Spacing */
    --space-4: .25rem;
    --space-8: .5rem;
    --space-16: 1rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-56: 3.5rem;
    --space-64: 4rem;
    --space-72: 4.5rem;
    --space-80: 5rem;
    --space-112: 7rem;
    --space-120: 7.5rem;
}

/* ------ COMPONENTS ------ */
.button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
}

.button {
    --_bg: var(--bg, var(--clr-primary-600));
    --_clr: var(--clr, var(--clr-white));
    background: var(--_bg);
    color: var(--_clr);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-weight: var(--fw-900);
    max-width: fit-content;
    padding: 1em 2.5em;
    border-radius: var(--space-32);

    &:hover {
        --bg: var(--clr-primary-500);
    }

    & span {
        color: var(--clr-primary-300);
    }

}

.button--secondary {
    --bg: var(--clr-secondary-600);

    &:hover {
        --bg: var(--clr-secondary-500);
    }
}

.number {
    margin-block-start: var(--space-64);
}

/* ------ TYPOGRAPHY ------ */
.hero__title {
    font-size: var(--fs-800);
    font-weight: var(--fw-900);
}

.features__pre-title, .features__title,
.cta__title {
    font-size: var(--fs-700);
    font-weight: var(--fw-900);
}

.hero__title,
.features__title {
    color: var(--clr-neutral-900);
}

.cta__title, .cta__copy {
    color: var(--clr-white);
}

/* ------ LAYOUT ------ */
body {
    background: var(--clr-white);
    color: var(--clr-neutral-600);
    font-family: var(--ff-primary);
    text-align: center;
}

.logo {
    padding-block-start: var(--space-48);

    & img {
        margin-inline: auto;
    }
}

.wrapper:has(.hero) {
    padding-block-start: var(--space-64);

}

.wrapper:has(.features) {
    padding-block-start: var(--space-64);
    padding-inline: var(--space-32);
}

.hero, .hero__copy-wrapper,
.features, .features__copy-wrapper, .features__headings,
.cta {
    display: flex;
    flex-direction: column;
}

.hero {
    gap: var(--space-48);
}

.hero__img-left-desk,
.hero__img-right-desk {
    display: none;
}

.hero__copy-wrapper {
    gap: var(--space-24);
    padding-inline: var(--space-32);
}

.features{
    align-items: center;
    gap: var(--space-64);
}

.features__img-wrapper {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    gap: var(--space-16);

}

.features__img {
    border-radius: var(--space-8);
}
.features__copy-wrapper {
    gap: var(--space-32);
}

.features__headings {
    gap: var(--space-16);
}

.features__pre-title {
    color: var(--clr-primary-600);
    font-size: var(--fs-200);
    text-transform: uppercase;
    letter-spacing: var(--ls-900);
}

footer  {
    margin-block-start: -2.3rem;
}

.wrapper:has(.cta) {
    padding-block: var(--space-64);
    padding-inline: var(--space-32);
}

footer {
    background-image: url(assets/mobile/image-footer.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-image: fill 1 linear-gradient(hsla(192, 37%, 48%, 85%), hsla(192, 37%, 48%, 85%));
}

.cta {
    align-items: center;
    gap: var(--space-24);
}

@media(width > 37.5em) {

    /* TYPOGRAPHY */
    .hero__title {
        /* ⚠️⚠️⚠️ADD VARIABLE⚠️⚠️⚠️ */
        font-size: 3rem;
    }
    .features__pre-title {
        font-size: var(--fs-300);
    }

    .features__title,
    .cta__title {
        font-size: var(--fs-700);
    }

    /* LAYOUT */
    .hero {
        gap: var(--space-72);
        align-items: center;
    }

    .hero__copy-wrapper {
        max-width: 40ch;
    }

    .wrapper:has(.features) {
        padding-block-start: var(--space-120);
    }

    .features__img-wrapper {
        grid-template: auto / repeat(4, 1fr);
        gap: var(--space-24);
    }

    .features__copy-wrapper {
        max-width: 47ch;
    }

    /* .wrapper:has(.cta) {
        background-image: url(assets/tablet/image-footer.jpg);
        } */

    footer {

        background-image: url(assets/tablet/image-footer.jpg);
    }

    .cta {
        max-width: 47ch;
        margin-inline: auto;
    }
}

@media(width > 68.75em) {
    .button-wrapper {
        flex-direction: row;
        justify-content: center;
    }

    /* TYPOGRAPHY */
    .hero__copy,
    .features__copy,
    .cta__copy {
        font-size: var(--fs-500);
    }

    .hero__title {
        font-size: var(--fs-900);
    }

    .features__pre-title {
        font-size: var(--fs-400);
    }

    .features__title,
    .cta__title {
        font-size: var(--fs-800);
    }

    /* LAYOUT */
    .logo {
        padding-block-start: var(--space-80);
    }

    .wrapper:has(.hero) {
        padding-block-start: var(--space-112);
    }

    .wrapper:has(.features, .cta) {
        padding-inline: var(--space-80);
    }

    .wrapper:has(.cta) {
        padding-block: var(--space-112);
        /* background-image: url(assets/desktop/image-footer.jpg); */
    }

    footer {
        background-image: url(assets/desktop/image-footer.jpg);
    }

    .hero {
        flex-direction: row;
        justify-content: space-between;
        max-width: 90rem;
        margin-inline: auto;
    }

    .features,
    .cta {
        margin-inline: auto;
        max-width: 70rem;
    }

    .hero,
    .hero__copy-wrapper,
    .features__img-wrapper {
        gap: var(--space-32);
    }

    .hero__img {
        display: none;
    }

    .hero__img-left-desk,
    .hero__img-right-desk {
        display: inline;
    }

    .hero__copy-wrapper {
        padding: 0;
        max-width: 50ch;
    }

    .cta {
        flex-direction: row;
        align-items: start;
        justify-content: space-between;
        text-align: left;
    }

    .cta__title {
        max-width: 12ch;
    }

    .cta__copy {
        max-width: 28ch;
    }

    .number {
        margin-block-start: var(--space-72);
    }
}

@media (width > 90rem) {
    .hero {
        max-width: 70rem;
    }
}