start9-landing/src/assets/styles/peripheral.scss

97 lines
1.7 KiB
SCSS
Raw Normal View History

main{
margin-top: 10rem;
display: flex;
flex-direction: column;
align-items: center;
}
section{
--width: 42ch;
--side-padding: 3rem;
font-family: "Montserrat";
font-weight: 300;
font-size: 1rem;
width: var(--width);
padding: 10rem var(--side-padding);
position: relative;
overflow:visible;
&:nth-of-type(even){
&::before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * ((100vw - var(--width)) / 2) + var(--side-padding));
width: 100vw;
background-color: #212121;
z-index: -1;
}
}
}
h1 {
font-family: var(--f-hero);
font-size: 4.4rem;
width: 110%;
line-height: 1;
}
h2 {
font-family: var(--f-hero);
font-size: 3.7rem;
text-align: center;
}
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: 107%;
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;
}
}