/* STACKD Community — Styles (P1)
* All selectors are scoped to .community-* classes or #community-auth-slot
* descendants so they cannot collide with the gallery's own styles.
*
* Also defines the shared header layout used by every /widgets/* page —
* gallery, /u/, /me/, /submit/, /admin/. Each page links this stylesheet
* via in .
*/
/* === Shared page header — applies to every /widgets/* page === */
header {
position: sticky; top: 0; z-index: 100;
background: rgba(244, 244, 240, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
padding: 16px 32px;
display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; min-width: 0; }
.logo {
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 22px; letter-spacing: 0.03em;
color: #080808; font-weight: 500;
white-space: nowrap;
}
.section {
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 11px; letter-spacing: 0.14em;
color: #888; text-transform: uppercase;
white-space: nowrap;
}
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
font-size: 12.5px; color: #666;
padding: 8px 14px; border-radius: 999px;
font-weight: 500; transition: all 0.15s;
white-space: nowrap;
}
.nav a:hover { color: #080808; }
.nav a.active { color: #080808; background: rgba(0, 0, 0, 0.05); }
.nav a.cta-top {
background: #080808; color: #fff;
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 12px; font-weight: 500;
padding: 9px 18px; border-radius: 999px;
display: inline-flex; align-items: center;
white-space: nowrap;
transition: background 0.15s;
}
.nav a.cta-top:hover { background: #333; color: #fff; }
.cta-top .cta-short { display: none; }
/* Custom file input — wraps a hidden in a labelled
* button so we can show our own KR/EN button text instead of the
* browser's native "파일 선택" / "선택된 파일 없음". */
.file-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-btn {
display: inline-flex; align-items: center;
padding: 7px 14px; border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.14); background: #fff; color: #080808;
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 12px; line-height: 1; cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.file-btn:hover { border-color: #080808; }
.file-btn input[type="file"] {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
border: 0;
}
.file-name {
font-size: 12.5px; color: #888;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 240px;
}
.lang {
display: inline-flex; align-items: center; gap: 6px;
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 11.5px; color: #666;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 6px 12px; border-radius: 999px;
background: #fff; cursor: pointer;
transition: all 0.15s;
}
.lang:hover { border-color: #080808; color: #080808; }
@media (max-width: 900px) {
header { padding: 14px 20px; }
}
@media (max-width: 720px) {
.brand { gap: 8px; }
.nav { gap: 2px; }
.nav a {
font-size: 12px;
padding: 7px 9px;
}
.nav a.cta-top {
padding: 8px 12px;
font-size: 11.5px;
}
}
/* Header auth slot */
#community-auth-slot {
display: inline-flex;
align-items: center;
margin-right: 4px;
}
#community-auth-slot .community-signin {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px 7px 12px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
background: #fff;
color: #080808;
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 12px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
#community-auth-slot .community-signin:hover {
border-color: #080808;
}
#community-auth-slot .community-user {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 6px 4px 4px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
background: #fff;
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 12px;
color: #080808;
max-width: 200px;
}
#community-auth-slot .community-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
background: #ebebe6;
}
#community-auth-slot .community-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: #080808;
color: #fff;
font-size: 11px;
font-weight: 500;
}
#community-auth-slot .community-user-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #080808;
text-decoration: none;
transition: opacity 0.15s;
}
#community-auth-slot .community-user-link:hover { opacity: 0.7; }
#community-auth-slot .community-user-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
#community-auth-slot .community-signout {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: none;
border-radius: 50%;
background: transparent;
color: #888;
font-size: 12px;
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s;
}
#community-auth-slot .community-signout:hover {
background: #080808;
color: #fff;
}
/* Vote button — bento overlay (bottom-left of image, just above the
* widget name in the .t-foot strip) */
.community-vote-btn {
position: absolute;
bottom: 8px; /* hug the bottom of .t-media (image area) */
left: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #080808;
font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: background 0.15s, color 0.15s, transform 0.12s;
}
.community-vote-btn:hover {
background: #080808;
color: #fff;
transform: scale(1.04);
}
.community-vote-btn svg {
color: rgba(8, 8, 8, 0.35);
transition: color 0.15s, transform 0.18s;
}
.community-vote-btn:hover svg {
color: #ef4444;
}
.community-vote-btn.community-voted {
background: #fff1f1;
color: #080808;
}
.community-vote-btn.community-voted svg {
color: #ef4444;
transform: scale(1.08);
}
.community-vote-btn.community-voted:hover {
background: #080808;
color: #fff;
}
.community-vote-btn.community-voted:hover svg {
color: #ff9999;
}
/* Drawer placement — inline in the card, top-right */
.community-vote-btn.community-vote-drawer {
position: absolute;
top: 12px;
right: 56px; /* leaves room for the .add button on the drawer item */
left: auto; /* reset bento's left:10px */
bottom: auto;
z-index: 5;
}
@media (max-width: 900px) {
.community-vote-btn {
bottom: 6px;
left: 8px;
padding: 4px 8px;
font-size: 10.5px;
}
}
/* Compact auth chip on narrow widths — show only the Google mark when
* signed out, only the avatar when signed in. Tighten the gap between
* the avatar and the ✕ button so the chip stays compact. */
@media (max-width: 720px) {
#community-auth-slot .community-signin {
padding: 7px 9px;
gap: 0;
}
#community-auth-slot .community-signin span {
display: none;
}
#community-auth-slot .community-user {
padding: 2px;
}
#community-auth-slot .community-user-link {
gap: 0;
}
#community-auth-slot .community-user-name {
display: none;
}
}
/* Lang toggle has two labels — full text + a 1-char short label. The
* short one only appears at very narrow widths. Pages render both
* spans inside the same .lang button. */
.lang .lang-short { display: none; }
@media (max-width: 480px) {
.lang .lang-full { display: none; }
.lang .lang-short { display: inline; }
.lang { padding: 6px 10px; }
}