Edit File: style.css
/* Skin Name: Photography Version: 1.0.0 Demo URI: https://themify.me/demo/themes/ultra-photography/ Required Plugins: builder-contact, themify-portfolio-post */ /************************************************************************************ GENERAL *************************************************************************************/ body { font: 1.05em/1.6em 'Muli', sans-serif; color: #7d7d7d; } .post-nav .arrow, a { color: #993333; } a:hover, #footer a:hover, .post-nav a:hover > span, .post-title a:hover { color: #000; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; } h3 { font-weight: bold; } h1 { text-transform: none; line-height: .975em; letter-spacing: normal; font-weight: bold; } /* form */ input[type="checkbox"] { border: solid 1px #000; } textarea { resize: vertical; } textarea, input[type=text], input[type=email], input[type=url], input[type=tel] { border-radius: 0; border: none; border-bottom: 1px solid #000; width: 100%; max-width: none; margin: 0; } input[type=reset], input[type=submit], button { background-color: transparent; border-radius: 0; border: 1px solid #000; color: #000; padding: .25em 1.2em .45em 1.4em; font-family: 'Playfair Display', serif; font-weight: bold; font-size: 1.45em; text-transform: none; letter-spacing: -0.025em; } input[type=reset]:hover, input[type=submit]:hover, button:hover { background-color: #000; color: #fff; } textarea { border: 1px solid #000; min-height: 283px; } form p { margin: 0 0 2.9em; } /************************************************************************************ HEADER *************************************************************************************/ #headerwrap { background-color: #fff; background-size: cover; border: none; } #headerwrap.fixed-header { background-color: rgba(255, 255, 255, .9); } .header-overlay.transparent-header #headerwrap.fixed-header, .header-overlay.mobile-menu-visible #headerwrap { background-color: rgba(255, 255, 255, .9); color: #000; } .header-overlay.transparent-header.fixed-header-on .header-icons a, .header-overlay.mobile-menu-visible .header-icons a, .header-overlay.mobile-menu-visible #header, .header-overlay.mobile-menu-visible #header a, .header-overlay.mobile-menu-visible .sidemenu { color: #000; } .header-overlay.transparent-header.fixed-header-on .header-icons a:hover, .header-overlay.mobile-menu-visible .header-icons a:hover, .header-overlay.mobile-menu-visible #header a:hover { color: #993333; } .header-overlay.transparent-header.themify_builder_active #headerwrap { position: relative !important; } /* SITE LOGO ================================================ */ #site-logo { font-family: 'Playfair Display', serif; font-weight: normal; word-break: break-all; text-transform: none; letter-spacing: 0 !important; z-index: 11110; } #site-logo, #site-logo a { transition: none; } /* MAIN NAVIGATION ================================================ */ #main-nav { font-family: 'Playfair Display', serif; } .header-overlay #headerwrap #main-nav { text-align: center; } .header-overlay #main-nav ul a, .header-overlay #main-nav .has-mega-column > .sub-menu, .header-overlay #main-nav li.menu-item-object-tbuilder_layout_part > .sub-menu { text-align: inherit; } /* main level link :hover, current link, sub level link :hover */ #main-nav a:hover, #main-nav ul a:hover, #main-nav .current_page_item > a, #main-nav .current-menu-item > a, #main-nav .mega-menu-posts a:hover { color: #933; } /* MENU ICON ================================================ */ .header-overlay .menu-icon-inner { width: 2em; height: 1.2em; } .header-overlay.mobile-menu-visible .menu-icon-inner { width: 2em; height: 2em; } .header-overlay.mobile-menu-visible #headerwrap #menu-icon-close { font-size: 1.5em; } .header-overlay #menu-icon-close:before, .header-overlay #menu-icon-close:after { border-width: 2px; } /* HEADER STRIPE ================================================ */ .header-stripe #site-logo { background-color: #993333; } /************************************************************************************ PAGE *************************************************************************************/ .page-title { font-family: 'Playfair Display', serif; font-size: 5em; font-weight: bold; text-transform: none; letter-spacing: normal; } /************************************************************************************ POST *************************************************************************************/ /* POST TITLE ================================================ */ .post-title { font-family: 'Playfair Display', serif; font-size: 5em; font-weight: bold; text-transform: none; letter-spacing: normal; } /* POST NAVIGATION ================================================ */ .post-nav .prev .arrow:before, .post-nav .next .arrow:before { content: ''; display: block; width: .7em; height: .7em; border: 1px solid transparent; border-top-color: #933; } .post-nav .prev .arrow:before { border-left-color: #933; transform: rotateZ(-45deg); } .post-nav .next .arrow:before { border-right-color: #933; transform: rotateZ(45deg); } /* COMMENTS ================================================ */ .module-contact label, #commentform label { display: block; font-size: .8em; text-transform: uppercase; letter-spacing: .1em; } /* SLIDER ARROW ================================================ */ .single.single-slider-layout .featured-area .slider.single-slider .carousel-next span, .single.single-slider-layout .featured-area .slider.single-slider .carousel-prev span { display: none; } .single.single-slider-layout .featured-area .slider.single-slider .carousel-next, .single.single-slider-layout .featured-area .slider.single-slider .carousel-prev { max-width: none; max-height: none; transform: none; width: auto; height: auto; overflow: visible; } .single.single-slider-layout .featured-area .slider.single-slider .carousel-prev:before, .single.single-slider-layout .featured-area .slider.single-slider .carousel-next:before { background: none; content: ''; display: block; width: 2.4em; height: 2.4em; padding: 0; border: 1px solid transparent; border-top-color: #fff; transform-origin: center 0; font-size: 100%; } .single.single-slider-layout .featured-area .slider.single-slider .carousel-prev:before { border-left-color: #fff; transform: rotateZ(-45deg); } .single.single-slider-layout .featured-area .slider.single-slider .carousel-next:before { border-right-color: #fff; transform: rotateZ(45deg); } /* SLIDER PAGER/DOT */ .single.single-slider-layout .featured-area .carousel-pager a { border-radius: 0; border-color: transparent; background-color: rgba(138,138,138,.5); margin: 0 6px; transform: rotateZ(45deg); width: 9px; height: 9px; padding: 0; } .single.single-slider-layout .featured-area .carousel-pager a:hover, .single.single-slider-layout .featured-area .carousel-pager a.selected { border-color: rgba(255,255,255,1); border-width: 5px; box-shadow: none; } .single.single-portfolio.single-slider-layout .featured-area .carousel-pager { bottom: 25px; } /* SLIDER PAGER/DOT */ .project-date, .project-client, .project-services, .project-view { color: inherit; font-size: 1.1em; } .project-view a { position: relative; text-decoration: none; } .project-view a:after { content: ""; border-bottom: 1px solid; display: block; padding-top: 8px; opacity: .3; } /* POST DATE ================================================ */ .loops-wrapper.list-post .post-date-wrap:not(.post-date-inline) .post-date, .single .post-content .post-date-wrap:not(.post-date-inline) .post-date { background-color: #993333; } /* POST META */ .post-meta { text-transform: uppercase; opacity: 0.5; margin: 0; } .portfolio .post-meta .post-author:after, .portfolio .post-meta .post-category:after, .portfolio .post-meta .post-tag:after { display: none; } /* POST OVERLAY ================================================ */ .loops-wrapper.overlay .post-image + .post-content, .loops-wrapper.polaroid .post-image + .post-content { background-color: rgba(255,255,255,.8); cursor: pointer; } .loops-wrapper.overlay .post-image + .post-content, .loops-wrapper.polaroid .post-image + .post-content, .loops-wrapper.overlay .post-image + .post-content a, .loops-wrapper.polaroid .post-image + .post-content a { color: #000; } /************************************************************************************ BUILDER STYLE *************************************************************************************/ /* BUILDER SLIDER ARROW ================================================ */ .themify_builder_slider .slide-image { margin: 0; } .themify_builder_slider_wrap.themify_builder_slider_vertical .carousel-prev, .themify_builder_slider_wrap.themify_builder_slider_vertical .carousel-next { background: none; max-width: none; max-height: none; transform: none; width: auto; height: auto; overflow: visible; font-size: 100%; padding: 0; } .themify_builder_slider_wrap.themify_builder_slider_vertical .carousel-prev:before, .themify_builder_slider_wrap.themify_builder_slider_vertical .carousel-next:before { background: none; content: ''; display: block; width: 2.4em; height: 2.4em; padding: 0; border: 1px solid transparent; border-top-color: #fff; transform-origin: center 0; } .themify_builder_slider_wrap.themify_builder_slider_vertical .carousel-prev:before { border-left-color: #fff; transform: rotateZ(-45deg); } .themify_builder_slider_wrap.themify_builder_slider_vertical .carousel-next:before { border-right-color: #fff; transform: rotateZ(45deg); } /* BUILDER SLIDER PAGER/DOT */ .module-slider { margin-bottom: 0; } .themify_builder_slider_wrap .carousel-nav-wrap { padding-top: 0; padding-bottom: 0; } .themify_builder_slider_wrap .carousel-pager { position: absolute; bottom: 35px; width: 100%; } .themify_builder_slider_wrap .carousel-pager a { border-radius: 0; border-color: transparent; background-color: rgba(138,138,138,.5); margin: 0 6px; transform: rotateZ(45deg); width: 9px; height: 9px; padding: 0; } .themify_builder_slider_wrap .carousel-pager a:hover, .themify_builder_slider_wrap .carousel-pager a.selected { border-color: rgba(255,255,255,1); border-width: 5px; box-shadow: none; } /* BUILDER SLIDER OVERLAY */ .module-slider.slider-caption-overlay .slide-content { background-color: rgba(255,255,255,.9); } .module-slider.slider-caption-overlay .slide-content, .module-slider.slider-caption-overlay .slide-content h3 { color: #000; font-size: 1.2em; font-weight: normal; } .module-slider.slider-caption-overlay .slide-image + .slide-content { bottom: 0; } /* BUILDER BACKGROUND SLIDER ================================================ */ .module_row .row-slider-prev, .module_row .row-slider-next { font-size: 100%; } .module_row .row-slider-prev { left: 5px; } .module_row .row-slider-next { right: 5px; } .module_row .row-slider-prev:before, .module_row .row-slider-next:before { width: 2.4em; height: 2.4em; } .module_row .row-slider-dot { border-radius: 0; border-color: transparent; background-color: rgba(255,255,255,1); margin: 0 6px; transform: rotateZ(45deg); width: 9px; height: 9px; padding: 0; } .module_row .row-slider-dot:hover { background-color: rgba(255,255,255,1); border-color: rgba(255,255,255,1); border-width: 5px; box-shadow: none; } .module_column .module-buttons.transparent a { position: relative; } .module_column .module-buttons.transparent a:after { content: ""; border-bottom: 1px solid; display: block; padding-top: 10px; opacity: .3; } /************************************************************************************ FOOTER *************************************************************************************/ #footerwrap { border: none; background-color: #fff; color: #666; font-family: 'Playfair Display', serif; padding-bottom: 0; } #footer a { color: #333; } #footer { font-size: 1.1em; } /* footer logo */ #footer-logo { margin-bottom: .55em; } .footer-horizontal-left #footer-logo, .footer-horizontal-right #footer-logo, .footer-left-col #footer-logo, .footer-right-col #footer-logo { line-height: normal; letter-spacing: -0.02em; text-transform: none; } /* footer social icons */ #footer .social-widget { padding-bottom: 0.7em; } #footer .social-links li:first-child { margin-left: 0; } #footer .social-links li { margin-right: 5px; } /* footer text */ .footer-text { font-style: italic; font-size: .7em; letter-spacing: 0.055em; line-height: 1.65em; } /* back to top */ .footer-horizontal-left .back-top, .footer-horizontal-right .back-top, .footer-left-col .back-top, .footer-right-col .back-top { left: auto; top: auto; right: 0; bottom: 0; line-height: normal; } #pagewrap .back-top.back-top-float, body:not(.footer-block) #footer .back-top .arrow-up a { background-color: #993333; color: #fff; } #pagewrap .back-top.back-top-float:hover, body:not(.footer-block) #footer .back-top .arrow-up a:hover { background-color: #000; } /* footer column */ .footer-left-col .main-col, .footer-right-col .main-col { width: 32%; } .footer-left-col .section-col, .footer-right-col .section-col { width: 64%; } /* Footer Widget */ #footer .footer-widgets .widget { margin: 0 0 4em; } .section-col .footer-widgets { display: table; width: 100%; table-layout: fixed; } .section-col .footer-widgets div[class*="col"] { display: table-cell; float: none; vertical-align: top; } .section-col .footer-widgets div[class*="col"] { position: relative; padding-left: 47px; padding-right: 47px; } .section-col .footer-widgets div[class*="col"]:before { content: ''; display: block; height: 100%; position: absolute; left: 0; border-left: 1px solid #e5e5e5; } body:not(.footer-left-col):not(.footer-right-col) .section-col .footer-widgets { margin-top: 2.5em; } /* footer nav */ #footer .widget .menu li { padding: 0; padding-bottom: .5em; } /************************************************************************************ MOBILE MENU ACTIVE *************************************************************************************/ .mobile_menu_active.header-overlay .menu-icon-inner { width: 1.5em; height: 1em; } .mobile-menu-visible.mobile_menu_active.header-overlay .menu-icon-inner { width: 1.5em; height: 1.5em; border: none; } /************************************************************************************ MEDIA QUERIES *************************************************************************************/ @media screen and (max-width: 680px) { /* Heading */ h1, .page-title { font-size: 2.4em; } /* Footer Column */ .footer-left-col .main-col, .footer-right-col .main-col, .footer-left-col .section-col, .footer-right-col .section-col { width: 100%; } .footer-left-col #footer .widget { margin: 0 0 1em; } .footer-left-col .section-col .footer-widgets div[class*="col"] { display: block; padding-left: 20px; padding-right: 20px; margin-bottom: 20px; } }
Back to File Manager