/* ============================================================ ToolKit Hub — Editorial Style Fonts: Source Serif 4 (headings) · Inter (body) · JetBrains Mono (data) Palette: warm cream background · ink black · amber accent · forest ============================================================ */ /* Note: Google Fonts is preconnected + preloaded in baseof.html (PERF B1). Do not add @import here — it would block first paint. */ /* ----- Tokens ----- */ :root{ --bg: #FAF8F5; --surface: #FFFFFF; --ink: #111111; --ink-soft: #2A2A2A; --muted: #6B6660; --line: #E8E2D8; --line-strong:#D6CFC1; --amber: #B45309; --amber-soft:#FFF6E6; --forest: #1F4D3A; --forest-soft:#E8F0EC; --rose: #9F1239; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --maxw: 1200px; --content-maxw: 760px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10:128px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ----- Reset ----- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-sans); background:var(--bg); color:var(--ink); line-height:1.65; font-feature-settings:"ss01","ss02","cv01"; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%;display:block} a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)} a:hover{border-bottom-color:var(--ink)} hr{border:0;border-top:1px solid var(--line);margin:var(--space-6) 0} code,kbd,samp{font-family:var(--font-mono);font-size:.9em;background:var(--amber-soft);color:var(--amber);padding:2px 6px;border-radius:var(--r-sm)} pre{font-family:var(--font-mono);font-size:.85rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-4);overflow:auto} /* ----- Layout ----- */ .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-5)} .measure{max-width:var(--content-maxw);margin:0 auto} .stack > * + *{margin-top:var(--space-4)} .stack-lg > * + *{margin-top:var(--space-6)} main{padding:var(--space-7) 0 var(--space-9)} /* ----- Header ----- */ .site-header{ background:rgba(250,248,245,.85); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:100; } .site-header .container{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--space-5)} .logo{ font-family:var(--font-serif); font-weight:600;font-size:1.35rem;letter-spacing:-.01em;color:var(--ink); border-bottom:none; } .logo .logo-mark{display:inline-block;width:22px;height:22px;border-radius:5px;background:var(--ink);margin-right:8px;vertical-align:-5px;position:relative} .logo .logo-mark::after{content:"";position:absolute;inset:5px;border-radius:3px;background:var(--amber)} .main-nav{display:flex;gap:var(--space-5);align-items:center} .main-nav a{ font-size:.92rem;font-weight:500;color:var(--ink-soft); border-bottom:none;padding:6px 0;position:relative; } .main-nav a:hover{color:var(--amber)} .main-nav a[aria-current="page"]{color:var(--amber)} .main-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--amber);border-radius:1px} .nav-cta{padding:8px 16px;background:var(--ink);color:var(--bg);border-radius:var(--r-md);font-weight:600;font-size:.9rem} .nav-cta:hover{background:var(--amber);color:#fff;border-bottom-color:transparent} /* ----- Hero (single page) ----- */ .tool-hero{padding:var(--space-9) 0 var(--space-7);border-bottom:1px solid var(--line)} .tool-hero .eyebrow{ font-family:var(--font-mono);font-size:.78rem; text-transform:uppercase;letter-spacing:.12em;color:var(--amber); margin-bottom:var(--space-4); } .tool-hero h1{ font-family:var(--font-serif); font-weight:600;font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.08;letter-spacing:-.02em;color:var(--ink); max-width:18ch;margin-bottom:var(--space-5); } .tool-hero .tool-tagline{font-size:1.2rem;color:var(--muted);line-height:1.55;max-width:50ch;margin-bottom:var(--space-5)} .tool-hero .tool-meta{ display:flex;gap:var(--space-4);flex-wrap:wrap; font-size:.85rem;color:var(--muted);margin-bottom:var(--space-6); } .tool-hero .tool-meta span{display:inline-flex;align-items:center;gap:6px} .tool-hero .tool-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--line-strong)} .tool-hero .cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;border-radius:var(--r-md); font-weight:600;font-size:.95rem;border:1px solid transparent; transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease); border-bottom:none;cursor:pointer; } .btn-primary{background:var(--ink);color:var(--bg)} .btn-primary:hover{background:var(--amber);color:#fff;transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{border-color:var(--ink);border-bottom-color:var(--ink)} /* ----- Section base ----- */ .section{padding:var(--space-9) 0;border-bottom:1px solid var(--line)} .section:last-child{border-bottom:none} .section .eyebrow{ font-family:var(--font-mono);font-size:.75rem; text-transform:uppercase;letter-spacing:.14em;color:var(--amber); margin-bottom:var(--space-3); } .section h2{ font-family:var(--font-serif);font-weight:600; font-size:clamp(1.7rem,3.2vw,2.2rem);letter-spacing:-.015em; color:var(--ink);margin-bottom:var(--space-3);max-width:22ch;line-height:1.15; } .section .lead{font-size:1.05rem;color:var(--muted);max-width:55ch;margin-bottom:var(--space-6)} /* ----- Tool wrapper (interactive) ----- */ .tool-wrapper{ margin:var(--space-7) 0; padding:var(--space-7); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); position:relative; } .tool-wrapper::before{ content:"";position:absolute;left:-1px;top:24px;bottom:24px;width:3px; background:linear-gradient(to bottom,var(--amber),var(--forest));border-radius:3px; } .tool-wrapper h3{font-family:var(--font-serif);font-size:1.4rem;margin-bottom:var(--space-4);font-weight:600} /* Forms */ .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);margin-bottom:var(--space-5)} .form-field label{display:block;font-size:.85rem;color:var(--muted);font-weight:500;margin-bottom:var(--space-2)} .form-field .hint{display:block;font-size:.78rem;color:var(--muted);margin-top:4px} input[type=number],input[type=text],input[type=email],textarea,select{ width:100%;padding:11px 14px;border:1px solid var(--line-strong); border-radius:var(--r-md);font-size:1rem;background:var(--bg);color:var(--ink); font-family:var(--font-sans);transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } input:focus,textarea:focus,select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 4px rgba(180,83,9,.12)} .checkbox-row{display:flex;align-items:center;gap:var(--space-3);font-size:.92rem;color:var(--ink-soft)} button{ font-family:var(--font-sans); padding:11px 22px;background:var(--ink);color:var(--bg);border:none; border-radius:var(--r-md);cursor:pointer;font-size:.95rem;font-weight:600; border-bottom:none;transition:transform .2s var(--ease),background .2s var(--ease); } button:hover{background:var(--amber);color:#fff;transform:translateY(-1px)} button.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)} button.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} button:disabled{opacity:.5;cursor:not-allowed;transform:none} /* ----- Filter bar (筛选器) ----- */ .filter-bar{ display:flex;flex-wrap:wrap;gap:var(--space-2); padding:var(--space-4) var(--space-5); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); margin-bottom:var(--space-6); } .filter-chip{ font-size:.85rem;padding:7px 14px;border-radius:99px;border:1px solid var(--line-strong); background:var(--bg);color:var(--ink-soft);cursor:pointer; transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease); font-family:var(--font-sans);font-weight:500; } .filter-chip:hover{border-color:var(--ink)} .filter-chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)} .filter-chip .count{opacity:.6;margin-left:6px;font-size:.78rem;font-family:var(--font-mono)} /* ----- Card grid ----- */ .card-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--space-5);transition:border-color .2s var(--ease),transform .25s var(--ease); border-bottom:1px solid var(--line); } .card:hover{border-color:var(--ink);transform:translateY(-2px)} .card .icon{ width:40px;height:40px;border-radius:var(--r-md); background:var(--amber-soft);color:var(--amber); display:flex;align-items:center;justify-content:center; font-size:1.2rem;margin-bottom:var(--space-3);font-weight:700; } .card h3{font-family:var(--font-serif);font-size:1.15rem;font-weight:600;margin-bottom:var(--space-2);color:var(--ink)} .card p{font-size:.92rem;color:var(--muted);line-height:1.55} .card a.arrow{ display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-3); font-size:.85rem;font-weight:600;color:var(--amber);border-bottom:none; } .card a.arrow:hover{gap:10px} /* ----- Data table (数据表格) ----- */ .data-table-wrap{ margin:var(--space-5) 0;overflow-x:auto; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface); } .data-table{width:100%;border-collapse:collapse;font-size:.92rem} .data-table caption{ caption-side:top;text-align:left; padding:var(--space-4) var(--space-5);font-family:var(--font-serif); font-weight:600;font-size:1.05rem;color:var(--ink); border-bottom:1px solid var(--line);background:var(--bg); } .data-table thead th{ text-align:left;padding:14px var(--space-4); font-family:var(--font-mono);font-size:.72rem;font-weight:600; text-transform:uppercase;letter-spacing:.1em;color:var(--muted); background:var(--bg);border-bottom:1px solid var(--line); } .data-table tbody td{padding:14px var(--space-4);border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top} .data-table tbody tr:last-child td{border-bottom:none} .data-table tbody tr:hover{background:var(--bg)} .data-table td code,.data-table td .num{font-family:var(--font-mono);font-size:.85rem;color:var(--ink);background:transparent;padding:0} .data-table .num{font-variant-numeric:tabular-ns;font-weight:600} .data-table .badge{ display:inline-block;padding:3px 9px;border-radius:99px;font-size:.75rem;font-weight:600; background:var(--amber-soft);color:var(--amber); } .data-table .badge.forest{background:var(--forest-soft);color:var(--forest)} .data-table .badge.rose{background:#FCE7EE;color:var(--rose)} /* ----- Comparison block ----- */ .comparison{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-4);margin:var(--space-5) 0; } .comparison .col{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--space-5); } .comparison .col.featured{border-color:var(--ink);position:relative} .comparison .col.featured::before{ content:"Recommended";position:absolute;top:-10px;right:16px; background:var(--ink);color:var(--bg);font-size:.7rem;font-weight:600; padding:3px 10px;border-radius:99px;font-family:var(--font-mono); letter-spacing:.05em;text-transform:uppercase; } .comparison h4{font-family:var(--font-serif);font-size:1.2rem;margin-bottom:var(--space-3);font-weight:600} .comparison .col ul{list-style:none;font-size:.92rem;color:var(--ink-soft)} .comparison .col li{padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:8px} .comparison .col li:last-child{border-bottom:none} .comparison .col .marker{flex-shrink:0;font-weight:700;font-family:var(--font-mono)} .comparison .col .marker.plus{color:var(--forest)} .comparison .col .marker.minus{color:var(--rose)} /* ----- Scenarios (碎片化场景) ----- */ .scenarios{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .scenario{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2); } .scenario .who{ display:inline-flex;align-items:center;gap:6px; font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em; color:var(--forest); } .scenario h4{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;color:var(--ink)} .scenario p{font-size:.9rem;color:var(--muted);line-height:1.55} .scenario .flow{ margin-top:auto;padding-top:var(--space-3); font-family:var(--font-mono);font-size:.78rem;color:var(--muted); border-top:1px dashed var(--line); } /* ----- Topic cluster (话题集) ----- */ .topic-cluster{ display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-5) 0; } .topic-cluster a{ font-size:.9rem;padding:8px 14px;border-radius:99px; background:var(--surface);border:1px solid var(--line-strong);color:var(--ink-soft); border-bottom:1px solid var(--line-strong);transition:all .15s var(--ease); } .topic-cluster a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);border-bottom-color:var(--ink)} /* ----- Knowledge card (知识卡片) ----- */ .knowledge-card{ display:grid;grid-template-columns:auto 1fr;gap:var(--space-5); padding:var(--space-6);background:var(--amber-soft);border-radius:var(--r-lg); margin:var(--space-5) 0;border-left:3px solid var(--amber); } .knowledge-card .glyph{ width:56px;height:56px;border-radius:var(--r-md);background:var(--amber); color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--font-serif);font-size:1.5rem;font-weight:600; } .knowledge-card h4{font-family:var(--font-serif);font-size:1.15rem;font-weight:600;margin-bottom:var(--space-2)} .knowledge-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.6} .knowledge-card.variant-forest{background:var(--forest-soft);border-left-color:var(--forest)} .knowledge-card.variant-forest .glyph{background:var(--forest)} /* ----- FAQ ----- */ .faq-section{margin-top:var(--space-7)} .faq-section h2{margin-bottom:var(--space-5)} .faq-item{ border:1px solid var(--line);border-radius:var(--r-md); margin-bottom:var(--space-2);background:var(--surface);overflow:hidden; transition:border-color .15s var(--ease); } .faq-item[open]{border-color:var(--ink)} .faq-item summary{ list-style:none;cursor:pointer;padding:18px var(--space-5); font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4); } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+";font-family:var(--font-mono);font-size:1.2rem;color:var(--muted); transition:transform .25s var(--ease); } .faq-item[open] summary::after{content:"−";transform:rotate(180deg)} .faq-item .answer{padding:0 var(--space-5) var(--space-5);color:var(--ink-soft);font-size:.95rem;line-height:1.65} /* ----- Related ----- */ .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3)} .related-card{ display:flex;align-items:center;gap:var(--space-3);padding:14px var(--space-4); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); font-size:.92rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line); transition:all .2s var(--ease); } .related-card:hover{border-color:var(--ink);transform:translateY(-1px);border-bottom-color:var(--ink)} .related-card .arrow{color:var(--amber);font-family:var(--font-mono);font-weight:700} /* ----- Conclusion (结论 30%) ----- */ .conclusion{ margin:var(--space-9) 0 var(--space-7); padding:var(--space-8) var(--space-7); background:var(--ink);color:var(--bg);border-radius:var(--r-lg); position:relative;overflow:hidden; } .conclusion::before{ content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px; background:radial-gradient(circle,rgba(180,83,9,.4),transparent 70%); pointer-events:none; } .conclusion .eyebrow{color:#D4A574;font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:var(--space-4)} .conclusion h2{font-family:var(--font-serif);font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:600;letter-spacing:-.015em;margin-bottom:var(--space-5);line-height:1.15;color:#fff} .conclusion .verdict{font-size:1.1rem;line-height:1.65;color:#E8E2D8;max-width:60ch;margin-bottom:var(--space-7)} .conclusion .proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-5);margin-bottom:var(--space-6)} .conclusion .proof{ padding:var(--space-5);background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md); } .conclusion .proof .dim{ font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase; letter-spacing:.1em;color:#D4A574;margin-bottom:var(--space-3); } .conclusion .proof h4{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:var(--space-2)} .conclusion .proof p{font-size:.88rem;color:#C9C2BA;line-height:1.6} .conclusion .unique-gain{ margin-top:var(--space-6);padding:var(--space-5); background:rgba(180,83,9,.15);border:1px solid rgba(180,83,9,.4);border-radius:var(--r-md); } .conclusion .unique-gain strong{color:#FCD9A3} .conclusion .unique-gain p{color:#E8E2D8;font-size:.95rem;line-height:1.6;margin-top:var(--space-2)} .conclusion .sources{ margin-top:var(--space-5);padding-top:var(--space-4); border-top:1px solid rgba(255,255,255,.1); font-size:.78rem;color:#8C857C;font-family:var(--font-mono); } /* ----- Content body (markdown) ----- */ .content-body{ margin-top:var(--space-7); font-size:1.05rem;line-height:1.75;color:var(--ink-soft); max-width:var(--content-maxw); } .content-body h2{font-family:var(--font-serif);font-size:1.7rem;font-weight:600;letter-spacing:-.01em;margin:var(--space-8) 0 var(--space-4);color:var(--ink)} .content-body h3{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;margin:var(--space-7) 0 var(--space-3);color:var(--ink)} .content-body p{margin-bottom:var(--space-4)} .content-body ul,.content-body ol{padding-left:var(--space-5);margin-bottom:var(--space-4)} .content-body li{margin-bottom:var(--space-2)} .content-body blockquote{ margin:var(--space-5) 0;padding:var(--space-4) var(--space-5); border-left:3px solid var(--amber);background:var(--amber-soft); border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-soft); font-style:italic; } /* ----- Sidebar ----- */ .sidebar-targets{display:flex;flex-direction:column;gap:var(--space-4)} .sidebar-targets .target-block{ background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:var(--space-4) var(--space-5); } .sidebar-targets h3{font-family:var(--font-serif);font-size:1rem;margin-bottom:var(--space-3);font-weight:600} .target-list{list-style:none;font-size:.9rem} .target-list li{margin-bottom:6px} .target-list a{color:var(--ink-soft);display:block;padding:4px 0;border-bottom:none} .target-list a:hover{color:var(--amber)} .target-list a::before{content:"→";margin-right:6px;color:var(--amber);font-family:var(--font-mono)} /* ----- Footer ----- */ .site-footer{ background:var(--ink);color:#D6CFC1;padding:var(--space-9) 0 var(--space-6); margin-top:var(--space-10); } .site-footer .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-6);margin-bottom:var(--space-7)} .site-footer h5{font-family:var(--font-serif);font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:var(--space-3)} .site-footer ul{list-style:none} .site-footer li{margin-bottom:8px} .site-footer a{color:#A39D94;font-size:.88rem;border-bottom:none} .site-footer a:hover{color:#D4A574} .site-footer .copyright{ text-align:center;padding-top:var(--space-5); border-top:1px solid #2A2A2A;font-size:.78rem;color:#6B6660;font-family:var(--font-mono); } /* ----- Tool card grid (home page) ----- */ .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-5)} .tool-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--space-5);transition:all .25s var(--ease); border-bottom:1px solid var(--line); } .tool-card:hover{transform:translateY(-3px);border-color:var(--ink);border-bottom-color:var(--ink)} .tool-card .tag{ display:inline-block;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em; padding:3px 8px;border-radius:99px;background:var(--amber-soft);color:var(--amber); font-family:var(--font-mono);margin-bottom:var(--space-3); } .tool-card .tag.forest{background:var(--forest-soft);color:var(--forest)} .tool-card .tag.rose{background:#FCE7EE;color:var(--rose)} .tool-card h3{font-family:var(--font-serif);font-size:1.15rem;font-weight:600;margin-bottom:var(--space-2);color:var(--ink)} .tool-card p{font-size:.9rem;color:var(--muted);line-height:1.55} /* ----- Timer / converter / generator tool styles ----- */ .timer-display{ font-family:var(--font-mono); font-size:clamp(3rem,8vw,4.5rem);font-weight:500;text-align:center; font-variant-numeric:tabular-nums;color:var(--ink);margin:var(--space-5) 0; letter-spacing:-.02em;padding:var(--space-5);background:var(--bg); border:1px solid var(--line);border-radius:var(--r-md); } .timer-controls{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-4)} .gen-result{display:flex;gap:var(--space-3);margin-top:var(--space-4)} .gen-result input{flex:1;font-family:var(--font-mono);font-size:1rem} .gen-result button{white-space:nowrap} .result-row{ display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4); padding:10px 0;border-bottom:1px dashed var(--line);font-size:.95rem; } .result-row:last-child{border-bottom:none} .result-row .label{color:var(--muted);font-size:.88rem} .result-row .value{font-family:var(--font-mono);font-weight:600;color:var(--ink)} .calc-result,.checker-results{ margin-top:var(--space-4);padding:var(--space-5);background:var(--bg); border:1px solid var(--line);border-radius:var(--r-md); } .result-value{ font-family:var(--font-serif);font-size:2.2rem;font-weight:600; color:var(--amber);margin-top:var(--space-2);line-height:1.1; } .result-value .unit{font-size:1rem;color:var(--muted);margin-left:6px;font-family:var(--font-mono);font-weight:500} /* ----- Animations ----- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:translateY(0)} .reveal[data-stagger="1"]{transition-delay:.06s} .reveal[data-stagger="2"]{transition-delay:.12s} .reveal[data-stagger="3"]{transition-delay:.18s} .reveal[data-stagger="4"]{transition-delay:.24s} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation-duration:0s!important;transition-duration:0s!important} } /* ----- Responsive ----- */ @media(max-width:900px){ main{padding:var(--space-6) 0 var(--space-8)} .tool-hero{padding:var(--space-7) 0 var(--space-6)} .section{padding:var(--space-7) 0} .conclusion{padding:var(--space-7) var(--space-5)} .tool-wrapper{padding:var(--space-5)} .main-nav .nav-label-sm{display:none} } @media(max-width:640px){ .container{padding:0 var(--space-4)} .site-header .container{height:56px} .logo{font-size:1.15rem} .main-nav{gap:var(--space-3)} .main-nav a{font-size:.85rem} .tool-hero h1{font-size:2.1rem} .conclusion{padding:var(--space-6) var(--space-4)} .conclusion h2{font-size:1.6rem} .knowledge-card{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-4)} .knowledge-card .glyph{width:44px;height:44px;font-size:1.2rem} } /* ----- Print ----- */ @media print{ .site-header,.site-footer,.filter-bar,.tool-wrapper button{display:none} body{background:#fff} .conclusion{background:#fff;color:#000} } /* ============================================================ Tool UI — schema-driven forms, timers, converters, generators ============================================================ */ /* Form grid & fields */ .tool-calculator,.tool-timer,.tool-converter,.tool-generator,.tool-checker{ font-family:var(--font-sans); } .form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-3); margin-bottom:var(--space-3); } .form-field{ display:flex; flex-direction:column; gap:6px; position:relative; } .form-field label{ font-size:.82rem; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; } .form-field input, .form-field select, .form-field textarea{ width:100%; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); font-family:var(--font-mono); font-size:.95rem; color:var(--ink); transition:border-color .15s, box-shadow .15s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(180,83,9,.12); } .form-field textarea{resize:vertical;min-height:120px;font-family:var(--font-sans);line-height:1.5} .form-field .unit{ position:absolute; right:12px; bottom:11px; font-size:.78rem; color:var(--muted); font-weight:500; pointer-events:none; } .money-input,.percent-input{display:flex;align-items:center;gap:6px;position:relative} .money-input .unit{position:static} .money-input input{flex:1} .form-field .hint{ font-size:.74rem; color:var(--muted); margin-top:-2px; } /* Advanced toggle */ .advanced-toggle{ border:1px dashed var(--line-strong); border-radius:var(--r-md); margin:0 0 var(--space-3); padding:var(--space-2) var(--space-3); background:var(--bg); } .advanced-toggle summary{ cursor:pointer; font-weight:600; color:var(--amber); font-size:.85rem; list-style:none; } .advanced-toggle summary::-webkit-details-marker{display:none} .advanced-toggle summary::before{content:"▸ ";display:inline-block;transition:transform .2s} .advanced-toggle[open] summary::before{content:"▾ "} .advanced-toggle .form-grid{margin-top:var(--space-3)} /* Buttons */ .cta-row,.timer-buttons{ display:flex;flex-wrap:wrap;gap:8px; margin-top:var(--space-2); } .calc-btn,.conv-btn,.gen-btn,.checker-btn,.timer-start,.timer-pause,.timer-reset,.timer-skip{ font-family:var(--font-sans); padding:10px 18px; border:1px solid var(--ink); background:var(--ink); color:#fff; border-radius:var(--r-sm); font-weight:600; font-size:.92rem; cursor:pointer; transition:transform .1s, opacity .15s; } .calc-btn:hover,.conv-btn:hover,.gen-btn:hover,.checker-btn:hover,.timer-start:hover{transform:translateY(-1px)} .calc-btn:active,.conv-btn:active,.gen-btn:active,.checker-btn:active,.timer-start:active{transform:translateY(0)} .calc-btn:disabled,.timer-start:disabled,.timer-pause:disabled{opacity:.4;cursor:not-allowed} .calc-reset,.timer-pause,.timer-reset,.timer-skip,.checker-paste,.checker-sample,.checker-clear,.gen-copy,.gen-export,.gen-multiple,.conv-copy{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .calc-reset:hover,.timer-reset:hover,.checker-paste:hover,.gen-copy:hover{background:var(--bg)} .is-copied{background:var(--forest)!important;color:#fff!important} /* Result block */ .calc-result,.checker-results,.gen-result{ margin-top:var(--space-4); padding:var(--space-4); background:var(--forest-soft); border-radius:var(--r-md); border-left:4px solid var(--forest); } .calc-result h4,.checker-results h4,.gen-result h4{ font-family:var(--font-serif); margin:0 0 var(--space-3); font-size:1.05rem; color:var(--forest); } .output-row,.result-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(31,77,58,.12); } .output-row:last-child,.result-row:last-child{border-bottom:none} .output-label,.result-row > span:first-child{color:var(--ink-soft);font-size:.9rem} .output-value,.result-row strong{font-family:var(--font-mono);font-weight:600;color:var(--ink);font-size:1.05rem} .result-note{font-size:.82rem;color:var(--muted);margin-top:var(--space-2);font-style:italic} /* Timer */ .tool-timer{ text-align:center; padding:var(--space-4) var(--space-2); } .timer-display{ font-family:var(--font-mono); font-size:clamp(3rem, 8vw, 5rem); font-weight:600; color:var(--ink); letter-spacing:.04em; margin:var(--space-3) 0; font-variant-numeric:tabular-nums; } .timer-display.is-running{color:var(--forest)} .timer-display.is-done{color:var(--rose);animation:pulse 1s ease-in-out infinite alternate} @keyframes pulse{from{opacity:1}to{opacity:.65}} .timer-meta{ display:flex;justify-content:center;gap:var(--space-4); color:var(--muted);font-size:.82rem; margin-bottom:var(--space-3); } .timer-meta span{ font-family:var(--font-mono); padding:2px 10px;border-radius:99px; background:var(--amber-soft); color:var(--amber); font-weight:500; } .preset-chips{ display:flex;flex-wrap:wrap;gap:6px; justify-content:center; margin-bottom:var(--space-3); } .preset-chip{ padding:6px 12px; background:var(--surface); border:1px solid var(--line-strong); border-radius:99px; font-size:.82rem; font-weight:500; color:var(--ink-soft); cursor:pointer; font-family:var(--font-sans); transition:all .15s; } .preset-chip:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)} .preset-chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)} .timer-history{margin-top:var(--space-3);text-align:left;background:var(--amber-soft);padding:var(--space-3);border-radius:var(--r-md)} .timer-history h5{margin:0 0 8px;font-size:.9rem;color:var(--amber)} .timer-history ol{margin:0;padding-left:20px;font-size:.85rem;color:var(--ink-soft)} .timer-history li{font-family:var(--font-mono);padding:2px 0} /* Converter */ .tool-converter .category-tabs{ display:flex;flex-wrap:wrap;gap:4px; margin-bottom:var(--space-3); border-bottom:1px solid var(--line); padding-bottom:var(--space-2); } .cat-tab{ padding:8px 14px; background:transparent; border:1px solid transparent; border-radius:var(--r-sm) var(--r-sm) 0 0; font-family:var(--font-sans); font-size:.85rem; font-weight:500; color:var(--muted); cursor:pointer; } .cat-tab:hover{color:var(--ink)} .cat-tab.is-active{background:var(--surface);border-color:var(--line);border-bottom-color:var(--surface);color:var(--amber);font-weight:600;transform:translateY(1px)} .conv-body{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--space-2); align-items:end; margin-bottom:var(--space-3); } .conv-body .form-field label{font-size:.78rem} .swap-btn{ align-self:end; padding:10px 14px; background:var(--forest-soft); border:1px solid var(--forest); color:var(--forest); border-radius:99px; font-size:1.1rem; cursor:pointer; font-weight:600; margin-bottom:1px; } .swap-btn:hover{background:var(--forest);color:#fff} .precision-row{ display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center; font-size:.85rem;color:var(--ink-soft); margin-bottom:var(--space-2); } .precision-row input[type="number"]{width:60px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:4px} .conv-reference{ margin-top:var(--space-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--space-3); } /* User-intent helpers for converter */ .quick-fill{ display:flex;flex-wrap:wrap;gap:4px; margin-top:-2px; font-size:.78rem; color:var(--muted); align-items:center; } .quick-fill .quick-chip{ padding:2px 9px; border-radius:99px; background:var(--bg); border:1px solid var(--line-strong); font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); cursor:pointer; transition:all .15s; } .quick-fill .quick-chip:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)} .conv-factor{ margin-top:var(--space-2); padding:6px 12px; background:var(--amber-soft); color:var(--amber); border-radius:var(--r-sm); font-size:.78rem; font-family:var(--font-mono); } .conv-factor .factor-label{font-weight:500} .ref-table{width:100%;border-collapse:collapse;font-size:.88rem} .ref-table th,.ref-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)} .ref-table th{background:var(--bg);font-weight:600;color:var(--ink-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em} .ref-table tbody tr:last-child td{border-bottom:none} .ref-table tbody tr.is-active{background:var(--amber-soft)} .ref-table tbody tr.is-active td{font-weight:600;color:var(--amber)} .ref-table td:last-child{font-family:var(--font-mono);text-align:right} /* Generator */ .gen-result{ margin-top:var(--space-3); padding:var(--space-3); background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--amber); } .gen-result .output-box{ font-family:var(--font-mono); font-size:1.2rem; font-weight:600; color:var(--ink); word-break:break-all; min-height:1.5em; user-select:all; } .gen-result .output-box ol{margin:0;padding-left:24px;font-size:1rem} .gen-result .output-box li{padding:4px 0;border-bottom:1px solid var(--line)} .gen-result .output-box li:last-child{border:none} .strength-meter{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;color:var(--muted)} .strength-meter .bar{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden} .strength-meter .bar span{display:block;height:100%;border-radius:99px;transition:width .3s} .gen-history{margin-top:var(--space-3);font-size:.85rem;color:var(--ink-soft)} .gen-history summary{cursor:pointer;color:var(--amber);font-weight:500} .gen-history ol{margin:8px 0 0;padding-left:20px} .gen-history li{font-family:var(--font-mono);padding:3px 0;border-bottom:1px solid var(--line);word-break:break-all} .gen-history li:last-child{border:none} /* Checker */ .checker-results .result-summary{ margin-top:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--amber-soft); border-radius:var(--r-sm); font-size:.9rem; color:var(--ink); } .checker-issues{margin-top:var(--space-3)} .checker-issues summary{cursor:pointer;color:var(--amber);font-weight:500;font-size:.9rem} .checker-issues ul{margin:8px 0;padding-left:20px;color:var(--ink-soft);font-size:.85rem} .checker-issues li{padding:2px 0} /* ============================================================ Accessibility utilities (A11Y C1, C2) ============================================================ */ /* Skip-link - appears on focus */ .skip-link{ position:absolute; top:-40px; left:8px; padding:8px 14px; background:var(--ink); color:var(--bg); text-decoration:none; border-radius:4px; z-index:1000; font-weight:600; transition:top .2s; } .skip-link:focus{ top:8px; outline:3px solid var(--amber); outline-offset:2px; } /* Global focus-visible - keyboard-only rings */ :focus-visible{ outline:3px solid var(--amber); outline-offset:2px; border-radius:3px; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; } :focus:not(:focus-visible){outline:none} /* Visually hidden but screen-reader accessible */ .visually-hidden,.sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } /* Mobile menu (header hamburger) */ .mobile-menu-btn{ display:none; background:none; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; color:var(--ink); font-size:1.2rem; line-height:1; } @media (max-width:760px){ .mobile-menu-btn{display:inline-flex;align-items:center;gap:6px} .main-nav{display:none;width:100%;flex-direction:column;gap:4px;padding-top:var(--space-3);border-top:1px solid var(--line);margin-top:var(--space-3)} .main-nav.is-open{display:flex} .main-nav a{padding:10px 0;width:100%} } /* aria-live region styling */ .live-region{ position:absolute; left:-9999px; height:1px; width:1px; overflow:hidden; }