diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png index 9bbdfb2..bde6f3f 100644 Binary files a/android-chrome-192x192.png and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png index 6445762..be2afce 100644 Binary files a/android-chrome-512x512.png and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png index dd820ff..e225b86 100644 Binary files a/apple-touch-icon.png and b/apple-touch-icon.png differ diff --git a/css/styles.css b/css/styles.css index 533e0bc..53ba1c0 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,18 +1,19 @@ /* =================================================================== - * Augustine Main Stylesheet + * Luther Main Stylesheet * Template Ver. 1.0.0 - * 03-16-2022 + * 02-15-2021 * ------------------------------------------------------------------ * * TOC: + * * # SETTINGS - * ## fonts + * ## fonts * ## colors * ## spacing and typescale * ## grid variables * # NORMALIZE * # BASE SETUP - * # GRID + * # GRID * ## large screen devices * ## medium screen devices * ## tablet devices @@ -37,30 +38,31 @@ * ## skillbars * ## stats tabs * # PROJECT-WIDE SHARED STYLES - * ## theme-specific typography classes * ## media classes - * ## swiper overrides + * ## theme-specific typography classes + * ## MailtoUI style overrides * # PAGE WRAP + * ## circles * # SITE HEADER - * ## branding * ## main navigation - * ## header social * ## mobile menu toggle * # INTRO - * ## intro text - * ## intro bg + * ## intro social + * ## intro scrolldown * # ABOUT + * ## about info + * ## about expertise * ## about timelines - * ## about skills - * ## about clients * # WORKS - * ## portfolio list - * ## testimonial slider + * ## works portfolio + * ## modal popup + * ## testimonials + * ## testimonial slider + * # CONTACT * # FOOTER * ## copyright * ## go top * - * * ------------------------------------------------------------------ */ @@ -73,11 +75,12 @@ /* ------------------------------------------------------------------- * ## fonts * ------------------------------------------------------------------- */ -@import url("https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Serif+Text:ital@0;1&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); :root { - --font-1 : "Inter", sans-serif; - --font-2 : "Castoro", serif; + + --font-1 : "Public Sans", sans-serif; + --font-2 : "DM Serif Display", serif; /* monospace */ @@ -89,97 +92,96 @@ * ------------------------------------------------------------------- */ :root { - /* color-1(#5F9295) - * color-2(#2D2327) + /* color-1(#eabe7c) + * color-2(#23967f) */ - --color-1 : hsla(183, 22%, 48%, 1); - --color-2 : hsla(336, 13%, 16%, 1); + --color-1 : hsla(36, 72%, 70%, 1); + --color-2 : hsla(168, 62%, 36%, 1); /* theme color variations */ - --color-1-lighter : hsla(183, 22%, 68%, 1); - --color-1-light : hsla(183, 22%, 58%, 1); - --color-1-dark : hsla(183, 22%, 38%, 1); - --color-1-darker : hsla(183, 22%, 28%, 1); - - --color-2-lighter : hsla(336, 13%, 36%, 1); - --color-2-light : hsla(336, 13%, 26%, 1); - --color-2-dark : hsla(336, 13%, 10%, 1); - --color-2-darker : hsla(336, 13%, 5%, 1); + --color-1-lighter : hsla(36, 72%, 90%, 1); + --color-1-light : hsla(36, 72%, 80%, 1); + --color-1-dark : hsla(36, 72%, 60%, 1); + --color-1-darker : hsla(36, 72%, 50%, 1); + --color-2-lighter : hsla(168, 62%, 56%, 1); + --color-2-light : hsla(168, 62%, 46%, 1); + --color-2-dark : hsla(168, 62%, 26%, 1); + --color-2-darker : hsla(168, 62%, 16%, 1); /* feedback colors * color-error(#ffd1d2), color-success(#c8e675), * color-info(#d7ecfb), color-notice(#fff099) */ - --color-error : hsla(359, 100%, 91%, 1); - --color-success : hsla(76, 69%, 68%, 1); - --color-info : hsla(205, 82%, 91%, 1); - --color-notice : hsla(51, 100%, 80%, 1); - --color-error-content : hsla(359, 50%, 50%, 1); - --color-success-content : hsla(76, 29%, 28%, 1); - --color-info-content : hsla(205, 32%, 31%, 1); - --color-notice-content : hsla(51, 30%, 30%, 1); + --color-error : hsla(359, 100%, 91%, 1); + --color-success : hsla(76, 69%, 68%, 1); + --color-info : hsla(205, 82%, 91%, 1); + --color-notice : hsla(51, 100%, 80%, 1); + --color-error-content : hsla(359, 50%, 50%, 1); + --color-success-content : hsla(76, 29%, 28%, 1); + --color-info-content : hsla(205, 32%, 31%, 1); + --color-notice-content : hsla(51, 30%, 30%, 1); /* shades * generated using * Tint & Shade Generator * (https://maketintsandshades.com/) */ - --color-black : #000000; - --color-gray-19 : #0d0f0f; - --color-gray-18 : #1b1e1e; - --color-gray-17 : #282d2e; - --color-gray-16 : #363c3d; - --color-gray-15 : #444b4c; - --color-gray-14 : #515a5b; - --color-gray-13 : #5f696a; - --color-gray-12 : #6c787a; - --color-gray-11 : #7a8789; - --color-gray-10 : #879698; - --color-gray-9 : #93a1a2; - --color-gray-8 : #9fabad; - --color-gray-7 : #abb6b7; - --color-gray-6 : #b7c0c1; - --color-gray-5 : #c3cbcc; - --color-gray-4 : #cfd5d6; - --color-gray-3 : #dbe0e0; - --color-gray-2 : #e7eaea; - --color-gray-1 : #f3f5f5; - --color-white : #ffffff; + --color-black : #000000; + --color-gray-19 : #020202; + --color-gray-18 : #040404; + --color-gray-17 : #060607; + --color-gray-16 : #080809; + --color-gray-15 : #0a0b0b; + --color-gray-14 : #0c0d0d; + --color-gray-13 : #0e0f0f; + --color-gray-12 : #101112; + --color-gray-11 : #121314; + --color-gray-10 : #141516; + --color-gray-9 : #2c2c2d; + --color-gray-8 : #434445; + --color-gray-7 : #5b5b5c; + --color-gray-6 : #727373; + --color-gray-5 : #8a8a8b; + --color-gray-4 : #a1a1a2; + --color-gray-3 : #b9b9b9; + --color-gray-2 : #d0d0d0; + --color-gray-1 : #e8e8e8; + --color-white : #ffffff; /* text */ - --color-text : var(--color-gray-17); - --color-text-dark : var(--color-gray-19); - --color-text-light : var(--color-gray-12); - --color-placeholder : var(--color-gray-12); + --color-text : var(--color-gray-4); + --color-text-dark : var(--color-white); + --color-text-light : var(--color-gray-7); + --color-placeholder : var(--color-gray-7); /* buttons */ - --color-btn : var(--color-gray-4); - --color-btn-text : var(--color-text); - --color-btn-hover : var(--color-gray-5); - --color-btn-hover-text : var(--color-text); + --color-btn : var(--color-gray-9); + --color-btn-text : var(--color-1); + --color-btn-hover : var(--color-white); + --color-btn-hover-text : var(--color-black); --color-btn-primary : var(--color-1-dark); - --color-btn-primary-text : var(--color-white); - --color-btn-primary-hover : var(--color-text-dark); - --color-btn-primary-hover-text : var(--color-white); - --color-btn-stroke : var(--color-1-dark); - --color-btn-stroke-text : var(--color-1-darker); - --color-btn-stroke-hover : var(--color-text-dark); - --color-btn-stroke-hover-text : var(--color-white); + --color-btn-primary-text : var(--color-black); + --color-btn-primary-hover : var(--color-1-darker); + --color-btn-primary-hover-text : var(--color-black); + --color-btn-stroke : var(--color-white); + --color-btn-stroke-text : var(--color-white); + --color-btn-stroke-hover : var(--color-white); + --color-btn-stroke-hover-text : var(--color-black); /* preloader */ - --color-preloader-bg : #CFE6E8; - --color-loader : var(--color-text-dark); - --color-loader-light : var(--color-1-lighter); + --color-preloader-bg : var(--color-gray-10); + --color-loader : white; + --color-loader-light : rgba(255, 255, 255, 0.1); /* others */ - --color-body : #CFE6E8; - --color-border : rgba(0, 0, 0, .08); - --border-radius : 3px; + --color-body : var(--color-gray-10); + --color-border : rgba(255, 255, 255, .05); + --border-radius : 3px; } /* ------------------------------------------------------------------- @@ -191,31 +193,31 @@ * base font size: 19px * vertical space unit : 32px */ - --base-size : 62.5%; - --multiplier : 1; - --base-font-size : calc(1.9rem * var(--multiplier)); - --space : calc(3.2rem * var(--multiplier)); + --base-size : 62.5%; + --multiplier : 1; + --base-font-size : calc(1.9rem * var(--multiplier)); + --space : calc(3.2rem * var(--multiplier)); /* vertical spacing */ - --vspace-0_125 : calc(0.125 * var(--space)); - --vspace-0_25 : calc(0.25 * var(--space)); - --vspace-0_375 : calc(0.375 * var(--space)); - --vspace-0_5 : calc(0.5 * var(--space)); - --vspace-0_625 : calc(0.625 * var(--space)); - --vspace-0_75 : calc(0.75 * var(--space)); - --vspace-0_875 : calc(0.875 * var(--space)); - --vspace-1 : calc(var(--space)); - --vspace-1_25 : calc(1.25 * var(--space)); - --vspace-1_5 : calc(1.5 * var(--space)); - --vspace-1_75 : calc(1.75 * var(--space)); - --vspace-2 : calc(2 * var(--space)); - --vspace-2_5 : calc(2.5 * var(--space)); - --vspace-3 : calc(3 * var(--space)); - --vspace-3_5 : calc(3.5 * var(--space)); - --vspace-4 : calc(4 * var(--space)); - --vspace-4_5 : calc(4.5 * var(--space)); - --vspace-5 : calc(5 * var(--space)); + --vspace-0_125 : calc(0.125 * var(--space)); + --vspace-0_25 : calc(0.25 * var(--space)); + --vspace-0_375 : calc(0.375 * var(--space)); + --vspace-0_5 : calc(0.5 * var(--space)); + --vspace-0_625 : calc(0.625 * var(--space)); + --vspace-0_75 : calc(0.75 * var(--space)); + --vspace-0_875 : calc(0.875 * var(--space)); + --vspace-1 : calc(var(--space)); + --vspace-1_25 : calc(1.25 * var(--space)); + --vspace-1_5 : calc(1.5 * var(--space)); + --vspace-1_75 : calc(1.75 * var(--space)); + --vspace-2 : calc(2 * var(--space)); + --vspace-2_5 : calc(2.5 * var(--space)); + --vspace-3 : calc(3 * var(--space)); + --vspace-3_5 : calc(3.5 * var(--space)); + --vspace-4 : calc(4 * var(--space)); + --vspace-4_5 : calc(4.5 * var(--space)); + --vspace-5 : calc(5 * var(--space)); /* type scale * ratio 1:2 | base: 19px @@ -250,7 +252,7 @@ /* default button height */ - --vspace-btn : var(--vspace-2); + --vspace-btn : var(--vspace-2); } /* on mobile devices below 600px, change the value of '--multiplier' @@ -280,14 +282,14 @@ /* gutter */ - --gutter : 2rem; + --gutter : 2rem; } /* on medium screen devices */ @media screen and (max-width: 1200px) { :root { - --gutter : 1.8rem; + --gutter : 1.6rem; } } @@ -309,6 +311,7 @@ * normalize.css v8.0.1 | MIT License | * github.com/necolas/normalize.css * -------------------------------------------------------------------- */ + html { line-height : 1.15; -webkit-text-size-adjust : 100%; @@ -496,6 +499,7 @@ template { * * * ------------------------------------------------------------------- */ + html { font-size : var(--base-size); box-sizing : border-box; @@ -541,25 +545,7 @@ pre { overflow : auto; } -div, -dl, -dt, -dd, -ul, -ol, -li, -h1, -h2, -h3, -h4, -h5, -h6, -pre, -form, -p, -blockquote, -th, -td { +div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin : 0; padding : 0; } @@ -594,6 +580,7 @@ textarea { * A BLOCK GRID container's class attribute value begins with "block-". * * ------------------------------------------------------------------- */ + /* row */ .row { @@ -1116,10 +1103,10 @@ textarea { /* -------------------------------------------------------------------- * ## additional column stackpoints * -------------------------------------------------------------------- */ -@media screen and (max-width: 900px) { +@media screen and (max-width: 1000px) { - .stack-on-900, - .block-stack-on-900>.column { + .stack-on-1000, + .block-stack-on-1000>.column { flex : none; width : 100%; margin-left : 0; @@ -1201,19 +1188,6 @@ textarea { /* misc helper classes */ -.u-screen-reader-text { - clip : rect(1px, 1px, 1px, 1px); - clip-path : inset(50%); - height : 1px; - width : 1px; - margin : -1px; - overflow : hidden; - padding : 0; - border : 0; - position : absolute; - word-wrap : normal !important; -} - .u-clearfix:after { content : ""; display : table; @@ -1299,7 +1273,7 @@ textarea { body { font-family : var(--font-1); font-size : var(--base-font-size); - font-weight : 400; + font-weight : 300; line-height : var(--vspace-1); color : var(--color-text); } @@ -1307,14 +1281,14 @@ body { /* links */ a { - color : var(--color-1-dark); + color : var(--color-1); transition : all 0.3s ease-in-out; } a:focus, a:hover, a:active { - color : var(--color-2-lighter); + color : var(--color-2); } a:hover, @@ -1324,18 +1298,8 @@ a:active { /* headings */ -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { font-family : var(--font-2); font-weight : 400; color : var(--color-text-dark); @@ -1343,78 +1307,60 @@ h6, text-rendering : optimizeLegibility; } -h1, -.h1 { +h1, .h1 { margin-top : var(--vspace-2_5); margin-bottom : var(--vspace-0_75); } -h2, -.h2, -h3, -.h3, -h4, -.h4 { +h2, .h2, h3, .h3, h4, .h4 { margin-top : var(--vspace-2); - margin-bottom : var(--vspace-0_75); + margin-bottom : var(--vspace-0_5); } -h5, -.h5, -h6, -.h6 { - margin-top : var(--vspace-1_75); +h5, .h5, h6, .h6 { + margin-top : var(--vspace-1_5); margin-bottom : var(--vspace-0_5); } -h1, -.h1 { - font-size : var(--text-display-2); - line-height : calc(2.25 * var(--space)); +h1, .h1 { + font-size : var(--text-display-1); + line-height : var(--vspace-2); letter-spacing : -.01em; } @media screen and (max-width: 500px) { - - h1, - .h1 { - font-size : var(--text-display-1); - line-height : calc(1.875 * var(--space)); + h1, .h1 { + font-size : var(--text-xxxl); + line-height : calc(1.625 * var(--space)); } } - -h2, -.h2 { +h2, .h2 { font-size : var(--text-xxl); - line-height : calc(1.375 * var(--space)); + line-height : var(--vspace-1_5); } -h3, -.h3 { +h3, .h3 { font-size : var(--text-xl); - line-height : calc(1.125 * var(--space)); + line-height : var(--vspace-1_25); } -h4, -.h4 { +h4, .h4 { font-size : var(--text-lg); line-height : var(--vspace-1); } -h5, -.h5 { +h5, .h5 { font-size : var(--text-md); line-height : var(--vspace-0_875); } -h6, -.h6 { +h6, .h6 { font-family : var(--font-1); font-weight : 600; font-size : var(--text-sm); line-height : var(--vspace-0_75); text-transform : uppercase; - letter-spacing : .3rem; + letter-spacing : .2rem; } /* emphasis, italic, @@ -1439,7 +1385,7 @@ b { } small { - font-size : 80%; + font-size : 75%; font-weight : 400; line-height : var(--vspace-0_5); } @@ -1449,10 +1395,16 @@ small { blockquote { margin : 0 0 var(--vspace-1) 0; padding : var(--vspace-1) var(--vspace-1_5); - border-left : 2px solid var(--color-text-dark); + border-left : 2px solid var(--color-text-light); position : relative; } +@media screen and (max-width: 400px) { + blockquote { + padding : var(--vspace-0_75) var(--vspace-0_75); + } +} + blockquote p { font-family : var(--font-1); font-weight : 400; @@ -1483,17 +1435,6 @@ blockquote cite a:visited { border : none; } -@media screen and (max-width: 500px) { - blockquote { - padding : var(--vspace-0_75) var(--vspace-0_75); - } - - blockquote p { - font-size : var(--text-md); - line-height : var(--vspace-1); - } -} - /* figures */ figure img, @@ -1513,7 +1454,7 @@ figure img+figcaption { } figcaption { - /* font-style: italic; */ + font-style : italic; font-size : var(--text-sm); text-align : center; margin-bottom : 0; @@ -1531,7 +1472,7 @@ pre { pre { padding : var(--vspace-0_75) var(--vspace-1) var(--vspace-1); - background : var(--color-gray-3); + background : var(--color-gray-9); overflow-x : auto; } @@ -1541,9 +1482,9 @@ code { margin : 0 .2rem; padding : calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem); white-space : nowrap; - background : var(--color-gray-3); - border : 1px solid var(--color-gray-5); - color : var(--color-text); + background : var(--color-gray-9); + border : 1px solid var(--color-gray-8); + color : var(--color-text-dark); border-radius : 3px; } @@ -1579,8 +1520,8 @@ dfn[title] { } mark { - background : var(--color-1-lighter); - color : var(--color-text); + background : var(--color-white); + color : var(--color-black); } /* horizontal rule @@ -1611,36 +1552,12 @@ hr.fancy::before { .lead, .attention-getter { font-family : var(--font-1); - font-weight : 400; - font-size : var(--text-lg); - line-height : 1.8275; + font-weight : 300; + font-size : var(--text-md); + line-height : var(--vspace-1_25); color : var(--color-text-dark); } -@media screen and (max-width: 900px) { - - .lead, - .attention-getter { - font-size : calc(var(--text-size) * 1.2636); - } -} - -@media screen and (max-width: 500px) { - - .lead, - .attention-getter { - font-size : var(--text-md); - } -} - -@media screen and (max-width: 460px) { - - .lead, - .attention-getter { - font-size : 1.9rem; - } -} - .pull-quote { position : relative; padding : 0; @@ -1679,7 +1596,7 @@ hr.fancy::before { .drop-cap:first-letter { float : left; font-family : var(--font-1); - font-weight : 700; + font-weight : 600; font-size : calc(3 * var(--space)); line-height : 1; padding : 0 0.125em 0 0; @@ -1744,7 +1661,7 @@ ul.disc li::before { width : 8px; height : 8px; border-radius : 50%; - background : var(--color-1-dark); + background : var(--color-1); position : absolute; left : -.9em; top : 11px; @@ -1753,7 +1670,7 @@ ul.disc li::before { dt { margin : 0; - color : var(--color-1-dark); + color : var(--color-1); } dd { @@ -1846,23 +1763,22 @@ img, * - markup: * *
- *
+ *
*
* - * * ------------------------------------------------------------------- */ + #preloader { position : fixed; display : flex; flex-flow : row wrap; justify-content : center; align-items : center; - background : var(--color-preloader-bg); + background : var(--color-body); z-index : 500; height : 100vh; width : 100%; opacity : 1; - overflow : hidden; } .no-js #preloader { @@ -1870,42 +1786,39 @@ img, } #loader { - background-color : var(--color-loader-light); + width : var(--vspace-2); + height : var(--vspace-2); + padding : 0; + background-color : white; + border-radius : 100%; + -webkit-animation : sk-scaleout 1.0s infinite ease-in-out; + animation : sk-scaleout 1.0s infinite ease-in-out; } -@-webkit-keyframes line { - from { - background-position : -60px 0; +@-webkit-keyframes sk-scaleout { + 0% { + -webkit-transform : scale(0); + transform : scale(0); } - to { - background-position : 60px 0; + 100% { + -webkit-transform : scale(1); + transform : scale(1); + opacity : 0; } } -@keyframes line { - from { - background-position : -60px 0; +@keyframes sk-scaleout { + 0% { + transform : scale(0); } - to { - background-position : 60px 0; + 100% { + transform : scale(1); + opacity : 0; } } -.line:before { - -webkit-animation : line .75s infinite alternate ease-in-out; - animation : line .75s infinite alternate ease-in-out; - background : -webkit-gradient(linear, left top, right top, from(var(--color-loader)), to(var(--color-loader))); - background : linear-gradient(90deg, var(--color-loader), var(--color-loader)); - background-repeat : no-repeat; - background-size : 80px 4px; - content : ''; - display : block; - height : 4px; - width : 80px; -} - /* =================================================================== @@ -1913,6 +1826,7 @@ img, * * * ------------------------------------------------------------------- */ + fieldset { border : none; } @@ -1936,11 +1850,11 @@ select { outline : 0; color : var(--color-text-light); font-family : var(--font-1); - font-size : calc(var(--text-size) * 0.7895); + font-size : calc(var(--text-size) * 0.7778); line-height : var(--input-line-height); max-width : 100%; background : transparent; - border-bottom : 1px solid var(--color-1-lighter); + border-bottom : 1px solid var(--color-border); transition : all .3s ease-in-out; } @@ -1971,8 +1885,8 @@ select { } .ss-custom-select::after { - border-bottom : 1px solid #141414; - border-right : 1px solid #141414; + border-bottom : 1px solid white; + border-right : 1px solid white; content : ''; display : block; height : 8px; @@ -2001,7 +1915,7 @@ input[type="password"]:focus, textarea:focus, select:focus { color : var(--color-text); - border-bottom : 1px solid var(--color-text-dark); + border-bottom : 1px solid var(--color-1); } label, @@ -2092,6 +2006,7 @@ select:-webkit-autofill:focus { * * * ------------------------------------------------------------------- */ + .btn, button, input[type="submit"], @@ -2105,7 +2020,7 @@ input[type="button"] { text-transform : uppercase; letter-spacing : .35em; height : var(--btn-height); - line-height : calc(var(--btn-height) - 4px); + line-height : calc(var(--btn-height) - 2px); padding : 0 3.6rem; margin : 0 0.4rem var(--vspace-0_5) 0; color : var(--color-btn-text); @@ -2114,9 +2029,8 @@ input[type="button"] { white-space : nowrap; cursor : pointer; transition : all .3s; - border-radius : var(--border-radius); background-color : var(--color-btn); - border : 2px solid var(--color-btn); + border : 1px solid var(--color-btn); -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } @@ -2189,10 +2103,9 @@ button.btn--large { .btn--stroke, button.btn--stroke { - background : transparent !important; - font-weight : 700; - border : 2px solid var(--color-btn-stroke); - color : var(--color-btn-stroke-text); + background : transparent !important; + border : 1px solid var(--color-btn-stroke); + color : var(--color-btn-stroke-text); } .btn--stroke:focus, @@ -2200,7 +2113,7 @@ button.btn--stroke:focus, .btn--stroke:hover, button.btn--stroke:hover { background : var(--color-btn-stroke-hover) !important; - border : 2px solid var(--color-btn-stroke-hover); + border : 1px solid var(--color-btn-stroke-hover); color : var(--color-btn-stroke-hover-text); } @@ -2218,6 +2131,7 @@ button.btn--pill { * * * ------------------------------------------------------------------- */ + table { border-width : 0; width : 100%; @@ -2268,7 +2182,7 @@ td:last-child { * ------------------------------------------------------------------- */ .pgn { --pgn-num-height : calc(var(--vspace-1) + .4rem); - margin : 0 auto var(--vspace-1); + margin : var(--vspace-1) auto; text-align : center; } @@ -2297,21 +2211,21 @@ td:last-child { height : var(--pgn-num-height); margin : .2rem .2rem; color : var(--color-text-dark); - border-radius : var(--border-radius); + border-radius : 4px; transition : all, .3s, ease-in-out; } .pgn__num:focus, .pgn__num:hover { - background : var(--color-text-dark); + background : var(--color-gray-9); color : var(--color-white); } .pgn .current, .pgn .current:focus, .pgn .current:hover { - background : var(--color-text-dark); - color : var(--color-white); + background-color : var(--color-gray-9); + color : var(--color-white); } .pgn .inactive, @@ -2347,7 +2261,7 @@ td:last-child { .pgn__prev:hover, .pgn__next:focus, .pgn__next:hover { - background : var(--color-text-dark); + background-color : var(--color-gray-9); } .pgn__prev svg, @@ -2495,141 +2409,141 @@ td:last-child { * ## skillbars * ------------------------------------------------------------------- */ .skill-bars { - --bar-padding : 4rem; - --bar-height : 0.4rem; - list-style : none; - margin : var(--vspace-2) 0 var(--vspace-1); - counter-reset : ctr; + list-style : none; + margin : var(--vspace-2) 0 var(--vspace-1); } .skill-bars li { - height : var(--bar-height); - background : transparent; - padding-left : var(--bar-padding); - margin-bottom : var(--vspace-2); + height : .4rem; + background : var(--color-gray-9); + width : 100%; + margin-bottom : calc(var(--vspace-2) - .4rem); + padding : 0; position : relative; } -.skill-bars li::before { - display : block; - content : counter(ctr, decimal-leading-zero) "."; - counter-increment : ctr; - font-family : var(--font-1); - font-size : var(--text-sm); - font-weight : 400; - line-height : var(--vspace-1_5); - letter-spacing : .1em; - color : var(--color-1); - position : absolute; - top : calc(var(--vspace-1_5) * -1); - left : 0; -} - .skill-bars li strong { + position : absolute; + left : 0; + top : calc((var(--vspace-1) * 1.25) * -1); font-family : var(--font-1); font-weight : 600; - font-size : calc(var(--text-size) * 0.7895); - line-height : var(--vspace-1_5); color : var(--color-text-dark); text-transform : uppercase; letter-spacing : .2em; - position : absolute; - top : calc(var(--vspace-1_5) * -1); - left : var(--bar-padding); + font-size : var(--text-xs); + line-height : var(--vspace-0_75); } .skill-bars li .progress { - background : var(--color-1-lighter); + background : var(--color-1); position : relative; height : 100%; - overflow : hidden; - position : relative; } -.skill-bars li .progress::before { +.skill-bars li .progress span { + display : block; + font-family : var(--font-1); + color : white; + font-size : 1rem; + line-height : 1; + background : var(--color-black); + padding : var(--vspace-0_25); + border-radius : 4px; + position : absolute; + right : 0; + top : calc((var(--vspace-1) + .8rem) * -1); +} + +.skill-bars li .progress span::after { + position : absolute; + left : 50%; + bottom : -10px; + margin-left : -5px; + width : 0; + height : 0; + border : 5px solid transparent; + border-top-color : var(--color-black, var(--color-black)); content : ""; - display : block; - height : 100%; - background-color : var(--color-text-dark); } -.skill-bars li .percent5::before { +.skill-bars li .percent5 { width : 5%; } -.skill-bars li .percent10::before { +.skill-bars li .percent10 { width : 10%; } -.skill-bars li .percent15::before { +.skill-bars li .percent15 { width : 15%; } -.skill-bars li .percent20::before { +.skill-bars li .percent20 { width : 20%; } -.skill-bars li .percent25::before { +.skill-bars li .percent25 { width : 25%; } -.skill-bars li .percent30::before { +.skill-bars li .percent30 { width : 30%; } -.skill-bars li .percent35::before { +.skill-bars li .percent35 { width : 35%; } -.skill-bars li .percent40::before { +.skill-bars li .percent40 { width : 40%; } -.skill-bars li .percent45::before { +.skill-bars li .percent45 { width : 45%; } -.skill-bars li .percent50::before { +.skill-bars li .percent50 { width : 50%; } -.skill-bars li .percent55::before { +.skill-bars li .percent55 { width : 55%; } -.skill-bars li .percent60::before { +.skill-bars li .percent60 { width : 60%; } -.skill-bars li .percent65::before { +.skill-bars li .percent65 { width : 65%; } -.skill-bars li .percent70::before { +.skill-bars li .percent70 { width : 70%; } -.skill-bars li .percent75::before { +.skill-bars li .percent75 { width : 75%; } -.skill-bars li .percent80::before { +.skill-bars li .percent80 { width : 80%; } -.skill-bars li .percent85::before { +.skill-bars li .percent85 { width : 85%; } -.skill-bars li .percent90::before { +.skill-bars li .percent90 { width : 90%; } -.skill-bars li .percent95::before { +.skill-bars li .percent95 { width : 95%; } -.skill-bars li .percent100::before { +.skill-bars li .percent100 { width : 100%; } @@ -2665,7 +2579,7 @@ td:last-child { } .stats-tabs li a:hover { - color : var(--color-1-dark); + color : var(--color-1); } .stats-tabs li a em { @@ -2686,6 +2600,7 @@ td:last-child { * * * ------------------------------------------------------------------- */ + .wide { max-width : var(--width-wide); } @@ -2698,59 +2613,17 @@ td:last-child { max-width : var(--width-narrow); } -.body-text-sm { - font-size : calc(var(--text-size) * 0.8947); - line-height : calc(0.9375 * var(--space)); -} - [data-animate-el] { opacity : 0; } -/* ------------------------------------------------------------------- - * ## theme-specific typography classes - * ------------------------------------------------------------------- */ -.text-pretitle { - font-family : var(--font-1); - font-size : calc(var(--text-size) * 1.1053); - font-weight : 300; - line-height : var(--vspace-1); - color : var(--color-1-dark); - margin-top : 0; - margin-bottom : var(--vspace-0_25); - margin-left : .1em; - position : relative; -} - -.text-huge-title { - --text-huge : 9.4rem; - --text-multiplier : 1; - font-family : var(--font-2); - font-weight : 400; - font-size : calc(var(--text-huge) * var(--text-multiplier)); - line-height : 1.0638; - letter-spacing : -0.02em; - color : var(--color-text-dark); - margin-top : 0; -} - -.text-subtitle { - font-family : var(--font-1); - font-size : var(--text-size); - font-weight : 500; - color : var(--color-text-dark); - text-transform : uppercase; - letter-spacing : .2em; - margin-top : 0; - margin-bottom : var(--vspace-0_5); -} - /* ------------------------------------------------------------------- * ## media classes * ------------------------------------------------------------------- */ /* floated image */ + img.u-pull-right { margin : var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875); } @@ -2762,11 +2635,10 @@ img.u-pull-left { /* responsive video container */ .video-container { - --aspect-ratio : 16/9; position : relative; + padding-bottom : 56.25%; height : 0; overflow : hidden; - padding-bottom : calc(100%/(var(--aspect-ratio))); } .video-container iframe, @@ -2781,75 +2653,183 @@ img.u-pull-left { } /* ------------------------------------------------------------------- - * ## swiper overrides + * ## theme-specific typography classes * ------------------------------------------------------------------- */ -.swiper .swiper-pagination-bullets .swiper-pagination-bullet { - margin : 0 1.2rem; +.text-pretitle { + font-family : var(--font-1); + font-size : var(--text-sm); + font-weight : 400; + color : var(--color-white); + text-transform : uppercase; + letter-spacing : .3em; + margin-top : 0; + margin-left : .2rem; + margin-bottom : var(--vspace-0_5); + position : relative; } -.swiper .swiper-pagination-bullet { - width : 6px; - height : 6px; - background : rgba(0, 0, 0, 0.3); - opacity : 1; +.text-pretitle.with-line { + color : var(--color-1); + padding-left : 6rem; + transform : translateX(-6rem); } -.swiper .swiper-pagination-bullet-active { - background : var(--color-1); - opacity : 1; +.text-pretitle.with-line::before { + content : ""; + display : block; + height : 1px; + width : 4rem; + background-color : rgba(255, 255, 255, 0.5); + position : absolute; + top : 50%; + left : 0; +} + +.text-huge-title { + --text-huge : 10.8rem; + font-size : var(--text-huge); + line-height : 1.0740; + margin-top : 0; } /* ------------------------------------------------------------------- - * responsive: - * project-wide and shared styles + * ## MailtoUI style overrides * ------------------------------------------------------------------- */ -@media screen and (max-width: 900px) { - .text-pretitle { - font-size : calc(var(--text-size) * 1.0526); - } +.mailtoui-modal { + --mailtoui-modal-box-shadow : 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.08); + --mailtoui-modal-head-bgcolor : var(--color-gray-18); + --mailtoui-modal-head-title-color : white; + --mailtoui-modal-body-bgcolor : var(--color-gray-11); + --mailtoui-button-bgcolor : rgba(255, 255, 255, .04); + --mailtoui-button-text-color : white; + --mailtoui-button-bgcolor-hover : var(--color-1-dark); + --mailtoui-button-text-color-hover : black; + --mailtoui-button-text-size : 16px; + --mailtoui-email-address-bgcolor : var(--color-gray-13); + --mailtoui-email-address-text-color : var(--text-color); + --border-radius : 0; + font-family : var(--font-1); + background-color : var(--color-body); + color : white; +} + +.mailtoui-modal-content { + background-color : var(--mailtoui-modal-body-bgcolor); + border-radius : var(--border-radius); + box-shadow : var(--mailtoui-modal-box-shadow); +} + +.mailtoui-modal-content button { + font-weight : 400; + font-size : 16px; + margin : 0; + padding : 0; +} - .text-huge-title { - --text-multiplier : .9; - } +.mailtoui-modal-head { + background-color : var(--mailtoui-modal-head-bgcolor); } -@media screen and (max-width: 800px) { - .text-huge-title { - --text-multiplier : .84; - } +.mailtoui-modal-title { + font-family : var(--font-1); + font-weight : 400; + font-size : 16px; + color : var(--mailtoui-modal-head-title-color); } -@media screen and (max-width: 700px) { - .text-huge-title { - --text-multiplier : .74; - } +.mailtoui-modal-close { + font : 0/0 a; + text-shadow : none; + color : transparent; + font-size : 32px; + font-weight : 300; + color : rgba(255, 255, 255, 0.5); } -@media screen and (max-width: 600px) { - .text-huge-title { - --text-multiplier : .64; - } +.mailtoui-modal-close:hover, +.mailtoui-modal-close:focus { + color : white; + font-weight : 300; } -@media screen and (max-width: 500px) { - .text-subtitle { - font-size : var(--text-sm); - } +.mailtoui-modal-body { + background-color : var(--mailtoui-modal-body-bgcolor); +} - .text-huge-title { - --text-multiplier : .58; - } +.mailtoui-button-text { + font-size : var(--mailtoui-button-text-size); + text-transform : none; + letter-spacing : 0; } -@media screen and (max-width: 480px) { - .text-huge-title { - --text-multiplier : .54; - } +.mailtoui-button:focus .mailtoui-button-content { + background-color : var(--mailtoui-button-bgcolor-hover); + color : var(--mailtoui-button-text-color-hover); } -@media screen and (max-width: 400px) { - .text-huge-title { - --text-multiplier : .45; +.mailtoui-button-content, +.mailtoui-button-copy { + background-color : var(--mailtoui-button-bgcolor); + color : var(--mailtoui-button-text-color); + border-radius : var(--border-radius); + box-shadow : none; +} + +.mailtoui-button-content:hover, +.mailtoui-button-content:focus, +.mailtoui-button-copy:hover, +.mailtoui-button-copy:focus { + background-color : var(--mailtoui-button-bgcolor-hover); + color : var(--mailtoui-button-text-color-hover); +} + +.mailtoui-copy { + border-radius : var(--border-radius); + box-shadow : none; +} + +.mailtoui-button-icon-copy { + line-height : var(--vspace-1); +} + +.mailtoui-button-copy-clicked, +.mailtoui-button-copy-clicked:hover, +.mailtoui-button-copy-clicked:focus { + background-color : #1F9D55; + color : white; +} + +.mailtoui-email-address { + background-color : var(--mailtoui-email-address-bgcolor); + color : var(--mailtoui-email-address-text-color); + font-size : 16px; + line-height : 1; + border-radius : var(--border-radius); +} + +.mailtoui-brand a { + color : rgba(255, 255, 255, 0.12); +} + +.mailtoui-brand a:focus, +.mailtoui-brand a:hover { + font-weight : 300; + color : white; +} + +/* ------------------------------------------------------------------- + * responsive: + * project-wide shared styles + * ------------------------------------------------------------------- */ +@media screen and (max-width: 800px) { + .text-pretitle.with-line { + padding-left : 3rem; + transform : translateX(-3rem); + transform : none; + } + + .text-pretitle.with-line::before { + width : 2rem; } } @@ -2860,8 +2840,10 @@ img.u-pull-left { * * * ------------------------------------------------------------------- */ + .s-pagewrap { - --header-height : 10rem; + --circle-width : 70vw; + --header-height : 6.4rem; display : flex; flex-direction : column; min-height : 100%; @@ -2869,166 +2851,193 @@ img.u-pull-left { position : relative; } - - -/* =================================================================== - * # SITE HEADER - * - * - * ------------------------------------------------------------------- */ -.s-header { - --box-shadow: 0 1px 1px rgba(0, 0, 0, 0.01), - 0 2px 2px rgba(0, 0, 0, 0.01), - 0 6px 6px rgba(0, 0, 0, 0.01); - - z-index : 100; - display : flex; - height : var(--header-height); - background-color : var(--color-body); - width : 100%; - transition : height 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); - position : absolute; - top : 0; - left : 0; +/* -------------------------------------------------------------------- + * ## circles + * -------------------------------------------------------------------- */ +.s-pagewrap .circles, +.s-pagewrap .circles span { + position : absolute; } -.s-header.sticky { - --header-height : 8rem; - border-bottom : 1px solid var(--color-border); - box-shadow : var(--box-shadow); - position : fixed; +.s-pagewrap .circles { + width : var(--circle-width); + height : var(--circle-width); + top : calc(100vh - var(--circle-width)); + left : calc(100% - 33vw); } -.s-header__block { - z-index : 101; +.s-pagewrap .circles span { + display : block; + border : 1px solid var(--color-1); + border-radius : 50%; + opacity : .1; + transform : translate(-50%, -50%); + left : 50%; + top : 50%; } -/* -------------------------------------------------------------------- - * ## branding - * -------------------------------------------------------------------- */ -.s-header__branding { - z-index : 2; - font-family : var(--font-2); - font-size : 3rem; - line-height : 1; - letter-spacing : -0.03em; - transform : translateY(-50%); - position : absolute; - top : 50%; - left : 3.6rem; +.s-pagewrap .circles span:nth-child(1) { + height : 100%; + width : 100%; } -.s-header__branding .site-title { - margin : 0; - padding : 0; +.s-pagewrap .circles span:nth-child(2) { + height : 80%; + width : 80%; } -.s-header__branding a { - margin : 0; - padding : 0; - outline : 0; - border : none; - color : var(--color-text-dark); +.s-pagewrap .circles span:nth-child(3) { + height : 60%; + width : 60%; } -/* -------------------------------------------------------------------- - * ## main navigation - * -------------------------------------------------------------------- */ -.s-header__nav-wrap { - justify-content : center; - align-items : center; +.s-pagewrap .circles span:nth-child(4) { + height : 40%; + width : 40%; } -.s-header__nav a { - display : block; - font-size : 2rem; - font-weight : 400; - line-height : var(--vspace-1); - color : var(--color-text-dark); - padding : 0 1.8rem; - transition-property : color, background-color; +.s-pagewrap .circles span:nth-child(5) { + height : 20%; + width : 20%; } -.s-header__nav a:focus, -.s-header__nav a:hover { - color : var(--color-1); +.ss-preload .s-pagewrap { + visibility : hidden; } -.s-header__nav ul { - list-style : none; - display : flex; - flex-flow : row nowrap; - margin : 0; - padding : 0; -} +/* ------------------------------------------------------------------- + * responsive: + * page-wrap + * ------------------------------------------------------------------- */ +@media screen and (max-width: 800px) { + .s-pagewrap .circles { + top : calc(var(--header-height) + 5vh); + } +} -.s-header__nav li { - padding-left : 0; + + +/* =================================================================== + * # SITE HEADER + * + * + * ------------------------------------------------------------------- */ + +.s-header { + --box-shadow : 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.06), 0 8px 8px rgba(0, 0, 0, 0.06); + z-index : 100; + width : 100%; + position : fixed; + top : 0; + left : 0; +} + +.header-mobile { + z-index : 101; + display : none; + height : var(--header-height); + background-color : var(--color-body); + box-shadow : var(--box-shadow); + border-bottom : 1px solid var(--color-border); } /* -------------------------------------------------------------------- - * ## header social + * ## main navigation * -------------------------------------------------------------------- */ -.s-header__social { - list-style : none; - display : flex; - margin : 0; - transform : translateY(-50%); - position : absolute; - top : calc(50% - .2rem); - right : 3.6rem; +.mobile-home-link a, +.main-nav a { + display : block; + font-size : 10px; + font-weight : 400; + line-height : var(--header-height); + text-transform : uppercase; + letter-spacing : .35em; + color : white; + transition-property : color, background-color; } -.s-header__social li { - padding-left : 0; - margin-right : 1rem; - line-height : 1; +.mobile-home-link a:focus, +.mobile-home-link a:hover, +.main-nav a:focus, +.main-nav a:hover { + color : var(--color-1); } -.s-header__social li:last-child { - margin-right : 0; +.mobile-home-link { + display : inline-block; + position : relative; } -.s-header__social svg { - height : 2.8rem; - width : 2.8rem; +.mobile-home-link a { + padding : 0 .4rem; + margin-left : 2.4rem; } -.s-header__social svg path { - fill : var(--color-text-dark); +.main-nav { + padding : 0; +} + +.main-nav a { + padding : 0 2rem 0 2.4rem; +} + +.main-nav .current a { + background-color : var(--color-gray-9); +} + +.main-nav ul { + list-style : none; + display : flex; + flex-flow : row nowrap; + margin : 0; + padding : 0; + background-color : var(--color-body); + border-width : 1px; + border-color : var(--color-border); + border-style : none solid solid solid; +} + +.main-nav li { + flex : 1 1 0%; + padding-left : 0; + border-right : 1px solid var(--color-border); +} + +.main-nav li:last-child { + border-right : none; } /* -------------------------------------------------------------------- * ## mobile menu toggle * -------------------------------------------------------------------- */ -.s-header__menu-toggle { - display : none; - width : 6.8rem; +.mobile-menu-toggle { + display : block; + width : var(--header-height); height : var(--header-height); position : absolute; top : 0; - right : 1.6rem; + right : .8rem; } -.s-header__menu-toggle span { +.mobile-menu-toggle span { display : block; - background-color : var(--color-text-dark); - width : 28px; - height : 2px; + background-color : white; + width : 24px; + height : 1px; margin-top : -1px; font : 0/0 a; text-shadow : none; color : transparent; - transition : background-color 0.2s ease-in-out; position : absolute; right : 20px; top : 50%; bottom : auto; left : auto; + transition : background-color 0.2s ease-in-out; } -.s-header__menu-toggle span::before, -.s-header__menu-toggle span::after { +.mobile-menu-toggle span::before, +.mobile-menu-toggle span::after { content : ""; width : 100%; height : 100%; @@ -3039,34 +3048,34 @@ img.u-pull-left { left : 0; } -.s-header__menu-toggle span::before { +.mobile-menu-toggle span::before { top : -8px; transition-property : top, transform; } -.s-header__menu-toggle span::after { +.mobile-menu-toggle span::after { bottom : -8px; transition-property : bottom, transform; } /* is clicked */ -.s-header__menu-toggle.is-clicked span { +.mobile-menu-toggle.is-clicked span { background-color : rgba(255, 255, 255, 0); } -.s-header__menu-toggle.is-clicked span::before, -.s-header__menu-toggle.is-clicked span::after { - background-color : var(--color-text-dark); +.mobile-menu-toggle.is-clicked span::before, +.mobile-menu-toggle.is-clicked span::after { + background-color : white; transition-delay : 0s, 0.2s; } -.s-header__menu-toggle.is-clicked span::before { +.mobile-menu-toggle.is-clicked span::before { top : 0; transform : rotate(45deg); } -.s-header__menu-toggle.is-clicked span::after { +.mobile-menu-toggle.is-clicked span::after { bottom : 0; transform : rotate(-45deg); } @@ -3075,75 +3084,58 @@ img.u-pull-left { * responsive: * site-header * ------------------------------------------------------------------- */ -@media screen and (max-width: 1200px) { - .s-header__nav a { - font-size : 1.9rem; - } -} - @media screen and (max-width: 1000px) { - .s-header__nav a { - font-size : 1.8rem; - padding : 0 1.4rem; - } - - .s-header__social svg { - height : 2.6rem; - width : 2.6rem; + .main-nav-wrap { + width : 100%; } } -@media screen and (max-width: 900px) { +@media screen and (max-width: 800px) { .s-header { - --header-height : 8rem; - display : block; - background-color : transparent; - } - - .s-header__block { - width : 100%; - height : var(--header-height); - background-color : var(--color-body); - border-bottom : 1px solid var(--color-border); - box-shadow : var(--box-shadow); + height : var(--header-height); } - .s-header__branding { - top : calc(var(--header-height) / 2); + .header-mobile { + display : block; } - .s-header__nav-wrap { - display : block; - width : 100%; - max-width : none; + .main-nav-wrap { transform : scaleY(0); transform-origin : center top; - padding : var(--vspace-2) 3.6rem var(--vspace-2); background-color : var(--color-body); border-bottom : 1px solid var(--color-border); box-shadow : var(--box-shadow); } - .s-header__nav, - .s-header__social { + .main-nav { + padding : var(--vspace-1) 0 var(--vspace-1_5); transform : translateY(-2rem); opacity : 0; visibility : hidden; } - .s-header__nav { - padding : 0 0 var(--vspace-1_25); + .main-nav a { + font-family : var(--font-2); + font-size : var(--text-md); + font-weight : 400; + line-height : var(--vspace-0_875); + text-transform : none; + letter-spacing : 0; + padding : var(--vspace-0_5) 2.8rem; + color : var(--color-text); } - .s-header__nav a { - font-family : var(--font-1); - font-size : var(--text-lg); - font-weight : 400; - line-height : var(--vspace-1); - padding : var(--vspace-0_375) 0; + .main-nav a:focus, + .main-nav a:hover { + color : white; + } + + .main-nav .current a { + background-color : transparent; + color : var(--color-1); } - .s-header__nav ul { + .main-nav ul { display : block; background-color : transparent; text-align : left; @@ -3151,34 +3143,30 @@ img.u-pull-left { border : none; } - .s-header__nav ul li { + .main-nav ul li { display : block; + border : none; } - .s-header__social { - position : static; - } - - .s-header__menu-toggle { - display : block; + .main-nav ul li:first-child { + display : none; } .menu-is-open .s-header { height : auto; } - .menu-is-open .s-header__block { + .menu-is-open .header-mobile { box-shadow : none; } - .menu-is-open .s-header__nav-wrap { + .menu-is-open .main-nav-wrap { transform : scaleY(1); transition : transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay : 0s; } - .menu-is-open .s-header__nav, - .menu-is-open .s-header__social { + .menu-is-open .main-nav { transform : translateY(0); opacity : 1; visibility : visible; @@ -3187,6 +3175,12 @@ img.u-pull-left { } } +@media screen and (max-width: 600px) { + .main-nav-wrap { + padding : 0; + } +} + /* =================================================================== @@ -3194,132 +3188,200 @@ img.u-pull-left { * * * ------------------------------------------------------------------- */ + .s-intro { - padding-top : calc(9.5 * var(--space)); - width : 100%; - position : relative; + --gutter : 6rem; + --text-huge-multiplier : 1; + position : relative; } -.s-intro__content { - position : relative; +.intro-content { + min-height : calc(25.5 * var(--space)); + justify-content : center; + align-items : center; + padding-top : calc(16vh + var(--header-height)); + padding-bottom : var(--vspace-3); +} + +.intro-content .text-huge-title { + font-size : calc(var(--text-huge) * var(--text-huge-multiplier)); + padding-right : 5vw; } /* -------------------------------------------------------------------- - * ## intro text + * ## intro social * -------------------------------------------------------------------- */ -.s-intro__text { - z-index : 2; - width : 100%; - text-align : center; - position : absolute; - top : 0; - left : 0; +.intro-social { + z-index : 1; + list-style : none; + display : flex; + font-size : 1rem; + font-weight : 400; + text-transform : uppercase; + letter-spacing : .3em; + margin : 0; + padding : 0 0 0 9.6rem; + transform : rotate(-90deg) translateX(-50%); + transform-origin : left bottom; + position : absolute; + top : 50%; + left : calc(100% - 6rem); } -.s-intro__text h3 { - font-family : var(--font-1); - font-size : var(--text-xxxl); - font-weight : 400; - line-height : 1.0998; - letter-spacing : -.01em; - margin-top : 0; - color : white; +.intro-social li { + padding : 0 1.2rem; } -.s-intro__text h3 span { - color : var(--color-2-light); +.intro-social a { + color : var(--color-text-light); } -.s-intro__text-huge { - --text-huge-size : 24.6rem; - font-size : var(--text-huge-size); - line-height : 1; - letter-spacing : -0.015em; - margin-top : calc(var(--text-huge-size) / 2 * -1.2); - margin-bottom : var(--vspace-1_25); - color : white; +.intro-social a:focus, +.intro-social a:hover { + color : white; } /* -------------------------------------------------------------------- - * ## intro bg + * ## intro scrolldown * -------------------------------------------------------------------- */ -.s-intro__bg { - aspect-ratio : 1/1; - width : 100%; - background-color : var(--color-gray-4); - background-image : url(../images/intro-bg.jpg); - background-repeat : no-repeat; - background-position : center; - background-size : cover; - position : relative; +.intro-scrolldown { + display : block; + height : var(--vspace-1); + width : var(--vspace-1); + display : flex; + justify-content : center; + align-items : center; + position : absolute; + bottom : 4.8rem; + right : 5.8rem; } -.s-intro__bg::after { - display : block; - content : ""; - position : absolute; - top : 0; - left : 0; - right : 0; - bottom : 0; - width : 100%; - height : 100%; - background : linear-gradient(180deg, black 5%, rgba(0, 0, 0, 0) 100%); - pointer-events : none; - opacity : .12; +.intro-scrolldown svg { + height : var(--vspace-0_75); + width : var(--vspace-0_75); +} + +.intro-scrolldown svg path { + fill : white; + transition : all .3s ease-in-out; +} + +.intro-scrolldown:focus svg path, +.intro-scrolldown:hover svg path { + fill : var(--color-1); } /* ------------------------------------------------------------------- * responsive: * intro * ------------------------------------------------------------------- */ -@media screen and (max-width: 1400px) { - .s-intro__text-huge { - --text-huge-size : 22rem; +@media screen and (max-width: 1600px) { + .s-intro { + --text-huge-multiplier : .92; } } @media screen and (max-width: 1200px) { - .s-intro__text-huge { - --text-huge-size : 18vw; + .s-intro { + --text-huge-multiplier : .85; + } + + .intro-social { + left : calc(100% - 4rem); } -} -@media screen and (max-width: 1100px) { - .s-intro__text h3 { - font-size : var(--text-xxl); + .intro-scrolldown { + right : 4rem; } } @media screen and (max-width: 1000px) { .s-intro { - padding-top : calc(7 * var(--space)); + --text-huge-multiplier : .8; + } + + .intro-content { + padding-top : calc(14vh + var(--header-height)); } } @media screen and (max-width: 900px) { - .s-intro__text h3 { - font-size : 3.2rem; + .s-intro { + --text-huge-multiplier : .75; } - .s-intro__text-huge { - margin-bottom : var(--vspace-1); + .intro-content .text-huge-title br { + display : none; } } @media screen and (max-width: 800px) { - .s-intro__text h3 { - font-size : 2.8rem; + .s-intro { + --gutter : 4rem; + --text-huge-multiplier : .7; + } + + .intro-content { + min-height : 0; + align-items : flex-start; + padding-top : calc(9.6rem + var(--header-height)); + } + + .intro-content .text-huge-title { + padding-right : 0; + margin-bottom : var(--vspace-1_5); + } + + .intro-social { + width : 100%; + flex-wrap : wrap; + padding-left : 0; + padding-right : 8rem; + transform : none; + position : relative; + left : var(--gutter); } - .s-intro__text-huge { - margin-bottom : var(--vspace-0_5); + .intro-social li { + padding : 0 .6rem; } } @media screen and (max-width: 600px) { - .s-intro__text h3 { - font-size : 4.6vw; + .s-intro { + --gutter : 2rem; + --text-huge-multiplier : .58; + } + + .intro-scrolldown { + right : 2.4rem; + } +} + +@media screen and (max-width: 500px) { + .s-intro { + --text-huge-multiplier : .55; + } + + .intro-social { + left : 1.4rem; + } +} + +@media screen and (max-width: 400px) { + .intro-content .text-huge-title { + font-size : var(--text-display-1); + line-height : var(--vspace-2); + } + + .intro-social { + left : 0; + } +} + +@media screen and (max-width: 350px) { + .intro-social { + display : none; } } @@ -3330,65 +3392,93 @@ img.u-pull-left { * * * ------------------------------------------------------------------- */ + .s-about { - --subtitle-line-height : var(--vspace-1_5); - --timeline-left-padding : var(--vspace-1_75); - --timeline-top-adjust : calc(var(--subtitle-line-height) / 2); - --timeline-vertical-border-pos : 8px; + padding-top : var(--vspace-4); + padding-bottom : var(--vspace-3); +} - padding-top : var(--vspace-5); - padding-bottom : var(--vspace-3); +/* -------------------------------------------------------------------- + * ## about info + * -------------------------------------------------------------------- */ +.about-info { + --gutter : 0; + width : 100%; + align-items : center; } -.s-about__block { - margin-bottom : var(--vspace-2); +.about-info__pic { + object-fit : cover; + margin : 0; + vertical-align : bottom; } -.s-about__timeline { - padding-top : var(--vspace-1_5); +.about-info__text { + padding : var(--vspace-3_5) 10vw var(--vspace-2) 0; + margin-left : -4rem; } -.s-about__timeline-section { - position : relative; +.about-info__text .text-pretitle { + margin-bottom : var(--vspace-1); } -.s-about__timeline-section::before { - content : ""; - width : 1px; - height : calc(100% - var(--timeline-top-adjust)); - background-color : var(--color-border); - position : absolute; - top : var(--timeline-top-adjust); - left : calc(var(--timeline-vertical-border-pos) + var(--gutter)); +.about-info__text .btn { + margin-top : var(--vspace-1); + margin-bottom : 0; } -.s-about .text-subtitle { - padding-left : var(--timeline-left-padding); - line-height : var(--subtitle-line-height); - margin-bottom : var(--vspace-0_25); - position : relative; +/* -------------------------------------------------------------------- + * ## about expertise + * -------------------------------------------------------------------- */ +.about-expertise { + padding-top : calc(6 * var(--space)); } -.s-about .text-subtitle::before { - content : ""; - display : block; - height : 1px; - width : 3.2rem; - background-color : var(--color-border); - position : absolute; - top : 50%; - left : calc(var(--timeline-vertical-border-pos) + 1px); +.about-expertise .skills-list { + list-style : none; + margin-top : var(--vspace-1); + margin-left : 0; +} + +.about-expertise .skills-list li { + display : inline-block; + padding-left : 0; +} + +.about-expertise .skills-list li:not(:last-child)::after { + content : ", "; } /* -------------------------------------------------------------------- * ## about timelines * -------------------------------------------------------------------- */ +.about-timelines { + --timeline-left-padding : var(--vspace-1_75); + --timeline-top-adjust : var(--vspace-0_5); + padding-top : var(--vspace-3); +} + +.about-timelines .text-pretitle { + margin-left : var(--timeline-left-padding); +} + .timeline { - margin-top : var(--vspace-1_5); + margin-top : var(--vspace-1_25); padding-right : 1vw; position : relative; } +.timeline::before { + content : ""; + display : block; + width : 1px; + height : calc(100% - var(--timeline-top-adjust)); + background-color : var(--color-border); + position : absolute; + top : var(--timeline-top-adjust); + left : 3px; +} + .timeline__block { padding-left : var(--timeline-left-padding); padding-bottom : var(--vspace-0_5); @@ -3401,397 +3491,412 @@ img.u-pull-left { .timeline__bullet { display : block; - height : 4.4rem; - width : 3px; - background-color : var(--color-text-dark); + height : 8px; + width : 8px; + border-radius : 50%; + background-color : var(--color-1); position : absolute; - top : 0; - left : calc(var(--timeline-vertical-border-pos) - 1px); + top : var(--timeline-top-adjust); + left : 0; } .timeline__title { - font-family : var(--font-2); - font-weight : 400; - font-size : var(--text-xl); - line-height : 1.0966; + font-family : var(--font-1); + font-weight : 500; + font-size : var(--text-lg); margin-top : 0; margin-bottom : var(--vspace-0_125); } .timeline__meta { font-family : var(--font-1); - font-weight : 400; + font-weight : 300; font-size : calc(var(--text-size) * 1.1053); margin-top : 0; margin-bottom : var(--vspace-0_125); } .timeline__timeframe { - font-size : calc(var(--text-size) * 0.7368); + font-size : var(--text-xs); line-height : var(--vspace-0_75); text-transform : uppercase; - letter-spacing : .15em; - color : var(--color-1-dark); + letter-spacing : .2em; + color : var(--color-text-light); margin-top : -.2rem; } -/* -------------------------------------------------------------------- - * ## about skills - * -------------------------------------------------------------------- */ -.s-about__skills { - padding-top : var(--vspace-3); +/* ------------------------------------------------------------------- + * responsive: + * about + * ------------------------------------------------------------------- */ +@media screen and (max-width: 1300px) { + .about-info__text { + padding : var(--vspace-2) 8rem var(--vspace-1_5) 0; + } } -.s-about__skills .text-subtitle::after { - display : none; -} +@media screen and (max-width: 1200px) { + .about-info { + --gutter : 1.6rem; + width : 92%; + max-width : 800px; + } -.s-about__skills .skill-bars { - --bar-padding : var(--timeline-left-padding); - margin-top : var(--vspace-2_5); - display : flex; - flex-flow : row wrap; + .about-info__text { + padding : var(--vspace-1) 0 0 0; + margin-left : 0; + } } -.s-about__skills .skill-bars li { - margin-bottom : calc(2.25 * var(--space)); - flex : none; - width : 50%; +@media screen and (max-width: 1000px) { + .about-timelines { + --timeline-left-padding : var(--vspace-1_25); + } } -.s-about__skills .skill-bars li::before { - left : .4rem; -} +@media screen and (max-width: 800px) { + .about-timelines { + --timeline-left-padding : var(--vspace-1_5); + } -.s-about__skills .skill-bars li:nth-child(2n+1) { - padding-right : var(--gutter); + .about-timelines .column+.column { + margin-top : var(--vspace-1_5); + } } -.s-about__skills .skill-bars li:nth-child(2n+2) { - padding-left : calc(var(--gutter) + var(--bar-padding)); +@media screen and (max-width: 600px) { + .about-info { + width : 100%; + } } -.s-about__skills .skill-bars li:nth-child(2n+2)::before { - left : var(--gutter); +@media screen and (max-width: 400px) { + .about-timelines { + --timeline-left-padding : var(--vspace-1); + } } -.s-about__skills .skill-bars li:nth-child(2n+2) strong { - left : calc(var(--gutter) + var(--bar-padding)); -} -.s-about__skills .skill-bars strong { - font-weight : 400; - font-size : calc(var(--text-size) * 1.1053); - text-transform : none; - letter-spacing : 0; -} -/* -------------------------------------------------------------------- - * ## about clients - * -------------------------------------------------------------------- */ -.s-about__clients { - padding-top : var(--vspace-0_5); - overflow : hidden; -} +/* =================================================================== + * # WORKS + * + * + * ------------------------------------------------------------------- */ -.s-about__clients .clients-list { - list-style : none; - display : flex; - flex-flow : row wrap; - margin-left : 0; +.s-works { + padding-top : var(--vspace-5); + padding-bottom : var(--vspace-3_5); } -.s-about__clients .clients-list a { - color : var(--color-text-dark); +.s-works .h1 { + margin-top : 0; } -.s-about__clients .clients-list a:focus, -.s-about__clients .clients-list a:hover { - color : var(--color-1); +/* -------------------------------------------------------------------- + * ## works portfolio + * -------------------------------------------------------------------- */ +.folio-list { + --item-min-height : var(--vspace-4_5); + list-style : none; + margin-top : var(--vspace-4); + margin-bottom : var(--vspace-1); + margin-left : 0; } -.s-about__clients .clients-list li { - display : inline-block; - padding-left : 0; - position : relative; +.folio-list__item { + margin-bottom : var(--vspace-1); + position : relative; } -.s-about__clients .clients-list li:not(:last-child)::after { - content : "/"; - font-family : var(--font-1); - font-weight : 300; - font-size : .48em; - color : var(--color-1-light); - margin : 0 .2em 0 .3em; - position : relative; - bottom : .05em; +.folio-list__item-link { + display : block; + width : 100%; + padding-left : calc(5.5 * var(--space)); + color : white; + transition-duration : .5s; + position : relative; } -/* ------------------------------------------------------------------- - * responsive: - * about - * ------------------------------------------------------------------- */ -@media screen and (max-width: 1000px) { - .s-about { - --timeline-left-padding : var(--vspace-1_25); - } - - .s-about .text-subtitle::before { - width : 2.4rem; - } +.folio-list__item-link:focus, +.folio-list__item-link:hover { + color : var(--color-1); + outline : 0; } -@media screen and (max-width: 900px) { - .s-about { - --timeline-left-padding : var(--vspace-1_75); - } - - .s-about .text-subtitle::before { - width : 3.2rem; - } - - .s-about__timeline .s-about__timeline-section:first-child { - margin-bottom : var(--vspace-2); - } - - .s-about__skills .skill-bars { - display : block; - } - - .s-about__skills .skill-bars li { - width : auto; - } +.folio-list__item-link:focus .folio-list__item-pic::before, +.folio-list__item-link:hover .folio-list__item-pic::before { + opacity : 1; + visibility : visible; +} - .s-about__skills .skill-bars li:nth-child(2n+1) { - padding-right : 0; - } +.folio-list__item-link:focus .folio-list__item-pic::after, +.folio-list__item-link:hover .folio-list__item-pic::after { + opacity : 1; + visibility : visible; + transform : scale(1); +} - .s-about__skills .skill-bars li:nth-child(2n+2) { - padding-left : var(--bar-padding); - } +.folio-list__item-link:focus .folio-list__item-text::before, +.folio-list__item-link:hover .folio-list__item-text::before { + width : 100%; +} - .s-about__skills .skill-bars li:nth-child(2n+2)::before { - left : .4rem; - } +.folio-list__item-pic { + display : block; + position : absolute; + top : 0; + left : 0; +} - .s-about__skills .skill-bars li:nth-child(2n+2) strong { - left : var(--bar-padding); - } +.folio-list__item-pic img { + vertical-align : bottom; + object-fit : cover; + width : var(--item-min-height); + height : var(--item-min-height); + margin : 0; } -@media screen and (max-width: 600px) { - .s-about { - --timeline-left-padding : var(--vspace-1_25); - padding-top : var(--vspace-4); - padding-bottom : var(--vspace-2); - } +.folio-list__item-pic::before, +.folio-list__item-pic::after { + transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); +} - .s-about .text-subtitle::before { - width : 1.6rem; - } +.folio-list__item-pic::before { + z-index : 1; + content : ""; + display : block; + background-color : rgba(255, 255, 255, 0.75); + position : absolute; + top : 0; + left : 0; + right : 0; + bottom : 0; + width : 100%; + height : 100%; + opacity : 0; + visibility : hidden; } -@media screen and (max-width: 500px) { - .s-about { - --timeline-left-padding : 0; - --subtitle-line-height : var(--vspace-0_625); - } +.folio-list__item-pic::after { + z-index : 2; + display : block; + content : "+"; + font-family : var(--font-1); + font-weight : 300; + font-size : 2.2rem; + color : black; + text-align : center; + height : var(--vspace-1); + width : var(--vspace-1); + line-height : var(--vspace-1); + transform : scale(0.2); + opacity : 0; + visibility : hidden; + position : absolute; + top : calc(50% - var(--vspace-0_5)); + left : calc(50% - var(--vspace-0_5)); +} - .s-about__timeline-section::before { - display : none; - } +.folio-list__item-text::before, +.folio-list__item-title, +.folio-list__item-cat { + transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); +} - .s-about .text-subtitle::before { - display : none; - } +.folio-list__item-text { + padding-top : var(--vspace-0_5); + border-top : 1px solid var(--color-border); + min-height : var(--item-min-height); + position : relative; +} - .timeline { - margin-top : var(--vspace-1); - padding-right : 0; - } +.folio-list__item-text::before { + content : ""; + display : block; + width : 0; + height : 1px; + background-color : var(--color-text-light); + position : absolute; + top : 0; + left : 0; +} - .timeline__block { - padding-bottom : 0; - } +.folio-list__item-title { + font-family : var(--font-1); + font-weight : 500; + font-size : var(--text-lg); +} - .timeline__bullet { - display : none; - } +.folio-list__item-cat { + font-size : var(--text-sm); + color : var(--color-text-light); + line-height : var(--vspace-0_75); + margin-left : .2rem; +} - .s-about__skills .skill-bars li::before { - display : none; - } +.folio-list__proj-link { + display : block; + height : var(--vspace-1); + width : var(--vspace-1); + position : absolute; + top : .8rem; + right : var(--vspace-0_75); } +.folio-list__proj-link svg { + height : var(--vspace-0_5); + width : var(--vspace-0_5); + transform : translate(-50%, -50%) rotate(-45deg); + position : absolute; + top : 50%; + left : 50%; +} +.folio-list__proj-link svg path { + fill : white; +} -/* =================================================================== - * # WORKS - * - * - * ------------------------------------------------------------------- */ -.s-works { - padding-top : calc(6 * var(--space)); - padding-bottom : calc(5.5 * var(--space)); - background-color : white; +.folio-list__proj-link:hover { + transform : scale(1.2); } /* ------------------------------------------------------------------- - * ## portfolio list + * ## modal popup * ------------------------------------------------------------------- */ -.folio-list { - margin-top : var(--vspace-2_5); - margin-bottom : var(--vspace-2); -} - -.folio-list .column { - margin-bottom : var(--vspace-1_25); +.modal-popup { + max-width : 680px; + background-color : white; + font-size : calc(var(--text-size) * 0.9447); + line-height : var(--vspace-0_875); + color : rgba(0, 0, 0, 0.75); + overflow-y : auto; + position : relative; } -.folio-list .column:nth-child(2n+1) { - padding-right : calc(var(--gutter) + 1.6rem); +.modal-popup img { + margin-bottom : var(--vspace-0_75); } -.folio-list .column:nth-child(2n+2) { - padding-left : calc(var(--gutter) + 1.6rem); +.modal-popup h5 { + font-family : var(--font-1); + font-size : var(--text-size); + line-height : var(--vspace-1); + font-weight : 500; + margin-top : 0; + margin-bottom : var(--vspace-0_25); + color : black; } -.folio-item__caption { - display : none; +.modal-popup__desc { + padding : 0 var(--vspace-1_25) var(--vspace-0_25); } -/* thumbnail - */ -.folio-item__thumb a { - display : block; - position : relative; - overflow : hidden; +.modal-popup__cat { + list-style : none; + margin-left : 0; + font-size : var(--text-sm); + line-height : var(--vspace-0_5); + color : rgba(0, 0, 0, 0.6); + padding-left : calc(0.875 * var(--space)); + position : relative; } -.folio-item__thumb a::before { - z-index : 1; - content : ""; - display : block; - background-color : rgba(0, 0, 0, 0.5); - opacity : 0; - visibility : hidden; - position : absolute; - top : 0; - left : 0; - right : 0; - bottom : 0; - width : 100%; - height : 100%; - transition : all, .5s; +.modal-popup__cat::before { + content : ""; + display : block; + height : calc(0.625 * var(--space)); + width : calc(0.625 * var(--space)); + background-repeat : no-repeat; + background-position : center; + background-size : contain; + background-image : url(../images/icons/icon-tag.svg); + position : absolute; + left : 0; + top : -0.15em; } -.folio-item__thumb a::after { - z-index : 1; - content : "+"; - text-align : center; - font-family : var(--font-1); - font-weight : 300; - font-size : 3rem; - color : white; - display : block; - height : 3.2rem; - width : 3.2rem; - line-height : 3.2rem; - margin-left : -1.6rem; - margin-top : -3rem; - text-align : center; - opacity : 0; - visibility : hidden; - transform : scale(0.5); - transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); - position : absolute; - left : 50%; - top : 50%; +.modal-popup__cat li { + display : inline; + padding-left : 0; } -.folio-item__thumb img { - vertical-align : bottom; - margin-bottom : 0; - transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); +.modal-popup__cat li::after { + content : ", "; } -/* portfolio info - */ -.folio-item__info { - padding : var(--vspace-0_75) 0 var(--vspace-0_5); +.modal-popup__cat li:last-child::after { + display : none; } -.folio-item__title { - margin : 0; +.modal-popup__details { + background-color : rgba(0, 0, 0, 0.3); + font-size : var(--text-xs); + line-height : var(--vspace-1_25); + color : white; + padding : 0 1.2rem; + position : absolute; + top : var(--vspace-1); + left : var(--vspace-1); } -.folio-item__meta { - font-family : var(--font-1); - font-size : var(--text-sm); - line-height : 1.5; - margin-bottom : 0.2rem; - color : var(--color-gray-8); +.modal-popup__details:focus, +.modal-popup__details:hover { + background-color : var(--color-body); + color : white; } -.folio-item__meta .project-link { - color : var(--color-text); - margin : 0 .8rem; +/* ------------------------------------------------------------------- + * ## testimonials + * ------------------------------------------------------------------- */ +.testimonials { + margin-top : var(--vspace-3); } -.folio-item__meta .project-link:focus, -.folio-item__meta .project-link:hover { - color : var(--color-1); +.testimonials .swiper-container { + padding-bottom : var(--vspace-2_5); } -/* on hover - */ -.folio-item__thumb:hover .folio-item__thumb-link img { - transform : scale(1.05); +.testimonials .swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet { + margin : 0 9px; } -.folio-item__thumb:hover .folio-item__thumb-link::before { - opacity : 1; - visibility : visible; +.testimonials .swiper-pagination-bullet { + width : 6px; + height : 6px; + background : white; + opacity : 0.4; } -.folio-item__thumb:hover .folio-item__thumb-link::after { +.testimonials .swiper-pagination-bullet-active { + background : var(--color-1); opacity : 1; - visibility : visible; - transform : scale(1); } /* ------------------------------------------------------------------- - * ## testimonial slider + * ## testimonial slider * ------------------------------------------------------------------- */ -.testimonials { - margin-top : var(--vspace-4_5); +.testimonial-slider__slide { + position : relative; } -.testimonial-slider { - padding-right : var(--vspace-4); - padding-left : var(--vspace-4); - padding-bottom : var(--vspace-1_5); +.testimonial-slider__slide:hover .testimonial-slider__avatar { + filter : none; } -.testimonial-slider__slide { - background-color : white; - text-align : center; - width : 100%; - position : relative; +.testimonial-slider__slide:hover .testimonial-slider__cite strong { + color : var(--color-1); } -.testimonial-slider__slide p { - font-size : var(--text-xl); - line-height : 1.6244; +.testimonial-slider__slide:hover .testimonial-slider__cite span { + color : white; } .testimonial-slider__author { display : inline-block; - text-align : left; min-height : var(--vspace-2); - margin-top : var(--vspace-0_75); - margin-bottom : var(--vspace-0_625); - padding-left : calc(2.25 * var(--space)); + margin-bottom : var(--vspace-0_5); + padding-left : var(--vspace-2_5); position : relative; } @@ -3803,6 +3908,8 @@ img.u-pull-left { position : absolute; top : 0; left : 0; + filter : grayscale(100%); + transition : all 0.3s ease-in-out; } .testimonial-slider__cite { @@ -3816,62 +3923,18 @@ img.u-pull-left { } .testimonial-slider__cite strong { - font-family : var(--font-2); - font-size : calc(var(--text-size) * 1.1053); + font-size : calc(var(--text-size) * 0.8947); font-weight : 400; - line-height : var(--vspace-1); - color : var(--color-text-dark); + line-height : var(--vspace-0_75); + color : white; } .testimonial-slider__cite span { display : block; - font-size : var(--text-sm); - font-weight : 400; + font-size : calc(var(--text-size) * 0.7368); + font-weight : 300; line-height : var(--vspace-0_5); - color : var(--color-gray-8); -} - -.testimonial-slider__next, -.testimonial-slider__prev { - z-index : 10000; - display : flex; - justify-content : center; - align-items : center; - border-radius : 50%; - background-color : var(--color-gray-2); - height : var(--vspace-1_75); - width : var(--vspace-1_75); - cursor : pointer; - transform : translateY(-50%); - position : absolute; - top : calc(50% - var(--vspace-1_5)); -} - -.testimonial-slider__next svg, -.testimonial-slider__prev svg { - height : var(--vspace-0_75); - width : var(--vspace-0_75); -} - -.testimonial-slider__next svg path, -.testimonial-slider__prev svg path { - fill : var(--color-text-dark); -} - -.testimonial-slider__next { - right : 0; -} - -.testimonial-slider__prev { - left : 0; -} - -.swiper-button-disabled { - cursor : default; -} - -.swiper-button-disabled svg path { - fill : var(--color-gray-8); + color : var(--color-text-light); } /* ------------------------------------------------------------------- @@ -3879,175 +3942,228 @@ img.u-pull-left { * works * ------------------------------------------------------------------- */ @media screen and (max-width: 1200px) { - .folio-list .column:nth-child(2n+1) { - padding-right : calc(var(--gutter) + .8rem); - } - - .folio-list .column:nth-child(2n+2) { - padding-left : calc(var(--gutter) + .8rem); + .folio-list__item-title { + font-size : var(--text-md); + line-height : var(--vspace-0_875); } - .testimonial-slider { - padding-right : var(--vspace-3_5); - padding-left : var(--vspace-3_5); + .folio-list__item-cat { + font-size : var(--text-xs); } +} - .testimonial-slider__slide p { - font-size : var(--text-lg); +@media screen and (max-width: 1000px) { + .folio-list__item-title { + font-size : var(--text-lg); + line-height : var(--vspace-1); } - .testimonial-slider__next, - .testimonial-slider__prev { - height : var(--vspace-1_5); - width : var(--vspace-1_5); + .folio-list__item-cat { + font-size : var(--text-sm); } +} - .testimonial-slider__next svg, - .testimonial-slider__prev svg { - height : var(--vspace-0_625); - width : var(--vspace-0_625); +@media screen and (max-width: 800px) { + .s-works { + padding-top : var(--vspace-4); + padding-bottom : var(--vspace-3); } } -@media screen and (max-width: 900px) { - .folio-item__title { +@media screen and (max-width: 600px) { + .folio-list__item-title { font-size : var(--text-md); line-height : var(--vspace-0_875); } - .folio-item__meta { - font-size : calc(var(--text-size) * 0.7368); - } - - .testimonial-slider { - padding-right : var(--vspace-2_5); - padding-left : var(--vspace-2_5); + .folio-list__proj-link { + right : var(--vspace-0_5); } } -@media screen and (max-width: 800px) { - .folio-list .column:nth-child(2n+1) { - padding-right : var(--gutter); +@media screen and (max-width: 500px) { + .folio-list { + --item-min-height : var(--vspace-3_5); } - .folio-list .column:nth-child(2n+2) { - padding-left : var(--gutter); + .folio-list__item { + margin-bottom : var(--vspace-0_75); } - .testimonials { - margin-top : var(--vspace-3); - max-width : 600px; + .folio-list__item-link { + padding-left : calc(4.25 * var(--space)); } +} - .testimonial-slider { - padding-right : 0; - padding-left : 0; +@media screen and (max-width: 400px) { + .folio-list .column { + flex : none; + width : 50%; } - .testimonial-slider__next, - .testimonial-slider__prev { - display : none; + .folio-list__item { + margin-bottom : 0; } -} -@media screen and (max-width: 600px) { - .s-works { - padding-top : var(--vspace-5); - padding-bottom : var(--vspace-4_5); + .folio-list__item-link { + padding-left : 0; } - .folio-item__title { - font-size : var(--text-lg); - line-height : var(--vspace-1); + .folio-list__item-pic { + position : static; } - .folio-item__meta { - font-size : var(--text-sm); + .folio-list__item-pic img { + max-width : 100%; + width : 100%; + height : auto; } -} -@media screen and (max-width: 400px) { - .folio-list .column:nth-child(2n+1) { - padding-right : 0; + .folio-list__item-text, + .folio-list__proj-link { + display : none; } - .folio-list .column:nth-child(2n+2) { - padding-left : 0; + .modal-popup__desc { + padding : 0 var(--vspace-1) var(--vspace-0_25); } } /* =================================================================== - * # FOOTER + * # CONTACT * * * ------------------------------------------------------------------- */ -.s-footer { - padding-top : calc(6 * var(--space)); - padding-bottom : var(--vspace-2_5); - font-weight : 300; - position : relative; + +.contact-top { + padding-top : var(--vspace-5); + border-top : 1px solid var(--color-border); } -.s-footer .text-subtitle { - margin-bottom : 0; +.contact-top .h1 { + margin-top : 0; +} + +.contact-bottom { + padding-bottom : var(--vspace-3); + margin-top : var(--vspace-3); + border-bottom : 1px solid var(--color-border); +} + +.contact-bottom .text-pretitle { + margin-bottom : var(--vspace-0_125); +} + +.contact-links, +.contact-social { + font-size : var(--text-md); + font-weight : 300; + line-height : var(--vspace-1_25); + color : var(--color-text-light); +} + +.contact-links a, +.contact-social a { + color : var(--color-text-light); +} + +.contact-links a:focus, +.contact-links a:hover, +.contact-social a:focus, +.contact-social a:hover { + color : var(--color-1); } -.s-footer .link-list { +.contact-social { list-style : none; margin-left : 0; } -.s-footer .link-list li { +.contact-social li { + display : inline-block; padding-left : 0; } -.s-footer .link-list a { - color : var(--color-text); - border : none; +.contact-social li::after { + content : ", "; } -.s-footer .link-list a:focus, -.s-footer .link-list a:hover { - color : var(--color-1); +.contact-social li:last-child::after { + display : none; } -.s-footer__contact-header { - margin-bottom : var(--vspace-2); +.contact-btn { + margin-left : auto; + margin-right : 5vw; } -.s-footer__contact-content .left-block { - padding-top : var(--vspace-0_25); +/* ------------------------------------------------------------------- + * responsive: + * contact + * ------------------------------------------------------------------- */ +@media screen and (max-width: 1200px) { + .contact-btn { + margin-top : var(--vspace-0_5); + margin-left : 0; + margin-right : 0; + } } -.s-footer__contact-content .right-block { - margin-left : 15%; +@media screen and (max-width: 800px) { + .contact-top { + padding-top : var(--vspace-4); + } } -.s-footer__bottom { - padding-top : var(--vspace-1_25); - font-size : var(--text-sm); - line-height : var(--vspace-0_75); - color : var(--color-gray-14); + + +/* =================================================================== + * # FOOTER + * + * + * ------------------------------------------------------------------- */ + +.s-footer { + margin-top : auto; + padding-top : var(--vspace-1); + padding-bottom : var(--vspace-3); + color : var(--color-text-light); } -.s-footer__bottom a { - color : var(--color-1); +.s-footer>.row { + position : relative; +} + +.s-footer a { + color : var(--color-text); +} + +.s-footer a:focus, +.s-footer a:hover { + color : white; } /* ------------------------------------------------------------------- * ## copyright * ------------------------------------------------------------------- */ +.ss-copyright { + margin-top : calc(var(--vspace-0_25) * -1); + margin-right : 5.2rem; + line-height : var(--vspace-0_875); +} + .ss-copyright span { - display : inline-block; + font-size : var(--text-sm); + display : inline-block; } .ss-copyright span::after { content : "|"; display : inline-block; padding : 0 .8rem 0 1rem; - color : var(--color-gray-10); + color : rgba(255, 255, 255, 0.1); } .ss-copyright span:last-child::after { @@ -4058,14 +4174,10 @@ img.u-pull-left { * ## go top * ------------------------------------------------------------------- */ .ss-go-top { - z-index : 2; - opacity : 0; - visibility : hidden; - transform : translate(0, 200%); - transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); - position : fixed; - bottom : 6rem; - right : 4rem; + z-index : 2; + position : absolute; + top : calc(var(--vspace-1) * -1); + right : var(--gutter); } .ss-go-top a { @@ -4073,56 +4185,40 @@ img.u-pull-left { align-items : center; justify-content : center; text-decoration : none; - border : none; - height : 6rem; - width : 6rem; - border-radius : 50%; - background-color : var(--color-text-dark); - transition : all .3s; + border : 0 none; + height : calc(1.625 * var(--space)); + width : var(--vspace-1_5); + background-color : var(--color-body); position : relative; + border : 1px solid var(--color-text); +} + +.ss-go-top a:focus, +.ss-go-top a:hover { + background-color : white; + border-color : white; +} + +.ss-go-top a:focus svg path, +.ss-go-top a:hover svg path { + fill : black; } .ss-go-top svg { - height : 2.4rem; - width : 2.4rem; + height : var(--vspace-0_5); + width : var(--vspace-0_5); + transition : all 0.3s ease-in-out; } .ss-go-top svg path { fill : white; } -.ss-go-top.link-is-visible { - opacity : 1; - visibility : visible; - transform : translate(0, 0); -} - /* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */ -@media screen and (max-width: 1200px) { - .s-footer__contact-content .right-block { - margin-left : auto; - } -} - -@media screen and (max-width: 1000px) { - .ss-go-top { - bottom : 4.8rem; - } - - .ss-go-top a { - height : 5.2rem; - width : 5.2rem; - } -} - @media screen and (max-width: 600px) { - .s-footer { - padding-top : var(--vspace-5); - } - .ss-copyright span { display : block; } @@ -4132,28 +4228,13 @@ img.u-pull-left { } .ss-go-top { - right : 3.2rem; - } - - .ss-go-top a { - height : 4.8rem; - width : 4.8rem; + top : calc(var(--vspace-0_25) * -1); + right : calc(6vw + var(--gutter)); } } @media screen and (max-width: 400px) { .ss-go-top { - bottom : 4rem; - right : 2rem; - } - - .ss-go-top a { - height : 4rem; - width : 4rem; - } - - .ss-go-top svg { - height : 1.6rem; - width : 1.6rem; + right : 6vw; } } \ No newline at end of file diff --git a/css/vendor.css b/css/vendor.css index 7029d0b..fdde2dc 100644 --- a/css/vendor.css +++ b/css/vendor.css @@ -1,31 +1,32 @@ /* =================================================================== - * Augustine Third-party Stylesheets + * Theme Third-party Stylesheets * Template Ver. 1.0.0 - * 03-16-2022 + * 02-16-2021 * ------------------------------------------------------------------- * * TOC: - * # PrismJS - * # Swiper - * # PhotoSwipe Main CSS - * # PhotoSwipe Skin - * + * + * # PrismJS 1.20.0 + * # Swiper 6.4.5 + * # Basiclightbox + * * ------------------------------------------------------------------- */ + /* =================================================================== * # PrismJS 1.20.0 - * https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+markup-templating+php + * https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+markup-templating+php * - * okaidia theme for JavaScript, CSS and HTML - * Loosely based on Monokai textmate theme by http://www.monokai.nl/ - * @author ocodia + * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML + * Based on https://github.com/chriskempson/tomorrow-theme + * @author Rose Pritchard * ------------------------------------------------------------------- */ + code[class*="language-"], pre[class*="language-"] { - color : #f8f8f2; + color : #ccc; background : none; - text-shadow : 0 1px rgba(0, 0, 0, 0.3); font-family : var(--font-mono); font-size : calc(var(--text-size) * 0.9444); text-align : left; @@ -44,83 +45,81 @@ pre[class*="language-"] { } /* Code blocks */ + pre[class*="language-"] { padding : var(--vspace-0_5) 0 var(--vspace-1); - margin : var(--vspace-1) 0; + margin : 0; overflow : auto; } :not(pre)>code[class*="language-"], pre[class*="language-"] { - background : #272822; + background : #2d2d2d; } /* Inline code */ + :not(pre)>code[class*="language-"] { padding : .1em; white-space : normal; } .token.comment, +.token.block-comment, .token.prolog, .token.doctype, .token.cdata { - color : slategray; + color : #999; } .token.punctuation { - color : #f8f8f2; + color : #ccc; } -.token.namespace { - opacity : .7; -} - -.token.property, .token.tag, -.token.constant, -.token.symbol, +.token.attr-name, +.token.namespace, .token.deleted { - color : #f92672; + color : #e2777a; } -.token.boolean, -.token.number { - color : #ae81ff; +.token.function-name { + color : #6196cc; } -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color : #a6e22e; +.token.boolean, +.token.number, +.token.function { + color : #f08d49; } -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color : #f8f8f2; +.token.property, +.token.class-name, +.token.constant, +.token.symbol { + color : #f8c555; } +.token.selector, +.token.important, .token.atrule, -.token.attr-value, -.token.function, -.token.class-name { - color : #e6db74; +.token.keyword, +.token.builtin { + color : #cc99cd; } -.token.keyword { - color : #66d9ef; +.token.string, +.token.char, +.token.attr-value, +.token.regex, +.token.variable { + color : #7ec699; } -.token.regex, -.token.important { - color : #fd971f; +.token.operator, +.token.entity, +.token.url { + color : #67cdcc; } .token.important, @@ -136,22 +135,27 @@ pre[class*="language-"] { cursor : help; } +.token.inserted { + color : green; +} + /* =================================================================== - * # Swiper 8.0.6 - * Most modern mobile touch slider and framework with hardware accelerated transitions - * https://swiperjs.com + * # Swiper 6.4.5 + * Most modern mobile touch slider and framework with hardware accelerated transitions + * https://swiperjs.com * - * Copyright 2014-2022 Vladimir Kharlampidi + * Copyright 2014-2020 Vladimir Kharlampidi * - * Released under the MIT License + * Released under the MIT License * - * Released on: February 14, 2022 + * Released on: December 18, 2020 * ------------------------------------------------------------------- */ + @font-face { - font-family : 'swiper-icons'; - src : url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); + font-family : "swiper-icons"; + src : url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight : 400; font-style : normal; } @@ -160,7 +164,7 @@ pre[class*="language-"] { --swiper-theme-color : #007aff; } -.swiper { +.swiper-container { margin-left : auto; margin-right : auto; position : relative; @@ -171,7 +175,7 @@ pre[class*="language-"] { z-index : 1; } -.swiper-vertical>.swiper-wrapper { +.swiper-container-vertical>.swiper-wrapper { flex-direction : column; } @@ -185,17 +189,23 @@ pre[class*="language-"] { box-sizing : content-box; } -.swiper-android .swiper-slide, +.swiper-container-android .swiper-slide, .swiper-wrapper { transform : translate3d(0px, 0, 0); } -.swiper-pointer-events { - touch-action : pan-y; +.swiper-container-multirow>.swiper-wrapper { + flex-wrap : wrap; +} + +.swiper-container-multirow-column>.swiper-wrapper { + flex-wrap : wrap; + flex-direction : column; } -.swiper-pointer-events.swiper-vertical { - touch-action : pan-x; +.swiper-container-free-mode>.swiper-wrapper { + transition-timing-function : ease-out; + margin : 0 auto; } .swiper-slide { @@ -211,44 +221,37 @@ pre[class*="language-"] { } /* Auto Height */ -.swiper-autoheight, -.swiper-autoheight .swiper-slide { + +.swiper-container-autoheight, +.swiper-container-autoheight .swiper-slide { height : auto; } -.swiper-autoheight .swiper-wrapper { +.swiper-container-autoheight .swiper-wrapper { align-items : flex-start; transition-property : transform, height; } -.swiper-backface-hidden .swiper-slide { - transform : translateZ(0); - -webkit-backface-visibility : hidden; - backface-visibility : hidden; -} - /* 3D Effects */ -.swiper-3d, -.swiper-3d.swiper-css-mode .swiper-wrapper { + +.swiper-container-3d { perspective : 1200px; } -.swiper-3d .swiper-wrapper, -.swiper-3d .swiper-slide, -.swiper-3d .swiper-slide-shadow, -.swiper-3d .swiper-slide-shadow-left, -.swiper-3d .swiper-slide-shadow-right, -.swiper-3d .swiper-slide-shadow-top, -.swiper-3d .swiper-slide-shadow-bottom, -.swiper-3d .swiper-cube-shadow { +.swiper-container-3d .swiper-wrapper, +.swiper-container-3d .swiper-slide, +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom, +.swiper-container-3d .swiper-cube-shadow { transform-style : preserve-3d; } -.swiper-3d .swiper-slide-shadow, -.swiper-3d .swiper-slide-shadow-left, -.swiper-3d .swiper-slide-shadow-right, -.swiper-3d .swiper-slide-shadow-top, -.swiper-3d .swiper-slide-shadow-bottom { +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom { position : absolute; left : 0; top : 0; @@ -258,28 +261,25 @@ pre[class*="language-"] { z-index : 10; } -.swiper-3d .swiper-slide-shadow { - background : rgba(0, 0, 0, 0.15); -} - -.swiper-3d .swiper-slide-shadow-left { +.swiper-container-3d .swiper-slide-shadow-left { background-image : linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } -.swiper-3d .swiper-slide-shadow-right { +.swiper-container-3d .swiper-slide-shadow-right { background-image : linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } -.swiper-3d .swiper-slide-shadow-top { +.swiper-container-3d .swiper-slide-shadow-top { background-image : linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } -.swiper-3d .swiper-slide-shadow-bottom { +.swiper-container-3d .swiper-slide-shadow-bottom { background-image : linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ -.swiper-css-mode>.swiper-wrapper { + +.swiper-container-css-mode>.swiper-wrapper { overflow : auto; scrollbar-width : none; /* For Firefox */ @@ -287,80 +287,27 @@ pre[class*="language-"] { /* For Internet Explorer and Edge */ } -.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { +.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar { display : none; } -.swiper-css-mode>.swiper-wrapper>.swiper-slide { +.swiper-container-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align : start start; } -.swiper-horizontal.swiper-css-mode>.swiper-wrapper { +.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper { scroll-snap-type : x mandatory; } -.swiper-vertical.swiper-css-mode>.swiper-wrapper { +.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper { scroll-snap-type : y mandatory; } -.swiper-centered>.swiper-wrapper::before { - content : ''; - flex-shrink : 0; - order : 9999; -} - -.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { - margin-inline-start : var(--swiper-centered-offset-before); -} - -.swiper-centered.swiper-horizontal>.swiper-wrapper::before { - height : 100%; - min-height : 1px; - width : var(--swiper-centered-offset-after); -} - -.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { - margin-block-start : var(--swiper-centered-offset-before); -} - -.swiper-centered.swiper-vertical>.swiper-wrapper::before { - width : 100%; - min-width : 1px; - height : var(--swiper-centered-offset-after); -} - -.swiper-centered>.swiper-wrapper>.swiper-slide { - scroll-snap-align : center center; -} - -.swiper-virtual .swiper-slide { - -webkit-backface-visibility : hidden; - transform : translateZ(0); -} - -.swiper-virtual.swiper-css-mode .swiper-wrapper::after { - content : ''; - position : absolute; - left : 0; - top : 0; - pointer-events : none; -} - -.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { - height : 1px; - width : var(--swiper-virtual-size); -} - -.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { - width : 1px; - height : var(--swiper-virtual-size); -} - :root { - --swiper-navigation-size : 44px; + --swiper-navigation-size : 44px; /* - --swiper-navigation-color : var(--swiper-theme-color); - */ + --swiper-navigation-color : var(--swiper-theme-color); + */ } .swiper-button-prev, @@ -369,7 +316,7 @@ pre[class*="language-"] { top : 50%; width : calc(var(--swiper-navigation-size) / 44 * 27); height : var(--swiper-navigation-size); - margin-top : calc(0px - (var(--swiper-navigation-size) / 2)); + margin-top : calc(-1 * var(--swiper-navigation-size) / 2); z-index : 10; cursor : pointer; display : flex; @@ -397,25 +344,35 @@ pre[class*="language-"] { } .swiper-button-prev, -.swiper-rtl .swiper-button-next { +.swiper-container-rtl .swiper-button-next { left : 10px; right : auto; } .swiper-button-prev:after, -.swiper-rtl .swiper-button-next:after { - content : 'prev'; +.swiper-container-rtl .swiper-button-next:after { + content : "prev"; } .swiper-button-next, -.swiper-rtl .swiper-button-prev { +.swiper-container-rtl .swiper-button-prev { right : 10px; left : auto; } .swiper-button-next:after, -.swiper-rtl .swiper-button-prev:after { - content : 'next'; +.swiper-container-rtl .swiper-button-prev:after { + content : "next"; +} + +.swiper-button-prev.swiper-button-white, +.swiper-button-next.swiper-button-white { + --swiper-navigation-color : #ffffff; +} + +.swiper-button-prev.swiper-button-black, +.swiper-button-next.swiper-button-black { + --swiper-navigation-color : #000000; } .swiper-button-lock { @@ -424,16 +381,8 @@ pre[class*="language-"] { :root { /* - --swiper-pagination-color: var(--swiper-theme-color); - --swiper-pagination-bullet-size: 8px; - --swiper-pagination-bullet-width: 8px; - --swiper-pagination-bullet-height: 8px; - --swiper-pagination-bullet-inactive-color: #000; - --swiper-pagination-bullet-inactive-opacity: 0.2; - --swiper-pagination-bullet-opacity: 1; - --swiper-pagination-bullet-horizontal-gap: 4px; - --swiper-pagination-bullet-vertical-gap: 6px; - */ + --swiper-pagination-color: var(--swiper-theme-color); + */ } .swiper-pagination { @@ -449,16 +398,17 @@ pre[class*="language-"] { } /* Common Styles */ + .swiper-pagination-fraction, .swiper-pagination-custom, -.swiper-horizontal>.swiper-pagination-bullets, -.swiper-pagination-bullets.swiper-pagination-horizontal { +.swiper-container-horizontal>.swiper-pagination-bullets { bottom : 10px; left : 0; width : 100%; } /* Bullets */ + .swiper-pagination-bullets-dynamic { overflow : hidden; font-size : 0; @@ -494,12 +444,12 @@ pre[class*="language-"] { } .swiper-pagination-bullet { - width : var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); - height : var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); + width : 8px; + height : 8px; display : inline-block; - border-radius : 50%; - background : var(--swiper-pagination-bullet-inactive-color, #000); - opacity : var(--swiper-pagination-bullet-inactive-opacity, 0.2); + border-radius : 100%; + background : #000; + opacity : 0.2; } button.swiper-pagination-bullet { @@ -508,6 +458,7 @@ button.swiper-pagination-bullet { padding : 0; box-shadow : none; -webkit-appearance : none; + -moz-appearance : none; appearance : none; } @@ -515,63 +466,53 @@ button.swiper-pagination-bullet { cursor : pointer; } -.swiper-pagination-bullet:only-child { - display : none !important; -} - .swiper-pagination-bullet-active { - opacity : var(--swiper-pagination-bullet-opacity, 1); + opacity : 1; background : var(--swiper-pagination-color, var(--swiper-theme-color)); } -.swiper-vertical>.swiper-pagination-bullets, -.swiper-pagination-vertical.swiper-pagination-bullets { +.swiper-container-vertical>.swiper-pagination-bullets { right : 10px; top : 50%; transform : translate3d(0px, -50%, 0); } -.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet, -.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { - margin : var(--swiper-pagination-bullet-vertical-gap, 6px) 0; +.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { + margin : 6px 0; display : block; } -.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, -.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { +.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top : 50%; transform : translateY(-50%); width : 8px; } -.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, -.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { +.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display : inline-block; transition : 200ms transform, 200ms top; } -.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, -.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { - margin : 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); +.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { + margin : 0 4px; } -.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, -.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { +.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left : 50%; transform : translateX(-50%); white-space : nowrap; } -.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, -.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { +.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition : 200ms transform, 200ms left; } -.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { +.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition : 200ms transform, 200ms right; } /* Progress */ + .swiper-pagination-progressbar { background : rgba(0, 0, 0, 0.25); position : absolute; @@ -588,35 +529,40 @@ button.swiper-pagination-bullet { transform-origin : left top; } -.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { +.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin : right top; } -.swiper-horizontal>.swiper-pagination-progressbar, -.swiper-pagination-progressbar.swiper-pagination-horizontal, -.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, -.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { +.swiper-container-horizontal>.swiper-pagination-progressbar, +.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width : 100%; height : 4px; left : 0; top : 0; } -.swiper-vertical>.swiper-pagination-progressbar, -.swiper-pagination-progressbar.swiper-pagination-vertical, -.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, -.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { +.swiper-container-vertical>.swiper-pagination-progressbar, +.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width : 4px; height : 100%; left : 0; top : 0; } +.swiper-pagination-white { + --swiper-pagination-color : #ffffff; +} + +.swiper-pagination-black { + --swiper-pagination-color : #000000; +} + .swiper-pagination-lock { display : none; } /* Scrollbar */ + .swiper-scrollbar { border-radius : 10px; position : relative; @@ -624,7 +570,7 @@ button.swiper-pagination-bullet { background : rgba(0, 0, 0, 0.1); } -.swiper-horizontal>.swiper-scrollbar { +.swiper-container-horizontal>.swiper-scrollbar { position : absolute; left : 1%; bottom : 3px; @@ -633,7 +579,7 @@ button.swiper-pagination-bullet { width : 98%; } -.swiper-vertical>.swiper-scrollbar { +.swiper-container-vertical>.swiper-scrollbar { position : absolute; right : 3px; top : 1%; @@ -682,10 +628,11 @@ button.swiper-pagination-bullet { } /* Preloader */ + :root { /* - --swiper-preloader-color: var(--swiper-theme-color); - */ + --swiper-preloader-color: var(--swiper-theme-color); + */ } .swiper-lazy-preloader { @@ -698,16 +645,13 @@ button.swiper-pagination-bullet { margin-top : -21px; z-index : 10; transform-origin : 50%; + animation : swiper-preloader-spin 1s infinite linear; box-sizing : border-box; border : 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius : 50%; border-top-color : transparent; } -.swiper-slide-visible .swiper-lazy-preloader { - animation : swiper-preloader-spin 1s infinite linear; -} - .swiper-lazy-preloader-white { --swiper-preloader-color : #fff; } @@ -723,7 +667,8 @@ button.swiper-pagination-bullet { } /* a11y */ -.swiper .swiper-notification { + +.swiper-container .swiper-notification { position : absolute; left : 0; top : 0; @@ -732,43 +677,29 @@ button.swiper-pagination-bullet { z-index : -1000; } -.swiper-free-mode>.swiper-wrapper { - transition-timing-function : ease-out; - margin : 0 auto; -} - -.swiper-grid>.swiper-wrapper { - flex-wrap : wrap; -} - -.swiper-grid-column>.swiper-wrapper { - flex-wrap : wrap; - flex-direction : column; -} - -.swiper-fade.swiper-free-mode .swiper-slide { +.swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function : ease-out; } -.swiper-fade .swiper-slide { +.swiper-container-fade .swiper-slide { pointer-events : none; transition-property : opacity; } -.swiper-fade .swiper-slide .swiper-slide { +.swiper-container-fade .swiper-slide .swiper-slide { pointer-events : none; } -.swiper-fade .swiper-slide-active, -.swiper-fade .swiper-slide-active .swiper-slide-active { +.swiper-container-fade .swiper-slide-active, +.swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events : auto; } -.swiper-cube { +.swiper-container-cube { overflow : visible; } -.swiper-cube .swiper-slide { +.swiper-container-cube .swiper-slide { pointer-events : none; -webkit-backface-visibility : hidden; backface-visibility : hidden; @@ -779,914 +710,163 @@ button.swiper-pagination-bullet { height : 100%; } -.swiper-cube .swiper-slide .swiper-slide { +.swiper-container-cube .swiper-slide .swiper-slide { pointer-events : none; } -.swiper-cube.swiper-rtl .swiper-slide { +.swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin : 100% 0; } -.swiper-cube .swiper-slide-active, -.swiper-cube .swiper-slide-active .swiper-slide-active { +.swiper-container-cube .swiper-slide-active, +.swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events : auto; } -.swiper-cube .swiper-slide-active, -.swiper-cube .swiper-slide-next, -.swiper-cube .swiper-slide-prev, -.swiper-cube .swiper-slide-next+.swiper-slide { +.swiper-container-cube .swiper-slide-active, +.swiper-container-cube .swiper-slide-next, +.swiper-container-cube .swiper-slide-prev, +.swiper-container-cube .swiper-slide-next+.swiper-slide { pointer-events : auto; visibility : visible; } -.swiper-cube .swiper-slide-shadow-top, -.swiper-cube .swiper-slide-shadow-bottom, -.swiper-cube .swiper-slide-shadow-left, -.swiper-cube .swiper-slide-shadow-right { +.swiper-container-cube .swiper-slide-shadow-top, +.swiper-container-cube .swiper-slide-shadow-bottom, +.swiper-container-cube .swiper-slide-shadow-left, +.swiper-container-cube .swiper-slide-shadow-right { z-index : 0; -webkit-backface-visibility : hidden; backface-visibility : hidden; } -.swiper-cube .swiper-cube-shadow { - position : absolute; - left : 0; - bottom : 0px; - width : 100%; - height : 100%; - opacity : 0.6; - z-index : 0; -} - -.swiper-cube .swiper-cube-shadow:before { - content : ''; - background : #000; - position : absolute; - left : 0; - top : 0; - bottom : 0; - right : 0; - filter : blur(50px); +.swiper-container-cube .swiper-cube-shadow { + position : absolute; + left : 0; + bottom : 0px; + width : 100%; + height : 100%; + background : #000; + opacity : 0.6; + -webkit-filter : blur(50px); + filter : blur(50px); + z-index : 0; } -.swiper-flip { +.swiper-container-flip { overflow : visible; } -.swiper-flip .swiper-slide { +.swiper-container-flip .swiper-slide { pointer-events : none; -webkit-backface-visibility : hidden; backface-visibility : hidden; z-index : 1; } -.swiper-flip .swiper-slide .swiper-slide { +.swiper-container-flip .swiper-slide .swiper-slide { pointer-events : none; } -.swiper-flip .swiper-slide-active, -.swiper-flip .swiper-slide-active .swiper-slide-active { +.swiper-container-flip .swiper-slide-active, +.swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events : auto; } -.swiper-flip .swiper-slide-shadow-top, -.swiper-flip .swiper-slide-shadow-bottom, -.swiper-flip .swiper-slide-shadow-left, -.swiper-flip .swiper-slide-shadow-right { +.swiper-container-flip .swiper-slide-shadow-top, +.swiper-container-flip .swiper-slide-shadow-bottom, +.swiper-container-flip .swiper-slide-shadow-left, +.swiper-container-flip .swiper-slide-shadow-right { z-index : 0; -webkit-backface-visibility : hidden; backface-visibility : hidden; } -.swiper-creative .swiper-slide { - -webkit-backface-visibility : hidden; - backface-visibility : hidden; - overflow : hidden; - transition-property : transform, opacity, height; -} - -.swiper-cards { - overflow : visible; -} - -.swiper-cards .swiper-slide { - transform-origin : center bottom; - -webkit-backface-visibility : hidden; - backface-visibility : hidden; - overflow : hidden; -} - - - -/* =================================================================== - * # PhotoSwipe Main CSS by Dmitry Semenov - * photoswipe.com | MIT license - * - * ------------------------------------------------------------------- */ -/* - Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) -*/ - -/* pswp = photoswipe */ -.pswp { - display : none; - position : absolute; - width : 100%; - height : 100%; - left : 0; - top : 0; - overflow : hidden; - -ms-touch-action : none; - touch-action : none; - z-index : 1500; - -webkit-text-size-adjust : 100%; - /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ - -webkit-backface-visibility : hidden; - outline : none; -} - -.pswp * { - -webkit-box-sizing : border-box; - box-sizing : border-box; -} - -.pswp img { - max-width : none; -} - -/* style is added when JS option showHideOpacity is set to true */ -.pswp--animate_opacity { - /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ - opacity : 0.001; - will-change : opacity; - /* for open/close transition */ - -webkit-transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -} - -.pswp--open { - display : block; -} - -.pswp--zoom-allowed .pswp__img { - /* autoprefixer: off */ - cursor : -webkit-zoom-in; - cursor : -moz-zoom-in; - cursor : zoom-in; -} - -.pswp--zoomed-in .pswp__img { - /* autoprefixer: off */ - cursor : -webkit-grab; - cursor : -moz-grab; - cursor : grab; -} - -.pswp--dragging .pswp__img { - /* autoprefixer: off */ - cursor : -webkit-grabbing; - cursor : -moz-grabbing; - cursor : grabbing; -} - -/* - Background is added as a separate element. - As animating opacity is much faster than animating rgba() background-color. -*/ -.pswp__bg { - position : absolute; - left : 0; - top : 0; - width : 100%; - height : 100%; - background : #000; - opacity : 0; - -webkit-transform : translateZ(0); - transform : translateZ(0); - -webkit-backface-visibility : hidden; - will-change : opacity; -} - -.pswp__scroll-wrap { - position : absolute; - left : 0; - top : 0; - width : 100%; - height : 100%; - overflow : hidden; -} - -.pswp__container, -.pswp__zoom-wrap { - -ms-touch-action : none; - touch-action : none; - position : absolute; - left : 0; - right : 0; - top : 0; - bottom : 0; -} - -/* Prevent selection and tap highlights */ -.pswp__container, -.pswp__img { - -webkit-user-select : none; - -moz-user-select : none; - -ms-user-select : none; - user-select : none; - -webkit-tap-highlight-color : transparent; - -webkit-touch-callout : none; -} - -.pswp__zoom-wrap { - position : absolute; - width : 100%; - -webkit-transform-origin : left top; - -ms-transform-origin : left top; - transform-origin : left top; - /* for open/close transition */ - -webkit-transition : -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition : transform 333ms cubic-bezier(0.4, 0, 0.22, 1); -} - -.pswp__bg { - will-change : opacity; - /* for open/close transition */ - -webkit-transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); - transition : opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); -} - -.pswp--animated-in .pswp__bg, -.pswp--animated-in .pswp__zoom-wrap { - -webkit-transition : none; - transition : none; -} - -.pswp__container, -.pswp__zoom-wrap { - -webkit-backface-visibility : hidden; -} - -.pswp__item { - position : absolute; - left : 0; - right : 0; - top : 0; - bottom : 0; - overflow : hidden; -} - -.pswp__img { - position : absolute; - width : auto; - height : auto; - top : 0; - left : 0; -} - -/* - stretched thumbnail or div placeholder element (see below) - style is added to avoid flickering in webkit/blink when layers overlap -*/ -.pswp__img--placeholder { - -webkit-backface-visibility : hidden; -} - -/* - div element that matches size of large image - large image loads on top of it -*/ -.pswp__img--placeholder--blank { - background : #222; -} - -.pswp--ie .pswp__img { - width : 100% !important; - height : auto !important; - left : 0; - top : 0; -} - -/* - Error message appears when image is not loaded - (JS option errorMsg controls markup) -*/ -.pswp__error-msg { - position : absolute; - left : 0; - top : 50%; - width : 100%; - text-align : center; - font-size : 14px; - line-height : 16px; - margin-top : -8px; - color : #CCC; -} - -.pswp__error-msg a { - color : #CCC; - text-decoration : underline; -} /* =================================================================== - * # PhotoSwipe Skin + * # Basiclightbox * * * ------------------------------------------------------------------- */ -/* - Contents: - - 1. Buttons - 2. Share modal and links - 3. Index indicator ("1 of X" counter) - 4. Caption - 5. Loading indicator - 6. Additional styles (root element, top bar, idle state, hidden state, etc.) -*/ -/* ------------------------------------------------------------------- - * ## 1. buttons - * ------------------------------------------------------------------- */ -/* -
-
-
-
-
-
-
- -
-
-
- -
-
-
- - - + - + - - Augustine - Styles + Luther - Styles + + - + + @@ -21,7 +21,7 @@