/* amtake-words.css — shared runtime styles for the Word Tools family (Word Unscrambler, Anagram Solver, Jumble Solver, Word Generator, Word Combiner). Modern SaaS look: soft cards, gradient accents, full-width coloured length bands. */ .wk { --wk-blue:#2563EB; --wk-indigo:#4F46E5; --wk-green:#16a34a; --wk-orange:#f59e0b; --wk-ink:#0f172a; --wk-mut:#64748b; --wk-line:#e7ebf3; --wk-soft:#f4f6fb; --wk-card:#fff; /* Word tools always render on a light panel (light + dark site modes), so pin the native control scheme to light — otherwise dark color-scheme paints button/input text white, making word chips invisible on their white background. */ color-scheme: light; max-width:920px; margin:0 auto; color:var(--wk-ink); } /* The definition modal is appended to , OUTSIDE .wk, so the palette custom properties defined on .wk don't reach it. Redeclare them here (and pin the scheme to light) — otherwise var(--wk-ink) is undefined and the definition text inherits the site's colour, turning white-on-white/invisible in dark mode. */ .wk-modal { color-scheme: light; --wk-blue:#2563EB; --wk-indigo:#4F46E5; --wk-green:#16a34a; --wk-orange:#f59e0b; --wk-ink:#0f172a; --wk-mut:#64748b; --wk-line:#e7ebf3; --wk-soft:#f4f6fb; --wk-card:#fff; } .wk *{ box-sizing:border-box; } /* ---- per-tool heading (small, left-aligned, styled) ---- */ .wk-head{ display:flex; align-items:center; gap:12px; margin:0 0 18px; } .wk-head-ic{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:21px; flex:none; background:linear-gradient(145deg,var(--wk-blue),var(--wk-indigo)); color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.30); } .wk-head-txt{ display:flex; flex-direction:column; line-height:1.2; } .wk-head-txt b{ font-size:17px; font-weight:800; letter-spacing:-.2px; color:var(--wk-ink); } .wk-head-txt small{ font-size:12.5px; color:var(--wk-mut); font-weight:600; margin-top:3px; } /* ---- input card ---- */ .wk-box{ background:var(--wk-card); border:1px solid var(--wk-line); border-radius:20px; padding:22px; box-shadow:0 10px 34px rgba(15,23,42,.06); } .wk-inrow{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; } .wk-inwrap{ position:relative; flex:1; min-width:230px; } .wk-input{ width:100%; height:58px; border:2px solid var(--wk-line); border-radius:14px; padding:0 74px 0 18px; font-size:19px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--wk-ink); background:var(--wk-soft); } .wk-input:focus{ outline:none; border-color:var(--wk-blue); background:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.15); } .wk-count{ position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:13px; color:var(--wk-mut); font-weight:700; } .wk-run{ height:58px; padding:0 30px; border:0; border-radius:14px; background:linear-gradient(135deg,var(--wk-blue),var(--wk-indigo)); color:#fff; font-size:16px; font-weight:700; cursor:pointer; white-space:nowrap; transition:transform .15s, box-shadow .15s; box-shadow:0 8px 20px rgba(37,99,235,.28); } .wk-run:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(37,99,235,.36); } .wk-run:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; } .wk-mini{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; align-items:center; } .wk-chip{ border:1px solid var(--wk-line); background:#fff; color:var(--wk-mut); border-radius:10px; padding:9px 15px; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; } .wk-chip:hover{ border-color:var(--wk-blue); color:var(--wk-blue); } .wk-hint{ color:var(--wk-mut); font-size:13.5px; margin:8px 2px 0; line-height:1.5; } .wk-ta{ width:100%; min-height:120px; border:2px solid var(--wk-line); border-radius:14px; padding:14px 16px; font-size:15px; line-height:1.6; resize:vertical; background:var(--wk-soft); color:var(--wk-ink); font-family:inherit; } .wk-ta:focus{ outline:none; border-color:var(--wk-blue); background:#fff; } /* ---- advanced filters ---- */ .wk-adv-toggle{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; color:var(--wk-blue); font-weight:700; font-size:13px; cursor:pointer; background:none; border:0; } .wk-adv{ display:none; margin-top:16px; padding-top:16px; border-top:1px dashed var(--wk-line); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:15px; } .wk-adv.open{ display:grid; } .wk-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--wk-mut); margin-bottom:7px; } .wk-field input, .wk-field select{ width:100%; height:44px; border:1px solid var(--wk-line); border-radius:11px; padding:0 13px; font-size:14px; background:#fff; color:var(--wk-ink); text-transform:uppercase; } .wk-field input[type=range]{ padding:0; height:auto; accent-color:var(--wk-blue); } .wk-field .rngval{ color:var(--wk-blue); font-weight:800; } /* ---- example chips ---- */ .wk-examples{ text-align:center; margin:20px 0 4px; } .wk-examples .lbl{ font-size:13px; color:var(--wk-mut); margin-bottom:9px; } .wk-ex{ display:inline-flex; flex-wrap:wrap; gap:8px; justify-content:center; } .wk-ex button{ border:1px solid var(--wk-line); background:#fff; color:var(--wk-blue); border-radius:9px; padding:7px 15px; font-size:12.5px; font-weight:700; letter-spacing:.6px; cursor:pointer; transition:all .15s; } .wk-ex button:hover{ background:var(--wk-blue); color:#fff; border-color:var(--wk-blue); transform:translateY(-1px); } /* ---- stats ---- */ .wk-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:11px; margin:22px 0 6px; } .wk-stat{ background:linear-gradient(160deg,var(--wk-soft),#fff); border:1px solid var(--wk-line); border-radius:14px; padding:14px; text-align:center; } .wk-stat b{ display:block; font-size:24px; font-weight:800; color:var(--wk-blue); line-height:1.05; } .wk-stat span{ font-size:11.5px; color:var(--wk-mut); font-weight:600; } /* ---- results toolbar ---- */ .wk-toolbar{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:18px 0 4px; } .wk-search{ flex:1; min-width:170px; height:44px; border:1px solid var(--wk-line); border-radius:12px; padding:0 14px; font-size:14px; background:var(--wk-soft); color:var(--wk-ink); } .wk-search:focus{ outline:none; border-color:var(--wk-blue); background:#fff; } .wk-btn{ border:1px solid var(--wk-line); background:#fff; color:var(--wk-ink); border-radius:12px; padding:11px 16px; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; } .wk-btn:hover{ border-color:var(--wk-blue); color:var(--wk-blue); } /* ---- length bands: full tool-width coloured header row ---- */ .wk-group{ margin-top:16px; } .wk-group-h{ display:flex; align-items:center; justify-content:space-between; width:100%; background:linear-gradient(90deg, hsl(var(--gh,220) 74% 54%), hsl(calc(var(--gh,220) + 20) 76% 46%)); color:#fff; padding:12px 18px; border-radius:12px; margin:0 0 14px; box-shadow:0 6px 16px hsl(var(--gh,220) 60% 50% / .28); } .wk-group-h .t{ font-size:16px; font-weight:800; letter-spacing:.2px; } .wk-group-h .n{ background:rgba(255,255,255,.26); color:#fff; font-size:12.5px; font-weight:800; padding:3px 12px; border-radius:999px; } .wk-words{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:6px; } .wk-word{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--wk-line); background:#fff; color:var(--wk-ink); border-radius:12px; padding:9px 13px; cursor:pointer; transition:all .13s; } .wk-word:hover{ border-color:var(--wk-blue); box-shadow:0 6px 16px rgba(37,99,235,.16); transform:translateY(-2px); } .wk-word .w{ font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.6px; } .wk-word .sc{ font-size:11px; font-weight:800; color:#fff; background:var(--wk-orange); border-radius:7px; padding:2px 7px; } .wk-word.real{ border-color:color-mix(in srgb, var(--wk-green) 55%, var(--wk-line)); } .wk-word.real .sc{ background:var(--wk-green); } .wk-empty{ text-align:center; padding:44px 20px; color:var(--wk-mut); } .wk-empty b{ display:block; font-size:18px; color:var(--wk-ink); margin-bottom:6px; } .wk-loading{ text-align:center; padding:34px; color:var(--wk-mut); font-weight:700; } .wk-spin{ width:28px; height:28px; border:3px solid var(--wk-line); border-top-color:var(--wk-blue); border-radius:50%; margin:0 auto 13px; animation:wkSpin .8s linear infinite; } @keyframes wkSpin{ to{ transform:rotate(360deg); } } @keyframes wkFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } } .wk-results-in{ animation:wkFade .28s ease; } /* ---- definition modal ---- */ .wk-modal{ position:fixed; inset:0; background:rgba(15,23,42,.55); display:none; align-items:center; justify-content:center; z-index:99999; padding:16px; } .wk-modal.open{ display:flex; animation:wkFade .2s ease; } .wk-modal-card{ background:#fff; color:var(--wk-ink); border-radius:20px; max-width:470px; width:100%; max-height:82vh; overflow:auto; padding:26px; box-shadow:0 34px 80px rgba(0,0,0,.42); } .wk-modal-word{ font-size:27px; font-weight:800; text-transform:capitalize; margin:0; } .wk-modal-phon{ color:var(--wk-mut); font-size:15px; margin:3px 0 4px; } .wk-modal-meta{ display:flex; gap:8px; flex-wrap:wrap; margin:11px 0 17px; } .wk-tagp{ font-size:12px; font-weight:800; padding:3px 11px; border-radius:999px; background:var(--wk-soft); color:var(--wk-indigo); } .wk-def{ margin:0 0 15px; } .wk-def .pos{ font-style:italic; color:var(--wk-blue); font-weight:700; font-size:13px; margin-bottom:4px; } .wk-def p{ margin:0 0 4px; line-height:1.55; } .wk-def .ex{ color:var(--wk-mut); font-size:13.5px; } .wk-modal-x{ float:right; border:0; background:var(--wk-soft); width:36px; height:36px; border-radius:11px; cursor:pointer; font-size:19px; color:var(--wk-mut); line-height:1; } .wk-src{ font-size:12px; color:var(--wk-mut); margin-top:6px; } .wk-audio-row{ display:flex; gap:8px; flex-wrap:wrap; margin:-8px 0 16px; } .wk-audio{ border:1.5px solid var(--wk-soft); background:#fff; color:var(--wk-indigo); font-weight:700; font-size:12.5px; padding:5px 12px; border-radius:999px; cursor:pointer; } .wk-audio span{ font-weight:500; color:var(--wk-mut); } .wk-audio:hover{ background:var(--wk-soft); } .wk-syn{ display:flex; gap:6px; flex-wrap:wrap; margin-top:5px; } .wk-syn span{ font-size:12px; padding:2px 9px; border-radius:999px; background:var(--wk-soft); color:var(--wk-ink); } /* Words with no standard dictionary entry (list-only) get a muted, dashed look */ .wk-word.wk-nf{ opacity:.55; text-decoration:underline dashed; text-underline-offset:3px; } @media (max-width:760px){ .wk-tabs{ grid-template-columns:repeat(2,1fr); } .wk-tab-sub{ display:none; } .wk-input{ font-size:16px; } .wk-group-h .t{ font-size:15px; } }