/* kevindesign portal — design tokens mirrored from sub2api.kevindesign.uk (Tailwind slate + teal). The :root blocks below are kept byte-identical to spider_tools/css/style.css so that `diff` on the two files lines up and theme drift is detectable. Only --sidebar-w is dropped (no sidebar here) and --content-w / --gutter are appended. */ :root { /* surfaces */ --bg: #020617; /* slate-950 — page */ --sidebar: #0f172a; /* slate-900 */ --card: rgba(30, 41, 59, .5); /* slate-800/50 */ --surface: #1e293b; /* slate-800 — solid inputs/controls */ --surface-hover: #334155; /* slate-700 */ --border: #1e293b; /* slate-800 — sidebar / subtle dividers */ --border-strong: #334155; /* slate-700 — cards, table heads */ --border-input: #475569; /* slate-600 */ /* text */ --text: #f3f4f6; /* gray-100 */ --text-dim: #94a3b8; /* slate-400 */ --text-soft: #cbd5e1; /* slate-300 — nav idle */ --text-faint: #64748b; /* slate-500 — section titles */ /* accent */ --accent: #2dd4bf; /* teal-400 */ --accent-soft: rgba(19, 78, 74, .2); /* teal-900/20 */ --accent-soft-hover: rgba(19, 78, 74, .3); --accent-1: #14b8a6; /* teal-500 — gradient from */ --accent-2: #0d9488; /* teal-600 — gradient to */ --accent-1h: #0d9488; --accent-2h: #0f766e; --ring: rgba(20, 184, 166, .5); /* status */ --danger: #f87171; --danger-soft: rgba(127, 29, 29, .3); --ok: #34d399; --ok-soft: rgba(6, 78, 59, .3); --warn: #fbbf24; --warn-soft: rgba(120, 53, 15, .3); /* card + table + glass surfaces */ --card-border: rgba(51, 65, 85, .5); --card-shadow: none; --th-bg: rgba(30, 41, 59, .5); --th-color: #cbd5e1; --glass: rgba(30, 41, 59, .8); --glass-border: rgba(51, 65, 85, .5); --btn-glow: rgba(20, 184, 166, .2); --row-hover: rgba(30, 41, 59, .3); --hover: #1e293b; /* nav/ghost hover fill */ /* shape */ --r: 12px; /* rounded-xl — links, buttons, inputs */ --r-lg: 16px; /* rounded-2xl — cards */ --r-sm: 8px; --topbar-h: 64px; --mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace; --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* portal-only */ --content-w: 1200px; --gutter: 24px; } :root[data-theme="light"] { --bg: #f9fafb; --sidebar: #ffffff; --card: #ffffff; --surface: #ffffff; --surface-hover: #f3f4f6; --border: #e5e7eb; --border-strong: #e5e7eb; --border-input: #e5e7eb; --text: #111827; --text-dim: #6b7280; --text-soft: #4b5563; --text-faint: #9ca3af; --accent: #0d9488; --accent-soft: #f0fdfa; --accent-soft-hover: #ccfbf1; --danger: #dc2626; --danger-soft: #fee2e2; --ok: #059669; --ok-soft: #d1fae5; --warn: #d97706; --warn-soft: #fef3c7; --card-border: #f3f4f6; --card-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); --th-bg: #f9fafb; --th-color: #6b7280; --glass: rgba(255, 255, 255, .8); --glass-border: rgba(229, 231, 235, .5); --btn-glow: rgba(20, 184, 166, .25); --row-hover: #f9fafb; --hover: #f3f4f6; } /* ---------------- Base ---------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* Ambient mesh wash behind the content (target's .bg-mesh-gradient), same in both themes. Unlike the sidebar layout in kevin-tools there is no opaque panel covering it here, so every direct child of must be lifted above it — see the z-index rule below. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(at 40% 20%, rgba(20, 184, 166, .12) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(6, 182, 212, .08) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(20, 184, 166, .08) 0px, transparent 50%); } body > * { position: relative; z-index: 1; } [id] { scroll-margin-top: 88px; } /* clear the 64px sticky topbar on anchor jumps */ img, svg { display: block; } a { color: inherit; } h1, h2, h3, p, ul, dl, dd { margin: 0; } ul { padding: 0; list-style: none; } .ico { width: 20px; height: 20px; flex: 0 0 20px; } /* The sprite. Kept out of flow via a class rather than a style="" attribute so the page needs no 'unsafe-inline' in style-src. */ .sprite { position: absolute; } .container { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); border-radius: var(--r); } .svc-card:focus-visible { border-color: var(--accent-1); border-radius: var(--r-lg); } /* ---------------- Topbar ---------------- */ /* backdrop-filter creates a stacking context, so the explicit z-index must beat `body > *`. */ .topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid var(--glass-border); } .topbar-inner { display: flex; align-items: center; gap: 16px; height: 100%; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 8px; border-radius: var(--r); margin-left: -8px; } .brand-mark { width: 26px; height: 26px; flex: 0 0 26px; } .brand-name { font-size: 16px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; } .topbar-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--text-soft); white-space: nowrap; transition: all .2s cubic-bezier(.4, 0, .2, 1); } .nav-link:hover { background: var(--hover); color: var(--text); } .icon-btn { background: transparent; border: 1px solid transparent; color: var(--text-dim); width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--r); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .2s cubic-bezier(.4, 0, .2, 1); } .icon-btn:hover { background: var(--hover); color: var(--text); } /* Pure-CSS day/night icon swap — keyed off data-theme so there is no JS icon flash. */ :root[data-theme="dark"] .ico-moon { display: none; } :root[data-theme="light"] .ico-sun { display: none; } #theme-toggle .ico-sun { color: var(--warn); } /* ---------------- Buttons / pills ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--border-input); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all .2s cubic-bezier(0, 0, .2, 1); } .btn:hover { background: var(--surface-hover); border-color: #64748b; } .btn:active { transform: scale(.98); } .btn.primary { background: linear-gradient(to right, var(--accent-1), var(--accent-2)); border-color: transparent; color: #fff; box-shadow: 0 4px 6px -1px var(--btn-glow), 0 2px 4px -2px var(--btn-glow); } .btn.primary:hover { background: linear-gradient(to right, var(--accent-1h), var(--accent-2h)); box-shadow: 0 10px 15px -3px var(--btn-glow), 0 4px 6px -4px var(--btn-glow); } .btn .ico { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .2s cubic-bezier(.4, 0, .2, 1); } .btn:hover .ico { transform: translateX(3px); } .pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 9999px; background: var(--accent-soft); border: 0; color: var(--accent); } .pill.muted { background: var(--hover); color: var(--text-dim); } .pill-row { display: flex; flex-wrap: wrap; gap: 6px; } /* ---------------- Hero ---------------- */ /* Deliberately short: the four service cards are the point of this page, so the hero is sized to leave them above the fold at 1440x900 rather than to fill the viewport. */ .hero { padding: 44px 0 36px; } .hero h1 { font-size: clamp(28px, 5.2vw, 48px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .grad { background: linear-gradient(to right, var(--accent-1), #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } :root[data-theme="light"] .grad { background: linear-gradient(to right, var(--accent-2), #0891b2); -webkit-background-clip: text; background-clip: text; } /* ---------------- Sections ---------------- */ /* NOTE: --text-faint (#64748b) is only 4.23:1 on --bg, which fails WCAG AA for text below 24px. The token stays defined for parity with spider_tools, but every piece of rendered text on this page uses --text-dim (8.6:1 dark / 4.9:1 light) or stronger. */ .section { padding: 0 0 72px; } .section-title { font-size: clamp(20px, 3vw, 28px); font-weight: 600; margin: 0 0 4px; } .section-desc { color: var(--text-dim); margin-bottom: 22px; } /* ---------------- Service cards ---------------- */ .card-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 680px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .card-grid { grid-template-columns: repeat(4, 1fr); } } .svc-card { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); box-shadow: var(--card-shadow); padding: 20px 18px; color: inherit; text-decoration: none; transition: all .3s cubic-bezier(.4, 0, .2, 1); } .svc-card:hover { border-color: var(--accent-1); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(20, 184, 166, .15), 0 4px 6px -4px rgba(0, 0, 0, .2); } .svc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .svc-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; } .svc-head { display: flex; flex-direction: column; gap: 3px; } .svc-name { font-size: 15px; font-weight: 600; } .svc-host { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); word-break: break-all; } .svc-desc { font-size: 13px; color: var(--text-dim); line-height: 1.75; } .svc-go { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; font-weight: 500; } .svc-go .ico { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .2s cubic-bezier(.4, 0, .2, 1); } .svc-card:hover .svc-go .ico { transform: translateX(3px); } /* ---------------- Status indicator ---------------- */ /* Three states only. A failed probe reads "未知", never "离线": a no-cors fetch cannot distinguish a down host from a transient network/CORS quirk, so claiming offline would be an assertion we cannot support. */ .status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); } .status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 9999px; background: currentColor; transition: background-color .3s, box-shadow .3s; } .status[data-state="up"] { color: var(--ok); } .status[data-state="up"] .status-dot { box-shadow: 0 0 0 3px var(--ok-soft); } .status[data-state="unknown"] { color: var(--warn); } .status[data-state="checking"]{ color: var(--text-dim); } .status[data-state="checking"] .status-dot { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ---------------- Detail sections ---------------- */ .detail { padding: 72px 0; border-top: 1px solid var(--border); } .detail-grid { display: grid; gap: 40px; grid-template-columns: 1fr; } @media (min-width: 900px) { .detail-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } /* explicit class rather than :nth-of-type — the detail sections are not the only
s */ .detail.flip .detail-media { order: -1; } } .detail-num { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; } .detail-intro { margin-top: 14px; color: var(--text-dim); line-height: 1.95; max-width: 56ch; } .detail-copy .btn { margin-top: 28px; } .detail-note { margin-top: 12px; font-size: 12px; color: var(--text-dim); } .panel { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); box-shadow: var(--card-shadow); padding: 8px 24px; } .feature-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-soft); line-height: 1.75; } .feature-list li:last-child { border-bottom: 0; } .feature-list .ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent); margin-top: 3px; } .feature-list strong { color: var(--text); font-weight: 600; margin-right: 4px; } /* ---------------- Footer ---------------- */ /* --sidebar is opaque in both themes, so it reads as a solid plate under the mesh. */ .footer { background: var(--sidebar); border-top: 1px solid var(--border); padding: 44px 0 28px; margin-top: 24px; } .footer-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; } .footer-copy { margin-top: 10px; font-size: 12.5px; color: var(--text-dim); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; } .footer-links a { font-size: 13px; color: var(--text-dim); text-decoration: none; transition: color .2s cubic-bezier(.4, 0, .2, 1); } .footer-links a:hover { color: var(--accent); } .footer-note { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); } .footer-note a { color: var(--text-dim); text-decoration: none; } .footer-note a:hover { color: var(--accent); } #status-summary { display: inline-flex; align-items: center; gap: 6px; } /* ---------------- Reveal on scroll ---------------- */ /* Scoped to .js so the content stays visible when scripting is off. */ .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1); } .js .reveal.in { opacity: 1; transform: none; } /* ---------------- Responsive ---------------- */ /* Short desktop viewports (e.g. 1280x720): compress the hero further so all four cards still clear the fold. Keyed on height so tall screens keep the roomier spacing. */ @media (min-width: 1080px) and (max-height: 820px) { .hero { padding: 28px 0 22px; } .hero h1 { font-size: clamp(26px, 3.4vw, 40px); } .section-desc { margin-bottom: 18px; } } @media (max-width: 900px) { .hero { padding: 36px 0 28px; } .detail { padding: 56px 0; } .section { padding-bottom: 56px; } } @media (max-width: 640px) { :root { --gutter: 16px; } .topbar-nav { display: none; } .icon-btn { margin-left: auto; } /* Too narrow for one line. CJK breaks between any two characters, so left alone the teal clause splits mid-phrase ("都在一个域 / 名下"). Making it a block forces the break at the comma instead; it stays a block box, so an absurdly narrow screen can still wrap inside it rather than overflow. */ .hero h1 .grad { display: block; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } /* keep the colour/shadow affordance, drop the lift */ .svc-card:hover { transform: none; } .svc-card:hover .svc-go .ico, .btn:hover .ico { transform: none; } }