401 lines
6.4 KiB
SCSS
401 lines
6.4 KiB
SCSS
@use "community";
|
|
|
|
main {
|
|
margin-top: 7rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-x: clip;
|
|
background-color: var(--c-bkg);
|
|
}
|
|
|
|
#menu {
|
|
box-shadow: inset 0 -5rem 5rem -2rem var(--c-shadow-2);
|
|
}
|
|
|
|
.header__logo {
|
|
opacity: 1 !important;
|
|
filter: blur(0px) !important;
|
|
}
|
|
|
|
section {
|
|
--width: 42ch;
|
|
--width-full: calc(100vw - (2 * var(--side-padding)));
|
|
--side-padding: 3rem;
|
|
font-family: "Montserrat";
|
|
font-weight: 300;
|
|
font-size: 1rem;
|
|
width: var(--width);
|
|
padding: 7rem var(--side-padding);
|
|
position: relative;
|
|
overflow: visible;
|
|
|
|
&.section--no-image {
|
|
h2 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
|
|
&:nth-of-type(2n + 3) {
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
|
|
width: 100vw;
|
|
background-color: var(--c-gray1);
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.section__image {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 2rem 0 4rem 0;
|
|
position: relative;
|
|
img {
|
|
width: 50%;
|
|
}
|
|
.img-shadow {
|
|
top: 3rem;
|
|
filter: blur(1rem) brightness(0);
|
|
}
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
//align-items: center;
|
|
//outline: 1px solid orange;
|
|
}
|
|
|
|
section#hero {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
gap: 5rem;
|
|
width: var(--width-full);
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
|
|
&::before {
|
|
content: none;
|
|
}
|
|
|
|
h1 {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1245px) {
|
|
section#hero {
|
|
flex-direction: column;
|
|
margin-bottom: 6rem;
|
|
}
|
|
}
|
|
|
|
section#virtues {
|
|
.section__image img {
|
|
width: 75%;
|
|
}
|
|
}
|
|
|
|
.section__double-image {
|
|
position: relative;
|
|
.section__image {
|
|
position: absolute;
|
|
top: -140%;
|
|
width: 100%;
|
|
}
|
|
.section__image--left {
|
|
left: -105%;
|
|
align-items: flex-end;
|
|
}
|
|
.section__image--right {
|
|
right: -105%;
|
|
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
#logo {
|
|
transform: translateY(-5rem);
|
|
opacity: 0;
|
|
margin-bottom: -6rem;
|
|
h1 {
|
|
font-size: 5rem;
|
|
}
|
|
}
|
|
|
|
#hero-image img {
|
|
margin-top: 0;
|
|
width: 25rem;
|
|
}
|
|
|
|
.hero--about {
|
|
#hero-image img {
|
|
margin-top: 0;
|
|
width: 28rem;
|
|
}
|
|
#logo {
|
|
margin-bottom: 0;
|
|
h1 {
|
|
font-size: 4.2rem;
|
|
}
|
|
svg {
|
|
width: 33rem; // force width for firefox
|
|
}
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--f-hero);
|
|
font-size: 4.2rem;
|
|
width: 110%;
|
|
line-height: 1;
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--f-hero);
|
|
font-size: 3.7rem;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
section#blurb h2 {
|
|
font-size: 2.5rem;
|
|
color: var(--c-text-accent);
|
|
width: 110%;
|
|
line-height: 1;
|
|
text-align: left;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--f-hero);
|
|
font-size: 1.8rem;
|
|
width: 112%;
|
|
}
|
|
|
|
h4 {
|
|
font-weight: 800;
|
|
}
|
|
|
|
h3,
|
|
h4 {
|
|
color: var(--c-text-accent);
|
|
}
|
|
|
|
ul#sub-menu {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 33rem;
|
|
li a {
|
|
font-family: var(--f-hero);
|
|
font-size: 1.2rem;
|
|
color: var(--c-text-primary);
|
|
text-transform: uppercase;
|
|
font-weight: 900;
|
|
white-space: nowrap;
|
|
transition: var(--t-simple);
|
|
&:hover {
|
|
color: var(--c-text-accent);
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-family: "Montserrat";
|
|
font-weight: 300;
|
|
line-height: 1.9rem;
|
|
font-size: 1rem;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 2.5rem;
|
|
|
|
strong {
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
/* about */
|
|
|
|
section#origin {
|
|
.section__image img {
|
|
transform: rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
.members {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
.member {
|
|
display: flex;
|
|
gap: 1rem;
|
|
|
|
.member__avatar {
|
|
border-radius: 100%;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
box-shadow: var(--sh-2);
|
|
}
|
|
p {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
|
|
section#jobs {
|
|
p {
|
|
line-height: 1.4;
|
|
}
|
|
.job {
|
|
list-style: none;
|
|
}
|
|
ul,
|
|
ol {
|
|
display: block;
|
|
list-style: disc outside none;
|
|
margin: 1em 0;
|
|
padding: 0 0 0 2rem;
|
|
}
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
li {
|
|
display: list-item;
|
|
list-style: disc;
|
|
margin-bottom: 0.5rem;
|
|
&:last-child {
|
|
margin-bottom: 2rem;
|
|
}
|
|
}
|
|
ul ul,
|
|
ol ul {
|
|
list-style-type: circle;
|
|
margin-left: 15px;
|
|
}
|
|
ol ol,
|
|
ul ol {
|
|
list-style-type: lower-latin;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
// old news
|
|
section#news {
|
|
ul.news {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rem;
|
|
}
|
|
li a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
outline: 1px solid rgb(255 255 255 / 0%);
|
|
outline-offset: 0.5rem;
|
|
transition: var(--t-simple);
|
|
&:hover {
|
|
outline: 1px solid rgb(255 255 255 / 100%);
|
|
outline-offset: 2rem;
|
|
}
|
|
}
|
|
h3 {
|
|
text-transform: unset;
|
|
color: var(--c-text-primary);
|
|
}
|
|
.creator {
|
|
border-radius: 999px;
|
|
background-color: var(--c-text-accent);
|
|
color: var(--c-text-primary);
|
|
padding: 0.2em 0.5em;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
opacity: 0.6;
|
|
}
|
|
.twitter-text {
|
|
color: var(--c-text-primary);
|
|
font-size: 1.2rem;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
section#news {
|
|
width: var(--width-full);
|
|
|
|
ul.podcasts {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 4rem;
|
|
|
|
--width: clamp(min(400px, 90vw), 20rem, 1000px);
|
|
|
|
.podcast a {
|
|
width: var(--width);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
position: relative;
|
|
background: var(--c-glass);
|
|
.creator {
|
|
left: 1rem;
|
|
position: absolute;
|
|
top: -0.6rem;
|
|
opacity: 1;
|
|
}
|
|
img {
|
|
width: var(--width);
|
|
height: var(--width);
|
|
aspect-ratio: 1;
|
|
object-fit: contain;
|
|
background-color: var(--c-gray1);
|
|
}
|
|
h3,
|
|
p,
|
|
time {
|
|
width: var(--width);
|
|
padding: 0 2rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h3 {
|
|
font-size: max(28px, 1.6rem);
|
|
}
|
|
p {
|
|
color: var(--c-gray5);
|
|
margin-top: -1.5rem;
|
|
margin-bottom: 2rem;
|
|
line-height: 1.4;
|
|
font-size: max(14px, 0.8rem);
|
|
}
|
|
|
|
time {
|
|
margin-top: -1.5rem;
|
|
color: var(--c-text-accent);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section#contact {
|
|
gap: 3rem;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
.community__icons {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
}
|