Skip to content

Commit

Permalink
Deployed to live
Browse files Browse the repository at this point in the history
  • Loading branch information
@bardsley
bardsley committed Nov 25, 2024
1 parent ba8346a commit 6450b89
Showing 1 changed file with 45 additions and 206 deletions.
251 changes: 45 additions & 206 deletions docs/client/winchester/parallax.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,174 +163,10 @@ section#introduction {
}
}

#goals {
color: #fff;
padding-top: 300px;
/* width: 100%; */
/* mix-blend-mode:screen; */
border: solid 1px transparent; /* Triggers block */
/* border-color: hotpink; */
display: block;
overflow: hidden;
position: relative;
}
#goals h2 {
font-size: 3em;
text-transform: uppercase;
text-align: center;
margin-bottom: 1rem;
}

#goals .picture {
width: 100%;
border: 1px solid transparent;
/* background-color: hotpink; */
display: block;
background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570367/original/sports.png');
background-repeat: no-repeat;
background-position-x: right;
background-position-y: top;
background-size: 220%;
height: 700px;
position: absolute;
top: 0px;
left: 0;
/* mix-blend-mode: screen; */
/* overflow: hidden; */
/* overflow: visible; */
max-width: var(--max-column-width);
margin: 0 auto;
}
@media screen and (min-width: 1024px) {
#goals {
padding-top: 100px;
height: 100vh;
}
#goals h2 {
transform: translate(200px,0);
}
#goals .picture {
left: calc(50% - 770px);
height: 500px;
background-size: 90%;
}


}

#goals .ripple {
margin-top: 200px;
background-color: var(--organisation);
background-size: cover;
clip-path: path('m5011.83,62.75c-43.56-14.48-51.33-36.84-100-49.33-15.12-3.88-55.5-12.28-101.33,0-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.23,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-49.96,13.28-50.04,36.21-100,49.33-46.95,12.33-87.78,2.82-98.67,0-48.98-12.69-56.07-36.08-101.33-49.33-16.3-4.77-35.62-7.66-58.29-6.41-15.62-.19-33.54,1.36-52.38,6.41-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.22,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-42.77,11.37-48.99,29.81-81.24,43.12-53.79,13.96-91.98,7.86-117.1-.49-43.56-14.48-51.33-36.84-100-49.33-15.12-3.88-55.5-12.28-101.33,0-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.22,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-49.96,13.28-50.04,36.21-100,49.33-46.95,12.33-87.78,2.82-98.67,0-48.98-12.69-56.07-36.08-101.33-49.33C74.73-.74,41.94-3.61.5,6.71v3865.33h5130.33V192.38c0,.11,0-6.16,0-25.26V62.75c-54.8,14.6-93.59,8.44-119,0Z');
padding: 100px 3rem 3rem;
height: calc(100% + 100px );
}

#goals .description {
position: relative;
overflow: visible;
height: 12rem;
width: 100%;
}
#goals .description .value {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* left: 10%; */
font-size: 3.5rem;
width: 100%;
padding: 1em;
margin-top: 1em;
/* opacity:0; */
transform: translateX(100%) scale(0,0);
/* scale: 0%; */
/* min-height: 5rem; */
}
#goals #community { transform: translateX(0%), scale(1,1) }
#goals #community { background-color: var(--purple); }
#goals #familiarity { background-color: var(--red);}
#goals #advocacy { background-color: var(--orange); color: #000;}
#goals #support { background-color: var(--yellow); color: #000;}
/* Goals & Measures */

.rotator {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
max-width: var(--max-column-width);
/* overflow: hidden; */
margin: 0 auto;
}
#goals .ripple h2 {
font-size: 5rem;
}
.rotator #goal-wheel-wrap {
width: 80%;
padding-top: 80px;
background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570372/original/arrow2.png');
background-repeat: no-repeat;
background-position-x: 45%;
background-position-y: 0px;
background-size: 200px;
position: relative;
}
.rotator #goal-wheel-wrap img {
max-height: 100%;
display: block;
}

.rotator #goal-wheel-wrap .logo {
width: 100%; height: calc(100% - 80px);
position: absolute;
background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570369/original/swirl.png');
background-position: center center;
background-repeat: no-repeat;
background-size: 15% 15%;
z-index: 10;
}
@media screen and (min-width: 1024px) {

#goals .ripple {
max-height: 100%;;
}

.rotator {
flex-direction: row;
align-items: center;
}
#goals .description {
width: 100%;
}
.rotator #goal-wheel-wrap {
/* max-width: 50%; */
width: 65%;
/* max-height: 100%; */
}
.rotator #goal-wheel-wrap img {
aspect-ratio: 1/1 ;
}
#goals .description .value {
font-size: 3rem;
margin-top:0;
}
.ripple {
border: solid 1px green;
}
.rotator {
}
.rotator #goal-wheel-wrap {
margin: -7rem auto 0;
}
}


/* Measures */

