/* ========================================================================== EcommFusion — IT theme for technology service pages Usage: Fonts: Space Grotesk (headings), Outfit (body), JetBrains Mono (code accents) ========================================================================== */ body.it-theme { --it-accent: #38bdf8; --it-glow: rgba(56, 189, 248, .22); --it-bg: #070b18; --it-panel: #0f172a; --it-border: rgba(148, 163, 184, .18); --it-muted: #94a3b8; } body.it-theme h1, body.it-theme h2, body.it-theme h3, body.it-theme .serif { font-family: 'Space Grotesk', 'Outfit', system-ui, sans-serif; letter-spacing: -0.02em; } .it-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- Hero ---------- */ .it-hero { position: relative; overflow: hidden; color: #e2e8f0; background: radial-gradient(900px 480px at 88% 8%, var(--it-glow), transparent 62%), radial-gradient(700px 380px at -5% 105%, rgba(238, 111, 87, .16), transparent 60%), var(--it-bg) !important; } .it-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 60% 35%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 35%, #000 25%, transparent 75%); } .it-hero > * { position: relative; } .it-hero.pt-28 { padding-top: 3.5rem !important; } @media (min-width: 768px) { .it-hero.pt-28 { padding-top: 5rem !important; } } .it-hero-grid { display: block; } @media (min-width: 1024px) { .it-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: center; } } .it-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem) !important; line-height: 1.08 !important; font-weight: 700 !important; } .it-hero h1 span { background: linear-gradient(90deg, var(--it-accent), #ee6f57); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .it-hero .text-gray-600, .it-hero .text-gray-700 { color: #a5b4cb !important; } .it-hero .badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--it-border); color: var(--it-accent) !important; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: .78rem !important; } .it-hero .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--it-accent); box-shadow: 0 0 0 4px var(--it-glow); } .it-hero .pill { background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--it-border) !important; color: #cbd5e1 !important; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500 !important; } .it-hero a.border { border-color: rgba(255, 255, 255, .28) !important; color: #fff !important; } .it-hero a.border:hover { background: #fff !important; color: #0b1020 !important; } .it-hero a[class*="bg-[var(--ef)]"] { box-shadow: 0 10px 30px -8px rgba(238, 111, 87, .6); } /* ---------- Visual: window chrome ---------- */ .it-visual { position: relative; margin-top: 2.5rem; max-width: 560px; } @media (min-width: 1024px) { .it-visual { margin-top: 0; margin-left: auto; width: 100%; } } @media (max-width: 639px) { .it-visual { display: none; } } .it-window { background: rgba(15, 23, 42, .88); border: 1px solid var(--it-border); border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 0 60px -20px var(--it-glow); overflow: hidden; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #cbd5e1; text-align: left; } .it-window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--it-border); background: rgba(255, 255, 255, .03); } .it-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .it-dot.r { background: #ff5f57; } .it-dot.y { background: #febc2e; } .it-dot.g { background: #28c840; } .it-window-title { margin-left: 8px; color: var(--it-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .it-code { margin: 0; padding: 16px 18px; line-height: 1.8; white-space: pre; overflow: hidden; font: inherit; } .it-ln { display: inline-block; width: 1.6em; color: #475569; user-select: none; } .tk-k { color: #c792ea; } .tk-s { color: #c3e88d; } .tk-f { color: #82aaff; } .tk-c { color: #64748b; } .tk-n { color: #f78c6c; } .tk-ok { color: #4ade80; } .tk-acc { color: var(--it-accent); } .tk-dim { color: #64748b; } .it-caret { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: var(--it-accent); animation: itBlink 1.1s steps(1) infinite; } @keyframes itBlink { 50% { opacity: 0; } } /* Floating status chips */ .it-chip { position: absolute; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 12px; background: rgba(15, 23, 42, .92); border: 1px solid var(--it-border); color: #e2e8f0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); white-space: nowrap; animation: itFloat 6s ease-in-out infinite; } .it-chip i { color: var(--it-accent); } .it-chip.c1 { top: -18px; right: 18px; } .it-chip.c2 { bottom: -18px; left: -14px; animation-delay: -3s; } @keyframes itFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Generic UI blocks used inside visuals */ .it-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .9rem; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(148, 163, 184, .1); } .it-status { display: inline-flex; align-items: center; gap: .45rem; color: #86efac; } .it-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); } .it-bar { height: 6px; border-radius: 99px; background: rgba(148, 163, 184, .15); overflow: hidden; } .it-bar > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--it-accent), #ee6f57); } .it-skel { height: 8px; border-radius: 99px; background: rgba(148, 163, 184, .18); } .it-tag { display: inline-block; padding: .15rem .5rem; border-radius: 6px; font-size: 10.5px; color: var(--it-accent); background: rgba(255, 255, 255, .05); border: 1px solid var(--it-border); } .it-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #0b1020; background: linear-gradient(135deg, var(--it-accent), #ee6f57); flex-shrink: 0; } /* Chat bubbles (AI page) */ .it-bubble { max-width: 82%; padding: .6rem .8rem; border-radius: 14px; line-height: 1.5; font-family: 'Outfit', system-ui, sans-serif; font-size: 13px; } .it-bubble.user { margin-left: auto; background: #1e293b; color: #e2e8f0; border-bottom-right-radius: 4px; } .it-bubble.bot { background: linear-gradient(135deg, rgba(52, 211, 153, .18), rgba(56, 189, 248, .12)); border: 1px solid rgba(52, 211, 153, .25); color: #e2e8f0; border-bottom-left-radius: 4px; } .it-node { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--it-border); font-size: 11px; white-space: nowrap; } .it-node i { color: var(--it-accent); } .it-link { flex: 1; height: 2px; min-width: 14px; background: linear-gradient(90deg, var(--it-accent), transparent); opacity: .6; } /* Phone mockup (mobile apps page) */ .it-phone { width: 250px; margin: 0 auto; border-radius: 38px; padding: 10px; background: linear-gradient(145deg, #1e293b, #0b1020); border: 1px solid rgba(148, 163, 184, .25); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 70px -20px var(--it-glow); } .it-phone-screen { border-radius: 30px; overflow: hidden; background: #0b1224; min-height: 470px; padding: 18px 14px; font-family: 'Outfit', system-ui, sans-serif; color: #e2e8f0; position: relative; } .it-notch { width: 90px; height: 22px; border-radius: 0 0 14px 14px; background: #0b1020; margin: -18px auto 12px; } /* ---------- Content sections on IT pages ---------- */ body.it-theme .card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } body.it-theme .card:hover { border-color: var(--it-accent); box-shadow: 0 18px 40px -22px var(--it-glow); } body.it-theme .step-dot { background: var(--it-bg) !important; color: var(--it-accent) !important; font-family: 'JetBrains Mono', ui-monospace, monospace; border: 1px solid var(--it-border); } body.it-theme .pill { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; } /* Dark "stack / tools" section */ .it-dark { position: relative; background: radial-gradient(700px 300px at 100% 0%, var(--it-glow), transparent 60%), var(--it-bg) !important; color: #e2e8f0; } .it-dark h2, .it-dark h3 { color: #fff; } .it-dark .text-gray-500, .it-dark .text-gray-600, .it-dark .text-gray-700 { color: #a5b4cb !important; } .it-dark .card { background: rgba(255, 255, 255, .03) !important; border-color: var(--it-border) !important; color: #e2e8f0; } .it-dark .pill { background: rgba(255, 255, 255, .05) !important; border-color: var(--it-border) !important; color: #cbd5e1 !important; } .it-dark .card:hover { border-color: var(--it-accent) !important; } @media (prefers-reduced-motion: reduce) { .it-chip, .it-caret { animation: none; } } /* ---------- Compact visuals used outside IT pages (homepage cards, free audit) ---------- */ .it-scope { --it-accent: #38bdf8; --it-glow: rgba(56, 189, 248, .22); --it-bg: #070b18; --it-panel: #0f172a; --it-border: rgba(148, 163, 184, .18); --it-muted: #94a3b8; } .ef-card-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; background: radial-gradient(260px 160px at 90% 0%, var(--it-glow), transparent 70%), linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 22px 22px, var(--it-bg); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } .ef-card-visual .it-window { width: 100%; font-size: 10.5px; border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); } .ef-card-visual .it-window-bar { padding: 7px 10px; gap: 5px; } .ef-card-visual .it-dot { width: 8px; height: 8px; } .ef-card-visual .it-window-title { font-size: 10px; margin-left: 4px; } .ef-card-visual .it-code { padding: 9px 12px; line-height: 1.7; font-size: 10px; } .ef-card-visual .it-bubble { font-size: 11px; padding: .4rem .6rem; border-radius: 11px; } .it-phone.mini { width: 104px; padding: 5px; border-radius: 22px; } .it-phone.mini .it-phone-screen { min-height: 0; height: 146px; border-radius: 18px; padding: 10px 8px; font-size: 9px; } .it-phone.mini .it-notch { width: 40px; height: 10px; margin: -10px auto 6px; border-radius: 0 0 8px 8px; } .ef-card-chip { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; border-radius: 8px; background: rgba(15, 23, 42, .92); border: 1px solid var(--it-border); color: #e2e8f0; font-size: 10px; white-space: nowrap; } .ef-card-chip i { color: var(--it-accent); } .ef-card-visual { min-width: 0; } .ef-card-visual .it-window { min-width: 0; max-width: 100%; } .ef-report-visual { padding: 28px; } .ef-report-visual .it-row span { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 480px) { .ef-report-visual { padding: 12px; } }