/* ==========================================================================
夜空月光 Night Moon · 全站顧客端共用主題(首頁 / 點餐 / 看板 / 會員 / 加盟 / 教學與法務)
規格文件:scratchpad/protos/THEME.md(token 表、元件用法、動效規範都寫在那裡)
規則:
- 所有 token 一律 --n- 開頭、所有元件 class 一律 n- 開頭:各頁舊 CSS 裡已經有 --ink / --line / .btn,
不加前綴會互相蓋掉。
- 這支只放「大家都一樣」的東西;頁面自己的版面寫在各頁 CSS,載入順序 = 先 theme-night.css 再頁面 CSS。
- 深色鎖死:color-scheme: dark,不寫任何 prefers-color-scheme 分支(系統淺色模式也維持夜空)。
- 動效只動 transform / opacity;prefers-reduced-motion 時全部關掉(本檔最後)。
========================================================================== */
/* 明體標題字:自架子集(只含首頁與各頁標題會用到的字),缺字自動退回系統明體 */
/* 明體子集分三包,瀏覽器只下載該頁真的用到的那包(unicode-range):
night-serif-900 = 首頁;-app = 點餐頁/看板/會員頁多用到的字;-ext = 加盟頁/教學/法務頁多用到的字。
改了標題字要重切:字集清單是同目錄的 .txt,用系統 NotoSerifTC-VF 的 900 字重切成 woff2,unicode-range 跟著更新。
重切的做法:fonttools 的 varLib.instancer 把 NotoSerifTC-VF 固定在 wght=900,再 pyftsubset --text-file=<清單>.txt --flavor=woff2。
-ext 現在是 -v2(2026-10-03 加盟頁改版,標題新增「獨研配四講清楚」七個字);換字集時改檔名加版本號,舊檔名的快取才不會拿到舊字集 */
@font-face {
font-family: "NightSerif";
src: url("/fonts/night-serif-900.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: U+23-25, U+2B, U+2D, U+30-39, U+41-5A, U+7E, U+B7, U+2013-2014, U+201C-201D, U+2026, U+3001-3002, U+300C-300F, U+30FB, U+4E0A, U+4E0D, U+4E2D, U+4E86, U+4E8B, U+4E94, U+4F11, U+4F86, U+5011, U+505A, U+514D, U+516C, U+52A0, U+52D9, U+53D6, U+54C1, U+54E1, U+5580, U+55AE, U+5B5D, U+5B78, U+5B89, U+5BE6, U+5D17, U+5E02, U+5E97, U+5FE0, U+60F3, U+6211, U+624D, U+62CD, U+62DB, U+6392, U+63DB, U+63F4, U+64C7, U+652F, U+653E-653F, U+6545, U+6559, U+6562, U+65B0, U+65E9, U+6703, U+670D, U+677F, U+689D, U+696D, U+6B0A, U+6B3E, U+6B65, U+6DBC, U+6ECB, U+70B8, U+71DF, U+724C, U+7269, U+7279, U+73FE, U+7684, U+76AE, U+76DF, U+770B, U+79C1, U+7B56, U+7DDA, U+804A, U+8106, U+8272, U+83DC, U+8457, U+8A02, U+9000, U+9078, U+9084, U+90FD, U+9165, U+9580, U+958B, U+968A, U+96B1, U+96DE, U+97FF, U+9910, U+9EDE, U+9F8D, U+FF01, U+FF0C, U+FF0E, U+FF1A-FF1B, U+FF1F;
}
@font-face {
font-family: "NightSerif";
src: url("/fonts/night-serif-900-app.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: U+27-29, U+2C, U+2E-2F, U+3A-3B, U+3F, U+61-69, U+6B-70, U+72-75, U+77, U+79-7A, U+4E3B, U+4E5F, U+4ECA, U+4ED6, U+4F46, U+4F5C, U+4F7F, U+505C, U+512A, U+514C, U+5165, U+5169, U+5176, U+5206, U+5230, U+5238, U+524D, U+526F, U+52D5, U+534A, U+5361, U+53CB, U+53EF, U+540D, U+544A, U+548C, U+54EA, U+5927, U+5931, U+597D, U+5B50, U+5B57, U+5BB6, U+5BEB, U+5DF2, U+5E55, U+5EA6, U+5EFA, U+5F62, U+5FC3, U+60E0, U+6298, U+62AC, U+62FF, U+6309, U+63A5, U+64A4, U+6548, U+6578, U+6587, U+6599, U+65B9, U+65E5, U+660E, U+6642, U+66AB, U+6709, U+671F, U+672A, U+672C, U+6A19, U+6B04, U+6BCD, U+6D3B, U+6D88, U+6E90, U+6EFF, U+7167, U+718A, U+751F, U+7528, U+767B, U+76EE, U+78BC, U+79AE, U+7B49, U+7C97, U+7D1A, U+7D50, U+7F3A, U+8207, U+82F1, U+852C, U+865F, U+884C, U+88E1, U+88FD, U+896F, U+8981, U+8ACB, U+8B70, U+8C93, U+8CBB, U+8CFC, U+8D70, U+8FD1, U+9023, U+9032, U+904E, U+9080, U+91AC, U+9215, U+92B7, U+9304, U+9593, U+96C6, U+96D9, U+982D, U+984C, U+9AD4, U+9ED1;
}
@font-face {
font-family: "NightSerif";
src: url("/fonts/night-serif-900-ext-v4.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
unicode-range: U+21, U+2192, U+4E00, U+4E09, U+4E0B, U+4E4B, U+4E8C, U+4E9B, U+4EA4, U+4EBA, U+4EC0, U+4ED8, U+4EFD, U+4F60, U+4FDD, U+500B, U+5099, U+5148, U+518D, U+51FA, U+5229, U+529F, U+5316, U+5341, U+53BB, U+53E3, U+5403, U+5473, U+54AC, U+552E, U+554F, U+56DB, U+570D, U+5712, U+5728, U+584A, U+586B, U+58E2, U+591A, U+5929, U+59CB, U+5B58, U+5B8C, U+5B98, U+5B9A, U+5BA2, U+5C08, U+5C0F, U+5C11, U+5C31, U+5C6C, U+5DF1, U+5E33, U+5E38, U+5E8F, U+5F0F, U+5F8C, U+5F9E, U+600E, U+60A8, U+6210, U+624B, U+6253, U+627E, U+6284, U+6311, U+6490, U+662F, U+66F4, U+6700, U+6771, U+67E5, U+6843, U+695A, U+6AA2, U+6B21, U+6BCF, U+6C92, U+6CE1, U+6E05, U+6E96, U+7368, U+7406, U+7559, U+7570, U+771F, U+77E5, U+7814, U+78BA, U+79D2, U+7A2E, U+7B2C, U+7B54, U+7B97, U+7BC4, U+7C21, U+7C3D, U+7C89, U+7CFB, U+7D04, U+7D61, U+7D66, U+7D71, U+806F, U+80FD, U+81EA, U+82B1, U+8490, U+8655, U+897F, U+898B, U+898F, U+8A2D, U+8A3B, U+8A5E, U+8A8D, U+8AAA, U+8B1B, U+8B8A, U+8CB7, U+8CC7, U+8D85, U+8DF3, U+8ECA, U+8EDF, U+8FA6, U+9001, U+9019-901B, U+914D, U+9322, U+9418, U+9644, U+9760, U+9801, U+9806, U+9EBC, U+FF08-FF09;
}
:root {
color-scheme: dark;
/* ---- 夜空(底色) ---- */
--n-night-0: #081231; /* 最深:遮罩、頁尾以下 */
--n-night-1: #0c1a3d; /* 頁面底色 = */
--n-night-2: #11224c; /* 實心卡片底(玻璃效果的退路) */
--n-night-3: #183068; /* LOGO 深藍:亮面、實心膠囊底 */
/* ---- 月亮黃(主強調)/ 炸物暖金(第二強調) ---- */
--n-moon: #f0c038; /* LOGO 月亮黃:主按鈕、選中狀態、圖示 */
--n-moon-hi: #ffe07a; /* 亮月黃:深底上的強調字、連結 */
--n-moon-deep: #c8931c; /* 月黃暗部:漸層收尾、細框 */
--n-on-moon: #13204a; /* 月黃底上的字(深藍,對比 9:1) */
--n-fry: #f2a14a; /* 炸物暖金:照片外圈光暈、少量點綴 */
/* ---- 文字 ---- */
--n-ink: #f5f2e9; /* 主文字(米白) */
--n-ink-2: #cad2e8; /* 次要文字(內文、說明) */
--n-muted: #97a5c8; /* 弱化文字(註解、頁尾)—— 深底上最淡只到這裡,再淡就不到 4.5:1 */
--n-read: #e2ddd0; /* 長文閱讀(法務、教學、FAQ 段落):暖米白,頁面底 12.6:1、玻璃卡 8.9:1 */
/* ---- 線條 / 表面 ---- */
--n-line: rgba(172, 190, 255, .16);
--n-line-2: rgba(172, 190, 255, .28);
--n-glass: linear-gradient(155deg, rgba(66, 98, 186, .26), rgba(22, 40, 92, .46));
--n-glass-solid: #152a5c; /* 需要不透明底時(彈窗、黏住的列)用這個 */
--n-moonlight: rgba(170, 196, 255, .14); /* 大面積光暈用冷月光;金色半透明只准用在小膠囊/細框 */
--n-moon-tint: rgba(240, 192, 56, .12); /* 小面積金色膠囊底 */
--n-moon-line: rgba(240, 192, 56, .38); /* 金色細框 */
--n-moon-grad: linear-gradient(135deg, #ffe07a 0%, #f0c038 50%, #e2a728 100%); /* 實心月黃(主按鈕、選中分頁) */
--n-moon-glow: 0 8px 20px rgba(240, 176, 40, .26), inset 0 1px 0 rgba(255, 255, 255, .55);
--n-moon-text: linear-gradient(180deg, #fff7da 10%, #f0c038 95%); /* 月光漸層字(實色退路 #ffe9a8) */
--n-frost-bg: rgba(9, 19, 46, .78); /* 霧面列底色(配 backdrop-filter) */
/* ---- 輸入欄 / 選項 ---- */
--n-field-bg: rgba(6, 14, 38, .55); /* 輸入欄底 */
--n-field-solid: #0f1f48; /* 輸入欄實心底(瀏覽器自動填入時蓋掉淺黃底) */
--n-focus-ring: 0 0 0 3px rgba(240, 192, 56, .2);
--n-chip-bg: rgba(255, 255, 255, .055); /* 未選的選項 */
--n-sel: rgba(150, 178, 255, .17); /* 選中的選項底:冷月光(金色只給框和字) */
/* ---- 品牌外色:只准用在指定地方 ---- */
--n-line-green: #06c755; /* LINE 綠:只給「用 LINE 登入 / 開啟 / 分享 / 加好友」 */
--n-on-line-green: #06301a; /* LINE 綠底上的字:深綠 6.4:1(白字只有 2.26:1,全站不准用) */
--n-lilac: #cdbdff; /* 淡紫:外送平台標籤、優惠券小字(頁面底 10:1、玻璃卡 7.1:1) */
/* ---- 狀態 ---- */
--n-ok: #72e4ab; --n-ok-bg: rgba(114, 228, 171, .10); --n-ok-line: rgba(114, 228, 171, .30);
--n-warn: #ffae93; --n-warn-bg: rgba(255, 174, 147, .10); --n-warn-line: rgba(255, 174, 147, .28);
/* ---- 靜態顆粒:鋪在夜空與卡片底,讓深藍像絲絨不像數位平塗(不透明度 .06,不會動) ---- */
--n-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.6 0 0 0 -.3 1.6 0 0 0 -.3 1.6 0 0 0 -.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E");
/* ---- 字型 ---- */
--n-serif: "NightSerif", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
--n-sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
/* ---- 形狀 / 動態 ----
圓角規則:輸入欄 xs 12 / 48px 按鈕 sm 14 / 52px 以上按鈕 md 16 / 卡片 20 / 主題大卡(券面、看板號碼卡)xl 24;
999 全圓只給小膠囊、標籤、分類、n-btn-sm */
--n-radius: 20px;
--n-radius-xs: 12px;
--n-radius-sm: 14px;
--n-radius-md: 16px;
--n-radius-xl: 24px;
--n-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(2, 8, 26, .34);
--n-ease: cubic-bezier(.22, .8, .24, 1);
/* ---- 左右安全區(iPhone 橫拿的瀏海 / 圓角;直拿與一般裝置都是 0) ---- */
--n-safe-l: env(safe-area-inset-left, 0px);
--n-safe-r: env(safe-area-inset-right, 0px);
}
/* ===== 基底 ===== */
*, *::before, *::after { box-sizing: border-box; }
/* 本專案踩過的雷:作者樣式的 display:flex/grid/block 會蓋掉 [hidden] → 全域補回來 */
[hidden] { display: none !important; }
html {
background: var(--n-night-1);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
font-family: var(--n-sans);
line-height: 1.5;
color: var(--n-ink);
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
background-color: var(--n-night-1);
/* 第三個色停一定要落在 380px 與頁底之間(不能寫純百分比):以前寫 58%,頁面矮於約 655px 時 58% < 380px,
瀏覽器把它夾到 380px,y=380 就切出一條硬接縫。calc(209px + 45%) = 380px + 45% ×(頁高 − 380px),
頁多矮都落在 380px 之後、頁底之前,最後一段也不會被壓扁成一條深色帶 */
background-image:
var(--n-grain),
radial-gradient(130% 40% at 50% 100%, rgba(58, 74, 190, .16), transparent 70%),
linear-gradient(180deg, #0c1a3d 0, #10224f 380px, #0d1c44 calc(209px + 45%), #0a1535 100%);
/* 左右安全區:有 viewport-fit=cover 的頁面在 iPhone 橫拿時不被瀏海 / 圓角切到。
直拿、沒有瀏海的裝置、沒寫 viewport-fit=cover 的頁面(點餐頁)env() 都是 0,版面完全不變。
position:fixed 的列不吃 body 內距,要自己補(做法見 THEME.md §4) */
padding-left: var(--n-safe-l);
padding-right: var(--n-safe-r);
}
/* 看板自己在 header / main 用 max(…, env(safe-area-inset-*)) 處理了左右安全區,這裡關掉 body 的,避免橫拿時加兩次。
看板改版若拿掉 #board-logo:請在 board.html 自己寫 body { padding-left: 0; padding-right: 0; } 後刪掉這條 */
body:has(#board-logo) { padding-left: 0; padding-right: 0; }
/* 線條圖示(inline SVG): */
.n-ic {
width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; flex: 0 0 auto;
fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* 只給螢幕報讀的文字 */
.n-vh {
position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* 焦點樣式(:where 讓頁面 CSS 想改時不必拚權重) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--n-moon);
outline-offset: 2px;
}
/* ===== 夜空裝飾(選用): 放在 body 第一個 =====
只鋪在頁面上段、往下淡出;星點是單一元素的 box-shadow,靜止不動、不吃效能 */
.n-sky {
position: absolute; top: 0; left: 0; right: 0; height: 320px; overflow: hidden;
pointer-events: none; z-index: 0;
-webkit-mask-image: linear-gradient(#000 50%, transparent);
mask-image: linear-gradient(#000 50%, transparent);
}
.n-sky::before {
content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 1px; border-radius: 50%;
box-shadow:
57vw 281px 0 0 rgba(222, 230, 255, .37), 74.7vw 209px 0 .5px rgba(222, 230, 255, .35),
74.7vw 233px 0 0 rgba(222, 230, 255, .43), 53.8vw 213px 0 0 rgba(255, 226, 160, .32),
10.4vw 261px 0 0 rgba(222, 230, 255, .36), 7.8vw 70px 0 0 rgba(222, 230, 255, .28),
62.4vw 44px 0 0 rgba(222, 230, 255, .44), 67.9vw 228px 0 0 rgba(222, 230, 255, .5),
56.8vw 177px 0 0 rgba(222, 230, 255, .46), 58.6vw 249px 0 0 rgba(255, 226, 160, .24),
4vw 261px 0 0 rgba(222, 230, 255, .22), 73.2vw 198px 0 0 rgba(222, 230, 255, .23),
97.8vw 22px 0 0 rgba(222, 230, 255, .29), 3.6vw 75px 0 0 rgba(255, 226, 160, .48),
39.8vw 57px 0 0 rgba(255, 226, 160, .52), 34.8vw 299px 0 0 rgba(222, 230, 255, .19),
37.3vw 36px 0 0 rgba(222, 230, 255, .31), 12.2vw 111px 0 0 rgba(222, 230, 255, .43),
10.8vw 59px 0 0 rgba(255, 226, 160, .3), 17.1vw 200px 0 0 rgba(222, 230, 255, .22),
23.8vw 21px 0 0 rgba(222, 230, 255, .45), 10.7vw 86px 0 0 rgba(222, 230, 255, .47),
48.2vw 12px 0 0 rgba(222, 230, 255, .36), 64.6vw 183px 0 0 rgba(222, 230, 255, .37),
84.2vw 78px 0 0 rgba(222, 230, 255, .43), 8.4vw 165px 0 0 rgba(222, 230, 255, .17),
71.6vw 124px 0 .5px rgba(222, 230, 255, .21), 91.5vw 29px 0 0 rgba(222, 230, 255, .48),
24vw 112px 0 0 rgba(222, 230, 255, .53), 36.6vw 145px 0 0 rgba(222, 230, 255, .4),
5.9vw 117px 0 0 rgba(222, 230, 255, .29), 33vw 60px 0 0 rgba(222, 230, 255, .34),
51.6vw 130px 0 0 rgba(222, 230, 255, .21), 64.6vw 75px 0 0 rgba(222, 230, 255, .23);
}
/* 冷色月暈(選用):放在 .n-sky 裡,位置用 --n-halo-x / --n-halo-y 調 */
.n-sky-halo {
position: absolute; left: var(--n-halo-x, 50%); top: var(--n-halo-y, 0);
width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(206, 220, 255, .20), rgba(150, 176, 255, .08) 46%, transparent 74%);
}
/* 內容要蓋在夜空上面:頁面主要區塊加 position:relative; z-index:1(或直接用 .n-above) */
.n-above { position: relative; z-index: 1; }
/* ===== 按鈕 =====
立即點餐 主按鈕:實心月亮黃 + 深藍字(一個畫面最多一顆最重要的)
取餐看板 次按鈕:玻璃框
重新定位 金色次要鈕:小面積金框(同一畫面已有實心月黃時用)
用 LINE 開啟 LINE 綠 + 深綠字(只給 LINE 登入 / 開啟 / 分享 / 加好友)
修飾:n-btn-lg(52px 高)、n-btn-sm(44px 高小膠囊,橫幅 / 卡片裡的小按鈕)、n-btn-block(撐滿一整列)、n-btn-go(字後面自動帶 → 箭頭) */
.n-btn {
position: relative; overflow: hidden; isolation: isolate;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 48px; padding: 0 14px; border-radius: var(--n-radius-sm); border: 0;
font: inherit; font-size: 15px; font-weight: 900; letter-spacing: .06em; line-height: 1.2;
text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
-webkit-user-select: none; user-select: none;
transition: transform .15s var(--n-ease), filter .15s, border-color .15s, background-color .15s, color .15s;
}
.n-btn:active { transform: scale(.98); }
.n-btn .n-ic { font-size: 17px; }
.n-btn-primary {
color: var(--n-on-moon);
background: var(--n-moon-grad);
box-shadow: var(--n-moon-glow);
}
.n-btn-primary:hover { filter: brightness(1.05); }
.n-btn-ghost {
color: #e5e9f6;
background: rgba(255, 255, 255, .045);
border: 1px solid var(--n-line-2);
}
.n-btn-ghost:hover { border-color: rgba(240, 192, 56, .6); color: #fff3c4; }
.n-btn-soft {
color: var(--n-moon-hi);
background: var(--n-moon-tint);
border: 1px solid var(--n-moon-line);
}
.n-btn-soft:hover { background: rgba(240, 192, 56, .18); color: #fff3c4; }
/* LINE 綠:全站一律深綠字(白字對比只有 2.26:1,不過 4.5:1);LINE 圖示用實心 SVG,自動跟著字色 */
.n-btn-line {
color: var(--n-on-line-green);
background: var(--n-line-green);
box-shadow: 0 8px 20px rgba(6, 199, 85, .22);
}
.n-btn-line:hover { filter: brightness(1.05); }
.n-btn-line svg:not(.n-ic) { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.n-btn-lg { min-height: 52px; font-size: 16px; border-radius: var(--n-radius-md); }
.n-btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; letter-spacing: .04em; border-radius: 999px; }
.n-btn-sm.n-btn-line svg:not(.n-ic) { width: 18px; height: 18px; }
.n-btn-block { display: flex; width: 100%; }
.n-btn[disabled], .n-btn[aria-disabled="true"] { opacity: .45; cursor: default; filter: none; transform: none; }
/* 字後面的箭頭(用遮罩畫、跟著字色);不支援遮罩的舊瀏覽器就不畫,不會變成一塊方塊 */
@supports ((-webkit-mask-size: 1em) or (mask-size: 1em)) {
.n-btn-go::after {
content: ""; width: 17px; height: 17px; flex: 0 0 auto; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
}
/* ===== 按壓回饋:按下縮到 .985,指尖位置泛一圈暖金光 =====
HTML 加 class="n-press";JS 在 pointerdown 時設 --px / --py(相對元素左上角的 px)並重新加上 .is-tap。
元素自己的 ::before 已經拿去做別的效果時,改放一個子元素
並在元素上加 data-press-child。元素本身要有 position(relative/absolute)與 isolation:isolate(.n-btn / .n-card 已內建)。 */
.n-press { --px: 50%; --py: 50%; }
.n-press:active { transform: scale(.985); }
.n-press:not([data-press-child])::before,
.n-press-glow {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
border-radius: inherit; pointer-events: none; opacity: 0;
background: radial-gradient(circle at var(--px) var(--py), rgba(255, 214, 120, .55), rgba(255, 190, 80, .18) 34%, rgba(255, 190, 80, 0) 62%);
}
.n-press-glow { z-index: 0; }
.n-press.is-tap:not([data-press-child])::before,
.n-press.is-tap > .n-press-glow { animation: n-tap .55s ease-out; }
@keyframes n-tap { 0% { opacity: 1; } 100% { opacity: 0; } }
/* ===== 卡片表面 =====
…
:玻璃感漸層 + 靜態顆粒 + 內側高光 */
.n-card {
position: relative; isolation: isolate;
border-radius: var(--n-radius);
background: var(--n-grain), var(--n-glass);
background-color: var(--n-night-2); /* 漸層失效時的實心底 */
border: 1px solid var(--n-line);
box-shadow: var(--n-shadow);
}
/* 霧面(黏住的列、彈窗):支援 backdrop-filter 才半透明,不支援就用實心底,字不會糊在底圖上 */
.n-frost { background: rgba(8, 17, 42, .97); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.n-frost { background: var(--n-frost-bg); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
/* ===== 輸入欄 .n-field(input / select / textarea 共用) =====
預設撐滿一整列;放在 flex 列裡跟按鈕並排時給 flex:1(已內建 min-width:0,窄螢幕不會把按鈕擠出去)。
不要套在 checkbox / radio。字 16px 是為了 iOS 聚焦時不自動放大頁面,不要改小。 */
.n-field {
display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0;
padding: 12px 14px; border-radius: var(--n-radius-xs);
border: 1px solid var(--n-line-2); background-color: var(--n-field-bg);
font: inherit; font-size: 16px; line-height: 1.4; color: var(--n-ink); caret-color: var(--n-moon);
-webkit-appearance: none; appearance: none;
transition: border-color .15s, box-shadow .15s;
}
.n-field::placeholder { color: var(--n-muted); opacity: 1; }
.n-field:hover:not(:disabled):not(:focus):not([aria-invalid="true"]) { border-color: rgba(172, 190, 255, .42); }
.n-field:focus { outline: none; border-color: var(--n-moon); box-shadow: var(--n-focus-ring); }
.n-field:disabled { opacity: .5; cursor: not-allowed; }
.n-field[aria-invalid="true"] { border-color: var(--n-warn); }
.n-field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(255, 174, 147, .22); }
textarea.n-field { min-height: 104px; resize: vertical; line-height: 1.6; }
select.n-field {
padding-right: 40px; cursor: pointer; text-overflow: ellipsis;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0c038' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
select.n-field:disabled { cursor: not-allowed; }
select.n-field[multiple] { padding-right: 14px; background-image: none; }
/* 原生下拉清單:深底米白字(Windows / Android Chrome 會吃;iOS 用系統轉盤,跟著 color-scheme:dark) */
.n-field option, .n-field optgroup { background-color: var(--n-glass-solid); color: var(--n-ink); }
.n-field option:disabled { color: var(--n-muted); }
/* 瀏覽器自動填入:用內陰影蓋掉淺黃底(-webkit- 選擇器要單獨一條,不支援的瀏覽器才不會連帶丟掉別的規則) */
.n-field:-webkit-autofill {
-webkit-text-fill-color: var(--n-ink); caret-color: var(--n-moon);
-webkit-box-shadow: 0 0 0 1000px var(--n-field-solid) inset; box-shadow: 0 0 0 1000px var(--n-field-solid) inset;
transition: background-color 9999s ease-out 0s;
}
.n-field:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px var(--n-field-solid) inset, var(--n-focus-ring); box-shadow: 0 0 0 1000px var(--n-field-solid) inset, var(--n-focus-ring);
}
/* ===== 選項 / 篩選 .n-opt(外框式選中)與 分頁切換 .n-seg(實心月黃選中) =====
規則:導覽分頁(切換整塊內容)用 .n-seg;選項 / 篩選 / 口味(可複選或單選)用 .n-opt。
選中:aria-pressed / aria-checked / aria-selected = "true" 或 .is-sel
…
.n-seg 選中:aria-selected / aria-pressed = "true"、aria-current="page" 或 .on */
.n-opt {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; padding: 10px 16px; margin: 0; border-radius: var(--n-radius-xs);
border: 1.5px solid var(--n-line-2); background: var(--n-chip-bg);
font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--n-ink);
text-decoration: none; cursor: pointer;
transition: color .12s, background-color .12s, border-color .12s, transform .15s var(--n-ease);
}
.n-opt:active { transform: scale(.97); }
.n-opt:hover { border-color: rgba(240, 192, 56, .5); }
.n-opt[aria-pressed="true"], .n-opt[aria-checked="true"], .n-opt[aria-selected="true"], .n-opt.is-sel {
background: var(--n-sel); border-color: var(--n-moon); color: var(--n-moon-hi); font-weight: 800;
box-shadow: 0 4px 12px rgba(240, 176, 40, .16);
}
.n-opt:disabled, .n-opt[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.n-opt-pill { border-radius: 999px; }
.n-seg {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
border-radius: var(--n-radius-sm); background: rgba(6, 14, 38, .45); border: 1px solid var(--n-line);
}
.n-seg-item {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-width: 0; min-height: 44px; padding: 0 6px; margin: 0; border: 0; border-radius: 11px; background: transparent;
font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.2; color: var(--n-ink-2);
text-align: center; text-decoration: none; cursor: pointer;
transition: background-color .2s, color .2s, transform .15s var(--n-ease);
}
.n-seg-item:hover { color: var(--n-ink); }
.n-seg-item:active { transform: scale(.97); }
.n-seg-item[aria-selected="true"], .n-seg-item[aria-pressed="true"], .n-seg-item[aria-current="page"], .n-seg-item.on {
color: var(--n-on-moon); background: var(--n-moon-grad);
box-shadow: 0 6px 16px rgba(240, 176, 40, .24), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* ===== 提示框 .n-note =====
一般提醒
注意
完成
帶圖示:文字
(圖示固定在左上,文字自動讓出 44px) */
.n-note {
position: relative; margin: 14px 0; padding: 12px 14px; border-radius: var(--n-radius-sm);
font-size: 14.5px; line-height: 1.8; color: var(--n-ink-2);
background: var(--n-grain), linear-gradient(135deg, rgba(150, 178, 255, .12), rgba(255, 255, 255, .03));
background-color: rgba(17, 34, 76, .6);
border: 1px solid rgba(240, 192, 56, .28);
}
.n-note > .n-ic { color: var(--n-moon); }
.n-note-ic { padding-left: 44px; }
.n-note-ic > .n-ic { position: absolute; left: 14px; top: 15px; font-size: 20px; }
.n-note-warn { background: var(--n-warn-bg); border-color: var(--n-warn-line); }
.n-note-warn > .n-ic { color: var(--n-warn); }
.n-note-ok { background: var(--n-ok-bg); border-color: var(--n-ok-line); }
.n-note-ok > .n-ic { color: var(--n-ok); }
/* ===== 狀態膠囊 =====
營業中 暫停接單
不抽營業額(金色標籤,小面積) */
.n-pill {
display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
font-size: 12px; font-weight: 800; line-height: 18px; white-space: nowrap; border: 1px solid transparent;
}
.n-pill-open { color: var(--n-ok); background: var(--n-ok-bg); border-color: var(--n-ok-line); }
.n-pill-open::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.n-pill-closed { color: var(--n-warn); background: var(--n-warn-bg); border-color: var(--n-warn-line); }
.n-chip {
display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
font-size: 12.5px; font-weight: 800; line-height: 1.4; color: #ffe9a8;
background: var(--n-moon-tint); border: 1px solid rgba(240, 192, 56, .28);
}
/* ===== 區塊標題 =====
選擇門市
:明體 + 前面一顆月黃四角星
FRANCHISE
:標題上方的小字 */
.n-title {
display: flex; align-items: center; gap: 9px; margin: 0;
font-family: var(--n-serif); font-size: 19px; font-weight: 900; line-height: 1.3; letter-spacing: .06em;
color: var(--n-ink);
}
.n-title::before {
content: ""; width: 12px; height: 12px; flex: 0 0 auto; background: var(--n-moon);
-webkit-clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.n-eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .24em; color: var(--n-moon-hi); }
/* ===== 頁面主標 .n-h1 =====
會員中心
:明體、米白(頁面主標一律米白)
隱私權政策
:月光漸層字,只給「文件型」大標與品牌字標(不支援漸層字的瀏覽器用實色 #ffe9a8) */
.n-h1 {
margin: 0; font-family: var(--n-serif); font-weight: 900; font-size: clamp(26px, 7.2vw, 34px);
line-height: 1.3; letter-spacing: .06em; color: var(--n-ink); text-wrap: balance;
}
.n-h1-moon { color: #ffe9a8; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.n-h1-moon { background: var(--n-moon-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
/* ===== 頁首品牌列 .n-top / .n-brand(會員、加盟、教學、客服 / 隱私 / 條款共用;首頁大 LOGO、點餐頁 / 看板 LOGO + 店名不用這個) =====
黏頂:加 .n-top-sticky(配 .n-frost 霧面底)。要限寬就在頁面 CSS 給 .n-top max-width + margin:0 auto。 */
.n-top {
position: relative; z-index: 10;
display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0;
min-height: 56px; padding: 6px 16px; padding-top: calc(6px + env(safe-area-inset-top, 0px));
}
.n-top-sticky { position: sticky; top: 0; border-bottom: 1px solid var(--n-line); }
.n-brand {
display: inline-flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px;
color: var(--n-ink); text-decoration: none;
}
.n-brand:hover { color: #fff3c4; }
.n-brand-mark { width: 28px; height: 28px; flex: 0 0 auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
/* 品牌 LOGO(/brand-logo.js 讀到後台品牌 LOGO 才換上;跟首頁、會員中心同一張) */
.n-brand-logo { width: 46px; height: 36px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.n-brand-name { font-family: var(--n-serif); font-size: 17px; font-weight: 900; line-height: 1.3; letter-spacing: .06em; white-space: nowrap; }
.n-brand-sub {
font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; color: var(--n-moon-hi); white-space: nowrap;
padding-left: 9px; border-left: 1px solid var(--n-line-2);
}
@media (max-width: 359.98px) {
.n-brand { gap: 7px; }
.n-brand-mark { width: 24px; height: 24px; }
.n-brand-logo { width: 40px; height: 32px; }
.n-brand-name { font-size: 16px; letter-spacing: .03em; }
.n-brand-sub { letter-spacing: .06em; padding-left: 7px; }
}
/* ===== 頁尾 =====
*/
.n-foot {
position: relative; z-index: 1; max-width: 1080px; margin: 8px auto 0; text-align: center;
padding: 22px 16px 30px; padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
color: var(--n-muted); font-size: 12.5px; line-height: 1.7;
border-top: 1px solid rgba(172, 190, 255, .09);
}
.n-foot p { margin: 0; }
.n-foot-moon { display: block; width: 20px; height: 20px; margin: 0 auto 6px; fill: rgba(240, 192, 56, .8); }
.n-foot-name { color: var(--n-ink-2); font-weight: 700; font-size: 13px; }
.n-foot-links {
--n-foot-gap: 8px;
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--n-foot-gap); margin: 2px 0 6px;
}
/* 左右各 9px:兩個字的「支援」剛好 44px 寬,不必靠 min-width 撐(撐開的話點會偏一邊);min-width 只是保底 */
.n-foot-links a {
position: relative;
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 9px;
font-size: 13px; color: var(--n-ink-2); text-decoration: none;
}
.n-foot-links a:hover { color: var(--n-moon-hi); }
/* 分隔點掛在「前一個連結」後面、置中在兩個連結的間距裡(不佔寬度、不算點擊範圍):
折行時點留在上一行行尾,不會跑到下一行行首;最後一個看得到的連結後面不畫點 */
.n-foot-links a::after {
content: "·"; content: "·" / "";
position: absolute; top: 50%; right: calc(var(--n-foot-gap) / -2);
transform: translate(50%, -50%); pointer-events: none; color: rgba(151, 165, 200, .7);
}
.n-foot-links a:last-child::after { content: none; }
.n-foot-links a:not(:has(~ a:not([hidden])))::after { content: none; }
@media (max-width: 359.98px) { /* 320 寬:間距收窄,四個連結(含「品牌與門市」)一行放得下 */
.n-foot-links { --n-foot-gap: 2px; }
}
.n-foot .n-foot-op { max-width: 34em; margin: 0 auto; font-size: 12px; }
/* 營運者揭露分行(老闆 10/7):第一行「本平台由…營運，」獨佔一行,後面「品牌」與「地址」各是一整塊——一行放不下就整塊換行,
不會把「不早脆皮雞排」「忠孝路」從中間拆開。文字本身一字不改(LINE 官方帳號認證要求營運者露出) */
.n-foot-op .op-l1 { display: block; }
.n-foot-op .op-seg { display: inline-block; }
/* ===== 共用動效:閃爍星 .n-tw / 掃光 .n-sheen(只動 opacity / transform,算進「一個畫面 ≤ 10 個常駐動畫」預算) =====
閃爍星:
放在有 position 的容器裡(例如 .n-sky);一頁最多 5 顆;減少動態時停在半亮。
掃光:…
(開頁掃一次);要每隔幾秒掃一次加 .n-sheen-loop。
宿主的 ::after 已經拿去做別的(例如 .n-btn-go 的箭頭):改放子元素
並在宿主加 data-sheen-child。宿主要能裁切(本檔用零權重給了 position:relative + overflow:hidden,頁面寫的 position 會優先)。 */
.n-tw {
position: absolute; width: 3px; height: 3px; border-radius: 50%; pointer-events: none;
background: #fff6da; box-shadow: 0 0 5px 1px rgba(255, 236, 180, .45);
opacity: .5;
animation: n-tw var(--n-tw-dur, 4.8s) ease-in-out var(--n-tw-delay, 0s) infinite;
}
@keyframes n-tw { 0%, 100% { opacity: .12; } 50% { opacity: .8; } }
:where(.n-sheen) { position: relative; overflow: hidden; }
.n-sheen:not([data-sheen-child])::after,
.n-sheen-el {
content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 42%; z-index: 1; pointer-events: none;
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .13) 46%, rgba(255, 238, 190, .2) 50%, rgba(255, 255, 255, 0) 64%);
transform: translateX(-130%) skewX(-14deg);
animation: n-sheen var(--n-sheen-dur, 1.7s) var(--n-ease) var(--n-sheen-delay, .45s) 1 both;
}
.n-sheen-loop:not([data-sheen-child])::after,
.n-sheen-loop > .n-sheen-el { animation: n-sheen-loop var(--n-sheen-dur, 3.8s) ease-in-out var(--n-sheen-delay, 1.2s) infinite; }
@keyframes n-sheen { to { transform: translateX(340%) skewX(-14deg); } }
@keyframes n-sheen-loop { 0% { transform: translateX(-130%) skewX(-14deg); } 42%, 100% { transform: translateX(340%) skewX(-14deg); } }
/* ===== 節電:分頁在背景或特效區捲出畫面時暫停動畫 =====
JS:document.hidden → 加 .n-paused;IntersectionObserver 看不到的特效區加 .n-off */
.n-paused *, .n-paused *::before, .n-paused *::after,
.n-off, .n-off *, .n-off *::before, .n-off *::after { animation-play-state: paused !important; }
/* ===== 減少動態:所有動畫與轉場關掉(各頁可以再補「靜態也好看」的替代樣式) ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0s !important;
transition-duration: .001ms !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
.n-press:active, .n-btn:active, .n-opt:active, .n-seg-item:active { transform: none; }
}
/* 標題類多行時平均分配每行長度,避免最後一行只剩一兩個字(新瀏覽器才有,舊的照舊斷行;低權重,頁面自己的規則優先) */
:where(h1, h2, h3, summary) { text-wrap: balance; }