housesof/apps/website/src/style/_typography.scss

/* ==========================================================================
   TITLES
========================================================================== */
// Huge
.title-huge {
    font-family: $font-serif;
    font-size: clamp(#{rem(200px)}, 38vw, #{rem(700px)});
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;

    span {
        transition: none;
    }
}

// House Name
.title-image {
    font-family: $font-serif;
    font-size: clamp(#{rem(28px)}, 9vw, #{rem(36px)});
    line-height: 1;
    color: $color-secondary;

    @include bp (sm) {
        font-size: clamp(#{rem(40px)}, 4.5vw, #{rem(56px)});
    }
}

// House Number
.title-index {
    font-family: $font-serif;
    font-size: rem(80px);
    line-height: 1;
    font-weight: 200;
    letter-spacing: -0.05em;
    color: rgba($color-tertiary, 0.6);

    @include bp (sm) {
        font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
    }
}

// X-Large
.title-xl {
    font-family: $font-serif;
    font-size: rem(34px);
    line-height: 1.2;
    letter-spacing: -0.025em;

    @include bp (sm) {
        font-size: clamp(#{rem(34px)}, 4vw, #{rem(60px)});
    }
}

// Big
.title-big {
    font-family: $font-serif;
    font-size: rem(28px);
    line-height: 1.2;
    letter-spacing: -0.025em;

    @include bp (sm) {
        font-size: rem(32px);
    }
    @include bp (md) {
        font-size: clamp(#{rem(32px)}, 3.5vw, #{rem(48px)});
    }
}

// Big - Sans Sefif
.title-big-sans {
    font-size: rem(40px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.02em;

    @include bp (sm) {
        font-size: clamp(#{rem(40px)}, 6vw, #{rem(56px)})
    }
}

// Medium
.title-medium {
    font-family: $font-serif;
    font-size: rem(26px);
    font-weight: 400;
    line-height: 1.3;

    @include bp (sd) {
        font-size: rem(32px);
    }
}

// Small
.title-small {
    font-family: $font-serif;
    color: $color-secondary;
    font-size: rem(24px);
    font-weight: 400;
    line-height: 1.5;

    @include bp (sm) {
        font-size: rem(28px);
    }
}



/* ==========================================================================
   TEXT
========================================================================== */
// Huge
.text-huge {
    font-size: rem(34px);
    font-weight: 300;
    line-height: 1.25;

    @include bp (sm) {
        font-size: rem(44px);
    }
    @include bp (sd) {
        font-size: clamp(#{rem(44px)}, 5vw, #{rem(72px)});
    }
}

// Big
.text-big {
    font-size: rem(32px);
    font-weight: 300;
    line-height: 1.3;

    @include bp (sm) {
        font-size: rem(36px);
    }
    @include bp (sd) {
        font-size: rem(44px);
    }
}

// Large
.text-large {
    font-size: rem(24px);
    font-weight: 400;
    line-height: 1.4;

    @include bp (sm) {
        font-size: rem(28px);
    }
    @include bp (sd) {
        font-size: rem(32px);
    }
}

// Medium
.text-medium {
    font-size: rem(20px);
    font-weight: 200;
    line-height: 1.4;

    @include bp (sm) {
        font-size: rem(24px);
        line-height: 1.5;
    }
    @include bp (sd) {
        font-size: rem(28px);
    }
}

// Normal
.text-normal {
    font-size: rem(18px);
    font-weight: 400;
    line-height: 1.4;

    @include bp (sm) {
        font-size: rem(20px);
    }
    @include bp (sd) {
        font-size: rem(22px);
        line-height: 1.5;
    }
}

// Small
.text-small {
    font-size: rem(16px);
    font-weight: 400;
    line-height: 1.5;

    @include bp (sd) {
        font-size: rem(20px);
    }
}

// XSmall
.text-xsmall {
    font-size: rem(16px);
    font-weight: 400;
    line-height: 1.4;

    @include bp (sm) {
        font-size: rem(18px);
        line-height: 1.5;
    }
}

// Information
.text-info {
    font-size: rem(14px);
    line-height: 1.3;

    @include bp (md) {
        font-size: rem(16px);
        line-height: 1.4;
    }
}

// Label
.text-label {
    font-size: rem(12px);
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;

    &--small {
        font-size: rem(10px);
    }
}