/* =========================== Projects page (scoped) Body must have: =========================== */ /* Respect users who prefer less motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Page header (compact hero) */ .projects .hero--compact{ width: min(100% - 2*var(--site-gutter), var(--site-max)); margin: 28px auto 8px; padding-inline: var(--site-gutter); } .projects .hero--compact h1{ margin: 8px 0 6px; line-height: 1.2; } .projects .hero--compact p{ color: var(--muted); margin: 0; } .projects main.grid{ width: min(100% - 2*var(--site-gutter), var(--site-max)); margin: 22px auto 64px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } /* Card */ .projects .card{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(0) scale(1); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } /* Subtle corner sheen */ .projects .card::before{ content:""; position:absolute; inset:0; background: radial-gradient(180px 120px at -10% -10%, rgba(34,197,94,.15), transparent 60%), radial-gradient(260px 160px at 110% -20%, rgba(79,70,229,.12), transparent 65%); pointer-events:none; opacity:.6; transition: opacity .35s ease; } /* Hover / focus “lift” */ .projects .card:hover, .projects .card:focus-within{ transform: translateY(-6px) scale(1.012); box-shadow: 0 18px 50px rgba(0,0,0,.45); border-color: rgba(34,197,94,.45); } .projects .card:hover::before, .projects .card:focus-within::before{ opacity:.9; } /* Thumb (image area) */ .projects .thumb{ position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.06) 60%), radial-gradient(900px 360px at -10% -20%, rgba(79,70,229,.18), transparent 60%), linear-gradient(0deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); } .projects .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1); opacity:.96; transition: transform .5s ease, opacity .35s ease, filter .35s ease; } .projects .card:hover .thumb img, .projects .card:focus-within .thumb img{ transform: scale(1.06); opacity: 1; filter: saturate(1.06); } /* Pill (top-left label) */ .projects .pill{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:12px; color:#072b18; background: linear-gradient(135deg, #34d399, #22c55e); box-shadow: 0 8px 28px rgba(34,197,94,.28); } .projects .pill svg{ width:14px; height:14px; } /* Content */ .projects .content{ padding:16px 16px 18px; } .projects .card h3{ margin:6px 0 8px; font-size:18px; } .projects .card p{ margin:0; color:var(--muted); text-align: justify; } /* Tags */ .projects .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; } .projects .tag{ font-size:12px; color:var(--muted); padding:4px 8px; border-radius:999px; border:1px dashed rgba(34,197,94,.38); background: rgba(34,197,94,.08); } /* Actions (buttons) */ .projects .actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; } .projects .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; font-weight:600; font-size:14px; border:1px solid var(--line); color:var(--text); background: rgba(255,255,255,.02); transition: transform .25s ease, border-color .25s ease, background .25s ease; } .projects .btn:hover, .projects .btn:focus-visible{ text-decoration:none; border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.10); transform: translateY(-2px); } .projects .btn.primary{ border-color: transparent; background: linear-gradient(135deg, #34d399, #22c55e); color:#052510; } .projects .btn.primary:hover, .projects .btn.primary:focus-visible{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(34,197,94,.28); } /* Keyboard focus ring for accessibility */ .projects :where(a,button,.card) :focus-visible, .projects :where(a,button,.card):focus-visible{ outline: 2px solid rgba(34,197,94,.7); outline-offset: 2px; } /* Footer */ .projects footer{ width: min(100% - 2*var(--site-gutter), var(--site-max)); margin: 24px auto 80px; padding: 0; color: var(--muted); font-size: 14px; } .projects .card h3 { margin: 6px 0 8px; font-size: 18px; text-align: justify; /* ✅ add this line */ text-justify: inter-word; /* optional: improves word spacing in justification */ }