优化服务入口页面风格
This commit is contained in:
+73
-28
@@ -4,64 +4,109 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="description" content="sumi.work 服务入口，提供 FRP、Git、Syncthing 与 Gemini 等常用服务导航。" />
|
<meta name="description" content="sumi.work 服务入口，提供 FRP、Git、Syncthing 与 Gemini 等常用服务导航。" />
|
||||||
<meta name="theme-color" content="#161a35" />
|
<meta name="theme-color" content="#f5f8ff" />
|
||||||
<title>sumi.work - 服务入口</title>
|
<title>sumi.work - 服务入口</title>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="shell" aria-labelledby="site-title">
|
<header class="site-header" data-header>
|
||||||
<section class="hero-panel">
|
<a class="brand" href="#" aria-label="sumi.work 首页">
|
||||||
<div class="brand-area">
|
<span class="brand-mark" aria-hidden="true">S</span>
|
||||||
<div class="brand-mark" aria-hidden="true">✦</div>
|
<span>sumi.work</span>
|
||||||
<div>
|
</a>
|
||||||
|
|
||||||
|
<nav class="nav-links" aria-label="主导航">
|
||||||
|
<a href="#services">服务入口</a>
|
||||||
|
<a href="#status">连接状态</a>
|
||||||
|
<a href="https://gemini.google.com/app" target="_blank" rel="noreferrer">Gemini</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero" aria-labelledby="site-title">
|
||||||
|
<div class="hero-copy">
|
||||||
<p class="eyebrow">Private Service Gateway</p>
|
<p class="eyebrow">Private Service Gateway</p>
|
||||||
<h1 id="site-title">sumi.work</h1>
|
<h1 id="site-title">一个更清爽的 sumi.work 服务入口</h1>
|
||||||
</div>
|
<p class="subtitle">
|
||||||
</div>
|
聚合常用内部服务与外部工具，保持入口清晰、状态明确、访问路径简单。
|
||||||
|
|
||||||
<p class="subtitle">服务入口 · HTTPS 已启用</p>
|
|
||||||
|
|
||||||
<div class="status-row" aria-label="服务状态">
|
|
||||||
<span class="status-dot"></span>
|
|
||||||
<strong>安全连接</strong>
|
|
||||||
<span>在线</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="intro">
|
|
||||||
一个简洁的内部服务导航页。常用入口集中展示，减少记忆路径，打开即用。
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="button primary" href="#services">查看服务</a>
|
||||||
|
<a class="button secondary" href="https://gemini.google.com/app" target="_blank" rel="noreferrer">打开 Gemini</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="status-row" id="status" aria-label="服务状态">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
<strong>HTTPS 已启用</strong>
|
||||||
|
<span>安全连接 · 在线</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="hero-visual" aria-label="服务概览">
|
||||||
|
<div class="visual-topbar">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="visual-screen">
|
||||||
|
<div class="screen-heading">
|
||||||
|
<span>Service Console</span>
|
||||||
|
<strong>Online</strong>
|
||||||
|
</div>
|
||||||
|
<div class="screen-grid" aria-hidden="true">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="screen-chart" aria-hidden="true">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="services" aria-label="服务入口">
|
<section class="services-section" id="services" aria-labelledby="services-title">
|
||||||
|
<div class="section-heading">
|
||||||
|
<p class="eyebrow">Quick Access</p>
|
||||||
|
<h2 id="services-title">常用服务</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="services">
|
||||||
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
|
<a class="service-card accent-blue" href="/frp/" aria-label="进入 FRP 面板">
|
||||||
<span class="service-icon">🚀</span>
|
<span class="service-icon">FRP</span>
|
||||||
<span class="service-title">FRP 面板</span>
|
<span class="service-title">FRP 面板</span>
|
||||||
<span class="service-desc">内网穿透管理</span>
|
<span class="service-desc">内网穿透管理</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="service-card accent-coral" href="/git/" aria-label="进入 Git 服务">
|
<a class="service-card accent-green" href="/git/" aria-label="进入 Git 服务">
|
||||||
<span class="service-icon">🧑💻</span>
|
<span class="service-icon">Git</span>
|
||||||
<span class="service-title">Git 服务</span>
|
<span class="service-title">Git 服务</span>
|
||||||
<span class="service-desc">代码仓库</span>
|
<span class="service-desc">代码仓库</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="service-card accent-mint" href="/sync/" aria-label="进入 Syncthing">
|
<a class="service-card accent-orange" href="/sync/" aria-label="进入 Syncthing">
|
||||||
<span class="service-icon">🔄</span>
|
<span class="service-icon">Sync</span>
|
||||||
<span class="service-title">Syncthing</span>
|
<span class="service-title">Syncthing</span>
|
||||||
<span class="service-desc">文件同步</span>
|
<span class="service-desc">文件同步</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="service-card service-card-wide accent-gemini"
|
class="service-card accent-purple"
|
||||||
href="https://gemini.google.com/app"
|
href="https://gemini.google.com/app"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
aria-label="打开 Gemini 外部链接"
|
aria-label="打开 Gemini 外部链接"
|
||||||
>
|
>
|
||||||
<span class="service-icon">✨</span>
|
<span class="service-icon">AI</span>
|
||||||
<span class="service-title">Gemini</span>
|
<span class="service-title">Gemini</span>
|
||||||
<span class="service-desc">Google AI 助手 · 外部链接</span>
|
<span class="service-desc">Google AI 助手 · 外部链接</span>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,15 @@
|
|||||||
const year = document.querySelector("#year");
|
const year = document.querySelector("#year");
|
||||||
|
const header = document.querySelector("[data-header]");
|
||||||
|
|
||||||
if (year) {
|
if (year) {
|
||||||
year.textContent = new Date().getFullYear();
|
year.textContent = new Date().getFullYear();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (header) {
|
||||||
|
const updateHeader = () => {
|
||||||
|
header.classList.toggle("is-scrolled", window.scrollY > 8);
|
||||||
|
};
|
||||||
|
|
||||||
|
updateHeader();
|
||||||
|
window.addEventListener("scroll", updateHeader, { passive: true });
|
||||||
|
}
|
||||||
|
|||||||
+420
-234
@@ -1,19 +1,17 @@
|
|||||||
:root {
|
:root {
|
||||||
color-scheme: dark;
|
color-scheme: light;
|
||||||
--bg-1: #6679e2;
|
--bg: #f5f8ff;
|
||||||
--bg-2: #7856b8;
|
--panel: #ffffff;
|
||||||
--card: rgba(255, 255, 255, 0.16);
|
--panel-soft: #f7faff;
|
||||||
--card-strong: rgba(255, 255, 255, 0.22);
|
--text: #17233d;
|
||||||
--card-line: rgba(255, 255, 255, 0.24);
|
--muted: #63708a;
|
||||||
--text: #ffffff;
|
--line: #e5ebf5;
|
||||||
--muted: rgba(255, 255, 255, 0.74);
|
--blue: #246bfe;
|
||||||
--soft: rgba(255, 255, 255, 0.1);
|
--blue-dark: #1554d1;
|
||||||
--green: #35d69d;
|
--green: #19b982;
|
||||||
--blue: #76c8ff;
|
--orange: #ff8a3d;
|
||||||
--coral: #ff9b83;
|
--purple: #7864f6;
|
||||||
--gold: #ffd35d;
|
--shadow: 0 22px 60px rgba(57, 83, 132, 0.13);
|
||||||
--mint: #7ff0cf;
|
|
||||||
--shadow: 0 32px 90px rgba(32, 27, 81, 0.34);
|
|
||||||
font-family:
|
font-family:
|
||||||
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
"PingFang SC", "Microsoft YaHei", sans-serif;
|
"PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
@@ -25,6 +23,7 @@
|
|||||||
|
|
||||||
html {
|
html {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@@ -33,35 +32,8 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.2), transparent 28rem),
|
radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.13), transparent 24rem),
|
||||||
radial-gradient(circle at 80% 20%, rgba(87, 224, 207, 0.14), transparent 24rem),
|
linear-gradient(180deg, #f7fbff 0%, var(--bg) 52%, #ffffff 100%);
|
||||||
linear-gradient(135deg, var(--bg-1), var(--bg-2));
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
body::before,
|
|
||||||
body::after {
|
|
||||||
position: fixed;
|
|
||||||
z-index: -1;
|
|
||||||
pointer-events: none;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
body::before {
|
|
||||||
inset: 0;
|
|
||||||
background-image:
|
|
||||||
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
|
|
||||||
linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
|
|
||||||
background-size: 58px 58px;
|
|
||||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%);
|
|
||||||
}
|
|
||||||
|
|
||||||
body::after {
|
|
||||||
width: 42rem;
|
|
||||||
height: 42rem;
|
|
||||||
right: -14rem;
|
|
||||||
bottom: -18rem;
|
|
||||||
background: radial-gradient(circle, rgba(255, 210, 105, 0.18), transparent 68%);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -69,251 +41,432 @@ a {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shell {
|
.site-header {
|
||||||
display: grid;
|
position: sticky;
|
||||||
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
|
top: 0;
|
||||||
gap: clamp(22px, 4vw, 42px);
|
z-index: 20;
|
||||||
align-items: stretch;
|
|
||||||
width: min(980px, calc(100% - 40px));
|
|
||||||
min-height: 100svh;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: clamp(34px, 8vh, 110px) 0 92px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-panel,
|
|
||||||
.services {
|
|
||||||
position: relative;
|
|
||||||
border: 1px solid var(--card-line);
|
|
||||||
background:
|
|
||||||
linear-gradient(145deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.1)),
|
|
||||||
var(--card);
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
backdrop-filter: blur(22px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-panel {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 470px;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: clamp(32px, 5vw, 54px);
|
|
||||||
border-radius: 28px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-panel::after {
|
|
||||||
position: absolute;
|
|
||||||
right: -80px;
|
|
||||||
bottom: -100px;
|
|
||||||
width: 260px;
|
|
||||||
height: 260px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.22);
|
|
||||||
border-radius: 999px;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-area {
|
|
||||||
display: flex;
|
|
||||||
gap: 18px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 26px;
|
justify-content: space-between;
|
||||||
|
width: min(1180px, calc(100% - 40px));
|
||||||
|
min-height: 72px;
|
||||||
|
margin: 0 auto;
|
||||||
|
transition:
|
||||||
|
background 180ms ease,
|
||||||
|
border-color 180ms ease,
|
||||||
|
box-shadow 180ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header.is-scrolled {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 max(20px, calc((100% - 1180px) / 2));
|
||||||
|
background: rgba(255, 255, 255, 0.88);
|
||||||
|
border-bottom: 1px solid rgba(229, 235, 245, 0.9);
|
||||||
|
box-shadow: 0 10px 36px rgba(42, 67, 112, 0.08);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand,
|
||||||
|
.nav-links,
|
||||||
|
.hero-actions,
|
||||||
|
.status-row,
|
||||||
|
.record {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
gap: 10px;
|
||||||
|
color: #14233f;
|
||||||
|
font-size: 1.04rem;
|
||||||
|
font-weight: 850;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-mark {
|
.brand-mark {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: 68px;
|
width: 34px;
|
||||||
height: 68px;
|
height: 34px;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
flex: 0 0 auto;
|
color: #fff;
|
||||||
color: #573e91;
|
background: linear-gradient(135deg, var(--blue), #48a8ff);
|
||||||
font-size: 2.2rem;
|
border-radius: 9px;
|
||||||
background: linear-gradient(135deg, #ffe26b, #ffc23f);
|
box-shadow: 0 10px 24px rgba(36, 107, 254, 0.24);
|
||||||
border-radius: 20px;
|
}
|
||||||
box-shadow: 0 18px 38px rgba(255, 198, 63, 0.3);
|
|
||||||
|
.nav-links {
|
||||||
|
gap: 30px;
|
||||||
|
color: #3f4b62;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 650;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
transition: color 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover,
|
||||||
|
.nav-links a:focus-visible {
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero,
|
||||||
|
.services-section,
|
||||||
|
.record {
|
||||||
|
width: min(1180px, calc(100% - 40px));
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
|
||||||
|
gap: clamp(34px, 6vw, 84px);
|
||||||
|
align-items: center;
|
||||||
|
min-height: calc(100svh - 72px);
|
||||||
|
padding: 54px 0 74px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
margin: 0 0 8px;
|
margin: 0 0 12px;
|
||||||
color: rgba(255, 255, 255, 0.68);
|
color: var(--blue);
|
||||||
font-size: 0.76rem;
|
font-size: 0.78rem;
|
||||||
font-weight: 800;
|
font-weight: 850;
|
||||||
letter-spacing: 0.12em;
|
letter-spacing: 0.12em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
max-width: 620px;
|
||||||
font-size: clamp(3.4rem, 8vw, 6rem);
|
margin-bottom: 22px;
|
||||||
line-height: 0.95;
|
font-size: clamp(2.8rem, 6vw, 5.55rem);
|
||||||
|
line-height: 1.03;
|
||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
margin: 0 0 28px;
|
max-width: 580px;
|
||||||
color: rgba(255, 255, 255, 0.84);
|
margin-bottom: 30px;
|
||||||
font-size: clamp(1.08rem, 2.2vw, 1.35rem);
|
color: var(--muted);
|
||||||
font-weight: 700;
|
font-size: clamp(1.06rem, 1.6vw, 1.24rem);
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 14px;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-flex;
|
||||||
|
min-height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 22px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 800;
|
||||||
|
transition:
|
||||||
|
transform 160ms ease,
|
||||||
|
box-shadow 160ms ease,
|
||||||
|
background 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
.button:focus-visible {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary {
|
||||||
|
color: #fff;
|
||||||
|
background: var(--blue);
|
||||||
|
box-shadow: 0 14px 30px rgba(36, 107, 254, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.primary:hover,
|
||||||
|
.button.primary:focus-visible {
|
||||||
|
background: var(--blue-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.secondary {
|
||||||
|
color: var(--blue);
|
||||||
|
background: #fff;
|
||||||
|
border-color: #dbe6ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-row {
|
.status-row {
|
||||||
display: inline-flex;
|
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
align-items: center;
|
|
||||||
gap: 9px;
|
gap: 9px;
|
||||||
margin-bottom: 28px;
|
padding: 10px 14px;
|
||||||
padding: 12px 16px;
|
color: #2f456b;
|
||||||
color: #fff;
|
background: rgba(255, 255, 255, 0.8);
|
||||||
background: rgba(17, 28, 52, 0.22);
|
border: 1px solid #dce7f8;
|
||||||
border: 1px solid rgba(53, 214, 157, 0.72);
|
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
|
box-shadow: 0 12px 32px rgba(57, 83, 132, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-row strong {
|
.status-row strong {
|
||||||
|
color: #143055;
|
||||||
font-weight: 850;
|
font-weight: 850;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-row span:last-child {
|
|
||||||
color: rgba(255, 255, 255, 0.68);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-dot {
|
.status-dot {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: var(--green);
|
background: var(--green);
|
||||||
border-radius: 999px;
|
border-radius: 999px;
|
||||||
box-shadow: 0 0 0 7px rgba(53, 214, 157, 0.14);
|
box-shadow: 0 0 0 6px rgba(25, 185, 130, 0.13);
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro {
|
.hero-visual {
|
||||||
max-width: 34rem;
|
position: relative;
|
||||||
margin: 0;
|
min-height: 460px;
|
||||||
color: var(--muted);
|
padding: 20px;
|
||||||
font-size: 1rem;
|
background:
|
||||||
line-height: 1.8;
|
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 245, 255, 0.72)),
|
||||||
|
#fff;
|
||||||
|
border: 1px solid rgba(222, 232, 248, 0.9);
|
||||||
|
border-radius: 28px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual::before {
|
||||||
|
position: absolute;
|
||||||
|
inset: auto 38px 32px auto;
|
||||||
|
width: 190px;
|
||||||
|
height: 190px;
|
||||||
|
background: linear-gradient(135deg, rgba(36, 107, 254, 0.16), rgba(25, 185, 130, 0.12));
|
||||||
|
border-radius: 999px;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-topbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 8px 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-topbar span {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background: #d5dfef;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-screen {
|
||||||
|
position: relative;
|
||||||
|
min-height: 370px;
|
||||||
|
padding: clamp(22px, 4vw, 34px);
|
||||||
|
overflow: hidden;
|
||||||
|
background:
|
||||||
|
linear-gradient(140deg, #ffffff 0%, #edf5ff 100%);
|
||||||
|
border: 1px solid #e0e9f7;
|
||||||
|
border-radius: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
color: #4e607b;
|
||||||
|
font-weight: 780;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-heading strong {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
max-width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid span {
|
||||||
|
min-height: 92px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e0e9f7;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid span:nth-child(1) {
|
||||||
|
border-top: 4px solid var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid span:nth-child(2) {
|
||||||
|
border-top: 4px solid var(--green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid span:nth-child(3) {
|
||||||
|
border-top: 4px solid var(--orange);
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid span:nth-child(4) {
|
||||||
|
border-top: 4px solid var(--purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart {
|
||||||
|
position: absolute;
|
||||||
|
right: 34px;
|
||||||
|
bottom: 34px;
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
gap: 10px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart i {
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
background: linear-gradient(180deg, #74a5ff, var(--blue));
|
||||||
|
border-radius: 999px 999px 6px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart i:nth-child(1) {
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart i:nth-child(2) {
|
||||||
|
height: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart i:nth-child(3) {
|
||||||
|
height: 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart i:nth-child(4) {
|
||||||
|
height: 92px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-section {
|
||||||
|
padding: 10px 0 86px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: clamp(1.9rem, 3vw, 3rem);
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.services {
|
.services {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
gap: 16px;
|
gap: 18px;
|
||||||
align-content: center;
|
|
||||||
padding: clamp(22px, 3vw, 30px);
|
|
||||||
border-radius: 28px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card {
|
.service-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 168px;
|
min-height: 206px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
padding: 24px;
|
||||||
padding: 22px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: var(--panel);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
border: 1px solid var(--line);
|
||||||
border-radius: 22px;
|
border-radius: 18px;
|
||||||
|
box-shadow: 0 16px 34px rgba(57, 83, 132, 0.08);
|
||||||
transition:
|
transition:
|
||||||
transform 180ms ease,
|
transform 180ms ease,
|
||||||
background 180ms ease,
|
|
||||||
border-color 180ms ease,
|
border-color 180ms ease,
|
||||||
box-shadow 180ms ease;
|
box-shadow 180ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card::before {
|
.service-card::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
right: -34px;
|
||||||
opacity: 0;
|
bottom: -34px;
|
||||||
|
width: 112px;
|
||||||
|
height: 112px;
|
||||||
|
border-radius: 999px;
|
||||||
|
opacity: 0.12;
|
||||||
content: "";
|
content: "";
|
||||||
transition: opacity 180ms ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card:hover,
|
.service-card:hover,
|
||||||
.service-card:focus-visible {
|
.service-card:focus-visible {
|
||||||
transform: translateY(-5px);
|
transform: translateY(-6px);
|
||||||
background: var(--card-strong);
|
border-color: rgba(36, 107, 254, 0.28);
|
||||||
border-color: rgba(255, 255, 255, 0.36);
|
box-shadow: 0 22px 52px rgba(57, 83, 132, 0.16);
|
||||||
box-shadow: 0 20px 44px rgba(32, 27, 81, 0.2);
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card:hover::before,
|
|
||||||
.service-card:focus-visible::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-blue::before {
|
|
||||||
background: linear-gradient(135deg, rgba(118, 200, 255, 0.22), transparent 62%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-coral::before {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 155, 131, 0.24), transparent 62%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-gold::before {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 211, 93, 0.24), transparent 62%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-mint::before {
|
|
||||||
background: linear-gradient(135deg, rgba(127, 240, 207, 0.24), transparent 62%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.accent-gemini::before {
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 18% 20%, rgba(118, 200, 255, 0.3), transparent 28%),
|
|
||||||
radial-gradient(circle at 76% 24%, rgba(255, 155, 131, 0.26), transparent 34%),
|
|
||||||
linear-gradient(135deg, rgba(186, 140, 255, 0.26), transparent 64%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card-wide {
|
|
||||||
min-height: 168px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-card-wide .service-icon {
|
|
||||||
margin-bottom: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon,
|
|
||||||
.service-title,
|
|
||||||
.service-desc {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service-icon {
|
.service-icon {
|
||||||
display: grid;
|
display: inline-flex;
|
||||||
width: 48px;
|
width: fit-content;
|
||||||
height: 48px;
|
min-width: 48px;
|
||||||
place-items: center;
|
min-height: 36px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 12px;
|
||||||
margin-bottom: auto;
|
margin-bottom: auto;
|
||||||
font-size: 1.62rem;
|
border-radius: 10px;
|
||||||
background: rgba(255, 255, 255, 0.13);
|
font-size: 0.82rem;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
font-weight: 900;
|
||||||
border-radius: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-title {
|
.service-title {
|
||||||
margin-top: 26px;
|
margin-top: 42px;
|
||||||
font-size: 1.16rem;
|
color: #14233f;
|
||||||
|
font-size: 1.18rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-desc {
|
.service-desc {
|
||||||
margin-top: 7px;
|
margin-top: 8px;
|
||||||
color: rgba(255, 255, 255, 0.72);
|
color: var(--muted);
|
||||||
font-size: 0.92rem;
|
font-size: 0.94rem;
|
||||||
font-weight: 650;
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-blue .service-icon,
|
||||||
|
.accent-blue::after {
|
||||||
|
color: var(--blue);
|
||||||
|
background: rgba(36, 107, 254, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-green .service-icon,
|
||||||
|
.accent-green::after {
|
||||||
|
color: var(--green);
|
||||||
|
background: rgba(25, 185, 130, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-orange .service-icon,
|
||||||
|
.accent-orange::after {
|
||||||
|
color: var(--orange);
|
||||||
|
background: rgba(255, 138, 61, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent-purple .service-icon,
|
||||||
|
.accent-purple::after {
|
||||||
|
color: var(--purple);
|
||||||
|
background: rgba(120, 100, 246, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.record {
|
.record {
|
||||||
position: fixed;
|
|
||||||
right: 28px;
|
|
||||||
bottom: 22px;
|
|
||||||
left: 28px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
color: rgba(255, 255, 255, 0.58);
|
padding: 24px 0 34px;
|
||||||
font-size: 0.86rem;
|
color: #7a8598;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
border-top: 1px solid var(--line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.record a {
|
.record a {
|
||||||
@@ -322,50 +475,82 @@ h1 {
|
|||||||
|
|
||||||
.record a:hover,
|
.record a:hover,
|
||||||
.record a:focus-visible {
|
.record a:focus-visible {
|
||||||
color: rgba(255, 255, 255, 0.92);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
@media (max-width: 960px) {
|
||||||
.shell {
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
width: min(620px, calc(100% - 28px));
|
|
||||||
padding-top: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-panel {
|
|
||||||
min-height: auto;
|
min-height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
min-height: 390px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 520px) {
|
.services {
|
||||||
.shell {
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
padding-bottom: 110px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-area {
|
@media (max-width: 560px) {
|
||||||
align-items: flex-start;
|
.site-header,
|
||||||
flex-direction: column;
|
.hero,
|
||||||
|
.services-section,
|
||||||
|
.record {
|
||||||
|
width: min(100% - 28px, 1180px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-mark {
|
.site-header {
|
||||||
width: 58px;
|
min-height: 64px;
|
||||||
height: 58px;
|
|
||||||
border-radius: 17px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: clamp(3rem, 16vw, 4.1rem);
|
font-size: clamp(2.55rem, 13vw, 4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row {
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-visual {
|
||||||
|
min-height: auto;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-screen {
|
||||||
|
min-height: 310px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-grid span {
|
||||||
|
min-height: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-chart {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.services {
|
.services {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card {
|
|
||||||
min-height: 132px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.record {
|
.record {
|
||||||
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -376,6 +561,7 @@ h1 {
|
|||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
|
scroll-behavior: auto !important;
|
||||||
transition-duration: 0.01ms !important;
|
transition-duration: 0.01ms !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user