/*--------------------------------------------------------------
# Local Fonts
--------------------------------------------------------------*/
/* DM Serif Display */
@font-face {
font-family: 'DM Serif Display';
src: url('../fonts/DM_Serif_Display/DMSerifDisplay-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Serif Display';
src: url('../fonts/DM_Serif_Display/DMSerifDisplay-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Public Sans (replaces General Sans) */
@font-face {
font-family: 'Public Sans';
src: url('../fonts/Public_Sans/PublicSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('../fonts/Public_Sans/PublicSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('../fonts/Public_Sans/PublicSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('../fonts/Public_Sans/PublicSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
/* Manrope */
@font-face {
font-family: 'Manrope';
src: url('../fonts/Manrope/Manrope-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../fonts/Manrope/Manrope-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../fonts/Manrope/Manrope-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../fonts/Manrope/Manrope-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Manrope';
src: url('../fonts/Manrope/Manrope-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* JetBrains Mono */
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrains_Mono/JetBrainsMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrains_Mono/JetBrainsMono-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrains_Mono/JetBrainsMono-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrains_Mono/JetBrainsMono-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrains_Mono/JetBrainsMono-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@font-face {
font-family: 'Jost-Light';
src: url('../fonts/Jost-Light.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jost-Regular';
src: url('../fonts/Jost-Regular.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jost-Medium';
src: url('../fonts/Jost-Medium.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jost-Bold';
src: url('../fonts/Jost-Bold.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Jost-SemiBold';
src: url('../fonts/Jost-SemiBold.ttf') format('truetype');
font-style: normal;
font-display: swap;
}
* {
list-style: none;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Jost-Regular', sans-serif;
height: 100%;
margin: 0;
background-color: #F0F5F7;
color: rgb(255, 255, 255);
}
body.bg-timer {
background-color: #0d141d
}
button,
a,
input,
textarea {
box-shadow: none !important;
outline: none !important;
}
::selection {
background: #a4a4a4;
color: #fff;
}
::placeholder {
color: #a4a4a4 !important;
}
img {
padding: 0;
margin: 0;
line-height: 0px;
}
a {
color: var(--v2-violet);
text-decoration: none;
transition: all 0.3s ease-in 0s;
cursor: pointer;
}
a:hover,
a:focus,
a:active {
/* color: var(--v2-vio-dark); */
text-decoration: none;
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0 0 10px;
letter-spacing: 0;
line-height: normal;
text-transform: none;
color: #fff;
font-family: 'Jost-Medium';
}
h1 {
font-size: 60px;
line-height: 70px;
}
h2 {
font-size: 44px;
line-height: 52px;
}
h3 {
font-size: 22px;
line-height: 30px;
}
h4 {
font-size: 20px;
line-height: 28px;
}
b {
color: #252525;
}
ul {
padding-left: 20px;
}
ol {
list-style: inside !important;
}
li {
display: list-item;
padding: 0;
margin: 0;
border: 0;
list-style: none;
}
ul.list li {
list-style: disc
}
ol li {
list-style: inside !important;
}
select,
input,
button,
a {
outline: none !important;
box-shadow: none !important;
}
select.form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('../images/downArrow.png');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
border-radius: calc(0.75rem - 2px);
border: solid 1px #e2e8f0;
font-size: 14px;
height: 2.5rem !important;
}
label {
line-height: 1;
font-size: .875rem;
margin-bottom: 12px;
font-family: 'Jost-Medium';
color: #020817;
}
/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 575px) {
.how-used-card-img-wrapper img {
border-radius: 10px 10px 0px 0px !important;
}
.how-used-card {
border-radius: 0px 0px 10px 10px !important;
}
}
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0s !important;
}
body.app-theme .time-btn-group .flex .input-group {
flex-wrap: nowrap;
}
}
@media screen and (max-width: 1120px) {
.btn-soft-primary:focus,
.btn-soft-primary:active,
.btn-soft-primary:hover {
color: rgb(25, 103, 210) !important;
background-color: rgb(226, 234, 248) !important;
}
}
main header {
border-bottom: 1px solid #d8e5e9;
}
/* ========================== old */
.card {
border-radius: 10px;
background-color: #ffffff;
border: 1px solid #d8e5e9;
}
.card .card-body {
padding: 20px;
}
.time-btn-group .btn-soft-primary {
border-radius: 20px;
border: 1px solid rgb(25 103 210 / 50%);
}
.btn.btn-muted {
background-color: rgba(91, 60, 245, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
font-size: 14px;
padding: 8px 16px;
color: var(--v2-violet);
font-weight: 500;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.card.section.dashboard {
border-radius: 0px;
border-top: none;
}
/* modal css start */
#shareModal .modal-content,
#contentModal .modal-content,
#timerSettingModal .modal-content,
#renameModal .modal-content,
#addLabelModal .modal-content {
/* background-color: #fff; */
/* background-color: #ded7f8 !important; */
background-color: var(--v2-vio-lo) !important;
}
#renameModal .modal-content #rename-device {
border: none !important;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.57) !important;
}
#shareModal .modal-content #share-url {
border: none !important;
border-top-left-radius: 20px !important;
border-bottom-left-radius: 20px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
color: #202124;
background-color: rgba(91, 60, 245, 0.05);
}
#shareModal .modal-content .input-group-append .btn.btn-muted {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border: none;
}
#shareModal .modal-content .input-group-append .btn.btn-muted:hover {
background: var(--v2-violet) !important;
}
body.app-theme .btn.btn-muted#open-url:hover i {
color:#fff !important;
}
/* modal css over */
.form-control.deviceInput {
border: none !important;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgba(91, 60, 245, 0.05);
color: #fff;
}
.form-control.deviceInput~.input-group-append .btn.btn-muted {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: none;
}
/* controller page css start */
#timer-section {
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
padding-right: 16px;
max-height: 25vh;
}
@media screen and (min-width: 1024px) and (max-width: 1351px) {
#timer-section {
max-height: 18vh;
}
}
@media (min-width: 1540px) {
#timer-section {
max-height: 52vh;
}
}
@media (min-width: 1341px) {
.hero-top {
padding-left:0 !important;
padding-right: 0 !important;
}
}
.timer-default {
color: #ffffff !important;
}
.timer-warning {
color: orange !important;
}
.timer-danger {
color: red !important;
}
.timer-block {
position: relative;
border-radius: 10px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
background: linear-gradient(180deg, rgba(91, 60, 245, 0.1) 0%, rgba(91, 60, 245, 0.05) 100%);
border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
}
.timer-block:last-child::before {
content: '';
display: block;
width: 50%;
height: 100%;
position: absolute;
z-index: -1;
border-top-left-radius: 10px;
inset: 0px;
border-bottom-left-radius: 10px;
}
.timer-block:last-child::after {
content: '';
display: block;
width: 50%;
top: 0px;
right: 0px;
height: 100%;
position: absolute;
z-index: -1;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#timer-section.timers-linked .timer-block.timer-linked::after {
content: '\f126';
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: 50%;
bottom: -24px;
transform: translateX(-50%);
width: 28px;
height: 28px;
border-radius: 999px;
background: #ede9fe;
color: #5b3cf5;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
box-shadow: 0 8px 20px rgba(91, 60, 245, 0.16);
z-index: 2;
}
#timer-section.timers-linked .timer-block.timer-linked::before {
content: '';
position: absolute;
left: 50%;
bottom: -16px;
width: 2px;
height: 20px;
transform: translateX(-50%);
background: rgba(91, 60, 245, 0.35);
z-index: 1;
}
.bg-deep-blue {
background-color: rgb(214 204 251);
border: solid 1px rgb(214 204 251);
}
.timer-block input.timer-minutes,
.timer-block input.timer-seconds {
border-bottom: dashed 1px rgba(255, 255, 255, 0.57) !important;
border: none;
border-radius: 0px;
}
.timer-block.bg-deep-blue span.timerNum,
.timer-block.bg-deep-blue input.timer-minutes,
.timer-block.bg-deep-blue span.colonSign,
.timer-block.bg-deep-blue input.timer-seconds,
.timer-block.bg-deep-blue i.fa-eye-slash,
.timer-block.bg-deep-blue input.timer-name {
color: #4837a4 !important;
}
/* Hide arrows in WebKit-based browsers */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Hide arrows in Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
#message-container .card {
border: 0px;
}
#message-container .card .card-header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#message-container .card .card-footer {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.message-button.show-message-btn,
.message-button.unshow-message-btn {
display: flex;
align-items: center;
justify-content: center;
}
.dot.show-message-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(255, 0, 0);
}
.dot.unshow-message-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(0, 255, 55);
}
.section .dashboard h3 {
position: absolute;
top: 10px;
left: 20px;
margin: 0;
color: white;
}
.message-button {
position: relative;
align-self: center;
}
.message-textarea {
min-height: 120px !important;
max-height: 130px;
overflow-y: auto;
font-size: 14px;
font-weight: 500;
text-underline-position: from-font;
text-decoration-skip-ink: none;
padding: 13px 14px 13px 14px;
border-radius: 10px;
background-color: rgb(240 245 247) !important;
border: 1px solid;
border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
color: #000 !important;
}
p#message {
max-height: 200px;
overflow-y: auto;
line-height: normal;
overflow-x: hidden;
padding-right: 12px;
font-size: 20px;
}
#message::-webkit-scrollbar,
#content-container::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#message::-webkit-scrollbar-thumb,
#content-container::-webkit-scrollbar-thumb {
background-color: var(--v2-violet);
border-radius: 5px;
}
#message::-webkit-scrollbar-track,
#content-container::-webkit-scrollbar-track {
background-color: #0e1f35;
border-radius: 5px;
}
input#minutesInput::placeholder {
font-size: 14px;
}
/* controller page css over */
/* timer page css start */
#timer {
height: calc(100vh - 100px);
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#timer-time {
font-size: clamp(128px, 10vw + 6rem, 272px);
line-height: 17rem;
font-weight: bold;
}
/* timer page css over */
/* flash effect css code start */
.flash {
animation: flashEffect 1s infinite;
}
@keyframes flashEffect {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* flash effect css code over */
/* timer output content container css code start */
#content-container {
width: auto !important;
max-width: 500px;
height: 200px;
max-height: 120px;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(91, 60, 245, 0.05);
color: #fff;
padding: 10px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0px 8px 18px 1px rgba(91, 60, 245, 0.1) inset;
}
/* custom scrollbar css code start */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #D8E5E9;
border-radius: 5px;
}
::-webkit-scrollbar-track {
background-color: #F0F5F7;
border-radius: 5px;
}
/* custom scrollbar css code over */
#content {
color: white;
font-size: 14px;
line-height: 1.5;
margin: 0;
word-wrap: break-word;
}
button.js-edit-device-input {
font-size: 13px;
}
span.verticale-flip-icon svg,
span.horizontal-flip-icon svg,
i.full-screen-icon {
width: 100%;
height: 100%;
}
span.verticale-flip-icon,
span.horizontal-flip-icon {
width: 18px;
height: auto;
display: block;
}
span.horizontal-flip-icon {
rotate: 90deg;
display: block;
}
/* timer output content container css code over */
/* fontstyle css code start */
.boldTextIcon svg {
display: block;
width: 16px;
height: 16px;
color: #202124;
}
.uppercaseIcon svg {
width: 18px;
height: 18px;
display: block;
color: #202124;
}
.fontColorIcon svg {
display: block;
width: 16px;
height: 16px;
color: #202124;
}
.fontColorIcon svg::after {
content: '';
min-width: 100%;
min-height: 100%;
display: block;
border: solid 3px red;
}
/* fontstyle css code over */
/* colorPicker input css code start */
input#colorPicker,
input#headingColorPicker {
background-color: transparent;
border: none !important;
height: 4px;
width: 50%;
padding: 0px;
margin: 0 auto;
border-radius: 0px;
}
/* colorPicker input css code over */
/* focus-flash-blackout btn active state css code start */
.btn.btn-muted.blackout i,
.btn-muted.focusfont i {
font-size: 12px;
}
.btn-soft-primary.blackout,
.btn-soft-primary.focusfont,
.btn-soft-primary.timeflash,
.btn-soft-primary.fontflash {
border: solid 1px transparent !important;
}
.app-theme .blackout.active,
.app-theme .focusfont.active {
color: #dc3545 !important;
border: solid 1px #dc3545 !important;
}
.app-theme .timeflash.active,
.app-theme .fontflash.active {
color: #28a745 !important;
border: solid 1px #28a745 !important;
}
#boldBtn.active .boldTextIcon svg,
#uppercaseBtn.active .uppercaseIcon svg {
color: rgb(25, 103, 210);
}
/* focus-flash-blackout btn active state css code over */
.timerPreviewDivision {
border-radius: 20px !important;
background: linear-gradient(180deg, rgba(91, 60, 245, 0.1) 0%, rgba(91, 60, 245, 0.05) 100%);
border: 0.5px solid rgba(255, 255, 255, 0.018) !important;
border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 100%);
box-shadow: 0px 8px 18px 1px rgba(91, 60, 245, 0.1) inset;
}
.preview-wrapper h6 {
font-family: Jost-Light;
font-size: 12px;
font-weight: 600;
line-height: 12px;
color: var(--v2-violet) !important;
letter-spacing: 1px;
}
/* preview small timer text css start */
.smallTimer {
font-weight: 500;
font-size: 18px;
line-height: 21.78px;
letter-spacing: 0;
display: flex;
align-items: center;
justify-content: center;
}
.smallTimer:before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #6c757d;
display: inline-block;
margin-right: 12px;
}
/* preview small timer text css over */
.timerView {
height: 150px;
}
.timerView h2 {
font-family: 'Jost-SemiBold';
color: #202124 !important;
font-size: 100px;
font-weight: 600;
line-height: 100px;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.contentPreview {
display: block;
}
.contentPreview * {
margin-top: 8px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
max-height: 4.5em;
}
.contentPreview span {
line-height: 21px;
font-size: 14px;
color: #000 !important;
margin-top: 12px;
display: block;
}
.preview-wrapper .new-tab-preview {
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in;
}
.preview-wrapper:hover .new-tab-preview {
visibility: visible;
opacity: 1;
}
.preview-wrapper .preViewTitle {
font-family: 'Jost-Regular';
font-weight: 500;
font-size: 18px;
line-height: 21.78px;
color: var(--v2-violet);
}
.btn-muted.resume-timer i,
.btn-muted.pause-timer i {
background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
background-clip: text;
color: transparent;
}
body.app-theme.blackoutapply {
position: relative;
}
body.app-theme.blackoutapply::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
inset: 0 !important;
z-index: 11111;
pointer-events: none;
background-color: #000;
animation: none;
border-radius: 0;
}
.focusfontapply-overlay {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 1.0);
width: 100%;
height: 100%;
z-index: 11111;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.focusfontapply-overlay .message-content {
font-size: 24px;
padding: 20px;
text-align: center;
pointer-events: auto;
}
.focusfontapply-overlay #message {
pointer-events: all;
padding: 0px 32px;
margin: 0px 40px !important;
line-height: normal;
}
/* bottom textarea fontSize dropdown css start */
.form-select:disabled {
background-color: rgb(240 245 247) !important;
color: #6c757d !important;
cursor: no-drop;
}
select.fontSizeDropdown,
select.chimeDropdown,
select.flashDropdown {
padding: 6px 26px 6px 8px;
appearance: none;
letter-spacing: 0.05rem;
border-radius: 6px;
background: url('data:image/svg+xml;utf8,') no-repeat right 6px center;
background-size: 16px;
border: 1px solid #6c757d;
background-color: var(--v2-vio-lo);
font-size: 13px;
color: #000;
border: 1px solid rgba(255, 255, 255, 0.08);
}
select.fontSizeDropdown:focus,
select.chimeDropdown:focus,
select.flashDropdown:focus {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
select.fontSizeDropdown option,
select.chimeDropdown option,
select.flashDropdown option {
background-color: #fff;
color: #000 !important;
border: 0 !important;
padding: 8px 12px !important;
}
.btn-vol {
font-size: 12px !important;
border-radius: 10px !important;
padding: 6px 12px !important;
}
.btn-vol:disabled {
cursor: no-drop;
}
.settingActionDropdown button.dropdown-toggle {
border-radius: 10px;
font-size: 13px;
padding: 8px 16px;
}
.settingActionDropdown .dropdown-menu .dropdown-item {
font-size: 12px;
padding: 6px 12px;
}
/* bottom textarea fontSize dropdown css over */
/* cst-css start */
button.js-unnamed-btn {
font-size: 28px;
line-height: 33.89px;
color: var(--v2-violet);
}
.btn-share {
font-size: 14px;
font-weight: 500;
line-height: 16.94px;
text-align: left;
color: rgba(250, 250, 250, 1);
padding: 9px 16px;
}
.btn-customize {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
border: 1px;
border: 1px solid;
border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
color: rgba(250, 250, 250, 1);
padding: 9px 16px;
}
.btn-action {
width: 36px;
height: 36px;
border-radius: 20px;
color: #fff;
background: rgba(24, 24, 39, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}
.btn-share:hover,
.btn-customize:hover,
.btn-action:hover {
color: #ffffff;
}
button.btn-action i {
font-size: 14px;
}
button.btn-action i.fa-play,
button.btn-action i.fa-trash-alt,
button.btn-action i.fa-pause {
font-size: 12px;
}
button.btn-action i.fa-play {
color: #fff;
}
/* cst-css over */
/* websocket page css start */
.logo-wrapper h2 {
font-family: 'Jost-Regular';
font-size: 32px;
line-height: 40px;
}
.timer-name-wrapper p#timer-name {
font-family: 'Jost-Regular';
font-weight: 600;
color: var(--v2-violet);
line-height: 20px;
letter-spacing: 1px;
}
/* websocket page css over */
.border-muted {
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* decives card */
ol.devices-list {
list-style-type: none !important;
counter-reset: list-counter;
margin-bottom: 0px;
}
ol.devices-list li.devices-item:first-child {
padding-top: 0px
}
ol.devices-list li.devices-item {
border-bottom: solid 1px rgba(255, 255, 255, 0.08);
padding: 12px 0px;
counter-increment: list-counter;
list-style: none !important
}
ol.devices-list li.devices-item::before {
color: #202124;
content: counter(list-counter) " ";
}
ol.devices-list li.devices-item:last-child::before {
content: "";
}
ol.devices-list li.devices-item:last-child {
border-bottom: none;
list-style: none;
padding-bottom: 0px
}
ol.devices-list li.devices-item a.share-timer-link {
border-bottom: dotted 2px rgba(255, 255, 255, 40%);
}
/* badge css */
.badge-muted {
background-color: var(--v2-vio-lo);
border-radius: 20px;
padding: 8px 12px;
color: #202124;
}
.badge-muted i {
font-size: 4px;
}
.modal-body #extracted-content {
white-space: pre-wrap;
overflow-y: auto;
padding-right: 12px;
max-height: 400px;
color: #202124;
}
#preview-modal-content {
max-height: 400px;
padding-right: 12px;
overflow-y: auto;
color: #202124;
}
/* simple dropdown css */
.dropdown-menu {
background-color: #fff;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
color: #202124 !important;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 8px 0px;
border-radius: 8px;
}
.dropdown-item {
font-size: 14px;
padding: 8px 16px;
}
.dropdown-item:focus,
.dropdown-item:hover {
color: #000 !important;
background-color: var(--v2-vio-lo);
}
.dropdown-item i {
width: 14px;
height: 14px;
margin-right: 16px;
}
/* share link modal css */
button#open-url {
background-color: var(--v2-violet);
}
.new-tab-preview {
font-size: 14px;
padding: 8px 12px;
border-radius: 20px;
background-color: var(--v2-vio-lo);
border: none;
}
.new-tab-preview:hover {
background-color: var(--v2-violet) !important;
}
/* timer screen css */
#progress-container {
min-width: 100%;
width: 100%;
max-width: 600px;
height: 25px;
background: #e5e7eb;
position: relative;
overflow: hidden;
}
#progress-gradient {
width: 100%;
height: 100%;
background: linear-gradient(to left, #22C55D 80%, #F59E0C 80% 93%, #EF4444 93%);
}
#progress-mask {
width: 0%;
height: 100%;
background-color: rgb(216 229 233);
position: absolute;
top: 0;
right: 0;
transition: width 0.5s ease;
}
.progress-indicator {
content: '';
width: 0px;
height: 0px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #fff;
position: absolute;
top: 0px;
right: -8px;
}
.preview-wrapper #progress-container {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* contact list dropdown css */
.dropdown-toggle.contact-action-dropdown::after {
display: none;
}
.contact-action-dropdown~ul li {
list-style: none !important;
}
/* input switch css */
.form-check-input {
background-color: #fff !important;
border-color: #5B3CF5 !important;
}
.form-check-input:focus,
.form-check-input:active {
outline: none !important;
box-shadow: none !important;
}
.form-check-input:checked {
background-color: var(--v2-violet) !important;
border-color: var(--v2-violet) !important;
}
.form-check-input:hover,
.form-check-input:focus,
.form-check-input:active {
background-color: #e3e8e9;
border-color: #e3e8e9;
}
.form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
#accordion .card,
#devicesAccordion .card {
box-shadow: 0px 8px 18px 1px rgba(91, 60, 245, 0.1) inset;
background-color: rgba(91, 60, 245, 0.05);
}
#accordion .card .card-header,
#devicesAccordion .card .card-header {
border-radius: 10px;
}
.timeZoneArea {
font-size: 12px;
}
.timeTitle {
font-size: 14px;
}
/* ================ web-page css code start ================ */
.web-navbar .dropdown-menu {
background-color: var(--v2-vio-lo);
border: none;
}
.web-navbar .dropdown-menu .dropdown-item {
color: #000;
}
.web-navbar .dropdown-menu .dropdown-item:focus,
.web-navbar .dropdown-menu .dropdown-item:hover {
color: #000 !important;
background-color: var(--v2-vio-mid) !important;
}
.web-navbar .dropdown-toggle i {
font-size: 12px;
}
.web-navbar .dropdown-toggle::after {
display: none;
}
a.nav-link {
color: #202124 !important;
}
.heroSection {
position: relative;
z-index: 1;
background: #F0F5F7 !important;
}
.heroSection::before {
content: '';
position: absolute;
z-index: -1;
background-image: url('../images/hero-bg-left.svg');
bottom: 0px;
left: 0px;
background-position: left;
width: 50%;
height: 70%;
background-repeat: no-repeat;
}
.heroSection::after {
content: '';
position: absolute;
z-index: -1;
background-image: url('../images/hero-bg-right.svg');
top: 0px;
right: 0px;
background-position: right;
width: 33%;
height: 100%;
background-repeat: no-repeat;
}
.heroImgWrapper img.img-fluid {
border-radius: 22px;
}
.navbar-light .navbar-toggler {
border: solid 1px #fff;
}
.navbar-light .navbar-toggler-icon {
background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 30 30\'%3e%3cpath stroke=\'%23FFFFFF\' stroke-linecap=\'round\' stroke-miterlimit=\'10\' stroke-width=\'2\' d=\'M4 7h22M4 15h22M4 23h22\'/%3e%3c/svg%3e');
}
.fs-18 {
font-size: 18px !important;
}
/* btn css */
.btn-gradient {
border: none;
border-radius: 5px;
font-weight: 500;
font-size: 16px;
line-height: 19.36px;
letter-spacing: 0;
text-align: center;
color: #fff;
padding: 16px 24px;
background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
transition: background 0.7s ease-in;
}
.btn-gradient:hover {
color: #fff;
background: linear-gradient(90deg, #3E2A7A 0%, #6E0B9B 0.01%, #9A3D6A 100%);
}
.btn-link:hover {
color: #212529 !important;
}
.btn-white {
background-color: #FFFFFF;
border-radius: 5px;
font-weight: 500;
font-size: 18px;
line-height: 21.78px;
letter-spacing: 0;
padding: 20px 35px;
}
.btn-soft-primary {
padding: 8px 20px;
font-size: 14px;
color: var(--v2-violet);
background-color: var(--v2-vio-lo);
line-height: 20px;
border-radius: 8px;
font-weight: 400;
transition: all 0.5s ease;
}
.btn-soft-danger {
padding: 8px 20px;
font-size: 14px;
color: #dc3545;
background-color: #fae4e6;
line-height: 20px;
border-radius: 8px;
font-weight: 400;
transition: all 0.5s ease;
}
.btn-danger {
padding: 8px 20px;
font-size: 14px;
color: #fff;
background-color: #dc3545;
line-height: 20px;
border-radius: 8px;
font-weight: 400;
transition: all 0.5s ease;
}
.btn-danger:hover {
background-color: #d32537;
}
.btn-soft-danger:hover {
background-color: #dc3545;
color: #fff;
}
.btn-primary {
padding: 8px 20px;
font-size: 14px;
color: #ffffff;
background-color: var(--v2-violet);
line-height: 20px;
border-radius: 8px;
font-weight: 400;
}
.btn-lg-primary {
text-align: center;
white-space: nowrap;
color: #fff !important;
background-color: var(--v2-violet);
font-size: 15px;
line-height: 20px;
border-radius: 8px;
font-weight: 400;
padding: 15px 35px 15px 35px;
}
.btn-primary:hover {
color: #fff;
background-color: var(--v2-vio-dark);
}
.btn-primary:focus,
.btn-primary:active,
.btn-lg-primary:hover,
.btn-lg-primary:focus,
.btn-lg-primary:active {
outline: none !important;
box-shadow: none;
}
.btn-soft-primary:hover {
background-color: var(--v2-violet);
color: #fff;
}
.btn-soft-primary:focus,
.btn-soft-primary:active {
outline: none !important;
box-shadow: none !important;
}
.app-theme .btn-soft-primary.focusfont.active,
.app-theme .btn-soft-primary.blackout.active {
color: #dc3545 !important;
background-color: var(--v2-vio-lo) !important;
}
.app-theme .btn-soft-primary.fontflash.active,
.app-theme .btn-soft-primary.timeflash.active {
color: #28a745 !important;
background-color: var(--v2-vio-lo) !important;
}
.btn-light {
background-color: #FFFFFF40;
border-width: 1px;
border-radius: 5px;
border: 1px solid #FFFFFF80;
font-family: 'Jost-Light';
font-weight: 500;
font-size: 16px;
line-height: 19.36px;
text-align: center;
color: #FFFFFF;
padding: 12px 30px;
}
.btn-white span {
background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
background-clip: text;
color: transparent;
}
.btn-white:hover {
background-color: #e5e5e5;
}
.btn-bg-soft {
border-radius: 5px;
font-weight: 500;
font-size: 16px;
line-height: 19.36px;
letter-spacing: 0;
text-align: center;
background: #FFFFFF40;
border: 1px solid #FFFFFF80;
}
/* used in hero section */
.bg-gradient-vertical {
background: linear-gradient(180deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
}
/* used in elements bg-or-btn */
.bg-gradient-horizontal {
background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
}
/* used in icon box bg */
.bg-soft-light {
border-radius: 10px;
background-color: #ECEDF2;
}
/* used in blog img bg */
.bg-top-left-gradient {
width: 277px;
height: 277px;
opacity: 0.2;
border-top-left-radius: 50px;
background: linear-gradient(135deg, #9017DA 0%, rgba(254, 255, 251, 0.65) 100%);
}
.bg-bottom-right-gradient {
width: 277px;
height: 277px;
opacity: 0.2;
border-bottom-right-radius: 50px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, #B34A8D 100%);
}
/* sponsor company img css */
.company-img {
width: 100%;
max-height: 36px;
}
/* section heading title ~ desc css */
.contentWrapper .publish-date {
font-size: 18px;
font-weight: 400;
line-height: 20px;
color: #212529;
}
.heading-title {
font-size: clamp(30px, 5vw + 10px, 48px);
text-align: center;
line-height: 1.2em;
color: #202124;
font-weight: 500;
}
.contentWrapper .cat-text span {
background-color: #fff;
border: solid 1px var(--v2-violet);
border-radius: 20px;
padding: 4px 20px;
color: var(--v2-violet);
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
line-height: 0;
text-decoration: none;
}
.desc-text {
font-weight: 400;
font-size: 18px;
line-height: 26px;
letter-spacing: 0;
color: #212529;
}
div.desc-text h1,
h2,
h3,
h4,
h5,
h6 {
color: #212529;
}
/* blog css */
.blog-icon {
width: 28px;
height: 28px;
}
.imgWrapper {
position: relative;
z-index: 0;
text-align: center;
}
.imgWrapper img {
position: relative;
z-index: 0;
width: 500px;
height: 400px;
max-height: 450px;
object-fit: cover;
object-position: center;
border-radius: 22px;
}
.imgWrapper::before {
content: '';
position: absolute;
width: 277px;
z-index: -1;
height: 277px;
opacity: 0.2;
border-top-left-radius: 50px;
background: linear-gradient(135deg, var(--v2-violet) 0%, #F0F5F7 100%);
left: 16px;
top: -50px;
}
.imgWrapper::after {
content: '';
position: absolute;
width: 277px;
height: 277px;
z-index: -1;
opacity: 0.2;
border-bottom-right-radius: 50px;
background: linear-gradient(135deg, var(--v2-violet) 0%, #F0F5F7 100%);
right: 16px;
bottom: -50px;
}
.contentWrapper .bg-soft-light {
padding: 20px;
margin-bottom: 24px;
display: inline-block;
}
.blog-title {
font-size: 40px;
line-height: 54px;
color: #202124;
}
.blog-link {
font-weight: 500;
font-size: 16px;
line-height: 28px;
color: var(--v2-violet);
letter-spacing: 0;
}
/* review ~ testimonial css */
/* card slider css code start */
/* media-query ==768== */
@media screen and (max-width: 767px) {
.border-md-0 {
border-width: 0px !important;
}
.imgWrapper img {
height: auto;
max-height: 300px;
}
}
@media screen and (max-width: 991px) {
/* navbar */
nav.web-navbar {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 11;
background-color: rgba(91, 60, 245, 0.2);
backdrop-filter: blur(10px);
}
}
@media screen and (max-width: 1199px) {
.how-used-card-img-wrapper img {
height: 235px !important;
}
}
/* card slider css code over */
.testimonial-digit {
letter-spacing: 0;
text-align: center;
color: #202124;
font-size: 50px;
line-height: 1em;
font-weight: 500;
}
.testimonial-pre-title {
font-size: 15px;
line-height: 30px;
color: #696969;
font-weight: 400;
letter-spacing: 0;
text-align: center;
}
.testimonial-divider {
border-color: #DDDDDD;
}
.testimonial-card {
border-radius: 20px;
background-color: #FFFFFF !important;
box-shadow: 0px 5px 15.7px 0px #00000033;
}
.testimonial-card .card-body {
padding: 50px;
}
.testimonial-card .fa-star {
font-size: 16px;
color: var(--v2-violet);
}
.testimonial-desc {
font-size: 16px;
line-height: 26px;
color: #202124 !important;
margin-bottom: 50px;
}
.testimonial-user-profile {
width: 60px;
height: 60px;
}
.testimonial-user-profile img.img-fluid {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-user-title {
font-weight: 500;
font-size: clamp(16px, 4vw + 4px, 18px);
line-height: 26px;
letter-spacing: 0;
color: #111827;
}
.user-divider {
border-color: #D1D5DB;
}
.testimonial-user-pre-title {
font-weight: 500;
font-size: clamp(14px, 2vw + 2px, 14px);
line-height: 22px;
letter-spacing: 0;
color: var(--v2-violet);
}
/* get start section css */
.card.get-start-back-card {
background-color: #F0F5F7 !important;
height: 50%;
border-radius: 10px;
}
.card-body.get-start-card {
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0px 10px 25px 0px #0000001A;
text-align: center;
}
.get-start-icon {
width: 56px;
height: 56px;
}
.get-start-title {
font-weight: 500;
font-size: 24px;
line-height: 29.05px;
letter-spacing: 0;
text-align: center;
color: #0E1133;
}
.get-start-desc {
font-weight: 500;
font-size: 14px;
line-height: 24px;
letter-spacing: 0;
text-align: center;
color: #505056;
}
/* how used section css */
section#usedSection {
background-color: #ECEDF2 !important;
}
.card-body.how-used-card {
padding: 36px 20px;
}
.how-used-card {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #FFF;
}
.how-used-card-img-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.how-used-card-img-wrapper img {
object-fit: cover;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.how-used-card-title {
font-size: 18px;
color: #202124;
font-weight: 500;
margin-bottom: 10px;
padding-bottom: 0px;
}
.how-used-card-desc {
font-weight: 400;
font-size: 14px;
line-height: 24px;
letter-spacing: 0;
color: #111827;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
max-height: 3.2em;
}
.read-more {
font-size: 16px;
line-height: 28px;
color: var(--v2-violet);
}
.read-more i {
line-height: 28px;
}
/* faq section css */
#accordionFAQ .card {
padding: 18px;
background-color: #ECEDF2 !important;
margin-bottom: 12px;
}
#accordionFAQ .faq-card {
background-color: var(--v2-vio-lo) !important;
border-radius: 10px;
}
.faq-title {
font-family: 'Jost-Medium';
font-size: clamp(20px, 2vw + 8px, 20px);
white-space: break-spaces;
line-height: 26px;
letter-spacing: 0;
color: #000000;
text-align: start;
text-decoration: none;
}
.faq-title i,
.faq-title-inactive i {
font-size: 16px;
}
.faq-title-inactive {
font-family: 'Jost-Medium';
font-size: clamp(20px, 2vw + 8px, 20px);
white-space: break-spaces;
line-height: 30px;
letter-spacing: 0;
color: #6B7280;
text-align: start;
text-decoration: none;
}
.faq-desc {
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #111827;
}
.card.faq-card .card-body.faq-desc *:last-child {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
/* cta section css */
section.ctaSection .ctaWrapper {
border-radius: 16px;
background-color: var(--v2-vio-lo);
}
.ctaSection,
.testimonialSection {
position: relative;
}
section.reviewSection {
background-color: #F0F5F7;
}
.testimonialSection::after {
content: '';
width: 100%;
height: 50%;
position: absolute;
left: 0;
right: 0;
top: 0px;
z-index: -1;
background-color: #F0F5F7;
}
.cta-pre-title {
font-weight: 400;
font-size: 16px;
line-height: 28px;
letter-spacing: 0;
text-align: center;
color: #202124 !important;
}
ul.cta-detail-list li span {
color: #202124 !important;
}
ul.cta-detail-list li i.fa-check-circle:before {
color: var(--v2-violet);
}
.cta-detail-list {
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #FFFFFF;
}
/* footer css */
footer .footer-title {
font-weight: 500;
line-height: 1.4em;
margin-bottom: 30px;
padding-bottom: 0px;
font-size: 18px;
letter-spacing: 0;
color: #2F2D51;
}
footer .footer-link {
font-weight: 400;
font-size: 14px;
line-height: 16.94px;
letter-spacing: 0;
color: #696969;
}
footer p.footer-link {
line-height: 24px;
}
footer .footer-copyright-text {
font-family: Poppins;
font-weight: 400;
font-size: 14px;
line-height: 21px;
letter-spacing: 0;
text-align: center;
color: #FFFFFF;
}
/* ================ web-page css code over ================ */
/* ======= profile page css code start ===== */
/* upload img */
.upload-container {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
border: solid 1px rgba(255, 255, 255, 0.08) !important;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: rgb(226 234 248) !important;
}
.profilePicture i.imgIcon {
font-size: 30px;
color: #82a3ad;
font-weight: 500;
position: absolute;
z-index: 1;
}
.profilePicture::after {
content: "\f303";
font-weight: 600;
font-family: "Font Awesome 5 Free";
bottom: 0px;
right: 0px;
z-index: 1;
color: white;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 14px;
background-color: var(--v2-violet);
display: flex;
align-items: center;
justify-content: center;
}
.upload-container input[type="file"] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 11;
cursor: pointer;
}
.upload-icon {
color: var(--v2-violet);
font-size: 24px;
position: absolute;
}
.uploaded-image {
z-index: 1;
min-width: 100%;
min-height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* upload img */
form.profileForm input.form-control,
form.profileForm select.form-select,
form.billingForm input.form-control,
form.billingForm select.form-select,
form.createBlogForm input.form-control,
form.createBlogForm select.form-select,
form.editBlogForm input.form-control,
form.editBlogForm select.form-select {
font-size: 14px;
font-weight: 500;
padding: 12px 16px;
border-radius: 10px;
background-color: rgb(240 245 247) !important;
border: 1px solid;
border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
color: #202124 !important;
}
form.profileForm .btn-submit,
form.billingForm .btn-submit {
background: linear-gradient(90deg, #513DA1 0%, #880AEB 0.01%, #B34B8A 100%);
border: none;
border-radius: 10px;
font-size: 14px;
padding: 11px 16px;
color: rgba(250, 250, 250, 1);
font-weight: 500;
line-height: 16.94px;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
/* table container */
.tbl-container {
max-height: 300px;
overflow-y: auto;
}
.tbl-container::-webkit-scrollbar-corner {
background: transparent;
}
/* table css */
.table-responsive table.invoice-tbl,
.table-responsive table.tbl-blog {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
/* table THEAD css */
.table-responsive table.invoice-tbl thead,
.table-responsive table.tbl-blog thead,
.table-responsive table.data-tbl thead {
background-color: #F0F5F7;
border-top-left-radius: 20px;
position: sticky;
white-space: nowrap;
top: 0;
z-index: 1;
}
/* table THEAD-TH-TBODY-TR-TD-TFOOT css */
.table-responsive table.invoice-tbl tbody,
td,
tfoot,
th,
thead,
tr,
.table-responsive table.tbl-blog tbody,
td,
tfoot,
th,
thead,
tr,
.table-responsive table.data-tbl tbody,
td,
tfoot,
th,
thead,
tr {
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* table TH css */
.table-responsive table.invoice-tbl thead tr th,
.table-responsive table.tbl-blog thead tr th,
.table-responsive table.data-tbl thead tr th {
font-family: 'Jost-Medium';
font-weight: normal;
font-size: 15px;
padding: 12px;
color: #202124 !important;
}
/* table TD css */
.table-responsive table.invoice-tbl tbody tr td,
.table-responsive table.tbl-blog tbody tr td,
.table-responsive table.data-tbl tbody tr td {
font-size: 14px;
vertical-align: middle;
color: #202124 !important;
white-space: nowrap;
padding: 12px;
border: 1px solid #ebecf1 !important;
}
/* btn in table css */
.table-responsive table tbody tr td .btn-sm {
padding: 8px;
min-width: 31px;
border-radius: 8px !important;
}
.table-responsive table tbody tr td .btn-sm i {
font-size: 0.75rem;
}
.table-responsive table.invoice-tbl tbody tr td button.btn-invoice {
font-size: 12px;
}
/* badge in table css */
.table-responsive table.invoice-tbl .badge,
.table-responsive table.tbl-blog .badge,
.table-responsive table.data-tbl .badge {
font-size: 12px;
font-weight: normal;
border-radius: 8px;
padding: 6px 12px;
}
.table-responsive table.data-tbl thead tr th:first-child,
.table-responsive table.data-tbl tbody tr td:first-child {
text-align: left;
}
.table-responsive table.data-tbl tbody tr td:last-child {
text-align: center;
}
/* admin-blog data-table header "search-selec-dropdown" css start */
.table-responsive div.dt-container .dt-search input {
margin-left: 8px;
}
.table-responsive div.dt-container .dt-search input,
div.dt-container select.dt-input {
font-size: 14px;
font-weight: 500;
padding: 8px 12px !important;
border-radius: 10px;
background-color: rgb(240 245 247) !important;
border: 1px solid;
border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
color: #202124 !important;
}
/* select Hover and focus styles */
div.dt-container select.dt-input {
margin-right: 8px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
min-width: 70px;
padding: 10px 30px 10px 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
}
div.dt-container select.dt-input:hover,
div.dt-container select.dt-input:focus {
box-shadow: none !important;
outline: none !important;
}
/* Fallback for Firefox */
@-moz-document url-prefix() {
select {
padding-right: 12px;
}
}
/* admin-blog data-table header "search-selec-dropdown" css over */
/* admin-blog data-table css start */
div.dt-container .dt-paging .dt-paging-button {
margin: 0px 2px !important;
}
div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button {
color: var(--v2-violet) !important;
font-size: 14px;
font-weight: 500;
padding: 8px 16px !important;
border-radius: 8px;
border-radius: 8px;
border: 0px;
background-color: transparent !important;
border: transparent !important;
}
div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button:hover {
color: #fff !important;
border-color: var(--v2-violet) !important;
background: var(--v2-violet) !important;
}
div.dt-container .dt-paging .ellipsis {
color: var(--v2-violet) !important;
}
div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
color: #fff !important;
font-size: 14px;
font-weight: 500;
padding: 8px 16px !important;
border-radius: 8px;
border-color: var(--v2-violet);
background-color: var(--v2-violet) !important;
}
/* data-table HEADING sorting-icon css */
.dt-column-order::before,
.dt-column-order::after {
line-height: 11px !important;
}
/* admin-blog data-table css over */
.bg-success-soft {
background-color: rgb(25 135 84 / 60%) !important;
}
.bg-warning-soft {
background-color: rgb(255 193 7 / 60%) !important;
}
.bg-danger-soft {
background-color: rgb(220 53 69 / 60%) !important;
}
.bg-info-soft {
background-color: rgb(13 202 240 / 60%) !important;
}
select.timezoneDropdown {
appearance: none;
letter-spacing: 0.05rem;
background: url('data:image/svg+xml;utf8,') no-repeat right 16px center;
background-size: 16px;
background-color: #242432;
color: #fff;
}
select.timezoneDropdown:focus {
outline: none;
box-shadow: none;
}
select.timezoneDropdown option {
background-color: #242432;
color: #fff !important;
border: none !important;
padding: 8px 12px !important;
}
/* ======= profile page css code over ===== */
/*timer page fullscreen active css*/
#btn-full-screen.btn.active,
#btn-horizontal-flip.btn.active,
#btn-vertical-flip.btn.active {
border: 2px solid var(--v2-violet);
background-color: rgba(91, 60, 245, 0.1);
}
.identifyTitle {
color: #facc15;
text-align: center;
font-size: 3rem;
line-height: 1;
}
.btn-link-timer {
position: absolute;
top: -1.6rem;
left: 8%;
width: .75rem;
border-radius: 9999px;
/* border: solid 4px #464652;
backgrou nd-color: #181827; */
border-color: var(--v2-violet) !important;
background-color:var(--v2-violet) !important ;
height: 36px;
}
#timerSettingModal .modal-dialog {
max-width: 710px;
}
#timerSettingModal input.form-control,
#timerSettingModal textarea.form-control,
#addLabelModal input.form-control {
font-size: 14px;
padding: 4px 12px;
border-radius: 10px;
background-color: rgb(240 245 247) !important;
color: #000;
border: solid 1px rgba(255, 255, 255, 0.08);
font-weight: 500;
max-height: 37px;
height: 37px;
border-radius: 8px !important;
border-color: rgba(91, 60, 245, 0.12) !important;
box-shadow: 0 4px 16px rgba(91, 60, 245, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
.modal.show {
backdrop-filter: blur(6px) !important;
background-color: rgb(0 0 0 / 20%);
}
.col-form-label[for="durationMinutes"],
.col-form-label[for="Appearance"] { font-size: 14px; }
.form-group.row p.col-sm-12.text-muted { font-size: 13px; }
.timer-progress-bar {
height: 16px;
border-radius: 4px;
width: 100%;
background: linear-gradient(to right, #22C55D 85%, #F59E0C 85% 95%, #EF4444 95%);
transition: width 1s linear;
}
/* timer setting modal select2 dropdown css start */
#js-timerSettingDropdown~.select2-container,
#js-timerSettingDurantionDropdown~.select2-container {
font-size: 14px;
padding: 4px 12px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.05) !important;
border: solid 1px rgba(255, 255, 255, 0.08);
color: #fff;
font-weight: 500;
}
#timerSettingModal .select2-container--open {
z-index: 9999;
}
#timerSettingModal .select2-container {
width: 100% !important;
vertical-align: baseline;
}
.select2-dropdown.custom-dropdown-list {
border-radius: 8px;
background-color: rgb(240 245 247) !important;
border: solid 1px rgba(255, 255, 255, 0.08);
margin-top: 0.7%;
}
#timerSettingModal .select2-container .select2-results__option {
padding: 12px 16px;
}
/* selected option css start */
.custom-dropdown-list .select2-results__option--selected {
background-color: transparent !important;
}
/* selected option css over */
/* select2 hover bg css start */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
/* background-color: #e9e9e9 !important; */
background-color: rgba(222, 215, 254, 0.5) !important;
}
/* select2 hover bg css over */
/* option inner tag css start */
.select2-dropdown.custom-dropdown-list .custom-select-option h4 {
font-size: 15px;
padding: 0px;
font-weight: 500;
line-height: 20px;
}
.select2-dropdown.custom-dropdown-list .custom-select-option p {
margin-bottom: 0px;
font-size: 12px;
padding: 0px;
font-weight: 300;
color: #6c757d !important;
line-height: 20px;
}
/* option inner tag css over */
.select2-container--default .select2-selection--single {
border: 0px !important;
border-radius: 0px !important;
background-color: transparent !important;
}
#timerSettingModal .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #000 !important;
font-size: 14px;
padding: 4px 12px;
border-radius: 10px;
background-color: rgb(240 245 247) !important;
border: solid 1px rgba(255, 255, 255, 0.08);
font-weight: 500;
border-color: rgba(91, 60, 245, 0.12) !important;
box-shadow: 0 4px 16px rgba(91, 60, 245, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
#timerSettingModal .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 6px;
right: 12px;
}
/* timer setting modal select2 dropdown css over */
.js-addLabelBtn {
font-size: 13px;
}
.addLabelColorBtn {
background-color: rgb(76, 175, 80);
border: solid 2px transparent;
border-radius: 50%;
width: 20px;
height: 20px;
}
.addLabelColorBtn.active {
border-width: 2px !important;
border-color: #000;
}
.premium-badge {
background-color: rgb(240 245 247) !important;
font-size: .875rem;
line-height: 1.25rem;
padding: 8px 16px;
}
#addLabelModal.modal.show {
z-index: 1111;
}
#addLabelModal .modal-dialog {
width: 385px;
}
.row#header .editDeviceDivision {
box-shadow: 0px 8px 18px 1px rgba(91, 60, 245, 0.1) inset;
border-radius: 20px;
}
#btn-vertical-flip,
#btn-horizontal-flip,
#btn-full-screen {
box-shadow: 0px 8px 18px 1px rgba(91, 60, 245, 0.1) inset !important;
}
/* pricing modal css start */
.modal#pricingModal .modal-dialog {
max-width: 700px;
}
.modal#pricingModal .modal-dialog .modal-content {
box-shadow: 0px 7px 18px rgba(91, 60, 245, 0.10);
border: 1px solid #ECEDF2;
border-radius: 10px;
}
.modal#pricingModal .modal-dialog .modal-content .modal-header .btn-close {
font-size: 12px;
}
.modal#pricingModal .modal-dialog .modal-content label.form-check:focus,
.modal#pricingModal .modal-dialog .modal-content label.form-check:active {
outline: none !important;
box-shadow: none !important;
}
.modal#pricingModal .modal-dialog .modal-content label.form-check {
cursor: pointer;
width: 100%;
background-color: #fff;
border: 1px solid #ECEDF2;
box-sizing: border-box;
border-radius: 10px;
transition: all 300ms ease;
outline: none;
}
.modal#pricingModal .modal-dialog .modal-content label.form-check:hover {
box-shadow: 0px 7px 18px rgba(64, 79, 104, 0.05);
}
.modal#pricingModal .modal-dialog .modal-content label.form-check[for="pro"] {
background: linear-gradient(180deg, rgba(91, 60, 245, 0.1) 0%, rgba(91, 60, 245, 0.05) 100%);
border: solid 1px var(--v2-vio-mid);
}
.modal#pricingModal .modal-dialog #pricing-container ul.list-unstyled li:last-child {
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
.modal#pricingModal .modal-dialog .priceDetailContainer label.form-check-label {
font-size: 18px;
color: #202124;
font-weight: 500;
}
.modal#pricingModal .modal-dialog .priceDetailContainer input.form-check-input {
width: 20px;
height: 20px;
background-color: #d7d7d7;
}
.modal#pricingModal .modal-dialog .priceDetailContainer input.form-check-input[type=radio] {
background-image: url('data:image/svg+xml;utf8,');
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.modal#pricingModal .modal-dialog .priceDetailContainer input.form-check-input:checked[type=radio] {
background-color: var(--v2-violet) !important;
border-color: var(--v2-violet) !important;
}
/* pricing modal css over */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #2b284f;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
z-index: 9999;
font-size: 14px;
flex-wrap: wrap;
gap: 10px;
}
.cookie-text {
margin: 0;
flex: 1;
}
.cookie-link {
color: var(--v2-violet);
text-decoration: underline;
}
.cookie-btn {
text-align: center;
white-space: nowrap;
color: #fff !important;
background-color: var(--violet);
font-size: 15px;
line-height: 20px;
border-radius: 8px;
font-weight: 400;
padding: 12px 28px 12px 28px;
border: none;
}
footer.cstFooter a.footer-link {
border-bottom: solid 1px transparent;
}
footer.cstFooter a.footer-link:hover {
border-bottom: solid 1px #696969;
}
/* blog page css start */
.blog-img.card-img-top {
height: 250px;
max-height: 250px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.card-title.text-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #212529;
}
.text-blog-desc {
color: #6c757d;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-read-more {
color: var(--v2-violet);
font-size: 15px;
display: flex;
align-items: center;
}
.btn-read-more i {
font-size: 13px;
line-height: 0px;
}
/* blog-detail page css */
#blog-detail-section .blogImgWrapper img {
border-radius: 20px;
object-fit: cover;
max-height: 600px;
}
/* blog page css over */
/* input-file css start */
/* Style the 'Choose File' button */
input[type="file"].form-control::file-selector-button {
background-color: transparent !important;
font-weight: medium;
border-color: var(--v2-violet);
color: var(--v2-violet);
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s;
}
/* Focus effect for accessibility */
input[type="file"].form-control:focus {
outline: none !important;
box-shadow: none !important;
}
/* input-file css over */
/* select css start */
select.form-control {
appearance: none;
-webkit-appearance: none;
height: auto !important;
-moz-appearance: none;
padding: 12px 16px;
font-size: 14px;
border: 1px solid transparent;
border-radius: 10px;
background-color: rgb(240 245 247) !important;
cursor: pointer;
background-size: 13px;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
}
select.form-control:hover,
select.form-control:focus {
box-shadow: none !important;
outline: none !important;
}
/* select css over */
/* edit-blog page editor css start */
.tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary,
.tox .tox-tbtn {
background-color: #f0f5f7 !important;
}
.tox .tox-statusbar {
padding: 10px 12px !important;
height: auto !important;
}
/* edit-blog page editor css over */
.blog-list-pagination .pagination .page-item .page-link,
.admin-blog-list-pagination .pagination .page-item .page-link {
padding: 7px 17px;
color: var(--v2-violet);
font-size: 18px;
}
.blog-list-pagination .pagination .active .page-link,
.admin-blog-list-pagination .pagination .active .page-link {
z-index: 3;
color: #fff;
background-color: var(--v2-violet);
border-color: var(--v2-violet);
font-weight: 600;
}
.blog-list-pagination .pagination .disabled .page-link,
.admin-blog-list-pagination .pagination .disabled .page-link {
color: #6c757d;
}
.blog-list-pagination .page-item:first-child .page-link,
.admin-blog-list-pagination .page-item:first-child .page-link {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
}
.blog-list-pagination .page-item:last-child .page-link,
.admin-blog-list-pagination .page-item:last-child .page-link {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;
}
/* pricing page css over */
/* profile dropdown css start */
.profile-dropdown .dropdown-toggle img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
}
/* profile dropdown css over */
.iti.iti--allow-dropdown.iti--show-flags {
width: 100%;
display: block;
}
#phoneModal .iti__country-name {
font-size: 1rem;
color: #1f2937;
font-weight: 400;
}
/* ========================== old */
/* STAGETIMER LANDING — NEW DESIGN */
:root {
--white: #FFF;
--off: #F6F6F8;
--off2: #EEECF2;
--ink: #12112A;
--ink2: #3A3857;
--muted: #8E8BAA;
--muted2: #C5C3D8;
--violet: #5B3CF5;
--vio-lo: #EEE9FF;
--vio-mid: rgba(91, 60, 245, .15);
--vio-glow: rgba(91, 60, 245, .25);
--vio-dark: #3D22D4;
--green: #16A34A;
--green-lo: #DCFCE7;
--amber: #D97706;
--amber-lo: #FEF3C7;
--border: #E8E6F0;
--border2: #D4D1E8;
--r: 8px;
--r2: 14px;
--f-disp: 'DM Serif Display', Georgia, serif;
--f-head: 'Manrope', sans-serif;
--f-body: 'Public Sans', sans-serif;
--f-mono: 'JetBrains Mono', monospace
}
body.landing-page {
background: var(--white);
color: var(--ink);
font-family: var(--f-body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden
}
body.landing-page *,
body.landing-page *::before,
body.landing-page *::after {
box-sizing: border-box
}
body.landing-page main {
margin: 0;
padding: 0
}
.sr {
opacity: 1;
transform: none;
transition: opacity .65s ease, transform .65s ease
}
.sr.d1 {
transition-delay: .08s
}
.sr.d2 {
transition-delay: .16s
}
.sr.d3 {
transition-delay: .24s
}
.sr.vis {
opacity: 1;
transform: none
}
#nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 300;
height: 60px;
padding: 0 clamp(1rem, 4vw, 3rem);
background: rgb(255, 255, 255);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border)
}
#nav .container {
display: flex;
height: 60px;
padding: 0;
align-items: center;
margin: 0 auto;
max-width: 1240px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
flex-shrink: 0
}
.nav-logo-icon {
width: 161px;
height: auto;
/* background: var(--violet); */
/* border-radius: 7px; */
display: flex;
align-items: center;
justify-content: center
}
.nav-logo-icon svg {
width: 16px;
height: 16px;
color: #fff
}
.nav-logo-text {
font-family: var(--f-head);
font-size: 1.05rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -.02em
}
.nav-links {
display: flex;
gap: 1.75rem;
list-style: none;
margin: 0 auto;
padding: 0;
position: absolute;
left: 50%;
transform: translateX(-50%)
}
.nav-links a {
font-size: .875rem;
font-weight: 500;
color: var(--muted);
text-decoration: none
}
.nav-links a:hover {
color: var(--ink)
}
.nav-actions {
display: flex;
gap: .6rem;
align-items: center;
margin-left: auto
}
.n-ghost {
font-size: .8rem;
font-weight: 500;
color: var(--ink2);
border: 1px solid var(--border2);
padding: .4rem 1rem;
border-radius: var(--r);
text-decoration: none;
display: inline-flex
}
.n-ghost:hover {
border-color: var(--violet);
color: var(--violet)
}
.n-fill {
font-family: var(--f-head);
font-size: .8rem;
font-weight: 700;
color: #fff;
background: var(--violet);
padding: .4rem 1.1rem;
border-radius: var(--r);
text-decoration: none;
display: flex;
align-items: center;
gap: .35rem
}
.n-fill:hover {
background: var(--vio-dark);
box-shadow: 0 4px 16px var(--vio-glow);
color: #fff
}
.ham-btn {
display: none;
flex-direction: column;
gap: 4.5px;
background: none;
border: none;
cursor: pointer;
margin-left: auto
}
.ham-btn span {
display: block;
width: 20px;
height: 1.5px;
background: var(--ink)
}
.landing-profile .profile-toggle {
display: flex;
align-items: center;
gap: .5rem;
border: none;
background: none;
cursor: pointer;
padding: 0
}
.landing-profile .profile-toggle::after {
display: none;
}
.landing-profile .profile-img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border2)
}
.landing-profile .dropdown-menu {
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: 0 8px 24px rgba(18, 17, 42, .08)
}
.landing-profile .dropdown-item {
font-size: .85rem;
color: var(--ink2);
padding: .5rem 1rem
}
.landing-profile .dropdown-item:hover {
background: var(--vio-lo);
color: var(--violet)
}
.mob-menu {
display: none;
flex-direction: column;
position: fixed;
top: 60px;
left: 0;
right: 0;
z-index: 299;
background: #fff;
border-bottom: 1px solid var(--border);
padding: 0 clamp(1rem, 4vw, 3rem);
box-shadow: 0 8px 24px rgba(18, 17, 42, .07)
}
.mob-menu a {
display: block;
padding: .9rem 0;
font-size: .9rem;
font-weight: 500;
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid var(--border)
}
.mob-menu a:hover {
color: var(--violet)
}
.mob-menu .mob-cta {
color: var(--violet);
font-weight: 600
}
.mob-menu.open {
display: flex
}
.hero-sec-wrapper {
min-height: 100vh;
}
.stats-grid { min-width: 100%; }
#hero {
padding-top: 60px;
/* display: flex; */
flex-direction: column;
position: relative;
overflow: hidden
}
#hero::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, var(--vio-lo) 0%, transparent 70%);
pointer-events: none
}
.hero-top{
flex:1;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:clamp(1.5rem,4vw,3rem);
padding-top: clamp(1.5rem, 4vw, 3rem);
/* padding:clamp(2.5rem,6vw,5rem) clamp(1.25rem,5vw,5rem); */
position:relative;z-index:1;
}
.hero-left{
display:flex;
flex-direction:column;
flex:1 1 620px;
min-width:0;
max-width:700px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--vio-lo);
border: 1px solid rgba(91, 60, 245, .2);
border-radius: 100px;
padding: .3rem .85rem;
font-family: var(--f-mono);
font-size: .65rem;
letter-spacing: .08em;
color: var(--violet);
margin-bottom: 2rem;
width: fit-content;
white-space: nowrap;
}
.badge-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--violet);
animation: st-blink 2s ease infinite
}
@keyframes st-blink {
0%,
100% {
opacity: 1
}
50% {
opacity: .2
}
}
.split-headline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: clamp(.5rem, 1.5vw, .8rem);
margin-bottom: clamp(1rem, 2vw, 1rem);
line-height: normal;
}
.h-word {
font-family: var(--f-disp);
font-size: clamp(2.1rem, 5.3vw, 4.3rem);
font-weight: 400;
line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
white-space: nowrap
}
.h-word.italic {
font-style: italic;
color: var(--violet)
}
.h-timer-widget {
display: inline-flex;
flex-direction: column;
align-items: center;
background: var(--ink);
border-radius: var(--r2);
padding: clamp(.6rem, 1.5vw, 1rem) clamp(.85rem, 2vw, 1.5rem);
box-shadow: 0 8px 32px rgba(18, 17, 42, .18);
cursor: pointer;
position: relative
}
.h-timer-widget::before {
content: '';
position: absolute;
bottom: -2px;
left: 20%;
right: 20%;
height: 3px;
background: var(--violet);
border-radius: 0 0 4px 4px
}
.htw-label {
font-family: var(--f-mono);
font-size: clamp(.5rem, .8vw, .62rem);
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .35);
margin-bottom: .15rem;
display: flex;
align-items: center;
gap: .4rem
}
.htw-live {
width: 5px;
height: 5px;
border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 6px #4ADE80;
animation: st-blink 1.5s ease infinite
}
.htw-time {
font-family: var(--f-mono);
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 500;
color: #fff;
letter-spacing: .06em;
font-variant-numeric: tabular-nums;
line-height: 1
}
.htw-time.warn {
color: #FBD05C
}
.htw-time.crit {
color: #F87171;
animation: st-crit .9s ease infinite
}
@keyframes st-crit {
0%,
100% {
opacity: 1
}
50% {
opacity: .55
}
}
.htw-sess {
font-family: var(--f-mono);
font-size: clamp(.42rem, .6vw, .55rem);
letter-spacing: .06em;
color: rgba(255, 255, 255, .28);
margin-top: .15rem;
text-transform: uppercase;
max-width: 120px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.hero-sub {
font-size: clamp(.9rem, 1.5vw, 1.05rem);
color: var(--ink2);
line-height: 1.75;
max-width: 520px;
margin-bottom: 1.25rem
}
.hero-cta-row {
display: flex;
align-items: center;
gap: .85rem;
flex-wrap: wrap;
margin-bottom: 3rem
}
.cta-main {
font-family: var(--f-head);
font-size: .9rem;
font-weight: 700;
color: #fff;
background: var(--violet);
padding: .85rem 1.85rem;
border-radius: var(--r);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: .5rem;
transition: all .2s
}
.cta-main:hover {
background: var(--vio-dark);
box-shadow: 0 6px 24px var(--vio-glow);
/* transform: translateY(-1px); */
color: #fff
}
.cta-main svg {
width: 14px;
height: 14px
}
.cta-ghost {
font-size: .88rem;
font-weight: 500;
color: var(--ink2);
border: 1px solid var(--border2);
padding: .85rem 1.6rem;
border-radius: var(--r);
text-decoration: none;
display: inline-flex
}
.cta-ghost:hover {
border-color: var(--violet);
color: var(--violet)
}
.hero-stats {
display: flex;
gap: clamp(1.5rem, 4vw, 3rem);
flex-wrap: wrap;
padding-top: 2.25rem;
border-top: 1px solid var(--border)
}
/* ══════════════════════════════════════
HERO ART — right-side illustration
══════════════════════════════════════ */
.hero-art{
position:relative;flex:0 0 auto;
width:clamp(240px,26vw,400px);
height:clamp(240px,26vw,400px);
display:flex;align-items:center;justify-content:center;
margin-right:clamp(0.5rem,4vw,3rem); /* ← pushes art away from the right edge */
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ha-glow{
position:absolute;inset:6%;border-radius:50%;
background:radial-gradient(circle,var(--vio-lo) 0%,transparent 72%);
}
.ha-ring-outer{
position:absolute;inset:0;border-radius:50%;
border:1.5px dashed var(--border2);
animation:ha-spin 50s linear infinite;
}
.ha-ring-inner{
position:absolute;inset:15%;border-radius:50%;
border:1px dashed var(--vio-mid);
}
@keyframes ha-spin{to{transform:rotate(360deg)}}
.ha-dots{
position:absolute;left:-2%;bottom:10%;
width:64px;height:64px;
background-image:radial-gradient(var(--muted2) 1.4px,transparent 1.4px);
background-size:11px 11px;
opacity:.55;
}
.ha-main{
position:relative;z-index:2;
background:var(--ink);border-radius:var(--r2);
padding:1.35rem 1.6rem 1.15rem;
box-shadow:0 20px 50px rgba(18,17,42,0.24);
display:flex;flex-direction:column;align-items:center;
animation:ha-float 5s ease-in-out infinite;
}
.ha-main::before{
content:'';position:absolute;bottom:-2px;left:20%;right:20%;height:3px;
background:var(--violet);border-radius:0 0 4px 4px;
}
.ha-ring-wrap{position:relative;width:104px;height:104px;}
.ha-ring-wrap svg{width:100%;height:100%}
.ha-ring-time{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:var(--f-mono);font-size:1.32rem;font-weight:500;color:#fff;
letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.ha-main-label{
display:flex;align-items:center;gap:.4rem;
font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;
text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:.65rem;
}
.ha-main-label .htw-live{width:5px;height:5px}
.ha-rundown{
position:absolute;z-index:3;left:-10%;bottom:-8%;
background:#fff;border:1px solid var(--border);border-radius:var(--r);
padding:.8rem .95rem;width:172px;
box-shadow:0 14px 34px rgba(18,17,42,0.12);
transform:rotate(3deg);
animation:ha-float2 6s ease-in-out infinite;
}
.ha-r-row{display:flex;align-items:center;gap:.5rem;padding:.26rem 0}
.ha-r-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ha-r-dot.done{background:var(--green)}
.ha-r-dot.live{background:var(--violet);box-shadow:0 0 6px var(--vio-glow);animation:blink 1.5s ease infinite}
.ha-r-dot.next{background:var(--muted2)}
.ha-r-txt{font-family:var(--f-body);font-size:.68rem;color:var(--ink2)}
.ha-r-row.live .ha-r-txt{color:var(--ink);font-weight:600}
.ha-badge{
position:absolute;z-index:3;top:0;right:-6%;
display:flex;align-items:center;gap:5px;
background:#fff;border:1px solid var(--border);border-radius:100px;
padding:.35rem .75rem;
box-shadow:0 8px 20px rgba(18,17,42,0.1);
font-family:var(--f-mono);font-size:.58rem;letter-spacing:.08em;color:var(--ink2);
animation:ha-float 4.5s ease-in-out infinite .3s;
}
.ha-badge .dotr{width:5px;height:5px;border-radius:50%;background:#F87171;animation:blink 1.4s ease infinite}
@keyframes ha-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ha-float2{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(8px)}}
.hstat-n {
font-family: var(--f-head);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
color: var(--ink);
line-height: 1
}
.hstat-n em {
color: var(--violet);
font-style: normal
}
.hstat-l {
font-size: .75rem;
color: var(--muted);
margin-top: .2rem
}
.logo-strip {
background: var(--off);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 1.1rem 0;
overflow: hidden
}
.logo-strip-inner {
display: flex;
animation: logoSlide 26s linear infinite;
width: max-content
}
.logo-strip-inner:hover {
animation-play-state: paused
}
.ls-item {
font-family: var(--f-head);
font-size: .85rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted2);
padding: 0 2.5rem;
border-right: 1px solid var(--border);
white-space: nowrap
}
@keyframes logoSlide {
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
.landing-page .section {
padding: 6rem clamp(1.25rem, 5vw, 5rem)
}
.landing-page .section-inner {
max-width: 1240px;
margin: 0 auto
}
#cta .cta-inner .eyebrow,
section .section-inner .eyebrow,
#faqSection .eyebrow,
.related-blog-section .eyebrow {
font-family: var(--f-mono);
font-size: .65rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--violet);
display: flex;
align-items: center;
gap: .45rem;
margin-bottom: .75rem
}
#cta .cta-inner .eyebrow::before,
section .section-inner .eyebrow::before,
#faqSection .eyebrow::before,
.related-blog-section .eyebrow:before {
content: '';
width: 16px;
height: 1.5px;
background: var(--violet)
}
.landing-page h2, #cta .cta-inner h2 {
font-family: var(--f-disp);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--ink);
margin-bottom: .75rem
}
.landing-page h2 em, #cta .cta-inner h2 em {
font-style: italic;
color: var(--violet)
}
.landing-page .section-desc {
font-size: .95rem;
color: var(--ink2);
line-height: 1.75;
max-width: 480px;
margin-bottom: 3rem
}
#featuresSection {
background: var(--off)
}
.feat-list {
display: flex;
flex-direction: column
}
.feat-item {
display: grid;
grid-template-columns: 90px 1fr 1fr;
border-bottom: 1px solid var(--border);
padding: clamp(2rem, 4vw, 3.5rem) 0
}
.feat-item:first-child {
border-top: 1px solid var(--border)
}
.feat-item:hover {
background: rgba(91, 60, 245, .02)
}
.feat-num {
font-family: var(--f-disp);
font-style: italic;
font-size: clamp(2.5rem, 4vw, 3.5rem);
color: var(--violet);
opacity: .55;
padding-right: 1.5rem
}
.feat-title-txt {
font-family: var(--f-head);
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
font-weight: 700;
color: var(--ink);
margin-bottom: .65rem
}
.feat-tag-row {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: .85rem
}
.ftag {
font-family: var(--f-mono);
font-size: .6rem;
text-transform: uppercase;
padding: .25rem .65rem;
border-radius: 100px;
border: 1px solid var(--border2);
color: var(--muted)
}
.ftag.active {
background: var(--vio-lo);
border-color: rgba(91, 60, 245, .25);
color: var(--violet)
}
.feat-body-txt {
font-size: .9rem;
color: var(--ink2);
line-height: 1.75
}
.msg-stack {
display: flex;
flex-direction: column;
gap: .45rem;
margin-top: 1rem
}
.msg-bubble {
display: inline-flex;
padding: .45rem .9rem;
border-radius: var(--r);
font-size: .8rem;
width: fit-content
}
.mb-g {
background: var(--green-lo);
color: var(--green)
}
.mb-v {
background: var(--vio-lo);
color: var(--violet)
}
.mb-a {
background: var(--amber-lo);
color: var(--amber)
}
.dev-list {
display: flex;
flex-direction: column;
gap: .35rem;
margin-top: 1rem
}
.dev-row {
display: flex;
justify-content: space-between;
padding: .5rem .85rem;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r);
font-size: .78rem
}
.dev-info {
display: flex;
align-items: center;
gap: .5rem;
color: var(--ink2)
}
.d-dot {
width: 6px;
height: 6px;
border-radius: 50%
}
.d-dot.on {
background: var(--green)
}
.d-dot.off {
background: var(--muted2)
}
.dev-type {
font-family: var(--f-mono);
font-size: .6rem;
color: var(--muted)
}
.int-grid {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: 1rem
}
.ichip {
font-family: var(--f-mono);
font-size: .62rem;
padding: .3rem .75rem;
border-radius: var(--r);
border: 1px solid var(--border2);
color: var(--muted);
background: var(--white)
}
.ichip.hi {
border-color: rgba(91, 60, 245, .3);
color: var(--violet);
background: var(--vio-lo)
}
#stats {
background: var(--violet);
padding: .5rem clamp(1.25rem, 5vw, 5rem)
}
.stats-grid {
/* max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr) */
display: grid;
grid-template-columns: repeat(3, calc((1240px - 48px) / 3));
gap: 24px;
justify-content: center;
}
.stat-c {
padding: 2rem 2.5rem;
border-right: 1px solid rgba(255, 255, 255, .15);
text-align: center
}
.stat-c:last-child {
border-right: none
}
.stat-n {
font-family: var(--f-head);
font-size: clamp(2.5rem, 5vw, 2rem);
font-weight: 800;
color: #fff;
line-height: 1;
margin-bottom: .35rem
}
.stat-n em {
color: rgba(255, 255, 255, .6);
font-style: normal
}
.stat-l {
font-family: var(--f-mono);
font-size: .62rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55)
}
/* Tablet */
@media (max-width: 1279px) {
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile */
@media (max-width: 767px) {
.stats-grid {
grid-template-columns: 1fr;
}
.stat-c {
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, .1)
}
}
#testimonialSection {
background: var(--white)
}
.testi-stagger {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
align-items: start
}
.testi-card {
background: var(--off);
border: 1px solid var(--border);
border-radius: var(--r2);
padding: 2rem 1.75rem;
transition: all .25s
}
.testi-card:hover {
border-color: rgba(91, 60, 245, .25);
box-shadow: 0 8px 32px rgba(91, 60, 245, .08);
/* transform: translateY(-3px) */
}
/* .testi-card:nth-child(2) {
margin-top: 2rem
}
.testi-card:nth-child(3) {
margin-top: 1rem
} */
.tc-accent {
width: 24px;
height: 2px;
background: var(--violet);
margin-bottom: 1.25rem
}
.tc-stars {
display: flex;
gap: 2px;
margin-bottom: 1rem
}
.tstar {
width: 16px;
height: 16px;
fill: #F59E0B
}
.tc-q {
font-family: var(--f-disp);
font-style: italic;
font-size: .97rem;
color: var(--ink2);
line-height: 1.75;
margin-bottom: 1.5rem
}
.tc-author {
display: flex;
align-items: center;
gap: .75rem
}
.tc-av {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--vio-lo);
border: 2px solid rgba(91, 60, 245, .2);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-head);
font-size: .8rem;
font-weight: 800;
color: var(--violet)
}
.tc-name {
font-family: var(--f-head);
font-size: .82rem;
font-weight: 700;
line-height: normal;
color: var(--ink)
}
.tc-role {
font-size: .73rem;
color: var(--muted)
}
#usedSection {
background: var(--off)
}
.uc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .75rem;
margin-top: 3rem
}
.uc-card{
background:var(--white);
border:1px solid var(--border);
border-radius:var(--r2);
padding:1.4rem 1.25rem;
text-decoration:none;display:block;
transition:all .2s;
position:relative;overflow:hidden;
}
.uc-card::after{
content:'→';
position:absolute;bottom:1rem;right:1.1rem;
font-size:.75rem;color:var(--violet);
opacity:0;transform:translate(-4px,3px);transition:all .22s;
}
.uc-card:hover{
border-color:rgba(91,60,245,.25);
box-shadow:0 4px 20px rgba(91,60,245,.08);
transform:translateY(-2px);
}
.uc-card:hover::after{opacity:1;transform:translate(0,0)}
.uc-ico {
width: 34px;
height: 34px;
border-radius: var(--r);
background: var(--vio-lo);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: .85rem
}
.uc-ico svg {
width: 17px;
height: 17px;
color: var(--violet)
}
.uc-name {
font-family: var(--f-head);
font-size: .9rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .25rem
}
.uc-desc {
font-size: .75rem;
color: var(--muted);
line-height: 1.5
}
#how {
background: var(--white)
}
.how-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem
}
.how-card {
padding: 2rem;
background: var(--off);
border: 1px solid var(--border);
border-radius: var(--r2)
}
.how-num {
font-family: var(--f-disp);
font-style: italic;
font-size: 3.5rem;
color: var(--violet);
opacity: .18;
line-height: 1;
margin-bottom: .75rem
}
.how-title {
font-family: var(--f-head);
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
margin-bottom: .6rem
}
.how-desc {
font-size: .875rem;
color: var(--ink2);
line-height: 1.7
}
#faqSection,
#relatedUseCases,
.related-blog-section {
background: var(--off) !important;
}
.faq-wrap {
display: grid;
grid-template-columns: 300px 1fr;
gap: 5rem;
max-width: 1240px;
margin: 0 auto
}
.faq-left {
position: sticky;
top: 80px;
align-self: start
}
.faq-left p {
font-size: .875rem;
color: var(--muted)
}
.faq-left a {
color: var(--violet);
text-decoration: none;
font-weight: 500
}
.faq-it {
border-bottom: 1px solid var(--border)
}
.faq-it:first-child {
border-top: 1px solid var(--border)
}
.faq-btn {
width: 100%;
background: none;
border: none;
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0;
cursor: pointer;
font-family: var(--f-head);
font-size: .9rem;
font-weight: 600;
color: var(--ink2);
text-align: left
}
.faq-btn:hover {
color: var(--violet)
}
.faq-it.open .faq-btn {
color: var(--ink)
}
.faq-sym {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--off2);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
font-size: .8rem;
font-weight: 700
}
.faq-it.open .faq-sym {
background: var(--vio-lo);
color: var(--violet);
transform: rotate(45deg)
}
.faq-body {
max-height: 0;
overflow: hidden;
transition: max-height .32s ease
}
.faq-it.open .faq-body {
max-height: 400px
}
.faq-body p {
padding: .1rem 0 1.25rem;
margin: 0;
font-size: .875rem;
color: var(--muted);
line-height: 1.75
}
#cta {
background: var(--vio-lo);
border-top: 1px solid rgba(91, 60, 245, .15);
border-bottom: 1px solid rgba(91, 60, 245, .15);
padding: 6rem clamp(1.25rem, 5vw, 5rem);
text-align: center;
position: relative;
overflow: hidden
}
#cta::before {
content: '';
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
background: radial-gradient(circle, rgba(91, 60, 245, .1) 0%, transparent 70%);
pointer-events: none
}
.cta-inner {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto
}
.cta-inner .eyebrow {
justify-content: center
}
.cta-inner .eyebrow::before,
.cta-inner .eyebrow::after,
.section-inner .eyebrow::before,
.section-inner .eyebrow::after,
#faqSection .eyebrow::before,
#faqSection .eyebrow::after,
.related-blog-section .eyebrow::before,
.related-blog-section .eyebrow::after {
content: '';
width: 16px;
height: 1.5px;
background: var(--violet)
}
.cta-inner h2 {
font-size: clamp(2.2rem, 4.5vw, 3.5rem) !important;
margin: 1rem 0 .75rem
}
.cta-inner p {
color: var(--ink2);
margin-bottom: 2.25rem
}
.cta-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .5rem;
margin-bottom: 2.25rem
}
.cchip {
display: inline-flex;
font-family: var(--f-mono);
font-size: .62rem;
border: 1px solid rgba(91, 60, 245, .2);
background: rgba(255, 255, 255, .7);
color: var(--ink2);
padding: .3rem .8rem;
border-radius: 100px
}
.cchip::before {
content: '✓';
color: var(--violet);
font-weight: 700;
margin-right: .35rem
}
.landing-footer {
background: var(--ink);
padding: 4rem clamp(1.25rem, 5vw, 5rem) 2rem
}
.foot-inner {
max-width: 1240px;
margin: 0 auto
}
.foot-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, .07)
}
.f-logo .foot-logo-text {
font-family: var(--f-head);
font-size: 1.05rem;
font-weight: 800;
color: rgba(255, 255, 255, .80);
letter-spacing: -.02em;
}
.foot-logo p {
font-size: .83rem;
color: rgba(255, 255, 255, .80);
line-height: 1.7;
margin-top: .65rem;
max-width: 250px
}
.foot-ver {
font-family: var(--f-mono);
font-size: .58rem;
color: rgba(255, 255, 255, .18);
margin-top: .65rem
}
.foot-col h4 {
font-family: var(--f-mono);
font-size: .58rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255, 255, 255, .80) !important;
margin-bottom: 1rem
}
.foot-col ul {
list-style: none;
margin: 0;
padding: 0
}
.foot-col li {
margin-bottom: .5rem
}
.foot-col a {
font-size: .85rem;
color: rgba(255, 255, 255, .50);
text-decoration: none
}
.foot-col a:hover {
color: rgba(255, 255, 255, .80)
}
.foot-bottom {
display: flex;
justify-content: space-between;
padding-top: 1.75rem;
flex-wrap: wrap;
gap: 1rem
}
.foot-bottom p {
font-family: var(--f-mono);
font-size: .62rem;
color: rgba(255, 255, 255, .60);
margin: 0
}
.foot-legal {
display: flex;
gap: 1.5rem
}
.foot-legal a {
font-family: var(--f-mono);
font-size: .62rem;
color: rgba(255, 255, 255, .60);
text-decoration: none
}
@media(max-width:1040px) {
.nav-links,
.nav-actions {
display: none
}
.ham-btn {
display: flex
}
/* hero-section */
.hero-top{flex-direction:column;align-items:stretch;text-align:left;}
.hero-left{max-width:none;order: 2;flex: auto;}
.hero-art{align-self:center;margin-bottom:6rem;margin-right: 0;order: 1;}
/* hero-section */
.feat-item {
grid-template-columns: 60px 1fr
}
.feat-body-txt {
grid-column: 2;
margin-top: 1rem
}
.testi-stagger {
grid-template-columns: 1fr
}
.testi-card:nth-child(2),
.testi-card:nth-child(3) {
margin-top: 0
}
.faq-wrap {
grid-template-columns: 1fr;
gap: 2rem
}
.faq-left {
position: static
}
.foot-grid {
grid-template-columns: 1fr 1fr
}
.how-grid {
grid-template-columns: 1fr
}
}
@media(max-width:700px) {
.landing-page h2 {
font-size: 1.75rem
}
/* hero-section */
.hero-art{width:210px;height:210px;margin-top:2.5rem}
.ha-main{padding:1rem 1.2rem .9rem}
.ha-ring-wrap{width:78px;height:78px}
.ha-ring-time{font-size:1rem}
.ha-rundown{width:150px;padding:.65rem .8rem;left:-8%;bottom:-10%}
.ha-badge{padding:.3rem .6rem}
/* hero-section */
.h-word {
font-size: clamp(1.8rem, 7vw, 3rem)
}
.feat-item {
display: inline-block;
grid-template-columns: 1fr
}
.feat-num {
display: none
}
.stats-grid {
grid-template-columns: 1fr
}
.foot-grid {
grid-template-columns: 1fr
}
.foot-bottom {
flex-direction: column;
align-items: flex-start
}
}
@media(max-width:430px) {
/* hero-section */
.hero-art{width:180px;height:180px;margin-top:2rem}
.ha-dots{display:none}
.ha-badge{right:0;top:-4%}
.ha-rundown{width:135px}
.ha-r-txt{font-size:.62rem}
/* hero-section */
.hero-cta-row {
flex-direction: column;
align-items: flex-start
}
.cta-main,
.cta-ghost {
width: 100%;
justify-content: center
}
}
@media(prefers-reduced-motion:reduce) {
/* hero-section */
.ha-main,.ha-rundown,.ha-badge,.ha-ring-outer,.ha-r-dot.live{animation:none}
/* hero-section */
.sr {
opacity: 1;
transform: none;
transition: none
}
.logo-strip-inner {
animation: none
}
.htw-time.crit {
animation: none
}
.badge-dot,
.htw-live {
animation: none
}
}
/* INNER PAGES - pricing, usecase, blog - OLD CSS REMOVED, see line ~3360 for new centered hero design */
.landing-page .page-content {
background: var(--white);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem)
}
.landing-page .page-content-inner {
max-width: 820px;
margin: 0 auto;
color: var(--ink2);
font-size: .95rem;
line-height: 1.8
}
.landing-page .page-content-inner--wide {
max-width: 1100px
}
.landing-page .page-content h2,
.landing-page .page-content-inner h2 {
font-family: var(--f-disp);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 400;
color: var(--ink);
margin: 0 0 1rem;
padding: 0
}
.landing-page .page-content h3,
.landing-page .page-content-inner h3 {
font-family: var(--f-head);
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin: 2rem 0 .75rem;
padding: 0
}
.landing-page .page-content p,
.landing-page .page-content-inner p {
margin-bottom: 1rem;
color: var(--ink2)
}
.landing-page .page-content ul.list,
.landing-page .page-content-inner ul.list {
padding-left: 1.25rem;
margin-bottom: 1rem
}
.landing-page .page-content ul.list li,
.landing-page .page-content-inner ul.list li {
list-style: disc;
color: var(--ink2);
margin-bottom: .5rem;
display: list-item
}
.landing-page .page-content code,
.landing-page .page-content-inner code {
font-family: var(--f-mono);
font-size: .85em;
background: var(--off);
padding: .15rem .4rem;
border-radius: 4px;
color: var(--violet)
}
.landing-page .btn-lg-primary {
font-family: var(--f-head);
font-weight: 700;
background: var(--violet) !important;
border: none !important;
color: #fff !important;
padding: .85rem 1.5rem !important;
border-radius: var(--r) !important;
transition: all .2s
}
.landing-page .btn-lg-primary:hover {
background: var(--vio-dark) !important;
box-shadow: 0 6px 22px var(--vio-glow);
color: #fff !important
}
.landing-page .pricing-hero-stack {
position: relative;
max-width: 340px;
margin: 0 auto;
padding: 1.5rem 0 2rem
}
.landing-page .pricing-hero-preview {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--r2);
padding: 1.35rem 1.5rem;
box-shadow: 0 12px 40px rgba(18, 17, 42, .08);
position: relative
}
.landing-page .pricing-hero-preview:first-child {
transform: rotate(-3deg) translateX(-8%);
z-index: 1
}
.landing-page .pricing-hero-preview--featured {
position: absolute;
top: 2rem;
right: 0;
width: 88%;
border-color: rgba(91, 60, 245, .3);
background: linear-gradient(165deg, var(--vio-lo) 0%, var(--white) 55%);
box-shadow: 0 20px 50px rgba(91, 60, 245, .15);
transform: rotate(2deg);
z-index: 2
}
.landing-page .pricing-hero-preview-badge {
font-family: var(--f-mono);
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--violet);
background: var(--vio-lo);
border: 1px solid rgba(91, 60, 245, .2);
border-radius: 100px;
padding: .2rem .65rem;
display: inline-block;
margin-bottom: .75rem
}
.landing-page .pricing-hero-preview-save {
position: absolute;
top: -10px;
right: 12px;
font-family: var(--f-mono);
font-size: .55rem;
letter-spacing: .06em;
text-transform: uppercase;
background: var(--violet);
color: #fff;
padding: .25rem .6rem;
border-radius: 100px
}
.landing-page .pricing-hero-preview-price {
font-family: var(--f-head);
font-size: 2rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -.02em;
line-height: 1
}
.landing-page .pricing-hero-preview-label {
font-size: .8rem;
color: var(--muted);
margin-top: .35rem
}
.landing-page #pricing-section {
background: var(--off);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem)
}
.landing-page #pricing-section .pricing-section-head {
text-align: center;
max-width: 640px;
margin: 0 auto 2.75rem
}
.landing-page #pricing-section .pricing-section-head h2 {
font-family: var(--f-disp);
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--ink);
margin-bottom: .5rem
}
.landing-page #pricing-section .pricing-section-head h2 em {
font-style: italic;
color: var(--violet)
}
.landing-page #pricing-section .pricing-section-head p {
color: var(--muted);
font-size: 1rem;
margin: 0;
line-height: 1.7
}
.landing-page .plan-badge {
background: var(--vio-lo) !important;
color: var(--violet) !important;
border: 1px solid rgba(91, 60, 245, .2)
}
.landing-page .plan-title {
color: var(--ink) !important;
font-family: var(--f-head)
}
.landing-page .plan-price {
color: var(--violet) !important
}
.landing-page .plan-price span {
color: var(--muted) !important
}
.landing-page .plan-features li {
color: var(--ink2) !important;
border-color: var(--border) !important
}
.landing-page .plan-features i {
color: var(--green) !important
}
.landing-page .savings-badge {
background: linear-gradient(135deg, var(--violet), var(--vio-dark)) !important
}
.landing-page .btn-monthly,
.landing-page .btn-yearly {
background: var(--violet) !important;
border: none !important;
border-radius: var(--r) !important;
font-family: var(--f-head);
font-weight: 700
}
.landing-page .btn-monthly:hover,
.landing-page .btn-yearly:hover {
background: var(--vio-dark) !important;
box-shadow: 0 6px 22px var(--vio-glow)
}
.landing-page .btn-yearly {
background: linear-gradient(135deg, #7c5ff7, var(--violet)) !important
}
.landing-page #blog-sections {
background: var(--off);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem)
}
.landing-page #blog-sections .blog-section-head {
text-align: center;
max-width: 640px;
margin: 0 auto 2.5rem
}
.landing-page #blog-sections .blog-section-head h2 {
font-family: var(--f-disp);
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--ink);
margin-bottom: .5rem
}
.landing-page #blog-sections .blog-section-head p {
color: var(--muted);
font-size: 1rem;
margin: 0
}
.landing-page #blog-sections .card {
border: 1px solid var(--border) !important;
border-radius: var(--r2) !important;
box-shadow: 0 4px 20px rgba(18, 17, 42, .05) !important;
background: var(--white) !important;
transition: all .25s
}
.landing-page #blog-sections .card:hover {
border-color: rgba(91, 60, 245, .25) !important;
box-shadow: 0 12px 36px rgba(91, 60, 245, .1) !important;
/* transform: translateY(-3px) */
}
.landing-page #blog-sections .blog-img {
border-radius: var(--r2) var(--r2) 0 0 !important
}
.landing-page #blog-sections .text-title {
color: var(--ink) !important;
font-family: var(--f-head);
font-weight: 700
}
.landing-page #blog-sections .text-blog-desc {
color: var(--muted) !important
}
.landing-page #blog-sections .btn-read-more {
color: var(--violet) !important;
font-weight: 600
}
.landing-page .blog-list-pagination .pagination .page-link {
color: var(--violet) !important;
border-color: var(--border) !important;
border-radius: var(--r) !important
}
.landing-page .blog-list-pagination .pagination .active .page-link {
background: var(--violet) !important;
border-color: var(--violet) !important;
color: #fff !important
}
.landing-page #blog-detail-section {
background: var(--white);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem)
}
.landing-page #blog-detail-section .blog-back {
color: var(--violet) !important;
font-weight: 600;
text-decoration: none
}
.landing-page #blog-detail-section .blogImgWrapper {
border-radius: var(--r2);
overflow: hidden;
margin-bottom: 1.5rem
}
.landing-page #blog-detail-section .blogImgWrapper img {
border-radius: var(--r2)
}
.landing-page #blog-detail-section .heading-title {
text-align: left;
color: var(--ink)
}
.landing-page #blog-detail-section .desc-text {
color: var(--ink2)
}
.landing-page #blog-detail-section .cat-text span {
border-color: var(--violet) !important;
color: var(--violet) !important
}
.landing-page #blog-detail-section .publish-date {
color: var(--muted) !important
}
.landing-page #phoneModal .modal-content {
border-radius: var(--r2);
border: 1px solid var(--border)
}
.landing-page #phoneModal .modal-title {
color: var(--ink);
font-family: var(--f-head)
}
.landing-page #phoneModal .btn-primary {
background: var(--violet) !important;
border-color: var(--violet) !important
}
@media(max-width:600px) {
.landing-page .pricing-grid {
grid-template-columns: 1fr;
max-width: 400px
}
.landing-page .pricing-card.featured {
transform: none
}
.landing-page .pricing-card.featured:hover {
/* transform: translateY(-4px) */
}
.landing-page .pricing-hero-stack {
max-width: 280px
}
.landing-page .pricing-hero-preview:first-child {
transform: rotate(-2deg) translateX(-4%)
}
.landing-page .pricing-hero-preview--featured {
width: 92%;
top: 1.5rem
}
.landing-page #blog-sections .col-12 {
max-width: 100%
}
}
/* ================================================================
INNER PAGE HERO - Modern Design (usecase, terms, privacy)
Matches homepage theme - Fully responsive
================================================================ */
body.landing-page .page-hero{
position:relative;overflow:hidden;
padding-top:calc(80px + clamp(2rem,5vw,3.5rem));
padding-bottom:clamp(3rem,7vw,5rem);
background:linear-gradient(180deg,#FBFAFF 0%,var(--off) 100%);
border-bottom:1px solid var(--border);
isolation:isolate;
}
body.landing-page .ph-mesh{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 55% 50% at 12% 15%, rgba(91,60,245,.14) 0%, transparent 62%),
radial-gradient(ellipse 45% 40% at 88% 8%, rgba(91,60,245,.10) 0%, transparent 58%),
radial-gradient(ellipse 60% 50% at 60% 100%, rgba(91,60,245,.09) 0%, transparent 60%);
animation:ph-mesh-drift 18s ease-in-out infinite;
}
@keyframes ph-mesh-drift{
0%,100%{background-position:0 0,0 0,0 0}
50%{background-position:16px -12px,-12px 16px,8px 8px}
}
body.landing-page .ph-dotgrid{
position:absolute;top:16%;left:5%;width:130px;height:130px;
background-image:radial-gradient(var(--muted2) 1.4px,transparent 1.4px);
background-size:14px 14px;opacity:.55;pointer-events:none;z-index:0;
}
body.landing-page .page-hero-inner{
position:relative;z-index:1;
max-width:1280px;margin:0 auto;
padding:0 clamp(1.25rem,5vw,3rem);
display:flex;align-items:center;justify-content:space-between;
gap:clamp(2rem,5vw,4rem);
text-align:left;
}
body.landing-page .ph-content{ flex:1 1 480px;max-width:560px; }
body.landing-page .page-hero-eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:#fff;border:1px solid var(--border2);
border-radius:100px;padding:.4rem 1.05rem;
font-family:var(--f-mono);font-size:.65rem;font-weight:500;
letter-spacing:.12em;color:var(--violet);text-transform:uppercase;
margin-bottom:1.75rem;
box-shadow:0 2px 10px rgba(18,17,42,.04);
}
body.landing-page .page-hero-eyebrow .dot{
width:6px;height:6px;border-radius:50%;background:var(--violet);
flex-shrink:0;animation:ph-blink 2s ease infinite;
}
@keyframes ph-blink{0%,100%{opacity:1}50%{opacity:.3}}
body.landing-page .page-hero .hero-heading-title{
font-family:var(--f-disp)!important;
font-size:clamp(2.2rem,4.8vw,3.6rem)!important;
font-weight:400!important;line-height:1.12!important;
letter-spacing:-.02em!important;color:var(--ink)!important;
margin:0 0 1.4rem!important;padding:0!important;
}
body.landing-page .page-hero .hero-heading-title span{
background:linear-gradient(100deg,var(--violet) 0%,#8B72FF 55%,var(--violet) 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-style:italic;display:inline;
}
body.landing-page .page-hero .hero-desc{
font-family:var(--f-body);font-size:clamp(.98rem,1.6vw,1.08rem);
color:var(--ink2);line-height:1.7;max-width:460px;
margin:0 0 2.1rem;padding:0;
}
body.landing-page .ph-cta-row{
display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem;
}
body.landing-page .page-hero .btn-lg-primary{
font-family:var(--f-head);font-size:.9rem;font-weight:700;
color:#fff!important;background:var(--violet);border:none;
border-radius:var(--r);padding:.9rem 1.9rem;text-decoration:none;
display:inline-flex;align-items:center;gap:.6rem;
transition:all .22s cubic-bezier(.4,0,.2,1);cursor:pointer;
box-shadow:0 8px 24px rgba(91,60,245,.25);
}
body.landing-page .page-hero .btn-lg-primary:hover{
background:var(--vio-dark);transform:translateY(-2px);
box-shadow:0 12px 32px var(--vio-glow);color:#fff!important;
}
body.landing-page .ph-cta-ghost{
font-family:var(--f-head);font-size:.88rem;font-weight:600;
color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
padding:.9rem .4rem;border-bottom:1px solid var(--border2);
}
body.landing-page .ph-cta-ghost:hover{ border-color:var(--violet);color:var(--violet) }
body.landing-page .ph-trust{ display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap; }
body.landing-page .ph-trust-item{ display:flex;flex-direction:column;gap:.15rem; }
body.landing-page .ph-trust-n{
font-family:var(--f-mono);font-size:1.15rem;font-weight:600;color:var(--ink);
}
body.landing-page .ph-trust-l{
font-family:var(--f-body);font-size:.7rem;color:var(--muted);
text-transform:uppercase;letter-spacing:.05em;
}
body.landing-page .ph-trust-divider{ width:1px;height:28px;background:var(--border2) }
/* ── visual: 3D-tilted glass mockup, light version ──────────── */
body.landing-page .ph-visual{
position:relative;flex:1 1 460px;max-width:560px;
display:flex;align-items:center;justify-content:center;
perspective:1600px;
}
body.landing-page .ph-glow-ring{
position:absolute;inset:4%;border-radius:50%;
background:radial-gradient(circle,var(--vio-lo) 0%,transparent 70%);
pointer-events:none;
}
body.landing-page .ph-card{
position:relative;z-index:2;width:100%;
background:#fff;border:1px solid var(--border);
border-radius:var(--r2);overflow:hidden;
box-shadow:0 30px 70px rgba(18,17,42,.14), 0 4px 16px rgba(18,17,42,.06);
transform:rotateY(-9deg) rotateX(4deg);
transition:transform .4s ease;
}
body.landing-page .ph-visual:hover .ph-card{ transform:rotateY(-4deg) rotateX(2deg); }
body.landing-page .ph-browser-bar{
display:flex;align-items:center;gap:6px;
padding:.7rem .9rem;background:var(--ink);
border-bottom:1px solid var(--border);
}
body.landing-page .ph-dot{ width:8px;height:8px;border-radius:50%;background:var(--border2) }
body.landing-page .ph-dot:nth-child(1) {background: #ff5955;}
body.landing-page .ph-dot:nth-child(2) {background: #f6b23c;}
body.landing-page .ph-dot:nth-child(3) {background: #1ec144;}
body.landing-page .ph-url{
margin-left:1rem;display:inline-flex;align-items:center;gap:.4rem;
background:#464849;border:1px solid #464849;
border-radius:100px;padding:.28rem .8rem;font-family:var(--f-mono);
font-size:.68rem;color:var(--off);
}
body.landing-page .ph-url svg{ color:var(--off);flex-shrink:0 }
body.landing-page .ph-browser-body{ line-height:0;background:var(--off) }
body.landing-page .ph-browser-body img{
width:100%;height:auto;display:block;object-fit:cover;
max-height:380px;object-position:center top;
}
body.landing-page .ph-float{
position:absolute;z-index:3;display:flex;align-items:center;gap:6px;
background:#fff;border:1px solid var(--border);
border-radius:100px;padding:.5rem .9rem;
box-shadow:0 14px 32px rgba(18,17,42,.12);
font-family:var(--f-mono);font-size:.7rem;font-weight:600;
color:var(--ink2);animation:ph-float 4.5s ease-in-out infinite;
}
body.landing-page .ph-float-live{ top:-14px;left:-14px }
body.landing-page .ph-float-live .htw-live{
width:6px;height:6px;border-radius:50%;background:#16A34A;
box-shadow:0 0 6px #16A34A;animation:ph-blink 1.5s ease infinite;
}
body.landing-page .ph-float-time{ bottom:-14px;right:-10px;color:var(--ink);animation-delay:.4s; }
body.landing-page .ph-float-time small{
color:var(--muted);font-weight:400;text-transform:uppercase;
letter-spacing:.06em;margin-left:.15rem;
}
@keyframes ph-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* ── responsive ───────────────────────────────── */
@media(max-width:1040px){
body.landing-page .page-hero-inner{ flex-direction:column;text-align:center }
body.landing-page .ph-content{ max-width:640px }
body.landing-page .hero-desc{ margin-left:auto;margin-right:auto }
body.landing-page .ph-cta-row{ justify-content:center }
body.landing-page .ph-trust{ justify-content:center }
body.landing-page .ph-visual{ max-width:520px }
body.landing-page .ph-card{ transform:none }
body.landing-page .ph-visual:hover .ph-card{ transform:none }
}
@media(max-width:700px){
body.landing-page .page-hero{ padding-top:calc(60px + 1.5rem) }
body.landing-page .ph-dotgrid{ display:none }
body.landing-page .ph-trust-divider{ display:none }
body.landing-page .ph-trust{ gap:1rem 1.5rem }
body.landing-page .ph-float{ padding:.4rem .75rem;font-size:.62rem }
body.landing-page .ph-float-live{ top:-10px;left:-8px }
body.landing-page .ph-float-time{ bottom:-10px;right:-6px }
}
@media(max-width:480px){
body.landing-page .ph-float-time{ display:none }
body.landing-page .ph-browser-bar{ padding:.55rem .7rem }
body.landing-page .ph-url{ font-size:.6rem;padding:.22rem .6rem }
}
@media(prefers-reduced-motion:reduce){
body.landing-page .ph-float,
body.landing-page .page-hero-eyebrow .dot,
body.landing-page .ph-float-live .htw-live,
body.landing-page .ph-mesh{ animation:none }
body.landing-page .ph-card{ transition:none }
}
/* ================================================================
PRICING PAGE - Clean Modern Design
Simple, elegant, matches violet theme - Fully responsive
================================================================ */
/* Pricing Hero */
body.landing-page .pricing-hero {
padding-bottom: clamp(2rem, 4vw, 3rem);
}
/* Pricing Section */
body.landing-page .pricing-section {
background: var(--off);
padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem);
}
body.landing-page .pricing-container {
max-width: 1100px;
margin: 0 auto;
}
/* Pricing Intro */
body.landing-page .pricing-intro {
text-align: center;
max-width: 640px;
margin: 0 auto 4rem;
}
body.landing-page .pricing-intro h2 {
font-family: var(--f-disp);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 400;
color: var(--ink);
margin: 0 0 1rem;
letter-spacing: -0.02em;
}
body.landing-page .pricing-intro p {
font-family: var(--f-body);
font-size: 1.05rem;
color: var(--muted);
margin: 0;
}
/* Pricing Grid */
body.landing-page .pricing-grid {
display: grid;
/* grid-template-columns: repeat(2, 1fr); */
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
/* max-width: 900px; */
max-width: 1280px;
margin: 0 auto 4rem;
}
/* Pricing Card */
body.landing-page .pricing-card {
background: var(--white);
border: 2px solid var(--border);
border-radius: 16px;
padding: 2.5rem 2rem;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
}
body.landing-page .pricing-card:last-child {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgb(91 60 245 / 11%) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(91, 60, 245, 0.15);
border-radius: 20px;
box-shadow: 0 12px 40px rgba(91, 60, 245, 0.08), 0 4px 16px rgba(91, 60, 245, 0.04);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
width: 100%;
}
body.landing-page .pricing-card:hover {
border-color: var(--violet);
box-shadow: 0 12px 40px rgba(91, 60, 245, 0.12);
/* transform: translateY(-4px); */
}
/* Popular Card */
body.landing-page .pricing-card-popular {
border-color: var(--violet);
box-shadow: 0 8px 32px rgba(91, 60, 245, 0.1);
}
body.landing-page .pricing-card-popular:hover {
box-shadow: 0 16px 48px rgba(91, 60, 245, 0.18);
}
/* Popular Badge */
body.landing-page .popular-badge {
position: absolute;
top: -14px;
right: 2rem;
width: fit-content;
background: var(--violet);
color: #fff;
font-family: var(--f-head);
font-size: 0.75rem;
font-weight: 700;
padding: 0.4rem 1rem;
border-radius: 100px;
display: flex;
align-items: center;
gap: 0.4rem;
box-shadow: 0 4px 12px rgba(91, 60, 245, 0.3);
}
body.landing-page .popular-badge svg {
width: 14px;
height: 14px;
}
/* Card Top */
body.landing-page .pricing-card-top {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
/* Plan Meta */
body.landing-page .plan-meta {
margin-bottom: 2rem;
}
body.landing-page .plan-name {
font-family: var(--f-head);
font-size: 1.5rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 0.5rem;
}
body.landing-page .plan-description {
font-family: var(--f-body);
font-size: 0.95rem;
color: var(--muted);
margin: 0;
}
/* Plan Pricing */
body.landing-page .plan-pricing {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
body.landing-page .price-amount {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
body.landing-page .currency {
font-family: var(--f-head);
font-size: 1.5rem;
font-weight: 600;
color: var(--violet);
}
body.landing-page .amount {
font-family: var(--f-head);
font-size: 3.5rem;
font-weight: 800;
color: var(--violet);
line-height: 1;
letter-spacing: -0.02em;
}
body.landing-page .period {
font-family: var(--f-body);
font-size: 1rem;
color: var(--muted);
font-weight: 500;
}
body.landing-page .price-note {
font-family: var(--f-body);
font-size: 0.9rem;
color: var(--muted2);
}
/* Features */
body.landing-page .pricing-card-features {
flex: 1;
margin-bottom: 2rem;
}
body.landing-page .features-heading {
font-family: var(--f-head);
font-size: 0.75rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 1.5rem;
}
body.landing-page .features-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
body.landing-page .features-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-family: var(--f-body);
font-size: 0.95rem;
color: var(--ink2);
}
body.landing-page .check-icon {
width: 20px;
height: 20px;
color: var(--violet);
flex-shrink: 0;
margin-top: 0.1rem;
}
/* Pricing Button */
body.landing-page .pricing-card-action {
margin-top: auto;
}
body.landing-page .pricing-btn {
font-family: var(--f-head);
font-size: 1rem;
font-weight: 700;
padding: 1rem 2rem;
border-radius: 10px;
border: none;
cursor: pointer;
transition: all 0.25s ease;
width: 100%;
text-align: center;
text-decoration: none;
display: inline-block;
}
body.landing-page .pricing-btn-outline {
background: transparent;
border: 2px solid var(--violet);
color: var(--violet);
}
body.landing-page .pricing-btn-outline:hover {
background: var(--violet);
color: #fff;
/* transform: translateY(-2px); */
box-shadow: 0 8px 24px rgba(91, 60, 245, 0.25);
}
body.landing-page .pricing-btn-primary {
background: var(--violet);
color: #fff;
border: 2px solid var(--violet);
box-shadow: 0 4px 16px rgba(91, 60, 245, 0.25);
}
body.landing-page .pricing-btn-primary:hover {
background: var(--vio-dark);
border-color: var(--vio-dark);
/* transform: translateY(-2px); */
box-shadow: 0 8px 28px rgba(91, 60, 245, 0.35);
}
/* Pricing Perks */
body.landing-page .pricing-perks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
body.landing-page .pricing-perk-item {
display: flex;
align-items: center;
gap: 0.5rem;
line-height: normal;
font-family: var(--f-body);
font-size: 0.9rem;
color: var(--muted);
}
body.landing-page .perk-icon {
width: 20px;
height: 20px;
color: var(--violet);
flex-shrink: 0;
}
body.landing-page .perk-icon svg {
width: 100%;
height: 100%;
}
/* Responsive - Tablet Landscape */
@media (max-width: 991px) {
body.landing-page .pricing-section {
padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem);
}
body.landing-page .pricing-intro {
margin-bottom: 3.5rem;
}
body.landing-page .pricing-grid {
gap: 1.75rem;
grid-template-columns: repeat(2, 1fr);
}
body.landing-page .pricing-card {
padding: 2.25rem 1.75rem;
}
}
/* Responsive - Tablet Portrait */
@media (max-width: 768px) {
body.landing-page .pricing-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
max-width: 520px;
}
body.landing-page .pricing-card {
padding: 2rem 1.75rem;
}
body.landing-page .amount {
font-size: 3rem;
}
body.landing-page .popular-badge {
right: 50%;
transform: translateX(50%);
}
body.landing-page .pricing-perks {
gap: 1rem;
margin-top: 2.5rem;
}
body.landing-page .pricing-perk-item {
font-size: 0.85rem;
}
}
/* Responsive - Mobile */
@media (max-width: 480px) {
body.landing-page .pricing-section {
padding: clamp(2.5rem, 5vw, 4rem) 1rem;
}
body.landing-page .pricing-intro {
margin-bottom: 3rem;
}
body.landing-page .pricing-intro h2 {
font-size: 1.75rem;
}
body.landing-page .pricing-intro p {
font-size: 0.95rem;
}
body.landing-page .pricing-grid {
gap: 2rem;
max-width: 100%;
}
body.landing-page .pricing-card {
padding: 1.75rem 1.25rem;
}
body.landing-page .plan-name {
font-size: 1.35rem;
}
body.landing-page .currency {
font-size: 1.25rem;
}
body.landing-page .amount {
font-size: 2.75rem;
}
body.landing-page .pricing-btn {
font-size: 0.95rem;
padding: 0.95rem 1.75rem;
}
body.landing-page .features-list {
gap: 0.875rem;
}
body.landing-page .features-list li {
font-size: 0.9rem;
}
body.landing-page .popular-badge {
font-size: 0.7rem;
padding: 0.35rem 0.85rem;
right: 5rem;
}
body.landing-page .pricing-perks {
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: 2rem;
padding-top: 1.5rem;
}
}
/* Small Mobile */
@media (max-width: 375px) {
body.landing-page .pricing-card {
padding: 1.5rem 1rem;
}
body.landing-page .plan-name {
font-size: 1.25rem;
}
body.landing-page .amount {
font-size: 2.5rem;
}
body.landing-page .pricing-btn {
font-size: 0.9rem;
padding: 0.85rem 1.5rem;
}
body.landing-page .popular-badge {
font-size: 0.65rem;
padding: 0.3rem 0.7rem;
}
}
/* ================================================================
BLOG PAGES - Clean Modern Design
Matches violet theme - Fully responsive
================================================================ */
/* Blog List Page */
body.landing-page .blog-section {
background: var(--white);
padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem);
}
body.landing-page .blog-container {
max-width: 1200px;
margin: 0 auto;
}
/* Blog Grid */
body.landing-page .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
/* Blog Card */
body.landing-page .blog-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
cursor: pointer;
}
body.landing-page .blog-card:hover {
border-color: var(--violet);
box-shadow: 0 12px 40px rgba(91, 60, 245, 0.12);
/* transform: translateY(-4px); */
}
body.landing-page .blog-card-image {
width: 100%;
height: 220px;
overflow: hidden;
background: var(--off);
}
body.landing-page .blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
body.landing-page .blog-card:hover .blog-card-image img {
transform: scale(1.05);
}
body.landing-page .blog-card-content {
padding: 1.75rem;
display: flex;
flex-direction: column;
flex: 1;
}
body.landing-page .blog-card-meta {
margin-bottom: 0.75rem;
}
body.landing-page .blog-date {
font-family: var(--f-body);
font-size: 0.85rem;
color: var(--muted);
display: block;
}
body.landing-page .blog-category {
font-family: var(--f-mono);
font-size: 0.7rem;
font-weight: 600;
color: var(--violet);
background: var(--vio-lo);
padding: 0.35rem 0.85rem;
border-radius: 100px;
letter-spacing: 0.05em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 1rem;
width: fit-content;
}
body.landing-page .blog-card-title {
font-family: var(--f-head);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 0.75rem;
line-height: 1.3;
}
body.landing-page .blog-card-excerpt {
font-family: var(--f-body);
font-size: 0.95rem;
color: var(--ink2);
line-height: 1.6;
margin: 0 0 1.5rem;
flex: 1;
}
body.landing-page .blog-card-link {
font-family: var(--f-head);
font-size: 0.9rem;
font-weight: 600;
color: var(--violet);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.3s ease;
}
body.landing-page .blog-card-link svg {
width: 14px;
height: 14px;
}
body.landing-page .blog-card:hover .blog-card-link {
gap: 0.75rem;
}
/* Blog Pagination */
body.landing-page .blog-pagination {
display: flex;
justify-content: center;
}
body.landing-page .pagination-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
body.landing-page .pagination-item {
display: block;
}
body.landing-page .pagination-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
font-family: var(--f-head);
font-size: 0.9rem;
font-weight: 600;
color: var(--ink2);
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
}
body.landing-page .pagination-link svg {
width: 14px;
height: 14px;
}
body.landing-page .pagination-link:hover {
background: var(--vio-lo);
border-color: var(--violet);
color: var(--violet);
}
body.landing-page .pagination-item.active .pagination-link {
background: var(--violet);
border-color: var(--violet);
color: #fff;
}
body.landing-page .pagination-item.disabled .pagination-link {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Blog Detail Page */
body.landing-page .page-hero-compact {
padding-bottom: clamp(2rem, 4vw, 3rem);
}
body.landing-page .blog-back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--f-head);
font-size: 0.9rem;
font-weight: 600;
color: var(--violet);
text-decoration: none;
margin-bottom: 1.5rem;
transition: gap 0.3s ease;
}
body.landing-page .blog-back-link svg {
width: 14px;
height: 14px;
}
body.landing-page .blog-back-link:hover {
gap: 0.35rem;
}
body.landing-page .blog-detail-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 1.5rem;
}
body.landing-page .meta-date {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--f-body);
font-size: 0.9rem;
color: var(--muted);
}
body.landing-page .meta-date svg {
width: 16px;
height: 16px;
}
body.landing-page .blog-detail-section {
background: var(--white);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}
body.landing-page .blog-detail-container {
max-width: 820px;
margin: 0 auto;
}
body.landing-page .blog-detail-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
margin-bottom: 3rem;
box-shadow: 0 8px 32px rgba(18, 17, 42, 0.08);
}
body.landing-page .blog-detail-image img {
width: 100%;
height: auto;
display: block;
}
body.landing-page .blog-detail-content {
font-family: var(--f-body);
font-size: 1.05rem;
line-height: 1.8;
color: var(--ink2);
}
body.landing-page .blog-detail-content h2,
body.landing-page .blog-detail-content h3,
body.landing-page .blog-detail-content h4 {
font-family: var(--f-head);
color: var(--ink);
margin: 2.5rem 0 1rem;
}
body.landing-page .blog-detail-content h2 {
font-size: 2rem;
font-weight: 700;
}
body.landing-page .blog-detail-content h3 {
font-size: 1.5rem;
font-weight: 700;
}
body.landing-page .blog-detail-content h4 {
font-size: 1.25rem;
font-weight: 600;
}
body.landing-page .blog-detail-content p {
margin-bottom: 1.25rem;
}
body.landing-page .blog-detail-content a {
color: var(--violet);
text-decoration: underline;
}
body.landing-page .blog-detail-content a:hover {
text-decoration: none;
}
body.landing-page .blog-detail-content ul,
body.landing-page .blog-detail-content ol {
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
body.landing-page .blog-detail-content li {
margin-bottom: 0.5rem;
}
body.landing-page .blog-detail-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 2rem 0;
}
body.landing-page .blog-detail-content blockquote {
border-left: 4px solid var(--violet);
background: var(--vio-lo);
padding: 1.5rem;
margin: 2rem 0;
border-radius: 8px;
font-style: italic;
}
body.landing-page .blog-detail-content code {
font-family: var(--f-mono);
font-size: 0.9em;
background: var(--off);
padding: 0.2rem 0.5rem;
border-radius: 4px;
color: var(--violet);
}
body.landing-page .blog-detail-content pre {
background: var(--ink);
color: #fff;
padding: 1.5rem;
border-radius: 12px;
overflow-x: auto;
margin: 2rem 0;
}
body.landing-page .blog-detail-content pre code {
background: transparent;
color: #fff;
padding: 0;
}
/* Responsive */
@media (max-width: 768px) {
body.landing-page .blog-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
body.landing-page .blog-card-image {
height: 200px;
}
body.landing-page .blog-detail-content {
font-size: 1rem;
}
}
@media (max-width: 480px) {
body.landing-page .blog-card-content {
padding: 1.5rem;
}
body.landing-page .blog-card-title {
font-size: 1.15rem;
}
body.landing-page .pagination-link {
min-width: 36px;
height: 36px;
font-size: 0.85rem;
}
}
body.landing-page .page-content {
background: var(--white);
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}
body.landing-page .page-content-inner {
max-width: 820px;
margin: 0 auto;
color: var(--ink2);
font-size: 0.95rem;
line-height: 1.8;
}
body.landing-page .page-content-inner h2 {
font-family: var(--f-disp);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 400;
color: var(--ink);
margin: 0 0 1rem;
padding: 0;
}
body.landing-page .page-content-inner h3 {
font-family: var(--f-head);
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin: 2rem 0 0.75rem;
padding: 0;
}
body.landing-page .page-content-inner p {
margin-bottom: 1rem;
color: var(--ink2);
}
body.landing-page .page-content-inner ul.list {
padding-left: 1.25rem;
margin-bottom: 1rem;
}
body.landing-page .page-content-inner ul.list li {
list-style: disc;
color: var(--ink2);
margin-bottom: 0.5rem;
display: list-item;
}
body.landing-page .page-content-inner code {
font-family: var(--f-mono);
font-size: 0.85em;
background: var(--off);
padding: 0.15rem 0.4rem;
border-radius: 4px;
color: var(--violet);
}
/* Responsive page content */
@media (max-width: 768px) {
body.landing-page .page-content {
padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
}
body.landing-page .page-content-inner {
font-size: 0.9rem;
}
body.landing-page .page-content-inner h2 {
font-size: clamp(1.25rem, 5vw, 1.75rem);
}
body.landing-page .page-content-inner h3 {
font-size: 1rem;
}
}
body.landing-page .page-head {
text-align: center;
max-width: 640px;
margin: 0 auto 3rem
}
body.landing-page .page-head .eyebrow {
justify-content: center
}
body.landing-page .page-head .eyebrow::after {
content: '';
width: 16px;
height: 1.5px;
background: var(--violet)
}
body.landing-page .page-head h2 {
margin-bottom: .75rem
}
body.landing-page .page-head p {
color: var(--ink2);
margin: 0;
line-height: 1.75
}
body.landing-page #pricing-section {
background: var(--off)
}
body.landing-page .pricing-section-head {
text-align: center;
max-width: 640px;
margin: 0 auto 2.75rem
}
body.landing-page .pricing-section-head h2 {
font-family: var(--f-disp);
font-size: clamp(2rem, 4vw, 2.75rem);
color: var(--ink)
}
body.landing-page .pricing-hero-stack {
position: relative;
max-width: 340px;
margin: 0 auto
}
body.landing-page .plan-title {
font-family: var(--f-head) !important;
color: var(--ink) !important;
font-size: 1.5rem !important
}
body.landing-page .plan-price {
font-family: var(--f-head) !important;
color: var(--violet) !important;
font-size: 2.5rem !important
}
body.landing-page .plan-price span {
color: var(--muted) !important;
font-size: .9rem !important
}
body.landing-page .plan-features li {
color: var(--ink2) !important;
border-color: var(--border) !important
}
body.landing-page .plan-features i {
color: var(--violet) !important
}
body.landing-page .btn-monthly,
body.landing-page .btn-yearly {
background: var(--violet) !important;
border: none !important;
border-radius: var(--r) !important;
font-family: var(--f-head) !important;
font-weight: 700 !important;
color: #fff !important;
padding: .85rem 1.5rem !important;
transition: all .2s !important
}
body.landing-page .btn-monthly:hover,
body.landing-page .btn-yearly:hover {
background: var(--vio-dark) !important;
box-shadow: 0 6px 22px var(--vio-glow) !important;
/* transform: translateY(-1px) */
}
body.landing-page #blog-sections {
background: var(--off)
}
body.landing-page #blog-sections .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem
}
body.landing-page #blog-sections .card {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r2) !important;
box-shadow: none !important;
transition: border-color .2s, box-shadow .2s, transform .2s
}
body.landing-page #blog-sections .card:hover {
border-color: rgba(91, 60, 245, .25) !important;
box-shadow: 0 8px 32px rgba(91, 60, 245, .08) !important;
/* transform: translateY(-3px) */
}
body.landing-page #blog-sections .blog-img {
border-radius: var(--r2) var(--r2) 0 0 !important
}
body.landing-page #blog-sections .card-title.text-title {
font-family: var(--f-head);
color: var(--ink) !important;
font-size: 1.05rem;
font-weight: 700
}
body.landing-page #blog-sections .text-blog-desc {
color: var(--muted) !important;
font-size: .875rem
}
body.landing-page #blog-sections .btn-read-more {
color: var(--violet) !important;
font-weight: 600;
font-size: .875rem
}
body.landing-page .blog-list-pagination .pagination .page-link {
color: var(--violet);
border-color: var(--border);
border-radius: var(--r) !important;
margin: 0 2px
}
body.landing-page .blog-list-pagination .pagination .active .page-link {
background: var(--violet) !important;
border-color: var(--violet) !important;
color: #fff !important
}
body.landing-page #blog-detail-section {
background: var(--white)
}
body.landing-page #blog-detail-section .blogImgWrapper {
border-radius: var(--r2);
overflow: hidden;
margin-bottom: 0
}
body.landing-page #blog-detail-section .blogImgWrapper img {
border-radius: var(--r2) !important;
object-fit: cover
}
body.landing-page #blog-detail-section .contentWrapper .cat-text span {
border-color: var(--violet);
color: var(--violet);
font-family: var(--f-mono);
font-size: .7rem;
letter-spacing: .06em
}
body.landing-page #blog-detail-section .publish-date {
color: var(--muted) !important
}
body.landing-page #blog-detail-section .heading-title {
font-family: var(--f-disp);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
color: var(--ink) !important;
text-align: left
}
body.landing-page #blog-detail-section .desc-text {
color: var(--ink2) !important
}
body.landing-page #blog-detail-section .desc-text h1,
body.landing-page #blog-detail-section .desc-text h2,
body.landing-page #blog-detail-section .desc-text h3,
body.landing-page #blog-detail-section .desc-text h4 {
color: var(--ink) !important
}
body.landing-page #blog-detail-section a.text-primary {
color: var(--violet) !important;
font-weight: 600;
text-decoration: none
}
.text-primary {
color: var(--violet) !important;
}
body.landing-page #phoneModal .modal-content {
border-radius: var(--r2);
border: 1px solid var(--border)
}
body.landing-page #phoneModal .btn-primary {
background: var(--violet);
border-color: var(--violet)
}
@media(max-width:700px) {
body.landing-page .pricing-grid {
grid-template-columns: 1fr;
max-width: 400px
}
body.landing-page #blog-sections .blog-grid {
grid-template-columns: 1fr
}
}
/* APP THEME - controller, profile, admin, timer accents */
body.app-theme {
background: var(--off, #F6F6F8);
color: var(--ink, #12112A);
font-family: var(--f-body, 'General Sans', sans-serif);
font-size: 16px;
line-height: 1.6
}
body.app-theme h1,
body.app-theme h2,
body.app-theme h3,
body.app-theme h4,
body.app-theme h5,
body.app-theme h6 {
color: var(--ink, #12112A)
}
/* body.app-theme .text-dark {
color: var(--ink, #12112A) !important
}
body.app-theme .text-muted {
color: var(--muted, #8E8BAA) !important
} */
body.app-theme main header {
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border, #E8E6F0);
padding-top: .5rem;
padding-bottom: .5rem
}
body.app-theme .js-unnamed-btn {
color: var(--violet, #5B3CF5) !important;
font-family: var(--f-head, 'Manrope', sans-serif)
}
body.app-theme .btn-primary {
background-color: var(--violet, #5B3CF5) !important;
border-color: var(--violet, #5B3CF5) !important;
color: #fff !important;
border-radius: var(--r, 8px) !important;
font-family: var(--f-head, 'Manrope', sans-serif);
font-weight: 600
}
body.app-theme .btn-primary:hover {
background-color: var(--vio-dark, #3D22D4) !important;
border-color: var(--vio-dark, #3D22D4) !important;
color: #fff !important
}
body.app-theme .btn-soft-primary {
color: var(--violet, #5B3CF5) !important;
background-color: var(--vio-lo, #EEE9FF) !important;
border: 1px solid rgba(91, 60, 245, .15) !important;
border-radius: 999px !important;
font-weight: 500
}
body.app-theme .btn-soft-primary:hover {
background-color: var(--violet, #5B3CF5) !important;
color: #fff !important;
border-color: var(--violet, #5B3CF5) !important
}
body.app-theme .btn-muted {
background: var(--white, #fff) !important;
border: 1px solid var(--border2, #D4D1E8) !important;
color: var(--ink2, #3A3857) !important;
border-radius: var(--r, 8px);
font-weight: 500
}
body.app-theme .btn-muted:hover {
border-color: var(--violet, #5B3CF5) !important;
color: var(--violet, #5B3CF5) !important;
background: var(--vio-lo, #EEE9FF) !important
}
body.app-theme .btn-muted#open-url {
color: var(--v2-violet) !important;
background: rgba(91, 60, 245, .1) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(91, 60, 245, .22) !important;
border-radius: 999px !important;
font-weight: 600;
}
body.app-theme .btn-muted#open-url i {
color: var(--v2-violet) !important;
}
body.app-theme .btn-lg-primary {
background: var(--violet, #5B3CF5) !important;
border: none !important;
border-radius: var(--r, 8px) !important;
font-family: var(--f-head, 'Manrope', sans-serif);
font-weight: 700;
color: #fff !important;
padding: .85rem 1.5rem !important
}
body.app-theme .btn-lg-primary:hover {
background: var(--vio-dark, #3D22D4) !important;
box-shadow: 0 6px 22px var(--vio-glow, rgba(91, 60, 245, .25));
color: #fff !important
}
body.app-theme .card {
background: var(--white, #fff) !important;
border: 1px solid var(--border, #E8E6F0) !important;
border-radius: var(--r2, 14px) !important;
box-shadow: 0 4px 24px rgba(18, 17, 42, .05) !important;
color: var(--ink2, #3A3857)
}
body.app-theme .card .card-header {
background: transparent !important;
border-color: var(--border, #E8E6F0) !important;
}
body.app-theme .card-title {
font-family: var(--f-head, 'Manrope', sans-serif);
font-weight: 700;
color: var(--ink, #12112A) !important
}
body.app-theme .profilePage,
body.app-theme .app-shell {
background: var(--off, #F6F6F8);
min-height: 100vh
}
body.app-theme .profilePage h3 {
/* font-family: var(--f-disp, 'DM Serif Display', serif); */
font-weight: 400;
font-size: clamp(1.75rem, 3vw, 2.25rem)
}
body.app-theme .profilePage .main-page-pre-title{
font-family: var(--f-mono, 'JetBrains Mono', monospace);
font-size: .75rem;
letter-spacing: .12em;
font-weight: 700;
text-transform: uppercase;
color: var(--violet, #5B3CF5) !important
}
body.app-theme .profilePage h3.main-page-title {
background: linear-gradient(100deg, var(--violet) 0%, #8B72FF 55%, var(--violet) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
font-style: italic;
display: inline;
font-family: var(--f-disp) !important;
}
body.app-theme .profilePage .btn-soft-primary {
border-radius: var(--v2-r) !important;
}
body.app-theme .profilePage h3.active-plan-name {
background: linear-gradient(100deg, var(--violet) 0%, #8B72FF 55%, var(--violet) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
display: inline;
font-family: var(--f-disp) !important;
}
body.app-theme .profilePage .active-plan-badge .badge {
font-size: .875rem;
}
body.app-theme .profilePage h6 {
/* font-family: var(--f-mono, 'JetBrains Mono', monospace);
font-size: .8rem;
letter-spacing: .12em;
font-weight: 700;
text-transform: uppercase;
color: var(--violet, #5B3CF5) !important */
font-family: var(--v2-f-head);
font-weight: 500;
/* font-size: .82rem; */
font-size: 1rem;
color: var(--v2-ink) !important;
}
body.app-theme form.profileForm .btn-submit,
body.app-theme form.billingForm .btn-submit {
background: var(--violet, #5B3CF5) !important;
border: none !important;
border-radius: var(--r, 8px) !important;
font-family: var(--f-head, 'Manrope', sans-serif);
font-weight: 700
}
body.app-theme form.profileForm .btn-submit:hover,
body.app-theme form.billingForm .btn-submit:hover {
background: var(--vio-dark, #3D22D4) !important;
box-shadow: 0 6px 22px var(--vio-glow, rgba(91, 60, 245, .25))
}
body.app-theme form.profileForm input.form-control,
body.app-theme form.profileForm select.form-select,
body.app-theme form.billingForm input.form-control,
body.app-theme form.billingForm select.form-select,
body.app-theme form.createBlogForm input.form-control,
body.app-theme form.createBlogForm select.form-select,
body.app-theme form.editBlogForm input.form-control,
body.app-theme form.editBlogForm select.form-select {
background: var(--white, #fff) !important;
border: 1px solid var(--border2, #D4D1E8) !important;
border-radius: var(--r, 8px) !important;
color: var(--ink, #12112A) !important
}
body.app-theme form.profileForm input.form-control:focus,
body.app-theme form.billingForm input.form-control:focus {
/* box-shadow: 0 0 0 3px var(--vio-lo, #EEE9FF) !important; */
border-color: var(--violet, #5B3CF5) !important
}
body.app-theme .upload-container {
background: var(--vio-lo, #EEE9FF) !important;
border-color: var(--border, #E8E6F0) !important
}
body.app-theme .profilePicture::after {
background-color: var(--violet, #5B3CF5) !important
}
body.app-theme .table-responsive table thead {
background: var(--off, #F6F6F8) !important
}
body.app-theme .table-responsive table thead tr th {
color: var(--ink, #12112A) !important;
font-family: var(--f-head, 'Manrope', sans-serif)
}
body.app-theme .table-responsive table tbody tr td {
color: var(--ink2, #3A3857) !important;
border-color: var(--border, #E8E6F0) !important
}
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button {
color: var(--violet, #5B3CF5) !important
}
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button.current,
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button:hover {
background: var(--violet, #5B3CF5) !important;
border-color: var(--violet, #5B3CF5) !important;
color: #fff !important
}
nav.admin-blog-list-pagination .pagination .page-link {
background: transparent;
border: none;
color: var(--violet, #5B3CF5) !important;
font-size: 14px !important;
font-weight: 500;
padding: 8px 16px !important;
border-radius: 8px;
}
nav.admin-blog-list-pagination .pagination .page-link.previous,
nav.admin-blog-list-pagination .pagination .page-link.next {
font-size: 20px !important;
line-height: 1;
min-height: 40px;
border-radius: 8px !important;
}
nav.admin-blog-list-pagination .pagination .page-item.active .page-link {
color: #fff !important;
background: var(--violet, #5B3CF5) !important;
border-color: var(--violet, #5B3CF5) !important;
}
nav.admin-blog-list-pagination .pagination .page-link:hover {
background: var(--violet, #5B3CF5) !important;
border-color: var(--violet, #5B3CF5) !important;
color: #fff !important;
}
body.app-theme .dropdown-menu {
border: 1px solid var(--border, #E8E6F0);
border-radius: var(--r, 8px);
box-shadow: 0 8px 24px rgba(18, 17, 42, .08)
}
body.app-theme .dropdown-item:hover {
background: var(--vio-lo, #EEE9FF);
color: var(--violet, #5B3CF5)
}
body.app-theme .form-check-input:checked {
background-color: var(--violet, #5B3CF5) !important;
border-color: var(--violet, #5B3CF5) !important
}
body.app-theme .modal-content {
border-radius: var(--r2, 14px);
border: 1px solid var(--border, #E8E6F0)
}
body.app-theme .modal-header {
border-color: var(--border, #E8E6F0)
}
body.app-theme .modal-title {
font-family: var(--f-head, 'Manrope', sans-serif);
color: var(--ink, #12112A);
font-weight: 600;
}
body.app-theme .timer-name-wrapper p#timer-name {
color: var(--violet, #5B3CF5) !important
}
body.app-theme .preview-wrapper .preViewTitle,
body.app-theme .preview-wrapper h6 {
color: var(--violet, #5B3CF5) !important
}
body.app-theme .badge-muted {
background: var(--vio-lo, #EEE9FF) !important;
color: var(--violet, #5B3CF5) !important
}
body.app-theme.bg-timer {
background-color: #0d141d !important
}
body.app-theme.bg-timer .btn-soft-primary {
color: #fff !important;
background: rgba(91, 60, 245, .25) !important;
border-color: rgba(91, 60, 245, .4) !important
}
body.app-theme.bg-timer .btn-soft-primary:hover {
background: var(--violet, #5B3CF5) !important
}
body.app-theme.bg-timer .editDeviceDivision {
box-shadow: 0 8px 24px rgba(91, 60, 245, .12) inset !important
}
body.app-theme .alert-success {
background: var(--green-lo, #DCFCE7);
border-color: rgba(22, 163, 74, .2);
color: var(--green, #16A34A);
border-radius: var(--r, 8px)
}
body.app-theme .alert-danger {
background: #FEF2F2;
border-color: rgba(220, 38, 38, .2);
color: #991B1B;
border-radius: var(--r, 8px)
}
body.app-theme .nav-tabs .nav-link.active {
color: var(--violet, #5B3CF5) !important;
border-color: var(--border, #E8E6F0) var(--border, #E8E6F0) var(--white, #fff) !important
}
body.app-theme .nav-tabs .nav-link {
color: var(--muted, #8E8BAA)
}
body.landing-page .app-result-card {
border: 1px solid var(--border) !important;
border-radius: var(--r2) !important;
box-shadow: 0 8px 32px rgba(18, 17, 42, .08) !important
}
body.landing-page .app-result-card .card-title {
font-family: var(--f-head);
color: var(--ink) !important
}
body.landing-page #payment-return-section {
background: var(--off)
}
/* @media(max-width:991px) {
body.app-theme main header .col-12.text-end,
body.app-theme .profilePage .d-flex.justify-content-end {
justify-content: flex-start !important;
margin-top: .75rem
}
} */
@media(max-width:767px) {
body.app-theme .profilePage .btn,
body.app-theme .app-shell .btn {
width: 100%;
justify-content: center;
margin-bottom: .5rem
}
body.app-theme main header .d-flex {
flex-wrap: wrap;
gap: .5rem
}
body.app-theme .table-responsive {
font-size: .875rem
}
}
/* Custom design updates for app-theme inputs & DataTables search inputs */
body.app-theme .form-control,
body.app-theme .form-select {
background: var(--white, #fff) !important;
border: 1px solid var(--border2, #D4D1E8) !important;
border-radius: var(--r, 8px) !important;
color: var(--ink, #12112A) !important;
}
body.app-theme .form-control:focus,
body.app-theme .form-select:focus {
/* box-shadow: 0 0 0 3px var(--vio-lo, #EEE9FF) !important; */
border-color: var(--violet, #5B3CF5) !important;
}
body.app-theme div.dt-container .dt-search input,
body.app-theme div.dt-container select.dt-input {
background-color: var(--white, #fff) !important;
border: 1px solid var(--border2, #D4D1E8) !important;
border-radius: var(--r, 8px) !important;
color: var(--ink, #12112A) !important;
padding: 8px 12px !important;
}
body.app-theme div.dt-container .dt-search input:focus,
body.app-theme div.dt-container select.dt-input:focus {
box-shadow: 0 0 0 3px var(--vio-lo, #EEE9FF) !important;
border-color: var(--violet, #5B3CF5) !important;
outline: none !important;
}
/* ==========================================================================
STYLE-V2.CSS - Glassmorphism Edition
Applies to: Controller, Profile, Timer (viewer) pages
Built on top of existing classes - NO markup/backend changes required.
Same violet brand tokens, frosted-glass panels, glowing accents.
========================================================================== */
:root {
--v2-white: #FFF;
--v2-off: #F3F1FA;
--v2-ink: #12112A;
--v2-ink2: #3A3857;
--v2-muted: #8E8BAA;
--v2-muted2: #C5C3D8;
--v2-violet: #5B3CF5;
--v2-vio-lo: #EEE9FF;
--v2-vio-mid: rgba(91, 60, 245, .18);
--v2-vio-glow: rgba(91, 60, 245, .35);
--v2-vio-dark: #3D22D4;
--v2-green: #16A34A;
--v2-green-lo: #DCFCE7;
--v2-danger: #DC2626;
--v2-danger-lo: #FEF2F2;
--v2-border: rgba(91, 60, 245, .12);
--v2-glass: rgba(255, 255, 255, .55);
--v2-glass-strong: rgba(255, 255, 255, .72);
--v2-r: 12px;
--v2-r2: 20px;
--v2-r3: 28px;
--v2-blur: blur(18px);
--v2-f-disp: 'DM Serif Display', Georgia, serif;
--v2-f-head: 'Manrope', sans-serif;
--v2-f-body: 'Public Sans', sans-serif;
--v2-f-mono: 'JetBrains Mono', monospace;
--v2-transition: all .25s cubic-bezier(.4, 0, .2, 1);
}
/* ===== Fixes: laggy/hanging UI on actions ===== */
*,
*::before,
*::after {
/* transition: none !important; */
/* animation: none !important; */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
will-change: auto !important;
}
/* ==========================================================================
GLOBAL BACKDROP - animated gradient mesh
========================================================================== */
body.app-theme {
font-family: var(--v2-f-body) !important;
-webkit-font-smoothing: antialiased;
color: var(--v2-ink) !important;
min-height: 100vh;
background: linear-gradient(160deg, #FBF9FF 0%, #F4EFFC 100%) !important;
/* background:
radial-gradient(circle at 12% 8%, rgba(91, 60, 245, 0.10) 0%, transparent 48%),
radial-gradient(circle at 88% 18%, rgba(124, 95, 247, 0.08) 0%, transparent 50%),
radial-gradient(circle at 50% 100%, rgba(91, 60, 245, 0.06) 0%, transparent 55%),
linear-gradient(160deg, #F9F7FC 0%, #F2EEFB 45%, #EDE8FA 100%) !important; */
background-attachment: fixed;
}
body.app-theme::before,
body.app-theme::after {
content: '';
position: fixed;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(2px);
}
body.app-theme::before {
top: -180px;
right: -160px;
width: 460px;
height: 460px;
background: radial-gradient(circle, rgba(91, 60, 245, .28) 0%, transparent 70%);
animation: v2-float 22s ease-in-out infinite;
}
body.app-theme::after {
bottom: -200px;
left: -160px;
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(124, 95, 247, .22) 0%, transparent 70%);
animation: v2-float 26s ease-in-out infinite reverse;
}
@keyframes v2-float {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-40px, 30px) scale(1.08);
}
}
body.app-theme main {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
body.app-theme::before,
body.app-theme::after {
animation: none;
}
}
/* ==========================================================================
GLASS PANEL MIXIN
========================================================================== */
body.app-theme main header,
body.app-theme .card,
/* body.app-theme .modal-content, */
/* body.app-theme .dropdown-menu, */
body.app-theme .timerPreviewDivision,
body.app-theme #accordion .card,
body.app-theme #devicesAccordion .card {
background: var(--v2-glass) !important;
backdrop-filter: var(--v2-blur) saturate(180%);
-webkit-backdrop-filter: var(--v2-blur) saturate(180%);
border: 1px solid rgba(255, 255, 255, .6) !important;
}
/* ==========================================================================
HEADER
========================================================================== */
body.app-theme main header {
border-radius: 0 0 var(--v2-r2) var(--v2-r2);
box-shadow: 0 8px 32px rgba(91, 60, 245, .08);
padding-top: 1rem !important;
padding-bottom: 1rem !important;
/* position: sticky;
top: 0;
z-index: 50; */
}
body.app-theme .js-unnamed-btn {
font-family: var(--v2-f-head) !important;
font-size: 1.3rem !important;
font-weight: 800 !important;
color: var(--v2-ink) !important;
letter-spacing: -.01em;
border-radius: var(--v2-r) !important;
/* padding: .4rem .8rem !important; */
transition: var(--v2-transition);
background: rgba(255, 255, 255, .4);
}
body.app-theme .js-unnamed-btn:hover {
background: var(--v2-vio-lo) !important;
color: var(--v2-violet) !important;
box-shadow: 0 4px 16px var(--v2-vio-mid);
}
/* ==========================================================================
BUTTONS
========================================================================== */
body.app-theme .btn {
font-family: var(--v2-f-head);
font-weight: 600;
border-radius: 999px !important;
transition: var(--v2-transition);
letter-spacing: -.005em;
border-width: 1px;
}
body.app-theme .btn-primary,
body.app-theme .btn-lg-primary {
background: linear-gradient(135deg, var(--v2-violet), var(--v2-vio-dark)) !important;
border: none !important;
color: #fff !important;
font-weight: 700;
border-radius: var(--v2-r) !important;
box-shadow: 0 6px 22px rgba(91, 60, 245, .32);
}
body.app-theme .btn-primary:hover,
body.app-theme .btn-lg-primary:hover {
box-shadow: 0 10px 32px var(--v2-vio-glow) !important;
/* transform: translateY(-2px); */
filter: brightness(1.05);
}
body.app-theme .btn-soft-primary {
color: var(--v2-violet) !important;
background: rgba(91, 60, 245, .1) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(91, 60, 245, .22) !important;
border-radius: 999px !important;
font-weight: 600;
}
body.app-theme .btn-soft-primary:hover {
background: var(--v2-violet) !important;
color: #fff !important;
border-color: var(--v2-violet) !important;
/* transform: translateY(-2px); */
box-shadow: 0 8px 22px var(--v2-vio-glow);
}
body.app-theme .btn-muted {
background: rgba(255, 255, 255, .5) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .7) !important;
color: var(--v2-ink2) !important;
border-radius: var(--v2-r) !important;
font-weight: 500;
}
body.app-theme .btn-muted:hover {
border-color: var(--v2-violet) !important;
color: var(--v2-violet) !important;
background: var(--v2-vio-lo) !important;
/* transform: translateY(-2px); */
}
body.app-theme .btn-danger {
background: linear-gradient(135deg, var(--v2-danger), #B91C1C) !important;
border: none !important;
border-radius: var(--v2-r) !important;
font-weight: 700;
box-shadow: 0 6px 20px rgba(220, 38, 38, .28);
}
body.app-theme .btn-danger:hover {
/* transform: translateY(-2px); */
box-shadow: 0 10px 28px rgba(220, 38, 38, .35);
}
body.app-theme .btn-secondary {
background: rgba(255, 255, 255, .5) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .7) !important;
color: var(--v2-ink2) !important;
border-radius: var(--v2-r) !important;
font-weight: 600;
}
body.app-theme .btn-secondary:hover {
border-color: var(--v2-muted) !important;
color: var(--v2-ink) !important;
}
/* ==========================================================================
CARDS — frosted panels
========================================================================== */
body.app-theme .card {
border-radius: var(--v2-r2) !important;
/* box-shadow: 0 8px 32px rgba(91, 60, 245, .07) !important; */
transition: var(--v2-transition);
background: rgba(255, 255, 255, 0.78) !important;
border-color: rgba(91, 60, 245, 0.12) !important;
box-shadow: 0 4px 16px rgba(91, 60, 245, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
body.app-theme .card:hover {
box-shadow: 0 14px 44px rgba(91, 60, 245, .12) !important;
/* transform: translateY(-2px); */
}
body.app-theme .card .card-header {
background: transparent !important;
/* border-color: rgba(91, 60, 245, .1) !important ; */
border-color: rgba(91, 60, 245, .2) !important;
border-radius: var(--v2-r2) var(--v2-r2) 0 0 !important;
}
body.app-theme .card .card-footer {
background: transparent !important;
}
body.app-theme .card-title,
body.app-theme .card-title.text-dark {
font-family: var(--v2-f-head) !important;
font-weight: 800 !important;
/* color: var(--v2-ink) !important; */
color: var(--violet, #5B3CF5) !important;
letter-spacing: -.01em;
}
body.app-theme .profilePage .card-title,
body.app-theme .profilePage .card-title.text-dark {
color: var(--v2-ink) !important;
font-weight: 700 !important;
}
body.app-theme .card.section.dashboard {
border-radius: var(--v2-r2) !important;
box-shadow: 0 10px 40px rgba(91, 60, 245, .1) !important;
}
/* ==========================================================================
TIMER PREVIEW WIDGET — dark glass island
========================================================================== */
body.app-theme .timerPreviewDivision {
background: linear-gradient(155deg, rgba(18, 17, 42, .92), rgba(61, 34, 212, .85)) !important;
backdrop-filter: var(--v2-blur);
border: 1px solid rgba(255, 255, 255, .08) !important;
border-radius: var(--v2-r2) !important;
overflow: hidden;
z-index: 0;
position: relative;
box-shadow: 0 14px 40px rgba(18, 17, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.app-theme .timerPreviewDivision::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(196, 181, 253, .4) 0%, transparent 70%);
pointer-events: none;
}
body.app-theme .preview-wrapper {
position: relative;
z-index: 1;
}
body.app-theme .preview-wrapper .preViewTitle,
body.app-theme .preview-wrapper h6 {
color: #C4B5FD !important;
font-family: var(--v2-f-mono) !important;
letter-spacing: .08em;
}
body.app-theme .preview-wrapper h6.text-muted {
color: rgba(255, 255, 255, .35) !important;
font-family: var(--v2-f-mono) !important;
font-size: .62rem !important;
letter-spacing: .14em !important;
text-transform: uppercase;
}
body.app-theme .timerView h2 {
font-family: var(--v2-f-mono) !important;
font-weight: 500 !important;
color: #fff !important;
font-size: clamp(2.25rem, 1.5rem + 3vw, 5rem) !important;
letter-spacing: .04em;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 28px rgba(196, 181, 253, .4);
}
body.app-theme .preview-wrapper .new-tab-preview {
background: rgba(255, 255, 255, .1) !important;
border: 1px solid rgba(255, 255, 255, .15) !important;
border-radius: var(--v2-r) !important;
backdrop-filter: blur(6px);
}
body.app-theme .preview-wrapper .new-tab-preview:hover {
background: var(--v2-violet) !important;
}
body.app-theme #progress-container {
background: rgba(255, 255, 255, .1);
overflow: hidden;
height: 20px !important;
}
/* ==========================================================================
TIME CONTROL BUTTON GROUP
========================================================================== */
body.app-theme .time-btn-group {
position: relative;
z-index: 11;
}
body.app-theme .time-btn-group .btn {
border-radius: var(--v2-r) !important;
font-weight: 700;
}
body.app-theme .input-group .add-time {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body.app-theme .input-group .add-time+.dropdown-toggle {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 12px !important;
border-bottom-right-radius: 12px !important;
}
body.app-theme .time-btn-group .input-group .btn {
border-radius: var(--v2-r);
}
body.app-theme .time-btn-group .input-group:first-child .dropdown-toggle:first-child {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body.app-theme .time-btn-group .input-group .subtract-time {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* ==========================================================================
ACCORDIONS
========================================================================== */
body.app-theme #accordion .card,
body.app-theme #devicesAccordion .card {
border-radius: var(--v2-r) !important;
/* box-shadow: none !important; */
background: rgba(255, 255, 255, 0.78) !important;
border-color: rgba(91, 60, 245, 0.12) !important;
box-shadow: 0 4px 16px rgba(91, 60, 245, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
body.app-theme #accordion .card-header,
body.app-theme #devicesAccordion .card-header {
border-radius: var(--v2-r) !important;
padding: .55rem .95rem !important;
}
body.app-theme #accordion .card-body,
body.app-theme #devicesAccordion .card-body {
border-top: 1px solid var(--v2-border) !important;
}
body.app-theme #devicesAccordion .card-body {
padding: 20px 16px;
}
/* body.app-theme .devices-list li {
background: rgba(255, 255, 255, .55);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .6);
border-radius: var(--v2-r);
padding: .55rem .9rem;
margin-bottom: .4rem;
font-size: .82rem;
display: flex;
align-items: center;
justify-content: space-between;
} */
/* ==========================================================================
FORM CONTROLS
========================================================================== */
body.app-theme .form-control.timer-seconds,
body.app-theme .form-control.timer-minutes {
text-align: center;
}
body.app-theme .form-control.timer-seconds,
body.app-theme .form-control.timer-minutes,
body.app-theme .form-control.timer-name {
height: 34px;
max-height: 34px;
border-radius: 8px !important;
}
body.app-theme .form-control,
body.app-theme .form-select,
body.app-theme select.form-select,
body.app-theme textarea.form-control {
font-family: var(--v2-f-body) !important;
background: rgba(255, 255, 255, .6) !important;
backdrop-filter: blur(6px);
border: 1.5px solid rgba(91, 60, 245, .15) !important;
border-radius: var(--v2-r) !important;
color: var(--v2-ink) !important;
font-size: .9rem;
transition: var(--v2-transition);
}
body.app-theme .form-control:focus,
body.app-theme .form-select:focus {
border-color: var(--v2-violet) !important;
/* box-shadow: 0 0 0 4px var(--v2-vio-mid) !important; */
background: var(--v2-white) !important;
outline: none;
}
body.app-theme .form-label {
font-family: var(--v2-f-head);
font-weight: 600;
/* font-size: .82rem; */
font-size: .875rem;
color: var(--v2-ink2) !important;
}
body.app-theme .form-check-input:checked {
background-color: var(--v2-violet) !important;
border-color: var(--v2-violet) !important;
}
/* body.app-theme .form-check-input:focus {
box-shadow: 0 0 0 4px var(--v2-vio-mid) !important;
} */
body.app-theme form.profileForm select.form-select {
outline: none !important;
box-shadow: none !important;
}
body.app-theme .form-switch .form-check-input {
width: 2.4em;
height: 1.3em;
}
/* ==========================================================================
DROPDOWNS
========================================================================== */
body.app-theme .dropdown-menu {
border-radius: var(--v2-r) !important;
box-shadow: 0 16px 48px rgba(91, 60, 245, .16) !important;
/* padding: .45rem !important; */
/* background-color: var(--v2-glass) !important; */
}
body.app-theme .dropdown-item {
border-radius: 10px !important;
font-size: .8rem;
padding: .40rem .8rem !important;
/* transition: var(--v2-transition); */
}
body.app-theme .dropdown-item:hover,
body.app-theme .dropdown-item:focus {
background: var(--v2-vio-lo) !important;
color: var(--v2-violet) !important;
border-radius: 0px !important;
}
/* ==========================================================================
MODALS
========================================================================== */
body.app-theme .modal-content {
/* border-radius: var(--v2-r2) !important; */
box-shadow: 0 24px 64px rgba(91, 60, 245, .2) !important;
}
body.app-theme .modal-header,
body.app-theme .modal-footer {
border-color: rgba(91, 60, 245, .1) !important;
}
/* body.app-theme .modal-title {
font-family: var(--v2-f-head) !important;
font-weight: 800 !important;
color: var(--v2-ink) !important;
} */
.modal-backdrop.show {
display: none !important;
}
/* ==========================================================================
TABS
========================================================================== */
body.app-theme .nav-tabs {
border-bottom: 1px solid var(--v2-border) !important;
gap: .3rem;
}
body.app-theme .nav-tabs .nav-link {
color: var(--v2-muted) !important;
font-family: var(--v2-f-head);
font-weight: 600;
border: none !important;
border-radius: var(--v2-r) var(--v2-r) 0 0 !important;
padding: .6rem 1.15rem !important;
transition: var(--v2-transition);
}
body.app-theme .nav-tabs .nav-link:hover {
color: var(--v2-violet) !important;
background: var(--v2-vio-lo) !important;
}
body.app-theme .nav-tabs .nav-link.active {
color: var(--v2-violet) !important;
background: var(--v2-vio-lo) !important;
border-bottom: 2px solid var(--v2-violet) !important;
}
/* ==========================================================================
PROFILE PAGE
========================================================================== */
body.app-theme .profilePage {
background: transparent !important;
}
/* body.app-theme .profilePage h3 {
font-family: var(--v2-f-disp) !important;
font-weight: 400 !important;
font-size: clamp(1.9rem, 3.5vw, 2.6rem) !important;
color: var(--v2-ink) !important;
letter-spacing: -.01em;
} */
/* body.app-theme .profilePage h6.text-muted {
font-family: var(--v2-f-mono) !important;
font-size: .65rem !important;
letter-spacing: .16em !important;
text-transform: uppercase;
color: var(--v2-violet) !important;
}*/
/* body.app-theme .profilePage .card {
padding: 1.9rem !important;
} */
body.app-theme .upload-container {
background: rgba(91, 60, 245, .08) !important;
backdrop-filter: blur(10px);
border: 2px dashed rgba(91, 60, 245, .3) !important;
border-radius: var(--v2-r3) !important;
transition: var(--v2-transition);
position: relative;
overflow: visible !important;
}
body.app-theme .upload-container:hover {
border-color: var(--v2-violet) !important;
background: rgba(91, 60, 245, .14) !important;
box-shadow: 0 0 0 6px var(--v2-vio-mid);
}
body.app-theme .profilePicture::after {
background-color: var(--v2-violet) !important;
bottom: -6px;
right: -6px;
}
body.app-theme .uploaded-image {
border-radius: var(--v2-r3) !important;
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0;
left: 0;
object-fit: cover;
opacity: 0;
}
body.app-theme form.profileForm input.form-control,
body.app-theme form.profileForm select.form-select,
body.app-theme form.billingForm input.form-control,
body.app-theme form.billingForm select.form-select {
background: rgba(255, 255, 255, .6) !important;
border: 1.5px solid rgba(91, 60, 245, .15) !important;
border-radius: var(--v2-r) !important;
}
body.app-theme form.profileForm input.form-control:disabled {
background: rgba(255, 255, 255, .3) !important;
color: var(--v2-muted) !important;
}
body.app-theme form.profileForm .btn-submit,
body.app-theme form.billingForm .btn-submit {
background: linear-gradient(135deg, var(--v2-violet), var(--v2-vio-dark)) !important;
border: none !important;
border-radius: var(--v2-r) !important;
font-family: var(--v2-f-head) !important;
font-weight: 700 !important;
box-shadow: 0 6px 22px rgba(91, 60, 245, .3);
}
body.app-theme form.profileForm .btn-submit:hover,
body.app-theme form.billingForm .btn-submit:hover {
box-shadow: 0 10px 30px var(--v2-vio-glow) !important;
/* transform: translateY(-2px); */
}
/* Tables */
body.app-theme .table-responsive {
border-radius: var(--v2-r) !important;
/* overflow: hidden; */
border: none !important;
box-shadow: none !important;
background: none !important;
/* backdrop-filter: blur(8px); */
}
body.app-theme .table-responsive table.invoice-tbl .badge {
font-size: 0.625rem;
font-weight: 700;
}
body.app-theme .table-responsive table.invoice-tbl .btn-download {
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
}
body.app-theme .table-responsive table.invoice-tbl thead {
background: rgb(236 232 254) !important;
}
body.app-theme .table-responsive table thead tr th {
color: var(--v2-ink) !important;
font-family: var(--v2-f-head) !important;
font-weight: 700 !important;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .05em;
border-bottom: 1px solid var(--v2-border) !important;
}
body.app-theme .table-responsive table tbody tr td {
color: var(--v2-ink2) !important;
border-color: var(--v2-border) !important;
font-size: .88rem;
vertical-align: middle;
}
body.app-theme .table-responsive table tbody tr:hover {
background: rgba(91, 60, 245, .04);
}
body.app-theme .bg-success-soft {
background: var(--v2-green-lo) !important;
color: var(--v2-green) !important;
font-weight: 600;
border-radius: 100px;
padding: .35rem .85rem;
}
body.app-theme .bg-warning-soft {
background: rgba(255, 193, 7, .1) !important;
color: #ffc107 !important;
font-weight: 600;
border-radius: 100px;
padding: .35rem .85rem;
}
body.app-theme .bg-danger-soft {
background: var(--v2-danger-lo) !important;
color: var(--v2-danger) !important;
font-weight: 600;
border-radius: 100px;
padding: .35rem .85rem;
}
body.app-theme .card.shadow-sm {
border-color: rgba(220, 38, 38, .18) !important;
}
/* ==========================================================================
ALERTS
========================================================================== */
body.app-theme .alert-success {
background: var(--v2-green-lo) !important;
border: 1px solid rgba(22, 163, 74, .2) !important;
color: var(--v2-green) !important;
border-radius: var(--v2-r) !important;
font-weight: 500;
}
body.app-theme .alert-danger {
background: var(--v2-danger-lo) !important;
border: 1px solid rgba(220, 38, 38, .2) !important;
color: var(--v2-danger) !important;
border-radius: var(--v2-r) !important;
font-weight: 500;
}
/* ==========================================================================
TIMER VIEWER PAGE — deep-space glass stage
========================================================================== */
body.app-theme.bg-timer {
background:
radial-gradient(circle at 15% 15%, rgba(91, 60, 245, .35) 0%, transparent 45%),
radial-gradient(circle at 85% 85%, rgba(124, 95, 247, .25) 0%, transparent 45%),
linear-gradient(160deg, #0A0E1A 0%, #0d0a1f 100%) !important;
background-attachment: fixed;
min-height: 100vh;
color: #fff;
}
body.app-theme.bg-timer main header,
body.app-theme.bg-timer .card,
body.app-theme.bg-timer #accordion .card,
body.app-theme.bg-timer #devicesAccordion .card {
background: rgba(255, 255, 255, .04) !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, .3) !important;
}
body.app-theme.bg-timer #stage-name {
font-family: var(--v2-f-head) !important;
font-weight: 800 !important;
letter-spacing: -.01em;
color: #fff !important;
}
body.app-theme.bg-timer .timer-name-wrapper p#timer-name {
font-family: var(--v2-f-mono) !important;
font-size: .85rem !important;
letter-spacing: .1em;
text-transform: uppercase;
color: #C4B5FD !important;
background: rgba(91, 60, 245, .14);
backdrop-filter: blur(10px);
border: 1px solid rgba(196, 181, 253, .25);
border-radius: 100px;
padding: .4rem 1.2rem;
display: inline-block;
box-shadow: 0 0 24px rgba(91, 60, 245, .25);
}
body.app-theme.bg-timer .editDeviceDivision {
border-radius: 999px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(91, 60, 245, .15) !important;
overflow: hidden;
}
body.app-theme.bg-timer .editDeviceDivision .form-control {
background: rgba(255, 255, 255, .05) !important;
border: none !important;
color: #fff !important;
border-radius: 999px 0 0 999px !important;
padding-left: 1.2rem !important;
}
body.app-theme.bg-timer .editDeviceDivision .form-control::placeholder {
color: rgba(255, 255, 255, .35);
}
body.app-theme.bg-timer .editDeviceDivision .btn-muted {
background: rgba(255, 255, 255, .05) !important;
border: none !important;
color: rgba(255, 255, 255, .65) !important;
border-radius: 0 999px 999px 0 !important;
}
body.app-theme.bg-timer .btn-muted:not(.editDeviceDivision .btn-muted) {
background: rgba(255, 255, 255, .06) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .1) !important;
color: rgba(255, 255, 255, .8) !important;
border-radius: var(--v2-r) !important;
}
body.app-theme.bg-timer .btn-muted:not(.editDeviceDivision .btn-muted):hover {
background: var(--v2-violet) !important;
border-color: var(--v2-violet) !important;
color: #fff !important;
box-shadow: 0 8px 24px var(--v2-vio-glow);
}
body.app-theme.bg-timer .btn-soft-primary {
color: #fff !important;
background: rgba(91, 60, 245, .2) !important;
backdrop-filter: blur(8px);
border: 1px solid rgba(196, 181, 253, .3) !important;
}
body.app-theme.bg-timer .btn-soft-primary:hover {
background: var(--v2-violet) !important;
box-shadow: 0 8px 24px var(--v2-vio-glow);
}
/* Big timer output — glass stage card */
body.app-theme.bg-timer #timer-output {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
}
body.app-theme.bg-timer #timer-time {
font-family: var(--v2-f-mono) !important;
font-weight: 600 !important;
font-size: clamp(4rem, 18vw, 13rem) !important;
letter-spacing: .02em;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 80px rgba(124, 95, 247, .55), 0 0 24px rgba(196, 181, 253, .4);
}
body.app-theme.bg-timer #timer-time.warn {
color: #FBD05C !important;
text-shadow: 0 0 80px rgba(251, 208, 92, .5);
}
body.app-theme.bg-timer #timer-time.crit {
color: #F87171 !important;
text-shadow: 0 0 80px rgba(248, 113, 113, .55);
animation: v2-crit-pulse .9s ease infinite;
}
@keyframes v2-crit-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: .6;
}
}
body.app-theme.bg-timer #no-timer {
font-family: var(--v2-f-head) !important;
color: rgba(255, 255, 255, .35) !important;
font-weight: 700 !important;
letter-spacing: .05em;
}
body.app-theme.bg-timer #message {
font-family: var(--v2-f-body) !important;
font-size: clamp(1rem, 2.5vw, 1.5rem);
color: rgba(255, 255, 255, .75);
margin-top: 1.5rem;
}
body.app-theme.bg-timer #progress-container {
max-width: 920px;
width: 100%;
margin: 2.5rem auto 0;
height: 25px !important;
background: rgba(255, 255, 255, .08);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
body.app-theme.bg-timer #progress-indicator,
body.app-theme.bg-timer #progress-gradient {
box-shadow: 0 0 16px var(--v2-vio-glow);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1199px) {
body.app-theme.bg-timer #timer-time {
font-size: clamp(3.5rem, 16vw, 9rem) !important;
}
}
@media (max-width: 991px) {
body.app-theme main header .col-12.text-end {
justify-content: flex-start !important;
margin-top: .75rem;
}
body.app-theme .card.section.dashboard {
margin-bottom: 1.25rem;
}
body.app-theme.bg-timer #header>div {
margin-bottom: .5rem;
}
body.app-theme.bg-timer #timer-output {
border-radius: var(--v2-r2);
margin: 0 .5rem;
}
}
@media (max-width: 767px) {
body.app-theme .profilePage .btn,
body.app-theme .app-shell .btn {
width: 100%;
justify-content: center;
margin-bottom: .5rem;
}
body.app-theme main header {
border-radius: 0 0 var(--v2-r) var(--v2-r);
}
body.app-theme main header .d-flex {
flex-wrap: wrap;
gap: .5rem;
}
body.app-theme .table-responsive {
font-size: .8rem;
}
body.app-theme .profilePage .card {
padding: 1.35rem !important;
}
body.app-theme.bg-timer #timer-time {
font-size: clamp(2.75rem, 18vw, 6rem) !important;
}
body.app-theme.bg-timer .timer-name-wrapper p#timer-name {
font-size: .7rem !important;
padding: .35rem .9rem;
}
body.app-theme .js-unnamed-btn {
font-size: 1.05rem !important;
}
}
@media (max-width: 480px) {
body.app-theme.bg-timer #timer-time {
font-size: clamp(2.25rem, 18vw, 4.5rem) !important;
}
body.app-theme.bg-timer #timer-output {
border-radius: var(--v2-r);
}
body.app-theme .time-btn-group {
gap: .4rem;
}
body.app-theme .time-btn-group>div {
flex: 1 1 auto;
}
body.app-theme .time-btn-group .btn {
width: 100%;
font-size: .8rem;
padding: .5rem .4rem;
}
}
/* ==========================================================================
TIMER VIEWER PAGE — LIGHT THEME (toggle: body.app-theme.bg-timer.light-theme)
========================================================================== */
body.app-theme.bg-timer.light-theme {
background:
radial-gradient(circle at 12% 8%, rgba(91, 60, 245, .22) 0%, transparent 42%),
radial-gradient(circle at 88% 18%, rgba(124, 95, 247, .18) 0%, transparent 45%),
radial-gradient(circle at 50% 100%, rgba(91, 60, 245, .12) 0%, transparent 50%),
linear-gradient(160deg, #F6F4FC 0%, #EFEBFB 45%, #E9E4FA 100%) !important;
background: linear-gradient( 160deg, #F6F4FC 0%, #c5bddc 100% ) !important;
color: var(--v2-ink) !important;
}
body.app-theme.bg-timer.light-theme::before,
body.app-theme.bg-timer.light-theme::after {
display: none;
}
body.app-theme.bg-timer.light-theme main header,
body.app-theme.bg-timer.light-theme .card,
body.app-theme.bg-timer.light-theme #accordion .card,
body.app-theme.bg-timer.light-theme #devicesAccordion .card {
background: var(--v2-glass) !important;
border: 1px solid var(--v2-border) !important;
box-shadow: 0 8px 32px rgba(91, 60, 245, .08) !important;
}
body.app-theme.bg-timer.light-theme #stage-name {
color: var(--v2-ink) !important;
}
body.app-theme.bg-timer.light-theme .timer-name-wrapper p#timer-name {
color: var(--v2-vio-dark) !important;
background: var(--v2-vio-lo);
border: 1px solid var(--v2-border);
box-shadow: 0 0 24px rgba(91, 60, 245, .1);
}
body.app-theme.bg-timer.light-theme .editDeviceDivision {
box-shadow: 0 0 0 1px var(--v2-border), 0 8px 24px rgba(91, 60, 245, .08) !important;
}
body.app-theme.bg-timer.light-theme .editDeviceDivision .form-control {
background: var(--v2-glass-strong) !important;
color: var(--v2-ink) !important;
}
body.app-theme.bg-timer.light-theme .editDeviceDivision .form-control::placeholder {
color: var(--v2-muted);
}
body.app-theme.bg-timer.light-theme .editDeviceDivision .btn-muted {
background: var(--v2-glass-strong) !important;
color: var(--v2-ink2) !important;
}
body.app-theme.bg-timer.light-theme .btn-muted:not(.editDeviceDivision .btn-muted) {
background: var(--v2-glass) !important;
border: 1px solid var(--v2-border) !important;
color: var(--v2-ink2) !important;
}
body.app-theme.bg-timer.light-theme .btn-muted:not(.editDeviceDivision .btn-muted):hover {
background: var(--v2-violet) !important;
border-color: var(--v2-violet) !important;
color: #fff !important;
box-shadow: 0 8px 24px var(--v2-vio-glow);
}
body.app-theme.bg-timer.light-theme #timer-time {
color: var(--v2-ink) !important;
text-shadow: 0 0 60px rgba(91, 60, 245, .18), 0 0 16px rgba(91, 60, 245, .12);
}
body.app-theme.bg-timer.light-theme #timer-time.warn {
color: #B45309 !important;
text-shadow: 0 0 60px rgba(180, 83, 9, .2);
}
body.app-theme.bg-timer.light-theme #timer-time.crit {
color: var(--v2-danger) !important;
text-shadow: 0 0 60px rgba(220, 38, 38, .25);
}
body.app-theme.bg-timer.light-theme #no-timer {
color: var(--v2-muted) !important;
}
body.app-theme.bg-timer.light-theme #message {
color: var(--v2-ink2);
}
body.app-theme.bg-timer.light-theme #progress-container {
background: rgba(91, 60, 245, .08);
box-shadow: inset 0 1px 2px rgba(91, 60, 245, .08);
}
/* Theme toggle button */
body.app-theme.bg-timer #btn-theme-toggle {
position: relative;
}
body.app-theme.bg-timer #btn-theme-toggle .theme-icon-dark {
display: inline-block;
}
body.app-theme.bg-timer #btn-theme-toggle .theme-icon-light {
display: none;
}
body.app-theme.bg-timer.light-theme #btn-theme-toggle .theme-icon-dark {
display: none;
}
body.app-theme.bg-timer.light-theme #btn-theme-toggle .theme-icon-light {
display: inline-block;
}
#accordion .card-header .btn-muted,
#devicesAccordion .card-header .btn-muted {
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
#accordion .card-header .btn-muted:hover,
#devicesAccordion .card-header .btn-muted:hover {
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* ==============================================================
Dashboard Tables Advanced & Responsive Theme Match
============================================================== */
/* Wrapper and Card Design */
.card-tbl {
background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
border: 1px solid rgba(91, 60, 245, 0.15);
border-radius: 16px;
padding: 24px;
box-shadow: 0px 8px 18px 1px rgba(91, 60, 245, 0.05), inset 0px 0px 0px 1px #ffffff;
margin-bottom: 30px;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-tbl::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #5b3cf5 0%, #4837a4 100%);
opacity: 0.8;
}
/* .card-tbl:hover {
box-shadow: 0px 15px 30px 2px rgba(91, 60, 245, 0.1), inset 0px 0px 0px 1px #ffffff;
transform: translateY(-2px);
} */
.card-tbl .card-header {
border-bottom: 0 !important;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.card-tbl .card-header .card-title {
font-size: 1.4rem;
font-weight: 700;
/* background: linear-gradient(90deg, #1e293b 0%, #5b3cf5 100%); */
/* -webkit-background-clip: text; */
/* -webkit-text-fill-color: transparent; */
font-family: 'Jost-Bold', sans-serif;
letter-spacing: 0.5px;
position: relative;
padding-left: 15px;
margin: 0;
padding-bottom: 0px;
}
.card-tbl .card-header .card-title::before {
content: '';
position: absolute;
left: 0;
top: 10%;
height: 80%;
width: 4px;
background-color: #5b3cf5;
border-radius: 4px;
}
/* Responsive Table Wrapper */
.card-tbl .table-responsive {
border: 1px solid rgba(91, 60, 245, 0.1);
border-radius: 12px;
background-color: #ffffff;
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.02);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
/* Custom Scrollbar for Table */
.card-tbl .table-responsive::-webkit-scrollbar {
height: 8px;
}
.card-tbl .table-responsive::-webkit-scrollbar-track {
background-color: rgba(91, 60, 245, 0.05);
border-radius: 4px;
}
.card-tbl .table-responsive::-webkit-scrollbar-thumb {
background-color: rgba(91, 60, 245, 0.3);
border-radius: 4px;
}
.card-tbl .table-responsive::-webkit-scrollbar-thumb:hover {
background-color: rgba(91, 60, 245, 0.6);
}
/* Table Base Design */
.card-tbl .data-tbl {
margin-bottom: 0;
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.card-tbl .data-tbl thead th {
background: rgba(91, 60, 245, 0.05);
color: var(--v2-violet);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 16px 20px;
border-bottom: 2px solid rgba(91, 60, 245, 0.15);
border-top: none;
white-space: nowrap;
text-align: left;
transition: background 0.3s ease;
}
.card-tbl .data-tbl thead th:first-child {
border-top-left-radius: 12px;
}
.card-tbl .data-tbl thead th:last-child {
border-top-right-radius: 12px;
}
.card-tbl .data-tbl thead th.text-center {
text-align: center;
}
/* Table Body Design */
.card-tbl .data-tbl tbody td {
padding: 16px 20px;
vertical-align: middle;
color: #475569;
font-size: 0.95rem;
font-weight: 500;
border-bottom: 1px dashed rgba(91, 60, 245, 0.15);
transition: all 0.2s ease-in-out;
}
.card-tbl .data-tbl tbody tr:last-child td {
border-bottom: none;
}
.card-tbl .data-tbl tbody tr:last-child td:first-child {
border-bottom-left-radius: 12px;
}
.card-tbl .data-tbl tbody tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
.card-tbl .data-tbl tbody tr {
transition: all 0.3s ease;
}
.card-tbl .data-tbl tbody tr:hover {
background-color: rgba(91, 60, 245, 0.02);
/* transform: scale(1.002); */
box-shadow: 0px 4px 10px rgba(91, 60, 245, 0.05);
}
.card-tbl .data-tbl tbody tr:hover td {
color: #1e293b;
border-bottom-color: rgba(91, 60, 245, 0.3);
}
/* DataTables Overrides - Beautiful Controls */
.card-tbl .dataTables_wrapper {
padding-top: 10px;
}
.card-tbl .dataTables_wrapper .dataTables_filter {
margin-bottom: 20px;
}
.card-tbl .dataTables_wrapper .dataTables_filter input {
border: 1px solid rgba(91, 60, 245, 0.2);
border-radius: 20px;
padding: 8px 16px;
outline: none;
margin-left: 8px;
transition: all 0.3s ease;
background-color: #ffffff;
color: #334155;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.02);
}
.card-tbl .dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--v2-violet);
box-shadow: 0 0 0 3px rgba(91, 60, 245, 0.15);
}
.card-tbl .dataTables_wrapper .dataTables_length {
margin-bottom: 20px;
color: #64748b;
font-weight: 500;
}
.card-tbl .dataTables_wrapper .dataTables_length select {
border: 1px solid rgba(91, 60, 245, 0.2);
border-radius: 20px;
padding: 6px 28px 6px 14px;
outline: none;
margin: 0 8px;
color: var(--v2-violet);
background-color: #ffffff;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.card-tbl .dataTables_wrapper .dataTables_length select:focus {
border-color: var(--v2-violet);
box-shadow: 0 0 0 3px rgba(91, 60, 245, 0.15);
}
.card-tbl .dataTables_wrapper .dataTables_info {
padding-top: 15px;
color: #64748b;
font-size: 0.9rem;
font-weight: 500;
}
.card-tbl .dataTables_wrapper .dataTables_paginate {
padding-top: 12px;
}
.card-tbl .dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px;
padding: 6px 14px;
margin: 0 3px;
border: 1px solid transparent;
color: #475569 !important;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
}
.card-tbl .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.card-tbl .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: linear-gradient(135deg, var(--v2-violet) 0%, var(--v2-vio-dark) 100%) !important;
color: white !important;
border-color: transparent !important;
box-shadow: 0 4px 10px rgba(91, 60, 245, 0.3);
font-weight: 600;
}
.card-tbl .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: rgba(91, 60, 245, 0.08) !important;
color: var(--v2-violet) !important;
border-color: rgba(91, 60, 245, 0.2) !important;
}
/* Action Buttons inside Table */
.card-tbl .data-tbl .btn {
padding: 8px;
font-size: 0.85rem;
border-radius: 8px !important;
box-shadow: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-tbl .data-tbl .btn i {
font-size: 0.9rem;
}
.card-tbl .data-tbl .btn-primary {
background-color: rgba(91, 60, 245, 0.1) !important;
color: var(--v2-violet) !important;
border: 1px solid rgba(91, 60, 245, 0.2);
}
.card-tbl .data-tbl .btn-primary:hover {
background-color: var(--v2-violet) !important;
color: #ffffff !important;
/* transform: translateY(-2px); */
box-shadow: 0 4px 10px rgba(91, 60, 245, 0.3) !important;
}
.card-tbl .data-tbl .btn-danger {
background-color: rgba(239, 68, 68, 0.1) !important;
color: #ef4444 !important;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.card-tbl .data-tbl .btn-danger:hover {
background-color: #ef4444 !important;
color: #ffffff !important;
/* transform: translateY(-2px); */
box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3) !important;
}
/* ---------------------------------------------------
Responsive Layout & DataTables Adjustments
--------------------------------------------------- */
@media screen and (max-width: 768px) {
.card-tbl {
padding: 16px;
}
.card-tbl .card-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.card-tbl .dataTables_wrapper .dataTables_filter {
text-align: left;
margin-top: 10px;
}
.card-tbl .dataTables_wrapper .dataTables_filter input {
width: 100%;
margin-left: 0;
margin-top: 8px;
}
.card-tbl .dataTables_wrapper .dataTables_length {
text-align: left;
}
.card-tbl .dataTables_wrapper .row {
display: flex;
flex-direction: column;
gap: 10px;
}
.card-tbl .dataTables_wrapper .dataTables_paginate {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
}
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] {
display: flex;
justify-content: center;
align-items: center;
}
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button[aria-label="First"],
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button[aria-label="Previous"],
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button[aria-label="Next"],
body.app-theme div.dt-container .dt-paging nav[aria-label="pagination"] .dt-paging-button[aria-label="Last"] {
font-size: 20px;
line-height: 0px;
height: 38px;
padding: 4px 16px !important;
}
.dt-layout-cell.dt-layout-start .dt-length .dt-input {
font-size: 14px;
}
.dt-layout-cell.dt-layout-start div.dt-info {
font-size: 14px;
}
.plan-feature-list li {
background-color: rgba(91, 60, 245, 0.15) !important;
color: #5b3cf5 !important;
font-weight: 700;
border-radius: 12px !important;
}
.plan-feature-list li i {
font-size: 16px;
color: #5b3cf5 !important;
}
#collapseOne .card-body {
padding: 16px;
}
.z-0 {
z-index: 0 !important;
}
.card.section.dashboard.h-100 .card-body.lft-card{
height: calc(100dvh - 85px);
overflow-x: hidden;
overflow-y: auto;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-thumb {
background-color: rgba(91, 60, 245, .1) !important;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(91, 60, 245, .1) !important;
}
::-webkit-scrollbar-track {
background-color: #F0F5F7;
border-radius: 5px;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: rgba(91, 60, 245, 0.50) #F0F5F7;
}
body.app-theme .dropdown {
position: relative;
}
body.app-theme .dropdown-menu {
z-index: 1050;
}
body.app-theme .dropdown:has(> .dropdown-menu.show) {
z-index: 10500;
}
body.app-theme .dropdown-menu.show {
z-index: 10500 !important;
}
/* ── legal-specific hero: centered, no visual, shorter ──────── */
body.landing-page .page-hero--legal{ padding-bottom:clamp(2.25rem,5vw,3.25rem); }
body.landing-page .page-hero-inner--center{
position:relative;z-index:1;max-width:800px;margin:0 auto;
padding:0 clamp(1.25rem,5vw,2rem);
display:flex;flex-direction:column;align-items:center;text-align:center;
}
body.landing-page .page-hero-inner--center .hero-desc{ margin:0 auto; }
body.landing-page .ph-meta{
display:inline-flex;align-items:center;gap:.4rem;
font-family:var(--f-mono);font-size:.72rem;color:var(--muted);
margin-top:1.5rem;
}
body.landing-page .ph-meta svg{ width:13px;height:13px;flex-shrink:0 }
@media(max-width:480px){
body.landing-page .page-hero-inner--center{ padding:0 1.25rem }
body.landing-page .page-hero-inner--center .hero-heading-title{ font-size:clamp(1.65rem,7vw,2.2rem)!important }
}
/* fix: .page-hero-inner is a flex ROW (built for the ph-content/ph-visual split hero).
The blog hero doesn't have that structure, so it needs its own stacked layout. */
body.landing-page .page-hero-compact .page-hero-inner{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
max-width:820px;
margin:0 auto;
padding: 0;
gap: 0 !important;
}
body.landing-page .page-hero-compact .blog-detail-meta .meta-date,
body.landing-page .page-hero-compact .blog-detail-meta .meta-date svg{
color: var(--violet);
}
/* ================================================================
REMOVE BOX-SHADOW & OUTLINE FROM ALL FORM FIELDS
================================================================ */
/* All form controls - remove default focus styles */
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
box-shadow: none !important;
outline: none !important;
}
/* Remove box-shadow from all form inputs (including Bootstrap) */
input:not([type="radio"]):not([type="checkbox"]),
textarea,
select {
box-shadow: none !important;
outline: none !important;
}
/* Also target specific Bootstrap classes */
.form-control:focus,
.form-select:focus {
border-color: #ced4da; /* keeps a subtle border color, adjust as needed */
box-shadow: none !important;
}
/* For Safari/WebKit that add default glow */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Remove outline from buttons too (optional) */
button:focus,
.btn:focus {
box-shadow: none !important;
outline: none !important;
}
/* For Bootstrap select dropdowns */
select.form-select:focus {
box-shadow: none !important;
outline: none !important;
}
/* For input groups (Bootstrap's .input-group) */
.input-group .form-control:focus {
box-shadow: none !important;
outline: none !important;
}
/* For validation states - keep clean */
.is-valid:focus,
.is-invalid:focus {
box-shadow: none !important;
outline: none !important;
}
/* ===== CheckOut Page Css Start ===== */
.checkout-shell {
padding: 72px 0 96px;
background-color:#F6F6F8;
}
.checkout-shell .checkout-surface {
border-radius: var(--v2-r2) !important;
transition: var(--v2-transition);
background: rgba(255, 255, 255, 0.78) !important;
border-color: rgba(91, 60, 245, 0.12) !important;
box-shadow: 0 4px 16px rgba(91, 60, 245, 0.06), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
border: 1px solid rgba(255, 255, 255, .6) !important;
padding: 1.5rem;
}
.checkout-shell .checkout-surface.checkout-summary .btn-primary,
.checkout-shell .checkout-surface.checkout-summary .btn-soft-primary{
padding :.8rem .9rem;
}
.checkout-shell .checkout-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(91, 60, 245, 0.08);
color: #5b3cf5;
font-size: 0.875rem;
font-weight: 600;
}
.checkout-shell .checkout-heading {
margin: 18px 0 10px;
font-size: 2.25rem;
line-height: 1.1;
color: #121826;
}
.checkout-shell .checkout-address-grid .form-label, .coupon-label {
font-family: var(--v2-f-head);
font-weight: 600;
font-size: .875rem;
color: #3a3857 !important;
}
.checkout-shell .checkout-address-grid .form-control, .coupon-actions .form-control {
background: rgba(255, 255, 255, .6) !important;
border: 1.5px solid rgba(91, 60, 245, .15) !important;
border-radius: 12px;
color: #12112A;
font-size: 14px;
font-weight: 500;
padding: 12px 16px;
}
.checkout-shell .checkout-address-help {
margin: 0 0 18px;
color: #5b6478;
font-size: 0.95rem;
}
.checkout-shell .checkout-checkbox span {
font-family: var(--v2-f-head);
font-weight: 600;
font-size: .875rem;
color: #3a3857 !important;
}
.checkout-shell .checkout-summary {
position: sticky;
top: 92px;
}
.checkout-shell .checkout-summary-title {
font-size: 1.35rem;
color: #121826;
}
.checkout-shell .coupon-actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
}
.checkout-shell .summary-divider {
height: 1px;
background: rgba(25, 35, 67, 0.08);
margin: 20px 0;
}
.checkout-shell .summary-row {
color: #4b5565;
font-size: 0.98rem;
}
.checkout-shell .summary-row strong,
.checkout-shell .summary-row span:last-child {
color: #121826;
}
.checkout-shell .summary-row.total {
margin: 0;
font-size: 1.14rem;
font-weight: 700;
}
.checkout-shell .summary-row.total span:last-child {
font-size: 1.5rem;
}
.checkout-shell .summary-note {
margin: 14px 0 0;
color: #6c7488;
font-size: 0.92rem;
line-height: 1.55;
}
.checkout-shell .checkout-alert {
padding: 14px 16px;
border-radius: 8px;
font-size: 0.95rem;
}
.checkout-shell .checkout-alert-warning {
background: rgba(255, 193, 7, 0.14);
color: #8b5e00;
}
.checkout-shell .checkout-alert-info {
background: rgb(238 233 255);
color: #5b3cf5;
}
@media (max-width: 991px) {
.checkout-shell .checkout-summary {
position: static;
}
}
/* ===== CheckOut Page Css Over ===== */
/* ===== Profile Page Timezone Dropdown Css ===== */
/* ---- Main select box (same as other inputs) ---- */
.profilePage .select2-container {
width: 100% !important;
}
.profilePage .select2-container--default .select2-selection--single {
height: 48px;
border: 1.5px solid rgba(91, 60, 245, .15) !important;
border-radius: var(--v2-r, 12px) !important;
background: rgba(255, 255, 255, .6) !important;
backdrop-filter: blur(4px);
color: var(--v2-ink, #12112A) !important;
padding: 0 14px;
transition: border-color 0.2s;
}
.profilePage .select2-container--default .select2-selection--single:hover {
border-color: rgba(91, 60, 245, .3);
}
.profilePage .select2-container--default .select2-selection--single:focus-within {
border-color: var(--v2-violet, #5B3CF5) !important;
}
.profilePage .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--v2-ink, #12112A) !important;
line-height: 48px;
padding-left: 0;
padding-right: 34px;
font-size: 0.95rem;
}
.profilePage .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--v2-muted, #8E8BAA) !important;
}
.profilePage .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 48px;
right: 10px;
}
.profilePage .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--v2-ink, #12112A) transparent transparent transparent;
}
.profilePage .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--v2-ink, #12112A) transparent;
}
/* ---- Custom dropdown panel – now using "timezone-select2-dropdown" ---- */
.timezone-select2-dropdown {
border: 1.5px solid rgba(91, 60, 245, .15) !important;
border-radius: var(--v2-r, 12px) !important;
background: rgb(255, 255, 255) !important;
backdrop-filter: blur(8px);
box-shadow: 0 8px 24px rgba(91, 60, 245, .2) !important;
overflow: hidden;
}
/* ---- Search box inside dropdown ---- */
.timezone-select2-dropdown .select2-search--dropdown {
padding: 10px;
background: transparent !important;
}
.timezone-select2-dropdown .select2-search--dropdown .select2-search__field {
border: 1.5px solid rgba(91, 60, 245, .15) !important;
border-radius: var(--v2-r, 12px) !important;
background: rgba(255, 255, 255, .4) !important;
color: var(--v2-ink, #12112A) !important;
padding: 8px 12px;
font-size: 0.95rem;
backdrop-filter: blur(2px);
}
.timezone-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
border-color: var(--v2-violet, #5B3CF5) !important;
outline: none !important;
box-shadow: none !important;
}
/* ---- Result items (options) ---- */
.timezone-select2-dropdown .select2-results__option {
color: var(--v2-ink2, #3A3857) !important;
padding: 10px 14px;
font-size: 0.95rem;
background: transparent !important;
transition: background 0.15s;
}
.timezone-select2-dropdown .select2-results__option--selected {
background: var(--v2-vio-lo, #EEE9FF) !important;
color: var(--v2-violet, #5B3CF5) !important;
}
.timezone-select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
background: var(--v2-violet, #5B3CF5) !important;
color: #fff !important;
}
.timezone-select2-dropdown .select2-results__option[aria-disabled="true"] {
color: var(--v2-muted2, #C5C3D8) !important;
}
/* ============================================================
Timer Setting Modal – Clean White Background (only this modal)
============================================================ */
/* Main modal container – pure white, no purple */
#timerSettingModal .modal-content {
background-color: #ffffff !important;
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
border-radius: var(--v2-r2, 20px) !important;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12) !important;
}
/* Header – keep clean with subtle divider */
#timerSettingModal .modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
background: transparent !important;
}
#timerSettingModal .modal-header .modal-title {
color: #12112A !important;
}
#timerSettingModal .modal-header .btn-close {
color: #6c757d !important;
opacity: 0.7;
}
#timerSettingModal .modal-header .btn-close:hover {
opacity: 1;
}
/* Body – white background, dark text */
#timerSettingModal .modal-body {
background: #ffffff !important;
color: #12112A !important;
}
#timerSettingModal .modal-body .text-muted,
#timerSettingModal .modal-body label.text-muted,
#timerSettingModal .modal-body .form-label.text-muted {
color: #6c757d !important;
}
#timerSettingModal .modal-body .text-dark,
#timerSettingModal .modal-body label.text-dark {
color: #12112A !important;
}
/* Footer – clean with subtle top border */
#timerSettingModal .modal-footer {
border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
background: #ffffff !important;
border-radius: 0 0 var(--v2-r2, 20px) var(--v2-r2, 20px) !important;
}
/* Form controls – light gray background, dark text */
#timerSettingModal input.form-control,
#timerSettingModal textarea.form-control {
background-color: #f5f6fa !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
color: #12112A !important;
border-radius: 10px !important;
}
#timerSettingModal input.form-control:focus,
#timerSettingModal textarea.form-control:focus {
border-color: #5B3CF5 !important;
background-color: #ffffff !important;
}
/* Select2 inside this modal – match the white theme */
#timerSettingModal .select2-container--default .select2-selection--single {
background-color: transparent !important;
}
#timerSettingModal .select2-container--default .select2-selection--single .select2-selection__rendered {
background-color: #f5f6fa !important;
color: #12112A !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
border-radius: 10px !important;
}
#timerSettingModal .select2-dropdown {
background-color: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.10) !important;
border-radius: 10px !important;
}
#timerSettingModal .select2-dropdown .select2-results__option {
color: #12112A !important;
}
#timerSettingModal .select2-dropdown .select2-results__option--highlighted {
background: rgba(91, 60, 245, 0.08) !important;
color: #5B3CF5 !important;
}
#timerSettingModal .select2-dropdown .select2-results__option--selected {
background: rgba(91, 60, 245, 0.06) !important;
color: #5B3CF5 !important;
}
/* Small helper text inside the modal */
#timerSettingModal .form-group p.text-muted,
#timerSettingModal .form-group .small.text-muted {
color: #6c757d !important;
}
/* The "Add Label" button and label color buttons */
#timerSettingModal .labellists .btn-soft-primary {
background: rgba(91, 60, 245, 0.08) !important;
color: #5B3CF5 !important;
}
#timerSettingModal .labellists .btn-soft-primary:hover {
background: #5B3CF5 !important;
color: #ffffff !important;
}
/* Keep the backdrop subtle – no purple */
.modal.show {
backdrop-filter: blur(6px) !important;
background-color: rgba(0, 0, 0, 0.25) !important;
}
.modal-backdrop.show {
opacity: 0.5 !important;
background-color: #000 !important;
}
/* ================================================================
MULTI‑ITEM TESTIMONIAL SLIDER — 3 visible, slide 1 by 1
Add to style-v2.css (after existing testimonial rules)
================================================================ */
/* ── Slider wrapper ── */
.testimonial-slider-wrapper {
position: relative;
margin-top: 2.5rem;
/* overflow: hidden; */
overflow: inherit;
touch-action: pan-y;
}
.slider-container {
overflow: hidden;
border-radius: var(--r2, 14px);
}
/* ── Track ── */
.slider-track {
display: flex;
gap: 1.5rem; /* spacing between cards */
transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
}
/* ── Each slide (card) ── */
.testi-slide {
flex: 0 0 calc(33.333% - 1rem); /* 3 cards visible, minus gap */
min-width: 0;
scroll-snap-align: start;
}
/* Clone slide (hidden from dots, but moves with track) */
.testi-slide.clone {
/* no special styling needed, just part of the track */
}
/* ── Card inside slide ── */
.testi-slide .testi-card {
background: var(--off, #F6F6F8);
border: 1px solid var(--border, #E8E6F0);
border-radius: var(--r2, 14px);
padding: 2rem 1.75rem;
height: 100%;
transition: all 0.25s;
box-shadow: 0 4px 20px rgba(18, 17, 42, 0.04);
}
.testi-slide .testi-card:hover {
border-color: rgba(91, 60, 245, 0.25);
box-shadow: 0 8px 32px rgba(91, 60, 245, 0.08);
}
/* ── Arrows ── */
.slider-btn {
position: absolute;
/* top: 50%; */
top: 43%;
transform: translateY(-50%);
z-index: 10;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border2, #D4D1E8);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--ink2, #3A3857);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(18, 17, 42, 0.06);
padding: 0;
}
.slider-btn svg {
width: 22px;
height: 22px;
stroke-width: 2.5;
}
.slider-btn:hover {
background: var(--violet, #5B3CF5);
border-color: var(--violet, #5B3CF5);
color: #fff;
box-shadow: 0 6px 20px var(--vio-glow, rgba(91, 60, 245, 0.25));
transform: translateY(-50%) scale(1.04);
}
.slider-btn:active {
transform: translateY(-50%) scale(0.95);
}
.slider-btn.prev {
left: -20px;
}
.slider-btn.next {
right: -20px;
}
.slider-btn:disabled {
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
/* ── Dots ── */
.slider-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 2rem;
padding-bottom: 0.25rem;
}
.slider-dots .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--muted2, #C5C3D8);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
flex-shrink: 0;
}
.slider-dots .dot.active {
background: var(--violet, #5B3CF5);
width: 28px;
border-radius: 6px;
box-shadow: 0 0 0 3px var(--vio-lo, #EEE9FF), 0 4px 12px var(--vio-glow, rgba(91, 60, 245, 0.2));
}
.slider-dots .dot:hover:not(.active) {
background: var(--violet, #5B3CF5);
opacity: 0.5;
transform: scale(1.15);
}
/* ── Responsive ── */
/* Tablet: show 2 cards */
@media (max-width: 991px) {
.testi-slide {
flex: 0 0 calc(50% - 0.75rem);
}
.slider-btn.prev {
left: 4px;
}
.slider-btn.next {
right: 4px;
}
}
/* Mobile: show 1 card */
@media (max-width: 640px) {
.testi-slide {
flex: 0 0 100%;
}
.slider-btn {
width: 34px;
height: 34px;
}
.slider-btn svg {
width: 18px;
height: 18px;
}
.slider-btn.prev {
left: 2px;
}
.slider-btn.next {
right: 2px;
}
.testi-slide .testi-card {
padding: 1.5rem 1rem;
}
}
@media (max-width: 480px) {
.testi-slide .testi-card {
padding: 1.25rem 0.75rem;
}
.slider-dots .dot {
width: 8px;
height: 8px;
}
.slider-dots .dot.active {
width: 24px;
}
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.slider-track {
transition: none !important;
}
.testi-slide .testi-card {
transition: none !important;
}
}