/* ========================================================================== OmniTools — design system Direction: blueprint workbench. Graph paper, technical rings, machined edges. One stylesheet for every page. No framework, no build step. ========================================================================== FONTS ----- The spec calls for self-hosted Bricolage Grotesque + IBM Plex Sans/Mono. Those .woff2 files are NOT bundled (they could not be downloaded at build time). The site currently runs on a tuned system stack, which is fast and looks clean. To install the real fonts: 1. Download the woff2 files from https://fonts.google.com (or google-webfonts-helper) and drop them in /assets/fonts/ with these exact names: bricolage-grotesque-600.woff2 bricolage-grotesque-700.woff2 ibm-plex-sans-400.woff2 ibm-plex-sans-500.woff2 ibm-plex-sans-600.woff2 ibm-plex-mono-400.woff2 ibm-plex-mono-500.woff2 2. Uncomment the @font-face block directly below. 3. In every , uncomment the two lines. Nothing else needs to change — the token names already point at them. */ /* @font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-grotesque-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Core palette */ --ink: #0A1628; --ink-2: #16243B; --blue: #2F6BFF; --brass: #F2A93B; --paper: #F4F6FA; --surface: #FFFFFF; --line: #DDE3EC; --text: #1A2333; --muted: #5A6779; /* Derived */ --blue-soft: rgba(47, 107, 255, 0.10); --blue-dark: #1F52D6; --brass-soft: rgba(242, 169, 59, 0.14); --surface-2: #FAFBFD; --danger: #C0392B; --danger-soft: rgba(192, 57, 43, 0.10); --success: #1E7F52; --success-soft: rgba(30, 127, 82, 0.10); --on-ink: #E8EDF6; --on-ink-muted: #93A3BC; --grid-ink: rgba(232, 237, 246, 0.06); /* Type */ --font-display: "Bricolage Grotesque", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* Shape */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* Depth */ --shadow-1: 0 1px 2px rgba(10, 22, 40, 0.05); --shadow-2: 0 4px 14px rgba(10, 22, 40, 0.07); --shadow-3: 0 14px 40px rgba(10, 22, 40, 0.12); /* Layout */ --wrap: 1180px; --wrap-narrow: 760px; --header-h: 64px; } /* Dark mode — system preference, overridable by the manual toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0B121F; --surface: #131C2C; --surface-2: #182234; --ink: #060C16; --ink-2: #0F1929; --line: #26334A; --text: #E4EAF4; --muted: #94A3B8; --blue: #6D97FF; --blue-dark: #8FB0FF; --blue-soft: rgba(109, 151, 255, 0.14); --on-ink: #E8EDF6; --on-ink-muted: #8C9CB6; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-3: 0 14px 40px rgba(0, 0, 0, 0.55); --danger: #F1837A; --success: #5BC894; } } :root[data-theme="dark"] { --paper: #0B121F; --surface: #131C2C; --surface-2: #182234; --ink: #060C16; --ink-2: #0F1929; --line: #26334A; --text: #E4EAF4; --muted: #94A3B8; --blue: #6D97FF; --blue-dark: #8FB0FF; --blue-soft: rgba(109, 151, 255, 0.14); --on-ink: #E8EDF6; --on-ink-muted: #8C9CB6; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-3: 0 14px 40px rgba(0, 0, 0, 0.55); --danger: #F1837A; --success: #5BC894; } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); } h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; } h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.25; } h4 { font-size: 1.05rem; line-height: 1.3; } p { margin: 0 0 var(--sp-4); } a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--blue-dark); } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35rem; } li { margin-bottom: var(--sp-2); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--blue-soft); color: var(--text); padding: 0.12em 0.4em; border-radius: var(--r-sm); } pre { background: var(--ink); color: var(--on-ink); padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; line-height: 1.6; } pre code { background: none; padding: 0; color: inherit; } table { border-collapse: collapse; width: 100%; font-size: 0.94rem; } th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); } th { font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 500; } ::selection { background: var(--brass); color: var(--ink); } /* Focus — one visible ring everywhere, no exceptions. */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blue); color: #fff; padding: var(--sp-3) var(--sp-4); font-weight: 600; border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { left: 0; color: #fff; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); } .wrap-narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--sp-8); } .section-tight { padding-block: var(--sp-7); } .section-head { max-width: 640px; margin-bottom: var(--sp-6); } .section-head p { color: var(--muted); margin-bottom: 0; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-3); display: block; } .eyebrow-brass { color: var(--brass); } .lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); line-height: 1.6; } /* -------------------------------------------------------------------------- 4. Top bar -------------------------------------------------------------------------- */ .topbar { background: var(--ink); color: var(--on-ink-muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-align: center; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .topbar strong { color: var(--brass); font-weight: 500; } /* -------------------------------------------------------------------------- 5. Header and navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 90; background: var(--surface); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-1); } .header-inner { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--header-h); } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.03em; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .logo:hover { color: var(--text); } .logo .logo-mark { width: 22px; height: 22px; flex-shrink: 0; } .logo .logo-dot { color: var(--brass); } .nav { margin-left: auto; } .nav-list { list-style: none; display: flex; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; } .nav-list > li { margin: 0; position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 5px; padding: var(--sp-2) var(--sp-3); font-size: 0.92rem; font-weight: 500; color: var(--text); text-decoration: none; border-radius: var(--r-md); background: none; border: 0; font-family: inherit; cursor: pointer; white-space: nowrap; } .nav-link:hover { background: var(--blue-soft); color: var(--blue); } .nav-link[aria-expanded="true"] { background: var(--blue-soft); color: var(--blue); } .nav-link .chev { width: 10px; height: 10px; transition: transform 0.18s ease; } .nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); } .nav-panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--sp-2); list-style: none; margin: 0; display: none; } .nav-panel[data-open="true"] { display: block; } .nav-panel li { margin: 0; } .nav-panel a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--text); text-decoration: none; font-size: 0.9rem; } .nav-panel a:hover { background: var(--blue-soft); color: var(--blue); } .nav-panel .panel-all { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-2); } .nav-panel .panel-all a { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); letter-spacing: 0.04em; } .header-actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; } .icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; background: none; border: 1px solid transparent; border-radius: var(--r-md); color: var(--muted); cursor: pointer; padding: 0; } .icon-btn:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--line); } .icon-btn svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } .nav-toggle { display: none; } /* Mobile drawer */ .drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 22, 40, 0.55); z-index: 98; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .drawer-backdrop.is-open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--surface); z-index: 99; transform: translateX(100%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow-y: auto; border-left: 1px solid var(--line); } .drawer.is-open { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop { transition: none; } } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); } .drawer-body { padding: var(--sp-4) var(--sp-5) var(--sp-7); } .acc-item { border-bottom: 1px solid var(--line); } .acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; background: none; border: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; } .acc-trigger .chev { width: 12px; height: 12px; color: var(--muted); transition: transform 0.18s ease; } .acc-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); } .acc-panel { display: none; padding-bottom: var(--sp-4); } .acc-panel[data-open="true"] { display: block; } .acc-panel ul { list-style: none; padding: 0; margin: 0; } .acc-panel a { display: block; padding: var(--sp-2) var(--sp-3); color: var(--muted); text-decoration: none; font-size: 0.94rem; border-radius: var(--r-md); } .acc-panel a:hover { background: var(--blue-soft); color: var(--blue); } .drawer-links { margin-top: var(--sp-5); display: grid; gap: var(--sp-1); } .drawer-links a { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); text-decoration: none; padding: var(--sp-2) 0; } .drawer-links a:hover { color: var(--blue); } @media (max-width: 940px) { .nav { display: none; } .nav-toggle { display: inline-grid; } .header-actions { margin-left: auto; } } @media (min-width: 941px) { .drawer, .drawer-backdrop { display: none; } } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-5); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; line-height: 1; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn svg { width: 17px; height: 17px; flex-shrink: 0; } .btn-primary { background: var(--blue); color: #fff; } .btn-primary:hover { background: var(--blue-dark); color: #fff; } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); } .btn-secondary:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); } .btn-ghost { background: none; color: var(--muted); } .btn-ghost:hover { background: var(--blue-soft); color: var(--blue); } .btn-brass { background: var(--brass); color: var(--ink); } .btn-brass:hover { background: #E09826; color: var(--ink); } .btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: 0.85rem; } .btn-block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* -------------------------------------------------------------------------- 7. Homepage hero -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--ink); color: var(--on-ink); overflow: hidden; padding-block: clamp(var(--sp-7), 9vw, var(--sp-9)); isolation: isolate; } .hero-grid { position: absolute; inset: -60px; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, var(--grid-ink) 0 1px, transparent 1px 40px), repeating-linear-gradient(to bottom, var(--grid-ink) 0 1px, transparent 1px 40px); } .hero-rings { position: absolute; top: 50%; right: -14%; transform: translateY(-50%); width: min(760px, 92vw); aspect-ratio: 1; z-index: 0; pointer-events: none; opacity: 0.5; } .hero-rings svg { width: 100%; height: 100%; overflow: visible; } .hero-rings circle, .hero-rings line { transform-origin: 50% 50%; } .ring-1 { stroke: var(--on-ink); opacity: 0.16; } .ring-2 { stroke: var(--blue); opacity: 0.30; } .ring-3 { stroke: var(--brass); opacity: 0.24; } .ring-ticks { stroke: var(--on-ink); opacity: 0.12; } @media (prefers-reduced-motion: no-preference) { .hero-grid { animation: gridDrift 40s linear infinite; } .ring-1 { animation: spin 90s linear infinite; } .ring-2 { animation: spin 60s linear infinite reverse; } .ring-3 { animation: spin 120s linear infinite; } .ring-ticks { animation: spin 200s linear infinite reverse; } .caret { animation: blink 1.1s steps(1) infinite; } } @keyframes gridDrift { from { transform: translate(0, 0); } to { transform: translate(40px, 40px); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .hero-inner { position: relative; z-index: 1; max-width: 720px; } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); } .hero-eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(to right, var(--brass), transparent); } .hero h1 { color: var(--on-ink); font-size: clamp(2.3rem, 5.6vw, 4rem); line-height: 1.04; margin-bottom: var(--sp-4); } .verb-slot { color: var(--brass); display: inline-block; min-width: 5.5ch; } .caret { color: var(--brass); font-weight: 400; } .hero-sub { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--on-ink-muted); max-width: 52ch; margin-bottom: var(--sp-5); } /* Live tool search — the signature element */ .tool-search { position: relative; max-width: 620px; } .search-field { display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 2px solid transparent; border-radius: var(--r-lg); padding: 0 var(--sp-4); box-shadow: var(--shadow-3); transition: border-color 0.15s ease; } .search-field:focus-within { border-color: var(--blue); } .search-field .search-icon { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; } .search-field input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--font-body); font-size: 1.05rem; color: var(--text); padding: var(--sp-4) 0; min-height: 44px; } .search-field input:focus { outline: none; } .search-field input::placeholder { color: var(--muted); } .search-kbd { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 6px; flex-shrink: 0; } @media (max-width: 560px) { .search-kbd { display: none; } } .search-clear { display: none; } .search-field.has-value .search-clear { display: inline-grid; } .search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); max-height: 400px; overflow-y: auto; z-index: 40; padding: var(--sp-2); display: none; } .search-results.is-open { display: block; } .search-hit { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); text-decoration: none; color: var(--text); } .search-hit:hover, .search-hit.is-active { background: var(--blue-soft); color: var(--text); } .search-hit-name { font-weight: 600; font-size: 0.96rem; display: block; } .search-hit-desc { font-size: 0.84rem; color: var(--muted); display: block; } .search-hit-cat { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); flex-shrink: 0; } .search-hit mark { background: var(--brass-soft); color: inherit; border-radius: 2px; padding: 0 1px; } .search-empty { padding: var(--sp-5); text-align: center; color: var(--muted); font-size: 0.92rem; } .search-empty a { font-weight: 600; } .hero-trust { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--on-ink-muted); margin-top: var(--sp-5); margin-bottom: 0; } .hero-trust span { color: var(--brass); } /* -------------------------------------------------------------------------- 8. Page hero (non-homepage) -------------------------------------------------------------------------- */ .page-hero { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--sp-6) var(--sp-6); } .page-hero h1 { margin-bottom: var(--sp-3); max-width: 20ch; } .page-hero .lede { max-width: 62ch; margin-bottom: 0; } .privacy-note { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--success); background: var(--success-soft); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); } .privacy-note svg { width: 14px; height: 14px; flex-shrink: 0; } /* -------------------------------------------------------------------------- 9. Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumbs { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); padding-block: var(--sp-4) 0; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; } .breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); } .breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--blue); text-decoration: underline; } .breadcrumbs li::after { content: "›"; color: var(--line); } .breadcrumbs li:last-child::after { display: none; } .breadcrumbs [aria-current="page"] { color: var(--text); } /* -------------------------------------------------------------------------- 10. Cards and grids -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--sp-4); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .tool-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); text-decoration: none; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .tool-card:hover { border-color: var(--blue); color: var(--text); box-shadow: var(--shadow-2); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .tool-card:hover { transform: none; } } .tool-card-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--blue-soft); color: var(--blue); margin-bottom: var(--sp-2); } .tool-card-icon svg { width: 20px; height: 20px; } .tool-card h3 { font-size: 1.05rem; margin: 0; letter-spacing: -0.01em; } .tool-card p { font-size: 0.9rem; color: var(--muted); margin: 0; line-height: 1.55; } .tool-card-tag { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); padding-top: var(--sp-3); margin-top: auto; } .cat-block { margin-bottom: var(--sp-7); } .cat-block:last-child { margin-bottom: 0; } .cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .cat-head h3 { margin: 0; font-size: 1.3rem; } .cat-head a { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.05em; text-decoration: none; } .cat-head a:hover { text-decoration: underline; } /* Why strip */ .why-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-5); } .why-item { display: flex; gap: var(--sp-4); align-items: flex-start; } .why-item .why-icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--brass); background: var(--surface); } .why-item .why-icon svg { width: 20px; height: 20px; } .why-item h3 { font-size: 1rem; margin: 0 0 4px; } .why-item p { font-size: 0.9rem; color: var(--muted); margin: 0; } /* Steps */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); } .step { position: relative; padding-top: var(--sp-5); border-top: 2px solid var(--line); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--brass); position: absolute; top: calc(-1 * var(--sp-5)); left: 0; } .step h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); } .step p { color: var(--muted); font-size: 0.94rem; margin: 0; } /* -------------------------------------------------------------------------- 11. The tool panel -------------------------------------------------------------------------- */ .tool-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-5); margin-block: var(--sp-6); } @media (min-width: 720px) { .tool-panel { padding: var(--sp-6); } } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); } .panel-title { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0; } .field { margin-bottom: var(--sp-4); } .field:last-child { margin-bottom: 0; } .field label, .field-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--text); margin-bottom: var(--sp-2); } .field .hint { font-size: 0.82rem; color: var(--muted); margin: var(--sp-2) 0 0; } input[type="text"], input[type="number"], input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], select, textarea { width: 100%; font-family: var(--font-body); font-size: 0.98rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); min-height: 44px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); } textarea { min-height: 190px; resize: vertical; line-height: 1.6; } textarea.mono { font-family: var(--font-mono); font-size: 0.9rem; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%235A6779' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 11px; padding-right: var(--sp-6); } input[type="color"] { width: 100%; height: 46px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; } /* Range */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: none; cursor: pointer; padding: 0; min-height: 0; border: 0; } input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: var(--line); border-radius: var(--r-pill); } input[type="range"]::-moz-range-track { height: 5px; background: var(--line); border-radius: var(--r-pill); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8.5px; background: var(--blue); border: 3px solid var(--surface); border-radius: 50%; box-shadow: var(--shadow-1); } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--blue); border: 3px solid var(--surface); border-radius: 50%; } input[type="range"]:focus-visible { outline-offset: 4px; } .range-row { display: flex; align-items: center; gap: var(--sp-4); } .range-row input[type="range"] { flex: 1; } .range-value { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); min-width: 74px; text-align: center; flex-shrink: 0; } /* Checkbox + radio */ .check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; padding: var(--sp-2) 0; min-height: 40px; font-size: 0.94rem; font-weight: 400; } .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex-shrink: 0; min-height: 0; } .check span { line-height: 1.45; } .check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-1) var(--sp-4); } /* Segmented control */ .segmented { display: inline-flex; flex-wrap: wrap; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; } .segmented button { min-height: 38px; padding: 0 var(--sp-4); border: 0; background: none; border-radius: var(--r-sm); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; } .segmented button:hover { color: var(--text); } .segmented button[aria-selected="true"], .segmented button.is-active { background: var(--surface); color: var(--blue); box-shadow: var(--shadow-1); } /* Chip presets */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .chip { min-height: 36px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.78rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: var(--r-pill); cursor: pointer; } .chip:hover { border-color: var(--blue); color: var(--blue); } .chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; } /* Dropzone */ .dropzone { position: relative; display: grid; place-items: center; gap: var(--sp-2); text-align: center; min-height: 190px; padding: var(--sp-6) var(--sp-4); border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--surface-2); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .dropzone:hover, .dropzone.is-drag { border-color: var(--blue); background: var(--blue-soft); } .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; } .dropzone .dz-icon { width: 34px; height: 34px; color: var(--blue); } .dropzone .dz-main { font-weight: 600; font-size: 1rem; margin: 0; } .dropzone .dz-sub { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); margin: 0; } /* Output blocks */ .output { position: relative; background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: var(--sp-4); font-family: var(--font-mono); font-size: 0.87rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; overflow-x: auto; min-height: 90px; margin: 0; } .output:empty::before { content: "Output appears here."; color: var(--on-ink-muted); } .output-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; } /* Stats */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-3); } .stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; } .stat .stat-value { font-family: var(--font-mono); font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 500; color: var(--text); display: block; line-height: 1.2; word-break: break-word; } .stat .stat-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); display: block; margin-top: var(--sp-2); } .stat-accent .stat-value { color: var(--brass); } .stat-good .stat-value { color: var(--success); } /* Messages */ .msg { display: flex; align-items: flex-start; gap: var(--sp-3); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: 0.92rem; margin-top: var(--sp-4); border: 1px solid; } .msg svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; } .msg p { margin: 0; } .msg-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .msg-ok { background: var(--success-soft); border-color: var(--success); color: var(--success); } .msg-info { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); } .msg[hidden] { display: none; } /* Results region — reserved height so nothing jumps */ .result-region { min-height: 120px; margin-top: var(--sp-5); } .result-region[data-empty="true"] { display: grid; place-items: center; } .result-placeholder { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-4); width: 100%; } /* Preview */ .preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); } .preview-box { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .preview-box .preview-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); padding: var(--sp-3); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--sp-2); } .preview-box .preview-img { display: grid; place-items: center; min-height: 200px; padding: var(--sp-3); background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0px; } .preview-box img { max-height: 280px; width: auto; object-fit: contain; } /* Copy button feedback */ .copy-btn.is-copied { background: var(--success); border-color: var(--success); color: #fff; } .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; } @media (prefers-reduced-motion: no-preference) { .spinner { animation: spin 0.7s linear infinite; } } /* File list (batch tools) */ .file-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-2); } .file-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); margin: 0; flex-wrap: wrap; } .file-row .file-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); flex-shrink: 0; background: var(--surface); } .file-row .file-meta { min-width: 0; flex: 1; } .file-row .file-name { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-row .file-size { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); } .file-row .file-size .down { color: var(--success); } /* -------------------------------------------------------------------------- 12. Prose (the SEO content below every tool) -------------------------------------------------------------------------- */ .prose { max-width: 72ch; } .prose h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-4); } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-3); } .prose p, .prose li { color: var(--text); } .prose ol li, .prose ul li { margin-bottom: var(--sp-3); } .prose strong { font-weight: 600; } .prose table { margin-bottom: var(--sp-5); } .faq-item { border-bottom: 1px solid var(--line); } .faq-item:first-of-type { border-top: 1px solid var(--line); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); text-align: left; background: none; border: 0; padding: var(--sp-4) 0; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--text); cursor: pointer; min-height: 44px; } .faq-q .chev { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; transition: transform 0.18s ease; } .faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); } .faq-a { padding: 0 0 var(--sp-4); color: var(--muted); } .faq-a p:last-child { margin-bottom: 0; } /* Answers stay in the DOM and visible without JS; JS adds the collapse. */ .js .faq-a[data-open="false"] { display: none; } /* -------------------------------------------------------------------------- 13. Ad slots — height reserved to keep CLS at zero -------------------------------------------------------------------------- */ .ad-slot { min-height: 280px; margin-block: var(--sp-6); display: grid; place-items: center; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .ad-slot::before { content: "Advertisement"; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); opacity: 0.55; } .ad-slot:has(ins) { border: 0; background: none; } .ad-slot:has(ins)::before { display: none; } /* -------------------------------------------------------------------------- 14. Related tools -------------------------------------------------------------------------- */ .related { border-top: 1px solid var(--line); padding-top: var(--sp-6); margin-top: var(--sp-7); } .related h2 { font-size: 1.25rem; margin-bottom: var(--sp-4); } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); } .related-link { display: block; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: var(--text); } .related-link:hover { border-color: var(--blue); color: var(--blue); } .related-link strong { display: block; font-size: 0.95rem; margin-bottom: 3px; } .related-link span { font-size: 0.82rem; color: var(--muted); display: block; line-height: 1.45; } .related-link:hover span { color: var(--muted); } /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--ink-2); color: var(--on-ink-muted); padding-block: var(--sp-7) var(--sp-5); margin-top: var(--sp-8); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-col h2, .footer-col h3 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--on-ink-muted); font-weight: 500; margin-bottom: var(--sp-4); } .footer-brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--on-ink); text-decoration: none; display: inline-block; margin-bottom: var(--sp-3); letter-spacing: -0.03em; } .footer-brand:hover { color: var(--on-ink); } .footer-brand .logo-dot { color: var(--brass); } .footer-col p { font-size: 0.9rem; line-height: 1.6; max-width: 34ch; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: var(--sp-2); } .footer-col a { color: var(--on-ink-muted); text-decoration: none; font-size: 0.9rem; } .footer-col a:hover { color: var(--brass); text-decoration: underline; } .footer-theme { display: inline-flex; align-items: center; gap: var(--sp-2); background: none; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--on-ink-muted); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4); font-family: var(--font-mono); font-size: 0.74rem; cursor: pointer; min-height: 40px; margin-top: var(--sp-3); } .footer-theme:hover { border-color: var(--brass); color: var(--brass); } .footer-theme svg { width: 14px; height: 14px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.09); margin-top: var(--sp-6); padding-top: var(--sp-4); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; } .footer-bottom a { color: var(--on-ink-muted); text-decoration: none; } .footer-bottom a:hover { color: var(--brass); } /* -------------------------------------------------------------------------- 16. 404 -------------------------------------------------------------------------- */ .error-page { text-align: center; padding-block: var(--sp-9); } .error-code { font-family: var(--font-mono); font-size: clamp(3.5rem, 12vw, 6rem); color: var(--brass); line-height: 1; margin-bottom: var(--sp-4); letter-spacing: 0.05em; } .error-page .tool-search { margin-inline: auto; } /* -------------------------------------------------------------------------- 17. Utilities -------------------------------------------------------------------------- */ .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; } .mono { font-family: var(--font-mono); } .muted { color: var(--muted); } .text-center { text-align: center; } .mb-0 { margin-bottom: 0; } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .flex-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 18. Per-tool components -------------------------------------------------------------------------- */ /* Page head shared by tool and hub pages */ .page-head { padding-block: var(--sp-5) 0; max-width: 62ch; } .page-head h1 { margin-bottom: var(--sp-3); } .page-head .lede { margin-bottom: 0; } /* Text diff */ .diff-view { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-family: var(--font-mono); font-size: 0.85rem; max-height: 520px; overflow-y: auto; background: var(--surface-2); } .diff-row { display: flex; gap: var(--sp-3); padding: 2px var(--sp-3); align-items: flex-start; } .diff-gutter { flex-shrink: 0; width: 1ch; opacity: 0.7; user-select: none; } .diff-text { white-space: pre-wrap; word-break: break-word; flex: 1; } .diff-add { background: var(--success-soft); color: var(--success); } .diff-del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; text-decoration-thickness: 1px; } .diff-same { color: var(--muted); } /* JSON tree */ .jf-tree { font-family: var(--font-mono); font-size: 0.85rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); overflow-x: auto; } .jf-row { padding: 1px 0; white-space: nowrap; } .jf-branch > summary { cursor: pointer; padding: 2px 0; white-space: nowrap; } .jf-key { color: var(--blue); margin-right: var(--sp-2); } .jf-type { color: var(--muted); font-size: 0.8rem; } .jf-str { color: var(--success); } .jf-num { color: var(--brass); } .jf-bool, .jf-null { color: var(--danger); } /* Regex */ .regex-field { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--sp-3); } .regex-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); } .regex-field input { border: 0; background: none; box-shadow: none; padding: var(--sp-3) 0; } .regex-field input:focus { box-shadow: none; } .regex-field #rx-flags { width: 6ch; flex-shrink: 0; text-align: center; } .regex-slash { color: var(--muted); font-family: var(--font-mono); font-size: 1.05rem; flex-shrink: 0; } .rx-highlight { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); font-size: 0.87rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; min-height: 110px; max-height: 420px; overflow-y: auto; } .rx-highlight mark { background: var(--brass); color: var(--ink); border-radius: 2px; padding: 1px 0; } /* Gradient */ .gradient-preview { height: 220px; border-radius: var(--r-lg); border: 1px solid var(--line); background-image: linear-gradient(135deg, #2F6BFF 0%, #F2A93B 100%); } .stop-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; } .stop-row input[type="color"] { width: 52px; flex-shrink: 0; height: 40px; } .stop-row input[type="range"] { flex: 1; } .stop-row .range-value { min-width: 58px; font-size: 0.8rem; padding: var(--sp-1) var(--sp-2); } /* Box shadow */ .shadow-stage { display: grid; place-items: center; min-height: 260px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); padding: var(--sp-6); } .shadow-target { width: 200px; height: 120px; background: var(--surface); border-radius: var(--r-lg); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } .bs-layer { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3); background: var(--surface-2); } .bs-layer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3) var(--sp-4); } .bs-field label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-bottom: 4px; } .bs-field .range-value { min-width: 56px; font-size: 0.78rem; padding: var(--sp-1) var(--sp-2); } /* Colour */ .color-hero { min-height: 140px; border-radius: var(--r-lg); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.3rem; letter-spacing: 0.06em; background: #2F6BFF; color: #fff; } .swatch-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .swatch { flex: 1 1 84px; min-height: 62px; border: 1px solid var(--line); border-radius: var(--r-md); font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; display: grid; place-items: end center; padding-bottom: var(--sp-2); } .swatch:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .swatch:hover { transform: none; } } .wcag-grid { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); } .wcag-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--line); font-size: 0.9rem; } .wcag-row strong { margin-left: auto; } .wcag-row.is-pass { background: var(--success-soft); border-color: var(--success); color: var(--success); } .wcag-row.is-fail { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .pick-stage { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: var(--sp-3); overflow: auto; } .pick-stage canvas { cursor: crosshair; max-width: 100%; height: auto; margin-inline: auto; } /* Cropper */ .crop-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); } .crop-stage img { max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; } .crop-box { position: absolute; border: 2px solid var(--brass); box-shadow: 0 0 0 9999px rgba(10, 22, 40, 0.5); cursor: move; touch-action: none; } .crop-handle { position: absolute; width: 22px; height: 22px; background: var(--brass); border: 2px solid var(--ink); border-radius: 50%; touch-action: none; } .crop-handle[data-h="nw"] { top: -11px; left: -11px; cursor: nwse-resize; } .crop-handle[data-h="ne"] { top: -11px; right: -11px; cursor: nesw-resize; } .crop-handle[data-h="sw"] { bottom: -11px; left: -11px; cursor: nesw-resize; } .crop-handle[data-h="se"] { bottom: -11px; right: -11px; cursor: nwse-resize; } /* Favicon grid */ .favicon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); } .favicon-cell { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: var(--sp-4); display: grid; justify-items: center; gap: var(--sp-3); } .favicon-swatch { min-height: 100px; display: grid; place-items: center; background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%); background-size: 12px 12px; background-position: 0 0, 0 6px, 6px -6px, -6px 0; border-radius: var(--r-sm); width: 100%; } .favicon-swatch img { image-rendering: pixelated; } .favicon-meta { text-align: center; font-size: 0.85rem; } .favicon-meta strong { display: block; font-family: var(--font-mono); } .favicon-meta span { color: var(--muted); font-size: 0.78rem; } /* SERP + social previews */ .serp { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--sp-4); max-width: 600px; } .serp-url { font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; word-break: break-all; } .serp-title { font-size: 1.15rem; color: #1a0dab; line-height: 1.3; margin-bottom: 4px; } :root[data-theme="dark"] .serp-title { color: #8ab4f8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .serp-title { color: #8ab4f8; } } .serp-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.5; } .ogcard { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-width: 520px; background: var(--surface); } .ogcard-img { aspect-ratio: 1.91 / 1; background: var(--surface-2); background-size: cover; background-position: center; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); border-bottom: 1px solid var(--line); } .ogcard-body { padding: var(--sp-3) var(--sp-4); } .ogcard-site { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted); } .ogcard-title { font-weight: 600; font-size: 0.98rem; line-height: 1.35; margin: 3px 0; } .ogcard-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.45; } /* Keyword density bar */ .kd-bar { display: block; height: 8px; background: var(--blue); border-radius: var(--r-pill); min-width: 3px; } /* YouTube thumbnails */ .yt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); } .yt-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .yt-item img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--line); } .yt-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: var(--sp-3); font-size: 0.9rem; } .yt-meta .mono { font-size: 0.76rem; color: var(--muted); } .yt-item .btn-row { padding: 0 var(--sp-3) var(--sp-3); } /* EMI split bar */ .split-bar { display: flex; height: 26px; border-radius: var(--r-pill); overflow: hidden; border: 1px solid var(--line); } .split-principal { background: var(--blue); } .split-interest { background: var(--brass); } .split-legend { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-3); font-size: 0.88rem; color: var(--muted); } .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .dot-principal { background: var(--blue); } .dot-interest { background: var(--brass); } /* Age headline */ .age-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); background: var(--ink); color: var(--on-ink); border-radius: var(--r-lg); padding: var(--sp-5); margin-top: var(--sp-5); } .age-num { font-family: var(--font-mono); font-size: clamp(1.8rem, 6vw, 2.8rem); color: var(--brass); line-height: 1; } .age-unit { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-muted); margin-right: var(--sp-3); } /* Password */ .password-display { display: block; width: 100%; background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); font-size: clamp(1rem, 3.2vw, 1.45rem); letter-spacing: 0.04em; word-break: break-all; min-height: 76px; text-align: center; } .strength-bar { height: 8px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; } .strength-bar span { display: block; height: 100%; width: 0; border-radius: var(--r-pill); transition: width 0.2s ease; } @media (prefers-reduced-motion: reduce) { .strength-bar span { transition: none; } } .strength-bar span.is-weak { background: var(--danger); } .strength-bar span.is-fair { background: var(--brass); } .strength-bar span.is-strong { background: var(--blue); } .strength-bar span.is-best { background: var(--success); } .strength-label { display: flex; gap: var(--sp-3); align-items: baseline; margin-top: var(--sp-2); font-size: 0.9rem; flex-wrap: wrap; } /* QR output */ .qr-output { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-4); } .qr-output img { border: 1px solid var(--line); border-radius: var(--r-md); image-rendering: pixelated; } /* Contact + legal page bits */ .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); } .info-card h3 { font-size: 1.05rem; margin-bottom: var(--sp-3); } .info-card p:last-child { margin-bottom: 0; } .legal-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); border-left: 2px solid var(--brass); padding-left: var(--sp-4); margin-bottom: var(--sp-6); } /* -------------------------------------------------------------------------- 16. Premium PDF tools — card badges, banner, paywall, thumbnails, results -------------------------------------------------------------------------- */ /* Premium tool cards */ .tool-card-premium { border-color: rgba(242, 169, 59, 0.55); } .tool-card-premium:hover { border-color: var(--brass); box-shadow: 0 6px 18px rgba(242, 169, 59, 0.18); } .tool-card-premium .tool-card-icon { background: var(--brass-soft); color: #B5771A; } .tool-card-tag.tag-premium { color: #B5771A; border-top-color: var(--brass-soft); display: inline-flex; align-items: center; gap: 6px; } .tool-card-tag.tag-premium svg { width: 12px; height: 12px; } :root:not([data-theme=light]) .tool-card-premium .tool-card-icon, :root[data-theme=dark] .tool-card-premium .tool-card-icon { color: var(--brass); } :root:not([data-theme=light]) .tool-card-tag.tag-premium, :root[data-theme=dark] .tool-card-tag.tag-premium { color: var(--brass); } /* Premium promo banner (homepage + hub) */ .premium-banner { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink-2); border-radius: var(--r-lg); padding: var(--sp-6); } .premium-banner::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: radial-gradient(circle, var(--brass-soft), transparent 70%); pointer-events: none; } .premium-banner-copy { position: relative; z-index: 1; max-width: 62ch; } .premium-banner .eyebrow { color: var(--brass); } .premium-banner h2 { color: #fff; margin: 0.35rem 0 0.6rem; } .premium-banner p { color: var(--on-ink-muted); margin: 0; } .premium-banner strong { color: #fff; } .premium-banner .btn-row { margin-top: var(--sp-5); align-items: center; } .premium-banner-hub { margin: var(--sp-5) 0; } .premium-price-note { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--on-ink-muted); } .premium-price-note svg { width: 13px; height: 13px; color: var(--brass); } .premium-price-note a { color: var(--on-ink); text-decoration: underline; } /* Locked mount: hide the working panel until membership is confirmed */ .premium-mount { position: relative; } .premium-mount.is-locked .premium-tool-body { display: none; } .premium-mount:not(.is-locked) .paywall { display: none; } .paywall.is-hidden { display: none !important; } /* Paywall card */ .paywall { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--sp-6); text-align: center; display: grid; justify-items: center; gap: var(--sp-3); } .paywall::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brass), #E09826); } .paywall .pw-lock { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--brass-soft); color: #B5771A; margin-bottom: var(--sp-1); } .paywall .pw-lock svg { width: 24px; height: 24px; } .paywall h3 { margin: 0; font-size: 1.35rem; } .paywall .pw-sub { color: var(--muted); margin: 0; max-width: 46ch; } .paywall .pw-price { display: flex; align-items: baseline; gap: 0.4rem; margin: var(--sp-2) 0; } .paywall .pw-price .amt { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; } .paywall .pw-price .per { color: var(--muted); font-size: 0.92rem; } .paywall .pw-perks { list-style: none; padding: 0; margin: var(--sp-2) 0 var(--sp-3); display: grid; gap: var(--sp-2); text-align: left; font-size: 0.9rem; } .paywall .pw-perks li { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text); } .paywall .pw-perks svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 3px; } .paywall .pw-actions { display: grid; gap: var(--sp-2); width: 100%; max-width: 340px; } .paywall .pw-actions .btn { width: 100%; } .paywall .pw-secure { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-top: var(--sp-1); } .paywall .pw-secure svg { width: 13px; height: 13px; } .paywall .pw-link { background: none; border: 0; color: var(--blue); cursor: pointer; font-size: 0.86rem; text-decoration: underline; padding: 4px; } /* Small modal for key redeem / status */ .pw-modal { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: var(--sp-4); } .pw-modal.is-open { display: grid; } .pw-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 40, 0.55); backdrop-filter: blur(2px); } .pw-modal-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--sp-6); width: 100%; max-width: 420px; display: grid; gap: var(--sp-3); } .pw-modal-card h3 { margin: 0; } .pw-modal-card p { margin: 0; color: var(--muted); font-size: 0.92rem; } .pw-modal-close { position: absolute; top: 10px; right: 10px; } .pw-key { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.06em; text-align: center; background: var(--surface-2); border: 1px dashed var(--brass); border-radius: var(--r-md); padding: var(--sp-3); user-select: all; } /* Page thumbnails (delete / organize) */ .thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); } .pdf-thumb { position: relative; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); padding: 6px; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } .pdf-thumb canvas, .pdf-thumb img { width: 100%; height: auto; display: block; border-radius: 2px; } .pdf-thumb .pt-num { display: block; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-top: 4px; } .pdf-thumb.is-selected { border-color: var(--danger); } .pdf-thumb.is-selected::after { content: "\00d7"; position: absolute; inset: 6px 6px auto auto; width: 22px; height: 22px; display: grid; place-items: center; background: var(--danger); color: #fff; border-radius: var(--r-pill); font-size: 15px; line-height: 1; } .pdf-thumb.is-dragging { opacity: 0.4; } .pdf-thumb.drop-target { border-color: var(--blue); } .pdf-thumb .pt-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: var(--r-pill); background: rgba(10,22,40,0.65); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 14px; line-height: 1; } /* Result / download blocks for PDF tools */ .result-done { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; border: 1px solid var(--success); background: var(--success-soft); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-4); width: 100%; } .result-done .rd-icon { width: 40px; height: 40px; color: var(--success); } .result-done h3 { margin: 0; font-size: 1.1rem; } .result-done .rd-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin: 0; } .result-files { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: var(--sp-2); } .busy { display: inline-flex; align-items: center; gap: 0.5rem; }