v6
This commit is contained in:
@@ -55,6 +55,13 @@
|
||||
--widget-shadow: 0 4px 20px rgba(90, 82, 82, 0.1);
|
||||
}
|
||||
|
||||
/* Cookiebot Banner - Force to bottom of screen */
|
||||
#CybotCookiebotDialog {
|
||||
top: auto !important;
|
||||
bottom: 0 !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -655,7 +662,7 @@ body {
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 100px;
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@@ -1744,11 +1751,65 @@ body {
|
||||
.demo-widgets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 30px;
|
||||
padding: 0 20px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.demo-widget {
|
||||
padding: 30px;
|
||||
padding: 25px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.demo-section-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.demo-section-subtitle {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.ki-demo-section {
|
||||
padding: 20px 0 40px 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.demo-icon-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.demo-icon-circle img {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.sound-visualization {
|
||||
margin-top: 40px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.demo-widgets-grid {
|
||||
padding: 0 10px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.demo-widget {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.demo-section-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.pricing-box {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.pricing-value {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -160,8 +160,8 @@
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
min-width: 40px;
|
||||
width: 40px;
|
||||
height: 120px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(15px);
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
@@ -2376,16 +2376,76 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
/* Non-16:9 wide screens and landscape tablets (1024-1366px) */
|
||||
@media (max-width: 1366px) and (min-width: 1025px) {
|
||||
.hero-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 60px;
|
||||
text-align: center;
|
||||
max-width: 1100px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
height: 400px;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: clamp(2rem, 3.5vw, 3rem);
|
||||
}
|
||||
|
||||
.hero-subline,
|
||||
.hero-proof {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.node {
|
||||
min-width: 80px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.central-node {
|
||||
min-width: 130px;
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4:3 and portrait-ish aspect ratio handling */
|
||||
@media (max-aspect-ratio: 4/3) and (min-width: 769px) {
|
||||
.hero-section {
|
||||
min-height: auto;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
height: 380px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-left {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero-right {
|
||||
height: 380px;
|
||||
order: -1;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.system-graphic {
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.system-details {
|
||||
@@ -2475,9 +2535,11 @@
|
||||
|
||||
/* Hero right (system graphic) comes AFTER hero left (text) on mobile */
|
||||
.hero-right {
|
||||
height: 320px;
|
||||
height: 350px;
|
||||
margin-top: 10px;
|
||||
order: 1;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-left {
|
||||
@@ -2485,14 +2547,15 @@
|
||||
}
|
||||
|
||||
.system-graphic {
|
||||
transform: scale(0.85);
|
||||
width: 120%;
|
||||
margin-left: -10%;
|
||||
transform: scale(0.75);
|
||||
transform-origin: center center;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.central-node {
|
||||
min-width: 120px;
|
||||
max-width: 140px;
|
||||
min-width: 110px;
|
||||
max-width: 130px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
@@ -2506,49 +2569,56 @@
|
||||
}
|
||||
|
||||
.node {
|
||||
min-width: 85px;
|
||||
padding: 10px;
|
||||
min-width: 70px;
|
||||
padding: 8px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.node .node-icon img {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Compact circular layout for mobile */
|
||||
/* Compact circular layout for mobile - adjusted spacing */
|
||||
.phone-node {
|
||||
top: 5%;
|
||||
top: 2%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.chat-node {
|
||||
top: 25%;
|
||||
right: 5%;
|
||||
top: 20%;
|
||||
right: 2%;
|
||||
left: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.crm-node {
|
||||
bottom: 25%;
|
||||
right: 5%;
|
||||
bottom: 20%;
|
||||
right: 2%;
|
||||
top: auto;
|
||||
left: auto;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.ticket-node {
|
||||
bottom: 5%;
|
||||
bottom: 2%;
|
||||
left: 50%;
|
||||
top: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.team-node {
|
||||
top: 25%;
|
||||
left: 5%;
|
||||
top: 20%;
|
||||
left: 2%;
|
||||
right: auto;
|
||||
transform: none;
|
||||
}
|
||||
@@ -2557,11 +2627,11 @@
|
||||
/* Extra small screens */
|
||||
@media (max-width: 480px) {
|
||||
.hero-section {
|
||||
padding: 80px 12px 25px;
|
||||
padding: 80px 10px 20px;
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.hero-subline,
|
||||
@@ -2572,35 +2642,50 @@
|
||||
|
||||
.hero-right {
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.system-graphic {
|
||||
transform: scale(0.8);
|
||||
width: 130%;
|
||||
margin-left: -15%;
|
||||
transform: scale(0.65);
|
||||
transform-origin: center center;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.central-node {
|
||||
min-width: 110px;
|
||||
max-width: 130px;
|
||||
padding: 7px 12px;
|
||||
min-width: 100px;
|
||||
max-width: 120px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.node {
|
||||
min-width: 75px;
|
||||
padding: 8px;
|
||||
min-width: 65px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.node .node-icon img {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
.node-icon {
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
padding: 10px 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-metric {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user