1  /* Main layout container */
  2  .homeContainer {
  3    display: flex;
  4    flex-direction: column;
  5    align-items: center;
  6    max-width: 1600px;
  7    margin: 0 auto;
  8    padding: 8rem 1rem 4rem;
  9  }
 10  
 11  /* --------------------------------
 12   * 1. Two Column Layout
 13   * -------------------------------- */
 14  .contentGrid {
 15    display: flex;
 16    flex-direction: row;
 17    gap: 8rem;
 18    width: 100%;
 19    margin-top: 2rem;
 20    align-items: flex-start;
 21    min-height: calc(100vh - 300px);
 22    padding-inline: 2rem;
 23  }
 24  
 25  .textColumn {
 26    flex: 1;
 27    max-width: 650px;
 28  }
 29  
 30  .cardsColumn {
 31    flex: 1;
 32    max-width: 650px;
 33    display: flex;
 34    flex-direction: column;
 35    gap: 2rem;
 36  }
 37  
 38  /* --------------------------------
 39   * 2. Typography
 40   * -------------------------------- */
 41  .megaHeading {
 42    font-size: 4rem;
 43    line-height: 1.1;
 44    font-weight: 200;
 45    margin-bottom: 1.5rem;
 46    letter-spacing: -0.02em;
 47    color: var(--ifm-heading-color);
 48  }
 49  
 50  .introText {
 51    font-size: 1.125rem;
 52    line-height: 1.6;
 53    color: var(--ifm-color-emphasis-800);
 54    margin-bottom: 2rem;
 55  }
 56  
 57  /* --------------------------------
 58   * 3. Glossy Card Component
 59   * -------------------------------- */
 60  .glossyCard {
 61    border-radius: 12px;
 62    overflow: hidden;
 63    background: var(--ifm-card-background-color);
 64    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
 65    transition: all 0.3s ease;
 66    border: 1px solid var(--ifm-color-emphasis-600);
 67    margin-bottom: 2rem;
 68  }
 69  
 70  [data-theme='dark'] .glossyCard {
 71    border: 1px solid var(--ifm-color-emphasis-300);
 72  }
 73  
 74  .glossyCardblue:hover {
 75    transform: translateY(-5px);
 76    box-shadow: 0 12px 40px rgba(1, 148, 226, 0.2);
 77    border-color: rgba(1, 148, 226, 0.3);
 78    background-color: rgba(1, 148, 226, 0.03);
 79  }
 80  
 81  .glossyCardred:hover {
 82    transform: translateY(-5px);
 83    box-shadow: 0 12px 40px rgba(235, 23, 0, 0.2);
 84    border-color: rgba(235, 23, 0, 0.3);
 85    background-color: rgba(235, 23, 0, 0.03);
 86  }
 87  
 88  .cardContent {
 89    padding: 1.5rem;
 90  }
 91  
 92  .cardHeader {
 93    display: flex;
 94    align-items: center;
 95    gap: 1rem;
 96    margin-bottom: 1rem;
 97  }
 98  
 99  .colorBlock {
100    width: 12px;
101    height: 12px;
102    border-radius: 4px;
103    flex-shrink: 0;
104  }
105  
106  .colorBlockblue {
107    background-color: var(--ifm-color-primary);
108  }
109  
110  .colorBlockred {
111    background-color: var(--genai-color-primary);
112  }
113  
114  .cardTitle {
115    font-size: 1.5rem;
116    font-weight: 600;
117    margin: 0;
118  }
119  
120  [data-theme='light'] .cardTitle {
121    color: var(--ifm-color-emphasis-900);
122  }
123  
124  [data-theme='dark'] .cardTitle {
125    color: rgba(255, 255, 255, 0.9);
126  }
127  
128  .cardDescription {
129    font-size: 1rem;
130    line-height: 1.6;
131    color: var(--ifm-color-emphasis-700);
132    margin: 0.75rem 0 1.5rem;
133  }
134  
135  /* --------------------------------
136   * 4. Card Actions & Buttons
137   * -------------------------------- */
138  .cardActions {
139    margin-top: 1.5rem;
140    display: flex;
141    flex-direction: row;
142    gap: 3rem;
143  }
144  
145  .cardButton {
146    display: inline-flex;
147    align-items: center;
148    padding: 0.75rem 1.25rem;
149    border-radius: 8px;
150    font-weight: 600;
151    background-color: #ffffff;
152    text-decoration: none;
153    cursor: pointer;
154    transition: all 0.2s ease;
155  }
156  
157  /* Light mode border color */
158  [data-theme='light'] .cardButton {
159    border: 1px solid var(--ifm-border-color);
160    color: var(--ifm-color-emphasis-900);
161  }
162  
163  /* Dark mode styling */
164  [data-theme='dark'] .cardButton {
165    border: 1px solid var(--ifm-color-emphasis-300);
166    background-color: var(--ifm-color-emphasis-100);
167    color: var(--ifm-color-emphasis-800);
168  }
169  
170  .arrowIcon {
171    margin-left: 0.5rem;
172    transition: transform 0.2s ease;
173  }
174  
175  /* Arrow hover styling */
176  .cardButton:hover .arrowIcon {
177    transform: translateX(3px);
178  }
179  
180  /* Button hover styling */
181  .cardButton:hover {
182    background-color: rgba(0, 0, 0, 0.03);
183  }
184  
185  [data-theme='dark'] .cardButton:hover {
186    background-color: var(--ifm-color-emphasis-200);
187    color: rgba(0, 0, 0, 0.9);
188    border-color: var(--ifm-color-emphasis-400);
189  }
190  
191  /* --------------------------------
192   * 5. Dark Mode Adjustments
193   * -------------------------------- */
194  [data-theme='dark'] .glossyCardblue:hover {
195    background-color: rgba(1, 148, 226, 0.1);
196  }
197  
198  [data-theme='dark'] .glossyCardred:hover {
199    background-color: rgba(235, 23, 0, 0.1);
200  }
201  
202  /* --------------------------------
203   * 6. Responsive Adjustments
204   * -------------------------------- */
205  @media (max-width: 1600px) {
206    .contentGrid {
207      gap: 4rem;
208    }
209  }
210  
211  @media (max-width: 996px) {
212    .contentGrid {
213      flex-direction: column;
214    }
215  
216    .textColumn,
217    .cardsColumn {
218      max-width: 100%;
219    }
220  
221    .homeContainer {
222      padding: 2rem 0 4rem;
223    }
224  }
225  
226  @media (max-width: 768px) {
227    .megaHeading {
228      font-size: 2.5rem;
229    }
230  
231    .introText {
232      font-size: 1rem;
233    }
234  
235    .cardActions {
236      flex-direction: column;
237      gap: 1rem;
238    }
239  
240    .homeContainer {
241      padding: 0 0 2rem;
242    }
243  }