/* ============================================================ Tools Hub — E-Mock unified stylesheet Loaded by every mockup. Light + dark via [data-theme] on . Toggle: document.documentElement.dataset.theme = 'dark' | 'light' ============================================================ */ /* === THEME TOKENS === */ :root, [data-theme="dark"] { --primary: #FA8617; --primary-2: #ff5cb4; --secondary: #b459f5; --accent-grad: linear-gradient(135deg, #FA8617 0%, #ff5cb4 50%, #b459f5 100%); --bg-base: #120e30; --bg-1: #1a1545; --aurora-1: rgba(99, 90, 255, .55); --aurora-2: rgba(180, 89, 245, .45); --aurora-3: rgba(214, 51, 232, .30); --surface: linear-gradient(160deg, rgba(146, 140, 255, .18), rgba(146, 140, 255, .10)); --surface-flat: rgba(255, 255, 255, .07); --surface-card: linear-gradient(145deg, #2a1a55 0%, #5b2a8a 55%, #7a2e8f 100%); --surface-card-hover: linear-gradient(145deg, #34216a 0%, #6c34a3 55%, #9038ad 100%); --text: #e7e9f5; --heading: #f6f7fc; --muted: #a6abc9; --border: rgba(160, 150, 255, .20); --border-hi: rgba(206, 186, 255, .55); --shadow: 0 6px 14px -6px rgba(40,28,90,.40), 0 16px 30px -12px rgba(40,28,90,.45); --shadow-hover: 0 18px 30px -10px rgba(180, 89, 245, .35); --header-bg: rgba(18, 14, 48, 0.75); --card-name: #fff; --input-bg: rgba(255, 255, 255, .06); --input-border: rgba(255, 255, 255, .12); --input-focus-shadow: 0 0 0 3px rgba(250, 134, 23, .25); --table-row-hover: rgba(255, 255, 255, .04); --radius: 14px; --radius-lg: 18px; --success: #10b981; --warning: #f59e0b; --info: #3b82f6; --danger: #ef4444; } [data-theme="light"] { --primary: #FA8617; --primary-2: #ff5cb4; --secondary: #b459f5; --bg-base: #f7f5fd; --bg-1: #ece6fa; --aurora-1: rgba(99, 90, 255, .15); --aurora-2: rgba(180, 89, 245, .12); --aurora-3: rgba(214, 51, 232, .08); --surface: #ffffff; --surface-flat: #ffffff; --surface-card: #ffffff; --surface-card-hover: #fbfafd; --text: #1f1b3b; --heading: #14112b; --muted: #6b6789; --border: rgba(80, 70, 140, .15); --border-hi: rgba(80, 70, 140, .30); --shadow: 0 2px 8px rgba(80, 70, 140, .08); --shadow-hover: 0 12px 28px rgba(180, 89, 245, .18); --header-bg: rgba(255, 255, 255, .85); --card-name: #14112b; --input-bg: #fbfafd; --input-border: rgba(80, 70, 140, .15); --input-focus-shadow: 0 0 0 3px rgba(250, 134, 23, .15); --table-row-hover: rgba(80, 70, 140, .04); } /* === RESET === */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "Helvetica Neue", sans-serif; background: transparent; color: var(--text); line-height: 1.55; overflow-x: hidden; min-height: 100vh; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 18% 8%, var(--aurora-1) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 85% 92%, var(--aurora-2) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 55% 45%, var(--aurora-3) 0%, transparent 70%), linear-gradient(150deg, var(--bg-base) 0%, var(--bg-1) 45%, var(--bg-base) 100%); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; height: auto; } /* === LAYOUT === */ .container { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .container-small { max-width: 720px; margin: 0 auto; padding: 0 24px; } /* === HEADER === */ .site-header { background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 14px 0; position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .logo { font-weight: 800; font-size: 19px; color: var(--primary); text-decoration: none; } .logo .logo-emoji { margin-right: 4px; } .site-nav { display: flex; align-items: center; gap: 22px; } .site-nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 14px; } .site-nav a:hover, .site-nav a.active { color: var(--primary); } .theme-toggle { background: rgba(0, 0, 0, .04); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; } [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, .08); } .theme-toggle:hover { border-color: var(--primary); } /* === BUTTONS === */ .btn-primary { background: var(--primary); color: #fff; padding: 8px 18px; border-radius: 8px; border: none; text-decoration: none; font-weight: 600; font-size: 13px; box-shadow: 0 4px 14px rgba(250, 134, 23, 0.35); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: transform .2s, box-shadow .2s; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(250, 134, 23, 0.45); } .btn-ghost { background: transparent; color: var(--text); padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border); text-decoration: none; font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all .2s; } .btn-ghost:hover { border-color: var(--primary); color: var(--primary); } .btn-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-grad); color: #fff; padding: 14px 36px; border: none; border-radius: 980px; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 8px 24px rgba(250, 134, 23, .40); transition: transform .2s, box-shadow .2s; } .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(250, 134, 23, .55); } .btn-cta.btn-lg { padding: 16px 40px; font-size: 17px; } .see-all-btn { display: inline-flex; align-items: center; gap: 6px; color: #fff; background: var(--accent-grad); font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 16px; border-radius: 980px; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 14px rgba(250, 134, 23, .35); white-space: nowrap; } .see-all-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(250, 134, 23, .50); } .btn-danger { background: var(--danger); color: #fff; padding: 8px 16px; border-radius: 8px; border: none; font-weight: 600; font-size: 13px; cursor: pointer; } /* === BADGES / PILLS === */ .badge-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(250, 134, 23, .12); border: 1px solid rgba(250, 134, 23, .30); color: var(--primary); padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .badge-pill .live-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 12px var(--success); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .meta-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, .04); color: var(--muted); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.4px; border: 1px solid var(--border); } [data-theme="dark"] .meta-tag { background: rgba(255, 255, 255, .08); } .meta-tag.auto::before { content: ""; width: 5px; height: 5px; background: var(--success); border-radius: 50%; box-shadow: 0 0 8px var(--success); } .tc-badge { position: absolute; top: 8px; right: 8px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.4px; box-shadow: 0 2px 8px rgba(250, 134, 23, .4); } .status-badge { display: inline-block; padding: 3px 10px; border-radius: 980px; font-size: 11px; font-weight: 600; } .status-badge.active { background: rgba(16, 185, 129, .15); color: var(--success); border: 1px solid rgba(16, 185, 129, .3); } .status-badge.pending { background: rgba(245, 158, 11, .15); color: var(--warning); border: 1px solid rgba(245, 158, 11, .3); } .status-badge.failed { background: rgba(239, 68, 68, .15); color: var(--danger); border: 1px solid rgba(239, 68, 68, .3); } .status-badge.inactive { background: var(--surface-flat); color: var(--muted); border: 1px solid var(--border); } /* === BREADCRUMB === */ .breadcrumb { padding: 16px 0; font-size: 13px; color: var(--muted); } .breadcrumb a { color: var(--muted); text-decoration: none; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb .sep { margin: 0 8px; opacity: 0.5; } .breadcrumb .current { color: var(--heading); font-weight: 600; } /* === INTRO / HERO === */ .intro { padding: 48px 0 24px; text-align: center; } .intro h1 { font-size: 52px; font-weight: 800; letter-spacing: -1.2px; color: var(--heading); margin-bottom: 16px; line-height: 1.05; } [data-theme="dark"] .intro h1 { text-shadow: 0 2px 32px rgba(180, 89, 245, .35); } .intro h1 .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .intro p.lead { font-size: 18px; color: var(--muted); max-width: 640px; margin: 0 auto 28px; line-height: 1.6; } .intro .trust-line { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 4px; } .intro .trust-line span { display: inline-flex; align-items: center; gap: 6px; } .intro .trust-line strong { color: var(--heading); font-weight: 700; } .intro .badge-pill { margin-bottom: 16px; } /* === SECTION HEAD === */ .row-section { padding: 28px 0; position: relative; } .row-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 12px; flex-wrap: wrap; gap: 12px; } .row-head .left h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; color: var(--heading); display: flex; align-items: center; gap: 10px; text-decoration: none; } a.row-title-link { text-decoration: none; } a.row-title-link h2:hover { color: var(--primary); } a.row-title-link h2:hover .row-arrow { transform: translateX(4px); } .row-arrow { color: var(--primary); font-size: 18px; transition: transform .2s ease; } .row-head .left .row-sub { font-size: 13px; color: var(--muted); margin-top: 4px; padding-left: 32px; } .row-head h2 .emoji { font-size: 24px; } .row-head .right { display: flex; align-items: center; gap: 12px; } /* === TOOL CARD === */ .tool-card { background: var(--surface-card); border: 1.5px solid var(--border); border-top-color: var(--border-hi); border-radius: var(--radius); padding: 18px 14px; text-decoration: none; color: var(--text); transition: transform .25s, box-shadow .25s, border-color .25s, background .25s; display: flex; flex-direction: column; align-items: flex-start; min-height: 130px; flex-shrink: 0; position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, var(--shadow); } [data-theme="light"] .tool-card { box-shadow: var(--shadow); border: 1px solid var(--border); } .tool-card:hover { transform: translateY(-3px); background: var(--surface-card-hover); border-color: var(--border-hi); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, var(--shadow-hover); } [data-theme="light"] .tool-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); } .tc-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 10px; box-shadow: 0 0 18px rgba(250, 134, 23, .18); } [data-theme="light"] .tc-icon { background: rgba(250, 134, 23, .12); box-shadow: none; } .tc-name { font-weight: 600; font-size: 14px; color: var(--card-name); margin-bottom: 6px; line-height: 1.3; } [data-theme="dark"] .tc-name { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); } .tc-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.4; } .tc-open { display: inline-block; background: rgba(250, 134, 23, .15); color: var(--primary); padding: 3px 10px; border-radius: 980px; font-size: 10.5px; font-weight: 600; margin-top: auto; border: 1px solid rgba(250, 134, 23, .25); } .tool-card:hover .tc-open { background: var(--primary); color: #fff; border-color: var(--primary); } /* === MARQUEES === */ .marquee-wrap { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); } .marquee { display: flex; gap: 14px; animation: marquee-scroll 35s linear infinite; width: max-content; padding: 4px 0 14px; } .marquee:hover { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee .tool-card { width: 180px; } .marquee-reverse { display: flex; gap: 14px; animation: marquee-scroll-reverse 35s linear infinite; width: max-content; padding: 4px 0 14px; } .marquee-reverse:hover { animation-play-state: paused; } @keyframes marquee-scroll-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } } .marquee-reverse .tool-card { width: 200px; } /* === PEEK CAROUSEL === */ .peek-carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 0 14px; mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); -webkit-overflow-scrolling: touch; } .peek-carousel::-webkit-scrollbar { display: none; } .peek-carousel .tool-card { flex: 0 0 200px; scroll-snap-align: start; } /* === GRID PATTERNS === */ .tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1100px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .tools-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (max-width: 540px) { .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* === CATEGORY HERO === */ .cat-hero { background: linear-gradient(135deg, rgba(250, 134, 23, .15), rgba(180, 89, 245, .15)); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 22px; padding: 36px 40px; margin: 8px 0 28px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset; } [data-theme="light"] .cat-hero { box-shadow: var(--shadow); } .cat-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.8px; color: var(--heading); margin-bottom: 12px; line-height: 1.1; } .cat-hero p { font-size: 16px; color: var(--muted); max-width: 600px; line-height: 1.6; margin-bottom: 18px; } .cat-hero-stats { display: flex; gap: 24px; font-size: 13px; color: var(--muted); flex-wrap: wrap; } .cat-hero-stats strong { color: var(--heading); font-weight: 700; font-size: 16px; display: block; } .cat-hero-visual { font-size: 120px; line-height: 1; opacity: 0.92; } @media (max-width: 768px) { .cat-hero { grid-template-columns: 1fr; padding: 24px 22px; } .cat-hero h1 { font-size: 28px; } .cat-hero-visual { font-size: 64px; } } /* === FILTER BAR / CHIPS === */ .filter-bar { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 16px; flex-wrap: wrap; gap: 12px; } .filter-chips { display: flex; gap: 8px; flex-wrap: wrap; } .filter-search { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); padding: 9px 14px; border-radius: 10px; font-size: 14px; height: 40px; } .filter-search:focus { border-color: var(--primary); box-shadow: var(--input-focus-shadow); outline: none; } .chip { background: var(--surface-flat); border: 1px solid var(--border); color: var(--text); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all .15s; } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); } /* === TOOL HEADER === */ .tool-header { text-align: center; padding: 12px 0 28px; } .tool-header .tool-icon-hero { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(250, 134, 23, .25), rgba(180, 89, 245, .25)); display: flex; align-items: center; justify-content: center; font-size: 38px; box-shadow: 0 0 32px rgba(250, 134, 23, .30); border: 1px solid var(--border-hi); } .tool-header h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.8px; color: var(--heading); margin-bottom: 10px; } [data-theme="dark"] .tool-header h1 { text-shadow: 0 2px 24px rgba(180, 89, 245, .25); } .tool-header p.lead { font-size: 16px; color: var(--muted); max-width: 640px; margin: 0 auto 16px; line-height: 1.6; } .tool-header .meta { display: inline-flex; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; justify-content: center; } .tool-header .meta span { display: inline-flex; align-items: center; gap: 4px; } /* === TOOL PANEL === */ .tool-panel { background: var(--surface); border: 1.5px solid var(--border); border-top-color: var(--border-hi); border-radius: 20px; padding: 32px; margin: 8px 0 32px; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 16px 32px -16px rgba(40, 28, 90, .40); } [data-theme="light"] .tool-panel { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, var(--shadow); background: var(--surface); } @media (max-width: 540px) { .tool-panel { padding: 18px; } } /* === DROP ZONE === */ .drop-zone { background: rgba(250, 134, 23, .06); border: 2px dashed rgba(250, 134, 23, .35); border-radius: 16px; padding: 56px 24px; text-align: center; transition: all .25s; cursor: pointer; } .drop-zone:hover { background: rgba(250, 134, 23, .12); border-color: var(--primary); transform: scale(1.005); } .drop-zone .upload-icon { font-size: 56px; margin-bottom: 12px; line-height: 1; opacity: 0.85; } .drop-zone h3 { font-size: 20px; font-weight: 700; color: var(--heading); margin-bottom: 6px; } .drop-zone p { color: var(--muted); font-size: 14px; margin-bottom: 20px; } .drop-zone .file-types { display: inline-block; background: rgba(0, 0, 0, .04); border: 1px solid var(--border); color: var(--muted); padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; } [data-theme="dark"] .drop-zone .file-types { background: rgba(255, 255, 255, .08); } /* === FILE QUEUE === */ .file-queue { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .file-row { display: flex; align-items: center; gap: 14px; background: var(--surface-flat); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; } .file-row .file-icon { font-size: 22px; } .file-row .file-name { flex: 1; font-weight: 600; color: var(--heading); font-size: 14px; } .file-row .file-size { color: var(--muted); font-size: 12px; } .file-row .file-remove { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 6px; } .file-row .file-remove:hover { background: rgba(255,255,255,.08); color: var(--danger); } /* === ACTION BAR === */ .action-bar { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; } .action-bar .file-count { color: var(--muted); font-size: 13px; margin-right: auto; } /* === FORMS === */ .form-group { margin-bottom: 18px; } .form-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--heading); margin-bottom: 7px; } .form-control { width: 100%; padding: 11px 14px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 10px; color: var(--text); font-size: 14px; font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s; } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: var(--input-focus-shadow); background: var(--input-bg); } .form-control::placeholder { color: var(--muted); opacity: 0.7; } textarea.form-control { min-height: 100px; resize: vertical; line-height: 1.55; } select.form-control { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) center, calc(100% - 10px) center; background-size: 5px 5px; background-repeat: no-repeat; } .form-help { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; } .form-error { font-size: 12px; color: var(--danger); margin-top: 6px; } .input-group { display: flex; gap: 8px; align-items: stretch; } .input-group .form-control { flex: 1; } .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0; } .checkbox-row input[type="checkbox"], .checkbox-row input[type="radio"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--primary); } .checkbox-row label { font-size: 14px; color: var(--text); cursor: pointer; line-height: 1.5; } /* === TABLES (admin) === */ .data-table { width: 100%; border-collapse: collapse; background: var(--surface-flat); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); } [data-theme="light"] .data-table { background: var(--surface); } .data-table th { text-align: left; padding: 14px 16px; background: rgba(0, 0, 0, .04); color: var(--heading); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } [data-theme="dark"] .data-table th { background: rgba(255, 255, 255, .04); } .data-table td { padding: 14px 16px; color: var(--text); font-size: 14px; border-bottom: 1px solid var(--border); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--table-row-hover); } .data-table .actions { display: flex; gap: 6px; } .data-table .icon-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-flat); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; } .data-table .icon-btn:hover { color: var(--primary); border-color: var(--primary); } .data-table .icon-btn.delete:hover { color: var(--danger); border-color: var(--danger); } /* === FAQ ACCORDION === */ .faq-item { background: var(--surface-flat); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } .faq-q { padding: 16px 18px; cursor: pointer; font-weight: 600; color: var(--heading); font-size: 15px; display: flex; justify-content: space-between; align-items: center; transition: background .15s; list-style: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { background: var(--table-row-hover); } .faq-q .chev { color: var(--primary); transition: transform .25s; } .faq-item[open] .faq-q .chev { transform: rotate(180deg); } .faq-a { padding: 0 18px 16px; color: var(--muted); line-height: 1.6; font-size: 14px; } /* === STEPS === */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 768px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .steps { grid-template-columns: 1fr; } } .step { background: linear-gradient(160deg, rgba(146, 140, 255, .12), rgba(146, 140, 255, .04)); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 14px; padding: 22px 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset; } [data-theme="light"] .step { background: var(--surface); box-shadow: var(--shadow); } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent-grad); color: #fff; border-radius: 50%; font-weight: 800; font-size: 14px; margin-bottom: 12px; box-shadow: 0 4px 12px rgba(250, 134, 23, .30); } .step h3 { font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 6px; } .step p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; } /* === FEATURES GRID === */ .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; } @media (max-width: 540px) { .features-grid { grid-template-columns: 1fr; } } .feature-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--surface-flat); border: 1px solid var(--border); border-radius: 12px; } .feature-row .feature-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(250, 134, 23, .15); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .feature-row .feature-text strong { display: block; color: var(--heading); font-size: 14px; margin-bottom: 2px; } .feature-row .feature-text { color: var(--muted); font-size: 13px; line-height: 1.5; } /* === WHY BLOCK (homepage features) === */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 768px) { .why-grid { grid-template-columns: 1fr; } } .why-card { background: linear-gradient(160deg, rgba(146, 140, 255, .14), rgba(146, 140, 255, .06)); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 18px; padding: 28px 24px; text-align: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset; } [data-theme="light"] .why-card { background: var(--surface); box-shadow: var(--shadow); } .why-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(250, 134, 23, .25), rgba(180, 89, 245, .25)); display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 0 24px rgba(250, 134, 23, .15); } .why-card h3 { font-size: 16px; font-weight: 700; color: var(--heading); margin-bottom: 8px; } .why-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; } /* === CATEGORIES STRIP === */ .cat-strip { padding: 32px 0 60px; } .cat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; } @media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 768px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } .cat-link { background: linear-gradient(160deg, rgba(146, 140, 255, .15), rgba(146, 140, 255, .08)); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 14px; padding: 18px 10px; text-align: center; text-decoration: none; color: var(--text); transition: all .25s; display: block; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset; } [data-theme="light"] .cat-link { background: var(--surface); box-shadow: var(--shadow); } .cat-link:hover { border-color: var(--primary); transform: translateY(-3px); background: linear-gradient(160deg, rgba(250, 134, 23, .15), rgba(180, 89, 245, .15)); box-shadow: var(--shadow-hover); } .cl-icon { width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 12px; background: rgba(255, 255, 255, .10); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 24px; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif; } [data-theme="light"] .cl-icon { background: rgba(250, 134, 23, .12); } .cl-name { font-size: 13px; font-weight: 600; display: block; margin-bottom: 2px; color: var(--card-name); } .cl-count { font-size: 11px; color: var(--muted); display: block; } /* === FINAL CTA (homepage / various) === */ .final-cta { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; background: radial-gradient(ellipse 80% 70% at 100% 50%, rgba(180, 89, 245, .25) 0%, transparent 60%), linear-gradient(135deg, rgba(250, 134, 23, .12) 0%, rgba(180, 89, 245, .08) 100%); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 22px; padding: 36px 40px; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 12px 32px -16px rgba(180, 89, 245, .40); } [data-theme="light"] .final-cta { background: linear-gradient(135deg, rgba(250, 134, 23, .08) 0%, rgba(180, 89, 245, .06) 100%); box-shadow: var(--shadow); } .final-cta-text h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--heading); margin-bottom: 10px; } .final-cta-text p { color: var(--muted); font-size: 15px; margin-bottom: 18px; max-width: 540px; line-height: 1.55; } .final-cta-visual { font-size: 96px; line-height: 1; opacity: 0.85; } @media (max-width: 768px) { .final-cta { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; } .final-cta-visual { font-size: 64px; } .final-cta-text h2 { font-size: 22px; } } /* === AUTH CARD (login/register) === */ .auth-wrapper { min-height: calc(100vh - 80px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1.5px solid var(--border); border-top-color: var(--border-hi); border-radius: 22px; padding: 36px; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 24px 48px -24px rgba(40, 28, 90, .50); } [data-theme="light"] .auth-card { box-shadow: 0 24px 48px -24px rgba(180, 89, 245, .15), var(--shadow); } .auth-card .auth-logo { text-align: center; margin-bottom: 18px; } .auth-card .auth-logo .logo { font-size: 24px; } .auth-card h1 { font-size: 24px; font-weight: 800; color: var(--heading); text-align: center; margin-bottom: 8px; letter-spacing: -0.3px; } .auth-card .auth-sub { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 24px; } .auth-card .social-btn { width: 100%; padding: 11px 16px; background: var(--surface-flat); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; text-decoration: none; transition: all .15s; margin-bottom: 10px; } .auth-card .social-btn:hover { border-color: var(--primary); } .auth-card .divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .auth-card .divider::before, .auth-card .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .auth-card .auth-footer { text-align: center; margin-top: 24px; color: var(--muted); font-size: 14px; } .auth-card .auth-footer a { color: var(--primary); font-weight: 600; } /* === DASHBOARD SHELL (admin / user) === */ .shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 64px); } .shell-sidebar { background: var(--surface-flat); border-right: 1px solid var(--border); padding: 24px 14px; overflow-y: auto; } .shell-sidebar .sb-section { margin-bottom: 18px; } .shell-sidebar .sb-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; padding: 0 10px; margin-bottom: 6px; } .shell-sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s; } .shell-sidebar a .sb-icon { width: 18px; text-align: center; font-size: 14px; } .shell-sidebar a:hover { background: var(--table-row-hover); } .shell-sidebar a.active { background: rgba(250, 134, 23, .15); color: var(--primary); border-left: 3px solid var(--primary); padding-left: 7px; } .shell-main { padding: 24px 28px; } .shell-main .page-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .shell-main .page-head h1 { font-size: 26px; font-weight: 800; color: var(--heading); margin-bottom: 4px; letter-spacing: -0.3px; } .shell-main .page-head .page-sub { color: var(--muted); font-size: 13px; } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .shell-sidebar { display: none; } } /* === STAT CARDS === */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--surface); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 14px; padding: 20px; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset; } [data-theme="light"] .stat-card { box-shadow: var(--shadow); } .stat-card .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; } .stat-card .stat-value { font-size: 28px; font-weight: 800; color: var(--heading); letter-spacing: -0.5px; } .stat-card .stat-trend { font-size: 12px; color: var(--success); margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; } .stat-card .stat-trend.down { color: var(--danger); } /* === BLOG POST CARD === */ .post-card { background: var(--surface); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: transform .2s, box-shadow .2s, border-color .2s; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, var(--shadow); } .post-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-hover); } .post-card .post-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(250, 134, 23, .25), rgba(180, 89, 245, .25)); display: flex; align-items: center; justify-content: center; font-size: 56px; } .post-card .post-body { padding: 18px 20px; } .post-card .post-cat { font-size: 11px; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; } .post-card .post-title { font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.3; margin-bottom: 8px; } .post-card .post-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; } .post-card .post-meta { font-size: 12px; color: var(--muted); display: flex; gap: 12px; } /* === PRICING / PLAN CARDS === */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .plan-grid { grid-template-columns: 1fr; } } .plan-card { background: var(--surface); border: 1px solid var(--border); border-top-color: var(--border-hi); border-radius: 18px; padding: 28px 24px; position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset, var(--shadow); } [data-theme="light"] .plan-card { box-shadow: var(--shadow); } .plan-card.featured { border: 2px solid var(--primary); transform: scale(1.03); } .plan-card.featured::before { content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent-grad); color: #fff; padding: 4px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .plan-card h3 { font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 8px; } .plan-card .plan-price { font-size: 42px; font-weight: 800; color: var(--heading); letter-spacing: -1px; } .plan-card .plan-price small { font-size: 16px; color: var(--muted); font-weight: 500; } .plan-card .plan-desc { font-size: 13.5px; color: var(--muted); margin: 8px 0 18px; } .plan-card ul { list-style: none; padding: 0; margin: 0 0 24px; } .plan-card ul li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 14px; color: var(--text); } .plan-card ul li::before { content: "✓"; color: var(--success); font-weight: 700; flex-shrink: 0; } /* === EMPTY STATE === */ .empty-state { text-align: center; padding: 60px 30px; background: var(--surface-flat); border: 1px dashed var(--border); border-radius: 16px; color: var(--muted); } .empty-state .empty-icon { font-size: 64px; margin-bottom: 14px; opacity: 0.5; } .empty-state h3 { font-size: 18px; font-weight: 700; color: var(--heading); margin-bottom: 6px; } .empty-state p { font-size: 14px; max-width: 380px; margin: 0 auto 16px; } /* === PAGINATION === */ .pagination { display: flex; gap: 4px; justify-content: center; margin: 32px 0; } .pagination a, .pagination .current { min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 600; font-size: 13px; border: 1px solid var(--border); color: var(--text); text-decoration: none; background: var(--surface-flat); } .pagination a:hover { border-color: var(--primary); color: var(--primary); } .pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); } /* === ABOUT TEXT BLOCK === */ .text-block { background: linear-gradient(160deg, rgba(146, 140, 255, .10), rgba(146, 140, 255, .04)); border: 1px solid var(--border); border-radius: 18px; padding: 40px 60px !important; margin: 32px 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset; color: var(--text); overflow-wrap: break-word; } [theme-mode="light"] .text-block { background: var(--surface); box-shadow: var(--shadow); } .text-block h2, .text-block h3, .text-block h4 { font-weight: 700; color: var(--heading); margin: 18px 0 12px; } .text-block h2 { font-size: 22px; } .text-block h3 { font-size: 18px; } .text-block h4 { font-size: 16px; } .text-block p { color: var(--text); margin-bottom: 12px; line-height: 1.7; font-size: 15px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .text-block ul, .text-block ol { margin: 0 0 14px 22px; color: var(--text); font-size: 15px; line-height: 1.8; } .text-block ul li, .text-block ol li { text-align: justify; text-justify: inter-word; } .text-block li { margin-bottom: 4px; } .text-block strong { color: var(--heading); font-weight: 700; } .text-block a { color: var(--primary); } /* Tablets: still generous breathing room. */ @media (max-width: 900px) { .text-block { padding: 32px 36px !important; } } /* Mobile: drop padding so the box doesn't dwarf the text on narrow viewports. */ @media (max-width: 540px) { .text-block { padding: 22px 22px !important; border-radius: 14px; } } /* When .container-narrow wraps content inside a Bootstrap col it would add a duplicate 24px horizontal padding, misaligning its children with the tool-panel above (which sits flush in the col). Drop the padding when nested; keep max-width centering. */ .col > .container-narrow, .col-12 > .container-narrow, .col-md-12 > .container-narrow { padding-left: 0; padding-right: 0; max-width: 100%; } /* Helper info note inside tool forms — replaces loose . Shows up below uploaders / inputs with a clear E-mock info-box style so the text doesn't float orphaned at the bottom of the panel. */ .helper-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; background: rgba(250, 134, 23, 0.08); border: 1px solid rgba(250, 134, 23, 0.20); border-radius: 10px; color: var(--site-body-text, var(--text)); font-size: 13.5px; line-height: 1.55; } .helper-note-icon { font-size: 16px; flex-shrink: 0; line-height: 1.2; } [theme-mode="dark"] .helper-note { color: #e5e5e5; background: rgba(250, 134, 23, 0.06); border-color: rgba(250, 134, 23, 0.25); } /* Auto-style legacy loose helper text inside tool forms — there are dozens of widgets across the tool blade files (pdf-compressor, lock-pdf, hash-generator, etc.). Repaint them with the same .helper-note appearance so editing each blade isn't needed. */ .form-group > small.text-muted.d-block, .form-group > small.text-muted, .tool-panel .form-group > small.text-muted { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px !important; padding: 12px 14px; background: rgba(250, 134, 23, 0.08); border: 1px solid rgba(250, 134, 23, 0.20); border-radius: 10px; color: var(--site-body-text, var(--text)) !important; font-size: 13.5px; line-height: 1.55; } [theme-mode="dark"] .form-group > small.text-muted, [theme-mode="dark"] .form-group > small.text-muted.d-block, [theme-mode="dark"] .tool-panel .form-group > small.text-muted { color: #e5e5e5 !important; background: rgba(250, 134, 23, 0.06); border-color: rgba(250, 134, 23, 0.25); } .form-group > small.text-muted i.an, .form-group > small.text-muted i.fa { margin-right: 6px; color: var(--site-primary, var(--primary)); } /* === FOOTER === */ .site-footer { padding: 30px 0; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); margin-top: 20px; background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* === MOBILE OVERRIDES === */ @media (max-width: 540px) { .intro h1 { font-size: 30px; } .intro p.lead { font-size: 15px; } .row-head h2 { font-size: 18px; } .marquee .tool-card, .marquee-reverse .tool-card { width: 150px; min-height: 115px; padding: 14px 12px; } .peek-carousel .tool-card { flex: 0 0 160px; min-height: 115px; padding: 14px 12px; } .cat-grid { gap: 8px; } .cl-icon { width: 40px; height: 40px; font-size: 20px; } .cl-name { font-size: 11.5px; } .tool-header h1 { font-size: 28px; } .cat-hero h1 { font-size: 24px; } .auth-card { padding: 24px; } .shell-main { padding: 16px 18px; } .tool-panel { padding: 18px; } .drop-zone { padding: 36px 18px; } } /* === LIVE INTEGRATION OVERRIDES === Added when E-Mock templates were ported to Laravel — handles real icon files (SVG / font icon / image) inside the .tc-icon tile wrapper. */ .tc-icon { flex-shrink: 0; overflow: hidden; } .tc-icon > img, .tc-icon > .tool-svg-icon, .tc-icon > svg { width: 28px; height: 28px; display: block; object-fit: contain; background: transparent; padding: 0; margin: 0; border-radius: 0; box-shadow: none; max-width: none; } .tc-icon > i, .tc-icon > .an, .tc-icon > .an-duotone { font-size: 22px; line-height: 1; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; } /* Make the legacy purple body gradient hide on the new homepage so the E-Mock aurora behind body::before shines through clean. */ body::before { background: radial-gradient(ellipse 90% 70% at 18% 8%, var(--aurora-1) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 85% 92%, var(--aurora-2) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 55% 45%, var(--aurora-3) 0%, transparent 70%), linear-gradient(150deg, var(--bg-base) 0%, var(--bg-1) 45%, var(--bg-base) 100%) !important; } /* Hide the legacy cinematic aurora orbs that unified.css injects — the E-Mock background gradient already provides the depth. */ .u-scene, #cin-scene, .u-orb, .u-orb-1, .u-orb-2, .u-orb-3, .cin-orb, .cin-orb-1, .cin-orb-2, .cin-orb-3, .cin-orb-4, #cin-canvas { display: none !important; } /* Force the body to be transparent (so the gradient on body::before shows). */ body { background: var(--site-background, #fafafa); } [theme-mode="dark"] body { background: var(--site-background, #0a0a0a); } /* === THEME-MODE COMPATIBILITY (live site uses theme-mode= attribute) === The live canvas layout sets theme-mode="light|dark" on , not the data-theme attribute the standalone mockups use. Duplicate the token blocks under [theme-mode=*] so colors flip correctly in BOTH variants. */ [theme-mode="dark"] { --primary: #FA8617; --primary-2: #ff5cb4; --secondary: #b459f5; --accent-grad: linear-gradient(135deg, #FA8617 0%, #ff5cb4 50%, #b459f5 100%); --bg-base: #120e30; --bg-1: #1a1545; --aurora-1: rgba(99, 90, 255, .55); --aurora-2: rgba(180, 89, 245, .45); --aurora-3: rgba(214, 51, 232, .30); --surface: linear-gradient(160deg, rgba(146, 140, 255, .18), rgba(146, 140, 255, .10)); --surface-flat: rgba(255, 255, 255, .07); --surface-card: linear-gradient(145deg, #2a1a55 0%, #5b2a8a 55%, #7a2e8f 100%); --surface-card-hover: linear-gradient(145deg, #34216a 0%, #6c34a3 55%, #9038ad 100%); --text: #e7e9f5; --heading: #f6f7fc; --muted: #a6abc9; --border: rgba(160, 150, 255, .20); --border-hi: rgba(206, 186, 255, .55); --shadow: 0 6px 14px -6px rgba(40,28,90,.40), 0 16px 30px -12px rgba(40,28,90,.45); --shadow-hover: 0 18px 30px -10px rgba(180, 89, 245, .35); --header-bg: rgba(18, 14, 48, 0.75); --card-name: #fff; --input-bg: rgba(255, 255, 255, .06); --input-border: rgba(255, 255, 255, .12); --input-focus-shadow: 0 0 0 3px rgba(250, 134, 23, .25); --table-row-hover: rgba(255, 255, 255, .04); } [theme-mode="light"] { --primary: #FA8617; --primary-2: #ff5cb4; --secondary: #b459f5; --accent-grad: linear-gradient(135deg, #FA8617 0%, #ff5cb4 50%, #b459f5 100%); --bg-base: #f7f5fd; --bg-1: #ece6fa; --aurora-1: rgba(99, 90, 255, .15); --aurora-2: rgba(180, 89, 245, .12); --aurora-3: rgba(214, 51, 232, .08); --surface: #ffffff; --surface-flat: #ffffff; --surface-card: #ffffff; --surface-card-hover: #fbfafd; --text: #1f1b3b; --heading: #14112b; --muted: #6b6789; --border: rgba(80, 70, 140, .15); --border-hi: rgba(80, 70, 140, .30); --shadow: 0 2px 8px rgba(80, 70, 140, .08); --shadow-hover: 0 12px 28px rgba(180, 89, 245, .18); --header-bg: rgba(255, 255, 255, .85); --card-name: #14112b; --input-bg: #fbfafd; --input-border: rgba(80, 70, 140, .15); --input-focus-shadow: 0 0 0 3px rgba(250, 134, 23, .15); --table-row-hover: rgba(80, 70, 140, .04); } /* Theme-mode parity for text shadow + light card tweaks */ [theme-mode="dark"] .tool-card { box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, var(--shadow); } [theme-mode="light"] .tool-card { box-shadow: var(--shadow); border: 1px solid var(--border); } [theme-mode="light"] .tool-card:hover { border-color: var(--primary); } [theme-mode="dark"] .tc-name { text-shadow: 0 1px 6px rgba(0, 0, 0, .35); } [theme-mode="light"] .tc-name { text-shadow: none; } [theme-mode="dark"] .intro h1 { text-shadow: 0 2px 32px rgba(180, 89, 245, .35); } [theme-mode="light"] .intro h1 { text-shadow: none; } [theme-mode="dark"] .tc-icon { background: rgba(255, 255, 255, .10); box-shadow: 0 0 18px rgba(250, 134, 23, .18); } [theme-mode="light"] .tc-icon { background: rgba(250, 134, 23, .12); box-shadow: none; } [theme-mode="dark"] .tool-header h1 { text-shadow: 0 2px 24px rgba(180, 89, 245, .25); } [theme-mode="light"] .tool-header h1 { text-shadow: none; } /* ============================================================ MOBILE BREAKPOINTS for new E-mock components (2026-06-20) Covers page-head, filter-bar, data-table, checkout-grid, invoice-header-grid, roles-grid, cat-grid down to 375px. ============================================================ */ @media (max-width: 768px) { .page-head { flex-direction: column; align-items: flex-start; gap: 12px; } .page-head > div:last-child { width: 100%; flex-wrap: wrap; } .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; } .filter-bar > div { margin-left: 0 !important; } .filter-bar form { width: 100%; } .filter-bar .filter-search { min-width: 0 !important; } /* horizontal scroll for any data-table that overflows */ .tool-panel { overflow-x: auto; } .data-table { min-width: 600px; } .data-table th, .data-table td { padding: 10px 12px !important; font-size: 13px; } /* status badge wrap */ .status-badge { white-space: nowrap; } /* page-head h1 smaller */ .page-head h1 { font-size: 24px !important; } .page-sub { font-size: 13px; } } @media (max-width: 540px) { .page-head h1 { font-size: 20px !important; } .page-head .btn-cta { padding: 8px 14px !important; font-size: 12px !important; } .cat-grid { grid-template-columns: repeat(2, 1fr) !important; } /* data-table wraps text more tightly */ .data-table th { font-size: 11px !important; letter-spacing: 0.3px; } .data-table td { font-size: 12.5px !important; } /* icon-btn smaller */ .icon-btn { padding: 6px 8px !important; font-size: 13px !important; } .actions { gap: 2px !important; flex-wrap: nowrap; } /* tools-grid 2 cols at small */ .tools-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .tc-name { font-size: 13px; } .tc-desc { display: none; } /* save space */ /* marquee cards smaller */ .row-section { padding: 18px 0; } .row-head h2 { font-size: 20px; } } @media (max-width: 420px) { .tools-grid { grid-template-columns: 1fr !important; } .cat-grid { grid-template-columns: 1fr !important; } /* auth card tighter */ .auth-card { padding: 20px 16px !important; } .auth-card h1 { font-size: 20px !important; } /* invoice + checkout 1-col */ .checkout-grid { grid-template-columns: 1fr !important; } .invoice-header-grid, .invoice-meta-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .invoice-header-grid > div:last-child { text-align: left !important; } .roles-grid { grid-template-columns: 1fr !important; } /* page-head action buttons stack */ .page-head > div:last-child { flex-direction: column; } .page-head > div:last-child > * { width: 100% !important; } /* shell sidebar visible toggle: hide on small, show toggle in main */ .shell-sidebar { display: none; } .shell-main { width: 100%; padding: 14px 8px; } } /* site-header (navbar) responsiveness */ @media (max-width: 720px) { .site-header .container { flex-wrap: wrap; gap: 6px; padding: 10px 12px; } .site-nav { gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .site-nav a:not(.btn-primary) { font-size: 13px; } .site-nav .btn-primary { padding: 6px 12px; font-size: 12px; } .theme-toggle { padding: 4px 8px; font-size: 16px; } } /* breadcrumb wrap */ @media (max-width: 540px) { .breadcrumb { font-size: 12px; flex-wrap: wrap; } .breadcrumb .sep { padding: 0 4px; } } /* footer columns collapse */ @media (max-width: 720px) { .e-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 18px !important; } } @media (max-width: 420px) { .e-footer-grid { grid-template-columns: 1fr !important; } }