style.css

/*
Jean-Baptiste Pellier - OpenClassRooms Project #3 "Ciné Monceau" - style.css
Theme Name: customizr-child
Template: customizr
Theme URI: https://presscustomizr.com/customizr
Description: Customizr is a simple and fast WordPress theme designed to help you attract and engage more visitors. Provides a perfect user experience on smartphones. Powers more than 100K active sites around the world. Hundreds of 5-stars reviews received on WordPress.org.
Version: 4.3.1
Author: nikeo
Author URI: https://presscustomizr.com/
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, buddypress, custom-menu, custom-colors, featured-images, full-width-template, theme-options, threaded-comments, translation-ready, sticky-post, post-formats, rtl-language-support, editor-style
Text Domain: customizr
Domain Path: /inc/lang
Copyright: (c) 2013 - 2020 Nicolas GUILLAUME (nikeo), Nice, France
License: GNU General Public License v2.0 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Requires PHP: 5.3
Tested up to: 5.5
*/

/* BODY
________________________________________ */
/* Animated Gradient */
/* body {
  background: #0a2061;
  background: -webkit-radial-gradient(top, #0a2061 0%,#0a2061 0%,#020716 100%);
  background: -moz-radial-gradient(top, #0a2061 0%, #0a2061 0%, #020716 100%);
  background: radial-gradient(to bottom, #0a2061 0%,#0a2061 0%,#020716 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a2061', endColorstr='#020716',GradientType=0 );
  background-size: 200% 200%;
  	-webkit-animation: Gradient 25s ease infinite;
  	-moz-animation: Gradient 25s ease infinite;
  	animation: Gradient 25s ease infinite;
  }

  @-webkit-keyframes Gradient {
  	0% {
  		background-position: 0% 50%
  	}
  	50% {
  		background-position: 100% 50%
  	}
  	100% {
  		background-position: 0% 50%
  	}
  }

  @-moz-keyframes Gradient {
  	0% {
  		background-position: 0% 50%
  	}
  	50% {
  		background-position: 100% 50%
  	}
  	100% {
  		background-position: 0% 50%
  	}
  }

  @keyframes Gradient {
  	0% {
  		background-position: 0% 50%
  	}
  	50% {
  		background-position: 100% 50%
  	}
  	100% {
  		background-position: 0% 50%
  	}
  } */

/* Fixed Gradient Background */
body {
  color: #a8d4f6;
  font-family: 'Roboto', sans-serif;
  background: rgba(2,7,22,1);
  background: -moz-linear-gradient(45deg, rgba(2,7,22,1) 0%, rgba(10,32,97,1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(2,7,22,1)), color-stop(100%, rgba(10,32,97,1)));
  background: -webkit-linear-gradient(45deg, rgba(2,7,22,1) 0%, rgba(10,32,97,1) 100%);
  background: -o-linear-gradient(45deg, rgba(2,7,22,1) 0%, rgba(10,32,97,1) 100%);
  background: -ms-linear-gradient(45deg, rgba(2,7,22,1) 0%, rgba(10,32,97,1) 100%);
  background: linear-gradient(45deg, rgba(2,7,22,1) 0%, rgba(10,32,97,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020716', endColorstr='#0a2061', GradientType=1 );
}

/* HEADER
________________________________________ */
/* Add 20px on top of the page */
.header-skin-light #tc-sn .tc-sn-inner, .header-skin-light .tc-header {
  margin-top: 20px;
}

/* Top border removed */
.tc-header.border-top {
  border-top-width: 0px;
  border-top-style: solid;
}
.tc-header.border-top {
  border-top-color: #5a5a5a;
}

/* Header's background removed */
.header-skin-light #tc-sn .tc-sn-inner, .header-skin-light .tc-header {
  color: #313131;
  background: transparent;
}

/* No box-shadow for the header */
.desktop-sticky, .mobile-sticky {
  box-shadow: none;
}

/* Delete line between Header & Main content */
.tc-header:not(.header-transparent) {
  box-shadow: none;
}

/* Full Size Logo */
.primary-navbar__wrapper.has-horizontal-menu .branding__container {
  max-width: 36%;
}

/* Bigger font for Main Nav Menu */
#add_payment_method .cart-collaterals .cart_totals table td, #add_payment_method .cart-collaterals .cart_totals table th, .demi-small, .nav__menu, .page-breadcrumbs, .sidebar, .woocommerce table.shop_table td, .woocommerce table.shop_table th, .woocommerce-cart .cart-collaterals .cart_totals table td, .woocommerce-cart .cart-collaterals .cart_totals table th, .woocommerce-checkout .cart-collaterals .cart_totals table td, .woocommerce-checkout .cart-collaterals .cart_totals table th, table:not([id^=wp-calendar]):not(.ui-datepicker-calendar):not(.tribe-mini-calendar) td, table:not([id^=wp-calendar]):not(.ui-datepicker-calendar):not(.tribe-mini-calendar) th {
  font-size: 0.98rem;
}

/* Main Nav links color */
.header-skin-light [class*=nav__menu] .nav__link, .header-skin-light [class*=nav__menu] .nav__link-wrapper .caret__dropdown-toggler {
  color: #a8d4f6;
}

