interq.ens.fr/www/css/style.css

964 lines
No EOL
17 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*--------------------------------------------------------*/
/* FONTS
/*--------------------------------------------------------*/
/* fira-sans-regular - latin */
@font-face {
font-family: "Fira Sans";
font-style: normal;
font-weight: 400;
src: local("Fira Sans Regular"), local("FiraSans-Regular"),
url("../fonts/fira-sans-v10-latin-regular.woff2") format("woff2"),
url("../fonts/fira-sans-v10-latin-regular.woff") format("woff");
}
/* fira-sans-700 - latin */
@font-face {
font-family: "Fira Sans";
font-style: normal;
font-weight: 700;
src: local("Fira Sans Bold"), local("FiraSans-Bold"),
url("../fonts/fira-sans-v10-latin-700.woff2") format("woff2"),
url("../fonts/fira-sans-v10-latin-700.woff") format("woff");
}
/* fira-mono-regular - latin */
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 400;
src: local('Fira Mono Regular'), local('FiraMono-Regular'),
url('../fonts/fira-mono-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../fonts/fira-mono-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* permanent-marker-regular - latin */
@font-face {
font-family: "Permanent Marker";
font-style: normal;
font-weight: 400;
src: local("Permanent Marker Regular"), local("PermanentMarker-Regular"),
url("../fonts/permanent-marker-v9-latin-regular.woff2") format("woff2"),
url("../fonts/permanent-marker-v9-latin-regular.woff") format("woff");
}
/*--------------------------------------------------------*/
/* GENERAL RULES
/*--------------------------------------------------------*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
font-family: "Fira Sans", sans-serif;
font-weight: 400;
line-height: 180%;
color: #000000;
font-size: 18px;
}
body {
background-color: #fbfbfb;
}
a,
a:hover,
a:active,
a:visited {
color: #000000;
text-decoration: none;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 480px) {
html, body {
font-size: 12px;
line-height: 160%;
}
}
/*--------------------------------------------------------*/
/* HEADER
/*--------------------------------------------------------*/
#main-header {
position: relative;
height: 750px;
margin-bottom: 40px;
background-color: #fbfbfb;
background-image: url("../img/header/text_header.svg"), url("../img/header/fond.svg") ;
background-position: top center, top center;
background-size: cover;
background-repeat: no-repeat;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
#main-header {
height: 600px;
/* margin-bottom: 30px; */
}
}
@media only screen and (max-width: 1100px) {
#main-header {
height: 440px;
/* margin-bottom: 30px; */
}
}
@media only screen and (max-width: 880px) {
#main-header {
height: 400px;
/* margin-bottom: 20px; */
}
}
@media only screen and (max-width: 640px) {
#main-header {
height: 300px;
margin-bottom: 20px;
}
}
@media only screen and (max-width: 480px) {
#main-header {
height: 220px;
/* margin-bottom: 20px; */
}
}
@media only screen and (max-width: 320px) {
#main-header {
height: 120px;
/* margin-bottom: 15px; */
}
}
@media only screen and (max-width: 220px) {
#main-header {
height: 100px;
/* margin-bottom: 15px; */
}
}
/*--------------------------------------------------------*/
/* CONTENT
/*--------------------------------------------------------*/
section {
padding: 0 0 200px 0;
background-repeat: no-repeat;
background-position: bottom center;
text-align: justify;
}
section > * {
max-width: 960px;
margin-left: calc(50% - 480px);
padding-left: 60px;
padding-right: 60px;
}
section h2 {
margin-bottom: 25px;
padding: 40px 60px 30px 60px;
color: #000000;
font-family: "Permanent Marker";
font-size: 3.2rem;
text-align: center;
word-wrap: break-word;
hyphens: auto;
}
section:nth-child(2) {
background-color: #fbfbfb;
background-image: url(../img/theme/paint/paint-yellow.svg) , url(../img/theme/elements/chenille.svg);
background-repeat: no-repeat;
background-size:auto, 60%;
background-position: 0% 100%, 0% 0%;
}
section:nth-child(3) {
background-color: #fbfbfb;
background-image: url(../img/theme/paint/paint-orange.svg), url(../img/theme/elements/cocon.svg);
background-repeat: no-repeat;
background-size:auto, 60%;
background-position: 0% 100%, top right;
}
section:nth-child(4) {
background-color: #fbfbfb;
background-image: url(../img/theme/paint/paint-pink.svg), url(../img/theme/elements/cocon_sortie.svg);
background-repeat: no-repeat;
background-size:auto, 60%;
background-position: 0% 100%, center left;
}
section:nth-child(5) {
background-color: #fbfbfb;
background-image: url(../img/theme/paint/paint-magenta.svg);
background-repeat: no-repeat;
background-size: auto;
background-position:0% 100%;
}
section:nth-child(6) {
background-color: #fbfbfb;
background-image: url(../img/theme/paint/paint-violet.svg), url(../img/theme/elements/early_papillon.svg);
background-repeat: no-repeat;
background-size:auto, 60%;
background-position: 0% 100%, center right;
}
section:nth-child(7) {
background-color: #fbfbfb;
background-image: url(../img/theme/paint/paint-blue.svg), url(../img/theme/elements/papillon.svg);
background-repeat: no-repeat;
background-size:auto, 60%;
background-position: 0% 100%, center left;
}
section p {
padding-bottom: 20px;
font-size: 1.2rem;
}
section p.stand-out {
/* font-weight: 700; */
text-align: center;
}
section p a,
section p a:visited {
padding: 0px 2px;
color: #000000;
/* text-decoration: underline; */
border-bottom: 3px solid #000;
}
section p a:hover,
section p a:active {
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 880px) {
section > * {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
}
section > img {
padding: 0;
}
section h2 {
font-size: 2.6rem;
}
}
@media only screen and (max-width: 580px) {
section h2 {
padding: 40px 40px 30px 40px;
font-size: 2.4rem;
}
section > img {
padding: 0;
}
section {
background-image: none
}
}
@media only screen and (max-width: 380px) {
section > * {
padding-left: 20px;
padding-right: 20px;
}
section h2 {
padding: 40px 20px 30px 20px;
font-size: 2.4rem;
}
}
@media only screen and (max-width: 320px) {
section h2 {
padding: 30px 20px 20px 20px;
font-size: 2rem;
}
}
/*--------------------------------------------------------*/
/* BUTTONS
/*--------------------------------------------------------*/
.button {
display: block;
/* width: 80%; */
margin: 20px auto 0 auto;
padding: 15px 20px;
background-color: transparent;
border: 3px solid #000000;
color: #000000;
font-size: 1.4rem;
font-weight: 400;
text-transform: uppercase;
text-align: center;
}
.button:hover {
background-color: #000000;
color: #FFFFFF;
}
#instagram-button > span::before {
content: " ";
display: inline-block;
background-image: url("../img/icons/instagram.svg");
background-size: 32px 32px;
height: 32px;
width: 32px;
margin: 0 5px;
}
#instagram-button:hover > span::before {
background-image: url("../img/icons/instagram-white.svg");
background-color: #000000;
}
.button > span {
line-height: 32px;
vertical-align: middle;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 320px) {
.button {
width: 100%;
padding: 10px 15px;
font-size: 1.1rem;
line-height: 24px;
}
.button img {
height: 24px;
width: 24px;
}
}
/*--------------------------------------------------------*/
/* INTERQ 2016
/*--------------------------------------------------------*/
.interq2016 img {
text-align: center;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 880px) {
.interq2016 img {
width: 60%;
height: 60%;
}
}
/*--------------------------------------------------------*/
/* Cartes
/*--------------------------------------------------------*/
.cartes img {
text-align: center;
}
.plan img {
text-align: center;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 880px) {
.cartes img {
width: 80%;
height: 80%;
}
.plan img {
width: 80%;
height: 80%;
}
}
/*--------------------------------------------------------*/
/* TARIFS
/*--------------------------------------------------------*/
/* Styles pour la table tarifs */
.tarifs {
width: 100%;
max-width: 600px; /* Taille maximale de la table pour éviter le débordement */
margin: auto; /* Centre la table horizontalement */
}
/* Styles pour les éléments de la table */
.tarifs th,
.tarifs td {
padding: 8px;
}
/* Média query pour les écrans de petite taille */
@media screen and (max-width: 600px) {
/* Réduire la taille de la police pour la lisibilité sur de petits écrans */
.tarifs th,
.tarifs td {
font-size: 12px;
}
}
/*--------------------------------------------------------*/
/* LISTS
/*--------------------------------------------------------*/
#limited {
font-size: 1.2rem;
margin-left: 0;
padding-left: 60px;
}
#consentement {
font-size: 1.2rem;
margin-left: 0;
padding-left: 60px;
}
/* Média query pour les écrans de petite taille */
@media screen and (max-width: 1000px) {
.limited {
margin-left: 0;
padding-left: 20px;
}
.consentement {
margin-left: 0;
padding-left: 20px;
}
}
/*--------------------------------------------------------*/
/* CALENDARS
/*--------------------------------------------------------*/
.calendars {
max-width: 100%;
margin: 0;
padding: 0 0 20%;
overflow-x: scroll;
overflow-y: visible;
--calendar-hour-width: 60px;
--calendar-max-daily-hours: 19;
}
/* .calendar {
max-width: 100%;
margin: 0 20px;
padding: 0;
} */
.calendar {
width: calc(var(--calendar-hour-width) * var(--calendar-max-daily-hours));
margin: 0 auto;
overflow: visible;
}
.calendar h2 {
padding: 0;
margin: 2em 0 1em 0;
}
#cal-container-1 {
width: calc(var(--calendar-hour-width) * 9);
margin-left: calc(var(--calendar-hour-width) * 9);
}
#cal-container-2 {
width: calc(var(--calendar-hour-width) * 19);
}
#cal-container-3 {
width: calc(var(--calendar-hour-width) * 7);
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 1200px) {
.calendars {
width: max(
calc(var(--calendar-hour-width) * var(--calendar-max-daily-hours),
100vw)
);
padding: 0 40px 20%;
--calendar-hour-width: 40px;
}
}
@media only screen and (max-width: 880px) {
.calendar h2 {
text-align: left;
padding: 0 40px;
}
#cal-container-1 {
margin-left: 0;
}
}
@media only screen and (max-width: 640px) {
.cal-details-container {
position: relative;
width: 100%;
height: 100%;
}
.cal-container .cal-event-details {
min-width: 90% !important;
left: 5vw !important;
}
}
@media only screen and (max-width: 380px) {
.calendar h2 {
padding: 0 20px;
}
}
/*--------------------------------------------------------*/
/* LOCATION
/*--------------------------------------------------------*/
#mailing-address {
margin: 0 0 20px 0;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
line-height: 32px;
vertical-align: middle;
}
#mailing-address > span::before {
content: " ";
display: inline-block;
background-image: url("../img/icons/location.svg");
background-size: 32px 32px;
height: 32px;
width: 32px;
margin: 0 5px;
}
#interactive-map {
width: 100%;
margin: 20px 0;
border: none;
border-radius: 10px;
}
#public-transport-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
margin-left: calc(50% - 480px - 50px);
font-size: 1.5rem;
line-height: 48px;
vertical-align: middle;
white-space: nowrap;
}
#public-transport-info > * {
margin: 5px;
justify-self: left;
}
#public-transport-info img {
width: 48px;
height: 48px;
margin: 0 5px 0 0;
vertical-align: bottom;
}
#transport-metro-icon,
#transport-metro-stop,
#transport-bus-1-icon,
#transport-bus-1-stop {
grid-row: 1;
}
#transport-rer-icon,
#transport-rer-stop,
#transport-bus-2-icon,
#transport-bus-2-stop {
grid-row: 2;
}
#transport-noctilien-icon,
#transport-noctilien-stop {
grid-row: 3;
}
#transport-metro-icon,
#transport-rer-icon {
grid-column: 1;
justify-self: end;
}
#transport-metro-stop,
#transport-rer-stop {
grid-column: 2;
}
#transport-bus-1-icon,
#transport-bus-2-icon,
#transport-noctilien-icon {
grid-column: 3;
justify-self: end;
}
#transport-bus-1-stop,
#transport-bus-2-stop,
#transport-noctilien-stop {
grid-column: 4;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 880px) {
#public-transport-info {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto auto auto;
align-items: center;
margin: 0;
line-height: 48px;
}
#transport-metro-icon,
#transport-metro-stop {
grid-row: 1;
}
#transport-rer-icon,
#transport-rer-stop {
grid-row: 2;
}
#transport-bus-1-icon,
#transport-bus-1-stop {
grid-row: 3;
}
#transport-bus-2-icon,
#transport-bus-2-stop {
grid-row: 4;
}
#transport-noctilien-icon,
#transport-noctilien-stop {
grid-row: 5;
}
#transport-metro-icon,
#transport-rer-icon,
#transport-bus-1-icon,
#transport-bus-2-icon,
#transport-noctilien-icon {
grid-column: 1;
justify-self: end;
}
#transport-metro-stop,
#transport-rer-stop,
#transport-bus-1-stop,
#transport-bus-2-stop,
#transport-noctilien-stop {
grid-column: 2;
}
}
@media only screen and (max-width: 580px) {
#mailing-address {
font-size: 1.2rem;
}
#public-transport-info {
grid-template-columns: 4fr 6fr;
line-height: 32px;
font-size: 1.1rem;
}
#public-transport-info img {
width: 32px;
height: 32px;
}
}
@media only screen and (max-width: 380px) {
#public-transport-info {
row-gap: 16px;
}
#public-transport-info img {
display: block;
}
}
/*--------------------------------------------------------*/
/* SPONSORS
/*--------------------------------------------------------*/
#sponsors {
text-align: center;
}
#sponsors img {
height: 100px;
object-fit: cover;
margin: 20px;
}
#sponsors img.sponsor-disc {
height: 155px;
border-radius: 78px;
transition: 100ms ease-in;
}
#sponsors img.sponsor-disc:hover {
border: 5px solid #849697ff
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 480px) {
#sponsors img {
height: 60px;
margin: 5px;
}
#sponsors img.sponsor-disc {
height: 80px;
}
}
/*--------------------------------------------------------*/
/* Telephone safeness
/*--------------------------------------------------------*/
#Ulm > span::before {
content: " ";
display: inline-block;
background-image: url("../img/icons/tel.svg");
background-size: 32px 32px;
height: 32px;
width: 32px;
margin: 0 5px;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 480px) {
#contact-email {
font-size: 1.2rem;
}
#contact-email > span::before {
content: "";
height: 0;
width: 0;
background: none;
}
}
/*--------------------------------------------------------*/
/* CONTACT
/*--------------------------------------------------------*/
#contact-email {
font-family: "Fira Mono";
font-size: 1.5rem;
text-align: center;
word-wrap: break-word;
}
#contact-email > span::before {
content: " ";
display: inline-block;
background-image: url("../img/icons/email.svg");
background-size: 32px 32px;
height: 32px;
width: 32px;
margin: 0 5px;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 480px) {
#contact-email {
font-size: 1.2rem;
}
#contact-email > span::before {
content: "";
height: 0;
width: 0;
background: none;
}
}
/*--------------------------------------------------------*/
/* EQUIPE INTERQ
/*--------------------------------------------------------*/
#team h3 {
margin: 0 0 10px 0;
font-weight: bold;
text-align: center;
}
.team-group {
display: flex;
justify-content: center;
margin: 20px 0;
}
.team-group figure {
margin: 0 20px;
}
.team-group figure img {
width: 190px;
}
.team-group figcaption {
text-align: center;
}
/*--------------------------------------------------------*/
@media only screen and (max-width: 880px) {
.team-group {
flex-direction: column;
}
.team-group figure {
text-align: center;
}
}
@media only screen and (max-width: 320px) {
.team-group figure img {
width: 80%;
height: 80%;
}
}
/*--------------------------------------------------------*/
/* SIGNATURE
/*--------------------------------------------------------*/
#signature {
text-align: right;
}
/* Tableau */
td, th {
border: 1px solid #333;
padding: 15px;
}
table {
border-collapse: collapse;
margin: auto;
}