/* Round 4 cards: borderless with a soft shadow, plus four ways to define the edge. Switch with a class on (e1 to e4). */ .tgrid{display:grid;gap:1.5rem} .tgrid--inside{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))} .tgrid--proj{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))} .tgrid--find{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))} .tcard{background:var(--paper-card);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit; position:relative;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease} .tcard__art{aspect-ratio:5/3;display:grid;place-items:center;background:var(--t);overflow:hidden} .tcard__art img{width:44%} .tcard--photo .tcard__art{aspect-ratio:4/3} .tcard--photo .tcard__art img{width:100%;height:100%;object-fit:cover} .tcard--find .tcard__art{aspect-ratio:16/10;background:var(--photo-paper)} .tcard--find .tcard__art img{width:100%;height:100%;object-fit:cover} /* images that lose their point when cropped: shown whole, over a blurred copy of themselves instead of bare paper, so the frame still reads as full-bleed */ .tcard--find.tcard--contain .tcard__art{position:relative} .tcard--find.tcard--contain .tcard__art::before{content:'';position:absolute;inset:-12%; background:var(--img) center/cover no-repeat;filter:blur(18px) saturate(1.1);opacity:.85} .tcard--find.tcard--contain .tcard__art img{position:relative;object-fit:contain} .tcard__body{padding:.9rem 1.05rem 1.15rem;flex:1} .tcard__name{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display); font-weight:700;font-size:1.08rem} .tcard__name i{width:10px;height:10px;border-radius:50%;background:var(--c); display:inline-block;font-style:normal;flex:0 0 auto} .tcard__body p{font-size:.88rem;color:var(--text-muted);margin-top:.32rem;line-height:1.45} .tcard h3{font-family:var(--font-display);font-size:1.1rem;margin-top:.45rem} .tcard--find .tcard__body{padding:.75rem .85rem 1rem} .tcard--find h3{font-size:.96rem;line-height:1.28;margin:.4rem 0 .28rem} .tcard--find p{font-size:.82rem; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tag{display:inline-block;font-family:var(--font-body);font-size:.68rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:var(--r-pill); background:var(--c);color:#fff} .tag--ink{color:var(--text)} /* --------------------------------------------------------------- E1 · HAIRLINE. A 1px warm grey line all the way round. The edge is always readable, even where a white card meets a white ground. --------------------------------------------------------------- */ .e1 .tcard{border:1px solid rgba(45,42,38,.11);box-shadow:0 2px 10px rgba(45,42,38,.08)} .e1 .tcard__art{border-bottom:1px solid rgba(45,42,38,.09)} .e1 .tcard:hover{transform:translate(-2px,-3px);border-color:rgba(45,42,38,.18); box-shadow:0 8px 22px rgba(45,42,38,.14)} /* --------------------------------------------------------------- E2 · INSET RING. Same idea drawn inside the card with a shadow, so the corner radius stays perfectly crisp and no layout width changes. --------------------------------------------------------------- */ .e2 .tcard{box-shadow:inset 0 0 0 1px rgba(45,42,38,.10), 0 2px 10px rgba(45,42,38,.08)} .e2 .tcard:hover{transform:translate(-2px,-3px); box-shadow:inset 0 0 0 1px rgba(45,42,38,.16), 0 8px 22px rgba(45,42,38,.14)} /* --------------------------------------------------------------- E3 · TINTED EDGE. The hairline takes the card's own category colour, heavily diluted. Definition and a little colour in one move. --------------------------------------------------------------- */ .e3 .tcard{border:1px solid color-mix(in srgb, var(--c) 38%, #fff); box-shadow:0 2px 10px rgba(45,42,38,.08)} .e3 .tcard__art{border-bottom:1px solid color-mix(in srgb, var(--c) 30%, #fff)} .e3 .tcard:hover{transform:translate(-2px,-3px); border-color:color-mix(in srgb, var(--c) 65%, #fff); box-shadow:0 8px 22px rgba(45,42,38,.14)} /* --------------------------------------------------------------- E4 · NO LINE, TIGHTER SHADOW. Two shadows: a 1px contact shadow that draws the edge, and a wide soft one that floats the card. --------------------------------------------------------------- */ .e4 .tcard{box-shadow:0 1px 2px rgba(45,42,38,.18), 0 10px 24px rgba(45,42,38,.10)} .e4 .tcard:hover{transform:translate(-2px,-3px); box-shadow:0 2px 3px rgba(45,42,38,.20), 0 16px 34px rgba(45,42,38,.16)} /* --------------------------------------------------------------- SUBHEADS. The section's colour, solid, on a slight tilt. No tape. --------------------------------------------------------------- */ .subhead{display:inline-block;font-family:var(--font-display);font-weight:800; font-size:clamp(1.45rem,3.1vw,2.1rem);padding:.35rem 1.25rem;border-radius:var(--r-sm); transform:rotate(-1deg);background:var(--c);color:#fff; box-shadow:3px 4px 0 rgba(45,42,38,.16)} .subhead--ink{color:var(--text)} /* the switcher */ .switch{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:80; display:flex;gap:.45rem;align-items:center;background:rgba(255,255,255,.96); border-radius:var(--r-pill);padding:.45rem .6rem;box-shadow:0 4px 18px rgba(0,0,0,.20)} .switch b{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em; text-transform:uppercase;color:var(--text-faint);padding:0 .35rem} .switch button{font-family:var(--font-display);font-weight:700;font-size:.8rem;border:none; background:var(--bg);border-radius:var(--r-pill);padding:.35rem .75rem;cursor:pointer; color:var(--text-muted)} .switch button:hover{background:var(--yellow-light);color:var(--text)} .switch button.on{background:var(--yellow);color:var(--text)} .switch .sep{width:1px;height:20px;background:var(--line);margin:0 .25rem}