/* Theme Name: Amethyst Version: 1.0 Author: Hikari D. Azyure Author URI: https://www.idexigns.com Update URI: false Description: Revamped Version of custom WP Theme for Bianca Polak */ /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); /*-------------------------------------------------------------------------------- Root ---------------------------------------------------------------------------------*/ :root { --bar-height:77px; --bar-heightMin:40px; --bar-heightR:-77px; --page-width:1150px; --colorPurple:#761786; --colorLavendar:#985aa1; --colorVanilla:#f5ece1; --colorWhite:#ffffff; --colorMud:#79664e; --colorClay:#f4f2ee; --colorLime:#cf0; --colorLiteBlack:#333; } @-webkit-keyframes shine{ 0% { -webkit-mask-position:150%; } 50% { -webkit-mask-position:-50%; } 100% { -webkit-mask-position:-50%; } } /*-------------------------------------------------------------------------------- Reset Elements ✓ ---------------------------------------------------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,a:hover,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input{margin:0;padding:0;border:0;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0} html{overflow-y:scroll} html,body{min-height:max-content!important;height:100%;background-color:var(--colorWhite)} body{background-image:url('images/wave.png');background-size:100% 55%; background-position: bottom;background-repeat:no-repeat} *:not(a, body){-webkit-transition:.5s ease-out;-moz-transition:.5s ease-out;transition:.5s ease-out} /*-------------------------------------------------------------------------------- Global Fonts ✓ ---------------------------------------------------------------------------------*/ *:not(.fa-classic,.fa-regular,.fa-solid,.far,.fas,.fa-brands,h1){text-rendering:optimizeLegibility!important;hyphens:unset!important;font-family:"Barlow",Arial,sans-serif;font-weight:400;color:var(--colorLiteBlack);font-size:19px;font-style:unset;outline:unset;vertical-align:baseline;text-decoration:unset;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale} h1,h2,h3,h4,h5,h6{font-family:"Roboto Condensed",serif!important} h1{font-size:36px;font-weight:600;font-family: "Roboto Condensed", serif!important} .fa-classic,.fa-regular,.fa-solid,.far,.fas,.fa-brands{font-size:inherit} @media screen and (max-width: 950px) { *:not(.fa-classic,.fa-regular,.fa-solid,.far,.fas,.fa-brands,h1){font-size:16px} h1{font-size:32px} } /*-------------------------------------------------------------------------------- Font Settings ✓ ---------------------------------------------------------------------------------*/ .masthead-contents,.footer-contents{color:var(--colorWhite);font-weight:500} /*-------------------------------------------------------------------------------- Responsive Layout ✓ - Page-Container fill up visible area while Footer-Container remains at the bottom of page ---------------------------------------------------------------------------------*/ #masthead-container,#footer-container{height:var(--bar-height);background-color:var(--colorPurple);position:relative;z-index:99} #footer-container{position:relative;display:flex;align-items:center} /*make Sidebar Go Under */ #page-container{min-height:calc(100% - (var(--bar-height) * 2));display:flex;position:relative;left:-100px!important} .masthead-contents,.footer-contents{line-height:var(--bar-height)} .masthead-contents,#page-container,.footer-contents{max-width:var(--page-width);margin:auto} .footer-contents{display:flex;justify-content:center;padding-left:100px;line-height:normal} /*-------------------------------------------------------------------------------- 404 ✓ ---------------------------------------------------------------------------------*/ html.page-404 body{background-color:#ad6bb9!important} html.page-404 #masthead-container, html.page-404 #page-container, html.page-404 #footer-container{background-color:rgba(0,0,0,0)!important} html.page-404 #page-container{display:flex;flex-direction:column;justify-content:center;align-items:center} html.page-404 *{color:var(--colorWhite)} /*-------------------------------------------------------------------------------- Contact Us Form ✓ ---------------------------------------------------------------------------------*/ form{border:1px solid #e2c9e4;padding:40px 35px;margin-top:50px;background-color:#fff;border-radius:20px;padding-bottom:10px} form label,input,textarea{display:block;width:100%;box-sizing:border-box} form label{font-family:"Roboto Condensed",serif!important;font-size:20px!important} form input,form textarea{border:1px solid #c08fc6;padding:10px;margin-top:10px;resize:none;color:#00000080!important} form input[type="text"]:focus,form input[type="email"]:focus,form textarea:focus{border:1px solid #c08fc6;outline:2px solid #8a4097;color:#333!important} form input[type="submit"]{cursor:pointer;width:auto!important;background-color:#9b51e0;padding:10px 15px;border-radius:10px;color:#fff!important;margin:10px 0 10px auto} form .wpcf7-not-valid-tip{background-color:#ffd9df;padding:5px 10px;color:#ff4f62;font-size:16px} form .wpcf7-response-output{position:relative;padding:17px 20px 17px 52px !important;margin:0 0 20px!important;border:0!important;border-radius:4px;box-sizing:border-box} form.sent .wpcf7-response-output{background:#bdf1d3;color:#25a866;border-left:7px solid #2ed47a!important} form.sent .wpcf7-response-output:before{content:"✓";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:#25ad68;color:#fff;font-size:14px;font-weight:700} form.invalid .wpcf7-response-output{background:#ffd9df;color:#ff4f62;border-left:7px solid #ff5367!important} form.invalid .wpcf7-response-output:before{content:"×";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;line-height:18px;text-align:center;border-radius:50%;background:#ff5367;color:#fff;font-size:16px;font-weight:700} /*-------------------------------------------------------------------------------- Mobile ✓ ---------------------------------------------------------------------------------*/ .mobile-hamburger{cursor:pointer;font-size:32px;float:right;right:25px;position:relative;top:15px;display:none!important} .mobile-logo{margin-top:5px;float:left;margin-left:25px;display:none} @media screen and (max-width: 1100px) { .mobile-hamburger{display:unset!important} .mobile-logo{display:unset} } /*-------------------------------------------------------------------------------- Masthead Contents ✓ ---------------------------------------------------------------------------------*/ .masthead-contents{text-align:center} /*-------------------------------------------------------------------------------- Footer Contents ✓ ---------------------------------------------------------------------------------*/ .footer-contents{text-align:center;font-size:16px;font-weight:300} /*-------------------------------------------------------------------------------- Sidebar ✓ ---------------------------------------------------------------------------------*/ #sidebar{width:300px} /*-------------------------------------------------------------------------------- Sidebar: Featured Image ✓ ---------------------------------------------------------------------------------*/ #sidebar .featuredImage-container{XXXbackground:linear-gradient(to bottom,var(--colorClay) 0 30%,var(--colorVanilla) 60% 100%);margin-top:-60px} #sidebar .featuredImage-container .companyname{position:absolute;left:3px;bottom:-25px;width:100%;-webkit-mask-image:linear-gradient(-75deg,#000f 30%,#0000001a 50%,#000f 70%);-webkit-mask-size:200%;animation:shine 4s forwards infinite} #sidebar .featuredImage-container .featuredImage{position:relative;z-index:999;margin:auto;background-color:#fff;height:280px;width:280px;background-size:cover;border-radius:100%;border:10px solid var(--colorWhite);display:block} #sidebar .featuredImage-container .isLogged{position:absolute;bottom:7%;right:7%;outline:10px solid #fff;width:25px;height:25px;background-color:var(--colorLime);border-radius:100%} /*-------------------------------------------------------------------------------- Sidebar: Menu ✓ ---------------------------------------------------------------------------------*/ #sidebar-menu-container{} #sidebar-menu.sidebar-menu-list{padding:15px 0} #sidebar-menu.sidebar-menu-list li{padding:10px;padding-bottom:5px;text-align:center} #sidebar-menu.sidebar-menu-list li:last-child{margin-bottom:15px} #sidebar-menu.sidebar-menu-list li a{font-size:24px;color:var(--colorMud);letter-spacing:-1px} #sidebar-menu.sidebar-menu-list li a:hover{font-weight:500;-webkit-mask-image:linear-gradient(-75deg,#000f 30%,#0000001a 50%,#000f 70%);-webkit-mask-size:200%;animation:shine 1s forwards} /*-------------------------------------------------------------------------------- Sidebar: Widgets ✓ ---------------------------------------------------------------------------------*/ #sidebar .widget{width:200px;margin:auto} #sidebar .widget h2{color:#761786} #sidebar .widget .wp-block-heading{text-align:center;padding-bottom:5px} #sidebar .widget .wp-block-social-link-label{display:none} #sidebar #block-8.widget .wp-block-social-links{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;margin-left:auto!important;margin-right:auto!important;flex-wrap:nowrap!important} #sidebar #block-8.widget svg,#sidebar #block-8.widget svg path{fill:#9d35af!important;color:#9d35af!important} #sidebar #block-8 .wp-block-social-link svg{width:40px!important;height:40px!important} /*-------------------------------------------------------------------------------- Page Entry and Formatting Need more? ---------------------------------------------------------------------------------*/ #page-entry{background-color:var(--colorWhite);flex:1;padding:65px 50px;padding-top:50px;padding-bottom:75px;margin:15px;margin-top:-15px;margin-bottom:50px;z-index:999;box-shadow:0 0 50px #999;background-image:url(images/abstract.png);background-size:cover;border-radius:10px} #page-entry a.pageCrumb{opacity:.9;font-weight:100;font-size:16px} #page-entry a.pageCrumb:hover{font-weight:400} #page-entry h1{margin-bottom:10px;font-weight:500;font-size:40px} #page-entry h2{font-size:28px;margin:35px 0 15px;padding-bottom:10px;border-bottom:1px solid var(--colorLiteBlack)} #page-entry h2::before{content:"■";color:var(--colorLavendar);margin-right:5px;position:relative;top:-2px} #page-entry h3{margin:0;margin-bottom:5px;font-size:22px} #page-entry h3 strong{color:red!important} #page-entry p{margin-bottom:20px;line-height:25px} #page-entry p a{color:#761786;text-decoration:underline} #page-entry p a:hover{text-decoration:none} #page-entry strong,#page-entry b{font-weight:600;font-style:inherit;color:inherit} #page-entry em,#page-entry i{font-family:Lora;font-weight:inherit;font-style:italic;color:inherit} #page-entry ul{margin:15px 0 30px} #page-entry ul li{list-style:square;margin-left:30px;margin-bottom:5px} #page-entry ul li::marker{color:var(--colorLavendar)} #page-entry mark{padding:0 5px;padding-bottom:2px;border-radius:5px} #page-entry .wp-block-image{margin:25px 0;text-align:center} #page-entry .wp-block-image img{max-width:950px;width:100%;height:auto;border-radius:5px;box-shadow:5px 5px var(--colorVanilla)} #page-entry .wp-element-caption{font-size:12px;text-align:center;padding:5px 25px 0} #page-entry .wp-block-image.asTimelineImage{margin:-65px -50px 25px} #page-entry .wp-block-image.asTimelineImage img{box-shadow:unset} @media screen and (max-width:1350px) {#page-entry .wp-block-image.asTimelineImage{margin:-20px -20px 25px;margin-bottom:10px}} .has-vivid-red-color{color:#ff0000} .has-white-color{color:#ffffff} /*-------------------------------------------------------------------------------- Responsive ✓ ---------------------------------------------------------------------------------*/ @media screen and (max-width: 1900px) { #page-container{left:0!important} #page-entry .wp-block-image.asTimelineImage img{max-width:unset} } @media screen and (max-width: 1350px) { body{background-size:cover} .footer-contents{padding-left:0} .mobile-hamburger{display:unset!important} .mobile-logo{display:unset} #sidebar{position:relative;left:-500px;width:0} #sidebar .page-logo-container .page-logo{width:200px;height:200px;margin:10px;margin-top:0} #page-entry{padding:20px;padding-bottom:50px;margin-left:15px;margin-right:15px;margin-bottom:30px} #page-entry h1{font-size:32px} #page-entry h2{font-size:22px;font-weight:500} #page-entry h3{font-size:20px;font-weight:500} #page-entry p,#page-entry h1,#page-entry h2,#page-entry h3,#page-entry ul,#page-entry .wp-block-image{margin-left:0;margin-right:0} #page-entry p,#page-entry p *,#page-entry li{font-size:18px;line-height:22px} #page-entry ul li{margin-left:20px} }