@import url("theme.css");
@import url("head.css");
/* 正确：同目录 */
@import url("footer.css");
@import url("slider.css");
@import url("index.css");
@import url("about.css");

.button-primary {
	margin-top: 1.2rem;
	padding: 0.8rem 2rem;
	font-size: 1.2rem;
	color: var(--button-text-color);
	background-color: var(--button-bg-color);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all .3s;
}

.button-primary:hover {
	background-color: var(--button-bg-color-hover);
}

.button-gray {
	margin-top: 1.2rem;
	padding: 0.8rem 2rem;
	font-size: 1.2rem;
	color: var(--button-text-color);
	background-color: var(--button-gray-color);
	border: none;
	border-radius: var(--radius);
	cursor: pointer;
	transition: all .3s;
}

.button-gray:hover {
	background-color: var(--button-gray-color-hover);
}


.ad-back {
    width: 100%;
    max-width: 1440px;
    height: 678px;

    position: absolute;
    top: calc(.25rem * -50);

    left: 50%;
    transform: translateX(-50%);

    overflow: hidden;
    filter: blur(64px);
}

.ad-back-sub {
	position: absolute;
	top: 0;
	width: calc(0.25rem * 288.75);
	left: calc(50% - 30rem);
	opacity: .4;
	aspect-ratio:  1155 / 678;
	translate: calc(calc(1 / 2 * 100%) * -1) 0;
	rotate: 30deg;
	/* 替换Tailwind变量为具体渐变，方便演示 */
	background-image: linear-gradient(to right top in oklab, rgb(255, 128, 181) 0%, rgb(144, 137, 252) 100%),
		radial-gradient(ellipse at top left, rgba(13, 110, 253, .5), transparent 50%),
		radial-gradient(ellipse at top right, rgba(255, 228, 132, .5), transparent 50%),
		radial-gradient(ellipse at center right, rgba(113, 44, 249, .5), transparent 50%),
		radial-gradient(ellipse at center left, rgba(214, 51, 132, .5), transparent 50%);
	clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%);
}