/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-regular-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/archivo-regular-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Major Mono Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/major-mono-display-v13-latin-regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@tailwind components;
@layer components {
body, p, div {
@apply text-[#909090] leading-8;
}
h1, h2, h3, h4 {
font-family: "Major Mono Display";
@apply lowercase text-white;
}
h1 {
@apply text-2xl mb-8;
}
.middle-pane-medium {
@apply max-w-7xl mx-auto px-6 xl:px-0;
}
.middle-pane-big {
@apply max-w-screen-2xl mx-auto px-6 2xl:px-0;
}
#no-intro {
background-color: #0f0f0f
}
#intro {
background-image: url(/hp-bg.webp);
background-repeat: repeat;
background-color: #0f0f0f;
background-position: center;
}
a.button {
@apply cursor-pointer;
}
a.button button {
@apply bg-white px-4 py-2 uppercase text-black border text-sm hover:text-white hover:bg-black hover:border;
}
a.button.inverted button {
@apply bg-black px-4 py-2 uppercase text-white border text-sm hover:text-black hover:bg-white hover:border;
}
a.button button::after {
margin-left: 0.75em;
content: "→";
}
.basegrid-entry {
@apply opacity-80 hover:opacity-100 cursor-pointer flex items-end;
}
.basegrid-entry .title {
@apply p-6 bg-black/80 w-full font-semibold;
}
.basegrid-entry .title a {
@apply text-white text-lg;
}
.basegrid-entry:hover .title a {
@apply underline;
}
.basegrid-entry .date {
@apply block text-sm;
}
.w3pn-topics > div {
@apply mb-3;
}
.w3pn-topics > div::before {
padding-right: 1em;
vertical-align: 3px;
content: url('data:image/svg+xml,')
}
.w3pn-hp-grid .bg-events {
background-image: url(/hp-box-events.svg);
background-position: center;
background-size: cover;
}
.w3pn-hp-grid .bg-talks {
background-image: url(/hp-box-talks.png);
background-position: center;
background-size: cover;
}
.w3pn-hp-grid .bg-projects {
background-image: url(/hp-box-projects.png);
background-position: center;
background-size: cover;
}
.w3pn-hp-grid .numbers {
@apply flex gap-2 m-4 items-end;
}
.w3pn-hp-grid .numbers > div {
@apply bg-white px-3 py-2;
}
.w3pn-hp-grid .numbers .big {
@apply text-2xl font-bold;
}
.w3pn-hp-grid .numbers .semibig {
@apply text-lg font-bold;
}
.w3pn-hp-grid .numbers > div > div {
@apply text-black text-sm;
}
.w3pn-hp-grid .title {
@apply text-white uppercase my-3 mx-4;
}
.w3pn-hp-grid > div {
@apply aspect-video bg-[#0f0f0f] grid grid-rows-2 hover:bg-[#202020] cursor-pointer;
}
.w3pn-project-item {
@apply w-full border border-[#202020] mb-3;
}
.w3pn-project-item a:hover {
@apply bg-[#0f0f0f]/30;
}
.w3pn-event-item {
@apply w-full border border-[#202020] mb-3;
}
.w3pn-event-item .header-base:hover {
@apply bg-[#0f0f0f]/30;
}
/*.w3pn-event-item .event-header {
@apply ;
}*/
.w3pn-event-item .detail {
@apply bg-[#0f0f0f] px-4 py-3;
}
.w3pn-wgrid {
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2;
}
.w3pn-wgrid > a {
@apply bg-[#101010] block text-center text-sm pb-6 pt-10 hover:bg-[#2C2C2C] cursor-pointer;
}
.w3pn-wgrid > a > span {
@apply block;
}
.w3pn-wgrid .title {
@apply text-white text-xl mb-1;
}
.w3pn-wgrid .icon {
@apply mb-4;
}
.icon {
@apply inline-block w-12 h-12;
}
.icon.xsmall {
@apply w-5 h-5;
}
.icon.small {
@apply w-6 h-6;
}
.icon.twitter {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.github {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.forum {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.matrix {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.mirror {
filter: grayscale(1);
background-image: url('data:image/svg+xml,');;
background-size: 100% 100%;
}
.icon.docs {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.youtube {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.telegram {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.icon.telegram {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
}
.external::after {
padding-left: 10px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' aria-hidden='true' viewBox='0 0 24 24' class='iconExternalLink_nPIU'%3E%3Cpath fill='gray' d='M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z'%3E%3C/path%3E%3C/svg%3E");
}
#footerMenu .menuItem:hover .icon {
@apply opacity-100;
}
.hamburger {
width: 24px;
height: 24px;
background-image: url('data:image/svg+xml,');
}
}
.nav-links {
width: 100%;
top: 5rem;
left: 48px;
display: none;
margin: 0;
}
.nav-links a {
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
}
.nav-links a:hover, .nav-links a:focus {
background-color: white;
text-color: black;
}
.expanded {
display: unset;
}
.w3pn-logo {
background-image: url('data:image/svg+xml,');
background-size: 100% 100%;
aspect-ratio: 160/48;
}