Homepage | custom.css

/* Vision Pro Style - Applied globally and to service cards */

/* Base styles for the page */
body {
  background-color: #1a1a1d; /* Dark background */
  color: rgba(235, 235, 245, 0.8); /* Slightly off-white text for better readability */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* System font stack including San Francisco */
  -webkit-font-smoothing: antialiased; /* Smoother fonts on macOS/iOS */
  -moz-osx-font-smoothing: grayscale; /* Smoother fonts on Firefox */
}

/* Service Card refinement */
.service-card {
    background-color: rgba(55, 55, 60, 0.55); /* Slightly adjusted dark background */
    backdrop-filter: blur(18px) saturate(190%); /* Increased blur/saturation slightly */
    border: 1px solid rgba(255, 255, 255, 0.12); /* More subtle border */
    border-radius: 14px; /* Slightly larger radius */
    padding: 12px; /* Adjusted padding */
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; /* Added subtle transform */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.from-theme-500\/30 {
    --tw-gradient-from: transparent !important;
}

/* Add a slight lift effect on hover */
.service-card:hover {
    background-color: rgba(70, 70, 75, 0.65); /* Lighter/more opaque on hover */
    border-color: rgba(255, 255, 255, 0.2); /* Brighter border on hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Ensure text inside cards has good contrast */
.service-card, .service-card .service-name, .service-card .service-url {
  color: rgba(235, 235, 245, 0.9) !important; /* Ensure good contrast */
}

/* Service Group Name Style - Align with Vision Pro Text Styles (using Bold) */
.service-group-name {
    font-weight: 600 !important; /* Using 600 for Semi-Bold, often used in visionOS */
    color: rgba(235, 235, 245, 0.95); /* Slightly brighter for headers */
    font-size: 1.2em; /* Slightly larger group names */
}

/* Hide the footer */
#footer {
    display: none !important; /* Force hide */
}

/* Page Container Width - keeping existing logic */
.container {
    max-width: 100%; /* Default width for smaller screens */
}

/* Apply narrower width only on larger screens */
@media (min-width: 768px) { /* Adjust breakpoint if needed */
    .container {
        max-width: 1100px; /* Limit container width with fixed value */
    }
}