/* ================================================================== AMTake Tools — Design System v0.1 Light/dark via [data-theme] on . Category colors via --c1/--c2. ================================================================== */ :root { /* Brand */ --c1: #7c3aed; --c2: #2e6bf0; --grad: linear-gradient(135deg, var(--c1), var(--c2)); /* Light surfaces */ --bg: #f7f9fc; --surface: #ffffff; --text: #0f172a; --muted: #5b6b81; --border: #e6eaf1; --radius: 16px; --shadow-sm: 0 2px 10px rgba(15, 23, 42, .06); --shadow-md: 0 8px 30px rgba(15, 23, 42, .09); --glow: 0 0 0 1px color-mix(in srgb, var(--c2) 35%, transparent), 0 8px 36px color-mix(in srgb, var(--c1) 28%, transparent); --header-h: 64px; color-scheme: light; } /* html[data-theme] outranks any plugin's :root re-declaration */ html[data-theme="dark"] { --bg: #0b1220; --surface: #131c2e; --text: #e6edf7; --muted: #94a3b8; --border: #24304a; --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --shadow-md: 0 8px 30px rgba(0, 0, 0, .45); --glow: 0 0 0 1px color-mix(in srgb, var(--c2) 55%, transparent), 0 8px 46px color-mix(in srgb, var(--c1) 40%, transparent); color-scheme: dark; } /* ---------------- Base ---------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; /* !important shields the page from embedded tool stylesheets that target body/html — the site must follow the light/dark toggle. */ background: var(--bg) !important; color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Embedded standalone tools: common professional frame. Every tool sits in the same theme-aware card — consistent look across all 120+ tools; the tool's own UI renders inside. */ .amtake-tool-standalone { display: block; color: initial; text-align: initial; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: clamp(14px, 3vw, 28px); overflow: hidden; transition: box-shadow .3s ease, border-color .3s ease; } .amtake-tool-standalone:hover { border-color: color-mix(in srgb, var(--c2) 30%, var(--border)); } /* In dark mode most tools keep their own light UI — give them a soft light well inside the dark frame so they read as a deliberate panel. */ [data-theme="dark"] .amtake-tool-standalone { background: #eef1f7; border-color: #2c3a58; } /* Customizer logo image in the header tile */ .logo-tile .logo-img { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; display: block; } img, svg { max-width: 100%; height: auto; } a { color: var(--c2); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 880px; } /* essential/content pages */ .container-tool { max-width: 1140px; } /* tool pages: normal width */ /* Tool page hero: H1 + short description above the tool */ .tool-hero { text-align: center; margin: 26px auto 30px; max-width: 860px; } .tool-hero-title { font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -.8px; line-height: 1.15; margin: 0 0 12px; color: var(--text); } .tool-hero-desc { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0; } /* Rebuilt tool-page content sections (used by migrated content): the page is full width; the interactive tool and reading copy center themselves at comfortable widths. */ .tool-embed { max-width: 920px; margin: 0 auto; } .tool-copy { max-width: 860px; margin: 36px auto 0; } .tool-intro { max-width: 860px; margin: 10px auto 24px; color: var(--muted); font-size: 16.5px; line-height: 1.7; text-align: center; } .tool-copy h2 { font-size: 22px; letter-spacing: -.3px; margin: 34px 0 14px; } .tool-copy h3 { font-size: 16.5px; margin: 20px 0 6px; } .tool-copy p, .tool-copy li { color: var(--text); line-height: 1.7; } .tool-copy h3 + p { color: var(--muted); } .tool-steps { list-style: none; margin: 0; padding: 0; counter-reset: tstep; } .tool-steps li { position: relative; padding: 8px 0 8px 44px; counter-increment: tstep; } .tool-steps li::before { content: counter(tstep); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 13px; font-weight: 600; border-radius: 50%; box-shadow: 0 3px 10px color-mix(in srgb, var(--c1) 35%, transparent); } .tool-features { list-style: none; margin: 0; padding: 0; } .tool-features li { position: relative; padding: 7px 0 7px 28px; } .tool-features li::before { content: "✓"; position: absolute; left: 2px; top: 7px; color: var(--c1); font-weight: 700; } .tool-coming-soon { text-align: center; padding: 48px 24px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); } .tool-coming-soon h2 { margin: 0 0 10px; } .tool-coming-soon p { color: var(--muted); max-width: 480px; margin: 0 auto; } .category-index { margin-top: 10px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--text); padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); } /* Logo + glow hover */ .site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; } .logo-tile { display: inline-flex; border-radius: 11px; transition: box-shadow .3s ease, transform .3s ease; } .site-logo:hover .logo-tile { box-shadow: 0 0 18px color-mix(in srgb, #7c3aed 65%, transparent), 0 0 36px color-mix(in srgb, #2e6bf0 45%, transparent); transform: translateY(-1px) scale(1.03); } .logo-text { font-size: 21px; font-weight: 600; letter-spacing: -.4px; } .logo-am { color: var(--text); } /* dark slate in light, white in dark */ .logo-tools { background: linear-gradient(135deg, #7c3aed, #2e6bf0); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="dark"] .logo-tools { background: linear-gradient(135deg, #9b6bff, #5b8dff); -webkit-background-clip: text; background-clip: text; } /* Nav */ .site-nav { margin-left: auto; } .nav-menu, .nav-menu ul { list-style: none; margin: 0; padding: 0; } .nav-menu { display: flex; gap: 4px; } .nav-menu a { display: block; padding: 8px 14px; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 15px; transition: background .2s ease, color .2s ease; text-decoration: none !important; white-space: nowrap; } .nav-menu a:hover { background: color-mix(in srgb, var(--c2) 10%, transparent); color: var(--c2); } /* Dropdowns (submenus) — hover/focus on desktop */ .nav-menu li { position: relative; } .nav-menu .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: 7px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; } .nav-menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .nav-menu .sub-menu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; } /* nested (3rd level) flies out to the side */ .nav-menu .sub-menu .sub-menu { top: 0; left: 100%; } .header-actions { display: flex; align-items: center; gap: 8px; } .theme-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: box-shadow .25s ease, border-color .25s ease; } .theme-toggle:hover, .nav-toggle:hover { box-shadow: var(--glow); border-color: var(--c2); } /* Dark mode: force header text bright — nothing may dim the chrome. */ [data-theme="dark"] .nav-menu a { color: #eef2fa; } [data-theme="dark"] .nav-menu a:hover { color: #8ab0ff; background: rgba(124, 58, 237, .14); } [data-theme="dark"] .logo-am { color: #ffffff; } [data-theme="dark"] .theme-toggle, [data-theme="dark"] .nav-toggle { color: #eef2fa; } [data-theme="dark"] .breadcrumbs, [data-theme="dark"] .breadcrumbs a { color: #9fb0c8; } [data-theme="dark"] .breadcrumbs [aria-current] { color: #eef2fa; } [data-theme="light"] .icon-moon, :root:not([data-theme="dark"]) .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: block; } .nav-toggle { display: none; flex-direction: column; gap: 4px; } .nav-toggle span { width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } /* ---------------- Hero ---------------- */ .hero { position: relative; padding: 72px 0 40px; text-align: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(560px 320px at 18% 8%, color-mix(in srgb, #7c3aed 16%, transparent), transparent 70%), radial-gradient(560px 320px at 82% 12%, color-mix(in srgb, #2e6bf0 16%, transparent), transparent 70%); } [data-theme="dark"] .hero-bg { background: radial-gradient(560px 320px at 18% 8%, color-mix(in srgb, #7c3aed 26%, transparent), transparent 70%), radial-gradient(560px 320px at 82% 12%, color-mix(in srgb, #2e6bf0 26%, transparent), transparent 70%); } .hero-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--text); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-sm); } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px color-mix(in srgb, #7c3aed 70%, transparent); } .hero-title { font-size: clamp(32px, 5.4vw, 54px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -1.2px; } .hero-sub { color: var(--muted); font-size: clamp(15px, 2vw, 18px); max-width: 640px; margin: 0 auto 28px; } .search-kbd { flex: none; font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; background: var(--bg); } .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin: 26px auto 30px; } .hero-stats .stat { display: flex; flex-direction: column; min-width: 90px; } .hero-stats strong { font-size: 22px; letter-spacing: -.5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-stats span { font-size: 12.5px; color: var(--muted); } .hero-search { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 auto 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 4px 16px; box-shadow: var(--shadow-sm); transition: box-shadow .25s ease, border-color .25s ease; } .hero-search:focus-within { box-shadow: var(--glow); border-color: var(--c2); } .hero-search svg { color: var(--muted); flex: none; } .hero-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; padding: 12px 0; } /* Category chips */ .category-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all .22s ease; } .chip:hover { border-color: var(--c2); color: var(--c2); box-shadow: 0 4px 16px color-mix(in srgb, var(--c1) 20%, transparent); } .chip.is-active { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--c1) 35%, transparent); } /* ---------------- Tool sections, grid & cards ---------------- */ .tools-area { padding: 8px 0 72px; } .tool-section { margin-top: 42px; } .tool-section.is-hidden { display: none; } .section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .section-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 10px color-mix(in srgb, var(--c1) 55%, transparent); } .section-title { font-size: 21px; letter-spacing: -.4px; margin: 0; } .section-count { color: var(--muted); font-size: 13px; margin-top: 2px; } .section-all { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--c2); text-decoration: none !important; transition: transform .2s ease; } .section-all:hover { transform: translateX(3px); } .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .tool-cell.is-hidden { display: none; } .tool-card { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-decoration: none !important; color: var(--text); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease; } /* soft category wash in the corner */ .tool-card::before { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 14%, transparent), transparent 70%); opacity: 0; transition: opacity .28s ease; } .tool-card:hover { box-shadow: var(--glow); border-color: color-mix(in srgb, var(--c2) 45%, var(--border)); transform: translateY(-4px); } .tool-card:hover::before { opacity: 1; } .tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; } .tool-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: color-mix(in srgb, var(--c1) 11%, transparent); color: var(--c1); transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease; } .tool-card:hover .tool-card-icon { background: var(--grad); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--c1) 45%, transparent); transform: scale(1.06); } .tool-card-title { font-weight: 600; font-size: 15px; line-height: 1.35; } .tool-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .tool-card-arrow { color: var(--muted); opacity: 0; transform: translateX(-6px); transition: all .28s ease; } .tool-card:hover .tool-card-arrow { opacity: 1; transform: none; color: var(--c2); } .no-results, .no-tools-msg { text-align: center; color: var(--muted); padding: 40px 0; } .chip-count { font-size: 11px; opacity: .65; margin-left: 4px; } /* ---------------- Content pages ---------------- */ .page-title { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.5px; margin: 26px 0 18px; } .content-page .entry-content, .term-desc { color: var(--text); } .content-page { padding-bottom: 64px; } .tool-page { padding-bottom: 64px; } .breadcrumbs { font-size: 13px; color: var(--muted); padding: 18px 0 0; } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--c2); } .breadcrumbs .sep { margin: 0 7px; opacity: .5; } .breadcrumbs [aria-current] { color: var(--text); font-weight: 500; } /* ---------------- Footer ---------------- */ .site-footer { position: relative; border-top: 1px solid var(--border); background: var(--surface); margin-top: 48px; overflow: hidden; } .footer-glow { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #7c3aed, #2e6bf0, transparent); opacity: .7; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding: 48px 20px 24px; } .footer-brand p { color: var(--muted); font-size: 14px; max-width: 320px; margin: 14px 0 18px; line-height: 1.65; } .footer-social { display: flex; gap: 8px; } .footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); transition: all .22s ease; } .footer-social a:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7c3aed, #2e6bf0); box-shadow: 0 4px 16px color-mix(in srgb, #7c3aed 40%, transparent); transform: translateY(-2px); } .footer-col h3 { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin: 6px 0 14px; color: var(--text); } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .footer-col a { color: var(--muted); font-size: 14px; text-decoration: none !important; transition: color .2s ease, padding-left .2s ease; } .footer-col a:hover { color: var(--c2); padding-left: 3px; } .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; border-top: 1px solid var(--border); padding: 16px 20px 26px; } .footer-legal p { color: var(--muted); font-size: 13px; margin: 0; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } } /* ---------------- Mobile ---------------- */ @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px 18px; transform: translateY(-120%); transition: transform .3s ease; box-shadow: var(--shadow-md); } .site-nav.is-open { transform: none; } .nav-menu { flex-direction: column; gap: 2px; } /* Mobile: submenus render inline, indented — no floating dropdowns */ .nav-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 16px; min-width: 0; } .nav-menu .menu-item-has-children > a::after { display: none; } .hero { padding: 40px 0 28px; } .tools-grid { grid-template-columns: 1fr 1fr; gap: 10px; } } @media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } .logo-text { font-size: 18px; } } /* Respect reduced-motion users */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }