Edit File: style.css
/* Skin Name: Wedding Version: 1.0 Demo URI: https://themify.me/demo/themes/ultra-wedding/ Required Plugins: builder-contact, builder-maps-pro, builder-countdown, builder-timeline */ /************************************************************************************ GENERAL *************************************************************************************/ body { font: 1.3em/1.6em 'Josefin Sans', sans-serif; color: #505050; } .post-nav .arrow, a { color: #e07368; } a:hover, #footer a:hover, .post-nav a:hover > span, .post-title a:hover { color: #ff887b; } /* form elements */ label { font-size: .85em; font-weight: 600; text-transform: uppercase; } textarea, input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=time], input[type=week] { background: none; border:none; border-bottom: 1px solid #947d7b; border-radius: 0; color: inherit; } textarea { border: 1px solid #947d7b; } select { background: none; border:none; border-bottom: 1px solid #947d7b; width: 100%; max-width: 27.3em; border-radius: 0; } input[type=reset], input[type=submit], button { background-color: #ff887b; padding: .9em 2em; font-size: 1em; font-weight: 400; border-radius: 25px; font-weight: bold; } input[type=reset]:hover, input[type=submit]:hover, button:hover { background-color: #c1aca9; } /************************************************************************************ HEADING *************************************************************************************/ h1, h2, h3, h4, h5, h6 { font-weight: 900; color: inherit; } h1 { font: 400 italic 3.5em/1em 'Playfair Display', serif; margin: 0 0 .5em; letter-spacing: 0; text-transform: none; } h2 { color: #ff887b; font: 400 italic 2.3em/1.4em 'Playfair Display', serif; margin: 0 0 .7em; } h3 { font: bold 1.625em/1.4em 'Josefin Sans', sans-serif; text-transform: none; letter-spacing: 0.02em; } h4 { letter-spacing: .06em; } h5 { font: italic 1.3em/1.6em 'Playfair Display', serif; letter-spacing: 0.02em; margin: 0 0 1em; } /************************************************************************************ HEADER *************************************************************************************/ #headerwrap{ background-color: #fff; } /* MAIN NAVIGATION ================================================ */ #main-nav a { padding: 0.6em; letter-spacing: 0.05em; font-weight: bold; text-transform: uppercase; font-size: .85em; } #main-nav ul a { font-weight: bold; text-transform: uppercase; letter-spacing: 0; } /* active link in transparent header */ .transparent-header #main-nav a:hover, .transparent-header #main-nav .current_page_item > a, .transparent-header #main-nav .current-menu-item > a { color: #ff887b; } /* highlight-link (custom menu class) */ #main-nav li.highlight-link a { background-color: #ff887b; line-height: 2em; padding: 0.3em 1.5em 0; border-radius: 25px; } #headerwrap #main-nav .highlight-link a:hover, #headerwrap #main-nav .highlight-link.current_page_item > a, #headerwrap #main-nav .highlight-link.current-menu-item > a { box-shadow: none; background-color: #ff887b; color: #fff; } /* HEADER MENU SPLIT ================================================ */ .header-menu-split #headerwrap { border-top: 3px solid #ff887b; } /* site logo in split-menu layout */ #main-nav li #site-logo a{ padding-bottom: 0; padding-top: 0; } /* HEADER BOXED LAYOUT ================================================ */ .boxed-layout.fixed-header #headerwrap #site-logo { margin: 0.5em auto 0.1em; } /* HEADER LEFT PANEL ================================================ */ .header-leftpane #headerwrap #menu-icon { background: #ff887b !important; } .header-leftpane #main-nav li.highlight-link a { background: none; border-radius: 0; padding: 0.6em 1em; } .header-leftpane .search-button { margin-right: 0; margin-bottom: 0; } /* HEADER OVERLAY ================================================ */ .header-overlay.mobile-menu-visible #headerwrap { background-color: rgba(68, 52, 50, 0.94); } .header-overlay #main-nav li.highlight-link a { background: none; border-radius: 0; padding: 0.6em 0em; } /* HEADER RIGHT PANEL ================================================ */ .header-rightpane #headerwrap #menu-icon{ background: #ff887b !important; } .header-rightpane #main-nav li.highlight-link a { background: none; border-radius: 0; padding: 0.6em 1em; } /* HEADER STRIPE ================================================ */ .header-stripe #site-logo { background-color: #ff887b; } .header-stripe.fixed-header-on #site-logo { padding: 0.725em 0.75em 0.4em; } .header-stripe.fixed-header-on #main-nav > li > a { padding: 0.975em 0.6em 1.3em } .header-stripe.fixed-header-on #header { background-color: rgba(0, 0, 0, 0); box-shadow: none; } /* HEADER BLOCK ================================================ */ .header-block .search-button { margin: 0; margin-bottom: 3px; } /************************************************************************************ PAGE *************************************************************************************/ .page-title { text-align: center; font-size: 4em; line-height: 1.2em; } /************************************************************************************ Gallary *************************************************************************************/ .image-wrap .zoom, .image-wrap .zoom:hover{ background: none; border-radius: 0; color: #fff; } .module-image.image-overlay a { display: block; } .image-wrap .zoom { width:100%; height: 100%; left: 0; top:0; margin:0; opacity: 0; transition: all 0.3s ease-in 0.1s; } .image-wrap .zoom:before{ font-size: 2.125em; opacity: 0; transition: opacity 0.1s 0s ease-in-out; } .image-wrap .zoom:hover{ background: rgba(255,136,123,0.9); cursor: pointer; opacity: 1; } .image-wrap .zoom:hover:before{ opacity:1; transition-delay: 0.1s; } /************************************************************************************ Timeline *************************************************************************************/ #pagewrap .module-timeline.layout-list > ul::before{ border-right: 1px solid rgba(0, 0, 0, 0.2); margin-top: -0; } #pagewrap .module-timeline.layout-list > ul > li:last-child .module-timeline-content-wrap{ border-bottom:none; padding: 0; } #pagewrap .module-timeline.layout-list .module-timeline-content-wrap{ border-bottom: 1px solid rgba(0,0,0,.1); padding-bottom: 2em; } #pagewrap .module-timeline.layout-list .module-timeline-icon{ background: #ff887b; } #pagewrap .module-timeline.layout-list .module-timeline-date{ text-transform: uppercase; } #pagewrap .module-timeline.layout-list .module-timeline-dot { display: none; } #pagewrap .module-timeline.layout-list .module-timeline-title{ color: #404040; font-family: "Josefin Slab",serif; font-style: normal; font-weight: bold; letter-spacing: 0; } #pagewrap .module-timeline.layout-list .module-timeline-icon .fa-circle-thin:before{ content: ""; background: url(images/timeline-icon.png) no-repeat center center; width: 20px; height: 20px; display: inline-block; padding: 0.375em 0 0; background-size:100%; } /************************************************************************************ FOOTER *************************************************************************************/ #footerwrap { background-color: #302827; color: #c1aca9; } #footerwrap a { color: #ffc6c0; } #footer { font-size: .95em; } /* footer logo */ #footer-logo { margin-bottom: 0.6em; font-size: 2em; } /* back to top */ .footer-horizontal-left .back-top .arrow-up a, .footer-horizontal-right .back-top .arrow-up a, .footer-left-col .back-top .arrow-up a, .footer-right-col .back-top .arrow-up a{ background: #ff887b; } .footer-block #footerwrap .back-top .arrow-up a:hover:before{ color: #c7b1ae; } .footer-block #footerwrap .back-top a:before { font-size: 2.5em } .footer-block .back-top .arrow-up a, .footer-horizontal-left .back-top .arrow-up a, .footer-horizontal-right .back-top .arrow-up a, .footer-left-col .back-top .arrow-up a, .footer-right-col .back-top .arrow-up a { color: #fff; } .footer-block .back-top .arrow-up:hover a, .footer-horizontal-left .back-top .arrow-up:hover a, .footer-horizontal-right .back-top .arrow-up:hover a, .footer-left-col .back-top .arrow-up:hover a, .footer-right-col .back-top .arrow-up:hover a { color: #ff887b; } /* footer social widget */ .footer-block #footer .social-widget { margin: 0 0 1em; } .footer-block #footer .social-widget a{ width: 42px; height: 42px; border-radius: 50%; border: 3px solid; display: inline-block; line-height: 2.375em; text-align: center; } .footer-block #footer .social-widget a:hover{ border-color: #ff887b; } .footer-block #footer .social-widget a:hover i { color: #ff887b; } .footer-block #footer .social-widget{ position: relative; padding-top: 1em; padding-bottom: 1em; } .footer-block #footer .social-widget:after, .footer-block #footer .social-widget:before{ content: ""; background: #463c3a; width: 80px; height: 1px; left: 50%; position: absolute; transform: translateX(-50%); } .footer-block #footer .social-widget:before{ top: 0; } .footer-block #footer .social-widget:after{ bottom: 0; } /************************************************************************************ BUILDER *************************************************************************************/ /* Image Module */ .module-image.image-overlay .image-title { font-weight: normal; } /* Feature module */ .module-feature .module-feature-title { font-size: 1.3em; } /* Contact module */ .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(1), .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(2) { width: 50%; float: left; box-sizing: border-box; } .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(3) { clear: both; } .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(1) { padding-right: 2%; } .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(2) { padding-left: 2%; } /* Countdown Module */ #pagewrap .module-countdown .ui.transparent { padding: .5em 2em; } /* Our Story section */ .our-story-section h3{ margin-bottom: 0.8em; } .our-story-section h2 { position: relative; margin-top: -.9em; padding: 0 1.5625em; background: #fff; display: inline-block; vertical-align: top; } /* Ceremony section */ .ceremony-section h2{ margin-bottom: 0.8em; } .ceremony-section .module-feature-chart-html5 .chart-html5-inset { margin: 1% 12%; } .ceremony-section .module-feature.layout-icon-top .module-feature-image { margin-bottom: 0; } .ceremony-section .module-feature-chart-html5 { height: 100px !important; } /************************************************************************************ MEDIA QUERIES *************************************************************************************/ .mobile_menu_active #site-logo { margin-top: 0; margin-bottom: 0; } @media screen and (min-width: 761px) { /* Timeline */ #pagewrap .module-timeline.layout-list > ul::before { left: 33%; margin-top: -0.3125em; } #pagewrap .module-timeline.layout-list .module-timeline-date { width: 25%; } #pagewrap .module-timeline.layout-list .module-timeline-icon { left: 34%; text-align: center; height: 60px; width: 60px; margin-left: -1.875em; margin-top: -0.625em; } #pagewrap .module-timeline.layout-list .module-timeline-content-wrap { width: 55%; } #pagewrap .module-timeline.layout-list .module-timeline-date { font-size: 1.5em; text-transform: uppercase; } #pagewrap .module-timeline.layout-list .module-timeline-icon i { font-size: 1.1em; font-weight: bold; } #pagewrap .module-timeline.layout-list .module-timeline-title { color: #404040; font-family: "Josefin Slab",serif; font-style: normal; font-weight: bold; letter-spacing: 0; font-size: 1.7em; } #pagewrap .module-timeline.layout-list .module-timeline-icon .fa-circle-thin:before { width: 34px; height: 34px; padding: 1.625em 0 0; } } @media screen and (max-width: 760px) { /* Heading */ h1, .page-title { font-size: 2.4em; } #headerwrap #main-nav a:hover, #headerwrap #main-nav ul a:hover { color: #ff887b; } /* Contact module */ .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(1), .module-contact .builder-contact-fields .builder-contact-field:nth-of-type(2) { width: auto; float: none; padding-left: inherit; padding-right: inherit; } /* highlight link */ #headerwrap #main-nav .highlight-link a:hover, #headerwrap #main-nav .highlight-link.current_page_item > a, #headerwrap #main-nav .highlight-link.current-menu-item > a { background: none; color: #ff887b; border-radius: 0; } } @media screen and (max-width: 680px) { body { font-size: 1.15em; } h1, .page-title { font-size: 1.9em; } h2 { font-size: 1.7em; } h3 { font-size: 1.2em; letter-spacing: 0; } .module-feature .module-feature-title, h4 { font-size: 1.1em; } }
Back to File Manager