quikcue/taawunu-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX audit fixes: stronger hero overlays, text-shadow for contrast, fix broken nav on about/gallery, constrain story blocks, fix photo mosaic object-position, normalize footers

Browse Source
This commit is contained in:
Omair Saleh
2026-03-09 01:15:20 +08:00
parent c476724f9a
commit 04ff75a853
6 changed files with 57 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/css/style.css
+41 -15
View File
@@ -232,9 +232,9 @@ p { margin-bottom: 16px; max-width: 720px; }
inset: 0;
background: linear-gradient(
to bottom,
rgba(61, 31, 21, 0.3) 0%,
rgba(61, 31, 21, 0.5) 40%,
rgba(61, 31, 21, 0.85) 100%
rgba(61, 31, 21, 0.35) 0%,
rgba(61, 31, 21, 0.55) 40%,
rgba(61, 31, 21, 0.88) 100%
);
}
.hero-content {
@@ -447,7 +447,8 @@ p { margin-bottom: 16px; max-width: 720px; }
.story-block {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
min-height: 440px;
max-height: 600px;
overflow: hidden;
}
.story-block.reverse { direction: rtl; }
@@ -488,7 +489,12 @@ p { margin-bottom: 16px; max-width: 720px; }
@media (max-width: 768px) {
.story-block,
.story-block.reverse { grid-template-columns: 1fr; direction: ltr; }
.story-block.reverse {
grid-template-columns: 1fr;
direction: ltr;
max-height: none;
}
.story-block .story-photo { max-height: 320px; }
.story-text { padding: 40px 24px; }
}
@@ -922,12 +928,18 @@ p { margin-bottom: 16px; max-width: 720px; }
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(61,31,21,0.25) 0%, rgba(61,31,21,0.6) 50%, rgba(61,31,21,0.9) 100%);
background: linear-gradient(
to bottom,
rgba(61,31,21,0.55) 0%,
rgba(61,31,21,0.65) 30%,
rgba(61,31,21,0.78) 60%,
rgba(61,31,21,0.92) 100%
);
}
.page-hero-visual .container { position: relative; z-index: 1; }
.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; }
.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; }
.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.8); max-width: 600px; }
.page-hero-visual .label { color: var(--gold); margin-bottom: 8px; text-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.page-hero-visual h1 { color: var(--cream); margin-bottom: 16px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.page-hero-visual p { font-size: 18px; color: rgba(245,239,224,0.85); max-width: 600px; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
/* ─── Photo Break (cinematic full-width strip) ─── */
.photo-break {
@@ -947,7 +959,13 @@ p { margin-bottom: 16px; max-width: 720px; }
display: flex;
align-items: center;
justify-content: center;
background: rgba(61,31,21,0.4);
background: linear-gradient(
to bottom,
rgba(61,31,21,0.35) 0%,
rgba(61,31,21,0.55) 40%,
rgba(61,31,21,0.6) 60%,
rgba(61,31,21,0.45) 100%
);
}
.photo-break .photo-break-text {
text-align: center;
@@ -959,12 +977,14 @@ p { margin-bottom: 16px; max-width: 720px; }
color: var(--cream);
font-size: clamp(1.4rem, 3vw, 2rem);
margin-bottom: 8px;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.photo-break .photo-break-text p {
font-size: 15px;
color: rgba(245,239,224,0.7);
color: rgba(245,239,224,0.8);
max-width: 500px;
margin: 0 auto;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
.photo-break { height: 240px; }
@@ -998,24 +1018,25 @@ p { margin-bottom: 16px; max-width: 720px; }
/* ─── Support Card with image ─── */
.support-card-img {
height: 180px;
height: 160px;
overflow: hidden;
margin: -32px -32px 24px -32px;
margin: -32px -32px 20px -32px;
border-radius: 4px 4px 0 0;
}
.support-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 60%;
transition: transform 0.4s;
}
.support-card:hover .support-card-img img { transform: scale(1.05); }
/* ─── Pillar Card with thumbnail ─── */
.pillar-card-thumb {
height: 140px;
height: 130px;
overflow: hidden;
margin: -32px -24px 20px -24px;
margin: -32px -24px 16px -24px;
border-radius: 0;
}
.pillar-card-thumb img {
@@ -1041,8 +1062,13 @@ p { margin-bottom: 16px; max-width: 720px; }
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 70%;
transition: transform 0.5s;
}
.photo-mosaic .mosaic-hero img,
.photo-mosaic img.mosaic-hero {
object-position: center 80%;
}
.photo-mosaic img:hover { transform: scale(1.03); }
@media (max-width: 768px) {
.photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; height: auto; }