Skip to Content
Last modified by Chris Workman on 2026/08/20 21:50
From version 28.1
edited by Aaron Blackburn
on 2026/07/22 20:28
Change comment: There is no comment for this version
To version 26.1
edited by Aaron Blackburn
on 2026/07/22 20:26
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,4 +1,5 @@
1 -{{html}}
1 +== ==
2 +
2 2  <div class="modern-menu-container">
3 3   <div class="row">
4 4   <!-- Card 1: Webex -->
... ... @@ -71,22 +71,21 @@
71 71   </div>
72 72  </div>
73 73  
75 +<!-- CSS Styles for the Modern Look -->
74 74  <style>
77 + /* Container setup */
75 75   .modern-menu-container {
76 76   max-width: 960px;
77 77   margin: 0 auto;
78 78   padding: 20px;
79 79   }
83 +
84 + /* General row spacing */
80 80   .modern-menu-container .row {
81 - display: flex;
82 - flex-wrap: wrap;
83 83   margin-bottom: 20px;
84 84   }
85 - .menu-card-link {
86 - display: block;
87 - text-decoration: none;
88 - margin-bottom: 15px;
89 - }
88 +
89 + /* Card styling */
90 90   .menu-card {
91 91   background: #ffffff;
92 92   border-radius: 12px;
... ... @@ -96,16 +96,20 @@
96 96   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
97 97   transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
98 98   border: 1px solid #e0e0e0;
99 - color: #333;
100 - height: 100%;
101 - box-sizing: border-box;
99 + text-decoration: none; /* Remove underline from link */
100 + color: #333; /* Ensure text color is consistent */
101 + height: 100%; /* Ensure cards in same row match height */
102 102   }
103 +
104 + /* Hover effect for cards */
103 103   .menu-card-link:hover .menu-card {
104 104   transform: translateY(-5px);
105 105   box-shadow: 0 6px 12px rgba(0,0,0,0.15);
106 106   }
109 +
110 + /* Icon container: creates the white circle */
107 107   .menu-icon-container {
108 - flex: 0 0 60px;
112 + flex: 0 0 60px; /* Fixed size for icon area */
109 109   height: 60px;
110 110   background-color: #f8f9fa;
111 111   border-radius: 50%;
... ... @@ -115,46 +115,53 @@
115 115   margin-right: 15px;
116 116   border: 1px solid #eaeaea;
117 117   }
122 +
123 + /* Generic icon scaling within the container */
118 118   .menu-icon {
119 119   max-width: 80%;
120 120   max-height: 80%;
121 121   object-fit: contain;
122 122   }
123 - .webex-icon { max-width: 90%; }
129 +
130 + /* Specific icon tweaks if needed */
131 + .webex-icon { max-width: 90%; } /* Webex logo is wide */
132 +
133 + /* Text area */
124 124   .menu-text {
125 125   flex: 1;
126 126   display: flex;
127 127   flex-direction: column;
128 128   }
139 +
129 129   .menu-title {
130 130   font-size: 16px;
131 131   line-height: 1.4;
132 132   font-weight: 600;
133 133   }
145 +
134 134   .menu-subtitle {
135 135   font-size: 13px;
136 136   color: #666;
137 137   margin-top: 4px;
138 138   }
151 +
152 + /* Partner footer adjustments */
139 139   .partner-footer {
140 140   margin-top: 40px;
141 141   padding-top: 20px;
142 142   border-top: 1px solid #eee;
143 - justify-content: center;
157 + opacity: 0.8;
144 144   }
159 + .partner-footer:hover { opacity: 1; }
160 +
145 145   .partner-footer .text-center {
146 - flex: 1;
147 - display: flex;
148 - justify-content: center;
149 - align-items: center;
162 + display: flex;
163 + justify-content: center;
164 + align-items: center;
150 150   }
151 - @media (min-width: 768px) {
152 - .menu-card-link {
153 - flex: 0 0 50%;
154 - max-width: 50%;
155 - padding: 0 10px;
156 - box-sizing: border-box;
157 - }
166 +
167 + /* Responsive breakpoints (adjust as needed) */
168 + @media (max-width: 767px) {
169 + .menu-card { margin-bottom: 15px; } /* Spacing on mobile */
158 158   }
159 159  </style>
160 -{{/html}}