/* ============================================================ gridcore.css — 叡璟 The Sterling「Gridcore」Skin ------------------------------------------------------------ 用法：site.json project.skin（或頂層 skin）= "gridcore" → base.html 會喺 themes.css 之後自動載入本檔，並於 加 data-skin="gridcore"。 所有規則一律 html[data-skin="gridcore"] 開頭 → 保證覆蓋、 唔影響其他冇用 skin 嘅網站（site.example.json demo 唔會載入）。 設計語言：Gridcore（motionsites.ai 工具/SaaS 式） - 淺中性底 #F5F5F3、白卡、平面編輯感；冇 cream、冇 navy hero - 強烈 GRID 節奏：卡片網格以 1px 髮絲線 (#E3E1DC) 分隔， section 之間 1px 髮絲分隔；hero/gate 有 ~80px 藍圖格線 背景（repeating-linear-gradient，~4% 透明度） - 黑白 1.5px stroke 線條圖示（build.js GRID_ICONS → inline SVG） - 深炭黑 #1C1C1A 主按鈕；金 #C9A96E 只做 tiny accent （eyebrow/underline/rule/hover/小 marker），唔做按鈕底 - 全 sans（Noto Sans HK）；冇 serif display 字 - Footer 先用深 navy #1A2332（全站唯一 navy 主場） ============================================================ */ /* ---------- 1. 調色盤 / 字型變數（覆蓋 themes.css） ---------- */ html[data-skin="gridcore"] { --bg: #F5F5F3; /* 淺中性底（非 cream） */ --bg-soft: #EFEFEC; /* 深一級灰 band */ --surface: #FFFFFF; /* 白卡 */ --text: #1C1C1A; /* 深炭黑文字 */ --ink: #161613; /* 標題深一級 */ --muted: #6E6E66; /* 次要灰 */ --gold: #C9A96E; /* 品牌金（只做 accent） */ --gold-deep: #A98B4F; /* 金 hover／eyebrow */ --grid-line: rgba(28, 28, 26, 0.045); /* 藍圖格線色 */ --navy: #1A2332; /* footer 專用深 navy */ --border: #E3E1DC; /* 髮絲 border */ --border-strong: #D4D1C9; --radius: 4px; /* 細圓角 */ --shadow-flat: none; /* forge 變數重新對應 */ --primary: var(--text); --accent: var(--gold); --on-accent: #FFFFFF; --hero-bg: var(--bg); --hero-text: var(--text); --footer-bg: var(--navy); --footer-brand: var(--gold); --footer-muted: rgba(235, 231, 224, 0.62); --font: "Noto Sans HK", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif; --font-display: "Noto Sans HK", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; } /* ---------- 2. 基礎排版（全 sans、小字、疏行） ---------- */ html[data-skin="gridcore"] body { background: var(--bg); color: var(--text); font-size: 15.5px; line-height: 1.75; } html[data-skin="gridcore"] ::selection { background: rgba(201, 169, 110, 0.3); } html[data-skin="gridcore"] a { color: var(--text); } /* 全面取消 serif display：hero / section / cta / gate 標題一律 sans */ html[data-skin="gridcore"] .hero-title, html[data-skin="gridcore"] .section-title, html[data-skin="gridcore"] .cta-heading, html[data-skin="gridcore"] .gate-title, html[data-skin="gridcore"] h1, html[data-skin="gridcore"] h2, html[data-skin="gridcore"] h3, html[data-skin="gridcore"] h4 { font-family: var(--font-display); } html[data-skin="gridcore"] h1, html[data-skin="gridcore"] h2, html[data-skin="gridcore"] h3, html[data-skin="gridcore"] h4 { color: var(--ink); letter-spacing: 0.01em; } html[data-skin="gridcore"] .container { max-width: 1160px; } /* Section 節奏：中等留白 + 底部髮絲分隔（section 之間 hairline） */ html[data-skin="gridcore"] .section { padding: 74px 0; border-bottom: 1px solid #ECEAE5; } html[data-skin="gridcore"] .section-head { margin-bottom: 46px; } html[data-skin="gridcore"] .section-head .section-title { font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -0.01em; } /* 標題下 1px 金 rule（eyebrow underline/rule — 金只做呢類 accent） */ html[data-skin="gridcore"] .section-head .section-title::after { content: ""; display: block; width: 40px; height: 1px; margin: 0.6em auto 0; background: var(--gold); } html[data-skin="gridcore"] .section-sub { color: var(--muted); font-size: 0.98rem; max-width: 700px; margin-inline: auto; } html[data-skin="gridcore"] .eyebrow { display: inline-block; margin: 0 0 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); } /* ---------- 3. 藍圖格線背景（hero / gate / sub-hero，80px pitch ~4.5%） ---------- */ html[data-skin="gridcore"] .hero, html[data-skin="gridcore"] .gate, html[data-skin="gridcore"] .hero.sub { background-image: repeating-linear-gradient(0deg, transparent 0 79px, var(--grid-line) 79px 80px), repeating-linear-gradient(90deg, transparent 0 79px, var(--grid-line) 79px 80px), linear-gradient(180deg, var(--bg) 0%, #F1F1EE 100%); background-color: var(--bg); } /* ---------- 4. 按鈕（深炭黑主按鈕；ghost 幼框） ---------- */ html[data-skin="gridcore"] .btn { border-radius: 2px; padding: 12px 28px; font-weight: 600; letter-spacing: 0.04em; box-shadow: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } html[data-skin="gridcore"] .btn-primary, html[data-skin="gridcore"] .btn-accent { background: var(--text); color: #FFFFFF; border: 1px solid var(--text); } html[data-skin="gridcore"] .btn-primary:hover, html[data-skin="gridcore"] .btn-accent:hover { background: #000000; border-color: #000000; filter: none; transform: none; } html[data-skin="gridcore"] .btn-ghost { background: transparent; color: var(--text); border: 1px solid #1C1C1A; } html[data-skin="gridcore"] .btn-ghost:hover { background: var(--text); color: #FFFFFF; border-color: var(--text); opacity: 1; } /* hero 之上按鈕同主色（forge 預設改用 accent，要還原） */ html[data-skin="gridcore"] .hero .btn-primary { background: var(--text); color: #FFFFFF; border: 1px solid var(--text); } /* ---------- 5. Navbar（極簡：幼底邊、logo 自然高度、黑字） ---------- */ html[data-skin="gridcore"] .navbar { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } html[data-skin="gridcore"] .nav-inner { min-height: 66px; } html[data-skin="gridcore"] .brand { color: var(--ink); font-weight: 800; } html[data-skin="gridcore"] .brand::before { display: none; } html[data-skin="gridcore"] .brand-logo { height: auto; width: auto; max-height: 44px; max-width: 240px; object-fit: contain; } html[data-skin="gridcore"] .nav-link { color: #3C3C37; font-weight: 500; font-size: 0.95rem; padding: 8px 15px; border-radius: 0; letter-spacing: 0.02em; } html[data-skin="gridcore"] .nav-link:hover { color: var(--text); background: transparent; } html[data-skin="gridcore"] .nav-link.active { color: #000000; font-weight: 700; background: transparent; box-shadow: inset 0 -2px 0 var(--gold); } html[data-skin="gridcore"] .nav-toggle { border-color: var(--border); border-radius: 2px; background: transparent; } html[data-skin="gridcore"] .nav-toggle-bar { background: var(--text); } /* ---------- 6. Hero（首頁 split：左字右相框；子頁矮 band） ---------- */ html[data-skin="gridcore"] .hero { color: var(--text); border-bottom: 1px solid var(--border); } html[data-skin="gridcore"] .hero[style*="background-image"]::after { display: none; /* 唔用深色遮罩 */ } html[data-skin="gridcore"] .hero .eyebrow { color: var(--gold-deep); } html[data-skin="gridcore"] .hero-title { color: var(--ink); font-weight: 900; letter-spacing: -0.01em; } html[data-skin="gridcore"] .hero-sub { color: #55554E; font-size: 1.04rem; } /* 6a. 首頁 split hero：兩欄、左對齊、相框右欄 */ html[data-skin="gridcore"] .hero.split { padding: 88px 0 96px; } html[data-skin="gridcore"] .hero.split .hero-inner { max-width: 1160px; margin-inline: auto; text-align: left; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: clamp(32px, 4.5vw, 64px); } html[data-skin="gridcore"] .hero.split .hero-copy { max-width: 600px; } html[data-skin="gridcore"] .hero.split .hero-title { font-size: clamp(2.5rem, 4.8vw, 3.6rem); line-height: 1.12; margin-bottom: 0.4em; } html[data-skin="gridcore"] .hero.split .hero-sub { font-size: 1.06rem; line-height: 1.95; max-width: 540px; margin-bottom: 1.7em; } html[data-skin="gridcore"] .hero.split .hero-actions { justify-content: flex-start; } /* 6b. Hero 相框：平面白框（1px border + 微 padding），唔係圓角 blob */ html[data-skin="gridcore"] .hero-frame { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--border); padding: 10px; } html[data-skin="gridcore"] .hero-frame::before { /* 外層 offset 框（warm skin 用）取消 */ display: none; } html[data-skin="gridcore"] .hero-frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; } html[data-skin="gridcore"] .hero-frame figcaption { margin: 0; padding: 10px 2px 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); } /* 6c. 子頁 hero：矮 band、中置、下幼邊 */ html[data-skin="gridcore"] .hero.sub { padding: 64px 0 58px; border-bottom: 1px solid var(--border); } html[data-skin="gridcore"] .hero.sub .hero-inner { max-width: 860px; text-align: center; } html[data-skin="gridcore"] .hero.sub .hero-title { font-size: clamp(2rem, 3.8vw, 2.7rem); line-height: 1.2; font-weight: 900; } html[data-skin="gridcore"] .hero.sub .hero-sub { margin-inline: auto; max-width: 640px; } html[data-skin="gridcore"] .hero.sub .hero-actions { justify-content: center; } /* ---------- 7. 特色卡網格（1px 髮絲分隔嘅「bordered grid」） ---------- */ html[data-skin="gridcore"] .features-grid { gap: 1px; background: var(--border); /* 卡之間露出 = 髮絲線 */ border: 1px solid var(--border); } html[data-skin="gridcore"] .feature-card { background: var(--surface); border: 0; border-radius: 0; padding: 30px 28px; margin: 0; box-shadow: none; transition: background 0.15s ease; } html[data-skin="gridcore"] .feature-card:hover { background: #F9F8F6; transform: none; box-shadow: none; } /* 線條圖示：白底黑 stroke 1.5px，冇彩色 chip、冇框 */ html[data-skin="gridcore"] .feature-icon { display: block; width: auto; height: auto; margin: 0 0 18px; background: none; border: 0; border-radius: 0; color: var(--text); } html[data-skin="gridcore"] .feature-icon svg { width: 30px; height: 30px; display: block; } html[data-skin="gridcore"] .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } html[data-skin="gridcore"] .card-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 0.35em; letter-spacing: 0; } html[data-skin="gridcore"] .card-text { color: var(--muted); font-size: 0.94rem; line-height: 1.85; margin-bottom: 0; } html[data-skin="gridcore"] .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--text); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.06em; border-bottom: 1px solid transparent; } html[data-skin="gridcore"] .card-link::after { content: "→"; color: var(--gold-deep); transition: transform 0.15s ease; } html[data-skin="gridcore"] .card-link:hover { color: var(--gold-deep); border-bottom-color: var(--gold); } html[data-skin="gridcore"] .card-link:hover::after { transform: translateX(3px); } /* ---------- 8. 表格（平面髮絲表格：白底、hairline rows） ---------- */ html[data-skin="gridcore"] .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } html[data-skin="gridcore"] .data-table { font-size: 0.95rem; min-width: 0; } html[data-skin="gridcore"] .data-table th, html[data-skin="gridcore"] .data-table td { padding: 15px 20px; white-space: normal; border-bottom: 1px solid var(--border); vertical-align: top; } html[data-skin="gridcore"] .data-table thead th { background: #FAFAF8; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 1px solid var(--border-strong); } html[data-skin="gridcore"] .data-table tbody tr:last-child td { border-bottom: 0; } html[data-skin="gridcore"] .data-table tbody tr:nth-child(even), html[data-skin="gridcore"] .data-table tbody tr:nth-child(odd) { background: transparent; /* 冇斑馬紋 */ } html[data-skin="gridcore"] .data-table tbody tr:hover { background: #F7F6F3; } html[data-skin="gridcore"] .data-table td { color: var(--text); } /* 兩欄事實表：label 欄半粗 */ html[data-skin="gridcore"] .data-table td:first-child { font-weight: 600; color: var(--ink); } /* ---------- 9. Doc list（平面髮絲清單） ---------- */ html[data-skin="gridcore"] .doc-list { max-width: 900px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } html[data-skin="gridcore"] .doc-item { padding: 15px 22px; border-bottom: 1px solid var(--border); gap: 20px; } html[data-skin="gridcore"] .doc-item:hover { background: #F7F6F3; } html[data-skin="gridcore"] .doc-date { background: transparent; color: var(--gold-deep); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; padding: 2px 12px; } html[data-skin="gridcore"] .doc-link { color: var(--ink); font-weight: 600; font-size: 0.96rem; } html[data-skin="gridcore"] .doc-link::after { content: "↗"; color: var(--gold-deep); font-size: 0.9em; } html[data-skin="gridcore"] .doc-link:hover { color: var(--gold-deep); } /* ---------- 10. 長文內容 ---------- */ html[data-skin="gridcore"] .text-body { max-width: 820px; margin-inline: auto; } html[data-skin="gridcore"] .text-body p { color: #3E3E38; font-size: 1.01rem; line-height: 2; margin-bottom: 1.25em; } html[data-skin="gridcore"] .text-body strong, html[data-skin="gridcore"] .text-body .text-lead { color: var(--ink); font-weight: 700; } /* ---------- 11. 預約表格（平面白卡 + 幼邊輸入） ---------- */ html[data-skin="gridcore"] .booking-card { max-width: 800px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; padding: 40px 46px; } html[data-skin="gridcore"] .form-field input, html[data-skin="gridcore"] .form-field select, html[data-skin="gridcore"] .form-field textarea { background: #FFFFFF; border: 1px solid var(--border-strong); border-radius: 2px; padding: 11px 13px; color: var(--ink); font-size: 0.95rem; } html[data-skin="gridcore"] .form-field input:focus, html[data-skin="gridcore"] .form-field select:focus, html[data-skin="gridcore"] .form-field textarea:focus { outline: none; border-color: #1C1C1A; box-shadow: none; } html[data-skin="gridcore"] .booking-submit { min-width: 190px; } /* 第二按鈕做 ghost（避免兩粒實心一齊） */ html[data-skin="gridcore"] .booking-wa { background: transparent !important; color: var(--text) !important; border: 1px solid var(--text) !important; } html[data-skin="gridcore"] .booking-wa:hover { background: var(--text) !important; color: #FFFFFF !important; } html[data-skin="gridcore"] .booking-note { color: var(--muted); font-size: 0.82rem; } html[data-skin="gridcore"] .booking-success-icon { background: var(--text); color: #FFFFFF; border-radius: 0; } /* ---------- 12. 聯絡卡（髮絲 grid + 單色線條圖示） ---------- */ html[data-skin="gridcore"] .contact-grid { gap: 1px; background: var(--border); border: 1px solid var(--border); } html[data-skin="gridcore"] .contact-card { background: var(--surface); border: 0; border-radius: 0; text-align: center; padding: 34px 26px; } /* 三張聯絡卡原本用 emoji（☎ ⌖ 🕘）——隱藏並以 monochrome line SVG (data-uri, stroke #1C1C1A 1.5px) 取代 */ html[data-skin="gridcore"] .contact-card .feature-icon { width: 34px; height: 34px; margin: 0 auto 16px; font-size: 0; background: center / contain no-repeat; } html[data-skin="gridcore"] .contact-card:nth-child(1) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231C1C1A'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E"); } html[data-skin="gridcore"] .contact-card:nth-child(2) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231C1C1A'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2010c0%207-9%2013-9%2013s-9-6-9-13a9%209%200%200%201%2018%200z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='3'/%3E%3C/svg%3E"); } html[data-skin="gridcore"] .contact-card:nth-child(3) .feature-icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%231C1C1A'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3.2%202'/%3E%3C/svg%3E"); } html[data-skin="gridcore"] .contact-card .contact-main { color: var(--ink); font-size: 1rem; font-weight: 600; } html[data-skin="gridcore"] .contact-card .contact-note { color: var(--muted); font-size: 0.86rem; line-height: 1.8; } html[data-skin="gridcore"] .contact-wa-link { color: var(--ink); border-bottom: 1px dotted var(--gold-deep); } html[data-skin="gridcore"] .contact-wa-link:hover { color: var(--gold-deep); } /* ---------- 13. CTA band（灰 band + 上下髮絲；深炭黑按鈕） ---------- */ html[data-skin="gridcore"] .cta-band { background: #EDECE8; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; } html[data-skin="gridcore"] .cta-inner { background: none; border: 0; border-radius: 0; color: var(--text); padding: 46px 24px; } html[data-skin="gridcore"] .cta-heading { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; color: var(--ink); margin-bottom: 0.2em; } html[data-skin="gridcore"] .cta-text { color: #55554E; opacity: 1; max-width: 640px; } html[data-skin="gridcore"] .cta-btn { flex: none; } /* ---------- 14. Footer（深 navy：全站唯一 navy 主場） ---------- */ html[data-skin="gridcore"] .footer { background: linear-gradient(180deg, #1E2A3D 0%, var(--navy) 60%); border-top: 1px solid rgba(201, 169, 110, 0.45); padding: 56px 0 40px; margin-top: 0; } html[data-skin="gridcore"] .footer-top { margin-bottom: 30px; } html[data-skin="gridcore"] .footer .brand { color: var(--gold); font-weight: 800; letter-spacing: 0.2em; font-family: var(--font); } html[data-skin="gridcore"] .footer-tagline { color: rgba(235, 231, 224, 0.78); font-size: 0.92rem; } html[data-skin="gridcore"] .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(201, 169, 110, 0.25); } html[data-skin="gridcore"] .footer-copy, html[data-skin="gridcore"] .footer-disclaimer { color: rgba(235, 231, 224, 0.66); font-size: 0.84rem; line-height: 1.95; } html[data-skin="gridcore"] .footer-disclaimer { max-width: 1020px; margin-inline: auto; } /* ---------- 15. Gate（淺底 + 藍圖格線；深炭黑按鈕） ---------- */ html[data-skin="gridcore"] .gate { color: var(--text); } html[data-skin="gridcore"] .gate-logo { color: var(--ink); font-weight: 900; letter-spacing: 0.22em; font-size: clamp(2.2rem, 6vw, 3.4rem); } html[data-skin="gridcore"] .gate-logo::after { width: 44px; height: 2px; margin: 20px auto 6px; background: var(--gold); border-radius: 0; } html[data-skin="gridcore"] .gate-kicker { color: var(--gold-deep); letter-spacing: 0.42em; opacity: 1; } html[data-skin="gridcore"] .gate-title { color: var(--ink); font-weight: 800; } html[data-skin="gridcore"] .gate-sub { color: #55554E; opacity: 1; } html[data-skin="gridcore"] .gate .btn-primary { background: var(--text); color: #FFFFFF; border: 1px solid var(--text); border-radius: 2px; padding: 14px 46px; } /* ---------- 16. 雜項 ---------- */ html[data-skin="gridcore"] .badge { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.08em; } html[data-skin="gridcore"] .field-status.err { color: #B4483F; } /* ============================================================ 17. Responsive（≤1100 / ≤900 / ≤768 / ≤600） ============================================================ */ @media (max-width: 1100px) { html[data-skin="gridcore"] .hero.split { padding: 70px 0 80px; } html[data-skin="gridcore"] .hero.split .hero-title { font-size: clamp(2.3rem, 4.4vw, 3.1rem); } } @media (max-width: 992px) { html[data-skin="gridcore"] .section { padding: 60px 0; } html[data-skin="gridcore"] .hero.sub { padding: 52px 0 48px; } } @media (max-width: 900px) { /* split hero 一欄：文字上、相下 */ html[data-skin="gridcore"] .hero.split .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 44px; } html[data-skin="gridcore"] .hero.split .hero-copy { margin-inline: auto; } html[data-skin="gridcore"] .hero.split .hero-sub { margin-inline: auto; } html[data-skin="gridcore"] .hero.split .hero-actions { justify-content: center; } html[data-skin="gridcore"] .hero-frame { max-width: 620px; margin-inline: auto; } } @media (max-width: 768px) { /* 手機 nav 面板 */ html[data-skin="gridcore"] .nav-links { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--border); box-shadow: none; } html[data-skin="gridcore"] .nav-link.active { border-radius: 0; box-shadow: inset 3px 0 0 var(--gold); } html[data-skin="gridcore"] .section { padding: 52px 0; } html[data-skin="gridcore"] .section-head { margin-bottom: 34px; } html[data-skin="gridcore"] .hero.split { padding: 48px 0 60px; } html[data-skin="gridcore"] .hero.sub { padding: 42px 0 38px; } html[data-skin="gridcore"] .booking-card { padding: 30px 22px; } html[data-skin="gridcore"] .cta-inner { text-align: center; padding: 38px 22px; } html[data-skin="gridcore"] .features-grid { grid-template-columns: repeat(2, 1fr); /* 原 forge 2 欄規則，skin 內重申保髮絲 */ } } @media (max-width: 600px) { html[data-skin="gridcore"] .features-grid, html[data-skin="gridcore"] .contact-grid { grid-template-columns: 1fr; } html[data-skin="gridcore"] .hero.split .hero-title { font-size: 2rem; } html[data-skin="gridcore"] .doc-item { align-items: flex-start; } }