/* ========================================================================== OrchidLines design system Single stylesheet, no build step, no external fonts or CDNs. Light and dark themes: follows the OS by default, overridden by [data-theme] on when the user picks one. ========================================================================== */ /* ------------------------------------------------------------- 1. reset -- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } button { background: none; border: none; cursor: pointer; } a { color: inherit; } :where(h1, h2, h3, h4) { line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; } [hidden] { display: none !important; } /* ------------------------------------------------------------ 2. tokens -- */ :root { --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 80px; /* radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; --maxw: 1200px; --maxw-narrow: 760px; --tr: 160ms cubic-bezier(.4, 0, .2, 1); } /* light (default) */ :root { --bg: #f6f8fb; --bg-grad: radial-gradient(1100px 520px at 12% -8%, #d9f5f1 0%, transparent 62%), radial-gradient(900px 460px at 92% -4%, #e6e9fb 0%, transparent 58%); --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: #e8eef5; --text: #0d1726; --text-2: #3c4c63; --muted: #6b7c93; --border: #e2e8f0; --border-strong: #cbd5e1; --brand: #0d9488; --brand-hover: #0f766e; --brand-soft: #d5f5ef; --brand-text: #0b6b60; --on-brand: #ffffff; --accent: #f59e0b; --accent-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --success: #16a34a; --success-soft: #dcfce7; --shadow-sm: 0 1px 2px rgba(13, 23, 38, .06), 0 1px 3px rgba(13, 23, 38, .04); --shadow-md: 0 4px 12px rgba(13, 23, 38, .07), 0 2px 4px rgba(13, 23, 38, .04); --shadow-lg: 0 18px 40px rgba(13, 23, 38, .10), 0 4px 12px rgba(13, 23, 38, .05); --ring: 0 0 0 3px rgba(13, 148, 136, .28); --checker-a: #ffffff; --checker-b: #e9eef4; color-scheme: light; } /* Dark palette. Declared once. An inline script in stamps data-theme="dark|light" on before first paint — from localStorage if the user chose, otherwise from the OS preference — so there is no duplicated media-query block and no flash of the wrong theme. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0a1120; --bg-grad: radial-gradient(1100px 520px at 12% -8%, #0d3b39 0%, transparent 62%), radial-gradient(900px 460px at 92% -4%, #1b2450 0%, transparent 58%); --surface: #101a2c; --surface-2: #16223a; --surface-3: #1e2c47; --text: #e8eef8; --text-2: #c2cee0; --muted: #8b9ab3; --border: #223350; --border-strong: #32456a; --brand: #2dd4bf; --brand-hover: #5eead4; --brand-soft: #0d3b39; --brand-text: #7fe6d8; --on-brand: #04211f; --accent: #fbbf24; --accent-soft: #3a2c08; --danger: #f87171; --danger-soft: #3d1717; --success: #4ade80; --success-soft: #10301c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 44px rgba(0, 0, 0, .55); --ring: 0 0 0 3px rgba(45, 212, 191, .30); --checker-a: #1a2438; --checker-b: #101a2c; } /* ---------------------------------------------------------- 3. base body -- */ body { font-family: var(--font-sans); background: var(--bg); background-image: var(--bg-grad); background-repeat: no-repeat; background-attachment: fixed; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } ::selection { background: var(--brand); color: var(--on-brand); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); } .container-narrow { max-width: var(--maxw-narrow); } .skip-link { position: absolute; left: -9999px; top: var(--s3); z-index: 200; background: var(--brand); color: var(--on-brand); padding: var(--s3) var(--s5); border-radius: var(--r-md); font-weight: 600; } .skip-link:focus { left: var(--s5); } /* --------------------------------------------------------------- 4. head -- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: var(--s5); height: 66px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; } .brand-mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #6366f1)); display: grid; place-items: center; box-shadow: var(--shadow-sm); } .brand-mark svg { width: 19px; height: 19px; stroke: var(--on-brand); } .brand-name { font-size: 1.16rem; font-weight: 800; letter-spacing: -0.03em; } .brand-name span { color: var(--brand); } .header-nav { display: flex; align-items: center; gap: var(--s1); margin-left: auto; } .nav-link { padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: .92rem; font-weight: 550; color: var(--text-2); text-decoration: none; transition: background var(--tr), color var(--tr); white-space: nowrap; } .nav-link:hover { background: var(--surface-2); color: var(--text); } .nav-link.is-active { color: var(--brand); background: var(--brand-soft); } .icon-btn { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-2); transition: background var(--tr), color var(--tr); flex: 0 0 auto; /* never let a flex row squash a square button */ } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 19px; height: 19px; } .nav-toggle { display: none; } /* Only meaningful inside the mobile drawer; the desktop header has its own icon button for this. */ .nav-theme { display: none; } @media (max-width: 900px) { .nav-theme { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; border-top: 1px solid var(--border); margin-top: var(--s2); padding-top: var(--s4); } .nav-theme svg { width: 18px; height: 18px; } } @media (max-width: 900px) { /* Anchored to the header itself (which is sticky, so it is a containing block) rather than a hard-coded top offset — the header changes height when the search box wraps to its own row below. */ .header-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--s3) var(--s5) var(--s5); box-shadow: var(--shadow-lg); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--tr), transform var(--tr); } .header-nav.is-open { transform: none; opacity: 1; pointer-events: auto; } .nav-link { padding: var(--s3) var(--s4); font-size: 1rem; } .nav-toggle { display: grid; } .header-actions-inline { display: none; } .search-wrap { max-width: none; } } /* Below this width a search box sharing the row with the logo is uselessly narrow, so it gets a row of its own. */ @media (max-width: 640px) { .header-inner { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: var(--s3); } .nav-toggle { margin-left: auto; } .search-wrap { order: 3; flex: 1 0 100%; } .search-field { height: 40px; } } /* ------------------------------------------------------------- 5. search -- */ /* min-width:0 is required: a flex item's automatic minimum size is its min-content width, which would otherwise stop the search box shrinking. */ .search-wrap { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; } .search-field { display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0 var(--s4); height: 42px; transition: border-color var(--tr), box-shadow var(--tr); } .search-field:focus-within { border-color: var(--brand); box-shadow: var(--ring); } .search-field svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; } .search-field input { flex: 1; border: none; background: none; outline: none; font-size: .94rem; min-width: 0; } .search-field input::placeholder { color: var(--muted); } .search-kbd { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-height: 62vh; overflow-y: auto; padding: var(--s2); } .search-results:empty { display: none; } .search-result { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); text-decoration: none; transition: background var(--tr); } .search-result:hover, .search-result.is-active { background: var(--surface-2); } .search-result-name { font-weight: 600; font-size: .92rem; } .search-result-blurb { font-size: .8rem; color: var(--muted); } .search-empty { padding: var(--s5); text-align: center; color: var(--muted); font-size: .9rem; } @media (max-width: 900px) { .search-wrap { max-width: none; } } /* --------------------------------------------------------------- 6. hero -- */ .hero { padding: var(--s10) 0 var(--s8); text-align: center; } .hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -0.045em; line-height: 1.08; max-width: 17ch; margin-inline: auto; } .hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand) 45%, #6366f1)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { margin-top: var(--s5); font-size: clamp(1rem, 1.9vw, 1.16rem); color: var(--text-2); max-width: 56ch; margin-inline: auto; } .hero-search { margin: var(--s7) auto 0; max-width: 560px; } .hero-search .search-field { height: 54px; font-size: 1rem; box-shadow: var(--shadow-md); } .pill-row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s5); } .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 6px var(--s4); font-size: .84rem; color: var(--text-2); text-decoration: none; transition: border-color var(--tr), color var(--tr), transform var(--tr); } .pill:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); } .pill svg { width: 14px; height: 14px; color: var(--brand); } /* ------------------------------------------------------------ 7. sections -- */ .section { padding: var(--s8) 0; } .section-head { margin-bottom: var(--s6); } .section-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); } .section-head p { color: var(--muted); margin-top: var(--s2); } .section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } .eyebrow { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--s2); } /* --------------------------------------------------------------- 8. cards -- */ .grid { display: grid; gap: var(--s4); } .grid-cats { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } .grid-tools { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-sm); } .cat-card { display: block; text-decoration: none; position: relative; overflow: hidden; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); } .cat-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 55%); opacity: 0; transition: opacity var(--tr); } .cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--brand); } .cat-card:hover::after { opacity: 1; } .cat-icon { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; margin-bottom: var(--s4); } .cat-icon svg { width: 21px; height: 21px; } .cat-card h3 { font-size: 1.04rem; } .cat-card p { font-size: .88rem; color: var(--muted); margin-top: 6px; } .cat-count { font-size: .78rem; color: var(--brand); font-weight: 650; margin-top: var(--s3); display: block; } .tool-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; position: relative; transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); } .tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); } .tool-card h3 { font-size: .98rem; display: flex; align-items: center; gap: var(--s2); } .tool-card p { font-size: .855rem; color: var(--muted); line-height: 1.5; } .tool-card.is-soon { opacity: .58; pointer-events: none; } .badge { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-full); background: var(--surface-3); color: var(--muted); vertical-align: middle; } .badge-new { background: var(--brand-soft); color: var(--brand-text); } .badge-soon { background: var(--surface-3); color: var(--muted); } .badge-accent { background: var(--accent-soft); color: var(--accent); } /* --------------------------------------------------------- 9. trust strip -- */ .trust { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s6); box-shadow: var(--shadow-sm); } .trust-item { display: flex; gap: var(--s3); align-items: flex-start; } .trust-item svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 2px; } .trust-item strong { display: block; font-size: .93rem; } .trust-item span { font-size: .83rem; color: var(--muted); } /* -------------------------------------------------------------- 10. forms -- */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: .84rem; font-weight: 600; color: var(--text-2); } .hint { font-size: .78rem; color: var(--muted); } .input, .select, .textarea { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px var(--s3); font-size: .94rem; transition: border-color var(--tr), box-shadow var(--tr); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .textarea { min-height: 140px; resize: vertical; font-family: var(--font-mono); font-size: .87rem; line-height: 1.6; } .select { appearance: none; padding-right: var(--s7); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 15px; } .input-group { display: flex; } .input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); } .input-group .input-suffix { display: grid; place-items: center; padding: 0 var(--s3); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); color: var(--muted); font-size: .85rem; } /* range */ input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: var(--r-full); background: var(--surface-3); outline: none; cursor: pointer; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; } input[type='range']::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); background: var(--brand); box-shadow: var(--shadow-sm); cursor: pointer; } /* checkbox / radio */ .check { display: flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: .9rem; } .check input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; } /* segmented control */ .segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 2px; } .segmented button { padding: 6px var(--s4); border-radius: 7px; font-size: .86rem; font-weight: 550; color: var(--muted); transition: background var(--tr), color var(--tr); white-space: nowrap; } .segmented button:hover { color: var(--text); } .segmented button.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); } /* ------------------------------------------------------------ 11. buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 11px var(--s5); border-radius: var(--r-sm); font-size: .93rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background var(--tr), border-color var(--tr), transform var(--tr), opacity var(--tr); } .btn svg { width: 17px; height: 17px; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; } .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-hover); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--brand); color: var(--brand); } .btn-ghost { color: var(--text-2); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { background: var(--danger-soft); color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-lg { padding: 14px var(--s7); font-size: 1rem; border-radius: var(--r-md); } .btn-sm { padding: 7px var(--s3); font-size: .84rem; } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); } /* A toggle button that is currently on (mirror, flip, and similar). */ .btn.is-active { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand); } /* Square icon-and-label buttons for transform controls. */ .tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } .tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: var(--s3) var(--s2); border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); font-size: .74rem; font-weight: 550; color: var(--text-2); transition: border-color var(--tr), color var(--tr), background var(--tr); } .tile svg { width: 20px; height: 20px; } .tile:hover { border-color: var(--brand); color: var(--brand); } .tile.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); } /* Canvas preview stage shared by transform-style tools. */ .canvas-stage { display: flex; align-items: center; justify-content: center; min-height: 260px; max-height: 66vh; border-radius: var(--r-md); } .canvas-stage canvas { max-width: 100%; max-height: 66vh; width: auto; height: auto; border-radius: 4px; } /* ----------------------------------------------------------- 12. dropzone -- */ .dropzone { position: relative; border: 2px dashed var(--border-strong); border-radius: var(--r-xl); background: var(--surface); padding: var(--s9) var(--s5); text-align: center; cursor: pointer; transition: border-color var(--tr), background var(--tr), transform var(--tr); } .dropzone:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 3%, var(--surface)); } .dropzone.is-dragging { border-color: var(--brand); background: var(--brand-soft); transform: scale(1.005); } .dropzone input[type='file'] { display: none; } .dropzone-icon { width: 58px; height: 58px; margin: 0 auto var(--s4); border-radius: var(--r-lg); background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; } .dropzone-icon svg { width: 27px; height: 27px; } .dropzone h3 { font-size: 1.08rem; } .dropzone p { color: var(--muted); font-size: .89rem; margin-top: 6px; } .dropzone .btn { margin-top: var(--s5); pointer-events: none; } /* ---------------------------------------------------------- 13. file list -- */ .file-list { display: flex; flex-direction: column; gap: var(--s2); } .file-item { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s3); } .file-thumb { width: 46px; height: 46px; border-radius: var(--r-sm); flex-shrink: 0; object-fit: cover; background-color: var(--surface-2); background-image: linear-gradient(45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-b) 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; } /* rows are clickable when a live preview can show that image */ .file-item[data-pick] { cursor: pointer; transition: border-color var(--tr), background var(--tr); } .file-item[data-pick]:hover { border-color: var(--border-strong); } .file-item.is-previewing { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); } .file-item.is-previewing .file-name::after { content: 'previewing'; margin-left: var(--s2); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); vertical-align: middle; } .file-meta { flex: 1; min-width: 0; } .file-name { font-size: .9rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-sub { font-size: .78rem; color: var(--muted); display: flex; gap: var(--s2); flex-wrap: wrap; } .file-sub .ok { color: var(--success); font-weight: 600; } .file-sub .down { color: var(--success); font-weight: 600; } .file-sub .up { color: var(--danger); font-weight: 600; } .file-actions { display: flex; gap: var(--s1); flex-shrink: 0; } /* checkerboard for transparent previews */ .checker { background-color: var(--checker-a); background-image: linear-gradient(45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--checker-b) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--checker-b) 75%); background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; } /* ------------------------------------------------- 13b. compare slider -- */ .compare { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border); user-select: none; touch-action: none; max-height: 62vh; } .compare img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; } .compare-after { position: absolute; inset: 0; overflow: hidden; width: 50%; } /* The clipped layer must render its image at the full container width or the two halves would not line up as the divider moves. */ .compare-after img { position: absolute; top: 0; left: 0; height: 100%; width: auto; max-width: none; } .compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--brand); transform: translateX(-1px); cursor: ew-resize; } .compare-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface); box-shadow: var(--shadow-md); } .compare-tag { position: absolute; top: var(--s3); z-index: 2; background: rgba(0, 0, 0, .62); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 3px 9px; border-radius: var(--r-full); pointer-events: none; } .compare-tag.is-left { left: var(--s3); } .compare-tag.is-right { right: var(--s3); } /* ------------------------------------------------------- 13c. cropper -- */ .cropper-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; max-height: 66vh; border-radius: var(--r-md); overflow: hidden; touch-action: none; user-select: none; } .cropper-stage img { display: block; max-width: 100%; max-height: 66vh; width: auto; height: auto; -webkit-user-drag: none; user-select: none; } /* One element does both jobs: the outline of the crop, and — via a huge spread shadow — the dimming of everything outside it. */ .crop-rect { position: absolute; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); cursor: move; } .crop-rect::before, .crop-rect::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45; } /* rule-of-thirds guides */ .crop-rect::before { background: linear-gradient(to right, transparent 33.33%, #fff 33.33%, #fff calc(33.33% + 1px), transparent calc(33.33% + 1px)), linear-gradient(to right, transparent 66.66%, #fff 66.66%, #fff calc(66.66% + 1px), transparent calc(66.66% + 1px)); } .crop-rect::after { background: linear-gradient(to bottom, transparent 33.33%, #fff 33.33%, #fff calc(33.33% + 1px), transparent calc(33.33% + 1px)), linear-gradient(to bottom, transparent 66.66%, #fff 66.66%, #fff calc(66.66% + 1px), transparent calc(66.66% + 1px)); } .crop-handle { position: absolute; width: 14px; height: 14px; background: var(--brand); border: 2px solid #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } /* Fingers need a bigger target than the visible dot. */ .crop-handle::after { content: ''; position: absolute; inset: -10px; } .crop-handle[data-dir='nw'] { top: -7px; left: -7px; cursor: nwse-resize; } .crop-handle[data-dir='n'] { top: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; } .crop-handle[data-dir='ne'] { top: -7px; right: -7px; cursor: nesw-resize; } .crop-handle[data-dir='e'] { top: 50%; right: -7px; margin-top: -7px; cursor: ew-resize; } .crop-handle[data-dir='se'] { bottom: -7px; right: -7px; cursor: nwse-resize; } .crop-handle[data-dir='s'] { bottom: -7px; left: 50%; margin-left: -7px; cursor: ns-resize; } .crop-handle[data-dir='sw'] { bottom: -7px; left: -7px; cursor: nesw-resize; } .crop-handle[data-dir='w'] { top: 50%; left: -7px; margin-top: -7px; cursor: ew-resize; } .crop-size-tag { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); background: var(--brand); color: var(--on-brand); font-size: .74rem; font-weight: 650; font-family: var(--font-mono); padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap; pointer-events: none; } /* film-strip of loaded images */ .strip { display: flex; gap: var(--s2); overflow-x: auto; padding: 2px; } .strip button { position: relative; flex: 0 0 auto; width: 62px; height: 62px; padding: 0; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; opacity: .6; transition: opacity var(--tr), border-color var(--tr); } .strip button img { width: 100%; height: 100%; object-fit: cover; } .strip button:hover { opacity: 1; } .strip button.is-active { opacity: 1; border-color: var(--brand); } .strip button .dot { position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--success); border: 1.5px solid var(--surface); } /* ------------------------------------------------------- 13d. swatches -- */ .swatch-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .swatch { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: var(--s4); border-radius: var(--r-md); border: 1px solid rgba(0, 0, 0, .12); min-height: 104px; text-align: left; cursor: pointer; transition: transform var(--tr), box-shadow var(--tr); } .swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .swatch strong { font-size: .92rem; font-family: var(--font-mono); letter-spacing: -.02em; } .swatch span { font-size: .7rem; opacity: .82; font-family: var(--font-mono); } .swatch em { font-size: .7rem; opacity: .75; font-style: normal; margin-top: 2px; } .dominant-row { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; } .dominant-chip { width: 62px; height: 62px; border-radius: var(--r-md); border: 1px solid var(--border); flex: 0 0 auto; } /* live eyedropper readout */ .hover-readout { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: .8rem; } .hover-chip { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); } /* grid preview overlay used by the splitter */ .split-preview { position: relative; display: inline-block; max-width: 100%; } .split-preview img { display: block; max-width: 100%; max-height: 60vh; border-radius: var(--r-md); } .split-grid { position: absolute; inset: 0; display: grid; pointer-events: none; } .split-grid span { border: 1px dashed rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); display: grid; place-items: center; color: #fff; font-size: .7rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } /* -------------------------------------------------------- 13e. redactor -- */ .redact-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; } .redact-stage canvas { max-width: 100%; height: auto; border-radius: var(--r-md); } .redact-layer { position: absolute; inset: 0; cursor: crosshair; touch-action: none; user-select: none; } .redact-boxes { position: absolute; inset: 0; pointer-events: none; } .redact-box { position: absolute; pointer-events: auto; border: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 3px; } .redact-del { position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 15px; line-height: 1; font-weight: 700; display: grid; place-items: center; cursor: pointer; border: 2px solid var(--surface); } .redact-ghost { position: absolute; pointer-events: none; border: 2px dashed #fff; background: rgba(0, 0, 0, .25); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); } /* ------------------------------------------------------ 13f. key/value -- */ .kv-list { display: flex; flex-direction: column; } .kv { display: flex; gap: var(--s4); justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .88rem; } .kv:last-child { border-bottom: none; } .kv-key { color: var(--muted); flex: 0 0 auto; } .kv-val { font-weight: 550; text-align: right; word-break: break-word; } /* ------------------------------------------------------- 13g. text tool -- */ /* Two panes side by side on desktop, stacked on mobile. */ .text-panes { display: grid; gap: var(--s4); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .text-panes.is-split { grid-template-columns: 1fr 1fr; } } .text-pane { display: flex; flex-direction: column; min-width: 0; } .text-pane .panel { display: flex; flex-direction: column; flex: 1; } .text-pane .panel-body { flex: 1; display: flex; } .code-area { width: 100%; flex: 1; min-height: 260px; resize: vertical; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s3); font-family: var(--font-mono); font-size: .82rem; line-height: 1.6; tab-size: 2; white-space: pre; overflow: auto; } .code-area:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .code-area[readonly] { background: var(--surface-2); } .code-area.is-wrap { white-space: pre-wrap; word-break: break-word; } .code-out { margin: 0; min-height: 260px; max-height: 62vh; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s3); font-family: var(--font-mono); font-size: .82rem; line-height: 1.6; white-space: pre; width: 100%; } /* status line under an input */ .tool-status { display: flex; align-items: center; gap: var(--s2); font-size: .82rem; font-weight: 550; } .tool-status svg { width: 15px; height: 15px; } .tool-status.is-ok { color: var(--success); } .tool-status.is-err { color: var(--danger); } .tool-status.is-idle { color: var(--muted); font-weight: 400; } /* little chips of derived info (counts, sizes) */ .chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px var(--s3); font-size: .76rem; color: var(--text-2); } .chip strong { color: var(--text); font-variant-numeric: tabular-nums; } /* syntax highlighting for generated output */ .tok-key { color: var(--brand); } .tok-str { color: #16a34a; } .tok-num { color: #d97706; } .tok-bool, .tok-null { color: #7c3aed; font-weight: 600; } :root[data-theme='dark'] .tok-str { color: #4ade80; } :root[data-theme='dark'] .tok-num { color: #fbbf24; } :root[data-theme='dark'] .tok-bool, :root[data-theme='dark'] .tok-null { color: #c4b5fd; } /* regex / diff match highlight */ mark.hit { background: color-mix(in srgb, var(--brand) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; } mark.hit-alt { background: color-mix(in srgb, var(--accent) 40%, transparent); } /* --------------------------------------------------------- 13h. hashes -- */ .hash-row { display: grid; gap: var(--s3); align-items: center; grid-template-columns: 150px minmax(0, 1fr) auto; padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .hash-row:last-child { border-bottom: none; } .hash-name { font-weight: 650; font-size: .88rem; } .hash-value { font-family: var(--font-mono); font-size: .78rem; word-break: break-all; color: var(--text-2); background: var(--surface-2); padding: 6px 8px; border-radius: 6px; } @media (max-width: 700px) { .hash-row { grid-template-columns: 1fr; } } /* JWT output blocks */ .jwt-part { margin-bottom: var(--s6); } .jwt-part h3 { font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); margin-bottom: var(--s3); } .jwt-sig { display: block; font-family: var(--font-mono); font-size: .76rem; word-break: break-all; background: var(--surface-2); padding: var(--s3); border-radius: var(--r-sm); color: var(--muted); } /* ------------------------------------------------- 13i. colour scale -- */ .scale-row { display: flex; flex-wrap: wrap; gap: 4px; } .scale-chip { flex: 1 1 82px; padding: 12px 4px; border: none; border-radius: 6px; font-family: var(--font-mono); font-size: .68rem; cursor: pointer; transition: transform var(--tr); } .scale-chip:hover { transform: translateY(-2px); } .swatch-big { width: 100%; height: 110px; border-radius: var(--r-md); border: 1px solid var(--border); } /* ---------------------------------------------- 13j. gradient stops -- */ .stop-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) 0; border-bottom: 1px solid var(--border); } .stop-row:last-child { border-bottom: none; } .gradient-preview { width: 100%; height: 200px; border-radius: var(--r-md); border: 1px solid var(--border); } .shadow-stage { display: grid; place-items: center; min-height: 240px; padding: var(--s8); border-radius: var(--r-md); border: 1px solid var(--border); } .shadow-box { width: 150px; height: 100px; } .shadow-text { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; } /* -------------------------------------------------------- 13k. keyboard -- */ .kb-wrap { overflow-x: auto; padding: var(--s2); } .kb { min-width: 720px; display: flex; flex-direction: column; gap: 5px; } .kb-row { display: flex; gap: 5px; } .kb-key { min-width: 0; height: 46px; display: grid; place-items: center; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: .72rem; font-weight: 600; user-select: none; transition: background 60ms, color 60ms, transform 60ms; } .kb-key.is-tested { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand); } .kb-key.is-down { background: var(--brand); color: var(--on-brand); transform: translateY(2px); border-color: var(--brand); } /* -------------------------------------------------------- 13l. testers -- */ .test-stage { display: grid; place-items: center; min-height: 300px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; } .test-stage video { max-width: 100%; max-height: 60vh; border-radius: var(--r-md); } /* live level meter for the microphone */ .meter { height: 26px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; position: relative; } .meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--success), var(--accent) 70%, var(--danger)); transition: width 60ms linear; } .meter-peak { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .5; } .scope { width: 100%; height: 120px; display: block; border-radius: var(--r-sm); background: var(--surface-2); } /* full-screen colour test */ .fs-test { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; cursor: pointer; } .fs-hint { background: rgba(0,0,0,.6); color: #fff; padding: var(--s3) var(--s5); border-radius: var(--r-full); font-size: .84rem; pointer-events: none; transition: opacity var(--tr); } /* touch test grid */ .touch-grid { display: grid; gap: 3px; touch-action: none; user-select: none; grid-template-columns: repeat(8, 1fr); } .touch-cell { aspect-ratio: 1; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); transition: background 80ms; } .touch-cell.is-hit { background: var(--brand); border-color: var(--brand); } /* typing test */ .type-text { font-size: 1.15rem; line-height: 2; letter-spacing: .01em; font-family: var(--font-mono); /* six whole lines — an arbitrary pixel height would slice the last one in half, which looks like a rendering fault rather than a scroll */ max-height: 13.8rem; overflow: hidden; /* pre-wrap keeps the spaces between the character spans while still letting the passage wrap onto as many lines as it needs */ white-space: pre-wrap; word-break: break-word; } .type-text span { transition: color 60ms; } .type-ok { color: var(--success); } .type-bad { color: var(--danger); background: var(--danger-soft); border-radius: 3px; } .type-todo { color: var(--muted); } .type-cur { background: var(--brand); color: var(--on-brand); border-radius: 3px; } /* ------------------------------------------------- 13m. fancy text rows -- */ .fancy-row { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border); } .fancy-row:last-child { border-bottom: 0; } .fancy-row:hover { background: var(--surface-2); } .fancy-label { flex: 0 0 118px; font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .fancy-out { flex: 1 1 auto; min-width: 0; font-size: 1.06rem; /* these are real characters, not styling, so they must be free to wrap */ overflow-wrap: anywhere; line-height: 1.7; } .fancy-copy { flex: 0 0 auto; } @media (max-width: 640px) { .fancy-row { flex-wrap: wrap; gap: var(--s2); } .fancy-label { flex: 1 1 100%; } .fancy-out { flex: 1 1 auto; } } /* --------------------------------------------------- 13n. emoji picker -- */ .emoji-group { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: var(--s6) 0 var(--s3); } .emoji-group:first-child { margin-top: 0; } .emoji-group span { opacity: .6; font-weight: 400; } .emoji-grid { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); } .emoji-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.45rem; line-height: 1; border: 1px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer; padding: 0; transition: background var(--tr), transform var(--tr); } .emoji-cell:hover { background: var(--surface-3); transform: scale(1.14); } .emoji-cell.is-picked { background: var(--brand); } /* symbols are drawn in the text font, so they need help to match the emoji */ .emoji-cell { font-family: var(--font-sans); } /* ----------------------------------------------------- 13o. calculators -- */ .calc-fields { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* the one number the visitor came for */ .calc-hero { text-align: center; padding: var(--s7) var(--s5); background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); } .calc-hero-value { font-size: clamp(1.9rem, 6vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .calc-hero-label { font-size: .85rem; color: var(--muted); margin-top: var(--s2); } .calc-hero-sub { font-size: .95rem; color: var(--text-2); margin-top: var(--s3); } /* secondary figures */ .calc-stats { display: grid; gap: var(--s4); margin-top: var(--s5); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .calc-stat { padding: var(--s4); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); } .calc-stat strong { display: block; font-size: 1.15rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .calc-stat span { font-size: .76rem; color: var(--muted); } /* proportion bars — cheaper and more readable than a real chart */ .bars { display: flex; flex-direction: column; gap: var(--s3); } .bar-row { display: grid; grid-template-columns: 108px 1fr auto; gap: var(--s3); align-items: center; } .bar-track { height: 15px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--r-full); background: var(--brand); transition: width var(--tr); } .bar-fill.is-alt { background: var(--accent); } .bar-fill.is-warn { background: var(--danger); } .bar-label { font-size: .8rem; color: var(--muted); } .bar-value { font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 550; } @media (max-width: 520px) { .bar-row { grid-template-columns: 1fr auto; } .bar-track { grid-column: 1 / -1; order: 3; } } /* result tables need to scroll on a phone rather than widen the page */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .calc-table { width: 100%; border-collapse: collapse; font-size: .86rem; } .calc-table th, .calc-table td { padding: var(--s3) var(--s4); text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .calc-table th:first-child, .calc-table td:first-child { text-align: left; } .calc-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--surface); } .calc-table td { font-variant-numeric: tabular-nums; } .calc-table tbody tr:hover { background: var(--surface-2); } .calc-table tbody tr.is-highlight { background: var(--brand-soft); } /* a timeline of stages, used by the pregnancy and countdown tools */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline-item { display: grid; grid-template-columns: 92px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: 0; } .timeline-item.is-now { background: var(--brand-soft); border-radius: var(--r-sm); padding-inline: var(--s3); } .timeline-when { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .timeline-what { font-size: .88rem; } /* big live countdown */ .count-grid { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center; } .count-cell { min-width: 84px; padding: var(--s4); text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); } .count-num { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .count-unit { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; } /* ---------------------------------------------------------- 14. feedback -- */ .progress { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; } .progress-bar { height: 100%; width: 0; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #6366f1)); transition: width 220ms ease; } .spinner { width: 17px; height: 17px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .toast-host { position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: var(--s2); align-items: center; pointer-events: none; } .toast { background: var(--text); color: var(--bg); padding: 10px var(--s5); border-radius: var(--r-full); font-size: .88rem; font-weight: 550; box-shadow: var(--shadow-lg); animation: toast-in 200ms cubic-bezier(.2, .9, .3, 1.2); max-width: 90vw; text-align: center; } .toast.is-error { background: var(--danger); color: #fff; } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } } .alert { display: flex; gap: var(--s3); align-items: flex-start; border-radius: var(--r-md); padding: var(--s4); font-size: .88rem; line-height: 1.55; } /* The icon is usually wrapped in a , so it is the wrapper that is the flex item — putting flex-shrink on the svg alone lets the wrapper squash it. */ .alert > :first-child { flex-shrink: 0; display: flex; margin-top: 1px; } .alert svg { width: 18px; height: 18px; flex-shrink: 0; } .alert-info { background: var(--brand-soft); color: var(--brand-text); } .alert-warn { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, var(--text)); } .alert-error { background: var(--danger-soft); color: var(--danger); } /* ------------------------------------------------------------ 15. tool ui -- */ .tool-header { padding: var(--s7) 0 var(--s5); } .breadcrumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: var(--s3); } .breadcrumbs a { text-decoration: none; } .breadcrumbs a:hover { color: var(--brand); } .breadcrumbs svg { width: 13px; height: 13px; opacity: .6; } .tool-header h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); } .tool-header .lede { color: var(--text-2); margin-top: var(--s3); max-width: 62ch; font-size: 1.02rem; } .tool-layout { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); } @media (min-width: 1080px) { .tool-layout.has-rail { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } .tool-rail { position: sticky; top: 86px; } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); background: var(--surface-2); } .panel-head h2 { font-size: .96rem; } .panel-body { padding: var(--s5); } .panel-foot { padding: var(--s4) var(--s5); border-top: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; } .options-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .stat-row { display: flex; gap: var(--s6); flex-wrap: wrap; } .stat strong { display: block; font-size: 1.25rem; letter-spacing: -0.02em; } .stat span { font-size: .78rem; color: var(--muted); } /* ------------------------------------------------- 15b. support list -- */ .support-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s2); } .support-list li { display: flex; gap: var(--s2); align-items: flex-start; font-size: .84rem; color: var(--text-2); } .support-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; } .support-list li.is-off { opacity: .6; } .support-list li.is-on svg { color: var(--success); } .support-list li.is-off svg { color: var(--muted); } /* ---------------------------------------------------------------- 16. ads -- */ .ad-slot { display: flex; align-items: center; justify-content: center; margin: var(--s6) auto; width: 100%; overflow: hidden; min-height: 90px; } .ad-slot[data-format='rail'] { min-height: 600px; margin: 0; } .ad-placeholder { width: 100%; min-height: inherit; border: 1px dashed var(--border-strong); border-radius: var(--r-md); display: grid; place-items: center; color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--surface) 60%, transparent); } .ad-label { display: block; text-align: center; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } /* --------------------------------------------------- 16b. help section -- */ .help { padding: var(--s9) 0 var(--s8); } .help-head { text-align: center; max-width: 60ch; margin: 0 auto var(--s8); } .help-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); } .help-head p { color: var(--muted); margin-top: var(--s3); font-size: 1.02rem; } /* numbered "how to use" cards */ .steps { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; } .step { position: relative; counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6) var(--s5) var(--s5); box-shadow: var(--shadow-sm); transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr); } .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); } .step::before { content: counter(step); position: absolute; top: -15px; left: var(--s5); width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #6366f1)); color: var(--on-brand); font-size: .88rem; font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 3px solid var(--bg); } .step h3 { font-size: 1rem; margin-bottom: 6px; } .step p { font-size: .9rem; color: var(--text-2); line-height: 1.6; } /* "good to know" tip cards */ .tips { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .tip { display: flex; gap: var(--s4); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); } .tip-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; } .tip-icon svg { width: 19px; height: 19px; } .tip h3 { font-size: .95rem; margin-bottom: 5px; } .tip p { font-size: .88rem; color: var(--text-2); line-height: 1.6; } /* a highlighted single point */ .help-note { display: flex; gap: var(--s4); align-items: flex-start; border-radius: var(--r-lg); padding: var(--s5) var(--s6); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); } .help-note svg { width: 22px; height: 22px; color: var(--brand); flex: 0 0 auto; margin-top: 2px; } .help-note strong { display: block; margin-bottom: 4px; } .help-note p { font-size: .92rem; color: var(--text-2); line-height: 1.65; } .help-section-title { font-size: 1.15rem; margin-bottom: var(--s5); text-align: center; } /* -------------------------------------------------------------- 17. prose -- */ .prose { max-width: 68ch; color: var(--text-2); } .prose > * + * { margin-top: var(--s4); } .prose h2 { font-size: 1.3rem; color: var(--text); margin-top: var(--s7); } .prose h3 { font-size: 1.05rem; color: var(--text); margin-top: var(--s6); } .prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol { padding-left: var(--s5); display: flex; flex-direction: column; gap: 6px; } .prose li::marker { color: var(--brand); } .prose code { font-family: var(--font-mono); font-size: .87em; background: var(--surface-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 5px; } .prose strong { color: var(--text); } .prose blockquote { border-left: 3px solid var(--brand); padding-left: var(--s4); color: var(--muted); } .faq details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .faq details + details { margin-top: var(--s2); } .faq summary { padding: var(--s4) var(--s5); cursor: pointer; font-weight: 600; font-size: .94rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; width: 9px; height: 9px; flex-shrink: 0; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--tr); } .faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); } .faq details > div { padding: 0 var(--s5) var(--s5); color: var(--text-2); font-size: .92rem; line-height: 1.65; } /* ------------------------------------------------------------- 18. footer -- */ .site-footer { margin-top: auto; padding: var(--s9) 0 var(--s6); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 70%, transparent); } .footer-grid { display: grid; gap: var(--s7); grid-template-columns: 1.6fr repeat(auto-fit, minmax(140px, 1fr)); } .footer-about p { font-size: .87rem; color: var(--muted); margin-top: var(--s3); max-width: 34ch; } .footer-col h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: var(--s3); } .footer-col a { display: block; font-size: .88rem; color: var(--text-2); text-decoration: none; padding: 3px 0; } .footer-col a:hover { color: var(--brand); } .footer-bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: .82rem; color: var(--muted); } .footer-bottom a { text-decoration: none; } .footer-bottom a:hover { color: var(--brand); } /* ------------------------------------------------------------ 19. utility -- */ .u-center { text-align: center; } .u-muted { color: var(--muted); } .u-mono { font-family: var(--font-mono); } .u-nowrap { white-space: nowrap; } .u-mt-3 { margin-top: var(--s3); } .u-mt-4 { margin-top: var(--s4); } .u-mt-5 { margin-top: var(--s5); } .u-mt-6 { margin-top: var(--s6); } .u-mt-7 { margin-top: var(--s7); } .u-mt-8 { margin-top: var(--s8); } .u-hide { display: none !important; } .u-flex { display: flex; } .u-between { justify-content: space-between; } .u-center-y { align-items: center; } .u-gap-2 { gap: var(--s2); } .u-gap-3 { gap: var(--s3); } .u-gap-4 { gap: var(--s4); } .u-wrap { flex-wrap: wrap; } .u-grow { flex: 1; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .site-header, .site-footer, .ad-slot, .toast-host, .no-print { display: none !important; } body { background: #fff; } }