170 lines
8.0 KiB
CSS
170 lines
8.0 KiB
CSS
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
|
||
|
|
|
||
|
|
/* HTML5 display-role reset for older browsers */
|
||
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
|
||
|
|
|
||
|
|
body { line-height: 1; }
|
||
|
|
|
||
|
|
ol, ul { list-style: none; }
|
||
|
|
|
||
|
|
blockquote, q { quotes: none; }
|
||
|
|
|
||
|
|
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
|
||
|
|
|
||
|
|
table { border-collapse: collapse; border-spacing: 0; }
|
||
|
|
|
||
|
|
/* -------------------------------------------------------------------------- Breakpoints */
|
||
|
|
.uppercase, .upper { text-transform: uppercase; }
|
||
|
|
|
||
|
|
.lowercase, .lower { text-transform: lowercase; }
|
||
|
|
|
||
|
|
.titlecase, .capitalize { text-transform: capitalize; }
|
||
|
|
|
||
|
|
@font-face { font-family: 'SpaceMono Regular'; src: url("../fonts/space-mono/SpaceMono-Regular.ttf") format("truetype"); font-weight: 300; font-style: normal; }
|
||
|
|
|
||
|
|
@font-face { font-family: 'SpaceMono Bold'; src: url("../fonts/space-mono/SpaceMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; }
|
||
|
|
|
||
|
|
@font-face { font-family: 'SpaceMono Italic'; src: url("../fonts/space-mono/SpaceMono-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; }
|
||
|
|
|
||
|
|
@font-face { font-family: 'SpaceMono Bold Italic'; src: url("../fonts/space-mono/SpaceMono-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; }
|
||
|
|
|
||
|
|
@font-face { font-family: 'Orator Std Slanted'; src: url("../fonts/OratorStd/Orator-Std-Slanted.ttf") format("truetype"); font-weight: 400; font-style: italic; }
|
||
|
|
|
||
|
|
p, a, span, h1, h2, h3, h4, h5, strong, em, h6, li, .separator { font-family: "SpaceMono Regular", "Courier New", Courier, monospace; color: #1d2022; margin-bottom: 16px; }
|
||
|
|
|
||
|
|
p::selection, a::selection, span::selection, h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, strong::selection, em::selection, h6::selection, li::selection, .separator::selection { background-color: #0ddfe7; color: #fff; }
|
||
|
|
|
||
|
|
strong { font-family: "SpaceMono Bold", "Courier New", Courier, monospace; }
|
||
|
|
|
||
|
|
em { font-family: "SpaceMono Italic", "Courier New", Courier, monospace; }
|
||
|
|
|
||
|
|
small { font-size: smaller; }
|
||
|
|
|
||
|
|
h1 { font-size: 84px; }
|
||
|
|
|
||
|
|
h1, .h1 { font-size: 64px; font-family: "Orator Std Slanted", "SpaceMono Regular", "Courier New", Courier, monospace; }
|
||
|
|
|
||
|
|
h2, .h2 { font-size: 32px; font-family: "Orator Std Slanted", "SpaceMono Regular", "Courier New", Courier, monospace; }
|
||
|
|
|
||
|
|
h3, .h3 { font-size: 16px; font-family: "Orator Std Slanted", "SpaceMono Regular", "Courier New", Courier, monospace; font-style: italic; }
|
||
|
|
|
||
|
|
p, .text-p { font-size: 14px; font-family: "SpaceMono Regular", "Courier New", Courier, monospace; line-height: 32px; }
|
||
|
|
|
||
|
|
a { font-weight: bold; }
|
||
|
|
|
||
|
|
a:hover, a:visited { font-style: italic; }
|
||
|
|
|
||
|
|
.separator { max-width: 640px; display: flex; justify-content: center; margin-top: 16px; margin-bottom: 16px; }
|
||
|
|
|
||
|
|
.separator .dot { height: 8px; width: 8px; border-radius: 100%; background-color: #1d2022; }
|
||
|
|
|
||
|
|
.separator .dot.background-blue { background-color: #0ac2c9; }
|
||
|
|
|
||
|
|
.separator .dot.background-white { background-color: #fff; }
|
||
|
|
|
||
|
|
body { background-color: #fff; background-image: url("../img/bg/es-c.jpg"); background-image: url("../img/bg/es-c.jpg"), linear-gradient(270deg, #0ddfe7, #037fe4); background-repeat-x: no-repeat; background-repeat-y: repeat; background-size: cover; background-attachment: fixed; display: flex; flex-direction: column; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { body { background-attachment: scroll; } }
|
||
|
|
|
||
|
|
.page-content { max-width: 920px; margin: 0 auto; }
|
||
|
|
|
||
|
|
html, body { height: 100%; }
|
||
|
|
|
||
|
|
.content { flex: 1 0 auto; }
|
||
|
|
|
||
|
|
footer.page-footer { flex-shrink: 0; }
|
||
|
|
|
||
|
|
.rf-logo path { fill: transparent; stroke-width: 1; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { .rf-logo path { stroke-width: 1.5; } }
|
||
|
|
|
||
|
|
.text-container p, .text-container h2, .text-container h3, .text-container ul { max-width: 640px; background-color: #fff; padding: 16px 32px; margin: 0; }
|
||
|
|
|
||
|
|
.text-container p:last-of-type:not(ul), .text-container h2:last-of-type:not(ul), .text-container h3:last-of-type:not(ul), .text-container ul:last-of-type:not(ul) { margin-bottom: 32px; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { .text-container p, .text-container h2, .text-container h3, .text-container ul { padding: 16px; } }
|
||
|
|
|
||
|
|
.text-container h2 { display: inline-block; padding-bottom: 8px; margin-top: 64px; margin-bottom: 32px; }
|
||
|
|
|
||
|
|
.text-container ul { font-size: 14px; }
|
||
|
|
|
||
|
|
.text-container ul li { list-style: inside; padding-left: 12px; padding-right: 12px; line-height: 24px; }
|
||
|
|
|
||
|
|
.text-container ul li:last-of-type { margin-bottom: 0; }
|
||
|
|
|
||
|
|
.text-container sup a { text-decoration: none; color: #037fe4; }
|
||
|
|
|
||
|
|
h2 { margin-top: 32px; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { h2 { margin-top: 0; } }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { .page-content { margin-left: 32px; margin-right: 32px; } }
|
||
|
|
|
||
|
|
.side-title { position: fixed; transition: all 0.2s ease-in-out; color: #fff; margin: 0; width: 100vh; bottom: 0; text-align: center; }
|
||
|
|
|
||
|
|
.side-title.side-title--left { transform: rotate(270deg); left: 5%; transform-origin: left; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { .side-title.side-title--left { left: 15px; } }
|
||
|
|
|
||
|
|
.side-title.side-title--right { transform: rotate(90deg); right: 5%; transform-origin: right; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { .side-title.side-title--right { right: 15px; } }
|
||
|
|
|
||
|
|
.side-title.hidden { opacity: 0.0001; }
|
||
|
|
|
||
|
|
.side-title a { color: #fff; }
|
||
|
|
|
||
|
|
#rf-logo-wrapper { transition: all 0.8s ease-in-out; }
|
||
|
|
|
||
|
|
#rf-logo-wrapper.hidden { opacity: 0.0001; margin-top: -100px; }
|
||
|
|
|
||
|
|
#rf-logo-wrapper .rf-logo { margin: 64px 0 64px 32px; }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { #rf-logo-wrapper .rf-logo { margin: 0; max-width: 90%; margin-left: 5%; } }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { #rf-logo-wrapper { margin: 0; } }
|
||
|
|
|
||
|
|
.error-404 { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; flex-direction: column; }
|
||
|
|
|
||
|
|
.error-404 h1, .error-404 p, .error-404 a, .error-404 strong { color: #fff; }
|
||
|
|
|
||
|
|
.error-404 .fourohfour { display: flex; flex-direction: row; }
|
||
|
|
|
||
|
|
.error-404 .fourohfour h1 { animation: grain 1s steps(10) infinite; }
|
||
|
|
|
||
|
|
.error-404 .fourohfour h1:first-of-type { animation-duration: 2s; }
|
||
|
|
|
||
|
|
.error-404 .fourohfour h1:last-of-type { animation-duration: 3s; }
|
||
|
|
|
||
|
|
.error-404 a { transition: transform 5s ease-in-out; }
|
||
|
|
|
||
|
|
.error-404 a:hover { transform: scale(20) rotate(360deg); }
|
||
|
|
|
||
|
|
@keyframes grain { 0%, 100% { transform: translate(0, 0); }
|
||
|
|
10% { transform: translate(-5%, -10%); }
|
||
|
|
20% { transform: translate(-15%, 5%); }
|
||
|
|
30% { transform: translate(7%, -25%); }
|
||
|
|
40% { transform: translate(-5%, 25%); }
|
||
|
|
50% { transform: translate(-15%, 10%); }
|
||
|
|
60% { transform: translate(15%, 0%); }
|
||
|
|
70% { transform: translate(0%, 15%); }
|
||
|
|
80% { transform: translate(3%, 35%); }
|
||
|
|
90% { transform: translate(-10%, 10%); } }
|
||
|
|
|
||
|
|
/* Track */
|
||
|
|
/* Handle */
|
||
|
|
header.page-header .lang { position: absolute; color: #1d2022; top: 32px; right: 32px; background-color: white; padding: 8px; transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
||
|
|
|
||
|
|
header.page-header .lang:hover { box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.5), 10px 10px 0 rgba(255, 255, 255, 0.4), 15px 15px 0 rgba(255, 255, 255, 0.3); transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
||
|
|
|
||
|
|
@media (max-width: 1025px) { header.page-header .lang { top: 16px; right: 16px; font-size: 0.8em; } }
|
||
|
|
|
||
|
|
footer.page-footer { padding-top: 16px; padding-bottom: 32px; }
|
||
|
|
|
||
|
|
footer.page-footer a.social-link { padding: 16px; background-color: #fff; margin-right: 16px; fill: #1d2022; display: inline-flex; justify-content: center; align-items: center; transition: all 0.3s ease-in-out; }
|
||
|
|
|
||
|
|
footer.page-footer a.social-link svg { transition: all 0.3s ease-in-out; }
|
||
|
|
|
||
|
|
footer.page-footer a.social-link:hover svg { fill: #037fe4; }
|
||
|
|
|
||
|
|
/*# sourceMappingURL=index.css.map */
|