mirror of
https://git.bolliret.ch/pcs/pcs-website
synced 2026-01-18 15:01:37 +01:00
409 lines
No EOL
9.2 KiB
CSS
409 lines
No EOL
9.2 KiB
CSS
|
|
@font-face {
|
|
font-family: "Roboto-Black";
|
|
src: url(/static/webfonts/Roboto-Black.woff2)format("woff2"),url(/static/webfonts/Roboto-Black.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto-BlackItalic";
|
|
src: url(/static/webfonts/Roboto-BlackItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-BlackItalic.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto-Bold";
|
|
src: url(/static/webfonts/Roboto-Bold.woff2)format("woff2"),url(/static/webfonts/Roboto-Bold.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto-BoldItalic";
|
|
src: url(/static/webfonts/Roboto-BoldItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-BoldItalic.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-Italic";
|
|
src:url(/static/webfonts/Roboto-Italic.woff2)format("woff2"),url(/static/webfonts/Roboto-Italic.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-Light";
|
|
src:url(/static/webfonts/Roboto-Light.woff2)format("woff2"),url(/static/webfonts/Roboto-Light.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-LightItalic";
|
|
src:url(/static/webfonts/Roboto-LightItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-LightItalic.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-Medium";
|
|
src:url(/static/webfonts/Roboto-Medium.woff2)format("woff2"),url(/static/webfonts/Roboto-Medium.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-MediumItalic";
|
|
src:url(/static/webfonts/Roboto-MediumItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-MediumItalic.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto-Regular";
|
|
src: url(/static/webfonts/Roboto-Regular.woff2)format("woff2"),url(/static/webfonts/Roboto-Regular.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-Thin";
|
|
src:url(/static/webfonts/Roboto-Thin.woff2)format("woff2"),url(/static/webfonts/Roboto-Thin.woff)format("woff")
|
|
}
|
|
|
|
@font-face {
|
|
font-family:"Roboto-ThinItalic";
|
|
src:url(/static/webfonts/Roboto-ThinItalic.woff2)format("woff2"),url(/static/webfonts/Roboto-ThinItalic.woff)format("woff")
|
|
}
|
|
|
|
html{
|
|
margin: 0px;
|
|
}
|
|
|
|
body {
|
|
font-family: "Roboto-Regular","Arial",sans-serif;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
background: #f4f4f4;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-image: linear-gradient(to bottom, rgba(0.13, 0.13, 0.13, 0.80), rgba(0.13, 0.13, .13, 0.00)), url(/images/header-bg.jpg);
|
|
background-blend-mode: multiply;
|
|
background-size: 100%;
|
|
background-position: 0 47%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
nav{
|
|
padding: 12px 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.left_header{
|
|
font-family: "Roboto-Black","Arial Bold",sans-serif;
|
|
font-size: 24px;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0 0 28px;
|
|
}
|
|
|
|
.left_header ul.nav{
|
|
padding: 0;
|
|
}
|
|
|
|
.left_header a{
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.left_header img.header-logo{
|
|
width: 43px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.right_header{
|
|
font-family: "Roboto-Medium","Arial",sans-serif;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.left_header .nav, .right_header .nav {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-nav{
|
|
color: #f00;
|
|
}
|
|
|
|
.right_header .nav li {
|
|
margin: 0 20px;
|
|
}
|
|
|
|
nav input[type='checkbox'], nav label {
|
|
display: none;
|
|
}
|
|
|
|
.right_header a{
|
|
color: #fff;
|
|
}
|
|
|
|
header .button a {
|
|
padding: 0.5rem 1rem;
|
|
background-color: #2563eb;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
div.page{
|
|
position: relative;
|
|
top: 150px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 1100px;
|
|
max-width:100%;
|
|
background: #fff;
|
|
text-align: center;
|
|
color: #2563eb;
|
|
padding: 0;
|
|
font-family: "Roboto-Thin","Arial",sans-serif;
|
|
font-size:36px;
|
|
line-height: 1em;
|
|
margin: -230px 0 0 0;
|
|
}
|
|
|
|
div.page h2 {
|
|
font-family: "Roboto-Black","Arial Bold",sans-serif;
|
|
font-size:60px;
|
|
margin: 30px 0 0 0;
|
|
padding: 22px 0 0 0;
|
|
font-weight: normal;
|
|
line-height: 50px;
|
|
}
|
|
|
|
div.page h3 {
|
|
font-family: "Roboto-Thin","Arial",sans-serif;
|
|
font-size:60px;
|
|
margin: 0px;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
line-height: 30px;
|
|
|
|
}
|
|
|
|
div.page strong {
|
|
font-family: "Roboto-Regular","Arial",sans-serif;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
div.page div.threecolumn{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30px 50px;
|
|
|
|
}
|
|
|
|
div.page div.threecolumn div{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 300px;
|
|
line-height: 50px;
|
|
font-size:30px;
|
|
}
|
|
|
|
div.inner_footer{
|
|
z-index: -1;
|
|
position: relative;
|
|
top: 150px;
|
|
left: 0;
|
|
height: 200px;
|
|
width: 100%;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
font-family: "Roboto-Thin","Arial",sans-serif;
|
|
font-size:18px;
|
|
line-height: 27px;
|
|
margin: -50px 0 0 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
}
|
|
|
|
div.inner_footer a{
|
|
color: #fff;
|
|
}
|
|
|
|
div.left_footer, div.middle_footer, div.right_footer {
|
|
display: flex;
|
|
align-items: end;
|
|
padding: 28px;
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1100px) {
|
|
header {
|
|
height: calc(200vw /1100*100);
|
|
}
|
|
/* header > div.inner_header{
|
|
padding: calc(12vw /1100*100) calc(28vw /1100*100);
|
|
}*/
|
|
header .left_header{
|
|
font-size: calc(24vw /1100*100);
|
|
}
|
|
header .left_header img.header-logo{
|
|
width: calc(43vw /1100*100);
|
|
margin-right: calc(12vw /1100*100);
|
|
}
|
|
header .right_header{
|
|
font-size: calc(18vw /1100*100);
|
|
}
|
|
header .right_header .nav {
|
|
padding: 0 calc(20vw /1100*100);
|
|
}
|
|
header .right_header .nav li {
|
|
margin: 0 calc(20vw /1100*100);
|
|
}
|
|
div.page{
|
|
top: calc(150vw /1100*100);
|
|
width: calc(1100vw /1100*100); /* That's actually 100% I know */
|
|
font-size:calc(36vw /1100*100);
|
|
margin: calc(-230vw /1100*100) 0 0 0;
|
|
}
|
|
div.page h2 {
|
|
font-size:calc(60vw /1100*100);
|
|
margin: calc(30vw /1100*100) 0 0 0;
|
|
padding: calc(22vw /1100*100) 0 0 0;
|
|
line-height: calc(50vw /1100*100);
|
|
width: 100%;
|
|
}
|
|
div.page h3 {
|
|
font-size:calc(60vw /1100*100);
|
|
line-height: calc(30vw /1100*100);
|
|
}
|
|
div.page div.threecolumn{
|
|
padding: calc(30vw /1100*100) calc(50vw /1100*100);
|
|
|
|
}
|
|
div.page div.threecolumn div{
|
|
width: calc(300vw /1100*100);
|
|
line-height: calc(50vw /1100*100);
|
|
font-size: calc(30vw /1100*100);
|
|
}
|
|
div.page div.threecolumn img{
|
|
width: calc(300vw /1100*100);
|
|
}
|
|
div.inner_footer{
|
|
top: calc(150vw /1100*100);
|
|
height: calc(200vw /1100*100);
|
|
font-size: calc(18vw /1100*100);
|
|
line-height: calc(27vw /1100*100);
|
|
margin: calc(-50vw /1100*100)px 0 0 0;
|
|
}
|
|
div.left_footer, div.middle_footer, div.right_footer {
|
|
padding: calc(28vw /1100*100);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
header {
|
|
height: auto;
|
|
}
|
|
header .left_header{
|
|
font-size: calc(24px * 0.7);
|
|
}
|
|
header .left_header img.header-logo{
|
|
width: calc(43px * 0.7);
|
|
margin-right: calc(12px * 0.7);
|
|
}
|
|
header .right_header{
|
|
font-size: 18px;
|
|
}
|
|
header .right_header .nav {
|
|
padding: 0 calc(20px * 0.7);
|
|
}
|
|
header .right_header .nav li {
|
|
margin: 0 calc(20px * 0.7);
|
|
}
|
|
div.page{
|
|
top: 0;
|
|
width: 100%;
|
|
font-size:calc(36px * 0.7);
|
|
margin: 0;
|
|
}
|
|
div.page h2 {
|
|
font-size:calc(60px * 0.7);
|
|
margin: 0;
|
|
padding: calc(22px * 0.7) 0 0 0;
|
|
line-height: calc(50px * 0.7);
|
|
}
|
|
div.page h3 {
|
|
font-size:calc(60px * 0.7);
|
|
line-height: calc(30px * 0.7);
|
|
}
|
|
div.page div.threecolumn{
|
|
padding: calc(30px * 0.7) calc(50px * 0.7);
|
|
|
|
}
|
|
div.page div.threecolumn div{
|
|
width: 300px;
|
|
line-height: calc(50px * 0.7);
|
|
font-size: calc(30px * 0.7);
|
|
}
|
|
div.page div.threecolumn img{
|
|
width: 300px;
|
|
}
|
|
div.inner_footer{
|
|
top: calc(150px * 0.7);
|
|
height: auto;
|
|
font-size: calc(18px * 0.7);
|
|
line-height: calc(27px * 0.7);
|
|
margin: 0;
|
|
}
|
|
div.left_footer, div.middle_footer, div.right_footer {
|
|
padding: calc(28px * 0.7);
|
|
}
|
|
|
|
|
|
nav {
|
|
justify-content: start;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
align-items: start;
|
|
}
|
|
.left_header .nav, .right_header .nav, nav ul {
|
|
display: block;
|
|
}
|
|
nav ul:last-child {
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
}
|
|
nav ul li {
|
|
margin-bottom: 0;
|
|
width: 100%;
|
|
text-align: right;
|
|
padding: 0em;
|
|
}
|
|
nav .left_header ul li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
nav .right_header ul li {
|
|
padding: 0.5em;
|
|
}
|
|
nav label {
|
|
text-align: right;
|
|
display: block;
|
|
padding: 0.5em;
|
|
font-size: 20px;
|
|
align-self: self-start;
|
|
}
|
|
input[type='checkbox']:not(:checked)+ul {
|
|
display: none;
|
|
}
|
|
.threecolumn{
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
}
|
|
} |