/* * Template Name: BreezyCV - Resume / CV / vCard / Portfolio Template * Author: LMPixels * Author URL: http://themeforest.net/user/lmpixels * Version: 1.7.0 */ /* ------------------------------------------------------------ 1. Fonts 2. General Styles 3. Page loadig animation 4. Header 5. Page Content 6. Elements 7. Single Page (Blog Posts, 404 etc.) 8. Media Queries 9. Pricing 10. Updates 11. Theme Toggle 12. Blog Posts (Art Journey) 13. Expanding Card 14. Card Width 15. Art Gallery ------------------------------------------------------------ */ /* ------------------------------------------------------------ 1. Fonts ------------------------------------------------------------ */ /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i'); /* Linear Icons Font */ @import url('./fonts/linear-icons-font/style.css'); /* FontAwesome Free Icons Font */ @import url('./fonts/fontawesome-free-5.12.1-web/css/all.min.css'); /* ------------------------------------------------------------ 1b. Theme Colors Every colour that differs between the dark and light theme lives here. The active theme is set by the data-theme attribute on (see js/theme.js). To tweak a theme, edit its block below. When adding new panels, use these variables instead of hard-coded colours so they follow the theme automatically. ------------------------------------------------------------ */ /* Text size for the whole site: every font size is multiplied by this. 1 = the template's original sizes. Raise or lower it to resize all text. */ :root { --font-scale: 1.13; } :root, [data-theme="dark"] { --accent: #5050f5; --body-bg-color: #5050f5; --body-bg: linear-gradient(#9d2bf3, #5050f5); --page-content-bg: #444; --bg-primary: #222; /* sections, pages, popups */ --bg-secondary: #444; /* cards, menus, tags */ --bg-tertiary: #333; /* info blocks, meta boxes */ --bg-card: #333; /* pricing, fun facts */ --subtle-bg: #444; /* timeline divider, ajax nav */ --certificate-logo-bg: #444; --mobile-header-bg: #444; --mobile-arrows-bg: rgba(0,0,0,.6); --text-color: #d5d5d5; --heading-color: #eee; --strong-text-color: #f5f5f5; --header-title-color: #f5f5f5; --header-subtitle-color: #bbb; --meta-text-color: #aaa; --nav-link-color: #b5b5b5; /* ajax page nav, share buttons */ --filter-link-color: #aaa; --carousel-nav-color: #d5d5d5; --tag-text-color: #e5e5e5; --entry-meta-link-color: #b5b5b5; --pricing-text-color: #f5f5f5; --border-color: #444; --input-border-color: #999; --testimonial-border-color: #444; --post-info-border-color: #444; --entry-meta-border-color: #444; --share-border-color: #222; --btn-bg: transparent; --btn-shadow: rgba(0,0,0,.3); --btn-secondary-shadow: rgba(0,0,0,.3); --btn-secondary-text-color: #f5f5f5; } [data-theme="light"] { --accent: #5e2fd6; --body-bg-color: #f1edf7; --body-bg: #f1edf7; --page-content-bg: linear-gradient(#9d2bf3, #5050f5); --bg-primary: #fff; --bg-secondary: #fff; --bg-tertiary: #fcfcfc; --bg-card: #fff; --subtle-bg: #eee; --certificate-logo-bg: #f5f5f5; --mobile-header-bg: #5e2fd6; --mobile-arrows-bg: rgba(255,255,255,.6); --text-color: #555; --heading-color: #222; --strong-text-color: #222; --header-title-color: #fff; --header-subtitle-color: #fff; --meta-text-color: #888; --nav-link-color: #888; --filter-link-color: #666; --carousel-nav-color: #666; --tag-text-color: #666; --entry-meta-link-color: #9e9e9e; --pricing-text-color: #333; --border-color: #e5e5e5; --input-border-color: #d5d6d7; --testimonial-border-color: #e5e6e7; --post-info-border-color: #f5f5f5; --entry-meta-border-color: #eee; --share-border-color: #e5e5e5; --btn-bg: #fff; --btn-shadow: rgba(0,0,0,.22); --btn-secondary-shadow: #d5d5d5; --btn-secondary-text-color: #666; } /* ------------------------------------------------------------ 2. General Styles ------------------------------------------------------------ */ html { margin: 0; width: 100%; height: 100%; min-height: 100%; overflow: hidden; } body { background-color: var(--body-bg-color); background: var(--body-bg); margin: 0; width: 100%; height: 100%; min-height: 100%; font-size: calc(15px * var(--font-scale)); font-family: 'Poppins', Helvetica, sans-serif; line-height: 1.65em; overflow: hidden; color: var(--text-color); background-repeat: no-repeat; background-position: center; background-position: 50% 50%; background-size: cover; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: 'Poppins', Helvetica, sans-serif; font-weight: 600; } h1 { font-size: calc(32px * var(--font-scale)); } h2 { font-size: calc(27px * var(--font-scale)); } h3 { font-size: calc(21px * var(--font-scale)); } h4 { font-size: calc(18px * var(--font-scale)); } h5 { font-size: calc(16px * var(--font-scale)); } h6 { font-size: calc(14px * var(--font-scale)); } a { color: #0099cc; text-decoration: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } p { margin-bottom: 10px; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .page { display: block; width: 100%; height: 100%; min-height: 100%; padding: 0 100px; overflow: hidden; } .page-content { position: relative; width: 100%; max-width: 1280px; min-height: 80vh; margin: 10vh auto; padding: 0; background: var(--page-content-bg); -webkit-box-shadow: 0 0 100px -5px rgba(0,0,0,.25); -moz-box-shadow: 0 0 100px -5px rgba(0,0,0,.25); box-shadow: 0 0 100px -5px rgba(0,0,0,.25); border-radius: 32px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } /* buttons */ .btn-primary, .btn-secondary, button, input[type="button"], input[type="submit"], .wp-block-button .wp-block-button__link { display: inline-block; position: relative; padding: .8em 2.1em; margin-bottom: .75em; margin-right: .25em; font-size: 1em; line-height: 1.2; border: 0; outline: 0; border: 2px solid var(--accent); color: var(--strong-text-color); text-shadow: none; background-color: var(--btn-bg); border-radius: 30px; font-family: 'Poppins', Helvetica, sans-serif; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; box-shadow: 0px 10px 10px -8px var(--btn-shadow); } .btn-primary:last-child, .btn-secondary:last-child, button:last-child, input[type="button"]:last-child, input[type="submit"]:last-child, .wp-block-button .wp-block-button__link:last-child { margin-right: 0; } .btn-primary:hover, .btn-primary:focus, button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { background-color: var(--accent); color: #fff; border: 2px solid var(--accent); cursor: pointer; } .btn-secondary { border-color: #d5d5d5; background-color: var(--btn-bg); box-shadow: 0px 10px 10px -8px var(--btn-secondary-shadow); color: var(--btn-secondary-text-color); } .btn-secondary:hover, .btn-secondary:focus { color: #333; border-color: #d5d5d5; background-color: #d5d5d5; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* ============================================================================= 3. Page loadig animation ============================================================================= */ .no-js .preloader, .no-js .preloader-portfolio { display: none; } .preloader, .preloader-portfolio { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: var(--bg-primary); } .preloader-animation { position: absolute; top: 50%; left: 50%; text-align: center; background-color: inherit; color: inherit; opacity: 1; transition: opacity 0.3s; transform: translate3d(-50%,-50%,0); } .preloader-spinner { width: 52px; height: 52px; margin: 100px auto; background-color: var(--accent); border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } /* ------------------------------------------------------------ 4. Header ------------------------------------------------------------ */ @media only screen and (min-width: 1025px) { .header { display: inline-block; float: left; width: 100%; max-width: 380px; height: 100%; max-height: 80vh; min-height: inherit; text-align: center; padding: 70px 30px 45px; overflow: auto; } .header-titles { } /* --- Navigation --- */ ul.main-menu { position: absolute; padding: 15px 0; width: 70px; right: -90px; background-color: var(--bg-secondary); border-radius: 35px; z-index: 999; list-style: none; top: 0; -webkit-box-shadow: 0 0 30px -5px rgba(0,0,0,.15); -moz-box-shadow: 0 0 30px -5px rgba(0,0,0,.15); box-shadow: 0 0 30px -5px rgba(0,0,0,.15); } ul.main-menu a { display: block; position: relative; color: #b5b6b7; padding: 10px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ul.main-menu a.active, ul.main-menu a:focus, ul.main-menu a:hover { color: var(--accent); } ul.main-menu .menu-icon { display: block; font-size: calc(30px * var(--font-scale)); } ul.main-menu .link-text { position: absolute; width: auto; visibility: hidden; opacity: 0; color: #fff; padding: 2px 10px; background-color: var(--accent); white-space: nowrap; right: 0; top: -50%; margin-top: 50%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 0; box-shadow: 0px 10px 10px -8px rgba(0,0,0,.22); } ul.main-menu a:hover .link-text { right: 100%; visibility: visible; opacity: 1; } /* --- End Navigation --- */ } /* --- LMPixels Arrow Nav --- */ .lmpixels-arrows-nav { position: absolute; padding: 10px 0; width: 60px; right: -80px; background-color: var(--bg-secondary); border-radius: 35px; z-index: 98; list-style: none; bottom: 0; -webkit-box-shadow: 0 0 30px -5px rgba(0,0,0,.15); -moz-box-shadow: 0 0 30px -5px rgba(0,0,0,.15); box-shadow: 0 0 30px -5px rgba(0,0,0,.15); } .lmpixels-arrows-nav div { display: block; position: relative; text-align: center; color: #b5b6b7; padding: 10px; font-size: calc(24px * var(--font-scale)); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .lmpixels-arrows-nav div:hover { color: var(--accent); } /* --- End LMPixels Arrow Nav --- */ .header-photo { position: relative; width: 180px; margin: 0 auto 30px; z-index: 1; } .header-photo img { max-width: 100%; background-color: #fff; border: 3px solid #fff; border-radius: 300px; } .header-photo:after { position: absolute; opacity: 0.3; top: 7%; left: 7%; border-radius: 300px; content: ''; height: calc(100% + 0px); width: calc(100% + 0px); background-image: -webkit-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%); background-image: -moz-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%); background-image: -ms-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%); -webkit-background-size: 6px 6px; -moz-background-size: 6px 6px; background-size: 6px 6px; z-index: -1; } .header-titles h2 { font-size: calc(36px * var(--font-scale)); font-weight: 600; color: var(--header-title-color); margin: 5px 0 7px; line-height: 1.2em; } .header-titles h4 { font-size: calc(18px * var(--font-scale)); font-weight: 300; color: var(--header-subtitle-color); margin: 5px 0; line-height: 1.2em; } /* --- Social Links --- */ .social-links { margin: 20px 0; } .social-links ul { list-style: none; padding: 0; } .social-links ul li { display: inline-block; } .social-links ul li a { color: #fff; border-radius: 20px; font-size: calc(18px * var(--font-scale)); padding: 0; height: 30px; width: 30px; display: block; line-height: 30px; text-align: center; opacity: .9; } .social-links ul li a:hover { opacity: 1; background-color: rgba(255,255,255,.2); } /* --- End Social Links --- */ .header-buttons { margin-top: 50px; } .header-buttons .btn-primary { background-color: transparent; color: var(--header-title-color); border-color: var(--header-title-color); } .header-buttons .btn-primary:hover { background-color: #fff; color: var(--accent); border-color: #fff; } .header .copyrights { color: var(--header-subtitle-color); width: 380px; position: absolute; bottom: 0; left: 0; padding: 5px 10px 15px; line-height: 14px; font-size: calc(12px * var(--font-scale)); text-align: center; } /* ------------------------------------------------------------ 5. Page Content ------------------------------------------------------------ */ .content-area { position: absolute; right: 0; background-color: transparent; height: 100%; width: 100%; max-width: calc(100% - 380px); } /* Let the card overlap the frame by 1px on the top, right and bottom so the frame's background (the gradient in light mode) can't bleed through the anti-aliased edges as a thin coloured line. */ @media only screen and (min-width: 1025px) { .content-area { top: -1px; right: -1px; height: calc(100% + 2px); } } .animated-sections { position: relative; height: 100%; -webkit-perspective: 1500px; -moz-perspective: 1500px; perspective: 1500px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .animated-section { position: absolute; background-color: transparent; height: 100%; width: 100%; border-radius: 30px; padding: 0; opacity: 0; overflow: auto; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); background-repeat: no-repeat; background-position: center; background-position: 50% 50%; background-size: cover; } .section-content { background-color: var(--bg-primary); padding: 60px; position: relative; height: auto; width: 100%; min-width: 100%; min-height: 100%; -webkit-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -ms-transform: none; } .single-page-content { position: absolute; background-color: var(--bg-primary); height: 100%; width: 100%; border-radius: 30px; padding: 60px; overflow: auto; } .section-active, .no-js .animated-section { opacity: 1; overflow: auto; visibility: visible; z-index: 99; } /* --- Custom ScrollBar Customization --- */ .ps>.ps__scrollbar-y-rail { margin-right: 10px; margin-top: 30px; margin-bottom: 30px; border-radius: 20px; } .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y { background-color: #b5b6b7; } [data-theme="dark"] .ps:hover>.ps__scrollbar-y-rail:hover { background-color: #444; } .ps:hover>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y { background-color: var(--accent); } .ps>.ps__scrollbar-y-rail { width: 12px; } .ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y, .ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y, .ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y, .ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y { width: 8px; } [data-theme="dark"] .ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail { background-color: #555; } [data-theme="dark"] .ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y { background-color: var(--accent); } /* Reaching the end of a section doesn't carry on scrolling the page behind it */ .animated-section, .single-page-content { overscroll-behavior: contain; } /* The card's own (native) scrollbar, kept off the rounded corners (30px) */ .animated-section::-webkit-scrollbar, .single-page-content::-webkit-scrollbar { width: 8px; } .animated-section::-webkit-scrollbar-track, .single-page-content::-webkit-scrollbar-track { background-color: transparent; } /* Chrome/Edge: shorten the track (blog and project pages) */ .single-page-content::-webkit-scrollbar-track { margin: 30px 0; } /* Firefox-based browsers can't shorten the track, so there it's thin and coloured to match (Chrome skips this, or it would ignore the rules above) */ @supports (-moz-appearance: none) { .animated-section, .single-page-content { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } } /* Main card: 30px bands at the top and bottom, the same colour as the card, so the scroll area (and its scrollbar) starts and ends inside the curve in every browser. The section padding shrinks by 30px so nothing moves. */ @media only screen and (min-width: 1025px) { .animated-section { border-top: 30px solid var(--bg-primary); border-bottom: 30px solid var(--bg-primary); /* No lighter hairline where the bands meet the content */ background-color: var(--bg-primary); } .animated-section .section-content { padding-top: 30px; padding-bottom: 30px; } } .animated-section::-webkit-scrollbar-thumb, .single-page-content::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 4px; } .animated-section::-webkit-scrollbar-thumb:hover, .single-page-content::-webkit-scrollbar-thumb:hover { background-color: var(--accent); } /* --- End Custom ScrollBar Customization --- */ .page-title { display: inline-block; position: relative; padding-right: 25px; padding-bottom: 15px; margin-bottom: 30px; } .page-title h2 { position: relative; font-size: calc(32px * var(--font-scale)); z-index: 1; } .page-title h2 span { color: var(--accent); } .page-title:after { position: absolute; opacity: 0.45; top: 10px; right: 0; content: ''; height: 30px; width: 50px; background-image: -webkit-repeating-radial-gradient(center center, var(--accent), var(--accent) 1px, transparent 0px, transparent 100%); background-image: -moz-repeating-radial-gradient(center center, var(--accent), var(--accent) 1px, transparent 0px, transparent 100%); background-image: -ms-repeating-radial-gradient(center center, var(--accent), var(--accent) 1px, transparent 0px, transparent 100%); -webkit-background-size: 6px 6px; -moz-background-size: 6px 6px; background-size: 6px 6px; z-index: 0; } /* Form controls */ .form-group { position: relative; margin: 0 0 21.5px; } .form-control, .form-control:focus { height: 42px; } .form-control, .form-control:focus, .has-error .form-control, .has-error .form-control:focus, input[type="search"], input[type="password"], input[type="text"] { position: relative; border: 2px solid var(--input-border-color); border-radius: 5px; display: block; font-size: 1em; line-height: 1.4; margin: 0; padding: 10px 25px 10px 12px; width: 100%; background: 0 0; background-color: transparent; text-align: left; color: inherit; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: none; font-family: 'Poppins', Helvetica, sans-serif; box-shadow: 0px 10px 10px -8px rgba(0,0,0,.1); } textarea.form-control, textarea.form-control:focus { height: auto; } .form-control ~ .form-control-border { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; border-radius: 5px; top: 0; opacity: 0; background: transparent; border: 2px solid var(--accent); border-right-width: 0; height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .form-control:focus ~ .form-control-border { left: 0; right: 0; height: 100%; z-index: 1; opacity: 1; border-right-width: 2px; } .has-error .form-control ~ .form-control-border { border-color: #ff4c4c; } /* Placeholders */ .form-control::-moz-placeholder { color: #adadac; } .form-control:-ms-input-placeholder { color: #adadac; } .form-control::-webkit-input-placeholder { color: #adadac; } /* /Placeholders */ .form-group .help-block { position: absolute; display: inline-block; padding: 0px 5px; font-size: 0.93em; line-height: 1.75em; margin: -2px 0 0 10px; color: #fff; background: #ff4e4e; } .form-group .help-block:after { content: " "; position: absolute; left: 5px; bottom: 100%; width: 0; height: 0; border-bottom: 10px solid #ff4e4e; border-right: 10px solid transparent; } .form-group .help-block:empty { display: none; } .form-group-with-icon i { position: absolute; font-size: calc(16px * var(--font-scale)); top: 13px; right: 13px; color: #d3d3d3; } .form-group-with-icon.form-group-focus i { color: var(--accent); } .form-group.form-group-w-checkbox { padding-top: 0; padding-bottom: 8px; margin-bottom: 17px; } .form-group-with-icon.form-group-w-checkbox { padding-top: 8px; padding-left: 52px; margin-bottom: 25px; } .form-group .form-control-checkbox + label, .form-group.form-group-focus .form-control-checkbox + label { position: relative; display: inline; left: 0; top: 0; font-size: 1em; opacity: 1; } .form-group .form-control-checkbox, .form-group.form-group-focus .form-control-checkbox { display: inline-block; width: auto; height: auto; top: 2px; } .form-group.form-group-w-checkbox .help-block { top: 100%; left: 0; margin-left: 0; } .form-group.form-group-with-icon.form-group-w-checkbox .help-block { left: 52px; } .form-group label { position: absolute; top: 10px; left: 15px; z-index: -1; color: #a5a6a7; transition: 0.3s; } .form-group .form-control:focus ~ label, .form-group.form-group-focus .form-control ~ label { color: var(--accent); top: -20px; left: 0; z-index: 1; font-size: calc(13px * var(--font-scale)); } .form-control, .form-control:focus, .has-error .form-control, .has-error .form-control:focus, input[type="search"], input[type="password"], input[type="text"], .header-search input.form-control { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); } /* /Form controls */ /* ------------------------------------------------------------ 6. Elements ------------------------------------------------------------ */ .block-title { display: inline-block; position: relative; padding-right: 12px; padding-bottom: 10px; margin-bottom: 15px; } .block-title h3 { position: relative; font-size: calc(21px * var(--font-scale)); z-index: 1; } .block-title h3 span { color: var(--accent); } .block-title:after { position: absolute; opacity: 0.45; top: 10px; right: 0; content: ''; height: 20px; width: 30px; background-image: -webkit-repeating-radial-gradient(center center, var(--accent), var(--accent) 1px, transparent 0px, transparent 100%); background-image: -moz-repeating-radial-gradient(center center, var(--accent), var(--accent) 1px, transparent 0px, transparent 100%); background-image: -ms-repeating-radial-gradient(center center, var(--accent), var(--accent) 1px, transparent 0px, transparent 100%); -webkit-background-size: 6px 6px; -moz-background-size: 6px 6px; background-size: 6px 6px; z-index: 0; } /* --- White Spaces --- */ .white-space-10 { padding-bottom: 10px; } .white-space-20 { padding-bottom: 20px; } .white-space-30 { padding-bottom: 30px; } .white-space-40 { padding-bottom: 40px; } .white-space-50 { padding-bottom: 50px; } .white-space-60 { padding-bottom: 60px; } .white-space-70 { padding-bottom: 70px; } /* --- End White Spaces --- */ /* --- Simple Info List --- */ .info-list ul { list-style: none; padding: 0; margin: 0; } .info-list ul li { margin-bottom: 10px; } .info-list .title { color: var(--accent); margin-right: 5px; font-weight: 600; } /* Long values (e.g. the email) wrap instead of spilling out of the column */ .info-list .value { overflow-wrap: anywhere; } /* The email is a link: same colour as the other values, accent on hover */ .info-list a.value { color: inherit; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .info-list a.value:hover { color: var(--accent); } /* Stacked version (About Me): icon, small label above a larger value */ .info-list-stacked ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; margin-bottom: 20px; } .info-list-stacked ul li:last-child { margin-bottom: 0; } .info-list-stacked .info-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; width: 44px; height: 44px; border: 2px solid var(--border-color); border-radius: 50%; color: var(--accent); font-size: calc(18px * var(--font-scale)); } .info-list-stacked .info-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .info-list-stacked .title { margin: 0 0 2px; font-size: calc(11px * var(--font-scale)); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; } .info-list-stacked .value, .info-list-stacked a.value { font-size: calc(17px * var(--font-scale)); font-weight: 500; line-height: 1.4; color: var(--heading-color); } .info-list-stacked a.value:hover { color: var(--accent); } .info-list-stacked li:hover .info-icon { border-color: var(--accent); } /* --- End Simple Info List --- */ /* --- Info block with Icon --- */ .info-block-w-icon { margin-bottom: 25px; } .info-block-w-icon .ci-text h4 { margin: 5px 0; } .info-block-w-icon .ci-text p { font-size: .95em; } .info-block-w-icon .ci-icon { display: table-cell; width: 54px; padding-right: 25px; } /* Only the big icon on the left, not italics inside the text */ .info-block-w-icon .ci-icon i { position: relative; font-size: calc(42px * var(--font-scale)); color: var(--accent); opacity: .7; } /* --- End Info block with Icon --- */ /* --- Info Block with Borders --- */ .lm-info-block { position: relative; text-align: center; width: 100%; display: block; margin: 0 0 15px 0; background-color: var(--bg-tertiary); padding: 20px 10px; border: 1px solid var(--border-color); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .lm-info-block i { position: relative; font-size: calc(33px * var(--font-scale)); color: var(--accent); z-index: 1; } .lm-info-block h4 { font-size: calc(15px * var(--font-scale)); margin-top: 8px; } .lm-info-block .lm-info-block-value { font-size: calc(30px * var(--font-scale)); line-height: 30px; font-weight: 400; display: block; margin: 10px 0; color: var(--accent); } .lm-info-block .lm-info-block-value:empty { margin: 0; } /* --- End of Info Block with Borders --- */ /* --- Testimonials --- */ .testimonial { text-align: center; border: 2px solid var(--testimonial-border-color); border-radius: 20px; margin: 45px 2px 10px; padding: 0 25px 15px 25px; } .testimonial img { max-width: 90px; max-height: 90px; margin: -45px auto 20px; border-radius: 90px; box-shadow: 0px 10px 10px -8px rgba(0,0,0,.22); } .testimonial .text { text-align: left; font-style: italic; } .testimonial .author-info { position: relative; text-align: left; margin-top: 20px; } .testimonial .author-info .icon { content: ''; position: absolute; font-size: calc(30px * var(--font-scale)); right: 0; top: 7px; color: var(--accent); opacity: .5; } .testimonial .author-info .author { margin: 0; font-size: calc(15px * var(--font-scale)); } .testimonial .author-info .company { color: #a5a6a7; font-size: calc(13px * var(--font-scale)); font-weight: 300; margin: 0; } /* Testimonial without a photo (the template card expects one at the top) */ .testimonial.no-photo { margin-top: 10px; padding: 25px 30px 20px; } /* Keep the author's details clear of the quote icon on the right */ .testimonial .author-info { padding-right: 45px; } /* --- End of Testimonials --- */ /* --- Clients --- */ .clients.owl-carousel .client-block { padding: 15px; margin-bottom: 15px; } .client-block { text-align: center; padding: 5px 0; margin-bottom: 30px; opacity: .7; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } /* --- End of Clients --- */ /* --- Sliders Nav --- */ .testimonials.owl-carousel .owl-nav, .clients.owl-carousel .owl-nav { position: absolute; text-align: right; right: 0; top: -52px; } .testimonials.owl-carousel .owl-nav .owl-prev, .testimonials.owl-carousel .owl-nav .owl-next, .clients.owl-carousel .owl-nav .owl-prev, .clients.owl-carousel .owl-nav .owl-next { position: relative; display: inline-block; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 5px; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; font-family: "Font Awesome 5 Free"; font-size: calc(11px * var(--font-scale)); font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; color: var(--carousel-nav-color); } .testimonials.owl-carousel .owl-nav .owl-prev, .clients.owl-carousel .owl-nav .owl-prev { margin-right: 3px; } .testimonials.owl-carousel .owl-nav .owl-prev:before, .testimonials.owl-carousel .owl-nav .owl-next:before, .clients.owl-carousel .owl-nav .owl-prev:before, .clients.owl-carousel .owl-nav .owl-next:before { position: relative; margin: 2px; width: 22px; height: 22px; line-height: 22px; text-align: center; display: block; cursor: pointer; color: inherit; z-index: 1; } .testimonials.owl-carousel .owl-nav .owl-prev:before, .clients.owl-carousel .owl-nav .owl-prev:before { content: "\f053"; } .testimonials.owl-carousel .owl-nav .owl-next:before, .clients.owl-carousel .owl-nav .owl-next:before { content: "\f054"; } .testimonials.owl-carousel .owl-nav .owl-prev:hover, .testimonials.owl-carousel .owl-nav .owl-next:hover, .clients.owl-carousel .owl-nav .owl-prev:hover, .clients.owl-carousel .owl-nav .owl-next:hover { background-color: var(--accent); border-color: var(--accent); color: #fff; } /* --- End of Sliders Nav --- */ /* --- Timeline (Education & Experience) --- */ .timeline-second-style .timeline-item { position: relative; display: table; table-layout: fixed; width: 100%; padding-bottom: 15px; } .timeline-second-style .timeline-item:last-child { padding-bottom: 0; } .timeline-second-style .left-part { width: 30%; display: table-cell; padding-right: 25px; min-height: 100%; text-align: right; vertical-align: top; } .timeline-second-style .right-part { width: 70%; display: table-cell; padding-left: 25px; padding-right: 15px; vertical-align: top; } .timeline-second-style .right-part p, .timeline-second-style .right-part p > * { font-size: 0.92em; } .timeline-second-style .divider { position: absolute; top: 0; left: 30%; bottom: 0; width: 1px; background-color: var(--subtle-bg); } .timeline-second-style .divider:before { content: ''; display: block; position: absolute; margin-top: 4px; width: 17px; height: 17px; position: absolute; margin-left: -8px; border-radius: 10px; background-color: var(--accent); opacity: .25; z-index: 0; } .timeline-second-style .divider:after { content: ''; display: block; position: absolute; margin-top: 8px; width: 9px; height: 9px; margin-left: -4px; background-color: var(--bg-primary); border-radius: 5px; border: 2px solid var(--accent); z-index: 1; } .timeline-second-style .item-title { font-size: calc(16px * var(--font-scale)); margin-bottom: 3px; } .timeline-second-style .item-period { margin: 3px 0; font-size: calc(14px * var(--font-scale)); line-height: 1.4em; } [data-theme="dark"] .timeline-second-style .item-period { color: #aaa; } .timeline-second-style .item-company { display: block; margin: 0 0 4px; font-size: calc(13px * var(--font-scale)); font-weight: 300; line-height: 1.45em; color: #a5a6a7; } .timeline-second-style .timeline-item:last-child .right-part { padding-bottom: 0; } .timeline-second-style .item-logo { display: block; margin-bottom: 10px; } .timeline-second-style .item-logo img { max-height: 40px; } /* --- End Timeline (Education & Experience) --- */ /* --- Skills --- */ /* Skills Second Style */ .skills-info.skills-second-style { margin-bottom: 30px; } .skills-info.skills-second-style h4 { font-size: calc(13px * var(--font-scale)); line-height: 1.1em; position: relative; float: left; margin: 0 0 4px; } .skills-second-style .skill-container { position: relative; display: inline-block; background-color: var(--bg-primary); border: 1px solid var(--accent); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 10px; margin-bottom: 8px; width: 100%; } .skills-second-style .skill-container:before { content: ''; position: absolute; background-color: var(--accent); } .skills-second-style .skill-value { font-size: calc(11px * var(--font-scale)); line-height: 1.1em; position: relative; float: right; margin: 0 0 4px; color: #aaa; } .skills-second-style .skill-percentage { background-color: var(--accent); border: 2px solid var(--bg-primary); -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; height: 8px; padding: 0; } /* --- Skills Values --- Fallback widths only: js/main.js sets each bar from the percentage in its .skill-value, so the skill-1...skill-9 classes no longer need to match. */ .skills-second-style .skill-container.skill-1 .skill-percentage { width: 95%; } .skills-second-style .skill-container.skill-2 .skill-percentage { width: 65%; } .skills-second-style .skill-container.skill-3 .skill-percentage { width: 80%; } .skills-second-style .skill-container.skill-4 .skill-percentage { width: 90%; } .skills-second-style .skill-container.skill-5 .skill-percentage { width: 95%; } .skills-second-style .skill-container.skill-6 .skill-percentage { width: 85%; } .skills-second-style .skill-container.skill-7 .skill-percentage { width: 100%; } .skills-second-style .skill-container.skill-8 .skill-percentage { width: 75%; } .skills-second-style .skill-container.skill-9 .skill-percentage { width: 90%; } /* --- End of Skills Values --- */ /* Animate skills on subpage load */ .pt-page .skills-second-style .skill-percentage, .pt-page .skills-second-style .skill-value { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } .js .subpages:not(.one-page-layout) .pt-page:not(.pt-page-current) .skills-second-style .skill-percentage { width: 0 !important; } .js .subpages:not(.one-page-layout) .pt-page:not(.pt-page-current) .skills-second-style .skill-value { left: 26px !important; } /* /Skills Second Style */ /* --- End of Skills --- */ /* --- Knowledges --- */ .knowledges { list-style: none; } .knowledges li {; display: inline-block; background-color: var(--accent); border-radius: 3px; color: #fff; padding: 1px 10px; margin: 3px 2px; font-size: calc(13px * var(--font-scale)); } /* --- End of Knowledges --- */ /* --- Certificates --- */ .certificate-item { position: relative; display: table; table-layout: fixed; width: 100%; border: 2px solid var(--border-color); border-radius: 8px; margin-bottom: 20px; -webkit-transition: all 2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .certi-logo { display: table-cell; width: 120px; height: 100%; background-color: var(--certificate-logo-bg); padding: 25px; vertical-align: middle; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .certi-logo img { display: block; max-width: 100%; } .certi-content { display: table-cell; width: 100%; padding: 20px 25px; vertical-align: middle; } .certi-title h4 { font-size: calc(16px * var(--font-scale)); margin: 0 0 5px; } .certi-id { font-size: .9em; color: #777; } .certi-date { font-size: .7em; color: #777; opacity: .7; } /* --- End of Certificates --- */ /* --- Contact Form --- */ .controls.two-columns .left-column { width: 47%; float: left; margin-right: 3%; } .controls.two-columns .right-column { width: 50%; float: right; } .g-recaptcha { margin-bottom: 20px; } /* --- End of Contact Form --- */ /* --- Google Map --- */ .lmpixels-map { width: 100%; margin: 0 0 35px; } .lmpixels-map iframe { height: 140px; max-width: 100%; width: 100%; margin: 0; line-height: 1; border: none; } /* --- End of Google Map --- */ /* --- Portfolio --- */ .portfolio-filters { margin-bottom: 30px; } .portfolio-filters li { display: inline-block; margin-right: 15px; font-size: calc(13px * var(--font-scale)); opacity: 0.7; } .portfolio-filters li.active { opacity: 1; } .portfolio-filters li a { color: var(--filter-link-color); cursor: pointer; } .portfolio-grid { margin-left: -7px; margin-right: -7px; } .portfolio-grid figure { width: 33.33333%; float: left; padding: 7px; position: relative; overflow: hidden; } .portfolio-grid.one-column figure { width: 100%; } .portfolio-grid.two-columns figure { width: 50%; } .portfolio-grid.three-columns figure { width: 33.33333%; } .portfolio-grid.four-columns figure { width: 25%; } .portfolio-grid.five-columns figure { width: 20%; } .portfolio-grid img { position: relative; display: block; width: 100%; } .portfolio-grid figure a, .portfolio-rid figure img { display: block; position: relative; } .portfolio-grid figure img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio-grid figure:hover img { transform: scale(1.1); } .portfolio-grid figure a { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 3; } .portfolio-item-img { position: relative; overflow: hidden; } .portfolio-grid figure .portfolio-item-img:after { content: ''; position: absolute; background-color: rgba(0,0,0,.05); top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio-grid figure:hover .portfolio-item-img:after { opacity: 1; } .portfolio-item-desc { margin-top: 12px; } .portfolio-item-desc h4 { margin-bottom: 0; } .portfolio-item-desc small { color: #888; } .portfolio-grid figure i { display: inline-block; position: absolute; top: 15px; right: 15px; font-size: calc(16px * var(--font-scale)); opacity: 0; width: 30px; height: 30px; background-color: var(--bg-primary); color: var(--accent); text-align: center; line-height: 30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio-grid figure .name { display: block; padding: 15px 0; font-size: calc(16px * var(--font-scale)); position: relative; } .portfolio-grid figure .category { display: inline-block; padding: 2px 7px; background-color: var(--bg-primary); color: var(--strong-text-color); font-size: calc(11px * var(--font-scale)); line-height: 1.2em; top: 15px; left: 15px; position: absolute; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio-grid figure:hover i, .portfolio-grid figure:hover .name, .portfolio-grid figure:hover .category { opacity: 1; } /* Portfolio overview ("All" tab): one scrollable row per category */ .portfolio-content .is-hidden { display: none; } /* Contain the floated items of the category grid */ .portfolio-full-grid:after { content: ''; display: table; clear: both; } /* Fade used for every portfolio tab switch */ .portfolio-view-enter { -webkit-animation: portfolioFadeIn .25s ease-out both; animation: portfolioFadeIn .25s ease-out both; } @-webkit-keyframes portfolioFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes portfolioFadeIn { from { opacity: 0; } to { opacity: 1; } } .portfolio-row + .portfolio-row { margin-top: 25px; } .portfolio-row-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .portfolio-row-header .block-title { margin-bottom: 5px; } .portfolio-show-more { margin: 0 0 5px 18px; font-size: calc(12px * var(--font-scale)); color: var(--filter-link-color); cursor: pointer; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .portfolio-show-more .lnr { display: inline-block; margin-left: 3px; font-size: calc(11px * var(--font-scale)); -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .portfolio-show-more:hover { color: var(--accent); } .portfolio-show-more:hover .lnr { transform: translateX(3px); } .portfolio-grid.portfolio-row-track { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; padding-bottom: 6px; } .portfolio-grid.portfolio-row-track:hover { scrollbar-color: var(--accent) transparent; } .portfolio-row-track::-webkit-scrollbar { height: 6px; } .portfolio-row-track::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; } .portfolio-row-track:hover::-webkit-scrollbar-thumb { background-color: var(--accent); } .portfolio-row-track::-webkit-scrollbar-track { background-color: transparent; } /* About three thumbnails fit, with the next one peeking in to show it scrolls */ .portfolio-grid.portfolio-row-track figure { float: none; -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; width: auto; scroll-snap-align: start; } .portfolio-grid.portfolio-row-track figure .name { padding: 12px 0 5px; font-size: calc(15px * var(--font-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Arrow at the end of each row */ .portfolio-row-more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -ms-flex: 0 0 90px; flex: 0 0 90px; padding: 7px 7px 45px; scroll-snap-align: end; } .portfolio-row-more-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 50px; height: 50px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: calc(18px * var(--font-scale)); cursor: pointer; box-shadow: 0px 10px 10px -8px var(--btn-shadow); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio-row-more-btn:hover { background-color: var(--accent); color: #fff; transform: translateX(3px); } .portfolio-row-more-label { margin-top: 8px; font-size: calc(12px * var(--font-scale)); color: var(--filter-link-color); } @media only screen and (max-width: 768px) { .portfolio-grid.portfolio-row-track figure { -ms-flex-preferred-size: 45%; flex-basis: 45%; } } @media only screen and (max-width: 480px) { .portfolio-grid.portfolio-row-track figure { -ms-flex-preferred-size: 80%; flex-basis: 80%; } } /* --- End of Portfolio --- */ /* --- Blog --- */ .blog-masonry { margin: 0 -1em 1.8em; } .blog-masonry.one-column .item { width: 100%; padding: 0 1em 2em; } .blog-masonry.two-columns .item { width: 50%; float: left; padding: 0 1em 2em; } .blog-masonry.three-columns .item { width: 33.333333%; float: left; padding: 0 1em 2em; } .blog-card { display: block; position: relative; padding: 0; background: var(--bg-secondary); } .blog-card .post-image { width: 100%; margin: 0; } .blog-card .media-block { overflow: hidden; } .blog-card .media-block img { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .blog-card .media-block:hover img { transform: scale(1.1); } .blog-card .post-without-f-image { padding-bottom: 46.875%; width: 100%; background-color: #f5f5f5; } .blog-card .post-info { padding: 1em 1.4em 1.4em; border: 1px solid var(--post-info-border-color); border-top: 0; } .blog-card .blog-item-title { margin: 5px 0 0 0; } .blog-card .post-meta { padding: 1em; margin: 0; } .blog-card .category a { position: absolute; top: 10px; left: 10px; background: #fff; padding: 2px 7px; line-height: 1.2em; font-size: calc(11px * var(--font-scale)); color: #222; z-index: 3; } .blog-card .post-date { display: inline-block; color: var(--meta-text-color); font-size: calc(11px * var(--font-scale)); line-height: 1.1em; font-weight: 300; } .blog-card .media-block { position: relative; } .sticky-badge { position: absolute; background-color: #fff; right: 10px; top: 10px; font-size: calc(12px * var(--font-scale)); padding: 0; width: 18px; height: 18px; text-align: center; line-height: 18px; color: #888; z-index: 3; } .blog-card .media-block a .mask { position: absolute; background: #4f565e; background: rgba(0,0,0,.12); display: inline-block; font-family: 'Linearicons-Free'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; left: 0; bottom: 0; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .blog-card .media-block a .mask:after { position: absolute; left: 50%; top: 50%; margin: -22px 0 0 -22px; width: 44px; line-height: 44px; font-size: calc(44px * var(--font-scale)); text-align: center; content: "\e828"; color: #fff; } .blog-card .media-block:hover a .mask { visibility: visible; opacity: 1; } .blog-card ul.category li a { color: #888; font-size: calc(12px * var(--font-scale)); font-weight: 300; } .blog-card .post-meta .item, .post-meta .item a { color: #a6a6a6; } /* --- End of Blog --- */ /* --- Detailed Portfolio Page --- */ .page-ajax-loaded { position: fixed; background-color: #fff; padding: 0; top: 0; bottom: 0; right: 0; left: 0; z-index: 9999; overflow: hidden; } .page-ajax-loaded:empty { display: none !important; } .ajax-page-content { height: 100%; overflow: auto; background-color: var(--bg-primary); } .ajax-page-wrapper { max-width: 1170px; margin: 0 auto; padding: 20px 60px 50px; } .ajax-page-nav { text-align: right; } .ajax-page-nav > div.nav-item { position: relative; display: inline-block; margin: 0 3px; } .ajax-page-nav > div.nav-item a { display: inline-block; height: 40px; width: 40px; text-align: center; color: var(--nav-link-color); background-color: var(--subtle-bg); } .ajax-page-nav > div.nav-item a:hover { background-color: var(--accent); color: #fff; } .ajax-page-nav > div.nav-item a i { line-height: 40px; font-size: calc(22px * var(--font-scale)); } .ajax-page-title { padding-top: 20px; padding-bottom: 30px; text-align: left; } .ajax-page-title h1 { display: inline-block; margin: 0; } .portfolio-block { padding-top: 30px; } .ajax-page-page-content img { max-width: 100%; } .portfolio-page-video, .portfolio-page-carousel, .portfolio-page-image { position: relative; width: 100%; margin-bottom: 20px; } .project-description { display: block; position: relative; padding: 20px 25px 25px; background-color: var(--bg-tertiary); } .ajax-page-wrapper .block-title h3 { font-size: calc(18px * var(--font-scale)); margin-bottom: 15px; } .project-general-info { list-style: none; padding: 0; margin: 0 0 15px; } .project-general-info li { margin : 0 0 10px; } .project-general-info .fa { color: var(--accent); margin-right: 5px; } .project-general-info p { margin: 0; } .share-buttons { display: block; margin: 25px 0 0; } .share-buttons a { display: inline-block; margin: 0 3px 0 0; padding: 0; width: 28px; height: 28px; color: var(--nav-link-color); background-color: var(--bg-primary); border: 1px solid var(--share-border-color); text-align: center; border-radius: 0; } .portfolio-page-content .share-buttons a { margin: 0 7px 0 0; } .share-buttons a:hover { color: #fff; background-color: var(--accent); border-color: var(--accent); } .share-buttons a:last-child { margin-right: 0; border-radius: 0; } .share-buttons a i { font-size: calc(14px * var(--font-scale)); line-height: 26px; } /* Tags Block */ .tags-block { margin: 25px 0 0; } .tags-block .block-title { margin-bottom: 0; } .tags { list-style: none; margin: 0; padding: 0; } .tags > li { display: inline-block; } .tags a { display: inline-block; font-size: calc(12px * var(--font-scale)); line-height: 1.5em; color: var(--tag-text-color); padding: 2px 7px; background-color: var(--bg-secondary); border-radius: 3px; border: 1px solid var(--border-color); margin: 3px 2px 2px; } .tags a:first-child { margin-left: 0; } /* /Tags Block */ .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; } .embed-responsive-16by9:before { padding-top: 56.25%; } .embed-responsive-21by9:before{ padding-top: 42.857143%; } .embed-responsive-4by3:before{ padding-top: 75%; } .embed-responsive-1by1:before{ padding-top:100%; } .embed-responsive::before { display: block; content: ""; } .embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Portfolio Carousel */ .portfolio-page-carousel { overflow: hidden; } .portfolio-page-carousel .owl-nav { position: absolute; top: 50%; width: 100%; margin-top: -20px; text-align: center; -webkit-tap-highlight-color: transparent; } .portfolio-page-carousel .owl-nav [class*='owl-'] { color: #9e9e9e; margin: 0; padding: 4px 7px; background: #fff; display: inline-block; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-family: "Font Awesome 5 Free"; font-size: calc(24px * var(--font-scale)); font-weight: 900; line-height: 30px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; } .portfolio-page-carousel .owl-nav [class*='owl-']:before { display: block; } .portfolio-page-carousel .owl-nav .owl-prev { position: absolute; margin-left: -50px; left: 0; } .portfolio-page-carousel:hover .owl-nav .owl-prev { margin-left: 0; } .portfolio-page-carousel .owl-nav .owl-next { position: absolute; margin-right: -50px; right: 0; } .portfolio-page-carousel:hover .owl-nav .owl-next { margin-right: 0; } .portfolio-page-carousel .owl-nav .owl-prev:before { content: "\f053"; } .portfolio-page-carousel .owl-nav .owl-next:before { content: "\f054"; } .portfolio-page-carousel .owl-dots { display: inline-block; position: absolute; bottom: 0; right: 0; margin: 0 10px 5px; text-align: center; -webkit-tap-highlight-color: transparent; } .portfolio-page-carousel .owl-dots .owl-dot { display: inline-block; } .portfolio-page-carousel .owl-dots .owl-dot.active span, .portfolio-page-carousel .owl-dots .owl-dot:hover span { background: #9e9e9e; } .portfolio-page-carousel .owl-dots .owl-dot span { width: 12px; height: 12px; margin: 5px; background: #f5f5f5; border: 1px solid #9e9e9e; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 30px; } /* Portfolio Carousel */ /* ------------------------------------------------------------ 7. Single Page (Blog Posts, 404 etc.) ------------------------------------------------------------ */ .post-thumbnail { background: #b2b2b2; display: block; position: relative; width: 100%; z-index: 0; } .single-page-content .post-content { position: relative; margin-top: -70px; margin-left: 40px; margin-right: 40px; padding-left: 30px; padding-right: 30px; background-color: var(--bg-primary); z-index: 1; } .entry-header { position: relative; z-index: 1; padding: 5px 0 0; } .entry-header .entry-meta { color: #9e9e9e; margin: 15px 0; font-size: calc(13px * var(--font-scale)); } .entry-meta a { color: var(--entry-meta-link-color); } .entry-title { font-size: calc(32px * var(--font-scale)); line-height: 1.3; margin: 15px 0 15px 0; } .entry-meta.entry-meta-bottom { display: inline-block; width: 100%; background-color: var(--bg-tertiary); border: 1px solid var(--entry-meta-border-color); padding: 0 10px; margin: 30px 0 0; } .entry-meta.entry-meta-bottom .date-author { display: inline-block; line-height: 28px; margin: 5px 0; } .entry-meta.entry-meta-bottom .share-buttons { display: inline-block; margin: 5px 0; } .entry-meta.entry-meta-bottom .share-buttons { display: inline-block; margin: 5px 0; } .entry-meta-bottom .entry-share { float: right; } .entry-meta.entry-meta-bottom .date-author > span:after { content: ''; height: 14px; line-height: 1em; display: inline-block; margin: 0 6px 0 9px; background-color: #e5e5e5; width: 1px; top: 2px; position: relative; } .entry-meta.entry-meta-bottom .date-author > span:last-child:after, .entry-meta.entry-meta-bottom .date-author > span:first-child:last-child:after { display: none; } .post-tags { margin: 30px 0; text-align: left; } blockquote { padding: 15px 20px; margin: 20px 0; font-size: 1em; border-left: 2px solid #d8d8d8; font-style: italic; } /* ------------------------------------------------------------ 8. Media Queries ------------------------------------------------------------ */ @media only screen and (max-width: 1280px) { .page { padding-left: 30px; } .header { max-width: 330px; } .content-area { max-width: calc(100% - 330px); } } @media only screen and (min-width: 1025px) { .menu-toggle { display: none; } } @media only screen and (max-width: 1024px) { .header { position: absolute; width: 100%; max-width: 330px; top: 0; right: 0; bottom: 0; background-color: var(--mobile-header-bg); z-index: 99; padding: 30px 30px 10px 30px; text-align: center; opacity: 1; visibility: visible; overflow: auto; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .header .copyrights { right: 0; width: 100%; position: relative; margin-top: 30px; } .page { padding: 0; } .page-content { padding: 0; margin: 0; border-radius: 0; min-height: 100%; } .content-area { max-width: 100%; } .animated-section, .single-page-content { border-radius: 0; overflow: auto !important; } .header-titles h2 { font-size: calc(30px * var(--font-scale)); margin-bottom: 10px; } .header-titles h4 { font-size: calc(17px * var(--font-scale)); } .header-photo { max-width: 130px; margin-bottom: 25px; } .mobile-menu-hide { width: 0; right: 0; margin-right: -100%; overflow: hidden; opacity: 0; visibility: hidden; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } ul.main-menu { margin: 30px 0; } ul.main-menu a { display: block; color: #fff; padding: 12px 0; line-height: 21px; opacity: .7; } ul.main-menu a.active { opacity: 1; } ul.main-menu .menu-icon { display: none; } ul.main-menu .link-text { font-size: calc(16px * var(--font-scale)); line-height: 21px; } .menu-toggle { position: absolute; display: block; width: 48px; height: 48px; line-height: 46px; text-align: center; background-color: var(--accent); right: 10px; font-size: calc(19px * var(--font-scale)); top: 10px; border-radius: 30px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 900; } .menu-toggle span { display: block; position: absolute; height: 3px; width: 50%; background: #fff; border-radius: 5px; opacity: 1; left: 25%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .menu-toggle span:nth-child(1) { top: 16px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .menu-toggle span:nth-child(2) { top: 22px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .menu-toggle span:nth-child(3) { top: 28px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .menu-toggle.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 13px; left: 15px; } .menu-toggle.open span:nth-child(2) { width: 0%; opacity: 0; } .menu-toggle.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 30px; left: 15px; } .lmpixels-arrows-nav { background-color: var(--mobile-arrows-bg); width: 48px; right: 10px; bottom: 10px; padding: 5px 0; border: 2px solid var(--accent); } .lmpixels-arrows-nav div { font-size: calc(24px * var(--font-scale)); } .single-page-content .post-content { position: relative; margin-left: 20px; margin-right: 20px; } } @media only screen and (max-width: 768px) { .portfolio-grid figure { width: 50%; } .section-content { padding-left: 40px; padding-right: 40px; } .info-list { margin-top: 20px; } .blog-post-content { padding: 0; margin: 30px 0 0; } .blog-masonry.two-columns .item, .blog-masonry.three-columns .item { width: 100%; } .portfolio-grid figure, .portfolio-grid.three-columns figure { width: 50%; } .portfolio-grid.four-columns figure, .portfolio-grid.five-columns figure { width: 33.3333333%; } .page-portfolio-loaded .portfolio-page-wrapper { padding-left: 30px; padding-right: 30px; } .portfolio-page-carousel .owl-nav .owl-prev { margin-left: 0; } .portfolio-page-carousel .owl-nav .owl-next { margin-right: 0; } .portfolio-page-carousel .owl-nav .owl-prev, .portfolio-page-carousel .owl-nav .owl-next { background-color: rgba(255,255,255,.55); } .single-page-content .portfolio-page-content { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 480px) { .section-title-block.first-style .section-description { margin: 7px 0 0; width: 100%; } .portfolio-grid figure { width: 100%; } .portfolio-grid.three-columns figure, .portfolio-grid.two-columns figure { width: 100%; } .portfolio-grid figure, .portfolio-grid.two-columns figure, .portfolio-grid.three-columns figure, .portfolio-grid.four-columns figure, .portfolio-grid.five-columns figure { width: 100%; } .timeline-second-style .timeline-item { position: relative; display: block; } .timeline-second-style .left-part { width: 100%; display: block; padding-left: 25px; min-height: 100%; text-align: left; } .timeline-second-style .divider { left: 0; } .timeline-second-style .right-part { width: 100%; display: block; padding-left: 25px; padding-right: 0; } .single-page-content .post-content { position: relative; margin-left: 0; margin-right: 0; margin-top: 0; padding-left: 0; padding-right: 0; } .controls.two-columns .right-column, .controls.two-columns .left-column { float: none; margin: 0; width: 100%; } } /* ============================================================================= 9. Pricing ============================================================================= */ /* Pricing */ .fw-pricing .fw-package { background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: 15px; padding: 30px 30px; margin-bottom: 10px; text-align: center; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .fw-pricing .fw-package-wrap.highlight-col .fw-package { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 7px 12px rgba(0, 0, 0, .12); -moz-box-shadow: 0 7px 12px rgba(0, 0, 0, .12); -o-box-shadow: 0 7px 12px rgba(0, 0, 0, .12); box-shadow: 0 7px 12px rgba(0, 0, 0, .12); } .fw-pricing .fw-package:hover, .fw-pricing .fw-package-wrap.highlight-col .fw-package:hover { -webkit-transform: translateY(-9px); -ms-transform: translateY(-9px); -o-transform: translateY(-9px); transform: translateY(-9px); -webkit-box-shadow: 0 18px 24px rgba(0, 0, 0, .15); -moz-box-shadow: 0 18px 24px rgba(0, 0, 0, .15); -o-box-shadow: 0 18px 24px rgba(0, 0, 0, .15); box-shadow: 0 18px 24px rgba(0, 0, 0, .15); } .fw-pricing .fw-package-wrap.highlight-col .fw-heading-row span { position: relative; display: inline-block; } .fw-pricing .fw-package-wrap.highlight-col .fw-heading-row span:after { content: ''; height: 2px; margin-top: 0; background-color: var(--accent); position: absolute; left: 0; bottom: -3px; right: 0; } .fw-pricing .fw-pricing-row { padding: 30px 0 10px; } .fw-pricing .fw-pricing-row span { display: block; line-height: 1; color: var(--pricing-text-color); font-size: calc(42px * var(--font-scale)); } .fw-pricing .fw-pricing-row small { color: #aaa; display: block; } .fw-pricing .fw-default-row { padding: 5px 0; font-size: calc(14px * var(--font-scale)); } .fw-pricing .fw-button-row { padding: 10px 0 20px; } .fw-pricing .fw-price-icon-no:before { content: "\f068"; color: #e87878; } .fw-pricing .fw-price-icon-yes:before { content: "\f058"; color: #ade878; } /* table */ .fw-table table { width: 100%; border: 1px solid #eee; font-size: .875em; } .fw-table table tr, .fw-table table tr.heading-row { border-bottom: 1px solid #eee; } .fw-table table tr:not(.heading-row):last-child { border-bottom: 0; } .fw-table table th { padding: 7px 12px; border-right: 1px solid #eee; } .fw-table table td { padding: 7px 12px; border-right: 1px solid #eee; } .fw-table table td:last-child { border-right: 0; } /* ============================================================================= 10. Updates ============================================================================= */ /* v1.1 */ /* Fixed, so its 28px overhang (room for the parallax) can't make the page itself scrollable - Firefox would scroll the whole card up into it */ .lm-animated-bg { position: fixed; width: auto; height: auto; top: -28px; left: -28px; right: -28px; bottom: -28px; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: -1; } .vcentered { vertical-align: middle; width: 100%; align-items: center; display: flex; display: -ms-flexbox; -ms-flex-pack: center; justify-content: center; flex-direction: column; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } .vcentered .row { width: 100%; } .title-block { position: relative; text-align: center; } .title-block h2 { font-size: calc(60px * var(--font-scale)); line-height: 74px; margin: 0; text-align: center; } [data-theme="dark"] .title-block h2 { color: #f5f5f5; } .title-block .sp-subtitle { color: var(--meta-text-color); font-size: calc(21px * var(--font-scale)); font-weight: 300; margin: 5px 0; text-align: center; } /* Rotating subtitles (js/main.js): every item sits in the same centred grid cell; the active one scales in while the previous one scales out */ .text-rotation { display: -ms-grid; display: grid; width: 100%; position: relative; } .text-rotation .item { grid-area: 1 / 1; opacity: 0; visibility: hidden; } .text-rotation .item.is-active { opacity: 1; visibility: visible; -webkit-animation: scaleUp .7s ease both; animation: scaleUp .7s ease both; } .text-rotation .item.is-leaving { visibility: visible; -webkit-animation: scaleDown .7s ease both; animation: scaleDown .7s ease both; } .start-page .mask { content: ''; position: absolute; height: 100%; top: 0; right: 0; left: 0; bottom: 0; background: rgba(10,10,10,0.45); } .fun-fact { position: relative; text-align: center; width: 100%; display: block; margin: 0 0 15px; background: var(--bg-card); padding: 25px 10px 15px; border: 2px solid var(--border-color); border-radius: 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; overflow: hidden; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .fun-fact:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12); -o-box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12); box-shadow: 0 12px 17px rgba(0, 0, 0, 0.12); } .fun-fact.gray-bg { background-color: #fcfcfc; } .fun-fact h4 { font-size: calc(16px * var(--font-scale)); margin: 15px; } .fun-fact i { position: relative; font-size: calc(33px * var(--font-scale)); color: var(--accent); margin-bottom: 6px; width: 33px; height: 33px; } .fun-fact .lm-info-block { font-size: calc(24px * var(--font-scale)); font-weight: 400; display: block; margin: 10px 0; color: var(--accent); } .fun-fact-block-value { color: #aaa; font-size: calc(36px * var(--font-scale)); line-height: 50px; display: block; margin: 15px 0 10px; } .fun-fact-block-text { display: block; } /* Every card in a row stretches to the tallest one, even if a title wraps */ .fun-facts-row > [class*="col-"] { display: -webkit-box; display: -ms-flexbox; display: flex; } .fun-facts-row .fun-fact { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } @media only screen and (max-width: 1024px) { .lm-animated-bg { display: none; } .title-block h2 { font-size: calc(48px * var(--font-scale)); line-height: 56px; margin: 0 0 10px; text-align: center; } .title-block .sp-subtitle { font-size: calc(18px * var(--font-scale)); } } /* v1.7.0 */ /* Alerts */ .contact-form .messages { padding-bottom: 20px; } .alert { position: relative; padding: .75rem 1.25rem; border: 2px solid transparent; border-radius: .25rem; margin-bottom: 20px; } .alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .alert button.close { padding: 0; background-color: transparent; border: 0; -webkit-appearance: none; } .alert button.close:hover { cursor: pointer; } .alert .close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; } .alert .close:focus, .alert .close:hover { color: #000; text-decoration: none; opacity: .75; } /* /Alerts */ /* ============================================================================= 11. Theme Toggle ============================================================================= */ .theme-toggle-wrap { margin-top: 5px; } /* Selectors are prefixed with .header-buttons so they win over the generic "button" styles in section 2 */ .header-buttons .theme-toggle, .header-buttons .theme-toggle:hover, .header-buttons .theme-toggle:focus { position: relative; display: inline-block; width: 64px; height: 32px; padding: 0; margin: 0; border: 2px solid var(--header-title-color); border-radius: 32px; background-color: rgba(255,255,255,.1); box-shadow: 0px 10px 10px -8px rgba(0,0,0,.3); color: inherit; cursor: pointer; vertical-align: middle; } .header-buttons .theme-toggle:hover { background-color: rgba(255,255,255,.2); } .header-buttons .theme-toggle:focus-visible { outline: 2px solid var(--header-title-color); outline-offset: 3px; } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background-color: #fff; color: var(--accent); box-shadow: 0 2px 4px rgba(0,0,0,.25); -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .theme-toggle-knob i { position: absolute; top: 50%; left: 50%; font-size: calc(13px * var(--font-scale)); line-height: 1; -webkit-transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } /* Dark theme: knob on the right showing the moon */ [data-theme="dark"] .theme-toggle-knob { transform: translateX(32px); } [data-theme="dark"] .theme-toggle-knob .fa-moon, [data-theme="light"] .theme-toggle-knob .fa-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); } /* Light theme: knob on the left showing the sun */ [data-theme="dark"] .theme-toggle-knob .fa-sun, [data-theme="light"] .theme-toggle-knob .fa-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); } /* --- Theme change fade --- */ /* Browsers with View Transitions: the whole page cross-fades */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease-in-out; } /* The toggle is kept out of the page fade: only its live (new) state is shown, so the knob's own slide and icon animation play without the fade on top */ .theme-toggle { view-transition-name: theme-toggle; } ::view-transition-old(theme-toggle) { display: none; } ::view-transition-new(theme-toggle) { animation: none; } /* Fallback for older browsers: colours ease between themes (the class is added briefly by js/theme.js) */ .theme-transition, .theme-transition *, .theme-transition *:before, .theme-transition *:after { -webkit-transition: background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out, box-shadow .5s ease-in-out, transform .3s ease-in-out, opacity .3s ease-in-out !important; transition: background-color .5s ease-in-out, color .5s ease-in-out, border-color .5s ease-in-out, box-shadow .5s ease-in-out, transform .3s ease-in-out, opacity .3s ease-in-out !important; } /* --- End Theme change fade --- */ /* /Theme Toggle */ /* ============================================================================= 12. Blog Posts (Art Journey) ============================================================================= */ /* Subtitle under the title on the Blog cards */ .blog-card .blog-item-subtitle { margin: 4px 0 0; font-size: calc(13px * var(--font-scale)); font-style: italic; color: var(--meta-text-color); } /* Subtitle under the post title */ .entry-subtitle { margin: -5px 0 20px; font-size: calc(17px * var(--font-scale)); font-weight: 400; font-style: italic; color: var(--meta-text-color); } /* "Part X of 5" beside the category */ .entry-series { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border-color); } /* Artwork inside a post */ .post-image { margin: 25px 0; text-align: center; } .post-image img { display: block; margin: 0 auto; border-radius: 8px; } .post-image figcaption { margin-top: 8px; font-size: calc(13px * var(--font-scale)); font-style: italic; color: var(--meta-text-color); } /* Previous / next post in the series */ .post-series-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; margin: 30px 0 40px; padding-top: 25px; border-top: 1px solid var(--border-color); } .post-series-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; max-width: 48%; color: var(--heading-color); font-weight: 600; line-height: 1.4; -webkit-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; } .post-series-next { margin-left: auto; text-align: right; } .post-series-link small { display: block; font-size: calc(12px * var(--font-scale)); font-weight: 400; color: var(--meta-text-color); } .post-series-link .lnr { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-series-link:hover { color: var(--accent); } .post-series-link:hover .lnr { background-color: var(--accent); color: #fff; } /* Blog tab: same-size thumbnails in an even grid */ .blog-masonry.blog-grid { display: -ms-grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-masonry.blog-grid:before, .blog-masonry.blog-grid:after { display: none; } .blog-masonry.blog-grid .item { display: -webkit-box; display: -ms-flexbox; display: flex; float: none; width: auto; } .blog-grid .item.is-hidden { display: none; } /* Cards in a row share the same height */ .blog-grid .blog-card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; width: 100%; } .blog-grid .blog-card .post-info { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* Every thumbnail is cropped to the same 16:10 frame */ .blog-grid .blog-card .media-block img { display: block; width: 100%; aspect-ratio: 16 / 10; -o-object-fit: cover; object-fit: cover; } /* Blog sort button, "Filters" button, tag chips and the push-down panel */ .blog-filter { margin-bottom: 25px; } .blog-filter-bar { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .blog-filter .blog-sort-toggle, .blog-filter .blog-sort-toggle:focus, .blog-filter .blog-filter-toggle, .blog-filter .blog-filter-toggle:focus { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; margin: 0; padding: .5em 1.3em; font-size: calc(13px * var(--font-scale)); border: 2px solid var(--border-color); background-color: transparent; color: var(--text-color); box-shadow: none; } .blog-filter .blog-sort-toggle:hover, .blog-filter .blog-sort-toggle.is-oldest, .blog-filter .blog-filter-toggle:hover, .blog-filter .blog-filter-toggle.has-active, .blog-filter.is-open .blog-filter-toggle { border-color: var(--accent); background-color: transparent; color: var(--heading-color); } .blog-filter-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } /* Sort arrow points up when showing oldest first */ .blog-sort-icon { -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .blog-sort-toggle.is-oldest .blog-sort-icon { transform: scaleY(-1); } .blog-filter-count { color: var(--accent); } /* Chosen tags beside the button */ .blog-filter .blog-filter-chip, .blog-filter .blog-filter-chip:focus { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; margin: 0; padding: .35em .9em; font-size: calc(12px * var(--font-scale)); text-transform: capitalize; border: 1px solid var(--accent); background-color: transparent; color: var(--heading-color); box-shadow: none; } .blog-filter-chip .lnr { font-size: calc(10px * var(--font-scale)); color: var(--accent); } .blog-filter .blog-filter-chip:hover { border-color: var(--accent); background-color: var(--accent); color: #fff; } .blog-filter .blog-filter-chip:hover .lnr { color: #fff; } .blog-filter .blog-filter-chip-clear, .blog-filter .blog-filter-clear { margin: 0; padding: .35em .6em; font-size: calc(12px * var(--font-scale)); border: 0; background: none; box-shadow: none; color: var(--meta-text-color); } .blog-filter .blog-filter-chip-clear:hover, .blog-filter .blog-filter-clear:hover { border: 0; background: none; color: var(--accent); } /* The panel slides open below the bar and pushes the posts down */ .blog-filter-panel { display: -ms-grid; display: grid; grid-template-rows: 0fr; opacity: 0; -webkit-transition: grid-template-rows .3s ease, opacity .3s ease; transition: grid-template-rows .3s ease, opacity .3s ease; } .blog-filter.is-open .blog-filter-panel { grid-template-rows: 1fr; opacity: 1; } .blog-filter-panel-inner { min-height: 0; overflow: hidden; visibility: hidden; -webkit-transition: visibility .3s; transition: visibility .3s; } .blog-filter.is-open .blog-filter-panel-inner { visibility: visible; } .blog-filter-panel-box > * { margin-left: 22px; margin-right: 22px; } .blog-filter-panel-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 18px; } .blog-filter-panel-header h4 { margin: 0; font-size: calc(18px * var(--font-scale)); } /* The panel's frame (on an inner box so it collapses fully) */ .blog-filter-panel-box { margin-top: 12px; border: 1px solid var(--border-color); border-radius: 16px; background-color: var(--bg-tertiary); } .blog-filter .blog-filter-close, .blog-filter .blog-filter-close:focus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; background-color: var(--bg-secondary); color: var(--text-color); box-shadow: none; font-size: calc(12px * var(--font-scale)); } .blog-filter .blog-filter-close:hover { border: 0; background-color: var(--accent); color: #fff; } .blog-filter-heading { margin-top: 14px; margin-bottom: 10px; font-size: calc(11px * var(--font-scale)); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--meta-text-color); } .blog-filter-options { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; } /* Tag checkboxes */ .blog-filter-option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; margin: 0; font-size: calc(14px * var(--font-scale)); text-transform: capitalize; color: var(--text-color); cursor: pointer; } .blog-filter-option input { position: absolute; opacity: 0; width: 0; height: 0; } .blog-filter-check { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; border: 2px solid var(--input-border-color); border-radius: 5px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .blog-filter-option:hover .blog-filter-check { border-color: var(--accent); } .blog-filter-option input:checked + .blog-filter-check { border-color: var(--accent); background-color: var(--accent); } .blog-filter-option input:checked + .blog-filter-check:after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .blog-filter-option input:focus-visible + .blog-filter-check { outline: 2px solid var(--accent); outline-offset: 2px; } .blog-filter-option input:checked ~ .blog-filter-label { color: var(--heading-color); } .blog-filter-actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; margin-top: 20px; margin-bottom: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); } .blog-filter .blog-filter-clear { font-size: calc(13px * var(--font-scale)); letter-spacing: .05em; text-transform: uppercase; } .blog-filter .blog-filter-apply { margin: 0; font-size: calc(13px * var(--font-scale)); } @media only screen and (max-width: 768px) { .blog-masonry.blog-grid { grid-template-columns: minmax(0, 1fr); } } /* /Blog Posts (Art Journey) */ /* ============================================================================= 13. Expanding Card Past the Home card the content card slides over 4/5 of the sidebar (js/main.js adds .is-expanded to .page-content). Hovering the sidebar adds .is-peeking, which slides it back; the pin button keeps it open for good. ============================================================================= */ .page-content { --sidebar-width: 380px; /* How much of the sidebar stays visible when the card is expanded */ --sidebar-visible: calc(var(--sidebar-width) / 5); } @media only screen and (max-width: 1280px) { .page-content { --sidebar-width: 330px; } } .sidebar-pin { display: none; } @media only screen and (min-width: 1025px) { .content-area { /* Above everything in the sidebar (e.g. the photo has its own layer) */ z-index: 2; -webkit-transition: max-width .45s cubic-bezier(0.16, 1, 0.3, 1), -webkit-filter .45s ease; transition: max-width .45s cubic-bezier(0.16, 1, 0.3, 1), filter .45s ease; } /* While covered, the sidebar's contents fade out so the visible strip stays clean (the section menu on the far right and the pin stay visible) */ .header > :not(.main-menu):not(.sidebar-pin) { -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .page-content.is-expanded:not(.is-peeking) .header > :not(.main-menu):not(.sidebar-pin) { opacity: 0; } .page-content.is-expanded .content-area { max-width: calc(100% - var(--sidebar-visible)); /* Soft shadow so the card reads as lying on top of the sidebar */ -webkit-filter: drop-shadow(-12px 0 22px rgba(0,0,0,.25)); filter: drop-shadow(-12px 0 22px rgba(0,0,0,.25)); } .page-content.is-expanded.is-peeking .content-area { max-width: calc(100% - var(--sidebar-width)); } /* Pin button: top-left of the sidebar, inside the strip that stays visible */ .sidebar-pin, .sidebar-pin:focus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 22px; left: calc((var(--sidebar-visible) - 38px) / 2); z-index: 5; width: 38px; height: 38px; margin: 0; padding: 0; border: 2px solid var(--header-subtitle-color); border-radius: 50%; background-color: transparent; color: var(--header-title-color); box-shadow: none; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .page-content.is-past-home .sidebar-pin { opacity: .7; visibility: visible; } .page-content.is-past-home .sidebar-pin:hover, .page-content.is-past-home .sidebar-pin.is-pinned { opacity: 1; border-color: var(--header-title-color); background-color: rgba(255,255,255,.12); } .sidebar-pin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } /* Unpinned the pin leans over; pinned it stands up and fills in */ .sidebar-pin:not(.is-pinned) svg { transform: rotate(35deg); } .sidebar-pin.is-pinned svg { fill: currentColor; } } /* Blog post "Back" button, over the top-left of the cover image */ .post-back { position: absolute; top: 20px; left: 20px; z-index: 5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; padding: .45em 1.2em .45em 1em; font-size: calc(13px * var(--font-scale)); border: 2px solid var(--accent); border-radius: 30px; background-color: var(--bg-primary); color: var(--heading-color); box-shadow: 0px 10px 10px -8px var(--btn-shadow); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-back .lnr { font-size: calc(12px * var(--font-scale)); -webkit-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .post-back:hover { background-color: var(--accent); color: #fff; } .post-back:hover .lnr { transform: translateX(-3px); } /* Trim the extra space after the last item in a section */ .section-content > .row:last-child > [class*="col-"] > :last-child, .section-content > .row:last-child > [class*="col-"] > :last-child > :last-child { margin-bottom: 0; } .blog-masonry.blog-grid { grid-row-gap: 2em; row-gap: 2em; margin-bottom: 0; } .blog-masonry.blog-grid .item { padding-bottom: 0; } /* /Expanding Card */ /* ============================================================================= 14. Card Width The pill below the card switches between three widths (js/theme.js sets data-card-width on ): 0 = original, 1 = halfway, 2 = widest. Widest leaves the same gap at the sides as above the card (10vh); on the right that gap is measured from the section menu so it still fits. Desktop only. On screens that aren't much wider than the original card the switch hides itself (.card-width-unavailable). ============================================================================= */ .card-width-switch { display: none; } @media only screen and (min-width: 1025px) { .page { padding: 0; } .page-content { /* Original: up to 1280px wide, centred between 100px side gaps */ --card-w0: min(1280px, 100vw - 200px); --card-l0: calc((100vw - var(--card-w0)) / 2); /* Widest: 10vh on the left, 10vh + the section menu (90px) on the right */ --card-w2: max(var(--card-w0), 100vw - 20vh - 90px); --card-l2: min(10vh, var(--card-l0)); /* 0 = original, 0.5 = halfway, 1 = widest */ --card-t: 0; width: calc(var(--card-w0) + (var(--card-w2) - var(--card-w0)) * var(--card-t)); max-width: none; margin-left: calc(var(--card-l0) + (var(--card-l2) - var(--card-l0)) * var(--card-t)); margin-right: 0; -webkit-transition: width .45s cubic-bezier(0.16, 1, 0.3, 1), margin-left .45s cubic-bezier(0.16, 1, 0.3, 1); transition: width .45s cubic-bezier(0.16, 1, 0.3, 1), margin-left .45s cubic-bezier(0.16, 1, 0.3, 1); } [data-card-width="1"] .page-content { --card-t: .5; } [data-card-width="2"] .page-content { --card-t: 1; } /* Screens too narrow for the switch always use the original width */ .card-width-unavailable .page-content { --card-t: 0; } /* The pill: centred about 10px below the card */ .card-width-switch { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 2px; position: absolute; top: calc(100% + 10px); left: 50%; z-index: 3; padding: 3px; border-radius: 20px; background-color: var(--bg-secondary); box-shadow: 0 0 30px -5px rgba(0,0,0,.15); transform: translateX(-50%); } .card-width-unavailable .card-width-switch { display: none; } .card-width-switch button, .card-width-switch button:focus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 14px; background-color: transparent; color: #b5b6b7; box-shadow: none; } .card-width-switch button:hover { border: 0; background-color: transparent; color: var(--accent); } .card-width-switch button[aria-pressed="true"] { background-color: var(--accent); color: #fff; } .card-width-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } } @media only screen and (min-width: 1025px) and (max-width: 1280px) { .page-content { /* Matches the template's narrower-screen layout (30px on the left) */ --card-w0: calc(100vw - 130px); --card-l0: 30px; } } /* /Card Width */ /* ============================================================================= 15. Art Gallery Sliders for artwork in blog posts (built by js/main.js from
...
). Every piece sits in a frame of the same height and is scaled to fit, so tall and wide pieces both show in full. Change the frame height with --gallery-height. ============================================================================= */ .art-gallery { --gallery-height: clamp(280px, 52vh, 540px); margin: 30px 0 10px; } .art-gallery-frame { position: relative; border: 1px solid var(--border-color); border-radius: 12px; background-color: var(--bg-tertiary); overflow: hidden; } .art-gallery-track { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .art-gallery-track::-webkit-scrollbar { display: none; } .art-gallery-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; height: var(--gallery-height); margin: 0; padding: 14px; scroll-snap-align: center; } /* Captions show under the frame instead */ .art-gallery-slide figcaption { display: none; } .art-gallery-slide a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; } .art-gallery-slide img, .art-gallery-slide video { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; -o-object-fit: contain; object-fit: contain; border-radius: 6px; } /* Arrows */ .art-gallery .art-gallery-nav, .art-gallery .art-gallery-nav:focus { position: absolute; top: 50%; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 42px; height: 42px; margin: 0; padding: 0; border: 2px solid var(--accent); border-radius: 50%; background-color: var(--bg-primary); color: var(--accent); box-shadow: 0px 10px 10px -8px var(--btn-shadow); transform: translateY(-50%); } .art-gallery .art-gallery-nav:hover { border-color: var(--accent); background-color: var(--accent); color: #fff; } .art-gallery .art-gallery-nav:disabled { opacity: 0; pointer-events: none; } .art-gallery-prev { left: 12px; } .art-gallery-next { right: 12px; } /* Caption and counter under the frame */ .art-gallery-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 16px; margin-top: 10px; font-size: calc(13px * var(--font-scale)); color: var(--meta-text-color); } .art-gallery-caption { font-style: italic; } .art-gallery-count { -ms-flex-negative: 0; flex-shrink: 0; letter-spacing: .05em; } /* Post cover: every cover is cropped to the same wide banner shape (centred), so any artwork can be used without pushing the post down */ .post-thumbnail img { display: block; width: 100%; aspect-ratio: 1920 / 900; -o-object-fit: cover; object-fit: cover; object-position: center; } /* Single images in posts open full size on click */ .post-image a.lightbox { cursor: zoom-in; } /* /Art Gallery */ /* Project pages (project-*.html) */ .portfolio-page-video video { background-color: #000; } .portfolio-page-carousel a.lightbox { display: block; cursor: zoom-in; } .portfolio-page-caption { margin: 8px 0 0; text-align: center; font-size: calc(13px * var(--font-scale)); font-style: italic; color: var(--meta-text-color); } .portfolio-page-audio { margin-bottom: 20px; padding: 15px 20px; background-color: var(--bg-tertiary); } .portfolio-page-audio h4 { margin: 0 0 10px; font-size: calc(15px * var(--font-scale)); } .portfolio-page-audio audio { display: block; width: 100%; } .project-links { margin-top: 20px; } .project-links .btn-primary { display: block; text-align: center; } .project-links .btn-primary i { margin-right: 6px; } .ajax-page-title .ajax-page-subtitle { margin: 8px 0 0; font-size: calc(15px * var(--font-scale)); line-height: 1.6; color: var(--meta-text-color); } .portfolio-video-credit { margin: -12px 0 20px; text-align: right; } .portfolio-video-credit i { margin-right: 4px; } .portfolio-page-video-title { margin: 0 0 10px; font-size: calc(16px * var(--font-scale)); } .project-overview { margin-top: 30px; } .project-overview p { margin-bottom: 15px; } /* Carousel dots sit under the caption instead of on top of it */ .portfolio-page-carousel .owl-dots { display: block; position: static; margin: 6px 0 0; } /* PDF buttons fit the narrow info column */ .project-links .btn-primary { padding: .7em 1.2em; border-radius: 20px; white-space: normal; line-height: 1.4; } /* /Project pages */