Logo

    CSS

    Tags
    /* 
    This is where you update your template's colors.
     
    Select any hex color you'd like for --bg (background), 
    --contrast (text), --accent (accent color). 
    
    Please only change the 6-character hex color.
    */
    
    :root {
      --bg: #000 !important;
      --contrast: #fff !important;
      --accent: #e60012 !important;
      --collection-card-cover-size-large: 295px !important;
    }
    
    html {
      background-image: none !important;
    }
    
    /* Header */
    .super-navbar {
      max-width: 100% !important;
      padding: 1rem !important;
      height: 5rem !important;
    }
    
    @media (min-width: 768px) {
      .super-navbar {
        padding: 1rem 2rem !important;
      }
    }
    
    .super-navbar.simple .super-navbar__logo {
        flex-grow: inherit;
    }
    
    .super-navbar__logo-image, .super-navbar__logo-image picture, .super-navbar__logo-image picture img {
      width: 220px !important;
    }
    
    @media (min-width: 768px) {
      .super-navbar__logo-image, .super-navbar__logo-image picture, .super-navbar__logo-image picture img {
        width: 250px !important;
      }
    }
    
    .super-navbar
      .super-navbar__content
      .super-navbar__item-list
      .super-navbar__item {
      margin: auto !important;
      font-weight: bold !important;
      color: var(--accent) !important;
    }
    
    .super-navbar
      .super-navbar__content
      .super-navbar__item-list
      .super-navbar__item:hover {
      color: var(--contrast) !important;  
      }
    
    /* Menu */
    .super-navbar__menu,
    .super-navbar .super-navbar__menu-wrapper.active .super-navbar__menu {
      background: #262626 !important;
    }
    
    .super-navbar .super-navbar__menu-wrapper.active .super-navbar__menu-item-list {
      background: transparent !important;
    }
    
    .super-navbar .super-navbar__menu-wrapper.active .super-navbar__menu-close {
        background: none !important;
        top: 0 !important;
        bottom: 0 !important;
        margin: auto !important;
    }
    
    @media (max-width: 767.98px) {
      .super-navbar .super-navbar__menu-wrapper.active .super-navbar__menu-item-list:nth-child(2):last-child {
        padding: 0 !important;
      }
    }
    
    /* Content */
    .super-content {
      padding: 0 !important;
      max-width: 100% !important;
    }
    
    .super-content article > * {
      max-width: 1440px !important;
      margin: auto;
      width: 100%;
      padding: 0 5vw !important;
    }
    
    .super-content article > .notion-bulleted-list {
      margin: auto !important;
      width: auto;
      margin: 24px auto 48px !important;
      font-size: 1.375rem !important;
    }
    
    @media(min-width: 768px) {
      .super-content article > .notion-bulleted-list {
        font-size: 1.5rem !important;
      }
    }
    
    @media(min-width: 1024px) {
      .super-content article > .notion-bulleted-list {
        display: flex;
        column-gap: 60px;
        margin: 36px auto 72px !important;
      }
    }
    
    @media(min-width: 1200px) {
      .super-content article > .notion-bulleted-list {
        column-gap: 80px;
        font-size: 1.625rem !important;
      }
    }
    
    .super-content article > .notion-bulleted-list .notion-list-item {
          padding: 0;
        margin: 0;
        line-height: 1.5;
    }
    
    /* Paragraph */
    #page-index h1 {
      margin-bottom: 0 !important;
      top: 0rem !important;
    }
    
    h2, h2.notion-heading {
      font-weight: 500;
      line-height: 1.5;
      font-size: 1.5rem !important;
    }
    
    h3,
    h3.notion-heading {
      margin-bottom: 0 !important;
      font-size: 1rem !important;
      text-transform: initial !important;
    }
    
    @media(min-width: 768px) {
      h2, h2.notion-heading {
        font-size: 1.875rem !important;
      }
      
      h3,
      h3.notion-heading {
        font-size: 1.375rem !important;
      }
    }
    
    @media(min-width: 1200px) {
      h2, h2.notion-heading {
        font-size: 2rem !important;
      }
      
      h3,
      h3.notion-heading {
        font-size: 1.5rem !important;
      }
    }
    
    
    /* Gallery */
    .notion-collection__header-wrapper {
      display: none;
    }
    
    .notion-collection-card.gallery .notion-property__title {
      display: none !important;
    }
    
    .notion-collection-card {
      pointer-events: none !important;
    }
    
    .super-content .notion-collection-gallery.medium {
      grid-column-gap: 1.5rem !important;
      grid-row-gap: 1.5rem !important;
      grid-template-columns: repeat(2, 1fr) !important;
    }
    
    @media screen and (min-width: 768px) {
      .super-content .notion-collection-gallery.medium {
        grid-template-columns: repeat(4, 1fr) !important;
      }
    }
    
    @media screen and (min-width: 1024px) {
      .super-content .notion-collection-gallery.medium {
        grid-column-gap: 2rem !important;
        grid-row-gap: 2rem !important;
      }
    }
    
    .super-content .notion-collection-gallery.medium .notion-collection-card {
      /*aspect-ratio: 1;*/
    }
    
    #block-43c951dae59845c3874ce0cc7905d85f .notion-collection-gallery.medium {
      grid-template-columns: repeat(1, 1fr) !important;
    }
    
    @media screen and (min-width: 768px) {
      #block-43c951dae59845c3874ce0cc7905d85f .notion-collection-gallery.medium {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }
    
    #block-43c951dae59845c3874ce0cc7905d85f .notion-collection-gallery.medium .notion-collection-card {
      /*aspect-ratio: 1.4;*/
    }
    
    .super-content
      .notion-collection-gallery.medium
      .notion-collection-card
      .notion-collection-card__cover.medium,
    .super-content
      .notion-collection-gallery.medium
      .notion-collection-card
      .notion-collection-card__cover.medium
      > div {
      margin: auto !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 100% !important;
      padding-bottom: calc(100% - 4rem);
    }
    
    #block-43c951dae59845c3874ce0cc7905d85f
      .notion-collection-gallery.medium
      .notion-collection-card
      .notion-collection-card__cover.medium,
    #block-43c951dae59845c3874ce0cc7905d85f
      .notion-collection-gallery.medium
      .notion-collection-card
      .notion-collection-card__cover.medium
      > div {
        padding-bottom: calc(71% - 4rem) !important;  
      }
    
    
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.large,
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.large
      > div,
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.large
      img,
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.medium,
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.medium
      > div,
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.medium
      img,
    .super-content
      .notion-collection-gallery.large
      .notion-collection-card
      .notion-collection-card__cover.large
      > span {
      min-height: auto !important;
    }
    
    .super-content .notion-collection-gallery.medium .notion-collection-card .notion-collection-card__cover.medium img {
      transform: scale(1) !important;
    }
    
    /* Contact */
    .notion-semantic-string .link {
      line-height: normal;
      color: var(--accent) !important;
      text-decoration: underline !important;
    }
    
    @media (hover: hover) and (pointer: fine) {
      .notion-semantic-string .link {
        color: inherit !important;
      }
    }
    
    /* Footer */
    #block-7356a974bd06456a801a6b1a3a0177c0 {
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
    }
    
    #block-7356a974bd06456a801a6b1a3a0177c0.notion-callout .notion-callout__icon {
      display: none !important;
    }
    
    #block-7356a974bd06456a801a6b1a3a0177c0.notion-callout .notion-callout__content {
      text-align: center;
      font-size: 12px !important;
      font-weight: normal;
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
      color: #999999 !important;
      font-weight: bold;
    }
    
    @media (max-width: 767.98px) {
      #block-7356a974bd06456a801a6b1a3a0177c0.notion-callout
        .notion-callout__content
        .notion-collection
        .notion-collection-table__body
        tr:first-child {
        margin-bottom: 0 !important;
      }
    }
    
    @media (min-width: 768px) {
      #block-7356a974bd06456a801a6b1a3a0177c0.notion-callout .notion-callout__content {
        font-size: 15px !important;  
      }
    }
    
    #block-7356a974bd06456a801a6b1a3a0177c0.notion-callout
      .notion-callout__content .notion-semantic-string span {
        display: inline-block;
        margin: auto .125rem;
      }