diff options
Add Comparison Sliders
4 files changed, 119 insertions, 4 deletions
| -rw-r--r-- | docs/css/docs.css | 4 | ||||
| -rw-r--r-- | docs/css/docs.min.css | 2 | ||||
| -rw-r--r-- | docs/css/spectre-exp.css | 115 | ||||
| -rw-r--r-- | docs/css/spectre-exp.min.css | 2 |
diff --git a/docs/css/docs.css b/docs/css/docs.css index b0c332b..73f53a7 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -187,6 +187,10 @@ .docs-content .example-tile-icon .icon { margin: auto; } +.docs-content .comparison-slider .filter-grayscale { + -webkit-filter: grayscale(75%); + filter: grayscale(75%); +} @media screen and (min-width: 601px) { .section-header .navbar-section { padding: 0 .5rem; diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css index 3f1fa9d..949c33b 100644 --- a/docs/css/docs.min.css +++ b/docs/css/docs.min.css @@ -1 +1 @@ -/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.12"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#5b657a}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:1rem;margin-top:2rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}.docs-content .example-tile-icon .icon{margin:auto}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file +/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.12"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#5b657a}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:1rem;margin-top:2rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}.docs-content .example-tile-icon .icon{margin:auto}.docs-content .comparison-slider .filter-grayscale{-webkit-filter:grayscale(75%);filter:grayscale(75%)}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index 34fff52..1a9af74 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -242,8 +242,8 @@ .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) { - -webkit-animation: carousel-slidein .75s ease-in 1; - animation: carousel-slidein .75s ease-in 1; + -webkit-animation: carousel-slidein .75s ease-in-out 1; + animation: carousel-slidein .75s ease-in-out 1; opacity: 1; z-index: 100; } @@ -333,6 +333,117 @@ transform: translateX(-50%); } } +.comparison-slider { + height: 50vh; + overflow: hidden; + position: relative; + width: 100%; +} +.comparison-slider .comparison-before, +.comparison-slider .comparison-after { + height: 100%; + left: 0; + margin: 0; + overflow: hidden; + position: absolute; + top: 0; +} +.comparison-slider .comparison-before img, +.comparison-slider .comparison-after img { + height: 100%; + object-fit: none; + object-position: left top; + position: absolute; + width: 100%; + z-index: -1; +} +.comparison-slider .comparison-before { + width: 100%; +} +.comparison-slider .comparison-after { + max-width: 100%; + min-width: 0; +} +.comparison-slider .comparison-after::before { + background: rgba(69, 77, 93, .35); + border-radius: .2rem; + color: #fff; + content: ""; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 1rem; +} +.comparison-slider .comparison-after::after { + background: currentColor; + border-radius: 50%; + box-shadow: 0 -.6rem, 0 .6rem; + color: #fff; + content: ""; + height: .4rem; + position: absolute; + right: .5rem; + top: 50%; + -webkit-transform: translate(50%, -50%); + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); + width: .4rem; + z-index: -1; +} +.comparison-slider .comparison-resizer { + -webkit-animation: first-run 1.5s 1 ease-in-out; + animation: first-run 1.5s 1 ease-in-out; + cursor: ew-resize; + height: 1.5rem; + left: 0; + margin: 0; + max-width: 100%; + min-width: 1rem; + opacity: 0; + outline: 0; + position: relative; + resize: horizontal; + top: 50%; + -webkit-transform: translateY(-50%) scaleY(30); + -ms-transform: translateY(-50%) scaleY(30); + transform: translateY(-50%) scaleY(30); + width: 0; +} +@-webkit-keyframes first-run { + 0% { + width: 0; + } + 25% { + width: 4rem; + } + 50% { + width: 1rem; + } + 75% { + width: 2rem; + } + 100% { + width: 0; + } +} +@keyframes first-run { + 0% { + width: 0; + } + 25% { + width: 4rem; + } + 50% { + width: 1rem; + } + 75% { + width: 2rem; + } + 100% { + width: 0; + } +} .meter { -webkit-appearance: none; -moz-appearance: none; diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css index 3387092..b31d809 100644 --- a/docs/css/spectre-exp.min.css +++ b/docs/css/spectre-exp.min.css @@ -1 +1 @@ -/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.1rem solid #f0f1f4;border-radius:.2rem;display:block;min-width:28rem;text-align:center}.calendar .calendar-nav{-webkit-align-items:center;align-items:center;background:#f8f9fa;border-top-left-radius:.2rem;border-top-right-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;font-size:1.6rem;padding:1rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-pack:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;padding:1rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-webkit-flex:0 0 14.28%;-ms-flex:0 0 14.28%;flex:0 0 14.28%;width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.1rem solid #f0f1f4;color:#acb3c2;font-size:1.2rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.4rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.1rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:2.8rem;line-height:2rem;padding:.3rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.8rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:.3rem;top:.3rem;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:2.8rem;left:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.1rem solid #f0f1f4;border-right:.1rem solid #f0f1f4;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:11rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end;height:2.8rem;margin-right:.5rem;margin-top:.5rem}.calendar.calendar-lg .calendar-range::before{top:1.9rem}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:1.9rem}.calendar.calendar-lg .calendar-range.range-end::before{right:1.9rem}.calendar.calendar-lg .calendar-events{-webkit-flex-grow:1;flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.5rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.2rem;color:#5764c6;display:block;font-size:1.2rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s ease-in-out 1;animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:2rem}.carousel .carousel-container .item-next{right:2rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){-webkit-animation:carousel-slidein .75s ease-in 1;animation:carousel-slidein .75s ease-in 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.2rem;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.2rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2rem 4.2rem rgba(69,77,93,.3);height:auto;-webkit-transform:perspective(100rem);transform:perspective(100rem);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{-webkit-align-items:center;align-items:center;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-pack:center;height:100%;-webkit-justify-content:center;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 3rem rgba(69,77,93,.95);top:0;-webkit-transform:translateZ(10rem);transform:translateZ(10rem);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.65rem,-.65rem,10rem);transform:translate3d(-.65rem,-.65rem,10rem)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.65rem,-.65rem,10rem);transform:translate3d(.65rem,-.65rem,10rem)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(3deg);transform:perspective(100rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.65rem,.65rem,10rem);transform:translate3d(-.65rem,.65rem,10rem)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.65rem,.65rem,10rem);transform:translate3d(.65rem,.65rem,10rem)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.5rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;-webkit-transform:scale(1);transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.2rem;height:.2rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.2rem;height:.2rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.2rem;height:.2rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file +/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.1rem solid #f0f1f4;border-radius:.2rem;display:block;min-width:28rem;text-align:center}.calendar .calendar-nav{-webkit-align-items:center;align-items:center;background:#f8f9fa;border-top-left-radius:.2rem;border-top-right-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;font-size:1.6rem;padding:1rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-pack:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;padding:1rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-webkit-flex:0 0 14.28%;-ms-flex:0 0 14.28%;flex:0 0 14.28%;width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.1rem solid #f0f1f4;color:#acb3c2;font-size:1.2rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.4rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.1rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:2.8rem;line-height:2rem;padding:.3rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.8rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:.3rem;top:.3rem;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:2.8rem;left:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.1rem solid #f0f1f4;border-right:.1rem solid #f0f1f4;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:11rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end;height:2.8rem;margin-right:.5rem;margin-top:.5rem}.calendar.calendar-lg .calendar-range::before{top:1.9rem}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:1.9rem}.calendar.calendar-lg .calendar-range.range-end::before{right:1.9rem}.calendar.calendar-lg .calendar-events{-webkit-flex-grow:1;flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.5rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.2rem;color:#5764c6;display:block;font-size:1.2rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s ease-in-out 1;animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:2rem}.carousel .carousel-container .item-next{right:2rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){-webkit-animation:carousel-slidein .75s ease-in-out 1;animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left top;position:absolute;width:100%;z-index:-1}.comparison-slider .comparison-before{width:100%}.comparison-slider .comparison-after{max-width:100%;min-width:0}.comparison-slider .comparison-after::before{background:rgba(69,77,93,.35);border-radius:.2rem;color:#fff;content:"";height:100%;position:absolute;right:0;top:0;width:1rem}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -.6rem,0 .6rem;color:#fff;content:"";height:.4rem;position:absolute;right:.5rem;top:50%;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);width:.4rem;z-index:-1}.comparison-slider .comparison-resizer{-webkit-animation:first-run 1.5s 1 ease-in-out;animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:1.5rem;left:0;margin:0;max-width:100%;min-width:1rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;-webkit-transform:translateY(-50%) scaleY(30);-ms-transform:translateY(-50%) scaleY(30);transform:translateY(-50%) scaleY(30);width:0}@-webkit-keyframes first-run{0%{width:0}25%{width:4rem}50%{width:1rem}75%{width:2rem}100%{width:0}}@keyframes first-run{0%{width:0}25%{width:4rem}50%{width:1rem}75%{width:2rem}100%{width:0}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.2rem;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.2rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2rem 4.2rem rgba(69,77,93,.3);height:auto;-webkit-transform:perspective(100rem);transform:perspective(100rem);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{-webkit-align-items:center;align-items:center;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-pack:center;height:100%;-webkit-justify-content:center;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 3rem rgba(69,77,93,.95);top:0;-webkit-transform:translateZ(10rem);transform:translateZ(10rem);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.65rem,-.65rem,10rem);transform:translate3d(-.65rem,-.65rem,10rem)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.65rem,-.65rem,10rem);transform:translate3d(.65rem,-.65rem,10rem)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(3deg);transform:perspective(100rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.65rem,.65rem,10rem);transform:translate3d(-.65rem,.65rem,10rem)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.65rem,.65rem,10rem);transform:translate3d(.65rem,.65rem,10rem)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.5rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;-webkit-transform:scale(1);transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.2rem;height:.2rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.2rem;height:.2rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.2rem;height:.2rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file |