Newer
Older
body ul {
margin: 0;
padding: 0;
list-style-type: none;
}
text-decoration: none;
}
body a:hover {
body .grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
body .bg-blue {
background-color: #4baabb;
main {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
main .warning-banner {
background: url("/assets/images/wallpaper_warning.svg");
width: 100%;
height: 40px;
padding: 20px 10%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main .warning-banner strong {
font-size: 18px;
color: #1c3db2;
}
main .image-carousel {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background-color: black;
position: relative;
}
main .image-carousel img {
position: absolute;
max-width: 100%;
max-height: 400px;
}
main .image-carousel .carousel-bullets {
position: absolute;
bottom: 0;
padding: 20px;
display: flex;
gap: 10px;
}
main .image-carousel .carousel-bullets .bullet {
cursor: pointer;
width: 8px;
height: 8px;
background-color: #6b7880;
border-radius: 100%;
box-shadow: 0 0 3px black;
}
main .image-carousel .carousel-bullets .bullet.active {
background-color: #d4d9dd;
}
@media screen and (max-width: 900px) {
main .image-carousel img {
max-height: 100%;
}
main .image-carousel .carousel-bullets {
gap: 15px;
}
main .image-carousel .carousel-bullets .bullet {
width: 12px;
height: 12px;
}
}
main header nav {
display: flex;
align-items: center;
}
main header nav .home {
margin: 0 10px;
}
main header nav .home a {
display: flex;
align-items: center;
gap: 10px;
}
main header nav .home a img {
height: 40px;
width: auto;
}
main header nav .home a img.logo-text {
width: 120px;
height: auto;
main header nav ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
main header nav ul li:hover .submenu {
visibility: unset;
max-height: 1000px;
}
main header nav .burger {
display: none;
}
@media screen and (max-width: 560px) {
main header nav {
justify-content: space-between;
}
main header nav .burger {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
font-weight: bold;
border: 1px solid;
margin: 0 20px;
cursor: pointer;
border-radius: 100%;
}
main header nav ul {
display: none;
}
main header nav ul.responsive-show {
display: flex;
position: absolute;
right: 0;
max-width: 100vw;
min-width: 50vw;
background-color: white;
box-shadow: 0 4px 6px 2px #0000000a;
}
main header nav ul.responsive-show li.active a {
border: none;
}
main header nav ul.responsive-show li .submenu {
display: flex;
visibility: visible;
position: relative;
height: unset;
max-height: unset;
transition: max-height 0.6s;
top: unset;
left: unset;
margin-left: 20px;
}
main header nav ul.responsive-show li .submenu li a {
font-weight: 400;
color: #96a5ae;
}
}
main #page-container .page-header {
background-image: url("/assets/images/wallpaper_binary.png");
main #page-container .page-header .big-logo {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 20px;
padding: 20px;
}
main #page-container .page-header .big-logo img {
width: 200px;
max-width: 100%;
}
main #page-container .page-header .big-logo img.logo-text {
width: 300px;
max-width: 100%;
}
main #page-container .page-header .logo {
padding-left: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container .page-header .logo img {
@media screen and (max-width: 560px) {
main #page-container .page-header h1 {
padding: 15px 20px 0;
}
main #page-container .page-header p {
main #page-container .page-header .big-logo {
flex-direction: column;
}
}
main #page-container .page-header.logo-left .grid-wrapper {
display: grid;
main #page-container .page-header.logo-left .grid-wrapper h1 {
width: 100%;
}
main #page-container .page-header.logo-left .grid-wrapper .logo {
grid-column: 1;
main #page-container .page-header.logo-left .grid-wrapper p {
margin: 0;
main #page-container .page-header.logo-left .grid-wrapper h1 {
padding: 0 20px;
}
main #page-container .page-header.logo-left .grid-wrapper .logo {
padding: 0 20px;
}
}
main #page-container .page-philo {
background-image: url("/assets/images/wallpaper_binary.png");
padding: 120px 30px;
margin: 40px 0;
}
main #page-container .page-philo p {
width: 100%;
max-width: 600px;
font-size: 18px;
text-align: center;
font-style: italic;
font-weight: bold;
}
main #page-container .page-philo p * {
}
main #page-container .page-contents-center {
width: 1300px;
max-width: 100%;
@media screen and (max-width: 1300px) {
main #page-container .page-contents-center {
padding: 20px 20px 0;
}
}
main #page-container h2.page-section-title {
color: #4baabb;
padding: 20px 0 10px;
width: 1300px;
max-width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 1300px) {
main #page-container h2.page-section-title {
padding: 20px 20px 0;
}
}
main #page-container #home-page {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 60px;
}
main #page-container #home-page .section-title {
padding: 10px;
margin: 0;
}
main #page-container #home-page .articles-displayer {
margin: 0 auto 40px;
}
main #page-container #home-page .articles-displayer .prev-next-buttons {
display: flex;
justify-content: space-between;
}
main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn,
main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn {
background: none;
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0;
main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.disabled,
main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.disabled {
visibility: hidden;
main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.active,
main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.active {
main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.active:hover,
main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.active:hover {
color: #3c4144;
main #page-container #home-page .articles-displayer .prev-next-buttons .next-btn.active::after {
border-width: 2px 2px 0 0;
width: 8px;
height: 8px;
transform: rotate(45deg);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container #home-page .articles-displayer .prev-next-buttons .prev-btn.active::before {
border-width: 2px 2px 0 0;
width: 8px;
height: 8px;
transform: rotate(-135deg);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
main #page-container #home-page .articles-displayer article {
display: grid;
gap: 5px 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto 1fr;
position: relative;
padding-left: 20px;
background-color: #3c4144;
}
main #page-container #home-page .articles-displayer article *:not(a) {
color: #d4d9dd;
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
}
main #page-container #home-page .articles-displayer article .date {
grid-column: 1;
grid-row: 1;
text-align: right;
}
main #page-container #home-page .articles-displayer article .date span {
color: #6b7880;
font-style: italic;
font-size: 12px;
}
main #page-container #home-page .articles-displayer article .title {
grid-column: 1;
grid-row: 2;
}
main #page-container #home-page .articles-displayer article .title h3 {
margin: 0 0 10px;
}
main #page-container #home-page .articles-displayer article .subtitle {
grid-column: 1;
grid-row: 3;
font-style: italic;
font-size: 15px;
}
main #page-container #home-page .articles-displayer article .body {
grid-column: 1;
grid-row: 4;
}
main #page-container #home-page .articles-displayer article .image-carousel {
grid-row: 1/span 4;
grid-column: 2;
}
main #page-container #home-page .articles-displayer article .image-carousel img {
max-height: 100%;
}
main #page-container #home-page .articles-displayer article.article-placeholder {
}
main #page-container #home-page .articles-displayer article.article-placeholder * {
background-color: #d4d9dd;
}
main #page-container #home-page .articles-displayer article.article-placeholder .date {
height: 10px;
}
main #page-container #home-page .articles-displayer article.article-placeholder .title {
height: 40px;
}
main #page-container #home-page .articles-displayer article.article-placeholder .subtitle {
height: 30px;
}
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
@media screen and (max-width: 900px) {
main #page-container #home-page .articles-displayer article {
gap: 5px;
grid-template-columns: 1fr;
grid-template-rows: 300px auto auto auto 1fr;
padding: 0;
}
main #page-container #home-page .articles-displayer article .date {
grid-row: 2;
padding: 0 10px;
}
main #page-container #home-page .articles-displayer article .title {
grid-row: 3;
padding: 0 10px;
}
main #page-container #home-page .articles-displayer article .subtitle {
grid-row: 4;
padding: 0 10px;
}
main #page-container #home-page .articles-displayer article .body {
grid-row: 5;
padding: 0 10px 30px;
}
main #page-container #home-page .articles-displayer article .image-carousel {
grid-row: 1;
grid-column: 1;
}
}
main #page-container #home-page .grid-3 {
gap: 30px;
}
main #page-container #home-page .grid-3 .theme-card {
display: flex;
flex-direction: column;
width: 100%;
cursor: pointer;
transition: transform 0.3s;
}
main #page-container #home-page .grid-3 .theme-card .card-img {
width: 100%;
height: 240px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
position: relative;
}
main #page-container #home-page .grid-3 .theme-card .card-img img {
position: absolute;
}
main #page-container #home-page .grid-3 .theme-card .card-title h2 {
margin: 0;
text-align: center;
padding: 10px 20px;
color: #4baabb;
}
main #page-container #home-page .grid-3 .theme-card .card-description {
background-image: url("/assets/images/wallpaper_binary.png");
flex: 1;
}
main #page-container #home-page .grid-3 .theme-card .card-description p {
margin: 0;
color: #72e3f0;
text-align: center;
}
main #page-container #home-page .grid-3 .theme-card:hover {
transform: scale(1.03);
}
@media screen and (max-width: 900px) {
main #page-container #home-page .grid-3 {
grid-template-columns: 1fr;
gap: 40px;
}
main #page-container #home-page .grid-3 .theme-card {
transition: transform 0.3s;
}
main #page-container #home-page .grid-3 .theme-card .card-img {
height: 300px;
}
main #page-container #home-page .grid-3 .theme-card .card-img img {
min-width: unset;
height: 100%;
}
main #page-container #home-page .grid-3 .theme-card .card-title h2 {
padding: 5px 20px;
}
main #page-container #home-page .grid-3 .theme-card .card-description {
background-image: url("/assets/images/wallpaper_binary.png");
flex: 1;
}
main #page-container #home-page .grid-3 .theme-card .card-description p {
margin: 0;
color: #72e3f0;
text-align: center;
}
main #page-container #home-page .grid-3 .theme-card:hover {
transform: none;
}
}
@media screen and (max-width: 1300px) {
main #page-container #home-page .articles-displayer,
main #page-container #home-page .grid-3 {
padding: 0 20px;
}
main #page-container #home-page .section-title {
margin: 0 20px;
}
}
main #page-container #education-page h3.big {
font-size: 30px;
}
main #page-container #education-page .title-banner {
display: flex;
justify-content: flex-end;
flex-direction: column;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
main #page-container #education-page .title-banner.game-banner {
background-image: url("/assets/images/game_studio_banner.png");
}
main #page-container #education-page .title-banner.popu-banner {
background-image: url("/assets/images/popularization_banner.png");
main #page-container #education-page .title-banner h2 {
color: white;
font-size: 2.5em;
margin: 40px;
}
main #page-container #education-page .section-contents {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2;
}
main #page-container #education-page .section-contents .practical-infos {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
}
main #page-container #education-page .section-contents .practical-infos .info-item {
display: flex;
flex-direction: column;
background-color: white;
padding: 20px;
}
main #page-container #education-page .section-contents .practical-infos .info-item strong {
margin-bottom: 10px;
}
main #page-container #education-page .section-contents .practical-infos .info-item span,
main #page-container #education-page .section-contents .practical-infos .info-item a {
font-size: 14px;
}
main #page-container #education-page .section-contents .list-wrapper {
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
display: flex;
flex-direction: column;
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .title {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img {
width: 100%;
height: auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
width: 300px;
height: auto;
max-height: 0;
visibility: hidden;
z-index: 1;
transition: max-height 0.6s;
padding: 20px;
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment * {
color: #6b7880;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul li {
color: #6b7880;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme:hover .details {
max-height: 1000px;
visibility: visible;
}
main #page-container #education-page .section-contents .infos-inscriptions {
display: flex;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
main #page-container #education-page .section-contents .infos-inscriptions .pricing {
padding: 20px;
display: flex;
flex-direction: column;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
border: 1px solid #dde;
border-collapse: collapse;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
border: 1px solid #dde;
padding: 10px 20px;
main #page-container #education-page .section-contents .infos-inscriptions .groups .download-link,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .download-link {
border: 1px solid;
padding: 10px;
display: inline-block;
margin: 10px 0 0;
}
@media screen and (max-width: 900px) {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
width: 100%;
margin-bottom: 20px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
background-color: #fff9;
position: relative;
top: unset;
width: 100%;
left: unset;
max-height: unset;
visibility: visible;
padding: 10px;
box-shadow: none;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
}
main #page-container #education-page .section-contents .infos-inscriptions {
flex-direction: column;
}
}
@media screen and (max-width: 560px) {
main #page-container #education-page h3.big {
font-size: 22px;
}
main #page-container #education-page .title-banner {
height: 170px;
min-height: unset;
}
main #page-container #education-page .title-banner h2 {
font-size: 2em;
margin: 20px;
text-shadow: 0 0 4px #000b;
}
main #page-container #education-page .section-contents {
grid-template-columns: 1fr;
}
main #page-container #education-page .section-contents .full-row {
grid-column: 1;
}
main #page-container #education-page .section-contents .practical-infos {
grid-column: 1;
grid-row: 3;
gap: 10px;
padding: 10px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
grid-column: 1;
grid-row: 2;
display: block;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
margin-bottom: 20px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
background-color: #fff9;
position: relative;
top: unset;
width: 100%;
left: unset;
max-height: unset;
visibility: visible;
padding: 10px;
box-shadow: none;
}
main #page-container #education-page .section-contents .infos-inscriptions {
gap: 10px;
padding: 10px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
main #page-container #education-page .section-contents .infos-inscriptions .pricing {
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
width: 100%;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
border: 1px solid #dde;
padding: 10px;
}
}
main #page-container #games-page .game-articles article {
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 0 20px;
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(6, auto);
background-color: #3c4144;
}
main #page-container #games-page .game-articles article.game-article *:not(a) {
color: #d4d9dd;
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1/span 2;
background-color: #d4d9dd;
margin: 0;
padding: 30px 20px;
color: #6b7880;
font-size: 35px;
font-style: italic;
}
main #page-container #games-page .game-articles article.game-article .game-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 10px 20px;
}
main #page-container #games-page .game-articles article.game-article .game-tags span {
border-radius: 5px;
font-weight: 600;
}
main #page-container #games-page .game-articles article.game-article .game-subtitle {
grid-column: 1;
margin: 10px 20px 30px;
}
main #page-container #games-page .game-articles article.game-article .game-description {
grid-column: 1;
text-align: justify;
margin: 10px 20px 30px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 2;
grid-row: 2/span 4;
}
main #page-container #games-page .game-articles article.game-article .game-team {
grid-column: 1/span 2;
}
main #page-container #games-page .game-articles article.game-article .game-team h2 {
padding: 10px 20px;
font-style: italic;
font-size: 20px;
margin: 0;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members {
display: flex;
flex-direction: column;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member {
display: grid;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-img {
grid-row: 1/span 3;
overflow: hidden;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-img img {
width: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-title {
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-subtitle {
margin: 0 10px;
font-size: 14px;
color: #96a5ae;
font-style: italic;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-body {
text-align: justify;
}
main #page-container #games-page .game-articles article.placeholder {
height: 400px;
}
main #page-container #games-page .game-articles article.placeholder * {
background-color: #d4d9dd;
}
@media screen and (max-width: 900px) {
main #page-container #games-page .game-articles article {
grid-template-columns: 1fr;
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(5, auto);
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1;
padding: 20px;
font-size: 25px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
grid-row: 2;
}
main #page-container #games-page .game-articles article.game-article .game-team {
grid-column: 1;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member {
grid-template-columns: 70px 1fr;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-img {
grid-row: 1/span 2;
}
main #page-container #games-page .game-articles article.game-article .game-team .team-members .team-member .team-member-body {
grid-column: 1/span 2;
}
}
main #page-container #software-page .software-articles {
margin: 0 auto 50px;
}
main #page-container #software-page .software-articles article.software-article {
display: grid;
gap: 0 30px;
background-color: #3c4144;
}
main #page-container #software-page .software-articles article.software-article > * {
color: #d4d9dd;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1/span 2;