Home
Version 40.1 by Aaron Blackburn on 2026/07/22 20:45
)
)
)
/* Container setup */
.modern-menu-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
/* CSS Grid Setup: 2 columns, equal width */
.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
width: 100%;
}
/* General Reset for links */
.menu-card-link {
text-decoration: none !important;
display: block;
height: 100%;
}
/* Card Styling */
.menu-card {
background: #ffffff;
border-radius: 12px;
padding: 20px;
display: flex;
align-items: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
border: 1px solid #eaeaea;
color: #333;
height: 100%; /* Ensures cards in same row stretch to same height */
box-sizing: border-box;
}
.menu-card-link:hover .menu-card {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0,0,0,0.1);
border-color: #c1c1c1;
}
/* Icon Container: Uniform circle for all icons */
.menu-icon-container {
flex: 0 0 56px; /* Fixed size for icon circle */
height: 56px;
background-color: #f4f6f8; /* Light grey background from original support icon */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
overflow: hidden; /* Keeps logos within circle */
border: 1px solid #e0e0e0;
}
/* Specific Logo Scaling */
.menu-icon {
object-fit: contain;
}
/* Webex (Logo is wide, fits best at 85% width) */
.webex-logo {
width: 85%;
height: auto;
}
/* MS Teams (Icon is square, fits best at 75% width) */
.teams-logo {
width: 75%;
height: auto;
}
/* FirstDigital (Logo is wide, fits best at 90% width) */
.firstdigital-logo {
width: 90%;
height: auto;
}
/* Support Icon (SVG styling) */
.support-icon {
width: 60%;
height: 60%;
}
/* Text Area */
.menu-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.menu-title {
font-size: 16px;
line-height: 1.4;
font-weight: 600;
color: #1a1a1a;
}
.menu-subtitle {
font-size: 13px;
color: #666;
margin-top: 4px;
font-weight: 400;
}
/* Partner footer adjustments */
.partner-footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #eee;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
font-family: Arial, sans-serif;
}
.footer-brand {
font-weight: 700;
font-size: 14px;
color: #0060ff; /* Primary brand blue */
text-decoration: none !important;
}
.azure-brand {
color: #0078d4; /* Azure blue */
}
.footer-divider {
color: #ccc;
font-weight: 300;
}
/* Responsive Breakpoints: Mobile */
@media (max-width: 768px) {
.menu-grid {
grid-template-columns: 1fr; /* Stack to 1 column on mobile */
}
.modern-menu-container {
padding: 10px;
}
.menu-card {
padding: 15px;
}
}