CSS File

1.output-list h2 {

2 font-size: 20px;

3 margin-bottom: 2px;

4 color: #1c1818;

5 font-weight: 400;

6 }

7 .output-list h1{

8 font-size: 30px;

9 margin: 2px;

10 color: #1c1818;

11 font-weight: 900;

12 text-align: center;

13 }

14 .output-list p{

15 font-size: 18px;

16 margin: 0px;

17 color: #1c1818;

18 font-weight: 400;

19 text-align: center;

20 }

21 .input-container {

22 position: sticky;

23 top: 0;

24 z-index: 9;

25 padding: 5px;

26 margin-top: 10px;

27 background-color: #c4c6c6a7;

28 border-radius: 9999px;

29 }

30

31 .input-container input {

32 width: 100%;

33 padding: 12px 40px 12px 16px;

34 font-size: 18px;

35 border: 1px solid #dadce0;

36 border-radius: 9999px;

37 outline: none;

38 transition: box-shadow 0.2s ease;

39 box-sizing: border-box;

40 }

41

42 .input-container input:focus {

43 border-color: #000000;

44 box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);

45 border: 2px solid black;

46 }

47

48 .clear-btn {

49 position: absolute;

50 right: 12px;

51 top: 50%;

52 transform: translateY(-50%);

53 font-size: 20px;

54 color: #888;

55 cursor: pointer;

56 user-select: none;

57 display: none;

58 }

59

60 .clear-btn:hover {

61 color: #d93025;

62 }

63

64 .output-list {

65 display: flex;

66 flex-direction: column;

67 gap: 9px;

68 max-width: 800px;

69 margin: 0 auto;

70 }

71

72 .output-box {

73 background: #fff;

74 padding: 8px 12px;

75 border-radius: 12px;

76 display: flex;

77 justify-content: space-between;

78 align-items: center;

79 flex-wrap: wrap;

80 }

81

82 .text-content {

83 flex-grow: 1;

84 margin-right: 15px;

85 display: flex;

86 flex-direction: column;

87 }

88

89 .output-text {

90 font-size: 21px;

91 margin-bottom: 4px;

92 color: #111;

93 word-break: break-word;

94 }

95

96 .output-box:hover {

97 background-color: #e5f2f8;

98 }

99

100 .style-name {

101 font-size: 12px;

102 color: #777;

103 }

104

105 .copy-btn {

106 background-color: #007bff;

107 color: white;

108 border: none;

109 padding: 10px 16px;

110 font-size: 14px;

111 border-radius: 6px;

112 cursor: pointer;

113 transition: background-color 0.3s ease;

114 }

115

116 .copy-btn:hover {

117 background-color: #0056b3;

118 }

119

120 .notification {

121 position: fixed;

122 bottom: 20px;

123 left: 50%;

124 transform: translateX(-50%);

125 background-color: #222;

126 color: #fff;

127 padding: 12px 24px;

128 border-radius: 8px;

129 font-size: 15px;

130 display: none;

131 z-index: 999;

132 }

133

134

135

136

137

138 /* Mobile responsive for content */

139 @media (max-width: 600px) {

140 .output-box {

141 flex-direction: row;

142 align-items: center;

143 }

144

145 .copy-btn {

146 margin-left: auto;

147 margin-top: 0;

148 }

149

150 .text-content {

151 flex: 1;

152 margin-right: 15px;

153 }

154

155 .output-text {

156 font-size: 20px;

157 }

158 }

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177.stepfonts-steps-container {

178 max-width: 1100px;

179 margin: 40px auto;

180 padding: 20px;

181}

182

183.stepfonts-steps-container h2 {

184 text-align: center;

185 font-size: 2rem;

186 margin-bottom: 60px;

187 color: #232b38;

188}

189

190.stepfonts-steps {

191 display: flex;

192 flex-direction: column;

193 gap: 70px;

194 position: relative;

195}

196

197.stepfonts-step {

198 display: flex;

199 align-items: flex-start;

200 justify-content: center;

201 position: relative;

202 min-height: 180px;

203}

204

205.stepfonts-step.reverse {

206 flex-direction: row-reverse;

207}

208

209.stepfonts-step-img {

210 flex: 1 1 0;

211 display: flex;

212 align-items: center;

213 justify-content: center;

214 min-width: 220px;

215}

216

217.stepfonts-step-img img {

218 width: 100%;

219 max-width: 320px;

220 height: auto;

221 border-radius: 18px;

222 box-shadow: 0 2px 16px rgba(44, 62, 80, 0.10);

223 background: #fff;

224}

225

226.stepfonts-step-content {

227 flex: 1 1 0;

228 display: flex;

229 flex-direction: column;

230 align-items: flex-start;

231 justify-content: center;

232 padding: 0 20px;

233 max-width: 400px;

234}

235

236.stepfonts-step-content h3 {

237 margin: 0 0 16px 0;

238 font-size: 1.2rem;

239 color: #232b38;

240 font-weight: 600;

241}

242

243.stepfonts-step-content p {

244 color: #4a6375;

245 font-size: 1rem;

246 line-height: 1.6;

247 margin: 0;

248}

249

250.stepfonts-step-center {

251 position: relative;

252 width: 80px;

253 display: flex;

254 flex-direction: column;

255 align-items: center;

256 z-index: 2;

257}

258

259.stepfonts-step-number {

260 background: #4f8cff;

261 color: #fff;

262 font-size: 1.3rem;

263 font-weight: bold;

264 width: 38px;

265 height: 38px;

266 border-radius: 50%;

267 display: flex;

268 align-items: center;

269 justify-content: center;

270 margin-bottom: 0;

271 margin-top: 0;

272 box-shadow: 0 2px 8px rgba(79,140,255,0.10);

273 border: 3px solid #fff;

274 z-index: 2;

275}

