diff --git a/web/index.html b/web/index.html
index 4580a87..45e7f03 100644
--- a/web/index.html
+++ b/web/index.html
@@ -7,11 +7,11 @@
Web Work Warehouse
-
-
+
-
+
@@ -159,9 +159,9 @@ Altro…
@@ -421,6 +421,45 @@ Altro…
function scrollTriggers() {
gsap.registerPlugin(ScrollTrigger);
+ gsap.to(".pic img:nth-child(1)", {
+ opacity: 0,
+ scrollTrigger: {
+ trigger: ".pic",
+ start: "100% 100%",
+ end: "100% 72.5%", // Changed to make space smaller
+ scrub: true,
+ markers: false
+ }
+ });
+
+ gsap.to(".pic img:nth-child(2)", {
+ opacity: 0,
+ scrollTrigger: {
+ trigger: ".pic",
+ start: "50% 75%",
+ end: "100% 0%",
+ scrub: true,
+ markers: false
+ }
+ });
+
+
+
+ gsap.to(".pic", {
+ "--bg-position-x": "-10%",
+ scrollTrigger: {
+ trigger: ".pic",
+ start: "top bottom",
+ end: "bottom top",
+ scrub: true
+ }
+ });
+
+
+
+
+
+
document.querySelectorAll('.aboutme .text p:nth-child(even)').forEach(img => {
img.style.transform = "translateX(100vw)";
@@ -464,6 +503,17 @@ Altro…
}
});
+ gsap.to(".pic img", {
+ right: "-2.5%",
+ scrollTrigger: {
+ trigger: ".pic",
+ start: "top 60%", // Adjusted to start after the first animation
+ end: "bottom top",
+ scrub: true
+ }
+ });
+
+
document.querySelectorAll('.pic .big').forEach(img => {
img.style.position = "relative";
diff --git a/web/style.css b/web/style.css
index f510d9a..9ca29c8 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,10 +1,9 @@
* {
- box-sizing: border-box;
+ box-sizing: border-box
}
:root {
--h1: clamp(3.5rem, 5.5vw, 15rem);
-
--tile-h: auto;
--offwhite-50: hsla(0, 37%, 92%, 0.50);
--offwhite-25: hsla(0, 37%, 92%, 0.25);
@@ -13,40 +12,34 @@
--broken-light: hsl(0, 0%, 68.6%);
--broken-lighter: hsl(0, 0%, 50%);
--dark-purple: hsl(287, 15%, 23%);
-
--clr-1: hsl(0, 80%, 20%);
--clr-2: hsl(0, 77%, 25%);
--clr-3: hsl(0, 70%, 30%);
--clr-4: hsl(0, 52%, 50%);
--clr-5: hsl(0, 19%, 60%);
-
--green-1: hsl(123, 52%, 70%);
--green-2: hsl(123, 39%, 42%);
-
--about-extra-space: clamp(2rem, 25vw, 20rem);
-
--me-w: min(100vw, 800px);
--me-h: calc(var(--me-w) * 0.752);
-
--shadow: drop-shadow(0px 2px 2px hsla(0, 0%, 0%, 0.5));
--contact-inner-radius: 1rem;
- --contact-button-inset: -0.1rem;
+ --contact-button-inset: -0.1rem
}
::selection {
background-color: #2d2d2d;
- color: var(--offwhite);
+ color: var(--offwhite)
}
-textarea::selection,
-input::selection {
+input::selection,
+textarea::selection {
color: #2d2d2d;
- background-color: var(--offwhite-50);
+ background-color: var(--offwhite-50)
}
html {
- /* overflow: hidden; */
- overflow-x: hidden;
+ overflow-x: hidden
}
body {
@@ -59,13 +52,7 @@ body {
color: var(--offwhite);
line-height: 1.2;
font-family: 'Space Mono', monospace;
- /* perspective: 100px;
- transform-style: preserve-3d;
- height: 100%;
- overflow-y: scroll;
- display: block; */
- overflow-x: inherit;
-
+ overflow-x: inherit
}
.megablob {
@@ -74,23 +61,22 @@ body {
width: 100lvw;
height: 100lvh;
inset: 0;
- background-image: url('img/blob-bg.svg?v1');
+ background-image: url(img/blob-bg.svg?v1);
background-repeat: no-repeat;
background-position: 50% 50%;
- background-size: cover;
- /* transform: translateZ(-3rem); */
+ background-size: cover
}
-@media (orientation: landscape) and (max-height: 832px),
-(min-width: 1140px) {
+@media (orientation:landscape) and (max-height:832px),
+(min-width:1140px) {
.megablob {
background-size: contain;
- scale: 140%;
+ scale: 140%
}
}
.overflow-hidden {
- overflow: hidden !important;
+ overflow: hidden !important
}
h1,
@@ -99,40 +85,37 @@ h3,
h4 {
color: var(--offwhite);
max-width: 100vw;
- max-width: calc(100vw - 12px * 2);
+ max-width: calc(100vw - 12px * 2)
}
h1 {
- /* margin: 0rem clamp(1rem, 2vw, 3rem); */
line-height: .75;
font-size: var(--h1);
- font-weight: bold;
- letter-spacing: -.2rem;
+ font-weight: 700;
+ letter-spacing: -.2rem
}
h2 {
- letter-spacing: -.066rem;
+ letter-spacing: -.066rem
}
.titoletto {
- letter-spacing: -.08rem;
+ letter-spacing: -.08rem
}
h2,
h3,
h4 {
- line-height: 1;
+ line-height: 1
}
#showcase {
- /* max-width: 1200px; */
display: flex;
flex-wrap: wrap;
gap: 1rem;
- justify-content: center;
+ justify-content: center
}
-
.full-gradient {
position: absolute;
width: 100%;
@@ -141,11 +124,11 @@ h4 {
z-index: -5;
overflow: hidden;
opacity: .45;
- mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))
}
-.full-gradient::before,
-.full-gradient::after {
+.full-gradient::after,
+.full-gradient::before {
content: "";
position: absolute;
top: 0;
@@ -153,14 +136,14 @@ h4 {
width: 100%;
height: 100%;
z-index: -5;
- transition: opacity 4s linear;
+ transition: opacity 4s linear
}
.full-gradient::before {
background: radial-gradient(at right bottom, var(--clr-3), var(--clr-4));
opacity: 1;
z-index: -1;
- animation: fadeInOut 12s linear infinite;
+ animation: fadeInOut 12s linear infinite
}
.full-gradient::after {
@@ -168,63 +151,55 @@ h4 {
opacity: 0;
z-index: -2;
animation: fadeInOut 12s linear infinite;
- animation-delay: 6s;
+ animation-delay: 6s
}
@keyframes fadeInOut {
0%,
- 50%,
- 100% {
- opacity: 1;
+ 100%,
+ 50% {
+ opacity: 1
}
25%,
75% {
- opacity: 0;
+ opacity: 0
}
}
-
-
-
-@media (width < 768px) and (orientation: portrait) {
+@media (width < 768px) and (orientation:portrait) {
.full-gradient {
-
- height: 200lvh;
+ height: 200lvh
}
}
-
.darken {
- filter: brightness(0.7);
- /* Adjust brightness level as needed */
+ filter: brightness(.7)
}
.tile {
background: #1e1e1e;
border: 1px solid #333;
border-radius: 8px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
overflow: hidden;
flex: 1 1 calc(50% - 20px);
display: flex;
flex-direction: column;
position: relative;
font-family: 'Space Mono', monospace;
- /* position: sticky; */
top: 1rem;
- transition: filter 0.3s ease, border 0s;
- height: var(--tile-h);
+ transition: filter .3s ease, border 0s;
+ height: var(--tile-h)
}
-
.tile .image-wrapper {
position: relative;
width: 100%;
z-index: 0;
position: relative;
- overflow: hidden;
+ overflow: hidden
}
.tile img {
@@ -233,29 +208,29 @@ h4 {
transition: filter .5s, transform .5s;
display: block;
min-height: 10rem;
- object-fit: cover;
+ object-fit: cover
}
.tile .image-wrapper:hover img {
filter: brightness(.5) blur(5px);
- transform: scale(1.05);
+ transform: scale(1.05)
}
.tile .content {
padding: 15px;
z-index: 1;
- position: relative;
+ position: relative
}
.tile h2 {
margin: 0 0 10px 0;
font-size: 1.5em;
- color: #ffffff;
+ color: #fff
}
.tile p {
margin: 0;
- color: #cccccc;
+ color: #ccc
}
.open-btn {
@@ -263,59 +238,58 @@ h4 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- background-color: hsl(0, 0%, 91%);
+ background-color: #e8e8e8;
backdrop-filter: blur(20px);
- color: hsl(0, 0%, 0%);
+ color: #000;
border: none;
padding: .7rem 1.4rem;
font-size: 16px;
cursor: pointer;
opacity: 0;
- outline: 2px solid hsl(0, 0%, 91%);
- transition: opacity 0.3s, color .5s, background-color .5s, outline 500ms;
+ outline: 2px solid #e8e8e8;
+ transition: opacity .3s, color .5s, background-color .5s, outline .5s
}
.open-btn:hover {
- background-color: hsla(0, 0%, 12%, 0.205);
- outline: 2px solid white;
+ background-color: hsla(0, 0%, 12%, .205);
+ outline: 2px solid #fff
}
.image-wrapper:hover .open-btn {
- opacity: 1;
+ opacity: 1
}
-@media (max-width: 768px) {
+@media (max-width:768px) {
.tile {
- flex: 1 1 100%;
+ flex: 1 1 100%
}
}
.buttons {
- font-size: clamp(2rem, 5.5vw, 15rem);
+ font-size: clamp(2rem, 5.5vw, 15rem)
}
span.line {
- display: inline-block;
+ display: inline-block
}
p {
- text-wrap: pretty;
+ text-wrap: pretty
}
.tile.more {
transition: all 3s ease, border 0s;
- border: 0px solid #333;
- max-height: 0;
+ border: 0 solid #333;
+ max-height: 0
}
#carica h3 {
- color: inherit;
+ color: inherit
}
#carica {
width: min-content;
border-radius: 1rem;
- /* outline: .2rem solid #0000; */
padding: 1.3rem 2rem .8rem;
cursor: pointer;
user-select: none;
@@ -324,17 +298,16 @@ p {
overflow: hidden;
--perspective: 0;
transform: translateZ(var(--perspective)) translateY(calc(-4 * var(--perspective) - 1rem)) scale(.5);
- transform-style: inherit;
+ transform-style: inherit
}
#carica:hover {
- background-color: hsla(0, 0%, 20%, 0.3);
+ background-color: hsla(0, 0%, 20%, .3)
}
#carica:active {
- background-color: hsla(0, 0%, 40%, 0.3);
- color: hsla(0, 0%, 93%, 0.928);
- /* outline: .3rem solid hsla(0, 0%, 93%, 0.928); */
+ background-color: hsla(0, 0%, 40%, .3);
+ color: hsla(0, 0%, 93%, .928)
}
.before-aboutme {
@@ -346,7 +319,7 @@ p {
background-color: transparent;
pointer-events: none;
position: relative;
- z-index: -1;
+ z-index: -1
}
.before-aboutme::before {
@@ -354,12 +327,11 @@ p {
position: absolute;
inset: 0;
width: 50%;
- /* height: var(--about-extra-space); */
left: 0;
- top: calc(var(--about-extra-space) / -2);
+ top: calc(var(--about-extra-space)/ -2);
transform: skewY(-3deg);
transform-origin: right;
- background-color: #000;
+ background-color: #000
}
.before-aboutme::after {
@@ -367,12 +339,11 @@ p {
position: absolute;
inset: 0;
width: 50%;
- /* height: var(--about-extra-space); */
left: 50%;
- top: calc(var(--about-extra-space) / -2);
+ top: calc(var(--about-extra-space)/ -2);
transform: skewY(3deg);
transform-origin: left;
- background-color: #000;
+ background-color: #000
}
.after-aboutme {
@@ -381,7 +352,7 @@ p {
background-color: transparent;
pointer-events: none;
z-index: 0;
- height: var(--about-extra-space);
+ height: var(--about-extra-space)
}
.after-aboutme::before {
@@ -391,10 +362,10 @@ p {
width: 50%;
height: calc(var(--about-extra-space) + var(--me-h));
left: 50%;
- top: calc(var(--about-extra-space) / 2);
+ top: calc(var(--about-extra-space)/ 2);
transform: skewY(-3deg);
transform-origin: left;
- background-color: #000;
+ background-color: #000
}
.after-aboutme::after {
@@ -404,20 +375,19 @@ p {
width: 50%;
height: calc(var(--about-extra-space) + var(--me-h));
left: 0;
- top: calc(var(--about-extra-space) / 2);
+ top: calc(var(--about-extra-space)/ 2);
transform: skewY(3deg);
transform-origin: right;
- background-color: #000;
+ background-color: #000
}
.aboutme {
transform: translateZ(.15rem);
transform-style: inherit;
-
z-index: -2;
width: 100%;
margin: 0 auto 2.5rem;
- position: relative;
+ position: relative
}
.aboutme::before {
@@ -426,34 +396,30 @@ p {
inset: 0;
background: repeat;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
- background-image: url("img/leaf-pattern.webp");
+ background-image: url(img/leaf-pattern.webp);
transform: translateZ(-1rem) scale(1.25);
height: calc(100% + var(--about-extra-space) * 2);
filter: brightness(.9) contrast(1.05);
transition: filter .8s ease;
- z-index: -2;
- /* margin-top: calc(-1 * var(--about-extra-space)); */
+ z-index: -2
}
.aboutme:hover:before {
- filter: brightness(.7) contrast(1.05);
-
+ filter: brightness(.7) contrast(1.05)
}
.aboutme .text {
- margin-top: calc(var(--about-extra-space) / 1.15);
- padding-inline: .5rem;
+ margin-top: calc(var(--about-extra-space)/ 1.15);
+ padding-inline: .5rem
}
.aboutme p {
margin-inline: auto;
font-size: clamp(1rem, 5vw, 1.5rem);
padding-inline: 1rem;
- letter-spacing: -.05rem;
+ letter-spacing: -.05rem
}
-
-
.rhomboid {
--width: 50svw;
z-index: -2;
@@ -464,10 +430,9 @@ p {
top: 0;
background-color: var(--broken-lighter);
opacity: .2;
- clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
rotate: y 90deg;
- will-change: scroll-position;
- /* animation: brokenLight 15s infinite; */
+ will-change: scroll-position
}
.heading {
@@ -475,43 +440,43 @@ p {
width: auto;
padding: .5rem 1.25rem;
border-radius: 1rem;
- filter: var(--shadow);
+ filter: var(--shadow)
}
.heading h2 {
- margin-bottom: 1.5rem;
+ margin-bottom: 1.5rem
}
-@media (max-width: 768px) {
+@media (max-width:768px) {
.rhomboid {
--multiplier: 1.5;
height: 45svh;
- clip-path: polygon(50% 0%, 100% 50%, -126.53% 77.80%, 0% 50%);
- background-color: var(--broken-light);
+ clip-path: polygon(50% 0, 100% 50%, -126.53% 77.8%, 0 50%);
+ background-color: var(--broken-light)
}
.heading {
display: flex;
flex-direction: column-reverse;
- gap: .15rem;
+ gap: .15rem
}
.heading h1,
.heading h2 {
- margin: 0;
+ margin: 0
}
}
@keyframes brokenLight {
0%,
- 8%,
+ 100%,
20%,
35%,
55%,
70%,
- 100% {
- background-color: var(--offwhite);
+ 8% {
+ background-color: var(--offwhite)
}
10%,
@@ -519,7 +484,7 @@ p {
40%,
60%,
80% {
- background-color: var(--broken-light);
+ background-color: var(--broken-light)
}
75%,
@@ -530,7 +495,7 @@ p {
85%,
87%,
89% {
- background-color: var(--broken-light);
+ background-color: var(--broken-light)
}
90%,
@@ -538,7 +503,7 @@ p {
94%,
96%,
98% {
- background-color: var(--offwhite);
+ background-color: var(--offwhite)
}
30%,
@@ -549,13 +514,13 @@ p {
50%,
52%,
54% {
- background-color: var(--offwhite);
+ background-color: var(--offwhite)
}
65%,
67%,
69% {
- background-color: var(--offwhite);
+ background-color: var(--offwhite)
}
45%,
@@ -566,7 +531,7 @@ p {
97.7%,
97.9%,
98.4% {
- background-color: var(--offwhite);
+ background-color: var(--offwhite)
}
97.5%,
@@ -574,19 +539,16 @@ p {
98%,
98.5%,
99% {
- background-color: var(--broken-light);
+ background-color: var(--broken-light)
}
}
.flickering-background {
- animation: brokenLight 10s infinite;
+ animation: brokenLight 10s infinite
}
-
-
-
.titoletto {
- filter: var(--shadow);
+ filter: var(--shadow)
}
.pic {
@@ -596,47 +558,36 @@ p {
height: var(--me-h);
width: 100%;
max-height: 66svh;
-
+ --bg-position-x: 0%
}
.pic::after {
+ background-position-x: var(--bg-position-x);
content: '';
position: absolute;
inset: 0;
- background-image: radial-gradient(ellipse farthest-corner, transparent 0%, transparent 35%, #000 30%, #000 40%, transparent 90%),
- radial-gradient(ellipse farthest-corner at 0px 0px, transparent 0%, transparent 20%, #000 15%, #000 20%, transparent 50%),
- radial-gradient(ellipse farthest-corner at 8px 8px, transparent 0%, transparent 20%, #000 15%, #000 20%, transparent 50%),
- radial-gradient(ellipse farthest-corner at 0px 8px, transparent 0%, transparent 20%, #000 15%, #000 20%, transparent 40%),
- radial-gradient(ellipse farthest-corner at 8px 0px, transparent 0%, transparent 20%, #000 15%, #000 20%, transparent 50%),
- linear-gradient(0deg, #be2000 0, #c02708 30%, #ba2407 50%, #760000 70%, rgba(0, 0, 0, 0) 100%);
+ background-image: radial-gradient(ellipse farthest-corner, transparent 0, transparent 35%, #000 30%, #000 40%, transparent 90%), radial-gradient(ellipse farthest-corner at 0 0, transparent 0, transparent 20%, #000 15%, #000 20%, transparent 50%), radial-gradient(ellipse farthest-corner at 8px 8px, transparent 0, transparent 20%, #000 15%, #000 20%, transparent 50%), radial-gradient(ellipse farthest-corner at 0 8px, transparent 0, transparent 20%, #000 15%, #000 20%, transparent 40%), radial-gradient(ellipse farthest-corner at 8px 0, transparent 0, transparent 20%, #000 15%, #000 20%, transparent 50%), linear-gradient(0deg, #be2000 0, #c02708 30%, #ba2407 50%, #760000 70%, rgba(0, 0, 0, 0) 100%);
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
- mask-image: linear-gradient(to bottom, transparent 0%, transparent 5%, rgba(0, 0, 0, 1) 100%);
+ mask-image: linear-gradient(to bottom, transparent 0, transparent 5%, rgba(0, 0, 0, 1) 100%);
mask-size: cover;
- z-index: -4;
+ z-index: -4
}
.big {
- /* font-family: "Bangers"; */
- /* margin: 0 0 -1em 0; */
- text-shadow: -1px -1px yellow, 1px 1px #be2000, 2px 2px #c02708;
+ text-shadow: -1px -1px #ff0, 1px 1px #be2000, 2px 2px #c02708;
transform: rotate(-10deg) skew(-10deg, 0);
padding-bottom: 50px;
- /* float: left; */
- /* width: 100%; */
margin-left: 10rem;
font-size: var(--h1);
- display: none;
-
+ display: none
}
@media (width >=1050px) {
.big {
- display: block;
+ display: block
}
}
-
-
.pic img {
position: absolute;
top: 0;
@@ -645,104 +596,12 @@ p {
width: 100%;
object-fit: contain;
object-position: 100%;
+ z-index: var(--index);
+ user-select: none;
+ pointer-events: none;
+ transition: opacity .5s cubic-bezier(.25, 1, .75, 1)
}
-.pic img:first-of-type {
- animation: saturation both;
- animation-timeline: view(calc(var(--index) / 3 * 100%) calc((var(--index) / 2 * 100%) - 50%));
-}
-
-
-@keyframes saturation {
- from {
- filter: saturate(0%);
- }
-
- to {
- filter: saturate(100%);
- }
-}
-
-.pic img:not(:first-of-type) {
- animation: autoShowAnimation both;
- animation-timeline: view();
-
-}
-
-@keyframes autoShowAnimation {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
-}
-
-@media (orientation: portrait) {
- .pic img:not(:first-of-type) {
- animation-timeline: view(calc(var(--index) / 3 * 100%) calc((var(--index) / 2 * 100%) - 50%));
- }
-}
-
-@supports not (animation-timeline: view(20% 0%)) {
- .pic>img:nth-child(2) {
- display: none;
- }
-
- @property --mask-position {
- syntax: '';
- inherits: false;
- initial-value: 00%;
- }
-
- .pic>img:nth-child(3) {
- -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) var(--mask-position), rgba(0, 0, 0, 0));
- mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) var(--mask-position), rgba(0, 0, 0, 0));
- animation: maskAnimate 5s infinite alternate linear;
- filter: grayscale(.8) contrast(1.4) brightness(.87);
- }
-
- @keyframes maskAnimate {
- 0% {
- --mask-position: 10%;
- }
-
- 100% {
- --mask-position: 40%;
- }
- }
-
-
-
-}
-
-
-
-/* .magicpattern {
- display: flex;
- min-height: 45rem;
- align-items: center;
- justify-content: center;
- background-image: var(--waves);
- background-size: cover;
- background-position: top center;
- background-repeat: repeat;
- z-index: 2;
- position: relative;
-
- transform: translateZ(.01rem);
-}
-
-footer {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: clamp(1.5rem, 6vw, 4rem);
- position: relative;
-} */
-
-
footer.magicpattern {
display: flex;
min-height: 45rem;
@@ -752,9 +611,8 @@ footer.magicpattern {
position: relative;
transform: translateZ(.01rem);
overflow: hidden;
-
width: 100%;
- margin-top:-2rem;
+ margin-top: -2rem
}
.magicpattern svg {
@@ -763,7 +621,7 @@ footer.magicpattern {
left: 0;
width: 100%;
height: 100%;
- z-index: -1;
+ z-index: -1
}
footer {
@@ -771,76 +629,57 @@ footer {
justify-content: center;
align-items: center;
font-size: clamp(1.5rem, 6vw, 4rem);
- position: relative;
+ position: relative
}
-
-
-
-@media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion:reduce) {
.rhomboid {
animation: none;
- background-color: var(--broken-light);
+ background-color: var(--broken-light)
}
}
-
-
-
-
-
-/* BTN */
-
.contact-button {
background: var(--clr-1);
- position: relative;
+ position: relative
}
@property --gradient-angle {
syntax: "";
initial-value: 0deg;
- inherits: false;
+ inherits: false
}
-.contact-button::before,
-.contact-button::after {
-
+.contact-button::after,
+.contact-button::before {
content: "";
position: absolute;
inset: var(--contact-button-inset);
z-index: -1;
- background: conic-gradient(from var(--gradient-angle),
- var(--green-1),
- var(--clr-4),
- var(--clr-5),
- var(--clr-4),
- var(--green-1));
+ background: conic-gradient(from var(--gradient-angle), var(--green-1), var(--clr-4), var(--clr-5), var(--clr-4), var(--green-1));
border-radius: var(--contact-inner-radius);
- animation: rotation 3s linear infinite;
+ animation: rotation 3s linear infinite
}
.contact-button::after {
- filter: blur(3.5rem);
+ filter: blur(3.5rem)
}
@keyframes rotation {
0% {
- --gradient-angle: 0deg;
+ --gradient-angle: 0deg
}
100% {
- --gradient-angle: 360deg;
+ --gradient-angle: 360deg
}
}
-
-
footer .contact-button {
padding: 1rem 1.75rem 1.25rem;
border: none;
border-radius: calc(var(--contact-button-inset) + var(--contact-inner-radius));
- /* backdrop-filter: blur(3px); */
- background-color: hsla(0, 0%, 0%, 0.85);
+ background-color: hsla(0, 0%, 0%, .85);
color: var(--offwhite);
display: flex;
flex-direction: row;
@@ -850,143 +689,126 @@ footer .contact-button {
justify-content: center;
margin-inline: auto;
width: 100%;
- transition: letter-spacing 1s ease, width 1.5s ease,
- background-color .33s ease, transform .25s ease-in-out, padding-bottom .5s, opacity .8s;
- letter-spacing: -.05rem;
+ transition: letter-spacing 1s ease, width 1.5s ease, background-color .33s ease, transform .25s ease-in-out, padding-bottom .5s, opacity .8s;
+ letter-spacing: -.05rem
}
@media (width >=1100px) {
footer .contact-button {
padding: .15rem 1.25rem .25rem;
- font-size: 3rem;
+ font-size: 3rem
}
}
footer .contact-button:hover {
- background-color: hsla(0, 0%, 0%, 0.7);
- letter-spacing: .0rem;
+ background-color: hsla(0, 0%, 0%, .7);
+ letter-spacing: 0rem
}
footer .contact-button:active {
transform: scale(100.001%);
- /* padding-bottom: 1.5rem; */
- bottom: 1px;
-
+ bottom: 1px
}
footer .contact-button.converged {
- width: calc(100% - 1rem * 2);
+ width: calc(100% - 1rem * 2)
}
footer .contact-button>div {
- width: max-content;
+ width: max-content
}
.contact-button .before {
- margin-right: 6rem;
+ margin-right: 6rem
}
.contact-button .after {
- margin: 2.5rem;
+ margin: 2.5rem
}
-
-
-
-
-.contact-button .before i,
-.contact-button .after i {
+.contact-button .after i,
+.contact-button .before i {
position: absolute;
- font-size: 3rem;
+ font-size: 3rem
}
-@media (max-width: 500px) {
-
-
+@media (max-width:500px) {
footer .contact-button {
justify-content: space-evenly;
gap: 2rem;
letter-spacing: normal;
padding: 1.25rem 1.75rem 1.5rem;
- --contact-button-inset: -0.15rem;
+ --contact-button-inset: -0.15rem
}
.contact-button .after,
.contact-button .before {
margin: 0;
- display: block;
-
+ display: block
}
- .contact-button .before i,
- .contact-button .after i {
- font-size: 1.6rem;
+ .contact-button .after i,
+ .contact-button .before i {
+ font-size: 1.6rem
}
-
}
-.contact-button .before,
-.contact-button .after {
+.contact-button .after,
+.contact-button .before {
display: flex;
align-items: center;
- gap: 0.5rem;
+ gap: .5rem;
height: 1rem;
width: 1rem;
position: relative;
z-index: 2;
color: var(--clr-4);
-
- transform: translateY(0%);
- transition: opacity 1.5s ease, transform 1s, color 1s;
+ transform: translateY(0);
+ transition: opacity 1.5s ease, transform 1s, color 1s
}
-.contact-button:hover .before,
-.contact-button:hover .after {
+.contact-button:hover .after,
+.contact-button:hover .before {
color: var(--clr-3);
animation: up-down .5s linear infinite alternate;
- transform: translateY(-12.5%);
+ transform: translateY(-12.5%)
}
.contact-button .before.converged {
transform: translate(1000%, -75%);
- opacity: 0;
+ opacity: 0
}
.contact-button .after.converged {
transform: translate(-1000%, 75%);
- opacity: 0;
+ opacity: 0
}
.hidden {
transition: .5s;
opacity: 0;
- pointer-events: none;
+ pointer-events: none
}
-input[type="checkbox"] {
- accent-color: var(--clr-4);
+input[type=checkbox] {
+ accent-color: var(--clr-4)
}
-
#contactstuff {
position: fixed;
top: 0;
left: 0;
height: 100lvh;
width: 100%;
-
background-color: #000;
z-index: 10;
-
display: flex;
align-items: center;
justify-content: center;
-
- background-image: url('img/blob-bg.svg?v1');
+ background-image: url(img/blob-bg.svg?v1);
background-size: cover;
background-repeat: no-repeat;
- background-position: 50% 50%;
-
+ background-position: 50% 50%
}
#contactstuff .container {
@@ -995,20 +817,19 @@ input[type="checkbox"] {
display: flex;
flex-direction: column;
align-content: center;
- align-items: center;
+ align-items: center
}
@media (500px < width <=1412px) {
#contactstuff .container {
- width: 50%;
+ width: 50%
}
-
}
@media (300px < width <=500px) {
#contactstuff .container {
width: 100%;
- margin-inline: 2rem;
+ margin-inline: 2rem
}
}
@@ -1023,82 +844,80 @@ body::before {
opacity: 0;
transition: .5s;
pointer-events: none;
- opacity: var(--before-opacity, 0);
+ opacity: var(--before-opacity, 0)
}
.cursor-pointer {
- cursor: pointer;
+ cursor: pointer
}
.w-max {
- width: max-content;
+ width: max-content
}
.w-min {
- width: min-content;
+ width: min-content
}
-#contactstuff div[role="button"] {
+#contactstuff div[role=button] {
background-color: var(--offwhite-25);
display: flex;
flex-direction: row;
justify-content: space-between;
padding-right: 1rem;
- padding-left: .5rem;
+ padding-left: .5rem
}
-#contactstuff div[role="button"]:hover {
- background-color: var(--offwhite-50);
+#contactstuff div[role=button]:hover {
+ background-color: var(--offwhite-50)
}
-#contactstuff div[role="button"]:active {
- background-color: var(--broken-light);
+#contactstuff div[role=button]:active {
+ background-color: var(--broken-light)
}
div.close {
- color: rgba(var(--offwhite), 0.8);
+ color: rgba(var(--offwhite), .8);
transition: color ease .1s;
font-size: 1.5rem;
width: 100%;
display: grid;
place-items: center;
margin-top: 2.5rem;
- transition: opacity ease 2s;
+ transition: opacity ease 2s
}
div.close:hover {
- color: rgba(var(--offwhite), 0.9);
+ color: rgba(var(--offwhite), .9)
}
div.close:active {
- color: rgba(var(--offwhite), 1);
+ color: rgba(var(--offwhite), 1)
}
div.close>i {
- grid-area: 1 / 1;
+ grid-area: 1/1
}
.☺ {
color: bisque;
- /* background-color: #000; */
- animation: hidesmile🙂 5s ease-in-out infinite alternate;
+ animation: hidesmile🙂 5s ease-in-out infinite alternate
}
.x {
- animation: hidex 5s ease-in-out infinite alternate;
-
+ animation: hidex 5s ease-in-out infinite alternate
}
@keyframes hidex {
0%,
50% {
- opacity: 1;
+ opacity: 1
}
- 60%,
- 100% {
- opacity: 0;
+ 100%,
+ 60% {
+ opacity: 0
}
}
@@ -1106,14 +925,12 @@ div.close>i {
0%,
50% {
- color: hsla(0, 0%, 0%, 0);
- /* background-color: #0000; */
+ color: hsla(0, 0%, 0%, 0)
}
- 60%,
- 100% {
- color: hsla(33, 100%, 88%, 100%);
- /* background-color: #000; */
+ 100%,
+ 60% {
+ color: hsla(33, 100%, 88%, 100%)
}
}
@@ -1122,135 +939,126 @@ div.close>i {
padding: 2rem;
background-color: var(--offwhite-25);
backdrop-filter: blur(10px);
- border-radius: var(--contact-inner-radius);
+ border-radius: var(--contact-inner-radius)
}
.form-control {
border: none;
- background-color: hsla(0, 0%, 13%, 0.6);
- transition: background-color .2s;
+ background-color: hsla(0, 0%, 13%, .6);
+ transition: background-color .2s
}
.form-control:focus {
- background-color: hsla(0, 0%, 13%, 0.7);
+ background-color: hsla(0, 0%, 13%, .7)
}
-button[type="submit"] {
- background-color: hsla(0, 0%, 13%, 0.606);
-
- color: white;
+button[type=submit] {
+ background-color: hsla(0, 0%, 13%, .606);
+ color: #fff;
transition: background-color 50ms, background-position .5s;
- background-position: 50% 0%;
- background-size: 105%;
+ background-position: 50% 0;
+ background-size: 105%
}
-button[type="submit"]:hover {
+button[type=submit]:hover {
background-color: #001220;
- color: white;
- background-image: url('img/layered-waves.svg');
+ color: #fff;
+ background-image: url(img/layered-waves.svg);
background-repeat: no-repeat;
- background-position: 50% 80%;
+ background-position: 50% 80%
}
-button[type="submit"]:active {
+button[type=submit]:active {
background-color: var(--clr-2);
- color: white;
+ color: #fff
}
-
.grow-wrap {
- display: grid;
+ display: grid
}
.grow-wrap::after {
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
- visibility: hidden;
- /* pointer-events: none; */
+ visibility: hidden
}
.grow-wrap>textarea {
- resize: none;
+ resize: none
}
-.grow-wrap>textarea,
-.grow-wrap::after {
- /* Identical styling required!! */
+.grow-wrap::after,
+.grow-wrap>textarea {
max-height: 10rem;
min-height: calc(1.5em + (.75rem + 2px));
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 24px;
- grid-area: 1 / 1 / 2 / 2;
+ grid-area: 1/1/2/2
}
.layered-waves {
- background-image: url('img/layered-waves.svg');
+ background-image: url(img/layered-waves.svg);
background-repeat: no-repeat;
- background-size: cover;
+ background-size: cover
}
-[role="button"],
.buttons,
.contact-button,
+[role=button],
button {
- user-select: none;
+ user-select: none
}
-
-
-
-
@keyframes fadeIn {
from {
- opacity: 0;
+ opacity: 0
}
to {
- opacity: 1;
+ opacity: 1
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1.5s ease-in forwards;
- animation-delay: calc(var(--delay, 0) * 1s);
+ animation-delay: calc(var(--delay, 0) * 1s)
}
-
@keyframes slideInR {
from {
transform: translateX(min(50vw, 25rem));
- opacity: 0;
+ opacity: 0
}
to {
transform: translateX(0);
- opacity: 1;
+ opacity: 1
}
}
.slideR {
opacity: 0;
animation: slideInR 1s ease-out forwards;
- animation-delay: calc(var(--delay, 0) * 1s);
+ animation-delay: calc(var(--delay, 0) * 1s)
}
@keyframes slideInL {
from {
transform: translateX(max(-50vw, -25rem));
- opacity: 0;
+ opacity: 0
}
to {
transform: translateX(0);
- opacity: 1;
+ opacity: 1
}
}
.slideL {
opacity: 0;
animation: slideInL 1s ease-out forwards;
- animation-delay: calc(var(--delay, 0) * 1s);
+ animation-delay: calc(var(--delay, 0) * 1s)
}
\ No newline at end of file
+ 
- 
+