@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600;700;900&family=Noto+Sans+TC:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&family=Oswald:wght@500;600&family=Cormorant+Garamond:wght@600;700&display=swap'); /* ============================================================ Design tokens — four selectable themes. Switch by setting data-theme="classic|minimal|luxury|cream" on . Each theme sets --hero-text explicitly (the hero sits directly on --body-bg, not on a --paper card, so it needs its own contrast color). ============================================================ */ :root, :root[data-theme="classic"]{ --ink:#1B2340; --ink-soft:#4A5170; --paper:#F7F1E2; --paper-dim:#EFE7D2; --accent:#B23A2E; --accent-dark:#8C2C22; --brass:#B8935A; --brass-light:#D9BD8C; --green-ok:#3F6B4C; --line:rgba(27,35,64,0.16); --shadow:0 18px 40px rgba(15,18,36,0.35); --body-bg:#1B2340; --hero-text:#F7F1E2; --bg-decoration: radial-gradient(circle at 15% 8%, rgba(184,147,90,0.10), transparent 40%), radial-gradient(circle at 85% 90%, rgba(178,58,46,0.12), transparent 45%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Oswald', sans-serif; --radius-lg:18px; --radius-md:12px; --radius-sm:8px; } :root[data-theme="minimal"]{ --ink:#26302B; --ink-soft:#66756D; --paper:#FFFFFF; --paper-dim:#F3F5F1; --accent:#5C7A63; --accent-dark:#435C49; --brass:#C9A063; --brass-light:#E4CE9F; --green-ok:#4C7A5C; --line:rgba(38,48,43,0.12); --shadow:0 14px 34px rgba(38,48,43,0.14); --body-bg:#F4F1E9; --hero-text:#2A342E; --bg-decoration: radial-gradient(circle at 12% 10%, rgba(92,122,99,0.08), transparent 42%), radial-gradient(circle at 88% 88%, rgba(201,160,99,0.10), transparent 45%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Noto Sans TC', sans-serif; --radius-lg:22px; --radius-md:14px; --radius-sm:9px; } :root[data-theme="luxury"]{ --ink:#F3E6C8; --ink-soft:#C9B98F; --paper:#1A1611; --paper-dim:#211C15; --accent:#C9A24B; --accent-dark:#A9812F; --brass:#E7C878; --brass-light:#F5E1AC; --green-ok:#7FAE8B; --line:rgba(231,200,120,0.18); --shadow:0 22px 48px rgba(0,0,0,0.55); --body-bg:#0F0D09; --hero-text:#F3E6C8; --bg-decoration: radial-gradient(circle at 18% 10%, rgba(231,200,120,0.10), transparent 42%), radial-gradient(circle at 85% 90%, rgba(201,162,75,0.14), transparent 48%); --font-display:'Cormorant Garamond', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Oswald', sans-serif; --radius-lg:14px; --radius-md:10px; --radius-sm:6px; } :root[data-theme="cream"]{ --ink:#3E3626; --ink-soft:#8A7C67; --paper:#FFFDF9; --paper-dim:#F3ECDD; --accent:#B5654A; --accent-dark:#8F4C36; --brass:#C9A063; --brass-light:#E8D2A8; --green-ok:#5C7A52; --line:rgba(62,54,38,0.14); --shadow:0 16px 36px rgba(80,64,40,0.16); --body-bg:#F7EFDF; --hero-text:#3E3626; --bg-decoration: radial-gradient(circle at 14% 10%, rgba(181,101,74,0.08), transparent 42%), radial-gradient(circle at 88% 90%, rgba(201,160,99,0.14), transparent 46%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Noto Sans TC', sans-serif; --radius-lg:20px; --radius-md:13px; --radius-sm:9px; } :root[data-theme="khaki"]{ --ink:#2B2A25; --ink-soft:#7A7568; --paper:#FAF7F0; --paper-dim:#F0EBDD; --accent:#6B7350; --accent-dark:#4F5539; --brass:#B08D57; --brass-light:#D4BE94; --green-ok:#6B8F6C; --line:rgba(43,42,37,0.14); --shadow:0 12px 28px rgba(43,42,37,0.12); --body-bg:#EDE7D8; --hero-text:#2B2A25; --bg-decoration: radial-gradient(circle at 14% 10%, rgba(107,115,80,0.08), transparent 42%), radial-gradient(circle at 88% 90%, rgba(176,141,87,0.10), transparent 46%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Noto Sans TC', sans-serif; --radius-lg:10px; --radius-md:8px; --radius-sm:5px; } :root[data-theme="mist"]{ --ink:#33373B; --ink-soft:#848D93; --paper:#FBFBFA; --paper-dim:#EEF0EF; --accent:#5E7C89; --accent-dark:#425A64; --brass:#B7A78E; --brass-light:#D9CFBB; --green-ok:#6B8F6C; --line:rgba(51,55,59,0.12); --shadow:0 12px 28px rgba(51,55,59,0.10); --body-bg:#E7E9E7; --hero-text:#33373B; --bg-decoration: radial-gradient(circle at 14% 10%, rgba(94,124,137,0.08), transparent 42%), radial-gradient(circle at 88% 90%, rgba(183,167,142,0.10), transparent 46%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Noto Sans TC', sans-serif; --radius-lg:10px; --radius-md:8px; --radius-sm:5px; } :root[data-theme="rose"]{ --ink:#4A2E30; --ink-soft:#9B7B7C; --paper:#FFF8F7; --paper-dim:#F6E7E5; --accent:#C1616B; --accent-dark:#9C4750; --brass:#C9A063; --brass-light:#E4CE9F; --green-ok:#6B8F6C; --line:rgba(74,46,48,0.14); --shadow:0 14px 34px rgba(90,52,54,0.16); --body-bg:#F3E3E0; --hero-text:#4A2E30; --bg-decoration: radial-gradient(circle at 12% 10%, rgba(193,97,107,0.08), transparent 42%), radial-gradient(circle at 88% 88%, rgba(201,160,99,0.10), transparent 45%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Noto Sans TC', sans-serif; --radius-lg:22px; --radius-md:14px; --radius-sm:9px; } :root[data-theme="gray"]{ --ink:#2B2D30; --ink-soft:#7C7F84; --paper:#FAFAF9; --paper-dim:#EEEDEC; --accent:#8B3A3A; --accent-dark:#6B2C2C; --brass:#A9A29B; --brass-light:#CFC9C0; --green-ok:#5C7A63; --line:rgba(43,45,48,0.13); --shadow:0 14px 32px rgba(43,45,48,0.14); --body-bg:#E4E3E1; --hero-text:#2B2D30; --bg-decoration: radial-gradient(circle at 12% 10%, rgba(139,58,58,0.06), transparent 42%), radial-gradient(circle at 88% 88%, rgba(169,162,155,0.12), transparent 45%); --font-display:'Noto Serif TC', serif; --font-mono:'JetBrains Mono', monospace; --font-ui:'Noto Sans TC', sans-serif; --radius-lg:14px; --radius-md:10px; --radius-sm:7px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ background:var(--body-bg); background-image:var(--bg-decoration); color:var(--ink); font-family:'Noto Sans TC', sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased; transition:background-color .3s; } ::selection{ background:var(--brass-light); color:var(--ink); } a{ color:inherit; } .eyebrow{ font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:var(--brass-light); } .eyebrow.dark{ color:var(--accent); } .hero .eyebrow{ color:#000000; } /* ---------- theme preview switcher (only shown while choosing a style) ---------- */ .theme-bar{ position:sticky; top:0; z-index:80; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding:10px 24px; background:rgba(10,10,12,0.88); backdrop-filter:blur(6px); border-bottom:1px solid rgba(184,147,90,0.25); font-family:var(--font-mono); } .theme-bar-row{ display:flex; align-items:center; gap:12px; } .theme-bar .label{ font-size:11px; color:rgba(247,241,226,0.55); letter-spacing:.08em; } .theme-switch{ display:inline-flex; border:1px solid rgba(184,147,90,0.45); border-radius:999px; padding:3px; gap:3px; background:rgba(0,0,0,0.25); } .theme-switch button{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.03em; padding:6px 14px; border-radius:999px; border:none; background:transparent; color:rgba(247,241,226,0.65); cursor:pointer; } .theme-switch button.active{ background:#D9BD8C; color:#1B2340; font-weight:600; } .theme-bar .hint{ font-size:11px; color:rgba(247,241,226,0.4); max-width:280px; line-height:1.5; text-align:right; } /* ---------- hero ---------- */ .hero{ max-width:1040px; margin:0 auto; padding:52px 24px 28px; text-align:center; color:var(--hero-text); } .site-logo{ max-height:72px; max-width:220px; margin:0 auto 16px; display:block; object-fit:contain; } .hero h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(28px,4.6vw,46px); margin:12px 0 8px; } .hero .sub{ color:#B23A2E; opacity:1; font-size:14.5px; margin-bottom:20px; } .hero .meta-row{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; } .hero .meta-chip{ font-family:'Noto Sans TC',sans-serif; color:inherit; cursor:pointer; font-size:13px; background:rgba(140,140,140,0.10); border:1px solid rgba(184,147,90,0.4); padding:8px 16px; border-radius:999px; transition:transform .15s, border-color .15s; } .hero .meta-chip:hover{ transform:translateY(-2px); border-color:var(--brass); } .hero .meta-chip b{ color:var(--brass); font-weight:700; } .meta-card{ width:220px; text-align:left; border-radius:var(--radius-md); overflow:hidden; background:rgba(140,140,140,0.10); border:1px solid rgba(184,147,90,0.4); padding:0; font-family:'Noto Sans TC',sans-serif; color:inherit; cursor:pointer; transition:transform .15s, border-color .15s, box-shadow .15s; } .meta-card:hover{ transform:translateY(-3px); border-color:var(--brass); box-shadow:var(--shadow); } .meta-card-img{ display:block; width:100%; height:220px; object-fit:contain; background:rgba(0,0,0,0.12); } .meta-card-caption{ padding:10px 14px; font-size:13px; } .meta-card-caption b{ color:var(--brass); font-weight:700; display:block; margin-top:2px; } @media (max-width:520px){ .meta-card{ width:100%; max-width:280px; } } /* ---------- ticket card ---------- */ .ticket-wrap{ max-width:960px; margin:26px auto 90px; padding:0 24px; } .ticket{ display:grid; grid-template-columns:1fr 300px; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; position:relative; animation:rise .5s ease both; } @keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} } .ticket-main{ padding:34px 36px; max-height:80vh; overflow-y:auto; } .ticket-stub{ background:var(--paper-dim); padding:32px 24px; border-left:2px dashed var(--line); position:relative; display:flex; flex-direction:column; } .ticket-stub::before, .ticket-stub::after{ content:""; position:absolute; left:-13px; width:26px; height:26px; background:var(--body-bg); border-radius:50%; } .ticket-stub::before{ top:-13px; } .ticket-stub::after{ bottom:-13px; } .form-title{ font-family:var(--font-display); font-weight:700; font-size:21px; margin:6px 0 4px; } .form-desc{ color:var(--ink-soft); font-size:13.5px; margin-bottom:20px; } .field{ margin-bottom:14px; } .field label{ display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; color:var(--ink-soft); } .same-as-prev-btn{ margin-left:8px; padding:2px 10px; border-radius:999px; border:1.5px solid var(--accent); background:transparent; color:var(--accent); font-family:'Noto Sans TC',sans-serif; font-size:11px; font-weight:700; cursor:pointer; vertical-align:middle; } .same-as-prev-btn:hover{ background:var(--accent); color:#fff; } .field input, .field select{ width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:'Noto Sans TC',sans-serif; font-size:13.5px; background:color-mix(in srgb, var(--paper) 92%, white 8%); color:var(--ink); outline:none; transition:border-color .15s; } .field input:focus{ border-color:var(--accent); } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .category-note-field{ margin-top:16px; } .category-note-field textarea{ width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; font-family:'Noto Sans TC',sans-serif; background:color-mix(in srgb, var(--paper) 92%, white 8%); color:var(--ink); resize:vertical; } .minguo-date-row{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:8px; } .minguo-select{ width:100%; padding:10px 8px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:'Noto Sans TC',sans-serif; font-size:13px; background:color-mix(in srgb, var(--paper) 92%, white 8%); color:var(--ink); outline:none; transition:border-color .15s; } .minguo-select:focus{ border-color:var(--accent); } .attendee-card{ border:1.5px solid var(--line); border-radius:var(--radius-md); padding:18px; margin-bottom:14px; position:relative; background:color-mix(in srgb, var(--paper) 96%, black 4%); } .attendee-num{ font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; } .remove-btn{ position:absolute; top:14px; right:14px; background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:15px; } .remove-btn:hover{ color:var(--accent); } .ceremony-check{ display:flex; align-items:center; gap:9px; padding:9px 12px; border:1.5px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; cursor:pointer; font-size:13px; } .ceremony-check input{ width:16px; height:16px; accent-color:var(--accent); } .ceremony-check .amt{ margin-left:auto; font-family:var(--font-mono); color:var(--accent); font-weight:700; font-size:12.5px; } .day-select{ margin-left:auto; padding:6px 10px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:12.5px; background:#fff; color:var(--ink); } .day-select:disabled{ opacity:.4; } .wish-field textarea{ width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; font-family:'Noto Sans TC',sans-serif; background:color-mix(in srgb, var(--paper) 92%, white 8%); color:var(--ink); resize:vertical; } .wish-field{ margin-top:10px; } .category-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; } .category-tabs button{ border:1.5px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:999px; padding:8px 18px; font-size:13px; cursor:pointer; font-family:var(--font-ui); } .category-tabs button.active{ background:var(--accent); color:#fff; border-color:var(--accent); } .category-empty-hint{ font-size:12.5px; color:var(--ink-soft); padding:14px; text-align:center; border:1.5px dashed var(--line); border-radius:var(--radius-md); margin-bottom:14px; } .add-attendee-btn{ width:100%; padding:12px; border:1.5px dashed var(--brass); border-radius:var(--radius-md); background:transparent; color:var(--ink-soft); font-family:var(--font-ui); font-size:14px; cursor:pointer; margin-bottom:18px; } .add-attendee-btn:hover{ background:rgba(184,147,90,0.08); } .submit-btn{ width:100%; margin-top:6px; padding:14px; border:none; border-radius:var(--radius-md); background:var(--accent); color:#fff; font-family:var(--font-ui); font-size:15px; letter-spacing:.05em; cursor:pointer; transition:background .15s, transform .1s; } .submit-btn:hover{ background:var(--accent-dark); } .submit-btn:active{ transform:scale(0.98); } .submit-btn:disabled{ background:var(--ink-soft); opacity:.5; cursor:not-allowed; } .submit-btn.secondary{ background:transparent; border:1.5px solid var(--accent); color:var(--accent); } .stub-label{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; } .stub-name{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:6px 0 2px; min-height:26px; } .stub-line{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; min-height:18px; } .stub-divider{ border-top:1px dashed var(--line); margin:14px 0; } .stub-total{ font-family:var(--font-mono); font-size:24px; color:var(--accent); font-weight:700; margin-top:6px; } .stub-code{ font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; color:var(--accent); margin-top:auto; } .stub-barcode{ height:32px; margin-top:14px; background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px); opacity:.55; border-radius:2px; } /* ============================================================ Layouts — two non-ticket alternatives, selectable independently of the color theme via data-layout="scroll|plain" on . ============================================================ */ :root[data-layout="scroll"] .ticket, :root[data-layout="plain"] .ticket{ grid-template-columns:1fr; max-width:660px; margin-left:auto; margin-right:auto; } :root[data-layout="scroll"] .ticket-stub, :root[data-layout="plain"] .ticket-stub{ display:none; } :root[data-layout="scroll"] .ticket{ border-radius:4px; } :root[data-layout="scroll"] .ticket::before{ content:"✦ 法 會 報 名 ✦"; display:block; text-align:center; letter-spacing:.3em; font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--brass); padding:14px 0; background:var(--paper-dim); border-bottom:1.5px solid var(--line); } :root[data-layout="scroll"] .ticket-main{ padding:40px 52px 48px; position:relative; } :root[data-layout="scroll"] .ticket-main::before, :root[data-layout="scroll"] .ticket-main::after{ content:""; position:absolute; top:0; bottom:0; width:10px; background:repeating-linear-gradient(180deg, var(--brass) 0 2px, transparent 2px 10px); opacity:.35; } :root[data-layout="scroll"] .ticket-main::before{ left:14px; } :root[data-layout="scroll"] .ticket-main::after{ right:14px; } :root[data-layout="scroll"] .form-title{ text-align:center; font-size:23px; } :root[data-layout="scroll"] .form-desc{ text-align:center; } :root[data-layout="scroll"] .eyebrow.dark{ display:block; text-align:center; } :root[data-layout="plain"] .ticket{ border-radius:20px; box-shadow:0 10px 28px rgba(0,0,0,0.14); } :root[data-layout="plain"] .ticket-main{ padding:40px 44px; } /* ---------- split: sidebar-style summary panel ---------- */ :root[data-layout="split"] .ticket{ grid-template-columns:260px 1fr; border-radius:var(--radius-lg); } :root[data-layout="split"] .ticket-stub{ display:flex; order:-1; border-left:none; border-right:2px dashed var(--line); } :root[data-layout="split"] .ticket-stub::before, :root[data-layout="split"] .ticket-stub::after{ display:none; } :root[data-layout="split"] .stub-barcode{ display:none; } :root[data-layout="split"] .ticket-main{ padding:36px 40px; } /* ---------- stepper: rounded app-like card with a step badge, using the split layout's sidebar for the running amount ---------- */ :root[data-layout="stepper"] .ticket{ grid-template-columns:250px 1fr; max-width:900px; margin-left:auto; margin-right:auto; border-radius:26px; box-shadow:0 24px 54px rgba(0,0,0,0.16); } :root[data-layout="stepper"] .ticket-stub{ display:flex; order:-1; border-left:none; border-right:2px dashed var(--line); } :root[data-layout="stepper"] .ticket-stub::before, :root[data-layout="stepper"] .ticket-stub::after{ display:none; } :root[data-layout="stepper"] .stub-barcode{ display:none; } :root[data-layout="stepper"] .ticket-main{ padding:40px 42px; } :root[data-layout="stepper"] .eyebrow.dark{ display:inline-block; background:var(--accent); color:#fff; padding:5px 16px; border-radius:999px; font-size:11px; letter-spacing:.08em; } :root[data-layout="stepper"] .form-title{ margin-top:12px; } /* ---------- invite: refined gilded invitation card ---------- */ :root[data-layout="invite"] .ticket{ grid-template-columns:1fr; max-width:600px; margin-left:auto; margin-right:auto; border:1px solid var(--brass); border-radius:2px; position:relative; } :root[data-layout="invite"] .ticket::before{ content:""; position:absolute; inset:8px; border:1px solid var(--brass); pointer-events:none; } :root[data-layout="invite"] .ticket-stub{ display:none; } :root[data-layout="invite"] .ticket-main{ padding:48px 46px; } :root[data-layout="invite"] .form-title{ text-align:center; font-size:24px; letter-spacing:.05em; } :root[data-layout="invite"] .form-desc{ text-align:center; } :root[data-layout="invite"] .eyebrow.dark{ display:block; text-align:center; letter-spacing:.25em; } .form-box.hidden, .review-box, .confirm-box{ display:none; } .review-box.active{ display:block; } .confirm-box.active{ display:block; } .summary-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; } .summary-row .who b{ display:block; } .summary-row .who span{ color:var(--ink-soft); font-size:12px; } .summary-row .subtotal{ font-family:var(--font-mono); font-weight:700; } .grand-total{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--paper-dim); border-radius:var(--radius-md); margin:16px 0; } .grand-total .lbl{ font-family:var(--font-ui); font-size:14px; } .grand-total .val{ font-family:var(--font-mono); font-size:24px; color:var(--accent); font-weight:700; } .pay-option{ background:color-mix(in srgb, var(--paper) 92%, black 8%); border:1.5px dashed var(--brass); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; } .pay-option .k{ font-family:var(--font-ui); font-size:12.5px; color:var(--accent); margin-bottom:4px; } .pay-option .v{ font-family:var(--font-mono); font-size:14px; font-weight:700; } .pay-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .pay-row .v, .pay-row .code{ flex:1; word-break:break-all; } .copy-btn{ flex-shrink:0; padding:7px 14px; border-radius:999px; border:1.5px solid var(--accent); background:transparent; color:var(--accent); font-family:'Noto Sans TC',sans-serif; font-size:12.5px; font-weight:700; cursor:pointer; transition:background .15s, color .15s; } .copy-btn:hover{ background:var(--accent); color:#fff; } .copy-btn:active{ transform:scale(0.96); } .step-note{ background:var(--paper-dim); border-radius:var(--radius-md); padding:14px 16px; margin:14px 0; font-size:12.5px; color:var(--ink-soft); line-height:1.7; } .step-note b{ color:var(--ink); } .bind-box{ background:var(--paper-dim); border:1.5px dashed var(--green-ok); border-radius:var(--radius-md); padding:14px 16px; margin:14px 0; } .bind-box .code{ font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--green-ok); letter-spacing:.08em; } .bind-reuse-box{ background:var(--paper-dim); border:1.5px solid var(--accent); border-radius:var(--radius-md); padding:14px 16px; margin:14px 0; } .bind-reuse-box .submit-btn{ padding:10px 16px; font-size:13px; } .bind-reuse-box .submit-btn.secondary{ background:transparent; border:1.5px solid var(--line); color:var(--ink-soft); box-shadow:none; } .category-sync-box{ background:var(--paper-dim); border:1.5px solid var(--accent); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:16px; } .category-sync-box .submit-btn{ padding:10px 16px; font-size:13px; } .category-sync-box .submit-btn.secondary{ background:transparent; border:1.5px solid var(--line); color:var(--ink-soft); box-shadow:none; } .note-field{ margin-top:14px; } .note-field input{ width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13.5px; font-family:'Noto Sans TC',sans-serif; background:color-mix(in srgb, var(--paper) 92%, white 8%); color:var(--ink); } .note-field label{ display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink-soft); } .thankyou{ text-align:center; padding:20px 0; } .thankyou .big{ font-size:36px; margin-bottom:8px; } .edit-hint{ font-size:12.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.7; } .edit-link{ background:none; border:none; padding:0; color:var(--accent); font-weight:700; text-decoration:underline; cursor:pointer; font-size:12.5px; font-family:inherit; } .error-banner{ background:rgba(178,58,46,0.12); border:1.5px solid var(--accent); color:var(--accent); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; margin-bottom:14px; display:none; } .error-banner.show{ display:block; } .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#1B2340; color:#F7F1E2; padding:12px 22px; border-radius:999px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; box-shadow:0 18px 40px rgba(15,18,36,0.35); z-index:100; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .lookup-link{ margin-top:16px; background:none; border:none; color:#B23A2E; font-size:17px; font-weight:600; text-decoration:underline; cursor:pointer; font-family:'Noto Sans TC',sans-serif; } .remember-wrap{ max-width:960px; margin:0 auto; padding:0 24px; } .remember-banner{ background:var(--paper); border:1.5px solid var(--brass); border-radius:var(--radius-md); padding:16px 20px; margin-bottom:0; box-shadow:var(--shadow); animation:rise .4s ease both; } .remember-banner .rb-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .remember-banner .rb-title{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); } .remember-banner .rb-code{ font-family:var(--font-mono); font-weight:700; color:var(--accent); } .remember-banner .rb-dismiss{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:13px; } /* ---------- lookup modal ---------- */ .modal-overlay{ display:none; position:fixed; inset:0; background:rgba(10,10,12,0.6); z-index:200; align-items:center; justify-content:center; padding:20px; } .modal-overlay.show{ display:flex; } .modal-card{ position:relative; width:100%; max-width:520px; max-height:86vh; overflow-y:auto; background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:32px; animation:rise .35s ease both; } .modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:16px; color:var(--ink-soft); cursor:pointer; } .modal-close:hover{ color:var(--accent); } .result-card{ border:1.5px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; margin-top:14px; background:color-mix(in srgb, var(--paper) 96%, black 4%); } .result-card .rc-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; } .result-card .rc-code{ font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:15px; } .result-card .rc-attendee{ font-size:12.5px; padding:5px 0; border-bottom:1px dashed var(--line); } .result-card .rc-attendee:last-of-type{ border-bottom:none; } .result-card .rc-attendee b{ display:block; } .result-card .rc-attendee span{ color:var(--ink-soft); } .result-card .rc-total{ display:flex; justify-content:space-between; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-family:var(--font-mono); font-weight:700; color:var(--accent); } .result-card .rc-note-form{ margin-top:12px; display:flex; gap:8px; } .result-card .rc-note-form input{ flex:1; padding:9px 11px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:12.5px; } .result-card .rc-note-form button{ padding:9px 14px; border:none; border-radius:var(--radius-sm); background:var(--accent); color:#fff; font-size:12px; cursor:pointer; white-space:nowrap; } .empty-hint{ text-align:center; color:var(--ink-soft); font-size:13px; padding:20px 0; } footer{ text-align:center; padding:30px; color:rgba(247,241,226,0.35); font-size:11.5px; font-family:var(--font-mono); } @media (max-width:720px){ .ticket{ grid-template-columns:1fr; } .ticket-stub{ border-left:none; border-top:2px dashed var(--line); } /* mobile browsers resize the visible viewport as the address bar hides/shows while scrolling, so a vh-based max-height here made the card visibly grow and shrink ("忽大忽小") — on mobile let it flow with the normal page scroll */ .ticket-main{ max-height:none; overflow-y:visible; } .field-row{ grid-template-columns:1fr; } .theme-bar{ flex-direction:column; align-items:flex-start; gap:8px; } .theme-bar .hint{ text-align:left; } :root[data-layout="split"] .ticket{ grid-template-columns:1fr; } :root[data-layout="split"] .ticket-stub{ border-right:none; border-top:2px dashed var(--line); order:0; } :root[data-layout="stepper"] .ticket{ grid-template-columns:1fr; } :root[data-layout="stepper"] .ticket-stub{ border-right:none; border-top:2px dashed var(--line); order:0; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }