Super.so CSS Injection


<script>(function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);
mixpanel.init("1a80ec758f757ab179017adf980511af", {"api_host": "https://api-eu.mixpanel.com", batch_requests: true})</script>

<script>(mixpanel.track("Page visit"))</script>
<script>mixpanel.track_links('a', 'Link click', function(e) { return { url: e.href, text: e.innerText }} );</script>

<link rel="stylesheet" href="https://use.typekit.net/olz5bhi.css">

<style>
    html {
      -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    }
    
    /* --- COLORS --- */
    :root {
      --color-bg-default: #ffffff !important;
      --color-text-default: #08061D !important;
      --color-text-default-light: #444862 !important;
      --color-text-gray: #767B9C !important;
      --collection-card-cover-size-large: 210px !important;
    }
    @media screen and (min-width: 50em) {
      :root {
        --collection-card-cover-size-large: 270px !important;
      }
    }
    
    /* --- TYPOGRAPHY --- */
    
    /* Increase base font size for large screens */
    @media screen and (min-width: 50em) {
      html {
        font-size: 18px !important;
      }
    }
    @font-face {
        font-family: 'sofia-pro';
        src: url('https://use.typekit.net/olz5bhi.css') format('opentype');
        font-weight: 400;
        font-style: normal;
    }
    * {
        font-family: 'sofia-pro' !important;
    }
		
		h1.notion-heading {
    padding-bottom: 4px !important;
		}
    
    /* --- BODY --- */
     
    body {

    /* Loading Animation */
      -webkit-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
    animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
      -moz-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
      -o-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
      -ms-animation: fadeIn 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-webkit-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-o-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }
    @-ms-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    .notion-quote {
    border-left: none !important;
    padding: 0px 0px 24px 2px !important;
    }

    /* --- LAYOUT --- */
    /* Styling for page names */
    .notion-header__title {
      font-weight: 700 !important;
      font-size: 0.75rem !important;
      line-height: 1.25 !important;
      min-height: auto !important;
      text-transform: uppercase !important;
      letter-spacing: 0.1em !important;
      padding: 0 !important;
      display: none;
    }
    
    /* --- Adjust the max width of pages --- */
    .super-content.max-width, .notion-header__content.max-width {
      max-width: 1080px!important;
    }

    /* --- Remove bottom page padding and adjust page padding for smaller screens --- */
    .super-content {
      padding-bottom: 40px !important;
    }
    @media screen and (min-width: 415px) and (max-width: 860px) {
      .super-content, .notion-header__content {
        padding-left: 46px !important;
        padding-right: 46px !important;
      }
    }
    /* --- Remove additional spacing on mobile that is created by column layout on desktop --- */
    @media screen and (max-width:680px) {
      .notion-column {
        padding: 0px!important;
      }
    }

    /* --- WORK LISTING --- */

    /* Remove header of the gallery table */
    .notion-collection__header {
        display: none !important;
    }
    
    /* Override default card styling */
    .notion-collection-card {
      border-radius: 0 !important;
      box-shadow: none !important;
      margin-bottom: 0px !important;
    }

    /* Collection Gallery Grid */
    .notion-collection-gallery {
        display: grid !important;
        grid-auto-rows: 1fr !important;
        gap: 64px 48px !important;
        border-top: 0 !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }


    .notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img, .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img {
      height: auto !important;
      max-height: none !important;
    }
    .notion-collection-card__cover.large>div {
      position: relative !important;
    }
    .notion-collection-card__cover {
      height: auto !important;
      min-height: 240px !important;
      border-bottom: none !important;
    }
    /* cover images */
    .notion-collection-card__cover.large, .notion-collection-card__cover.large>div, .notion-collection-card__cover.large img, .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>div, .notion-collection-card__cover.medium img {
    height: auto !important;
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: initial !important;
    padding-bottom: 0 !important;
    }

    /* Padding card title */
    .notion-collection-card .notion-property__title {
    padding: 8px 0px !important;
    }

    /* Make card title a heading */
    .notion-collection-card .notion-property__title {
      display: block !important;
      margin: 0.6em 0 0.4em !important;
      font-family: Sofia Pro !important;
      font-weight: 700 !important;
      font-size: 1.5rem !important;
      line-height: 1.3 !important;
      white-space: normal !important;
    }
    .notion-property__title .notion-semantic-string {
    font-weight: 700!important;
    white-space: pre-wrap !important;
    } 

    .notion-semantic-string {
    white-space: pre-wrap!important;
    word-break: break-word!important;
    }


    /* Add underline to title on hover of project card */
    .notion-collection-card.gallery .notion-collection-card__property .notion-property__title span {
      border-bottom: 1px solid transparent !important;
      transition: border-color .2s ease-in !important;
    }
    .notion-collection-card.gallery:hover .notion-collection-card__property .notion-property__title span {
      border-bottom: 1px solid var(--color-text-gray) !important;
    }
    
    /* Increase spacing between project meta data */
    .notion-collection-card__property {
      margin: 3px 0 !important;
    }
    
    /* Make property text of cards body text */
    .notion-collection-card__content {
      font-size: 1em !important;
      padding-bottom: 0.5em !important;
      padding-bottom: 0px !important;
      padding-left: 0px !important;
      font-size: 1rem !important;
      overflow: hidden;
    }

    /* Make all but the default colour display as a lighter colour */
    .notion-pill {
      background: none !important;
      font-size: 1em !important;
      margin: 8px 12px 8px 0px !important;
      padding: 0px !important;
      color: var(--color-text-gray) !important;
    }   

    }
    .pill-gray, .pill-brown, .pill-orange, .pill-yellow, .pill-green, .pill-blue, .pill-purple, .pill-pink, .pill-red {
      background: none !important;
    }

		.notion-collection-card__content .notion-property__select {
	    padding-top: 16px !important;
	    display: inline !important;
		}
		
		/* --- Callout to Button --- */
	  .notion-callout {
			border-radius: 8px !important;
			position: relative !important;
			padding: 16px 24px !important;
			border: none !important;
		}
		
		.notion-callout.bg-purple-light {
			filter: drop-shadow(0px 236px 292px rgba(18, 25, 34, 0.1)), drop-shadow(0px 170.156px 248.824px rgba(18, 25, 34, 0.0776796)), drop-shadow(0px 118.808px 179.287px rgba(18, 25, 34, 0.0699751)), drop-shadow(0px 81.7324px 119.77px rgba(18, 25, 34, 0.0657962)), drop-shadow(0px 54.4597px 75.5184px rgba(18, 25, 34, 0.0627343)), drop-shadow(0px 34.1312px 43.8815px rgba(18, 25, 34, 0.0593946)), drop-shadow(0px 18.9828px 22.0482px rgba(18, 25, 34, 0.0542688)), drop-shadow(0px 7.86774px 7.92296px rgba(18, 25, 34, 0.0443301)) !important;
			background: #8A44E4 !important;
		}
	  
	
		.notion-callout a {
			letter-spacing: -0.5px !important;
			padding: 0 0 2px 66px !important;
			align-items: center !important;
			position: absolute !important;
			font-weight: 700 !important;
			display: flex !important;
			border: none !important;
			color: #fff !important;
			bottom: 0 !important;
			right: 0 !important;
			left: 0 !important;
			top: 0 !important;
		}

    /* --- MISC --- */
    
    /* Hide notion toggle - a hack to hide child pages, drag them into a toggle and they'll disappear */
    .notion-toggle {
      display: none !important;
    }
    
</style>