/* base.css — tokens · reset · typography · utilities 浪花旅遊顧問平台 · 設計系統（依《品牌風格指南 — 中高齡友善》） ===================================================================== 設計語言：暖灰層次 + 亮橘點睛 · 中高齡友善 —— 灰底(非純白)避免眩光、深炭字(非純黑)保留高對比、暖橘為老化的眼睛保留辨識度。 —— 全站字級以 rem 表示，隨 html font-size 縮放，支援「標準 / 大 / 特大」。 —— 無暗色模式：指南明文避免純黑底暗色系（對比不足、顯糊）。 對比度已實測（WCAG 2.1）。指南原稿有數個 token 未達其自稱的等級， 此處採「保留色相、壓暗至剛好達標」的修正值，各 token 旁註明實測值： ink-3 #726C66 → #6B6560 （原 4.08:1，未達 AA 4.5） 連結橘 #C85F0D → #9E4A07 （原 3.25:1；指南 CSS 本身即用 9E4A07） success #2F7D52 → #2B734C （原 3.96:1） warn #C0442E → #B33F2B （原 4.03:1） focus 環 亮橘 → 深橘 （亮橘對頁面底僅 2.06:1，未達 1.4.11 的 3:1） 表單邊界 #D8D5D1 → #8F8A84 （原 1.46:1；邊界是控制項的唯一識別） ===================================================================== */ :root{ /* ---- 暖灰層次（由深到淺）---- 底色歷程：指南原稿 #e6e4e1 → #dad7d2 → 現行 #d2cec8。 加深底色不是改一個色碼：指南原稿的 --ink-3 / --success / --warn 都只有 4.52–4.53:1，距 AA 門檻 4.5 僅 0.02 餘裕，底一深就全數不合格。 故每次調底都整組連動重算，方法為「保住色相與飽和度，只壓明度到剛好達標」。 各行註解的對比值皆為實測，改底色時請一併重算，勿只改 --bg。 */ --bg:#e6e4e1; /* 頁面底（#e6e4e1 → #dad7d2 → 此值） 這是「文字可直接躺在底色上」的最深極限：再深一階 #cac6bf， --ink-2 就掉到 4.40 跌破 AA。參考站 demo/ulu/3.html 的 --canvas:#adaca7 更深，但它的字全在白卡片上（其 --muted 在自家灰底上只有 3.12、--orange-d 只有 2.19），灰純粹是「地」。 要走到那個深度，得先把文字搬進卡片——那是版面重構，不是換色碼。 */ --surface:#efedea; /* 區塊 / 側欄（同步下移維持階梯） */ --muted:#d5d1cb; /* 弱化底 */ --card:#faf9f7; /* 卡片：維持淺色，底越深浮起感越強（參考站也是這個邏輯） */ --card-hi:#ffffff; /* 輸入框 / 最上層 */ /* ---- 文字（深炭，非純黑）---- */ --ink:#2c2926; /* 內文 9.23:1 on --bg AAA（仍遠超 7.0，故不動） */ --ink-2:#59544f; /* 次級 4.78:1 on --bg AA （不動；再深就得動） */ --ink-3:#726c66; /* 三級/標註 4.56:1 on --bg AA */ /* ---- 分界：靠層次而非粗線（指南 §04）---- */ --line:#d8d5d1; /* 裝飾性分界（底越深，線也要越深才看得見） */ --line-2:#e3e0dc; /* 更淺分界 */ --line-strong:#8f8a84; /* 表單控制項邊界 3.42:1 on white ✓ 1.4.11（畫在 card 上，不受底色影響） */ /* ---- 亮橘：稀有才醒目（色相取自參考站 demo/ulu/3.html）---- */ --orange:#f5811e; /* 只作按鈕底：其上深炭字 5.05:1 ✓ 警告：配白字只有 2.87，不合格。這個橘不能用白字。 */ --orange-hover:#ff8f4d; --orange-deep:#9e4a07; /* 文字 / 連結 / 焦點環 4.56:1 on --bg ✓ 參考站用 #c24800，但那在灰底上只有 2.19——它從不把這色放在灰上。 */ --orange-soft:#fbe7d2; /* 提示底（參考站色） */ --orange-line:#f2c79c; --orange-ring:rgba(245,129,30,.30); /* 焦點光暈（深橘實線之外的柔邊） */ /* ---- 語意色 ---- */ --success:#2f7d52; /* 4.56:1 on --bg ✓ */ --warn:#c0442e; /* 4.64:1 on --bg ✓ */ --info:#2c5a87; /* 4.59:1 on --bg ✓ */ --success-wash:#e7f1eb; --warn-wash:#fbeeea; --info-wash:#eaf1f8; --neutral-wash:#eceae7; /* ---- 四級高度：頁面 → 區塊 → 卡片 → 浮起（暖調柔和擴散）---- */ --sh0:none; --sh1:0 1px 2px rgba(44,41,38,.05), 0 3px 10px rgba(44,41,38,.06); --sh2:0 2px 5px rgba(44,41,38,.06), 0 10px 24px rgba(44,41,38,.10); --sh3:0 6px 14px rgba(44,41,38,.10), 0 22px 48px rgba(44,41,38,.16); /* ---- 形狀 ---- */ --r:14px; --r-sm:10px; --r-lg:18px; /* ---- 8 點間距系統（指南 §05）---- */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s10:84px; /* ---- 觸控下限：所有可點目標 ≥48px；主要按鈕 54px ---- */ --tap:48px; --tap-lg:54px; /* ---- 版面 ---- */ --sidebar-w:264px; --topbar-h:72px; --measure:68ch; /* 側欄收合後的寬度：只留收合鈕。不收到 0——控制項不能跟著內容一起消失， 否則使用者就沒有辦法把它叫回來。 */ --sidebar-w-min:60px; /* ---- 節奏 tokens：CSS 與 GSAP / anime.js 共用同一組值，層次才一致 ---- */ --dur-in:.7s; /* 進場 */ --dur-hover:.3s; /* hover 浮起 */ --dur-ui:.18s; /* 即時回饋 */ --stagger:.08s; /* 同列錯開 */ --ease-out:cubic-bezier(.2,.7,.3,1); } /* 字級調整（指南 §03）：內文 18px 起跳，一鍵放大到 20 / 22 */ html{font-size:18px} html[data-fs="l"]{font-size:20px} html[data-fs="xl"]{font-size:22px} *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background: radial-gradient(1200px 600px at 80% -10%, #efe7de 0%, transparent 60%), var(--bg); background-attachment:fixed; color:var(--ink); font-family:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei","Segoe UI",system-ui,sans-serif; font-size:1rem; /* = 18px，隨 data-fs 縮放 */ line-height:1.75; /* 指南 §03 */ font-weight:400; /* 指南：字重不低於 400，避免細體 */ -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.28} p{margin:0} img{max-width:100%;display:block} button,input,select,textarea{font-family:inherit;font-size:inherit} a{color:var(--orange-deep);text-decoration:none;text-underline-offset:3px} a:hover{text-decoration:underline} /* 焦點：鍵盤操作必須看得見（指南 §05）。 深橘實線 4.82:1 ✓ 1.4.11，外加柔光暈提高可察覺度。 亮橘對頁面底僅 2.06:1，故不能單獨作焦點環。 */ :focus-visible{ outline:3px solid var(--orange-deep); outline-offset:2px; border-radius:4px; box-shadow:0 0 0 6px var(--orange-ring); } :focus:not(:focus-visible){outline:none} /* 跳至主內容：側欄有十餘個連結，鍵盤使用者不該按十幾次 Tab 才碰到內容 */ .skip-link{ position:absolute;left:var(--s2);top:-100px;z-index:100; background:var(--orange);color:var(--ink);font-weight:700; padding:14px 22px;border-radius:0 0 var(--r-sm) var(--r-sm); min-height:var(--tap);display:inline-flex;align-items:center; transition:top var(--dur-ui); } .skip-link:focus{top:0;text-decoration:none} /* ---- 文字工具 ---- */ .font-serif{font-family:var(--font-serif, "Noto Serif TC", "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif);} .overline{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);font-weight:700} .muted{color:var(--ink-2)} .mono{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.82rem} .hairline{border:0;border-top:1px solid var(--line);margin:0} .center{text-align:center} .nowrap{white-space:nowrap} .measure{max-width:var(--measure)} .hide{display:none !important} [hidden]{display:none !important} /* 僅供螢幕報讀器 */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---- 進場層次 ---- 預設一律可見；只有在 JS 確認可以動畫時才於 掛 .anim 把元素藏起來再演。 JS 失效、載入失敗或 reduced-motion 時，內容全部看得到（漸進增強）。 */ html.anim [data-reveal]{opacity:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.anim [data-reveal]{opacity:1} *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }