@import "normalize.css";
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
min-height: 100vh;
padding: 0 1rem;
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
}
:is(h1, h2) {
margin: 0;
}
.bleed-canvas {
width: 100vw;
height: 100%;
position: absolute;
}
.chopsticks {
height: 20%;
position: absolute;
right: 0;
top: 4%;
}
.veribear {
width: 10vmin;
position: absolute;
bottom: 5%;
right: 5%;
rotate: -20deg;
}
.bento {
position: absolute;
top: 35%;
left: 0%;
//rotate: 90deg;
height: 40vmin;
}
@media (max-width: 768px) {
.bento {
height: 60vmin;
}
}
h1 {
font-size: clamp(2rem, 6vw + 1rem, 8rem);
font-weight: 600;
background: linear-gradient(90deg, #394960, #394961);
color: transparent;
-webkit-background-clip: text;
}
section:nth-of-type(1) {
height: 100vh;
display: grid;
place-items: center;
background: transparent;
}
main {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.sticky {
width: 50%;
aspect-ratio: 1;
position: sticky;
bottom: 0;
}
.sticky img {
width: 150%;
position: absolute;
bottom: 0;
translate: -5% 0;
}
section {
container-type: inline-size;
}
section:nth-of-type(2) p {
font-weight: 600;
font-size: clamp(1.5rem, 3vw + 1rem, 4rem);
text-align: center;
max-width: 80%;
margin: 25vh auto;
background: linear-gradient(
to right in oklab, #394960, #394961
);
color: transparent;
-webkit-background-clip: text;
overflow: visible;
}
.box {
container-type: inline-size;
}
.box .logo {
width: clamp(1rem, 4vw + 1rem, 4rem);
aspect-ratio: 1;
background: linear-gradient(90deg, #394961, lightblue);
justify-self: start;
position: absolute;
bottom: 100%;
translate: 0 -25%;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.box svg path {
fill: blue;
}
p {
position: relative;
}
section:nth-of-type(3) h2 {
font-size: clamp(2rem, 8vw + 1rem, 12rem);
font-weight: 600;
background: linear-gradient(90deg, #394961, #394960);
color: transparent;
-webkit-background-clip: text;
/* translate: 0 20%;*/
}
section:nth-of-type(4) {
display: grid;
padding-top: 2rem;
gap: 4rem;
}
section:nth-of-type(4) .box:first-of-type {
margin-bottom: 8rem;
}
/* Box styling */
.box {
width: 100%;
background: hsl(0 0% 100%);
border-radius: 2rem;
display: grid;
grid-template-columns: 0.6fr 0.4fr;
gap: 1rem;
justify-content: end;
padding: 1rem;
}
.box__content {
display: grid;
place-items: center;
grid-column: 2;
min-height: 40cqi;
padding: 2rem 0rem;
align-content: center;
jutify-items: start;
}
.box p {
font-weight: 600;
color: hsl(0 0% 50%);
font-size: clamp(0.875rem, 0.5vw + 1rem, 2rem);
}
.box--two {
position: absolute;
bottom: 0;
z-index: -1;
}
.box--two p {
font-size: clamp(1rem, 2vw + 1rem, 2.75rem);
color: black;
font-weight: 500;
}
.box--two p span {
background: linear-gradient(90deg, #394961, #394960);
color: transparent;
-webkit-background-clip: text;
}
@media(max-width: 768px) {
.box--two {
padding: 2rem 1rem;
}
.box--two p {
font-size: clamp(0.875rem, 0.5vw + 1rem, 2rem);
}
}
@media(min-width: 768px) {
.box {
padding: 2rem;
}
}
section:nth-of-type(4) {
z-index: 1;
position: relative;
}
section:nth-of-type(5) {
display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr;
padding: 4rem 0 5vh 0;
transform-style: preserve-3d;
}
section:nth-of-type(5)::before {
content: "";
z-index: -1;
background: red;
position: absolute;
bottom: 0;
height: calc(100% + 60cqi);
width: 100vw;
left: 50%;
translate: -50% 0;
background: linear-gradient(#394961, #394960);
-webkit-mask: linear-gradient(transparent, white 25%);
mask: linear-gradient(transparent, white 25%);
}
main {
container-type: inline-size;
}
@container (max-width: 420px) {
section:nth-of-type(5) {
grid-auto-flow: row;
grid-template-columns: 1fr;
}
section:nth-of-type(5)::before {
height: calc(100% + 120cqi);
}
}
section:nth-of-type(6) {
min-height: 5vh;
display: grid;
background:#fcfeff;
z-index: -1;
position: relative;
border-radius: 0 0 10vmin 10vmin;
padding: 0rem 0 5vh 0;
}
section:nth-of-type(6) h2 {
font-size: clamp(2rem, 3vw + 1rem, 8rem);
}
section:nth-of-type(6) svg {
width: 30%;
position: absolute;
stroke: hsl(0 0% 0%);
right: 10%;
bottom: 10%;
rotate: 10deg;
display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr;
padding: 4rem 0 5vh 0;
transform-style: preserve-3d;
}
.bento--mini {
aspect-ratio: 1;
background: hsl(0 0% 100%);
border-radius: 2rem;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
position: relative;
}
:is(.bird, .bear) {
width: 100%;
rotate: -12deg;
transition: scale 0.2s;
position: absolute;
top: 50%;
left: 0%;
translate: -50% -50%;
}
.bird {
fill: #1D9BF0;
translate: -40% -25%;
}
.bear {
rotate: -26deg;
}
.bento--mini a {
text-decoration: none;
font-size: clamp(1.5rem, 2vw + 1rem, 2rem);
font-weight: 600;
color: hsl(0 0% 5%);
position: relative;
}
.bento--mini:is(:hover, :focus-within) svg {
scale: 1.4;
}
.bento--mini a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
.bento--mini a .logo {
width: clamp(1rem, 4vw + 1rem, 2rem);
aspect-ratio: 1;
background: linear-gradient(90deg, #394961, #394960);
justify-self: start;
position: absolute;
bottom: 100%;
translate: 0 -25%;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.bento--mini:first-of-type a .logo {
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* That nav stuff */
nav {
position: fixed;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid hsl(0 0% 50%);
height: 52px;
background: hsl(0 0% 100% / 0.75);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 2;
}
.nav__content {
display: flex;
align-items: center;
justify-content: space-between;
width: 800px;
max-width: 100%;
padding: 0 1rem;
margin: 0 auto;
height: 100%;
}
nav a {
text-decoration: none;
background: hsl(210 100% 45%);
color: hsl(0 0% 98%);
font-weight: 400;
padding: 0.5rem 1rem;
border-radius: 100px;
font-size: 0.875rem;
}
nav img {
height: 50%;
justify-self: start;
}
section:nth-of-type(4) .box:nth-of-type(2) {
background: transparent;
}
@supports (animation-timeline: scroll()) {
section {
view-timeline-name: --section;
}
:is(.chopsticks, .bento) {
-webkit-animation: slide both linear;
animation: slide both linear;
animation-timeline: --section;
animation-range: exit 0 exit 25%;
}
.chopsticks {
--x: 50%;
--y: 100%;
--opacity: 0;
}
.bento {
--x: -100%;
--y: 100%;
--opacity: 0;
}
@-webkit-keyframes slide {
to {
translate: var(--x, 0) var(--y, 0);
opacity: var(--opacity, 1);
scale: var(--scale, 1);
}
}
@keyframes slide {
to {
translate: var(--x, 0) var(--y, 0);
opacity: var(--opacity, 1);
scale: var(--scale, 1);
}
}
section:nth-of-type(4) .box:nth-of-type(2) p {
-webkit-animation: slide both linear;
animation: slide both linear;
animation-range: cover 15% cover 75%;
animation-timeline: view();
--opacity: 0;
--y: -10%;
}
section:nth-of-type(5)::before {
translate: -50% 10%;
opacity: 0;
-webkit-animation: slide both linear;
animation: slide both linear;
animation-range: entry 0 entry 25%;
animation-timeline: --section;
--opacity: 1;
--y: 0;
--x: -50%;
}
section:nth-of-type(6)::before {
content: "";
z-index: -1;
background: red;
position: absolute;
bottom: 0;
height: calc(100% + 60cqi);
width: 100vw;
left: 50%;
translate: -50% 0;
border-radius: 0 0 10vmin 10vmin;
background: linear-gradient(#394961, #394960);
-webkit-mask: linear-gradient(transparent, white 25%);
mask: linear-gradient(transparent, white 25%);
}
*, *:after, *:before {
box-sizing: border-box;
}
@-webkit-keyframes slip {
to {
scale: 1;
translate: -5% 0;
}
}
@keyframes slip {
to {
scale: 1;
translate: -5% 0;
}
}
.sticky img {
scale: 1.2;
translate: 30% 0;
-webkit-animation: slip both linear, slide both linear;
animation: slip both linear, slide both linear;
animation-range: entry 50% entry 70%, exit 0% exit 15%;
animation-timeline: --section;
--y: 30%;
--x: -5%;
}
section:nth-of-type(4) {
padding-top: 8rem;
}
.sticky {
-webkit-clip-path: inset(-100% -100% 0 -100%);
clip-path: inset(-100% -100% 0 -100%);
}
.spacing-box {
height: 35vh;
}
.veribear {
-webkit-animation: roll both linear;
animation: roll both linear;
animation-timeline: --section;
animation-range: exit;
}
@-webkit-keyframes roll {
to {
rotate: 720deg;
translate: 500% 0;
}
}
@keyframes roll {
to {
rotate: 720deg;
translate: 500% 0;
}
}
}