460 lines
No EOL
10 KiB
SCSS
460 lines
No EOL
10 KiB
SCSS
p {
|
|
font-size: 16px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 48px;
|
|
font-family: 'Jersey-Regular';
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
h3 {
|
|
font-family: 'Jersey-Regular';
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.glowing-btn {
|
|
position: relative;
|
|
color: rgba(0,126,189,0.9);
|
|
cursor: pointer;
|
|
padding: 0.6em 1em;
|
|
border: 0.15em solid rgba(0,126,189,0.9);
|
|
border-radius: 0.45em;
|
|
background: none;
|
|
perspective: 2em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
|
|
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
//letter-spacing: 0.6em;
|
|
margin-top: 30px;
|
|
text-transform: uppercase;
|
|
|
|
//align-self: center;
|
|
width: 200px;
|
|
font-family: 'Jersey-Regular';
|
|
letter-spacing: 0.1em;
|
|
|
|
-webkit-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9),
|
|
0px 0px 0.5em 0px rgba(0,126,189,0.9);
|
|
-moz-box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9),
|
|
0px 0px 0.5em 0px rgba(0,126,189,0.9);
|
|
box-shadow: inset 0px 0px 0.5em 0px rgba(0,126,189,0.9),
|
|
0px 0px 0.5em 0px rgba(0,126,189,0.9);
|
|
//animation: border-flicker 2s linear infinite;
|
|
}
|
|
|
|
.glowing-txt {
|
|
//float: left;
|
|
//margin-right: -0.8em;
|
|
color: white;
|
|
// -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
|
|
// 0 0 0.45em rgba(0,126,189,0.9);
|
|
// -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
|
|
// 0 0 0.45em rgba(0,126,189,0.9);
|
|
// text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em rgba(0,126,189,0.9);
|
|
//animation: text-flicker 3s linear infinite;
|
|
}
|
|
|
|
.faulty-letter {
|
|
opacity: 1;
|
|
//animation: faulty-flicker 2s linear infinite;
|
|
}
|
|
|
|
//.glowing-btn::before {
|
|
// content: "";
|
|
// position: absolute;
|
|
// top: 0;
|
|
// bottom: 0;
|
|
// left: 0;
|
|
// right: 0;
|
|
// opacity: 0.7;
|
|
// filter: blur(1em);
|
|
// transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
|
|
// background: rgba(0,126,189,0.9);
|
|
// pointer-events: none;
|
|
//}
|
|
|
|
//.glowing-btn::after {
|
|
// content: "";
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// right: 0;
|
|
// bottom: 0;
|
|
// opacity: 0;
|
|
// z-index: -1;
|
|
// background-color: rgba(0,126,189,0.9);
|
|
// box-shadow: 0 0 2em 0.2em rgba(0,126,189,0.9);
|
|
// transition: opacity 100ms linear;
|
|
//}
|
|
|
|
.glowing-btn:hover {
|
|
background-color: rgba(0,126,189,0.9);
|
|
text-shadow: none;
|
|
animation: none;
|
|
}
|
|
|
|
.glowing-btn:hover .glowing-txt {
|
|
animation: none;
|
|
}
|
|
|
|
.glowing-btn:hover .faulty-letter {
|
|
animation: none;
|
|
text-shadow: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.glowing-btn:hover:before {
|
|
filter: blur(1.5em);
|
|
opacity: 1;
|
|
}
|
|
|
|
.glowing-btn:hover:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
@keyframes faulty-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
}
|
|
2% {
|
|
opacity: 0.1;
|
|
}
|
|
4% {
|
|
opacity: 0.5;
|
|
}
|
|
19% {
|
|
opacity: 0.5;
|
|
}
|
|
21% {
|
|
opacity: 0.1;
|
|
}
|
|
23% {
|
|
opacity: 1;
|
|
}
|
|
80% {
|
|
opacity: 0.5;
|
|
}
|
|
83% {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
87% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes text-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
2% {
|
|
opacity: 1;
|
|
}
|
|
|
|
8% {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
9% {
|
|
opacity: 1;
|
|
}
|
|
|
|
12% {
|
|
opacity: 0.1;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
25% {
|
|
opacity: 0.3;
|
|
}
|
|
30% {
|
|
opacity: 1;
|
|
}
|
|
|
|
70% {
|
|
opacity: 0.7;
|
|
}
|
|
72% {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
77% {
|
|
opacity: 0.9;
|
|
}
|
|
100% {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes border-flicker {
|
|
0% {
|
|
opacity: 0.1;
|
|
}
|
|
2% {
|
|
opacity: 1;
|
|
}
|
|
4% {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
8% {
|
|
opacity: 1;
|
|
}
|
|
70% {
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes morph {
|
|
0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;}
|
|
100% {border-radius: 40% 60%;}
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
|
|
|
|
/* This is just to transition when you change the viewport size. */
|
|
* {
|
|
transition: all 0.5s ease-out;
|
|
}
|
|
|
|
|
|
|
|
.image-box {
|
|
min-height: 60vmin;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
|
|
.box {
|
|
width: 40vmin;
|
|
height: 40vmin;
|
|
border: 1px dashed rgba(0, 128, 189,0.8);
|
|
position: relative;
|
|
|
|
@media screen and (min-width: 900px) {
|
|
width: 40vmin;
|
|
height: 40vmin;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
border-radius: 50%;
|
|
border: 1px dashed rgba(0, 128, 189,0.8);
|
|
transform: scale(1.42);
|
|
}
|
|
}
|
|
|
|
.spin-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
animation: spin 12s ease-in-out infinite alternate;
|
|
position: relative;
|
|
}
|
|
|
|
.shape {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: border-radius 1s ease-out;
|
|
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
|
animation: morph 8s ease-in-out infinite both alternate;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
z-index: 5;
|
|
}
|
|
|
|
.bd {
|
|
width: 142%;
|
|
height: 142%;
|
|
position: absolute;
|
|
left: -21%;
|
|
top: -21%;
|
|
background: url(../assets/img/lan.jpg);
|
|
background-size: 100%;
|
|
background-position: center center;
|
|
display: flex;
|
|
color: #003;
|
|
font-size: 5vw;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
animation: spin 12s ease-in-out infinite alternate-reverse;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin: 0 auto;
|
|
margin-top: 30px;
|
|
position: relative;
|
|
display: block;
|
|
border-radius: 999em;
|
|
color: white;
|
|
max-width: 250px;
|
|
height: 45px;
|
|
font-size: 20px;
|
|
letter-spacing: 0.075em;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-family: monospace;
|
|
font-family: 'Jersey-Regular';
|
|
|
|
span {
|
|
font-family: 'Jersey-Regular';
|
|
font-size: 24px;
|
|
}
|
|
|
|
|
|
&__inner {
|
|
height: 45px;
|
|
padding: 1px;
|
|
position: relative;
|
|
z-index: 2;
|
|
display: block;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
text-align: center;
|
|
font-family: monospace;
|
|
|
|
&:before {
|
|
height: 45px;
|
|
position: absolute;
|
|
inset: 4px;
|
|
z-index: 1;
|
|
display: block;
|
|
opacity: 0;
|
|
transition: opacity 0.2s linear 0.1s;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
&__label {
|
|
height: 100%;
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
padding: 0.35em 0em 0.35em;
|
|
border-radius: inherit;
|
|
color: transparent;
|
|
white-space: nowrap;
|
|
font-family: monospace;
|
|
|
|
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
z-index: 2;
|
|
|
|
display: block;
|
|
padding: inherit;
|
|
width: 100%;
|
|
|
|
color: white;
|
|
white-space: nowrap;
|
|
|
|
transition: transform 0.3s cubic-bezier(1, 0, 0, 1) 0s;
|
|
}
|
|
|
|
&:before {
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
content: attr(data-label);
|
|
}
|
|
|
|
&:after {
|
|
transform: translate3d(0, -100%, 0);
|
|
|
|
content: attr(data-hover);
|
|
}
|
|
|
|
&__background {
|
|
position: absolute;
|
|
inset: -100px;
|
|
display: block;
|
|
background: #222;
|
|
background-blend-mode: overlay;
|
|
}
|
|
}
|
|
|
|
&__background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
|
|
&:before,
|
|
&:after {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: block;
|
|
border-radius: inherit;
|
|
content: "";
|
|
}
|
|
|
|
&:before {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.btn__background {
|
|
&:before {
|
|
background: #0080bd;
|
|
}
|
|
|
|
&:after {
|
|
opacity: 1;
|
|
transition: opacity 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s;
|
|
}
|
|
}
|
|
|
|
|
|
.btn__label {
|
|
&:before,
|
|
&:after {
|
|
transition-duration: 0.6s;
|
|
transition-timing-function: cubic-bezier(1, -0.6, 0, 1.6);
|
|
}
|
|
|
|
&:before {
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
|
|
&:after {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
} |