/* Taraxa project main website custom CSS */


/* COLOR DEFINITIONS ------------- */

:root {
	--tara-green: #15AC5B;
	--tara-dark-green: #108948;
	--tara-black: #111111;
	--tara-grey: #151515;
	--tara-dark-grey: #272b3c;
	--black: #000000;
}

/* ----------------------------------- */


/* global definitions */ 
/* using Google fonts */
body {
		font-family: 'Inter', sans-serif;
		font-weight: 300;
		background-color: var(--black);
		color: #ffffff;
}

html, body {
  overflow-x: hidden;
}

a {
	color: white;
}

a:hover {
	color: var(--tara-green);
}

/* for larger screens limit scaling up to 1200px */
.site-container {
	max-width: 1200px;
	padding: 0px;
}

.container-fluid { padding: 0px; }

/* remove outline from links */
button:focus, 
a:focus, {
	outline: none;
	box-shadow: none;
}

.navbar-toggler:focus {
	outline: none;
	box-shadow: none;
}

/* ----------------------------------- */

/* page lead */

.page-lead {
	font-size: 2.5em;
	font-weight: 400;
}



/* Navbar */
/* ------------------------- */

/* font */
.nav-font-size {
	font-size: 0.9em;
}



/* colors */
.nav-pills .nav-link.active {
	background-color: var(--tara-grey) !important;
}

.bg-dark {
		--bs-bg-opacity: 0 !important;
		background-color: transparent !important;
}

.off-canvas-bg {
	--bs-bg-opacity: 1 !important;
	background-color: var(--black) !important;	
}

.off-canvas-menu-category {
	color: #999;
}

.off-canvas-menu-subitems {
	margin-top: 1em;
	margin-bottom: 1em;	
}

.off-canvas-menu-subitems a {
	text-decoration: none;
}

.navbar-dark, .navbar-nav, .nav-link, .navbar-toggler {
	color: white !important;
}

.navbar-toggler-icon {
	width: 1em;
	height: 1em;
}

.navbar-dark, .navbar-toggler {
	border-color: var(--tara-black) !important;
}


/* homepage cards */
/* ----------------------------------------- */

.home-taraxa-l1-card-text {
	min-height: 400px;
	background-color: var(--tara-black);
	color: #fff;
}

.home-taraxa-l1-card-image {
	min-height: 400px;
	background-color: var(--black);
	color: #fff;
}

.home-taraxa-l1-card-button-font {
	font-size: 0.8em;
}


/* homepage network indicator cards */
.home-network-stat-square, 
.home-community-square {
  position: relative;
  width: 100%;
  padding-top: 100%;  
  border-radius: 10px;
  margin: 0px;
}

.home-community-square {
	background-color: var(--tara-black);
	color: #fff;
}

.home-community-square:hover {
	background-color: var(--tara-green);
	color: var(--tara-black);
}


.home-network-stat-card-content,
.home-community-card-content {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  width: 80%;
  height: 80%;
  padding: 0px;  
  text-align: right;
  flex-direction: column;
}

.home-community-card-content {
	flex-direction: row !important;
}

.home-network-stat-row {
  margin-left: 0rem;
  margin-right: 0rem;
}

.home-network-stat-col, 
.home-community-col {
  padding: 0.5rem;
  text-align: center;
}

.home-network-cta-text {	
	background-color: var(--tara-black);
}

.home-network-card-title {	
	font-size: 0.8em;
}

.home-network-card-text {	
	font-size: 1.5em;
}



/* token page cards */
/* ----------------------------------------- */

.token-card-title {
	color: grey;
}

.token-card-content {
	color: #fff;
}




/* ----------------------------------------- */



/* top navbar container */ 
.nav_container {
	margin-left: 1em;
	margin-right: 1em;
	padding: 1em;
}


/* off-canvas logo - always smaller */
.taraxa_logo_offcanvas {
	max-height: 30px;
	width: auto;
}

/* position & size of the downward carat */
.dropdown-toggle::after {
		display: none;
}


