/** * Shibolet AI — brand primitives. * * Effects that theme.json cannot express: backdrop-filter blur, hover * lift/glow transitions, ::before/::after glow/shine layers, * background-clip text gradients, the tech-grid background pattern, and * all @keyframes + .animate-* utility classes. Ported 1:1 (same values) from * the Next.js site's src/app/globals.css. * * Written with CSS logical properties (inset-inline-*/inset-block-*, etc.) * instead of left/right/top/bottom so the theme needs no separate RTL * stylesheet — Polylang's `dir="rtl"` on for Hebrew flips these * automatically. * * Colors/timings reference the theme.json custom properties * (--wp--custom--*) where one exists, with the literal brand value as a * fallback, so this file keeps working even if theme.json fails to parse. * * Loaded site-wide by functions.php (shibolet_ai_enqueue_assets()); the * reusable pieces are also registered as block styles via * register_block_style() with `inline_style` so their CSS only ships to the * page when a block actually opts in (is-style-glass, is-style-glass-card, * is-style-gradient-text, is-style-neon-line, is-style-glow). * * @package Shibolet_AI */ /* -------------------------------------------------------------------- */ /* Keyframes */ /* -------------------------------------------------------------------- */ @keyframes shibolet-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes shibolet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes shibolet-pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.3); transform: scale(1); } 50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.6); transform: scale(1.02); } } @keyframes shibolet-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes shibolet-grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } } @keyframes shibolet-text-glow { 0%, 100% { text-shadow: 0 0 20px rgba(6, 182, 212, 0.5); } 50% { text-shadow: 0 0 40px rgba(6, 182, 212, 0.8), 0 0 60px rgba(6, 182, 212, 0.4); } } @keyframes shibolet-border-glow { 0%, 100% { border-color: rgba(6, 182, 212, 0.3); } 50% { border-color: rgba(6, 182, 212, 0.8); } } @keyframes shibolet-scan-line { 0% { inset-block-start: -100%; } 100% { inset-block-start: 100%; } } /* -------------------------------------------------------------------- */ /* Animation utility classes */ /* -------------------------------------------------------------------- */ .animate-gradient { background-size: 200% 200%; animation: shibolet-gradient-shift 8s ease infinite; } .animate-float { animation: shibolet-float 6s ease-in-out infinite; } .animate-pulse-glow { animation: shibolet-pulse-glow 3s ease-in-out infinite; } .animate-shimmer { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); background-size: 200% 100%; animation: shibolet-shimmer 2s infinite; } .animate-text-glow { animation: shibolet-text-glow 3s ease-in-out infinite; } /* -------------------------------------------------------------------- */ /* Glass / card effects, gradient text, neon line, glow border */ /* -------------------------------------------------------------------- */ /* * NOTE: the .is-style-glass / .is-style-glass-card / .is-style-gradient-text * / .is-style-neon-line / .is-style-glow selectors are deliberately NOT * defined here. They're registered in functions.php via * shibolet_ai_register_block_styles() using register_block_style()'s * `inline_style` parameter, so WordPress only ships that CSS on requests * where a block actually carries the matching class — this file is * enqueued unconditionally on every request, so it only carries primitives * genuinely needed everywhere (keyframes, scrollbar, tech-grid, etc.). */ /* -------------------------------------------------------------------- */ /* Tech grid background */ /* -------------------------------------------------------------------- */ .tech-grid { background-image: linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px); background-size: var(--wp--custom--grid--size, 50px) var(--wp--custom--grid--size, 50px); } /* -------------------------------------------------------------------- */ /* Card shine sweep */ /* -------------------------------------------------------------------- */ .card-shine { position: relative; overflow: hidden; } .card-shine::after { content: ""; position: absolute; inset-block-start: -50%; inset-inline-start: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.03) 50%, transparent 60%); transform: rotate(45deg); transition: transform 0.6s; } .card-shine:hover::after { transform: rotate(45deg) translate(50%, 50%); } /* -------------------------------------------------------------------- */ /* Hero / section background gradients */ /* -------------------------------------------------------------------- */ .home h1.wp-block-post-title{ display:none; } .hero-gradient { background: var(--wp--preset--gradient--hero, linear-gradient(to right, #0a1628, #0f2744, #1e4976)); margin:0; padding-top:50px; } .section-gradient { background: var(--wp--preset--gradient--section, radial-gradient(ellipse 100% 50% at 50% 100%, rgba(6, 182, 212, 0.08), transparent), #030712); } /* -------------------------------------------------------------------- */ /* Glow button */ /* -------------------------------------------------------------------- */ .btn-glow { position: relative; background: var(--wp--preset--gradient--brand, linear-gradient(135deg, #06b6d4 0%, #0c4a6e 100%)); transition: all 0.3s ease; } .btn-glow::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(15px); opacity: 0.5; z-index: -1; transition: opacity 0.3s; } .btn-glow:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(6, 182, 212, 0.4); } .btn-glow:hover::before { opacity: 0.8; } /* -------------------------------------------------------------------- */ /* Scrollbar */ /* -------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--wp--preset--color--base, #030712); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--wp--preset--color--accent, #06b6d4), var(--wp--preset--color--dark-blue, #0c4a6e)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--wp--preset--color--accent-glow, #22d3ee), var(--wp--preset--color--dark-blue-glow, #0e7490)); } body{ background-color:var(--bg-dark); background-image: url(../media/fixed_bg_blue.jpeg); background-position: 0 0 ; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .home .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){ max-width: 100vw; } header.wp-block-template-part{ position: absolute; z-index: 100; width: 100%; max-width: 1280px; margin: auto; /* top: 0; */ left: 50%; transform: translateX(-50%); } .lang-item{ border: 0 solid; margin: 0; padding: 0; opacity: 1; appearance: button; display: flex; height: calc(var(--spacing)*12); width: calc(var(--spacing)*12); cursor: pointer; align-items: center; justify-content: center; border-radius: 3.40282e38px; border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-slate-700); background-color: color-mix(in oklab,var(--color-slate-800)80%,transparent); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a); box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow); --tw-backdrop-blur: blur(var(--blur-sm)); backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,); transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to; transition-timing-function: var(--tw-ease,var(--default-transition-timing-function)); transition-duration: var(--tw-duration,var(--default-transition-duration)); box-sizing: border-box; &:hover{ background-color: color-mix(in oklab, var(--color-slate-700) 80%, transparent); } } .lang-item a{ direction: ltr; visibility: hidden; position: relative; &:after{ visibility: visible; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } } .lang-item a[lang="he-IL"]:after{ content: "HE"; } .lang-item a[lang="en-US"]:after{ content: "EN"; } .wp-block-navigation .wp-block-navigation-item__content:hover{ color: var(--wp--preset--color--accent-glow); }