/* Orbis Website CSS v0.1a WIP POC StephaneAG - 2016 majed on 2/04/2017 ( applying mods from RDV of 30/03/2017 ) */ /* quick test to see if we can force latest iOS mobile safari NOT to allow unintended zooming */ /*html { -webkit-text-size-adjust: none; }*/ .befa { opacity: 0.7; transition : 1s ease; cursor :pointer; } .befa:hover { opacity: 1; transform: scale(1.5, 1.5); } * { box-sizing: border-box; } .support { max-height :359px; } .hvrbox .hvrbox-layer_image { padding: 0px; background: transparent none repeat scroll 0% 0%; } .hvrbox, .hvrbox * { box-sizing: border-box; } .hvrbox { position: relative; display: inline-block; overflow: hidden; max-width: 100%; height: auto; } .hvrbox img { max-width: 100%; } .hvrbox .hvrbox-layer_bottom { display: block; } .hvrbox .hvrbox-layer_top { opacity: 0; position: absolute; margin-left: auto; margin-right: auto; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); color: #fff; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .hvrbox:hover .hvrbox-layer_top, .hvrbox.active .hvrbox-layer_top { opacity: 1; } .surlignage:hover { transition: all .2s; background: gray !important; color: white; } /*block css pour le diapo*/ .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 10%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: black; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */ .close { color: black; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .mySlides { position: relative; background-color: black; padding: 0px 340px; /* (x.MySlide - x.img)/2 -> 130(ici)*/ } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /* -- quick reset -- */ body, html, * { margin: 0; padding: 0; } a { text-decoration: none; } /* while I identify what's triggerring this .. */ body { /*overflow: hidden;*/ } /* - Prevent showing & acting on the main page's scrollable area when the mobile menu is visible - */ body { overflow: hidden; overflow-y: scroll; /* overflow-y 'll be updated via js when mobile menu is visible */ } /* -- font smoothing -- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* double rendering of font pb on some mobile browsers */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* -- device dimensions helper -- */ body:after { /*content: "[ "attr(data-nf-deviceDimensions) " Desktop ]";*/ /* can be easily updated using CSS media queries for the different devices' stylesheet declinations */ //content: "[ Desktop ]"; /* alternative version where we don't actually use any attrs but just display arbitrary content */ color: red; position: absolute; top: 10px; right: 10px; } /* -- while dev & debugging, we could also display the "template model" attribute in the pseudo elements of the items that have such attribute -- */ [data-nf-templateModel] { position: relative; } [data-nf-templateModel]:after { //content: "[ Template: " attr(data-nf-templateModel) " ]"; /* DISPLAY TEMPLATE MODELS DURING DEBUG */ color: blue; position: absolute; /*z-index: 1;*/ top: 2px; right: 2px; } /* ul.debug { list-style-type: none; border: 1px solid red; padding: none; } ul.debug li { border: 1px solid blue; margin: none; } */ /* ---- font import using @fontface ---- */ @font-face { font-family: 'gothambook'; src: url('./../fonts/gothambook-webfont.woff2') format('woff2'), url('./../fonts/gothambook-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gothammedium'; src: url('./../fonts/gothammedium-webfont.woff2') format('woff2'), url('./../fonts/gothammedium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gothamlight'; src: url('./../fonts/gothamlight-webfont.woff2') format('woff2'), url('./../fonts/gothamlight-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gothambold'; src: url('./../fonts/gothambold-webfont.woff2') format('woff2'), url('./../fonts/gothambold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham_xlightregular'; src: url('./../fonts/gotham-xlight-webfont.woff2') format('woff2'), url('./../fonts/gotham-xlight-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham_thinregular'; src: url('./../fonts/gotham-thin-webfont.woff2') format('woff2'), url('./../fonts/gotham-thin-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* ---- fonts ( added as class during debug ) ---- */ /* font code: family, size & customs */ .gothambook_font { font-family: 'gothambook', Arial, sans-serif; } .gothammedium_font { font-family: 'gothammedium', Arial, sans-serif; } .gothamlight_font { font-family: 'gothamlight', Arial, sans-serif; } .gothambold_font { font-family: 'gothambold', Arial, sans-serif; } /* not used */ .gothamxlightregular_font { font-family: 'gotham_xlightregular', Arial, sans-serif; } /* not used nor loaded correctly */ .gothamthinregular_font { font-family: 'gotham_thinregular', Arial, sans-serif; } /* not used nor loaded correctly */ /* quickies */ * { font-family: 'gothamlight', Arial, sans-serif; } h1, h2, h3, h4, h5, h6, p { font-family: 'gothamlight', Arial, sans-serif; margin-bottom: 3px; margin-top: 3px;} h1 {} h2 {} h3 {} h4 {} h5 {} p {} a {} /* Elliott code for slide image */ .client2 { width: 277px; height: 170px; overflow:hidden; } .client2 img { transition: transform .5s ease-in-out; } .client2 img:hover { transform : translate3d(-278px, 0px, 0px); } /* ---- textColors ( added as class during debug - depends oh theme ) ---- */ /* font colors & colors in general ( defined in the Orbis graphical chart ) */ /* light theme */ .orbisCSblue_text { color: #4A78C1; } .orbisCSgrey_text { color: #616B7A; } .orbisCSwhitish { background-color: #F3F3F3; color: #151415;/* default light color for text */ } .orbisDarkBlue_text { color: #162639; } .orbisLightBlue_text { color: #477DBF; } .orbisLightGrey_text { color: #F2F2F2; } .orbisDarkish { background-color: #1D1E1F; } /* dark theme */ .orbisCSbeige_text { color: #E3DCC8; } .orbisCSgrey_text { color: #616B7A; } .orbisCSblue_text { color: #0E41B2; } .orbisCSdarkGrey { background-color: #151415; color: #F3F3F3; /* default light color for text */ } .orbisLighterBlue_text { color: #173E7E; } .orbisDarkerBlue_text { color: #05225F; } .orbisBeige_text { color: #9F9188; } .orbisBlue_text { color: #0068FF; } .orbisWhite_text { color: #FFFFFF; } .orbisGreyish { background-color: #E0E0E0; } /* ---- letter spacings & type case ---- */ .letterSpacing_size0 { letter-spacing: 1.5pt; } .letterSpacing_size1 { letter-spacing: 3pt; } .letterSpacing_size2 { letter-spacing: 5pt; } .letterSpacing_size3 { letter-spacing: 7pt; } .letterSpacing_size4 { letter-spacing: 9pt; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } /* ---- transitions ---- */ .mobile-menu-wrapper { overflow: hidden; /* masks the content when the mobile wrapper is not revealed */ -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition: height 2s; transition: height 2s; } .mobile-menu-wrapper .hide-mobile-menu-button { -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } /* ---- icons ---- */ .mobile-menu-wrapper .hide-mobile-menu-button { background: url('./../assets/icons/Orbis_websiteIcons_cross.png'); background-repeat: no-repeat; background-size: 30px; } .page-wrapper .show-mobile-menu-button { background: url('./../assets/icons/Orbis_websiteIcons_burger.png'); background-repeat: no-repeat; background-size: 20px; background-position: center; } /* ---- positionning ---- */ /* -- Mobile Menu Wrapper -- */ .mobile-menu-wrapper { /*position: absolute;*/ top: 0px; left: 0px; position: fixed; z-index: 5; background: #F3F3F3; width: 100%; /*overflow: scroll; DEBUG */ height: 0px; /*border-bottom: 1px solid gray;*/ /*initially invisible*/ } .mobile-menu-wrapper .header { /*padding-top: 7px;*/ /*min-height: 500px;*/ height: 100vh; /* height: 70vh; */ /*border: 1px solid green;*/ /*width: 100%;*/ overflow-x: hidden; -webkit-overflow-scrolling: touch; /*padding-top: 20px; padding-bottom: 20px;*/ } .mobile-menu-wrapper .hide-mobile-menu-button { /*position: absolute; LATEST DEBUG: trying fixed to see if it removes the sometimes stays off .. */ position: fixed; float: left; /*border: 1px solid green;*/ width: 30px; height: 30px; margin-left: 14px; margin-top: 7px; cursor: pointer; opacity: 0; pointer-events: none; /* hidden & non-clickable at start */ /* LATEST BEHAVIOR MODDING follows */ position: initial; margin-left: 20px; margin-top: 20px; } .mobile-menu-wrapper .company-logo { float: left; /*border: 1px solid gray;*/ width: 120px; font-size: 16pt; letter-spacing: 8pt; font-family: 'gothambook', Arial, sans-serif; text-align: center; margin-left: calc(50% - 60px); /* WIP: the overrides for the Orbis logo follows ;) */ height: 84px; margin-left: calc(50% - 40px); background: url(./../assets/logos/Orbis/Orbis_Logo_Orb_Dark_WhiteCircle_github.png); background-size: contain; background-repeat: no-repeat; margin-top: 20px; /* Override to adjust for Cross follows */ margin-left: calc(50% - 90px); } .mobile-menu-wrapper .menu-wrapper { clear: left; /*margin-top: 20px;*/ padding-top: 14px; padding-bottom: 7px; /*border: 1px solid red;*/ /*height: 0px; LAST DEBUG */ padding-left: 10px; padding-right: 10px; } .mobile-menu-wrapper .menu { list-style-type: none; padding-bottom: 20px; /* necessary for mobile to not have to scroll more to see the end */ } .mobile-menu-wrapper .menu-item { display: block; text-align: center; vertical-align: top; margin-bottom: 20px; } /*display: inline-block; -> not what I want .. */ .mobile-menu-wrapper .menu-link { /*display: table-cell;*/ vertical-align: middle; text-align: center; text-decoration: none; /*color: black;*/ font-size: 16pt; letter-spacing: 3pt; } .mobile-menu-wrapper .menu-link-subtitle { font-family: 'gothambook', Arial, sans-serif; } /* addition of 21/07/2017 to lighter the elements on screen for mobile devices - ease the menu reading */ /* .mobile-menu-wrapper .menu-link-subtitle { display: none; } */ /* -- Page Wrapper -- */ .page-wrapper { } .page-wrapper .header { min-height: 50px; /*border-bottom: 1px solid grey; -> changed for a border-top of the page */ } .page-wrapper .header { top: 0px; left: 0px; position: fixed; background-color: white; width: 100%; height: 60px; border-bottom: 1px solid /*gray*/#c5c5c5; box-shadow: 0 0 2.25rem #9da5ab; z-index: 4; } /* FIXED HEADER: 'll glitch a little on iOS but 'll be fine for other devices & desktops */ .page-wrapper .show-mobile-menu-button { float: left; /*border: 1px solid red;*/ width: 30px; height: 30px; /*margin-left: 7px;*/margin-left: 12px; /*margin-top: 7px;*/ margin-top: 12px; cursor: pointer; /*display: none;*/ /*set visible via media queries below - now alaways visible */ } .page-wrapper .company-logo { /*width: 30%*/; /*width: 160px;*/ text-align: center; /*border: 1px solid red;*/ float: left; margin-left: 30px; margin-top: 16px; font-size: 18pt; letter-spacing: 9pt; font-family: 'gothambook', Arial, sans-serif; /* overrides to show the logotype background */ margin-top: 10px; background: url(./../assets/logos/Orbis/Orbis_logotype.png); background-size: contain; background-repeat: no-repeat; width: 309px; height: 42px; /*nicer also for mobiles follows */ width: 233px; margin-top: 14px; } .page-wrapper .menu-wrapper { /*width: 50%;*/ /*width: auto;*/ /*float: left;*/ float: right; margin-top: 20px; margin-right: 15px; /*border: 1px solid green;*/ margin-bottom: 3px; } .page-wrapper .menu { list-style-type: none; display: inline-block; /*width: auto;*/ /* for inner lis */ } .page-wrapper .menu .menu-item { float: left; display: block; } /* addition of 11/04/2017: hide some menu-items when the screen is smaller than some size */ .page-wrapper .menu .menu-item.bigScreens { display: none; } .page-wrapper .menu .menu-item.biggerScreens { display: none; } .page-wrapper .menu .menu-item .menu-link { margin-left: 10px; margin-right: 5px; text-decoration: none; font-weight: 900; } .page-wrapper .page-content { /*height: auto;*/ /*background-color: gray;*/ clear: both; /*border: 1px solid red;*/ /*border-top: 1px solid grey; margin-top: 7px;*/ /* DEBUGGING MARGIN */ } .page-wrapper .page-content { padding-top: 54px;/*50px;*/ } /* FIXED HEADER: page top compensation */ .page-wrapper .page-content .page { /*border: 1px solid blue;*/ padding-top: 7px; padding-bottom: 7px; } .page-wrapper .page-content .footer { /*clear: left;*/ /*border: 1px solid yellow;*/ padding-top: 10px; } .page-wrapper .page-content .footer .footer-menu {/* list-style-type: none; display: block;*/ list-style: none; padding: 14px; } .page-wrapper .page-content .footer .footer-menu .menu-item { /*display: block;*/ margin-bottom: 7px; } .page-wrapper .page-content .footer .footer-menu .menu-item .menu-link { text-decoration: none; } .page-wrapper .page-content .footer .footer-menu .menu-item .copyright { margin-top: 14px; } /* ---- debug ) ---- */ /* -- Mobile Menu Wrapper -- */ body.debug .mobile-menu-wrapper { border: 1px solid blue; } body.debug .mobile-menu-wrapper .header { border: 1px solid green; } body.debug .mobile-menu-wrapper .hide-mobile-menu-button { border: 1px solid yellow; } body.debug .mobile-menu-wrapper .company-logo { border: 1px solid pink; } body.debug .mobile-menu-wrapper .menu-wrapper { border: 1px solid blue; } body.debug .mobile-menu-wrapper .menu { border: 1px solid brown; } body.debug .mobile-menu-wrapper .menu-item { border: 1px solid yellow; } body.debug .mobile-menu-wrapper .menu-link { border: 1px solid green; } /* -- Page Wrapper -- */ body.debug .page-wrapper { border: 1px solid red; } body.debug .page-wrapper .header { border: 1px solid green; min-height: 30px; } body.debug .page-wrapper .show-mobile-menu-button { border: 1px solid yellow;} body.debug .page-wrapper .company-logo { border: 1px solid pink; } body.debug .page-wrapper .menu-wrapper { border: 1px solid blue; } body.debug .page-wrapper .menu { border: 1px solid brown; } body.debug .page-wrapper .menu .menu-item { border: 1px solid yellow; } body.debug .page-wrapper .menu .menu-item .menu-link { border: 1px solid green; } body.debug .page-wrapper .page-content { border: 1px solid blue; } /* - Current page "magnification" - */ body[data-nf-currentPage="home"] [data-nf-pageLink="home"] { color: #477DBF; } /* light blue instead of gray for current page menu links */ body[data-nf-currentPage="produits"] [data-nf-pageLink="produits"] { color: #477DBF; } /* maj of 12/04/2017: needs to be adjusted as has now a submenu */ body[data-nf-currentPage="fonctions"] [data-nf-pageLink="fonctions"] { color: #477DBF; } body[data-nf-currentPage="support"] [data-nf-pageLink="support"] { color: #477DBF; } body[data-nf-currentPage="contact"] [data-nf-pageLink="contact"] { color: #477DBF; } body[data-nf-currentPage="sur-mesure"] [data-nf-pageLink="sur-mesure"] { color: #477DBF; } body[data-nf-currentPage="apps-frameworks"] [data-nf-pageLink="apps-frameworks"] { color: #477DBF; } body[data-nf-currentPage="plugins-materiel"] [data-nf-pageLink="plugins-materiel"] { color: #477DBF; } body[data-nf-currentPage="vente-location"] [data-nf-pageLink="vente-location"] { color: #477DBF; } body[data-nf-currentPage="partenaires"] [data-nf-pageLink="partenaires"] { color: #477DBF; } /* R: added on 10/04/2017 */ body[data-nf-currentPage="contenu-creation"] [data-nf-pageLink="contenu-creation"] { color: #477DBF; } body[data-nf-currentPage="vente-location"] [data-nf-pageLink="vente-location"] { color: #477DBF; } body[data-nf-currentPage="recherche-developpement"] [data-nf-pageLink="recherche-developpement"] { color: #477DBF; } body[data-nf-currentPage="interactivite"] [data-nf-pageLink="interactivite"] { color: #616B7A; } /* R: added on 19/12/2017 */ body[data-nf-currentPage="produits-vitrines"] [data-nf-pageLink="produits-vitrines"] { color: #477DBF; } body[data-nf-currentPage="produits-deepframe"] [data-nf-pageLink="produits-deepframe"] { color: #477DBF; } body[data-nf-currentPage="produits-scenes"] [data-nf-pageLink="produits-scenes"] { color: #477DBF; } body[data-nf-currentPage="produits-brume"] [data-nf-pageLink="produits-brume"] { color: #477DBF; } body[data-nf-currentPage="produits-tulle"] [data-nf-pageLink="produits-tulle"] { color: #477DBF; } body[data-nf-currentPage="produits-pop3"] [data-nf-pageLink="produits-pop3"] { color: #477DBF; } body[data-nf-currentPage="produits-hd3"] [data-nf-pageLink="produits-hd3"] { color: #477DBF; } body[data-nf-currentPage="produits-xl3"] [data-nf-pageLink="produits-xl3"] { color: #477DBF; } body[data-nf-currentPage="produits-xxl3"] [data-nf-pageLink="produits-xxl3"] { color: #477DBF; } body[data-nf-currentPage="produits-diamond"] [data-nf-pageLink="produits-diamond"] { color: #477DBF; } /* ---- structure ( vertical & horizontal sections behavior ) ---- */ /* vertical section ( colored - can 'inward' or 'outward', former inner shadow, latter outer, both background anim ) */ .section { /*border: 1px solid red;*/ } .vsection { /*padding-top: 20px; padding-bottom: 20px;*/ } /* DEBUGGING PADDING ;) TODO: re-add some padding, ex: for footer*/ .vsection.inward { } .lightTheme .vsection.insetShadows { box-shadow: inset 0 0 1.25rem rgba(157, 165, 171, 0.51); } /* top & bottom */ .lightTheme .vsection.inward { background-color: #F3F3F3; color: yellow; } /* light theme */ /* WIP: inset shadows for those who wants, top & bottom or just either */ .darkTheme .vsection.inward { background-color: #1D1E1F; color: blue; } /* dark theme */ .vsection.outward { } .lightTheme .vsection.outward { background-color: #FFFFFF; color: green } /* light theme */ .darkTheme .vsection.outward { background-color: #151415; color: orange } /* dark theme */ /* horizontally centered section ( transparent - may have a scroll effect on background or pseudo element ) */ .hsection { /*border: 1px solid red;*/ } /* R: adapt for other devices */ /* R: for big screens, we have a fixed width & centered section, for smallers, it fits 100% width */ /* full page content - ex: header img/animation/video, some page links, clients, quotes, .. */ .hsection.header { } /* or */ /* ( half-width - for bigger screens ) sections - ex: infos, video, image or images slider, specs, .. */ /* R: from the header menu - which is 'outward' */ /* top page header is inward */ /* then it's altered ( .. )*/ /* ---- section templates ( same as in the Illustator reference ) file ---- */ .vsection.TemplateModelTitle { text-align: center; font-size: 22pt; } /* -- Hero -- */ .hsection[data-nf-templateModel^="Hero"] { /*width: 100%;*/ /*auto;*/ /* auto fill screen width */ border: none; /* don't show ugly red dev borders */ } /* - Type1 - */ /* .hsection[data-nf-templateModel="Hero_type1"]{ min-height: 300px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="Hero_type1"] .subtitle { width: 100%; text-align: center; margin-top: 60px; } .hsection[data-nf-templateModel="Hero_type1"] .title { width: 100%; text-align: center; margin-top: 10px; } .hsection[data-nf-templateModel="Hero_type1"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Hero_type1"]{ min-height: 300px; /*TODO: adjust & @media min-height for devices not supporting viewport stuff */ /*height: 70vh;*/ height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Hero_type1"] .subtitle { text-align: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type1"] .title { margin-top: 10px; text-align: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type1"] .link { border: 1px solid gray; padding: 5px; margin-top: 40px; } /* addition of 24/06/2017 & 26/06/2017 - Hero_type6 */ .hsection[data-nf-templateModel="Hero_type6"]{ min-height: 300px; /*TODO: adjust & @media min-height for devices not supporting viewport stuff */ /*height: 70vh;*/ height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Hero_type6"] .subtitle { text-align: center; margin-left: 2%; margin-right: 2%; /* next to this are additionq for title-only new style */ font-size: 4vw; color: white; } .hsection[data-nf-templateModel="Hero_type6"] .title { /*margin-top: 10px;*/margin-top: -200px; text-align: center; margin-left: 2%; margin-right: 2%; /* next to this are additionq for title-only new style */ font-size: 8vw; color: white; } .hsection[data-nf-templateModel="Hero_type6"] .link { border: 1px solid gray; padding: 5px; margin-top: 40px; } /* currently needed for backgrounds */ .vsection[data-nf-templateModel="Hero_type6"].pop3background { background: url(./../assets/images/pagePOP3/HeroPOP3.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].hd3background { background: url(./../assets/images/pageHD3/HeroHD3.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].xl3background { background: url(./../assets/images/pageXL3/HeroXL3.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].xxl3background { background: url(./../assets/images/pageSCAND180XXL/HeroXXL3.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].xxl3background .title { /*margin-top: 10px;*/margin-top: -400px; } .hsection[data-nf-templateModel="Hero_type6"].deepframebackground { background: url(./../assets/images/pageDeepframe/HeroDeepframe.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].tullebackground { background: url(./../assets/images/pageTulle/HeroTulle.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].fogscreenbackground { background: url(./../assets/images/pageFogScreen/HeroFogScreen.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].kinomobackground { background: url(./../assets/images/pageKinomo2/HeroKinomo.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].pyramidesbackground { background: url(./../assets/images/pagePyramides/HeroPyramides.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="Hero_type6"].diamondbackground { background: url(./../assets/images/pageDiamond/HeroDiamond.jpg); background-size: cover; background-position: center center; } /* while the above full work, the below versions also work fullpage ( on .vsections instead of .hsections ) */ .vsection.pop3background { background: url(./../assets/images/pagePOP3/HeroPOP3.jpg); background-size: cover; background-position: center center; } .vsection.hd3background { background: url(./../assets/images/pageHD3/HeroHD3.jpg); background-size: cover; background-position: center center; } .vsection.xl3background { background: url(./../assets/images/pageXL3/HeroXL3.jpg); background-size: cover; background-position: center center; } .vsection.vitrinesbackground { background: url(./../assets/images/pageVitrines/HeroVitrines.jpg); background-size: cover; background-position: center center; } .vsection.scenesbackground { background: url(./../assets/images/pageScenes/HeroScenes.jpg); background-size: cover; background-position: center center; } .vsection.xxl3background { background: url(./../assets/images/pageSCAND180XXL/HeroXXL3.jpg); background-size: cover; background-position: center center; } .vsection.xxl3background .hsection[data-nf-templateModel="Hero_type6"] .title { /*margin-top: 10px;*/margin-top: -400px; } .vsection.deepframebackground { background: url(./../assets/images/pageDeepframe/HeroDeepframe.jpg); background-size: cover; background-position: center center; } .vsection.tullebackground { background: url(./../assets/images/pageTulle/HeroTulle.jpg); background-size: cover; background-position: center center; } .vsection.fogscreenbackground { background: url(./../assets/images/pageFogScreen/HeroFogScreen.jpg); background-size: cover; background-position: center center; } .vsection.kinomobackground { background: url(./../assets/images/pageKinomo2/HeroKinomo.jpg); background-size: cover; background-position: center center; } .vsection.pyramidesbackground { background: url(./../assets/images/pagePyramides/HeroPyramides.jpg); background-size: cover; background-position: center center; } .vsection.diamondbackground { background: url(./../assets/images/pageDiamond/HeroDiamond.jpg); background-size: cover; background-position: center center; } /* - Type2 - */ /* .hsection[data-nf-templateModel="Hero_type2"]{ min-height: 300px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="Hero_type2"] .title { width: 100%; text-align: center; margin-top: 60px; } .hsection[data-nf-templateModel="Hero_type2"] .subtitle { width: 100%; text-align: center; margin-top: 10px; } .hsection[data-nf-templateModel="Hero_type2"] .link { padding: 5px; display: inline-block; margin-top: 100px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Hero_type2"]{ min-height: 300px; height: 70vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Hero_type2"] .title { text-align: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type2"] .subtitle { margin-top: 10px; text-align: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type2"] .link { position: absolute; bottom: 10%; } /* - Type3 - */ /* .hsection[data-nf-templateModel="Hero_type3"]{ min-height: 300px; text-align: left; padding-left: 10%; padding-right: 10px;} .hsection[data-nf-templateModel="Hero_type3"] .title { width: 100%; text-align: left; margin-top: 60px; } .hsection[data-nf-templateModel="Hero_type3"] .subtitle { width: 100%; text-align: left; margin-top: 10px; } .hsection[data-nf-templateModel="Hero_type3"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Hero_type3"]{ min-height: 300px; height: 70vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hsection[data-nf-templateModel="Hero_type3"] .title { margin-left: 10%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type3"] .subtitle { margin-top: 10px; margin-left: 10%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type3"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; margin-left: 10%; position: absolute; bottom: 20%; } /* - Type4 - */ /* .hsection[data-nf-templateModel="Hero_type4"]{ min-height: 300px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="Hero_type4"] .title { width: 100%; text-align: center; margin-top: 110px; } .hsection[data-nf-templateModel="Hero_type4"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 50px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Hero_type4"]{ min-height: 300px; height: 70vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Hero_type4"] .title { text-align: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Hero_type4"] .link { border: 1px solid gray; padding: 5px; position: absolute; bottom: 20%; } /* - Type5 - */ /* .hsection[data-nf-templateModel="Hero_type5"]{ min-height: 300px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="Hero_type5"] .title { width: 100%; text-align: center; margin-top: 130px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Hero_type5"]{ min-height: 300px; height: 70vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Hero_type5"] .title { text-align: center; margin-left: 2%; margin-right: 2%; } /* Hero backgrounds & background styles */ .HeroAbstract { background: url(./../assets/images/abstractBackgrounds/Hero.jpg); background-size: cover; /*background-attachment: fixed;*/ /*background-position: top left;*/ } .HeroFixedAbstract { background: url(./../assets/images/abstractBackgrounds/Hero.jpg); background-size: cover; background-attachment: fixed; background-position: top left; } .HeroAbstract .orbisCSgrey_text,.HeroFixedAbstract .orbisCSgrey_text { color: #F2F2F2; /* override default grey to make text stand out dark background */ } /* -- Header -- */ .hsection[data-nf-templateModel^="Header"] { /*width: 100%;*/ /*auto;*/; /* auto fill screen width */ border: none; /* don't show ugly red dev borders */ } /* - Type1 - */ /* .hsection[data-nf-templateModel="Header_type1"]{ min-height: 250px; text-align: left; padding-left: 10%; padding-right: 10px; padding-bottom: 30px; } .hsection[data-nf-templateModel="Header_type1"] .title { width: 50%; text-align: left; margin-top: 40px; font-size: 18pt; } .hsection[data-nf-templateModel="Header_type1"] .subtitle { width: 100%; text-align: left; margin-top: 10px; font-size: 12pt; } .hsection[data-nf-templateModel="Header_type1"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 20px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Header_type1"]{ min-height: 250px; min-height: 45vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hsection[data-nf-templateModel="Header_type1"] .title { margin-left: 10%; margin-right: 2%; width: 50%; /* half the width to keep text on multiple lines */ } .hsection[data-nf-templateModel="Header_type1"] .subtitle { margin-left: 10%; margin-right: 2%; margin-top: 10px; font-size: 12pt; } .hsection[data-nf-templateModel="Header_type1"] .link { margin-left: 10%; margin-right: 2%; border: 1px solid gray; padding: 5px; margin-top: 40px; } /* - Type4 - */ /* .hsection[data-nf-templateModel="Header_type4"]{ min-height: 250px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="Header_type4"] .title { width: 100%; text-align: center; margin-top: 100px; } .hsection[data-nf-templateModel="Header_type4"] .subtitle { width: 100%; text-align: center; margin-top: 10px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Header_type4"]{ min-height: 250px; min-height: 45vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Header_type4"] .title { text-align: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Header_type4"] .subtitle { text-align: center; margin-left: 2%; margin-right: 2%; margin-top: 10px; } /* - Type5 - */ /* .hsection[data-nf-templateModel="Header_type5"]{ min-height: 250px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="Header_type5"] .title { width: 100%; text-align: center; margin-top: 60px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Header_type5"]{ min-height: 250px; min-height: 45vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Header_type5"] .title { text-align: center; margin-left: 2%; margin-right: 2%; } /* - Type6 - */ /* .hsection[data-nf-templateModel="Header_type6"]{ min-height: 250px; text-align: left; padding-left: 10%; padding-right: 10px;} .hsection[data-nf-templateModel="Header_type6"] .title { width: 100%; text-align: left; margin-top: 70px; } .hsection[data-nf-templateModel="Header_type6"] .subtitle { width: 100%; text-align: left; margin-top: 10px; } */ /* flexbox version */ .hsection[data-nf-templateModel="Header_type6"]{ min-height: 250px; min-height: 45vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hsection[data-nf-templateModel="Header_type6"] .title { margin-left: 10%; margin-right: 2%; font-size: 35pt; } .hsection[data-nf-templateModel="Header_type6"] .subtitle { margin-left: 10%; margin-right: 2%; font-size: 16pt; } /* Header backgrounds & background styles */ .HeaderPolygon { background: url(./../assets/images/abstractBackgrounds/header.jpg); background-size: cover; /*background-attachment: fixed;*/ /*background-position: top left;*/ } .HeaderOrb { background: url(./../assets/images/halfOrb_forWhiteBackground.png); background-size: cover; /*background-attachment: fixed;*/ /*background-position: top left;*/ } .HeaderAbstract { background: url(./../assets/images/abstractBackgrounds/Hero.jpg); background-size: cover; /*background-attachment: fixed;*/ /*background-position: top left;*/ } .HeaderAbstract .orbisCSgrey_text { color: #F2F2F2; /* override default grey to make text stand out dark background */ } /* added on 11/05/2017 for Cube Creative ;p */ .HeaderCubeCreative { background: url(./../assets/images/partnersBackgrounds/CubeCreative_Hero.png); background-size: cover; /*background-attachment: fixed;*/ background-position: center center; } /*.HeaderCubeCreative:before { content: " "; background: url(./../assets/images/pageContenuCreation/ContenuCreation_logo_cubeCreative_logotype2_transparentBackground.png); position: absolute; bottom: 20px; left: 30px; background-size: 200px; width: 200px; height: 60px; }*/ .CopyrightCubeCreative:before { content: " "; background: url(./../assets/images/pageContenuCreation/ContenuCreation_logo_cubeCreative_logotype2_transparentBackground.png); position: absolute; bottom: 10px; left: 20px; background-size: 150px; width: 150px; height: 60px; } /* added on 25/05/2017 for Cube Creative ;p */ .HeaderCubeCreativeLocals { background: url(./../assets/images/pageContenuCreation/CubeCreative_locals.jpg); background-size: cover; /*background-attachment: fixed;*/ background-position: center center; } /* addition of 10/07/2017 - more backgrounds for some pages */ .HeaderSupport { color: white; background: url(./../assets/images/pageSupport/HeroSupport.jpg); background-size: cover; background-position: center center; /*background-attachment: fixed;*/ /*background-position: top left;*/ } .HeaderVenteLeasingLoc { color: white; background: url(./../assets/images/pageVenteLeasingLocation/Hero_Job.jpg); background-size: cover; background-position: center center; /*background-attachment: fixed;*/ /*background-position: top left;*/ } .HeaderInteractive { color: white; background: url(./../assets/images/pageFonctions/Hero_Interactivite_notFromRF_usd.jpg); background-size: cover; /*background-attachment: fixed;*/ /*background-position: top left;*/ } /* -- FullWidth Texts -- */ /* - Type1 - */ /* .hsection[data-nf-templateModel="FullWidthTexts_type1"]{ text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .title { width: 100%; text-align: center; margin-top: 25px; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 11pt; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .text { width: 100%; text-align: center; margin-top: 10px; padding-bottom: 30px; font-size: 10pt; } */ /* flexbox version */ .hsection[data-nf-templateModel="FullWidthTexts_type1"]{ min-height: 250px; min-height: 35vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .title { width: 70%; text-align: center; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 11pt; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .text { width: 70%; text-align: center; margin-top: 10px; font-size: 10pt; } /* size adjust wip */ .subtitle { } @media screen and (min-width: 1000px){ .hsection[data-nf-templateModel="FullWidthTexts_type1"] .subtitle { font-size: 20pt; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .text { font-size: 18pt; } } @media screen and (min-width: 600px){ .hsection[data-nf-templateModel="FullWidthTexts_type1"] .subtitle { font-size: 17pt; } .hsection[data-nf-templateModel="FullWidthTexts_type1"] .text { font-size: 15pt; } } /* - Type2 - */ /* .hsection[data-nf-templateModel="FullWidthTexts_type2"]{ min-height: 200px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="FullWidthTexts_type2"] .title { width: 100%; text-align: center; margin-top: 60px; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type2"] .underlined { border-bottom: 1px solid #477DBF; padding-bottom: 2px; } .hsection[data-nf-templateModel="FullWidthTexts_type2"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 10pt; } */ /*flexbox version */ .hsection[data-nf-templateModel="FullWidthTexts_type2"]{ min-height: 250px; min-height: 35vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="FullWidthTexts_type2"] .title { width: 70%; text-align: center; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type2"] .underlined { border-bottom: 1px solid #477DBF; padding-bottom: 2px; /*margin-top: 110px;*/ } .hsection[data-nf-templateModel="FullWidthTexts_type2"] .subtitle { width: 70%; text-align: center; margin-top: 10px; font-size: 10pt; } /* - Type3 - */ /* .hsection[data-nf-templateModel="FullWidthTexts_type3"]{ min-height: 200px; text-align: center; padding-left: 10px; padding-right: 10px; } .hsection[data-nf-templateModel="FullWidthTexts_type3"] .title { width: 100%; text-align: center; margin-top: 20px; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type3"] .underlined { border-bottom: 1px solid #477DBF; padding-bottom: 2px; } .hsection[data-nf-templateModel="FullWidthTexts_type3"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 10pt; } */ /* flexbox version */ .hsection[data-nf-templateModel="FullWidthTexts_type3"]{ min-height: 250px; min-height: 35vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="FullWidthTexts_type3"] .title { width: 70%; text-align: center; font-size: 15pt; margin-top: 5%; } .hsection[data-nf-templateModel="FullWidthTexts_type3"] .underlined { border-bottom: 1px solid #477DBF; padding-bottom: 2px; } .hsection[data-nf-templateModel="FullWidthTexts_type3"] .subtitle { width: 70%; text-align: center; margin-top: 10px; font-size: 10pt; } /* - Type4 - */ /* .hsection[data-nf-templateModel="FullWidthTexts_type4"]{ min-height: 200px; text-align: left; padding-left: 10%; padding-right: 10px;} .hsection[data-nf-templateModel="FullWidthTexts_type4"] .title { width: 100%; text-align: left; margin-top: 60px; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type4"] .subtitle { width: 100%; text-align: left; margin-top: 10px; font-size: 10pt; } .hsection[data-nf-templateModel="FullWidthTexts_type4"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; font-size: 10pt; } */ /* flexbox version */ .hsection[data-nf-templateModel="FullWidthTexts_type4"]{ padding-top: 30px; padding-bottom: 30px; } /* compensate for removeal of external margins used for debugging */ .hsection[data-nf-templateModel="FullWidthTexts_type4"]{ min-height: 250px; min-height: 35vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hsection[data-nf-templateModel="FullWidthTexts_type4"] .title { margin-left: 10%; margin-right: 2%; width: 50%; font-size: 24pt; /* TODO: resize for tinier devices */ } .hsection[data-nf-templateModel="FullWidthTexts_type4"] .subtitle { margin-left: 10%; margin-right: 2%; width: 50%; margin-top: 10px; font-size: 12pt; /* TODO: resize for tinier devices */ } .hsection[data-nf-templateModel="FullWidthTexts_type4"] .link { margin-left: 10%; border: 1px solid gray; padding: 5px; margin-top: 40px; font-size: 10pt; } /* addition of 27/06/2017 to have hoverable links */ .hsection[data-nf-templateModel="FullWidthTexts_type4"] .link:hover { transition: all .2s; background: gray; color: white; } /* adjustement of 11/04/2017: adding the least elements possible ( none ) & the least mods possible ( no structure change, ust css ) */ .hsection[data-nf-templateModel="FullWidthTexts_type4"].txtBackgroundOverlay .title { padding: 10px; background: rgba(200, 200, 200, .2); width: auto; } .hsection[data-nf-templateModel="FullWidthTexts_type4"].txtBackgroundOverlay .subtitle { padding: 10px; background: rgba(200, 200, 200, .2); } //.hsection[data-nf-templateModel="FullWidthTexts_type4"].txtBackgroundOverlay .link { background: rgba(200, 200, 200, .2); } /* not mandatory */ /* - Type4Alt - */ /* .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"]{ min-height: 200px; text-align: right; padding-right: 10%; padding-left: 10px;} .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .title { width: 100%; text-align: right; margin-top: 60px; font-size: 15pt; } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .subtitle { width: 100%; text-align: right; margin-top: 10px; font-size: 10pt; } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; font-size: 10pt; } */ /* flexbox version */ .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"]{ padding-top: 30px; padding-bottom: 30px; } /* compensate for removeal of external margins used for debugging */ .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"]{ min-height: 250px; min-height: 35vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .title { text-align: right; margin-left: 2%; margin-right: 10%; /*width: 50%; -> messes up things */ font-size: 24pt; /* TODO: resize for tinier devices */ } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .subtitle { text-align: right; margin-left: 2%; margin-right: 10%; width: 50%; margin-top: 10px; font-size: 12pt; /* TODO: resize for tinier devices */ } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .link { margin-right: 10%; border: 1px solid gray; padding: 5px; margin-top: 40px; font-size: 10pt; } /* addition of 26/°6/2017 to have hoverable links */ .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"] .link:hover { transition: all .2s; background: gray; color: white; } /* adjustement of 11/04/2017: adding the least elements possible ( none ) & the least mods possible ( no structure change, ust css ) */ .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"].txtBackgroundOverlay .title { padding: 10px; background: rgba(200, 200, 200, .2); width: auto; } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"].txtBackgroundOverlay .subtitle { padding: 10px; background: rgba(200, 200, 200, .2); } .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"].txtBackgroundOverlay .link { background: rgba(200, 200, 200, .4); border: none; color: #616B7A; /*color: #477DBF; orbisLightBLue_text*/ } /* not mandatory */ /* addition àf 26/06/2017 ot have hoverable links */ .hsection[data-nf-templateModel="FullWidthTexts_type4Alt"].txtBackgroundOverlay .link:hover { background: none; border: rgba(200, 200, 200, .4); color: #616B7A; /*color: #477DBF; orbisLightBLue_text*/ } /* not mandatory */ /* 3rdParties backgrounds ( use fullWidthTexts layout ) */ .epocBackground { background: url(./../assets/images/3rdParties/3rdParties_Epoc.png); background-size: cover; background-position: center center; background-repeat: no-repeat; /* override needed: */ background-size: 900px; } .leapBackground { background: url(./../assets/images/3rdParties/3rdParties_Leap.png); background-size: cover; background-position: center center; background-repeat: no-repeat; /*override needed: */ background-size: 500px; background-position: 50% 91%; } .myoBackground { background: url(./../assets/images/3rdParties/3rdParties_Myo.png); background-size: cover; background-position: center center; background-repeat: no-repeat; /* override needed: */ background-size: 700px; } .kinectBackground { background: url(./../assets/images/3rdParties/3rdParties_Kinect.png); background-size: cover; background-position: center 150px; background-repeat: no-repeat; /* override needed: */ background-size: 724px;} /* TODO: adjust for mobile */ /* Dreamoc's backgrounds --> according to the paths, no longer used ? => find time to investigate ! .. */ .dreamocPOP3Background { background: white url(./../assets/products/Dreamoc_POP3/images/Dreamoc_POP3_banner.jpg); background-size: contain; background-position: right center; background-repeat: no-repeat; } .dreamocHD3Background { background: white url(./../assets/products/Dreamoc_HD3/images/Dreamoc_HD3_banner.png); background-size: contain; background-position: left center; background-repeat: no-repeat; } .dreamocXL3Background { background: white url(./../assets/products/Dreamoc_XL3/images/Dreamoc_XL3_banner.png); background-size: contain; background-position: right center; background-repeat: no-repeat; } .dreamocSCAND180XXLBackground { background: white url(./../assets/products/Dreamoc_SCAND180XXL/images/Dreamoc_SCAND180XXL_banner.png); background-size: contain; background-position: left center; background-repeat: no-repeat; } /* - Home banners backgrounds - */ .bannerProduitBackground { background: url(./../assets/images/pageHome/Home_banner_contenuCreation2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ background-position: 75% center; } .bannerFonctionsBackground { background: url(./../assets/images/pageHome/Home_banner_fonctions.png); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } .bannerSurMesureBackground { background: url(./../assets/images/pageHome/Home_banner_surMesure.png); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } .bannerAddonsMaterielBackground { background: url(./../assets/images/pageHome/Home_banner_addonsMateriel_Alt.png); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } .bannerFrameworksBackground { background: url(./../assets/images/pageFonctions/Fonctions_banner_frameworks.png); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } .devenirPartenaireBackground { background: url(./../assets/images/pageHome/Home_banner_devenirPartenaire.png); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } .venteLocationBackground { background-color: white; background: url(./../assets/images/halfOrb_forWhiteBackground.png); /*background: url(./../assets/images/banner_venteLocation.png);*/ background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } .venteLocationBackground2 { background-color: white !important; background: url(./../assets/images/halfOrb_forWhiteBackground.png); } /* adjustement of 11/04/2017: adding our partner CubeCreative's home banner background */ .bannerContenuCreationBackground { background: url(./../assets/images/pageHome/Home_banner_contenuCreation.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; /* override for mobile that renders nice anyway on desktop */ /*background-position: 75% center;*/ } /* - Mobile Split Test - */ /* .hsection[data-nf-templateModel="MobileSplitTest"]{ min-height: 200px; text-align: left; padding-left: 10%; padding-right: 10px;} .hsection[data-nf-templateModel="MobileSplitTest"] .splitForMobile { width: 48%; border: 1px solid yellow; positon: relative; float: left; } .hsection[data-nf-templateModel="MobileSplitTest"] .title { width: 100%; text-align: left; margin-top: 60px; font-size: 15pt; } .hsection[data-nf-templateModel="MobileSplitTest"] .subtitle { width: 100%; text-align: left; margin-top: 10px; font-size: 10pt; } .hsection[data-nf-templateModel="MobileSplitTest"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; font-size: 10pt; } */ .hsection[data-nf-templateModel="MobileSplitTest"]{ min-height: 250px; text-align: center; } .hsection[data-nf-templateModel="MobileSplitTest"] .splitForMobile { width: calc(50% - 2px); border: 1px solid yellow; positon: relative; float: left; /*padding-left: 10%; padding-right: 10%;*/ } .hsection[data-nf-templateModel="MobileSplitTest"] .title { width: 90%; text-align: center; margin-top: 60px; font-size: 15pt; padding-left: 5% } .hsection[data-nf-templateModel="MobileSplitTest"] .subtitle { width: 90%; text-align: center; margin-top: 10px; font-size: 10pt; padding-left: 5% } .hsection[data-nf-templateModel="MobileSplitTest"] .link { border: 1px solid gray; padding: 5px; display: inline-block; margin-top: 40px; font-size: 10pt; margin-bottom: 20px; } /* -- TopTexts & Product -- */ /* - Type1 - */ /* - Type2 - */ /* - Type3 - */ /* -- LeftTexts & Product -- */ /* - Type0 - */ /* R: Can have class "mobileReversed", while its halves can have "opaqueBackground", "halfTransparentBackground", & "imageBackground" The "opaque" backgrounds are the same as those used for the vsections inwards & outward lightTheme: inw :#F3F3F3 / rgb(243, 243, 243) / hsl(0, 0%, 95%) , outw: #FFFFFF / rgb(255, 255, 255) / hsl(0, 100%, 100%) The "halfTransparent" backgrounds are using the same colors as above but with rgba instead of hex/rgb, to have certain transparency - we could provide 33, 50, 75 % opacity The "image" backgrounds are "generic" backgrounds used across our documents ( the zoomed orb, triangles, .. ) - declinations with & without background 'd be nice For the split's "infos", we have 3 main layout alignements: - topped ( start from top - the default ) - TODO: bottomed ( start from bottom ) - TODO: centered vertically For the split' "medias", we have 4 main layout alignements: - TODO: topped ( aligned to top of parent, resizing to fit most space available ) - TODO: centered ( aligned to middle of parent, resizing to fit most space available ) - TODO: fullsized ( takes up all the available space while the background position& scaling is adjusted ? ) - TODO: bottomed ( aligned to bottom of parent, resizing to fit most space available ) */ /* below background defs are to be moved elsewhere aboe when I'm done with those .. Also, R Shift + Click in color sqaure in the dev tool to display color ref in other systems ( hex / rgb / hsl ) */ .lightInwBackground { background-color: #F3F3F3; } .lightInwBackground_30 { background-color: rgba(243, 243, 243, 0.3); } .lightInwBackground_50 { background-color: rgba(243, 243, 243, 0.5); } .lightInwBackground_70 { background-color: rgba(243, 243, 243, 0.7); } .lightInwBackground_90 { background-color: rgba(243, 243, 243, 0.9); } .lightOutwwBackground { background-color: #FFFFFF; } .lightOutwwBackground_30 { background-color: rgba(255, 255, 255, 0.3); } .lightOutwwBackground_50 { background-color: rgba(255, 255, 255, 0.5); } .lightOutwwBackground_70 { background-color: rgba(255, 255, 255, 0.7); } .lightOutwwBackground_90 { background-color: rgba(255, 255, 255, 0.9); } /* quick test: displaying nothing if element's empty ( R: doesn't work with new lines, but supposely do with inline comments .. ) -> 'll allow us to nide the templates needed by 2 */ .noneIfEmpty:empty { display: none; } /* - Team - */ .hsection[data-nf-templateModel="Team_type1"]:after { content: ""; } /* hide template label */ .hsection[data-nf-templateModel="Team_type1"] { border: 1px solid transparent; } .hsection[data-nf-templateModel="Team_type1"] .title { text-align: center; margin-top: 15px; font-size: 15pt; } .hsection[data-nf-templateModel="Team_type1"] .subtitle { text-align: center; margin-top: 10px; font-size: 13pt; } .hsection[data-nf-templateModel="Team_type1"] .membersList { list-style: none; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px; margin-top: 20px; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member { /*width: 300px; */ /*border: 1px solid blue;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .picWrapper { /*width: 100%;*/ height: 150px; /*border: 1px solid red;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .picWrapper img { width: 150px; /*border: 1px solid blue;*/ height: 150px; border: 1px solid transparent; border-radius: 50%; } /*@media only screen and (max-width: 600px) {.hsection[data-nf-templateModel="Team_type1"] .membersList .member .picWrapper img { width: 75px; height: 75px; border: 1px solid transparent; border-radius: 50%; }} */ .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper { width: 250px; height: 280px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .title { font-size: 18px; font-size: 18px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 0px; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .subtitle { font-size: 16px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; text-align: center; height: 0px; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .text { font-size: 14px; text-align: center; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } /* adjustements for without briefs version */ .hsection.membersWithoutBrief[data-nf-templateModel="Team_type1"] .membersList .member { margin-bottom: 25px; } .hsection.membersWithoutBrief[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper { height: 90px; margin-top: 7px; } .hsection.membersWithoutBrief[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .text { display: none; } /* - Support - */ .hsection[data-nf-templateModel="Support_type1"] .title { text-align: center; padding-top: 20px; /*margin-left: 2%; margin-right: 2%; -> te re-add but right now messes with the "|" between filetype & lang */ } .hsection[data-nf-templateModel="Support_type1"] .subtitle { text-align: center; } .hsection[data-nf-templateModel="Support_type1"] .productTitle { margin-left: 10%; margin-top: 30px; position: relative; /* necessary for pseudo elements positionning */ } .hsection[data-nf-templateModel="Support_type1"] .productTitle:after { left: -5%; width: 100%; border-bottom: 1px solid #477DBF; content: "\ "; position: absolute; top: calc(50% - 0.5px); } .hsection[data-nf-templateModel="Support_type1"] .productTitle:before { position: absolute; padding-left: 15px; padding-right: 15px; background: white; content: attr(data-nf-name); z-index: 1; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; padding-bottom: 20px; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: calc(50% - 40px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st h2 { font-size: 20px; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st .sub { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 7px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: end; align-self: flex-end; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st .sub h3 { font-size: 16px; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st .sub ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st .sub ul li { margin-left: 5px; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st .sub ul li:not(:nth-child(1)):before { content: " | "; position: relative; left: -1px; } .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem .main1st .sub ul li a { text-decoration: none; color: #477DBF; } /* - Services - */ .hsection[data-nf-templateModel="Services_type1"]:after { content: ""; } /* hide template label */ .hsection[data-nf-templateModel="Services_type1"] { border: 1px solid transparent; } .hsection[data-nf-templateModel="Services_type1"] .title { text-align: center; margin-top: 15px; font-size: 15pt; } .hsection[data-nf-templateModel="Services_type1"] .subtitle { text-align: center; margin-top: 10px; font-size: 13pt; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="Services_type1"] .servicesList { list-style: none; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 20px; margin-top: 20px; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service { /*width: 300px; */ /*border: 1px solid blue;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 20px; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .picWrapper { /*width: 100%;*/ height: 150px; /*border: 1px solid red;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .picWrapper img { width: 150px; /*border: 1px solid blue;*/ height: 100%; /*background-color: gray; when present, adds a thin gray border around pic */ /*border: 1px solid transparent; would render nicely */ border-radius: 50%; -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); /* make the service pics a little bit bigger - TODO: mod imgs when I got time to .. */ } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper { width: 250px; /*height: 280px;*/ /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper .title { font-size: 15px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper .tiretSpacer { /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; /*flex-grow: 1;*/ border-bottom: 1px solid #477DBF; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; text-align: center; height: 10px; width: 40px; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper .text { font-size: 14px; text-align: left; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 14px; margin-left: 4%; margin-right: 2%; } /* - WIP: compensate for removal of debug external margins top & bottom - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].notPadded { padding-top: 0px; padding-bottom: 0px; } /* not to make split images "float" unless desired .. */ /* - Partnership - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].partnership { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].partnership .split.partnership.firstHalf { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].partnership .split.partnership.secondHalf { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].partnership .split.partnership .title { margin-left: 40px; margin-top: 40px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].partnership .split.partnership .subtitle { margin-left: 40px; margin-bottom: 40px; font-size: 12pt; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].partnership .split.partnership .link { margin: 40px; } /* R: defines the height of the container ( half section ) */ /* - end partnership - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"]{ /*height: 400px;*/ /* R: height 400px removed to test without .. */ display: -webkit-box; display: -ms-flexbox; display: flex; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .firstHalf { width: 50%; /*height: 100%;*/ /*background-color: red;*/ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .secondHalf { width: 50%; /*height: 100%;*/ /*background-color: pink;*/ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos { padding: 20px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.centered .link { display: table; /* hack to allow it to have just padding */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.bottomed { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /* 'll lie here for now .. */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs .title { font-size: 18pt; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs .title span { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs .subtitle { font-size: 14pt; margin-top: 15px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos .specsList { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 10px; padding-bottom: 10px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos .specsList .spec { padding-top: 1px; padding-bottom: 1px; /*list-style: none; display: flex; flex-direction: column;*/ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos .specsList .spec .spec-text { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos .specsList .spec .spec-text .spec-data { } /* - Support quickie ( banner ) - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs.support { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs.support .title { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;} .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs.support .subtitle { text-align: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos.specs.support a { margin-top: 20px; margin-bottom: 50px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split { overflow: hidden; } /* - Type0 - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .title { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .title:empty { display: none; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .subtitle { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .subtitle:empty { display: none; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .text { margin-bottom: 20px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .text:empty { display: none; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .link { border: 1px solid gray; padding: 5px; /*display: inline-block;*/ font-size: 10pt; } /* addition of 28/06/2017 to have hoverable links */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .link:hover { transition: all .2s; background: gray; color: white; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .link:empty { display: none; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media { } /*.hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media img { }*/ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.topAligned { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.topAligned img { /*width: 100%; height: auto;*/ max-width: 100%; background-color: green; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.centered img { width: 100%; height: auto; vertical-align: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.bottomed { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.bottomed img { width: 100%; height: auto; vertical-align: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.fullSized img { background-image: attr(data-nf-imgsrc url);/*url('./../assets/images/mockups/letterhead_businesscards_prod.png');*/ background-repeat: no-repeat; background-size: cover; background-position: top left; height: 100%; width: 100%; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.cover {} .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.cover img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; -o-object-position: center center; object-position: center center; /* R: adjust object position for different view */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.cover video { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; -o-object-position: center center; object-position: center center; /* R: adjust object position for different view */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.contain {} .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.contain img { -o-object-fit: contain; object-fit: contain; height: 100%; width: 100%; -o-object-position: center center; object-position: center center; /* R: adjust object position for different view */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.contain video { -o-object-fit: contain; object-fit: contain; height: 100%; width: 100%; -o-object-position: center center; object-position: center center; /* R: adjust object position for different view */ } /* addition of 24/06/2017 & 26/06/2017 - full background with white text to "normal" split img/txt */ /*.hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit { background: url(./../assets/images/pageContenuCreation/CubeCreative_GalleriesLafayetteL.jpg); background-size: cover; background-position: center center; }*/ /* awaiting a better solution ( ex: a better support of background-image: attr(attrName url); ) */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.pop3background { background: url(./../assets/images/pagePOP3/POP3_split_POP3specialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.hd3background { background: url(./../assets/images/pageHD3/HD3_split_HD3specialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.xl3background { background: url(./../assets/images/pageXL3/XL3_split_XL3specialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.xxl3background { background: url(./../assets/images/pageSCAND180XXL/SCAND180XXL_split_SCAND180XXLspecialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.deepframebackground { background: url(./../assets/images/pageDeepFrame/DeepFrame_split_DeepFramespecialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.tullebackground { background: url(./../assets/images/pageTulle/Tulle_split_TullespecialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.fogscreenbackground { background: url(./../assets/images/pageFogScreen/FogScreen_split_FogScreenspecialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.kinomobackground { background: url(./../assets/images/pageKinomo2/Kinomomemorable.jpg); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.pyramidesbackground { background: url(./../assets/images/pagePyramides/Pyramides_split_PyramidesspecialSplitFullBakground.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.diamondbackground { background: url(./../assets/images/pageDiamond/Diamond_split_DiamondspecialSplitFullBakground1.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.diamondbackground2 { background: url(./../assets/images/pageDiamond/Diamond_split_DiamondspecialSplitFullBakground2.png); background-size: cover; background-position: center center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split.media.centered img { opacity: 0; /* preload but don't display it */ } /* while the above full work, the below versions also work fullpage ( on .vsections instead of .hsections ) */ .vsection.backgroundAndColorSplit.pop3background { background: url(./../assets/images/pagePOP3/POP3_split_POP3specialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.hd3background { background: url(./../assets/images/pageHD3/HD3_split_HD3specialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.xl3background { background: url(./../assets/images/pageXL3/XL3_split_XL3specialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.xxl3background { background: url(./../assets/images/pageSCAND180XXL/SCAND180XXL_split_SCAND180XXLspecialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.deepframebackground { background: url(./../assets/images/pageDeepFrame/DeepFrame_split_DeepFramespecialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.tullebackground { background: url(./../assets/images/pageTulle/Tulle_split_TullespecialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.fogscreenbackground { background: url(./../assets/images/pageFogScreen/FogScreen_split_FogScreenspecialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.kinomobackground { background: url(./../assets/images/pageKinomo2/Kinomomemorable.jpg); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.pyramidesbackground { background: url(./../assets/images/pagePyramides/Pyramides_split_PyramidesspecialSplitFullBakground.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.diamondbackground { background: url(./../assets/images/pageDiamond/Diamond_split_DiamondspecialSplitFullBakground1.png); background-size: cover; background-position: center center; } .vsection.backgroundAndColorSplit.diamondbackground2 { background: url(./../assets/images/pageDiamond/Diamond_split_DiamondspecialSplitFullBakground2.png); background-size: cover; background-position: center center; } /* .vsection.backgroundAndColorSplit.deepframebackground::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right,#002f4b,#dc4225); opacity: .6; z-index: 2} */ .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.centered img { opacity: 0; /* preload but don't display it */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .title { color: white; width: 96%; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .subtitle { color: white; width: 96%; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .text { color: white; width: 96%; } /* the aboves edited for fullpage width */ .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .title { color: white; width: 96%; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .subtitle { color: white; width: 96%; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .text { color: white; width: 96%; } /* needed for to-white-gradient-backgrounds - ex XXL3 image */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .title.invertColor { color: black; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .subtitle.invertColor { color: black; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .text.invertColor { color: black; } /* the aboves edited for fullpage width */ .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .title.invertColor { color: black; width: 96%; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .subtitle.invertColor { color: black; width: 96%; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .text.invertColor { color: black; width: 96%; } /* - Type1 - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"]{ min-height: 300px; text-align: left; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"] .splitForMobile { width: calc(50% - 2px); border: 1px solid yellow; positon: relative; float: left; /*padding-left: 10%; padding-right: 10%;*/ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"] .title { width: 90%; text-align: left; margin-top: 60px; font-size: 15pt; padding-left: 5% } .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"] .subtitle { width: 90%; text-align: left; margin-top: 10px; font-size: 10pt; padding-left: 5% } .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"] .text { width: 90%; text-align: left; /*margin-top: 10px;*/ padding-bottom: 30px; font-size: 10pt; padding: 5%; padding-top: 10px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"] .media { width: 100%; text-align: center; display: block; vertical-align: center; padding-bottom: 30px; font-size: 10pt; min-height:200px; padding: 5%; } /* -- Partners -- */ /* - Type1 - */ .hsection[data-nf-templateModel="Partners_type1"]{ /*min-height: 50px*/; text-align: center; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Partners_type1"] .partnersList { width: 100%; text-align: left; /*margin-top: 20px;*/ display: inline-block; list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: distribute; align-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Partners_type1"] .partnersList .partner { padding: 15px; text-align: center; /*margin-top: 10px;*/ float: left; font-size: 20pt; } /* - Type2 - */ .hsection[data-nf-templateModel="Partners_type2"]{ /*min-height: 50px*/; text-align: center; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Partners_type2"] .title { width: 100%; text-align: center; margin-top: 15px; font-size: 15pt; /*padding-left: 5%;*/ margin-bottom: 10px; } .hsection[data-nf-templateModel="Partners_type2"] .partnersList { width: 100%; text-align: left; /*margin-top: 20px;*/ display: inline-block; list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: distribute; align-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Partners_type2"] .partnersList .partner { padding: 15px; text-align: center; /*margin-top: 10px;*/ float: left; font-size: 20pt; } /* - Type3 - */ .hsection[data-nf-templateModel="Partners_type3"]{ /*min-height: 50px*/; text-align: center; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Partners_type3"] .title { width: 100%; text-align: center; margin-top: 15px; font-size: 15pt; /*padding-left: 5%;*/ } .hsection[data-nf-templateModel="Partners_type3"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 10pt; /*padding-left: 5%*/ /*padding-left: 10px; padding-right: 10px;*/ margin-bottom: 10px; } .hsection[data-nf-templateModel="Partners_type3"] .partnersList { width: 100%; text-align: left; /*margin-top: 20px;*/ display: inline-block; list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: distribute; align-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Partners_type3"] .partnersList .partner { padding: 15px; text-align: center; /*margin-top: 10px;*/ float: left; font-size: 20pt; } /* addition of 01/06/2017: having the partners links images in grascale & colored on hover */ .desaturated { filter: grayscale(100%); transition: filter 1s linear; } .desaturated:hover { filter: grayscale(0%); } /* -- Clients -- */ /* - Type1 - */ .hsection[data-nf-templateModel="Clients_type1"]{ /*min-height: 50px*/; text-align: center; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Clients_type1"] .clientsList { width: 100%; text-align: left; /*margin-top: 20px;*/ display: inline-block; list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: distribute; align-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Clients_type1"] .clientsList .client { padding: 15px; text-align: center; /*margin-top: 10px;*/ float: left; font-size: 20pt; } /* - Type1Alt ( using images instead of text ) - */ .hsection[data-nf-templateModel="Clients_type1Alt"]:after { content: ""; } /* hide template label */ .hsection[data-nf-templateModel="Clients_type1Alt"] { border: none; } .hsection[data-nf-templateModel="Clients_type1Alt"]{ /*min-height: 50px*/; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Clients_type1Alt"] .title { width: 100%; text-align: center; margin-top: 15px; font-size: 15pt; /*padding-left: 5%;*/ font-weight: bolder; } .hsection[data-nf-templateModel="Clients_type1Alt"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 10pt; /*padding-left: 5%*/ /*padding-left: 10px; padding-right: 10px;*/ margin-bottom: 10px; } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList { width: 100%; /*margin-top: 20px;*/ /*display: inline-block; */ list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; /*justify-content: space-around;*/ -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*align-content: space-around;*/ -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client { padding: 15px; /*text-align: center;*/ /*margin-top: 10px;*/ /*float: left;*/ /*font-size: 20pt;*/ } /* - Type2 - */ .hsection[data-nf-templateModel="Clients_type2"]{ /*min-height: 50px*/; text-align: center; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Clients_type2"] .title { width: 100%; text-align: center; margin-top: 15px; font-size: 15pt; /*padding-left: 5%;*/ margin-bottom: 10px; } .hsection[data-nf-templateModel="Clients_type2"] .clientsList { width: 100%; text-align: left; /*margin-top: 20px;*/ display: inline-block; list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: distribute; align-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Clients_type2"] .clientsList .client { padding: 15px; text-align: center; /*margin-top: 10px;*/ float: left; font-size: 20pt; } /* - Type3 - */ .hsection[data-nf-templateModel="Clients_type3"]{ /*min-height: 50px*/; text-align: center; /*padding-left: 10%; padding-right: 10%; cause troubles */ padding-top: 25px; padding-bottom: 25px; } .hsection[data-nf-templateModel="Clients_type3"] .title { width: 100%; text-align: center; margin-top: 15px; font-size: 15pt; /*padding-left: 5%;*/ } .hsection[data-nf-templateModel="Clients_type3"] .subtitle { width: 100%; text-align: center; margin-top: 10px; font-size: 10pt; /*padding-left: 5%*/ /*padding-left: 10px; padding-right: 10px;*/ margin-bottom: 10px; } .hsection[data-nf-templateModel="Clients_type3"] .clientsList { width: 100%; text-align: left; /*margin-top: 20px;*/ display: inline-block; list-style: none; display: -moz-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: distribute; align-content: space-around; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="Clients_type3"] .clientsList .client { padding: 15px; text-align: center; /*margin-top: 10px;*/ float: left; font-size: 20pt; } /* - Footer ( NEW ) - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer { } /* additions of 17/12/2017 */ .vsection#footer { position: relative; background: #21252d; color: white; font-weight: bolder; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer::before { } .vsection#footer::before { content: 'placeholder'; color: transparent; position: absolute; top: -1px; left: 0px; width: 50%;/* 37.5% reverse golden ration ;p */ /* 62.5% golden ration */ border-top: 3px solid #477DBF; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: distribute; justify-content: space-around; list-style: none; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item { display: -webkit-box; display: -ms-flexbox; display: flex; height: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 2%; margin-right: 2%; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item a { text-decoration: none; text-align: center; /* text-align: center added on 24/06/2017 */ color: #d0cbbe; /* to contrast with dark-ish background */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item p { text-align: center; /* text-align: center added on 24/06/2017 */ color: #d0cbbe; /* to contrast with dark-ish background */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item a:hover { color: #477DBF; } body[data-nf-currentPage="produits"] .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item a[data-nf-pageLink="produits"] { color: #477DBF; } /* - Legal Mentions - */ .legalMentions { display: flex; align-items: center; align-content: center; flex-direction: column; padding-top: 10px; padding-bottom: 10px; background: #21252d; font-weight: bolder; } .legalMentions a { color: #477DBF; display: inline-block; float: left; color: white; } /* - Pre-Footer - */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer { padding-bottom : 20px; padding-top: 10px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .title { margin: 20px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .tiretSpacer { border-bottom: 1px solid #477DBF; width: 40px; margin-left: 20px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .contactInfos { list-style: none; padding-left: 20px; margin-top: 20px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .contactInfos .contactInfo { margin-bottom: 7px; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .contactInfos .contactInfo span a { color: #616B7A; text-decoration: none; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .socials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; list-style: none; padding-left: 20px; margin-top: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .socials .social { margin-bottom: 7px; width: 50px; height: 50px; overflow: hidden; margin-right: 7px; /*25px*/ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .socials .social img { width: 100%; } /* for icons not 50x50 */ /* ---- responsive-related ---- */ /* Before going through deep customisation ( & after doing a better job at sizing texts, .. ), setting the minimum to handle thing "esponsively". In other words, for now: - for "large" desktop screens, maybe try one of the the alternate version of the header ( where company + ubs are either above or in the middle of the header buttons ) - for "standard" desktop screen, set a fixed width to hsections & header, hide burger icon for menu access, display company name + sub ( ORBIS holographics ) with less left margin - for tablets, show the "simple" header menu in landscape, otherwise the burger in portrait ? ( or show burger, hide buttons & center logo for both ) - for mobiles, hide */ /* -- responsive, item-focused -- */ /* - Burger - */ @media only screen and (max-width: 1024px){ /* make menu burger visible */ .page-wrapper .show-mobile-menu-button { display: initial; /* when it ws only visible for smaller screen - not it's visible at any moment */ } } /* - Logo - */ /* - Logotype - */ @media only screen and (max-width: 1024px){ /* center company logo*/ .page-wrapper .header .company-logo { margin-left: calc(50% - 110px); /*calc(50% - (15% + 30px));*/ /*calc(35% - 30px);*/ /* 50% + logotype width / 2 - margin-left */ /* override for logotype background */ margin-left: calc(50% - 181.5px); /* override nicer for mobiles follows */ margin-left: calc(50% - 160.5px); } } /* - Catchphrase - */ /* - Main pages buttons - */ @media only screen and (max-width: 1024px){ /* hide header menu ( or menu wrapper) to remove main page buttons */ .page-wrapper .header .menu-wrapper { display: none; } } /* - Sub pages buttons - */ /* - .hsection's - */ @media only screen and (min-width: 1280px){ .hsection { /*border-color: green;*/ width: 1280px; margin: 0 auto; } /* Hero's & Header's */ .hsection[data-nf-templateModel^="Hero"],.hsection[data-nf-templateModel^="Header"] { /*width: 100%;*/ } /* not used anymore to have both fullwidth & not fullwidth headers */ .hsection.fullWidth, .hsection.pageTop { width: 100%; } } /* - Splits - */ @media only screen and (max-width: 640px){ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"]{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: stretch; align-content: stretch; /*min-height: 600px;*/ /* prevent showing the entire content on mobiles */ height: auto; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].mobileReversed { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .firstHalf,.hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .secondHalf { min-height: 50%; /*height: 50%; -> cause torubles with the height on mobiles :/ */ width: 100%; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.infos { width: calc(100% - 40px); } /* partnership wip */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.partnership.secondHalf { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: initial !important; flex-direction: initial !important; /* TODO: find out WHY I had to add "!important" & WHERE is the f**k .. */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.partnership.secondHalf .link { margin-top: 0; } /* addition of 24/06/2017 & 26/06/2017 - special splits - edited on 30/06/2017 */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit { background: none; /* remove full page background */ } /* currently needed :/ */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.pop3background, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.hd3background, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.xl3background, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.xxl3background, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.deepframebackground, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.tullebackground, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.fogscreenbackground, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.pyramidesbackground, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.diamondbackground, .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit.diamondbackground2 { background: none; /* remove full page background */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split.media.centered img { opacity: 1; /* display full page width image */ } /* the below ones are the aboves ones edited for fullpage width ;p */ .vsection.backgroundAndColorSplit { background: none !important; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split.media.centered img { opacity: 1; /* preload but don't display it */ } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .title { color: initial; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .subtitle { color: #477DBF; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .text { color: #616B7A; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .title.invertColor { color: initial; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .subtitle.invertColor { color: #477DBF; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].backgroundAndColorSplit .split .text.invertColor { color: #616B7A; } /* again, below ones are the aboves ones edited for fullpage width */ .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .title { color: initial; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .subtitle { color: #477DBF; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .text { color: #616B7A; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .title.invertColor { color: initial; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .subtitle.invertColor { color: #477DBF; } .vsection.backgroundAndColorSplit .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"] .split .text.invertColor { color: #616B7A; } } /* - Clients & Partners - */ @media only screen and (max-width: 1024px){ /*.hsection[data-nf-templateModel="Partners_type1"] .partnersList .partner {*/ .hsection[data-nf-templateModel] .partnersList .partner, .hsection[data-nf-templateModel] .clientsList .client { //background-color: blue; //justify-content: center; //align-items: center; //align-content: center; //flex-wrap: wrap; } } @media only screen and (max-width: 640px){ /*.hsection[data-nf-templateModel="Partners_type1"] .partnersList .partner {*/ .hsection[data-nf-templateModel] .partnersList .partner,.hsection[data-nf-templateModel] .clientsList .client { //width: calc(100% - 20px); //padding: 10px; //font-size: 22pt; } body { /*background-color: green;*/ } } /* Clients Type1Alt ( using images ) */ @media only screen and (max-width: 478px) { .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* R: 615px 'd be the mobile landscape layout, until about 400px where we shall switch back to portrait layout */ @media only screen and (min-width: 478px/*400px*/) and (max-width: 615px){ .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client { /* flex-direction: row; width: 90%; align-items: center; height: 225px; margin-top: 2.5%; margin-bottom: 2.5%; */ margin-left: 2%; margin-right: 2%; /*border: 1px solid cyan;*/ } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList.fourChildren .client { margin-left: 4%; margin-right: 4%; } /* adjust for 4 instead of 5 children */ } /* desktop & tablets layout adjustements to NOT have 5 > 4/1 > 3/2 but instead 5 > 3/2 2/2/1 > 1(landscape) > 1(portrait) */ @media only screen and (min-width: 615px) and (max-width: 764px){ .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client { margin-left: 3%; margin-right: 3%; /*background-color: red;*/ /*border: 1px solid green;*/ } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList.fourChildren .client { margin-left: 6%; margin-right: 6%; } /* adjust for 4 instead of 5 children */ } /* max-width: 816px -> one below the others => justify-content: center; & margin-left: 6%; margin-right: 6%; */ @media only screen and (min-width: 764px) and (max-width: 816px){ .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client { margin-left: 6%; margin-right: 6%; /*background-color: red;*/ /*border: 1px solid red;*/ } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList.fourChildren .client { margin-left: 7%; margin-right: 7%; } /* adjust for 4 instead of 5 children */ } @media only screen and (min-width: 1015px) and (max-width: 1097px){ .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client { /*margin-left: 4%; margin-right: 4%;*/ /*background-color: green;*/ /*border: 1px solid green;*/ } } @media only screen and (min-width: 1097px) and (max-width: 1267px){ .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client { /*margin-left: 5%; margin-right: 5%;*/ /*background-color: blue;*/ /*border: 1px solid blue;*/ } .hsection[data-nf-templateModel="Clients_type1Alt"] .clientsList .client:nth-child(4) { /*margin-left: 5%; margin-right: 5%;*/ /*background-color: blue;*/ /*border: 1px solid pink;*/ } } /* - Team - */ /* R: 615px 'd be the mobile landscape layout, until about 400px where we shall switch back to portrait layout */ @media only screen and (min-width: 478px/*400px*/) and (max-width: 615px){ .hsection[data-nf-templateModel="Team_type1"] .membersList .member { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 90%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 225px; margin-top: 2.5%; margin-bottom: 2.5%; /*looks better with not too much space between members */ } /* rounded image on left, text on right */ .hsection[data-nf-templateModel="Team_type1"] .membersList .member:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /* text on left, rounded image on right - set to "even" li items ( alt's "odd" ) */ .hsection[data-nf-templateModel="Team_type1"] .membersList .member .picWrapper { height: auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member:nth-child(odd) .picWrapper { margin-right: 20px; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member:nth-child(even) .picWrapper { margin-left: 20px; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .picWrapper img { /*width: 100%; weirdly, only grow Yvan's pics .. */ /*border: 1px solid blue;*/ height: auto; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper { /*border: 1px solid green;*/ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 4; -ms-flex-positive: 4; flex-grow: 4; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;} .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .title { font-size: 18px; /*border: 1px solid green;*/ -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; height: auto; text-align: left; /*margin-left: 20px; causes "block" text :/ .. */ } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .subtitle { font-size: 16px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -ms-flex-line-pack: center; align-content: center; height: auto; text-align: left; /*margin-left: 20px; causes "block" text :/ .. */ -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .hsection[data-nf-templateModel="Team_type1"] .membersList .member .infosWrapper .text { font-size: 14px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; text-align: left; /*margin-left: 20px; causes "block" text :/ .. */ } } /* desktop & tablets layout adjustements to NOT have 5 > 4/1 > 3/2 but instead 5 > 3/2 2/2/1 > 1(landscape) > 1(portrait) */ @media only screen and (min-width: 615px) and (max-width: 764px){ .hsection[data-nf-templateModel="Team_type1"] .membersList .member { margin-left: 4%; margin-right: 4%; /*background-color: red;*/ } } @media only screen and (min-width: 1015px) and (max-width: 1097px){ .hsection[data-nf-templateModel="Team_type1"] .membersList .member { margin-left: 4%; margin-right: 4%; /*background-color: green;*/ } } @media only screen and (min-width: 1097px) and (max-width: 1267px){ .hsection[data-nf-templateModel="Team_type1"] .membersList .member { margin-left: 5%; margin-right: 5%; /*background-color: blue;*/ } } /* - Services - */ /* R: 615px 'd be the mobile landscape layout, until about 400px where we shall switch back to portrait layout */ @media only screen and (min-width: 478px/*400px*/) and (max-width: 615px){ .hsection[data-nf-templateModel="Services_type1"] .servicesList .service { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 90%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /*height: 225px;*/ height: auto; margin-top: 2.5%; margin-bottom: 2.5%; /*looks better with not too much space between members */ } /* rounded image on left, text on right */ .hsection[data-nf-templateModel="Services_type1"] .servicesList .service:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } /* text on left, rounded image on right - set to "even" li items ( alt's "odd" ) */ .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .picWrapper { height: auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service:nth-child(odd) .picWrapper { margin-right: 20px; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service:nth-child(even) .picWrapper { margin-left: 20px; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .picWrapper img { /*width: 100%; weirdly, only grow Yvan's pics .. */ /*border: 1px solid blue;*/ height: auto; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper { /*border: 1px solid green;*/ -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 4; -ms-flex-positive: 4; flex-grow: 4; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;} .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper .title { /*font-size: 18px;*/ /*border: 1px solid green;*/ -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; height: auto; text-align: left; /*margin-left: 20px; causes "block" text :/ .. */ } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper .subtitle { font-size: 16px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -ms-flex-line-pack: center; align-content: center; height: auto; text-align: left; /*margin-left: 20px; causes "block" text :/ .. */ -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .hsection[data-nf-templateModel="Services_type1"] .servicesList .service .infosWrapper .text { font-size: 14px; /*border: 1px solid green;*/ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; text-align: left; /*margin-left: 20px; causes "block" text :/ .. */ margin-left: 0%; } } /* desktop & tablets layout adjustements to NOT have 5 > 4/1 > 3/2 but instead 5 > 3/2 2/2/1 > 1(landscape) > 1(portrait) */ @media only screen and (min-width: 615px) and (max-width: 764px){ .hsection[data-nf-templateModel="Services_type1"] .servicesList .service { margin-left: 4%; margin-right: 4%; /*background-color: red;*/ } } @media only screen and (min-width: 1015px) and (max-width: 1097px){ .hsection[data-nf-templateModel="Services_type1"] .servicesList .service { margin-left: 4%; margin-right: 4%; /*background-color: green;*/ } } @media only screen and (min-width: 1097px) and (max-width: 1267px){ .hsection[data-nf-templateModel="Services_type1"] .servicesList .service { margin-left: 5%; margin-right: 5%; /*background-color: blue;*/ } } /* - Footer ( NEW ) - */ @media only screen and (max-width: 700px) { .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item { height: 50px; margin-left: 6%; margin-right: 6%; } } @media only screen and (max-width: 525px) { .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer { } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].the-footer .footer-menu .menu-item { height: 40px; } } /* - Pre-footer - */ @media only screen and (max-width: 478px) { /* display contact infos data below contatc infos labels */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .contactInfos .contactInfo .contactInfoLabel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hsection[data-nf-templateModel="LeftTextsRightProduct_type0"].pre-footer .split .contactInfos .contactInfo { margin-right: 2%; } } /* - Support - */ @media only screen and (min-width: 880px) { .hsection[data-nf-templateModel="Support_type1"] .downloadsList { justify-content: center; } } @media only screen and (min-width: 1280px) { .hsection[data-nf-templateModel="Support_type1"] .downloadsList .downloadItem { min-width: calc(36% - 40px); } } /* 1st quick @media stuff, to rewrite & focus split as the aboves */ @media only screen and (max-width: 500px){ /*640px, 500px*/ body { /*background-color: red;*/ } .hsection[data-nf-templateModel="MobileSplitTest"] { padding-left: 0; padding-right: 0; } .hsection[data-nf-templateModel] .splitForMobile { //positon: relative; float: initial; /*padding-left: 10%; padding-right: 10%;*/ //width: calc(100% - 2px); /* while debugging with blue border, else 100% */ //border: 1px solid blue; } /* force media above instead of below when on the right side */ .hsection[data-nf-templateModel="LeftTextsRightProduct_type1"] { //display: -webkit-flex; //display: -moz-flex; //display: flex; //-webkit-flex-direction: column-reverse; //flex-direction: column-reverse; } .hsection[data-nf-templateModel="Partners_type1"] .partnersList { /*flex-wrap: wrap;*/ } .hsection[data-nf-templateModel="Partners_type1"] .partnersList .partner { /* width: calc(100% - 20px); padding: 10px; font-size: 22pt; */ } /* DANGEROUS TEST: REMOVE ALL PADDING -> trying to find the one mesing with the page width .. */ * { /*padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px;*/ } .hsection { /*overflow: hidden;*/ } /* no more trouble .. => I guess it comes from the titles that have same font-size for all devices .. */ .hsection[data-nf-templateModel^="Hero"] { overflow: hidden; } /* IDEA: TO FURTHER IDENTIFY WHERE IT COMES FROM, CHECK BY TEMPLATE TYPE ;p */ .hsection[data-nf-templateModel^="Header"] { overflow: hidden; } /* THIS SEEMS TO BE IT ! */ /* addition of 21/07/2017 to ease the reading on mobile devices by hiding the subtitles on the mobile menu */ .mobile-menu-wrapper .menu-link-subtitle { display: none; } /* addition of same day as above, stuff is cleaner left-aligned for such device's screen */ .mobile-menu-wrapper .menu-item { text-align: left; padding-left: 25px; } /* addition of the smae day as above to make place for coming dropdowns - on screens bug enough, we could show all the time each items of the sub categories ? */ .mobile-menu-wrapper .menu-item .menu-link-subitems { display: flex; flex-direction: column; min-height: 60px; justify-content: space-between; } /* same as above, this time concerning the footer menu */ .footer-menu { align-items: left ! important; } .footer-menu .menu-link { text-align: left ! important; } } /* trying to eradicate the source of the above by allowing our too-long-words-in-big-titles to break free ? ;P */ /*.hsection[data-nf-templateModel^="Hero"]*/ .title/*, .subtitle*/ { word-wrap: break-word; /*word-break: break-all;*/ } /* "allow long words to be able to break & wrap onto next line" */ /* -- hide debug titles -- */ .TemplateModelTitle{ /*display: none;*/ } /* -- hide unused templates -- */ .dontDisplay { display: none; } /* -- RF-like wip order implm -- */ .pageHomeSection1, .pageHomeSection2 { /*border: 1px solid transparent;*/ border: none; } .pageHomeSection1:after, .pageHomeSection2:after { content:""; } /* FIND WHAT MESSES THE WIDTH ON MOBILES !! */ .mobile-menu-wrapper { /*display: none;*/ } .page-wrapper .header { /*display: none;*/ } /* - Google Maps - */ #map-wrapper { width: 100%; height: 575px; overflow: hidden; background-color: black; position: relative; } #map-canvas { width: 100%; height: 600px; background-color: black; opacity: 0; /* set to 1 with a transition when google maps has finished loading */ -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } #map-canvas * { /*cursor:default;*/ /*cursor:default !important;*/ } /* successfully use the default cursor ( and not a hand ) on the map */ .customMapOverlay { position: absolute; overflow: hidden; width: 100%; height: 100%; z-index: 1; /* seems needed for whatever reason ( google's ? ) */ opacity: 0; /* set to 1 with a transition when google maps has finished loading */ -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -webkit-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition-delay: 1s; transition-delay: 1s; pointer-events: none; /* clicks to pass throuh */ } /* R: don't show on too little mobile devices ( s tphones & tiny tablets ) */ /*#map-canvas*/ .customMapOverlay:after { /*content: "ORBIS - 160 Avenue du Maine";*/ /* R: "old", static way */ /*content: "ORBIS - 102 rue des Poissonniers";*/ /* now within data-nf-after within .php file */ /* R: "new" using data-nf-after to get the content (if it's null, the overlay is invisible ) */ /*content: attr(data-nf-after);*/ content: '37 rue traversière Boulogne-Billancourt // 5 parvis Alan Turing Paris 13'; position: absolute; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: rgba(1, 1, 1, 0.5); font-size: /*24pt;*/20pt; color: white; letter-spacing: 5pt; padding: 10px; padding-left: 20px; padding-right: 20px; -webkit-box-pack: centered; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; right: 0%; /*width: 649px;*/ /* old street address was smaller :/ .. */ width: 740px; top: 80%; pointer-events: none; /* clicks to pass throuh */ /*left: 49%;*/ } /* overlay adjustement for mobile devices where the map gets tinier */ @media screen and (max-width: 1000px){ /*#map-canvas*/ .customMapOverlay::after { top: initial; left: 0px; bottom: 0px; /*bottom: 25px;*/ /* bottom-most since we hide some stuff .. */ width: 100%; text-align: center; } } /* make map tinier on tablets */ @media screen and (max-width: 750px){ #map-wrapper { width: 100%; height: 475px; } #map-canvas { width: 100%; height: 500px; } /*#map-canvas*/ .customMapOverlay::after { font-size: 20pt; padding-left: initial; padding-right: initial; } } /* make map tinier on smartphones */ @media screen and (max-width: 600px){ #map-wrapper { width: 100%; height: 375px; } #map-canvas { width: 100%; height: 400px; } /*#map-canvas*/ .customMapOverlay::after { font-size: 11pt; } } /* - Canvas quick test - */ #motionCanvas { display: none; /* NOT finished .. at all .. */ position: absolute; opacity: 0; /*border: 1px solid red;*/ width: 100%; top: 154px; height: 639px; -webkit-transition: opacity 10s; transition: opacity 10s; } /* adjustements of 11/04/2017: reveal hidden items in the desktop menu when we have enough space */ /* - Desktop menu items - */ @media only screen and (min-width: 1324px){ /* make sub link visible */ .page-wrapper .menu .menu-item.bigScreens { display: block; /*background: pink;*/ } } @media only screen and (min-width: 1524px){ /* make sub link visible */ .page-wrapper .menu .menu-item.biggerScreens { display: block; /*background: red;*/ } } /* additions of 11/04/2017: have clickable illustrations at the top of the products page */ .menu-link-subitems.imagedLinks { margin-top: 20px; font-size: 20px; margin-bottom: 20px; width: 100%; height: auto; display: flex; align-items: center; justify-content: space-around; } .menu-link-subitems.imagedLinks a { text-align: center; float: left; } /* additions of 12/04/2017: handle the hover dropdown menu for 'produits' - nb: currently only present in the home_hoverMenu.html file */ /*.menu-wrapper*/ .page-wrapper .menu .menu-item:hover > a, .footer-menu .menu-item:hover > a { color: #477DBF; } /* less restrictive to also work in the footer & mobile menu */ /* TODO: adjustement for link that has a dropdown menu in desktop menu */ /* TODO: adjustement for links within the above dropdown menu ( in desktop menu ) */ /* TODO: adjustement for links within the mobile menu ( no dropdown just sublinks ) - wouldnt be needed if we displayed the burger only on mobiles & tablets */ /*.hideslide { visibility: hidden; } .hideslide:hover { visibility: visible; }*/ .mobile-menu-wrapper .menu .menu-item a:hover { color: #477DBF; } .menu-wrapper .menu .menu-item .dropdown { position: relative; display: inline-block; } .menu-wrapper .menu .menu-item .dropdown { width: 100%; }/* ADDED TO SUPPORT MULTI-LEVEL DROPDOWN STUFF */ .menu-wrapper .menu .menu-item .dropdown a:hover { color: #477DBF; } .menu-wrapper .menu .menu-item .dropdown-content { /*display: none;*/ position: absolute; min-width: 160px; z-index: 5; padding-top: 15px; background: white; } .menu-wrapper .menu .menu-item .dropdown-content.transition1 { pointer-events: none; /* prevent hover leak ;p */ transition: all .2s ease-in-out; /*-moz-transition: all 2s ease-in-out;*/ display: visible; opacity: 0.01; transform: translateY(-10px) scale(0.7); -moz-transform: translateY(-10px) scale(0.7); } /* WIP - css transition instead of toggling display: none */ /* declination for right-aligned submenu - if we need a submenu for a menu-item that's on the right side of the screen */ .menu-wrapper .menu .menu-item .dropdown-content.rightAligned { right: 0; } .menu-wrapper .menu .menu-item .dropdown-content.textAlignRight{ text-align: right; } /*.menu-wrapper .menu .menu-item .dropdown-content { box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); }*/ /* may need an intermediate
or adjustements to be able not to have / have less shadow within the menu */ .menu-wrapper .menu .menu-item .dropdown-content { box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.15); } .menu-wrapper .menu .menu-item .dropdown .dropdown-content a { display: block; margin: 16px; } .menu-wrapper .menu .menu-item .dropdown .dropdown-content a.subDropdown { margin-top: 0px; } /* ADDED TO SUPPORT MULTI-LEVEL DROPDOWN STUFF */ .menu-wrapper .menu .menu-item .dropdown .dropdown-content a:hover { color: #477DBF; } /*.menu-wrapper .menu .menu-item .dropdown:hover .dropdown-content { display: block; }*/ /* R: EDITED TO SUPPORT MULTI-LEVEL DROPDOWN STUFF */ .menu-wrapper .menu .menu-item .dropdown:hover > .dropdown-content { display: block; } .menu-wrapper .menu .menu-item .dropdown:hover > .dropdown-content.transition1 { pointer-events: initial; transition: all .2s ease-in-out; opacity: 1; transform: translateY(0px) scale(1); -moz-transform: translateY(0px) scale(1); } /* WIP - css transition instead of toggling display: none */ /* TODO: addition of 21/07/2017 to support multi-level dropdown menus & links ( at least 2 levels ) */ /* R: menu items = lvl0, sub items of any menu item = lvl1, sub items of any menu sub items = lvl2 the test page is a copy of 'interactivite.html' ;) */ .dropdown-content .dropdown { position: relative; display: inline-block; } .dropdown-content .dropdown.firstItemIsDropdown { top: 16px; } /* necessary not to hide the main menu items :) */ .dropdown-content .dropdown a:hover { color: #477DBF; } /* R: for the below stuff, having the submenu closest possible to the header looks actually kinda nice, still keeps usability, and is different from most sites -> neat ? ;P => try with 'top: -97px;' for the 'BOXES' dropdown stuff, or better: find a generic version that'd work for lvl ;) -> also, the header seems to be correctly positionned using 'top: -100%;' instead of 'top: -33px', kinda nice for being more generic :) => R: add classes for 'alway top: 0 sub-lvls dropdowns' if wanted => add 'leftie' version -> also, we could alternate 'leftie > rightie > leftie' or the opposite based either on the original setup for some btn OR the current position of the subDropdown nb: concerning the above note, if using the original setup, we can deduce that space is available on the other side, while the 'alternate' version could come handy for small-width screens .. and for small screen ( width & height ), we could think of using scrollale dropdowns ( in combination to 'always top at 0' stuff, it we could optimise & maximize the used/usable screen space :D ! ) TODO: add sub-sub tree & see what happens TODO: add same as boxes for Deppframe also, try a version of the below stuff using 'top: -46%;' & 'padding-top: 0px !important;' to have a smaller top spacing for the sub items :) R: during testing & for screenshots for the teeaaaaaam ( :D ), adding a 'display: initial' style to the 'dropdown-content' elements can be useful ( .. particularely considering the lack of fcnality of Apple's 'Capture' app .. 'll script that when I have time .. if I get some one dayyyy :/ ;p ) */ .dropdown-content .dropdown .dropdown-content { /*display: none;*/ position: absolute; min-width: 160px; z-index: 1; padding-top: 15px; background: white; /*top: -33px;*/top: -100%; left: 160px; z-index: 1 !important; } .dropdown-content .dropdown .dropdown-content.transition1 { transition: all .2s ease-in-out; /*-moz-transition: all 2s ease-in-out;*/ display: visible; opacity: 0.01; transform: translateY(-10px) scale(0.7); -moz-transform: translateY(-10px) scale(0.7); } /* WIP - css transition instead of toggling display: none */ .dropdown-content .dropdown .dropdown-content.rightAligned { left: -160px; } .dropdown-content .dropdown .dropdown-content.leftAligned { left: -160px; } .dropdown-content .dropdown .dropdown-content.textAlignRight{ text-align: right; } /* R: its the inherited default for a parent wich same class */ /* adding overrides for leeft-positioned ( relatively ) to the parent sub item :) */ .dropdown-content .dropdown .dropdown-content.textAlignLeft{ text-align: left; } .dropdown-content .dropdown .dropdown-content { box-shadow: 0px 40px 40px 0px rgba(0, 0, 0, 0.15) ! important; } .dropdown-content .dropdown .dropdown-content a { display: block; margin: 16px; /*margin-top: 0px ! important;*/ } .dropdown-content .dropdown .dropdown-content a:hover { color: #477DBF; } .dropdown-content .dropdown:hover > .dropdown-content { display: block; } .dropdown-content .dropdown:hover > .dropdown-content.transition1 { opacity: 1; transition: all .2s ease-in-out; transform: translateY(0px) scale(1); -moz-transform: translateY(0px) scale(1); } /* WIP - css transition instead of toggling display: none */ .dropdown-content .dropdown a.middledDropdown { margin-bottom: 0px ! important; } .dropdown-content .dropdown a.middledDropdown + .dropdown-content { top: -200%; } /* addition of 12/04/2017: css trick to scroll to anchor's id whatever the height of a fixed header */ :target:before { content: ""; display: block; //height: 60px; /* fixed header height*/ //margin: -60px 0 0; /* negative fixed header height */ //padding: -60px 0 0; } /* silly test to hide the alt text of images not found - works fine but prevents links that has images inside them to be cliked */ img { color: transparent; /*pointer-events: none;*/ } /* additions of 29/06/2017: "content available after scrolling" triangle animation for Hero_type6 fullpage image backgrounds */ /* R: adapted from my littl fiddl ;p -> https://jsfiddle.net/0p0oc16j/1/ & for pseudo elements https://jsfiddle.net/0p0oc16j/2/ :D */ .hsection[data-nf-templateModel="Hero_type6"]:before { content: ''; width: 0; height: 0; border-width: 30px 56.75px 0 56.75px; border-style: solid; /* h w/2 0 w/2 */ /*border-width: 60px 113.5px 0 113.5px;*/ /* std & large screens */ /*border-width: 20px 37.8px 0 37.8px;*/ /* smallest screens */ //border-color: #007bff transparent transparent transparent; border-color: whitesmoke transparent transparent transparent; //-webkit-clip-path: polygon(50% 30%, 0 0, 100% 0); //clip-path: polygon(50% 30%, 5% 0, 95% 0); /* x1 y1, x2 y2, x3 y3, x4 y4, x5 y5, x6 y6*/ //-webkit-clip-path: polygon(2% 3%, 6% 3%, 48% 37%, 89% 3%, 96% 3%, 48% 45%); /* x1 y1, x2 y2, x3 y3, x4 y4, x5 y5, x6 y6 */ clip-path: polygon(0% 0%, 5% 0%, 50% 90%, 95% 0%, 100% 0%, 50% 100%); animation: MoveUpDown 2.2s linear infinite; position: absolute; left: calc(50% - 56.75px); /* left: 50; -> weirdly, appear as 'invalid value' on Chrome ( & is on left on FF ), yet display item in perfect 50% minus its width ? -> TODO: make sure the magic works elsewhere too ! */ /*left: 0; - originally */ bottom: 0; } .hsection[data-nf-templateModel="Hero_type42"]:before { content: ''; width: 0; height: 0; border-width: 30px 56.75px 0 56.75px; border-style: solid; /* h w/2 0 w/2 */ /*border-width: 60px 113.5px 0 113.5px;*/ /* std & large screens */ /*border-width: 20px 37.8px 0 37.8px;*/ /* smallest screens */ //border-color: #007bff transparent transparent transparent; border-color: whitesmoke transparent transparent transparent; //-webkit-clip-path: polygon(50% 30%, 0 0, 100% 0); //clip-path: polygon(50% 30%, 5% 0, 95% 0); /* x1 y1, x2 y2, x3 y3, x4 y4, x5 y5, x6 y6*/ //-webkit-clip-path: polygon(2% 3%, 6% 3%, 48% 37%, 89% 3%, 96% 3%, 48% 45%); /* x1 y1, x2 y2, x3 y3, x4 y4, x5 y5, x6 y6 */ clip-path: polygon(0% 0%, 5% 0%, 50% 90%, 95% 0%, 100% 0%, 50% 100%); animation: MoveUpDown 2.2s linear infinite; position: absolute; left: calc(50% - 56.75px); /* left: 50; -> weirdly, appear as 'invalid value' on Chrome ( & is on left on FF ), yet display item in perfect 50% minus its width ? -> TODO: make sure the magic works elsewhere too ! */ /*left: 0; - originally */ bottom: 1000px !important; } /* related animation */ /* @keyframes MoveUpDown { 0% { bottom: 0; } 50% { bottom: 20px; } 100% { bottom: 0; } } */ @keyframes MoveUpDown { 0% { bottom: 70px; } 50% { bottom: 90px; } 100% { bottom: 70px; } } /* addition of 19/07/2017 to indicate that download items titles are clickable */ .downloadItem .main1st .title { cursor: pointer; } /* quick theme test: a little transparent header & drop-down menus - TODO: try modding the header so that the dropdowns are impeccably positionned :D */ /* .menu-wrapper .menu .menu-item .dropdown-content { rgba(255, 255, 255, .96); } */ /* addition of 19/12/2017 to prevent iOS from showing stuff below the mobile menu when we do a scroll down then up then down again */ .mobile-menu-wrapper::before { content: 'placeholder'; color: transparent; position: absolute; bottom: -50px; left: 0; width: 100%; height: 50px; /* enough to cover entirely the back ?*/ background: blue; }