276

277.stepfonts-step-line {

278 width: 2px;

279 flex: 1;

280 min-height: 100px;

281 background: repeating-linear-gradient(

282 to bottom,

283 #d1dbe7,

284 #d1dbe7 8px,

285 transparent 8px,

286 transparent 18px

287 );

288 margin: 0 auto;

289 margin-top: 8px;

290}

291

292.stepfonts-step:last-child .stepfonts-step-line {

293 display: none;

294}

295.stepfonts{

296 text-align: center;

297 color: #4a6375;

298 font-size: 1rem;

299 line-height: 1.6;

300 margin-bottom: 5px;

301}

302/* Responsive styles */

303@media (max-width: 900px) {

304 .stepfonts-step,

305 .stepfonts-step.reverse {

306 flex-direction: column !important;

307 align-items: center;

308 min-height: 0;

309 gap: 0;

310 }

311 .stepfonts-step-img {

312 order: 1;

313 width: 100%;

314 max-width: 100%;

315 margin-bottom: 18px;

316 justify-content: center;

317 }

318 .stepfonts-step-center {

319 order: 2;

320 width: 100%;

321 flex-direction: column;

322 justify-content: center;

323 align-items: center;

324 margin-bottom: 18px;

325 }

326 .stepfonts-step-content {

327 order: 3;

328 padding: 0 0 0 0;

329 max-width: 95vw;

330 align-items: center;

331 text-align: center;

332 }

333 .stepfonts-step-number {

334 margin: 0 0 0 0;

335 }

336 .stepfonts-step-line {

337 display: none;

338 }

339}

340

341

342

343 .features-heading {

344 text-align: center;

345 font-size: 2rem;

346 margin-top: 2rem;

347 }

348

349 .features-container {

350 display: grid;

351 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

352 gap: 2rem;

353 padding: 2rem;

354 text-align: center;

355 background-color: #eaf0f000;

356 margin-top: 10px;

357 }

358

359 .feature-box {

360 display: flex;

361 flex-direction: column;

362 align-items: center;

363 padding: 1.5rem;

364 background-color: #e6eaec;

365 border-radius: 1rem;

366 }

367

368 .feature-box:hover {

369 background-color: #dadcdf;

370 }

371

372 .feature-box svg {

373 width: 48px;

374 height: 48px;

375 margin-bottom: 1rem;

376 fill: #4f8cff;

377 display: block;

378 }

379

380 .feature-text {

381 font-size: 1rem;

382 color: #333;

383 }

384

385 .feature-text strong {

386 display: block;

387 font-size: 1.1rem;

388 margin-bottom: 0.3rem;

389 }

390

391

392

393

394 .containerusestext {

395 max-width: 1200px;

396 margin: 0 auto;

397 padding: 10px;

398 }

399

400 .containerusestext h2 {

401 text-align: center;

402 font-size: 2rem;

403 color: #222;

404 margin-bottom: 40px;

405 }

406

407 .cards {

408 display: flex;

409 flex-wrap: wrap;

410 gap: 20px;

411 justify-content: center;

412 margin:5px;

413 }

414

415.card {

416 transition: transform 0.3s ease, box-shadow 0.3s ease;

417 border-radius: 12px;

418 overflow: hidden;

419}

420

421/* Hover effect */

422.card:hover {

423 transform: translateY(-8px) scale(1.03);

424 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

425}

426 .usestext {

427 background: #fff;

428 border-radius: 12px;

429 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

430 overflow: hidden;

431 max-width: 350px;

432 width: 100%;

433 display: flex;

434 flex-direction: column;

435 }

436

437 .usestext img {

438 width: 100%;

439 height: 200px;

440 object-fit: cover;

441 }

442

443 .usestext .content {

444 padding: 15px;

445 }

446

447 .usestext h3 {

448 margin-top: 0;

449 font-size: 1.2rem;

450 color: #333;

451 }

452

453 .usestext p {

454 font-size: 0.95rem;

455 color: #555;

456 line-height: 1.5;

457 }

458

459 @media (max-width: 768px) {

460 .usestext {

461 max-width: 100%;

462 }

463 }

464

465

466

467

468 .fontfaq {

469 max-width: 900px;

470 margin: 0 auto;

471 padding: 40px;

472 border-radius: 15px;

473 }

474

475

476

477 .fontfaq h2 {

478 font-size: 22px;

479 color:rgb(9, 9, 10);

480 margin-top: 35px;

481 margin-bottom: 10px;

482 transition: color 0.3s ease;

483 }

484

485 .fontfaq h2:hover {

486 color: #0056b3;

487 }

488

489 .fontfaq p {

490 font-size: 16.5px;

491 line-height: 1.7;

492 margin-bottom: 25px;

493 color: #555;

494 }

495

496 .fontfaq p strong {

497 color: #222;

498 }

499

500 @media (max-width: 600px) {

501 .fontfaq {

502 padding: 25px 20px;

503 }

504

505

506 .fontfaq h2 {

507 font-size: 20px;

508 }

509

510 .fontfaq p {

511 font-size: 15.5px;

512 }

513 }

514

515 .abouttext {

516

517 padding: 2rem;

518 border-radius: 16px;

519 max-width: 800px;

520 margin: 0px auto;

521 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

522 color: #333;

523 line-height: 1.6;

524}

525

526.abouttext h2 {

527 font-size: 2rem;

528 margin-bottom: 1rem;

529 color: #222;

530 text-align: center;

531}

532

533.abouttext p {

534 font-size: 1rem;

535 margin-bottom: 1rem;

536}

537

538

539

540

541

542