/* ========================================================================== TrueSend — Brand stylesheet Direction A 「封」Registered: paper background, ink navy, scarce hanko vermilion, hairline borders, 2–3px radii, ledger/stamp motifs. Single shared stylesheet for all pages — see BRIEF.md for the spec this file implements. Section numbers below mirror BRIEF.md §3–§6. ========================================================================== */ /* --------------------------------------------------------------------------- 1. Design tokens (BRIEF §3) ------------------------------------------------------------------------ */ :root{ --paper:#FBFAF7; /* page background */ --card:#FFFFFF; /* cards, panels */ --ink:#182338; /* text, primary buttons, bars */ --ink-60:#5A6478; /* secondary text */ --ink-12:rgba(24,35,56,.13); /* hairline borders */ --ink-06:rgba(24,35,56,.06); /* subtle fills, zebra rows */ --shu:#C33A22; /* the seal vermilion — accents, stamps, focus ring */ --shu-deep:#9E2B18; /* destructive buttons, error text */ --shu-soft:rgba(195,58,34,.08); /* vermilion tint fills */ --ok:#2F6E4F; /* success (完了/有効) */ --ok-soft:rgba(47,110,79,.10); /* success tint */ --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP","Meiryo",sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Code","Osaka-Mono","MS Gothic",monospace; } /* --------------------------------------------------------------------------- 2. Reset ------------------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;-webkit-text-size-adjust:100%} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} ul,ol{list-style:none} table{border-collapse:collapse} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} fieldset{border:0} /* --------------------------------------------------------------------------- 3. Base typography (BRIEF §3) body: font-feature-settings "palt", line-height 1.9, antialiased ------------------------------------------------------------------------ */ body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-feature-settings:"palt"; font-size:.95rem; line-height:1.9; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Heading scale — h1 clamp(2rem,4.2vw,3.3rem)/800, h2 1.55rem/800, h3 1rem/800 */ h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:.01em;color:var(--ink)} h1{font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.42} h2{font-size:1.55rem;line-height:1.5} h3{font-size:1rem;line-height:1.5} p{color:var(--ink)} .lede{font-size:1.02rem;color:var(--ink-60);max-width:34em} small,.small{font-size:.82rem} /* Captions / timestamps — .72–.75rem mono */ .caption{font-family:var(--mono);font-size:.72rem;color:var(--ink-60)} .mono{font-family:var(--mono)} /* --------------------------------------------------------------------------- 4. Layout / container (BRIEF §3 — max-width 1120px, 32px side padding, 20px under 640px) ------------------------------------------------------------------------ */ .container,.wrap{max-width:1120px;margin:0 auto;padding:0 32px} @media (max-width:640px){ .container,.wrap{padding:0 20px} } /* --------------------------------------------------------------------------- 5. Eyebrow (BRIEF §3 — .78rem/700, letter-spacing .14em, vermilion, preceded by a 22px rule) ------------------------------------------------------------------------ */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:700;letter-spacing:.14em; color:var(--shu);margin-bottom:22px; } .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--shu);flex:none} /* --------------------------------------------------------------------------- 6. Buttons — .btn / .btn-primary / .btn-ghost / .btn-danger ------------------------------------------------------------------------ */ .btn{ display:inline-block; padding:14px 30px; font-weight:700; font-size:.95rem; border-radius:2px; text-align:center; border:1.5px solid transparent; transition:opacity .15s ease; } .btn:hover{opacity:.86} .btn[disabled],.btn.is-disabled{opacity:.4;pointer-events:none;cursor:not-allowed} .btn-primary{background:var(--ink);color:var(--paper)} .btn-ghost{border-color:var(--ink-12);color:var(--ink)} .btn-danger{background:var(--shu-deep);color:var(--paper)} /* --------------------------------------------------------------------------- 7. Forms — .field / .input / .select / .textarea / .field-help / .field-error ------------------------------------------------------------------------ */ .field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px} .field > label{font-size:.8rem;font-weight:700;color:var(--ink)} .input,.select,.textarea{ width:100%; background:var(--card); border:1px solid var(--ink-12); border-radius:2px; padding:12px 14px; font-family:var(--sans); font-size:.9rem; color:var(--ink); } .textarea{min-height:120px;resize:vertical} .select{ appearance:none;-webkit-appearance:none; background-image: linear-gradient(45deg,transparent 50%,var(--ink-60) 50%), linear-gradient(135deg,var(--ink-60) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 15px) center; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px; } .input:focus,.select:focus,.textarea:focus{ outline:2px solid var(--shu);outline-offset:2px;border-color:var(--shu); } .field-help{font-size:.78rem;color:var(--ink-60)} .field-error{font-size:.78rem;color:var(--shu-deep);font-weight:700} .field.has-error .input, .field.has-error .select, .field.has-error .textarea{border-color:var(--shu-deep)} /* --------------------------------------------------------------------------- 8. Cards — .card / .card-record ------------------------------------------------------------------------ */ .card{ background:var(--card); border:1px solid var(--ink-12); border-radius:3px; padding:28px; } /* .card-record adds the double border + shadow of the 送達記録 object. Shadow is used only here (BRIEF §3: shadows reserved for the record card). */ .card-record{ position:relative; box-shadow:0 24px 48px -32px rgba(24,35,56,.35); padding:28px 28px 22px; } .card-record::before{ content:"";position:absolute;inset:6px; border:1px solid var(--ink-12);border-radius:2px;pointer-events:none; } /* --------------------------------------------------------------------------- 9. Record ledger table — .record (mono timestamp column, dashed row separators, bold event + ink-60 sub-line) ------------------------------------------------------------------------ */ .record-head{ display:flex;justify-content:space-between;align-items:baseline; padding-bottom:14px;margin-bottom:6px;border-bottom:1.5px solid var(--ink); } .record-head .t{font-weight:800;font-size:.95rem;letter-spacing:.1em} .record-head .no{font-family:var(--mono);font-size:.72rem;color:var(--ink-60)} table.record{width:100%;border-collapse:collapse;font-size:.82rem} table.record td{padding:10px 2px;border-bottom:1px dashed var(--ink-12);vertical-align:top} table.record tr:last-child td{border-bottom:none} table.record td.time{ font-family:var(--mono);white-space:nowrap;color:var(--ink-60); width:9.5em;font-size:.75rem; } table.record td.ev b{font-weight:700} table.record td.ev .who{color:var(--ink-60);font-size:.75rem} .record-foot{ display:flex;justify-content:space-between;align-items:center; margin-top:14px;font-size:.72rem;color:var(--ink-60);gap:12px;flex-wrap:wrap; } /* --------------------------------------------------------------------------- 10. Stamp — .stamp (circular hanko SVG, rotated −8°, vermilion strokes) Base class only sets size/rotation so it also works in normal flow (ds pages, logo sheet). Absolute placement is scoped to the record card. ------------------------------------------------------------------------ */ .stamp{width:92px;height:92px;transform:rotate(-8deg);opacity:.92} .card-record .stamp{position:absolute;right:22px;bottom:20px} /* --------------------------------------------------------------------------- 11. Badges — .badge base + .badge-ok / .badge-muted / .badge-err ------------------------------------------------------------------------ */ .badge{ display:inline-flex;align-items:center;gap:5px; font-size:.7rem;font-weight:700;letter-spacing:.02em; padding:4px 10px;border-radius:2px;white-space:nowrap; } .badge-ok{background:var(--ok-soft);color:var(--ok)} .badge-muted{background:var(--ink-06);color:var(--ink-60)} .badge-err{background:var(--shu-soft);color:var(--shu-deep)} /* --------------------------------------------------------------------------- 12. Steps — .steps: recipient progress indicator (numbered circles + labels, e.g. ①内容の確認 ②メール認証 ③受け取り; current step vermilion) ------------------------------------------------------------------------ */ .steps{display:flex;align-items:flex-start;flex-wrap:wrap} .steps .step{ display:flex;align-items:center;gap:10px; font-size:.85rem;color:var(--ink-60); padding-right:22px;margin-right:22px;position:relative; } .steps .step:not(:last-child)::after{ content:"";position:absolute;right:0;top:50%;width:14px;height:1px; background:var(--ink-12);transform:translateY(-50%); } .steps .step .n{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border:1.5px solid var(--ink-12);border-radius:50%; font-weight:800;font-size:.8rem;color:var(--ink-60);flex:none; } .steps .step.is-current{color:var(--ink);font-weight:700} .steps .step.is-current .n{border-color:var(--shu);color:var(--shu);background:var(--shu-soft)} .steps .step.is-done .n{border-color:var(--ink);color:var(--ink)} @media (max-width:640px){ .steps{flex-direction:column;gap:14px} .steps .step{margin-right:0;padding-right:0} .steps .step:not(:last-child)::after{display:none} } /* --------------------------------------------------------------------------- 13. Step grid — marketing "four gates" pattern (index/features long-form flow explainer). Separate names from .steps to avoid colliding with the recipient progress indicator above. ------------------------------------------------------------------------ */ .steps-head{ display:flex;align-items:baseline;justify-content:space-between; margin-bottom:44px;gap:16px;flex-wrap:wrap; } .steps-head .en{font-size:.72rem;letter-spacing:.22em;color:var(--ink-60);font-weight:600} .step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:1px solid var(--ink-12)} .step-grid .step{border-right:1px solid var(--ink-12);padding:6px 24px 24px} .step-grid .step .n{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%; font-weight:800;font-size:.85rem;margin-bottom:16px; } .step-grid .step:last-child .n{border-color:var(--shu);color:var(--shu);background:var(--shu-soft)} .step-grid .step h3{margin-bottom:10px} .step-grid .step p{font-size:.82rem;color:var(--ink-60)} @media (max-width:880px){ .step-grid{grid-template-columns:1fr 1fr;border-top:1px solid var(--ink-12)} .step-grid .step{padding:20px 18px} } /* --------------------------------------------------------------------------- 14. Alerts — .alert base + .alert-info / .alert-error ------------------------------------------------------------------------ */ .alert{padding:16px 20px;border-radius:2px;font-size:.86rem;line-height:1.7} .alert b,.alert strong{display:block;margin-bottom:4px;font-weight:700} .alert-info{background:var(--ink-06);color:var(--ink)} .alert-error{background:var(--shu-soft);color:var(--shu-deep)} /* --------------------------------------------------------------------------- 15. Captcha mock — .captcha-mock (static; checkbox square + label + caption) ------------------------------------------------------------------------ */ .captcha-mock{ display:flex;align-items:center;gap:14px; background:var(--card);border:1px solid var(--ink-12);border-radius:2px; padding:16px 20px;max-width:320px; } .captcha-mock .box{ width:26px;height:26px;border:1.5px solid var(--ink-12);border-radius:2px;flex:none; } .captcha-mock .label{font-size:.85rem;flex:1} .captcha-mock .brand{font-family:var(--mono);font-size:.62rem;color:var(--ink-60);text-align:right;line-height:1.4} /* --------------------------------------------------------------------------- 16. Progress — .progress (6px track, solid --shu fill, radius 3px) ------------------------------------------------------------------------ */ .progress{height:6px;background:var(--ink-06);border-radius:3px;overflow:hidden} .progress .fill{height:100%;background:var(--shu);border-radius:3px} .progress-caption{font-family:var(--mono);font-size:.75rem;color:var(--ink-60);margin-top:8px} /* --------------------------------------------------------------------------- 17. Table — .table (data tables, .8rem, hairline row borders, ink-60 th labels .72rem letterspaced, zebra optional). .table-scroll wraps a table for the 375px overflow-x:auto requirement (BRIEF §6). ------------------------------------------------------------------------ */ .table-scroll{overflow-x:auto} .table{width:100%;border-collapse:collapse;font-size:.8rem} .table th{ text-align:left;font-size:.72rem;letter-spacing:.06em;font-weight:700; color:var(--ink-60);padding:10px 12px;border-bottom:1px solid var(--ink-12); white-space:nowrap; } .table td{padding:14px 12px;border-bottom:1px solid var(--ink-12);vertical-align:middle} .table tbody tr:last-child td{border-bottom:none} .table.zebra tbody tr:nth-child(even){background:var(--ink-06)} /* --------------------------------------------------------------------------- 18. Meter — .meter (horizontal capacity meter, ink fill on ink-06 track, 4px radius data end only) ------------------------------------------------------------------------ */ .meter{height:8px;background:var(--ink-06);border-radius:4px;overflow:hidden} .meter .fill{height:100%;background:var(--ink);border-radius:0 4px 4px 0} .meter-caption{font-family:var(--mono);font-size:.75rem;color:var(--ink-60);margin-top:8px} /* --------------------------------------------------------------------------- 19. Bilingual sub-line — .en-sub (.78rem, ink-60, margin-top 2px) ------------------------------------------------------------------------ */ .en-sub{font-size:.78rem;color:var(--ink-60);margin-top:2px} /* --------------------------------------------------------------------------- 20. Headers — .site-header / .app-header / .plain-header ------------------------------------------------------------------------ */ .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:.02em} .brand .fu{ display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border:2px solid var(--shu);color:var(--shu); font-size:.85rem;font-weight:800;border-radius:4px;transform:rotate(-3deg); } .brand img{height:30px;width:auto} .site-header,.app-header,.plain-header{border-bottom:1px solid var(--ink-12);background:var(--paper)} .site-header .nav,.app-header .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:16px} .plain-header .nav{display:flex;align-items:center;justify-content:center;padding:24px 0} .nav-links{display:flex;gap:28px;font-size:.85rem;color:var(--ink-60)} .nav-links a:hover{color:var(--ink)} .nav-cta{border:1.5px solid var(--ink);padding:8px 18px;font-size:.85rem;font-weight:700;color:var(--ink);border-radius:2px} .app-header .user{display:flex;align-items:center;gap:20px;font-size:.85rem;color:var(--ink-60)} .app-header .user .email{font-family:var(--mono);color:var(--ink)} .app-header .user .logout{color:var(--shu-deep);font-weight:700} .tag-admin{ display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em; border:1px solid var(--ink-12);color:var(--ink-60);border-radius:2px; padding:2px 8px;margin-left:10px;vertical-align:middle; } @media (max-width:880px){ .nav-links{display:none} } /* --------------------------------------------------------------------------- 21. Footer — .site-footer ------------------------------------------------------------------------ */ .site-footer{border-top:1px solid var(--ink-12);padding:40px 0} .site-footer .nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;font-size:.8rem} .site-footer .nav-links{gap:22px;flex-wrap:wrap;color:var(--ink-60)} .site-footer .copyright{font-size:.75rem;color:var(--ink-60);margin-top:20px;font-family:var(--mono)} /* --------------------------------------------------------------------------- 22. Responsive quality floor (BRIEF §6) Nav collapse handled in §20 (880px). Table overflow handled by .table-scroll (§17). Additional tightening below 375px. ------------------------------------------------------------------------ */ @media (max-width:375px){ .btn{padding:12px 22px} .record-foot{flex-direction:column;align-items:flex-start;gap:6px} } /* --------------------------------------------------------------------------- 23. Focus (BRIEF §6 — visible :focus-visible, 2px --shu outline) ------------------------------------------------------------------------ */ :focus-visible{outline:2px solid var(--shu);outline-offset:2px} /* --------------------------------------------------------------------------- 24. Appendix — ds/ specimen-page scaffolding Small reusable utilities shared by the four Design System pages only, so those pages need no page-local