diff --git a/protected/mobile/mobile.css b/protected/mobile/mobile.css index 1269e01..e4b94bc 100644 --- a/protected/mobile/mobile.css +++ b/protected/mobile/mobile.css @@ -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;