/* ---- GlowingEffect: mouse-tracking spotlight border ---- */ /* Shared by .card::after, .contact-cta-box::after, .hero-photo-frame::after via glow-effect.js */ /* ========================================================= Ai-And-Beyond — Stylesheet Design tokens first, so re-styling later is easy. Supports RTL (he) and LTR (en) via [dir] on . ========================================================= */ :root { /* ---- Color tokens ---- */ --color-bg: #0b0c0c; --color-bg-alt: #151716; --color-surface: #1b1d1a; --color-surface-2: #232622; --color-border: #2d302d; --color-text: #d8d9d7; --color-text-muted: #a7a9a7; --color-primary: #a6cf25; --color-primary-hover: #c2e83a; --color-primary-strong: #66820f; --color-accent: #c2e83a; --color-on-primary: #0b0c0c; /* ---- Typography ---- */ --font-he: 'Heebo', system-ui, sans-serif; --font-en: 'Inter', system-ui, sans-serif; --font-base: var(--font-he); /* ---- Spacing & layout ---- */ --container: 1140px; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --gap: 24px; --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25); --shadow: 0 18px 50px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 60px rgba(166, 207, 37, 0.3); /* ---- Motion ---- */ --transition: 0.22s ease; } html[lang="en"] { --font-base: var(--font-en); } /* ---- Background particle canvas ---- */ #bg-particles-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } main, .site-footer { position: relative; z-index: 1; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-base); background: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } /* ---- Layout helpers ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; } .section { padding: 88px 0; } .section-alt { background: var(--color-bg-alt); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; } .section-lead { color: var(--color-text-muted); font-size: 1.05rem; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius); font-weight: 700; font-size: 1rem; font-family: inherit; border: 1px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-sm { padding: 9px 16px; font-size: 0.9rem; } .btn-block { width: 100%; } .btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ---- Brand ---- */ .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; } .brand-logo { height: 44px; width: auto; display: block; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 0.85rem; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: var(--color-on-primary); } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 12, 12, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 12px 0; gap: 16px; } .nav { display: flex; gap: 28px; } .nav a { color: var(--color-text-muted); font-weight: 500; transition: var(--transition); } .nav a:hover { color: var(--color-text); } .header-actions { display: flex; align-items: center; gap: 12px; } .lang-toggle { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 12px; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: var(--transition); } .lang-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } /* burger (mobile) */ .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .nav-burger span { width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; transition: var(--transition); } /* ---- Hero ---- */ .hero { position: relative; overflow: hidden; padding: 80px 0 96px; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(166, 207, 37, 0.14), transparent 45%), radial-gradient(circle at 10% 90%, rgba(194, 232, 58, 0.09), transparent 40%); pointer-events: none; } /* Sparkles particle layer */ #hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } #hero-particles canvas { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 48px; } .hero-logo-large { width: 368px; height: 368px; display: block; margin: 0 auto 32px; mix-blend-mode: screen; } .hero-eyebrow { display: inline-block; color: var(--color-accent); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 14px; } .hero-title { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; margin-bottom: 18px; } .hero-brand { background: linear-gradient(120deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-subtitle { font-size: 1.2rem; color: var(--color-text-muted); max-width: 540px; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero-media { position: relative; display: grid; place-items: center; } .hero-photo-frame { position: relative; z-index: 2; width: min(360px, 80%); aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 0 0 1px rgba(166, 207, 37, var(--glow-opacity, 0.1)); transition: box-shadow 0.4s ease; } .hero-photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); } .hero-photo-frame::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(166,207,37,0.1) 0%, transparent 65% ); opacity: var(--glow-opacity, 0); transition: opacity 0.4s ease; } .hero-photo.photo-placeholder { display: grid; place-items: center; min-height: 100%; background: repeating-linear-gradient(45deg, var(--color-surface), var(--color-surface) 12px, var(--color-surface-2) 12px, var(--color-surface-2) 24px); } .hero-glow { position: absolute; z-index: 1; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--color-primary); filter: blur(90px); opacity: 0.35; } /* ---- Cards (services) ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); } .card { position: relative; isolation: isolate; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 28px 24px; transition: var(--transition), box-shadow 0.4s ease; box-shadow: var(--shadow-sm), 0 0 0 1px rgba(166, 207, 37, var(--glow-opacity, 0.1)); } .card::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(166,207,37,0.08) 0%, transparent 65% ); opacity: var(--glow-opacity, 0); transition: opacity 0.4s ease; } .card:hover { transform: translateY(-4px); } .card-icon { font-size: 2rem; margin-bottom: 14px; } .card h3 { font-size: 1.2rem; } .card p { color: var(--color-text-muted); margin: 0; font-size: 0.98rem; } /* ---- Portfolio ---- */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); } .portfolio-item { margin: 0; } .portfolio-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2)); border: 1px solid var(--color-border); overflow: hidden; } .portfolio-thumb::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--color-border); } .portfolio-item figcaption { margin-top: 12px; color: var(--color-text-muted); font-weight: 500; } /* ---- Contact ---- */ .contact-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .contact-list { margin: 18px 0; } .contact-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .contact-list a:hover { color: var(--color-primary); } .privacy-note { color: var(--color-text-muted); font-size: 0.92rem; } .contact-cta-box { position: relative; isolation: isolate; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow), 0 0 0 1px rgba(166, 207, 37, var(--glow-opacity, 0.1)); transition: box-shadow 0.4s ease; } .contact-cta-box::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(166,207,37,0.08) 0%, transparent 65% ); opacity: var(--glow-opacity, 0); transition: opacity 0.4s ease; } .contact-cta-box h3 { font-size: 1.4rem; } .contact-cta-box p { color: var(--color-text-muted); } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--color-border); padding: 28px 0; background: var(--color-bg-alt); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-copy { color: var(--color-text-muted); font-size: 0.9rem; } .footer-brand-logo { height: 56px; width: auto; opacity: 0.75; } /* ========================================================= Chat widget ========================================================= */ .chat-widget { position: fixed; bottom: 22px; z-index: 60; } [dir="rtl"] .chat-widget { left: 22px; } [dir="ltr"] .chat-widget { right: 22px; } .chat-launcher { width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); box-shadow: var(--shadow), var(--shadow-glow); transition: var(--transition); display: grid; place-items: center; } .chat-launcher:hover { transform: scale(1.06); } .chat-launcher-icon { font-size: 1.6rem; } .chat-panel { position: absolute; bottom: 78px; width: min(360px, calc(100vw - 44px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px)); } .chat-panel[hidden] { display: none; } [dir="rtl"] .chat-panel { left: 0; } [dir="ltr"] .chat-panel { right: 0; } .chat-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); } .chat-header strong { display: block; font-size: 1.02rem; } .chat-subtitle { display: block; color: var(--color-text-muted); font-size: 0.82rem; margin-top: 2px; } .chat-close { background: none; border: 0; color: var(--color-text-muted); font-size: 1.1rem; cursor: pointer; } .chat-close:hover { color: var(--color-text); } .chat-body { padding: 16px 18px; overflow-y: auto; flex: 1; } .chat-msg { padding: 12px 14px; border-radius: var(--radius); font-size: 0.95rem; margin-bottom: 10px; } .chat-msg-bot { background: var(--color-surface-2); color: var(--color-text); } .chat-form { padding: 0 18px 18px; } .chat-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .chat-form input, .chat-form textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); font-family: inherit; font-size: 0.95rem; resize: vertical; } .chat-form input:focus, .chat-form textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); } .chat-form textarea { margin-bottom: 12px; } .chat-status { font-size: 0.88rem; margin: 10px 0 0; min-height: 1.2em; } .chat-status.is-error { color: #ff8585; } .chat-status.is-success { color: #5be0a0; } .chat-privacy { color: var(--color-text-muted); font-size: 0.78rem; margin: 10px 0 0; text-align: center; } /* honeypot: visually hidden but present in DOM */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; } .hero-content { display: contents; } .hero-logo-large { order: -2; width: min(300px, 82vw); height: min(300px, 82vw); margin: 0 auto; } .hero-media { order: -1; } .hero-subtitle { margin: 0 auto 6px; } .hero-actions { justify-content: center; } .contact-inner { grid-template-columns: 1fr; } .nav, .header-actions .btn { display: none; } .nav-burger { display: flex; } .nav.is-open { display: flex; position: absolute; top: 68px; inset-inline: 0; flex-direction: column; gap: 0; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: 8px 20px 16px; } .nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--color-border); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }