xrhf/asset/css/style.css

:root {
  --pico-line-height: 2;
  --pico-primary-background: #77F !important;
}

.container{
}

header{
  height:210px;
}

main{
  margin-bottom:120px;
}

small{
  color: var(--pico-contrast-underline);
}

.hue-1{ filter: hue-rotate(45deg); }
.hue-2{ filter: hue-rotate(90deg); }
.hue-3{ filter: hue-rotate(135deg); }
.hue-4{ filter: hue-rotate(180deg); }

a,
a:active{
  color: #95F;
}
a:visited{
  color: #888;
} 

header > .spectrum,
div#logo{
  width:290px;
}

/* images (hidden for html2text browsers like lynx) */

div#logo{
  background: url(../img/xrh-full.svg);
  height:112px;
  display:inline-block;
  background-size:cover;
}

div#lvk{
  background: url(../img/lvk.jpg);
  height:100px;
  width:100px;
  background-size:cover;
  display:inline-block;
  border-radius:50%;
  float:left;
  margin-right:25px;
}

div#fabien{
  background: url(../img/fabien.jpg);
  height:100px;
  width:100px;
  background-size:cover;
  display:inline-block;
  border-radius:50%;
  float:left;
  margin-right:25px;
}

button,
.btn{
  box-shadow: 0px 0px 15px #77F7;
}
.btn{
  -webkit-appearance: button;
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  --pico-color: var(--pico-primary-inverse);
  --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: 0;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  font-size: 1rem;
  line-height: var(--pico-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition);
}

div.banner,
div#banner {
  overflow:hidden;
  height: 40vh;
  max-height:200px;
  width: 100%;
  margin:30px 0px;
  border-radius:7px;
}
div#banner{
  background: url(../img/banner.jpg);
  background-size: 10%;
  background-position: center;
  -webkit-animation: scrolly 20s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
          animation: scrolly 20s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

div#hint{
  background: url(../img/blinkhint.svg);
  height: 160px;
  background-size: cover;
  width: 200px;
  position: absolute;
  top: 20px;
  left: 60%;;
}

div#xrecosystem{
  background: url(../img/xrecosystem.png);
  height: 200px;
  background-size: contain;
  width: 100%;
  border-radius:7px;
  margin:15px 0px;
}

div#translators{
  background: url(../img/translators.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: contain;
  width: 100%;
  border-radius:7px;
  margin:15px 0px;
}

div#xrfragment{
  background: url(../img/xrfragments.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#xrshthumb{
  background: url(../img/xrsh-thumb.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#janusweb{
  background: url(../img/janusweb.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#janus1{
  background: url(../img/janus1.jpg);
  height: 100px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
  border-radius:7px;
}

div#xrflogo{
  background: url(../img/xrf.svg);
  height: 46px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 120px;
  border-radius:7px;
}
div#hanlogo{
  background: url(../img/han.jpg);
  height: 46px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 88px;
  border-radius:7px;
}

div#searxrlogo{
  background: url(../img/searxr.jpg);
  height: 23px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100px;
  border-radius:7px;
}

div#aframeverse{
  background: url(../img/aframe-verse.gif);
  height: 200px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 250px;
  border-radius:7px;
}

div#xrsh{
  background: url(../img/xrsh.webp);
  height: 200px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 250px;
  border-radius:7px;
}

div#janusxrlogo{
  background: url(../img/janusxr-logo.png);
  height: 71px;
  filter: brightness(0.66);
  background-repeat:no-repeat;
  background-size: cover;
  width: 200px;
  border-radius:7px;
}

div#xrforge{
  background: url(../img/xrforge-thumb.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#biggu_s_gate{
  background: url(../img/biggu_s_gate.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#searxr{
  background: url(../img/searxr.gif);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#januswebbrowser{
  background: url(../img/januswebbrowser.jpg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: cover;
  width: 100%;
}

div#translators{
  position:absolute;
  background: url(../img/translators.svg);
  height: 400px;
  background-repeat:no-repeat;
  background-size: contain;
  width: 100%;
  opacity:0.5;
  z-index:100;
}

div#euvalues{
  background: url(../img/EUvalues.webp);
  height: 400px;
  background-size: cover;
  width: 100%;
  border-radius:7px;
  margin:15px 0px;
  background-position:center;
}

.spectrum{
  margin-top:10px;
  box-shadow: 0px 0px 5px #F0F;
  margin-bottom:50px;
}

.spectrum > div,
.ruler{
  margin:3px 0px;
  clear:both;
  background:linear-gradient(90deg, #F07, #77F, #F07);
  height:2px;
}

/* sticky footer */

.footer {
  position: fixed;
  bottom: 0;
  /* Optional: Add background, padding, etc. */
  background: linear-gradient( 0deg, var(--pico-background-color) 66%, #0000);
  padding: 1rem;
  width:100%;
  z-index: 1000; /* Ensures it stays above other content */
}

.clear{
  clear:both;
}

/* telescopic text */

u {
  cursor: pointer;
  display: inline;
  text-decoration:none;
  white-space:nowrap;
  font-weight:bold;
  padding:0;
}

u > u,
u > span{
  display: none;
}

u:focus-within > u,
u:focus-within > span {
  display: inline;
}

u span{
  font-weight:normal;
  white-space: normal;
  background:none;
}

/* underline settings */

.telescopic u:nth-child(odd)::before,
.telescopic u:nth-child(even)::before{
  border-bottom:4px solid #F0F;
  content:' ';
  display:inline-block;
  margin-right:5px;
  width:23px;
  height:32px;
  position: absolute;
  animation:fade 1000ms infinite; 
  -webkit-animation:fade 1000ms infinite;
}
.telescopic u:nth-child(odd)::before{
  border-bottom:4px solid #77F;
}

.vertical u:focus-within > u::after,
.vertical u:focus-within > span::after {
  content:' ';
  display:block;
}

.show > u,
.show > span{
  display:inline;
}

.telescopic u.show::before,
.telescopic u.show::after{
  display:none;
}

/* bg mode */

.bg > u,
.bg u:focus-within > u {
  background:#EEE;
  border-radius:4px;
  padding:4px;
}

.bg u.show {
  background:#FFF;
}

@keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.3; }
  to { opacity: 1.0; }
}                                          
@-webkit-keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.3; }
  to { opacity: 1.0; }
}

/* cards filter */

input[type="radio"] {
    display:none;
}
label {
  padding-bottom:10px;
  cursor:pointer;
}
input[type="radio"][id="openlearning"]:checked ~ .protocol,
input[type="radio"][id="openlearning"]:checked ~ .xrdiscovery,
input[type="radio"][id="openlearning"]:checked ~ .browser,
input[type="radio"][id="openlearning"]:checked ~ .webtranslator,
input[type="radio"][id="protocol"]:checked ~ .openlearning, 
input[type="radio"][id="protocol"]:checked ~ .xrdiscovery, 
input[type="radio"][id="protocol"]:checked ~ .browser,
input[type="radio"][id="protocol"]:checked ~ .webtranslator,
input[type="radio"][id="xrdiscovery"]:checked ~ .openlearning, 
input[type="radio"][id="xrdiscovery"]:checked ~ .protocol, 
input[type="radio"][id="xrdiscovery"]:checked ~ .browser,
input[type="radio"][id="xrdiscovery"]:checked ~ .webtranslator,
input[type="radio"][id="webtranslator"]:checked ~ .openlearning, 
input[type="radio"][id="webtranslator"]:checked ~ .protocol, 
input[type="radio"][id="webtranslator"]:checked ~ .browser,
input[type="radio"][id="webtranslator"]:checked ~ .xrdiscovery,
input[type="radio"][id="browser"]:checked ~ .protocol,
input[type="radio"][id="browser"]:checked ~ .xrdiscovery,
input[type="radio"][id="browser"]:checked ~ .webtranslator,
input[type="radio"][id="browser"]:checked ~ .openlearning {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

.tile {
  width:30%;
  border: 1px solid #FFF2;
  height:550px;
  float:left;
  overflow:hidden;
  transition:all 0.3s;
  margin:0 1% 1% 0;
  background:#7773;
  border-radius:7px;
  position:relative;
}
@media screen and (max-width: 660px) {
  .tile{
    width:100%;
    margin-bottom:30px;
  }
}


.tile .description{
  color:#888;
  font-size:16px;
  display:block;
  text-decoration:none;
  cursor:pointer;
  padding:15px;
}
.tile .description:hover{
  text-decoration:underline;
}


/* pulsating circle */

.pulsating-circle {
  position: absolute;
  left: 4px;
  top: 20px;
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;
  z-index:-100;
  opacity:0.3;
}
.pulsating-circle:before {
  content: "";
  position: relative;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 45px;
  background-color: #A4F;
  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
          animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
          animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@-webkit-keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }
  80%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}

