/* Destintel Inquiry — RenderBox CMS module Root: #DTinquiry_root__K7mP2 All rules scoped. !important on static visual props. Orb transform animated via @keyframes — NO !important on animated transform. Status-dot opacity pulsed via keyframes — NO !important on that opacity. */ #DTinquiry_root__K7mP2, #DTinquiry_root__K7mP2 *, #DTinquiry_root__K7mP2 *::before, #DTinquiry_root__K7mP2 *::after { box-sizing: border-box !important; margin: 0; padding: 0; } #DTinquiry_root__K7mP2 { --DTinquiry-bg: #000000; /* = rendered hero earth black */ --DTinquiry-text: #f2f4f8; --DTinquiry-text-muted: rgba(242, 244, 248, 0.65); --DTinquiry-accent: #3b82f6; --DTinquiry-accent-bright: #60a5fa; --DTinquiry-accent-cyan: #22d3ee; --DTinquiry-accent-purple: #8b5cf6; --DTinquiry-glass-border: rgba(255, 255, 255, 0.18); --DTinquiry-info-bg: rgba(9, 18, 42, 0.42); /* navy glass (info panel) */ --DTinquiry-form-bg: rgba(13, 27, 58, 0.24); /* navy glass (form panel) */ --DTinquiry-btn-bg: #12131a; --DTinquiry-btn-hover: #1a1c28; --DTinquiry-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --DTinquiry-page-gutter: 1.75rem; --DTinquiry-touch-target: 44px; position: relative !important; display: block !important; width: 100% !important; min-height: 100vh !important; font-family: var(--DTinquiry-font) !important; color: var(--DTinquiry-text) !important; background: var(--DTinquiry-bg) !important; background-color: var(--DTinquiry-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; /* NO overflow-x: hidden on root (Rule #9 sticky/overflow trap) */ } #DTinquiry_root__K7mP2 .DTinquiry_page__K7mP2 { position: relative !important; z-index: 1 !important; min-height: 100vh !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: max(4.5rem, env(safe-area-inset-top)) max(var(--DTinquiry-page-gutter), env(safe-area-inset-right)) max(6rem, env(safe-area-inset-bottom)) max(var(--DTinquiry-page-gutter), env(safe-area-inset-left)) !important; } #DTinquiry_root__K7mP2 .DTinquiry_inner__K7mP2 { position: relative !important; width: min(1180px, 100%) !important; display: flex !important; justify-content: center !important; align-items: center !important; z-index: 0 !important; isolation: isolate !important; } /* ===== Solid orbs — transform animated via keyframes (no !important on transform) ===== */ #DTinquiry_root__K7mP2 .DTinquiry_orb__K7mP2 { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: -1 !important; border: 1.5px solid rgba(255, 255, 255, 0.35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important; display: block !important; will-change: transform; } #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2 { /* pyramid: takes the circle's original bottom-left spot + orbDriftC */ --DTinquiry-pyr-s: 170px; width: 170px !important; height: 170px !important; top: auto !important; left: calc(6% - min(70px, (100vw - 100%) / 2 + 24px)) !important; /* nudge: peek past card's left edge */ bottom: 10% !important; background-image: linear-gradient(145deg, #22d3ee 0%, #3b82f6 45%, #8b5cf6 100%) !important; background: linear-gradient(145deg, #22d3ee 0%, #3b82f6 45%, #8b5cf6 100%) !important; opacity: 0.95 !important; animation: DTinquiry_orbDriftC__K7mP2 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important; animation-delay: -7s !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2 { width: 175px !important; height: 175px !important; --DTinquiry-cube-c: 175px; right: max(calc(4% - 64px), calc(var(--DTinquiry-cube-k) - (100vw - 100%) / 2)) !important; /* nudge: peek past card's right edge, never past the viewport */ top: 40% !important; background-image: linear-gradient(90deg, #60a5fa, #a78bfa 55%, #ec4899) !important; background: linear-gradient(90deg, #60a5fa, #a78bfa 55%, #ec4899) !important; opacity: 0.9 !important; animation: DTinquiry_orbDriftB__K7mP2 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important; animation-delay: -4s !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb3__K7mP2 { /* circle: takes the pyramid's original top-left spot (orb1 size) + orbDriftA */ width: 240px !important; height: 240px !important; top: 6% !important; left: calc(16% - min(84px, (100vw - 100%) / 2 + 20px)) !important; /* nudge: peek past card's left edge */ bottom: auto !important; background-image: linear-gradient(135deg, #38bdf8, #6366f1 60%, #c084fc) !important; background: linear-gradient(135deg, #38bdf8, #6366f1 60%, #c084fc) !important; opacity: 0.85 !important; animation: DTinquiry_orbDriftA__K7mP2 18s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite !important; } /* ===== 3D shapes: orb1 = pyramid, orb2 = cube (orb3 = the circle) ===== Positions, sizes, drift animations and breakpoints are the ORIGINAL orb rules above/below; these rules only swap the visual for 3D geometry. Spinner rotation is keyframed: NO !important on transform. Pyramid: square base s, 4 equilateral faces (slant = s, tilt 30deg). */ #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2 { --DTinquiry-cube-k: 61px; /* min page-gutter keep-clear for the cube (overridden <=900 / <=560) */ background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; perspective: 900px !important; overflow: visible !important; } #DTinquiry_root__K7mP2 .DTinquiry_pyramid__K7mP2 { position: absolute !important; inset: 0 !important; display: block !important; transform-style: preserve-3d !important; transform-origin: 50% 60%; transform: rotateX(-14deg) rotateY(-30deg); animation: DTinquiry_pyrSpin__K7mP2 32s linear infinite; } #DTinquiry_root__K7mP2 .DTinquiry_pyrFace__K7mP2 { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; transform-origin: 50% 100% !important; -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%) !important; clip-path: polygon(50% 0, 100% 100%, 0 100%) !important; background: linear-gradient(160deg, #22d3ee 0%, #3b82f6 48%, #8b5cf6 100%) !important; } #DTinquiry_root__K7mP2 .DTinquiry_pyrFace1__K7mP2 { transform: rotateY(0deg) translateZ(calc(var(--DTinquiry-pyr-s) / 2)) rotateX(30deg) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, #22d3ee 0%, #3b82f6 48%, #8b5cf6 100%) !important; } #DTinquiry_root__K7mP2 .DTinquiry_pyrFace2__K7mP2 { transform: rotateY(90deg) translateZ(calc(var(--DTinquiry-pyr-s) / 2)) rotateX(30deg) !important; background: linear-gradient(rgba(10, 6, 40, 0.28), rgba(10, 6, 40, 0.28)), linear-gradient(160deg, #22d3ee 0%, #3b82f6 48%, #8b5cf6 100%) !important; } #DTinquiry_root__K7mP2 .DTinquiry_pyrFace3__K7mP2 { transform: rotateY(180deg) translateZ(calc(var(--DTinquiry-pyr-s) / 2)) rotateX(30deg) !important; background: linear-gradient(rgba(10, 6, 40, 0.5), rgba(10, 6, 40, 0.5)), linear-gradient(160deg, #22d3ee 0%, #3b82f6 48%, #8b5cf6 100%) !important; } #DTinquiry_root__K7mP2 .DTinquiry_pyrFace4__K7mP2 { transform: rotateY(270deg) translateZ(calc(var(--DTinquiry-pyr-s) / 2)) rotateX(30deg) !important; background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), linear-gradient(160deg, #38bdf8 0%, #6366f1 60%, #8b5cf6 100%) !important; } #DTinquiry_root__K7mP2 .DTinquiry_pyrBase__K7mP2 { position: absolute !important; left: 0 !important; top: calc(var(--DTinquiry-pyr-s) / 2) !important; display: block !important; width: 100% !important; height: 100% !important; transform: rotateX(90deg) !important; background: linear-gradient(135deg, #1e3a8a, #4c1d95) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cube__K7mP2 { position: absolute !important; inset: 0 !important; display: block !important; transform-style: preserve-3d !important; transform-origin: 50% 50%; transform: rotateX(-24deg) rotateY(35deg); animation: DTinquiry_cubeSpin__K7mP2 26s linear infinite; } #DTinquiry_root__K7mP2 .DTinquiry_cubeFace__K7mP2 { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; width: 100% !important; height: 100% !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 18px rgba(255, 255, 255, 0.08) !important; background: linear-gradient(90deg, #60a5fa, #a78bfa 55%, #ec4899) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cubeFront__K7mP2 { transform: translateZ(calc(var(--DTinquiry-cube-c) / 2)) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, #60a5fa, #a78bfa 55%, #ec4899) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cubeBack__K7mP2 { transform: rotateY(180deg) translateZ(calc(var(--DTinquiry-cube-c) / 2)) !important; background: linear-gradient(rgba(20, 6, 40, 0.45), rgba(20, 6, 40, 0.45)), linear-gradient(90deg, #60a5fa, #a78bfa 55%, #ec4899) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cubeRight__K7mP2 { transform: rotateY(90deg) translateZ(calc(var(--DTinquiry-cube-c) / 2)) !important; background: linear-gradient(rgba(20, 6, 40, 0.3), rgba(20, 6, 40, 0.3)), linear-gradient(90deg, #a78bfa, #ec4899) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cubeLeft__K7mP2 { transform: rotateY(-90deg) translateZ(calc(var(--DTinquiry-cube-c) / 2)) !important; background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)), linear-gradient(90deg, #38bdf8, #60a5fa 50%, #a78bfa) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cubeTop__K7mP2 { transform: rotateX(90deg) translateZ(calc(var(--DTinquiry-cube-c) / 2)) !important; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.12)), linear-gradient(135deg, #93c5fd, #c4b5fd 60%, #f9a8d4) !important; } #DTinquiry_root__K7mP2 .DTinquiry_cubeBottom__K7mP2 { transform: rotateX(-90deg) translateZ(calc(var(--DTinquiry-cube-c) / 2)) !important; background: linear-gradient(rgba(20, 6, 40, 0.6), rgba(20, 6, 40, 0.6)), linear-gradient(90deg, #60a5fa, #a78bfa 55%, #ec4899) !important; } /* ---- Glow: vivid shapes casting colored light onto/through the navy glass and a soft halo on the black page. Static (no animation); box-shadow halos are ink-only so they never create horizontal scroll. ---- */ #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_orb3__K7mP2 { opacity: 1 !important; } /* Pyramid + cube glow: a STATIC radial-gradient + box-shadow plate behind each 3D object. Painted once; only the drifting wrapper's TRANSFORM moves it (compositor). No per-frame filter. */ #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2::before, #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2::before { content: "" !important; position: absolute !important; display: block !important; border-radius: 50% !important; pointer-events: none !important; z-index: -1 !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2::before { left: -18% !important; top: 5% !important; width: 136% !important; height: 110% !important; background: radial-gradient(ellipse at 50% 55%, rgba(90, 170, 255, 0.35) 0%, rgba(56, 140, 248, 0.32) 42%, rgba(34, 211, 238, 0.18) 62%, rgba(139, 92, 246, 0.08) 78%, rgba(0, 0, 0, 0) 88%) !important; box-shadow: 0 0 18px 4px rgba(56, 160, 248, 0.7), 0 0 55px 18px rgba(34, 211, 238, 0.32), 0 0 110px 40px rgba(139, 92, 246, 0.2) !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2::before { left: -22% !important; top: -22% !important; width: 144% !important; height: 144% !important; background: radial-gradient(ellipse at 50% 50%, rgba(180, 140, 255, 0.32) 0%, rgba(167, 139, 250, 0.3) 40%, rgba(236, 72, 153, 0.18) 60%, rgba(96, 165, 250, 0.08) 78%, rgba(0, 0, 0, 0) 88%) !important; box-shadow: 0 0 18px 4px rgba(167, 139, 250, 0.7), 0 0 55px 18px rgba(236, 72, 153, 0.3), 0 0 110px 40px rgba(96, 165, 250, 0.18) !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb3__K7mP2 { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 26px rgba(255, 255, 255, 0.1), 0 0 30px 8px rgba(99, 102, 241, 0.75), 0 0 90px 30px rgba(56, 189, 248, 0.32), 0 0 150px 46px rgba(139, 92, 246, 0.14) !important; } @keyframes DTinquiry_pyrSpin__K7mP2 { from { transform: rotateX(-14deg) rotateY(-30deg); } to { transform: rotateX(-14deg) rotateY(-390deg); } } @keyframes DTinquiry_cubeSpin__K7mP2 { from { transform: rotateX(-24deg) rotateY(35deg); } to { transform: rotateX(-24deg) rotateY(395deg); } } /* Offscreen pause (IntersectionObserver adds .DTinquiry_shapesPaused__K7mP2 on the inner) */ #DTinquiry_root__K7mP2 .DTinquiry_shapesPaused__K7mP2 .DTinquiry_orb__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_shapesPaused__K7mP2 .DTinquiry_pyramid__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_shapesPaused__K7mP2 .DTinquiry_cube__K7mP2 { animation-play-state: paused !important; } @keyframes DTinquiry_orbDriftA__K7mP2 { 0% { transform: translate(-40%, -10%) scale(1); } 25% { transform: translate(-52%, 4%) scale(1.03); } 50% { transform: translate(-62%, -2%) scale(0.97); } 75% { transform: translate(-48%, 8%) scale(1.02); } 100% { transform: translate(-40%, -10%) scale(1); } } @keyframes DTinquiry_orbDriftB__K7mP2 { 0% { transform: translate(0, 0) scale(1); } 20% { transform: translate(-22px, 14px) scale(1.04); } 45% { transform: translate(12px, -18px) scale(0.96); } 70% { transform: translate(-10px, -8px) scale(1.02); } 100% { transform: translate(0, 0) scale(1); } } @keyframes DTinquiry_orbDriftC__K7mP2 { 0% { transform: translate(0, 0) scale(1); } 30% { transform: translate(16px, -20px) scale(1.05); } 55% { transform: translate(-14px, 10px) scale(0.95); } 80% { transform: translate(8px, 16px) scale(1.02); } 100% { transform: translate(0, 0) scale(1); } } /* ===== Glass card ===== */ #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 { position: relative !important; display: grid !important; grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.55fr) !important; border-radius: 32px !important; overflow: visible !important; background: rgba(11, 22, 48, 0.4) !important; /* navy glass card */ background-color: rgba(11, 22, 48, 0.4) !important; border: 1px solid var(--DTinquiry-glass-border) !important; backdrop-filter: blur(14px) saturate(1.35) !important; -webkit-backdrop-filter: blur(14px) saturate(1.35) !important; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; z-index: 1 !important; min-height: 600px !important; width: 100% !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 > .DTinquiry_infoPanel__K7mP2 { overflow: hidden !important; border-radius: 32px 0 0 32px !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 > .DTinquiry_formPanel__K7mP2 { border-radius: 0 32px 32px 0 !important; overflow: visible !important; } /* ===== Left info / Nexus panel ===== */ #DTinquiry_root__K7mP2 .DTinquiry_infoPanel__K7mP2 { position: relative !important; z-index: 2 !important; padding: 3rem 2.35rem 2.5rem !important; background: var(--DTinquiry-info-bg) !important; background-color: var(--DTinquiry-info-bg) !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; flex-direction: column !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } #DTinquiry_root__K7mP2 .DTinquiry_brandBlock__K7mP2 { margin-bottom: 2.25rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_brandTitle__K7mP2 { font-size: 1.2rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #fff !important; margin-bottom: 0.75rem !important; background: transparent !important; } #DTinquiry_root__K7mP2 .DTinquiry_statusBadge__K7mP2 { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--DTinquiry-accent-cyan) !important; background: rgba(34, 211, 238, 0.1) !important; background-color: rgba(34, 211, 238, 0.1) !important; border: 1px solid rgba(34, 211, 238, 0.35) !important; padding: 0.35rem 0.75rem !important; border-radius: 999px !important; } /* opacity animated by pulse keyframes — no !important on opacity */ #DTinquiry_root__K7mP2 .DTinquiry_statusDot__K7mP2 { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #22d3ee !important; background-color: #22d3ee !important; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.25) !important; display: inline-block !important; animation: DTinquiry_pulseDot__K7mP2 2s ease-in-out infinite !important; } @keyframes DTinquiry_pulseDot__K7mP2 { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } #DTinquiry_root__K7mP2 .DTinquiry_infoList__K7mP2 { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 1.85rem !important; flex: 1 !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoItem__K7mP2 { display: flex !important; align-items: flex-start !important; gap: 0.95rem !important; font-size: 0.9rem !important; line-height: 1.6 !important; color: var(--DTinquiry-text) !important; } #DTinquiry_root__K7mP2 .DTinquiry_icon__K7mP2 { flex-shrink: 0 !important; width: 22px !important; height: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--DTinquiry-accent-bright) !important; margin-top: 2px !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoLabel__K7mP2 { display: block !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.5) !important; margin-bottom: 0.3rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoLink__K7mP2 { color: inherit !important; text-decoration: none !important; word-break: break-all !important; transition: color 0.2s !important; background: transparent !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoLink__K7mP2:hover, #DTinquiry_root__K7mP2 .DTinquiry_infoLink__K7mP2:focus-visible { color: var(--DTinquiry-accent-cyan) !important; outline: none !important; } #DTinquiry_root__K7mP2 .DTinquiry_address__K7mP2 { font-style: normal !important; color: inherit !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoText__K7mP2 { color: inherit !important; } /* ===== Form panel ===== */ #DTinquiry_root__K7mP2 .DTinquiry_formPanel__K7mP2 { position: relative !important; z-index: 2 !important; padding: 3rem 3rem 2.5rem !important; background: var(--DTinquiry-form-bg) !important; background-color: var(--DTinquiry-form-bg) !important; display: flex !important; flex-direction: column !important; gap: 1.75rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_field__K7mP2 { display: flex !important; flex-direction: column !important; gap: 0.55rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_label__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_fieldLabel__K7mP2 { font-size: 0.72rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.75) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; background: transparent !important; } #DTinquiry_root__K7mP2 .DTinquiry_req__K7mP2 { color: var(--DTinquiry-accent-cyan) !important; margin-left: 0.15rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_helper__K7mP2 { display: block !important; font-size: 0.62rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; color: rgba(255, 255, 255, 0.4) !important; margin-top: 0.2rem !important; text-transform: uppercase !important; } #DTinquiry_root__K7mP2 .DTinquiry_labelRow__K7mP2 { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 0.75rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_charCounter__K7mP2 { font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; color: rgba(255, 255, 255, 0.4) !important; flex-shrink: 0 !important; } #DTinquiry_root__K7mP2 .DTinquiry_input__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_textarea__K7mP2 { width: 100% !important; background: transparent !important; background-color: transparent !important; border: none !important; border-bottom: 1.5px solid rgba(255, 255, 255, 0.28) !important; padding: 0.55rem 0 0.7rem !important; color: #fff !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.4 !important; min-height: var(--DTinquiry-touch-target) !important; outline: none !important; resize: none !important; transition: border-color 0.25s !important; border-radius: 0 !important; appearance: none !important; -webkit-appearance: none !important; -webkit-tap-highlight-color: transparent; } #DTinquiry_root__K7mP2 .DTinquiry_input__K7mP2::placeholder, #DTinquiry_root__K7mP2 .DTinquiry_textarea__K7mP2::placeholder { color: rgba(255, 255, 255, 0.35) !important; } #DTinquiry_root__K7mP2 .DTinquiry_input__K7mP2:focus, #DTinquiry_root__K7mP2 .DTinquiry_textarea__K7mP2:focus { border-bottom-color: var(--DTinquiry-accent-bright) !important; } #DTinquiry_root__K7mP2 .DTinquiry_input__K7mP2:invalid:not(:placeholder-shown):not(:focus), #DTinquiry_root__K7mP2 .DTinquiry_textarea__K7mP2:invalid:not(:placeholder-shown):not(:focus) { border-bottom-color: rgba(248, 113, 113, 0.7) !important; } /* ===== Custom dropdown ===== */ #DTinquiry_root__K7mP2 .DTinquiry_customSelect__K7mP2 { position: relative !important; width: 100% !important; z-index: 10 !important; } #DTinquiry_root__K7mP2 .DTinquiry_customSelect__K7mP2.is-open { z-index: 1001 !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectTrigger__K7mP2 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; width: 100% !important; background: transparent !important; background-color: transparent !important; border: none !important; border-bottom: 1.5px solid rgba(255, 255, 255, 0.28) !important; padding: 0.55rem 0 0.7rem !important; color: #fff !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.4 !important; min-height: var(--DTinquiry-touch-target) !important; text-align: left !important; cursor: pointer !important; outline: none !important; transition: border-color 0.25s !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #DTinquiry_root__K7mP2 .DTinquiry_selectTrigger__K7mP2:hover { border-bottom-color: rgba(96, 165, 250, 0.55) !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectTrigger__K7mP2:focus-visible { border-bottom-color: var(--DTinquiry-accent-bright) !important; } #DTinquiry_root__K7mP2 .DTinquiry_customSelect__K7mP2.is-open .DTinquiry_selectTrigger__K7mP2 { border-bottom-color: var(--DTinquiry-accent-bright) !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectValue__K7mP2 { flex: 1 !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #fff !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectChevron__K7mP2 { flex-shrink: 0 !important; width: 0 !important; height: 0 !important; border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-top: 6px solid rgba(96, 165, 250, 0.85) !important; transition: transform 0.2s ease !important; margin-right: 2px !important; display: block !important; } #DTinquiry_root__K7mP2 .DTinquiry_customSelect__K7mP2.is-open .DTinquiry_selectChevron__K7mP2 { transform: rotate(180deg) !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectList__K7mP2 { position: absolute !important; top: calc(100% + 0.55rem) !important; left: 0 !important; right: 0 !important; list-style: none !important; margin: 0 !important; padding: 0.45rem !important; border-radius: 14px !important; background: rgba(12, 16, 32, 0.72) !important; background-color: rgba(12, 16, 32, 0.72) !important; border: 1px solid rgba(96, 165, 250, 0.45) !important; backdrop-filter: blur(18px) saturate(1.4) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.04) !important; z-index: 1000 !important; width: 100% !important; max-height: min(16rem, var(--dropdown-max-height, 16rem)) !important; overflow-y: auto !important; /* opacity/transform animated by keyframes — keep animation without fighting */ animation: DTinquiry_dropdownIn__K7mP2 0.18s ease-out !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectList__K7mP2[hidden] { display: none !important; } @keyframes DTinquiry_dropdownIn__K7mP2 { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } #DTinquiry_root__K7mP2 .DTinquiry_selectOption__K7mP2 { min-height: var(--DTinquiry-touch-target) !important; display: flex !important; align-items: center !important; padding: 0.65rem 0.9rem !important; border-radius: 10px !important; color: rgba(255, 255, 255, 0.88) !important; font-family: inherit !important; font-size: 0.92rem !important; font-weight: 450 !important; letter-spacing: 0.01em !important; cursor: pointer !important; outline: none !important; transition: background 0.15s, color 0.15s, box-shadow 0.15s !important; border: 1px solid transparent !important; background: transparent !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #DTinquiry_root__K7mP2 .DTinquiry_selectOption__K7mP2:hover, #DTinquiry_root__K7mP2 .DTinquiry_selectOption__K7mP2.is-active { background: rgba(59, 130, 246, 0.18) !important; background-color: rgba(59, 130, 246, 0.18) !important; color: #fff !important; border-color: rgba(96, 165, 250, 0.35) !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectOption__K7mP2[aria-selected="true"] { background: rgba(59, 130, 246, 0.28) !important; background-color: rgba(59, 130, 246, 0.28) !important; color: #fff !important; border-color: rgba(96, 165, 250, 0.55) !important; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2) !important; font-weight: 550 !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectOption__K7mP2:focus-visible { background: rgba(59, 130, 246, 0.22) !important; border-color: rgba(96, 165, 250, 0.6) !important; outline: none !important; } #DTinquiry_root__K7mP2 .DTinquiry_customSelect__K7mP2.opens-up .DTinquiry_selectList__K7mP2 { top: auto !important; bottom: calc(100% + 0.55rem) !important; animation-name: DTinquiry_dropdownInUp__K7mP2 !important; } @keyframes DTinquiry_dropdownInUp__K7mP2 { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #DTinquiry_root__K7mP2 .DTinquiry_messageField__K7mP2 { margin-top: 0.15rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_messageField__K7mP2 .DTinquiry_textarea__K7mP2 { min-height: 7.5rem !important; line-height: 1.55 !important; padding-top: 0.7rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_formFooter__K7mP2 { display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 1rem !important; margin-top: auto !important; padding-top: 0.75rem !important; position: relative !important; } #DTinquiry_root__K7mP2 .DTinquiry_sendBtn__K7mP2 { appearance: none !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; cursor: pointer !important; font-family: inherit !important; font-size: 0.85rem !important; font-weight: 650 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #fff !important; background: var(--DTinquiry-btn-bg) !important; background-color: var(--DTinquiry-btn-bg) !important; min-height: 48px !important; padding: 0.85rem 2rem !important; border-radius: 10px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important; position: relative !important; z-index: 1 !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #DTinquiry_root__K7mP2 .DTinquiry_sendBtn__K7mP2:hover { background: var(--DTinquiry-btn-hover) !important; background-color: var(--DTinquiry-btn-hover) !important; box-shadow: 0 6px 22px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } #DTinquiry_root__K7mP2 .DTinquiry_sendBtn__K7mP2:active { transform: translateY(1px) !important; } #DTinquiry_root__K7mP2 .DTinquiry_sendBtn__K7mP2:focus-visible { outline: 2px solid var(--DTinquiry-accent-bright) !important; outline-offset: 3px !important; } /* ===== Toast — absolute within root (never fixed) ===== */ #DTinquiry_root__K7mP2 .DTinquiry_toast__K7mP2 { position: absolute !important; bottom: 2rem !important; left: 50% !important; transform: translateX(-50%) translateY(20px); background: rgba(15, 23, 42, 0.92) !important; background-color: rgba(15, 23, 42, 0.92) !important; color: #fff !important; padding: 0.85rem 1.4rem !important; border-radius: 12px !important; border: 1px solid rgba(96, 165, 250, 0.35) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(59, 130, 246, 0.2) !important; font-size: 0.9rem !important; z-index: 100 !important; opacity: 0; pointer-events: none !important; transition: opacity 0.3s, transform 0.3s !important; backdrop-filter: blur(12px) !important; visibility: hidden; } #DTinquiry_root__K7mP2 .DTinquiry_toast__K7mP2.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto !important; visibility: visible !important; } #DTinquiry_root__K7mP2 .DTinquiry_toast__K7mP2[hidden] { display: block !important; visibility: hidden !important; } #DTinquiry_root__K7mP2 .DTinquiry_toast__K7mP2.show[hidden] { visibility: visible !important; } /* ===== Responsive ===== */ @media (max-width: 900px) { #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 { grid-template-columns: 1fr !important; min-height: auto !important; overflow: visible !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 > .DTinquiry_infoPanel__K7mP2 { border-radius: 32px 32px 0 0 !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 > .DTinquiry_formPanel__K7mP2 { border-radius: 0 0 32px 32px !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoPanel__K7mP2 { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 2.25rem clamp(1.5rem, 4vw, 2.25rem) 1.75rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_formPanel__K7mP2 { padding: 2.25rem clamp(1.5rem, 4vw, 2.25rem) 2.25rem !important; gap: 1.35rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_formFooter__K7mP2 { justify-content: stretch !important; } #DTinquiry_root__K7mP2 .DTinquiry_sendBtn__K7mP2 { width: 100% !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoList__K7mP2 { gap: 1.35rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2 { --DTinquiry-pyr-s: clamp(110px, 16vw, 135px); width: clamp(110px, 16vw, 135px) !important; height: clamp(110px, 16vw, 135px) !important; left: calc(2% - 30px) !important; /* nudge: peek past card's left edge */ } #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2 { --DTinquiry-cube-c: clamp(115px, 18vw, 150px); --DTinquiry-cube-k: 52px; width: clamp(115px, 18vw, 150px) !important; height: clamp(115px, 18vw, 150px) !important; right: max(1%, calc(var(--DTinquiry-cube-k) - (100vw - 100%) / 2)) !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb3__K7mP2 { width: clamp(150px, 25vw, 200px) !important; height: clamp(150px, 25vw, 200px) !important; left: 8% !important; } } @media (max-width: 560px) { #DTinquiry_root__K7mP2 { --DTinquiry-page-gutter: 1rem; } #DTinquiry_root__K7mP2 .DTinquiry_page__K7mP2 { padding: max(4rem, env(safe-area-inset-top)) max(var(--DTinquiry-page-gutter), env(safe-area-inset-right)) max(4.5rem, env(safe-area-inset-bottom)) max(var(--DTinquiry-page-gutter), env(safe-area-inset-left)) !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 { border-radius: 24px !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 > .DTinquiry_infoPanel__K7mP2 { border-radius: 24px 24px 0 0 !important; } #DTinquiry_root__K7mP2 .DTinquiry_card__K7mP2 > .DTinquiry_formPanel__K7mP2 { border-radius: 0 0 24px 24px !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoPanel__K7mP2 { padding: 1.6rem 1.25rem 1.35rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_formPanel__K7mP2 { padding: 1.6rem 1.25rem max(1.6rem, env(safe-area-inset-bottom)) !important; gap: 1.2rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_brandBlock__K7mP2 { margin-bottom: 1.6rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_infoItem__K7mP2 { font-size: 0.88rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectList__K7mP2 { width: 100% !important; min-width: 100% !important; max-width: calc(100vw - 2rem) !important; max-height: min(16rem, var(--dropdown-max-height, 16rem)) !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectOption__K7mP2 { padding-inline: 0.8rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_formFooter__K7mP2 { padding-top: 0.35rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_sendBtn__K7mP2 { min-height: 48px !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb1__K7mP2 { --DTinquiry-pyr-s: 92px; width: 92px !important; height: 92px !important; left: -14px !important; top: auto !important; bottom: 4% !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb2__K7mP2 { --DTinquiry-cube-c: 92px; --DTinquiry-cube-k: 36px; width: 92px !important; height: 92px !important; right: max(0px, calc(var(--DTinquiry-cube-k) - (100vw - 100%) / 2)) !important; top: 44% !important; } #DTinquiry_root__K7mP2 .DTinquiry_orb3__K7mP2 { width: 132px !important; height: 132px !important; left: 6% !important; top: 0 !important; bottom: auto !important; } } @media (max-width: 360px) { #DTinquiry_root__K7mP2 .DTinquiry_infoPanel__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_formPanel__K7mP2 { padding-inline: 1rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_selectList__K7mP2 { max-width: calc(100vw - 1.5rem) !important; } } @media (prefers-reduced-motion: reduce) { #DTinquiry_root__K7mP2 .DTinquiry_orb__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_pyramid__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_cube__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_statusDot__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_selectList__K7mP2 { animation: none !important; } } /* ===================================================================== HERO (added) — converted "Gravity" space-horizon pen (Haml/Sass → CSS) Original pen: codepen.io/saransh (parallax stars by @saran5h) RenderBox notes: - Section 6.2 hero pattern: relative + min-height 100vh + overflow hidden on the hero ONLY (Rule #9: nothing on the root). - Exo 2 (display) + Inter (text) on the hero only (links-css.txt + JS fallback, Rule #8). - Entry animation is CLASS-BASED (Section 10.5): JS adds DTinquiry_heroAnimateIn__K7mP2, then DTinquiry_heroAnimated__K7mP2. Without JS the text is simply visible. - Only the ambient star drift uses @keyframes; its keyframed transform/opacity carry NO !important (Rule #2.5 corollary). - Mobile-first: base = phones, min-width 361 / 561 / 901 overrides. - Z-index: background layers 0-5, content (h1, intro) 10. - Bottom edge is the earth's pure #000 = contact section background. ===================================================================== */ #DTinquiry_root__K7mP2 .DTinquiry_hero__K7mP2 { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; min-height: 100vh !important; min-height: 100svh !important; overflow: hidden !important; isolation: isolate !important; --DTinquiry-hero-fs: clamp(2rem, 10vw, 3.3rem); --DTinquiry-hero-hot-w: 20%; --DTinquiry-hero-hot-h: 80px; font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300 !important; color: #ffffff !important; background: radial-gradient(ellipse at bottom, #0C1116 0%, #090a0f 100%) !important; background-color: #090a0f !important; } /* ---- Stars (3 parallax layers). Ambient keyframed transform: no !important ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroStars__K7mP2 { position: absolute !important; top: 0 !important; left: 0 !important; display: block !important; background: transparent !important; border-radius: 50% !important; box-shadow: var(--DTinquiry-hero-stars, none) !important; pointer-events: none !important; z-index: 0 !important; contain: strict; will-change: transform; animation-name: DTinquiry_heroStar__K7mP2; animation-timing-function: linear; animation-iteration-count: infinite; } #DTinquiry_root__K7mP2 .DTinquiry_heroStars__K7mP2::after { content: " " !important; position: absolute !important; top: 2000px !important; left: 0 !important; width: inherit !important; height: inherit !important; background: transparent !important; border-radius: 50% !important; box-shadow: var(--DTinquiry-hero-stars, none) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroStars1__K7mP2 { width: 1px !important; height: 1px !important; animation-duration: 50s; } #DTinquiry_root__K7mP2 .DTinquiry_heroStars2__K7mP2 { width: 2px !important; height: 2px !important; animation-duration: 100s; } #DTinquiry_root__K7mP2 .DTinquiry_heroStars3__K7mP2 { width: 3px !important; height: 3px !important; animation-duration: 150s; } @keyframes DTinquiry_heroStar__K7mP2 { from { transform: translateY(0); } to { transform: translateY(-2000px); } } /* ---- Horizon glow (background layer) — base = phones ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroHorizon__K7mP2 { position: absolute !important; display: block !important; width: 340% !important; height: 52% !important; left: 50% !important; bottom: -12% !important; margin-left: -170% !important; border-radius: 100% / 100% !important; background: #038bff !important; /* Living glow (GPU): JS sets --DTinquiry-heroGlow (0.55–1.15) on the hero. The blur filter is STATIC (rasterised once); only OPACITY eases, which the compositor animates without repaint. Values >1 are carried by the separate .heroBoost layer. Opacity is animated: no !important on it. */ -webkit-filter: blur(30px) !important; filter: blur(30px) !important; /* opacity set by JS (concrete) so the transition is compositor-only */ opacity: 1; will-change: opacity; transition: opacity var(--DTinquiry-heroGlowDur, 1.8s) ease-in-out !important; pointer-events: none !important; z-index: 1 !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHorizon__K7mP2::before { content: " " !important; position: absolute !important; width: 81.25% !important; height: 70% !important; margin-left: 9.375% !important; border-radius: 100% / 100% !important; background: #51AFFF !important; -webkit-filter: blur(30px) !important; filter: blur(30px) !important; opacity: 0.6 !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHorizon__K7mP2::after { content: " " !important; position: absolute !important; width: 32% !important; height: 20% !important; margin-left: 34% !important; border-radius: 650px / 350px !important; background: #B0DAFF !important; -webkit-filter: blur(30px) !important; filter: blur(30px) !important; opacity: 0.5 !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroGlow__K7mP2 { position: absolute !important; display: block !important; width: 140% !important; height: 140% !important; top: -30% !important; left: -20% !important; border-radius: 100% / 100% !important; /* soft radial replaces blur(200px) — same look, painted once */ background: radial-gradient(ellipse at 50% 60%, rgba(33, 84, 150, 0.85) 0%, rgba(33, 84, 150, 0.4) 35%, rgba(33, 84, 150, 0) 70%) !important; opacity: 0.85 !important; } /* ---- Earth curve (background layer) — base = phones ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroEarth__K7mP2 { position: absolute !important; display: block !important; width: 420% !important; height: 70% !important; left: 50% !important; bottom: -36% !important; margin-left: -210% !important; border-radius: 100% / 100% !important; background: #000000 !important; pointer-events: none !important; z-index: 2 !important; } /* Bloom right above the rim (follows the curve). Same geometry as the earth, painted once; only its opacity eases with the glow (compositor-only). */ #DTinquiry_root__K7mP2 .DTinquiry_heroEarthGlow__K7mP2 { position: absolute !important; display: block !important; width: 420% !important; height: 70% !important; left: 50% !important; bottom: -36% !important; margin-left: -210% !important; border-radius: 100% / 100% !important; background: transparent !important; box-shadow: 0 0 4px 1px rgba(190, 228, 255, 0.9), 0 0 18px 5px rgba(60, 155, 255, 0.75), 0 0 60px 18px rgba(25, 110, 255, 0.45), 0 0 140px 40px rgba(20, 70, 190, 0.3) !important; opacity: 1; will-change: opacity; transition: opacity var(--DTinquiry-heroGlowDur, 1.8s) ease-in-out !important; pointer-events: none !important; z-index: 2 !important; } /* Brighter-than-normal phase (glow > 1): a soft light layer above the rim that fades in by opacity only. Sits under the earth so the planet stays dark. */ #DTinquiry_root__K7mP2 .DTinquiry_heroBoost__K7mP2 { position: absolute !important; display: block !important; left: 50% !important; bottom: 30% !important; width: 110% !important; height: 46% !important; margin-left: -55% !important; border-radius: 50% !important; background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(150, 205, 255, 0.34) 0%, rgba(60, 150, 255, 0.2) 35%, rgba(30, 110, 255, 0) 100%) !important; opacity: 0; will-change: opacity; transition: opacity var(--DTinquiry-heroGlowDur, 1.8s) ease-in-out !important; pointer-events: none !important; z-index: 1 !important; } /* Crisp electric rim line tracing the curve (inside the earth edge) */ #DTinquiry_root__K7mP2 .DTinquiry_heroRim__K7mP2 { position: absolute !important; display: block !important; inset: 0 !important; border-radius: 100% / 100% !important; background: radial-gradient(ellipse 22% 9% at 50% 0%, rgba(38, 104, 200, 0.32) 0%, rgba(0, 0, 0, 0) 100%) !important; opacity: 1; transition: opacity var(--DTinquiry-heroGlowDur, 1.8s) ease-in-out !important; box-shadow: inset 0 1.5px 0 0 rgba(240, 250, 255, 1), inset 0 3px 3px 0 rgba(150, 210, 255, 0.95), inset 0 8px 16px 0 rgba(40, 140, 255, 0.55), inset 0 22px 44px 0 rgba(20, 90, 210, 0.25) !important; /* brightest at the center, tapering toward the sides */ -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 18%, #000 50%, rgba(0, 0, 0, 0.3) 82%) !important; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 18%, #000 50%, rgba(0, 0, 0, 0.3) 82%) !important; pointer-events: none !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEarth__K7mP2::before { content: " " !important; position: absolute !important; inset: 0 !important; border-radius: 100% / 100% !important; /* center hotspot: intense white-blue bloom sitting on the rim's apex */ inset: auto !important; top: 0 !important; left: 50% !important; width: var(--DTinquiry-hero-hot-w, 34%) !important; height: var(--DTinquiry-hero-hot-h, 90px) !important; margin: calc(var(--DTinquiry-hero-hot-h, 90px) * -1 + 2px) 0 0 calc(var(--DTinquiry-hero-hot-w, 34%) / -2) !important; border-radius: 0 !important; background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(230, 245, 255, 0.85) 0%, rgba(130, 195, 255, 0.55) 16%, rgba(45, 135, 255, 0.24) 44%, rgba(30, 110, 255, 0) 100%) !important; -webkit-filter: blur(4px) !important; filter: blur(4px) !important; opacity: 1; transition: opacity var(--DTinquiry-heroGlowDur, 1.8s) ease-in-out !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEarth__K7mP2::after { content: " " !important; position: absolute !important; inset: 0 !important; border-radius: 100% / 100% !important; background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.95) 100%) !important; z-index: 1 !important; } /* ---- Title = page h1 (content layer). Base = phones: two lines ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2 { --DTinquiry-hero-ls: 0.12em; position: absolute !important; display: block !important; top: 29% !important; left: 0 !important; right: 0 !important; margin: -1.15em 0 0 0 !important; padding: 0 !important; font-family: "Exo 2", "Inter", sans-serif !important; font-weight: 300 !important; font-size: var(--DTinquiry-hero-fs) !important; line-height: 1.15 !important; text-align: center !important; text-transform: uppercase !important; white-space: nowrap !important; letter-spacing: var(--DTinquiry-hero-ls) !important; color: #ffffff !important; background: transparent !important; z-index: 10 !important; transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.6s cubic-bezier(0.19, 1, 0.22, 1) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitleWord__K7mP2 { display: block !important; padding-left: var(--DTinquiry-hero-ls) !important; background: transparent !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; -webkit-filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.16)) !important; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.16)) !important; } /* "DESTINTEL": light-to-electric-blue gradient + soft glow */ #DTinquiry_root__K7mP2 .DTinquiry_heroTitleAccent__K7mP2 { background: linear-gradient(180deg, #eaf5ff 0%, #a9d6ff 38%, #5aaeff 72%, #2f8bff 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; -webkit-filter: drop-shadow(0 0 16px rgba(56, 152, 255, 0.5)) !important; filter: drop-shadow(0 0 16px rgba(56, 152, 255, 0.5)) !important; } /* ---- Eyebrow: spaced caps with thin lines either side (above the h1) ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2 { position: absolute !important; display: block !important; top: 29% !important; left: 0 !important; right: 0 !important; margin: calc(var(--DTinquiry-hero-fs) * -1.15 - 2rem) 0 0 0 !important; padding: 0 0 0 0.3em !important; font-family: "Exo 2", "Inter", sans-serif !important; font-weight: 400 !important; font-size: 0.66rem !important; line-height: 1.4 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; text-align: center !important; white-space: nowrap !important; color: rgba(196, 218, 245, 0.82) !important; background: transparent !important; z-index: 10 !important; transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::before, #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::after { content: "" !important; display: inline-block !important; width: 18px !important; height: 1px !important; vertical-align: middle !important; margin: -2px 0.7em 0 0.4em !important; background: linear-gradient(to right, rgba(90, 160, 255, 0), rgba(120, 180, 255, 0.85)) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::after { margin: -2px 0.4em 0 0.4em !important; background: linear-gradient(to left, rgba(90, 160, 255, 0), rgba(120, 180, 255, 0.85)) !important; } /* ---- Intro: "Initialize Inquiry" (h2) + tagline (content layer) ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroIntro__K7mP2 { position: absolute !important; display: block !important; top: 41% !important; left: 0 !important; right: 0 !important; padding: 0 1.25rem !important; text-align: center !important; z-index: 10 !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHeading__K7mP2 { display: block !important; margin: 0 !important; padding: 0 0 0 0.3em !important; font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important; font-weight: 500 !important; font-size: 0.9rem !important; line-height: 1.4 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: #e6edf7 !important; background: transparent !important; transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTagline__K7mP2 { display: block !important; max-width: 30rem !important; margin: 0.85rem auto 0 !important; padding: 0 !important; font-family: "Inter", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300 !important; font-size: 0.95rem !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; color: #aab5c5 !important; background: transparent !important; transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important; } /* ---- Class-based entry states (Section 10.5) ---- */ #DTinquiry_root__K7mP2 .DTinquiry_heroAnimateIn__K7mP2 { opacity: 0 !important; transform: translateY(-26px) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2.DTinquiry_heroAnimateIn__K7mP2 { /* was a letter-spacing squeeze (layout every frame); now a GPU scale */ transform: translateY(-26px) scale(0.9, 1) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroAnimateIn__K7mP2.DTinquiry_heroAnimated__K7mP2 { opacity: 1 !important; transform: translate(0, 0) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2.DTinquiry_heroAnimateIn__K7mP2.DTinquiry_heroAnimated__K7mP2 { transform: translate(0, 0) !important; } /* Offscreen / hidden-tab pause (set by JS via IntersectionObserver) */ #DTinquiry_root__K7mP2 .DTinquiry_heroPaused__K7mP2 .DTinquiry_heroStars__K7mP2 { animation-play-state: paused !important; } /* ---- Large phones (361px+) ---- */ @media (min-width: 361px) { #DTinquiry_root__K7mP2 .DTinquiry_heroTagline__K7mP2 { font-size: 1rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2 { font-size: 0.7rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::before, #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::after { width: 30px !important; } } /* ---- Tablets (561px+) ---- */ @media (min-width: 561px) { #DTinquiry_root__K7mP2 .DTinquiry_hero__K7mP2 { --DTinquiry-hero-fs: clamp(3rem, 8.5vw, 4.6rem); --DTinquiry-hero-hot-w: 18%; --DTinquiry-hero-hot-h: 80px; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2 { top: 35% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2 { top: 35% !important; margin-top: calc(var(--DTinquiry-hero-fs) * -1.15 - 2.4rem) !important; font-size: 0.76rem !important; letter-spacing: 0.42em !important; padding-left: 0.42em !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::before, #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::after { width: 56px !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroIntro__K7mP2 { top: 69% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHeading__K7mP2 { font-size: 1.1rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEarth__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroEarthGlow__K7mP2 { width: 260% !important; margin-left: -130% !important; height: 80% !important; bottom: -38% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHorizon__K7mP2 { width: 220% !important; margin-left: -110% !important; height: 60% !important; bottom: -14% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroBoost__K7mP2 { bottom: 34% !important; height: 48% !important; } } /* ---- Desktop (901px+) — single-line title, original pen geometry ---- */ @media (min-width: 901px) { #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2 { --DTinquiry-hero-ls: 0.1em; top: 36% !important; margin-top: -0.6em !important; } #DTinquiry_root__K7mP2 .DTinquiry_hero__K7mP2 { --DTinquiry-hero-fs: clamp(2.6rem, 5.4vw, 92px); --DTinquiry-hero-hot-w: 24%; --DTinquiry-hero-hot-h: 96px; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2 { top: 36% !important; margin-top: calc(var(--DTinquiry-hero-fs) * -0.6 - 2.8rem) !important; font-size: 0.8rem !important; letter-spacing: 0.45em !important; padding-left: 0.45em !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::before, #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2::after { width: 76px !important; margin-left: 1.2em !important; margin-right: 1.2em !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitleWord__K7mP2 { display: inline-block !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroIntro__K7mP2 { top: 72% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHeading__K7mP2 { font-size: clamp(1.1rem, 1.6vw, 1.55rem) !important; letter-spacing: 0.32em !important; padding-left: 0.32em !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTagline__K7mP2 { max-width: 40rem !important; margin-top: 1rem !important; font-size: 1.1rem !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEarth__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroEarthGlow__K7mP2 { width: 200% !important; margin-left: -100% !important; height: 100% !important; bottom: -50% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHorizon__K7mP2 { width: 160% !important; margin-left: -80% !important; height: 70% !important; bottom: -20% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroBoost__K7mP2 { bottom: 40% !important; width: 90% !important; margin-left: -45% !important; height: 42% !important; } } /* ---- Short landscape phones (e.g. 667x375, 844x390): keep title above the horizon, eyebrow off the top edge, and give the hero a sensible floor ---- */ @media (orientation: landscape) and (max-height: 520px) { #DTinquiry_root__K7mP2 .DTinquiry_hero__K7mP2 { --DTinquiry-hero-fs: clamp(1.9rem, 9.5vh, 2.6rem); min-height: max(100svh, 400px) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2 { top: 34% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroEyebrow__K7mP2 { margin-top: calc(var(--DTinquiry-hero-fs) * -1.15 - 1.6rem) !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroIntro__K7mP2 { top: 70% !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTagline__K7mP2 { margin-top: 0.5rem !important; } } /* ---- Reduced motion: no drift, no entry animation, text shown statically ---- */ @media (prefers-reduced-motion: reduce) { #DTinquiry_root__K7mP2 .DTinquiry_heroStars__K7mP2 { animation: none !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroHorizon__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroEarthGlow__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroBoost__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroRim__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroEarth__K7mP2::before { opacity: 1 !important; transition: none !important; will-change: auto !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroBoost__K7mP2 { opacity: 0 !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroStagger__K7mP2 { transition: none !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2.DTinquiry_heroAnimateIn__K7mP2, #DTinquiry_root__K7mP2 .DTinquiry_heroStagger__K7mP2.DTinquiry_heroAnimateIn__K7mP2 { opacity: 1 !important; transform: none !important; } #DTinquiry_root__K7mP2 .DTinquiry_heroTitle__K7mP2.DTinquiry_heroAnimateIn__K7mP2 { letter-spacing: var(--DTinquiry-hero-ls) !important; } } /* ===================== /HERO ===================== */ #destintel-footer, #destintel-footer .footer, #destintel-footer .footer *, #destintel-footer .footer *::before, #destintel-footer .footer *::after { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; font-family: &amp;amp;amp;amp;amp;amp;#039;Inter&amp;amp;amp;amp;amp;amp;#039;, -apple-system, BlinkMacSystemFont, &amp;amp;amp;amp;amp;amp;quot;Segoe UI&amp;amp;amp;amp;amp;amp;quot;, Roboto, Helvetica, Arial, sans-serif !important; } #destintel-footer .footer a { text-decoration: none !important; color: inherit !important; } #destintel-footer .footer ul { list-style: none !important; } #destintel-footer { background-color: #0b0f19 !important; color: #94a3b8 !important; line-height: 1.5 !important; } #destintel-footer .footer { padding: 60px 5% 20px !important; max-width: 1400px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; position: relative !important; isolation: isolate !important; } #destintel-footer .footer-content { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1fr !important; gap: 40px !important; margin-bottom: 60px !important; } #destintel-footer .footer-brand { display: flex !important; flex-direction: column !important; gap: 20px !important; } #destintel-footer .brand-header { margin-bottom: 10px !important; } #destintel-footer .brand-logo { width: 180px !important; height: auto !important; display: block !important; } #destintel-footer .brand-description { font-size: 14px !important; line-height: 1.6 !important; color: #94a3b8 !important; max-width: 300px !important; } #destintel-footer .social-icons { display: flex !important; gap: 12px !important; margin-top: 10px !important; } #destintel-footer .social-icon { width: 36px !important; height: 36px !important; border-radius: 50% !important; background-color: #1e293b !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; transition: background-color 0.3s !important; } #destintel-footer .social-icon:hover { background-color: #334155 !important; } #destintel-footer .social-icon svg { width: 16px !important; height: 16px !important; fill: currentColor !important; } #destintel-footer .footer-column h3 { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; color: #ffffff !important; text-transform: uppercase !important; margin-bottom: 24px !important; } #destintel-footer .footer-column ul { display: flex !important; flex-direction: column !important; gap: 16px !important; } #destintel-footer .footer-column ul li a { color: #94a3b8 !important; font-size: 14px !important; transition: color 0.3s !important; } #destintel-footer .footer-column ul li a:hover { color: #00d2be !important; } #destintel-footer .contact-list { display: flex !important; flex-direction: column !important; gap: 16px !important; margin-top: 24px !important; } #destintel-footer .contact-item { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 14px !important; color: #94a3b8 !important; } #destintel-footer .contact-item a:hover { color: #00d2be !important; } #destintel-footer .contact-icon { width: 18px !important; height: 18px !important; fill: #00d2be !important; flex-shrink: 0 !important; } #destintel-footer .footer-bottom { border-top: 1px solid #1e293b !important; padding-top: 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; color: #64748b !important; text-transform: uppercase !important; } #destintel-footer .certifications { display: flex !important; gap: 24px !important; } #destintel-footer .scroll-top { position: absolute !important; bottom: 30px !important; right: 5% !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #0f172a !important; border: 1px solid #1e293b !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; opacity: 0 !important; pointer-events: none !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; } #destintel-footer .scroll-top.visible { opacity: 1 !important; pointer-events: all !important; } #destintel-footer .scroll-top:hover { background-color: #1e293b !important; transform: translateY(-2px) !important; } #destintel-footer .scroll-top svg { width: 20px !important; height: 20px !important; fill: #00d2be !important; } @media (max-width: 900px) { #destintel-footer .footer-content { grid-template-columns: 1fr 1fr !important; gap: 30px !important; } #destintel-footer .brand-logo { width: 150px !important; } #destintel-footer .footer-bottom { flex-direction: column !important; gap: 16px !important; text-align: center !important; } } @media (max-width: 560px) { #destintel-footer .footer-content { grid-template-columns: 1fr !important; gap: 30px !important; } #destintel-footer .brand-logo { width: 140px !important; } #destintel-footer .footer { padding: 40px 5% 20px !important; } #destintel-footer .scroll-top { width: 40px !important; height: 40px !important; } #destintel-footer .scroll-top svg { width: 18px !important; height: 18px !important; } } body{ position: relative; } .dno{ display: none!important; } .public-header{ position: relative; transition:5s; } .absolute-container{ background-color: #ee273a; border-radius: 7px; position: fixed; top: 50%; left: 2%; transform: translateY(-50%); padding: 10px; z-index: 4900; } .social-absolute{ position: relative; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); box-sizing: content-box; width: 24px; height: 24px; } .social-absolute:last-child { border-bottom: none !important; } .social-absolute img{ width: 24px; height: 24px; } .absolute-tooltip{ position: relative; transition: all 0.5s; border-radius: 0 7px 7px 0; font-size: 14px; overflow: hidden; white-space: nowrap; } .absolute-tooltip > span{ padding: 10px 20px; display: block; } .tooltip-shake{ display: block; width: 100%; height: 100%; } .tooltip-shake:before, .tooltip-shake:after { position: absolute; content: ""; opacity: 0; transition: all 0.4s ease; color: #fff; font-weight: bold; } .tooltip-shake:before { content: attr(data-tooltip); background: #0A0C10; width: 0; padding: 0; font-size: 0.9rem; top: 50%; left: calc(24px + 32px); border-radius: 5px; transform: translateY(-50%); overflow: hidden; white-space: nowrap; } .tooltip-shake:after { border-width: 8px 10px 8px 0; border-style: solid; border-color: transparent #0A0C10 transparent transparent; top: 50%; left: calc(24px + 24px); transform: translateY(-50%); } .tooltip-shake:hover::before, .tooltip-shake:hover::after { opacity: 1; overflow: hidden; white-space: nowrap; transform: translate(0, -50%); } .tooltip-shake:hover::before { width: max-content; padding: 10px 25px; } @keyframes shake { 0% { transform: rotate(2deg); } 50% { transform: rotate(-3deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0deg); } } .social-absolute:hover { animation: shake 500ms ease-in-out forwards; } .public-header{ width: 100%; background: #0A0C10; background-size: auto; background-repeat: no-repeat; } .adv-banner-container{ width: 100%; height: 10px; } .adv-banner-container .adv-item{ width: 100%; height: 100%; object-fit: cover; } .top-bar-container{ width: 100%; min-height: 40px; height: 40px; background: #222 ; display: flex; flex-direction: row; justify-content: center; align-items: center; } .top-bar{ width: 1200px; height: 100%; margin: auto; padding: 0 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .top-item{ height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .info-container{ flex-direction: row; justify-content: flex-start; align-items: center; } .info-container img{ width: 16px; height: 16px; } .info-container > span{ display: inline-flex; } .top-info, .top-social{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-social{ padding: 5px 0; } .top-social li a img{ width: 32px; height: 32px; } .top-social li a span{ font-size: 0px; font-weight: 200; color: #777; } .top-list{ width: max-content; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 0px; } .top-list:hover{ color: ; } .top-list:first-child{ margin-left : 0; } .top-list:last-child{ margin-right : 0; } .arrow-menu-container{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .top-list a span, .top-list span{ color: #777; font-weight: bold; font-size: 14px; } .top-list a img, .top-list span img{ margin: 0 5px; width: 24px; height: 24px; object-fit: contain; } .top-list:first-child a img, .top-list:first-child span img{ margin-left: 0; } .top-navbar{ height: 100%; background: transparent; } .top-nav-list{ position: relative; height: 100%; padding: 0 20px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-nav-list a span, .top-nav-list span{ color: #000; font-size: 0px; font-weight: 200;search } .top-nav-list:hover{ background-color: #fff; } .top-nav-list .arrow-menu-container svg{ fill: #000; } .top-nav-list:hover a span, .top-nav-list:hover span, .top-nav-list:hover .arrow-menu-container svg{ color: #fff; fill: #fff; } .top-nav-list .icon-title-part{ padding-left: 5px; } .top-sub-nav > .top-sub-list a span, .top-sub-nav > .top-sub-list span{ color: #000; } .top-sub-nav > .top-sub-list:hover a span, .top-sub-nav > .top-sub-list:hover span{ color: #fff; } .top-sub-nav{ flex-direction: column; justify-content: center; align-content: flex-start; position: absolute; z-index: 4999; min-width: 150px; width: max-content; background: #2c3e50; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translateY(-10px) scaleY(0.5); transform-origin: top; border-radius: 0; } .top-nav-list:hover > .top-sub-nav{ display: flex; top: 100%; clip: auto; opacity: 1; transform: translateY(0) scaleY(1); } .top-nav-list:hover > .top-sub-nav{ left: 0; } .top-sub-list{ border-right: 5px solid #f00; } .top-sub-list{ width: 100%; padding: 8px 20px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-sub-list:hover{ background: #fff; } .header-container{ display: grid; width: 1200px; margin: auto; height: auto; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 3fr 1fr; grid-template-areas: "top-1 top-2 top-3" "bottom-1 bottom-2 bottom-3"; padding-top: 8px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; } .top-section-1{ grid-area: top-1; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-section-2{ grid-area: top-2; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .top-section-3{ grid-area: top-3; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .logo-container{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 4px 4px; } .logo-container img{ display: block; width: 220px; height: 55px; max-width: 220px; max-height: 55px; object-fit: contain; } .nav-container{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; box-sizing: border-box; margin: 0 10px; } .nav-container > .navbar{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background: #0A0C10; box-sizing: border-box; border: px solid ; border-radius: 3px; padding: 0 !important; } .nav-container > .navbar{ margin-right: calc(0px + 10px); } .max-height{ height: 700px; overflow-x:hidden; overflow-y: auto; display:flex!important; flex-direction: column!important; justify-content: flex-start!important; } .nav-container .navbar .nav-list{ padding: 10px 18px; min-height: 45px; position: relative; list-style: none; display: flex; flex-direction: row; justify-content: space-between; align-content: center; box-sizing: border-box; } .nav-container .navbar .nav-list.active{ background-color: ; } .nav-container .navbar .nav-list.active a, .nav-container .navbar .nav-list.active span{ color: #4f8dff; } .nav-container .navbar .nav-list .icon-title-part{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .nav-container .navbar .nav-list .icon-title-part img{ width: 24px; height: 24px; margin: 0 5px; } .nav-container .navbar .nav-list .overflow-menu{ justify-content: center !important; } .nav-container .navbar .nav-list:hover{ background-color: ; box-sizing: border-box; } .nav-container .navbar .nav-list:hover a, .nav-container .navbar .nav-list:hover span{ color: #a2c0fa ; } .nav-container .navbar .nav-list img{ width: 32px; height: 32px; } .nav-container .navbar .nav-list a, .nav-container .navbar .nav-list span{ text-decoration: none; font-size: 14px; color: #fff; } .nav-container .navbar .nav-list.base-level:hover > .navbar.navbar-sub, .nav-container .navbar .nav-list:hover > .overflow-menu > .navbar.navbar-sub{ display: flex; top: 45px; clip: auto; opacity: 1; transform: translateY(0) scaleY(1); } .nav-container .navbar .nav-list:hover > .navbar.navbar-sub{ display: flex; right: calc(100% + 5px); top: 0; clip: auto; opacity: 1; transform: translateY(0) scaleY(1); } .nav-container .navbar.navbar-sub{ flex-direction: column; justify-content: center; align-content: flex-start; min-width: 150px; width: max-content; } .nav-container .navbar.navbar-sub .nav-list{ width: 100%; border-right: 5px solid red; } .nav-container .navbar.navbar-sub{ position: absolute; z-index: 4999; background: #fff; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translateY(-10px) scaleY(0.5); transform-origin: top; border-radius: 0; } .nav-container .navbar.navbar-sub{ flex-direction: column; justify-content: center; align-content: flex-start; min-width: 150px; width: max-content; } .nav-container .navbar .nav-list.base-level:hover > .navbar.navbar-sub, .nav-container .navbar .nav-list:hover > .overflow-menu > .navbar.navbar-sub{ left: 0; border-radius: 0 !important; } .nav-container .navbar .nav-list:hover > .navbar.navbar-sub{ left: calc(100% + 5px); } .nav-container .navbar.navbar-sub .nav-list{ width: 200px; border-right: 5px solid red; border-radius: 0 !important; } .nav-container .navbar .nav-list.base-level:hover > .navbar.navbar-sub, .nav-container .navbar .nav-list:hover > .overflow-menu > .navbar.navbar-sub{ left: 0; } .nav-container .navbar .nav-list:hover > .navbar.navbar-sub{ left: calc(100% + 5px); } .arrow-icon-menu{ width: 8px; height: 8px; } .arrow-icon-menu.arrow-bottom{ transform: rotate(90deg); } .arrow-menu-container{ margin-left: 5px; } .arrow-icon-menu.arrow-right, .overflow-list .arrow-icon-menu.arrow-bottom{ transform: rotate(0deg); } .nav-container .navbar .nav-list:first-child:hover{ border-radius: 3px 0 0 3px; } .nav-container .navbar .nav-list:last-child:hover{ border-radius: 0 3px 3px 0; } .nav-container .navbar .nav-list.base-level svg, .nav-container .navbar .nav-list .overflow-menu svg{ fill: #fff; } .nav-container .navbar .nav-list.base-level:hover svg{ fill: #a2c0fa; } .sub-menu-container{ position: absolute; min-width: 150px; background-color: #fff; color: #fff; top: 32px; right: 0; z-index: 4999; /* display: none;*/ } /*.sub-navbar{ width: 100%; height: 100%; }*/ .nav-container .navbar.navbar-sub .nav-list img{ width: 16px; height: 16px; } .nav-container .navbar.navbar-sub .nav-list a, .nav-container .navbar.navbar-sub .nav-list span{ color: #000; font-size: 12px; } .nav-list.with-sub-menu:hover .sub-menu-container{ display: block; } .nav-container .navbar.navbar-sub .nav-list .arrow-menu-container svg{ fill: #000; } .active{ background-color: ; } .active a{ color: #4f8dff; } .icon-container{ display: flex; flex-direction: row; justify-content: center; align-content: center; } .icon-container .icon-item{ display: flex; flex-direction: row; justify-content: center; align-content: center; box-sizing: border-box; min-height: 45px; margin: 0 5px; } .icon-container .icon-item:first-child{ margin-left: 0 !important; } .icon-container .icon-item:last-child{ margin-right: 0 !important; } .icon-container .icon-item a{ border: 0px solid ; } .icon-container .icon-item.basket-icon{ position: relative; color: #e84118; min-width: 45px; min-height: 45px; outline: none; border-radius: 3px; background: #2c3e50; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; margin: 0 10px; } .icon-container .icon-item .icon-shortcut{ color: #e84118; min-width: 45px; min-height: 45px; margin: 0; outline: none; border-radius: 3px; background: #2c3e50; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: .4s; cursor: pointer; text-decoration: none; } .basket-shop{ display: flex; flex-direction: row; justify-content: center; align-items: center; width: 45px; height: 45px; border-radius: 3px; } .icon-container .icon-item .icon-shortcut:hover svg, .icon-container .icon-item .icon-shortcut:hover .add-item-to-cart.open span { fill: #fff; color: #fff; } .icon-container .icon-item.basket-icon .add-item-to-cart{ color: #e84118; border-radius: 3px; background: #2c3e50; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: .4s; cursor: pointer; box-sizing: content-box; border: 0px solid ; } .icon-container .icon-item.basket-icon .add-item-to-cart{ border-right: none !important; } .border-basket{ border-left: none !important; } .icon-container .icon-item:hover > span, .icon-container .icon-item.login-icon:hover span{ color: #fff; } .icon-container .icon-item.basket-icon .icon-shortcut:hover, .icon-container .icon-item.login-icon .icon-shortcut:hover, .icon-container .icon-item.basket-icon .icon-shortcut:hover .add-item-to-cart{ background: #3e5772; } .icon-container .icon-item.basket-icon .add-item-to-cart.open{ width: 45px; border-radius: 0 3px 3px 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } .icon-container .icon-item.basket-icon:hover .add-item-to-cart.open{ background: #3e5772; } .icon-container .icon-item.basket-icon .add-item-to-cart.open:hover span{ color: #fff; } .icon-container .icon-item.basket-icon .add-item-to-cart.open + .icon-shortcut{ border-radius: 3px 0 0 3px; } .icon-container .icon-item.lang-icon .icon-shortcut:hover{ background: #3e5772; } .icon-container .icon-item.search-icon .icon-shortcut .search-container .search-btn:hover{ background: #3e5772; } .icon-container .icon-item svg{ width: 25px; height: 25px; fill: #e84118; } .icon-container .icon-item.login-icon{ position: relative; } /*.icon-container .icon-item.login-icon .icon-shortcut{ width: 100%; height: 100%; }*/ .icon-container .icon-item.login-icon .icon-login{ width: 25px; height: 25px; } #div_profile_picture, #div_profile_picture_metro { display: block; width: 0 !important; height: 0 !important; line-height: unset !important; } #div_profile_picture .rShowLogin{ position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: -1000; } #div_profile_picture .login-container{ display: none !important; } #div_profile_picture #profile_picture, #div_profile_picture #profile_exit{ display: none !important; } .icon-container .icon-item.login-icon{ color: #e84118; /*width: 90px !important;*/ min-height: 45px; outline: none; border-radius: 3px; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; box-sizing: content-box; border: 0px solid ; } .icon-container .icon-item.login-icon .status-user, .icon-container .icon-item.login-icon .icon-login{ display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; margin: 0 5px; font-size:14px; } .public-header .bottom-section-1{ grid-area: bottom-1; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .public-header .bottom-section-2{ grid-area: bottom-2; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .public-header .bottom-section-3{ grid-area: bottom-3; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .icon-container .icon-item{ width: unset; height: unset; } .search-icon{ position: relative; } .search-container { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; height: 100%; position: relative; border-radius: 3px; min-width: 45px; } .search-container > .search-btn svg, .search-container > .close-search-btn svg{ fill: #e84118; } .search-container > .search-btn:hover svg, .search-container > .close-search-btn:hover svg{ fill: #fff; } .search-btn { color: #fff; width: 45px; height: 45px; margin: 0; outline: none; border-radius: 3px; background: #2c3e50; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: .8s; cursor: pointer; text-decoration: none; border: 0px solid transparent; } .icon-container .icon-item img{ width: 25px; height: 25px; object-fit:contain; } .search-container.open-search-box .search-btn{ border-radius: 0 3px 3px 0 !important; } .search-container.open-search-box .close-search-btn{ border-radius: 3px 0 0 3px !important; } .search-btn, .search-command, .close-search-btn{ box-sizing: content-box; } .search-btn > svg { fill: #fff; } .cls-pls::placeholder{ color: ; } .search-input { padding: 0; height: 100%; background: #2c3e50; color: #fff; font-size: 14px; font-weight: normal; transition: all 1s ease-in-out; width: 0; position: absolute; top: 0; overflow: hidden; white-space: nowrap; border: 0px solid transparent; } .open-search-box > .search-input{ padding : 10px 48px; } .search-input { right: calc(0px + 45px); border-right: none; border-left: none; } .search-container.open-search-box .search-btn{ border-radius: 0 3px 3px 0 !important; } .search-container.open-search-box .close-search-btn{ border-radius: 3px 0 0 3px !important; } .search-container.open-search-box .search-input{ border-radius: 3px 0 0 3px !important; } .close-search-btn{ position: absolute; color: #fff; width: 45px; height: 45px; margin: 0; outline: none; border-radius: 3px; background: #2c3e50; display: flex; flex-direction: row; justify-content: center; align-items: center; cursor: pointer; box-sizing: border-box; box-sizing: border-box; } .close-search-btn svg{ fill: #e84118; } .sticky{ width: 100vw; height: max-content; position: fixed; top: 0; right: 0; left: 0; z-index: 999; padding: 2vh 8vw; transition: .8s; background-color: #0A0C10 !important; } .public_sticky{ width: 100%; height: max-content; position: fixed; top: 0; right: 0; left: 0; z-index: 1001; } .d-none{ display: none !important; } .border-left-n{ border-left: none !important; } .border-right-n{ border-right: none !important; } .w-1200px{ width: 1200px !important; margin: auto; } .lang-icon{ position: relative; } .language-container .lang-btn{ width: 25px; height: 25px; } .lang-list-container{ width: max-content; height: max-content; padding-top: 20px; position: absolute; top: 35px; left: 50%; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translate(-50%, 0) scaleY(0.5); transform-origin: top; z-index: 100; } .lang-list{ position: relative; width: max-content; height: max-content; padding: 10px; background: #2c3e50; border-radius: 3px; } .lang-list::after{ content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #2c3e50; display: block; } .lang-nav{ display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .lang-nav .lang-li{ display: flex; flex-direction: row; justify-content: center; align-items: center; list-style: none; width: max-content; margin: 5px 0; } .lang-nav .lang-li a{ display: flex; flex-direction: row; justify-content: center; align-items: center; } .lang-nav .lang-li img{ width: 25px; height: 25px; object-fit: cover; margin: 0 4px; } .lang-nav .lang-li span{ text-transform: uppercase; line-height: 2.5; font-size: 14px; margin: 0 4px; color: #fff; } .lang-nav .lang-li a{ color: #fff; } .lang-nav .lang-li span:hover{ cursor: pointer; color: #fff; } .lang-nav .lang-li .lang-active{ font-weight: bold; color: #e84118; } .icon-item.lang-icon:hover .lang-list-container{ clip: auto; opacity: 1; transform: translate(-50%, 0) scaleY(1); } /*---------------------------------------------------------------------------------*/ .link-profile-container{ width: max-content; height: max-content; padding-top: 20px; position: absolute; top: 35px; left: 50%; clip: rect(1px, 1px, 1px, 1px); opacity: 0.1; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1); transform: translate(-50%, 0) scaleY(0.5); transform-origin: top; z-index: 100; } .link-profile-container .link-wrapper{ position: relative; width: max-content; height: max-content; padding: 10px 25px; background: #2c3e50; border-radius: 3px; } .link-profile-container .link-wrapper a{ color: #fff; } .link-profile-container .link-wrapper a:hover{ cursor: pointer; color: #fff; } .link-profile-container .link-wrapper::after{ content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #2c3e50; display: block; } .icon-item.login-icon:hover .link-profile-container{ clip: auto; opacity: 1; transform: translate(-50%, 0) scaleY(1); } .backTop{ display: flex !important; } #back_to_top{ display: none; position: fixed; transition: 600ms; right: 16px; left: unset; bottom: 50px; z-index: 100; border-radius: 50%; border: 1px solid #000; padding: 15px; flex-direction: row; justify-content: center; align-items: center; background-color: #777 ; } #back_to_top svg{ width: 24px; height: 24px; fill: #fff ; } #back_to_top img{ width: 24px; height: 24px; fill: #fff ; object-fit:contain; } .search-btn img{ width: 25px; height: 25px; object-fit: contain; } .basket-shop img{ width: 25px; height: 25px; object-fit: contain; } .lang-btn img{ width: 25px; height: 25px; object-fit: contain; } .icon-login img{ width: 25px; height: 25px; object-fit: contain; } .header-container{ grid-template-rows: 1fr; grid-template-columns: 220px minmax(auto, 100%) 1fr; grid-template-areas: "top-1 top-2 top-3"; } .top-section-1{ justify-content: flex-start; } .top-section-2{ justify-content: flex-start; } .logo-container{ justify-content: flex-start; } .nav-container{ justify-content: flex-start; } .nav-container .navbar{ justify-content: flex-start; } .width-full{ width: 100% !important; } #msg_footer.msg_footer, #msg_footer_complete.msg_footer{ position: fixed; top: 50px; right: 10px; width: 400px; height: 50px; z-index: 10000; border-radius: 3px; } #msg_footer .d_flex, #msg_footer_complete .d_flex{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 100%; padding: 0 15px; } #msg_footer.green_msg_footer { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; } #msg_footer.red_msg_footer, #msg_footer_complete.red_msg_footer{ background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } #msg_footer .close_msg, #msg_footer_complete .close_msg{ cursor: pointer; font-size: 25px; padding-right: 15px; } #msg_footer .close_msg:hover, #msg_footer_complete .close_msg:hover{ color: #000; } .border_red{ border: 1px solid #e20000; } footer a{ color: inherit; } .dno{display:none!important;} #body_popup_1,#body_popup_2{ position:fixed; display:flex; text-align:center; top:0; bottom:0; right:0; left:0; z-index:99999; visibility:hidden; opacity: 0; background:rgba(0,0,0,0.5); } #body_popup_1.open-popup,#body_popup_2.open-popup{ visibility:visible; opacity: 1; } #body_popup_1 > div,#body_popup_2 > div{ display:block; background:#fff; padding:10px; margin:auto; transform:translateY(-150px); -webkit-transition:transform .3s;-moz-transition:transform .3s;-ms-transition:transform .3s;-o-transition:transform .3s;transition:transform .3s; text-align:center; border-radius:10px; position:relative; z-index:999999; } #body_popup_1.open-popup > div,#body_popup_1.open-popup > div{ transform:translateY(0); } #body_popup_1 .icon-close-popup{ position:absolute; font-size:30px; height:30px; width:30px; border-radius:50%; color:red; top:-10px; right:-10px; background-color:transparent; z-index:9999; } #body_popup_1 .icon-close-popup i{ position:absolute; top:0; right:0; } #body_popup_1 .container-html{ height:100%; overflow:auto; max-height:90vh; } #body_popup_1 .container-html::-webkit-scrollbar{ width:5px; height:100%; } #body_popup_1 .container-html::-webkit-scrollbar-track{ background-color:transparent; } #body_popup_1 .container-html::-webkit-scrollbar-thumb{ background-color:#777; border-radius:20%; } #body_popup_1 .icon-close-popup{ color:#fff; top:0; right:0; } #module_waiting_box{ position:fixed; background:rgba(256,256,256,0.8); width:100%; height:100%; -webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s; top:0; right:0; opacity:0; z-index:9999999999999; visibility:hidden; } #module_waiting_box.show-waiting{ visibility:visible; opacity:1; } #module_waiting_box .spinner { margin: 100px auto 0; width: 70px; text-align: center; } #module_waiting_box .spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } #module_waiting_box .spinner .bounce1 { -webkit-animation-delay: -0.35s; animation-delay: -0.35s; } #module_waiting_box .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 95%, 100% { -webkit-transform: scale(0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 95%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1.0); transform: scale(1.0); } } body{direction: ltr;text-align: left;}