/* ========================================================================== SeoTools Pro — Theme v2 A design layer that sits ON TOP of Bootstrap 5, so every existing Bootstrap class inside tool_view.php keeps working untouched. Includes: design tokens, dark mode, full RTL support, tool grid, category tabs, tool-page shell, and the SEO content block. ========================================================================== */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { /* Brand — change these four and the whole site re-skins */ --st-brand: #4f46e5; --st-brand-dark: #4338ca; --st-brand-light: #eef2ff; --st-accent: #06b6d4; /* Surfaces */ --st-bg: #f7f8fc; --st-surface: #ffffff; --st-surface-2: #f1f3f9; --st-border: #e4e7ef; /* Text */ --st-text: #16192b; --st-text-muted: #666d85; --st-text-invert: #ffffff; /* Feedback */ --st-success: #10b981; --st-warning: #f59e0b; --st-danger: #ef4444; /* Shape & motion */ --st-radius: 14px; --st-radius-sm: 9px; --st-shadow: 0 1px 2px rgba(16,20,45,.05), 0 8px 24px rgba(16,20,45,.06); --st-shadow-lg: 0 12px 40px rgba(16,20,45,.12); --st-ring: 0 0 0 3px rgba(79,70,229,.22); --st-ease: 180ms cubic-bezier(.4,0,.2,1); --st-header-h: 64px; } /* Dark mode: follows the OS, and can be forced with data-theme on */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-bg: #0e1020; --st-surface: #171a2e; --st-surface-2: #1f2338; --st-border: #2b3050; --st-text: #e9ebf5; --st-text-muted: #9aa2be; --st-brand-light: #23264a; --st-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --st-shadow-lg: 0 12px 40px rgba(0,0,0,.5); } } :root[data-theme="dark"] { --st-bg: #0e1020; --st-surface: #171a2e; --st-surface-2: #1f2338; --st-border: #2b3050; --st-text: #e9ebf5; --st-text-muted: #9aa2be; --st-brand-light: #23264a; --st-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --st-shadow-lg: 0 12px 40px rgba(0,0,0,.5); } /* --- 2. Base ------------------------------------------------------------ */ body { background: var(--st-bg) !important; color: var(--st-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif; font-size: 15.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,h5,h6 { color: var(--st-text); letter-spacing: -.015em; font-weight: 700; } a { color: var(--st-brand); text-decoration: none; } a:hover { color: var(--st-brand-dark); } hr { border-color: var(--st-border); opacity: 1; } /* Bootstrap surfaces re-pointed at the tokens, so tool_view.php inherits dark mode and the new palette with no markup changes. */ .card, .bg-white, .modal-content, .list-group-item, .accordion-item { background-color: var(--st-surface) !important; color: var(--st-text); border-color: var(--st-border) !important; } .bg-light, .table > :not(caption) > * > * { background-color: var(--st-surface-2) !important; } .text-muted { color: var(--st-text-muted) !important; } .text-dark { color: var(--st-text) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--st-border) !important; } .form-control, .form-select, .input-group-text { background-color: var(--st-surface); border-color: var(--st-border); color: var(--st-text); border-radius: var(--st-radius-sm); padding: .6rem .85rem; transition: border-color var(--st-ease), box-shadow var(--st-ease); } .form-control:focus, .form-select:focus { background-color: var(--st-surface); color: var(--st-text); border-color: var(--st-brand); box-shadow: var(--st-ring); } .form-control::placeholder { color: var(--st-text-muted); opacity: .75; } .btn { border-radius: var(--st-radius-sm); font-weight: 600; transition: all var(--st-ease); } .btn-primary { background: var(--st-brand); border-color: var(--st-brand); box-shadow: 0 1px 2px rgba(16,20,45,.08); } .btn-primary:hover, .btn-primary:focus { background: var(--st-brand-dark); border-color: var(--st-brand-dark); transform: translateY(-1px); } .btn-primary:focus-visible { box-shadow: var(--st-ring); } .badge.bg-primary { background: var(--st-brand) !important; } :focus-visible { outline: 2px solid var(--st-brand); outline-offset: 2px; } /* --- 3. RTL ------------------------------------------------------------- */ /* The Arabic market is a real differentiator for this script. Logical properties mean one stylesheet serves both directions. */ [dir="rtl"] body, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; } [dir="rtl"] .st-tool-card__icon { margin-inline-end: .9rem; margin-inline-start: 0; } [dir="rtl"] .st-search__icon { inset-inline-start: 1rem; inset-inline-end: auto; } [dir="rtl"] .st-search__input { padding-inline-start: 3rem; padding-inline-end: 1.1rem; } [dir="rtl"] .st-crumbs .bi-chevron-right::before { content: "\f284"; } /* chevron-left */ [dir="rtl"] .me-1,[dir="rtl"] .me-2,[dir="rtl"] .me-3 { margin-right: 0 !important; } [dir="rtl"] .me-1 { margin-left: .25rem !important; } [dir="rtl"] .me-2 { margin-left: .5rem !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; } [dir="rtl"] .border-start { border-left: 0 !important; border-right: 4px solid var(--st-brand) !important; } [dir="rtl"] .text-md-start { text-align: right !important; } [dir="rtl"] .text-md-end { text-align: left !important; } /* --- 4. Header ---------------------------------------------------------- */ .st-header { position: sticky; top: 0; z-index: 1030; height: var(--st-header-h); background: color-mix(in srgb, var(--st-surface) 88%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--st-border); } .st-header__inner { height: var(--st-header-h); display: flex; align-items: center; gap: 1rem; } .st-logo { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.12rem; color: var(--st-text); } .st-logo:hover { color: var(--st-text); } .st-logo__mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 1rem; background: linear-gradient(135deg, var(--st-brand), var(--st-accent)); } .st-logo__mark--img { background: none; } .st-logo__mark--img img { width: 100%; height: 100%; display: block; } .st-nav { display: flex; align-items: center; gap: .15rem; margin-inline-start: .75rem; } .st-nav__link { padding: .5rem .8rem; border-radius: var(--st-radius-sm); color: var(--st-text-muted); font-weight: 600; font-size: .93rem; transition: background var(--st-ease), color var(--st-ease); } .st-nav__link:hover, .st-nav__link[aria-expanded="true"] { background: var(--st-surface-2); color: var(--st-text); } .st-nav__link.is-active { color: var(--st-brand); background: var(--st-brand-light); } /* Mega menu — every category one click from anywhere. This is what keeps visitors moving between tools instead of bouncing. */ .st-mega { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: var(--st-header-h); background: var(--st-surface); border-bottom: 1px solid var(--st-border); box-shadow: var(--st-shadow-lg); padding: 1.5rem 0; display: none; } .st-mega.is-open { display: block; animation: stFade var(--st-ease); } @keyframes stFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .st-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; } .st-mega__cat { font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--st-text-muted); margin-bottom: .55rem; } .st-mega__item { display: block; padding: .32rem 0; font-size: .89rem; color: var(--st-text); } .st-mega__item:hover { color: var(--st-brand); } .st-theme-toggle { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-surface); color: var(--st-text-muted); cursor: pointer; transition: all var(--st-ease); } .st-theme-toggle:hover { color: var(--st-brand); border-color: var(--st-brand); } /* --- 5. Hero + search --------------------------------------------------- */ .st-hero { padding: 4rem 0 3rem; text-align: center; position: relative; overflow: hidden; } .st-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--st-brand) 12%, transparent), transparent 70%), radial-gradient(40% 40% at 85% 10%, color-mix(in srgb, var(--st-accent) 10%, transparent), transparent 70%); } .st-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: .8rem; } .st-hero__lead { color: var(--st-text-muted); max-width: 620px; margin: 0 auto 2rem; font-size: 1.05rem; } .st-hero__grad { background: linear-gradient(120deg, var(--st-brand), var(--st-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .st-search { position: relative; max-width: 620px; margin: 0 auto; } .st-search__icon { position: absolute; inset-inline-start: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--st-text-muted); pointer-events: none; font-size: 1.05rem; } .st-search__input { width: 100%; padding: 1rem 1.1rem 1rem 3rem; border: 1px solid var(--st-border); border-radius: 999px; background: var(--st-surface); color: var(--st-text); font-size: 1rem; box-shadow: var(--st-shadow); transition: border-color var(--st-ease), box-shadow var(--st-ease); } .st-search__input:focus { outline: none; border-color: var(--st-brand); box-shadow: var(--st-ring); } .st-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 2.2rem; margin-top: 2rem; } .st-stats__n { font-size: 1.5rem; font-weight: 800; color: var(--st-brand); line-height: 1; } .st-stats__l { font-size: .78rem; color: var(--st-text-muted); text-transform: uppercase; letter-spacing: .06em; } /* --- 6. Category tabs --------------------------------------------------- */ .st-tabs { display: flex; gap: .45rem; overflow-x: auto; padding: .3rem 0 1.4rem; scrollbar-width: none; -ms-overflow-style: none; } .st-tabs::-webkit-scrollbar { display: none; } .st-tab { flex: 0 0 auto; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--st-border); background: var(--st-surface); color: var(--st-text-muted); font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all var(--st-ease); } .st-tab:hover { border-color: var(--st-brand); color: var(--st-brand); } .st-tab.is-active { background: var(--st-brand); border-color: var(--st-brand); color: #fff; } /* --- 7. Tool grid ------------------------------------------------------- */ .st-section-head { display: flex; align-items: baseline; gap: .7rem; margin: 2.2rem 0 1rem; } .st-section-head h2 { font-size: 1.15rem; margin: 0; } .st-section-head span { font-size: .8rem; color: var(--st-text-muted); } .st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: .9rem; } .st-tool-card { display: flex; align-items: flex-start; gap: .9rem; padding: 1.05rem; height: 100%; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); color: var(--st-text); transition: transform var(--st-ease), box-shadow var(--st-ease), border-color var(--st-ease); } .st-tool-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--st-brand) 45%, var(--st-border)); box-shadow: var(--st-shadow); color: var(--st-text); } .st-tool-card__icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; font-size: 1.15rem; background: var(--st-brand-light); color: var(--st-brand); transition: background var(--st-ease), color var(--st-ease); } .st-tool-card:hover .st-tool-card__icon { background: var(--st-brand); color: #fff; } .st-tool-card__title { font-weight: 700; font-size: .95rem; margin-bottom: .18rem; } .st-tool-card__desc { font-size: .82rem; color: var(--st-text-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .st-empty { text-align: center; padding: 4rem 1rem; color: var(--st-text-muted); } .st-empty i { font-size: 2.4rem; opacity: .5; } /* --- 8. Tool page shell ------------------------------------------------- */ .st-crumbs { font-size: .82rem; color: var(--st-text-muted); padding: 1.1rem 0 .3rem; } .st-crumbs a { color: var(--st-text-muted); } .st-crumbs a:hover { color: var(--st-brand); } .st-crumbs .bi { font-size: .7rem; margin: 0 .35rem; opacity: .6; } .st-tool-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; } .st-tool-head__icon { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--st-radius-sm); font-size: 1.45rem; color: #fff; background: linear-gradient(135deg, var(--st-brand), var(--st-accent)); } .st-tool-head h1 { font-size: 1.5rem; margin: 0 0 .15rem; } .st-tool-head p { margin: 0; color: var(--st-text-muted); font-size: .9rem; } /* The SEO body under each tool — this is what earns organic traffic. One shared template page ranks for nothing. */ .st-seo { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--st-border); } .st-seo h2 { font-size: 1.2rem; margin: 1.8rem 0 .7rem; } .st-seo h3 { font-size: 1.02rem; margin: 1.4rem 0 .5rem; } .st-seo p, .st-seo li { color: var(--st-text-muted); font-size: .93rem; } .st-seo ul, .st-seo ol { padding-inline-start: 1.3rem; } .st-faq__q { width: 100%; text-align: start; padding: .95rem 1.1rem; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius-sm); color: var(--st-text); font-weight: 600; font-size: .93rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: border-color var(--st-ease); } .st-faq__q:hover { border-color: var(--st-brand); } .st-faq__a { padding: .2rem 1.1rem 1rem; color: var(--st-text-muted); font-size: .9rem; display: none; } .st-faq__item.is-open .st-faq__a { display: block; } .st-faq__item.is-open .st-faq__q .bi { transform: rotate(180deg); } .st-faq__q .bi { transition: transform var(--st-ease); font-size: .8rem; } .st-faq__item { margin-bottom: .6rem; } /* --- 9. Ads ------------------------------------------------------------- */ .st-ad { max-width: 970px; margin: 1.5rem auto; text-align: center; min-height: 90px; } .st-ad:empty { display: none; } /* --- 10. Footer --------------------------------------------------------- */ .st-footer { background: var(--st-surface); border-top: 1px solid var(--st-border); margin-top: auto; padding: 3rem 0 1.5rem; } /* Brand column + five link columns side by side on a computer. (The old "1.6fr repeat(auto-fit, ...)" rule was invalid CSS — auto-fit cannot be mixed with fr tracks — so browsers dropped it and stacked every column.) */ .st-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 2rem 1.5rem; } @media (max-width: 1199px) { .st-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .st-footer__brand { grid-column: 1 / -1; } } .st-footer h4 { font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--st-text-muted); margin-bottom: .8rem; } .st-footer a { display: block; padding: .22rem 0; font-size: .87rem; color: var(--st-text-muted); } .st-footer a:hover { color: var(--st-brand); } .st-footer__bottom { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--st-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; font-size: .82rem; color: var(--st-text-muted); } /* --- 11. Responsive ----------------------------------------------------- */ @media (max-width: 991px) { .st-nav, .st-mega { display: none !important; } .st-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } } @media (max-width: 640px) { :root { --st-header-h: 58px; } .st-hero { padding: 2.5rem 0 2rem; } .st-grid { grid-template-columns: 1fr; } .st-stats { gap: 1.4rem; } .st-footer__grid { grid-template-columns: 1fr 1fr; } .st-footer__brand { grid-column: 1 / -1; } .container, .container-fluid { padding-inline: 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .st-tool-card:hover, .btn-primary:hover { transform: none; } } /* --- 12. Print ---------------------------------------------------------- */ @media print { .st-header, .st-footer, .st-ad, .st-search, .st-tabs { display: none !important; } body { background: #fff !important; } } /* --- 13. PDF workbench: full width ------------------------------------- */ /* The PDF suite renders the shared tool shell, but it needs the whole row: its picker grid is 7 categories wide and is unusable in a 2/3 column. */ body.is-pdf-suite .row.gy-4 > .col-lg-8 { flex: 0 0 100%; max-width: 100%; width: 100%; } body.is-pdf-suite .row.gy-4 > .col-lg-4 { display: none; } /* Dark mode for the PDF picker, which carries its own hard-coded palette. */ :root[data-theme="dark"] .pdf-tool-card, :root[data-theme="dark"] .pdf-workbench, :root[data-theme="dark"] .drop-zone { background: var(--st-surface) !important; border-color: var(--st-border) !important; color: var(--st-text) !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pdf-tool-card, :root:not([data-theme="light"]) .pdf-workbench, :root:not([data-theme="light"]) .drop-zone { background: var(--st-surface) !important; border-color: var(--st-border) !important; color: var(--st-text) !important; } } /* The card the current page is for. */ .pdf-tool-card.active { position: relative; } .pdf-tool-card.active::after { content: ""; position: absolute; inset-inline-start: 0; top: 12%; bottom: 12%; width: 3px; border-radius: 3px; background: var(--st-brand); } /* Picker grid: seven categories of unequal length. A Bootstrap row wraps them into ragged rows with big empty gaps, so they flow in CSS columns instead. */ .pdf-tool-columns { column-count: 4; column-gap: 1.25rem; } .pdf-tool-columns > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; break-inside: avoid; page-break-inside: avoid; display: inline-block; margin-bottom: 1.5rem; } @media (max-width: 1199px) { .pdf-tool-columns { column-count: 3; } } @media (max-width: 860px) { .pdf-tool-columns { column-count: 2; } } @media (max-width: 560px) { .pdf-tool-columns { column-count: 1; } } /* ========================================================================== جود — PDF-first home page additions ========================================================================== */ .st-section-head h3 { font-size: 1.15rem; margin: 0; } .st-hero__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin: 0 auto 1.6rem; } .st-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 0 0 2.2rem; } .st-quick__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.1rem .75rem; text-align: center; text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--st-text); background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); box-shadow: var(--st-shadow); transition: transform var(--st-ease), border-color var(--st-ease); } .st-quick__item i { font-size: 1.7rem; color: var(--st-brand); } .st-quick__item:hover { transform: translateY(-2px); border-color: var(--st-brand); color: var(--st-brand); } .st-block-head { margin: 1rem 0 1rem; scroll-margin-top: calc(var(--st-header-h) + 12px); } .st-block-head h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .25rem; } .st-block-head p { color: var(--st-text-muted); margin: 0; } .st-block-head--more { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--st-border); } .st-block-head--more h2 { font-size: 1.2rem; color: var(--st-text-muted); } .st-scan-promo { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 2.8rem 0 0; padding: 1.8rem; border-radius: var(--st-radius); background: linear-gradient(120deg, var(--st-brand), var(--st-accent)); color: #fff; } .st-scan-promo__icon { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 1.9rem; } .st-scan-promo__body { flex: 1 1 320px; } .st-scan-promo__body h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .35rem; color: #fff; } .st-scan-promo__body p { margin: 0; opacity: .92; } /* Arabic letters must stay joined: letter-spacing pulls cursive script apart. */ [dir="rtl"] * { letter-spacing: 0 !important; } /* PDF workbench on phones: the page nests two containers plus a padded card, which left barely 60% of a phone's width for the actual tool. */ @media (max-width: 576px) { body.is-pdf-suite .container-fluid.bg-light { padding-inline: 0; } body.is-pdf-suite .container-fluid.bg-light > .container { padding-inline: 8px; } #workbenchCard .card-header, #workbenchCard .card-body { padding: 1rem !important; } #workbenchCard .card-header .badge { white-space: normal; text-align: start; line-height: 1.5; } } /* Language switcher */ .st-lang-btn { width: auto; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .6rem; } .st-lang-btn__code { font-size: .72rem; font-weight: 800; letter-spacing: .5px; } .st-lang-menu { min-width: 9rem; } .st-lang-menu .dropdown-item.active { background: var(--st-brand); }