/* ============================================================ Text Formatter — shared dark "tech-noir" design system One source of truth for the dark theme + unified header. Per-page accent: set --accent / --accent-2 on . ============================================================ */ :root { --bg: #07060d; --bg-soft: #0d0c17; --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.07); --border: rgba(255,255,255,.09); --border-2: rgba(255,255,255,.16); --text: #ECECF5; --muted: #9696AE; --muted-2: #6C6C84; --accent: #7C5CFF; /* electric violet (overridable per page) */ --accent-2: #22D3EE; /* cyan */ --star: #FBBF24; --radius: 16px; --maxw: 72rem; --font-display:'Syne', sans-serif; --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.tf { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; position: relative; overflow-x: hidden; } /* Atmospheric glow background */ body.tf::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60rem 40rem at 50% -8rem, rgba(124,92,255,.18), transparent 60%), radial-gradient(40rem 30rem at 100% 0, rgba(34,211,238,.10), transparent 55%), radial-gradient(50rem 40rem at 0 30%, rgba(124,92,255,.06), transparent 60%); } body.tf > * { position: relative; z-index: 1; } /* subtle grain/grid */ body.tf::after { content:""; position: fixed; inset:0; z-index:0; pointer-events:none; opacity:.4; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 0, #000 30%, transparent 80%); } .tf-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .tf-narrow { max-width: 56rem; } /* ---------- Typography ---------- */ .tf h1, .tf h2, .tf h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.1; color: #fff; } .tf h1 { font-weight: 800; } .tf h2 { font-weight: 700; } .grad { background: linear-gradient(100deg, var(--accent-2), var(--accent) 55%, #E879F9); -webkit-background-clip: text; background-clip: text; color: transparent; } .tf a { color: inherit; text-decoration: none; } .eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--muted); border:1px solid var(--border); border-radius:999px; padding:.35rem .75rem; background: var(--surface); } .eyebrow .dot { width:.45rem; height:.45rem; border-radius:50%; background: var(--accent); box-shadow:0 0 12px var(--accent); } /* ---------- Header ---------- */ .tf-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: rgba(7,6,13,.72); border-bottom: 1px solid var(--border); } .tf-header-inner { max-width: var(--maxw); margin:0 auto; padding:.7rem 1.25rem; display:flex; align-items:center; gap:1rem; } .tf-logo { display:flex; align-items:center; gap:.6rem; flex:0 0 auto; } .tf-logo-mark { width:2rem; height:2rem; border-radius:.6rem; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; color:#0a0a12; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 0 18px rgba(124,92,255,.5); } .tf-logo-word { font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:#fff; letter-spacing:-.01em; } .tf-nav { margin-left:auto; display:flex; align-items:center; gap:.25rem; min-width:0; overflow-x:auto; scrollbar-width:none; } .tf-nav::-webkit-scrollbar { display:none; } .tf-nav a, .tf-menu > summary { flex:0 0 auto; cursor:pointer; list-style:none; font-size:.86rem; font-weight:600; color:var(--muted); padding:.45rem .7rem; border-radius:.6rem; white-space:nowrap; transition: color .15s, background .15s; } .tf-nav a:hover, .tf-menu > summary:hover { color:#fff; background:var(--surface-2); } .tf-nav a.is-active { color:#fff; background:var(--surface-2); } .tf-menu { position:relative; } .tf-menu > summary::-webkit-details-marker { display:none; } .tf-menu > summary::after { content:"▾"; margin-left:.3rem; opacity:.6; } .tf-menu[open] > summary { color:#fff; background:var(--surface-2); } .tf-menu-pop { position:absolute; right:0; top:calc(100% + .5rem); min-width:13rem; background: #0e0d1a; border:1px solid var(--border-2); border-radius:.8rem; padding:.4rem; box-shadow: 0 20px 50px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:.1rem; } .tf-menu-pop a { display:block; padding:.5rem .65rem; border-radius:.5rem; font-size:.86rem; color:var(--muted); } .tf-menu-pop a:hover { color:#fff; background:var(--surface-2); } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:.9rem; padding:.6rem 1.05rem; border-radius:.7rem; border:1px solid transparent; transition: transform .12s ease, box-shadow .2s, background .2s, border-color .2s; white-space:nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { color:#0a0a12; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 30px rgba(124,92,255,.35); } .btn-primary:hover { box-shadow: 0 10px 38px rgba(124,92,255,.5); } .btn-ghost { color:var(--text); background:var(--surface); border-color:var(--border-2); } .btn-ghost:hover { background:var(--surface-2); border-color:var(--accent); } .btn-sm { padding:.4rem .7rem; font-size:.8rem; border-radius:.55rem; } /* ---------- Cards / surfaces ---------- */ .card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -30px rgba(0,0,0,.6); } .card-glow { position:relative; } .card-glow::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background: linear-gradient(120deg, transparent, rgba(124,92,255,.35), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ---------- Form fields ---------- */ .field { width:100%; background: rgba(0,0,0,.35); color:var(--text); border:1px solid var(--border-2); border-radius:.8rem; padding:.85rem 1rem; font-family:var(--font-body); font-size:1.05rem; line-height:1.5; resize:vertical; transition: border-color .15s, box-shadow .15s; outline:none; } .field::placeholder { color:var(--muted-2); } .field:focus { border-color:var(--accent); box-shadow: 0 0 0 3px rgba(124,92,255,.22); } .field-label { display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.5rem; letter-spacing:.02em; } /* ---------- Font result rows ---------- */ .style-list { display:flex; flex-direction:column; gap:.55rem; } .style-row { display:flex; align-items:center; gap:.85rem; cursor:pointer; background: var(--surface); border:1px solid var(--border); border-radius:.75rem; padding:.7rem .9rem; transition: border-color .15s, background .15s, transform .1s; } .style-row:hover { border-color: var(--accent); background: var(--surface-2); } .style-row:hover .style-copy { opacity:1; } .style-out { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.15rem; color:#fff; } .style-copy { flex:0 0 auto; opacity:.85; cursor:pointer; font-weight:700; font-size:.78rem; color:#0a0a12; background: linear-gradient(135deg, var(--accent-2), var(--accent)); border:none; border-radius:.5rem; padding:.4rem .8rem; transition: opacity .15s, box-shadow .2s; } .style-copy:hover { box-shadow: 0 6px 18px rgba(124,92,255,.4); } /* ---------- Share bar ---------- */ .share-bar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; } .share-bar .share-label { font-size:.82rem; font-weight:700; color:var(--muted); margin-right:.15rem; } .share-btn { display:inline-flex; align-items:center; cursor:pointer; color:#fff; font-weight:600; font-size:.82rem; padding:.42rem .8rem; border-radius:.55rem; border:1px solid transparent; transition: filter .15s, transform .1s; } .share-btn:hover { filter: brightness(1.12); } .share-btn:active { transform: translateY(1px); } .share-btn.is-ghost { color:var(--text); background:var(--surface); border-color:var(--border-2); } .share-btn.is-ghost:hover { background:var(--surface-2); } .sb-x { background:#000; border-color:var(--border-2); } .sb-reddit { background:#ff4500; } .sb-facebook { background:#1877f2; } .sb-whatsapp { background:#25d366; color:#06280f; } .sb-telegram { background:#229ed9; } /* ---------- Prose (article content) ---------- */ .prose-dark { color: var(--muted); font-size:1rem; } .prose-dark h2 { color:#fff; font-size:1.6rem; margin:2.2rem 0 .9rem; } .prose-dark h3 { color:#fff; font-size:1.15rem; margin:1.4rem 0 .5rem; font-family:var(--font-body); font-weight:700; } .prose-dark p { margin:0 0 1rem; } .prose-dark a { color:#fff; text-decoration:underline; text-decoration-color: var(--accent); text-underline-offset:3px; } .prose-dark strong { color: var(--text); } .prose-dark code { font-family:var(--font-mono); font-size:.85em; background: rgba(0,0,0,.4); border:1px solid var(--border); border-radius:.35rem; padding:.1rem .35rem; color:#cfe9ff; } .prose-dark ul, .prose-dark ol { margin:0 0 1.1rem; padding-left:1.3rem; } .prose-dark li { margin:.3rem 0; } .callout { background: rgba(124,92,255,.08); border:1px solid rgba(124,92,255,.25); border-radius:.8rem; padding:1rem 1.2rem; } /* ---------- Testimonials ---------- */ .tcard { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:1.4rem; } .tcard .stars { color: var(--star); letter-spacing:2px; margin-bottom:.7rem; } .tcard blockquote { margin:0 0 1.1rem; color: var(--text); } .tcard .who { display:flex; align-items:center; gap:.7rem; } .avatar { width:2.5rem; height:2.5rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; color:#fff; flex:0 0 auto; background: linear-gradient(135deg, var(--accent-2), var(--accent)); opacity:.95; } .who-name { font-weight:700; color:#fff; font-size:.9rem; } .who-role { color: var(--muted-2); font-size:.78rem; } /* ---------- Footer ---------- */ .tf-footer { border-top:1px solid var(--border); margin-top:4rem; background: rgba(0,0,0,.25); } .tf-footer a { color: var(--muted); } .tf-footer a:hover { color:#fff; } .tf-footer h4 { color:#fff; font-weight:700; font-size:.95rem; margin:0 0 .9rem; } /* ---------- Toast ---------- */ #fg-toast { position: fixed; bottom: 1.5rem; left:50%; transform: translateX(-50%); background: #fff; color:#0a0a12; font-weight:700; font-size:.85rem; padding:.6rem 1rem; border-radius:.7rem; box-shadow:0 10px 40px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition: opacity .2s; z-index:100; } /* ---------- Misc ---------- */ .divider { height:1px; background: var(--border); border:0; } .pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:.4rem .8rem; } @media (max-width: 640px) { .tf-logo-word { display:none; } .style-out { font-size:1.05rem; } }