@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{
/* DS Auto Insights Brand Colors */
--btn-color: #ffffff;/* button color*/
--btn-bg: #2563eb;/* button bg color - data blue */
--primary-text-color: #1e293b;/* dark slate for text */
--accent-color: #0ea5e9;/* sky blue for accents */
--success-color: #10b981;/* emerald for success states */
--chart-color: #8b5cf6;/* purple for data visualization */
--secondary-bg: #f8fafc;/* light background */
}
html {
scroll-behavior: smooth;
font-family: "Roboto", sans-serif;
}
header{
background-color: #fff;
color: #000;
}
header > .collapsible-header{
display: flex;
gap: 1rem;
width: 100%;
background-color: inherit;
place-content: center;
overflow: hidden;
transition: width 0.3s ease;
}
.animated-collapse{
transition: width 0.3s ease;
}
.header-links {
display: flex;
align-items: center;
min-width: fit-content;
border-radius: 10px;
padding: 5px 10px;
transition: background-color 0.5s, color 0.5s;
}
.header-links:hover {
color: var(--accent-color);
transform: translateY(-1px);
}
/* Data Visualization Specific Styles */
.data-card {
background: linear-gradient(135deg, var(--secondary-bg) 0%, #ffffff 100%);
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.data-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15);
}
.chart-icon {
color: var(--chart-color);
font-size: 2.5rem;
}
.metric-highlight {
background: linear-gradient(90deg, var(--accent-color), var(--chart-color));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.primary-text-color{
color: var(--primary-text-color);
}
.opacity-0{
opacity: 0 !important;
}
.opacity-100{
opacity: 100 !important;
}
.btn{
padding: 10px 15px;
width: max-content;
border-radius: 10px;
color: var(--btn-color);
background-color: var(--btn-bg);
justify-content: center;
align-items: center;
display: flex;
cursor: pointer;
}
.btn:hover{
background-color: var(--accent-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.btn:disabled{
cursor: default;
}
.input{
padding: 10px;
background-color: transparent;
border-radius: 10px;
/* outline: none; */
min-width: 100px;
border: 2px solid #818080;
transition: border 0.3s;
}
.input:active, .input:focus, .input:focus-within{
/* border-bottom: 2px solid #0e0a92 !important; */
border: 2px solid #0c0c0c;
}
.input-error{
border-bottom: 3px solid #ff1e1e;
}
.input-error:focus-within{
border-bottom: 3px solid #fd0101;
}
/* Navigation dots styling */
.dots-container {
text-align: center;
margin-top: 20px;
}
.footer-link{
color: #0d0d0d;
transition: color 0.3s;
}
.footer-link:hover{
color: #483cf4;
}
.review-container {
position: relative;
max-width: 600px;
margin: auto;
}
.review-card{
box-shadow: 0px 2px 4px #757474a0;
border-radius: 15px;
/* width: 200px; */
/* height: 550px; */
padding: 10px;
}
/* --------- collapsible div ---------- */
.collapsible {
background-color: #f3f0f0;
color: #2b2929;
/* cursor: pointer; */
padding: 5px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 16px;
transition: 0.4s;
}
/* Style for the collapsible content */
.content {
padding: 0 18px;
/* display: none; */
height: 0px;
overflow: hidden;
background-color: transparent;
transition: height 0.5s;
text-align: justify;
margin-top: 10px;
}
.collapsible .active,
.collapsible:hover {
background-color: var(--secondary-bg);
border-left: 4px solid var(--accent-color);
}
@media not all and (min-width: 1024px) {
header .collapsible-header {
position: fixed;
right: 0px;
flex-direction: column;
opacity: 0;
height: 100vh;
min-height: 100vh;
height: 100dvh;
width: 0vw;
justify-content: space-between;
padding: 5px;
padding-top: 5%;
padding-bottom: 5%;
place-items: end;
background-color: #ffffff;
color: #000000;
overflow-y: auto;
box-shadow: 2px 0px 3px #000;
}
.header-links{
color: black;
}
}
/* Animation styles for DS Auto Insights */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-in-out;
}
.feature-card, .data-card {
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.animate-number {
font-weight: bold;
color: var(--accent-color);
}
/* Loading animation for data processing */
.data-loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
