@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap"); /* If the screen size is 601px wide or more */ @media screen and (min-width: 601px) { body { font-size: 18px; } } /* If the screen size is 600px wide or less */ @media screen and (max-width: 600px) { body { font-size: 14px; } } body { font-family: proxima-nova, "Inter", sans-serif; color: var(--main-dark-color); --gcc-pink-color: #ff0079; --gcc-green-color: #a6c613; --gcc-blue-color: #00aed3; --main-dark-color: #222a35; --main-light-color: #eff2f5; --main-grey-background: #efefef; --global-border-radius: 12px; --main-hover-color: #46566d; --light-text-color: #92a2b9; --bs-link-color: #00aed3; --bs-link-hover-color: #00aed3; --gcc-navbar-height: 75px; --gcc-footer-height: 200px; } /* * The default style of all links * */ a { text-decoration: none; } /* Remove the underline between icon and text in links */ a:hover { text-decoration: none; } .hover-underline:hover { text-decoration: underline !important; } /* Crispy form class put on asteriks of required fields */ .asteriskField { padding-left: 0.2em; font-weight: bold; color: red; } .accordion-button { font-size: 20px; } /* * To use in each view that use header and footer. * */ .main-body-style { /* * The fixed navbar overlay other contents, unless you add margins * to the top of the . */ padding-top: var(--gcc-navbar-height); /* * Needed to fix the footer to the bottom of the screen or to the bottom of * the page if the page is longer than the screen. * */ /* min-height: calc(100vh - var(--gcc-footer-height)); */ min-height: calc(100vh - var(--gcc-footer-height)); } /* Space between header and footer */ .content-viewport { /* Adding a 0.1px padding because FUCK CSS */ padding-top: 0.1px; min-height: calc(100vh - var(--gcc-footer-height) - var(--gcc-navbar-height)); background-attachment: fixed; background-color: white; background-repeat: no-repeat; background-size: cover; background-position: center center; } @media only screen and (min-width: 768px) { .content-gmd-viewport-no-footer { padding-top: 0.1px; min-height: calc(100vh - var(--gcc-navbar-height)); max-height: calc(100vh - var(--gcc-navbar-height)); } } @media only screen and (max-width: 768px) { .content-gmd-viewport-no-footer { width: 100vw !important; } } .content-viewport-no-footer { padding-top: 0.1px; min-height: calc(100vh - var(--gcc-navbar-height)); max-height: calc(100vh - var(--gcc-navbar-height)); } /* * BACKGROUNDS */ .bg-full-1 { background-image: url("../img/background_full_1.svg"); } .bg-half-1 { background-image: url("../img/background_bottom_1.svg"); } .bg-half-2 { background-image: url("../img/background_bottom_2.svg"); } .bg-half-3 { background-color: var(--main-grey-background); background-image: url("../img/background_bottom_3.svg"); } .bg-top-1 { background-color: var(--main-grey-background); background-image: url("../img/background_top_1.svg"); } .bg-dark { background-color: var(--main-dark-color); } .partners-background { background-color: white; padding: 15px; } .newsletter-background { background-color: var(--main-grey-background); background-image: url("../img/newsletter_bg.svg"); } .content-background { background-color: white; border-radius: var(--global-border-radius); border: 1px solid var(--light-text-color); } h1, .titleSize { font-weight: 500; } h2, .subtitleSize { font-size: 150%; } h3, .subsubtitleSize { font-size: 100%; } .fs-footnote { font-size: 80%; } .light-text { color: #37474f; font-weight: 400; font-size: 100%; } .gcc-pink { color: var(--gcc-pink-color); } .gcc-green { color: var(--gcc-green-color); } .gcc-blue { color: var(--gcc-blue-color); } /* * Main */ .home-banner { height: 95vh; background-image: url("../img/girl-class-v2.svg"), url("../img/code-background-v2.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; } /* title animation */ .home-title span { text-align: center; position: relative; overflow: hidden; display: block; border-radius: var(--global-border-radius); } .home-title span::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: var(--main-dark-color); animation: a-ltr-after 0.5s cubic-bezier(0.5, 0.5, 0.5, 0.5) forwards; transform: translateX(-101%); } .home-title span::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: white; animation: a-ltr-before 0.7s cubic-bezier(0.5, 0.5, 0.5, 0.5) forwards; transform: translateX(0); } .home-title span:nth-of-type(1)::before, .home-title span:nth-of-type(1)::after { animation-delay: 0.5s; } .home-title span:nth-of-type(2)::before, .home-title span:nth-of-type(2)::after { animation-delay: 0.5s; } .home-title span:nth-of-type(3)::before, .home-title span:nth-of-type(3)::after { animation-delay: 0.6s; } @keyframes a-ltr-after { 0% { transform: translateX(-100%); } 100% { transform: translateX(101%); } } @keyframes a-ltr-before { 0% { transform: translateX(0); } 100% { transform: translateX(200%); } } /* * Header */ .navbar { background-color: white; height: var(--gcc-navbar-height); } .navbar-brand { opacity: 0; } .navbar-brand:hover { text-decoration: none; } .dropdown-header:hover { color: var(--bs-dropdown-header-color); } button.dropdown-item { z-index: 10; } .text-home-header { font-weight: bold; align-self: center; font-size: x-large; } /* * Event List partial */ .event-list-background { background-color: var(--main-grey-background); background-repeat: no-repeat; background-size: contain; background-position: top 0 right 0; } .event-card { background-color: #ffffff; border-radius: 12px; } .btn-group-vertical > button { margin-bottom: 5px; border-radius: 12px !important; } /* * Newsletter */ .rounded-input-left { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: var(--global-border-radius) !important; border-bottom-left-radius: var(--global-border-radius) !important; } .rounded-input-right { border-top-right-radius: var(--global-border-radius) !important; border-bottom-right-radius: var(--global-border-radius) !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .btn-group-vertical > button { margin-bottom: 5px; border-radius: 12px !important; } .gcc-color-1 { color: var(--gcc-pink-color); } .gcc-color-2 { color: var(--gcc-green-color); } .gcc-color-3 { color: var(--gcc-blue-color); } .modal-header { border: none; } .eventInfo-line { margin: 0; height: 3px; width: 100%; margin-bottom: 2%; border-radius: 40%; border: none; } .modal-line { margin: 0; height: 3px; margin-bottom: 2%; border-radius: 40%; border: none; } .gcc-1-back { background-color: var(--gcc-pink-color); } .gcc-2-back { background-color: var(--gcc-green-color); } .gcc-3-back { background-color: var(--gcc-blue-color); } .w-fit-content { width: fit-content !important; } .h-fit-content { height: fit-content; } input[type=checkbox].xl { -ms-transform: scale(1.3); /* IE */ -moz-transform: scale(1.3); /* FF */ -webkit-transform: scale(1.3); /* Safari and Chrome */ -o-transform: scale(1.3); /* Opera */ transform: scale(1.3); padding: 10px; }