@-webkit-keyframes scrolly {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(10);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scrolly {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(10);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 600px) {
  @-webkit-keyframes scrolly {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(27);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes scrolly {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(27);
    }
    100% {
      transform: scale(1);
    }
  }
}


/* ================ The Timeline ================ */

.timeline {
  font-size:15px;
  position: relative;
  width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: ' ';
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80,80,80);
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
  
  z-index: 5;
}

.timeline li {
  padding: 0 0;
  list-style: none;
  text-decoration:none;
}
.timeline *,
.timeline *::after,
.timeline *::before{
  box-sizing:content-box;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 300px;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 300px;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;
  
  text-align: center;
}

.flag {
  color:#666;
  position: relative;
  display: inline;
  background: rgb(248,248,248);
  padding: 6px 10px;
  border-radius: 5px;
  
  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: ' ';
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid #77F;
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248,248,248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;
  
  line-height: 1em;
  font-size: 0.96666em;
  color: #07F;
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  margin: 5px 15px;
  background: rgb(248,248,248);
}

.desc {
  margin: 1em 0.75em 0 0;
  color:#888;
  font-size: 1em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

.timeline {
 	width: 100%;
	padding: 4em 0 1em 0;
}

.timeline ul li {
	padding: 2em 0;
}

.direction-l,
.direction-r {
	float: none;
	width: 100%;

	text-align: center;
}

.flag-wrapper {
	text-align: center;
}

.flag {
	background: rgb(255,255,255);
	z-index: 15;
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: -30px;
	left: 50%;
	content: ' ';
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -9px;
	background: #fff;
	border-radius: 10px;
	border: 4px solid rgb(255,80,80);
	z-index: 10;
}

.direction-l .flag:after,
.direction-r .flag:after {
	content: "";
	position: absolute;
	left: 50%;
	top: -8px;
	height: 0;
	width: 0;
	margin-left: -8px;
	border: solid transparent;
	border-bottom-color: rgb(255,255,255);
	border-width: 8px;
	pointer-events: none;
}

.time-wrapper {
	display: block;
	position: relative;
	margin: 4px 0 0 0;
	z-index: 14;
}

.direction-l .time-wrapper {
	float: none;
}

.direction-r .time-wrapper {
	float: none;
}

.desc {
	position: relative;
	margin: 1em 0 0 0;
	padding: 1em;
	background: var(--pico-background-color);
	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
  box-shadow: 0 0 5px #8887;
  border-radius: 7px;
  z-index: 15;
}

.direction-l .desc,
.direction-r .desc {
	position: relative;
	margin: 1em 1em 0 1em;
	padding: 1em;
	
  z-index: 15;
}

}

@media screen and (min-width: 400px ?? max-width: 660px) {

  .direction-l .desc,
  .direction-r .desc {
    margin: 1em 4em 0 4em;
  }

}
@media screen and (max-width: 660px) {

  .timeline li{
    margin: 57px 0px !important;
  }
}