html, body {
background-color: #000;
}
body {
font-family: 'Poppins', sans-serif;
color: #fff;
overflow-x: hidden;
}
/* Fixed gradient layer — works consistently on desktop Chrome AND iOS Safari */
.bg-base {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -2;
background: linear-gradient(to bottom right, #df5f00 0%, #000000 50%, #df5f00 100%);
}
.bg-grid {
position: fixed;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
}
/* Glassmorphism */
.glass {
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.18));
backdrop-filter: blur(22px) saturate(125%);
-webkit-backdrop-filter: blur(22px) saturate(125%);
border: 1px solid rgba(255,255,255,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
.glass-soft {
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(0,0,0,0.14));
backdrop-filter: blur(16px) saturate(115%);
-webkit-backdrop-filter: blur(16px) saturate(115%);
border: 1px solid rgba(255,255,255,0.16);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.glass-orange {
background: linear-gradient(135deg, rgba(223,95,0,0.30), rgba(194,82,0,0.12));
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(255,160,90,0.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
/* Active filter tab — solid bright orange for strong contrast vs the dark inactive tabs */
.filter-tab.glass-orange {
background: #df5f00;
border-color: #ff9a3c;
color: #fff;
font-weight: 600;
box-shadow: 0 6px 20px rgba(223,95,0,0.45);
}
.card-hover {
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card-hover:hover {
transform: translateY(-6px);
border-color: rgba(223,95,0,0.5);
}
/* Highlight a package that's been added to the proposal */
.pkg-selected {
border-color: rgba(223,95,0,0.9) !important;
box-shadow: 0 0 0 2px rgba(223,95,0,0.6) !important;
background: linear-gradient(135deg, rgba(223,95,0,0.20), rgba(194,82,0,0.08)) !important;
}
.fade-up { animation: fadeUp .6s both; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(223,95,0,0.4); border-radius: 99px; }
/* =====================================================================
AGENCY THEME — purple (#6f25c7) instead of the Tech orange.
Applied by adding class="theme-agency" on .
===================================================================== */
.theme-agency .bg-base {
background: linear-gradient(to bottom right, #6f25c7 0%, #000000 50%, #6f25c7 100%);
}
.theme-agency .glass-orange {
background: linear-gradient(135deg, rgba(111,37,199,0.34), rgba(90,28,160,0.14));
border: 1px solid rgba(168,110,240,0.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.theme-agency .card-hover:hover {
border-color: rgba(111,37,199,0.5);
}
.theme-agency .pkg-selected {
border-color: rgba(111,37,199,0.9) !important;
box-shadow: 0 0 0 2px rgba(111,37,199,0.6) !important;
background: linear-gradient(135deg, rgba(111,37,199,0.22), rgba(90,28,160,0.08)) !important;
}
.theme-agency ::-webkit-scrollbar-thumb { background: rgba(111,37,199,0.45); }
.theme-agency .filter-tab.glass-orange {
background: #6f25c7;
border-color: #a86ef0;
box-shadow: 0 6px 20px rgba(111,37,199,0.45);
}