#measures {
#goals, #measures {
color: #fff;
padding-top: 300px;
/* width: 100%; */
Expand All @@ -341,19 +177,19 @@ section#introduction {
overflow: hidden;
position: relative;
}
#goals h2,
#measures h2 {
font-size: 3em;
text-transform: uppercase;
text-align: center;
margin-bottom: 1rem;
}

#goals .picture,
#measures .picture {
width: 100%;
border: 1px solid transparent;
/* background-color: hotpink; */
display: block;
background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570366/original/students.png');
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
Expand All @@ -368,24 +204,25 @@ section#introduction {
max-width: var(--max-column-width);
margin: 0 auto;
}
#measures .picture { background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570366/original/students.png');}
#goals .picture { background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570367/original/sports.png');}

@media screen and (min-width: 1024px) {
#measures {
#goals,#measures {
padding-top: 100px;
height: 100vh;
}
#measures h2 {
transform: translate(-200px,0);
}
#measures h2 { transform: translate(-200px,0); }
#goals h2 { transform: translate(200px,0); }

#goals .picture,
#measures .picture {
left: calc(50% - 770px);
height: 500px;
background-size: 100%;
border: dashed 1px greenyellow;
background-size: 100%; /* 90% for goals? */
}


}

#goals .ripple,
#measures .ripple {
margin-top: 200px;
background-color: var(--organisation);
Expand All @@ -394,13 +231,14 @@ section#introduction {
padding: 100px 3rem 3rem;
height: calc(100% + 100px );
}

#goals .description,
#measures .description {
position: relative;
overflow: visible;
height: 12rem;
width: 100%;
}
#goals .description .value,
#measures .description .value {
position: absolute;
display: flex;
Expand All @@ -411,7 +249,7 @@ section#introduction {
font-size: 3.5rem;
/* width: calc(80% - 2em); */
padding: 1em;
margin-top: 1em;
/* margin-top: 1em; */
/* opacity:0; */
transform: translateX(100%) scale(0,0);
/* scale: 0%; */
Expand All @@ -423,20 +261,32 @@ section#introduction {
#measures #impact { background-color: var(--orange); color: #000;}
#measures #engagement { background-color: var(--yellow); color: #000;}

#goals #community { transform: translateX(0%), scale(1,1) }
#goals #community { background-color: var(--purple); }
#goals #familiarity { background-color: var(--red);}
#goals #advocacy { background-color: var(--orange); color: #000;}
#goals #support { background-color: var(--yellow); color: #000;}

#goals .rotator,
#measures .rotator {
display:flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 1rem;
max-width: var(--max-column-width);
/* overflow: hidden; */
margin: 0 auto;
}

#goals .rotator {flex-direction: column;}
#measures .rotator {flex-direction: column-reverse;}

#goals .ripple h2,
#measures .ripple h2 {
font-size: 5rem;
}
.rotator #goal-wheel-wrap {
.rotator #goal-wheel-wrap,
.rotator #goal-wheel-wrap-2 {
width: 80%;
padding-top: 80px;
background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570372/original/arrow2.png');
Expand All @@ -446,12 +296,13 @@ section#introduction {
background-size: 200px;
position: relative;
}
.rotator #goal-wheel-wrap img {
.rotator #goal-wheel-wrap img,
.rotator #goal-wheel-wrap-2 img {
max-height: 100%;
display: block;
}

.rotator #goal-wheel-wrap .logo {
.rotator #goal-wheel-wrap .logo,
.rotator #goal-wheel-wrap-2 .logo {
width: 100%; height: calc(100% - 80px);
position: absolute;
background-image: url('https://assets.prod.unioncloud-internal.com/image/images/570369/original/swirl.png');
Expand All @@ -461,55 +312,43 @@ section#introduction {
z-index: 10;
}
@media screen and (min-width: 1024px) {

#goals .ripple,
#measures .ripple {
max-height: 100%;;
}

#goals .rotator,
#measures .rotator {
flex-direction: row;
align-items: center;
}
#goals .description,
#measures .description {
width: 100%;
}
.rotator #goal-wheel-wrap {
.rotator #goal-wheel-wrap,
.rotator #goal-wheel-wrap-2 {
/* max-width: 50%; */
width: 65%;
/* max-height: 100%; */

}
.rotator #goal-wheel-wrap img {
.rotator #goal-wheel-wrap img,
.rotator #goal-wheel-wrap-2 img {
aspect-ratio: 1/1 ;
}
#measures .description .value {
font-size: 3rem;
margin-top:0;
}
.ripple {
border: solid 1px green;
}
.rotator {
}
.rotator #goal-wheel-wrap {
.rotator #goal-wheel-wrap,
.rotator #goal-wheel-wrap-2 {
margin: -7rem auto 0;
}
}









#measures {
/* width: 100%; */
/* background-color: var(--logo-light); */
/* mix-blend-mode:screen; */


}
#priorities, #priorities * {
box-sizing: content-box;
}
Expand Down

0 comments on commit 6450b89

Please sign in to comment.