src/index.css - features - beck/gsap_mac

src/index.css
433 строки8 KB
yuldoshev.ihtier
feat(ui): implement switch model
25 окт 2025, 15:02
25 окт 2025, 15:02b6575e3
@import 'tailwindcss';

@font-face {
	font-family: 'Regular';
	src: url('/fonts/regular.otf');
}

@font-face {
	font-family: 'Medium';
	src: url('/fonts/medium.otf');
}

@font-face {
	font-family: 'SemiBold';
	src: url('/fonts/semibold.otf');
}

@font-face {
	font-family: 'Bold';
	src: url('/fonts/bold.otf');
}

* {
	scrollbar-color: var(--color-dark-100) var(--color-black);
}

:root {
	--gradient-color: linear-gradient(
		to bottom right,
		#0894ff 0%,
		#c959dd 34%,
		#ff2e54 68%,
		#ff9004
	);
}

@theme {
	--font-regular: 'Regular';
	--font-medium: 'Medium';
	--font-semibold: 'SemiBold';
	--font-bold: 'Bold';
	--color-primary: #0071e3;
	--color-dark-100: #86868b;
	--color-dark-200: #2e2e30;
	--color-light-100: #adb5bd;
}

html {
	width: 100vw;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	width: 100vw;
	overflow-x: hidden;
	background-color: #000;
	color: var(--color-dark-100);
	font-family: var(--font-semibold);
}

@utility flex-center {
	@apply flex items-center justify-center;
}

@utility flex-between {
	@apply flex items-center justify-between;
}

@utility col-center {
	@apply flex flex-col items-center justify-center;
}

@utility abs-center {
	@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}

@utility h3-semibold {
	@apply font-semibold text-xl text-dark-100;
}

@utility base-semibold {
	@apply font-semibold text-base text-dark-100;
}

@utility small-medium {
	@apply font-medium text-xs;
}

