/* Theme Name: Polyphon Theme URI: http://www.lacaze-carnier.com Description: Author: Eric Lacaze Author URI: http://www.lacaze-carnier.com */ /* CORE -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transition: translate3d(0,0,0); -moz-transition: translate3d(0,0,0); -ms-transition: translate3d(0,0,0); width: 1000px; width: -webkit-calc(100% - 400px); width: -moz-calc(100% - 400px); width: calc(100% - 400px); -moz-transform: scale(1, 0.75); -webkit-transform: scale(1, 0.75); -o-transform: scale(1, 0.75); -ms-transform: scale(1, 0.75); transform: scale(1, 0.75); opacity: 0; -khtml-opacity: 0; -moz-opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0); filter: progid:DXImageTransform.Microsoft:Alpha(opacity=0); -webkit-transition: opacity 800ms ease-in-out; -moz-transition: opacity 800ms ease-in-out; -o-transition: opacity 800ms ease-in-out; transition: opacity 800ms ease-in-out; -webkit-box-shadow: inset 0px 0px 146px 0px rgba(0, 0, 0, 0.42); -moz-box-shadow: inset 0px 0px 146px 0px rgba(0, 0, 0, 0.42); box-shadow: inset 0px 0px 146px 0px rgba(0, 0, 0, 0.42); filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%); filter: none; -webkit-filter: grayscale(0%); --------------------------------------------------- */ /* barlow-condensed-300 - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; src: url('css/barlow-condensed-v3-latin-300.eot'); /* IE9 Compat Modes */ src: local('Barlow Condensed Light'), local('BarlowCondensed-Light'), url('css/barlow-condensed-v3-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('css/barlow-condensed-v3-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('css/barlow-condensed-v3-latin-300.woff') format('woff'), /* Modern Browsers */ url('css/barlow-condensed-v3-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('css/barlow-condensed-v3-latin-300.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-regular - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; src: url('css/barlow-condensed-v3-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Barlow Condensed Regular'), local('BarlowCondensed-Regular'), url('css/barlow-condensed-v3-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('css/barlow-condensed-v3-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('css/barlow-condensed-v3-latin-regular.woff') format('woff'), /* Modern Browsers */ url('css/barlow-condensed-v3-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('css/barlow-condensed-v3-latin-regular.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } /* barlow-condensed-500 - latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; src: url('css/barlow-condensed-v3-latin-500.eot'); /* IE9 Compat Modes */ src: local('Barlow Condensed Medium'), local('BarlowCondensed-Medium'), url('css/barlow-condensed-v3-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('css/barlow-condensed-v3-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('css/barlow-condensed-v3-latin-500.woff') format('woff'), /* Modern Browsers */ url('css/barlow-condensed-v3-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('css/barlow-condensed-v3-latin-500.svg#BarlowCondensed') format('svg'); /* Legacy iOS */ } :root { --grey: #333; --red: #e30613; } /* BASIC --------------------------------------------------- */ * { font-family: 'Barlow Condensed'; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.2; color: #000; margin: 0; padding: 0; outline: none; } body { background-color: #ccc; } article * { color: #fff; } h1 { font-weight: 300; font-size: 3.5rem; line-height: 1; text-transform: uppercase; } h2 { font-weight: 300; font-size: 2.75rem; text-transform: uppercase; } .sub h2 { font-size: 2rem; color: #e30613; } h3 { font-weight: 500; font-size: 2rem; text-transform: uppercase; } h4 { font-weight: 500; font-size: 2rem; text-transform: uppercase; } h5 { font-weight: 500; font-size: 2rem; text-transform: uppercase; } h6 { font-weight: 500; font-size: 2rem; text-transform: uppercase; } address { font-weight: 400; font-size: 1.1rem; } .sub address { font-size: 1rem; } p { font-weight: 400; font-size: 1rem; } li { font-weight: 400; font-size: 1rem; } b, strong { font-weight: 400; } @media all and (max-width: 768px) { article * { color: #000; } #search article * { color: #fff; } } a.anchor { width: 0 !important; height: 0 !important; overflow: hidden; display: block !important; margin: 0 !important; padding: 0 !important; } ::-webkit-input-placeholder { color: #fff !important; } :-ms-input-placeholder { color: #fff !important; } ::placeholder { color: #fff !important; } a.border { position: relative; display: inline-block; border: 0 !important; } a.border:after { content: ''; left: 0; right: 0; bottom: -2px; position: absolute; background-color: #e30613; height: 2px; width: auto; } /* HEAD --------------------------------------------------- */ header { position: fixed; top: 0; left: 0; width: calc(100vw - 15px); z-index: 1000; background-color: rgba(0,0,0,0.5); text-transform: uppercase; } header a { font-size: 1.2rem; } /* MENU --------------------------------------------------- */ header * { color: #fff; } header svg { height: 1rem; } header .navbar { padding: 0 1rem; } header .navbar-toggler { border: 0; } header form input.form-control { background-color: rgba(255,255,255,0.1) !important; color: #fff !important; border-radius: 0; border-width: 0; height: 2rem; line-height: 2rem; padding-top: 0; padding-bottom: 0; font-size: 1.2rem; } header form button.btn-primary, header form button.btn-primary:link, header form button.btn-primary:visited { background-color: rgba(255,255,255,0.3); color: #fff; text-transform: uppercase; border-radius: 0; border-width: 0; height: 2rem; line-height: 2rem; padding-top: 0; padding-bottom: 0; font-size: 1.2rem; width: 100px; } header form button.btn-primary:hover, header form button.btn-primary:focus, header form button.btn-primary:active { background-color: #fff; color: #000; } header .iuno-search-show, header .iuno-search-hide { width: 2.5rem; text-align: center; } header .iuno-search-show a, header .iuno-search-hide a { display: block; } header .iuno-std { display: flex !important; } header .iuno-search { display: none !important; } header.search .iuno-std { display: none !important; } header.search .iuno-search { display: flex !important; } header .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } header #navbarToggler ul { padding-top: 1rem; padding-bottom: 1rem; } header #searchToggler form { padding-top: 1.5rem; padding-bottom: 1.5rem; } header #searchToggler input { width: calc(100% - 100px); } header .nav-link:hover { color: #fff !important; } header .nav-link { position: relative; } header .nav-link.active::after { content: ''; display: block; width: auto; position: absolute; bottom: 0.25rem; left: 0.5rem; right: 0.5rem; height: 2px; background-color: #e30613; } @media all and (min-width: 768px) { header form input.form-control { width: auto; } header .navbar-brand { margin: 0 0 0 1rem; } header #searchToggler { display: none !important; } } @media all and (max-width: 768px) { header { position: relative; } header form input.form-control { width: calc(100% - 100px); } header .navbar-brand { margin: 0 0 0 10px; } header #navbarToggler .iuno-search { display: none !important; } header .iuno-std { padding: 0 !important; text-align: center; display: block !important; } header .iuno-std a { width: auto; display: inline-block; } header .nav-link.active::after { left: 0; right: 0; } header .iuno-search-show, header .iuno-search-hide { display: none !important; } header #searchToggler .iuno-search { display: flex !important; } header #searchToggler .iuno-search.form-inline { padding: 1rem 0 1rem 0; } } /* FOOT --------------------------------------------------- */ footer { position: relative; left: 0; width: calc(100vw - 15px); background-color: rgba(0,0,0,0.5); text-transform: uppercase; } footer .navbar { padding: 0; } footer li { font-size: 1.1rem; } footer .nav-link { color: rgba(255,255,255,0.8) !important; } footer .nav-link:hover { color: #fff !important; } /* BODY --------------------------------------------------- */ section { position: relative; width: calc(100vw - 15px); height: auto; overflow: hidden; padding-top: 100px; padding-bottom: 100px; } section.dh-100 { height: 100vh; padding-top: 0; padding-bottom: 0; } section.sub { min-height: calc(100vh - 2.2rem); } section a, section a:link, section a:visited { color: #000; text-decoration: none; display: inline-block; } section article a, section article a:link, section article a:visited { color: #fff; } section a:hover, section a:active { color: #e30613; } article { position: relative; } @media all and (max-width: 768px) { section.dh-100 { height: auto; } section article a, section article a:link, section article a:visited { color: #000; } } .news-slider article { min-height: 100vh; } .production-slider article { min-height: 100vh; } .slick-arrow * { color: #ccc; } .slick-arrow { position: absolute; top: 50%; font-size: 2rem; line-height: 3rem; height: 3rem; width: 3rem; margin: -1.5rem 0; display: block; z-index: 500; padding: 0 0.5rem; cursor: pointer; color: #fff; text-align: center; background-color: rgba(0,0,0,0.5); -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } .slick-arrow:hover { -moz-transform: scale(1.6); -webkit-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); transform: scale(1.6); } .slick-prev { left: 0rem; } .slick-next { right: 0rem; } .slick-dots { position: absolute; bottom: 0.5rem; right: 1rem; width: calc(100% - 2rem); z-index: 550; white-space: nowrap; margin: 0; padding: 0; list-style: none outside none; text-align: center; } .slick-dots, .slick-dots * { font-size: 0; line-height: 0; } .slick-dots li { display: inline-block; margin-left: 0.5rem; } .slick-dots button { font-size: 0; line-height: 0; width: 50px; height: 2px; background-color: rgba(255,255,255,0.5); border: 0; } .slick-dots .slick-active button { background-color: #fff; } /* TEAM --------------------------------------------------- */ .pp-production-bg { background-color: #183456; position: absolute; top: 0; left: 0; width: calc(100vw - 15px); height: 100vh; z-index: 100; background-size: cover; background-repeat: no-repeat; background-position: center top; } .pp-production { position: absolute; bottom: 0; left: 0; width: calc(100vw - 15px); padding: 1rem; z-index: 200; background-color: rgba(0,0,0,0.5); } .pp-production .row { margin: 0; } .pp-production .awards { height: auto; display: block; position: absolute; width: 100%; bottom: 100%; left: 0; padding: 0; } .pp-production .award { font-size: 1rem; line-height: 2rem; height: 2rem; font-weight: 400; text-transform: uppercase; display: block; position: relative; width: auto; text-align: left; color: black; background-color: rgba(255,255,255,0.8); padding: 0 15px; float: left; clear: left; margin-top: 1px; } .pp-production .award.gewinner { animation: animateBg 5s linear infinite; background-image: linear-gradient(90deg,rgba(255,210,119,0.8) 0%, rgba(255,228,168,0.8) 50%, rgba(255,255,255,0.8) 55%, rgba(255,210,119,0.8) 70%); background-size: 500% 100%; } .animated-gradient { animation: animateBg 5s linear infinite; background-image: linear-gradient(-45deg, rgba(255,210,119,0.8) 0%, rgba(255,255,255,0.8) 21%, rgba(255,228,168,0.8) 52%, rgba(255,210,119,0.8) 80%); background-size: 200% 100%; background-size: 1000% 100%; } @keyframes animateBg { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } } @keyframes animateBg { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } } .pp-production .title { font-size: 2.75rem; line-height: 1.1; font-weight: 300; text-transform: uppercase; } .pp-production .subtitle { font-size: 2rem; line-height: 1.1; font-weight: 300; text-transform: uppercase; } .pp-production .onair { font-weight: 400; font-size: 1.1rem; font-weight: 300; text-transform: uppercase; margin-top: 0.35rem; } .pp-production .text p { font-size: 1.1rem; } .pp-production .info p { font-size: 0.95rem; } .pp-production a { position: relative; } .pp-production a::after { content: ''; display: block; width: auto; position: absolute; bottom: -0.25rem; left: 0; right: 0; height: 2px; background-color: #e30613; } @media all and (max-width: 769px) { .container { width: auto; max-width: calc(100vw - 15px); margin: 0; } .pp-production-bg { position: relative; height: calc((100vw - 15px) * 0.625); } .pp-production { position: relative; bottom: auto; background-color: transparent; padding: 1rem 0; } .pp-production .awards { height: auto; display: block; position: relative; bottom: auto; } .pp-production .award { line-height: 1rem; height: auto; position: relative; min-width: auto; width: 100%; text-align: left; top: -1rem; background-color: #fff; padding: 0.25rem 15px 0.35rem 15px; } .slick-arrow { top: calc((100vw * 0.625) - 2.1rem) /*calc((100vw - 15px) * 0.625 * 0.5)*/; } } /* TEAM --------------------------------------------------- */ section#team { padding-top: 100px; padding-bottom: 0; } #team .row { margin: 0; } #team article { height: 300px; margin: 0; background-size: cover; background-position: center center; background-color: #333; margin: 1rem; -webkit-box-shadow: 0px 0px 3rem 0px rgba(0, 0, 0, 0.42); -moz-box-shadow: 0px 0px 3rem 0px rgba(0, 0, 0, 0.42); box-shadow: 0px 0px 3rem 0px rgba(0,0,0,0.42); } .pp-team { height: 300px; padding: 1rem; display: block; } .pp-team * { color: #fff !important; } .pp-team:focus, .pp-team:active, .pp-team.active, .pp-team:hover { background-color: rgba(227,6,19,0.8); } .pp-team, .pp-team div { position: relative; overflow: hidden; -webkit-transition: opacity 800ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .pp-team div { text-overflow: ellipsis; } .pp-team div.height-change { height: 0; } .pp-team:focus div.height-change, .pp-team:active div.height-change, .pp-team.active div.height-change, .pp-team:hover div.height-change { height: 1.5rem; } .pp-team .name { display: block; font-size: 1.5rem; line-height: 1.8rem; font-weight: 400; color: #fff; text-transform: uppercase; padding-top: 12rem; text-shadow: 0px 0px 4px #000; } .pp-team:focus .name, .pp-team:active .name, .pp-team.active .name, .pp-team:hover .name { padding-top: 5rem; color: #fff; text-shadow: 0px 0px 0px #fff; } .pp-team .position { display: block; font-size: 1.2rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-team:focus .position, .pp-team:active .position, .pp-team.active .position, .pp-team:hover .position { padding: 0.5rem 0; height: 2.5rem !important; } .pp-team .tel { display: block; font-size: 1.2rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; } .pp-team .tel a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-team .mail { display: block; font-size: 1.2rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; } .pp-team .mail a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-team .assist { display: block; font-size: 1.2rem; line-height: 1.5rem; font-weight: 400; text-transform: uppercase; } .pp-team a:hover { background-color: transparent; } #facebook { background-color: #141d33; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; transition: background-color 500ms linear; -webkit-box-shadow: inset 0px 0px 300px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: inset 0px 0px 300px 0px rgba(0, 0, 0, 0.75); box-shadow: inset 0px 0px 300px 0px rgba(0, 0, 0, 0.75); } #facebook:hover { background-color: #3a5795; cursor: pointer; -webkit-transition: background-color 500ms linear; -moz-transition: background-color 500ms linear; -o-transition: background-color 500ms linear; transition: background-color 500ms linear; } #facebook * { text-decoration: none; } #facebook .fab { font-size: 100px; } #facebook a.fb { margin: 0; padding: 0; display: block; background-color: transparent !important; } address { line-height: 1.35; padding-top: 0.25rem; } address b, address strong { line-height: 1.35; display: inline-block; padding-bottom: 0.5rem; } address img { width: 90%; height: auto; display: block; padding-bottom: 0.5rem; } /* 1200 992 768 */ @media all and (min-width: 1500px) { #team article { width: calc(33.33% - 2rem); min-width: calc(33.33% - 2rem); max-width: calc(33.33% - 2rem); } #search article.result-team { width: calc(33.33% - 2rem); min-width: calc(33.33% - 2rem); max-width: calc(33.33% - 2rem); } } @media all and (min-width: 1200px) and (max-width: 1500px) { #team article { width: calc(33.33% - 2rem); min-width: calc(33.33% - 2rem); max-width: calc(33.33% - 2rem); } #search article.result-team { width: calc(33.33% - 2rem); min-width: calc(33.33% - 2rem); max-width: calc(33.33% - 2rem); } } @media all and (min-width: 900px) and (max-width: 1200px) { #team article { width: calc(50% - 2rem); min-width: calc(50% - 2rem); max-width: calc(50% - 2rem); } #search article.result-team { width: calc(50% - 2rem); min-width: calc(50% - 2rem); max-width: calc(50% - 2rem); } } @media all and (min-width: 600px) and (max-width: 900px) { #team article { width: calc(50% - 2rem); min-width: calc(50% - 2rem); max-width: calc(50% - 2rem); } #search article.result-team { width: calc(50% - 2rem); min-width: calc(50% - 2rem); max-width: calc(50% - 2rem); } } @media all and (max-width: 600px) { #team article { width: calc(100% - 2rem); min-width: calc(100% - 2rem); max-width: calc(100% - 2rem); } #search article.result-team { width: calc(100% - 2rem); min-width: calc(100% - 2rem); max-width: calc(100% - 2rem); } } #search { min-height: calc(100vh - 40px); } #search h1 { display: block; width: 100%; text-align: center; padding: 1rem 0 2rem 0; color: #000; } #search article { margin: 1rem; padding: 0; -webkit-box-shadow: 0px 0px 3rem 0px rgba(0, 0, 0, 0.42); -moz-box-shadow: 0px 0px 3rem 0px rgba(0, 0, 0, 0.42); box-shadow: 0px 0px 3rem 0px rgba(0,0,0,0.42); } #search article.result-team { height: 300px; margin: 1rem; background-size: cover; background-position: center center; } #search article.result-production { margin: 2rem 1rem 1rem 1rem; width: calc(50% - 2rem); min-width: calc(50% - 2rem); max-width: calc(50% - 2rem); min-height: 300px; height: 25vw; max-height: calc((570px - 2rem) * 0.625); overflow: hidden; } #search article.result-production .pp-production-bg { width: 100%; height: 100%; } #search article.result-production .pp-year { width: auto; display: none; height: auto; padding: 0; font-size: 0.8rem; line-height: 1; text-transform: uppercase; font-weight: 500; color: #ccc; } #search article.result-production a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 300; } #search article.result-production .pp-search-info { position: absolute; bottom: 0; left: 0; width: 100%; height: 5rem; display: block; z-index: 200; font-size: 1.25rem; color: #fff; padding: 0.5rem 1rem; background-color: rgba(0,0,0,0.5); text-transform: uppercase; -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); } #search article.result-production:hover .pp-search-info { width: 100%; height: 100%; } #search article.result-production .pp-search-title { font-size: 1.75rem; font-weight: 300; } #search article.result-production .pp-search-subtitle { font-size: 1.3rem; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #search article.result-production .mehr { position: relative; } #search article.result-production .mehr::after { content: ''; display: block; width: auto; position: absolute; bottom: -0.25rem; left: 0; right: 0; height: 2px; background-color: #e30613; } #search article.result-production .pp-search-text { display: none; padding: 1rem 0 0 0; text-transform: none; } #search article.result-production:hover .pp-search-text { display: block; } #search article.result-production .pp-search-text a { display: none; } @media all and (max-width: 992px) { #search article.result-production { width: calc(100% - 2rem); min-width: calc(100% - 2rem); max-width: calc(100% - 2rem); } } @media all and (orientation: portrait) { .pp-image-fix { position: relative; left: 50%; height: 100%; width: ; margin: 0 -750px 0 -750px; display: block; } } @media all and (orientation: landscape) { .pp-image-fix { position: relative; top: 50%; height: auto; width: 100%; margin: -50% 0 -50% 0; display: block; } }