carhop__carhop-theme__DEV/resources/css/blocks/content-box.css

:root {
  --content-box-text-color: #136f63;
}

.content-box {
  @apply relative px-4 md:px-8;

  &--variant-framed {
    @apply border border-carhop-green-600;
  }

  &--variant-backgrounded {
    background-color: var(--content-box-background-color, transparent);
  }
  &--variant-framed-backgrounded {
    @apply border border-carhop-green-600;
    background-color: var(--content-box-background-color, transparent);
  }

  &--shape-straight {
    @apply py-16;
    background-color: var(--content-box-background-color, transparent);
  }
  &--shapeA,
  &--shapeB,
  &--shapeC {
    @apply !relative;
    background-color: transparent !important;

    .content-box__innerblocks {
      @apply z-10 relative;
    }
  }

  &--shapeA.content-box--variant-framed,
  &--shapeB.content-box--variant-framed,
  &--shapeC.content-box--variant-framed,
  &--shapeA.content-box--variant-framed-backgrounded,
  &--shapeB.content-box--variant-framed-backgrounded,
  &--shapeC.content-box--variant-framed-backgrounded {
    @apply border-none;

    svg > path {
      stroke: var(--content-box-border-color, var(--wp--preset--color--carhop-green));
      stroke-width: 1px;
    }
  }

  /* &--shapeA,
  &--shapeB,
  &--shapeC */

  .content-box__shape {
    @apply top-0 left-0 w-full h-full absolute;
  }

  @apply py-16;
  background-color: var(--content-box-background-color, transparent);

  &.alignwide,
  &.aligncontained {
    @apply !mx-auto;
  }

  &.aligncontained {
    /* max-width: calc(960px - 4rem) !important; */
    @apply !max-w-screen-lg;
  }
  &.alignwide {
    @media (max-width: 767px) {
      margin-left: calc(50% - 50vw) !important;
      margin-right: calc(50% - 50vw) !important;
    }
  }

  /* &.alignwide {
    @apply max-w-screen-lg;
  } */

  .wp-block-group {
  }

  &--bg-light {
    --content-box-text-color: var(--wp--preset--color--carhop-green);
    --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
  }

  &--bg-dark {
    --content-box-text-color: #fff;
    --advised-text-color: #fff;
    --cta-current-color: #fff;

    blockquote,
    blockquote p,
    .wp-block-pullquote p,
    p {
      color: var(--advised-text-color, inherit);
    }

    .wp-block-carhop-blocks-cta {
      /* --cta-current-color: #fff; */

      &:after {
        /* background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg'); */
        filter: brightness(41);
      }
    }

    a[target='_blank'] {
      &:after {
        background-image: url('../resources/img/carhop-fleche-lien-externe-full--white.svg');
      }
    }
  }

  &__innerblocks {
    @apply mx-auto px-4 md:px-8;
    > :not(.alignwide):not(.alignfull) {
      @apply max-w-screen-lg mx-auto;
    }
  }
  &.alignwide .content-box__innerblocks {
    > :not(.alignfull) {
      @apply max-w-screen-xl mx-auto;
    }
  }
  h3 {
    /* @apply title-small font-bold; */
  }
  .chapter-section--bg-light {
    --content-box-text-color: var(--wp--preset--color--carhop-green);
    --advised-text-color: var(--wp--preset--color--carhop-green, inherit);
    --cta-current-color: var(--wp--preset--color--carhop-green, inherit);
  }

  /* h1.wp-block-heading {
    @apply !text-4xl mb-12;
  }

  h3.wp-block-heading {
    @apply !text-3xl uppercase fjalla font-light tracking-wide;
  }
  h4.wp-block-heading {
    @apply !text-2xl uppercase nunito font-medium tracking-widest pb-1;
  } */
  ul + h3,
  p + h3 {
    @apply mt-12;
  }

  h3 + p {
    @apply !mt-3;
  }
  /* p > a {
    transition: all 0.3s ease-out;
    @apply underline underline-offset-8;
    text-decoration-thickness: 1px;

    @apply underlined-link underlined-link--white;
  } */

  ul {
    list-style: disc;
  }
  > ul {
    padding-left: 1.5rem;
  }
  .carhop-heading:not(:first-child) {
    @apply pt-32;
  }
}

main > .content-box:first-child {
  @media (max-width: 1441px) {
    /* @apply !pt-2; */
  }
}

body.wp-admin.post-type-articles .content-box,
.single-articles .content-box {
  @apply !pt-10 !pb-8;

  &__innerblocks {
    > :first-child {
      @apply mt-0;
    }
    > :last-child {
      @apply mb-0;
    }
  }
  .wp-block-heading {
    @apply !mt-0;
  }
  p {
    color: inherit;
  }
  .carhop-heading p {
    @apply text-carhop-green-700;
  }
}

body.single-activites .content-box,
body.wp-admin.post-type-page .content-box,
body.page .content-box {
  @apply py-16;
  color: var(--content-box-text-color);

  .carhop-heading p {
    color: var(--content-box-text-color, #136f63);
  }
  a,
  h1.wp-block-heading,
  h2.wp-block-heading,
  h3.wp-block-heading,
  h4.wp-block-heading,
  h5.wp-block-heading,
  h6.wp-block-heading {
    color: var(--content-box-text-color);
  }

  p,
  li {
    @apply font-light;
  }
  li {
    @apply pb-2;
  }
  p {
    @apply pb-6;
  }
  .carhop-heading p {
    @apply font-bold tracking-bigbig;
  }
}

.content-box--variant-backgrounded.alignfull
  + .content-box--variant-backgrounded.alignfull {
  @apply !mt-0;
}

.content-box--variant-backgrounded.alignfull:has(
    + .content-box--variant-backgrounded.alignfull
  ) {
  @apply !mb-0;
}

.wp-block-carhop-blocks-content-box.alignfull + .alignfull {
  @apply !mt-0;
}

.wp-block-carhop-blocks-content-box.aligncontained {
  @apply my-12;
}

.wp-block-carhop-blocks-content-box.alignfull:has(+ .alignfull) {
  @apply !mb-0;
}

.page-single:has(
  .content-wrapper[data-active-tab='post']
    .post-content.entry-content
    > .content-box.alignfull:last-child
) {
  .content-wrapper + .alignfull {
    @apply !-mb-12;
  }
  .content-wrapper + .alignfull {
    /* @apply !bg-red-500 opacity-40; */
    margin-top: -70px !important;
  }
}

.content-box--variant-backgrounded.content-box--shapeC.alignfull + .alignfull {
  @apply !-mt-5;
}

.content-box.alignfull
  .content-box__innerblocks
  > .gform_wrapper:nth-last-child(2):has(+ script) {
  @apply mb-32;
}
#field_4_29 {
  @apply pb-10;
}
#gform_fields_4_7 {
  --gf-form-gap-y: 1rem;
}

.gform_previous_button:has(+ input[type='submit']) {
  @apply !h-fit;
}

.gform-page-footer:has(.gform_previous_button + input[type='submit']) {
  @apply items-center !mb-0;
}