/* Theme: Blue-focused corporate site for 乐器零售与维修 */
/* Tailwind is included via CDN. This file holds small custom utilities and overrides. */

/* Color tokens */
:root {
	--brand-blue-50: #e6f0ff;
	--brand-blue-100: #cce0ff;
	--brand-blue-200: #99c2ff;
	--brand-blue-300: #66a3ff;
	--brand-blue-400: #3385ff;
	--brand-blue-500: #0066ff;
	--brand-blue-600: #0052cc;
	--brand-blue-700: #003d99;
	--brand-blue-800: #002966;
	--brand-blue-900: #001433;
}

/* Typography helpers */
.heading-gradient {
	background-image: linear-gradient(90deg, var(--brand-blue-400), var(--brand-blue-700));
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.container-narrow {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* Decorative elements */
.brand-gradient {
	background: linear-gradient(135deg, var(--brand-blue-500), var(--brand-blue-700));
}

.soft-card {
	border: 1px solid rgba(0, 102, 255, 0.12);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: saturate(140%) blur(6px);
}

.hero-overlay {
	background: linear-gradient(180deg, rgba(0, 32, 96, 0.55), rgba(0, 32, 96, 0.35));
}

/* Buttons */
.btn-primary {
	background-color: var(--brand-blue-600);
	color: #fff;
}
.btn-primary:hover {
	background-color: var(--brand-blue-700);
}
.btn-secondary {
	background-color: var(--brand-blue-100);
	color: var(--brand-blue-700);
}
.btn-secondary:hover {
	background-color: var(--brand-blue-200);
}

/* Footer */
.site-footer a {
	color: #93c5fd;
}
.site-footer a:hover {
	color: #bfdbfe;
	text-decoration: underline;
}

/* Forms */
.input {
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	padding: 0.625rem 0.875rem;
}
.input:focus {
	outline: none;
	border-color: var(--brand-blue-400);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Utilities */
.shadow-blue {
	box-shadow: 0 10px 25px rgba(0, 102, 255, 0.18);
}


/* 自定义样式 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

body {
    font-family: 'Noto Sans SC', sans-serif;
}

/* 导航栏样式 */
#mobile-menu {
    transition: all 0.3s ease;
}

/* 图片悬停效果 */
.hover-zoom {
    transition: transform 0.3s ease;
}

.hover-zoom:hover {
    transform: scale(1.05);
}

/* 按钮动画 */
.btn-animate {
    position: relative;
    overflow: hidden;
}

.btn-animate::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

.btn-animate:hover::before {
    left: 100%;
}

/* 卡片阴影效果 */
.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.card-shadow:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 页脚链接样式 */
footer a {
    transition: color 0.2s ease;
}

/* 响应式图片 */
.responsive-img {
    width: 100%;
    height: auto;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #2563eb;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1d4ed8;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

/* 背景渐变 */
.bg-gradient-blue {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* 表单样式 */
.form-input {
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
    border-color: #3b82f6;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}