664 lines
24 KiB
HTML
664 lines
24 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-Hant">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Services — Studio Sample</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html { scroll-behavior: smooth; }
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP",
|
||
"Noto Sans TC", system-ui, sans-serif;
|
||
background-color: #ffffff;
|
||
color: #333333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ─── NAV ─────────────────────────────────────────────── */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid #eeeeee;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 clamp(16px, 5vw, 64px);
|
||
height: 56px;
|
||
}
|
||
|
||
.nav-logo {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
color: #e53935;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: clamp(16px, 3vw, 40px);
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #555555;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.nav-links a:hover,
|
||
.nav-links a.active { color: #e53935; }
|
||
|
||
/* ─── PAGE HEADER ─────────────────────────────────────── */
|
||
.page-header {
|
||
padding: clamp(48px, 7vw, 88px) clamp(24px, 8vw, 96px) clamp(32px, 4vw, 48px);
|
||
background: #f7f7f7;
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
|
||
.page-header-eyebrow {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: #e53935;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.page-header-title {
|
||
font-size: clamp(32px, 5vw, 64px);
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
color: #111111;
|
||
line-height: 1.1;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.page-header-lead {
|
||
font-size: clamp(14px, 1.5vw, 17px);
|
||
color: #666666;
|
||
max-width: 38em;
|
||
}
|
||
|
||
/* ─── SECTION COMMON ──────────────────────────────────── */
|
||
section {
|
||
padding: clamp(56px, 8vw, 96px) clamp(24px, 8vw, 96px);
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: #e53935;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: clamp(24px, 3.5vw, 40px);
|
||
font-weight: 800;
|
||
letter-spacing: -0.01em;
|
||
color: #111111;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-lead {
|
||
font-size: clamp(14px, 1.5vw, 17px);
|
||
color: #666666;
|
||
max-width: 42em;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
/* ─── SERVICE BLOCKS ──────────────────────────────────── */
|
||
#services { background: #ffffff; }
|
||
|
||
.service-block {
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr;
|
||
gap: clamp(32px, 6vw, 80px);
|
||
padding: clamp(32px, 4vw, 56px) 0;
|
||
border-top: 1px solid #eeeeee;
|
||
align-items: start;
|
||
}
|
||
|
||
.service-block:first-of-type {
|
||
border-top: 2px solid #e53935;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.service-block { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.service-index {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
color: #e53935;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.service-name {
|
||
font-size: clamp(22px, 2.8vw, 32px);
|
||
font-weight: 800;
|
||
color: #111111;
|
||
letter-spacing: -0.01em;
|
||
margin: 12px 0 0;
|
||
}
|
||
|
||
.service-detail h4 {
|
||
font-size: clamp(14px, 1.4vw, 16px);
|
||
font-weight: 700;
|
||
color: #111111;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.service-detail p {
|
||
font-size: clamp(13px, 1.3vw, 15px);
|
||
color: #666666;
|
||
line-height: 1.8;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.deliverables {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.deliverables li {
|
||
font-size: 13px;
|
||
color: #444444;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.deliverables li::before {
|
||
content: "—";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #e53935;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.service-note {
|
||
font-size: 12px;
|
||
color: #aaaaaa;
|
||
border-left: 2px solid #eeeeee;
|
||
padding-left: 12px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ─── PRICING ─────────────────────────────────────────── */
|
||
#pricing { background: #f7f7f7; }
|
||
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 2px;
|
||
background: #e0e0e0;
|
||
border: 2px solid #e0e0e0;
|
||
}
|
||
|
||
.pricing-card {
|
||
background: #ffffff;
|
||
padding: clamp(28px, 3.5vw, 44px) clamp(24px, 2.5vw, 36px);
|
||
}
|
||
|
||
.pricing-card.highlighted {
|
||
background: #111111;
|
||
}
|
||
|
||
.pricing-tier {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
color: #e53935;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.pricing-price {
|
||
font-size: clamp(28px, 3.5vw, 40px);
|
||
font-weight: 900;
|
||
color: #111111;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.pricing-card.highlighted .pricing-price {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.pricing-unit {
|
||
font-size: 13px;
|
||
color: #aaaaaa;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.pricing-desc {
|
||
font-size: clamp(13px, 1.3vw, 14px);
|
||
color: #666666;
|
||
line-height: 1.7;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.pricing-card.highlighted .pricing-desc {
|
||
color: #999999;
|
||
}
|
||
|
||
.pricing-features {
|
||
list-style: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.pricing-features li {
|
||
font-size: 13px;
|
||
color: #444444;
|
||
padding-left: 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.pricing-card.highlighted .pricing-features li {
|
||
color: #aaaaaa;
|
||
}
|
||
|
||
.pricing-features li::before {
|
||
content: "✓";
|
||
position: absolute;
|
||
left: 0;
|
||
color: #e53935;
|
||
font-weight: 700;
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* ─── FAQ ─────────────────────────────────────────────── */
|
||
#faq { background: #ffffff; }
|
||
|
||
.faq-list {
|
||
max-width: 720px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
}
|
||
|
||
.faq-item {
|
||
border-top: 1px solid #eeeeee;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.faq-item:last-child {
|
||
border-bottom: 1px solid #eeeeee;
|
||
}
|
||
|
||
.faq-q {
|
||
font-size: clamp(15px, 1.5vw, 17px);
|
||
font-weight: 700;
|
||
color: #111111;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.faq-a {
|
||
font-size: clamp(13px, 1.3vw, 15px);
|
||
color: #666666;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
/* ─── BTN ─────────────────────────────────────────────── */
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 14px 32px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
border: 2px solid #e53935;
|
||
transition: background 0.2s, color 0.2s;
|
||
}
|
||
|
||
.btn-primary { background: #e53935; color: #ffffff; }
|
||
.btn-primary:hover { background: #c62828; border-color: #c62828; }
|
||
|
||
/* ─── CTA STRIP ───────────────────────────────────────── */
|
||
.cta-strip {
|
||
background: #e53935;
|
||
padding: clamp(40px, 6vw, 72px) clamp(24px, 8vw, 96px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.cta-strip-text h2 {
|
||
font-size: clamp(22px, 3vw, 36px);
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
letter-spacing: -0.01em;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.cta-strip-text p {
|
||
font-size: clamp(13px, 1.3vw, 15px);
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
|
||
.btn-white {
|
||
background: #ffffff;
|
||
color: #e53935;
|
||
border-color: #ffffff;
|
||
}
|
||
|
||
.btn-white:hover {
|
||
background: #f5f5f5;
|
||
border-color: #f5f5f5;
|
||
}
|
||
|
||
/* ─── FOOTER ──────────────────────────────────────────── */
|
||
footer {
|
||
background: #111111;
|
||
padding: 32px clamp(24px, 8vw, 96px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
|
||
.footer-logo {
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.12em;
|
||
color: #e53935;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.footer-nav {
|
||
display: flex;
|
||
gap: clamp(16px, 3vw, 32px);
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-nav a {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #555555;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.footer-nav a:hover { color: #e53935; }
|
||
|
||
.footer-copy {
|
||
font-size: 12px;
|
||
color: #555555;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─── NAV ─────────────────────────────────────────────── -->
|
||
<nav>
|
||
<a class="nav-logo" href="index.html">Studio Sample</a>
|
||
<ul class="nav-links">
|
||
<li><a href="services.html" class="active">Services</a></li>
|
||
<li><a href="works.html">Works</a></li>
|
||
<li><a href="timeline.html">Timeline</a></li>
|
||
<li><a href="index.html#about">About</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- ─── PAGE HEADER ───────────────────────────────────────── -->
|
||
<header class="page-header">
|
||
<p class="page-header-eyebrow">What We Offer</p>
|
||
<h1 class="page-header-title">Design that<br>earns its keep.</h1>
|
||
<p class="page-header-lead">
|
||
我們提供三種核心服務：品牌識別、網頁設計開發、印刷編輯。每一種都交付完整、可用的成果。<br>
|
||
Three disciplines. One standard: finished work that actually works.
|
||
</p>
|
||
</header>
|
||
|
||
<!-- ─── SERVICES ──────────────────────────────────────────── -->
|
||
<section id="services">
|
||
<p class="section-label">Core Services</p>
|
||
<h2 class="section-title">What we do,<br>and how.</h2>
|
||
<p class="section-lead">以下是我們目前承接的三類專案，以及每類的交付內容說明。</p>
|
||
|
||
<!-- Branding -->
|
||
<div class="service-block">
|
||
<div>
|
||
<p class="service-index">01 / Branding</p>
|
||
<h3 class="service-name">Brand Identity</h3>
|
||
</div>
|
||
<div class="service-detail">
|
||
<h4>適合對象</h4>
|
||
<p>新創公司、品牌再造、個人品牌。需要從零打造或徹底重塑視覺識別系統的客戶。</p>
|
||
|
||
<h4>交付內容</h4>
|
||
<ul class="deliverables">
|
||
<li>Logo 系統（主標、副標、最小應用版本）</li>
|
||
<li>色彩規範（主色、輔色、中性色）</li>
|
||
<li>字型規範（標題字、內文字、使用方式）</li>
|
||
<li>品牌指引手冊（PDF，可印刷格式）</li>
|
||
<li>基礎應用範例（名片、信頭、社群封面）</li>
|
||
<li>所有原始檔（AI / SVG / PDF）</li>
|
||
</ul>
|
||
|
||
<p class="service-note">
|
||
品牌識別專案通常需要 4–8 週。我們會在概念階段提出 2–3 個方向，與你確認後進入精製。
|
||
不接「只改 Logo 顏色」的案子——那不叫品牌設計。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Web -->
|
||
<div class="service-block">
|
||
<div>
|
||
<p class="service-index">02 / Web</p>
|
||
<h3 class="service-name">Web Design<br>& Build</h3>
|
||
</div>
|
||
<div class="service-detail">
|
||
<h4>適合對象</h4>
|
||
<p>
|
||
需要高品質、快速、易維護靜態網站的客戶。作品集、企業形象、活動宣傳頁、登陸頁。
|
||
不承接需要後端或 CMS 的動態網站。
|
||
</p>
|
||
|
||
<h4>交付內容</h4>
|
||
<ul class="deliverables">
|
||
<li>線框圖與視覺稿（Figma）</li>
|
||
<li>響應式 HTML/CSS 實作（無框架依賴）</li>
|
||
<li>SEO 基礎設定（meta、OG tags、語意化標籤）</li>
|
||
<li>效能優化（Lighthouse 分數 95+）</li>
|
||
<li>部署協助（GitHub Pages / Netlify / Vercel）</li>
|
||
<li>30 天上線後支援</li>
|
||
</ul>
|
||
|
||
<p class="service-note">
|
||
我們故意不用框架。這讓交出來的程式碼你或你的工程師都讀得懂、改得動。
|
||
你不會在六個月後因為套件版本問題無法更新網站。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Print -->
|
||
<div class="service-block">
|
||
<div>
|
||
<p class="service-index">03 / Print</p>
|
||
<h3 class="service-name">Print &<br>Editorial</h3>
|
||
</div>
|
||
<div class="service-detail">
|
||
<h4>適合對象</h4>
|
||
<p>
|
||
需要高品質印刷品的客戶：年報、產品型錄、書籍、雜誌、說明書、包裝、名片與其他印刷品。
|
||
</p>
|
||
|
||
<h4>交付內容</h4>
|
||
<ul class="deliverables">
|
||
<li>版型設計（網格系統、字型層級）</li>
|
||
<li>印前檔案（PDF/X-1a 或依印刷廠規格）</li>
|
||
<li>色彩校正（CMYK 轉換、Pantone 對應）</li>
|
||
<li>封面設計（如適用）</li>
|
||
<li>印刷廠溝通協助</li>
|
||
</ul>
|
||
|
||
<p class="service-note">
|
||
如有大量圖片需要修圖或色彩管理，請在詢價時告知。
|
||
我們與東京、大阪數家印刷廠有長期合作關係，可協助推薦適合的印刷廠與規格。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── PRICING ────────────────────────────────────────────── -->
|
||
<section id="pricing">
|
||
<p class="section-label">Investment</p>
|
||
<h2 class="section-title">Simple pricing.<br>No surprises.</h2>
|
||
<p class="section-lead">
|
||
以下為起始報價參考。實際費用依專案範圍而定，詳細金額在需求確認後提供正式估價。
|
||
</p>
|
||
<div class="pricing-grid">
|
||
<div class="pricing-card">
|
||
<p class="pricing-tier">Starter</p>
|
||
<p class="pricing-price">¥150K</p>
|
||
<p class="pricing-unit">起 / 專案</p>
|
||
<p class="pricing-desc">
|
||
單一服務的基礎版本。適合範圍明確、時程緊湊的小型專案。
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>單一服務（品牌 / 網頁 / 印刷，擇一）</li>
|
||
<li>2 輪修改回合</li>
|
||
<li>完整原始檔交付</li>
|
||
<li>2 週交付（視範圍）</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-card highlighted">
|
||
<p class="pricing-tier">Studio</p>
|
||
<p class="pricing-price">¥380K</p>
|
||
<p class="pricing-unit">起 / 專案</p>
|
||
<p class="pricing-desc">
|
||
最受歡迎的方案。品牌識別加上對應的線下或線上應用，完整落地。
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>品牌識別 + 一項應用（網頁或印刷）</li>
|
||
<li>3 輪修改回合</li>
|
||
<li>完整原始檔 + 品牌指引</li>
|
||
<li>專案週期 6–10 週</li>
|
||
<li>上線後 30 天支援</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-card">
|
||
<p class="pricing-tier">Full Brand</p>
|
||
<p class="pricing-price">Custom</p>
|
||
<p class="pricing-unit">依需求報價</p>
|
||
<p class="pricing-desc">
|
||
全方位品牌建立，涵蓋識別系統、網站與印刷品，適合品牌重塑或完整新創。
|
||
</p>
|
||
<ul class="pricing-features">
|
||
<li>品牌識別 + 網頁 + 印刷品</li>
|
||
<li>無限修改（合理範圍內）</li>
|
||
<li>優先排程</li>
|
||
<li>長期維護方案可選</li>
|
||
<li>專屬聯絡窗口</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── FAQ ───────────────────────────────────────────────── -->
|
||
<section id="faq">
|
||
<p class="section-label">FAQ</p>
|
||
<h2 class="section-title">常見問題</h2>
|
||
<p class="section-lead">還有其他疑問，歡迎直接聯繫我們。</p>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<p class="faq-q">你們接受海外客戶嗎？</p>
|
||
<p class="faq-a">
|
||
接受。我們是 Remote-first 工作室，目前服務的客戶遍及日本、台灣、歐洲。
|
||
溝通以英文、日文或中文（繁體）進行均可。付款支援電匯與 Stripe。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">交付時間大概多久？</p>
|
||
<p class="faq-a">
|
||
Starter 方案約 2–3 週，Studio 方案約 6–10 週，Full Brand 依範圍另議。
|
||
以上為一般情況，若有截止日期需求請在詢價時告知，我們會據實評估是否可行。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">修改次數如何計算？</p>
|
||
<p class="faq-a">
|
||
每輪修改意指：你看過稿件後彙整所有意見，我們一次性回應修改。
|
||
每輪不限條數，但請確保同一輪的意見一起提出，而非分批零散傳送。
|
||
超出回合數的修改依時間計費（¥12,000 / 小時）。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">付款方式與時程？</p>
|
||
<p class="faq-a">
|
||
標準付款方式：開工前支付 50%，交付完稿後支付剩餘 50%。
|
||
大型專案（¥500K 以上）可協商分三期付款。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">原始檔版權歸誰？</p>
|
||
<p class="faq-a">
|
||
款項全額結清後，所有交付物的著作財產權移轉給客戶。
|
||
我們保留在作品集中展示的權利，如有保密需求請提前告知，我們可簽署 NDA。
|
||
</p>
|
||
</div>
|
||
<div class="faq-item">
|
||
<p class="faq-q">你們現在有空檔嗎？</p>
|
||
<p class="faq-a">
|
||
我們每次只承接少量專案，以確保每個案子都得到足夠的注意力。
|
||
目前的排期狀況請透過聯絡表單詢問，我們會如實告知最早可開始的時間。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── CTA STRIP ──────────────────────────────────────────── -->
|
||
<div class="cta-strip">
|
||
<div class="cta-strip-text">
|
||
<h2>準備好開始了嗎？</h2>
|
||
<p>填寫聯絡表單，告訴我們你的專案。通常兩個工作天內回覆。</p>
|
||
</div>
|
||
<a class="btn btn-white" href="index.html#contact">Contact Us</a>
|
||
</div>
|
||
|
||
<!-- ─── FOOTER ────────────────────────────────────────────── -->
|
||
<footer>
|
||
<div class="footer-logo">Studio Sample</div>
|
||
<ul class="footer-nav">
|
||
<li><a href="services.html">Services</a></li>
|
||
<li><a href="works.html">Works</a></li>
|
||
<li><a href="index.html#about">About</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
</ul>
|
||
<div class="footer-copy">© 2026 Studio Sample. All rights reserved.</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|