/* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 01 DESIGN TOKENS ========================================================== */ :root{ /* ====================================================== BRAND ====================================================== */ --oz-primary:#6C3BFF; --oz-primary-light:#8F67FF; --oz-secondary:#00D4FF; --oz-secondary-light:#5BE7FF; --oz-success:#22C55E; --oz-warning:#F59E0B; --oz-danger:#EF4444; /* ====================================================== BACKGROUNDS ====================================================== */ --oz-bg:#050816; --oz-bg-soft:#0C1226; --oz-bg-card:#111A34; --oz-bg-hover:#172244; --oz-glass:rgba(15,23,42,.78); /* ====================================================== TEXT ====================================================== */ --oz-text:#FFFFFF; --oz-text-secondary:#CBD5E1; --oz-text-muted:#94A3B8; /* ====================================================== BORDER ====================================================== */ --oz-border:rgba(255,255,255,.08); --oz-border-hover:rgba(255,255,255,.16); /* ====================================================== ICONS ====================================================== */ --oz-icon-size:20px; --oz-arrow-size:16px; /* ====================================================== LOGO ====================================================== */ --oz-logo-size:42px; /* ====================================================== HEADER ====================================================== */ --oz-header-height:62px; /* ====================================================== FOOTER ====================================================== */ --oz-footer-height:46px; /* ====================================================== WIDGET ====================================================== */ --oz-widget-width:350px; --oz-widget-max-height:440px; /* ====================================================== MOBILE ====================================================== */ --oz-mobile-width:calc(100vw - 24px); --oz-mobile-max-height:82vh; /* ====================================================== BORDER RADIUS ====================================================== */ --oz-radius-sm:10px; --oz-radius-md:16px; --oz-radius-lg:22px; --oz-radius-pill:999px; /* ====================================================== SPACING ====================================================== */ --oz-space-1:4px; --oz-space-2:6px; --oz-space-3:10px; --oz-space-4:14px; --oz-space-5:16px; --oz-space-6:20px; --oz-space-7:26px; /* ====================================================== SHADOWS ====================================================== */ --oz-shadow-sm: 0 3px 10px rgba(0,0,0,.18); --oz-shadow: 0 10px 28px rgba(0,0,0,.30); --oz-shadow-glow: 0 0 22px rgba(108,59,255,.14); /* ====================================================== TRANSITIONS ====================================================== */ --oz-transition-fast:.18s ease; --oz-transition:.28s ease; --oz-transition-slow:.40s ease; /* ====================================================== LAYERS ====================================================== */ --oz-z-widget:99999; --oz-z-overlay:99998; --oz-z-trigger:100000; /* ====================================================== TYPOGRAPHY ====================================================== */ --oz-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --oz-font-size-xs:11px; --oz-font-size-sm:12px; --oz-font-size-md:13px; --oz-font-size-lg:15px; --oz-font-size-xl:17px; --oz-font-size-xxl:20px; --oz-font-weight-regular:400; --oz-font-weight-medium:500; --oz-font-weight-semibold:600; --oz-font-weight-bold:700; } /* ========================================================== END BLOCK 01 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 02 RESET ========================================================== */ /* ========================================================== ROOT ========================================================== */ .oz-connect{ font-family:var(--oz-font-family); font-size:var(--oz-font-size-md); color:var(--oz-text); line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* ========================================================== BOX MODEL ========================================================== */ .oz-connect, .oz-connect *, .oz-connect *::before, .oz-connect *::after{ box-sizing:border-box; } /* ========================================================== HEADINGS ========================================================== */ .oz-connect h1, .oz-connect h2, .oz-connect h3, .oz-connect h4, .oz-connect h5, .oz-connect h6{ margin:0; padding:0; font-weight:inherit; line-height:1.3; } /* ========================================================== PARAGRAPHS ========================================================== */ .oz-connect p{ margin:0; padding:0; } /* ========================================================== SMALL ========================================================== */ .oz-connect small{ font-size:inherit; } /* ========================================================== STRONG ========================================================== */ .oz-connect strong{ font-weight:var(--oz-font-weight-semibold); } /* ========================================================== BUTTONS ========================================================== */ .oz-connect button{ margin:0; padding:0; border:none; outline:none; background:none; color:inherit; font:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; } /* ========================================================== IMAGES ========================================================== */ .oz-connect img{ display:block; max-width:100%; height:auto; user-select:none; -webkit-user-drag:none; } /* ========================================================== LINKS ========================================================== */ .oz-connect a{ color:inherit; text-decoration:none; } /* ========================================================== LISTS ========================================================== */ .oz-connect ul, .oz-connect ol{ margin:0; padding:0; list-style:none; } /* ========================================================== SVG ========================================================== */ .oz-connect svg{ display:block; } /* ========================================================== FOCUS ========================================================== */ .oz-connect :focus{ outline:none; } /* ========================================================== SELECTION ========================================================== */ .oz-connect ::selection{ background:rgba(0,212,255,.20); color:#FFFFFF; } /* ========================================================== SCROLLBAR ========================================================== */ .oz-connect *{ scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.20) transparent; } .oz-connect *::-webkit-scrollbar{ width:6px; height:6px; } .oz-connect *::-webkit-scrollbar-track{ background:transparent; } .oz-connect *::-webkit-scrollbar-thumb{ border-radius:999px; background:rgba(255,255,255,.20); } .oz-connect *::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35); } /* ========================================================== END BLOCK 02 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 03 WIDGET ========================================================== */ /* ========================================================== ROOT ========================================================== */ .oz-connect{ position:fixed; right:24px; bottom:24px; z-index:var(--oz-z-widget); } /* ========================================================== POSITIONS ========================================================== */ .oz-connect[data-position="left"]{ left:24px; right:auto; } .oz-connect[data-position="right"]{ right:24px; left:auto; } /* ========================================================== WINDOW ========================================================== */ .oz-connect-window{ position:absolute; right:0; bottom:88px; width:var(--oz-widget-width); max-height:var(--oz-widget-max-height); opacity:0; visibility:hidden; pointer-events:none; transform: translateY(24px) scale(.96); transition: opacity var(--oz-transition), transform var(--oz-transition), visibility var(--oz-transition); } /* ========================================================== OPEN ========================================================== */ .oz-connect.is-open .oz-connect-window{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); } /* ========================================================== CLOSED ========================================================== */ .oz-connect:not(.is-open) .oz-connect-window{ pointer-events:none; } /* ========================================================== CONTAINER ========================================================== */ .oz-connect-container{ display:flex; flex-direction:column; width:100%; height:100%; max-height:inherit; overflow:hidden; } /* ========================================================== BODY ========================================================== */ .oz-connect-body{ display:flex; flex:1; min-height:0; overflow:hidden; } /* ========================================================== CONTENT ========================================================== */ .oz-connect-content{ display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; } /* ========================================================== HIDDEN ========================================================== */ .oz-connect[hidden]{ display:none !important; } /* ========================================================== END BLOCK 03 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 04 TRIGGER ========================================================== */ /* ========================================================== BUTTON ========================================================== */ /* ========================================================== BUTTON ========================================================== */ .oz-connect-trigger{ position:relative; display:flex; align-items:center; justify-content:center; width:86px; height:86px; border:none; border-radius:var(--oz-radius-pill); cursor:pointer; overflow:hidden; pointer-events:auto; background: linear-gradient( 135deg, var(--oz-primary), var(--oz-secondary) ); box-shadow: 0 0 18px rgba(0,212,255,.35), 0 0 34px rgba(108,59,255,.22), 0 12px 34px rgba(0,0,0,.28); transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; animation: ozGlow 3.8s ease-in-out infinite; } /* ========================================================== BUTTON ========================================================== */ .oz-connect-trigger{ position:relative; display:flex; align-items:center; justify-content:center; width:86px; height:86px; border:none; border-radius:50%; overflow:hidden; cursor:pointer; background:#FFFFFF; z-index:1; box-shadow: 0 0 18px rgba(0,212,255,.45), 0 0 36px rgba(124,58,237,.35), 0 12px 32px rgba(0,0,0,.28); } /* ========================================================== NEON RING ========================================================== */ .oz-connect-trigger::before{ content:""; position:absolute; inset:-6px; border-radius:50%; background: linear-gradient( 135deg, #00D4FF, #7C3AED ); z-index:-2; filter:blur(4px); } /* ========================================================== WHITE RING ========================================================== */ .oz-connect-trigger::after{ content:""; position:absolute; inset:-2px; border-radius:50%; border:3px solid rgba(255,255,255,.95); z-index:-1; } /* ========================================================== ICON ========================================================== */ .oz-connect-trigger img{ width:92%; height:92%; object-fit:contain; object-position:center; pointer-events:none; user-select:none; border-radius:50%; display:block; } /* ========================================================== HOVER ========================================================== */ .oz-connect-trigger:hover{ transform:translateY(-3px); filter:brightness(1.06); box-shadow: 0 18px 42px rgba(0,0,0,.35), 0 0 34px rgba(108,59,255,.28); } /* ========================================================== ACTIVE ========================================================== */ .oz-connect-trigger:active{ transform:scale(.96); } /* ========================================================== FOCUS ========================================================== */ .oz-connect-trigger:focus-visible{ outline:2px solid var(--oz-secondary); outline-offset:4px; } /* ========================================================== OPEN ========================================================== */ .oz-connect.is-open .oz-connect-trigger{ transform:scale(1.08); box-shadow: 0 0 22px rgba(0,212,255,.65), 0 0 48px rgba(108,59,255,.55), 0 14px 36px rgba(0,0,0,.35); filter:saturate(1.15); animation:none; } .oz-connect-trigger:hover{ transform:translateY(-2px) scale(1.05); box-shadow: 0 0 24px rgba(0,212,255,.55), 0 0 42px rgba(108,59,255,.40), 0 14px 34px rgba(0,0,0,.30); } /* ========================================================== DISABLED ========================================================== */ .oz-connect-trigger:disabled{ cursor:not-allowed; opacity:.60; filter:grayscale(1); box-shadow:none; } /* ========================================================== END BLOCK 04 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 05 WINDOW ========================================================== */ /* ========================================================== CONTAINER ========================================================== */ .oz-connect-container{ position:relative; display:flex; flex-direction:column; width:100%; height:100%; max-height:var(--oz-widget-max-height); overflow:hidden; border-radius:var(--oz-radius-lg); background: linear-gradient( 180deg, rgba(15,23,42,.96), rgba(8,13,27,.98) ); border:1px solid var(--oz-border); box-shadow: var(--oz-shadow), var(--oz-shadow-glow); } /* ========================================================== GLASS ========================================================== */ .oz-connect-container::before{ content:""; position:absolute; left:0; right:0; top:72px; /* abaixo do header */ bottom:0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.03), transparent 28% ); } /* ========================================================== BORDER GLOW ========================================================== */ .oz-connect-container::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; border:1px solid rgba(255,255,255,.05); } /* ========================================================== OPEN EFFECT ========================================================== */ .oz-connect.is-open .oz-connect-container{ animation: ozWindowIn .28s ease both; } /* ========================================================== END BLOCK 05 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 06 HEADER ========================================================== */ /* ========================================================== HEADER ========================================================== */ .oz-connect-header{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; position:relative; z-index:10; min-height:var(--oz-header-height); padding:var(--oz-space-5); background:#162446 !important; border-bottom:1px solid #00D4FF !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.05); } /* ========================================================== BRAND ========================================================== */ .oz-connect-brand{ display:flex; align-items:center; flex:1; min-width:0; gap:var(--oz-space-4); } /* ========================================================== LOGO ========================================================== */ .oz-connect-logo{ width:var(--oz-logo-size); height:var(--oz-logo-size); flex-shrink:0; object-fit:contain; padding:4px; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); } /* ========================================================== BRAND CONTENT ========================================================== */ .oz-connect-brand-content{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; flex:1; min-width:0; gap:1px; } /* ========================================================== COMPANY ========================================================== */ .oz-connect-company{ margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#FFFFFF; font-size:15px; font-weight:700; letter-spacing:.3px; line-height:1.15; } /* ========================================================== TITLE ========================================================== */ .oz-connect-title{ color:#00D4FF; font-size:13px; font-weight:600; line-height:1.1; } /* ========================================================== SUBTITLE ========================================================== */ .oz-connect-subtitle{ margin:2px 0 0; color:rgba(255,255,255,.58); font-size:11px; line-height:1.35; } /* ========================================================== CLOSE ========================================================== */ .oz-connect-close{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:34px; height:34px; margin-left:var(--oz-space-3); border-radius:50%; background:rgba(255,255,255,.06); transition: background var(--oz-transition), transform var(--oz-transition); } /* ========================================================== CLOSE ICON ========================================================== */ .oz-connect-close img{ width:16px; height:16px; opacity:.90; transition: opacity var(--oz-transition), transform var(--oz-transition); } /* ========================================================== CLOSE STATES ========================================================== */ .oz-connect-close:hover{ background:rgba(0,212,255,.12); transform:rotate(90deg); } .oz-connect-close:hover img{ opacity:1; } .oz-connect-close:active{ transform:scale(.90); } .oz-connect-close:focus-visible{ outline:2px solid var(--oz-secondary); outline-offset:2px; } /* ========================================================== END BLOCK 06 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 07 BODY ========================================================== */ /* ========================================================== BODY ========================================================== */ .oz-connect-body{ display:flex; flex:1; min-height:0; overflow:hidden; } /* ========================================================== CONTENT ========================================================== */ .oz-connect-content{ display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; padding:12px; gap:12px; } /* ========================================================== STATUS ========================================================== */ .oz-connect-status{ display:flex; align-items:center; gap:8px; flex-shrink:0; } /* ========================================================== STATUS DOT ========================================================== */ .oz-connect-status-dot{ width:10px; height:10px; border-radius:50%; background:var(--oz-success); box-shadow: 0 0 12px rgba(34,197,94,.45); } /* ========================================================== STATUS TEXT ========================================================== */ .oz-connect-status-text{ color:var(--oz-text-secondary); font-size:13px; font-weight:500; } /* ========================================================== MESSAGE ========================================================== */ .oz-connect-message{ display:flex; flex-direction:column; gap:10px; flex-shrink:0; } /* ========================================================== WELCOME ========================================================== */ .oz-connect-welcome{ color:var(--oz-text); font-size:24px; font-weight:700; line-height:1.15; } /* ========================================================== INTRO ========================================================== */ .oz-connect-intro{ color:var(--oz-text-secondary); font-size:14px; line-height:1.6; } /* ========================================================== DESCRIPTION ========================================================== */ .oz-connect-description{ color:var(--oz-text-muted); font-size:13px; line-height:1.55; } /* ========================================================== FLOW MESSAGE ========================================================== */ .oz-connect-flow-message{ display:block; margin:0 0 12px; padding:4px 0; color:var(--oz-text); text-align:center; font-size:16px; font-weight:700; line-height:1.3; } /* ========================================================== ACTIONS ========================================================== */ .oz-connect-actions{ display:flex; flex-direction:column; gap:14px; flex:1; min-height:0; } /* ========================================================== SCROLL ========================================================== */ .oz-connect-content{ scrollbar-width:none; } .oz-connect-content::-webkit-scrollbar{ width:0px; } .oz-connect-content::-webkit-scrollbar-thumb{ border-radius:999px; background: rgba(255,255,255,.18); } .oz-connect-content::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.30); } /* ========================================================== END BLOCK 07 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 08 CARDS ========================================================== */ /* ========================================================== LIST ========================================================== */ .oz-connect-actions{ display:flex; flex-direction:column; gap:10px; } /* ========================================================== CARD ========================================================== */ .oz-connect-card{ display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:10px 12px; border:none; border-radius:var(--oz-radius-md); background:var(--oz-bg-card); border:1px solid var(--oz-border); color:var(--oz-text); text-align:left; cursor:pointer; transition: background var(--oz-transition), border-color var(--oz-transition), transform var(--oz-transition), box-shadow var(--oz-transition); } /* ========================================================== CARD HOVER ========================================================== */ .oz-connect-card:hover{ background:var(--oz-bg-hover); border-color:rgba(108,59,255,.40); transform:translateY(-2px); box-shadow: 0 10px 24px rgba(108,59,255,.16); } /* ========================================================== CARD ACTIVE ========================================================== */ .oz-connect-card:active{ transform:scale(.985); } /* ========================================================== ICON ========================================================== */ .oz-connect-card-icon{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px; border-radius:10px; background: linear-gradient( 135deg, rgba(108,59,255,.16), rgba(0,212,255,.10) ); } /* ========================================================== ICON IMAGE ========================================================== */ .oz-connect-card-icon img{ width:18px; height:18px; object-fit:contain; } /* ========================================================== CONTENT ========================================================== */ .oz-connect-card-content{ display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; } /* ========================================================== TITLE ========================================================== */ .oz-connect-card-content strong{ margin:0; color:var(--oz-text); font-size:15px; font-weight:600; line-height:1.25; } /* ========================================================== DESCRIPTION ========================================================== */ .oz-connect-card-content span{ margin-top:2px; color:var(--oz-text-muted); font-size:12px; line-height:1.35; } /* ========================================================== ARROW ========================================================== */ .oz-connect-arrow{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:24px; height:24px; margin-left:auto; } /* ========================================================== ARROW IMAGE ========================================================== */ .oz-connect-arrow img{ width:16px; height:16px; opacity:.55; transition: transform var(--oz-transition), opacity var(--oz-transition); } /* ========================================================== ARROW HOVER ========================================================== */ .oz-connect-card:hover .oz-connect-arrow img{ opacity:1; transform:translateX(3px); } /* ========================================================== ICON HOVER ========================================================== */ .oz-connect-card:hover .oz-connect-card-icon{ background: linear-gradient( 135deg, rgba(108,59,255,.24), rgba(0,212,255,.16) ); } /* ========================================================== FOCUS ========================================================== */ .oz-connect-card:focus-visible{ outline:2px solid var(--oz-secondary); outline-offset:2px; } /* ========================================================== DISABLED ========================================================== */ .oz-connect-card:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; } /* ========================================================== END BLOCK 08 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 09 FOOTER ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 09 FOOTER ========================================================== */ /* ========================================================== FOOTER ========================================================== */ .oz-connect-footer{ display:flex; align-items:center; justify-content:center; flex-shrink:0; min-height:40px; padding:8px 16px; border-top:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); } /* ========================================================== FOOTER TEXT ========================================================== */ .oz-connect-footer-text{ display:block; width:100%; margin:0; color:var(--oz-text-muted); font-size:12px; font-weight:400; line-height:1.35; text-align:center; } /* ========================================================== FOOTER LINKS ========================================================== */ .oz-connect-footer a{ color:var(--oz-secondary); text-decoration:none; transition: color var(--oz-transition); } .oz-connect-footer a:hover{ color:var(--oz-primary-light); } /* ========================================================== FOOTER ICONS ========================================================== */ .oz-connect-footer svg, .oz-connect-footer img{ width:13px; height:13px; vertical-align:middle; } /* ========================================================== END BLOCK 09 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 10 RESPONSIVE ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 10 RESPONSIVE ========================================================== */ /* ========================================================== DESKTOP ========================================================== */ @media (max-width:1200px){ .oz-connect{ right:20px; bottom:20px; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:768px){ .oz-connect{ right:16px; bottom:16px; } .oz-connect-window{ width:340px; } .oz-connect-header{ padding:16px; } .oz-connect-logo{ width:44px; height:44px; } .oz-connect-company{ font-size:16px; } .oz-connect-title{ font-size:13px; } .oz-connect-subtitle{ display:none; } .oz-connect-content{ padding:16px; gap:16px; } .oz-connect-card{ min-height:68px; padding:12px; gap:12px; } .oz-connect-card-icon{ width:44px; height:44px; } .oz-connect-card-icon img{ width:20px; height:20px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:480px){ .oz-connect{ left:12px; right:12px; bottom:12px; } .oz-connect-window{ width:100%; max-width:none; max-height:82vh; right:0; bottom:74px; } .oz-connect-container{ border-radius:18px; } .oz-connect-header{ min-height:72px; padding:14px; } .oz-connect-logo{ width:40px; height:40px; } .oz-connect-company{ font-size:15px; } .oz-connect-title{ font-size:12px; } /* ========================================================== SUBTITLE ========================================================== */ .oz-connect-subtitle{ display:none; } .oz-connect-content{ padding:14px; gap:14px; } .oz-connect-welcome{ font-size:22px; } .oz-connect-intro{ font-size:14px; } .oz-connect-description{ font-size:12px; } .oz-connect-flow-message{ font-size:14px; } .oz-connect-card{ min-height:66px; padding:12px; gap:12px; } .oz-connect-card-content strong{ font-size:14px; } .oz-connect-card-content span{ font-size:12px; } .oz-connect-card-icon{ width:40px; height:40px; } .oz-connect-card-icon img{ width:20px; height:20px; } .oz-connect-arrow{ width:20px; height:20px; } .oz-connect-arrow img{ width:14px; height:14px; } .oz-connect-trigger{ width:60px; height:60px; } .oz-connect-trigger img{ width:26px; height:26px; } } /* ========================================================== SMALL DEVICES ========================================================== */ @media (max-width:360px){ .oz-connect-window{ max-height:85vh; } .oz-connect-header{ padding:12px; } .oz-connect-content{ padding:12px; gap:12px; } .oz-connect-card{ min-height:62px; padding:10px; gap:10px; } .oz-connect-card-icon{ width:36px; height:36px; } .oz-connect-card-icon img{ width:18px; height:18px; } } /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 11 ANIMATIONS ========================================================== */ /* ========================================================== FADE IN ========================================================== */ @keyframes ozFadeIn{ from{ opacity:0; } to{ opacity:1; } } /* ========================================================== WINDOW OPEN ========================================================== */ @keyframes ozWindowIn{ from{ opacity:0; transform: translateY(20px) scale(.96); } to{ opacity:1; transform: translateY(0) scale(1); } } /* ========================================================== CARD HOVER ========================================================== */ @keyframes ozCardLift{ from{ transform:translateY(0); } to{ transform:translateY(-2px); } } /* ========================================================== PULSE ========================================================== */ @keyframes ozPulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.05); } 100%{ transform:scale(1); } } /* ========================================================== STATUS DOT ========================================================== */ @keyframes ozStatusPulse{ 0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 70%{ box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); } } /* ========================================================== APPLY ========================================================== */ .oz-connect.is-open .oz-connect-container{ animation: ozWindowIn .28s ease; } .oz-connect-status-dot{ animation: ozStatusPulse 2.2s infinite; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } } /* ========================================================== END BLOCK 11 ========================================================== */ /* ========================================================== OZONTECK.EU Connect CSS Framework v3.0 BLOCK 12 HELPERS & STATES ========================================================== */ /* ========================================================== VISIBILITY ========================================================== */ .is-hidden{ display:none !important; } .is-invisible{ visibility:hidden !important; } .is-visible{ visibility:visible !important; } /* ========================================================== STATE ========================================================== */ .is-open{ pointer-events:auto; } .is-disabled{ pointer-events:none; opacity:.60; } /* ========================================================== ONLINE STATUS ========================================================== */ .is-online .oz-connect-status-dot{ background:var(--oz-success); } .is-away .oz-connect-status-dot{ background:var(--oz-warning); } .is-offline .oz-connect-status-dot{ background:var(--oz-danger); } /* ========================================================== SCROLL LOCK ========================================================== */ .oz-no-scroll{ overflow:hidden !important; } /* ========================================================== SCREEN READER ========================================================== */ .oz-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================== USER SELECT ========================================================== */ .oz-no-select{ user-select:none; -webkit-user-select:none; } /* ========================================================== END BLOCK 12 ========================================================== */