File Editor
Directories:
.. (Back)
css
functions
html5
img
inc
js
languages
page-templates
sections
Files:
404.php
comments.php
footer.php
functions.php
header.php
index.php
page.php
readme.txt
searchform.php
sidebar.php
single.php
style.css
Create New File
Create
Edit File: style.css
/* Theme Name: Wlow Theme URI: http://www.marchettidesign.net/wlow/ Description: Responsive WordPress Theme based on Bootstrap and Font Awesome. Version: 1.2.7 Author: Andrea Marchetti Author URI: http://www.marchettidesign.net/chi-sono/ Site: http://www.marchettidesign.net Text Domain: wlow Tested up to: 5.0 Requires PHP: 5.6 Tags: grid-layout, blog, custom-menu, featured-images, right-sidebar License: GNU General Public License v3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* Style Tree 1. Base 2. Layout 2.1 Menu 2.2 Home 2.3 Index 2.4 Sections 2.5 Sidebar 2.6 Footer 3. Modules 3.1 Slider 4. WordPress Default Element 5. Responsive */ body, html { margin: 0; padding: 0; height: 100%;} body.admin-bar .navbar-fixed-top { position: fixed; top: 32px; z-index: 1000; height: 80px; } /* ------------------------------------------------------------------------- * /* 1 Base */ /* ------------------------------------------------------------------------- */ /* Typography */ body{font-size: 18px; font-family: 'Montserrat'; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; color: #222; } /* Title color */ .gigantic, .huge, .large, .bigger, .big, h1, h2, h3, h4, h5, h6 { color: #222;font-weight: 800; } .gigantic { font-size: 70px; line-height: 1.09;font-weight: 700;} .huge, h1 { font-size: 48px;line-height: 1.05;font-weight: 700;} .large, h2 { font-size: 32px; line-height: 1.0; } .bigger, h3 { font-size: 26px; line-height: 1.0; } .big, h4 { font-size: 22px; line-height: 1.0; } .normal, h5 { font-size: 18px; line-height: 1.0; } .small, h6, small { font-size: 14px; line-height: 1.0;} .light{font-weight: 300;} p{font-weight: 300;font-size: 16px;} /* Link color */ a, .link-color { color: #ff3b60; } a:focus, a:hover { color: #3b89ff; text-decoration: none; } /* ------------------------------------------------------------------------- * /* 1.1 Gutenberg */ /* ------------------------------------------------------------------------- */ .wp-block-media-text__media img, .wp-block-media-text__media video{height: auto;} body .alignfull { margin-left: -20px; margin-right: -20px; } @media only screen and (min-width: 960px) { body .alignfull { width: auto; max-width: 1000%; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } body .alignwide { width: auto; max-width: 1000%; margin-right: calc(25% - 25vw); margin-left: calc(25% - 25vw); } .alignwide img, .alignfull img { display: block; margin: 0 auto; } } /* ------------------------------------------------------------------------- * /* 2 Layout */ /* ------------------------------------------------------------------------- */ /* height of the containers */ .side-collapse-container, .side-collapse-content{height: 100%} /* Functional class */ .img-res{ margin-bottom: 20px;width:100%; height: auto;} .img-round{border-radius:100%;width: 180px; height: 180px;} .video-res { position: relative; z-index: 0; overflow: inherit; margin-bottom: 20px; padding-top: 25px; padding-bottom: 56.25%; /* 16: 9 */height: 0;; } .video-res iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .margin-top { margin-top: 60px; } .margin-bottom { margin-bottom: 60px; } .no-margin { margin: 0; padding: 0; } .text-left{text-align: left;} .text-right{text-align: right;} hr{clear:both; margin-top: 0; padding-top: 20px; border:none; border-bottom: 1px solid #eee} .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .button{border: 1px solid #ff3b60; background: #ff3b60; border-radius: 30px; font-size: 14px;display: inline-block;padding: 10px 30px; text-transform: uppercase;color:#fff;font-weight: bold;} .button:hover, .button:focus{background: #3b89ff; color:#fff;border: 1px solid #3b89ff;} .button--dark{color:#222; border-color: #222;} .button--small{padding: 10px 25px; margin-top: 30px;font-size: 12px;} .dash{width:60px; height: 2px; background: #000;margin-top:20px;margin-bottom: 30px} .dash--light{background: #fff} /* ------------------------------------------------------------------------- * /* 2.1 Menu */ /* ------------------------------------------------------------------------- */ .spacer{height: 80px} /* Top Bar */ .top-bar{height:30px;overflow: hidden;margin-top: 0;margin-right: -10px} .top-bar ul {float:right;padding:0;margin:0;text-align: right;} .top-bar ul li{display: inline-block;height:34px;line-height: 40px} .top-bar ul li a{padding: 6px; font-size: 12px;color: #000} .top-bar ul li a:hover{color:#ff3b60} .top-bar ul li a i{font-size: 14px;} .navbar { margin: 0; border: none;border-radius: 0; background-color: #fff; background-image: none; text-transform: uppercase; box-shadow: 0 0 5px rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); } .navbar-header h1 { margin: 0; } .navbar-header .navbar-brand{padding-top: 0; font-weight: bold;letter-spacing: -1px;color:#222} /* Color of menu button */ .navbar-nav > li > a { color: #333;font-size: 14px;} /* Color of menu button:hover */ .navbar-nav > li > a:hover, /* Color of menu active button */ .navbar-nav > li.active > a, .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { background: #fff;color:#ff3b60;} /* Color of dropdown active button */ .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus /* Color of dropdown button:hover */ .dropdown-menu li a:hover, /* Color of button that open the dropdown */ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #fff;color:#000;} .dropdown-menu { padding:0; border: none; border: none; border-radius: 0px; } .dropdown-menu > li > a{padding: 10px 15px;font-size: 13px;} /* drop down size */ .dropdown-menu > li.active > a, .dropdown-menu > li.active > a:hover{color:#3b89ff} /* drop down size */ /* ------------------------------------------------------------------------- * /* 2.2 Home */ /* ------------------------------------------------------------------------- */ .home-title { position: absolute; top:-9999px; color: #fff; font-size: 12px;} /* Home anchor */ .anchor{ display: block; height: 50px; /*same height as header*/ margin-top: -50px; /*same height as header*/ } /* Arrow Button */ .container-arrow{margin-top: -20px; font-weight: bold; text-transform: uppercase; color:#fff; display: inline-block; text-align: center; line-height: 40px; position: absolute; bottom:0; left:0; z-index: 10; width:100%; padding-bottom: 15px; cursor: pointer; font-size: 12px; } .container-arrow:hover, .container-arrow:focus{text-decoration: none;} /* Arrow Bouncing */ .container-arrow span{ display: inline-block; font-size: 60px; animation: .7s down infinite alternate; -webkit-animation: .7s down infinite alternate; } /***Animation Arrow down***/ @keyframes down{ 0%{transform:translateY(0px)} 100%{transform:translateY(20px)} } @-webkit-keyframes down{ 0%{-webkit-transform:translateY(0px)} 100%{-webkit-transform:translateY(20px)} } /* ------------------------------------------------------------------------- * /* 2.3 Index */ /* ------------------------------------------------------------------------- */ /* Single, Post & Page */ .content-article { padding: 30px 0 50px 0; margin:0;float:left; width:100%} .link-article { position: relative; } .cont-tag { clear: both; padding-top: 20px; } .meta{font-size: 14px;font-weight: bold;margin-bottom: 40px} /* ------------------------------------------------------------------------- * /* 2.4 Sections */ /* ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * /* 2.5 Sidebar */ /* ------------------------------------------------------------------------- */ .content-sidebar{margin-top:40px;float:left; width:100%;} .widget { float: left; margin-bottom: 40px; width: 100%;font-size: 14px;} .widget h3 { margin: 0 0 10px 0; } .widget a { display: block; padding: 10px 0; border-bottom: 1px solid #eee; } .widget ul { padding: 0; } .widget ul li { list-style-type: none; } /* Calendar Widget */ #wp-calendar { width: 100%; } #wp-calendar a { padding: 0; border: none; } #wp-calendar caption, .screen-reader-text { padding-bottom: 10px; color: #000; text-align: left; text-transform: uppercase; font-weight: 700; font-size: 14px; } #wp-calendar thead { font-size: 10px; } #wp-calendar thead th { padding-bottom: 10px; } #wp-calendar tbody { color: #aaa; } #wp-calendar tbody td { padding: 8px; border: 1px solid #fff; background: #f5f5f5; text-align: center; } #wp-calendar tbody td:hover { background: #fff; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot #next { text-align: right; text-transform: uppercase; font-size: 10px; } #wp-calendar tfoot #prev { padding-top: 10px; text-transform: uppercase; font-size: 10px; } /* ------------------------------------------------------------------------- * /* 2.6 Footer */ /* ------------------------------------------------------------------------- */ .footer { float: left; margin: 0; width: 100%; background: #333; color: #fff; } .footer p{margin: 0;} .footer .container{ padding: 20px; } /* ------------------------------------------------------------------------- * /* 3 Modules */ /* ------------------------------------------------------------------------- */ /* Focus --------------------------------------- */ .focus{position: relative} .focus p{font-size: 16px;} .focus__item{margin:100px 0;text-align: center} .focus__item__title{margin-bottom: 20px} .focus__item__title, .focus__item__title a{color:#222;font-size: 36px;} /* Cards --------------------------------------- */ .cards{margin:0;padding:40px 0;text-align: center;background: #eee} .cards__intro-title{font-size: 44px;} .cards__intro-subtitle{font-size: 18px;margin-bottom: 60px; font-style: italic; font-weight: 400; } .card__title a{color:#222; font-size: 32px; } .card__meta{font-weight: bold;font-size: 12px;margin-bottom: 20px;} /* Panel Side --------------------------------------- */ .panel-side{margin:120px 0;position: relative;} .panel-side__fill{height:600px;position: relative;} .panel-side__content{min-height: 600px;display:table; margin-left:30px;margin-right: 30px;} .panel-side__content__copy{display:table-cell; vertical-align: middle;} .panel-side__content__copy__title{margin-bottom: 40px;} .panel-side__content__copy__title, .panel-side__content__copy__title a{color:#222;font-size: 44px;} /* Parallax --------------------------------------- */ .parallax{ width:100%; height: 100%; display:table; overflow: hidden; position: relative } .parallax__caption{ display:table-cell; vertical-align: middle; z-index: 1;position: relative;padding:30px 10px;} .parallax__caption__intro{color:#fff} /* Icons */ .parallax__caption__intro .fa{margin-right: 18px;font-size: 28px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .parallax__caption__intro .fa:hover{ -webkit-transform:scale(1.3); /* Safari and Chrome */ -moz-transform:scale(1.4); /* Firefox */ -ms-transform:scale(1.4); /* IE 9 */ -o-transform:scale(1.4); /* Opera */ transform:scale(1.4); } .parallax__caption__title.huge{color:#fff;font-size: 60px;max-width: 850px;} .parallax__caption__title a {color:#fff;} .parallax__caption__subtitle{margin-bottom: 30px;color:#fff;} .parallax__caption__copy{color:#fff;max-width: 700px;margin-bottom: 30px} .parallax__filter{width:100%;height: 100%; margin: 0%;background: #000;position: absolute;top:0;left:0;opacity: 0.4;} /* ------------------------------------------------------------------------- * /* 4 WordPress Default Element */ /* ------------------------------------------------------------------------- */ /* Pagination */ .pagination { float: left; margin: 40px 0 40px 0; padding: 0; width: 100%; } .pagination span, .pagination a { float: left; margin: 0 10px 10px 0; padding: 14px 19px; border: 1px solid #eee; } /* Gallery */ .gallery { float: left; margin: 20px 0 20px 0; width: 103.55%; } .gallery-item { float: left; width: 33.333333%; text-align: center; } .gallery img { margin: 0 10% 0 0; width: 90%; height: auto; border: none!important; } .gallery-caption { width: 90%;margin:10px 0 0 0;} /* Image */ .alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 97%; height: auto; } .alignright { float: right; margin-bottom: 10px; margin-left: 20px; max-width: 97%; height: auto; } .aligncenter { display: block; margin: 0 auto; max-width: 97%; height: auto; } .alignnone { max-width: 97%; height: auto; } /* Image Caption */ .wp-caption { margin-bottom: 20px; padding: 10px; max-width: 97%; border: 1px solid #eee; text-align: center; } .wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; } .wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; } /* Stiky */ .sticky { border-right: 3px solid #eee; border-bottom: 3px solid #eee; } /* Blockquote */ blockquote {font-weight: 200; font-size: 20px; font-style: italic; margin: 0.25em 0; padding: 0px 30px; line-height: 1.45; position: relative; color: #383838; border-left: 5px solid #eee; } /* Search */ #srch-term { border: none; background: none; box-shadow: none; color: #fff; opacity: 0; } .btn-default { border: none; background: none; } .btn-default:hover { border: none; background: none; color: #fff; } .form-control::-moz-placeholder { color: #eee; } .search-light { background: #eee; } .search-light input[type=text] { width: 80%; color: #333; } .search-light button{float:right;padding:12px 15px 0 0;} /* Contact Form 7 */ .wpcf7 p input[type=text], .wpcf7 p input[type=email]{display: block; width: 98%;} .wpcf7 p.input-half{ width: 48%; margin-right: 2%; float:left; min-height: 70px} .wpcf7 p.input-half input[type=text], .wpcf7 p.input-half input[type=email]{ width: 100%;} .wpcf7-select {margin-right: 10px; padding: 10px; border: none; background: #eee; width: 98%;height: 40px;} .wpcf7 p.input-half .wpcf7-select {width: 100%;} div.wpcf7-response-output {float:left; width:97%;margin: 0;} /* Comments */ .comment-form-author, .comment-form-email, .comment-form-url { float: left; margin-top: 20px; margin-right: 3%; width: 30.3333333%; } .comment-form-author input, .comment-form-email input, .comment-form-url input { width: 100%; } ol.commentlist { margin: 0 0 1em; padding: 0; list-style: none; text-indent: 0; } ol.commentlist li.comment { padding: 1em; border-top: 1px solid #eee; } ol.commentlist li.comment div.vcard cite.fn { text-transform: uppercase; font-size: 14px; } ol.commentlist li.comment div.vcard img.avatar { float: left; margin: 6px 1em 1em 0; border-radius: 50px; } ol.commentlist li.comment div.comment-meta { font-size: 12px; } ol.commentlist li.comment ul { margin: 0 0 1em 2em; } ol.commentlist li.comment div.reply { margin-left: 80px; font-size: 11px; } ol.commentlist li.comment div.reply a { font-weight: bold; } ol.commentlist li.comment ul.children { margin: 1em 0 0; list-style: none; text-indent: 0; } ol.commentlist li.comment ul.children li.depth-2 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; } ol.commentlist li.comment ul.children li.depth-3 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; } ol.commentlist li.comment ul.children li.depth-4 { margin: 0 0 .25em .25em; border-left: 1px solid #eee; } ol.commentlist li.even { background: #fff; } ol.commentlist li.odd { /* background: #f9f9f9; */ } ol.commentlist li.parent { border-left: 1px solid #eee; } ol.commentlist li.bypostauthor .fn { font-weight: bold; } ol.commentlist li img{max-width: 97%;} input[type=text], input[type=email] { width: 98%;margin-right: 10px; padding: 10px; border: none; background: #eee; -webkit-appearance: none;border-radius: 0;} textarea { padding: 10px; width: 98%; border: none; background: #eee; -webkit-appearance: none;border-radius: 0;} input[type=submit] { margin-top: 10px; padding: 15px 20px; color: #fff; text-transform: uppercase; background: #333; border:none; } #comments { width: 100%; } /* ------------------------------------------------------------------------- * /* 5 Responsive */ /* ------------------------------------------------------------------------- */ /* ----------------------------- */ /* Tablet and Desktop */ /* ----------------------------- */ @media (min-width: 768px) { /* transparent navbar */ .page-template-home .top-bar ul li a{color:#fff} .page-template-home .top-bar ul li a:hover{color:#ff3b60} .page-template-home .navbar-header .navbar-brand{color:#fff} .page-template-home .navbar { background-color: transparent; border:none;} .page-template-home .navbar li.active a, .page-template-home .navbar li.active a:focus, .page-template-home .navbar li a:focus, .page-template-home .navbar li a:hover{background-color: transparent;} .page-template-home .navbar { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none;} .page-template-home .navbar-nav > li > a { color: #fff;} .page-template-home .navbar-nav > li > a:hover{ color:#ff3b60;} /* Scroll Down */ .page-template-home.navbar-scroll-down .navbar{ box-shadow: 0 0 5px rgba(0, 0, 0, 0.20); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.20); } .page-template-home.navbar-scroll-down .navbar{background-color: #fff} .page-template-home.navbar-scroll-down .navbar li a { color: #333;} .page-template-home.navbar-scroll-down .navbar-brand{color:#000} /* Color of button that open the dropdown in home */ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .page-template-home .nav .open > a, .page-template-home .nav .open > a:hover, .page-template-home .nav .open > a:focus { background-color: #fff;color:#ff3b60;} /* Scroll Down margin */ .page-template-home .navbar{margin-top: 20px;} .page-template-home.navbar-scroll-down .navbar{margin-top: 0px;} /* Brand Dimension */ .navbar-brand{height: 80px; line-height: 80px;} /* Top Bar */ .top-bar{width:85%; float:right;} /* Main Menu Bar */ #mainmenu{min-width:20%;float:right;} } /* ----------------------------- */ /* Tablet */ /* ----------------------------- */ @media (max-width: 998px) { /* Menu */ .navbar .logo-img img{width:auto; height: 50px;} .navbar-nav > li > a { font-size: 12px;padding: 15px 10px} .panel-side{margin:50px 0;} .content-article{padding: 40px 20px;} /* Typography */ .gigantic { font-size: 55px; line-height: 1;} } /* ----------------------------- */ /* Smarthphone */ /* ----------------------------- */ @media (max-width: 767px) { /* Menu */ .navbar{background-color: #fff!important;border:none;} .navbar-toggle {border: none!important;margin-top: 14px;} .navbar-toggle .icon-bar{background: #333!important; width: 26px;height: 3px;border-radius: 4px; margin-bottom: 5px;} /* Hanburger menu animation */ .navbar-toggle.navbar-toggle--active .icon-bar:nth-child(1) { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } .navbar-toggle.navbar-toggle--active .icon-bar:nth-child(2) { opacity: 0; width:0; -webkit-transform: translateY(8px); transform: translateY(8px); } .navbar-toggle.navbar-toggle--active .icon-bar:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:hover { background-color: transparent;} .navbar-nav a{display: block;min-width:200px} /* Dropdown */ .navbar-nav .open .dropdown-menu > li > a, .nav > li > a:hover, .nav .open > a, .nav .open > a:hover, .nav .open > a:focus, .navbar-nav .open .dropdown-menu .dropdown-header {color:#333; background: #eee} /* dropdown color */ .navbar-nav .open .dropdown-menu > li > a{padding:10px 10px 10px 25px} /* dropdown size */ .navbar-nav .open .dropdown-menu > li.active > a{color:#26c6da;} /* dropdown active color */ /* Fixed the nav dimensions on smatrphone */ .navbar-brand{height: 65px!important; line-height: 65px!important;} .top-bar{margin-top: 5px!important;margin-left: 5px;height: auto;min-width: 200px;} /* Top bar */ .top-bar ul {text-align:left;float:left;} /* Side Menu */ .side-collapse-content{left:0;width:100%; /* position:relative; */ } /* Content */ .side-collapse-container.out .side-collapse-content{ left:250px; } /* Slide effect */ .side-collapse {background-color: #eee;/*color side*/ top:64px;bottom:0;left:0;width:250px;position:fixed;overflow-y: scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch; box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.15); -moz-box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.15); -o-box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.15); } .side-collapse.in {width:0;} /* Parallax --------------------------------------- */ .parallax-cover .parallax__caption{padding-bottom: 80px;} .parallax__caption__title{font-size: 48px; margin-bottom: 20px; } /* Block parallax animation */ .parallax-image{top: 0!important;} .parallax-background{ background-attachment: scroll!important; background-position: center top!important;} /* Footer */ .footer .alignright{float:left;margin-top:5px;} /* Comment */ .comment-form-author, .comment-form-email, .comment-form-url{margin-top:0;width:97%;} /* Contact Form 7 */ .wpcf7 p.input-half{ width: 98%; margin-right: 2%;} /* panel Side */ .panel-side__fill{height:270px;} .panel-side__content{min-height: 300px;} /* Module Form Style */ .module .wpcf7 p{ width:100%;} }
Save Changes
Rename File
Rename