phish2
Share |
/* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; } body { font-size: 1.6rem; font-family: "PT Sans", sans-serif; color: #ffffff; background-color: #101524; } a { color: #9e1c51; text-decoration: none; } /* -------------------------------- Main Components -------------------------------- */ .projects-container { height: 100vh; width: 100vw; position: relative; } .projects-container::before { /* never visible - this is used in jQuery to check the current MQ */ content: 'mobile'; display: none; } .projects-container li { position: absolute; top: 0; left: 0; width: 100%; height: 25%; overflow: hidden; cursor: pointer; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; /* on mobile - move items outside the viewport */ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .projects-container li::after { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 25vh; width: 100%; background-image: url("../img/img-1-small.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: opacity 0.5s, height 0.4s; -moz-transition: opacity 0.5s, height 0.4s; transition: opacity 0.5s, height 0.4s; } .projects-container li::before { /* never visible - this is used in jQuery to detect if the background image has been loaded */ content: 'img/img-1-small.jpg'; display: none; } .projects-container li:nth-of-type(2) { top: 25vh; } .projects-container li:nth-of-type(2)::after { background-image: url("../img/img-2-small.jpg"); } .projects-container li:nth-of-type(2)::before { content: 'img/img-2-small.jpg'; } .projects-container li:nth-of-type(3) { top: 50vh; } .projects-container li:nth-of-type(3)::after { background-image: url("../img/img-3-small.jpg"); } .projects-container li:nth-of-type(3)::before { content: 'img/img-3-small.jpg'; } .projects-container li:nth-of-type(4) { top: 75vh; } .projects-container li:nth-of-type(4)::after { background-image: url("../img/img-4-small.jpg"); } .projects-container li:nth-of-type(4)::before { content: 'img/img-4-small.jpg'; } .projects-container li.is-loaded { /* move items in the viewport when background images have been loaded */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .projects-container li.is-full-width { /* selected item */ top: 0; height: auto; z-index: 1; cursor: auto; -webkit-transition: z-index 0s 0s, top 0.4s 0s; -moz-transition: z-index 0s 0s, top 0.4s 0s; transition: z-index 0s 0s, top 0.4s 0s; } .projects-container li.is-full-width::after { height: 100vh; } @media only screen and (min-width: 1024px) { .projects-container::before { /* never visible - this is used in jQuery to check the current MQ */ content: 'desktop'; } .projects-container li { width: 25vw; height: 100%; opacity: 0; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: width 0s; -moz-transition: width 0s; transition: width 0s; } .projects-container li:first-of-type::before { content: 'img/img-1-large.jpg'; } .projects-container li:first-of-type::after { background-image: url("../img/img-1-large.jpg"); } .projects-container li:nth-of-type(2) { top: 0; left: 25vw; } .projects-container li:nth-of-type(2)::before { content: 'img/img-2-large.jpg'; } .projects-container li:nth-of-type(2)::after { background-image: url("../img/img-2-large.jpg"); } .projects-container li:nth-of-type(3) { top: 0; left: 50vw; } .projects-container li:nth-of-type(3)::before { content: 'img/img-3-large.jpg'; } .projects-container li:nth-of-type(3)::after { background-image: url("../img/img-3-large.jpg"); } .projects-container li:nth-of-type(4) { top: 0; left: 75vw; } .projects-container li:nth-of-type(4)::before { content: 'img/img-4-large.jpg'; } .projects-container li:nth-of-type(4)::after { background-image: url("../img/img-4-large.jpg"); } .projects-container li::after { height: 100vh; width: 100%; opacity: 0; } .projects-container li.is-loaded { /* show items when background images have been loaded */ opacity: 1; } .projects-container li.is-loaded::after { opacity: 1; } .projects-container li.is-full-width { /* selected item */ left: 0vw; width: 100vw; -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s; } } @media only screen and (min-width: 1170px) { .projects-container li::after { background-attachment: fixed; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform 0.8s, opacity 0.5s; -moz-transition: -moz-transform 0.8s, opacity 0.5s; transition: transform 0.8s, opacity 0.5s; } .projects-container li.is-loaded::after { opacity: 0; } .no-touch .projects-container li:hover::after, .projects-container li.is-full-width.is-loaded::after { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .cd-title { position: absolute; z-index: 1; left: 0; top: 12.5vh; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; } .is-full-width .cd-title { top: 50vh; -webkit-transition: opacity 0s, top 0.4s; -moz-transition: opacity 0s, top 0.4s; transition: opacity 0s, top 0.4s; } .cd-title > * { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cd-title h2 { font-size: 2.5rem; line-height: 1.5; font-weight: 700; } .cd-title p { font-size: 1.4rem; font-family: "Merriweather", serif; font-style: italic; line-height: 1.2; padding: .4em 2em; display: none; opacity: .6; } @media only screen and (min-width: 1024px) { .cd-title { top: 50vh; width: 25vw; opacity: 0; -webkit-transform: translateY(-50%) translateX(-20px); -moz-transform: translateY(-50%) translateX(-20px); -ms-transform: translateY(-50%) translateX(-20px); -o-transform: translateY(-50%) translateX(-20px); transform: translateY(-50%) translateX(-20px); } .is-loaded .cd-title { opacity: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s; transition: transform 0.6s, opacity 0.6s, left 0.4s; } .is-loaded.is-full-width .cd-title { left: 37.5vw; -webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s; -moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s; transition: transform 0.6s, opacity 0s, left 0.4s; } .cd-title p { display: block; } } @media only screen and (min-width: 1170px) { .cd-title h2 { font-size: 3.6rem; } } .cd-project-info { clear: both; visibility: hidden; opacity: 0; margin-top: 100vh; padding: 4em 0; cursor: auto; background-color: #ffffff; color: #3f538e; -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s; -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s; transition: opacity 0.4s 0s, visibility 0s 0.4s; } .is-full-width .cd-project-info { visibility: visible; opacity: 1; } .cd-project-info p { width: 90%; max-width: 800px; margin: 0 auto; line-height: 2; } @media only screen and (min-width: 1024px) { .cd-project-info { position: relative; z-index: 1; } } .projects-container .cd-close, .projects-container .cd-scroll { display: block; z-index: 1; width: 44px; height: 44px; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; visibility: hidden; -webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s; -moz-transition: -moz-transform 1s 0s, visibility 0s 1s; transition: transform 1s 0s, visibility 0s 1s; } .projects-container .cd-close { position: fixed; top: 30px; right: 5%; background: url("../img/cd-icon-close-mobile.svg") no-repeat center center; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } @media only screen and (min-width: 1170px) { .projects-container .cd-close { background-image: url("../img/cd-icon-close-desktop.svg"); } } .projects-container .cd-scroll { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); background: url("../img/cd-icon-arrow-mobile.svg") no-repeat center center; } @media only screen and (min-width: 1170px) { .projects-container .cd-scroll { background-image: url("../img/cd-icon-arrow-desktop.svg"); } } .project-is-open .cd-close, .project-is-open .cd-scroll { visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s; -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s; transition: transform 0.4s 0s, visibility 0s 0s; } .project-is-open .cd-scroll { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-animation: cd-translate 1.2s 0.4s; -moz-animation: cd-translate 1.2s 0.4s; animation: cd-translate 1.2s 0.4s; -webkit-animation-iteration-count: 2; -moz-animation-iteration-count: 2; animation-iteration-count: 2; } .no-touch .project-is-open .cd-close:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .no-touch .project-is-open .cd-scroll:hover { -webkit-transform: translateX(-50%) scale(1.2); -moz-transform: translateX(-50%) scale(1.2); -ms-transform: translateX(-50%) scale(1.2); -o-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); } @-webkit-keyframes cd-translate { 0% { -webkit-transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); } 100% { -webkit-transform: translateX(-50%) scale(1); } } @-moz-keyframes cd-translate { 0% { -moz-transform: translateX(-50%) scale(1); } 50% { -moz-transform: translateY(10px) translateX(-50%) scale(1); } 100% { -moz-transform: translateX(-50%) scale(1); } } @keyframes cd-translate { 0% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } 50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); -moz-transform: translateY(10px) translateX(-50%) scale(1); -ms-transform: translateY(10px) translateX(-50%) scale(1); -o-transform: translateY(10px) translateX(-50%) scale(1); transform: translateY(10px) translateX(-50%) scale(1); } 100% { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); } }
Community Search
Member Log In


Forgot your password?

Not A CASRO Member?

Latest News
Website Underwriters