/* ============================================================ 點燈雲・長者版 — 共用樣式 設計主軸：「宣紙與朱印」 原本的「廟埕公告欄」方向是對的，但執行上全是 2–3px 黑框、 滿版高彩朱紅與雙層描邊按鈕，密度過高、彼此搶焦點，看久了刺眼。 這一版保留同樣的語彙（朱紅、金線、楷書標題），改用宮廟真正的材質比例： 宣紙作底、深棕紅作骨（頂欄與側欄）、朱紅只留給「要按的東西」、 金線細到 1px 只作分隔。框線一律降到 1px，層次改由留白與極淺陰影承擔。 長者版的硬條件一項沒放寬： 1. 全站以 rem 排版，字級偏好改 html font-size（1.0 / 1.25 / 1.5 倍）， 版面連同間距、按鈕、觸控範圍一起等比放大。 2. 內文下限 1rem = 18px；主要按鈕高度下限 3.4rem ≒ 61px。 3. 沒有無限動畫，完整支援 prefers-reduced-motion，焦點框清楚可見。 ============================================================ */ :root{ /* 紙 —— 暖白宣紙，不用純灰 */ --paper:#FFFFFF; --paper-2:#FAF6EE; --paper-3:#F3EDE1; /* 墨 */ --ink:#1A1512; --ink-2:#5C5147; --ink-3:#8C8073; /* 朱 —— 比上一版沉一階，長時間看不刺眼，對比仍達 AA */ --zhu:#A81E16; --zhu-deep:#7A120C; --zhu-tint:#FCF0EE; /* 骨 —— 頂欄與側欄的深棕紅，畫面的重量集中在這裡 */ --bone:#43110F; --bone-2:#380E0C; --jade:#16624A; --jade-tint:#EDF4F1; --jin:#B08A2E; --jin-soft:#E9DBB6; --jin-text:#795A10; --line:#E4DBCB; --line-soft:#F0EADD; --sh-1:0 1px 2px rgba(26,21,18,.05); --sh-2:0 6px 18px -8px rgba(26,21,18,.22); --sh-3:0 18px 40px -16px rgba(26,21,18,.32); /* 字 —— 楷體只用在標題與品牌（≥1.5rem），內文與數字一律正黑體 */ --kai:"DFKai-SB","標楷體","BiauKai","KaiTi",serif; --sans:"Microsoft JhengHei","微軟正黑體","PingFang TC","Heiti TC",system-ui,-apple-system,"Segoe UI",sans-serif; --radius:12px; --radius-sm:8px; --shell:1180px; /* 前台（無側欄）頁的閱讀寬度上限 */ --gut:1.4rem; /* 內容區左右留白 */ } /* 字級偏好：改 html font-size，rem 版面整體等比放大 */ html{font-size:18px;} html[data-scale="lg"]{font-size:22.5px;} /* 1.25 倍 */ html[data-scale="xl"]{font-size:27px;} /* 1.50 倍 */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} body{ font-family:var(--sans); font-size:1rem; line-height:1.6; color:var(--ink); background:var(--paper-2); -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; } /* 焦點框：長者常用鍵盤與放大鏡，焦點一定要看得見 */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:3px solid #1751C4;outline-offset:3px;border-radius:6px; } .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important;} } /* ── 版面容器 ── */ .shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut);} /* 後台是工作台不是文章：側欄已經吃掉左邊，剩下的寬度就整片給資料， 不要再套一層 1180px 的閱讀寬度，兩側留白會比表格本身還寬。 前台（點燈、樂捐）維持 --shell，因為那是一次讀一句話的流程頁。 */ body.has-nav .shell, body.has-nav .topbar-in, body.has-nav .backbar a, body.has-nav .foot-in{max-width:none;} .pad-top{padding-top:1.2rem;} .pad-bottom{padding-bottom:4.5rem;} /* ══════════════════════════════════════════ 頂欄 —— 深棕紅，與側欄同一塊「骨」，底線一道金 ══════════════════════════════════════════ */ .topbar{background:var(--bone);color:#F6EAE6;box-shadow:inset 0 -1px 0 rgba(224,196,120,.55);} .topbar-in{ max-width:var(--shell);margin:0 auto;padding:0.7rem var(--gut); display:flex;align-items:center;gap:1rem;flex-wrap:wrap; } .topbar .who{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap;} .topbar .temple{font-family:var(--kai);font-size:1.5rem;font-weight:700;letter-spacing:.12em;} .topbar .today{font-size:0.95rem;color:#D9BCB4;letter-spacing:.04em;} .topbar .tools{margin-left:auto;display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap;} /* 字級控制：常駐在每一頁的右上角，而不是藏在設定頁裡 */ .scale-set{display:flex;align-items:center;gap:0.3rem; background:rgba(0,0,0,.22);border-radius:99px;padding:0.22rem;} .scale-set .cap{font-size:0.9rem;color:#D9BCB4;padding:0 0.5rem 0 0.6rem;letter-spacing:.1em;} .scale-btn{ font-family:var(--sans);font-weight:700;cursor:pointer; min-width:2.5rem;height:2.5rem;font-size:1rem; border:none;border-radius:99px; background:transparent;color:#EBD3CD;transition:background .12s,color .12s; } .scale-btn:hover{background:rgba(255,255,255,.12);color:#fff;} .scale-btn[aria-pressed="true"]{background:#FBF6EE;color:var(--zhu-deep);box-shadow:var(--sh-1);} /* ══════════════════════════════════════════ 回主畫面：長者最大的恐懼是「回不去」，每一頁都留這條返回條 ══════════════════════════════════════════ */ .backbar{background:var(--bone-2);} .backbar a{ max-width:var(--shell);margin:0 auto; display:flex;align-items:center;gap:0.7rem; padding:0.9rem var(--gut);min-height:4rem; color:#F0D9D4;text-decoration:none;font-size:1.2rem;font-weight:700;letter-spacing:.04em; transition:color .12s,background .12s; } .backbar a:hover{background:rgba(255,255,255,.07);color:#fff;} .backbar svg{width:1.4rem;height:1.4rem;flex:none;} /* ── 頁面標題 ── */ .page-title{font-family:var(--kai);font-size:2rem;font-weight:700;letter-spacing:.08em;line-height:1.25;} .page-note{font-size:1.02rem;color:var(--ink-2);margin-top:0.25rem;max-width:52rem;text-wrap:pretty;} .section-title{ font-family:var(--kai);font-size:1.5rem;font-weight:700;letter-spacing:.08em; margin:1.7rem 0 0.7rem;padding-left:0.7rem;border-left:4px solid var(--zhu); } /* ══════════════════════════════════════════ 任務磚：主畫面只放「今天真的會做的事」 ══════════════════════════════════════════ */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:0.8rem;margin-top:1rem;} .tile{ position:relative;text-decoration:none;color:inherit;background:var(--paper); border:1px solid var(--line);border-radius:var(--radius); padding:1.1rem 1.15rem 1rem;min-height:9.5rem; display:flex;flex-direction:column;overflow:hidden; box-shadow:var(--sh-1); transition:border-color .14s,box-shadow .14s,transform .14s; } .tile::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--zhu);} .tile:hover{border-color:var(--jin);box-shadow:var(--sh-2);transform:translateY(-2px);} .tile .t-name{font-family:var(--kai);font-size:1.85rem;font-weight:700;letter-spacing:.1em;line-height:1.3;} .tile .t-say{font-size:1.02rem;color:var(--ink-2);margin-top:0.25rem;text-wrap:pretty;} .tile .t-now{ margin-top:auto;padding-top:0.6rem;font-size:1.45rem;font-weight:800;color:var(--zhu); font-variant-numeric:tabular-nums;letter-spacing:.02em; } .tile .t-now small{font-size:0.95rem;font-weight:700;color:var(--ink-2);margin-left:0.4rem;} /* ══════════════════════════════════════════ 印章鈕 —— 主要動作一律朱紅實心＋一道極細金線 ══════════════════════════════════════════ */ .seal-btn{ font-family:var(--sans);font-size:1.2rem;font-weight:800;letter-spacing:.12em; cursor:pointer;border:none;border-radius:var(--radius-sm); background:var(--zhu);color:#FFF6F4; min-height:3.4rem;padding:0.7rem 1.8rem; box-shadow:inset 0 0 0 1px rgba(255,225,170,.55),var(--sh-1); display:inline-flex;align-items:center;justify-content:center;gap:0.6rem; text-decoration:none;transition:background .14s,box-shadow .14s,transform .14s; } .seal-btn:hover{background:var(--zhu-deep);box-shadow:inset 0 0 0 1px rgba(255,225,170,.7),var(--sh-2);transform:translateY(-1px);} .seal-btn:active{transform:none;} .seal-btn:disabled{background:#CFC7BA;color:#F7F4EF;box-shadow:none;cursor:not-allowed;transform:none;} .seal-btn.wide{width:100%;} .seal-btn.jade{background:var(--jade);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),var(--sh-1);} .seal-btn.jade:hover{background:#0F4E3A;} /* 次要動作：白底細框，永遠比主要動作安靜 */ .plain-btn{ font-family:var(--sans);font-size:1.1rem;font-weight:700;cursor:pointer;letter-spacing:.04em; background:var(--paper);color:var(--ink);border:1px solid #C9BEAB;border-radius:var(--radius-sm); min-height:3.4rem;padding:0.6rem 1.4rem;box-shadow:var(--sh-1); display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;text-decoration:none; transition:background .12s,border-color .12s; } .plain-btn:hover{background:var(--paper-3);border-color:var(--ink-2);} .plain-btn.danger{border-color:#DFA9A4;color:var(--zhu);} .plain-btn.danger:hover{background:var(--zhu-tint);border-color:var(--zhu);} .btn-row{display:flex;gap:0.7rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem;} .btn-row.split{justify-content:space-between;} /* ══════════════════════════════════════════ 紀錄卡：取代 9 欄橫向捲動的表格 ══════════════════════════════════════════ */ .card-list{display:flex;flex-direction:column;gap:0.6rem;margin-top:0.9rem;} .rec{ background:var(--paper);border:1px solid var(--line);border-left:5px solid #D6CBB8; border-radius:var(--radius);padding:0.9rem 1.05rem;box-shadow:var(--sh-1); display:flex;gap:0.9rem;align-items:flex-start;flex-wrap:wrap; transition:box-shadow .14s,border-color .14s; } .rec:hover{box-shadow:var(--sh-2);} .rec.paid{border-left-color:var(--jade);} .rec.locked{border-left-color:var(--ink-2);} .rec.voided{border-left-color:#C6BDB0;background:var(--paper-3);box-shadow:none;} .rec .r-main{flex:1 1 20rem;min-width:0;} .rec .r-name{font-size:1.45rem;font-weight:800;letter-spacing:.04em;} .rec .r-name .phone{font-size:1rem;font-weight:600;color:var(--ink-2);margin-left:0.8rem; /* inline-block + nowrap：整串（電話、品項說明）不會被拆斷，放不下就整串換行 */ display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums;} .rec .r-line{font-size:1.02rem;color:var(--ink-2);margin-top:0.15rem;} .rec .r-money{font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:0.2rem;letter-spacing:.01em;} .rec .r-side{flex:0 0 auto;display:flex;flex-direction:column;gap:0.45rem;align-items:stretch;min-width:min(12rem,100%);} .rec.voided .r-name,.rec.voided .r-money{color:var(--ink-3);text-decoration:line-through;} /* 狀態用「字＋顏色＋左側粗邊」三重編碼，不單靠顏色 */ .tag{ display:inline-flex;align-items:center;gap:0.4rem; font-size:0.95rem;font-weight:800;letter-spacing:.06em; padding:0.2rem 0.75rem;border-radius:99px;border:1px solid; } .tag.paid{color:#0E5138;border-color:#A9CFBF;background:var(--jade-tint);} .tag.locked{color:var(--ink-2);border-color:#D3C9B8;background:var(--paper-3);} .tag.voided{color:var(--ink-3);border-color:#D9D1C5;background:#EFEBE3;} /* 「還有其他做法」收在這裡，平常不佔畫面 */ details.more{margin-top:0.2rem;} details.more>summary{ cursor:pointer;list-style:none;font-size:1.05rem;font-weight:700;color:var(--ink-2); padding:0.5rem 0;display:inline-flex;align-items:center;gap:0.45rem;min-height:2.6rem; } details.more>summary:hover{color:var(--zhu);} details.more>summary::-webkit-details-marker{display:none;} details.more>summary::before{content:"＋";font-weight:800;color:var(--zhu);} details.more[open]>summary::before{content:"－";} details.more .more-body{display:flex;gap:0.7rem;flex-wrap:wrap;padding:0.3rem 0 0.6rem;} /* ══════════════════════════════════════════ 表單：一頁一件事，欄位大、標籤大、例子寫在旁邊 ══════════════════════════════════════════ */ .panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:1.15rem 1.2rem;box-shadow:var(--sh-1);} .ask{font-family:var(--kai);font-size:2rem;font-weight:700;letter-spacing:.1em;line-height:1.35;} .ask-note{font-size:1.02rem;color:var(--ink-2);margin-top:0.3rem;text-wrap:pretty;} .field{margin-top:1rem;} .field>label{display:block;font-size:1.12rem;font-weight:800;margin-bottom:0.3rem;letter-spacing:.04em;} .field .eg{font-size:1rem;font-weight:600;color:var(--ink-3);margin-left:0.6rem;} .field input,.field select{ font-family:var(--sans);font-size:1.25rem;width:100%; min-height:3.6rem;padding:0.55rem 0.95rem; border:1px solid #C9BEAB;border-radius:var(--radius-sm); background:var(--paper);color:var(--ink); transition:border-color .12s,box-shadow .12s; } .field input:hover,.field select:hover{border-color:var(--ink-3);} .field input:focus,.field select:focus{border-color:var(--zhu);box-shadow:0 0 0 3px rgba(168,30,22,.12);} .field .err{display:none;font-size:1.05rem;font-weight:700;color:var(--zhu);margin-top:0.4rem;} .field.bad input,.field.bad select{border-color:var(--zhu);background:var(--zhu-tint);} .field.bad .err{display:block;} .two-up{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:0 1rem;} /* 大選項：燈種、付款方式都用整塊可點的大卡，不用下拉 */ .picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:0.7rem;margin-top:0.8rem;} .pick{ cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:0.9rem 1.05rem;text-align:left;font-family:var(--sans);min-height:5.4rem; display:flex;flex-direction:column;justify-content:center;box-shadow:var(--sh-1); transition:border-color .14s,box-shadow .14s,background .14s; } .pick:hover{border-color:var(--jin);box-shadow:var(--sh-2);} .pick[aria-pressed="true"]{border-color:var(--zhu);background:var(--zhu-tint); box-shadow:inset 0 0 0 1px var(--zhu),var(--sh-1);} .pick .p-name{font-size:1.35rem;font-weight:800;letter-spacing:.04em;} .pick .p-price{font-size:1.3rem;font-weight:800;color:var(--zhu);margin-top:0.25rem;font-variant-numeric:tabular-nums;} .pick .p-say{font-size:1rem;color:var(--ink-2);margin-top:0.25rem;} .pick[aria-pressed="true"] .p-name::after{content:" ✓";color:var(--zhu);} /* 步驟：三步，寫清楚「第幾步，共三步」 */ .steps{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;margin-bottom:1rem;font-size:1.02rem;font-weight:700;} .steps .s{display:inline-flex;align-items:center;gap:0.5rem;color:var(--ink-3);} .steps .s .n{ width:2.2rem;height:2.2rem;border-radius:99px;display:grid;place-items:center; border:1px solid var(--line);background:var(--paper);font-weight:800;font-size:1rem; } .steps .s.on{color:var(--zhu);} .steps .s.on .n{background:var(--zhu);border-color:var(--zhu);color:#fff;box-shadow:0 0 0 3px rgba(168,30,22,.14);} .steps .s.done{color:var(--jade);} .steps .s.done .n{background:var(--jade);border-color:var(--jade);color:#fff;} .steps .sep{color:#D6CBB8;} /* 確認清單：付款前把所有內容用大字重述一次 */ .recap{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);padding:1rem 1.1rem;margin-top:0.9rem;} .recap dl{display:grid;grid-template-columns:auto 1fr;gap:0.4rem 1.2rem;} .recap dt{font-size:1.05rem;font-weight:700;color:var(--ink-2);white-space:nowrap;} .recap dd{font-size:1.2rem;font-weight:800;} .recap .grand{margin-top:0.8rem;padding-top:0.8rem;border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:baseline;gap:1rem;} .recap .grand b{font-size:min(2rem,7.5vw);color:var(--zhu);font-variant-numeric:tabular-nums;} /* 統計數字 */ .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:0.7rem;margin-top:0.9rem;} .fig{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:0.85rem 1rem;box-shadow:var(--sh-1);} .fig .f-cap{font-size:1rem;font-weight:700;color:var(--ink-2);letter-spacing:.06em;} .fig .f-val{font-family:var(--sans);font-size:min(2rem,8vw);font-weight:800;line-height:1.15; margin-top:0.1rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;} .fig.hi{border-color:#E2B9B5;background:linear-gradient(180deg,#FEF7F6,var(--paper));} .fig.hi .f-val{color:var(--zhu);} /* 空狀態：空畫面是一個邀請，不是一句道歉 */ .empty{ background:var(--paper);border:1px dashed #D2C7B4;border-radius:var(--radius); padding:1.8rem 1.4rem;text-align:center; } .empty .e-say{font-size:1.3rem;font-weight:700;} .empty .e-note{font-size:1.02rem;color:var(--ink-2);margin-top:0.3rem;} /* ══════════════════════════════════════════ 撤銷提示：所有會改到資料的動作都先做、再給 20 秒反悔 ══════════════════════════════════════════ */ .undo-bar{ position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%); width:min(40rem,calc(100vw - 2rem));z-index:80; background:var(--ink);color:#F7F2EA;border-radius:var(--radius); box-shadow:inset 0 0 0 1px rgba(224,196,120,.5),var(--sh-3); padding:1rem 1.2rem;display:none;align-items:center;gap:1rem;flex-wrap:wrap; } .undo-bar.show{display:flex;} .undo-bar .u-say{font-size:1.1rem;font-weight:700;flex:1 1 14rem;} .undo-bar button{ font-family:var(--sans);font-size:1.05rem;font-weight:800;cursor:pointer;letter-spacing:.06em; min-height:3rem;padding:0.5rem 1.4rem;border-radius:var(--radius-sm); border:1px solid #fff;background:#fff;color:var(--ink); } .undo-bar button:hover{background:#F0EADD;} .undo-bar button.ghost{background:transparent;color:#E4DACB;border-color:rgba(255,255,255,.4);} .undo-bar button.ghost:hover{background:rgba(255,255,255,.12);} /* 確認視窗：破壞性動作一定要說清楚「會怎樣」 */ .mask{ position:fixed;inset:0;background:rgba(26,21,18,0.58);z-index:90; display:none;align-items:center;justify-content:center;padding:1.2rem; backdrop-filter:blur(2px); } .mask.show{display:flex;} .dialog{ background:var(--paper);border-radius:var(--radius); box-shadow:inset 0 3px 0 var(--zhu),var(--sh-3); border:1px solid var(--line); width:min(34rem,100%);padding:1.3rem 1.35rem; } .dialog h2{font-family:var(--kai);font-size:1.75rem;font-weight:700;letter-spacing:.08em;} .dialog p{font-size:1.1rem;color:var(--ink-2);margin-top:0.7rem;text-wrap:pretty;} .dialog .d-row{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.2rem;} .dialog .d-row>*{flex:1 1 12rem;} /* ══════════════════════════════════════════ 找人幫我：永遠在右下角。 假設使用者永遠學不會，介面就要能承受這件事。 ══════════════════════════════════════════ */ .help-fab{ position:fixed;right:1.4rem;bottom:1.4rem;z-index:70; background:var(--jade);color:#fff;border:none;border-radius:99px; font-family:var(--sans);font-size:1.1rem;font-weight:800;letter-spacing:.08em;cursor:pointer; min-height:3.6rem;padding:0.6rem 1.5rem;display:inline-flex;align-items:center;gap:0.5rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),var(--sh-3); transition:background .14s,transform .14s; } .help-fab:hover{background:#0F4E3A;transform:translateY(-2px);} .help-card{ position:fixed;right:1.4rem;bottom:5.8rem;z-index:70;width:min(24rem,calc(100vw - 2.8rem)); background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); box-shadow:inset 0 3px 0 var(--jade),var(--sh-3); padding:1.1rem 1.2rem 1rem;display:none; } .help-card.show{display:block;} .help-card h2{font-family:var(--kai);font-size:1.45rem;font-weight:700;letter-spacing:.08em;} .help-card p{font-size:1.05rem;color:var(--ink-2);margin-top:0.5rem;} .help-card .h-row{display:flex;flex-direction:column;gap:0.6rem;margin-top:0.9rem;} /* 頁尾 */ .foot{border-top:1px solid var(--line);margin-top:2.2rem;background:var(--paper);} .foot-in{max-width:var(--shell);margin:0 auto;padding:1rem var(--gut);font-size:0.95rem;color:var(--ink-3); display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;} /* 頁尾連結也要吃滿 44px 觸控高度，不能因為「只是頁尾」就縮水 */ .foot-in a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:2.6rem;} .foot-in a:hover{color:var(--zhu);} /* 字級調到「大」又在手機上時，一層層的內距會把可用寬度吃光。 把所有方框的左右內距上限綁在螢幕寬度，放大字體版面也不會被擠爆。 */ .panel,.rec,.fig,.empty,.dialog,.finder,.big-money,.cash-hint,.recap,.help-card,.undo-bar,.receipt{ padding-left:min(1.2rem,4.5vw);padding-right:min(1.2rem,4.5vw); } .recap dd{min-width:0;overflow-wrap:anywhere;} @media(max-width:640px){ :root{--gut:0.9rem;} .topbar-in{gap:0.6rem;} .topbar .tools{width:100%;margin-left:0;} .rec .r-side{flex:1 1 100%;min-width:0;} .btn-row.split{flex-direction:column-reverse;align-items:stretch;} .btn-row.split>*{width:100%;} } @media print{ .topbar,.backbar,.help-fab,.help-card,.undo-bar,.te-nav,.nav-veil,.foot,.no-print{display:none!important;} body.has-nav{padding-left:0!important;} .panel,.rec,.fig,.tile{box-shadow:none!important;} } /* ══════════════════════════════════════════════════════════ 分組側欄 全部功能都露出來，依「什麼時候會用到」分四組並標上組名， 側欄一直在，永遠知道自己在哪、可以直接跳。 長者版的部分：每一項 ≥3.2rem 高、字 1.1rem，手機上收成一顆大「功能表」鈕。 ══════════════════════════════════════════════════════════ */ :root{ --nav-w:15.5rem; --nav-bg:#380E0C; --nav-fg:#F3E6E2; --nav-dim:#B58C84; } body.has-nav{padding-left:var(--nav-w);} .te-nav{ position:fixed;left:0;top:0;bottom:0;width:var(--nav-w);z-index:60; background:var(--nav-bg);color:var(--nav-fg);overflow-y:auto;overscroll-behavior:contain; font-family:var(--sans); box-shadow:inset -1px 0 0 rgba(224,196,120,.28); scrollbar-width:thin;scrollbar-color:#6E2A25 transparent; } .te-nav::-webkit-scrollbar{width:10px;} .te-nav::-webkit-scrollbar-thumb{background:#6E2A25;border-radius:99px;border:3px solid var(--nav-bg);} .te-nav .n-brand{padding:0.85rem 1rem;border-bottom:1px solid rgba(224,196,120,.2);} /* logo 的字是紅色與墨色，直接放深色側欄會看不見，所以墊一塊白底 */ .te-nav .n-brand .n-logo{display:block;width:100%;max-width:13rem;height:auto; background:#fff;border-radius:var(--radius-sm);padding:0.55rem 0.7rem;box-shadow:var(--sh-1);} .te-nav .n-brand small{display:block;font-size:0.88rem;color:var(--nav-dim);margin-top:0.4rem;letter-spacing:.12em;} .topbar .who .top-logo{height:2.5rem;width:auto;background:#fff;border-radius:6px;padding:0.2rem 0.45rem;} .te-nav .n-group{ padding:0.9rem 1rem 0.3rem;font-size:0.85rem;font-weight:800;letter-spacing:.28em; color:#9A6F68;text-transform:none; } .te-nav a.n-item{ position:relative;display:flex;align-items:center;gap:0.6rem; min-height:2.9rem;padding:0.4rem 1rem 0.4rem 1.2rem; color:var(--nav-fg);text-decoration:none;font-size:1.1rem;font-weight:600;letter-spacing:.03em; transition:background .12s,color .12s; } .te-nav a.n-item::before{ content:"";position:absolute;left:0;top:0.35rem;bottom:0.35rem;width:3px; border-radius:0 3px 3px 0;background:transparent; } .te-nav a.n-item:hover{background:rgba(255,255,255,.07);color:#fff;} .te-nav a.n-item.on{background:rgba(255,255,255,.11);font-weight:800;color:#fff;} .te-nav a.n-item.on::before{background:var(--jin);} .te-nav a.n-item .n-num{ margin-left:auto;background:rgba(224,196,120,.16);color:#EBCF8B; box-shadow:inset 0 0 0 1px rgba(224,196,120,.45); border-radius:99px;font-size:0.9rem;font-weight:800; padding:0.1rem 0.6rem;min-width:1.9rem;text-align:center;font-variant-numeric:tabular-nums; } .te-nav a.n-item.on .n-num{background:var(--jin);color:#2E1B00;box-shadow:none;} .te-nav a.n-item .n-num.zero{display:none;} .te-nav .n-me{ margin-top:0.7rem;padding:0.9rem 1rem 1.1rem;border-top:1px solid rgba(224,196,120,.2); } .te-nav .n-me .who b{display:block;font-size:1.15rem;font-weight:800;letter-spacing:.04em;} .te-nav .n-me .who small{display:block;font-size:0.9rem;color:var(--nav-dim);} .te-nav .n-me a{ display:flex;align-items:center;justify-content:center;min-height:2.9rem;margin-top:0.5rem; border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm); color:var(--nav-fg);text-decoration:none;font-size:1.05rem;font-weight:700; transition:background .12s,border-color .12s; } .te-nav .n-me a:hover{background:rgba(255,255,255,.1);border-color:rgba(224,196,120,.6);} .te-nav a:focus-visible{outline:3px solid #FFD84D;outline-offset:-3px;} /* 手機：收成一顆大按鈕，點開才蓋上來 */ .nav-toggle{display:none;} .nav-veil{display:none;} @media(max-width:900px){ body.has-nav{padding-left:0;} .te-nav{transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--sh-3);} .te-nav.open{transform:none;} .nav-toggle{ display:inline-flex;align-items:center;gap:0.5rem; font-family:var(--sans);font-size:1.05rem;font-weight:800;cursor:pointer;letter-spacing:.06em; min-height:2.8rem;padding:0.4rem 1.1rem;border-radius:99px; background:#FBF6EE;color:var(--zhu-deep);border:none;box-shadow:var(--sh-1); } .nav-veil.show{display:block;position:fixed;inset:0;background:rgba(26,21,18,.55);z-index:55;} } @media (prefers-reduced-motion:reduce){ .te-nav{transition:none;} } /* ── 廟務總覽：今日這一條（廟的語言，不是系統的語言）── */ .today-bar{ background:linear-gradient(180deg,#FFFDF9,var(--paper)); border:1px solid var(--line);border-left:5px solid var(--zhu); border-radius:var(--radius);padding:0.95rem 1.1rem;margin-top:1rem;box-shadow:var(--sh-1); display:flex;gap:0.8rem 2rem;flex-wrap:wrap;align-items:flex-start; } .today-bar .tb-cell .k{font-size:0.95rem;font-weight:700;color:var(--ink-3);letter-spacing:.12em;} .today-bar .tb-cell .v{font-size:1.32rem;font-weight:800;line-height:1.3;margin-top:0.05rem;letter-spacing:.02em;} .today-bar .tb-cell .v small{font-size:1rem;font-weight:700;color:var(--ink-2);} .today-bar .tb-tag{ margin-left:auto;background:#FDF8EA;border:1px solid var(--jin-soft);border-radius:var(--radius-sm); padding:0.5rem 0.8rem;font-size:0.98rem;font-weight:700;color:var(--jin-text);max-width:26rem;line-height:1.55; } /* ── 模組頁最上面的「這一年一句話」彙總條 ── */ .sum-bar{ background:var(--paper);border:1px solid var(--line);border-radius:var(--radius); padding:0.95rem 1.1rem;margin-top:1rem;box-shadow:var(--sh-1); display:flex;gap:0.6rem 2rem;flex-wrap:wrap;align-items:baseline; } .sum-bar .sb-h{font-family:var(--kai);font-size:1.5rem;font-weight:700;letter-spacing:.08em;} .sum-bar .sb-i{font-size:1.05rem;font-weight:700;color:var(--ink-2);} .sum-bar .sb-i b{font-size:1.45rem;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:0.45rem;} .sum-bar .sb-i.owe b{color:var(--zhu);} .sum-bar .sb-i.got b{color:var(--jade);} /* 燈位（實體燈座編號，廟真正在管的東西）*/ .seat{ display:inline-flex;align-items:center;gap:0.35rem; font-family:var(--sans);font-size:1rem;font-weight:800;letter-spacing:.08em; background:var(--paper-3);border:1px solid var(--line);border-radius:6px;padding:0.15rem 0.6rem; font-variant-numeric:tabular-nums; } .seat.none{color:var(--zhu);border-color:#E2B9B5;background:var(--zhu-tint);} /* ══════════════════════════════════════════════════════════ 各頁自帶元件的統一 20 幾頁各自的