diff --git "a/desine/css/style.css" "b/desine/css/style.css" new file mode 100644--- /dev/null +++ "b/desine/css/style.css" @@ -0,0 +1,7206 @@ +@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; + } +} \ No newline at end of file