/* Extracted styles from main.html */
body { font-family: 'Inter', sans-serif; background-color: #050505; }
/* Hide scrollbar globally - all browsers */
body::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
body,
* {
-ms-overflow-style: none;
scrollbar-width: none;
}
.font-serif { font-family: 'Instrument Serif', serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
/* Custom animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes beam {
0% { left: -100%; opacity: 0; }
50% { opacity: 0.5; }
100% { left: 100%; opacity: 0; }
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes scanline {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
@keyframes pulse-ring {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(2); opacity: 0; }
}
.animate-fade-up { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-marquee { animation: marquee 40s linear infinite; }
.animate-beam {
position: absolute;
top: 0;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
transform: skewX(-20deg);
animation: beam 4s infinite;
pointer-events: none;
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-500 { animation-delay: 0.5s; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.bg-grid {
background-size: 50px 50px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}
.card-shine:hover::after {
opacity: 1;
}
.card-shine::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
/* Custom Switch Toggle */
.toggle-checkbox:checked {
right: 0;
border-color: #fff;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #fff;
}
/* Glassmorphism utilities */
.glass {
background: rgba(20, 20, 22, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Extension card selected state */
.extension-card {
transition: all 0.3s ease;
cursor: pointer;
box-sizing: border-box;
border-width: 1px !important;
}
.extension-card:hover {
border-color: rgba(255, 255, 255, 0.15) !important;
transform: translateY(-2px);
}
.extension-card.border-2 {
border-color: rgba(255, 255, 255, 0.3) !important;
background: rgba(20, 20, 22, 0.6);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.extension-card.border-2:hover {
border-color: rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
/* Budget summary animations */
.budget-summary {
transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.budget-summary.inactive {
opacity: 0.6;
transform: translateY(0);
}
.budget-summary.active {
opacity: 1;
transform: translateY(0);
}
.budget-summary .budget-content {
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.budget-summary.inactive .budget-content {
opacity: 0.7;
}
.budget-summary.active .budget-content {
opacity: 1;
}
#budget-initial, #budget-monthly {
display: inline-block;
transition: opacity 0.4s ease-out;
}
.budget-number-updating {
opacity: 0.4;
}
.budget-number-updated {
opacity: 1;
}
#selected-count, #extensions-text {
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#go-to-checkout {
transform-origin: center;
will-change: transform, opacity;
}
#checkout-text {
display: inline-block;
transition: opacity 0.3s ease-out;
}
#checkout-text.fading {
opacity: 0;
}
#checkout-text.visible {
opacity: 1;
}
/* Custom toggle switch for extensions */
.extension-toggle {
position: relative;
display: inline-block;
width: 48px;
height: 28px;
}
.extension-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.extension-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: 0.3s;
border-radius: 28px;
}
.extension-toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 3px;
bottom: 3px;
background-color: rgba(255, 255, 255, 0.3);
transition: 0.3s;
border-radius: 50%;
}
.extension-toggle input:checked + .extension-toggle-slider {
background-color: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.extension-toggle input:checked + .extension-toggle-slider:before {
transform: translateX(20px);
background-color: white;
}
/* Modal animations - Super smooth */
@keyframes modalFadeIn {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(8px);
}
}
@keyframes modalContentSlideIn {
from {
opacity: 0;
transform: translateY(40px) scale(0.96);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0px);
}
}
@keyframes modalFadeOut {
from {
opacity: 1;
backdrop-filter: blur(8px);
}
to {
opacity: 0;
backdrop-filter: blur(0px);
}
}
@keyframes modalContentSlideOut {
from {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0px);
}
to {
opacity: 0;
transform: translateY(40px) scale(0.96);
filter: blur(4px);
}
}
.modal {
opacity: 0;
pointer-events: none;
backdrop-filter: blur(0px);
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), backdrop-filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal:not(.hidden) {
opacity: 1;
pointer-events: auto;
backdrop-filter: blur(8px);
animation: modalFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.modal.hidden {
animation: modalFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
pointer-events: none;
}
.modal > div {
opacity: 0;
transform: translateY(40px) scale(0.96);
filter: blur(4px);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal:not(.hidden) > div {
animation: modalContentSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.modal.hidden > div {
animation: modalContentSlideOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Hide scrollbar in modal content */
.modal > div::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.modal > div {
-ms-overflow-style: none;
scrollbar-width: none;
}