CWC/styles/base/typography.css

/* Basic typographical styles */

/**
 * Fluid font sizes between 360px and 1920px viewport widths.
 * Generated values use 16px as the base font size.
 * text-14px: 12px-14px
 * text-16px: 14px-16px
 * text-18px: 16px-18px
 * text-20px: 18px-20px
 * text-22px: 20px-22px
 * text-24px: 22px-24px
 * text-28px: 26px-28px
 * text-30px: 28px-30px
 * text-32px: 30px-32px
 * text-34px: 32px-34px
 * text-40px: 36px-40px
 * text-54px: 38px-54px
 * text-64px: 48px-64px
 *
 * Font sizes at standard viewport widths:
 *           | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
 * --------- | ----- | ----- | ----- | ------ | ------ | ------ | ------
 * text-12px | 10.00 | 10.36 | 10.52 |  10.85 |  11.18 |  11.38 |  12.00
 * text-14px | 12.00 | 12.36 | 12.52 |  12.85 |  13.18 |  13.38 |  14.00
 * text-16px | 14.00 | 14.36 | 14.52 |  14.85 |  15.18 |  15.38 |  16.00
 * text-18px | 16.00 | 16.36 | 16.52 |  16.85 |  17.18 |  17.38 |  18.00
 * text-20px | 18.00 | 18.36 | 18.52 |  18.85 |  19.18 |  19.38 |  20.00
 * text-22px | 20.00 | 20.36 | 20.52 |  20.85 |  21.18 |  21.38 |  22.00
 * text-24px | 22.00 | 22.36 | 22.52 |  22.85 |  23.18 |  23.38 |  24.00
 * text-28px | 26.00 | 26.36 | 26.52 |  26.85 |  27.18 |  27.38 |  28.00
 * text-30px | 28.00 | 28.36 | 28.52 |  28.85 |  29.18 |  29.38 |  30.00
 * text-32px | 30.00 | 30.36 | 30.52 |  30.85 |  31.18 |  31.38 |  32.00
 * text-34px | 32.00 | 32.36 | 32.52 |  32.85 |  33.18 |  33.38 |  34.00
 * text-40px | 36.00 | 36.72 | 37.05 |  37.70 |  38.36 |  38.77 |  40.00
 * text-54px | 38.00 | 40.87 | 42.18 |  44.81 |  47.44 |  49.08 |  54.00
 * text-64px | 48.00 | 50.87 | 52.18 |  54.81 |  57.44 |  59.08 |  64.00
 */

@theme static {
    --font-sans:   "Poppins", sans-serif;
    --font-quincy: "quincy-cf", serif;
    --line-height: 1.6;

    --text-base: 1rem;
    --text-12px: round(down, clamp(0.625rem, 0.5962rem + 0.1282vw, 0.75rem), 1px);
    --text-14px: round(up, clamp(0.75rem, 0.7212rem + 0.1282vw, 0.875rem), 2px);
    --text-16px: round(up, clamp(0.875rem, 0.8462rem + 0.1282vw, 1rem), 2px);
    --text-18px: round(up, clamp(1rem, 0.9712rem + 0.1282vw, 1.125rem), 2px);
    --text-20px: round(up, clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem), 2px);
    --text-22px: round(up, clamp(1.25rem, 1.2212rem + 0.1282vw, 1.375rem), 2px);
    --text-24px: round(up, clamp(1.375rem, 1.3462rem + 0.1282vw, 1.5rem), 2px);
    --text-28px: round(up, clamp(1.625rem, 1.5962rem + 0.1282vw, 1.75rem), 2px);
    --text-30px: round(up, clamp(1.75rem, 1.7212rem + 0.1282vw, 1.875rem), 2px);
    --text-32px: round(up, clamp(1.875rem, 1.8462rem + 0.1282vw, 2rem), 2px);
    --text-34px: round(up, clamp(2rem, 1.9712rem + 0.1282vw, 2.125rem), 2px);
    --text-40px: round(up, clamp(2.25rem, 2.1923rem + 0.2564vw, 2.5rem), 2px);
    --text-54px: round(up, clamp(2.375rem, 2.1442rem + 1.0256vw, 3.375rem), 2px);
    --text-64px: round(up, clamp(3rem, 2.7692rem + 1.0256vw, 4rem), 2px);
}

:root {
    --h1: var(--text-64px);
    --h2: var(--text-40px);
    --h3: var(--text-32px);
    --h4: var(--text-28px);
    --h5: var(--text-24px);
    --h6: var(--text-22px);
}

body {
    background-color: white;
    color: black;
    font-family: var(--font-sans);
    font-size: var(--text-18px);
    line-height: var(--line-height);
}

::selection { background: var(--color-primary-400); }

@layer components {
    h1, h2, h3,
    h4, h5, h6 {
        font-family: var(--font-quincy);
        font-weight: 700;
        margin: 0 0 1rem;
    }

    h1, .h1 {
        font-size: var(--h1);
        line-height: 1.2;
    }

    h2, .h2 {
        font-size: var(--h2);
        line-height: 1.3;

        em {
            font-style: normal;
            color: var(--color-secondary);
        }
    }

    h3, .h3 {
        font-size: var(--h3);
        line-height: 1.4;
    }

    h4, .h4 {
        font-size: var(--h4);
        line-height: 1.5;
    }

    h5, .h5 { font-size: var(--h5); }

    h6, .h6 { font-size: var(--h6); }
}

a, .link {
    color: var(--color-bodylinks);
    text-decoration: none;
    transition: color 200ms;
    cursor: pointer;

    &:hover { color: var(--color-primary); }
}

h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
    color: inherit;
    text-decoration: underline;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}


ul { list-style-type: disc; }

ol { list-style-type: decimal; }

li ul, li ol { margin: 0 1rem; }

ol ol { list-style: lower-alpha; }

ol ol ol { list-style: lower-roman; }

ol ol ol ol { list-style: lower-alpha; }

pre, code,
samp, style { font-family: monospace; }

pre {
    font-size: 0.875rem;
    overflow: auto;
    padding: 1.5rem;
}

pre code {
    background-color: inherit;
    border-radius: 0;
    color: inherit;
    padding: 0;
}

code {
    @apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
}

hr {
    background-color: black;
    border: none;
    display: block;
    height: 1px;
    margin: 1rem 0;
    width: 100%;
}