/* ========================================================================= IFG WORD COUNTER — plugin stylesheet Design tokens: "editorial manuscript" — deep ink background, warm gold accent, serif display for the hero counter, glass panels styled like margin notes on a page. Every rule below is scoped underneath the unique ".ifg-word-counter- wrapper" root so the plugin can never leak into — or be overridden by — the surrounding theme, and every class/id begins with "ifg-". ========================================================================= */ .ifg-word-counter-wrapper { /* Color */ --ifg-ink-950: #0a0d13; --ifg-ink-900: #10141c; --ifg-ink-800: #171d29; --ifg-paper: #f4f2ec; --ifg-gold: #e8b84b; --ifg-gold-soft: #f3d488; --ifg-teal: #4fd1c5; --ifg-danger: #e2695f; --ifg-text-primary: #f8f9fb; --ifg-text-muted: #b6bfc9; --ifg-text-faint: #838d99; --ifg-glass-bg: rgba(255, 255, 255, 0.065); --ifg-glass-bg-strong: rgba(255, 255, 255, 0.1); --ifg-glass-border: rgba(255, 255, 255, 0.12); --ifg-glass-border-strong: rgba(255, 255, 255, 0.22); --ifg-editor-bg: rgba(0, 0, 0, 0.28); --ifg-track-bg: rgba(255, 255, 255, 0.07); /* Type */ --ifg-font-display: "Fraunces", Georgia, "Noto Serif Bengali", "Noto Naskh Arabic", serif; --ifg-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", "Noto Naskh Arabic", sans-serif; --ifg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Layout */ --ifg-radius-lg: 22px; --ifg-radius-md: 14px; --ifg-radius-sm: 9px; --ifg-shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --ifg-shadow-tight: 0 8px 24px -10px rgba(0, 0, 0, 0.5); --ifg-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); /* Container styling — this wrapper is itself the "page" surface, since the plugin cannot (and must not) touch the theme's . */ display: block; position: relative; isolation: isolate; font-family: var(--ifg-font-body); font-size: 1rem; line-height: 1.6; color: var(--ifg-text-primary); background: radial-gradient(1100px 600px at 12% -10%, rgba(232, 184, 75, 0.10), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(79, 209, 197, 0.08), transparent 55%), linear-gradient(180deg, var(--ifg-ink-950) 0%, var(--ifg-ink-900) 55%, var(--ifg-ink-950) 100%); border-radius: var(--ifg-radius-lg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--ifg-transition-base), color var(--ifg-transition-base); } /* ===================================================================== LIGHT THEME — activated via [data-ifg-theme="light"] on the wrapper. Same "manuscript" concept, printed on warm paper instead of ink. ===================================================================== */ .ifg-word-counter-wrapper[data-ifg-theme="light"] { --ifg-ink-950: #f7f4ec; --ifg-ink-900: #fbf9f3; --ifg-ink-800: #efe9da; --ifg-paper: #241f14; --ifg-gold: #b8842a; --ifg-gold-soft: #8a611c; --ifg-teal: #1f8f83; --ifg-danger: #c23f33; --ifg-text-primary: #23201a; --ifg-text-muted: #5b5648; --ifg-text-faint: #847e6c; --ifg-glass-bg: rgba(35, 28, 12, 0.045); --ifg-glass-bg-strong: rgba(35, 28, 12, 0.07); --ifg-glass-border: rgba(35, 28, 12, 0.12); --ifg-glass-border-strong: rgba(35, 28, 12, 0.22); --ifg-editor-bg: rgba(255, 255, 255, 0.65); --ifg-track-bg: rgba(35, 28, 12, 0.08); --ifg-shadow-soft: 0 20px 50px -24px rgba(80, 65, 30, 0.35); --ifg-shadow-tight: 0 8px 20px -12px rgba(80, 65, 30, 0.28); } .ifg-word-counter-wrapper[data-ifg-theme="light"] .ifg-brand-mark { color: #2a2213; } /* ===================================================================== THEME TOGGLE ===================================================================== */ .ifg-word-counter-wrapper .ifg-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--ifg-radius-sm); border: 1px solid var(--ifg-glass-border-strong); background: var(--ifg-glass-bg-strong); color: var(--ifg-text-primary); cursor: pointer; transition: border-color var(--ifg-transition-base), transform var(--ifg-transition-base); } .ifg-word-counter-wrapper .ifg-theme-toggle:hover { border-color: var(--ifg-gold); transform: translateY(-1px); } .ifg-word-counter-wrapper .ifg-theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ifg-word-counter-wrapper .ifg-theme-toggle .ifg-icon-sun { display: none; } .ifg-word-counter-wrapper[data-ifg-theme="light"] .ifg-theme-toggle .ifg-icon-moon { display: none; } .ifg-word-counter-wrapper[data-ifg-theme="light"] .ifg-theme-toggle .ifg-icon-sun { display: block; } /* ===================================================================== RESET — scoped to the plugin wrapper only ===================================================================== */ .ifg-word-counter-wrapper, .ifg-word-counter-wrapper *, .ifg-word-counter-wrapper *::before, .ifg-word-counter-wrapper *::after { box-sizing: border-box; } .ifg-word-counter-wrapper img, .ifg-word-counter-wrapper svg { display: block; max-width: 100%; } .ifg-word-counter-wrapper button, .ifg-word-counter-wrapper select, .ifg-word-counter-wrapper textarea, .ifg-word-counter-wrapper input { font: inherit; color: inherit; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .ifg-word-counter-wrapper *, .ifg-word-counter-wrapper *::before, .ifg-word-counter-wrapper *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Visible keyboard focus everywhere inside the tool */ .ifg-word-counter-wrapper :focus-visible { outline: 2px solid var(--ifg-gold); outline-offset: 3px; border-radius: 6px; } .ifg-word-counter-wrapper .ifg-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; } /* ===================================================================== GLASS UTILITY ===================================================================== */ .ifg-word-counter-wrapper .ifg-glass { background: var(--ifg-glass-bg); border: 1px solid var(--ifg-glass-border); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--ifg-shadow-tight); } /* ===================================================================== PAGE SHELL ===================================================================== */ .ifg-word-counter-wrapper .ifg-page { max-width: 1220px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; } @media (min-width: 768px) { .ifg-word-counter-wrapper .ifg-page { padding: 2.25rem 2rem 4rem; } } /* ===================================================================== HEADER ===================================================================== */ .ifg-word-counter-wrapper .ifg-site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.75rem; } @media (max-width: 560px) { .ifg-word-counter-wrapper .ifg-site-header { flex-direction: column; align-items: stretch; } .ifg-word-counter-wrapper .ifg-header-controls { justify-content: space-between; } .ifg-word-counter-wrapper .ifg-lang-select { flex: 1; } } .ifg-word-counter-wrapper .ifg-brand { display: flex; align-items: center; gap: 0.75rem; } .ifg-word-counter-wrapper .ifg-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(155deg, var(--ifg-gold-soft), var(--ifg-gold) 65%, #c9922f); color: var(--ifg-ink-950); font-size: 1.2rem; box-shadow: 0 8px 20px -6px rgba(232, 184, 75, 0.55); } .ifg-word-counter-wrapper .ifg-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .ifg-word-counter-wrapper .ifg-brand-name { font-family: var(--ifg-font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; } .ifg-word-counter-wrapper .ifg-brand-tagline { font-size: 0.78rem; color: var(--ifg-text-muted); } .ifg-word-counter-wrapper .ifg-header-controls { display: flex; align-items: center; gap: 0.6rem; } .ifg-word-counter-wrapper .ifg-lang-label { font-size: 0.82rem; color: var(--ifg-text-muted); } .ifg-word-counter-wrapper .ifg-lang-select { background: var(--ifg-glass-bg-strong); border: 1px solid var(--ifg-glass-border-strong); color: var(--ifg-text-primary); padding: 0.65rem 0.9rem; min-height: 44px; font-size: 0.95rem; border-radius: var(--ifg-radius-sm); cursor: pointer; transition: border-color var(--ifg-transition-base); } .ifg-word-counter-wrapper .ifg-lang-select:hover { border-color: var(--ifg-gold); } /* ===================================================================== EDITOR SECTION ===================================================================== */ .ifg-word-counter-wrapper .ifg-editor-section { display: grid; gap: 1.25rem; } .ifg-word-counter-wrapper .ifg-editor-panel { border-radius: var(--ifg-radius-lg); padding: 1.75rem; box-shadow: var(--ifg-shadow-soft); } @media (max-width: 560px) { .ifg-word-counter-wrapper .ifg-editor-panel { padding: 1.15rem; border-radius: var(--ifg-radius-md); } } .ifg-word-counter-wrapper .ifg-editor-title { font-family: var(--ifg-font-display); font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 600; margin: 0 0 0.45rem; letter-spacing: -0.01em; } .ifg-word-counter-wrapper .ifg-editor-sub { margin: 0 0 1.25rem; color: var(--ifg-text-muted); font-size: 0.95rem; max-width: 60ch; } .ifg-word-counter-wrapper .ifg-editor-wrap { position: relative; padding-left: 14px; } .ifg-word-counter-wrapper .ifg-editor { width: 100%; min-height: 260px; max-height: 62vh; resize: vertical; border: 1px solid var(--ifg-glass-border); background: var(--ifg-editor-bg); color: var(--ifg-text-primary); border-radius: var(--ifg-radius-md); padding: 1.1rem 1.25rem; font-family: var(--ifg-font-body); font-size: 1.05rem; line-height: 1.7; transition: border-color var(--ifg-transition-base), box-shadow var(--ifg-transition-base); } @media (max-width: 560px) { .ifg-word-counter-wrapper .ifg-editor { min-height: 200px; padding: 0.95rem 1rem; font-size: 1rem; } } .ifg-word-counter-wrapper .ifg-editor::placeholder { color: var(--ifg-text-faint); } .ifg-word-counter-wrapper .ifg-editor:focus { outline: none; border-color: var(--ifg-gold); box-shadow: 0 0 0 4px rgba(232, 184, 75, 0.14); } /* Signature element: ink ruler — a vertical margin bar that fills like rising ink as the writer's character progress climbs toward a comfortable page-length benchmark (1800 chars ~ one manuscript page). */ .ifg-word-counter-wrapper .ifg-ink-ruler { position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: var(--ifg-track-bg); overflow: hidden; } .ifg-word-counter-wrapper .ifg-ink-ruler-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--ifg-teal), var(--ifg-gold)); transition: height 320ms cubic-bezier(0.4, 0, 0.2, 1); border-radius: 4px; } /* Toolbar */ .ifg-word-counter-wrapper .ifg-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.1rem; } .ifg-word-counter-wrapper .ifg-tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.65rem 1rem; min-height: 44px; border-radius: var(--ifg-radius-sm); border: 1px solid var(--ifg-glass-border-strong); background: var(--ifg-glass-bg-strong); color: var(--ifg-text-primary); cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: transform var(--ifg-transition-base), border-color var(--ifg-transition-base), background var(--ifg-transition-base); } @media (max-width: 560px) { .ifg-word-counter-wrapper .ifg-editor-toolbar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; } .ifg-word-counter-wrapper .ifg-tool-btn { width: 100%; } .ifg-word-counter-wrapper .ifg-toast { grid-column: 1 / -1; margin-left: 0; text-align: center; order: 99; } } .ifg-word-counter-wrapper .ifg-tool-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ifg-word-counter-wrapper .ifg-tool-btn:hover { border-color: var(--ifg-gold); background: rgba(232, 184, 75, 0.1); transform: translateY(-1px); } .ifg-word-counter-wrapper .ifg-tool-btn:active { transform: translateY(0); } .ifg-word-counter-wrapper .ifg-toast { margin-left: auto; font-size: 0.82rem; color: var(--ifg-teal); opacity: 0; transition: opacity var(--ifg-transition-base); } .ifg-word-counter-wrapper .ifg-toast.ifg-show { opacity: 1; } /* ===================================================================== STATS GRID ===================================================================== */ .ifg-word-counter-wrapper .ifg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; } @media (min-width: 640px) { .ifg-word-counter-wrapper .ifg-stats-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .ifg-word-counter-wrapper .ifg-stats-grid { grid-template-columns: repeat(8, 1fr); } } .ifg-word-counter-wrapper .ifg-stat-card { border-radius: var(--ifg-radius-md); padding: 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; transition: border-color var(--ifg-transition-base), transform var(--ifg-transition-base); } @media (max-width: 480px) { .ifg-word-counter-wrapper .ifg-stat-card { padding: 0.9rem 0.75rem; } .ifg-word-counter-wrapper .ifg-stat-value { font-size: 1.3rem; } .ifg-word-counter-wrapper .ifg-hero-stat .ifg-stat-value { font-size: 1.75rem; } .ifg-word-counter-wrapper .ifg-stat-label { font-size: 0.68rem; } } .ifg-word-counter-wrapper .ifg-stat-card:hover { border-color: var(--ifg-glass-border-strong); transform: translateY(-2px); } .ifg-word-counter-wrapper .ifg-stat-value { font-family: var(--ifg-font-mono); font-size: 1.5rem; font-weight: 600; color: var(--ifg-gold-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ifg-word-counter-wrapper .ifg-hero-stat .ifg-stat-value { font-family: var(--ifg-font-display); font-size: 2.1rem; color: var(--ifg-paper); } .ifg-word-counter-wrapper .ifg-stat-label { font-size: 0.76rem; color: var(--ifg-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* ===================================================================== ANALYSIS SECTION ===================================================================== */ .ifg-word-counter-wrapper .ifg-analysis-section { margin-top: 2.75rem; } .ifg-word-counter-wrapper .ifg-section-title { font-family: var(--ifg-font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 1.25rem; } .ifg-word-counter-wrapper .ifg-section-eyebrow { font-family: var(--ifg-font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ifg-teal); } .ifg-word-counter-wrapper .ifg-analysis-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 860px) { .ifg-word-counter-wrapper .ifg-analysis-grid { grid-template-columns: 1fr 1fr; } .ifg-word-counter-wrapper .ifg-panel-wide { grid-column: 1 / -1; } } .ifg-word-counter-wrapper .ifg-panel { border-radius: var(--ifg-radius-lg); padding: 1.5rem 1.6rem; } @media (max-width: 560px) { .ifg-word-counter-wrapper .ifg-panel { padding: 1.25rem 1.15rem; border-radius: var(--ifg-radius-md); } } .ifg-word-counter-wrapper .ifg-panel h3 { margin: 0 0 1rem; font-family: var(--ifg-font-display); font-size: 1.15rem; font-weight: 600; } .ifg-word-counter-wrapper .ifg-metric-list { margin: 0; display: grid; gap: 0.65rem; } .ifg-word-counter-wrapper .ifg-metric-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.65rem; border-bottom: 1px dashed var(--ifg-glass-border); } .ifg-word-counter-wrapper .ifg-metric-row:last-child { border-bottom: none; padding-bottom: 0; } .ifg-word-counter-wrapper .ifg-metric-row dt { color: var(--ifg-text-muted); font-size: 0.9rem; } .ifg-word-counter-wrapper .ifg-metric-row dd { margin: 0; font-family: var(--ifg-font-mono); font-weight: 600; color: var(--ifg-text-primary); text-align: right; word-break: break-word; } .ifg-word-counter-wrapper .ifg-panel-note { margin: 1rem 0 0; font-size: 0.78rem; color: var(--ifg-text-faint); line-height: 1.5; } .ifg-word-counter-wrapper .ifg-difficulty-meter { margin-top: 1.1rem; height: 8px; border-radius: 6px; background: var(--ifg-track-bg); overflow: hidden; } .ifg-word-counter-wrapper .ifg-difficulty-meter-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, var(--ifg-teal), var(--ifg-gold), var(--ifg-danger)); transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1); } /* Frequency list */ .ifg-word-counter-wrapper .ifg-freq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .ifg-word-counter-wrapper .ifg-freq-empty { color: var(--ifg-text-faint); font-size: 0.9rem; } .ifg-word-counter-wrapper .ifg-freq-item { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; } .ifg-word-counter-wrapper .ifg-freq-rank { font-family: var(--ifg-font-mono); color: var(--ifg-text-faint); font-size: 0.82rem; } .ifg-word-counter-wrapper .ifg-freq-word { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; direction: auto; } .ifg-word-counter-wrapper .ifg-freq-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--ifg-track-bg); overflow: hidden; } .ifg-word-counter-wrapper .ifg-freq-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ifg-teal), var(--ifg-gold-soft)); border-radius: 4px; transition: width 320ms ease; } .ifg-word-counter-wrapper .ifg-freq-meta { font-family: var(--ifg-font-mono); font-size: 0.82rem; color: var(--ifg-gold-soft); white-space: nowrap; } /* ===================================================================== FOOTER ===================================================================== */ .ifg-word-counter-wrapper .ifg-site-footer { text-align: center; margin-top: 3rem; color: var(--ifg-text-faint); font-size: 0.82rem; } /* ===================================================================== HIGH CONTRAST SUPPORT ===================================================================== */ @media (prefers-contrast: more) { .ifg-word-counter-wrapper { --ifg-glass-border: rgba(255, 255, 255, 0.4); --ifg-glass-border-strong: rgba(255, 255, 255, 0.6); --ifg-text-muted: #cfd6dd; } .ifg-word-counter-wrapper .ifg-glass { background: rgba(255, 255, 255, 0.1); } } /* Pop-in animation for stat cards / panels on first paint */ @keyframes ifg-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ifg-word-counter-wrapper .ifg-stat-card, .ifg-word-counter-wrapper .ifg-panel { animation: ifg-rise-in 420ms cubic-bezier(0.4, 0, 0.2, 1) backwards; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(1) { animation-delay: 0ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(2) { animation-delay: 30ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(3) { animation-delay: 60ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(4) { animation-delay: 90ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(5) { animation-delay: 120ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(6) { animation-delay: 150ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(7) { animation-delay: 180ms; } .ifg-word-counter-wrapper .ifg-stats-grid .ifg-stat-card:nth-child(8) { animation-delay: 210ms; } /* Print styles: only the raw text should print */ @media print { .ifg-word-counter-wrapper .ifg-site-header, .ifg-word-counter-wrapper .ifg-editor-panel-head, .ifg-word-counter-wrapper .ifg-editor-toolbar, .ifg-word-counter-wrapper .ifg-ink-ruler, .ifg-word-counter-wrapper .ifg-stats-grid, .ifg-word-counter-wrapper .ifg-analysis-section, .ifg-word-counter-wrapper .ifg-site-footer { display: none !important; } .ifg-word-counter-wrapper { background: #fff; padding: 0; } .ifg-word-counter-wrapper .ifg-editor { border: none; background: #fff; color: #000; resize: none; box-shadow: none; width: 100%; min-height: auto; max-height: none; } }