/* ============================================================ 123Tool.online — shared stylesheet Design tokens + components used by every page. Theme: light (default) / dark via html[data-theme="dark"]. Category accent: pages set --cat-hue (a number) on . ============================================================ */ :root { --cat-hue: 220; --bg: #f6f7fb; --bg-card: #ffffff; --bg-inset: #eef0f6; --bg-hover: #f0f2f8; --text: #1c2130; --text-2: #5b6478; --text-3: #8a92a6; --border: #e3e6ee; --border-2: #d3d7e2; --accent: hsl(var(--cat-hue), 70%, 48%); --accent-soft: hsl(var(--cat-hue), 75%, 96%); --accent-soft-2: hsl(var(--cat-hue), 65%, 90%); --accent-text: hsl(var(--cat-hue), 65%, 38%); --brand: #4353ff; --brand-2: #7c3aed; --danger: #dc2f4c; --success: #12925c; --warning: #b7791f; --shadow: 0 1px 3px rgba(20, 24, 40, .06), 0 4px 14px rgba(20, 24, 40, .05); --shadow-lg: 0 4px 10px rgba(20, 24, 40, .08), 0 12px 34px rgba(20, 24, 40, .12); --radius: 12px; --radius-sm: 8px; --mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, Menlo, monospace; color-scheme: light; } html[data-theme="dark"] { --bg: #12141c; --bg-card: #1b1e2a; --bg-inset: #232736; --bg-hover: #252938; --text: #e8eaf2; --text-2: #a6adc2; --text-3: #6f778c; --border: #2b3042; --border-2: #3a4058; --accent: hsl(var(--cat-hue), 65%, 60%); --accent-soft: hsl(var(--cat-hue), 40%, 17%); --accent-soft-2: hsl(var(--cat-hue), 40%, 24%); --accent-text: hsl(var(--cat-hue), 75%, 72%); --brand: #7c8aff; --brand-2: #a78bfa; --danger: #ff6b84; --success: #34d399; --warning: #fbbf24; --shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25); --shadow-lg: 0 4px 10px rgba(0, 0, 0, .35), 0 12px 34px rgba(0, 0, 0, .4); color-scheme: dark; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } img, canvas, video, svg { max-width: 100%; } a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: 1.9rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; } code, pre, textarea.code { font-family: var(--mono); } ::selection { background: hsl(var(--cat-hue), 70%, 50%, .25); } .container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 860px; } main { flex: 1; width: 100%; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg-card); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } .header-inner { display: flex; align-items: center; gap: 14px; height: 60px; } .logo { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; color: var(--text) !important; text-decoration: none !important; white-space: nowrap; } .logo .logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: .95rem; font-weight: 800; letter-spacing: -.5px; } .logo .logo-tld { color: var(--brand); } .header-search { position: relative; flex: 1; max-width: 440px; margin-left: auto; } .header-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg-inset); color: var(--text); font-size: .92rem; outline: none; transition: border-color .15s, background .15s; } .header-search input:focus { border-color: var(--brand); background: var(--bg-card); } .header-search .search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; font-size: .95rem; } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 420px; overflow-y: auto; display: none; padding: 6px; } .search-results.open { display: block; } .search-results a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text) !important; text-decoration: none !important; font-size: .92rem; } .search-results a .sr-ico { font-size: 1.05rem; } .search-results a .sr-cat { margin-left: auto; font-size: .75rem; color: var(--text-3); white-space: nowrap; } .search-results a:hover, .search-results a.active { background: var(--bg-hover); } .search-results .sr-empty { padding: 12px; color: var(--text-3); font-size: .9rem; text-align: center; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links > a, .nav-cats-btn { padding: 7px 11px; border-radius: 8px; color: var(--text-2) !important; font-size: .93rem; font-weight: 600; text-decoration: none !important; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; } .nav-links > a:hover, .nav-cats-btn:hover { background: var(--bg-hover); color: var(--text) !important; } .theme-toggle { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-2); cursor: pointer; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; flex: none; } .theme-toggle:hover { background: var(--bg-hover); } /* Categories mega-dropdown */ .nav-cats { position: relative; } .cats-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; width: min(560px, 92vw); background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 10px; display: none; grid-template-columns: 1fr 1fr; gap: 2px; } .cats-menu.open { display: grid; } .cats-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--text) !important; font-size: .92rem; font-weight: 600; text-decoration: none !important; } .cats-menu a:hover { background: var(--bg-hover); } .cats-menu a .cm-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; background: hsl(var(--h, 220), 70%, 50%, .12); } /* Mobile nav */ .nav-burger { display: none; } @media (max-width: 820px) { .nav-links { display: none; } .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 1.1rem; flex: none; } .mobile-menu { display: none; position: fixed; inset: 60px 0 0 0; z-index: 99; background: var(--bg); overflow-y: auto; padding: 16px 20px 40px; } .mobile-menu.open { display: block; } .mobile-menu a { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-bottom: 1px solid var(--border); color: var(--text) !important; font-weight: 600; text-decoration: none !important; } } @media (min-width: 821px) { .mobile-menu { display: none !important; } } @media (max-width: 560px) { .header-search { max-width: none; } .logo span.logo-word { display: none; } } /* ---------- Breadcrumb ---------- */ .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--text-3); margin: 18px 0 10px; } .breadcrumb a { color: var(--text-3); } .breadcrumb a:hover { color: var(--accent-text); } .breadcrumb .sep { opacity: .6; } /* ---------- Tool page chrome ---------- */ .tool-head { margin: 8px 0 22px; } .tool-head-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .tool-head h1 { margin: 0; } .tool-intro { color: var(--text-2); max-width: 760px; margin: 8px 0 0; } .pin-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg-card); color: var(--text-2); font-size: .88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; margin-left: auto; flex: none; } .pin-btn:hover { border-color: var(--accent); color: var(--accent-text); } .pin-btn.pinned { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); } .pin-btn .pin-star { font-size: 1rem; line-height: 1; } /* ---------- Cards / panels ---------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .card + .card { margin-top: 18px; } .tool-panel { margin-bottom: 26px; } @media (max-width: 560px) { .card { padding: 16px; } } /* ---------- Forms ---------- */ label { font-size: .88rem; font-weight: 600; color: var(--text-2); display: block; margin-bottom: 5px; } .input, .select, .textarea, input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="password"], input[type="search"], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-size: .95rem; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px hsl(var(--cat-hue), 70%, 50%, .15); } textarea { min-height: 160px; resize: vertical; line-height: 1.5; } textarea.code { font-size: .88rem; } input[type="color"] { padding: 3px; height: 42px; width: 56px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; } input[type="range"] { width: 100%; accent-color: var(--accent); cursor: pointer; padding: 0; border: 0; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; } .check-line { display: flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--text); font-weight: 500; margin-bottom: 0; cursor: pointer; } .field { margin-bottom: 14px; } .hint { font-size: .8rem; color: var(--text-3); margin-top: 4px; } /* Layout helpers */ .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .row > * { flex: 1; min-width: 0; } .row > .no-grow { flex: 0 0 auto; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 760px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .text-center { text-align: center; } .muted { color: var(--text-3); } .small { font-size: .85rem; } .hidden { display: none !important; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--bg-card); color: var(--text); font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none !important; transition: all .15s; white-space: nowrap; user-select: none; } .btn:hover { background: var(--bg-hover); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: hsl(var(--cat-hue), 70%, 42%); border-color: hsl(var(--cat-hue), 70%, 42%); } html[data-theme="dark"] .btn-primary:hover { background: hsl(var(--cat-hue), 65%, 54%); border-color: hsl(var(--cat-hue), 65%, 54%); } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; } .btn-lg { padding: 13px 26px; font-size: 1.02rem; } .btn-block { width: 100%; } .btn-group { display: flex; gap: 10px; flex-wrap: wrap; } /* Segmented control / tabs */ .seg { display: inline-flex; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; } .seg button { padding: 7px 14px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: .9rem; font-weight: 600; font-family: inherit; cursor: pointer; } .seg button.active { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow); } /* ---------- Drop zone ---------- */ .drop-zone { border: 2px dashed var(--border-2); border-radius: var(--radius); background: var(--bg-card); padding: 44px 20px; text-align: center; cursor: pointer; transition: all .15s; } .drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: var(--accent-soft); } .drop-zone .dz-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; } .drop-zone .dz-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .drop-zone .dz-hint { color: var(--text-3); font-size: .87rem; margin: 0; } /* File list */ .file-list { list-style: none; margin: 14px 0 0; padding: 0; } .file-list li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-card); margin-bottom: 8px; font-size: .9rem; } .file-list .fl-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-list .fl-size { color: var(--text-3); font-size: .82rem; margin-left: auto; white-space: nowrap; } /* ---------- Results / output ---------- */ .result-box { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; font-family: var(--mono); font-size: .92rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } .result-big { font-size: 2rem; font-weight: 800; text-align: center; color: var(--accent-text); padding: 18px; font-family: inherit; } .stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; } .stat { flex: 1; min-width: 120px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; text-align: center; } .stat .stat-val { font-size: 1.45rem; font-weight: 800; color: var(--accent-text); line-height: 1.2; } .stat .stat-label { font-size: .78rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .copy-btn { position: relative; } .copy-wrap { position: relative; } .copy-wrap .copy-btn { position: absolute; top: 8px; right: 8px; } /* Tables */ .table-wrap { overflow-x: auto; } table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; } .tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); } .tbl th { color: var(--text-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .tbl tr:hover td { background: var(--bg-hover); } /* Alerts */ .alert { border-radius: var(--radius-sm); padding: 11px 14px; font-size: .9rem; border: 1px solid; margin: 12px 0; } .alert-error { background: rgba(220, 47, 76, .08); border-color: rgba(220, 47, 76, .35); color: var(--danger); } .alert-success { background: rgba(18, 146, 92, .08); border-color: rgba(18, 146, 92, .35); color: var(--success); } .alert-info { background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-text); } /* Toast */ #toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--bg-card); padding: 10px 20px; border-radius: 999px; font-size: .9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .25s; z-index: 999; box-shadow: var(--shadow-lg); max-width: 90vw; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Canvas / preview */ .preview-area { background: conic-gradient(var(--bg-inset) 25%, transparent 0 50%, var(--bg-inset) 0 75%, transparent 0) 0 0 / 20px 20px, var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 12px; overflow: auto; } .preview-area img, .preview-area canvas, .preview-area video { max-width: 100%; max-height: 60vh; border-radius: 4px; } /* ---------- Tool cards & category grids ---------- */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .tool-card { display: flex; flex-direction: column; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; color: var(--text) !important; text-decoration: none !important; transition: all .15s; position: relative; } .tool-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: hsl(var(--h, var(--cat-hue)), 60%, 60%); } .tool-card .tc-ico { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; background: hsl(var(--h, var(--cat-hue)), 70%, 50%, .13); margin-bottom: 4px; } .tool-card .tc-name { font-weight: 700; font-size: .98rem; } .tool-card .tc-desc { font-size: .83rem; color: var(--text-2); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tool-card .tc-unpin { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: .95rem; padding: 4px; border-radius: 6px; display: none; } .tool-card:hover .tc-unpin { display: block; } .tool-card .tc-unpin:hover { color: var(--danger); background: var(--bg-hover); } .cat-section { margin: 34px 0; } .cat-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .cat-section-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; } .cat-section-head .cat-count { color: var(--text-3); font-size: .85rem; font-weight: 600; } .cat-section-head .cat-all { margin-left: auto; font-size: .88rem; font-weight: 600; white-space: nowrap; } /* Homepage hero */ .hero { text-align: center; padding: 54px 0 34px; } .hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 12px; letter-spacing: -.02em; } .hero h1 .grad { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--text-2); font-size: 1.08rem; max-width: 640px; margin: 0 auto 26px; } .hero-search { position: relative; max-width: 560px; margin: 0 auto; } .hero-search input { width: 100%; height: 54px; padding: 0 20px 0 50px; font-size: 1.05rem; border: 1.5px solid var(--border-2); border-radius: 16px; background: var(--bg-card); color: var(--text); outline: none; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; } .hero-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(67, 83, 255, .12), var(--shadow-lg); } .hero-search .search-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--text-3); pointer-events: none; } .hero-search .search-results { text-align: left; } .hero-stats { display: flex; justify-content: center; gap: 26px; margin-top: 22px; flex-wrap: wrap; color: var(--text-3); font-size: .9rem; font-weight: 600; } .hero-stats b { color: var(--text); } /* Category chips row (homepage) */ .cat-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 26px 0 6px; } .cat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text) !important; font-size: .89rem; font-weight: 600; text-decoration: none !important; transition: all .15s; } .cat-chip:hover { border-color: hsl(var(--h, 220), 60%, 55%); background: hsl(var(--h, 220), 70%, 50%, .08); transform: translateY(-1px); } /* Pinned section */ .pinned-section { margin: 10px 0 6px; } .pinned-section .cat-section-head h2 { color: var(--accent-text); } .pinned-empty { border: 2px dashed var(--border-2); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--text-3); font-size: .92rem; } /* Category page hero */ .cat-hero { padding: 34px 0 6px; } .cat-hero .cat-hero-ico { width: 58px; height: 58px; border-radius: 16px; font-size: 1.7rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); border: 1px solid var(--accent-soft-2); margin-bottom: 12px; } .cat-hero p { color: var(--text-2); max-width: 700px; } /* ---------- SEO content sections on tool pages ---------- */ .tool-about { margin: 40px 0; } .tool-about h2 { margin-top: 28px; } .tool-about h2:first-child { margin-top: 0; } .steps-list { counter-reset: step; list-style: none; padding: 0; margin: 0; } .steps-list li { position: relative; padding: 4px 0 14px 46px; counter-increment: step; } .steps-list li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-soft-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; } .faq-list details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); margin-bottom: 10px; overflow: hidden; } .faq-list summary { padding: 13px 16px; font-weight: 600; cursor: pointer; font-size: .95rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; font-size: 1.2rem; color: var(--text-3); flex: none; } .faq-list details[open] summary::after { content: "–"; } .faq-list details p { padding: 0 16px 14px; margin: 0; color: var(--text-2); font-size: .92rem; } /* Related tools */ .related-tools { background: var(--bg-inset); border-top: 1px solid var(--border); padding: 34px 0 40px; margin-top: 30px; } .related-tools h2 { font-size: 1.15rem; margin-bottom: 16px; } /* ---------- Footer ---------- */ .site-footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 40px 0 26px; margin-top: auto; font-size: .9rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 26px; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 12px; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 8px; } .site-footer a { color: var(--text-2); } .site-footer a:hover { color: var(--accent-text); } .footer-about p { color: var(--text-3); margin-top: 10px; max-width: 320px; } .footer-bottom { border-top: 1px solid var(--border); margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text-3); font-size: .84rem; } /* ---------- Misc ---------- */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--accent-soft); color: var(--accent-text); } .kbd { font-family: var(--mono); font-size: .82rem; background: var(--bg-inset); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; } hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; } @media print { .site-header, .site-footer, .related-tools, .pin-btn, .breadcrumb, .tool-about { display: none !important; } }