.header-skin-light [class*=nav__menu] .current-menu-item>.nav__link, .header-skin-light [class*=nav__menu]
.current-menu-item>.nav__link-wrapper .nav__link, .header-skin-light [class*=nav__menu] .nav__link-wrapper
.caret__dropdown-toggler:hover, .header-skin-light [class*=nav__menu] .nav__link:hover, .header-skin-light [class*=nav__menu]
.show:not(.dropdown-item)>.nav__link, .header-skin-light [class*=nav__menu] .show:not(.dropdown-item)>.nav__link-wrapper
.nav__link, .header-skin-light [class*=nav__menu] li:not(.dropdown-item).current-active>.nav__link, .header-skin-light [class*=nav__menu] li:not(.dropdown-item).current-active>.nav__link-wrapper .nav__link {
  color: #fff;
}

.header-skin-light [class*=nav__menu] .nav__title::before {
  background-color: #fff;
}

/* Main Nav's background */
.primary-navbar__row {
  background: url('https://ocp3.jeanbaptistepellier.fr/wp-content/uploads/2020/09/bg_title.png') top 25% right 16% no-repeat;
}

/* Main Nav alignement */
.primary-nav__container {
  padding: 0px !important;
  right: 5%;
}

/* Research button's color */
.header-skin-light .header-contact__info a, .header-skin-light .header-contact__info a:active, .header-skin-light .header-contact__info a:focus, .header-skin-light .nav__utils a, .header-skin-light .nav__utils a:active, .header-skin-light .nav__utils a:focus {
  color: #a8d4f6;
}

.header-skin-light .header-contact__info a.current-active, .header-skin-light .header-contact__info a:hover, .header-skin-light .nav__utils a.current-active, .header-skin-light .nav__utils a:hover {
  color: #fff;
}

/* FOOTER
________________________________________ */
/* Hide ©WP */
#colophon {
  display:none;
}

/* New footer background */
.footer-skin-dark .footer__wrapper {
  color: #fff;
  background: #000;
  border-top: 1px solid transparent;
}

/* Footer layout */
.footer__wrapper {
  margin-top: 50px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.footer__wrapper .widget > h5 {
  font-size: .85rem;
  font-weight: 300;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Center footer content */
.footer__wrapper .textwidget {
  width: 100%;
}

/* RESPONSIVE NAV
________________________________________ */
/* Update Mobile Nav buttons color */
.header-skin-light .nav__utils .ham-toggler-menu.czr-collapsed:hover .line {
  background-color: #a8d4f6;
}

.header-skin-light .ham__toggler-span-wrapper .line {
  background: #a8d4f6;
}

/* Mobile Nav new background */
.vertical-nav.mobile-nav__menu {
  margin: 0 -12.5px;
  background: rgba(227, 32, 81, 0.9);
}

/* Suppress border @Main Nav bottom */
.mobile-sticky .mobile-nav__nav {
  position: absolute;
  width: 100%;
  box-shadow: 0 6px 8px 0 rgba(120,120,120,0);
}

/* EVENTS MANAGER & ADDTOANY INTEGRATION,
   FILM DETAILS PAGE
________________________________________ */
select {
  max-width: 60%;
  width: 60%;
  text-overflow: initial;
  outline: 0;
  margin: 0 auto;
}
input, select, textarea {
  max-width: 60%;
  margin: 0 auto;
}

/* CUSTOM CSS
________________________________________ */
/* Homepage Slider Button */
.bouton {
  text-align: center;
  margin-top: -25%;
}

/* Center 'AddToAny' buttons */
.addtoany_shortcode {
  text-align: center;
}

/* Links color */
a {
  text-decoration: none;
  color: #a8d4f6;
}

/* Default font for custom page */
.entry-title {
  line-height: 1.5;
  padding-bottom: 30px;
  text-align: center;
  letter-spacing: 1px;
}

/* Slider Captions style */
.elementor-image-carousel-caption {
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
  margin-top: -8.5vh;
  padding-left: 1vw;
}

.posterShadow {
  -webkit-box-shadow: inset 15px 0px 20px -5px rgba(0,0,0,0.6);
  box-shadow: inset 15px 0px 20px -5px rgba(0,0,0,0.35);
  background-color: white;
}


/* MEDIA QUERIES
________________________________________ */
/* Mobile layout */
@media only screen and (max-width: 425px) {
  .posterShadow {
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0);
    box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0);
    background-color: white;
  }
  .bouton {
    text-align: center;
    margin-top: -32%;
    transform: scale(0.9);
  }
}

@media only screen and (max-width: 1199px) {
  /* Main Nav alignement < 1200px */
.primary-nav__container {
    right: 0%;
  }

  /* Homepage Main Nav's background < 1200px */
.primary-navbar__row {
    background: url('https://ocp3.jeanbaptistepellier.fr/wp-content/uploads/2020/09/bg_title.png') top 25% right 11% no-repeat;
    background-size: 60%;
  }

  /* Reduce Main Nav so it stays inline */
  .nav__menu {
    letter-spacing: -0.3px;
  }

  /* Center FAQ+CONTACT+APROPOS */
  .apropos {
      font-size: 0.8rem;
      margin-left: 36%;
  }

  /* Smaller Slider Captions size */
  .elementor-image-carousel-caption {
    text-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
    margin-top: -8.5vh;
    padding-left: 1vw;
  }
}

/* MAIN COLORS
________________________________________ */
/* Blue
#a8d4f6 */
/* Pink
#e21649 */