joh/customer-presentation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile: enlarge card icons and tuck into the corner

Browse source 
Icons grow 72px → 148px and shift to top:-18px right:-18px so they
overflow the card edges. .m-cap gets overflow:hidden so the bleed
is clipped at the tile boundary — icon reads as an ornament tucked
into the top-right corner rather than a floating sticker. Num,
eyebrow, and title rows bump their right padding from 92 to 120 so
the text still clears the icon's visible silhouette.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arlind Ukshini 2026-04-24 10:39:27 +02:00
parent cd9bd71f4b
commit 8cfe72296b
1 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
protected/mobile/mobile.css
View file

@ -321,11 +321,14 @@ html, body {
box-shadow:
0 16px 28px -22px rgba(46, 46, 40, 0.45),
0 4px 10px -6px rgba(46, 46, 40, 0.18);
min-height: 108px;
min-height: 120px;
/* Per-layer backgrounds match the desktop palette: sage, slate,
clay, plum. Text is flipped to paper for contrast. */
background: #7a8c70; /* default = layer 0, overridden below */
color: #fbf6e9;
/* Clip the oversized corner icon so it reads as "tucked into the
corner" rather than floating outside the tile. */
overflow: hidden;
}
.m-cap:last-child { margin-bottom: 0; }
.m-cap:nth-of-type(1) { background: #7a8c70; } /* sage — The AI */
@ -335,13 +338,17 @@ html, body {
.m-cap-icon {
position: absolute;
top: 14px;
right: 14px;
width: 72px;
height: 72px;
/* Negative offsets push the icon up and into the corner, past the
card edges. The parent's overflow: hidden clips the overflow so
the icon reads as a corner ornament that's been tucked into the
tile rather than sitting inside it. */
top: -18px;
right: -18px;
width: 148px;
height: 148px;
object-fit: contain;
object-position: center;
opacity: 0.98;
object-position: right top;
opacity: 1;
pointer-events: none;
}
.m-cap-num {
@ -354,7 +361,7 @@ html, body {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
/* Keep clear of the icon in the top-right. */
padding-right: 92px;
padding-right: 120px;
}
.m-cap-eyebrow {
font-family: "Manrope", system-ui, sans-serif;
@ -364,7 +371,7 @@ html, body {
text-transform: uppercase;
color: rgba(251, 246, 233, 0.8);
margin: 0 0 10px 0;
padding-right: 92px;
padding-right: 120px;
}
.m-cap-title {
font-family: "Newsreader", Georgia, serif;
@ -375,7 +382,7 @@ html, body {
margin: 0 0 12px 0;
color: #fbf6e9;
text-wrap: pretty;
padding-right: 92px;
padding-right: 120px;
}
.m-cap-title b {
font-weight: 700;