95 lines
9.4 KiB
HTML
95 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Film Grain</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="/_/icons/logo.svg">
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
|
|
<body style="margin: 0px">
|
|
<section
|
|
class="bg-black text-white selection:bg-white selection:text-black [--bg:rgba(var(--black-rgb)/1)] hero min-h-screen-svh relative overflow-hidden flex items-stretch justify-stretch"
|
|
data-section-theme="dark" style="/* background-color:#fe620c; */">
|
|
<div class="flex w-full items-center justify-center"
|
|
style="height: calc(250vh); position: absolute; top: -80vh; left: 20vw; transform: rotate(45deg) scaleX(1.75464); transform-origin: center center;">
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 15.8366%, rgb(255, 74, 9) 21.1155%, rgb(254, 111, 18) 44.8752%, rgb(255, 74, 9) 67.2603%, rgb(252, 147, 26) 77.2603%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 19.6644%, rgb(255, 74, 9) 26.2193%, rgb(254, 111, 18) 43.9171%, rgb(255, 74, 9) 61.615%, rgb(252, 147, 26) 72.7268%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 24.4286%, rgb(255, 74, 9) 32.5715%, rgb(254, 111, 18) 43.9195%, rgb(255, 74, 9) 55.2674%, rgb(252, 147, 26) 69.8703%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 28.7597%, rgb(255, 74, 9) 38.3463%, rgb(254, 111, 18) 44.8817%, rgb(255, 74, 9) 51.4172%, rgb(252, 147, 26) 68.1377%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 30.4858%, rgb(255, 74, 9) 40.6477%, rgb(254, 111, 18) 46.6521%, rgb(255, 74, 9) 52.6565%, rgb(252, 147, 26) 68.6954%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 29.3343%, rgb(255, 74, 9) 39.1124%, rgb(254, 111, 18) 48.9509%, rgb(255, 74, 9) 58.7895%, rgb(252, 147, 26) 71.4553%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 26.3383%, rgb(255, 74, 9) 35.1177%, rgb(254, 111, 18) 51.4154%, rgb(255, 74, 9) 66.5919%, rgb(252, 147, 26) 76.5919%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 22.7529%, rgb(255, 74, 9) 30.3372%, rgb(254, 111, 18) 53.6562%, rgb(255, 74, 9) 73.3071%, rgb(252, 147, 26) 83.3071%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 23.6261%, rgb(255, 74, 9) 31.5015%, rgb(254, 111, 18) 55.3196%, rgb(255, 74, 9) 74.8748%, rgb(252, 147, 26) 84.8748%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 28.82%, rgb(255, 74, 9) 38.4266%, rgb(254, 111, 18) 56.1423%, rgb(255, 74, 9) 71.0471%, rgb(252, 147, 26) 81.0471%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 33.5042%, rgb(255, 74, 9) 44.6722%, rgb(254, 111, 18) 55.9944%, rgb(255, 74, 9) 66.3044%, rgb(252, 147, 26) 76.3044%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%;height: 100%;transform: scaleX(1.1);will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 36.324%, rgb(255, 74, 9) 48.432%, rgb(254, 111, 18) 54.9029%, rgb(255, 74, 9) 61.3738%, rgb(252, 147, 26) 72.6182%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 35.3441%, rgb(255, 74, 9) 47.1255%, rgb(254, 111, 18) 53.0364%, rgb(255, 74, 9) 58.9473%, rgb(252, 147, 26) 71.5263%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 30.7193%, rgb(255, 74, 9) 40.959%, rgb(254, 111, 18) 50.6898%, rgb(255, 74, 9) 60.4205%, rgb(252, 147, 26) 72.1892%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 23.8733%, rgb(255, 74, 9) 31.8311%, rgb(254, 111, 18) 48.2339%, rgb(255, 74, 9) 64.3617%, rgb(252, 147, 26) 74.3617%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 16.9888%, rgb(255, 74, 9) 22.6517%, rgb(254, 111, 18) 46.0568%, rgb(255, 74, 9) 67.86%, rgb(252, 147, 26) 77.86%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 15.473%, rgb(255, 74, 9) 20.6307%, rgb(254, 111, 18) 44.5022%, rgb(255, 74, 9) 67.071%, rgb(252, 147, 26) 77.071%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
<div class="rectangle"
|
|
style="flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; background: linear-gradient(rgb(255, 255, 255) 0%, rgb(252, 147, 26) 19.5654%, rgb(255, 74, 9) 26.0872%, rgb(254, 111, 18) 43.8156%, rgb(255, 74, 9) 61.5439%, rgb(252, 147, 26) 72.6948%, rgb(255, 255, 255) 100%);">
|
|
</div>
|
|
</div>
|
|
<div class="film-grain overflow-hidden" style="--grain-opacity:0.35; top: 0; left: 0; height: 300vh; width: 100vw; position: absolute;"></div>
|
|
<div
|
|
class="pt-20 md:pt-28 pb-20 md:pb-28 h-full mx-auto w-full max-w-[90rem] px-[var(--gutter-padding,20px)] min-h-full flex flex-col isolate relative z-[2] justify-center items-center !h-auto pointer-events-none">
|
|
<div class="h-full w-full flex flex-col items-center text-center gap-y-6 md:gap-y-12 max-md:justify-center">
|
|
<div class="md:flex-1"></div>
|
|
<div class="" style="opacity: 1; filter: blur(0px); transform: none;">
|
|
<h2 class="text-[32px] lg:text-[64px] text-balance font-serif leading-[1.1] tracking-[-0.01em]">
|
|
<span class="block">Artisanal quality at industrial scale.</span></h2>
|
|
</div>
|
|
<div class="md:flex-1" style="opacity: 1; filter: blur(0px); transform: none;">
|
|
<div
|
|
class="text-[18px] lg:text-[20px] leading-[1.1] tracking-[-0.01em] text-balance max-w-[450px] max-md:px-2">
|
|
<p class="mb-2 last:mb-0">Shinkei uses robotics to build a world where fishermen thrive, supply
|
|
chains are transparent, and American food systems restore national vitality.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style=" width: 100vw; height: 100vh; mask-image: radial-gradient(circle at 50% 120%, black 0%, black 40%, rgba(0, 0, 0, 0.66) 60%, rgba(0, 0, 0, 0.5) 65%, transparent 75%);
|
|
background: radial-gradient(circle at 50% 120%, rgb(64, 140, 255) -10.5%, rgb(255, 74, 9) -0.5%, rgb(254, 111, 18) 9.5%, rgb(217, 72, 0) 19.5%, rgb(40, 101, 255) 29.5%, rgb(64, 140, 255) 39.5%, rgb(255, 74, 9) 49.5%, rgb(254, 111, 18) 59.5%, rgb(217, 72, 0) 69.5%, rgb(40, 101, 255) 79.5%, rgb(64, 140, 255) 89.5%, rgb(255, 74, 9) 99.5%, rgb(254, 111, 18) 109.5%);"></div>
|
|
</section>
|
|
</body>
|
|
|
|
</html> |