Bricks Builder Typography and Spacing Framework

/* ===========================================
   FLUID TYPE & SPACING SYSTEM FOR BRICKS BUILDER
   =========================================== */

:root {

  /* ===========================================
     TEXT SIZE SCALE
     =========================================== */
  /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter */

  --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
  --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
  --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
  --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
  --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);

  /* ===========================================
     HEADING SIZE SCALE
     =========================================== */
  /* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h */

  --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
  --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
  --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
  --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
  --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
  --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
  --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);

  /* ===========================================
     GAP SCALE
     =========================================== */
  /* https://utopia.fyi/space/calculator?c=320,16,1.2,1280,18,1.25,5,2,&s= */
  --gap-xxxs: clamp(0.25rem, 0.15rem + 0.52vw, 0.56rem);
  --gap-xxs: clamp(0.5rem, 0.38rem + 0.63vw, 0.88rem);
  --gap-xs: clamp(0.75rem, 0.63rem + 0.63vw, 1.13rem);
  --gap-s: clamp(1rem, 0.77rem + 1.15vw, 1.69rem);
  --gap-m: clamp(1.5rem, 1.25rem + 2.25vw, 3rem);
  --gap-l: clamp(2rem, 1.54rem + 2.29vw, 3.38rem);
  --gap-xl: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
  --gap-xxl: clamp(4rem, 3.08rem + 4.58vw, 6.75rem);

  /* ===========================================
     SECTION PADDING SCALE
     =========================================== */
  /* https://utopia.fyi/space/calculator?c=320,16,1.2,1280,40,1.25,5,2,&s= */
  --section-xxxs: clamp(0.38rem, 0.08rem + 1.46vw, 1.25rem);
  --section-xxs: clamp(0.75rem, 0.38rem + 1.88vw, 1.88rem);
  --section-xs: clamp(1.13rem, 0.67rem + 2.29vw, 2.5rem);
  --section-s: clamp(1.5rem, 0.75rem + 3.75vw, 3.75rem);
  --section-m: clamp(2.25rem, 1.33rem + 4.58vw, 5rem);
  --section-l: clamp(3rem, 1.5rem + 7.5vw, 7.5rem);
  --section-xl: clamp(4.5rem, 2.67rem + 9.17vw, 10rem);

  /* ===========================================
     CONTEXTUAL GAP VARIABLES
     =========================================== */
  --grid-gap: var(--gap-m);        /* Gap between columns */
  --content-gap: var(--gap-s);     /* Gap between content elements */
  --container-gap: var(--gap-m);   /* Gap between multiple containers in a section */
}

/* ===========================================
   TEXT SIZE UTILITY CLASSES
   =========================================== */

.text-xl { font-size: var(--text-xl); line-height: 1.4; }
.text-l  { font-size: var(--text-l);  line-height: 1.5; }
body, .text-m { font-size: var(--text-m); line-height: 1.5; }
.text-s  { font-size: var(--text-s); line-height: 1.6; }
.text-xs { font-size: var(--text-xs); line-height: 1.7; }

/* ===========================================
   HEADING SIZE UTILITY CLASSES
   =========================================== */

.h-title { font-size: var(--h-title); line-height: 1.05; }
h1, .h1  { font-size: var(--h1); line-height: 1.1; }
h2, .h2  { font-size: var(--h2); line-height: 1.2; }
h3, .h3  { font-size: var(--h3); line-height: 1.3; }
h4, .h4  { font-size: var(--h4); line-height: 1.4; }
h5, .h5  { font-size: var(--h5); line-height: 1.5; }
h6, .h6  { font-size: var(--h6); line-height: 1.6; }

/* ===========================================
   TYPOGRAPHY SPACING & RESET
   =========================================== */

body :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin: 0; }
body :is(p, ul, ol) { margin-block-end: 1em; }
body :is(p:last-of-type) { margin-block-end: 0; }
body :is(h1, h2, h3, h4, h5, h6) { margin-block-end: 0.5em; }

body .brxe-text * + :is(h1, h2, h3, h4, h5, h6),
body .brxe-post-content:not([data-source="bricks"]) * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 1em;
}

body .brxe-text * + li,
body .brxe-post-content:not([data-source="bricks"]) * + li {
  margin-block-end: 0.5em;
}

body .brxe-text * + :is(ul, ol),
body .brxe-post-content:not([data-source="bricks"]) * + :is(ul, ol) {
  padding-left: 16px;
  margin-top: 0;
}

/* Makes H2s within Rich Text and blog posts one size smaller */
.brxe-text h2,
.brxe-post-content h2 {
  font-size: var(--h3);
}

/* ===========================================
   SPACING UTILITY CLASSES
   =========================================== */

.grid-gap { gap: var(--grid-gap); }
.content-gap { gap: var(--content-gap); }
.content-gap-s { gap: calc(var(--content-gap) / 1.5); }
.container-gap { gap: var(--container-gap); }

/* “Imperfect” fix for tighter heading/paragraph spacing */
.content-gap :is(p, h1, h2, h3, h4, h5, h6),
.content-gap-s :is(p, h1, h2, h3, h4, h5, h6) {
  margin-block-end: -0.2em;
}