Skip to content

Commit 94250dc

Browse files
PrashantUnityPrashantUnity
committed
Semantic Html
1 parent 1eb4ddb commit 94250dc

26 files changed

Lines changed: 682 additions & 315 deletions

File tree

‎assets/css/home.css‎

Lines changed: 221 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,16 @@ body {
7676
min-width: 0;
7777
}
7878

79+
ul.button-grid {
80+
list-style: none;
81+
margin: 0;
82+
padding: 0;
83+
}
84+
85+
.button-grid>li {
86+
display: contents;
87+
}
88+
7989
a.neumorphic-button {
8090
display: flex;
8191
flex-direction: column;
@@ -145,7 +155,7 @@ a.neumorphic-button:active>span {
145155
padding: 2rem;
146156
border-radius: 0.8rem;
147157
background: var(--bg-primary);
148-
box-shadow: inset 0.2rem 0.2rem 0.4rem var(--shadow-dark), inset -0.2rem -0.2rem 0.4rem var(--shadow-light);
158+
box-shadow: none;
149159
}
150160

151161
.home-intro-content {
@@ -190,6 +200,14 @@ a.neumorphic-button:active>span {
190200

191201
.home-intro-content h2:first-of-type {
192202
margin-top: 0;
203+
/* Match FAQ section title — calmer than uppercase category-style labels */
204+
font-family: Inter, system-ui, -apple-system, sans-serif;
205+
font-size: 1.05rem;
206+
font-weight: 600;
207+
color: var(--text-secondary);
208+
text-transform: none;
209+
letter-spacing: 0.02em;
210+
margin-bottom: 1rem;
193211
}
194212

195213
.home-intro-content > h1:first-child,
@@ -203,36 +221,101 @@ a.neumorphic-button:active>span {
203221
grid-column: 1 / -1;
204222
}
205223

206-
/* What We Offer – raised neumorphic cards, responsive card grid (one card per cell, 2 cols on tablet+) */
207-
.offer-card {
208-
border-radius: 0.8rem;
209-
background: var(--button-bg);
210-
--shadow-light: var(--shadow-light-alt);
211-
--shadow-dark: var(--shadow-dark-alt);
212-
box-shadow: -0.25rem -0.25rem 0.5rem var(--shadow-light), 0.25rem 0.25rem 0.5rem var(--shadow-dark);
213-
padding: 0;
224+
/* What We Offer – same accordion stack pattern as homepage FAQ */
225+
.home-intro-content .offer-list {
226+
grid-column: 1 / -1;
227+
margin: 0;
214228
min-width: 0;
215-
display: flex;
216-
flex-direction: column;
229+
border: 1px solid var(--border-light);
230+
border-radius: 0.6rem;
231+
overflow: hidden;
232+
background: var(--bg-primary);
217233
}
218234

219-
.offer-card-title {
235+
.home-intro-content details.offer-card {
220236
margin: 0;
221-
padding: 0.9rem 1.1rem;
222-
font-size: 1rem;
237+
padding: 0;
238+
border: 0;
239+
border-radius: 0;
240+
background: transparent;
241+
box-shadow: none;
242+
border-bottom: 1px solid var(--border-light);
243+
}
244+
245+
.home-intro-content details.offer-card:last-child {
246+
border-bottom: none;
247+
}
248+
249+
.home-intro-content details.offer-card[open] {
250+
background: var(--button-bg);
251+
box-shadow: inset 0 1px 0 var(--shadow-light-alt);
252+
}
253+
254+
.home-intro-content details.offer-card summary.offer-card-title {
255+
display: flex;
256+
align-items: center;
257+
justify-content: space-between;
258+
gap: 0.75rem;
259+
min-height: 44px;
260+
padding: 0.75rem 2.25rem 0.75rem 1rem;
261+
font-family: Inter, system-ui, -apple-system, sans-serif;
262+
font-size: 0.98rem;
223263
font-weight: 600;
224264
color: var(--text-primary);
265+
margin: 0;
266+
cursor: pointer;
267+
list-style: none;
268+
overflow-wrap: break-word;
269+
word-break: break-word;
270+
}
271+
272+
.home-intro-content details.offer-card summary.offer-card-title::-webkit-details-marker {
273+
display: none;
274+
}
275+
276+
.home-intro-content details.offer-card summary.offer-card-title::after {
277+
content: "";
278+
flex-shrink: 0;
279+
width: 0.45rem;
280+
height: 0.45rem;
281+
margin-left: auto;
282+
border-right: 2px solid var(--text-secondary);
283+
border-bottom: 2px solid var(--text-secondary);
284+
transform: rotate(45deg);
285+
opacity: 0.75;
286+
transition: transform 0.2s ease, opacity 0.15s ease;
287+
}
288+
289+
.home-intro-content details.offer-card[open] summary.offer-card-title::after {
290+
transform: rotate(-135deg);
291+
margin-top: 0.25rem;
225292
}
226293

227-
.offer-card-body {
228-
padding: 0 1.1rem 1rem 0.9rem;
294+
.home-intro-content details.offer-card summary.offer-card-title:hover::after {
295+
opacity: 1;
296+
}
297+
298+
.home-intro-content details.offer-card summary.offer-card-title:focus {
299+
outline: none;
300+
}
301+
302+
.home-intro-content details.offer-card summary.offer-card-title:focus-visible {
303+
outline: none;
304+
box-shadow: inset 0 0 0 2px var(--button-text-hover);
305+
}
306+
307+
.home-intro-content details.offer-card .offer-card-body {
308+
font-family: Inter, system-ui, -apple-system, sans-serif;
229309
font-size: 0.9rem;
230310
line-height: 1.55;
231311
color: var(--text-secondary);
232-
flex: 1;
312+
margin: 0;
313+
padding: 0 1rem 1rem 1rem;
314+
overflow-wrap: break-word;
315+
word-break: break-word;
233316
}
234317

235-
.offer-card-body p {
318+
.home-intro-content details.offer-card .offer-card-body p {
236319
margin: 0;
237320
}
238321

@@ -332,7 +415,7 @@ a.neumorphic-button:active>span {
332415
box-shadow: -0.3rem -0.3rem 0.6rem var(--shadow-light), 0.3rem 0.3rem 0.6rem var(--shadow-dark);
333416
}
334417

335-
/* FAQ section – same width and padding as category-section so it aligns above/below */
418+
/* FAQ section – width aligns with category-section; accordion list (no per-row neumorphic) */
336419
.faq-section {
337420
box-sizing: border-box;
338421
width: min(75rem, 100%);
@@ -342,50 +425,117 @@ a.neumorphic-button:active>span {
342425
margin-bottom: 2rem;
343426
}
344427

345-
/* Homepage: FAQ follows same design as content above (width, padding, neumorphic cards) */
428+
/* Homepage FAQ: spacing beats global internal.css .faq-section */
346429
#main-content .faq-section {
430+
box-sizing: border-box;
431+
width: min(75rem, 100%);
432+
max-width: 100%;
433+
margin-inline: auto;
434+
margin-top: 2.5rem;
435+
margin-bottom: 2rem;
347436
padding-inline: 0.35rem;
348437
}
349438

350439
#main-content .faq-section-title {
351-
font-family: Inter, sans-serif;
352-
font-size: 1.1rem;
440+
font-family: Inter, system-ui, -apple-system, sans-serif;
441+
font-size: 1.05rem;
353442
font-weight: 600;
354443
color: var(--text-secondary);
355-
text-transform: uppercase;
356-
letter-spacing: 3px;
357-
margin-bottom: 2rem;
444+
text-transform: none;
445+
letter-spacing: 0.02em;
446+
margin: 0 0 1rem 0;
358447
}
359448

360-
#main-content .faq-item {
361-
background: var(--button-bg);
362-
padding: 1.25rem 1.1rem;
363-
border-radius: 0.8rem;
449+
#main-content .faq-list {
450+
margin: 0;
364451
border: 1px solid var(--border-light);
365-
--shadow-light: var(--shadow-light-alt);
366-
--shadow-dark: var(--shadow-dark-alt);
367-
box-shadow: -0.25rem -0.25rem 0.5rem var(--shadow-light), 0.25rem 0.25rem 0.5rem var(--shadow-dark);
368-
margin-bottom: 1.25rem;
452+
border-radius: 0.6rem;
453+
overflow: hidden;
454+
background: var(--bg-primary);
455+
}
456+
457+
#main-content details.faq-item {
458+
margin: 0;
459+
padding: 0;
460+
border: 0;
461+
border-radius: 0;
462+
background: transparent;
463+
box-shadow: none;
464+
border-bottom: 1px solid var(--border-light);
369465
}
370466

371-
#main-content .faq-item:last-child {
467+
#main-content details.faq-item:last-child {
372468
margin-bottom: 0;
469+
border-bottom: none;
470+
}
471+
472+
#main-content details.faq-item[open] {
473+
background: var(--button-bg);
474+
box-shadow: inset 0 1px 0 var(--shadow-light-alt);
373475
}
374476

375-
#main-content .faq-question {
477+
#main-content details.faq-item summary.faq-question {
478+
display: flex;
479+
align-items: center;
480+
justify-content: space-between;
481+
gap: 0.75rem;
482+
min-height: 44px;
483+
padding: 0.75rem 2.25rem 0.75rem 1rem;
376484
font-family: Inter, system-ui, -apple-system, sans-serif;
377-
font-size: 1rem;
485+
font-size: 0.98rem;
378486
font-weight: 600;
379487
color: var(--text-primary);
380-
margin: 0 0 0.5rem 0;
488+
margin: 0;
489+
cursor: pointer;
490+
list-style: none;
491+
overflow-wrap: break-word;
492+
word-break: break-word;
381493
}
382494

383-
#main-content .faq-answer {
495+
#main-content details.faq-item summary.faq-question::-webkit-details-marker {
496+
display: none;
497+
}
498+
499+
#main-content details.faq-item summary.faq-question::after {
500+
content: "";
501+
flex-shrink: 0;
502+
width: 0.45rem;
503+
height: 0.45rem;
504+
margin-left: auto;
505+
border-right: 2px solid var(--text-secondary);
506+
border-bottom: 2px solid var(--text-secondary);
507+
transform: rotate(45deg);
508+
opacity: 0.75;
509+
transition: transform 0.2s ease, opacity 0.15s ease;
510+
}
511+
512+
#main-content details.faq-item[open] summary.faq-question::after {
513+
transform: rotate(-135deg);
514+
margin-top: 0.25rem;
515+
}
516+
517+
#main-content details.faq-item summary.faq-question:hover::after {
518+
opacity: 1;
519+
}
520+
521+
#main-content details.faq-item summary.faq-question:focus {
522+
outline: none;
523+
}
524+
525+
#main-content details.faq-item summary.faq-question:focus-visible {
526+
outline: none;
527+
box-shadow: inset 0 0 0 2px var(--button-text-hover);
528+
}
529+
530+
#main-content details.faq-item .faq-answer {
384531
font-family: Inter, system-ui, -apple-system, sans-serif;
385532
font-size: 0.9rem;
386533
line-height: 1.55;
387534
color: var(--text-secondary);
388535
margin: 0;
536+
padding: 0 1rem 1rem 1rem;
537+
overflow-wrap: break-word;
538+
word-break: break-word;
389539
}
390540

