/* Theme Name: level-26 basic Author: Thierry De Couvreur Author URI: https://level-26.be/ Description: Version: 1.0 Requires PHP: 5.2.4 Text Domain: level-26-basic Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready This theme is the property of Thierry De Couvreur */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Structure 2.0 COLORS 3.0 TYPO 4.0 Logo SVG --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 Structure Styles based on structure v1.0.0 @link https://level-26.be/webdev/theme/basic/structure.css --------------------------------------------------------------*/ html { scroll-behavior:smooth; width:100% } body { margin: 0 auto; width:100%; } #upbar-container {width:100%; height:10px;} #header-container {width:100%; min-width:900px; height:80px;} #float-menu {position:fixed; top:0; left:0; z-index:-1; height:90px; width:100%; min-width:900px; visibility:hidden; opacity:0; transition: all 1s ease;} #float-logo-container {position:relative; float:left; width:80px; max-width:80px; height:80px; margin-top:10px;} #float-menu:hover #float-menu-top-container {opacity:1; visibility:visible} #float-menu-top-container {float:left; width:calc(100% - 160px); height:80px; transition: all 2s ease; padding-top:10px} #float-menu-top-container img {display:none} #float-menu-top-container .menu-top-item {position:relative; float:left; width:20%; height:80px} #float-menu-top-container .menu-top-item p {position:absolute; bottom:23px; padding:0; margin:0; width:80%; padding:.5em 0 .5em 20%;} #float-menu .social-icons {float:left; height:80px; width:80px; max-width:80px;} #float-menu .social-icons p {display:block; float:right; margin:0; padding:0; margin-left:5px; margin-right:10px; margin-top:33.75px; width:32.5px; height:32.5px;} #float-menu .social-icons a {display:block; width:32.5px; height:32.5px; margin:0;padding:0} #float-menu .social-icons svg {width:32.5px; height:32.5px} #top-menu {width:100%; opacity:1; z-index:5; height:80px; min-width:900px; transition: all 2s ease;} .logo-container {float:left; width:80px; max-width:80px; height:80px;} .logo {opacity:1; display:block; width:70px; transition: all 2s ease; margin-top:5px; margin-left:5px} .logo svg {width:70px; height:70px} #menu-top-container {float:left; width:calc(100% - 160px); height:80px; transition: all 2s ease;} #menu-top-container img {display:none} .menu-top-item {position:relative; float:left; width:20%; height:80px} .menu-top-item p {position:absolute; bottom:23px; padding:0; margin:0; width:80%; padding:.5em 0 .5em 20%;} .social-icons {float:left; height:80px; width:80px; max-width:80px;} .social-icons p {display:block; float:right; margin:0; padding:0; margin-left:5px; margin-right:10px; margin-top:23.75px; width:32.5px; height:32.5px;} .social-icons a {display:block; width:32.5px; height:32.5px; margin:0;padding:0} .social-icons svg {width:32.5px; height:32.5px} #header-img-container {position:relative; margin:0 auto; padding:0; width:100%; min-height:297px;} #header-img-inner-content {opacity:1; transition:all 1s ease} #header-img-container img {margin:0; padding:0; width:100%; height:auto; min-width:900px; height:auto;} #header-img-container #header-img-inner-content {position:absolute; top:55%; width:100%; margin:0 auto; padding:0; min-width:900px;} #header-img-container #header-img-inner-content svg {width:100%; margin:0 auto;} #header-img-container #header-img-inner-content:hover svg { animation-duration: .8s; animation-name: clignoter; animation-iteration-count: infinite; transition: none; } @keyframes clignoter { 0% { opacity:1; } 40% {opacity:0; } 100% { opacity:1; } } #word-animation.changeHidden { position:absolute; top:0; left:0; text-align: left; height:24px; overflow:hidden; } #word-animation.changeHidden .contenant { position:relative; animation: carousel 5s ease-in-out infinite; height:24px; } #word-animation.changeHidden .element { display:block; height:24px; } @keyframes carousel { 0%, 20%{ transform: translateY(0); } 20%, 40%{ transform: translateY(-24px); } 40%, 60%{ transform: translateY(-48px); } 60%, 80%{ transform: translateY(-72px); } 100%{ transform: translateY(-96px); } } #header-img01 {position:absolute; top:0; left:0; transition: all 1s ease; opacity:1} #header-img01 {position:absolute; top:0; left:0; transition: all 1s ease; opacity:0} #header-img02 {position:absolute; top:0; left:0; transition: all 1s ease; opacity:0} #header-img03 {position:absolute; top:0; left:0; transition: all 1s ease; opacity:0} #header-img04 {position:absolute; top:0; left:0; transition: all 1s ease; opacity:0} #header-img05 {position:absolute; top:0; left:0; transition: all 1s ease; opacity:0} #main-content-container {margin:0 auto; width:100%; min-width:900px; min-height:800px;} #main-content-container .main-content-section {margin:0 auto; padding:0 10%; padding-bottom:75px;} #main-content-container .main-content-section#vision {padding-top:75px;} #main-content-container .main-content-section#services {margin-top:-25px; padding-top:75px;} #main-content-container .main-content-section#aboutus {margin-top:-25px; padding-top:75px;} #main-content-container .section-img-header {position:relative; width:100%; margin:0 auto; margin-top:-18px; min-height:297px; padding:0; max-height:800px; overflow:hidden} #main-content-container .section-img-header img {margin:0; padding:0; width:100%; height:auto; min-width:900px; height:auto;} #main-content-container .section-img-header p {position:absolute; top:10%; left:35%; margin:0 auto; padding:0; width:30%; min-width:270px; cursor:crosshair; text-align:center;} #main-content-container .section-img-header p:hover svg { animation-duration: .8s; animation-name: clignoter; animation-iteration-count: infinite; transition: none; } #aboutus-profile-photo {float:left; width:210px; height:261px; background-color:transparent; margin:0 2em 1em 0;} #aboutus-profile-photo img {width:210px; height:261px} #aboutus-profile-txt {} #aboutus-profile-txt p{margin:0; padding:0} p#aboutus-stickers {font-weight:700; font-size:2em; color:#fff; background-color:#66796d; padding:.5em; margin-left:calc(210px + 1em)} #contact svg {width:32.5px; height:32.5px} #footer-container {position:relative; width:100%; min-height:340px;} #footer-container a {color:#FFF; text-decoration:none} #footer-logo {float:left; width:80px; height:80px; margin:2em;} #footer-logo svg {width:80px; height:80px} #footer-middle-section {float:left; width:calc(100% - 242px - 6em); border-left:1px solid #fff; border-right:1px solid #fff; margin-top:2em} #footer-middle-section p{margin-left:3em; color:#fff;} #footer-middle-section p:first-child{margin-left:2em; text-decoration:underline} #footer-middle-section p a{color:#fff; font-size:1em; text-decoration:none; } #footer-middle-section p a:hover{color:#caa352; font-size:1em; text-decoration:none; } #footer-right-section {float:left; width:160px; margin-left:2em; margin-top:2em} /*-------------------------------------------------------------- 2.0 COLORS --------------------------------------------------------------*/ #upbar-container {background-color:#FFF} #header-container {background-color:#FFF} #float-menu {background-color:#002a54} #float-menu-top-container {background-color:transparent} #float-menu .menu-top-item {background-color:transparent} #float-menu .menu-top-item p {background-color:transparent; transition: all 2s ease;} #float-menu .menu-top-item p:hover {background-color:#525e88} #float-menu .social-icons {opacity:1; transition: all 1s ease;} #float-menu .social-icons-01 svg path{fill:#FFF; transition: all 1s ease;} #float-menu .social-icons-01:hover svg path{fill:#0a66c2;} #float-menu .social-icons-01 {transform: scale(1); transition: all .3s ease;} #float-menu .social-icons-01:hover {transform: scale(1.2); transition: all .3s ease;} #menu-top-container {background-color:#FFF} .menu-top-item {background-color:#FFF} .menu-top-item p {background-color:#FFF; transition: all 2s ease;} .menu-top-item p:hover {background-color:#E6E6E6} #top-menu .social-icons-01 svg path {fill:#0a66c2; transition: all 1s ease;} #top-menu .social-icons-01:hover svg path {fill:#0a66c2} #top-menu .social-icons-01 {transform: scale(1); transition: all .3s ease;} #top-menu .social-icons-01:hover {transform: scale(1.2); transition: all .3s ease;} #header-img-container {background-color:#FFF} #main-content-container {background-color:#FFF} #vision {background-image: url("../img/vision/sectionvisionbg.jpg"); background-repeat: no-repeat; background-position: center;} #services {background-color:#335576; background: linear-gradient(165deg, #000, #000, #584623);} #aboutus {background-color:#e7e9eb} #contact svg path {fill:#0a66c2; transition: all 1s ease;} #contact svg path:hover {fill:#000} #contact svg {transform: scale(1); transition: all .3s ease;} #contact svg:hover {transform: scale(1.2); transition: all .3s ease;} #footer-container {background: linear-gradient(135deg, #203b67, #000);} #footer-logo svg path {fill:#fff} #footer-logo svg rect {fill:#fff} /*-------------------------------------------------------------- 3.0 TYPO --------------------------------------------------------------*/ html {font-family:'Roboto', sans-serif;} a {text-decoration:none} #txt-bold {font-weight:400} #txt-ital {font-style:italic} #txt-gold {color:#caa352} #txt-align-left {text-align:left} #txt-align-center {text-align:center} #txt-align-right {text-align:right} #float-menu .menu-top-item a {color:#FFF} #float-menu .menu-top-item p {font-size:1em; font-variant:small-caps; letter-spacing:.3em; font-weight:400} .menu-top-item a {color:#000} .menu-top-item p {font-size:1em; font-variant:small-caps; letter-spacing:.3em; font-weight:700} #header-img-container {font-size:1.2em; font-variant:small-caps; letter-spacing:.3em; font-weight:100} #header-img-container a {color:#FFF; text-decoration:none; font-size:1em; font-variant:small-caps; letter-spacing:.3em; font-weight:400} .section-img-header {font-size:1.5em; font-variant:small-caps; letter-spacing:.3em; font-weight:100} .section-img-header a {color:#FFF; text-decoration:none; font-size:2em; font-variant:small-caps; letter-spacing:.3em; font-weight:100} .main-content-section {font-size:1em; letter-spacing:.1em; font-weight:400; line-height:2em} #vision h1 {color:#ebd099; font-variant:small-caps; font-weight:700; font-size:7.2em; text-align:center; line-height:.6em} @media (max-width: 900px) { #vision h1 {color:#ebd099; font-variant:small-caps; font-weight:400; font-size:4.2em; text-align:center; line-height:.6em} } #vision p {font-size:1.8em; line-height:1.2em; padding-left:3em} #vision p:nth-child(2n+0) {color:#000} #vision p:nth-child(2n+1) {color:#caa352; font-weight:bold; margin-bottom:2em; margin-top:-1em; text-indent:2em} #vision p:nth-child(4n+4) {text-align:right; color:#000;} #vision p:nth-child(4n+5) {text-align:right;} #services .servicesp {display:block; padding:1em 0; background-color:#fff; transition: all 1s ease; /*box-shadow: inset 5px 5px 10px #000;*/} #services .servicesp:hover {animation-name: sectionbgcolorchange; animation-duration: .5s; animation-iteration-count: 1; background-color:#fff} @keyframes sectionbgcolorchange { 0% { background-color:#fff } 50% { background-color:#ccc } 100% { background-color:#fff } } #services .servicesp h1 {color:#caa352; font-variant:small-caps; font-weight:200; font-size:4.2em; text-align:center; /*text-shadow: 1px 1px #002a54;*/ line-height:1em; margin-left:1em; margin-right:1em; transition: all 1s ease;} @media (max-width: 900px) { #services .servicesp h1 {color:#caa352; font-variant:small-caps; font-weight:200; font-size:2.2em; text-align:center; /*text-shadow: 1px 1px #002a54;*/ line-height:1em; margin-left:1em; margin-right:1em; transition: all 1s ease;} } #services .servicesp h2{color:#caa352; font-variant:small-caps; font-size:2em; text-align:center; margin-left:1em; margin-right:1em; transform: scale(1); transition: all 1s ease;} #services .servicesp:hover h2{transform: scale(1.08); transition: all 1s ease;} #services .servicesp p {color:#000; font-weight:200; font-size:1.8em; line-height:1.2em; margin-left:3em; margin-right:3em; text-align:justify} @media (max-width: 900px) { #services .servicesp p {color:#000; font-weight:200; font-size:1em; line-height:1.2em; margin-left:3em; margin-right:3em; text-align:justify} } #aboutus {color:#333; font-size:1.2em; font-weight:400} #contact {text-align:center} #footer-container {font-weight:100} #footer-container a {color:#FFF; text-decoration:none} #footer-middle-section p{color:#fff; line-height:.8em} #footer-middle-section p:first-child{text-decoration:underline; line-height:.8em} #footer-middle-section p a{color:#fff; font-size:.8em; text-decoration:none; } #footer-middle-section p a:hover{color:#caa352; font-size:.8em; text-decoration:none;} #footer-right-section p{color:#fff; line-height:.8em} #footer-right-section p:first-child{text-decoration:underline; line-height:.8em} #footer-right-section p a{color:#fff; font-size:.8em; text-decoration:none; } #footer-right-section p a:hover{color:#caa352; font-size:.8em; text-decoration:none;} /*-------------------------------------------------------------- 4.0 Logo SVG --------------------------------------------------------------*/ #float-logo-container .logo {opacity:1; display:block; transition: all 2s ease;} #float-logo-container .logo svg path, #float-logo-container .logo svg rect{fill:#ffcc66; transition: all 2s ease;} #float-logo-container .logo svg:hover path, #float-logo-container .logo svg:hover rect{fill:#ffcc66; transition: all 2s ease;} .logo svg .circledot{ transform: rotate(0deg); transform-origin: 50% 50%; transition: transform 2000ms ease-in-out; } .logo svg:hover .circledot{ transform: rotate(2turn); transform-origin: 50% 50%; transition: transform 2000ms ease-in-out; } .logo svg path{ fill:#002a54;transition: all 2s ease; } .logo svg:hover path{ fill:#ccc; } .logo svg rect{ fill:#002a54;transition: all 2s ease; } .logo svg:hover rect{ fill:#ccc; } #top-menu .logo svg:hover .circledot path{ animation-name: colorchange; animation-duration: 2s; animation-iteration-count: 1; fill:#caa352; } #float-menu .logo svg #float-logo-arrow {stroke:#ffcc66} #float-menu .logo svg:hover #float-logo-arrow { animation-duration: 2s; animation-name: clignoter; animation-iteration-count: infinite; transition: none; stroke:#ffcc66; } @keyframes clignoter { 0% { opacity:1; } 40% {opacity:0; } 100% { opacity:1; } }