/* Theme Name: Sergio Cilli - Spring 2020 Author: Danny Cohen Author URI: http://dannycohen.design/ Version: 1.0 */ @import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); @import url('//fonts.googleapis.com/css?family=Poppins:300,500,700&display=swap'); @import url('noedisplayblack/font.css'); /* Resets and Boilerplates */ * { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #222; font-size: 1em; line-height: 1.4;} h1, h2, h3, h4, h5, h6 {font-weight:normal;} a {text-decoration:none; outline: none;} a:hover, a:active { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* FORMS */ label { cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Remove inner padding and border in FF3/4: h5bp.com/l */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ .button {line-height:1;} .hide {display:none !important; visibility: hidden;} hr.foot {border:0px;clear: both;display: block; overflow: hidden;visibility: hidden;width: 0px; margin:0;padding:0; height: 0px;} /* Contain floats: h5bp.com/q */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* Site Styling */ ::-moz-selection { color:#0A1327; background:#F7B500; text-shadow: none;} ::selection { color:#0A1327; background:#F7B500; text-shadow: none;} a:link { -webkit-tap-highlight-color: #F7B500; text-shadow: none;} .left, .alignleft {float:left;} .right, .alignright {float:right;} .aligncenter {margin:0 auto; display:block;} a { color: #fff; } a:hover {} img, embed, iframe, object { max-width: 100%; height:auto;} body { color:#fff; background:#0A1327; font-family: "Poppins", 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; line-height: 19px; font-weight:500; } /* Layout */ #container { margin:0 auto; padding:60px; max-width:945px;} /* Header */ header {display: flex; justify-content: space-between; align-content: stretch; align-items:center; margin-bottom: 60px;} header h1 {} header h1 a { display:block; overflow:hidden; font-family: 'Noe Display'; color:#F7B500; font-size:63px; line-height: 1;} header h1 a:hover {color:#5DB7FF} header nav {flex:1; padding-left:65px;} header nav ul { display: flex; justify-content: space-between; list-style: none; align-items: center; height:100%;} header nav li { white-space: nowrap; } header nav li a {border-bottom:2px solid transparent; white-space: nowrap;} header nav li a:hover, header nav [class*="current-menu-parent"] a {border-bottom: 2px solid;} #toggle-mobile-nav {display: none; pointer-events: none; -webkit-tap-highlight-color: transparent; } #main {} /* Home Style */ body.home .article-header {display: none;} /* Article Style */ article {margin-bottom: 60px;} body.single-post article {margin-bottom:120px;} body:not(.home, .recent-work) article.page .article-content {max-width: 640px;} .article-header {margin-bottom: 60px;} .article-header .article-title { font-size:1.2rem; font-weight: 300; font-size:38px; text-align: right; line-height: 123%;} .article-content { margin:0 auto; line-height: 180%; font-weight:300; font-size: 16px; } .article-content p, .article-content ul, .article-content ol, .article-content blockquote, .article-content img, .article-content .wp-block-embed { margin-bottom:40px; } .article-content p {} .article-content ul , .article-content ol {padding-left:2em;} .article-content blockquote {} .article-content img { max-width:100%; } .article-content img.alignleft { margin:0 1em 1em 0; } .article-content img.alignright { margin:0 0 1em 1em; } .article-footer { clear:both; } figure.wp-block-embed.is-type-video, figure.wp-block-embed-wordpress { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /*16:9*/ } figure.wp-block-embed.is-type-video iframe, figure.wp-block-embed-wordpress iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .25s ease-in-out; -webkit-backface-visibility: hidden;} figure.wp-block-embed-wordpress iframe:hover {opacity:.85;} .wp-block-group__inner-container {display:flex; justify-content: space-between;} .wp-block-group .wp-block-embed-wordpress {width: calc(50% - 20px);} .wp-block-group figure.wp-block-embed-wordpress { padding-bottom: calc( 56.25% / 2) ; /*16:9*/ } blockquote.wp-embedded-content {display: none;} /* Archive Listings */ .listings {display:flex; flex-wrap: wrap; justify-content: space-between; } .listings a {background-color:black; width: calc( ( 100vw - ( ( 100vw - 945px ) ) ) / 2 - 20px); margin-bottom: 40px; box-sizing: border-box; height: calc( ( ( 100vw - ( ( 100vw - 945px ) ) ) / 2 - 20px)* (9/16)); background-size: contain; background-repeat: no-repeat; background-position: center center; position: relative; transition: opacity .25s ease-in-out;} .listings a:hover {opacity:.85} .listings a .title {padding:20px; z-index:3; position: absolute; bottom:0; right:0; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.97)} .listings a.featured-post { width: calc( ( 100vw - ( ( 100vw - 945px ) ) ) ); box-sizing: border-box; height: calc( ( ( 100vw - ( ( 100vw - 945px ) ) ))* (9/16)); } /* Archive Post Navigation Links */ .archive-post-nav-links {display: flex; margin: 30px 0 60px; line-height: 2;} .archive-post-nav-links div { flex-grow: 1; flex-basis: 0;} .archive-post-nav-links .previous {text-align: left;} .archive-post-nav-links .next {text-align: right;} .archive-post-nav-links a { font-size:28px; /* font-family: 'Noe Display'; */ color:#F7B500; background-repeat: no-repeat; background-size: 10px; vertical-align: middle; padding-top: 6px; border-bottom:2px solid; letter-spacing:.05em;} .archive-post-nav-links a svg {width:26px; height:auto; margin-top:-3px;} .archive-post-nav-links a:hover {color:#5DB7FF;} .archive-post-nav-links a g#ArrowWrapper {stroke:#F7B500;} .archive-post-nav-links a:hover g#ArrowWrapper {stroke:#5DB7FF;} .archive-post-nav-links .previous a { } .archive-post-nav-links .previous a svg {transform: rotate(180deg); margin-right:8px;} .archive-post-nav-links .next a { } /* Clients */ .client-list {display: flex; flex-flow: row wrap; list-style: none; margin:40px -15px; justify-content: space-between; text-align: justify; padding:5px !important; } .client-list li {font-size: 46px; margin:5px; font-weight:500; letter-spacing: -1.24px; color: ; box-sizing: border-box; margin-bottom:30px; } .client-list li a {color:inherit; border-bottom: 4px solid transparent;} .client-list li a:hover { border-bottom: 4px solid;} .client-list li:nth-child(even ) {color: #F7B500;} .client-list li:nth-child(odd ) {color: #5DB7FF;} body.clients article.page .article-content {max-width:100%;} /* Forms */ form {} form fieldset {} form label {display:block;} form input, form textarea { font-family:inherit; background:white; } form input[type="submit"] { } /* Footer */ footer { font-size: 13px; font-weight:500px;} footer nav {} footer nav ul {} footer nav ul li {} footer nav ul li a {} footer h5 { margin-bottom: 30px;} #footer-contact-widgets {display: flex; list-style: none; justify-content: space-between; flex-wrap: wrap;} #footer-contact-widgets li {width:30%;} #footer-contact-widgets .widgettitle {font-weight:bold;} /* Error 404 */ h2.error404 { margin:60px auto; text-align: center; font-size:200px; line-height: 120%; font-family: 'Noe Display'; color:#f82a00; letter-spacing: .1em;} /* Media Queries */ /* > 950px, 950px - 720px, < 720px , < 480px */ @media ( max-width: 1065px ) { .listings a { width: calc( ( ( 100vw - 120px ) / 2 ) - 20px); margin-bottom: 40px; height: calc( ( ( ( 100vw - 120px ) / 2 ) - 20px) * (9/16)); } .listings a.featured-post { width: calc( ( ( 100vw - 30px ) ) ); height: calc( ( ( ( 100vw - 30px ) ) ) * (9/16)); } } @media ( max-width: 945px ) { #container { margin:0 auto; padding:20px; max-width:945px;} header {display:block;} header h1 {margin-bottom: 20px;} header nav {padding-left:0;} .listings a { width: calc( ( ( 100vw - 20px ) / 2 ) - 20px); margin-bottom: 20px; height: calc( ( ( ( 100vw - 20px ) / 2 ) - 20px) * (9/16)); } } @media ( max-width: 950px ) and ( min-width: 720px ) { } @media ( max-width: 720px ) { header h1 a {font-size: 42px;} #footer-contact-widgets {display: block; list-style: none;} #footer-contact-widgets li {width:80%; display: block; margin-bottom:20px; margin-left:0;} .client-list li {font-size: 32px; font-weight:500; letter-spacing: -1.24px; color: ; box-sizing: border-box; margin-bottom:30px; } } @media ( max-width: 480px ) { header {margin-bottom: 30px;} header nav {position: absolute; top:0; width:100vw; height:100vh; max-height:100vh; z-index:100; background:rgba(9, 18, 38, 0.83);overflow-y: scroll; box-sizing: border-box; right:0px; opacity: 0; transition: all 0.3s ease; pointer-events: none;} body.navigationShown {position: fixed; overflow: hidden; } body.navigationShown header nav { right:0; opacity: 1; pointer-events: all;} header nav ul {display: block; font-size:32px; line-height: 1.7; padding:10px 20px; position: relative; transition: all 0.3s ease; left:300vw; box-sizing: border-box; } body.navigationShown header nav ul {left:0;} #toggle-mobile-nav {display: block; pointer-events: all; position: absolute; top:0; right:0; line-height: 42px; vertical-align: middle; padding: 12px 20px; overflow: hidden; z-index:9999;} g#Hamburger line {transition: all 0.3s ease; transform: rotate(0deg); transform-origin: 14% 50%; position: relative; } .navigationShown g#Hamburger line {stroke:#fff; position: fixed;} .navigationShown g#Hamburger:hover {opacity: .8;} .navigationShown g#Hamburger #Line1 { transform: rotate(45deg); } .navigationShown g#Hamburger #Line2 {opacity: 0;} .navigationShown g#Hamburger #Line3 { transform: rotate(-45deg); } .wp-block-group__inner-container {display:block;} .wp-block-group .wp-block-embed-wordpress {width: 100%;} .wp-block-group figure.wp-block-embed-wordpress { padding-bottom: 56.25% ; /*16:9*/ } .listings a { width: calc( ( ( 100vw - 20px ) ) - 20px); margin-bottom: 20px; height: calc( ( ( 100vw - 20px ) - 20px) * (9/16)); } h2.error404 { margin:60px auto; text-align: center; font-size:160px; line-height: 120%; font-family: 'Noe Display'; color:#f82a00; letter-spacing: .1em;} .client-list li {font-size: 26px; font-weight:500; letter-spacing: -1.24px; color: ; box-sizing: border-box; margin-bottom:15px; } }