@charset "utf-8"; /* /* Copyright (c) 2024 SRBThemes /* Author: SRBThemes /* Item URL: https://themeforest.net/item/techwave-ai-html-dashboard-for-image-generation-chat-bot/46197058 /* This file is made for CURRENT TEMPLATE /* List of CSS codes: 01) ROOT 02) Base 03) PRELOADER 04) Container 05) New tags and some custom codes 06) Site Structure 07) Main Button 08) Left Panel 09) Header 10) Footer 11) Page: Home (index) 12) Shortcode: Title 13) Shortcode: Interactive List 14) Shortcode: Members 15) Shortcode: Animated Title 16) Page Title 17) Page: Changelog 18) Searchbar 19) Shortcode: Accordion 20) Page: Community Feed 21) Tabs 22) Page: Personal Feed 23) Shortcode: Gallery Items 24) Like Button 25) Checkbox 26) Image Lightbox 27) Follow Button 28) Icon Button 29) Model Button (used in image lightbox) 30) Prompt Details (used in image lightbox) 31) Detailed list (used in image lightbox) 32) Grid Items (used in image lightbox) 33) Reportbox 34) Ajax Loader (Loading) 35) Page: Sign In and Sign Up 36) Select Filter (personal feed page) 37) Page: Notifications 38) Back To button (notification single page) 39) Page: Pricing 40) Shortcode: Pricing Mobile 41) Page: User Profile 42) Shortcode: Options list (used in user profile page) 43) Page: User Settings 44) Upload Button 45) Page: User Billing 46) Page: AI Chat Bot 47) Page: Documentation 48) Page: Image Generation 49) Icon Options (icon lightbox) 50) Generation Item (used in image generation page) 51) Generation List (used in image generation page) 52) Input Toggle (custom) 53) Select Model (used in image generation page) 53) Page: Image Generation 54) Input quantity (custom) 55) Input Range (custom) 56) Page: Privacy Policy 57) Contact Form 58) Page: Contact 59) Page: Models 60) Model Items (used in model page) 61) Bookmark button 62) Font Trigger (used in AI chat bot page) 63) Font Trigger Lightbox 64) Tooltipster custom theme named: tooltipster-techwave (it can be changed in init.js) 65) Page: Intro 66) Media Queries (Responsive) /*------------------------------------------------------------------*/ /* 01) ROOT /*------------------------------------------------------------------*/ :root{ color-scheme: dark; --techwave-site-bg-color: #0f0e11; --techwave-header-bg-color: #17151b; --techwave-some-r-bg-color: #17151b; --techwave-some-a-bg-color: #2b2830; --techwave-main-color: #7c5fe3; --techwave-main-color1: #8768f8; --techwave-main-color2: #b7a4fb; --techwave-heading-color: #c0bcca; --techwave-body-color: #7e7a86; --techwave-border-color: #312e37; --techwave-button-bg-color: #1c1925; --techwave-hover-color: #fff; --techwave-heading-font-family: 'Heebo', sans-serif; --techwave-body-font-family: 'Work Sans', sans-serif; --techwave-left-panel-width: 300px; --techwave-header-height: 100px; } @media(min-width: 1041px){ .panel-opened:root{ --techwave-left-panel-width: 76px; } } @media(max-width: 1040px){ :root{ --techwave-header-height: 80px; } } [data-techwave-skin="light"]:root{ color-scheme: light; --techwave-site-bg-color: #fff; --techwave-header-bg-color: #f5f5f5; --techwave-some-r-bg-color: #f5f5f5; --techwave-some-a-bg-color: #e7e7e7; --techwave-main-color: #7c5fe3; --techwave-main-color1: #8768f8; --techwave-main-color2: #b7a4fb; --techwave-heading-color: #333; --techwave-body-color: #444; --techwave-border-color: #ddd; --techwave-button-bg-color: #f5f5f5; --techwave-hover-color: #000; } /*------------------------------------------------------------------*/ /* 02) Base /*------------------------------------------------------------------*/ html{ overflow-x: hidden; padding: 0px; margin: 0px; } *:after, *:before, *{ box-sizing: border-box; } body{ font-family: var(--techwave-body-font-family); font-size: 16px; letter-spacing: 0; line-height: 1.5; font-weight: 400; color: var(--techwave-body-color); position: relative; word-break: break-word; background-color: var(--techwave-site-bg-color); } .fn__svg{ fill: currentcolor; width: 18px; height: 18px; } .replaced-svg{ opacity: 1; } p{ letter-spacing: 0; margin-bottom: 20px; } ol li{ margin-bottom: 17px; } ol li:last-child{ margin-bottom: 0; } .heading_color{ color: var(--techwave-heading-color); } h1, h2, h3, h4, h5, h6{ color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); line-height: 1.22; letter-spacing: 0; } h1>a, h2>a, h3>a, h4>a, h5>a, h6>a{ text-decoration: none; color: var(--techwave-heading-color); } h1>a:hover, h2>a:hover, h3>a:hover, h4>a:hover, h5>a:hover, h6>a:hover{ color: var(--techwave-main-color); } select:focus{ border-color: var(--techwave-main-color); } select{ display: block; height: 40px; width: 100%; padding: 0 14px; background-color: var(--techwave-some-a-bg-color); border: 2px solid transparent; border-radius: 5px; outline: none; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 16px; position: relative; line-height: 40px; } hr{ outline: none; border: none; border-top: 1px solid var(--techwave-border-color); margin: 0; margin-bottom: 20px; } hr[data-h="2"]{border-top-width: 2px;} hr[data-h="3"]{border-top-width: 3px;} hr[data-h="4"]{border-top-width: 4px;} hr[data-h="5"]{border-top-width: 5px;} hr[data-h="6"]{border-top-width: 6px;} hr[data-h="7"]{border-top-width: 7px;} hr[data-h="8"]{border-top-width: 8px;} hr[data-h="9"]{border-top-width: 9px;} hr[data-h="10"]{border-top-width: 10px;} /*------------------------------------------------------------------*/ /* 03) PRELOADER /*------------------------------------------------------------------*/ .techwave_fn_preloader.fn_ready{ opacity: 0; visibility: hidden; pointer-events: none; } .techwave_fn_preloader.enabled{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .techwave_fn_preloader{ position: fixed; padding: 0; margin: 0; z-index: 1000; left: 0; right: 0; bottom: 0; top: 0; background-color: var(--techwave-site-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; display: none; -ms-align-items: center; align-items: center; justify-content: center; transition: all .3s ease; } .techwave_fn_preloader svg{ width: 240px; height: 240px; border-radius: 100%; position: relative; } .techwave_fn_preloader .first_circle{ fill: none; stroke-width: 10px; stroke: #080808; } .techwave_fn_preloader .second_circle{ fill: none; stroke-width: 10px; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 360; stroke-dashoffset: 100; stroke: var(--techwave-main-color); animation: techwave_fn_preloader 10s infinite; position: relative; z-index: 1; } @keyframes techwave_fn_preloader{ 0%{stroke-dasharray: 360;} 50%{stroke-dasharray: 1;} 100%{stroke-dasharray: 360;} } /*------------------------------------------------------------------*/ /* 04) Container /*------------------------------------------------------------------*/ .container{ width: 100%; max-width: 1400px; padding: 0 40px; margin: 0 auto; } .container.wide{ max-width: 1680px; } .container.small{ max-width: 780px; } .container.medium{ max-width: 980px; } .container:after, .clearfix:after, .clearfix:before{ content: ''; clear: both; display: table; } @media(max-width: 1040px){.container{padding: 0 20px;}} @media(max-width: 480px){.container{padding: 0 10px;}} /*------------------------------------------------------------------*/ /* 05) New tags and some custom codes /*------------------------------------------------------------------*/ .fn__full_link{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; } frenify_main{ color: var(--techwave-main-color); -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; -o-user-select: all; user-select: all; } frenify_uselect{ -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; -o-user-select: all; user-select: all; } frenify_typing{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } frenify_typing h3{ margin: 0; font-size: 16px; font-weight: 400; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } frenify_typing span{ color: var(--techwave-heading-color); overflow: hidden; border-right: 2px solid var(--techwave-main-color); white-space: nowrap; -webkit-animation: frenify_typing_animation 1s steps(150, end), frenify_blink_caret .5s step-end infinite; animation: frenify_typing_animation 1s steps(150, end), frenify_blink_caret .5s step-end infinite; } @keyframes frenify_typing_animation { from { width: 0 } to { width: 100% } } @keyframes frenify_blink_caret { from, to { border-color: transparent } 50% { border-color: var(--techwave-main-color); } } /*------------------------------------------------------------------*/ /* 06) Site Structure /*------------------------------------------------------------------*/ .techwave_fn_wrapper, .techwave_fn_wrapper *{ box-sizing: border-box; } .techwave_fn_wrapper:not(.fn__has_sidebar) .techwave_fn_image_generation_page .sidebar__trigger{ color: var(--techwave-main-color); } .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_content{ margin-right: 300px; } .techwave_fn_content{ position: relative; margin-left: var(--techwave-left-panel-width); margin-top: var(--techwave-header-height); min-height: calc(100vh - var(--techwave-header-height)); transition: all .2s ease; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } /*------------------------------------------------------------------*/ /* 07) Main Button /*------------------------------------------------------------------*/ .fn__submit{ display: block; position: relative; background-color: var(--techwave-button-bg-color); border-radius: 20px; } .fn__submit input, .techwave_fn_button{ display: block; width: fit-content; max-width: 100%; text-decoration: none; font-weight: 500; font-size: 14px; letter-spacing: .5px; font-family: var(--techwave-heading-font-family); height: 40px; line-height: 40px; padding: 0 34px; position: relative; color: var(--techwave-heading-color); text-transform: uppercase; text-align: center; white-space: nowrap; background-color: var(--techwave-button-bg-color); outline: none; outline-color: transparent; border-radius: 20px; overflow: hidden; text-overflow: ellipsis; } .fn__submit input{ width: 100%; background-color: transparent !important; } .techwave_fn_button.medium{ padding: 0 97px; height: 60px; line-height: 60px; border-radius: 30px; font-size: 18px; } .techwave_fn_button.medium:after, .techwave_fn_button.medium:before{ border-radius: 30px; } .techwave_fn_button.small__border:after, .techwave_fn_button.small__border:before, .techwave_fn_button.small__border{ border-radius: 5px; } .techwave_fn_button.small__border{ background-color: var(--techwave-some-a-bg-color); padding: 0 20px; } .techwave_fn_button.has__icon{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; } .techwave_fn_button.has__icon .fn__svg{ width: 16px; height: 16px; margin-right: 5px; } .fn__submit input, .techwave_fn_button span{ position: relative; z-index: 5; } .techwave_fn_button span{ top: 1px; } .fn__submit:hover:after, .techwave_fn_button:hover:after{ animation-duration: 2s; } .fn__submit:hover, .techwave_fn_button:hover{ color: var(--techwave-hover-color); } .fn__submit:after, .techwave_fn_button:after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; border: 2px solid transparent; background: -moz-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; background: -webkit-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; background: linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; -webkit-mask-composite: source-out; mask-composite: exclude; background-size: 300% 300%; -webkit-animation: animatedgradient 4s ease alternate infinite; animation: animatedgradient 4s ease alternate infinite; } .fn__submit:before, .techwave_fn_button:before{ right: 0; bottom: 0; top: 0; left: 0; position: absolute; color: var(--techwave-main-color1); content: ''; opacity: .1; border-radius: 20px; box-shadow: 0px 5px 15px; } .techwave_fn_button.enabled:after{ display: block; } .techwave_fn_button.disabled{ background-color: var(--techwave-some-a-bg-color); } .techwave_fn_button.disabled:after{ display: none; } @keyframes animatedgradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /*------------------------------------------------------------------*/ /* 08) Left Panel /*------------------------------------------------------------------*/ .short_logo{ display: none; } .retina_logo{ display: none; } @media (-webkit-min-device-pixel-ratio: 1.1),(min-device-pixel-ratio: 1.1),(min-resolution: 120dpi){ .retina_logo{display: block;} .desktop_logo{display: none;} } .techwave_fn_leftpanel{ z-index: 101; position: fixed; background-color: var(--techwave-some-r-bg-color); width: var(--techwave-left-panel-width); left: 0; top: 0; bottom: 0; border-right: 1px solid var(--techwave-border-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; transition: all .2s ease; } .techwave_fn_leftpanel .leftpanel_logo{ min-height: var(--techwave-header-height); height: var(--techwave-header-height); border-bottom: 1px solid var(--techwave-border-color); padding: 20px 70px 20px 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; position: relative; } .techwave_fn_leftpanel .mobile_closer{ display: none; } .techwave_fn_leftpanel .fn__icon_button{ position: absolute; top: 50%; margin-top: -15px; right: 20px; z-index: 4; } .techwave_fn_leftpanel .fn__icon_button .fn__svg{ transform: rotate(180deg); } .techwave_fn_leftpanel .leftpanel_content{ flex: 1 0 auto; padding: 48px 20px; overflow-y: auto; height: calc(100% - var(--techwave-header-height)); } .techwave_fn_leftpanel .leftpanel_content{ scrollbar-width: thin; scrollbar-color: #999 #fff; } .techwave_fn_leftpanel .leftpanel_content::-webkit-scrollbar{ width: 4px; } .techwave_fn_leftpanel .leftpanel_content:-webkit-scrollbar-track{ background: var(--techwave-some-a-bg-color); } .techwave_fn_leftpanel .leftpanel_content::-webkit-scrollbar-thumb{ background-color: var(--techwave-some-a-bg-color); border-radius: 6px; } .techwave_fn_leftpanel .nav_group{ margin-bottom: 38px; } .techwave_fn_leftpanel .nav_group:last-child{ margin-bottom: 0; } .techwave_fn_leftpanel .group__title{ margin: 0; padding: 0 10px; text-transform: uppercase; font-weight: 500; font-size: 11px; letter-spacing: .5px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); margin-bottom: 12px; } .techwave_fn_leftpanel .group__list{ margin: 0; padding: 0; list-style-type: none; } .techwave_fn_leftpanel .group__list li{ margin-bottom: 4px; position: relative; } .techwave_fn_leftpanel .group__list li:last-child{ margin-bottom: 0px; } .techwave_fn_leftpanel .group__list a{ font-weight: 400; border-radius: 5px; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); text-decoration: none; min-height: 36px; padding: 5px 10px 5px 42px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; position: relative; } .techwave_fn_leftpanel .group__list .menu-item-has-children > a{ padding-right: 22px; } .techwave_fn_leftpanel .group__list .hovered > a, .techwave_fn_leftpanel .group__list a.active, .techwave_fn_leftpanel .group__list a:hover{ background-color: var(--techwave-some-a-bg-color); } .techwave_fn_leftpanel .group__list a.active .text{ color: var(--techwave-hover-color); } .techwave_fn_leftpanel .group__list .icon{ position: absolute; left: 10px; top: 50%; margin-top: -8px; display: block; } .techwave_fn_leftpanel .group__list .icon .fn__svg{ width: 16px; height: 16px; display: block; } .techwave_fn_leftpanel .group__list .text{ line-height: 24px; position: relative; top: 1px; } .techwave_fn_leftpanel .group__list .trigger{ right: 5px; top: 50%; margin-top: -6px; position: absolute; display: block; color: var(--techwave-heading-color); transform: rotate(90deg); transition: all .2s ease; } .techwave_fn_leftpanel .group__list .closed .trigger{ transform: rotate(-90deg); } .techwave_fn_leftpanel .group__list .trigger .fn__svg{ width: 12px; height: 12px; display: block; } .techwave_fn_leftpanel .group__list .count{ width: 24px; margin-left: 10px; display: inline-block; height: 24px; background-color: #ab0cdf; color: #fff; font-weight: 500; line-height: 25px; text-align: center; font-size: 11px; font-family: var(--techwave-heading-font-family); border-radius: 100%; vertical-align: top; } .fn__sup{ color: var(--techwave-main-color); vertical-align: super; text-transform: uppercase; font-weight: 500; font-size: 11px; letter-spacing: .5px; margin-left: 2px; } .techwave_fn_leftpanel .group__list ul{ margin: 0; list-style-type: none; padding: 0; margin-left: 26px; margin-top: 4px; overflow: hidden; } .techwave_fn_leftpanel .group__list ul a{ padding-left: 17px; } .techwave_fn_leftpanel .group__list ul a:after{ width: 5px; height: 2px; background-color: var(--techwave-heading-color); position: absolute; left: 6px; top: 50%; margin-top: -1px; content: ''; } @media(min-width: 1041px){ .panel-opened .techwave_fn_leftpanel .group__list .icon .fn__svg{ width: 18px; height: 18px; } .panel-opened .techwave_fn_leftpanel .group__list a{ width: 36px; padding: 0; } .panel-opened .techwave_fn_leftpanel .group__list .menu-item-has-children > a:after{ content: ''; position: absolute; width: 10px; height: 10px; background-color: #f1416c; left: 50%; bottom: 50%; margin-left: 2px; margin-bottom: 2px; border-radius: 100%; } .panel-opened .techwave_fn_leftpanel .leftpanel_logo{ padding: 0; justify-content: center; } .panel-opened .techwave_fn_leftpanel .short_logo{ display: block; } .panel-opened .techwave_fn_leftpanel .fn__closer{ right: -15px; transform: rotate(180deg); } .panel-opened .techwave_fn_leftpanel .full_logo, .panel-opened .techwave_fn_leftpanel .group__title, .panel-opened .techwave_fn_leftpanel .group__list .trigger, .panel-opened .techwave_fn_leftpanel .group__list .text{ display: none; } .panel-opened .techwave_fn_leftpanel .group__list ul{ display: none !important; } } /*------------------------------------------------------------------*/ /* 09) Header /*------------------------------------------------------------------*/ .techwave_fn_header{ position: fixed; top: 0; left: var(--techwave-left-panel-width); right: 0; height: var(--techwave-header-height); background-color: var(--techwave-header-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; padding: 0 40px; z-index: 100; transition: all .2s ease; } .techwave_fn_header:after{ content: ''; pointer-events: none; position: absolute; bottom: 0; z-index: 1; left: 0; right: 0; height: 1px; background-color: var(--techwave-border-color); } .fn__token_info{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; height: var(--techwave-header-height); position: relative; } .fn__token_info:hover .token__popup{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__token_info .token__popup{ opacity: 0; visibility: hidden; transform: translateY(20px); width: 200px; position: absolute; left: 0; top: 100%; background-color: var(--techwave-header-bg-color); padding: 12px 15px; border-radius: 0 0 5px 5px; border: 1px solid var(--techwave-border-color);; margin-top: -1px; font-family: var(--techwave-heading-font-family); font-size: 12px; letter-spacing: .5px; transition: all .2s ease; } .fn__token_info .token__popup span{ color: var(--techwave-heading-color); } .fn__token_info .token_summary{ border-radius: 5px; background-color: var(--techwave-some-a-bg-color); font-family: var(--techwave-heading-font-family); line-height: 16px; height: 40px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; padding: 5px 12px; margin-right: 20px; } .fn__token_info .count{ font-weight: 600; font-size: 18px; color: var(--techwave-heading-color); padding-right: 25px; position: relative; } .fn__token_info .text{ line-height: 16px; font-size: 12px; } .fn__token_info .count:after{ content: ''; position: absolute; right: 12px; top: 50%; margin-top: -15px; height: 30px; background-color: #413e45; width: 1px; } .fn__nav_bar{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .fn__nav_bar .bar__item{ height: var(--techwave-header-height); position: relative; margin-right: 10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .fn__nav_bar .bar__item:last-child{ margin-right: 0; } .fn__nav_bar .item_opener{ width: 50px; height: 50px; text-decoration: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; background-color: var(--techwave-some-a-bg-color); border-radius: 100%; color: var(--techwave-heading-color); position: relative; } .fn__nav_bar .item_opener:hover{ opacity: 0.8; } .fn__nav_bar .item_opener.full_screen .f_screen{ opacity: 0; transform: scale(0.7); } .fn__nav_bar .item_opener.full_screen .s_screen{ opacity: 1; transform: scale(1); } .fn__nav_bar .item_opener .fn__svg{ width: 24px; height: 24px; transition: all .3s ease; } .fn__nav_bar .item_opener .dark_mode{ opacity: 0; position: absolute; left: 50%; top: 50%; margin: -12px 0 0 -12px; transform: scale(0.7) rotate(-90deg); } [data-techwave-skin="light"] .fn__nav_bar .item_opener .dark_mode{ opacity: 1; transform: scale(1) rotate(0deg); } [data-techwave-skin="light"] .fn__nav_bar .item_opener .light_mode{ opacity: 0; transform: scale(0.7) rotate(90deg); } [data-techwave-skin="dark"] .fn__nav_bar .item_opener .light_mode{ opacity: 1; transform: scale(1) rotate(0deg); } [data-techwave-skin="dark"] .fn__nav_bar .item_opener .dark_mode{ opacity: 0; transform: scale(0.7) rotate(-90deg); } .fn__nav_bar .item_opener .s_screen{ opacity: 0; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -9px; transform: scale(0.7); width: 18px; height: 18px; } .fn__nav_bar .bar__item_user{ margin-left: 10px; } .fn__nav_bar .user_opener{ width: 60px; height: 60px; border: 2px solid var(--techwave-border-color); border-radius: 5px; overflow: hidden; } .fn__nav_bar .user_opener img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; border-radius: 3px; } .fn__nav_bar .item_popup{ position: absolute; right: 0; top: 100%; background-color: var(--techwave-header-bg-color); border: 1px solid var(--techwave-border-color); border-radius: 0 0 5px 5px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .2s ease; margin-top: -1px; } .fn__nav_bar .item_popup[data-position="left"]{ right: auto; left: 0; } .fn__nav_bar .bar__item_user .item_popup{ padding: 20px; width: 300px; max-width: calc(100vw - 80px); } .fn__nav_bar .bar__item_user.opened .item_popup{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__nav_bar .bar__item_user:hover .user_opener, .fn__nav_bar .bar__item_user.opened .user_opener{ border-color: var(--techwave-main-color); } .fn__nav_bar .bar__item_user .user_profile{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; padding: 0 10px 20px 10px; border-bottom: 1px solid var(--techwave-border-color); -ms-align-items: center; align-items: center; } .fn__nav_bar .bar__item_user .user_img{ margin-right: 15px; width: 60px; min-width: 60px; } .fn__nav_bar .bar__item_user .user_img img{ width: 100%; object-fit: cover; aspect-ratio: 1 / 1; border: 2px solid var(--techwave-border-color); border-radius: 5px; } .fn__nav_bar .bar__item_user .user_name{ margin: 0; padding: 0; font-weight: 400; font-size: 16px; } .fn__nav_bar .bar__item_user .user_name span{ height: 16px; line-height: 16px; display: inline-block; padding: 0 5px; border-radius: 5px; background-color: #ab0cdf; color: #fff; font-weight: 500; font-size: 11px; text-transform: uppercase; font-family: var(--techwave-heading-font-family); margin-left: 10px; vertical-align: middle; position: relative; top: -2px; } .fn__nav_bar .bar__item_user .user_profile p{ margin: 0; padding: 0; font-family: var(--techwave-heading-font-family); font-size: 12px; letter-spacing: 0; } .fn__nav_bar .bar__item_user .user_profile a{ text-decoration: none; color: var(--techwave-heading-color); } .fn__nav_bar .bar__item_user .user_profile a:hover{ color: var(--techwave-main-color); } .fn__nav_bar .bar__item_user .user_nav{ padding-top: 20px; } .fn__nav_bar .bar__item_user .user_nav li{ margin-bottom: 4px; } .fn__nav_bar .bar__item_user .user_nav li:last-child{ margin-bottom: 0px; } .fn__nav_bar .bar__item_user .user_nav ul{ list-style-type: none; margin: 0; padding: 0; } .fn__nav_bar .bar__item_user .user_nav a{ font-weight: 400; border-radius: 5px; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); text-decoration: none; height: 36px; padding: 0 10px 0 42px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; position: relative; } .fn__nav_bar .bar__item_user .user_nav .icon{ position: absolute; left: 10px; top: 50%; margin-top: -8px; display: block; } .fn__nav_bar .bar__item_user .user_nav .icon .fn__svg{ width: 16px; height: 16px; display: block; } .fn__nav_bar .bar__item_user .user_nav a.active, .fn__nav_bar .bar__item_user .user_nav a:hover{ background-color: var(--techwave-some-a-bg-color); } .fn__nav_bar .bar__item_user .user_nav .text{ position: relative; top: 1px; } .fn__nav_bar .bar__item_language.opened .item_popup{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__nav_bar .bar__item_language.opened .item_opener{ color: var(--techwave-main-color); } .fn__nav_bar .bar__item_language .item_popup{ padding: 20px; width: 200px; max-width: calc(100vw - 80px); } .fn__nav_bar .bar__item_language .item_popup li{ margin-bottom: 4px; } .fn__nav_bar .bar__item_language .item_popup li:last-child{ margin-bottom: 0px; } .fn__nav_bar .bar__item_language .item_popup ul{ margin: 0; padding: 0; list-style-type: none; } .fn__nav_bar .bar__item_language .item_popup span, .fn__nav_bar .bar__item_language .item_popup a{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; height: 36px; padding: 0 15px; border-radius: 5px; text-decoration: none; font-size: 16px; letter-spacing: 0; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); transition: all .3s ease; } .fn__nav_bar .bar__item_language .item_popup a:hover, .fn__nav_bar .bar__item_language .item_popup .active{ background-color: var(--techwave-some-a-bg-color); color: var(--techwave-hover-color); } .fn__nav_bar .bar__item_notification .item_opener:after{ content: ''; position: absolute; width: 12px; height: 12px; background-color: #f1416c; border-radius: 100%; top: 9px; right: 10px; opacity: 0; visibility: hidden; } .fn__nav_bar .bar__item_notification.has_notification .item_opener:after{ opacity: 1; visibility: visible; } .fn__nav_bar .bar__item_notification .item_popup{ width: 340px; padding: 20px; max-width: calc(100vw - 80px); } .fn__nav_bar .bar__item_notification.opened .item_popup{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__nav_bar .bar__item_notification .ntfc_header{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: space-between; column-gap: 20px; padding: 1px 15px 20px; border-bottom: 1px solid var(--techwave-border-color); } .fn__nav_bar .bar__item_notification .ntfc_title{ font-size: 12px; font-weight: 500; margin: 0; letter-spacing: .5px; text-transform: uppercase; font-family: var(--techwave-heading-font-family); color: var(--techwave-body-color); } .fn__nav_bar .bar__item_notification .ntfc_header a{ text-decoration: none; font-size: 12px; font-weight: 400; font-family: var(--techwave-heading-font-family); color: var(--techwave-body-color); } .fn__nav_bar .bar__item_notification .ntfc_header a:hover{ color: var(--techwave-main-color); } .fn__nav_bar .bar__item_notification .ntfc_list{ padding: 25px 15px 0; } .fn__nav_bar .bar__item_notification .ntfc_list ul{ margin: 0; padding: 0; list-style-type: none; } .fn__nav_bar .bar__item_notification .ntfc_list li{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; margin-bottom: 20px; } .fn__nav_bar .bar__item_notification .ntfc_list li:last-child{ margin-bottom: 0; } .fn__nav_bar .bar__item_notification .ntfc_list p{ margin: 0; padding: 0; font-size: 16px; font-weight: 400; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); } .fn__nav_bar .bar__item_notification .ntfc_list p a{ color: var(--techwave-heading-color); text-decoration: none; } .fn__nav_bar .bar__item_notification .ntfc_list p a:hover{ color: var(--techwave-main-color); } .fn__nav_bar .bar__item_notification .ntfc_list span{ font-size: 12px; font-weight: 400; font-family: var(--techwave-heading-font-family); color: var(--techwave-body-color); margin-top: -1px; } .fn__nav_bar .bar__item_search .item_popup{ width: 200px; padding: 20px; max-width: calc(100vw - 80px); } .techwave_fn_fixedsub{ opacity: 0; visibility: hidden; position: fixed; left: var(--techwave-left-panel-width); top: var(--techwave-header-height); z-index: 101; display: none; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); border-left: none; margin-top: calc(var(--techwave-header-height) - 21px); /* 20px = padding-top and 1px = border-top */ padding: 20px; transition: all .2s ease; } .panel-opened .techwave_fn_fixedsub{ display: block; } .techwave_fn_fixedsub.opened{ opacity: 1; visibility: visible; } .techwave_fn_fixedsub ul{ margin: 0; padding: 0; list-style-type: none; } .techwave_fn_fixedsub li{ margin-bottom: 4px; position: relative; } .techwave_fn_fixedsub li:last-child{ margin-bottom: 0; } .techwave_fn_fixedsub a{ font-weight: 400; border-radius: 5px; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); text-decoration: none; min-height: 36px; padding: 5px 10px 5px 17px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; position: relative; } .techwave_fn_fixedsub a:after{ width: 5px; height: 2px; background-color: var(--techwave-heading-color); position: absolute; left: 6px; top: 50%; margin-top: -1px; content: ''; } .techwave_fn_fixedsub a.active, .techwave_fn_fixedsub a:hover{ background-color: var(--techwave-some-a-bg-color); } /*------------------------------------------------------------------*/ /* 10) Footer /*------------------------------------------------------------------*/ .techwave_fn_footer{ margin-top: auto; min-height: 71px; padding: 18px 40px; border-top: 1px solid var(--techwave-border-color); } .techwave_fn_footer_content{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; } .techwave_fn_footer .copyright p{ margin: 0; padding: 0; font-size: 14px; letter-spacing: .5px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_footer .menu_items ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; margin-left: -30px; } .techwave_fn_footer .menu_items li{ margin: 5px 0 5px 30px; } .techwave_fn_footer .menu_items a{ text-decoration: none; font-size: 14px; letter-spacing: .5px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_footer .menu_items a:hover{ color: var(--techwave-main-color); } /*------------------------------------------------------------------*/ /* 11) Page: Home (index) /*------------------------------------------------------------------*/ .section_home{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; min-height: calc(100vh - var(--techwave-header-height) - 71px); } .section_home .section_left{ padding: 93px 40px 80px; border-right: 1px solid var(--techwave-border-color); width: 60%; } .section_home .section_right{ width: 40%; padding: 155px 40px; } .section_home .company_info{ margin: 0 auto; max-width: 350px; } .section_home .company_info hr{ margin-bottom: 24px; } .section_home .company_info p{ margin-bottom: 23px; } .section_home .company_info img{ margin-bottom: 25px; } .section_home .techwave_fn_title_holder{ margin-bottom: 43px; } /*------------------------------------------------------------------*/ /* 12) Shortcode: Title /*------------------------------------------------------------------*/ .techwave_fn_title_holder{ text-align: center; } .techwave_fn_title_holder .title{ margin: 0; padding: 0; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); margin-bottom: -1px; font-size: 40px; } .techwave_fn_title_holder .desc{ margin: 0; padding: 0; font-size: 18px; font-weight: 400; font-family: var(--techwave-body-font-family); color: var(--techwave-body-color); } /*------------------------------------------------------------------*/ /* 13) Shortcode: Interactive List /*------------------------------------------------------------------*/ .techwave_fn_interactive_list ul{ margin: 0; padding: 0; list-style-type: none; margin-left: -20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; flex-wrap: wrap; } .techwave_fn_interactive_list li{ width: 360px; max-width: 50%; padding-left: 20px; margin-bottom: 20px; } .techwave_fn_interactive_list .item{ border: 2px solid var(--techwave-border-color); border-radius: 5px; background-color: var(--techwave-some-r-bg-color); min-height: 100%; text-align: center; transition: all .2s ease; } .techwave_fn_interactive_list .item:hover{ background-color: var(--techwave-some-a-bg-color); border-color: var(--techwave-main-color); } .techwave_fn_interactive_list a{ text-decoration: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -ms-align-items: center; align-items: center; padding: 48px 30px; min-height: 100%; } .techwave_fn_interactive_list .icon{ width: 120px; height: 120px; border-radius: 100%; background-color: var(--techwave-main-color); position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; color: #fff; margin-bottom: 26px; } .techwave_fn_interactive_list .icon .fn__svg{ width: 50px; height: 50px; display: block; } .techwave_fn_interactive_list .title{ margin: 0; padding: 0; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); font-weight: 400; font-size: 24px; margin-bottom: 20px; } .techwave_fn_interactive_list .desc{ margin: 0; padding: 0; font-family: var(--techwave-body-font-family); color: var(--techwave-body-color); font-weight: 400; font-size: 16px; line-height: 20px; margin-bottom: 22px; } .techwave_fn_interactive_list .arrow{ display: block; width: 50px; height: 14px; color: var(--techwave-heading-color); position: relative; } .techwave_fn_interactive_list .arrow:after{ position: absolute; content: ''; height: 2px; top: 50%; margin-top: -1px; background-color: var(--techwave-heading-color); transition: all .3s ease; right: 100%; left: 0%; margin-right: 0 } .techwave_fn_interactive_list .item:hover .arrow:after{ right: 0; margin-right: 4px; left: 0; } .techwave_fn_interactive_list .item:hover .arrow .fn__svg{ right: 0; margin-right: 0; } .techwave_fn_interactive_list .arrow .fn__svg{ width: 14px; height: 14px; display: block; position: absolute; right: 50%; margin-right: -7px; transition: all .3s ease; } .techwave_fn_interactive_list.modern{ max-width: 700px; margin: 0 auto; } .techwave_fn_interactive_list.modern li{ width: 100%; max-width: 100%; } .techwave_fn_interactive_list.modern a{ -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: flex-start; padding: 18px 38px; } .techwave_fn_interactive_list.modern .desc{ display: none; } .techwave_fn_interactive_list.modern .icon{ margin-bottom: 0; margin-right: 20px; min-width: 60px; width: 60px; height: 60px; } .techwave_fn_interactive_list.modern .icon .fn__svg{ width: 24px; height: 24px; } .techwave_fn_interactive_list.modern .title{ margin-bottom: 0; margin-right: 20px; font-size: 20px; } .techwave_fn_interactive_list.modern .arrow{ margin-left: auto; } /*------------------------------------------------------------------*/ /* 14) Shortcode: Members /*------------------------------------------------------------------*/ .fn__members .item{ position: relative; padding-left: 22px; font-size: 16px; line-height: 24px; min-height: 24px; } .fn__members .item{ margin-bottom: 8px; } .fn__members .item:last-child{ margin-bottom: 0; } .fn__members .circle{ width: 12px; height: 12px; border-radius: 100%; display: block; background-color: var(--techwave-body-color); position: absolute; top: 6px; left: 0; } .fn__members .active .circle{ background-color: #45c569; } /*------------------------------------------------------------------*/ /* 15) Shortcode: Animated Title /*------------------------------------------------------------------*/ .fn__animated_text{ opacity: 0; } .fn__animated_text.ready{ opacity: 1; } .fn__animated_text span{ animation: fn__animated_text 0.8s both; } .fn__animated_text em{ opacity: 0; } @keyframes fn__animated_text { 0% { opacity: 0; } 65% { opacity: 1; text-shadow: 0 0 25px white; } 75% { opacity: 0.7; } 100% { opacity: 1 } } /*------------------------------------------------------------------*/ /* 16) Page Title /*------------------------------------------------------------------*/ .techwave_fn_pagetitle{ padding: 34px 40px; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_pagetitle .title{ margin: 0; padding: 0; font-size: 22px; line-height: 1.364; font-weight: 600; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_pagetitle span{ color: var(--techwave-body-color); } /*------------------------------------------------------------------*/ /* 17) Page: Changelog /*------------------------------------------------------------------*/ .change_log{ padding: 40px 0; } .faq{ padding: 40px 0; } .techwave_fn_changelog .changelog__item{ border-radius: 5px; border: 1px solid var(--techwave-border-color); background-color: var(--techwave-some-r-bg-color); margin-bottom: 40px; } .techwave_fn_changelog .changelog__item:last-child{ margin-bottom: 0; } .techwave_fn_changelog .item__header{ padding: 24px 30px; border-bottom: 1px solid var(--techwave-border-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 20px; justify-content: space-between; -ms-align-items: center; align-items: center; } .techwave_fn_changelog .item__ver{ color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 20px; font-weight: 400; } .techwave_fn_changelog .item__date{ color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); font-size: 11px; font-weight: 500; text-transform: uppercase; } .techwave_fn_changelog .item__content{ padding: 40px 30px 34px; } .techwave_fn_changelog .item__group{ margin-bottom: 34px; } .techwave_fn_changelog .item__group:last-child{ margin-bottom: 0px; } .techwave_fn_changelog .item__title{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin-bottom: 15px; } .techwave_fn_changelog .item__title span{ height: 18px; line-height: 18px; padding: 0 10px; border-radius: 9px; font-weight: 500; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-transform: uppercase; font-size: 11px; background-color: var(--techwave-some-a-bg-color); padding-top: 1px; } .techwave_fn_changelog .item__list{ margin: 0; padding: 0; list-style-type: none; } .techwave_fn_changelog .item__list li{ position: relative; min-height: 24px; line-height: 24px; font-size: 18px; color: var(--techwave-body-color); font-weight: 400; padding-left: 15px; margin-bottom: 8px; } .techwave_fn_changelog .item__list li:last-child{ margin-bottom: 0; } .techwave_fn_changelog .item__list li:after{ content: ''; position: absolute; left: 0; top: 11px; height: 2px; background-color: var(--techwave-body-color); width: 5px; } /*------------------------------------------------------------------*/ /* 18) Searchbar /*------------------------------------------------------------------*/ .techwave_fn_searchbar{ opacity: 0; visibility: hidden; transform: translateX(100px); position: fixed; top: 0; left: var(--techwave-left-panel-width); right: 0; height: var(--techwave-header-height); background-color: var(--techwave-header-bg-color); padding: 0 40px; z-index: 102; transition: all .3s ease; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_searchbar.opened{ opacity: 1; visibility: visible; transform: translateX(0); } .techwave_fn_searchbar .search__results{ opacity: 0; visibility: hidden; transform: translateY(20px); position: absolute; top: 100%; left: 0; right: 0; border-bottom: 1px solid var(--techwave-border-color); background-color: var(--techwave-header-bg-color); margin-top: 1px; padding: 46px 40px; transition: all .2s ease; } .techwave_fn_searchbar .search__results.opened{ opacity: 1; visibility: visible; transform: translateY(0); } .techwave_fn_searchbar .search__input{ height: var(--techwave-header-height); padding: 0 50px 0 45px; display: block; width: 100%; background-color: transparent !important; border: none !important; font-size: 16px; font-weight: 400; letter-spacing: 0; font-family: var(--techwave-heading-font-family); } .techwave_fn_searchbar .results__title{ font-weight: 500; text-transform: uppercase; font-size: 11px; margin: 0; margin-bottom: 19px; } .techwave_fn_searchbar .search__icon{ width: 24px; height: 24px; display: block; position: absolute; top: 50%; margin-top: -12px; left: 40px; pointer-events: none; } .techwave_fn_searchbar .search__closer{ text-decoration: none; width: 30px; height: 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; border-radius: 5px; background-color: var(--techwave-some-a-bg-color); position: absolute; right: 40px; top: 50%; margin-top: -15px; color: var(--techwave-heading-color); } .techwave_fn_searchbar .search__closer .fn__svg{ width: 12px; height: 12px; } .techwave_fn_searchbar .search__results ul{ margin: 0; padding: 0; list-style-type: none; } .techwave_fn_searchbar .search__results li{ font-weight: 400; font-family: var(--techwave-heading-font-family); font-size: 16px; letter-spacing: 0; color: var(--techwave-heading-color); margin-bottom: 13px; } .techwave_fn_searchbar .search__results li:last-child{ margin-bottom: 0; } .techwave_fn_searchbar .search__results a{ text-decoration: none; color: var(--techwave-heading-color); } .techwave_fn_searchbar .search__results a:hover{ color: var(--techwave-main-color); } /*------------------------------------------------------------------*/ /* 19) Shortcode: Accordion /*------------------------------------------------------------------*/ .techwave_fn_accordion.small .acc__item{ border-width: 1px; } .techwave_fn_accordion.small .acc__header{ padding: 15px 20px; } .techwave_fn_accordion.small .acc__icon:after{ width: 11px; height: 1px; right: 20px; margin-top: -1px; } .techwave_fn_accordion.small .acc__icon:before{ width: 1px; height: 11px; right: 25px; margin-top: -6px; } .techwave_fn_accordion.small .acc__title{ font-size: 14px; text-transform: uppercase; line-height: 20px; } .techwave_fn_accordion.small .acc__content{ padding: 14px 20px; } .techwave_fn_accordion .acc__item{ border: 2px solid var(--techwave-border-color); background-color: var(--techwave-some-r-bg-color); border-radius: 5px; margin-bottom: 10px; } .techwave_fn_accordion .acc__item.opened .acc__header, .techwave_fn_accordion .acc__item .acc__header:hover{ background-color: var(--techwave-some-a-bg-color); } .techwave_fn_accordion .acc__item:last-child{ margin-bottom: 0; } .techwave_fn_accordion .acc__header{ padding: 26px 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 20px; justify-content: space-between; -ms-align-items: center; align-items: center; position: relative; cursor: pointer; transition: all .3s ease; } .techwave_fn_accordion .acc__title{ margin: 0; padding: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 20px; font-weight: 400; line-height: 1.25; padding-right: 23px; top: 1px; } .techwave_fn_accordion .acc__icon:after{ width: 18px; height: 2px; background-color: var(--techwave-heading-color); content: ''; position: absolute; right: 30px; top: 50%; margin-top: -1px; } .techwave_fn_accordion .opened .acc__icon:before{ transform: scale(0) rotate(90deg); } .techwave_fn_accordion .acc__icon:before{ width: 2px; height: 18px; background-color: var(--techwave-heading-color); content: ''; position: absolute; right: 38px; top: 50%; margin-top: -9px; transition: all .3s ease; } .techwave_fn_accordion .acc__content{ padding: 24px 30px; display: none; overflow: hidden; border-top: 1px solid var(--techwave-border-color); } .techwave_fn_accordion .acc__content p{ margin-bottom: 18px; } .techwave_fn_accordion .acc__content > *:last-child{ margin-bottom: 0; } /*------------------------------------------------------------------*/ /* 20) Page: Community Feed /*------------------------------------------------------------------*/ .techwave_fn_community_page{ padding: 36px 0 40px 0; } .techwave_fn_community_page .fn__title_holder{ margin-bottom: 28px; } .fn__title_holder .title{ margin: 0; padding: 0; font-size: 22px; font-weight: 600; } /*------------------------------------------------------------------*/ /* 21) Tabs /*------------------------------------------------------------------*/ .fn__tabs{ border-bottom: 1px solid var(--techwave-border-color); margin-bottom: 30px; } .fn__tabs .tab_in{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; width: 100%; flex-wrap: wrap; } .fn__tabs a{ text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-right: 30px; line-height: 40px; position: relative; } .fn__tabs a:after{ content: ''; opacity: 0; position: absolute; left: 50%; bottom: -1px; height: 2px; background-color: var(--techwave-main-color); right: 50%; transition: all .3s ease; } .fn__tabs a.active:after{ left: 0; right: 0; opacity: 1; } /*------------------------------------------------------------------*/ /* 22) Page: Personal Feed /*------------------------------------------------------------------*/ .techwave_fn_feed .feed__filter{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; column-gap: 50px; margin-bottom: 30px; position: relative; -ms-align-items: center; align-items: center; flex-wrap: wrap; } .techwave_fn_feed .filter__left{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; margin: 5px 0; flex-wrap: wrap; } .techwave_fn_feed .filter__upscaled{ margin: 5px 0; } .techwave_fn_feed .filter__left > *{ margin-right: 30px; } .techwave_fn_feed .filter__left > *:last-child{ margin-right: 0; } .techwave_fn_feed .filter__search{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .techwave_fn_feed .filter__search a{ margin: 5px 0; } .techwave_fn_feed .filter__search input{ margin: 5px 10px 5px 0; } .techwave_fn_feed .filter__sorting{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin-left: -10px; } .techwave_fn_feed .filter__sorting a{ margin: 5px 0 5px 10px; } .fn__selection_box{ display: none; border-top: 1px solid var(--techwave-border-color); border-bottom: 1px solid var(--techwave-border-color); padding: 25px 0; margin-bottom: 30px; position: sticky; top: var(--techwave-header-height); z-index: 5; background: var(--techwave-site-bg-color); } .fn__selection_box .desc{ margin: 0; padding: 0; } .fn__selection_box .selection_in{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; } .fn__selection_box .actions{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .fn__selection_box .actions a{ margin: 5px 0 5px 10px; } .techwave_fn_feed .feed__results{ margin-bottom: 60px; position: relative; } .techwave_fn_feed .feed__results.loading .fn__gallery_items{ opacity: 0; visibility: hidden; } .techwave_fn_feed .feed__results.loading .fn__preloader{ opacity: 1; visibility: visible; } .techwave_fn_feed .feed__more{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; } /*------------------------------------------------------------------*/ /* 23) Shortcode: Gallery Items /*------------------------------------------------------------------*/ .fn__gallery_items{ margin: 0; padding: 0; list-style-type: none; margin-left: -20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .fn__gallery_items .item.select__ready .item__info{ display: none; } .fn__gallery_items .item.select__ready .fn__selectable_item{ opacity: 1; visibility: visible; pointer-events: all; } .fn__selectable_item{ opacity: 0; visibility: hidden; pointer-events: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; z-index: 3; color: var(--techwave-hover-color); border: 2px solid transparent; border-radius: 5px; cursor: pointer; } .fn__selectable_item.selected{ border-color: var(--techwave-main-color); } .fn__selectable_item.selected .icon{ background-color: var(--techwave-main-color); } .fn__selectable_item.selected:after{ opacity: 0.1; } .fn__selectable_item:after{ background-color: var(--techwave-site-bg-color); opacity: .6; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; content: ''; } .fn__selectable_item .icon{ width: 50px; height: 50px; background-color: var(--techwave-some-a-bg-color); border-radius: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; } .fn__selectable_item .fn__svg{ position: relative; z-index: 3; } .fn__gallery_item{ margin: 0; padding: 0; padding-left: 20px; width: 25%; margin-bottom: 20px; } .fn__gallery_items .item{ position: relative; width: 100%; overflow: hidden; cursor: pointer; } .fn__gallery_items .img img{ border-radius: 5px; width: 100%; height: 100%; } .fn__gallery_items .item:hover .item__info{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__gallery_items .item__info{ opacity: 0; visibility: hidden; transform: translateY(20px); position: absolute; bottom: 10px; left: 10px; right: 10px; border-radius: 5px; background-color: var(--techwave-some-r-bg-color); padding: 20px 15px 19px; transition: all .3s ease; } .fn__gallery_items .info__header{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; margin-bottom: 14px; -ms-align-items: center; align-items: center; column-gap: 15px; } .fn__gallery_items .user__info{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; max-width: 60%; } .fn__gallery_items .author_name{ margin: 0; padding: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fn__gallery_items .user__info img{ width: 20px; height: 20px; object-fit: cover; border-radius: 100%; margin-right: 7px; } .fn__gallery_items .item__info .desc{ margin: 0; padding: 0; font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /*------------------------------------------------------------------*/ /* 24) Like Button /*------------------------------------------------------------------*/ a.fn__like{ text-decoration: none; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); position: relative; z-index: 25; padding: 0 18px; padding-right: 42px; height: 40px; border: 2px solid var(--techwave-some-a-bg-color); border-radius: 20px; line-height: 36px; } a.fn__like .count{ position: relative; top: 1px; } a.fn__like .fn__svg{ position: absolute; width: 18px; height: 18px; right: 18px; top: 50%; margin-top: -9px; opacity: 0; } a.fn__like .empty__like{ opacity: 1; } a.fn__like.has__like .empty__like{ opacity: 0; } a.fn__like.has__like .full__like{ opacity: 1; color: var(--techwave-main-color); } a.fn__like:hover{ opacity: .8; } a.fn__like.has__like{ border-color: var(--techwave-main-color); } a.fn__like.no_border{ border: none; padding: 0 24px 0 0; line-height: 16px; border-radius: 0; height: 16px; } a.fn__like.no_border .fn__svg{ right: 0; } /*------------------------------------------------------------------*/ /* 25) Checkbox /*------------------------------------------------------------------*/ .fn__checkbox{ margin: 0; padding: 0; position: relative; min-height: 20px; line-height: 20px; padding-left: 27px; font-size: 16px; font-weight: 400; border: none; outline: none; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .fn__checkbox .fn__svg{ opacity: 0; width: 12px; height: 12px; position: absolute; left: 4px; top: 50%; margin-top: -6px; border-color: var(--techwave-main-color); } .fn__checkbox input{ position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .fn__checkbox input:checked ~ .fn__svg{ opacity: 1; } .fn__checkbox input:checked ~ .checkmark { border-color: var(--techwave-main-color); } .fn__checkbox .checkmark{ width: 20px; height: 20px; display: block; position: absolute; top: 50%; margin-top: -10px; left: 0; border: 2px solid var(--techwave-border-color); border-radius: 3px; } /*------------------------------------------------------------------*/ /* 26) Image Lightbox /*------------------------------------------------------------------*/ .techwave_fn_img_lightbox{ opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 105; background-color: var(--techwave-site-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; overflow-y: auto; pointer-events: none; transition: all .3s ease; } .techwave_fn_img_lightbox.opened{ opacity: 1; visibility: visible; pointer-events: all; } .techwave_fn_img_lightbox .lightbox__top{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_img_lightbox .lightbox__tl{ width: 70%; width: calc(100% - 440px); } .techwave_fn_img_lightbox .lightbox__tr{ width: 30%; width: 440px; border-left: 1px solid var(--techwave-border-color); } .techwave_fn_img_lightbox .lightbox__tlbar{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; padding: 20px; -ms-align-items: center; align-items: center; } .techwave_fn_img_lightbox .lightbox__tlbar_left{ flex: 3; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .techwave_fn_img_lightbox .lightbox__tlbar_left .item{ margin: 2.5px 5px 2.5px 0; } .techwave_fn_img_lightbox .lightbox__tlbar_center{ flex: 2; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; column-gap: 5px; } .techwave_fn_img_lightbox .lightbox__tlbar_right{ flex: 3; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: flex-end; } .techwave_fn_img_lightbox .img_nav{ text-decoration: none; width: 40px; height: 40px; border: 2px solid var(--techwave-some-a-bg-color); border-radius: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; color: var(--techwave-heading-color); } .techwave_fn_img_lightbox .img_nav:hover{ border-color: var(--techwave-main-color); } .techwave_fn_img_lightbox .img_nav .fn__svg{ width: 12px; height: 12px; } .techwave_fn_img_lightbox .img_nav.nav_prev .fn__svg{ transform: rotate(180deg); } .techwave_fn_img_lightbox .lightbox__tlimg{ padding: 0 40px 60px; text-align: center; } .techwave_fn_img_lightbox .user__profile{ padding: 20px 70px 20px 20px; position: relative; position: sticky; top: 0; background-color: var(--techwave-site-bg-color); z-index: 2; border-bottom: 1px solid var(--techwave-border-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; width: 100%; } .techwave_fn_img_lightbox .user__profile .profile_link{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; text-decoration: none; -ms-align-items: center; align-items: center; margin-right: 10px; max-width: 55%; } .techwave_fn_img_lightbox .user__profile .profile_link .user_name{ margin: 0; padding: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; } .techwave_fn_img_lightbox .user__profile .profile_link img{ min-width: 40px; width: 40px; height: 40px; border-radius: 100%; margin-right: 10px; object-fit: cover; } .techwave_fn_img_lightbox .fn__closer{ position: absolute; right: 20px; top: 50%; margin-top: -15px; } .techwave_fn_img_lightbox .item__details{ padding: 20px; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_img_lightbox .item__details > *{ margin-bottom: 10px; } .techwave_fn_img_lightbox .item__details > *:last-child{ margin-bottom: 0px; } .techwave_fn_img_lightbox .lightbox__related{ padding: 36px 40px 20px; } .techwave_fn_img_lightbox .lightbox__related .fn__title_holder{ margin-bottom: 33px; } /*------------------------------------------------------------------*/ /* 27) Follow Button /*------------------------------------------------------------------*/ .fn__follow{ padding: 0 10px; position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; height: 24px; white-space: nowrap; max-width: 100%; text-decoration: none; background-color: var(--techwave-some-a-bg-color); font-family: var(--techwave-heading-font-family); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; border-radius: 12px; line-height: 24px; color: var(--techwave-body-color); font-weight: 400; } .fn__follow:hover{ opacity: .8; } .fn__follow.has__follow{ background-color: #f1416c; color: #fff; } /*------------------------------------------------------------------*/ /* 28) Icon Button /*------------------------------------------------------------------*/ .fn__icon_button{ width: 30px; height: 30px; border-radius: 5px; background-color: var(--techwave-some-a-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; color: var(--techwave-heading-color); } .fn__icon_button .dots{ display: block; position: relative; width: 15px; height: 3px; border-left: 3px solid var(--techwave-heading-color); border-right: 3px solid var(--techwave-heading-color); } .fn__icon_button .dots:after{ width: 3px; top: 0; bottom: 0; left: 3px; content: ''; position: absolute; background-color: var(--techwave-heading-color); } .fn__icon_button:hover{ opacity: .8; } .fn__icon_button .fn__svg{ width: 12px; height: 12px; } /*------------------------------------------------------------------*/ /* 29) Model Button (used in image lightbox) /*------------------------------------------------------------------*/ .fn__model{ position: relative; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); border-radius: 5px; padding: 10px 70px 10px 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; } .fn__model .fn__icon_button{ position: absolute; right: 20px; top: 50%; margin-top: -15px; } .fn__model .model_img img{ width: 60px; height: 60px; object-fit: cover; border-radius: 5px; margin-right: 15px; } .fn__model .model_subtitle{ margin: 0; padding: 0; font-weight: 500; letter-spacing: .5px; font-size: 11px; text-transform: uppercase; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .fn__model .model_title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*------------------------------------------------------------------*/ /* 30) Prompt Details (used in image lightbox) /*------------------------------------------------------------------*/ .fn__prompt_details{ position: relative; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); border-radius: 5px; } .fn__prompt_details .prompt__content{ padding: 0 20px 15px 20px; } .fn__prompt_details .prompt__content p{ margin: 0; font-size: 16px; line-height: 20px; } .fn__prompt_details .prompt__text{ margin: 0; padding: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 14px; font-weight: 400; line-height: 20px; text-transform: uppercase; } .fn__prompt_details .prompt__options:hover .prompt__popup{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__prompt_details .prompt__popup{ right: 0; position: absolute; top: 100%; padding-top: 5px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .3s ease; } .fn__prompt_details .prompt__popup ul{ width: 180px; list-style-type: none; background-color: var(--techwave-some-a-bg-color); border-radius: 5px; margin: 0; padding: 15px 20px; } .fn__prompt_details .prompt__popup a{ font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-decoration: none; overflow: hidden; } .fn__prompt_details .prompt__popup a:hover{ color: var(--techwave-main-color); } .fn__prompt_details .prompt__popup li{ margin: 0; margin-bottom: 3px; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .fn__prompt_details .prompt__popup li:last-child{ margin-bottom: 0; } .fn__prompt_details .prompt__options{ position: absolute; top: 50%; right: 20px; margin-top: -15px; } .fn__prompt_details .prompt__header{ position: relative; padding: 15px 70px 10px 20px; } /*------------------------------------------------------------------*/ /* 31) Detailed list (used in image lightbox) /*------------------------------------------------------------------*/ .fn__details_list{ padding: 27px 30px 3px; } .fn__details_list ul{ margin: 0; padding: 0; list-style-type: none; margin-left: -30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .fn__details_list li{ padding-left: 30px; margin-bottom: 20px; width: 50%; } .fn__details_list .sub_title{ margin: 0; padding: 0; font-weight: 500; letter-spacing: .5px; font-size: 11px; text-transform: uppercase; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; } .fn__details_list .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } /*------------------------------------------------------------------*/ /* 32) Grid Items (used in image lightbox) /*------------------------------------------------------------------*/ .fn__grid_items ul{ margin: 0; padding: 0; list-style-type: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-left: -20px; } .fn__grid_items li{ padding-left: 20px; margin-bottom: 20px; width: 16.6666%; } .fn__grid_items img{ border-radius: 5px; display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: all .3s ease; } .fn__grid_items img:hover{ -webkit-filter: brightness(.5); filter: brightness(.5); } /*------------------------------------------------------------------*/ /* 33) Reportbox /*------------------------------------------------------------------*/ .techwave_fn_report{ pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 110; opacity: 0; visibility: hidden; background-color: var(--techwave-site-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; overflow-y: auto; padding: 40px; } .techwave_fn_report.opened{ pointer-events: all; opacity: 1; visibility: visible; } .techwave_fn_report .report__closer{ z-index: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .techwave_fn_report .report__content{ width: 600px; max-width: 100%; border-radius: 5px; background-color: var(--techwave-some-r-bg-color); padding: 30px; padding-bottom: 25px; position: relative; border: 1px solid var(--techwave-border-color); z-index: 3; } .techwave_fn_report .fn__closer{ position: absolute; right: 30px; top: 30px; z-index: 2; } .techwave_fn_report .title{ text-align: center; margin: 0; padding: 0; font-weight: 500; font-size: 24px; letter-spacing: 0; margin-bottom: 4px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_report .subtitle{ display: block; margin: 0; padding: 0; font-size: 16px; font-weight: 400; line-height: 40px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_report .reason_field{ display: block; width: 100%; margin-bottom: 15px; height: 50px; border-radius: 5px; } .techwave_fn_report .btns{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .techwave_fn_report .btns .cancel{ opacity: .6; } .techwave_fn_report .btns a{ margin: 5px 10px 5px 0; } /*------------------------------------------------------------------*/ /* 34) Ajax Loader (Loading) /*------------------------------------------------------------------*/ .fn__preloader{ opacity: 0; visibility: hidden; position: absolute; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; justify-content: center; width: 100%; height: 150px; border: 2px solid var(--techwave-border-color); top: 0; left: 0; z-index: 1; } .fn__preloader .text{ display: block; font-size: 18px; letter-spacing: .25px; text-transform: uppercase; font-family: var(--techwave-heading-font-family); font-weight: 600; color: var(--techwave-heading-color); } .fn__preloader .icon{ width: 60px; height: 60px; display: block; border: 4px solid transparent; border-top-color: var(--techwave-hover-color); border-right-color: var(--techwave-hover-color); border-bottom-color: var(--techwave-hover-color); border-radius: 100%; animation: techwave_spin 1s linear infinite; margin-bottom: 15px; } .fn__preloader.loading{ opacity: 1; visibility: visible; } @keyframes techwave_spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } /*------------------------------------------------------------------*/ /* 35) Page: Sign In and Sign Up /*------------------------------------------------------------------*/ .techwave_fn_sign{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 110; background-color: var(--techwave-site-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; overflow-y: auto; padding: 50px 40px; } .techwave_fn_sign .logo{ background-image: none,url(../img/logo-desktop-full.png); background-size: 141px; background-position: center top; background-repeat: no-repeat; color: #3c434a; height: 17px; font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0 auto 50px; padding: 0; text-decoration: none; width: 141px; text-indent: -9999px; outline: 0; overflow: hidden; display: block; } .techwave_fn_sign .sign__desc p{ margin: 0; margin-top: 25px; text-align: center; font-size: 14px; line-height: 18px; letter-spacing: 0; font-family: var(--techwave-body-font-family); color: var(--techwave-body-color); } .techwave_fn_sign .sign__desc p a{ text-decoration: none; color: var(--techwave-heading-color); } .techwave_fn_sign .sign__desc p a:hover{ text-decoration: underline; } .techwave_fn_sign .sign__content{ width: 500px; max-width: 100%; } .techwave_fn_sign .form__content{ width: 100%; border-radius: 5px; background-color: var(--techwave-some-r-bg-color); padding: 36px 50px 40px 50px; position: relative; border: 1px solid var(--techwave-border-color); } .techwave_fn_sign .form__email, .techwave_fn_sign .form__name, .techwave_fn_sign .form__username{ margin-bottom: 17px; } .techwave_fn_sign .pass_lab{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: space-between; } .techwave_fn_sign .pass_lab a{ font-size: 16px; text-decoration: none; font-family: var(--techwave-body-font-family); color: var(--techwave-main-color); line-height: 40px; } .techwave_fn_sign .pass_lab a:hover{ text-decoration: underline; } .techwave_fn_sign .form__title{ text-align: center; font-size: 24px; margin: 0; font-weight: 500; font-family: var(--techwave-body-font-family); color: var(--techwave-heading-color); line-height: 1; margin-bottom: 3px; } .techwave_fn_sign label{ display: block; font-size: 16px; font-weight: 400; font-family: var(--techwave-body-font-family); color: var(--techwave-heading-color); line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .techwave_fn_sign input[type="text"], .techwave_fn_sign input[type="password"]{ display: block; width: 100%; border-radius: 5px; height: 60px; min-width: 100%; } .techwave_fn_sign .fn__lined_text{ margin-bottom: 14px; } .fn__lined_text{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; width: 100%; } .fn__lined_text .line{ width: 50%; height: 1px; background-color: var(--techwave-border-color); } .fn__lined_text .text{ white-space: nowrap; font-size: 14px; text-transform: uppercase; margin: 0; color: var(--techwave-body-color); font-family: var(--techwave-body-font-family); padding: 0 10px; } .techwave_fn_sign .form__alternative a{ width: 100%; } .techwave_fn_sign .form__submit{ margin-bottom: 14px; } .techwave_fn_sign .form__pass{ margin-bottom: 30px; } /*------------------------------------------------------------------*/ /* 36) Select Filter (personal feed page) /*------------------------------------------------------------------*/ .filter__select{ position: relative; z-index: 5; } .filter__select .item__popup{ opacity: 0; visibility: hidden; transform: translateY(20px); position: absolute; right: 0; top: 100%; width: 140px; margin: 0; padding: 0; padding-top: 5px; transition: all .3s ease; } .filter__select:hover .item__popup{ opacity: 1; visibility: visible; transform: translateY(0); } .filter__select .item__popup ul{ list-style-type: none; background-color: var(--techwave-some-a-bg-color); border-radius: 5px; margin: 0; padding: 15px 20px; } .filter__select .item__popup li:last-child{ margin-bottom: 0; } .filter__select .item__popup li{ margin: 0; margin-bottom: 3px; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .filter__select .item__popup a{ font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-decoration: none; overflow: hidden; } .filter__select .item__popup a:hover{ color: var(--techwave-main-color); opacity: .9; } /*------------------------------------------------------------------*/ /* 37) Page: Notifications /*------------------------------------------------------------------*/ .techwave_fn_notifications_content{ padding: 40px 0; } .techwave_fn_notifications_list .notification__item:last-child{ margin-bottom: 0; } .techwave_fn_notifications_list .notification__item{ padding: 24px 30px; border-radius: 5px; border: 1px solid var(--techwave-border-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 20px; justify-content: space-between; -ms-align-items: center; align-items: center; background-color: var(--techwave-some-r-bg-color); margin-bottom: 10px; position: relative; transition: all .3s ease; } .techwave_fn_notifications_list .notification__item:hover{ background-color: var(--techwave-some-a-bg-color); } .techwave_fn_notifications_list .item__title{ color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 20px; font-weight: 400; margin: 0; padding: 0; } .techwave_fn_notifications_list .item__date{ color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); font-size: 11px; font-weight: 500; text-transform: uppercase; } .techwave_fn_notification_single_content{ padding: 40px 0; } /*------------------------------------------------------------------*/ /* 38) Back To button (notification single page) /*------------------------------------------------------------------*/ .fn__backto{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .fn__backto a{ text-decoration: none; height: 30px; line-height: 30px; position: relative; padding-left: 30px; padding-right: 13px; border-radius: 5px; font-size: 16px; letter-spacing: 0; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); font-weight: 400; display: block; background-color: var(--techwave-some-a-bg-color); } .fn__backto a:hover{ color: var(--techwave-main-color); } .fn__backto a .text{ position: relative; top: 1px; } .fn__backto a .fn__svg{ transform: rotate(180deg); width: 12px; height: 12px; left: 10px; top: 50%; margin-top: -6px; position: absolute; } /*------------------------------------------------------------------*/ /* 39) Page: Pricing /*------------------------------------------------------------------*/ .techwave_fn_pricing_page{ padding: 93px 0px 100px; } .techwave_fn_pricing_page .techwave_fn_title_holder{ margin-bottom: 43px; } .techwave_fn_pricing_page .techwave_fn_pricing{ margin-bottom: 111px; } .techwave_fn_pricing .pricing__tab{ display: none; } .techwave_fn_pricing .pricing__tab.active{ display: block; } .techwave_fn_pricing .pricing__toggle{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; margin-bottom: 40px; } .techwave_fn_pricing .pricing__toggle .bg{ position: absolute; height: 40px; top: 9px; left: 50%; border-radius: 20px; background-color: var(--techwave-some-a-bg-color); z-index: 1; transition: all .3s ease; width: 0; } .techwave_fn_pricing .pricing__toggle .toggle_in{ border: 1px solid var(--techwave-border-color); border-radius: 60px; padding: 9px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; position: relative; } .techwave_fn_pricing .pricing__toggle a{ text-decoration: none; height: 40px; line-height: 40px; padding: 0 35px; font-size: 14px; margin: 0; font-weight: 500; text-transform: uppercase; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); position: relative; z-index: 2; } .techwave_fn_pricing .pricing__toggle a:hover{ color: var(--techwave-main-color); } .techwave_fn_pricing .pricing__content{ border: 1px solid var(--techwave-border-color); border-radius: 5px; background-color: var(--techwave-some-r-bg-color); } .techwave_fn_pricing .popular{ position: absolute; top: 0; margin-top: -16px; background-color: #ab0cdf; height: 30px; border-radius: 15px; font-weight: 500; color: #fff; letter-spacing: 0; text-transform: uppercase; font-family: var(--techwave-heading-font-family); padding: 0 18px; font-size: 14px; line-height: 30px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 3; } .techwave_fn_pricing .popular *{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; } .techwave_fn_pricing .popular:after{ content: ''; left: 50%; margin-left: -6px; top: 100%; width: 0; height: 0; border-style: solid; border-width: 4px 6px 0 6px; border-color: #ab0cdf transparent transparent transparent; position: absolute; } .techwave_fn_pricing .item_row{ margin-left: -1px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; text-align: center; } .techwave_fn_pricing .item_row .item_col:nth-child(1){ width: 31%; max-width: 31%; text-align: left; justify-content: flex-start; } .techwave_fn_pricing .item_row .item_col{ width: 23%; max-width: 23%; border-left: 1px solid var(--techwave-border-color); position: relative; } .techwave_fn_pricing .pricing__header .title{ margin: 0; padding: 0; font-size: 24px; letter-spacing: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 10px; } .techwave_fn_pricing .pricing__header .price{ margin: 0; padding: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 14px; font-weight: 500; margin-bottom: 11px; } .techwave_fn_pricing .pricing__header .price span{ font-size: 36px; font-weight: 500; } .techwave_fn_pricing .pricing__header .desc{ margin: 0; padding: 0; font-size: 14px; letter-spacing: 0; line-height: 20px; font-weight: 400; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); margin-bottom: 24px; } .techwave_fn_pricing .pricing__header .desc span{ color: var(--techwave-heading-color); } .techwave_fn_pricing .pricing__header .purchase{ padding: 0; margin: 0; } .techwave_fn_pricing .pricing__header .purchase a{ width: 100%; } .techwave_fn_pricing .pricing__header .item_col{ padding: 35px 30px 40px 30px; } .techwave_fn_pricing .pricing__heading{ background-color: var(--techwave-some-a-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; margin: 0 -1px; } .techwave_fn_pricing .pricing__heading .item.wide{ width: 69%; max-width: 69%; } .techwave_fn_pricing .pricing__heading .item{ height: 54px; position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; padding: 0 30px; } .techwave_fn_pricing .pricing__heading .item{ width: 31%; max-width: 31%; } .techwave_fn_pricing .pricing__heading .title{ font-size: 14px; margin: 0; padding: 0; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_pricing .pricing__heading .item_col:first-child{ padding: 0 40px; } .techwave_fn_pricing .pricing__heading .item.wide:after{ content: ''; left: 30px; right: 30px; position: absolute; height: 4px; border-radius: 5px; top: 50%; margin-top: -2px; background-color: var(--techwave-site-bg-color); } .techwave_fn_pricing .pricing__fields .item_row:nth-child(1) .item_col{ padding-top: 35px; } .techwave_fn_pricing .pricing__fields .item_row:last-child .item_col{ padding-bottom: 24px; } .techwave_fn_pricing .pricing__fields .item_col{ padding: 9px 30px; line-height: 24px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .techwave_fn_pricing .pricing__fields .option_text{ font-size: 16px; margin: 0; padding: 0; letter-spacing: .5px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_pricing .pricing__fields .heading_text{ font-size: 16px; margin: 0; padding: 0; letter-spacing: .5px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_pricing .pricing__footer{ border-top: 1px solid var(--techwave-border-color); } .techwave_fn_pricing .pricing__footer .item_col{ padding: 40px 30px; } .techwave_fn_pricing .pricing__footer a{ width: 100%; } /*------------------------------------------------------------------*/ /* 40) Shortcode: Pricing Mobile /*------------------------------------------------------------------*/ .fn__mobile_pricing{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; display: none; flex-wrap: wrap; margin-left: -20px; text-align: center; } .fn__mobile_pricing .pricing__item{ width: 33.3333%; padding-left: 20px; margin-bottom: 20px; } .fn__mobile_pricing .pricing__item_holder{ width: 100%; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); border-radius: 5px; position: relative; } .fn__mobile_pricing .pricing__item__header{ padding: 35px 10px 40px 10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -ms-align-items: center; align-items: center; } .fn__mobile_pricing .pricing__item__header .title{ margin: 0; padding: 0; font-size: 24px; letter-spacing: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 10px; } .fn__mobile_pricing .pricing__item__header .price{ margin: 0; padding: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 14px; font-weight: 500; margin-bottom: 11px; } .fn__mobile_pricing .pricing__item__header .price span{ font-size: 36px; font-weight: 500; } .fn__mobile_pricing .pricing__item__header .desc{ margin: 0; padding: 0; font-size: 14px; letter-spacing: 0; line-height: 20px; font-weight: 400; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); margin-bottom: 24px; } .fn__mobile_pricing .pricing__item__header .desc span{ color: var(--techwave-heading-color); } .fn__mobile_pricing .pricing__item__header .purchase{ padding: 0; margin: 0; } .fn__mobile_pricing .pricing__item__header .purchase a{ width: 100%; } .fn__mobile_pricing .pricing__item__heading{ background-color: var(--techwave-some-a-bg-color); padding: 0 10px; text-align: center; height: 40px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .fn__mobile_pricing .pricing__item__heading .title{ font-size: 14px; margin: 0; padding: 0; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .fn__mobile_pricing .pricing__item_list{ padding: 10px 0px; } .fn__mobile_pricing .pricing__item_list_item{ padding: 7px 10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: space-between; column-gap: 20px; } .fn__mobile_pricing .pricing__item_list .title{ font-size: 14px; margin: 0; padding: 0; letter-spacing: .5px; font-weight: 400; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); text-align: left; } .fn__mobile_pricing .pricing__item_list .desc{ font-size: 16px; margin: 0; padding: 0; letter-spacing: .5px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-align: right; white-space: nowrap; } .fn__mobile_pricing .pricing__item_footer{ padding: 30px 10px; border-top: 1px solid var(--techwave-border-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } /*------------------------------------------------------------------*/ /* 41) Page: User Profile /*------------------------------------------------------------------*/ .techwave_fn_user_profile{ padding: 40px 0; } .techwave_fn_user_profile .user__profile{ border-radius: 5px; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); position: relative; padding: 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; margin-bottom: 10px; } .techwave_fn_user_profile .user__profile .user_edit{ position: absolute; top: 30px; right: 30px; } .techwave_fn_user_profile .user__profile .user_edit .fn__svg{ width: 16px; height: 16px; } .techwave_fn_user_profile .user__profile .user_avatar{ width: 200px; min-width: 200px; margin-right: 30px; } .techwave_fn_user_profile .user__profile .user_avatar img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; border-radius: 5px; } .techwave_fn_user_profile .user__profile .user_details ul{ margin: 0; padding: 0; list-style-type: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-left: -20px; } .techwave_fn_user_profile .user__profile .user_details li{ margin: 11px 0; padding: 0; width: 50%; padding-left: 20px; } .techwave_fn_user_profile .user__profile .subtitle{ margin: 0; padding: 0; font-weight: 500; letter-spacing: .5px; font-size: 11px; text-transform: uppercase; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 7px; } .techwave_fn_user_profile .user__profile .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_user_profile .user__plan{ border-radius: 5px; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); position: relative; padding: 38px 30px 33px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: space-between; margin-bottom: 38px; column-gap: 30px; } .techwave_fn_user_profile .user__plan .subtitle{ margin: 0; padding: 0; font-weight: 500; letter-spacing: .5px; font-size: 11px; text-transform: uppercase; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .techwave_fn_user_profile .user__plan .info{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_user_profile .user__plan .info span{ color: var(--techwave-heading-color); } .techwave_fn_user_profile .user__interests .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 14px; } /*------------------------------------------------------------------*/ /* 42) Shortcode: Options list (used in user profile page) /*------------------------------------------------------------------*/ .fn__options_list ul{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style-type: none; margin-left: -10px; } .fn__options_list li{ padding-left: 10px; margin-bottom: 10px; } /*------------------------------------------------------------------*/ /* 43) Page: User Settings /*------------------------------------------------------------------*/ .techwave_fn_user_settings{ padding: 40px 0; } .techwave_fn_user_settings .user__settings{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 40px; } .techwave_fn_user_settings .settings_left{ width: 300px; max-width: 50%; } .techwave_fn_user_settings .settings_right{ flex: auto; max-width: 50%; } .techwave_fn_user_settings .input_label{ display: block; font-size: 16px; font-weight: 400; font-family: var(--techwave-body-font-family); color: var(--techwave-heading-color); line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .techwave_fn_user_settings .input_item{ position: relative; } .techwave_fn_user_settings .input_item .email{ margin: 0; padding: 0; position: absolute; top: 50%; margin-top: -15px; border-radius: 5px; display: block; width: 30px; height: 30px; background-color: var(--techwave-some-a-bg-color); left: 12px; color: var(--techwave-main-color); line-height: 30px; text-align: center; font-size: 16px; font-family: var(--techwave-body-font-family); pointer-events: none; } .techwave_fn_user_settings .input{ display: block; width: 100%; border-radius: 5px; height: 60px; } .techwave_fn_user_settings .settings_right .fn__checkbox{ margin: 30px 0; display: block; width: fit-content; max-width: 100%; } .techwave_fn_user_settings .settings_right .item{ margin-bottom: 17px; } .techwave_fn_user_settings .settings_right .item:last-child{ margin-bottom: 0; } .techwave_fn_user_settings #username{ padding-left: 50px; } /*------------------------------------------------------------------*/ /* 44) Upload Button /*------------------------------------------------------------------*/ .fn__upload{ cursor: pointer; text-align: center; width: 100%; aspect-ratio: 1 / 1; border: 2px dashed var(--techwave-border-color); border-radius: 5px; background-color: var(--techwave-some-r-bg-color); padding: 46px; transition: all .3s ease; position: relative; display: block; overflow: hidden; } .fn__upload .upload_content{ width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -ms-align-items: center; align-items: center; min-height: 100%; } .fn__upload.has_img{ border-color: var(--techwave-main-color); } .fn__upload.has_img .upload_content{ opacity: 0; } .fn__upload .upload_preview{ opacity: 0; visibility: hidden; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -ms-align-items: center; align-items: center; justify-content: center; } .fn__upload.has_img .upload_preview{ opacity: 1; visibility: visible; } .fn__upload:hover{ opacity: .8; } .fn__upload .preview_img{ object-fit: cover; } .fn__upload .preview_img[src="#"]{ opacity: 0; } .fn__upload input[type="file"]{ z-index: 2; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; } .fn__upload .upload_content .fn__svg{ width: 70px; height: auto; color: var(--techwave-heading-color); margin-bottom: 15px; } .fn__upload .upload_content .fn__lined_text{ margin-bottom: 4px; } .fn__upload .upload_content .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 3px; } .fn__upload .upload_content .desc{ margin: 0; padding: 0; padding-top: 6px; font-size: 12px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .fn__upload .fn__closer{ position: absolute; right: 10px; top: 10px; z-index: 3; } /*------------------------------------------------------------------*/ /* 45) Page: User Billing /*------------------------------------------------------------------*/ .techwave_fn_user_billing{ padding: 40px 0; } .techwave_fn_user_billing .billing__plan{ border-radius: 5px; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); position: relative; padding: 28px 30px 23px; margin-bottom: 10px; } .techwave_fn_user_billing .billing__plan .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 4px; } .techwave_fn_user_billing .billing__plan .desc{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_user_billing .billing__plan .plan{ position: absolute; left: 30px; top: -10px; display: block; height: 20px; padding: 0 15px; background-color: var(--techwave-main-color); color: #fff; font-family: var(--techwave-heading-font-family); font-weight: 500; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; line-height: 20px; border-radius: 10px; } .techwave_fn_user_billing .billing__plan .plan *{ position: relative; top: 1px; } .techwave_fn_user_billing .billing__activation{ margin-bottom: 39px; } .techwave_fn_user_billing .billing__activation .activation_status .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 5px; } .techwave_fn_user_billing .billing__activation .activation_status .desc{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_user_billing .billing__activation .activation_status{ border-radius: 5px; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); position: relative; padding: 28px 30px 23px; margin-bottom: 15px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; column-gap: 30px; } .techwave_fn_user_billing .billing__activation .status_right{ width: 150px; max-width: 50%; text-align: right; } .techwave_fn_user_billing .billing__activation .status_right .info{ display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; font-weight: 500; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); line-height: 1; margin-bottom: 6px; } .techwave_fn_user_billing .billing__activation .status_right .progress{ display: block; width: 100%; height: 4px; background-color: var(--techwave-some-a-bg-color); border-radius: 4px; position: relative; } .techwave_fn_user_billing .billing__activation .status_right .progress.active:after{ width: var(--frenify-progress); } .techwave_fn_user_billing .billing__activation .status_right .progress:after{ right: 0; top: 0; position: absolute; bottom: 0; background-color: var(--techwave-main-color); border-radius: 4px; width: 0; transition: all .3s ease; content: ''; } .techwave_fn_user_billing .billing__activation .activation_actions{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; } .techwave_fn_user_billing .billing__activation .activation_actions a{ margin: 5px 10px 5px 0; } .techwave_fn_user_billing .payment__methods .title{ margin: 0; padding: 0; font-size: 22px; line-height: 1.364; font-weight: 600; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 22px; } .techwave_fn_user_billing .payment__methods .payment__list{ margin: 0; list-style-type: none; padding: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-left: -20px; } .techwave_fn_user_billing .payment__methods .payment__list_item{ margin: 0; padding: 0; width: 50%; padding-left: 20px; margin-bottom: 20px; } .techwave_fn_user_billing .payment__methods .ready .item{ border-radius: 5px; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); position: relative; } .techwave_fn_user_billing .payment__methods .ready .item_header{ padding: 17px 15px 13px; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_user_billing .payment__methods .ready .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 3px; } .techwave_fn_user_billing .payment__methods .ready .subtitle{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_user_billing .payment__methods .ready .action{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; width: 100%; justify-content: space-between; height: 40px; padding: 0 15px; -ms-align-items: center; align-items: center; } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper{ position: relative; } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .options{ width: 30px; height: 30px; border-radius: 30px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .dots{ display: block; position: relative; width: 15px; height: 3px; border-left: 3px solid var(--techwave-heading-color); border-right: 3px solid var(--techwave-heading-color); } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .dots:after{ width: 3px; top: 0; bottom: 0; left: 3px; content: ''; position: absolute; background-color: var(--techwave-heading-color); } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper:hover .edit__popup{ opacity: 1; visibility: visible; transform: translateY(0px); } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup{ position: absolute; left: 100%; bottom: 0; width: 140px; opacity: 0; visibility: hidden; transition: all .3s ease; transform: translateY(-20px); } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup a{ font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-decoration: none; overflow: hidden; } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup a:hover{ color: var(--techwave-main-color); } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup ul{ list-style-type: none; background-color: var(--techwave-some-a-bg-color); border-radius: 5px; margin: 0; padding: 15px 20px; } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup li{ margin: 0; margin-bottom: 3px; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup li:last-child{ margin-bottom: 0; } .techwave_fn_user_billing .payment__methods .ready .primary{ display: block; height: 20px; padding: 0 15px; background-color: var(--techwave-main-color); color: #fff; font-family: var(--techwave-heading-font-family); font-weight: 500; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; line-height: 20px; border-radius: 15px; } .techwave_fn_user_billing .payment__methods .ready .primary span{ position: relative; top: 1px; } .techwave_fn_user_billing .payment__methods .new .item{ border-radius: 5px; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); position: relative; padding: 30px 15px 27px; text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; justify-content: center; } .techwave_fn_user_billing .payment__methods .new .item a{ z-index: 2; } .techwave_fn_user_billing .payment__methods .new .add{ height: 40px; width: 40px; position: relative; margin-bottom: 9px; } .techwave_fn_user_billing .payment__methods .new .add:after{ width: 2px; height: 40px; position: absolute; content: ''; left: 50%; margin-left: -1px; background-color: var(--techwave-border-color); top: 50%; margin-top: -20px; } .techwave_fn_user_billing .payment__methods .new .add:before{ width: 40px; height: 2px; position: absolute; content: ''; top: 50%; left: 50%; margin-left: -20px; margin-top: -1px; background-color: var(--techwave-border-color); } .techwave_fn_user_billing .payment__methods .new .text{ font-weight: 500; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .5px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } /*------------------------------------------------------------------*/ /* 46) Page: AI Chat Bot /*------------------------------------------------------------------*/ .techwave_fn_aichatbot_page{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; min-height: calc(100vh - var(--techwave-header-height) - 71px); } .techwave_fn_aichatbot_page .chat__page{ width: 100%; padding-top: 38px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; position: relative; z-index: 3; } .techwave_fn_image_generation_page .generation__sidebar, .techwave_fn_doc_page .docsidebar, .techwave_fn_aichatbot_page .chat__sidebar{ width: 300px; min-width: 300px; border-left: 1px solid var(--techwave-border-color); background-color: var(--techwave-header-bg-color); top: var(--techwave-header-height); position: fixed; z-index: 1; right: 0; bottom: 0; transform: translateX(105%); transition: all .2s ease; } .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_image_generation_page .generation__sidebar, .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_doc_page .docsidebar, .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_aichatbot_page .chat__sidebar{ transform: translateX(0); } .techwave_fn_aichatbot_page .chat__sidebar .sidebar_header{ padding: 20px; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_aichatbot_page .chat__sidebar .sidebar_content{ padding: 20px; } .techwave_fn_aichatbot_page .chat__sidebar .sidebar_content ul{ margin: 0; padding: 0; list-style-type: none; } .fn__chat_link{ text-decoration: none; display: block; height: 40px; line-height: 40px; padding: 0 20px; padding-right: 40px; border: 1px solid var(--techwave-border-color); border-radius: 5px; font-size: 16px; font-weight: 400; letter-spacing: 0; font-family: var(--techwave-heading-font-family); color: var(--techwave-body-color); position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .fn__chat_link:hover{ border-color:var(--techwave-body-color); } .fn__chat_link.active{ border-color:var(--techwave-main-color); color: var(--techwave-heading-color); } .fn__chat_link a:hover{ border-color: var(--techwave-main-color); } .fn__chat_link .text{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .fn__chat_link .options{ position: absolute; right: 0; top: 0; bottom: 0; display: block; } .fn__chat_link.opened .trigger span:after{ background-color: var(--techwave-heading-color); } .fn__chat_link.opened .trigger span{ border-left-color: var(--techwave-heading-color); border-right-color: var(--techwave-heading-color); } .fn__chat_link.opened .trigger{ background-color: var(--techwave-some-a-bg-color); } .fn__chat_link .trigger{ background-color: transparent; padding: 0; margin: 0; outline: none; border: none; width: 38px; height: 38px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; cursor: pointer; border-radius: 0 4px 4px 0; } .fn__chat_link .trigger:hover{ background-color: var(--techwave-some-a-bg-color); } .fn__chat_link .trigger span{ display: block; position: relative; width: 15px; height: 3px; border-left: 3px solid var(--techwave-body-color); border-right: 3px solid var(--techwave-body-color); } .fn__chat_link .trigger span:after{ width: 3px; top: 0; bottom: 0; left: 3px; content: ''; position: absolute; background-color: var(--techwave-body-color); } .fn__chat_link.opened{ z-index: 10; } .fn__chat_link.opened .options__popup{ opacity: 1; visibility: visible; transform: translateY(0); } .fn__chat_link .options__popup{ position: absolute; top: 100%; right: -1px; width: 140px; transition: all .3s ease; padding-top: 6px; opacity: 0; visibility: hidden; transform: translateY(20px); } .fn__chat_link .options__list{ list-style-type: none; background-color: var(--techwave-some-a-bg-color); border-radius: 5px; margin: 0; padding: 15px 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .fn__chat_link .options__list button:last-child{ margin-bottom: 0; } .fn__chat_link .options__list button:hover{ color: var(--techwave-main-color); } .fn__chat_link .options__list button{ background-color: transparent; outline: none; border: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-decoration: none; overflow: hidden; margin-bottom: 3px; transition: all .3s ease; } .fn__chat_link.live_edit .save_options, .fn__chat_link.live_edit input{ opacity: 1; visibility: visible; } .fn__chat_link.live_edit .options, .fn__chat_link.live_edit .text{ opacity: 0; visibility: hidden; } .fn__chat_link input{ position: absolute; height: 24px; left: 12px; right: 63px; margin: 0; padding: 0 7px; top: 50%; margin-top: -11px; font-size: 16px; font-weight: 400; letter-spacing: 0; font-family: var(--techwave-heading-font-family); color: var(--techwave-body-color); background-color: transparent; outline: none; opacity: 0; visibility: hidden; min-width: inherit; border: 1px solid var(--techwave-border-color); border-radius: 5px; } .fn__chat_link .save_options{ position: absolute; right: 0; top: 0; bottom: 0; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; opacity: 0; visibility: hidden; } .fn__chat_link .save_options button{ width: 24px; height: 24px; border: none; cursor: pointer; outline: none; border-radius: 5px; background-color: var(--techwave-some-a-bg-color); margin-right: 5px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; color: var(--techwave-heading-color); } .fn__chat_link .save_options button:hover{ background-color: var(--techwave-main-color); color: #fff; } .fn__chat_link .save_options .fn__svg{ width: 10px; height: 10px; } .techwave_fn_aichatbot_page .chat__sidebar .group__title{ margin: 0; padding: 0 10px; text-transform: uppercase; font-weight: 500; font-size: 11px; letter-spacing: .5px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); margin-bottom: 12px; } .techwave_fn_aichatbot_page .chat__comment{ margin-top: auto; position: sticky; bottom: 0; padding: 20px 0; background-color: var(--techwave-site-bg-color) } .fn__chat_comment{ position: relative; } .fn__chat_comment .new__chat{ position: absolute; width: 500px; max-width: 100%; bottom: 100%; margin-bottom: 53px; left: 50%; background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); border-radius: 5px; padding: 35px 40px 33px; text-align: center; transform: translateY(-20px) translateX(-50%) translateZ(0); opacity: 0; visibility: hidden; pointer-events: none; transition: all .3s ease; } .fn__chat_comment.neww .new__chat{ transform: translateY(0px) translateX(-50%) translateZ(0); opacity: 1; visibility: visible; } .fn__chat_comment .new__chat:after{ position: absolute; left: 50%; margin-left: -19px; top: 100%; margin-top: -1px; width: 0; height: 0; border-style: solid; border-width: 14px 19px 0 19px; border-color: var(--techwave-some-r-bg-color) transparent transparent transparent; content: ''; filter: drop-shadow(0px 1px var(--techwave-border-color)); } .fn__chat_comment .new__chat *{ margin: 0; padding: 0; font-size: 16px; line-height: 1.5; letter-spacing: .5px; font-weight: 500; text-transform: uppercase; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .fn__hidden_textarea{ position: absolute; top: 0; left: 0; right: 0; max-height: inherit; opacity: 0; pointer-events: none; overflow-y: scroll; } .fn__chat_comment textarea{ border: 2px solid var(--techwave-border-color); background-color: transparent; border-radius: 5px; outline: none; display: block; width: 100%; padding: 18px 20px 16px; padding-right: 72px; font-size: 16px; font-weight: 400; line-height: 22px; max-height: 170px; font-family: var(--techwave-heading-font-family); resize: none; overflow-y: hidden; color: var(--techwave-heading-color); } #fn__chat_textarea::-webkit-scrollbar{ width: 0; } .fn__chat_comment textarea:focus{ border-color: var(--techwave-main-color); } .fn__chat_comment button{ position: absolute; width: 60px; height: 44px; bottom: 8px; right: 8px; padding: 0; margin: 0; border-radius: 5px; outline: none; cursor: pointer; border: none; background-color: var(--techwave-some-a-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; color: var(--techwave-heading-color); transition: all .3s ease; } .fn__chat_comment button.disabled{ cursor: not-allowed; opacity: .5; } .fn__chat_comment button:hover{ opacity: .8; } .fn__chat_comment .fn__svg{ width: 21px; height: 21px; } .fn__new_chat_link{ text-decoration: none; display: block; width: 100%; height: 40px; line-height: 40px; padding: 0 10px 0 44px; position: relative; font-weight: 500; text-transform: uppercase; font-size: 14px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); background-color: var(--techwave-some-a-bg-color); border-radius: 5px; } .fn__new_chat_link:hover{ opacity: .8; } .fn__new_chat_link .text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; top: 1px; } .fn__new_chat_link .icon{ position: absolute; width: 24px; height: 24px; display: block; border-radius: 100%; background-color: #454449; left: 10px; top: 50%; margin-top: -12px; } .fn__new_chat_link .icon:before{ content: ''; position: absolute; width: 2px; height: 8px; background-color: #b3aac7; top: 50%; left: 50%; margin: -4px 0 0 -1px; } .fn__new_chat_link .icon:after{ content: ''; position: absolute; width: 8px; height: 2px; background-color: #b3aac7; top: 50%; left: 50%; margin: -1px 0 0 -4px; } .techwave_fn_aichatbot_page .fn__title_holder{ margin-bottom: 23px; } .techwave_fn_aichatbot_page .chat__item{ display: none; } .techwave_fn_aichatbot_page .chat__item.active{ display: block; } .fn__chatbot .chat__box{ position: relative; margin-bottom: 20px; } .fn__chatbot .chat__box:last-child{ margin-bottom: 0; } .fn__chatbot .author{ position: absolute; left: 30px; top: -10px; display: block; height: 20px; padding: 0 15px; background-color: var(--techwave-main-color); color: #fff; font-family: var(--techwave-heading-font-family); font-weight: 500; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; line-height: 20px; border-radius: 10px; } .fn__chatbot .author *{ position: relative; top: 1px; } .fn__chatbot .chat{ padding: 30px; border-radius: 5px; font-size: 16px; font-weight: 400; line-height: 1.375; font-family: var(--techwave-heading-font-family); } .fn__chatbot .chat a{ text-decoration: underline; color: var(--techwave-main-color); } .fn__chatbot .chat a:hover{ text-decoration: none; } .fn__chatbot .your__chat .chat{ background-color: var(--techwave-some-a-bg-color); color: var(--techwave-heading-color); } .fn__chatbot .bot__chat .author{ background-color: var(--techwave-some-a-bg-color); color: var(--techwave-body-color); } .fn__chatbot .bot__chat .chat{ background-color: var(--techwave-some-r-bg-color); border: 1px solid var(--techwave-border-color); } .fn__chatbot .chat > *:last-child:not(ul){ margin-bottom: 0; } /*------------------------------------------------------------------*/ /* 47) Page: Documentation /*------------------------------------------------------------------*/ .techwave_fn_doc_page .doccontent{ padding: 40px 0; } .techwave_fn_doc_page .doccontent *{ margin-bottom: 20px; } .rounded{ border-radius: 5px; } .techwave_fn_doc_page .docsidebar{ padding: 20px; } .techwave_fn_doc_page .docsidebar .trigger{ right: 5px; top: 50%; margin-top: -6px; position: absolute; display: block; color: var(--techwave-heading-color); transform: rotate(90deg); transition: all .2s ease; } .techwave_fn_doc_page .docsidebar ul ul{ margin: 0; list-style-type: none; padding: 0; margin-left: 26px; margin-top: 4px; overflow: hidden; } .techwave_fn_doc_page .docsidebar .trigger .fn__svg{ width: 12px; height: 12px; display: block; } .techwave_fn_doc_page .docsidebar li{ position: relative; margin-bottom: 4px; } .techwave_fn_doc_page .docsidebar ul{ margin: 0; padding: 0; list-style-type: none; } .techwave_fn_doc_page .docsidebar ul ul a{ padding-left: 17px; } .techwave_fn_doc_page .docsidebar ul ul a:after{ width: 5px; height: 2px; background-color: var(--techwave-heading-color); position: absolute; left: 6px; top: 50%; margin-top: -1px; content: ''; } .techwave_fn_doc_page .docsidebar li:hover > a, .techwave_fn_doc_page .docsidebar .current > a{ background-color: var(--techwave-some-a-bg-color); } .techwave_fn_doc_page .docsidebar a{ font-weight: 400; border-radius: 5px; font-family: var(--techwave-heading-font-family); color: var(--techwave-heading-color); text-decoration: none; min-height: 36px; padding: 5px 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; position: relative; } /*------------------------------------------------------------------*/ /* 48) Page: Image Generation /*------------------------------------------------------------------*/ .techwave_fn_image_generation_page .generation__page{ position: relative; z-index: 2; } .techwave_fn_image_generation_page .generation_more{ padding: 60px 40px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; } .techwave_fn_image_generation_page .generation_more .techwave_fn_button{ padding: 0 57px; } .techwave_fn_image_generation_page .generation_header{ padding: 40px; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_image_generation_page .generation_header .title{ margin: 0; padding: 0; font-size: 22px; font-weight: 600; } .techwave_fn_image_generation_page .generation_header .header_top{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; column-gap: 20px; -ms-align-items: center; align-items: center; margin-bottom: 25px; } .techwave_fn_image_generation_page .generation_header .setup{ -ms-align-items: center; align-items: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 15px; } .techwave_fn_image_generation_page .generation_header .info{ margin: 0; padding: 0; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_image_generation_page .sidebar__trigger{ min-width: 50px; width: 50px; height: 50px; text-decoration: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; background-color: var(--techwave-some-a-bg-color); border-radius: 100%; color: var(--techwave-heading-color); position: relative; } .techwave_fn_image_generation_page .sidebar__trigger .fn__svg{ width: 24px; height: 24px; transition: all .3s ease; } .techwave_fn_image_generation_page .header_bottom textarea{ border: 2px solid var(--techwave-border-color); background-color: transparent; border-radius: 5px; outline: none; display: block; width: 100%; padding: 18px 20px 16px; font-size: 16px; font-weight: 400; line-height: 22px; max-height: 170px; font-family: var(--techwave-heading-font-family); resize: none; overflow-y: hidden; color: var(--techwave-heading-color); } .techwave_fn_image_generation_page .header_bottom textarea:focus{ border-color: var(--techwave-main-color); } .techwave_fn_image_generation_page .include_area{ margin-bottom: 10px; position: relative; } .techwave_fn_image_generation_page .exclude_area{ position: relative; overflow: hidden; } .techwave_fn_image_generation_page .generate_section{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: flex-end; } .techwave_fn_image_generation_page .generate_section #generate_it{ margin: 10px 0 10px 20px; } .techwave_fn_image_generation_page .generation__sidebar .sidebar_details{ padding: 20px; } .techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title{ margin: 0; padding: 0; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; } .techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title .fn__tooltip{ margin-left: 8px; } .techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title .fn__svg{ display: block; width: 14px; height: 14px; color: var(--techwave-body-color); } .techwave_fn_image_generation_page .generation__sidebar .sidebar_model{ padding: 30px 20px; border-bottom: 1px solid var(--techwave-border-color); position: relative; z-index: 5; } .techwave_fn_image_generation_page .generation__sidebar .contrast_switcher, .techwave_fn_image_generation_page .generation__sidebar .prompt_magic_switcher{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; } .techwave_fn_image_generation_page .generation__sidebar .number_of_images{ margin-bottom: 29px; } .techwave_fn_image_generation_page .generation__sidebar .number_of_images .title{ margin-bottom: 9px; } .techwave_fn_image_generation_page .generation__sidebar .img_sizes{ margin-bottom: 28px; } .techwave_fn_image_generation_page .generation__sidebar .img_sizes .title{ margin-bottom: 10px; } .techwave_fn_image_generation_page .generation__sidebar .guidance_scale .title{ margin-bottom: 4px; } .techwave_fn_image_generation_page .generation__sidebar .guidance_scale{ margin-bottom: 23px; } .techwave_fn_image_generation_page .generation__sidebar .prompt_magic_switcher{ margin-bottom: 30px; } /*------------------------------------------------------------------*/ /* 49) Icon Options (icon lightbox) /*------------------------------------------------------------------*/ .fn__icon_options{ position: relative; } .fn__icon_options.align_right .fn__icon_popup{ left: auto; right: 0; } .fn__icon_options .fn__icon_popup{ opacity: 0; visibility: hidden; transform: translateY(20px); position: absolute; left: 0; top: 100%; width: 240px; margin: 0; padding: 0; padding-top: 5px; transition: all .3s ease; pointer-events: none; } .fn__icon_options.medium_size .fn__icon_button{ width: 40px; height: 40px; } .fn__icon_options.medium_size .fn__icon_button .fn__svg{ width: 16px; height: 16px; } .fn__icon_options:hover .fn__icon_popup{ opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .fn__icon_options .fn__icon_popup ul{ list-style-type: none; background-color: var(--techwave-some-a-bg-color); border-radius: 5px; margin: 0; padding: 15px 20px; } .fn__icon_options .fn__icon_popup li:last-child{ margin-bottom: 0; } .fn__icon_options .fn__icon_popup li{ margin: 0; margin-bottom: 3px; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .fn__icon_options .fn__icon_popup a{ font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-decoration: none; overflow: hidden; } .fn__icon_options .fn__icon_popup a:hover{ color: var(--techwave-main-color); opacity: .9; } .fn__icon_options .fn__icon_popup .high_priorety a{ color: #f1416c; } /*------------------------------------------------------------------*/ /* 50) Generation Item (used in image generation page) /*------------------------------------------------------------------*/ .fn__generation_item{ padding: 31px 40px 10px; border-bottom: 1px solid var(--techwave-border-color); position: relative; } .fn__generation_item:hover{ z-index: 10; } .fn__generation_item .item_header{ padding: 0 0 20px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; column-gap: 20px; -ms-align-items: center; align-items: center; width: 100%; position: relative; z-index: 1; } .fn__generation_item .item_header .item_options{ width: 100%; width: auto; -webkit-box-pack: end; justify-content: flex-end; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 5px; } .fn__generation_item .item_header .title_holder{ width: 100%; } .fn__generation_item .item_header .prompt_title{ margin: 0; padding: 0; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); align-self: flex-end; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; --chakra-line-clamp: 1; } .fn__generation_item .item_header .negative_prompt_title{ margin: 0; padding: 0; font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: 0; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); align-self: flex-end; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; --chakra-line-clamp: 1; } /*------------------------------------------------------------------*/ /* 51) Generation List (used in image generation page) /*------------------------------------------------------------------*/ .fn__generation_list{ margin: 0; padding: 0; list-style-type: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-left: -20px; } .fn__generation_list .fn__gl_item{ margin: 0; padding: 0; padding-left: 20px; width: 25%; margin-bottom: 20px; } .fn__generation_list .fn__gl__item{ width: 100%; position: relative; } .fn__generation_list .fn__gl__item:before{ content: ""; height: 0px; display: block; padding-bottom: 100%; } .fn__generation_list .abs_item{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .fn__generation_list .abs_item img{ width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .fn__generation_list .fn__gl__item:hover .all_options{ transform: translateY(0); opacity: 1; visibility: visible; pointer-events: all; } .fn__generation_list .all_options{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; position: absolute; bottom: 5px; left: 10px; right: 10px; flex-wrap: wrap; transform: translateY(20px); opacity: 0; visibility: hidden; pointer-events: none; transition: all .3s ease; } .fn__generation_list .all_options .fn__icon_options{ margin: 0 5px 5px 0; } /*------------------------------------------------------------------*/ /* 52) Input Toggle (custom) /*------------------------------------------------------------------*/ .fn__toggle{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; column-gap: 7px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; font-size: 16px; font-weight: 400; letter-spacing: 0; font-family: var(--techwave-heading-font-family); } .fn__toggle .t_in { position: relative; width: 34px; height: 20px; } .fn__toggle .t_content:before{ right: 0; bottom: 0; top: 0; left: 0; position: absolute; color: var(--techwave-main-color1); content: ''; opacity: .1; border-radius: 20px; box-shadow: 0px 5px 15px; } .fn__toggle .t_content:after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; border: 2px solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; -webkit-mask-composite: source-out; mask-composite: exclude; background-size: 300% 300%; -webkit-animation: animatedgradient 4s ease alternate infinite; animation: animatedgradient 4s ease alternate infinite; } .fn__toggle input { opacity: 0; width: 0; height: 0; } .fn__toggle .t_slider { position: absolute; cursor: pointer; width: 12px; height: 12px; background-color: var(--techwave-main-color); left: 4px; top: 50%; margin-top: -6px; border-radius: 100%; -webkit-transition: .4s; transition: .4s; } .fn__toggle .t_content:after{ background: #454449; } .fn__toggle .t_slider{ background-color: #454449; } .fn__toggle input:checked + .t_slider { -webkit-transform: translateX(14px); -ms-transform: translateX(14px); transform: translateX(14px); background-color: var(--techwave-main-color); } .fn__toggle input:checked ~ .t_content:after{ background: -moz-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; background: -webkit-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; background: linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; } .fn__toggle .t_in{ border-radius: 34px; } .fn__toggle .t_in:before { border-radius: 50%; } /*------------------------------------------------------------------*/ /* 53) Select Model (used in image generation page) /*------------------------------------------------------------------*/ .fn__select_model{ position: relative; } .fn__select_model .all_models{ position: absolute; width: 100%; left: 0; top: 100%; right: 0; padding-top: 5px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .3s ease; pointer-events: none; } .fn__select_model.opened .all_models{ opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0); } .fn__select_model .all_models ul{ list-style-type: none; background-color: var(--techwave-some-a-bg-color); border-radius: 5px; margin: 0; padding: 15px 20px; } .fn__select_model .all_models li:last-child{ margin-bottom: 0; } .fn__select_model .all_models li{ margin: 0; margin-bottom: 3px; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .fn__select_model .all_models a.selected{ color: var(--techwave-body-color); } .fn__select_model .all_models a{ font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); text-decoration: none; overflow: hidden; } .fn__select_model .all_models a:hover{ color: var(--techwave-main-color); opacity: .9; } .fn__select_model .model_open{ text-decoration: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; padding-right: 50px; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .fn__select_model .fn__icon_button{ position: absolute; top: 50%; margin-top: -15px; right: 0; } .fn__select_model .user_img{ margin-right: 15px; width: 40px; height: 40px; border-radius: 5px; object-fit: cover; } .fn__select_model .subtitle{ margin: 0; padding: 0; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; color: var(--techwave-body-color); font-family: var(--techwave-heading-font-family); } .fn__select_model .title{ margin: 0; padding: 0; font-weight: 400; letter-spacing: 0px; font-size: 16px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } /*------------------------------------------------------------------*/ /* 54) Input quantity (custom) /*------------------------------------------------------------------*/ .fn__quantity{ width: 120px; height: 40px; position: relative; } .fn__quantity a{ display: block; position: absolute; width: 24px; height: 24px; text-decoration: none; border-radius: 100%; background-color: var(--techwave-border-color); top: 50%; margin-top: -12px; } .fn__quantity a:after{ content: ''; position: absolute; background-color: var(--techwave-heading-color); top: 50%; left: 50%; width: 8px; height: 2px; margin: -1px 0 0 -4px; } .fn__quantity a.increase:before{ content: ''; position: absolute; background-color: var(--techwave-heading-color); top: 50%; left: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; } .fn__quantity .decrease{ left: 8px; } .fn__quantity .increase{ right: 8px; } .fn__quantity input{ width: 100%; max-width: 100%; min-width: 100%; border-radius: 20px; height: 40px; display: block; text-align: center; font-size: 16px; font-weight: 400; padding: 0 34px; border: 2px solid var(--techwave-border-color); color: var(--techwave-heading-color); } .fn__quantity input::-webkit-outer-spin-button, .fn__quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .fn__quantity input[type=number] { -moz-appearance: textfield; } /*------------------------------------------------------------------*/ /* 55) Input Range (custom) /*------------------------------------------------------------------*/ .fn__range{ position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; } .fn__range .range_in{ position: relative; width: 100%; } .fn__range .slider{ width: 0; display: block; position: absolute; left: 0; border-radius: 5px; height: 4px; top: 50%; margin-top: -2px; pointer-events: none; } .fn__range .slider:after{ left: 0; right: 0; top: 0; bottom: 0; position: absolute; content: ''; border-radius: 5px 0 0 5px; background-color: var(--techwave-main-color); } .fn__range .slider:before{ width: 14px; height: 14px; background: var(--techwave-heading-color); cursor: pointer; border-radius: 100%; position: absolute; display: block; right: 0; top: 50%; margin-top: -7px; content: ''; z-index: 2; } .fn__range .value{ flex: auto; width: 40px; text-align: right; padding-left: 10px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); font-size: 16px; } .fn__range input{ -webkit-appearance: none; display: block; width: 100%; margin: 0; height: 4px; border-radius: 5px; outline: none; border: none; background-color: var(--techwave-some-a-bg-color); } .fn__range input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--techwave-heading-color); cursor: pointer; border-radius: 100%; opacity: 0; } .fn__range input::-moz-range-thumb { width: 14px; height: 14px; background: var(--techwave-heading-color); cursor: pointer; border-radius: 100%; z-index: 3; opacity: 0; } /*------------------------------------------------------------------*/ /* 56) Page: Privacy Policy /*------------------------------------------------------------------*/ .techwave_fn_privacy_page .privacypage{ padding: 40px 0; } .techwave_fn_privacy_page .privacypage hr{ margin: 30px 0; } .techwave_fn_privacy_page .privacypage h4{ font-weight: 500; font-size: 22px; } /*------------------------------------------------------------------*/ /* 57) Contact Form /*------------------------------------------------------------------*/ .fn_contact_form .input_list ul{ margin: 0; padding: 0; margin-left: -10px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; list-style-type: none; } .fn_contact_form .input_list input[type="text"], .fn_contact_form .input_list input[type="email"]{ display: block; width: 100%; border-radius: 5px; height: 60px; } .fn_contact_form .input_list input, .fn_contact_form .input_list textarea{ display: block; } .fn_contact_form .input_list li{ margin: 0; padding: 0; width: 100%; padding-left: 10px; margin-bottom: 10px; } .fn_contact_form .input_list li:last-child{ margin-top: 10px; } .fn_contact_form .empty_notice, .fn_contact_form .returnmessage{ padding: 20px; width: 100%; display: none; color: var(--techwave-heading-color); margin-top: 20px; position: relative; pointer-events: none; } .fn_contact_form .empty_notice:after, .fn_contact_form .returnmessage:after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; border: 2px solid transparent; background: -moz-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; background: -webkit-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; background: linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; -webkit-mask-composite: source-out; mask-composite: exclude; background-size: 300% 300%; -webkit-animation: animatedgradient 4s ease alternate infinite; animation: animatedgradient 4s ease alternate infinite; } .fn_contact_form .empty_notice:before, .fn_contact_form .returnmessage:before{ right: 0; bottom: 0; top: 0; left: 0; position: absolute; color: var(--techwave-main-color1); content: ''; opacity: .1; border-radius: 20px; box-shadow: 0px 5px 15px; } /*------------------------------------------------------------------*/ /* 58) Page: Contact /*------------------------------------------------------------------*/ .techwave_fn_contact_page .contactpage{ padding: 40px 0; } .techwave_fn_contact_page .contactpage{ font-size: 18px; line-height: 24px; } /*------------------------------------------------------------------*/ /* 59) Page: Models /*------------------------------------------------------------------*/ .techwave_fn_models_page{ padding: 36px 0 40px 0; } .techwave_fn_models_page .fn__title_holder{ margin-bottom: 28px; } .techwave_fn_models_page .models__filter{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; column-gap: 50px; margin-bottom: 30px; position: relative; z-index: 10; flex-wrap: wrap; } .techwave_fn_models_page .models__filter .filter__left{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .techwave_fn_models_page .models__filter .filter__right{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; column-gap: 5px; margin: 5px 0; } .techwave_fn_models_page .filter__search{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; flex-wrap: wrap; } .techwave_fn_models_page .filter__search input{ margin: 5px 10px 5px 0; } .techwave_fn_models_page .filter__search a{ margin: 5px 0; } .techwave_fn_models_page .models__more{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; margin-top: 40px; margin-bottom: 20px; } .techwave_fn_models .models__results{ position: relative; } .techwave_fn_models .loading .tab__item{ opacity: 0; visibility: hidden; } .techwave_fn_models .loading .fn__preloader{ opacity: 1; visibility: visible; } .tab__item{ display: none; } .tab__item.active{ display: block; } /*------------------------------------------------------------------*/ /* 60) Model Items (used in model page) /*------------------------------------------------------------------*/ .fn__model_items{ margin: 0; padding: 0; list-style-type: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-left: -20px; } .fn__model_item{ margin: 0; padding: 0; width: 20%; padding-left: 20px; margin-bottom: 20px; } .fn__model_item .item{ border: 1px solid var(--techwave-border-color); border-radius: 5px; position: relative; background-color: var(--techwave-some-r-bg-color); min-height: 100%; } .fn__model_item.new .item a{ z-index: 3; } .fn__model_item.new .item{ padding: 30px 15px 27px; text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; justify-content: center; } .fn__model_item.new .item .add{ height: 80px; width: 80px; position: relative; margin-bottom: 29px; } .fn__model_item.new .item .add:after{ width: 2px; height: 80px; position: absolute; content: ''; left: 50%; margin-left: -1px; background-color: var(--techwave-border-color); top: 50%; margin-top: -40px; } .fn__model_item.new .item:hover{ border-color: var(--techwave-main-color); } .fn__model_item.new .item .add:before{ width: 80px; height: 2px; position: absolute; content: ''; top: 50%; left: 50%; margin-left: -40px; margin-top: -1px; background-color: var(--techwave-border-color); } .fn__model_item.new .item .text{ font-weight: 500; font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: .5px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .fn__model_item .item:hover .fn__bookmark{ opacity: 1; visibility: visible; pointer-events: all; } .fn__model_item .img:before{ height: 0; content: ''; padding-bottom: 100%; display: block; } .fn__model_item .img{ position: relative; margin: -1px; margin-bottom: 0; } .fn__model_item .img img{ position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; border-radius: 5px 5px 0 0; } .fn__model_item .item__info{ padding: 18px 15px 14px; } .fn__model_item .item__info .title{ margin: 0; padding: 0; font-size: 16px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); margin-bottom: 5px; } .fn__model_item .item__info .desc{ margin: 0; padding: 0; font-size: 14px; font-weight: 400; color: var(--techwave-body-color); font-family: var(--techwave-body-font-family); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; /* number of lines to show */ line-clamp: 3; -webkit-box-orient: vertical; } .fn__model_item .item__author{ height: 41px; border-top: 1px solid var(--techwave-border-color); padding: 10px 15px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; } .fn__model_item .item__author img{ margin-right: 7px; width: 20px; height: 20px; display: block; border-radius: 100%; object-fit: cover; } .fn__model_item .author_name{ margin: 0; padding: 0; font-size: 14px; font-weight: 400; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } /*------------------------------------------------------------------*/ /* 61) Bookmark button /*------------------------------------------------------------------*/ .fn__bookmark{ background-color: var(--techwave-some-r-bg-color); width: 40px; height: 40px; border-radius: 100%; text-decoration: none; position: absolute; top: 10px; left: 10px; z-index: 3; color: var(--techwave-heading-color); opacity: 0; visibility: hidden; pointer-events: none; } .fn__bookmark.has__bookmark .hasbook{ opacity: 1; } .fn__bookmark.has__bookmark .hasntbook{ opacity: 0; } .fn__bookmark .fn__svg{ width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; } .fn__bookmark .hasbook{ opacity: 0; color: var(--techwave-main-color); } /*------------------------------------------------------------------*/ /* 62) Font Trigger (used in AI chat bot page) /*------------------------------------------------------------------*/ .font__trigger{ width: 11px; height: 60px; position: fixed; right: 300px; margin-right: 14px; top: 50%; margin-top: -30px; z-index: 15; cursor: pointer; } .font__trigger:after{ content: ''; position: absolute; left: -10px; right: -10px; bottom: -10px; top: -10px; } .font__trigger:hover span:after, .font__trigger:hover span:before, .font__trigger:hover span{ background-color: var(--techwave-main-color); } .font__trigger span{ width: 1px; display: block; top: 0; bottom: 0; left: 5px; background-color: var(--techwave-border-color); position: absolute; transition: all .2s ease; } .font__trigger span:after, .font__trigger span:before{ width: 1px; top: 50%; margin-top: -20px; height: 40px; background-color: var(--techwave-border-color); content: ''; position: absolute; transition: all .2s ease; } .font__trigger span:before{ right: 100%; margin-right: 5px; } .font__trigger span:after{ left: 100%; margin-left: 5px; } /*------------------------------------------------------------------*/ /* 63) Font Trigger Lightbox /*------------------------------------------------------------------*/ .techwave_fn_font.opened{ pointer-events: all; opacity: 1; visibility: visible; } .techwave_fn_font{ pointer-events: none; opacity: 0; visibility: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 110; background-color: var(--techwave-site-bg-color); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; overflow-y: auto; padding: 40px; } .techwave_fn_font .font__closer_link{ position: fixed; right: 35px; top: 35px; z-index: 2; } .techwave_fn_font .font__closer{ z-index: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .techwave_fn_font .font__dialog{ width: 500px; max-width: 100%; border-radius: 5px; background-color: var(--techwave-some-r-bg-color); padding: 35px 50px 40px; position: relative; border: 1px solid var(--techwave-border-color); z-index: 3; } .techwave_fn_font .title{ text-align: center; margin: 0; padding: 0; font-weight: 500; font-size: 24px; letter-spacing: 0; margin-bottom: 4px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_font select{ margin-bottom: 30px; } .techwave_fn_font label{ display: block; font-size: 16px; font-weight: 400; line-height: 40px; color: var(--techwave-heading-color); font-family: var(--techwave-heading-font-family); } .techwave_fn_font .techwave_fn_button{ width: 100%; } /*------------------------------------------------------------------*/ /* 64) Tooltipster custom theme named: tooltipster-techwave (it can be changed in init.js) /*------------------------------------------------------------------*/ .tooltipster-sidetip.tooltipster-techwave .tooltipster-box{ border: 1px solid var(--techwave-border-color); background: var(--techwave-some-r-bg-color); } .tooltipster-sidetip.tooltipster-techwave .tooltipster-content{ color: var(--techwave-heading-color); font-size: 14px; } .tooltipster-sidetip.tooltipster-techwave .tooltipster-arrow-uncropped{ display: none; } .tooltipster-sidetip.tooltipster-techwave.tooltipster-bottom .tooltipster-arrow:after{ content: ''; position: absolute; top: 5px; left: 3px; width: 14px; height: 14px; transform: rotate(45deg); border: 1px solid var(--techwave-border-color); background-color: var(--techwave-some-r-bg-color); } .tooltipster-sidetip.tooltipster-techwave.tooltipster-bottom .tooltipster-arrow{ background-color: transparent; top: -1px; } .tooltipster-sidetip.tooltipster-techwave.tooltipster-right .tooltipster-arrow{ left: -1px; background-color: transparent; } .tooltipster-sidetip.tooltipster-techwave.tooltipster-right .tooltipster-arrow:after{ content: ''; position: absolute; top: 3px; left: 5px; width: 14px; height: 14px; transform: rotate(45deg); border: 1px solid var(--techwave-border-color); background-color: var(--techwave-some-r-bg-color); } .tooltipster-sidetip.tooltipster-techwave.tooltipster-left .tooltipster-arrow{ right: -1px; background-color: transparent; } .tooltipster-sidetip.tooltipster-techwave.tooltipster-left .tooltipster-arrow:after{ content: ''; position: absolute; top: 3px; right: 5px; width: 14px; height: 14px; transform: rotate(45deg); border: 1px solid var(--techwave-border-color); background-color: var(--techwave-some-r-bg-color); } /*------------------------------------------------------------------*/ /* 65) Page: Intro /*------------------------------------------------------------------*/ .techwave_fn_intro{ padding: 150px 20px 100px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; } .techwave_fn_intro .first{ text-align: center; margin-bottom: 54px; } .techwave_fn_intro .txt{ opacity: 0; position: absolute; pointer-events: none; } .techwave_fn_intro .mac{ margin: 0 -20px; margin-bottom: 86px; } .techwave_fn_intro .mac img{ width: 100%; height: 100%; object-fit: cover; } .techwave_fn_intro .livechat{ padding: 24px; position: relative; border: 2px dashed #252525; border-radius: 30px; width: 825px; max-width: 100%; margin: 0 auto; margin-top: 41px; margin-bottom: 133px; } .techwave_fn_intro .livechat .chat__comment{ margin-top: 20px; } .techwave_fn_intro .livechat .chat_decor{ position: absolute; right: 47px; z-index: 5; top: 100%; margin-top: -25px; } .techwave_fn_intro .or{ padding-top: 87px; padding-bottom: 55px; text-align: center; } .techwave_fn_intro .or h1{ font-size: 150px; font-size: calc(50px + 5.211vw); font-weight: 700; text-transform: uppercase; font-family: sans-serif; } .techwave_fn_intro .or h1 span{ color: var(--techwave-site-bg-color); -webkit-text-stroke: 1px var(--techwave-main-color); text-stroke: 1px var(--techwave-main-color); letter-spacing: -6px; } .fn__center_title{ text-align: center; max-width: 700px; } .fn__center_title h3.big{ font-size: 60px; margin-top: -6px; margin-bottom: 18px; } .fn__center_title p{ margin: 0; } .fn__center_title h3{ font-size: 32px; line-height: 1.2; margin: 0; font-weight: 300; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0px 0px 15px rgba(124,95,227,.35); } .fn__center_title .lines{ position: relative; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; height: 18px; margin-bottom: 34px; -ms-align-items: center; align-items: center; justify-content: center; } .fn__center_title .lines span{ position: relative; } .fn__center_title .lines .r, .fn__center_title .lines .l{ width: 100px; height: 2px; display: block; background-color: var(--techwave-main-color); } .fn__center_title .lines span:after{ right: 0; bottom: 0; top: 0; left: 0; position: absolute; color: var(--techwave-main-color1); content: ''; opacity: .35; box-shadow: 0px 0px 10px; } .fn__center_title .lines .c:after{ border-radius: 6px; left: -2px; right: -2px; top: -2px; bottom: -2px; } .fn__center_title .lines .c{ width: 120px; height: 18px; display: block; border: 2px solid var(--techwave-main-color); margin: 0 10px; border-radius: 6px; } .txt_unlim{ width: 100%; overflow: hidden; } .marquee{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .TickerNews{ width: 100%; overflow: hidden; } .TickerNews .js-marquee-wrapper{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: nowrap; } .TickerNews .ti_wrapper{ width: 100%; position: relative; overflow: hidden; } .TickerNews .ti_slide{ position: relative; left: 0; top: 0; } .TickerNews .marquee{ overflow: hidden; } .TickerNews .ti_content{ position: relative; float:left; } .TickerNews .js-marquee{ float: left; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: nowrap; } .TickerNews .item{ float: left; position: relative; white-space: nowrap; color: var(--techwave-site-bg-color); -webkit-text-stroke: 1px var(--techwave-main-color); text-stroke: 1px var(--techwave-main-color); letter-spacing: -6px; font-size: 150px; font-size: calc(50px + 5.211vw); font-weight: 900; font-family: sans-serif; text-transform: uppercase; } .techwave_fn_intro .templates{ width: 1650px; max-width: 100% } .techwave_fn_intro .templates ul{ margin: 0; list-style-type: none; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-wrap: wrap; margin-left: -50px; } .techwave_fn_intro .templates li{ margin: 0; padding: 0; padding-left: 50px; margin-bottom: 50px; width: 50%; } .techwave_fn_intro .templates .top{ display: block; width: 100%; text-decoration: none; border: 1px solid var(--techwave-border-color); border-radius: 5px; transition: all .4s ease; position: relative; } .techwave_fn_intro .templates .top:after{ content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 20px; transform: translateY(-20px); transition: all .4s ease; } .techwave_fn_intro .templates .top img{ display: block; border-radius: 4px; } .techwave_fn_intro .templates .top:hover:after{ transform: translateY(0px); } .techwave_fn_intro .templates .top:hover{ transform: translateY(-20px); } .techwave_fn_intro .templates div div{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; padding-top: 30px; } .techwave_fn_intro .templates .techwave_fn_button{ padding: 0 52px; } #img_gen{ padding-top: 48px; margin-bottom: 91px; } #demos{ padding-top: 100px; margin-bottom: 73px; } /*------------------------------------------------------------------*/ /* 66) Media Queries (Responsive) /*------------------------------------------------------------------*/ @media(max-width: 1400px){ .fn__model_item{width: 25%;} } @media(max-width: 1367px){ .techwave_fn_interactive_list li{width: 100%;max-width: 100%;} } @media(max-width: 1200px){ .fn__model_item{width: 33.3333%;} } @media(max-width: 1040px){ .techwave_fn_pricing .pricing__content{display: none;} .fn__mobile_pricing{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .font__trigger{ right: 0px; } .techwave_fn_accordion .acc__title{ font-size: 18px; } .techwave_fn_sign, .techwave_fn_sign .form__content, .techwave_fn_interactive_list.modern a, .techwave_fn_changelog .item__header, .techwave_fn_changelog .item__content, .techwave_fn_accordion .acc__header, .techwave_fn_accordion .acc__content{ padding-left: 20px; padding-right: 20px; } .techwave_fn_pricing .pricing__footer .item_col, .techwave_fn_pricing .pricing__heading .item, .techwave_fn_pricing .pricing__fields .item_col, .techwave_fn_pricing .pricing__header .item_col{ padding-left: 20px; padding-right: 20px; } .techwave_fn_image_generation_page .generation_header, .fn__generation_item{padding-left: 20px;padding-right: 20px;} .techwave_fn_image_generation_page .sidebar__trigger{display: none;} .techwave_fn_aichatbot_page, .techwave_fn_doc_page, .techwave_fn_image_generation_page{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; -o-flex-direction: column-reverse; flex-direction: column-reverse; min-height: inherit; } .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_content{ margin-right: 0; } .techwave_fn_wrapper.fn__has_sidebar .techwave_fn_doc_page .docsidebar, .techwave_fn_aichatbot_page .chat__sidebar, .techwave_fn_image_generation_page .generation__sidebar{ position: relative; width: 100%; height: auto; left: auto; right: auto; top: auto; min-width: 100%; border-left: none; border-bottom: 1px solid var(--techwave-border-color); } .techwave_fn_searchbar{ left: 0; padding: 0 20px; } .techwave_fn_searchbar .search__icon{ left: 20px; } .techwave_fn_searchbar .search__closer{ right: 20px; } .techwave_fn_searchbar .search__input{ padding-left: 25px; padding-right: 30px; } .techwave_fn_img_lightbox .lightbox__tlimg{ padding-left: 20px; padding-right: 20px; } .techwave_fn_img_lightbox .lightbox__related{ padding-left: 20px; padding-right: 20px; } .fn__grid_items li{width: 25%;} .fn__gallery_item{ width: 33.3333%; } .techwave_fn_header{ padding: 0 20px 0 60px; } .techwave_fn_leftpanel .mobile_closer{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .techwave_fn_leftpanel .desktop_closer{ display: none; } .techwave_fn_leftpanel .mobile_extra_closer{ position: absolute; left: 100%; width: calc(100vw - var(--techwave-left-panel-width)); top: 0; bottom: 0; background-color: var(--techwave-some-r-bg-color); opacity: 0; pointer-events: none; margin-left: 1px; } .section_home{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .section_home .section_left{ width: 100%; border-right: none; border-bottom: 1px solid var(--techwave-border-color); padding: 73px 20px 60px; } .section_home .section_right{ width: 100%; padding: 70px 20px; } .techwave_fn_footer{ padding-left: 20px; padding-right: 20px; } .section_home .company_info{ max-width: 100%; } .techwave_fn_content{ margin-left: 0; } .techwave_fn_header{ left: 0; } .techwave_fn_leftpanel{ transform: translateX(-100%); } .techwave_fn_leftpanel .fn__icon_button{ right: -51px; width: 40px; height: 40px; transform: rotate(180deg); margin-top: -20px; } .mobile-panel-opened .techwave_fn_leftpanel .fn__icon_button{ transform: rotate(0); } .mobile-panel-opened .techwave_fn_leftpanel .mobile_extra_closer{ opacity: 0.9; pointer-events: all; } .mobile-panel-opened .techwave_fn_header, .mobile-panel-opened .techwave_fn_content{ transform: translateX(300px); } .mobile-panel-opened .techwave_fn_leftpanel{ transform: translateX(0); } } @media(max-width: 900px){ .techwave_fn_pricing .item_row .item_col{ width: 25% !important; max-width: 25% !important; } .techwave_fn_pricing .pricing__header .price span{ font-size: 20px; } .techwave_fn_pricing .pricing__footer .item_col, .techwave_fn_pricing .pricing__heading .item, .techwave_fn_pricing .pricing__fields .item_col, .techwave_fn_pricing .pricing__header .item_col{ padding-left: 10px; padding-right: 10px; } .techwave_fn_img_lightbox .lightbox__top{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .techwave_fn_img_lightbox .lightbox__tl{ width: 100%; } .techwave_fn_img_lightbox .lightbox__tr{ width: 100%; border-left: none; border-top: 1px solid var(--techwave-border-color); } } @media(max-width: 768px){ .fn__mobile_pricing .pricing__item{ width: 100%; } .fn__generation_list .fn__gl_item{width: 50%;} .fn__model_item{width: 50%;} .fn__gallery_items .item__info{ opacity: 1; visibility: visible; transform: translateY(0); } .techwave_fn_footer_content{ flex-wrap: wrap; } .fn__grid_items li{ width: 50%; } .fn__gallery_item{ width: 50%; } .techwave_fn_header .header__left{ display: none; } .techwave_fn_header{ justify-content: flex-end; } } @media(max-width: 480px){ .techwave_fn_sign, .techwave_fn_sign .form__content, .techwave_fn_changelog .item__header, .techwave_fn_changelog .item__content, .techwave_fn_accordion .acc__header, .techwave_fn_accordion .acc__content{ padding-left: 10px; padding-right: 10px; } .fn__generation_list .fn__gl_item{width: 100%;} .techwave_fn_image_generation_page .generation_header, .fn__generation_item{ padding-left: 10px; padding-right: 10px; } .fn__model_item{width: 100%;} .fn__grid_items ul{ margin-left: -10px; } .fn__grid_items li{ padding-left: 10px; margin-bottom: 10px; } .fn__nav_bar .user_opener{ width: 50px; height: 50px; } .fn__details_list li{ width: 100%; } .fn__gallery_item{ width: 100%; } .techwave_fn_header{ padding-right: 10px; } .fn__nav_bar .item_opener .dark_mode{ margin: -9px 0 0 -9px; } .fn__nav_bar .bar__item{ margin-right: 5px; } .fn__nav_bar .bar__item_user{ margin-left: 5px; } .fn__nav_bar .item_opener{ width: 40px; height: 40px; } .fn__nav_bar .item_opener .fn__svg{ width: 18px; height: 18px; } }