@layer components {
	header {
		@apply w-screen fixed top-0 left-0 z-50 flex-center bg-black min-h-[7vh];

		nav {
			@apply container mx-auto flex-between px-5 2xl:px-0;

			img {
				@apply cursor-pointer hover:-translate-y-0.5 transition-all duration-300 ease-in-out;

				button {
					@apply bg-transparent border-none outline-none cursor-pointer;
				}
			}

			ul {
				@apply flex-center gap-8;

				a {
					@apply hidden md:block text-white opacity-80 font-regular text-sm cursor-pointer hover:opacity-100 transition-all duration-300 ease-in-out;
				}
			}
		}
	}

	#hero {
		@apply h-fit lg:h-[80vh] col-center mt-40 lg:mt-20 2xl:mt-[7vh];

		div {
			@apply relative z-10 col-center lg:translate-y-16;

			h1 {
				@apply font-semibold lg:text-3xl 2xl:text-5xl text-white;
			}

			img {
				@apply container mx-auto w-2/3;
			}
		}

		video {
			@apply mx-auto lg:translate-y-5 2xl:translate-y-0;
		}

		button {
			@apply relative z-10 bg-primary text-white py-2 px-6 mt-10 lg:mt-0 mb-5 rounded-full font-semibold text-lg cursor-pointer hover:bg-white hover:text-black transition-all duration-300 ease-in-out;
		}

		p {
			@apply lg:h3-semibold base-semibold;
		}
	}

	#product-viewer {
		@apply container relative min-h-[93vh] mx-auto px-5 2xl:px-0 mt-40;

		h2 {
			@apply text-white font-semibold text-3xl lg:text-6xl;
		}

		.controls {
			@apply absolute z-50 bottom-40 lg:bottom-40 2xl:bottom-52 left-1/2 -translate-x-1/2;

			.info {
				@apply text-xs text-white bg-black/20 px-2 py-1 rounded-lg;
			}

			.color-control {
				@apply flex-between bg-neutral-800 rounded-full px-6 py-3 gap-4;

				div {
					@apply size-6 rounded-full cursor-pointer;
				}

				.active {
					@apply ring-4 size-6 ring-light-100;
				}
			}

			.size-control {
				@apply small-medium flex-between bg-neutral-800 rounded-full px-6 py-2.5 gap-2;

				div {
					@apply size-8 rounded-full cursor-pointer bg-white text-black flex-center;
				}
			}
		}

		#canvas {
			@apply !w-full !h-[80vh] lg:!h-dvh relative z-40;
		}
	}

	#showcase {
		@apply relative;

		.media {
			@apply relative lg:overflow-hidden;

			video {
				@apply w-full object-cover object-center;
			}

			.mask {
				@apply absolute h-full top-0 lg:-top-20 xl:top-0;

				img {
					@apply h-full scale-150 lg:scale-100;
					transform: matrix(80, 0, 0, 80, 0, 0);
				}

				@media (max-width: 1024px) {
					img {
						transform: matrix(1, 0, 0, 1, 0, 0);
					}
				}
			}
		}

		.content {
			@apply relative z-10 my-5 lg:-mt-40 bg-black font-semibold text-xl text-dark-100 lg:opacity-0;

			.wrapper {
				@apply container mx-auto px-5 pb-20 2xl:px-0 flex flex-col lg:flex-row justify-center gap-20;
			}

			h2 {
				@apply font-semibold text-3xl lg:text-7xl text-white;
			}

			h3 {
				@apply font-semibold text-xl lg:text-5xl text-white;
			}
		}
	}

	#performance {
		@apply w-dvw h-full overflow-hidden pt-20 lg:pt-20 flex flex-col items-center relative;

		h2 {
			@apply font-semibold text-3xl lg:text-6xl text-white max-w-2xl text-center;
		}

		.wrapper {
			@apply w-7xl 2xl:w-[100rem] h-[50vh] lg:h-screen relative;

			img {
				@apply max-w-40 lg:max-w-[27rem] 2xl:max-w-[35rem] object-cover object-center;
			}

			.p1 {
				@apply absolute bottom-1/2 left-[23%] z-[1] max-sm:left-[33%];
			}

			.p2 {
				@apply absolute bottom-[40%] right-[17%] z-[3] max-sm:right-[37%];
			}

			.p3 {
				@apply absolute bottom-1/4 right-[15%] z-[2] max-sm:right-[35%];
			}

			.p4 {
				@apply absolute bottom-[15%] right-[10%] z-[1] max-sm:right-[30%];
			}

			.p5 {
				@apply absolute bottom-[20%] left-1/2 -translate-x-1/2 scale-150;
			}

			.p6 {
				@apply absolute bottom-1/4 left-1/4 z-[2] max-sm:left-[35%];
			}

			.p7 {
				@apply absolute bottom-[5%] left-[15%] z-[3] max-sm:left-[35%];
			}
		}

		.content {
			@apply mx-auto max-w-xl mt-24;

			p {
				@apply lg:h3-semibold base-semibold text-center translate-y-10 opacity-0 px-5;
			}
		}
	}

	#features {
		@apply pt-40 relative;

		h2 {
			@apply text-white font-semibold text-3xl lg:text-7xl text-center max-w-3xl mx-auto;
		}

		#f-canvas {
			@apply !w-full !h-dvh relative z-40;
		}

		.box {
			@apply max-w-xs absolute;

			p {
				@apply lg:h3-semibold base-semibold;
			}
		}
	}

	#highlights {
		@apply container mx-auto lg:py-40 max-lg:px-5;

		h2 {
			@apply text-white font-semibold text-3xl lg:text-7xl text-center max-w-3xl mx-auto;
		}

		h3 {
			@apply text-[#F5F5F7] font-semibold text-xl lg:text-3xl text-center mt-10;
		}

		.masonry {
			@apply grid grid-cols-1 lg:grid-cols-2 gap-5 mt-20 text-[#F5F5F7];

			.left-column {
				@apply flex flex-col justify-between gap-5 opacity-0 -translate-y-5;

				div:first-of-type {
					@apply h-full bg-[url(/highlight-bg.png)] bg-no-repeat bg-cover p-10 2xl:pt-32 lg:pt-20 rounded-3xl;

					p {
						@apply font-semibold text-4xl max-w-2xs;
					}
				}

				p {
					@apply font-semibold text-4xl max-w-2xs;
				}

				div:last-of-type {
					@apply bg-[#1D1D1F] p-10 rounded-3xl flex items-center gap-7;

					p {
						@apply font-semibold lg:text-2xl 2xl:text-3xl;
					}
				}
			}

			.right-column {
				@apply flex flex-col justify-between gap-5 opacity-0 -translate-y-5;

				p {
					@apply font-semibold text-4xl max-w-2xs;
				}
				.apple-gradient {
					@apply p-10 rounded-3xl flex items-center gap-7 relative;

					background: #1d1d1f;
					background-clip: padding-box; /* !important */
					border: 3px solid transparent; /* !important */

					::before {
						content: '';
						pointer-events: none;
						position: absolute;
						inset: 0px;
						z-index: -1;
						margin: -5px; /* !important */
						border-radius: 24px; /* !important */
						background: linear-gradient(
							91deg,
							#0096ff 0%,
							#bb64ff 42%,
							#f2416b 74%,
							#eb7500 100%
						);
					}

					p {
						@apply font-semibold lg:text-2xl 2xl:text-3xl;

						span {
							background: linear-gradient(
								91deg,
								#0096ff 0%,
								#bb64ff 42%,
								#f2416b 74%,
								#eb7500 100%
							);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}

				div:last-of-type {
					@apply h-full bg-[#1D1D1F] p-10 2xl:pt-32 lg:pt-20 rounded-3xl;

					p {
						@apply font-semibold text-4xl max-w-sm;

						.green-gradient {
							background: linear-gradient(90deg, #35a98a 0%, #6dd400 100%);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}
		}
	}

	footer {
		@apply container mx-auto py-7 max-lg:px-5;

		.info {
			@apply flex-between;

			p {
				@apply text-sm font-medium;

				span {
					@apply text-primary mx-0.5;
				}
			}
		}

		hr {
			@apply my-7 text-[#424245];
		}

		.links {
			@apply flex flex-col lg:flex-row lg:items-center justify-between max-lg:mt-5 gap-5 text-sm;

			ul {
				@apply lg:divide-x flex flex-col lg:flex-row gap-2.5;

				li {
					@apply lg:px-5 cursor-pointer hover:text-primary transition-all duration-300 ease-in-out;
				}
			}
		}
	}
}