init: sxbh.ltd 官网初始提交
- nginx 安全加固 (CSP, HSTS, 缓存策略) - 共享 style.css - 138个页面全部接入 Co-authored-by: Hermes AI <agent@hermes>
This commit is contained in:
Hermes CI Fix
Hermes AI
@@ -0,0 +1,492 @@
|
||||
/* ===== Reset & Variables ===== */
|
||||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||||
html { scroll-behavior:smooth; }
|
||||
|
||||
:root {
|
||||
--navy-900:#0a132e;
|
||||
--navy-800:#0f1f4a;
|
||||
--navy-700:#1a3380;
|
||||
--teal-500:#06b6d4;
|
||||
--teal-400:#22d3ee;
|
||||
--amber-400:#fbbf24;
|
||||
--amber-500:#f59e0b;
|
||||
--white:#ffffff;
|
||||
--gray-50:#f8fafc;
|
||||
--gray-100:#f1f5f9;
|
||||
--gray-200:#e2e8f0;
|
||||
--gray-300:#cbd5e1;
|
||||
--gray-400:#94a3b8;
|
||||
--gray-500:#64748b;
|
||||
--gray-600:#475569;
|
||||
|
||||
--font-display:'Noto Serif SC','PingFang SC',serif;
|
||||
--font-body:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
|
||||
--font-logo:'Noto Serif SC','KaiTi',cursive;
|
||||
|
||||
--radius-sm:8px;
|
||||
--radius-md:12px;
|
||||
--radius-lg:20px;
|
||||
|
||||
--shadow-sm:0 1px 3px rgba(0,0,0,.06);
|
||||
--shadow-md:0 4px 16px rgba(0,0,0,.08);
|
||||
--shadow-lg:0 8px 32px rgba(0,0,0,.12);
|
||||
--transition:all .3s cubic-bezier(.4,0,.2,1);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:var(--font-body);
|
||||
background:var(--gray-50);
|
||||
color:var(--navy-900);
|
||||
line-height:1.6;
|
||||
overflow-x:hidden;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
|
||||
/* ===== SVG icon helper ===== */
|
||||
.icon-svg { display:inline-flex; align-items:center; justify-content:center; }
|
||||
.icon-svg svg { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
header {
|
||||
position:fixed; top:0; left:0; right:0; z-index:100;
|
||||
background:rgba(255,255,255,.88);
|
||||
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
|
||||
border-bottom:1px solid var(--gray-200);
|
||||
transition:var(--transition);
|
||||
}
|
||||
.header-inner {
|
||||
max-width:1200px; margin:0 auto;
|
||||
display:flex; align-items:center; justify-content:space-between;
|
||||
padding:0 24px; height:68px;
|
||||
}
|
||||
.logo {
|
||||
font-size:20px; font-weight:700; color:var(--navy-800);
|
||||
display:flex; align-items:center; gap:12px;
|
||||
text-decoration:none;
|
||||
}
|
||||
.logo-icon {
|
||||
width:36px; height:36px;
|
||||
background:linear-gradient(135deg,var(--navy-700),var(--teal-500));
|
||||
border-radius:10px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
color:#fff; font-size:16px; font-weight:700;
|
||||
}
|
||||
.logo span { color:var(--gray-400); font-weight:400; font-size:14px; }
|
||||
nav { display:flex; gap:36px; }
|
||||
nav a {
|
||||
color:var(--gray-600); text-decoration:none; font-size:14px;
|
||||
font-weight:500; position:relative; transition:color .2s;
|
||||
padding:4px 0;
|
||||
}
|
||||
nav a::after {
|
||||
content:''; position:absolute; bottom:-2px; left:0; right:0;
|
||||
height:2px; background:var(--teal-500); border-radius:1px;
|
||||
transform:scaleX(0); transition:transform .2s;
|
||||
}
|
||||
nav a:hover { color:var(--navy-800); }
|
||||
nav a:hover::after { transform:scaleX(1); }
|
||||
.mobile-toggle {
|
||||
display:none; background:none; border:none; cursor:pointer;
|
||||
color:var(--gray-600); padding:4px;
|
||||
}
|
||||
.mobile-toggle svg { width:24px; height:24px; }
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.hero {
|
||||
padding:140px 24px 100px;
|
||||
position:relative; overflow:hidden; color:var(--white);
|
||||
background:
|
||||
linear-gradient(135deg,rgba(10,19,46,.92) 0%,rgba(15,31,74,.75) 50%,rgba(26,51,128,.6) 100%),
|
||||
url('https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1920')
|
||||
center/cover no-repeat fixed;
|
||||
}
|
||||
.hero::before {
|
||||
content:''; position:absolute; top:-40%; right:-10%; width:60%; height:180%;
|
||||
background:radial-gradient(ellipse,rgba(6,182,212,.1) 0%,transparent 70%);
|
||||
pointer-events:none;
|
||||
}
|
||||
.hero::after {
|
||||
content:''; position:absolute; bottom:0; left:0; right:0; height:100px;
|
||||
background:linear-gradient(to top,var(--gray-50),transparent);
|
||||
}
|
||||
.hero-inner { max-width:1200px; margin:0 auto; position:relative; z-index:1; }
|
||||
.hero-badge {
|
||||
display:inline-flex; align-items:center; gap:8px;
|
||||
padding:7px 18px; border-radius:20px;
|
||||
background:rgba(255,255,255,.1); font-size:13px; font-weight:500; margin-bottom:20px;
|
||||
border:1px solid rgba(255,255,255,.12);
|
||||
backdrop-filter:blur(8px);
|
||||
}
|
||||
.hero-badge svg { width:16px; height:16px; color:var(--amber-400); }
|
||||
.hero h1 {
|
||||
font-family:var(--font-display);
|
||||
font-size:clamp(38px,5vw,60px); font-weight:700;
|
||||
line-height:1.12; margin-bottom:18px;
|
||||
}
|
||||
.hero h1 em { font-style:normal; background:linear-gradient(135deg,var(--amber-400),var(--teal-400)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
|
||||
/* Fallback for browsers that don't support bg-clip:text */
|
||||
@supports not (background-clip:text) {
|
||||
.hero h1 em { color:var(--amber-400); -webkit-text-fill-color:var(--amber-400); }
|
||||
}
|
||||
.hero p {
|
||||
font-size:17px; color:rgba(255,255,255,.75);
|
||||
max-width:580px; margin-bottom:34px; line-height:1.75;
|
||||
}
|
||||
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
|
||||
.btn {
|
||||
display:inline-flex; align-items:center; gap:8px;
|
||||
padding:14px 30px; border-radius:var(--radius-sm); font-size:15px;
|
||||
font-weight:600; text-decoration:none; transition:var(--transition);
|
||||
border:none; cursor:pointer; font-family:var(--font-body);
|
||||
}
|
||||
.btn svg { width:18px; height:18px; }
|
||||
.btn-primary {
|
||||
background:var(--white); color:var(--navy-800);
|
||||
box-shadow:0 4px 14px rgba(0,0,0,.15);
|
||||
}
|
||||
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); }
|
||||
.btn-outline {
|
||||
background:transparent; color:var(--white);
|
||||
border:1.5px solid rgba(255,255,255,.25);
|
||||
}
|
||||
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.45); }
|
||||
|
||||
/* ===== SECTION ===== */
|
||||
section { padding:80px 24px; }
|
||||
.section-inner { max-width:1200px; margin:0 auto; }
|
||||
.section-label {
|
||||
display:inline-flex; align-items:center; gap:6px;
|
||||
font-size:12px; font-weight:600; letter-spacing:2px;
|
||||
text-transform:uppercase; color:var(--teal-500); margin-bottom:8px;
|
||||
}
|
||||
.section-label svg { width:14px; height:14px; }
|
||||
.section-title {
|
||||
font-family:var(--font-display);
|
||||
font-size:clamp(26px,3.5vw,38px); font-weight:700;
|
||||
color:var(--navy-800); margin-bottom:10px;
|
||||
}
|
||||
.section-desc {
|
||||
font-size:16px; color:var(--gray-500);
|
||||
max-width:560px; margin-bottom:44px; line-height:1.7;
|
||||
}
|
||||
|
||||
/* ===== SERVICES ===== */
|
||||
.services-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
|
||||
gap:24px;
|
||||
}
|
||||
.service-card {
|
||||
background:var(--white); border-radius:var(--radius-md); padding:32px;
|
||||
box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
|
||||
transition:var(--transition);
|
||||
}
|
||||
.service-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300); }
|
||||
.service-icon {
|
||||
width:48px; height:48px; border-radius:12px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
margin-bottom:18px;
|
||||
}
|
||||
.service-icon svg { width:24px; height:24px; }
|
||||
.service-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
|
||||
.service-card p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:14px; }
|
||||
.service-tags { display:flex; flex-wrap:wrap; gap:6px; }
|
||||
.service-tags span {
|
||||
font-size:12px; padding:3px 10px; border-radius:6px;
|
||||
background:var(--gray-100); color:var(--gray-500);
|
||||
}
|
||||
|
||||
/* Link wrapper around service card */
|
||||
.service-card-link {
|
||||
text-decoration:none; color:inherit; display:block;
|
||||
}
|
||||
.service-card-link:hover .service-card {
|
||||
box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300);
|
||||
}
|
||||
|
||||
/* ===== PRODUCTS ===== */
|
||||
.products-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
|
||||
gap:24px;
|
||||
}
|
||||
.product-card {
|
||||
background:var(--white); border-radius:var(--radius-md); overflow:hidden;
|
||||
box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
|
||||
transition:var(--transition); display:flex; flex-direction:column;
|
||||
}
|
||||
.product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
|
||||
.product-img {
|
||||
height:130px; display:flex; align-items:center; justify-content:center;
|
||||
background:linear-gradient(135deg,#eef2ff,#e0e7ff);
|
||||
}
|
||||
.product-img svg { width:44px; height:44px; }
|
||||
.product-body { padding:24px; flex:1; display:flex; flex-direction:column; }
|
||||
.product-body h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
|
||||
.product-body p { font-size:14px; color:var(--gray-500); line-height:1.7; margin-bottom:12px; flex:1; }
|
||||
.product-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
|
||||
.product-tags span {
|
||||
font-size:12px; padding:3px 10px; border-radius:6px;
|
||||
background:var(--gray-100); color:var(--gray-500);
|
||||
}
|
||||
.product-btn {
|
||||
display:inline-flex; align-items:center; gap:6px;
|
||||
padding:10px 20px; border-radius:6px; font-size:14px; font-weight:600;
|
||||
background:var(--navy-800); color:var(--white); text-decoration:none;
|
||||
transition:var(--transition); border:none; cursor:pointer;
|
||||
font-family:var(--font-body);
|
||||
}
|
||||
.product-btn svg { width:16px; height:16px; }
|
||||
.product-btn:hover { background:var(--navy-700); }
|
||||
|
||||
/* ===== WHY US ===== */
|
||||
.why-section { background:var(--white); }
|
||||
.why-section .section-inner { text-align:center; }
|
||||
.why-section .section-desc { margin:0 auto 44px; }
|
||||
.why-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
|
||||
gap:24px;
|
||||
}
|
||||
.why-card {
|
||||
text-align:center; padding:44px 28px;
|
||||
background:var(--gray-50); border-radius:var(--radius-md);
|
||||
border:1px solid var(--gray-200); transition:var(--transition);
|
||||
}
|
||||
.why-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--gray-300); }
|
||||
.why-icon {
|
||||
width:48px; height:48px; border-radius:14px;
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
.why-icon svg { width:24px; height:24px; }
|
||||
.why-card h3 { font-size:18px; font-weight:600; margin-bottom:8px; color:var(--navy-800); }
|
||||
.why-card p { font-size:14px; color:var(--gray-500); line-height:1.8; }
|
||||
|
||||
/* ===== PERSPECTIVE (博海视角) ===== */
|
||||
.perspective-section {
|
||||
background: linear-gradient(135deg, #fefce8 0%, #fffbeb 100%);
|
||||
border-top: 1px solid var(--gray-200);
|
||||
}
|
||||
.perspective-section .section-desc { margin:0 auto 44px; text-align:left; }
|
||||
.perspective-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
|
||||
gap:20px;
|
||||
}
|
||||
.perspective-card {
|
||||
background:var(--white); border-radius:var(--radius-md);
|
||||
padding:24px; border:1px solid var(--gray-200);
|
||||
box-shadow:var(--shadow-sm);
|
||||
transition:var(--transition);
|
||||
display:flex; flex-direction:column;
|
||||
}
|
||||
.perspective-card:hover {
|
||||
box-shadow:var(--shadow-md); transform:translateY(-4px);
|
||||
border-color:var(--amber-400);
|
||||
}
|
||||
.perspective-card .cat {
|
||||
font-size:11px; font-weight:600; letter-spacing:1px;
|
||||
text-transform:uppercase; color:var(--teal-500); margin-bottom:6px;
|
||||
}
|
||||
.perspective-card h3 {
|
||||
font-size:16px; font-weight:600; color:var(--navy-800);
|
||||
margin-bottom:8px; line-height:1.4;
|
||||
}
|
||||
.perspective-card .meta {
|
||||
font-size:12px; color:var(--gray-400); margin-top:auto;
|
||||
}
|
||||
.perspective-link {
|
||||
display:flex; align-items:center; gap:6px;
|
||||
font-size:13px; font-weight:500; color:var(--navy-700);
|
||||
text-decoration:none; margin-top:12px;
|
||||
transition:color .2s;
|
||||
}
|
||||
.perspective-link:hover { color:var(--teal-500); }
|
||||
.perspective-link svg { width:14px; height:14px; }
|
||||
.perspective-actions {
|
||||
margin-top:36px; text-align:center;
|
||||
}
|
||||
.perspective-btn {
|
||||
display:inline-flex; align-items:center; gap:8px;
|
||||
padding:12px 28px; border-radius:var(--radius-sm);
|
||||
font-size:15px; font-weight:600; text-decoration:none;
|
||||
background:var(--navy-800); color:var(--white);
|
||||
transition:var(--transition); border:none; cursor:pointer;
|
||||
font-family:var(--font-body);
|
||||
}
|
||||
.perspective-btn svg { width:16px; height:16px; }
|
||||
.perspective-btn:hover {
|
||||
background:var(--navy-700); transform:translateY(-2px);
|
||||
box-shadow:0 6px 20px rgba(15,31,74,.2);
|
||||
}
|
||||
|
||||
/* ===== CONTACT ===== */
|
||||
.contact-section {
|
||||
background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 100%);
|
||||
color:var(--white);
|
||||
position:relative; overflow:hidden;
|
||||
}
|
||||
.contact-section::before {
|
||||
content:''; position:absolute; top:-30%; right:-15%; width:50%; height:150%;
|
||||
background:radial-gradient(ellipse,rgba(6,182,212,.06) 0%,transparent 70%);
|
||||
pointer-events:none;
|
||||
}
|
||||
.contact-section .section-title { color:var(--white); }
|
||||
.contact-section .section-desc { color:rgba(255,255,255,.55); }
|
||||
.contact-grid {
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
|
||||
gap:24px;
|
||||
position:relative; z-index:1;
|
||||
}
|
||||
.contact-item {
|
||||
padding:24px; border-radius:var(--radius-md);
|
||||
background:rgba(255,255,255,.05);
|
||||
border:1px solid rgba(255,255,255,.06);
|
||||
transition:var(--transition);
|
||||
}
|
||||
.contact-item:hover { background:rgba(255,255,255,.08); transform:translateY(-2px); }
|
||||
.contact-item .icon {
|
||||
width:40px; height:40px; border-radius:10px;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
margin-bottom:14px;
|
||||
background:rgba(6,182,212,.12);
|
||||
color:var(--teal-400);
|
||||
}
|
||||
.contact-item .icon svg { width:20px; height:20px; }
|
||||
.contact-item h4 {
|
||||
font-size:13px; font-weight:500; color:rgba(255,255,255,.45);
|
||||
margin-bottom:6px; letter-spacing:1px; text-transform:uppercase;
|
||||
}
|
||||
.contact-item .value {
|
||||
font-size:16px; color:var(--white); font-weight:500;
|
||||
}
|
||||
.contact-item .value a { color:var(--amber-400); text-decoration:none; }
|
||||
.contact-item .value a:hover { text-decoration:underline; }
|
||||
.contact-item .value .divider { color:rgba(255,255,255,.2); margin:0 10px; font-size:14px; }
|
||||
.contact-item .sub { font-size:13px; color:rgba(255,255,255,.3); margin-top:4px; }
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
footer {
|
||||
background:#060d1f; color:rgba(255,255,255,.35);
|
||||
padding:32px 24px; text-align:center; font-size:13px;
|
||||
}
|
||||
footer a { color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; }
|
||||
footer a:hover { color:var(--teal-400); }
|
||||
footer .sep { margin:0 10px; color:rgba(255,255,255,.1); }
|
||||
|
||||
/* ===== CONSULT MODAL ===== */
|
||||
.consult-overlay {
|
||||
position:fixed; top:0; left:0; right:0; bottom:0;
|
||||
background:rgba(0,0,0,.5); z-index:1000;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
opacity:0; visibility:hidden;
|
||||
transition:opacity .3s, visibility .3s;
|
||||
padding:24px;
|
||||
}
|
||||
.consult-overlay.open { opacity:1; visibility:visible; }
|
||||
.consult-modal {
|
||||
background:#fff; border-radius:16px; padding:32px;
|
||||
max-width:440px; width:100%;
|
||||
box-shadow:0 24px 48px rgba(0,0,0,.2);
|
||||
position:relative; transform:scale(.95);
|
||||
transition:transform .3s;
|
||||
}
|
||||
.consult-overlay.open .consult-modal { transform:scale(1); }
|
||||
.consult-close {
|
||||
position:absolute; top:12px; right:16px;
|
||||
background:none; border:none;
|
||||
font-size:28px; color:var(--gray-400);
|
||||
cursor:pointer; line-height:1;
|
||||
}
|
||||
.consult-close:hover { color:var(--gray-600); }
|
||||
.consult-modal h3 {
|
||||
font-family:"Noto Serif SC",serif;
|
||||
font-size:22px; font-weight:700; color:var(--navy-900);
|
||||
margin-bottom:6px;
|
||||
}
|
||||
.consult-desc { font-size:14px; color:var(--gray-500); margin-bottom:24px; }
|
||||
.form-group { margin-bottom:16px; }
|
||||
.form-group label {
|
||||
display:block; font-size:13px; font-weight:600;
|
||||
color:var(--navy-800); margin-bottom:6px;
|
||||
}
|
||||
.form-group input,.form-group textarea {
|
||||
width:100%; padding:10px 14px;
|
||||
border:1px solid var(--gray-300); border-radius:8px;
|
||||
font-size:14px; font-family:inherit;
|
||||
transition:border-color .2s;
|
||||
background:#fff;
|
||||
}
|
||||
.form-group input:focus,.form-group textarea:focus {
|
||||
outline:none; border-color:var(--teal-500);
|
||||
box-shadow:0 0 0 3px rgba(6,182,212,.12);
|
||||
}
|
||||
.consult-submit {
|
||||
width:100%; padding:12px; border:none; border-radius:8px;
|
||||
background:linear-gradient(135deg,var(--teal-500),#0891b2);
|
||||
color:#fff; font-size:15px; font-weight:600;
|
||||
cursor:pointer; transition:opacity .2s;
|
||||
}
|
||||
.consult-submit:hover { opacity:.9; }
|
||||
.consult-submit:disabled { opacity:.5; cursor:not-allowed; }
|
||||
.consult-tip { text-align:center; font-size:13px; color:var(--gray-400); margin-top:12px; }
|
||||
.consult-tip strong { color:var(--teal-600); }
|
||||
.consult-success { text-align:center; padding:20px 0; }
|
||||
.consult-success .success-icon {
|
||||
width:56px; height:56px; border-radius:50%;
|
||||
background:#10b981; color:#fff;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
font-size:24px; margin:0 auto 16px;
|
||||
}
|
||||
.consult-success h4 { font-size:18px; color:var(--navy-900); margin-bottom:6px; }
|
||||
.consult-success p { font-size:14px; color:var(--gray-500); }
|
||||
|
||||
/* ===== FLOAT CONSULT ===== */
|
||||
.float-btn {
|
||||
position:fixed; bottom:28px; right:28px; z-index:99;
|
||||
width:56px; height:56px; border-radius:50%;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
text-decoration:none;
|
||||
background:linear-gradient(135deg,var(--teal-500),#0891b2);
|
||||
color:var(--white);
|
||||
box-shadow:0 6px 20px rgba(6,182,212,.35);
|
||||
transition:var(--transition);
|
||||
border:none; cursor:pointer;
|
||||
}
|
||||
.float-btn svg { width:26px; height:26px; }
|
||||
.float-btn:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 28px rgba(6,182,212,.45); }
|
||||
|
||||
/* ===== ANIMATIONS ===== */
|
||||
.fade-in { opacity:0; transform:translateY(30px); transition:all .7s ease-out; }
|
||||
.fade-in.visible { opacity:1; transform:translateY(0); }
|
||||
.fade-in-d1 { transition-delay:.08s; }
|
||||
.fade-in-d2 { transition-delay:.16s; }
|
||||
.fade-in-d3 { transition-delay:.24s; }
|
||||
.fade-in-d4 { transition-delay:.32s; }
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width:768px) {
|
||||
nav { display:none; }
|
||||
nav.open {
|
||||
display:flex; flex-direction:column; position:absolute; top:68px;
|
||||
left:0; right:0; background:rgba(255,255,255,.98);
|
||||
backdrop-filter:blur(16px);
|
||||
padding:16px 24px; border-bottom:1px solid var(--gray-200);
|
||||
gap:16px;
|
||||
}
|
||||
.mobile-toggle { display:flex; }
|
||||
.hero { padding:120px 24px 70px; background-attachment:scroll; }
|
||||
.hero-actions { flex-direction:column; }
|
||||
.btn { width:100%; justify-content:center; }
|
||||
.services-grid { grid-template-columns:1fr; }
|
||||
.contact-grid { grid-template-columns:1fr; }
|
||||
.perspective-grid { grid-template-columns:1fr; }
|
||||
}
|
||||
|
||||
@media (max-width:480px) {
|
||||
.hero h1 { font-size:clamp(28px,8vw,36px); }
|
||||
.logo { font-size:17px; }
|
||||
.logo span { display:none; }
|
||||
}
|
||||
Reference in New Issue
Block a user