From f6086f91037fbdfb07a512c04f98a58f1ff773d9 Mon Sep 17 00:00:00 2001 From: geun <1416geun@naver.com> Date: Thu, 4 Jun 2026 11:31:07 +0900 Subject: [PATCH] css --- src/css/common.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/css/common.css b/src/css/common.css index 3be72e0..c9bc359 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -714,7 +714,6 @@ body{overflow-x:hidden;} .fc-stat-item__value {font-size:2.25rem;font-weight:800;color:var(--color-primary);letter-spacing:-.03em;line-height:1;} .fc-stat-item__label {font-size:.8rem;font-weight:500;color:#888;line-height:1.4;} - .fc-domains { margin-bottom: 8rem; } .fc-domains__grid { display: flex; gap: 1.25rem; height: 420px; } @@ -727,8 +726,14 @@ body{overflow-x:hidden;} .fc-domain-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 45%, transparent 100%); transition: background 0.4s ease; } .fc-domain-card:hover .fc-domain-card__overlay { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.15) 100%); } -@media (max-width: 1024px) { .fc-domains__grid { grid-template-columns: repeat(3, 1fr); } } -@media (max-width: 640px) { .fc-domains__grid { grid-template-columns: repeat(2, 1fr); } } +.fc-domain-card__label { font-size: 1.125rem; font-weight: 700; color: #fff; line-height: 1.3; } + +.fc-domain-card__desc { font-size: .8rem; line-height: 1.65; color: rgba(255,255,255,.85); margin: .5rem 0 0; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height 0.4s ease, opacity 0.35s ease, transform 0.35s ease; } +.fc-domain-card:hover .fc-domain-card__desc { max-height: 6rem; opacity: 1; transform: translateY(0); } + +@media (max-width: 1024px) { .fc-domains__grid { flex-wrap: wrap; height: auto; } .fc-domain-card { flex: 0 0 calc(33.33% - 1rem); aspect-ratio: 3/4; } } +@media (max-width: 640px) { .fc-domain-card { flex: 0 0 calc(50% - 0.625rem); } } + .fc-functions { margin-bottom: 8rem; } .fc-functions__body {display:flex;gap:5rem;align-items:flex-start;}