.portfolio-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(380px, 1fr));
gap: 32px;
}
.portfolio-more {
display: flex;
justify-content: center;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.portfolio-group-header {
max-width: 100%;
text-align: start;
margin-bottom: clamp(2rem, 4vw, 4rem);
}
.portfolio-group-label {
display: inline-block;
margin-bottom: 1.2rem;
font-size: clamp(0.78rem, 0.7vw, 1.2rem);
font-weight: 600;
letter-spacing: 0.24rem;
text-transform: uppercase;
opacity: 1;
color: var(--primary);
}
.portfolio-group-header h3 {
margin-bottom: 1.6rem;
font-size: clamp(2.2rem, 4.5vw, 4rem);
line-height: 1.02;
letter-spacing: 0em;
max-width: 100%;
}
.portfolio-group-header p {
max-width: 560px;
font-size: clamp(1rem, 1.4vw, 1.7rem);
line-height: 1.7;
opacity: 0.72;
}
.portfolio-subgroup {
margin-bottom: clamp(2rem, 4vw, 4rem);
}
.portfolio-subgroup:last-child {
margin-bottom: 0;
}
.portfolio-subgroup-label {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.6rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16rem;
text-transform: uppercase;
opacity: 0.85;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot-online {
background: #22c55e;
box-shadow:
0 0 8px rgba(34,197,94,.8),
0 0 16px rgba(34,197,94,.5);
}
.status-dot-beta {
background: #22c55e;
opacity: .35;
box-shadow: none;
}
.portfolio-layout {
display: flex;
gap: 2.4rem;
justify-content: space-between;
}
.portfolio-layout-beauty {
align-items: stretch;
}
.portfolio-layout-beauty .project-card {
flex: 1;
}
.portfolio-layout-beauty .project-image {
aspect-ratio: 16 / 11;
}
.project-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 3rem;
background: var(--white);
border: 1px solid var(--border);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.035),
0 2px 8px rgba(0, 0, 0, 0.025);
transition:
border-color 0.45s ease,
box-shadow 0.45s ease,
transform 0.45s ease;
backface-visibility: hidden;
will-change: transform;
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
}
.project-link.project-card {
cursor: pointer;
}
.project-card:hover {
transform: translateY(-10px);
border-color: var(--border-light);
box-shadow:
0 30px 90px rgba(0,0,0,0.35),
0 0 0 1px rgba(255,255,255,0.02);
}
.project-card.reveal {
will-change: transform, opacity;
}
.project-image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.project-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
to bottom,
var(--primary),
var(--primary-glow)
);
}
.project-placeholder-text {
color: var(--white);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.9;
}
.project-placeholder-logo {
max-width: 80%;
max-height: 80%;
object-fit: contain;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}
.project-checklist {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.project-checklist li {
position: relative;
padding-left: 28px;
font-size: 0.92rem;
color: var(--text-light);
}
.project-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.project-checklist li.done {
color: var(--text);
}
.project-checklist li.done::before {
content: "\2713";
background: #22c55e;
color: #fff;
font-size: 0.62rem;
font-weight: 800;
line-height: 18px;
text-align: center;
}
.project-checklist li.ongoing::before {
background: rgba(245, 158, 11, 0.15);
border: 1px solid rgba(245, 158, 11, 0.4);
}
.project-checklist li.ongoing::after {
content: "";
position: absolute;
left: 7px;
top: 0.65em;
width: 5px;
height: 5px;
border-radius: 50%;
background: #f59e0b;
animation: checkDotPulse 1.4s ease-in-out infinite;
}
@keyframes checkDotPulse {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.project-checklist li.ongoing::after {
animation: none;
}
}
.project-checklist {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 1.25rem 0;
}
.project-checklist li {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: 0.85rem;
font-weight: 600;
}
.project-checklist li::before {
content: "";
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
}
.project-checklist li.done {
color: var(--text);
}
.project-checklist li.done::before {
content: "✓";
background: var(--primary);
color: var(--white);
}
.project-checklist li.ongoing {
color: var(--text-light);
}
.project-checklist li.ongoing::before {
border: 2px solid var(--primary-border);
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
transition:
transform 0.45s ease,
filter 0.35s ease;
}
.project-card:hover .project-image img {
transform: scale(1.03);
}
.project-content {
padding: 2rem;
}
.project-tag {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.8rem;
padding: 0.9rem 1.6rem;
border-radius: 999px;
background: var(--glass-white-strong);
color: var(--text);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.16rem;
text-transform: uppercase;
box-shadow:
0 10px 30px rgba(0,0,0,0.14);
backdrop-filter: blur(var(--blur-glass));
-webkit-backdrop-filter: blur(var(--blur-glass));
opacity: 1;
}
.project-content h3 {
margin-bottom: 0.3rem;
font-size: clamp(2rem, 1.45vw, 3rem);
min-height: 1.8rem;
line-height: 1.12;
letter-spacing: 0em;
}
.project-content p {
font-size: clamp(1.02rem, 0.92vw, 1.55rem);
min-height: 3rem;
line-height: 1.75;
opacity: 0.72;
}
.project-result {
margin-top: 1rem;
padding: 0.9rem 1.1rem;
border-radius: 14px;
background: var(--primary-soft);
border-left: 3px solid var(--primary);
color: var(--text) !important;
font-size: 0.92rem !important;
font-weight: 600;
line-height: 1.6 !important;
opacity: 1 !important;
min-height: 0 !important;
}
.project-status {
position: absolute;
top: 16px;
left: 16px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 1rem;
border-radius: 999px;
background: rgba(17, 17, 17, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12);
color: #ffffff;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.project-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
}
.status-online::before {
background: #22c55e;
box-shadow:
0 0 8px rgba(34,197,94,.8),
0 0 16px rgba(34,197,94,.5);
}
.status-beta::before {
background: #22c55e;
opacity: .35;
box-shadow: none;
}
.project-status:hover {
opacity: 1;
visibility: visible;
}
.project-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-top: 2rem;
}
.project-card-actions .btn-primary,
.project-card-actions .btn-secondary {
flex: 1;
padding: 14px 20px;
font-size: 0.92rem;
}
@media (max-width: 768px) {
.project-tag {
padding: 0.7rem 1rem;
font-size: clamp(0.62rem, 1.8vw, 0.68rem) !important;
letter-spacing: 0.08rem;
}
}
@media (max-width: 420px) {
.project-tag{
padding: 0.55rem 0.85rem;
font-size: clamp(0.55rem, 2vw, 0.62rem) !important;
letter-spacing: 0.05rem;
}
}
@media (min-width: 2300px) {
.project-content h3 {
font-size: 2.2rem;
}
.project-content p {
font-size: 1.25rem;
}
}
@media (max-width: 1680px) {
.project-content {
flex: 0 0 33%;
display: flex;
flex-direction: column;
}
.project-content h3 {
font-size: 2.2rem;
line-height: 1.1;
}
.project-content p {
font-size: clamp(1.32rem, 0.9vw, 1.5rem);
line-height: 1.7;
}
}
@media (max-width: 1400px) {
.project-card {
display: flex;
flex-direction: column;
}
.project-content {
flex: 1;
display: flex;
flex-direction: column;
}
.project-content h3 {
font-size: 2rem;
line-height: 1.1;
}
.project-content p {
font-size: 1.2rem;
line-height: 1.7;
}
}
@media (max-width: 1100px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-layout,
.portfolio-layout-beauty {
display: flex;
flex-direction: column;
gap: 2rem;
}
}
@media (max-width: 768px) {
.portfolio-group-header {
text-align: start;
}
.portfolio-group-header p {
margin-inline: auto;
}
.project-content {
padding: 18px 24px 24px;
text-align: left;
}
.project-content .project-tag,
.project-tag {
align-self: center;
}
.project-content h3 {
font-size: 1.6rem;
margin-bottom: 0.4rem;
color: var(--text);
}
.project-content p {
font-size: 0.95rem;
color: var(--text-light);
}
}
@media (min-width: 2300px) {
.project-content h3 {
font-size: 2.2rem;
}
.project-content p {
font-size: 1.25rem;
}
}
@media (max-width: 1680px) {
.project-content {
flex: 0 0 33%;
display: flex;
flex-direction: column;
}
.project-content h3 {
font-size: 2.2rem;
line-height: 1.1;
}
.project-content p {
font-size: clamp(1.32rem, 0.9vw, 1.5rem);
line-height: 1.7;
}
}
@media (max-width: 1400px) {
.project-card {
display: flex;
flex-direction: column;
}
.project-content {
flex: 1;
display: flex;
flex-direction: column;
}
.project-content h3 {
font-size: 2rem;
line-height: 1.1;
}
.project-content p {
font-size: 1.2rem;
line-height: 1.7;
}
}
@media (max-width: 1100px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
.portfolio-layout,
.portfolio-layout-beauty {
display: flex;
flex-direction: column;
gap: 2rem;
}
}
@media (max-width: 768px) {
.portfolio-group-header {
text-align: start;
}
.portfolio-group-header p {
margin-inline: auto;
}
.project-content {
padding: 18px 24px 24px;
text-align: left;
}
.project-content .project-tag,
.project-tag {
align-self: center;
}
.project-content h3 {
font-size: 1.6rem;
margin-bottom: 0.4rem;
color: var(--text);
}
.project-content p {
font-size: 0.95rem;
color: var(--text-light);
}
}