/* background color of the dropdown menus */
.dropdown-menu-dark {
	--bs-dropdown-bg: var(--tara-grey);
}

/* background color of full-length navbar top */
.navbar-full-length-bg {
	background-color: var(--tara-grey);
}


/* navbar dropdown animation */
/* ref: https://jsfiddle.net/StartBootstrap/o7ev9czn/ */ 

@keyframes dropdown-slide {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
}

.animate-dropdown {
  animation-duration: 0.5s;
  animation-fill-mode: both;  
  animation-name: dropdown-slide;  
}

/* bunch of screen-size specific stuff ------------ */


/* Large-ish screens, larger than bootstrap breakpoint sm */
@media (min-width: 577px) {
	.default_taraxa_container {
		padding-left: 4em;
		padding-right: 4em;
		padding-top: 2em;
		padding-bottom: 0em;
	}

	.taraxa_logo {
		max-height: 40px;
		width: auto;
	}

	.taraxa_logo-footer {
		max-height: 30px;
		width: auto;
	}

	.hero-less-mobile-padding {
		padding: 2em;
	}

	.nav-item {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}

	.taraxa_logo_offcanvas {
		padding-left: 0.8em;
	}

	.community-listing-language {
		padding: 2em;
	}

	.community-listing-social-icons {
		text-align: left;
	}

	.header-background-div {
		background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 500px;
	}

	.header-responsive-margin-bottom {
		margin-bottom: 1em;	
	}

	.intro-video-preview {
		padding-left: 10%;
		padding-right: 10%;		
	}

	.intro-video {
		width: 80%;
		height: 80%;
		max-width: 1000px;
		max-height: 562px;
	}


	/* navbar hover-over expand */
	/* can't have this on mobile */

	.dropdown:hover .dropdown-menu {
	    display: block;
	    margin-top: 0; /* remove the gap so it doesn't close */
	}

	.dropdown>.dropdown-toggle:active {
	  /*Without this, clicking will make it sticky*/
	    pointer-events: none;
	}

	.hero-section-header-homepage-padding {
		padding-top:10em;
		padding-bottom: 10em;
	}

	.footer-left {
  	text-align: left;
  }

  .footer-right {
  	text-align: right;
  }

  .home-taraxa-l1-card-container {
		margin-top: 4em;
		margin-bottom: 0em;
	}

	.home-top-hero {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}



/* Small-ish screens, at bootstrap breakpoint sm */
@media (max-width: 576px) {	
	.default_taraxa_container {
		padding-left: 1em;
		padding-right: 1em;
		padding-top: 1em;
		padding-bottom: 0em;
	}

	.taraxa_logo {
		max-height: 30px;
		width: auto;
	}

	.taraxa_logo-footer {
		max-height: 30px;
		width: auto;
	}

	.nav-collapse-top-margin {
		margin-top: 1.5em;	
	}

	.hero-less-mobile-padding {
		padding: 0.5em;
	}

	.mobile-center {
		text-align: center;
	}

	.nav-item {
		padding-left: 1em;
		padding-right: 1em;		
	}

	.taraxa_logo_offcanvas {
		padding-left: 0.8em;
	}

	.community-listing-language {
		padding-left: 3em;
		padding-right: 3em;
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		text-align: center;
	}

	.community-listing-social-icons {
		text-align: center;
	}

	.header-background-div {
		background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 300px;
	}

	.header-responsive-margin-bottom {
		margin-bottom: 4em !important;
	}

	.hero-section-header-homepage-padding {
		padding-top:5em;
		padding-bottom: 5em;
	}

	.intro-video-preview {
		width: 100%;
		height: auto;
	}

	.intro-video {
		width: 100%;
		height: auto;
	}

	.offcanvas-body .nav-pills {
  	display: flex;
    flex-direction: column;
  }

  .footer-left {
  	text-align: center;
  }

  .footer-right {
  	text-align: center;
  }

  .home-taraxa-l1-card-container {
		margin-top: 2em;
		margin-bottom: 1em;
	}

	.home-top-hero {
		padding-top: 0rem;
		padding-bottom: 0rem;
	}
}


/* Heroe containers */
.hero-standard {
	background-color: transparent;
	color: #ffffff;
	text-align: center;
	margin-bottom: 2em;	
}

.hero-post {
	background-color: transparent;
	color: #ffffff;
	text-align: left;
	margin-bottom: 2em;	
}

.container-footer {
	background-color: var(--tara-black);
	color: #ffffff;
}

.hero-section-header {
	background-color: transparent;
	color: #ffffff;
	min-height: 700px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-section-header-homepage {
	background-color: transparent;
	color: #ffffff;
	min-height: 700px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-subsection-header {
	background-color: var(--tara-black); 
	color: #ffffff;
	height: 500px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
}

.hero-blog-header {
	background-color: transparent;
	color: #ffffff;
	min-height: 400px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

}

.hero-pinned-blogs {
	margin-top: 0px;
	padding: 0px;

}


/* Bootstrap buttons primary / secondary color change */
.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .show>.btn-primary.dropdown-toggle {
		color: #fff !important;
		background-color: var(--tara-green) !important;
		border-color: var(--tara-green) !important;
		box-shadow: none !important;
}

.btn-primary:hover {
		color: #fff !important;
		background-color: var(--tara-dark-green) !important;
		border-color: var(--tara-dark-green) !important;
		box-shadow: none !important;
}

.bg-primary { background-color: var(--tara-green) !important; }


/* secondary */
.btn-secondary, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:active:focus, .btn-check:active+.btn-secondary, .btn-check:checked+.btn-secondary, .btn-secondary.active, .show>.btn-secondary.dropdown-toggle {
		color: #fff !important;
		background-color: var(--tara-grey) !important;
		border-color: var(--tara-grey) !important;
		box-shadow: none !important;
}

.btn-secondary:hover {
		color: #fff !important;
		background-color: var(--tara-dark-grey) !important;
		border-color: var(--tara-dark-grey) !important;
		box-shadow: none !important;
}

.bg-secondary { background-color: var(--tara-grey) !important; }


/* disabled */
.btn.disabled, .btn:disabled, fieldset:disabled {
	border: 0px;
	outline: none;
	box-shadow: none;
}


/* Cards */ 

.taraxa-card {
	background-color: var(--tara-grey);	
	margin-bottom: 2em;
	border: 0px;
}

.taraxa-card-community-gray {
	background-color: var(--tara-grey);
	margin-bottom: 0em;
	border: 0px;
}

.taraxa-card-community-transparent {
	background-color: transparent;
	margin-bottom: 0em;
	border: 0px;
}

.team-card-title {
	color: #fff;
}

/* icons in cards */ 
.card-icon-primary {
	color: #fff;
	font-size: 1.5em;
}

.card-icon-secondary {
	color: #878CA4;
	font-size: 1em;
}

.card-link {
	color: #fff;
	text-decoration: none;
}

.card-link:hover  {
	color: #fff;
	text-decoration: none;
}

.ecosystem-card-logo {
	height: 10px;
}



.card-subtitle {
	font-size: 0.9em;
}


/* Learn more cards */
/* ------------------------- */
.learn-card:hover {
	color: #fff;
	background-color: var(--tara-green);
}

/* hack -> change a child when parent's hover is triggered */
#_learn_card:hover #_primary_icon { color: var(--tara-black); }
#_learn_card:hover #_secondary_icon { color: var(--tara-black); }
#_learn_card:hover #_learn_more_text { color: var(--tara-black); }

.card-text { color: #ccc;}

/* ------------------------- */



/* Network stats cards */
/* ------------------------- */

.card-stat-title {
	font-size: 1em;
	font-weight: bold;
}

.card-stat-units {
	font-size: 0.5em;
	font-weight: normal;
}

/* ------------------------- */



/* Images */
/* ------------------------- */

.img-banner {
	width: 500px;
	height: auto;
}

/* ------------------------- */


/* posts */ 
/* ------------------------- */

.sub-heading {
	font-weight: bold;
	margin-top: 2em;
	margin-bottom: 1em;
}

.post-paragraph {
	margin-bottom: 2em;
}

.post-list {
	margin-bottom: 2em;
}

.emphasis {
	font-weight: bold;
}

.post-text-body {
	font-size: 18px;
	color: #ddd;
}

.social-strip-share {
	color: #ccc;
}

.social-strip {
	text-align: right;
}

blockquote {
	font-style: italic;
	margin-top: 1em;
	margin-bottom: 1em;	
}

.blockquote-footer {
	font-style: normal;
}

.post-figure {
	margin-top: 2em;
	margin-bottom: 2em;	
}

.figure-caption {
	color: #bbb !important;
	font-style: italic;
}


/* coverage strip */ 
.coverage-strip-logo {
	max-width: 150px;
}


/* custom tooltip background */
.custom-tooltip {
	--bs-tooltip-bg: #fff;
	--bs-tooltip-color: var(--tara-black);
}


/* blog */
.blog-description-top {
	font-size: 1.25em;
	color: grey;	
}

.blog-description {
	font-size: 1em;
	color: grey;
}

.blog-container {
	padding-top: 0px;	
}

.blog-lead-top {
	font-size: 1em;
  font-weight: 300;
  color: #ccc;
}

.blog-lead {
	font-size: 0.9em;
  font-weight: 300;
  color: #ccc;
}

a.blog-link, a.blog-link:hover { 
	color: #ffffff;
	text-decoration: none;
}



/* grant */
.text-grants { font-size: 1.2em; }


/* special arrow call to action button */ 

.btn-nowrap {
	white-space: nowrap;
}



/* social */
.social-icon-outer { color:  #ffffff; }
.social-icon-inner { color:  var(--tara-black); }
.social-icon-inner:hover { color: var(--tara-green); }


/* benefit star icons */
.benefit-icon-outer { color: #1D3837; }
.benefit-icon-inner { color: var(--tara-green); }


/* footer */
.footer-text { font-size: 0.9em; }
.footer-link { color: #bbb; }
.footer-link:hover { color: #fff; }
.footer-legal { color: #555; }


/* misc typography */
.lead { color: #ccc;}
.smaller-lead { color: #ccc; font-size: 0.9em;}
.team-photo { width: 60%;}


/* text fipping on homepage */
.text-show {
  color: var(--tara-green);
  opacity: 1;
  transition: all 1s ease;
}

.text-fade {
  color: var(--tara-green);
  opacity: 0;
  transition: all 1s ease;
}

.flip-text {
	color: var(--tara-green);
}


/* video play button */
span.video-play-btn {
    border-radius: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    width: 86px;
    height: 86px;
    background-color: #ffffff;
    transition: all ease-in-out .1s;
    border: 2px solid var(--tara-green);
}

span.video-play-btn i.fas.fa-play {
    font-size: 25px;
    color: var(--tara-green);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    transition: all ease-in-out .1s;
    position: relative;
    left: 2px;
    top: 1px;
}

div.intro-video-preview a:hover span.video-play-btn {    
    background-color: var(--tara-green);
    transition: all ease-in-out .1s;
    border: 2px solid #ffffff;
}

div.intro-video-preview a:hover span.video-play-btn i.fas.fa-play {    
    color: #ffffff;
}


/* video modal */
.video-modal-dark {
	background-color: var(--tara-black);
}

.video-modal-no-border {
	border: none;
}
/*
     FILE ARCHIVED ON 03:19:52 Aug 02, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 15:03:52 Mar 02, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.641
  exclusion.robots: 0.058
  exclusion.robots.policy: 0.046
  esindex: 0.008
  cdx.remote: 79.883
  LoadShardBlock: 714.244 (3)
  PetaboxLoader3.resolve: 925.455 (3)
  PetaboxLoader3.datanode: 527.726 (4)
  load_resource: 819.884
*/