391541
.faq-section-title {
@@ -400,17 +550,17 @@ a.neumorphic-button:active>span {
400550
}
401551

402552
.faq-item {
403-
margin-bottom: 1rem;
553+
margin-bottom: 0;
404554
}
405555

406556
.faq-question {
407557
font-weight: 600;
408558
color: var(--text-primary);
409-
margin: 0 0 0.25rem 0;
559+
margin: 0;
410560
}
411561

412562
.faq-answer {
413-
margin: 0 0 1rem 0;
563+
margin: 0;
414564
color: var(--text-secondary);
415565
line-height: 1.5;
416566
}
@@ -436,16 +586,22 @@ a.neumorphic-button:active>span {
436586
padding: 1.25rem;
437587
}
438588

439-
.offer-card-title {
440-
padding: 0.75rem 1rem;
589+
.home-intro-content details.offer-card summary.offer-card-title {
590+
padding: 0.65rem 2rem 0.65rem 0.85rem;
591+
font-size: 0.95rem;
441592
}
442593

443-
.offer-card-body {
444-
padding: 0 1rem 0.75rem 0.75rem;
594+
.home-intro-content details.offer-card .offer-card-body {
595+
padding: 0 0.85rem 0.9rem 0.85rem;
445596
}
446597

447-
#main-content .faq-item {
448-
padding: 1rem 1rem;
598+
#main-content details.faq-item summary.faq-question {
599+
padding: 0.65rem 2rem 0.65rem 0.85rem;
600+
font-size: 0.95rem;
601+
}
602+
603+
#main-content details.faq-item .faq-answer {
604+
padding: 0 0.85rem 0.9rem 0.85rem;
449605
}
450606

451607
.home-intro-content ul li {
@@ -481,8 +637,24 @@ body {
481637
padding: 1rem;
482638
}
483639

484-
#main-content .faq-item {
485-
padding: 0.875rem 0.9rem;
640+
#main-content details.faq-item summary.faq-question {
641+
padding: 0.6rem 1.85rem 0.6rem 0.75rem;
642+
font-size: 0.92rem;
643+
}
644+
645+
#main-content details.faq-item .faq-answer {
646+
padding: 0 0.75rem 0.85rem 0.75rem;
647+
font-size: 0.875rem;
648+
}
649+
650+
.home-intro-content details.offer-card summary.offer-card-title {
651+
padding: 0.6rem 1.85rem 0.6rem 0.75rem;
652+
font-size: 0.92rem;
653+
}
654+
655+
.home-intro-content details.offer-card .offer-card-body {
656+
padding: 0 0.75rem 0.85rem 0.75rem;
657+
font-size: 0.875rem;
486658
}
487659

488660
.faq-section {

0 commit comments

Comments
 (0)